/* ============================================================================
   Lakshminarayana Natarajan — portfolio
   Design language: "console black" — near-black canvas, hairline rules,
   variable-width display type, one hot accent + one data accent.
   ========================================================================= */

/* ── tokens ───────────────────────────────────────────────────────────── */
/* Dark is the default. Light overrides live in the [data-theme] blocks below;
   every surface goes through --surf-* so both themes stay in sync. */
:root, [data-theme="dark"]{
  --ink:      #060607;
  --ink-a:    6,6,7;          /* --ink as channels, for the scrim gradients */
  --ink-2:    #0B0C0E;
  --ink-3:    #101216;
  --ink-4:    #16191E;
  --line:     rgba(255,255,255,.085);
  --line-2:   rgba(255,255,255,.16);
  --line-3:   rgba(255,255,255,.28);
  --surf-1:   rgba(255,255,255,.025);
  --surf-2:   rgba(255,255,255,.04);
  --surf-3:   rgba(255,255,255,.07);
  --surf-4:   rgba(255,255,255,.11);
  --surf-5:   rgba(255,255,255,.24);
  --text:     #EFEFEA;
  --text-2:   #9B9EA3;
  --text-3:   #62666C;
  --flare:    #FF4D2E;
  --flare-2:  #FF8B62;
  --flare-a:  255,77,46;
  --mint:     #57E8C0;
  --mint-a:   87,232,192;
  --sky:      #7FA8FF;
  --sky-a:    127,168,255;
  --bronze:   #C08A5A;
  --silver:   #B9C0C8;
  --gold:     #E3C15A;
  --video-filter: none;
  --stage-bg: #000;        /* exactly the clip's own background, so band and artwork are one surface */
  --video-op: .62;
  --grain-op: .16;
  --grain-blend: overlay;
  --shadow: 0 40px 90px -40px rgba(0,0,0,.9);
}

[data-theme="light"]{
  --ink:      #F6F5F1;
  --ink-a:    246,245,241;
  --ink-2:    #EEECE6;
  --ink-3:    #FFFFFF;
  --ink-4:    #E6E4DD;
  --line:     rgba(12,14,17,.12);
  --line-2:   rgba(12,14,17,.2);
  --line-3:   rgba(12,14,17,.34);
  --surf-1:   rgba(12,14,17,.028);
  --surf-2:   rgba(12,14,17,.05);
  --surf-3:   rgba(12,14,17,.08);
  --surf-4:   rgba(12,14,17,.13);
  --surf-5:   rgba(12,14,17,.26);
  --text:     #0D0F12;
  --text-2:   #4C5158;
  --text-3:   #767B82;
  --flare:    #D93A15;
  --flare-2:  #F0663C;
  --flare-a:  217,58,21;
  --mint:     #0A8F6B;
  --mint-a:   10,143,107;
  --sky:      #2F5FD0;
  --sky-a:    47,95,208;
  --bronze:   #8A5A2E;
  --silver:   #5E6670;
  --gold:     #8A6E12;
  /* the clip is white-line-art-on-black; inverting it gives ink-on-paper */
  --video-filter: invert(1);
  --stage-bg: #FFF;        /* the inverted clip's background */
  --video-op: .5;
  --grain-op: .1;
  --grain-blend: multiply;
  --shadow: 0 30px 70px -34px rgba(20,22,26,.28);
}

:root{
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-sans:    'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --e-expo: cubic-bezier(.16,1,.3,1);
  --e-io:   cubic-bezier(.76,0,.24,1);
  --e-soft: cubic-bezier(.33,1,.68,1);
  --e-back: cubic-bezier(.34,1.4,.64,1);

  --pad: clamp(1.25rem, 5vw, 6rem);
  --maxw: 1560px;
  --nav-h: 68px;

  /* Hero video stage. The clip is cropped to a 4:1 pano, so it seats as a full-width
     strip beneath the copy — nothing overlaps, so it can stay at full opacity and
     full contrast instead of being faded down to get out of the type's way.
     The intro card and the final position share this geometry, so the reveal lands
     exactly where the video lives. */
  /* Height leads: on a short viewport the strip shrinks rather than pushing the
     copy off screen. Width is derived from it so the 4:1 crop is never distorted. */
  --stage-ar: 4 / 1;
  --stage-h: min(calc(min(1240px, 94vw) / 4), 26svh);
  --stage-w: calc(var(--stage-h) * 4);
  --stage-b: 0px;
}

/* ── reset ────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }   /* anchor scrolling is handled in JS, so it can offset the fixed nav */
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--font-sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; text-rendering:optimizeLegibility;
}
h1,h2,h3,p,ul,ol,figure,pre{ margin:0; }
ul{ padding:0; list-style:none; }
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
code,pre{ font-family:var(--font-mono); }
em{ font-style:normal; }         /* the brief: no italics anywhere */
i{ font-style:normal; }
mark{ background:none; color:inherit; }
::selection{ background:var(--flare); color:#fff; }
.u-hidden{ position:absolute; width:0; height:0; overflow:hidden; }
:focus-visible{ outline:2px solid var(--flare); outline-offset:3px; border-radius:3px; }

/* ── ambient: grain + progress + cursor ───────────────────────────────── */
.grain{
  position:fixed; inset:-120%; z-index:900; pointer-events:none;
  opacity:var(--grain-op); mix-blend-mode:var(--grain-blend);
  filter:url(#grainFilter);
  background:#808080;
  animation:grainShift 6s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}      16%{transform:translate(-3%,2%)}
  33%{transform:translate(2%,-3%)}  50%{transform:translate(-2%,-2%)}
  66%{transform:translate(3%,1%)}   83%{transform:translate(-1%,3%)}
  100%{transform:translate(0,0)}
}

.progress{
  position:fixed; top:0; left:0; right:0; height:1.5px; z-index:850;
  background:var(--line); pointer-events:none; opacity:0; transition:opacity .5s;
}
.is-booted .progress{ opacity:1; }
.progress i{
  display:block; height:100%; width:100%; transform-origin:0 50%;
  transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--flare),var(--flare-2));
}

.cursor{ position:fixed; top:0; left:0; z-index:950; pointer-events:none;
  mix-blend-mode:difference; opacity:0; transition:opacity .35s; }
.has-cursor.is-booted .cursor{ opacity:1; }
.cursor__dot,.cursor__ring{ position:absolute; border-radius:50%; }
.cursor__dot{ width:5px; height:5px; margin:-2.5px 0 0 -2.5px; background:#fff; }
.cursor__ring{
  width:34px; height:34px; margin:-17px 0 0 -17px; border:1px solid rgba(255,255,255,.55);
  transition:width .35s var(--e-expo), height .35s var(--e-expo),
             margin .35s var(--e-expo), background .35s, border-color .35s;
}
.cursor.is-active .cursor__ring{ width:62px; height:62px; margin:-31px 0 0 -31px;
  background:rgba(255,255,255,.14); border-color:transparent; }
.cursor__label{
  position:absolute; top:0; left:0; transform:translate(-50%,-50%) scale(.7);
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; opacity:0; transition:opacity .3s, transform .3s var(--e-back); white-space:nowrap;
}
.cursor.is-active .cursor__label{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* ── boot sequence ────────────────────────────────────────────────────── */
.boot{
  position:fixed; inset:0; z-index:800; display:grid;
  grid-template-rows:auto 1fr auto; padding:clamp(1rem,3vw,2.2rem);
  pointer-events:none;
}
.boot::before{
  content:''; position:absolute; inset:0; background:var(--ink);
  transition:opacity .55s var(--e-soft);
}
.boot > *{ position:relative; }
body:not(.is-booting) .boot{ display:none; }
body[data-boot="1"] .boot::before,
body[data-boot="2"] .boot::before,
body[data-boot="3"] .boot::before{ opacity:0; }

.boot__hud{ display:flex; justify-content:space-between; align-items:flex-start;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-3); }
.boot__tag{ opacity:0; animation:bootFade .6s var(--e-soft) .1s forwards; }
.boot__tag--r{ animation-delay:.22s; text-align:right; }
.boot__tag em{ color:var(--flare); margin:0 .35em; }
@keyframes bootFade{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

.boot__stage{ display:grid; place-items:center; align-content:center; gap:.55rem; position:relative; }

/* the name gets the same variable-width expansion as the hero, one beat earlier */
.boot__who{ display:grid; place-items:center; gap:.1rem; }
.boot__me{
  font-family:var(--font-display); font-weight:700; line-height:1;
  font-size:clamp(2.6rem,7vw,5.2rem); font-stretch:64%; letter-spacing:.3em;
  opacity:0; transform:translateY(14px);
  animation:bootMe 1.5s var(--e-expo) .25s forwards;
}
@keyframes bootMe{
  0%   { opacity:0; transform:translateY(14px); font-stretch:64%;  letter-spacing:.3em; }
  35%  { opacity:1; }
  100% { opacity:1; transform:none;             font-stretch:112%; letter-spacing:-.01em; }
}
.boot__on{ font-family:var(--font-mono); font-size:10px; letter-spacing:.32em;
  text-transform:uppercase; color:var(--flare); opacity:0;
  animation:bootFade .7s var(--e-soft) .9s forwards; }
body[data-boot="1"] .boot__who,
body[data-boot="2"] .boot__who{ opacity:0; transform:translateY(-14px);
  transition:opacity .4s, transform .5s var(--e-expo); }
.boot__rotator{
  position:relative; height:1.35em; overflow:hidden;
  font-family:var(--font-display); font-weight:600; font-stretch:86%;
  font-size:clamp(1.05rem,2.7vw,1.95rem); letter-spacing:.06em; color:var(--text-2);
  text-align:center;
  transition:opacity .4s, transform .5s var(--e-expo);
}
.boot__rotator span{
  display:block; opacity:0; transform:translateY(100%);
  transition:transform .5s var(--e-expo), opacity .4s;
}
.boot__rotator span:not(:first-child){ position:absolute; inset:0; }
.boot__rotator span.is-in{ opacity:1; transform:none; }
.boot__rotator span.is-out{ opacity:0; transform:translateY(-100%); }
body[data-boot="1"] .boot__rotator,
body[data-boot="2"] .boot__rotator{ opacity:0; transform:translateY(-14px); }

/* the slit that becomes the frame */
.boot__slit{
  position:absolute; left:50%; top:50%; width:min(30vw,320px); height:1px;
  transform:translate(-50%,-50%) scaleX(0); transform-origin:50% 50%;
  background:linear-gradient(90deg,transparent,var(--flare),transparent);
  transition:transform .7s var(--e-expo), opacity .4s;
}
body[data-boot="1"] .boot__slit{ transform:translate(-50%,-50%) scaleX(1); }
body[data-boot="2"] .boot__slit{ opacity:0; transform:translate(-50%,-50%) scaleX(1.6); }

.boot__foot{ display:flex; align-items:center; gap:1.2rem; }
.boot__bar{ flex:1; height:1px; background:var(--line-2); overflow:hidden; }
.boot__bar i{ display:block; height:100%; width:100%; background:var(--text);
  transform-origin:0 50%; transform:scaleX(var(--bp,0)); transition:transform .18s linear; }
.boot__count{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  color:var(--text-2); font-variant-numeric:tabular-nums; }
body[data-boot="1"] .boot__foot,
body[data-boot="2"] .boot__foot,
body[data-boot="3"] .boot__foot{ opacity:0; transition:opacity .4s; }
.boot__skip{
  position:absolute; right:clamp(1rem,3vw,2.2rem); bottom:clamp(3.4rem,7vw,5rem);
  pointer-events:auto; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--text-3);
  transition:color .3s, opacity .4s;
}
.boot__skip span{ opacity:.5; }
.boot__skip:hover{ color:var(--text); }
body[data-boot="1"] .boot__skip,
body[data-boot="2"] .boot__skip,
body[data-boot="3"] .boot__skip{ opacity:0; pointer-events:none; }

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:700; height:var(--nav-h);
  display:flex; align-items:center; gap:2rem; padding:0 var(--pad);
  transform:translateY(-100%); opacity:0;
  transition:transform .7s var(--e-expo), opacity .5s, background .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.is-booted .nav{ transform:none; opacity:1; }
.nav.is-stuck{ background:rgba(var(--ink-a),.72); backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%); border-bottom-color:var(--line); }
.nav.is-hidden{ transform:translateY(-100%); }

.nav__mark{ display:flex; align-items:baseline; gap:.6rem; margin-right:auto; }
.nav__markGlyph{ font-family:var(--font-display); font-weight:700; font-stretch:112%;
  font-size:17px; letter-spacing:.02em; }
.nav__markText{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  color:var(--text-3); text-transform:uppercase; }
@media (max-width:900px){ .nav__markText{ display:none; } }

.nav__links{ display:flex; gap:1.9rem; }
.nav__links a{ position:relative; font-size:13.5px; color:var(--text-2);
  display:flex; align-items:baseline; gap:.45rem; transition:color .3s; }
.nav__links a i{ font-family:var(--font-mono); font-size:9.5px; color:var(--text-3);
  transition:color .3s; }
.nav__links a::after{ content:''; position:absolute; left:0; right:100%; bottom:-5px;
  height:1px; background:var(--flare); transition:right .45s var(--e-expo); }
.nav__links a:hover,.nav__links a.is-current{ color:var(--text); }
.nav__links a:hover i,.nav__links a.is-current i{ color:var(--flare); }
.nav__links a:hover::after,.nav__links a.is-current::after{ right:0; }

/* theme switch */
.nav__theme{ flex:0 0 auto; }
.nav__themeTrack{
  position:relative; display:flex; align-items:center; gap:.35rem;
  width:62px; height:30px; padding:0 7px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--surf-1);
  transition:border-color .3s, background .3s;
}
.nav__theme:hover .nav__themeTrack{ border-color:var(--line-3); }
.nav__themeIcon{ width:13px; height:13px; flex:0 0 13px; position:relative; z-index:1;
  fill:none; stroke:var(--text-3); stroke-width:1.7; stroke-linecap:round;
  transition:stroke .35s; }
.nav__themeIcon--moon{ fill:var(--text-3); stroke:none; transition:fill .35s; }
[data-theme="light"] .nav__themeIcon--sun{ stroke:var(--ink); }
[data-theme="dark"]  .nav__themeIcon--moon{ fill:var(--ink); }
.nav__themeKnob{
  position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:var(--text); transition:transform .45s var(--e-back);
}
[data-theme="dark"] .nav__themeKnob{ transform:translateX(30px); }
@media (max-width:860px){ .nav__theme{ margin-left:auto; margin-right:.4rem; } }

.nav__cta{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .95rem;
  border:1px solid var(--line-2); border-radius:999px; font-size:13px;
  transition:border-color .3s, background .3s, color .3s; }
.nav__cta:hover{ border-color:var(--text); background:var(--text); color:var(--ink); }
.nav__ctaArrow{ transition:transform .35s var(--e-back); }
.nav__cta:hover .nav__ctaArrow{ transform:translate(2px,-2px); }

.nav__burger{ display:none; width:34px; height:34px; position:relative; }
.nav__burger i{ position:absolute; left:7px; right:7px; height:1.5px; background:var(--text);
  transition:transform .4s var(--e-expo); }
.nav__burger i:first-child{ top:14px; } .nav__burger i:last-child{ top:19px; }
.nav__burger[aria-expanded="true"] i:first-child{ transform:translateY(2.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:last-child{ transform:translateY(-2.5px) rotate(-45deg); }

@media (max-width:860px){
  .nav__burger{ display:block; }
  .nav__cta{ display:none; }
  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; gap:0;
    background:rgba(var(--ink-a),.96); backdrop-filter:blur(20px); padding:1rem var(--pad) 2rem;
    border-bottom:1px solid var(--line);
    clip-path:inset(0 0 100% 0); transition:clip-path .6s var(--e-expo);
  }
  .nav.is-open .nav__links{ clip-path:inset(0 0 0 0); }
  .nav__links a{ padding:.85rem 0; border-bottom:1px solid var(--line); font-size:17px; }
}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-start; overflow:hidden;
  /* reserve the strip's height so the copy never sits on top of the scene */
  padding:calc(var(--nav-h) + 2.4vh) var(--pad) calc(var(--stage-h) + 1rem);
  /* Painted here, not just inherited from the canvas: the body background is
     propagated to the canvas, which sits outside the blending group, so the
     video's mix-blend-mode would have nothing to blend against. */
  background:var(--ink);
}
.hero__foot{ margin-top:auto; }   /* copy up top, the pano strip owns the floor */
/* No z-index here on purpose: z-index:0 would open a stacking context and isolate
   the video's blend mode, leaving its background as a visible panel. Positioned
   siblings (.hero__inner, .hero__foot) carry z-index:2, so this still sits behind. */
.hero__media{ position:absolute; inset:0; }

/* The stage and the accent frame share one geometry so the intro card lands exactly
   where the video finally sits — no resize jump when the reveal finishes. */
/* The band runs edge to edge; the artwork keeps its own 4:1 scale, centred inside it.
   The band colour is the clip's own background, so the join is invisible. */
.hero__stage{
  position:absolute; left:0; right:0; bottom:var(--stage-b);
  width:100%; height:var(--stage-h); background:var(--stage-bg);
}
.hero__edge{
  position:absolute; left:50%; bottom:var(--stage-b); transform:translateX(-50%);
  width:var(--stage-w); height:var(--stage-h);
}
.hero__stage{
  overflow:hidden; border-radius:16px;
  clip-path:inset(0% 0% 0% 0% round 16px);
  transition:clip-path 1.1s var(--e-expo), transform 1.1s var(--e-expo);
  will-change:clip-path;
}
/* slit → card at artwork width → the band widens out to full bleed */
body[data-boot="0"] .hero__stage{
  clip-path:inset(calc(50% - 1px) calc(50% - 120px) calc(50% - 1px) calc(50% - 120px) round 1px); }
body[data-boot="1"] .hero__stage{
  clip-path:inset(0 calc((100% - var(--stage-w)) / 2) 0 calc((100% - var(--stage-w)) / 2) round 14px); }
body[data-boot="2"] .hero__stage{ clip-path:inset(0 0 0 0 round 0); }

/* Nothing sits on top of the strip, so it stays fully opaque and slightly punched —
   the point is to watch the walk, not to have a mood texture behind the type. */
.hero__video{
  display:block; width:var(--stage-w); height:100%; margin-inline:auto; object-fit:contain;
  filter:var(--video-filter) contrast(1.2) brightness(1.08);
}

.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:clamp(60px,7vw,110px) clamp(60px,7vw,110px);
  opacity:0; transition:opacity 1.1s var(--e-soft);
  -webkit-mask-image:radial-gradient(115% 90% at 50% 42%, #000 30%, transparent 78%);
          mask-image:radial-gradient(115% 90% at 50% 42%, #000 30%, transparent 78%);
}
body:not(.is-booting) .hero__grid,
body[data-boot="2"] .hero__grid{ opacity:.55; }
/* Only a whisper at the very top, to seat the nav. The strip itself is left alone. */
.hero__scrim{
  position:absolute; inset:0; opacity:0; transition:opacity 1.1s var(--e-soft);
  background:linear-gradient(to bottom, rgba(var(--ink-a),.5) 0%, transparent 22%);
}
body:not(.is-booting) .hero__scrim,
body[data-boot="2"] .hero__scrim{ opacity:1; }

/* the accent frame sits outside the clipped stage so it can trace the card edge */
.hero__edge{
  z-index:1; border-radius:16px; border:1px solid var(--flare);
  opacity:0; pointer-events:none; transition:opacity .45s;
  clip-path:inset(0 0 0 0);
}
body[data-boot="1"] .hero__edge{ opacity:1; transform:scale(.965);
  animation:edgeTrace .95s var(--e-soft) forwards; }
@keyframes edgeTrace{
  0%   { clip-path:inset(0 100% 0 0); }
  100% { clip-path:inset(0 0 0 0); }
}
body[data-boot="2"] .hero__edge{ opacity:0; }
.hero__edge i{ position:absolute; width:11px; height:11px; border:0 solid var(--flare); }
.hero__edge i:nth-child(1){ top:-1px; left:-1px;  border-top-width:2px; border-left-width:2px;  border-top-left-radius:16px; }
.hero__edge i:nth-child(2){ top:-1px; right:-1px; border-top-width:2px; border-right-width:2px; border-top-right-radius:16px; }
.hero__edge i:nth-child(3){ bottom:-1px; left:-1px;  border-bottom-width:2px; border-left-width:2px;  border-bottom-left-radius:16px; }
.hero__edge i:nth-child(4){ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; border-bottom-right-radius:16px; }

.hero__inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; }
body.is-booting .hero__inner,
body.is-booting .hero__foot{ opacity:0; }

/* eyebrow */
.hero__eyebrow{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.4rem;
  margin-bottom:clamp(.85rem,1.8vw,1.35rem); }
.hero__eyebrow > *{ opacity:0; transform:translateY(10px); }
.is-booted .hero__eyebrow > *{ animation:riseIn .8s var(--e-expo) forwards; }
.is-booted .hero__eyebrow > *:nth-child(2){ animation-delay:.08s; }
.is-booted .hero__eyebrow > *:nth-child(3){ animation-delay:.14s; }
@keyframes riseIn{ to{ opacity:1; transform:none; } }

.pill{ display:inline-flex; align-items:center; gap:.55rem; padding:.34rem .8rem .34rem .62rem;
  border:1px solid var(--line-2); border-radius:999px; font-size:12px; color:var(--text-2);
  background:var(--surf-2); backdrop-filter:blur(8px); }
.pill--live i{ width:6px; height:6px; border-radius:50%; background:var(--mint);
  box-shadow:0 0 0 0 rgba(var(--mint-a),.6); animation:ping 2.4s ease-out infinite; }
@keyframes ping{ 0%{box-shadow:0 0 0 0 rgba(var(--mint-a),.55)} 70%{box-shadow:0 0 0 9px rgba(var(--mint-a),0)} 100%{box-shadow:0 0 0 0 rgba(var(--mint-a),0)} }
.hero__meta{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-3); }

/* the name — variable-width expansion is the signature move */
.hero__name{
  font-family:var(--font-display); font-weight:700; line-height:.86;
  font-size:clamp(2.05rem,7.3vw,7.6rem);
  font-stretch:62%; letter-spacing:.30em;
  transition:font-stretch 1.7s var(--e-expo), letter-spacing 1.7s var(--e-expo);
  margin-bottom:clamp(.5rem,1.1vw,.85rem);
}
.is-booted .hero__name{ font-stretch:112%; letter-spacing:-.022em; }
.hero__nameLine{ display:block; white-space:nowrap; }
.hero__nameLine--2{ color:var(--text-2); padding-left:.06em; }
.is-booted .hero__nameLine--2{ transition:color 1.6s var(--e-soft) .5s; color:var(--text); }

.ch{ display:inline-block; overflow:hidden; vertical-align:top; }
.ch > i{ display:inline-block; transform:translateY(115%); }
.is-booted .ch > i{ animation:chRise .95s var(--e-expo) forwards;
  animation-delay:calc(var(--ci,0) * 26ms + var(--cl,0) * 90ms); }
@keyframes chRise{ to{ transform:none; } }

/* role */
.hero__roleWrap{ display:flex; align-items:center; gap:clamp(.8rem,2vw,1.6rem);
  margin-bottom:clamp(.85rem,1.7vw,1.25rem); }
.hero__rule{ height:1px; background:linear-gradient(90deg,transparent,var(--line-3));
  flex:0 0 auto; width:0; transition:width 1.1s var(--e-expo) .55s; }
.hero__rule--r{ flex:1; background:linear-gradient(90deg,var(--line-3),transparent); }
.is-booted .hero__rule{ width:clamp(28px,6vw,96px); }
.is-booted .hero__rule--r{ width:auto; }
.hero__role{
  font-family:var(--font-mono); font-weight:500; white-space:nowrap;
  font-size:clamp(.72rem,1.5vw,1rem); text-transform:uppercase;
  letter-spacing:-.02em; opacity:0;
  transition:letter-spacing 1.5s var(--e-expo) .5s, opacity .9s var(--e-soft) .5s;
}
.is-booted .hero__role{ letter-spacing:.42em; opacity:1; }
.hero__alias{ white-space:nowrap; font-size:clamp(.85rem,1.15vw,1.02rem); color:var(--text-3);
  opacity:0; transform:translateX(-10px); }
.is-booted .hero__alias{ opacity:1; transform:none;
  transition:opacity .8s var(--e-soft) 1.15s, transform .9s var(--e-expo) 1.15s; }
.hero__alias b{ color:var(--text); font-weight:600; }
@media(max-width:700px){ .hero__alias{ display:none; } }

/* capability chips */
.hero__caps{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:clamp(.85rem,1.6vw,1.2rem); }
.hero__caps li{
  font-size:12.5px; color:var(--text-2); padding:.3rem .78rem; border-radius:999px;
  border:1px solid var(--line); background:var(--surf-1);
  opacity:0; transform:translateY(12px) scale(.96);
  transition:border-color .35s, color .35s, background .35s;
}
.is-booted .hero__caps li{ animation:riseIn .85s var(--e-expo) forwards;
  animation-delay:calc(1.05s + var(--i) * 70ms); }
.hero__caps li:hover{ color:var(--text); border-color:var(--line-3); background:var(--surf-3); }

.hero__lede{ max-width:60ch; font-size:clamp(1rem,1.35vw,1.24rem); color:var(--text-2);
  line-height:1.6; margin-bottom:clamp(1rem,2vw,1.5rem); }
.ln{ display:block; overflow:hidden; }
.ln > i{ display:block; transform:translateY(105%); opacity:0; }
.is-booted .ln > i{ animation:lnRise 1s var(--e-expo) forwards;
  animation-delay:calc(var(--ln-base,1.25s) + var(--li,0) * 90ms); }
@keyframes lnRise{ to{ transform:none; opacity:1; } }

/* buttons */
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; opacity:0; }
.is-booted .hero__actions{ animation:riseIn .9s var(--e-expo) 1.5s forwards; }
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.65rem;
  padding:.82rem 1.35rem; border-radius:999px; font-size:14px; font-weight:500;
  border:1px solid var(--line-2); overflow:hidden; isolation:isolate;
  transition:color .35s, border-color .35s;
}
.btn::before{ content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--text); transform:translateY(101%); transition:transform .55s var(--e-expo); }
.btn:hover::before{ transform:none; }
.btn:hover{ color:var(--ink); border-color:var(--text); }
.btn svg{ width:14px; height:14px; transition:transform .45s var(--e-back); }
.btn:hover svg{ transform:translateY(3px); }
.btn--primary{ background:var(--flare); border-color:var(--flare); color:#fff; }
.btn--primary::before{ background:var(--text); }
.btn--ghost span{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.02em; }

/* hero foot */
.hero__foot{
  position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto;
  padding:1.15rem 0 1.35rem;
  display:flex; align-items:center; justify-content:flex-start; gap:.9rem 2rem; flex-wrap:wrap;
  opacity:0;
}
.hero__foot::before{   /* keeps the footer legible where it meets the stage */
  content:''; position:absolute; inset:-1rem -100vw -1rem;
  background:linear-gradient(to bottom, transparent, rgba(var(--ink-a),.72) 32%, rgba(var(--ink-a),.72) 68%, transparent);
  pointer-events:none;
}
.hero__foot > *{ position:relative; }
.is-booted .hero__foot{ animation:riseIn 1s var(--e-expo) 1.7s forwards; }
.hero__scroll{ display:flex; align-items:center; gap:.7rem; font-family:var(--font-mono);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-3); }
.hero__scroll i{ width:52px; height:1px; background:var(--line-2); position:relative; overflow:hidden; }
.hero__scroll i::after{ content:''; position:absolute; inset:0; background:var(--flare);
  transform-origin:0 50%; animation:scrollSweep 2.4s var(--e-io) infinite; }
@keyframes scrollSweep{ 0%{transform:scaleX(0); transform-origin:0 50%}
  45%{transform:scaleX(1); transform-origin:0 50%}
  55%{transform:scaleX(1); transform-origin:100% 50%}
  100%{transform:scaleX(0); transform-origin:100% 50%} }
.hero__stats{ display:flex; flex-wrap:wrap; gap:.6rem 2rem; font-size:12.5px; color:var(--text-3); }
.hero__stats b{ color:var(--text); font-weight:600; font-family:var(--font-mono);
  font-size:12.5px; margin-right:.42em; font-variant-numeric:tabular-nums; }

/* ── marquee ──────────────────────────────────────────────────────────── */
.marquee{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--ink-2); padding:.9rem 0; }
.marquee__track{ display:flex; width:max-content; animation:marq 42s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marq{ to{ transform:translateX(-50%); } }
.marquee__set{ display:flex; align-items:center; gap:1.6rem; padding-right:1.6rem; }
.marquee__set span{ font-family:var(--font-display); font-weight:600; font-stretch:88%;
  font-size:clamp(.9rem,1.7vw,1.3rem); color:var(--text-2); white-space:nowrap; }
.marquee__set em{ color:var(--flare); font-size:.7em; }

/* ── generic section furniture ────────────────────────────────────────── */
.sec{ position:relative; max-width:var(--maxw); margin:0 auto;
  padding:clamp(4.5rem,11vh,9rem) var(--pad); }
.sec__head{ display:flex; align-items:baseline; gap:1rem 1.4rem; flex-wrap:wrap;
  padding-bottom:1.5rem; margin-bottom:clamp(2.2rem,5vw,4rem); border-bottom:1px solid var(--line); }
.sec__idx{ font-family:var(--font-mono); font-size:11px; color:var(--flare); letter-spacing:.16em; }
.sec__label{ font-family:var(--font-display); font-weight:600; font-stretch:104%;
  font-size:clamp(1.15rem,2.3vw,1.7rem); letter-spacing:-.01em; }
.sec__note{ margin-left:auto; font-size:13.5px; color:var(--text-3); max-width:36ch; }

.tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
.tags li{ font-family:var(--font-mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--text-3); border:1px solid var(--line);
  border-radius:3px; padding:.28rem .55rem; }

.stack{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .8rem;
  padding-top:1.1rem; border-top:1px solid var(--line); }
.stack__k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-3); }
.stack ul{ display:flex; flex-wrap:wrap; gap:.4rem .5rem; }
.stack li{ font-size:12px; color:var(--text-2); padding:.2rem .55rem;
  background:var(--surf-2); border-radius:3px; }

.feat{ display:grid; gap:.72rem; margin:1.4rem 0 1.6rem; }
.feat li{ position:relative; padding-left:1.35rem; font-size:14.5px; color:var(--text-2); line-height:1.55; }
.feat li::before{ content:''; position:absolute; left:0; top:.62em; width:7px; height:1px;
  background:var(--flare); }
.feat li b{ color:var(--text); font-weight:600; }
.feat--sm li{ font-size:13.5px; }

.link{ display:inline-flex; align-items:center; gap:.5rem; font-size:13.5px;
  padding-bottom:2px; border-bottom:1px solid var(--line-2); transition:border-color .3s, color .3s; }
.link span{ transition:transform .35s var(--e-back); }
.link:hover{ border-bottom-color:var(--flare); color:var(--flare); }
.link:hover span{ transform:translate(2px,-2px); }

/* reveal system — only hides when JS is present to un-hide it again */
.js [data-r]{ opacity:0; transform:translateY(26px); }
.js [data-r].is-in{ opacity:1; transform:none;
  transition:opacity .9s var(--e-soft) calc(var(--d,0) * 80ms),
             transform 1s var(--e-expo) calc(var(--d,0) * 80ms); }
/* Two escape hatches so the page is never left invisible:
   .failsafe  — the inline timer fired because main.js never ran
   html:not(.js) — scripting is off entirely, so nothing was ever going to un-hide it */
.failsafe [data-r], .failsafe .demo, .failsafe .ch > i, .failsafe .ln > i,
.failsafe .verdict__side, .failsafe .mtable__row, .failsafe .pipe__stage,
.failsafe .opt__card, .failsafe .spec__yaml,
.failsafe .hero__eyebrow > *, .failsafe .hero__caps li,
.failsafe .hero__actions, .failsafe .hero__foot, .failsafe .hero__role,
html:not(.js) [data-r], html:not(.js) .demo,
html:not(.js) .hero__eyebrow > *, html:not(.js) .hero__caps li,
html:not(.js) .hero__actions, html:not(.js) .hero__foot,
html:not(.js) .verdict__side, html:not(.js) .mtable__row, html:not(.js) .pipe__stage,
html:not(.js) .opt__card, html:not(.js) .spec__yaml{
  opacity:1 !important; transform:none !important;
}
.failsafe .hero__name, html:not(.js) .hero__name{ font-stretch:105%; letter-spacing:-.02em; }
.failsafe .hero__role, html:not(.js) .hero__role{ opacity:1; letter-spacing:.34em; }
.failsafe .hero__rule, html:not(.js) .hero__rule{ width:clamp(28px,6vw,96px); }
.failsafe .hero__rule--r, html:not(.js) .hero__rule--r{ width:auto; }
html:not(.js) .hero__grid{ opacity:.55; }
html:not(.js) .hero__scrim{ opacity:1; }
html:not(.js) .hero__video{ opacity:.62; }

/* ── manifesto ────────────────────────────────────────────────────────── */
.manifesto__text{
  font-family:var(--font-display); font-weight:500; font-stretch:96%;
  font-size:clamp(1.3rem,2.9vw,2.5rem); line-height:1.28; letter-spacing:-.018em;
  max-width:min(100%, 34ch); margin-bottom:clamp(2.5rem,6vw,4.5rem);
}
@media(min-width:1100px){ .manifesto__text{ max-width:40ch; } }
.manifesto__text .w{ display:inline-block; color:var(--text-3); transition:color .45s var(--e-soft); }
.manifesto__text .w.is-lit{ color:var(--text); }
.manifesto__grid{ display:grid; gap:1px; background:var(--line);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); border:1px solid var(--line); }
.fact{ background:var(--ink); padding:1.5rem 1.4rem; display:grid; gap:.5rem; align-content:start;
  transition:background .4s; }
.fact:hover{ background:var(--ink-2); }
.fact__k{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--flare); }
.fact__v{ font-family:var(--font-display); font-weight:600; font-stretch:100%;
  font-size:clamp(1.05rem,1.7vw,1.35rem); letter-spacing:-.01em; }
.fact__v b{ font-weight:600; font-variant-numeric:tabular-nums; }
.fact__d{ font-size:13px; color:var(--text-3); line-height:1.5; }

/* ── products ─────────────────────────────────────────────────────────── */
.prod{ display:grid; gap:clamp(2rem,4vw,4rem); align-items:start;
  padding-bottom:clamp(4rem,9vw,7rem); margin-bottom:clamp(4rem,9vw,7rem);
  border-bottom:1px solid var(--line); }
@media(min-width:1060px){
  .prod{ grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); }
  .prod--flip .prod__copy{ order:2; }
  .prod--flip .prod__demo{ order:1; }
  .prod__demo{ position:sticky; top:calc(var(--nav-h) + 3vh); }
}
.prod:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.prod__top{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-bottom:.8rem; border-bottom:1px solid var(--line); margin-bottom:1.2rem; }
.prod__no{ font-family:var(--font-mono); font-size:11px; color:var(--flare); letter-spacing:.14em; }
.prod__year{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-3);
  letter-spacing:.12em; text-transform:uppercase; }
.prod__status{ margin-right:auto; display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mint); border:1px solid rgba(var(--mint-a),.34); background:rgba(var(--mint-a),.08);
  border-radius:999px; padding:.2rem .55rem; }
.prod__status::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--mint);
  animation:ping 2.6s ease-out infinite; }
.prod__name{ font-family:var(--font-display); font-weight:700; font-stretch:110%;
  font-size:clamp(2.1rem,5.4vw,4.1rem); line-height:.95; letter-spacing:-.03em; }
.prod__sub{ font-family:var(--font-mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-2); margin:.5rem 0 1rem; }
.prod__lede{ font-size:clamp(1rem,1.25vw,1.16rem); color:var(--text); line-height:1.6;
  max-width:52ch; margin:1.2rem 0 1.4rem; }
.prod__problem{ padding:1.15rem 1.25rem; background:var(--ink-2); border-left:2px solid var(--flare);
  border-radius:0 6px 6px 0; margin-bottom:.4rem; }
.prod__problemK{ display:block; font-family:var(--font-mono); font-size:9.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--flare); margin-bottom:.5rem; }
.prod__problem p{ font-size:14px; color:var(--text-2); line-height:1.6; }
.prod__problem code{ font-size:12.5px; color:var(--text); background:var(--surf-3);
  padding:.1em .4em; border-radius:3px; }

/* ── demo shell ───────────────────────────────────────────────────────── */
.demo{
  border:1px solid var(--line-2); border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
  box-shadow:var(--shadow), 0 0 0 1px var(--surf-1) inset;
  transition:opacity 1s var(--e-soft), transform 1.1s var(--e-expo);
}
.js .demo{ opacity:0; transform:translateY(34px) scale(.985); }
.js .demo.is-in{ opacity:1; transform:none; }
.demo__chrome{ display:flex; align-items:center; gap:.8rem; padding:.62rem .85rem;
  border-bottom:1px solid var(--line); background:var(--surf-1); }
.demo__dots{ display:flex; gap:5px; }
.demo__dots i{ width:8px; height:8px; border-radius:50%; background:var(--line-3); }
.demo__dots i:first-child{ background:#3a2c28; }
.demo__url{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-3); letter-spacing:.06em; }
.demo__badge{ margin-left:auto; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em;
  color:var(--text-2); border:1px solid var(--line-2); border-radius:3px; padding:.16rem .45rem; }
.demo__rec{ margin-left:auto; display:flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em; color:var(--flare); }
.demo__rec i{ width:6px; height:6px; border-radius:50%; background:var(--flare);
  animation:recBlink 1.6s ease-in-out infinite; }
@keyframes recBlink{ 0%,100%{opacity:1} 50%{opacity:.25} }

.demo__body{ position:relative; height:clamp(330px,38vw,392px); padding:1.1rem 1.15rem; }

/* stage rail */
.rail{ position:relative; display:flex; gap:1.4rem; padding-bottom:.7rem; margin-bottom:1rem;
  border-bottom:1px solid var(--line); }
.rail__step{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-3); transition:color .45s; }
.rail__ink{ position:absolute; left:0; bottom:-1px; height:1px; background:var(--flare);
  width:var(--rw,25%); transform:translateX(var(--rx,0));
  transition:width .6s var(--e-expo), transform .6s var(--e-expo); }
.demo[data-stage="1"] .rail__step[data-step="1"],
.demo[data-stage="2"] .rail__step[data-step="2"],
.demo[data-stage="3"] .rail__step[data-step="3"],
.demo[data-stage="4"] .rail__step[data-step="4"]{ color:var(--text); }

/* scenes */
.scene{ position:absolute; left:1.15rem; right:1.15rem; top:3.6rem; bottom:1.1rem;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .5s var(--e-soft), transform .7s var(--e-expo), visibility .5s; }
.demo[data-stage="1"] .scene--capture, .demo[data-stage="1"] .scene--etl,
.demo[data-stage="1"] .scene--batch,
.demo[data-stage="2"] .scene--compile, .demo[data-stage="2"] .scene--nlp,
.demo[data-stage="2"] .scene--tune,
.demo[data-stage="3"] .scene--trust,   .demo[data-stage="3"] .scene--cluster,
.demo[data-stage="3"] .scene--hand,
.demo[data-stage="4"] .scene--replay,  .demo[data-stage="4"] .scene--board,
.demo[data-stage="4"] .scene--ctrl,
.demo[data-stage="5"] .scene--rag{
  opacity:1; visibility:visible; transform:none;
}

/* ── ReplayOps demo ───────────────────────────────────────────────────────
   Two beats matter here: the SOP being written out of a recorded session, and
   the agent later driving that same DOM behind a confidence gate. Both scenes
   render the same mock page so the "replay" reads as the same screen.        */
.page{
  position:relative; border:1px solid var(--line); border-radius:8px;
  background:var(--surf-1); padding:.75rem .8rem; display:grid; gap:.5rem; align-content:start;
}
.page__bar{ display:flex; align-items:center; gap:5px; padding-bottom:.55rem;
  border-bottom:1px solid var(--line); font-family:var(--font-mono); font-size:9px;
  letter-spacing:.06em; color:var(--text-3); }
.page__bar i{ width:6px; height:6px; border-radius:50%; background:var(--line-3); }
.page__bar em{ margin-left:.35rem; }
.page__agent{ margin-left:auto; color:var(--flare); border:1px solid rgba(var(--flare-a),.4);
  border-radius:3px; padding:.1rem .3rem; font-size:8px; letter-spacing:.14em;
  text-transform:uppercase; }
.page__field{ display:flex; justify-content:space-between; align-items:baseline; gap:.8rem;
  font-size:11.5px; color:var(--text-3); padding:.34rem .5rem; border-radius:4px;
  border:1px solid var(--line); }
.page__field b{ font-family:var(--font-mono); font-size:11px; color:var(--text); font-weight:500; }
.page__row{ height:6px; border-radius:2px; background:var(--line-2); width:70%; }
.page__btn{ justify-self:start; margin-top:.15rem; font-size:11.5px; padding:.38rem .68rem;
  border-radius:5px; border:1px solid var(--line-2); color:var(--text-2); }
.page__btn--locked{ border-color:rgba(var(--flare-a),.5); color:var(--flare);
  background:rgba(var(--flare-a),.07); }

/* The highlight and its selector chip hang off the target element itself, so they
   track the real layout instead of guessing offsets that drift when copy changes. */
.page [data-sel]{ position:relative; }
.page [data-sel]::after{           /* the outline */
  content:''; position:absolute; inset:-3px; border-radius:6px;
  border:1.5px solid var(--sky); box-shadow:0 0 0 3px rgba(var(--sky-a),.14);
  opacity:0; pointer-events:none;
}
.page [data-sel]::before{          /* the selector chip */
  content:attr(data-sel); position:absolute; left:0; bottom:calc(100% + 6px);
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.04em; white-space:nowrap;
  color:var(--sky); background:rgba(var(--sky-a),.14); border:1px solid rgba(var(--sky-a),.4);
  border-radius:3px; padding:.12rem .32rem; opacity:0; pointer-events:none; z-index:2;
}
/* the button's chip goes beside it — above would collide with the filler row */
.page__btn[data-sel]::before{ left:calc(100% + 6px); bottom:auto; top:50%; transform:translateY(-50%); }

.demo[data-stage="1"] .page__field--a::after,
.demo[data-stage="1"] .page__field--a::before{ animation:hlFirst 3.6s var(--e-soft) .4s both; }
@keyframes hlFirst{ 0%{opacity:0} 8%{opacity:1} 40%{opacity:1} 48%{opacity:0} 100%{opacity:0} }
.demo[data-stage="1"] .page__btn::after,
.demo[data-stage="1"] .page__btn::before{ animation:hlSecond 3.6s var(--e-soft) .4s both; }
@keyframes hlSecond{ 0%,52%{opacity:0} 60%,100%{opacity:1} }

/* stage 4: the same control, but held closed */
.page__btn--locked[data-sel]::after{ opacity:1; border-color:var(--flare);
  box-shadow:0 0 0 3px rgba(var(--flare-a),.16); }
.page__btn--locked[data-sel]::before{ opacity:1; color:var(--flare);
  background:rgba(var(--flare-a),.12); border-color:rgba(var(--flare-a),.4); }
.demo[data-stage="4"] .page__btn--locked::after{ animation:holdPulse 1.8s var(--e-soft) infinite; }
@keyframes holdPulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(var(--flare-a),.16); }
  50%{ box-shadow:0 0 0 7px rgba(var(--flare-a),.04); } }

.page__cursor{ position:absolute; width:0; height:0; left:60%; top:22%; opacity:0;
  border-left:7px solid var(--text); border-right:5px solid transparent;
  border-bottom:6px solid transparent; border-top:10px solid var(--text);
  transform:rotate(-20deg); }
.demo[data-stage="1"] .page__cursor{ animation:curMove 3.6s var(--e-expo) .4s both; }
@keyframes curMove{ 0%{opacity:0; left:60%; top:22%} 12%{opacity:1}
  58%{opacity:1; left:24%; top:72%} 100%{opacity:1; left:24%; top:72%} }
.page__ripple{ position:absolute; left:24%; top:72%; width:12px; height:12px; margin:-6px 0 0 -6px;
  border-radius:50%; border:1px solid var(--flare); opacity:0; }
.demo[data-stage="1"] .page__ripple{ animation:ripple 1.5s var(--e-soft) 2.3s 2 both; }

/* the agent's gate readout */
.agent{ display:grid; gap:.45rem; align-content:start; }
.agent__row{ display:flex; align-items:center; gap:.55rem; font-size:12px; color:var(--text-2);
  padding:.45rem .6rem; border:1px solid var(--line); border-radius:6px; background:var(--surf-1);
  opacity:0; transform:translateY(10px); }
.demo[data-stage="4"] .agent__row{ animation:riseIn .6s var(--e-expo) both;
  animation-delay:calc(.2s + var(--i) * .38s); }
.agent__row i{ font-family:var(--font-mono); font-size:11px; }
.agent__row code{ font-size:10.5px; color:var(--text); }
.agent__row b{ margin-left:auto; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; }
.agent__row.is-ok i{ color:var(--mint); } .agent__row.is-ok b{ color:var(--mint); }
.agent__row.is-warn{ border-color:rgba(var(--sky-a),.34); background:rgba(var(--sky-a),.06); }
.agent__row.is-warn i, .agent__row.is-warn b{ color:var(--sky); }
.agent__row.is-hold{ border-color:rgba(var(--flare-a),.45); background:rgba(var(--flare-a),.08);
  color:var(--text); }
.agent__row.is-hold i, .agent__row.is-hold b{ color:var(--flare); }
.agent__note{ margin-top:.3rem; font-family:var(--font-mono); font-size:10px; letter-spacing:.09em;
  color:var(--text-3); text-transform:uppercase; opacity:0; }
.demo[data-stage="4"] .agent__note{ animation:fadeIn .7s ease 1.9s both; }

.sop__sel{ font-family:var(--font-mono); font-size:9px; color:var(--sky);
  background:rgba(var(--sky-a),.1); border-radius:3px; padding:.1rem .3rem; margin-left:.15rem; }

.scene--capture{ display:grid; grid-template-columns:1.15fr 1fr; gap:1rem; }
.scene--replay{ display:grid; grid-template-columns:1.05fr 1fr; gap:1rem; align-content:start; }

.capture__side{ display:grid; gap:.7rem; align-content:start; }
.wave{ display:flex; align-items:center; gap:4px; height:34px; }
.wave i{ flex:1 1 0; max-width:7px; background:var(--line-3); border-radius:1px; height:20%; }
.demo[data-stage="1"] .wave i{ animation:waveP 1.05s ease-in-out infinite alternate; }
.wave i:nth-child(1){animation-delay:0s}   .wave i:nth-child(2){animation-delay:.07s}
.wave i:nth-child(3){animation-delay:.14s} .wave i:nth-child(4){animation-delay:.21s}
.wave i:nth-child(5){animation-delay:.28s} .wave i:nth-child(6){animation-delay:.35s}
.wave i:nth-child(7){animation-delay:.42s} .wave i:nth-child(8){animation-delay:.49s}
.wave i:nth-child(9){animation-delay:.56s} .wave i:nth-child(10){animation-delay:.63s}
.wave i:nth-child(11){animation-delay:.7s} .wave i:nth-child(12){animation-delay:.77s}
@keyframes waveP{ from{height:14%; background:var(--line-2)} to{height:92%; background:var(--flare)} }
.capture__vo{ font-size:12.5px; color:var(--text-2); line-height:1.5; }
.evd{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.2rem; }
.evd__chip{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em;
  color:var(--mint); border:1px solid rgba(var(--mint-a),.3); background:rgba(var(--mint-a),.07);
  border-radius:3px; padding:.2rem .45rem; opacity:0; transform:translateY(8px) scale(.9); }
.demo[data-stage="1"] .evd__chip{ animation:riseIn .6s var(--e-back) both; }
.demo[data-stage="1"] .evd__chip:nth-child(1){ animation-delay:1.1s; }
.demo[data-stage="1"] .evd__chip:nth-child(2){ animation-delay:1.5s; }
.demo[data-stage="1"] .evd__chip:nth-child(3){ animation-delay:2.2s; }
.demo[data-stage="1"] .evd__chip:nth-child(4){ animation-delay:2.6s; }

.scene--compile{ display:grid; align-content:start; }
.sop{ display:grid; gap:.5rem; }
.sop__title{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-3); margin-bottom:.35rem; }
.sop__line{ position:relative; display:flex; align-items:center; gap:.6rem; font-size:13px;
  color:var(--text-2); padding:.5rem .7rem; border:1px solid var(--line); border-radius:6px;
  background:var(--surf-1);
  opacity:0; transform:translateX(-14px); clip-path:inset(0 100% 0 0); }
.demo[data-stage="2"] .sop__line{ animation:sopIn .7s var(--e-expo) both;
  animation-delay:calc(.15s + var(--i) * .37s); }
@keyframes sopIn{ to{ opacity:1; transform:none; clip-path:inset(0 0 0 0); } }
.sop__line b{ font-family:var(--font-mono); font-size:11px; color:var(--text-3); font-weight:500;
  min-width:1.1em; }
.sop__line em{ margin-left:auto; font-family:var(--font-mono); font-size:9px; letter-spacing:.06em;
  color:var(--mint); border:1px solid rgba(var(--mint-a),.28); border-radius:3px; padding:.14rem .35rem; }
.sop__line--dec{ border-color:rgba(var(--sky-a),.34); background:rgba(var(--sky-a),.06); color:var(--text); }
.sop__line--dec b{ color:var(--sky); }
.sop__line--exc{ border-color:rgba(var(--flare-a),.4); background:rgba(var(--flare-a),.07); color:var(--text); }
.sop__line--exc b{ color:var(--flare); }

.scene--trust{ display:grid; grid-template-columns:auto 1fr; gap:1.6rem; align-items:center; }
.dial{ position:relative; width:clamp(110px,13vw,140px); aspect-ratio:1; display:grid; place-items:center; }
.dial svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.dial__bg{ fill:none; stroke:var(--line); stroke-width:6; }
.dial__fg{ fill:none; stroke:var(--mint); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100; }
.demo[data-stage="3"] .dial__fg{ animation:dialFill 1.5s var(--e-expo) .25s both; }
@keyframes dialFill{ to{ stroke-dashoffset:14; } }
.dial__num{ font-family:var(--font-display); font-weight:700; font-stretch:104%;
  font-size:clamp(1.6rem,3vw,2.2rem); line-height:1; font-variant-numeric:tabular-nums; }
.dial__k{ position:absolute; bottom:22%; font-family:var(--font-mono); font-size:9px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--text-3); }
.bars{ display:grid; gap:.85rem; }
.bar{ display:grid; grid-template-columns:1fr auto; gap:.35rem .8rem; align-items:baseline; }
.bar em{ font-size:12px; color:var(--text-2); }
.bar b{ font-family:var(--font-mono); font-size:11.5px; color:var(--text);
  font-variant-numeric:tabular-nums; }
.bar i{ grid-column:1/-1; height:3px; border-radius:2px; background:var(--line);
  position:relative; overflow:hidden; }
.bar i::after{ content:''; position:absolute; inset:0; border-radius:2px;
  background:linear-gradient(90deg,var(--mint),rgba(var(--mint-a),.45));
  transform-origin:0 50%; transform:scaleX(0); }
.demo[data-stage="3"] .bar i::after{ animation:barFill 1.2s var(--e-expo) both; }
@keyframes barFill{ to{ transform:scaleX(var(--v)); } }
.demo[data-stage="3"] .bar:nth-child(1) i::after{ animation-delay:.4s; }
.demo[data-stage="3"] .bar:nth-child(2) i::after{ animation-delay:.6s; }
.demo[data-stage="3"] .bar:nth-child(3) i::after{ animation-delay:.8s; }


/* ── R.Y.W demo ───────────────────────────────────────────────────────── */
.demo--ryw .demo__body{ display:grid; }
.ryw{ display:grid; grid-template-columns:1fr .9fr 1fr; gap:.9rem; }
.ryw__col{ display:grid; gap:.6rem; align-content:start; min-width:0; }
.ryw__k{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-3); }
.jd{ font-size:12.5px; line-height:1.62; color:var(--text-3); }
.jd mark{ color:var(--text); position:relative; border-radius:3px;
  box-shadow:inset 0 0 0 0 rgba(var(--flare-a),0); }
.demo--ryw.is-playing .jd mark{ animation:mk 7s var(--e-soft) infinite; }
@keyframes mk{
  0%,6%{ color:var(--text-3); background:transparent; }
  14%,52%{ color:var(--text); background:rgba(var(--flare-a),.16); box-shadow:inset 0 0 0 1px rgba(var(--flare-a),.3); }
  70%,100%{ color:var(--text-3); background:transparent; box-shadow:none; }
}
.jd mark:nth-of-type(1){animation-delay:.0s} .jd mark:nth-of-type(2){animation-delay:.18s}
.jd mark:nth-of-type(3){animation-delay:.36s} .jd mark:nth-of-type(4){animation-delay:.54s}
.jd mark:nth-of-type(5){animation-delay:.72s} .jd mark:nth-of-type(6){animation-delay:.9s}

.ryw__col--mcp{ align-content:start; justify-items:center; text-align:center; }
.node{ position:relative; display:grid; place-items:center; padding:1.2rem 0 .8rem; }
.node__ring{ position:absolute; width:74px; height:74px; border-radius:50%;
  border:1px solid rgba(var(--flare-a),.35); }
.demo--ryw.is-playing .node__ring{ animation:nodePulse 2.6s var(--e-soft) infinite; }
@keyframes nodePulse{ 0%{transform:scale(.75); opacity:.9} 100%{transform:scale(1.6); opacity:0} }
.node__core{ position:relative; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em;
  color:var(--text); border:1px solid var(--flare); background:rgba(var(--flare-a),.1);
  border-radius:999px; padding:.4rem .7rem; }
.call{ width:100%; display:grid; gap:.35rem; text-align:left;
  border:1px solid var(--line); border-radius:6px; padding:.6rem .7rem;
  background:var(--surf-1); }
.call__row{ display:flex; justify-content:space-between; align-items:baseline; gap:.6rem;
  font-family:var(--font-mono); font-size:10px; color:var(--text-3); }
.call__row b{ font-weight:500; color:var(--text); }
.call__row b.is-no{ color:var(--flare); }
.flow{ display:flex; gap:5px; }
.flow i{ width:5px; height:5px; border-radius:50%; background:var(--flare); opacity:.25; }
.demo--ryw.is-playing .flow i{ animation:flowDot 1.5s var(--e-soft) infinite; }
.flow i:nth-child(1){animation-delay:0s}   .flow i:nth-child(2){animation-delay:.12s}
.flow i:nth-child(3){animation-delay:.24s} .flow i:nth-child(4){animation-delay:.36s}
.flow i:nth-child(5){animation-delay:.48s}
@keyframes flowDot{ 0%,100%{opacity:.2; transform:scale(.8)} 40%{opacity:1; transform:scale(1.25)} }

.doc{ position:relative; border:1px solid var(--line-2); border-radius:6px; background:var(--surf-2);
  padding:.85rem .8rem; display:grid; gap:.42rem; aspect-ratio:8.5/11; align-content:start; }
.doc__name{ font-family:var(--font-display); font-weight:700; font-stretch:100%; font-size:12px; }
.doc__role{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--flare); }
.doc__rule{ height:1px; background:var(--line-2); margin:.25rem 0; }
.doc__l{ height:5px; border-radius:2px; background:var(--line-2); transform-origin:0 50%; transform:scaleX(0); }
.doc__l--s{ width:64%; }
.demo--ryw.is-playing .doc__l{ animation:docLine .5s var(--e-expo) both;
  animation-delay:calc(1s + var(--i) * .16s); }
@keyframes docLine{ to{ transform:scaleX(1); } }
.doc__fit{ position:absolute; right:.55rem; bottom:.55rem; font-family:var(--font-mono);
  font-size:8.5px; letter-spacing:.1em; color:var(--mint); border:1px solid rgba(var(--mint-a),.3);
  border-radius:3px; padding:.12rem .35rem; opacity:0; }
.demo--ryw.is-playing .doc__fit{ animation:riseIn .6s var(--e-back) 2.2s both; }
.checks{ display:flex; flex-wrap:wrap; gap:.3rem; }
.check{ font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; color:var(--text-3);
  border:1px solid var(--line); border-radius:3px; padding:.2rem .4rem; }
.demo--ryw.is-playing .check{ animation:checkOn .5s var(--e-back) both; }
@keyframes checkOn{ from{opacity:.3; transform:translateY(6px)}
  to{opacity:1; transform:none; color:var(--mint); border-color:rgba(var(--mint-a),.32)} }
.demo--ryw.is-playing .check:nth-child(1){animation-delay:2.4s}
.demo--ryw.is-playing .check:nth-child(2){animation-delay:2.55s}
.demo--ryw.is-playing .check:nth-child(3){animation-delay:2.7s}

/* ── work / projects ──────────────────────────────────────────────────── */
.proj--hero{ margin-bottom:clamp(3.5rem,8vw,6rem); }
.proj__head{ display:grid; gap:1.2rem 3rem; align-items:end; margin-bottom:1.6rem; }
@media(min-width:960px){ .proj__head{ grid-template-columns:1.1fr 1fr; } }
.proj__no{ display:block; font-family:var(--font-mono); font-size:11px; color:var(--flare);
  letter-spacing:.14em; margin-bottom:.6rem; }
.proj__name{ font-family:var(--font-display); font-weight:700; font-stretch:106%;
  font-size:clamp(1.75rem,4.4vw,3.3rem); line-height:1; letter-spacing:-.03em; margin-bottom:.8rem; }
.proj__name--sm{ font-size:clamp(1.35rem,2.4vw,1.95rem); }
.proj__lede{ font-size:clamp(.98rem,1.15vw,1.1rem); color:var(--text-2); line-height:1.6; }
.proj__lede--sm{ font-size:14.5px; margin:.9rem 0 1.2rem; }
.proj__problem{ padding:1.15rem 1.3rem; background:var(--ink-2); border:1px solid var(--line);
  border-radius:8px; margin-bottom:1.8rem; }
.proj__problem p{ font-size:14px; color:var(--text-2); line-height:1.65; max-width:88ch; }
.proj__problem code{ font-size:12.5px; color:var(--mint); }
.proj__caption{ font-size:13.5px; color:var(--text-3); margin:1rem 0 2rem; max-width:70ch; }
.proj__caption b{ color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }
.proj__foot{ display:grid; gap:1.6rem; margin-top:2rem; }
@media(min-width:900px){ .proj__foot{ grid-template-columns:1fr 1fr; gap:2.5rem; } }
.signals{ display:grid; gap:.7rem; align-content:start; padding-top:1.1rem; border-top:1px solid var(--line); }
.signals__k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-3); }
.signals ul{ display:grid; gap:.45rem; }
.signals li{ position:relative; padding-left:1.1rem; font-size:13.5px; color:var(--text-2); }
.signals li::before{ content:'✦'; position:absolute; left:0; color:var(--mint); font-size:9px; top:.35em; }

/* verdict comparison */
.verdict{ display:grid; gap:1rem; align-items:stretch; margin-bottom:.5rem; }
@media(min-width:820px){ .verdict{ grid-template-columns:1fr auto 1fr; align-items:center; } }
.verdict__side{ padding:1.5rem 1.5rem 1.7rem; border:1px solid var(--line); border-radius:10px;
  background:var(--ink-2); display:grid; gap:.45rem; opacity:0; transform:translateY(24px); }
[data-viz].is-in .verdict__side{ opacity:1; transform:none;
  transition:opacity .8s var(--e-soft), transform .9s var(--e-expo); }
[data-viz].is-in .verdict__side--good{ transition-delay:.16s; }
.verdict__k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-3); }
.verdict__v{ font-family:var(--font-display); font-weight:700; font-stretch:100%;
  font-size:clamp(1.7rem,4vw,2.9rem); line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; }
.verdict__side--bad .verdict__v{ color:var(--flare); }
.verdict__side--good .verdict__v{ color:var(--mint); }
.verdict__d{ font-size:12.5px; color:var(--text-3); }
.verdict__bar{ display:block; height:4px; border-radius:2px; background:var(--line); margin-top:.7rem;
  overflow:hidden; }
.verdict__bar i{ display:block; height:100%; border-radius:2px; width:var(--w);
  transform-origin:0 50%; transform:scaleX(0); }
.verdict__side--bad .verdict__bar i{ background:var(--flare); }
.verdict__side--good .verdict__bar i{ background:var(--mint); }
[data-viz].is-in .verdict__bar i{ animation:barGrow 1.3s var(--e-expo) .35s both; }
@keyframes barGrow{ to{ transform:scaleX(1); } }
.verdict__vs{ font-family:var(--font-mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-3); text-align:center; }

/* metric table */
.mtable{ border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:2rem; }
.mtable__row{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:1rem;
  padding:.95rem 1.2rem; border-bottom:1px solid var(--line); font-size:13.5px;
  opacity:0; transform:translateY(14px); }
.mtable__row:last-child{ border-bottom:0; }
[data-viz].is-in .mtable__row{ opacity:1; transform:none;
  transition:opacity .6s var(--e-soft) calc(var(--i,0)*90ms + .2s),
             transform .7s var(--e-expo) calc(var(--i,0)*90ms + .2s); }
.mtable__row--h{ background:var(--surf-2); font-family:var(--font-mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); }
.mtable__row span:first-child{ color:var(--text-2); }
.mtable__row span:not(:first-child){ font-family:var(--font-mono); font-size:12.5px;
  font-variant-numeric:tabular-nums; }
.mtable .is-bad{ color:var(--flare); }
.mtable .is-good{ color:var(--mint); }
@media(max-width:720px){
  .mtable__row{ grid-template-columns:1fr; gap:.3rem; }
  .mtable__row--h{ display:none; }
  .mtable__row span:not(:first-child)::before{ font-family:var(--font-sans); color:var(--text-3);
    font-size:11px; margin-right:.5em; }
  .mtable__row span:nth-child(2)::before{ content:'naive'; }
  .mtable__row span:nth-child(3)::before{ content:'lakehouse'; }
}

/* medallion pipeline */
.pipe{ display:grid; gap:.8rem; align-items:stretch; margin-bottom:2rem; }
@media(min-width:820px){ .pipe{ grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; } }
.pipe__stage{ position:relative; padding:1.15rem 1.2rem; border:1px solid var(--line);
  border-radius:9px; background:var(--ink-2); display:grid; gap:.3rem;
  opacity:0; transform:translateY(18px); }
[data-viz].is-in .pipe__stage{ opacity:1; transform:none;
  transition:opacity .7s var(--e-soft) calc(var(--i)*.22s), transform .8s var(--e-expo) calc(var(--i)*.22s); }
.pipe__k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; }
.pipe__stage--bronze .pipe__k{ color:var(--bronze); }
.pipe__stage--silver .pipe__k{ color:var(--silver); }
.pipe__stage--gold   .pipe__k{ color:var(--gold); }
.pipe__v{ font-family:var(--font-display); font-weight:700; font-stretch:100%;
  font-size:clamp(1.2rem,2.2vw,1.7rem); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.pipe__d{ font-size:12px; color:var(--text-3); }
.pipe__branch{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em;
  color:var(--flare); margin-top:.3rem; opacity:0; }
[data-viz].is-in .pipe__branch{ animation:riseIn .7s var(--e-expo) 1.1s both; }
.pipe__wire{ display:flex; align-items:center; justify-content:center; gap:6px; min-height:24px; }
.pipe__wire i{ width:5px; height:5px; border-radius:50%; background:var(--line-3); }
[data-viz].is-in .pipe__wire i{ animation:flowDot 1.4s var(--e-soft) infinite; }
[data-viz].is-in .pipe__wire i:nth-child(2){ animation-delay:.18s; }
[data-viz].is-in .pipe__wire i:nth-child(3){ animation-delay:.36s; }

/* optimize cards */
.opt{ display:grid; gap:1rem; }
@media(min-width:820px){ .opt{ grid-template-columns:1fr 1fr; } }
.opt__card{ padding:1.3rem 1.4rem; border:1px solid var(--line); border-radius:10px;
  background:var(--ink-2); display:grid; gap:.7rem; align-content:start;
  opacity:0; transform:translateY(20px); }
[data-viz].is-in .opt__card{ opacity:1; transform:none;
  transition:opacity .8s var(--e-soft) .2s, transform .9s var(--e-expo) .2s; }
[data-viz].is-in .opt__card:last-child{ transition-delay:.34s; }
.opt__k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-3); }
.opt__v{ font-family:var(--font-display); font-weight:700; font-stretch:100%;
  font-size:clamp(1.15rem,2vw,1.6rem); letter-spacing:-.02em; display:flex; align-items:baseline;
  gap:.45rem; flex-wrap:wrap; font-variant-numeric:tabular-nums; }
.opt__v i{ color:var(--text-3); font-size:.8em; }
.opt__v .is-good{ color:var(--mint); }
.opt__d{ font-size:12.5px; color:var(--text-3); }
.opt__note{ margin-top:auto; padding-top:.9rem; border-top:1px solid var(--line);
  font-size:12.5px; line-height:1.55; color:var(--text-3); }
.opt__note code{ font-size:11.5px; color:var(--mint); }
/* 11,160 small files collapsing to a handful */
.opt__files{ display:grid; grid-template-columns:repeat(24,1fr); gap:2px; margin:.2rem 0 .1rem; }
.opt__files i{ aspect-ratio:1; background:var(--surf-5); border-radius:1px; }
[data-viz].is-in .opt__files i{ animation:fileGone .55s var(--e-soft) both; }
@keyframes fileGone{ to{ opacity:.07; transform:scale(.5); } }
[data-viz].is-in .opt__files i.is-keep{ animation:fileKeep .55s var(--e-soft) both; }
@keyframes fileKeep{ to{ opacity:1; background:var(--mint); transform:scale(1.15);
  box-shadow:0 0 8px rgba(var(--mint-a),.5); } }
.lat{ display:grid; gap:.5rem; }
.lat__row{ display:grid; grid-template-columns:52px 1fr auto; gap:.7rem; align-items:center; }
.lat__row em{ font-family:var(--font-mono); font-size:10px; color:var(--text-3); }
.lat__row b{ font-family:var(--font-mono); font-size:11.5px; font-variant-numeric:tabular-nums; }
.lat__row i{ height:6px; border-radius:3px; background:var(--flare); width:var(--w);
  transform-origin:0 50%; transform:scaleX(0); }
.lat__row--good i{ background:var(--mint); }
.lat__row--good b{ color:var(--mint); }
[data-viz].is-in .lat__row i{ animation:barGrow 1.1s var(--e-expo) .4s both; }
[data-viz].is-in .lat__row--good i{ animation-delay:.7s; }

/* two-up projects */
.proj__pair{ display:grid; gap:clamp(2rem,5vw,3.5rem); }
@media(min-width:1000px){ .proj__pair{ grid-template-columns:1fr 1fr; } }
.proj--half{ padding-top:1.6rem; border-top:1px solid var(--line); }

/* star schema */
.star{ margin:1.4rem 0 1.2rem; padding:1.1rem; border:1px solid var(--line); border-radius:10px;
  background:var(--ink-2); }
.star svg{ width:100%; height:auto; }
.star__spokes line{ stroke:var(--line-2); stroke-width:1; stroke-dasharray:130; stroke-dashoffset:130; }
[data-viz].is-in .star__spokes line{ animation:draw .9s var(--e-soft) both; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
[data-viz].is-in .star__spokes line:nth-child(1){animation-delay:.25s}
[data-viz].is-in .star__spokes line:nth-child(2){animation-delay:.35s}
[data-viz].is-in .star__spokes line:nth-child(3){animation-delay:.45s}
[data-viz].is-in .star__spokes line:nth-child(4){animation-delay:.55s}
[data-viz].is-in .star__spokes line:nth-child(5){animation-delay:.65s}
[data-viz].is-in .star__spokes line:nth-child(6){animation-delay:.75s}
.star__dims rect{ fill:var(--surf-2); stroke:var(--line-2); stroke-width:1;
  opacity:0; transform-box:fill-box; transform-origin:50% 50%; transform:scale(.8); }
[data-viz].is-in .star__dims rect{ animation:popIn .6s var(--e-back) both; }
@keyframes popIn{ to{ opacity:1; transform:none; } }
[data-viz].is-in .star__dims rect:nth-child(1){animation-delay:.5s}
[data-viz].is-in .star__dims rect:nth-child(2){animation-delay:.6s}
[data-viz].is-in .star__dims rect:nth-child(3){animation-delay:.7s}
[data-viz].is-in .star__dims rect:nth-child(4){animation-delay:.8s}
[data-viz].is-in .star__dims rect:nth-child(5){animation-delay:.9s}
[data-viz].is-in .star__dims rect:nth-child(6){animation-delay:1s}
.star__fact{ fill:rgba(var(--flare-a),.12); stroke:var(--flare); stroke-width:1;
  opacity:0; transform-box:fill-box; transform-origin:50% 50%; transform:scale(.7); }
[data-viz].is-in .star__fact{ animation:popIn .7s var(--e-back) .1s both; }
.star__labels text{ font-family:'JetBrains Mono',monospace; font-size:7.5px; fill:var(--text-3);
  text-anchor:middle; opacity:0; }
[data-viz].is-in .star__labels text{ animation:fadeIn .6s ease 1.05s both; }
@keyframes fadeIn{ to{ opacity:1; } }
.star__factLabel{ fill:var(--flare) !important; font-size:8.5px !important; }
.star__chips{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:1rem; }
.star__chips span{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.07em;
  color:var(--text-2); border:1px solid var(--line); border-radius:3px; padding:.24rem .45rem;
  opacity:0; transform:translateY(8px); }
[data-viz].is-in .star__chips span{ animation:riseIn .55s var(--e-back) both;
  animation-delay:calc(1.2s + var(--i)*.07s); }

/* yaml spec */
.spec{ margin:1.4rem 0 1.2rem; padding:1.1rem; border:1px solid var(--line); border-radius:10px;
  background:var(--ink-2); display:grid; gap:.9rem; align-items:center; }
@media(min-width:560px){ .spec{ grid-template-columns:1fr auto 1fr; } }
.spec__yaml{ font-size:10.5px; line-height:1.6; color:var(--text-2); overflow-x:auto;
  opacity:0; transform:translateX(-12px); }
[data-viz].is-in .spec__yaml{ opacity:1; transform:none;
  transition:opacity .8s var(--e-soft) .15s, transform .9s var(--e-expo) .15s; }
.spec__yaml span{ color:var(--flare); }
.spec__arrow{ display:grid; place-items:center; }
.spec__arrow i{ display:block; width:34px; height:1px; background:var(--line-2); position:relative; }
.spec__arrow i::after{ content:''; position:absolute; inset:0; background:var(--flare);
  transform-origin:0 50%; }
[data-viz].is-in .spec__arrow i::after{ animation:scrollSweep 2s var(--e-io) .5s infinite; }
@media(max-width:559px){ .spec__arrow i{ width:1px; height:26px; margin:0 auto; } }
.spec__job{ display:grid; gap:.4rem; padding:.8rem .85rem; border:1px solid var(--line);
  border-radius:8px; background:var(--surf-1); }
.spec__jobK{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-3); margin-bottom:.2rem; }
.spec__jobRow{ display:flex; justify-content:space-between; gap:1rem; font-family:var(--font-mono);
  font-size:10.5px; color:var(--text-2); opacity:0; transform:translateY(8px); }
.spec__jobRow b{ color:var(--mint); font-weight:500; }
[data-viz].is-in .spec__jobRow{ animation:riseIn .6s var(--e-expo) both;
  animation-delay:calc(.7s + var(--i)*.22s); }

/* ── capstone ─────────────────────────────────────────────────────────── */
.capstone{ position:relative; }
.capstone::before{ content:''; position:absolute; inset:0 calc(var(--pad) * -1);
  background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  z-index:-1; }
.cap{ display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
@media(min-width:1060px){ .cap{ grid-template-columns:1fr 1.12fr; }
  .cap__demo{ position:sticky; top:calc(var(--nav-h) + 3vh); } }
.cap__badge{ display:inline-block; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--flare);
  border:1px solid rgba(var(--flare-a),.3); border-radius:999px; padding:.3rem .75rem; margin-bottom:1.1rem; }
.cap__name{ font-family:var(--font-display); font-weight:700; font-stretch:108%;
  font-size:clamp(1.9rem,4.6vw,3.4rem); line-height:1; letter-spacing:-.03em; margin-bottom:.9rem; }
.cap__lede{ font-size:clamp(.98rem,1.2vw,1.14rem); color:var(--text-2); line-height:1.62;
  margin:1.1rem 0 .4rem; max-width:52ch; }

/* capstone demo scenes */
.scene--etl{ display:grid; align-content:center; gap:1.4rem; }
.etl{ display:grid; gap:.7rem; }
.etl__row{ display:grid; grid-template-columns:80px 1fr auto; gap:.8rem; align-items:center;
  opacity:0; transform:translateY(10px); }
.demo[data-stage="1"] .etl__row{ animation:riseIn .6s var(--e-expo) both;
  animation-delay:calc(.2s + var(--i)*.2s); }
.etl__row em{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-3); }
.etl__row b{ font-family:var(--font-mono); font-size:11.5px; color:var(--text);
  font-variant-numeric:tabular-nums; }
.etl__row i{ height:5px; border-radius:3px; background:var(--line); position:relative; overflow:hidden; }
.etl__row i::after{ content:''; position:absolute; inset:0; border-radius:3px;
  background:linear-gradient(90deg,var(--sky),rgba(var(--sky-a),.4));
  transform-origin:0 50%; transform:scaleX(0); }
.demo[data-stage="1"] .etl__row i::after{ animation:barGrow 1.1s var(--e-expo) both;
  animation-delay:calc(.4s + var(--i)*.2s); }
.etl__total{ display:flex; align-items:baseline; gap:.7rem; padding-top:1rem;
  border-top:1px solid var(--line); }
.etl__total b{ font-family:var(--font-display); font-weight:700; font-stretch:104%;
  font-size:clamp(1.7rem,3.4vw,2.6rem); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.etl__total em{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-3); }

/* the Postgres data-quality chips now close out the ingest stage */
.pg__dq{ display:flex; flex-wrap:wrap; gap:.35rem; }
.pg__dq span{ font-family:var(--font-mono); font-size:9.5px; color:var(--mint);
  border:1px solid rgba(var(--mint-a),.28); background:rgba(var(--mint-a),.06);
  border-radius:3px; padding:.22rem .45rem; opacity:0; }
.demo[data-stage="1"] .pg__dq span{ animation:riseIn .5s var(--e-back) both;
  animation-delay:calc(1.15s + var(--i)*.12s); }

/* 2 · sentiment mix */
.scene--nlp{ display:grid; align-content:center; gap:1.2rem; }
.senti{ display:grid; gap:.8rem; }
.senti__bar{ display:grid; grid-template-columns:1fr; gap:.35rem; }
.senti__bar em{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--text-2); }
.senti__bar em::after{ content:attr(data-v); }
.senti__bar i{ height:9px; border-radius:5px; background:var(--surf-2); position:relative; overflow:hidden; }
.senti__bar i::after{ content:''; position:absolute; inset:0; width:var(--w); border-radius:5px;
  background:var(--c); transform-origin:0 50%; transform:scaleX(0); }
.demo[data-stage="2"] .senti__bar i::after{ animation:barGrow 1.1s var(--e-expo) both; }
.demo[data-stage="2"] .senti__bar:nth-child(1) i::after{ animation-delay:.2s; }
.demo[data-stage="2"] .senti__bar:nth-child(2) i::after{ animation-delay:.38s; }
.demo[data-stage="2"] .senti__bar:nth-child(3) i::after{ animation-delay:.56s; }
.senti__chips{ display:flex; flex-wrap:wrap; gap:.35rem; }
.senti__chips span{ font-family:var(--font-mono); font-size:9.5px; color:var(--text-2);
  border:1px solid var(--line); border-radius:3px; padding:.22rem .45rem; opacity:0; }
.demo[data-stage="2"] .senti__chips span{ animation:riseIn .5s var(--e-back) both;
  animation-delay:calc(1s + var(--i) * .1s); }

/* 4 · the veteran-facing dashboard */
.scene--board{ display:grid; align-content:stretch; }
.board{ display:grid; grid-template-rows:auto auto 1fr; gap:.75rem;
  border:1px solid var(--line); border-radius:9px; background:var(--surf-1); padding:.85rem .9rem; }
.board__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-bottom:.6rem; border-bottom:1px solid var(--line); }
.board__title{ font-family:var(--font-display); font-weight:700; font-stretch:104%;
  font-size:13.5px; letter-spacing:-.01em; }
.board__filter{ font-family:var(--font-mono); font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-3); }

.board__kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; }
.kpi{ display:grid; gap:.1rem; padding:.5rem .55rem; border:1px solid var(--line);
  border-radius:6px; background:var(--ink-3); opacity:0; transform:translateY(10px); }
.demo[data-stage="4"] .kpi{ animation:riseIn .55s var(--e-back) both;
  animation-delay:calc(.15s + var(--i) * .1s); }
.kpi b{ font-family:var(--font-display); font-weight:700; font-stretch:100%;
  font-size:clamp(.95rem,1.5vw,1.25rem); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.kpi b.is-good{ color:var(--mint); }
.kpi em{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-3); }

.board__grid{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; min-height:0; }
.card{ display:grid; grid-template-rows:auto 1fr; gap:.5rem; padding:.6rem .65rem;
  border:1px solid var(--line); border-radius:6px; background:var(--ink-3);
  opacity:0; transform:translateY(12px); }
.demo[data-stage="4"] .card{ animation:riseIn .6s var(--e-expo) both; animation-delay:.6s; }
.demo[data-stage="4"] .card--themes{ animation-delay:.75s; }
.card__k{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-3); }

.spark{ width:100%; height:100%; min-height:52px; }
.spark__line{ fill:none; stroke:var(--mint); stroke-width:2; stroke-linecap:round;
  stroke-linejoin:round; vector-effect:non-scaling-stroke;
  stroke-dasharray:100; stroke-dashoffset:100; }
.demo[data-stage="4"] .spark__line{ animation:draw 1.4s var(--e-soft) .9s both; }
.spark__area{ fill:rgba(var(--mint-a),.14); opacity:0; }
.demo[data-stage="4"] .spark__area{ animation:fadeIn .8s ease 1.5s both; }

.tbar{ display:grid; gap:.22rem; align-content:start; }
.tbar em{ font-size:10.5px; color:var(--text-2); }
.tbar i{ height:5px; border-radius:3px; background:var(--surf-2); position:relative; overflow:hidden; }
.tbar i::after{ content:''; position:absolute; inset:0; width:var(--w); border-radius:3px;
  background:linear-gradient(90deg,var(--flare),var(--flare-2));
  transform-origin:0 50%; transform:scaleX(0); }
.demo[data-stage="4"] .tbar i::after{ animation:barGrow 1s var(--e-expo) both;
  animation-delay:calc(1s + var(--i) * .12s); }
.card--themes{ grid-template-rows:auto repeat(4,1fr); gap:.35rem; }

.scene--cluster{ display:grid; grid-template-rows:1fr auto; gap:.8rem; }
.scatter{ position:relative; border:1px solid var(--line); border-radius:8px;
  background:var(--surf-1); overflow:hidden; }
.scatter b{ position:absolute; width:5px; height:5px; border-radius:50%; background:var(--text-3);
  left:var(--x0); top:var(--y0); opacity:.5;
  transition:left 1.3s var(--e-expo), top 1.3s var(--e-expo), background .8s, opacity .8s; }
.demo[data-stage="3"] .scatter b{ left:var(--x1); top:var(--y1); background:var(--c); opacity:.95;
  transition-delay:calc(var(--sd) * 4ms); }
.scatter__legend{ display:flex; flex-wrap:wrap; gap:.8rem; }
.scatter__legend span{ display:flex; align-items:center; gap:.35rem; font-family:var(--font-mono);
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }
.scatter__legend span::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--c); }

.scene--rag{ display:grid; align-content:start; gap:.9rem; }
.rag__q{ display:flex; align-items:baseline; gap:.6rem; padding:.7rem .85rem;
  border:1px solid var(--line-2); border-radius:7px; background:var(--surf-2); }
.rag__q em{ font-family:var(--font-mono); color:var(--flare); font-size:12px; }
.rag__q span{ font-size:13px; color:var(--text); }
.rag__q span::after{ content:'▌'; color:var(--flare); animation:caret 1s steps(2) infinite; }
@keyframes caret{ 50%{opacity:0} }
.rag__src{ display:flex; flex-wrap:wrap; gap:.35rem; }
.rag__src span{ font-family:var(--font-mono); font-size:9.5px; color:var(--sky);
  border:1px solid rgba(var(--sky-a),.3); background:rgba(var(--sky-a),.06);
  border-radius:3px; padding:.22rem .45rem; opacity:0; transform:translateY(8px); }
.demo[data-stage="4"] .rag__src span{ animation:riseIn .55s var(--e-back) both;
  animation-delay:calc(1.5s + var(--i)*.16s); }
.rag__a{ font-size:13.5px; color:var(--text-2); line-height:1.62; opacity:0; }
.demo[data-stage="4"] .rag__a{ animation:fadeIn .8s ease 2.1s both; }
.rag__a sup{ color:var(--sky); font-family:var(--font-mono); font-size:9px; padding:0 1px; }

/* ── TCS / ALIP demo ──────────────────────────────────────────────────── */
.scene--batch{ display:grid; align-content:center; gap:1.1rem; }
.lanes{ display:grid; gap:.6rem; }
.lane{ display:grid; grid-template-columns:82px 1fr; gap:.8rem; align-items:center; }
.lane em{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-3); }
.lane i{ height:8px; border-radius:4px; background:var(--surf-2); position:relative; overflow:hidden; }
/* packets streaming down each lane rather than a bar that simply fills */
.lane i b{ position:absolute; inset:0 auto 0 0; width:34%; border-radius:4px;
  background:linear-gradient(90deg, transparent, var(--flare), transparent); }
.demo[data-stage="1"] .lane i b{ animation:laneRun 1.6s linear infinite;
  animation-delay:calc(var(--i) * .22s); }
@keyframes laneRun{ from{ transform:translateX(-120%);} to{ transform:translateX(320%);} }
.batch__total{ display:flex; align-items:baseline; gap:.7rem; padding-top:1rem;
  border-top:1px solid var(--line); }
.batch__total b{ font-family:var(--font-display); font-weight:700; font-stretch:104%;
  font-size:clamp(1.7rem,3.4vw,2.6rem); letter-spacing:-.03em; }
.batch__total em{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-3); }
.batch__meta{ display:flex; flex-wrap:wrap; gap:.35rem; }
.batch__meta span{ font-family:var(--font-mono); font-size:9.5px; color:var(--text-2);
  border:1px solid var(--line); border-radius:3px; padding:.22rem .45rem; opacity:0; }
.demo[data-stage="1"] .batch__meta span{ animation:riseIn .5s var(--e-back) both;
  animation-delay:calc(.7s + var(--i) * .11s); }

.scene--tune{ display:grid; align-content:center; gap:.9rem; }
.tune__k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-3); }
.tune__chips{ display:flex; flex-wrap:wrap; gap:.35rem; }
.tune__chips span{ font-family:var(--font-mono); font-size:9.5px; color:var(--mint);
  border:1px solid rgba(var(--mint-a),.3); background:rgba(var(--mint-a),.07);
  border-radius:3px; padding:.22rem .45rem; opacity:0; }
.demo[data-stage="2"] .tune__chips span{ animation:riseIn .5s var(--e-back) both;
  animation-delay:calc(1.1s + var(--i) * .13s); }
.tune__out{ font-size:13px; color:var(--text-2); }
.tune__out b{ color:var(--mint); font-weight:600; }

.scene--hand{ display:grid; align-content:center; gap:1rem; }
.hand{ position:relative; display:grid; gap:.5rem; padding-left:1.4rem; }
.hand__wire{ position:absolute; left:4px; top:.55rem; bottom:.55rem; width:1px;
  background:var(--line-2); }
.hand__wire b{ position:absolute; inset:0; background:var(--flare); transform-origin:50% 0;
  transform:scaleY(0); }
.demo[data-stage="3"] .hand__wire b{ animation:handDraw 2.2s var(--e-soft) .2s both; }
@keyframes handDraw{ to{ transform:scaleY(1); } }
.hand__step{ position:relative; display:flex; align-items:center; gap:.6rem; font-size:12.5px;
  color:var(--text-2); opacity:0; transform:translateX(-10px); }
.hand__step::before{ content:''; position:absolute; left:-1.4rem; top:50%; margin-top:-3.5px;
  width:7px; height:7px; border-radius:50%; background:var(--ink); border:1px solid var(--flare); }
.demo[data-stage="3"] .hand__step{ animation:handIn .55s var(--e-expo) both;
  animation-delay:calc(.35s + var(--i) * .5s); }
@keyframes handIn{ to{ opacity:1; transform:none; } }
.hand__step i{ font-family:var(--font-mono); font-size:9.5px; color:var(--text-3); }
.hand__badge{ display:inline-block; justify-self:start; font-family:var(--font-mono);
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mint);
  border:1px solid rgba(var(--mint-a),.32); background:rgba(var(--mint-a),.07);
  border-radius:999px; padding:.28rem .6rem; opacity:0; }
.demo[data-stage="3"] .hand__badge{ animation:riseIn .6s var(--e-back) 2.3s both; }

.scene--ctrl{ display:grid; align-content:center; gap:.85rem; }
.ctrl{ display:grid; gap:.4rem; }
.ctrl__row{ display:flex; align-items:center; gap:.6rem; font-size:12.5px; color:var(--text-2);
  padding:.42rem .6rem; border:1px solid var(--line); border-radius:5px; background:var(--surf-1);
  opacity:0; transform:translateY(8px); }
.demo[data-stage="4"] .ctrl__row{ animation:riseIn .5s var(--e-expo) both;
  animation-delay:calc(.2s + var(--i) * .26s); }
.ctrl__row i{ color:var(--mint); font-family:var(--font-mono); font-size:11px; }
.ctrl__row b{ margin-left:auto; font-family:var(--font-mono); font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--mint); }
.ctrl__note{ font-family:var(--font-mono); font-size:10px; letter-spacing:.09em;
  color:var(--text-3); text-transform:uppercase; opacity:0; }
.demo[data-stage="4"] .ctrl__note{ animation:fadeIn .7s ease 1.6s both; }

/* ── experience ───────────────────────────────────────────────────────── */
.exp__top{ display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:start;
  margin-bottom:clamp(2.5rem,5vw,4rem); }
@media(min-width:1060px){
  .exp__top{ grid-template-columns:1fr 1.12fr; }
  .exp__demo{ position:sticky; top:calc(var(--nav-h) + 3vh); }
}
.exp__intro{ margin-bottom:0; }
.exp__co{ font-family:var(--font-display); font-weight:700; font-stretch:106%;
  font-size:clamp(1.6rem,3.6vw,2.6rem); letter-spacing:-.03em; }
.exp__meta{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  color:var(--text-3); margin:.5rem 0 .9rem; }
.exp__promo{ font-size:15px; color:var(--text-2); max-width:60ch; }
.exp__promo b{ color:var(--text); font-weight:600; }

.tl{ position:relative; padding-left:clamp(1.5rem,4vw,3rem); }
.tl__line{ position:absolute; left:0; top:.5rem; bottom:0; width:1px; background:var(--line); }
.tl__line i{ position:absolute; inset:0; background:linear-gradient(180deg,var(--flare),transparent);
  transform-origin:50% 0; transform:scaleY(var(--tp,0)); }
.tl__item{ position:relative; padding-bottom:clamp(2.2rem,5vw,3.5rem); }
.tl__item:last-child{ padding-bottom:0; }
.tl__dot{ position:absolute; left:calc(clamp(1.5rem,4vw,3rem) * -1); top:.55rem;
  width:9px; height:9px; margin-left:-4px; border-radius:50%; background:var(--ink);
  border:1px solid var(--line-3); }
.tl__item.is-in .tl__dot{ background:var(--flare); border-color:var(--flare);
  box-shadow:0 0 0 4px rgba(var(--flare-a),.14); transition:background .5s .2s, border-color .5s .2s, box-shadow .5s .2s; }
.tl__when{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--flare); }
.tl__what{ font-family:var(--font-display); font-weight:600; font-stretch:104%;
  font-size:clamp(1.15rem,2.2vw,1.6rem); letter-spacing:-.02em; margin:.4rem 0 .2rem; }
.tl__role{ font-size:13px; color:var(--text-3); margin-bottom:.9rem; }
.tl__pts{ display:grid; gap:.55rem; max-width:74ch; }
.tl__pts li{ position:relative; padding-left:1.2rem; font-size:14.5px; color:var(--text-2); line-height:1.55; }
.tl__pts li::before{ content:''; position:absolute; left:0; top:.62em; width:6px; height:1px; background:var(--line-3); }
.tl__pts b{ color:var(--text); font-weight:600; }
.tl__metrics{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.4rem; }
.tl__metrics span{ display:grid; gap:.15rem; padding:.8rem 1rem; border:1px solid var(--line);
  border-radius:8px; background:var(--ink-2); font-size:11.5px; color:var(--text-3); }
.tl__metrics b{ font-family:var(--font-display); font-weight:700; font-stretch:100%;
  font-size:clamp(1.05rem,1.9vw,1.4rem); color:var(--text); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }

/* ── TCS / ALIP demo ──────────────────────────────────────────────────── */
.scene--batch{ display:grid; align-content:center; gap:1.3rem; }
.lanes{ display:grid; gap:.7rem; }
.lane{ display:grid; grid-template-columns:88px 1fr; gap:.8rem; align-items:center;
  opacity:0; transform:translateY(10px); }
.demo[data-stage="1"] .lane{ animation:riseIn .55s var(--e-expo) both;
  animation-delay:calc(.15s + var(--i) * .16s); }
.lane em{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-3); }
.lane i{ position:relative; height:8px; border-radius:4px; background:var(--surf-2);
  overflow:hidden; }
/* a packet running the length of the lane, over and over — the nightly cycle */
.lane i b{ position:absolute; top:0; bottom:0; width:26%; border-radius:4px;
  background:linear-gradient(90deg, transparent, var(--flare), transparent); }
.demo[data-stage="1"] .lane i b{ animation:laneRun 1.6s linear infinite;
  animation-delay:calc(var(--i) * .22s); }
@keyframes laneRun{ from{ transform:translateX(-110%); } to{ transform:translateX(430%); } }

.batch__total{ display:flex; align-items:baseline; gap:.8rem; padding-top:1.1rem;
  border-top:1px solid var(--line); }
.batch__total b{ font-family:var(--font-display); font-weight:700; font-stretch:104%;
  font-size:clamp(1.9rem,3.8vw,2.9rem); letter-spacing:-.03em; }
.batch__total em{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-3); }
.batch__meta{ display:flex; flex-wrap:wrap; gap:.35rem; }
.batch__meta span{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em;
  color:var(--text-2); border:1px solid var(--line); border-radius:3px; padding:.22rem .45rem;
  opacity:0; }
.demo[data-stage="1"] .batch__meta span{ animation:riseIn .5s var(--e-back) both;
  animation-delay:calc(.8s + var(--i) * .1s); }

.scene--tune{ display:grid; align-content:center; gap:1.1rem; }
.tune__k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-3); }
.tune__chips{ display:flex; flex-wrap:wrap; gap:.35rem; }
.tune__chips span{ font-family:var(--font-mono); font-size:9.5px; color:var(--text-2);
  border:1px solid var(--line); border-radius:3px; padding:.24rem .5rem; opacity:0; }
.demo[data-stage="2"] .tune__chips span{ animation:riseIn .5s var(--e-back) both;
  animation-delay:calc(1s + var(--i) * .12s); }
.tune__out{ font-size:13.5px; color:var(--text-2); padding-top:.9rem;
  border-top:1px solid var(--line); opacity:0; }
.tune__out b{ color:var(--mint); font-weight:600; }
.demo[data-stage="2"] .tune__out{ animation:fadeIn .7s ease 1.4s both; }

.scene--hand{ display:grid; align-content:center; gap:1.2rem; }
.hand{ position:relative; display:grid; gap:.62rem; padding-left:1.6rem; }
.hand__wire{ position:absolute; left:4px; top:.6rem; bottom:.6rem; width:1px;
  background:var(--line-2); }
.hand__wire b{ position:absolute; inset:0; background:var(--flare); transform-origin:50% 0;
  transform:scaleY(0); }
.demo[data-stage="3"] .hand__wire b{ animation:handWire 2.4s var(--e-soft) .2s both; }
@keyframes handWire{ to{ transform:scaleY(1); } }
.hand__step{ position:relative; display:flex; align-items:baseline; gap:.7rem; font-size:13px;
  color:var(--text-2); opacity:0; transform:translateX(-10px); }
.hand__step::before{ content:''; position:absolute; left:-1.6rem; top:.4em;
  width:9px; height:9px; border-radius:50%; background:var(--ink);
  border:1px solid var(--line-3); }
.demo[data-stage="3"] .hand__step{ animation:handStep .6s var(--e-expo) both;
  animation-delay:calc(.35s + var(--i) * .58s); }
@keyframes handStep{ to{ opacity:1; transform:none; } }
.demo[data-stage="3"] .hand__step::before{ animation:handDot .5s var(--e-back) both;
  animation-delay:calc(.45s + var(--i) * .58s); }
@keyframes handDot{ to{ background:var(--flare); border-color:var(--flare);
  box-shadow:0 0 0 4px rgba(var(--flare-a),.14); } }
.hand__step i{ font-family:var(--font-mono); font-size:9.5px; color:var(--text-3); }
.hand__badge{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
  color:var(--mint); border:1px solid rgba(var(--mint-a),.32); background:rgba(var(--mint-a),.07);
  border-radius:999px; padding:.35rem .75rem; justify-self:start; opacity:0; }
.demo[data-stage="3"] .hand__badge{ animation:riseIn .6s var(--e-back) 2.5s both; }

.scene--ctrl{ display:grid; align-content:center; gap:1rem; }
.ctrl{ display:grid; gap:.4rem; }
.ctrl__row{ display:flex; align-items:center; gap:.7rem; font-size:13px; color:var(--text-2);
  padding:.45rem .7rem; border:1px solid var(--line); border-radius:6px;
  background:var(--surf-1); opacity:0; transform:translateY(8px); }
.demo[data-stage="4"] .ctrl__row{ animation:ctrlIn .55s var(--e-expo) both;
  animation-delay:calc(.15s + var(--i) * .2s); }
@keyframes ctrlIn{ to{ opacity:1; transform:none; border-color:rgba(var(--mint-a),.26); } }
.ctrl__row i{ font-family:var(--font-mono); font-size:12px; color:var(--mint); }
.ctrl__row b{ margin-left:auto; font-family:var(--font-mono); font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--mint); font-weight:500; }
.ctrl__note{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em;
  color:var(--text-3); }

/* ── toolkit ──────────────────────────────────────────────────────────────
   An index, not a wall of cards: pick a category on the left, the panel on the
   right wipes its items in. Replaces v1's eight simultaneous grids.          */
.kit{ display:grid; gap:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
@media(min-width:900px){ .kit{ grid-template-columns:minmax(230px,290px) 1fr; } }

.kit__rail{ position:relative; display:flex; flex-direction:column;
  border-bottom:1px solid var(--line); background:var(--surf-1); }
@media(min-width:900px){ .kit__rail{ border-bottom:0; border-right:1px solid var(--line); } }

.kit__marker{ position:absolute; left:0; top:0; width:2px; background:var(--flare);
  height:var(--mh,0); transform:translateY(var(--my,0));
  transition:transform .5s var(--e-expo), height .5s var(--e-expo); }
.kit__tab{
  position:relative; display:flex; align-items:baseline; gap:.7rem; width:100%;
  padding:.95rem 1.15rem; text-align:left; border-bottom:1px solid var(--line);
  color:var(--text-3); transition:color .35s, background .35s;
}
.kit__tab:last-child{ border-bottom:0; }
.kit__tab i{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; }
.kit__tab span{ font-size:14px; margin-right:auto; }
.kit__tab em{ font-family:var(--font-mono); font-size:10px; opacity:.6; }
.kit__tab:hover{ color:var(--text-2); background:var(--surf-1); }
.kit__tab.is-on{ color:var(--text); background:var(--surf-2); }
.kit__tab.is-on i{ color:var(--flare); }

.kit__stack{ position:relative; padding:clamp(1.3rem,2.6vw,2.1rem); min-height:300px; }
.kit__panel{ height:100%; display:grid; grid-template-rows:auto auto 1fr; gap:1.1rem;
  align-content:start; }
.kit__panel[hidden]{ display:none; }
.kit__head{ display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap;
  padding-bottom:1rem; border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(8px); }
.kit__panel.is-on .kit__head{ animation:riseIn .6s var(--e-soft) forwards; }
.kit__title{ font-family:var(--font-display); font-weight:700; font-stretch:106%;
  font-size:clamp(1.25rem,2.3vw,1.85rem); letter-spacing:-.025em; }
.kit__count{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--flare); margin-left:auto; }
.kit__note{ font-size:13.5px; color:var(--text-3); line-height:1.6; max-width:56ch;
  opacity:0; transform:translateY(8px); }
.kit__panel.is-on .kit__note{ animation:riseIn .6s var(--e-soft) .08s forwards; }

.kit__items{ display:flex; flex-wrap:wrap; gap:.45rem;
  align-items:flex-start; align-content:flex-start; }
.kit__items li{
  font-size:13px; color:var(--text-2); padding:.4rem .8rem; border-radius:5px;
  background:var(--surf-2); border:1px solid transparent;
  opacity:0; clip-path:inset(0 100% 0 0); transform:translateY(6px);
  transition:color .3s, background .3s, border-color .3s;
}
/* the wipe is the new move — items unmask left-to-right instead of fading up */
.kit__panel.is-on .kit__items li{ animation:kitWipe .55s var(--e-expo) forwards;
  animation-delay:calc(.12s + var(--i) * 45ms); }
@keyframes kitWipe{ to{ opacity:1; clip-path:inset(0 0 0 0); transform:none; } }
.kit__items li:hover{ background:var(--surf-3); color:var(--text); border-color:var(--line-2); }

.kit__items--rows{ display:grid; gap:.5rem; }
.kit__items--rows li{ background:none; border:0; border-left:2px solid var(--line-2);
  border-radius:0; padding:.1rem 0 .1rem .9rem; font-size:13.5px; }
.kit__items--rows li:hover{ background:none; border-left-color:var(--flare); color:var(--text); }

/* ── contact ──────────────────────────────────────────────────────────── */
.contact{ position:relative; max-width:none; padding-left:0; padding-right:0; overflow:hidden;
  border-top:1px solid var(--line); }
.contact__media{ position:absolute; inset:0; z-index:0; }
.contact__video{ width:100%; height:100%; object-fit:cover; opacity:.16;
  filter:var(--video-filter); }
.contact__scrim{ position:absolute; inset:0;
  background:radial-gradient(90% 70% at 50% 50%, transparent 20%, rgba(var(--ink-a),.78) 70%, var(--ink) 100%); }
.contact__inner{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto;
  padding:0 var(--pad); }
.sec__idx--c{ display:block; margin-bottom:1.2rem; }
.contact__name{
  font-family:var(--font-display); font-weight:700; line-height:.92;
  font-size:clamp(2rem,7.4vw,7rem); font-stretch:70%; letter-spacing:.14em;
  transition:font-stretch 1.6s var(--e-expo), letter-spacing 1.6s var(--e-expo);
  margin-bottom:1.4rem;
}
.contact.is-in .contact__name{ font-stretch:110%; letter-spacing:-.028em; }
.contact__nameLine{ display:block; white-space:nowrap; }
.contact__nameLine--2{ color:var(--flare); }
.contact.is-in .ch > i{ animation:chRise .95s var(--e-expo) forwards;
  animation-delay:calc(var(--ci,0) * 24ms + var(--cl,0) * 90ms); }
.contact__lede{ font-size:clamp(1rem,1.3vw,1.2rem); color:var(--text-2); max-width:48ch;
  margin-bottom:clamp(2rem,4vw,3rem); }
.contact__rows{ display:grid; border-top:1px solid var(--line); max-width:900px; }
.crow{ display:grid; grid-template-columns:110px 1fr auto; gap:1rem; align-items:center;
  width:100%; text-align:left; padding:1.15rem .4rem; border-bottom:1px solid var(--line);
  position:relative; transition:padding .5s var(--e-expo); }
.crow::before{ content:''; position:absolute; inset:0 -1rem; background:var(--surf-2);
  opacity:0; transition:opacity .4s; border-radius:6px; }
.crow:hover::before{ opacity:1; }
.crow:hover{ padding-left:1.1rem; }
.crow__k{ position:relative; font-family:var(--font-mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-3); }
.crow__v{ position:relative; font-size:clamp(.95rem,1.6vw,1.22rem); color:var(--text); }
.crow__a{ position:relative; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-3); transition:color .35s; }
.crow:hover .crow__a{ color:var(--flare); }
@media(max-width:600px){
  .crow{ grid-template-columns:1fr auto; gap:.3rem 1rem; }
  .crow__k{ grid-column:1/-1; }
}

/* ── footer + toast ───────────────────────────────────────────────────── */
.foot{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem;
  padding:1.6rem var(--pad); border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-3); }
.foot__m{ margin-right:auto; }
.foot__replay,.foot__top{ transition:color .3s; }
.foot__replay:hover,.foot__top:hover{ color:var(--flare); }

.toast{ position:fixed; left:50%; bottom:2.2rem; transform:translate(-50%,calc(100% + 3rem));
  z-index:940; padding:.65rem 1.1rem; border-radius:999px; background:var(--text); color:var(--ink);
  font-size:13px; font-weight:500; opacity:0; pointer-events:none;
  transition:transform .6s var(--e-expo), opacity .3s; }
.toast.is-on{ transform:translate(-50%,0); opacity:1; }

/* ── responsive tightening ────────────────────────────────────────────── */
@media(max-width:1059px){
  .demo__body{ height:clamp(320px,58vw,400px); }
}
@media(max-width:760px){
  /* not enough height on a phone to overlay copy and stage — stack them instead,
     reserving the stage's height as hero padding so nothing lands on the artwork */
  :root{ --stage-w:94vw; --stage-b:1.25rem; }
  .hero{ min-height:auto; padding-bottom:calc(var(--stage-h) + 1.6rem); }
  .hero__stage, .hero__edge{ right:50%; transform:translateX(50%); }
  body[data-boot="1"] .hero__stage{ transform:translateX(50%) scale(.965); }
  body[data-boot="2"] .hero__stage{ transform:translateX(50%) scale(1); }
  body[data-boot="1"] .hero__edge{ transform:translateX(50%) scale(.965); }
  .hero__foot{ margin-top:2.2rem; }
  .hero__foot::before{ display:none; }
  .boot__slit{ width:min(52vw,240px); }
  .boot__tag--r{ display:none; }
  .boot__rotator{ font-size:clamp(1.2rem,7vw,2rem); }
}

@media(max-width:680px){
  /* stack the mock page above the narration instead of dropping it */
  .scene--capture,
  .scene--replay{ grid-template-columns:1fr; grid-template-rows:auto 1fr; gap:.8rem; }
  .page__row{ display:none; }
  .scene--trust{ grid-template-columns:1fr; gap:1rem; justify-items:center; }
  .ryw{ grid-template-columns:1fr 1fr; }
  .ryw__col--mcp{ display:none; }
  .demo__body{ height:390px; }
  .hero__stats span:nth-child(3){ display:none; }
  .rail{ gap:.9rem; }
  .rail__step{ font-size:9px; letter-spacing:.1em; }
}

/* ── reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .grain{ display:none; }
  .cursor{ display:none; }
  [data-r]{ opacity:1; transform:none; }
  .demo{ opacity:1; transform:none; }
  .hero__name,.contact__name{ font-stretch:105%; letter-spacing:-.02em; }
  .hero__role{ opacity:1; letter-spacing:.34em; }
  .ch > i,.ln > i{ transform:none; opacity:1; }
}