/* Firebrat marketing site — design system
   Typeface pairing is deliberate: Lexend was designed by reading-proficiency
   researchers to improve reading speed/comprehension; Atkinson Hyperlegible
   was designed by the Braille Institute for readers with low vision. Both
   fonts exist specifically because of the same accessibility goals this
   project has, not chosen for looks alone. */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@500;600;700;800&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  --bg: #FBF6EF;
  --bg-alt: #F3ECE0;
  --surface: #FFFFFF;
  --text: #2A2118;
  --text-muted: #6B5D4F;
  --border: #E7DDCC;
  --ember-1: #FF6B4A;
  --ember-2: #FFB238;
  --ember-3: #C4432B;
  --deep: #2D2A4A;
  --deep-2: #4A4470;
  --focus: #2D2A4A;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --font-display: 'Lexend', system-ui, sans-serif;
  --font-body: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --shadow-soft: 0 20px 60px -20px rgba(45, 42, 74, 0.25);
  --shadow-card: 0 10px 30px -12px rgba(42, 33, 24, 0.18);
  color-scheme: light;
}

:root[data-theme="dark"]{
  --bg: #1B1712;
  --bg-alt: #221C15;
  --surface: #2A231B;
  --text: #F5EDE1;
  --text-muted: #C6B8A6;
  --border: #3A3126;
  --focus: #FFB238;
  --shadow-soft: 0 20px 60px -20px rgba(0,0,0,0.6);
  --shadow-card: 0 10px 30px -12px rgba(0,0,0,0.5);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #1B1712;
    --bg-alt: #221C15;
    --surface: #2A231B;
    --text: #F5EDE1;
    --text-muted: #C6B8A6;
    --border: #3A3126;
    --focus: #FFB238;
    --shadow-soft: 0 20px 60px -20px rgba(0,0,0,0.6);
    --shadow-card: 0 10px 30px -12px rgba(0,0,0,0.5);
    color-scheme: dark;
  }
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{ font-family: var(--font-display); color: var(--text); line-height: 1.2; margin: 0 0 0.5em; }
h1{ font-weight: 800; }
h2{ font-weight: 700; }
h3{ font-weight: 600; }
p{ margin: 0 0 1em; color: var(--text-muted); max-width: 62ch; }
a{ color: inherit; }
img,svg{ max-width: 100%; display: block; }

.wrap{ max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- Nav ---------- */
.site-nav{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--border);
}
.site-nav .wrap{ display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand{ display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; text-decoration: none; }
.brand .mark{ width: 34px; height: 34px; }
img.mark{ border-radius: 9px; }
.nav-links{ display: flex; align-items: center; gap: clamp(14px, 1.9vw, 28px); list-style: none; margin: 0; padding: 0; }
.nav-links a{ text-decoration: none; font-weight: 600; color: var(--text-muted); font-size: 0.92rem; white-space: nowrap; transition: color .15s ease; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color: var(--text); }
.nav-actions{ display: flex; align-items: center; gap: 10px; }
.icon-btn{
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text);
}
.icon-btn svg{ width: 18px; height: 18px; }
.nav-toggle{ display: none; }

@media (max-width: 760px){
  .nav-links{
    display: none; position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 4px;
    background: var(--bg); border-bottom: 1px solid var(--border);
    padding: 12px 24px 20px;
  }
  .nav-links.open{ display: flex; }
  .nav-links a{ padding: 10px 0; width: 100%; }
  .nav-toggle{ display: flex; }
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.98rem;
  padding: 13px 24px; border-radius: 999px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{
  background: linear-gradient(135deg, var(--ember-1), var(--ember-3));
  color: #fff; box-shadow: 0 12px 30px -10px rgba(255,107,74,0.55);
}
.btn-ghost{ background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-lg{ padding: 16px 30px; font-size: 1.05rem; }

/* ---------- Hero ---------- */
.hero{ position: relative; overflow: hidden; padding: 96px 0 64px; }
.hero-glow{
  position: absolute; inset: -20% -10% auto -10%; height: 560px; z-index: 0;
  background:
    radial-gradient(480px 320px at 15% 20%, color-mix(in srgb, var(--ember-2) 55%, transparent), transparent 70%),
    radial-gradient(560px 380px at 85% 10%, color-mix(in srgb, var(--deep-2) 45%, transparent), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}
.hero .wrap{ position: relative; z-index: 1; }
.eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ember-3); background: color-mix(in srgb, var(--ember-2) 18%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ember-2) 40%, var(--border));
  padding: 7px 14px; border-radius: 999px; margin-bottom: 22px;
}
.hero h1{ font-size: clamp(2.4rem, 5vw, 3.6rem); max-width: 16ch; margin-bottom: 0.35em; }
.hero .lede{ font-size: 1.2rem; max-width: 56ch; color: var(--text-muted); }
.hero-actions{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.hero-stats{ display: flex; gap: 40px; margin-top: 56px; flex-wrap: wrap; }
.stat b{ display: block; font-family: var(--font-display); font-size: 1.7rem; color: var(--text); }
.stat span{ color: var(--text-muted); font-size: 0.92rem; }

/* ---------- Mockup phone ---------- */
.mockup-wrap{ display: flex; justify-content: center; margin-top: 56px; }
.phone{
  width: min(320px, 84vw); border-radius: 42px; padding: 14px;
  background: linear-gradient(160deg, var(--deep), var(--deep-2));
  box-shadow: var(--shadow-soft);
}
.phone-screen{
  background: var(--surface); border-radius: 30px; overflow: hidden; padding: 18px 16px 14px;
  display: flex; flex-direction: column; gap: 12px; min-height: 480px;
}
.phone-topbar{ display: flex; align-items: center; justify-content: space-between; }
.phone-topbar b{ font-family: var(--font-display); font-size: 0.95rem; }
.phone-progress{ height: 5px; border-radius: 4px; background: var(--bg-alt); overflow: hidden; }
.phone-progress i{ display: block; height: 100%; width: 42%; background: linear-gradient(90deg, var(--ember-1), var(--ember-2)); }
.gallery-row{ display: flex; gap: 8px; overflow: hidden; }
.gallery-row .thumb{ flex: 0 0 auto; width: 78px; height: 58px; border-radius: 10px; background: var(--bg-alt); border: 2px solid transparent; }
.gallery-row .thumb.active{ border-color: var(--ember-1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember-1) 25%, transparent); }
.line{ height: 10px; border-radius: 6px; background: var(--bg-alt); }
.line.short{ width: 62%; }
.formula-chip{
  border: 2px solid var(--ember-1); background: color-mix(in srgb, var(--ember-1) 12%, var(--surface));
  border-radius: 12px; padding: 12px 14px; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ember-1) 15%, transparent);
}
.phone-lines{ display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.phone-transport{
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 18px;
  border-top: 1px solid var(--border); padding-top: 14px;
}
.transport-dot{ width: 12px; height: 12px; border-radius: 50%; background: var(--text-muted); opacity: .5; }
.transport-play{
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ember-1), var(--ember-3)); color: #fff;
}

/* ---------- Sections ---------- */
section{ padding: 88px 0; }
.section-head{ max-width: 640px; margin-bottom: 52px; }
.section-head .eyebrow{ margin-bottom: 16px; }
.section-head h2{ font-size: clamp(1.8rem, 3.4vw, 2.4rem); }

.alt{ background: var(--bg-alt); }

.grid{ display: grid; gap: 22px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px){ .grid-3, .grid-2{ grid-template-columns: 1fr; } }

.card{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 30px; box-shadow: var(--shadow-card);
}
.card .icon{
  width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ember-1) 85%, transparent), color-mix(in srgb, var(--ember-2) 85%, transparent));
  margin-bottom: 18px;
}
.card .icon svg{ width: 26px; height: 26px; color: #fff; }
.card h3{ font-size: 1.15rem; margin-bottom: 8px; }
.card p{ margin: 0; font-size: 0.98rem; }

/* ---------- Pipeline ---------- */
.pipeline{ display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: 8px; }
.pipe-step{
  flex: 1 1 200px; min-width: 200px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 24px; position: relative;
}
.pipe-step .num{
  font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; color: var(--ember-3);
  background: color-mix(in srgb, var(--ember-2) 20%, var(--surface)); width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.pipe-arrow{ display: flex; align-items: center; justify-content: center; width: 40px; flex: 0 0 40px; color: var(--text-muted); }
@media (max-width: 900px){
  .pipeline{ flex-direction: column; }
  .pipe-arrow{ width: 100%; height: 30px; transform: rotate(90deg); }
}

/* ---------- Quote ---------- */
.quote-block{
  background: linear-gradient(150deg, var(--deep), var(--deep-2));
  color: #F5EDE1; border-radius: var(--radius-lg); padding: 56px; text-align: center;
}
.quote-block p{ color: #EDE6DD; font-size: 1.35rem; font-family: var(--font-display); font-weight: 500; max-width: 42ch; margin: 0 auto 18px; line-height: 1.5; }
.quote-block span{ color: #C9BFE0; font-size: 0.95rem; }

/* ---------- CTA ---------- */
.cta{
  background: linear-gradient(135deg, var(--ember-1), var(--ember-3));
  border-radius: var(--radius-lg); padding: 60px; text-align: center; color: #fff;
}
.cta h2{ color: #fff; }
.cta p{ color: rgba(255,255,255,0.9); margin: 0 auto 28px; }
.cta .btn-ghost{ background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.4); color: #fff; }
.cta .btn-primary{ background: #fff; color: var(--ember-3); box-shadow: none; }

/* ---------- Footer ---------- */
footer{ border-top: 1px solid var(--border); padding: 48px 0; }
footer .wrap{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
footer p{ margin: 0; font-size: 0.9rem; }
.footer-links{ display: flex; gap: 22px; list-style: none; padding: 0; margin: 0; }
.footer-links a{ text-decoration: none; color: var(--text-muted); font-weight: 600; font-size: 0.9rem; }
.footer-links a:hover{ color: var(--text); }

/* ---------- Page header (non-home pages) ---------- */
.page-header{ padding: 72px 0 40px; }
.page-header .eyebrow{ margin-bottom: 18px; }
.page-header h1{ font-size: clamp(2rem, 4vw, 2.8rem); max-width: 20ch; }
.page-header p{ font-size: 1.1rem; max-width: 60ch; }

.prose h2{ margin-top: 1.6em; font-size: 1.5rem; }
.prose h3{ margin-top: 1.3em; font-size: 1.15rem; }
.prose ul,.prose ol{ color: var(--text-muted); }
.prose li{ margin-bottom: 0.4em; }
.prose code{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bg-alt);
  padding: 2px 6px; border-radius: 6px; font-size: 0.9em; color: var(--text);
}
.prose pre{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 18px; overflow-x: auto;
}
.prose pre code{ background: none; padding: 0; }

.person-note{
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--ember-1);
  border-radius: var(--radius-sm); padding: 26px 28px; margin: 28px 0;
}
.person-note p:last-child{ margin-bottom: 0; }

:focus-visible{ outline: 3px solid var(--focus); outline-offset: 3px; }

/* ================= Futuristic layer ================= */

/* Animated aurora blobs behind the hero */
.hero-fx{ position: relative; }
#wave-canvas{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .55; pointer-events: none; }
.orbs{ position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.orb{ position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; animation: orb-float 14s ease-in-out infinite alternate; }
.orb-a{ width: 420px; height: 420px; left: -120px; top: -80px; background: radial-gradient(circle, var(--ember-1), transparent 70%); }
.orb-b{ width: 380px; height: 380px; right: -100px; top: 20%; background: radial-gradient(circle, var(--deep-2), transparent 70%); animation-delay: -5s; }
.orb-c{ width: 300px; height: 300px; left: 40%; bottom: -140px; background: radial-gradient(circle, var(--ember-2), transparent 70%); opacity: .35; animation-delay: -9s; }
@keyframes orb-float{ from{ transform: translate(0,0) scale(1); } to{ transform: translate(40px,30px) scale(1.12); } }

/* Gradient headline text */
.grad-text{
  background: linear-gradient(92deg, var(--ember-1), var(--ember-2) 55%, var(--deep-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Pulsing live dot on the eyebrow */
.pulse-dot{ position: relative; padding-left: 22px; }
.pulse-dot::before{
  content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%; background: var(--ember-1); box-shadow: 0 0 0 0 rgba(255,107,74,.6);
  animation: pulse-dot 2s ease-out infinite;
}
@keyframes pulse-dot{ 0%{ box-shadow: 0 0 0 0 rgba(255,107,74,.55); } 70%{ box-shadow: 0 0 0 10px rgba(255,107,74,0); } 100%{ box-shadow: 0 0 0 0 rgba(255,107,74,0); } }

/* Animated counters */
.count{ font-variant-numeric: tabular-nums; }

/* Marquee strip */
.marquee{ overflow: hidden; margin-top: 52px; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track{ display: inline-flex; gap: 26px; white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); animation: marquee 30s linear infinite; }
.marquee-track i{ color: var(--ember-1); font-style: normal; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* Live demo caption + equalizer */
.demo-caption{ display: flex; gap: 16px; align-items: center; max-width: 640px; margin: 0 auto 26px; }
.demo-caption p{ margin: 0; font-size: .95rem; }
.demo-caption b{ color: var(--text); }
.eq{ display: flex; align-items: flex-end; gap: 4px; height: 34px; flex: 0 0 auto; }
.eq i{ width: 5px; border-radius: 3px; background: linear-gradient(180deg, var(--ember-2), var(--ember-1)); animation: eq-bounce 1.1s ease-in-out infinite; transform-origin: bottom; }
.eq i:nth-child(1){ height: 55%; animation-delay: 0s; }
.eq i:nth-child(2){ height: 85%; animation-delay: .12s; }
.eq i:nth-child(3){ height: 45%; animation-delay: .28s; }
.eq i:nth-child(4){ height: 95%; animation-delay: .4s; }
.eq i:nth-child(5){ height: 60%; animation-delay: .52s; }
.eq i:nth-child(6){ height: 78%; animation-delay: .64s; }
.eq i:nth-child(7){ height: 50%; animation-delay: .76s; }
@keyframes eq-bounce{ 0%,100%{ transform: scaleY(.35); } 50%{ transform: scaleY(1); } }

/* Live phone: looping "video" of the sync in action */
.phone-live{ position: relative; }
.phone-live::after{
  content: ""; position: absolute; inset: -2px; border-radius: 44px; padding: 2px; pointer-events: none;
  background: linear-gradient(135deg, var(--ember-1), transparent 35%, transparent 65%, var(--ember-2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: border-sheen 5s linear infinite; background-size: 220% 220%;
}
@keyframes border-sheen{ 0%{ background-position: 0% 0%; } 50%{ background-position: 100% 100%; } 100%{ background-position: 0% 0%; } }
.phone-live .phone-progress i{ animation: demo-progress 12s linear infinite; }
@keyframes demo-progress{ from{ width: 5%; } to{ width: 96%; } }
.phone-live .phone-lines .line{ position: relative; overflow: hidden; }
.phone-live .phone-lines .line::after{
  content: ""; position: absolute; inset: 0; border-radius: 6px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ember-1) 55%, transparent), transparent);
  transform: translateX(-102%); animation: line-sweep 12s linear infinite;
}
.phone-live .phone-lines .line:nth-of-type(1)::after{ animation-delay: 0s; }
.phone-live .phone-lines .line:nth-of-type(2)::after{ animation-delay: 2.2s; }
.phone-live .formula-chip{ animation: chip-pulse 12s ease-in-out infinite; }
@keyframes chip-pulse{
  0%,36%{ box-shadow: 0 0 0 4px color-mix(in srgb, var(--ember-1) 15%, transparent); }
  44%,60%{ box-shadow: 0 0 26px 4px color-mix(in srgb, var(--ember-1) 65%, transparent); border-color: var(--ember-2); }
  68%,100%{ box-shadow: 0 0 0 4px color-mix(in srgb, var(--ember-1) 15%, transparent); }
}
.phone-live .gallery-row .thumb{ animation: thumb-pulse 12s ease-in-out infinite; }
.phone-live .gallery-row .thumb:nth-child(1){ animation-delay: 0s; }
.phone-live .gallery-row .thumb:nth-child(2){ animation-delay: 3s; }
.phone-live .gallery-row .thumb:nth-child(3){ animation-delay: 6s; }
.phone-live .gallery-row .thumb:nth-child(4){ animation-delay: 9s; }
.phone-live .gallery-row .thumb.active{ animation: none; }
@keyframes thumb-pulse{
  0%,20%{ border-color: transparent; box-shadow: none; }
  4%,16%{ border-color: var(--ember-1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember-1) 25%, transparent); }
  24%,100%{ border-color: transparent; box-shadow: none; }
}

/* Scroll reveal */
.reveal{ opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity: 1; transform: none; }
.reveal-d1{ transition-delay: .08s; } .reveal-d2{ transition-delay: .16s; } .reveal-d3{ transition-delay: .24s; }

/* Card hover glow */
.card{ transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card:hover{ transform: translateY(-5px); border-color: color-mix(in srgb, var(--ember-1) 45%, var(--border)); box-shadow: 0 18px 44px -16px color-mix(in srgb, var(--ember-1) 45%, transparent); }

/* CTA aurora sheen */
.cta{ position: relative; overflow: hidden; }
.cta::before{
  content: ""; position: absolute; top: -60%; bottom: -60%; width: 45%; left: -60%; transform: rotate(12deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  animation: cta-sheen 6s ease-in-out infinite; pointer-events: none;
}
@keyframes cta-sheen{ 0%{ left: -60%; } 60%,100%{ left: 130%; } }

@media (max-width: 860px){
  .hero-fx{ min-height: auto; }
  .demo-caption{ flex-direction: column; text-align: center; }
}

/* Respect reduced motion: static, calm, fully readable */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal{ opacity: 1; transform: none; }
  #wave-canvas{ display: none; }
}

/* ============================================================
   Futuristic layer — hero canvas, orbs, live demo, marquee,
   scroll reveals, neon. Respects prefers-reduced-motion.
   ============================================================ */
.hero-fx{ position: relative; isolation: isolate; }
#wave-canvas{
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; opacity: .9; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 98%);
  mask-image: linear-gradient(to bottom, black 55%, transparent 98%);
}
.hero-fx .wrap{ position: relative; z-index: 1; }

.orbs{ position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.orb{ position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.orb-a{ width: 480px; height: 480px; left: -140px; top: -120px;
  background: radial-gradient(circle, #FF6B4A 0%, transparent 65%);
  animation: drift-a 16s ease-in-out infinite alternate; }
.orb-b{ width: 560px; height: 560px; right: -180px; top: 6%;
  background: radial-gradient(circle, #6A5CFF 0%, transparent 65%);
  animation: drift-b 20s ease-in-out infinite alternate; }
.orb-c{ width: 380px; height: 380px; left: 38%; bottom: -190px; opacity: .35;
  background: radial-gradient(circle, #22D3EE 0%, transparent 65%);
  animation: drift-a 24s ease-in-out infinite alternate-reverse; }
@keyframes drift-a{ from{ transform: translate(0,0) scale(1); } to{ transform: translate(70px,50px) scale(1.12); } }
@keyframes drift-b{ from{ transform: translate(0,0) scale(1.05); } to{ transform: translate(-80px,60px) scale(.94); } }

.grad-text{
  background: linear-gradient(92deg, #FFB238 5%, #FF6B4A 45%, #C084FC 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-theme="light"] .grad-text{
  background: linear-gradient(92deg, #B3541E 5%, #C4432B 45%, #6D4AC8 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.pulse-dot{
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: #4ADE80; box-shadow: 0 0 0 0 rgba(74,222,128,.7);
  animation: pulse-dot 2s ease-out infinite;
}
@keyframes pulse-dot{
  0%{ box-shadow: 0 0 0 0 rgba(74,222,128,.65); }
  70%{ box-shadow: 0 0 0 9px rgba(74,222,128,0); }
  100%{ box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

.eq{ display: flex; align-items: flex-end; gap: 5px; height: 34px; }
.eq i{
  width: 5px; border-radius: 3px; height: 40%;
  background: linear-gradient(to top, var(--ember-1), var(--ember-2));
  animation: eq-bounce 1.1s ease-in-out infinite;
}
.eq i:nth-child(2){ animation-delay: .15s; } .eq i:nth-child(3){ animation-delay: .32s; }
.eq i:nth-child(4){ animation-delay: .08s; } .eq i:nth-child(5){ animation-delay: .45s; }
.eq i:nth-child(6){ animation-delay: .22s; } .eq i:nth-child(7){ animation-delay: .55s; }
@keyframes eq-bounce{ 0%,100%{ height: 22%; } 50%{ height: 100%; } }

.demo-caption{
  display: flex; gap: 16px; align-items: center; max-width: 560px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 16px 20px; margin-bottom: 26px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.demo-caption p{ margin: 0; font-size: .95rem; }
.demo-caption b{ color: var(--text); }

.phone-live{ animation: float-phone 7s ease-in-out infinite;
  box-shadow: var(--shadow-soft), 0 0 70px -18px rgba(255,107,74,.5); }
@keyframes float-phone{ 0%,100%{ transform: translateY(0) rotate(-.4deg); } 50%{ transform: translateY(-14px) rotate(.4deg); } }
.phone-live .phone-progress i{ animation: demo-progress 12s linear infinite; }
@keyframes demo-progress{ from{ width: 4%; } to{ width: 97%; } }
.phone-live .gallery-row .thumb{ animation: thumb-cycle 12s linear infinite; }
.phone-live .gallery-row .thumb:nth-child(2){ animation-delay: 3s; }
.phone-live .gallery-row .thumb:nth-child(3){ animation-delay: 6s; }
.phone-live .gallery-row .thumb:nth-child(4){ animation-delay: 9s; }
@keyframes thumb-cycle{
  0%, 22%{ border-color: var(--ember-1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember-1) 30%, transparent); }
  25%, 100%{ border-color: transparent; box-shadow: none; }
}
.phone-live .phone-lines .line,
.phone-live .phone-lines .formula-chip{ animation: line-sweep 12s linear infinite; }
.phone-live .phone-lines .line:nth-child(2){ animation-delay: 1.5s; }
.phone-live .phone-lines .formula-chip{ animation-delay: 3s; animation-name: chip-sweep; }
.phone-live .phone-lines .line:nth-child(4){ animation-delay: 6s; }
.phone-live .phone-lines .line:nth-child(5){ animation-delay: 7.5s; }
@keyframes line-sweep{
  0%, 8%{ background: color-mix(in srgb, var(--ember-2) 45%, var(--bg-alt)); box-shadow: 0 0 18px -2px rgba(255,178,56,.55); }
  16%, 100%{ box-shadow: none; }
}
@keyframes chip-sweep{
  0%, 10%{ box-shadow: 0 0 26px -2px rgba(255,107,74,.8); border-color: var(--ember-2); }
  22%, 100%{ box-shadow: 0 0 0 4px color-mix(in srgb, var(--ember-1) 15%, transparent); }
}
.phone-live .transport-play{ animation: play-glow 3s ease-in-out infinite; }
@keyframes play-glow{
  0%,100%{ box-shadow: 0 0 0 0 rgba(255,107,74,.5); }
  50%{ box-shadow: 0 0 0 12px rgba(255,107,74,0); }
}

.marquee{
  overflow: hidden; margin-top: 54px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee-track{
  display: inline-flex; align-items: center; gap: 26px; white-space: nowrap;
  padding: 16px 0; font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  animation: marquee 30s linear infinite;
}
.marquee-track i{ color: var(--ember-1); font-style: normal; font-size: .8rem; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

.reveal{ opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity: 1; transform: none; }
.count{ font-variant-numeric: tabular-nums; }

.btn-glow{ box-shadow: 0 0 26px -6px rgba(255,107,74,.75), 0 12px 30px -10px rgba(255,107,74,.55); }
.btn-glow:hover{ box-shadow: 0 0 36px -4px rgba(255,107,74,.9), 0 16px 34px -10px rgba(255,107,74,.6); }
.card{ transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card:hover{
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--ember-1) 55%, var(--border));
  box-shadow: var(--shadow-card), 0 0 34px -8px rgba(255,107,74,.45);
}
.pipe-step{ transition: border-color .25s ease, box-shadow .25s ease; }
.pipe-step:hover{
  border-color: color-mix(in srgb, var(--ember-1) 55%, var(--border));
  box-shadow: 0 0 28px -8px rgba(255,107,74,.5);
}
.pipe-arrow{ animation: arrow-nudge 2.2s ease-in-out infinite; }
@keyframes arrow-nudge{ 0%,100%{ transform: translateX(0); opacity: .7; } 50%{ transform: translateX(5px); opacity: 1; } }
@media (max-width: 900px){
  @keyframes arrow-nudge{ 0%,100%{ transform: rotate(90deg) translateX(0); } 50%{ transform: rotate(90deg) translateX(5px); } }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .reveal{ opacity: 1; transform: none; }
  #wave-canvas{ display: none; }
  html{ scroll-behavior: auto; }
}

/* ============================================================
   Futuristic layer — animated hero canvas, orbs, live phone
   demo, marquee, scroll reveals, count-ups. All motion is
   gated behind prefers-reduced-motion at the bottom.
   ============================================================ */

/* ---------- Hero FX ---------- */
.hero-fx{ position: relative; isolation: isolate; }
#wave-canvas{
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; opacity: .9; pointer-events: none;
  mask-image: linear-gradient(to bottom, black 55%, transparent 98%);
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 98%);
}
.hero-fx .wrap{ position: relative; z-index: 1; }

.orbs{ position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.orb{ position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.orb-a{ width: 480px; height: 480px; left: -140px; top: -120px;
  background: radial-gradient(circle, #FF6B4A 0%, transparent 65%);
  animation: drift-a 16s ease-in-out infinite alternate; }
.orb-b{ width: 560px; height: 560px; right: -180px; top: 6%;
  background: radial-gradient(circle, #6A5CFF 0%, transparent 65%);
  animation: drift-b 20s ease-in-out infinite alternate; }
.orb-c{ width: 380px; height: 380px; left: 38%; bottom: -190px;
  background: radial-gradient(circle, #22D3EE 0%, transparent 65%); opacity: .35;
  animation: drift-a 24s ease-in-out infinite alternate-reverse; }
@keyframes drift-a{ from{ transform: translate(0,0) scale(1); } to{ transform: translate(70px,50px) scale(1.12); } }
@keyframes drift-b{ from{ transform: translate(0,0) scale(1.05); } to{ transform: translate(-80px,60px) scale(.94); } }

.grad-text{
  background: linear-gradient(92deg, #FFB238 5%, #FF6B4A 45%, #C084FC 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-theme="light"] .grad-text{
  background: linear-gradient(92deg, #B3541E 5%, #C4432B 45%, #6D4AC8 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.pulse-dot{
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: #4ADE80; box-shadow: 0 0 0 0 rgba(74,222,128,.7);
  animation: pulse-dot 2s ease-out infinite;
}
@keyframes pulse-dot{
  0%{ box-shadow: 0 0 0 0 rgba(74,222,128,.65); }
  70%{ box-shadow: 0 0 0 9px rgba(74,222,128,0); }
  100%{ box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

/* ---------- Equalizer bars ---------- */
.eq{ display: flex; align-items: flex-end; gap: 5px; height: 34px; }
.eq i{
  width: 5px; border-radius: 3px;
  background: linear-gradient(to top, var(--ember-1), var(--ember-2));
  animation: eq-bounce 1.1s ease-in-out infinite;
  height: 40%;
}
.eq i:nth-child(2){ animation-delay: .15s; } .eq i:nth-child(3){ animation-delay: .32s; }
.eq i:nth-child(4){ animation-delay: .08s; } .eq i:nth-child(5){ animation-delay: .45s; }
.eq i:nth-child(6){ animation-delay: .22s; } .eq i:nth-child(7){ animation-delay: .55s; }
@keyframes eq-bounce{ 0%,100%{ height: 22%; } 50%{ height: 100%; } }

/* ---------- Live demo phone ---------- */
.demo-caption{
  display: flex; gap: 16px; align-items: center; max-width: 560px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 16px 20px; margin-bottom: 26px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.demo-caption p{ margin: 0; font-size: .95rem; }
.demo-caption b{ color: var(--text); }

.phone-live{
  animation: float-phone 7s ease-in-out infinite;
  box-shadow: var(--shadow-soft), 0 0 70px -18px rgba(255,107,74,.5);
}
@keyframes float-phone{ 0%,100%{ transform: translateY(0) rotate(-.4deg); } 50%{ transform: translateY(-14px) rotate(.4deg); } }
.phone-live .phone-progress i{ animation: demo-progress 12s linear infinite; }
@keyframes demo-progress{ from{ width: 4%; } to{ width: 97%; } }
.phone-live .gallery-row .thumb{ animation: thumb-cycle 12s linear infinite; }
.phone-live .gallery-row .thumb:nth-child(2){ animation-delay: 3s; }
.phone-live .gallery-row .thumb:nth-child(3){ animation-delay: 6s; }
.phone-live .gallery-row .thumb:nth-child(4){ animation-delay: 9s; }
@keyframes thumb-cycle{
  0%, 22%{ border-color: var(--ember-1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember-1) 30%, transparent); }
  25%, 100%{ border-color: transparent; box-shadow: none; }
}
.phone-live .phone-lines .line,
.phone-live .phone-lines .formula-chip{ animation: line-sweep 12s linear infinite; }
.phone-live .phone-lines .line:nth-child(2){ animation-delay: 1.5s; }
.phone-live .phone-lines .formula-chip{ animation-delay: 3s; }
.phone-live .phone-lines .line:nth-child(4){ animation-delay: 6s; }
.phone-live .phone-lines .line:nth-child(5){ animation-delay: 7.5s; }
@keyframes line-sweep{
  0%, 8%{ background: color-mix(in srgb, var(--ember-2) 45%, var(--bg-alt)); box-shadow: 0 0 18px -2px rgba(255,178,56,.55); }
  16%, 100%{ box-shadow: none; }
}
.phone-live .formula-chip{ animation-name: chip-sweep; }
@keyframes chip-sweep{
  0%, 10%{ box-shadow: 0 0 26px -2px rgba(255,107,74,.8); border-color: var(--ember-2); }
  22%, 100%{ box-shadow: 0 0 0 4px color-mix(in srgb, var(--ember-1) 15%, transparent); }
}
.phone-live .transport-play{ animation: play-glow 3s ease-in-out infinite; }
@keyframes play-glow{
  0%,100%{ box-shadow: 0 0 0 0 rgba(255,107,74,.5); }
  50%{ box-shadow: 0 0 0 12px rgba(255,107,74,0); }
}

/* ---------- Marquee ---------- */
.marquee{
  overflow: hidden; margin-top: 54px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee-track{
  display: inline-flex; align-items: center; gap: 26px; white-space: nowrap;
  padding: 16px 0; font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  animation: marquee 30s linear infinite;
}
.marquee-track i{ color: var(--ember-1); font-style: normal; font-size: .8rem; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------- Scroll reveal + counters ---------- */
.reveal{ opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity: 1; transform: none; }
.count{ font-variant-numeric: tabular-nums; }

/* ---------- Neon buttons & cards ---------- */
.btn-glow{ box-shadow: 0 0 26px -6px rgba(255,107,74,.75), 0 12px 30px -10px rgba(255,107,74,.55); }
.btn-glow:hover{ box-shadow: 0 0 36px -4px rgba(255,107,74,.9), 0 16px 34px -10px rgba(255,107,74,.6); }
.card-glow{ transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-glow:hover{
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--ember-1) 55%, var(--border));
  box-shadow: var(--shadow-card), 0 0 34px -8px rgba(255,107,74,.45);
}
.pipe-step{ transition: border-color .25s ease, box-shadow .25s ease; }
.pipe-step:hover{
  border-color: color-mix(in srgb, var(--ember-1) 55%, var(--border));
  box-shadow: 0 0 28px -8px rgba(255,107,74,.5);
}
.pipe-arrow{ animation: arrow-nudge 2.2s ease-in-out infinite; }
@keyframes arrow-nudge{ 0%,100%{ transform: translateX(0); opacity: .7; } 50%{ transform: translateX(5px); opacity: 1; } }
@media (max-width: 900px){
  @keyframes arrow-nudge{ 0%,100%{ transform: rotate(90deg) translateX(0); } 50%{ transform: rotate(90deg) translateX(5px); } }
}

/* ---------- Books ---------- */
.book-stats{ display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; }
.book-stats span{ font-size: .92rem; color: var(--text-muted); }
.book-stats b{ font-family: var(--font-display); color: var(--ember-1); margin-right: 6px; }

/* ---------- Reduced motion: static, honest, calm ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .reveal{ opacity: 1; transform: none; }
  #wave-canvas{ display: none; }
  html{ scroll-behavior: auto; }
}

/* ---------- Futuristic layer (index hero, live demo, motion) ---------- */
.hero-fx{ min-height: 92vh; display: flex; align-items: center; }
#wave-canvas{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .9; }
.orbs{ position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.orb{ position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; animation: orb-drift 18s ease-in-out infinite alternate; }
.orb-a{ width: 420px; height: 420px; left: -120px; top: -80px; background: radial-gradient(circle, #FF6B4A, transparent 70%); }
.orb-b{ width: 520px; height: 520px; right: -160px; top: 10%; background: radial-gradient(circle, #7C5CFF, transparent 70%); animation-delay: -6s; }
.orb-c{ width: 380px; height: 380px; left: 38%; bottom: -180px; background: radial-gradient(circle, #FFB238, transparent 70%); animation-delay: -12s; opacity: .35; }
@keyframes orb-drift{
  from{ transform: translate(0,0) scale(1); }
  to{ transform: translate(60px,40px) scale(1.15); }
}

.grad-text{
  background: linear-gradient(92deg, var(--ember-1), var(--ember-2) 45%, #B48CFF 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pulse-dot{ position: relative; padding-left: 26px; }
.pulse-dot::before{
  content: ""; position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: var(--ember-1);
  box-shadow: 0 0 0 0 rgba(255,107,74,.6); animation: pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring{
  0%{ box-shadow: 0 0 0 0 rgba(255,107,74,.55); }
  70%{ box-shadow: 0 0 0 12px rgba(255,107,74,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,107,74,0); }
}

/* Counters */
.count{ font-variant-numeric: tabular-nums; }

/* Marquee */
.marquee{ overflow: hidden; margin-top: 48px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 14px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track{ display: flex; gap: 28px; width: max-content; animation: marquee 28s linear infinite; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.marquee-track i{ color: var(--ember-1); font-style: normal; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* Live demo */
.demo-caption{ display: flex; gap: 16px; align-items: center; max-width: 560px; margin: 0 auto 28px; text-align: left; }
.demo-caption p{ margin: 0; font-size: 0.98rem; }
.demo-caption p b{ color: var(--text); }
.eq{ display: flex; align-items: flex-end; gap: 4px; height: 36px; flex: 0 0 auto; }
.eq i{ width: 5px; border-radius: 3px; background: linear-gradient(180deg, var(--ember-2), var(--ember-1)); animation: eq-bounce 1.1s ease-in-out infinite; }
.eq i:nth-child(1){ height: 40%; animation-delay: 0s; }
.eq i:nth-child(2){ height: 75%; animation-delay: .12s; }
.eq i:nth-child(3){ height: 55%; animation-delay: .24s; }
.eq i:nth-child(4){ height: 95%; animation-delay: .36s; }
.eq i:nth-child(5){ height: 60%; animation-delay: .48s; }
.eq i:nth-child(6){ height: 85%; animation-delay: .6s; }
.eq i:nth-child(7){ height: 45%; animation-delay: .72s; }
@keyframes eq-bounce{ 0%,100%{ transform: scaleY(.35); } 50%{ transform: scaleY(1); } }

.phone-live{ position: relative; }
.phone-live::after{
  content: ""; position: absolute; inset: -2px; border-radius: 44px; padding: 2px; z-index: -1;
  background: linear-gradient(140deg, var(--ember-1), transparent 30%, transparent 70%, #7C5CFF);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: border-flow 5s linear infinite; background-size: 220% 220%;
}
@keyframes border-flow{ 0%{ background-position: 0% 0%; } 50%{ background-position: 100% 100%; } 100%{ background-position: 0% 0%; } }
.phone-live .phone-progress i{ animation: demo-progress 12s linear infinite; }
@keyframes demo-progress{ from{ width: 4%; } to{ width: 100%; } }
.phone-live .phone-lines .line{ position: relative; overflow: hidden; }
.phone-live .phone-lines .line::after{
  content: ""; position: absolute; inset: 0; border-radius: 6px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ember-1) 55%, transparent), transparent);
  transform: translateX(-101%); animation: line-sweep 12s linear infinite;
}
.phone-live .phone-lines .line:nth-child(1)::after{ animation-delay: 0s; }
.phone-live .phone-lines .line:nth-child(2)::after{ animation-delay: 2.4s; }
.phone-live .phone-lines .line:nth-child(4)::after{ animation-delay: 7.2s; }
.phone-live .phone-lines .line:nth-child(5)::after{ animation-delay: 9.6s; }
@keyframes line-sweep{ 0%{ transform: translateX(-101%); } 12%{ transform: translateX(0); } 20%{ transform: translateX(0); opacity: 1; } 24%,100%{ transform: translateX(101%); opacity: 0; } }
.phone-live .formula-chip{ animation: chip-glow 12s ease-in-out infinite; }
@keyframes chip-glow{
  0%,38%{ box-shadow: 0 0 0 4px color-mix(in srgb, var(--ember-1) 15%, transparent); }
  44%,58%{ box-shadow: 0 0 24px 6px color-mix(in srgb, var(--ember-1) 55%, transparent); border-color: var(--ember-2); }
  64%,100%{ box-shadow: 0 0 0 4px color-mix(in srgb, var(--ember-1) 15%, transparent); }
}
.phone-live .gallery-row .thumb{ animation: thumb-pulse 12s ease-in-out infinite; }
.phone-live .gallery-row .thumb:nth-child(2){ animation-delay: 3s; }
.phone-live .gallery-row .thumb:nth-child(3){ animation-delay: 6s; }
.phone-live .gallery-row .thumb:nth-child(4){ animation-delay: 9s; }
@keyframes thumb-pulse{
  0%,22%{ border-color: transparent; box-shadow: none; }
  4%,18%{ border-color: var(--ember-1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember-1) 25%, transparent); }
  26%,100%{ border-color: transparent; box-shadow: none; }
}
.phone-live .transport-play{ position: relative; }
.phone-live .transport-play::before{
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ember-1) 60%, transparent);
  animation: play-ring 2.4s ease-out infinite;
}
@keyframes play-ring{ from{ transform: scale(.8); opacity: 1; } to{ transform: scale(1.35); opacity: 0; } }

/* Scroll reveal */
.reveal{ opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity: 1; transform: none; }
.reveal-d1{ transition-delay: .08s; } .reveal-d2{ transition-delay: .16s; }
.reveal-d3{ transition-delay: .24s; } .reveal-d4{ transition-delay: .32s; }
.reveal-d5{ transition-delay: .4s; }

/* Card hover glow */
.card{ transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card:hover{ transform: translateY(-5px); border-color: color-mix(in srgb, var(--ember-1) 45%, var(--border)); box-shadow: 0 18px 44px -14px color-mix(in srgb, var(--ember-1) 40%, transparent); }
.pipe-step{ transition: transform .25s ease, border-color .25s ease; }
.pipe-step:hover{ transform: translateY(-4px); border-color: color-mix(in srgb, var(--ember-1) 45%, var(--border)); }

/* CTA shimmer */
.cta{ position: relative; overflow: hidden; }
.cta::before{
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -50%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  animation: cta-shimmer 6s ease-in-out infinite;
}
@keyframes cta-shimmer{ 0%{ left: -50%; } 55%,100%{ left: 130%; } }

@media (max-width: 860px){
  .hero-fx{ min-height: auto; }
  .demo-caption{ flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .reveal{ opacity: 1; transform: none; }
  #wave-canvas{ display: none; }
}

/* ================= Documentation additions (community, voices, admin) ================= */
.note{
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--ember-2);
  border-radius: var(--radius-sm); padding: 18px 22px; margin: 22px 0; color: var(--text);
}
.note p{ margin: 0 0 .6em; font-size: 0.98rem; }
.note p:last-child{ margin-bottom: 0; }
.note strong:first-child{ font-family: var(--font-display); }
.note-warn{ border-left-color: var(--ember-1); }
.status-pill{
  display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: .02em;
  padding: 3px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-alt); color: var(--text);
  vertical-align: middle; margin-left: 6px;
}
.status-pill.preview{ border-color: var(--ember-2); }
.status-pill.untested{ border-color: var(--ember-1); }
.doc-table{ width: 100%; border-collapse: collapse; margin: 14px 0 22px; font-size: .95rem; }
.doc-table th, .doc-table td{ text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.doc-table th{ font-family: var(--font-display); font-size: .85rem; color: var(--text); }
.doc-table td{ color: var(--text-muted); }
.doc-table code{ white-space: normal; overflow-wrap: anywhere; }
.table-scroll{ overflow-x: auto; }
.prose{ overflow-wrap: break-word; }
.page-header h1.wide{ max-width: 26ch; }
.phases{ display: grid; gap: 0; margin: 26px 0; }
.phase{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 20px 24px; position: relative;
}
.phase h3{ font-size: 1.05rem; margin: 0 0 6px; }
.phase p{ margin: 0; font-size: .95rem; }
.phase .chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip{
  font-family: var(--font-display); font-size: .78rem; font-weight: 600; padding: 4px 12px; border-radius: 999px;
  background: var(--bg-alt); border: 1px solid var(--border); color: var(--text);
}
.chip.gpu{ border-color: var(--ember-1); }
.chip.cpu{ border-color: var(--deep-2); }
.phase-link{ display: flex; justify-content: center; height: 30px; align-items: center; color: var(--text-muted); }
.phase-link svg{ width: 22px; height: 22px; }
.pipeline.five .pipe-step{ min-width: 170px; }
.toc{ display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.toc a{ display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); text-decoration: none; font-weight: 600; font-size: .9rem; color: var(--text); }
.toc a:hover{ border-color: var(--ember-1); }
@media (max-width: 760px){ .footer-links{ flex-wrap: wrap; gap: 14px 22px; } }

/* Layout safety: decorative layers and wide grid children must never create a horizontal scrollbar */
html, body{ overflow-x: clip; }
.grid > *{ min-width: 0; }