/* الذاكرين · Zakirin website. One page that walks through a day, counted on a misbaha. */

@font-face { font-family: "Plex Arabic"; src: url(../fonts/plex_arabic_regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url(../fonts/plex_arabic_medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url(../fonts/plex_arabic_semibold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url(../fonts/plex_arabic_bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Amiri"; src: url(../fonts/amiri_regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Amiri"; src: url(../fonts/amiri_bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Amiri Quran"; src: url(../fonts/amiri_quran.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Scheherazade New"; src: url(../fonts/scheherazade_regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* Rawdah, the logo palette */
  --night: #0B1F1A;
  --night-2: #0C1714;
  --night-3: #06110E;
  --green: #0F4D3F;
  --green-2: #1E6655;
  --green-lite: #5DBB9B;
  --cream: #F5F1E8;
  --paper: #FFFDF8;
  --ink: #15231F;
  --muted: #55635D;
  --line: #DED6C4;
  --tint: #E7EFE9;
  --gold: #F2CC75;
  --gold-deep: #E7B95A;
  --flame: #D99A2B;
  --copper: #8C6420;
  --gold-ink: #D6AA55;
  --violet: #4F5BB8;
  --violet-lite: #A9B1F5;
  --teal: #2A8A76;
  --sleep: #2F5D7A;
  --wake: #B4672B;
  --silver: #C3D3E3;

  --f-ui: "Plex Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --f-azkar: "Amiri", "Traditional Arabic", serif;
  --f-quran: "Amiri Quran", "Amiri", serif;

  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.4, .5, 1);

  --gutter: 20px;
  --thread-space: 0px;
  --wrap: 1120px;
  --head-h: 64px;
}
@media (min-width: 1024px) {
  :root { --thread-space: 92px; --gutter: 28px; --head-h: 72px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 16px); }
@media (max-width: 1023px) { html { scroll-padding-bottom: 80px; } }
body {
  margin: 0;
  font-family: var(--f-ui);
  font-size: 17px;
  line-height: 1.75;
  color: var(--cream);
  background: var(--night-3);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, canvas { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:root { --focus: #F2CC75; }
[data-tone="light"] { --focus: #0F4D3F; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
::selection { background: rgba(242, 204, 117, .45); color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 22px; height: 22px; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; top: -60px; right: 16px; z-index: 100; padding: 10px 16px; background: var(--gold); color: var(--ink); border-radius: 12px; text-decoration: none; font-weight: 600; transition: top .2s; }
.skip:focus { top: 12px; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter) - 2 * var(--thread-space)); margin-inline: auto; position: relative; }

/* ---------- type ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; letter-spacing: 0;
  color: var(--gold);
}
.kicker::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6d8, currentColor 60%);
  box-shadow: 0 0 12px currentColor;
}
[data-tone="light"] .kicker { color: var(--copper); }
.kicker--soft { color: var(--violet-lite); }
.badge { font-size: 12px; padding: 2px 10px; border-radius: 99px; background: var(--copper); color: #fff; font-weight: 600; }
.h2 { font-size: clamp(34px, 4.4vw, 62px); line-height: 1.18; font-weight: 700; margin: 14px 0 18px; text-wrap: balance; }
.h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.3; font-weight: 700; margin: 10px 0 12px; }
.lead { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.9; opacity: .82; max-width: 34em; text-wrap: pretty; }
.aya { font-family: var(--f-quran); font-weight: 400; }
.ref { font-size: 13px; opacity: .7; }
.head-center { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: clamp(36px, 6vh, 64px); }
.head-center .lead { margin-inline: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px; font-weight: 600; font-size: 17px; text-decoration: none;
  transition: transform .35s var(--spring), box-shadow .3s, background-color .3s, color .3s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn--sm { padding: 9px 18px; font-size: 15px; }
.btn--gold { background: var(--gold); color: #2A1C0A; box-shadow: 0 8px 24px -10px rgba(242, 204, 117, .8); }
.btn--primary { background: var(--green); color: var(--cream); box-shadow: 0 12px 30px -14px rgba(15, 77, 63, .9); }
.btn--wide { width: 100%; padding-block: 17px; }
.btn .i { width: 20px; height: 20px; }
.linkish { color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.stores--center { justify-content: center; }
.store {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  padding: 10px 20px 10px 22px; border-radius: 18px;
  background: rgba(245, 241, 232, .08); border: 1px solid rgba(245, 241, 232, .22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .35s var(--spring), background-color .3s, border-color .3s;
}
.store:hover { transform: translateY(-3px); background: rgba(245, 241, 232, .14); border-color: rgba(242, 204, 117, .6); }
.store span { display: flex; flex-direction: column; line-height: 1.25; text-align: right; }
.store small { font-size: 12px; opacity: .75; }
.store b { font-size: 17px; font-weight: 600; direction: ltr; text-align: right; }
.store .i { width: 26px; height: 26px; color: var(--gold); }
.store--light { background: var(--cream); color: var(--ink); border-color: transparent; }
.store--light:hover { background: #fff; }
.store--light .i { color: var(--green); }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--head-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-inline: max(var(--gutter), env(safe-area-inset-right)) max(var(--gutter), env(safe-area-inset-left));
  transition: background-color .45s, box-shadow .45s, color .45s, transform .5s var(--ease);
  color: var(--cream);
}
.site-header.is-scrolled { background: rgba(8, 22, 18, .66); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 rgba(245, 241, 232, .08); }
.site-header[data-tone="light"] { color: var(--ink); }
.site-header[data-tone="light"].is-scrolled { background: rgba(250, 247, 240, .74); box-shadow: 0 1px 0 rgba(21, 35, 31, .08); }
.site-header.is-hidden { transform: translateY(-100%); }
.brand { position: relative; height: 40px; width: 140px; flex: none; }
.lockup { position: absolute; inset: 0; height: 100%; width: auto; transition: opacity .45s; }
.lockup--light { opacity: 0; }
.site-header[data-tone="light"] .lockup--light { opacity: 1; }
.site-header[data-tone="light"] .lockup--dark { opacity: 0; }
.nav { display: none; gap: 4px; margin-inline-start: auto; }
.nav a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 99px; font-size: 15px; font-weight: 500; opacity: .82; transition: background-color .25s, opacity .25s; }
.nav a:hover { opacity: 1; background: rgba(127, 127, 127, .14); }
.nav a[aria-current="true"] { opacity: 1; background: rgba(127, 127, 127, .16); font-weight: 600; }
.tools { display: flex; align-items: center; gap: 8px; }
.tool {
  height: 44px; min-width: 44px; padding: 0 10px; border-radius: 99px; display: inline-grid; place-items: center;
  border: 1px solid currentColor; border-color: rgba(127, 127, 127, .35); font-size: 14px; font-weight: 600;
  transition: background-color .25s, border-color .25s;
}
.tool:hover { background: rgba(127, 127, 127, .14); }
.tool .i { width: 18px; height: 18px; grid-area: 1 / 1; transition: opacity .3s, transform .4s var(--spring); }
.tool .i--on { opacity: 0; transform: scale(.6); }
.tool[aria-pressed="true"] .i--on { opacity: 1; transform: none; }
.tool[aria-pressed="true"] .i--off { opacity: 0; transform: scale(.6); }
.tool[aria-pressed="true"][data-sound] { border-color: var(--gold); color: var(--gold); }
.site-header[data-tone="light"] .tool[aria-pressed="true"][data-sound] { border-color: var(--copper); color: var(--copper); }
.tool__ar, .tool__en { grid-area: 1 / 1; transition: opacity .3s, transform .4s var(--spring); }
.tool[data-digits][aria-pressed="false"] .tool__ar, .tool[data-digits][aria-pressed="true"] .tool__en { opacity: 0; transform: translateY(6px); }
@media (max-width: 640px) {
  .tools .btn { display: none; }
  .brand { width: 118px; height: 34px; }
}
@media (min-width: 1100px) { .nav { display: flex; } }

/* ---------- the page misbaha ---------- */
.thread { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 40; pointer-events: none; }
.thread-ui { position: fixed; inset: 0; z-index: 41; pointer-events: none; }
.thread-count {
  position: absolute; left: 62px; top: 50%; transform: translateY(-50%);
  display: none; flex-direction: column; line-height: 1.15; font-variant-numeric: tabular-nums;
  transition: color .5s, opacity .4s;
}
.thread-count b { font-size: 17px; font-weight: 700; }
.thread-count span { font-size: 12px; opacity: .8; }
.thread-count.is-tick b { animation: tick .5s var(--spring); }
@keyframes tick { 0% { transform: translateY(6px); opacity: .2; } 100% { transform: none; opacity: 1; } }
.thread-labels { position: absolute; inset: 0; }
.thread-label {
  position: absolute; left: 58px; top: 0; padding: 5px 12px; border-radius: 99px; font-size: 13px; font-weight: 600; white-space: nowrap;
  background: rgba(8, 22, 18, .82); color: var(--cream); border: 1px solid rgba(242, 204, 117, .35);
  opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .4s var(--ease);
  pointer-events: none;
}
.thread-label.is-current { background: var(--gold); color: #2A1C0A; border-color: var(--gold); }
.thread-ui.is-overview .thread-label { opacity: 1; transform: none; pointer-events: auto; cursor: pointer; }
.thread-ui.is-overview .thread-count { opacity: 0; }
.thread-hit { position: fixed; left: 0; top: var(--head-h); bottom: 0; width: 84px; z-index: 42; display: none; cursor: pointer; }
@media (min-width: 1024px) {
  .thread-count { display: flex; }
  .thread-hit { display: block; }
}
.count-pill {
  position: fixed; left: 14px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 45;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 7px 14px 7px 10px; border-radius: 99px;
  background: rgba(8, 22, 18, .78); color: var(--cream); border: 1px solid rgba(242, 204, 117, .35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 14px; font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .45s var(--spring);
}
.count-pill.is-on { opacity: 1; transform: none; }
.count-pill span { opacity: .65; font-size: 12px; }
.count-pill__bead { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF3CF, var(--gold) 55%, var(--flame)); }
.count-pill.is-tick .count-pill__bead { animation: pop .45s var(--spring); }
@keyframes pop { 0% { transform: scale(1.6); } 100% { transform: none; } }
@media (min-width: 1024px) { .count-pill { display: none; } }
.sheet-nav { position: fixed; inset: 0; z-index: 70; background: rgba(4, 10, 8, .5); display: flex; align-items: flex-end; opacity: 0; transition: opacity .3s; }
.sheet-nav.is-open { opacity: 1; }
.sheet-nav[hidden] { display: none; }
.sheet-nav__panel { width: 100%; max-height: 80svh; overflow: auto; background: var(--night-2); border-radius: 28px 28px 0 0; padding: 14px 20px max(20px, env(safe-area-inset-bottom)); transform: translateY(40px); transition: transform .45s var(--ease); border-top: 1px solid rgba(242, 204, 117, .2); }
.sheet-nav.is-open .sheet-nav__panel { transform: none; }
.sheet-nav__panel::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: rgba(245, 241, 232, .25); margin: 0 auto 12px; }
.sheet-nav__title { font-weight: 700; margin-bottom: 6px; }
.sheet-nav__list { position: relative; padding-inline-start: 26px; }
.sheet-nav__list::before { content: ""; position: absolute; inset: 14px auto 14px 0; right: 8px; width: 2px; background: rgba(245, 241, 232, .25); }
.sheet-nav__list a { display: flex; align-items: center; gap: 12px; padding: 9px 0; text-decoration: none; font-size: 16px; position: relative; }
.sheet-nav__list a::before { content: ""; position: absolute; right: -24px; width: 14px; height: 14px; border-radius: 50%; background: var(--cream); box-shadow: inset -2px -3px 4px rgba(0, 0, 0, .25); }
.sheet-nav__list a.is-past::before { background: var(--gold); }
.sheet-nav__list a.is-current { color: var(--gold); font-weight: 700; }

/* ---------- reveal ---------- */
[data-in] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
[data-in].in { opacity: 1; transform: none; }

/* ---------- pinned scenes ---------- */
.pin { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
[data-pin="hero"] { height: 200vh; }
[data-pin="rope"] { height: 340vh; }
[data-pin="doze"] { height: 320vh; }
[data-pin="screens"] { height: 300vh; }
[data-pin="finale"] { height: 190vh; }

/* ================= 1 · hero ================= */
.hero { background: var(--night-3); }
.hero__stage { display: grid; align-items: center; }
.hero__sky { position: absolute; inset: 0; background: radial-gradient(120% 90% at 28% 105%, #133a30 0%, #0B1F1A 42%, #050E0B 100%); }
.hero__dawn { position: absolute; inset: 0; opacity: var(--dawn, 0); background: radial-gradient(90% 55% at 50% 118%, rgba(217, 154, 43, .62), rgba(180, 103, 43, .2) 42%, transparent 72%), linear-gradient(180deg, transparent 40%, rgba(47, 93, 122, .25)); }
.stars {
  position: absolute; inset: 0; opacity: .75;
  background-image:
    radial-gradient(1.4px 1.4px at 8% 14%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 18% 32%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 27% 9%, #fff8e0 50%, transparent 51%), radial-gradient(1px 1px at 36% 24%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 44% 6%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 52% 18%, #fff 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 61% 11%, #fff4d6 50%, transparent 51%), radial-gradient(1px 1px at 69% 29%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 77% 7%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 85% 21%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 93% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 5% 41%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 14% 55%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 91% 44%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 97% 58%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 58% 38%, #fff 50%, transparent 51%);
  animation: twinkle 7s ease-in-out infinite alternate;
}
.stars--b {
  opacity: .5; animation-duration: 11s; animation-delay: -4s;
  background-image:
    radial-gradient(1px 1px at 11% 25%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 23% 17%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 44%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 48% 27%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 57% 4%, #fff 50%, transparent 51%), radial-gradient(1.1px 1.1px at 66% 47%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 74% 16%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 82% 35%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 3% 70%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 96% 75%, #fff 50%, transparent 51%);
}
@keyframes twinkle { 0% { opacity: .35; } 100% { opacity: .85; } }
.hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: clamp(24px, 4vw, 64px); padding-top: var(--head-h); height: 100%; }
.hero__copy { position: relative; z-index: 2; will-change: transform, opacity; }
.hero__aya { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; color: var(--gold); margin-bottom: 18px; }
.hero__aya .aya { font-size: clamp(20px, 1.9vw, 27px); }
.hero__title { font-size: clamp(44px, 6.3vw, 94px); line-height: 1.12; font-weight: 700; letter-spacing: 0; margin-bottom: 22px; }
.hero__title .line { display: block; }
.hero__title .line > span { display: inline-block; }
.line--gold { color: var(--gold); text-shadow: 0 0 40px rgba(242, 204, 117, .28); }
.hero__lead { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.95; color: rgba(245, 241, 232, .8); max-width: 33em; margin-bottom: 30px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 24px; font-size: 15px; color: rgba(245, 241, 232, .72); }
.hero__facts li { display: inline-flex; align-items: center; gap: 8px; }
.hero__facts .i { width: 18px; height: 18px; color: var(--gold); }
.hero__mark { position: relative; justify-self: center; height: min(66vh, 600px); aspect-ratio: 120 / 174; z-index: 1; }
.lamp { width: 100%; height: 100%; overflow: visible; }
.lamp__arch { display: none; }
.lamp__swing { transform-origin: 100px 34px; animation: sway 7s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
.lamp__flame { transform-box: fill-box; transform-origin: 50% 92%; animation: flicker 2.6s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(.94, 1.06); } 55% { transform: scale(1.04, .95); } 80% { transform: scale(.97, 1.03); } }
.lamp__halo { transform-box: fill-box; transform-origin: center; animation: breathe 4.5s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
/* intro: the arch builds on the canvas, then chain, lamp and light */
.hero .lamp__link, .hero .lamp__chain, .hero .lamp__lamp, .hero .lamp__pool { opacity: 0; }
.hero.is-in .lamp__chain { animation: fadeIn .5s .85s var(--ease) forwards; }
.hero.is-in .lamp__link { transform-box: fill-box; transform-origin: center; animation: beadIn .5s var(--spring) forwards; }
.hero.is-in .lamp__link:nth-of-type(1) { animation-delay: .9s; }
.hero.is-in .lamp__link:nth-of-type(2) { animation-delay: 1s; }
.hero.is-in .lamp__link:nth-of-type(3) { animation-delay: 1.1s; }
.hero.is-in .lamp__lamp { animation: lampIn 1.1s 1.15s var(--ease) forwards; }
.hero.is-in .lamp__pool { transform-box: fill-box; transform-origin: center; animation: poolIn 1.6s 1.6s var(--ease) forwards; }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes beadIn { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }
@keyframes lampIn { 0% { opacity: 0; transform: translateY(-8px); filter: brightness(.3); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes poolIn { 0% { opacity: 0; transform: scaleX(.2); } 100% { opacity: 1; transform: none; } }
.hero [data-in] { transform: translateY(18px); }
.hero__title .line[data-in] { transform: none; opacity: 1; }
.hero__title .line > span { opacity: 0; transform: translateY(.45em); filter: blur(6px); transition: opacity .9s var(--ease), transform 1s var(--ease), filter .9s var(--ease); }
.hero.is-in .hero__title .line > span { opacity: 1; transform: none; filter: none; }
.hero.is-in .hero__title .line:first-child > span:nth-child(1) { transition-delay: .35s; }
.hero.is-in .hero__title .line:first-child > span:nth-child(2) { transition-delay: .45s; }
.hero.is-in .hero__title .line:first-child > span:nth-child(3) { transition-delay: .55s; }
.hero.is-in .hero__title .line:last-child > span:nth-child(1) { transition-delay: .8s; }
.hero.is-in .hero__title .line:last-child > span:nth-child(2) { transition-delay: .92s; }
.hero.is-in .hero__aya { transition-delay: .15s; }
.hero.is-in .hero__lead { transition-delay: 1.05s; }
.hero.is-in .stores { transition-delay: 1.2s; }
.hero.is-in .hero__facts { transition-delay: 1.35s; }
.hero.is-in [data-in] { opacity: 1; transform: none; }
.cue {
  position: absolute; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; z-index: 3;
  color: rgba(245, 241, 232, .7); font-size: 13px; white-space: nowrap;
  opacity: 0; transition: opacity 1s 1.8s;
}
.hero.is-in .cue { opacity: var(--cue, 1); transition-delay: 0s; }
.cue__thread { position: relative; width: 2px; height: 46px; background: rgba(245, 241, 232, .28); border-radius: 2px; }
.cue__thread i { position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF3CF, var(--gold) 55%, var(--flame)); animation: slide 2.2s var(--ease-io) infinite; }
@keyframes slide { 0% { transform: translateY(-4px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(40px); opacity: 0; } }

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); align-content: center; text-align: center; gap: 6px; padding-top: calc(var(--head-h) + 4px); padding-bottom: 70px; }
  .hero__mark { order: -1; height: clamp(150px, 27svh, 260px); }
  .hero__aya { justify-content: center; margin-bottom: 10px; }
  .hero__lead { margin-inline: auto; margin-bottom: 20px; font-size: 16px; line-height: 1.85; }
  .hero__title { margin-bottom: 14px; }
  .stores { justify-content: center; }
  .hero__facts { justify-content: center; margin-top: 16px; font-size: 14px; }
  .cue__text { display: none; }
}
@media (max-width: 860px) and (max-height: 760px) {
  .hero__facts { display: none; }
  .hero__lead { font-size: 15px; }
}
@media (max-width: 480px) {
  .stores { flex-wrap: nowrap; gap: 8px; }
  .store { padding: 8px 12px; gap: 8px; border-radius: 16px; }
  .store b { font-size: 15px; }
  .store small { font-size: 11px; }
  .store .i { width: 22px; height: 22px; }
}

/* ================= 2 · rope ================= */
.rope { background: #0B1C1D; }
.rope__sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--sky-a, #0B1F1A), var(--sky-b, #0E1D2A)); }
.rope__stars { position: absolute; inset: 0; opacity: var(--star-o, 1); background: inherit; }
.rope__stars::before, .rope__stars::after { content: ""; position: absolute; inset: 0; }
.rope__stars::before { background-image: radial-gradient(1.3px 1.3px at 7% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 19% 30%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 31% 8%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 46% 22%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 63% 10%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 71% 33%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 84% 15%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 94% 28%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 55% 4%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 12% 48%, #fff 50%, transparent 51%); }
.rope__stars::after { background-image: radial-gradient(1px 1px at 25% 18%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 38% 36%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 52% 14%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 77% 6%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 89% 40%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 3% 26%, #fff 50%, transparent 51%); animation: twinkle 6s ease-in-out infinite alternate; }
.rope__sun { position: absolute; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; left: var(--sun-x, 50%); top: var(--sun-y, 120%); opacity: var(--sun-o, 0); background: radial-gradient(circle, rgba(255, 236, 190, .55) 0, rgba(242, 204, 117, .22) 30%, rgba(242, 204, 117, 0) 68%); }
.rope__moon { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; left: var(--moon-x, 50%); top: var(--moon-y, 120%); opacity: var(--moon-o, 0); color: #E9EEF5; filter: drop-shadow(0 0 18px rgba(195, 211, 227, .55)); }
.rope__moon .i { width: 100%; height: 100%; }
.rope__horizon { position: absolute; inset: auto 0 0 0; height: 55%; opacity: var(--hz-o, 0); background: radial-gradient(70% 90% at var(--hz-x, 50%) 100%, var(--hz-c, rgba(217, 154, 43, .55)), transparent 70%); }
.rope__inner { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: clamp(8px, 2vh, 22px); padding-top: var(--head-h); }
.rope__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.rope__head .h2 { margin: 8px 0 8px; }
.rope__head .lead { max-width: 30em; }
.rope__clock { display: flex; flex-direction: column; align-items: flex-end; text-align: left; flex: none; }
.rope__time { font-size: clamp(34px, 4.6vw, 64px); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--gold); text-shadow: 0 0 30px rgba(242, 204, 117, .25); }
.rope__period { font-size: 15px; margin-top: 10px; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.rope__scene { position: relative; width: 100%; }
.rope__scene svg { position: absolute; inset: 0; overflow: visible; }
.rope-label { position: absolute; top: 0; text-align: center; font-size: 13px; line-height: 1.35; color: rgba(245, 241, 232, .92); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); transition: color .5s; white-space: nowrap; pointer-events: none; }
.rope-label.is-done { color: var(--gold); }
.rope-label.is-missed { color: rgba(245, 241, 232, .8); }
.rope-label--big b { display: block; font-size: 19px; font-weight: 700; color: var(--cream); }
.rope-label--big span { font-size: 13px; }
.rope-label--big.is-done span { color: var(--gold); }
.rope-label--night.is-done span { color: var(--silver); }
.rope-hit { position: absolute; top: 0; border-radius: 16px; }
.rope-hit:focus-visible { outline-offset: -4px; }
.rope-tip {
  position: absolute; z-index: 3; width: min(320px, 86vw); padding: 14px 16px; border-radius: 18px;
  background: rgba(6, 16, 14, .82); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 14px; line-height: 1.7; color: rgba(245, 241, 232, .92);
  opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .25s, transform .35s var(--ease); pointer-events: none;
}
.rope-tip.is-on { opacity: 1; transform: none; }
.rope-tip b { display: block; font-size: 16px; color: var(--cream); }
.rope-tip em { font-style: normal; color: var(--gold); }
.rope__captions { position: relative; min-height: calc(4.2em + 28px); max-width: 46em; border-radius: 20px; background: rgba(5, 12, 10, .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cap { position: absolute; inset: 14px 20px auto 20px; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.85; color: rgba(245, 241, 232, .94); opacity: 0; transform: translateY(12px); transition: opacity .55s var(--ease), transform .7s var(--ease); }
.cap b { color: var(--gold); font-weight: 600; }
.cap.is-on { opacity: 1; transform: none; }
.rope__after { padding: clamp(40px, 8vh, 90px) 0 clamp(90px, 14vh, 150px); }
.rope__rule { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.8; margin-bottom: 36px; max-width: 46em; }
.rule-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.rule-dot--gold { background: var(--gold); box-shadow: 0 0 14px var(--gold); }
.rule-dot--silver { background: var(--silver); box-shadow: 0 0 14px var(--silver); }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tcard { background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .1); border-radius: 28px; padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 10px; }
.tcard:nth-child(2) { --d: .1s; }
.tcard:nth-child(3) { --d: .2s; }
.tcard h3 { font-size: 21px; font-weight: 700; }
.tcard p { font-size: 15.5px; line-height: 1.8; color: rgba(245, 241, 232, .72); }
.mock-cta { margin-top: auto; padding-top: 12px; }
.mock-cta span { display: block; text-align: center; padding: 14px 18px; border-radius: 99px; background: rgba(245, 241, 232, .88); color: var(--green); font-weight: 600; font-size: 16px; }
.prayer { margin-top: auto; padding: 16px; border-radius: 22px; background: #14231F; border: 1px solid rgba(255, 255, 255, .08); }
.prayer__row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.prayer__name { font-size: 22px; font-weight: 700; }
.prayer__name b { font-size: 26px; margin-inline-start: 6px; font-variant-numeric: tabular-nums; }
.prayer__left { color: var(--gold-ink); font-weight: 600; font-size: 14px; }
.prayer__times { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.prayer__times li { display: flex; flex-direction: column; align-items: center; padding: 8px 2px; border-radius: 14px; background: rgba(255, 255, 255, .05); font-size: 12px; line-height: 1.4; }
.prayer__times b { font-size: 14px; font-variant-numeric: tabular-nums; }
.prayer__times .past { opacity: .72; }
.prayer__times .on { background: var(--gold-ink); color: #1F1608; animation: glowPulse 2.6s ease-in-out infinite; }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(214, 170, 85, .0); } 50% { box-shadow: 0 0 0 6px rgba(214, 170, 85, .18); } }
.prayer__city { font-size: 12px; opacity: .8; margin-top: 8px; text-align: left; }
.streak { margin-top: auto; display: flex; justify-content: space-between; gap: 6px; padding-top: 8px; }
.streak svg { width: 100%; max-width: 46px; aspect-ratio: 1; overflow: visible; }
.streak .arc { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease); }
.streak figure { margin: 0; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: rgba(245, 241, 232, .6); }
@media (max-width: 900px) {
  .cards3 { grid-template-columns: minmax(0, 1fr); }
  .rope__head { flex-direction: column; align-items: stretch; gap: 6px; }
  .rope__head .lead { font-size: 15px; line-height: 1.75; }
  .rope__clock { flex-direction: row; align-items: baseline; gap: 10px; }
  .rope__time { font-size: 30px; }
}
@media (max-width: 900px) and (max-height: 760px) { .rope__head .lead { display: none; } }

/* ================= 3 · misbaha ================= */
.misbaha {
  color: var(--ink); padding: clamp(170px, 22vh, 230px) 0 clamp(90px, 14vh, 150px);
  background: linear-gradient(180deg, #0B1C1D 0, #3a5a52 45px, #c9c3ad 100px, var(--cream) 140px, var(--cream) 100%);
}
.misbaha__grid { display: grid; grid-template-columns: 1fr minmax(320px, 440px); gap: clamp(32px, 6vw, 90px); align-items: center; }
.misbaha__copy .lead { color: var(--muted); opacity: 1; margin-bottom: 26px; }
.feats { display: flex; flex-direction: column; gap: 16px; }
.feats li { display: flex; gap: 14px; align-items: flex-start; }
.feats li:nth-child(2) { --d: .07s; }
.feats li:nth-child(3) { --d: .14s; }
.feats li:nth-child(4) { --d: .21s; }
.feats li:nth-child(5) { --d: .28s; }
.feats .i { width: 40px; height: 40px; padding: 9px; border-radius: 14px; background: var(--tint); color: var(--green); }
.feats b { display: block; font-size: 17px; }
.feats span { font-size: 15.5px; color: var(--muted); line-height: 1.75; }
.dial-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dial-note { font-size: 14px; color: var(--muted); text-align: center; }

/* the demo counter (same geometry as the app's Misbaha.kt, in CSS pixels) */
.dial {
  --d-bg: #FBF8F1; --d-band: #E9EFE8; --d-ink: #15231F; --d-muted: #55635D; --d-primary: #0F4D3F; --d-accent: #8C6420;
  --d-line: #DED6C4; --d-track: #D7E1D9; --d-surface: #FFFDF8;
  position: relative; width: min(420px, 100%); height: 660px; border-radius: 40px; overflow: hidden;
  background: var(--d-bg); color: var(--d-ink);
  box-shadow: 0 50px 90px -40px rgba(15, 77, 63, .45), 0 0 0 1px var(--d-line), 0 0 0 10px #fff, 0 0 0 11px var(--d-line);
  user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: pointer; outline: none;
  transition: box-shadow .4s;
}
.dial:focus-visible { box-shadow: 0 50px 90px -40px rgba(15, 77, 63, .45), 0 0 0 1px var(--d-line), 0 0 0 10px #fff, 0 0 0 13px var(--focus); }
.dial__top { position: absolute; inset: 0 0 auto 0; height: 86px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; z-index: 5; }
.dial__btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--d-line); background: var(--d-surface); transition: transform .3s var(--spring), background-color .2s; }
.dial__btn:active { transform: scale(.9); }
.dial__btn .i { width: 20px; height: 20px; }
.dial__btns { display: flex; gap: 8px; }
.dial__title { text-align: center; line-height: 1.35; }
.dial__title b { display: block; font-size: 17px; }
.dial__title span { font-size: 14px; color: var(--d-muted); font-variant-numeric: tabular-nums; }
.dial__bar { position: absolute; top: 86px; left: 20px; right: 20px; height: 4px; border-radius: 4px; background: #EFE7DA; overflow: hidden; z-index: 5; }
.dial__bar i { position: absolute; inset: 0; right: 0; transform-origin: right; transform: scaleX(0); background: var(--d-primary); transition: transform .45s var(--ease); }
.dial__body { position: absolute; inset: 92px 0 54px 0; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(180deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent); }
.dial__thread { position: absolute; top: 0; bottom: 0; right: 43px; width: 1.5px; background: #CDB9A6; opacity: .7; }
.dial__beads { position: absolute; inset: 0; }
.dbead { position: absolute; right: 44px; top: 0; border-radius: 50%; transform: translate(50%, -50%); background: var(--d-surface); border: 2px solid #B9A896; transition: background-color .3s, border-color .3s; }
.dbead.is-done { background: var(--d-primary); border-color: var(--d-primary); }
.dbead.is-skipped { border-color: var(--d-accent); border-style: dashed; }
.dlabel { position: absolute; right: 78px; top: 0; transform: translateY(-50%); max-width: calc(100% - 140px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; color: var(--d-ink); display: flex; gap: 8px; align-items: baseline; }
.dlabel small { color: var(--d-muted); font-size: 12px; direction: ltr; }
.dlabel em { font-style: normal; color: var(--d-accent); font-size: 13px; }
.dlabel.is-done { color: var(--d-muted); }
.dial__band { position: absolute; left: 30px; right: 14px; border-radius: 28px; background: var(--d-band); transition: transform .2s; }
.dial__band.is-shaking { transition: none; }
.dial__text { position: absolute; left: 16px; right: 74px; top: 14px; bottom: 14px; display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 8px; }
.dial__ztitle { font-size: 16px; font-weight: 600; color: var(--d-accent); }
.dial__ztext { font-family: var(--f-azkar); font-size: 25px; line-height: 1.9; color: var(--d-ink); overflow: hidden; }
.dial__text > * { transition: opacity .3s, transform .4s var(--ease); }
.dial__text.is-swap > * { opacity: 0; transform: translateY(10px); }
.dial__big { position: absolute; right: 44px; width: 84px; height: 84px; transform: translate(50%, -50%); border-radius: 50%; background: var(--d-surface); box-shadow: 0 6px 20px -6px rgba(21, 35, 31, .25); display: grid; place-items: center; z-index: 3; }
.dial__big svg { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); transform: rotate(-90deg); overflow: visible; }
.dial__big circle { fill: none; stroke-width: 5; }
.dial__big .track { stroke: var(--d-track); }
.dial__big .fill { stroke: var(--d-primary); stroke-linecap: round; transition: stroke-dashoffset .35s var(--ease); }
.dial__num { font-size: 36px; font-weight: 700; color: var(--d-primary); font-variant-numeric: tabular-nums; position: relative; }
.dial__num.is-tick { animation: numTick .35s var(--spring); }
@keyframes numTick { 0% { transform: scale(.82); } 100% { transform: none; } }
.dial__big.is-done { background: var(--d-primary); }
.dial__big.is-done .dial__num { color: #fff; }
.dial__of { position: absolute; right: 44px; transform: translate(50%, 0); font-size: 13px; color: var(--d-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dial__dots { position: absolute; left: 10px; top: 0; bottom: 0; width: 24px; }
.ddot { position: absolute; left: 0; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; display: grid; place-items: center; }
.ddot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #E3D8C9; transition: background-color .3s, transform .3s; }
.ddot.is-done::after { background: var(--d-primary); }
.ddot.is-skipped::after { width: 9px; height: 9px; background: transparent; border: 2px solid var(--d-accent); }
.ddot.is-on::after { width: 12px; height: 12px; background: transparent; border: 2px solid var(--d-accent); }
.dial__grab { position: absolute; top: 0; bottom: 0; right: 0; width: 96px; touch-action: none; z-index: 2; cursor: grab; }
.dial--static { position: absolute; top: 0; left: 0; width: 360px; height: 744px; transform-origin: 0 0; border-radius: 0; box-shadow: none; cursor: default; pointer-events: none; --d-bg: #FBF4EC; --d-band: #F5E3D3; --d-primary: #A4471F; --d-accent: #A4471F; --d-track: #EBD9C8; }
.dial--static .dial__ztext { font-size: 23px; }
.dial--static .dial__hint { display: none; }
.dial--static .dial__body { bottom: 16px; }
.dial--static .dial__grab { display: none; }
.dial__hint { position: absolute; inset: auto 16px 8px 16px; font-size: 12.5px; line-height: 1.6; color: var(--d-muted); text-align: center; z-index: 5; }
.dial__ripple { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--d-primary); opacity: .25; pointer-events: none; animation: ripple .6s var(--ease) forwards; z-index: 6; }
@keyframes ripple { to { transform: scale(18); opacity: 0; } }
.dial__sheet { position: absolute; inset: auto 0 0 0; z-index: 20; background: var(--d-surface); border-radius: 28px 28px 0 0; padding: 12px 20px 22px; box-shadow: 0 -20px 40px -20px rgba(0, 0, 0, .25); transform: translateY(105%); transition: transform .45s var(--ease); cursor: default; }
.dial__sheet.is-open { transform: none; }
.dial__sheet::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 4px; background: var(--d-line); margin: 0 auto 10px; }
.dial__sheet h3 { margin: 0 0 6px; font-size: 16px; }
.dial__add label { display: block; font-size: 14px; font-weight: 600; margin: 8px 0 6px; }
.dial__sheet button.opt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 6px; border-radius: 14px; text-align: right; font-size: 15.5px; }
.dial__sheet button.opt:hover { background: var(--d-band); }
.dial__sheet .opt .i { width: 20px; height: 20px; color: var(--d-primary); }
.dial__sheet .opt small { display: block; font-size: 12px; color: var(--d-muted); }
.dial__scrim { position: absolute; inset: 0; z-index: 19; background: rgba(21, 35, 31, .28); opacity: 0; pointer-events: none; transition: opacity .3s; }
.dial__scrim.is-on { opacity: 1; pointer-events: auto; }
.dial__snack { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 25; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: #1E2B27; color: #F5F1E8; font-size: 14px; transform: translateY(140%); transition: transform .4s var(--ease); cursor: default; }
.dial__snack.is-on { transform: none; }
.dial__snack button { color: var(--gold); font-weight: 600; }
.dial__add textarea { width: 100%; min-height: 84px; resize: none; border-radius: 14px; border: 1px solid var(--d-line); padding: 10px 12px; font-family: var(--f-azkar); font-size: 19px; line-height: 1.7; background: var(--d-bg); color: var(--d-ink); }
.dial__add .row { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 12px; font-size: 15px; }
.dial__add .stepper { background: var(--d-band); }
.dial__done { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; background: radial-gradient(circle at 50% 40%, #FFFDF8, #F1EBDD 70%); opacity: 0; pointer-events: none; transition: opacity .5s; cursor: default; padding: 24px; }
.dial__done.is-on { opacity: 1; pointer-events: auto; }
.dial__done svg.seal { width: 150px; height: 170px; overflow: visible; }
.seal .ring { fill: none; stroke: var(--d-primary); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 252; stroke-dashoffset: 252; }
.seal .glow { fill: url(#sealGlow); opacity: 0; }
.seal .pearl { fill: var(--d-surface); stroke: var(--gold-deep); stroke-width: 2; }
.seal .chk { fill: none; stroke: var(--d-primary); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; }
.dial__done.is-on .pearl { animation: pearlDrop .7s cubic-bezier(.55, 0, .9, .5) forwards, pearlBounce .5s .7s var(--spring) forwards; }
.dial__done.is-on .ring { animation: draw 1s .65s var(--ease) forwards; }
.dial__done.is-on .glow { animation: glowIn 1.2s 1.3s var(--ease) forwards; }
.dial__done.is-on .chk { animation: draw .6s 1.4s var(--ease) forwards; }
@keyframes pearlDrop { 0% { transform: translateY(-90px); } 100% { transform: none; } }
@keyframes pearlBounce { 0% { transform: translateY(0) scale(1.15, .85); } 100% { transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes glowIn { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: .55; } }
.dial__done h3 { margin: 0; font-size: 24px; color: var(--d-primary); opacity: 0; transform: translateY(10px); }
.dial__done p { color: var(--d-muted); font-size: 15px; opacity: 0; transform: translateY(10px); }
.dial__done.is-on h3, .dial__done.is-on p, .dial__done.is-on .done-stats, .dial__done.is-on .btn { animation: rise .7s var(--ease) forwards; }
.dial__done.is-on h3 { animation-delay: 1.5s; }
.dial__done.is-on p { animation-delay: 1.65s; }
.dial__done.is-on .done-stats { animation-delay: 1.8s; }
.dial__done.is-on .btn { animation-delay: 2.1s; }
@keyframes rise { to { opacity: 1; transform: none; } }
.done-stats { display: flex; gap: 8px; opacity: 0; transform: translateY(10px); }
.done-stats div { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: 16px; padding: 8px 12px; min-width: 88px; font-size: 12px; color: var(--d-muted); line-height: 1.4; }
.done-stats b { display: block; font-size: 20px; color: var(--d-ink); font-variant-numeric: tabular-nums; }
.dial__done .btn { opacity: 0; transform: translateY(10px); }
@media (max-width: 900px) {
  .misbaha__grid { grid-template-columns: minmax(0, 1fr); }
  .dial { height: 600px; }
}
@media (max-width: 380px) { .dial__ztext { font-size: 22px; } }

/* ================= 4 · doze ================= */
.doze { color: var(--ink); background: #FAF4EA; --dim: 0; --night: 0; --focus: color-mix(in srgb, #0F4D3F, #F2CC75 calc(var(--night) * 100%)); }
.doze__stage { background: #FAF4EA; }
.doze__veil-page { position: absolute; inset: 0; background: radial-gradient(70% 60% at 30% 30%, #2a1d10, #0d0a07); opacity: var(--veil, 0); pointer-events: none; }
.doze__grid { height: 100%; display: grid; grid-template-columns: 1fr minmax(300px, 400px); align-items: center; gap: clamp(28px, 6vw, 90px); padding-top: var(--head-h); }
.doze__copy { position: relative; z-index: 2; padding: clamp(18px, 2.4vw, 30px); border-radius: 32px; transition: color .3s, background-color .3s; color: color-mix(in srgb, var(--ink), var(--cream) calc(var(--night) * 100%)); background: color-mix(in srgb, #FAF4EA, #17110B calc(var(--night) * 100%)); }
.doze__copy .kicker { color: color-mix(in srgb, var(--copper), var(--gold) calc(var(--night) * 100%)); transition: color .3s; }
.steps { counter-reset: s; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.steps li { position: relative; padding: 12px 16px 12px 16px; padding-inline-start: 52px; border-radius: 20px; transition: background-color .3s, color .3s, opacity .5s, transform .6s var(--ease); opacity: .8; }
.steps li::before { content: attr(data-n); position: absolute; right: 14px; top: 13px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; border: 1.5px solid currentColor; opacity: .7; }
.steps li b { display: block; font-size: 18px; }
.steps li span { font-size: 15px; line-height: 1.75; opacity: .85; }
.steps li.is-on { opacity: 1; background: color-mix(in srgb, rgba(140, 100, 32, .1), rgba(242, 204, 117, .12) calc(var(--night) * 100%)); transform: translateX(-6px); }
.doze__device { position: relative; justify-self: center; height: min(74vh, 700px); aspect-ratio: 9 / 18.6; z-index: 2; }
.device { position: relative; width: 100%; height: 100%; border-radius: 44px; padding: 10px; background: #1B1612; box-shadow: 0 40px 80px -30px rgba(40, 26, 10, .55), inset 0 0 0 1.5px #3b3027; }
.device__screen { position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: #FBF4EC; }
.doze__veil { position: absolute; inset: 10px; border-radius: 34px; background: radial-gradient(60% 40% at 50% 14%, rgba(70, 48, 20, .55), rgba(16, 11, 7, .96)); opacity: calc(var(--dim) * .9); pointer-events: none; }
.doze__flood { position: absolute; inset: 10px; border-radius: 34px; pointer-events: none; background: radial-gradient(60% 45% at 50% 16%, rgba(255, 236, 180, .95), rgba(255, 230, 170, 0) 70%); opacity: 0; }
.doze__flood.is-on { animation: flood 1.4s var(--ease) forwards; }
@keyframes flood { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }
.doze__pill { position: absolute; left: 50%; bottom: 26px; transform: translate(-50%, 20px); opacity: 0; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 28px; background: #2A2019; color: #F5F1E8; width: max-content; max-width: calc(100% - 22px); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6); transition: opacity .45s, transform .55s var(--spring); z-index: 3; }
.doze__pill.is-on { opacity: 1; transform: translate(-50%, 0); }
.doze__pill-ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #4A3426; color: var(--gold); }
.doze__pill-ico .i { width: 20px; height: 20px; }
.doze__pill.is-buzz .doze__pill-ico { animation: buzz .35s linear infinite; }
.doze__pill.is-buzz2 .doze__pill-ico { animation: buzz .2s linear infinite; }
@keyframes buzz { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px) rotate(-6deg); } 75% { transform: translateX(2px) rotate(6deg); } }
.doze__pill-text { display: flex; flex-direction: column; line-height: 1.35; text-align: right; }
.doze__pill-text b { font-size: 15px; }
.doze__pill-text small { font-size: 12.5px; opacity: .78; }
.doze__wake { position: absolute; inset: 0; border-radius: 44px; z-index: 4; cursor: pointer; }
.doze__wake[hidden] { display: none; }
.doze__cord { position: absolute; left: 50%; bottom: 100%; width: 1.5px; height: 100vh; background: linear-gradient(180deg, rgba(160, 120, 60, .2), rgba(160, 120, 60, .7)); transform: translateY(calc(var(--lamp-y, -260px) + 30px)); opacity: var(--lamp-o, 0); z-index: 3; }
.doze__lamp { position: absolute; left: 50%; top: 0; width: 112px; margin-left: -56px; z-index: 4; transform: translateY(var(--lamp-y, -260px)); opacity: var(--lamp-o, 0); pointer-events: none; }
.doze__lamp svg { width: 100%; height: auto; overflow: visible; }
.doze__notes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: clamp(60px, 10vh, 100px) 0 clamp(90px, 14vh, 140px); }
.note-card { background: var(--paper); border: 1px solid var(--line); border-radius: 28px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.note-card:nth-child(2) { --d: .1s; }
.note-card h3 { font-size: 20px; }
.pulse-viz { display: flex; align-items: center; gap: 10px; height: 54px; }
.pulse-viz i { width: 10px; border-radius: 6px; background: var(--copper); height: calc(10px + var(--amp, .4) * 40px * var(--k, 1)); opacity: .3; animation: pz 1.6s ease-in-out infinite; animation-delay: calc(var(--n) * .12s); }
@keyframes pz { 0%, 100% { opacity: .25; transform: scaleY(.6); } 50% { opacity: 1; transform: none; } }
.dots { display: flex; flex-direction: column; gap: 8px; }
.dots li { position: relative; padding-inline-start: 22px; font-size: 15.5px; line-height: 1.8; }
.dots li::before { content: ""; position: absolute; right: 2px; top: .7em; width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .5; }
.dots--loose { gap: 12px; margin: 22px 0; }
@media (max-width: 900px) {
  .doze__grid { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; padding-top: calc(var(--head-h) + 8px); }
  .doze__device { order: -1; height: clamp(300px, 52svh, 520px); }
  .doze__copy .h2 { font-size: 26px; margin: 6px 0 6px; }
  .doze__copy .kicker { display: none; }
  .steps li { display: none; padding-block: 8px; }
  .steps li.is-on { display: block; transform: none; }
  .steps li span { font-size: 14.5px; }
  .doze__notes { grid-template-columns: 1fr; }
}

/* ================= 5 · heart ================= */
.heart { color: var(--ink); background: linear-gradient(180deg, #FAF4EA 0, #FBF4EC 100%); padding: clamp(100px, 15vh, 170px) 0; }
.heart__grid { display: grid; grid-template-columns: 1fr minmax(320px, 470px); gap: clamp(32px, 6vw, 90px); align-items: center; }
.heart__copy .lead { color: var(--muted); opacity: 1; }
.private { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--muted); padding: 8px 14px; border-radius: 99px; background: rgba(15, 77, 63, .06); }
.private .i { width: 18px; height: 18px; color: var(--green); }
.mood { display: flex; flex-direction: column; gap: 18px; }
.mood__ring { position: relative; width: 100%; aspect-ratio: 1; --rot: 0deg; }
.mood__thread { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mood__beads { position: absolute; inset: 0; }
.mbead {
  position: absolute; left: 50%; top: 50%; width: 21%; aspect-ratio: 1; margin: -10.5% 0 0 -10.5%;
  transform: rotate(calc(var(--a) + var(--rot, 0deg))) translateY(calc(var(--R, 150px) * -1)) rotate(calc(-1 * (var(--a) + var(--rot, 0deg))));
  transition: transform 1.1s cubic-bezier(.3, 1.25, .45, 1);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff, var(--tint) 62%, color-mix(in srgb, var(--tint), var(--ink-m) 14%) 100%);
  color: var(--ink-m); box-shadow: 0 10px 20px -12px rgba(21, 35, 31, .45), inset 0 -4px 10px rgba(0, 0, 0, .05);
  font-size: clamp(12px, 1.05vw, 14px); font-weight: 600;
}
.mbead .i { width: 36%; height: 36%; }
.mbead span { line-height: 1.2; }
.mbead::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--ink-m); opacity: 0; transform: scale(.9); transition: opacity .4s, transform .5s var(--spring); }
.mbead[aria-checked="true"]::after { opacity: .9; transform: none; }
.mbead:hover { filter: brightness(1.03); }
.mood__center { position: absolute; left: 50%; top: 50%; width: 54%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; text-align: center; pointer-events: none; }
.mood__center > div { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; transform: scale(.94); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.mood__center > div.is-on { opacity: 1; transform: none; transition-delay: .25s; }
.mood__q small { color: var(--copper); font-weight: 600; font-size: 13px; }
.mood__q b { font-size: clamp(20px, 2vw, 26px); line-height: 1.35; }
.mood__q span { font-size: 13px; color: var(--muted); line-height: 1.6; }
.mood__verse small { font-size: 13px; color: var(--muted); }
.mood__verse .aya { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.7; color: var(--ink); }
.mood__verse span { font-size: 13px; color: var(--muted); font-weight: 600; }
.mood__after { display: flex; flex-direction: column; gap: 12px; opacity: .35; pointer-events: none; transition: opacity .5s; }
.mood__after.is-on { opacity: 1; pointer-events: auto; }
.mood__cause-q { font-weight: 700; font-size: 16px; }
.mood__cause-q small { font-weight: 400; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--paper); font-size: 14.5px; transition: background-color .3s, border-color .3s, color .3s; }
.chip .i { width: 18px; height: 18px; padding: 2px; }
.chip[aria-pressed="true"], .chip--on { background: var(--green); border-color: var(--green); color: var(--cream); }
@media (max-width: 900px) {
  .heart__grid { grid-template-columns: minmax(0, 1fr); }
  .mood { max-width: 470px; margin-inline: auto; width: 100%; }
}

/* ================= 6 · history ================= */
.history { color: var(--ink); background: linear-gradient(180deg, #FBF4EC 0, var(--cream) 30%, var(--cream) calc(100% - 260px), #59587e calc(100% - 60px), #2B2D5A 100%); padding: clamp(100px, 14vh, 160px) 0 clamp(200px, 26vh, 280px); }
.history .lead { color: var(--muted); opacity: 1; }
.hist { max-width: 860px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); border-radius: 36px; padding: clamp(18px, 3vw, 34px); box-shadow: 0 40px 80px -50px rgba(21, 35, 31, .35); }
.hist__controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
.hist__views { position: relative; overflow: hidden; transition: height .5s var(--ease); }
.hview { width: 100%; }
.hview.is-leaving { position: absolute; inset: 0 0 auto 0; }
.hist__foot { text-align: center; font-size: 13px; color: var(--muted); margin-top: 12px; }
.lens { display: flex; gap: 8px; }
.lens button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 18px; border-radius: 99px; border: 1px solid var(--line); font-weight: 600; font-size: 15px; transition: background-color .35s, color .35s, border-color .35s; }
.lens button .i { width: 18px; height: 18px; }
.lens button[aria-selected="true"] { background: var(--green); color: var(--cream); border-color: var(--green); }

/* segmented control with a sliding thumb (RangeControl in the app) */
.seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 99px; background: rgba(140, 100, 32, .1); isolation: isolate; }
.seg button { position: relative; z-index: 1; min-height: 44px; padding: 8px 16px; border-radius: 99px; font-size: 15px; font-weight: 600; color: inherit; opacity: .7; transition: opacity .3s, color .3s; white-space: nowrap; }
.seg button[aria-selected="true"], .seg button[aria-checked="true"] { opacity: 1; }
.seg__thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; right: 4px; border-radius: 99px; background: var(--paper); box-shadow: 0 4px 12px -4px rgba(21, 35, 31, .25); width: var(--tw, 0); transform: translateX(var(--tx, 0)); transition: transform .5s var(--spring), width .5s var(--ease); }
.seg--big { padding: 5px; }
.seg--big button { padding: 10px 26px; font-size: 16px; }
[data-tone="dark"] .seg { background: rgba(245, 241, 232, .1); }
[data-tone="dark"] .seg__thumb { background: var(--cream); }
[data-tone="dark"] .seg button[aria-checked="true"], [data-tone="dark"] .seg button[aria-selected="true"] { color: var(--ink); }

/* month ring */
.month { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.month__ring { position: relative; width: min(440px, 100%); }
.month__ring svg { width: 100%; height: auto; overflow: visible; }
.month__center { position: absolute; left: 50%; top: 41.5%; transform: translate(-50%, -50%); text-align: center; line-height: 1.3; }
.month__center small { display: block; color: var(--muted); font-size: 14px; }
.month__center b { display: block; font-size: clamp(44px, 6vw, 64px); font-weight: 700; font-variant-numeric: tabular-nums; }
.month__center span { color: var(--muted); font-size: 14px; }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 13.5px; color: var(--muted); }
.legend i { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px; margin-inline-end: 6px; }
.legend .lg-m { background: linear-gradient(90deg, #F2E9DA 50%, var(--green) 50%); }
.legend .lg-e { background: linear-gradient(90deg, var(--violet) 50%, #F2E9DA 50%); }
.legend .lg-x { background: #EFE7DA; }
.legend .lg-u { border: 1.5px dashed #BFB3A0; }
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.stat { border: 1px solid var(--line); border-radius: 22px; padding: 12px 16px; }
.stat small { display: block; color: var(--muted); font-size: 13.5px; }
.stat b { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat span { font-size: 13px; color: var(--muted); margin-inline-start: 4px; }
.hnote { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 18px; border-radius: 22px; background: var(--tint); font-size: 15.5px; }
.hnote .i { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: #fff; color: var(--copper); }
.mbd { transition: opacity .5s var(--ease), transform .6s var(--spring); transform-box: fill-box; transform-origin: center; }
.month:not(.is-in) .mbd { opacity: 0; transform: scale(.4); }
.month__tassel { transform-box: fill-box; transform-origin: 50% 0; animation: tassel 4s ease-in-out infinite; }
@keyframes tassel { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* week fingerprint */
.week { display: flex; flex-direction: column; gap: 14px; }
.week__title { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.week__title b { font-size: 19px; }
.week__title small { color: var(--muted); font-size: 13px; }
.strips { display: flex; flex-direction: column; gap: 7px; }
.strip { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.strip.is-today { color: var(--ink); font-weight: 700; }
.strip__bar { position: relative; height: 26px; border-radius: 99px; background: #F4EEE3; }
.strip.is-today .strip__bar { background: #EFE6D6; }
.wdot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px -7px 0 0; border-radius: 50%; transform: scale(0); transition: transform .5s var(--spring); transition-delay: var(--dl, 0s); }
.week.is-in .wdot { transform: none; }
.wdot.is-miss { background: transparent !important; border: 1.5px dashed #B7A992; }
.wnow { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--copper); border-radius: 2px; }
.wnow::after { content: "الآن"; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #6E4E18; font-weight: 700; }
.waxis { display: grid; grid-template-columns: 54px 1fr; gap: 10px; font-size: 12px; color: var(--muted); }
.waxis div { display: flex; justify-content: space-between; direction: rtl; }
.wtip { padding: 14px 18px; border-radius: 22px; background: var(--tint); font-size: 15px; }
.wrates { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.wrate { border: 1px solid var(--line); border-radius: 20px; padding: 12px 16px; }
.wrate small { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.wrate small i { width: 10px; height: 10px; border-radius: 50%; }
.wrate b { font-size: 22px; font-variant-numeric: tabular-nums; }
.wrate .bar { height: 6px; border-radius: 6px; background: #F1EADF; margin-top: 6px; overflow: hidden; }
.wrate .bar i { display: block; height: 100%; border-radius: 6px; width: var(--w); transform: scaleX(0); transform-origin: right; transition: transform 1.1s var(--ease); }
.week.is-in .wrate .bar i { transform: none; }

/* year */
.year { display: flex; flex-direction: column; gap: 16px; }
.harvest { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; }
.harvest b { display: block; font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; font-variant-numeric: tabular-nums; }
.harvest span { font-size: 13.5px; color: var(--muted); }
.hadith { padding: 18px 22px; border-radius: 22px; background: #F3E6D4; font-family: var(--f-azkar); font-size: clamp(19px, 2vw, 23px); line-height: 1.9; }
.hadith small { display: block; font-family: var(--f-ui); font-size: 13px; color: var(--muted); }
.garden-head { display: flex; justify-content: space-between; align-items: baseline; }
.garden-head b { font-size: 18px; }
.garden-head small { color: var(--muted); font-size: 13px; }
.garden { display: grid; grid-template-columns: repeat(26, 1fr); grid-auto-flow: column; grid-template-rows: repeat(7, auto); gap: 3px; direction: rtl; }
.gcell { aspect-ratio: 1; border-radius: 3px; background: #F2E9DA; position: relative; overflow: hidden; transform: scale(.3); opacity: 0; transition: transform .45s var(--spring), opacity .4s; transition-delay: var(--dl, 0s); }
.year.is-in .gcell { transform: none; opacity: 1; }
.gcell.m::before, .gcell.e::after { content: ""; position: absolute; inset: 0; }
.gcell.m::before { background: linear-gradient(135deg, transparent 50%, var(--green) 50%); }
.gcell.e::after { background: linear-gradient(135deg, var(--violet) 50%, transparent 50%); }
.gcell.future { background: transparent; border: 1px dashed #E1D6C4; }
.legend--sq i { border-radius: 3px; }
.legend .sq-m { background: linear-gradient(135deg, #F2E9DA 50%, var(--green) 50%); }
.legend .sq-e { background: linear-gradient(135deg, var(--violet) 50%, #F2E9DA 50%); }
.legend .sq-f { background: linear-gradient(135deg, var(--violet) 50%, var(--green) 50%); }

/* heart calendar */
.hcal { display: flex; flex-direction: column; gap: 14px; }
.hcal__head { display: flex; justify-content: space-between; align-items: center; }
.hcal__head b { font-size: 19px; }
.chip-device { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: var(--tint); font-size: 13px; color: var(--green); font-weight: 600; }
.chip-device .i { width: 15px; height: 15px; }
.hcal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.hcal__dow { text-align: center; font-size: 12px; color: var(--muted); }
.hday { aspect-ratio: 1; border-radius: 14px; background: #F6F1E7; display: grid; place-items: center; position: relative; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; transform: scale(.6); opacity: 0; transition: transform .45s var(--spring), opacity .4s; transition-delay: var(--dl, 0s); }
.hcal.is-in .hday { transform: none; opacity: 1; }
.hday.has { color: var(--ink-m); font-weight: 700; }
.hday .eased { position: absolute; bottom: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--green-lite); }
.hday.blank { background: transparent; }
.hcal__note { padding: 14px 18px; border-radius: 22px; background: var(--tint); font-size: 15px; }
@media (max-width: 640px) {
  .stats3 { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .stat { padding: 10px; }
  .stat b { font-size: 22px; }
  .wrates { grid-template-columns: 1fr; }
  .garden { gap: 2px; }
  .seg--big button { padding: 9px 18px; }
  .hist__controls { justify-content: center; }
}

/* ================= 7 · reminders ================= */
.reminders { position: relative; color: var(--cream); background: linear-gradient(180deg, #2B2D5A 0, #23254D 30%, #191B3A 70%, #14162F 100%); padding: clamp(80px, 12vh, 140px) 0 clamp(90px, 14vh, 150px); overflow: hidden; }
.reminders__dusk { position: absolute; inset: 0 0 auto 0; height: 70%; background: radial-gradient(70% 60% at 70% 0%, rgba(180, 103, 43, .35), transparent 70%); pointer-events: none; }
.reminders__grid { display: grid; grid-template-columns: 1fr minmax(300px, 420px); gap: clamp(32px, 6vw, 90px); align-items: center; }
.rules { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.rules li { display: flex; align-items: center; gap: 16px; }
.rules li:nth-child(2) { --d: .08s; }
.rules li:nth-child(3) { --d: .16s; }
.rules b { flex: none; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: rgba(169, 177, 245, .14); color: var(--violet-lite); font-size: 17px; }
.rules span { font-size: 16px; line-height: 1.7; opacity: .85; }
.shade { position: relative; padding: 16px 16px 18px; border-radius: 30px; background: rgba(17, 18, 38, .72); border: 1px solid rgba(169, 177, 245, .2); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.shade__bar { display: flex; justify-content: space-between; align-items: center; font-size: 13px; opacity: .75; margin-bottom: 4px; }
.shade__app { display: inline-flex; align-items: center; gap: 8px; }
.sign-hang { position: relative; height: 270px; display: grid; place-items: start center; padding-top: 30px; }
.sign-hang::before { content: ""; position: absolute; top: 0; left: 50%; width: 46%; height: 34px; transform: translateX(-50%); border-top: 0; background: linear-gradient(90deg, transparent 49%, transparent 51%); }
.sign {
  position: relative; width: 88%; padding: 22px 20px 18px; border-radius: 16px; text-align: center; color: #2A1A0C;
  background:
    repeating-linear-gradient(176deg, rgba(90, 55, 20, .0) 0 9px, rgba(90, 55, 20, .07) 9px 10px, rgba(90, 55, 20, 0) 10px 23px),
    linear-gradient(180deg, #E7C48C, #D6A866 55%, #C49052);
  box-shadow: inset 0 0 0 3px rgba(120, 72, 28, .45), inset 0 2px 0 6px rgba(255, 236, 200, .25), 0 22px 30px -16px rgba(0, 0, 0, .7);
  transform-origin: 50% -30px; animation: signSway 5s ease-in-out infinite;
}
.sign::before, .sign::after { content: ""; position: absolute; top: -32px; width: 2px; height: 36px; background: linear-gradient(#6b4a2b, #a07a4f); }
.sign::before { right: 22%; transform: rotate(-12deg); transform-origin: bottom; }
.sign::after { left: 22%; transform: rotate(12deg); transform-origin: bottom; }
@keyframes signSway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
.sign.is-kick { animation: signKick 1.1s var(--ease); }
@keyframes signKick { 0% { transform: rotate(0); } 20% { transform: rotate(-6deg); } 45% { transform: rotate(4deg); } 70% { transform: rotate(-2deg); } 100% { transform: rotate(0); } }
.sign.is-gone { animation: signGone .9s var(--ease) forwards; }
@keyframes signGone { 0% { transform: none; opacity: 1; } 100% { transform: translateY(-40px) rotate(4deg); opacity: 0; } }
.sign__nail { position: absolute; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f1d9a6, #7a5428); }
.sign__nail--r { right: 21%; }
.sign__nail--l { left: 21%; }
.sign__title { font-family: var(--f-azkar); font-weight: 700; font-size: 26px; line-height: 1.5; }
.sign__text { font-family: var(--f-azkar); font-size: 21px; line-height: 1.9; min-height: 3.8em; display: grid; place-items: center; transition: opacity .35s, transform .45s var(--ease); }
.sign__text.is-swap { opacity: 0; transform: translateY(8px); }
.sign__count { font-size: 13px; font-weight: 600; color: #3A2410; font-variant-numeric: tabular-nums; }
.shade__actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 4px; }
.shade__btn { padding: 12px; border-radius: 16px; background: rgba(245, 241, 232, .1); font-weight: 600; font-size: 15px; transition: background-color .25s, transform .3s var(--spring); }
.shade__btn:hover { background: rgba(245, 241, 232, .16); }
.shade__btn:active { transform: scale(.97); }
.shade__btn--main { background: var(--cream); color: #22244a; }
.shade__btn--main:hover { background: #fff; }
.shade__btn:disabled { opacity: .45; cursor: default; }
.shade__toast { min-height: 1.6em; margin-top: 10px; text-align: center; font-size: 14px; color: var(--violet-lite); }
.cord { display: grid; grid-template-columns: 1fr minmax(260px, 420px); gap: clamp(32px, 6vw, 90px); align-items: center; margin-top: clamp(80px, 12vh, 130px); }
.cord__copy p { font-size: 16.5px; line-height: 1.85; opacity: .85; max-width: 32em; }
.cord__try { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--gold); font-weight: 600; opacity: 1 !important; }
.cord__try .i { width: 18px; height: 18px; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
.cord__keys { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cord__key { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 99px; border: 1px solid rgba(245, 241, 232, .25); font-size: 15px; font-weight: 600; transition: background-color .25s, transform .3s var(--spring); }
.cord__key:hover { background: rgba(245, 241, 232, .08); }
.cord__key:active { transform: scale(.97); }
.cord__key .i { width: 18px; height: 18px; color: var(--gold); }
.cord__stage { position: relative; height: 420px; border-radius: 30px; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; }
.cord__stage::before { content: ""; position: absolute; inset: 18px 18px auto 18px; height: 24px; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.cord__canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.cord__canvas.is-drag { cursor: grabbing; }
.cord__toast { position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, 10px); opacity: 0; padding: 8px 16px; border-radius: 99px; background: var(--cream); color: var(--ink); font-weight: 600; font-size: 14px; white-space: nowrap; transition: opacity .3s, transform .45s var(--spring); pointer-events: none; }
.cord__toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 900px) {
  .reminders__grid, .cord { grid-template-columns: minmax(0, 1fr); }
  .cord__stage { height: 360px; }
}

/* ================= 8 · screens ================= */
.screens { color: var(--cream); background: linear-gradient(180deg, #14162F 0, #10122A 40%, #0E1A1E 100%); }
.screens__stage { display: flex; flex-direction: column; justify-content: center; padding-top: var(--head-h); }
.screens__head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.screens__head .h2 { margin: 8px 0 6px; }
.screens__head .lead { font-size: 16px; }
.screens__rail { position: relative; height: min(60vh, 560px); margin-top: clamp(10px, 3vh, 30px); }
.screens__string { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.phone { position: absolute; top: 0; left: 0; margin: 0; width: var(--pw, 220px); transform-origin: 50% 0; will-change: transform; }
.phone__frame { border-radius: 30px; padding: 7px; background: #0b0c10; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8), inset 0 0 0 1.5px #2b2e3a; position: relative; }
.phone__frame::before { content: ""; position: absolute; left: 50%; top: -22px; width: 2px; height: 22px; background: rgba(245, 241, 232, .4); transform: translateX(-50%); }
.phone__frame::after { content: ""; position: absolute; left: 50%; top: -30px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF3CF, var(--gold) 55%, var(--flame)); box-shadow: 0 0 10px rgba(242, 204, 117, .6); }
.phone img { width: 100%; height: auto; border-radius: 24px; aspect-ratio: 600 / 1257; object-fit: cover; background: #222; }
.phone figcaption { text-align: center; font-size: 14px; margin-top: 12px; opacity: .78; }

/* ================= 9 · look ================= */
.look { color: var(--cream); background: linear-gradient(180deg, #0E1A1E 0, #0D1416 100%); padding: clamp(100px, 15vh, 160px) 0 clamp(60px, 9vh, 100px); position: relative; overflow: hidden; }
.look::before { content: ""; position: absolute; width: 900px; height: 900px; left: -200px; top: 10%; border-radius: 50%; background: radial-gradient(circle, var(--look-glow, rgba(15, 77, 63, .5)), transparent 65%); transition: background .8s; pointer-events: none; }
.look__grid { display: grid; grid-template-columns: 1fr minmax(280px, 380px); gap: clamp(32px, 6vw, 90px); align-items: center; }
.ctl { margin-top: 22px; }
.ctl__label { display: block; font-size: 14px; opacity: .72; margin-bottom: 10px; }
.ctl__label b { color: var(--gold); font-variant-numeric: tabular-nums; }
.ctl--row { display: flex; flex-wrap: wrap; gap: 26px; }
.palettes { display: flex; flex-wrap: wrap; gap: 10px; }
.pal { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 99px; border: 1px solid rgba(245, 241, 232, .18); transition: background-color .3s, border-color .3s; }
.pal:hover { background: rgba(245, 241, 232, .06); }
.pal[aria-checked="true"] { border-color: var(--gold); background: rgba(242, 204, 117, .1); }
.pal__sw { width: 30px; height: 30px; border-radius: 50%; position: relative; overflow: hidden; box-shadow: 0 0 0 2px rgba(255, 255, 255, .15); }
.pal__sw i { position: absolute; }
.pal b { font-size: 15px; }
.stepper { display: inline-flex; align-items: center; gap: 8px; padding: 4px; border-radius: 99px; background: rgba(245, 241, 232, .1); }
.stepper button { width: 44px; height: 44px; border-radius: 50%; font-size: 20px; line-height: 1; transition: background-color .2s; }
.stepper button:hover { background: rgba(245, 241, 232, .14); }
.stepper span { min-width: 9.5em; text-align: center; font-weight: 600; font-size: 15px; display: inline-block; }
.stepper span.is-swap { animation: stepSwap .4s var(--ease); }
@keyframes stepSwap { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
.look__stage { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.device--look { width: min(360px, 100%); height: auto; aspect-ratio: 9 / 18.4; background: #08090b; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7), inset 0 0 0 1.5px #2a2c33; }
.look__tag { font-size: 14px; opacity: .75; text-align: center; transition: opacity .3s; }
.look-app { background: var(--t-bg); color: var(--t-ink); transition: background-color .6s, color .6s; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
.look-app * { transition: background-color .6s, color .6s, border-color .6s; }
.la-date { color: var(--t-muted); font-size: 11px; }
.la-head { display: flex; justify-content: space-between; align-items: center; }
.la-title { font-size: 26px; font-weight: 700; line-height: 1.2; }
.la-search { width: 34px; height: 34px; border-radius: 50%; background: var(--t-surface); display: grid; place-items: center; color: var(--t-ink); }
.la-search .i { width: 16px; height: 16px; }
.la-chips { display: flex; gap: 6px; overflow: hidden; }
.la-chip { padding: 5px 11px; border-radius: 99px; border: 1px solid var(--t-line); background: var(--t-surface); white-space: nowrap; font-size: 11px; }
.la-chip.on { background: var(--t-ink); color: var(--t-bg); border-color: var(--t-ink); }
.la-now { border-radius: 20px; padding: 14px; background: var(--t-hero); color: var(--t-hero-ink); display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; }
.la-now small { color: var(--t-hero-muted); font-weight: 600; }
.la-now b { font-size: 17px; }
.la-now .bar { height: 5px; border-radius: 5px; background: var(--t-hero-track); margin-top: 6px; overflow: hidden; }
.la-now .bar i { display: block; width: 38%; height: 100%; background: var(--t-hero-fill); border-radius: 5px; }
.la-now .go { position: absolute; left: 12px; top: 14px; padding: 6px 12px; border-radius: 99px; background: var(--t-hero-btn); color: var(--t-hero-btn-ink); font-weight: 700; font-size: 11px; }
.la-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.la-tile { border-radius: 18px; padding: 10px; background: var(--t-surface); border: 1px solid var(--t-line); display: flex; flex-direction: column; gap: 6px; min-height: 92px; }
.la-tile .ic { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; }
.la-tile .ic .i { width: 15px; height: 15px; }
.la-tile b { font-size: 13px; margin-top: auto; }
.la-tile small { color: var(--t-muted); font-size: 10.5px; }
.la-tile .st { font-size: 10.5px; font-weight: 700; }
.la-heart { border-radius: 18px; padding: 10px 12px; background: var(--t-surface); border: 1px solid var(--t-line); display: flex; align-items: center; justify-content: space-between; }
.la-heart b { font-size: 13px; }
.la-moods { display: flex; gap: 4px; }
.la-moods i { width: 18px; height: 18px; border-radius: 6px; }
.la-tabs { margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 8px; border-top: 1px solid var(--t-line); text-align: center; font-size: 10px; color: var(--t-muted); }
.la-tabs span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.la-tabs .on { color: var(--t-primary); font-weight: 700; }
.la-tabs .on .i { background: color-mix(in srgb, var(--t-primary) 16%, transparent); border-radius: 99px; width: 34px; padding: 2px 8px; }
.la-tabs .i { width: 16px; height: 16px; }
.reading { margin-top: clamp(50px, 8vh, 90px); }
.reading__card { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 26px; padding: clamp(20px, 3vw, 32px); border-radius: 32px; background: rgba(245, 241, 232, .05); border: 1px solid rgba(245, 241, 232, .1); }
.reading__preview { border-radius: 24px; background: #E9EFE8; color: var(--ink); padding: 26px; display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 10px; min-height: 260px; }
.reading__title { font-weight: 600; color: var(--copper); }
.reading__text { font-family: var(--f-azkar); font-size: var(--zs, 28px); line-height: 1.9; transition: font-size .35s var(--ease); }
.reading__text.is-clear { font-family: "Scheherazade New", var(--f-azkar); line-height: 1.75; }
.range { width: 100%; accent-color: var(--gold); margin: 4px 0 18px; height: 28px; }
.toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid rgba(245, 241, 232, .1); font-size: 15px; }
.toggle-row small { display: block; font-size: 12.5px; opacity: .65; }
.switch { width: 52px; height: 30px; border-radius: 99px; background: rgba(245, 241, 232, .2); position: relative; flex: none; transition: background-color .3s; }
.switch::before { content: ""; position: absolute; inset: -7px -4px; }
.switch i { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .4s var(--spring); }
.switch[aria-checked="true"] { background: var(--green-lite); }
.switch[aria-checked="true"] i { transform: translateX(-22px); }
.windows { margin-top: 10px; }
.windows__track { position: relative; height: 12px; border-radius: 99px; background: rgba(245, 241, 232, .1); }
.windows .w { position: absolute; top: 0; bottom: 0; border-radius: 6px; transform-origin: right; transition: transform .6s var(--ease); }
.w--m { background: var(--gold); right: 0; width: 34%; }
.w--e { background: var(--violet-lite); right: 55%; width: 45%; }
.windows.is-strict .w--m { transform: scaleX(.265); }
.windows.is-strict .w--e { transform: scaleX(.29); }
.windows__ticks { display: flex; justify-content: space-between; font-size: 12px; opacity: .78; margin-top: 6px; }
@media (max-width: 420px) {
  .seg--4 { grid-auto-columns: auto; }
  .seg--4 button { padding: 8px 9px; font-size: 14px; }
}
@media (max-width: 900px) {
  .look__grid { grid-template-columns: minmax(0, 1fr); }
  .device--look { width: min(280px, 100%); }
  .reading__card { grid-template-columns: minmax(0, 1fr); }
}

/* ================= 10 · more ================= */
.more { color: var(--cream); background: #0C1714; padding: clamp(100px, 14vh, 160px) 0; }
.facts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 34px; }
.fact { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.fact:nth-child(2) { --d: .05s; } .fact:nth-child(3) { --d: .1s; } .fact:nth-child(4) { --d: .15s; } .fact:nth-child(5) { --d: .2s; } .fact:nth-child(6) { --d: .25s; }
.fact b { width: clamp(64px, 8vw, 96px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: clamp(22px, 2.6vw, 32px); font-variant-numeric: tabular-nums; color: #2A1C0A; background: radial-gradient(circle at 34% 30%, #FFF5D6, var(--gold) 52%, #C9922F 100%); box-shadow: 0 14px 30px -14px rgba(242, 204, 117, .7), inset -4px -6px 12px rgba(120, 70, 10, .25); }
.fact span { font-size: 14px; opacity: .78; }
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tile { grid-column: span 2; border-radius: 28px; padding: 24px; background: #14231F; border: 1px solid #22332D; display: flex; flex-direction: column; gap: 10px; overflow: hidden; position: relative; }
.tile h3 { font-size: 19px; }
.tile p { font-size: 15px; line-height: 1.8; color: rgba(236, 230, 214, .7); }
.tile__small { font-size: 12.5px !important; opacity: .7; }
.tile--occasions { grid-column: span 4; grid-row: span 2; }
.tile--now, .tile--search { grid-column: span 2; }
.tile--mine, .tile--seal, .tile--haptics { grid-column: span 2; }
.tile--tablet { grid-column: span 6; flex-direction: row; align-items: center; gap: 24px; }
.tile--tablet > * { flex: 1; }
.tile:nth-child(2) { --d: .06s; } .tile:nth-child(3) { --d: .12s; } .tile:nth-child(4) { --d: .06s; } .tile:nth-child(5) { --d: .12s; } .tile:nth-child(6) { --d: .18s; }
.occ { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 8px; }
.occ li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border-radius: 20px; background: #1A2B26; font-size: 13.5px; text-align: center; transition: transform .4s var(--spring), background-color .3s; }
.occ li:hover { transform: translateY(-4px); background: #20352E; }
.occ .i { width: 44px; height: 44px; padding: 11px; border-radius: 15px; background: rgba(214, 170, 85, .14); color: var(--gold-ink); }
.occ li.top { position: relative; }
.occ li.top::after { content: "الأكثر"; position: absolute; top: 8px; left: 8px; font-size: 12px; padding: 0 8px; border-radius: 99px; background: var(--green-lite); color: #0C1714; font-weight: 700; }
.now-tile { margin-top: auto; border-radius: 22px; padding: 16px; background: linear-gradient(135deg, #4F5BB8, #2E3577); color: #fff; display: flex; flex-direction: column; gap: 2px; }
.now-tile small { opacity: .8; font-weight: 600; }
.now-tile b { font-size: 21px; }
.now-tile span { font-size: 13.5px; opacity: .85; }
.now-tile__bar { display: block; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .2); margin-top: 10px; overflow: hidden; }
.now-tile__bar i { display: block; height: 100%; width: 41%; background: #fff; border-radius: 6px; transform: scaleX(0); transform-origin: right; transition: transform 1.8s var(--ease) .4s; }
.tile.in .now-tile__bar i { transform: none; }
.search-mock { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.search-mock__field { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 16px; background: #0C1714; border: 1px solid #2A3B35; min-height: 46px; font-size: 16px; }
.search-mock__field .i { width: 18px; height: 18px; opacity: .6; }
.caret { width: 2px; height: 20px; background: var(--gold); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.search-mock__hit { padding: 11px 14px; border-radius: 16px; background: #1A2B26; display: flex; flex-direction: column; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease); }
.search-mock__hit.is-on { opacity: 1; transform: none; }
.search-mock__hit b { font-size: 14px; }
.search-mock__hit span { font-family: var(--f-azkar); font-size: 18px; }
.search-mock__hit mark { background: rgba(242, 204, 117, .3); color: inherit; border-radius: 4px; padding: 0 2px; }
.mine-mock { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mine-mock .chip { background: transparent; border-color: #2A3B35; color: inherit; font-size: 13.5px; padding: 6px 14px; }
.mine-mock .chip--on { background: var(--green-lite); border-color: var(--green-lite); color: #0C1714; }
.mine-mock__count { margin-inline-start: auto; font-weight: 700; color: var(--gold); font-size: 18px; }
.seal-mock { margin-top: auto; height: 130px; display: grid; place-items: center; position: relative; }
.seal-mock svg { width: 120px; height: 120px; overflow: visible; }
.seal-mock__ring { fill: none; stroke: var(--green-lite); stroke-width: 3.5; stroke-dasharray: 252; stroke-dashoffset: 252; stroke-linecap: round; }
.seal-mock__pearl { fill: var(--cream); }
.tile.in .seal-mock__ring { animation: sealLoop 4.5s var(--ease) infinite; }
.tile.in .seal-mock__pearl { animation: pearlLoop 4.5s infinite; }
.seal-mock__check { position: absolute; width: 34px; height: 34px; color: var(--green-lite); opacity: 0; }
.tile.in .seal-mock__check { animation: checkLoop 4.5s infinite; }
@keyframes sealLoop { 0%, 14% { stroke-dashoffset: 252; filter: none; } 40% { stroke-dashoffset: 0; filter: drop-shadow(0 0 10px rgba(93, 187, 155, .9)); } 80% { stroke-dashoffset: 0; filter: drop-shadow(0 0 4px rgba(93, 187, 155, .5)); } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes pearlLoop { 0% { transform: translateY(-50px); opacity: 0; } 5% { opacity: 1; } 14% { transform: translateY(0); } 18% { transform: translateY(0) scale(1.2, .8); } 24% { transform: none; } 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes checkLoop { 0%, 38% { opacity: 0; transform: scale(.5); } 46% { opacity: 1; transform: none; } 90% { opacity: 1; } 100% { opacity: 0; } }
.haptics { margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.haptics button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px; border-radius: 16px; background: #1A2B26; font-size: 13px; transition: transform .3s var(--spring), background-color .2s; }
.haptics button:hover { background: #20352E; }
.haptics button:active, .haptics button.is-on { transform: scale(.94); background: #26403A; }
.hw { display: flex; gap: 3px; align-items: center; height: 22px; }
.hw::before, .hw::after { content: ""; display: block; width: 4px; border-radius: 3px; background: var(--gold); }
.hw--tick::before { height: 12px; } .hw--tick::after { display: none; }
.hw--double::before, .hw--double::after { height: 14px; }
.hw--long::before { height: 10px; width: 4px; } .hw--long::after { height: 20px; width: 14px; }
.hw--heavy::before { height: 22px; width: 8px; } .hw--heavy::after { display: none; }
.tablet-mock { height: 130px; border-radius: 18px; border: 2px solid #2D403A; position: relative; max-width: 260px; }
.tablet-mock__rail { position: absolute; right: 8px; top: 8px; bottom: 8px; width: 28px; border-radius: 10px; background: #1F332D; }
.tablet-mock__pane { position: absolute; left: 22%; right: 26%; top: 14px; bottom: 14px; border-radius: 10px; background: linear-gradient(180deg, #23423A, #1A2B26); }
.tile.in .tablet-mock__rail { animation: railIn 1.2s var(--ease) .3s both; }
@keyframes railIn { from { transform: translateY(120%); opacity: 0; } to { transform: none; opacity: 1; } }
.sources { margin-top: 30px; text-align: center; font-size: 13.5px; opacity: .6; max-width: 52em; margin-inline: auto; line-height: 1.8; }
@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile, .tile--occasions, .tile--now, .tile--search, .tile--mine, .tile--seal, .tile--haptics { grid-column: span 2; grid-row: auto; }
  .tile--tablet { grid-column: span 2; flex-direction: column; align-items: stretch; }
  .facts { grid-template-columns: repeat(3, 1fr); row-gap: 20px; }
}
@media (min-width: 640px) and (max-width: 1000px) {
  .tile--now, .tile--search, .tile--mine, .tile--seal { grid-column: span 1; }
}
@media (max-width: 640px) { .occ { grid-template-columns: repeat(3, 1fr); } }

/* ================= 11 · privacy ================= */
.privacy { color: var(--cream); background: radial-gradient(80% 60% at 75% 40%, #0F2E26, #0B1F1A 70%); padding: clamp(100px, 15vh, 170px) 0; overflow: hidden; }
.privacy__grid { display: grid; grid-template-columns: minmax(280px, 440px) 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.privacy__copy { order: -1; }
.privacy__svg { width: 100%; height: auto; overflow: visible; }
.checks { display: flex; flex-direction: column; gap: 18px; margin-top: 10px; }
.checks li { display: flex; gap: 16px; align-items: flex-start; }
.checks li:nth-child(2) { --d: .07s; } .checks li:nth-child(3) { --d: .14s; } .checks li:nth-child(4) { --d: .21s; }
.checks .i { width: 44px; height: 44px; padding: 10px; border-radius: 15px; background: rgba(93, 187, 155, .14); color: var(--green-lite); }
.checks b { display: block; font-size: 18px; }
.checks span { font-size: 15.5px; line-height: 1.8; opacity: .75; }
/* the ring's own motion */
.pv-orbit { transform-origin: 210px 210px; animation: pvSpin 40s linear infinite; }
.pv-o { transform-box: fill-box; transform-origin: center; animation: pvSpin 40s linear infinite reverse; }
.pv-ring circle { animation: pvBeat 4s ease-in-out infinite; }
.pv-pulse { transform-origin: 210px 210px; animation: pvGlow 4s ease-in-out infinite; }
.pv-dash { animation: pvDash 1.6s linear infinite; }
@keyframes pvSpin { to { transform: rotate(360deg); } }
@keyframes pvBeat { 0%, 100% { opacity: .9; } 50% { opacity: 1; filter: drop-shadow(0 0 4px rgba(93, 187, 155, .7)); } }
@keyframes pvGlow { 0%, 100% { opacity: .6; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.02); } }
@keyframes pvDash { to { stroke-dashoffset: -20; } }
@media (max-width: 900px) {
  .privacy__grid { grid-template-columns: minmax(0, 1fr); }
  .privacy__art { max-width: 380px; margin-inline: auto; width: 100%; }
}

/* ================= 12 · circles ================= */
.circles { color: var(--cream); background: linear-gradient(180deg, #0B1F1A 0, #0A1719 100%); padding: clamp(90px, 13vh, 150px) 0 clamp(120px, 16vh, 180px); overflow: hidden; }
.circles__grid { display: grid; grid-template-columns: 1fr minmax(280px, 480px); gap: clamp(32px, 6vw, 90px); align-items: center; }
.circles__copy .kicker { color: var(--violet-lite); }
.soon { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.soon li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px; background: rgba(245, 241, 232, .05); border: 1px dashed rgba(245, 241, 232, .18); font-size: 14.5px; }
.soon .i { width: 20px; height: 20px; color: var(--violet-lite); }
.circles__svg { width: 100%; height: auto; overflow: visible; }
.ci-lit { animation: ciLit 3.6s ease-in-out infinite; }
@keyframes ciLit { 0%, 100% { opacity: .85; } 50% { opacity: 1; filter: drop-shadow(0 0 4px rgba(242, 204, 117, .8)); } }
@media (max-width: 900px) {
  .circles__grid { grid-template-columns: minmax(0, 1fr); }
  .soon { grid-template-columns: 1fr; }
}

/* ================= 13 · finale ================= */
.finale { color: var(--cream); background: #050D0B; }
.finale__stage { display: grid; place-items: center; }
.finale__sky { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 45%, #0E2A23, #050D0B 70%); }
.finale__ring { position: absolute; left: 50%; top: 50%; width: var(--ring, 520px); height: var(--ring, 520px); transform: translate(-50%, -50%); pointer-events: none; }
.finale__glow { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(242, 204, 117, .4), rgba(242, 204, 117, .08) 45%, transparent 68%); opacity: var(--seal, 0); transform: scale(calc(.7 + var(--seal, 0) * .3)); transition: opacity .2s; }
.finale__copy { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 30em; opacity: var(--fc, 0); transform: translateY(calc((1 - var(--fc, 0)) * 24px)); }
.finale__aya { display: flex; flex-direction: column; align-items: center; color: var(--gold); }
.finale__aya .ref { opacity: 1; }
.finale__aya .aya { font-size: clamp(22px, 2.4vw, 32px); }
.finale__title { font-size: clamp(40px, 5.6vw, 80px); line-height: 1.15; font-weight: 700; }
.finale__lead { font-size: clamp(16px, 1.3vw, 19px); opacity: .8; }
@media (max-width: 759px) {
  .finale__stage { place-items: end center; padding-bottom: max(7svh, 40px); }
  .finale__aya .aya { font-size: 20px; }
}
@media (max-width: 759px) and (max-height: 720px) {
  .finale__aya { display: none; }
}
.footer { background: #050D0B; color: var(--cream); padding: 120px 0 max(40px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(245, 241, 232, .07); }
.footer__inner { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.footer__logo { width: 150px; height: auto; opacity: .9; }
.footer__line { font-family: var(--f-azkar); font-size: 18px; opacity: .8; }
.footer__small { font-size: 13px; opacity: .5; }

/* ================= static scenes and reduced motion ================= */
/* Pinned stages need a screen tall enough to hold them; otherwise (or with reduced motion) they flow. */
@media (prefers-reduced-motion: reduce), (max-height: 520px) and (orientation: landscape) {
  [data-pin] { height: auto !important; }
  .stage { position: relative; height: auto; min-height: 100svh; }
  .doze__stage { min-height: auto; padding-bottom: 40px; }
  .doze__grid { height: auto; }
  .steps li { display: block !important; opacity: 1; }
  .cap { position: relative; opacity: 1; transform: none; inset: auto; margin: 0 0 10px; }
  .rope__captions { min-height: 0; padding: 14px 20px 4px; }
  .rope__inner { height: auto; padding-block: calc(var(--head-h) + 12px) 40px; }
  .screens__stage { padding-block: calc(var(--head-h) + 12px) 40px; }
  .screens__rail { height: auto; display: flex; gap: 20px; overflow-x: auto; padding: 40px 0 20px; }
  .phone { position: relative; flex: none; transform: none !important; opacity: 1 !important; }
  .finale__copy { opacity: 1; transform: none; }
  .thread, .thread-ui, .thread-hit, .count-pill { display: none !important; }
  .lamp__arch { display: inline; }
  .cue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-in] { opacity: 1; transform: none; }
  .hero__title .line > span { opacity: 1; transform: none; filter: none; }
  .hero .lamp__link, .hero .lamp__chain, .hero .lamp__lamp, .hero .lamp__pool { opacity: 1; }
}
/* The header's pause button stops decorative loops (WCAG 2.2.2); scrolling stays the visitor's own motion. */
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }