/* ============================================================
   NAFETH GO — landing page
   Palette and type sampled from the product itself (app mockup):
   navy surfaces, one electric blue accent, gold reserved for points.
   ============================================================ */

/* ── Thmanyah (ثمانية) — Arabic voice ───────────────────────
   Serif Display carries the headlines, Sans carries everything else.
   Only the weights actually used are loaded; adding more costs ~78KB each. */

@font-face {
  font-family: "Thmanyah Sans";
  src: url("assets/fonts/thmanyahsans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Thmanyah Sans";
  src: url("assets/fonts/thmanyahsans-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Thmanyah Sans";
  src: url("assets/fonts/thmanyahsans-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Thmanyah Sans";
  src: url("assets/fonts/thmanyahsans-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Thmanyah Serif Display";
  src: url("assets/fonts/thmanyahserifdisplay-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Thmanyah Serif Display";
  src: url("assets/fonts/thmanyahserifdisplay-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* Type roles — swapped wholesale per language, see html[lang="ar"] below */
  --font-display: Outfit, "Plus Jakarta Sans", sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-ui: Outfit, sans-serif;

  /* Brand */
  --blue: #086cff;
  --blue-lift: #2f8bff;
  --blue-deep: #0450d0;
  --blue-wash: #eef4ff;
  --blue-wash-2: #dfeaff;

  /* Points / states — same semantics as the app */
  --gold: #ffb10f;
  --gold-soft: #fff3d6;
  --green: #22c55e;
  --violet: #7b5cff;

  /* Dark surfaces */
  --navy: #050b23;
  --navy-2: #0a1330;
  --navy-3: #111c42;
  --navy-line: rgba(255, 255, 255, .10);

  /* Neutrals — one cool-tinted family */
  --ink: #060b22;
  --ink-2: #1d2740;
  --muted: #5b6478;
  --muted-2: #7c8598;
  --line: #e6ecf7;
  --line-2: #f0f4fb;
  --soft: #f6f9ff;
  --white: #fff;

  /* Elevation — tinted, never pure black */
  --sh-sm: 0 1px 2px rgba(12, 26, 62, .05), 0 2px 8px rgba(12, 26, 62, .04);
  --sh-md: 0 4px 12px rgba(12, 26, 62, .06), 0 14px 34px rgba(12, 26, 62, .07);
  --sh-lg: 0 10px 24px rgba(12, 26, 62, .07), 0 30px 70px rgba(12, 26, 62, .10);
  --sh-blue: 0 8px 18px rgba(8, 108, 255, .22), 0 18px 40px rgba(8, 108, 255, .18);

  /* Rhythm */
  --wrap: 1200px;
  --pad: 24px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* Natural deceleration. No bounce or elastic — they date fast and make the
     animation the subject instead of the content. */
  --ease: cubic-bezier(.25, 1, .5, 1);          /* out-quart, general purpose */
  --ease-quint: cubic-bezier(.22, 1, .36, 1);   /* snappier, for feedback */
  --ease-expo: cubic-bezier(.16, 1, .3, 1);     /* decisive, for entrances */
  --spring: cubic-bezier(.22, 1, .36, 1);

  --z-nav: 100;
  --z-ribbon: 90;
  --z-grain: 200;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
  letter-spacing: -.03em;
  text-wrap: balance;
  line-height: 1.05;
}

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

em { font-style: normal; color: var(--blue); }

::selection { background: rgba(8, 108, 255, .18); }

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

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

.skip {
  position: fixed;
  top: -60px; left: 16px;
  z-index: 999;
  padding: 12px 18px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  transition: top .2s var(--ease);
}
.skip:focus { top: 0; }

.wrap {
  width: min(100% - (var(--pad) * 2), var(--wrap));
  margin-inline: auto;
}

/* Film grain — breaks the digital flatness */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Reveal on scroll ───────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   RIBBON + NAV
   ============================================================ */

.ribbon {
  position: relative;
  z-index: var(--z-ribbon);
  background: linear-gradient(100deg, var(--navy) 0%, #0d1a44 55%, #123067 100%);
  color: #e6edff;
  font-size: 13.5px;
}

.ribbon-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 46px;
  padding-block: 8px;
  text-align: center;
}

.ribbon-tag {
  padding: 3px 10px;
  border-radius: 5px;
  background: rgba(8, 108, 255, .22);
  border: 1px solid rgba(120, 175, 255, .35);
  color: #a9c9ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ribbon p { color: #c3d2f0; }

.ribbon a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  transition: border-color .2s var(--ease), gap .2s var(--ease);
}
.ribbon a:hover { gap: 10px; border-color: #fff; }

.nav-shell {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.nav-shell.stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgba(12, 26, 62, .06);
  background: rgba(255, 255, 255, .9);
}

.nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  min-height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-ui);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
}

.brand-logo {
  width: 44px; height: 44px;
  border-radius: 12px;
  object-fit: cover;
  transition: transform .35s var(--spring);
}
.brand:hover .brand-logo { transform: rotate(-6deg) scale(1.06); }

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
}

.nav-links a {
  position: relative;
  padding-block: 8px;
  transition: color .2s var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 0; height: 2.5px;
  border-radius: 4px;
  background: var(--blue);
  transform: translateX(-50%);
  transition: width .28s var(--ease);
}
.nav-links a:hover { color: var(--blue); }
.nav-links a:hover::after,
.nav-links a.active::after { width: 22px; }
.nav-links a.active { color: var(--ink); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
  font-weight: 700;
}
.login { transition: color .2s var(--ease); }
.login:hover { color: var(--blue); }

.burger {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 18px; height: 2px;
  margin: 3.5px auto;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding-inline: 26px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease),
              background .2s var(--ease), border-color .2s var(--ease);
}
.btn.compact { height: 44px; padding-inline: 20px; font-size: 14px; }

/* Two background layers: the gradient, plus a light sweep parked off-screen that
   slides across on hover. Done with background-position rather than a pseudo-
   element so it cannot stack above the label. */
.primary {
  background-image:
    linear-gradient(180deg, var(--blue-lift), var(--blue) 55%, var(--blue-deep)),
    linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .28) 50%, transparent 58%);
  background-size: 100% 100%, 260% 100%;
  background-position: 0 0, 150% 0;
  background-repeat: no-repeat;
  color: #fff;
  box-shadow: var(--sh-blue);
  transition: transform .18s var(--ease-quint), box-shadow .25s var(--ease),
              background-position .6s var(--ease);
}
.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(8,108,255,.28), 0 24px 52px rgba(8,108,255,.22);
  background-position: 0 0, -50% 0;
}
.primary:active { transform: translateY(0) scale(.985); transition-duration: .09s; }

.ghost {
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
  box-shadow: var(--sh-sm);
}
.ghost:hover { border-color: #c9d6ec; transform: translateY(-2px); box-shadow: var(--sh-md); }
.ghost:active { transform: translateY(0) scale(.985); }

.arrow { font-size: 18px; transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.play-mini {
  position: relative;
  width: 22px; height: 22px;
  border: 2px solid currentColor;
  border-radius: 50%;
  flex: 0 0 auto;
}
.play-mini::after {
  content: "";
  position: absolute;
  left: 8px; top: 5.5px;   /* optical, not mathematical */
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  border-left: 7px solid currentColor;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  color: var(--blue);
  border-bottom: 1.5px solid rgba(8, 108, 255, .3);
  padding-bottom: 2px;
  transition: gap .2s var(--ease), border-color .2s var(--ease);
}
.link-arrow::after { content: "→"; transition: transform .2s var(--ease); }
.link-arrow:hover { border-color: var(--blue); }
.link-arrow:hover::after { transform: translateX(3px); }

/* ============================================================
   SHARED SECTION FURNITURE
   ============================================================ */

.section { padding-block: 104px 112px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.eyebrow.light { color: #7fb0ff; }

.pulse {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.pulse::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: .45;
  animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping {
  0%   { transform: scale(.6); opacity: .5; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(32px, 4.4vw, 50px); font-weight: 800; }
.section-sub {
  margin-top: 18px;
  max-width: 62ch;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

.section-head.split {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 40px;
  align-items: end;
  max-width: none;
}
.section-head.split .section-sub { margin-top: 0; padding-bottom: 6px; }

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  /* .hero-glow is 900px wide on a negative offset — deliberately larger than the
     section. Unclipped it extends the document box, and on a phone in RTL the
     browser then anchors the scroll to the right, so the page opens on a band of
     empty white with the content pushed off-screen.

     `clip`, not `hidden`: `hidden` would make .hero a scroll container, which
     breaks position:sticky descendants and can trap scroll anchoring. Every other
     decorated section (.ledger, .cta) already clips. */
  overflow-x: clip;
  padding-top: 56px;
  padding-bottom: 8px;
  background: #fff;   /* matches the baked-in white of hero-phones.png */
}

/* Kept off the right-hand column on purpose: hero-phones.png has an opaque
   white background, so any tint behind it shows up as a hard rectangle seam. */
.hero-glow {
  position: absolute;
  left: -220px; top: -160px;
  width: 900px; height: 760px;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(8, 108, 255, .11), transparent 70%),
    radial-gradient(closest-side, rgba(123, 92, 255, .08), transparent 68%);
  background-position: 30% 34%, 66% 68%;
  background-size: 66% 76%, 58% 66%;
  background-repeat: no-repeat;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(360px, 470px) 1fr;
  gap: 24px;
  align-items: center;
  min-height: 560px;
}

.hero-copy { position: relative; z-index: 2; }

h1 {
  margin: 0 0 24px;
  font-size: clamp(52px, 6.6vw, 86px);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .95;
}

.lead {
  max-width: 40ch;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.68;
}
.lead strong { color: var(--ink); font-weight: 700; }

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
}

.stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
}
.stores-label {
  color: var(--muted-2);
  font-size: 13px;
  font-weight: 600;
}

.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 15px 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--sh-sm);
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease);
}
.store:hover { transform: translateY(-2px); border-color: #cfdcf1; box-shadow: var(--sh-md); }
.store svg { width: 22px; height: 22px; fill: var(--ink); flex: 0 0 auto; }
.store span {
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
}
.store small {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted-2);
  text-transform: uppercase;
}
.store.dark {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: none;
  color: #fff;
}
.store.dark svg { fill: #fff; }
.store.dark small { color: #93a5cc; }
.store.dark:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }

.hero-art {
  position: relative;
  min-height: 580px;
}

/* Constrain by HEIGHT, not width. Sizing by width let the rendered height
   exceed .hero-art, which pushed the phones under the fact strip and clipped
   their tops. Height-first keeps the whole render inside the box at any width. */
.hero-phones {
  position: absolute;
  z-index: 1;
  height: min(100%, 566px);
  width: auto;
  max-width: none;
  right: -2%;
  top: 50%;
  transform: translateY(-50%);
}

.dot-field {
  position: absolute;
  z-index: 0;
  right: 4%; top: 16%;
  width: 118px; height: 118px;
  opacity: .5;
  background-image: radial-gradient(#c9d8f2 1.5px, transparent 1.5px);
  background-size: 12px 12px;
}

/* Floating proof chips — overlap the art for depth */
.chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 13px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: var(--sh-lg);
}
.chip strong { display: block; font-family: Outfit, sans-serif; font-size: 15px; font-weight: 800; line-height: 1.15; }
.chip small { display: block; color: var(--muted); font-size: 12px; }

.chip-earn { left: -4%; top: 20%; }
.chip-clear { right: 6%; bottom: 16%; }

.chip-coin {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffd875, var(--gold) 62%, #e08f00);
  box-shadow: 0 4px 10px rgba(255, 177, 15, .45);
  flex: 0 0 auto;
}
.chip-tick {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(34, 197, 94, .14);
  color: var(--green);
  font-size: 15px;
  font-weight: 800;
  flex: 0 0 auto;
}

.float-a { animation: floaty 6.5s ease-in-out infinite; }
.float-b { animation: floaty 7.5s ease-in-out .8s infinite; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* Fact strip under the hero */
.hero-facts {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #fff, var(--soft));
  box-shadow: var(--sh-md);
  overflow: hidden;
}
.hero-facts li {
  padding: 26px 28px;
  border-right: 1px solid var(--line-2);
  transition: background .25s var(--ease);
}
.hero-facts li:last-child { border-right: 0; }
.hero-facts li:hover { background: var(--blue-wash); }
.hero-facts strong {
  display: block;
  font-family: var(--font-ui);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--ink);
}
.hero-facts span {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 13.5px;
}

/* ============================================================
   HOW IT WORKS — staggered, not three equal columns
   ============================================================ */

.how { background: linear-gradient(180deg, #fff 0%, var(--soft) 100%); }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 34px 30px 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.step:nth-child(2) { transform: translateY(26px); }
.step:nth-child(3) { transform: translateY(52px); }
.step:hover { border-color: #cddcf4; box-shadow: var(--sh-lg); transform: translateY(-6px); }
.step:nth-child(2):hover { transform: translateY(20px); }
.step:nth-child(3):hover { transform: translateY(46px); }

.step-num {
  position: absolute;
  right: 26px; top: 24px;
  font-family: var(--font-ui);
  font-size: 46px;
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--blue);
  opacity: .12;
}

.step-icon {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin-bottom: 22px;
  border-radius: 17px;
  background: linear-gradient(150deg, var(--blue-lift), var(--blue-deep));
  box-shadow: 0 0 0 9px var(--blue-wash), var(--sh-blue);
}
.step-icon svg {
  width: 30px; height: 30px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.step-icon svg .fill { fill: #fff; stroke: none; }

.step h3 { font-size: 22px; font-weight: 800; margin-bottom: 10px; }
.step p { color: var(--muted); font-size: 15px; line-height: 1.62; }

/* ============================================================
   TASK BENTO — asymmetric grid
   ============================================================ */

.tasks { padding-top: 150px; background: var(--soft); }

.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.tile {
  grid-column: span 2;   /* rows must total 6: 4+2, then 2+2+2 */
  display: flex;
  flex-direction: column;
  padding: 30px 28px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.tile:hover { transform: translateY(-5px); border-color: #cddcf4; box-shadow: var(--sh-lg); }

.tile-lead { grid-column: span 4; }
.tile-wide { grid-column: span 2; }

.tile-icon {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  margin-bottom: 20px;
  border-radius: 14px;
}
.tile-icon svg {
  width: 26px; height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tile-icon svg .fill { fill: currentColor; stroke: none; }
.tile-icon.blue   { background: var(--blue-wash); color: var(--blue); }
.tile-icon.violet { background: #f0edff; color: var(--violet); }
.tile-icon.gold   { background: var(--gold-soft); color: #b97c00; }
.tile-icon.green  { background: #e6f9ee; color: #12924a; }

.tile h3 { font-size: 20px; font-weight: 800; margin-bottom: 9px; }
.tile p { color: var(--muted); font-size: 14.5px; line-height: 1.6; flex: 1; }
.tile-lead h3 { font-size: 24px; }

.tile-pay {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 20px;
  padding: 7px 13px;
  border-radius: 8px;
  background: var(--blue-wash);
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
}

/* ============================================================
   LEDGER — the signature dark zone
   ============================================================ */

.ledger {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1000px 520px at 78% 8%, rgba(8, 108, 255, .30), transparent 62%),
    linear-gradient(165deg, var(--navy) 0%, #081130 45%, #0b1a44 100%);
  color: #fff;
}
.ledger h2 { color: #fff; font-size: clamp(32px, 4.4vw, 50px); font-weight: 800; }
.ledger h2 em { color: var(--gold); }
.ledger > .wrap > .ledger-copy > p { color: #b7c4e4; }

.ledger-orbit {
  position: absolute;
  right: -160px; top: -120px;
  width: 620px; height: 620px;
  border-radius: 50%;
  border: 1px solid rgba(140, 180, 255, .16);
  box-shadow:
    inset 0 0 0 90px transparent,
    0 0 0 90px rgba(140, 180, 255, .05),
    0 0 0 180px rgba(140, 180, 255, .03);
  pointer-events: none;
}

.ledger-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 72px;
  align-items: center;
}

.ledger-copy p {
  margin-top: 20px;
  max-width: 52ch;
  color: #b7c4e4;
  font-size: 17px;
  line-height: 1.7;
}

.ledger-bar {
  display: flex;
  gap: 4px;
  height: 20px;
  margin-top: 40px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--navy-line);
}
/* Fills when the section is SEEN, not when the document loads — this section is
   most of a page down, so a load-time animation is over before anyone gets here. */
.seg {
  width: var(--w);
  border-radius: 9px;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.1s var(--ease-expo);
}
.ledger-bar.in .seg { transform: scaleX(1); }
.ledger-bar.in .seg-pending { transition-delay: .18s; }
.seg-available { background: linear-gradient(90deg, var(--blue-lift), var(--blue)); box-shadow: 0 0 18px rgba(47, 139, 255, .5); }
.seg-pending { background: linear-gradient(90deg, var(--gold), #e59500); box-shadow: 0 0 18px rgba(255, 177, 15, .4); }

.ledger-legend {
  display: flex;
  gap: 28px;
  margin-top: 16px;
  color: #93a5cc;
  font-size: 14px;
}
.ledger-legend strong { color: #fff; font-weight: 700; }
.dot {
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: 1px;
}
.dot-available { background: var(--blue-lift); }
.dot-pending { background: var(--gold); }

.states { position: relative; padding-left: 6px; }
.states::before {
  content: "";
  position: absolute;
  left: 12px; top: 16px; bottom: 16px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.22), rgba(255,255,255,.05));
}
.states li {
  position: relative;
  display: flex;
  gap: 22px;
  padding: 18px 0;
}
.state-dot {
  position: relative;
  z-index: 1;
  width: 25px; height: 25px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid;
  background: var(--navy-2);
  flex: 0 0 auto;
}
.state-dot.pending   { border-color: var(--gold); box-shadow: 0 0 0 5px rgba(255,177,15,.10); }
.state-dot.cleared   { border-color: var(--green); box-shadow: 0 0 0 5px rgba(34,197,94,.10); }
.state-dot.available { border-color: var(--blue-lift); box-shadow: 0 0 0 5px rgba(47,139,255,.12); }
.state-dot.redeemed  { border-color: #7f8db3; box-shadow: 0 0 0 5px rgba(127,141,179,.10); }

.states h4 { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 5px; }
.states p { color: #9fb0d6; font-size: 14.5px; line-height: 1.6; }

/* ============================================================
   REWARDS
   ============================================================ */

.rewards { background: #fff; }

.reward-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.reward {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.reward:hover { transform: translateY(-5px); border-color: #cddcf4; box-shadow: var(--sh-lg); }
.reward.soon { background: var(--soft); }

.reward-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.reward-mark {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  color: #fff;
  flex: 0 0 auto;
}
.reward-mark svg {
  width: 24px; height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reward-mark.card { background: linear-gradient(145deg, #3d8bff, #0a52d6); box-shadow: 0 6px 16px rgba(8,108,255,.28); }
.reward-mark.sim  { background: linear-gradient(145deg, #ffc94a, #e08f00); box-shadow: 0 6px 16px rgba(255,177,15,.32); }
.reward-mark.game { background: linear-gradient(145deg, #9b83ff, #5b3ce0); box-shadow: 0 6px 16px rgba(123,92,255,.28); }
.reward-mark.cash { background: linear-gradient(145deg, #c6d1e4, #93a1bb); }

.reward-rate {
  padding: 5px 11px;
  border-radius: 7px;
  background: var(--blue-wash);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.reward-rate.muted { background: #eef1f7; color: var(--muted); }

.reward h3 { font-size: 19px; font-weight: 800; margin-bottom: 9px; }
.reward p { color: var(--muted); font-size: 14.5px; line-height: 1.6; }

/* ============================================================
   TRUST
   ============================================================ */

.trust { background: var(--soft); }

.trust-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 72px;
  align-items: start;
}
.trust-copy { position: sticky; top: 110px; }
.trust-copy h2 { font-size: clamp(30px, 3.9vw, 44px); font-weight: 800; }

.trust-list { display: grid; gap: 14px; }
.trust-list li {
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--sh-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.trust-list li:hover { transform: translateX(5px); box-shadow: var(--sh-md); }
.trust-list h4 { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.trust-list p { color: var(--muted); font-size: 15px; line-height: 1.62; }

/* ============================================================
   FOR BUSINESS
   ============================================================ */

.business {
  background: linear-gradient(160deg, #0a1330 0%, #0d1c47 60%, #102456 100%);
  color: #fff;
}
.business h2 { color: #fff; font-size: clamp(30px, 4vw, 46px); font-weight: 800; }
.business h2 em { color: #6fa8ff; }

.business-inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 68px;
  align-items: center;
}
.business-copy > p {
  margin-top: 20px;
  max-width: 54ch;
  color: #b7c4e4;
  font-size: 17px;
  line-height: 1.7;
}

.business-points { display: grid; gap: 12px; margin: 30px 0 34px; }
.business-points li {
  position: relative;
  padding-left: 32px;
  color: #cfdaf2;
  font-size: 15.5px;
}
.business-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(47, 139, 255, .18);
  border: 1px solid rgba(111, 168, 255, .5);
}
.business-points li::after {
  content: "";
  position: absolute;
  left: 6px; top: 11px;
  width: 5px; height: 8px;
  border-right: 2px solid #6fa8ff;
  border-bottom: 2px solid #6fa8ff;
  transform: rotate(42deg);
}

.business-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; }
.business-actions .link-arrow { color: #8fbaff; border-color: rgba(143, 186, 255, .35); }
.business-actions .link-arrow:hover { border-color: #8fbaff; }

.business-panel {
  padding: 28px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--navy-line);
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 70px rgba(3, 8, 26, .5);
}
.panel-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 22px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
}
.panel-head span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .16);
}

.panel-ribbon {
  display: flex;
  gap: 4px;
  height: 16px;
  padding: 3px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .25);
}
.panel-ribbon i { width: var(--w); border-radius: 8px; background: linear-gradient(90deg, var(--blue-lift), var(--blue)); }
.panel-ribbon i.held { background: linear-gradient(90deg, var(--gold), #dd9200); }
.panel-ribbon i.rest { background: rgba(255, 255, 255, .12); }

.panel-legend {
  display: flex;
  justify-content: space-between;
  margin: 12px 0 22px;
  color: #93a5cc;
  font-size: 12.5px;
}

.panel-rows { display: grid; gap: 1px; background: var(--navy-line); border-radius: var(--r-sm); overflow: hidden; }
.panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: rgba(10, 19, 48, .75);
  font-size: 14px;
  color: #b7c4e4;
}
.panel-row strong { font-family: Outfit, sans-serif; font-size: 16px; color: #fff; }

/* ============================================================
   FAQ — side-by-side, no accordion
   ============================================================ */

.faq { background: #fff; }

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.qa {
  padding: 32px 34px;
  background: #fff;
  transition: background .25s var(--ease);
}
.qa:hover { background: var(--soft); }
.qa h4 { font-size: 18px; font-weight: 800; margin-bottom: 10px; }
.qa p { color: var(--muted); font-size: 15px; line-height: 1.65; }

/* ============================================================
   DOWNLOAD CTA
   ============================================================ */

.cta {
  position: relative;
  overflow: hidden;
  padding-block: 92px;
  background:
    radial-gradient(760px 420px at 12% 0%, rgba(8, 108, 255, .28), transparent 60%),
    linear-gradient(150deg, #02091f 0%, var(--navy) 55%, #0a1738 100%);
  color: #fff;
}

.cta-rings {
  position: absolute;
  right: -180px; top: 50%;
  width: 560px; height: 560px;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid rgba(120, 165, 255, .13);
  box-shadow:
    0 0 0 70px rgba(120, 165, 255, .035),
    0 0 0 140px rgba(120, 165, 255, .025),
    0 0 0 210px rgba(120, 165, 255, .015);
  pointer-events: none;
}

.cta-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  align-items: center;
}
.cta h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; color: #fff; margin-bottom: 14px; }
.cta-copy > p { color: #b7c4e4; font-size: 17.5px; max-width: 46ch; }

.cta-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 26px;
}
.cta-form input {
  flex: 1 1 260px;
  height: 52px;
  padding-inline: 18px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.cta-form input::placeholder { color: #7b8bb4; }
.cta-form input:focus {
  outline: none;
  border-color: var(--blue-lift);
  background: rgba(255, 255, 255, .11);
  box-shadow: 0 0 0 4px rgba(47, 139, 255, .18);
}
.cta-form input.invalid { border-color: #ff7a7a; box-shadow: 0 0 0 4px rgba(255, 122, 122, .15); }

.form-msg {
  flex: 1 0 100%;
  min-height: 20px;
  font-size: 13.5px;
  color: #8fbaff;
}
.form-msg.error { color: #ff9c9c; }

.cta-stores { display: flex; flex-wrap: wrap; gap: 12px; }

.cta-brand {
  display: flex;
  align-items: center;
  gap: 26px;
}
.cta-brand img {
  width: 128px; height: 128px;
  border-radius: 28px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .45);
  flex: 0 0 auto;
}
.cta-brand h3 {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -.035em;
  margin-bottom: 8px;
  color: #fff;
}
.cta-brand em { color: var(--blue-lift); }
.cta-brand p { color: #a9b8dc; font-size: 14.5px; }

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  padding-block: 68px 0;
  background: #fff;
  border-top: 1px solid var(--line);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr .8fr .9fr .8fr;
  gap: 48px;
  padding-bottom: 52px;
}

.foot-brand { max-width: 34ch; }
.foot-brand .brand { margin-bottom: 18px; }
.foot-brand p { color: var(--muted); font-size: 14.5px; line-height: 1.65; }

.social { display: flex; gap: 12px; margin-top: 22px; }
.social a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.social a:hover { transform: translateY(-2px); background: var(--blue); border-color: var(--blue); color: #fff; }
.social svg { width: 17px; height: 17px; fill: currentColor; }
.social svg.stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.foot-col { display: flex; flex-direction: column; gap: 11px; font-size: 14.5px; color: var(--muted); }
.foot-col h4 {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.foot-col a { transition: color .2s var(--ease); width: fit-content; }
.foot-col a:hover { color: var(--blue); }

.foot-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 24px 30px;
  border-top: 1px solid var(--line-2);
  color: var(--muted-2);
  font-size: 13px;
}
.foot-legal { max-width: 60ch; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: minmax(320px, 420px) 1fr; }
  .ledger-grid, .business-inner, .trust-grid { grid-template-columns: 1fr; gap: 48px; }
  .trust-copy { position: static; }
  .cta-inner { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .foot-brand { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 900px) {
  .section { padding-block: 76px 84px; }
  .tasks { padding-top: 84px; }
  .nav-links {
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 20px;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-md);
    display: none;
  }
  .nav-links.open { display: flex; }
  /* Surfaced here because .nav-actions hides it below 620px. */
  .nav-links .login-mobile { display: block; }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--line-2); font-size: 16px; }
  .nav-links a::after { display: none; }
  .burger { display: block; }
  .login { display: none; }
  .nav { grid-template-columns: 1fr auto; }

  .hero-grid { grid-template-columns: 1fr; gap: 8px; }
  .hero-art { min-height: 440px; order: 2; }
  .hero-phones { width: 108%; right: -4%; }
  .chip-earn { left: 0; top: 12%; }
  .chip-clear { right: 0; bottom: 10%; }

  .hero-facts { grid-template-columns: repeat(2, 1fr); }
  .hero-facts li:nth-child(2) { border-right: 0; }
  .hero-facts li:nth-child(-n+2) { border-bottom: 1px solid var(--line-2); }

  .steps { grid-template-columns: 1fr; gap: 18px; }
  .step:nth-child(2), .step:nth-child(3) { transform: none; }
  .step:nth-child(2):hover, .step:nth-child(3):hover { transform: translateY(-6px); }

  .bento { grid-template-columns: 1fr 1fr; }
  .tile, .tile-lead, .tile-wide { grid-column: span 2; }

  .reward-row { grid-template-columns: 1fr 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .section-head.split { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .ledger-grid { gap: 40px; }
}

@media (max-width: 620px) {
  :root { --pad: 18px; }

  /* The nav is `auto 1fr auto`; at 360px the brand plus the three action items
     exceed the row and push the document wider than the viewport, which in RTL
     shows as a band of empty white on the left. Shrink the row rather than let
     it overflow: the login link lives in the burger menu on mobile, and grid /
     flex children get min-width:0 so they may actually shrink below content
     size (the default `auto` is what makes flex items refuse to). */
  .nav { gap: 10px; }
  .nav > *, .nav-actions > * { min-width: 0; }
  .nav-actions { gap: 10px; }
  .nav-actions .login { display: none; }
  .brand { font-size: 17px; gap: 8px; }
  .brand-logo { width: 36px; height: 36px; border-radius: 10px; }
  .btn.compact { height: 40px; padding-inline: 14px; font-size: 13px; }
  .lang { padding: 5px 8px; font-size: 12px; }
  .ribbon-inner { flex-direction: column; gap: 6px; padding-block: 10px; }
  .ribbon p { font-size: 12.5px; }
  h1 { font-size: clamp(44px, 13vw, 60px); }
  .hero { padding-top: 36px; }
  .hero-art { min-height: 330px; }
  .hero-buttons .btn { flex: 1 1 100%; }
  .hero-facts { grid-template-columns: 1fr; }
  .hero-facts li { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .hero-facts li:last-child { border-bottom: 0; }
  .chip { padding: 9px 14px 9px 10px; transform: scale(.86); transform-origin: left center; }
  .chip-clear { transform-origin: right center; }
  .bento, .reward-row { grid-template-columns: 1fr; }
  .tile, .tile-lead, .tile-wide { grid-column: span 1; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-brand { flex-direction: column; align-items: flex-start; gap: 18px; }
  .cta-brand img { width: 96px; height: 96px; }
  .qa { padding: 26px 22px; }
  .foot-base { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   MOTION
   The thesis of the product is that points MATURE — value in motion,
   not value at rest. So the signature moment is the ledger bar filling
   as it enters view, with the balances counting up beside it. Everything
   else is feedback and is deliberately quieter.
   ============================================================ */

/* ── Scroll progress ───────────────────────────────────────── */
.progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 300;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--blue), var(--blue-lift), var(--gold));
  pointer-events: none;
  will-change: transform;
}

/* ── Headline: each line rises out of its own mask ─────────── */
.lines.reveal { opacity: 1; transform: none; transition: none; }

.lines .line {
  display: block;
  overflow: hidden;
  /* Arabic descenders (ج ح خ ع) sit below the line box and would be clipped. */
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.lines .line > i {
  display: block;
  font-style: normal;
  transform: translateY(108%);
  transition: transform .95s var(--ease-expo);
}
.lines.in .line > i { transform: none; }
.lines.in .line:nth-child(2) > i { transition-delay: .09s; }
.lines.in .line:nth-child(3) > i { transition-delay: .18s; }

/* ── Hero art drifts slower than the page ──────────────────── */
.hero-phones {
  transform: translateY(calc(-50% + var(--py, 0px)));
  will-change: transform;
}

/* ── Nav condenses once you leave the top ──────────────────── */
.nav { transition: min-height .3s var(--ease); }
.nav-shell.stuck .nav { min-height: 64px; }
.nav-shell.stuck .brand-logo { transform: scale(.86); }

/* ── Cards light up under the cursor ───────────────────────── */
.tile, .reward { position: relative; isolation: isolate; overflow: hidden; }
.tile::before, .reward::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
              rgba(8, 108, 255, .09), transparent 62%);
  transition: opacity .35s var(--ease);
}
.tile:hover::before, .reward:hover::before { opacity: 1; }

/* ── Ledger states light up in sequence: the maturation itself ─ */
.states.in .state-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  color: inherit;
  opacity: 0;
  animation: state-ping 2.6s var(--ease) infinite;
}
.states.in li:nth-child(1) .state-dot::after { animation-delay: 0s; }
.states.in li:nth-child(2) .state-dot::after { animation-delay: .45s; }
.states.in li:nth-child(3) .state-dot::after { animation-delay: .9s; }
.states.in li:nth-child(4) .state-dot::after { animation-delay: 1.35s; }
.state-dot.pending::after { color: var(--gold); }
.state-dot.cleared::after { color: var(--green); }
.state-dot.available::after { color: var(--blue-lift); }
.state-dot.redeemed::after { color: #7f8db3; }

@keyframes state-ping {
  0%   { transform: scale(.75); opacity: .55; }
  55%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* ── Campaign ribbon fills on view too ─────────────────────── */
.panel-ribbon i {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s var(--ease-expo);
}
.panel-ribbon.in i { transform: scaleX(1); }
.panel-ribbon.in i:nth-child(2) { transition-delay: .12s; }
.panel-ribbon.in i:nth-child(3) { transition-delay: .24s; }

/* ── Counting numbers hold their width so nothing reflows ──── */
[data-count] { font-variant-numeric: tabular-nums; }

/* ── Form feedback ─────────────────────────────────────────── */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px); }
}
.cta-form input.invalid { animation: shake .38s var(--ease-quint); }

.form-msg { transition: opacity .25s var(--ease); }
.form-msg.sent { animation: msg-in .4s var(--ease-expo) both; }
@keyframes msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ── Coin catches the light ────────────────────────────────── */
.chip-coin { position: relative; overflow: hidden; }
.chip-coin::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .75) 50%, transparent 60%);
  background-size: 250% 100%;
  animation: coin-shine 4.5s var(--ease) infinite;
}
@keyframes coin-shine {
  0%, 62% { background-position: 150% 0; }
  84%     { background-position: -60% 0; }
  100%    { background-position: -60% 0; }
}

/* ============================================================
   ARABIC + RTL
   Arabic is the default language of the site; English is the
   alternate. Everything below is additive — the Latin layout
   above is untouched.
   ============================================================ */

html[lang="ar"] {
  --font-display: "Thmanyah Serif Display", "Thmanyah Sans", Georgia, serif;
  --font-body: "Thmanyah Sans", "Segoe UI", system-ui, sans-serif;
  --font-ui: "Thmanyah Sans", system-ui, sans-serif;
}

/* Arabic is a connected script: negative tracking breaks the joins, and the
   Latin line-heights sit too tight once you add ascenders and descenders. */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 { letter-spacing: 0; line-height: 1.24; }
html[lang="ar"] h1 { letter-spacing: 0; line-height: 1.14; }
html[lang="ar"] p,
html[lang="ar"] .lead,
html[lang="ar"] .section-sub { line-height: 1.78; }
html[lang="ar"] .eyebrow { letter-spacing: .04em; }
html[lang="ar"] .foot-col h4 { letter-spacing: .02em; }
html[lang="ar"] .ribbon-tag { letter-spacing: .02em; }

/* The wordmark stays Latin in every language. */
.brand-word { font-family: Outfit, sans-serif; letter-spacing: -.02em; }

.lang {
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.lang:hover { color: var(--blue); border-color: #c9d6ec; }

/* ── Mirrored geometry ────────────────────────────────────── */
[dir="rtl"] .skip { left: auto; right: 16px; }
[dir="rtl"] .hero-glow { left: auto; right: -220px; }
[dir="rtl"] .hero-phones { right: auto; left: -2%; }
[dir="rtl"] .dot-field { right: auto; left: 4%; }
[dir="rtl"] .chip-earn { left: auto; right: -4%; }
[dir="rtl"] .chip-clear { right: auto; left: 6%; }
[dir="rtl"] .hero-facts li { border-right: 0; border-left: 1px solid var(--line-2); }
[dir="rtl"] .hero-facts li:last-child { border-left: 0; }
[dir="rtl"] .step-num { right: auto; left: 26px; }
[dir="rtl"] .seg { transform-origin: right; }
[dir="rtl"] .dot { margin-right: 0; margin-left: 7px; }
[dir="rtl"] .ledger-orbit { right: auto; left: -160px; }
[dir="rtl"] .states::before { left: auto; right: 12px; }
[dir="rtl"] .cta-rings { right: auto; left: -180px; }
[dir="rtl"] .trust-list li { border-left: 0; border-right: 3px solid var(--blue); }
[dir="rtl"] .trust-list li:hover { transform: translateX(-5px); }
[dir="rtl"] .business-points li { padding-left: 0; padding-right: 32px; }
[dir="rtl"] .business-points li::before { left: auto; right: 0; }
[dir="rtl"] .business-points li::after { left: auto; right: 6px; }
[dir="rtl"] .link-arrow::after { content: "←"; }
[dir="rtl"] .link-arrow:hover::after { transform: translateX(-3px); }
[dir="rtl"] .btn:hover .arrow { transform: translateX(-4px); }

/* Motion has a direction, so it mirrors too. */
[dir="rtl"] .progress { transform-origin: right center; }
[dir="rtl"] .seg,
[dir="rtl"] .panel-ribbon i { transform-origin: right; }
[dir="rtl"] .primary { background-position: 0 0, -50% 0; }
[dir="rtl"] .primary:hover { background-position: 0 0, 150% 0; }

@media (max-width: 900px) {
  [dir="rtl"] .chip-earn { left: auto; right: 0; }
  [dir="rtl"] .chip-clear { right: auto; left: 0; }
  [dir="rtl"] .hero-facts li { border-left: 0; }
  [dir="rtl"] .chip { transform-origin: right center; }
  [dir="rtl"] .chip-clear { transform-origin: left center; }
}

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */

@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; }
  .float-a, .float-b { animation: none; }

  /* Show the end state of everything that animates in, rather than nothing. */
  .lines .line > i { transform: none; }
  .seg, .panel-ribbon i { transform: scaleX(1); }
  .hero-phones { --py: 0px; }
  .progress { display: none; }
  .chip-coin::after,
  .states.in .state-dot::after,
  .pulse::after { display: none; }
  .tile::before, .reward::before { display: none; }
}