/* ============================================================================
   firePOS Landing — styles.css
   Modern monochrome + glass. Tokens mirror the app (src/styles/variables.css).
   Theme via [data-theme]; direction via [dir]. Logical properties throughout.
   ========================================================================== */

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Arabic', sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 4rem;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;

  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  --container: 1180px;

  /* brand gradient — used sparingly (logo, one highlight) */
  --brand-grad: linear-gradient(135deg, #a855f7 0%, #6366f1 50%, #3b82f6 100%);
  --brand-purple: #a855f7;
  --brand-blue: #3b82f6;
}

/* ── Dark theme (default) ─────────────────────────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0b;
  --bg-2: #0f0f11;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-solid: #161618;
  --surface-hover: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #fafafa;
  --text-secondary: #a1a1aa;
  --text-tertiary: #71717a;
  --glass: rgba(20, 20, 23, 0.6);
  --glass-border: rgba(255, 255, 255, 0.1);
  --inverse-bg: #fafafa;
  --inverse-text: #0a0a0b;
  --glow: rgba(255, 255, 255, 0.08);
  --scrollbar: rgba(255, 255, 255, 0.18);
  --scrollbar-hover: rgba(255, 255, 255, 0.32);
  --shadow-xl: 0 30px 60px -15px rgba(0, 0, 0, 0.7);
  --shadow-card: 0 8px 30px -8px rgba(0, 0, 0, 0.5);
  --grid-line: rgba(255, 255, 255, 0.04);
  --noise-opacity: 0.04;
  /* cinematic ambient: warm spotlight + cold counter-light, vignette */
  --cine-warm: rgba(244, 88, 60, 0.22);
  --cine-cool: rgba(80, 120, 220, 0.10);
  --cine-vignette: rgba(0, 0, 0, 0.55);
  --cine-spot: rgba(255, 255, 255, 0.06);
  --mockup-shadow:
    0 2px 6px rgba(0, 0, 0, 0.4),
    0 40px 80px -20px rgba(0, 0, 0, 0.85),
    0 80px 120px -40px rgba(244, 88, 60, 0.25);

  /* semantic accents for the mockup KPI tiles */
  --c-green-bg: rgba(34, 197, 94, 0.15);  --c-green: #4ade80;
  --c-blue-bg:  rgba(59, 130, 246, 0.15); --c-blue: #60a5fa;
  --c-purple-bg:rgba(168, 85, 247, 0.15); --c-purple: #c084fc;
  --c-amber-bg: rgba(245, 158, 11, 0.15); --c-amber: #fbbf24;
  --c-red-bg:   rgba(244, 88, 60, 0.12);  --c-red: #ff6a4d;
}

/* ── Light theme ──────────────────────────────────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;
  --bg: #fafaf9;
  --bg-2: #f4f4f5;
  --surface: rgba(0, 0, 0, 0.025);
  --surface-solid: #ffffff;
  --surface-hover: rgba(0, 0, 0, 0.045);
  --border: rgba(0, 0, 0, 0.09);
  --border-strong: rgba(0, 0, 0, 0.16);
  --text: #18181b;
  --text-secondary: #52525b;
  --text-tertiary: #a1a1aa;
  --glass: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(0, 0, 0, 0.08);
  --inverse-bg: #18181b;
  --inverse-text: #fafafa;
  --glow: rgba(0, 0, 0, 0.05);
  --scrollbar: rgba(0, 0, 0, 0.18);
  --scrollbar-hover: rgba(0, 0, 0, 0.32);
  --shadow-xl: 0 30px 60px -15px rgba(0, 0, 0, 0.18);
  --shadow-card: 0 8px 30px -10px rgba(0, 0, 0, 0.12);
  --grid-line: rgba(0, 0, 0, 0.04);
  --noise-opacity: 0.025;
  --cine-warm: rgba(244, 88, 60, 0.14);
  --cine-cool: rgba(80, 120, 220, 0.06);
  --cine-vignette: rgba(0, 0, 0, 0.08);
  --cine-spot: rgba(0, 0, 0, 0.03);
  --mockup-shadow:
    0 2px 6px rgba(0, 0, 0, 0.08),
    0 40px 80px -20px rgba(0, 0, 0, 0.22),
    0 80px 120px -40px rgba(244, 88, 60, 0.18);

  --c-green-bg: #dcfce7;  --c-green: #16a34a;
  --c-blue-bg:  #dbeafe;  --c-blue: #2563eb;
  --c-purple-bg:#f3e8ff;  --c-purple: #7c3aed;
  --c-amber-bg: #fef3c7;  --c-amber: #d97706;
  --c-red-bg:   #fee5e0;  --c-red: #e23a1c;
}

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

/* ── Scrollbars: transparent track, themed thumb ──────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background var(--transition-base), color var(--transition-base);
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }

/* page background: faint grid + radial glow + grain */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Layout helpers ───────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.section { padding-block: var(--space-24); position: relative; }
.section__head { text-align: center; max-width: 640px; margin-inline: auto; margin-block-end: var(--space-16); }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: var(--font-semibold);
  color: var(--text-secondary); letter-spacing: 0.04em; text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-full);
  background: var(--surface);
  margin-block-end: var(--space-4);
}
.section__title {
  font-size: clamp(1.75rem, 4vw, var(--text-3xl));
  font-weight: var(--font-extrabold); line-height: 1.1; letter-spacing: -0.02em;
}
.section__subtitle { color: var(--text-secondary); font-size: var(--text-lg); margin-block-start: var(--space-4); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-weight: var(--font-semibold); font-size: var(--text-base);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  transition: transform var(--transition-fast), background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn--primary {
  background: var(--inverse-bg); color: var(--inverse-text);
  box-shadow: 0 6px 20px -6px var(--glow);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px var(--glow); }
.btn--ghost {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.btn--ghost:hover { background: var(--surface-hover); border-color: var(--border-strong); transform: translateY(-2px); }
.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-lg); }
.btn--block { width: 100%; }

/* ── Glass primitive ──────────────────────────────────────────────────────── */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

/* ── Nav ──────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  border-block-end: 1px solid var(--border);
}
.nav__inner {
  display: flex; align-items: center; gap: var(--space-6);
  height: 68px;
  /* Nav stays a fixed LTR layout in both languages to avoid UI shift on toggle */
  direction: ltr;
}
.brand { display: inline-flex; align-items: center; gap: var(--space-3); font-weight: var(--font-bold); font-size: var(--text-lg); }
.brand__bolt { width: 30px; height: 30px; filter: drop-shadow(0 2px 8px rgba(99, 102, 241, 0.4)); }
.nav__links { display: flex; gap: var(--space-6); margin-inline-start: var(--space-8); }
.nav__links a { position: relative; color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--font-medium); transition: color var(--transition-fast); }
.nav__links a:hover { color: var(--text); }
.nav__links a::after {
  content: ''; position: absolute; inset-inline: 0; inset-block-end: -6px; height: 2px;
  border-radius: var(--radius-full); background: var(--text);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--transition-base);
}
.nav__links a.is-active { color: var(--text); }
.nav__links a.is-active::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .nav__links a::after { transition: none; }
}
.nav__spacer { flex: 1; }
.nav__actions { display: flex; align-items: center; gap: var(--space-3); }
.nav__cta { display: inline-flex; }

@media (max-width: 880px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
}

/* ── Language switch (sliding pill) ───────────────────────────────────────── */
.lang-switch {
  position: relative;
  display: inline-flex;
  direction: ltr; /* lives in fixed LTR nav; thumb math stays LTR in both languages */
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  padding: 3px;
  overflow: hidden;
  font-size: var(--text-xs); font-weight: var(--font-semibold);
}
.lang-switch__thumb {
  position: absolute; inset-block: 3px; left: 3px;
  width: calc(50% - 3px);
  background: var(--inverse-bg);
  border-radius: var(--radius-full);
  transition: transform var(--transition-spring);
}
.lang-switch[data-lang="en"] .lang-switch__thumb { transform: translateX(100%); }
.lang-switch__opt {
  position: relative; z-index: 1;
  padding: var(--space-2) var(--space-4);
  color: var(--text-secondary);
  transition: color var(--transition-base);
  min-width: 56px; text-align: center;
}
.lang-switch[data-lang="ar"] .lang-switch__opt[data-opt="ar"],
.lang-switch[data-lang="en"] .lang-switch__opt[data-opt="en"] { color: var(--inverse-text); }

/* ── Theme toggle (animated sun/moon) ─────────────────────────────────────── */
.theme-toggle {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-full);
  background: var(--surface);
  transition: background var(--transition-base), border-color var(--transition-base);
}
.theme-toggle:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.theme-toggle__icon { position: relative; width: 20px; height: 20px; }
.theme-toggle__icon svg {
  position: absolute; inset: 0; width: 20px; height: 20px;
  transition: transform var(--transition-spring), opacity var(--transition-base);
}
.theme-toggle__sun { color: #f59e0b; }
.theme-toggle__moon { color: var(--text); }
/* dark theme shows moon, light theme shows sun */
[data-theme="dark"] .theme-toggle__sun { opacity: 0; transform: rotate(-90deg) scale(0.5); }
[data-theme="dark"] .theme-toggle__moon { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="light"] .theme-toggle__sun { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="light"] .theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(0.5); }

/* ── Hero (cinematic, pinned zoom stage) ──────────────────────────────────── */
.hero {
  position: relative;   /* positioning context for absolute backdrop children */
  /* leave the first screen for: sticky nav (68px) + hero + trust strip (~108px),
     so the trust strip is visible at the fold, not pushed below it. */
  min-height: calc(100vh - 68px - 108px);
  overflow: hidden;
  display: flex; align-items: center;
  /* extra bottom room so centred content never collides with the scroll hint */
  padding-block: var(--space-10) var(--space-16);
}
/* cinematic ambient backdrop: warm key light + cool fill + vignette + drift */
.hero__cine {
  position: absolute; inset: -10% -10% 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 78% 28%, var(--cine-warm) 0%, transparent 60%),
    radial-gradient(55% 60% at 12% 75%, var(--cine-cool) 0%, transparent 65%),
    radial-gradient(40% 35% at 50% 18%, var(--cine-spot) 0%, transparent 70%);
  animation: cine-drift 22s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.hero__vignette {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 120% at 50% 40%, transparent 55%, var(--cine-vignette) 100%);
}
@keyframes cine-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.9; }
  50%  { transform: translate3d(-2%, 1.5%, 0) scale(1.06); opacity: 1; }
  100% { transform: translate3d(1.5%, -1%, 0) scale(1.03); opacity: 0.95; }
}
.hero__glow {
  position: absolute; z-index: -1;
  inset-block-start: -10%; inset-inline-end: -5%;
  width: 60vw; height: 60vw; max-width: 800px; max-height: 800px;
  background: radial-gradient(circle, var(--glow) 0%, transparent 65%);
  pointer-events: none;
}
.hero__grid {
  /* text column has a guaranteed minimum so it never gets squashed by the
     wide render; the visual column takes the remaining space and shrinks. */
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(0, 1.15fr);
  gap: var(--space-10);
  align-items: center; width: 100%;
}

/* word-by-word headline reveal on load */
.hero__title .word {
  display: inline-block;
  /* padding + negative margin keeps Arabic ascenders/descenders from being
     clipped by the inline-block box (and by background-clip:text on .grad) */
  padding-block: 0.12em; margin-block: -0.12em;
  opacity: 0; transform: translateY(0.4em);
  animation: word-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--w, 0) * 80ms + 120ms);
}
@keyframes word-rise { to { opacity: 1; transform: none; } }
.hero__copy > .hero__badge,
.hero__copy > .hero__subtitle,
.hero__copy > .hero__actions,
.hero__copy > .hero__note {
  opacity: 0; animation: fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero__copy > .hero__badge    { animation-delay: 0.05s; }
.hero__copy > .hero__subtitle { animation-delay: 0.45s; }
.hero__copy > .hero__actions  { animation-delay: 0.6s; }
.hero__copy > .hero__note     { animation-delay: 0.72s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero__title .word, .hero__copy > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero__cine { animation: none; }
}
.hero__badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-secondary);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--surface);
  margin-block-end: var(--space-6);
}
.hero__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 0 3px var(--c-green-bg); }
.hero__title {
  font-size: clamp(2.25rem, 5.5vw, var(--text-5xl));
  font-weight: var(--font-extrabold); line-height: 1.12; letter-spacing: -0.03em;
}
/* Arabic glyphs are taller, need extra leading so stacked lines don't crowd */
[dir="rtl"] .hero__title { line-height: 1.3; }
/* gradient headline: clip applies to the .word spans (so the split text shows).
   Falls back to clipping the .grad span itself when words aren't split. */
.hero__title .grad,
.hero__title .grad .word {
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero__subtitle {
  font-size: var(--text-lg); color: var(--text-secondary);
  margin-block: var(--space-6); max-width: 36ch;
}
.hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero__note { margin-block-start: var(--space-5); font-size: var(--text-sm); color: var(--text-tertiary); }
/* price chip: number + OMR symbol never split across lines */
.hero__price { display: inline-flex; align-items: center; gap: 2px; color: var(--text); white-space: nowrap; }
.hero__price svg { width: 0.85em; height: 0.85em; }

/* scroll hint centred near the bottom of the hero */
.hero__scrollhint {
  position: absolute; inset-block-end: var(--space-6); inset-inline: 0;
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--font-medium);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.hero__scrollhint:hover { color: var(--text); }
.hero__scrollhint-arrow { animation: hint-bob 1.6s ease-in-out infinite; font-size: var(--text-lg); }
@keyframes hint-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* .hero__visual is a column-sized box with the device's aspect ratio. It's a
   query container so the mockup's internals can size in cqw and scale with it
   (pure CSS, no JS measuring) — content never overflows the box. */
.hero__visual {
  position: relative;
  width: 100%; min-width: 0;
  /* device aspect ratio gives the box height from its column width. inline-size
     containment lets the mockup inside scale via cqw (works on descendants),
     without the height-circularity that container-type:size + aspect-ratio has. */
  aspect-ratio: 1.75 / 1;
  container-type: inline-size;
  z-index: 2;
}

@media (max-width: 920px) {
  /* stacked layout: copy then the app mockup; size to content (no forced screen) */
  .hero { min-height: 0; }
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .hero__subtitle { max-width: none; }
  .hero__scrollhint { display: none; }
  /* narrow + centre the mockup so it scales down (it sizes off this box width) */
  .hero__visual { width: 85%; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scrollhint-arrow { animation: none; }
}

/* ── 3D App Mockup (cinematic) ────────────────────────────────────────────── */
.mockup-stage { perspective: 1800px; perspective-origin: 50% 30%; position: relative; }
/* spotlight pooled behind the floating device */
.mockup-stage::before {
  content: ''; position: absolute; z-index: -1;
  inset: -18% -14%;
  background: radial-gradient(50% 50% at 60% 45%, var(--cine-warm) 0%, transparent 70%);
  filter: blur(20px);
  opacity: 0.9;
  pointer-events: none;
}
/* register the tilt angles as animatable <angle>s so they can transition (plain
   custom props can't). This lets the tilt ease back to the resting angle when the
   cursor leaves instead of snapping. */
@property --rx { syntax: '<angle>'; inherits: false; initial-value: 6deg; }
@property --ry { syntax: '<angle>'; inherits: false; initial-value: -16deg; }

.mockup {
  /* --rx/--ry: live cursor tilt (set by JS on the stage). */
  --rx: 6deg; --ry: -16deg;
  /* FIXED design canvas (1040px wide, ~1.75:1), uniformly scaled down to the
     column with a container-query unit so all px internals stay proportional
     and the content never overflows (replaces the old JS scale(--fit)). */
  --mk-fit: min(1, calc(100cqw / 1040px));
  /* anchor the 1040px canvas at the column's horizontal centre, top-aligned, then
     pull it back by half its width. PHYSICAL left:50% (not inset-inline-start) so it
     pairs with the physical translateX(-50%) — both stay put when dir flips, which
     is what keeps it identical (and visible) in LTR and RTL. The `top center` origin
     keeps scale + tilt symmetric. The down-scaled box fills the column width. */
  position: absolute; top: 0; left: 50%;
  width: 1040px; flex: none;
  aspect-ratio: 1.75 / 1;
  /* translateX(-50%) centres the box; scale() fits it to the column; the tilt is
     wrapped in translateY(±50%) so rotateX/Y pivot around the mockup's centre
     (origin is the top edge) instead of an edge/corner. */
  transform: translateX(-50%) scale(var(--mk-fit)) translateY(50%) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-50%);
  transform-origin: top center;
  display: flex; flex-direction: column;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--mockup-shadow), 0 0 0 1px var(--border-strong);
  background: var(--surface-solid);
  transition: box-shadow var(--transition-base), --rx 300ms ease-out, --ry 300ms ease-out;
  will-change: transform;
}
[dir="rtl"] .mockup { --ry: 16deg; }
/* subtle screen glare sweeping across the mockup */
.mockup::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.10) 48%, transparent 60%);
  mix-blend-mode: overlay;
}
.mockup__chrome {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-2);
  border-block-end: 1px solid var(--border);
  flex: none;
}
.mockup__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.mockup__title { margin-inline-start: auto; color: var(--text-tertiary); font-size: var(--text-xs); font-weight: var(--font-medium); }
.mockup__app { display: flex; flex: 1; min-height: 0; font-size: 15px; }

/* mockup sidebar */
.mk-side {
  width: 150px; flex: none; padding: var(--space-3);
  background: var(--bg-2); border-inline-end: 1px solid var(--border);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.mk-side__brand { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--font-bold); margin-block-end: var(--space-3); padding: var(--space-1); }
.mk-side__brand img { width: 18px; height: 18px; }
.mk-nav { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-sm); color: var(--text-secondary); }
.mk-nav.is-active { background: var(--surface-hover); color: var(--text); font-weight: var(--font-semibold); }
.mk-nav__ico { width: 14px; height: 14px; border-radius: 4px; background: var(--surface-hover); flex: none; }
.mk-nav.is-active .mk-nav__ico { background: var(--inverse-bg); }

/* mockup main */
.mk-main { flex: 1; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; min-height: 0; overflow: hidden; }
.mk-welcome { font-weight: var(--font-bold); font-size: var(--text-sm); }
.mk-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); flex: none; }
.mk-kpi {
  position: relative;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-2); background: var(--surface);
  display: flex; flex-direction: column; gap: 2px;
}
/* trend chip in the corner like the real dashboard */
.mk-kpi__trend { position: absolute; inset-block-start: var(--space-2); inset-inline-end: var(--space-2); }
.mk-kpi__ico { width: 32px; height: 32px; border-radius: var(--radius-md); display: grid; place-items: center; }
.mk-kpi__ico svg { width: 18px; height: 18px; }
.mk-kpi__val { font-weight: var(--font-bold); font-size: 1.35em; display: flex; align-items: center; gap: 3px; margin-block-start: 2px; }
.mk-kpi__val svg { width: 0.8em; height: 0.8em; }
.mk-kpi__label { color: var(--text-tertiary); font-size: 0.8em; }
.mk-kpi__trend { font-size: 0.78em; font-weight: var(--font-semibold); color: var(--text-tertiary); }
.mk-kpi__trend--up { color: var(--c-green); }
.mk-kpi__trend--warn { color: var(--c-amber); }
.ico-green  { background: var(--c-green-bg);  color: var(--c-green); }
.ico-blue   { background: var(--c-blue-bg);   color: var(--c-blue); }
.ico-purple { background: var(--c-purple-bg); color: var(--c-purple); }
.ico-amber  { background: var(--c-amber-bg);  color: var(--c-amber); }

/* chart + donut sit side by side; fills the remaining main height */
.mk-grid2 { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--space-3); flex: 1; min-height: 140px; }
.mk-chart {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); padding: var(--space-3); min-height: 0;
  display: flex; flex-direction: column; gap: var(--space-2); overflow: hidden;
}
.mk-chart__title { font-weight: var(--font-semibold); color: var(--text-secondary); }
.mk-chart__svg { flex: 1; width: 100%; }
.mk-chart__line { fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mk-chart__area { fill: url(#mkfade); opacity: 0.5; }
.mk-chart__peak { fill: var(--c-green); stroke: var(--surface-solid); stroke-width: 1.5; }

/* category donut (conic ring) */
.mk-donut {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2); align-items: stretch;
  min-height: 0; overflow: hidden;
}
.mk-donut__ring {
  position: relative;
  place-self: center; margin: auto;
  width: 108px; height: 108px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
}
/* the ring is a pseudo so the center number stays fully visible */
.mk-donut__ring::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--text) 0 49%, var(--c-blue) 49% 64%, var(--c-purple) 64% 79%, var(--c-amber) 79% 90%, var(--border-strong) 90% 100%);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%);
  mask: radial-gradient(circle, transparent 54%, #000 55%);
}
.mk-donut__center { position: relative; z-index: 1; font-weight: var(--font-bold); font-size: var(--text-sm); color: var(--text); }

.mk-tx { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: var(--space-1) var(--space-3); flex: none; }
.mk-tx__row { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-1); }
.mk-tx__row + .mk-tx__row { border-block-start: 1px solid var(--border); }
.mk-tx__id { color: var(--text-tertiary); }
.mk-tx__amt { font-weight: var(--font-semibold); display: inline-flex; align-items: center; gap: 2px; }
.mk-tx__amt svg { width: 0.8em; height: 0.8em; }
.mk-pill { font-size: 0.625rem; padding: 1px 6px; border-radius: var(--radius-full); background: var(--c-green-bg); color: var(--c-green); font-weight: var(--font-semibold); }

@media (max-width: 480px) {
  /* the mockup scales as a whole via cqw, so internals keep their proportions;
     just flatten the 3D tilt a touch on small screens */
  .mockup { --rx: 3deg; --ry: -8deg; }
}

/* ── Trust strip ──────────────────────────────────────────────────────────── */
.trust { border-block: 1px solid var(--border); padding-block: var(--space-8); }
.trust__row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4) var(--space-8); }
.trust__item { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-weight: var(--font-medium); font-size: var(--text-sm); }
.trust__item svg { width: 18px; height: 18px; color: var(--text); }

/* ── Stats band ───────────────────────────────────────────────────────────── */
.stats { padding-block: var(--space-16); }
.stats__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6);
  text-align: center;
}
.stat {
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(10px);
}
.stat__num {
  font-size: clamp(2rem, 5vw, var(--text-4xl));
  font-weight: var(--font-extrabold); letter-spacing: -0.03em; line-height: 1;
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  /* keep digits LTR so a count-up never reorders under RTL */
  direction: ltr; unicode-bidi: isolate;
}
.stat__num--infinity { font-size: clamp(2.4rem, 6vw, 3.4rem); }
.stat__label { color: var(--text-secondary); font-size: var(--text-sm); margin-block-start: var(--space-2); font-weight: var(--font-medium); }
@media (max-width: 720px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Testimonials ─────────────────────────────────────────────────────────── */
.testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.testimonial {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(10px);
  transition: transform var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}
.testimonial:hover { transform: translateY(-4px); border-color: var(--border-strong); background: var(--surface-hover); }
.testimonial__stars { display: flex; gap: 2px; color: var(--c-amber); }
.testimonial__stars svg { width: 16px; height: 16px; }
.testimonial__quote { font-size: var(--text-base); line-height: 1.7; color: var(--text); flex: 1; }
.testimonial__by { display: flex; align-items: center; gap: var(--space-3); }
.testimonial__avatar {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-grad); color: #fff;
  font-weight: var(--font-bold); font-size: var(--text-base);
}
.testimonial__name { display: block; font-weight: var(--font-semibold); font-size: var(--text-sm); }
.testimonial__meta { display: block; color: var(--text-tertiary); font-size: var(--text-xs); }
@media (max-width: 920px) { .testimonials__grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* ── FAQ (native disclosure) ──────────────────────────────────────────────── */
.faq__container { max-width: 760px; }
.faq__list { display: flex; flex-direction: column; gap: var(--space-3); }
.faq__item {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); backdrop-filter: blur(10px);
  overflow: hidden;
  transition: border-color var(--transition-base), background var(--transition-base);
}
.faq__item[open] { border-color: var(--border-strong); background: var(--surface-hover); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-weight: var(--font-semibold); font-size: var(--text-lg);
  cursor: pointer; list-style: none; user-select: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; border-radius: var(--radius-lg); }
.faq__chev {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: var(--radius-full);
  background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary);
  transition: transform var(--transition-spring), background var(--transition-base), color var(--transition-base);
}
.faq__chev svg { width: 16px; height: 16px; }
.faq__item[open] .faq__chev { transform: rotate(180deg); background: var(--inverse-bg); color: var(--inverse-text); border-color: transparent; }
.faq__a { padding: 0 var(--space-6) var(--space-5); color: var(--text-secondary); line-height: 1.7; }
/* gentle open animation (respects reduced-motion globally) */
.faq__item[open] .faq__a { animation: faq-open 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ── Features grid ────────────────────────────────────────────────────────── */
.features__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
}
.feature {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(10px);
  transition: transform var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}
.feature:hover { transform: translateY(-4px); border-color: var(--border-strong); background: var(--surface-hover); }
.feature__ico {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  display: grid; place-items: center; margin-block-end: var(--space-4);
  background: var(--inverse-bg); color: var(--inverse-text);
}
.feature__ico svg { width: 22px; height: 22px; }
.feature__title { font-weight: var(--font-bold); font-size: var(--text-lg); margin-block-end: var(--space-2); }
.feature__desc { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.6; }

@media (max-width: 920px) { .features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .features__grid { grid-template-columns: 1fr; } }

/* ── Showcase ─────────────────────────────────────────────────────────────── */
.showcase__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16);
  align-items: center;
}
.showcase__row + .showcase__row { margin-block-start: var(--space-24); }
.showcase__row--rev .showcase__visual { order: -1; }
.showcase__title { font-size: var(--text-2xl); font-weight: var(--font-extrabold); letter-spacing: -0.02em; }
.showcase__text { color: var(--text-secondary); margin-block: var(--space-4) var(--space-6); }
.showcase__list { display: flex; flex-direction: column; gap: var(--space-3); }
.showcase__list li { display: flex; align-items: flex-start; gap: var(--space-3); }
.showcase__list svg { width: 20px; height: 20px; color: var(--c-green); flex: none; margin-block-start: 2px; }
.showcase__visual { perspective: 1600px; }
.panel-tilt {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
  background: var(--surface-solid);
  transform: rotateY(-12deg) rotateX(5deg);
  transition: transform var(--transition-spring);
}
.showcase__row--rev .panel-tilt { transform: rotateY(12deg) rotateX(5deg); }
.showcase__visual:hover .panel-tilt { transform: rotateY(0) rotateX(0); }
[dir="rtl"] .panel-tilt { transform: rotateY(12deg) rotateX(5deg); }
[dir="rtl"] .showcase__row--rev .panel-tilt { transform: rotateY(-12deg) rotateX(5deg); }

@media (max-width: 920px) {
  .showcase__row, .showcase__row--rev { grid-template-columns: 1fr; gap: var(--space-10); }
  .showcase__row--rev .showcase__visual { order: 0; }
  .panel-tilt, .showcase__row--rev .panel-tilt,
  [dir="rtl"] .panel-tilt, [dir="rtl"] .showcase__row--rev .panel-tilt { transform: none; }
}

/* analytics mini panel (showcase 1) */
.mk-analytics { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--text-xs); }
.mk-analytics__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.mk-stat { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); background: var(--surface); }
.mk-stat__val { font-size: var(--text-lg); font-weight: var(--font-bold); display: flex; align-items: center; gap: 2px; }
.mk-stat__val svg { width: 0.8em; height: 0.8em; }
.mk-stat__label { color: var(--text-tertiary); }
.mk-bars { display: flex; align-items: flex-end; gap: var(--space-2); height: 110px; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.mk-bar { flex: 1; border-radius: 4px 4px 0 0; background: var(--inverse-bg); opacity: 0.85; }

/* receipt panel (showcase 2) — a real thermal slip on a grey tray */
/* always-light receipt palette (real paper is white, regardless of page theme) */
.mk-receipt-tray {
  perspective: 1400px; display: flex; justify-content: center; padding-block: var(--space-4);
  --r-bg: #ffffff; --r-text: #1a1a1a; --r-muted: #8a8a8a; --r-soft: #5f5f5f;
  --r-border: #e6e6e6; --r-border-strong: #cfcfcf;
}
.mk-receipt {
  width: 250px;
  background: var(--r-bg);
  color: var(--r-text);
  font-family: var(--font-sans);
  font-size: 12px; line-height: 1.5;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--r-border);
  box-shadow: var(--shadow-xl);
  transform: rotateY(-14deg) rotateX(6deg);
  transform-origin: center center;
  transition: transform var(--transition-spring);
}
.mk-receipt-tray:hover .mk-receipt { transform: rotateY(0) rotateX(0); }
[dir="rtl"] .mk-receipt { transform: rotateY(14deg) rotateX(6deg); }
/* OMR symbol must be inline (the global reset sets svg{display:block}, which
   was forcing the symbol onto its own line under the number) */
.mk-receipt svg { display: inline-block; width: 0.85em; height: 0.85em; vertical-align: -0.06em; }
/* keep every "<number><OMR symbol>" pair on one line (no wrap under) */
.mk-receipt__meta-row span, .mk-receipt__item-sub, .mk-receipt__item-t, .mk-receipt__row span {
  white-space: nowrap;
}
/* amounts (digits + OMR symbol) always render LTR so they don't reorder in Arabic */
.mk-receipt__item-sub, .mk-receipt__item-t, .mk-receipt__row span:last-child {
  direction: ltr; unicode-bidi: isolate;
}
[dir="rtl"] .mk-receipt__item-t, [dir="rtl"] .mk-receipt__row span:last-child { text-align: end; }
.mk-receipt__div { border-top: 1px dashed var(--r-border-strong); margin-block: var(--space-3); }

.mk-receipt__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.mk-receipt__head img { width: 30px; height: 30px; filter: drop-shadow(0 2px 6px rgba(99,102,241,0.35)); }
.mk-receipt__store { font-weight: var(--font-bold); font-size: var(--text-base); letter-spacing: -0.01em; }
.mk-receipt__sub { color: var(--r-muted); font-size: 10px; }

.mk-receipt__meta { display: flex; flex-direction: column; gap: 3px; }
.mk-receipt__meta-row { display: flex; justify-content: space-between; }
.mk-receipt__meta-row span:first-child { color: var(--r-muted); }
.mk-receipt__meta-row span:last-child { font-weight: var(--font-medium); }

.mk-receipt__items { display: flex; flex-direction: column; gap: var(--space-3); }
.mk-receipt__item { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; }
.mk-receipt__item-l { display: flex; flex-direction: column; min-width: 0; }
.mk-receipt__item-name { font-weight: var(--font-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-receipt__item-sub { color: var(--r-muted); font-size: 10px; }
.mk-receipt__item-t { font-weight: var(--font-semibold); white-space: nowrap; }

.mk-receipt__totals { display: flex; flex-direction: column; gap: 4px; }
.mk-receipt__row { display: flex; justify-content: space-between; }
.mk-receipt__row span:first-child { color: var(--r-soft); }
.mk-receipt__row--total {
  font-weight: var(--font-bold); font-size: var(--text-base);
  padding-block: var(--space-2); margin-block: 2px;
  border-block: 1px solid var(--r-border);
}
.mk-receipt__row--total span:first-child { color: var(--r-text); }

.mk-receipt__barcode { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin-block-start: var(--space-2); }
.mk-receipt__bars {
  width: 85%; height: 42px; border-radius: 3px;
  background: repeating-linear-gradient(90deg,
    var(--r-text) 0 2px, transparent 2px 4px, var(--r-text) 4px 5px, transparent 5px 8px,
    var(--r-text) 8px 11px, transparent 11px 12px, var(--r-text) 12px 13px, transparent 13px 16px);
}
.mk-receipt__code { color: var(--r-soft); letter-spacing: 0.3em; font-size: 11px; font-weight: var(--font-semibold); font-family: var(--font-mono, monospace); }

/* ── In-form plan selector ─────────────────────────────────────────────────── */
.plan-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: start; }
.plan-card {
  position: relative; text-align: start; cursor: pointer;
  display: flex; flex-direction: column;
  padding: var(--space-4); padding-inline-end: var(--space-8);
  border-radius: var(--radius-md); border: 1px solid var(--border-strong);
  background: var(--surface-solid); color: var(--text);
  font-family: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.plan-card:hover { border-color: var(--text-tertiary); }
.plan-card--selected { border-color: var(--text); box-shadow: 0 0 0 3px var(--glow); background: var(--surface-hover); }
.plan-card:focus-visible { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px var(--glow); }

.plan-card__tag {
  position: absolute; inset-block-start: 0; inset-inline-end: var(--space-4); transform: translateY(-50%);
  font-size: var(--text-xs); font-weight: var(--font-bold);
  padding: 1px var(--space-2); border-radius: var(--radius-full);
  background: var(--brand-grad); color: #fff; letter-spacing: 0.02em;
}
.plan-card__name { font-weight: var(--font-bold); font-size: var(--text-base); }
.plan-card__price { display: flex; align-items: baseline; gap: var(--space-1); flex-wrap: wrap; margin-block-start: var(--space-1); }
.plan-card__amount { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-2xl); font-weight: var(--font-extrabold); letter-spacing: -0.02em; }
.plan-card__amount svg { width: 0.7em; height: 0.7em; }
.plan-card__cycle { color: var(--text-tertiary); font-size: var(--text-xs); }
.plan-card__save { color: var(--c-green); font-size: var(--text-xs); font-weight: var(--font-semibold); min-height: 1em; margin-block-start: var(--space-1); }

/* shared feature list below the cards, reflects the selected plan */
.plan-features {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin-block-start: var(--space-4);
}
.plan-features li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.plan-features svg { width: 16px; height: 16px; color: var(--c-green); flex: none; margin-block-start: 2px; }
.plan-features__note {
  margin-block-start: var(--space-2);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--c-red) 35%, var(--border));
  border-radius: var(--radius-md);
  background: var(--c-red-bg);
  color: var(--c-red) !important;
  line-height: 1.55;
}
.plan-features__note svg { color: var(--c-red) !important; }

/* selection check, hidden until the card is selected */
.plan-card__check {
  position: absolute; inset-block-start: var(--space-4); inset-inline-end: var(--space-3);
  width: 18px; height: 18px; border-radius: var(--radius-full);
  display: grid; place-items: center;
  background: var(--text); color: var(--inverse-text);
  opacity: 0; transform: scale(0.6); transition: opacity var(--transition-fast), transform var(--transition-spring);
}
.plan-card__check svg { width: 12px; height: 12px; }
.plan-card--selected .plan-card__check { opacity: 1; transform: scale(1); }

@media (max-width: 440px) { .plan-cards { grid-template-columns: 1fr; } }

/* ── Signup form ──────────────────────────────────────────────────────────── */
.signup { }
.signup__card {
  max-width: 560px; margin-inline: auto;
  padding: var(--space-10);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--shadow-card);
}
.field { margin-block-end: var(--space-4); }
.field__label { display: block; font-size: var(--text-sm); font-weight: var(--font-medium); margin-block-end: var(--space-2); color: var(--text-secondary); }
.field__label .req { color: var(--c-amber); }
.field__input, .field__select {
  width: 100%; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-solid); color: var(--text);
  font-size: var(--text-base); font-family: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field__input::placeholder { color: var(--text-tertiary); }
/* custom chevron with breathing room (native arrow had no end padding) */
.field__select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-inline-end: var(--space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
}
[dir="rtl"] .field__select { background-position: left var(--space-4) center; }
.field__input:focus, .field__select:focus {
  outline: none; border-color: var(--text);
  box-shadow: 0 0 0 3px var(--glow);
}
.field__input.is-invalid { border-color: var(--c-amber); }
.field__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
/* ── consent checkbox ─────────────────────────────────────────────────────── */
.consent {
  display: flex; align-items: flex-start; gap: var(--space-3);
  margin-block: var(--space-4) var(--space-3);
  cursor: pointer; user-select: none;
  font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6;
}
.consent__box { position: absolute; opacity: 0; width: 0; height: 0; }
.consent__check {
  flex: none; width: 22px; height: 22px; margin-block-start: 1px;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm);
  display: grid; place-items: center;
  color: var(--inverse-text); background: transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.consent__check svg { width: 14px; height: 14px; opacity: 0; transform: scale(0.6); transition: opacity var(--transition-fast), transform var(--transition-fast); }
.consent__box:checked + .consent__check { background: var(--inverse-bg); border-color: var(--inverse-bg); }
.consent__box:checked + .consent__check svg { opacity: 1; transform: none; }
.consent__box:focus-visible + .consent__check { box-shadow: 0 0 0 3px var(--glow); }
.consent__text a { color: var(--text); font-weight: var(--font-semibold); text-decoration: underline; text-underline-offset: 2px; }
.consent__text a:hover { opacity: 0.8; }
.consent.is-invalid .consent__check { border-color: var(--c-amber); }
.consent.is-invalid .consent__text { color: var(--c-amber); }
.consent--shake { animation: consent-shake 0.4s ease; }
@keyframes consent-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) { .consent--shake { animation: none; } }

.signup__error { color: var(--c-amber); font-size: var(--text-sm); min-height: 1.2em; margin-block-end: var(--space-2); }
.signup__success {
  text-align: center; padding: var(--space-8) var(--space-4);
  display: none; flex-direction: column; align-items: center; gap: var(--space-3);
}
.signup__success.is-shown { display: flex; animation: success-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.signup__success-ico { width: 56px; height: 56px; border-radius: 50%; background: var(--c-green-bg); color: var(--c-green); display: grid; place-items: center; animation: success-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both; }
.signup__success-ico svg { width: 28px; height: 28px; }
.signup.is-done .signup__form { display: none; }

@keyframes success-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes success-pop { 0% { transform: scale(0); } to { transform: scale(1); } }

/* ── submit button spinner ────────────────────────────────────────────────── */
.btn__spinner {
  width: 18px; height: 18px; flex: none;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%;
  display: none;
}
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__spinner { display: inline-block; animation: btn-spin 0.6s linear infinite; }
.btn.is-loading .btn__label { opacity: 0.75; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn.is-loading .btn__spinner { animation-duration: 1.2s; }
  .signup__success.is-shown, .signup__success-ico { animation: none; }
}

@media (max-width: 480px) {
  .field__row { grid-template-columns: 1fr; gap: 0; }
  .field__row .field { margin-block-end: var(--space-4); }
  .signup__card { padding: var(--space-6); }
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.footer { border-block-start: 1px solid var(--border); padding-block: var(--space-12); }
.footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-8); justify-content: space-between; }
.footer__brand { max-width: 280px; }
.footer__tagline { color: var(--text-secondary); font-size: var(--text-sm); margin-block-start: var(--space-3); }
.footer__col h4 { font-size: var(--text-sm); font-weight: var(--font-bold); margin-block-end: var(--space-3); }
.footer__col a, .footer__col span { display: block; color: var(--text-secondary); font-size: var(--text-sm); margin-block-end: var(--space-2); transition: color var(--transition-fast); }
.footer__col a:hover { color: var(--text); }
.footer__address { display: block; color: var(--text-secondary); font-size: var(--text-sm); margin-block-start: var(--space-3); }

/* ── contact / social icon buttons (shared: footer row + header) ──────────── */
.footer__social { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-4); }
.footer__social a { width: 36px; height: 36px; border-radius: var(--radius-md); border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-secondary); transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast); }
.footer__social a:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface); transform: translateY(-2px); }
.footer__social svg { width: 18px; height: 18px; }

/* header variant: smaller, sits in the nav action cluster */
.nav__social { display: flex; align-items: center; gap: var(--space-1); }
.nav__social a {
  width: 34px; height: 34px; border-radius: var(--radius-full);
  display: grid; place-items: center; color: var(--text-secondary);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.nav__social a:hover { color: var(--text); background: var(--surface-hover); }
.nav__social svg { width: 17px; height: 17px; }

/* brand-coloured hovers, both contexts */
.footer__social a[aria-label="WhatsApp"]:hover, .nav__social a[aria-label="WhatsApp"]:hover,
.footer__social a[aria-label="واتساب"]:hover, .nav__social a[aria-label="واتساب"]:hover { color: #25d366; }
.footer__social a[aria-label="Instagram"]:hover, .nav__social a[aria-label="Instagram"]:hover,
.footer__social a[aria-label="انستغرام"]:hover, .nav__social a[aria-label="انستغرام"]:hover { color: #e1306c; }

/* hide the header icons on narrow screens to keep the nav tidy */
@media (max-width: 720px) {
  .nav__social { display: none; }
}
.footer__bottom { margin-block-start: var(--space-10); padding-block-start: var(--space-6); border-block-start: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; color: var(--text-tertiary); font-size: var(--text-sm); }

/* ── Scroll reveal (stagger + directional) ────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 700ms ease, transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal--left  { transform: translateX(-36px); }
.reveal--right { transform: translateX(36px); }
.reveal--scale { transform: scale(0.94); }
.reveal.is-visible { opacity: 1; transform: none; }

/* staggered children: each child fades up slightly after the previous */
.reveal-group.is-visible > * {
  animation: fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.reveal-group > * { opacity: 0; }
.reveal-group.is-visible > * { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--left, .reveal--right, .reveal--scale { opacity: 1; transform: none; }
  .reveal-group > *, .reveal-group.is-visible > * { opacity: 1; animation: none; }
}

/* ── View transition (theme circle-wipe — ported from firePOS) ────────────── */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 1; }
::view-transition-old(root) { z-index: 0; }
.theme-transitioning * { transition: none !important; }

/* OMR symbol: sane default inline size wherever a more specific rule isn't set */
svg:has(use[href="#omr"]) { width: 0.85em; height: 0.85em; vertical-align: -0.08em; }

/* hide empty config-driven elements */
[hidden] { display: none !important; }