/* =========================================================================
   SAHTEIN — landing page
   Tungsten + saffron-amber direction: full-bleed cinematic Arab food, Arabic
   display (Zain) leads, Latin secondary; saffron reserved for the CTA.
   Mobile-first, RTL-native.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
  /* canvas — warm near-black, never navy, never #000 */
  --abyss: #0B0906;
  --char:  #0E0B08;
  --char-2:#120C08;
  --raised:#17110A;
  --raised-2:#1F160D;

  /* the single accent — warm metallic GOLD (Gulf-luxury), never CorpFit ember.
     Flat yellow reads cheap; the gradient gives it a real gold sheen. */
  --gold:        #CD9E3C;
  --gold-bright: #EFD489;
  --gold-deep:   #A2761E;
  --gold-ink:    #1A1206;  /* dark text that sits on the gold CTA */
  --gold-grad:   linear-gradient(155deg, #EFD489 0%, #CD9E3C 46%, #A2761E 100%);
  --bulb:        #F2B15A;

  /* ink */
  --white: #FFFFFF;
  --bone:  #F0E8DB;
  --ash:   #BAB0A0;
  --ash-dim:#8E8577;
  --line:  rgba(240,232,219,.12);
  --line-strong: rgba(240,232,219,.20);

  /* type — Arabic-led: Zain is the dominant display voice; Latin stays secondary
     (restrained Plex Sans, sentence case, lighter weight — the inverse of CorpFit) */
  --font-display-ar: 'Zain', 'Tajawal', system-ui, sans-serif;
  --font-display-la: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-data: 'IBM Plex Mono', 'IBM Plex Sans Arabic', ui-monospace, 'SFMono-Regular', monospace;
  --font-display: var(--font-display-ar);
  --display-weight: 900;   /* Zain heavy in AR; Latin steps down to 700 (see html[lang=en]) */
  /* Big display numerals: Zain draws Arabic-Indic digits as Western glyphs, so AR figures
     use Plex Arabic (true ٠-٩); EN figures use the mono data face. */
  --font-num: 'IBM Plex Sans Arabic', system-ui, sans-serif;

  /* fluid scale */
  --step--2: clamp(.72rem, .69rem + .15vw, .8rem);
  --step--1: clamp(.82rem, .78rem + .22vw, .94rem);
  --step-0:  clamp(1rem, .95rem + .3vw, 1.14rem);
  --step-1:  clamp(1.2rem, 1.08rem + .6vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.28rem + 1.1vw, 2.15rem);
  --step-3:  clamp(2.05rem, 1.6rem + 2.2vw, 3.4rem);
  --step-4:  clamp(2.7rem, 1.9rem + 4vw, 5rem);
  --step-5:  clamp(3.4rem, 2.1rem + 6.4vw, 7rem);

  --pad-i: clamp(1.25rem, 5vw, 6rem);
  --maxw: 72rem;
  --radius: 14px;
  --radius-lg: 22px;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

html[lang="en"] { --font-display: var(--font-display-la); --font-num: var(--font-data); --display-weight: 700; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--bone);
  background: var(--abyss);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
html[lang="en"] body { line-height: 1.6; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
s { text-decoration-thickness: 1.5px; }
::selection { background: var(--gold); color: var(--gold-ink); }

/* Arabic is a connected script — never letter-space it. RTL mode is all-Arabic. */
[dir="rtl"] * { letter-spacing: 0 !important; }

/* EN visitors: hold paint until strings are swapped (no CLS, layout reserved) */
html.pending-i18n body { visibility: hidden; }

/* ---------- Numbers ---------- */
.num { font-variant-numeric: tabular-nums; letter-spacing: 0; font-feature-settings: "tnum" 1; }

/* ---------- Skip link ---------- */
.skip-link {
  position: fixed; inset-block-start: -100px; inset-inline-start: 1rem; z-index: 200;
  background: var(--gold); color: var(--gold-ink); padding: .65rem 1rem; border-radius: 10px;
  font-weight: 700; transition: inset-block-start .2s var(--ease);
}
.skip-link:focus { inset-block-start: calc(env(safe-area-inset-top) + .6rem); }

/* ---------- Wordmark (bilingual, typographic — no badge geometry) ----------
   Arabic leads (Zain, metallic gold); Latin "SAHTEIN" is the secondary
   romanization so the brand is learnable in both scripts. */
.brand { display: inline-flex; align-items: center; }
.wordmark { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.wordmark__ar {
  font-family: var(--font-display-ar); font-weight: 900; font-size: 1.74rem; line-height: 1;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.wordmark__la {
  font-family: var(--font-body); font-weight: 700; font-size: .6rem; line-height: 1;
  letter-spacing: .32em !important;   /* Latin romanization keeps its tracking, even in RTL */
  color: var(--gold-deep); margin-block-start: .46em; padding-inline-start: .1em;
}
.wordmark--sm .wordmark__ar { font-size: 1.4rem; }
.wordmark--sm .wordmark__la { font-size: .55rem; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--raised);
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step-0);
  line-height: 1;
  padding: 1.05em 1.5em;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease), box-shadow .25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn--block { inline-size: 100%; }
.btn--gold {
  background: var(--gold-grad);
  color: var(--gold-ink);
  font-weight: 800;
  box-shadow: 0 12px 34px -14px rgba(205,158,60,.6), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn--gold:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn--gold:active { filter: none; transform: translateY(0); }
.btn:disabled { opacity: .6; cursor: default; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + .85rem) var(--pad-i) .85rem;
  transition: background-color .3s var(--ease), backdrop-filter .3s var(--ease);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(7,5,3,.7), rgba(7,5,3,0));
  opacity: 1; transition: opacity .3s var(--ease);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
}
.site-header.is-scrolled {
  background: rgba(11,9,6,.82);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-block-end: 1px solid var(--line);
}
.site-header.is-scrolled::before { opacity: 0; }

.lang-toggle {
  background: rgba(255,255,255,.08);
  border: 1px solid var(--line-strong);
  color: var(--bone);
  inline-size: 3rem; block-size: 2.5rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600; font-size: .9rem;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.lang-toggle:hover { background: rgba(255,255,255,.16); border-color: var(--gold); }
.lang-toggle__label { display: block; }

/* =========================================================================
   STAGE — tungsten placeholder, swap-ready for the Flux shots.
   A real <img> fades in over this when the asset exists (see main.js).
   ========================================================================= */
.stage {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--char);
  --pool-x: 50%; --pool-y: 52%;
  isolation: isolate;
}
.stage::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(105% 70% at 50% -10%, rgba(242,177,90,.34), rgba(242,177,90,0) 48%),
    radial-gradient(60% 48% at var(--pool-x) var(--pool-y), rgba(233,150,72,.30), rgba(233,150,72,0) 62%),
    radial-gradient(85% 60% at var(--pool-x) var(--pool-y), rgba(120,64,26,.35), rgba(70,38,16,0) 70%),
    linear-gradient(180deg, #241708 0%, #17100a 45%, #0c0805 100%);
}
/* wood-grain suggestion */
.stage::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background:
    repeating-linear-gradient(97deg, rgba(0,0,0,0) 0 9px, rgba(0,0,0,.16) 9px 10px),
    repeating-linear-gradient(97deg, rgba(255,190,120,.04) 0 40px, rgba(0,0,0,0) 40px 80px);
  -webkit-mask-image: radial-gradient(80% 80% at var(--pool-x) var(--pool-y), rgba(0,0,0,.2), #000 70%);
          mask-image: radial-gradient(80% 80% at var(--pool-x) var(--pool-y), rgba(0,0,0,.2), #000 70%);
}
.stage__grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .42; mix-blend-mode: overlay;
  background-image: 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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
.stage__img {
  position: absolute; inset: 0; z-index: 2;
  inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center;
  opacity: 0; transition: opacity .7s var(--ease);
}
.stage__img.is-loaded { opacity: 1; }

/* per-stage lighting variety */
.stage--hero { --pool-x: 50%; --pool-y: 44%; }
.stage--indict { --pool-x: 62%; --pool-y: 60%; filter: saturate(.85); }
.stage--join { --pool-x: 48%; --pool-y: 46%; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  position: relative; z-index: 1;
  min-height: 100svh; min-height: 100dvh;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(to top, var(--abyss) 2%, rgba(11,9,6,.7) 22%, rgba(11,9,6,0) 52%),
    radial-gradient(120% 80% at 50% 8%, rgba(11,9,6,.55), rgba(11,9,6,0) 40%);
}

/* the scan reveal */
.scan { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease); }
.hero.scanning .scan { opacity: 1; }
.scan__plane {
  position: absolute; inset-block: 6%; inline-size: 30%; inset-inline-start: 0;
  background: linear-gradient(90deg, transparent, rgba(255,224,150,.18) 42%, rgba(245,190,70,.6) 50%, rgba(255,224,150,.18) 58%, transparent);
  filter: blur(3px); mix-blend-mode: screen; transform: translateX(-180%);
}
.scan__grid {
  position: absolute; inset: 10% 7%; border-radius: 18px;
  border: 1px solid rgba(255,190,120,.22);
  opacity: 0;
  background-image:
    linear-gradient(rgba(255,190,120,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,190,120,.10) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(60% 55% at 50% 46%, #000 20%, transparent 72%);
          mask-image: radial-gradient(60% 55% at 50% 46%, #000 20%, transparent 72%);
}
.hero.scanning .scan__grid { animation: gridPulse 1.5s var(--ease) forwards; }
@keyframes gridPulse { 0%{opacity:0} 25%{opacity:1} 75%{opacity:.7} 100%{opacity:0} }

/* readout */
.readout {
  position: relative; z-index: 4; grid-row: 1; align-self: center; justify-self: center;
  inline-size: 100%; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 6rem var(--pad-i) 1rem; pointer-events: none;
}
.readout__dish {
  font-family: var(--font-display); color: #fff;
  font-size: var(--step-3); line-height: 1; font-weight: var(--display-weight);
  text-shadow: 0 2px 30px rgba(0,0,0,.6);
}
html[lang="en"] .readout__dish { text-transform: none; letter-spacing: .01em; }
.readout__kcal { display: inline-flex; align-items: baseline; gap: .4rem; margin-block-start: .35rem; }
.readout__num {
  font-family: var(--font-num); color: #fff; font-weight: 700;
  font-size: clamp(3.4rem, 14vw, 6.5rem); line-height: .9;
  text-shadow: 0 4px 40px rgba(0,0,0,.55);
}
.hero.locked .readout__num { color: #fff; text-shadow: 0 0 30px rgba(245,190,70,.85), 0 4px 40px rgba(0,0,0,.5); }
.readout__unit { font-family: var(--font-body); font-size: var(--step--1); color: var(--ash); letter-spacing: .02em; }
.readout__macros { display: flex; gap: .5rem; margin-block-start: 1rem; flex-wrap: wrap; justify-content: center; }
.chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: .4rem;
  background: rgba(17,12,8,.55); backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong); border-radius: 12px;
  padding: .55rem .7rem; min-inline-size: 5.2rem;
}
.chip__top { display: flex; align-items: baseline; gap: .35rem; width: 100%; justify-content: space-between; }
.chip__label { font-size: var(--step--2); color: var(--ash); letter-spacing: .02em; }
.chip__val { font-family: var(--font-data); font-weight: 600; font-size: var(--step-0); color: #fff; }
.chip__bar { inline-size: 100%; block-size: 3px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.chip__bar > i { display: block; block-size: 100%; inline-size: var(--w, 40%); background: linear-gradient(90deg, var(--gold), var(--gold-bright)); border-radius: 3px; }

/* JS choreography — hidden first only when JS is present */
.js .readout__dish,
.js .readout__kcal,
.js .readout__macros { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.js .hero.r1 .readout__dish { opacity: 1; transform: none; }
.js .hero.r2 .readout__kcal { opacity: 1; transform: none; }
.js .hero.r3 .readout__macros { opacity: 1; transform: none; }

.hero__copy {
  position: relative; z-index: 5; grid-row: 2; align-self: end;
  padding-inline: var(--pad-i);
  padding-block-end: calc(env(safe-area-inset-bottom) + 2.2rem);
  max-inline-size: 40rem;
}
.hero__kicker {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .04em;
  color: var(--gold-bright); margin-block-end: .6rem;
  display: inline-flex; align-items: center; gap: .5rem;
}
.hero__kicker::before { content: ""; inline-size: 1.6rem; block-size: 2px; background: var(--gold); border-radius: 2px; }
.hero__title {
  font-family: var(--font-display); color: #fff;
  font-weight: var(--display-weight); font-size: var(--step-4); line-height: .98;
  letter-spacing: 0; text-wrap: balance; overflow-wrap: break-word;
  text-shadow: 0 2px 40px rgba(0,0,0,.5);
}
html[lang="en"] .hero__title { text-transform: none; letter-spacing: .005em; }
.hero__promise {
  margin-block-start: 1rem; color: var(--bone);
  font-size: var(--step-1); line-height: 1.55; max-inline-size: 34rem;
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}

/* =========================================================================
   WAITLIST FORM
   ========================================================================= */
.waitlist { margin-block-start: 1.6rem; max-inline-size: 30rem; }
.waitlist--center { margin-inline: auto; }
.waitlist__field {
  display: flex; gap: .5rem;
  background: rgba(17,12,8,.6);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: .4rem;
  backdrop-filter: blur(10px);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.waitlist__field:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(205,158,60,.16); }
.waitlist__input {
  flex: 1 1 auto; min-inline-size: 0;
  background: transparent; border: 0; outline: none;
  padding-inline: 1.1rem; padding-block: .5rem;
  font-size: var(--step-0); color: #fff;
}
.waitlist__input::placeholder { color: var(--ash-dim); }
.waitlist__pot { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.waitlist__submit { flex: 0 0 auto; padding-block: .85em; padding-inline: 1.35em; white-space: nowrap; }
.waitlist__note { margin-block-start: .7rem; font-size: var(--step--1); color: var(--ash); }
.waitlist__status { margin-block-start: .7rem; font-size: var(--step--1); min-block-size: 1.2em; }
.waitlist__status.is-ok { color: #7BE0A6; }
.waitlist__status.is-err { color: #FF8A6B; }
.waitlist.is-done .waitlist__field { display: none; }

/* =========================================================================
   INDICTMENT
   ========================================================================= */
.indict {
  position: relative; overflow: hidden;
  padding-block: clamp(5rem, 14vh, 9rem); padding-inline: var(--pad-i);
  display: flex; align-items: center;
}
.indict .stage--indict { opacity: .5; }
.indict__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, var(--abyss), rgba(11,9,6,.86) 55%, var(--abyss));
}
.indict__inner { position: relative; z-index: 2; max-inline-size: 46rem; }
.indict__lead { font-size: var(--step-1); color: var(--ash); }
.indict__title {
  font-family: var(--font-display); color: #fff;
  font-weight: var(--display-weight); font-size: var(--step-4); line-height: 1; margin-block-start: .2rem;
}
html[lang="en"] .indict__title { text-transform: none; }
.indict__body { margin-block-start: 1.5rem; font-size: var(--step-1); color: var(--bone); line-height: 1.7; max-inline-size: 40rem; }

.stat { margin-block-start: 2.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem, 4vw, 2.4rem); }
.stat__num {
  font-family: var(--font-display); color: var(--gold);
  font-size: clamp(4.5rem, 22vw, 9rem); line-height: .8; font-weight: var(--display-weight);
  text-shadow: 0 0 70px rgba(205,158,60,.45);
}
.stat__cap { font-size: var(--step-0); color: var(--ash); max-inline-size: 16rem; line-height: 1.5; }

/* =========================================================================
   PROOF — dish gallery
   ========================================================================= */
.proof { padding-block: clamp(4rem, 10vh, 7rem) clamp(3rem, 8vh, 5rem); }
.proof__head { padding-inline: var(--pad-i); }
.proof__title { font-family: var(--font-display); color: #fff; font-weight: var(--display-weight); font-size: var(--step-3); line-height: 1.02; }
html[lang="en"] .proof__title { text-transform: none; }
.proof__sub { margin-block-start: .6rem; color: var(--ash); font-size: var(--step-1); }
.proof__foot { padding-inline: var(--pad-i); margin-block-start: 1.4rem; color: var(--ash-dim); font-size: var(--step--1); }

.gallery {
  margin-block-start: 2rem;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: min(78%, 21rem);
  gap: 1rem;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding-inline: var(--pad-i);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.gallery::-webkit-scrollbar { display: none; }

.plate {
  position: relative; scroll-snap-align: center;
  aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line);
  isolation: isolate;
}
.plate__scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to top, rgba(7,5,3,.94) 4%, rgba(7,5,3,.55) 32%, rgba(7,5,3,0) 62%);
}
.plate__meta { position: absolute; z-index: 4; inset-inline: 0; inset-block-end: 0; padding: 1.1rem 1.2rem 1.25rem; }
.plate__region {
  display: inline-block; font-size: var(--step--2); letter-spacing: .06em;
  color: var(--bulb); border: 1px solid rgba(242,177,90,.35);
  padding: .18em .6em; border-radius: 999px; margin-block-end: .55rem;
}
.plate__name { font-family: var(--font-display); color: #fff; font-weight: var(--display-weight); font-size: var(--step-2); line-height: 1; }
html[lang="en"] .plate__name { text-transform: none; }
.plate__data { margin-block-start: .7rem; display: flex; align-items: flex-end; gap: 1rem; }
.plate__kcal { display: flex; align-items: baseline; gap: .3rem; }
.plate__kcal b { font-family: var(--font-data); font-weight: 600; font-size: 1.7rem; color: #fff; line-height: 1; }
.plate__kcal span { font-size: var(--step--2); color: var(--ash); }
.plate__macros { display: flex; gap: .85rem; margin-inline-start: auto; }
.plate__macro { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.plate__macro b { font-family: var(--font-data); font-weight: 500; font-size: var(--step-0); color: var(--bone); }
.plate__macro span { font-size: 10px; letter-spacing: .04em; color: var(--ash-dim); text-transform: none; }

/* =========================================================================
   ROADMAP — "sequenced, not skipped"
   A quiet confidence beat between the proof and the price. Everything here is
   one notch below the pricing block on purpose: no stage image, no gold, no
   cards. A ruled list, data-voice labels, start-aligned against the centred
   offer that follows. Only the SOON chip carries warmth (bulb, as on .plate).
   ========================================================================= */
.road { padding-block: clamp(3rem, 8vh, 5rem); padding-inline: var(--pad-i); }
.road__inner { max-inline-size: 46rem; margin-inline: auto; }

.road__kicker {
  /* Latin gets the mono data-voice; Arabic must not, because Plex Mono supplies a
     monospace word-space (2.5x Plex Arabic's) and blows the two words apart.
     Same AR/EN face split as --font-num. */
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--step--2); letter-spacing: .14em;
  color: var(--ash-dim); text-transform: uppercase;
}
html[lang="en"] .road__kicker { font-family: var(--font-data); font-weight: 500; }
.road__title {
  /* --step-2, and --bone rather than #fff: reads under .offer__title (--step-3, #fff) */
  font-family: var(--font-display); color: var(--bone);
  font-weight: var(--display-weight); font-size: var(--step-2);
  line-height: 1.08; margin-block-start: .5rem;
}
html[lang="en"] .road__title { text-transform: none; }
.road__sub { margin-block-start: .7rem; color: var(--ash); font-size: var(--step-0); max-inline-size: 32rem; }

.road__list { list-style: none; padding: 0; margin-block-start: 2rem; border-block-start: 1px solid var(--line); }
.road__item {
  display: grid;
  grid-template-columns: minmax(4.4rem, auto) 1fr;
  column-gap: clamp(.9rem, 3vw, 1.6rem);
  align-items: baseline;
  padding-block: 1.15rem;
  border-block-end: 1px solid var(--line);
}
.road__when {
  grid-row: 1; justify-self: start;
  display: inline-block; text-align: center;
  font-family: var(--font-data); font-weight: 600;
  font-size: var(--step--2); letter-spacing: .06em;
  color: var(--ash-dim);
  border: 1px solid var(--line); border-radius: 999px;
  padding: .3em .7em;
  white-space: nowrap;
}
.road__when--soon { color: var(--bulb); border-color: rgba(242,177,90,.35); background: rgba(242,177,90,.07); }
.road__name { grid-column: 2; font-family: var(--font-body); font-weight: 600; font-size: var(--step-1); line-height: 1.3; color: var(--bone); }
.road__note { grid-column: 2; margin-block-start: .3rem; font-size: var(--step--1); color: var(--ash-dim); }

/* =========================================================================
   FOUNDING OFFER
   ========================================================================= */
.offer { padding-block: clamp(4rem, 11vh, 8rem); padding-inline: var(--pad-i); background: linear-gradient(180deg, var(--abyss), var(--char-2)); }
.offer__inner { max-inline-size: 40rem; margin-inline: auto; text-align: center; }
.offer__kicker { color: var(--gold-bright); font-weight: 600; letter-spacing: .08em; font-size: var(--step--1); text-transform: none; }
.offer__title { font-family: var(--font-display); color: #fff; font-weight: var(--display-weight); font-size: var(--step-3); line-height: 1.04; margin-block-start: .5rem; }
html[lang="en"] .offer__title { text-transform: none; }
.offer__desc { margin-block-start: 1rem; color: var(--ash); font-size: var(--step-0); max-inline-size: 34rem; margin-inline: auto; }

.offer__controls { margin-block-start: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.seg {
  display: inline-flex; gap: .25rem; padding: .3rem;
  background: rgba(17,12,8,.7); border: 1px solid var(--line); border-radius: 999px;
}
.seg__btn {
  border: 0; background: transparent; color: var(--ash);
  font-family: var(--font-body); font-weight: 600; font-size: var(--step--1);
  padding: .6em 1.1em; border-radius: 999px; cursor: pointer;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.seg__btn:hover { color: var(--bone); }
.seg__btn.is-active { background: var(--bone); color: #17110A; }

.price-card {
  margin-block-start: 2.2rem; position: relative;
  background: linear-gradient(180deg, var(--raised-2), var(--raised));
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  padding: 2.4rem 1.6rem 1.6rem; text-align: center;
  box-shadow: 0 40px 80px -50px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
}
.price-card::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.price-card__badge {
  position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem;
  font-size: var(--step--2); font-weight: 700; letter-spacing: .04em;
  color: var(--gold-bright); border: 1px solid rgba(205,158,60,.4);
  background: rgba(205,158,60,.1); padding: .3em .7em; border-radius: 999px;
}
.price-card__amount { display: flex; align-items: baseline; justify-content: center; gap: .4rem; }
.price-card__amount .num { font-family: var(--font-data); font-weight: 600; font-size: clamp(3rem, 12vw, 4.4rem); color: #fff; line-height: 1; }
.price-card__period { font-size: var(--step-0); color: var(--ash); }
.price-card__was { margin-block-start: .6rem; display: flex; align-items: center; justify-content: center; gap: .55rem; flex-wrap: wrap; color: var(--ash); font-size: var(--step--1); }
.price-card__was s { color: var(--ash-dim); }
.price-card__save { color: var(--gold-bright); font-weight: 700; border: 1px solid rgba(205,158,60,.35); border-radius: 999px; padding: .1em .55em; }
.price-card__lock { margin-block-start: 1.1rem; color: var(--bone); font-size: var(--step--1); max-inline-size: 26rem; margin-inline: auto; }
.price-card .btn { margin-block-start: 1.4rem; }
.price-card__fine { margin-block-start: 1rem; color: var(--ash-dim); font-size: var(--step--2); letter-spacing: .01em; }

/* =========================================================================
   TRUST
   ========================================================================= */
.trust { padding-block: clamp(3rem, 8vh, 5rem); padding-inline: var(--pad-i); border-block: 1px solid var(--line); }
.trust__list { max-inline-size: var(--maxw); margin-inline: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.5rem; }
.trust__item { position: relative; color: var(--ash); font-size: var(--step-0); }
.trust__item::before { content: "—"; color: var(--gold); margin-inline-end: .6rem; }

/* =========================================================================
   FINAL CTA
   ========================================================================= */
.join {
  position: relative; overflow: hidden;
  min-block-size: 70svh; display: flex; align-items: center; justify-content: center;
  padding-block: clamp(4rem, 12vh, 8rem); padding-inline: var(--pad-i);
}
.join__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--abyss), rgba(11,9,6,.7) 50%, rgba(11,9,6,.85)); }
.join__inner { position: relative; z-index: 2; text-align: center; inline-size: 100%; max-inline-size: 36rem; }
.join__title { font-family: var(--font-display); color: #fff; font-weight: var(--display-weight); font-size: var(--step-4); line-height: 1; }
html[lang="en"] .join__title { text-transform: none; }
.join__sub { margin-block-start: 1rem; color: var(--bone); font-size: var(--step-1); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer { padding: clamp(2.5rem, 7vh, 4rem) var(--pad-i) calc(env(safe-area-inset-bottom) + 2rem); background: var(--abyss); }
.site-footer__top { max-inline-size: var(--maxw); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.2rem; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.site-footer__links a { color: var(--ash); font-size: var(--step--1); transition: color .2s var(--ease); }
.site-footer__links a:hover { color: var(--gold-bright); }
.site-footer__meaning { max-inline-size: var(--maxw); margin: 1.8rem auto 0; color: var(--bone); font-size: var(--step-1); font-family: var(--font-display-ar); }
html[lang="en"] .site-footer__meaning { font-family: var(--font-body); font-style: italic; }
.site-footer__legal { max-inline-size: var(--maxw); margin: .8rem auto 0; color: var(--ash-dim); font-size: var(--step--2); }

/* =========================================================================
   RESPONSIVE — scale up from the 390px base
   ========================================================================= */
@media (min-width: 48rem) {
  .hero__copy { padding-block-end: calc(env(safe-area-inset-bottom) + 3.5rem); }
  .gallery { grid-auto-columns: 20rem; }
  .trust__list { gap: 1rem 4rem; }
}

@media (min-width: 64rem) {
  .hero__copy { max-inline-size: 46rem; }
  .hero__promise { font-size: var(--step-1); }
  .gallery { grid-auto-columns: 22rem; }
  .indict { min-block-size: 90svh; }
  .stat__cap { max-inline-size: 22rem; }
}

/* pointer-fine hover niceties */
@media (hover: hover) {
  .plate { transition: transform .4s var(--ease-out), border-color .3s var(--ease); }
  .plate:hover { transform: translateY(-4px); border-color: var(--line-strong); }
}

/* =========================================================================
   REDUCED MOTION — the finished composition, no animation
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .readout__dish, .js .readout__kcal, .js .readout__macros { opacity: 1; transform: none; }
  .scan { display: none; }
  .stage__img { opacity: 1; }
}