/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
  --void:#050608; --void-2:#04060c;
  --surface:#0b1018; --surface-tr:rgba(12,17,28,.55);
  --blue:#2b8cf2; --blue-deep:#2f6fd0; --blue-signal:#3b7fe6;
  --blue-light:#7fb3e8; --blue-etf:#3da8ff;
  --gold:#cca36d; --white:#f4f6fa;
  --ink-2:rgba(244,246,250,.62); --ink-3:rgba(244,246,250,.45); --ink-4:rgba(244,246,250,.34);
  --hair:rgba(255,255,255,.06);
  --pos:#3ddc91; --neg:#ff5c6e;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --disp:'Saira Condensed',sans-serif;
}
/* the notch — signature shape. no border-radius anywhere but circles. */
.n20{clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%)}
.n18{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.n16{clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.n12{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.n10{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}

*{box-sizing:border-box}
body{margin:0;background:var(--void);color:var(--white);font-family:Inter,system-ui,sans-serif;overflow-x:hidden}
a{color:var(--blue-light);text-decoration:none;transition:color .14s ease-out}
a:hover{color:var(--gold)}
/* height:auto is load-bearing — width/height attrs would otherwise apply as
   literal px and stretch any image sized with width:100%. */
img{max-width:100%;height:auto}

@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-40px) scale(1.15)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-70px,50px) scale(1)}}
@keyframes breath{0%,100%{opacity:.35}50%{opacity:.75}}

.shell{position:relative;overflow:hidden;z-index:1}
.orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0}

/* ── type ───────────────────────────────────────────────────────────────── */
.eyebrow{font:600 11px var(--mono);letter-spacing:.22em;color:var(--gold);margin-bottom:14px}
h1{margin:0;font:700 clamp(44px,6.4vw,92px)/.94 var(--disp);letter-spacing:-.01em;text-wrap:balance;
   text-shadow:0 0 60px rgba(43,140,242,.35)}
h2{margin:0;font:700 clamp(34px,5vw,52px)/1 var(--disp)}
.lede{font:400 15px/1.65 Inter,sans-serif;color:rgba(244,246,250,.6)}
.num{font-variant-numeric:tabular-nums}

section{position:relative;padding:88px 56px;border-top:1px solid var(--hair)}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{display:inline-block;padding:15px 34px;font:600 13px var(--mono);letter-spacing:.1em;white-space:nowrap;
     transition:box-shadow .22s ease,background .22s ease}
.btn-primary{background:var(--blue);color:var(--void-2);box-shadow:0 0 32px rgba(43,140,242,.5)}
.btn-primary:hover{box-shadow:0 0 46px rgba(43,140,242,.75);color:var(--void-2)}
.btn-ghost{border:1px solid rgba(204,163,109,.5);color:var(--gold);background:rgba(204,163,109,.05);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(204,163,109,.13);color:var(--gold)}

/* ── card: 1px gradient hairline via wrapper, never a border ────────────── */
.card{display:block;padding:1px;background:linear-gradient(150deg,rgba(255,255,255,.24),rgba(255,255,255,.02) 55%)}
.card > .in{background:var(--surface-tr);backdrop-filter:blur(14px);height:100%;position:relative;overflow:hidden}
/* featured/gold: interior MUST go opaque or the gold reads as a brown wash */
.card-gold{background:linear-gradient(150deg,var(--gold),rgba(204,163,109,.16) 62%);box-shadow:0 0 40px rgba(204,163,109,.18)}
.card-gold > .in{background:var(--surface)}
.card-link{transition:transform .22s ease,box-shadow .22s ease}
.card-link:hover{transform:translateY(-6px) scale(1.025);box-shadow:0 0 62px var(--h,rgba(43,140,242,.32))}

/* ── nav ────────────────────────────────────────────────────────────────── */
nav{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:20px 56px;border-bottom:1px solid rgba(255,255,255,.07);
    background:rgba(5,6,8,.3);backdrop-filter:blur(18px)}
.wordmark{font:700 16px Saira,sans-serif;letter-spacing:.35em;color:var(--white)}
.navlinks{display:flex;gap:32px;align-items:center;font:500 12px var(--mono);letter-spacing:.08em;white-space:nowrap}
.navlinks a{color:rgba(244,246,250,.65)}
.navlinks a.on{color:var(--gold)}
.nav-cta{padding:9px 20px;background:var(--blue);color:var(--void-2);font-weight:600;
         box-shadow:0 0 24px rgba(43,140,242,.45)}
.nav-cta:hover{color:var(--void-2);box-shadow:0 0 36px rgba(43,140,242,.7)}

/* ── footer ─────────────────────────────────────────────────────────────── */
footer{position:relative;padding:64px 56px 40px;border-top:1px solid var(--hair);background:rgba(6,9,16,.6)}
.foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:44px}
.foot-cols{display:flex;gap:80px;font:500 12px var(--mono);letter-spacing:.1em}
.foot-col{display:flex;flex-direction:column;gap:13px;white-space:nowrap}
.foot-col b{font:500 10.5px var(--mono);letter-spacing:.2em;color:rgba(244,246,250,.35)}
.foot-col a{color:rgba(244,246,250,.7)}
.foot-rule{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.07);
           font:500 11px var(--mono);letter-spacing:.12em;color:rgba(244,246,250,.32)}

/* ── defensive mobile ───────────────────────────────────────────────────────
   Mobile is NOT designed in the handoff — this pass only keeps the page from
   breaking on a phone. Real mobile layouts to come from design.            */
@media (max-width:900px){
  nav{padding:16px 20px;flex-wrap:wrap}
  .navlinks{gap:18px;font-size:11px;width:100%;justify-content:space-between}
  section,.cta-band{padding-left:20px;padding-right:20px;padding-top:64px;padding-bottom:64px}
  header.hero{padding:56px 20px 72px}
  .hero-art{margin:-32px 0 22px}
  /* .shell prefix on purpose: page <style> blocks load AFTER this file, so a
     bare .panel-row here loses to their display:flex on equal specificity. */
  .shell .compass-art,.shell .panel-row{display:none}
  .compass h2,.compass .lede{max-width:100%}
  .compass-grid{margin-top:32px}
  .rail{display:none}
  .capture{min-width:0;width:100%}
  .foot-cols{gap:44px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   PREMIUM PASS (shared) — glass, bloom, vibrancy, and the travelling sweep.
   Lives here so all five pages inherit it. home.html re-declares some of these
   in its own <style>; the values match, so either winning is fine.
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes sweep{0%{transform:translateX(-140%) rotate(16deg)}55%,100%{transform:translateX(320%) rotate(16deg)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes pulseRing{0%{transform:scale(.85);opacity:.55}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

/* vibrancy: the hero lattice runs blue + violet + cyan + gold. Only blue and
   gold were reaching the body of each page, so it read cooler and flatter. */
section,footer,.cta-band{
  --blue:#40b4ff; --blue-deep:#4f92ff; --blue-light:#a8dcff; --blue-etf:#63cbff;
  --blue-signal:#4a95ff; --gold:#f5c983; --pos:#22ffa2; --neg:#ff5573;
  --violet:#a06bff; --cyan:#5ee9ff;
  --ink-2:rgba(236,246,255,.78); --ink-3:rgba(236,246,255,.6); --ink-4:rgba(236,246,255,.46);
}
section .lede{color:rgba(232,244,255,.76)}
section .eyebrow,.sect-tag span{color:#ffd79a;text-shadow:0 0 24px rgba(245,201,131,.6)}

/* display type takes a light-to-shadow gradient with bloom */
h1,h2{background:linear-gradient(178deg,#ffffff 12%,#dce9f8 46%,#8fb3d8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 42px rgba(64,180,255,.36))}

/* frosted glass on every gradient-hairline card */
.card > .in{backdrop-filter:blur(24px) saturate(155%);-webkit-backdrop-filter:blur(24px) saturate(155%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -40px 70px rgba(0,0,0,.34)}
.card{position:relative}

/* nav as real glass with a lit underline that fades blue into gold */
nav{backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%);
  border-bottom:1px solid rgba(120,190,255,.18);
  box-shadow:inset 0 1px 0 rgba(196,232,255,.16),0 18px 40px rgba(0,0,0,.42)}
nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(94,233,255,.5) 26%,rgba(160,107,255,.4) 52%,rgba(245,201,131,.5) 74%,transparent)}

/* a beam of light along every section divider */
section::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(94,233,255,.42) 18%,rgba(160,107,255,.36) 45%,rgba(245,201,131,.4) 72%,transparent)}

/* data surfaces read as lit consoles */
.sig-tbl,.pool-tbl,.led-tbl,.tbl{backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(196,232,255,.14),0 24px 50px rgba(0,0,0,.45)}
.sig-tbl .row:not(.hrow):hover,.pool-tbl .row:not(.hrow):hover,.led-tbl .row:not(.hrow):hover,
.fund-tbl .row:not(.hrow):hover{background:linear-gradient(90deg,rgba(64,180,255,.10),transparent)}

/* raised panels across the product pages */
.regime,.risk,.chip,.scanner,.kpi,.report,.layer > .in{position:relative;overflow:hidden}
.regime,.risk,.chip{backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 38px rgba(0,0,0,.4)}
.scanner{box-shadow:0 0 90px rgba(64,180,255,.24),inset 0 1px 0 rgba(196,232,255,.22),0 30px 64px rgba(0,0,0,.5)}

/* ── the travelling sweep, one wave per row ─────────────────────────────── */
.engine-grid .card > .in::after,.tiers > .card > .in::after,.compass-grid .card > .in::after,
.layers .layer > .in::after,.splits .split > .in::after,.marks .mark > .in::after,
.assets .asset-c > .in::after,.regimes .regime::after,.risks .risk::after,
.kpis .kpi::after,.reports .report::after{
  content:"";position:absolute;top:-60%;left:0;width:42%;height:220%;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(214,238,255,.17) 50%,transparent);
  animation:sweep 16s ease-in-out infinite}
/* light cards need a dark streak or nothing shows */
.kpis .kpi::after,.reports .report::after{
  background:linear-gradient(90deg,transparent,rgba(43,140,242,.13) 50%,transparent)}
.card-gold > .in::after,.tier-gold > .in::after{
  background:linear-gradient(90deg,transparent,rgba(255,231,193,.26) 50%,transparent)}

.layers .layer:nth-child(1) > .in::after,.splits .split:nth-child(1) > .in::after,
.marks .mark:nth-child(1) > .in::after,.assets .asset-c:nth-child(1) > .in::after,
.regimes .regime:nth-child(1)::after,.risks .risk:nth-child(1)::after,
.kpis .kpi:nth-child(1)::after,.reports .report:nth-child(1)::after{animation-delay:0s}
.layers .layer:nth-child(2) > .in::after,.splits .split:nth-child(2) > .in::after,
.marks .mark:nth-child(2) > .in::after,.assets .asset-c:nth-child(2) > .in::after,
.regimes .regime:nth-child(2)::after,.risks .risk:nth-child(2)::after,
.kpis .kpi:nth-child(2)::after,.reports .report:nth-child(2)::after{animation-delay:1.1s}
.layers .layer:nth-child(3) > .in::after,.splits .split:nth-child(3) > .in::after,
.marks .mark:nth-child(3) > .in::after,.assets .asset-c:nth-child(3) > .in::after,
.regimes .regime:nth-child(3)::after,.risks .risk:nth-child(3)::after,
.kpis .kpi:nth-child(3)::after,.reports .report:nth-child(3)::after{animation-delay:2.2s}
.layers .layer:nth-child(4) > .in::after,.marks .mark:nth-child(4) > .in::after,
.regimes .regime:nth-child(4)::after,.kpis .kpi:nth-child(4)::after{animation-delay:3.3s}

/* accent glows on the numbers that sell */
.l-wt,.sp-val,.a-stat,.risk .r i,.mm-px,.kpi b,.price-line{filter:saturate(1.4) brightness(1.1)}
.i-yld,.health,.vd,.f-vd{text-shadow:0 0 16px currentColor}

@media (prefers-reduced-motion:reduce){
  .engine-grid .card > .in::after,.tiers > .card > .in::after,.compass-grid .card > .in::after,
  .layers .layer > .in::after,.splits .split > .in::after,.marks .mark > .in::after,
  .assets .asset-c > .in::after,.regimes .regime::after,.risks .risk::after,
  .kpis .kpi::after,.reports .report::after{animation:none}
}

/* ══ hero product panels ═══════════════════════════════════════════════════
   Signal, Ground and Advisor led with atmosphere only. Every competitor puts
   a real product screen in the hero, so each gets one — drawn, not cropped. */
.hmock{position:relative;isolation:isolate;font-family:var(--mono);overflow:hidden;
  background:linear-gradient(163deg,#101b2c 0%,#0a1220 38%,#06090f 100%);
  border:1px solid rgba(120,190,255,.34);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);
  box-shadow:0 1px 0 rgba(196,232,255,.30) inset,0 -22px 60px rgba(64,180,255,.10) inset,
             0 0 90px rgba(64,180,255,.30),0 34px 74px rgba(0,0,0,.62)}
.hmock::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(125% 85% at 50% -8%,rgba(130,200,255,.13),transparent 62%),
             repeating-linear-gradient(180deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px)}
.hmock::after{content:"";position:absolute;left:-25%;top:-60%;width:55%;height:220%;z-index:4;
  transform:rotate(17deg);pointer-events:none;animation:sweep 16s ease-in-out infinite;
  background:linear-gradient(90deg,transparent,rgba(196,232,255,.08) 50%,transparent)}
.hmock > *{position:relative;z-index:2}
.hm-bar{display:flex;align-items:center;gap:10px;padding:10px 15px;
  background:linear-gradient(180deg,rgba(28,44,70,.95),rgba(11,17,28,.95));
  border-bottom:1px solid rgba(120,190,255,.2);box-shadow:inset 0 1px 0 rgba(196,232,255,.1)}
.hm-bar b{font:600 10px var(--mono);letter-spacing:.14em;color:rgba(226,240,255,.92);white-space:nowrap;
  text-shadow:0 0 12px rgba(130,200,255,.45)}
.hm-bar em{margin-left:auto;font-style:normal;display:flex;align-items:center;gap:6px;
  font:600 8.5px var(--mono);letter-spacing:.12em;color:rgba(226,240,255,.6);white-space:nowrap}
.hm-bar em i{width:5px;height:5px;border-radius:50%;background:var(--app,#22d36f);
  box-shadow:0 0 10px var(--app,#22d36f),0 0 22px var(--app,#22d36f)}
.hm-body{padding:16px 18px;display:grid;gap:14px}
.hm-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.hm-lbl{font:600 8.5px var(--mono);letter-spacing:.14em;color:rgba(226,240,255,.5);white-space:nowrap}
.hm-big{font:700 34px var(--mono);font-variant-numeric:tabular-nums;color:#eaf4ff;line-height:1;
  text-shadow:0 0 22px rgba(150,210,255,.5)}
.hm-badge{padding:8px 16px;font:700 13px var(--mono);letter-spacing:.14em;white-space:nowrap;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%)}
.hm-bars{display:grid;gap:9px}
.hm-b{display:grid;grid-template-columns:78px 1fr 26px;align-items:center;gap:10px}
.hm-b span{font:600 8.5px var(--mono);letter-spacing:.1em;color:rgba(226,240,255,.62);white-space:nowrap}
.hm-b u{display:block;height:5px;background:rgba(255,255,255,.09);text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.hm-b u i{display:block;height:5px;box-shadow:0 0 12px currentColor}
.hm-b em{font-style:normal;font:700 9.5px var(--mono);color:#eaf4ff;text-align:right;font-variant-numeric:tabular-nums}
.hm-foot{padding:9px 15px;border-top:1px solid rgba(120,190,255,.14);
  background:rgba(8,13,24,.6);font:500 8px var(--mono);letter-spacing:.12em;
  color:rgba(226,240,255,.45);display:flex;gap:14px;flex-wrap:wrap}
.hm-chips{display:flex;gap:6px;flex-wrap:wrap}
.hm-chips i{font-style:normal;font:600 8px var(--mono);letter-spacing:.1em;padding:5px 9px;white-space:nowrap;
  color:rgba(226,240,255,.5);border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent)}
.hm-chips i.on{color:#bfe4ff;border-color:rgba(90,180,255,.6);
  background:linear-gradient(180deg,rgba(64,180,255,.3),rgba(64,180,255,.1));
  box-shadow:0 0 16px rgba(64,180,255,.45)}
.hm-list{display:grid;gap:7px}
.hm-li{display:flex;align-items:center;gap:9px;font:500 9.5px var(--mono);color:rgba(226,240,255,.72)}
.hm-li b{margin-left:auto;font:700 9.5px var(--mono);color:#eaf4ff;font-variant-numeric:tabular-nums}
.hm-tick{width:13px;height:13px;flex:none;display:grid;place-items:center;
  border:1px solid var(--app,#22d36f);color:var(--app,#22d36f);font-size:8px;
  box-shadow:0 0 10px var(--app,#22d36f)}
@media (max-width:900px){.hero-mock{display:none}}


/* ── App picker / checkout (2026-08-27) ───────────────────────────────────
   Sits under the pricing cards. Deliberately reuses the existing card/glass
   language rather than introducing a second visual idiom on the page. */
.picker{position:relative;margin-top:22px;border-radius:18px;
  background:linear-gradient(150deg,rgba(127,179,232,.14),rgba(255,255,255,.02) 60%)}
.picker>.in{padding:26px 28px}
.pick-apps{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.pick{display:flex;flex-direction:column;gap:2px;cursor:pointer;user-select:none;
  padding:14px 16px;border:1px solid rgba(244,246,250,.14);border-radius:12px;
  background:rgba(255,255,255,.02);transition:border-color .15s,background .15s}
.pick:hover{border-color:rgba(127,179,232,.5)}
.pick:has(input:checked){border-color:rgba(127,179,232,.9);background:rgba(127,179,232,.10)}
/* Keyboard focus must be visible — the whole control is a label. */
.pick:has(input:focus-visible){outline:2px solid rgba(127,179,232,.9);outline-offset:2px}
.pick input{position:absolute;opacity:0;width:0;height:0}
.pick span{font:700 14px var(--sans,system-ui);color:var(--ink-1,#f4f6fa)}
.pick small{font:500 11px var(--mono);color:var(--ink-3,rgba(244,246,250,.45))}
.pick-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;margin:20px 0 18px}
.pick-cycle{display:inline-flex;border:1px solid rgba(244,246,250,.14);border-radius:10px;overflow:hidden}
.pick-cycle button{appearance:none;border:0;cursor:pointer;background:transparent;
  padding:10px 16px;font:700 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3,rgba(244,246,250,.45))}
.pick-cycle button small{display:block;font:500 9px var(--mono);text-transform:none;letter-spacing:0;opacity:.75}
.pick-cycle button.on{background:rgba(127,179,232,.16);color:rgba(127,179,232,.95)}
.pick-total{text-align:right}
#pick-price{font:700 30px var(--mono);color:var(--ink-1,#f4f6fa)}
#pick-price small{font:500 13px var(--mono);color:var(--ink-3,rgba(244,246,250,.45))}
#pick-note{font:500 11px var(--mono);color:var(--ink-3,rgba(244,246,250,.45));margin-top:2px}
.pick-warn{margin-top:10px;font:500 12px var(--mono);color:#ff7a8a}
.pick-fine{margin-top:12px;font:500 11px var(--mono);line-height:1.6;
  color:var(--ink-3,rgba(244,246,250,.45))}
.pick-fine a{color:rgba(127,179,232,.9)}
@media(max-width:640px){
  .picker>.in{padding:20px 18px}
  .pick-row{flex-direction:column;align-items:stretch}
  .pick-total{text-align:left}
}