/* ══════════════════════════════════════════════════════════
   Vegangster Partners — Affiliate Landing
   Design tokens: Vegangster Visual Design System
   ══════════════════════════════════════════════════════════ */

:root {
  /* Backgrounds */
  --bg-page:     #100A29;
  --bg-header:   #1A1436;
  --bg-card:     #261E4B;
  --bg-elevated: #342A62;

  /* Brand */
  --brand:        #8352FF;
  --brand-hover:  #9069F0;
  --brand-active: #6941CC;
  --brand-light:  #A888F7;
  --brand-pale:   #CEBAFF;
  /* Accents for the feature-icon tints. Each is held near 60% lightness and
     70–90% saturation so every tile reads at the same strength as --info and
     --success. Pink is the bright end of --grad-promo; amber is --grad-vip's
     gold lifted out of its dark 40% lightness; rose is the red-leaning cousin
     of --grad-vip's crimson. An orange was tried here first and read as brown —
     a warm hue washed over the violet card turns muddy, a red-pink does not. */
  --accent-pink:  #DD52E0;
  --accent-amber: #F0BC42;
  --accent-rose:  #EA5770;

  /* Text */
  --text-white:   #FAFAFC;
  /* Text sitting on --brand. The off-white above lands at 4.36:1 there, just under
     WCAG AA, so anything filled with the brand purple uses pure white instead. */
  --on-brand:     #FFFFFF;
  --text-heading: #EBEBF2;
  --text-body:    #D8D6EB;
  --text-caption: #C6C3DF;
  --text-muted:   #928DBF;

  /* Status */
  --success: #47DA9C;
  --info:    #36BCF2;

  /* Card surfaces. Layer 1 is any card sitting on the page; layer 2 is a card
     nested inside another one and steps one shade lighter so it reads as above it.
     Both are translucent and pair with --surface-blur — the orbs on the background
     layer showing through is what keeps the cards from looking like flat boxes. */
  --surface-1:    rgba(38, 30, 75, 0.24);
  --surface-2:    rgba(52, 42, 98, 0.5);
  --surface-blur: 16px;

  /* Glass */
  --glass-bg:     rgba(38, 30, 75, 0.4);
  --glass-brand:  rgba(131, 82, 255, 0.5);
  --glass-stroke: rgba(105, 65, 204, 0.3);

  /* Hover fill for pill tabs and pill nav links. Kept well below the solid --brand
     of the selected pill so hovering never reads as a second active tab */
  --tab-hover:    rgba(131, 82, 255, 0.18);

  /* Gradients (design system) */
  --grad-promo:  linear-gradient(180deg, #DD52E0 0%, #3E27A2 100%);
  --grad-vip:    linear-gradient(180deg, #C20A7E 0%, #C2940A 100%);
  --grad-sport:  linear-gradient(180deg, #3250E6 0%, #340B5B 100%);

  /* Shadows */
  --shadow-1: 0px -4px 10px rgba(0,0,0,0.05), 0px 14px 20px rgba(0,0,0,0.2);
  --shadow-4: 0px 1px 5px 0px rgba(0,0,0,0.15);

  --radius: 8px;
  /* Large value keeps the shape a true pill at any element height */
  --radius-pill: 999px;
  --radius-modal: 12px;

  --container: 1160px;
  --header-h: 72px;

  /* Every card surface across the site pads with this, so the inner edge lines up
     whichever page a card lands on. Phones override it in the 640px breakpoint. */
  --card-pad: 24px;
}

/* Without the blur there is nothing to frost, and the fills are too thin to read as
   cards — every surface falls back to a near-solid version of the same shade */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --surface-1: rgba(38, 30, 75, 0.88);
    --surface-2: rgba(52, 42, 98, 0.92);
  }
}

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

html { scroll-behavior: smooth; }
/* Reserved from the start so locking the page behind the mobile menu cannot
   widen the layout by the width of the scrollbar */
html { scrollbar-gutter: stable; }
html.is-menu-open,
html.is-menu-open body { overflow: hidden; }

body {
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg-page);
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Translations are swapped into the English markup once the DOM is parsed, and
   the browser is happy to paint the English page before that — the header then
   reflows under the cursor because the labels change length. Hold the content
   back for those few milliseconds; the page head only sets this when a
   non-English dictionary is actually on its way, and clears it on a timer if the
   script never arrives. The body background still paints, so the wait reads as a
   slightly later render rather than a white flash. */
html.i18n-pending body { visibility: hidden; }

img, svg { display: block; }
a { color: inherit; text-decoration: none; }

/* The browser default is a thin blue ring that all but disappears on this
   background. Components that need something different override it locally. */
:focus-visible {
  outline: 2px solid var(--brand-pale);
  outline-offset: 3px;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  /* viewport-fit=cover lets the page reach the display edges, so the gutter has to
     clear the notch in landscape instead of relying on the flat 24px */
  padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
}

/* ══════════ BACKGROUND FX ══════════ */
.bg-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.5;
  animation: orb-float 18s ease-in-out infinite alternate;
}
.orb-1 { width: 560px; height: 560px; top: -180px; left: -120px; background: #562DBF; }
.orb-2 { width: 480px; height: 480px; top: 30%; right: -200px; background: #3E27A2; animation-delay: -6s; }
.orb-3 { width: 420px; height: 420px; bottom: -160px; left: 30%; background: rgba(221, 82, 224, 0.55); animation-delay: -12s; }

@keyframes orb-float {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(60px, -40px) scale(1.12); }
}

.stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(206,186,255,0.8) 0, transparent 100%),
    radial-gradient(1px 1px at 60% 15%, rgba(206,186,255,0.6) 0, transparent 100%),
    radial-gradient(1.5px 1.5px at 80% 45%, rgba(206,186,255,0.7) 0, transparent 100%),
    radial-gradient(1px 1px at 35% 65%, rgba(206,186,255,0.5) 0, transparent 100%),
    radial-gradient(1px 1px at 90% 80%, rgba(206,186,255,0.6) 0, transparent 100%),
    radial-gradient(1.5px 1.5px at 10% 85%, rgba(206,186,255,0.55) 0, transparent 100%),
    radial-gradient(1px 1px at 50% 50%, rgba(206,186,255,0.4) 0, transparent 100%);
  animation: stars-twinkle 5s ease-in-out infinite alternate;
}
@keyframes stars-twinkle { from { opacity: 0.45; } to { opacity: 1; } }

/* Filter definitions only. Kept in the layout at zero size rather than display:none,
   which stops some browsers resolving filter references */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ══════════ BUTTONS ══════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  /* <button> does not inherit the page font, unlike the <a class="btn"> links */
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.btn--primary {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: 0 0 0 rgba(131,82,255,0);
}
.btn--primary:hover {
  background: var(--brand-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(131, 82, 255, 0.45);
}
.btn--primary:active { background: var(--brand-active); transform: translateY(0); }

/* Secondary buttons sit on the page and on cards alike. --glass-bg resolves to the
   same rgb as --bg-card, so a plain glass fill vanishes on any card — both variants
   carry a violet tint instead, light enough to stay clearly below the primary. */
.btn--ghost {
  background: rgba(131, 82, 255, 0.14);
  color: var(--text-white);
  border: 1px solid var(--glass-brand);
}
/* secondary hover lands on the primary's resting colour */
.btn--ghost:hover { background: var(--brand); border-color: var(--brand); }

.btn--glass {
  background: rgba(131, 82, 255, 0.2);
  border: 1px solid var(--glass-brand);
  color: var(--text-white);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-4);
}
.btn--glass:hover { background: var(--brand); border-color: var(--brand); transform: translateY(-2px); }

.btn--lg { padding: 15px 34px; font-size: 16px; }
.btn--full { width: 100%; }

/* ══════════ HEADER ══════════ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-top: env(safe-area-inset-top);
}

.header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  border-radius: 16px;
  /* Sections inset their content by the container padding, so the glass panel is
     pulled in by the same amount — otherwise it sits 24px proud of every block
     below it. .container already centres it. */
  width: calc(100% - 48px);
  max-width: calc(var(--container) - 48px);
  padding: 0 16px;
  /* Glass Effect 1 */
  background: var(--glass-bg);
  border: 2px solid var(--glass-stroke);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-4);
}

.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo__img {
  height: 28px;
  width: auto;
  /* Matches the 300x45 source. Without it the logo measures zero until the PNG
     arrives, and everything to the right of it starts the page shifted. */
  aspect-ratio: 20 / 3;
  display: block;
  transition: opacity 0.2s ease;
}
.logo:hover .logo__img { opacity: 0.85; }

/* Nothing in the header may shrink or wrap: translated labels vary enough in length
   that flexbox would silently squeeze the row into two-line links instead of
   overflowing. Keeping the natural size is what lets script.js measure the real fit
   and drop to the burger at the right moment. */
.header__inner > * { flex: 0 0 auto; }

.nav { display: flex; gap: 2px; }
.nav__link {
  padding: 8px 10px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
  color: var(--text-caption);
  transition: color 0.2s ease, background 0.2s ease;
}
.nav__link:hover { color: var(--text-white); background: rgba(131,82,255,0.18); }

.header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Fits the widest two-letter code plus the chevron. Both the switcher and the
     slot below are pinned to it, so they cannot drift apart. */
  --lang-w: 67px;
}

/* i18n.js builds the switcher, so the header paints once without it and the row
   used to slide sideways the moment it landed. Hold its slot from the first
   frame instead. Only under .js: without scripting nothing ever arrives. */
.js .header__actions:not(:has(.lang))::before {
  content: "";
  flex: 0 0 var(--lang-w);
}

/* ══════════ LANGUAGE SWITCHER ══════════ */
.lang { position: relative; width: var(--lang-w); }

/* Reads as a nav item rather than a third button: the header already carries
   Login and Sign Up, and a third filled control crowds it */
.lang__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-pill);
  background: none;
  border: none;
  color: var(--text-caption);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.lang__trigger:hover,
.lang.is-open .lang__trigger { color: var(--text-white); background: rgba(131,82,255,0.18); }

.lang__flag {
  display: block;
  flex: none;
  width: 20px;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
  /* Flags are the only non-token colour up here — a hairline stops them from
     bleeding into the glass behind the header */
  box-shadow: inset 0 0 0 1px rgba(250, 250, 252, 0.28);
}
.lang__flag svg { display: block; width: 100%; height: 100%; }

.lang__chev { width: 20px; height: 20px; opacity: 0.7; transition: transform 0.2s ease; }
.lang.is-open .lang__chev { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 120;
  min-width: 196px;
  list-style: none;
  padding: 6px;
  border-radius: var(--radius-modal);
  /* Denser than the header glass: this panel sits over page content, not over the
     background layer, so it needs its own opacity to stay readable */
  background: linear-gradient(180deg, rgba(38, 30, 75, 0.94) 0%, rgba(16, 10, 41, 0.96) 100%);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-1);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.lang.is-open .lang__menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* Eleven languages overflow a short viewport, so the list scrolls on its own */
.lang__menu { max-height: min(62vh, 460px); overflow-y: auto; }

.lang__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-caption);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: start;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.lang__option:hover { background: rgba(131, 82, 255, 0.2); color: var(--text-white); }
.lang__option.is-active { color: var(--text-white); }
.lang__name { flex: 1; }
.lang__check { flex: none; width: 16px; height: 16px; color: var(--brand-light); opacity: 0; }
.lang__option.is-active .lang__check { opacity: 1; }

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 10px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  border-radius: 50%;
  cursor: pointer;
}
.burger span {
  display: block;
  height: 2px;
  background: var(--text-white);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  z-index: 99;
  padding: 110px 24px calc(32px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Glass Effect: a heavy blur turns whatever scrolls behind into a smooth wash,
     so the panel can stay translucent without costing legibility */
  background: linear-gradient(180deg, rgba(38, 30, 75, 0.42) 0%, rgba(16, 10, 41, 0.56) 100%);
  border-left: 2px solid var(--glass-stroke);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  box-shadow: -18px 0 44px rgba(8, 4, 22, 0.45);
  transform: translateX(105%);
  transition: transform 0.3s ease;
}
.mobile-menu.is-open { transform: translateX(0); }
/* In Arabic the header row flips and the burger sits on the left, so a panel
   sliding in from the right comes from the wrong side of the screen */
[dir="rtl"] .mobile-menu { right: auto; left: 0; transform: translateX(-100%); }
[dir="rtl"] .mobile-menu.is-open { transform: translateX(0); }

/* Dims the page behind the glass so the menu reads over any section */
.menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(8, 4, 22, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.menu-scrim.is-open { opacity: 1; pointer-events: auto; }

.mobile-menu__nav { display: flex; flex-direction: column; gap: 6px; }
/* Each row carries its own tint, which keeps contrast constant per item */
.mobile-menu__nav a {
  padding: 14px 16px;
  border-radius: var(--radius-pill);
  background: rgba(16, 10, 41, 0.45);
  border: 1px solid rgba(105, 65, 204, 0.22);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-white);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.mobile-menu__nav a:hover { background: var(--glass-brand); border-color: var(--brand); color: var(--text-white); }
.mobile-menu__actions { display: flex; flex-direction: column; gap: 10px; }

/* ══════════ HERO ══════════ */
/* Same 96px rhythm as .section, with the fixed header added on top so the gap
   below it reads the same as the gap between any two sections */
.hero {
  position: relative;
  padding: calc(var(--header-h) + 96px) 0 96px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  width: 100%;
}

.hero__badge {
  margin-bottom: 22px;
}

.hero__title {
  font-size: clamp(38px, 5.4vw, 48px);
  font-weight: 700;
  line-height: 1.08;
  color: var(--text-white);
  letter-spacing: -1px;
  margin-bottom: 36px;
}

.text-gradient {
  background: linear-gradient(100deg, #DD52E0 0%, #A888F7 55%, #8352FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Offer cards */
.hero__offers {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 40px;
}

.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--card-pad);
  min-width: 168px;
  border-radius: var(--radius-modal);
  background: var(--surface-1);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
  box-shadow: var(--shadow-4);
  overflow: hidden;
}
.offer-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.offer-card--cpa::before { background: linear-gradient(90deg, #DD52E0, #8352FF); }
.offer-card--rev::before { background: linear-gradient(90deg, #8352FF, #36BCF2); }
.offer-card--hyb::before { background: linear-gradient(90deg, #36BCF2, #47DA9C); }

.offer-card__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text-muted);
}
.offer-card__value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-white);
  white-space: nowrap;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* Hero art placeholder */
.hero__art { display: flex; justify-content: center; }

.hero-art {
  position: relative;
  width: min(420px, 100%);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-art__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed var(--glass-stroke);
}
.hero-art__ring--1 { inset: 0; animation: spin 40s linear infinite; }
.hero-art__ring--2 { inset: 13%; border-style: solid; border-color: rgba(131,82,255,0.25); animation: spin 28s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

/* The key visuals are cutouts with no backdrop of their own — this is the glow
   the logo core used to cast, so they still sit inside the rings rather than on
   top of them */
.hero-art::before {
  content: '';
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(131, 82, 255, 0.5) 0%, rgba(131, 82, 255, 0.14) 48%, transparent 72%);
  filter: blur(22px);
}

.hero-art__visual {
  position: relative;
  width: 82%;
  height: auto;
  filter: drop-shadow(0 18px 44px rgba(16, 10, 41, 0.7));
  animation: core-float 6s ease-in-out infinite alternate;
}
@keyframes core-float { from { transform: translateY(-8px); } to { transform: translateY(10px); } }

/* Fades in and back out: an edge that ended on the section boundary sliced through
   the glow of the fixed background layer */
.hero__fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 260px;
  /* stays behind hero content — otherwise it dims the CTA buttons it overlaps */
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(16, 10, 41, 0) 0%,
    rgba(16, 10, 41, 0.55) 45%,
    rgba(16, 10, 41, 0.28) 78%,
    rgba(16, 10, 41, 0) 100%);
  pointer-events: none;
}

/* ══════════ SECTIONS ══════════ */
.section { padding: 96px 0; position: relative; }

/* The tint lives on a masked layer so it eases in from the top edge and out at the
   bottom instead of starting and stopping on a hard line */
.section--alt { background: none; }
.section--alt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(86, 45, 191, 0.26) 0%, rgba(16, 10, 41, 0) 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
}

.section__title {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-heading);
  text-align: left;
  margin-bottom: 56px;
  letter-spacing: -0.5px;
}

/* ══════════ EYEBROWS ══════════ */
/* One look for every label sitting above a title, across all pages. Plain text
   rather than a bordered pill: a filled chip read as a button and competed with
   the real CTA beside it. Spacing stays with each context — some place the label
   with a margin, others with flex gap. */
.hero__badge,
.page-hero__kicker,
.section__eyebrow,
.cv-eyebrow,
.cv-section-head__label,
.b-eyebrow,
.contact-card__dept {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  line-height: 1.4;
  color: var(--brand-pale);
  /* inner heroes paint a glow on a ::before layer — this keeps the label above it */
  position: relative;
}

/* Generic label for a section head built from .section__title */
.section__eyebrow { margin-bottom: 14px; }

/* ══════════ FEATURES ══════════ */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature {
  position: relative;
  padding: var(--card-pad);
  border-radius: var(--radius-modal);
  background: var(--surface-1);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
  box-shadow: var(--shadow-4);
  overflow: hidden;
}

.feature__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Same tinted-gradient formula as the --pink/--blue/--green variants in
     variant-extra.css: a flat fill made the default tile read dimmer than the
     tinted ones sitting next to it. The glyph stays --brand-light rather than
     the deeper --brand, which is vivid but the darkest hue in the palette and
     drops this tile to 3.4:1 while its siblings sit at 4.6–8.6:1. */
  background: linear-gradient(135deg, rgba(168, 136, 247, 0.28), rgba(131, 82, 255, 0.28));
  border: 1px solid var(--glass-stroke);
  color: var(--brand-light);
  margin-bottom: 20px;
}
.feature__icon svg { width: 28px; height: 28px; }

.feature__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-white);
  margin-bottom: 10px;
}

.feature__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-caption);
}

/* ══════════ TESTIMONIALS ══════════ */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

.testimonial {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--card-pad);
  border-radius: var(--radius-modal);
  background: var(--surface-1);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
  box-shadow: var(--shadow-4);
}

.testimonial__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
  flex: 1;
  margin-bottom: 24px;
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--glass-stroke);
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-white);
  flex-shrink: 0;
}
.avatar--1 { background: linear-gradient(135deg, #DD52E0, #8352FF); }
.avatar--2 { background: linear-gradient(135deg, #3250E6, #8352FF); }
.avatar--3 { background: linear-gradient(135deg, #DA2363, #8352FF); }

.testimonial__name { font-size: 15px; font-weight: 700; color: var(--text-white); }
.testimonial__role { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ══════════ PAYOUTS MARQUEE ══════════ */

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.marquee__track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: marquee 32s linear infinite;
  padding: 6px 0;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ══════════ GAME PROVIDERS MARQUEE ══════════ */
.providers { padding-bottom: 48px; }

.marquee--logos .marquee__track {
  align-items: center;
  gap: 72px;
  padding: 12px 0;
  animation-duration: 40s;
}

.provider-logo {
  flex: none;
  height: 24px;
  width: auto;
  opacity: 0.55;
  /* source files ship as flat #9497A1 — this normalises every logo to clean white */
  filter: brightness(0) invert(1);
  transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}

/* marks that stack a symbol or second line need more height to match optically */
.provider-logo--stacked { height: 40px; }
@keyframes glow-drift {
  from { transform: translate(-12%, -8%); }
  to   { transform: translate(12%, 8%); }
}

/* ══════════ FOOTER ══════════ */
/* The surface ramps in instead of starting on a hard edge: a solid fill on the footer
   boundary sliced through the glow of the fixed background layer. The divider is kept
   as a hairline that fades toward the edges rather than a full-width border */
.footer {
  position: relative;
  background: linear-gradient(180deg, rgba(26, 20, 54, 0) 0%, var(--bg-header) 120px);
  /* the extra bottom room keeps the copyright clear of the home indicator and of
     Safari's minimised toolbar, both of which now float over the page */
  padding: 64px 0 calc(28px + env(safe-area-inset-bottom));
}
.footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(105, 65, 204, 0) 0%,
    var(--glass-stroke) 50%,
    rgba(105, 65, 204, 0) 100%);
  pointer-events: none;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 48px;
  padding-bottom: 44px;
}

.footer__tagline {
  margin-top: 16px;
  font-size: 14px;
  color: var(--text-muted);
}

.footer__socials { display: flex; gap: 10px; margin-top: 22px; }
.social {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  color: var(--text-caption);
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.social svg { width: 18px; height: 18px; }
.social:hover { color: var(--text-white); background: var(--glass-brand); transform: translateY(-3px); }

.footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__col a {
  font-size: 14px;
  color: var(--text-caption);
  transition: color 0.2s ease;
  width: fit-content;
}
.footer__col a:hover { color: var(--brand-light); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(105, 65, 204, 0.18);
  font-size: 12px;
  color: var(--text-muted);
}

.footer__age {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--text-muted);
  font-weight: 700;
}

/* ══════════ SCROLL REVEAL ══════════ */
/* Hiding these is gated on the js marker the page head sets, so if scripting is
   blocked or never runs the content is simply there instead of the page
   rendering blank */
.reveal { transition: opacity 0.7s ease, transform 0.7s ease; }
html.js .reveal { opacity: 0; transform: translateY(28px); }
html.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* staggered children */
.features .reveal:nth-child(2),
.contact-grid .reveal:nth-child(2),
.testimonials .reveal:nth-child(2) { transition-delay: 0.1s; }
.features .reveal:nth-child(3),
.contact-grid .reveal:nth-child(3),
.testimonials .reveal:nth-child(3) { transition-delay: 0.2s; }
.features .reveal:nth-child(4) { transition-delay: 0.1s; }
.features .reveal:nth-child(5) { transition-delay: 0.2s; }
.features .reveal:nth-child(6) { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  /* matches the gated selector above, otherwise the hidden state would outweigh this */
  html.js .reveal, .reveal { opacity: 1; transform: none; }
}

/* ══════════ INNER PAGES ══════════ */

/* Active nav item */
.nav__link--active,
.mobile-menu__nav a.nav__link--active {
  color: var(--text-white);
  background: var(--glass-brand);
  box-shadow: var(--shadow-4);
}
/* Drawn inside the box on purpose. The other header links carry no border, so a
   real one here would make the current page's pill 2px wider than the rest and
   nudge the whole row sideways every time you move between pages. The row also
   has barely 10px to spare in Portuguese and Russian before it collapses into
   the burger, and the extra width was enough to tip it over. */
.nav__link--active { box-shadow: inset 0 0 0 1px var(--glass-stroke), var(--shadow-4); }
/* The mobile rows all have a border already — this one just recolours it */
.mobile-menu__nav a.nav__link--active { border-color: var(--glass-stroke); }

/* Page hero (inner pages) */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + 88px) 0 56px;
  text-align: left;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 80% at 50% 0%, rgba(86, 45, 191, 0.3) 0%, rgba(16, 10, 41, 0) 70%);
  pointer-events: none;
}
.page-hero__kicker {
  margin-bottom: 18px;
}
.page-hero__title {
  font-size: clamp(32px, 4.4vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.8px;
  color: var(--text-white);
  position: relative;
  margin-bottom: 18px;
}
/* Article heroes end on the headline, where that bottom margin only widens the
   gap the section below already owns */
.page-hero__title:last-child { margin-bottom: 0; }
.page-hero__subtitle {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-caption);
  max-width: 620px;
  margin: 0;
  position: relative;
}

/* Split page hero: copy on the left, key visual on the right */
.page-hero--split { text-align: left; }
.page-hero--split .page-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
.page-hero--split .page-hero__subtitle { margin: 0; max-width: 520px; }
.page-hero__art { display: flex; justify-content: center; }
/* Follows the copy column instead of sitting under the centred title */
.page-hero--split::before { background: radial-gradient(55% 80% at 30% 0%, rgba(86, 45, 191, 0.3) 0%, rgba(16, 10, 41, 0) 70%); }

/* Left-aligned page hero (article pages): the breadcrumb trail sets the
   left edge, so the date and headline line up with it instead of floating. */
.page-hero--left { text-align: left; }
.page-hero--left .page-hero__title { max-width: 900px; margin-left: 0; margin-right: 0; }
/* Runs the full container width instead of the default 620px measure */
.page-hero--left .page-hero__subtitle { max-width: none; margin-left: 0; margin-right: 0; }
/* Glow follows the copy instead of sitting behind a centred title */
.page-hero--left::before { background: radial-gradient(55% 80% at 30% 0%, rgba(86, 45, 191, 0.3) 0%, rgba(16, 10, 41, 0) 70%); }

/* Breadcrumbs (inner pages)
   Left-aligned inside a centred hero, so the trail reads as navigation
   chrome rather than as part of the headline block. */
.crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  margin-bottom: 26px;
  position: relative;
  font-size: 13px;
}
.crumbs__back {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--brand-pale);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.crumbs__back svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.crumbs__back:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--text-white);
  transform: translateX(-2px);
}
.crumbs__link {
  font-weight: 700;
  color: var(--text-muted);
  transition: color 0.2s ease;
}
.crumbs__link:hover { color: var(--brand-pale); }
.crumbs__sep { color: var(--text-muted); opacity: 0.55; }
/* The current page is already the H1 below, so it stays quiet and truncates */
.crumbs__current {
  color: var(--text-caption);
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section--page { padding: 48px 0 96px; }
/* Lets a following .section own the gap instead of stacking two bottom paddings */
.section--page--flush { padding-bottom: 0; }

/* Prose (articles, terms) */
.prose {
  max-width: 780px;
  margin: 0 auto;
}
.prose h2 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-heading);
  margin: 48px 0 16px;
}
.prose h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-heading);
  margin: 32px 0 12px;
}
.prose p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-body);
  margin-bottom: 16px;
}
.prose ul, .prose ol {
  margin: 0 0 16px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.prose li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-body);
}
.prose li::marker { color: var(--brand-light); }
.prose > :first-child { margin-top: 0; }

/* Q&A blocks in articles */
.prose .q {
  font-weight: 700;
  color: var(--brand-pale);
  border-left: 3px solid var(--brand);
  padding-left: 16px;
}

/* Article cover */
.article-cover {
  border-radius: var(--radius-modal);
  aspect-ratio: 21 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-promo);
  box-shadow: var(--shadow-1);
  /* Full container width — the cover is the page's lead visual, so it is not
     held to the narrower .prose measure the body copy below it uses.
     No top margin: the cover opens the section, whose padding already sets the
     distance from the headline above it. */
  margin: 0 0 40px;
  overflow: hidden;
  position: relative;
}
.article-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 70% 20%, rgba(250,250,252,0.22) 0%, transparent 60%);
}
.article-cover svg { width: 96px; height: 96px; opacity: 0.9; position: relative; color: var(--text-white); }
.article-cover__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-cover:has(.article-cover__img) {
  background: none;
}
.article-cover:has(.article-cover__img)::after { content: none; }

/* Commission tabs */
.model-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 auto 56px;
  padding: 6px;
  width: fit-content;
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.model-tab {
  padding: 10px 26px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-caption);
  transition: color 0.2s ease, background 0.2s ease;
}
/* Hover for the commission model tabs. Active pills are excluded so the solid
   brand fill is not painted over. */
.model-tab:not(.model-tab--active):hover {
  background: var(--tab-hover);
  color: var(--text-white);
}
.model-tab--active {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: 0 4px 16px rgba(131, 82, 255, 0.4);
}

/* FAQ accordion */
.accordion { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
/* Runs the full container width on the dedicated FAQ page */
.accordion--wide { max-width: none; }
/* Same glass as the header bar, but the fill runs thinner than --glass-bg's 40%: the
   header reads as glass because page content scrolls under it, while these cards only
   have the background orbs to show, so they need to let more of them through.
   A wider blur keeps the copy legible over that. Stroke stays 1px — 2px is the
   header/nav variant of the effect */
.accordion__item {
  position: relative;
  border-radius: var(--radius-modal);
  background: var(--surface-1);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
  box-shadow: var(--shadow-4);
  overflow: hidden;
  /* Guarantees the stacking context the z-index:-1 layers below rely on, including in
     the no-backdrop-filter fallback where the filter isn't there to create one */
  isolation: isolate;
  transition: border-color 0.25s ease;
}
.accordion__item:hover { border-color: var(--glass-brand); }

/* Hover tints the fill with the brand violet the CTA block's glow is built from.
   It rides its own layer because background-image is not interpolatable — swapping
   the layers on the card itself would snap instead of fade */
.accordion__item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(131, 82, 255, 0.14);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.accordion__item:hover::after { opacity: 1; }
.accordion__item[open] { border-color: var(--glass-brand); }

/* Bends the backdrop instead of only obscuring it: fractal noise drives a displacement
   map, so the orbs behind the card warp slightly. It rides its own layer rather than
   joining the blur above, because an SVG filter in backdrop-filter only renders in
   Chromium — on its own layer a browser that ignores it drops the warp, not the frost.
   The negative z-index stays inside the card: backdrop-filter already made it a
   stacking context. Opt-in per page, since a url() pointing at a filter the page
   never defined invalidates the whole declaration */
.accordion--warped .accordion__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: url(#glass-warp);
  -webkit-backdrop-filter: url(#glass-warp);
  pointer-events: none;
}

.accordion__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-white);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}
.accordion__q::-webkit-details-marker { display: none; }
.accordion__q::after {
  content: "+";
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(131, 82, 255, 0.18);
  border: 1px solid var(--glass-stroke);
  color: var(--brand-light);
  font-size: 20px;
  font-weight: 400;
  transition: transform 0.25s ease;
}
.accordion__item[open] .accordion__q::after { transform: rotate(45deg); }
.accordion__a {
  padding: 0 26px 24px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-caption);
}

/* Contact cards — one department per card.
   Spans the full container so the three cards sit on the page grid. */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.contact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--card-pad);
  border-radius: 20px;
  background: var(--surface-1);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
  box-shadow: var(--shadow-4);
  overflow: hidden;
}

.contact-card__icon {
  width: 60px;
  height: 60px;
  margin-bottom: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-white);
  position: relative;
}
.contact-card__icon svg { width: 27px; height: 27px; }
.contact-card__icon--sales     { background: linear-gradient(135deg, #DD52E0, #8352FF); box-shadow: 0 0 36px rgba(221, 82, 224, 0.35); }
.contact-card__icon--marketing { background: linear-gradient(135deg, #3250E6, #8352FF); box-shadow: 0 0 36px rgba(50, 80, 230, 0.35); }
.contact-card__icon--affiliates{ background: linear-gradient(135deg, #DA2363, #8352FF); box-shadow: 0 0 36px rgba(218, 35, 99, 0.35); }

.contact-card__dept {
  margin-bottom: 8px;
}
.contact-card__title { font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--text-white); margin-bottom: 10px; position: relative; }
/* Pushes the email row to the card floor so all three align across the grid */
.contact-card__text { font-size: 14px; line-height: 1.6; color: var(--text-caption); margin-bottom: 24px; flex: 1; position: relative; }
.contact-card__email {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-light);
  position: relative;
  transition: color 0.2s ease, gap 0.2s ease;
  /* Long addresses stay inside the card instead of forcing it wider */
  word-break: break-word;
}
.contact-card__email svg { width: 16px; height: 16px; flex: none; }
.contact-card__email:hover { color: var(--text-white); gap: 13px; }

/* Terms */
.terms-nav {
  position: sticky;
  top: calc(var(--header-h) + 28px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: start;
}
.terms-nav a {
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  transition: color 0.2s ease, background 0.2s ease;
}
.terms-nav a:hover { color: var(--text-white); background: var(--tab-hover); }
.terms-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: start;
}
.terms-layout .prose { margin: 0; max-width: none; }
.prose h2[id] { scroll-margin-top: calc(var(--header-h) + 40px); }

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 1024px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .testimonials { grid-template-columns: repeat(2, 1fr); }
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__offers, .hero__cta { justify-content: center; }
  .hero-art { width: min(320px, 80vw); }
  .hero { padding-bottom: 64px; }
  .page-hero--split { text-align: center; }
  .page-hero--split .page-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .page-hero--split .page-hero__subtitle { margin: 0 auto; }
}

/* Compact header. script.js sets .is-compact as soon as the nav plus the actions stop
   fitting, which depends on the active language; the media query is the floor for
   when scripting is unavailable. */
.header.is-compact .nav,
.header.is-compact .header__actions .btn { display: none; }
.header.is-compact .burger { display: flex; }

@media (max-width: 860px) {
  .nav { display: none; }
  .header__actions .btn { display: none; }
  .burger { display: flex; }
  .footer__top { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 900px) {
  .terms-layout { grid-template-columns: 1fr; }
  .terms-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { --card-pad: 16px; }
  .section { padding: 64px 0; }
  .section--page { padding: 32px 0 64px; }
  .page-hero { padding-bottom: 40px; }
  .crumbs { font-size: 12px; gap: 8px; }
  /* Only the parent link earns the space on a narrow screen */
  .crumbs__link--home,
  .crumbs__sep--home,
  .crumbs__sep--current,
  .crumbs__current { display: none; }
  .model-tabs { width: 100%; }
  .model-tab { flex: 1; text-align: center; padding: 10px 14px; }
  .section__title { margin-bottom: 36px; }
  .features { grid-template-columns: 1fr; }
  /* Two quote cards side by side stop being readable on a phone */
  .testimonials { grid-template-columns: 1fr; }
  .offer-card { flex: 1 1 168px; }
  .offer-card__value { font-size: 18px; }
  /* Two thirds of the desktop 96px gap — enough air without eating the fold */
  .hero { padding-top: calc(var(--header-h) + 64px); }
  .page-hero { padding-top: calc(var(--header-h) + 64px); }
  .hero__title { margin-bottom: 28px; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .footer__nav { grid-template-columns: 1fr 1fr; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .logo__img { height: 24px; }
  /* Sign-up buttons are gone by this width, so the switcher shares the row with
     the burger — trim the padding, but keep the code itself legible */
  .header__actions { --lang-w: 59px; }
  .lang__trigger { padding: 8px 6px; }
  .marquee--logos .marquee__track { gap: 44px; }
  .provider-logo { height: 19px; }
  .provider-logo--stacked { height: 32px; }
}

/* Below this the three offer cards no longer fit on one line at their 168px
   minimum, so they drop to two plus a full-width Hybrid instead of wrapping ragged */
@media (max-width: 579px) {
  .hero__offers { display: grid; grid-template-columns: 1fr 1fr; }
  .offer-card { min-width: 0; }
  .offer-card--hyb { grid-column: 1 / -1; }
}