/* ============================================================================
   SITEBLOOM — enhance.css
   The "full shazam" layer: living backgrounds, depth, motion & micro-interaction.
   Loaded AFTER styles.css. Purely additive. Everything respects reduced-motion.
   Animates transform/opacity/filter only.
   ----------------------------------------------------------------------------
   1.  Theme tokens (light + dark "night bloom")  — see styles.css for base
   2.  Scroll progress + back-to-top + cursor glow + grain
   3.  Aurora / living gradient backgrounds + floating petals
   4.  Animated gradient headline + blooming logo
   5.  Section dividers
   6.  Depth: 3D tilt, magnetic, spotlight, hover sheens
   7.  Scrollspy nav + theme toggle
   8.  Stat band  +  marquee
   9.  Examples filter (FLIP)
   10. Enhanced reveals
   11. Founder card + step illustrations
   12. Form delight + success bloom (thank-you)
   13. Reduced motion
   ========================================================================== */

/* ── 2. Scroll progress / back-to-top / cursor glow / grain ───────────────── */
.scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  height: 3px;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--emerald), var(--teal) 45%, var(--coral));
  z-index: 200;
  pointer-events: none;
}

.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 460px; height: 460px;
  border-radius: 50%;
  margin: -230px 0 0 -230px;
  background: radial-gradient(circle, rgba(16,185,129,.09), rgba(14,165,164,.04) 40%, transparent 70%);
  transform: translate3d(var(--cx, -999px), var(--cy, -999px), 0);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .4s ease;
  mix-blend-mode: plus-lighter;
}
body.has-cursor .cursor-glow { opacity: .6; }

.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 70;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface, #fff);
  color: var(--emerald-dark);
  border: 1px solid var(--border);
  box-shadow: var(--sh-card);
  opacity: 0; transform: translateY(16px) scale(.9);
  transition: opacity .35s var(--ease), transform .35s var(--ease), background-color .3s, color .3s;
}
.to-top.is-shown { opacity: 1; transform: none; }
.to-top:hover { transform: translateY(-3px); color: var(--coral); }
.to-top svg { width: 22px; height: 22px; }
@media (max-width: 899px) { .to-top { bottom: calc(76px + env(safe-area-inset-bottom)); } }

/* very subtle premium grain over the whole page */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 150;
  opacity: .03;
  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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 3. Aurora living backgrounds + floating petals ───────────────────────── */
.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.aurora__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
  will-change: transform;
  mix-blend-mode: var(--aurora-blend, normal);
}
.aurora__blob--1 { width: 46vw; height: 46vw; left: -8vw; top: -10vw;  background: radial-gradient(circle, #34d3a6, transparent 70%); animation: drift1 22s ease-in-out infinite; }
.aurora__blob--2 { width: 40vw; height: 40vw; right: -6vw; top: 4vw;   background: radial-gradient(circle, #2dd4bf, transparent 70%); animation: drift2 26s ease-in-out infinite; }
.aurora__blob--3 { width: 34vw; height: 34vw; left: 28vw; bottom: -14vw; background: radial-gradient(circle, #ff8a6a, transparent 70%); opacity: .4; animation: drift3 30s ease-in-out infinite; }
@keyframes drift1 { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(6vw,4vw,0) scale(1.12)} }
@keyframes drift2 { 0%,100%{transform:translate3d(0,0,0) scale(1.05)} 50%{transform:translate3d(-5vw,6vw,0) scale(.95)} }
@keyframes drift3 { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(4vw,-5vw,0) scale(1.15)} }

/* hero gets a richer animated mesh + keeps the section above the aurora */
.hero { isolation: isolate; }
.hero > .container { position: relative; z-index: 2; }
.hero .aurora { z-index: 0; }

/* floating petal/leaf decorations (CSS-only, parallax via --px/--py from JS) */
.petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.petal {
  position: absolute;
  width: var(--s, 26px); height: var(--s, 26px);
  background: var(--g, linear-gradient(135deg, var(--emerald), var(--teal)));
  border-radius: 0 100% 0 100%;
  opacity: .5;
  transform: translate3d(calc(var(--px,0px) * var(--d,1)), calc(var(--py,0px) * var(--d,1)), 0) rotate(var(--r,0deg));
  animation: petalfloat var(--t, 9s) ease-in-out infinite;
  will-change: transform;
}
.petal--coral { --g: linear-gradient(135deg, #ff8a6a, var(--coral)); }
@keyframes petalfloat {
  0%,100% { translate: 0 0; }
  50%     { translate: 0 -22px; }
}

/* ── 4. Animated gradient headline + blooming logo ────────────────────────── */
.text-grad { color: var(--accent-text); }

.brand__mark { transform-origin: 50% 60%; animation: bloomin .9s var(--ease) both; }
@keyframes bloomin {
  0%   { transform: scale(.2) rotate(-40deg); opacity: 0; }
  60%  { transform: scale(1.12) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.brand:hover .brand__mark { animation: spinbloom 1.1s var(--ease); }
@keyframes spinbloom { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* ── 5. Section dividers (soft organic curve) ─────────────────────────────── */
.section--wave { position: relative; }
.section--wave::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px; height: 56px;
  background: inherit;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath d='M0,56 C360,0 1080,0 1440,56 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath d='M0,56 C360,0 1080,0 1440,56 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  transform: translateY(-100%);
  pointer-events: none;
}

/* ── 6. Depth: tilt, magnetic, spotlight, sheen ───────────────────────────── */
[data-tilt] {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0));
  transform-style: preserve-3d;
  transition: transform .18s ease-out;
}
[data-tilt].is-tilting { transition: transform .05s linear; }

.btn { position: relative; }
.magnetic { transform: translate3d(var(--mx, 0), var(--my, 0), 0); }
/* button sheen sweep on hover */
.btn--primary::after, .btn--secondary::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  background-size: 220% 100%; background-position: 180% 0;
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
.btn--primary:hover::after, .btn--secondary:hover::after { opacity: 1; animation: sheen .9s ease; }
@keyframes sheen { from { background-position: 180% 0 } to { background-position: -60% 0 } }

/* spotlight that follows the pointer on cards */
.spotlight { position: relative; overflow: hidden; }
.spotlight::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 0%), rgba(16,185,129,.14), transparent 60%);
  opacity: 0; transition: opacity .35s var(--ease);
  pointer-events: none;
}
.spotlight:hover::before { opacity: 1; }
/* gradient ring on hover for feature/why/price cards */
.glow-card { position: relative; }
.glow-card::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, var(--emerald), var(--teal), var(--coral));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s var(--ease);
  pointer-events: none;
}
.glow-card:hover::after { opacity: .9; }

/* mockups: parallax zoom + shine */
.mockup { transform-style: preserve-3d; }
.mockup::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%);
  transform: translateX(-100%); transition: transform .7s var(--ease);
  pointer-events: none;
}
.mockup:hover::after { transform: translateX(100%); }

/* ── 7. Scrollspy nav + theme toggle ──────────────────────────────────────── */
.header__nav a.is-active { color: var(--ink); }
.header__nav a.is-active::after { transform: scaleX(1); }

.theme-toggle {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .55);
  transition: transform .4s var(--ease), color .3s, background-color .3s, border-color .3s;
  position: relative;
}
.theme-toggle:hover { transform: rotate(18deg); color: var(--coral); }
.theme-toggle svg { width: 20px; height: 20px; position: absolute; transition: opacity .3s var(--ease), transform .5s var(--ease); }
.theme-toggle .icon-sun  { opacity: 0; transform: rotate(-90deg) scale(.4); }
.theme-toggle .icon-moon { opacity: 1; transform: none; }
[data-theme="dark"] .theme-toggle .icon-sun  { opacity: 1; transform: none; }
[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(.4); }

/* ── 8. Stat band + marquee ───────────────────────────────────────────────── */
.statband {
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(16,185,129,.08), transparent 70%),
    var(--surface-mint, var(--mint));
}
.stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}
.stat { position: relative; }
.stat__fig {
  display: inline-flex; align-items: baseline; gap: 2px;
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; line-height: 1;
  font-size: clamp(2.5rem, 7vw, 4rem);
  color: var(--accent-text);
}
.stat__label { display: block; margin-top: var(--s-2); color: var(--text-soft, var(--slate)); font-weight: 500; font-size: .95rem; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
/* Seamless loop: every item carries its own trailing space (margin, not flex `gap`)
   so the duplicated halves line up exactly on reset — flex `gap` omits the trailing
   gap after the last item, which leaves a sub-pixel jump. The list is rendered 4×
   (two identical halves) so one half always out-widths even ultrawide screens. */
.marquee__track { display: inline-flex; padding-block: 4px; white-space: nowrap; animation: marq 56s linear infinite; will-change: transform; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; gap: 10px; margin-inline-end: 3rem; font-weight: 600; color: var(--text-soft, var(--slate)); }
.marquee__item svg { width: 18px; height: 18px; color: var(--emerald); }
@keyframes marq { to { transform: translateX(-50%); } }

/* ── 9. Examples filter (FLIP) ────────────────────────────────────────────── */
.filter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.filter__btn {
  padding: 9px 18px; border-radius: var(--r-pill);
  font-weight: 600; font-size: .9rem;
  color: var(--text-soft, var(--slate));
  background: var(--surface, #fff); border: 1px solid var(--border);
  transition: color .25s, background-color .25s, border-color .25s, transform .2s var(--ease);
}
.filter__btn:hover { transform: translateY(-2px); color: var(--ink); }
.filter__btn.is-active { color: #fff; background: var(--cta, var(--coral)); border-color: transparent; box-shadow: var(--sh-cta); }
.mockup.is-hidden { display: none; }
.mockup { transition: transform .5s var(--ease), opacity .4s var(--ease), box-shadow .35s var(--ease); }
.mockup.is-filtering { opacity: 0; transform: scale(.92); }

/* ── 10. Enhanced reveals ─────────────────────────────────────────────────── */
.js .reveal-zoom { opacity: 0; transform: scale(.94); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-zoom.in-view { opacity: 1; transform: none; }
.js .reveal-left { opacity: 0; transform: translateX(-28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal-right { opacity: 0; transform: translateX(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-left.in-view, .reveal-right.in-view { opacity: 1; transform: none; }

/* ── 11. Founder card + step illustrations ────────────────────────────────── */
.founder {
  display: flex; align-items: center; gap: 14px;
  margin-top: var(--s-6);
  padding: 14px 16px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--sh-sm);
}
.founder img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--mint); flex-shrink: 0; }
.founder p { font-size: .9rem; color: var(--slate); margin: 0; }
.founder strong { color: var(--ink); font-family: "Plus Jakarta Sans", sans-serif; }

.step__art { width: clamp(96px, 14vw, 128px); height: auto; margin-bottom: var(--s-4); filter: drop-shadow(0 12px 22px rgba(16,185,129,.18)); }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

.why-art { width: 100%; max-width: 460px; margin-inline: auto; filter: drop-shadow(0 24px 40px rgba(16,185,129,.18)); }

/* ── 12. Form delight + success bloom ─────────────────────────────────────── */
.field { position: relative; }
.field--valid input, .field--valid textarea { border-color: var(--emerald) !important; }
.field__check {
  position: absolute; right: 12px; top: 38px;
  width: 20px; height: 20px; color: var(--emerald);
  opacity: 0; transform: scale(.5); transition: opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events: none;
}
.field--valid .field__check { opacity: 1; transform: scale(1); }

/* confetti petals (thank-you + form success) */
.confetti { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 190; }
.confetti i {
  position: absolute; top: -8vh; width: 14px; height: 14px;
  background: var(--c, var(--emerald));
  border-radius: 0 100% 0 100%;
  opacity: .9;
  animation: fall var(--ft, 3.2s) linear var(--fd, 0s) forwards;
}
@keyframes fall {
  0%   { transform: translateY(-10vh) rotate(0); opacity: 0; }
  10%  { opacity: .95; }
  100% { transform: translateY(112vh) rotate(720deg); opacity: 0; }
}

/* ── 14b. Extra motion: waves, marquee, rings, parallax, pulse ────────────── */

/* Animated wave divider (two layered moving SVG waves) */
.wavesep { position: relative; height: clamp(48px, 7vw, 80px); line-height: 0; overflow: hidden; pointer-events: none; }
.wavesep svg { position: absolute; bottom: -1px; left: 0; width: 200%; max-width: none; height: 100%; }
.wavesep .w-a { animation: wavex 16s linear infinite; }
.wavesep .w-b { animation: wavex 26s linear infinite reverse; opacity: .5; }
.wavesep path { fill: var(--ink); }
@keyframes wavex { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Industries marquee band */
.industries {
  padding-block: clamp(1.1rem, 3vw, 1.75rem);
  border-block: 1px solid var(--border);
  background: var(--mint);
  overflow: hidden;
}
.industries .marquee__item { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--text-soft, var(--slate)); }
.industries .marquee__item::before { content: ""; width: 7px; height: 7px; background: var(--coral); border-radius: 2px; transform: rotate(45deg); display: inline-block; }

/* Back-to-top: circular scroll-progress ring */
.to-top { overflow: visible; }
.to-top .ring { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); transform: rotate(-90deg); pointer-events: none; }
.to-top .ring circle { fill: none; stroke: var(--emerald); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: var(--circ, 163); stroke-dashoffset: calc(var(--circ, 163) * (1 - var(--p, 0))); transition: stroke-dashoffset .12s linear; }

/* Pulsing glow on the pricing card */
.pulse-glow { animation: pulseGlow 4s ease-in-out infinite; }
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 16px 40px -12px rgba(16,185,129,.20); }
  50%      { box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 26px 64px -10px rgba(16,185,129,.42); }
}

/* Animated SVG bloom flourish under section headings */
.flourish { display: block; width: 116px; height: 14px; margin: 16px auto 0; overflow: visible; }
.flourish path { fill: none; stroke: var(--coral); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 200; }
.flourish .leaf { stroke: var(--emerald); }
.in-view .flourish path { animation: draw 1.1s var(--ease) .15s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Hero illustration: parallax handle (JS sets --hx/--hy/--hs) */
.hero__visual picture { display: block; transform: translate3d(var(--hx,0), var(--hy,0), 0); transition: transform .25s ease-out; }

.wavesep { background: var(--cloud); }
/* The promise grid is 4 cards — keep it a balanced 2×2 (not 3+1). */
@media (min-width: 640px) { .promises { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-inline: auto; } }
/* Gentle idle float on step illustrations */
.step__art { animation: bob 4s ease-in-out infinite; animation-delay: calc(var(--si, 0) * .5s); }

/* ── 14. Dark "night bloom" theme ─────────────────────────────────────────── */
[data-theme="dark"] {
  --slate: #9fb0c5;            /* muted text → lighter (text-only token, safe) */
  --border: #232e40;
  --mint: #0e1a17;
  --cloud: #0b1018;
  --accent-text: #34d399;     /* brighter emerald for headline accents on dark */
  color-scheme: dark;
}
[data-theme="dark"] body { background: #070a11; color: #e7eef7; }

/* ink-coloured text → light */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] .brand__name, [data-theme="dark"] .price-card__num,
[data-theme="dark"] .faq__q, [data-theme="dark"] .trust li, [data-theme="dark"] .feature h3 { color: #f3f7fc; }
[data-theme="dark"] .header__nav a.is-active { color: #f3f7fc; }

/* surfaces that used --white */
[data-theme="dark"] .feature, [data-theme="dark"] .price-card, [data-theme="dark"] .testimonial,
[data-theme="dark"] .form-card, [data-theme="dark"] .why-card, [data-theme="dark"] .mockup,
[data-theme="dark"] .filter__btn, [data-theme="dark"] .btn--secondary,
[data-theme="dark"] .founder, [data-theme="dark"] .to-top { background: #0f1726; border-color: #232e40; }
[data-theme="dark"] .feature__icon,
[data-theme="dark"] .testimonial__avatar { background: #12241f; color: #5eead4; }
[data-theme="dark"] .btn--secondary { color: #5eead4; }
[data-theme="dark"] .link-underline { color: #5eead4; }

/* inputs / segmented */
[data-theme="dark"] .field input, [data-theme="dark"] .field select, [data-theme="dark"] .field textarea,
[data-theme="dark"] .segmented { background: #0b1018; color: #e7eef7; border-color: #232e40; }
[data-theme="dark"] .field input::placeholder, [data-theme="dark"] .field textarea::placeholder { color: #7a8aa0; }
[data-theme="dark"] .toggle__label.is-active { color: #f3f7fc; }
[data-theme="dark"] .wavesep { background: #090e17; }
[data-theme="dark"] .segmented input:checked + label { background: #18222f; color: #5eead4; }
[data-theme="dark"] .field .error-msg { color: #fca5a5; }
[data-theme="dark"] .legal-bar { background: #0f1726; border-color: #232e40; }
[data-theme="dark"] .legal-bar__back:hover, [data-theme="dark"] .legal a:not(.link-underline) { color: #5eead4; }
[data-theme="dark"] .fgroup__head { color: #f3f7fc; }
[data-theme="dark"] .fgroup + .fgroup { border-color: #232e40; }
[data-theme="dark"] .form-alert { background: #2a1416; border-color: #5b2326; color: #fca5a5; }

/* header / nav / menu */
[data-theme="dark"] .header.is-scrolled { background: rgba(8, 11, 18, .82); box-shadow: 0 1px 0 #1b2433, 0 10px 30px -16px rgba(0,0,0,.7); }
[data-theme="dark"] .header__nav a { color: #9fb0c5; }
[data-theme="dark"] .header__nav a:hover { color: #f3f7fc; }
[data-theme="dark"] .hamburger span { background: #e7eef7; }
[data-theme="dark"] body.menu-open .hamburger span { background: #e7eef7; }
[data-theme="dark"] .mobile-menu { background: #070a11; }
[data-theme="dark"] .mobile-menu a { color: #f3f7fc; border-color: #232e40; }
[data-theme="dark"] .bottom-bar { background: rgba(8, 11, 18, .92); border-color: #232e40; }

/* hero + section backgrounds */
[data-theme="dark"] .hero {
  background:
    radial-gradient(60% 50% at 72% 0%, rgba(14,165,164,.18), transparent 60%),
    radial-gradient(70% 60% at 15% 10%, rgba(16,185,129,.16), transparent 55%),
    linear-gradient(180deg, #0b1511, #070a11 72%);
}
[data-theme="dark"] .section--cloud { background: #090e17; }
[data-theme="dark"] .section--mint { background: #081210; }
[data-theme="dark"] .statband { background: radial-gradient(60% 100% at 50% 0%, rgba(16,185,129,.10), transparent 70%), #081210; }
[data-theme="dark"] .lead {
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(16,185,129,.12), transparent 60%),
    radial-gradient(60% 60% at 0% 100%, rgba(255,107,74,.10), transparent 55%), #090e17;
}
[data-theme="dark"] .footer { background: #05080d; }
[data-theme="dark"] .wavesep path { fill: #05080d; }
[data-theme="dark"] .theme-toggle { background: rgba(148, 163, 184, .08); color: #cdd9e8; }
[data-theme="dark"] .founder strong { color: #f3f7fc; }
[data-theme="dark"] .filter__btn:hover { color: #f3f7fc; }
[data-theme="dark"] .to-top { color: #5eead4; }
[data-theme="dark"] .faq__item { border-color: #232e40; }
[data-theme="dark"] .eyebrow { background: rgba(16,185,129,.16); color: #6ee7b7; }

/* aurora pops a little harder on dark */
[data-theme="dark"] .aurora__blob { opacity: .4; }
[data-theme="dark"] .cursor-glow { background: radial-gradient(circle, rgba(45,212,191,.12), rgba(16,185,129,.045) 40%, transparent 70%); }
[data-theme="dark"] .grain { opacity: .045; }

/* Status pages (thank-you / 404): aurora behind, content above, dark support */
.status-page { position: relative; isolation: isolate; overflow: hidden; }
.status-page .aurora { z-index: 0; }
.status-page__inner { position: relative; z-index: 2; }
[data-theme="dark"] .status-page {
  background: radial-gradient(60% 50% at 50% 0%, rgba(16,185,129,.16), transparent 60%), linear-gradient(180deg, #0b1511, #070a11);
}
[data-theme="dark"] .status-page h1 { color: #f3f7fc; }
[data-theme="dark"] .status-page .btn--secondary { background: #0f1726; color: #5eead4; border-color: #232e40; }

/* ── Mobile performance guard (keep phones buttery) ───────────────────────── */
@media (max-width: 900px) {
  .grain { display: none; }
  .aurora__blob { filter: blur(42px); }
  .aurora__blob--3 { display: none; }
  .petal:nth-child(n+4) { display: none; }
}
@media (pointer: coarse) {
  .aurora__blob { filter: blur(40px); }
  .grain { display: none; }
}

/* ── 13. Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .aurora__blob, .petal, .text-grad, .brand__mark, .marquee__track,
  .step:hover .step__art, .step__art, .confetti i,
  .wavesep .w-a, .wavesep .w-b, .pulse-glow, .flourish path { animation: none !important; }
  .cursor-glow, .grain { display: none !important; }
  [data-tilt], .magnetic, .hero__visual picture { transform: none !important; }
  .flourish path { stroke-dashoffset: 0 !important; }
  .reveal-zoom, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; }
}