/* The landing page's whole stylesheet.

   WHY THIS IS A FILE AND NOT A <style> BLOCK
   -----------------------------------------
   Same reason as site.js. A Content-Security-Policy that has to say
   style-src 'unsafe-inline' is also saying: any <style> or style=""
   that ever appears in this page is allowed to run. Out here the policy
   is style-src 'self' plus Google Fonts, and nothing else styles the page.

   Nothing was rewritten on the way out — no url() anywhere in here, so
   every path still resolves the same from /site.css as it did from /.
   The headers are in vercel.json. */

:root {
  --night: #041c22;
  --teal: #0b3b3e;
  --teal-2: #05202a;
  --emerald: #0f5a46;
  --gold: #d4af37;
  --gold-soft: #e9c46a;
  --gold-light: #f3d98b;
  --parchment: #f5efe0;
  --ink: #3a2c05;
  --line: rgba(212, 175, 55, 0.30);
  --line-soft: rgba(212, 175, 55, 0.16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: 'Cairo', system-ui, -apple-system, sans-serif;
  color: var(--parchment);
  /* Matches the splash: petrol-teal crown fading to a deep night floor. */
  background:
    radial-gradient(120% 70% at 50% -8%, #12545a 0%, var(--teal) 40%, var(--teal-2) 74%, var(--night) 100%);
  min-height: 100svh;
  overflow-x: hidden;
  position: relative;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Faint star lattice — the dusk sky behind the splash, kept low enough to
   read as texture, never as noise behind the text. */
.starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image:
    radial-gradient(var(--gold-light) 1px, transparent 1.4px),
    radial-gradient(var(--gold-light) 1px, transparent 1.4px);
  background-size: 48px 48px;
  background-position: 0 0, 24px 24px;
}

.content { position: relative; z-index: 1; }

.shell {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 22px;
}

/* ─── Hero ─────────────────────────────────────────────────────────── */
.hero {
  position: relative; /* positioning context so the glow can't escape to the viewport */
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 40px;
  padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 72px);
}
.hero__text { position: relative; z-index: 1; }
.hero__glow {
  position: absolute;
  top: -160px;
  left: 50%;
  width: 680px;
  height: 680px;
  max-width: 100%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(233, 196, 106, 0.18), transparent 62%);
  pointer-events: none;
  z-index: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--gold-light);
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.06);
  margin-bottom: 22px;
}
.eyebrow svg { width: 15px; height: 15px; }

.wordmark {
  font-family: 'Amiri', 'Cairo', serif;
  font-weight: 700;
  font-size: clamp(60px, 13vw, 92px);
  line-height: 0.95;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 58%, #b8860b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 6px 30px rgba(212, 175, 55, 0.16);
}
.tagline {
  font-family: 'Amiri', serif;
  font-size: clamp(22px, 5.2vw, 32px);
  font-weight: 700;
  color: var(--parchment);
  margin-top: 6px;
}
.lede {
  font-size: clamp(15px, 3.8vw, 17px);
  color: rgba(245, 239, 224, 0.78);
  max-width: 460px;
  margin: 16px 0 30px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}
.download {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  padding: 15px 34px;
  border-radius: 15px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-soft) 45%, var(--gold));
  box-shadow: 0 14px 34px rgba(212, 175, 55, 0.30);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.download:hover { transform: translateY(-2px); box-shadow: 0 20px 44px rgba(212, 175, 55, 0.42); }
.download:active { transform: translateY(0); }
.download svg { width: 21px; height: 21px; }
.platform {
  font-size: 13px;
  color: rgba(245, 239, 224, 0.55);
}
.platform b { color: rgba(245, 239, 224, 0.78); font-weight: 600; }

/* The newest published release, filled in at load from /api/config. There
   is deliberately no version number written into this file: the one place
   it lives is the release itself, so the page can never advertise a build
   that isn't the one /api/download hands out.

   Starts hidden and is only revealed once a real version arrives — a
   visitor who is offline, or a lookup that can't answer, sees no line at
   all rather than an empty label. The [hidden] rule is load-bearing:
   display below would otherwise override the attribute. */
.release {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-light);
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 5px 13px;
}
.release[hidden] { display: none; }
/* In a card the line sits under the button on its own row. */
.release--card { margin-top: 12px; }

/* How many times the app has been downloaded, filled in at load from
   /api/stats. The same pill as .release, and the same rule: no number is
   written into the page, and the line stays hidden until a real count (≥ 1)
   arrives — a fresh or unreachable store, or an app with no release yet, shows
   nothing rather than a bare "0". Kept a class of its own, not merged with
   .release, so the two can sit side by side and diverge later without one
   dragging the other. */
.downloads {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-light);
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 5px 13px;
}
.downloads[hidden] { display: none; }
.downloads--card { margin-top: 12px; }

.hero__more {
  display: inline-block;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-light);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line);
  transition: border-color 160ms ease;
}
.hero__more:hover { border-bottom-color: var(--gold-soft); }

.assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 28px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(245, 239, 224, 0.85);
}
.assurances span { display: inline-flex; align-items: center; gap: 7px; }
.assurances svg { width: 16px; height: 16px; color: var(--gold-soft); flex: none; }

/* ─── Phone with the real splash poster ─────────────────────────────── */
.device-wrap {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.device {
  position: relative;
  width: clamp(158px, 46vw, 226px);
  padding: 10px;
  border-radius: 36px;
  background: linear-gradient(155deg, #14343a, #061a20 70%);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1.5px rgba(212, 175, 55, 0.22),
    inset 0 2px 3px rgba(255, 255, 255, 0.06);
}
.device::before {
  content: '';
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  width: 74px;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  z-index: 2;
}
.device__screen {
  display: block;
  width: 100%;
  height: auto; /* let aspect-ratio drive height; the <img> height attr must not win */
  aspect-ratio: 820 / 1469; /* the splash poster's real proportions — no stretch, no empty band */
  object-fit: cover;
  border-radius: 27px;
  background: var(--teal);
}

/* ─── Sections ──────────────────────────────────────────────────────── */
.section { padding: clamp(44px, 7vw, 80px) 0; }
.section-head { text-align: center; margin-bottom: 42px; }
.section-head h2 {
  font-family: 'Amiri', serif;
  font-size: clamp(26px, 6vw, 38px);
  font-weight: 700;
  color: var(--parchment);
}
.section-head p {
  margin-top: 8px;
  font-size: 15px;
  color: rgba(245, 239, 224, 0.65);
}
/* Gilt hairline with an 8-point star at its centre — the app's own motif. */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 14px auto 0;
  max-width: 220px;
  color: var(--gold-soft);
}
.divider::before, .divider::after {
  content: '';
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--line));
}
.divider svg { width: 18px; height: 18px; flex: none; opacity: 0.9; }

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.feature {
  padding: 26px 22px;
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(15, 90, 70, 0.14), rgba(4, 28, 34, 0.24));
  transition: transform 200ms ease, border-color 200ms ease;
}
.feature:hover { transform: translateY(-4px); border-color: var(--line); }
.feature__icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid var(--line-soft);
  margin-bottom: 16px;
}
.feature__icon svg { width: 26px; height: 26px; color: var(--gold-light); }
.feature h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--parchment);
  margin-bottom: 6px;
}
.feature p {
  font-size: 14px;
  color: rgba(245, 239, 224, 0.66);
}

/* ─── Why / trust ───────────────────────────────────────────────────── */
.why {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 26px;
  max-width: 760px;
  margin: 0 auto;
}
.why__row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.why__check {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(212, 175, 55, 0.10);
  color: var(--gold-light);
}
.why__check svg { width: 19px; height: 19px; }
.why__row b { display: block; font-size: 16px; color: var(--parchment); }
.why__row span { font-size: 14px; color: rgba(245, 239, 224, 0.64); }

/* ─── Download band ─────────────────────────────────────────────────── */
.band {
  position: relative;
  text-align: center;
  padding: clamp(40px, 6vw, 60px) 30px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(15, 90, 70, 0.30), rgba(4, 28, 34, 0.42));
  overflow: hidden;
}
.band__ayah {
  font-family: 'Amiri', serif;
  font-size: clamp(20px, 5vw, 26px);
  color: var(--gold-light);
  margin-bottom: 8px;
}
.band p { color: rgba(245, 239, 224, 0.72); margin-bottom: 26px; font-size: 15px; }

/* ─── The two apps ──────────────────────────────────────────────────── */
/* One card rule, two identities: each card declares its own --accent trio
   and everything inside reads from it, so نقاء stays gilt and التراث reads
   warm without a second copy of the styles. */
.apps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  text-align: start;
}
.app-card {
  --accent-soft: var(--gold-soft);
  --accent-light: var(--gold-light);
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(15, 90, 70, 0.20), rgba(4, 28, 34, 0.34));
  transition: transform 200ms ease, border-color 200ms ease;
}
.app-card:hover { transform: translateY(-4px); }
.app-card--turath {
  --accent-soft: #c98b4b;
  --accent-light: #e6b483;
  border-color: rgba(201, 139, 75, 0.32);
  background: linear-gradient(180deg, rgba(138, 74, 43, 0.20), rgba(4, 28, 34, 0.36));
}
.app-card__head { display: flex; align-items: center; gap: 14px; }
/* The app's own launcher icon — the thing the reader will actually look for
   on their home screen afterwards, and the only mark they can recognise. A
   single Amiri letter («ن» / «ت») stood here instead, which named the app to
   nobody who didn't already know it.
   The frame is kept identical on both cards so the pair still reads as one
   family, and `object-fit: cover` means neither icon can be squashed if its
   source is ever anything but square. */
.app-card__mark {
  flex: none;
  width: 54px; height: 54px;
  border-radius: 16px;
  border: 1px solid var(--accent-soft);
  background: rgba(255, 255, 255, 0.04);
  object-fit: cover;
  /* The artwork is a full-bleed scene with its own rounded edge; clipping it
     to the frame keeps the corners from poking outside the border. */
  overflow: hidden;
}
.app-card__name {
  font-family: 'Amiri', 'Cairo', serif;
  font-size: clamp(23px, 5vw, 29px);
  font-weight: 700;
  color: var(--accent-light);
  line-height: 1.2;
}
.app-card__tag { font-size: 13.5px; color: rgba(245, 239, 224, 0.6); }
.app-card__desc { font-size: 14.5px; color: rgba(245, 239, 224, 0.76); }
.app-card__list { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; }
.app-card__list li {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(245, 239, 224, 0.76);
  padding: 5px 12px;
  border: 1px solid rgba(245, 239, 224, 0.15);
  border-radius: 999px;
}
/* Pinned to the bottom so both cards' buttons sit on one line however much
   text is above them. */
.app-card__cta { margin-top: auto; padding-top: 6px; }
/* Quiet, deliberately not alarming: it only concerns someone whose install
   refuses to update, and it saves them losing their progress to a guess. */
.app-card__hint {
  font-size: 12.5px;
  line-height: 1.8;
  color: rgba(245, 239, 224, 0.55);
  margin-top: 12px;
}
/* Not published yet: deliberately not button-shaped, so nobody taps a
   download that cannot exist. */
.soon {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-light);
  padding: 14px 28px;
  border: 1px dashed var(--accent-soft);
  border-radius: 15px;
  background: rgba(230, 180, 131, 0.07);
}
.soon svg { width: 18px; height: 18px; }

/* ─── Footer ────────────────────────────────────────────────────────── */
footer {
  text-align: center;
  padding: 48px 22px 40px;
  border-top: 1px solid var(--line-soft);
  margin-top: 20px;
}
.hadith {
  font-family: 'Amiri', serif;
  font-size: 17px;
  line-height: 1.9;
  color: var(--gold-light);
  max-width: 520px;
  margin: 0 auto 22px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-light);
  cursor: pointer;
  padding: 11px 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.06);
  transition: background 160ms ease, transform 160ms ease;
}
.share-btn:hover { background: rgba(212, 175, 55, 0.14); transform: translateY(-1px); }
.share-btn svg { width: 17px; height: 17px; }
.sadaqa { display: block; margin-top: 18px; font-size: 13px; font-weight: 600; color: rgba(245, 239, 224, 0.5); }
.dev {
  margin-top: 26px;
  font-size: 13px;
  color: rgba(245, 239, 224, 0.45);
}
.dev b { color: rgba(245, 239, 224, 0.72); font-weight: 600; }

/* Toast for the copy-link fallback of the share button. */
.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(4, 28, 34, 0.96);
  border: 1px solid var(--line);
  color: var(--parchment);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Scroll-reveal — additive; content is fully visible without JS. */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 40px; text-align: center; padding-top: clamp(40px, 12vw, 64px); }
  .hero__text { display: flex; flex-direction: column; align-items: center; }
  .lede { margin-inline: auto; }
  .cta-row, .assurances { justify-content: center; }
  .device-wrap { order: 2; }
  .features { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .apps { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}
@media (max-width: 520px) {
  .why { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .download, .feature, .share-btn, .app-card { transition: none; }
  .app-card:hover { transform: none; }
}