/* ════════════════════════════════════════════════════════════════════════════
   Settl WWW rebrand (v2 subsite) — visual layer
   Ported from the design handoff `Settl WWW Rebrand.html` (high-fidelity: the
   colours, type, spacing and motion below are final design intent).

   Identity system: every colour is a CSS custom property on :root. rebrand.js
   swaps the ten identity vars (accent/deep/soft/tint/second/secondSoft/pop/
   popSoft/bg/line) every 4.2s, which recolours the whole page including the
   sky, the mascot, the QR and the phone mock. Nothing here hardcodes a hue
   except the ink surfaces (marquee, download banner) and the phone bezel.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Lagoon (Fin) is the boot identity; rebrand.js overwrites these on load.
     These ten values MUST match GdIdentities.lagoon in
     flutter/lib/design/identity.dart, which is the source of truth for every
     palette. Guarded by flutter/test/design/www_brand_sync_test.dart. */
  --accent: #00B3B0; --deep: #007A82; --soft: #C9F4F1; --tint: #EAFBFA;
  --second: #FF7A6B; --secondSoft: #FFE5E1; --pop: #FFD34D; --popSoft: #FFF4D4;
  --bg: #F4FBFA; --line: #DCEFED;
  /* Ink ramp. Held to the SAME source of truth as the ten rotating vars:
     GdIdentities.lagoon's ink / sec / ter in identity.dart. It is written
     once rather than rotated because the three carousel grounds (#F4FBFA,
     #FFF8F8, #FAF8FF) are within 0.02 of each other in relative luminance,
     so one ramp clears AA on all of them.

     It used to be a hand-tuned local ramp (#0D1717 / #5D6C6C / #94A2A2) and
     --ter was 2.52:1 on --bg, which is a fail for the footer links, the
     footer tagline and the .idlabel. landing.css had already spotted it and
     fixed only itself (see its --text-ter note). Lagoon's own --ter is
     4.56:1 on #F4FBFA, 4.56 on #FFF8F8 and 4.54 on #FAF8FF.

     B1: change identity.dart first, then mirror here. Guarded by
     flutter/test/design/www_brand_sync_test.dart. */
  --ink: #0A1A19; --sec: #4E6C6A; --ter: #5B7876;
  /* The FILLED-CONTROL ramp. Every surface that carries a white label or a
     white glyph paints this, never `--accent`.

     B4: filled controls are grounded in `deep`, not `accent`. White on
     `--accent` measures 2.60:1 on lagoon and 3.50:1 on coral -- under the
     4.5 body bar for the .pill CTA's 14.5px bold label and under even the
     3:1 UI floor for the .mic glyph. White on `--deep` is 5.11 / 5.66 / 9.73
     across the three carousel identities, so the ramp runs deep -> darker
     and the floor is its lightest end.

     The Flutter side does the same thing token-for-token: `gdFilledGround`
     and `GdShadow.accentButtonDecoration` in flutter/lib/design/tokens.dart.
     Guarded by flutter/test/design/www_brand_sync_test.dart. */
  --fillGrad: linear-gradient(150deg, var(--deep), color-mix(in srgb, var(--deep) 78%, #000));
  --sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --disp: 'Bricolage Grotesque', var(--sans);
  --mono: 'JetBrains Mono', monospace;
  --serif: 'Source Serif 4', Georgia, serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light;
}

* { margin: 0; padding: 0; box-sizing: border-box }
/* overflow-x on BOTH html and body: the prototype only clipped on body, which
   still let the viewport scroll sideways on phones. The rotated hero rings and
   the tilted marquee are meant to bleed past the edge, not to be reachable. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden }
body {
  background: var(--bg); color: var(--ink); font-family: var(--sans);
  overflow-x: hidden; transition: background .5s ease;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100% }
a { color: var(--deep); text-decoration: none }
a:hover { color: var(--accent) }
button { font: inherit; cursor: pointer }
.pill, .ghost { transition: transform .16s var(--ease), filter .15s }
.pill:active, .ghost:active { transform: scale(.96); filter: brightness(.94) }
:focus-visible { outline: 2px solid var(--deep); outline-offset: 3px }
::selection { background: var(--soft) }
.marquee ::selection, .dl-inner ::selection, .band ::selection { background: var(--pop); color: var(--ink) }
/* Fixed nav would otherwise cover the top of a jump target. */
[id] { scroll-margin-top: 88px }

/* ───────────────────────────── nav ───────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.wordmark { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 26px; color: var(--ink) }
/* 2026-08 no-dot logo set: the accent period was removed from the wordmark.
   Do not reintroduce a .brand-dot rule. Guarded by
   flutter/test/design/www_brand_sync_test.dart. */
.nav-cta { display: flex; gap: 10px; align-items: center }
.pill {
  height: 42px; padding: 0 22px; border: none; border-radius: 999px;
  background: var(--fillGrad);
  color: #fff; font-weight: 700; font-size: 14.5px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 38%, transparent);
}
.ghost {
  height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--sec); font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* The install CTAs are real <a> elements, so re-assert over the a/a:hover rules. */
a.pill, a.pill:hover { color: #fff; text-decoration: none }
a.ghost, a.ghost:hover { color: var(--sec); text-decoration: none }
a.pill.white, a.pill.white:hover { color: var(--deep) }

/* ─────────────── ambient sky (fixed, behind everything) ─────────────── */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden }
.aurora {
  position: absolute; left: -10%; right: -10%; height: 44vh; top: -8vh;
  background: radial-gradient(60% 60% at 30% 60%, color-mix(in srgb, var(--secondSoft) 70%, transparent) 0%, transparent 70%);
  animation: aur 11s ease-in-out infinite;
}
.aurora.b {
  background: radial-gradient(52% 50% at 72% 40%, color-mix(in srgb, var(--popSoft) 75%, transparent) 0%, transparent 70%);
  animation-duration: 14s; animation-direction: reverse;
}
@keyframes aur { 0%, 100% { transform: translateX(0) scaleY(1); opacity: .85 } 50% { transform: translateX(50px) scaleY(1.22); opacity: 1 } }
.sun {
  position: absolute; top: 9vh; right: 8vw; width: 110px; height: 110px; border-radius: 50%;
  background: var(--popSoft);
  box-shadow: 0 0 70px 24px color-mix(in srgb, var(--popSoft) 65%, transparent);
  animation: bob 6s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }
.cloud { position: absolute; animation: drift linear infinite }
.cloud i { position: relative; display: block; background: var(--soft); border-radius: 40px }
@keyframes drift { 0% { transform: translateX(-260px) } 100% { transform: translateX(calc(100vw + 260px)) } }
.bird { position: absolute; animation: drift2 linear infinite }
@keyframes drift2 {
  0% { transform: translateX(calc(100vw + 80px)) translateY(0) }
  50% { transform: translateX(50vw) translateY(-30px) }
  100% { transform: translateX(-90px) translateY(6px) }
}
.bird svg { animation: flap .65s ease-in-out infinite; overflow: visible }
@keyframes flap { 0%, 100% { transform: scaleY(1) } 50% { transform: scaleY(.5) } }
.bubble { position: absolute; bottom: -30px; border-radius: 50%; opacity: 0; animation: rise ease-in infinite }
@keyframes rise {
  0% { transform: translateY(0) scale(.7); opacity: 0 }
  18% { opacity: .85 }
  100% { transform: translateY(-108vh) scale(1.2); opacity: 0 }
}
.star { position: absolute; width: 4px; height: 4px; border-radius: 2px; background: var(--pop); animation: tw 2.6s ease-in-out infinite }
@keyframes tw { 0%, 100% { opacity: .25; transform: scale(.7) } 50% { opacity: 1; transform: scale(1.3) } }
.shoot {
  position: absolute; right: -60px; width: 64px; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--pop)); opacity: 0;
  animation: shoot 7s cubic-bezier(.2, .6, .4, 1) infinite;
}
@keyframes shoot {
  0%, 55% { opacity: 0; transform: translate(0, 0) rotate(-22deg) }
  60% { opacity: 1 }
  78%, 100% { opacity: 0; transform: translate(-58vw, 34vh) rotate(-22deg) }
}

/* ───────────────────────────── hero ───────────────────────────── */
.hero {
  position: relative; z-index: 1; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 110px 24px 70px;
}
.orbit { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%); pointer-events: none; z-index: 0 }
.hero > :not(.orbit) { position: relative; z-index: 2 }
.orbit .ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50% }
.orbit .r1 { width: min(72vw, 560px); height: min(72vw, 560px); border: 1.5px dashed var(--line); animation: spin 70s linear infinite }
.orbit .r2 { width: min(92vw, 720px); height: min(92vw, 720px); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); animation: spin 110s linear infinite reverse }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg) } }
.planet { position: absolute; top: 50%; left: 50%; width: 0; height: 0; animation: spin 26s linear infinite }
.planet i {
  position: absolute; left: calc(min(36vw, 280px)); top: -8px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--second); box-shadow: inset -3px -2px 0 rgba(0, 0, 0, .15);
}
.planet.p2 { animation-duration: 40s; animation-direction: reverse }
.planet.p2 i { left: calc(min(46vw, 360px)); width: 10px; height: 10px; background: var(--pop) }
.kicker {
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 18px;
}
.hero h1 {
  font-family: var(--disp); font-weight: 800; font-size: clamp(46px, 8.4vw, 104px);
  line-height: .98; letter-spacing: -.035em; max-width: 900px;
}
.hero h1 em { font-style: normal; color: var(--accent); display: block }
.hero p.sub {
  margin-top: 22px; font-size: clamp(16px, 2vw, 20px); color: var(--sec);
  max-width: 520px; line-height: 1.55; text-wrap: pretty;
}
.hero-cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; justify-content: center }
.ph-badge { display: block; align-self: center; line-height: 0; transition: transform .16s var(--ease) }
.ph-badge:hover { transform: translateY(-2px) }
.ph-badge img { display: block; width: 250px; max-width: 100%; height: auto }
.pill.big { height: 54px; padding: 0 30px; font-size: 16px }
.ghost.big { height: 54px; padding: 0 26px }
.mascot-stage { position: relative; margin: 34px 0 6px; width: 220px; height: 220px; display: grid; place-items: center }
.mascot-stage .halo {
  /* Concentric with the mascot and larger than its SVG at BOTH breakpoints
     (svg 180 in a 220 stage, 160 in 180): sized off the stage so the mascot
     sits centered inside the circle instead of spilling out of a 130px puck. */
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 92%; height: 92%; border-radius: 50%; background: var(--soft); transition: background .5s;
}
#mascot { position: relative; cursor: pointer; animation: bob 3.4s ease-in-out infinite; transform-origin: 50% 80% }
#mascot.trick { animation: trick .6s var(--ease) }
@keyframes trick {
  0% { transform: translateY(0) scale(1) }
  30% { transform: translateY(-26px) scale(.94, 1.08) rotate(-7deg) }
  60% { transform: translateY(0) scale(1.1, .88) rotate(5deg) }
  100% { transform: scale(1) rotate(0) }
}
.armL, .armR, .leafL, .leafR { transform-box: fill-box; animation: swayL 3.2s ease-in-out infinite; transform-origin: 90% 10% }
.armR, .leafR { animation-name: swayR; transform-origin: 10% 10% }
@keyframes swayL { 0%, 100% { transform: rotate(0) } 50% { transform: rotate(-9deg) } }
@keyframes swayR { 0%, 100% { transform: rotate(0) } 50% { transform: rotate(9deg) } }
.spark { transform-box: fill-box; transform-origin: center; animation: tw 2.4s ease-in-out infinite }

/* identity picker — five orbs on a slow rotating carrier, counter-rotated so
   each orb stays upright. Carrier is pointer-transparent; the orbs are not. */
.idorbit { position: absolute; top: 50%; left: 50%; width: 0; height: 0; animation: spin2 36s linear infinite; pointer-events: none }
@keyframes spin2 { to { transform: rotate(360deg) } }
.orb {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .16);
  pointer-events: auto; padding: 0; transition: transform .3s var(--ease);
}
.orb.on { transform: scale(1.35); border-color: var(--pop) }
.orb i { position: absolute; inset: 0; border-radius: 50%; display: block }
.idlabel {
  margin-top: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ter);
}

/* ───────────────────────── phone mock ───────────────────────── */
.psec { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center }
@media (max-width: 820px) { .psec { grid-template-columns: 1fr } }
.mockwrap { position: relative; display: grid; place-items: center; animation: bob 5.5s ease-in-out infinite }
.mock {
  position: relative; width: min(320px, 78vw); border-radius: 54px; background: #111; padding: 9px;
  box-shadow: 0 40px 90px -30px rgba(13, 23, 23, .4), 0 0 0 1px rgba(0, 0, 0, .4);
}
.mock .scr { position: relative; border-radius: 46px; overflow: hidden; aspect-ratio: 744/1652; background: var(--tint) }
.mock .scr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s ease }
.mock .scr img.hide { opacity: 0 }
.mockwrap .chip {
  position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 18px; font-family: var(--disp); font-weight: 600; font-size: 14px;
  box-shadow: 0 14px 34px rgba(13, 23, 23, .14); animation: bob 4.6s ease-in-out infinite; z-index: 2;
}
.mockwrap .chip.c1 { top: 12%; left: max(-10px, 2vw); animation-delay: .6s }
.mockwrap .chip.c2 { bottom: 18%; right: max(-6px, 2vw); animation-delay: 1.4s }
.mockwrap .ringp {
  position: absolute; width: 120%; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px dashed var(--line); animation: spin2 50s linear infinite; pointer-events: none;
}

/* ─────────────────────────── marquee ─────────────────────────── */
.marquee {
  position: relative; z-index: 1; background: var(--ink); color: #fff; overflow: hidden;
  padding: 16px 0; transform: rotate(-1.2deg); margin: 10px -20px; width: calc(100% + 40px);
}
.marquee .track {
  display: flex; gap: 44px; white-space: nowrap; animation: mq 22s linear infinite;
  font-family: var(--disp); font-weight: 700; font-size: 20px; letter-spacing: -.01em;
}
.marquee .track em { font-style: normal; color: var(--pop) }
@keyframes mq { to { transform: translateX(-50%) } }

/* ─────────────────────────── sections ─────────────────────────── */
section { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 110px 28px }
.sec-k { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent) }
.sec-h { font-family: var(--disp); font-weight: 800; font-size: clamp(34px, 5vw, 58px); letter-spacing: -.03em; line-height: 1.04; margin-top: 14px; max-width: 640px }
.sec-h em { font-style: normal; color: var(--accent) }
.sec-p { margin-top: 16px; color: var(--sec); font-size: 17px; line-height: 1.6; max-width: 520px; text-wrap: pretty }
.reveal { opacity: 1; transform: none; transition: all .7s var(--ease) }
.reveal.in { opacity: 1; transform: none }

/* voice demo */
.voicebar {
  margin-top: 38px; display: flex; align-items: center; gap: 16px; background: #fff;
  border: 1px solid var(--line); border-radius: 999px; padding: 10px 12px 10px 26px;
  box-shadow: 0 20px 50px -18px rgba(13, 23, 23, .18); max-width: 640px;
}
.voicebar q {
  font-family: var(--disp); font-weight: 600; font-size: clamp(15px, 2.4vw, 21px);
  letter-spacing: -.02em; quotes: "\201C" "\201D"; flex: 1; min-height: 1.4em;
}
.voicebar q::after { content: ""; border-right: 2.5px solid var(--accent); margin-left: 3px; animation: caret 1s steps(1) infinite }
@keyframes caret { 50% { border-color: transparent } }
.mic {
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: var(--fillGrad);
  display: grid; place-items: center; flex-shrink: 0;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent);
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent) }
  70% { box-shadow: 0 0 0 22px transparent }
  100% { box-shadow: 0 0 0 0 transparent }
}
.wave { display: flex; align-items: center; gap: 3px; height: 26px }
.wave i { width: 3px; border-radius: 2px; background: var(--accent); animation: wv 1s var(--ease) infinite alternate }
@keyframes wv { from { transform: scaleY(.25) } to { transform: scaleY(1) } }

/* feature cards */
.grid { margin-top: 54px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px }
.fcard {
  position: relative; overflow: hidden; border-radius: 28px; padding: 28px; background: #fff;
  border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.fcard:hover { transform: translateY(-8px) rotate(-.4deg); box-shadow: 0 30px 60px -24px rgba(13, 23, 23, .25) }
.fcard.t1 { background: var(--tint) }
.fcard.t2 { background: var(--secondSoft) }
.fcard.t3 { background: var(--popSoft) }
.fcard .blob { position: absolute; right: -40px; top: -44px; width: 150px; height: 150px; background: #fff; opacity: .5; animation: morph 14s ease-in-out infinite }
@keyframes morph {
  0%, 100% { border-radius: 58% 42% 55% 45% / 48% 56% 44% 52% }
  33% { border-radius: 45% 55% 40% 60% / 60% 40% 58% 42%; transform: translate(-10px, 8px) rotate(7deg) }
  66% { border-radius: 52% 48% 62% 38% / 42% 58% 40% 60% }
}
.fcard .blob.s { background: var(--soft) }
.fcard .blob.ss { background: var(--secondSoft) }
.fcard .fk { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--deep); opacity: .75 }
.fcard h3 { font-family: var(--disp); font-weight: 700; font-size: 24px; letter-spacing: -.025em; margin-top: 10px; line-height: 1.12 }
.fcard p { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--sec) }
.fcard .fq {
  margin-top: 16px; display: inline-block; font-family: var(--disp); font-weight: 600; font-size: 14px;
  background: #fff; border-radius: 999px; padding: 8px 16px; box-shadow: 0 6px 18px rgba(13, 23, 23, .08);
}

/* switching band
   The prototype let .band run flush to the viewport edge below 1100px, which
   put its 44px rounded corners hard against the screen. .bandwrap gives it the
   same 28/20px gutter the download banner already had. */
.bandwrap { position: relative; z-index: 1; max-width: 1156px; margin: 0 auto; padding: 0 28px }
.band {
  position: relative; z-index: 1; background: var(--fillGrad);
  color: #fff; border-radius: 44px; max-width: 1100px; margin: 0 auto; padding: 70px 54px; overflow: hidden;
}
.band .sec-k { color: var(--popSoft) }
.band .sec-h { color: #fff }
.band .sec-h em { color: var(--pop) }
.band .sec-p { color: rgba(255, 255, 255, .75) }
.band .sheen {
  position: absolute; top: -30%; bottom: -30%; left: -100px; width: 110px; transform: rotate(14deg);
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .2), transparent);
  animation: sheen 7s ease-in-out infinite;
}
@keyframes sheen { 0%, 55% { left: -120px; opacity: 0 } 62% { opacity: 1 } 100% { left: 120%; opacity: 0 } }
.band .coins i { position: absolute; bottom: -16px; border: 2px solid rgba(255, 255, 255, .8); border-radius: 50%; opacity: 0; animation: coin 8s ease-in infinite }
@keyframes coin { 0% { transform: translateY(0) rotate(0); opacity: 0 } 12% { opacity: .8 } 100% { transform: translateY(-420px) rotate(340deg); opacity: 0 } }
.band .white { margin-top: 26px; background: #fff; color: var(--deep); box-shadow: 0 8px 22px rgba(0, 0, 0, .18) }

/* download CTA banner */
.dl { position: relative; z-index: 1; max-width: 1100px; margin: 110px auto 0; padding: 0 28px }
.dl-inner {
  position: relative; overflow: hidden; border-radius: 44px; background: var(--ink); color: #fff;
  padding: 64px 54px; display: flex; flex-wrap: wrap; align-items: center; gap: 38px;
}
.dl-inner .sheen {
  position: absolute; top: -30%; bottom: -30%; left: -100px; width: 110px; transform: rotate(14deg);
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent);
  animation: sheen 8s ease-in-out infinite;
}
.dl-copy { flex: 1; min-width: 260px }
.dl-copy .sec-h { color: #fff; font-size: clamp(30px, 4.4vw, 50px) }
.dl-copy .sec-h em { color: var(--pop) }
.dl-copy p { margin-top: 12px; color: rgba(255, 255, 255, .65); font-size: 16px; line-height: 1.55; max-width: 420px }
.dl-badges { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap }
.sbadge {
  display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #111;
  border-radius: 14px; padding: 10px 18px 10px 14px; font-weight: 700; transition: transform .25s var(--ease);
}
.sbadge:hover { transform: translateY(-3px); color: #111 }
.sbadge .bt { display: flex; flex-direction: column; line-height: 1.05; text-align: left }
.sbadge .bt small { font-size: 10.5px; font-weight: 600; opacity: .7; text-transform: uppercase; letter-spacing: .05em }
.sbadge .bt b { font-size: 16px; letter-spacing: -.01em }
.dl-side { display: flex; flex-direction: column; align-items: center; gap: 20px }
.dl-mascot { position: relative; display: grid; place-items: center; animation: bob 4s ease-in-out infinite }
.dl-mascot .stars i { position: absolute; width: 5px; height: 5px; border-radius: 3px; background: var(--pop); animation: tw 2.4s ease-in-out infinite }
.dl .qrchip { display: flex; align-items: center; gap: 14px }
.dl .qrbox { width: 150px; height: 150px; border-radius: 20px; background: #fff; padding: 10px; box-shadow: 0 10px 26px rgba(0, 0, 0, .3) }
.dl .qrbox svg { width: 100%; height: 100%; display: block }
.dl .qrtxt { display: flex; flex-direction: column; gap: 5px }
.dl .qrtxt .free { font-family: var(--disp); font-weight: 700; font-size: 17px; color: var(--pop); letter-spacing: -.01em }
.dl .qrtxt small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5) }
@media (max-width: 640px) { .dl-inner { padding: 44px 30px; border-radius: 32px } }

/* settle / confetti */
.settle { text-align: center }
.settle .sec-h, .settle .sec-p { margin-left: auto; margin-right: auto }
.cf { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden }
.cf i { position: absolute; top: -18px; animation: cff cubic-bezier(.25, .4, .6, 1) both }
@keyframes cff {
  0% { transform: translate(0, 0) rotate(0); opacity: 1 }
  80% { opacity: 1 }
  100% { transform: translate(var(--dx), 110vh) rotate(var(--rot)); opacity: .4 }
}

/* footer */
footer {
  position: relative; z-index: 1; border-top: 1px solid var(--line); margin-top: 60px; padding: 44px 28px;
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
  max-width: 1100px; margin-inline: auto;
}
footer .tagline { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ter) }
footer .links { display: flex; gap: 22px; font-size: 13.5px }
footer .links a { color: var(--ter) }
footer .links a:hover { color: var(--accent) }

/* ───────────────────────── mobile pass ───────────────────────── */
@media (max-width: 640px) {
  .bandwrap { padding: 0 20px }
  .band { padding: 50px 28px; border-radius: 32px }
  .nav .ghost { display: none }
  .nav { padding: 12px 18px }
  section { padding: 64px 20px }
  .hero { padding: 96px 18px 56px }
  .hero h1 { font-size: clamp(42px, 12.5vw, 64px) }
  .hero p.sub { font-size: 15.5px }
  .mascot-stage { width: 180px; height: 180px; margin: 24px 0 4px }
  .mascot-stage svg { width: 160px; height: 160px }
  /* The tall mobile hero pushes its midpoint (the rings' desktop anchor)
     well above the mascot. Anchor the orbit off the hero's BOTTOM instead:
     padding 56 + CTA 54 + its 30 gap + two-line idlabel ~44 + stage half 94
     lands the ring center on the mascot for any headline wrap. */
  .orbit { top: auto; bottom: 278px; transform: translate(-50%, 50%) }
  .orb { width: 38px; height: 38px; margin: -19px 0 0 -19px; border-width: 2.5px }
  .marquee .track { font-size: 15.5px; gap: 26px }
  .voicebar { padding: 8px 8px 8px 16px; gap: 10px; margin-top: 28px }
  .voicebar .wave { display: none }
  .mic { width: 48px; height: 48px }
  .grid { margin-top: 36px; gap: 14px }
  .fcard { padding: 22px; border-radius: 22px }
  .fcard h3 { font-size: 21px }
  .mockwrap .chip { font-size: 12px; padding: 8px 13px }
  .mockwrap .chip.c1 { left: 0 }
  .mockwrap .chip.c2 { right: 0 }
  .dl { margin-top: 64px; padding: 0 20px }
  .dl-inner { flex-direction: column; text-align: center; align-items: center; gap: 26px }
  .dl-copy p { margin-inline: auto }
  .dl-badges { justify-content: center }
  .dl .qrchip { flex-direction: column; text-align: center; gap: 10px }
  .dl .qrtxt { align-items: center }
  .settle .hero-cta .pill.big { width: 100%; justify-content: center }
  footer { flex-direction: column; text-align: center; gap: 14px; padding: 34px 20px }
  footer .links { flex-wrap: wrap; justify-content: center }
}

/* ───────────────────── reduced-motion kill switch ─────────────────────
   The handoff prototype did not handle this; the README asks production to.
   Everything ambient stops, the reveal animation is pre-resolved, and
   rebrand.js additionally freezes the identity carousel, the typewriter and
   the confetti when this query matches. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .sky { display: none }
  .reveal { opacity: 1; transform: none }
  .voicebar q::after { border-color: var(--accent) }
}