/* ============================================================
   Siraj Pro — marketing site
   Matches the real in-app design (CelestialDesign + AccentTheme).
   ============================================================ */

:root {
  /* App accent (the actual #6BC7DB teal the app uses on itself) */
  --accent: #6BC7DB;
  --accent-soft: #5CC7C7;     /* onboarding accent */
  --accent-rgb: 107, 199, 219;
  --accent-deep: #238396;

  /* CTA gradient (the signature button) */
  --btn-start: #CEF7FF;
  --btn-end:   #238396;

  /* Background — fixed dark teal → black, the same vertical gradient
     CelestialBackground uses in the app. */
  --bg-0: #00131B;
  --bg-1: #000A0F;
  --bg-2: #000000;

  /* Surfaces */
  --surface: rgba(0, 0, 0, 0.55);
  --surface-stroke: rgba(255, 255, 255, 0.08);
  --surface-stroke-bright: rgba(255, 255, 255, 0.18);

  /* Text */
  --text:        #ffffff;
  --text-mid:    rgba(255, 255, 255, 0.72);
  --text-soft:   rgba(255, 255, 255, 0.55);
  --text-low:    rgba(255, 255, 255, 0.42);
  --text-faint:  rgba(255, 255, 255, 0.28);

  /* Typography */
  --sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Cormorant Garamond', 'Iowan Old Style', serif;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 30px;
  --pill: 9999px;

  --max: 1200px;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg-2);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

a { color: inherit; text-decoration: none; }

::selection { background: rgba(var(--accent-rgb), 0.35); color: #fff; }

img { display: block; max-width: 100%; }

/* ── Page chrome: dark teal base, pattern + light ray ───── */
.bg-root {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(
      to bottom,
      var(--bg-0) 0%,
      var(--bg-1) 55%,
      var(--bg-2) 100%
    );
}
/* Islamic geometric pattern, fades to mid-screen. Matches the
   `Pattern2` overlay in CelestialBackground.swift.

   The source PNG is 804×1748 — designed for a phone canvas. With
   `background-size: cover` on a wide desktop viewport it gets
   scaled up ~2× to fill width, which blows the geometric tiles
   into oversized rounded shapes. We keep the pattern at its
   intended scale by sizing to height with `auto 100%`, then tile
   horizontally so the geometry repeats cleanly across wide
   screens. */
.bg-pattern {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: min(900px, 70vh);
  z-index: -2;
  background-image: url("assets/Pattern2.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.85) 20%,
    rgba(0,0,0,.45) 35%,
    rgba(0,0,0,0) 55%);
          mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.85) 20%,
    rgba(0,0,0,.45) 35%,
    rgba(0,0,0,0) 55%);
  opacity: 0.85;
  pointer-events: none;
}
/* Soft light ray, upper-left, exactly like `LightRay` in the app —
   in `CelestialBackground.swift` it's centered at (18%, 16%) of the
   screen via SwiftUI `.position()`. We replicate that by translating
   the image so its visual center sits at that point. */
.bg-ray {
  position: fixed;
  top: -16%;
  left: -10%;
  width: 56vw;
  max-width: 760px;
  z-index: -1;
  mix-blend-mode: screen;
  opacity: 0.9;
  pointer-events: none;
}
.bg-ray img { width: 100%; height: auto; display: block; }

/* Glare sparkles — biased to upper part of page, animated twinkle.
   JS injects them. */
.glare-field {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.glare {
  position: absolute;
  background-image: url("assets/Glare.png");
  background-repeat: no-repeat;
  background-size: contain;
  mix-blend-mode: screen;
  animation: glare-twinkle var(--dur, 2s) ease-in-out var(--delay, 0s) infinite alternate;
  opacity: var(--op, 0.5);
}
@keyframes glare-twinkle {
  0%   { opacity: var(--op, 0.5); transform: scale(1); }
  100% { opacity: 0; transform: scale(0.85); }
}

/* ── Typography utilities ───────────────────────────────── */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; }
h1 { font-size: clamp(40px, 6.8vw, 76px); }
h2 { font-size: clamp(30px, 4.6vw, 50px); }
h3 { font-size: 22px; font-weight: 600; }

p { color: var(--text-mid); }

.title-fade {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.55) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}

.serif { font-family: var(--serif); }

/* ── Layout helpers ─────────────────────────────────────── */
.container { max-width: var(--max); margin: 0 auto; padding: 0 28px; }

/* ── Buttons (the signature CEF7FF→238396 gradient pill) ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  border-radius: var(--pill);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
  border: none;
  transition: transform .2s ease, box-shadow .25s ease, filter .2s ease;
  white-space: nowrap;
  text-align: center;
}
.btn-primary {
  color: #00131B;
  background: linear-gradient(90deg, var(--btn-start) 0%, var(--btn-end) 100%);
  box-shadow:
    0 14px 36px rgba(35, 131, 150, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    0 20px 48px rgba(35, 131, 150, 0.60),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.09);
  transform: translateY(-1px);
}
.btn svg { width: 18px; height: 18px; }
.btn-lg { padding: 18px 30px; font-size: 16px; }

/* ── Liquid Glass card (matches CelestialGlass) ─────────── */
.glass {
  position: relative;
  border-radius: var(--r-md);
  background: var(--surface);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 0.5px solid var(--surface-stroke);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 16px 40px rgba(0, 0, 0, 0.45);
}
.glass-strong {
  background: rgba(0, 0, 0, 0.65);
}
.glass-bordered {
  border: 0.6px solid;
  border-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0.04)
  ) 1;
}

/* ── Nav — floating Liquid Glass pill ───────────────────── */
/* A centered capsule that floats over the content, matching the
   in-app iOS 26 `.glassEffect(.regular)` look — heavy backdrop blur,
   dark tint, top rim highlight, soft drop shadow. Lives in
   `position: fixed` so it's anchored to the viewport while scrolling. */
.nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: auto;
  max-width: calc(100% - 32px);
  padding: 0;
  background: transparent;
  border-bottom: none;
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  /* The capsule itself */
  padding: 8px 8px 8px 18px;
  border-radius: 9999px;
  background: rgba(0, 14, 22, 0.62);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 0.5px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 14px 36px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.3);
  /* Subtle specular gradient on top — the Liquid Glass "wet" look */
  background-image:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0)    45%);
  background-blend-mode: overlay;
  width: max-content;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 15px;
  padding-right: 8px;
  border-right: 0.5px solid rgba(255, 255, 255, 0.08);
}
.brand img {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  filter: drop-shadow(0 4px 10px rgba(107, 199, 219, 0.35));
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 13.5px;
  color: var(--text-soft);
}
.nav-links a {
  transition: color .15s ease;
  white-space: nowrap;
}
.nav-links a:hover { color: #fff; }
.nav-cta {
  padding: 9px 16px;
  font-size: 13px;
  /* Slight inset to compensate for the pill's outer padding */
  margin-left: 4px;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: #fff;
  margin-left: -4px;
}
.nav-toggle svg { width: 22px; height: 22px; }

/* Spacer so page content starts below the floating pill. */
body { padding-top: 78px; }

@media (max-width: 820px) {
  /* Stretch the pill to a full-width bar with 12px side insets so
     there's room to read the brand AND give the dropdown a real
     surface area when it opens. No `transform: translateX(-50%)` on
     mobile — anchoring left/right directly keeps the dropdown
     boundaries predictable AND lets backdrop-filter behave (it
     breaks behind a transformed ancestor). */
  .nav {
    top: 12px;
    left: 12px;
    right: 12px;
    transform: none;
    max-width: none;
  }
  .nav-inner {
    position: relative;       /* anchor for the absolute dropdown */
    width: 100%;
    padding: 10px 10px 10px 16px;
    gap: 10px;
    justify-content: space-between;
  }
  .brand { border-right: none; padding-right: 0; font-size: 15px; }
  .brand img { width: 28px; height: 28px; }
  .nav-toggle {
    display: block;
    margin-left: auto;
    padding: 6px 8px;
  }

  /* Dropdown drops below the pill at the SAME width and uses a
     near-opaque tint so the page content behind never bleeds
     through (backdrop-filter is a nice-to-have on top of that). */
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 14px 18px 18px;
    background: rgba(0, 14, 22, 0.96);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border-radius: 22px;
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 22px 60px rgba(0, 0, 0, 0.65);
    gap: 0;
    font-size: 16px;
  }
  .nav-links.open a {
    color: rgba(255, 255, 255, 0.92);
    padding: 14px 6px;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
    font-weight: 500;
  }
  .nav-links.open a:last-of-type { border-bottom: none; }
  .nav-cta {
    /* Override the inline-link styling so the CTA still reads as a
       pill button at the bottom of the dropdown. */
    margin: 10px 0 4px;
    padding: 14px 20px;
    font-size: 15px;
    text-align: center;
    justify-content: center;
    border-bottom: none !important;
    color: #00131B !important;
    font-weight: 600 !important;
  }
  body { padding-top: 74px; }
}

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  padding: 90px 0 80px;
  position: relative;
  /* Contain the image bleed + glow so the body's `overflow-x: hidden`
     never gets a chance to slice them at the viewport edge. */
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 70px;
  align-items: center;
}
.hero-copy h1 {
  margin-top: 22px;
  font-size: clamp(46px, 8.4vw, 96px);
  letter-spacing: -0.045em;
  font-weight: 800;
}
.hero-copy .sub {
  margin-top: 22px;
  font-size: 17px;
  color: var(--text-soft);
  max-width: 480px;
  line-height: 1.55;
}
.hero-cta {
  margin-top: 34px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-meta {
  margin-top: 32px;
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  color: var(--text-faint);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; color: var(--text-low); }
.hero-meta svg { width: 14px; height: 14px; color: var(--accent); }

.hero-phone {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Allow the glow + the larger image to bleed past the grid cell
     without ever clipping into a hard edge. */
  overflow: visible;
}
.hero-phone img {
  position: relative;
  z-index: 1;
  width: 115%;          /* spill past the grid cell for impact */
  max-width: 760px;
  height: auto;
  margin-right: -10%;   /* nudge right so the image dominates */
  /* The hand+phone subject lives in the RIGHT half of the frame —
     the LEFT half is mostly empty wallpaper. At desktop widths the
     empty area gives the composition room to breathe. As the
     viewport narrows we translate the WHOLE image leftward (no
     cropping) so the phone subject stays anchored in the visible
     center — see the media-query block below. */
  transition: transform .25s ease;
  filter: drop-shadow(0 50px 100px rgba(0, 0, 0, 0.70));
  /* Fade the image bottom into the dark background. */
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 60%,
    rgba(0, 0, 0, 0.85) 78%,
    rgba(0, 0, 0, 0.4) 92%,
    rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 60%,
    rgba(0, 0, 0, 0.85) 78%,
    rgba(0, 0, 0, 0.4) 92%,
    rgba(0, 0, 0, 0) 100%);
}

/* Tablet — column narrows. Translate the image left so the empty
   left half slides off the column edge (body's `overflow-x: hidden`
   clips it cleanly), keeping the phone subject visually centered. */
@media (max-width: 1100px) {
  .hero-phone img {
    transform: translateX(-10%);
  }
}
/* Mobile — image stacks below the copy. Keep the image bigger than
   the viewport so the phone subject stays large, and shift it left
   so the phone (right side of the frame) sits at the center of the
   visible area. */
@media (max-width: 920px) {
  .hero { padding: 50px 0 30px; }
  .hero-grid { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .hero-copy .sub { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .hero-meta { justify-content: center; }
  .eyebrow { justify-content: center; }
  .hero-phone img {
    width: 130%;
    max-width: 620px;
    margin: 0;
    transform: translateX(-12%);
  }
}
/* Narrow phones — push slightly further left so the phone subject
   doesn't drift toward the right edge as the screen tightens. */
@media (max-width: 480px) {
  .hero-phone img {
    width: 145%;
    max-width: 540px;
    transform: translateX(-15%);
  }
}

/* ── Generic feature row (alternating mockup ↔ copy) ────── */
.section {
  padding: 100px 0;
  position: relative;
}
.section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 60px;
}
.section-head h2 {
  margin-top: 16px;
}
.section-head p {
  margin-top: 18px;
  font-size: 17px;
  color: var(--text-soft);
}

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.feature-row.reverse { direction: rtl; }
.feature-row.reverse > * { direction: ltr; }

.feature-text h2 {
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.03em;
  margin-top: 14px;
}
.feature-text p {
  margin-top: 18px;
  font-size: 16px;
  color: var(--text-soft);
  max-width: 480px;
  line-height: 1.65;
}
.feature-text .checks {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feature-text .checks li {
  list-style: none;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--text-mid);
}
.feature-text .checks li svg {
  flex-shrink: 0;
  margin-top: 3px;
  width: 16px; height: 16px;
  color: var(--accent);
}

.feature-mockup {
  position: relative;
  display: flex;
  justify-content: center;
}
.feature-mockup::before {
  content: "";
  position: absolute;
  inset: -8% -10%;
  background: radial-gradient(ellipse at center,
    rgba(107, 199, 219, 0.16) 0%,
    rgba(35, 131, 150, 0.05) 35%,
    transparent 70%);
  filter: blur(36px);
  pointer-events: none;
}
.feature-mockup img {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: auto;
  filter: drop-shadow(0 32px 64px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 40px rgba(107, 199, 219, 0.10));
}
.feature-mockup.tall img    { max-width: 380px; }
.feature-mockup.wide img    { max-width: 540px; }
.feature-mockup.boxy img    { max-width: 560px; }

/* Phone mockup with a Siraj Pro notification overlaid on the
   Lock Screen — mirrors `OnboardingNotificationsScreen` in the app
   where Notification.png floats on top of PhoneMockup5.

   The wrapper SHRINK-WRAPS the phone image (width: fit-content,
   max-width matches `.feature-mockup.tall img`) so the absolute-
   positioned notification's percentage values stay anchored to the
   phone — not the full grid column — at every viewport width. */
.feature-mockup.with-notification {
  position: relative;
  /* Override the parent .feature-mockup `display: flex` for this
     variant so we can size the wrapper to its content. */
  display: block;
  width: fit-content;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}
.feature-mockup.with-notification .mockup-phone {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;          /* fill the wrapper */
  max-width: none;      /* don't double-cap against .feature-mockup img */
}
.feature-mockup.with-notification .mockup-notif {
  position: absolute;
  top: 36%;
  left: 50%;
  width: 125%;          /* spills past the phone bezels for emphasis */
  max-width: none;
  transform: translateX(-50%);
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.55));
  z-index: 1;
  /* Gentle entrance — the notification "drops in" once the row
     scrolls into view (the parent .reveal animates first, this
     animation runs in tandem). */
  animation: notif-drop 0.7s cubic-bezier(.2, .7, .25, 1) 0.35s backwards;
}
@media (max-width: 920px) {
  .feature-mockup.with-notification { max-width: 320px; }
}
@keyframes notif-drop {
  from { opacity: 0; transform: translate(-50%, -10px) scale(0.97); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* Fade an image into the page from its TOP edge. Used on PhoneMockup3
   so the cropped top of the phone dissolves smoothly into the
   background instead of cutting off hard. */
.feature-mockup.fade-top img {
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 0)    0%,
    rgba(0, 0, 0, 0.4)  8%,
    rgba(0, 0, 0, 0.85) 22%,
    rgba(0, 0, 0, 1)    38%);
          mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 0)    0%,
    rgba(0, 0, 0, 0.4)  8%,
    rgba(0, 0, 0, 0.85) 22%,
    rgba(0, 0, 0, 1)    38%);
}

@media (max-width: 920px) {
  .section { padding: 70px 0; }
  .feature-row { grid-template-columns: 1fr; gap: 50px; text-align: center; }
  .feature-row.reverse { direction: ltr; }
  .feature-text .checks { align-items: flex-start; text-align: left; max-width: 380px; margin-left: auto; margin-right: auto; }
  .feature-mockup img { max-width: 320px; }
}

/* ── Quick feature grid ─────────────────────────────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.feature-card {
  padding: 28px 26px 26px;
  border-radius: var(--r-md);
}
.feature-card .icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.14);
  border: 0.5px solid rgba(var(--accent-rgb), 0.30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  display: grid; place-items: center;
  margin-bottom: 20px;
}
.feature-card .icon svg { width: 22px; height: 22px; color: var(--accent); }
.feature-card h3 { font-size: 17px; font-weight: 600; }
.feature-card p {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--text-low);
  line-height: 1.6;
}
@media (max-width: 820px) {
  .feature-grid { grid-template-columns: 1fr; }
}

/* ── Theme picker — single live widget + swatches ───────── */
.theme-stage {
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.theme-stage-widget {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
}
.theme-stage-widget::before {
  content: "";
  position: absolute;
  inset: -8% -10% 8% -10%;
  background: radial-gradient(ellipse at center,
    rgba(107, 199, 219, 0.14) 0%,
    transparent 65%);
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
}
.theme-stage-widget .widget-medium {
  max-width: 460px;
  transition: filter .35s ease;
}
.theme-stage-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-soft);
  transition: color .25s ease;
}

.theme-swatches {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 16px 22px;
  border-radius: var(--pill);
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.theme-swatch-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
  background: var(--swatch-bg);
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.theme-swatch-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.30),
    0 8px 18px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.theme-swatch-btn[aria-pressed="true"] {
  transform: scale(1.08);
  box-shadow:
    0 0 0 2.5px #fff,
    0 0 24px var(--swatch-glow, rgba(255, 255, 255, 0.4)),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.theme-swatch-btn[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

/* The medium widget itself.
   Native iOS medium widget is roughly 338 × 158pt (≈ 2.14 : 1).
   We give it a fixed aspect-ratio and let CSS scale to container. */
.widget-medium {
  --w-radius: 22px;
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 338 / 158;
  border-radius: var(--w-radius);
  overflow: hidden;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 0 0.5px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  isolation: isolate;
}
/* Theme-driven radial background, matches `backgroundColors` palette. */
.widget-medium .w-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 120% 100% at 50% 16%,
      var(--w-bloom) 0%,
      var(--w-mid)   38%,
      var(--w-outer) 72%,
      var(--w-edge)  100%
    );
}
.widget-medium .w-bg::after {
  /* Subtle inner glow matching the bloom orb behavior */
  content: "";
  position: absolute;
  top: -10%; left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 80%;
  background: radial-gradient(ellipse, var(--w-accent) 0%, transparent 65%);
  opacity: 0.18;
  filter: blur(18px);
  pointer-events: none;
}
.widget-medium .w-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 4.2% 5.4%;
  gap: 1.2%;
  color: #fff;
}

/* Header — logo / next prayer name / countdown */
.widget-medium .w-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.widget-medium .w-logo {
  width: 13%;
  aspect-ratio: 1;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.widget-medium .w-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.18));
}
.widget-medium .w-name { flex: 1; min-width: 0; }
.widget-medium .w-name-1 {
  font-size: clamp(11px, 3.9cqi, 15px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.widget-medium .w-name-2 {
  font-size: clamp(8px, 2.7cqi, 10.5px);
  color: rgba(255, 255, 255, 0.55);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.widget-medium .w-timer { text-align: right; flex-shrink: 0; }
.widget-medium .w-timer-big {
  font-size: clamp(18px, 6.2cqi, 24px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.widget-medium .w-timer-small {
  font-size: clamp(6.5px, 2.1cqi, 8px);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.42);
  margin-top: 2px;
}

/* Container queries — sizes scale with widget width. */
.widget-medium { container-type: inline-size; }

/* Arc */
.widget-medium .w-arc-wrap {
  width: 100%;
  display: flex;
  align-items: stretch;
  margin: 0 -5.4%;            /* bleed past the inner padding */
  width: calc(100% + 10.8%);
}
.widget-medium .w-arc { width: 100%; height: 100%; display: block; }

/* Bottom strip — 6 cells of name + time */
.widget-medium .w-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin-top: 1%;
}
.widget-medium .w-cell {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.widget-medium .w-cell-n {
  font-size: clamp(7px, 2.4cqi, 9.5px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.40);
  line-height: 1.2;
}
.widget-medium .w-cell-t {
  font-size: clamp(7px, 2.4cqi, 9.5px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.30);
  line-height: 1.2;
  margin-top: 1px;
}
.widget-medium .w-cell.is-past .w-cell-n { color: rgba(255, 255, 255, 0.65); font-weight: 500; }
.widget-medium .w-cell.is-past .w-cell-t { color: rgba(255, 255, 255, 0.35); }
.widget-medium .w-cell.is-next .w-cell-n { color: var(--w-accent); font-weight: 700; }
.widget-medium .w-cell.is-next .w-cell-t { color: rgba(255, 255, 255, 0.90); font-weight: 600; }

/* ── Pricing ───────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 800px;
  margin: 0 auto;
}
.plan {
  padding: 32px 28px 30px;
  border-radius: var(--r-lg);
  position: relative;
}
.plan-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.plan-name {
  margin-top: 14px;
  font-size: 24px;
  font-weight: 700;
}
.plan-price {
  margin-top: 12px;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.plan-price .per {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-low);
  margin-left: 4px;
}
.plan-trial {
  margin-top: 8px;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
}
.plan-list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  list-style: none;
}
.plan-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14px;
  color: var(--text-mid);
}
.plan-list li svg {
  flex-shrink: 0;
  margin-top: 3px;
  width: 14px; height: 14px;
  color: var(--accent);
}
.plan.is-featured {
  background: linear-gradient(180deg,
    rgba(107, 199, 219, 0.12) 0%,
    rgba(35, 131, 150, 0.06) 100%);
  border-color: rgba(107, 199, 219, 0.30);
}
.plan-badge {
  position: absolute;
  top: 22px;
  right: 22px;
  padding: 6px 12px;
  border-radius: var(--pill);
  background: linear-gradient(90deg, var(--btn-start), var(--btn-end));
  color: #00131B;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

.pricing-fine {
  text-align: center;
  margin-top: 36px;
  font-size: 12px;
  color: var(--text-faint);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}
.pricing-fine a { color: var(--text-low); border-bottom: 0.5px solid rgba(255,255,255,.18); }
.pricing-fine a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Closing CTA ────────────────────────────────────────── */
.cta-strip {
  padding: 70px 42px 60px;
  border-radius: var(--r-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,
    rgba(107, 199, 219, 0.10) 0%,
    rgba(0, 19, 27, 0.55) 100%);
  border: 0.5px solid rgba(107, 199, 219, 0.20);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.cta-strip h2 { font-size: clamp(30px, 4.4vw, 46px); }
.cta-strip p {
  margin-top: 16px;
  font-size: 17px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-soft);
}
.cta-strip .btns {
  margin-top: 32px;
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.cta-strip .verse {
  margin-top: 44px;
  padding-top: 30px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
  font-family: var(--serif);
  font-size: clamp(22px, 3.2vw, 28px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.7;
  direction: rtl;
}
.cta-strip .verse-en {
  margin-top: 10px;
  font-family: var(--sans);
  font-style: italic;
  font-size: 14px;
  color: var(--text-low);
  direction: ltr;
}

/* ── Footer ─────────────────────────────────────────────── */
.footer {
  padding: 70px 0 44px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.06);
  margin-top: 90px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 44px;
}
.footer-brand .brand { font-size: 18px; }
.footer-brand p {
  margin-top: 16px;
  font-size: 14px;
  color: var(--text-low);
  max-width: 300px;
  line-height: 1.6;
}
.footer h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 11px; font-size: 14px; }
.footer ul a { color: var(--text-mid); transition: color .15s ease; }
.footer ul a:hover { color: #fff; }
.footer-bottom {
  margin-top: 54px;
  padding-top: 26px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-faint);
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 440px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ── Legal / long-form pages ────────────────────────────── */
.legal {
  padding: 80px 0 60px;
}
.legal-head {
  text-align: center;
  margin-bottom: 50px;
}
.legal-head h1 {
  font-size: clamp(38px, 5.6vw, 58px);
  letter-spacing: -0.035em;
}
.legal-head .meta {
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.legal-body {
  max-width: 780px;
  margin: 0 auto;
  padding: 44px 40px;
  border-radius: var(--r-lg);
  font-size: 15px;
  line-height: 1.78;
  color: var(--text-mid);
}
.legal-body h2 {
  font-size: 22px;
  color: #fff;
  margin-top: 42px;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
  font-weight: 700;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.92);
  margin-top: 24px;
  margin-bottom: 8px;
  font-weight: 600;
}
.legal-body p + p { margin-top: 14px; }
.legal-body ul {
  margin: 14px 0 14px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legal-body ul li::marker { color: var(--accent); }
.legal-body a {
  color: var(--accent);
  border-bottom: 0.5px solid rgba(107, 199, 219, 0.45);
  transition: border-color .15s ease;
}
.legal-body a:hover { border-color: var(--accent); }
.legal-body strong { color: #fff; font-weight: 600; }
@media (max-width: 620px) {
  .legal-body { padding: 30px 24px; font-size: 14px; }
}

/* ── Support / FAQ ──────────────────────────────────────── */
.faq {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq details {
  padding: 20px 24px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .2s ease;
}
.faq details[open] {
  background: rgba(0, 0, 0, 0.7);
}
.faq summary {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 24px;
  font-weight: 300;
  color: var(--accent);
  transition: transform .2s ease;
}
.faq details[open] summary::after { content: "−"; }
.faq details p {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-soft);
}

.contact-card {
  max-width: 580px;
  margin: 0 auto;
  padding: 38px 34px;
  border-radius: var(--r-lg);
  text-align: center;
}
.contact-card h3 {
  font-size: 24px;
  font-weight: 700;
}
.contact-card p { margin-top: 14px; font-size: 15px; color: var(--text-soft); }
.contact-card a.email {
  display: inline-block;
  margin-top: 24px;
  padding: 14px 26px;
  font-size: 15px;
  font-weight: 600;
  color: #00131B;
  border-radius: var(--pill);
  background: linear-gradient(90deg, var(--btn-start), var(--btn-end));
  box-shadow: 0 14px 36px rgba(35, 131, 150, 0.45);
  transition: transform .2s ease;
}
.contact-card a.email:hover { transform: translateY(-2px); }

/* ── Reveal on scroll ───────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}