/* ─────────────────────────────────────────────────────────────
   Imanza — "Journey through light"
   Landing-page design system. The environment (sky, light, text
   colour) is driven by one variable — the time of day — painted on
   a fixed canvas by journey.js, which also writes the --env-* custom
   properties below. Everything else reads those tokens, so the page
   re-lights itself as the visitor scrolls or drags the sky.

   Theme tokens mirror the app (src/constants/themes.ts): Light (Default
   Green), Dark (Dark Green) and Frosted Latte — the three free themes.
   Legal pages keep using legal.css; this file is for / only.
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/Fraunces-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Amiri';
  src: url('/assets/fonts/Amiri-arabic.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}

:root {
  /* ── Environment (written live by journey.js) ── */
  --env-fg: 240 253 250;            /* rgb triplet for text */
  --env-bg: 6 9 16;                 /* rgb triplet of the sky's mean */
  --env-n: 1;                       /* 1 = night (light text), 0 = day (dark text) */
  --env-accent: 94 234 212;         /* teal that reads on the current sky */
  --env-glow: 255 200 120;          /* warm light colour (sun / horizon) */

  --fg: rgb(var(--env-fg));
  --fg-2: rgb(var(--env-fg) / 0.78);
  --fg-3: rgb(var(--env-fg) / 0.56);
  --fg-4: rgb(var(--env-fg) / 0.34);
  --hair: rgb(var(--env-fg) / 0.14);
  --hair-soft: rgb(var(--env-fg) / 0.08);
  --accent: rgb(var(--env-accent));
  --glass: rgb(var(--env-bg) / 0.28);
  --glass-strong: rgb(var(--env-bg) / 0.55);

  /* ── App theme tokens (exact, from the app) ── */
  --green: #0d9488;
  --green-deep: #0f766e;
  --green-night: #134e4a;
  --green-bright: #2dd4bf;
  --latte: #a97b52;
  --latte-bg: #efe6da;
  --dark-bg: #0a0f1a;

  /* ── Type ── */
  --serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --arabic: 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', 'Geeza Pro', 'Traditional Arabic', serif;

  --wrap: 1200px;
  --gutter: clamp(20px, 4.5vw, 56px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --nav-h: 64px;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg);
  background: rgb(var(--env-bg));
  overflow-x: hidden;
  overflow-x: clip; /* propagates to the viewport; body never becomes a scroll container (keeps sticky working) */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ic { display: inline-flex; width: 1em; height: 1em; flex: none; }
.ic svg { width: 100%; height: 100%; }

/* ── Sky (fixed environment) ───────────────────────────────── */
.sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.veil {
  /* the darkness the page opens from */
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #04060c;
  pointer-events: none;
  opacity: 1;
  transition: opacity 2.4s var(--ease-io);
}
.is-lit .veil { opacity: 0; }

/* All page content sits above the sky */
.page { position: relative; z-index: 1; overflow-x: clip; }

/* ── Typography ────────────────────────────────────────────── */
.h-display, h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
h1 { font-size: clamp(2.5rem, 5.2vw, 4.6rem); }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.8rem); }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.2; }
em { font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; }
.lede { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6; color: var(--fg-2); max-width: 36em; text-wrap: pretty; }
.eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--fg-4); }
.ar {
  font-family: var(--arabic);
  direction: rtl;
  unicode-bidi: isolate;
  line-height: 1.9;
  font-feature-settings: 'liga', 'calt';
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ── Nav ───────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: transform 0.6s var(--ease), background 0.6s ease;
}
.nav.is-scrolled { background: linear-gradient(rgb(var(--env-bg) / 0.7), rgb(var(--env-bg) / 0)); }
.nav.is-scrolled .nav__in { backdrop-filter: none; }
.nav__in {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  color: var(--fg);
}
.brand .ic { font-size: 22px; filter: drop-shadow(0 0 6px rgb(251 211 76 / 0.35)); }
.nav__links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 0.9rem;
}
.nav__links a { color: var(--fg-2); position: relative; padding: 6px 0; transition: color 0.3s; }
.nav__links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.nav__links a:hover { color: var(--fg); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links .nav__cta {
  margin-left: 6px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgb(var(--env-fg) / 0.06);
  color: var(--fg) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.3s, border-color 0.3s;
}
.nav__links .nav__cta::after { display: none; }
.nav__links .nav__cta:hover { background: rgb(var(--env-fg) / 0.12); border-color: rgb(var(--env-fg) / 0.3); }
@media (max-width: 760px) {
  .nav__links a:not(.nav__cta) { display: none; }
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.5s var(--ease), background 0.35s, border-color 0.35s, box-shadow 0.5s;
  will-change: transform;
}
.btn--primary {
  background: var(--fg);
  color: rgb(var(--env-bg));
}
.btn--primary:hover { box-shadow: 0 12px 40px -14px rgb(var(--env-fg) / 0.6); }
.btn--ghost {
  border-color: var(--hair);
  color: var(--fg);
  background: rgb(var(--env-fg) / 0.04);
}
.btn--ghost:hover { border-color: rgb(var(--env-fg) / 0.35); background: rgb(var(--env-fg) / 0.09); }
.btn[disabled] { cursor: default; opacity: 0.6; pointer-events: none; }
.btn[aria-busy='true'] { opacity: 0.85; }
.btn__spin {
  width: 15px; height: 15px; flex: none;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn__spin { animation-duration: 2.4s; } }
.btn small { display: block; font-size: 0.68rem; opacity: 0.7; letter-spacing: 0.04em; line-height: 1; margin-bottom: 3px; }
.btn b { display: block; font-weight: 600; line-height: 1; }
.btn .tag {
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1px solid currentColor; opacity: 0.7;
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: calc(var(--nav-h) + 4vh) 0 8vh;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.hero.is-dragging { cursor: grabbing; }
.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(24px, 5vw, 80px);
}
.hero__copy { position: relative; z-index: 2; }
.hero__copy > * { opacity: 0; transform: translateY(18px); transition: opacity 1.4s var(--ease), transform 1.4s var(--ease); }
.is-lit .hero__copy > * { opacity: 1; transform: none; }
.is-lit .hero__copy > :nth-child(1) { transition-delay: 1.5s; }
.is-lit .hero__copy > :nth-child(2) { transition-delay: 1.7s; }
.is-lit .hero__copy > :nth-child(3) { transition-delay: 2.0s; }
.is-lit .hero__copy > :nth-child(4) { transition-delay: 2.25s; }
.hero h1 { margin: 0 0 1.4rem; }
.hero .lede { margin: 0 0 2.2rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* The stage: device inside the dial the visitor turns */
.hero__stage {
  --dial: min(100%, 66vh, 560px);
  --dial-px: 480px; /* measured by journey.js */
  position: relative;
  min-height: min(74vh, 720px);
  display: grid;
  place-items: center;
  padding: 24px 0 48px;
}
.hero__hint {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  opacity: 0;
  transition: opacity 1.2s ease 3.2s;
}
.is-lit .hero__hint { opacity: 1; }
.hero.has-dragged .hero__hint { opacity: 0; transition-delay: 0s; }
.hero__hint::before, .hero__hint::after { content: ''; width: 28px; height: 1px; background: currentColor; opacity: 0.5; }

/* The dial: the day as a ring around the device. Midnight sits at the
   bottom, Dhuhr near the top; a point of light travels the ring. */
.dial {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--dial);
  aspect-ratio: 1;
  pointer-events: none;
}
.hero:focus-visible { outline: none; }
.hero:focus-visible .dial__ring { stroke: rgb(var(--env-fg) / 0.5); }
.dial svg { width: 100%; height: 100%; overflow: visible; transform: rotate(90deg); }
.dial__ring { fill: none; stroke: rgb(var(--env-fg) / 0.14); stroke-width: 1; }
.dial__ticks line { stroke: rgb(var(--env-fg) / 0.22); stroke-width: 1; }
.dial__lit { fill: none; stroke: rgb(var(--env-fg) / 0.6); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 0 1; transition: stroke 0.6s; }
.dial__sun { fill: rgb(var(--env-glow)); filter: drop-shadow(0 0 8px rgb(var(--env-glow) / 0.9)) drop-shadow(0 0 22px rgb(var(--env-glow) / 0.5)); }
.dial__stops { position: absolute; inset: 0; }
.stop {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  justify-items: center;
  gap: 1px;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-4);
  transition: color 0.5s;
  transform: translate(-50%, -50%) rotate(calc(var(--t) * 360deg + 180deg)) translateY(calc(var(--dial-px) * -0.5 - 30px)) rotate(calc(var(--t) * -360deg - 180deg));
}
.stop time { font-size: 0.68rem; letter-spacing: 0.02em; text-transform: none; font-variant-numeric: tabular-nums; }
.stop.is-on { color: var(--fg); }
.stop.is-past { color: var(--fg-3); }

/* ── Device ────────────────────────────────────────────────── */
.device {
  --w: min(300px, 22vw, 28vh);
  position: relative;
  width: var(--w);
  aspect-ratio: 1080 / 2300;
  border-radius: calc(var(--w) * 0.14);
  padding: calc(var(--w) * 0.028);
  background: linear-gradient(160deg, #2a2f38, #0c0f14 40%, #1a1e26);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.08),
    inset 0 0 0 2px rgb(0 0 0 / 0.6),
    0 60px 120px -40px rgb(0 0 0 / 0.75),
    0 30px 60px -30px rgb(var(--env-glow) / 0.15);
  transform-style: preserve-3d;
  will-change: transform;
}
.device::before {
  /* environmental light catching the frame */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(var(--light-angle, 200deg), rgb(var(--env-glow) / 0.35), transparent 30%, transparent 70%, rgb(var(--env-fg) / 0.08));
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.8;
}
.device__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--w) * 0.115);
  overflow: hidden;
  background: #0b0f16;
  isolation: isolate;
}
.device__screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s var(--ease-io);
  /* the screen dims with the room: full brightness by day, softer at night */
  filter: brightness(calc(1 - 0.22 * var(--env-n)));
}
.device__screen img.is-on { opacity: 1; }
.device__screen::after {
  /* glass reflection */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgb(255 255 255 / 0.10) 0%, transparent 28%, transparent 62%, rgb(255 255 255 / 0.04));
  pointer-events: none;
  z-index: 3;
}
.device__glow {
  /* light the screen throws onto the world */
  position: absolute;
  inset: -30% -60%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--env-glow) / 0.22), transparent 70%);
  pointer-events: none;
  opacity: var(--screen-on, 0);
  transition: opacity 1.5s ease;
}
.hero .device { --w: calc(var(--dial-px) * 0.36); position: relative; z-index: 1; opacity: 0; transform: translateY(40px) scale(0.96); transition: opacity 2.2s var(--ease-io) .2s, transform 2.4s var(--ease) .2s; }
.is-lit .hero .device { opacity: 1; transform: none; }
.hero .device__screen .app { opacity: 0; transition: opacity 2.2s var(--ease-io) 0.9s, background 0.8s var(--ease-io); }
.hero .device__screen .app.is-on { opacity: 1; }

/* ── Scenes (scroll storytelling) ──────────────────────────── */
.scene {
  position: relative;
  padding: 12vh 0;
}
.scene__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 6vw, 96px);
  align-items: start;
}
.scene__grid--flip .scene__stage { order: -1; }
.scene__stage {
  position: sticky;
  top: 18vh;
  height: 64vh;
  display: grid;
  place-items: center;
}
.scene__steps { display: grid; }
.step {
  min-height: 82vh;
  display: grid;
  align-content: center;
  opacity: 0.28;
  transition: opacity 0.7s ease;
}
.step.is-active { opacity: 1; }
.step h2 { margin-bottom: 1.1rem; }
.step .lede { margin: 0 0 1.6rem; }
.feat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.feat-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
  color: var(--fg-2);
  font-size: 0.98rem;
  line-height: 1.5;
}
.feat-list li .ic { font-size: 20px; color: var(--accent); margin-top: 2px; }
.feat-list li .ic svg * { stroke-width: 1.6; }
.feat-list b { color: var(--fg); font-weight: 500; }

/* Legibility: a soft pool of the sky's mean colour sits behind every block
   of copy, so text keeps its contrast while the sky moves through sunrise
   and sunset gradients. */
.step__in, .qibla__copy, .themes__copy, .premium__head, .quran-open, .contact__side, .hero__copy, .values > .wrap > h2 {
  position: relative;
}
.step__in::before, .qibla__copy::before, .themes__copy::before, .premium__head::before, .quran-open::before, .contact__side::before, .hero__copy::before {
  content: '';
  position: absolute;
  inset: -12% -18%;
  z-index: -1;
  border-radius: 40% 60% 50% 50% / 50% 40% 60% 50%;
  background: radial-gradient(ellipse at 45% 50%, rgb(var(--env-bg) / 0.6), rgb(var(--env-bg) / 0.28) 45%, rgb(var(--env-bg) / 0) 75%);
  pointer-events: none;
}
body, .nav, .btn, .feat-list li, .lede, .eyebrow, .step, .form input, .form textarea, .form select { transition: color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease; }

/* Reveal-on-scroll (one-shot) */
.rv { opacity: 0; transform: translateY(22px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { padding-top: calc(var(--nav-h) + 2vh); min-height: 0; padding-bottom: 4vh; }
  .hero__in { grid-template-columns: 1fr; gap: 6vh; }
  .hero__stage { --dial: min(64vw, 44vh); min-height: calc(var(--dial-px) + 120px); order: -1; padding: 6vh 0 64px; }
  .hero .eyebrow { font-size: 0.64rem; letter-spacing: 0.16em; }
  .stop { font-size: 0.56rem; letter-spacing: 0.08em; transform: translate(-50%, -50%) rotate(calc(var(--t) * 360deg + 180deg)) translateY(calc(var(--dial-px) * -0.5 - 18px)) rotate(calc(var(--t) * -360deg - 180deg)); }
  .stop time { display: none; }
  .hero .device { --w: calc(var(--dial-px) * 0.42); }
  .hero__hint { bottom: 8px; font-size: 0.62rem; letter-spacing: 0.12em; white-space: normal; text-align: center; width: 100%; justify-content: center; }
  .hero__hint::before, .hero__hint::after { width: 18px; }

  /* Mobile choreography: the device is pinned under the nav; each step's
     caption pins beneath it and is replaced by the next as you scroll. */
  .scene { padding: 4vh 0 0; }
  .scene__grid { grid-template-columns: 1fr; gap: 0; }
  .scene__stage {
    order: -1;
    top: var(--nav-h);
    height: 38vh;
    padding: 0;
    z-index: 2;
  }
  .scene__stage::before {
    /* captions leaving upward soften into haze beneath the device */
    content: '';
    position: absolute;
    inset: -8px calc(-1 * var(--gutter)) 0;
    background: linear-gradient(rgb(var(--env-bg) / 0.55), rgb(var(--env-bg) / 0.45) 55%, rgb(var(--env-bg) / 0));
    -webkit-mask-image: linear-gradient(#000 0, #000 55%, transparent);
    mask-image: linear-gradient(#000 0, #000 55%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    pointer-events: none;
  }
  .scene__stage .device { position: relative; z-index: 1; }
  .scene .device { --w: min(160px, 40vw, 16vh); }
  .step { min-height: 100vh; padding: 0; opacity: 0; align-content: start; transition: opacity 0.45s ease; }
  .step.is-active { opacity: 1; }
  .step__in { position: sticky; top: calc(var(--nav-h) + 38vh); padding: 2vh 0 6vh; }
  .step:last-child { min-height: 0; }
  .step:last-child .step__in { position: static; }
  .step h2 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .step .lede { font-size: 1rem; }
  .feat-list li { font-size: 0.92rem; }
}

@media (prefers-reduced-motion: reduce) {
  .veil { transition-duration: 0.6s; }
  .hero__copy > *, .hero .device, .rv { transition-duration: 0.5s !important; transition-delay: 0s !important; }
  .device__screen img { transition-duration: 0.3s; }
  .step { opacity: 1; }
}

/* ── Footer ────────────────────────────────────────────────── */
.foot { padding: 6vh 0 8vh; border-top: 1px solid var(--hair-soft); }
.foot__in { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; font-size: 0.86rem; color: var(--fg-3); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-left: auto; }
.foot nav a { color: var(--fg-2); }
.foot nav a:hover { color: var(--fg); }
.foot .copy { width: 100%; margin: 0; }

/* ── Quran opening ─────────────────────────────────────────── */
.scene--quran { padding-top: 6vh; }
.quran-open { text-align: center; padding: 10vh 0 6vh; }
.quran-open .eyebrow { justify-content: center; }
.quran-open .eyebrow::before { display: none; }
.ar--display {
  font-size: clamp(2.2rem, 5.2vw, 4.4rem);
  line-height: 1.7;
  margin: 0.2em auto 0.35em;
  color: var(--fg);
  max-width: 20ch;
}
.ar-ref { font-size: 0.92rem; color: var(--fg-3); margin: 0; letter-spacing: 0.01em; }

/* ── Tasbeeh ──────────────────────────────────────────────── */
.tasbeeh { display: flex; align-items: center; gap: 28px; margin-top: 8px; }
.tasbeeh__bead {
  position: relative;
  width: 132px; height: 132px;
  border-radius: 50%;
  border: 0;
  background: rgb(var(--env-fg) / 0.05);
  cursor: pointer;
  display: grid; place-items: center; align-content: center;
  color: var(--fg);
  transition: transform 0.25s var(--ease), background 0.3s;
  -webkit-tap-highlight-color: transparent;
}
.tasbeeh__bead:hover { background: rgb(var(--env-fg) / 0.09); }
.tasbeeh__bead:active { transform: scale(0.96); }
.tasbeeh__bead svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.tasbeeh__bead .ring { fill: none; stroke: rgb(var(--env-fg) / 0.14); stroke-width: 2; }
.tasbeeh__bead .fill { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; transition: stroke-dashoffset 0.35s var(--ease); }
.tasbeeh__n { font-family: var(--serif); font-size: 2.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.tasbeeh__of { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); margin-top: 4px; }
.tasbeeh__bead.done { animation: bead-done 0.7s var(--ease); }
@keyframes bead-done { 0% { box-shadow: 0 0 0 0 rgb(var(--env-accent) / 0.5); } 100% { box-shadow: 0 0 0 26px rgb(var(--env-accent) / 0); } }
.tasbeeh__phrase { display: grid; gap: 2px; margin: 0; }
.tasbeeh__phrase .ar { font-size: 1.7rem; line-height: 1.4; color: var(--fg); }
.tasbeeh__phrase span:last-child { font-size: 0.9rem; color: var(--fg-3); }

/* ── Qibla ────────────────────────────────────────────────── */
.qibla { position: relative; padding: 18vh 0; }
.qibla__in {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: center;
}
.compass { width: min(100%, 440px); margin: 0 auto; }
.compass svg { width: 100%; height: auto; overflow: visible; }
.c-ring { fill: none; stroke: rgb(var(--env-fg) / 0.2); stroke-width: 1; }
.c-ticks line { stroke: rgb(var(--env-fg) / 0.28); stroke-width: 1; }
.c-ticks line.major { stroke: rgb(var(--env-fg) / 0.6); stroke-width: 1.5; }
.c-card { font-family: var(--serif); font-size: 15px; fill: rgb(var(--env-fg) / 0.7); }
.c-needle { transform-origin: 200px 200px; transform: rotate(0deg); }
.c-needle line { stroke: var(--fg); stroke-width: 1.5; stroke-linecap: round; }
.c-needle circle, .c-needle path { fill: var(--fg); }
.c-hub { fill: var(--fg); }
.c-kaaba { transform-origin: 200px 200px; }
.c-kaaba { color: var(--accent); }
.c-kaaba use { stroke-width: 1.6; }
.compass__deg { text-align: center; margin: 14px 0 0; font-family: var(--serif); font-size: 1.6rem; color: var(--fg); font-variant-numeric: tabular-nums; }
.compass__deg small { display: block; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin-top: 2px; }
.qibla__copy h2 { margin-bottom: 1.1rem; }
.qibla__copy .lede { margin-bottom: 1.6rem; }

/* ── Live app replica — the Imanza 1.3.1 home screen ───────
   Calm-glass redesign: no header bar, the Hijri date set in Fraunces,
   soft cards over a tinted wash, a scrolling row of quick actions and a
   floating navbar. Tokens are the app's own (src/constants/themes.ts). */
.device__screen--live { background: var(--a-bg); }
.app {
  /* defaults: Light (Default Green) — exact app tokens */
  --a-bg: #f3f6f9; --a-surface: #ffffff; --a-surface2: #f1f5f9;
  --a-text: #0f172a; --a-text2: #334155; --a-muted: #64748b; --a-faint: #94a3b8;
  --a-accent: #0d9488; --a-accent-text: #0f766e; --a-accent-light: #f0fdfa; --a-border: #e2e8f0; --a-on-accent: #fff;
  --a-tab: rgb(255 255 255 / 0.92); --a-glow: rgb(13 148 136 / 0.13);
  --a-warn: #d97706; --a-danger: #dc2626;
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  font-family: var(--sans);
  font-size: calc(var(--w) * 0.033);
  color: var(--a-text);
  /* the app's atmosphere: two soft accent washes over the base */
  background:
    radial-gradient(120% 55% at 88% 0%, var(--a-glow), transparent 68%),
    radial-gradient(100% 45% at 0% 100%, var(--a-glow), transparent 70%),
    var(--a-bg);
  transition: background 0.8s var(--ease-io), color 0.8s var(--ease-io);
  overflow: hidden;
  user-select: none;
}
.app[data-app-theme='dark'] {
  --a-bg: #0a0f1a; --a-surface: #1e2d40; --a-surface2: #162032;
  --a-text: #e2e8f0; --a-text2: #cbd5e1; --a-muted: #94a3b8; --a-faint: #64748b;
  --a-accent: #2dd4bf; --a-accent-text: #99f6e4; --a-accent-light: #0c2a28; --a-border: #2d4060; --a-on-accent: #04211f;
  --a-tab: rgb(15 23 42 / 0.92); --a-glow: rgb(45 212 191 / 0.10);
  --a-warn: #fbbf24; --a-danger: #f87171;
}
.app[data-app-theme='latte'] {
  --a-bg: #efe6da; --a-surface: #fbf7f1; --a-surface2: #f3e9dc;
  --a-text: #2a1f16; --a-text2: #4d3b2c; --a-muted: #8a715a; --a-faint: #b39c86;
  --a-accent: #a97b52; --a-accent-text: #7a5433; --a-accent-light: #f3e9dc; --a-border: #e0d3c2; --a-on-accent: #fffaf3;
  --a-tab: rgb(251 247 241 / 0.92); --a-glow: rgb(169 123 82 / 0.12);
  --a-warn: #c47f16; --a-danger: #c0503a;
}
.app * { transition: background 0.8s var(--ease-io), color 0.8s var(--ease-io), border-color 0.8s var(--ease-io); }
.app .ic svg * { stroke-width: 1.6; }

/* header: greeting, the Hijri date, the Gregorian one beneath */
.app__hdr {
  flex: none;
  padding: 2.2em 1.3em 1em;
  display: flex; align-items: flex-start; gap: 0.8em;
  color: var(--a-text);
}
.app__hdr > div:first-child { flex: 1; min-width: 0; }
.app__hdr small { display: block; font-size: 0.78em; letter-spacing: 0.13em; text-transform: uppercase; color: var(--a-muted); }
.app__hdr b { display: block; font-family: var(--serif); font-size: 1.8em; font-weight: 400; line-height: 1.15; margin: 0.28em 0 0.12em; color: var(--a-text); }
.app__hdr em { display: block; font-style: normal; font-size: 0.88em; color: var(--a-muted); }
.app__menu {
  flex: none; width: 2.5em; height: 2.5em; border-radius: 50%;
  background: var(--a-surface2); display: grid; place-items: center; position: relative;
}
.app__menu::before {
  content: ''; width: 1.05em; height: 0.11em; border-radius: 1em;
  background: var(--a-text2);
  box-shadow: 0 -0.34em var(--a-text2), 0 0.34em var(--a-text2);
}

.app__body { flex: 1; padding: 0.4em 1.1em 6em; display: grid; gap: 0.85em; align-content: start; overflow: hidden; }

/* cards */
.app__card {
  background: var(--a-surface);
  border: 1px solid var(--a-border);
  border-radius: 1.5em;
  padding: 1.1em 1.2em;
  color: var(--a-text2);
  box-shadow: 0 1.2em 2em -1.5em rgb(0 0 0 / 0.4);
}
.app__card--soft { background: var(--a-surface2); border-color: transparent; box-shadow: none; }
.app__card p { margin: 0.8em 0 0; font-size: 0.88em; color: var(--a-muted); }
.app__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; font-size: 0.75em; letter-spacing: 0.11em; text-transform: uppercase; color: var(--a-muted); }
.app__row--big { margin-top: 0.2em; text-transform: none; letter-spacing: 0; }
.app__prayer { font-family: var(--serif); font-size: 2.1em; font-weight: 400; line-height: 1; color: var(--a-accent); }
.app__count { font-size: 1.7em; font-weight: 600; line-height: 1; color: var(--a-text); font-variant-numeric: tabular-nums; }

/* the day's five prayers: a rail with a dot per prayer */
.app__track { position: relative; height: 0.7em; margin: 1.15em 0.45em 0.7em; }
.app__track .bar { position: absolute; left: 0; right: 0; top: 50%; height: 0.16em; transform: translateY(-50%); background: var(--a-border); border-radius: 1em; }
.app__track .bar::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 25%; background: var(--a-accent); border-radius: 1em; }
.app__track i { position: absolute; top: 50%; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--a-accent); transform: translate(-50%, -50%); z-index: 1; }
.app__track i.off { background: var(--a-surface); border: 0.12em solid var(--a-border); }
.app__card--soft .app__track i.off { background: var(--a-bg); }
.app__times { display: flex; justify-content: space-between; font-size: 0.8em; color: var(--a-muted); text-align: center; }
.app__times span { display: grid; gap: 0.2em; min-width: 3em; }
.app__times b { color: var(--a-text); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1em; }
.app__times .on, .app__times .on b { color: var(--a-accent-text); }
.app__times--tr { margin-top: 0.55em; }

/* tracker + reading plan headings, with their streaks */
.app__row--title { text-transform: none; letter-spacing: 0; font-size: 1em; align-items: center; }
.app__row--title b { color: var(--a-text); font-size: 1.02em; font-weight: 600; }
.app__streak { display: inline-flex; align-items: center; gap: 0.35em; font-size: 0.88em; font-weight: 600; color: var(--a-text2); }
.app__streak .ic { font-size: 1.05em; color: var(--a-warn); }
.app__dots { display: flex; justify-content: space-between; padding: 0.9em 0.15em 0.1em; }
.app__dots span { width: 2.3em; height: 2.3em; border-radius: 50%; border: 0.11em solid var(--a-border); position: relative; }
.app__dots span.ok { background: var(--a-accent); border-color: var(--a-accent); }
.app__dots span.ok::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 0.72em; height: 0.36em;
  border-left: 0.15em solid var(--a-on-accent); border-bottom: 0.15em solid var(--a-on-accent);
  transform: rotate(-45deg) translate(0.08em, -0.08em);
}

/* the quick-action rail — it scrolls in the app, so the last one is cut */
.app__quick { display: flex; gap: 0.75em; overflow: hidden; padding: 0.15em 0.1em 0.1em; }
.app__quick span { flex: none; width: 4.5em; display: grid; justify-items: center; gap: 0.45em; font-size: 0.72em; color: var(--a-text2); text-align: center; line-height: 1.2; }
.app__quick .ic {
  width: 3.1em; height: 3.1em; padding: 0.8em; border-radius: 50%;
  background: var(--a-surface2); color: var(--a-text2);
}
.app__row--plan { text-transform: none; letter-spacing: 0; font-size: 0.92em; color: var(--a-text2); margin-top: 0.85em; }
.app__row--plan b { color: var(--a-accent-text); font-weight: 600; }
.app__bar { height: 0.4em; border-radius: 1em; background: var(--a-border); margin-top: 0.6em; overflow: hidden; }
.app__bar i { display: block; width: 90%; height: 100%; border-radius: 1em; background: var(--a-accent); }

/* ayah of the day */
.app__eyebrow { margin: 0.5em 0 0.35em; font-size: 0.7em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--a-muted); display: flex; align-items: center; gap: 0.6em; }
.app__eyebrow::before { content: ''; width: 1.7em; height: 1px; background: var(--a-faint); }
.app__ayah { margin: 0; font-size: 1.15em; line-height: 1.9; color: var(--a-text); }

/* floating navbar */
.app__tabs {
  position: absolute; left: 1.1em; right: 1.1em; bottom: 1.1em;
  height: 4em; border-radius: 3em;
  background: var(--a-tab); border: 1px solid var(--a-border);
  display: flex; justify-content: space-around; align-items: center;
  box-shadow: 0 1em 2.4em -1em rgb(0 0 0 / 0.35);
}
.app__tabs span { position: relative; display: grid; place-items: center; color: var(--a-muted); }
.app__tabs span.on { color: var(--a-accent); }
.app__tabs span.on::after { content: ''; position: absolute; bottom: -0.75em; width: 0.34em; height: 0.34em; border-radius: 50%; background: var(--a-accent); }
.app__tabs .ic { font-size: 1.45em; }

/* ── Themes ───────────────────────────────────────────────── */
.themes { position: relative; padding: 16vh 0; }
.themes__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.themes__stage { display: grid; place-items: center; }
.themes .device { --w: min(300px, 24vw, 56vh); }
.themes__copy h2 { margin-bottom: 1.1rem; }
.themes__copy .lede { margin-bottom: 1.8rem; }
.theme-picker { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 1rem; }
.theme-picker button {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 10px; border-radius: 999px;
  border: 1px solid var(--hair); background: rgb(var(--env-fg) / 0.04); color: var(--fg-2);
  cursor: pointer; font-size: 0.92rem;
  transition: border-color 0.3s, background 0.3s, color 0.3s, transform 0.4s var(--ease);
}
.theme-picker button:hover { border-color: rgb(var(--env-fg) / 0.35); color: var(--fg); }
.theme-picker button[aria-checked='true'] { border-color: var(--fg); color: var(--fg); background: rgb(var(--env-fg) / 0.1); }
.sw { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15); flex: none; }
.themes__note { color: var(--fg-3); font-size: 0.95rem; margin: 0 0 2.2rem; min-height: 1.6em; }
.more-themes p { color: var(--fg-2); font-size: 0.95rem; margin: 0 0 12px; }
.more-themes__hint { color: var(--fg-3) !important; font-size: 0.88rem !important; margin-top: 12px !important; }
.swatches { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.swatches li { width: 34px; height: 22px; border-radius: 7px; background: linear-gradient(90deg, var(--a) 50%, var(--b) 50%); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.18); transition: transform 0.4s var(--ease); }
.swatches li:hover { transform: translateY(-2px); }

/* ── Premium ──────────────────────────────────────────────── */
.premium { padding: 14vh 0; }
.premium__head { max-width: 760px; margin-bottom: 6vh; }
.premium__head h2 { margin-bottom: 1.1rem; }
.premium__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pcard {
  padding: 26px 24px 28px;
  border-radius: 20px;
  border: 1px solid var(--hair-soft);
  background: linear-gradient(160deg, rgb(var(--env-fg) / 0.06), rgb(var(--env-fg) / 0.02));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.4s, transform 0.6s var(--ease), background 0.4s;
}
.pcard:hover { border-color: var(--hair); transform: translateY(-3px); }
.pcard .ic { font-size: 24px; color: var(--accent); margin-bottom: 18px; }
.pcard .ic svg * { stroke-width: 1.5; }
.pcard h3 { font-family: var(--sans); font-weight: 500; font-size: 1.02rem; margin: 0 0 6px; letter-spacing: 0; }
.pcard p { margin: 0; color: var(--fg-3); font-size: 0.9rem; line-height: 1.5; }
.premium__note { margin: 4vh 0 0; color: var(--fg-3); font-size: 0.92rem; max-width: 62ch; }

/* ── Values ───────────────────────────────────────────────── */
.values { padding: 14vh 0; }
.values h2 { margin-bottom: 6vh; max-width: 18ch; }
.values__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.value__n { display: block; font-family: var(--serif); font-size: 0.95rem; color: var(--fg-4); margin-bottom: 18px; letter-spacing: 0.06em; }
.value h3 { font-family: var(--serif); font-size: 1.35rem; margin: 0 0 10px; letter-spacing: -0.01em; }
.value p { margin: 0; color: var(--fg-2); font-size: 0.95rem; line-height: 1.55; }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq { padding: 12vh 0; }
.faq__in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq details { border-top: 1px solid var(--hair-soft); }
.faq details:last-child { border-bottom: 1px solid var(--hair-soft); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 20px 40px 20px 0; position: relative;
  font-size: 1.05rem; color: var(--fg); font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%;
  width: 10px; height: 10px; border-right: 1px solid var(--fg-3); border-bottom: 1px solid var(--fg-3);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.4s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__body { overflow: hidden; }
.faq__body p { margin: 0 0 22px; color: var(--fg-2); line-height: 1.6; max-width: 62ch; }
.faq__body a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--fg-4); }

/* ── Waitlist ─────────────────────────────────────────────── */
.waitlist { padding: 12vh 0 0; }
.waitlist__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.waitlist__side h2 { margin-bottom: 1.1rem; }
.waitlist__note { color: var(--fg-3); font-size: 0.92rem; line-height: 1.6; max-width: 46ch; }
.waitlist__note a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--fg-4); }

/* ── Contact ──────────────────────────────────────────────── */
.contact { padding: 12vh 0; }
.contact__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.contact__side h2 { margin-bottom: 1.1rem; }
.contact__alt { color: var(--fg-3); }
.contact__alt a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--fg-4); }
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 7px; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.form input, .form textarea, .form select {
  font: inherit; font-size: 1rem; letter-spacing: 0; text-transform: none;
  color: var(--fg);
  background: rgb(var(--env-fg) / 0.05);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.3s, background 0.3s;
}
.form textarea { resize: vertical; min-height: 140px; }
.form select { appearance: none; cursor: pointer; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.form select option { color: #111; background: #fff; }
.form .opt { text-transform: none; letter-spacing: 0; color: var(--fg-4); font-size: 0.78rem; }

.form label > span:first-child { display: flex; align-items: baseline; gap: 8px; }
.form input::placeholder, .form textarea::placeholder { color: var(--fg-4); }
.form input:focus, .form textarea:focus, .form select:focus { border-color: rgb(var(--env-fg) / 0.45); background: rgb(var(--env-fg) / 0.08); }
.form .hp { position: absolute; left: -9999px; }
.form .btn { justify-self: start; margin-top: 6px; }
.form-note { margin: 0; font-size: 0.92rem; color: var(--fg-3); min-height: 1.4em; }
.form-note.ok { color: var(--accent); }
.form-note a { color: var(--fg); text-decoration: underline; }

/* ── End ──────────────────────────────────────────────────── */
.end { min-height: 100svh; display: grid; align-items: center; padding: 16vh 0 10vh; text-align: center; }
.end__in { display: grid; justify-items: center; }
.end__line { font-family: var(--serif); font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.25; color: var(--fg-2); margin: 0 0 14vh; text-wrap: balance; }
.end__brand { font-family: var(--serif); font-size: clamp(3.4rem, 10vw, 9rem); line-height: 1; letter-spacing: 0.04em; margin: 0 0 1.2rem; color: var(--fg); font-variation-settings: 'opsz' 144, 'SOFT' 50; }
.end__tag { font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-family: var(--sans); font-weight: 400; color: var(--fg-2); margin: 0 0 3rem; letter-spacing: 0; }
.end__cta { justify-content: center; }
.end__foot { margin: 3rem 0 0; color: var(--fg-4); font-size: 0.85rem; }

/* ── Responsive (sections) ────────────────────────────────── */
@media (max-width: 1000px) {
  .premium__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .qibla__in, .themes__in, .faq__in, .contact__in, .waitlist__in { grid-template-columns: 1fr; }
  .themes__stage { order: -1; }
  .themes .device { --w: min(220px, 50vw); }
  .compass { width: min(80vw, 340px); }
  .quran-open { padding: 6vh 0 2vh; }
}
@media (max-width: 560px) {
  .premium__grid, .values__grid { grid-template-columns: 1fr; }
  .tasbeeh { gap: 18px; }
  .tasbeeh__bead { width: 112px; height: 112px; }
  .end__line { margin-bottom: 9vh; }
}