/* ============================================================
   TableOne Studio — Marketing Site UI Kit styles
   Composes the design-system tokens (styles.css must load first).
   No faked 3D: every dimensional object is a provided render.
   ============================================================ */

.site { position: relative; overflow-x: clip; }

/* film grain over the whole page */
.site::before {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.045; mix-blend-mode: overlay;
  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='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: var(--container-wide); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--ink-950) 78%, transparent);
  backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md));
  border-bottom-color: var(--border-subtle);
  padding-block: 13px;
}
.nav__brand { display: inline-flex; align-items: center; gap: 11px; margin-left: 22px; }
.nav__logo { height: 40px; width: auto; display: block; transition: height var(--dur-base) var(--ease-out); }
.nav__word { font-family: var(--font-sans); font-weight: 600; font-size: 1.62rem; letter-spacing: -0.02em; color: var(--text-heading); text-transform: lowercase; line-height: 1; }
.nav__word span { color: var(--text-muted); font-weight: 400; }
.is-stuck .nav__logo { height: 33px; }
.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__link {
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.005em; color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out); position: relative; padding: 7px 1px;
}
/* lime underline that wipes in from the left on hover */
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 1.5px; border-radius: 2px;
  background: var(--accent); box-shadow: 0 0 8px var(--lime-glow);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out);
}
.nav__link:hover { color: var(--text-heading); }
.nav__link:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .nav__link::after { transition: none; } }
@media (max-width: 880px) { .nav__links .nav__link { display: none; } }

/* ---------- Buttons (mirror Button.jsx) ---------- */
/* Pill buttons with a circular arrow chip, soft glow + hover sheen */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  font-family: var(--font-sans); font-weight: 650; line-height: 1; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--radius-pill); cursor: pointer;
  transition: var(--t-control); height: 52px; padding: 0 10px 0 26px; font-size: 0.9375rem;
  text-decoration: none; position: relative; overflow: hidden; isolation: isolate;
}
.btn--lg { height: 64px; padding: 0 12px 0 34px; font-size: 1.0625rem; }
.btn--primary {
  background: linear-gradient(180deg, var(--lime-300), var(--lime-500) 58%, var(--lime-600));
  color: var(--ink-1000); font-weight: 700;
  box-shadow: 0 10px 30px -10px var(--lime-glow-strong), inset 0 1px 0 rgba(255,255,255,0.45);
}
.btn--primary:hover { box-shadow: 0 16px 40px -8px var(--lime-glow-strong), 0 0 54px -10px var(--lime-glow), inset 0 1px 0 rgba(255,255,255,0.55); transform: translateY(-2px); }
/* sheen sweep on hover */
.btn--primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: translateX(-240%) skewX(-14deg); transition: transform 0.8s var(--ease-out);
}
.btn--primary:hover::after { transform: translateX(380%) skewX(-14deg); }
.btn--secondary {
  background: color-mix(in srgb, var(--surface-card) 55%, transparent); color: var(--text-heading); border-color: var(--border-strong);
  backdrop-filter: blur(var(--blur-sm)); -webkit-backdrop-filter: blur(var(--blur-sm));
}
.btn--secondary:hover { color: var(--accent); border-color: var(--border-accent); background: var(--accent-soft); box-shadow: var(--glow-sm); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); }
/* magnetic buttons: JS owns transform, so exclude it from the CSS transition */
.btn[data-magnetic] { transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); will-change: transform; }
/* circular arrow chip */
.btn__arrow {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%; font-family: var(--font-sans); font-size: 1.05em;
  transition: transform var(--dur-base) var(--ease-out); position: relative; z-index: 3;
}
.btn--lg .btn__arrow { width: 40px; height: 40px; }
.btn--primary .btn__arrow { background: var(--ink-1000); color: var(--accent); }
.btn--secondary .btn__arrow { background: var(--accent-soft); color: var(--accent); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ---------- Custom cursor: precise dot + trailing lime ring ---------- */
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor .btn, .has-cursor [data-magnetic], .has-cursor [role="button"] { cursor: none; }
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 9999; border-radius: 50%; pointer-events: none;
  opacity: 0; transition: opacity 0.3s ease; will-change: transform;
}
.cursor-on .cursor-dot, .cursor-on .cursor-ring { opacity: 1; }
.cursor-dot { width: 7px; height: 7px; background: var(--accent); box-shadow: 0 0 10px var(--lime-glow); }
.cursor-ring {
  width: 38px; height: 38px; border: 1.5px solid rgba(201,227,38,0.7);
  box-shadow: 0 0 12px rgba(201,227,38,0.22), 0 0 0 1px rgba(0,0,0,0.12), inset 0 0 12px rgba(201,227,38,0.06);
  transition: width 0.26s var(--ease-out), height 0.26s var(--ease-out), background 0.26s, border-color 0.26s, opacity 0.3s ease;
}
/* over interactive targets: ring blooms + softly fills, dot tightens */
.cursor-hover .cursor-ring { width: 60px; height: 60px; border-color: var(--accent); background: rgba(201,227,38,0.10); }
.cursor-hover .cursor-dot { width: 4px; height: 4px; }
/* press feedback */
.cursor-down .cursor-ring { width: 30px; height: 30px; background: rgba(201,227,38,0.16); }
@media (prefers-reduced-motion: reduce) { .cursor-ring { transition: opacity 0.3s ease; } }
@media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none !important; } }

/* ---------- Shared section bits ---------- */
.section { position: relative; padding-block: var(--section-y); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-sans); font-size: var(--text-label); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted);
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--accent); box-shadow: 0 0 8px var(--lime-glow); }
.eyebrow b { color: var(--accent); font-weight: 500; }

.em { font-family: var(--font-display); font-style: italic; font-weight: 500; letter-spacing: 0; }
.em--lime { color: var(--accent); }

h2.display {
  font-family: var(--font-sans); font-weight: 600; letter-spacing: var(--tracking-tight);
  font-size: var(--text-display-2); line-height: var(--lh-snug); color: var(--text-heading); margin: 18px 0 0;
}
.lede { font-size: var(--text-lg); line-height: var(--lh-body); color: var(--text-muted); max-width: 52ch; margin-top: 22px; }

/* ---------- Reveal animation ---------- */
/* `.is-in` sets the final VISIBLE state directly and a TRANSITION eases
   into it. A transition (not a keyframe) is used on purpose: it holds the
   start value during transition-delay, so staggered reveals can't snap to
   their final spot and then jump back — and opacity fades in step with the
   transform instead of popping. Renderers that ignore transitions still
   land on the final state instantly (never frozen at opacity 0). */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity var(--dur-reveal) var(--ease-emphasis),
              transform var(--dur-reveal) var(--ease-emphasis);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal.is-in[data-delay="1"] { transition-delay: 90ms; }
.reveal.is-in[data-delay="2"] { transition-delay: 180ms; }
.reveal.is-in[data-delay="3"] { transition-delay: 270ms; }
/* Elements whose transform is driven per-frame by the scroll engine
   (parallax / zoom / scrub) must NOT transition transform, or every
   scroll update eases over --dur-reveal and the motion lags and stutters.
   They still fade their opacity in like any other reveal. */
.reveal[data-parallax], .reveal[data-zoom], .reveal[data-scrub], .reveal[data-games-machine] {
  transition: opacity var(--dur-reveal) var(--ease-emphasis);
}
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ============================================================
   HERO — centered CSS perspective concept.
   Minimal, nonchalant: a short headline floating dead-center in
   front of a perspective field that recedes to a CENTERED
   vanishing point. The glass render sits behind the title, glass
   panels float low and flank it at depth, the grid floor recedes.
   The stage tilts gently toward the cursor; scroll eases it back.
   ============================================================ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding-top: clamp(88px, 12vh, 140px); padding-bottom: 72px; }

/* camera — centered vanishing point */
.hero__scene {
  position: absolute; inset: 0; z-index: 0;
  perspective: 1400px; perspective-origin: 50% 42%;
  pointer-events: none;
}
.hero__stage {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 600ms var(--ease-out);
}
.plate { position: absolute; transform-style: preserve-3d; will-change: transform; }

/* receding grid floor (symmetric, centered) */
.plate--grid {
  left: -30%; right: -30%; bottom: -10%; height: 150%;
  background-image: var(--grid-lines); background-size: 60px 60px;
  transform: translateZ(-540px) rotateX(79deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.2) 44%, transparent 72%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.2) 44%, transparent 72%);
  opacity: 0.6;
}
/* lime layer that lights the platform as you scroll (JS sets --lit 0..1) */
.plate--grid::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--accent) 1px, transparent 1px),
    linear-gradient(to bottom, var(--accent) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: calc(var(--lit, 0) * 0.7);
  filter: drop-shadow(0 0 6px var(--lime-glow));
}
/* back grid wall (centered fade) */
.plate--wall {
  left: -20%; right: -20%; top: -20%; height: 150%;
  background-image: var(--grid-lines); background-size: 84px 84px;
  transform: translateZ(-640px);
  mask-image: radial-gradient(64% 58% at 50% 42%, #000, transparent 76%);
  -webkit-mask-image: radial-gradient(64% 58% at 50% 42%, #000, transparent 76%);
  opacity: 0.26;
}
/* lime depth glow, centered behind the title */
.plate--glow {
  left: 50%; top: 46%; width: 104%; height: 104%;
  transform: translate(-50%, -50%) translateZ(-340px);
  /* darker green + long multi-stop falloff that fully reaches transparent well
     inside the box, so there's no visible gradient edge from afar */
  background: radial-gradient(closest-side,
    rgba(118,136,14,0.12) 0%,
    rgba(118,136,14,0.07) 26%,
    rgba(118,136,14,0.032) 46%,
    rgba(118,136,14,0.013) 66%,
    rgba(118,136,14,0.004) 80%,
    transparent 92%);
  filter: blur(22px); opacity: 0.6;
  animation: glowBreathe 12s ease-in-out infinite;
}
@keyframes glowBreathe {
  0%, 100% { opacity: 0.36; transform: translate(-50%, -50%) translateZ(-340px) scale(1); }
  50%      { opacity: 0.5;  transform: translate(-50%, -50%) translateZ(-340px) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .plate--glow { animation: none; } }
/* the glass render — centered behind the headline, edges feathered */
.plate--render {
  left: 50%; top: 44%; width: min(60vw, 800px); height: 104%;
  transform: translate(-50%, -50%) translateZ(-150px);
  opacity: 0.8;
}
/* this render has a textured (non-pure-black) background, so screen blend would
   expose its rectangular frame — feather it with a radial mask instead. */
.plate--render img {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  filter: saturate(1.08) brightness(1.1);
  -webkit-mask-image: radial-gradient(58% 62% at 50% 50%, #000 30%, transparent 76%);
  mask-image: radial-gradient(58% 62% at 50% 50%, #000 30%, transparent 76%);
}

/* ---- Transparent hero metrics flanking the headline (no card chrome) ---- */
.hmetric {
  position: absolute; z-index: 3; top: 50%;
  transform: translateY(-50%) translate3d(var(--px,0px), var(--py,0px), 0);
  display: flex; flex-direction: column; gap: 13px; width: min(24vw, 300px);
  pointer-events: none;
  /* iOS-style render: scale up + un-blur + fade, smooth (no bounce) */
  animation: iosRender 1.05s cubic-bezier(0.16, 1, 0.3, 1) backwards; animation-delay: 640ms;
}
.hmetric--l { left: clamp(20px, 4.5vw, 76px); align-items: flex-start; text-align: left; }
.hmetric--r { right: clamp(20px, 4.5vw, 76px); align-items: flex-end; text-align: right; animation-delay: 800ms; }
@keyframes iosRender { from { opacity: 0; transform: translateY(-50%) scale(0.84); filter: blur(16px); } }
@media (max-width: 1200px) { .hmetric { display: none; } }
@media (prefers-reduced-motion: reduce) { .hmetric { animation: none; } }

.hmetric__label { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); display: inline-flex; align-items: center; gap: 9px; }
.hmetric__label::before { content: ""; width: 16px; height: 1px; background: var(--accent); box-shadow: 0 0 8px var(--lime-glow); }
.hmetric--r .hmetric__label { flex-direction: row-reverse; }
/* sans, not mono — reads like a product metric, not a code editor */
.hmetric__val { font-family: var(--font-sans); font-weight: 800; font-size: clamp(2.7rem, 4.4vw, 4.5rem); line-height: 0.86; color: var(--text-heading); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; text-shadow: 0 2px 34px rgba(0,0,0,0.6), 0 0 52px var(--lime-glow-soft); }
.hmetric__val i { font-style: normal; }
.hmetric--l .hmetric__val i { color: var(--accent); }
.hmetric--r .hmetric__val i { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; color: var(--text-muted); margin-left: 8px; letter-spacing: 0; }
.hmetric__meta { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; color: var(--text-faint); line-height: 1.5; max-width: 24ch; }
.hmetric__meta b { color: var(--accent); font-weight: 600; }
/* reuse the spark/bar visuals, transparent on the hero */
.hmetric__spark { width: 100%; height: 32px; }
.hmetric__bar { width: 100%; background: rgba(255,255,255,0.08); }

/* chart data pops in clearly one-by-one, after the metric has rendered.
   NB: extra .hmetric specificity so this beats the generic `.mcard__spark i`
   rule (which lives later in the file and would otherwise fire all bars at once). */
.hmetric .hmetric__spark i { animation: barPop 0.5s cubic-bezier(0.34, 1.5, 0.5, 1) backwards; }
.hmetric .hmetric__spark i:nth-child(1){animation-delay:1.4s} .hmetric .hmetric__spark i:nth-child(2){animation-delay:1.55s} .hmetric .hmetric__spark i:nth-child(3){animation-delay:1.7s} .hmetric .hmetric__spark i:nth-child(4){animation-delay:1.85s} .hmetric .hmetric__spark i:nth-child(5){animation-delay:2.0s} .hmetric .hmetric__spark i:nth-child(6){animation-delay:2.15s} .hmetric .hmetric__spark i:nth-child(7){animation-delay:2.3s} .hmetric .hmetric__spark i:nth-child(8){animation-delay:2.45s} .hmetric .hmetric__spark i:nth-child(9){animation-delay:2.6s} .hmetric .hmetric__spark i:nth-child(10){animation-delay:2.75s} .hmetric .hmetric__spark i:nth-child(11){animation-delay:2.9s} .hmetric .hmetric__spark i:nth-child(12){animation-delay:3.05s}
@keyframes barPop { 0% { transform: scaleY(0); } 72% { transform: scaleY(1.16); } 100% { transform: scaleY(1); } }
.hmetric .hmetric__bar i { animation: barFill 1.3s cubic-bezier(0.16, 1, 0.3, 1) backwards; animation-delay: 1.5s; }

@keyframes floatA { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-10px) } }
@keyframes floatB { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(9px) } }

.hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(56% 50% at 50% 44%, rgba(10,10,11,0.78), transparent 72%),
    linear-gradient(to bottom, rgba(10,10,11,0.45) 0%, transparent 26%, transparent 64%, var(--ink-900) 100%);
}

.hero__content { position: relative; z-index: 3; width: 100%; max-width: 1000px; margin: 0 auto; will-change: transform; display: flex; flex-direction: column; align-items: center; }
.hero h1 {
  display: flex; flex-direction: column; align-items: center; gap: 0.04em;
  font-family: var(--font-sans); font-weight: 700; font-size: clamp(3.5rem, 8.6vw, 7.6rem);
  line-height: 0.92; letter-spacing: -0.035em; color: var(--text-heading);
  margin: 24px auto 0; max-width: none; text-shadow: 0 2px 50px rgba(0,0,0,0.6);
}
.hero h1 .em { line-height: 1.0; font-weight: 500; }
.hero h1 .em--lime { text-shadow: 0 0 44px rgba(201,227,38,0.35); }
/* give the italic emphasis word a touch more scale */
.hero__title .word.em { font-size: 1.08em; }
/* word-by-word iOS-style render: blur + scale + fade, matching the hero metrics */
.hero__titleline { display: flex; gap: 0.28em; justify-content: center; flex-wrap: wrap; line-height: 0.98; }
.hero__title .word { display: inline-block; vertical-align: top; padding: 0 0.04em 0.12em; }
.hero__title .word > i { display: block; font-style: inherit; animation: wordRender 1.15s cubic-bezier(0.16, 1, 0.3, 1) backwards; animation-delay: calc(var(--wd) * 150ms + 260ms); }
.hero__title .word.em > i { font-family: var(--font-display); font-style: italic; }
@keyframes wordRender { from { opacity: 0; transform: scale(0.86); filter: blur(15px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .hero__title .word > i { transform: none; filter: none; opacity: 1; animation: none; } }
.hero__line { font-size: var(--text-lg); color: var(--text-muted); margin-top: 26px; max-width: 40ch; }
.hero__cta { display: flex; gap: 16px; margin-top: 60px; flex-wrap: wrap; justify-content: center; }

/* metric card visual (reused inside plates) — live mini-dashboard */
.mcard {
  display: flex; flex-direction: column; gap: 12px; min-width: 236px; padding: 20px 22px;
  border-radius: var(--radius-md);
  background:
    linear-gradient(155deg, rgba(255,255,255,0.05), transparent 46%),
    color-mix(in srgb, var(--surface-card) 70%, transparent);
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg), var(--edge-top), var(--glow-sm);
  backdrop-filter: blur(var(--blur-md)) saturate(1.2); -webkit-backdrop-filter: blur(var(--blur-md)) saturate(1.2);
}
/* top accent hairline that catches the lime */
.mcard::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--lime-glow-strong), transparent);
}
.mcard { position: relative; overflow: hidden; }
.mcard__top { display: flex; align-items: center; justify-content: space-between; }
.mcard__head { display: flex; align-items: center; gap: 9px; }
.mcard__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--lime-glow-strong); animation: pulseDot 2.4s var(--ease-in-out) infinite; flex: none; }
@keyframes pulseDot { 0%{ box-shadow: 0 0 0 0 var(--lime-glow-strong) } 70%{ box-shadow: 0 0 0 7px rgba(201,227,38,0) } 100%{ box-shadow: 0 0 0 0 rgba(201,227,38,0) } }
.mcard__label { font-family: var(--font-sans); font-size: 0.6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.mcard__live { margin-left: auto; font-family: var(--font-sans); font-size: 0.5625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--border-accent); border-radius: var(--radius-pill); padding: 3px 8px; line-height: 1; }
.mcard__val { font-family: var(--font-mono); font-size: 2.4rem; font-weight: 700; color: var(--text-heading); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 0.95; }
.mcard__plus { color: var(--accent); }
.mcard__unit { font-size: 0.95rem; font-weight: 500; color: var(--text-muted); margin-left: 8px; letter-spacing: 0; }
/* sparkline made of bars (UI data-viz, not a faked render object) */
.mcard__spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.mcard__spark i { flex: 1; height: var(--h, 50%); border-radius: 1.5px; background: linear-gradient(to top, color-mix(in srgb, var(--accent) 30%, transparent), var(--accent)); opacity: 0.55; transform-origin: bottom; animation: sparkGrow 900ms var(--ease-emphasis) backwards; }
.mcard__spark i:last-child { opacity: 1; box-shadow: 0 0 10px var(--lime-glow); }
.mcard__spark i:nth-child(1){animation-delay:.02s} .mcard__spark i:nth-child(2){animation-delay:.06s} .mcard__spark i:nth-child(3){animation-delay:.10s} .mcard__spark i:nth-child(4){animation-delay:.14s} .mcard__spark i:nth-child(5){animation-delay:.18s} .mcard__spark i:nth-child(6){animation-delay:.22s} .mcard__spark i:nth-child(7){animation-delay:.26s} .mcard__spark i:nth-child(8){animation-delay:.30s} .mcard__spark i:nth-child(9){animation-delay:.34s} .mcard__spark i:nth-child(10){animation-delay:.38s} .mcard__spark i:nth-child(11){animation-delay:.42s} .mcard__spark i:nth-child(12){animation-delay:.46s}
@keyframes sparkGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.mcard__bar { height: 6px; border-radius: var(--radius-pill); background: var(--ink-700); overflow: hidden; }
.mcard__bar i { display: block; height: 100%; width: 78%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-press), var(--accent)); box-shadow: 0 0 12px var(--lime-glow); animation: barFill 1.6s var(--ease-emphasis) backwards; }
@keyframes barFill { from { width: 0; } }
.mcard__foot { display: flex; align-items: center; gap: 10px; }
.mcard__sub { font-family: var(--font-sans); font-size: 0.625rem; letter-spacing: 0.04em; color: var(--text-faint); text-transform: uppercase; }
.mcard__delta { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; }
.mcard__delta.up { color: var(--accent); } .mcard__delta.down { color: var(--danger); }
@media (prefers-reduced-motion: reduce) { .mcard__spark i, .mcard__bar i, .mcard__dot { animation: none; } }

/* below the 3D breakpoint, flatten the scene for legibility */
@media (max-width: 920px) {
  .hero__scene { perspective: none; }
  .hero__stage { transform: none !important; }
  .plate--grid, .plate--wall, .plate--card { display: none; }
  .plate--render { width: 116vw; opacity: 0.42; }
  .hero h1 { font-size: clamp(3rem, 14vw, 5rem); }
}

.scroll-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 4; font-family: var(--font-sans); font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scroll-hint i { width: 1px; height: 34px; background: linear-gradient(var(--accent), transparent); animation: scrolldot 2s var(--ease-in-out) infinite; }
@keyframes scrolldot { 0%{transform:scaleY(0);transform-origin:top} 40%{transform:scaleY(1);transform-origin:top} 60%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ---------- Hero: combined central glass cluster ----------
   The two glass renders are stacked into ONE larger feature object,
   centered behind the headline at different depths so the cursor
   tilt/drift separates them into a single dimensional cluster. */
.plate--obj { pointer-events: none; }
/* transparent cutout render — normal compositing + a soft lime glow */
.plate--obj img { width: 100%; height: auto; object-fit: contain; filter: saturate(1.06) brightness(1.05) drop-shadow(0 0 50px rgba(201,227,38,0.22)); }
/* game-pieces — the central glowing cluster (dice · < > chip · pyramid · sphere) */
.plate--objL { left: 50%; top: 50%; width: min(48vw, 640px); transform: translate(-50%, -50%) translateZ(70px) translate3d(var(--px,0px), var(--py,0px), 0); }
/* two transparent renders behind the main cluster, faded + at depth */
.plate--objTree {
  left: 50%; top: 40%; width: min(80vw, 1140px);
  transform: translate(-50%, -50%) translateZ(-150px) translate3d(var(--px,0px), var(--py,0px), 0); opacity: 0.2;
  /* feather all four edges so the branches fade out instead of hard-cutting */
  -webkit-mask-image: radial-gradient(62% 66% at 50% 48%, #000 30%, transparent 80%);
  mask-image: radial-gradient(62% 66% at 50% 48%, #000 30%, transparent 80%);
}
.plate--objSplash { left: 52%; top: 63%; width: min(40vw, 520px); transform: translate(-50%, -50%) translateZ(-30px) translate3d(var(--px,0px), var(--py,0px), 0); opacity: 0.5; }
/* tree is a soft, blurred backdrop; splash carries a light glow */
.plate--objTree img { filter: blur(2px) saturate(1.04) brightness(1.02) drop-shadow(0 0 40px rgba(201,227,38,0.14)); }
.plate--objSplash img { filter: saturate(1.04) brightness(1.02) drop-shadow(0 0 40px rgba(201,227,38,0.16)); }
@media (max-width: 920px) { .plate--obj { display: none; } }

/* ---------- Hero: gradient particles ---------- */
.hero__particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.particle { position: absolute; border-radius: 50%; will-change: transform, opacity; opacity: 0; animation: particleRise var(--pd, 10s) var(--ease-in-out) infinite; animation-delay: var(--pdelay, 0s); }
@keyframes particleRise {
  0%   { transform: translate(0,0) scale(0.5); opacity: 0; }
  12%  { opacity: var(--po, 0.6); }
  55%  { transform: translate(var(--dx, 0px), var(--dy, -120px)) scale(1); opacity: var(--po, 0.6); }
  88%  { opacity: 0; }
  100% { transform: translate(calc(var(--dx, 0px) * 1.5), calc(var(--dy, -120px) * 1.7)) scale(0.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero__particles { display: none; } }

/* ---------- Hero: greenish dust in the corners / lower edge ---------- */
.hero__dust {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(48% 42% at 0% 100%, rgba(135,155,16,0.11), transparent 72%),
    radial-gradient(48% 42% at 100% 100%, rgba(135,155,16,0.11), transparent 72%),
    radial-gradient(74% 28% at 50% 100%, rgba(135,155,16,0.07), transparent 74%),
    radial-gradient(36% 30% at 0% 0%, rgba(135,155,16,0.04), transparent 70%),
    radial-gradient(36% 30% at 100% 0%, rgba(135,155,16,0.04), transparent 70%);
}
/* fine green grain concentrated at the corners + lower edge = "dusty" texture */
.hero__dust::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--lime-700); opacity: 0.07;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image:
    radial-gradient(52% 46% at 0% 100%, #000, transparent 70%),
    radial-gradient(52% 46% at 100% 100%, #000, transparent 70%),
    radial-gradient(80% 30% at 50% 100%, #000, transparent 72%),
    radial-gradient(40% 34% at 0% 0%, #000, transparent 68%),
    radial-gradient(40% 34% at 100% 0%, #000, transparent 68%);
  mask-image:
    radial-gradient(52% 46% at 0% 100%, #000, transparent 70%),
    radial-gradient(52% 46% at 100% 100%, #000, transparent 70%),
    radial-gradient(80% 30% at 50% 100%, #000, transparent 72%),
    radial-gradient(40% 34% at 0% 0%, #000, transparent 68%),
    radial-gradient(40% 34% at 100% 0%, #000, transparent 68%);
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) { .hero__dust::after { opacity: 0.1; } }
.dust {
  position: absolute; border-radius: 50%; background: var(--lime-600);
  will-change: transform, opacity; opacity: 0; filter: blur(0.4px);
  box-shadow: 0 0 4px rgba(135,155,16,0.4);
  animation: dustFloat var(--dd, 13s) ease-in-out infinite; animation-delay: var(--ddelay, 0s);
}
@keyframes dustFloat {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
  22%  { opacity: var(--do, 0.5); }
  78%  { opacity: var(--do, 0.5); }
  100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -60px)) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .dust { display: none; } }

/* ---------- Hero: storytelling text ---------- */
.hero__sub { font-size: 1.2rem; line-height: 1.55; color: var(--text-body); max-width: 46ch; margin: 28px auto 0; font-weight: 400; }
.hero__sub .em--lime { text-shadow: 0 0 30px rgba(201,227,38,0.3); }
.hero__cta { margin-top: 40px; }
/* ---- Hero stat bar: animated, glowing, "live" ---- */
.hero__stats { margin-top: 44px; display: flex; align-items: stretch; justify-content: center; gap: clamp(22px, 4vw, 60px); flex-wrap: wrap; }
.hstat { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hstat__num {
  font-family: var(--font-sans); font-weight: 800; font-size: clamp(2.3rem, 3.8vw, 3.5rem);
  line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline; gap: 7px;
  background: linear-gradient(110deg, #ffffff 0%, #eaf3c0 28%, var(--accent) 48%, #ffffff 66%, #e6f0b6 100%);
  background-size: 240% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 30px rgba(201,227,38,0.32));
  animation: statShine 6.5s ease-in-out infinite;
}
@keyframes statShine { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .hstat__num { animation: none; } }
.hstat__num em { font-style: normal; -webkit-text-fill-color: var(--text-muted); color: var(--text-muted); font-size: 0.95rem; font-weight: 600; letter-spacing: 0; align-self: flex-end; margin-bottom: 0.42em; filter: none; }
.hstat__lbl {
  font-family: var(--font-sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-faint);
  display: inline-flex; align-items: center; gap: 9px;
}
.hstat__live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--lime-glow); position: relative; flex: none; }
.hstat__live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); animation: livePulse 2.2s ease-out infinite; }
@keyframes livePulse { 0% { transform: scale(1); opacity: 0.6; } 70% { transform: scale(3.4); opacity: 0; } 100% { transform: scale(3.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hstat__live::after { animation: none; } }
.hstat__sep { width: 1px; align-self: center; height: 48px; background: linear-gradient(to bottom, transparent, rgba(201,227,38,0.55), transparent); box-shadow: 0 0 10px var(--lime-glow); }
@media (max-width: 560px) { .hstat__sep { display: none; } .hero__stats { gap: 26px 40px; } }

/* staged iOS-style render: blur + scale + fade, settling upward */
.fade-seq { opacity: 0; transform: translateY(20px) scale(0.985); filter: blur(7px); animation: fadeSeq 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: calc(var(--d, 0) * 105ms + 220ms); }
@keyframes fadeSeq { to { opacity: 1; transform: none; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .fade-seq { opacity: 1; transform: none; filter: none; animation: none; } }