/* مركز الشفاء الرباني — one light at a time.
   Dark emerald ground, gold as the only voice, rose as a whisper. The page is a run of scroll
   "stages": pinned screens that pass one idea at a time through the centre. Live stage layout is
   on only with .js and no reduced-motion preference; otherwise every stage is a plain section. */

:root {
  --bg-950: #07110d; --bg-900: #0b1a14; --bg-800: #12261d; --bg-700: #193328;
  --gold-500: #c9a45c; --gold-600: #d6b570; --gold-200: #e8d5a3; --rose-700: #8e1f2f;
  --ink: #f3eee3; --ink-muted: #a9a290; --on-gold: #0b1a14;
  --line: #c9a45c3d; --line-soft: #c9a45c24;
  --font-display: "Aref Ruqaa", "Amiri", "Noto Naskh Arabic", serif;
  --font-heading: "Amiri", "Noto Naskh Arabic", "Traditional Arabic", serif;
  --font-body: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  --gutter: 16px;
  --bar: 60px;
  --halo: 0 0 0 1px rgba(201, 164, 92, .35), 0 12px 36px -12px rgba(201, 164, 92, .45);
}
@media (min-width: 600px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg-900); -webkit-text-size-adjust: 100%; scroll-padding-top: var(--bar); }
body { margin: 0; font: 400 17px/1.8 var(--font-body); color: var(--ink); background: var(--bg-900); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--gold-200); outline-offset: 3px; border-radius: 6px; }
.num { unicode-bidi: isolate; direction: ltr; font-variant-numeric: lining-nums tabular-nums; }
.skip { position: absolute; z-index: 60; inset-inline-start: 12px; top: -80px; padding: 10px 16px; border-radius: 999px; background: var(--gold-500); color: var(--on-gold); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- ornaments ---------- */
.star { display: block; width: 20px; height: 20px; flex: none; }
.star polygon { fill: currentColor; }
.star--rose polygon { fill: var(--rose-700); stroke: var(--gold-500); stroke-width: 1.8; }
.star--gold { color: var(--gold-500); }
.star--dot { width: 10px; height: 10px; color: var(--gold-500); }
.star--badge polygon { fill: var(--bg-800); stroke: var(--gold-500); stroke-width: 1.1; }
.star--hue polygon { fill: color-mix(in oklab, var(--hue) 55%, var(--gold-200)); }
.turn { display: flex; align-items: center; gap: 14px; width: 220px; }
.turn::before, .turn::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to left, transparent, var(--gold-500)); }
.turn::after { background: linear-gradient(to right, transparent, var(--gold-500)); }
.turn .star { width: 26px; height: 26px; transform: rotate(calc(var(--x, 0) * 45deg)); }

/* ---------- type ---------- */
.eyebrow { font-size: 15px; font-weight: 600; line-height: 1.6; color: var(--gold-500); }
.h2 { font: 700 clamp(28px, 7.4vw, 44px)/1.45 var(--font-heading); color: var(--ink); text-wrap: balance; }
.h2--sm { font-size: clamp(22px, 5.6vw, 30px); color: var(--ink-muted); font-weight: 400; }
.h3 { font: 700 23px/1.5 var(--font-heading); color: var(--ink); }
.intro { margin: 8px auto 0; max-width: 30em; font-size: 18px; line-height: 1.8; color: var(--ink-muted); text-wrap: pretty; }
.head { text-align: center; padding: 0 var(--gutter); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font: 600 17px/1.3 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms var(--ease-out); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:active { transform: scale(.97); transition-duration: 200ms, 200ms, 100ms; }
.btn--gold { background: var(--gold-500); color: var(--on-gold); box-shadow: inset 0 1px 0 #ffffff47, var(--halo); }
.btn--line { color: var(--gold-200); border-color: var(--gold-500); background: rgba(11, 26, 20, .6); }
.btn--sm { min-height: 48px; padding: 0 20px; font-size: 16px; }
.wa { fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .btn--gold:hover { background: var(--gold-600); }
  .btn--line:hover { background: var(--bg-700); }
}
.cta-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; width: 100%; max-width: 440px; }
.cta-row .btn { padding: 0 14px; }
.cta-row--center { margin-inline: auto; }

/* ---------- top bar ---------- */
.topbar { position: fixed; inset: 0 0 auto; z-index: 40; height: calc(var(--bar) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--gutter) 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid transparent;
  transition: background-color 300ms ease, border-color 300ms ease; }
.topbar.is-solid { background: rgba(11, 26, 20, .72); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); border-color: var(--line-soft); }
@media (prefers-reduced-transparency: reduce) { .topbar.is-solid { background: var(--bg-900); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.progress { position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: linear-gradient(to left, var(--gold-500), var(--gold-200)); transform-origin: right center; transform: scaleX(0); }
.wordmark { display: inline-flex; align-items: center; gap: 8px; font: 700 24px/1.2 var(--font-display); color: var(--gold-200); text-decoration: none; }
.wordmark .star { width: 16px; height: 16px; }
.wordmark--sm { font-size: 22px; }
.topnav { display: none; }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); color: var(--gold-200); }
.icon-btn svg { width: 20px; height: 20px; }
@media (min-width: 900px) {
  .topbar { padding-inline: max(32px, calc((100vw - 1200px) / 2)); }
  .topnav { display: flex; gap: 28px; margin-inline-start: auto; }
  .topnav a { font-size: 15px; color: var(--ink-muted); text-decoration: none; transition: color 200ms ease; }
  .topnav a:hover { color: var(--gold-200); }
}

/* ---------- floating WhatsApp ---------- */
.fab { position: fixed; z-index: 45; inset-inline-end: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 50%; background: var(--gold-500); color: var(--on-gold);
  box-shadow: inset 0 1px 0 #ffffff47, 0 10px 28px -8px rgba(0, 0, 0, .65), var(--halo);
  transition: transform 420ms var(--ease-sheet), opacity 240ms ease; }
.fab svg { width: 30px; height: 30px; }
.fab::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--gold-500); opacity: 0; animation: pulse 7s var(--ease-out) infinite 3s; }
.fab:active { transform: scale(.94); transition-duration: 100ms; }
.fab.is-away { transform: translateY(calc(100% + 16px + env(safe-area-inset-bottom))); opacity: 0; pointer-events: none; transition: transform 260ms var(--ease-out), opacity 180ms ease; }
.fab.is-away::after { animation: none; }
@keyframes pulse { 0% { transform: scale(1); opacity: .6; } 20%, 100% { transform: scale(1.6); opacity: 0; } }

/* ============================================================
   1. Hero: his portrait stands in front of the brand name.
   --p (0 → 1 as the hero leaves) pulls the layers apart in depth.
   ============================================================ */
.hero { --p: 0; position: relative; min-height: 100svh; display: grid; align-items: end; overflow: clip; isolation: isolate;
  background: radial-gradient(90% 62% at 50% 30%, #173427 0%, var(--bg-900) 58%, var(--bg-950) 100%); }
.hero-light { position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background: radial-gradient(closest-side, rgba(214, 181, 112, .34), rgba(201, 164, 92, .08) 55%, transparent) 50% 24% / min(130vw, 980px) min(130vw, 980px) no-repeat;
  opacity: calc(1 - var(--p) * .85); }
.hero-word { position: absolute; z-index: -2; inset-inline: 0; top: calc(var(--bar) - 1svh); display: grid; justify-items: center; pointer-events: none;
  font: 700 clamp(80px, 25vw, 300px)/1.12 var(--font-display);
  color: rgba(232, 213, 163, .4);
  -webkit-mask-image: linear-gradient(to bottom, #000 20%, rgba(0, 0, 0, .15) 92%); mask-image: linear-gradient(to bottom, #000 20%, rgba(0, 0, 0, .15) 92%);
  transform: translate3d(0, calc(var(--p) * 34svh), 0); }
.hero-figure { position: absolute; z-index: -1; inset-inline: 0; top: calc(var(--bar) + 11svh); display: flex; justify-content: center; pointer-events: none;
  transform: translate3d(0, calc(var(--p) * 16svh), 0) scale(calc(1 + var(--p) * .06)); transform-origin: 50% 0; }
.hero-figure img { height: 50svh; width: auto; max-width: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 56%, transparent 88%); mask-image: linear-gradient(to bottom, #000 56%, transparent 88%); }
.hero-copy { position: relative; display: grid; justify-items: center; gap: 6px; padding: 0 var(--gutter) calc(20px + env(safe-area-inset-bottom)); text-align: center;
  opacity: calc(1 - var(--p) * 1.6); transform: translate3d(0, calc(var(--p) * -8svh), 0); }
.hero-copy .eyebrow { margin-bottom: 10px; }
.name { font: 700 clamp(42px, 12vw, 88px)/1.5 var(--font-display); color: var(--gold-200); text-shadow: 0 2px 24px rgba(7, 17, 13, .9); text-wrap: balance; }
.hero-title { max-width: 24em; font-size: 17px; line-height: 1.75; color: var(--ink); text-wrap: balance; text-shadow: 0 1px 12px rgba(7, 17, 13, .9); }
.hero-copy .cta-row { margin-top: 14px; }
.cue { position: relative; display: block; width: 1px; height: 30px; margin-top: 14px; overflow: hidden; background: linear-gradient(var(--line), transparent); }
.cue span { position: absolute; left: -1.5px; top: 0; width: 4px; height: 10px; border-radius: 2px; background: var(--gold-500); animation: cue 2.4s var(--ease-in-out) infinite; }
@keyframes cue { 0% { transform: translateY(-12px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(32px); opacity: 0; } }

.js .hero-figure img { animation: figure-in 1.6s var(--ease-out) .1s backwards; }
.js .hero-word { animation: fade-in 2.2s ease-out backwards; }
.js .hero-light { animation: bloom 2.4s var(--ease-out) backwards; }
.js .hero-copy > * { animation: rise-in 800ms var(--ease-out) backwards; }
.js .hero-copy > :nth-child(2) { animation-delay: 70ms; }
.js .hero-copy > :nth-child(3) { animation-delay: 140ms; }
.js .hero-copy > :nth-child(4) { animation-delay: 210ms; }
.js .hero-copy > :nth-child(5) { animation-delay: 600ms; }
@keyframes figure-in { from { opacity: 0; transform: translateY(32px) scale(.97); filter: blur(8px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes bloom { from { opacity: 0; scale: .6; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }

@media (min-width: 900px) {
  .hero { align-items: center; }
  .hero-word { inset-inline: auto; left: 0; width: 56%; top: calc(var(--bar) - 2svh); font-size: clamp(150px, 14vw, 260px); }
  .hero-figure { inset-inline: auto; left: max(0px, calc((100vw - 1400px) / 2)); width: 56%; top: auto; bottom: 0; transform-origin: 50% 100%; }
  .hero-figure img { height: min(84svh, 880px); -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 92%); mask-image: linear-gradient(to bottom, #000 55%, transparent 92%); }
  .hero-light { background-position: 22% 38%; }
  .hero-copy { justify-self: start; justify-items: start; text-align: start; width: min(44%, 560px); margin-inline-start: max(6vw, calc((100vw - 1200px) / 2)); padding: 0; gap: 10px; }
  .hero-title { font-size: 20px; }
  .cta-row { max-width: 460px; }
  .cta-row .btn { min-height: 56px; }
  .cue { display: none; }
}

/* ============================================================
   2. Stages. Static first (no JS, reduced motion): a plain section.
   Live: a sticky screen; main.js writes --t/--f per beat and
   --p, --q, --x per stage (see main.js for their meaning).
   ============================================================ */
.stage { --n: 1; --step: .4; --hold: 0; --k: 1; position: relative; background: var(--bg-900); container-type: inline-size; }
.stage-pin { position: relative; display: grid; justify-items: center; gap: 40px; padding: 96px var(--gutter); overflow: clip; isolation: isolate; }
.stage-top, .stage-bottom { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; }
.beat { position: relative; z-index: 2; width: min(100%, 30em); text-align: center; }
.plate { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.rail, .ticks { display: none; }
@media (min-width: 900px) { .stage { --k: 1.15; } }

@media (prefers-reduced-motion: no-preference) {
  .js .stage { height: calc(100svh * (1 + (var(--n) - 1) * var(--step) * var(--k) + var(--hold))); }
  .js .stage-pin { position: sticky; top: 0; height: 100svh; padding: var(--bar) 28px 0; gap: 0;
    grid-template: minmax(0, 1fr) auto minmax(0, 1fr) / minmax(0, 1fr); align-items: center; }
  .js .stage-top { grid-row: 1; align-self: end; padding-bottom: 28px; }
  .js .beat { grid-area: 2 / 1; opacity: var(--f, 0); transform: translate3d(0, calc(var(--ty, 0) * var(--travel, -9svh)), 0) scale(calc(.96 + .04 * var(--f, 0))); will-change: opacity, transform; }
  .js .beat:not(.is-on) { pointer-events: none; }
  .js .stage-bottom { grid-row: 3; align-self: start; padding-top: 28px; }
  .is-live .w { opacity: calc(.18 + .82 * var(--w, 0)); }
  .is-live .rail { position: absolute; z-index: 3; inset-inline-end: 14px; top: 50%; translate: 0 -50%; display: grid; gap: 10px; }
  .rail span { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-500); opacity: .25; transition: opacity 240ms ease, transform 240ms var(--ease-out); }
  .rail span.is-on { opacity: 1; transform: scale(1.6); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .js .beat { filter: blur(calc((1 - var(--f, 0)) * 5px)); }
}

/* ----- 2a. Tagline over the night sky ----- */
.stage--line { background: var(--bg-950); }
.plate--night img { object-position: 30% 50%; opacity: .75; }
.plate--night { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent); }
.js .plate--night img { transform: scale(calc(1.1 - .1 * var(--q, 1))); }
.line { font: 400 clamp(34px, 10cqi, 72px)/1.7 var(--font-heading); color: var(--ink); text-wrap: balance; }
.line em { font-style: normal; color: var(--gold-200); }

/* ----- 2b. Trust badges ----- */
.beat-word { font: 700 clamp(38px, 11cqi, 76px)/1.4 var(--font-heading); color: var(--gold-200); text-wrap: balance; }
.beads { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 34em; }
.bead { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-soft);
  font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink-muted); white-space: nowrap;
  transition: color 400ms ease, border-color 400ms ease, background-color 400ms ease; }
.bead .star { width: 8px; height: 8px; opacity: .5; transition: opacity 400ms ease; }
.bead.is-lit { color: var(--ink); border-color: var(--line); background: var(--bg-800); }
.bead.is-lit .star { opacity: 1; }
.bead.is-now { color: var(--gold-200); border-color: var(--gold-500); }
.stage:not(.is-live) .beads { display: none; }

/* ----- 2c. Channel numbers ----- */
.stage--stats .stage-pin::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 164, 92, .12), transparent) 50% 50% / min(120vw, 820px) min(120vw, 820px) no-repeat; }
.stat-n { display: block; font: 700 clamp(92px, 28cqi, 176px)/1.05 var(--font-body); font-variant-numeric: lining-nums tabular-nums; color: var(--gold-500); }
.stat-u { display: block; margin-top: 8px; font: 700 30px/1.4 var(--font-heading); color: var(--ink); }
.stat-u--pre { margin: 0 0 6px; }
.beat-sub { margin: 10px auto 0; max-width: 20em; font-size: 19px; line-height: 1.7; color: var(--ink-muted); }

/* ----- 2d. About: the light of the Quran arrives, then the words ----- */
.stage--quran { --travel: -8svh; background: var(--bg-950); }
.plate--dim img { filter: brightness(.32) saturate(.75); }
.stage--quran .plate--lit { opacity: calc(var(--q, 1) * 3.2 - .3); }
.js .stage--quran .plate--lit img { transform: scale(calc(1.08 - .08 * var(--q, 1))); transform-origin: 50% 100%; }
.stage--quran .stage-pin::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(7, 17, 13, .9) 0%, rgba(7, 17, 13, .66) 34%, rgba(7, 17, 13, .7) 58%, rgba(7, 17, 13, .12) 82%, rgba(7, 17, 13, .55) 100%); }
.quran-h { font-size: clamp(32px, 9cqi, 60px); color: var(--gold-200); }
.quran-p { max-width: 24em; margin-inline: auto; font-size: 19px; line-height: 1.95; color: var(--ink); text-wrap: pretty; text-shadow: 0 1px 14px rgba(7, 17, 13, .95); }
.closing { display: inline-flex; align-items: center; gap: 12px; font: 400 clamp(26px, 7cqi, 40px)/1.7 var(--font-heading); color: var(--gold-200); text-shadow: 0 1px 14px rgba(7, 17, 13, .95); }
.closing .star { width: 22px; height: 22px; }
@media (min-width: 900px) {
  .quran-p { font-size: 22px; }
  .js .stage--quran .stage-top, .js .stage--quran .beat { justify-self: start; justify-items: start; text-align: start; width: min(44%, 32em); margin-inline-start: max(6vw, calc((100vw - 1200px) / 2)); }
  .js .stage--quran .quran-p { margin-inline: 0; }
  .stage--quran .stage-pin::after { background: linear-gradient(to left, rgba(7, 17, 13, .92) 0%, rgba(7, 17, 13, .78) 38%, rgba(7, 17, 13, .1) 70%, rgba(7, 17, 13, .35) 100%); }
}

/* ----- 2e. Services: a picker wheel of every case ----- */
.wheel-head { position: relative; z-index: 2; display: grid; justify-items: center; gap: 4px; text-align: center; }
.chaps, .chap-now, .panel { display: none; }
.drum { position: relative; z-index: 1; width: min(100%, 40em); display: grid; gap: 32px; }
.drum-gh { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font: 700 23px/1.5 var(--font-heading); color: var(--gold-200); }
.drum-gh svg { width: 24px; height: 24px; color: var(--gold-500); flex: none; }
.drum-gn { margin-inline-start: auto; font: 400 14px/1.5 var(--font-body); color: var(--ink-muted); }
.drum-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 22px; overflow: hidden; }
.row { background: var(--bg-800); padding: 14px 18px; }
.row-t { font: 600 17px/1.6 var(--font-body); color: var(--ink); text-decoration: none; }
.row-d p { margin-top: 4px; font-size: 17px; line-height: 1.75; color: var(--ink-muted); }
.note { display: inline-block; margin-top: 8px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); font-size: 14px; line-height: 1.9; color: var(--gold-200); }

@media (prefers-reduced-motion: no-preference) {
  .js .wheel .stage-pin { grid-template: auto minmax(0, 1fr) auto / minmax(0, 1fr); align-items: stretch; justify-items: stretch;
    padding: calc(var(--bar) + 8px) var(--gutter) max(18px, env(safe-area-inset-bottom)); }
  .js .wheel-head { grid-row: 1; gap: 2px; }
  .js .wheel .h2 { font-size: clamp(24px, 6.4cqi, 40px); }
  .js .wheel .intro { display: none; }
  .js .chaps { display: flex; justify-content: center; gap: 12px; margin-top: 10px; }
  .chap { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-800); color: var(--ink-muted); cursor: pointer;
    transition: color 300ms ease, border-color 300ms ease, background-color 300ms ease, box-shadow 300ms ease; }
  .chap svg { width: 22px; height: 22px; }
  .chap.is-done { color: var(--gold-500); }
  .chap.is-on { color: var(--gold-200); border-color: var(--gold-500); background: var(--bg-700); box-shadow: 0 0 0 5px rgba(201, 164, 92, .12); }
  .js .chap-now { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin-top: 8px; }
  .chap-t { font: 700 19px/1.5 var(--font-heading); color: var(--ink); }
  .chap-t.swap { animation: swap 450ms var(--ease-out); }
  .chap-c { font-size: 14px; color: var(--ink-muted); }
  .js .drum { grid-row: 2; display: block; width: 100%; height: 100%; perspective: 1100px; --row: clamp(44px, 6.6svh, 58px);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); }
  .js .drum::before { content: ""; position: absolute; inset-inline: 4%; top: 50%; height: calc(var(--row) * 1.34); translate: 0 -50%; pointer-events: none;
    border-block: 1px solid var(--line); background: radial-gradient(closest-side, rgba(201, 164, 92, .12), transparent); }
  .js .drum-group, .js .drum-list { display: contents; }
  .js .drum-gh { display: none; }
  .js .row { position: absolute; inset-inline: 0; top: 50%; height: var(--row); margin-top: calc(var(--row) / -2); display: grid; place-items: center;
    padding: 0; background: none; backface-visibility: hidden; will-change: transform, opacity; }
  .js .row:not(.is-on) { cursor: pointer; }
  .js .row-t { padding: 0 10px; font: 700 clamp(19px, 5.1cqi, 28px)/1.3 var(--font-heading); white-space: nowrap; transition: color 300ms ease; }
  .js .row.is-on .row-t { color: var(--gold-200); }
  .js .row-d { display: none; }
  .js .panel { grid-row: 3; display: grid; justify-items: center; gap: 12px; text-align: center; }
  .panel-text { display: grid; align-content: center; justify-items: center; gap: 8px; height: 104px; }
  .panel-text > * { animation: settle 200ms ease-out; }
  .panel-text p { max-width: 24em; font-size: 17px; line-height: 1.7; color: var(--ink-muted); text-wrap: balance; }
  .panel-text .note { margin: 0; }
  .panel-t { display: none; }
  @keyframes settle { from { opacity: .35; } }
  @keyframes swap { from { opacity: 0; transform: translateY(8px); } }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .js .wheel .stage-pin { grid-template: auto minmax(0, 1fr) / minmax(0, 1fr) minmax(0, 1fr); column-gap: 6vw; padding-inline: max(5vw, calc((100vw - 1200px) / 2)); padding-bottom: 32px; }
  .js .wheel-head { grid-column: 1 / -1; }
  .js .wheel .intro { display: block; }
  .js .drum { grid-column: 1; }
  .js .panel { grid-row: 2; grid-column: 2; align-self: center; justify-items: start; gap: 20px; text-align: start; }
  .panel-text { height: 270px; justify-items: start; gap: 14px; }
  .panel-text p { font-size: 21px; text-wrap: pretty; }
  .panel-text .panel-t { display: block; font: 700 clamp(32px, 3.4vw, 48px)/1.4 var(--font-heading); color: var(--gold-200); text-wrap: balance; }
}

/* ----- 2f. Stones: cards glide through the centre, each with its own light ----- */
.cards { list-style: none; margin: 0; padding: 0 var(--gutter); width: 100%; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cards::-webkit-scrollbar { display: none; }
.stone { --lit: 1; position: relative; flex: none; width: min(80vw, 350px); min-height: 340px; scroll-snap-align: center; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 28px 24px; border-radius: 26px; border: 1px solid var(--line);
  background: linear-gradient(to bottom, var(--bg-800), var(--bg-900)); box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .7); }
.stone-light { position: absolute; z-index: -1; inset: -34% -24% auto; height: 88%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--hue) 78%, transparent), color-mix(in oklab, var(--hue) 22%, transparent) 55%, transparent);
  opacity: calc(.3 + .7 * var(--lit)); }
.stone .star--hue { width: 30px; height: 30px; margin-bottom: auto; }
.stone-t { font: 700 26px/1.45 var(--font-heading); color: var(--ink); }
.stone-d { font-size: 17px; line-height: 1.75; color: var(--ink-muted); }
.stone--more { justify-content: center; gap: 16px; background: var(--bg-900); }
.more-l { font: 400 23px/1.6 var(--font-heading); color: var(--gold-200); }
.more { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .js .track .stage-pin { grid-template: auto minmax(0, 1fr) auto / minmax(0, 1fr); align-items: center; padding: calc(var(--bar) + 16px) 0 max(22px, env(safe-area-inset-bottom)); }
  .js .track .stage-top { grid-row: 1; align-self: start; padding: 0 var(--gutter); }
  .js .cards { grid-row: 2; position: relative; display: block; overflow: visible; padding: 0; height: min(60svh, 470px); }
  .js .stone { position: absolute; top: 0; left: 50%; height: 100%; min-height: 0; width: min(76vw, 360px); scroll-snap-align: none; will-change: transform, opacity; }
  .js .track .stage-bottom { grid-row: 3; padding-top: 18px; }
  .is-live .ticks { display: flex; }
  .ticks span { width: 24px; height: 2px; border-radius: 2px; background: var(--gold-500); opacity: .25; transform: scaleX(.5); transition: opacity 300ms ease, transform 300ms var(--ease-out); }
  .ticks span.is-on { opacity: 1; transform: none; }
}

/* ----- 2g. Comments ----- */
.stage--quotes { background: var(--bg-950); }
.plate--roses { top: auto; height: 62%; opacity: .5; -webkit-mask-image: linear-gradient(to top, transparent, #000 14%, #000 40%, transparent); mask-image: linear-gradient(to top, transparent, #000 14%, #000 40%, transparent); }
.plate--roses img { object-position: 60% 80%; }
.quote { margin: 0; }
.quote .star { width: 24px; height: 24px; margin: 0 auto; color: var(--gold-500); }
.quote blockquote { margin: 14px 0 0; font: 400 clamp(28px, 7.6cqi, 48px)/1.7 var(--font-heading); color: var(--ink); text-wrap: balance; text-shadow: 0 1px 16px rgba(7, 17, 13, .9); }
.quote figcaption { margin-top: 12px; font-size: 14px; color: var(--ink-muted); }
.src { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; font-size: 14px; color: var(--gold-200); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 6px; }
.src svg { width: 16px; height: 16px; }

/* ----- 2h. Steps: a three-point stepper fills as each step takes the centre ----- */
.stepper { list-style: none; margin: 22px auto 0; padding: 0; position: relative; display: flex; justify-content: space-between; width: min(72vw, 320px); }
.stepper::before, .stepper::after { content: ""; position: absolute; inset-inline: 20px; top: 50%; height: 1px; background: var(--line); }
.stepper::after { background: var(--gold-500); transform-origin: right center; transform: scaleX(calc(var(--x, 0) / (var(--n) - 1))); }
.stepper li { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-900);
  font: 600 16px/1 var(--font-body); color: var(--ink-muted); transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease, box-shadow 300ms ease; }
.stepper li.is-done { background: var(--gold-500); border-color: var(--gold-500); color: var(--on-gold); }
.stepper li.is-on { background: var(--bg-800); border-color: var(--gold-500); color: var(--gold-200); box-shadow: 0 0 0 6px rgba(201, 164, 92, .12), 0 0 24px rgba(201, 164, 92, .3); }
.stage:not(.is-live) .stepper { display: none; }
.step { position: relative; isolation: isolate; display: grid; justify-items: center; }
.step-big { display: block; margin-bottom: 6px; font: 700 64px/1 var(--font-body); color: var(--gold-500); }
.step-t { font: 700 clamp(34px, 9.5cqi, 60px)/1.4 var(--font-heading); color: var(--gold-200); text-wrap: balance; }
.step-d { margin: 10px auto 0; max-width: 22em; font-size: 19px; line-height: 1.8; color: var(--ink-muted); text-wrap: balance; }
@media (prefers-reduced-motion: no-preference) {
  .js .step-big { position: absolute; z-index: -1; left: 50%; top: 50%; translate: -50% -52%; margin: 0; font-size: clamp(200px, 60cqi, 360px); color: rgba(201, 164, 92, .08); }
}

/* ----- 2i. Final call: a warm light blooms; the page ends in the middle of the screen ----- */
.stage--final { background: var(--bg-950); }
.final-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(214, 181, 112, .28), rgba(201, 164, 92, .07) 55%, transparent) 50% 46% / min(150vw, 1000px) min(150vw, 1000px) no-repeat; }
.final-star { width: 30px; height: 30px; margin-bottom: 18px; }
.final-in { display: grid; justify-items: center; }
.final-h { font: 700 clamp(42px, 12cqi, 84px)/1.35 var(--font-heading); color: var(--gold-200); text-wrap: balance; text-shadow: 0 2px 20px rgba(7, 17, 13, .9); }
.final-b { margin: 10px auto 24px; max-width: 22em; font-size: 19px; line-height: 1.8; color: var(--ink); text-wrap: balance; }
.phone { margin-top: 18px; display: inline-grid; place-items: center; min-height: 48px; font: 600 22px/1.4 var(--font-body); color: var(--gold-200); text-decoration: none; letter-spacing: .02em; border-bottom: 1px solid var(--line); }
.foot { gap: 6px; }
.foot-copy { font-size: 14px; color: var(--ink-muted); }
@media (prefers-reduced-motion: no-preference) {
  .js .final-in [style*="--a"] { --on: clamp(0, (var(--q, 1) - var(--a)) * 8, 1); opacity: var(--on); transform: translate3d(0, calc((1 - var(--on)) * 18px), 0); }
  .js .final-glow { opacity: calc(var(--q, 1) * 1.8 - .3); transform: scale(calc(.75 + .25 * var(--q, 1))); }
  .js .final-star { transform: rotate(calc(var(--q, 1) * 90deg)); }
  .js .stage--final .foot { align-self: end; padding: 0 0 max(18px, env(safe-area-inset-bottom)); }
}

/* ============================================================
   3. Flow sections
   ============================================================ */
.flow { padding: 88px 0; background: var(--bg-900); }
.flow .head { margin-bottom: 28px; }
.js .reveal { transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal:not(.is-in) { opacity: 0; transform: translateY(16px); }

.pill { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line);
  background: linear-gradient(var(--bg-700), var(--bg-800)); font: 600 16px/1.4 var(--font-body); color: var(--ink); white-space: nowrap; }
.pill--flag img { width: 24px; height: 18px; border-radius: 3px; object-fit: cover; }
.pill--all { min-height: 50px; padding-inline: 24px; border-color: var(--gold-500); background: var(--bg-900); font: 700 21px/1.5 var(--font-heading); color: var(--gold-200); }
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(to left, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to left, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { list-style: none; margin: 0; padding: 0 5px; display: flex; gap: 10px; flex: none; animation: glide var(--speed) linear infinite; }
.marquee--rev .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track, .marquee:active .marquee-track { animation-play-state: paused; }
@keyframes glide { to { transform: translateX(100%); } }
.reach-bands { display: grid; gap: 10px; }
.reach-all { margin-top: 20px; text-align: center; }

.chan { list-style: none; margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 12px; max-width: 540px; }
.chan-card { display: flex; align-items: center; gap: 16px; padding: 12px; padding-inline-end: 18px; border-radius: 22px; border: 1px solid var(--line-soft); background: var(--bg-800); text-decoration: none;
  transition: border-color 200ms ease, transform 200ms var(--ease-out); }
.chan-card:active { transform: scale(.98); }
.tile { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 30%; border: 1px solid var(--line); background: linear-gradient(135deg, var(--bg-700), var(--bg-950)); color: var(--gold-200);
  box-shadow: 0 1px 0 #e8d5a31f inset, 0 10px 22px -12px #000; }
.tile svg { width: 26px; height: 26px; fill: currentColor; }
.chan-text { flex: 1; display: grid; }
.chan-name { font: 700 21px/1.4 var(--font-heading); color: var(--ink); }
.chan-handle { justify-self: start; font-size: 14px; color: var(--ink-muted); }
.chan-go { color: var(--gold-500); display: grid; }
.chan-go svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .chan-card:hover { border-color: var(--gold-500); } }
@media (min-width: 900px) { .chan { grid-template-columns: repeat(3, 1fr); max-width: 1040px; } .flow { padding: 128px 0; } }

/* ============================================================
   4. Reduced motion: everything readable, nothing moves
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; }
  .marquee-track[aria-hidden] { display: none; }
  .cue { display: none; }
}