/* =========================================================
   TimeFuser — design tokens + global styles
   ========================================================= */

:root {
  /* Surfaces */
  --bg:            #050505;
  --bg-1:          #0a0a0a;
  --bg-2:          #0d0d0d;
  --bg-3:          #141414;
  --olive-deep:    #17160d;
  --olive-mid:     #1f1f14;
  --olive-rim:     #63633b;

  /* Accents — brand-locked. Navy is the structural primary; cyan is the
     energy/innovation accent. Gold/orange are micro-accents only (status
     pills, awaiting states), never used in primary CTAs. */
  --blue-1:        #0A0080;   /* brand navy — primary structural blue */
  --blue-2:        #1A1AAA;   /* lifted navy — gradient highlights, hover */
  --cyan:          #5ce1e6;   /* brand cyan — accent, glow, energy */
  --gold:          #d5c02b;   /* status pill, micro accents */
  --orange:        #fd8003;

  /* Text */
  --fg:            #f7f7f7;
  --fg-soft:       #d1d1d1;
  --fg-mute:       #a3a3a3;
  --fg-dim:        #737373;

  /* Strokes */
  --stroke:        rgba(255,255,255,0.08);
  --stroke-strong: rgba(255,255,255,0.16);

  /* Geometry */
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* Type — brand-locked. Montserrat for display headings (titles, hero,
     section H1/H2). DM Sans for body, paragraphs, captions. */
  --font:         "DM Sans", "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-display: "Montserrat", "DM Sans", "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Layout */
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; border: 0; background: none; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* =========================================================
   Typography
   ========================================================= */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}

.h-display {
  font-family: var(--font-display);
  font-size: clamp(48px, 8.5vw, 128px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.96;
}

.h-1 { font-family: var(--font-display); font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.025em; }
.h-2 { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 44px); }
.h-3 { font-family: var(--font-display); font-size: clamp(20px, 2vw, 24px); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--stroke);
  color: var(--fg-soft);
  font-size: 14px;
  font-weight: 500;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fg-mute);
  box-shadow: 0 0 10px rgba(255,255,255,0.4);
}
/* "Live" eyebrow variant: cyan pulsing dot, mono font, slight cyan tint
   on the surface. Used on Build & Run to signal "this is a working demo,
   not a marketing diagram." */
.eyebrow--live {
  letter-spacing: 0.04em;
  font-size: 12px;
  padding: 8px 14px;
  background:
    linear-gradient(180deg, rgba(92, 225, 230, 0.06), rgba(92, 225, 230, 0.02)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border-color: rgba(92, 225, 230, 0.22);
  color: var(--fg-soft);
}
.eyebrow--live::before {
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(92, 225, 230, 0.85);
  animation: eyebrow-live-pulse 1.7s ease-in-out infinite;
}
.eyebrow--live .eyebrow-num {
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}
.eyebrow--live #br-count {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
@keyframes eyebrow-live-pulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .eyebrow--live::before { animation: none; }
}

.lead { color: var(--fg-mute); font-size: clamp(15px, 1.1vw, 17px); max-width: 56ch; }

/* =========================================================
   Layout helpers
   ========================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { position: relative; padding: clamp(72px, 9vw, 140px) 0; }
/* Contact page is short — tighten the rhythm so blocks sit closer together. */
body.page--contact section { padding: clamp(48px, 6vw, 88px) 0; }
body.page--contact .section-head { margin-bottom: clamp(28px, 3.5vw, 44px); }

.section-head { display: grid; gap: 18px; margin-bottom: clamp(40px, 5vw, 64px); max-width: 760px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }

/* =========================================================
   Nav
   ========================================================= */
.nav-wrap {
  position: fixed; inset: 16px 16px auto; z-index: 100;
  display: flex; justify-content: center;
  pointer-events: none;
}
.nav {
  pointer-events: auto;
  display: flex; align-items: center;
  /* Compact pill is now the default resting state (the old "wide" 980px
     state has been removed). Scroll past the threshold and the nav
     collapses further to the logo puck — see .nav-wrap.is-logo below. */
  gap: 20px;
  padding: 8px 10px 8px 18px;
  width: min(calc(100vw - 32px), 720px);
  background: rgba(8, 8, 12, 0.70);
  border: 1px solid var(--stroke);
  border-radius: var(--r-pill);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    0 14px 44px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(92, 225, 230, 0.05) inset;
}
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.012em;
  color: var(--fg);
  position: relative;
  isolation: isolate;
}
.logo-mark {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
  /* Render the brand mark as monochrome white on dark surfaces. The
     two-tone original (navy head silhouette + cyan circuit) becomes a
     single clean silhouette with strong contrast, so the logo no longer
     needs a backing halo to be legible. Mirrors how Linear, Vercel,
     Stripe and Anthropic treat their marks at small sizes on dark themes. */
  filter:
    brightness(0) invert(1)
    drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
  position: relative;
  z-index: 1;
}
.logo-word { font-family: var(--font); }

/* =========================================================
   SPLASH — first-load brand intro.
   Timeline (origin = "2 rAFs after script.js executes", ~32ms after
   page paint on fast networks; later on slow ones):

     T+0ms      splash overlay starts fading in (opacity 0 → 1, 550ms,
                ease-out). page-fade scrim stays opaque underneath so
                the page never peeks through.
     T+100ms    iridescent halo expands outward + fades in
     T+120ms    inner brand stack scale/opacity entrance (.92 → 1)
     T+200ms    orbiting cyan→navy ring fades in + starts slow spin
                (6s per revolution, runs continuously)
     T+250ms    logo image fades in + scales 0.85 → 1
     T+550ms    splash overlay reaches full opacity → JS resolves the
                `splashReady` promise → page-fade scrim now fades to 0
     T+550ms    wordmark "TimeFuser" cascades in from below
     T+800ms    tagline cascades in from below
     T+1400ms   tagline settled — full brand stack now at rest
     T+1400ms — T+2000ms   ~600ms "settled hold" on the composed mark
     T+2000ms   MIN_SHOW_MS elapsed → JS adds `.is-done`
     T+2000ms — T+2850ms   splash dissolves: opacity 1 → 0 (850ms,
                decel curve), filter blur 0 → 6px, inner stack scales
                1 → 1.04 and lifts up 10px. Element is `.remove()`'d
                on transitionend so it can't intercept later clicks.

   Sessions: shown once per browser tab (`tf_splash_seen` in
   sessionStorage). Subsequent navigations skip the lifecycle entirely
   — the element is `.remove()`'d synchronously and `splashReady`
   resolves immediately so the page-fade scrim reveals on the next tick.

   Reduced-motion: JS bypasses the entire lifecycle on init — element
   removed from DOM, sessionStorage flag set, splashReady resolved.
   CSS also hides the splash via `display: none` as a defence in depth.
   ========================================================= */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: radial-gradient(80% 100% at 50% 40%, #0a0a14, #050507);
  pointer-events: none;
  /* The overlay starts transparent — JS adds `.is-loaded` on the next
     animation frame to fade the entire splash in. The page-fade overlay
     (z-index 9998, opaque) covers the page underneath during this window,
     so nothing flashes through. */
  opacity: 0;
  transition:
    opacity .55s cubic-bezier(.2, .8, .25, 1),
    filter  .85s cubic-bezier(.4, 0, .2, 1);
}
.splash.is-loaded { opacity: 1; }
.splash.is-done   {
  opacity: 0;
  filter: blur(6px);                       /* "out of focus" dissolution */
  pointer-events: none;
  /* Exit is slower and uses a softer decel curve than entrance so the
     splash visibly "lifts away" rather than snapping out. */
  transition:
    opacity .85s cubic-bezier(.4, 0, .2, 1),
    filter  .85s cubic-bezier(.4, 0, .2, 1);
}
/* As the overlay dissolves, the brand stack rises and grows slightly —
   reads as the content lifting forward into the viewer. Overrides the
   entrance animation that left it parked at scale(1) translateY(0). */
.splash.is-done .splash__inner {
  animation: splash-inner-out .85s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes splash-inner-out {
  from { transform: scale(1)    translateY(0); }
  to   { transform: scale(1.04) translateY(-10px); }
}

.splash__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  isolation: isolate;
  /* Subtle inner entrance — the whole brand stack zooms in slightly so the
     splash "arrives" before the halo/ring/logo run their own animations. */
  opacity: 0;
  transform: scale(0.92);
  animation: splash-inner-in .8s cubic-bezier(.2, .8, .25, 1) .12s forwards;
}
@keyframes splash-inner-in {
  to { opacity: 1; transform: scale(1); }
}

/* Halo — richer multi-stop radial centred on the logo. The colored logo
   has its own visual identity (navy silhouette + cyan circuit), so the
   halo can be a real "stage light" rather than the toned-down single
   stop we used while the logo was white-monochrome. */
.splash__halo {
  position: absolute;
  top: 110px;
  left: 50%;
  width: 680px;
  height: 680px;
  transform: translate(-50%, -50%) scale(0.5);
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(92, 225, 230, 0.42),
    rgba(26, 26, 170, 0.22) 35%,
    rgba(255, 255, 255, 0.06) 55%,
    transparent 78%);
  filter: blur(36px);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  animation: splash-halo-out 1.6s cubic-bezier(.2, .8, .25, 1) forwards;
  animation-delay: 100ms;
}
@keyframes splash-halo-out {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.5); }
  40%  { opacity: 1;    transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity: 0.65; transform: translate(-50%, -50%) scale(1.6); }
}

/* Slow-rotating cyan → navy ring orbiting the logo. Uses individual
   transform properties (rotate / scale) so the scale-in entrance and
   the infinite rotation can compose without fighting each other. */
.splash__ring {
  position: absolute;
  top: 110px;          /* matches the logo's vertical centre */
  left: 50%;
  width: 296px;
  height: 296px;
  margin-top: -148px;
  margin-left: -148px;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  background: conic-gradient(
    rgba(92, 225, 230, 0.85),
    rgba(26, 26, 170, 0.45) 25%,
    transparent 50%,
    rgba(92, 225, 230, 0.50) 75%,
    rgba(92, 225, 230, 0.85)
  );
  /* Mask the conic gradient down to a thin ring only. */
  -webkit-mask: radial-gradient(circle,
    transparent 0 60%, #000 62% 71%, transparent 73% 100%);
          mask: radial-gradient(circle,
    transparent 0 60%, #000 62% 71%, transparent 73% 100%);
  opacity: 0;
  scale: 0.7;
  animation:
    splash-ring-in   1.4s cubic-bezier(.2, .8, .25, 1) forwards,
    splash-ring-spin 6s   linear infinite;
  animation-delay: 200ms, 0ms;
}
@keyframes splash-ring-in {
  0%   { opacity: 0;    scale: 0.7; }
  45%  { opacity: 0.85; }
  100% { opacity: 0.65; scale: 1; }
}
@keyframes splash-ring-spin {
  to { rotate: 360deg; }
}

/* Logo — original two-tone (navy silhouette + cyan circuit) for the
   splash. A soft cyan drop-shadow grounds the navy half against the
   dark splash background; the halo + ring behind do the rest. */
.splash__logo {
  width: 220px;
  height: 220px;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.85);
  filter:
    drop-shadow(0 0 24px rgba(92, 225, 230, 0.35))
    drop-shadow(0 6px 22px rgba(0, 0, 0, 0.5));
  animation: splash-logo-in .8s cubic-bezier(.2, .8, .25, 1) forwards;
  animation-delay: 250ms;
}
@keyframes splash-logo-in {
  to { opacity: 1; transform: scale(1); }
}

.splash__wordmark {
  font-family: var(--font-display, "Montserrat", sans-serif);
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--fg);
  opacity: 0;
  transform: translateY(8px);
  animation: splash-text-in .6s cubic-bezier(.2, .8, .25, 1) forwards;
  animation-delay: 550ms;
}
.splash__tagline {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  opacity: 0;
  transform: translateY(6px);
  animation: splash-text-in .6s cubic-bezier(.2, .8, .25, 1) forwards;
  animation-delay: 800ms;
}
/* Mobile — keep splash readable but scale down so it doesn't bleed off-screen */
@media (max-width: 600px) {
  .splash__logo    { width: 160px; height: 160px; }
  .splash__halo    { width: 520px; height: 520px; top: 80px; }
  .splash__ring    {
    width: 216px; height: 216px;
    margin-top: -108px; margin-left: -108px;
    top: 80px;
  }
  .splash__wordmark { font-size: 36px; }
  .splash__tagline  { font-size: 13px; letter-spacing: 0.20em; }
  .splash__inner   { gap: 28px; }
}
@keyframes splash-text-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Reduced motion: skip the splash entirely on first paint */
@media (prefers-reduced-motion: reduce) {
  .splash { display: none !important; }
}

/* =========================================================
   PAGE TRANSITION SCRIM
   Sits below the splash (z=9998 vs splash 9999) so first-time
   visitors see splash-on-top, returning visitors see the scrim
   alone. Default state: opaque — paints before any content
   appears, eliminating the white flash on cross-page navigation.
   On `is-out` it fades to reveal the page; on `is-leaving`
   (added by JS just before navigation) it fades back in.
   ========================================================= */
.page-fade {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #050507;
  opacity: 1;
  pointer-events: none;
  transition: opacity 380ms cubic-bezier(.2, .8, .25, 1);
  will-change: opacity;
}
.page-fade.is-out { opacity: 0; }
.page-fade.is-leaving {
  opacity: 1;
  transition-duration: 280ms;
  transition-timing-function: cubic-bezier(.55, 0, .65, 0);
}
@media (prefers-reduced-motion: reduce) {
  .page-fade { transition: none; }
}

/* =========================================================
   HOLOGRAPHIC SECTION DIVIDER
   A 1px hairline that drifts cyan → silver → navy → cyan along its
   length. Slow shift gives the page a "structured system" feel
   without competing with content. Drop between major page bands.
   ========================================================= */
.section-divider {
  position: relative;
  width: 100%;
  height: 1px;
  margin: 0;
  pointer-events: none;
  /* Three-stop palette: brand cyan → silver/white → brand navy → back. */
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(92, 225, 230, 0.0)  6%,
    rgba(92, 225, 230, 0.55) 22%,
    rgba(220, 230, 240, 0.45) 42%,
    rgba(180, 195, 230, 0.40) 50%,
    rgba(26, 26, 170, 0.55)  58%,
    rgba(92, 225, 230, 0.45) 78%,
    rgba(92, 225, 230, 0.0)  94%,
    transparent 100%);
  background-size: 220% 100%;
  background-position: 0% 0;
  animation: divider-shift 22s linear infinite;
  /* Soft mask at the edges so it never bleeds against the gutter */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
@keyframes divider-shift {
  to { background-position: -220% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .section-divider { animation: none; }
}
.nav__links { display: flex; gap: 8px; margin-left: auto; }
.nav__links a {
  padding: 8px 14px; border-radius: var(--r-pill);
  color: var(--fg-soft); font-size: 14px; transition: color .2s, background .2s;
}
.nav__links a:hover { color: var(--fg); background: rgba(255,255,255,0.05); }
.nav__cta { margin-left: 8px; }

.menu-toggle { display:none; padding:8px; }
.menu-toggle span { display:block; width:22px; height:2px; background: var(--fg); margin: 4px 0; transition: transform .25s, opacity .25s; }

@media (max-width: 800px) {
  .nav__links { display: none; }
  .menu-toggle { display: block; margin-left: auto; }
  .nav__cta { display: none; }
  .nav.is-open { flex-wrap: wrap; border-radius: 24px; padding-bottom: 18px; }
  .nav.is-open .nav__links { display: flex; flex-direction: column; width: 100%; gap: 4px; padding-top: 12px; border-top: 1px solid var(--stroke); }
  .nav.is-open .nav__cta { display: inline-flex; margin: 8px auto 0; }
}

/* =========================================================
   NAV — single-stage collapse on scroll (desktop only).
   Default (no class):    compact centered pill (~720px), all content visible.
   .is-logo:              logo-only puck (64×64 circle). Links + CTA + wordmark fade.
                          A breathing cyan ring around the logo signals interactivity.
   Recovery from .is-logo: hover the nav OR move the cursor into the top ~90px of
                          the viewport → JS removes .is-logo, default pill returns.
                          Scrolling back to top auto-recovers.
   ========================================================= */
.nav { overflow: hidden; }
.nav__links,
.nav__cta,
.logo-word { transition: opacity .25s ease-out; }

@media (min-width: 801px) {
  /* Logo-only puck. 64×64 with pill radius = perfect circle. */
  .nav-wrap.is-logo .nav {
    width: 64px;
    height: 64px;
    padding: 8px;
    gap: 0;
    background: rgba(8, 8, 12, 0.78);
    box-shadow:
      0 14px 50px -10px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(92, 225, 230, 0.10) inset;
  }
  .nav-wrap.is-logo .nav__links,
  .nav-wrap.is-logo .nav__cta,
  .nav-wrap.is-logo .logo-word {
    opacity: 0;
    pointer-events: none;
  }
  /* Cursor: signal interactivity (clicking the puck goes home, hovering
     expands the nav). `perspective` establishes a 3D context so the
     coin-spin reads with depth instead of looking like a flat squash. */
  .nav-wrap.is-logo .nav__logo {
    cursor: pointer;
    perspective: 600px;
  }
  /* Slow continuous coin-spin while in the logo-only puck state. A
     plain rotateY on the logo image, NO backface-visibility hidden —
     because a 2D plane rotating around its Y-axis naturally shows the
     mirror of itself on the back half of the rotation, which is what
     makes the spin visually read as a real rotation (head facing left
     at 0°, head facing right at 180°). */
  .nav-wrap.is-logo .logo-mark {
    animation: nav-logo-coin 6s linear infinite;
    transform-style: preserve-3d;
  }
  @keyframes nav-logo-coin {
    from { transform: rotateY(0deg); }
    to   { transform: rotateY(360deg); }
  }

  /* Breathing cyan ring around the logo in State C — signals interactivity
     without needing an explicit "tap to expand" label. Positioned as a
     pseudo-element on .nav__logo (which already has position: relative). */
  .nav-wrap.is-logo .nav__logo::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(92, 225, 230, 0.35);
    animation: nav-logo-breathe 3.0s cubic-bezier(.4, 0, .6, 1) infinite;
  }
  @keyframes nav-logo-breathe {
    0%, 100% {
      opacity: 0.45;
      transform: scale(1);
      box-shadow: 0 0 0 1px rgba(92, 225, 230, 0.32);
    }
    50% {
      opacity: 1;
      transform: scale(1.16);
      box-shadow:
        0 0 0 2px rgba(92, 225, 230, 0.75),
        0 0 24px 4px rgba(92, 225, 230, 0.38);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-wrap.is-logo .nav__logo::before { animation: none; opacity: 0.55; }
  .nav-wrap.is-logo .logo-mark { animation: none; transform: none; }
  .nav { transition: none; }
  .nav__links, .nav__cta, .logo-word { transition: none; }
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  font-weight: 500; font-size: 15px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn .arrow { width: 16px; height: 16px; }

.btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--blue-1) 0%, var(--blue-2) 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 14px 40px -10px rgba(21, 0, 255, 0.55),
    0 0 0 1px rgba(21, 0, 255, 0.5);
}
.btn--primary:hover {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.14) inset,
    0 18px 50px -8px rgba(59, 41, 255, 0.7),
    0 0 0 1px rgba(59, 41, 255, 0.6);
}

.btn--ghost {
  color: var(--fg);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--stroke);
}
.btn--ghost:hover { background: rgba(255,255,255,0.08); border-color: var(--stroke-strong); }

.btn--gold {
  color: #1a1400;
  background: linear-gradient(175deg, var(--gold) 0%, var(--orange) 100%);
  box-shadow: 0 12px 30px -10px rgba(253,128,3,0.5);
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 140px 0 100px;
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute; inset: 0; z-index: -2;
  overflow: hidden;
}
.hero__media video {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.55;
  filter: saturate(0.6) contrast(1.1);
}
.hero__media::after {
  /* horizontal white wave glow streak */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 40% at 70% 50%, rgba(255,255,255,0.22), transparent 60%),
    radial-gradient(50% 30% at 25% 55%, rgba(255,255,255,0.12), transparent 70%);
  mix-blend-mode: screen;
}
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(5,5,5,0.6) 0%, rgba(5,5,5,0.85) 60%, var(--bg) 100%),
    linear-gradient(120deg, rgba(99,99,59,0.18) 0%, transparent 50%);
}

.hero__inner { display: grid; gap: 28px; max-width: 1100px; }
.hero h1 { color: #fff; }
.hero h1 .gradient-text {
  background: linear-gradient(180deg, #ffffff 30%, #888 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__sub { color: var(--fg-soft); max-width: 56ch; font-size: clamp(15px, 1.15vw, 18px); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }

/* =========================================================
   HOMEPAGE HERO — Tubes Cursor + mobile gradient fallback.
   The container always carries a layered brand-gradient background.
   On desktop the WebGL canvas sits on top of it (mostly covers it
   except in dark spots, where the gradient peeks through and adds
   depth). On touch / small viewports the canvas is hidden and the
   gradient becomes the entire hero background — no GL, no CDN,
   no battery hit.
   ========================================================= */
.hero__tubes {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  /* Layered branded gradient: top-left cyan glow, bottom-right
     navy glow, soft center wash, page-toned vertical base. */
  background:
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(92, 225, 230, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 75%, rgba(26, 26, 170, 0.28) 0%, transparent 60%),
    radial-gradient(circle 60% at 50% 45%, rgba(10, 0, 128, 0.15) 0%, transparent 70%),
    linear-gradient(180deg, #0A0A14 0%, #050507 60%, #030305 100%);
}
.hero__tubes-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* Touch / small viewport → hide the canvas, keep the gradient. */
@media (max-width: 800px), (pointer: coarse) {
  .hero__tubes-canvas { display: none; }
}

/* =========================================================
   HOMEPAGE HERO — Grid (faint baseline + cursor-revealed) + flicker
                   + spotlight + cursor glow. (LEGACY — unused on the
                   homepage now that the Dotted Surface is in place,
                   but kept in case it's reintroduced.)
   Five layers, deepest to nearest (within .hero's stacking context):
     z=-5  .hero__grid-dots    very faint always-on grid (hint of structure)
     z=-4  .hero__grid-spot    brighter grid revealed only around the cursor
     z=-3  .hero__flicker      14 cyan nodes flickering at staggered times
     z=-2  .hero__spotlight    slowly-panning multi-radial cyan glow
     z=-1  .hero__cursor-glow  cursor-following soft cyan halo (desktop only)
   The grid mask uses --mx / --my custom properties on .hero, set by JS
   on mousemove (along with the glow position). On non-pointer devices
   --mx / --my stay at -500px and the spot layer never reveals.
   ========================================================= */
.hero__grid-dots {
  position: absolute;
  inset: 0;
  z-index: -5;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(92, 225, 230, 0.05) 1px, transparent 0);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, transparent 80%);
}

.hero__grid-spot {
  position: absolute;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(92, 225, 230, 0.10) 1px, transparent 0);
  background-size: 28px 28px;
  /* The mask is a circle anchored to the cursor (--mx, --my). Inside the
     circle the grid is fully visible; outside it fades to invisible. */
  -webkit-mask-image: radial-gradient(240px circle at var(--mx, -500px) var(--my, -500px), #000 8%, transparent 75%);
          mask-image: radial-gradient(240px circle at var(--mx, -500px) var(--my, -500px), #000 8%, transparent 75%);
  opacity: 0;
  transition: opacity .35s ease-out;
}
.hero.is-pointing .hero__grid-spot { opacity: 1; }

.hero__flicker {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
}
.hero__flicker i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;     /* center the dot on its (x,y) anchor */
  border-radius: 50%;
  background: #5ce1e6;
  box-shadow:
    0 0 8px  rgba(92, 225, 230, 0.7),
    0 0 16px rgba(92, 225, 230, 0.35);
  opacity: 0;
  /* dim for ~70% of the cycle, brief peak around 75–85%, fade out by 100% */
  animation: flicker-pulse var(--dur, 4.5s) ease-in-out var(--d, 0s) infinite;
  will-change: opacity, transform;
}
@keyframes flicker-pulse {
  0%, 70%   { opacity: 0;    transform: scale(0.6); }
  78%       { opacity: 0.85; transform: scale(1.15); }
  86%       { opacity: 0.45; transform: scale(1); }
  100%      { opacity: 0;    transform: scale(0.6); }
}

.hero__spotlight {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 50% 35%, rgba(92, 225, 230, 0.08), transparent 75%),
    radial-gradient(28% 38% at 28% 52%, rgba(92, 225, 230, 0.05), transparent 80%),
    radial-gradient(28% 38% at 72% 52%, rgba(92, 225, 230, 0.05), transparent 80%);
  animation: spotlight-pan 11s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes spotlight-pan {
  from { transform: translate3d(-40px, -8px, 0); }
  to   { transform: translate3d( 40px,  8px, 0); }
}

.hero__cursor-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 640px;
  height: 640px;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(92, 225, 230, 0.14),
    rgba(92, 225, 230, 0.05) 35%,
    transparent 70%);
  filter: blur(40px);
  opacity: 0;
  transform: translate(-9999px, -9999px);
  transition: opacity .35s ease-out;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .hero__flicker i { animation: none; opacity: 0.3; }
  .hero__spotlight { animation: none; }
  .hero__cursor-glow { display: none; }
}

/* Noise overlay */
.noise::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("assets/visual-4.png");
  background-size: 180px;
  opacity: 0.04;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 0;
}


/* =========================================================
   Marquee (integrations)
   ========================================================= */
.marquee {
  position: relative;
  padding: 36px 0;
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.02), transparent);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex; gap: 64px;
  animation: scroll 38s linear infinite;
  width: max-content;
}
.marquee__item {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--fg-mute); font-size: 18px; font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.marquee__item svg { width: 22px; height: 22px; opacity: 0.8; }
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* =========================================================
   Cards
   ========================================================= */
.card {
  position: relative;
  padding: 32px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(131deg, rgba(99,99,59,0.18) -25%, rgba(15,14,12,0.9) 35%, rgba(10,10,10,0.95) 105%);
  border: 1px solid var(--stroke);
  overflow: hidden;
  isolation: isolate;
}
.card::before {
  /* corner glow */
  content: "";
  position: absolute; inset: -1px;
  background: radial-gradient(380px circle at 0% 0%, rgba(213,192,43,0.22), transparent 40%);
  pointer-events: none;
  z-index: -1;
}
.card--cyan::before {
  background: radial-gradient(420px circle at 50% 0%, rgba(92,225,230,0.25), transparent 50%);
}

/* =========================================================
   Precision Workflow — tabs + live console
   ========================================================= */
.workflow {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) 1.4fr;
  gap: 36px;
  align-items: stretch;
}

/* --- TABS --- */
.dept-tabs { display: grid; gap: 8px; align-content: start; }
.dept-tab {
  position: relative;
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 2px;
  padding: 16px 20px;
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.02);
  color: var(--fg-soft);
  transition: background .25s, border-color .25s, color .25s, transform .25s;
  overflow: hidden;
  isolation: isolate;
}
.dept-tab:hover { background: rgba(255,255,255,0.04); border-color: var(--stroke-strong); color: var(--fg); }
.dept-tab.is-active {
  background: linear-gradient(135deg, rgba(92,225,230,0.10), rgba(59,41,255,0.04));
  border-color: rgba(92,225,230,0.4);
  color: #fff;
}
.dept-tab.is-active::before {
  /* left accent bar on active */
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan), var(--blue-2));
  box-shadow: 0 0 12px var(--cyan);
}
.dept-tab__num {
  grid-row: 1 / 3;
  align-self: center;
  font-size: 11px;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  min-width: 22px;
}
.dept-tab.is-active .dept-tab__num { color: var(--cyan); }
.dept-tab__label { font-size: 16px; font-weight: 500; line-height: 1.1; }
.dept-tab__hint  { font-size: 12px; color: var(--fg-dim); }
.dept-tab.is-active .dept-tab__hint { color: var(--fg-mute); }

/* --- CONSOLE --- */
.dept-console {
  position: relative;
  min-height: 480px;
  padding: 32px 36px;
  display: grid;
  align-content: start;
  overflow: hidden;
}
.dept-console::before {
  /* faint grid background */
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

.dept-console > .dept-stage {
  position: absolute;
  inset: 32px 36px;
  display: grid;
  align-content: start;
  gap: 28px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
  z-index: 1;
}
.dept-stage.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dept-stage__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--stroke);
}
.dept-stage__title { display: grid; gap: 8px; }
.dept-stage__title h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -0.02em; }

.dept-stage__live {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}
.dept-stage__live i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  animation: pulse-live 1.6s ease-in-out infinite;
}
@keyframes pulse-live {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

.dept-stage__stat {
  text-align: right;
  display: grid; gap: 2px;
}
.dept-stage__stat strong {
  display: block;
  font-size: clamp(38px, 4.5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(180deg, #fff 30%, #888 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.dept-stage__stat strong small {
  font-size: 0.4em; color: var(--fg-mute);
  -webkit-text-fill-color: var(--fg-mute);
}
.dept-stage__stat span { color: var(--fg-mute); font-size: 13px; }

/* --- FLOW --- */
.flow {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  gap: 0;
  padding: 12px 0;
}
.flow::before {
  /* connecting line */
  content: "";
  position: absolute; left: 7%; right: 7%; top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  pointer-events: none;
}
.flow__node {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  z-index: 1;
}
.flow__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(15,15,20,0.95), rgba(8,8,12,0.95));
  border: 1px solid var(--stroke-strong);
  color: var(--fg-soft);
  font-size: 16px;
}
/* Each node lights cyan when the ball arrives, then ALL nodes fade off
   together at master ~11.4s — about 0.84s after the ball reaches the
   last node — leaving a brief dark beat before the cycle restarts.
   Animations run on every flow regardless of which dept-stage is
   visible, so switching tabs never resets the ball or the nodes.
   Each node has its own keyframe because the "off" is anchored to
   master time while the "on" is anchored to local arrival time —
   different lit-window lengths per node (node 1 holds longest, node 5
   only briefly). */
.flow__node:nth-child(1) .flow__icon { animation: node-light-1 12s linear infinite;  animation-delay:  0.48s; }
.flow__node:nth-child(2) .flow__icon { animation: node-light-2 12s linear infinite;  animation-delay:  3.00s; }
.flow__node:nth-child(3) .flow__icon { animation: node-light-3 12s linear infinite;  animation-delay:  5.52s; }
.flow__node:nth-child(4) .flow__icon { animation: node-light-4 12s linear infinite;  animation-delay:  8.04s; }
.flow__node:nth-child(5) .flow__icon { animation: node-light-5 12s linear infinite;  animation-delay: 10.56s; }

@keyframes node-light-1 {
  0%  { border-color: var(--cyan); color: var(--cyan);
        background: linear-gradient(180deg, rgba(92,225,230,0.18), rgba(8,8,12,0.95));
        box-shadow: 0 0 32px rgba(92,225,230,0.7), inset 0 0 16px rgba(92,225,230,0.28); }
  6%  { border-color: var(--cyan); color: var(--cyan);
        background: linear-gradient(180deg, rgba(92,225,230,0.08), rgba(8,8,12,0.95));
        box-shadow: 0 0 20px rgba(92,225,230,0.45), inset 0 0 12px rgba(92,225,230,0.18); }
  91% { border-color: var(--cyan); color: var(--cyan);
        background: linear-gradient(180deg, rgba(92,225,230,0.06), rgba(8,8,12,0.95));
        box-shadow: 0 0 16px rgba(92,225,230,0.35), inset 0 0 10px rgba(92,225,230,0.14); }
  95%, 100% { border-color: var(--stroke-strong); color: var(--fg-soft);
              background: linear-gradient(180deg, rgba(15,15,20,0.95), rgba(8,8,12,0.95));
              box-shadow: 0 0 0 rgba(92,225,230,0); }
}
@keyframes node-light-2 {
  0%  { border-color: var(--cyan); color: var(--cyan);
        background: linear-gradient(180deg, rgba(92,225,230,0.18), rgba(8,8,12,0.95));
        box-shadow: 0 0 32px rgba(92,225,230,0.7), inset 0 0 16px rgba(92,225,230,0.28); }
  6%  { border-color: var(--cyan); color: var(--cyan);
        background: linear-gradient(180deg, rgba(92,225,230,0.08), rgba(8,8,12,0.95));
        box-shadow: 0 0 20px rgba(92,225,230,0.45), inset 0 0 12px rgba(92,225,230,0.18); }
  70% { border-color: var(--cyan); color: var(--cyan);
        background: linear-gradient(180deg, rgba(92,225,230,0.06), rgba(8,8,12,0.95));
        box-shadow: 0 0 16px rgba(92,225,230,0.35), inset 0 0 10px rgba(92,225,230,0.14); }
  74%, 100% { border-color: var(--stroke-strong); color: var(--fg-soft);
              background: linear-gradient(180deg, rgba(15,15,20,0.95), rgba(8,8,12,0.95));
              box-shadow: 0 0 0 rgba(92,225,230,0); }
}
@keyframes node-light-3 {
  0%  { border-color: var(--cyan); color: var(--cyan);
        background: linear-gradient(180deg, rgba(92,225,230,0.18), rgba(8,8,12,0.95));
        box-shadow: 0 0 32px rgba(92,225,230,0.7), inset 0 0 16px rgba(92,225,230,0.28); }
  6%  { border-color: var(--cyan); color: var(--cyan);
        background: linear-gradient(180deg, rgba(92,225,230,0.08), rgba(8,8,12,0.95));
        box-shadow: 0 0 20px rgba(92,225,230,0.45), inset 0 0 12px rgba(92,225,230,0.18); }
  49% { border-color: var(--cyan); color: var(--cyan);
        background: linear-gradient(180deg, rgba(92,225,230,0.06), rgba(8,8,12,0.95));
        box-shadow: 0 0 16px rgba(92,225,230,0.35), inset 0 0 10px rgba(92,225,230,0.14); }
  53%, 100% { border-color: var(--stroke-strong); color: var(--fg-soft);
              background: linear-gradient(180deg, rgba(15,15,20,0.95), rgba(8,8,12,0.95));
              box-shadow: 0 0 0 rgba(92,225,230,0); }
}
@keyframes node-light-4 {
  0%  { border-color: var(--cyan); color: var(--cyan);
        background: linear-gradient(180deg, rgba(92,225,230,0.18), rgba(8,8,12,0.95));
        box-shadow: 0 0 32px rgba(92,225,230,0.7), inset 0 0 16px rgba(92,225,230,0.28); }
  6%  { border-color: var(--cyan); color: var(--cyan);
        background: linear-gradient(180deg, rgba(92,225,230,0.08), rgba(8,8,12,0.95));
        box-shadow: 0 0 20px rgba(92,225,230,0.45), inset 0 0 12px rgba(92,225,230,0.18); }
  28% { border-color: var(--cyan); color: var(--cyan);
        background: linear-gradient(180deg, rgba(92,225,230,0.06), rgba(8,8,12,0.95));
        box-shadow: 0 0 16px rgba(92,225,230,0.35), inset 0 0 10px rgba(92,225,230,0.14); }
  32%, 100% { border-color: var(--stroke-strong); color: var(--fg-soft);
              background: linear-gradient(180deg, rgba(15,15,20,0.95), rgba(8,8,12,0.95));
              box-shadow: 0 0 0 rgba(92,225,230,0); }
}
@keyframes node-light-5 {
  0%  { border-color: var(--cyan); color: var(--cyan);
        background: linear-gradient(180deg, rgba(92,225,230,0.18), rgba(8,8,12,0.95));
        box-shadow: 0 0 32px rgba(92,225,230,0.7), inset 0 0 16px rgba(92,225,230,0.28); }
  3%  { border-color: var(--cyan); color: var(--cyan);
        background: linear-gradient(180deg, rgba(92,225,230,0.08), rgba(8,8,12,0.95));
        box-shadow: 0 0 20px rgba(92,225,230,0.45), inset 0 0 12px rgba(92,225,230,0.18); }
  7%  { border-color: var(--cyan); color: var(--cyan);
        background: linear-gradient(180deg, rgba(92,225,230,0.06), rgba(8,8,12,0.95));
        box-shadow: 0 0 16px rgba(92,225,230,0.35), inset 0 0 10px rgba(92,225,230,0.14); }
  11%, 100% { border-color: var(--stroke-strong); color: var(--fg-soft);
              background: linear-gradient(180deg, rgba(15,15,20,0.95), rgba(8,8,12,0.95));
              box-shadow: 0 0 0 rgba(92,225,230,0); }
}
.flow__node span:last-child { font-size: 12px; color: var(--fg-mute); letter-spacing: 0.02em; }

.flow__pulse {
  position: absolute;
  top: 50%; left: 10%;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 18px var(--cyan), 0 0 36px rgba(92,225,230,0.5);
  transform: translate(-50%, -50%);
  animation: flow-pulse 12s ease-in-out infinite;
}
@keyframes flow-pulse {
  /* Ball glides at constant velocity along each arc — no slowdown
     before arrival, no early stop. At each node it pauses briefly
     (~0.72s, invisible) while the node holds its lit state, then
     departs smoothly toward the next. The opacity fade is squeezed
     into the first/last 0.12s of each arc so the visible motion is
     the entire path between nodes at one steady speed.
     Arrivals: 4 / 25 / 46 / 67 / 88 % of the 12s cycle (gaps of 21%
     each, so every arc travels at the same 1.33%-points/% velocity). */
  0%, 4%  { left: 10%; opacity: 0; }
  10%     { left: 10%; opacity: 0; }
  11%     { left: 11.33%; opacity: 1;
            box-shadow: 0 0 20px var(--cyan), 0 0 44px rgba(92,225,230,0.7); }
  24%     { left: 28.67%; opacity: 1;
            box-shadow: 0 0 20px var(--cyan), 0 0 44px rgba(92,225,230,0.7); }
  25%     { left: 30%; opacity: 0; }
  31%     { left: 30%; opacity: 0; }
  32%     { left: 31.33%; opacity: 1;
            box-shadow: 0 0 20px var(--cyan), 0 0 44px rgba(92,225,230,0.7); }
  45%     { left: 48.67%; opacity: 1;
            box-shadow: 0 0 20px var(--cyan), 0 0 44px rgba(92,225,230,0.7); }
  46%     { left: 50%; opacity: 0; }
  52%     { left: 50%; opacity: 0; }
  53%     { left: 51.33%; opacity: 1;
            box-shadow: 0 0 20px var(--cyan), 0 0 44px rgba(92,225,230,0.7); }
  66%     { left: 68.67%; opacity: 1;
            box-shadow: 0 0 20px var(--cyan), 0 0 44px rgba(92,225,230,0.7); }
  67%     { left: 70%; opacity: 0; }
  73%     { left: 70%; opacity: 0; }
  74%     { left: 71.33%; opacity: 1;
            box-shadow: 0 0 20px var(--cyan), 0 0 44px rgba(92,225,230,0.7); }
  87%     { left: 88.67%; opacity: 1;
            box-shadow: 0 0 20px var(--cyan), 0 0 44px rgba(92,225,230,0.7); }
  88%     { left: 90%; opacity: 0; }
  100%    { left: 90%; opacity: 0; }
}

/* --- CHIPS --- */
.dept-stage__chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 16px 0;
  border-top: 1px solid var(--stroke);
}
.chip {
  font-size: 12px; font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--stroke);
  color: var(--fg-soft);
  transition: background .2s, border-color .2s, color .2s;
}
.chip:hover { color: var(--fg); border-color: rgba(92,225,230,0.4); background: rgba(92,225,230,0.06); }

/* --- TICKER --- */
.ticker {
  display: grid; gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--stroke);
}
.ticker__row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 16px;
  font-size: 13px;
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid transparent;
  transition: border-color .3s, background .3s;
}
.dept-stage.is-active .ticker__row:nth-child(1) { border-left-color: var(--cyan); animation: ticker-fade-in .5s .15s ease backwards; }
.dept-stage.is-active .ticker__row:nth-child(2) { animation: ticker-fade-in .5s .25s ease backwards; }
.dept-stage.is-active .ticker__row:nth-child(3) { animation: ticker-fade-in .5s .35s ease backwards; }
@keyframes ticker-fade-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: none; }
}
.ticker__time { color: var(--cyan); font-size: 11px; letter-spacing: 0.05em; align-self: center; }

@media (max-width: 1000px) {
  .workflow { grid-template-columns: 1fr; }
  .dept-tabs { grid-auto-flow: column; grid-template-columns: repeat(5, 1fr); gap: 4px; overflow-x: auto; padding-bottom: 8px; }
  .dept-tab { padding: 12px; }
  .dept-tab__hint { display: none; }
  .dept-console { min-height: 540px; padding: 24px 20px; }
  .dept-stage { inset: 24px 20px; gap: 20px; }
  .flow { overflow-x: auto; }
}
@media (max-width: 600px) {
  .flow { grid-auto-columns: minmax(72px, 1fr); }
  .dept-stage__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .dept-stage__stat { text-align: left; }
}

/* =========================================================
   Cross-Department / Adaptability
   ========================================================= */
.adaptability {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
.adaptability__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(92,225,230,0.18), transparent 55%),
    linear-gradient(180deg, #050505, #000);
  border: 1px solid var(--stroke);
}
.adaptability__visual img { width: 90%; }
@media (max-width: 900px) { .adaptability { grid-template-columns: 1fr; } }

/* =========================================================
   Founder pull-quote
   ========================================================= */
.pullquote { text-align: center; max-width: 920px; margin: 0 auto; }
.pullquote q {
  display: block;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--fg);
  quotes: "“" "”";
}
.pullquote q::before, .pullquote q::after { color: var(--fg-dim); }
.pullquote__attr { margin-top: 28px; color: var(--fg-mute); font-size: 14px; }

.pullquote--with-photo {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  align-items: center;
  text-align: left;
  max-width: 1080px;
}
.pullquote--with-photo q { font-size: clamp(24px, 3vw, 38px); }
.pullquote--with-photo .pullquote__attr {
  margin-top: 24px;
  display: flex; flex-direction: column; gap: 4px;
}
.pullquote--with-photo .pullquote__attr strong { color: var(--fg); font-weight: 500; font-size: 16px; }
.pullquote--with-photo .pullquote__attr span { color: var(--fg-mute); font-size: 14px; }

.pullquote__photo {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--stroke);
  isolation: isolate;
}
.pullquote__photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.9) contrast(1.05);
  transition: transform .9s cubic-bezier(.2,.9,.3,1);
}
.pullquote--with-photo:hover .pullquote__photo img { transform: scale(1.04); }
.pullquote__photo-glow {
  position: absolute; inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.6) 100%),
    radial-gradient(120% 60% at 0% 100%, rgba(92,225,230,0.2), transparent 50%);
}
.pullquote__photo::after {
  /* moving border-beam */
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--beam-pos, 0deg),
    transparent 0%,
    var(--cyan) 8%,
    var(--blue-2) 14%,
    transparent 22%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: beam-travel 8s linear infinite;
  pointer-events: none;
}

@media (max-width: 720px) {
  .pullquote--with-photo {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
    justify-items: center;
  }
  .pullquote__photo { width: 200px; }
  .pullquote--with-photo .pullquote__attr { align-items: center; }
}

/* =========================================================
   Success Story
   ========================================================= */
.success {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.success__card { padding: 40px; }
.success__quote { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.35; font-weight: 500; }
.success__author { display: flex; align-items: center; gap: 14px; margin-top: 32px; }
.success__avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #2a2a1c, #0a0a0a); display:grid; place-items:center; color:var(--gold); font-weight:600; }
.success__name strong { display:block; }
.success__name span { color: var(--fg-mute); font-size: 14px; }
.stars { display: flex; gap: 2px; margin-top: 8px; color: var(--gold); }

.metrics { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; }
.metric { padding: 36px; display: grid; align-content: center; }
.metric__num {
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(180deg, #fff 30%, #888 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.metric__label { color: var(--fg-mute); margin-top: 8px; font-size: 15px; }

@media (max-width: 900px) {
  .success { grid-template-columns: 1fr; }
}


/* =========================================================
   Team teaser
   ========================================================= */
/* =========================================================
   Case study pullquote — split-card layout
   Different from the founder pullquote: image fills half the card edge-to-edge,
   gradient border, eyebrow pill, hairline before attribution. The .pullquote--case
   modifier overrides the cramped portrait-photo layout it inherits.
   ========================================================= */
.pullquote--case.pullquote--with-photo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
  background: linear-gradient(135deg, rgba(20,20,28,0.85), rgba(8,8,12,0.95));
  border-radius: var(--r-lg);
  border: 1px solid var(--stroke);
  overflow: hidden;
  isolation: isolate;
  position: relative;
}
/* Premium gradient hairline border — sits on top of the card edge */
.pullquote--case::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(92,225,230,0.45) 0%,
    rgba(92,225,230,0.05) 35%,
    transparent 55%,
    rgba(59,41,255,0.25) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
/* Image side — fills the column; ratio handled by the parent grid + min-height.
   The gradient fallback shows during load (or if the image is briefly missing)
   so the layout never looks empty. */
.pullquote--case .pullquote__photo {
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  height: 100%;
  min-height: 460px;
  background:
    radial-gradient(120% 80% at 30% 30%, rgba(92,225,230,0.12), transparent 55%),
    linear-gradient(160deg, #0d0d12, #050507);
}
.pullquote--case .pullquote__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.05);
  transition: transform 1.1s cubic-bezier(.2,.9,.3,1);
}
.pullquote--case:hover .pullquote__photo img { transform: scale(1.03); }
/* Portrait images (e.g. Kim) — landscape `cover` would crop the head off.
   Switch to `contain` so the whole image shows at native ratio, and
   anchor it to the right of the column so the parent's dark gradient
   shows through on the left (with the existing bottom-left cyan corner
   glow rendering as a soft frame). */
.pullquote--case .pullquote__photo--portrait img {
  object-fit: contain;
  object-position: right center;
}
/* Empty space around a portrait image — kill the photo column's own dark
   gradient + vignette so the card's parent gradient shows through and the
   area beside the image blends with the testimonial side instead of
   reading as a separate darker rectangle. */
.pullquote--case .pullquote__photo--portrait {
  background: transparent;
}
.pullquote--case .pullquote__photo--portrait .pullquote__photo-glow {
  display: none;
}
/* Photo-on-the-right variant — swap the two columns of the card so the
   image sits to the right of the body text. Use `order` rather than
   reordering the DOM so the source markup stays readable and the screen-
   reader order (eyebrow / quote / attribution first) is unchanged. */
.pullquote--case.pullquote--photo-right .pullquote__photo { order: 2; }
.pullquote--case.pullquote--photo-right .pullquote__body  { order: 1; }
/* Narrow-photo variant — pin the image column to the picture's RENDERED
   width at full card height (not its intrinsic pixel width), and give all
   remaining card width to the testimonial body. Width math: card height
   (460px desktop / 420px tablet) × Kim image ratio (1056 / 2048 ≈ 0.516)
   ≈ 237px desktop / 217px tablet. */
.pullquote--case.pullquote--photo-narrow {
  grid-template-columns: 237px 1fr;
}
.pullquote--case.pullquote--photo-narrow .pullquote__photo {
  min-height: 0;
  background: transparent;
}
.pullquote--case.pullquote--photo-narrow .pullquote__photo .pullquote__photo-glow {
  display: none;
}
.pullquote--case.pullquote--photo-narrow .pullquote__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Subtle vignette + cyan corner glow on the photo */
.pullquote--case .pullquote__photo-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%),
    radial-gradient(120% 60% at 0% 100%, rgba(92,225,230,0.18), transparent 55%);
}

/* Body side */
.pullquote--case .pullquote__body {
  padding: 56px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
/* Eyebrow as a pill (override the generic .eyebrow rule with higher specificity) */
.pullquote--case .pullquote__body .eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(92,225,230,0.08);
  border: 1px solid rgba(92,225,230,0.25);
  color: var(--cyan);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.pullquote--case q {
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.32;
  letter-spacing: -0.012em;
  font-weight: 400;
  color: var(--fg);
}
.pullquote--case .pullquote__attr {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--stroke);
  flex-direction: column;
  gap: 4px;
}
.pullquote--case .pullquote__attr strong {
  color: var(--fg);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
}
.pullquote--case .pullquote__attr span {
  color: var(--fg-mute);
  font-size: 13px;
  letter-spacing: 0.005em;
}

/* Tablet — slightly tighter padding */
@media (max-width: 1000px) {
  .pullquote--case .pullquote__body { padding: 44px 40px; }
  .pullquote--case .pullquote__photo { min-height: 420px; }
  .case-carousel__slide { height: 420px; }
  /* Recompute narrow-photo column for the shorter card height. */
  .pullquote--case.pullquote--photo-narrow { grid-template-columns: 217px 1fr; }
}
/* Mobile — stack: image on top, content below */
@media (max-width: 760px) {
  .pullquote--case.pullquote--with-photo { grid-template-columns: 1fr; }
  .pullquote--case .pullquote__photo {
    aspect-ratio: 4 / 3;
    min-height: auto;
  }
  .pullquote--case .pullquote__body { padding: 32px 28px; }
  /* Release the fixed canvas height so mobile can stack vertically. */
  .case-carousel__slide { height: auto; }
  /* Mobile reset for narrow-photo variant — go back to a normal stacked
     card layout instead of the desktop "auto 1fr" split. */
  .pullquote--case.pullquote--photo-narrow { grid-template-columns: 1fr; }
  .pullquote--case.pullquote--photo-narrow .pullquote__photo img {
    width: 100%;
  }
}

/* =========================================================
   CASE STUDIES CAROUSEL
   Horizontal slide; auto-advances every 6.5s; pauses on hover/focus.
   Track moves via translateX(-N * 100%); each slide is flex 0 0 100%.
   ========================================================= */
.case-carousel {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}
.case-carousel__viewport {
  overflow: hidden;
  border-radius: var(--r-lg);
}
.case-carousel__track {
  display: flex;
  width: 100%;
  transition: transform .7s cubic-bezier(.2,.8,.25,1);
  will-change: transform;
}
.case-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  /* Lock every slide to the same wide-rectangle canvas, regardless of which
     photo (landscape / square / portrait) is in the slot. Without this, a
     taller image (Kim portrait, Hannes square) would push the slide — and
     therefore every other slide via flex align-items:stretch — vertically. */
  height: 460px;
}
/* The card inside each slide stretches edge-to-edge of the viewport */
.case-carousel__slide .pullquote--case.pullquote--with-photo {
  max-width: none;
  margin: 0;
  height: 100%;
}
/* Empty / placeholder image cell — no <img>, just the gradient + glow.
   A faint mono "logo" mark hints at "client logo coming" without being noisy. */
.case-carousel__photo--placeholder {
  position: relative;
}
.case-carousel__photo--placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(92,225,230,0.06), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Dots */
.case-carousel__dots {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 28px;
}
/* Bigger hit area than the visible dot — the visible mark stays tight,
   but the clickable region is comfortably 36×36 so it's easy to tap. */
.case-carousel__dot {
  position: relative;
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.10);
  cursor: pointer;
  transition: background .25s, transform .25s, width .35s, border-color .25s;
}
.case-carousel__dot::before {
  content: "";
  position: absolute;
  inset: -11px;          /* expands tap target to ~36×36 */
  border-radius: 999px;
}
.case-carousel__dot:hover { background: rgba(255,255,255,0.32); }
.case-carousel__dot.is-active {
  width: 40px;
  background: var(--cyan);
  border-color: rgba(92,225,230,0.6);
  box-shadow: 0 0 14px rgba(92,225,230,0.45);
}
@media (prefers-reduced-motion: reduce) {
  .case-carousel__track { transition: none; }
  .case-carousel__dot   { transition: none; }
}

/* =========================================================
   Founder pullquote — same split-card layout as the case study,
   but stripped to a monochrome / editorial register so it visibly
   reads as "the founder is talking" rather than a marketed quote.
   Differentiation comes from typography (italic + handwritten
   signature) and restraint, NOT from a competing colour. On-brand.
   ========================================================= */
.pullquote--founder.pullquote--with-photo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
  background: linear-gradient(180deg, rgba(20, 20, 28, 0.85), rgba(8, 8, 12, 0.95));
  border-radius: var(--r-lg);
  border: 1px solid var(--stroke);
  overflow: hidden;
  isolation: isolate;
  position: relative;
}
/* Subtle neutral hairline — barely-there 1px white edge. Quieter than
   the case study's cyan→blue gradient on purpose. */
.pullquote--founder::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.10),
    rgba(255, 255, 255, 0.03) 40%,
    transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.pullquote--founder .pullquote__photo {
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  height: 100%;
  min-height: 460px;
  background: linear-gradient(160deg, #0d0d12, #050507);
}
.pullquote--founder .pullquote__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.05);
  transition: transform 1.1s cubic-bezier(.2,.9,.3,1);
}
.pullquote--founder:hover .pullquote__photo img { transform: scale(1.03); }
/* Neutral vignette — soft black-to-transparent at bottom + faint cool glow */
.pullquote--founder .pullquote__photo-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.50) 100%),
    radial-gradient(110% 60% at 0% 100%, rgba(92, 225, 230, 0.06), transparent 55%);
}

/* Brand mark in the top-right corner — small, low-emphasis, lets the card
   read as TimeFuser-issued without competing with the founder photo. */
.pullquote--founder__logo {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 108px;
  height: 108px;
  z-index: 3;
  opacity: 0.85;
  pointer-events: none;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}
@media (max-width: 760px) {
  .pullquote--founder__logo { width: 90px; height: 90px; top: 16px; right: 16px; }
}

/* Body side */
.pullquote--founder .pullquote__body {
  padding: 56px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
/* Neutral pill eyebrow — uses muted whites, no chromatic accent. */
.pullquote--founder .pullquote__body .eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--fg-mute);
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
/* The quote — italicized and slightly larger; reads as a thought, not a slogan */
.pullquote--founder q {
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.32;
  letter-spacing: -0.014em;
  font-weight: 400;
  font-style: italic;
  color: var(--fg);
  quotes: "“" "”";
}

/* Handwritten signature — Caveat font, off-white with a soft cyan halo.
   The cyan halo is a tiny on-brand hint without making it feel "decorated." */
.pullquote--founder .pullquote__sig {
  font-family: 'Caveat', 'Brush Script MT', cursive;
  font-weight: 500;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 0 24px rgba(92, 225, 230, 0.22);
  margin: 24px 0 6px;
  display: inline-block;
}

.pullquote--founder .pullquote__attr {
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--stroke);
  flex-direction: column;
  gap: 4px;
}
.pullquote--founder .pullquote__attr strong {
  color: var(--fg);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
}
.pullquote--founder .pullquote__attr span {
  color: var(--fg-mute);
  font-size: 13px;
  letter-spacing: 0.005em;
}

/* Tablet — slightly tighter padding */
@media (max-width: 1000px) {
  .pullquote--founder .pullquote__body { padding: 44px 40px; }
  .pullquote--founder .pullquote__photo { min-height: 420px; }
}
/* Mobile — stack: image on top, content below */
@media (max-width: 760px) {
  .pullquote--founder.pullquote--with-photo { grid-template-columns: 1fr; }
  .pullquote--founder .pullquote__photo {
    aspect-ratio: 4 / 3;
    min-height: auto;
  }
  .pullquote--founder .pullquote__body { padding: 32px 28px; }
}

/* =========================================================
   Social / Follow
   ========================================================= */
.socials { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 32px; }
.socials a {
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--stroke);
  color: var(--fg-soft);
  transition: background .25s, color .25s, transform .25s, border-color .25s;
}
.socials a:hover { background: rgba(59,41,255,0.18); color: var(--fg); border-color: rgba(59,41,255,0.5); transform: translateY(-2px); }
.socials svg { width: 22px; height: 22px; }

/* =========================================================
   FAQ
   ========================================================= */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq__item {
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.02);
  overflow: hidden;
  transition: border-color .25s, background .25s;
}
.faq__item:hover { border-color: var(--stroke-strong); }
.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 26px;
  text-align: left; font-size: 17px; font-weight: 500; color: var(--fg);
}
.faq__icon { width: 28px; height: 28px; display:grid; place-items:center; border-radius: 50%; background: rgba(255,255,255,0.05); border:1px solid var(--stroke); transition: transform .3s, background .25s; flex-shrink: 0; }
.faq__icon::before { content: "+"; font-size: 18px; line-height: 1; }
.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .35s;
  padding: 0 26px;
  color: var(--fg-mute);
  font-size: 15px;
}
.faq__item.is-open .faq__icon { transform: rotate(45deg); background: rgba(59,41,255,0.2); border-color: rgba(59,41,255,0.5); }
.faq__item.is-open .faq__a { max-height: 400px; padding-bottom: 22px; }

/* =========================================================
   Final CTA
   ========================================================= */
.cta-band {
  text-align: center;
  padding: clamp(60px, 8vw, 120px) 36px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(92,225,230,0.22), transparent 70%),
    linear-gradient(180deg, #0d0d0d, #050505);
  border: 1px solid var(--stroke);
  position: relative;
  overflow: hidden;
}
.cta-band h2 { max-width: 18ch; margin: 0 auto 28px; }

/* =========================================================
   Footer
   ========================================================= */
.footer { padding: 64px 0 40px; border-top: 1px solid var(--stroke); margin-top: 80px; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer h4 { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-mute); margin-bottom: 14px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer a { color: var(--fg-soft); font-size: 15px; }
.footer a:hover { color: var(--fg); }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-top: 28px; border-top: 1px solid var(--stroke);
  color: var(--fg-dim); font-size: 13px;
}
.footer__brand p { color: var(--fg-mute); margin: 12px 0 0; max-width: 38ch; font-size: 14px; }
/* Brand tagline in the footer — small mono, cyan accent. Distinct from a
   generic descriptive sentence. */
.footer__tagline {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace) !important;
  font-size: 12px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan) !important;
  margin: 14px 0 0 !important;
}
@media (max-width: 800px) { .footer__grid { grid-template-columns: 1fr 1fr; } }

/* =========================================================
   Reveal on scroll
   ========================================================= */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-in { opacity: 1; transform: translateY(0); }

/* =========================================================
   Pricing page
   ========================================================= */
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pricing-grid--three { grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: center; margin-top: 36px; }
/* Promote the middle "is-featured" card so it visually pops above the side cards. */
@media (min-width: 1101px) {
  .pricing-grid--three .price-card.is-featured {
    transform: scale(1.06);
    z-index: 2;
  }
}
@media (max-width: 1100px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } .pricing-grid--three { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; } }
@media (max-width: 600px)  { .pricing-grid { grid-template-columns: 1fr; } }
.price-card { padding: 36px 32px; display: grid; gap: 20px; align-content: start; }
.price-card.is-featured {
  position: relative;
  background: linear-gradient(180deg, rgba(59,41,255,0.18), rgba(10,10,10,0.95));
  border-color: rgba(59,41,255,0.55);
  box-shadow:
    0 24px 60px -20px rgba(59,41,255,0.45),
    0 0 0 1px rgba(92,225,230,0.08) inset;
}
/* Premium gradient hairline border on the featured card */
.price-card.is-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(92,225,230,0.7),
    rgba(92,225,230,0.15) 30%,
    transparent 55%,
    rgba(59,41,255,0.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
/* "Most popular" floating badge */
.price-card__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--cyan), var(--blue-2));
  color: #050507;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 22px -6px rgba(92,225,230,0.6);
  z-index: 2;
}

/* === Diagnostic banner — funnel entry sitting directly above the paid plans
   inside the same section. Designed to POP (cyan rail + glow + filled CTA)
   without dominating the cards below it. === */
.pricing-intro {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 26px 32px 26px 36px;        /* extra left padding for the rail */
  margin-bottom: 56px;                 /* controlled gap to the toggle below */
  border-radius: var(--r-lg);
  border: 1px solid rgba(92, 225, 230, 0.22);
  background:
    radial-gradient(70% 100% at 0% 50%, rgba(92, 225, 230, 0.08), transparent 55%),
    linear-gradient(180deg, rgba(28, 28, 40, 0.78), rgba(12, 12, 18, 0.90));
  backdrop-filter: blur(10px) saturate(1.10);
  -webkit-backdrop-filter: blur(10px) saturate(1.10);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    0 24px 50px -22px rgba(0, 0, 0, 0.55),
    0 0 70px -16px rgba(92, 225, 230, 0.20),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
/* Cyan left-rail accent — anchors the eye, signals "important" */
.pricing-intro::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--cyan), rgba(92, 225, 230, 0.45));
  box-shadow: 0 0 14px rgba(92, 225, 230, 0.55);
  z-index: 1;
}
.pricing-intro__copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pricing-intro__eyebrow {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}
.pricing-intro__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--fg-soft);
  letter-spacing: 0.005em;
}
.pricing-intro__text strong {
  color: var(--fg);
  font-weight: 500;
  letter-spacing: -0.005em;
}
/* Calendar icon inside the CTA button */
.pricing-intro .btn--primary { gap: 10px; padding-left: 18px; padding-right: 20px; }
.pricing-intro .btn--primary svg { flex-shrink: 0; }

@media (max-width: 760px) {
  .pricing-intro {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 22px 22px 26px;
    margin-bottom: 40px;
  }
}

/* === Trust strip below the cards === */
.pricing-trust {
  list-style: none;
  padding: 18px 24px;
  margin: 32px auto 0;
  max-width: 1100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 32px;
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.pricing-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pricing-trust li::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(92,225,230,0.6);
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .pricing-trust { padding: 16px; gap: 12px 18px; font-size: 10.5px; }
}

/* === Compare plans table — premium reskin =========================
   The wrapper carries the rounded container + gradient hairline so it
   visually echoes the featured pricing card above. The "Most popular"
   badge floats on a sibling element so it can stick out above the
   wrapper without being clipped by overflow:hidden. Sections divide
   the rows into capacity / support / security groups for hierarchy. */
.compare-wrap {
  position: relative;
  margin-top: 24px;
}
.compare-plan-badge {
  position: absolute;
  top: -13px;
  left: 64%;             /* center over featured column (28% label + 24%/2 = 40% in, 64% from left edge) */
  transform: translateX(-50%);
  padding: 6px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--cyan), var(--blue-2));
  color: #050507;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 22px -6px rgba(92,225,230,0.6);
  z-index: 3;
}

.compare-table {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--stroke);
  background:
    radial-gradient(ellipse 60% 80% at 64% 0%, rgba(92,225,230,0.05), transparent 60%),
    linear-gradient(180deg, rgba(20,20,28,0.55), rgba(8,8,12,0.7));
  overflow: hidden;
  isolation: isolate;
}
/* Gradient hairline on the wrapper — same language as the featured price card. */
.compare-table::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(92,225,230,0.55),
    rgba(92,225,230,0.10) 30%,
    transparent 55%,
    rgba(59,41,255,0.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.compare-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 0;
}
.compare-col              { width: 24%; }
.compare-col--label       { width: 28%; }
.compare-col--featured    { background: linear-gradient(180deg, rgba(92,225,230,0.05), rgba(59,41,255,0.025)); }

/* THEAD — plan name (mono eyebrow) + price (large) per column. */
.compare-table thead th {
  padding: 32px 24px 22px;
  text-align: left;
  font-weight: 400;
  vertical-align: bottom;
  background: rgba(255,255,255,0.022);
  border-bottom: 1px solid var(--stroke);
  position: relative;
}
.compare-th-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.compare-plan-name {
  display: block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 10px;
}
.compare-plan-amt {
  display: block;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
  line-height: 1;
}
.compare-plan-amt small {
  font-size: 13px;
  color: var(--fg-mute);
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 2px;
}

.compare-table thead th.is-featured {
  background:
    linear-gradient(180deg, rgba(92,225,230,0.16), rgba(92,225,230,0.04)),
    rgba(255,255,255,0.022);
}
.compare-table thead th.is-featured .compare-plan-name { color: var(--cyan); }
.compare-table thead th.is-featured::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan) 30%, var(--cyan) 70%, transparent);
}

/* SECTION ROWS — break the body into Capacity / Support / Security. */
.compare-table tr.compare-section th {
  padding: 28px 24px 12px;
  text-align: left;
  font-weight: 400;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent);
  border-bottom: 1px solid rgba(92,225,230,0.14);
}
.compare-table tbody tr.compare-section + tr th,
.compare-table tbody tr.compare-section + tr td {
  /* first row after a section header — slight extra top breathing room */
  padding-top: 20px;
}
.compare-section__num {
  display: inline-block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--cyan);
  margin-right: 14px;
  vertical-align: middle;
}
.compare-section__label {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-soft);
  font-weight: 500;
  vertical-align: middle;
}

/* BODY ROWS — feature label + 3 values, generous padding, hover highlight. */
.compare-table tbody th {
  padding: 16px 24px;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  white-space: normal;
  transition: background .25s ease;
}
.compare-table tbody td {
  padding: 16px 24px;
  text-align: left;
  font-size: 14px;
  color: var(--fg-soft);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
  transition: background .25s ease;
}
.compare-table tbody td.is-featured {
  color: var(--fg);
  font-weight: 500;
  background: rgba(92,225,230,0.04);
  position: relative;
}
.compare-table tbody td.is-featured::before,
.compare-table tbody td.is-featured::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(92,225,230,0.18);
}
.compare-table tbody td.is-featured::before { left: 0; }
.compare-table tbody td.is-featured::after  { right: 0; }

/* Row hover — subtle highlight, skips section header rows */
.compare-table tbody tr:not(.compare-section):hover th,
.compare-table tbody tr:not(.compare-section):hover td {
  background: rgba(255,255,255,0.025);
}
.compare-table tbody tr:not(.compare-section):hover td.is-featured {
  background: rgba(92,225,230,0.07);
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }

/* Check marks — circular pill, glow on the featured column */
.compare-table .check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(92,225,230,0.14);
  color: var(--cyan);
  font-size: 11px;
  font-weight: 700;
  margin-right: 6px;
  vertical-align: -2px;
}
.compare-table td.is-featured .check {
  background: rgba(92,225,230,0.22);
  box-shadow: 0 0 12px rgba(92,225,230,0.35);
}
.compare-table .dash { color: var(--fg-mute); font-weight: 400; }

/* On phones the table doesn't fit cleanly — fall back to the cards above. */
@media (max-width: 760px) {
  .compare-wrap, .compare-table { display: none; }
}
.price-card__name { font-size: 14px; color: var(--fg-mute); text-transform: uppercase; letter-spacing: 0.12em; }
.price-card__amt { font-size: 56px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.price-card__amt small { font-size: 15px; color: var(--fg-mute); font-weight: 400; letter-spacing: 0; }
.price-card__desc { color: var(--fg-mute); font-size: 14px; }
.price-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.price-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--fg-soft); }
.price-card li svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--cyan); margin-top: 3px; }

.toggle {
  display: inline-flex;
  padding: 4px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--stroke);
  border-radius: var(--r-pill);
  margin: 0 auto 48px;
}
.toggle button {
  padding: 8px 18px; border-radius: var(--r-pill);
  font-size: 14px; color: var(--fg-mute);
  transition: background .25s, color .25s;
}
.toggle button.is-active { background: linear-gradient(135deg, var(--blue-1), var(--blue-2)); color: #fff; }

/* =========================================================
   About page
   ========================================================= */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .values { grid-template-columns: 1fr; } }
.value {
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* The eyebrow / category tag — tight uppercase mono, cyan, generous tracking */
.value__num {
  color: var(--cyan);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  margin: 0 0 26px;
}
/* The headline — should be the takeaway, eye lands here */
.value h3 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1.25;
  margin: 0;
  color: var(--fg);
}
/* Cyan hairline separator — small visual break between headline and proof */
.value h3::after {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  margin: 18px 0;
  background: linear-gradient(90deg, var(--cyan), rgba(92,225,230,0.15));
}
/* The supporting line — proof, not prose */
.value p {
  color: var(--fg-soft);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  letter-spacing: 0.005em;
}

.founder { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center; }
.founder__img { aspect-ratio: 3/4; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--stroke); }
.founder__img img { width:100%; height:100%; object-fit: cover; }
@media (max-width: 900px) { .founder { grid-template-columns: 1fr; } }

/* =========================================================
   Contact page
   ========================================================= */
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.contact-grid--three { grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1000px) { .contact-grid--three { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }
@media (max-width: 700px)  { .contact-grid { grid-template-columns: 1fr; } }
.contact-card {
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.contact-card h3 { font-size: 14px; color: var(--fg-mute); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 12px; font-weight: 500; }
.contact-card .big { font-size: clamp(20px, 2vw, 26px); font-weight: 500; }
.contact-card a:hover { color: var(--cyan); }

/* === Contact: trust strip (under the 3 method cards) === */
.contact-trust {
  list-style: none;
  padding: 18px 24px;
  margin: 32px auto 0;
  max-width: 1100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 32px;
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.contact-trust li { display: inline-flex; align-items: center; gap: 8px; }
.contact-trust li::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(92,225,230,0.6);
  flex-shrink: 0;
}
@media (max-width: 600px) { .contact-trust { padding: 16px; gap: 12px 18px; font-size: 10.5px; } }

/* === Contact hero — split layout (text left, form right) === */
.hero--contact { padding: 120px 0 80px; }
@media (max-width: 900px) { .hero--contact { padding: 100px 0 60px; min-height: auto; } }
.hero__inner--split {
  /* Push wider than the default container (1240px) — the contact hero is the
     one place we want the layout to breathe more. Form column gets a slightly
     bigger share so the textarea has room. */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 88px;
  max-width: 1320px;
  align-items: center;
}
@media (max-width: 1100px) {
  .hero__inner--split { gap: 56px; max-width: 1100px; }
}
@media (max-width: 1000px) {
  .hero__inner--split { grid-template-columns: 1fr; gap: 44px; max-width: 640px; }
}
.hero__col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.hero__col--form {
  align-self: stretch;       /* form column matches column height visually */
  display: flex;
  align-items: center;
  justify-content: flex-end; /* form sits on the right of its column */
}
@media (max-width: 1000px) {
  .hero__col--form { align-items: flex-start; justify-content: stretch; }
}
.hero__title--split {
  font-size: clamp(40px, 5.2vw, 76px) !important;
  line-height: 1.04;
  letter-spacing: -0.024em;
  margin: 0;
}
.hero__inner--split .hero__sub {
  max-width: 52ch;
  margin: 0;
  font-size: clamp(15px, 1.2vw, 18px);
}

/* === Contact form === */
.contact-form {
  max-width: 760px;
  margin: 36px auto 0;
  padding: 36px;
  display: grid;
  gap: 18px;
}
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .contact-form__row { grid-template-columns: 1fr; } }
.contact-form__field { display: grid; gap: 8px; }
.contact-form__label {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.contact-form__input,
.contact-form__textarea {
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(8, 8, 12, 0.6);
  border: 1px solid var(--stroke);
  color: var(--fg);
  font: inherit;
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: border-color .25s, background .25s, box-shadow .25s;
  outline: none;
}
.contact-form__textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.contact-form__input::placeholder,
.contact-form__textarea::placeholder { color: var(--fg-dim); }
.contact-form__input:hover,
.contact-form__textarea:hover { border-color: var(--stroke-strong); background: rgba(8, 8, 12, 0.75); }
.contact-form__input:focus,
.contact-form__textarea:focus {
  border-color: rgba(92, 225, 230, 0.55);
  background: rgba(8, 8, 12, 0.85);
  box-shadow: 0 0 0 4px rgba(92, 225, 230, 0.10), 0 12px 32px -10px rgba(92, 225, 230, 0.25);
}
/* Honeypot — invisible to humans, present in the DOM for bots to fill */
.contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.contact-form__hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-mute);
}
.contact-form__submit { min-width: 180px; justify-content: center; }
.contact-form__submit.is-loading { pointer-events: none; opacity: 0.75; }
.contact-form__submit.is-loading svg { animation: spin 1s linear infinite; }
.contact-form__feedback {
  margin: 0;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55;
  display: none;
}
.contact-form__feedback.is-error,
.contact-form__feedback.is-success { display: block; }
.contact-form__feedback.is-error {
  background: rgba(255, 80, 80, 0.06);
  border: 1px solid rgba(255, 80, 80, 0.25);
  color: #ffb1a8;
}
.contact-form__feedback.is-success {
  background: rgba(92, 225, 230, 0.06);
  border: 1px solid rgba(92, 225, 230, 0.25);
  color: var(--cyan);
}
/* Success state — the form is replaced wholesale by .contact-form__success */
.contact-form__success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 4px;
}
.contact-form__success svg {
  color: var(--cyan);
  background: rgba(92, 225, 230, 0.1);
  border: 1px solid rgba(92, 225, 230, 0.25);
  border-radius: 50%;
  padding: 8px;
  box-shadow: 0 0 20px rgba(92, 225, 230, 0.3);
}
.contact-form__success h3 {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--fg);
}
.contact-form__success p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: 540px;
}

/* === Vertical variant — used when the form sits inside the contact hero === */
.contact-form--vertical {
  width: 100%;
  max-width: 540px;
  margin: 0;
  padding: 36px;
  gap: 18px;
  /* Lighter, slightly blue-tinted surface — visibly distinct from the hero's
     near-black background so the card doesn't fade into it. */
  background: linear-gradient(180deg,
    rgba(34, 34, 48, 0.82),
    rgba(16, 16, 24, 0.92));
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* Layered shadow: deep ambient drop + soft cyan elevation glow + hairline
     inner highlight. The cyan glow is what makes the card "lift" off the
     hero background without looking like a sticker. */
  box-shadow:
    0 40px 80px -24px rgba(0, 0, 0, 0.75),
    0 0 80px -16px rgba(92, 225, 230, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 1px 0 0 rgba(255, 255, 255, 0.06) inset;
  position: relative;
  isolation: isolate;
}
/* Subtle glass top-edge highlight — sits on top of the rotating border */
.contact-form--vertical > .contact-form__head {
  position: relative;
}
.contact-form--vertical > .contact-form__head::before {
  content: "";
  position: absolute;
  top: -36px;       /* aligns with the card's top inner edge (= -padding) */
  left: -36px; right: -36px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 10%,
    rgba(255, 255, 255, 0.14) 50%,
    transparent 90%);
  pointer-events: none;
}
/* Animated rotating gradient hairline border — slow conic, ~14s per rotation.
   Uses @property so the angle variable is animatable; browsers without
   @property support degrade to a static gradient at the initial-value angle. */
@property --form-grad-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.contact-form--vertical::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--form-grad-angle, 0deg),
    rgba(92, 225, 230, 0.85),
    rgba(59, 41, 255, 0.45) 25%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(92, 225, 230, 0.30) 75%,
    rgba(92, 225, 230, 0.85));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  animation: form-border-rotate 14s linear infinite;
}
@keyframes form-border-rotate { to { --form-grad-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .contact-form--vertical::before { animation: none; }
}
@media (max-width: 1000px) {
  .contact-form--vertical { max-width: 100%; padding: 28px; }
}

/* === Active field accent rail — cyan bar slides in on focus === */
.contact-form--vertical .contact-form__field {
  position: relative;
  padding-left: 14px;
}
.contact-form--vertical .contact-form__field::before {
  content: "";
  position: absolute;
  left: 0;
  top: 26px;        /* sits below the label */
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(92, 225, 230, 0.55);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .4s cubic-bezier(.2, .8, .25, 1);
  pointer-events: none;
}
.contact-form--vertical .contact-form__field:focus-within::before {
  transform: scaleY(1);
}
/* Don't apply the rail to the honeypot */
.contact-form--vertical .contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
  padding-left: 0;
}
.contact-form--vertical .contact-form__hp::before { display: none; }

/* === Character counter (textarea) === */
/* Width: 100% is critical — the wrap is a grid child of .contact-form__field
   (display: grid), and without explicit width it shrinks to the textarea's
   default cols=20 (~160px), making the field look half the size of the
   inputs above it. */
.contact-form__textarea-wrap {
  position: relative;
  width: 100%;
}
.contact-form__textarea-wrap .contact-form__textarea { width: 100%; box-sizing: border-box; }
.contact-form__count {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--fg-mute);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  transition: color .25s;
  background: rgba(8, 8, 12, 0.7);
  padding: 2px 6px;
  border-radius: 4px;
  backdrop-filter: blur(2px);
}
.contact-form__count.is-near { color: #ffb87a; }
.contact-form__count.is-at   { color: #ff7a7a; }

/* === Trust line at the bottom of the form === */
.contact-form__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  font-size: 11.5px;
  color: var(--fg-mute);
  letter-spacing: 0.005em;
}
.contact-form__trust svg {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  color: var(--cyan);
  opacity: 0.8;
}

.contact-form__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.contact-form__eyebrow {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}
.contact-form__title {
  font-size: clamp(20px, 1.8vw, 22px);
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1.25;
  margin: 0;
  color: var(--fg);
}

.contact-form__submit--full { width: 100%; justify-content: center; }

/* When the form is in the hero, hint text sits BELOW the submit button (not in a flex bar) */
.contact-form--vertical .contact-form__hint {
  text-align: center;
  margin: 4px 0 0;
}

/* === "What happens next" — three steps with icon, number watermark, and
   the same lift/hover treatment as the form + contact cards. === */
.next-steps {
  list-style: none;
  padding: 0;
  margin: 48px auto 0;
  max-width: 1140px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .next-steps { grid-template-columns: 1fr; max-width: 540px; } }

.next-step {
  position: relative;
  padding: 32px 28px 28px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.07);
  /* Same lift recipe as the form / contact cards — lighter blue-tinted
     surface so the cards stand off the section background. */
  background: linear-gradient(180deg, rgba(28, 28, 40, 0.70), rgba(12, 12, 18, 0.85));
  backdrop-filter: blur(12px) saturate(1.10);
  -webkit-backdrop-filter: blur(12px) saturate(1.10);
  display: flex;
  flex-direction: column;
  gap: 14px;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    0 22px 50px -22px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 1px 0 0 rgba(255, 255, 255, 0.05) inset;
  transition: transform .35s cubic-bezier(.2, .8, .25, 1),
              border-color .3s,
              box-shadow .35s;
}
/* Hover: small lift, cyan accent border, soft cyan elevation glow */
.next-step:hover {
  transform: translateY(-3px);
  border-color: rgba(92, 225, 230, 0.30);
  box-shadow:
    0 32px 70px -22px rgba(0, 0, 0, 0.65),
    0 0 80px -20px rgba(92, 225, 230, 0.20),
    0 0 0 1px rgba(92, 225, 230, 0.08) inset,
    0 1px 0 0 rgba(255, 255, 255, 0.06) inset;
}

/* Top accent hairline — subtle cyan band along the top edge */
.next-step::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(92, 225, 230, 0.5) 30%,
    rgba(92, 225, 230, 0.5) 70%,
    transparent);
  z-index: 2;
}

/* Big translucent step number watermark, top-right corner. Same vibe as
   the About page's How-We-Work rail. Brightens slightly on hover. */
.next-step__num-bg {
  position: absolute;
  top: 6px;
  right: 18px;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: clamp(64px, 6.5vw, 92px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  color: rgba(92, 225, 230, 0.05);
  pointer-events: none;
  z-index: 0;
  user-select: none;
  transition: color .35s;
}
.next-step:hover .next-step__num-bg { color: rgba(92, 225, 230, 0.10); }

/* Icon badge — cyan-tinted square with the line icon */
.next-step__icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: rgba(92, 225, 230, 0.08);
  border: 1px solid rgba(92, 225, 230, 0.22);
  display: grid;
  place-items: center;
  color: var(--cyan);
  position: relative;
  z-index: 1;
  margin-bottom: 4px;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.next-step:hover .next-step__icon {
  background: rgba(92, 225, 230, 0.12);
  border-color: rgba(92, 225, 230, 0.45);
  box-shadow: 0 0 18px -4px rgba(92, 225, 230, 0.4);
}
.next-step__icon svg { display: block; }

/* Small mono label "01 / We listen" */
.next-step__num {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  display: inline-block;
}

.next-step h3 {
  position: relative;
  z-index: 1;
  font-size: clamp(20px, 1.7vw, 22px);
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1.25;
  margin: 0;
  color: var(--fg);
}

.next-step p {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-soft);
}

/* =========================================================
   BUILD & RUN — workflow canvas + agent console
   ========================================================= */
/* Build & Run gets a wider container than the rest of the site */
#build-run > .container { max-width: 1340px; }

.build-run {
  position: relative; /* anchor for .build-run__tryme */
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: stretch;
  transition:
    opacity .8s cubic-bezier(.2, .8, .25, 1),
    transform .8s cubic-bezier(.2, .8, .25, 1);
}
/* Strengthen the section's reveal: in addition to the global reveal/.is-in
   fade, the build-run lifts + scales subtly into place so the eye is drawn
   here rather than gliding past. */
.build-run.reveal:not(.is-in) {
  transform: scale(0.96) translateY(16px);
}
.build-run.is-in {
  transform: scale(1) translateY(0);
}

/* === "Try me" nudge ===
   Floats above the canvas card top-right, pointing down at the textarea.
   Shown once per session via JS (IntersectionObserver + sessionStorage). */
.build-run__tryme {
  position: absolute;
  top: -14px;
  /* On the two-column layout, the canvas card ends 360px from the right
     edge of .build-run (340px console-card + 20px gap). Sit just inside
     the canvas card's top-right corner. */
  right: 380px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--cyan), var(--blue-2));
  color: #050507;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow:
    0 10px 28px -8px rgba(92, 225, 230, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset;
  opacity: 0;
  transform: translateY(-10px) scale(0.92);
  transition:
    opacity .35s cubic-bezier(.2, .8, .25, 1),
    transform .35s cubic-bezier(.2, .8, .25, 1);
  pointer-events: none;
}
.build-run__tryme.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: tryme-bob 2.4s ease-in-out infinite;
}
.build-run__tryme-arrow {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  animation: tryme-arrow 1.2s ease-in-out infinite;
}
@keyframes tryme-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.03); }
}
@keyframes tryme-arrow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}
@media (max-width: 1100px) {
  /* Single-column build-run: canvas card fills width, sit nudge top-right. */
  .build-run__tryme { right: 20px; }
}
@media (max-width: 759px) {
  .build-run__tryme { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .build-run__tryme.is-visible { animation: none; }
  .build-run__tryme-arrow { animation: none; }
}
@media (max-width: 1100px) {
  #build-run > .container { max-width: 1240px; }
  .build-run { grid-template-columns: 1fr; }
}

/* Mobile gate — replaces the interactive canvas on phones (<760px). Hidden by
   default on desktop; the @media block at the bottom of this section flips
   the visibility. */
.build-run-mobile {
  display: none;
  padding: 32px 28px;
  text-align: left;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.build-run-mobile__title {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.build-run-mobile__lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-soft);
}
.build-run-mobile .btn {
  margin-top: 8px;
}
@media (max-width: 759px) {
  .build-run { display: none; }
  .build-run-mobile { display: flex; }
  #build-run > .container { padding-left: 20px; padding-right: 20px; }
}

/* "Still working…" message: appears via JS at 22s if no first delta arrived.
   Shares positioning + look with .gen-progress but stays subdued. */
.gen-progress.is-slow {
  border-color: rgba(255, 165, 80, 0.35);
  box-shadow: 0 0 30px rgba(255, 165, 80, 0.12);
}
.gen-progress.is-slow .gen-progress__dot {
  background: var(--warn, #ffa550);
  box-shadow: 0 0 12px rgba(255, 165, 80, 0.7);
}

.canvas-card, .console-card {
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 540px;
  overflow: hidden;
  /* Same lift recipe as the contact form: lighter blue-tinted surface +
     cyan elevation glow. We also override the .card base class's warm
     corner-glow (::before) below to host the rotating gradient border
     instead — that's what gives the contact form its "alive" feel. */
  background: linear-gradient(180deg,
    rgba(34, 34, 48, 0.82),
    rgba(16, 16, 24, 0.92));
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 40px 90px -28px rgba(0, 0, 0, 0.75),
    0 0 110px -14px rgba(92, 225, 230, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 1px 0 0 rgba(255, 255, 255, 0.06) inset;
}
/* Override the .card base ::before (warm corner glow) on these two cards
   only — replace it with the rotating cyan→blue conic gradient hairline.
   Same @property/animation as the contact form, so they share the cycle. */
.canvas-card::before,
.console-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--form-grad-angle, 0deg),
    rgba(92, 225, 230, 0.85),
    rgba(59, 41, 255, 0.45) 25%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(92, 225, 230, 0.30) 75%,
    rgba(92, 225, 230, 0.85));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
  animation: form-border-rotate 14s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .canvas-card::before,
  .console-card::before { animation: none; }
}
.canvas-card__head, .console-card__head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--stroke);
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,0.015);
  position: relative;
  z-index: 2;
}
.console-card__head h3 { font-size: 15px; font-weight: 500; color: var(--fg); margin: 0; flex: 1; letter-spacing: -0.01em; }

/* --- DESCRIBE INPUT (replaces template tabs) --- */
/* Mode-driven visibility: describe shows when card is in "describe" mode,
   canvas-actions shows when in "workflow" mode. Smooth crossfade via CSS. */
.canvas-card[data-mode="describe"] .describe       { display: flex; }
.canvas-card[data-mode="describe"] .canvas-actions { display: none; }
.canvas-card[data-mode="describe"] .canvas         { display: none; }
.canvas-card[data-mode="workflow"] .describe       { display: none; }
.canvas-card[data-mode="workflow"] .canvas-actions { display: flex; }
.canvas-card[data-mode="workflow"] .canvas         { display: block; }
.canvas-card[data-mode="generating"] .describe         { display: flex; opacity: 0.55; pointer-events: none; }
.canvas-card[data-mode="generating"] .canvas-actions   { display: none; }
.canvas-card[data-mode="generating"] .canvas           { display: block; }

.describe {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 6px;
  width: 100%;
  min-height: 200px;
}

/* Wrapper that hosts the animated placeholder overlay alongside the textarea. */
.describe__input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  min-height: 120px;
}
.describe__input {
  width: 100%;
  flex: 1;
  min-height: 120px;
  resize: vertical;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(8,8,12,0.6);
  color: var(--fg);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  transition: border-color .25s, background .25s, box-shadow .25s;
  outline: none;
  position: relative;
  z-index: 1;
}
.describe__input:hover {
  border-color: var(--stroke-strong);
  background: rgba(8,8,12,0.75);
}
.describe__input:focus {
  border-color: rgba(92,225,230,0.55);
  background: rgba(8,8,12,0.85);
  box-shadow: 0 0 0 4px rgba(92,225,230,0.10), 0 12px 32px -10px rgba(92,225,230,0.25);
}

/* Animated placeholder overlay — cycles through real example prompts when
   the textarea is empty and unfocused. JS swaps the inner text every 3s and
   toggles a `.is-empty` class on the wrapper to control visibility. */
.describe__placeholder {
  position: absolute;
  top: 14px;
  left: 17px;
  right: 17px;
  pointer-events: none;
  color: var(--fg-dim);
  font-size: 14.5px;
  line-height: 1.5;
  z-index: 2;
  opacity: 0;
  transition: opacity .25s ease-out;
}
.describe__input-wrap.is-empty .describe__placeholder {
  opacity: 1;
}
.describe__input-wrap.is-empty:focus-within .describe__placeholder {
  opacity: 0;   /* hide once user focuses to type */
}
.describe__placeholder-text {
  display: inline-block;
  transition: opacity .25s ease-out, transform .35s cubic-bezier(.2, .8, .25, 1);
}
.describe__placeholder-text.is-swapping {
  opacity: 0;
  transform: translateY(6px);
}

.describe__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
}
.describe__counter {
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.describe__counter.is-near-limit { color: var(--gold); }
.describe__counter.is-at-limit   { color: #fd8003; }

#describe-btn {
  /* Inherits .canvas-btn--run; widen + emphasize since this is the primary CTA */
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
/* Disabled-but-alive: previously was opacity 0.4 + grayscale — read as dead.
   New version keeps a faint cyan ring so the button stays the visual anchor
   in the describe view even before the user has typed enough. */
#describe-btn:disabled {
  pointer-events: none;
  opacity: 0.75;
  filter: none;
  box-shadow:
    0 0 0 1px rgba(92, 225, 230, 0.22) inset,
    0 0 0 1px rgba(92, 225, 230, 0.18);
}
#describe-btn:disabled .describe__btn-label {
  color: rgba(218, 244, 247, 0.7);
}
#describe-btn:disabled svg { opacity: 0.55; }
/* When the button becomes enabled (≥30 chars typed) it gains a slow breathing
   cyan glow so the call-to-action draws attention right when it's clickable. */
#describe-btn:not(:disabled):not(.is-loading) {
  animation: describe-btn-pulse 2.6s ease-in-out infinite;
}
@keyframes describe-btn-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(92, 225, 230, 0.45),
      0 8px 22px -8px rgba(92, 225, 230, 0.55);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(92, 225, 230, 0.65),
      0 12px 32px -8px rgba(92, 225, 230, 0.75),
      0 0 22px -2px rgba(92, 225, 230, 0.45);
  }
}
@media (prefers-reduced-motion: reduce) {
  #describe-btn:not(:disabled):not(.is-loading) { animation: none; }
}
#describe-btn.is-loading .describe__btn-label::after {
  content: '…';
  display: inline-block;
  margin-left: 2px;
  animation: dots 1.2s steps(4, end) infinite;
  width: 1em;
  text-align: left;
}
@keyframes dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}
#describe-btn.is-loading svg { display: none; }

/* === Suggestion chips ===
   Sit between the bar (counter + submit) and the disclaimer. One click
   fills the textarea with a real prompt via a typewriter effect (see
   script.js). Removes cold-start friction. */
.describe__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: -2px 0 -4px;
}
.describe__suggestions-label {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-right: 2px;
}
/* Action-card chips: icon-tile + title/hint stack + slide-in arrow.
   Hover lifts -2px, cyan glow drops, and a masked gradient hairline
   fades in via ::before (same border-language as the canvas card and
   featured pricing card — visually consistent across the product). */
.describe__chip {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 200px;
  padding: 9px 14px 9px 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--stroke);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition:
    background .25s,
    border-color .25s,
    transform .25s cubic-bezier(.2, .8, .25, 1),
    box-shadow .25s;
}
/* Gradient hairline ring on hover — cyan → blue-2 — using the same
   mask-composite trick as the canvas card and featured pricing card. */
.describe__chip::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(92, 225, 230, 0.75),
    rgba(92, 225, 230, 0.15) 35%,
    rgba(26, 26, 170, 0.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease-out;
  z-index: 1;
}
.describe__chip:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(92, 225, 230, 0.07), rgba(92, 225, 230, 0.02));
  border-color: transparent;
  box-shadow: 0 14px 32px -12px rgba(92, 225, 230, 0.55);
}
.describe__chip:hover::before { opacity: 1; }
.describe__chip:active { transform: translateY(0); }
.describe__chip:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(92, 225, 230, 0.55),
    0 14px 32px -12px rgba(92, 225, 230, 0.55);
}

/* Icon tile — cyan-tinted square anchoring the left side. */
.describe__chip-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(92, 225, 230, 0.14), rgba(92, 225, 230, 0.04));
  border: 1px solid rgba(92, 225, 230, 0.22);
  color: var(--cyan);
  flex-shrink: 0;
  transition: background .25s, border-color .25s;
}
.describe__chip-icon svg { width: 16px; height: 16px; }
.describe__chip:hover .describe__chip-icon {
  background: linear-gradient(180deg, rgba(92, 225, 230, 0.22), rgba(92, 225, 230, 0.06));
  border-color: rgba(92, 225, 230, 0.40);
}

/* Two-line text block — title + outcome hint. */
.describe__chip-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
  line-height: 1.2;
}
.describe__chip-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.describe__chip-hint {
  font-size: 11px;
  color: var(--fg-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0;
  transition: color .25s;
}
.describe__chip:hover .describe__chip-hint { color: var(--fg-soft); }

/* Arrow — hidden by default, slides in from -4px on hover. */
.describe__chip-arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--fg-mute);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .25s, transform .25s cubic-bezier(.2, .8, .25, 1), color .25s;
}
.describe__chip:hover .describe__chip-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--cyan);
}

@media (prefers-reduced-motion: reduce) {
  .describe__chip,
  .describe__chip::before,
  .describe__chip-arrow { transition: none; }
  .describe__chip:hover { transform: none; }
}

.describe__disclaimer {
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
  color: var(--fg-dim);
  letter-spacing: 0.005em;
  transition: color .2s;
}
.describe__disclaimer.is-error {
  color: #ffb1a8;
  font-size: 12px;
  font-weight: 500;
}
.describe__disclaimer.is-error a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(92,225,230,0.4);
  white-space: nowrap;
  margin-left: 4px;
}
.describe__disclaimer.is-error a:hover { border-bottom-color: var(--cyan); }
.describe__disclaimer-cap {
  color: var(--fg-soft);
  font-weight: 500;
  white-space: nowrap;
}
.describe__disclaimer.is-error .describe__disclaimer-cap { display: none; }

/* Fallback notice — small amber banner above the canvas when the AI call
   failed and we substituted the closest hand-built workflow. */
.fallback-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 12px;
  line-height: 1.5;
  color: #ffd5a8;
  background: rgba(255, 165, 80, 0.06);
  border-bottom: 1px solid rgba(255, 165, 80, 0.18);
  letter-spacing: 0.005em;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .35s, transform .35s;
}
.fallback-notice.is-visible { opacity: 1; transform: translateY(0); }
.fallback-notice__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ffa550;
  box-shadow: 0 0 10px rgba(255,165,80,0.6);
  flex-shrink: 0;
}
.fallback-notice a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(92,225,230,0.4);
}
.fallback-notice a:hover { border-bottom-color: var(--cyan); }

/* Workflow view header — title sits in the centre column of .canvas-actions
   under a small eyebrow. Truncation is enforced because AI titles can be long. */
.canvas-card__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--fg);
  margin: 0;
  letter-spacing: -0.012em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* === GENERATION PROGRESS OVERLAY (shown while AI is streaming) === */
.gen-progress {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: rgba(8, 8, 12, 0.92);
  border: 1px solid rgba(92, 225, 230, 0.35);
  border-radius: var(--r-pill);
  font-size: 13px;
  color: var(--fg-soft);
  letter-spacing: 0.005em;
  z-index: 10;
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 30px rgba(92, 225, 230, 0.15);
  animation: gen-progress-in .35s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes gen-progress-in {
  from { opacity: 0; transform: translate(-50%, -40%) scale(0.95); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.gen-progress__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  animation: pulse-live 1.2s ease-in-out infinite;
  flex-shrink: 0;
}
.gen-progress__msg { font-variant-numeric: tabular-nums; }

/* === PRICE CARD (shown after run completes) === */
.price-card {
  margin-top: 24px;
  padding: 32px;
  border-radius: var(--r-lg);
  display: grid;
  gap: 18px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s cubic-bezier(.2,.9,.3,1), transform .5s cubic-bezier(.2,.9,.3,1);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.price-card.is-visible { opacity: 1; transform: translateY(0); }
.price-card__head {
  display: grid;
  gap: 8px;
  border-bottom: 1px solid var(--stroke);
  padding-bottom: 18px;
}
.price-card__head .eyebrow { display: inline-flex; align-self: start; }
.price-card__title {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--fg);
}
.price-card__sub {
  font-size: 13px;
  color: var(--fg-mute);
  margin: 0;
  letter-spacing: -0.005em;
}
.price-card__sub strong { color: var(--fg); font-weight: 500; }

.price-card__rows {
  display: grid;
  gap: 10px;
}
.price-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid var(--stroke);
}
.price-card__row:last-child { border-bottom: none; }
.price-card__label {
  font-size: 13px;
  color: var(--fg-mute);
  letter-spacing: -0.005em;
}
.price-card__value {
  font-size: 16px;
  color: var(--fg);
  font-weight: 500;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.price-card__explain {
  margin: 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(92, 225, 230, 0.04);
  border: 1px solid rgba(92, 225, 230, 0.18);
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-soft);
}
.price-card__cta {
  justify-self: start;
  margin-top: 6px;
}
.price-card__disclaimer {
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
  color: var(--fg-dim);
  letter-spacing: 0.005em;
}

/* Workflow header — grid keeps the back-icon and run-button visually balanced,
   and the title/eyebrow centered between them with hard truncation if long. */
.canvas-actions {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  width: 100%;
}
.canvas-actions__title-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.canvas-actions__eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  font-family: var(--font-mono, ui-monospace, monospace);
  line-height: 1;
}

.canvas-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--stroke);
  color: var(--fg-soft);
  background: rgba(255,255,255,0.03);
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
/* Compact icon button (e.g. New description / back) — square 36x36 circle */
.canvas-btn--icon {
  width: 36px; height: 36px;
  padding: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--fg-soft);
}
.canvas-btn--icon:hover {
  color: var(--fg);
  border-color: var(--stroke-strong);
  background: rgba(255,255,255,0.06);
}
/* Legacy ghost variant (still used by the console reset button) */
.canvas-btn--ghost { padding: 8px 12px; min-width: 32px; justify-content: center; }
.canvas-btn--ghost:hover { color: var(--fg); border-color: var(--stroke-strong); background: rgba(255,255,255,0.06); }
/* Primary run action */
.canvas-btn--run {
  padding: 9px 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  background: linear-gradient(135deg, var(--blue-1), var(--blue-2));
  color: #fff; border-color: rgba(59,41,255,0.6);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset, 0 8px 22px -8px rgba(21,0,255,0.6);
}
.canvas-btn--run:hover {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset, 0 12px 30px -6px rgba(59,41,255,0.7);
  transform: translateY(-1px);
}
.canvas-btn--run.is-running {
  pointer-events: none;
  opacity: 0.75;
}
.canvas-btn--run.is-running svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- CANVAS --- */
.canvas {
  position: relative;
  flex: 1;
  min-height: 510px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(80% 60% at 50% 50%, rgba(92,225,230,0.04), transparent 70%),
    linear-gradient(180deg, #050505, #000);
}
.canvas__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 90%);
  pointer-events: none;
  z-index: 0;
}

/* Pan layer — both the SVG edges and the absolutely-positioned nodes share
   the same translate transform so they move together when the canvas auto-
   pans to follow the active node. The variable lives on .canvas (set by JS)
   and is inherited here. The grid + add-button overlays sit outside this pair
   so the visible chrome stays put while the workflow scrolls underneath. */
.canvas__nodes,
.canvas__edges {
  transform: translateX(var(--canvas-pan-x, 0px));
  /* Faster than a typical step delay (~500ms) so the active node finishes
     panning into view before the next activation takes over. */
  transition: transform .4s cubic-bezier(.2,.8,.25,1);
  will-change: transform;
}
/* Disable the transition while the visitor is actively dragging — the
   transform must follow the cursor instantly. JS toggles `is-panning`. */
.canvas.is-panning .canvas__nodes,
.canvas.is-panning .canvas__edges { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .canvas__nodes, .canvas__edges { transition: none; }
}

/* Cursor feedback — only show grab cursor when the workflow is wider than
   the canvas (data-pannable=true is set by JS in panToNode). */
.canvas[data-pannable="true"] { cursor: grab; }
.canvas[data-pannable="true"].is-panning { cursor: grabbing; }
/* Subtle edge gradient hints there's clipped content. The scrollbar at the
   bottom is the primary affordance; these are quiet visual cues only. */
.canvas[data-pannable="true"]::before,
.canvas[data-pannable="true"]::after {
  content: '';
  position: absolute;
  top: 0; bottom: 28px;
  width: 36px;
  pointer-events: none;
  z-index: 4;
  opacity: .8;
  transition: opacity .4s;
}
.canvas[data-pannable="true"]::before {
  left: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.55), transparent);
}
.canvas[data-pannable="true"]::after {
  right: 0;
  background: linear-gradient(270deg, rgba(0,0,0,0.55), transparent);
}
.canvas[data-pannable="true"].is-pan-touched::before,
.canvas[data-pannable="true"].is-pan-touched::after { opacity: 0; }

/* === Horizontal scrollbar === */
.canvas__scrollbar {
  position: absolute;
  /* `right: 140px` keeps the track from sliding under the "Add node" pill,
     which sits at right:16 with ~120px width. */
  left: 16px; right: 140px;
  bottom: 18px;
  height: 10px;
  z-index: 6;
  display: none;
  align-items: center;
}
.canvas[data-pannable="true"] .canvas__scrollbar { display: flex; }
.canvas__scrollbar-track {
  position: relative;
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 999px;
  cursor: pointer;
  transition: height .15s, background .2s;
}
.canvas__scrollbar-track:hover { height: 8px; background: rgba(255,255,255,0.07); }
.canvas__scrollbar-thumb {
  position: absolute;
  top: 0; bottom: 0;
  /* JS sets left and width inline */
  background: linear-gradient(180deg, rgba(92,225,230,0.55), rgba(92,225,230,0.35));
  border-radius: 999px;
  cursor: grab;
  box-shadow: 0 0 8px rgba(92,225,230,0.25);
  transition: left .35s cubic-bezier(.2,.8,.25,1), width .35s cubic-bezier(.2,.8,.25,1), background .2s;
}
.canvas__scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(92,225,230,0.75), rgba(92,225,230,0.5)); }
/* While the visitor is dragging the thumb (or panning the canvas), the
   thumb must follow the cursor instantly — no transition. */
.canvas.is-panning .canvas__scrollbar-thumb,
.canvas__scrollbar.is-dragging .canvas__scrollbar-thumb {
  transition: none;
  cursor: grabbing;
}
@media (prefers-reduced-motion: reduce) {
  .canvas__scrollbar-thumb { transition: none; }
}

.canvas__edges {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.canvas-edge {
  fill: none;
  stroke: url(#edgeGrad);
  stroke-width: 1.6;
  opacity: 0;
  stroke-dasharray: 6 4;
  animation: edge-draw .55s ease forwards, edge-flow 5s linear .8s infinite;
}
@keyframes edge-draw {
  from { opacity: 0; stroke-dashoffset: 60; }
  to   { opacity: 0.85; stroke-dashoffset: 0; }
}
@keyframes edge-flow {
  to { stroke-dashoffset: -120; }
}
.canvas-edge.is-active {
  stroke: var(--cyan);
  stroke-width: 2;
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(92,225,230,0.6));
}

.canvas__nodes { position: absolute; inset: 0; z-index: 2; }

.canvas-node {
  position: absolute;
  display: grid; grid-template-columns: 32px 1fr;
  align-items: center; gap: 10px;
  width: 168px;
  padding: 10px 14px 10px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(20,20,28,0.95), rgba(8,8,12,0.95));
  border: 1px solid var(--stroke-strong);
  color: var(--fg);
  font-size: 13px; font-weight: 500;
  cursor: grab;
  user-select: none;
  transition: border-color .25s, box-shadow .25s, transform .25s;
  opacity: 0;
  animation: node-pop .5s cubic-bezier(.2,.9,.3,1.4) forwards;
  transform: translate(-50%, -50%);  /* centered around node coords */
}
.canvas-node:hover {
  border-color: rgba(92,225,230,0.5);
  box-shadow: 0 0 0 1px rgba(92,225,230,0.4) inset, 0 12px 30px -10px rgba(92,225,230,0.4);
  z-index: 5;
}
.canvas-node.is-dragging { cursor: grabbing; z-index: 10; transition: none; }
/* State-class override: `.canvas-node` has `opacity: 0` + `animation: node-pop forwards`
   to fade in on render. Adding any state class replaces the `animation` property, which
   strips the `forwards` fill state — opacity reverts to the base `0` and the node
   disappears mid-run. Pin opacity here so active/awaiting/done nodes stay visible. */
.canvas-node.is-active,
.canvas-node.is-awaiting,
.canvas-node.is-done {
  opacity: 1;
}
.canvas-node.is-active {
  border-color: var(--cyan);
  z-index: 6;
  animation: node-active-pulse 1.5s ease-in-out infinite;
}
.canvas-node.is-active .canvas-node__icon {
  background: linear-gradient(135deg, rgba(92,225,230,0.28), rgba(59,41,255,0.18));
  color: var(--cyan);
  animation: node-active-icon 1.5s ease-in-out infinite;
}
/* Expanding ring halo — visible "this node is running right now" signal. */
.canvas-node.is-active::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  border: 1.5px solid rgba(92,225,230,0.55);
  pointer-events: none;
  animation: node-active-ring 1.8s cubic-bezier(.2,.6,.3,1) infinite;
}
@keyframes node-active-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(92,225,230,0.7)  inset, 0 0 22px rgba(92,225,230,0.45); }
  50%      { box-shadow: 0 0 0 2px rgba(92,225,230,1.0)  inset, 0 0 44px rgba(92,225,230,0.85); }
}
@keyframes node-active-icon {
  0%, 100% { box-shadow: 0 0 0 0 rgba(92,225,230,0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(92,225,230,0.22); }
}
@keyframes node-active-ring {
  0%   { transform: scale(1);    opacity: 0.55; }
  70%  { opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .canvas-node.is-active,
  .canvas-node.is-active .canvas-node__icon,
  .canvas-node.is-active::before { animation: none; }
  .canvas-node.is-active { box-shadow: 0 0 0 2px rgba(92,225,230,0.85) inset, 0 0 32px rgba(92,225,230,0.7); }
}
/* Console hit a clarify — mirror the gold "awaiting input" state on the active node */
.canvas-node.is-awaiting {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(213,192,43,0.6) inset, 0 0 26px rgba(213,192,43,0.5);
  animation: node-await-pulse 1.6s ease-in-out infinite;
}
.canvas-node.is-awaiting .canvas-node__icon {
  background: linear-gradient(135deg, rgba(213,192,43,0.25), rgba(253,128,3,0.15));
  color: var(--gold);
}
@keyframes node-await-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(213,192,43,0.6) inset, 0 0 22px rgba(213,192,43,0.45); }
  50%      { box-shadow: 0 0 0 1px rgba(213,192,43,0.9) inset, 0 0 36px rgba(213,192,43,0.7); }
}
.canvas-node.is-done .canvas-node__icon {
  background: rgba(92,225,230,0.12);
  color: var(--cyan);
}
.canvas-node.is-done::after {
  content: "✓";
  position: absolute; top: -6px; right: -6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--cyan); color: #000;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700;
  box-shadow: 0 0 12px rgba(92,225,230,0.7);
}
@keyframes node-pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.canvas-node__icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--stroke);
  color: var(--fg-mute);
  transition: background .3s, color .3s;
}
.canvas-node__icon svg { width: 16px; height: 16px; }
.canvas-node__label { display: block; line-height: 1.2; }
.canvas-node__type { display: block; font-size: 10px; font-weight: 400; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }

.canvas-node__del {
  position: absolute;
  top: -8px; right: -8px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(8,8,12,0.95);
  border: 1px solid var(--stroke-strong);
  color: var(--fg-mute);
  display: grid; place-items: center;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity .18s ease, transform .18s ease, color .2s, background .2s, border-color .2s;
  z-index: 12;
}
.canvas-node__del svg { width: 10px; height: 10px; display: block; }
.canvas-node:hover .canvas-node__del {
  opacity: 1;
  transform: scale(1);
}
.canvas-node__del:hover {
  background: rgba(245,165,36,0.18);
  border-color: rgba(245,165,36,0.55);
  color: #f5a524;
}
.canvas-node.is-dragging .canvas-node__del { opacity: 0; }

.canvas-node--trigger     .canvas-node__icon { color: #fd8003; }
.canvas-node--ai          .canvas-node__icon { color: var(--cyan); background: rgba(92,225,230,0.08); }
.canvas-node--logic       .canvas-node__icon { color: #d5c02b; }
.canvas-node--action      .canvas-node__icon { color: var(--blue-2); }
.canvas-node--integration .canvas-node__icon { color: #c9c9c9; }
.canvas-node--human       .canvas-node__icon { color: #a3a3a3; }

/* AI extending: pulsing glow over the canvas */
.canvas.is-extending::after {
  content: "AI is extending the workflow…";
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cyan);
  padding: 8px 16px; border-radius: var(--r-pill);
  background: rgba(8,8,12,0.85); border: 1px solid rgba(92,225,230,0.4);
  z-index: 8;
  animation: pop-in .4s ease forwards, ai-pulse 1.6s ease-in-out infinite;
}
@keyframes pop-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes ai-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(92,225,230,0.4); }
  50%      { box-shadow: 0 0 28px rgba(92,225,230,0.7); }
}

.canvas__hint {
  position: absolute; bottom: 16px; left: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(8,8,12,0.7); border: 1px solid var(--stroke);
  color: var(--fg-mute); font-size: 11px;
  z-index: 7;
  transition: opacity .4s ease;
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.canvas__hint.is-hidden { opacity: 0; }
.canvas__hint-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: pulse-live 1.6s ease-in-out infinite;
}

.canvas__add {
  position: absolute; bottom: 16px; right: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: rgba(8,8,12,0.8); border: 1px solid var(--stroke);
  color: var(--fg-soft); font-size: 12px; font-weight: 500;
  z-index: 7;
  transition: background .25s, color .25s, border-color .25s;
  backdrop-filter: blur(8px);
}
.canvas__add:hover { color: var(--fg); border-color: var(--stroke-strong); background: rgba(8,8,12,0.95); }

.canvas__add-pop[hidden] { display: none !important; }
.canvas__add-pop {
  position: absolute; bottom: 60px; right: 16px;
  display: grid; gap: 2px;
  padding: 8px;
  background: rgba(10,10,14,0.95); border: 1px solid var(--stroke-strong);
  border-radius: 12px;
  z-index: 8;
  min-width: 180px;
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  animation: pop-up .25s ease;
}
@keyframes pop-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.canvas__add-pop button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px; color: var(--fg-soft);
  text-align: left;
  transition: background .2s, color .2s;
}
.canvas__add-pop button:hover { background: rgba(92,225,230,0.08); color: var(--fg); }
.ni { width: 18px; height: 18px; display: inline-grid; place-items: center; border-radius: 5px; background: rgba(255,255,255,0.05); flex-shrink: 0; }
.ni::before { content: "·"; font-size: 14px; color: var(--cyan); }
.ni-trigger::before { content: "↯"; }
.ni-ai::before { content: "✶"; }
.ni-logic::before { content: "⌥"; }
.ni-action::before { content: "→"; }
.ni-integration::before { content: "⊞"; }
.ni-human::before { content: "☉"; }

/* --- AGENT CONSOLE --- */
.console-card { font-family: var(--font); }
.console__pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.04);
  color: var(--fg-mute);
  border: 1px solid var(--stroke);
}
.console__pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-mute); }
.console__pill[data-state="active"] { color: var(--cyan); border-color: rgba(92,225,230,0.4); background: rgba(92,225,230,0.06); }
.console__pill[data-state="active"] i { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: pulse-live 1.6s ease-in-out infinite; }
.console__pill[data-state="awaiting"] { color: var(--gold); border-color: rgba(213,192,43,0.4); background: rgba(213,192,43,0.06); }
.console__pill[data-state="awaiting"] i { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.console__pill[data-state="complete"] { color: #5ce1e6; border-color: rgba(92,225,230,0.4); }
.console__pill[data-state="complete"] i { background: var(--cyan); }

.console {
  /* min-height: 0 is the magic flexbox incantation that lets this child shrink
     below its content size — without it, flex defaults to min-height: auto
     (= content size), the parent grows tall, and overflow-y: auto never engages.
     With it, the body fills available space and scrolls internally on overflow. */
  flex: 1 1 0;
  min-height: 0;
  padding: 18px 20px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex; flex-direction: column;
  gap: 12px;
  font-size: 13px;
  color: var(--fg-soft);
  scrollbar-width: thin;
  scrollbar-color: var(--stroke) transparent;
}
.console::-webkit-scrollbar { width: 6px; }
.console::-webkit-scrollbar-thumb { background: var(--stroke-strong); border-radius: 6px; }

.console__hint { color: var(--fg-dim); font-size: 13px; margin: 0; padding: 12px 0; }
.console__hint kbd {
  font-family: var(--font);
  padding: 2px 8px; border-radius: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--stroke);
  font-size: 12px; color: var(--fg-soft);
}

.cm {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: flex-start;
  opacity: 0;
  animation: cm-in .35s ease forwards;
}
@keyframes cm-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cm__icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--stroke);
  font-size: 11px; line-height: 1;
  color: var(--fg-mute);
  flex-shrink: 0;
}
.cm__body { line-height: 1.5; }
.cm__label { font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 4px; }
.cm__time { font-size: 10px; color: var(--fg-dim); margin-left: 8px; font-variant-numeric: tabular-nums; }

/* --- message types --- */
.cm--goal       .cm__icon { background: rgba(59,41,255,0.15); color: var(--blue-2); border-color: rgba(59,41,255,0.4); }
.cm--goal       .cm__body { font-weight: 500; color: var(--fg); font-size: 14px; }

.cm--plan       .cm__icon { background: rgba(213,192,43,0.12); color: var(--gold); border-color: rgba(213,192,43,0.4); }
.cm__plan-list  { list-style: none; padding: 8px 0 0; margin: 0; display: grid; gap: 6px; }
.cm__plan-list li {
  position: relative;
  padding-left: 22px;
  font-size: 13px; color: var(--fg-soft);
  opacity: 0;
  animation: cm-in .3s ease forwards;
}
.cm__plan-list li::before {
  content: ""; position: absolute; left: 4px; top: 7px;
  width: 12px; height: 1px; background: var(--fg-dim);
}

.cm--thinking   .cm__icon { background: rgba(255,255,255,0.04); }
.cm--thinking   .cm__body { font-style: italic; color: var(--fg-mute); }
.cm--thinking::after {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan);
  margin-left: 8px; animation: pulse-live 1.2s ease-in-out infinite;
  vertical-align: middle;
}

.cm--tool       .cm__icon { background: rgba(92,225,230,0.08); color: var(--cyan); border-color: rgba(92,225,230,0.4); }
.cm--tool .cm__name {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  background: rgba(92,225,230,0.06);
  border: 1px solid rgba(92,225,230,0.2);
  padding: 3px 8px; border-radius: 6px;
  color: var(--cyan);
}
.cm--tool .cm__summary { color: var(--fg-mute); margin-top: 6px; font-size: 12px; }
.cm--tool .cm__summary::before { content: "→ "; color: var(--fg-dim); }

.cm--clarify    .cm__icon { background: rgba(213,192,43,0.12); color: var(--gold); border-color: rgba(213,192,43,0.4); }
.cm--clarify .cm__question { font-weight: 500; color: var(--fg); }
.cm--clarify {
  /* Stays pinned to the bottom of the console while waiting for input + briefly afterwards
     so the visitor can still see the question they just answered. */
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: 4px -8px 4px -8px;
  padding: 12px 14px 14px;
  background: rgba(10, 10, 14, 0.94);
  border: 1px solid rgba(213, 192, 43, 0.42);
  border-radius: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 -10px 24px -8px rgba(0,0,0,0.6);
  animation: cm-clarify-in .35s cubic-bezier(.2,.9,.3,1.4) forwards,
             cm-clarify-pulse 2.4s ease-in-out infinite .35s;
}
@keyframes cm-clarify-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cm-clarify-pulse {
  0%, 100% { box-shadow: 0 -10px 24px -8px rgba(0,0,0,0.6),
                          0 0 0 1px rgba(213,192,43,0.35) inset,
                          0 0 12px rgba(213,192,43,0.15); }
  50%      { box-shadow: 0 -10px 24px -8px rgba(0,0,0,0.6),
                          0 0 0 1px rgba(213,192,43,0.7) inset,
                          0 0 22px rgba(213,192,43,0.4); }
}
.cm--clarify.is-resolved {
  /* After the visitor clicks, stop pulsing and soften the border */
  animation: cm-clarify-in .35s cubic-bezier(.2,.9,.3,1.4) forwards;
  border-color: rgba(213, 192, 43, 0.2);
}
.cm--clarify.is-released {
  /* Released from sticky after a short delay so the conversation can flow naturally */
  position: static;
}
.cm__choices {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 12px;
}
.cm__choice {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--stroke-strong);
  background: rgba(255,255,255,0.04);
  color: var(--fg);
  font-size: 12px; font-weight: 500;
  transition: background .25s, border-color .25s, color .25s, transform .15s;
}
.cm__choice:hover:not(:disabled) {
  background: rgba(92,225,230,0.08);
  border-color: rgba(92,225,230,0.5);
  color: var(--fg);
}
.cm__choice:disabled {
  cursor: default;
}
.cm__choice.is-selected {
  background: linear-gradient(135deg, rgba(92,225,230,0.18), rgba(59,41,255,0.1));
  border-color: rgba(92,225,230,0.6);
  color: var(--fg);
}
.cm__choices.is-resolved .cm__choice:not(.is-selected) { opacity: 0.4; pointer-events: none; }

.cm--complete   .cm__icon { background: rgba(92,225,230,0.15); color: var(--cyan); border-color: rgba(92,225,230,0.5); }
.cm--complete   .cm__body { color: var(--fg); font-weight: 500; }
.cm--complete   .cm__stat { color: var(--fg-mute); font-size: 12px; margin-top: 4px; }

/* mobile */
@media (max-width: 700px) {
  .canvas { min-height: 380px; }
  .canvas-card, .console-card { min-height: 480px; }
  .canvas-card__head, .console-card__head { padding: 14px 16px; }
  .canvas-tab { padding: 6px 10px; font-size: 12px; }
  .canvas-node { width: 142px; padding: 8px 10px 8px 8px; }
  .canvas__hint { font-size: 10px; bottom: 12px; left: 12px; }
  .canvas__add { font-size: 11px; padding: 6px 10px; }
}

/* =========================================================
   LIVE TELEMETRY DASHBOARD — engineering-grade redesign
   Single accent (cyan), grayscale otherwise, mono for all numbers.
   ========================================================= */

/* Mono stack — for every numeric character */
.mono, .dash .kpi__value, .dash .kpi__delta, .dash .kpi__compare,
.dash .kpi__live, .dash .kpi__foot, .dash .kpi__sub-num, .dash .kpi__age,
.dash .hero-chart__sub, .dash .hero-chart__range, .dash .hero-chart__yaxis,
.dash .hero-chart__xaxis, .dash .hero-chart__threshold-label,
.dash .hero-chart__stamp, .dash .hero-chart__tooltip,
.dash .bar-list__sub, .dash .event-stream__sub,
.dash .br__pct, .dash .br__count,
.dash .ev__time, .dash .ev__id, .dash .ev__metric {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "ss01";
}

.dash {
  display: grid;
  gap: 16px;
  --d-bg:        #0a0b0d;
  --d-surface:   rgba(255,255,255,0.025);
  --d-hairline:  rgba(255,255,255,0.07);
  --d-hairline2: rgba(255,255,255,0.12);
  --d-text-1:    #e6e8eb;
  --d-text-2:    #8a9099;
  --d-text-3:    #5a6068;
  --d-accent:    #5ce1e6;
  --d-accent-d:  rgba(92,225,230,0.14);
  --d-warn:      #f5a524;
  --d-danger:    #f87171;
}

.live-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--d-accent);
  box-shadow: 0 0 0 0 rgba(92,225,230,0.55);
  animation: pulse-ring 2.4s ease-out infinite;
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(92,225,230,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(92,225,230,0); }
  100% { box-shadow: 0 0 0 0 rgba(92,225,230,0); }
}

/* === STATUS BAR === */
.dash__status {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--d-surface);
  border: 1px solid var(--d-hairline);
  font-size: 11px;
  color: var(--d-text-3);
  letter-spacing: 0.02em;
}
.dash__status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--d-accent);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.dash__status-pill i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--d-accent);
  box-shadow: 0 0 0 0 rgba(92,225,230,0.6);
  animation: pulse-ring 2.4s ease-out infinite;
}
.dash__status-meta { color: var(--d-text-2); }
.dash__status-sep  { color: var(--d-text-3); }
.dash__status-update { margin-left: auto; }

/* === KPI TILES === */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .kpi-grid { grid-template-columns: 1fr; } }

.kpi {
  position: relative;
  padding: 14px 16px 10px;
  border-radius: 10px;
  background: var(--d-surface);
  border: 1px solid var(--d-hairline);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .25s, background .25s;
  isolation: isolate;
  overflow: hidden;
  min-height: 138px;
}
.kpi:hover { border-color: rgba(92,225,230,0.4); background: rgba(255,255,255,0.035); }
.kpi__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 2px;
}
.kpi__label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-text-2);
  font-weight: 500;
}
.kpi__live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d-accent);
}
.kpi__live .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--d-accent);
  box-shadow: 0 0 0 0 rgba(92,225,230,0.6);
  animation: pulse-ring 2.4s ease-out infinite;
}
.kpi__value {
  font-size: 30px;
  line-height: 1.05;
  font-weight: 500;
  color: var(--d-text-1);
  letter-spacing: -0.02em;
}
.kpi__unit {
  font-size: 12px;
  color: var(--d-text-3);
  margin-left: 6px;
  letter-spacing: 0.04em;
}
.kpi__row { display: flex; align-items: baseline; gap: 8px; }
.kpi__delta {
  font-size: 12px;
  color: var(--d-accent);
  font-weight: 500;
}
.kpi__delta.is-down { color: var(--d-warn); }
.kpi__delta::before { content: "↗ "; }
.kpi__delta.is-down::before { content: "↘ "; }
.kpi__compare { font-size: 11px; color: var(--d-text-3); }

.kpi__spark {
  width: 100%; height: 24px;
  margin-top: 4px;
  pointer-events: none;
}
.kpi__spark .line {
  fill: none;
  stroke: var(--d-accent);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
.kpi__spark .tip {
  fill: var(--d-accent);
  filter: drop-shadow(0 0 5px rgba(92,225,230,0.7));
}
.kpi__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 10px;
  color: var(--d-text-3);
  letter-spacing: 0.02em;
  margin-top: 4px;
}
.kpi__sub-num { color: var(--d-text-2); }

/* === HERO CHART === */
.hero-chart {
  position: relative;
  border-radius: 12px;
  background: var(--d-surface);
  border: 1px solid var(--d-hairline);
  padding: 18px 20px 16px;
  display: flex; flex-direction: column;
  isolation: isolate;
  overflow: hidden;
}
.hero-chart__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.hero-chart__title h3 {
  font-size: 15px;
  font-weight: 500;
  color: var(--d-text-1);
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.hero-chart__sub {
  font-size: 11px;
  color: var(--d-text-3);
  letter-spacing: 0.02em;
}

.hero-chart__range {
  display: inline-flex;
  padding: 2px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--d-hairline);
  border-radius: var(--r-pill);
  gap: 0;
}
.hero-chart__range-btn {
  font-size: 11px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  color: var(--d-text-3);
  letter-spacing: 0.04em;
  transition: color .2s, background .2s;
}
.hero-chart__range-btn:hover { color: var(--d-text-1); }
.hero-chart__range-btn.is-active {
  background: rgba(92,225,230,0.1);
  color: var(--d-accent);
}

.hero-chart__wrap {
  position: relative;
  height: 320px;
  margin: 0 -8px;
  padding: 0 56px 22px 8px;
}
.hero-chart__svg {
  width: 100%; height: 100%;
  overflow: visible;
}

.hero-chart__grid line {
  stroke: var(--d-hairline);
  stroke-width: 1;
}
.hero-chart__envelope {
  fill: rgba(92,225,230,0.06);
  stroke: none;
}
.hero-chart__threshold {
  stroke: var(--d-warn);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  opacity: 0.55;
}
.hero-chart__prev {
  fill: none;
  stroke: var(--d-text-2);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: 0.4;
}
.hero-chart__fill {
  fill: url(#heroFill);
  stroke: none;
}
.hero-chart__line {
  fill: none;
  stroke: var(--d-accent);
  stroke-width: 1.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(92,225,230,0.25));
}
.hero-chart__halo {
  fill: rgba(92,225,230,0.12);
  filter: blur(2px);
  animation: halo-pulse 2.4s ease-in-out infinite;
}
@keyframes halo-pulse {
  0%, 100% { opacity: 0.3; r: 12; }
  50%      { opacity: 0.7; r: 16; }
}
.hero-chart__tip {
  fill: var(--d-accent);
  filter: drop-shadow(0 0 8px rgba(92,225,230,0.9));
}
.hero-chart__crosshair {
  stroke: var(--d-accent);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.55;
  pointer-events: none;
}
.hero-chart__cross-dot {
  fill: var(--d-accent);
  filter: drop-shadow(0 0 6px rgba(92,225,230,0.7));
  pointer-events: none;
}

.hero-chart__annotations .ann-line {
  stroke: var(--d-text-2);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.5;
}
.hero-chart__annotations .ann-pin {
  fill: var(--d-text-2);
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-chart__yaxis {
  position: absolute;
  right: 8px; top: 0;
  height: calc(100% - 22px);
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 10px;
  color: var(--d-text-3);
  text-align: right;
  pointer-events: none;
  letter-spacing: 0.02em;
}
.hero-chart__xaxis {
  position: absolute;
  left: 8px; right: 56px; bottom: 0;
  display: flex; justify-content: space-between;
  font-size: 10px;
  color: var(--d-text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}
.hero-chart__threshold-label {
  position: absolute;
  right: 56px; top: 50px;
  font-size: 9px;
  color: var(--d-warn);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--d-bg);
  padding: 1px 6px;
  border-radius: 4px;
  pointer-events: none;
}

.hero-chart__tooltip {
  position: absolute;
  background: rgba(10,11,13,0.96);
  border: 1px solid var(--d-hairline2);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 11px;
  color: var(--d-text-1);
  pointer-events: none;
  z-index: 10;
  min-width: 180px;
  backdrop-filter: blur(8px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.5);
}
.hero-chart__tooltip .tt__time {
  color: var(--d-text-3);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.hero-chart__tooltip .tt__row {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
  color: var(--d-text-2);
  padding: 2px 0;
}
.hero-chart__tooltip .tt__row--main { color: var(--d-text-1); }
.hero-chart__tooltip .tt__dot {
  width: 8px; height: 2px; border-radius: 1px;
  background: var(--d-accent);
}
.hero-chart__tooltip .tt__dot--prev {
  background: var(--d-text-2);
  height: 1px;
  width: 10px;
}
.hero-chart__tooltip .tt__val { margin-left: auto; font-weight: 500; color: var(--d-text-1); }
.hero-chart__tooltip .tt__val--prev { color: var(--d-text-2); }
.hero-chart__tooltip .tt__delta {
  border-top: 1px solid var(--d-hairline);
  margin-top: 8px; padding-top: 6px;
  font-size: 10px;
  color: var(--d-accent);
  letter-spacing: 0.04em;
}
.hero-chart__tooltip .tt__delta.is-down { color: var(--d-warn); }

.hero-chart__stamp {
  position: absolute;
  bottom: -2px; right: 56px;
  font-size: 9.5px;
  color: var(--d-text-3);
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* === BOTTOM ROW (bar list + event stream) === */
.dash__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 900px) { .dash__row { grid-template-columns: 1fr; } }

.bar-list, .event-stream {
  border-radius: 12px;
  background: var(--d-surface);
  border: 1px solid var(--d-hairline);
  padding: 16px 18px;
  display: flex; flex-direction: column;
  gap: 14px;
}
.bar-list__head, .event-stream__head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.bar-list__head h3, .event-stream__head h3 {
  font-size: 14px; font-weight: 500; color: var(--d-text-1); margin: 0;
  letter-spacing: -0.01em;
}
.bar-list__sub, .event-stream__sub {
  font-size: 10.5px;
  color: var(--d-text-3);
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 6px;
}
.event-stream__sub .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--d-accent);
  animation: pulse-ring 2.4s ease-out infinite;
  box-shadow: 0 0 0 0 rgba(92,225,230,0.6);
}

.bar-list__rows { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.br {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-items: center;
  padding: 6px 0;
  cursor: default;
  transition: opacity .2s;
}
.br:hover { opacity: 1; }
.bar-list__rows:hover .br:not(:hover) { opacity: 0.55; }
.br__label {
  font-size: 12.5px;
  color: var(--d-text-1);
  font-weight: 500;
}
.br__pct {
  font-size: 12px;
  color: var(--d-text-2);
  text-align: right;
}
.br__bar {
  grid-column: 1 / -1;
  height: 4px;
  background: rgba(255,255,255,0.04);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.br__bar-fill {
  position: absolute; inset: 0 100% 0 0;
  background: var(--d-accent);
  border-radius: 2px;
  transition: right .8s cubic-bezier(.4,0,.2,1);
}
.br--p2 .br__bar-fill { background: rgba(92,225,230,0.7); }
.br--p3 .br__bar-fill { background: rgba(92,225,230,0.5); }
.br--p4 .br__bar-fill { background: rgba(255,255,255,0.32); }
.br--p5 .br__bar-fill { background: rgba(255,255,255,0.22); }
.br--p6 .br__bar-fill { background: rgba(255,255,255,0.14); }
.br__count {
  font-size: 10.5px;
  color: var(--d-text-3);
  text-align: right;
  letter-spacing: 0.02em;
  grid-column: 2;
  grid-row: 1;
}

.event-stream__rows {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 4px;
  min-height: 180px;
  max-height: 220px;
  overflow: hidden;
  position: relative;
}
.ev {
  display: grid;
  grid-template-columns: 56px auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.015);
  font-size: 11.5px;
  color: var(--d-text-2);
  border-left: 2px solid transparent;
  animation: ev-in .35s cubic-bezier(.4,0,.2,1);
}
@keyframes ev-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ev__time {
  font-size: 10.5px;
  color: var(--d-text-3);
  letter-spacing: 0.02em;
}
.ev__sev {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--d-accent);
}
.ev--ok .ev__sev   { background: var(--d-accent); }
.ev--warn .ev__sev { background: var(--d-warn); }
.ev--info .ev__sev { background: var(--d-text-2); }
.ev--ok            { border-left-color: rgba(92,225,230,0.4); }
.ev--warn          { border-left-color: rgba(245,165,36,0.4); }
.ev__msg {
  color: var(--d-text-1);
  font-size: 12px;
}
.ev__msg .ev__id, .ev__msg .ev__metric {
  color: var(--d-accent);
  font-size: 11px;
}
.ev__source {
  color: var(--d-text-3);
  font-size: 10.5px;
  letter-spacing: 0.02em;
}

@media (max-width: 700px) {
  .hero-chart__wrap { height: 240px; padding-right: 48px; }
  .hero-chart__head { flex-direction: column; align-items: flex-start; }
  .dash__status { font-size: 10px; }
  .ev { grid-template-columns: 48px auto 1fr; }
  .ev__source { display: none; }
}

/* =========================================================
   CUSTOM AI CURSOR  (dot + outlined ring + soft halo)
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  html, body { cursor: none; }
  a, button, input, textarea, label, [data-magnet], .faq__q, .dept-tab { cursor: none; }
}

.cursor-dot {
  position: fixed; top: 0; left: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255,255,255,0.55);
  pointer-events: none;
  z-index: 10000;
  /* Hidden until JS sees the first real mousemove — prevents the cursor
     from flashing at screen-center during page load + splash. */
  opacity: 0;
  transition: width .25s cubic-bezier(.2,.9,.3,1.2),
              height .25s cubic-bezier(.2,.9,.3,1.2),
              opacity .2s, background .25s, box-shadow .25s;
  will-change: transform;
}
.cursor-ring {
  position: fixed; top: 0; left: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.45);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: width .35s cubic-bezier(.2,.9,.3,1.4),
              height .35s cubic-bezier(.2,.9,.3,1.4),
              border-color .3s, border-width .3s, background .3s, opacity .25s;
  will-change: transform;
}
.cursor-dot.is-hover {
  width: 4px; height: 4px;
  background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan), 0 0 30px rgba(92,225,230,0.4);
}
.cursor-ring.is-hover {
  width: 56px; height: 56px;
  border-color: rgba(92,225,230,0.7);
  border-width: 1px;
  background: rgba(92,225,230,0.06);
}
.cursor-dot.is-down { width: 4px; height: 4px; }
.cursor-ring.is-down { width: 28px; height: 28px; }

.cursor-glow {
  position: fixed; top: 0; left: 0;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59,41,255,0.18), rgba(59,41,255,0) 60%);
  filter: blur(50px);
  mix-blend-mode: screen;
  pointer-events: none; z-index: 1;
  will-change: transform;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.cursor-glow.is-active { opacity: 1; }

@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring, .cursor-glow { display: none !important; }
}

/* =========================================================
   SCROLL PROGRESS
   ========================================================= */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--blue-1), var(--cyan), var(--blue-2));
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 0 20px rgba(59,41,255,0.5);
}

/* =========================================================
   AURORA + MESH BACKGROUND LAYERS
   ========================================================= */
.aurora {
  position: absolute; inset: -10px; z-index: -1;
  --aurora:
    repeating-linear-gradient(100deg,
      #0A0080 10%, #5ce1e6 15%, #1A1AAA 20%, #5ce1e6 25%, #0A0080 30%);
  --dark:
    repeating-linear-gradient(100deg,
      #000 0%, #000 7%, transparent 10%, transparent 12%, #000 16%);
  background-image: var(--dark), var(--aurora);
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;
  filter: blur(28px) saturate(1.1);
  mix-blend-mode: screen;
  opacity: 0.55;
  pointer-events: none;
  animation: aurora-shift 38s linear infinite;
  mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, black 10%, transparent 70%);
}
@keyframes aurora-shift {
  from { background-position: 50% 50%, 50% 50%; }
  to   { background-position: 350% 50%, 350% 50%; }
}

.blob-mesh { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.blob {
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.45;
  mix-blend-mode: screen;
  will-change: transform;
}
.blob-1 { background: #0A0080; top: -10%; left: -10%; animation: drift1 22s ease-in-out infinite alternate; }
.blob-2 { background: #5ce1e6; top: 30%;  right: -15%; animation: drift2 28s ease-in-out infinite alternate; }
.blob-3 { background: #1A1AAA; bottom: -25%; left: 30%; animation: drift3 34s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(20vw, 18vh) scale(1.2); } }
@keyframes drift2 { to { transform: translate(-22vw, 24vh) scale(0.85); } }
@keyframes drift3 { to { transform: translate(14vw, -28vh) scale(1.25); } }

.grid-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 80%);
  animation: grid-drift 40s linear infinite;
}
@keyframes grid-drift { to { background-position: 56px 56px, 56px 56px; } }

/* Spotlight SVG-ish via CSS */
.spotlight {
  position: absolute; top: -10%; left: -20%;
  width: 90%; height: 110%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.10), transparent 55%);
  filter: blur(20px);
  animation: spot-pan 9s ease-in-out infinite alternate;
}
@keyframes spot-pan {
  from { transform: translateX(-2%) translateY(-2%); opacity: .8; }
  to   { transform: translateX(8%) translateY(4%); opacity: 1; }
}

/* =========================================================
   PRIMARY BUTTON — Shimmer / Border-Beam
   ========================================================= */
.btn--primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  z-index: 0;
}
.btn--primary::before {
  /* rotating spark conic ring */
  content: ""; position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--shimmer-angle, 0deg),
    transparent 0deg,
    rgba(255,255,255,0.95) 40deg,
    transparent 80deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  z-index: 0;
  animation: shimmer-orbit 4s linear infinite;
  pointer-events: none;
}
@property --shimmer-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes shimmer-orbit {
  0%       { --shimmer-angle: 0deg; }
  20%, 30% { --shimmer-angle: 90deg; }
  55%, 70% { --shimmer-angle: 270deg; }
  100%     { --shimmer-angle: 360deg; }
}

/* =========================================================
   MAGIC CARD — cursor-following spotlight
   ========================================================= */
.card { --mx: -200px; --my: -200px; transition: border-color .3s; }
.card::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--mx) var(--my),
    rgba(92,225,230,0.18),
    rgba(59,41,255,0.06) 30%,
    transparent 60%);
  opacity: 0; transition: opacity .35s;
  pointer-events: none; z-index: 0;
}
.card:hover::after { opacity: 1; }
.card:hover { border-color: rgba(92,225,230,0.25); }
.card > * { position: relative; z-index: 1; }

/* =========================================================
   HOLOGRAPHIC TEXT GRADIENT (animated)
   ========================================================= */
@property --holo { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.gradient-text {
  background: linear-gradient(180deg, #ffffff 0%, #cccccc 60%, #888 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  position: relative;
}
.holo-text {
  background-image: conic-gradient(from var(--holo),
    #ffffff, #5ce1e6, #ffffff, #1A1AAA, #ffffff);
  background-size: 100% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: holo-rotate 8s linear infinite;
}
@keyframes holo-rotate { to { --holo: 360deg; } }

/* =========================================================
   MINIMALIST BULLET — replaces ugly checkmarks
   ========================================================= */
.price-card li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  position: relative;
  padding-left: 0;
}
.price-card li svg {
  display: none;  /* hide the old checks */
}
.price-card li::before {
  content: "";
  display: inline-block;
  width: 14px; height: 1px;
  background: var(--cyan);
  margin-top: 12px;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(92,225,230,0.4);
}

/* =========================================================
   NUMBER COUNTER + STAT FX
   ========================================================= */
.metric { overflow: hidden; }
.metric__num {
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   MAGNETIC HOVER — applied via JS to data-magnet elements
   ========================================================= */
[data-magnet] {
  transition: transform .35s cubic-bezier(.2,.9,.3,1.4);
}

/* =========================================================
   HERO REFINEMENTS
   ========================================================= */
.hero { isolation: isolate; }
.hero__media { z-index: -3; }
.hero__media video { opacity: 0.32; }
.hero__veil {
  background:
    linear-gradient(180deg, rgba(5,5,5,0.4) 0%, rgba(5,5,5,0.7) 60%, var(--bg) 100%);
}
.hero h1 .holo-text {
  display: inline-block;
}

/* Floating chip eyebrow refinement */
.eyebrow {
  position: relative;
  overflow: hidden;
}
.eyebrow::before {
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan), 0 0 22px rgba(92,225,230,0.5);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 10px var(--cyan), 0 0 22px rgba(92,225,230,0.4); }
  50%      { box-shadow: 0 0 14px var(--cyan), 0 0 30px rgba(92,225,230,0.7); }
}

/* =========================================================
   MARQUEE UPGRADE — hover pause + chip styling
   ========================================================= */
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  padding: 8px 18px;
  border: 1px solid var(--stroke);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.02);
  transition: border-color .25s, color .25s, background .25s;
}
.marquee__item:hover {
  color: var(--fg); border-color: var(--stroke-strong);
  background: rgba(92,225,230,0.05);
}

/* =========================================================
   PRICING FEATURED — beam border treatment
   ========================================================= */
.price-card.is-featured { z-index: 1; }
.price-card.is-featured::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--beam-pos, 0deg),
    transparent 0%,
    var(--cyan) 8%,
    var(--blue-2) 14%,
    transparent 22%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: beam-travel 6s linear infinite;
  pointer-events: none;
}

/* =========================================================
   FAQ ICON — cyan accent on open
   ========================================================= */
.faq__item { transition: border-color .3s, background .3s; }
.faq__item.is-open { background: rgba(92,225,230,0.03); border-color: rgba(92,225,230,0.25); }

/* =========================================================
   CTA-BAND — animated radial sweep
   ========================================================= */
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: conic-gradient(from var(--beam-pos, 0deg),
    transparent 340deg, rgba(92,225,230,0.4) 0deg, transparent 20deg);
  filter: blur(40px);
  animation: beam-travel 12s linear infinite;
  pointer-events: none;
  opacity: 0.6;
}

/* =========================================================
   NAV — beam on scroll feel
   ========================================================= */
.nav {
  /* Smooth morph between the three nav states (full → pill → logo).
     Height is in the list so the logo-only state can lock to a perfect
     64×64 circle (the CTA button would otherwise force it to ~66px tall). */
  transition:
    width   .42s cubic-bezier(.2, .8, .25, 1),
    height  .42s cubic-bezier(.2, .8, .25, 1),
    padding .42s cubic-bezier(.2, .8, .25, 1),
    gap     .42s cubic-bezier(.2, .8, .25, 1),
    background  .35s ease,
    border-color .35s ease,
    box-shadow  .35s ease;
}
.nav.is-scrolled {
  background: rgba(8,8,8,0.7);
  border-color: var(--stroke-strong);
  box-shadow: 0 12px 50px rgba(0,0,0,0.5);
}

/* =========================================================
   SOCIAL ICONS — bigger glow on hover
   ========================================================= */
.socials a { position: relative; overflow: hidden; }
.socials a::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(92,225,230,0.25), transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.socials a:hover::before { opacity: 1; }

/* =========================================================
   HOW WE WORK — vertical active-rail stepper
   - One vertical rail runs through all step dots
   - As the visitor scrolls, the rail "fills" cyan up to the active step
   - The active step's dot pulses with a halo (echoes the heartbeat motif
     used on Build & Run's active node)
   - Completed steps get a checkmark; future steps stay neutral
   - Each step shows duration + deliverable as small mono pills
   ========================================================= */
.how-rail {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 64px auto 0;
  max-width: 920px;
  display: grid;
  gap: 88px;
}
/* The track: a hairline running through every dot */
.how-rail::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.02),
    rgba(255,255,255,0.10) 8%,
    rgba(255,255,255,0.10) 92%,
    rgba(255,255,255,0.02));
  pointer-events: none;
}
/* The fill: same line but cyan, height driven by --rail-fill from JS */
.how-rail::after {
  content: "";
  position: absolute;
  left: 30px;
  top: 16px;
  width: 1px;
  height: var(--rail-fill, 0px);
  background: linear-gradient(180deg,
    rgba(92,225,230,0.0),
    rgba(92,225,230,0.55) 14%,
    var(--cyan));
  box-shadow: 0 0 10px rgba(92,225,230,0.55);
  transition: height .9s cubic-bezier(.2,.8,.25,1);
  pointer-events: none;
}

.how-step {
  position: relative;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

/* The dot — sits on the rail, becomes a beacon when active */
.how-step__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-left: 24px;
  margin-top: 12px;
  background: rgba(8, 8, 12, 0.95);
  border: 1.5px solid var(--stroke-strong);
  position: relative;
  z-index: 2;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.how-step.is-active .how-step__dot {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow:
    0 0 0 4px rgba(92,225,230,0.16),
    0 0 24px rgba(92,225,230,0.55);
}
/* Expanding ring on the active dot — same heartbeat as the canvas active node */
.how-step.is-active .how-step__dot::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(92,225,230,0.5);
  animation: how-rail-ring 1.8s cubic-bezier(.2,.6,.3,1) infinite;
  pointer-events: none;
}
@keyframes how-rail-ring {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%  { opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
.how-step.is-done .how-step__dot {
  background: var(--cyan);
  border-color: var(--cyan);
}
.how-step.is-done .how-step__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(45deg, transparent 38%, #000 38% 44%, transparent 44%) no-repeat center / 60% 2px,
    linear-gradient(-45deg, transparent 38%, #000 38% 44%, transparent 44%) no-repeat center / 60% 2px;
  /* Simpler: just put a checkmark via background. Below is fallback if it looks off */
}
.how-step.is-done .how-step__dot::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
  color: #050507;
  line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  .how-step.is-active .how-step__dot::before { animation: none; }
}

/* Content side */
.how-step__content {
  position: relative;
  padding: 14px 0 14px 4px;
  isolation: isolate;
}
/* Big translucent step number watermark */
.how-step__num {
  position: absolute;
  top: -14px;
  right: -8px;
  font-size: clamp(72px, 8vw, 132px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  color: rgba(92,225,230,0.04);
  pointer-events: none;
  z-index: -1;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  transition: color .5s ease;
  user-select: none;
}
.how-step.is-active .how-step__num { color: rgba(92,225,230,0.10); }

.how-step__phase {
  display: inline-block;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 12px;
  transition: color .35s ease;
}
.how-step.is-active .how-step__phase { color: var(--cyan); }

.how-step__title {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.2;
  margin: 0 0 14px;
  color: var(--fg);
}

.how-step__body {
  color: var(--fg-soft);
  font-size: 15px;
  line-height: 1.65;
  max-width: 600px;
  margin: 0 0 22px;
  letter-spacing: 0.005em;
}

.how-step__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.how-step__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--stroke);
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--fg-mute);
  white-space: nowrap;
}
.how-step__chip--out {
  background: rgba(92,225,230,0.05);
  border-color: rgba(92,225,230,0.22);
  color: var(--cyan);
}
.how-step.is-active .how-step__chip--out {
  background: rgba(92,225,230,0.09);
  border-color: rgba(92,225,230,0.4);
  box-shadow: 0 0 0 1px rgba(92,225,230,0.08);
}

/* Hover pulls a step forward without changing scroll-active state */
.how-step:hover .how-step__title { color: var(--fg); }
.how-step:hover .how-step__phase { color: var(--cyan); }

/* Tablet */
@media (max-width: 900px) {
  .how-rail { gap: 64px; max-width: 100%; }
  .how-step { grid-template-columns: 44px minmax(0, 1fr); gap: 20px; }
  .how-step__dot { margin-left: 16px; }
  .how-rail::before, .how-rail::after { left: 22px; }
  .how-step__num { font-size: clamp(56px, 16vw, 96px); top: -8px; right: -4px; }
}
/* Mobile */
@media (max-width: 540px) {
  .how-rail { gap: 56px; }
  .how-step { grid-template-columns: 32px minmax(0, 1fr); gap: 16px; }
  .how-step__dot { margin-left: 10px; }
  .how-rail::before, .how-rail::after { left: 16px; }
  .how-step__title { font-size: 20px; }
  .how-step__body { font-size: 14px; }
}