/* ============================================================
   IN-SEC design system
   Black, terminal green, brass.
   ============================================================ */

:root{
  /* Surfaces - darkest to lightest */
  --ink-900:#0A0E0A; --ink-850:#0D120C; --ink-800:#101710;
  --ink-700:#161E15; --ink-600:#1F2A1E; --ink-500:#2C382A;

  /* Text */
  --bone-100:#F2EFE3;  /* headlines */
  --bone-200:#E8E4D5;  /* body */
  --bone-300:#B9C4B4;  /* secondary */
  --sage-400:#9AA396;  /* muted */
  --sage-500:#7E8A7B;  /* labels */
  --sage-600:#5E6B5C; --sage-700:#4A5548;  /* borders */

  /* Terminal green - see THE GREEN RULE */
  --term-500:#00E06A; --term-600:#00B856; --term-900:#06210F;
  --term-bg:#12200F;  --term-bd:#1F3A1B;

  /* Alarm - incident door only */
  --alarm-500:#FF5C5C; --alarm-300:#FF8A8A;
  --alarm-bg:#180F0F;  --alarm-bd:#3A1E1E;

  --brass-400:#C9C3A6;

  --r-card:10px; --r-ctl:5px;
  --wrap:1140px; --gut:28px;

  --fs:'IBM Plex Sans',system-ui,sans-serif;
  --fd:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;
  --fm:'IBM Plex Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink-900); color:var(--bone-200);
  font-family:var(--fs); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* ---- Type ---- */
h1,h2,h3{font-family:var(--fd);color:var(--bone-100);margin:0;
  line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(34px,5.5vw,58px);font-weight:700}
h2{font-size:clamp(26px,3.4vw,38px);font-weight:700}
h3{font-size:20px;font-weight:600}
p{margin:0 0 16px;max-width:66ch}
.lede{font-size:19px;color:var(--bone-300)}

/* Mono prompt line - a GREEN moment */
.prompt{font-family:var(--fm);font-size:13px;color:var(--term-500);
  letter-spacing:.04em;margin-bottom:18px}
.prompt::before{content:"$ ";opacity:.7}

/* Section marker - GREEN */
.marker{font-family:var(--fm);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--term-500);margin-bottom:10px}

.label{font-family:var(--fm);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sage-500)}

/* ---- Buttons ---- */
.btn{display:inline-block;font-family:var(--fd);font-weight:600;font-size:16px;
  padding:14px 26px;border-radius:var(--r-ctl);text-decoration:none;
  border:1px solid transparent;transition:transform .12s,background .12s}
.btn-primary{background:var(--term-500);color:var(--ink-900)}
.btn-primary:hover{background:var(--term-600);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--bone-100);border-color:var(--sage-700)}
.btn-ghost:hover{border-color:var(--sage-500)}

a{color:var(--term-500)}
a:hover{color:var(--term-600)}

/* ---- Nav ---- */
.nav{position:sticky;top:0;z-index:50;background:rgba(10,14,10,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--ink-600)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:66px}
.brand{font-family:var(--fd);font-weight:700;font-size:19px;
  color:var(--bone-100);text-decoration:none;letter-spacing:.02em}
.nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0;
  margin-left:auto;align-items:center}
.nav a:not(.btn):not(.brand){color:var(--bone-300);text-decoration:none;font-size:15px}
.nav a:not(.btn):not(.brand):hover{color:var(--bone-100)}
.nav .btn{padding:9px 18px;font-size:15px}

/* ---- Alert bar ---- */
.alertbar{background:var(--term-bg);border-bottom:1px solid var(--term-bd);
  font-size:14px;padding:10px 0}
.alertbar .wrap{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.alertbar strong{color:var(--bone-100);font-weight:600}

/* ---- Sections ---- */
section{padding:84px 0}
.section-tight{padding:56px 0}
.hero{padding:104px 0 88px;border-bottom:1px solid var(--ink-600)}
.hero .sub{font-size:20px;color:var(--bone-300);margin:22px 0 34px;max-width:60ch}

/* ---- Cards & the three-door router ---- */
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

.card{background:var(--ink-800);border:1px solid var(--ink-600);
  border-radius:var(--r-card);padding:26px;text-decoration:none;display:block}
.card h3{margin-bottom:8px}
.card p{color:var(--bone-300);font-size:15.5px;margin:0}
.card:hover{border-color:var(--sage-600)}

.card-service{border-left:3px solid var(--term-500)}
.card-alarm{border-left:3px solid var(--alarm-500);background:var(--alarm-bg);
  border-color:var(--alarm-bd)}
.card-alarm h3{color:var(--alarm-300)}

/* ---- Stats - figures are GREEN, labels are not ---- */
.stat{border-top:1px solid var(--ink-500);padding-top:18px}
.stat .fig{font-family:var(--fd);font-size:42px;font-weight:700;
  color:var(--term-500);line-height:1}
.stat .desc{color:var(--bone-300);font-size:15px;margin-top:8px}
.stat .src{font-family:var(--fm);font-size:11px;color:var(--sage-500);margin-top:10px}

/* ---- Price ---- */
.price{font-family:var(--fd);font-size:34px;font-weight:700;color:var(--term-500)}
.price small{font-size:14px;color:var(--sage-400);font-weight:400}

/* ---- Footer ---- */
footer{background:var(--ink-850);border-top:1px solid var(--ink-600);
  padding:52px 0 34px;font-size:14.5px;color:var(--sage-400)}
footer a{color:var(--bone-300);text-decoration:none}
footer a:hover{color:var(--bone-100)}
.foot-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin-bottom:30px}
.foot-grid h4{font-family:var(--fm);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sage-500);margin:0 0 12px;font-weight:500}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.legal{border-top:1px solid var(--ink-600);padding-top:22px;font-size:13px}

@media (max-width:720px){
  .nav ul li:not(.cta){display:none}
  section{padding:60px 0}
  .hero{padding:70px 0 58px}
}