@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; }
}

/* ---------- 32. PLATE MARKET (server-rendered /market/ and /plates/<slug>) ----------
   Real plates from the app. The plate itself is the §12 component; cards and
   the hero size it from their own width (container units) so it never
   overflows a narrow phone. */
.tag--muted { background: var(--surface-3); color: var(--muted); border-color: var(--line); }
.ico--inline { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; margin-inline-end: 4px; }
.btn.is-disabled { opacity: .45; pointer-events: none; }

/* grid of cards */
.plate-grid { display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: repeat(auto-fill, minmax(min(262px, 100%), 1fr)); }
a.plate-card { color: inherit; container-type: inline-size; }
a.plate-card:focus-visible { outline-offset: 4px; border-radius: var(--r-lg); }
.plate-card .plate { --plate-w: 222px; }
@supports (width: 1cqw) { .plate-card .plate { --plate-w: min(100cqw, 268px); } }
.plate-card__soom { font-size: 1rem; font-weight: 700; color: var(--brand); }

/* filters */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip {
  display: inline-flex; align-items: center; padding: 8px 16px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface); font-size: .9rem; font-weight: 500; color: var(--ink-2);
  transition: all var(--t-fast);
}
.chip:hover { border-color: hsl(var(--h) 78% 45% / .45); color: var(--brand); }
.chip.is-active { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.market-search { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; max-width: 760px; }
.market-search input, .market-search select {
  flex: 1 1 220px; min-width: 0; padding: 13px 18px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: .95rem;
}
.market-search select { flex: 0 1 200px; }
.market-search input:focus, .market-search select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px hsl(var(--h) 78% 45% / .12); }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 38px; }
.pager__n {
  min-width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-variant-numeric: tabular-nums;
}
a.pager__n:hover { border-color: var(--brand); color: var(--brand); }
.pager__n.is-current { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }

/* single plate */
.plate-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 56px); align-items: start; margin-top: 8px; }
.plate-stage {
  container-type: inline-size;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(22px, 4vw, 44px) clamp(16px, 3vw, 36px); box-shadow: var(--sh-lg);
  display: grid; justify-items: center; gap: 22px;
  position: sticky; top: calc(var(--header-h) + 20px);
}
.plate--xl { --plate-w: 300px; }
@supports (width: 1cqw) { .plate--xl { --plate-w: min(100cqw, 470px); } }
.plate-title { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.7rem); line-height: 1.2; letter-spacing: -.02em; margin-block: 16px 12px; }
.plate-title__en { display: inline-block; font-size: .62em; color: var(--muted); font-weight: 600; letter-spacing: .04em; }
.plate-lead { font-size: 1rem; }

.price-panel, .plate-auction { margin-top: 22px; }
.price-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.plate-auction { border-radius: var(--r-lg); box-shadow: var(--sh-md); }
.plate-auction .auction__head { padding: 14px 18px; }
.plate-auction .cd-unit { min-width: 58px; padding: 9px 6px 8px; }
.plate-auction .cd-unit b { font-size: 1.35rem; }
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.price-cell { padding: 16px 20px; display: grid; gap: 4px; border-top: 1px solid var(--line-soft); border-inline-start: 1px solid var(--line-soft); margin: -1px 0 0 -1px; }
.price-cell--main { grid-column: 1 / -1; }
.price-cell__l { font-size: .84rem; color: var(--muted); font-weight: 500; }
.price-cell__v { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.35rem); font-weight: 700; color: var(--brand); letter-spacing: -.03em; line-height: 1.15; display: flex; align-items: center; gap: 8px; }
.price-cell__v .riyal { width: .62em; height: .7em; }
.price-cell__v--sm { font-size: 1.12rem; color: var(--ink); letter-spacing: -.01em; }
.price-cell__v--sm .ico { width: 18px; height: 18px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.cta-row .btn { flex: 1 1 160px; }
.cta-note { display: flex; gap: 8px; align-items: flex-start; font-size: .84rem; color: var(--muted); margin-top: 12px; line-height: 1.7; }
.cta-note .ico { width: 17px; height: 17px; margin-top: 3px; }
.notice {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; padding: 16px 18px;
  border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); font-size: .95rem;
}
.notice a { color: var(--brand); font-weight: 600; }
.share-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.share-row__l { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: var(--ink-2); margin-inline-end: 6px; }
.share-row__l .ico { width: 18px; height: 18px; }
.share-row__ok { font-size: .85rem; color: var(--brand); font-weight: 600; }

.plate-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: clamp(28px, 4vw, 56px); }
.plate-details .h3 { margin-bottom: 16px; }
.kv { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.kv__row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line-soft); }
.kv__row:last-child { border-bottom: 0; }
.kv dt { color: var(--muted); font-size: .9rem; }
.kv dd { margin: 0; font-weight: 600; }
.kv dd a { color: var(--brand); }
.kv__sep { color: var(--faint); margin-inline: 4px; }
.spellings { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 14px 24px; }
.spellings li { padding: 7px 14px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.guarantees { display: grid; gap: 12px; }
.guarantees p { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); font-size: .94rem; }
.guarantees .ico { width: 20px; height: 20px; margin-top: 3px; }
.guarantees a { color: var(--brand); font-weight: 600; }

.qr-dialog {
  margin: auto; width: min(420px, calc(100% - 32px)); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 30px 26px 26px; background: var(--surface); color: var(--ink); box-shadow: var(--sh-xl); text-align: center;
}
.qr-dialog::backdrop { background: hsl(var(--h) 50% 8% / .55); backdrop-filter: blur(4px); }
.qr-dialog .h3 { margin-block: 14px 8px; }
.qr-dialog__x { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; }
.qr-dialog__code { width: 220px; margin: 18px auto; padding: 10px; background: #fff; border-radius: var(--r-md); border: 1px solid var(--line); }
.qr-dialog__code svg { width: 100%; height: auto; }
.qr-dialog__stores { justify-content: center; flex-wrap: wrap; }

@media (max-width: 900px) {
  .plate-hero { grid-template-columns: 1fr; }
  .plate-stage { position: static; }
}
@media (max-width: 520px) {
  .kv__row { grid-template-columns: 110px 1fr; padding-inline: 14px; }
  .price-cell { padding: 14px 16px; }
  .plate-auction .auction__head { justify-content: center; }
  .plate-auction .cd-unit { min-width: 52px; }
}

/* internal stats */
.stat-tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.stat-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; display: grid; gap: 6px; }
.stat-tile__l { color: var(--muted); font-size: .88rem; }
.stat-tile__v { font-size: 1.8rem; font-weight: 700; color: var(--brand); line-height: 1.1; }
.stat-tile__s { font-size: .8rem; color: var(--faint); }
.funnel { display: grid; gap: 8px; margin-top: 16px; }
.funnel li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: center;
  padding: 14px 20px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
}
.funnel li:nth-child(2) { margin-inline-end: 4%; } .funnel li:nth-child(3) { margin-inline-end: 8%; }
.funnel li:nth-child(4) { margin-inline-end: 12%; } .funnel li:nth-child(5) { margin-inline-end: 16%; }
.funnel__l { font-weight: 600; }
.funnel__v { font-size: 1.35rem; font-weight: 700; color: var(--brand); grid-row: span 2; }
.funnel__s { font-size: .82rem; color: var(--muted); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); margin-top: 12px; }
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table th, .data-table td { padding: 10px 14px; text-align: start; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.data-table th { color: var(--muted); font-weight: 600; background: var(--surface-2); }
.data-table td { font-variant-numeric: tabular-nums; }
.data-table a { color: var(--brand); }
.manual-form { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); align-items: end; margin-top: 14px; }
.manual-form .btn { margin-bottom: 18px; }
.plate-card__price small.plate-card__pl { display: block; font-size: .7rem; font-weight: 500; color: var(--muted); margin: 0 0 1px; letter-spacing: 0; }
/* seven nav links since "اللوحات المعروضة" joined — switch to the drawer a bit earlier */
.nav a { white-space: nowrap; }
@media (max-width: 1180px) {
  .nav { display: none; }
  .burger { display: grid; }
}

/* header: the download pill must breathe inside the 62–74px bar */
.header__tools .btn { padding: 10px 20px; font-size: .9rem; }
.header__tools .btn .ico { width: 17px; height: 17px; }
/* theme toggle: stack sun/moon exactly in the circle's centre */
.theme-toggle { position: relative; }
.theme-toggle .ico { inset: 0; margin: auto; }

/* plate page: details & guarantees fill the column under the plate */
.plate-hero__visual { display: grid; gap: 16px; }
.plate-stage { position: static; }
.plate-side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; }
.plate-side-card .kv { border: 0; border-radius: 0; background: none; }
.plate-side-card .kv__row { padding-inline: 4px; }
.plate-side-card__h { display: flex; align-items: center; gap: 8px; font-size: 1.02rem; margin-bottom: 6px; }
.plate-side-card__h .ico { width: 19px; height: 19px; }
.plate-side-card.guarantees { background: var(--surface-2); }
.plate-photo { margin: 0; }
.plate-photo img { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--sh-md); background: var(--surface-2); }
.plate-photo figcaption { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: .86rem; color: var(--muted); }
.plate-photo figcaption .ico { width: 17px; height: 17px; }
.plate-photo figcaption a { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-weight: 600; }
.plate-details { align-items: center; }
.price-cell__v--sm { flex-wrap: nowrap; white-space: nowrap; }

/* store badges: compact size for the footer and the QR dialog */
.store-badge--sm { padding: 9px 16px 9px 14px; gap: 10px; border-radius: var(--r-sm); flex: 0 1 auto; min-width: 150px; }
.store-badge--sm svg { width: 22px; height: 22px; }
.store-badge--sm .store-badge__top { font-size: .62rem; }
.store-badge--sm .store-badge__btm { font-size: .9rem; }
.store-row--footer { flex-wrap: wrap; gap: 10px; }
.qr-dialog__stores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.qr-dialog__stores .store-badge--sm { min-width: 0; padding-inline: 12px; }
@media (max-width: 360px) { .qr-dialog__stores { grid-template-columns: 1fr; } }
/* footer badges: always the same size, side by side when there is room */
.store-row--footer { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 172px)); gap: 10px; }
.store-row--footer .store-badge--sm { width: 100%; min-width: 0; justify-content: flex-start; }

/* motorcycle plates: a tab hanging from the card's top edge (absolute, so
   card height and grid order never change) and a badge on the plate page */
.kind-tab {
  position: absolute; inset-block-start: 0; inset-inline-end: 18px; z-index: 1;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 9px 2px; border-radius: 0 0 9px 9px;
  background: var(--brand); color: var(--brand-ink);
  font-size: .66rem; font-weight: 600; line-height: 1.4; box-shadow: var(--sh-xs);
}
.kind-tab .ico { width: 13px; height: 13px; color: currentColor; opacity: 1; stroke-width: 1.9; }
.plate-card--moto { border-color: hsl(var(--h) 78% 45% / .35); }
.kind-badge {
  display: inline-flex; align-items: center; gap: 8px; justify-self: center;
  padding: 6px 14px; border-radius: var(--r-full);
  background: var(--brand); color: var(--brand-ink); font-size: .85rem; font-weight: 600;
}
.kind-badge .ico { width: 18px; height: 18px; color: currentColor; opacity: 1; stroke-width: 1.9; }

/* phones/tablets: with the nav hidden, keep the tools on the side opposite the logo */
.header__tools { margin-inline-start: auto; }

/* "show more" under a plate grid (market + home) */
.load-more { display: grid; justify-items: center; gap: 10px; margin-top: 34px; text-align: center; }
.load-more__n { font-weight: 500; opacity: .85; }
.load-more__count { font-size: .86rem; color: var(--muted); }
.btn.is-loading { opacity: .7; pointer-events: none; }
.btn.is-loading .ico { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.plate-card[tabindex="-1"]:focus { outline: none; }

/* home strip: skeleton cards while the real ones load */
.home-plates { padding-top: clamp(40px, 5vw, 72px); }
.plate-card--skeleton { min-height: 236px; justify-content: flex-start; }
.sk { display: block; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: sk 1.2s ease-in-out infinite; }
.sk--plate { width: 100%; aspect-ratio: 573 / 227; border-radius: var(--r-md); }
.sk--line { width: 100%; height: 14px; }
.sk--short { width: 55%; }
@keyframes sk { to { background-position: -200% 0; } }
.home-plates--offline .section-head .lead { display: none; }
@media (prefers-reduced-motion: reduce) { .sk, .btn.is-loading .ico { animation: none; } }

/* dark theme: the generic dark .tag rule (higher specificity) was washing out
   the solid tags — "قابل للتفاوض", "للبيع", "مزاد" — keep them solid */
[data-theme="dark"] .tag--solid { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
[data-theme="dark"] .tag--muted { background: var(--surface-3); border-color: var(--line); color: var(--muted); }

/* plate characters: semibold instead of bold — closer to the real plate's stroke */
.plate__cell { font-weight: 600; }
.plate__ksa { font-weight: 600; }

/* last-refresh time on market cards — shares the city line, so the card
   keeps its original height */
.plate-card__where { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.plate-card__ago { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; color: var(--faint); white-space: nowrap; }
.plate-card__ago .ico { width: 13px; height: 13px; }

/* equal-size cards: every card has the same three rows (plate · place/time ·
   label+price/status), nothing wraps, and the price row sits at the bottom */
.plate-grid { align-items: stretch; }
.plate-grid > .plate-card { height: 100%; }
.plate-grid .plate-card__meta { flex-wrap: nowrap; }
.plate-grid .plate-card__meta:last-child { margin-top: auto; align-items: flex-end; }
.plate-grid .plate-card__where { flex-wrap: nowrap; overflow: hidden; }
.plate-grid .plate-card__city { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plate-grid .plate-card__price { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.plate-grid .plate-card__price small.plate-card__pl { display: block; margin: 0 0 3px; }
.plate-grid .plate-card .tag { white-space: nowrap; flex: none; }
.plate-grid .plate-card__price { height: 56px; justify-content: flex-end; }
/* number and riyal sign on one line, sign centred on the digits */
.plate-card__val { display: inline-flex; align-items: center; gap: 5px; direction: rtl; }
.plate-card__val .riyal { width: .78em; height: .86em; flex: none; }
.plate-card .tag--solid { padding: 5px 12px; font-size: .74rem; line-height: 1.3; }

/* plate: Latin row a touch smaller (was .138 / .132 of the plate width) */
.plate__cell--en.plate__cell--num { font-size: calc(var(--plate-w) * .124); }
.plate__cell--en.plate__cell--ltr { font-size: calc(var(--plate-w) * .116); }

/* store badges follow the theme: brand blue on the light theme (was near-black) */
.store-badge { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--glow); }
.store-badge:hover { background: var(--c-700); border-color: var(--c-700); }

/* phones: two plate cards per row */
@media (max-width: 600px) {
  .plate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .plate-grid > .plate-card { padding: 12px 10px; gap: 9px; border-radius: var(--r-md); }
  .plate-grid .plate-card .plate { --plate-w: 150px; }
  @supports (width: 1cqw) { .plate-grid .plate-card .plate { --plate-w: 100cqw; } }
  .plate-grid .plate-card__where { gap: 2px 6px; }
  .plate-grid .plate-card__city { font-size: .74rem; gap: 3px; }
  .plate-grid .plate-card__city .ico { width: 12px; height: 12px; }
  .plate-grid .plate-card__ago { font-size: .68rem; gap: 3px; }
  .plate-grid .plate-card__ago .ico { width: 11px; height: 11px; }
  /* price and status tag stay side by side — smaller type makes them fit */
  .plate-grid .plate-card__meta:last-child { gap: 4px; }
  .plate-grid .plate-card__price { height: 42px; font-size: .86rem; letter-spacing: -.02em; }
  .plate-grid .plate-card__price small.plate-card__pl { font-size: .62rem; margin-bottom: 2px; }
  .plate-grid .plate-card__val { gap: 3px; }
  .plate-grid .plate-card .tag--solid, .plate-grid .plate-card .tag--muted { padding: 2px 7px; font-size: .58rem; letter-spacing: 0; }
  .plate-grid .kind-tab { inset-inline-end: 10px; font-size: .6rem; padding: 1px 7px 2px; }
  .plate-grid .kind-tab .ico { width: 11px; height: 11px; }
  .plate-card--skeleton { min-height: 190px; }
}