/* ============================================================
   C3POperator — landing page styles
   All colors come from the :root token block below.
   Components must reference tokens (var(--…)) — never raw hex.
   ============================================================ */

:root{
  color-scheme:dark;

  /* Base — Command Navy foundation */
  --bg:#0B1426;                    /* Command Navy — page base */
  --bg-elevated:#12203A;           /* raised surfaces (derived navy) */
  --bg-card:#1B2942;               /* Panel — cards / surfaces */
  --border:rgba(100,116,139,.22);  /* Slate hairline */

  /* Text */
  --text-primary:#E8F6FA;          /* Ice White */
  --text-muted:#879AB0;            /* Slate — lightened for 4.5:1 AA contrast on --bg and --bg-card */

  /* Accents — the electric/glow identity */
  --accent-primary:#22D3EE;        /* Signal Cyan — primary accent, glow */
  --accent-secondary:#2DD4A6;      /* Circuit Green — secondary accent */
  --accent-blue:#3B82F6;           /* Azure Link — the blue for the light-up cables */
  --accent-sky:#7DD3FC;            /* Sky Tint — highlights / gradient stops */
  --accent-warm:#F5A623;           /* Warning amber — warm particle glow */
  --accent-violet:#8B5CF6;         /* optional accent, use sparingly */

  /* Functional / status */
  --success:#34D399;
  --warning:#F5A623;
  --error:#EF4444;

  /* Glow */
  --glow:0 0 24px rgba(34,211,238,.55);      /* cyan glow */
  --glow-blue:0 0 22px rgba(59,130,246,.6);  /* blue glow for cables */

  /* Cables — theme-independent: the cable system keeps the exact same
     colors in light mode, so these are never overridden by html.light */
  --cable-blue:#3B82F6;
  --cable-cyan:#22D3EE;
  --cable-sky:#7DD3FC;
  --cable-core:#E8F6FA;
  --cable-sheath:#1B2942;
  --cable-sheath-hi:#12203A;

  /* Non-color design tokens */
  --radius:16px;
  --maxw:1160px;
  --font-display:"Fraunces","Iowan Old Style",Georgia,serif;
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",ui-monospace,"Cascadia Code",Menlo,monospace;
}

/* ---------- light theme ----------
   Toggled by the header button (html.light, persisted in localStorage).
   Same token contract: soft cool-white surfaces, navy ink, and darker
   accent variants so accent-colored text keeps AA contrast. Glows soften.
   Cable tokens above are deliberately NOT overridden. */
html.light{
  color-scheme:light;

  --bg:#F5F7FB;                    /* soft cool white — page base */
  --bg-elevated:#EAEFF6;           /* raised surfaces */
  --bg-card:#FFFFFF;               /* cards / panels */
  --border:rgba(51,65,85,.16);

  --text-primary:#1C2B45;          /* navy ink — strong, not harsh black */
  --text-muted:#55677F;

  --accent-primary:#0E7490;        /* deep signal cyan — readable on light */
  --accent-secondary:#047857;      /* deep circuit green */
  --accent-blue:#2563EB;
  --accent-sky:#0369A1;
  --accent-warm:#B45309;
  --accent-violet:#7C3AED;

  --success:#047857;
  --warning:#B45309;
  --error:#DC2626;

  --glow:0 0 24px rgba(8,145,178,.26);
  --glow-blue:0 0 22px rgba(37,99,235,.28);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  background:var(--bg);
  color:var(--text-primary);
  font-family:var(--font-sans);
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background-color .35s ease,color .35s ease; /* theme toggle */
}

::selection{background:color-mix(in srgb,var(--accent-primary) 30%,transparent);color:var(--text-primary)}

img,canvas,svg,video{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:110px 0;position:relative}
.muted{color:var(--text-muted)}

h1,h2,h3{font-family:var(--font-display);font-weight:560;line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(40px,5.6vw,74px)}
h2{font-size:clamp(30px,4vw,48px)}
p.lead{font-size:clamp(17px,1.9vw,20px);color:var(--text-muted);max-width:640px;text-wrap:pretty}

.eyebrow{
  font-family:var(--font-mono);font-size:12px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-primary);margin-bottom:16px;
}
.accent{color:var(--accent-primary)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- background layers ---------- */
#particles{position:fixed;inset:0;z-index:0;pointer-events:none}
#cables-gl{position:fixed;inset:0;z-index:0;pointer-events:none}
#cables{position:absolute;top:0;left:0;width:100%;z-index:0;pointer-events:none} /* document-space: the branching tree scrolls with the page */
header,main,footer{position:relative;z-index:1}

/* ---------- reveal on scroll (JS adds .in) ---------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- nav ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.logo{font-family:var(--font-mono);font-weight:700;font-size:16px;letter-spacing:.03em;text-decoration:none}
.logo b{color:var(--accent-primary)}
.navlinks{display:flex;gap:26px;font-size:14px}
.navlinks a{color:var(--text-muted);text-decoration:none;transition:color .2s}
.navlinks a:hover{color:var(--text-primary)}
@media(max-width:860px){.navlinks{display:none}}

.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.theme-toggle{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);color:var(--text-muted);
  transition:color .2s,border-color .2s,box-shadow .3s;
}
.theme-toggle:hover{
  color:var(--accent-primary);border-color:var(--accent-primary);
  box-shadow:0 0 14px color-mix(in srgb,var(--accent-primary) 25%,transparent);
}
.theme-toggle:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}
.theme-toggle svg{width:17px;height:17px}
.theme-toggle .ic-moon{display:none}
html.light .theme-toggle .ic-moon{display:block}
html.light .theme-toggle .ic-sun{display:none}
html:not(.js) .theme-toggle{display:none} /* inert without JS */

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;font-size:15px;padding:14px 28px;border-radius:999px;
  border:1px solid transparent;text-decoration:none;cursor:pointer;
  transition:transform .18s ease,box-shadow .3s ease,border-color .2s ease,background-color .2s ease;
  will-change:transform;
}
.btn-primary{
  background:linear-gradient(115deg,var(--accent-primary),var(--accent-sky));
  color:var(--bg);
  box-shadow:var(--glow);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 44px color-mix(in srgb,var(--accent-primary) 75%,transparent)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--text-primary)}
.btn-ghost:hover{border-color:var(--accent-primary)}
.btn-sm{padding:9px 18px;font-size:14px}

/* ---------- hero ---------- */
.hero{min-height:calc(100vh - 68px);display:flex;align-items:center;padding:48px 0 36px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center;width:100%}
.hero-copy .cta-row{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.hero-copy .lead{margin-top:22px}
.hero-proof{display:flex;gap:28px;margin-top:44px;flex-wrap:wrap}
.hero-proof div{font-size:13px;color:var(--text-muted)}
.hero-proof b{display:block;font-family:var(--font-mono);font-size:19px;font-weight:600;color:var(--text-primary);font-variant-numeric:tabular-nums}
.hero-proof b .accent{color:var(--accent-primary)}

.hero-vis{position:relative;height:min(66vh,620px);min-height:380px;transform:translateX(4%)}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease}
#hero-canvas.on{opacity:1}

/* static poster — shown until WebGL hydrates, and permanently for no-3D / reduced motion */
.hero-poster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .9s ease}
.hero-poster .orb{
  width:min(46vw,340px);aspect-ratio:1;border-radius:50%;position:relative;
  background:radial-gradient(circle at 38% 32%,
    color-mix(in srgb,var(--accent-sky) 32%,transparent),
    color-mix(in srgb,var(--accent-primary) 14%,transparent) 42%,
    transparent 70%);
  box-shadow:var(--glow),inset 0 0 60px color-mix(in srgb,var(--accent-blue) 25%,transparent);
}
.hero-poster .orb::before,.hero-poster .orb::after{
  content:"";position:absolute;inset:-14%;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent-primary) 32%,transparent);
}
.hero-poster .orb::after{inset:-30%;border-color:color-mix(in srgb,var(--accent-blue) 22%,transparent)}
.hero-vis.hydrated .hero-poster{opacity:0;pointer-events:none}

/* caption chips — DOM overlay cycled by js/hero-orb.js (.show), one per
   spoken "phrase"; --px/--py parallax at a different depth than the orb */
.orb-chips{position:absolute;inset:0;pointer-events:none}
.orb-chip{
  position:absolute;font-family:var(--font-mono);font-size:12.5px;white-space:nowrap;
  color:var(--text-primary);padding:7px 13px;border-radius:999px;
  background:color-mix(in srgb,var(--bg-card) 82%,transparent);
  border:1px solid var(--border);backdrop-filter:blur(6px);
  opacity:0;
  transform:translate(calc(var(--px,0)*10px),calc(8px + var(--py,0)*10px));
  transition:opacity .5s ease,transform .5s ease;
}
.orb-chip.show{opacity:1;transform:translate(calc(var(--px,0)*10px),calc(var(--py,0)*10px))}
.chip-a{top:16%;left:64%}
.chip-b{top:44%;left:6%}
.chip-c{top:72%;left:58%}

@media(max-width:920px){
  .hero{min-height:0;padding-top:64px}
  .hero-grid{grid-template-columns:1fr;gap:8px}
  .hero-vis{height:44vh;min-height:300px;order:2;transform:none}
  .orb-chip{font-size:11.5px;padding:6px 10px}
  .chip-b{display:none}
}

/* ---------- "One Call, One Scroll" — 2D SVG scroll scene ----------
   Pinned stage; js/workflow-2d.js builds the bird's-eye SVG world and
   scrubs one GSAP timeline. HTML overlay initial states live HERE (opacity/
   transform) so a rebuild can clearProps back to them. Everything below is
   transform/opacity animation only, all colors from the :root tokens. */
.call-intro{padding-top:40px;padding-bottom:40px}
.wf-stage{
  position:relative;height:100vh;height:100svh;overflow:hidden;
  background:linear-gradient(180deg,var(--bg),var(--bg-elevated) 55%,var(--bg));
}
#wf-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#wf-svg text{font-family:var(--font-sans)}
.wf-flash{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(60% 60% at 50% 50%,color-mix(in srgb,var(--accent-primary) 30%,transparent),transparent 70%);
}

/* -- the caller's phone call screen — same cyan as the agent side (no warm) -- */
.wf-phone-body{
  fill:color-mix(in srgb,var(--accent-primary) 7%,var(--bg-card));
  stroke:color-mix(in srgb,var(--accent-primary) 45%,var(--border));stroke-width:2.5;
}
.wf-phone-screen{fill:color-mix(in srgb,var(--accent-primary) 10%,var(--bg-elevated))}
.wf-phone-glow{fill:color-mix(in srgb,var(--accent-primary) 15%,transparent)}
.wf-notch{fill:color-mix(in srgb,var(--text-muted) 35%,transparent)}
.wf-chipav-warm{
  fill:color-mix(in srgb,var(--accent-primary) 78%,var(--bg-card));
  stroke:color-mix(in srgb,var(--accent-primary) 55%,white);stroke-width:1.5;
}
.wf-person{fill:color-mix(in srgb,var(--bg) 85%,black)}
.wf-call-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;fill:color-mix(in srgb,var(--accent-primary) 65%,var(--text-primary))}
.wf-call-timer{font-family:var(--font-mono);font-size:23px;font-weight:500;fill:var(--text-primary)}
.wf-scribble-w{fill:color-mix(in srgb,var(--accent-primary) 38%,transparent);filter:blur(1.3px)}
.wf-ctl{fill:color-mix(in srgb,var(--text-muted) 15%,transparent);stroke:color-mix(in srgb,var(--text-muted) 35%,transparent)}
.wf-ctl-ic{fill:none;stroke:color-mix(in srgb,var(--text-primary) 75%,transparent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wf-ctl-icf{fill:color-mix(in srgb,var(--text-primary) 75%,transparent)}
.wf-ctl-end{fill:color-mix(in srgb,var(--error) 78%,var(--bg-card))}
.wf-ctl-endic{fill:var(--cable-core)}
.wf-ping-warm{stroke:var(--accent-primary)}

/* active-speaker halo on the avatar chips (CSS pulse, opacity-gated) */
.wf-chip-halo{
  fill:none;stroke:var(--accent-primary);stroke-width:2.5;
  transform-box:fill-box;transform-origin:center;
  animation:wf-ping 1.5s ease-out infinite;
}
.wf-chip-halo.cool{stroke:var(--accent-primary)}

/* -- cool side: the agent's neon scribble dashboard (no real data) -- */
.wf-dash-panel{
  fill:color-mix(in srgb,var(--accent-primary) 4%,var(--bg-card));
  stroke:color-mix(in srgb,var(--accent-primary) 45%,transparent);stroke-width:2.5;
  filter:drop-shadow(0 0 18px color-mix(in srgb,var(--accent-primary) 25%,transparent));
}
.wf-grid{fill:none;stroke:color-mix(in srgb,var(--accent-primary) 10%,transparent);stroke-width:1}
.wf-widget{fill:color-mix(in srgb,var(--bg) 45%,var(--bg-card));stroke:color-mix(in srgb,var(--accent-primary) 20%,var(--border));stroke-width:1.2}
.wf-widget.v{stroke:color-mix(in srgb,var(--accent-violet) 32%,var(--border))}
.wf-widget.g{stroke:color-mix(in srgb,var(--accent-secondary) 28%,var(--border))}
.wf-squig{fill:none;stroke:var(--accent-primary);stroke-width:2;stroke-linejoin:round;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent-primary) 55%,transparent))}
.wf-squig.v{stroke:var(--accent-violet);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent-violet) 55%,transparent))}
.wf-squig.g{stroke:var(--accent-secondary);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent-secondary) 55%,transparent))}
.wf-squig.thin{stroke-width:1.4}
.wf-area{fill:color-mix(in srgb,var(--accent-primary) 13%,transparent)}
.wf-cbar-0{fill:color-mix(in srgb,var(--accent-primary) 75%,transparent)}
.wf-cbar-1{fill:color-mix(in srgb,var(--accent-violet) 70%,transparent)}
.wf-cbar-2{fill:color-mix(in srgb,var(--accent-secondary) 70%,transparent)}
.wf-cbar-3{fill:color-mix(in srgb,var(--accent-sky) 65%,transparent)}
.wf-dot{fill:var(--accent-sky)}
.wf-baseline{stroke:color-mix(in srgb,var(--text-muted) 30%,transparent);stroke-width:1}
.wf-scribble-c{fill:color-mix(in srgb,var(--text-muted) 40%,transparent);filter:blur(1.3px)}
.wf-scribble-b{fill:color-mix(in srgb,var(--accent-primary) 55%,transparent);filter:blur(1.3px)}
.wf-scribble-g{fill:color-mix(in srgb,var(--accent-secondary) 55%,transparent);filter:blur(1.3px)}
.wf-ring-track{fill:none;stroke:color-mix(in srgb,var(--text-muted) 25%,transparent);stroke-width:5}
.wf-ring-val{fill:none;stroke-width:5;stroke-linecap:round}
.wf-ring-val.c{stroke:var(--accent-primary);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent-primary) 45%,transparent))}
.wf-ring-val.v{stroke:var(--accent-violet);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent-violet) 45%,transparent))}
.wf-pbar-track{fill:color-mix(in srgb,var(--text-muted) 18%,transparent)}
.wf-pbar-fill{fill:color-mix(in srgb,var(--accent-primary) 70%,transparent);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent-primary) 45%,transparent))}
.wf-chipav-body{fill:var(--cable-core);filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent-primary) 40%,transparent))}
.wf-chipav-ring{fill:none;stroke:var(--cable-cyan);stroke-width:2}
.wf-chipav-face{fill:color-mix(in srgb,var(--bg) 70%,black)}
.wf-chipav-eye{fill:var(--cable-cyan)}
.wf-holo{
  fill:none;stroke:color-mix(in srgb,var(--accent-primary) 40%,transparent);
  stroke-width:1.5;stroke-dasharray:5 8;
  transform-box:fill-box;transform-origin:center;animation:wf-spin 14s linear infinite;
}

/* -- the call line (blue→cyan, layered glow, drawn via dashoffset) -- */
.wf-line-halo{stroke:url(#wfLineGrad);opacity:.15;filter:blur(7px)}
.wf-line-mid{stroke:url(#wfLineGrad);opacity:.5;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent-blue) 55%,transparent))}
.wf-line-core{stroke:url(#wfLineCore);opacity:.95}
@supports not (offset-path:path("M0 0 L1 1")){.wf-pulse{display:none}}
.wf-pulse{fill:var(--accent-sky);filter:drop-shadow(0 0 6px var(--accent-primary));offset-rotate:0deg;animation:wf-travel 2.4s linear infinite}

/* -- call pulse rings (CSS-animated, opacity-gated by the timeline) -- */
.wf-ping{
  fill:none;stroke:var(--accent-primary);stroke-width:2;
  transform-box:fill-box;transform-origin:center;
  animation:wf-ping 1.9s cubic-bezier(.2,.6,.3,1) infinite;
}
.wf-ping:nth-child(2){animation-delay:.95s}

/* -- chat bubbles (SVG) -- */
.wf-bubble-box{
  fill:color-mix(in srgb,var(--bg-card) 96%,transparent);
  stroke:color-mix(in srgb,var(--accent-blue) 45%,var(--border));stroke-width:1.2;
}
.wf-bubble-box.agent{stroke:color-mix(in srgb,var(--accent-primary) 55%,var(--border))}
.wf-bubble-who{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;fill:var(--accent-blue)}
.wf-bubble-who.agent{fill:var(--accent-primary)}
.wf-bubble-msg{font-size:15px;font-weight:500;fill:var(--text-primary)}
.wf-endchip-box{fill:var(--bg-card);stroke:color-mix(in srgb,var(--success) 50%,var(--border));stroke-width:1.2}
.wf-endchip-txt{font-family:var(--font-mono);font-size:13px;fill:var(--success)}

/* -- inside-the-computer view: the agent console overlay -- */
.wf-screen{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:clamp(10px,3vh,28px) clamp(10px,3vw,36px);
  background:radial-gradient(120% 100% at 50% 0%,color-mix(in srgb,var(--accent-primary) 7%,var(--bg)),var(--bg) 60%);
  opacity:0;visibility:hidden;transform:scale(1.07);
}
.wf-screen-inner{
  position:relative;width:min(1060px,100%);max-height:100%;overflow:hidden;
  display:flex;flex-direction:column;transform-origin:center;
  border:1px solid color-mix(in srgb,var(--accent-primary) 45%,var(--border));border-radius:18px;
  background:color-mix(in srgb,var(--bg) 94%,black);
  box-shadow:0 0 60px color-mix(in srgb,var(--accent-primary) 14%,transparent),inset 0 0 80px color-mix(in srgb,var(--accent-blue) 6%,transparent);
}
/* scale the console up on wider viewports so it fills more of the screen
   (graduated so the scaled box never overflows the stage on smaller widths) */
@media(min-width:1500px){.wf-screen-inner{transform:scale(1.28)}}
@media(min-width:1800px){.wf-screen-inner{transform:scale(1.55)}}
@media(min-width:2200px){.wf-screen-inner{transform:scale(1.8)}}
.wf-scr-head{
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--text-muted);
  padding:12px 18px;border-bottom:1px solid var(--border);
}
.wf-scr-brand b{color:var(--accent-primary)}
.wf-scr-live{color:var(--accent-primary)}
.wf-scr-note{margin-left:auto;font-size:10px;letter-spacing:.08em;opacity:.7}
/* AI avatar chip in the console header — ripples while a tool runs */
.wf-ai-chip{position:relative;width:24px;height:24px;flex-shrink:0}
.wf-ai-chip svg{width:100%;height:100%}
.wf-ai-chip .c{fill:var(--cable-core)}
.wf-ai-chip .f{fill:color-mix(in srgb,var(--bg) 70%,black)}
.wf-ai-chip .e{fill:var(--cable-cyan)}
.wf-ai-chip .rip{
  position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid var(--accent-primary);
  opacity:0;visibility:hidden;animation:wf-target 1.4s ease-out infinite;
}
.wf-scr-body{display:grid;grid-template-columns:minmax(300px,340px) 1fr;gap:16px;padding:16px 18px;overflow:hidden}
.wf-tools{display:flex;flex-direction:column;gap:10px}
.wf-tool{position:relative;border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:var(--bg-card);opacity:.38}
.wf-tool .g-run,.wf-tool .g-done{position:absolute;inset:-1px;border-radius:12px;pointer-events:none;opacity:0}
.wf-tool .g-run{border:1px solid var(--accent-primary);box-shadow:0 0 18px color-mix(in srgb,var(--accent-primary) 30%,transparent)}
.wf-tool .g-done{border:1px solid var(--success);box-shadow:0 0 14px color-mix(in srgb,var(--success) 24%,transparent)}
.wf-tool code{font-family:var(--font-mono);font-size:12.5px;color:var(--text-primary);display:block}
.wf-tool code em{color:var(--accent-sky);font-style:normal}
.wf-tool .st-run,.wf-tool .st-res{display:block;font-family:var(--font-mono);font-size:11.5px;margin-top:7px;opacity:0}
.wf-tool .st-run{color:var(--accent-primary)}
.wf-tool .st-res{color:var(--success);transform:translateY(5px)}
.wf-tool .st-res em{color:var(--text-muted);font-style:normal}
.dots::after{content:"…";animation:wf-dots .9s steps(1,end) infinite}

/* the availability calendar — the centerpiece */
.wf-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.wf-cal{
  border:1px solid color-mix(in srgb,var(--accent-primary) 35%,var(--border));border-radius:14px;
  background:var(--bg-card);padding:14px 16px;
  box-shadow:0 0 30px color-mix(in srgb,var(--accent-primary) 10%,transparent);
  opacity:0;transform:translateY(16px) scale(.97);
}
.wf-cal-head{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;color:var(--accent-primary);margin-bottom:10px}
.wf-cal-head b{color:var(--text-primary)}
.wf-cal-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.wf-cal-col{display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateY(12px)}
.wf-cal-col>b{font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--text-muted);text-align:center;letter-spacing:.06em;padding-bottom:2px}
.slot{
  position:relative;border-radius:8px;padding:6px 4px;text-align:center;
  font-family:var(--font-mono);font-size:11.5px;border:1px solid var(--border);color:var(--text-muted);
}
.slot.busy{background:color-mix(in srgb,var(--text-muted) 8%,transparent);color:color-mix(in srgb,var(--text-muted) 60%,transparent)}
.slot.busy::after{content:"busy";display:block;font-size:8.5px;letter-spacing:.08em;opacity:.6}
.slot.open{color:var(--text-primary)}
.slot.open::after{content:"open";display:block;font-size:8.5px;letter-spacing:.08em;color:var(--success)}
.slot .sg{position:absolute;inset:-1px;border-radius:8px;border:1px solid var(--success);box-shadow:0 0 14px color-mix(in srgb,var(--success) 30%,transparent);opacity:0}
.slot .tr{position:absolute;inset:-4px;border-radius:10px;border:1.5px solid var(--accent-primary);opacity:0;visibility:hidden;animation:wf-target 1.5s ease-out infinite}
.slot .ev{
  position:absolute;inset:0;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--success) 18%,var(--bg-card));border:1px solid var(--success);
  color:var(--success);font-size:9.5px;line-height:1.2;padding:2px;
  opacity:0;transform:scale(.7);
}
.wf-sidechat{
  align-self:flex-end;width:min(320px,100%);
  border:1px solid var(--border);border-radius:14px;background:var(--bg-elevated);
  padding:12px 14px;opacity:0;transform:translateY(14px);
}
.wf-sidechat .who{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;color:var(--accent-primary);margin-top:8px}
.wf-sidechat .who.caller{color:var(--accent-blue)}
.wf-sidechat .who:first-child{margin-top:0}
.wf-sidechat .msg{font-size:13.5px;color:var(--text-primary);min-height:1.3em}
.wf-chip{
  position:absolute;right:5%;bottom:16%;opacity:0;
  font-family:var(--font-mono);font-size:12px;color:var(--accent-secondary);
  border:1px solid color-mix(in srgb,var(--accent-secondary) 45%,var(--border));
  background:var(--bg-card);border-radius:999px;padding:8px 14px;
  box-shadow:0 0 18px color-mix(in srgb,var(--accent-secondary) 20%,transparent);
}

/* -- hint + beat caption -- */
.wf-overlay{position:absolute;inset:0;pointer-events:none}
.wf-hint{
  position:absolute;top:26px;left:0;right:0;text-align:center;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-muted);transition:opacity .5s;
}
.wf-hint.hide{opacity:0}
.wf-caption{
  position:absolute;left:50%;transform:translateX(-50%);bottom:20px;
  display:flex;align-items:center;gap:12px;white-space:nowrap;overflow:hidden;
  font-family:var(--font-mono);font-size:11.5px;color:var(--text-muted);
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  border:1px solid var(--border);border-radius:999px;padding:8px 16px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.wf-caption .tnum{color:var(--accent-primary);letter-spacing:.1em}
.wf-caption i{position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,var(--accent-blue),var(--accent-primary))}

/* -- narrow screens: single column console, compact calendar -- */
@media(max-width:820px){
  .wf-scr-body{grid-template-columns:1fr;gap:12px;padding:12px}
  .wf-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .wf-tool{padding:9px 10px}
  .wf-tool code{font-size:10px;overflow-wrap:anywhere}
  .wf-tool .st-run,.wf-tool .st-res{font-size:9.5px;margin-top:5px}
  .wf-cal-grid{gap:5px}
  .slot{font-size:10px;padding:4px 2px}
  .slot .ev{font-size:8px}
  .wf-sidechat{width:100%;align-self:auto}
  .wf-caption{max-width:calc(100% - 32px)}
}
@media(max-width:520px){
  /* keep the tool cards two-up — a single column overflows short viewports */
  .wf-scr-head{gap:8px;font-size:9.5px;padding:10px 12px}
  .wf-scr-note{display:none}
  .wf-scr-body{padding:10px}
  .wf-cal{padding:10px}
  .wf-sidechat{padding:9px 11px}
  .wf-sidechat .msg{font-size:12px}
}
@media(max-height:600px){
  .wf-tool{padding:7px 10px}
  .slot{padding:3px 2px}
  .wf-sidechat{padding:8px 10px}
}

/* -- stepped static fallback: the same 14 beats, top to bottom -- */
.wf-fallback{display:none}
.nowf .wf-fallback{display:block;padding-top:30px;padding-bottom:80px}
.nowf .wf-stage{display:none}
.wf-steps{display:flex;flex-direction:column;gap:14px;margin-top:38px;max-width:760px}
.wf-step{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px}
.wf-step .num{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--accent-primary)}
.wf-step h3{font-size:18px;margin:6px 0 4px}
.wf-step>p{font-size:14px;color:var(--text-muted)}
.wf-step .vis{
  margin-top:12px;border:1px solid var(--border);border-radius:10px;
  background:var(--bg-elevated);padding:12px 14px;
  font-family:var(--font-mono);font-size:12.5px;color:var(--text-muted);
}
.wf-step .vis .cy{color:var(--accent-primary)}
.wf-step .vis .ok{color:var(--success)}
.wf-chatline{display:flex;gap:10px;margin-top:10px;font-size:13.5px;align-items:flex-start}
.wf-chatline b{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--accent-blue);flex-shrink:0;padding-top:5px}
.wf-chatline.agent b{color:var(--accent-primary)}
.wf-chatline span{background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;padding:7px 12px;color:var(--text-primary)}

/* -- scene keyframes (transform/opacity only; killed globally under reduced motion) -- */
@keyframes wf-ping{0%{transform:scale(.22);opacity:.75}100%{transform:scale(1.15);opacity:0}}
@keyframes wf-spin{to{transform:rotate(360deg)}}
@keyframes wf-travel{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes wf-target{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.18);opacity:0}}
@keyframes wf-dots{0%{content:""}33%{content:"."}66%{content:".."}100%{content:"..."}}

/* ---------- cards / grids ---------- */
#why{padding-top:40px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid-3,.grid-2{grid-template-columns:1fr}}
.card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px;transition:border-color .25s,transform .25s;
}
.card:hover{border-color:color-mix(in srgb,var(--accent-primary) 45%,var(--border));transform:translateY(-3px)}
.card h3{font-size:20px;margin-bottom:9px}
.card p{font-size:14.5px;color:var(--text-muted)}
.card .ic{
  width:42px;height:42px;border-radius:12px;margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--accent-primary) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--accent-primary) 30%,transparent);
  color:var(--accent-primary);
}
.card .ic svg{width:20px;height:20px}

/* ---------- comparison ledger ---------- */
.ledger{margin-top:42px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--bg-card)}
.ledger-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px}
th,td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:none}
thead th{font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
tbody th{font-weight:600;color:var(--text-primary);font-size:14px}
td.us{background:color-mix(in srgb,var(--accent-primary) 6%,transparent)}
thead th.us{color:var(--accent-primary)}
.mark{font-weight:600;white-space:nowrap}
.mark.yes{color:var(--success)}
.mark.part{color:var(--warning)}
.mark.no{color:var(--error)}
td small{display:block;color:var(--text-muted);font-weight:400;margin-top:2px}
.ledger-note{font-size:13px;color:var(--text-muted);margin-top:14px}

/* ---------- pricing ---------- */
.price-grid{margin-top:44px}
.price-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:20px;
  padding:36px;display:flex;flex-direction:column;
}
.price-card.feature{border-color:color-mix(in srgb,var(--accent-primary) 55%,var(--border));box-shadow:var(--glow)}
.price-big{font-family:var(--font-display);font-size:clamp(42px,5vw,58px);line-height:1;margin:14px 0 6px;font-variant-numeric:tabular-nums}
.price-big small{font-family:var(--font-sans);font-size:16px;color:var(--text-muted);font-weight:400}
.price-card>p{color:var(--text-muted);font-size:15px}
.price-card ul{list-style:none;margin:20px 0 28px;display:flex;flex-direction:column;gap:11px;flex:1}
.price-card li{position:relative;padding-left:26px;font-size:14.5px;color:var(--text-muted)}
.price-card li::before{content:"→";position:absolute;left:0;color:var(--accent-secondary);font-family:var(--font-mono)}

/* ---------- templates — categories grid, zoom to use cases ----------
   A grid of accent-tinted category cards (js/categories-grid.js).
   Hover/tap FLIP-zooms a panel out of the card to fill the stage,
   revealing the category's use cases as smaller cards in the same
   accent. --acc is set per card/panel from docs/categories.json. */
#templates{padding-top:55px}
.cat-stage{position:relative;margin-top:44px;min-height:520px}
.cat-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  transition:opacity .45s ease,transform .5s ease;
}
.cat-stage.zoomed .cat-grid{opacity:.16;transform:scale(.968);pointer-events:none}
@media(max-width:1020px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:470px){.cat-grid{grid-template-columns:1fr}}

.cat-card{
  --acc:var(--accent-primary);
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  text-align:left;min-height:158px;padding:20px;border-radius:var(--radius);
  background:
    radial-gradient(130% 90% at 50% 0%,color-mix(in srgb,var(--acc) 9%,transparent),transparent 62%),
    var(--bg-card);
  border:1px solid color-mix(in srgb,var(--acc) 26%,var(--border));
  transition:transform .25s ease,border-color .25s ease,box-shadow .35s ease;
}
.cat-card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--acc) 60%,var(--border));
  box-shadow:0 0 28px color-mix(in srgb,var(--acc) 22%,transparent);
}
.cat-card:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.cat-card h3{font-size:19px;padding-right:34px}
.cat-card p{font-size:13.5px;line-height:1.5;color:var(--text-muted);margin-top:8px;text-wrap:pretty}
.cat-count{
  position:absolute;top:14px;right:14px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  color:color-mix(in srgb,var(--acc) 70%,var(--text-primary));
  border:1px solid color-mix(in srgb,var(--acc) 35%,var(--border));
  border-radius:999px;padding:2px 8px;
}

/* zoomed panel — FLIP-scales out of the hovered card to fill the stage */
.cat-zoom{
  --acc:var(--accent-primary);
  position:absolute;top:0;left:0;width:100%;z-index:5;
  min-height:min(420px,100%);max-height:100%; /* fit content; cap at the stage */
  overflow:auto;overscroll-behavior:contain;
  padding:24px 26px 22px;border-radius:var(--radius);
  background:
    radial-gradient(100% 75% at 50% 0%,color-mix(in srgb,var(--acc) 12%,transparent),transparent 64%),
    var(--bg-card);
  border:1px solid color-mix(in srgb,var(--acc) 42%,var(--border));
  box-shadow:0 26px 70px rgba(0,0,0,.35),0 0 44px color-mix(in srgb,var(--acc) 16%,transparent);
  transform-origin:0 0;will-change:transform;
  transition:transform .56s cubic-bezier(.22,.8,.24,1);
}
html.light .cat-zoom{box-shadow:0 26px 60px rgba(28,43,69,.18),0 0 44px color-mix(in srgb,var(--acc) 14%,transparent)}
.cat-zoom-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.cat-zoom-head h3{font-size:clamp(22px,2.6vw,30px)}
.cat-zoom-head p{font-size:14.5px;color:var(--text-muted);margin-top:6px;max-width:62ch;text-wrap:pretty}
.cat-close{
  flex-shrink:0;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid color-mix(in srgb,var(--acc) 40%,var(--border));color:var(--text-primary);
  transition:border-color .2s,box-shadow .3s;
}
.cat-close:hover{border-color:var(--acc);box-shadow:0 0 16px color-mix(in srgb,var(--acc) 30%,transparent)}
.cat-close:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.cat-close svg{width:16px;height:16px}

.uc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
@media(max-width:920px){.uc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.uc-grid{grid-template-columns:1fr}}
.uc-card{
  padding:16px 16px 14px;border-radius:12px;
  background:
    radial-gradient(140% 100% at 50% 0%,color-mix(in srgb,var(--acc) 7%,transparent),transparent 60%),
    color-mix(in srgb,var(--bg-elevated) 55%,var(--bg-card));
  border:1px solid color-mix(in srgb,var(--acc) 24%,var(--border));
  transition:border-color .25s ease,box-shadow .3s ease;
}
.uc-card:hover{border-color:color-mix(in srgb,var(--acc) 55%,var(--border));box-shadow:0 0 18px color-mix(in srgb,var(--acc) 16%,transparent)}
.uc-card h4{font-size:15px;font-weight:600;letter-spacing:-.01em}
.uc-card p{font-size:13px;line-height:1.55;color:var(--text-muted);margin-top:6px;text-wrap:pretty}

/* panel contents stagger in once the zoom has (mostly) landed;
   on the way out they fade immediately (no delay outside .in) */
.cat-zoom .cat-zoom-head,.cat-zoom .uc-card{
  opacity:0;transform:translateY(12px);
  transition:opacity .4s ease,transform .45s cubic-bezier(.22,.7,.25,1);
}
.cat-zoom.in .cat-zoom-head,.cat-zoom.in .uc-card{
  opacity:1;transform:none;transition-delay:var(--d,0ms);
}

/* ---------- FAQ ---------- */
.faq{max-width:860px}
details{border-bottom:1px solid var(--border);padding:20px 4px}
summary{
  cursor:pointer;font-family:var(--font-display);font-size:18px;font-weight:560;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--font-mono);font-size:19px;color:var(--accent-primary);flex-shrink:0;transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--text-muted);margin-top:12px;font-size:15px;max-width:60ch}

/* ---------- final CTA ---------- */
.final{
  text-align:center;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:
    radial-gradient(60% 120% at 50% 100%,color-mix(in srgb,var(--accent-blue) 10%,transparent),transparent),
    linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent-primary) 5%,transparent));
}
.final .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.final .lead{margin:18px auto 0}

/* ---------- footer ---------- */
footer{padding:56px 0;color:var(--text-muted);font-size:14px}
.foot-row{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.foot-row nav{display:flex;gap:22px;height:auto;padding:0;flex-wrap:wrap}
.foot-row nav a{color:var(--text-muted);text-decoration:none}
.foot-row nav a:hover{color:var(--text-primary)}
.foot-legal{margin-top:34px;padding-top:22px;border-top:1px solid var(--border);font-size:12.5px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* ---------- cookie consent ---------- */
.cookie-consent{
  position:fixed;left:20px;right:20px;bottom:20px;z-index:80;
  max-width:560px;margin:0 auto;
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  padding:16px 20px;border-radius:var(--radius);
  background:var(--bg-card);border:1px solid var(--border);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}
.cookie-consent.show{opacity:1;transform:translateY(0);pointer-events:auto}
.cookie-consent p{margin:0;font-size:13.5px;line-height:1.5;color:var(--text-muted);flex:1 1 260px}
.cookie-consent p a{color:var(--accent-primary)}
.cookie-consent-actions{display:flex;gap:10px;flex-shrink:0}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  #particles,#hero-canvas,#cables-gl{display:none}
  .cookie-consent{transition:none}
}