/* ============================================================================
   AI for Biometrics — "Mission Control" site theme (home + 3 section pages).
   Dark ops-center: blueprint grid, mono telemetry labels, bracketed console
   modules, status readouts, glowing accents. Self-contained.
   ============================================================================ */
:root{
  --bg:#06090f; --bg2:#04060b; --panel:#0c1018; --panel2:#10151f; --panelhi:#131a26;
  --line:#1b2535; --line2:#27344a; --ink:#e7eef9; --mut:#7e8ca6; --dim:#566179;
  --accent:#34e3d4;            /* console teal — primary "live" accent */
  --accent2:#5b8cff;           /* signal blue */
  --gold:#e6b24c; --green:#46d08a; --amber:#e6a23c; --red:#ff6a6a; --teal:#34e3d4;
  --mono:ui-monospace,"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  --sans:"Segoe UI",Inter,system-ui,Arial,sans-serif;
  --r:6px; --glow:0 0 0 1px rgba(52,227,212,.0),0 0 18px rgba(52,227,212,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.62;min-height:100vh;
  background:
    linear-gradient(rgba(52,227,212,.025) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg,rgba(52,227,212,.025) 1px,transparent 1px) 0 0/44px 44px,
    radial-gradient(1200px 600px at 50% -10%,rgba(91,140,255,.08),transparent 60%),
    linear-gradient(180deg,#06090f,#04060b 80%);
  background-attachment:fixed;
}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:none;color:#7af0e5}

/* ---- command bar -------------------------------------------------------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;padding:9px 22px;
     background:linear-gradient(180deg,#080c14ee,#070a11dd);backdrop-filter:blur(8px);
     border-bottom:1px solid var(--line2);box-shadow:0 1px 0 rgba(52,227,212,.12),0 8px 24px rgba(0,0,0,.4)}
.top b{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.top b::before{content:"◢ ";color:var(--accent)}
.top .nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.top .nav a{font-family:var(--mono);color:var(--mut);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
            padding:5px 10px;border:1px solid transparent;border-radius:5px}
.top .nav a:hover{color:var(--ink);border-color:var(--line2);background:#0e141f}
.top .nav a.here{color:var(--accent);border-color:rgba(52,227,212,.4);background:rgba(52,227,212,.07)}
/* JS-injected status cluster */
.mc-status{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
           text-transform:uppercase;color:var(--green);padding-left:12px;margin-left:4px;border-left:1px solid var(--line2)}
.mc-status .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 2.4s infinite}
.mc-clock{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--mut)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px 80px}

/* ---- hero / mission briefing ------------------------------------------- */
header.hero{padding:40px 0 20px;margin-bottom:6px;position:relative;border-bottom:1px solid var(--line)}
.hero .eyebrow{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.hero .eyebrow::before{content:"// "}
.hero h1{font-size:31px;margin:10px 0 10px;font-weight:680;letter-spacing:-.01em}
.hero p.sub{color:var(--mut);font-size:15.5px;max-width:880px;margin:0}
.back{display:inline-block;font-family:var(--mono);color:var(--mut);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px}
.back:hover{color:var(--accent)}

h2{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:34px 0 14px;font-weight:700}
h2::before{content:"▸ ";color:var(--accent)}

/* ---- sector modules (home page big cards) ------------------------------ */
.sections{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0 4px}
.sec{position:relative;display:block;background:linear-gradient(160deg,var(--panelhi),var(--panel));
     border:1px solid var(--line2);border-radius:var(--r);padding:20px 20px 18px;color:inherit;
     transition:transform .14s,border-color .14s,box-shadow .14s;overflow:hidden}
.sec::before,.sec::after{content:"";position:absolute;width:14px;height:14px;border:1.5px solid var(--accent);opacity:.5;transition:opacity .14s}
.sec::before{top:8px;left:8px;border-right:0;border-bottom:0}
.sec::after{bottom:8px;right:8px;border-left:0;border-top:0}
.sec:hover{transform:translateY(-3px);border-color:rgba(52,227,212,.45);box-shadow:0 0 28px rgba(52,227,212,.12),0 14px 30px rgba(0,0,0,.4)}
.sec:hover::before,.sec:hover::after{opacity:1}
.sec .k{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:8px}
.sec .code{margin-left:auto;color:var(--dim);font-size:10px}
.sec.ops{border-top:2px solid var(--accent)} .sec.ops .k{color:var(--accent)}
.sec.bio{border-top:2px solid var(--green)} .sec.bio .k{color:var(--green)} .sec.bio::before,.sec.bio::after{border-color:var(--green)}
.sec.mgmt{border-top:2px solid var(--gold)} .sec.mgmt .k{color:var(--gold)} .sec.mgmt::before,.sec.mgmt::after{border-color:var(--gold)}
.sec h3{margin:8px 0 7px;font-size:20px;letter-spacing:-.01em}
.sec p{color:var(--mut);font-size:12.7px;margin:0 0 15px;min-height:66px;line-height:1.55}
.sec .go{font-family:var(--mono);font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.sec:hover .go{color:var(--accent)}

/* ---- telemetry modules (deliverable cards) ----------------------------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px 13px;
      transition:border-color .14s,box-shadow .14s}
.card::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(180deg,var(--accent),transparent 70%);opacity:.5;border-radius:var(--r) 0 0 var(--r)}
.card:hover{border-color:var(--line2);box-shadow:0 0 0 1px rgba(52,227,212,.1),0 10px 26px rgba(0,0,0,.35)}
.card h3{margin:0 0 4px;font-size:15px;font-weight:650}
.card .d{color:var(--mut);font-size:12.6px;margin:0 0 11px;line-height:1.5}
.links a{display:inline-block;font-family:var(--mono);background:#0e141f;border:1px solid var(--line2);color:#bfe9e3;
         font-size:11px;letter-spacing:.02em;padding:4px 10px;border-radius:5px;margin:0 6px 6px 0}
.links a::before{content:"▸ ";color:var(--accent);opacity:.7}
.links a:hover{background:#13202b;border-color:rgba(52,227,212,.4);box-shadow:0 0 12px rgba(52,227,212,.12)}
.links a.code{color:#8ef0e6} .links a.vid{color:var(--gold)} .links a.vid::before{color:var(--gold)} .links a.dash{color:var(--green)} .links a.dash::before{color:var(--green)}

/* ---- status pills ------------------------------------------------------- */
.pill{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
      padding:2px 7px;border-radius:4px;vertical-align:middle;margin-left:6px}
.pill::before{content:"● ";font-size:7px;vertical-align:middle}
.pill.run{background:rgba(70,208,138,.12);color:var(--green);border:1px solid rgba(70,208,138,.4)}
.pill.tmpl{background:rgba(91,140,255,.12);color:#9dbcff;border:1px solid rgba(91,140,255,.4)}
.pill.dsgn{background:rgba(230,178,76,.12);color:var(--gold);border:1px solid rgba(230,178,76,.4)}

/* ---- callouts / footer -------------------------------------------------- */
.firstbox{background:linear-gradient(160deg,#0a1422,#0a0f18);border:1px solid var(--line2);border-left:3px solid var(--accent);
          border-radius:var(--r);padding:13px 16px;margin:18px 0 4px;font-size:13.5px;color:var(--mut)}
.firstbox b{color:#cfeeea}
footer{font-family:var(--mono);color:var(--dim);font-size:11.5px;line-height:1.7;margin-top:38px;border-top:1px solid var(--line);padding-top:16px;letter-spacing:.01em}
footer b{color:var(--mut);letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}

/* ---- full-library page: curated-package cards + console buttons --------- */
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0 4px}
.pkg{position:relative;background:linear-gradient(160deg,var(--panelhi),var(--panel));border:1px solid var(--line2);border-radius:var(--r);padding:16px 16px 14px}
.pkg::before{content:"";position:absolute;top:7px;left:7px;width:12px;height:12px;border:1.5px solid var(--accent);border-right:0;border-bottom:0;opacity:.5}
.pkg h3{margin:0 0 5px;font-size:16px}
.pkg p{color:var(--mut);font-size:12.5px;margin:0 0 12px;min-height:52px;line-height:1.5}
.btn{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
     color:var(--accent);background:rgba(52,227,212,.08);border:1px solid rgba(52,227,212,.4);padding:6px 12px;border-radius:5px}
.btn:hover{background:rgba(52,227,212,.16);box-shadow:0 0 12px rgba(52,227,212,.18);text-decoration:none}

/* ---- quick-action console panels (new-hire / manager digest) ----------- */
.qprow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 8px}
.qp{position:relative;display:block;background:linear-gradient(160deg,#0c1422,#0a0f18);border:1px solid var(--line2);
    border-left:3px solid var(--mut);border-radius:var(--r);padding:13px 16px;color:inherit;transition:border-color .14s,box-shadow .14s}
.qp:hover{box-shadow:0 0 22px rgba(0,0,0,.45),0 0 0 1px var(--line2);text-decoration:none}
.qp.go{border-left-color:var(--green)} .qp.info{border-left-color:var(--accent2)}
.qp .qe{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.qp.go .qe{color:var(--green)} .qp.info .qe{color:var(--accent2)}
.qp .qt{font-weight:700;color:#fff;margin:3px 0;font-size:15px}
.qp .qd{font-size:12.3px;color:var(--mut);line-height:1.5}
.heads{font-size:12.5px;color:var(--mut);margin:8px 0 0}.heads b{color:var(--gold)}

@media(max-width:860px){.sections,.grid,.pkgs,.qprow{grid-template-columns:1fr}}