/* ---------------------------------------------
   Ngafal Ngefeel - Hero (above the fold)
   --------------------------------------------- */

:root {
  --color-bg: #ebe4dd;
  --color-accent: #b5623c;
  --color-accent-dark: #9c4f30;
  --color-heading: #5e401f;
  --color-body: #5e401f;
  --color-white: #ffffff;

  --color-gold: #edd2ac;
  --color-gold-light: #fbf1e1;
  --color-gold-dark: #c9a668;

  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --nav-height: 72px;
  --container-max: 1280px;
  --radius-pill: 999px;
  --radius-soft: 20px;

  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::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(--font-sans);
  background: var(--color-bg);
  color: var(--color-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-weight: 700;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), background-color 0.2s var(--ease-smooth);
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-white);
  box-shadow: 0 8px 20px rgba(181, 98, 60, 0.35);
  padding: 18px 43px;
}

.btn--primary:hover {
  background: var(--color-accent-dark);
  box-shadow: 0 10px 24px rgba(181, 98, 60, 0.45);
}

.btn--primary:active {
  transform: scale(0.98);
}

.btn--primary:focus-visible {
  outline: 3px solid var(--color-heading);
  outline-offset: 3px;
}

.nav__cta {
  padding: 10px 20px;
  font-size: 0.9rem;
}

.btn--lg {
  padding: 16px 30px;
  font-size: 1rem;
}

/* Ghost button ("Log in"): light by default, becomes a solid CTA-style
   button on hover. Both states use `background`/`color` transitions only
   (no layout shift), and the hover fill matches .btn--primary exactly so
   the two buttons read as one family. */

.btn--ghost {
  background: rgba(94, 64, 31, 0.08);
  color: var(--color-heading);
  padding: 10px 20px;
  font-size: 0.9rem;
  transition: background-color 0.25s var(--ease-smooth), color 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth);
}

.btn--ghost:hover {
  background: var(--color-accent);
  color: var(--color-white);
  box-shadow: 0 8px 20px rgba(181, 98, 60, 0.35);
}

.btn--ghost:focus-visible {
  outline: 3px solid var(--color-heading);
  outline-offset: 3px;
}

/* ---------- Nav ---------- */

/* Two states, one element (fixed so reshaping never shifts the page):
   - at the top: full-width, transparent, flat - blends into the page
   - scrolled (.is-scrolled): narrower, big radius, blurred fill, soft
     shadow, and dropped 10px from the top so it floats. The class is set
     by an IntersectionObserver on .nav-sentinel (see main.js).
   Safe-area: at rest the bar pads itself below the notch/status bar; when
   floating it sits 10px below the safe-area edge. Needs viewport-fit=cover. */

body {
  padding-top: calc(var(--nav-height) + env(safe-area-inset-top, 0px));
}

.nav-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 20px;
  pointer-events: none;
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(251, 249, 246, 0);
  border-radius: 0;
  box-shadow: 0 0 0 rgba(94, 64, 31, 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition:
    width 0.35s var(--ease-smooth),
    top 0.35s var(--ease-smooth),
    padding-top 0.35s var(--ease-smooth),
    border-radius 0.35s var(--ease-smooth),
    background-color 0.35s var(--ease-smooth),
    box-shadow 0.35s var(--ease-smooth),
    backdrop-filter 0.35s var(--ease-smooth),
    -webkit-backdrop-filter 0.35s var(--ease-smooth);
}

.nav.is-scrolled {
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  padding-top: 0;
  width: min(1160px, calc(100% - 32px));
  border-radius: 32px;
  background: rgba(251, 249, 246, 0.82);
  box-shadow: 0 12px 32px rgba(94, 64, 31, 0.16), 0 2px 6px rgba(94, 64, 31, 0.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}

/* An open mobile menu needs a real surface even at the top of the page,
   otherwise its links sit directly on the hero. */
.nav.is-menu-open {
  background: rgba(251, 249, 246, 0.96);
  border-radius: 0 0 28px 28px;
}

.nav.is-scrolled.is-menu-open {
  border-radius: 28px;
}

.nav__inner {
  width: 100%;
  max-width: var(--container-max);
  height: var(--nav-height);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: height 0.35s var(--ease-smooth);
}

.nav.is-scrolled .nav__inner {
  height: 64px;
  padding: 0 14px 0 20px;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav__logo {
  height: 34px;
  width: auto;
  flex-shrink: 0;
}

.nav__brand-text {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--color-heading);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ---------- Nav: main menu (desktop) ---------- */

.nav__menu {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__item {
  position: relative;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-heading);
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background-color 0.2s var(--ease-smooth);
}

.nav__link:hover {
  background: rgba(94, 64, 31, 0.08);
}

.nav__chevron {
  color: currentColor;
  transition: transform 0.25s var(--ease-smooth);
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  .nav__item--dropdown:hover .nav__chevron {
    transform: rotate(180deg);
  }
}

.nav__item--dropdown.is-open .nav__chevron {
  transform: rotate(180deg);
}

.nav__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, -6px);
  min-width: 200px;
  background: var(--color-white);
  border-radius: var(--radius-soft);
  box-shadow: 0 16px 32px rgba(94, 64, 31, 0.18);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s var(--ease-smooth), transform 0.22s var(--ease-smooth), visibility 0.22s;
  z-index: 50;
}

@media (hover: hover) and (pointer: fine) {
  .nav__item--dropdown:hover .nav__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
}

.nav__item--dropdown.is-open .nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav__dropdown-link {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-heading);
  transition: background-color 0.18s var(--ease-smooth);
}

.nav__dropdown-link:hover {
  background: var(--color-bg);
  color: var(--color-accent-dark);
}

/* ---------- Nav: actions + burger ---------- */

.nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 10px;
}

.nav__burger:hover {
  background: rgba(94, 64, 31, 0.08);
}

.nav__burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-heading);
  border-radius: 2px;
  transition: transform 0.25s var(--ease-smooth), opacity 0.25s var(--ease-smooth);
}

.nav__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav__burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Nav: mobile panel ---------- */

.nav__mobile-panel {
  display: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease-smooth);
}

.nav__mobile-panel.is-open {
  max-height: 80vh;
  overflow-y: auto;
}

.nav__mobile-list {
  list-style: none;
  margin: 0;
  padding: 8px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav__mobile-item {
  border-bottom: 1px solid rgba(94, 64, 31, 0.1);
}

.nav__mobile-item--plain {
  border-bottom: none;
}

.nav__mobile-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--color-heading);
  padding: 14px 4px;
}

.nav__mobile-trigger .nav__chevron {
  color: currentColor;
}

.nav__mobile-item.is-open .nav__mobile-trigger .nav__chevron {
  transform: rotate(180deg);
}

.nav__mobile-submenu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.28s var(--ease-smooth), opacity 0.22s var(--ease-smooth);
  display: flex;
  flex-direction: column;
}

.nav__mobile-item.is-open .nav__mobile-submenu {
  max-height: 400px;
  opacity: 1;
}

.nav__mobile-link {
  padding: 11px 4px 11px 14px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-heading);
  opacity: 0.85;
}

.nav__mobile-link--top {
  padding: 14px 4px;
  font-size: 0.98rem;
  font-weight: 600;
  opacity: 1;
}

@media (max-width: 959px) {
  .nav__menu,
  .nav__download {
    display: none;
  }

  .nav__burger {
    display: flex;
  }

  .nav__mobile-panel {
    display: block;
  }
}

/* ---------- Hero layout ---------- */

.hero {
  padding: 40px 20px 64px;
}

.hero__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.hero__copy {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__headline {
  margin: 8px 0 20px;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--color-heading);
}

.hero__subhead {
  margin: 0 0 32px;
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  line-height: 1.55;
  color: #191919;
  opacity: 0.82;
  max-width: 60ch;
}

.hero__cta {
  padding: 16px 32px;
  font-size: 1.05rem;
}

/* ---------- Orbit visual ---------- */

.hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.orbit-scene {
  position: relative;
  /* Bigger canvas than before so the orbit has room to breathe, but capped
     enough that the whole hero (scene + headline + CTA) still fits above
     the fold on a typical laptop viewport. */
  width: min(56vw, 430px);
  aspect-ratio: 1 / 1;
  margin: 16px auto;
  /* Horizontal orbit radius (full range: the "wide" axis of the ellipse).
     Kept well clear of the (now smaller-relative-to-canvas) illustration
     so the gap reads as spacious, not tight. */
  --orbit-rx: clamp(130px, 28vw, 192px);
  /* Vertical orbit radius is intentionally much shorter than --orbit-rx:
     that flattening is what reads as an ellipse seen at an angle, and it
     is *supposed* to let the front/back passes overlap the illustration
     (see .orbit-item below) rather than clear it like the horizontal
     passes do. */
  --orbit-ry: clamp(48px, 11vw, 70px);
  --orbit-duration: 34s;
}

.orbit-scene__glow {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(237, 210, 172, 0.55), rgba(237, 210, 172, 0) 70%);
  pointer-events: none;
}

.orbit-scene__center {
  position: absolute;
  top: 50%;
  left: 50%;
  /* boy.png is a tall portrait render, not a square icon: size by height
     (not a square box + object-fit) so it doesn't get letterboxed down
     to a thin sliver. Width follows the image's own aspect ratio. */
  height: 80%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.orbit-scene__boy {
  display: block;
  height: 100%;
  width: auto;
  filter: drop-shadow(0 14px 18px rgba(94, 64, 31, 0.28));
}

/* Depth-of-field orbit: each icon travels an ellipse (full horizontal
   range, flattened vertical range) around the center illustration. Scale,
   opacity and z-index are driven continuously by the same angle that
   drives position (cos(angle) for the vertical/"depth" axis), computed
   once in gen_orbit_keyframes.js and pasted below as static keyframe
   stops every 15 degrees:
     - front (bottom of the ellipse, largest cos): scaled up, full
       opacity, z-index above the illustration (3) -> passes in FRONT
     - back (top of the ellipse, most negative cos): scaled down, faded,
       z-index below the illustration -> passes BEHIND it
     - sides (cos ~ 0): neutral scale/opacity, and this is exactly where
       z-index flips from front to back, which lines up with the icon
       visually reaching the illustration's left/right edge

   All five items share one @keyframes and one animation-duration (the
   bug from an earlier version was giving each icon its own duration,
   which drifts their 72° spacing apart over time and makes them collide).
   Their 72° phase offset comes from --phase-delay, a *negative*
   animation-delay set inline per item, which is what keeps them
   permanently in sync. Because motion is pure translate() (never
   rotate()), each icon is upright automatically. */

.orbit-item {
  position: absolute;
  top: 50%;
  left: 50%;
  animation: orbit-ellipse var(--orbit-duration) linear infinite;
  animation-delay: var(--phase-delay, 0s);
}

/* Icon buttons: the source renders are already shaded/shadowed 3D
   objects, so no flat badge circle wraps them any more (per this
   revision) - just the image, a light floating drop-shadow, and the
   hover/focus/tooltip affordances. This button sits *inside* .orbit-item
   (which carries the orbit position/depth animation), so its own
   hover transform composes with that instead of fighting it. */

.orbit-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 8px;
  margin: -8px;
  cursor: pointer;
  transition: transform 0.2s var(--ease-smooth);
}

.orbit-icon-btn:hover,
.orbit-icon-btn:focus-visible {
  transform: scale(1.08);
}

.orbit-icon-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 12px;
}

.orbit-icon-btn img {
  width: 60px;
  height: auto;
  max-height: 64px;
  filter: drop-shadow(0 8px 12px rgba(94, 64, 31, 0.28));
  pointer-events: none;
}

.orbit-icon__tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 4px) scale(0.92);
  transform-origin: 50% 100%;
  background: var(--color-heading);
  color: var(--color-white);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s var(--ease-smooth), transform 0.18s var(--ease-smooth);
}

.orbit-icon-btn:hover .orbit-icon__tooltip,
.orbit-icon-btn:focus-visible .orbit-icon__tooltip {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

@keyframes orbit-ellipse {
  0% { transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * 0), calc(var(--orbit-ry) * 1)) scale(1.15); opacity: 1; z-index: 5; }
  4.167% { transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * 0.259), calc(var(--orbit-ry) * 0.966)) scale(1.145); opacity: 0.995; z-index: 5; }
  8.333% { transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * 0.5), calc(var(--orbit-ry) * 0.866)) scale(1.13); opacity: 0.979; z-index: 5; }
  12.5% { transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * 0.707), calc(var(--orbit-ry) * 0.707)) scale(1.106); opacity: 0.953; z-index: 5; }
  16.667% { transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * 0.866), calc(var(--orbit-ry) * 0.5)) scale(1.075); opacity: 0.92; z-index: 5; }
  20.833% { transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * 0.966), calc(var(--orbit-ry) * 0.259)) scale(1.039); opacity: 0.881; z-index: 5; }
  25% { transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * 1), calc(var(--orbit-ry) * 0)) scale(1); opacity: 0.84; z-index: 5; }
  29.167% { transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * 0.966), calc(var(--orbit-ry) * -0.259)) scale(0.961); opacity: 0.799; z-index: 1; }
  33.333% { transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * 0.866), calc(var(--orbit-ry) * -0.5)) scale(0.925); opacity: 0.76; z-index: 1; }
  37.5% { transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * 0.707), calc(var(--orbit-ry) * -0.707)) scale(0.894); opacity: 0.727; z-index: 1; }
  41.667% { transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * 0.5), calc(var(--orbit-ry) * -0.866)) scale(0.87); opacity: 0.701; z-index: 1; }
  45.833% { transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * 0.259), calc(var(--orbit-ry) * -0.966)) scale(0.855); opacity: 0.685; z-index: 1; }
  50% { transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * 0), calc(var(--orbit-ry) * -1)) scale(0.85); opacity: 0.68; z-index: 1; }
  54.167% { transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * -0.259), calc(var(--orbit-ry) * -0.966)) scale(0.855); opacity: 0.685; z-index: 1; }
  58.333% { transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * -0.5), calc(var(--orbit-ry) * -0.866)) scale(0.87); opacity: 0.701; z-index: 1; }
  62.5% { transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * -0.707), calc(var(--orbit-ry) * -0.707)) scale(0.894); opacity: 0.727; z-index: 1; }
  66.667% { transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * -0.866), calc(var(--orbit-ry) * -0.5)) scale(0.925); opacity: 0.76; z-index: 1; }
  70.833% { transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * -0.966), calc(var(--orbit-ry) * -0.259)) scale(0.961); opacity: 0.799; z-index: 1; }
  75% { transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * -1), calc(var(--orbit-ry) * 0)) scale(1); opacity: 0.84; z-index: 5; }
  79.167% { transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * -0.966), calc(var(--orbit-ry) * 0.259)) scale(1.039); opacity: 0.881; z-index: 5; }
  83.333% { transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * -0.866), calc(var(--orbit-ry) * 0.5)) scale(1.075); opacity: 0.92; z-index: 5; }
  87.5% { transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * -0.707), calc(var(--orbit-ry) * 0.707)) scale(1.106); opacity: 0.953; z-index: 5; }
  91.667% { transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * -0.5), calc(var(--orbit-ry) * 0.866)) scale(1.13); opacity: 0.979; z-index: 5; }
  95.833% { transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * -0.259), calc(var(--orbit-ry) * 0.966)) scale(1.145); opacity: 0.995; z-index: 5; }
  100% { transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * 0), calc(var(--orbit-ry) * 1)) scale(1.15); opacity: 1; z-index: 5; }
}

/* ---------- Feature card (click-to-expand) ---------- */

.hero__visual {
  position: relative;
}

/* Dims the icons/illustration behind the open card, per the brief: only
   this area dims (not the whole page) since the card is meant to read as
   "zoomed out of" this cluster, not a full-page modal. */
.feature-overlay {
  position: absolute;
  /* Extend past the visual's own box and fade via gradient (rather than
     inset:0 with a flat fill) so the dim reads as a soft glow around the
     card, not a hard-edged rectangle sitting on the page background. */
  inset: -20%;
  background: radial-gradient(closest-side, rgba(94, 64, 31, 0.34), rgba(94, 64, 31, 0) 72%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-smooth);
  z-index: 8;
}

.feature-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Positioned centered by default; the "expand from the clicked icon"
   illusion comes entirely from `transform-origin`, which JS sets to the
   clicked icon's position (in % relative to the card's own box) right
   before the .is-open class triggers the scale transition. */
.feature-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(88vw, 380px);
  background: var(--color-white);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(94, 64, 31, 0.32), 0 8px 20px rgba(94, 64, 31, 0.18);
  padding: 28px 26px 26px;
  /* .hero__inner sets text-align: center for the hero copy; the card
     needs the reference's left-aligned title/body/button layout. */
  text-align: left;
  z-index: 9;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.15);
  transition: opacity 0.28s var(--ease-smooth), transform 0.34s var(--ease-smooth);
}

.feature-card.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.feature-card__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(94, 64, 31, 0.08);
  border: none;
  cursor: pointer;
  color: var(--color-heading);
  transition: background-color 0.2s var(--ease-smooth);
}

.feature-card__close:hover {
  background: rgba(94, 64, 31, 0.16);
}

.feature-card__title {
  margin: 0 0 10px;
  padding-right: 24px;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-accent);
}

.feature-card__desc {
  margin: 0 0 22px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-body);
  opacity: 0.85;
}

.feature-card__audio {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 18px;
}

.feature-card__audio[hidden] {
  display: none;
}

.feature-card__audio-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-body);
  opacity: 0.7;
}

.feature-card__audio-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.feature-card__audio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-white);
  cursor: pointer;
  transition: transform 0.15s var(--ease-smooth), background-color 0.15s var(--ease-smooth);
}

.feature-card__audio-btn:hover {
  background: var(--color-accent-dark);
  transform: scale(1.06);
}

.feature-card__audio-btn:focus-visible {
  outline: 2px solid var(--color-heading);
  outline-offset: 2px;
}

.feature-card__audio-icon[hidden] {
  display: none;
}

.feature-card__audio-bar {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(181, 98, 60, 0.18);
  overflow: hidden;
}

.feature-card__audio-progress {
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  border-radius: 999px;
}

.feature-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-accent);
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 18px rgba(181, 98, 60, 0.3);
  transition: background-color 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth), transform 0.2s var(--ease-smooth);
}

.feature-card__cta:hover {
  background: var(--color-accent-dark);
  box-shadow: 0 10px 22px rgba(181, 98, 60, 0.4);
}

.feature-card__cta:active {
  transform: scale(0.98);
}

.feature-card__cta svg {
  flex-shrink: 0;
}

/* ---------- Responsive ---------- */

@media (min-width: 900px) {
  .hero {
    padding: 8px 32px 32px;
  }

  .hero__inner {
    max-width: 760px;
    gap: 4px;
  }

  .hero__headline {
    margin: 4px 0 14px;
  }

  .hero__subhead {
    margin: 0 0 24px;
  }
}

@media (max-width: 560px) {
  .orbit-scene {
    width: min(88vw, 340px);
    margin: 24px auto;
    /* Duration is deliberately NOT overridden here: every item's 72°
       phase offset is a fixed-second animation-delay computed against
       --orbit-duration (see the HTML). Changing the duration only on
       mobile would throw those delays out of proportion and break the
       even spacing, so all breakpoints share one clock and only the
       radii/sizes scale down. */
    --orbit-rx: clamp(96px, 30vw, 140px);
    --orbit-ry: clamp(38px, 12vw, 58px);
  }

  .orbit-icon-btn img {
    width: 44px;
  }

  .feature-card {
    padding: 24px 22px 22px;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  /* Freeze each icon at its own static point on the ellipse (matching its
     72°-apart phase) instead of the animated path, so they stay visibly
     spread out rather than collapsing onto one frozen position. Position
     is selected by DOM order: .orbit-scene__glow and .orbit-scene__center
     are the first two children, so the five .orbit-item siblings land on
     nth-child(3) through nth-child(7). */
  .orbit-item {
    animation: none;
  }

  .orbit-item:nth-child(3) {
    transform: translate(-50%, -50%) translate(0, var(--orbit-ry)) scale(1.15);
    opacity: 1;
    z-index: 5;
  }

  .orbit-item:nth-child(4) {
    transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * 0.951), calc(var(--orbit-ry) * 0.309)) scale(1.046);
    opacity: 0.889;
    z-index: 5;
  }

  .orbit-item:nth-child(5) {
    transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * 0.588), calc(var(--orbit-ry) * -0.809)) scale(0.879);
    opacity: 0.711;
    z-index: 1;
  }

  .orbit-item:nth-child(6) {
    transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * -0.588), calc(var(--orbit-ry) * -0.809)) scale(0.879);
    opacity: 0.711;
    z-index: 1;
  }

  .orbit-item:nth-child(7) {
    transform: translate(-50%, -50%) translate(calc(var(--orbit-rx) * -0.951), calc(var(--orbit-ry) * 0.309)) scale(1.046);
    opacity: 0.889;
    z-index: 5;
  }

  /* Icon hover and the tooltip pop both use `scale`; drop to a plain
     position nudge / fade instead. */
  .orbit-icon-btn:hover,
  .orbit-icon-btn:focus-visible {
    transform: none;
  }

  .orbit-icon__tooltip {
    transform: translate(-50%, 0);
  }

  .orbit-icon-btn:hover .orbit-icon__tooltip,
  .orbit-icon-btn:focus-visible .orbit-icon__tooltip {
    transform: translate(-50%, 0);
  }

  /* Feature card: fade only, no zoom-from-icon-origin. */
  .feature-card {
    transition: opacity 0.2s var(--ease-smooth);
    transform: translate(-50%, -50%) scale(1);
  }

  .feature-card.is-open {
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ---------- Trusted by ---------- */

.trusted {
  padding: 24px 20px 88px;
}

.trusted__card {
  max-width: 1100px;
  margin: 0 auto;
  background: #fbf9f6;
  border-radius: 28px;
  box-shadow: 0 18px 48px rgba(94, 64, 31, 0.08);
  overflow: hidden;
  text-align: center;
}

.trusted__top {
  padding: 36px 0 34px;
}

.trusted__title {
  margin: 0 0 30px;
  padding: 0 20px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-body);
  opacity: 0.7;
}

/* Two identical tracks side by side, each translating by exactly its own
   width, so the loop is seamless without JS. Only transform animates. */
.trusted__marquee {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.trusted__track {
  --logo-gap: 72px;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--logo-gap);
  padding: 0 var(--logo-gap) 0 0;
  margin: 0;
  list-style: none;
  animation: trusted-scroll 36s linear infinite;
}

.trusted__marquee:hover .trusted__track {
  animation-play-state: paused;
}

.trusted__track li {
  display: flex;
  align-items: center;
}

/* Uniform height (not width): logos have very different aspect ratios.
   Logos are pre-colored #5e401f PNG files (scripts/colorize-logos.js),
   not CSS masks - rendered as plain <img> for reliability. */
.trusted__track img {
  display: block;
  height: 44px;
  width: auto;
}

@keyframes trusted-scroll {
  to { transform: translateX(-100%); }
}

.trusted__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  border-top: 1px solid rgba(94, 64, 31, 0.1);
  background: rgba(94, 64, 31, 0.025);
}

.trusted__stat {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 4px;
  padding: 30px 12px 32px;
}

.trusted__stat + .trusted__stat {
  border-left: 1px solid rgba(94, 64, 31, 0.1);
}

.trusted__stat dd {
  margin: 0;
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-heading);
}

.trusted__stat dt {
  font-size: 0.9rem;
  font-weight: 500;
  color: #191919;
  opacity: 0.72;
}

@media (max-width: 640px) {
  .trusted {
    padding: 8px 16px 64px;
  }

  .trusted__top {
    padding: 28px 0 26px;
  }

  .trusted__track {
    --logo-gap: 48px;
  }

  .trusted__track img {
    height: 36px;
  }

  .trusted__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .trusted__stat {
    padding: 24px 10px 26px;
  }

  .trusted__stat:nth-child(odd) {
    border-left: none;
  }

  .trusted__stat:nth-child(even) {
    border-left: 1px solid rgba(94, 64, 31, 0.1);
  }

  .trusted__stat:nth-child(n + 3) {
    border-top: 1px solid rgba(94, 64, 31, 0.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* No auto-scroll: show one static, centered, wrapping set of logos. */
  .trusted__marquee {
    justify-content: center;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .trusted__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 24px;
    padding: 0 24px;
  }

  .trusted__track[aria-hidden="true"] {
    display: none;
  }
}

/* ---------- Small-screen overflow guards ---------- */

html {
  overflow-x: clip;
}

@media (max-width: 420px) {
  .nav__inner {
    gap: 8px;
    padding: 0 14px;
  }

  .nav__brand-text {
    font-size: 0.95rem;
  }

  .nav__cta {
    padding: 9px 14px;
  }
}

@media (max-width: 420px) {
  .nav.is-scrolled .nav__inner {
    padding: 0 8px 0 14px;
    gap: 6px;
  }

  .nav__brand {
    gap: 8px;
  }

  .nav__logo {
    height: 30px;
  }

  .nav__brand-text {
    font-size: 0.9rem;
  }
}

/* ---------- App showcase (cycling phone mockup) ---------- */

.app-showcase {
  padding: 8px 20px 96px;
  scroll-margin-top: calc(var(--nav-height) + 16px);
}

.app-showcase__inner {
  max-width: 1120px;
  margin: 0 auto;
}

.app-showcase__title {
  margin: 0 0 12px;
  font-size: clamp(1.7rem, 4.6vw, 2.6rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-heading);
}

.app-showcase__sub {
  margin: 0 0 32px;
  max-width: 46ch;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--color-body);
  opacity: 0.85;
}

/* Left column (title, testimonial, download badges) and the phone mockup
   on the right, the phone vertically centered against the whole left
   column. Reflows to a single column (phone, left) below 900px. */
.app-showcase__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "left phone";
  align-items: center;
  column-gap: 40px;
  text-align: left;
}

.app-showcase__left {
  grid-area: left;
  max-width: 480px;
}

.app-showcase__divider {
  border: 0;
  border-top: 1px solid rgba(94, 64, 31, 0.15);
  margin: 32px 0;
}

.app-showcase__download {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.app-phone-wrap {
  grid-area: phone;
  perspective: 1200px;
  padding: 28px 56px;
}

/* ---------- Testimonial auto-swap ---------- */

.testimonial {
  position: relative;
}

.testimonial__mark {
  position: absolute;
  top: -0.5rem;
  left: -0.75rem;
  font-size: 5.5rem;
  font-weight: 800;
  line-height: 1;
  color: #5e401f;
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
}

.testimonial__quote {
  position: relative;
  margin: 0;
  min-height: 284px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  transition: opacity 0.26s ease, transform 0.26s ease;
}

.testimonial__quote.is-fading {
  opacity: 0;
  transform: translateX(10px);
}

.testimonial__text {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  font-weight: 400;
  line-height: 1.6;
  color: #4a3a2a;
}

.testimonial__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.testimonial__who {
  display: flex;
  flex-direction: column;
  font-size: 0.88rem;
}

.testimonial__who strong {
  color: var(--color-heading);
  font-weight: 700;
}

.testimonial__who span {
  color: var(--color-body);
  opacity: 0.68;
}

.testimonial__dots {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.testimonial__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(181, 98, 60, 0.28);
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s var(--ease-smooth), width 0.3s var(--ease-smooth);
}

.testimonial__dot::after {
  content: "";
  position: absolute;
  inset: -10px -4px;
}

.testimonial__dot.is-active {
  width: 22px;
  background: #b5623c;
}

.testimonial__dot:focus-visible {
  outline: 2px solid var(--color-heading);
  outline-offset: 3px;
}

/* ---------- Phone mockup: 3D tilt + crossfade ---------- */

.app-phone {
  position: relative;
  width: min(280px, 60vw);
  margin: 0 auto;
}

/* Fixed-ratio stage: the four frames are stacked in it and crossfade,
   so the container never changes size. All four were cropped to one
   shared box, so the phone frame lines up exactly between screens.
   The 3D tilt lives here (not on .app-phone) so it wraps all four
   crossfading images as a single tilted plane. */
.app-phone__stage {
  position: relative;
  aspect-ratio: 466 / 939;
  transform: rotateY(-14deg) rotateX(4deg) rotateZ(2deg);
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease-smooth);
  filter:
    drop-shadow(0 30px 36px rgba(94, 64, 31, 0.3))
    drop-shadow(0 12px 16px rgba(94, 64, 31, 0.18));
}

.app-phone-wrap:hover .app-phone__stage,
.app-phone-wrap:focus-within .app-phone__stage {
  transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
}

.app-phone__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.app-phone__img.is-active {
  opacity: 1;
}

.app-phone__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.app-phone__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(181, 98, 60, 0.28);
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s var(--ease-smooth), width 0.3s var(--ease-smooth);
}

/* Enlarged invisible hit area (dots are only 10px). */
.app-phone__dot::after {
  content: "";
  position: absolute;
  inset: -10px -4px;
}

.app-phone__dot.is-active {
  width: 26px;
  background: var(--color-accent);
}

.app-phone__dot:focus-visible {
  outline: 2px solid var(--color-heading);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .app-showcase__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "phone"
      "left";
    row-gap: 36px;
  }

  .app-showcase__left {
    max-width: none;
  }

  .app-showcase__title,
  .app-showcase__sub {
    text-align: center;
  }

  .app-showcase__sub {
    margin-left: auto;
    margin-right: auto;
  }

  .app-phone-wrap {
    padding: 16px 40px;
  }

  .app-phone__stage {
    transform: rotateY(-7deg) rotateX(2deg) rotateZ(1deg);
  }
}

@media (max-width: 640px) {
  .app-showcase {
    padding: 0 16px 72px;
  }

  .app-showcase__sub {
    margin-bottom: 32px;
  }

  .testimonial__quote {
    min-height: 314px;
  }

  .testimonial__mark {
    font-size: 4.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* JS also stops cycling and pins app2/testimonial 1; this removes the
     transition itself. The static tilt on .app-phone__stage is kept. */
  .app-phone__img,
  .testimonial__quote {
    transition: none;
  }

  .app-phone__dots {
    display: none;
  }
}

/* ---------- Surah parallax panels ---------- */

.surah-parallax {
  position: relative;
  min-height: 640px;
  padding: 64px 0;
  overflow: hidden;
  /* The nav is position:fixed, so a plain #insight-surah anchor jump
     (from the Program > Insight Surah menu link) would land with this
     section's top hidden behind it. This offsets the scroll target. */
  scroll-margin-top: calc(var(--nav-height) + 16px);
}

/* Matches .nav__inner exactly (max-width: var(--container-max), centered,
   0 20px padding) so the copy block's left edge lines up with the nav
   logo's, instead of the section supplying its own one-off padding value.
   Field/scrim are absolutely positioned *inside* this container, so they
   still bleed to its edges (using the full 1280px width for the panel
   field is intentional - only the text needs the 20px inset). */
.surah-parallax__container {
  position: absolute;
  inset: 0;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
  /* Centers .surah-parallax__copy (the only normal-flow child - field and
     scrim are position:absolute) vertically against the full section
     height, instead of it sitting at the top edge. */
  display: flex;
  align-items: center;
}

/* Behind everything: the scattered field of rotated, overlapping panels. */
.surah-parallax__field {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* A left-to-right fade to the page background so panels never fight with
   the copy block's legibility, without needing a hard-edged card behind
   the text. */
.surah-parallax__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg, var(--color-bg) 0%, var(--color-bg) 34%, rgba(235, 228, 221, 0.55) 46%, rgba(235, 228, 221, 0) 64%);
}

.surah-parallax__copy {
  position: relative;
  /* Higher than any .surah-panel (z-index 2-6), so a panel drifting
     close to this column never sits in front of the text. */
  z-index: 10;
  max-width: 640px;
  text-align: left;
}

.surah-parallax__eyebrow {
  margin: 0 0 18px;
  font-size: 0.95rem;
}

.surah-parallax__eyebrow strong {
  font-weight: 800;
  color: var(--color-heading);
}

.surah-parallax__eyebrow span {
  color: var(--color-heading);
  opacity: 0.62;
  margin-left: 6px;
}

.surah-parallax__title {
  margin: 0 0 28px;
  font-size: clamp(1.75rem, 3.2vw, 2.9rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-heading);
}

.surah-parallax__line {
  display: block;
  white-space: nowrap;
}

.surah-parallax__cta {
  padding: 15px 30px;
  font-size: 1rem;
}

/* One "row" repeats the same 6-slot rotated cascade (nth-child is scoped
   per row), so adding panels beyond 11 - up to 17 and further - just
   continues the same rhythm down the page. No JS/CSS restructuring
   needed: main.js only chunks the image list into groups of 6. Slots sit
   in the right ~two-thirds of the field, leaving room for the copy block
   on the left (further faded by .surah-parallax__scrim). */
.surah-row {
  position: relative;
  height: 460px;
}

/* Wrapper: positions/sizes the slot and carries the floating translateY
   animation only. Rotate lives one layer in (.surah-panel__inner) so the
   two transforms never collide on one element - animating translateY
   here would otherwise overwrite a rotate set on the same property. */
.surah-panel {
  position: absolute;
  will-change: transform;
  /* --range/--dur/--delay are randomized per panel by main.js. */
  --range: 20px;
  --dur: 10s;
  --delay: 0s;
}

/* Inner: the static tilt + the rounded, shadowed, clipped card. Image
   itself never moves or transforms - only this box's fixed rotate. */
.surah-panel__inner {
  width: 100%;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(94, 64, 31, 0.2);
  background: #e5ddd0;
  transform: rotate(var(--tilt, 0deg));
}

.surah-panel__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

/* Two opposite-phase loops, alternated by slot parity in main.js, so
   neighboring panels rise and fall out of sync ("one up while the next
   is down") instead of the whole field drifting together. This is a
   pure looping CSS animation - it runs continuously regardless of
   scroll position, never reads scroll, and needs no JS per frame. */
@keyframes surah-float-a {
  0%, 100% { transform: translateY(calc(-1 * var(--range))); }
  50% { transform: translateY(var(--range)); }
}

@keyframes surah-float-b {
  0%, 100% { transform: translateY(var(--range)); }
  50% { transform: translateY(calc(-1 * var(--range))); }
}

.surah-panel.surah-float-a {
  animation: surah-float-a var(--dur) var(--delay) ease-in-out infinite;
}

.surah-panel.surah-float-b {
  animation: surah-float-b var(--dur) var(--delay) ease-in-out infinite;
}

.surah-row .surah-panel:nth-child(1) { top: 10px;  left: 33%; width: 185px; height: 240px; z-index: 3; --tilt: -6deg; }
.surah-row .surah-panel:nth-child(2) { top: 155px; left: 45%; width: 160px; height: 208px; z-index: 5; --tilt: 6deg; }
.surah-row .surah-panel:nth-child(3) { top: -15px; left: 55%; width: 205px; height: 262px; z-index: 2; --tilt: -4deg; }
.surah-row .surah-panel:nth-child(4) { top: 170px; left: 68%; width: 175px; height: 224px; z-index: 6; --tilt: 8deg; }
.surah-row .surah-panel:nth-child(5) { top: 30px;  left: 81%; width: 195px; height: 250px; z-index: 3; --tilt: -7deg; }
.surah-row .surah-panel:nth-child(6) { top: 205px; left: 93%; width: 148px; height: 190px; z-index: 4; --tilt: 5deg; }

@media (max-width: 1024px) {
  .surah-parallax__scrim {
    background: linear-gradient(100deg, var(--color-bg) 0%, var(--color-bg) 26%, rgba(235, 228, 221, 0.5) 38%, rgba(235, 228, 221, 0) 58%);
  }

  .surah-row .surah-panel:nth-child(1) { left: 26%; }
}

@media (max-width: 900px) {
  /* Below this width there isn't room for text-left / panels-right, so
     the copy stacks on top in normal flow and the field becomes a
     shorter, gentler, mostly-2-column scatter below it - per the brief's
     "reduce panel count shown at once OR shrink the movement range"
     (both a bit here, since a full 6-wide cascade doesn't fit a phone). */
  .surah-parallax {
    min-height: 0;
    padding: 48px 0 56px;
  }

  .surah-parallax__scrim {
    display: none;
  }

  /* Below this width the container switches from "absolutely fill the
     section, panels-right / text-left" to a normal-flow column - text on
     top, panels below. Side padding stays the same 20px used everywhere
     else on the page (nav, hero); it isn't a one-off value for this
     section. */
  .surah-parallax__container {
    display: flex;
    flex-direction: column;
    position: static;
    inset: auto;
    padding: 0 20px;
  }

  /* DOM order stays field-then-copy (desktop needs that for the
     absolute-positioned overlay); flex `order` puts the copy first
     visually on mobile so it doesn't end up buried below ~1200px of
     stacked panels. */
  .surah-parallax__field {
    order: 2;
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    margin: 36px 0 0;
  }

  .surah-parallax__copy {
    order: 1;
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
  }

  .surah-parallax__eyebrow,
  .surah-parallax__title {
    text-align: center;
  }

  .surah-parallax__cta {
    display: inline-flex;
  }

  .surah-row {
    height: 600px;
  }

  .surah-row .surah-panel:nth-child(1) { top: 0px;   left: 4%;  width: 46%; height: 210px; z-index: 3; --tilt: -5deg; }
  .surah-row .surah-panel:nth-child(2) { top: 55px;  left: 50%; width: 44%; height: 195px; z-index: 4; --tilt: 4deg; }
  .surah-row .surah-panel:nth-child(3) { top: 225px; left: 0%;  width: 44%; height: 195px; z-index: 2; --tilt: 4deg; }
  .surah-row .surah-panel:nth-child(4) { top: 280px; left: 48%; width: 46%; height: 210px; z-index: 5; --tilt: -6deg; }
  .surah-row .surah-panel:nth-child(5) { top: 450px; left: 8%;  width: 44%; height: 195px; z-index: 3; --tilt: 3deg; }
  .surah-row .surah-panel:nth-child(6) { top: 410px; left: 52%; width: 42%; height: 185px; z-index: 4; --tilt: -4deg; }
}

@media (prefers-reduced-motion: reduce) {
  /* Must match (or beat) the .surah-panel.surah-float-a/-b selectors'
     specificity, or this loses to them regardless of source order - a
     real bug caught in testing: animation-name still read "surah-float-a"
     under reduced motion until this was made explicit. The keyframes
     oscillate around 0 (no base offset), so simply removing the
     animation leaves the panel at its natural, static, untranslated
     position - no fallback transform needed. */
  .surah-panel.surah-float-a,
  .surah-panel.surah-float-b {
    animation: none;
  }
}