/* ═══════════════════════════════════════════════════════════════════════════
   ClayStage · marketing site
   3D for people who actually make 3D. Premium, motion-forward, dark + indigo.
   Buildless: plain HTML/CSS/JS + GSAP (CDN). Wordmark = Inter SemiBold.
   ─────────────────────────────────────────────────────────────────────────── */

/* ─── Fonts (TTFs copied from the app) ───────────────────────────────────── */
@font-face { font-family: 'Inter'; src: url('../assets/fonts/Inter.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Mono';  src: url('../assets/fonts/SplineSansMono.ttf') format('truetype'); font-weight: 300 600; font-display: swap; }

/* ─── Design tokens ──────────────────────────────────────────────────────── */
:root {
  /* ink / surfaces — brand dark #16181B family, deepened for cinema */
  --bg:        #0a0b0d;
  --bg-deep:   #060709;
  --panel:     #121317;
  --panel-2:   #16181b;   /* exact brand dark */
  --panel-3:   #1d2026;
  --line:      #25282f;
  --line-2:    #313640;

  /* type */
  --text:      #f1f2f4;
  --text-dim:  #aab0b8;
  /* lightened from #6c727b → clears WCAG AA 4.5:1 for normal text on every site
     surface (the old value failed at 3.4–4.1:1 on price subtext, footer, legal meta…) */
  --text-faint:#9099a3;

  /* ClayStage Indigo */
  --accent:     #6366f1;
  --accent-2:   #818cf8;
  --accent-dim: #4f46e5;
  --accent-deep:#312e81;
  --accent-glow: rgba(99,102,241,.5);
  --on-accent:  #ffffff;

  /* layout / motion */
  --maxw:    1200px;
  --gutter:  clamp(20px, 5vw, 56px);
  --radius:  18px;
  --radius-s:12px;
  --radius-l:26px;
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --spring:   cubic-bezier(.34,1.56,.64,1);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ─── Reset / base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* ambient indigo aurora behind everything */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58vw 58vw at 80% -10%, rgba(99,102,241,.16), transparent 60%),
    radial-gradient(50vw 50vw at 6% 14%,   rgba(79,70,229,.12),  transparent 55%),
    radial-gradient(72vw 50vw at 50% 118%, rgba(99,102,241,.09), transparent 60%);
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input { font: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: var(--on-accent); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); position: relative; z-index: 1; }

/* visible focus — WCAG */
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 200;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 18px; border-radius: 10px; font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ─── Inline icons ───────────────────────────────────────────────────────── */
.i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ─── Scroll progress + cursor ───────────────────────────────────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent-2));
  z-index: 150; transition: width .08s linear; box-shadow: 0 0 12px var(--accent-glow);
}
.cursor { position: fixed; top: 0; left: 0; z-index: 140; pointer-events: none; mix-blend-mode: difference; opacity: 0; }
.cursor.on { opacity: 1; }
.cursor-dot, .cursor-ring { position: absolute; border-radius: 50%; left: 0; top: 0; }
.cursor-dot { width: 6px; height: 6px; background: #fff; transform: translate(-50%,-50%); }
.cursor-ring { width: 34px; height: 34px; border: 1.5px solid #fff; transform: translate(-50%,-50%); transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease); }
.cursor.hot .cursor-ring { width: 54px; height: 54px; background: rgba(255,255,255,.12); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: 12px;
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  border: 1px solid transparent; white-space: nowrap;
  transition: transform .22s var(--spring), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
  will-change: transform;
}
.btn .i { width: 16px; height: 16px; stroke-width: 1.7; transition: transform .25s var(--ease); }
.btn-lg { padding: 16px 26px; font-size: 16px; border-radius: 14px; }
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 10px; }
.btn-primary {
  /* WCAG AA: white text needs >=4.5:1. The old gradient topped out at --accent-2
     (#818CF8 → only 2.98:1 with #fff). Darken the gradient to the deeper indigos so
     even the lightest pixel of the button clears AA: #5B5EEC top = 4.93:1, #4F46E5
     bottom = 6.29:1 against #fff. */
  background: linear-gradient(180deg, #5B5EEC, var(--accent-dim));
  color: var(--on-accent);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 26px rgba(99,102,241,.35);
}
.btn-primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 12px 34px rgba(99,102,241,.5); }
.btn-primary:hover .i { transform: translateX(3px); }
.btn-ghost {
  background: rgba(255,255,255,.04); color: var(--text);
  border-color: var(--line-2); backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255,255,255,.08); border-color: var(--accent); color: #fff; }
.btn-ghost:hover .i { transform: translateX(3px); }

/* ═══ HEADER ═══════════════════════════════════════════════════════════════ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(10,11,13,.72); backdrop-filter: blur(16px) saturate(1.3);
  border-bottom-color: var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark { width: 28px; height: 31px; }
.brand-word {
  font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: #fff;
  display: inline-flex;
}
/* per-character spring hover (the Eva Sanchez effect) */
.brand-word .ch, .splittext .ch { display: inline-block; will-change: transform; transform: translateZ(0); }
.brand-word .ch.space, .splittext .ch.space { width: .3em; }

.nav { display: flex; align-items: center; gap: 6px; }
.navlink {
  position: relative; padding: 8px 14px; font-size: 15px; font-weight: 500; color: var(--text-dim);
  border-radius: 9px; transition: color .2s var(--ease);
}
.navlink::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1.5px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.navlink:hover { color: #fff; }
.navlink:hover::after { transform: scaleX(1); }
.nav .btn { margin-left: 8px; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 10px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: flex; flex-direction: column; gap: 4px; padding: 12px var(--gutter) 22px;
  background: rgba(10,11,13,.96); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line);
}
.mobile-nav .navlink { padding: 14px 8px; font-size: 17px; border-bottom: 1px solid var(--line); }
.mobile-nav .navlink::after { display: none; }
.mobile-nav .btn { margin-top: 12px; justify-content: center; }

/* ═══ Shared section scaffolding ════════════════════════════════════════════ */
.section { padding-block: clamp(72px, 11vw, 150px); position: relative; }
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2);
}
.kicker.center { justify-content: center; }
.kicker::before { content: ''; width: 22px; height: 1px; background: var(--accent); display: inline-block; }
.kicker.center::before { display: none; }
.section-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 68px); }
.h2 {
  font-size: clamp(32px, 5.4vw, 58px); line-height: 1.04; font-weight: 600;
  letter-spacing: -0.03em; margin-top: 16px; color: #fff;
}
.h3 { font-size: clamp(18px, 2.2vw, 21px); font-weight: 600; letter-spacing: -0.02em; color: #fff; display: flex; align-items: center; gap: 10px; }
.h3 .i { width: 19px; height: 19px; color: var(--accent-2); }
.lede { font-size: clamp(16px, 1.9vw, 19px); color: var(--text-dim); margin-top: 18px; line-height: 1.6; }
.grad-text {
  background: linear-gradient(100deg, #fff 0%, var(--accent-2) 55%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ═══ HERO ═══════════════════════════════════════════════════════════════════ */
.hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding-top: 100px; padding-bottom: 90px; overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--ease); }
.hero-video.ready { opacity: .55; }
/* WebGL fluid-gradient canvas (interactive, mouse-warped) — replaces the old
   blurred, scale-animated field whose blurred edges flickered on the right.
   The static gradient below is the no-WebGL fallback, so it never renders blank. */
.hero-fluid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0;
  background:
    radial-gradient(60vw 50vw at 72% 6%, rgba(99,102,241,.20), transparent 60%),
    radial-gradient(54vw 52vw at 18% 82%, rgba(79,70,229,.18), transparent 62%),
    linear-gradient(180deg, #0c0a18, #08070d);
}
.hero-grain {
  position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.hero::after { /* fade hero into the page */
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 28%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bg));
}
.hero::before { /* flat black overlay for legibility — swirl shows through, just dimmed */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(0,0,0,.75);
}
.hero-wrap { z-index: 2; display: flex; flex-direction: column; align-items: center; max-width: 940px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim);
  background: rgba(255,255,255,.04); border: 1px solid var(--line-2);
  padding: 7px 15px; border-radius: 100px; backdrop-filter: blur(6px);
}
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-glow); }
.hero-h1 {
  font-size: clamp(42px, 8.6vw, 110px); line-height: .98; font-weight: 600;
  letter-spacing: -0.045em; color: #fff; margin-top: 26px;
}
.hero-h1 .line { display: block; }
.hero-h1 .line-grad {
  background: linear-gradient(100deg, var(--accent-2) 0%, var(--accent) 50%, #c7b3ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* line-height:.98 on .hero-h1 makes the text box shorter than the glyphs, so with
     background-clip:text the descender of the "y" in "everyone" falls below the painted
     box and reads as cut off. Pad the box down (offset by a negative margin so layout
     doesn't shift) to give descenders room to paint. */
  padding-bottom: .14em; margin-bottom: -.14em;
}
/* When split for the per-char spring, each char paints its OWN slice of the gradient,
   sized to the whole line and offset by its x (set in site.js paintGradients) — so the
   continuous gradient is preserved while every character springs independently. */
.hero-h1 .line-grad .ch {
  background-image: linear-gradient(100deg, var(--accent-2) 0%, var(--accent) 50%, #c7b3ff 100%);
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  /* same descender fix for the per-char split spans (see .line-grad above) */
  padding-bottom: .14em; margin-bottom: -.14em;
}
/* per-char hover on headline lines */
.splittext .ch { transition: transform .12s linear; }
.hero-sub { font-size: clamp(16px, 2vw, 20px); color: var(--text-dim); margin-top: 30px; max-width: 660px; line-height: 1.6; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 38px; }
.hero-chips {
  display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; margin-top: 40px;
  font-size: 14px; color: var(--text-dim);
}
.hero-chips li { display: inline-flex; align-items: center; gap: 8px; }
.hero-chips .i { width: 16px; height: 16px; color: var(--accent-2); }

.scroll-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-faint);
}
.scroll-rail { width: 1px; height: 40px; background: var(--line-2); position: relative; overflow: hidden; }
.scroll-rail i { position: absolute; top: -50%; left: 0; width: 1px; height: 50%; background: var(--accent-2); animation: scrollDrop 1.8s var(--ease) infinite; }
@keyframes scrollDrop { 0% { top: -50%; } 100% { top: 100%; } }

/* ═══ CLAY → RENDER REVEAL SLIDER (the loop + showcase hero) ══════════════════ */
/* The signature ClayStage moment — a flat gray clay scene on the left, the same
   scene rendered photoreal on the right, split by an accent seam. Self-contained
   inline-SVG (each instance carries unique gradient/clip IDs). */
.cs-reveal { position: relative; max-width: 900px; margin: 0 auto; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line-2); background: var(--bg-deep);
  box-shadow: 0 30px 80px -38px rgba(0,0,0,.85), 0 0 90px -44px var(--accent-glow); }
.cs-reveal svg { width: 100%; height: auto; display: block; }
.cs-reveal-pill { position: absolute; top: 15px; z-index: 3; display: inline-flex; align-items: center;
  padding: 6px 13px; border-radius: 100px; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cs-reveal-pill.is-clay { left: 15px; color: #d6dae0; background: rgba(20,22,26,.7); border: 1px solid rgba(180,185,193,.3); }
.cs-reveal-pill.is-render { right: 15px; color: #fff; background: rgba(99,102,241,.32); border: 1px solid rgba(129,140,248,.6); }
.cs-reveal-band { margin: 0 0 8px; }
.loop .cs-reveal-band, #loop .cs-reveal-band { margin-bottom: 40px; }

/* ═══ MARQUEE ════════════════════════════════════════════════════════════════ */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: 22px; background: rgba(255,255,255,.012); }
.marquee-track { display: inline-flex; align-items: center; gap: 28px; white-space: nowrap; animation: marquee 60s linear infinite; }
.marquee span { font-size: clamp(18px, 2.4vw, 26px); font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.marquee .sep { color: var(--accent); font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ═══ THE LOOP ════════════════════════════════════════════════════════════════ */
.loop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.loop-card {
  position: relative; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  overflow: hidden;
}
.loop-card:hover { border-color: var(--line-2); box-shadow: 0 24px 60px -30px rgba(0,0,0,.7); }
.loop-n { font-family: var(--font-mono); font-size: 13px; color: var(--accent-2); letter-spacing: .1em; }
.loop-art { aspect-ratio: 4/3; border-radius: var(--radius-s); margin: 14px 0 18px; position: relative; overflow: hidden; border: 1px solid var(--line); }
.loop-art img, .loop-art video { width: 100%; height: 100%; object-fit: cover; }
.loop-card h3 { margin-bottom: 10px; }
.loop-card p { font-size: 14.5px; color: var(--text-dim); line-height: 1.55; }

/* art-directed gradient placeholders for the four loop stages */
.art-clay { background:
  radial-gradient(120% 90% at 50% 120%, #3a3d44, transparent 60%),
  linear-gradient(160deg, #5a5d65, #2c2e34); }
.loop-art::after { content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E"); mix-blend-mode: overlay; pointer-events: none; }
.art-render { background:
  radial-gradient(110% 80% at 40% 20%, rgba(129,140,248,.7), transparent 55%),
  linear-gradient(150deg, #6366f1, #312e81 70%, #14121f); }
.art-animate { background:
  conic-gradient(from 200deg at 60% 50%, #818cf8, #4f46e5, #6366f1, #818cf8);
  filter: saturate(1.05); }
.art-video { background:
  radial-gradient(90% 90% at 30% 80%, rgba(99,102,241,.8), transparent 60%),
  linear-gradient(140deg, #1d2026, #0d0e12); }
.art-video::before { content: ''; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(circle at center, rgba(255,255,255,.85) 0 9px, transparent 10px) center/auto no-repeat; }

/* ═══ AUTODRIVE ═══════════════════════════════════════════════════════════════ */
.ad-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.ad-list { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.ad-list li { display: flex; gap: 12px; font-size: 15.5px; color: var(--text-dim); line-height: 1.5; }
.ad-list .i { width: 19px; height: 19px; color: var(--accent-2); margin-top: 2px; }
.ad-list b { color: var(--text); font-weight: 600; }
.ad-copy .btn { margin-top: 30px; }

.ad-demo { display: flex; flex-direction: column; gap: 14px; }
.ad-screen {
  border: 1px solid var(--line-2); border-radius: var(--radius); padding: 22px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(99,102,241,.06) inset;
}
.ad-screen-top { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 12.5px; margin-bottom: 14px; }
.ad-channel { color: var(--accent-2); }
.ad-range { color: var(--text-faint); }
.ad-curve { width: 100%; height: auto; aspect-ratio: 2/1; }
.ad-grid line { stroke: var(--line); stroke-width: 1; }
.ad-path { fill: none; stroke: var(--accent-2); stroke-width: 2.5; stroke-linecap: round; }
.ad-dot { fill: #fff; filter: drop-shadow(0 0 6px var(--accent-glow)); }
.ad-readout { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; font-family: var(--font-mono); }
.ad-readout-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.ad-readout-val { font-size: 22px; font-weight: 600; color: #fff; min-width: 4ch; }
.ad-eases { display: flex; flex-wrap: wrap; gap: 8px; }
.ad-ease {
  font-family: var(--font-mono); font-size: 12.5px; padding: 8px 13px; border-radius: 9px;
  border: 1px solid var(--line-2); color: var(--text-dim); background: rgba(255,255,255,.02);
  transition: all .2s var(--ease);
}
.ad-ease:hover { border-color: var(--accent); color: #fff; }
.ad-ease.is-on { background: var(--accent-dim); border-color: var(--accent-dim); color: var(--on-accent); }
.ad-cap { font-size: 13px; color: var(--text-faint); }

/* ═══ SPEED ═══════════════════════════════════════════════════════════════════ */
.speed { background: linear-gradient(180deg, transparent, rgba(99,102,241,.03), transparent); }
.speed-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.speed-stat {
  padding: 30px 24px; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), var(--panel-2)); text-align: left;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.speed-stat:hover { border-color: var(--accent); transform: translateY(-3px); }
.speed-num { font-size: clamp(40px, 6vw, 64px); font-weight: 600; letter-spacing: -0.04em; color: #fff; line-height: 1; }
.speed-u { color: var(--accent-2); }
.speed-lbl { margin-top: 12px; font-size: 14px; color: var(--text-dim); }

/* ═══ FEATURES ════════════════════════════════════════════════════════════════ */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feat {
  position: relative; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  overflow: hidden;
}
.feat::before { /* indigo sheen on hover */
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .4s var(--ease); pointer-events: none;
  background: radial-gradient(60% 60% at 50% 0%, rgba(99,102,241,.12), transparent 70%);
}
.feat:hover { border-color: var(--line-2); box-shadow: 0 24px 60px -30px rgba(0,0,0,.7); }
.feat:hover::before { opacity: 1; }
.feat-wide { grid-column: span 2; }
.feat-ic {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(99,102,241,.12); border: 1px solid rgba(99,102,241,.28); color: var(--accent-2); margin-bottom: 18px;
}
.feat-ic .i { width: 22px; height: 22px; }
.feat h3 { margin-bottom: 11px; }
.feat p { font-size: 15px; color: var(--text-dim); line-height: 1.55; }
.tag {
  display: inline-block; margin-top: 16px; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2);
  padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 7px;
}

/* ═══ SHOWCASE ════════════════════════════════════════════════════════════════ */
.show-note { color: var(--text-faint); font-size: .82em; }
.show-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); margin-top: clamp(28px, 4vw, 44px);
}
.show-card {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--panel-2);
  transition: transform .4s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.show-card:hover { border-color: var(--accent); box-shadow: 0 30px 70px -36px rgba(99,102,241,.4); }
.show-tall { grid-row: span 2; }
.show-art { position: relative; height: 100%; min-height: 240px; }
.show-tall .show-art { min-height: 500px; }
.show-art img, .show-art video { width: 100%; height: 100%; object-fit: cover; }
.show-art::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); mix-blend-mode: overlay; }
.art-s1 { background: linear-gradient(150deg, #6366f1, #312e81); }
.art-s2 { background: radial-gradient(90% 80% at 30% 20%, #818cf8, #1d2026); }
.art-s3 { background: conic-gradient(from 160deg at 60% 40%, #818cf8, #4f46e5, #6366f1, #818cf8); }
.art-s4 { background: linear-gradient(200deg, #4f46e5, #14121f 80%); }
.art-s5 { background: radial-gradient(80% 80% at 70% 70%, #6366f1, #0d0e12); }
.art-s6 { background: linear-gradient(160deg, #2c2e34, #6366f1 130%); }
.show-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px;
  display: flex; flex-direction: column; gap: 3px;
  background: linear-gradient(transparent, rgba(6,7,9,.85));
}
.show-cap .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); }
.show-cap .t { font-size: 16px; font-weight: 600; color: #fff; }

/* ═══ PRICING ════════════════════════════════════════════════════════════════ */
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.price-card {
  position: relative; display: flex; flex-direction: column;
  padding: 28px 24px; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.price-card:hover { border-color: var(--line-2); transform: translateY(-4px); }
.price-featured {
  border-color: var(--accent); background: linear-gradient(180deg, rgba(99,102,241,.1), var(--panel-2));
  box-shadow: 0 30px 70px -40px rgba(99,102,241,.55);
}
.price-pill {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--accent-dim); color: var(--on-accent); font-size: 11.5px; font-weight: 600;
  letter-spacing: .04em; padding: 5px 12px; border-radius: 100px; box-shadow: 0 6px 18px rgba(99,102,241,.5); white-space: nowrap;
}
.price-plan { font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-2); font-family: var(--font-mono); }
.price-amt { display: flex; align-items: baseline; gap: 2px; margin-top: 14px; color: #fff; min-height: 54px; }
.price-cur { font-size: 22px; font-weight: 600; align-self: flex-start; margin-top: 6px; color: var(--text-dim); }
.price-val { font-size: clamp(38px, 5vw, 52px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.price-val-text { font-size: clamp(26px, 3.5vw, 34px); }
.price-cycle { font-size: 15px; color: var(--text-dim); font-weight: 500; margin-left: 4px; }
.price-per { font-size: 13.5px; color: var(--text-faint); margin-top: 8px; }
.price-feats { display: flex; flex-direction: column; gap: 11px; margin: 22px 0 26px; flex: 1; }
.price-feats li { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--text-dim); line-height: 1.4; }
.price-feats li::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 17px; height: 17px; border-radius: 50%;
  background: rgba(99,102,241,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23818cf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.price-cta { justify-content: center; margin-top: auto; }
.price-foot { text-align: center; margin-top: 16px; font-size: 14px; color: var(--text-faint); }
.price-foot a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }

/* monthly / annual toggle */
.price-toggle { display: inline-flex; gap: 4px; margin-top: 22px; padding: 4px;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.03); }
.price-toggle-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px;
  border: 0; border-radius: 999px; background: transparent; color: var(--text-dim);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease); }
.price-toggle-btn:hover { color: #fff; }
.price-toggle-btn.is-active { background: var(--accent-dim); color: var(--on-accent); }
.price-toggle-save { font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 2px 8px;
  border-radius: 999px; background: rgba(129,140,248,.16); color: var(--accent-2); }
.price-toggle-btn.is-active .price-toggle-save { background: rgba(255,255,255,.22); color: #fff; }

/* per-tier credit grant + billed-cycle line */
.price-credits { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--accent-2);
  font-family: var(--font-mono); letter-spacing: .01em; }
.price-billed { margin-top: 4px; font-size: 12px; color: var(--text-faint); min-height: 15px; }

/* plain-English "what a credit gets you" guide */
.price-guide { max-width: 780px; margin: 28px auto 0; text-align: center;
  font-size: 14px; line-height: 1.65; color: var(--text-dim); }
.price-guide strong { color: #fff; font-weight: 600; }

/* ═══ FINAL CTA ═══════════════════════════════════════════════════════════════ */
.final-cta { padding-bottom: clamp(80px, 12vw, 160px); }
.cta-card {
  position: relative; text-align: center; padding: clamp(40px, 7vw, 84px) var(--gutter);
  border: 1px solid var(--line-2); border-radius: var(--radius-l); overflow: hidden;
  background:
    radial-gradient(80% 120% at 50% -20%, rgba(99,102,241,.22), transparent 60%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 40px 90px -50px rgba(99,102,241,.5);
}
.cta-logo { display: block; width: 124px; height: auto; margin: 0 auto 24px; opacity: .96;
  filter: drop-shadow(0 6px 22px rgba(99,102,241,.28)); }
.cta-card .kicker { margin-bottom: 14px; }
.cta-card .h2 { margin-inline: auto; }
.cta-card .lede { max-width: 560px; margin-inline: auto; }
.cta-actions { display: flex; justify-content: center; margin-top: 32px; }
.waitlist { max-width: 480px; margin: 40px auto 0; padding-top: 30px; border-top: 1px solid var(--line); }
.waitlist-label { display: block; font-size: 14px; color: var(--text-dim); margin-bottom: 12px; }
.waitlist-row { display: flex; gap: 10px; }
.waitlist input {
  flex: 1; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--line-2);
  background: rgba(255,255,255,.03); color: var(--text); font-size: 15px; min-width: 0;
}
.waitlist input::placeholder { color: var(--text-faint); }
.waitlist input:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; border-color: var(--accent); }
.waitlist .btn { white-space: nowrap; }
.waitlist-note { font-size: 13px; color: var(--text-faint); margin-top: 12px; }
.waitlist-note.ok { color: var(--accent-2); }
.waitlist-note.err { color: #f87171; }

/* ═══ FOOTER ═══════════════════════════════════════════════════════════════════ */
.site-footer { border-top: 1px solid var(--line); padding-block: clamp(50px, 7vw, 80px) 32px; position: relative; z-index: 1; background: var(--bg-deep); }
.foot-top { display: grid; grid-template-columns: 1.4fr 2fr; gap: 48px; }
.foot-logo { height: 26px; width: auto; }
.foot-tag { font-size: 14.5px; color: var(--text-dim); margin-top: 18px; max-width: 360px; line-height: 1.6; }
.foot-mantra { font-size: 14px; color: var(--accent-2); margin-top: 14px; font-weight: 500; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.foot-col h3 { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; font-family: var(--font-mono); }
.foot-col a { display: block; font-size: 14.5px; color: var(--text-dim); padding: 6px 0; transition: color .2s var(--ease); }
.foot-col a:hover { color: #fff; }
.foot-social { display: flex; gap: 16px; align-items: center; margin-top: 44px; }
.foot-social a { color: var(--text-dim); display: inline-flex; transition: color .2s var(--ease), transform .2s var(--ease); }
.foot-social a:hover { color: #fff; transform: translateY(-2px); }
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--text-faint);
}
.foot-made { color: var(--accent-2); }

/* newsletter signup */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.foot-news {
  display: grid; grid-template-columns: 1fr minmax(280px, 420px); align-items: center;
  gap: 24px 40px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line);
}
.foot-news-copy h3 {
  font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; letter-spacing: -0.01em;
}
.foot-news-copy p { font-size: 14px; color: var(--text-dim); max-width: 420px; line-height: 1.55; }
.foot-news-field { display: flex; gap: 10px; }
.foot-news-field input {
  flex: 1; min-width: 0; padding: 12px 15px; border-radius: 12px; border: 1px solid var(--line-2);
  background: rgba(255,255,255,.03); color: var(--text); font-size: 15px;
  transition: border-color .2s var(--ease);
}
.foot-news-field input::placeholder { color: var(--text-faint); }
.foot-news-field input:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; border-color: var(--accent); }
.foot-news-field .btn { white-space: nowrap; }
.foot-news-field .btn[disabled] { opacity: .6; cursor: progress; }
.foot-news-note { grid-column: 1 / -1; font-size: 13px; color: var(--text-faint); min-height: 1em; }
.foot-news-note.ok  { color: var(--accent-2); }
.foot-news-note.err { color: #f87171; }
@media (max-width: 720px) {
  .foot-news { grid-template-columns: 1fr; gap: 16px; }
}

/* cookie consent — a SELF-CONTAINED card pinned bottom-centre. Solid fill + a clear
   outline (border + faint indigo ring) so the notice reads as its own box. The hero
   chips that sit in the same bottom band are hidden while it's open (body.cookie-open
   rule, set by site.js), so there's nothing to bleed through and no big fade needed. */
.cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000; max-width: 560px;
  margin-inline: auto; padding: 16px 20px; border-radius: 16px;
  background: #121317; border: 1px solid var(--line-2);
  box-shadow: 0 18px 50px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(99,102,241,.18);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  animation: cookieIn .5s var(--ease-out) both;
}
@keyframes cookieIn { from { opacity: 0; transform: translateY(20px); } }
.cookie p { font-size: 13.5px; color: var(--text-dim); flex: 1; min-width: 220px; }
.cookie a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.cookie-actions { display: flex; gap: 10px; }

/* ═══ REVEAL ANIMATION (JS adds .in) ════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-reveal-d="1"] { transition-delay: .08s; }
.reveal[data-reveal-d="2"] { transition-delay: .16s; }
.reveal[data-reveal-d="3"] { transition-delay: .24s; }
.reveal[data-reveal-d="4"] { transition-delay: .32s; }

/* ═══ LEGAL + SUCCESS PAGES ═════════════════════════════════════════════════════ */
.legal { padding-top: 120px; padding-bottom: 90px; }
.legal .wrap { max-width: 800px; }
.legal-head { margin-bottom: 44px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.legal h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 600; letter-spacing: -0.03em; color: #fff; }
.legal-meta { font-size: 14px; color: var(--text-faint); margin-top: 12px; }
.legal-notice {
  margin-top: 22px; padding: 14px 18px; border-radius: 12px; font-size: 14px; color: var(--text-dim);
  background: rgba(99,102,241,.08); border: 1px solid rgba(99,102,241,.25);
}
.legal h2 { font-size: clamp(20px, 3vw, 26px); font-weight: 600; color: #fff; margin: 40px 0 14px; letter-spacing: -0.02em; }
.legal h3 { font-size: 17px; font-weight: 600; color: var(--text); margin: 24px 0 8px; display: block; }
.legal p, .legal li { font-size: 15.5px; color: var(--text-dim); line-height: 1.7; margin-bottom: 12px; }
.legal ul { list-style: disc; padding-left: 24px; margin-bottom: 16px; }
.legal a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.legal-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 30px; color: var(--text-dim); font-size: 14px; }
.legal-back:hover { color: #fff; }

/* success page */
.success { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 100px var(--gutter); }
.success-inner { max-width: 540px; }
.success-mark {
  width: 76px; height: 76px; margin: 0 auto 28px; border-radius: 22px; display: grid; place-items: center;
  background: rgba(99,102,241,.14); border: 1px solid rgba(99,102,241,.34); color: var(--accent-2);
  animation: pop .6s var(--spring) both;
}
.success-mark .i { width: 38px; height: 38px; stroke-width: 2; }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }
.success h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 600; letter-spacing: -0.03em; color: #fff; }
.success p { font-size: 17px; color: var(--text-dim); margin-top: 16px; }
.success .btn { margin-top: 30px; }

/* ═══ RESPONSIVE ════════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .loop-grid, .feat-grid, .speed-grid, .price-grid { grid-template-columns: repeat(2, 1fr); }
  .feat-wide { grid-column: span 2; }
  .ad-wrap { grid-template-columns: 1fr; }
  .show-grid { grid-template-columns: repeat(2, 1fr); }
  .show-tall { grid-row: span 1; }
  .show-tall .show-art { min-height: 260px; }
  .foot-top { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 980px) {
  /* On tablet/phone the stacked hero content is taller than the viewport, so a
     fixed-height hero forces the chips row to overflow down into the band where
     the bottom-pinned cookie banner lives. Let the hero grow to fit its content
     instead, tighten the vertical rhythm so the chips ride higher (clear of the
     banner), and still reserve clearance below them — the banner widens to almost
     full width here and must never sit on top of the chips. */
  .hero { min-height: auto; padding-top: 84px; padding-bottom: 210px; }
  .hero-h1 { margin-top: 18px; }
  .hero-sub { margin-top: 20px; }
  .hero-cta { margin-top: 26px; }
  .hero-chips { margin-top: 26px; }
  /* The SCROLL hint is decorative and collides with the wrapped chips at these
     widths (with or without the banner); hide it rather than stack three things
     into one cramped strip. */
  .scroll-hint { display: none; }
}
/* ── Tablet header (721–960px): the full inline nav + CTA is wider than the room
   left of the logo, so at ~768px "The loop" / "Log in" wrapped and overlapped the
   ClayStage wordmark. Keep a real nav here (no hamburger yet) but shrink it to fit:
   tighten gaps + link padding, force a single nowrap row, and drop the redundant
   "Log in" text link (the primary CTA is the entry point; Log in still lives in the
   ≤720px hamburger menu). Below 721px the existing mobile hamburger takes over. */
@media (min-width: 721px) and (max-width: 960px) {
  .nav { gap: 2px; flex-wrap: nowrap; }
  .nav .navlink { padding: 8px 9px; font-size: 14px; white-space: nowrap; }
  .nav .navlink[href="https://claystage.studio"] { display: none; }
  .nav .btn { margin-left: 4px; padding: 0 14px; white-space: nowrap; }
}
@media (max-width: 720px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
  /* Subpages (contact / legal) carry NO hamburger (and privacy/terms don't even load
     site.js), so the blanket `.nav { display:none }` above would strip their entire
     header + CTA on phones. For those, keep the header usable: hide the text links
     but keep the primary "Start on the stage" CTA + the logo reachable. */
  .header-simple .nav { display: flex; gap: 10px; align-items: center; }
  .header-simple .nav .navlink { display: none; }
  .header-simple .nav .btn-primary { display: inline-flex; }
  .loop-grid, .feat-grid, .speed-grid, .price-grid, .show-grid, .foot-cols { grid-template-columns: 1fr; }
  .feat-wide { grid-column: span 1; }
  .hero-h1 { font-size: clamp(38px, 13vw, 64px); }
  /* On phones the chips wrap to ~3 lines and the cookie banner to ~3 lines; tuck
     the chips higher and pad the bottom generously so the opaque banner clears
     them. The banner itself is made more compact below to shrink its footprint. */
  /* The header is position:fixed and 72px tall, so the hero must pad MORE than that
     to clear it — at 60px the badge tucked right under the logo. Anchor content to
     the top (flex-start) so a tall hero never re-overflows up under the header. */
  .hero { padding-top: 116px; padding-bottom: 250px; justify-content: flex-start; }
  /* The marquee feels fast on a narrow viewport (items cross the small window
     quickly) — slow it well down on phones for a calm scroll. */
  .marquee-track { animation-duration: 70s; }
  /* While the cookie banner is up, hide the hero chips it would otherwise overlap
     (visibility, not display, so nothing shifts when they return on consent). */
  body.cookie-open .hero-chips { visibility: hidden; }
  .hero-sub { margin-top: 16px; }
  .hero-cta { margin-top: 18px; gap: 10px; }
  .hero-chips { margin-top: 16px; gap: 8px 18px; }
  /* Compact, predictable banner on phones: copy on its own row, the two actions
     stacked full-width below it (instead of squeezed beside the text). Smaller
     padding keeps the footprint tight so it clears the lifted chips above. */
  .cookie { padding: 14px 16px; gap: 12px; }
  .cookie p { font-size: 12.5px; line-height: 1.45; min-width: 0; flex-basis: 100%; }
  .cookie-actions { width: 100%; }
  .cookie-actions .btn { flex: 1; justify-content: center; }
  .waitlist-row { flex-direction: column; }
  .waitlist .btn { justify-content: center; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
}

/* ═══ REDUCED MOTION — kill the fancy stuff ════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none; }
  .scroll-rail i { animation: none; }
  .cursor { display: none !important; }
  .splittext .ch, .brand-word .ch { transform: none !important; }
}