/* ==========================================================================
   Seven Heaven — Promo Landing Page
   Design system mirrors the main site (colors, type, radii, motion).
   Tokens extracted from _next/static/chunks/a03c473d1209ed40.css
   ========================================================================== */

/* --- Fonts: reuse the exact files the main site already ships & caches --- */
@font-face {
  font-family: "Playfair Promo";
  src: url("/_next/static/media/playfair_display_latin_400_normal-s.p.9b5ebe0f.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Promo";
  src: url("/_next/static/media/playfair_display_latin_700_normal-s.p.2b4c1db0.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato Promo";
  src: url("/_next/static/media/lato_latin_300_normal-s.p.f8e1c6ad.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato Promo";
  src: url("/_next/static/media/lato_latin_400_normal-s.p.72f6e825.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato Promo";
  src: url("/_next/static/media/lato_latin_700_normal-s.p.b391d462.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --- Arabic fonts ---------------------------------------------------------
   Amiri  → the headline face. A high-contrast Naskh with the same elegant,
            slightly editorial feel Playfair gives the English page.
   Tajawal → the body face. Clean, modern and highly legible on phones, the
            Arabic counterpart to Lato.

   Each file is an ARABIC-ONLY subset, so an English visitor never downloads
   a single byte of them: the browser only fetches a face when a character in
   its unicode-range actually needs to be drawn.

   ── Using GE Flow instead ──────────────────────────────────────────────────
   GE Flow is a licensed font and cannot be shipped here. If you have bought
   it, drop GEFlow-Regular.woff2 / GEFlow-Bold.woff2 into
   /promo/assets/fonts/, uncomment the two blocks below, and it takes over
   everywhere automatically — it is already first in the Arabic font stack.

   @font-face {
     font-family: "GE Flow";
     src: url("/promo/assets/fonts/GEFlow-Regular.woff2") format("woff2");
     font-weight: 400; font-style: normal; font-display: swap;
     unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
   }
   @font-face {
     font-family: "GE Flow";
     src: url("/promo/assets/fonts/GEFlow-Bold.woff2") format("woff2");
     font-weight: 700; font-style: normal; font-display: swap;
     unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
   }
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Amiri Promo";
  src: url("/promo/assets/fonts/amiri-arabic-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E,
                 U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Amiri Promo";
  src: url("/promo/assets/fonts/amiri-arabic-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E,
                 U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Tajawal Promo";
  src: url("/promo/assets/fonts/tajawal-arabic-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E,
                 U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Tajawal Promo";
  src: url("/promo/assets/fonts/tajawal-arabic-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E,
                 U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Tajawal Promo";
  src: url("/promo/assets/fonts/tajawal-arabic-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E,
                 U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}

/* --------------------------------------------------------------------------
   TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette — identical to the main site */
  --cream:  #faf8f5;
  --beige:  #f5f0e8;
  --gold:   #c17d4e;
  --rose:   #e8c7c0;
  --dark:   #3d3028;
  --muted:  #8b7e74;
  --line:   #e8dfd4;
  --white:  #ffffff;
  --whatsapp: #25d366;

  --font-serif: "Playfair Promo", Georgia, "Times New Roman", serif;
  --font-sans:  "Lato Promo", system-ui, -apple-system, Arial, sans-serif;

  /* Arabic stacks. "GE Flow" sits first so a licensed copy takes over the
     moment it is added. The Latin faces are kept at the tail so that Latin
     words inside Arabic copy (WhatsApp, QAR, 2026 …) still render in the
     brand fonts rather than dropping to a system face. */
  --font-ar-serif: "GE Flow", "Amiri Promo", "SF Arabic", "Geeza Pro",
                   "Noto Naskh Arabic", "Playfair Promo", Georgia, serif;
  --font-ar-sans:  "GE Flow", "Tajawal Promo", "SF Arabic", "Segoe UI",
                   "Noto Kufi Arabic", "Lato Promo", system-ui, sans-serif;

  /* Radii — main site uses .75rem; landing goes softer/more premium */
  --r-sm: 0.75rem;
  --r-md: 1.25rem;
  --r-lg: 1.75rem;
  --r-xl: 2rem;
  --r-full: 999px;

  /* Premium shadows — warm-tinted, never neutral grey */
  --sh-sm: 0 1px 2px rgba(61,48,40,.04), 0 2px 8px rgba(61,48,40,.05);
  --sh-md: 0 2px 4px rgba(61,48,40,.04), 0 12px 28px rgba(61,48,40,.08);
  --sh-lg: 0 4px 8px rgba(61,48,40,.04), 0 24px 56px rgba(61,48,40,.11);
  --sh-gold: 0 10px 30px rgba(193,125,78,.30);
  --sh-gold-hi: 0 16px 42px rgba(193,125,78,.42);

  /* Rhythm */
  --sec-y: clamp(4.5rem, 10vw, 8.5rem);
  --gutter: clamp(1.25rem, 5vw, 2rem);
  --maxw: 1180px;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* lets the FAQ accordion animate to `auto` height where supported */
  interpolate-size: allow-keywords;
  /* sticky mobile CTA bar must never cover anchored content */
  scroll-padding-bottom: 6rem;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--dark);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Room for the sticky mobile CTA bar so it never hides the footer */
@media (max-width: 767px) {
  body { padding-bottom: 5.25rem; }
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link */
.skip {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  z-index: 200; background: var(--dark); color: #fff;
  padding: .75rem 1.5rem; border-radius: 0 0 var(--r-md) var(--r-md);
  transition: top .2s var(--ease);
}
.skip:focus { top: 0; }

/* ==========================================================================
   ARABIC TYPOGRAPHY
   --------------------------------------------------------------------------
   The whole page is built on two font variables, so switching the entire
   design to Arabic type is a two-line remap. Nothing else changes: the
   layout, the spacing scale and the card proportions stay identical.

   Everything below it is a typographic correction, not a redesign — Arabic
   needs more leading than Latin, must never be letter-spaced (that breaks
   the joins between letters), and has no italic form.
   ========================================================================== */
[lang="ar"] {
  --font-serif: var(--font-ar-serif);
  --font-sans:  var(--font-ar-sans);
}

/* Slightly larger and airier — Arabic letterforms carry more detail below
   and above the baseline, so they need the extra room to feel premium. */
[lang="ar"] body {
  font-size: 1.075rem;
  line-height: 1.85;
}

[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3 {
  line-height: 1.45;          /* 1.12 clips Arabic descenders */
  letter-spacing: 0;          /* never track Arabic */
}

/* Letter-spacing separates joined Arabic letters — always reset it. */
[lang="ar"] .eyebrow,
[lang="ar"] .pkg__tag,
[lang="ar"] .pkg__price-label,
[lang="ar"] .vrev__verified,
[lang="ar"] .badge {
  letter-spacing: 0;
  text-transform: none;
}
[lang="ar"] .eyebrow { font-size: .8125rem; font-weight: 700; }
[lang="ar"] .pkg__tag { font-size: .74rem; }
[lang="ar"] .vrev__verified { font-size: .74rem; }

/* A touch larger where the copy has to carry the sale */
[lang="ar"] .hero__title  { font-size: clamp(2.2rem, 8.2vw, 4.05rem); }
[lang="ar"] .hero__sub    { font-size: clamp(1.12rem, 3.4vw, 1.38rem); max-width: 38ch; }
[lang="ar"] .hero__micro  { font-size: .875rem; }
[lang="ar"] .sec-title    { font-size: clamp(1.95rem, 5.4vw, 3rem); }
[lang="ar"] .sec-sub      { font-size: clamp(1.05rem, 2.4vw, 1.19rem); }
[lang="ar"] .btn--wa      { font-size: 1.125rem; }
[lang="ar"] .btn--lg      { font-size: 1.1875rem; }
[lang="ar"] .badge        { font-size: .845rem; }
[lang="ar"] .pkg__name    { font-size: 1.5rem; }
[lang="ar"] .pkg__desc    { font-size: 1rem; }
[lang="ar"] .pkg__features li { font-size: .95rem; line-height: 1.75; }
[lang="ar"] .why__title   { font-size: 1.15rem; }
[lang="ar"] .why__text    { font-size: .94rem; }
[lang="ar"] .step__title  { font-size: 1.22rem; }
[lang="ar"] .step__text   { font-size: .96rem; }
[lang="ar"] .vrev__name   { font-size: 1.1rem; }
[lang="ar"] .vrev__cap    { font-size: .875rem; }
[lang="ar"] .vrev-swipe   { font-size: .875rem; }
[lang="ar"] .faq-q        { font-size: 1.14rem; line-height: 1.6; }
[lang="ar"] .faq-a        { font-size: 1rem; }
[lang="ar"] .final__sub   { font-size: clamp(1.05rem, 2.6vw, 1.26rem); max-width: 46ch; }
[lang="ar"] .foot         { font-size: .92rem; }

/* Numerals stay WESTERN (1 2 3 4 · 245 ر.ق), which is what Qatari audiences
   read on price tags and phone screens.

   Some Arabic fonts — GE Flow among them — draw the plain ASCII digits as
   Arabic-Indic numerals, so "15 minutes" comes out as "١٥". That mapping
   lives in the font's own character map, which means neither a lang
   attribute nor font-feature-settings can switch it off: the only cure is to
   set those characters in a LATIN face.

   So promo.js and i18n.js wrap every run of digits in <span class="num">,
   and the rules below point that span at the Latin fonts. Note the literal
   family names — NOT var(--font-serif), which inside [lang="ar"] is the
   Arabic stack and would defeat the whole thing.

   In English none of this applies: the digits are already Latin, and the
   `.num` span simply inherits. */
[lang="ar"] .num {
  font-family: "Lato Promo", system-ui, -apple-system, Arial, sans-serif;
}

/* …but in display type the numerals should match the serif around them. */
[lang="ar"] h1 .num,
[lang="ar"] h2 .num,
[lang="ar"] h3 .num,
[lang="ar"] .faq-q .num,
[lang="ar"] .step__num,
[lang="ar"] .pkg__price-value,
[lang="ar"] .pkg__price-was {
  font-family: "Playfair Promo", Georgia, "Times New Roman", serif;
}

/* ==========================================================================
   RTL — mirroring
   --------------------------------------------------------------------------
   Almost all of the page was already written with logical properties
   (margin-inline, padding-inline …) so it flips on its own. What follows are
   the handful of places that genuinely had to be told which way is forward.
   ========================================================================== */

/* Directional glyphs: previous/next chevrons must point the other way. */
[dir="rtl"] .lb__prev svg,
[dir="rtl"] .lb__next svg {
  transform: scaleX(-1);
}

/* ==========================================================================
   TOP BAR — language switcher
   --------------------------------------------------------------------------
   Deliberately the only navigation on the page: on a paid landing page every
   extra link is a way to lose the visitor. It floats over the hero and
   scrolls away with it.
   ========================================================================== */
.topbar {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 60;
  padding-block: clamp(.9rem, 2.5vw, 1.4rem);
  pointer-events: none;        /* the hero stays clickable around the pill */
}
.topbar__inner {
  display: flex;
  justify-content: flex-end;
}

.lang {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  padding: .25rem;
  border-radius: var(--r-full);
  border: 1px solid rgba(232,199,192,.8);
  background: rgba(255,255,255,.66);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--sh-sm);
}

.lang__opt {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .85rem;
  border-radius: var(--r-full);
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(61,48,40,.62);
  white-space: nowrap;
  transition: color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.lang__opt:hover { color: var(--gold); }

.lang__opt[aria-current="true"] {
  background: var(--gold);
  color: #fff;
  box-shadow: 0 4px 12px rgba(193,125,78,.28);
}

/* Each option is always set in its OWN language and its own face, so the
   Arabic option reads as Arabic even while the page is in English. */
.lang__opt[lang="ar"] { font-family: var(--font-ar-sans); font-size: .9rem; }
.lang__opt[lang="en"] { font-family: "Lato Promo", system-ui, sans-serif; }

.lang__flag {
  font-size: 1rem;
  line-height: 1;
  /* Emoji flags: Apple/Android draw the flag, Windows draws the country code */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

@media (max-width: 380px) {
  .lang__opt { padding-inline: .65rem; }
  .lang__name { font-size: .78rem; }
}

/* --------------------------------------------------------------------------
   LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 780px; }

.section { padding-block: var(--sec-y); position: relative; }
.section--beige { background: var(--beige); }
.section--white { background: var(--white); }

/* Section heading block */
.sec-head { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: clamp(2.5rem, 6vw, 4rem); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.eyebrow::after {
  content: "";
  display: block;
  width: 34px; height: 1px;
  background: var(--rose);
  margin: .7rem auto 0;
}

.sec-title { font-size: clamp(1.9rem, 5.5vw, 3.05rem); }
.sec-sub {
  margin-top: 1rem;
  color: var(--muted);
  font-size: clamp(1rem, 2.4vw, 1.125rem);
  font-weight: 300;
}

/* --------------------------------------------------------------------------
   BUTTONS  (mirrors main-site pill button, scaled up for a landing page)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 700;
  text-align: center;
  border-radius: var(--r-full);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn svg { flex: none; }

.btn--wa {
  background: var(--gold);
  color: #fff;
  padding: 1.05rem 2.1rem;
  font-size: 1.0625rem;
  box-shadow: var(--sh-gold);
  min-height: 56px; /* comfortable thumb target */
}
.btn--wa:hover { background: #b06f42; box-shadow: var(--sh-gold-hi); transform: translateY(-2px) scale(1.02); }
.btn--wa:active { transform: translateY(0) scale(.99); }

.btn--lg { padding: 1.2rem 2.6rem; font-size: 1.125rem; min-height: 60px; }

.btn--outline {
  background: transparent;
  color: var(--dark);
  border: 1.5px solid var(--line);
  padding: .95rem 1.9rem;
  font-weight: 700;
  font-size: 1rem;
  min-height: 52px;
}
.btn--outline:hover { border-color: var(--gold); color: var(--gold); background: rgba(193,125,78,.05); }

.btn--block { display: flex; width: 100%; }

/* Subtle pulse ring on the primary hero CTA */
.btn--pulse { position: relative; }
.btn--pulse::before {
  content: "";
  position: absolute; inset: -3px;
  border-radius: var(--r-full);
  border: 2px solid var(--gold);
  opacity: 0;
  animation: ring 3.2s var(--ease) infinite;
  pointer-events: none;
}
@keyframes ring {
  0%   { opacity: .55; transform: scale(1); }
  60%  { opacity: 0;   transform: scale(1.14); }
  100% { opacity: 0;   transform: scale(1.14); }
}

/* --------------------------------------------------------------------------
   TRUST BADGES
   -------------------------------------------------------------------------- */
.badges {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
  margin: 0; padding: 0; list-style: none;
}
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid rgba(232,199,192,.75);
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: rgba(61,48,40,.78);
  border-radius: var(--r-full);
  padding: .55rem 1.05rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}
.badge svg { color: var(--gold); flex: none; }

/* --------------------------------------------------------------------------
   1 — HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* svh keeps the hero honest against mobile browser chrome */
  min-height: 100vh;
  min-height: 100svh;
  padding-block: 5rem 3.5rem;
  isolation: isolate;
}

.hero__media {
  position: absolute; inset: 0;
  z-index: -2;
}
.hero__media img,
.hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Warm cream veil — same treatment as the main-site hero */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(250,248,245,.88) 0%,
    rgba(250,248,245,.66) 45%,
    rgba(250,248,245,.92) 100%);
}
/* Soft rose light blooms */
.hero__glow {
  position: absolute; border-radius: 50%; filter: blur(70px); z-index: -1; pointer-events: none;
}
/* Logical insets: the blooms mirror with the layout so the light always
   falls from the same side of the reading flow. */
.hero__glow--a { top: 8%;   inset-inline-end: -10%;   width: 20rem; height: 20rem; background: rgba(232,199,192,.35); }
.hero__glow--b { bottom: 6%; inset-inline-start: -12%; width: 24rem; height: 24rem; background: rgba(193,125,78,.14); }

.hero__inner { position: relative; text-align: center; max-width: 800px; }
/* Soft radial scrim directly behind the copy — keeps every line legible no
   matter how bright the background photo is, without looking like a box. */
.hero__inner::before {
  content: "";
  position: absolute;
  inset: -12% -14%;
  z-index: -1;
  background: radial-gradient(ellipse at center,
    rgba(250,248,245,.92) 0%,
    rgba(250,248,245,.75) 45%,
    rgba(250,248,245,0) 78%);
  pointer-events: none;
}

.hero__title {
  font-size: clamp(2.15rem, 8.5vw, 4.15rem);
  margin-bottom: 1.1rem;
  text-shadow: 0 1px 2px rgba(250,248,245,.6);
}
.hero__sub {
  font-size: clamp(1.05rem, 3.4vw, 1.3rem);
  font-weight: 300;
  color: rgba(61,48,40,.86);
  /* Carries the gap that used to sit under the removed supporting line, so
     the run-up to the CTA keeps its original breathing room. */
  margin-bottom: 2.1rem;
  max-width: 34ch;
  margin-inline: auto;
}
.hero__cta { margin-bottom: 1.6rem; }
.hero__micro { font-size: .8125rem; color: #6f6259; margin-bottom: 2rem; }

/* Scroll hint */
.hero__scroll {
  position: absolute; bottom: 1.5rem; left: 50%; translate: -50% 0;
  color: var(--gold); opacity: .6;
  animation: bob 2.4s var(--ease) infinite;
}
@keyframes bob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(7px); }
}
@media (max-width: 767px) { .hero__scroll { display: none; } }

/* --------------------------------------------------------------------------
   2 — PACKAGES
   -------------------------------------------------------------------------- */
.pkg-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: 1fr;
  align-items: stretch;
}

/* Adaptive layout driven by data-count (set by the renderer).
   Falls back gracefully if JS never runs. */
@media (min-width: 640px) {
  .pkg-grid[data-count="2"],
  .pkg-grid[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
  .pkg-grid[data-count="3"] { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .pkg-grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
  .pkg-grid[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
}

/* A single package becomes a wide, horizontal showcase card */
.pkg-grid[data-count="1"] { max-width: 900px; margin-inline: auto; }
@media (min-width: 800px) {
  .pkg-grid[data-count="1"] .pkg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  .pkg-grid[data-count="1"] .pkg__media { height: 100%; aspect-ratio: auto; min-height: 420px; }
  .pkg-grid[data-count="1"] .pkg__body { padding: clamp(2rem, 4vw, 3rem); }
  .pkg-grid[data-count="1"] .pkg__name { font-size: 2rem; }
}

.pkg {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.pkg:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--rose); }

.pkg--featured { border-color: var(--gold); box-shadow: var(--sh-md); }

.pkg__media {
  position: relative;
  aspect-ratio: 4 / 3;      /* reserved space → zero CLS */
  background: var(--beige);
  overflow: hidden;
}
.pkg__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.pkg:hover .pkg__media img { transform: scale(1.06); }

.pkg__tag {
  position: absolute; top: .85rem; inset-inline-start: .85rem;
  background: var(--gold); color: #fff;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .4rem .85rem;
  border-radius: var(--r-full);
  box-shadow: var(--sh-gold);
}

.pkg__body {
  display: flex; flex-direction: column; flex: 1;
  padding: 1.6rem 1.4rem 1.5rem;
}
.pkg__name { font-size: 1.4rem; margin-bottom: .5rem; }
.pkg__desc { color: var(--muted); font-size: .95rem; font-weight: 300; margin-bottom: 1.15rem; }

.pkg__features { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .55rem; }
.pkg__features li {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .9rem; color: rgba(61,48,40,.85);
}
.pkg__features svg { color: var(--gold); margin-top: .3rem; flex: none; }

/* Price block — optional, hidden automatically when empty */
.pkg__price {
  display: flex; align-items: baseline; gap: .45rem;
  padding-top: 1rem; margin-bottom: 1.15rem;
  border-top: 1px dashed var(--line);
}
.pkg__price-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.pkg__price-value { font-family: var(--font-serif); font-size: 1.75rem; font-weight: 700; color: var(--gold); }
.pkg__price-was { font-size: .95rem; color: var(--muted); text-decoration: line-through; }

.pkg__cta { margin-top: auto; }
/* In a 4-up grid the card is narrow — keep the CTA on one line. */
.pkg__cta .btn--wa {
  padding-inline: 1rem;
  font-size: clamp(.875rem, 1.1vw, 1rem);
  gap: .5rem;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3 — CLIENT VIDEOS  (vertical 9:16 cards in a scroll-snap slider)
   --------------------------------------------------------------------------
   Same slider mechanics as the testimonials above — CSS scroll-snap does the
   scrolling, JS only moves the arrows and decides which clip may play. The
   number of cards on screen is a single custom property, so each breakpoint
   sets one number instead of re-doing the arithmetic.

   In Arabic nothing here needs to change: the track is a flex row, so `dir`
   alone puts the first video on the RIGHT and sends the scroll the other way.
   -------------------------------------------------------------------------- */
.vrev-viewport {
  --vrev-cards: 1.12;                 /* mobile: one card + a slice of the next */
  --vrev-gap: clamp(.7rem, 1.8vw, 1.15rem);

  display: flex;
  gap: var(--vrev-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* The vertical padding is the room the cards need to lift on hover. */
  padding: .75rem var(--gutter) 1.75rem;
  margin-inline: calc(var(--gutter) * -1);
  scroll-padding-inline-start: var(--gutter);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}
.vrev-viewport::-webkit-scrollbar { display: none; }

@media (min-width: 560px)  { .vrev-viewport { --vrev-cards: 1.85; } }
@media (min-width: 700px)  { .vrev-viewport { --vrev-cards: 2.35; } }  /* tablet */
@media (min-width: 900px)  { .vrev-viewport { --vrev-cards: 3.3;  } }
@media (min-width: 1120px) { .vrev-viewport { --vrev-cards: 4;    } }  /* all four fit */

.vrev {
  flex: 0 0 calc((100% - (var(--vrev-cards) - 1) * var(--vrev-gap)) / var(--vrev-cards));
  scroll-snap-align: start;
}

.vrev__media {
  position: relative;
  aspect-ratio: 9 / 16;               /* reserved space → zero CLS */
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--beige);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  isolation: isolate;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.vrev:hover .vrev__media { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--rose); }

.vrev__video {
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--beige);
  /* The footage is not a player and not a link. Pointer events pass straight
     through to the track, so a tap does nothing and a drag still scrolls the
     slider from anywhere on the card. */
  pointer-events: none;
}

/* ── No controls, from any browser, ever ──────────────────────────────────
   `controls` is never set in the markup, but browsers still volunteer their
   own overlays: Chrome's cast button, Safari's AirPlay badge and — on iOS —
   a large centred start-playback button whenever it decides not to autoplay.
   These shadow-DOM parts are the only way to reach them.

   Unknown pseudo-elements are ignored, but a browser that does not recognise
   one discards the WHOLE selector, so each sits on its own rule rather than
   in a comma-separated list. */
.vrev__video::-webkit-media-controls                        { display: none !important; -webkit-appearance: none; }
.vrev__video::-webkit-media-controls-enclosure              { display: none !important; -webkit-appearance: none; }
.vrev__video::-webkit-media-controls-panel                  { display: none !important; -webkit-appearance: none; }
.vrev__video::-webkit-media-controls-panel-container        { display: none !important; }
.vrev__video::-webkit-media-controls-overlay-play-button    { display: none !important; -webkit-appearance: none; }
.vrev__video::-webkit-media-controls-start-playback-button  { display: none !important; -webkit-appearance: none; }
.vrev__video::-webkit-media-controls-play-button            { display: none !important; }
.vrev__video::-webkit-media-controls-timeline               { display: none !important; }
.vrev__video::-webkit-media-controls-current-time-display   { display: none !important; }
.vrev__video::-webkit-media-controls-time-remaining-display { display: none !important; }
.vrev__video::-webkit-media-controls-mute-button            { display: none !important; }
.vrev__video::-webkit-media-controls-volume-slider          { display: none !important; }
.vrev__video::-webkit-media-controls-fullscreen-button      { display: none !important; }
.vrev__video::-webkit-media-controls-toggle-closed-captions-button { display: none !important; }
.vrev__video::-internal-media-controls-overlay-cast-button  { display: none !important; }
.vrev__video::-internal-media-controls-download-button      { display: none !important; }
.vrev__video::-webkit-media-text-track-container            { display: none !important; }

/* Soft dark gradient, bottom only — enough to carry white type, never enough
   to dull the footage. */
.vrev__shade {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(61,48,40,.88) 0%,
    rgba(61,48,40,.52) 26%,
    rgba(61,48,40,.06) 52%,
    rgba(61,48,40,0)   66%);
}

/* Caption block — text only, and nothing on the card is interactive. */
.vrev__info {
  position: absolute;
  inset-inline: 0; bottom: 0;
  z-index: 2;
  pointer-events: none;
  padding: 1.1rem 1.05rem 1.15rem;
  color: #fff;
  text-align: start;
}

.vrev__verified {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-bottom: .6rem;
  padding: .32rem .7rem;
  border-radius: var(--r-full);
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: rgba(255,255,255,.94);
  white-space: nowrap;
}
.vrev__verified svg { color: var(--rose); flex: none; }

.vrev__stars { display: flex; gap: .12rem; color: var(--rose); margin-bottom: .35rem; }

.vrev__name {
  font-size: 1.0625rem;
  color: #fff;
  text-shadow: 0 1px 8px rgba(45,35,28,.55);
}
.vrev__cap {
  margin-top: .2rem;
  font-size: .8125rem;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255,255,255,.84);
}

/* A browser too old for <video> gets the message instead of a blank box. */
.vrev__fallback {
  display: grid; place-items: center;
  height: 100%;
  padding: 1.5rem;
  text-align: center;
  font-size: .9rem;
  color: var(--muted);
}

/* Swipe hint — the chevron nudges towards the reading direction. */
.vrev-swipe {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  margin-top: -.35rem;
  font-size: .8rem;
  color: var(--muted);
}
.vrev-swipe svg { color: var(--gold); animation: vrev-nudge 1.9s var(--ease) infinite; }
@keyframes vrev-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}
[dir="rtl"] .vrev-swipe svg { animation-name: vrev-nudge-rtl; }
@keyframes vrev-nudge-rtl {
  0%, 100% { transform: scaleX(-1) translateX(0); }
  50%      { transform: scaleX(-1) translateX(5px); }
}

/* Arrows + dots. Same shapes as the testimonial slider, kept as their own
   classes so the two sliders can never drive each other. */
.vrev-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }

.vrev-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--white);
  display: grid; place-items: center; cursor: pointer; color: var(--dark);
  transition: all .3s var(--ease);
}
.vrev-arrow:hover { border-color: var(--gold); color: var(--gold); transform: scale(1.06); }
.vrev-arrow[disabled] { opacity: .3; cursor: default; transform: none; }
[dir="rtl"] .vrev-arrow svg { transform: scaleX(-1); }
@media (max-width: 600px) { .vrev-arrow { display: none; } }

.vrev-dots { display: flex; gap: .45rem; }
.vrev-dot {
  width: 7px; height: 7px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  background: var(--line);
  transition: all .3s var(--ease);
}
.vrev-dot[aria-current="true"] { background: var(--gold); width: 22px; border-radius: var(--r-full); }

/* When every card already fits there is nothing to swipe to and nowhere for
   the arrows to go, so the whole control row steps aside. JS sets the flag. */
#video-reviews.is-static .vrev-nav,
#video-reviews.is-static .vrev-swipe { display: none; }

/* Reduced motion: nothing autoplays (handled in promo.js) and the hint stops
   twitching, but the slider itself still works exactly the same. */
@media (prefers-reduced-motion: reduce) {
  .vrev-swipe svg { animation: none; }
}

/* --------------------------------------------------------------------------
   4 — TESTIMONIALS  (a wall of real WhatsApp conversations)
   --------------------------------------------------------------------------
   Deliberately NOT review cards. Each tile is the original screenshot, whole
   and uncropped, mounted in a slim white frame the way a photograph is —
   the brand does the framing, the conversation does the talking.

   The screenshots are portrait but not all the same height, so the tiles are
   top-aligned and each keeps its own proportions rather than being cropped
   to a common shape. A ragged lower edge is the honest result of real
   screenshots, and reads as a wall rather than as a grid of products.

   Nothing here needs an RTL rule: the grid is symmetrical, and the chip and
   the frame are placed with logical properties, so `dir` flips them itself.
   -------------------------------------------------------------------------- */
.conv-grid {
  display: grid;
  grid-template-columns: 1fr;                  /* mobile: one screenshot */
  gap: clamp(1.1rem, 2.6vw, 1.75rem);
  align-items: start;
  /* Three columns of a phone screenshot look thin in a 1180px container, so
     the wall is held slightly narrower than the rest of the page. */
  max-width: 1020px;
  margin-inline: auto;
}
@media (min-width: 620px)  { .conv-grid { grid-template-columns: repeat(2, 1fr); } }  /* tablet */
@media (min-width: 1000px) { .conv-grid { grid-template-columns: repeat(3, 1fr); } }  /* desktop */

.conv {
  display: block;
  width: 100%;
  padding: .5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh-sm);
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
/* `.reveal` owns transform until it has finished arriving, so the lift is
   only ever applied to a tile that is already in place. */
.conv.is-in:hover,
.conv.is-in:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: var(--rose);
}
.conv:active { transform: translateY(-2px); }

.conv__frame {
  position: relative;
  display: block;
  border-radius: calc(var(--r-lg) - .5rem);    /* concentric with the card */
  overflow: hidden;
  background: var(--beige);                    /* placeholder while lazy-loading */
  isolation: isolate;
}

/* The screenshot itself — full width, natural height, never cropped. */
.conv__shot { width: 100%; height: auto; }

/* Hover/focus veil with a small zoom glyph. It is the
   ONLY thing ever laid over a screenshot — no chip, no caption, no watermark,
   and it is not there at all until the pointer is on the tile. */
.conv__zoom {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(to top, rgba(61,48,40,.5), rgba(61,48,40,.12) 55%);
  color: #fff;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.conv__zoom svg { filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.conv:hover .conv__zoom,
.conv:focus-visible .conv__zoom { opacity: 1; }

/* A touch screen has no hover, and a permanent veil over a screenshot only
   makes it harder to read — so on touch the tile is left completely clear. */
@media (hover: none) {
  .conv__zoom { display: none; }
}

/* --------------------------------------------------------------------------
   LIGHTBOX — the full-size viewer for the testimonial screenshots
   -------------------------------------------------------------------------- */
.lb {
  border: 0; padding: 0; max-width: 100vw; max-height: 100vh;
  width: 100%; height: 100%;
  background: transparent;
  overflow: hidden;
}
.lb::backdrop { background: rgba(45,35,28,.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lb__inner {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  padding: clamp(1rem, 5vw, 3rem);
}
.lb__inner img, .lb__inner video {
  max-width: 100%; max-height: 85vh;
  width: auto; height: auto;
  border-radius: var(--r-md);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.lb__btn {
  position: fixed;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.12);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.lb__btn:hover { background: rgba(255,255,255,.26); transform: scale(1.06); }
/* `display: grid` above outranks the browser's own [hidden] rule, so the
   arrows have to be told again — they are hidden on a set with one item. */
.lb__btn[hidden] { display: none; }

/* ── Tall screenshots ─────────────────────────────────────────────────────
   The WhatsApp conversations are much taller than they are wide. Squeezing
   one into 85vh would shrink the writing to the point of being decorative,
   so in this mode the image keeps a comfortable reading width and the stage
   scrolls instead. Everything else — ESC, the backdrop, the arrows, the
   swipe — is unchanged. */
.lb--tall .lb__inner {
  place-items: start center;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.lb--tall .lb__inner img {
  max-height: none;
  width: min(100%, 27rem);
  height: auto;
}
/* inline-start / inline-end, so "previous" always sits on the side the
   reader came from — left in English, right in Arabic. */
.lb__close { top: 1rem; inset-inline-end: 1rem; }
.lb__prev  { inset-inline-start: 1rem; top: 50%; translate: 0 -50%; }
.lb__next  { inset-inline-end: 1rem;   top: 50%; translate: 0 -50%; }
@media (max-width: 600px) {
  .lb__prev { inset-inline-start: 1rem; top: auto; bottom: 1.25rem; translate: 0; }
  .lb__next { inset-inline-end: 1rem;   top: auto; bottom: 1.25rem; translate: 0; }
}

/* --------------------------------------------------------------------------
   5 — WHY CHOOSE US
   -------------------------------------------------------------------------- */
/* Flex (not grid) so that a final short row always CENTRES itself instead of
   leaving an orphan card stranded on the left. Works for any number of items. */
.why-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(.85rem, 2.5vw, 1.5rem);
}
.why { flex: 1 1 200px; max-width: 260px; }

@media (max-width: 560px) {
  .why { flex-basis: 140px; max-width: none; }
}

.why {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.1rem, 2.5vw, 1.6rem);
  text-align: center;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.why:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--rose); }

.why__icon {
  width: 58px; height: 58px;
  margin: 0 auto 1.1rem;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: linear-gradient(140deg, rgba(232,199,192,.5), rgba(245,240,232,.9));
  color: var(--gold);
  transition: transform .4s var(--ease), background .4s var(--ease);
}
.why:hover .why__icon { transform: scale(1.09) rotate(-4deg); background: linear-gradient(140deg, rgba(232,199,192,.85), rgba(232,199,192,.4)); }

.why__title { font-size: 1.075rem; margin-bottom: .45rem; }
.why__text { font-size: .875rem; color: var(--muted); font-weight: 300; }

/* --------------------------------------------------------------------------
   6 — HOW IT WORKS  (horizontal desktop / vertical mobile)
   -------------------------------------------------------------------------- */
/* --grad-dir is the only thing the timeline needs to know about direction:
   the connector must always fade AWAY from the step it starts at. */
.steps { display: grid; gap: 0; position: relative; --grad-dir: right; }
[dir="rtl"] .steps { --grad-dir: left; }

/* Mobile: vertical timeline */
.step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.15rem;
  padding-bottom: 2.25rem;
}
.step:last-child { padding-bottom: 0; }
/* connector line */
.step::before {
  content: "";
  position: absolute;
  inset-inline-start: 27px; top: 56px; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--rose), rgba(232,199,192,.15));
}
.step:last-child::before { display: none; }

.step__num {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--white);
  border: 2px solid var(--rose);
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 1.35rem; font-weight: 700;
  box-shadow: var(--sh-sm);
  position: relative; z-index: 1;
  transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.step:hover .step__num { background: var(--gold); border-color: var(--gold); color: #fff; transform: scale(1.06); }

.step__title { font-size: 1.15rem; margin-bottom: .3rem; padding-top: .8rem; }
.step__text { font-size: .9rem; color: var(--muted); font-weight: 300; }

/* Desktop: horizontal timeline */
@media (min-width: 860px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
  .step {
    grid-template-columns: 1fr;
    text-align: center;
    padding-bottom: 0;
    justify-items: center;
  }
  .step::before {
    inset-inline-start: calc(50% + 40px);
    inset-inline-end: auto;
    width: calc(100% - 80px);
    top: 27px; bottom: auto; height: 2px;
    background: linear-gradient(to var(--grad-dir), var(--rose), rgba(232,199,192,.25));
  }
  .step__title { padding-top: 1.15rem; }
  .step__text { max-width: 24ch; margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   7 — FAQ  (native <details> — accessible, zero JS)
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: .75rem; }

.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq-item[open] { border-color: var(--rose); box-shadow: var(--sh-sm); }
.faq-item:hover { border-color: var(--rose); }

.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.4rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--dark);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q svg { color: var(--gold); flex: none; transition: transform .35s var(--ease); }
.faq-item[open] .faq-q svg { transform: rotate(180deg); }

.faq-a {
  padding: 0 1.4rem 1.35rem;
  color: var(--muted);
  font-size: .94rem;
  font-weight: 300;
}

/* Smooth open animation where supported */
@supports (interpolate-size: allow-keywords) {
  .faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .35s var(--ease), content-visibility .35s allow-discrete;
  }
  .faq-item[open]::details-content { block-size: auto; }
}

/* --------------------------------------------------------------------------
   8 — FINAL CTA
   -------------------------------------------------------------------------- */
.final {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  padding-block: clamp(5rem, 12vw, 9rem);
}
.final__media { position: absolute; inset: 0; z-index: -2; }
.final__media img { width: 100%; height: 100%; object-fit: cover; }
.final__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(61,48,40,.86), rgba(61,48,40,.66));
}
.final__title { font-size: clamp(2rem, 6.5vw, 3.4rem); color: #fff; margin-bottom: 1.1rem; }
.final__sub { color: rgba(255,255,255,.82); font-weight: 300; font-size: clamp(1rem, 2.6vw, 1.2rem); margin-bottom: 2.4rem; max-width: 42ch; margin-inline: auto; }
.final .badge { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.9); }
.final .badge svg { color: var(--rose); }
.final__badges { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.foot {
  background: var(--dark);
  color: rgba(255,255,255,.62);
  padding-block: 2.75rem;
  text-align: center;
  font-size: .85rem;
}
.foot a { color: rgba(255,255,255,.85); }
.foot a:hover { color: var(--rose); }
.foot__logo { height: 40px; width: auto; margin: 0 auto 1.1rem; opacity: .95; }
.foot__links { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; margin-bottom: 1.1rem; }

/* --------------------------------------------------------------------------
   STICKY WHATSAPP CTA
   -------------------------------------------------------------------------- */
/* Mobile: full-width bar. Desktop: floating action button. */
.sticky-cta {
  position: fixed;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transform: translateY(110%);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
.sticky-cta.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* Mobile bar */
@media (max-width: 767px) {
  .sticky-cta {
    left: 0; right: 0; bottom: 0;
    padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: rgba(250,248,245,.9);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(61,48,40,.09);
  }
  .sticky-cta .btn { width: 100%; }
  .sticky-cta__fab { display: none; }
}

/* Desktop FAB */
@media (min-width: 768px) {
  .sticky-cta {
    inset-inline-end: 1.75rem; bottom: 1.75rem;
    transform: translateY(0) scale(.6);
  }
  .sticky-cta.is-visible { transform: translateY(0) scale(1); }
  .sticky-cta .btn--wa { display: none; }
  .sticky-cta__fab {
    display: grid; place-items: center;
    width: 62px; height: 62px;
    border-radius: 50%;
    background: var(--whatsapp);
    color: #fff;
    box-shadow: 0 12px 32px rgba(37,211,102,.42);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .sticky-cta__fab:hover { transform: scale(1.08); box-shadow: 0 16px 40px rgba(37,211,102,.55); }
  .sticky-cta__fab::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid var(--whatsapp);
    animation: ring 2.8s var(--ease) infinite;
  }
}

/* --------------------------------------------------------------------------
   SCROLL REVEAL
   -------------------------------------------------------------------------- */
/* Content is visible by DEFAULT. Only once JS confirms it is running (the
   `js` class is set by an inline script in <head>) do we hide it to animate
   it back in. This guarantees content is never invisible if JS fails, and
   avoids any visible → hidden → visible flash. */
html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
html.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}