/* ═══════════════════════════════════════════════════════════════════════════
   Noor — Quran & Prayer · website design system
   Implements NOOR_WEBSITE_MASTER_UI_SPEC.md (§47–§52 tokens, §40 backgrounds,
   §33 motion, §34–35 responsive, §41 light mode, §42 accessibility).

   Rule inherited from the master spec: nothing below the token blocks may
   hardcode a colour. Light mode is a pure token swap, so a literal hex further
   down would leak dark values into the light theme.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── §47 tokens — dark is the world ─────────────────────────────────────── */
:root {
  --bg:            #0B1220;
  --bg-deep:       #07101B;
  --bg-soft:       #101A2D;
  --surface:       #111B2E;
  --surface-raised:#152238;

  --gold:          #D4AF37;
  --gold-light:    #E7CE8E;
  --gold-soft:     #C69B3A;
  --bronze:        #9D7831;
  /* gold used as *text* — must clear AA on the section background */
  --gold-text:     #D8B84A;
  --gold-ink:      #07101B;   /* ink that sits on a gold fill */

  --ivory:         #F5EFE4;
  --ivory-soft:    #DDD4C4;
  --muted:         #AFA99F;
  --faint:         #948E85;

  --border-gold:      rgba(212,175,55,.28);
  --border-gold-soft: rgba(212,175,55,.13);
  --border-gold-mid:  rgba(212,175,55,.19);
  --border-gold-hi:   rgba(212,175,55,.55);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-soft: 0 24px 80px rgba(0,0,0,.28);
  --shadow-card: 0 24px 64px rgba(0,0,0,.18);
  --shadow-phone: 0 34px 74px rgba(0,0,0,.52), 0 0 0 1px rgba(255,255,255,.06);

  --container: 1280px;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* §40 section background ingredients */
  --page-a: #07101B;
  --page-b: #0B1220;
  --page-c: #08111F;
  --glow-gold:  rgba(212,175,55,.08);
  --glow-gold-2:rgba(212,175,55,.045);
  --field-ink:  rgba(212,175,55,.055);   /* geometric lattice stroke */
  --field-opacity: 1;

  /* surfaces & chrome */
  --card-a: rgba(21,34,56,.94);
  --card-b: rgba(10,20,35,.94);
  --glass:  rgba(255,255,255,.035);
  --glass-2:rgba(255,255,255,.022);
  --header-bg:   rgba(7,16,27,.78);
  --header-line: rgba(212,175,55,.13);
  --gold-fill: linear-gradient(180deg, #E4C76E 0%, #C99E36 100%);
  --gold-fill-shadow: 0 10px 28px rgba(212,175,55,.18);

  /* device mockups — §10 */
  --phone-bezel: #171B24;
  --phone-body:  #05080F;
  --screen-a:    #0C1627;
  --screen-b:    #0A101B;
  /* Text painted INSIDE a device screen. The screen stays dark in both themes
     (the real captures are a dark app UI), so these must not flip with the
     theme the way --ivory / --muted do. */
  --screen-ink:  #DDD4C4;
  --screen-sub:  #9AA3B0;
  --widget-bg:   #101A2A;
  --widget-ink:  #F5EFE4;
  --widget-sub:  #A7B0BE;
  --lock-a: #14213A;
  --lock-b: #0C1422;
  --lock-c: #090E16;
}

/* ── §41 light mode — ivory paper, bronze gold, dark ink ────────────────── */
html[data-theme="light"] {
  --bg:            #F5F0E7;
  --bg-deep:       #EEE7DA;
  --bg-soft:       #F0E9DC;
  --surface:       #FBF8F2;
  --surface-raised:#FFFDF8;

  --gold:          #B58C2F;
  --gold-light:    #C9A445;
  --gold-soft:     #9A7726;
  --bronze:        #7E621F;
  --gold-text:     #7C5F1C;   /* AA on ivory paper at 12px */
  --gold-ink:      #FFFBF2;

  --ivory:         #172033;   /* the "primary text" role, now dark ink */
  --ivory-soft:    #33405A;
  --muted:         #56514A;
  --faint:         #6B655C;

  --border-gold:      rgba(181,140,47,.38);
  --border-gold-soft: rgba(181,140,47,.20);
  --border-gold-mid:  rgba(181,140,47,.28);
  --border-gold-hi:   rgba(181,140,47,.62);

  --shadow-soft: 0 24px 70px rgba(58,44,12,.12);
  --shadow-card: 0 16px 44px rgba(58,44,12,.10);
  --shadow-phone: 0 30px 60px rgba(58,44,12,.22), 0 0 0 1px rgba(181,140,47,.20);

  --page-a: #FDFAF4;
  --page-b: #F5F0E7;
  --page-c: #EFE7D8;
  --glow-gold:  rgba(181,140,47,.14);
  --glow-gold-2:rgba(181,140,47,.09);
  --field-ink:  rgba(181,140,47,.16);
  --field-opacity: 1;

  --card-a: rgba(255,255,255,.86);
  --card-b: rgba(255,253,246,.62);
  --glass:  rgba(255,255,255,.70);
  --glass-2:rgba(255,255,255,.50);
  --header-bg:   rgba(250,246,238,.84);
  --header-line: rgba(181,140,47,.26);
  --gold-fill: linear-gradient(180deg, #C9A445 0%, #A8842A 100%);
  --gold-fill-shadow: 0 10px 28px rgba(181,140,47,.26);

  /* Device chrome stays dark on purpose: the real captures are a dark app UI,
     and a cream bezel around a dark screen reads as a rendering mistake. */
  --phone-bezel: #2A2519;
  --phone-body:  #171308;
  --screen-a:    #0C1627;
  --screen-b:    #0A101B;
  --widget-bg:   #FFFDF8;
  --widget-ink:  #172033;
  --widget-sub:  #56514A;
  --lock-a: #1A2C4B;
  --lock-b: #12203A;
  --lock-c: #0D182C;
}

/* ── base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Phone clusters bleed past the container by design; clip that bleed rather
     than let it become a sideways scroll. `clip` keeps position:sticky alive. */
  overflow-x: clip;
  color: var(--ivory);
  background: var(--page-b);
  /* §3.2 — restrained serif for display, clean sans for body */
  font-family: "DM Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.72;
  transition: background-color .35s ease, color .35s ease;
  -webkit-font-smoothing: antialiased;
}

/* Page canvas as a fixed layer rather than `background-attachment: fixed` on
   body — the latter is a known repaint cost and misbehaves in iOS Safari. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(circle at 70% 12%, var(--glow-gold), transparent 30%),
    radial-gradient(circle at 12% 62%, var(--glow-gold-2), transparent 26%),
    linear-gradient(180deg, var(--page-a) 0%, var(--page-b) 48%, var(--page-c) 100%);
}

html[lang="ar"] body {
  /* §3.1 */
  font-family: "Noto Kufi Arabic", "Noto Sans Arabic", "IBM Plex Sans Arabic",
               "Segoe UI", system-ui, sans-serif;
  line-height: 1.9;
}

a   { color: inherit; }
img { max-width: 100%; display: block; }
button, a { -webkit-tap-highlight-color: transparent; }

::selection { background: var(--gold); color: var(--gold-ink); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.icon { width: 1em; height: 1em; display: block; fill: none; stroke: currentColor;
        stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.icon * { vector-effect: non-scaling-stroke; }

/* ── §51 section shell + §5 container ───────────────────────────────────── */
.noor-container {
  width: min(calc(100% - 40px), var(--container));
  margin-inline: auto;
}
@media (min-width: 1440px) { .noor-container { width: min(calc(100% - 160px), var(--container)); } }
@media (min-width: 1200px) and (max-width: 1439px) { .noor-container { width: min(calc(100% - 112px), var(--container)); } }
@media (min-width: 768px) and (max-width: 1199px)  { .noor-container { width: calc(100% - 64px); } }

.noor-section {
  position: relative;
  padding: clamp(88px, 9vw, 144px) 0;
  overflow: clip;
}

/* §40 A — deep plain navy (default, nothing extra) */
/* §40 B — navy + subtle radial glow, for phone showcases */
.bg-glow::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 40%, var(--glow-gold), transparent 70%);
}
/* §40 C — navy + faint geometric field, for knowledge / privacy / footer */
.bg-field::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: var(--field-opacity);
  background-image:
    linear-gradient(30deg,  transparent 24%, var(--field-ink) 25%, var(--field-ink) 26%, transparent 27%, transparent 74%, var(--field-ink) 75%, var(--field-ink) 76%, transparent 77%),
    linear-gradient(150deg, transparent 24%, var(--field-ink) 25%, var(--field-ink) 26%, transparent 27%, transparent 74%, var(--field-ink) 75%, var(--field-ink) 76%, transparent 77%);
  background-size: 56px 96px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.band {
  border-block: 1px solid var(--border-gold-soft);
  background: linear-gradient(180deg, rgba(0,0,0,0), var(--glass-2));
}

/* ── §12 section title system ───────────────────────────────────────────── */
h1, h2, h3, h4 { margin-top: 0; line-height: 1.16; }
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] .display {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -.015em;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--gold-text);
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  margin: 0 0 14px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); flex: none; }
html[lang="ar"] .eyebrow { letter-spacing: .04em; }

.section-head { max-width: 720px; margin-bottom: clamp(44px, 5vw, 68px); }
.section-head h2 { font-size: clamp(30px, 4.2vw, 56px); margin-bottom: 10px; }
.section-head .sub-en {
  color: var(--gold-text); font-size: 15px; letter-spacing: .04em;
  margin: 0 0 16px; font-weight: 600;
}
.section-head p { color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); margin: 0; }
.section-head.centered { margin-inline: auto; text-align: center; }
.section-head.centered .eyebrow { justify-content: center; }

/* §32 dividers */
.rosette {
  display: flex; align-items: center; gap: 14px; justify-content: center;
  color: var(--gold); opacity: .45; margin-top: 24px;
}
.rosette::before, .rosette::after {
  content: ""; height: 1px; width: clamp(40px, 8vw, 96px);
  background: linear-gradient(90deg, transparent, currentColor);
}
.rosette::after { background: linear-gradient(270deg, transparent, currentColor); }
.rosette span { font-size: 11px; letter-spacing: .5em; }
.section-head.centered .rosette { margin-inline: auto; }

/* ── §6 global header ───────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-stuck {
  background: var(--header-bg);
  border-bottom-color: var(--header-line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.header-inner {
  min-height: 86px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
@media (max-width: 767px) { .header-inner { min-height: 68px; } }

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark {
  width: 44px; height: 44px; flex: none; color: var(--gold);
  border: 1px solid var(--border-gold); border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--glow-gold), transparent 70%);
  box-shadow: inset 0 0 22px var(--glow-gold);
}
.brand-mark .icon { width: 24px; height: 24px; }
.brand-copy { display: grid; line-height: 1.1; }
.brand-copy b { font-size: 18px; letter-spacing: .01em; }
.brand-copy small { color: var(--muted); font-size: 11px; margin-top: 3px; letter-spacing: .04em; }

.site-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.site-nav a {
  position: relative; text-decoration: none; color: var(--ivory-soft);
  font-size: 14px; padding: 8px 2px; transition: color .2s var(--ease);
}
.site-nav a::after {
  content: ""; position: absolute; inset-inline-start: 50%; bottom: 0;
  width: 0; height: 1px; background: var(--gold);
  transform: translateX(-50%); transition: width .24s var(--ease);
}
html[dir="rtl"] .site-nav a::after { transform: translateX(50%); }
.site-nav a:hover, .site-nav a.is-active { color: var(--gold-text); }
.site-nav a:hover::after, .site-nav a.is-active::after { width: 30px; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.pill-btn {
  appearance: none; font: inherit; cursor: pointer;
  min-height: 44px; min-width: 44px; padding: 0 14px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--border-gold-mid); border-radius: 999px;
  background: var(--glass); color: var(--ivory);
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.pill-btn:hover { border-color: var(--gold); color: var(--gold-text); }
.pill-btn .icon { width: 18px; height: 18px; }
#themeToggle .icon-sun { display: none; }
html[data-theme="light"] #themeToggle .icon-sun { display: block; }
html[data-theme="light"] #themeToggle .icon-moon { display: none; }
/* Specificity note: `.btn` also sets display:inline-flex and is declared later,
   so a bare `.header-cta { display:none }` loses. Qualify it. */
.header-actions .header-cta { display: none; }
@media (min-width: 1100px) { .header-actions .header-cta { display: inline-flex; } }

/* ── §26/§49/§50 buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 14px;
  text-decoration: none; font-weight: 700; font-size: 15px;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              filter .2s var(--ease), border-color .2s var(--ease);
}
.btn .icon { width: 20px; height: 20px; flex: none; }
.btn-primary {
  background: var(--gold-fill); color: var(--gold-ink); border: 0;
  box-shadow: var(--gold-fill-shadow);
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.05);
  box-shadow: 0 14px 38px rgba(212,175,55,.24); }
.btn-secondary {
  border-color: var(--border-gold-hi); background: var(--glass); color: var(--ivory);
}
.btn-secondary:hover { transform: translateY(-2px); border-color: var(--gold); }
.btn-secondary .icon { color: var(--gold-text); }
.btn-stack { display: grid; line-height: 1.15; text-align: start; }
.btn-stack small { font-size: 10px; font-weight: 600; opacity: .78; letter-spacing: .04em; }
.btn-stack b { font-size: 16px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta-row.centered { justify-content: center; }
.micro-note { margin-top: 14px; color: var(--faint); font-size: 12.5px; }

/* ── §48 cards ──────────────────────────────────────────────────────────── */
.noor-card {
  background: linear-gradient(180deg, var(--card-a), var(--card-b));
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), var(--shadow-card);
  padding: 28px;
  position: relative; overflow: hidden;
  transition: border-color .24s var(--ease), transform .24s var(--ease);
}
.noor-card:hover { border-color: var(--border-gold-hi); }
.noor-card h3 { font-size: 20px; margin-bottom: 10px; }
.noor-card p  { color: var(--muted); font-size: 14.5px; margin: 0; }

.card-icon {
  width: 48px; height: 48px; border-radius: 15px; color: var(--gold);
  border: 1px solid var(--border-gold-mid); display: grid; place-items: center;
  margin-bottom: 22px;
  background: linear-gradient(150deg, var(--glow-gold), transparent 75%);
}
.card-icon .icon { width: 24px; height: 24px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* ── §11 mihrab frame ───────────────────────────────────────────────────── */
.mihrab {
  position: relative;
  width: min(100%, 460px); margin-inline: auto;
  padding: 26px 26px 30px;
  border: 1px solid var(--border-gold);
  border-radius: 230px 230px var(--radius-xl) var(--radius-xl);
  background:
    radial-gradient(ellipse 70% 40% at 50% 88%, var(--glow-gold), transparent 70%),
    linear-gradient(180deg, var(--glow-gold-2), var(--glass-2));
  box-shadow: var(--shadow-soft), inset 0 0 70px var(--glow-gold-2);
}
.mihrab::before, .mihrab::after {
  content: ""; position: absolute; pointer-events: none;
  border: 1px solid var(--border-gold-mid);
  border-radius: 214px 214px 26px 26px;
}
.mihrab::before { inset: 13px; }
.mihrab::after  { inset: 34px 46px 46px; border-color: var(--border-gold-soft); }
.mihrab > * { position: relative; z-index: 1; }

.skyline {
  position: absolute; inset-inline: 0; bottom: 0; height: 130px; z-index: 0;
  color: var(--gold); opacity: .22; pointer-events: none;
}
.skyline svg { width: 100%; height: 100%; display: block; }

/* ── §10 phone mockups ──────────────────────────────────────────────────── */
.phone {
  width: 100%; aspect-ratio: 322 / 698;
  border-radius: 40px; border: 7px solid var(--phone-bezel); padding: 8px;
  background: var(--phone-body); box-shadow: var(--shadow-phone);
  position: relative; flex: none;
}
.phone .screen {
  height: 100%; border-radius: 30px; overflow: hidden; position: relative;
  background: linear-gradient(180deg, var(--screen-a), var(--screen-b));
}
.phone .screen img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  border-radius: inherit;
}
/* §10 named screenshot placeholder — never dressed up as a real screen */
.screen-placeholder {
  height: 100%; display: grid; place-content: center; justify-items: center;
  gap: 10px; text-align: center; padding: 26px;
  background:
    radial-gradient(circle at 50% 28%, var(--glow-gold), transparent 60%),
    linear-gradient(180deg, var(--screen-a), var(--screen-b));
}
.screen-placeholder .mark {
  width: 58px; height: 58px; border-radius: 50%; color: #D4AF37;
  border: 1px dashed rgba(212,175,55,.55); display: grid; place-items: center;
}
.screen-placeholder .mark .icon { width: 26px; height: 26px; }
.screen-placeholder b    { color: var(--screen-ink); font-size: 13px; font-weight: 600; }
.screen-placeholder span { color: var(--screen-sub); font-size: 11.5px; line-height: 1.5; }

.phone-stage { display: flex; align-items: center; justify-content: center; position: relative; }
.phone-stage .phone { width: 260px; }
.phone-cluster { display: flex; align-items: center; justify-content: center; min-height: 560px; }
.phone-cluster .phone { width: 236px; }
.phone-cluster .aside-start { transform: translateX(56px) rotate(4.5deg) scale(.86); opacity: .78; }
.phone-cluster .aside-end   { transform: translateX(-56px) rotate(-4.5deg) scale(.86); opacity: .78; }
html[dir="ltr"] .phone-cluster .aside-start { transform: translateX(-56px) rotate(-4.5deg) scale(.86); }
html[dir="ltr"] .phone-cluster .aside-end   { transform: translateX(56px) rotate(4.5deg) scale(.86); }
.phone-cluster .lead { z-index: 2; }

/* ── §8 hero ────────────────────────────────────────────────────────────── */
.hero { padding: clamp(56px, 7vw, 110px) 0 clamp(72px, 8vw, 130px); position: relative; }
.hero-grid {
  display: grid; grid-template-columns: 1.04fr .96fr;
  gap: clamp(40px, 5vw, 80px); align-items: center;
}
.hero h1 { margin: 0 0 20px; display: grid; gap: 6px; }
.wordmark {
  font-family: "Noto Kufi Arabic", "Noto Sans Arabic", system-ui, sans-serif;
  font-size: clamp(64px, 8vw, 104px); font-weight: 700; line-height: 1.1;
  color: var(--gold-light); letter-spacing: 0;
  text-shadow: 0 0 60px var(--glow-gold);
}
html[data-theme="light"] .wordmark { color: var(--bronze); text-shadow: none; }
.h1-line { font-size: clamp(28px, 3.4vw, 52px); color: var(--ivory); font-weight: 600; }
.hero-lede { color: var(--ivory-soft); font-size: clamp(17px, 1.5vw, 21px); max-width: 30em; margin: 0 0 30px; }
.hero-langline {
  margin-top: 22px; display: inline-flex; align-items: center; gap: 9px;
  color: var(--muted); font-size: 13.5px;
}
.hero-langline .icon { width: 17px; height: 17px; color: var(--gold-text); }

.crescent-spark {
  position: absolute; inset-inline-end: 8%; top: 12%; color: var(--gold);
  opacity: .5; pointer-events: none;
}
.crescent-spark .icon { width: 26px; height: 26px; }
.star-field { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.star-field i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold); opacity: .5;
  animation: twinkle 5.5s var(--ease) infinite;
}
@keyframes twinkle { 0%,100% { opacity: .22; } 50% { opacity: .7; } }

/* ── §9 feature chips ───────────────────────────────────────────────────── */
.chip-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.chip {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  min-height: 108px; justify-content: center; text-align: center;
  padding: 18px 12px; border-radius: var(--radius-md);
  border: 1px solid var(--border-gold-mid);
  background: linear-gradient(180deg, var(--card-a), var(--card-b));
  color: var(--ivory-soft); text-decoration: none; font-size: 13.5px;
  transition: border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.chip .icon { width: 24px; height: 24px; color: var(--gold); }
.chip:hover {
  border-color: var(--border-gold-hi); transform: translateY(-2px);
  box-shadow: 0 12px 34px var(--glow-gold);
}

/* ── §13 alternating feature rows ───────────────────────────────────────── */
.feature-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 76px); align-items: center;
}
.feature-row.flip .feature-copy   { order: 2; }
.feature-row.flip .feature-visual { order: 1; }
.seq {
  color: var(--gold-text); font-size: 12px; font-weight: 700;
  letter-spacing: .22em; margin-bottom: 14px;
}
.feature-copy h2 { font-size: clamp(27px, 3.2vw, 40px); margin-bottom: 8px; }
.feature-copy .sub-en { color: var(--gold-text); font-size: 15px; font-weight: 600; margin: 0 0 16px; }
.feature-copy > p { color: var(--muted); margin: 0; font-size: 16.5px; }

.benefits { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.benefits li { display: flex; align-items: flex-start; gap: 12px; color: var(--ivory-soft); font-size: 15px; }
.benefits .icon { width: 20px; height: 20px; color: var(--gold); flex: none; margin-top: 4px; }

/* ── §17 qibla compass ──────────────────────────────────────────────────── */
.compass { width: min(100%, 340px); margin-inline: auto; color: var(--gold); }
.compass svg { width: 100%; height: auto; display: block; }
.distance-card {
  margin: 26px auto 0; max-width: 320px; text-align: center;
  padding: 16px 20px; border-radius: var(--radius-md);
  border: 1px solid var(--border-gold-mid); background: var(--glass);
}
.distance-card b { display: block; color: var(--ivory); font-size: 15px; }
.distance-card span { color: var(--muted); font-size: 12.5px; }

/* ── §20 knowledge timeline ─────────────────────────────────────────────── */
.timeline { position: relative; display: grid; gap: 22px; padding-inline-start: 30px; }
.timeline::before {
  content: ""; position: absolute; inset-block: 8px; inset-inline-start: 5px; width: 1px;
  background: linear-gradient(180deg, transparent, var(--border-gold-hi), transparent);
}
.timeline article { position: relative; }
.timeline article::before {
  content: ""; position: absolute; inset-inline-start: -30px; top: 10px;
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid var(--gold); background: var(--bg-deep);
}
.timeline h3 { font-size: 18px; margin-bottom: 4px; }
.timeline p  { color: var(--muted); font-size: 14.5px; margin: 0; }
.source-note {
  margin-top: 30px; padding: 20px 22px; border-radius: var(--radius-md);
  border: 1px solid var(--border-gold-soft); background: var(--glass-2);
  color: var(--muted); font-size: 14px;
}
.source-note b { color: var(--ivory-soft); }

/* ── §22 zakat / gold module ────────────────────────────────────────────── */
.module-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.pending-pill {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  padding: 7px 12px; border-radius: 999px; font-size: 12px;
  border: 1px solid var(--border-gold-soft); color: var(--muted); background: var(--glass-2);
}

/* ── §24 widgets & lock screen ──────────────────────────────────────────── */
.widgets-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 4vw, 60px); align-items: center; }
.lock-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lockscreen {
  border-radius: 34px; border: 1px solid var(--border-gold-mid);
  aspect-ratio: 322 / 640; padding: 22px 18px;
  background:
    radial-gradient(circle at 50% 18%, rgba(212,175,55,.14), transparent 42%),
    linear-gradient(180deg, var(--lock-a) 0%, var(--lock-b) 62%, var(--lock-c) 100%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  box-shadow: var(--shadow-soft); color: #F0EBDF; text-align: center;
}
.island { width: 90px; height: 27px; border-radius: 999px; background: #000; flex: none;
          border: 1px solid rgba(255,255,255,.07); }
.island.live {
  width: 100%; max-width: 240px; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; justify-content: space-between; height: 34px;
  color: #F0EBDF; font-size: 11px;
}
.island.live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }
.lock-time { font-size: 44px; font-weight: 300; letter-spacing: -.03em; line-height: 1.1; margin-top: 4px; }
.lock-date { font-size: 12px; color: #C9C3B5; }
.lock-widget {
  margin-top: auto; width: 100%; border-radius: 16px; padding: 10px 12px;
  border: 1px solid rgba(212,175,55,.30); background: rgba(9,15,26,.55);
  display: flex; align-items: center; gap: 9px; font-size: 11.5px; text-align: start;
}
.lock-widget .icon { width: 16px; height: 16px; color: var(--gold); flex: none; }

.widget-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.widget-card {
  border-radius: 22px; padding: 18px; min-height: 128px;
  border: 1px solid var(--border-gold-mid); background: var(--widget-bg);
  color: var(--widget-ink); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
}
.widget-card .wtop { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; color: var(--widget-sub); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.widget-card .wtop .icon { width: 16px; height: 16px; color: var(--gold); }
.widget-card .wbig { font-size: 21px; font-weight: 700; line-height: 1.25; }
.widget-card .wsub { color: var(--widget-sub); font-size: 12px; }
.widget-card .wrow { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--widget-sub); }
.widget-card .wrow b { display: block; color: var(--widget-ink); font-size: 12px; font-weight: 600; }

.illustration-note {
  margin-top: 18px; display: flex; align-items: center; gap: 9px;
  color: var(--faint); font-size: 12px;
}
.illustration-note .icon { width: 15px; height: 15px; flex: none; }

/* ── §23 privacy ────────────────────────────────────────────────────────── */
.shield-emblem {
  width: 84px; height: 84px; margin: 0 auto 26px; color: var(--gold);
  border: 1px solid var(--border-gold); border-radius: 26px; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--glow-gold), transparent 72%);
  box-shadow: inset 0 0 34px var(--glow-gold-2);
}
.shield-emblem .icon { width: 40px; height: 40px; }
.privacy-strip {
  display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center;
  margin-top: 22px; padding: 24px 28px; border-radius: var(--radius-lg);
  border: 1px solid var(--border-gold-mid); background: var(--glass-2);
}
.privacy-strip h3 { font-size: 18px; margin-bottom: 6px; }
.privacy-strip p { color: var(--muted); font-size: 14px; margin: 0; }
.privacy-strip .btn { white-space: nowrap; }

/* ── §37 languages ──────────────────────────────────────────────────────── */
.lang-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.lang-chip {
  border: 1px solid var(--border-gold-soft); border-radius: 999px;
  padding: 10px 16px; font-size: 13.5px; color: var(--ivory-soft);
  background: var(--glass-2);
}
.lang-chip[data-native] { font-family: system-ui, "Segoe UI", sans-serif; }

/* ── §25 Noor Plus ──────────────────────────────────────────────────────── */
.plus-panel {
  border: 1px solid var(--border-gold); border-radius: var(--radius-xl);
  padding: clamp(30px, 4vw, 54px);
  background:
    radial-gradient(circle at 82% 0%, var(--glow-gold), transparent 42%),
    linear-gradient(160deg, var(--surface-raised), var(--bg) 72%);
  box-shadow: var(--shadow-soft); position: relative; overflow: hidden;
}
html[data-theme="light"] .plus-panel {
  background:
    radial-gradient(circle at 82% 0%, var(--glow-gold), transparent 42%),
    linear-gradient(160deg, var(--surface-raised), var(--bg-deep) 72%);
}
.plus-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 4vw, 52px); align-items: start; }
.plus-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 800;
  background: var(--gold-fill); color: var(--gold-ink);
}
.plus-badge .icon { width: 14px; height: 14px; }
.plus-panel p { color: var(--muted); }
.plans { display: grid; gap: 12px; }
.plan {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; border-radius: var(--radius-md);
  border: 1px solid var(--border-gold-mid); background: var(--glass-2);
}
.plan b { font-size: 16px; display: block; }
.plan .kind { color: var(--faint); font-size: 11.5px; letter-spacing: .05em; }
.plan .price { color: var(--gold-text); font-size: 12.5px; font-weight: 600; text-align: end; }

/* ── §17 final CTA ──────────────────────────────────────────────────────── */
.final-cta { text-align: center; }
.final-cta h2 { font-size: clamp(30px, 4.4vw, 56px); margin-bottom: 14px; }
.final-cta p { color: var(--muted); max-width: 46em; margin: 0 auto 30px; }

/* ── §36 footer ─────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border-gold-soft);
  padding: clamp(50px, 6vw, 80px) 0 40px;
  position: relative; overflow: clip;
}
.footer-grid {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr) 1.3fr;
  gap: clamp(24px, 3vw, 44px);
}
.footer-grid h4 {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-text); margin-bottom: 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer-col a { color: var(--muted); text-decoration: none; font-size: 14px; }
.footer-col a:hover { color: var(--gold-text); }
.footer-brand p { color: var(--muted); font-size: 14px; margin: 14px 0 0; max-width: 30em; }
/* §42 — 44px minimum hit area */
.footer-brand .domain {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px;
  color: var(--gold-text); font-size: 14px; text-decoration: none;
}
.footer-col ul a, .site-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--border-gold-soft);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  color: var(--faint); font-size: 12.5px;
}

/* ── §33 motion ─────────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.float { animation: float 7s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .float, .star-field i { animation: none !important; }
  * { transition-duration: .01ms !important; }
}

/* ── §34 responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .chip-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
  .hero-grid, .feature-row, .feature-row.flip, .widgets-grid, .plus-grid {
    grid-template-columns: 1fr;
  }
  /* grid children default to min-width:auto — without this the phone clusters
     size their own track and drag the page into a sideways scroll. */
  .hero-grid > *, .feature-row > *, .widgets-grid > *, .plus-grid > *,
  .module-row > *, .grid-3 > * { min-width: 0; }
  .feature-row.flip .feature-copy, .feature-row.flip .feature-visual { order: initial; }
  /* §35 — CTA before the phone on small screens */
  .hero-grid .hero-visual { order: 2; }
  .grid-3, .module-row { grid-template-columns: repeat(2, 1fr); }
  .timeline-wrap { margin-top: 8px; }

  /* §34 — once the feature rows have stacked, the overlapped desktop phone
     cluster is wider than the column and pushes the page sideways (worse in
     LTR, where it overflows the scrollable end). Become a swipe gallery. */
  .phone-cluster {
    display: flex; overflow-x: auto; gap: 18px; scroll-snap-type: x mandatory;
    justify-content: flex-start; padding-block: 6px; scrollbar-width: none;
    min-height: 0;
  }
  .phone-cluster::-webkit-scrollbar { display: none; }
  .phone-cluster .phone { width: 232px; min-width: 232px; scroll-snap-align: center; }
  .phone-cluster .aside-start, .phone-cluster .aside-end,
  html[dir="ltr"] .phone-cluster .aside-start, html[dir="ltr"] .phone-cluster .aside-end {
    transform: none; opacity: 1;
  }
}

@media (max-width: 767px) {
  body { font-size: 16px; }
  .noor-container { width: calc(100% - 40px); }
  .site-nav { display: none; }
  .brand-copy small { display: none; }
  .chip-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .grid-4, .module-row, .widget-cards, .lock-pair { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-row .btn { flex: 1 1 100%; }          /* §34 full-width CTAs */
  .phone-cluster { gap: 14px; }
  .phone-cluster .phone { width: 210px; min-width: 210px; }
  .privacy-strip { grid-template-columns: 1fr; }
  .privacy-strip .btn { width: 100%; }
  .mihrab { padding: 16px 16px 20px; border-radius: 180px 180px 26px 26px; }
  .mihrab::after { inset: 26px 30px 34px; }
  .phone-stage .phone { width: 232px; }
  .lock-time { font-size: 38px; }
  .timeline { padding-inline-start: 26px; }
}