/*
 * linebetpromo-ma.com — layout is a 1:1 transfer of the Figma file jDGab9DJLhKAMYGwNWAyUy.
 * Every number below comes from the Figma REST API (dumps in /root/work/linebetpromo.ma/spec/).
 *
 * Scaling model: each Figma frame (1920 / 1536 / 1440 / 1100 / 768 / 450 / 360) keeps its own
 * layout; inside a range the frame is scaled as a whole by --u = 100cqw / frame width, so the
 * design is pixel-exact at every frame width and cannot break in between.
 * Container query units are used (not vw) so a visible scrollbar can never cause h-scroll.
 * Frames are switched with @media, not @container: the <picture> background picks its frame by
 * viewport width (scrollbar included), and both must agree or a classic 15px scrollbar pairs one
 * frame's text with the neighbouring frame's background (text over the player's arm at 1536).
 */

@import url("fonts.css");

:root {
  /* Colours — Figma fills */
  --c-bg: #010E08;          /* frame + header + footer fill */
  --c-white: #FFFFFF;
  --c-grey: #949494;        /* descriptions, JUSQU'À, MAD, Partenaires, input stroke */
  --c-green: #07FF1A;       /* accent: DE DÉPART, amount, button stroke, arrow, hover */
  --c-green-2: #13E623;     /* badge bg @10%, input hover bg @10% */
  --c-green-3: #19E77B;     /* icon strokes, icon tile bg @10% */
  --c-card: #010A02;        /* cards / sticker / partner tiles bg */

  /* Radii — Figma cornerRadius */
  --r-btn: 200;
  --r-input: 300;
  --r-badge: 100;
  --r-card: 20;
  --r-icon: 10;
  --r-tile: 12;
  --r-tip: 30;

  /* Figma BACKGROUND_BLUR 10 → CSS blur is ~2.4× smaller (reference_figma_blur_scale) */
  --blur-card: 4.167;
  /* Figma LAYER_BLUR 20 on the partner-4 fade ellipse */
  --blur-fade: 8.333;

  --u: 1px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--c-bg); -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-white);
  font-family: Inter, sans-serif;
  container-type: inline-size;
  overflow-x: clip;
}
img, svg, picture { display: block; border: 0; }
h1, h2, h3, p, ul, li { margin: 0; padding: 0; }
ul { list-style: none; }
a { text-decoration: none; color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; }
:focus-visible { outline: 2px solid var(--c-green); outline-offset: 2px; }

/* ---------- page shell ---------- */
.page {
  position: relative;
  width: 100%;
  min-height: calc(var(--frame-h) * var(--u));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  font-size: calc(16 * var(--u));
  line-height: 1.3;
}
.bg {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  z-index: -1;
  pointer-events: none;
}
.bg img { width: 100%; height: auto; }
.hdr, .ftr { position: relative; }

/* ---------- header ---------- */
.hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: calc(var(--hdr-h) * var(--u));
  padding-block: calc(16 * var(--u));
  padding-inline: calc(var(--pad-x) * var(--u));
  background: var(--c-bg);
  flex: 0 0 auto;
}
.logo img {
  width: calc(var(--logo-w) * var(--u));
  height: calc(var(--logo-h) * var(--u));
}
.hdr__nav {
  display: flex;
  align-items: center;
  gap: calc(var(--nav-gap) * var(--u));
}

/* ---------- buttons — Figma component «Кнопка» ---------- */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  height: calc(var(--btn-h) * var(--u));
  padding-block: calc((var(--btn-py) - 1) * var(--u));
  padding-inline: calc((var(--btn-px) - 1) * var(--u));
  border: calc(1 * var(--u)) solid transparent;
  border-radius: calc(var(--r-btn) * var(--u));
  font-family: Montserrat, Tajawal, sans-serif;
  font-weight: 700;
  font-size: calc(var(--btn-fs) * var(--u));
  line-height: calc(var(--btn-lh) * var(--u));
  text-transform: uppercase;
  color: var(--c-white);
  white-space: nowrap;
  cursor: pointer;
}
/* Hover in the prototype is SMART_ANIMATE 300ms ease-out between two gradient fills: Figma tweens
 * the gradient handles and stop colours, so app.js swaps these static layers for a live inline
 * SVG gradient (.btn__bg) and tweens it. The two layers below stay as the no-JS fallback. */
/* Fill layers cover the whole border box (.btn keeps a transparent 1px border only for geometry);
 * the stroke is a separate ring painted on top (::after). Fill and border drawn as two independent
 * anti-aliased curves left a visibly ragged seam on the 200px caps at 1x DPR. */
.btn__bg, .btn::before {
  position: absolute;
  inset: calc(-1 * var(--u));
  z-index: -1;
  /* percentages resolve against the padding box; the svg needs an explicit size */
  width: calc(100% + 2 * var(--u));
  height: calc(100% + 2 * var(--u));
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.btn::before {
  content: "";
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../svg/grad-btn.svg");
}
.btn.has-bg::before { display: none; }
/* no-JS fallback: swap the fill on hover (the tween itself needs app.js) */
.btn:hover::before { background-image: url("../svg/grad-btn-hover.svg"); }

/* 1px #07FF1A stroke (Figma: inside) drawn above the fill. In the mock only the primary button
 * has it; «Connexion» carries the same stroke by the owner's decision (24.09). */
.btn--primary::after,
.btn--ghost::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--u));
  z-index: 1;
  border: calc(1 * var(--u)) solid var(--c-green);
  border-radius: inherit;
  pointer-events: none;
}

/* «Connexion»: same gradients at 10% → 20% on hover, no stroke */
.btn--ghost::before { opacity: .1; }
.btn--ghost:hover::before { opacity: .2; }

/* ---------- main / hero ---------- */
.main { flex: 1 0 auto; }
.hero {
  display: flex;
  flex-direction: column;
  gap: calc(var(--hero-gap) * var(--u));
  width: calc(var(--hero-w) * var(--u));
}
.hero__promo {
  display: flex;
  flex-direction: column;
  gap: calc(var(--promo-gap) * var(--u));
}
.hero__text { display: flex; flex-direction: column; }

.badge {
  display: inline-flex;
  align-self: var(--badge-align, flex-start);
  align-items: center;
  justify-content: center;
  padding-block: calc(2 * var(--u));
  padding-inline: calc(8 * var(--u));
  border-radius: calc(var(--r-badge) * var(--u));
  background: rgba(19, 230, 35, .1);
  color: var(--c-green);
  font-weight: 600;
  font-size: calc(16 * var(--u));
  line-height: calc(21 * var(--u));
}
.titles {
  display: flex;
  flex-direction: column;
  text-align: var(--titles-align, start);
}
/* Figma auto-layout gap is -20 on the wide frames; flexbox has no negative gap */
.t2 { margin-block-start: calc(var(--titles-gap) * var(--u)); }
.t1 { font-weight: 700; font-size: calc(var(--t1-fs) * var(--u)); line-height: calc(var(--t1-lh) * var(--u)); }
.t2 { font-weight: 700; font-size: calc(var(--t2-fs) * var(--u)); line-height: calc(var(--t2-lh) * var(--u)); }
.t2__accent { font-weight: 600; color: var(--c-green); }

/* three benefit rows under the headline */
.perks {
  display: flex;
  flex-direction: var(--perks-dir, row);
  align-items: var(--perks-align, flex-start);
  gap: calc(var(--perks-gap) * var(--u));
}
.perk {
  display: flex;
  flex: var(--perk-flex, 1 1 0);
  align-items: center;
  gap: calc(var(--perk-gap) * var(--u));
}
.perk__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--perk-ico) * var(--u));
  height: calc(var(--perk-ico) * var(--u));
  border-radius: calc(var(--r-icon) * var(--u));
  background: rgba(25, 231, 123, .1);
}
.perk__icon img, .feature__icon img {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
}
.perk__body, .feature__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: calc(4 * var(--u));
  min-width: 0;
}
.perk__title { font-weight: 500; font-size: calc(var(--perk-title-fs) * var(--u)); line-height: calc(var(--perk-title-lh) * var(--u)); }
.perk__desc  { font-weight: 500; font-size: calc(var(--perk-desc-fs) * var(--u)); line-height: calc(var(--perk-desc-lh) * var(--u)); color: var(--c-grey); }

/* ---------- promo code block ---------- */
.promocode {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
}
.promocode__hint {
  font-weight: 500;
  font-size: calc(var(--hint-fs) * var(--u));
  line-height: calc(var(--hint-lh) * var(--u));
  color: var(--c-grey);
}
.promocode__row {
  display: flex;
  align-self: var(--code-row-align, flex-start);
  flex-direction: var(--code-row-dir, row);
  align-items: center;
  gap: calc(13 * var(--u));
}
/* green arrow — Figma absolute child of the code row; y offset is the same on every frame */
.promocode__arrow {
  position: absolute;
  inset-inline-start: calc(var(--arrow-x) * var(--u));
  inset-block-start: calc(-27.804 * var(--u));
  width: calc(80.03 * var(--u));
  height: calc(46.12 * var(--u));
  pointer-events: none;
}
.lang-ar .promocode__arrow { transform: scaleX(-1); }

/* promo code field — Figma component «Input» */
.code {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  width: calc(var(--code-w) * var(--u));
  height: calc(var(--code-h) * var(--u));
  padding-inline: calc(15 * var(--u));
  border: calc(1 * var(--u)) dashed var(--c-grey);
  border-radius: calc(var(--r-input) * var(--u));
  background: rgba(255, 255, 255, .1);
  font-family: Montserrat, Tajawal, sans-serif;
  font-weight: 700;
  font-size: calc(var(--code-fs) * var(--u));
  line-height: calc(var(--code-lh) * var(--u));
  text-align: start;
  cursor: pointer;
}
.code__value { flex: 1 1 auto; text-align: start; }
.code__icon { flex: 0 0 auto; display: inline-flex; }
.code__icon svg {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}
/* hover / copied state — the prototype has no transition here */
.code:hover, .code.is-copied {
  border-color: var(--c-green);
  border-style: dashed;
  background: rgba(19, 230, 35, .1);
  color: var(--c-green);
}
.code__tip {
  position: absolute;
  inset-inline-end: calc(18 * var(--u));
  inset-block-start: calc(-9 * var(--u));
  display: none;
  align-items: center;
  justify-content: center;
  padding-block: calc(3 * var(--u));
  padding-inline: calc(7 * var(--u));
  border-radius: calc(var(--r-tip) * var(--u));
  background: var(--c-green);
  color: var(--c-white);
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  white-space: nowrap;
}
.code.is-copied .code__tip { display: inline-flex; }
.btn--cta { width: var(--cta-w, auto); height: calc(var(--cta-h) * var(--u)); }

/* ---------- feature cards ---------- */
.features {
  display: flex;
  flex-direction: var(--features-dir, row);
  flex-wrap: var(--features-wrap, nowrap);
  column-gap: calc(var(--features-col-gap) * var(--u));
  row-gap: calc(var(--features-row-gap) * var(--u));
}
.feature {
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: calc(16 * var(--u));
  height: calc(var(--feature-h) * var(--u));
  padding-block: calc(var(--feature-pt) * var(--u)) calc(var(--feature-pb) * var(--u));
  padding-inline: calc(var(--feature-pl) * var(--u)) calc(var(--feature-pr) * var(--u));
  border: calc(1 * var(--u)) solid transparent;
  border-radius: calc(var(--r-card) * var(--u));
  background: rgba(1, 10, 2, .7);
  backdrop-filter: blur(calc(var(--blur-card) * var(--u)));
  -webkit-backdrop-filter: blur(calc(var(--blur-card) * var(--u)));
  opacity: .8;
  overflow: hidden;
}
/* gradient stroke (Figma stroke: linear-gradient, 30% opacity) drawn as a masked ring */
.feature::before, .sticker::before, .tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: calc(var(--stroke-w, 1) * var(--u));
  background: url("../svg/grad-stroke.svg") center / 100% 100% no-repeat;
  opacity: var(--stroke-opacity, .3);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.feature__icon { flex: 0 0 auto; }
.feature__title { font-weight: 500; font-size: calc(var(--feature-title-fs) * var(--u)); line-height: calc(var(--feature-title-lh) * var(--u)); }
.feature__desc  { font-weight: 500; font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); color: var(--c-grey); }

/* ---------- bonus sticker ---------- */
.sticker {
  position: absolute;
  inset-inline-start: calc(var(--sticker-x) * var(--u));
  inset-block-start: calc(var(--sticker-y) * var(--u));
  width: calc(313.6 * var(--sticker-s) * var(--u));
  height: calc(107.8 * var(--sticker-s) * var(--u));
  padding: calc(16 * var(--sticker-s) * var(--u));
  border: calc(2 * var(--sticker-s) * var(--u)) solid transparent;
  border-radius: calc(var(--r-card) * var(--sticker-s) * var(--u));
  background: rgba(1, 10, 2, .8);
  backdrop-filter: blur(calc(var(--blur-card) * var(--sticker-s) * var(--u)));
  -webkit-backdrop-filter: blur(calc(var(--blur-card) * var(--sticker-s) * var(--u)));
  transform: rotate(-7.7768deg);
  z-index: 2;
}
.lang-ar .sticker { transform: rotate(7.7768deg); }
/* AR: «حتى» is far narrower than «JUSQU'À», so anchoring it to the edge leaves a 43px hole before
 * the amount. Anchor it to the amount box instead, 8px away — the same gap «درهم» has on the other side
 * (insets are relative to .sticker__amount, 277.6 wide: 277.6 - 82.8 + 8 = 202.8). */
.lang-ar .sticker__prefix {
  inset-inline-start: auto;
  inset-inline-end: calc(202.8 * var(--sticker-s) * var(--u));
}
.sticker::before { --stroke-w: calc(2 * var(--sticker-s)); --stroke-opacity: 1; }
.sticker__inner {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--sticker-s) * var(--u));
  height: 100%;
}
.sticker__amount { position: relative; height: calc(46.8 * var(--sticker-s) * var(--u)); }
.sticker__prefix, .sticker__cur {
  position: absolute;
  inset-block-start: calc(23.4 * var(--sticker-s) * var(--u));
  font-weight: 500;
  font-size: calc(14 * var(--sticker-s) * var(--u));
  line-height: calc(18 * var(--sticker-s) * var(--u));
  color: var(--c-grey);
  white-space: nowrap;
}
.sticker__prefix { inset-inline-start: calc(14.8 * var(--sticker-s) * var(--u)); }
.sticker__cur    { inset-inline-start: calc(229.8 * var(--sticker-s) * var(--u)); }
.sticker__value {
  position: absolute;
  inset-inline-start: calc(82.8 * var(--sticker-s) * var(--u));
  inset-block-start: 0;
  width: calc(139 * var(--sticker-s) * var(--u));
  text-align: center;
  font-weight: 700;
  font-size: calc(36 * var(--sticker-s) * var(--u));
  line-height: calc(47 * var(--sticker-s) * var(--u));
  color: var(--c-green);
  -webkit-text-stroke: calc(.5 * var(--sticker-s) * var(--u)) var(--c-green);
}
.sticker__title {
  font-weight: 500;
  font-size: calc(16 * var(--sticker-s) * var(--u));
  line-height: calc(21 * var(--sticker-s) * var(--u));
  text-align: center;
  white-space: nowrap;
}

/* ---------- footer ---------- */
.ftr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: calc(var(--ftr-h) * var(--u));
  padding-block: calc(16 * var(--u));
  padding-inline: calc(var(--pad-x) * var(--u));
  background: var(--c-bg);
  flex: 0 0 auto;
}
.partners { display: flex; align-items: center; gap: calc(var(--partners-gap) * var(--u)); }
.partners__label {
  font-family: Poppins, Tajawal, sans-serif;
  font-weight: 400;
  font-size: calc(14 * var(--u));
  line-height: calc(18 * var(--u));
  color: var(--c-grey);
  white-space: nowrap;
}
.partners__list { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.tile {
  position: relative;
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
  border-radius: calc(var(--r-tile) * var(--u));
  background: rgba(1, 10, 2, .7);
  backdrop-filter: blur(calc(var(--blur-card) * var(--u)));
  -webkit-backdrop-filter: blur(calc(var(--blur-card) * var(--u)));
}
.tile:hover { background: rgba(1, 10, 2, .8); }
.tile:hover::before { --stroke-opacity: 1; }
.tile::before { z-index: 1; }   /* Figma paints the frame stroke above its children */
/* The link fills the tile (whole tile is clickable) and does the content clipping (Figma:
 * clipsContent), so the stroke ring on .tile::before is never cut by an overflow clip. */
.tile__link {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  overflow: hidden;
}
.tile img {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  transform: translate(-50%, -50%);
}
.lang-ar .tile img { transform: translate(50%, -50%); }
.tile--1 img { width: calc(49.334 * var(--u)); height: calc(28.109 * var(--u)); }
/* The Figma export of this node bakes its DROP_SHADOW (blur 22.36) into the bitmap, so the PNG is
 * 74×78 with the 28.76×32.87 crest in the middle: show it at export size, no second shadow. */
.tile--2 img {
  width: calc(74 * var(--u));
  height: calc(78 * var(--u));
}
.tile--3 img { width: calc(26.655 * var(--u)); height: calc(44.236 * var(--u)); }
.tile--4 img { width: calc(49.77 * var(--u)); height: calc(49.77 * var(--u)); }
/* blurred ellipse fading the bottom of the photo — Figma «Ellipse 242» */
.tile--4 .tile__link::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(1.223 * var(--u));
  inset-block-start: calc(37.103 * var(--u));
  width: calc(57.554 * var(--u));
  height: calc(57.554 * var(--u));
  border-radius: 50%;
  background: var(--c-bg);
  filter: blur(calc(var(--blur-fade) * var(--u)));
}

/* line break that exists only on the wide frames */
.br-wide { display: none; }

/* =========================================================================
 * Breakpoints — one Figma frame per range.
 * Shared blocks come first, narrower overrides after (same specificity).
 * ========================================================================= */

/* ---- shared desktop layout: 1440 / 1536 / 1920 ---- */
@media (min-width: 1440px) {
  .page {
    --frame-h: 960;
    --pad-x: 160;
    --hdr-h: 88;
    --logo-w: 123; --logo-h: 38;
    --nav-gap: 16;
    --btn-h: 56; --btn-py: 13; --btn-px: 24; --btn-fs: 18; --btn-lh: 23;
    --hero-w: 790; --hero-gap: 56; --promo-gap: 36; --titles-gap: -20;
    --t1-fs: 130; --t1-lh: 169; --t2-fs: 56; --t2-lh: 73;
    --perks-gap: 16; --perk-gap: 16; --perk-ico: 40;
    --perk-title-fs: 20; --perk-title-lh: 26; --perk-desc-fs: 16; --perk-desc-lh: 21;
    --hint-fs: 16; --hint-lh: 21;
    --code-w: 370; --code-h: 56; --code-fs: 18; --code-lh: 23;
    --cta-h: 56;
    --arrow-x: 280.51;
    --features-col-gap: 8; --features-row-gap: 0;
    --feature-h: 77; --feature-pt: 16; --feature-pr: 16; --feature-pb: 16; --feature-pl: 16;
    --feature-title-fs: 16; --feature-title-lh: 21;
    --ftr-h: 92; --partners-gap: 36;
    --sticker-s: 1; --sticker-x: 1020.644; --sticker-y: 597.603;
  }
  .hero {
    position: absolute;
    inset-inline-start: calc(var(--pad-x) * var(--u));
    inset-block-start: calc(172 * var(--u));
  }
  .features {
    position: absolute;
    inset-inline-start: calc(var(--pad-x) * var(--u));
    inset-block-start: calc(770 * var(--u));
    width: calc(100% - 2 * var(--pad-x) * var(--u));
  }
  /* Figma y=868 = 960-92: anchored to the bottom so no sub-pixel seam shows the background below */
  .ftr { position: absolute; inset-block-end: 0; inset-inline-start: 0; }
  .br-wide { display: inline; }
}

/* ---- 1920 and up (frame 1920×960) ---- */
@media (min-width: 1920px) {
  .page { --u: calc(100cqw / 1920); }
}

/* ---- 1536–1919 (frame 1536×960) ---- */
@media (min-width: 1536px) and (max-width: 1919.98px) {
  .page { --u: calc(100cqw / 1536); --pad-x: 20; --sticker-x: 810.644; }
  /* Figma: first card Fixed 318, the other four Fill */
  .feature:first-child { flex: 0 0 calc(318 * var(--u)); }
  /* the AR frame widens whichever card carries the longest arabic line */
  .lang-ar .features .feature { flex: 1 1 auto; }
}

/* ---- 1440–1535 (frame 1440×960) ---- */
@media (min-width: 1440px) and (max-width: 1535.98px) {
  .page { --u: calc(100cqw / 1440); --pad-x: 20; --perks-gap: 8; --sticker-x: 810.644; }
  .feature:first-child { flex: 0 0 calc(318 * var(--u)); }
  .lang-ar .features .feature { flex: 1 1 auto; }
}

/* ---- 1100–1439 (frame 1100×906) ---- */
@media (min-width: 1100px) and (max-width: 1439.98px) {
  .page {
    --u: calc(100cqw / 1100);
    --frame-h: 906;
    --pad-x: 20;
    --hdr-h: 76;
    --logo-w: 123; --logo-h: 38;
    --nav-gap: 16;
    --btn-h: 44; --btn-py: 13; --btn-px: 24; --btn-fs: 14; --btn-lh: 18;
    --hero-w: 790; --hero-gap: 56; --promo-gap: 36; --titles-gap: -20;
    --t1-fs: 100; --t1-lh: 130; --t2-fs: 36; --t2-lh: 47;
    --perks-gap: 8; --perk-gap: 8; --perk-ico: 40;
    --perk-title-fs: 14; --perk-title-lh: 18; --perk-desc-fs: 14; --perk-desc-lh: 18;
    --hint-fs: 14; --hint-lh: 18;
    --code-w: 370; --code-h: 56; --code-fs: 14; --code-lh: 18;
    --cta-h: 56;
    --arrow-x: 280.51;
    --features-col-gap: 8; --features-row-gap: 4; --features-wrap: wrap;
    --feature-h: 77; --feature-pt: 16; --feature-pr: 16; --feature-pb: 16; --feature-pl: 16;
    --feature-title-fs: 16; --feature-title-lh: 21;
    --ftr-h: 92; --partners-gap: 36;
    --sticker-s: .76385; --sticker-x: 628.175; --sticker-y: 452.368;
  }
  .hero { position: absolute; inset-inline-start: calc(20 * var(--u)); inset-block-start: calc(163 * var(--u)); }
  .features {
    position: absolute;
    inset-inline-start: calc(20 * var(--u));
    inset-block-start: calc(640 * var(--u));
    width: calc(100% - 40 * var(--u));
  }
  .perks .perk:nth-child(1) { flex: 0 0 calc(214 * var(--u)); }
  .perks .perk:nth-child(2) { flex: 0 0 calc(174 * var(--u)); }
  .perks .perk:nth-child(3) { flex: 0 0 calc(193 * var(--u)); }
  .features .feature:nth-child(-n+3) { flex: 0 0 calc((100% - 16 * var(--u)) / 3); }
  .features .feature:nth-child(n+4)  { flex: 0 0 calc((100% - 8 * var(--u)) / 2); }
  .ftr { position: absolute; inset-block-end: 0; inset-inline-start: 0; }  /* Figma y=814 = 906-92 */
  .br-wide { display: inline; }
}

/* ---- 768–1099 (frame 768×947) ---- */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .page {
    --u: calc(100cqw / 768);
    --frame-h: 947;
    --pad-x: 20;
    --hdr-h: 76;
    --logo-w: 123; --logo-h: 38;
    --nav-gap: 4;
    --btn-h: 44; --btn-py: 8; --btn-px: 8; --btn-fs: 14; --btn-lh: 18;
    --hero-gap: 24; --promo-gap: 16; --titles-gap: -20;
    --t1-fs: 64; --t1-lh: 83; --t2-fs: 24; --t2-lh: 31;
    --perks-dir: column; --perks-align: stretch; --perks-gap: 8; --perk-gap: 8; --perk-ico: 36; --perk-flex: 0 0 auto;
    --perk-title-fs: 14; --perk-title-lh: 18; --perk-desc-fs: 14; --perk-desc-lh: 18;
    --hint-fs: 14; --hint-lh: 18;
    --code-w: 351; --code-h: 44; --code-fs: 14; --code-lh: 18;
    --cta-w: calc(311 * var(--u)); --cta-h: 44;
    --arrow-x: 260.51;
    --features-dir: column; --features-col-gap: 0; --features-row-gap: 4;
    --feature-h: 58; --feature-pt: 8; --feature-pr: 8; --feature-pb: 8; --feature-pl: 16;
    --feature-title-fs: 14; --feature-title-lh: 18;
    --ftr-h: 92; --partners-gap: 36;
    --sticker-s: .53330; --sticker-x: 438.569; --sticker-y: 315.751;
  }
  .main {
    display: flex;
    flex: 0 0 auto;            /* Figma stacks the frame from the top; leftover height stays empty */
    flex-direction: column;
    gap: calc(36 * var(--u));
    padding-block-start: calc(36 * var(--u));
    padding-inline: calc(20 * var(--u));
  }
  .hero { width: 100%; }
  .feature { flex: 0 0 auto; }  /* column layout: keep the Figma card height */
  .ftr { margin-block-start: calc(36 * var(--u)); }
}

/* ---- shared mobile layout: 360 / 450 ---- */
@media (max-width: 767.98px) {
  .page {
    --pad-x: 20;
    --hdr-h: 76;
    --logo-w: 87; --logo-h: 26;
    --nav-gap: 4;
    --btn-h: 44; --btn-py: 8; --btn-px: 8; --btn-fs: 14; --btn-lh: 18;
    --hero-gap: 24; --promo-gap: 16; --titles-gap: 0;
    --badge-align: center; --titles-align: center;
    --t1-fs: 64; --t1-lh: 83; --t2-fs: 24; --t2-lh: 31;
    --perks-dir: column; --perks-align: stretch; --perks-gap: 8; --perk-gap: 8; --perk-ico: 36; --perk-flex: 0 0 auto;
    --perk-title-fs: 14; --perk-title-lh: 18; --perk-desc-fs: 14; --perk-desc-lh: 18;
    --hint-fs: 14; --hint-lh: 18;
    --code-h: 44; --code-fs: 14; --code-lh: 18; --cta-h: 44;
    --code-row-dir: column;
    --features-dir: column; --features-col-gap: 0; --features-row-gap: 4;
    --feature-h: 58; --feature-pt: 8; --feature-pr: 8; --feature-pb: 8; --feature-pl: 16;
    --feature-title-fs: 14; --feature-title-lh: 18;
    --ftr-h: 160; --partners-gap: 8;
    --sticker-s: .53330; --sticker-x: 25.280; --sticker-y: 315.559;
  }
  .main {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: calc(36 * var(--u));
    padding-block-start: calc(356 * var(--u));
    padding-inline: calc(20 * var(--u));
  }
  .hero { width: 100%; }
  .feature { flex: 0 0 auto; }
  .code, .btn--cta { width: 100%; }
  .promocode__row { align-items: stretch; align-self: stretch; }
  .ftr {
    flex-direction: column;
    justify-content: center;
    gap: calc(16 * var(--u));
    margin-block-start: calc(36 * var(--u));
  }
  .partners { flex-direction: column; }
}

/* ---- 450–767 (frame 450×1430) ---- */
@media (min-width: 450px) and (max-width: 767.98px) {
  .page { --u: calc(100cqw / 450); --frame-h: 1430; --arrow-x: 310.51; }
  .ftr { width: calc(360 * var(--u)); margin-inline: auto; }
}

/* ---- below 450 (frame 360×1461) ---- */
@media (max-width: 449.98px) {
  .page { --u: calc(100cqw / 360); --frame-h: 1461; --hero-gap: 36; --arrow-x: 230.51; }
}

/* ---------- arabic ---------- */

body.lang-ar { font-family: Tajawal, Inter, sans-serif; }
.lang-ar .t2 { font-weight: 700; }        /* Figma uses Inter 600; Tajawal has no 600 */
.lang-ar .badge { font-weight: 700; }
/* latin runs inside the arabic page keep their original faces */
.lang-ar .t1,
.lang-ar .code__value,
.lang-ar .sticker__value { font-family: Inter, sans-serif; }