/* ─────────────────────────────────────────────────────────────────────────
   jura.best — the homepage.

   Its own stylesheet: the legal pages keep styles.css, untouched. The same
   two faces as the app (Cormorant Garamond to say things, Outfit to label
   them, Amiri for the Arabic), the same ink, forest, gold and ivory, and
   the app's own ornaments: the khatam lattice, the sixteen-point rosette,
   and a sky that follows the hour.

   No inline script anywhere: the site's Content-Security-Policy allows
   scripts from this origin only, so everything that moves is in home.js.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --ink: #070a09;
  --night: #0a1311;
  --forest: #12352e;
  --pine: #1a4a40;
  --jade: #3e9b82;
  --gold: #d4af6a;
  --gold-soft: #e8d5a3;
  --gold-deep: #9a7b3c;
  --ivory: #f7f1e6;
  --cream: #faf6ef;
  --paper: #fffbf4;
  --sand: #e8dfd0;
  --mist: #8a938e;
  --stone: #5c6662;

  --max: 1180px;
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --ui: Outfit, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --arabic: Amiri, "Noto Naskh Arabic", "Geeza Pro", "Times New Roman", serif;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  --gold-text: linear-gradient(100deg, #f6e7c1 0%, #d4af6a 38%, #f8ecca 55%, #c9a05a 100%);

  /* The khatam: two squares, one turned, joined to their neighbours. */
  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23d4af6a' stroke-width='.8'%3E%3Crect x='14.4' y='14.4' width='19.2' height='19.2'/%3E%3Cpath d='M24 10.42 37.58 24 24 37.58 10.42 24Z'/%3E%3Cpath d='M37.58 24H48M10.42 24H0M24 37.58V48M24 10.42V0'/%3E%3C/g%3E%3C/svg%3E");

  /* Film grain, so the large flat colours have a little paper in them. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Base ─────────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 84px;
}

body {
  font-family: var(--ui);
  font-size: 1rem;
  line-height: 1.62;
  font-weight: 300;
  background: var(--ink);
  color: var(--ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background-image: var(--grain);
  opacity: .04;
}

body.menu-open { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }

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

.wrap {
  width: min(var(--max), calc(100% - 40px));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
}
.skip:focus { left: 12px; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.004em;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-wrap: balance;
}

h2 {
  font-size: clamp(2.4rem, 4.9vw, 4.1rem);
  line-height: 1.06;
  margin: .22em 0 .36em;
}

em { font-style: italic; font-weight: 400; }

.eyebrow {
  color: var(--gold);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-indent: .24em;
  text-transform: uppercase;
}

.lead {
  font-size: clamp(1.06rem, 1.35vw, 1.2rem);
  line-height: 1.62;
  color: color-mix(in srgb, var(--ivory) 86%, transparent);
  max-width: 34em;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 600 .95rem/1 var(--ui);
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              background-color .3s ease, border-color .3s ease;
}
.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .35s var(--ease);
}
.btn svg.fill { fill: currentColor; stroke: none; }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg:not(.fill) { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(.98); }

.btn-gold {
  background: linear-gradient(135deg, #ecd39b 0%, var(--gold) 46%, #b8914c 100%);
  color: #1a1408;
  box-shadow: 0 12px 32px -8px rgba(212, 175, 106, .55),
              inset 0 1px 0 rgba(255, 255, 255, .4);
}
.btn-gold::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .9s var(--ease);
}
.btn-gold:hover::before { transform: translateX(120%); }
.btn-gold:hover { box-shadow: 0 18px 40px -8px rgba(212, 175, 106, .7), inset 0 1px 0 rgba(255, 255, 255, .4); }

.btn-glass {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .24);
  color: var(--ivory);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.btn-glass:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(232, 213, 163, .55);
}

.btn-lg { min-height: 56px; padding: 0 28px; font-size: 1rem; }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: .86rem; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.actions.center { justify-content: center; }

/* ── Navigation ───────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background-color .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.nav.scrolled {
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  border-bottom-color: rgba(255, 255, 255, .06);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
}
/* A fixed menu inside a blurred bar would be trapped inside the bar:
   backdrop-filter makes a containing block. Open, the bar steps aside. */
.nav.menu-open {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  border-bottom-color: transparent;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1;
}
.mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  transition: transform .5s var(--spring);
}
.brand:hover .mark { transform: rotate(-6deg) scale(1.07); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: .9rem;
  color: color-mix(in srgb, var(--ivory) 76%, transparent);
}
.nav-links > a:not(.btn) {
  position: relative;
  padding: 4px 0;
  transition: color .25s ease;
}
.nav-links > a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--gold-soft);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav-links > a:not(.btn):hover { color: var(--gold-soft); }
.nav-links > a:not(.btn):hover::after { transform: scaleX(1); }

.legal-pill {
  display: inline-flex;
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
  border-radius: 999px;
  overflow: hidden;
}
.legal-pill a {
  padding: 7px 13px;
  font-size: .8rem;
  line-height: 1;
  transition: background-color .25s ease, color .2s ease;
}
.legal-pill a + a { border-left: 1px solid color-mix(in srgb, var(--gold) 24%, transparent); }
.legal-pill a:hover {
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  color: var(--gold-soft);
}

.menu-btn {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 10, 9, .4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  z-index: 2;
}
.menu-btn span {
  display: block;
  width: 18px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--ivory);
  transition: transform .4s var(--ease);
}
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* ── The rosette ──────────────────────────────────────────────────────── */

.rosette {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  overflow: visible;
  color: var(--gold);
}
.rosette .ln {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2.6s var(--ease);
}
/* With a script to draw them, the lines start undrawn. */
.js .rosette .ln { stroke-dashoffset: 1; }
.rosette .ln:nth-child(2) { opacity: .5; transition-delay: .15s; }
.rosette .ln:nth-child(3) { transition-delay: .3s; }
.rosette .ln:nth-child(4) { transition-delay: .45s; }
.rosette .ln:nth-child(5) { transition-delay: .6s; }
.rosette .ln:nth-child(6) { transition-delay: .75s; }
.rosette .ln:nth-child(7) { transition-delay: .9s; }
.rosette .dot {
  fill: currentColor;
  stroke: none;
  transition: opacity 1s ease 1.8s;
}
.js .rosette .dot { opacity: 0; }
.js .rosette.in .ln, .js .in .rosette .ln { stroke-dashoffset: 0; }
.js .rosette.in .dot, .js .in .rosette .dot { opacity: 1; }

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 130px 0 104px;
}

.hero-media {
  position: absolute;
  inset: -8% 0 0;
  z-index: -6;
  will-change: transform;
}
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  transform-origin: 55% 35%;
  animation: heroDrift 34s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.04); }
  to   { transform: scale(1.14) translate3d(-1.4%, -1%, 0); }
}

/* The sky over the photograph follows the visitor's hour (home.js), as the
   sky on Discover follows the prayers. Soft-light: a tint, never a wash. */
.hero-sky {
  position: absolute;
  inset: 0;
  z-index: -5;
  background: var(--sky, linear-gradient(180deg, #0b1430, #2a3a5c));
  mix-blend-mode: soft-light;
  opacity: .85;
  transition: background 2s ease;
}
body[data-sky="fajr"]    { --sky: linear-gradient(180deg, #2f3a74 0%, #b97a9a 55%, #f2b8a0 100%); --stars: .35; }
body[data-sky="morning"] { --sky: linear-gradient(180deg, #5d8fb8 0%, #e9d7a8 100%); --stars: 0; }
body[data-sky="dhuhr"]   { --sky: linear-gradient(180deg, #3f86b3 0%, #d9e6e0 100%); --stars: 0; }
body[data-sky="asr"]     { --sky: linear-gradient(180deg, #b8833c 0%, #f0c27a 100%); --stars: 0; }
body[data-sky="maghrib"] { --sky: linear-gradient(180deg, #3c2a5c 0%, #c45f5a 55%, #f2a65e 100%); --stars: .2; }
body[data-sky="night"]   { --sky: linear-gradient(180deg, #0b1430 0%, #1c2b55 60%, #2a3a5c 100%); --stars: .9; }

.hero-stars {
  position: absolute;
  inset: 0;
  z-index: -4;
  opacity: var(--stars, 0);
  transition: opacity 2s ease;
  background-image:
    radial-gradient(1.5px 1.5px at 45.4% 24.4%, rgba(255,247,226,1) 50%, transparent 51%),
    radial-gradient(1px 1px at 45.4% 36.2%, rgba(255,247,226,1) 50%, transparent 51%),
    radial-gradient(.9px .9px at 62.5% 33.7%, rgba(255,247,226,.85) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 81.3% 8.1%, rgba(255,247,226,.7) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 88.2% 21.5%, rgba(255,247,226,.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 72.4% 14.8%, rgba(255,247,226,1) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 57.9% 6.3%, rgba(255,247,226,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 93.6% 31.7%, rgba(255,247,226,.85) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 35.2% 12.4%, rgba(255,247,226,.55) 50%, transparent 51%),
    radial-gradient(.9px .9px at 66.8% 27.2%, rgba(255,247,226,1) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 22.6% 9.4%, rgba(255,247,226,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 51.1% 17.9%, rgba(255,247,226,.85) 50%, transparent 51%);
  animation: twinkle 5.5s ease-in-out infinite alternate;
}
@keyframes twinkle {
  from { filter: brightness(.75); }
  to   { filter: brightness(1.25); }
}

.hero-lattice {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: var(--lattice) center / 56px 56px;
  opacity: .075;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 62%, transparent 100%);
}

.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 85% at 12% 88%, rgba(7, 10, 9, .86) 0%, rgba(7, 10, 9, .4) 46%, transparent 72%),
    linear-gradient(180deg, rgba(7, 10, 9, .6) 0%, rgba(7, 10, 9, .08) 26%, rgba(7, 10, 9, .22) 62%, var(--ink) 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 48px;
  align-items: end;
}

.hero-copy { max-width: 700px; }

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 17px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 106, .4);
  background: rgba(7, 10, 9, .46);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--gold-soft);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.hero-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px 2px rgba(212, 175, 106, .65);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: .65; }
}

h1 {
  font-size: clamp(3.2rem, 7.4vw, 6.6rem);
  line-height: .98;
  margin: .3em 0 .32em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
h1 em, .virtues span {
  background: var(--gold-text);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  animation: shimmer 9s ease-in-out infinite alternate;
  padding-right: .06em;
}
@keyframes shimmer {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

.trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 34px;
  font-size: .9rem;
  color: color-mix(in srgb, var(--ivory) 82%, transparent);
}
.trust li { display: inline-flex; align-items: center; gap: 9px; }
.trust svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The hero's words arrive one after another. */
.hero-copy > * {
  opacity: 0;
  transform: translateY(26px);
  animation: rise 1.1s var(--ease) forwards;
}
.hero-copy > :nth-child(1) { animation-delay: .15s; }
.hero-copy > :nth-child(2) { animation-delay: .3s; }
.hero-copy > :nth-child(3) { animation-delay: .5s; }
.hero-copy > :nth-child(4) { animation-delay: .68s; }
.hero-copy > :nth-child(5) { animation-delay: .84s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* The couple film (media/couple.*). On phones it IS the hero; on desktop it
   sits in a portrait frame beside the words. Only one ever plays (home.js). */
.hero-video {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  background: var(--ink);
}

.reel {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
  aspect-ratio: 9 / 16;
  margin: 0;
  border-radius: 34px;
  overflow: hidden;
  background: #0d1512;
  border: 1px solid rgba(212, 175, 106, .38);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, .55),
    0 0 0 6px rgba(7, 10, 9, .35),
    0 0 60px -10px rgba(212, 175, 106, .28);
}
.reel::after {
  /* A soft vignette so the frame reads as a window, not a sticker. */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 10, 9, .18) 0%, transparent 22%, transparent 70%, rgba(7, 10, 9, .45) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.reel-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* A glimpse of the app: the moment after a match. */
.glimpse {
  position: relative;
  justify-self: end;
  width: min(440px, 100%);
  height: 600px;
  opacity: 0;
  animation: rise 1.4s var(--ease) .9s forwards;
}
.glimpse-card {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 270px;
  padding: 30px 24px 26px;
  border-radius: 30px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(18, 53, 46, .78), rgba(7, 10, 9, .84));
  border: 1px solid rgba(212, 175, 106, .3);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: float 8s ease-in-out infinite alternate;
}
.glimpse-rosette {
  position: absolute;
  width: 170px;
  height: 170px;
  left: 50%;
  top: 0;
  translate: -50% 0;
  opacity: .32;
  pointer-events: none;
}
.avatars {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 6px;
}
.avatars img {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .45);
}
.avatars img + img { margin-left: -20px; }
.match-title {
  margin-top: 16px;
  font-family: var(--display);
  font-size: 2.05rem;
  font-weight: 500;
  line-height: 1.05;
  color: var(--gold-soft);
}
.match-sub {
  margin-top: 6px;
  font-size: .86rem;
  color: color-mix(in srgb, var(--ivory) 78%, transparent);
}
.salam-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-top: 18px;
  padding: 8px 26px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ecd39b, var(--gold));
  color: #1a1408;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.25;
  box-shadow: 0 10px 24px -6px rgba(212, 175, 106, .6);
}
.ar {
  font-family: var(--arabic);
  font-weight: 700;
  line-height: 1.4;
}
.salam-btn .ar { font-size: 1.2rem; }

.glimpse-pill {
  position: absolute;
  left: 34px;
  top: 64px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 17px;
  border-radius: 999px;
  background: rgba(7, 10, 9, .52);
  border: 1px solid rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--ivory);
  font-size: .92rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
  animation: float 7s ease-in-out -2.5s infinite alternate;
}
.glimpse-pill b { font-weight: 600; }
.pdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ea7d61;
  box-shadow: 0 0 12px #ea7d61;
}

@keyframes float {
  from { transform: translateY(0); }
  to   { transform: translateY(-14px); }
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  translate: -50% 0;
  width: 26px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .32);
  opacity: 0;
  animation: rise 1s var(--ease) 1.6s forwards;
}
.scroll-cue span {
  position: absolute;
  left: 50%;
  top: 9px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 3px;
  background: var(--gold-soft);
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ── Shared section furniture ─────────────────────────────────────────── */

.lattice {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--lattice) center / 56px 56px;
  opacity: .055;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(70% 60% at 50% 50%, #000 30%, transparent 100%);
}

.section-head { max-width: 780px; margin-bottom: 58px; }
.section-head.center { margin-inline: auto; text-align: center; }
.features-first {
  margin-top: 18px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--ivory) 82%, transparent);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

/* ── The intention ────────────────────────────────────────────────────── */

.intention {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 160px 0;
  text-align: center;
  background: radial-gradient(80% 120% at 50% 0%, #12352e 0%, #0b1714 55%, var(--ink) 100%);
}
.intention-rosette {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: min(700px, 116vw);
  height: auto;
  max-height: 94%;
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: .22;
  animation: turn 120s linear infinite;
}
/* A dark halo under the words, so the ornament never crosses what is read. */
.intention-inner, .cta-inner { position: relative; }
.intention-inner::before, .cta-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(980px, 120%);
  height: 150%;
  translate: -50% -50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(9, 20, 17, .92) 0%, rgba(9, 20, 17, .55) 55%, transparent 100%);
}
.cta-inner::before {
  background: radial-gradient(closest-side, rgba(11, 19, 40, .9) 0%, rgba(11, 19, 40, .5) 55%, transparent 100%);
}
@keyframes turn { to { rotate: 360deg; } }

.virtues {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 .32em;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.7rem, 7.2vw, 5.8rem);
  line-height: 1.1;
}
.virtues i {
  font-style: normal;
  color: var(--gold);
  opacity: .55;
}
.virtues-sub {
  margin-top: 18px;
  font-size: 1.02rem;
  letter-spacing: .05em;
  color: color-mix(in srgb, var(--ivory) 70%, transparent);
}

/* ── The idea (light) ─────────────────────────────────────────────────── */

.story {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 150px 0;
  background:
    radial-gradient(60% 60% at 85% 40%, rgba(212, 175, 106, .16) 0%, transparent 70%),
    var(--cream);
  color: var(--forest);
}
.story .eyebrow, .how .eyebrow { color: var(--gold-deep); }
.story h2 em, .how h2 em { color: var(--gold-deep); }

.story-copy .body {
  font-size: 1.1rem;
  color: var(--stone);
  max-width: 31em;
}

.checks {
  list-style: none;
  display: grid;
  gap: 14px;
  margin-top: 30px;
}
.checks li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-weight: 400;
  color: var(--forest);
}
.checks svg {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 5px;
  margin-top: -1px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold) 24%, transparent);
  fill: none;
  stroke: var(--gold-deep);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The phone, on its rosette. */
.stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 640px;
}
.stage-rosette {
  position: absolute;
  width: min(580px, 112%);
  height: auto;
  aspect-ratio: 1;
  opacity: .55;
}
.how .stage-rosette { opacity: .45; }

.phone {
  --tilt: 0deg;
  position: relative;
  width: min(330px, 78vw);
  padding: 11px;
  border-radius: 46px;
  background: linear-gradient(160deg, #22322d 0%, #0b1210 55%, #1a2723 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 60px 110px -30px rgba(7, 10, 9, .6),
              0 30px 60px -30px rgba(7, 10, 9, .55),
              inset 0 0 0 1px rgba(255, 255, 255, .05);
  transform: rotate(var(--tilt));
  animation: phoneFloat 9s ease-in-out infinite alternate;
}
.tilt-l { --tilt: -3deg; }
.tilt-r { --tilt: 3deg; }
@keyframes phoneFloat {
  from { transform: translateY(0) rotate(var(--tilt)); }
  to   { transform: translateY(-16px) rotate(calc(var(--tilt) * .5)); }
}
.phone::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 50%;
  z-index: 3;
  width: 88px;
  height: 24px;
  translate: -50% 0;
  border-radius: 99px;
  background: #040605;
}
.phone-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 18.6;
  border-radius: 36px;
  background: #0b1412;
}
.phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.stage:hover .phone-screen img { transform: scale(1.045); }
.phone-overlay {
  position: absolute;
  inset: auto 0 0;
  padding: 80px 22px 28px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .55) 40%, rgba(0, 0, 0, .9));
  color: var(--ivory);
}
.phone-overlay strong {
  display: block;
  margin: .32em 0 .14em;
  font-family: var(--display);
  font-size: 2.15rem;
  font-weight: 500;
  line-height: 1.05;
}
.phone-overlay > span:not(.pill) {
  display: block;
  font-size: .82rem;
  letter-spacing: .03em;
  color: color-mix(in srgb, var(--ivory) 78%, transparent);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 99px;
  background: rgba(0, 0, 0, .55);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--gold-soft);
  font-size: .68rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.float-chip {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 17px;
  border-radius: 999px;
  background: rgba(255, 251, 244, .94);
  border: 1px solid rgba(212, 175, 106, .38);
  color: var(--forest);
  font-size: .86rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 20px 44px -12px rgba(7, 10, 9, .35);
  animation: float 7s ease-in-out infinite alternate;
}
.float-chip svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--gold-deep);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.float-chip .ar { font-size: 1.08rem; color: var(--gold-deep); }
.chip-a { top: 15%; left: 0; }
.chip-b { bottom: 17%; right: 0; animation-delay: -3s; }
.chip-c { top: 18%; right: 0; animation-delay: -1.5s; }

/* ── Inside Jura (dark) ───────────────────────────────────────────────── */

.features {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 150px 0;
  background: linear-gradient(180deg, var(--ink) 0%, #0a1513 50%, var(--ink) 100%);
}

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}

.tile {
  grid-column: span 2;
  position: relative;
  overflow: hidden;
  padding: 32px 28px 30px;
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  border: 1px solid rgba(255, 255, 255, .085);
  transition: transform .55s var(--ease), border-color .4s ease, box-shadow .55s var(--ease);
}
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), rgba(212, 175, 106, .15), transparent 46%);
  opacity: 0;
  transition: opacity .45s ease;
}
.tile:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 175, 106, .34);
  box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .7);
}
.tile:hover::before { opacity: 1; }
.tile-wide { grid-column: span 3; }

.tile-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 22px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  transition: transform .5s var(--spring);
}
.tile:hover .tile-icon { transform: rotate(-6deg) scale(1.08); }
.tile-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: var(--gold-soft);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tile h3 {
  margin-bottom: .38em;
  font-size: 1.7rem;
  line-height: 1.14;
  color: var(--ivory);
}
.tile p {
  font-size: .98rem;
  color: color-mix(in srgb, var(--ivory) 66%, transparent);
}
.tile p em { color: var(--gold-soft); }

.tile-salam {
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(212, 175, 106, .12), transparent 60%),
    linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
}

.dua {
  margin-top: 24px;
  padding: 24px 22px 20px;
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(160deg, rgba(212, 175, 106, .13), rgba(212, 175, 106, .04));
  border: 1px solid rgba(212, 175, 106, .26);
}
.dua-ar {
  font-family: var(--arabic);
  font-size: clamp(1.32rem, 2.1vw, 1.7rem);
  line-height: 2;
  color: var(--gold-soft);
}
.tile .dua figcaption span {
  display: block;
  margin-top: 10px;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.16rem;
  line-height: 1.45;
  color: var(--ivory);
}
.dua small {
  display: block;
  margin-top: 12px;
  font-size: .74rem;
  letter-spacing: .05em;
  color: var(--mist);
}

.tile-sky {
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(62, 155, 130, .14), transparent 60%),
    linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
}
.skybar { margin-top: 30px; }
.skybar-track {
  position: relative;
  overflow: hidden;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(90deg,
    #1b2550 0%, #6b5a8e 8%, #d39aa3 15%, #f2c38a 22%,
    #9cc7dc 34%, #c4e3ec 46%, #e8d49c 58%, #f0b46a 68%,
    #df6f4f 76%, #5a3a6e 84%, #19234a 93%, #0b1430 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 -20px 30px rgba(0, 0, 0, .18);
}
.skybar-sun {
  position: absolute;
  top: 50%;
  left: 8%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  translate: -50% -50%;
  background: #fff6d8;
  box-shadow: 0 0 20px 7px rgba(255, 236, 180, .75);
  animation: sunpass 16s ease-in-out infinite alternate;
}
@keyframes sunpass {
  from { left: 8%; }
  to   { left: 93%; }
}
.skybar ol {
  list-style: none;
  position: relative;
  height: 36px;
  margin-top: 8px;
}
.skybar li {
  position: absolute;
  left: var(--x);
  translate: -50% 0;
  padding-top: 13px;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--ivory) 72%, transparent);
}
.skybar li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(212, 175, 106, .8);
}

/* ── How it works (light) ─────────────────────────────────────────────── */

.how {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 150px 0;
  background:
    radial-gradient(60% 60% at 10% 30%, rgba(212, 175, 106, .14) 0%, transparent 70%),
    var(--paper);
  color: var(--forest);
}
.split-how { align-items: center; }

.steps {
  --progress: 0;
  list-style: none;
  position: relative;
  margin-top: 34px;
}
.steps::before, .steps::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 40px;
  width: 1px;
}
.steps::before {
  bottom: 40px;
  background: rgba(18, 53, 46, .14);
}
.steps::after {
  height: calc((100% - 80px) * var(--progress));
  background: linear-gradient(var(--gold), var(--gold-deep));
}
.step {
  position: relative;
  display: flex;
  gap: 22px;
  padding: 18px 0;
}
.num {
  flex: none;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--gold) 58%, transparent);
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--gold-deep);
  transition: background-color .5s ease, color .5s ease, box-shadow .5s ease, transform .5s var(--spring);
}
.step.lit .num {
  background: linear-gradient(135deg, #ecd39b, var(--gold));
  color: #1a1408;
  box-shadow: 0 10px 24px -6px rgba(212, 175, 106, .7);
  transform: scale(1.06);
}
.step h3 {
  margin-top: 6px;
  font-size: 1.55rem;
  line-height: 1.2;
  color: var(--forest);
}
.step p {
  margin-top: 4px;
  color: var(--stone);
}

/* ── Private by design (dark) ─────────────────────────────────────────── */

.privacy {
  position: relative;
  padding: 140px 0;
  background: radial-gradient(90% 70% at 50% 0%, #10302a 0%, var(--ink) 75%);
}
.pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.pillar {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 30px 26px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, .085);
  background: rgba(255, 255, 255, .028);
  transition: transform .55s var(--ease), border-color .4s ease, background-color .4s ease;
}
.pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(212, 175, 106, .13), transparent 46%);
  opacity: 0;
  transition: opacity .45s ease;
}
.pillar:hover::before { opacity: 1; }
.pillar svg {
  width: 32px;
  height: 32px;
  margin-bottom: 20px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pillar h3 {
  margin-bottom: .4em;
  font-size: 1.45rem;
  line-height: 1.2;
}
.pillar p {
  font-size: .95rem;
  color: color-mix(in srgb, var(--ivory) 64%, transparent);
}
.pillar-link:hover {
  transform: translateY(-5px);
  border-color: rgba(212, 175, 106, .42);
  background: rgba(212, 175, 106, .05);
}
.arrow {
  color: var(--gold-soft);
  font-weight: 500;
  white-space: nowrap;
}

/* ── The invitation: the night sky ────────────────────────────────────── */

.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 180px 0 160px;
  text-align: center;
  background: radial-gradient(115% 85% at 50% 0%, #17264a 0%, #0d1631 38%, #09110f 78%, var(--ink) 100%);
}
.cta-stars {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image:
    radial-gradient(1.6px 1.6px at 12.4% 14.2%, rgba(255,247,226,.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 22.8% 32.5%, rgba(255,247,226,1) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 31.6% 8.8%, rgba(255,247,226,.7) 50%, transparent 51%),
    radial-gradient(.9px .9px at 40.3% 22.1%, rgba(255,247,226,1) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 47.2% 6.4%, rgba(255,247,226,.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 55.9% 28.7%, rgba(255,247,226,.7) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 63.5% 12.9%, rgba(255,247,226,1) 50%, transparent 51%),
    radial-gradient(.9px .9px at 70.2% 38.4%, rgba(255,247,226,.85) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 78.8% 21.6%, rgba(255,247,226,.7) 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 86.1% 9.3%, rgba(255,247,226,1) 50%, transparent 51%),
    radial-gradient(1px 1px at 92.7% 33.1%, rgba(255,247,226,.85) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 6.3% 41.8%, rgba(255,247,226,.7) 50%, transparent 51%),
    radial-gradient(.9px .9px at 17.5% 55.2%, rgba(255,247,226,.55) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 27.9% 47.4%, rgba(255,247,226,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 36.6% 61.3%, rgba(255,247,226,.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 59.4% 52.8%, rgba(255,247,226,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 67.1% 64.9%, rgba(255,247,226,.55) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 81.9% 49.7%, rgba(255,247,226,.7) 50%, transparent 51%),
    radial-gradient(.9px .9px at 95.2% 58.6%, rgba(255,247,226,.55) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 3.8% 22.5%, rgba(255,247,226,1) 50%, transparent 51%),
    radial-gradient(1px 1px at 51.3% 40.2%, rgba(255,247,226,.7) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 74.6% 4.9%, rgba(255,247,226,.85) 50%, transparent 51%);
  animation: twinkle 4.5s ease-in-out infinite alternate;
}
.crescent {
  position: absolute;
  top: 74px;
  right: 13%;
  z-index: -2;
  width: 74px;
  height: 74px;
  fill: #f3e6c5;
  filter: drop-shadow(0 0 26px rgba(243, 230, 197, .5));
  animation: float 10s ease-in-out infinite alternate;
}
.cta-rosette {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: min(760px, 130vw);
  height: auto;
  max-height: 94%;
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: .2;
  animation: turn 160s linear infinite reverse;
}
.cta h2 { font-size: clamp(2.7rem, 6.2vw, 5.2rem); }
.cta .lead { margin: 18px auto 0; max-width: 32em; }
.fineprint {
  margin-top: 28px;
  font-size: .84rem;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--ivory) 58%, transparent);
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.footer {
  padding: 46px 0 54px;
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.footer-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px 36px;
}
.footer-brand p {
  margin-top: 8px;
  font-size: .88rem;
  color: var(--mist);
}
.footer .brand { font-size: 1.6rem; }
.footer .mark { width: 30px; height: 30px; border-radius: 8px; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
  font-size: .9rem;
  color: color-mix(in srgb, var(--ivory) 70%, transparent);
}
.footer-links a { transition: color .2s ease; }
.footer-links a:hover { color: var(--gold-soft); }
.copy { font-size: .84rem; color: var(--mist); }

/* ── Reveal on scroll ─────────────────────────────────────────────────── */

.js [data-rv] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-rv].in { opacity: 1; transform: none; }

/* ── Smaller screens ──────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; }
  .glimpse { display: none; }
  /* The film takes over the hero; the still stays underneath as the
     poster's fallback until the first frame paints. */
  .hero-video { display: block; }
  .hero-img { animation: none; }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile, .tile-wide { grid-column: span 3; }
}

@media (max-width: 960px) {
  .menu-btn { display: inline-flex; }
  .nav-links {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding: 90px 24px 40px;
    background:
      radial-gradient(120% 70% at 50% 0%, #12352e 0%, transparent 60%),
      var(--ink);
    font-family: var(--display);
    font-size: 1.7rem;
    color: var(--ivory);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility .4s ease;
  }
  .nav-links.open { opacity: 1; visibility: visible; }
  .nav-links > a:not(.btn)::after { display: none; }
  .nav-links .legal-pill { font-family: var(--ui); margin-top: 6px; }
  .nav-links .btn { font-family: var(--ui); margin-top: 8px; }
  .brand { position: relative; z-index: 2; }
}

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .stage { min-height: 560px; }
  .story, .features, .how, .privacy { padding: 110px 0; }
  .intention { padding: 120px 0; }
  .cta { padding: 150px 0 130px; }
  .crescent { right: 8%; top: 54px; width: 58px; height: 58px; }
}

@media (max-width: 640px) {
  .hero { padding: 120px 0 92px; }
  .hero-shade {
    background:
      linear-gradient(180deg, rgba(7, 10, 9, .55) 0%, rgba(7, 10, 9, .1) 24%, rgba(7, 10, 9, .55) 55%, var(--ink) 100%);
  }
  .tile, .tile-wide { grid-column: span 6; }
  .pillars { grid-template-columns: 1fr; }
  .tile { padding: 28px 22px 26px; }
  .tile h3 { font-size: 1.55rem; }
  .actions .btn { flex: 1 1 100%; }
  .trust { gap: 10px 18px; font-size: .86rem; }
  .footer-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .chip-a { left: -4px; }
  .chip-b, .chip-c { right: -4px; }
  .stage { min-height: 520px; }
  .skybar li { font-size: .62rem; letter-spacing: .06em; }
}

/* ── Phones and portrait tablets: the film ABOVE the words ────────────────
   Overlaid full-bleed, the copy block is tall enough on a phone that the pill
   and the headline landed right across the couple's faces. Here the film
   owns the top of the screen (faces clear), fades into the night, and the
   words begin below it. After the 640px block on purpose: it must win. */
@media (max-width: 1100px) and (orientation: portrait) {
  .hero {
    justify-content: flex-start;
    min-height: 0;
    padding-top: 52vh;
    padding-top: 52svh;
  }
  .hero-media {
    inset: 0 0 auto;
    height: 66vh;
    height: 66svh;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 66%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 66%, transparent 100%);
  }
  .hero-video { object-position: 50% 12%; }
  .hero-img { object-position: 50% 30%; }
  .hero-shade {
    background:
      linear-gradient(180deg, rgba(7, 10, 9, .5) 0%, rgba(7, 10, 9, 0) 16%, rgba(7, 10, 9, 0) 40%, rgba(7, 10, 9, .62) 54%, var(--ink) 72%);
  }
  .scroll-cue { display: none; }
}

/* ── Stillness, for those who ask for it ──────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .hero-copy > *, .glimpse, .scroll-cue, .js [data-rv] { opacity: 1; transform: none; }
  .rosette .ln { stroke-dashoffset: 0; }
  .rosette .dot { opacity: 1; }
}