/* ==========================================================================
   يلا جمعية — public site design system
   Self-contained: no CDNs, no trackers, no third-party requests.
   Palette derived from the app itself:
     #0D7A70  AppColors.brand
     #075C55  AppColors.brandDark
     #E1F3EF  AppColors.brandLight
     #01593E  flutter_native_splash colour (deep emerald)
   Typeface is Tajawal — the same family the Flutter app renders via
   google_fonts — self-hosted here so the live page stays request-clean.
   ========================================================================== */

/* ---------- Tajawal (OFL), subset to what we actually render ---------- */
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/tajawal-arabic-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/tajawal-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/tajawal-arabic-500.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/tajawal-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/tajawal-arabic-700.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/tajawal-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212;
}

/* ---------- Tokens ---------- */
:root {
  --brand-900: #01402D;
  --brand-800: #01593E;
  --brand-700: #075C55;
  --brand-600: #0A6A61;
  --brand-500: #0D7A70;
  --brand-300: #7FBDB4;
  --brand-100: #E1F3EF;

  --gold: #C8A24A;
  --gold-soft: #EBD9AE;

  --cream: #FBF8F2;
  --surface: #FFFFFF;
  --surface-soft: #F2F7F5;

  --text: #16211E;
  --muted: #5A6B66;
  --on-dark: #EEF6F3;
  --on-dark-muted: #A9C7BF;
  --border: #E3ECE8;

  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;

  --shadow-sm: 0 2px 8px rgba(1, 64, 45, .06);
  --shadow: 0 10px 30px rgba(1, 64, 45, .08);
  --shadow-lg: 0 28px 64px rgba(1, 64, 45, .14);

  --container: 1180px;
  --gutter: 20px;
  --header-h: 68px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: 'Tajawal', 'Segoe UI', system-ui, -apple-system, 'Noto Naskh Arabic', Tahoma, sans-serif;
  font-size: 17px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.35; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 6vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.4rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 3px;
  border-radius: 6px;
}

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(56px, 9vw, 104px) 0; position: relative; }
.section--soft { background: var(--surface-soft); }
.section--white { background: var(--surface); }

.eyebrow {
  display: inline-block; font-size: .82rem; font-weight: 700; letter-spacing: .06em;
  color: var(--brand-600); background: var(--brand-100);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 14px;
}
.section__head { max-width: 680px; margin-bottom: clamp(28px, 5vw, 52px); }
.section__head p { color: var(--muted); font-size: 1.05rem; margin: 0; }
.section__head--center { margin-inline: auto; text-align: center; }

.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 8px; z-index: 200;
  background: var(--brand-800); color: #fff; padding: 10px 18px; border-radius: 10px;
}
.skip-link:focus { inset-inline-start: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-weight: 700; cursor: pointer;
  padding: 13px 26px; border-radius: 999px; border: 1.5px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn--primary { background: var(--brand-800); color: #fff; box-shadow: var(--shadow); }
.btn--primary:hover { background: var(--brand-900); }
.btn--ghost { background: transparent; color: var(--brand-800); border-color: rgba(1, 89, 62, .25); }
.btn--ghost:hover { border-color: var(--brand-800); background: rgba(1, 89, 62, .05); }
.btn--onDark { background: var(--gold); color: #2A2000; }
.btn--onDark:hover { background: var(--gold-soft); }
/* Secondary action on the dark CTA band. Same shape and motion as every
   other button; it only swaps the palette for one that reads against the
   brand gradient, where btn--ghost's dark-on-light border would not. */
.btn--onDarkGhost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn--onDarkGhost:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }

/* A CTA for an app that is not published yet: looks deliberate, not broken,
   and is genuinely inert (no href, aria-disabled) rather than a dead link. */
.btn--soon { position: relative; cursor: default; }
.btn--soon:hover { transform: none; }
.btn--soon .btn__tag {
  font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .18);
}
.btn--soon.btn--ghost .btn__tag { background: var(--brand-100); color: var(--brand-700); }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 248, 242, .82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.header.is-stuck { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); }
.header__inner {
  min-height: var(--header-h);
  display: flex; align-items: center; gap: 16px;
}
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand__mark {
  width: 38px; height: 38px; border-radius: 11px; box-shadow: var(--shadow-sm);
}
.brand__name { font-size: 1.08rem; }

/* Row on desktop so the links and the CTA share one line — without this the
   CTA wraps onto a second row and the header doubles in height. */
.nav { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; }
.nav__list { display: flex; align-items: center; gap: 4px; }
.nav__link {
  display: block; padding: 9px 14px; border-radius: 999px;
  color: var(--text); font-weight: 500; font-size: .97rem;
  transition: background .18s ease, color .18s ease;
}
.nav__link:hover { background: var(--brand-100); color: var(--brand-700); text-decoration: none; }
.header__cta { margin-inline-start: 10px; }

.nav__toggle {
  display: none; margin-inline-start: auto;
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ''; display: block; width: 19px; height: 2px; border-radius: 2px;
  background: var(--text); transition: transform .22s ease, opacity .18s ease;
}
.nav__toggle span::before { transform: translateY(-6px); }
.nav__toggle span::after { transform: translateY(4px); }
.nav__toggle[aria-expanded='true'] span { background: transparent; }
.nav__toggle[aria-expanded='true'] span::before { transform: rotate(45deg); }
.nav__toggle[aria-expanded='true'] span::after { transform: translateY(-2px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(40px, 7vw, 84px) 0 clamp(56px, 9vw, 104px); overflow: hidden; }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.hero h1 { margin-bottom: .35em; }
.hero h1 .accent {
  background: linear-gradient(transparent 62%, var(--gold-soft) 62%);
  padding-inline: 2px;
}
.hero__lead { font-size: clamp(1.02rem, 2.2vw, 1.18rem); color: var(--muted); max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 30px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  padding: 9px 15px; border-radius: 999px; font-size: .9rem; font-weight: 500;
  box-shadow: var(--shadow-sm);
}
.chip svg { color: var(--brand-500); flex: none; }

/* Hero visual: the REAL app icon on the app's own emerald, framed.
   Deliberately not a mocked-up app screen — no invented UI is shown. */
.hero__visual { position: relative; display: flex; justify-content: center; }
.appcard {
  position: relative; width: min(340px, 78vw); aspect-ratio: 1;
  border-radius: var(--radius-xl);
  background: radial-gradient(120% 120% at 30% 20%, var(--brand-700), var(--brand-900));
  box-shadow: var(--shadow-lg);
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .10);
}
.appcard::after {
  content: ''; position: absolute; inset: 12px; border-radius: calc(var(--radius-xl) - 10px);
  border: 1px solid rgba(200, 162, 74, .30); pointer-events: none;
}
.appcard__icon { width: 52%; border-radius: 26px; box-shadow: 0 18px 40px rgba(0, 0, 0, .30); }

.floatcard {
  position: absolute; display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  padding: 11px 16px; border-radius: 16px; box-shadow: var(--shadow);
  font-weight: 700; font-size: .92rem; white-space: nowrap;
}
.floatcard svg { color: var(--brand-500); flex: none; }
/* `display: contents` keeps the wrapper out of the box tree, so on desktop
   the cards still position against .hero__visual exactly as if they were
   direct children. On mobile the wrapper becomes a real flex row instead
   (see the 860px breakpoint) — absolute cards with negative insets are what
   pushed the document wider than the viewport and broke RTL scrolling. */
.hero__floats { display: contents; }
.floatcard--a { inset-block-start: 8%; inset-inline-start: -6%; }
.floatcard--b { inset-block-end: 16%; inset-inline-end: -5%; }
.floatcard--c { inset-block-end: -3%; inset-inline-start: 8%; }

/* ---------- Decorative geometry (abstract, purely ornamental) ---------- */
.deco { position: absolute; pointer-events: none; z-index: 0; opacity: .5; }
.deco--hero { inset-block-start: -18%; inset-inline-end: -12%; width: 620px; max-width: 90vw; }
.hero > .container { position: relative; z-index: 1; }
.pattern {
  position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%2301593E' stroke-width='1.1'%3E%3Cpath d='M30 2 L58 30 L30 58 L2 30 Z'/%3E%3Cpath d='M30 14 L46 30 L30 46 L14 30 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
}

/* ---------- Feature grid ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 26px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand-300); }
.card__icon {
  width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center;
  background: var(--brand-100); color: var(--brand-700); margin-bottom: 16px;
}
.card h3 { margin-bottom: .3em; }
.card p { color: var(--muted); font-size: .97rem; margin: 0; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
.step {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 24px; position: relative;
}
.step__num {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-800); color: #fff; font-weight: 700; font-size: 1.05rem;
  margin-bottom: 16px; box-shadow: var(--shadow-sm);
}
.step h3 { margin-bottom: .3em; }
.step p { color: var(--muted); font-size: .97rem; margin: 0; }
/* Connector runs right-to-left to match the reading direction. */
.step:not(:last-child)::after {
  content: ''; position: absolute; top: 46px; inset-inline-start: -20px;
  width: 20px; height: 2px; background: linear-gradient(to left, var(--brand-300), transparent);
}

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.split--flip .split__media { order: 2; }
.checklist { display: grid; gap: 12px; margin-top: 20px; }
.checklist li { display: flex; align-items: flex-start; gap: 11px; font-weight: 500; }
.checklist svg { color: var(--brand-500); flex: none; margin-top: 5px; }

.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow);
}
.panel__row {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 4px; border-bottom: 1px dashed var(--border);
}
.panel__row:last-child { border-bottom: 0; }
.panel__ico {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  background: var(--brand-100); color: var(--brand-700); flex: none;
}
.panel__t { font-weight: 700; }
.panel__s { color: var(--muted); font-size: .9rem; }

.note {
  margin-top: 18px; padding: 14px 18px; border-radius: var(--radius-sm);
  background: var(--brand-100); border-inline-start: 4px solid var(--brand-500);
  font-size: .95rem; color: var(--brand-900);
}

/* ---------- Trust (dark) ---------- */
.trust {
  background:
    radial-gradient(90% 120% at 85% 0%, var(--brand-700), transparent 60%),
    var(--brand-900);
  color: var(--on-dark); position: relative; overflow: hidden;
}
.trust .pattern { opacity: .07; filter: invert(1); }
.trust > .container { position: relative; z-index: 1; }
.trust h2 { color: #fff; }
.trust .section__head p { color: var(--on-dark-muted); }
.trust__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.trust__item {
  display: flex; gap: 13px; align-items: flex-start;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  padding: 18px 20px; border-radius: var(--radius);
}
.trust__item svg { color: var(--gold); flex: none; margin-top: 3px; }
.trust__item b { display: block; }
.trust__item span { color: var(--on-dark-muted); font-size: .93rem; }
.trust__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.trust__links a {
  color: var(--on-dark); border: 1px solid rgba(255, 255, 255, .22);
  padding: 10px 18px; border-radius: 999px; font-weight: 500; font-size: .95rem;
}
.trust__links a:hover { background: rgba(255, 255, 255, .10); text-decoration: none; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: 12px; }
.faq details {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.faq details[open] { border-color: var(--brand-300); box-shadow: var(--shadow-sm); }
.faq summary {
  cursor: pointer; list-style: none; padding: 19px 22px;
  font-weight: 700; display: flex; align-items: center; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; margin-inline-start: auto; flex: none;
  width: 10px; height: 10px; border-inline-end: 2px solid var(--brand-600);
  border-block-end: 2px solid var(--brand-600); transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .faq__a { padding: 0 22px 20px; color: var(--muted); }
.faq .faq__a p { margin: 0; }

/* ---------- Final CTA ---------- */
.cta {
  background: linear-gradient(135deg, var(--brand-800), var(--brand-600));
  color: #fff; border-radius: var(--radius-xl); padding: clamp(34px, 6vw, 64px);
  text-align: center; position: relative; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.cta .pattern { opacity: .08; filter: invert(1); }
.cta > * { position: relative; z-index: 1; }
.cta h2 { color: #fff; }
.cta p { color: var(--on-dark-muted); max-width: 52ch; margin-inline: auto; }
.cta__icon { width: 84px; border-radius: 22px; margin: 0 auto 20px; box-shadow: var(--shadow-lg); }
/* The two direct store links under the main /download CTA. Wraps to one
   column on narrow screens so neither label is ever truncated. */
.cta__stores { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 14px; }

/* ---------- Disclaimer ---------- */
.disclaimer {
  border: 1px dashed var(--border); background: var(--surface);
  border-radius: var(--radius); padding: 20px 24px;
  color: var(--muted); font-size: .93rem; margin-top: 34px;
}

/* ---------- Footer ---------- */
.footer { background: var(--brand-900); color: var(--on-dark); padding: 54px 0 30px; }
.footer a { color: var(--on-dark); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.footer__brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; margin-bottom: 12px; }
.footer__brand img { width: 36px; border-radius: 11px; }
.footer p { color: var(--on-dark-muted); font-size: .94rem; max-width: 40ch; }
.footer h4 { margin: 0 0 12px; font-size: .95rem; letter-spacing: .04em; color: #fff; }
.footer li { margin-bottom: 9px; font-size: .94rem; }
.footer__bottom {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .13);
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  color: var(--on-dark-muted); font-size: .88rem;
}

/* Developer/operator attribution: states that "يلا جمعية / Yalla Gameaya"
   is the product and Global Web Solutions is the business behind it. The
   Arabic line leads (this is an Arabic, RTL site); the English line is the
   same statement, marked lang/dir so it renders left-to-right inside the
   RTL footer instead of having its punctuation reordered. Sized to sit
   below the product brand, never to compete with it. */
.footer__attrib {
  margin-top: 14px; max-width: 46ch;
  color: var(--on-dark); font-size: .92rem; line-height: 1.7;
}
.footer__attrib strong { color: #fff; font-weight: 700; }
.footer__attrib .footer__attrib-en {
  display: block; margin-top: 2px;
  color: var(--on-dark-muted); font-size: .85rem;
}
/* The company name in the attribution links to the company site. Bold and
   permanently underlined so it is unmistakably the clickable part of the
   sentence, while colour and size stay inherited from whichever line it sits
   in — it reads as emphasis inside the attribution, never as a button or a
   differently-coloured call to action. Unscoped on purpose: this is every
   attribution link on the site, including the pair in support.html's body.
   Size and line-height are deliberately not set, so the footer's own metrics
   and wrapping are untouched. */
.attrib-link {
  color: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
/* Additive only. The global :focus-visible outline above is what makes
   keyboard focus visible and is deliberately not overridden here. */
.attrib-link:hover,
.attrib-link:focus-visible { opacity: .85; }

/* Colour and size restated, specific enough to out-rank `.footer a` and
   `.dl__foot a` — either would otherwise recolour and resize the link away
   from the line it sits in: white <strong> in the footer, muted in the
   English line below it, muted grey inside /download's own footer. */
.footer__attrib .attrib-link,
.dl__attrib .attrib-link { color: inherit; font-size: inherit; }

/* ---------- Legal pages (shared shell) ---------- */
.legal { padding: clamp(36px, 6vw, 72px) 0 clamp(48px, 8vw, 88px); }
.legal__wrap { max-width: 820px; margin-inline: auto; }
.legal__card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 48px);
  box-shadow: var(--shadow-sm);
}
.legal__card h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.legal__card h2 {
  font-size: 1.18rem; color: var(--brand-700);
  margin-top: 1.9em; padding-top: .2em;
}
.legal__card h2:first-of-type { margin-top: 1.2em; }
.legal__card p { color: #2A3733; }
.legal__meta { color: var(--muted); font-size: .93rem; }
.legal__back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font-weight: 500; }

/* ---------- Motion ---------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
.float { animation: float 6s ease-in-out infinite; }
.float--b { animation-delay: -2s; }
.float--c { animation-delay: -4s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

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

/* ==========================================================================
   Responsive — mobile is the priority. Verified at 360/390/768/1024/1440.
   ========================================================================== */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; text-align: start; }
  .hero__visual { order: -1; margin-bottom: 8px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .deco--hero { display: none; }
}

@media (max-width: 860px) {
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--cream); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow); padding: 10px var(--gutter) 18px;
    display: none;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link { padding: 13px 12px; border-radius: var(--radius-sm); }
  .nav__toggle { display: inline-flex; }
  .header__cta { display: none; }
  .nav .header__cta { display: inline-flex; margin: 10px 0 0; width: 100%; }

  .split, .steps, .trust__grid { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .step:not(:last-child)::after { display: none; }

  /* Floating cards become an ordinary row under the icon. Nothing is
     absolutely positioned any more, so nothing can extend past the
     viewport — negative insets here were what made the document wider
     than the screen and broke RTL scrolling on mobile. */
  .hero__visual { flex-direction: column; align-items: center; gap: 16px; }
  /* aspect-ratio boxes get shrunk to nothing as flex items on the main
     axis of a column container — pin the size instead. */
  .appcard { flex: none; }
  .hero__floats {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    width: 100%;
  }
  .floatcard { position: static; animation: none; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .grid-3, .footer__grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .hero__actions { gap: 10px; }
  .floatcard { font-size: .84rem; padding: 9px 13px; }
  .legal__card { border-radius: var(--radius); }
}

@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .appcard { width: min(280px, 82vw); }
  .brand__name { font-size: 1rem; }
}