/* ============================================================
   The Hive — Top of Funnel Landing
   Built on the live RevForce OS system (hin.revforce.io/revforce-os).
   See REVFORCE-OS-STYLE-NOTES.md. Blue-black base, mono micro-labels,
   aurora depth, #0575FF as the ONLY accent.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Urbanist:wght@600;700;800;900&family=Montserrat:wght@500;600;700&family=Lato:wght@400;700&display=swap");

:root{
  --bg:#05070E; --bg-1:#080B14; --panel:#0B0F1A; --panel-2:#0F1524;
  --line:rgba(255,255,255,0.08); --line-2:rgba(255,255,255,0.15);
  --txt:#EAF0FA; --txt-2:#9AA6BE; --txt-3:#616C86;
  --blue:#0575FF; --blue-2:#0060DB; --blue-lt:#4DA3FF;

  /* SELECTED-STATE tokens. Solid --blue fill + drop glow is reserved for
     actionable CTAs. Anything that is merely *selected*, *current*, or
     *highlighted* uses this translucent wash instead, so a state never
     wears the affordance of a button. See the .is-state block below. */
  --state-bg:rgba(5,117,255,.14);
  --state-border:rgba(5,117,255,.45);
  --state-fg:#8FC2FF;
  --font-d:'Urbanist',system-ui,sans-serif;
  --font-b:'Lato',system-ui,sans-serif;
  --font-m:'Montserrat',system-ui,sans-serif;
  --maxw:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--font-b);font-size:16px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.6}
img,svg{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-lt)}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:rgba(5,117,255,.35);color:#fff}
:focus-visible{outline:2px solid var(--blue-lt);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,36px);position:relative;z-index:1}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- Section shell + aurora depth ---- */
.sec{position:relative;padding:clamp(72px,9vw,128px) 0;overflow:hidden}
.sec--tight{padding:clamp(52px,6vw,84px) 0}
.aurora{position:absolute;pointer-events:none;z-index:0}
@keyframes aurora {0%,100%{transform:translate(-50%,0) scale(1)}50%{transform:translate(-46%,26px) scale(1.08)}}
@keyframes aurora2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-20px) scale(1.12)}}
.hairline{height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent);border:0;margin:0}

/* ---- Type ---- */
.eyebrow{font-family:var(--font-m);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin:0 0 16px}
.eyebrow.muted{color:var(--txt-3)}
.lbl{font-family:var(--font-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);margin:0 0 16px}
.h1{font-family:var(--font-d);font-weight:700;font-size:clamp(34px,6vw,62px);line-height:1.03;letter-spacing:-.035em;margin:0 0 20px}
.h2{font-family:var(--font-d);font-weight:700;font-size:clamp(26px,3.8vw,46px);line-height:1.06;letter-spacing:-.03em;margin:0 0 16px}
.h3{font-family:var(--font-d);font-weight:600;font-size:clamp(19px,2.2vw,24px);line-height:1.2;letter-spacing:-.02em;margin:0 0 10px}
.grad{background:linear-gradient(115deg,#0575FF,#4DA3FF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.lede{font-size:17px;line-height:1.65;color:var(--txt-2);margin:0}
.body{font-size:15.5px;line-height:1.7;color:var(--txt-2);margin:0}
.body strong,.lede strong{color:var(--txt);font-weight:600}
/* The head block fills the content width so one-line headlines never get
   force-wrapped into a narrow centered column; the lede keeps its own
   readable ~640px measure below. (Split-section heads aren't .sec-head, so
   they stay bound to their column.) */
.sec-head{max-width:none;margin-bottom:clamp(36px,5vw,56px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head .lede{max-width:640px}
.sec-head.center .lede{margin-inline:auto}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-b);
  font-weight:600;font-size:14px;letter-spacing:-.01em;padding:13px 22px;border-radius:12px;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .2s var(--ease),box-shadow .2s ease,background .2s ease,border-color .2s ease}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.btn-primary{color:#fff;background:#0575FF;box-shadow:0 10px 30px -12px rgba(5,117,255,.65),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-primary:hover{transform:translateY(-2px);color:#fff;background:#2689FF;box-shadow:0 16px 40px -12px rgba(5,117,255,.8),inset 0 1px 0 rgba(255,255,255,.26)}
.btn-ghost{color:var(--txt);background:rgba(255,255,255,.04);border-color:var(--line-2)}
.btn-ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.28);color:var(--txt)}
.btn-lg{padding:16px 28px;font-size:15px;border-radius:13px}
@keyframes glowpulse{
  0%,100%{box-shadow:0 10px 34px -10px rgba(5,117,255,.7),inset 0 1px 0 rgba(255,255,255,.28)}
  50%{box-shadow:0 14px 46px -8px rgba(5,117,255,1),inset 0 1px 0 rgba(255,255,255,.32)}}
.btn-pulse{animation:glowpulse 3.2s ease-in-out infinite}
.btn-arrow{transition:transform .18s var(--ease)}
.btn:hover .btn-arrow{transform:translateX(3px)}
.ctarow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ctarow.center{justify-content:center}

/* ============================================================
   SELECTED STATE — the second class, never a CTA
   ------------------------------------------------------------
   Two visual languages that must stay separate:

     CTA      solid #0575FF fill · white text · tight offset drop-glow
     STATE    translucent blue wash · blue text · blue border · at most a
              soft ambient lift (wide blur, low alpha, no tight offset)

   A selected tab, a current step, or the end of a progression is a
   *status*, not an action. Giving it the CTA treatment creates a false
   affordance and competes with the real button on the same screen.
   Apply .is-state to any selected/current/highlighted element.
   ============================================================ */
.is-state{
  background:var(--state-bg);
  border-color:var(--state-border);
  color:var(--state-fg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}

/* ---- Gradient hairline border ---- */
.gborder{position:relative}
.gborder::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.03) 40%,rgba(5,117,255,.12));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* ---- Chips / tags ---- */
.chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--txt);
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;padding:8px 15px}
.chip svg{width:14px;height:14px;color:var(--blue);flex:0 0 auto}
.tag{font-family:var(--font-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
  border:1px solid rgba(5,117,255,.35);border-radius:999px;padding:3px 10px;white-space:nowrap}
.tag.dim{color:var(--txt-3);border-color:var(--line-2)}
.notebox{background:rgba(5,117,255,.07);border:1px solid rgba(5,117,255,.2);border-radius:12px;padding:16px 18px}

/* ---- Header ---- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(5,7,14,.78);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s ease}
.hdr.is-scrolled{border-bottom-color:var(--line)}
.navwrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:700;font-size:16px;
  letter-spacing:-.02em;color:var(--txt)}
.brand:hover{color:var(--txt)}
.brand .mark{width:24px;height:24px;color:var(--blue);flex:0 0 auto}
.brand-mark{height:15px;width:auto;flex:0 0 auto;display:block}
.brand .sub{font-family:var(--font-m);font-size:9.5px;letter-spacing:.18em;color:var(--blue);
  border:1px solid rgba(5,117,255,.35);border-radius:999px;padding:3px 8px}
.navlinks{display:flex;align-items:center;gap:26px}
.navlink{font-family:var(--font-b);font-weight:500;font-size:14px;color:var(--txt-2);letter-spacing:-.01em;transition:color .18s ease}
.navlink:hover{color:var(--txt)}
@media(max-width:940px){.navlinks{display:none}}

/* ============================================================
   HERO — centered stack + floating ecosystem map
   ============================================================ */
.hero{position:relative;padding:clamp(56px,7vw,96px) 0 clamp(64px,8vw,104px);overflow:hidden}
.hero-inner{max-width:820px;margin:0 auto;text-align:center}
.hero-badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-m);font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--txt-2);background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:999px;padding:7px 15px;margin-bottom:24px}
.hero-badge .pip{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 10px rgba(5,117,255,.9);flex:0 0 auto}
.hero .lede{max-width:640px;margin:0 auto}
.hero-cta{margin-top:32px}
.hero-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:26px;
  font-family:var(--font-m);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3)}
.hero-meta span{display:inline-flex;align-items:center;gap:7px}
.hero-meta svg{width:13px;height:13px;color:var(--blue)}

/* ---- App-style frame (reused for mockups) ---- */
.frame{position:relative;border-radius:16px;background:linear-gradient(180deg,#0B0F1A,#070A12);
  border:1px solid var(--line);overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.frame-bar{display:flex;align-items:center;gap:8px;padding:11px 15px;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02)}
.tl{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.frame-path{font-family:var(--font-m);font-size:11px;color:var(--txt-3);margin-left:8px;letter-spacing:.04em}
.frame-stat{margin-left:auto;font-family:var(--font-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);border:1px solid rgba(5,117,255,.35);border-radius:999px;padding:3px 10px}
.frame-body{padding:clamp(16px,2.4vw,24px)}

/* ---- Hero ecosystem map ---- */
.hero-map{max-width:900px;margin:clamp(44px,6vw,72px) auto 0}
.maprow{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;
  background:rgba(255,255,255,.025);border:1px solid var(--line);margin-bottom:9px}
.maprow:last-child{margin-bottom:0}
.maprow .mi{font-family:var(--font-m);font-size:11px;color:var(--txt-3);flex:0 0 auto;width:20px}
.maprow .mn{font-family:var(--font-b);font-weight:600;font-size:14px;color:var(--txt-2);letter-spacing:-.01em}
.maprow .mr{margin-left:auto;font-family:var(--font-m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);text-align:right}
/* Reference implementation of the state language: wash + border + blue label,
   plus a soft ambient lift (wide blur, low alpha) — which is distinct from the
   CTA's tight offset drop-glow and does not read as a button. */
.maprow--live{background:var(--state-bg);border-color:var(--state-border);
  box-shadow:0 10px 34px -16px rgba(5,117,255,.55),inset 0 1px 0 rgba(255,255,255,.07)}
.maprow--live .mi{color:var(--blue)}
.maprow--live .mn{color:var(--txt);font-weight:700}
.maprow--live .mr{color:var(--state-fg)}
@media(max-width:520px){.maprow .mr{display:none}}

/* ============================================================
   WHY THIS EXISTS — balanced split + full-width chip chain
   ============================================================ */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
@media(max-width:860px){.why-grid{grid-template-columns:1fr}}
.why-grid .body+.body{margin-top:16px}
.chain{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;
  margin:clamp(32px,4vw,48px) 0 0;padding:22px;border-radius:16px;
  background:rgba(255,255,255,.02);border:1px solid var(--line)}
.chain-node{font-family:var(--font-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-3);padding:9px 15px;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.03);white-space:nowrap}
/* End of the progression is a destination marker, not a button — state class. */
.chain-node.is-end{background:var(--state-bg);border-color:var(--state-border);
  color:var(--state-fg);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.chain-sep{color:var(--txt-3);flex:0 0 auto;display:flex}
.chain-sep svg{width:14px;height:14px}
@media(max-width:760px){.chain{gap:6px;padding:16px}.chain-node{font-size:9.5px;padding:7px 11px;letter-spacing:.1em}}

/* ============================================================
   ECOSYSTEM — tab pills + one swapping panel
   ============================================================ */
.tabs{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.tab{font-family:var(--font-b);font-weight:600;font-size:13.5px;letter-spacing:-.01em;padding:10px 17px;
  border-radius:999px;white-space:nowrap;background:rgba(255,255,255,.04);color:var(--txt-2);
  border:1px solid var(--line-2);transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease}
.tab:hover{filter:brightness(1.15)}
/* Selected tab = state, not CTA. The panel below is the payload; the tab
   only reports which one is showing. */
.tab[aria-selected="true"]{background:var(--state-bg);color:var(--state-fg);
  border-color:var(--state-border);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.tab[aria-selected="true"] .tnum{opacity:1;color:var(--blue)}
.tab .tnum{font-family:var(--font-m);font-size:10px;opacity:.7;margin-right:7px}
.ecopanel{border-radius:18px;background:var(--panel);border:1px solid var(--line);
  padding:clamp(26px,3.4vw,44px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:clamp(26px,4vw,52px);align-items:start}
.ecopanel[hidden]{display:none}
.ecopanel .h3{margin-bottom:6px}
.ecopanel .eyebrow{margin-bottom:12px}
.ecopanel .body+.body{margin-top:14px}
.ecoside .lbl{margin-bottom:14px}
.plain{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px}
.chk{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;color:var(--txt-2);line-height:1.5}
.dotmark{width:20px;height:20px;flex:0 0 auto;border-radius:50%;
  background:linear-gradient(180deg,rgba(5,117,255,.3),rgba(5,117,255,.1));
  display:flex;align-items:center;justify-content:center;color:var(--blue);margin-top:1px}
.dotmark svg{width:11px;height:11px}
.ecofoot{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);
  font-family:var(--font-d);font-weight:500;font-size:clamp(15px,1.9vw,17px);line-height:1.5;
  letter-spacing:-.01em;color:var(--txt)}
.ecofoot b{color:var(--blue-lt);font-weight:600}
.pagerow{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:26px}
.pager-btn{width:38px;height:38px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--txt-2);
  transition:border-color .18s ease,color .18s ease}
.pager-btn:hover{border-color:rgba(255,255,255,.34);color:var(--txt)}
.pager-btn svg{width:16px;height:16px}
.dots{display:flex;gap:7px;align-items:center}
.dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.22);padding:0;
  transition:width .22s ease,background .22s ease}
.dot[aria-selected="true"]{width:26px;background:#0575FF}
.pagecount{font-family:var(--font-m);font-size:11px;color:var(--txt-3);margin-left:4px}

/* ============================================================
   PATH — vertical timeline
   ============================================================ */
.tl-wrap{max-width:840px;margin:0 auto;position:relative}
.step{position:relative;padding:0 0 34px 78px}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:26px;top:60px;bottom:6px;width:1px;
  background:linear-gradient(180deg,rgba(5,117,255,.55),rgba(5,117,255,.06))}
.step:last-child::before{display:none}
.stepnum{position:absolute;left:0;top:0;width:54px;height:54px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:linear-gradient(180deg,#0F1626,#0A0F1B);border:1px solid rgba(5,117,255,.4);
  box-shadow:0 0 22px -4px rgba(5,117,255,.55),inset 0 1px 0 rgba(255,255,255,.08);
  font-family:var(--font-m);font-weight:500;font-size:13px;color:var(--blue)}
.stephead{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px 14px;margin-bottom:10px;padding-top:9px}
.stepttl{font-family:var(--font-d);font-weight:600;font-size:clamp(18px,2.2vw,22px);letter-spacing:-.02em;
  color:var(--txt);margin:0;line-height:1.2}
.stepbody{font-size:15.5px;line-height:1.7;color:var(--txt-2);margin:0;max-width:640px}
@media(max-width:560px){
  .step{padding-left:0}
  .stepnum{position:relative;margin-bottom:14px;width:46px;height:46px}
  .step::before{display:none}
  .stephead{padding-top:0}
}

/* ============================================================
   WHERE YOU START — spec rows with hex icon frames
   ============================================================ */
.specgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,5vw,64px)}
@media(max-width:820px){.specgrid{grid-template-columns:1fr}}
.specrow{display:flex;align-items:flex-start;gap:16px;padding:20px 2px;border-bottom:1px solid rgba(255,255,255,.06)}
.hexwrap{position:relative;width:36px;height:40px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--blue)}
.hexwrap .hexbg{position:absolute;inset:0;color:rgba(5,117,255,.35)}
.hexwrap .hexico{position:relative;width:17px;height:17px}
.specname{font-family:var(--font-d);font-weight:600;font-size:16px;letter-spacing:-.015em;color:var(--txt);margin:0 0 5px;line-height:1.25}
.specdesc{font-size:14px;line-height:1.6;color:var(--txt-2);margin:0}
.specgoal{display:block;font-family:var(--font-m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-3);margin-top:8px}

/* ============================================================
   INSIDE THE HIVE — split, list + framed panel
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,64px);align-items:center}
.split.rev .split-vis{order:-1}
@media(max-width:900px){.split,.split.rev{grid-template-columns:1fr}.split.rev .split-vis{order:0}}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
@media(max-width:560px){.twocol{grid-template-columns:1fr}}
.jrow{display:flex;align-items:flex-start;gap:13px;padding:13px 14px;border-radius:11px;
  background:rgba(255,255,255,.025);border:1px solid var(--line);margin-bottom:8px}
.jrow:last-child{margin-bottom:0}
.jicon{width:32px;height:32px;flex:0 0 auto;border-radius:9px;
  background:linear-gradient(180deg,rgba(5,117,255,.25),rgba(5,117,255,.08));
  display:flex;align-items:center;justify-content:center;color:var(--blue)}
.jicon svg{width:16px;height:16px}
.jname{font-family:var(--font-b);font-weight:600;font-size:13.5px;color:var(--txt);letter-spacing:-.01em;margin:0 0 2px}
.jdesc{font-family:var(--font-m);font-size:10.5px;letter-spacing:.03em;color:var(--txt-3);margin:0;line-height:1.45}

/* ============================================================
   WHY JOIN — diamond-dot list
   ============================================================ */
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:22px 40px}
.ditem{display:flex;align-items:flex-start;gap:13px}
.ddot{width:7px;height:7px;flex:0 0 auto;margin-top:9px;transform:rotate(45deg);
  border:1px solid var(--blue);background:rgba(5,117,255,.25)}
.dbody{margin:0;font-size:14.5px;line-height:1.65;color:var(--txt-2)}
.dlead{color:var(--txt);font-weight:600}
.principle{font-family:var(--font-d);font-weight:500;font-size:clamp(15px,1.9vw,17.5px);line-height:1.5;
  letter-spacing:-.01em;color:var(--txt);margin:28px 0 0;padding-top:24px;border-top:1px solid var(--line)}

/* ============================================================
   MISSION — ledger rows on hairlines
   ============================================================ */
.ledger{list-style:none;margin:0;padding:0}
.ledger li{display:grid;grid-template-columns:250px 1fr;gap:24px;align-items:baseline;
  padding:17px 2px;border-bottom:1px solid rgba(255,255,255,.06)}
.ledger .lname{font-family:var(--font-m);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--blue)}
.ledger .lwhat{font-size:15px;line-height:1.6;color:var(--txt-2)}
@media(max-width:680px){.ledger li{grid-template-columns:1fr;gap:6px}}

/* ============================================================
   JOIN BEFORE READY
   ============================================================ */
.nolist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:14px 40px}
.noitem{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;line-height:1.6;color:var(--txt-2)}
.dotminus{width:20px;height:20px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;color:var(--txt-3);margin-top:1px}
.dotminus svg{width:10px;height:10px}
.orders{display:flex;flex-wrap:wrap;gap:9px;margin-top:32px}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{text-align:center}
.final .wrap{max-width:760px}
.firstmove{display:flex;gap:15px;align-items:flex-start;text-align:left;margin-top:40px;
  background:rgba(5,117,255,.07);border:1px solid rgba(5,117,255,.2);border-radius:14px;padding:18px 20px}
.firstmove .fmi{width:36px;height:36px;flex:0 0 auto;border-radius:10px;
  background:linear-gradient(180deg,rgba(5,117,255,.28),rgba(5,117,255,.08));
  display:flex;align-items:center;justify-content:center;color:var(--blue)}
.firstmove .fmi svg{width:18px;height:18px}
.firstmove p{margin:0;font-size:14.5px;line-height:1.6;color:var(--txt-2)}
.firstmove b{color:var(--txt);font-weight:600}

/* ============================================================
   FAQ — accordion rows on hairlines, no boxes
   ============================================================ */
.faq{max-width:820px;margin:0 auto}
.acc{border-top:1px solid var(--line)}
.accitem{border-bottom:1px solid var(--line)}
.accrow{width:100%;background:transparent;text-align:left;display:flex;align-items:center;gap:16px;
  color:inherit;font-family:var(--font-d);font-weight:600;font-size:clamp(15px,1.9vw,17.5px);
  letter-spacing:-.02em;padding:22px 4px;transition:background .18s ease}
.accrow:hover{background:rgba(255,255,255,.03)}
.accrow .qn{font-family:var(--font-m);font-size:11px;font-weight:400;color:var(--txt-3);flex:0 0 auto}
.chev{flex:0 0 auto;margin-left:auto;width:18px;height:18px;color:var(--txt-3);transition:transform 220ms var(--ease)}
[aria-expanded="true"] .chev{transform:rotate(180deg);color:var(--blue)}
.accpanel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.accitem.is-open .accpanel{grid-template-rows:1fr}
.accinner{overflow:hidden}
.acccontent{padding:0 4px 24px 40px;font-size:15px;line-height:1.7;color:var(--txt-2)}
.acccontent strong{color:var(--txt);font-weight:600}
.acccontent .ctarow{margin-top:18px}
@media(max-width:560px){.acccontent{padding-left:4px}}

/* ============================================================
   FOOTER + MOBILE CTA
   ============================================================ */
.foot{border-top:1px solid var(--line);padding:44px 0 36px;background:var(--bg-1)}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:26px;align-items:flex-start}
.foot-eco{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.foot-bot{margin-top:38px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:12px;font-family:var(--font-m);font-size:11px;letter-spacing:.04em;color:var(--txt-3)}
.foot-bot a{color:var(--txt-3)}
.foot-bot a:hover{color:var(--txt-2)}
.mcta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(5,7,14,.93);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.mcta .btn{width:100%}
@media(max-width:760px){.mcta{display:block}body{padding-bottom:82px}}

/* ============================================================
   MOTION
   ============================================================ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.now{transition:none}
.no-js .reveal{opacity:1;transform:none}
[data-delay="1"]{transition-delay:.06s}
[data-delay="2"]{transition-delay:.12s}
[data-delay="3"]{transition-delay:.18s}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn-pulse{animation:none}
  .aurora{animation:none!important}
  html{scroll-behavior:auto}
}

/* Long CTA labels must wrap rather than overflow on phones. */
@media(max-width:560px){
  .btn{white-space:normal;text-align:center}
  .ctarow .btn-lg{width:100%}
}

/* The full badge label wraps to two lines below ~430px — drop the qualifier
   there; the same promise is repeated in .hero-meta directly underneath. */
@media(max-width:430px){.badge-more{display:none}}

/* ============================================================
   OPTICAL SIZE COMPENSATION
   ------------------------------------------------------------
   Measured with canvas TextMetrics at 100px (actualBoundingBoxAscent):

                cap    x-height   width "Find your place"
     Sora 700    73      54.75     781
     Urbanist900 70      50.00     693
     Manrope 400 72      54.00     867
     Lato 400    71.65   50.65     837

   Two different metrics matter, and headlines answer to the second one:

   - BODY perceived size tracks x-height. Lato's is 6.2% shorter than
     Manrope's, so body is scaled ×1.066 (below). Body wraps to fill its
     column, so its *width* takes care of itself.

   - DISPLAY perceived size tracks SET-WIDTH — the horizontal space a
     headline occupies. Urbanist sets 12.7% narrower than Sora ("Find your
     place": 693 vs 781 at 100px). At x-height parity the letters are the
     right height but the whole headline is visibly narrower, so it reads
     as confined-to-the-middle and smaller. Matching x-height was the wrong
     axis for display; matching width is right.

   Display correction: ×1.127 vs the original Sora sizes (781/693), so a
   headline fills the same width Sora did. text-wrap:balance keeps the
   larger type from stranding a single word on the last line.
   ============================================================ */

/* ---- Display: +100 weight, looser tracking (Sora's -0.03em is too tight
       for Urbanist's rounder counters), ×1.127 set-width scale, and
       balanced wrapping so no headline orphans a lone word. ---- */
.h1,.h2,.h3,.stepttl,.specname,.accrow,.ecofoot,.principle{text-wrap:balance}
.h1{font-weight:900;letter-spacing:-.025em;font-size:clamp(38.3px,6.76vw,69.8px)}
.h2{font-weight:800;letter-spacing:-.02em;font-size:clamp(29.3px,4.29vw,51.8px)}
.h3{font-weight:700;letter-spacing:-.015em;font-size:clamp(21.4px,2.48vw,27.1px)}
.stepttl{font-weight:700;letter-spacing:-.01em;font-size:clamp(20.3px,2.48vw,24.8px)}
.specname{font-weight:700;letter-spacing:-.01em;font-size:18px}
.accrow{font-weight:700;letter-spacing:-.01em;font-size:clamp(16.9px,2.14vw,19.7px)}
.ecofoot,
.principle{font-weight:600;font-size:clamp(16.9px,2.14vw,19.7px)}

/* ---- Body: ×1.066. Leading pulled in slightly — Lato's shorter x-height
       makes the same multiplier read as looser than it did on Manrope. ---- */
.lede{font-size:18.1px;line-height:1.62}
.body{font-size:16.5px;line-height:1.68}
.stepbody{font-size:16.5px;line-height:1.66}
.specdesc{font-size:14.9px}
.dbody,
.chk{font-size:15.5px}
.acccontent{font-size:16px}
.jname{font-size:14.4px}
.ledger .lwhat{font-size:16px}
.noitem{font-size:15.5px}

/* ---- Micro-labels: Montserrat is much wider than JetBrains Mono at the
       same size. Drop a hair and pull tracking in, or every eyebrow wraps. ---- */
.eyebrow{font-weight:600;font-size:11px;letter-spacing:.14em}
.lbl{font-weight:600;font-size:10px;letter-spacing:.12em}
.tag{font-weight:700;font-size:9px;letter-spacing:.12em}
.hero-badge{font-weight:600;font-size:10.5px;letter-spacing:.11em}
.hero-meta{font-weight:600;font-size:10.5px;letter-spacing:.07em}
.chain-node{font-weight:600;font-size:10.5px;letter-spacing:.11em}
.specgoal{font-weight:600;font-size:10px;letter-spacing:.09em}
.ledger .lname{font-weight:700;font-size:11px;letter-spacing:.1em}
.maprow .mi,
.maprow .mr,
.frame-path,
.frame-stat,
.jdesc,
.pagecount,
.accrow .qn,
.stepnum,
.foot-bot{font-weight:600;letter-spacing:.06em}

/* ---- Buttons: Montserrat/Lato UI text sets narrower than Manrope. ---- */
.btn{font-family:var(--font-m);font-weight:700;font-size:13px;letter-spacing:.02em}
.tab{font-family:var(--font-m);font-weight:600;font-size:13px;letter-spacing:.01em}
.navlink{font-family:var(--font-m);font-weight:600;font-size:13.5px}
.brand{font-family:var(--font-d);font-weight:800}

/* ============================================================
   MISSION — infrastructure progression (redesign)
   Five layers that build toward opportunity: a numbered band,
   the final "ecosystem → opportunity" tile accented as the payoff.
   ============================================================ */
.mission-head{max-width:720px;margin:0 auto clamp(40px,5vw,60px);text-align:center}
.mission-head .body+.body{margin-top:16px}
.infra{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.infra-item{position:relative;display:flex;flex-direction:column;gap:11px;padding:22px 18px 24px;
  border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02);
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.infra-item:hover{border-color:rgba(5,117,255,.4);transform:translateY(-2px)}
.infra-item .in-idx{font-family:var(--font-m);font-size:11px;letter-spacing:.16em;color:var(--txt-3)}
.infra-item .in-name{font-family:var(--font-d);font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--txt);line-height:1.2;text-wrap:balance}
.infra-item .in-fn{font-size:13px;line-height:1.55;color:var(--txt-2);margin-top:auto}
.infra-item--out{border-color:rgba(5,117,255,.45);
  background:linear-gradient(180deg,rgba(5,117,255,.1),transparent 62%);
  box-shadow:0 10px 34px -18px rgba(5,117,255,.6),inset 0 1px 0 rgba(255,255,255,.06)}
.infra-item--out .in-idx{color:var(--blue)}
.infra-item--out .in-name{color:var(--blue-lt)}
.mission-close{max-width:760px;margin:clamp(40px,5vw,56px) auto 0;text-align:center;
  font-family:var(--font-d);font-weight:600;font-size:clamp(17px,2.2vw,22px);line-height:1.4;
  letter-spacing:-.015em;color:var(--txt-2);text-wrap:balance}
.mission-close b{color:var(--blue-lt);font-weight:600}
@media(max-width:900px){.infra{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.infra{grid-template-columns:1fr}}

/* ============================================================
   JOIN BEFORE READY — barriers vs path (redesign)
   Left: what you DON'T need (muted). Right: the simple path,
   a numbered 4-step sequence in an accented panel.
   ============================================================ */
.ready-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,40px);
  margin-top:clamp(36px,5vw,52px);align-items:stretch}
.ready-col{display:flex;flex-direction:column}
.ready-col .col-lbl{font-family:var(--font-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-3);margin:0 0 20px}
.dont-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.dont-list li{display:flex;gap:13px;align-items:flex-start;font-size:15px;line-height:1.55;color:var(--txt-2)}
.dont-list .dotminus{margin-top:1px}
/* the path panel */
.path-panel{flex:1;border:1px solid rgba(5,117,255,.28);border-radius:16px;
  background:linear-gradient(180deg,rgba(5,117,255,.07),transparent 55%);padding:clamp(22px,3vw,30px)}
.path-panel .col-lbl{color:var(--blue)}
.do-list{list-style:none;margin:0;padding:0;position:relative}
.do-list li{display:flex;gap:15px;align-items:flex-start;padding:0 0 20px;position:relative}
.do-list li:last-child{padding-bottom:0}
/* connector line down the numbers */
.do-list li:not(:last-child)::before{content:"";position:absolute;left:15px;top:34px;bottom:2px;width:1px;
  background:linear-gradient(180deg,rgba(5,117,255,.5),rgba(5,117,255,.08))}
.do-num{width:31px;height:31px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#0F1626,#0A0F1B);border:1px solid rgba(5,117,255,.45);
  box-shadow:0 0 16px -4px rgba(5,117,255,.55),inset 0 1px 0 rgba(255,255,255,.08);
  font-family:var(--font-m);font-size:12px;color:var(--blue);position:relative;z-index:1}
.do-list .do-txt{font-family:var(--font-b);font-weight:600;font-size:14.5px;color:var(--txt);line-height:1.3;padding-top:6px}
@media(max-width:820px){.ready-grid{grid-template-columns:1fr;gap:28px}}

/* ============================================================
   BLUE GLOW SYSTEM — one continuous ribbon, no section seams
   ------------------------------------------------------------
   Per-section glows clipped at each section edge, so adjacent
   sections hard-cut into a repeating seam. Instead, a single
   page-height layer behind everything paints an alternating
   corner glow that REPEATS SEAMLESSLY: each tile fades to full
   transparency at its own top and bottom, so tiles blend with no
   visible band. Sections stay transparent and the ribbon shows
   straight through. Framed elements keep their own halos; the
   hero + final CTA add a deliberate top bloom (the one "seam"
   Jazmin wants, for emphasis).
   ============================================================ */
main{position:relative}
main::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(56% 34% at 0% 20%, rgba(5,117,255,.26), transparent 62%),
    radial-gradient(52% 32% at 100% 70%, rgba(5,117,255,.22), transparent 62%);
  background-size:100% 1900px;
  background-repeat:repeat-y;
}
/* hero + final CTA: a hotter top bloom, deliberately distinct. Contained
   by each section's overflow, fading out before its bottom edge. */
.hero::after,.final::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(62% 50% at 50% -12%, rgba(5,117,255,.42), rgba(5,117,255,.1) 44%, transparent 70%);
}

/* Animated aurora blobs blend as light, not a flat tint. */
.aurora{mix-blend-mode:screen}

/* Halo behind framed elements — the "glow behind the card" look. */
.frame{box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 90px -18px rgba(5,117,255,.32)}
.ecopanel{box-shadow:0 0 100px -34px rgba(5,117,255,.38)}
.path-panel{box-shadow:0 0 90px -40px rgba(5,117,255,.4)}
.infra-item--out{box-shadow:0 12px 40px -16px rgba(5,117,255,.7),0 0 60px -26px rgba(5,117,255,.5),inset 0 1px 0 rgba(255,255,255,.06)}

@media(prefers-reduced-motion:reduce){.aurora{opacity:1}}