/* Adhan Clock (mutaafaziz.com/adhan/). One day, scrolled: a fixed sky and a city in three depths sit behind
   the page, and the scroll position is the time of day. Each section is a prayer (data-time, in minutes) and
   its ink (data-ink) suits that prayer's sky. No font files may load, so the type is the system stack. */

:root {
  --night: #05070F;
  --navy: #0A1029;
  --indigo: #14204F;
  --plum: #3B2950;
  --gold: #E8C27A;
  --cream: #F6EAD0;
  --bg: #05070F;
  --ink: #F4F2EC;
  --mute: rgba(244, 242, 236, .72);
  --faint: rgba(244, 242, 236, .5);
  --line: rgba(244, 242, 236, .16);
  --accent: #E8C27A;
  --wash: rgba(244, 242, 236, .08);
  --thumb: #F6EAD0;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --arabic: "SF Arabic", "Geeza Pro", "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --pad: clamp(20px, 5vw, 48px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}
/* Daylight sections: navy ink on a bright sky. Only with the script, which paints that sky. When the live sky
   is dark (the demo dragged into the night, or mid-scroll), they take the night ink. The setup checklist (.panel)
   is day glass with navy ink, also only with the script; without it, it is night glass with cream ink. */
.js [data-ink="day"], .js .panel {
  --ink: #0A1029; --mute: rgba(10, 16, 41, .88); --faint: rgba(10, 16, 41, .78); --line: rgba(10, 16, 41, .16);
  --accent: #6E4F14; --wash: rgba(10, 16, 41, .07); --thumb: #0A1029; --bg: #EDE6D8;
}
.js[data-sky="night"] [data-ink="day"] {
  --ink: #F4F2EC; --mute: rgba(244, 242, 236, .72); --faint: rgba(244, 242, 236, .5); --line: rgba(244, 242, 236, .16);
  --accent: #E8C27A; --wash: rgba(244, 242, 236, .08); --thumb: #F6EAD0; --bg: #05070F;
}
/* And the other way: a night section scrolling in while the sky is still bright takes the navy ink. */
.js[data-sky="day"] [data-ink="night"]:not(.hero) {
  --ink: #0A1029; --mute: rgba(10, 16, 41, .88); --faint: rgba(10, 16, 41, .78); --line: rgba(10, 16, 41, .16);
  --accent: #6E4F14; --wash: rgba(10, 16, 41, .07); --thumb: #0A1029; --bg: #EDE6D8;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 64px; background: var(--night); }
body {
  margin: 0; background: var(--night); color: var(--ink);
  font: 400 17px/1.5 var(--sans); font-optical-sizing: auto; letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--gold); color: var(--navy); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.js [data-ink] :focus-visible { outline-color: var(--ink); }
[lang="ar"] { font-family: var(--arabic); letter-spacing: 0; font-weight: 400; }

.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 10px; background: var(--cream); color: var(--navy); font-weight: 600; }
.skip:focus { top: 12px; }

/* ---------- the world: sky, sun, moon, clouds and the city, behind everything ---------- */
.world {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, var(--s1, #050720) 0%, var(--s2, #0E1440) 58%, var(--s3, #1D1F52) 100%);
}
.w-stars { position: absolute; left: 0; top: -4%; width: 100%; height: 108%; opacity: var(--stars, 1); will-change: transform; }
.w-stars circle { fill: #F6EAD0; }
.w-stars .tw { animation: twinkle 5.5s ease-in-out infinite; }
.w-stars .tw2 { animation-duration: 7s; animation-delay: -2s; }
.w-stars .tw3 { animation-duration: 9s; animation-delay: -4.5s; }
@keyframes twinkle { 0%, 100% { opacity: .9; } 50% { opacity: .15; } }
.w-meteors { position: absolute; inset: 0; opacity: var(--stars, 1); }
.w-meteor { position: absolute; left: 68%; top: 9%; width: 160px; height: 1px; opacity: 0; background: linear-gradient(90deg, rgba(246, 234, 208, 0), rgba(246, 234, 208, .95)); transform: rotate(152deg); transform-origin: 100% 50%; animation: meteor 14s linear 5s infinite; }
@keyframes meteor {
  0% { opacity: 0; transform: rotate(152deg) translateX(0); }
  1% { opacity: 1; }
  6% { opacity: 0; transform: rotate(152deg) translateX(-420px); }
  100% { opacity: 0; transform: rotate(152deg) translateX(-420px); }
}
.w-glow { position: absolute; left: 0; right: 0; bottom: 0; height: 78%; background: radial-gradient(70% 62% at var(--gx, 50%) 100%, var(--glow, rgba(90, 63, 110, .6)) 0%, rgba(0, 0, 0, 0) 72%); }
.w-sun, .w-moon { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.w-sun {
  width: 104px; height: 104px; margin: -52px 0 0 -52px;
  background: radial-gradient(circle, #FFFDF5 0 34%, var(--sunc, #FFE9B8) 52%, rgba(255, 214, 140, 0) 71%);
  box-shadow: 0 0 140px 60px var(--sunglow, rgba(255, 210, 140, .3));
}
.w-moon { width: 46px; height: 46px; margin: -23px 0 0 -23px; box-shadow: inset 13px -6px 0 0 #F6EAD0; filter: drop-shadow(0 0 18px rgba(246, 234, 208, .5)); }
.w-cloud { position: absolute; left: 0; top: 0; border-radius: 50%; background: radial-gradient(closest-side, var(--cloud, rgba(255, 255, 255, .4)), rgba(255, 255, 255, 0)); will-change: transform; }
.w-layer { position: absolute; left: 0; bottom: 0; overflow: visible; will-change: transform; }
.w-far .s { fill: var(--far, #1A1B42); }
.w-mid .s { fill: var(--mid, #10123A); }
.w-near .s { fill: var(--near, #080A22); }
.w-layer .p { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.w-mid .p { stroke: var(--mid, #10123A); stroke-width: 2.4; }
.w-near .p { stroke: var(--near, #080A22); stroke-width: 3.6; }
.w-layer .win { fill: #FFD38A; opacity: var(--winop, 1); transition: fill 1.2s; }
.w-layer .lamp { fill: #FFE6B0; opacity: var(--lamp, .6); }
.ringing .w-layer .win { fill: #FFE2A6; }
.w-pulse { position: absolute; left: 50%; bottom: 20vh; width: 0; height: 0; opacity: 0; transition: opacity 1.4s; }
.w-pulse i { position: absolute; left: -45vmax; top: -45vmax; width: 90vmax; height: 90vmax; border-radius: 50%; border: 1px solid rgba(232, 194, 122, .55); box-shadow: 0 0 40px rgba(232, 194, 122, .12) inset; transform: scale(.05); opacity: 0; }
.ringing .w-pulse { opacity: 1; }
.ringing .w-pulse i { animation: pulse 5.4s cubic-bezier(.15, .6, .3, 1) infinite; }
.ringing .w-pulse i:nth-child(2) { animation-delay: 1.8s; }
.ringing .w-pulse i:nth-child(3) { animation-delay: 3.6s; }
@keyframes pulse { 0% { transform: scale(.04); opacity: .95; } 100% { transform: scale(1); opacity: 0; } }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 20; height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 max(var(--pad), env(safe-area-inset-right)) 0 max(var(--pad), env(safe-area-inset-left));
  color: #F4F2EC; background: rgba(5, 7, 15, .38); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(244, 242, 236, .1);
}
.nav-brand { display: flex; align-items: center; gap: 10px; color: #F4F2EC; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.nav-brand:hover { text-decoration: none; }
.nav-brand img { border-radius: 6px; }
.nav-time { display: none; }
.js .nav-time { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: baseline; gap: 8px; white-space: nowrap; font-size: 13px; color: rgba(244, 242, 236, .72); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.nav-time b { font-weight: 600; color: #F4F2EC; transition: color .6s; }
.nav-time.on b { color: var(--gold); }
.nav-end { display: flex; align-items: center; gap: 6px; }
.nav-open { height: 30px; display: flex; align-items: center; padding: 0 14px; border-radius: 999px; background: var(--gold); color: var(--navy); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.nav-open:hover { text-decoration: none; background: var(--cream); }

/* ---------- the day rail (wide screens) ---------- */
.rail { display: none; }
@media (min-width: 1360px) {
  .js .rail {
    position: fixed; right: max(28px, env(safe-area-inset-right)); top: 50%; z-index: 15; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 6px; --r-ink: #F4F2EC; --r-mute: rgba(244, 242, 236, .55); --r-on: #E8C27A;
  }
  .js[data-sky="day"] .rail { --r-ink: #0A1029; --r-mute: rgba(10, 16, 41, .6); --r-on: #0A1029; }
  .rail a { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 32px; color: var(--r-mute); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; transition: color .4s; }
  .rail a:hover { color: var(--r-ink); text-decoration: none; }
  .rail span { order: -1; opacity: .7; transition: opacity .4s; }
  .rail i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; transition: transform .4s var(--ease), background .4s; }
  .rail a[aria-current="true"] { color: var(--r-on); }
  .rail a[aria-current="true"] span { opacity: 1; }
  .rail a[aria-current="true"] i { background: currentColor; transform: scale(1.5); }
}

/* ---------- shared type ---------- */
main, .foot { position: relative; z-index: 1; }
section { position: relative; color: var(--ink); }
section[tabindex]:focus { outline: none; }
.head { max-width: 900px; margin: 0 auto; padding: 0 var(--pad); text-align: center; }
.head-left { text-align: left; margin: 0; padding: 0; }
.stamp { display: inline-flex; align-items: baseline; gap: 10px; margin-bottom: 22px; color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.stamp::before { content: ""; align-self: center; width: 22px; height: 1px; background: currentColor; opacity: .6; }
.stamp-ar { font-size: 17px; text-transform: none; }
.head-left .stamp { margin-bottom: 18px; }
.eyebrow { color: var(--accent); font-size: clamp(15px, 1.5vw, 19px); font-weight: 600; letter-spacing: -.01em; margin-bottom: 14px; }
h2 { font-size: clamp(40px, 6.6vw, 84px); font-weight: 600; line-height: 1.03; letter-spacing: -.038em; }
.lede { margin: 20px auto 0; max-width: 32ch; color: var(--mute); font-size: clamp(19px, 1.9vw, 23px); line-height: 1.4; letter-spacing: -.016em; }
.head-left .lede { margin-left: 0; }
.state { color: var(--faint); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; }
.state-ready { color: var(--accent); }
.more span { margin-left: .3em; }
.more { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.band { padding: clamp(140px, 22vh, 260px) 0; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 26px; border-radius: 999px; font-size: 17px; font-weight: 500; letter-spacing: -.01em; transition: background .2s, color .2s; }
.btn:hover { text-decoration: none; }
.btn-fill { background: var(--cream); color: var(--navy); }
.btn-fill:hover { background: #fff; }
.btn-text { color: var(--gold); padding: 0 18px; }
.btn-text:hover { color: var(--cream); }
.g { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tbtn { min-height: 44px; padding: 0 14px; color: var(--accent); font-size: 15px; font-weight: 500; border-radius: 999px; }
.tbtn:hover { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.tbtn[aria-pressed="true"] { color: var(--ink); }

/* ---------- glass: the demo is night glass, the setup is day glass ---------- */
.demo, .panel { position: relative; max-width: 1080px; margin: 0 auto; border-radius: 34px; -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%); }
.demo {
  --ink: #F4F2EC; --mute: rgba(244, 242, 236, .72); --faint: rgba(244, 242, 236, .52); --line: rgba(244, 242, 236, .16);
  --accent: #E8C27A; --wash: rgba(244, 242, 236, .08); --thumb: #F6EAD0; --bg: #0B1020;
  color: var(--ink); background: rgba(6, 9, 24, .66); box-shadow: 0 40px 120px -40px rgba(5, 7, 15, .7), inset 0 0 0 1px rgba(244, 242, 236, .08);
  padding: clamp(28px, 4vw, 48px) 0 clamp(28px, 4vw, 44px);
}
.panel { color: var(--ink); background: rgba(6, 9, 24, .66); box-shadow: 0 40px 120px -40px rgba(5, 7, 15, .7), inset 0 0 0 1px rgba(244, 242, 236, .08); padding: clamp(36px, 5vw, 64px) 0; }
.js .panel { background: rgba(251, 248, 241, .7); box-shadow: 0 40px 120px -40px rgba(60, 40, 10, .35), inset 0 0 0 1px rgba(255, 255, 255, .5); }

/* ---------- hero (Fajr) ---------- */
.hero { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 92px var(--pad) 26vh; text-align: center; }
.hero-in { position: relative; max-width: 1100px; }
.hero .stamp { margin-bottom: 30px; }
.hero-icon { width: clamp(88px, 10vw, 120px); height: auto; margin: 0 auto 30px; border-radius: 22%; box-shadow: 0 24px 60px -16px rgba(232, 194, 122, .35), 0 0 0 1px rgba(246, 234, 208, .08); }
.hero-name { color: var(--gold); font-size: clamp(19px, 2vw, 24px); font-weight: 600; letter-spacing: -.02em; margin-bottom: 10px; }
.hero h1 { font-size: clamp(52px, 9.4vw, 128px); font-weight: 600; line-height: 1; letter-spacing: -.038em; color: #F7F3EA; text-shadow: 0 2px 40px rgba(5, 7, 15, .35); }
.hero-sub { margin: 26px auto 0; max-width: 34ch; color: rgba(244, 242, 236, .76); font-size: clamp(19px, 2vw, 25px); line-height: 1.38; letter-spacing: -.018em; }
.hero-ctas { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
.rise { animation: rise 1.1s var(--ease) both; }
.d1 { animation-delay: .12s; } .d2 { animation-delay: .24s; } .d3 { animation-delay: .4s; } .d4 { animation-delay: .56s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* ---------- the living sky (sunrise): the demo ---------- */
.sky { padding: clamp(140px, 22vh, 260px) var(--pad); }
.sky .head { margin-bottom: clamp(48px, 6vw, 80px); padding: 0; }
.stage { position: relative; touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: ew-resize; }
.earth { display: flex; flex-direction: column; align-items: center; gap: clamp(36px, 5vh, 56px); padding: clamp(24px, 4vw, 48px) var(--pad) clamp(16px, 3vw, 32px); }
.readout { text-align: center; }
.clock { font-size: clamp(72px, 10vw, 140px); font-weight: 200; line-height: .95; letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: #F7F3EA; }
.clock .ap { font-size: .2em; font-weight: 500; letter-spacing: .06em; margin-left: .45em; vertical-align: .32em; color: rgba(244, 242, 236, .6); }
.status { margin-top: 14px; min-height: 1.5em; color: var(--mute); font-size: clamp(15px, 1.5vw, 18px); }
.status b { color: var(--gold); font-weight: 600; }
.status .ar { color: var(--cream); font-size: 1.12em; margin: 0 .2em; }
.home { display: flex; justify-content: center; gap: clamp(26px, 6vw, 84px); }
.home li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(244, 242, 236, .46); transition: color .5s; }
.home svg { width: clamp(34px, 3.4vw, 44px); height: auto; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: filter .5s; }
.home .dot { fill: currentColor; stroke: none; }
.home span { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.home li::before { content: ""; position: absolute; top: calc(clamp(34px, 3.4vw, 44px) / 2); left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; transform: scale(.5); pointer-events: none; }
.home li.lit { color: var(--gold); }
.home li.lit svg { filter: drop-shadow(0 0 10px rgba(232, 194, 122, .7)); }
.home li.lit::before { animation: call 2.6s ease-out infinite; }
@keyframes call { 0% { opacity: .7; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.6); } }

.console { max-width: 860px; margin: 0 auto; padding: 24px var(--pad) 0; }
.track { position: relative; height: 44px; }
.track-line { position: absolute; left: 12px; right: 12px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--line); }
.track-marks span { position: absolute; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--bg); }
.track input { position: absolute; inset: 0; width: 100%; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.track input::-webkit-slider-runnable-track { height: 44px; background: transparent; }
.track input::-moz-range-track { height: 44px; background: transparent; }
.track input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: 10px; border-radius: 50%; background: var(--thumb); box-shadow: 0 0 0 6px var(--wash), 0 2px 10px rgba(0, 0, 0, .3); }
.track input::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--thumb); box-shadow: 0 0 0 6px var(--wash), 0 2px 10px rgba(0, 0, 0, .3); }
.track input:focus-visible { outline: none; }
.track input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--gold); }
.track input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--gold); }

.prayers { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 22px; }
.pr { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 2px; border-radius: 14px; color: var(--mute); transition: color .25s; }
.pr:hover { color: var(--ink); }
.pr-en { font-size: clamp(14px, 1.6vw, 17px); font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.pr-ar { font-size: clamp(16px, 1.8vw, 20px); line-height: 1.5; }
.pr-t { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--faint); letter-spacing: 0; }
.pr[aria-current="true"] .pr-en, .pr[aria-current="true"] .pr-ar { color: var(--accent); }
.quiet-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin-top: 26px; }
.fine { margin: 18px auto 0; max-width: 62ch; text-align: center; color: var(--faint); font-size: 13px; line-height: 1.5; letter-spacing: 0; }

/* ---------- everywhere (Dhuhr) ---------- */
.where .head { margin-bottom: clamp(56px, 7vw, 96px); }
.tiles { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: repeat(5, 1fr); }
.tile { display: flex; flex-direction: column; padding: 0 clamp(16px, 2vw, 28px); border-left: 1px solid var(--line); }
.tile:first-child { border-left: 0; padding-left: 0; }
.tile:last-child { padding-right: 0; }
.tile-g { width: 40px; height: 40px; margin-bottom: 26px; fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.tile h3 { font-size: 24px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.tile p { margin-top: 8px; color: var(--mute); font-size: 16px; line-height: 1.45; }
.tile .state { margin-top: 18px; color: var(--faint); font-size: 11px; }
.tile .state-ready { color: var(--accent); }
.tile .more { margin-top: auto; padding-top: 14px; font-size: 16px; }
.masjid { max-width: 1240px; margin: clamp(56px, 8vh, 88px) auto 0; padding: 0 var(--pad); }
.masjid-in { display: grid; grid-template-columns: 40px 1fr auto; column-gap: 26px; align-items: center; padding-top: 34px; border-top: 1px solid var(--line); }
.masjid .tile-g { margin: 0; align-self: start; }
.masjid h3 { font-size: 24px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.masjid p { margin-top: 8px; max-width: 58ch; color: var(--mute); font-size: 16px; line-height: 1.45; }
.masjid .more { font-size: 16px; white-space: nowrap; }

/* ---------- set up (Asr) ---------- */
.setup { padding-left: var(--pad); padding-right: var(--pad); }
.setup-top, .picker, .levels, .finale { max-width: 1080px; margin-left: auto; margin-right: auto; padding-left: clamp(24px, 5vw, 64px); padding-right: clamp(24px, 5vw, 64px); }
.setup-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.meter { position: relative; flex: none; width: 120px; height: 120px; }
.meter svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.meter circle { fill: none; stroke-width: 2.5; }
.meter-bg { stroke: var(--line); }
.meter-fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 339.29; stroke-dashoffset: 339.29; transition: stroke-dashoffset .6s var(--ease); }
.meter-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.meter-txt > span:first-child { font-size: 30px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.meter-steps { color: var(--faint); font-size: 11px; letter-spacing: 0; }

.picker { margin-top: clamp(48px, 6vw, 72px); border: 0; padding-top: 0; padding-bottom: 0; }
.picker legend { padding: 0; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.opts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.opts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opts label { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px 0 14px; border-radius: 999px; background: var(--wash); color: var(--mute); font-size: 15px; cursor: pointer; transition: color .2s, background .2s; }
.opts label::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--faint); transition: background .2s, border-color .2s; }
.opts label:hover { color: var(--ink); }
.opts input:checked + label { color: var(--ink); }
.opts input:checked + label::before { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 2.5px var(--bg); }
.opts input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
.picker-hint { margin-top: 14px; color: var(--faint); font-size: 14px; letter-spacing: 0; }

.levels { margin-top: clamp(40px, 5vw, 56px); }
.level { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 20px 48px; padding: 36px 0; border-top: 1px solid var(--line); }
.level:last-child { border-bottom: 1px solid var(--line); }
.level-head { display: flex; align-items: flex-start; gap: 16px; }
.level-head h3 { font-size: 24px; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.level-head .state { margin-top: 6px; }
.mini { flex: none; width: 44px; height: 44px; transform: rotate(-90deg); }
.mini circle { fill: none; stroke-width: 2; }
.mini-bg { stroke: var(--line); }
.mini-fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 119.38; stroke-dashoffset: 119.38; transition: stroke-dashoffset .5s var(--ease); }
.mini text { transform: rotate(90deg); transform-origin: 22px 22px; fill: var(--mute); font: 600 15px var(--sans); }
.level.done .mini text { fill: var(--accent); }
.steps li { display: flex; align-items: flex-start; gap: 14px; padding: 7px 0; }
.steps input { flex: none; -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 50%; border: 1.5px solid var(--faint); background: transparent no-repeat center / 12px 12px; cursor: pointer; transition: background-color .2s, border-color .2s; }
.steps input:hover { border-color: var(--accent); }
.steps input:checked { border-color: var(--accent); background-color: var(--accent); background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20d%3D%22M2.5%206.2l2.3%202.3%204.7-5%22%20fill%3D%22none%22%20stroke%3D%22%23F6EAD0%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E); }
html:not(.js) .steps input:checked { background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20d%3D%22M2.5%206.2l2.3%202.3%204.7-5%22%20fill%3D%22none%22%20stroke%3D%22%230A1029%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E); }
.steps label { cursor: pointer; font-size: 17px; line-height: 1.45; transition: color .2s; }
.steps input:checked + label { color: var(--faint); }
.level-body .more { margin-top: 10px; }
.voice { margin-top: 18px; padding-left: 36px; }
.voice-q { display: block; font-size: 21px; font-weight: 500; letter-spacing: -.02em; line-height: 1.35; }
.voice-a { display: block; margin-top: 4px; color: var(--mute); font-size: 15px; }
.finale { margin-top: 44px; text-align: center; }
.finale p { font-size: 19px; color: var(--mute); }
.finale strong { color: var(--accent); font-weight: 600; }
.finale .tbtn { margin-top: 8px; }

/* ---------- privacy (Maghrib) ---------- */
.privacy .head { margin-bottom: clamp(56px, 7vw, 96px); }
.vows, .asks { max-width: 1080px; margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.vows h3, .asks h3 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: -.028em; line-height: 1.18; }
.vows p, .asks p { margin-top: 12px; color: var(--mute); font-size: 17px; line-height: 1.5; }

/* ---------- support (Isha) ---------- */
.support { padding: clamp(140px, 22vh, 260px) 0 clamp(200px, 34vh, 360px); }
.support .head { margin-bottom: clamp(56px, 7vw, 88px); }
.asks { text-align: center; }
.asks a { white-space: nowrap; }
.share { max-width: 760px; margin: clamp(64px, 8vw, 104px) auto 0; padding: 0 var(--pad); display: flex; flex-wrap: wrap; justify-content: center; gap: 22px clamp(14px, 3vw, 32px); }
.sh { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 64px; color: #F4F2EC; }
.sh:hover { text-decoration: none; }
.sh-c { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(246, 234, 208, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .2s, color .2s; }
.sh:hover .sh-c { background: rgba(246, 234, 208, .2); }
.sh svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sh-l { font-size: 12px; color: rgba(244, 242, 236, .7); letter-spacing: 0; }
.sh.ok .sh-c { background: var(--gold); color: var(--navy); }
.sh.ok .sh-l { color: var(--gold); }

/* ---------- footer ---------- */
.foot { padding: 32px var(--pad) calc(32px + env(safe-area-inset-bottom)); text-align: center; background: var(--night); border-top: 1px solid rgba(244, 242, 236, .1); font-size: 14px; }
.foot a { color: rgba(244, 242, 236, .64); }
.foot a:hover { color: #F4F2EC; }

/* ---------- tablet ---------- */
@media (max-width: 1080px) {
  .tiles { grid-template-columns: 1fr; max-width: 720px; }
  .tile { display: grid; grid-template-columns: 40px 1fr auto; column-gap: 22px; align-items: start; padding: 28px 0; border-left: 0; border-top: 1px solid var(--line); }
  .tile:first-child { padding-left: 0; }
  .tile:last-child { border-bottom: 1px solid var(--line); }
  .tile-g { grid-row: 1 / span 4; margin: 2px 0 0; }
  .tile h3, .tile p, .tile .state { grid-column: 2; }
  .tile h3 { font-size: 21px; }
  .tile p { margin-top: 4px; }
  .tile .state { margin-top: 8px; }
  .tile .more { grid-column: 3; grid-row: 1 / span 3; margin: 0; padding: 0; align-self: center; white-space: nowrap; }
  .masjid { max-width: 720px; margin-top: 0; }
  .masjid-in { column-gap: 22px; padding: 28px 0; border-top: 0; border-bottom: 1px solid var(--line); }
  .masjid h3 { font-size: 21px; }
  .masjid p { margin-top: 4px; }
  .level { grid-template-columns: 1fr; }
  .level-body { padding-left: 60px; }
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
  .nav-brand span { display: none; }
  .sky { padding-left: 12px; padding-right: 12px; }
  .sky .head { padding: 0 8px; }
  .setup { padding-left: 12px; padding-right: 12px; }
  .demo, .panel { border-radius: 26px; }
  .earth { gap: 32px; }
  .home { gap: 22px; width: 100%; justify-content: space-around; }
  .status { padding: 0 8px; }
  .console { padding-top: 16px; padding-left: 16px; padding-right: 16px; }
  .pr { padding: 8px 0; }
  .tile { grid-template-columns: 32px 1fr; column-gap: 16px; }
  .tile-g { width: 32px; height: 32px; }
  .tile .more { grid-column: 2; grid-row: auto; margin-top: 4px; min-height: 40px; }
  .masjid-in { grid-template-columns: 32px 1fr; column-gap: 16px; }
  .masjid .tile-g { width: 32px; height: 32px; }
  .masjid .more { grid-column: 2; margin-top: 4px; min-height: 40px; white-space: normal; }
  .setup-top { align-items: flex-start; gap: 16px; }
  .setup-top, .picker, .levels, .finale { padding-left: 20px; padding-right: 20px; }
  .meter { width: 76px; height: 76px; margin-top: 34px; }
  .meter-txt > span:first-child { font-size: 19px; }
  .meter-steps { display: none; }
  .level { padding: 30px 0; }
  .level-body { padding-left: 0; }
  .voice { padding-left: 0; }
  .vows, .asks { grid-template-columns: 1fr; gap: 40px; }
  .vows { text-align: left; }
  .share { gap: 22px 8px; max-width: 360px; }
  .share li { width: 30%; display: flex; justify-content: center; }
  .w-sun { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
  .w-moon { width: 36px; height: 36px; margin: -18px 0 0 -18px; box-shadow: inset 10px -5px 0 0 #F6EAD0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .w-stars .tw, .home li.lit::before, .w-meteor { animation: none; }
  .home li.lit::before { opacity: .5; transform: scale(1.1); }
  .ringing .w-pulse i { animation: none; opacity: .5; }
  .ringing .w-pulse i:nth-child(1) { transform: scale(.12); }
  .ringing .w-pulse i:nth-child(2) { transform: scale(.24); opacity: .3; }
  .ringing .w-pulse i:nth-child(3) { transform: scale(.38); opacity: .15; }
  * { transition-duration: .01ms !important; }
}

/* Touch screens: no live blur over a moving sky (it is redone every scroll frame); a denser glass instead. */
@media (pointer: coarse) {
  .demo, .panel, .sh-c { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .demo { background: rgba(6, 9, 24, .84); }
  .js .panel { background: rgba(251, 248, 241, .9); }
}