@charset "UTF-8";
/* ============================================================
   فريد | FARED — Monochromatic Design System
   Single Hue: 220 (derived from brand #164aaf)
   Every surface, border, icon and state is a manipulation of
   Saturation + Lightness on that one hue. No second hue exists.
   ============================================================ */

/* ---------- 1. FONTS ----------
   Subsetted WOFF2 built by tools/seo/build-fonts.sh — 907 KB of raw TTF
   down to 247 KB across four weights. The subset keeps the whole Arabic
   block, both Presentation Forms blocks and every OpenType feature, so
   joining and the lam-alef ligature shape correctly. Regenerate with that
   script after any font change; never hand-edit these files. */
@font-face {
  font-family: "Plex Arabic";
  src: url("../fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Arabic";
  src: url("../fonts/IBMPlexSansArabic-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Arabic";
  src: url("../fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Arabic";
  src: url("../fonts/IBMPlexSansArabic-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- 2. TOKENS ---------- */
:root {
  /* The one and only hue */
  --h: 220;
  --s: 78%;

  /* Monochromatic ramp — brand hue at 11 luminance steps */
  --c-50:  hsl(var(--h) 70% 97%);
  --c-100: hsl(var(--h) 72% 94%);
  --c-200: hsl(var(--h) 74% 87%);
  --c-300: hsl(var(--h) 75% 76%);
  --c-400: hsl(var(--h) 76% 61%);
  --c-500: hsl(var(--h) 78% 49%);
  --c-600: hsl(var(--h) 78% 39%);   /* #164aaf — brand anchor */
  --c-700: hsl(var(--h) 79% 32%);
  --c-800: hsl(var(--h) 80% 25%);
  --c-900: hsl(var(--h) 82% 17%);
  --c-950: hsl(var(--h) 84% 10%);

  /* Semantic surfaces — light theme */
  --bg:        hsl(var(--h) 44% 99%);
  --bg-tint:   hsl(var(--h) 52% 97.4%);
  --surface:   hsl(0 0% 100%);
  --surface-2: hsl(var(--h) 48% 97%);
  --surface-3: hsl(var(--h) 45% 94.5%);
  --line:      hsl(var(--h) 38% 90%);
  --line-soft: hsl(var(--h) 40% 94%);
  --ink:       hsl(var(--h) 48% 12%);
  --ink-2:     hsl(var(--h) 30% 30%);
  /* Tuned so both pass WCAG AA (>=4.5:1) on --bg and --surface,
     while keeping a visible step between them. */
  --muted:     hsl(var(--h) 20% 42%);
  --faint:     hsl(var(--h) 17% 48%);
  --brand:     var(--c-600);
  --brand-ink: hsl(0 0% 100%);
  --on-brand-soft: var(--c-700);

  /* Tonal shadows — shadows carry the hue, never neutral grey */
  --sh-xs: 0 1px 2px hsl(var(--h) 40% 20% / .05);
  --sh-sm: 0 2px 6px hsl(var(--h) 40% 20% / .06);
  --sh-md: 0 8px 24px -6px hsl(var(--h) 45% 22% / .12), 0 2px 6px hsl(var(--h) 40% 20% / .05);
  --sh-lg: 0 22px 50px -14px hsl(var(--h) 50% 22% / .20), 0 6px 16px -6px hsl(var(--h) 40% 20% / .10);
  --sh-xl: 0 40px 90px -20px hsl(var(--h) 55% 20% / .28), 0 12px 28px -10px hsl(var(--h) 45% 20% / .14);
  --glow:  0 0 0 1px hsl(var(--h) 78% 39% / .10), 0 12px 40px -8px hsl(var(--h) 78% 45% / .30);

  /* Geometry */
  --r-xs: 8px;  --r-sm: 12px; --r-md: 16px;
  --r-lg: 22px; --r-xl: 30px; --r-2xl: 40px; --r-full: 999px;

  --container: 1200px;
  --gutter: clamp(18px, 4vw, 40px);
  --section-y: clamp(72px, 9vw, 132px);

  /* Motion */
  --e-out: cubic-bezier(.22, 1, .36, 1);
  --e-io:  cubic-bezier(.65, 0, .35, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .18s var(--e-out);
  --t-med:  .35s var(--e-out);
  --t-slow: .7s var(--e-out);

  --header-h: 74px;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg:        hsl(var(--h) 46% 5.5%);
  --bg-tint:   hsl(var(--h) 44% 7.5%);
  --surface:   hsl(var(--h) 42% 9%);
  --surface-2: hsl(var(--h) 40% 12%);
  --surface-3: hsl(var(--h) 38% 16%);
  --line:      hsl(var(--h) 34% 19%);
  --line-soft: hsl(var(--h) 34% 15%);
  --ink:       hsl(var(--h) 40% 97%);
  --ink-2:     hsl(var(--h) 24% 82%);
  --muted:     hsl(var(--h) 18% 65%);
  --faint:     hsl(var(--h) 16% 57%);
  --brand:     hsl(var(--h) 86% 62%);
  --brand-ink: hsl(var(--h) 60% 8%);
  --on-brand-soft: hsl(var(--h) 82% 72%);

  --sh-xs: 0 1px 2px hsl(var(--h) 60% 2% / .5);
  --sh-sm: 0 2px 8px hsl(var(--h) 60% 2% / .5);
  --sh-md: 0 10px 28px -8px hsl(var(--h) 70% 2% / .6), 0 2px 8px hsl(var(--h) 60% 2% / .4);
  --sh-lg: 0 26px 60px -16px hsl(var(--h) 70% 2% / .7), 0 8px 20px -8px hsl(var(--h) 60% 2% / .5);
  --sh-xl: 0 46px 100px -24px hsl(var(--h) 75% 1% / .8), 0 14px 34px -12px hsl(var(--h) 60% 2% / .6);
  --glow:  0 0 0 1px hsl(var(--h) 86% 62% / .18), 0 14px 46px -10px hsl(var(--h) 86% 55% / .28);
  color-scheme: dark;
}

/* ---------- 3. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}
body {
  font-family: "Plex Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.75;
  font-size: 16.5px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color .4s var(--e-out), color .4s var(--e-out);
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
/* <picture> only exists to offer a WebP source; it must not become a box of
   its own, or it would sit between a flex/grid container and its real child
   and break every `.parent img` rule and every theme-swap display toggle. */
picture { display: contents; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { line-height: 1.28; font-weight: 700; letter-spacing: -.015em; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible {
  outline: 2.5px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: var(--brand); color: var(--brand-ink); }

/* Monochromatic scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-tint); }
::-webkit-scrollbar-thumb {
  background: hsl(var(--h) 40% 70% / .5);
  border-radius: 99px;
  border: 3px solid var(--bg-tint);
}
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* ---------- 4. LAYOUT PRIMITIVES ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.section--tint { background: var(--bg-tint); }
.section--edge { border-block: 1px solid var(--line-soft); }
/* Centred without a transform so it behaves identically in RTL and LTR. */
.skip-link {
  position: fixed; top: -100px; inset-inline: 0;
  width: max-content; max-width: calc(100% - 32px); margin-inline: auto;
  background: var(--brand); color: var(--brand-ink); padding: 12px 26px;
  border-radius: 0 0 var(--r-md) var(--r-md); z-index: 999; font-weight: 600;
  transition: top .25s var(--e-out);
}
.skip-link:focus { top: 0; }

/* ---------- 5. TYPE SCALE ---------- */
.display {
  font-size: clamp(2.15rem, 1.15rem + 4.4vw, 4.5rem);
  line-height: 1.12; font-weight: 700; letter-spacing: -.03em;
}
.h2 { font-size: clamp(1.7rem, 1.1rem + 2.3vw, 2.85rem); line-height: 1.2; letter-spacing: -.025em; }
.h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); }
.lead {
  font-size: clamp(1.02rem, .96rem + .42vw, 1.22rem);
  color: var(--muted); line-height: 1.85; font-weight: 400;
}
.small { font-size: .875rem; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .78rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-brand-soft);
  background: hsl(var(--h) 78% 39% / .07);
  border: 1px solid hsl(var(--h) 78% 45% / .16);
  padding: 7px 15px; border-radius: var(--r-full);
}
[data-theme="dark"] .eyebrow { background: hsl(var(--h) 86% 62% / .10); border-color: hsl(var(--h) 86% 62% / .22); }
[lang="ar"] .eyebrow { letter-spacing: 0; font-size: .82rem; text-transform: none; }
.eyebrow .ico { width: 15px; height: 15px; }

.section-head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(42px, 5vw, 72px); }
.section-head .h2 { margin-block: 18px 16px; }
.section-head--start { text-align: start; margin-inline: 0; }

/* Tonal gradient text — same hue, two luminances */
.grad-ink {
  background: linear-gradient(100deg, var(--c-700) 0%, var(--c-500) 55%, var(--c-600) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
[data-theme="dark"] .grad-ink {
  background-image: linear-gradient(100deg, hsl(var(--h) 90% 78%) 0%, hsl(var(--h) 88% 58%) 55%, hsl(var(--h) 90% 72%) 100%);
}

/* ---------- 6. ICONS (Monochromatic Monoline) ---------- */
.ico {
  width: 22px; height: 22px; flex: none;
  stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  color: var(--brand);
  opacity: .78;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
a:hover > .ico, button:hover > .ico, .hoverable:hover .ico { opacity: 1; }
.ico--ink { color: currentColor; opacity: 1; }

.icon-pad {
  width: 52px; height: 52px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: hsl(var(--h) 78% 39% / .07);
  border: 1px solid hsl(var(--h) 78% 45% / .14);
  color: var(--brand);
  transition: background var(--t-med), border-color var(--t-med), transform var(--t-med);
}
[data-theme="dark"] .icon-pad { background: hsl(var(--h) 86% 62% / .09); border-color: hsl(var(--h) 86% 62% / .18); }
.icon-pad .ico { width: 25px; height: 25px; opacity: .9; }
.hoverable:hover .icon-pad { background: var(--brand); border-color: var(--brand); transform: translateY(-3px); }
.hoverable:hover .icon-pad .ico { color: var(--brand-ink); opacity: 1; }

/* ---------- 7. BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: var(--r-full);
  font-weight: 600; font-size: .96rem; letter-spacing: -.01em;
  border: 1px solid transparent; cursor: pointer; position: relative;
  transition: transform var(--t-fast), background var(--t-med), color var(--t-med),
              border-color var(--t-med), box-shadow var(--t-med);
  white-space: nowrap;
}
.btn .ico { width: 19px; height: 19px; opacity: 1; color: currentColor; }
.btn:active { transform: scale(.97); }

.btn--primary { background: var(--brand); color: var(--brand-ink); box-shadow: var(--glow); }
.btn--primary:hover { background: var(--c-700); box-shadow: 0 16px 40px -10px hsl(var(--h) 78% 40% / .48); transform: translateY(-2px); }
[data-theme="dark"] .btn--primary:hover { background: hsl(var(--h) 88% 70%); }

.btn--ghost {
  background: var(--surface); color: var(--ink);
  border-color: var(--line); box-shadow: var(--sh-xs);
}
.btn--ghost:hover { border-color: hsl(var(--h) 78% 45% / .45); color: var(--brand); transform: translateY(-2px); box-shadow: var(--sh-sm); }

.btn--quiet { background: hsl(var(--h) 78% 39% / .08); color: var(--on-brand-soft); }
.btn--quiet:hover { background: hsl(var(--h) 78% 39% / .14); }
[data-theme="dark"] .btn--quiet { background: hsl(var(--h) 86% 62% / .12); }

.btn--lg { padding: 17px 34px; font-size: 1.02rem; }
.btn--block { width: 100%; }

/* ---------- 8. STORE BADGES (monochrome, hand-built) ---------- */
.store-row { display: flex; flex-wrap: nowrap; gap: 13px; }
.store-badge {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 11px 20px 11px 18px; border-radius: var(--r-md);
  background: var(--ink); color: var(--bg);
  border: 1px solid var(--ink);
  transition: transform var(--t-med), box-shadow var(--t-med), background var(--t-med);
  box-shadow: var(--sh-sm);
  flex: 1;
}
.store-badge:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
[data-theme="dark"] .store-badge { background: var(--surface-3); border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .store-badge:hover { border-color: var(--brand); }
.store-badge svg { width: 26px; height: 26px; fill: currentColor; stroke: none; flex: none; }
.store-badge__txt { display: flex; flex-direction: column; line-height: 1.28; text-align: start; }
.store-badge__top { font-size: .66rem; opacity: .72; letter-spacing: .02em; }
.store-badge__btm { font-size: .98rem; font-weight: 600; }

/* ---------- 9. CARDS ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px;
  position: relative; overflow: hidden;
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.card--hover:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: hsl(var(--h) 78% 45% / .3); }
.card__title { font-size: 1.12rem; font-weight: 600; margin-block: 20px 10px; }
.card__text { color: var(--muted); font-size: .95rem; line-height: 1.8; }

/* Tonal sheen that follows the pointer — hue-locked */
.card--sheen::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none; opacity: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
              hsl(var(--h) 78% 50% / .10), transparent 65%);
  transition: opacity var(--t-med);
}
.card--sheen:hover::before { opacity: 1; }

/* min(Npx, 100%) lets the track shrink below its ideal width on very narrow
   viewports instead of forcing the page to scroll sideways. */
.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(272px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr)); }

/* ---------- 10. HEADER ---------- */
.header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: hsl(var(--h) 44% 99% / .72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: background var(--t-med), border-color var(--t-med), height var(--t-med), box-shadow var(--t-med);
}
[data-theme="dark"] .header { background: hsl(var(--h) 46% 5.5% / .74); }
.header.is-stuck { height: 62px; border-bottom-color: var(--line); box-shadow: var(--sh-sm); }
.header__inner { display: flex; align-items: center; gap: 20px; width: 100%; }
.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand img { height: 36px; width: auto; transition: opacity var(--t-med); }
.brand__logo--dark { display: none; }
[data-theme="dark"] .brand__logo--light { display: none; }
[data-theme="dark"] .brand__logo--dark { display: block; }

.nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.nav a {
  padding: 9px 14px; border-radius: var(--r-full);
  font-size: .93rem; font-weight: 500; color: var(--ink-2);
  transition: color var(--t-fast), background var(--t-fast);
  position: relative;
}
.nav a:hover, .nav a.is-active { color: var(--brand); background: hsl(var(--h) 78% 45% / .08); }
.header__tools { display: flex; align-items: center; gap: 8px; flex: none; }

.icon-btn {
  width: 40px; height: 40px; border-radius: var(--r-full);
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  transition: all var(--t-fast);
}
.icon-btn:hover { color: var(--brand); border-color: hsl(var(--h) 78% 45% / .4); transform: translateY(-1px); }
.icon-btn .ico { width: 19px; height: 19px; color: currentColor; opacity: .85; }

/* Icon-only, same square footprint as the theme toggle — the globe carries
   the meaning, and the accessible name lives in aria-label. */
.lang-btn .ico { width: 18px; height: 18px; }

/* Theme toggle: sun ⇄ moon crossfade */
.theme-toggle .ico { position: absolute; transition: transform .5s var(--e-spring), opacity .3s ease; }
.theme-toggle .ico--moon { opacity: 0; transform: rotate(-70deg) scale(.4); }
[data-theme="dark"] .theme-toggle .ico--sun { opacity: 0; transform: rotate(70deg) scale(.4); }
[data-theme="dark"] .theme-toggle .ico--moon { opacity: 1; transform: none; }

.burger { display: none; }

/* Scroll progress — a single tonal line */
.progress {
  position: fixed; inset-block-start: 0; inset-inline-start: 0; height: 2.5px; width: 100%;
  transform: scaleX(0); transform-origin: var(--pgo, right);
  background: linear-gradient(90deg, var(--c-500), var(--c-700));
  z-index: 101; will-change: transform;
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 120;
  background: var(--bg);
  padding: 22px var(--gutter) 40px;
  display: flex; flex-direction: column; gap: 6px;
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform .45s var(--e-out), opacity .3s ease, visibility .45s;
  overflow-y: auto;
}
.drawer.is-open { transform: none; opacity: 1; visibility: visible; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.drawer a.drawer__link {
  padding: 15px 4px; font-size: 1.16rem; font-weight: 600;
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between;
  opacity: 0; transform: translateY(14px);
}
.drawer.is-open a.drawer__link { animation: drawerIn .5s var(--e-out) forwards; }
.drawer a.drawer__link:nth-child(1) { animation-delay: .06s; }
.drawer a.drawer__link:nth-child(2) { animation-delay: .10s; }
.drawer a.drawer__link:nth-child(3) { animation-delay: .14s; }
.drawer a.drawer__link:nth-child(4) { animation-delay: .18s; }
.drawer a.drawer__link:nth-child(5) { animation-delay: .22s; }
.drawer a.drawer__link:nth-child(6) { animation-delay: .26s; }
.drawer a.drawer__link:nth-child(7) { animation-delay: .30s; }
.drawer a.drawer__link:nth-child(8) { animation-delay: .34s; }
@keyframes drawerIn { to { opacity: 1; transform: none; } }
.drawer__cta { margin-top: 26px; display: grid; gap: 12px; }

/* ---------- 11. HERO ---------- */
.hero {
  position: relative; overflow: hidden;
  padding-block: calc(var(--header-h) + clamp(46px, 7vw, 92px)) clamp(60px, 8vw, 110px);
}
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* Tonal aurora — one hue, three luminances */
.hero__orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.hero__orb--1 {
  width: 620px; height: 620px; inset-block-start: -260px; inset-inline-end: -170px;
  background: radial-gradient(circle, hsl(var(--h) 80% 55% / .32), transparent 70%);
  animation: float1 22s var(--e-io) infinite;
}
.hero__orb--2 {
  width: 500px; height: 500px; inset-block-end: -220px; inset-inline-start: -140px;
  background: radial-gradient(circle, hsl(var(--h) 76% 42% / .26), transparent 70%);
  animation: float2 27s var(--e-io) infinite;
}
.hero__orb--3 {
  width: 380px; height: 380px; inset-block-start: 42%; inset-inline-start: 46%;
  background: radial-gradient(circle, hsl(var(--h) 84% 62% / .18), transparent 70%);
  animation: float1 19s var(--e-io) infinite reverse;
}
[data-theme="dark"] .hero__orb { opacity: .42; }
@keyframes float1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-52px, 46px) scale(1.14); } }
@keyframes float2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(48px, -40px) scale(1.1); } }

/* Hue-locked grid mesh */
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, hsl(var(--h) 40% 45% / .055) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(var(--h) 40% 45% / .055) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 80% 62% at 50% 32%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 62% at 50% 32%, #000 20%, transparent 78%);
}

.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.06fr .94fr;
  gap: clamp(30px, 5vw, 70px); align-items: center;
}
.hero__copy > * + * { margin-top: 24px; }
.hero .display span.grad-ink { display: inline-block; }
.hero__lead { max-width: 56ch; }

.hero__trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px;
  padding-top: 10px; border-top: 1px solid var(--line-soft); margin-top: 32px;
}
.trust-item { display: flex; align-items: center; gap: 8px; font-size: .87rem; color: var(--muted); font-weight: 500; }
.trust-item .ico { width: 17px; height: 17px; }

.rating-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stars { display: flex; gap: 2px; }
.stars .ico { width: 16px; height: 16px; fill: var(--brand); stroke: none; opacity: 1; }

/* Saudi riyal mark. Treated as a glyph, not an icon: it has no size or
   colour of its own, it takes both from whatever text it sits in — so a
   muted <small>, a brand-coloured price and white-on-brand all just work.
   Aspect is 1124 : 1256 from the official artwork. */
.riyal {
  display: inline-block;
  height: .86em; width: .77em;
  fill: currentColor; stroke: none;
  vertical-align: -.085em;
  flex: none;
}

/* ---------- 12. SAUDI PLATE COMPONENT (pure CSS/SVG) ----------
   Traced from a real KSA plate:

     ┌──────────┬──────────┬───┐
     │  ٦٦٦٦    │  د و س   │ 🌴│   row 1 — Arabic
     ├──────────┼──────────┤ K │
     │  6666    │  S U D   │ S │   row 2 — Latin
     │          │          │ A │
     │          │          │ ● │
     └──────────┴──────────┴───┘
       numbers     letters   KSA

   The split is by CONTENT TYPE across the columns (numbers left,
   letters right) and by LANGUAGE across the rows — not the other way
   round. The KSA strip spans both rows on the right and shares the
   plate face; it is not a filled tab.

   Arabic reads RTL and Latin LTR, so the two rows are mirror images of
   each other. That is how a real plate reads and is not a bug.

   Every dimension derives from --plate-w, so one variable resizes the
   whole component without any of the parts drifting. */
.plate {
  --plate-w: 268px;
  --p-ink:  hsl(var(--h) 42% 13%);
  --p-face: hsl(var(--h) 16% 96%);
  --p-line: max(1px, calc(var(--plate-w) * .0062));
  width: var(--plate-w);
  aspect-ratio: 573 / 227;
  display: grid;
  grid-template-columns: 45.5fr 43.7fr 10.8fr;
  grid-template-rows: 1fr 1fr;
  background: linear-gradient(176deg, hsl(0 0% 100%) 0%, var(--p-face) 45%, hsl(var(--h) 18% 89%) 100%);
  border: max(1.5px, calc(var(--plate-w) * .0092)) solid var(--p-ink);
  border-radius: calc(var(--plate-w) * .042);
  overflow: hidden; position: relative;
  box-shadow: var(--sh-sm), inset 0 0 0 1px hsl(0 0% 100% / .85);
  color: var(--p-ink);
  font-feature-settings: "tnum";
  direction: ltr;
  transition: transform var(--t-med), box-shadow var(--t-med);
  flex: none;
}
/* A real plate does not invert at night — keep the face light in dark mode. */
[data-theme="dark"] .plate { --p-face: hsl(var(--h) 14% 92%); --p-ink: hsl(var(--h) 45% 11%); }

.plate__cell {
  display: grid; place-items: center;
  padding-inline: calc(var(--plate-w) * .012);
  font-weight: 700; line-height: 1; white-space: nowrap;
  /* characters sit proud of the face, as stamped metal does */
  text-shadow: .022em .052em 0 hsl(var(--h) 16% 56% / .5);
}
.plate__cell--num { grid-column: 1; border-right: var(--p-line) solid var(--p-ink); }
.plate__cell--ltr { grid-column: 2; }
.plate__cell--ar  { grid-row: 1; border-bottom: var(--p-line) solid var(--p-ink); direction: rtl; }
.plate__cell--en  { grid-row: 2; }

.plate__cell--ar.plate__cell--num { font-size: calc(var(--plate-w) * .132); letter-spacing: .05em; }
.plate__cell--ar.plate__cell--ltr { font-size: calc(var(--plate-w) * .125); letter-spacing: .02em; }
.plate__cell--en.plate__cell--num { font-size: calc(var(--plate-w) * .138); letter-spacing: .015em; }
.plate__cell--en.plate__cell--ltr { font-size: calc(var(--plate-w) * .132); letter-spacing: .07em; }

.plate__side {
  grid-column: 3; grid-row: 1 / -1;
  border-left: var(--p-line) solid var(--p-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--plate-w) * .022);
  padding-block: calc(var(--plate-w) * .015);
  direction: ltr;
}
.plate__emblem { width: 56%; height: auto; fill: currentColor; stroke: none; flex: none; }
.plate__region {
  font-size: max(3px, calc(var(--plate-w) * .023));
  font-weight: 600; line-height: 1; white-space: nowrap;
}
/* K, S and A stacked upright down the strip. */
.plate__ksa {
  writing-mode: vertical-lr; text-orientation: upright;
  font-size: calc(var(--plate-w) * .048);
  font-weight: 700; line-height: .9;
  /* upright vertical text advances by the full em box (~1.5em here), so a
     firm negative tracking is what brings K/S/A to the real plate's spacing */
  letter-spacing: calc(var(--plate-w) * -.0317);
}
.plate__dot {
  width: calc(var(--plate-w) * .034); aspect-ratio: 1;
  border-radius: 50%; background: currentColor; flex: none;
}

.plate--sm { --plate-w: 196px; }
.plate--lg { --plate-w: 330px; }

.plate-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px;
  display: flex; flex-direction: column; gap: 15px; align-items: center;
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
  position: relative; overflow: hidden;
}
.plate-card:hover { transform: translateY(-7px); border-color: hsl(var(--h) 78% 48% / .38); box-shadow: var(--sh-lg); }
.plate-card:hover .plate { transform: scale(1.035); }
.plate-card__meta { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; }
.plate-card__city { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); font-weight: 500; }
.plate-card__city .ico { width: 15px; height: 15px; }
.plate-card__price { font-size: 1.16rem; font-weight: 700; color: var(--brand); letter-spacing: -.02em; }
.plate-card__price small { font-size: .72rem; font-weight: 500; color: var(--muted); margin-inline-start: 3px; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .74rem; font-weight: 600; padding: 4px 11px;
  border-radius: var(--r-full);
  background: hsl(var(--h) 78% 42% / .09); color: var(--on-brand-soft);
  border: 1px solid hsl(var(--h) 78% 45% / .16);
}
[data-theme="dark"] .tag { background: hsl(var(--h) 86% 62% / .12); }
.tag .ico { width: 13px; height: 13px; }
.tag--solid { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

/* ---------- 13. HERO PHONE ---------- */
.hero__visual { position: relative; display: grid; place-items: center; min-height: 540px; }
.phone {
  position: relative; width: clamp(240px, 25vw, 306px);
  border-radius: 42px; padding: 9px;
  background: linear-gradient(160deg, hsl(var(--h) 30% 26%), hsl(var(--h) 42% 10%));
  box-shadow: var(--sh-xl), inset 0 0 0 1.5px hsl(var(--h) 40% 55% / .28);
  z-index: 2;
}
[data-theme="dark"] .phone { background: linear-gradient(160deg, hsl(var(--h) 32% 30%), hsl(var(--h) 45% 8%)); }
.phone::before {
  content: ""; position: absolute; inset-block-start: 20px; inset-inline-start: 50%;
  transform: translateX(-50%); width: 82px; height: 22px;
  background: hsl(var(--h) 45% 6%); border-radius: 99px; z-index: 3;
}
.phone img { border-radius: 34px; width: 100%; }
.phone--float { animation: phoneFloat 7s var(--e-io) infinite; }
@keyframes phoneFloat { 0%,100% { transform: translateY(0) rotate(-1.1deg); } 50% { transform: translateY(-20px) rotate(1.1deg); } }

.hero__float {
  position: absolute; z-index: 3;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 13px 17px;
  box-shadow: var(--sh-lg);
  display: flex; align-items: center; gap: 12px;
  backdrop-filter: blur(10px);
}
.hero__float--a { inset-inline-start: -4%; inset-block-start: 13%; animation: bob 6s var(--e-io) infinite; }
.hero__float--b { inset-inline-end: -6%; inset-block-start: 46%; animation: bob 7.5s var(--e-io) infinite .7s; }
.hero__float--c { inset-inline-start: 2%; inset-block-end: 9%; animation: bob 6.8s var(--e-io) infinite 1.4s; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
.hero__float b { display: block; font-size: 1.02rem; font-weight: 700; line-height: 1.25; }
.hero__float span { font-size: .74rem; color: var(--muted); }
.hero__float .icon-pad { width: 40px; height: 40px; border-radius: var(--r-sm); }
.hero__float .icon-pad .ico { width: 19px; height: 19px; }

.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none;
  position: relative;
}
.pulse-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--brand); animation: pulseRing 1.9s var(--e-io) infinite;
}
@keyframes pulseRing { 0% { transform: scale(1); opacity: .65; } 100% { transform: scale(3.4); opacity: 0; } }

/* ---------- 14. LOGO / TICKER STRIPS ---------- */
.marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marquee__track { display: flex; gap: 20px; width: max-content; animation: scrollX 52s linear infinite; }
.marquee--rev .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes scrollX { to { transform: translateX(-50%); } }
.marquee + .marquee { margin-top: 20px; }

/* ---------- 15. STATS ---------- */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--surface); overflow: hidden;
  box-shadow: var(--sh-md);
}
.stat {
  padding: clamp(24px, 3.2vw, 40px) 24px; text-align: center;
  border-inline-end: 1px solid var(--line-soft);
  position: relative; transition: background var(--t-med);
}
.stat:last-child { border-inline-end: 0; }
.stat:hover { background: var(--surface-2); }
.stat__num {
  font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); font-weight: 700;
  letter-spacing: -.035em; line-height: 1; color: var(--brand);
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
}
.stat__num small { font-size: .48em; font-weight: 600; }
.stat__label { color: var(--muted); font-size: .9rem; margin-top: 11px; font-weight: 500; }
.stat .ico { width: 20px; height: 20px; margin-inline: auto; margin-bottom: 14px; }

/* ---------- 16. FEATURE / STEP ---------- */
.step { position: relative; padding-top: 8px; }
.step__n {
  font-size: 3.4rem; font-weight: 700; line-height: .9;
  color: transparent; -webkit-text-stroke: 1.5px hsl(var(--h) 78% 45% / .35);
  letter-spacing: -.05em; margin-bottom: 14px;
}
[data-theme="dark"] .step__n { -webkit-text-stroke-color: hsl(var(--h) 86% 62% / .38); }
.steps { counter-reset: s; position: relative; }
.steps::before {
  content: ""; position: absolute; inset-block-start: 34px; inset-inline: 12%;
  height: 1.5px;
  background: repeating-linear-gradient(90deg, hsl(var(--h) 60% 55% / .34) 0 8px, transparent 8px 17px);
}
@media (max-width: 860px) { .steps::before { display: none; } }

/* ---------- 17. AUCTION ---------- */
.auction {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg);
}
.auction__head {
  padding: 18px 26px; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.auction__live { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: .9rem; color: var(--brand); }
.auction__body { padding: clamp(24px, 3vw, 38px); display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 3.5vw, 46px); align-items: center; }
@media (max-width: 720px) { .auction__body { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

.countdown { display: flex; gap: 10px; }
.cd-unit {
  min-width: 66px; padding: 12px 8px 10px; text-align: center;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.cd-unit b { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.cd-unit span { font-size: .7rem; color: var(--muted); font-weight: 500; }

.bid-list { display: grid; gap: 9px; margin-top: 20px; }
.bid {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 15px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line-soft);
  font-size: .88rem;
}
.bid--top { background: hsl(var(--h) 78% 45% / .08); border-color: hsl(var(--h) 78% 45% / .25); }
.bid__who { font-weight: 600; }
.bid__amt { margin-inline-start: auto; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.bid__ago { font-size: .76rem; color: var(--faint); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: .74rem; font-weight: 700;
  background: hsl(var(--h) 78% 45% / .12); color: var(--on-brand-soft);
  border: 1px solid hsl(var(--h) 78% 45% / .2);
}

/* ---------- 18. CATEGORY TILES ---------- */
.cat {
  display: flex; flex-direction: column; gap: 14px;
  padding: 26px 24px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  transition: all var(--t-med); position: relative; overflow: hidden;
}
.cat::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  height: 2.5px; width: 0; background: var(--brand); transition: width .45s var(--e-out);
}
.cat:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: hsl(var(--h) 78% 48% / .32); }
.cat:hover::after { width: 100%; }
.cat__count { font-size: .8rem; color: var(--faint); font-weight: 500; font-variant-numeric: tabular-nums; }
.cat__digits {
  display: flex; gap: 5px; direction: ltr;
}
.cat__digit {
  width: 30px; height: 38px; border-radius: 7px;
  display: grid; place-items: center;
  border: 1.5px solid hsl(var(--h) 50% 55% / .32);
  font-weight: 700; font-size: 1.05rem; color: var(--brand);
  background: hsl(var(--h) 78% 50% / .05);
}
.cat__digit--ghost { border-style: dashed; color: var(--faint); border-color: var(--line); background: transparent; }

/* ---------- 19. SCREENSHOT GALLERY ---------- */
.shots {
  display: flex; gap: clamp(14px, 2.4vw, 30px); justify-content: center;
  align-items: center; flex-wrap: nowrap; overflow-x: auto;
  padding-block: 20px 30px; padding-inline: var(--gutter);
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.shots::-webkit-scrollbar { display: none; }
.shot {
  flex: none; width: clamp(190px, 22vw, 250px);
  border-radius: 28px; padding: 7px; scroll-snap-align: center;
  background: linear-gradient(160deg, hsl(var(--h) 30% 26%), hsl(var(--h) 42% 10%));
  box-shadow: var(--sh-lg);
  transition: transform .55s var(--e-out), box-shadow .55s var(--e-out), filter .55s var(--e-out);
  filter: saturate(.92);
}
.shot img { border-radius: 22px; }
.shot:hover { transform: translateY(-14px) scale(1.03); box-shadow: var(--sh-xl); filter: none; }
.shot--hero { transform: scale(1.06); z-index: 2; }
.shot--hero:hover { transform: translateY(-14px) scale(1.09); }

/* ---------- 20. CHART (creative, SVG) ---------- */
.chart-wrap {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: clamp(22px, 3vw, 38px); box-shadow: var(--sh-md);
}
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 24px; }
.chart-legend span { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--muted); }
.chart-legend i { width: 11px; height: 11px; border-radius: 3px; background: var(--brand); display: block; }
.chart-legend i.op-2 { opacity: .5; }
.chart-legend i.op-3 { opacity: .25; }

.bars { display: grid; gap: 18px; }
.bar-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 14px; align-items: center; }
.bar-row__label { font-size: .88rem; font-weight: 600; }
.bar-track { height: 12px; border-radius: 99px; background: hsl(var(--h) 40% 50% / .10); overflow: hidden; }
.bar-fill {
  height: 100%; border-radius: 99px; width: 0;
  background: linear-gradient(90deg, var(--c-700), var(--c-500));
  transition: width 1.5s var(--e-out);
}
[data-theme="dark"] .bar-fill { background: linear-gradient(90deg, hsl(var(--h) 86% 46%), hsl(var(--h) 88% 68%)); }
.bar-row__val { font-size: .86rem; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; min-width: 74px; text-align: end; }

.spark { width: 100%; height: auto; overflow: visible; }
.spark path.line { fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.spark path.area { fill: url(#sparkGrad); stroke: none; }
.spark .dot { fill: var(--surface); stroke: var(--brand); stroke-width: 2.4; }
.spark .gridline { stroke: hsl(var(--h) 40% 50% / .14); stroke-width: 1; stroke-dasharray: 3 5; }
.spark text { fill: var(--faint); font-size: 11px; font-family: inherit; }

/* Draw-on-scroll */
.draw { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); }
.is-in .draw { animation: drawLine 2.1s var(--e-out) forwards .15s; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

/* ---------- 21. TESTIMONIALS ---------- */
.quote { position: relative; }
.quote__mark {
  position: absolute; inset-block-start: -12px; inset-inline-start: 22px;
  font-size: 4.6rem; line-height: 1; font-weight: 700;
  color: hsl(var(--h) 78% 50% / .13); pointer-events: none;
}
.quote__text { font-size: 1.01rem; line-height: 1.9; color: var(--ink-2); position: relative; }
.quote__by { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.quote__by b { display: block; font-size: .93rem; }
.quote__by span { font-size: .8rem; color: var(--muted); }

/* ---------- 22. FAQ ---------- */
.faq { max-width: 860px; margin-inline: auto; display: grid; gap: 12px; }
.faq details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
  transition: border-color var(--t-med), box-shadow var(--t-med);
}
.faq details[open] { border-color: hsl(var(--h) 78% 48% / .34); box-shadow: var(--sh-sm); }
.faq summary {
  padding: 20px 24px; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 16px;
  font-weight: 600; font-size: 1rem;
  transition: color var(--t-fast);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand); }
.faq summary .ico { margin-inline-start: auto; transition: transform .35s var(--e-out); }
.faq details[open] summary .ico { transform: rotate(180deg); }
.faq details[open] summary { color: var(--brand); }
.faq__a { padding: 0 24px 22px; color: var(--muted); font-size: .95rem; line-height: 1.85; }
.faq__a p + p { margin-top: 12px; }

/* ---------- 23. CTA BAND ---------- */
.cta-band {
  position: relative; overflow: hidden;
  border-radius: var(--r-2xl);
  background: linear-gradient(140deg, var(--c-800), var(--c-600) 52%, var(--c-700));
  color: hsl(0 0% 100%);
  padding: clamp(40px, 6vw, 76px) clamp(26px, 5vw, 64px);
  box-shadow: var(--sh-xl);
}
[data-theme="dark"] .cta-band { background: linear-gradient(140deg, var(--c-900), var(--c-700) 52%, var(--c-800)); }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 82% 18%, hsl(0 0% 100% / .16), transparent 46%),
    radial-gradient(circle at 12% 88%, hsl(0 0% 100% / .10), transparent 44%);
}
.cta-band::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, hsl(0 0% 100% / .06) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(0 0% 100% / .06) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band .lead { color: hsl(0 0% 100% / .82); }
.cta-band .btn--primary { background: hsl(0 0% 100%); color: var(--c-700); box-shadow: 0 14px 34px -10px hsl(var(--h) 60% 8% / .5); }
.cta-band .btn--primary:hover { background: hsl(var(--h) 40% 96%); }
.cta-band .store-badge { background: hsl(0 0% 100% / .10); border-color: hsl(0 0% 100% / .26); color: hsl(0 0% 100%); backdrop-filter: blur(8px); }
.cta-band .store-badge:hover { background: hsl(0 0% 100% / .18); }

/* ---------- 24. FOOTER ---------- */
.footer { background: var(--bg-tint); border-top: 1px solid var(--line); padding-block: clamp(48px, 6vw, 78px) 0; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(26px, 3.4vw, 48px); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h3, .footer h4 { font-size: .95rem; font-weight: 600; margin-bottom: 18px; }
.footer ul { display: grid; gap: 11px; }
.footer li a, .footer address a {
  color: var(--muted); font-size: .91rem;
  display: inline-flex; align-items: center; gap: 9px;
  transition: color var(--t-fast), transform var(--t-fast);
}
.footer li a:hover, .footer address a:hover { color: var(--brand); transform: translateX(-3px); }
[dir="ltr"] .footer li a:hover, [dir="ltr"] .footer address a:hover { transform: translateX(3px); }
.footer address { font-style: normal; display: grid; gap: 13px; }
.footer__bottom {
  margin-top: clamp(34px, 4vw, 54px); padding-block: 24px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  font-size: .85rem; color: var(--faint);
}
.socials { display: flex; gap: 9px; }
.socials a {
  width: 40px; height: 40px; border-radius: var(--r-full);
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface);
  transition: all var(--t-fast);
}
.socials a:hover { background: var(--brand); border-color: var(--brand); transform: translateY(-3px); }
.socials a:hover .ico { color: var(--brand-ink); opacity: 1; }
.socials .ico { width: 18px; height: 18px; }

/* Keyword cloud — SEO internal linking, styled as editorial chips */
.kw-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.kw-cloud a {
  font-size: .8rem; padding: 6px 13px; border-radius: var(--r-full);
  border: 1px solid var(--line); color: var(--muted); background: var(--surface);
  transition: all var(--t-fast);
}
.kw-cloud a:hover { color: var(--brand); border-color: hsl(var(--h) 78% 48% / .4); background: hsl(var(--h) 78% 48% / .06); }

/* ---------- 25. BACK TO TOP ---------- */
.to-top {
  position: fixed; inset-block-end: 26px; inset-inline-end: 26px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--brand); color: var(--brand-ink);
  display: grid; place-items: center; box-shadow: var(--glow);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.85);
  transition: all .4s var(--e-spring);
}
.to-top.is-show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-4px); }
.to-top .ico { color: currentColor; opacity: 1; stroke-width: 2; }

/* ---------- 26. INNER PAGE HEADER ---------- */
.page-hero {
  padding-block: calc(var(--header-h) + 58px) 54px;
  background: var(--bg-tint); border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, hsl(var(--h) 40% 45% / .05) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(var(--h) 40% 45% / .05) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 70% 90% at 50% 0%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 0%, #000, transparent 75%);
}
.page-hero > * { position: relative; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--muted); margin-bottom: 16px; }
.crumbs a:hover { color: var(--brand); }
.crumbs .sep { opacity: .45; }

.prose { max-width: 800px; margin-inline: auto; }
.prose h2 { font-size: clamp(1.32rem, 1.1rem + 1vw, 1.7rem); margin-block: 46px 16px; letter-spacing: -.02em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.1rem; margin-block: 28px 12px; }
.prose p { color: var(--ink-2); margin-bottom: 15px; line-height: 1.95; }
.prose ul { display: grid; gap: 11px; margin-bottom: 18px; }
.prose ul li {
  position: relative; padding-inline-start: 26px; color: var(--ink-2); line-height: 1.9;
}
.prose ul li::before {
  content: ""; position: absolute; inset-inline-start: 6px; inset-block-start: 13px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand); opacity: .6;
}
.prose a:not(.btn) { color: var(--brand); font-weight: 500; border-bottom: 1px solid hsl(var(--h) 78% 50% / .32); }
.prose a:not(.btn):hover { border-bottom-color: var(--brand); }
.prose strong { font-weight: 600; color: var(--ink); }
.note {
  background: var(--surface-2); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--brand);
  border-radius: var(--r-sm); padding: 18px 22px; margin-block: 22px;
  font-size: .93rem; color: var(--ink-2);
}
.toc {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 22px 26px; margin-bottom: 40px;
}
/* Rendered as an <h2> to keep the heading order contiguous after the <h1>,
   but styled as a small label. Overrides .prose h2 (same specificity, later). */
.toc h2, .toc h4 {
  font-size: .88rem; color: var(--muted); font-weight: 600;
  margin-block: 0 14px; text-transform: uppercase; letter-spacing: .07em;
}
[lang="ar"] .toc h2, [lang="ar"] .toc h4 { text-transform: none; letter-spacing: 0; }
.toc ol { display: grid; gap: 9px; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { font-size: .92rem; color: var(--ink-2); display: flex; gap: 10px; }
.toc a::before { content: counter(toc) "."; color: var(--brand); font-weight: 600; font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--brand); }

/* Data tables — price guides. Scrolls inside its own wrapper so the
   page body never scrolls horizontally on narrow screens. */
.tbl-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin-block: 24px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface);
}
.tbl { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .93rem; }
.tbl caption {
  caption-side: bottom; padding: 12px 18px; text-align: start;
  font-size: .8rem; color: var(--faint); line-height: 1.7;
}
.tbl th, .tbl td { padding: 13px 18px; text-align: start; border-bottom: 1px solid var(--line-soft); }
.tbl thead th {
  background: var(--surface-2); color: var(--ink);
  font-weight: 600; font-size: .86rem; white-space: nowrap;
}
.tbl tbody td { color: var(--ink-2); }
.tbl tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.tbl tbody tr:last-child td, .tbl tbody tr:last-child th { border-bottom: 0; }
.tbl tbody tr:hover { background: hsl(var(--h) 78% 48% / .045); }
.tbl td .num, .tbl th .num { white-space: nowrap; }

/* Contact cards */
.contact-card {
  display: flex; gap: 17px; align-items: flex-start;
  padding: 24px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  transition: all var(--t-med);
}
.contact-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: hsl(var(--h) 78% 48% / .32); }
.contact-card b { display: block; font-size: .97rem; margin-bottom: 5px; }
.contact-card span, .contact-card a { color: var(--muted); font-size: .91rem; word-break: break-word; }
.contact-card a:hover { color: var(--brand); }
.contact-card .dir-ltr { direction: ltr; display: inline-block; }

/* A navigation path inside the app, e.g. «حسابي → مراسلة خدمة العملاء».
   Wraps to one chip per line on narrow screens rather than overflowing. */
.app-path { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.app-path__step {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 17px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: .95rem; font-weight: 600; color: var(--ink);
}
.app-path__step .ico { width: 17px; height: 17px; color: var(--brand); opacity: 1; }
.app-path__sep { width: 19px; height: 19px; color: var(--faint); flex: none; }

/* Form */
.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field label { font-size: .89rem; font-weight: 600; }
.field input, .field textarea, .field select {
  padding: 14px 17px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface);
  font-size: .95rem; transition: all var(--t-fast);
  width: 100%;
}
.field textarea { min-height: 138px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 4px hsl(var(--h) 78% 50% / .12);
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }

/* ---------- 27. REVEAL ANIMATIONS ----------
   Hiding is scoped to .js so the page is fully visible
   (to users AND crawlers) if JavaScript never runs. */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--e-out), transform .8s var(--e-out); }
.js .rv.is-in { opacity: 1; transform: none; }
.js .rv--l { transform: translateX(-34px); }
.js .rv--r { transform: translateX(34px); }
.js .rv--s { transform: scale(.94); }
.js .rv--l.is-in, .js .rv--r.is-in, .js .rv--s.is-in { transform: none; }
.rv[data-d="1"] { transition-delay: .08s; }
.rv[data-d="2"] { transition-delay: .16s; }
.rv[data-d="3"] { transition-delay: .24s; }
.rv[data-d="4"] { transition-delay: .32s; }
.rv[data-d="5"] { transition-delay: .40s; }
.rv[data-d="6"] { transition-delay: .48s; }

/* Below the single-column breakpoint the sideways entrance would stick out
   past the viewport while it animates. Fall back to the vertical reveal. */
@media (max-width: 700px) {
  .js .rv--l, .js .rv--r { transform: translateY(26px); }
  .js .rv--l.is-in, .js .rv--r.is-in { transform: none; }
}

/* ---------- 28. UTILITIES ---------- */
.center { text-align: center; }
.flex { display: flex; }
.wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-sm { gap: 10px; } .gap-md { gap: 16px; } .gap-lg { gap: 26px; }
.mt-sm { margin-top: 14px; } .mt-md { margin-top: 26px; } .mt-lg { margin-top: 42px; }
.mb-md { margin-bottom: 26px; }
.dir-ltr { direction: ltr; }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.num { font-variant-numeric: tabular-nums; }

/* ---------- 29. RESPONSIVE ---------- */
@media (max-width: 1040px) {
  .nav { display: none; }
  .burger { display: grid; }
  .header__tools .btn--primary { display: none; }
  /* .footer__grid columns are handled in the footer section — redeclaring
     them here would override the narrower single-column rule. */
}
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__copy .eyebrow { margin-inline: auto; }
  .hero__lead { margin-inline: auto; }
  .hero__trust, .hero .store-row, .hero .rating-row { justify-content: center; }
  .hero__visual { min-height: 460px; margin-top: 22px; }
  .hero__float--a { inset-inline-start: -2%; }
  .hero__float--b { inset-inline-end: -2%; }
  .stat { border-inline-end: 0; border-bottom: 1px solid var(--line-soft); }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .hero__float--c { display: none; }
  .hero__float { padding: 10px 13px; }
  .countdown { flex-wrap: wrap; justify-content: center; }
  .bar-row { grid-template-columns: 76px 1fr; }
  .bar-row__val { grid-column: 2; text-align: start; }
  .card { padding: 24px; }
  .to-top { inset-block-end: 18px; inset-inline-end: 18px; }
}
@media (max-width: 400px) {
  /* Long CTA labels can't stay on one line at this width — let them wrap
     rather than push the page sideways. */
  .btn { white-space: normal; max-width: 100%; }
  .btn--lg { padding: 15px 22px; }
}

/* ---------- 30. MOTION PREFERENCE ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .js .rv { opacity: 1 !important; transform: none !important; }
  .draw { stroke-dashoffset: 0 !important; }
}

/* ---------- 31. PRINT ---------- */
@media print {
  .header, .footer, .to-top, .progress, .hero__bg, .drawer, .cta-band { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 20px; }
}