/* self-hosted logo font — never depend on a 3rd-party CDN for the brand mark */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/space-grotesk-600.woff2) format('woff2')}
:root{
  --lime:#C6F24E;
  --ink:#07070A;
  --paper:#F4F3EE;
  --muted:#8f8f86;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.06);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-2:cubic-bezier(.16,1,.3,1);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'General Sans',system-ui,sans-serif;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--lime);color:var(--ink)}

/* ---- film grain + global ambient ----------------------------------------- */
/* atmosphere: a moody edge vignette behind the content (darkens the frame,
   never the text — sits under the sections, shows through the dark gaps) */
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(125% 118% at 50% 30%,transparent 54%,rgba(0,0,0,.34) 78%,rgba(0,0,0,.6) 100%)}
/* (.grain film-grain/static overlay removed — read as a glitch effect) */

/* ---- cursor spotlight ---------------------------------------------------- */
.spot{position:fixed;width:640px;height:640px;border-radius:50%;left:0;top:0;z-index:1;pointer-events:none;
  transform:translate3d(-50%,-50%,0);
  background:radial-gradient(circle,rgba(198,242,78,.07) 0%,rgba(198,242,78,.03) 24%,rgba(198,242,78,.012) 46%,transparent 68%);
  transition:opacity .5s var(--ease);will-change:transform}
@media (hover:none){.spot{display:none}}

/* ---- aurora: drifting ambient blooms (prestige atmospheric depth) --------
   A plain fixed div (same proven-safe pattern as .grain/.vignette) — NOT a
   body pseudo-element, which on a body-scroll-container page can jam iOS
   scrolling. pointer-events:none, so it never intercepts touch/scroll. */
/* layered depth base — the no-JS / behind-canvas fallback (dark, volumetric) */
.bg-base{position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(70% 50% at 50% 112%, rgba(40,52,70,.14), transparent 60%),
  radial-gradient(135% 100% at 50% -8%, #0c0d12 0%, #08080c 48%, #050507 100%)}
/* ISOFORGE — a live topographic contour survey painted into one fixed canvas
   (marching-squares isolines of a domain-warped field; ridge rises under the cursor).
   Transparent, pointer-events:none, sits above .bg-base; .bg-base is the no-JS look. */
#iso{position:fixed;inset:0;z-index:0;pointer-events:none;display:block;width:100%;height:100%;opacity:0;transition:opacity 1s var(--ease)}
#iso.on{opacity:1}
@media(prefers-reduced-motion:reduce){#iso{transition:none}}

/* ---- shell --------------------------------------------------------------- */
.wrap{position:relative;z-index:2}
.container{max-width:1240px;margin:0 auto;padding:0 40px}

/* ---- nav ----------------------------------------------------------------- */
.nav{position:fixed;top:13px;left:50%;transform:translateX(-50%);z-index:1600;
  width:min(1140px,calc(100% - 36px));
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 9px 9px 18px;border-radius:14px;
  background:linear-gradient(180deg,rgba(26,28,34,.72),rgba(13,14,19,.55));
  backdrop-filter:blur(20px) saturate(175%);-webkit-backdrop-filter:blur(20px) saturate(175%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 50px -22px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 34px -12px rgba(198,242,78,.07);
  transition:transform .5s var(--ease),opacity .5s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.nav:hover{border-color:color-mix(in srgb,var(--lime) 20%,rgba(255,255,255,.12));
  box-shadow:0 18px 50px -22px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 40px -12px rgba(198,242,78,.11)}
.nav.hidden{transform:translateX(-50%) translateY(-130%)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.brand{display:inline-flex;align-items:baseline;font-size:22px;letter-spacing:0;color:var(--paper)}
.brand-mark{width:27px;height:27px;border-radius:9px;background:var(--lime);color:var(--ink);
  display:grid;place-items:center;font-family:'Clash Display';font-weight:700;font-size:15px;
  box-shadow:0 0 22px -2px rgba(198,242,78,.55)}
.nav-links{display:flex;gap:3px;align-items:center}
.nav-links a{font-size:12px;color:var(--muted);font-weight:500;padding:9px 14px;border-radius:10px;transition:color .3s var(--ease),background .3s var(--ease)}
.nav-links a:hover{color:var(--paper);background:rgba(255,255,255,.06)}
.nav-cta{font-size:12px;font-weight:600;color:var(--ink) !important;background:var(--lime);margin-left:5px;
  padding:10px 18px !important;border-radius:13px !important;box-shadow:0 0 0 0 rgba(198,242,78,.4);transition:transform .3s var(--ease),box-shadow .4s var(--ease)}
.nav-cta:hover{background:var(--lime) !important;transform:translateY(-1px);box-shadow:0 12px 28px -10px rgba(198,242,78,.7)}
@media(max-width:860px){.nav-links a:not(.nav-cta){display:none}}
.nav-burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.04);position:relative;cursor:pointer;flex:none}
.nav-burger span{position:absolute;left:11px;right:11px;height:1.6px;background:var(--paper);border-radius:2px;transition:transform .35s var(--ease)}
.nav-burger span:nth-child(1){top:16px}.nav-burger span:nth-child(2){bottom:16px}
.nav-burger.open span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-burger.open span:nth-child(2){transform:translateY(-5px) rotate(-45deg)}
@media(max-width:860px){.nav-burger{display:block}}
/* ===== mobile menu — circular clip-path reveal from the burger ===== */
.mobile-menu{position:fixed;inset:0;z-index:1400;overflow:hidden;
  background:
    radial-gradient(76% 46% at 88% 6%, rgba(198,242,78,.16), transparent 58%),
    linear-gradient(rgba(244,243,238,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,243,238,.04) 1px,transparent 1px),
    #09090c;
  background-size:100% 100%,64px 64px,64px 64px,100% 100%;
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:max(104px,18vw) clamp(28px,8vw,52px) clamp(30px,9vw,54px);
  /* GPU-cheap fade+scale (opacity/transform only) — the links carry the motion */
  opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.03);
  transition:opacity .34s ease,transform .5s cubic-bezier(.16,1,.3,1),visibility 0s linear .4s}
.mobile-menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1);
  transition:opacity .28s ease,transform .55s cubic-bezier(.16,1,.3,1)}

/* editorial link list: index · mask-reveal label · arrow, on hairline rows */
.mm-links{display:flex;flex-direction:column;border-top:1px solid rgba(244,243,238,.10)}
.mm-links a{--d:0s;position:relative;display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:14px;
  padding:clamp(14px,4.3vw,20px) 8px clamp(14px,4.3vw,20px) 4px;
  border-bottom:1px solid rgba(244,243,238,.10);text-decoration:none;color:var(--paper);
  transition:padding-left .45s var(--hx-spring),background .35s var(--ease)}
.mm-links a:nth-child(1){--d:.15s}
.mm-links a:nth-child(2){--d:.22s}
.mm-links a:nth-child(3){--d:.29s}
.mm-links a:nth-child(4){--d:.36s}
.mm-i{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--lime);
  align-self:start;margin-top:.55em;opacity:0;transition:opacity .55s var(--hx-ease) var(--d)}
.mm-t{display:block;overflow:hidden;padding-bottom:.12em;
  font-family:'Clash Display';font-weight:600;font-size:clamp(30px,8.8vw,44px);letter-spacing:-.02em;line-height:1.1}
.mm-t>span{display:block;transform:translateY(118%);transition:transform .65s cubic-bezier(.16,1,.3,1) var(--d)}
.mm-ar{justify-self:end;color:var(--lime);font-size:21px;line-height:1;opacity:0;transform:translateX(-6px);
  transition:opacity .42s var(--hx-ease) var(--d),transform .42s var(--hx-ease) var(--d)}
.mobile-menu.open .mm-t>span{transform:translateY(0)}
.mobile-menu.open .mm-i{opacity:.85}
.mobile-menu.open .mm-ar{opacity:.34;transform:translateX(0)}
/* press/hover: lime wash, row nudges in, arrow + index brighten */
.mobile-menu .mm-links a:hover,.mobile-menu .mm-links a:active{
  background:linear-gradient(90deg,rgba(198,242,78,.10),transparent 74%);padding-left:14px}
.mobile-menu .mm-links a:hover .mm-ar,.mobile-menu .mm-links a:active .mm-ar{opacity:1}
.mobile-menu .mm-links a:hover .mm-i,.mobile-menu .mm-links a:active .mm-i{opacity:1}

.mobile-menu .mm-cta{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;margin-top:30px;
  font-family:'General Sans';font-weight:600;font-size:15px;letter-spacing:0;line-height:1;border:none;
  color:var(--ink);background:var(--lime);padding:14px 24px;border-radius:13px;
  box-shadow:0 0 38px -10px rgba(198,242,78,.5);
  opacity:0;transform:translateY(16px);transition:opacity .5s var(--hx-ease) .44s,transform .5s var(--hx-ease) .44s,filter .25s}
.mobile-menu.open .mm-cta{opacity:1;transform:none}
.mobile-menu .mm-cta:active{filter:brightness(.95)}
.mobile-menu .mm-cta span{font-size:1.05em}
.mm-foot{position:absolute;left:clamp(28px,8vw,52px);right:clamp(20px,8vw,52px);bottom:clamp(26px,8vw,42px);
  font-family:var(--mono);font-size:clamp(8.5px,2.7vw,10.5px);letter-spacing:.1em;white-space:nowrap;
  text-transform:uppercase;color:rgba(244,243,238,.42);
  opacity:0;transition:opacity .5s var(--ease) .48s}
.mobile-menu.open .mm-foot{opacity:1}

/* nav lifts above the overlay (so the X is always tappable) and dissolves into it */
.nav.menu-open{background:transparent;border-color:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none}
.nav.menu-open .nav-cta{opacity:0;visibility:hidden}
.nav.menu-open .nav-burger{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
/* mobile nav: the floating pill is glassy (.6 alpha) on desktop, which lets the
   bright lime hero CTA bleed through as you scroll. On phones/tablets the bar
   goes near-solid so scrolling content can't show through, the controls slim
   down, and the burger becomes a circle so its roundness matches the pill CTA.
   The CTA label shortens so it never wraps on narrow screens. Desktop untouched. */
.nc-sm{display:none}
@media(max-width:860px){
  /* rounded-RECTANGLE bar matching the hero buttons (13px), not a pill. The
     oversized Free-audit pill is dropped on mobile (it lives in the hero and in
     the menu), leaving a clean brand + burger bar. */
  .nav{background:rgba(12,12,16,.96);backdrop-filter:none;-webkit-backdrop-filter:none;
    border-radius:14px;padding:7px 8px 7px 15px;
    transition:transform .5s var(--ease),opacity .5s var(--ease),background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
  .brand{font-size:18px}
  .brand-mark{width:25px;height:25px;border-radius:8px}
  .nav-cta{display:none}
  /* burger: rounded square (same roundness family as the hero buttons) */
  .nav-burger{width:36px;height:36px;border-radius:11px}
  .nav-burger span{left:10px;right:10px;height:2px;transition:transform .38s var(--hx-ease2)}
  .nav-burger span:nth-child(1){top:14px}    /* centre 15px */
  .nav-burger span:nth-child(2){bottom:14px} /* centre 21px */
  /* both lines converge EXACTLY to the box centre (y=18) so the X is true */
  .nav-burger.open span:nth-child(1){transform:translateY(3px) rotate(45deg)}
  .nav-burger.open span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
}
@media(max-width:480px){
  .nc-lg{display:none}
  .nc-sm{display:inline}
}

/* ---- hero (INTEGRATED approved hero — namespaced .hx-*) ------------------- */
/* hero-local design tokens (kept local so they cannot leak into the site) */
.hx-stage{--hx-ease:cubic-bezier(.16,1,.3,1);--hx-ease2:cubic-bezier(.19,.9,.32,1);--hx-spring:cubic-bezier(.34,1.32,.5,1);
  --hx-muted:rgba(244,243,238,.50);--hx-faint:rgba(244,243,238,.30);--hx-line:rgba(244,243,238,.10)}
.hero{position:relative;min-height:100vh;width:100%;overflow:hidden;isolation:isolate;
  display:flex;align-items:center}

/* ambient field */
.hx-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 95% at 70% 30%, transparent 30%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.82) 100%)}
/* (.hx-grid-lines removed — replaced by the global sonar-arc background) */
.hx-glow{position:absolute;z-index:0;pointer-events:none;border-radius:50%;filter:blur(100px);will-change:transform}
.hx-glow-lime{width:880px;height:880px;right:-180px;top:-240px;
  background:radial-gradient(circle, rgba(198,242,78,.38), rgba(198,242,78,.10) 38%, transparent 62%);
  animation:hxBreathe 10s var(--hx-ease) infinite alternate}
.hx-glow-deep{width:640px;height:640px;left:-260px;bottom:-300px;
  background:radial-gradient(circle, rgba(198,242,78,.09), transparent 64%)}
@keyframes hxBreathe{from{transform:translate3d(0,0,0) scale(1);opacity:.85}to{transform:translate3d(-34px,32px,0) scale(1.09);opacity:1}}

/* oversized off-grid ghost wordmark behind copy */
.hx-ghost{position:absolute;z-index:1;left:-3vw;top:50%;transform:translateY(-50%);
  font-family:'Clash Display';font-weight:700;font-size:30vw;line-height:.7;
  color:transparent;-webkit-text-stroke:1px rgba(244,243,238,.035);
  letter-spacing:-.06em;user-select:none;pointer-events:none;white-space:nowrap;
  opacity:0;animation:hxGhostin 2s var(--hx-ease) .6s forwards}
@keyframes hxGhostin{to{opacity:1}}

/* hero grid (was the colliding .wrap in the standalone) */
.hx-wrap{position:relative;z-index:10;max-width:1400px;margin:0 auto;padding:0 36px;
  width:100%;display:grid;grid-template-columns:minmax(460px,1.02fr) 1.05fr;align-items:center;gap:0;padding-top:16px}

/* copy column */
.hx-copy{position:relative;z-index:20}
.hx-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);margin-bottom:30px;
  opacity:0;animation:hxRise 1s var(--hx-ease) .4s forwards}
.hx-eyebrow .hx-bar2{width:34px;height:1px;background:var(--lime);opacity:.75}

.hx-h1{font-family:'Clash Display';font-weight:600;line-height:.92;letter-spacing:-.03em;
  font-size:clamp(48px,5.4vw,86px);margin-bottom:30px}
.hx-h1 .hx-line{display:block;overflow:hidden;padding-bottom:.04em}
.hx-h1 .hx-line span{display:block;transform:translateY(112%);animation:hxSlideUp 1.15s var(--hx-ease) forwards}
.hx-h1 .hx-l1 span{animation-delay:.5s}
.hx-h1 .hx-l2 span{animation-delay:.6s}
.hx-h1 .hx-l3 span{animation-delay:.7s}
.hx-h1 .hx-l4 span{animation-delay:.8s}
/* OUTLINE word */
.hx-h1 .hx-out{color:transparent;-webkit-text-stroke:1.3px var(--lime);font-weight:600;text-shadow:0 0 18px rgba(198,242,78,.1)}
/* solid lime word */
.hx-h1 .hx-hl{color:var(--lime);font-weight:600;text-shadow:0 0 16px rgba(198,242,78,.35)}
/* hero copy-side atmosphere: a soft light shaft + a reactive key light (driven in hxLoop) */
.hx-shaft{position:absolute;z-index:1;left:-8%;top:-30%;width:46%;height:170%;pointer-events:none;
  background:linear-gradient(108deg, transparent 40%, rgba(198,242,78,.06) 50%, transparent 60%);filter:blur(12px);transform:rotate(7deg)}
.hx-key{position:absolute;z-index:2;left:0;top:0;width:720px;height:720px;max-width:92vw;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  transform:translate3d(6%,-12%,0);will-change:transform;
  background:radial-gradient(circle, rgba(198,242,78,.17), rgba(198,242,78,.05) 40%, transparent 66%);
  animation:hxKeyPulse 7s var(--hx-ease) infinite alternate}
@keyframes hxKeyPulse{from{opacity:.78}to{opacity:1}}
/* token telemetry: the dots pulse in sequence */
.hx-tok .hx-dot{animation:hxDot 2.6s ease-in-out infinite}
.hx-tokens .hx-tok:nth-child(2) .hx-dot{animation-delay:.4s}
.hx-tokens .hx-tok:nth-child(3) .hx-dot{animation-delay:.8s}
.hx-tokens .hx-tok:nth-child(4) .hx-dot{animation-delay:1.2s}
@keyframes hxDot{0%,100%{box-shadow:0 0 5px rgba(198,242,78,.45);opacity:.55}50%{box-shadow:0 0 11px rgba(198,242,78,.95);opacity:1}}

.hx-lede{max-width:440px;font-size:17px;line-height:1.58;color:var(--hx-muted);margin-bottom:38px;
  opacity:0;animation:hxRise 1s var(--hx-ease) .95s forwards}
.hx-lede b{color:var(--paper);font-weight:500}

.hx-ctas{display:flex;align-items:center;gap:20px;opacity:0;animation:hxRise 1s var(--hx-ease) 1.1s forwards}

/* credibility stat strip */
.hx-tokens{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin-top:30px;
  border-top:1px solid var(--hx-line);padding-top:26px;
  opacity:0;animation:hxRise 1s var(--hx-ease) 1.25s forwards}
.hx-tok{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--paper);
  display:flex;align-items:center;gap:9px;padding-right:22px;margin-right:22px;position:relative}
.hx-tok:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:13px;background:var(--hx-line)}
.hx-tok .hx-dot{width:5px;height:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px rgba(198,242,78,.7);flex:none}

@keyframes hxSlideUp{to{transform:translateY(0)}}
@keyframes hxRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

/* ---------- montage ---------- */
.hx-montage{position:relative;height:660px;perspective:2000px;transform-style:preserve-3d;margin-left:24px;margin-right:18px}
.hx-scene{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .2s linear;will-change:transform}
/* cinematic halo behind front screen */
.hx-montage::before{content:"";position:absolute;left:120px;top:120px;width:560px;height:440px;z-index:0;
  background:radial-gradient(ellipse at center, rgba(198,242,78,.26), transparent 66%);filter:blur(70px);
  opacity:0;animation:hxRise 1.6s var(--hx-ease) 1s forwards}

.hx-screen{position:absolute;border-radius:14px;overflow:hidden;pointer-events:auto;
  background:#0d0d12;border:1px solid rgba(244,243,238,.10);
  box-shadow:0 50px 110px -34px rgba(0,0,0,.9), 0 12px 40px -8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  will-change:transform;opacity:0;backface-visibility:hidden}
.hx-screen .hx-screenbar{height:30px;background:linear-gradient(180deg,#15151b,#0f0f14);display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.05)}
.hx-screen .hx-screenbar i{width:8px;height:8px;border-radius:50%;background:rgba(244,243,238,.18)}
.hx-screen .hx-screenbar i:first-child{background:rgba(198,242,78,.6)}
.hx-screen .hx-screenbar .hx-url{margin-left:12px;font-family:var(--mono);font-size:9.5px;color:rgba(244,243,238,.42);letter-spacing:.03em;white-space:nowrap;overflow:hidden}
.hx-screen img{display:block;width:100%;height:auto}
.hx-screen .hx-glint{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 38%,rgba(255,255,255,.06) 50%,transparent 62%)}
/* crop tall shots so we show the rich top, not empty space */
.hx-crop{overflow:hidden;position:relative}
.hx-crop img{position:absolute;top:0;left:0;width:100%}
.hx-crop::after{content:"";position:absolute;left:0;right:0;bottom:0;height:54px;
  background:linear-gradient(transparent,#0d0d12)}

/* register animatable props for smooth parallax via vars */
@property --hx-px{syntax:'<length>';inherits:false;initial-value:0px}
@property --hx-py{syntax:'<length>';inherits:false;initial-value:0px}
@property --hx-sc{syntax:'<number>';inherits:false;initial-value:1}
@property --hx-hz{syntax:'<length>';inherits:false;initial-value:0px}
@property --hx-hsc{syntax:'<number>';inherits:false;initial-value:1}
@property --hx-hlift{syntax:'<length>';inherits:false;initial-value:0px}
@property --hx-flat{syntax:'<number>';inherits:false;initial-value:1}
@property --hx-front{syntax:'<number>';inherits:false;initial-value:0}

.hx-screen{
  --hx-px:0px;--hx-py:0px;--hx-mx:0px;--hx-my:0px;
  /* hover-focus deltas (defaults = no-op) */
  --hx-hz:0px;        /* absolute front depth applied on hover (NOT added to base --hx-tz) */
  --hx-front:0;       /* 0 = use base --hx-tz, 1 = jump to absolute front plane --hx-hz */
  --hx-hsc:1;         /* extra scale on hover */
  --hx-hlift:0px;     /* extra lift (translateY) on hover */
  --hx-flat:1;        /* 1 = full tilt, 0 = flattened toward camera on hover */
  /* FIX (a): translateZ resolves to EITHER the base depth OR the absolute front
     plane (--hx-hz), chosen by --hx-front (0/1) — it is NOT base + delta, so every
     hovered screen lands on the identical front plane regardless of its base depth. */
  transform:translate3d(calc(var(--hx-px) + var(--hx-mx)),calc(var(--hx-py) + var(--hx-my) + var(--hx-hlift)),
              calc(var(--hx-tz,0px) * (1 - var(--hx-front)) + var(--hx-hz) * var(--hx-front)))
            rotateY(calc(var(--hx-ry,0deg) * var(--hx-flat))) rotateX(calc(var(--hx-rx,0deg) * var(--hx-flat))) rotateZ(calc(var(--hx-rz,0deg) * var(--hx-flat)))
            scale(calc(var(--hx-sc,1) * var(--hx-hsc)));
  animation-name:var(--hx-anim);animation-duration:.95s;animation-timing-function:var(--hx-ease2);animation-fill-mode:forwards;
  /* FIX (b): smoothness — tween ONLY the transform-driving vars + opacity with one
     smooth spring/ease; we deliberately do NOT transition filter or box-shadow. */
  transition:--hx-hz .5s var(--hx-spring),--hx-front .5s var(--hx-spring),--hx-hsc .5s var(--hx-spring),
             --hx-hlift .5s var(--hx-spring),--hx-flat .5s var(--hx-ease),opacity .4s var(--hx-ease);
}

/* ---------- HOVER-TO-FOCUS ----------
   JS keeps writing --hx-mx/--hx-my parallax; hover only flips these extra vars +
   z-index, so the two systems compose instead of fighting. */
.hx-scene.has-focus .hx-screen{opacity:.6}
.hx-scene.has-focus .hx-screen.is-hovered{
  --hx-hz:520px;       /* ABSOLUTE front plane — same for every screen, beats every base --hx-tz (max +150) */
  --hx-front:1;        /* switch translateZ from base depth to the absolute front plane */
  --hx-hsc:1.08;       /* pop up in size */
  --hx-hlift:-16px;    /* lift slightly */
  --hx-flat:.18;       /* straighten toward flat */
  opacity:1;
}

/* === SCREEN PLACEMENT (z-order: deepest -> front) === */
/* --- BACK BAND (top) --- */
.hx-s-keyzee{width:286px;left:-104px;top:-62px;z-index:6;--hx-tz:-200px;--hx-ry:-19deg;--hx-rx:6.5deg;--hx-rz:-3.5deg;
  --hx-anim:hxKIn;animation-delay:.38s;
  box-shadow:0 50px 110px -34px rgba(0,0,0,.9),0 0 0 1px rgba(198,242,78,.08)}
@keyframes hxKIn{from{opacity:0;--hx-px:-60px;--hx-py:-34px;--hx-sc:.92}to{opacity:1;--hx-px:0;--hx-py:0;--hx-sc:1}}

.hx-s-admin{width:280px;left:106px;top:-58px;z-index:15;--hx-tz:-185px;--hx-ry:-8deg;--hx-rx:3deg;--hx-rz:2.5deg;
  --hx-anim:hxAIn;animation-delay:.45s}
@keyframes hxAIn{from{opacity:0;--hx-px:60px;--hx-py:-44px}to{opacity:1;--hx-px:0;--hx-py:0}}

/* --- MID BAND --- */
.hx-s-coat{width:262px;left:-66px;top:300px;z-index:9;--hx-tz:-110px;--hx-ry:-16deg;--hx-rx:5deg;--hx-rz:-2deg;
  --hx-anim:hxCoIn;animation-delay:.52s}
@keyframes hxCoIn{from{opacity:0;--hx-px:-46px;--hx-py:30px;--hx-sc:.93}to{opacity:1;--hx-px:0;--hx-py:0;--hx-sc:1}}

.hx-s-price{width:272px;right:-92px;top:206px;z-index:10;--hx-tz:-50px;--hx-ry:-9deg;--hx-rx:3.5deg;--hx-rz:3deg;
  --hx-anim:hxPrIn;animation-delay:.59s}
.hx-s-price .hx-crop{height:168px}
.hx-s-price .hx-crop img{top:-58px} /* skip the page header — it duplicated the admin card's */
@keyframes hxPrIn{from{opacity:0;--hx-px:52px;--hx-py:30px;--hx-sc:.94}to{opacity:1;--hx-px:0;--hx-py:0;--hx-sc:1}}

.hx-s-inv{width:262px;left:-72px;bottom:-66px;z-index:11;--hx-tz:-30px;--hx-ry:-15.5deg;--hx-rx:4deg;--hx-rz:-2.5deg;
  --hx-anim:hxIIn;animation-delay:.66s}
.hx-s-inv .hx-crop{height:222px}
@keyframes hxIIn{from{opacity:0;--hx-px:-36px;--hx-py:54px;--hx-sc:.93}to{opacity:1;--hx-px:0;--hx-py:0;--hx-sc:1}}

.hx-s-class{width:252px;left:254px;top:446px;z-index:12;--hx-tz:10px;--hx-ry:-11deg;--hx-rx:5.5deg;--hx-rz:-1.5deg;
  --hx-anim:hxCIn;animation-delay:.73s;
  border-color:rgba(198,242,78,.20);
  box-shadow:0 50px 110px -34px rgba(0,0,0,.9),0 0 0 1px rgba(198,242,78,.10),inset 0 0 60px rgba(198,242,78,.05)}
.hx-s-class .hx-crop{height:172px}
@keyframes hxCIn{from{opacity:0;--hx-px:-22px;--hx-py:50px}to{opacity:1;--hx-px:0;--hx-py:0}}

.hx-s-cal{width:280px;right:-96px;bottom:-52px;z-index:13;--hx-tz:40px;--hx-ry:-10deg;--hx-rx:5deg;--hx-rz:2deg;
  --hx-anim:hxCalIn;animation-delay:.80s}
.hx-s-cal .hx-crop{height:206px}
@keyframes hxCalIn{from{opacity:0;--hx-px:48px;--hx-py:50px;--hx-sc:.93}to{opacity:1;--hx-px:0;--hx-py:0;--hx-sc:1}}

.hx-s-dse{width:286px;right:-2px;top:18px;z-index:14;--hx-tz:70px;--hx-ry:-9.5deg;--hx-rx:6deg;--hx-rz:3deg;
  --hx-anim:hxDIn;animation-delay:.87s;
  box-shadow:0 50px 110px -34px rgba(0,0,0,.9),0 0 0 1px rgba(198,242,78,.06)}
@keyframes hxDIn{from{opacity:0;--hx-px:42px;--hx-py:-30px;--hx-sc:.94}to{opacity:1;--hx-px:0;--hx-py:0;--hx-sc:1}}

/* --- FRONT --- */
.hx-s-dash{width:430px;left:46px;top:150px;z-index:16;--hx-tz:150px;--hx-ry:-12.5deg;--hx-rx:3.5deg;--hx-rz:-0.5deg;
  --hx-anim:hxDashIn;animation-delay:.94s;
  box-shadow:0 70px 130px -36px rgba(0,0,0,.92),0 20px 50px -10px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}
@keyframes hxDashIn{from{opacity:0;--hx-px:60px;--hx-py:42px;--hx-sc:.93}to{opacity:1;--hx-px:0;--hx-py:0;--hx-sc:1}}

@media(max-width:1080px){
  .hx-wrap{grid-template-columns:1fr;padding-top:120px;gap:0;align-content:start}
  .hx-montage{height:440px;margin:34px 0 0;transform:scale(.82);transform-origin:top left;width:118%}
  .hx-h1{font-size:clamp(42px,11vw,62px)}
  .hx-tokens{margin-top:36px;gap:10px 0}
  .hx-ghost{font-size:48vw;top:34%}
  .hx-s-dash{width:420px;left:6px;top:90px}
  .hx-s-keyzee{width:236px;left:-44px;top:-10px}
  .hx-s-admin{width:226px;right:-40px;top:-20px}
  .hx-s-coat{width:222px;left:-48px;top:200px}
  .hx-s-price{width:228px;right:-44px;top:170px}
  .hx-s-inv{width:210px;left:-30px;bottom:-10px}
  .hx-s-dse{width:244px;right:0;top:30px}
  .hx-s-class{width:208px;left:110px;top:240px}
  .hx-s-cal{width:228px;right:-40px;bottom:0}}
@media(max-width:560px){
  .hx-tok{font-size:11px;padding-right:14px;margin-right:14px}
  /* keep the eyebrow on ONE line: scale type + tighten tracking/gap on phones */
  .hx-eyebrow{gap:8px;font-size:clamp(8.5px,2.55vw,11px);letter-spacing:.06em;white-space:nowrap;margin-bottom:24px}
  .hx-eyebrow .hx-bar2{width:18px}}

/* shared buttons (used by hero CTAs + contact form) — softened to 10px rect */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--lime);color:var(--ink);
  font-family:'General Sans';font-weight:600;font-size:15.5px;padding:16px 26px;border-radius:13px;line-height:1;
  border:none;cursor:pointer;position:relative;will-change:transform;
  box-shadow:0 16px 40px -16px rgba(198,242,78,.6);transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
.btn-primary:hover{box-shadow:0 24px 58px -16px rgba(198,242,78,.85);transform:translateY(-2px)}
.btn-primary .arr{font-size:17px;line-height:1;transition:transform .35s var(--ease)}
.btn-primary:hover .arr{transform:translateX(4px)}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:9px;color:var(--paper);font-weight:500;font-size:15.5px;line-height:1;
  padding:16px 24px;border-radius:13px;border:1px solid color-mix(in srgb,var(--paper) 17%,transparent);background:rgba(255,255,255,.025);cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .4s var(--ease)}
.btn-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.26);transform:translateY(-2px)}
.btn-ghost i{font-style:normal;transition:transform .3s var(--ease)}
.btn-ghost:hover i{transform:translateX(3px)}
@media(max-width:560px){
  /* stack hero CTAs so the long primary label fits on ONE line, and trim size */
  .hx-ctas{flex-direction:column;align-items:flex-start;gap:12px}
  .btn-primary,.btn-ghost{font-size:14px;padding:13px 22px;white-space:nowrap}
}

/* ---- marquee ------------------------------------------------------------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;
  padding:20px 0;background:rgba(255,255,255,.012);position:relative;z-index:3;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
/* seamless: 4 identical copies, the inter-item gap built into each item (padding-right)
   so translateX(-50%) lands copy 3 exactly on copy 1 — no jump, no edge gap. */
.marquee-track{display:flex;width:max-content;animation:marq 65s linear infinite;will-change:transform}
.marquee-item{display:flex;align-items:center;gap:48px;padding-right:48px;white-space:nowrap;
  font-family:'Clash Display';font-weight:500;font-size:19px;color:#8a8a80;letter-spacing:-.01em;text-transform:uppercase}
.marquee-item span{color:#8a8a80}
.marquee-item .lm{color:var(--lime)}
@keyframes marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---- section label ------------------------------------------------------- */
.work-head{padding:96px 0 4px}
.sec-eyebrow{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:500;margin-bottom:24px}
.sec-eyebrow::before{content:"";width:34px;height:1px;background:var(--lime)}
/* monospace metadata voice — type contrast against the display grotesk */
.sec-eyebrow,.case-num,.case-cat,.case-year,.oc-label,.cap-seen,.price-tier,.tl-when,.frame-tag,.lh-old,.lh-new,.frame-url,.price-badge{font-family:var(--mono)}
.wstat{display:flex;flex-direction:column;gap:8px}
.work-sub{max-width:660px;margin-top:26px;color:#bdbdb4;font-size:clamp(16px,1.4vw,18px);line-height:1.62}

/* ---- cases --------------------------------------------------------------- */
.case{position:relative;padding:60px 0;overflow:hidden}

/* media frame */
.case-media{position:relative;will-change:transform;transition:transform .6s var(--ease)}
.frame.dark .frame-bar{background:color-mix(in srgb,var(--acc) 12%,rgba(8,8,11,.7))}
.fav{flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
  font-family:'Clash Display';font-weight:700;font-size:12px;color:var(--ink);
  background:var(--acc);box-shadow:0 2px 10px -2px var(--acc)}

/* product showcase (multi-screen) */
.showcase{display:flex;flex-direction:column;gap:14px}

/* body */
.case-body{max-width:540px}
.chip{font-size:12.5px;font-weight:500;letter-spacing:.02em;padding:7px 15px;border-radius:100px;
  color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);
  background:color-mix(in srgb,var(--acc) 9%,transparent)}
.did-label{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc);font-weight:600;margin-bottom:11px}
.did-label i{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px 1px var(--acc)}
.stk{font-family:'General Sans';font-size:12px;color:#cfcfc6;padding:4px 11px;border-radius:6px;border:1px solid var(--line);background:rgba(255,255,255,.025)}

/* ---- capabilities ------------------------------------------------------- */
.caps{padding:128px 0 44px}
/* ===== capability bento — every tile is a realistic, animated micro-UI (single lime) ===== */
.caps-bento{display:flex;flex-direction:column;margin-top:44px;position:relative}
/* the whole bento is one left-to-right workflow: a faint vertical spine threads the
   three stage nodes, and each stage row carries its own connector rail + comet */
.caps-bento::before{content:"";position:absolute;left:13px;top:14px;bottom:46px;width:1px;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--lime) 26%,transparent) 8%,color-mix(in srgb,var(--lime) 26%,transparent) 92%,transparent);opacity:.6}
.cb-group{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;grid-auto-flow:dense;margin:16px 0 26px}
.cb-domain{--ca:#c6f24e;display:flex;align-items:center;gap:14px;margin-top:18px;position:relative;z-index:1}
.cb-domain:first-of-type{margin-top:0}
.cbd-node{flex:none;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--ca) 24%,#0c0d08),#0a0b07);
  border:1px solid color-mix(in srgb,var(--ca) 45%,var(--line));
  box-shadow:0 0 0 4px var(--ink),0 0 16px -4px color-mix(in srgb,var(--ca) 60%,transparent)}
.cbd-no{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--ca)}
.cb-domain h3{font-family:'Clash Display';font-weight:600;font-size:18px;letter-spacing:-.01em;margin:0;color:var(--paper);white-space:nowrap}
.cbd-line{flex:1;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--ca) 30%,transparent),transparent)}

/* ---- workflow flow layer: connector rail + travelling comet + gap arrows ---- */
.cb-flow{position:absolute;inset:0;z-index:0;pointer-events:none;transition:opacity .4s var(--ease)}
.cbf-rail{position:absolute;left:2%;right:2%;top:50%;height:1.5px;transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--lime) 22%,transparent) 12%,color-mix(in srgb,var(--lime) 22%,transparent) 88%,transparent)}
.cbf-comet{display:none}
.cbf-ar{position:absolute;top:50%;width:7px;height:7px;border-top:1.6px solid color-mix(in srgb,var(--lime) 55%,var(--line));
  border-right:1.6px solid color-mix(in srgb,var(--lime) 55%,var(--line));transform:translate(-50%,-50%) rotate(45deg);
  opacity:.5;animation:cbfArrow 3.4s var(--ease) calc(var(--d,0)*.62s) infinite}
.cbf-ar:nth-child(3){left:25%}
.cbf-ar:nth-child(4){left:50%;animation-delay:calc(var(--d,0)*.62s + .12s)}
.cbf-ar:nth-child(5){left:75%;animation-delay:calc(var(--d,0)*.62s + .24s)}
@keyframes cbfArrow{0%,100%{opacity:.35;border-color:color-mix(in srgb,var(--lime) 40%,var(--line))}
  18%{opacity:1;border-color:var(--lime)}40%{opacity:.5}}
.cb-group:has(.cbx.open) .cb-flow{opacity:0}
@media(prefers-reduced-motion:reduce){.cbf-comet,.cbf-ar{animation:none}.cbf-comet{display:none}}

.cbx{--ca:#c6f24e;position:relative;z-index:1;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  border:1px solid rgba(244,243,238,.17);
  /* opaque, defined surface so each tile reads as a real, tappable button — not a
     faint outline floating in the dark. lime wash up top, solid charcoal base. */
  background:radial-gradient(130% 90% at 50% -18%,color-mix(in srgb,var(--ca) 15%,transparent),transparent 60%),linear-gradient(180deg,#181a11,#101108);
  box-shadow:inset 0 1.5px 0 color-mix(in srgb,var(--ca) 38%,transparent),inset 0 1px 0 rgba(255,255,255,.06),0 20px 44px -32px rgba(0,0,0,.92);
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.cbx>*{position:relative;z-index:2}
.cbx::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--ca) 78%,transparent),color-mix(in srgb,var(--ca) 8%,transparent) 48%,transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:0;transition:opacity .4s var(--ease)}
.cbx:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--ca) 28%,var(--line));
  box-shadow:inset 0 1.5px 0 color-mix(in srgb,var(--ca) 48%,transparent),inset 0 1px 0 rgba(255,255,255,.07),0 32px 64px -40px rgba(0,0,0,.95),0 0 60px -34px color-mix(in srgb,var(--ca) 50%,transparent)}
.cbx:hover::before{opacity:1}
/* reveal sheen */
.cbx::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background:linear-gradient(115deg,transparent 42%,color-mix(in srgb,var(--ca) 15%,transparent) 50%,transparent 58%);transform:translateX(-100%)}
/* reveal cascade: the sheen sweeps each tile in workflow order (staggered by --i),
   so the row visibly "flows" tile-into-tile as it scrolls in */
.cbx.show::after{animation:cbxScan 1s var(--ease) calc(.1s + var(--i,0)*.07s) 1}
@keyframes cbxScan{0%{opacity:0;transform:translateX(-100%)}22%{opacity:1}100%{opacity:0;transform:translateX(100%)}}
.cbx.show{animation:cbxPop .6s var(--ease) calc(.1s + var(--i,0)*.07s) both}
@keyframes cbxPop{0%{border-color:rgba(244,243,238,.17)}30%{border-color:color-mix(in srgb,var(--ca) 60%,var(--line))}100%{border-color:rgba(244,243,238,.17)}}
/* the demo stage is hidden on the calm tab; it reveals (and animates) on open */
.cbx-stage{position:relative;flex:1;min-height:150px;padding:18px 16px;display:none;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid rgba(244,243,238,.055);
  background:radial-gradient(circle at 1px 1px,rgba(244,243,238,.05) 1px,transparent 1.7px) -1px -1px/15px 15px,radial-gradient(125% 95% at 50% -10%,color-mix(in srgb,var(--ca) 6%,transparent),transparent 60%)}
/* calm tile = a legible vertical capability card: a bold icon + a clear "watch" play
   chip up top, then a full-width title and a one-line plain-English descriptor below.
   (The old icon|text row was cramped — descriptors broke onto orphan lines and the 12
   tiles read as a muddy sea of look-alike buttons.) Column layout also matches the
   .open state, so a tile expands seamlessly into the spotlight demo. */
.cbx-cap{display:flex;flex-direction:column;align-items:flex-start;gap:13px;padding:20px 20px 22px;min-height:146px}
.cbx-cap::after{content:"\25B6";position:absolute;top:24px;right:20px;margin:0;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;padding-left:2px;
  font-size:9px;color:color-mix(in srgb,var(--ca) 88%,#fff);
  border:1px solid color-mix(in srgb,var(--ca) 40%,var(--line));background:color-mix(in srgb,var(--ca) 14%,transparent);
  transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),transform .35s var(--ease)}
.cbx:hover .cbx-cap::after{color:var(--ink);background:var(--ca);border-color:var(--ca);transform:scale(1.12);box-shadow:0 0 18px -4px color-mix(in srgb,var(--ca) 80%,transparent)}
.cbx-ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--ca);background:color-mix(in srgb,var(--ca) 17%,transparent);border:1px solid color-mix(in srgb,var(--ca) 34%,var(--line));transition:background .3s var(--ease),border-color .3s var(--ease),transform .4s var(--ease)}
.cbx:hover .cbx-ic{background:color-mix(in srgb,var(--ca) 24%,transparent);border-color:color-mix(in srgb,var(--ca) 50%,var(--line))}
.cbx-ic svg{width:20px;height:20px}
.cbx-tx{display:flex;flex-direction:column;gap:5px;width:100%;min-width:0}
.cbx-tx b{font-family:'General Sans';font-weight:600;font-size:16.5px;line-height:1.22;color:#fbfbf7;letter-spacing:-.01em}
.cbx-tx span{font-size:13px;line-height:1.45;color:#bcbcb2}
.cbx.rv{transform:translateY(16px)}

/* ---- click to open: tab expands full-width into a spotlight that plays the demo ---- */
.cbx.open{grid-column:1/-1;flex-direction:row;cursor:default;
  border-color:color-mix(in srgb,var(--ca) 34%,var(--line));
  box-shadow:inset 0 1.5px 0 color-mix(in srgb,var(--ca) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.07),0 36px 80px -44px rgba(0,0,0,.96),0 0 80px -40px color-mix(in srgb,var(--ca) 52%,transparent)}
.cbx.open:hover{transform:none}
.cbx.open .cbx-stage{display:flex;flex:1 1 56%;min-height:296px;border-bottom:none;border-right:1px solid rgba(244,243,238,.07);animation:cbxStageIn .5s var(--ease) both}
@keyframes cbxStageIn{from{opacity:0}to{opacity:1}}
.cbx.open .cbx-stage>div{transform:scale(1.5);transform-origin:center}
.cbx.open .cbx-cap{flex:1 1 44%;flex-direction:column;align-items:flex-start;justify-content:center;gap:13px;padding:30px 34px;min-height:0}
.cbx.open .cbx-ic{width:46px;height:46px;border-radius:13px;background:color-mix(in srgb,var(--ca) 15%,transparent);border-color:color-mix(in srgb,var(--ca) 34%,var(--line))}
.cbx.open .cbx-ic svg{width:22px;height:22px}
.cbx.open .cbx-tx{gap:5px}
.cbx.open .cbx-tx b{font-size:21px;letter-spacing:-.01em}
.cbx.open .cbx-tx span{font-size:14px;line-height:1.5}
.cbx.open .cbx-cap::after{content:"\2715";position:absolute;top:16px;right:16px;margin:0;padding:0;
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:13px;
  color:color-mix(in srgb,var(--ca) 85%,#fff);border:1px solid color-mix(in srgb,var(--ca) 26%,var(--line));
  background:color-mix(in srgb,var(--ca) 9%,transparent);transform:none;cursor:pointer;
  transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
.cbx.open .cbx-cap:hover::after{color:var(--ink);background:var(--ca);border-color:var(--ca)}
.cbx.open .cbx-tx::after{content:"Live in real client builds — built start to finish.";font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:color-mix(in srgb,var(--ca) 60%,#8a8a82);margin-top:4px}
/* hold demo animations OFF until the tab opens — otherwise the one-shot animations
   would run (and finish) while the stage is display:none, so opening would show only
   the end state. Killing them while closed makes them start fresh on open. */
.cbx:not(.open) .cbx-stage *,.cbx:not(.open) .cbx-stage *::before,.cbx:not(.open) .cbx-stage *::after{animation:none!important}

/* ---- shared ---- */
@keyframes dCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes dTwCaret{0%,49%{border-color:var(--ca)}50%,100%{border-color:transparent}}
@keyframes dBlink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes dSpin{to{transform:rotate(360deg)}}
.d-caret{display:inline-block;width:2px;height:12px;background:var(--ca);vertical-align:-2px;margin-left:2px;animation:dCaret 1s step-end infinite}

/* booking — cursor moves in, taps a slot, confirmation slides up (plays once, holds) */
.d-book{position:relative;width:100%;max-width:252px;display:flex;flex-direction:column;gap:9px}
.d-book-head{display:flex;align-items:baseline;justify-content:space-between}
.d-book-head span{font-family:'General Sans';font-weight:600;font-size:12px;color:#cfcfc6}
.d-book-head b{font-family:var(--mono);font-weight:500;font-size:9px;letter-spacing:.04em;color:#8a8a80}
.d-book-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.d-book-slots i{font-family:var(--mono);font-style:normal;font-size:10px;text-align:center;padding:6px 0;border-radius:7px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);color:#b6b6ae}
.d-book-slots i.off{opacity:.38;text-decoration:line-through}
.d-book-slots i.pick{animation:dPick 7s var(--ease) infinite}
@keyframes dPick{0%,17%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.07);color:#b6b6ae}22%,90%{background:color-mix(in srgb,var(--ca) 26%,transparent);border-color:var(--ca);color:var(--paper);box-shadow:0 0 0 1px color-mix(in srgb,var(--ca) 28%,transparent)}97%,100%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.07);color:#b6b6ae;box-shadow:none}}
.d-book-ok{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;letter-spacing:.03em;color:var(--ca);opacity:0;animation:dBookOk 7s var(--ease) infinite}
.d-book-ok svg{width:11px;height:11px}
@keyframes dBookOk{0%,23%{opacity:0;transform:translateY(4px)}29%,90%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(4px)}}
.d-book-sms{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-style:normal;font-size:8.5px;letter-spacing:.04em;opacity:0;color:color-mix(in srgb,var(--ca) 55%,#8a8a82);animation:dBookSms 7s var(--ease) infinite;margin-top:-3px}
@keyframes dBookSms{0%,38%{opacity:0;transform:translateY(3px)}44%,90%{opacity:1;transform:translateY(0)}96%,100%{opacity:0}}
.d-cur{position:absolute;left:78%;top:84%;width:15px;height:15px;pointer-events:none;z-index:5;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));animation:dCur 7s var(--ease) infinite}
.d-cur svg{width:100%;height:100%}
@keyframes dCur{0%{left:80%;top:88%;opacity:0;transform:scale(1)}6%{opacity:1}18%{left:52%;top:56%;transform:scale(1)}22%{transform:scale(.8)}26%{transform:scale(1)}36%{left:52%;top:56%;opacity:1}44%,100%{left:80%;top:88%;opacity:0}}

/* payment — Pay → spinner → Paid (plays once, holds Paid) */
.d-pay{width:100%;max-width:228px;display:flex;flex-direction:column;gap:9px}
.d-pay-row{display:flex;align-items:baseline;justify-content:space-between}
.d-pay-row span{font-size:11.5px;color:#9a9a92}
.d-pay-row b{font-family:'Clash Display';font-weight:600;font-size:22px;color:var(--paper);letter-spacing:-.02em}
.d-pay-card{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);font-family:var(--mono);font-size:10px;color:#b6b6ae;animation:dPayCard 7s var(--ease) infinite}
@keyframes dPayCard{0%,6%{border-color:rgba(255,255,255,.07);background:rgba(255,255,255,.05)}9%,14%{border-color:color-mix(in srgb,var(--ca) 45%,transparent);background:color-mix(in srgb,var(--ca) 8%,transparent)}19%,100%{border-color:rgba(255,255,255,.07);background:rgba(255,255,255,.05)}}
.pl-stack{display:grid}
.pl-stack span{grid-area:1/1}
.pl1{animation:dPl1 7s var(--ease) infinite}
.pl2{animation:dPl2 7s var(--ease) infinite}
@keyframes dPl1{0%,46%{opacity:1}52%,92%{opacity:0}98%,100%{opacity:1}}
@keyframes dPl2{0%,48%{opacity:0}54%,92%{opacity:1}98%,100%{opacity:0}}
.pay-roll-w{display:inline-block;height:22px;overflow:hidden}
.pay-roll{display:inline-block;font-style:normal;line-height:22px;animation:dPayRoll 7s var(--ease) infinite}
@keyframes dPayRoll{0%,46%{transform:translateY(0)}54%,92%{transform:translateY(-22px)}98%,100%{transform:translateY(0)}}
.d-pay-card svg{width:16px;height:16px;color:var(--ca);flex:none}
.d-pay-btn{position:relative;height:33px;border-radius:8px;display:grid;font-family:'General Sans';font-weight:600;font-size:12px;background:color-mix(in srgb,var(--ca) 16%,transparent);border:1px solid color-mix(in srgb,var(--ca) 32%,transparent);color:var(--ca)}
.d-pay-btn>*{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.d-pay-btn svg{width:13px;height:13px}
.pb1{animation:dPb1 7s ease-in-out infinite}
.pb-load{animation:dPbMid 7s ease-in-out infinite}
.pb2{animation:dPb2 7s ease-in-out infinite}
.pb-load i{width:13px;height:13px;border-radius:50%;border:2px solid color-mix(in srgb,var(--ca) 28%,transparent);border-top-color:var(--ca);animation:dSpin .7s linear infinite}
@keyframes dPb1{0%,15%{opacity:1}20%,93%{opacity:0}98%,100%{opacity:1}}
@keyframes dPbMid{0%,16%{opacity:0}21%,29%{opacity:1}34%,100%{opacity:0}}
@keyframes dPb2{0%,32%{opacity:0}37%,91%{opacity:1}96%,100%{opacity:0}}
.d-pay-rcpt{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-style:normal;font-size:8.5px;letter-spacing:.04em;opacity:0;color:color-mix(in srgb,var(--ca) 55%,#8a8a82);animation:dPayRcpt 7s var(--ease) infinite}
@keyframes dPayRcpt{0%,56%{opacity:0;transform:translateY(3px)}62%,91%{opacity:1;transform:translateY(0)}96%,100%{opacity:0}}

/* login — password types in, Sign in → Welcome back (plays once, holds) */
.d-login{width:100%;max-width:206px;display:flex;flex-direction:column;gap:8px}
.d-login-h{display:flex;align-items:center;gap:7px;font-family:'General Sans';font-weight:600;font-size:12px;color:#cfcfc6;margin-bottom:1px}
.d-login-h svg{width:14px;height:14px;color:var(--ca)}
.d-login-field{display:flex;align-items:center;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);font-size:10.5px;color:#9a9a92;min-height:33px}
.d-login-pw{overflow:hidden}
.pw-dots{display:inline-block;white-space:nowrap;overflow:hidden;width:0;letter-spacing:2px;color:#cfcfc6;animation:dPwType 7s var(--ease) infinite}
@keyframes dPwType{0%,4%{width:0}17%,92%{width:60px}98%,100%{width:0}}
.d-login-pw .d-caret{height:11px}
.d-login-btn{position:relative;height:31px;border-radius:8px;display:grid;font-family:'General Sans';font-weight:600;font-size:11.5px;background:color-mix(in srgb,var(--ca) 16%,transparent);border:1px solid color-mix(in srgb,var(--ca) 32%,transparent);color:var(--ca);margin-top:1px}
.d-login-btn>*{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.d-login-btn svg{width:12px;height:12px}
.lb1{animation:dLb1 7s ease-in-out infinite}
.lb2{animation:dLb2 7s ease-in-out infinite}
@keyframes dLb1{0%,25%{opacity:1}30%,93%{opacity:0}98%,100%{opacity:1}}
@keyframes dLb2{0%,27%{opacity:0}32%,91%{opacity:1}96%,100%{opacity:0}}
.d-login-mem{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border-radius:8px;margin-top:1px;
  background:color-mix(in srgb,var(--ca) 7%,transparent);border:1px solid color-mix(in srgb,var(--ca) 22%,transparent);
  opacity:0;animation:dLoginMem 7s var(--ease) infinite}
.lm-av{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink);background:var(--ca);box-shadow:0 0 12px -3px var(--ca)}
.lm-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.lm-tx b{font-family:'General Sans';font-weight:600;font-size:10.5px;color:var(--paper);white-space:nowrap}
.lm-tx i{font-style:normal;font-family:var(--mono);font-size:8.5px;color:color-mix(in srgb,var(--ca) 55%,#8a8a82);white-space:nowrap}
@keyframes dLoginMem{0%,40%{opacity:0;transform:translateY(5px)}47%,91%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(5px)}}

/* video — second camera joins, live waveform (waveform/REC keep looping = live) */
.d-vid{width:100%;max-width:232px;display:flex;flex-direction:column;gap:7px}
.d-vid-cams{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.d-vid-cam{position:relative;min-height:52px;border-radius:8px;background:linear-gradient(135deg,color-mix(in srgb,var(--ca) 11%,transparent),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.07)}
.d-vid-cam b{position:absolute;left:6px;bottom:5px;font-family:var(--mono);font-weight:500;font-size:8.5px;color:#cfcfc6;z-index:2}
.d-vid-cam::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.07) 50%,transparent 58%);transform:translateX(-130%);animation:dGlare 5.6s ease-in-out infinite}
.d-vid-cam:nth-child(2)::after{animation-delay:.9s}
@keyframes dGlare{0%,55%{transform:translateX(-130%)}80%,100%{transform:translateX(130%)}}
.d-vid-join{transform-origin:center;animation:dJoin 1s var(--ease) both}
@keyframes dJoin{0%{opacity:0;transform:scale(.84)}60%,100%{opacity:1;transform:scale(1)}}
.d-vid-bar{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.d-vid-rec{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:#ff7b6b}
.d-vid-rec i{width:6px;height:6px;border-radius:50%;background:#ff5b5b;animation:dBlink 1.4s steps(1) infinite}
.d-vid-t{margin-left:6px;color:#9a9a92;letter-spacing:.06em}
.d-vid-t::after{content:"00:12";animation:dVidT 8s steps(1,end) infinite}
@keyframes dVidT{0%{content:"00:12"}25%{content:"00:13"}50%{content:"00:14"}75%{content:"00:15"}}
.d-wave{display:flex;align-items:flex-end;gap:3px;height:16px}
.d-wave i{width:3px;border-radius:2px;background:var(--ca);height:30%;animation:dWave 1s ease-in-out infinite}
.d-wave i:nth-child(2){animation-delay:.12s}.d-wave i:nth-child(3){animation-delay:.24s}.d-wave i:nth-child(4){animation-delay:.36s}.d-wave i:nth-child(5){animation-delay:.48s}.d-wave i:nth-child(6){animation-delay:.6s}
@keyframes dWave{0%,100%{height:22%}50%{height:92%}}

/* chat — incoming, AI types, replies, books (plays once, holds the booked chat) */
.d-chat{width:100%;max-width:250px;display:flex;flex-direction:column;gap:6px}
.d-msg{max-width:90%;padding:7px 10px;border-radius:12px;font-size:11px;line-height:1.32}
.d-in{align-self:flex-start;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);color:#cfcfc6;border-bottom-left-radius:4px;animation:dInMsg 8s var(--ease) infinite}
@keyframes dInMsg{0%,2%{opacity:0;transform:translateY(6px)}7%,92%{opacity:1;transform:translateY(0)}97%,100%{opacity:0;transform:translateY(6px)}}
.d-out{position:relative;align-self:flex-end;background:color-mix(in srgb,var(--ca) 15%,transparent);border:1px solid color-mix(in srgb,var(--ca) 26%,transparent);color:var(--paper);border-bottom-right-radius:4px;animation:dOutMsg 8s var(--ease) infinite}
@keyframes dOutMsg{0%,10%{opacity:0;transform:translateY(6px) scale(.96)}14%,91%{opacity:1;transform:translateY(0) scale(1)}96%,100%{opacity:0;transform:translateY(6px) scale(.96)}}
.ot-dots{display:inline-flex;gap:4px;animation:dOtDots 8s var(--ease) infinite}
.ot-dots i{width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--ca) 85%,#fff);animation:dDots 1.1s ease-in-out infinite}
.ot-dots i:nth-child(2){animation-delay:.16s}.ot-dots i:nth-child(3){animation-delay:.32s}
@keyframes dDots{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.ot-txt{animation:dOtTxt 8s var(--ease) infinite}
@keyframes dOtDots{0%,13%{opacity:1;max-width:40px}17%,100%{opacity:0;max-width:0}}
@keyframes dOtTxt{0%,17%{opacity:0;font-size:0}21%,100%{opacity:1;font-size:11px}}
.d-chat-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9px;letter-spacing:.03em;color:var(--ca);margin-top:2px;opacity:0;animation:dChipShow 8s var(--ease) infinite}
.d-chat-chip svg{width:11px;height:11px}
@keyframes dChipShow{0%,33%{opacity:0;transform:translateY(4px)}38%,90%{opacity:1;transform:translateY(0)}95%,100%{opacity:0;transform:translateY(4px)}}

/* search — query types in, answer resolves (plays once, holds; caret keeps blinking) */
.d-search{width:100%;max-width:226px;display:flex;flex-direction:column;gap:9px}
.d-search-bar{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid color-mix(in srgb,var(--ca) 20%,var(--line));font-size:11px;color:#cfcfc6;overflow:hidden}
.d-search-bar svg{width:13px;height:13px;color:var(--ca);flex:none}
.sq-stack{display:grid;align-items:center;min-width:0}
.sq-stack .sq{grid-area:1/1}
.sq{display:inline-block;white-space:nowrap;overflow:hidden;width:0;border-right:2px solid transparent}
.sq.q1{animation:dSq1 13s var(--ease) infinite}
.sq.q2{animation:dSq2 13s var(--ease) infinite}
@keyframes dSq1{0%,2%{width:0;border-color:var(--ca)}13%,42%{width:130px;border-color:var(--ca)}44%{width:130px;border-color:transparent}46%,100%{width:0;border-color:transparent}}
@keyframes dSq2{0%,48%{width:0;border-color:transparent}49%{width:0;border-color:var(--ca)}61%,93%{width:132px;border-color:var(--ca)}95%{width:132px;border-color:transparent}99%,100%{width:0;border-color:transparent}}
.d-search-ans{font-size:11px;line-height:1.4;color:#a6a69e;padding-left:9px;border-left:2px solid color-mix(in srgb,var(--ca) 50%,transparent);opacity:0}
.ans-stack{display:grid}
.ans-stack .d-search-ans{grid-area:1/1}
.d-search-ans.a1{animation:dAns1 13s var(--ease) infinite}
.d-search-ans.a2{animation:dAns2 13s var(--ease) infinite}
@keyframes dAns1{0%,17%{opacity:0;transform:translateY(3px)}22%,42%{opacity:1;transform:translateY(0)}46%,100%{opacity:0;transform:translateY(3px)}}
@keyframes dAns2{0%,66%{opacity:0;transform:translateY(3px)}71%,94%{opacity:1;transform:translateY(0)}99%,100%{opacity:0;transform:translateY(3px)}}
.d-sr{height:12px;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05);opacity:0}
.d-sr.s1{animation:dSr1 13s var(--ease) infinite}
.d-sr.s2{width:72%;animation:dSr2 13s var(--ease) infinite}
@keyframes dSr1{0%,24%{opacity:0;transform:translateY(3px)}29%,42%{opacity:1;transform:translateY(0)}46%,72%{opacity:0;transform:translateY(3px)}77%,94%{opacity:1;transform:translateY(0)}99%,100%{opacity:0;transform:translateY(3px)}}
@keyframes dSr2{0%,28%{opacity:0;transform:translateY(3px)}33%,42%{opacity:1;transform:translateY(0)}46%,76%{opacity:0;transform:translateY(3px)}81%,94%{opacity:1;transform:translateY(0)}99%,100%{opacity:0;transform:translateY(3px)}}

/* admin — tasks tick off in sequence (plays once, holds all checked) */
.d-admin{width:100%;max-width:230px;display:flex;flex-direction:column;gap:9px}
.d-adm-h{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:#8a8a80;margin-bottom:1px}
.d-adm-h i{width:6px;height:6px;border-radius:50%;background:var(--ca);animation:dBlink 1.4s steps(1) infinite}
.d-task{display:flex;align-items:center;gap:9px;font-size:10.5px;width:100%}
.tst{position:relative;margin-left:auto;flex:none;font-family:var(--mono);font-size:8.5px;font-style:normal;letter-spacing:.02em}
.tst b{display:block;font-weight:500}
.tst .w{color:#8a8a80;font-style:italic;opacity:0}
.tst .d{position:absolute;right:0;top:0;color:var(--ca);white-space:nowrap;opacity:0}
.t1 .tst .w{animation:dTw1 7s var(--ease) infinite}.t1 .tst .d{animation:dTd1 7s var(--ease) infinite}
.t2 .tst .w{animation:dTw2 7s var(--ease) infinite}.t2 .tst .d{animation:dTd2 7s var(--ease) infinite}
.t3 .tst .w{animation:dTw3 7s var(--ease) infinite}.t3 .tst .d{animation:dTd3 7s var(--ease) infinite}
@keyframes dTw1{0%,2%{opacity:0}4%,12%{opacity:1}14%,100%{opacity:0}}
@keyframes dTd1{0%,13%{opacity:0}15%,91%{opacity:1}96%,100%{opacity:0}}
@keyframes dTw2{0%,16%{opacity:0}18%,26%{opacity:1}28%,100%{opacity:0}}
@keyframes dTd2{0%,27%{opacity:0}29%,91%{opacity:1}96%,100%{opacity:0}}
@keyframes dTw3{0%,30%{opacity:0}32%,40%{opacity:1}42%,100%{opacity:0}}
@keyframes dTd3{0%,41%{opacity:0}43%,91%{opacity:1}96%,100%{opacity:0}}
.d-task>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#8a8a82}
.d-check{flex:none;width:15px;height:15px;border-radius:5px;border:1.5px solid color-mix(in srgb,var(--ca) 38%,var(--line));position:relative}
.d-check::after{content:"";position:absolute;left:4.5px;top:1px;width:3.5px;height:7px;border:solid var(--ca);border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0}
.t1 .d-check{animation:dChkBox1 7s var(--ease) infinite}.t1 .d-check::after{animation:dChkMark1 7s var(--ease) infinite}.t1>span{animation:dTaskTxt1 7s var(--ease) infinite}
.t2 .d-check{animation:dChkBox2 7s var(--ease) infinite}.t2 .d-check::after{animation:dChkMark2 7s var(--ease) infinite}.t2>span{animation:dTaskTxt2 7s var(--ease) infinite}
.t3 .d-check{animation:dChkBox3 7s var(--ease) infinite}.t3 .d-check::after{animation:dChkMark3 7s var(--ease) infinite}.t3>span{animation:dTaskTxt3 7s var(--ease) infinite}
@keyframes dChkBox1{0%,8%{background:transparent;border-color:color-mix(in srgb,var(--ca) 38%,var(--line))}14%,91%{background:color-mix(in srgb,var(--ca) 28%,transparent);border-color:var(--ca)}96%,100%{background:transparent;border-color:color-mix(in srgb,var(--ca) 38%,var(--line))}}
@keyframes dChkMark1{0%,9%{opacity:0}15%,91%{opacity:1}96%,100%{opacity:0}}
@keyframes dTaskTxt1{0%,9%{color:#8a8a82}15%,91%{color:#cfcfc6}96%,100%{color:#8a8a82}}
@keyframes dChkBox2{0%,22%{background:transparent;border-color:color-mix(in srgb,var(--ca) 38%,var(--line))}28%,91%{background:color-mix(in srgb,var(--ca) 28%,transparent);border-color:var(--ca)}96%,100%{background:transparent;border-color:color-mix(in srgb,var(--ca) 38%,var(--line))}}
@keyframes dChkMark2{0%,23%{opacity:0}29%,91%{opacity:1}96%,100%{opacity:0}}
@keyframes dTaskTxt2{0%,23%{color:#8a8a82}29%,91%{color:#cfcfc6}96%,100%{color:#8a8a82}}
@keyframes dChkBox3{0%,36%{background:transparent;border-color:color-mix(in srgb,var(--ca) 38%,var(--line))}42%,91%{background:color-mix(in srgb,var(--ca) 28%,transparent);border-color:var(--ca)}96%,100%{background:transparent;border-color:color-mix(in srgb,var(--ca) 38%,var(--line))}}
@keyframes dChkMark3{0%,37%{opacity:0}43%,91%{opacity:1}96%,100%{opacity:0}}
@keyframes dTaskTxt3{0%,37%{color:#8a8a82}43%,91%{color:#cfcfc6}96%,100%{color:#8a8a82}}
.d-adm-done{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9px;letter-spacing:.04em;color:var(--ca);padding:3px 8px;border-radius:100px;background:color-mix(in srgb,var(--ca) 12%,transparent);border:1px solid color-mix(in srgb,var(--ca) 26%,transparent);opacity:0;animation:dAdmDone 7s var(--ease) infinite}
@keyframes dAdmDone{0%,52%{opacity:0;transform:translateY(4px)}58%,90%{opacity:1;transform:translateY(0)}95%,100%{opacity:0;transform:translateY(4px)}}

/* writes — typewriter (types once, holds; caret keeps blinking) */
.d-write{width:100%;max-width:236px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.tw-l{display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:100%}
.d-tw{font-family:var(--mono);font-size:12.5px;line-height:1.4;color:var(--paper);white-space:nowrap;overflow:hidden;width:0;border-right:2px solid transparent;flex:none}
.t-corp{text-decoration:line-through;text-decoration-color:transparent;text-decoration-thickness:1.5px;animation:dTwA 12s steps(27,end) infinite,dTwAState 12s var(--ease) infinite}
.t-you{animation:dTwB 12s steps(26,end) infinite,dTwBCaret 12s var(--ease) infinite}
.tw-x,.tw-ok{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-style:normal;font-size:8.5px;letter-spacing:.04em;opacity:0;white-space:nowrap}
.tw-x{color:#c08a80;animation:dTwX 12s var(--ease) infinite}
.tw-ok{color:var(--ca);animation:dTwOk 12s var(--ease) infinite}
@keyframes dTwA{0%,3%{width:0}25%,94%{width:27ch}99%,100%{width:0}}
@keyframes dTwAState{0%,30%{color:var(--paper);border-color:var(--ca);text-decoration-color:transparent}34%,94%{color:#6c6c64;border-color:transparent;text-decoration-color:#6c6c64}96%,100%{color:var(--paper);border-color:transparent;text-decoration-color:transparent}}
@keyframes dTwB{0%,38%{width:0}62%,94%{width:26ch}99%,100%{width:0}}
@keyframes dTwBCaret{0%,37%{border-color:transparent}38%,92%{border-color:var(--ca)}94%,100%{border-color:transparent}}
@keyframes dTwX{0%,28%{opacity:0;transform:translateX(-4px)}32%,94%{opacity:1;transform:translateX(0)}99%,100%{opacity:0}}
@keyframes dTwOk{0%,64%{opacity:0;transform:translateX(-4px)}68%,92%{opacity:1;transform:translateX(0)}97%,100%{opacity:0}}
.d-write-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:color-mix(in srgb,var(--ca) 64%,#9a9a92)}
.d-write-tag svg{width:11px;height:11px;color:var(--ca)}

/* google rank — result card, rank rolls up to #1 (rolls once, holds #1) */
.d-serp{width:100%;max-width:238px;display:flex;flex-direction:column;gap:7px}
.d-serp-q{display:flex;align-items:center;gap:7px;padding:6px 11px;border-radius:100px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);font-size:10.5px;color:#b6b6ae}
.d-serp-q svg{width:12px;height:12px;color:#8a8a80;flex:none}
.d-serp-res{position:relative;padding:9px 11px;border-radius:9px;background:color-mix(in srgb,var(--ca) 9%,transparent);border:1px solid color-mix(in srgb,var(--ca) 28%,transparent);display:flex;flex-direction:column;gap:2px;animation:dSerpPulse 7.5s ease-in-out infinite}
@keyframes dSerpPulse{0%,40%{box-shadow:0 0 0 0 transparent}47%{box-shadow:0 0 0 4px color-mix(in srgb,var(--ca) 18%,transparent)}54%,100%{box-shadow:0 0 0 0 transparent}}
.d-serp-rank{position:absolute;top:9px;right:11px;height:14px;overflow:hidden;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ca);line-height:14px}
.d-roll{display:inline-block;animation:dRoll 7.5s var(--ease) infinite}
@keyframes dRoll{0%,6%{transform:translateY(0)}12%,17%{transform:translateY(-14px)}22%,26%{transform:translateY(-28px)}31%,35%{transform:translateY(-42px)}41%,90%{transform:translateY(-56px)}98%,100%{transform:translateY(0)}}
.d-serp-res b{font-family:'General Sans';font-weight:600;font-size:12px;color:var(--paper)}
.d-serp-url{font-family:var(--mono);font-size:9px;color:#79b58f}
.d-serp-rev{font-size:9.5px;color:var(--ca);letter-spacing:.5px}
.d-serp-row{height:14px;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05)}
.d-serp-up{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-style:normal;font-size:8.5px;letter-spacing:.04em;opacity:0;color:var(--ca);animation:dSerpUp 7.5s var(--ease) infinite}
@keyframes dSerpUp{0%,52%{opacity:0;transform:translateY(3px)}58%,90%{opacity:1;transform:translateY(0)}96%,100%{opacity:0}}

/* reviews — stars fill, new review slides in (plays once, holds) */
.d-rev{width:100%;max-width:230px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.d-rev-stars{position:relative;font-size:14px;letter-spacing:2px;line-height:1;color:rgba(255,255,255,.14)}
.rs-fill{position:absolute;left:0;top:0;color:var(--ca);overflow:hidden;white-space:nowrap;width:0;text-shadow:0 0 10px color-mix(in srgb,var(--ca) 40%,transparent);animation:dStarsFill 9s var(--ease) infinite}
@keyframes dStarsFill{0%,5%{width:0}22%,92%{width:100%}98%,100%{width:0}}
.d-rev-ct{margin-left:9px;font-family:var(--mono);font-size:9px;letter-spacing:.02em;color:#8a8a80;vertical-align:2px}
.rev-roll-w{display:inline-block;height:11px;overflow:hidden;vertical-align:-1px}
.rev-roll{display:inline-block;font-style:normal;font-size:9px;line-height:11px;color:var(--ca);animation:dRevRoll 9s var(--ease) infinite}
@keyframes dRevRoll{0%,30%{transform:translateY(0)}34%,92%{transform:translateY(-11px)}98%,100%{transform:translateY(0)}}
.d-rev-th{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-style:normal;font-size:8.5px;letter-spacing:.04em;opacity:0;color:color-mix(in srgb,var(--ca) 62%,#8a8a82);animation:dRevTh 9s var(--ease) infinite}
@keyframes dRevTh{0%,46%{opacity:0;transform:translateX(-6px)}52%,90%{opacity:1;transform:translateX(0)}95%,100%{opacity:0}}
.d-rev-q{font-family:'General Sans';font-size:12.5px;line-height:1.4;color:var(--paper);margin:0;font-style:italic}
.d-rev-by{font-family:var(--mono);font-size:9px;color:#8a8a80}
.d-rev-by em{font-style:normal;color:var(--ca)}
.d-rev-new{font-family:var(--mono);font-size:8.5px;letter-spacing:.04em;color:var(--ca);padding:2px 7px;border-radius:100px;background:color-mix(in srgb,var(--ca) 12%,transparent);border:1px solid color-mix(in srgb,var(--ca) 26%,transparent);opacity:0;animation:dRevNew 9s var(--ease) infinite}
@keyframes dRevNew{0%,26%{opacity:0;transform:translateX(-6px)}31%,90%{opacity:1;transform:translateX(0)}95%,100%{opacity:0;transform:translateX(-6px)}}

/* analytics — bars draw, trend line draws over them (already one-shot) */
.d-chart{width:100%;max-width:236px;display:flex;flex-direction:column;gap:12px}
.d-chart-top{display:flex;align-items:baseline;justify-content:space-between}
.d-chart-lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:#8a8a80}
.d-chart-kpi{font-family:'Clash Display';font-weight:600;font-size:22px;color:var(--ca);letter-spacing:-.02em;text-shadow:0 0 20px color-mix(in srgb,var(--ca) 38%,transparent);animation:dKpiGlow 3.4s ease-in-out 1.8s infinite}
.d-chart-plot{position:relative;height:56px}
.d-bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:7px}
.d-bars i{flex:1;border-radius:3px 3px 1px 1px;height:var(--h);transform-origin:bottom;transform:scaleY(0);background:linear-gradient(180deg,color-mix(in srgb,var(--ca) 48%,transparent),color-mix(in srgb,var(--ca) 14%,transparent));animation:dBar .8s var(--ease) both}
.d-bars i:nth-child(1){animation-delay:.05s}.d-bars i:nth-child(2){animation-delay:.13s}.d-bars i:nth-child(3){animation-delay:.21s}.d-bars i:nth-child(4){animation-delay:.29s}.d-bars i:nth-child(5){animation-delay:.37s}.d-bars i:nth-child(6){animation-delay:.45s}.d-bars i:nth-child(7){animation-delay:.53s}
.d-bars i:last-child{background:linear-gradient(180deg,var(--ca),color-mix(in srgb,var(--ca) 28%,transparent));box-shadow:0 0 14px -3px var(--ca);animation:dBar .8s var(--ease) both,dBarBreathe 3.4s ease-in-out 1.6s infinite}
@keyframes dBar{to{transform:scaleY(1)}}
@keyframes dKpiGlow{0%,100%{text-shadow:0 0 20px color-mix(in srgb,var(--ca) 38%,transparent)}50%{text-shadow:0 0 30px color-mix(in srgb,var(--ca) 72%,transparent)}}
@keyframes dBarBreathe{0%,100%{box-shadow:0 0 14px -3px var(--ca)}50%{box-shadow:0 0 22px -2px var(--ca)}}
.d-trend{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.d-trend polyline{fill:none;stroke:var(--ca);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--ca) 60%,transparent));stroke-dasharray:240;stroke-dashoffset:240;animation:dDraw 1.4s var(--ease) .5s both}
@keyframes dDraw{to{stroke-dashoffset:0}}

/* inline edit — value changes, saves (plays once, holds; caret keeps blinking) */
.d-edit{width:100%;max-width:220px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.d-edit-lbl{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#8a8a80}
.d-edit-field{position:relative;display:flex;align-items:center;width:100%;min-height:34px;padding:9px 11px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid color-mix(in srgb,var(--ca) 32%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--ca) 7%,transparent)}
.et1,.et2{font-size:12px;color:var(--paper)}
.et2{position:absolute;left:11px;animation:dEt2 7.5s ease-in-out infinite}
.et1{animation:dEt1 7.5s ease-in-out infinite}
@keyframes dEt1{0%,22%{opacity:1}27%,93%{opacity:0}98%,100%{opacity:1}}
@keyframes dEt2{0%,23%{opacity:0}28%,91%{opacity:1}96%,100%{opacity:0}}
.d-edit-field .d-caret{height:13px}
.d-edit-btn{position:relative;height:29px;width:100%;border-radius:8px;display:grid;font-family:'General Sans';font-weight:600;font-size:11px;
  background:color-mix(in srgb,var(--ca) 16%,transparent);border:1px solid color-mix(in srgb,var(--ca) 32%,transparent);color:var(--ca);
  animation:dEbPress 7.5s var(--ease) infinite}
.d-edit-btn>*{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:5px}
@keyframes dEbPress{0%,41%{transform:scale(1)}43%{transform:scale(.965)}46%,100%{transform:scale(1)}}
.eb1{animation:dEb1 7.5s ease-in-out infinite}
.eb2{animation:dEb2 7.5s ease-in-out infinite}
@keyframes dEb1{0%,44%{opacity:1}49%,93%{opacity:0}98%,100%{opacity:1}}
@keyframes dEb2{0%,46%{opacity:0}51%,91%{opacity:1}96%,100%{opacity:0}}
.d-edit-site{display:flex;align-items:center;gap:6px;width:100%;padding:7px 9px;border-radius:7px;font-family:var(--mono);font-size:8.5px;color:#8a8a80;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);animation:dEsFlash 7.5s var(--ease) infinite}
@keyframes dEsFlash{0%,56%{border-color:rgba(255,255,255,.06)}60%,68%{border-color:color-mix(in srgb,var(--ca) 40%,transparent)}74%,100%{border-color:rgba(255,255,255,.06)}}
.es-dot{flex:none;width:5px;height:5px;border-radius:50%;background:var(--ca);animation:dBlink 1.4s steps(1) infinite}
.es-stack{display:grid;margin-left:auto}
.es-stack b{grid-area:1/1;font-weight:500;color:#b6b6ae;white-space:nowrap}
.es-old{animation:dEsOld 7.5s var(--ease) infinite}
.es-new{color:var(--ca);animation:dEsNew 7.5s var(--ease) infinite}
@keyframes dEsOld{0%,56%{opacity:1}60%,94%{opacity:0}99%,100%{opacity:1}}
@keyframes dEsNew{0%,58%{opacity:0}62%,92%{opacity:1}97%,100%{opacity:0}}
.es-live{flex:none;font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--ca);opacity:0;animation:dEsLive 7.5s var(--ease) infinite}
@keyframes dEsLive{0%,62%{opacity:0}66%,90%{opacity:1}95%,100%{opacity:0}}
.d-edit-ok svg{width:11px;height:11px}
@keyframes dEditOk{0%,33%{opacity:0;transform:translateY(3px)}38%,90%{opacity:1;transform:translateY(0)}95%,100%{opacity:0;transform:translateY(3px)}}

@media(prefers-reduced-motion:reduce){
  .cbx.rv{transform:none}
  .cbx-stage *,.cbx-stage *::before,.cbx-stage *::after,.cbx::after{animation:none!important}
  .d-book-slots i.pick{background:color-mix(in srgb,var(--ca) 26%,transparent);border-color:var(--ca);color:var(--paper)}.d-book-ok{opacity:1}.d-cur{display:none}
  .pb1,.pb-load{opacity:0}.pb2{opacity:1}
  .pw-dots{width:60px}.lb1{opacity:0}.lb2{opacity:1}
  .d-vid-join{opacity:1;transform:none}
  .ot-dots{display:none}.ot-txt{opacity:1;font-size:11px}.d-chat-chip{opacity:1}
  .sq.q1{width:130px;border-color:transparent}.sq.q2{width:0;opacity:0;border-color:transparent}
  .d-search-ans.a1{opacity:1}.d-search-ans.a2{opacity:0}.d-sr{opacity:1}
  .d-adm-done{opacity:1}
  .t-corp{width:27ch;color:#6c6c64;border-color:transparent;text-decoration-color:#6c6c64}
  .t-you{width:26ch;border-color:transparent}.tw-x,.tw-ok{opacity:1}
  .rev-roll{transform:translateY(-11px)}.d-rev-th{opacity:1}
  .d-book-sms,.d-pay-rcpt,.d-serp-up{opacity:1}
  .pay-roll{transform:translateY(-22px)}.pl1{opacity:0}.pl2{opacity:1}
  .d-login-mem{opacity:1}
  .tst .w{opacity:0}.tst .d{opacity:1}
  .eb1{opacity:0}.eb2{opacity:1}.es-old{opacity:0}.es-new{opacity:1}.es-live{opacity:1}
  .d-vid-t::after{content:"00:14"}
  .d-check{background:color-mix(in srgb,var(--ca) 28%,transparent);border-color:var(--ca)}.d-check::after{opacity:1}.d-task>span{color:#cfcfc6}
  .d-tw{width:25ch;border-color:transparent}
  .d-roll{transform:translateY(-56px)}
  .rs-fill{width:100%}.d-rev-new{opacity:0}
  .d-bars i{transform:scaleY(1)}.d-trend polyline{stroke-dashoffset:0}
  .et1{opacity:0}.et2{opacity:1}.d-edit-ok{opacity:1}
}
@media(max-width:980px){.caps-bento{margin-top:30px}.caps-bento::before{display:none}.cb-flow{display:none}.cb-group{grid-template-columns:repeat(2,1fr)}
  .cbx.open{flex-direction:column}.cbx.open .cbx-stage{flex:none;border-right:none;border-bottom:1px solid rgba(244,243,238,.07);min-height:230px}.cbx.open .cbx-stage>div{transform:scale(1.3)}.cbx.open .cbx-cap{padding:22px}}
@media(max-width:560px){.cb-group{grid-template-columns:1fr}.cbx.open .cbx-stage{min-height:200px}.cbx.open .cbx-stage>div{transform:scale(1.15)}}

/* ===== SWITCHBOARD (desktop ≥981px) — slim index rows on the spine + ONE shared
   demo stage. The 12 hand-built .cbx-stage demos are untouched; they simply land
   inside the bay, ~2× bigger. Mobile/tablet keep the card accordion above. ===== */
.caps-stagebay,.caps-comet{display:none}
@media(min-width:981px){
  .caps-bento{display:grid;grid-template-columns:378px 1fr;column-gap:46px;align-items:start}
  .caps-bento>.cb-domain,.caps-bento>.cb-group{grid-column:1}
  .cb-domain{margin-top:16px}
  .cb-group{display:block;margin:10px 0 14px;position:static}
  .cb-flow{display:none}

  /* rows — the switchboard index */
  .cbx{position:static;display:flex;overflow:visible;border:none;background:transparent;box-shadow:none;grid-column:auto}
  .cbx::before,.cbx::after{display:none}
  .cbx:hover{transform:none;box-shadow:none}
  .cbx.open{grid-column:auto;flex-direction:row;cursor:pointer}
  .cbx .cbx-cap,.cbx.open .cbx-cap{flex:1;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;
    padding:9px 12px 9px 34px;min-height:0;border-radius:10px;position:relative;transition:background .25s var(--ease)}
  .cbx-cap::after,.cbx.open .cbx-cap::after{display:none;content:none}
  .cbx-cap::before{content:"";position:absolute;left:11px;top:50%;width:5px;height:5px;border-radius:50%;
    background:rgba(244,243,238,.22);transform:translateY(-50%);transition:background .25s var(--ease),box-shadow .25s var(--ease)}
  .cbx .cbx-ic,.cbx.open .cbx-ic{width:28px;height:28px;border-radius:8px;flex:none;background:rgba(255,255,255,.03);border-color:rgba(244,243,238,.1)}
  .cbx .cbx-ic svg,.cbx.open .cbx-ic svg{width:14px;height:14px}
  .cbx .cbx-tx,.cbx.open .cbx-tx{flex-direction:row;align-items:center;gap:0}
  .cbx .cbx-tx b,.cbx.open .cbx-tx b{font-size:14.5px;letter-spacing:0;color:#c6c6bc;white-space:nowrap;transition:color .25s var(--ease)}
  .cbx .cbx-tx span,.cbx.open .cbx-tx span{display:none}
  .cbx.open .cbx-tx::after{content:none}   /* old open-card footnote — the bay caption replaces it */
  .cbx:hover .cbx-cap{background:rgba(255,255,255,.035)}
  .cbx:hover .cbx-tx b{color:var(--paper)}
  .cbx.open .cbx-cap{background:rgba(198,242,78,.07)}
  .cbx.open .cbx-tx b{color:var(--paper)}
  .cbx.open .cbx-ic{color:var(--lime);background:rgba(198,242,78,.12);border-color:rgba(198,242,78,.35)}
  .cbx.open .cbx-cap::before{opacity:0}   /* the comet lands here — it IS the active node */
  /* accent rationing: inactive rows go quiet so the active row + comet own the lime */
  .cbx .cbx-ic{opacity:.5;filter:saturate(.35);transition:opacity .25s var(--ease),filter .25s var(--ease)}
  .cbx:hover .cbx-ic{opacity:.85;filter:saturate(.7)}
  .cbx.open .cbx-ic{opacity:1;filter:none}

  /* comet — rides the spine to the active row */
  .caps-comet{display:block;position:absolute;left:13px;top:24px;width:7px;height:7px;margin-left:-3px;border-radius:50%;
    background:var(--lime);box-shadow:0 0 12px 2px rgba(198,242,78,.55);z-index:2;pointer-events:none;
    transition:top .55s cubic-bezier(.3,1.4,.4,1);opacity:0}
  .caps-bento:has(.cbx.open) .caps-comet{opacity:1}

  /* the stage bay */
  .caps-stagebay{display:flex;flex-direction:column;grid-column:2;grid-row:1/7;align-self:stretch;min-height:480px;
    border:1px solid rgba(244,243,238,.09);border-radius:18px;overflow:hidden;position:relative;
    background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012));
    box-shadow:0 44px 90px -44px rgba(0,0,0,.85)}
  .csb-chrome{display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;flex:none;position:relative;
    border-bottom:1px solid rgba(244,243,238,.07);background:rgba(10,10,13,.6)}
  /* auto-tour progress — fills across the chrome until the next capability.
     (i.csb-prog specificity: must beat the generic `.csb-chrome i` dot rule) */
  .csb-chrome i.csb-prog{position:absolute;left:0;bottom:-1px;height:2px;width:100%;margin:0;border-radius:0;
    transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,rgba(198,242,78,.85),rgba(198,242,78,.25));opacity:0}
  .caps-stagebay.touring .csb-chrome i.csb-prog{opacity:1;animation:csbProg 4.2s linear infinite}
  @keyframes csbProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  /* test-bench backdrop: fine dot lattice + a centre glow so the canvas reads
     designed, not empty */
  .caps-stagebay::before{content:"";position:absolute;inset:92px 0 0 0;pointer-events:none;
    background:
      radial-gradient(52% 44% at 50% 46%, rgba(198,242,78,.055), transparent 72%),
      radial-gradient(rgba(244,243,238,.05) 1px, transparent 1.3px);
    background-size:auto,26px 26px;background-position:center,center}
  .csb-chrome i:not(.csb-prog){width:8px;height:8px;border-radius:50%;background:rgba(244,243,238,.16)}
  .csb-chrome i:first-child{background:rgba(198,242,78,.55)}
  .csb-url{margin-left:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:rgba(244,243,238,.4)}
  .csb-live{margin-left:auto;display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--lime)}
  .csb-live i{width:6px;height:6px;border-radius:50%;background:var(--lime);animation:hxDot 2.6s ease-in-out infinite}
  .csb-caption{display:flex;align-items:baseline;gap:12px;padding:13px 20px;flex:none;
    border-bottom:1px solid rgba(244,243,238,.07);background:rgba(10,10,13,.45)}
  .csb-caption b{font-family:'Clash Display';font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--paper);white-space:nowrap}
  .csb-caption span{font-size:13px;color:#a9a99f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .csb-count{margin-left:auto;flex:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:rgba(244,243,238,.45)}

  /* land the active demo inside the bay (positioned against .caps-bento) */
  .cbx.open .cbx-stage{display:flex;position:absolute;left:calc(378px + 46px + 1px);right:1px;top:92px;bottom:18%;height:auto;
    flex:none;min-height:0;border:none;background:transparent;align-items:center;justify-content:center;z-index:2;
    animation:swStageIn .45s var(--ease) both}
  @keyframes swStageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .cbx.open .cbx-stage>div{transform:scale(2.15);transform-origin:center}
}

/* ===== POCKET SWITCHBOARD v2 (phones ≤640px) — demo-at-your-thumb: slim grouped
   rows on the spine; tapping a row expands its demo INLINE, directly beneath the
   row (no shared top bay on phones — tapping deep and playing the demo far away
   was disorienting). Row expands to show its one-liner + a framed mini-stage.
   Tablet (641–980px) keeps the old card accordion. ===== */
@media(max-width:640px){
  .caps-bento{display:flex;flex-direction:column}
  .caps-stagebay,.caps-comet{display:none}

  /* spine along the rows */
  .caps-bento::before{display:block;left:13px;top:14px;bottom:24px}

  /* rows — slim switchboard index */
  .cbx,.cbx.open{position:relative;display:flex;flex-direction:column;overflow:visible;border:none;background:none;
    box-shadow:none;border-radius:10px;cursor:pointer}
  .cbx::before,.cbx::after{display:none}
  .cbx:hover{transform:none;box-shadow:none}
  .cbx .cbx-cap,.cbx.open .cbx-cap{flex:none;order:-1;flex-direction:row;align-items:center;justify-content:flex-start;gap:11px;
    padding:8px 10px 8px 32px;min-height:0;border-radius:10px;position:relative;transition:background .25s var(--ease)}
  /* stage markup precedes the cap — order flips it so the demo expands BELOW the tapped row */
  .cbx-cap::after,.cbx.open .cbx-cap::after{display:none;content:none}
  .cbx-cap::before{content:"";position:absolute;left:10px;top:19px;width:5px;height:5px;border-radius:50%;
    background:rgba(244,243,238,.22);transform:none;transition:background .25s var(--ease),box-shadow .25s var(--ease)}
  .cbx .cbx-ic,.cbx.open .cbx-ic{width:26px;height:26px;border-radius:7px;flex:none;background:rgba(255,255,255,.03);
    border-color:rgba(244,243,238,.1);opacity:.55;filter:saturate(.35);transition:opacity .25s var(--ease),filter .25s var(--ease)}
  .cbx .cbx-ic svg,.cbx.open .cbx-ic svg{width:13px;height:13px}
  .cbx .cbx-tx,.cbx.open .cbx-tx{flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
  .cbx .cbx-tx b,.cbx.open .cbx-tx b{font-size:13.5px;letter-spacing:0;color:#c6c6bc;white-space:nowrap;transition:color .25s var(--ease)}
  .cbx .cbx-tx span{display:none}
  .cbx.open .cbx-tx span{display:block;font-size:11.5px;line-height:1.45;color:#a9a99f;white-space:normal}
  .cbx.open .cbx-tx::after{content:none}
  .cbx.open .cbx-cap{background:rgba(198,242,78,.07)}
  .cbx.open .cbx-tx b{color:var(--paper)}
  .cbx.open .cbx-ic{color:var(--lime);background:rgba(198,242,78,.12);border-color:rgba(198,242,78,.35);opacity:1;filter:none}
  .cbx.open .cbx-cap::before{background:var(--lime);box-shadow:0 0 9px rgba(198,242,78,.95)}

  /* compact domain headers */
  .cb-domain{margin-top:14px}
  .cb-domain h3{font-size:15px}
  .cbd-node{width:28px;height:28px}
  .cbd-no{font-size:11px}
  .cb-group{display:block;margin:8px 0 10px;position:static}

  /* the inline mini-stage — expands right under the tapped row */
  .cbx.open .cbx-stage{display:flex;position:static;height:236px;margin:8px 0 10px 32px;flex:none;min-height:0;
    align-items:center;justify-content:center;overflow:hidden;z-index:1;
    border:1px solid rgba(244,243,238,.09);border-radius:14px;
    background:
      radial-gradient(60% 52% at 50% 46%, rgba(198,242,78,.05), transparent 72%),
      radial-gradient(rgba(244,243,238,.05) 1px, transparent 1.3px),
      linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012));
    background-size:auto,22px 22px,auto;background-position:center;
    box-shadow:0 24px 50px -28px rgba(0,0,0,.85);
    animation:swStageIn .4s var(--ease) both}
  .cbx.open .cbx-stage>div{transform:scale(1.12);transform-origin:center}
}
/* alert (DSE) */
.alert{display:flex;gap:16px;align-items:flex-start;margin-bottom:28px;padding:18px 20px;border-radius:14px;
  background:linear-gradient(120deg,rgba(232,70,58,.14),rgba(232,70,58,.05));
  border:1px solid rgba(232,70,58,.42);
  box-shadow:0 0 44px -16px rgba(232,70,58,.6),inset 0 0 0 1px rgba(232,70,58,.08)}
.alert-glyph{flex:none;width:34px;height:34px;border-radius:9px;background:#e8463a;color:#1a0807;
  display:grid;place-items:center;font-family:'Clash Display';font-weight:700;font-size:21px;line-height:1;
  box-shadow:0 0 22px -2px rgba(232,70,58,.85);animation:warn 1.8s var(--ease) infinite}
@keyframes warn{0%,100%{box-shadow:0 0 22px -2px rgba(232,70,58,.85)}50%{box-shadow:0 0 34px 2px rgba(232,70,58,1)}}
.alert-eyebrow{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#ff7a70;font-weight:600;margin-bottom:5px}
.alert-txt p{font-size:15px;line-height:1.55;color:#f0d6d3}
.alert-txt p b{color:#fff;font-weight:600}

/* foot */
.case-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-top:26px;border-top:1px solid var(--line)}
.m-val{font-family:'Clash Display';font-weight:600;font-size:clamp(26px,2.6vw,34px);line-height:1;color:var(--acc);letter-spacing:-.02em}
.m-lbl{font-size:13px;color:var(--muted);letter-spacing:.01em}

/* hl band hint */
.case.hl{background:linear-gradient(180deg,transparent,rgba(232,70,58,.03),transparent)}

/* ---- closing CTA --------------------------------------------------------- */
.closing{position:relative;padding:150px 0 110px;overflow:hidden;text-align:center}
.closing-glow{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);width:880px;height:560px;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(198,242,78,.08) 0%,transparent 62%)}
.closing .container{position:relative;z-index:2}
.closing .sec-eyebrow{justify-content:center}
.closing .sec-eyebrow::after{content:"";width:34px;height:1px;background:var(--lime)}
.closing h2{font-family:'Clash Display';font-weight:600;font-size:clamp(46px,8vw,108px);line-height:.96;letter-spacing:-.035em;margin-bottom:26px}
.closing h2 .lime{color:var(--lime);text-shadow:0 0 22px rgba(198,242,78,.28)}
.closing p{max-width:560px;margin:0 auto 42px;color:#bdbdb4;font-size:19px;line-height:1.6}
/* testimonials */
.quotes{padding:60px 0}
/* contact — refined glass panel + stat rail (concept C) */
.cxC-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;text-align:left;margin-top:20px}
.ca-pulse{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 11px 1px rgba(198,242,78,.85);animation:pulse 2s var(--ease) infinite;flex:none}
.cxC-lead .sec-eyebrow{justify-content:flex-start}
.cxC-lead .sec-eyebrow::after{display:none}
.closing .cxC-h{font-family:'Clash Display';font-weight:600;font-size:clamp(40px,5.2vw,76px);line-height:.95;letter-spacing:-.035em;margin:0 0 24px}
.cxC-h .lime{color:var(--lime);text-shadow:0 0 26px rgba(198,242,78,.28)}
.closing .cxC-p{max-width:440px;color:#bdbdb4;font-size:17px;line-height:1.62;margin:0 0 28px}
.cxC-avail{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--muted)}
.cxC-avail b{color:var(--paper);font-weight:600}
.cxC-stat{display:flex;gap:40px;margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}
.cxC-stat > div{display:flex;flex-direction:column;gap:5px}
.cxC-stat b{font-family:'Clash Display';font-weight:600;font-size:clamp(26px,2.6vw,32px);color:var(--paper);letter-spacing:-.02em;line-height:1}
.cxC-stat span{font-size:12px;color:var(--muted);font-family:var(--mono);letter-spacing:.02em}
/* ===== THE AUDIT CONSOLE — the contact panel reframed as an instrument that
   shows the work: a console header, a live security-scan preview, a brief-signal
   meter, and a transmit→received sequence. Engineering on display. ===== */
.cxC-panel{position:relative;overflow:hidden;border-radius:22px;border:1px solid color-mix(in srgb,var(--lime) 26%,var(--line));
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  box-shadow:0 50px 130px -50px rgba(0,0,0,.92),0 0 84px -28px rgba(198,242,78,.42),inset 0 1px 0 rgba(255,255,255,.08)}
/* console header bar */
.auc-bar{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(0,0,0,.32),rgba(0,0,0,.12));position:relative;z-index:3}
.auc-dots{display:inline-flex;gap:7px;flex:none}
.auc-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.08)}
.auc-dots i:first-child{background:color-mix(in srgb,var(--lime) 75%,transparent);border-color:transparent;box-shadow:0 0 8px -1px rgba(198,242,78,.7)}
.auc-path{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:#8a8a80;margin-right:auto}
.auc-conn{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.auc-conn .ca-pulse{width:7px;height:7px}
/* travelling scan line — ambient "scanning" pulse across the device */
.auc-scanline{position:absolute;left:0;right:0;top:0;height:140px;z-index:1;pointer-events:none;opacity:.5;
  background:linear-gradient(180deg,color-mix(in srgb,var(--lime) 8%,transparent),transparent 70%);
  -webkit-mask:linear-gradient(180deg,#000,transparent);mask:linear-gradient(180deg,#000,transparent);
  animation:aucScanline 7s var(--ease) infinite}
@keyframes aucScanline{0%{transform:translateY(-140px)}60%,100%{transform:translateY(560px)}}
.auc-body{position:relative;z-index:2;padding:24px 28px 28px}
/* form header */
.cxC-phead{margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.cxC-phead-eb{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lime);margin-bottom:12px}
.cxC-phead h3{font-family:'Clash Display';font-weight:600;font-size:24px;letter-spacing:-.02em;color:var(--paper);line-height:1.05;margin:0 0 8px}
.cxC-phead p{font-size:13.5px;color:#aeaea6;line-height:1.5;margin:0}
.cxC-form{display:flex;flex-direction:column;gap:16px}
.cxC-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end}
.gfield{display:flex;flex-direction:column;gap:8px;min-width:0}
.gfield label{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#cfcfc6}
.gf-ix{font-size:10px;font-weight:600;color:color-mix(in srgb,var(--lime) 60%,#7c7c74);letter-spacing:.06em}
.gfield:focus-within label{color:var(--paper)}
.gfield:focus-within .gf-ix{color:var(--lime)}
.gfield label .opt{color:#7c7c74;text-transform:none;letter-spacing:0;font-weight:400}
.gfield input,.gfield textarea{width:100%;background:rgba(255,255,255,.045);border:1px solid color-mix(in srgb,var(--paper) 14%,var(--line));border-radius:12px;
  padding:15px 16px;color:var(--paper);font-family:'General Sans';font-size:15.5px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
.gfield input::placeholder,.gfield textarea::placeholder{color:#86867d}
.gfield input:focus,.gfield textarea:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(198,242,78,.16);background:rgba(255,255,255,.07)}
.gfield textarea{resize:vertical;min-height:104px;line-height:1.5}
.pv-submit{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--lime);color:var(--ink);
  font-family:'General Sans';font-weight:600;font-size:16px;padding:15px 28px;border-radius:13px;border:none;cursor:pointer;
  box-shadow:0 18px 50px -18px rgba(198,242,78,.6);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pv-submit:hover{transform:translateY(-2px);box-shadow:0 26px 64px -16px rgba(198,242,78,.85)}
.pv-submit i{font-style:normal;font-size:19px;transition:transform .35s var(--ease)}
.pv-submit:hover i{transform:translateX(5px)}
.cxC-submit{width:100%;margin-top:8px;padding:17px 28px;font-size:16.5px}
.closing .cf-fine{margin:6px auto 0;max-width:none;text-align:center;color:var(--muted);font-size:12px;line-height:1.5}
/* security-scan consent — the free-audit opt-in */
.cf-consent{display:flex;align-items:flex-start;gap:11px;cursor:pointer;margin-top:2px;
  font-size:13.5px;line-height:1.5;color:#bdbdb4;-webkit-tap-highlight-color:transparent}
.cf-consent input{position:absolute;opacity:0;width:0;height:0}
.cf-check{flex:none;width:20px;height:20px;border-radius:6px;margin-top:1px;position:relative;
  border:1px solid color-mix(in srgb,var(--lime) 38%,var(--line));background:rgba(0,0,0,.25);
  transition:background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.cf-check::after{content:"";position:absolute;left:6px;top:2.5px;width:5px;height:9px;
  border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .25s var(--ease-2)}
.cf-consent input:checked + .cf-check{background:var(--lime);border-color:var(--lime)}
.cf-consent input:checked + .cf-check::after{transform:rotate(45deg) scale(1)}
.cf-consent input:focus-visible + .cf-check{box-shadow:0 0 0 3px rgba(198,242,78,.2)}
.cf-consent-txt b{color:var(--paper);font-weight:600}
/* scan consent reframed as a togglable module that arms the live preview */
.auc-scanrow{border:1px solid color-mix(in srgb,var(--lime) 16%,var(--line));border-radius:12px;
  padding:13px 15px;background:color-mix(in srgb,var(--lime) 4%,transparent);margin-top:2px;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.auc-scanrow.is-on{border-color:color-mix(in srgb,var(--lime) 40%,var(--line));background:color-mix(in srgb,var(--lime) 8%,transparent)}
/* live security-scan preview terminal */
.auc-term{max-height:0;opacity:0;overflow:hidden;margin-top:-16px;
  transition:max-height .5s var(--ease),opacity .4s var(--ease),margin .5s var(--ease)}
.auc-term.is-on{max-height:320px;opacity:1;margin-top:0}
.auc-term-out{background:#06070a;border:1px solid color-mix(in srgb,var(--lime) 18%,var(--line));border-radius:12px;
  padding:14px 16px;font-family:var(--mono);font-size:12px;line-height:1.2;color:#b9c2ad;
  box-shadow:inset 0 0 40px -20px rgba(198,242,78,.4)}
.auc-tl{display:flex;align-items:center;gap:8px;padding:3px 0;opacity:0;transform:translateY(3px);
  animation:aucTl .34s var(--ease) forwards}
@keyframes aucTl{to{opacity:1;transform:none}}
.auc-tl .tp{color:color-mix(in srgb,var(--lime) 80%,#fff);flex:none}
.auc-tl-cmd{color:#dfe6d2;margin-bottom:4px}
.auc-tl-cmd b{color:var(--lime);font-weight:500}
.auc-tl .tk{color:#9aa091}
.auc-tl .td{flex:1;border-bottom:1px dotted rgba(255,255,255,.14);margin:0 2px;align-self:flex-end;margin-bottom:4px}
.auc-tl .tv{flex:none;font-size:11px;letter-spacing:.04em}
.auc-tl .tv-q{color:#e0c878}
.auc-tl-ok{color:color-mix(in srgb,var(--lime) 75%,#cfcfc6);margin-top:6px;font-size:11.5px}
/* foot: brief-signal meter + submit */
.auc-foot{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.auc-signal{display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.auc-bars{display:inline-flex;gap:4px}
.auc-bars i{width:26px;height:4px;border-radius:2px;background:rgba(255,255,255,.1);transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.auc-bars i.on{background:var(--lime);box-shadow:0 0 9px -1px rgba(198,242,78,.8)}
.auc-signal-pct{margin-left:auto;color:var(--lime);font-weight:600}
.cxC-submit{width:100%;margin:0;padding:17px 28px;font-size:16.5px}
.auc-submit{position:relative;overflow:hidden}
.auc-submit.is-sending{pointer-events:none}
.auc-submit.is-sending .auc-sb-txt::after{content:"";display:inline-block;width:1ch;animation:aucDots 1.1s steps(4,end) infinite;text-align:left}
@keyframes aucDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.auc-submit.is-sending i{opacity:0}
/* received overlay */
.auc-done{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;
  padding:40px;background:linear-gradient(180deg,rgba(8,9,7,.94),rgba(8,9,7,.985));
  opacity:0;transition:opacity .5s var(--ease)}
.auc-done.show{opacity:1}
.auc-done[hidden]{display:none}
.auc-done-ic{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:var(--lime);
  box-shadow:0 0 0 8px color-mix(in srgb,var(--lime) 14%,transparent),0 18px 46px -14px rgba(198,242,78,.7);
  animation:aucPop .55s var(--ease-2) both}
.auc-done-ic svg{width:28px;height:28px}
@keyframes aucPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.auc-done b{font-family:'Clash Display';font-weight:600;font-size:26px;letter-spacing:-.02em;color:var(--paper)}
.auc-done span{color:#b6b6ad;font-size:15px;max-width:30ch}
.cf-fine.auc-err{color:#e8a0a0}
@media(prefers-reduced-motion:reduce){.auc-scanline{display:none}.auc-tl{animation-duration:.01s}}
@media(max-width:900px){
  .auc-body{padding:22px 20px 24px}
  .cxC-grid{grid-template-columns:1fr;gap:38px;text-align:left}
  .closing{padding:52px 0 90px}
  .closing .cxC-h{font-size:clamp(40px,9vw,58px)}
  .cxC-row{grid-template-columns:1fr}
  .cxC-stat{gap:26px}}

/* ===== under the hood — code window + case tech stacks ==================== */
.engine{padding:40px 0 36px}
.engine-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.engine-pts{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:26px}
.engine-pts li{position:relative;padding-left:24px;font-family:var(--mono);font-size:13px;color:#cfcfc6;letter-spacing:.01em}
.engine-pts li::before{content:"›";position:absolute;left:3px;top:-1px;color:var(--lime);font-weight:700;font-size:15px}
/* languages/tools chips — shows breadth beyond the one TS example on screen */
.engine-stack{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.engine-stack .lang{display:inline-flex;align-items:center;gap:8px;font-family:'General Sans';font-size:13px;font-weight:500;letter-spacing:0;
  color:#cfcfc6;cursor:pointer;border:1px solid var(--line);border-radius:11px;padding:7px 13px 7px 8px;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012));-webkit-tap-highlight-color:transparent;
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease),transform .2s var(--ease),box-shadow .25s var(--ease)}
.engine-stack .lang-logo{width:19px;height:19px;flex:none;display:grid;place-items:center;border-radius:5px;overflow:hidden;
  filter:grayscale(.35) opacity(.85);transition:filter .25s var(--ease)}
.engine-stack .lang-logo svg{width:19px;height:19px;display:block}
.engine-stack .lang:hover{border-color:color-mix(in srgb,var(--lime) 38%,var(--line));color:var(--paper);transform:translateY(-1px);
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.engine-stack .lang:hover .lang-logo,.engine-stack .lang.is-on .lang-logo{filter:none}
.engine-stack .lang.is-on{color:var(--paper);font-weight:600;border-color:color-mix(in srgb,var(--lime) 50%,var(--line));
  background:linear-gradient(160deg,rgba(198,242,78,.13),rgba(198,242,78,.02));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--lime) 28%,transparent) inset,0 10px 26px -16px rgba(198,242,78,.65)}
.code-win{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#0c0c11;
  box-shadow:0 50px 120px -50px rgba(0,0,0,.92),0 0 90px -44px rgba(198,242,78,.32),inset 0 1px 0 rgba(255,255,255,.05)}
.code-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:#101016}
.code-bar i{width:11px;height:11px;border-radius:50%;background:rgba(244,243,238,.16);flex:none}
.code-bar i:first-child{background:rgba(198,242,78,.7)}
.code-file{margin-left:10px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.code-badge{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lime);border:1px solid color-mix(in srgb,var(--lime) 35%,var(--line));padding:3px 9px;border-radius:6px}
.code-body{margin:0;padding:22px 22px 24px;font-family:var(--mono);font-size:13.5px;line-height:1.72;color:#c8c8c0;overflow-x:auto;
  min-height:280px}   /* reserve space so typing / language-switch never shifts the terminal */
.code-body code{font-family:inherit;white-space:pre}
.c-com{color:#86867c;font-style:italic}
.c-kw{color:var(--lime)}
.c-str{color:#e0b486}
.c-ty{color:#9d8bff}
.c-fn{color:#f4f3ee}
.c-num{color:#cBA86a}
/* live typing caret */
.ccaret{display:inline-block;width:7px;height:1.04em;margin-left:1px;transform:translateY(2px);
  background:var(--lime);box-shadow:0 0 6px rgba(198,242,78,.7);vertical-align:baseline;
  animation:codeCaret 1.05s steps(1) infinite}
/* simulated run terminal */
.code-term{border-top:1px solid var(--line);background:#090910;padding:13px 18px 16px;
  font-family:var(--mono);font-size:12.5px;min-height:80px}
.ct-cmd{display:flex;align-items:center;gap:10px;color:#8f8f86;margin-bottom:9px}
.ct-run{flex:none;color:var(--lime);font-weight:600;font-size:10.5px;letter-spacing:.04em;
  border:1px solid color-mix(in srgb,var(--lime) 34%,var(--line));border-radius:6px;padding:2px 8px}
.ct-out{display:flex;flex-direction:column;gap:3px;color:#cfcfc6;white-space:pre;line-height:1.5;overflow-x:auto}
.ct-line{opacity:0;transform:translateY(3px);animation:ctIn .32s var(--ease) forwards}
@keyframes ctIn{to{opacity:1;transform:none}}
@media(max-width:900px){
  .engine-grid{grid-template-columns:1fr;gap:34px}
  .code-body{font-size:11.5px;line-height:1.7;min-height:230px}}

/* ===== process — scroll-driven build animation ========================== */
.build{padding:76px 0 52px}
.build-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:48px;align-items:start;margin-top:30px}
.build-viz{position:sticky;top:24vh}
.bld{width:100%;height:auto;display:block;overflow:visible}
.bglow{opacity:0;filter:blur(46px);transition:opacity .8s var(--ease)}
.bld.s4 .bglow{opacity:.18}
.bld.s3 .bglow{opacity:.08}
/* persistent browser window — morphs between steps */
.frame{transform-box:view-box;transform-origin:270px 206px;transition:transform .7s var(--ease-2)}
.bld.s3 .frame{transform:scale(.4)}
.frame-out{transition:stroke .5s var(--ease)}
.bld.s4 .frame-out{stroke:rgba(198,242,78,.45)}
/* content layers swap inside the frame */
.fc{opacity:0;transition:opacity .5s var(--ease)}
.bld.s1 .fc-audit{opacity:1}
.bld.s2 .fc-build,.bld.s3 .fc-build{opacity:1}
.bld.s4 .fc-live{opacity:1}
.s2only{opacity:0;transition:opacity .4s var(--ease)}
.bld.s2 .s2only{opacity:1}
/* extras */
.ex{opacity:0;transition:opacity .5s var(--ease)}
.bld.s1 .ex-audit{opacity:1}
.bld.s3 .ex-expand{opacity:1}
/* draw + pop, revealed per active stage */
.bld [data-draw]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s var(--ease)}
.bld [data-pop]{opacity:0;transform:scale(.92);transform-box:fill-box;transform-origin:center;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.bld.s1 .fc-audit [data-pop],.bld.s1 .ex-audit [data-pop]{opacity:1;transform:none}
.bld.s1 .ex-audit [data-draw]{stroke-dashoffset:0}
.bld.s2 .fc-build [data-pop],.bld.s3 .fc-build [data-pop]{opacity:1;transform:none}
.bld.s2 .fc-build [data-draw]{stroke-dashoffset:0}
.bld.s3 .ex-expand [data-pop]{opacity:1;transform:none}
.bld.s3 .ex-expand [data-draw]{stroke-dashoffset:0}
.bld.s4 .fc-live [data-pop]{opacity:1;transform:none}
.bld.s4 .fc-live [data-draw]{stroke-dashoffset:0}
/* continuous micro-motion (independent of scroll) */
.live-dot{animation:pulse 2s var(--ease) infinite}
.sweep-node{animation:pulse 1.7s var(--ease) infinite}
.flow-dot{animation:flowpulse 2.4s var(--ease) infinite}
.flow-dot.fd2{animation-delay:.5s}.flow-dot.fd3{animation-delay:1s}.flow-dot.fd4{animation-delay:1.5s}
.mag-breathe{animation:magfloat 4.5s var(--ease) infinite;transform-box:fill-box;transform-origin:center}
@keyframes flowpulse{0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.18)}}
@keyframes magfloat{0%,100%{transform:translate(0,0)}50%{transform:translate(-5px,-4px)}}
/* audit: scanning magnifier sweeps the markers, each verdict lights up in turn */
.mk{transform-box:fill-box;transform-origin:center}
.mk1{animation:mk1p 14s var(--ease) infinite}
.mk2{animation:mk2p 14s var(--ease) infinite}
.mk3{animation:mk3p 14s var(--ease) infinite}
.mk4{animation:mk4p 14s var(--ease) infinite}
.mag-scan{animation:auditScan 14s var(--ease) infinite}
@keyframes auditScan{
  0%,15%{transform:translate(0,0)}
  25%,40%{transform:translate(142px,10px)}
  50%,65%{transform:translate(20px,76px)}
  75%,90%{transform:translate(160px,76px)}
  100%{transform:translate(0,0)}
}
@keyframes mk1p{0%,15%{opacity:1;transform:scale(1.18)}22%,95%,100%{opacity:.2;transform:scale(.82)}}
@keyframes mk2p{0%,20%{opacity:.2;transform:scale(.82)}25%,40%{opacity:1;transform:scale(1.18)}47%,100%{opacity:.2;transform:scale(.82)}}
@keyframes mk3p{0%,45%{opacity:.2;transform:scale(.82)}50%,65%{opacity:1;transform:scale(1.18)}72%,100%{opacity:.2;transform:scale(.82)}}
@keyframes mk4p{0%,70%{opacity:.2;transform:scale(.82)}75%,90%{opacity:1;transform:scale(1.18)}97%,100%{opacity:.2;transform:scale(.82)}}
/* rebuild: drag-to-reveal slider wipes old → new */
.wipe-rect{animation:wipe 7s var(--ease) infinite;animation-play-state:paused}
.wipe-divider{animation:wipe 7s var(--ease) infinite;animation-play-state:paused}
.bld.s2 .wipe-rect,.bld.s2 .wipe-divider{animation-play-state:running}
.wipe-knob{filter:drop-shadow(0 0 5px rgba(198,242,78,.55))}
@keyframes wipe{
  0%,12%{transform:translateX(266px)}
  50%,62%{transform:translateX(6px)}
  100%{transform:translateX(266px)}
}
/* expand: live data packets flow along the spokes + an A→B integration arc */
.pkt{offset-rotate:auto}
.pkt circle{filter:drop-shadow(0 0 2.5px rgba(198,242,78,.9))}
.pr1,.pr2,.pr3{offset-path:path('M270 50 A156 156 0 0 1 270 362 A156 156 0 0 1 270 50');animation:ringflow 6.6s linear infinite}
.pr2{animation-delay:-2.2s}
.pr3{animation-delay:-4.4s}
@keyframes ringflow{from{offset-distance:0%}to{offset-distance:100%}}
/* modules shimmer in sequence around the ring */
.mg{opacity:0;transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 5px rgba(198,242,78,.7))}
.mg2{animation:modglow 2.2s ease-in-out infinite}
.mg4{animation:modglow 2.2s ease-in-out infinite;animation-delay:-.55s}
.mg3{animation:modglow 2.2s ease-in-out infinite;animation-delay:-1.1s}
.mg1{animation:modglow 2.2s ease-in-out infinite;animation-delay:-1.65s}
@keyframes modglow{0%,72%,100%{opacity:0;transform:scale(.99)}14%{opacity:.7;transform:scale(1.03)}}
.hub-ring{transform-box:fill-box;transform-origin:center;animation:ripple 3s ease-out infinite}
.hr2{animation-delay:1.5s}
@keyframes ripple{0%{transform:scale(.7);opacity:.55}100%{transform:scale(2.5);opacity:0}}
/* live dashboard: pulsing latest data point */
.live-ring{transform-box:fill-box;transform-origin:center;animation:liveRing 2.4s ease-out infinite}
.lr2{animation-delay:1.2s}
@keyframes liveRing{0%{transform:scale(.5);opacity:.7}100%{transform:scale(3.4);opacity:0}}
.live-end{transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 4px rgba(198,242,78,.9));animation:pulse 2s var(--ease) infinite}
/* live dashboard: bars grow on arrival */
.bar{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0)}
.bld.s4 .bars .bar{animation:barGrow .5s var(--ease) forwards}
.bld.s4 .bars .bar:nth-child(1){animation-delay:.04s}
.bld.s4 .bars .bar:nth-child(2){animation-delay:.1s}
.bld.s4 .bars .bar:nth-child(3){animation-delay:.16s}
.bld.s4 .bars .bar:nth-child(4){animation-delay:.22s}
.bld.s4 .bars .bar:nth-child(5){animation-delay:.28s}
.bld.s4 .bars .bar:nth-child(6){animation-delay:.34s}
.bld.s4 .bars .bar:nth-child(7){animation-delay:.4s}
@keyframes barGrow{to{transform:scaleY(1)}}
.barlast{filter:drop-shadow(0 0 4px rgba(198,242,78,.65))}
/* steps */
.build-steps{display:flex;flex-direction:column}
.bstep{min-height:42vh;display:flex;flex-direction:column;justify-content:center;padding:20px 0;opacity:.66;
  transition:opacity .5s var(--ease)}
.bstep:first-child{padding-top:0}
.bstep.active{opacity:1}
/* desktop: tighten the step rhythm — 42vh left long dead-scroll stretches where the
   sticky viz sat unchanged; 34vh keeps the midpoint-switch feel with less empty travel.
   Mobile forge keeps its own spacing. */
@media(min-width:901px){ .bstep{min-height:34vh} }
.bstep-top{display:flex;align-items:center;gap:15px;margin-bottom:16px}
.bstep-n{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-family:'Clash Display';font-weight:600;
  font-size:18px;color:var(--lime);background:rgba(198,242,78,.07);border:1px solid color-mix(in srgb,var(--lime) 32%,var(--line));
  transition:background .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease),transform .45s var(--ease)}
.bstep.active .bstep-n{background:var(--lime);color:var(--ink);box-shadow:0 0 26px -4px rgba(198,242,78,.85);transform:translateY(-1px)}
.bstep-day{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.bstep h3{font-family:'Clash Display';font-weight:600;font-size:clamp(24px,2.4vw,30px);letter-spacing:-.02em;line-height:1;margin-bottom:11px}
.bstep p{color:#bdbdb4;font-size:15px;line-height:1.6;max-width:460px;margin-bottom:15px}
.bchips{display:flex;gap:8px;flex-wrap:wrap}
.bchip{font-family:var(--mono);font-size:11.5px;color:#d0d0c8;border:1px solid var(--line);background:rgba(255,255,255,.03);padding:5px 11px;border-radius:7px;letter-spacing:.01em}
.bstep-glyph{display:none}
@media(max-width:900px){
  /* PROCESS on mobile: the desktop sticky viz drifted out of sync on a phone, so
     each step becomes its own glass card that ASSEMBLES as you scroll — the
     number lights up, its mini-diagram draws itself in, and the rail fills with
     scroll progress. Same "built as you scroll" idea, made reliable for touch. */
  .build{padding:36px 0 34px}
  .build-grid{grid-template-columns:1fr;gap:0;margin-top:18px}
  .build-viz{display:none}
  .build-steps{position:relative;--p:0}
  /* rail down the badge gutter (visible in the gaps) + lime fill driven by scroll;
     top/length are measured from the real badge centres in JS (--rail-top/--rail-len) */
  .build-steps::before,.build-steps::after{content:"";position:absolute;left:34px;top:var(--rail-top,40px);height:var(--rail-len,calc(100% - 80px));bottom:auto;width:2px;border-radius:2px;z-index:0}
  .build-steps::before{background:var(--line)}
  .build-steps::after{background:linear-gradient(180deg,var(--lime),color-mix(in srgb,var(--lime) 28%,transparent));
    transform-origin:top;transform:scaleY(var(--p));box-shadow:0 0 12px rgba(198,242,78,.45);transition:transform .22s linear}

  .bstep{position:relative;z-index:1;min-height:auto;justify-content:flex-start;
    margin:0 0 9px;padding:22px 20px 21px 64px;border-radius:18px;
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.014));border:1px solid var(--line);opacity:1;
    box-shadow:0 10px 28px -22px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.04);
    transition:opacity .55s var(--ease),transform .55s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease)}
  .bstep:last-child{margin-bottom:0}
  .bstep:first-child{padding-top:22px} /* override desktop's first-child padding-top:0 */
  .bstep.active{border-color:color-mix(in srgb,var(--lime) 34%,var(--line));
    box-shadow:0 18px 40px -24px rgba(0,0,0,.9),inset 0 0 0 1px color-mix(in srgb,var(--lime) 15%,transparent),inset 0 1px 0 rgba(255,255,255,.05)}

  .bstep-top{display:block;align-items:initial;gap:0;margin:0}
  .bstep-n{position:absolute;left:18px;top:21px;width:34px;height:34px;border-radius:11px;font-size:14.5px;flex:none;z-index:2;
    background:#0e0e13;color:var(--lime);box-shadow:none;transform:none;border:1px solid color-mix(in srgb,var(--lime) 32%,var(--line));
    transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
  .bstep.active .bstep-n{background:var(--lime);color:var(--ink);border-color:var(--lime)} /* halo owned by --boot below */
  .bstep .bstep-n.done{background:var(--lime);color:var(--ink);border-color:var(--lime)}
  .bstep-day{display:block;margin:0 0 9px;padding-right:52px;font-size:10.5px}
  .bstep h3{font-size:20px;line-height:1.12;margin:0 0 11px;padding:0 54px 0 0}
  .bstep p{display:block;font-size:14.5px;line-height:1.64;margin:0 0 17px;padding:0;max-width:none}
  .bchips{display:flex;flex-wrap:wrap;gap:8px;padding:0}
  .bchip{font-size:11px;padding:5px 11px}

  /* scroll-linked reveal: --t (0..1, set per card every scroll frame) eases the card
     up and in continuously with the scroll — not a one-shot fade. No opacity/transform
     transition here so it tracks the finger; the .active border/glow keeps its ease. */
  .build-steps.anim .bstep{opacity:calc(.5 + .5*var(--t,1));
    transform:translateY(calc((1 - var(--t,1)) * 22px));
    transition:border-color .45s var(--ease),box-shadow .45s var(--ease);will-change:opacity,transform}

  /* per-step mini diagram — draws + pops in proportion to scroll progress (--g) */
  .bstep-glyph{display:block;position:absolute;top:18px;right:18px;width:40px;height:40px;opacity:.95}
  .bstep-glyph svg{width:100%;height:100%;overflow:visible}
  .build-steps.anim .bstep-glyph [data-d]{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--g,1))}
  .build-steps.anim .bstep-glyph [data-p]{opacity:var(--g,1);transform:scale(calc(.5 + .5*var(--g,1)));transform-box:fill-box;transform-origin:center}

  /* ===== PINNED FORGE — sticky mini-device that morphs audit->rebuild->expansion->live,
     every frame scrubbed by global progress (mirrored into --te/--exp/--live by JS),
     synced to the same scroll position that drives the rail bar + comet. Pure SVG. ===== */
  .bstage{position:sticky;top:64px;z-index:5;height:clamp(182px,38vh,226px);
    margin:0 0 22px;border-radius:18px;overflow:hidden;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));border:1px solid var(--line);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 44px -28px #000}
  .bstage svg{width:100%;height:100%;display:block;overflow:visible}
  /* only the 2 relevant scenes ever paint (visibility:hidden skips paint on the rest) */
  .bstage svg .m-scene{opacity:0;visibility:hidden}
  /* each stage shows ITS OWN scene; only the last 28% of a step crossfades to the next (--mo) */
  .bstage svg[data-stage="0"] .m-audit{visibility:visible;opacity:calc(1 - var(--mo,0))}
  .bstage svg[data-stage="0"] .m-rebuild{visibility:visible;opacity:var(--mo,0)}
  .bstage svg[data-stage="1"] .m-rebuild{visibility:visible;opacity:calc(1 - var(--mo,0))}
  .bstage svg[data-stage="1"] .m-expand{visibility:visible;opacity:var(--mo,0)}
  .bstage svg[data-stage="2"] .m-expand{visibility:visible;opacity:calc(1 - var(--mo,0))}
  .bstage svg[data-stage="2"] .m-live{visibility:visible;opacity:var(--mo,0)}
  .bstage svg[data-stage="3"] .m-live{visibility:visible;opacity:1}
  .m-mag{transform-box:fill-box;transform-origin:center;
    transform:translate(calc(var(--te,0)*46px),calc(var(--te,0)*-28px)) scale(calc(1 - .42*var(--te,0)));opacity:calc(1 - var(--te,0))}
  .m-score-tint{color:#C6F24E;color:color-mix(in srgb,#C6F24E calc(var(--te,0)*100%),#ff5a5a)}
  text.m-score-tint{fill:#ff5a5a;fill:color-mix(in srgb,#C6F24E calc(var(--te,0)*100%),#ff5a5a)}
  .m-module{transform-box:fill-box;transform-origin:center;opacity:var(--exp,0);
    transform:translate(calc(160px + var(--mx)*var(--exp,0)),calc(113px + var(--my)*var(--exp,0))) scale(calc(.4 + .6*var(--exp,0)))}
  .m-expand [data-draw]{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--exp,0))}
  .m-ring{transform-box:fill-box;transform-origin:center;transform:scale(var(--exp,0));opacity:calc(var(--exp,0)*.9)}
  .m-bar{transform-box:fill-box;transform-origin:bottom;transform:scaleY(clamp(0,(var(--live,0) - .08*var(--bi,0))/.5,1))}
  .m-live [data-draw]{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--live,0))}
  .m-pulse{transform-box:fill-box;transform-origin:center;animation:mPulse 2.4s var(--ease) infinite}
  @keyframes mPulse{0%{transform:scale(.7);opacity:1}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}
  /* audit: a scanning beam sweeps the page being analysed */
  .m-scan{transform-box:fill-box;transform-origin:left;animation:mScan 2.8s var(--ease) infinite}
  @keyframes mScan{0%,100%{transform:translateX(0);opacity:0}10%{opacity:.85}48%{transform:translateX(256px);opacity:.85}56%{transform:translateX(256px);opacity:0}}
  /* rebuild: a glowing slider edge rides the before->after wipe boundary (--wipeW from JS) */
  .m-wipe-edge{opacity:0;transform:translateX(calc(var(--wipeW,0)*1px))}
  .bstage svg[data-stage="1"] .m-wipe-edge{opacity:calc(var(--le,0)*(1 - var(--le,0))*4)}
  .m-wipe-edge circle{filter:drop-shadow(0 0 4px rgba(198,242,78,.65))}
  /* expansion: a rotating system ring, a hub pulse, and data packets flowing the spokes */
  .m-ring-rot{transform-box:fill-box;transform-origin:center;opacity:calc(var(--exp,0)*.55);animation:mSpin 16s linear infinite}
  @keyframes mSpin{to{transform:rotate(360deg)}}
  .m-hub-pulse{transform-box:fill-box;transform-origin:center;opacity:var(--exp,0);animation:mPulse 2.4s var(--ease) infinite}
  .m-pk{transform-box:fill-box;transform-origin:center;opacity:0}
  .m-pk1{animation:mPk1 2.4s linear infinite}
  .m-pk2{animation:mPk2 2.4s linear infinite .6s}
  .m-pk3{animation:mPk3 2.4s linear infinite 1.2s}
  .m-pk4{animation:mPk4 2.4s linear infinite 1.8s}
  @keyframes mPk1{0%{transform:translate(0,0);opacity:0}14%{opacity:1}86%{opacity:1}100%{transform:translate(-74px,-43px);opacity:0}}
  @keyframes mPk2{0%{transform:translate(0,0);opacity:0}14%{opacity:1}86%{opacity:1}100%{transform:translate(74px,-43px);opacity:0}}
  @keyframes mPk3{0%{transform:translate(0,0);opacity:0}14%{opacity:1}86%{opacity:1}100%{transform:translate(-74px,45px);opacity:0}}
  @keyframes mPk4{0%{transform:translate(0,0);opacity:0}14%{opacity:1}86%{opacity:1}100%{transform:translate(74px,45px);opacity:0}}
  /* ===== IDLE ALIVENESS — continuous micro-motion so the device reads as a live
     instrument even when not scrolling. 2.4s heartbeat; all on NEW/decorative nodes
     or non-scrubbed props so the scroll-scrubbed morph is never overridden. ===== */
  /* audit: the lens actively reads; the score keeps recomputing; the defect pulses */
  .m-mag-line{transform-box:fill-box;transform-origin:center;animation:mLensScan 2.4s var(--ease) infinite}
  @keyframes mLensScan{0%{transform:translateY(-27px);opacity:0}12%{opacity:.5}88%{opacity:.5}100%{transform:translateY(27px);opacity:0}}
  #mScore{transform-box:fill-box;transform-origin:center;animation:mScoreJit 2.4s steps(1,end) infinite}
  @keyframes mScoreJit{0%,28%,72%,100%{transform:translateY(0);opacity:1}8%{transform:translate(.4px,-.4px);opacity:.85}16%{transform:translate(-.4px,.4px);opacity:1}60%{transform:translate(.3px,.3px);opacity:.9}}
  .m-issue{animation:mIssue 2.4s var(--ease) infinite}
  @keyframes mIssue{0%,100%{opacity:1}50%{opacity:.45}}
  /* rebuild: editor caret, a live LED, data pulsing the chart trend, an occasional CTA sheen */
  .m-rb-caret{animation:mRbCaret 1.2s steps(1,end) infinite}
  @keyframes mRbCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
  .m-rb-live-ring{transform-box:fill-box;transform-origin:center;animation:mPulse 2.4s var(--ease) infinite}
  .m-rb-live-dot{animation:mRbLed 2.4s var(--ease) infinite}
  @keyframes mRbLed{0%,100%{opacity:.55}50%{opacity:1}}
  .m-rb-trend{stroke-dasharray:6 70;stroke-dashoffset:76;opacity:.9;animation:mRbTrend 2.4s linear infinite}
  @keyframes mRbTrend{from{stroke-dashoffset:76}to{stroke-dashoffset:0}}
  .m-rb-sheen{transform-box:fill-box;transform-origin:center;opacity:0;animation:mRbSheen 4.8s var(--ease) infinite}
  @keyframes mRbSheen{0%{transform:translateX(-22px) skewX(-18deg);opacity:0}10%{opacity:.5}38%{transform:translateX(94px) skewX(-18deg);opacity:0}100%{transform:translateX(94px) skewX(-18deg);opacity:0}}
  /* expansion: module status LEDs poll in sequence, a pip laps the ring, packets return */
  .m-led{animation:mLed 2.4s var(--ease) infinite}
  .m-led2{animation-delay:.6s}
  .m-led3{animation-delay:1.2s}
  .m-led4{animation-delay:1.8s}
  @keyframes mLed{0%,22%,100%{opacity:.22}8%{opacity:1}}
  .m-orbit{transform-box:fill-box;transform-origin:center;opacity:calc(var(--exp,0)*.85);animation:mSpin 4.8s linear infinite}
  .m-pkr1{animation:mPkr1 2.4s linear infinite .3s}
  .m-pkr2{animation:mPkr2 2.4s linear infinite .9s}
  .m-pkr3{animation:mPkr3 2.4s linear infinite 1.5s}
  .m-pkr4{animation:mPkr4 2.4s linear infinite 2.1s}
  @keyframes mPkr1{0%{transform:translate(-74px,-43px);opacity:0}14%{opacity:1}86%{opacity:1}100%{transform:translate(0,0);opacity:0}}
  @keyframes mPkr2{0%{transform:translate(74px,-43px);opacity:0}14%{opacity:1}86%{opacity:1}100%{transform:translate(0,0);opacity:0}}
  @keyframes mPkr3{0%{transform:translate(-74px,45px);opacity:0}14%{opacity:1}86%{opacity:1}100%{transform:translate(0,0);opacity:0}}
  @keyframes mPkr4{0%{transform:translate(74px,45px);opacity:0}14%{opacity:1}86%{opacity:1}100%{transform:translate(0,0);opacity:0}}
  /* live: a record light, a spark streaming the trend to the end-node, a breathing now-bar, a +1 tick */
  .m-live .m-rec-dot{transform-box:fill-box;transform-origin:center;animation:mRecBlink 2.4s var(--ease) infinite}
  @keyframes mRecBlink{0%,100%{opacity:.3}50%{opacity:1}}
  .m-live .m-live-spark{transform-box:fill-box;transform-origin:center;opacity:0;filter:drop-shadow(0 0 3px rgba(198,242,78,.8));animation:mLiveStream 2.4s linear infinite .34s}
  @keyframes mLiveStream{0%{transform:translate(0,0);opacity:0}8%{opacity:1}14%{transform:translate(38px,-6px)}29%{transform:translate(76px,-12px)}43%{transform:translate(114px,-20px)}57%{transform:translate(152px,-28px)}71%{transform:translate(190px,-36px)}86%{transform:translate(228px,-46px);opacity:1}93%{transform:translate(228px,-46px);opacity:0}100%{transform:translate(228px,-46px);opacity:0}}
  .m-live .m-bar[style*="--bi:6"]{animation:mNowBar 2.4s var(--ease) infinite}
  @keyframes mNowBar{0%,100%{opacity:1}50%{opacity:.7}}
  .m-live .m-tick{transform-box:fill-box;transform-origin:center;opacity:0;animation:mTick 4.8s var(--ease) infinite}
  @keyframes mTick{0%,82%{opacity:0;transform:translateY(0)}87%{opacity:1;transform:translateY(-1.5px)}95%{opacity:1}100%{opacity:0;transform:translateY(-3px)}}
  .build-steps.inview .m-module,.build-steps.inview .m-bar,.build-steps.inview .brail-comet,.build-steps.inview .m-live-spark{will-change:transform}

  /* energized rail comet — rides the bar in lockstep with --p (the same scroll progress) */
  .brail-comet{position:absolute;left:34px;width:2px;height:0;z-index:1;pointer-events:none;
    top:var(--rail-top,40px);transform:translateY(calc(var(--p,0)*var(--rail-len,0px)))}
  .brail-comet::before{content:"";position:absolute;left:-3px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--lime);
    box-shadow:0 0 6px 1px rgba(198,242,78,.9),0 0 16px 4px rgba(198,242,78,.45),0 0 30px 8px rgba(198,242,78,.16)}

  /* each badge boots up as the comet passes its node (escaping halo; cards don't clip) */
  .build-steps.anim .bstep-n{box-shadow:0 0 calc(5px + 20px*var(--boot,0)) calc(var(--boot,0)*-2px) rgba(198,242,78,calc(.1 + .62*var(--boot,0)))}

  /* specular glass sheen sweeping the focused card (radius-clipped via background; no overflow:hidden) */
  .build-steps.anim .bstep::before{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;z-index:3;
    background:linear-gradient(108deg,transparent 38%,rgba(255,255,255,.09) 47%,rgba(198,242,78,.08) 53%,transparent 64%);
    background-size:260% 100%;background-repeat:no-repeat;
    background-position-x:calc((1 - (var(--sweep,1) + 1)/2)*100%);opacity:calc(var(--fcs,0)*.85)}
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){
  .build-steps::after{transition:none}
  .build-steps.anim .bstep{opacity:1;transform:none}
  .build-steps.anim .bstep::before{opacity:0}
  .build-steps.anim .bstep-glyph [data-d]{stroke-dashoffset:0}
  .build-steps.anim .bstep-glyph [data-p]{opacity:1;transform:none}
  .m-pulse{animation:none}
  .m-scan,.m-ring-rot,.m-hub-pulse,.m-pk{animation:none;opacity:0}
  .brail-comet{display:none}
  /* freeze + hide the idle-aliveness decoration */
  .m-mag-line,.m-rb-live-ring,.m-rb-trend,.m-rb-sheen,.m-orbit,.m-live .m-live-spark{animation:none;opacity:0}
  /* park the informative bits in a steady, legible resting state */
  #mScore{animation:none;transform:none;opacity:1}
  .m-issue{animation:none;opacity:1}
  .m-rb-caret{animation:none;opacity:1}
  .m-rb-live-dot{animation:none;opacity:1}
  .m-led{animation:none;opacity:.9}
  .m-live .m-rec-dot{animation:none;opacity:1}
  .m-live .m-tick{animation:none;opacity:.6}
  .m-live .m-bar[style*="--bi:6"]{animation:none;opacity:1}
}
.closing .hero-actions{justify-content:center}
.closing .hero-actions{justify-content:center}
/* ====================================================================
   THE DATUM FOOTER — the page's topographic survey lands on one ruled
   datum line (EL 0.00 m); the brand becomes a benchmark, the wordmark a
   monument carved into the ground. Bookends the Audit Console up top.
   Reuses tokens + .ca-pulse + the .rv observer. No new JS.
   ==================================================================== */
.foot{position:relative;z-index:2;background:transparent;margin-top:clamp(80px,12vw,140px)}
.foot a{color:#9a9a90;transition:color .25s var(--ease)}
.foot-legal{display:flex;flex-wrap:wrap;gap:16px 22px;margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.02em}
.foot-legal a:hover{color:var(--paper)}

/* REGION 0 — console seam bar (rhymes with .auc-bar) */
.foot-bar{display:flex;align-items:center;gap:14px;
  padding-block:13px;padding-inline:max(40px,calc((100% - 1240px)/2));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.014)}
.foot-dots{display:inline-flex;gap:7px;flex:none}
.foot-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.08)}
.foot-dots i:first-child{background:color-mix(in srgb,var(--lime) 75%,transparent);border-color:transparent;box-shadow:0 0 8px -1px rgba(198,242,78,.7)}
.foot-path{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:#8a8a80;margin-right:auto;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.foot-status{display:inline-flex;align-items:center;gap:7px;flex:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.foot-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px -1px rgba(198,242,78,.7);flex:none}

/* REGION 1 — the index */
.foot-index{padding:clamp(52px,8vw,88px) 0 0}
.foot-index-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(34px,5vw,52px)}
.foot-kicker{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.foot-ct{display:none;margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--lime) 58%,var(--muted))}
.foot-tick{width:34px;height:1px;background:var(--lime);flex:none}
.foot-sub{margin-top:12px;font-size:14px;line-height:1.55;color:var(--muted);max-width:46ch}
.foot-lead{font-family:'Clash Display';font-weight:600;font-size:clamp(18px,2.2vw,22px);color:var(--paper);
  display:inline-flex;gap:8px;align-items:center;white-space:nowrap;flex:none;transition:color .3s var(--ease)}
.foot-lead:hover{color:var(--lime)}
.foot-lead i{color:var(--lime);transition:transform .35s var(--ease)}
.foot-lead:hover i{transform:translateX(4px)}

.foot-gaz{column-count:4;column-gap:clamp(22px,3vw,44px)}
.foot-state{break-inside:avoid;margin-bottom:28px}
.foot-code{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:color-mix(in srgb,var(--lime) 62%,var(--muted));
  margin-bottom:12px;display:flex;align-items:center;gap:8px}
.foot-code::before{content:"";width:14px;height:1px;background:var(--line);flex:none}
.foot-gaz ul,.foot-reg ul{list-style:none;margin:0;padding:0}
.foot-gaz a,.foot-reg a{display:block;position:relative;padding-left:15px;color:#9a9a90}
.foot-gaz a{font-size:12.5px;line-height:1.75}
.foot-reg a{font-size:14px;line-height:2.05}
.foot-gaz a::before,.foot-reg a::before{content:"";position:absolute;left:0;top:.92em;width:7px;height:1px;background:rgba(255,255,255,.2);transition:background .25s var(--ease)}
.foot-gaz a:hover,.foot-reg a:hover{color:var(--lime)}
.foot-gaz a:hover::before,.foot-reg a:hover::before{background:var(--lime)}

.foot-registers{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);
  margin-top:clamp(34px,5vw,52px);padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--line-2)}
.foot-reg ul{margin-top:14px}

/* REGION 2 — the datum monument (signature) */
.foot-monument{position:relative;overflow:visible;margin-top:clamp(60px,9vw,116px)}
.foot-monument.rv{opacity:1;transform:none;filter:none}   /* wrapper stays put; children animate */
.foot-monument::after{content:"";position:absolute;inset:auto 0 0;height:clamp(140px,24vh,260px);
  background:linear-gradient(180deg,transparent,var(--ink) 86%);pointer-events:none;z-index:0}
.foot-datum-row{position:relative;z-index:3;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);padding-bottom:clamp(40px,7vw,76px)}
.foot-datum-r b{color:var(--lime);font-weight:500}
.foot-summit{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:7px}
.foot-summit-mark{position:relative;display:grid;place-items:center}
.foot-summit-mark .ca-pulse{position:absolute;top:-3px}
.foot-summit-line{width:1px;height:clamp(26px,4vw,52px);background:linear-gradient(180deg,color-mix(in srgb,var(--lime) 50%,transparent),transparent)}
.foot-summit-el{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:color-mix(in srgb,var(--lime) 55%,var(--muted))}
.foot-word{position:relative;z-index:1;display:flex;justify-content:center;align-items:baseline;text-decoration:none;
  font-size:clamp(30px,6.4vw,90px);line-height:.92;letter-spacing:0;
  color:color-mix(in srgb,var(--paper) 90%,transparent);
  margin-top:clamp(8px,2vw,20px);padding-bottom:clamp(12px,1.6vw,22px);
  opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-2),transform .9s var(--ease-2)}
.foot-monument.show .foot-word{opacity:1;transform:none}
.foot-word:focus-visible{outline:2px solid var(--lime);outline-offset:8px;color:var(--lime)}
.foot-datum-line{position:absolute;left:0;right:0;bottom:0;z-index:2;height:1px;background:var(--line);
  transform:scaleX(0);transform-origin:center;transition:transform .7s var(--ease-2)}
.foot-monument.show .foot-datum-line{transform:scaleX(1)}
.foot-datum-line::before{content:"▽ EL 0.00 m";position:absolute;left:max(40px,calc((100% - 1240px)/2));bottom:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:color-mix(in srgb,var(--lime) 50%,var(--muted))}

/* ---- shared section heads ----------------------------------------------- */
.sec-h2{font-family:'Clash Display';font-weight:600;font-size:clamp(32px,4.6vw,58px);line-height:1.02;letter-spacing:-.03em;max-width:16ch;margin-bottom:20px}
.sec-h2 em{font-style:normal;color:var(--muted)}
.sec-lead{max-width:580px;color:#bdbdb4;font-size:clamp(16px,1.4vw,18px);line-height:1.6}

/* ---- feature chips on cases --------------------------------------------- */
.case-feats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.feat{font-size:12.5px;color:#d4d4cc;padding:7px 13px;border-radius:100px;
  border:1px solid color-mix(in srgb,var(--acc) 32%,var(--line));
  background:color-mix(in srgb,var(--acc) 8%,transparent)}

/* ---- services pillars --------------------------------------------------- */

/* ---- process timeline --------------------------------------------------- */
.process{padding:112px 0 24px}
.timeline{position:relative;margin-top:66px}
.tl-line{position:absolute;top:23px;left:12.5%;right:12.5%;height:2px;background:var(--line);border-radius:2px}
.tl-fill{position:absolute;inset:0;border-radius:2px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--lime),color-mix(in srgb,var(--lime) 25%,transparent));
  transition:transform 1.7s var(--ease)}
.timeline.in .tl-fill{transform:scaleX(1)}
.tl-pulse{position:absolute;top:50%;left:0;width:11px;height:11px;border-radius:50%;background:var(--lime);
  transform:translate(-50%,-50%);box-shadow:0 0 16px 4px rgba(198,242,78,.85);opacity:0}
.timeline.in .tl-pulse{animation:tlrun 2.2s var(--ease) .15s}
@keyframes tlrun{0%{left:0;opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
.tl-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.tl-step{text-align:center}
.tl-node{width:48px;height:48px;border-radius:50%;margin:0 auto 22px;background:var(--ink);
  border:2px solid color-mix(in srgb,var(--lime) 50%,var(--line));display:grid;place-items:center;
  font-family:'Clash Display';font-weight:600;font-size:17px;color:var(--lime);position:relative;z-index:2;
  box-shadow:0 0 0 7px var(--ink)}
.tl-node.done{background:var(--lime);color:var(--ink);border-color:var(--lime);
  box-shadow:0 0 0 7px var(--ink),0 0 24px -2px rgba(198,242,78,.75)}
.tl-when{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);font-weight:600;margin-bottom:9px}
.tl-card h4{font-family:'Clash Display';font-weight:600;font-size:20px;letter-spacing:-.01em;margin-bottom:9px}
.tl-card p{color:#aeaea6;font-size:14px;line-height:1.55;max-width:230px;margin:0 auto}
@media(max-width:900px){
  .tl-line{top:0;bottom:0;left:23px;right:auto;width:2px;height:auto}
  .tl-fill{transform:scaleY(0);transform-origin:top}
  .timeline.in .tl-fill{transform:scaleY(1)}
  .tl-pulse{display:none}
  .tl-steps{grid-template-columns:1fr;gap:30px}
  .tl-step{text-align:left;display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;column-gap:18px;align-items:center}
  .tl-node{margin:0;grid-row:1 / span 2}
  .tl-when{margin-bottom:4px;align-self:end}
  .tl-card{grid-column:2}
  .tl-card p{margin:0;max-width:none}}

/* ---- pricing ------------------------------------------------------------ */
.pricing{padding:120px 0 24px}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:52px 0 20px;align-items:stretch}
.price-card{position:relative;display:flex;flex-direction:column;padding:34px 30px;border-radius:22px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
  box-shadow:0 16px 40px -28px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.price-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--lime) 22%,var(--line));
  box-shadow:0 28px 64px -34px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.06)}
.price-card.feat{border-color:color-mix(in srgb,var(--lime) 66%,transparent);
  background:linear-gradient(180deg,rgba(198,242,78,.14),rgba(198,242,78,.02));
  box-shadow:0 40px 96px -34px rgba(198,242,78,.72),inset 0 0 0 1px color-mix(in srgb,var(--lime) 32%,transparent),inset 0 1px 0 rgba(255,255,255,.09)}
.price-card.feat .price-now{text-shadow:0 0 26px rgba(198,242,78,.45)}
.price-card .price-now{text-shadow:0 0 22px rgba(198,242,78,.18)}
.price-badge{position:absolute;top:-12px;left:30px;font-family:'Clash Display';font-weight:600;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);background:var(--lime);padding:5px 12px;border-radius:6px}
.price-tier{font-size:13px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;font-weight:500}
.price-row{display:flex;align-items:baseline;gap:12px;margin:14px 0 0}
.price-compare{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:#86867c;margin:7px 0 16px}
.price-compare b{color:#c7c7be;font-weight:600;letter-spacing:0}
.price-now{font-family:'Clash Display';font-weight:600;font-size:40px;letter-spacing:-.03em;color:var(--paper)}
.price-now small{font-size:15px;color:var(--muted);font-family:'General Sans';font-weight:500}
.price-card.feat .price-now{color:var(--lime)}
.price-desc{color:#bdbdb4;font-size:15px;line-height:1.55;margin-bottom:18px}
.price-list{list-style:none;display:flex;flex-direction:column;gap:10px;flex:1 0 auto}
.price-list li{position:relative;padding-left:24px;font-size:14.5px;color:#cfcfc6;line-height:1.45}
.price-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--lime);font-weight:700;font-size:13px}
.price-list li.incl{padding-left:0;color:var(--lime);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  margin:2px 0 4px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.price-list li.incl::before{content:none}
.price-note{color:var(--muted);font-size:13.5px;max-width:580px}
.price-care{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-bottom:18px;padding:20px 26px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.02);
  font-size:15px;color:#bdbdb4;line-height:1.5}
.price-care b{color:var(--paper);font-weight:600}
.care-now{color:var(--lime);font-family:'Clash Display';font-weight:600}
.care-cta{color:var(--lime);font-weight:600;white-space:nowrap;font-size:14.5px;cursor:pointer}

/* ---- about / ledger ----------------------------------------------------- */
.about{padding:120px 0 16px}
.about-head{max-width:800px;margin-bottom:50px}
.about-head .about-bio{color:#bdbdb4;font-size:17px;line-height:1.65;max-width:640px;margin-top:18px}
.ledger{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:rgba(255,255,255,.014)}
.ledger-head{display:grid;grid-template-columns:1fr 56px 1fr;align-items:center;padding:15px 30px;border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.lh-old{color:var(--muted)}
.lh-new{color:var(--lime)}
.lrow{display:grid;grid-template-columns:1fr 56px 1fr;align-items:center;padding:19px 30px;border-bottom:1px solid var(--line-2);transition:background .35s var(--ease)}
.lrow:last-child{border-bottom:none}
.lrow:hover{background:rgba(198,242,78,.035)}
.l-old{color:#888880;text-decoration:line-through;text-decoration-color:rgba(255,96,84,.45);font-size:15px}
.l-arrow{justify-self:center;color:var(--lime);font-size:18px;font-weight:600}
.l-new{color:var(--paper);font-size:16px;line-height:1.4}
.l-new b{color:var(--lime);font-weight:600}
@media(max-width:760px){
  .ledger-head{display:none}
  .lrow{grid-template-columns:1fr;gap:7px;padding:18px 22px}
  .l-arrow{display:none}
  .l-new{padding-left:14px;border-left:2px solid var(--lime)}}

@media(max-width:900px){
  .svc-pillars,.price-grid,.about-grid{grid-template-columns:1fr}
  .about-grid{gap:40px}
  /* tighter vertical rhythm between sections on mobile */
  .engine{padding:34px 0 28px}
  .pricing{padding:44px 0 20px}
  /* pricing cards: tighter padding + bigger price on a phone, care strip stacks */
  .price-grid{gap:14px;margin:30px 0 16px}
  .price-card{padding:26px 22px;border-radius:18px}
  .price-now{font-size:38px}
  .price-care{flex-direction:column;align-items:flex-start;gap:12px;padding:18px 20px}}

/* ---- reveals ------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(34px);filter:blur(8px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.rv.show{opacity:1;transform:none;filter:none}

@media(max-width:900px){
  .container{padding:0 24px}}

/* ===== ADDITIONS: pulse / hero scrim / pricing CTAs / proof / reel ======== */
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.78)}}

/* hero screen edge-integration — white UIs fade into the dark stage */
.hx-screen::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:14px;
  background:radial-gradient(135% 118% at 50% 6%, transparent 56%, rgba(8,8,11,.42) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}

/* pricing — per-tier CTA */
.price-cta{margin-top:26px;display:flex;align-items:center;justify-content:center;gap:9px;padding:13px 18px;border-radius:11px;
  font-family:'General Sans';font-weight:600;font-size:14.5px;
  border:1px solid color-mix(in srgb,var(--lime) 36%,var(--line));color:var(--paper);background:rgba(255,255,255,.02);cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.price-cta i{font-style:normal;color:var(--lime);transition:transform .3s var(--ease)}
.price-cta:hover{background:rgba(198,242,78,.08);border-color:color-mix(in srgb,var(--lime) 55%,var(--line));transform:translateY(-2px)}
.price-cta:hover i{transform:translateX(3px)}
.price-card.feat .price-cta{background:var(--lime);color:var(--ink);border-color:var(--lime);box-shadow:0 14px 36px -16px rgba(198,242,78,.6)}
.price-card.feat .price-cta i{color:var(--ink)}
.price-card.feat .price-cta:hover{background:var(--lime);transform:translateY(-2px);box-shadow:0 18px 46px -14px rgba(198,242,78,.85)}

/* proof — real review + live production metrics */
.proof-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:18px;margin-top:46px;align-items:stretch}

/* signature reel — pinned scroll-scrub through live products */
.reel{position:relative;z-index:3}
/* ===== THE FLEET — merged work / production showcase ====================== */
.fleet{padding:78px 0 58px;position:relative;z-index:3}
.fleet-wrap{max-width:1240px;margin:0 auto;padding:0 40px}

/* header + live scoreboard */
.fleet-head{padding-bottom:28px;border-bottom:1px solid var(--line)}
.fleet-eyebrow-row{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.fleet-eyebrow-row .fs-live{margin-left:auto}
.fleet-title{font-family:'Clash Display';font-weight:600;font-size:clamp(36px,5vw,64px);line-height:.98;letter-spacing:-.03em}
.fleet-title em{font-style:normal;color:var(--muted)}
.fleet-sub{margin-top:18px;max-width:44ch;color:#bdbdb4;font-size:15.5px;line-height:1.6}
.fs-live{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#c4c4ba;border:1px solid var(--line);padding:6px 13px;border-radius:20px}
.fs-live i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 9px 1px var(--lime);animation:pulse 2s var(--ease) infinite}

/* board: monitor + detail */
.fleet-board{display:grid;grid-template-columns:1.62fr 1fr;gap:44px;align-items:center;margin-top:30px}
.fleet-monitor{position:relative}
.fleet-detail{padding-right:4px}
.fm-win{position:relative;border-radius:16px;overflow:hidden;border:1px solid color-mix(in srgb,var(--acc) 42%,var(--line));
  background:color-mix(in srgb,var(--acc) 7%,#0c0c11);
  box-shadow:0 54px 120px -40px rgba(0,0,0,.95),0 0 120px -26px var(--acc),inset 0 0 0 1px rgba(255,255,255,.05);
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease),background .5s var(--ease)}
.fm-bar{display:flex;align-items:center;gap:11px;padding:11px 15px;border-bottom:1px solid color-mix(in srgb,var(--acc) 22%,var(--line));
  background:color-mix(in srgb,var(--acc) 12%,rgba(8,8,11,.72));transition:background .5s var(--ease),border-color .5s var(--ease)}
.fm-fav{flex:none;width:25px;height:25px;border-radius:7px;overflow:hidden;display:grid;place-items:center;background:rgba(255,255,255,.06);box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.fm-fav img{width:100%;height:100%;object-fit:cover;display:block}
.fm-url{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#d8d8d2;font-family:'General Sans';background:rgba(0,0,0,.28);border-radius:7px;padding:5px 13px}
.fm-lock{font-size:10px;opacity:.7;color:var(--acc);transition:color .5s var(--ease)}
.fm-live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);transition:color .5s var(--ease)}
.fm-live i{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 9px 1px var(--acc);animation:pulse 2.2s var(--ease) infinite;transition:background .5s var(--ease)}
.fm-screen{position:relative;aspect-ratio:16/10;background:#0d0d12;overflow:hidden}
.fm-screen img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:opacity .38s var(--ease),transform .55s var(--ease-2)}
.fm-screen.swap img{opacity:0;transform:scale(1.018)}
.fm-screen img[hidden],.fm-ph[hidden]{display:none!important}
.fm-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;text-align:center;
  background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--acc) 8%,transparent),transparent 70%),#0c0c11}
.fm-ph-plus{width:48px;height:48px;border-radius:14px;border:1px dashed color-mix(in srgb,var(--acc) 55%,var(--line));display:grid;place-items:center;color:var(--acc);font-size:25px;line-height:1}
.fm-ph em{font-style:normal;color:var(--paper);font-weight:500;font-size:16px}
.fm-ph small{font-size:11.5px;color:var(--muted)}
.fm-scan{position:absolute;left:0;right:0;top:0;height:42%;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--acc) 28%,transparent) 62%,transparent);mix-blend-mode:screen}
.fm-screen.boot .fm-scan{animation:fmScan .7s var(--ease-2)}
@keyframes fmScan{0%{opacity:0;transform:translateY(-110%)}22%{opacity:.95}100%{opacity:0;transform:translateY(300%)}}
.fm-tag{position:absolute;top:-11px;left:22px;z-index:4;font-family:'Clash Display';font-weight:600;font-size:11px;letter-spacing:.13em;
  color:var(--ink);background:var(--acc);padding:5px 12px;border-radius:7px;box-shadow:0 8px 22px -8px var(--acc);transition:background .5s var(--ease)}
.fm-tabs{display:flex;gap:9px;margin-top:14px}
.fm-tab{flex:1 1 0;min-width:0;cursor:pointer;background:none;border:none;padding:0;display:flex;flex-direction:column;gap:6px;text-align:left;font-family:inherit}
.fm-tab img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;border-radius:8px;border:1px solid var(--line);transition:border-color .3s var(--ease),transform .3s var(--ease)}
.fm-tab > span{font-size:10px;color:var(--muted);line-height:1.3;font-family:var(--mono);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-tab:hover img{transform:translateY(-2px);border-color:color-mix(in srgb,var(--acc) 50%,var(--line))}
.fm-tab.active img{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.fm-tab.active > span{color:var(--paper)}
.fm-tab-ph{width:100%;aspect-ratio:16/10;border-radius:8px;border:1px dashed color-mix(in srgb,var(--acc) 40%,var(--line));display:grid;place-items:center;color:var(--acc);font-size:17px;background:rgba(255,255,255,.012);transition:border-color .3s var(--ease)}
.fm-tab.is-ph:hover .fm-tab-ph{border-color:color-mix(in srgb,var(--acc) 70%,var(--line))}
.fm-tab.is-ph.active .fm-tab-ph{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}

/* detail panel (themed to active product) */
.fd-top{display:flex;align-items:center;gap:16px;margin-bottom:13px;flex-wrap:wrap}
.fd-num{font-family:'Clash Display';font-weight:600;font-size:16px;color:var(--acc);transition:color .5s var(--ease)}
.fd-num i{font-style:normal;color:var(--muted);font-weight:500}
.fd-cat{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--acc);transition:color .5s var(--ease)}
.fd-year{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.fd-name{font-family:'Clash Display';font-weight:600;font-size:clamp(34px,3.6vw,52px);line-height:.96;letter-spacing:-.03em;
  color:var(--acc);text-shadow:0 0 24px color-mix(in srgb,var(--acc) 30%,transparent);margin-bottom:14px;transition:color .5s var(--ease)}
.fd-is{font-size:clamp(16px,1.4vw,18.5px);color:var(--paper);line-height:1.45;font-weight:500;margin-bottom:16px}
.fd-result{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;padding:2px 0 2px 16px;border-left:2px solid var(--acc);transition:border-color .5s var(--ease)}
.fd-result-l{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);transition:color .5s var(--ease)}
.fd-result-t{font-family:'Clash Display';font-weight:500;font-size:18px;line-height:1.34;color:var(--paper)}
/* capability list — the concrete "what it actually does" that fills the detail column
   with substance (was an empty void) and proves real engineering depth */
.fd-points{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:10px}
.fd-points li{position:relative;padding-left:24px;font-size:13.5px;line-height:1.5;color:#c6c6bd}
.fd-points li::before{content:"";position:absolute;left:3px;top:.46em;width:7px;height:7px;border-radius:2px;
  background:var(--acc);box-shadow:0 0 9px color-mix(in srgb,var(--acc) 75%,transparent);transition:background .5s var(--ease)}
.fd-stack{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.fd-stack .stk{font-family:var(--mono);font-size:11px;letter-spacing:.01em;color:#c2c2ba;background:rgba(255,255,255,.025);border:1px solid var(--line);padding:5px 9px;border-radius:7px}
.fd-link{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;color:var(--ink);padding:13px 22px;border-radius:11px;
  border:1px solid var(--acc);background:var(--acc);box-shadow:0 16px 42px -16px var(--acc);
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease),border-color .5s var(--ease)}
.fd-link i{font-style:normal;color:var(--ink);transition:transform .3s var(--ease),color .5s var(--ease)}
.fd-link:hover{background:color-mix(in srgb,var(--acc) 88%,#fff);transform:translateY(-2px);box-shadow:0 22px 54px -16px var(--acc)}
.fd-link:hover i{transform:translate(3px,-3px)}
.fleet-detail.in > *{animation:fdIn .5s var(--ease) both}
.fleet-detail.in > *:nth-child(2){animation-delay:.05s}
.fleet-detail.in > *:nth-child(3){animation-delay:.1s}
.fleet-detail.in > *:nth-child(4){animation-delay:.15s}
.fleet-detail.in > *:nth-child(5){animation-delay:.2s}
.fleet-detail.in > *:nth-child(6){animation-delay:.25s}
.fleet-detail.in > *:nth-child(7){animation-delay:.3s}
@keyframes fdIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* the fleet strip — all five, always live */
.fleet-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.fw{position:relative;cursor:pointer;text-align:left;font-family:inherit;display:flex;flex-direction:column;padding:0;
  border:1px solid var(--line);border-radius:13px;overflow:hidden;background:rgba(255,255,255,.018);opacity:.82;
  transition:opacity .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease-2),box-shadow .4s var(--ease)}
.fw:hover{opacity:.96;transform:translateY(-3px);border-color:color-mix(in srgb,var(--acc) 45%,var(--line))}
.fw:focus-visible{outline:none;opacity:1;border-color:var(--acc);box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 55%,transparent)}
.fw.active{opacity:1;border-color:color-mix(in srgb,var(--acc) 60%,var(--line));transform:translateY(-4px) scale(1.015);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 75%,#fff),0 0 0 5px color-mix(in srgb,var(--acc) 20%,transparent),0 28px 66px -30px var(--acc)}
.fw::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.fw.active::before{transform:scaleX(1)}
.fw-bar{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid var(--line);background:rgba(0,0,0,.22)}
.fw-fav{flex:none;width:22px;height:22px;border-radius:6px;overflow:hidden;display:grid;place-items:center;background:rgba(255,255,255,.06);box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.fw-fav img{width:100%;height:100%;object-fit:cover;display:block}
.fw-url{font-family:var(--mono);font-size:10.5px;color:#bdbdb4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fw-dot{margin-left:auto;flex:none;width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px 1px var(--acc);animation:pulse 2.4s var(--ease) infinite}
.fw-shot{display:block;aspect-ratio:16/10;overflow:hidden;background:#0d0d12}
.fw-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s var(--ease-2),filter .4s var(--ease)}
.fw:not(.active) .fw-shot img{filter:saturate(.8) brightness(.82)}
.fw:hover .fw-shot img{transform:scale(1.04)}
.fw.active .fw-bar{background:color-mix(in srgb,var(--acc) 15%,rgba(0,0,0,.22))}
.fw-foot{display:flex;flex-direction:column;gap:6px;padding:12px 13px 14px}
.fw-name{font-family:'Clash Display';font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--paper)}
.fw-result{font-family:var(--mono);font-size:10.5px;letter-spacing:.01em;color:#a2a298}
.fw-info{display:none}   /* desktop strip = compact thumbnails; rich info shows on the mobile carousel */
.fw-grid{display:none}   /* 2x2 feature-image grid — mobile carousel only */

/* footer: the one real review + integrity note */
.fleet-foot-row{display:flex;align-items:stretch;justify-content:flex-start;gap:20px 26px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.fleet-foot{display:inline-flex;align-items:center;gap:15px;padding:14px 18px;border-radius:13px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));transition:border-color .3s var(--ease),transform .3s var(--ease)}
.fleet-foot:hover{border-color:color-mix(in srgb,var(--lime) 40%,var(--line));transform:translateY(-2px)}
.ff-stars{color:var(--lime);font-size:15px;letter-spacing:2px;flex:none}
.ff-txt{font-size:13.5px;color:#bdbdb4;line-height:1.4;max-width:52ch}
.ff-txt b{color:var(--paper);font-weight:600}
.ff-badge{flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--lime);border:1px solid color-mix(in srgb,var(--lime) 35%,var(--line));padding:6px 11px;border-radius:8px}
.fleet-note{font-size:12.5px;color:var(--muted);max-width:300px;text-align:left;line-height:1.55;border-left:1px solid var(--line);padding-left:24px;display:flex;align-items:center}

@media(max-width:980px){
  .fleet-head{padding-bottom:26px}
  /* mobile/tablet: drop the heavy monitor+detail board (it stacked huge and
     repeated the strip). The 5 project cards become the showcase — tap to open
     each live. Desktop (>980) keeps the full interactive board. */
  .fleet-board{display:none}
  /* the strip becomes a swipeable carousel of luxe, accent-themed project cards */
  .fleet-strip{display:flex;grid-template-columns:none;gap:16px;margin-top:30px;padding:6px 2px 18px;border-top:none;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    overscroll-behavior-x:contain}
  .fleet-strip::-webkit-scrollbar{display:none}
  .fw{flex:0 0 73%;max-width:380px;scroll-snap-align:center;scroll-snap-stop:always;opacity:1;border-radius:18px;overflow:hidden;
    border:1px solid color-mix(in srgb,var(--acc) 32%,rgba(244,243,238,.07));
    background:radial-gradient(135% 78% at 50% -8%, color-mix(in srgb,var(--acc) 26%,transparent), transparent 58%),
      linear-gradient(180deg, color-mix(in srgb,var(--acc) 12%,#101017), #0a0a10 64%)}
  .fw,.fw:hover,.fw.active{transform:none;
    box-shadow:0 30px 72px -32px color-mix(in srgb,var(--acc) 82%,transparent), 0 16px 40px -32px rgba(0,0,0,.92), 0 1px 0 rgba(255,255,255,.08) inset}
  .fw::before{height:2px;transform:scaleX(1);background:linear-gradient(90deg,var(--acc),transparent 72%)}
  .fw-bar{background:color-mix(in srgb,var(--acc) 11%,rgba(0,0,0,.34));border-bottom-color:color-mix(in srgb,var(--acc) 16%,var(--line))}
  /* the single screenshot is replaced by a compact 2x2 grid of feature shots */
  .fw-shot{display:none}
  .fw-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;
    aspect-ratio:16/9;background:color-mix(in srgb,var(--acc) 9%,rgba(255,255,255,.03))}
  .fw-cell{position:relative;overflow:hidden;background:#0c0c12;min-height:0}
  .fw-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
  .fw-ph{display:grid;place-items:center;background:linear-gradient(155deg,color-mix(in srgb,var(--acc) 8%,#0e0e15),#0a0a10)}
  .fw-ph span{font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:0 6px;
    color:color-mix(in srgb,var(--acc) 48%,#74746c)}
  .fw-foot{display:none}
  .fw-info{position:relative;display:flex;flex-direction:column;gap:6px;padding:13px 16px 15px;z-index:1}
  .fw-info>*{position:relative;z-index:1}
  .fw-num{position:absolute;top:7px;right:14px;z-index:0;font-family:'Clash Display';font-weight:600;font-size:40px;line-height:1;
    color:color-mix(in srgb,var(--acc) 30%,transparent);opacity:.45;letter-spacing:-.04em;pointer-events:none}
  .fw-meta{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in srgb,var(--acc) 78%,#cfcfc6)}
  .fw-h{font-family:'Clash Display';font-weight:600;font-size:20px;letter-spacing:-.02em;line-height:1;color:var(--paper);margin:1px 0 0}
  .fw-is{font-size:12px;line-height:1.45;color:#a0a098;margin:0}
  .fw-res{font-size:12.5px;line-height:1.4;color:var(--paper);font-weight:500;margin:2px 0;padding-left:11px;
    border-left:2px solid var(--acc)}
  .fw-open{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;margin-top:7px;font-family:'General Sans';font-weight:600;font-size:12px;
    color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent);border:1px solid color-mix(in srgb,var(--acc) 40%,var(--line));
    padding:8px 14px;border-radius:999px}
  .fw-open i{font-style:normal;font-size:13px}
  .fleet-note{text-align:left;max-width:none}}
@media(max-width:620px){
  .fleet{padding:40px 0 34px}
  .fleet-wrap{padding:0 20px}
  .fw{flex:0 0 80%}
  .fw-bar{padding:9px 11px}
  .fleet-foot-row{flex-direction:column;align-items:flex-start;gap:16px}
  .fleet-note{border-left:none;padding-left:0}}
@media(prefers-reduced-motion:reduce){
  .fm-screen img,.fm-screen.swap img,.fw,.fw-shot img,.fd-link,.fleet-foot{transition:none}
  .fm-screen.boot .fm-scan{animation:none}
  .fleet-detail.in > *{animation:none}
  .fs-live i,.fm-live i,.fw-dot{animation:none}
  .fw::before{transition:none}}

/* ===== THE FLEET — signature motion: fly-to-monitor + entrance ============ */
.fm-win{will-change:transform}
.fm-fly{position:fixed;left:0;top:0;z-index:60;transform-origin:top left;border-radius:8px;overflow:hidden;pointer-events:none;will-change:transform;
  transition:transform .58s cubic-bezier(.16,1,.3,1),border-radius .58s cubic-bezier(.16,1,.3,1),opacity .22s ease}
.fm-fly img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.fm-fly.go{border-radius:14px}
.fm-fly.done{opacity:0}
.fleet-strip.pre .fw{opacity:0;transform:translateY(18px)}
.fleet-strip.lit .fw{transition:opacity .55s var(--ease),transform .6s var(--ease-2),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.fleet-strip.lit .fw:nth-child(1){transition-delay:.03s}
.fleet-strip.lit .fw:nth-child(2){transition-delay:.09s}
.fleet-strip.lit .fw:nth-child(3){transition-delay:.15s}
.fleet-strip.lit .fw:nth-child(4){transition-delay:.21s}
.fleet-strip.lit .fw:nth-child(5){transition-delay:.27s}
@media(prefers-reduced-motion:reduce){ .fm-fly{transition:none} .fleet-strip.pre .fw{opacity:1;transform:none}}

/* ===== Selected Work -> How it works accent bleed (mobile) =================
   A soft glow tinted by the centred carousel card (--fleet-acc, set in JS) sits at
   the bottom of Selected Work and the top of How it works, so the card's colour
   bleeds across the seam instead of being cut off. @property lets the colour tween
   smoothly as you swipe. */
@property --fleet-acc{syntax:"<color>";inherits:true;initial-value:#8b7bff}
@media(max-width:900px){
  /* the carousel card's accent (--fleet-acc, set in JS) feeds DOWN across the
     Selected Work -> How it works seam as a single soft glow that dissolves
     gradually into the next section — no muddy concentrated blob, and no hard
     cut-off line. The @property tween makes the colour follow the swipe. */
  html{transition:--fleet-acc .55s var(--ease)}
  .fleet{position:relative;overflow-x:clip;overflow-y:visible}
  .fleet-wrap{position:relative;z-index:1}
  .build{position:relative}
  .build>.container{position:relative;z-index:1}
  /* soft accent bleed at the seam — a multi-stop radial gives the diffuse look WITHOUT
     filter:blur(), which was re-rasterising a ~760x520 surface every scroll frame (mobile jank). */
  .fleet::after{content:"";position:absolute;left:50%;bottom:-380px;transform:translateX(-50%);
    width:min(820px,124vw);height:760px;pointer-events:none;z-index:0;
    background:radial-gradient(50% 50% at 50% 18%,
      color-mix(in srgb,var(--fleet-acc,#8b7bff) 19%,transparent),
      color-mix(in srgb,var(--fleet-acc,#8b7bff) 8%,transparent) 40%,
      transparent 80%);
    opacity:.72}
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){ html{transition:none} }


/* ===== SEO landing pages (city / guide / industry) ======================= */
.lp-nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 24px;border-bottom:1px solid var(--line);background:rgba(10,10,14,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.lp-nav .brand{display:inline-flex;align-items:baseline;font-size:21px;letter-spacing:0;color:var(--paper)}
.lp-nav .brand-mark{width:26px;height:26px;border-radius:8px;background:var(--lime);display:grid;place-items:center}
.lp-nav-links{display:flex;align-items:center;gap:6px}
.lp-nav-links a{font-size:12px;color:var(--muted);padding:8px 13px;border-radius:8px;transition:color .3s var(--ease)}
.lp-nav-links a:hover{color:var(--paper)}
.lp-nav-cta{color:var(--ink)!important;background:var(--lime);font-weight:600;font-size:12px;padding:8px 13px!important;border-radius:9px}
.lp-wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.lp-hero{padding:70px 0 44px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.lp-hero::before{content:"";position:absolute;width:680px;height:680px;border-radius:50%;right:-220px;top:-280px;background:radial-gradient(circle,rgba(198,242,78,.10),transparent 62%);pointer-events:none}
.lp-crumb{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted);margin-bottom:18px;position:relative}
.lp-crumb a{color:var(--muted)}.lp-crumb a:hover{color:var(--lime)}
.lp-hero h1{font-family:'Clash Display';font-weight:600;font-size:clamp(34px,5vw,58px);line-height:1.02;letter-spacing:-.03em;max-width:20ch;position:relative}
.lp-hero .lp-intro{max-width:66ch;color:#c2c2ba;font-size:17px;line-height:1.62;margin-top:20px;position:relative}
.lp-hero .lp-intro p{margin-bottom:14px}
.lp-tokens{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;position:relative}
.lp-tok{font-family:var(--mono);font-size:12px;color:#cfcfc6;border:1px solid var(--line);border-radius:20px;padding:7px 13px;display:inline-flex;gap:8px;align-items:center}
.lp-tok::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime)}
.lp-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;position:relative}
.lp-btn{display:inline-flex;align-items:center;gap:10px;background:var(--lime);color:var(--ink);font-weight:600;font-size:16px;padding:14px 24px;border-radius:11px;box-shadow:0 16px 42px -16px rgba(198,242,78,.5);transition:transform .3s var(--ease)}
.lp-btn:hover{transform:translateY(-2px)}
.lp-btn.ghost{background:transparent;color:var(--paper);border:1px solid var(--line);box-shadow:none}
.lp-section{padding:50px 0;border-bottom:1px solid var(--line)}
.lp-section h2{font-family:'Clash Display';font-weight:600;font-size:clamp(25px,3.2vw,38px);line-height:1.06;letter-spacing:-.02em;margin-bottom:22px}
.lp-prose h3{font-family:'Clash Display';font-weight:600;font-size:19px;margin:20px 0 8px;color:var(--paper)}
.lp-prose p{color:#c2c2ba;font-size:16px;line-height:1.7;margin-bottom:16px;max-width:72ch}
.lp-prose ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin:8px 0 18px}
.lp-prose li{position:relative;padding-left:24px;color:#d2d2ca;font-size:15.5px;line-height:1.5;max-width:70ch}
.lp-prose li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:2px;background:var(--lime);box-shadow:0 0 8px color-mix(in srgb,var(--lime) 55%,transparent)}
.lp-prose strong{color:var(--paper);font-weight:600}
.lp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lp-card{border:1px solid var(--line);border-radius:16px;padding:24px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.005))}
.lp-card h3{font-family:'Clash Display';font-weight:600;font-size:19px;margin:0 0 8px}
.lp-card h3 a{color:var(--paper)}.lp-card h3 a:hover{color:var(--lime)}
.lp-card p{color:#bdbdb4;font-size:14.5px;line-height:1.55;margin:0}
.lp-faq{display:flex;flex-direction:column;gap:12px;max-width:780px}
.lp-faq details{border:1px solid var(--line);border-radius:12px;padding:2px 18px;background:rgba(255,255,255,.015)}
.lp-faq summary{cursor:pointer;padding:15px 0;font-family:'Clash Display';font-weight:500;font-size:17px;color:var(--paper);list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+";color:var(--lime);font-size:22px;line-height:1;flex:none}
.lp-faq details[open] summary::after{content:"–"}
.lp-faq details p{color:#c2c2ba;font-size:15px;line-height:1.62;padding:0 0 16px;margin:0;max-width:70ch}
.lp-related{display:flex;flex-wrap:wrap;gap:9px}
.lp-related a{font-family:var(--mono);font-size:12.5px;color:#cfcfc6;border:1px solid var(--line);border-radius:8px;padding:8px 13px;transition:border-color .3s var(--ease),color .3s var(--ease)}
.lp-related a:hover{border-color:color-mix(in srgb,var(--lime) 50%,var(--line));color:var(--paper)}
.lp-ctaband{text-align:center;padding:66px 24px}
.lp-ctaband h2{font-family:'Clash Display';font-weight:600;font-size:clamp(28px,4vw,46px);letter-spacing:-.02em;margin-bottom:14px}
.lp-ctaband p{color:#bdbdb4;font-size:17px;margin-bottom:26px;max-width:52ch;margin-left:auto;margin-right:auto}
.lp-foot{border-top:1px solid var(--line);padding:40px 0}
.lp-foot .lp-wrap{display:flex;flex-direction:column;gap:16px}
.lp-foot-links{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13.5px}
.lp-foot-links a{color:#bdbdb4}.lp-foot-links a:hover{color:var(--lime)}
.lp-foot-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);padding-top:16px;color:var(--muted);font-size:13px}
.lp-foot-meta span:last-child{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 16px}
@media(max-width:760px){.lp-cards{grid-template-columns:1fr}.lp-nav-links a:not(.lp-nav-cta){display:none}.lp-hero{padding:48px 0 34px}}

/* homepage FAQ + footer cities */
.faq-sec{padding:96px 0 76px;border-top:1px solid var(--line);position:relative;z-index:2}
.faq-sec .container{display:flex;flex-direction:column;align-items:center}
/* centred, prestige heading */
.faq-head{text-align:center;max-width:680px;margin:0 auto}
.faq-sec .sec-eyebrow{justify-content:center}
.faq-sec .sec-eyebrow::after{content:"";width:34px;height:1px;background:var(--lime)}
.faq-sec .sec-h2{max-width:none;margin:16px auto 0;text-align:center}
.faq-lead{color:#aeaea4;font-size:16px;line-height:1.6;margin:16px auto 0;max-width:50ch}
/* unified accordion panel with hairline-divided rows */
.faq-list{width:100%;max-width:880px;margin:46px auto 0;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(180deg,rgba(15,15,19,.9),rgba(15,15,19,.82));backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);overflow:hidden}
.faq-list details{border-top:1px solid var(--line-2)}
.faq-list details:first-child{border-top:0}
.faq-q{cursor:pointer;list-style:none;display:flex;align-items:center;gap:22px;padding:25px 30px 25px 32px;
  position:relative;transition:background .35s var(--ease)}
.faq-q::-webkit-details-marker{display:none}
.faq-q:hover{background:rgba(255,255,255,.022)}
/* lime spine that slides in on the open row — echoes the Selected-work result callout */
.faq-q::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--lime);
  transform:scaleY(0);transform-origin:center;box-shadow:0 0 12px rgba(198,242,78,.55);
  transition:transform .42s var(--ease-2)}
.faq-list details[open] .faq-q::before{transform:scaleY(1)}
.faq-q-t{flex:1;font-family:'Clash Display';font-weight:500;font-size:19px;letter-spacing:-.01em;
  color:var(--paper);transition:color .35s var(--ease)}
.faq-list details[open] .faq-q-t{color:#fff}
/* circular +/- toggle */
.faq-ic{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);position:relative;
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .4s var(--ease-2)}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;top:50%;left:50%;background:var(--lime);border-radius:2px;
  transition:transform .42s var(--ease-2),background .35s var(--ease)}
.faq-ic::before{width:12px;height:1.7px;transform:translate(-50%,-50%)}
.faq-ic::after{width:1.7px;height:12px;transform:translate(-50%,-50%)}
.faq-q:hover .faq-ic{border-color:color-mix(in srgb,var(--lime) 55%,var(--line))}
.faq-list details[open] .faq-ic{background:var(--lime);border-color:var(--lime);transform:rotate(180deg)}
.faq-list details[open] .faq-ic::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-list details[open] .faq-ic::before,.faq-list details[open] .faq-ic::after{background:var(--ink)}
/* answer */
.faq-a{margin:0;padding:0 60px 28px 32px;color:#c2c2ba;font-size:15.5px;line-height:1.66;max-width:78ch}
.faq-list details[open] .faq-a{animation:faqReveal .46s var(--ease-2)}
@keyframes faqReveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* closing prompt to contact */
.faq-more{margin:34px auto 0;text-align:center;font-size:15.5px;color:#9d9d94}
.faq-more a{color:var(--lime);font-weight:500;white-space:nowrap;
  border-bottom:1px solid color-mix(in srgb,var(--lime) 35%,transparent);transition:border-color .3s var(--ease)}
.faq-more a:hover{border-bottom-color:var(--lime)}
@media(max-width:760px){
  .faq-sec{padding:64px 0 52px}
  .faq-q{padding:20px 18px 20px 20px;gap:14px}
  .faq-q-t{font-size:16.5px}
  .faq-a{padding:0 20px 22px 20px;font-size:15px}
  .faq-list{margin-top:34px}
}
@media(prefers-reduced-motion:reduce){.faq-list details[open] .faq-a{animation:none}}
/* ---- DATUM footer — responsive + reduced-motion ----------------------- */
@media(max-width:1100px){.foot-gaz{column-count:3}}
@media(max-width:760px){
  .foot-gaz{column-count:2}
  .foot-index-head{flex-direction:column;align-items:flex-start;gap:18px}
}
@media(max-width:620px){
  /* phones: collapse the 32-city grid (it added ~600px of scroll) — the
     "All locations ->" link to /web-design/ is the gateway, and the cities
     stay in the DOM (crawlable) + the sitemap + the hub. Desktop/tablet keep
     the full reference index. Then tighten the desktop-sized voids so the
     stacked footer reads dense and intentional, not sparse. */
  .foot-gaz{display:none}
  .foot-index{padding-top:42px}
  .foot-index-head{margin-bottom:22px}
  .foot-lead{font-size:17px;padding:6px 0}
  .foot-registers{grid-template-columns:1fr;gap:20px;margin-top:22px;padding-top:26px}
  .foot-reg ul{margin-top:11px}
  /* Sectors: short labels -> compact 2-column index; Guides keep one column (long labels) */
  .foot-registers .foot-reg:first-of-type ul{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:0}
  .foot-registers .foot-reg:first-of-type a{font-size:13px}
  .foot-monument{margin-top:50px}
  .foot-datum-row{flex-direction:column;gap:8px}
}
/* Monument: drop the clip on small screens so the wordmark never reads as a broken cut */
@media(max-width:700px){
  .foot-word{font-size:clamp(52px,15vw,112px)}
  .foot-datum-line::before{display:none}
}
@media(max-width:560px){
  .foot-bar{flex-wrap:wrap}
  .foot-path{display:none}
}
/* on phones the decorative summit mark (</> + pulse + line) collides with the
   quick-links row and reads as noise above the wordmark — drop it entirely */
@media(max-width:700px){.foot-summit{display:none}}
/* bigger tap targets on touch */
@media(pointer:coarse){.foot-gaz a,.foot-reg a{line-height:2.35}}
/* ...but compact the stacked sectors/guides on phones (must follow the coarse rule
   above to win the cascade, else the 2.35 line-height sprawls the footer) */
@media(max-width:620px){.foot-reg a{line-height:1.95}}
/* mobile footer index: drop the fake 01/02/03 sequence, surface a survey-style
   count, and turn the sector/guide lists into compact tappable chips */
@media(max-width:700px){
  .foot-kicker{display:flex;width:100%}
  .foot-n{display:none}
  .foot-ct{display:inline-block}
  .foot-sub{display:none}
  .foot-index{padding-top:36px}
  .foot-index-head{margin-bottom:16px;gap:14px}
  .foot-registers{gap:28px;margin-top:24px}
  .foot-reg ul,.foot-registers .foot-reg:first-of-type ul{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px;grid-template-columns:none;column-gap:9px}
  .foot-reg a,.foot-registers .foot-reg:first-of-type a{display:inline-flex;align-items:center;padding:9px 13px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.025);font-size:13px;line-height:1.1;color:#c9c9c0}
  .foot-reg a::before{display:none}
  .foot-reg a:hover{border-color:color-mix(in srgb,var(--lime) 45%,var(--line));background:rgba(198,242,78,.06);color:var(--lime)}
}
@media(prefers-reduced-motion:reduce){
  .foot-word{opacity:1!important;transform:none!important;transition:none}
  .foot-datum-line{transform:scaleX(1)!important;transition:none}
  .foot-summit-mark .ca-pulse{animation:none}
}

/* ===== HERO MONTAGE — clean, static, performant on mobile/touch ========== */
@media(pointer:coarse){ .spot{display:none} }
@media(max-width:860px){
  /* ============================================================
     MOBILE HERO — 3D COVERFLOW FLICK-DECK  (<=860px)
     The desktop scatter becomes a bespoke coverflow: browser-framed
     project shots in a 3D arc — the centre card flat + large + readable,
     neighbours angled back in perspective. app.js drives a float-based
     index with momentum flicks, infinite wrap, tap-to-focus and idle
     auto-advance; it writes each card's live transform/opacity inline.
     These rules just set the 3D stage. Desktop montage is untouched.
     ============================================================ */
  .hx-montage{position:relative!important;height:288px!important;min-height:0!important;
    perspective:none!important;transform:none!important;margin:18px 0 4px!important;padding:0!important;
    overflow:hidden;width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important}
  .hx-montage::before{left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;
    width:66vw!important;max-width:300px;height:220px!important;filter:blur(58px)!important;opacity:.5!important;animation:none!important}

  /* the 3D stage — JS transforms each card inside this perspective box */
  .hx-scene{position:absolute!important;inset:0!important;height:100%!important;
    display:block!important;transform:none!important;transform-style:preserve-3d!important;
    perspective:1150px;overflow:visible;will-change:auto;touch-action:pan-y;cursor:grab}
  .hx-scene:active{cursor:grabbing}

  /* every card: absolutely centred; JS writes the live 3D transform + opacity */
  .hx-screen{display:block!important;position:absolute!important;left:50%!important;top:50%!important;
    right:auto!important;bottom:auto!important;margin:0!important;opacity:1;
    width:min(266px,68vw)!important;border-radius:14px!important;animation:none!important;
    transition:none!important;backface-visibility:hidden;will-change:transform,opacity;
    --hx-mx:0px!important;--hx-my:0px!important;border-color:rgba(244,243,238,.12)!important;
    box-shadow:0 26px 54px -24px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.07)!important}
  /* centre card gets a lime ring + glow so it clearly reads as the front */
  .hx-screen.is-active{box-shadow:0 34px 70px -22px rgba(0,0,0,.95),0 0 0 1px rgba(198,242,78,.30),0 0 56px -16px rgba(198,242,78,.28)!important}
  .hx-s-class{display:none!important}   /* empty video-stage shot — not in the deck */

  /* uniform image area: crop each shot to its rich top, equal heights */
  .hx-screen img{width:100%!important;height:160px!important;object-fit:cover!important;object-position:top center!important}
  .hx-crop{height:160px!important;overflow:hidden;position:relative}
  .hx-crop img{position:static!important;top:auto!important;left:auto!important}
  .hx-crop::after{display:none!important}
  .hx-screen::after{border-radius:14px!important}
  .hx-screen .hx-glint{display:none!important}

  .hx-glow-lime{filter:blur(70px)!important;animation:none!important}   /* stop the big blur re-compositing during the deck motion */
}
@media(max-width:860px) and (prefers-reduced-motion:reduce){
  /* JS disables auto-advance + momentum; the deck stays drag/tap navigable */
  .hx-scene{cursor:default}
}

/* let Fleet grid/flex children shrink below content (fix <=345px overflow) */
.fleet-board>.fleet-monitor,.fleet-board>.fleet-detail,.fm-win,.fm-tabs,.fm-bar{min-width:0}
.fm-url{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fleet-strip>.fw{min-width:0}
.fw-url{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fw-foot{min-width:0}

/* ===== mobile polish: fit code window, wrap fleet badge ==== */
@media(max-width:760px){
  .caps{padding:40px 0 18px;margin-top:6px}
  /* code window: fit on screen */
  .code-body{font-size:12px;line-height:1.7;padding:16px 16px 18px}
  /* fleet review bar: let it wrap instead of overflowing tiny screens */
  .fleet-foot{flex-wrap:wrap}
  .ff-txt{min-width:0}
}
@media(max-width:400px){ .code-body{font-size:11px;padding:14px} }

/* under-the-hood code: typewriter caret */
.code-body code.caret::after{content:'';display:inline-block;width:7px;height:1.04em;margin-left:2px;transform:translateY(2px);background:var(--lime);box-shadow:0 0 6px rgba(198,242,78,.7);animation:codeCaret 1.05s steps(1) infinite;vertical-align:baseline}
@keyframes codeCaret{0%,50%{opacity:1}51%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.code-body code.caret::after{animation:none;opacity:1}}

/* (capabilities cards + expand panel are now unified above for all viewports) */

/* ---- touch performance: trim per-frame compositing so scrolling stays smooth ----
   Phones recomposite fixed/animated/blurred layers every scroll frame. On touch
   devices we drop the blend-mode grain, freeze the aurora, and shrink the big
   blur radii — keeps the look while killing the hero -> next-section scroll lag. */
@media (pointer:coarse), (max-width:760px){
  .hx-glow{filter:blur(48px);animation:none}
  .hx-glow-lime{filter:blur(54px)!important;animation:none!important;opacity:.4}  /* the big top-right glow was the main green wash */
  .hx-glow-deep{opacity:.6}
  .hx-montage::before{filter:blur(42px)!important}
  /* hero key light: dim, static, no blend (the ISOFORGE canvas is the bg now) */
  .hx-shaft{display:none}
  .hx-key{animation:none;mix-blend-mode:normal;opacity:.32;transform:translate3d(0,-6%,0);will-change:auto;width:560px;height:560px;
    background:radial-gradient(circle, rgba(198,242,78,.1), transparent 64%)}
  .hx-tok .hx-dot{animation:none}
}

.foot-code{font-family:var(--mono);font-weight:600;font-size:clamp(16px,2vw,22px);color:var(--lime);letter-spacing:-.04em;line-height:1}

/* ===== <winship/> brand lockup — chiseled blades + Space Grotesk, em-scaled from font-size ===== */
.wl-w{font-family:'Space Grotesk','Segoe UI',system-ui,-apple-system,sans-serif;font-weight:600;letter-spacing:-.03em;line-height:1;color:inherit;white-space:pre}
.wl-b{flex:none;display:inline-block}
.wl-lt{width:.406em;height:.656em;margin-right:.109em;margin-bottom:-.063em}
.wl-lt path{fill:#72727d}
.wl-sl{width:.328em;height:.688em;margin-left:.188em;margin-bottom:-.078em}
.wl-gt{width:.406em;height:.656em;margin-left:.078em;margin-bottom:-.063em}
.wl-sl path,.wl-gt path{fill:var(--lime)}
.wl-sl,.wl-gt{filter:drop-shadow(0 0 .09em rgba(198,242,78,.4))}
/* optical correction: at phone sizes the SMALL nav blades read under-weight next
   to the word, so they get ~13% more size on mobile. Scoped to .brand only —
   the big footer wordmark keeps the base em-proportions so it matches desktop. */
@media(max-width:860px){
  .brand .wl-lt{width:.46em;height:.743em;margin-right:.123em;margin-bottom:-.071em}
  .brand .wl-sl{width:.371em;height:.778em;margin-left:.212em;margin-bottom:-.088em}
  .brand .wl-gt{width:.46em;height:.743em;margin-left:.088em;margin-bottom:-.071em}
}