/* =============================================================
   BLUE SAPPHIRE
   ============================================================= */

:root{
  --ink:      #04070f;
  --ink-2:    #070c1a;
  --line:     rgba(120,175,255,.14);
  --line-2:   rgba(120,175,255,.28);

  --sapph:    #1f6fff;
  --sapph-lt: #6db4ff;
  --sapph-dk: #0b3fa8;
  --cyan:     #46e0ff;
  --violet:   #8a6bff;

  --fg:       #e8f0ff;
  --fg-dim:   #9db2d4;
  --fg-mute:  #6f85a8;

  --sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1180px;
  --ease: cubic-bezier(.16,1,.3,1);

  /* the facet notch used on every card — echoes the stone's cut */
  --cut: 26px;
  --facet: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut),
                   100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.is-booting{ overflow:hidden; }

img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--sapph); color:#fff; }

.wrap{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:clamp(20px,5vw,40px);
}

.skip{ position:fixed; top:-100px; left:16px; z-index:220;
  background:var(--sapph); color:#fff; padding:10px 18px; border-radius:8px; }
.skip:focus{ top:16px; }

:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }

/* ---------------- boot ----------------
   Only ever shown when scripting is available — nothing else can lift it. */
.boot{ display:none; }
.js .boot{
  position:fixed; inset:0; z-index:210;
  display:grid; place-items:center;
  background:var(--ink);
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.05s var(--ease);
}
.boot.is-done{ clip-path:inset(0 0 100% 0); pointer-events:none; }
.boot[hidden]{ display:none; }
.boot__in{
  display:flex; flex-direction:column; align-items:center; gap:20px;
  transition:opacity .45s ease, transform .8s var(--ease);
}
.boot.is-done .boot__in{ opacity:0; transform:translateY(-16px); }
.boot__mark{
  width:46px; height:46px;
  filter:drop-shadow(0 0 24px rgba(45,130,255,.85));
  animation:bootSpin 2.4s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes bootSpin{ to{ transform:rotateY(360deg); } }
.boot__word{
  font-family:var(--mono); font-size:12px; letter-spacing:.38em;
  text-transform:uppercase; color:var(--fg-dim); padding-left:.38em;
}
.boot__bar{ display:block; width:150px; height:1px; background:var(--line); overflow:hidden; }
.boot__bar b{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--sapph),var(--cyan));
  box-shadow:0 0 10px var(--cyan);
  animation:bootFill 1.15s var(--ease) forwards;
}
@keyframes bootFill{ to{ width:100%; } }

/* ---------------- overlays ---------------- */
.grain{
  position:fixed; inset:-50%; z-index:120; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}   16%{transform:translate(-3%,-4%)}
  33%{transform:translate(2%,-2%)} 50%{transform:translate(-2%,3%)}
  66%{transform:translate(3%,2%)}  83%{transform:translate(-1%,-3%)}
}
.vignette{
  position:fixed; inset:0; z-index:110; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 42%, rgba(0,0,0,.55) 100%);
}
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:130; pointer-events:none; }
.progress i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--sapph-dk),var(--sapph),var(--cyan));
  box-shadow:0 0 14px rgba(70,224,255,.65);
  transition:width .1s linear;
}

/* ---------------- cursor ---------------- */
.cursor{
  position:fixed; top:0; left:0; z-index:140; pointer-events:none;
  width:34px; height:34px; margin:-17px 0 0 -17px;
  opacity:0; transition:opacity .3s; will-change:transform;
}
.cursor span{
  display:block; width:100%; height:100%; border-radius:50%;
  border:1px solid rgba(140,200,255,.55);
  background:radial-gradient(circle,rgba(70,180,255,.22),transparent 70%);
  transition:transform .28s var(--ease), border-color .28s, background .28s;
}
.cursor.is-on{ opacity:1; }
.cursor.is-hot span{
  transform:scale(1.85);
  border-color:rgba(70,224,255,.9);
  background:radial-gradient(circle,rgba(70,224,255,.3),transparent 70%);
}
@media (pointer:coarse){ .cursor{ display:none; } }

/* ---------------- section rail ---------------- */
.rail{
  position:fixed; right:24px; top:50%; transform:translateY(-50%);
  z-index:95; display:none; flex-direction:column; gap:15px;
}
@media (min-width:1280px){ .rail{ display:flex; } }
.rail a{ display:flex; align-items:center; justify-content:flex-end; gap:11px; }
.rail i{
  display:block; width:20px; height:1px; background:var(--line-2);
  transition:width .45s var(--ease), background .45s, box-shadow .45s;
}
.rail em{
  font-family:var(--mono); font-style:normal; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--fg-mute);
  opacity:0; transform:translateX(8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), color .4s;
}
.rail a:hover em{ opacity:1; transform:none; color:var(--fg-dim); }
.rail a:hover i{ width:30px; background:var(--sapph-lt); }
.rail a.is-active i{ width:36px; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.rail a.is-active em{ opacity:1; transform:none; color:var(--fg); }

/* ---------------- nav ---------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:28px;
  padding:18px clamp(20px,5vw,40px);
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease), backdrop-filter .45s,
             border-color .45s, padding .45s var(--ease);
}
.nav.is-stuck{
  background:rgba(4,7,15,.72);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--line);
  padding-block:12px;
}
.nav__brand{ display:flex; align-items:center; gap:11px; flex:0 0 auto; }
.nav__mark{ width:26px; height:26px; filter:drop-shadow(0 0 10px rgba(45,130,255,.65)); }
.nav__word{ font-weight:600; letter-spacing:.02em; font-size:16px; white-space:nowrap; }

.nav__links{ display:flex; gap:28px; margin-left:auto; }
.nav__links a{ position:relative; font-size:14.5px; color:var(--fg-dim); transition:color .3s; }
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:-5px; height:1px; width:0;
  background:linear-gradient(90deg,var(--sapph),var(--cyan));
  transition:width .4s var(--ease);
}
.nav__links a:hover{ color:var(--fg); }
.nav__links a:hover::after, .nav__links a.is-active::after{ width:100%; }
.nav__links a.is-active{ color:var(--fg); }
.nav__cta{ flex:0 0 auto; }

.burger{
  display:none; margin-left:auto; width:42px; height:42px; padding:0;
  background:transparent; border:1px solid var(--line-2); border-radius:10px; cursor:pointer;
}
.burger i{
  display:block; width:16px; height:1.5px; margin:3.5px auto; background:var(--fg);
  transition:transform .35s var(--ease), opacity .25s;
}
.burger[aria-expanded="true"] i:first-child{ transform:translateY(2.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-child{ transform:translateY(-2.5px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:99;
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  padding:0 clamp(20px,7vw,40px);
  background:rgba(4,7,15,.96);
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
}
.drawer[hidden]{ display:none; }
.drawer a{
  font-size:clamp(26px,7vw,40px); font-weight:600; letter-spacing:-.02em;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.drawer a:last-child{ color:var(--sapph-lt); border-bottom:0; }

/* ---------------- buttons ---------------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:14px 28px; border-radius:999px;
  font-size:15px; font-weight:500; color:#fff; isolation:isolate; overflow:hidden;
  background:linear-gradient(135deg,var(--sapph-dk),var(--sapph) 55%,#3d8bff);
  box-shadow:0 8px 30px -8px rgba(31,111,255,.75), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  will-change:transform;
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background:linear-gradient(135deg,var(--cyan),var(--sapph) 60%,var(--violet));
  transition:opacity .4s var(--ease);
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 44px -10px rgba(70,180,255,.85), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn:hover::before{ opacity:1; }
.btn span{ position:relative; z-index:1; }
.btn--sm{ padding:10px 20px; font-size:14px; }
.btn--lg{ padding:18px 38px; font-size:16.5px; }
.btn--ghost{ background:transparent; color:var(--fg); border:1px solid var(--line-2); box-shadow:none; }
.btn--ghost::before{ background:linear-gradient(135deg,rgba(31,111,255,.22),rgba(70,224,255,.14)); }
.btn--ghost:hover{ box-shadow:0 12px 34px -14px rgba(70,180,255,.6); border-color:rgba(120,200,255,.5); }

/* ---------------- shared ---------------- */
.eyebrow,.kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-mute); margin:0 0 20px;
}
.dot{
  width:6px; height:6px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 0 3px rgba(70,224,255,.18), 0 0 12px var(--cyan);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{ 50%{ opacity:.35; transform:scale(.8); } }

h1,h2,h3{ font-weight:600; letter-spacing:-.03em; line-height:1.06; margin:0; }
em{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em; }

.section{ padding:clamp(88px,13vw,160px) 0; position:relative; }
.section--alt{
  background:
    radial-gradient(90% 60% at 15% 0%, rgba(20,60,150,.20), transparent 60%),
    linear-gradient(180deg,var(--ink),var(--ink-2) 40%,var(--ink));
  border-block:1px solid var(--line);
}
.sec-head{ max-width:780px; margin-bottom:clamp(48px,7vw,80px); }
.sec-head h2{ font-size:clamp(32px,5.4vw,62px); }
.sec-head h2 em{ color:var(--sapph-lt); }
.lede{ color:var(--fg-dim); font-size:clamp(16px,1.6vw,19px); max-width:64ch; margin:22px 0 0; }

.rule{
  display:flex; align-items:center; gap:18px;
  max-width:var(--wrap); margin-inline:auto;
  padding-inline:clamp(20px,5vw,40px);
}
.rule i{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line-2),transparent); }
.rule span{ color:var(--sapph); font-size:9px; opacity:.8; }

/* ---------------- hero ---------------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:120px 0 80px; overflow:hidden;
  /* the whole hero is the grab surface — the copy layer sits over the stone */
  cursor:grab;
  touch-action:pan-y;              /* horizontal = spin, vertical = scroll */
  -webkit-tap-highlight-color:transparent;
}
.hero.is-grabbing{ cursor:grabbing; }
.hero a,.hero button{ cursor:pointer; }
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 50% at 78% 42%, rgba(20,80,200,.22), transparent 70%),
    linear-gradient(180deg, transparent 60%, var(--ink) 100%);
}
.hero__stage{
  position:absolute; inset:0; z-index:0; cursor:grab;
  touch-action:pan-y;              /* horizontal = spin, vertical = scroll */
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.hero__stage.is-grabbing{ cursor:grabbing; }
.hero__stage canvas{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transition:opacity 1.4s var(--ease);
}
.hero__stage.is-live canvas{ opacity:1; }
.hero__glow{
  position:absolute; left:64%; top:46%; width:min(60vw,760px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(31,111,255,.30), rgba(31,111,255,.06) 45%, transparent 70%);
  filter:blur(30px); pointer-events:none;
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{ 50%{ transform:translate(-50%,-50%) scale(1.14); opacity:.75; } }
@media (min-width:900px){
  .hero__stage{ left:34%; }
  .hero__glow{ left:52%; }
}
.hero__inner{
  position:relative; z-index:2; width:100%; max-width:var(--wrap);
  margin-inline:auto; padding-inline:clamp(20px,5vw,40px);
}
.hero__title{
  font-size:clamp(58px,13.5vw,172px);
  line-height:.86; letter-spacing:-.05em; margin:0 0 30px; text-transform:uppercase;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .w{
  display:block; transform:translateY(110%);
  /* two layers: a travelling highlight over a fixed white-to-sapphire ramp.
     Sliding the ramp itself just drags the wordmark to a flat colour. */
  background-image:
    linear-gradient(100deg, transparent 38%, rgba(255,255,255,.9) 50%, transparent 62%),
    linear-gradient(96deg, #ffffff 6%, #cfe6ff 30%, var(--sapph-lt) 58%, #2f7fff 100%);
  background-size:260% 100%, 100% 100%;
  background-position:130% 0, 0 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 40px rgba(45,130,255,.35));
  animation:riseIn 1.15s var(--ease) forwards, sweep 7.5s ease-in-out 1.4s infinite;
}
.hero__title .line:nth-child(2) .w{
  animation-delay:.13s, 1.75s; text-transform:none; letter-spacing:-.025em;
}
@keyframes riseIn{ to{ transform:translateY(0); } }
@keyframes sweep{
  0%,100%{ background-position:130% 0, 0 0; }
  50%    { background-position:-40% 0, 0 0; }
}
.hero__sub{ max-width:48ch; color:var(--fg-dim); font-size:clamp(16px,1.75vw,20px); margin:0 0 36px; }
.hero__sub b{ color:var(--fg); font-weight:500; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }
.hero__hint{
  margin:34px 0 0; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fg-mute);
}
.hero__hint::before{ content:'⟲  '; color:var(--cyan); }
@media (pointer:coarse){ .hero__hint::before{ content:'↔  '; } }
.hero__scroll{
  position:absolute; left:50%; bottom:26px; z-index:2;
  width:22px; height:36px; border:1px solid var(--line-2); border-radius:12px;
  transform:translateX(-50%);
}
.hero__scroll i{
  position:absolute; left:50%; top:7px; width:3px; height:7px; border-radius:2px;
  background:var(--cyan); transform:translateX(-50%);
  animation:wheel 1.9s var(--ease) infinite;
}
@keyframes wheel{ 60%{ transform:translate(-50%,14px); opacity:0; } 100%{ opacity:0; } }

/* CSS-only stone (WebGL fallback) */
.gem-fallback{
  position:absolute; left:50%; top:48%; width:min(46vw,420px); aspect-ratio:1;
  transform:translate(-50%,-50%); display:none; animation:spin3d 14s linear infinite;
}
.hero__stage.is-fallback .gem-fallback{ display:block; }
@media (min-width:900px){ .gem-fallback{ left:52%; } }
.gem-fallback i{
  position:absolute; inset:0;
  clip-path:polygon(50% 0%,79% 14%,100% 42%,50% 100%,0% 42%,21% 14%);
  background:conic-gradient(from 0deg,#0a2f7a,#3d8bff,#0d1f4d,#6db4ff,#123a9e,#46e0ff,#0a2f7a);
  filter:drop-shadow(0 0 60px rgba(45,130,255,.6));
}
.gem-fallback i:nth-child(2){
  inset:14%; opacity:.85; mix-blend-mode:screen;
  background:conic-gradient(from 180deg,#6db4ff,#0a2f7a,#46e0ff,#123a9e,#6db4ff);
}
.gem-fallback i:nth-child(3){
  inset:32%; opacity:.9; mix-blend-mode:screen;
  background:conic-gradient(from 90deg,#dff0ff,#1f6fff,#8a6bff,#dff0ff);
}
@keyframes spin3d{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

/* ---------------- marquee ---------------- */
.marquee{
  position:relative; z-index:3; background:rgba(7,12,26,.6);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marquee__row{ overflow:hidden; padding:16px 0; border-top:1px solid var(--line); }
.marquee__row:last-child{ border-bottom:1px solid var(--line); }
.marquee__track{ display:flex; width:max-content; animation:slide 44s linear infinite; }
.marquee__row--rev .marquee__track{ animation-duration:56s; animation-direction:reverse; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__set{ display:flex; align-items:center; gap:32px; padding-right:32px; }
.marquee__set span{
  display:inline-flex; align-items:baseline;
  font-size:clamp(19px,2.5vw,30px); font-weight:500; letter-spacing:-.02em;
  color:var(--fg-mute); white-space:nowrap; transition:color .35s;
}
.marquee__set span:hover{ color:var(--fg); }
.marquee__set span i{
  font-family:var(--mono); font-style:normal; font-size:.44em;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--sapph); margin-right:.3em; transform:translateY(-.55em);
}
.marquee__set b{ color:var(--sapph); font-size:8px; font-weight:400; opacity:.7; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------------- manifesto ---------------- */
.manifesto{ padding:clamp(90px,14vw,180px) 0; }
.statement{
  font-size:clamp(24px,3.9vw,46px); line-height:1.24; letter-spacing:-.028em;
  font-weight:500; margin:0; max-width:920px;
}
.statement .wd{ display:inline-block; opacity:.13; transition:opacity .5s var(--ease); }
.statement .wd.on{ opacity:1; }

/* ---------------- stats ---------------- */
.stats{ padding-bottom:clamp(60px,9vw,110px); }
.stats__grid{
  display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  background:var(--line); border:1px solid var(--line);
  border-radius:18px; overflow:hidden;
}
.stat{
  background:linear-gradient(180deg,rgba(10,18,38,.9),rgba(4,7,15,.9));
  padding:34px 28px; transition:background .45s var(--ease);
}
.stat:hover{ background:linear-gradient(180deg,rgba(16,38,88,.9),rgba(6,12,28,.95)); }
.stat b{
  display:block; font-size:clamp(40px,5.2vw,64px); font-weight:600;
  letter-spacing:-.045em; line-height:1; margin-bottom:12px;
  background:linear-gradient(180deg,#fff,var(--sapph-lt));
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.stat span{ font-size:14px; color:var(--fg-mute); line-height:1.5; display:block; }

/* ---------------- facet-cut card frames ----------------
   1px gradient frame + inner panel, both clipped to the same
   notch so the corner reads as a cut stone rather than a radius. */
.card,.person,.plan{
  clip-path:var(--facet);
  padding:1px;
  background:linear-gradient(150deg,
    rgba(120,175,255,.42), rgba(120,175,255,.06) 45%, rgba(120,175,255,.26));
  transition:transform .45s var(--ease), background .45s var(--ease),
             box-shadow .45s var(--ease);
  will-change:transform;
}
.card__in,.person__in,.plan__in{
  clip-path:var(--facet);
  background:linear-gradient(165deg,#0b1530,#05090f);
  height:100%;
  position:relative;
  overflow:hidden;
}
.card:hover,.person:hover,.plan:hover{
  background:linear-gradient(150deg,
    rgba(150,205,255,.85), rgba(120,175,255,.16) 45%, rgba(120,200,255,.55));
  box-shadow:0 26px 60px -30px rgba(31,111,255,.75);
}

/* ---------------- practice cards ---------------- */
.cards{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.card{ transform-style:preserve-3d; }
.card__in{ padding:34px 30px 30px; }
.card__in::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),
             rgba(70,180,255,.17), transparent 62%);
  transition:opacity .45s;
}
.card:hover .card__in::before{ opacity:1; }
.card__no{
  display:block; margin-bottom:18px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; color:var(--sapph);
}
.card h3{ font-size:22px; margin-bottom:12px; }
.card p{ color:var(--fg-dim); font-size:15.5px; margin:0 0 20px; }
.tags{ list-style:none; display:flex; flex-wrap:wrap; gap:7px; padding:0; margin:0; }
.tags li{
  font-family:var(--mono); font-size:11px; letter-spacing:.05em;
  padding:5px 11px; border-radius:999px;
  border:1px solid var(--line); color:var(--fg-mute); background:rgba(31,111,255,.05);
}

/* ---------------- bench ---------------- */
.bench-label{
  display:flex; align-items:center; gap:18px; margin:0 0 22px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--fg-mute);
}
.bench-label i{ flex:1; height:1px; background:linear-gradient(90deg,var(--line-2),transparent); }
.bench + .bench-label{ margin-top:clamp(40px,6vw,64px); }
.bench{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.person{ --cut:22px; }

/* rising bench — same frame, cyan accent so the two tiers read apart */
.person--rising{
  background:linear-gradient(150deg,
    rgba(70,224,255,.36), rgba(70,224,255,.05) 45%, rgba(70,224,255,.22));
}
.person--rising:hover{
  background:linear-gradient(150deg,
    rgba(120,240,255,.8), rgba(70,224,255,.14) 45%, rgba(70,224,255,.5));
  box-shadow:0 26px 60px -30px rgba(70,224,255,.6);
}
.person--rising .person__mono{
  background:linear-gradient(150deg,#0b6a86,var(--cyan) 60%,#a5f2ff);
  color:#04070f;
  box-shadow:0 8px 26px -10px rgba(70,224,255,.9);
}
.person--rising .person__role{ color:var(--cyan); }
.person--rising .person__yrs{
  color:var(--cyan); border-color:rgba(70,224,255,.4); background:rgba(70,224,255,.08);
}
.person__pair{
  margin:0; padding-top:16px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--fg-mute);
}
.person__pair b{ color:var(--fg-dim); font-weight:400; }
.person:hover{ transform:translateY(-5px); }
.person__in{ padding:28px 26px 26px; }
.person__top{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px; }
.person__mono{
  width:54px; height:54px; display:grid; place-items:center;
  clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  background:linear-gradient(150deg,var(--sapph-dk),var(--sapph) 60%,var(--cyan));
  font-family:var(--mono); font-size:15px; color:#fff;
  box-shadow:0 8px 26px -10px rgba(31,111,255,.9);
  transition:transform .55s var(--ease);
}
.person:hover .person__mono{ transform:rotate(180deg); }
.person__mono span{ transition:transform .55s var(--ease); }
.person:hover .person__mono span{ transform:rotate(-180deg); }
.person__yrs{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color:var(--sapph-lt); padding:5px 10px;
  border:1px solid var(--line-2); border-radius:999px;
  background:rgba(31,111,255,.08); white-space:nowrap;
}
.person h3{ font-size:20px; margin-bottom:5px; }
.person__role{ font-size:13.5px; color:var(--sapph-lt); margin:0 0 14px; }
.person__bio{ font-size:14.5px; color:var(--fg-dim); margin:0 0 18px; }
.from{
  list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:16px 0 0; margin:0;
  border-top:1px solid var(--line);
}
.from li{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--fg-mute);
}
.from li::before{ content:'ex-'; color:var(--sapph); }
.from li + li::after{ content:''; }

/* ---------------- engagement plans ---------------- */
.plans{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.plan__in{ padding:34px 30px 32px; display:flex; flex-direction:column; }
.plan--feature{
  background:linear-gradient(150deg,
    rgba(110,200,255,.9), rgba(31,111,255,.35) 45%, rgba(138,107,255,.7));
}
.plan--feature .plan__in{ background:linear-gradient(165deg,#0d1c44,#05090f); }
.plan__flag{
  display:inline-block; align-self:flex-start; margin-bottom:16px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#04070f; background:linear-gradient(100deg,var(--cyan),var(--sapph-lt));
  padding:5px 11px; border-radius:999px;
}
.plan h3{ font-size:24px; margin-bottom:8px; }
.plan__meta{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  color:var(--sapph-lt); margin:0 0 18px;
}
.plan > .plan__in > p:not(.plan__meta){ color:var(--fg-dim); font-size:15.5px; margin:0 0 22px; }
.ticks{ list-style:none; padding:18px 0 0; margin:auto 0 0; border-top:1px solid var(--line); }
.ticks li{
  position:relative; padding-left:22px; font-size:14px; color:var(--fg-dim); margin-bottom:9px;
}
.ticks li:last-child{ margin-bottom:0; }
.ticks li::before{
  content:'◆'; position:absolute; left:0; top:0;
  color:var(--sapph); font-size:8px; line-height:22px;
}

/* ---------------- proof / case studies ---------------- */
.proof{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); }
.case{
  clip-path:var(--facet); padding:1px;
  background:linear-gradient(150deg,
    rgba(120,175,255,.42), rgba(120,175,255,.06) 45%, rgba(120,175,255,.26));
  transition:transform .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
}
.case__in{
  clip-path:var(--facet); height:100%; position:relative; overflow:hidden;
  padding:32px 30px 30px;
  background:linear-gradient(165deg,#0b1530,#05090f);
}
.case:hover{
  transform:translateY(-4px);
  background:linear-gradient(150deg,
    rgba(150,205,255,.85), rgba(120,175,255,.16) 45%, rgba(120,200,255,.55));
  box-shadow:0 26px 60px -30px rgba(31,111,255,.75);
}
.case__tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-mute); margin:0 0 22px;
}
/* Was sized for a single figure ("6x"). It now carries a short title, so it
   is a heading rather than a stat. */
.case__stat{ margin:0 0 16px; }
.case__stat b{
  display:block;
  font-size:22px; font-weight:600; letter-spacing:-.025em; line-height:1.22;
  background:linear-gradient(180deg,#fff,var(--sapph-lt));
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.case__stat span{ display:block; margin-top:8px; font-size:14.5px; color:var(--fg-dim); }
.case__body{ color:var(--fg-dim); font-size:15px; margin:0 0 22px; }
.case__meta{
  list-style:none; display:flex; flex-wrap:wrap; gap:8px 18px; padding:16px 0 0; margin:0;
  border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--fg-mute);
}
.case__meta li::before{ content:'◆ '; color:var(--sapph); font-size:8px; }

/* ---------------- steps ---------------- */
.steps{ list-style:none; padding:0; margin:0; }
.step{
  display:grid; align-items:start; gap:24px; grid-template-columns:auto 1fr auto;
  padding:36px 0; border-top:1px solid var(--line);
  transition:background .45s var(--ease);
}
.step:last-child{ border-bottom:1px solid var(--line); }
.step:hover{ background:linear-gradient(90deg,rgba(31,111,255,.07),transparent 70%); }
.step__n{ font-family:var(--mono); font-size:13px; color:var(--sapph); padding-top:6px; min-width:34px; }
.step h3{ font-size:clamp(24px,3.2vw,34px); margin-bottom:10px; }
.step p{ color:var(--fg-dim); font-size:16px; margin:0; max-width:64ch; }
.step__wk{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-mute); padding-top:8px; white-space:nowrap;
}

/* ---------------- san diego ---------------- */
.sd{ position:relative; padding:clamp(88px,13vw,160px) 0; overflow:hidden; }
.sd__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(70% 60% at 80% 20%, rgba(31,111,255,.18), transparent 65%),
    radial-gradient(60% 50% at 10% 90%, rgba(138,107,255,.12), transparent 65%);
}
.sd__inner{
  position:relative; display:grid; gap:clamp(40px,6vw,72px);
  align-items:center; grid-template-columns:1fr;
}
@media (min-width:920px){ .sd__inner{ grid-template-columns:1.1fr .9fr; } }
.sd h2{ font-size:clamp(34px,5.4vw,64px); }
.sd h2 em{ color:var(--sapph-lt); }
.sd__facts{
  margin:36px 0 0; display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.sd__facts > div{ display:flex; gap:16px; padding:15px 20px; background:rgba(5,9,20,.85); }
.sd__facts dt{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-mute); min-width:78px; padding-top:2px;
}
.sd__facts dd{ margin:0; font-size:15px; }
.sd__svg{
  width:100%; border-radius:20px; border:1px solid var(--line);
  box-shadow:0 40px 90px -50px rgba(31,111,255,.8);
}
.sd__win rect{ animation:blink 4s steps(1) infinite; }
.sd__win rect:nth-child(2n){ animation-delay:1.1s; }
.sd__win rect:nth-child(3n){ animation-delay:2.3s; }
.sd__win rect:nth-child(5n){ animation-delay:3.1s; }
@keyframes blink{ 50%{ opacity:.12; } }

/* ---------------- cta ---------------- */
.cta{ position:relative; padding:clamp(100px,15vw,180px) 0; overflow:hidden; text-align:center; }
.cta__glow{
  position:absolute; left:50%; top:50%; width:min(120vw,1100px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(31,111,255,.24), transparent 62%);
  filter:blur(40px); animation:breathe 11s ease-in-out infinite;
}
.cta__inner{ position:relative; display:flex; flex-direction:column; align-items:center; }
.cta h2{ font-size:clamp(38px,7.4vw,90px); }
.cta .lede{ text-align:center; }
.cta__row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:42px; }
.cta__fine{
  margin:32px 0 0; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--fg-mute);
}

/* ---------------- founder cards ----------------
   Shared by every product page (LawAI, DocSpeak), so they live in the base
   stylesheet rather than one product's — DocSpeak does not load lawai.css and
   this section rendered completely unstyled there. */
.founders{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:860px){ .founders{ grid-template-columns:1fr 1fr; } }
.founder{
  clip-path:var(--facet); padding:1px;
  background:linear-gradient(150deg,
    rgba(120,175,255,.42), rgba(120,175,255,.06) 45%, rgba(120,175,255,.26));
  transition:background .45s var(--ease), transform .45s var(--ease);
}
.founder:hover{
  transform:translateY(-4px);
  background:linear-gradient(150deg,
    rgba(150,205,255,.85), rgba(120,175,255,.16) 45%, rgba(120,200,255,.55));
}
.founder__in{
  clip-path:var(--facet); height:100%; padding:32px 30px 28px;
  background:linear-gradient(165deg,#0b1530,#05090f);
}
.founder__head{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.founder__mono{
  flex:0 0 auto; width:54px; height:54px; display:grid; place-items:center;
  clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  background:linear-gradient(150deg,var(--sapph-dk),var(--sapph) 60%,var(--cyan));
  font-family:var(--mono); font-size:15px; color:#fff;
  box-shadow:0 8px 26px -10px rgba(31,111,255,.9);
}
.founder h3{ font-size:23px; margin-bottom:4px; }
.founder__role{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sapph-lt); margin:0;
}
.founder__bio{ font-size:15px; color:var(--fg-dim); margin:0 0 14px; }
.founder__bio b{ color:var(--fg); font-weight:500; }
/* Standalone, not a variant of .from — these are current affiliations and
   must never pick up the "ex-" prefix that .from adds. */
.founder__tags{
  list-style:none; display:flex; flex-wrap:wrap; gap:8px 14px;
  padding:16px 0 0; margin:6px 0 0; border-top:1px solid var(--line);
}
.founder__tags li{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--fg-mute);
}

/* =============================================================
   Shared product-page primitives

   Used by every product page (LawAI, DocSpeak, AI Accountant), so they
   live here rather than in one product's stylesheet. They were originally
   in lawai.css, which the other products do not load — their split, fact
   list and closing CTA sections were rendering completely unstyled.
   ============================================================= */

/* drifting colour behind the hero */
.aurora{ position:absolute; inset:-20% -10%; z-index:0; pointer-events:none; filter:blur(70px); }
.aurora i{ position:absolute; display:block; border-radius:50%; opacity:.5; }
.aurora i:nth-child(1){
  width:46vw; height:46vw; left:52%; top:-14%;
  background:radial-gradient(circle,rgba(31,111,255,.75),transparent 68%);
  animation:drift1 22s ease-in-out infinite;
}
.aurora i:nth-child(2){
  width:34vw; height:34vw; left:8%; top:38%;
  background:radial-gradient(circle,rgba(138,107,255,.55),transparent 68%);
  animation:drift2 27s ease-in-out infinite;
}
.aurora i:nth-child(3){
  width:28vw; height:28vw; left:70%; top:55%;
  background:radial-gradient(circle,rgba(70,224,255,.45),transparent 68%);
  animation:drift3 19s ease-in-out infinite;
}
@keyframes drift1{ 50%{ transform:translate3d(-6%,8%,0) scale(1.15); } }
@keyframes drift2{ 50%{ transform:translate3d(9%,-7%,0) scale(1.2); } }
@keyframes drift3{ 50%{ transform:translate3d(-8%,-10%,0) scale(1.1); } }

/* ---------------- card icons ---------------- */
.ico{
  display:grid; place-items:center; width:40px; height:40px; margin-bottom:18px;
  clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  background:linear-gradient(150deg,rgba(31,111,255,.30),rgba(70,224,255,.16));
  border:0;
}
.ico svg{
  width:19px; height:19px; fill:none;
  stroke:var(--sapph-lt); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.card:hover .ico svg{ stroke:var(--cyan); }

/* ---------------- flow ---------------- */
.law-flow{ padding:clamp(60px,8vw,96px) 0; border-block:1px solid var(--line); background:var(--ink-2); }
.flow{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(28px,4vw,44px); grid-template-columns:1fr;
}
@media (min-width:860px){ .flow{ grid-template-columns:repeat(3,1fr); } }
.flow li{ position:relative; padding-top:24px; border-top:1px solid var(--line-2); }
.flow li::after{
  content:''; position:absolute; left:0; top:-1px; width:38px; height:1px;
  background:linear-gradient(90deg,var(--cyan),transparent);
  box-shadow:0 0 10px var(--cyan);
}
.flow__n{
  display:block; margin-bottom:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--sapph);
}
.flow h3{ font-size:20px; margin-bottom:10px; }
.flow p{ margin:0; font-size:15px; color:var(--fg-dim); }

/* ---------------- split ---------------- */
.split{ display:grid; gap:clamp(36px,5vw,64px); align-items:start; grid-template-columns:1fr; }
@media (min-width:940px){ .split{ grid-template-columns:1.15fr .85fr; } }
.split h2{ font-size:clamp(30px,4.6vw,54px); }
.split h2 em{ color:var(--sapph-lt); }

.factlist{
  list-style:none; padding:0; margin:0; display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
}
.factlist li{ display:block; padding:20px 22px; background:rgba(5,9,20,.85); transition:background .4s var(--ease); }
.factlist li:hover{ background:rgba(16,34,78,.7); }
.factlist b{ display:block; font-size:15.5px; font-weight:500; margin-bottom:5px; }
.factlist span{ display:block; font-size:14px; color:var(--fg-mute); line-height:1.55; }

/* ---------------- end ---------------- */
.endcta{
  padding:clamp(80px,12vw,150px) 0;
  border-top:1px solid var(--line);
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(31,111,255,.18), transparent 70%),
    var(--ink);
}
.endcta h2{ font-size:clamp(32px,5.6vw,64px); margin-bottom:20px; }
.endcta .lede{ margin-bottom:34px; }

/* ---------------- 404 ---------------- */
.oops{
  min-height:100svh; display:flex; align-items:center;
  background:
    radial-gradient(70% 50% at 50% 30%, rgba(20,80,200,.20), transparent 70%),
    var(--ink);
}
.oops__inner{ max-width:660px; }
.oops__mark{ width:52px; height:52px; margin-bottom:34px; filter:drop-shadow(0 0 22px rgba(45,130,255,.7)); }
.oops h1{ font-size:clamp(34px,6vw,64px); margin-bottom:8px; }
.oops h1 em{ color:var(--sapph-lt); }
.oops__cta{ margin:36px 0 0; }

/* ---------------- footer ---------------- */
.foot{ border-top:1px solid var(--line); padding:44px 0; background:var(--ink); }
.foot__inner{ display:flex; flex-wrap:wrap; align-items:center; gap:22px 34px; justify-content:space-between; }
.foot__brand{ display:flex; align-items:center; gap:10px; font-weight:500; }
.foot__brand .nav__mark{ width:20px; height:20px; }
.foot__links{ display:flex; flex-wrap:wrap; gap:22px; }
.foot__links a{ font-size:14px; color:var(--fg-mute); transition:color .3s; }
.foot__links a:hover{ color:var(--fg); }
.foot__copy{ margin:0; font-size:13px; color:var(--fg-mute); }

/* ---------------- reveal ----------------
   Scoped to .js (set by an inline script in <head>). With scripting off,
   nothing is ever hidden and the page reads as plain HTML. */
.js .reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d,0ms);
}
.js .reveal.on{ opacity:1; transform:none; }

/* ---------------- responsive ---------------- */
@media (max-width:880px){
  .nav__links,.nav__cta{ display:none; }
  .burger{ display:block; }
  .hero{
    min-height:auto; padding:96px 0 64px;
    flex-direction:column; align-items:stretch;
  }
  .hero__stage{ position:relative; inset:auto; height:min(40vh,300px); margin-bottom:8px; }
  .hero__glow{ left:50%; width:min(84vw,420px); }
  .hero__title{ margin-bottom:22px; }
  .hero__hint{ margin-top:24px; }
  .hero__scroll{ display:none; }
  .step{ grid-template-columns:auto 1fr; }
  .step__wk{ grid-column:2; padding-top:0; }
  :root{ --cut:20px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero__title .w{ transform:none; }
  .reveal{ opacity:1; transform:none; }
  .statement .wd{ opacity:1; }
  .boot{ display:none; }
}