/* ════════════════════════════════════════════════════════════
   NORTH STAR INTELLIGENCE · style.css
   Brand Lock tokens. Do not add colors outside this block.
   GT America swap path: if licensed files are added to
   /assets/fonts/, replace the display/body stacks below and
   remove the Google Fonts link in each HTML head. (TODO)
   ════════════════════════════════════════════════════════════ */
:root{
  /* Canonical brand tokens */
  --navy:#0A1220;
  --platinum:#D9D9DE;
  --blue:#1E6BFF;

  /* Derived surfaces and text (all derived from the three above) */
  --navy-2:#0E1930;            /* raised surface */
  --navy-3:#122040;            /* card surface */
  --text:#E9EAEE;              /* body text, platinum lifted */
  --muted:#9AA3B5;             /* secondary text */
  --dim:#78829A;               /* tertiary text, AA on navy */
  --line:rgba(217,217,222,0.12);
  --line-strong:rgba(217,217,222,0.24);
  --blue-soft:rgba(30,107,255,0.14);
  --blue-glow:rgba(30,107,255,0.45);

  /* Type */
  --font-display:'Archivo',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',monospace;

  --maxw:1160px;
}

/* ── Reset ── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--navy);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--blue);color:#fff}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-0.02em;line-height:1.08}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--blue);outline-offset:3px;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,56px)}
section{padding:clamp(78px,11vh,140px) 0;position:relative}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent)}

/* ── Eyebrow ── */
.eyebrow{
  font-family:var(--font-mono);
  font-size:0.7rem;letter-spacing:0.26em;text-transform:uppercase;
  color:var(--blue);display:inline-flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--blue);opacity:0.8}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-body);font-weight:600;font-size:0.92rem;
  padding:14px 26px;border-radius:8px;cursor:pointer;
  border:1px solid transparent;transition:transform .2s,box-shadow .2s,border-color .2s,background .2s;
  white-space:nowrap;
}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 6px 24px var(--blue-glow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 32px var(--blue-glow)}
.btn-ghost{border-color:var(--line-strong);color:var(--text);background:rgba(217,217,222,0.03)}
.btn-ghost:hover{border-color:var(--platinum)}

/* ── Skip link ── */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--blue);color:#fff;padding:10px 18px;border-radius:0 0 8px 0;
}
.skip:focus{left:0}

/* ── Nav ── */
nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(10,18,32,0.8);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,56px);
  height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.logo{display:flex;align-items:center;gap:12px}
.logo img{width:28px;height:28px}
.logo .lt{font-family:var(--font-display);font-weight:700;font-size:0.92rem;letter-spacing:0.16em;line-height:1;color:var(--platinum)}
.logo .lt small{display:block;font-size:0.58rem;letter-spacing:0.34em;color:var(--blue);font-weight:600;margin-top:3px}
.nav-links{display:flex;gap:26px;align-items:center;font-size:0.9rem}
.nav-links a{color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-cta{
  border:1px solid var(--blue);color:var(--blue);
  padding:9px 18px;border-radius:8px;font-size:0.82rem;font-weight:600;letter-spacing:0.04em;
  transition:background .2s,color .2s;
}
.nav-cta:hover{background:var(--blue);color:#fff}

/* Mobile nav */
.nav-ham{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;color:var(--text)}
.nav-ham span{width:22px;height:2px;background:currentColor;border-radius:1px;transition:transform .3s,opacity .3s}
.nav-ham[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-ham[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-ham[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:900px){
  .nav-ham{display:flex}
  .nav-links{
    position:fixed;top:68px;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(10,18,32,0.98);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line-strong);padding:6px 0 14px;z-index:49;
    transform:translateY(-110%);opacity:0;pointer-events:none;
    transition:transform .3s,opacity .28s;
  }
  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav-links a{padding:13px clamp(22px,5vw,56px);width:100%;border-bottom:1px solid var(--line);font-size:1rem}
  .nav-links a:last-child{border-bottom:none}
}

/* ── Hero ── */
.hero{padding-top:clamp(70px,10vh,120px);padding-bottom:clamp(64px,9vh,110px);position:relative}
.hero-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 560px at 78% -8%,var(--blue-soft),transparent 60%),
    radial-gradient(620px 460px at 6% 8%,rgba(30,107,255,0.06),transparent 55%);
}
.hero-inner{position:relative;max-width:800px}
.hero h1{font-size:clamp(2.5rem,6vw,4.4rem);font-weight:800;letter-spacing:-0.028em;color:var(--platinum)}
.hero h1 .blue{color:var(--blue)}
.hero .sub{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--muted);max-width:58ch;margin-top:24px}
.hero .sub b{color:var(--text);font-weight:600}
.hero-cta{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.hero-mark{position:absolute;right:clamp(0px,4vw,60px);top:120px;width:clamp(120px,18vw,220px);opacity:0.9;pointer-events:none}
@media(max-width:900px){.hero-mark{display:none}}

/* ── Section heads ── */
.sec-head{max-width:760px;margin-bottom:54px}
.sec-head h2{font-size:clamp(1.9rem,4.2vw,3rem);margin-top:18px;color:var(--platinum)}
.sec-head p{color:var(--muted);font-size:1.12rem;margin-top:18px;max-width:64ch}

/* ── Problem ── */
.reality{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
.reality-card{border:1px solid var(--line);border-radius:14px;padding:30px;background:var(--navy-2)}
.reality-card h3{font-size:1.05rem;letter-spacing:0.02em;margin-bottom:14px}
.reality-card.current h3{color:var(--muted)}
.reality-card.potential{border-color:rgba(30,107,255,0.35)}
.reality-card.potential h3{color:var(--blue)}
.reality-card ul{list-style:none}
.reality-card li{padding:9px 0 9px 24px;position:relative;color:var(--muted);font-size:0.95rem;border-bottom:1px solid var(--line)}
.reality-card li:last-child{border-bottom:none}
.reality-card li::before{content:"";position:absolute;left:0;top:17px;width:8px;height:8px;border:1px solid currentColor;transform:rotate(45deg);opacity:0.6}
.reality-card.potential li::before{background:var(--blue);border-color:var(--blue);opacity:1}
@media(max-width:760px){.reality{grid-template-columns:1fr}}

/* ── Gap calculator ── */
.calc{
  border:1px solid var(--line-strong);border-radius:18px;
  background:linear-gradient(180deg,var(--navy-3),var(--navy-2));
  padding:clamp(28px,4vw,46px);max-width:820px;margin:0 auto;
  position:relative;overflow:hidden;
}
.calc::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 200px at 85% 0%,var(--blue-soft),transparent 60%);pointer-events:none}
.calc-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:26px;position:relative}
.calc-model{font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:6px;padding:5px 10px}
.calc-field{display:flex;flex-direction:column;gap:8px;max-width:420px;position:relative}
.calc-field label{font-family:var(--font-mono);font-size:0.64rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
.calc-field select{
  background:var(--navy);border:1px solid var(--line-strong);border-radius:9px;
  padding:13px 40px 13px 16px;color:var(--text);font-family:var(--font-body);font-size:0.98rem;
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239AA3B5' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.calc-field select:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft);outline:none}
.calc-gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px;position:relative}
.gauge{border:1px solid var(--line);border-radius:12px;padding:20px;background:rgba(10,18,32,0.6)}
.gauge .gl{font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted)}
.gauge .gv{font-family:var(--font-display);font-weight:800;font-size:clamp(1.4rem,3vw,1.9rem);color:var(--platinum);margin-top:8px;font-variant-numeric:tabular-nums}
.gauge.annual .gv{color:var(--blue)}
.calc-note{margin-top:22px;font-size:0.86rem;color:var(--dim);position:relative}
.calc-cta{margin-top:26px;position:relative}
@media(max-width:640px){.calc-gauges{grid-template-columns:1fr}}

/* ── Architecture ── */
.layers{display:flex;flex-direction:column;gap:12px;max-width:760px;margin:0 auto}
.layer{
  border:1px solid var(--line);border-radius:12px;padding:22px 26px;
  background:var(--navy-2);display:flex;align-items:baseline;gap:20px;
  transition:border-color .25s,transform .25s;
}
.layer:hover{border-color:rgba(30,107,255,0.4);transform:translateX(4px)}
.layer .ln{font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.14em;color:var(--blue);min-width:70px;text-transform:uppercase}
.layer .lt2{font-family:var(--font-display);font-weight:700;font-size:1.12rem;min-width:190px;color:var(--platinum)}
.layer .ld{color:var(--muted);font-size:0.92rem}
.layer.l4{border-color:rgba(30,107,255,0.45);background:linear-gradient(180deg,var(--blue-soft),transparent 60%)}
@media(max-width:760px){.layer{flex-direction:column;gap:6px}}
.engines{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.engine{border:1px solid var(--line);border-radius:12px;padding:22px;background:var(--navy-2)}
.engine h3{font-size:1rem;color:var(--platinum);margin-bottom:8px}
.engine p{color:var(--muted);font-size:0.88rem;line-height:1.55}
@media(max-width:860px){.engines{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.engines{grid-template-columns:1fr}}

/* ── Loop ── */
.loop{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-top:44px}
.loop-step{border:1px solid var(--line);border-radius:10px;padding:16px 12px;text-align:center;background:var(--navy-2)}
.loop-step .ln{font-family:var(--font-mono);font-size:0.58rem;color:var(--blue);display:block;margin-bottom:8px}
.loop-step .lt3{font-family:var(--font-display);font-weight:600;font-size:0.82rem;letter-spacing:0.04em;color:var(--text)}
@media(max-width:960px){.loop{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){.loop{grid-template-columns:repeat(2,1fr)}}
.compound-close{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.3rem,2.6vw,1.8rem);line-height:1.35;
  max-width:720px;margin:64px auto 0;text-align:center;color:var(--platinum);
}
.compound-close .blue{color:var(--blue)}

/* ── Timeline ── */
.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:44px}
.t-step{border:1px solid var(--line);border-radius:12px;padding:22px;background:var(--navy-2);position:relative}
.t-step .td{font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.12em;color:var(--blue);text-transform:uppercase}
.t-step h3{font-size:1rem;margin:10px 0 8px;color:var(--platinum)}
.t-step p{color:var(--muted);font-size:0.86rem;line-height:1.55}
@media(max-width:960px){.timeline{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.timeline{grid-template-columns:1fr}}

/* ── Founder ── */
.founder-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center}
.founder-grid p{color:var(--muted);font-size:1.05rem}
.founder-sig{font-family:var(--font-display);font-weight:700;color:var(--platinum);font-size:1.1rem;margin-top:26px}
.founder-sig span{display:block;font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.2em;color:var(--dim);text-transform:uppercase;margin-top:6px}
.proof{border:1px solid var(--line);border-radius:14px;background:var(--navy-2)}
.proof-row{display:flex;align-items:baseline;gap:18px;padding:20px 26px;border-bottom:1px solid var(--line)}
.proof-row:last-child{border-bottom:none}
.proof-num{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--blue);min-width:110px}
.proof-lbl{color:var(--muted);font-size:0.9rem}
@media(max-width:860px){.founder-grid{grid-template-columns:1fr;gap:40px}}

/* ── Cohort form ── */
.cohort{background:var(--navy-2)}
.cohort-inner{max-width:640px;margin:0 auto;text-align:center}
.cohort form{display:flex;flex-direction:column;gap:14px;margin-top:38px;text-align:left}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.f-row{grid-template-columns:1fr}}
.f-field{display:flex;flex-direction:column;gap:7px}
.f-field label{font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
.f-field input,.f-field select,.f-field textarea{
  background:var(--navy);border:1px solid var(--line-strong);border-radius:9px;
  padding:12px 16px;color:var(--text);font-family:var(--font-body);font-size:0.96rem;
}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft);
}
.f-field .f-err{color:#E0A33A;font-size:0.8rem;display:none}
.f-field.invalid .f-err{display:block}
.f-field.invalid input,.f-field.invalid textarea{border-color:#E0A33A}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-msg{border-radius:11px;padding:16px 20px;font-size:0.94rem;margin-top:10px;text-align:left}
.form-msg.ok{background:rgba(30,107,255,0.1);border:1px solid rgba(30,107,255,0.35);color:var(--blue)}
.form-msg.err{background:rgba(224,163,58,0.1);border:1px solid rgba(224,163,58,0.3);color:#E0A33A}
[hidden]{display:none !important}

/* ── Footer ── */
footer{border-top:1px solid var(--line-strong);padding:44px 0;background:rgba(10,18,32,0.6)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.foot .fm{font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--dim)}
.foot-links{display:flex;gap:24px;font-size:0.86rem}
.foot-links a{color:var(--muted)}
.foot-links a:hover{color:var(--text)}

/* ── Reveal ── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .layer:hover{transform:none}
}

/* ── Prose pages (privacy, 404) ── */
.prose{max-width:680px;margin:0 auto;padding:clamp(60px,10vh,110px) 0}
.prose h1{font-size:clamp(1.8rem,4vw,2.6rem);color:var(--platinum);margin-bottom:10px}
.prose .pd{font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--dim);margin-bottom:34px}
.prose h2{font-size:1.2rem;color:var(--platinum);margin:34px 0 12px}
.prose p{color:var(--muted);margin-bottom:14px}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}