/* ==========================================================================
   Afrah Landing — Design System
   ========================================================================== */

:root {
  /* Brand: a soft coral for solid accents (the full-strength coral stays in
     the logo gradient), with the logo's magenta as the second colour */
  --primary: #ff8a76;
  --primary-dark: #e86e5a;
  --primary-light: #ffd0c8;
  --primary-50: #fff4f3;
  --secondary: #b917a6;
  --secondary-dark: #8e1280;

  /* Logo colours — the wordmark runs coral to magenta */
  --coral: #ff6349;
  --magenta: #b917a6;
  --magenta-50: #fbeaf8;
  --magenta-dark: #8e1280;
  --coral-dark: #e0472f;
  --coral-50: #fff0ec;
  --brand-grad: linear-gradient(135deg, var(--coral) 0%, var(--magenta) 100%);
  --brand-grad-dark: linear-gradient(135deg, var(--coral-dark) 0%, var(--magenta-dark) 100%);

  /* Neutrals */
  --ink: #2d2d2d;
  --ink-soft: #6b6b6b;
  --ink-faint: #9e9e9e;
  --surface: #ffffff;
  --bg: #fff7f4;
  --bg-warm: #ffe4dc;
  --border: #ececec;

  /* Effects */
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --shadow: 0 4px 20px rgba(45, 45, 45, 0.06);
  --shadow-md: 0 10px 30px rgba(45, 45, 45, 0.08);
  --shadow-lg: 0 24px 60px rgba(45, 45, 45, 0.12);
  --ring: rgba(255, 99, 73, 0.3);

  /* Type */
  --font: "IBM Plex Sans Arabic", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Layout */
  --maxw: 1140px;
  --maxw-narrow: 760px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html {
    overflow-x: clip;
  }
}

body {
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(900px 500px at 80% -5%, var(--bg-warm) 0%, transparent 55%),
    radial-gradient(700px 400px at 10% 10%, var(--bg-warm) 0%, transparent 50%),
    linear-gradient(180deg, var(--bg) 0%, #fff 40%);
  background-attachment: fixed;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

ul {
  list-style: none;
}

/* ============================ UTILITIES ============================ */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container--narrow {
  max-width: var(--maxw-narrow);
}

.section {
  padding: 5rem 0;
}

.section__head {
  text-align: center;
  margin-bottom: 3rem;
}

.section__eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--coral-dark);
  margin-bottom: 0.75rem;
}

.section__title {
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.section__subtitle {
  margin-top: 0.75rem;
  color: var(--ink-soft);
  font-size: 1.05rem;
  max-width: 56ch;
  margin-inline: auto;
}

/* ============================ BUTTONS ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.btn--primary {
  background: var(--brand-grad);
  color: #fff;
  box-shadow: 0 6px 20px var(--ring);
}

.btn--primary:hover {
  background: var(--brand-grad-dark);
  box-shadow: 0 8px 28px var(--ring);
  transform: translateY(-2px);
}

.btn--primary:active {
  transform: translateY(0);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}

.btn--ghost:hover {
  border-color: var(--magenta);
  color: var(--magenta);
  background: var(--magenta-50);
}

.btn--sm {
  padding: 0.55rem 1.25rem;
  font-size: 0.9rem;
}

/* ============================ BADGE ============================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: var(--coral-50);
  color: var(--coral-dark);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: 1.5rem;
}

/* ============================ NAVBAR ============================ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.navbar.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 2px 20px rgba(45, 45, 45, 0.04);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  gap: 1rem;
}

.nav__links {
  display: flex;
  gap: 1.75rem;
}

.nav__links a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.15s ease;
  position: relative;
}

.nav__links a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  inset-inline-start: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.2s ease;
}

.nav__links a:hover {
  color: var(--ink);
}

.nav__links a:hover::after {
  width: 100%;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.lang-toggle {
  appearance: none;
  border: 1.5px solid var(--magenta);
  background: var(--surface);
  color: var(--magenta);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.lang-toggle:hover {
  background: var(--magenta);
  color: #fff;
}

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav__burger span {
  width: 24px;
  height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav__burger.is-open span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.nav__burger.is-open span:nth-child(2) {
  opacity: 0;
}

.nav__burger.is-open span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* "Download" entry — only shown inside the mobile burger menu */
.nav__mobile-only {
  display: none;
}

/* ============================ BRAND ============================ */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

/* The wordmark is wide and short, so the square SVG carries empty space above
   and below it; pull that back in so the nav and footer keep their height. */
.brand__logo {
  flex-shrink: 0;
  margin-block: -22px;
}

/* ============================ HERO ============================ */
.hero {
  padding: 3rem 0 4rem;
  position: relative;
  overflow: hidden;
}

/* Background video — covers the hero, sits behind content */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* Tint over the video: stronger behind the text side, lighter elsewhere so
   the video stays visible. Text sits in the first grid column (right in RTL,
   left in LTR), so the gradient anchors from that side. */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

html[dir="rtl"] .hero__overlay {
  background:
    linear-gradient(270deg, rgba(255, 247, 244, 0.82) 0%, rgba(255, 247, 244, 0.45) 38%, rgba(255, 247, 244, 0.12) 70%, rgba(255, 247, 244, 0.08) 100%),
    linear-gradient(180deg, rgba(255, 247, 244, 0.2) 0%, transparent 30%, transparent 70%, rgba(255, 247, 244, 0.35) 100%);
}

html[dir="ltr"] .hero__overlay {
  background:
    linear-gradient(90deg, rgba(255, 247, 244, 0.82) 0%, rgba(255, 247, 244, 0.45) 38%, rgba(255, 247, 244, 0.12) 70%, rgba(255, 247, 244, 0.08) 100%),
    linear-gradient(180deg, rgba(255, 247, 244, 0.2) 0%, transparent 30%, transparent 70%, rgba(255, 247, 244, 0.35) 100%);
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: 3rem;
}

.hero__title {
  font-size: clamp(2.2rem, 5.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
}

.hero__title-accent {
  color: var(--coral);
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  padding-bottom: 0.1em;
}

.hero__subtitle {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 0 2rem;
}

.hero__cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.hero__trust {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  flex-direction: column;
}

.trust-item__num {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--coral);
  line-height: 1;
}

.trust-item__label {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 0.25rem;
}

/* Hero visual — phone mockup (background video renders via .hero__video) */
.hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Soft warm glow behind the phone (CSS fallback under the 3D canvas) */
.hero__visual::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(255, 99, 73, 0.22) 0%, rgba(185, 23, 166, 0.12) 45%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
  opacity: 0.7;
}

.hero__visual > * {
  position: relative;
  z-index: 1;
}

/* ============================ PHONE MOCKUP ============================ */
.phone-mockup {
  position: relative;
  width: 280px;
  height: 570px;
  background: #1a1a1a;
  border-radius: 42px;
  padding: 12px;
  box-shadow: var(--shadow-lg), inset 0 0 0 2px #333;
  z-index: 1;
}

.phone-mockup--sm {
  width: 240px;
  height: 490px;
}

.phone-mockup__notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 22px;
  background: #1a1a1a;
  border-radius: 0 0 14px 14px;
  z-index: 2;
}

.phone-mockup__screen {
  width: 100%;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--coral) 0%, var(--magenta) 100%);
}

.phone-screen__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  font-weight: 500;
}

.phone-screen__placeholder--dark {
  background: linear-gradient(160deg, #1a2a3a 0%, #0d1b2a 100%);
}

/* App screenshot filling the phone screen */
.phone-screen__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================ STATS BAR ============================ */
.stats-bar {
  background: #fff;
  color: var(--ink);
  border-block: 1px solid #f8e1dc;
  padding: 2.5rem 0;
  position: relative;
  overflow: hidden;
}

/* Arabic geometric pattern (نقش عربي) — Mashrabiya lattice (مشربية):
   diagonal cross-hatch with knobs at each intersection and a small
   diamond ornament at the center of every tile, evoking traditional
   turned-wood screens. Rendered as a tiled SVG data URL behind the
   stats. Low opacity keeps the numbers readable. */
.stats-bar__pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23ff6349' stroke-width='1.2'%3E%3Cpath d='M0 0 L40 40 M40 0 L0 40'/%3E%3Crect x='14' y='14' width='12' height='12' transform='rotate(45 20 20)'/%3E%3C/g%3E%3Cg fill='%23ff6349'%3E%3Ccircle cx='20' cy='20' r='2.2'/%3E%3Ccircle cx='0' cy='0' r='2.2'/%3E%3Ccircle cx='40' cy='0' r='2.2'/%3E%3Ccircle cx='0' cy='40' r='2.2'/%3E%3Ccircle cx='40' cy='40' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 40px 40px;
  background-repeat: repeat;
  animation: patternDrift 60s linear infinite;
}

/* Slow horizontal drift so the نقش feels alive without distracting */
@keyframes patternDrift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 400px 0;
  }
}

.stats-bar__inner {
  position: relative;
  z-index: 1;
}

.stats-bar__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.stat__num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--coral);
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.15;
}

.stat__label {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ============================ FEATURES ============================ */
.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-light);
}

.feature-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--primary-50) 0%, var(--coral-50) 100%);
  color: var(--coral-dark);
  display: grid;
  place-items: center;
  margin-bottom: 1.25rem;
}

.feature-card__icon svg {
  width: 26px;
  height: 26px;
}

.feature-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.feature-card p {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ============================ CATEGORIES ============================ */
.categories {
  background: linear-gradient(180deg, transparent 0%, var(--primary-50) 50%, transparent 100%);
}

.categories__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.cat-card {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background-image: var(--cat-img);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 1.25rem;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.1) 50%, transparent 100%);
}

.cat-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: var(--shadow-lg);
}

.cat-card__label {
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ============================ HOW IT WORKS ============================ */
.how__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  position: relative;
}

.how__steps::before {
  content: "";
  position: absolute;
  top: 40px;
  inset-inline-start: 16%;
  inset-inline-end: 16%;
  height: 2px;
  background: repeating-linear-gradient(
    to inline-end,
    var(--primary-light) 0 12px,
    transparent 12px 24px
  );
  z-index: 0;
}

.step {
  text-align: center;
  position: relative;
  z-index: 1;
}

.step__num {
  width: 48px;
  height: 48px;
  margin: 0 auto 1.25rem;
  background: var(--brand-grad);
  color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  font-weight: 800;
  box-shadow: 0 0 0 6px var(--surface), 0 6px 20px var(--ring);
}

.step__icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 1rem;
  color: var(--primary);
}

.step__icon svg {
  width: 100%;
  height: 100%;
}

.step h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.step p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  max-width: 32ch;
  margin: 0 auto;
}

/* ============================ PROVIDERS ============================ */
.providers__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 3rem;
}

.providers__lead {
  color: var(--ink-soft);
  font-size: 1.1rem;
  margin: 1rem 0 1.5rem;
}

.providers__list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 2rem;
}

.providers__list li {
  padding-inline-start: 2rem;
  position: relative;
  font-weight: 500;
  color: var(--ink);
}

.providers__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
  width: 22px;
  height: 22px;
  background-color: var(--coral);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"), var(--brand-grad);
  background-size: 14px, 100%;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.providers__visual {
  display: flex;
  justify-content: center;
}

/* ============================ FAQ ============================ */
.faq {
  background: linear-gradient(180deg, transparent, var(--primary-50) 50%, transparent);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.faq-item[open] {
  border-color: var(--primary-light);
  box-shadow: var(--shadow);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  font-weight: 600;
  font-size: 1.02rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  position: relative;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  background: var(--primary);
  border-radius: 2px;
  transition: transform 0.2s ease;
}

.faq-item__icon::before {
  top: 50%;
  left: 4px;
  width: 16px;
  height: 2.5px;
  transform: translateY(-50%);
}

.faq-item__icon::after {
  left: 50%;
  top: 4px;
  width: 2.5px;
  height: 16px;
  transform: translateX(-50%);
}

.faq-item[open] .faq-item__icon::after {
  transform: translateX(-50%) scaleY(0);
}

.faq-item__body {
  padding: 0 1.4rem 1.1rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ============================ DOWNLOAD CTA ============================ */
.download-cta {
  background: linear-gradient(120deg, var(--coral) 0%, #e03a5e 55%, var(--magenta) 100%);
  color: #fff;
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}

.download-cta::before {
  content: "";
  position: absolute;
  top: -100px;
  inset-inline-end: -100px;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

.download-cta__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3rem;
  position: relative;
  z-index: 1;
}

.download-cta__text h2 {
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.download-cta__text p {
  font-size: 1.1rem;
  opacity: 0.9;
}

.downloads {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.download-card {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  min-width: 180px;
}

/* QR placeholder */
.qr-placeholder {
  width: 140px;
  height: 140px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.15) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0 6px, transparent 6px 12px),
    rgba(255, 255, 255, 0.95);
  border: 1px dashed rgba(255, 255, 255, 0.4);
  color: #999;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
}

.qr {
  width: 140px;
  height: 140px;
  border-radius: var(--radius-sm);
  display: block;
}

/* Store buttons */
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  border-radius: var(--radius-sm);
  padding: 0.65rem 1.1rem;
  min-width: 175px;
  font-weight: 600;
  transition: transform 0.1s ease, filter 0.18s ease;
}

.store-btn__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.store-btn__copy {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: start;
}

.store-btn__small {
  font-size: 0.68rem;
  opacity: 0.85;
}

.store-btn__big {
  font-size: 1.1rem;
  font-weight: 700;
}

.store-btn--ios {
  background: #000;
  color: #fff;
}

.store-btn--ios:hover {
  filter: brightness(1.2);
}

.store-btn--android {
  background: #01875f;
  color: #fff;
}

.store-btn--android:hover {
  filter: brightness(1.15);
}

.store-btn:active {
  transform: translateY(1px);
}

/* ============================ FOOTER ============================ */
.site-footer {
  background: var(--ink);
  border-top: 4px solid transparent;
  border-image: var(--brand-grad) 1;
  color: rgba(255, 255, 255, 0.8);
  padding: 3rem 0 0;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2.5rem;
}

.site-footer__brand .brand {
  margin-bottom: 0.75rem;
  color: #fff;
}

.site-footer__brand p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 40ch;
}

.site-footer__brand .site-footer__contact {
  margin-top: 1rem;
}

.site-footer__contact a {
  color: #fff;
  font-weight: 500;
  transition: color 0.15s ease;
}

.site-footer__contact a:hover {
  color: #ff8a73;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-content: flex-start;
}

.site-footer__nav a {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.15s ease;
}

.site-footer__nav a:hover {
  color: #ff8a73;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.25rem 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ============================ TOAST ============================ */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #fff;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 200;
  box-shadow: var(--shadow-lg);
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================ SCROLL REVEAL ============================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Reveal variants ── */
.reveal--left {
  transform: translateX(-40px);
}
.reveal--right {
  transform: translateX(40px);
}
.reveal--scale {
  transform: scale(0.9);
}
.reveal--fade {
  transform: none;
}

.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--scale.is-visible,
.reveal--fade.is-visible {
  transform: translateX(0) scale(1);
}

/* ── Staggered children: nth-child delays inside a .stagger container ── */
.stagger > .reveal {
  transition-delay: 0s;
}
.stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.stagger > .reveal:nth-child(2) { transition-delay: 0.08s; }
.stagger > .reveal:nth-child(3) { transition-delay: 0.16s; }
.stagger > .reveal:nth-child(4) { transition-delay: 0.24s; }
.stagger > .reveal:nth-child(5) { transition-delay: 0.32s; }
.stagger > .reveal:nth-child(6) { transition-delay: 0.4s; }
.stagger > .reveal:nth-child(7) { transition-delay: 0.48s; }
.stagger > .reveal:nth-child(8) { transition-delay: 0.56s; }
.stagger > .reveal:nth-child(9) { transition-delay: 0.64s; }
.stagger > .reveal:nth-child(10) { transition-delay: 0.72s; }
.stagger > .reveal:nth-child(11) { transition-delay: 0.8s; }
.stagger > .reveal:nth-child(12) { transition-delay: 0.88s; }

/* Category cards scale into view */
.cat-card.reveal {
  transform: scale(0.9);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.25s ease, box-shadow 0.2s ease;
}
.cat-card.reveal.is-visible {
  transform: scale(1);
}
.cat-card.reveal:hover {
  transform: translateY(-5px) scale(1.02);
}

/* Feature cards: keep hover snappy while reveal fades in smoothly */
.feature-card.reveal {
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.18s ease, border-color 0.18s ease;
}

/* ============================ SCROLL PROGRESS BAR ============================ */
.scroll-progress {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--coral), var(--magenta));
  z-index: 200;
  box-shadow: 0 0 10px rgba(255, 99, 73, 0.55);
  transition: width 0.08s linear;
  will-change: width;
}

/* ============================ HERO ENTRANCE ============================ */
.hero-enter {
  opacity: 0;
  transform: translateY(28px);
  animation: heroEnter 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 0.1s + 0.15s);
}

@keyframes heroEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero visual: opacity-only entrance so its transform stays free for parallax */
.hero-fade-in {
  opacity: 0;
  animation: heroFadeIn 0.8s ease forwards;
  animation-delay: calc(var(--i, 0) * 0.1s + 0.15s);
}

@keyframes heroFadeIn {
  to {
    opacity: 1;
  }
}

/* Phone subtle floating */
.phone-mockup {
  animation: phoneFloat 5.5s ease-in-out infinite;
}

.phone-mockup--sm {
  animation: phoneFloat 5.5s ease-in-out infinite 0.6s;
}

@keyframes phoneFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* Hero badge subtle pulse */
.badge {
  animation: badgePulse 3s ease-in-out infinite;
}

@keyframes badgePulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 99, 73, 0);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 99, 73, 0.12);
  }
}

/* Primary CTA ripple glow (uses ::before so hover box-shadow is untouched) */
.btn--primary {
  position: relative;
}

.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(255, 99, 73, 0.5);
  animation: ctaGlow 2.6s ease-out infinite;
  pointer-events: none;
}

@keyframes ctaGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 99, 73, 0.45);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(255, 99, 73, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 99, 73, 0);
  }
}

/* ============================ ANIMATED STATS BAR ============================ */
.stats-bar {
  background: linear-gradient(110deg, #fff 0%, var(--primary-50) 50%, #fff 100%);
  background-size: 200% 100%;
  animation: statsShift 9s ease-in-out infinite;
}

@keyframes statsShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Count-up completion pop */
.stat__num.is-counted {
  animation: numPop 0.55s ease-out;
}

@keyframes numPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.18);
    color: var(--primary-light);
  }
  100% {
    transform: scale(1);
  }
}

/* ============================ FEATURE CARD SHIMMER ============================ */
.feature-card {
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255, 99, 73, 0.16) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: inset-inline-start 0.75s ease;
  pointer-events: none;
  z-index: 1;
}

.feature-card:hover::before {
  inset-inline-start: 150%;
}

/* Keep card content above the shimmer sweep */
.feature-card > * {
  position: relative;
  z-index: 2;
}

/* ============================ STEP NUMBER PULSE ============================ */
.step__num {
  animation: stepPulse 3s ease-in-out infinite;
}

@keyframes stepPulse {
  0%,
  100% {
    box-shadow: 0 0 0 6px var(--surface), 0 6px 20px var(--ring);
  }
  50% {
    box-shadow: 0 0 0 6px var(--surface), 0 6px 28px rgba(255, 99, 73, 0.4);
  }
}

/* ============================ NAV SCROLLSPY ============================ */
.nav__links a.is-active {
  color: var(--ink);
  font-weight: 600;
}

.nav__links a.is-active::after {
  width: 100%;
}

/* ============================ RTL TWEAKS ============================ */
html[dir="rtl"] .store-btn__copy,
html[dir="rtl"] .faq-item summary {
  text-align: right;
}

html[dir="ltr"] .store-btn__copy {
  text-align: left;
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 900px) {
  .features__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .categories__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero__grid,
  .providers__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .hero__visual {
    order: -1;
  }

  .providers__visual {
    order: -1;
  }

  /* On single-column layouts the horizontal slide variants overflow the
     viewport (translateX shifts content past the edge before reveal).
     Fall back to the default vertical slide on narrow screens. */
  .reveal--left,
  .reveal--right {
    transform: translateY(24px);
  }

  .download-cta__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .downloads {
    justify-content: center;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .section {
    padding: 3.5rem 0;
  }

  .nav__links {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    padding: 1rem 1.5rem 1.5rem;
    gap: 0.5rem;
  }

  .nav__links.is-open {
    display: flex;
  }

  .nav__links a {
    padding: 0.65rem 0;
    font-size: 1.05rem;
  }

  .nav__burger {
    display: flex;
  }

  .nav__cta {
    display: none;
  }

  .nav__mobile-only {
    display: list-item;
  }

  .nav__mobile-only a {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.7rem 1.25rem;
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 700;
    box-shadow: 0 6px 20px var(--ring);
  }

  .features__grid {
    grid-template-columns: 1fr;
  }

  .categories__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .how__steps {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .how__steps::before {
    display: none;
  }

  .stats-bar__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .hero__trust {
    gap: 1.5rem;
  }

  .phone-mockup {
    width: 240px;
    height: 490px;
  }

  .downloads {
    flex-direction: column;
    align-items: center;
  }

  .download-card {
    min-width: 0;
    width: 100%;
    max-width: 280px;
  }
}

@media (max-width: 380px) {
  .categories__grid {
    grid-template-columns: 1fr;
  }

  .stats-bar__inner {
    grid-template-columns: 1fr;
  }
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .hero-enter {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero-fade-in {
    opacity: 1;
    animation: none;
  }

  .phone-mockup,
  .phone-mockup--sm,
  .badge,
  .btn--primary::after,
  .stats-bar,
  .stats-bar__pattern,
  .step__num,
  .stat__num.is-counted {
    animation: none !important;
  }

  .feature-card::before {
    display: none;
  }
}