/*
 * Flash landing page — single stylesheet, no external fonts or libraries.
 * Layout uses logical properties (inline-start/end) so dir="rtl" mirrors the
 * whole page for Arabic without separate rules. Colors come from the Flash
 * app and its leaflet: purple #7550E8 (hero gradient #8160F0 → #5B37D0),
 * lavender tiles #EFEAFD, page #F7F7FB, warm yellow #FFC93C for highlights.
 */

/* ---------- Fonts (Tajawal, SIL OFL — see /site/licenses/) ---------- */
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/tajawal-400.woff2') format('woff2'); }
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/tajawal-700.woff2') format('woff2'); }
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/tajawal-800.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  --font: 'Tajawal', 'Segoe UI', Tahoma, system-ui, -apple-system, 'Noto Sans Arabic', Arial, sans-serif;

  --bg: #f7f7fb;
  --bg-alt: #ffffff;
  --surface: #ffffff;
  --text: #1f1d2b;
  --text-muted: #5e5a72;
  --border: #e9e6f3;
  --border-strong: #d4cfe6;

  --purple: #7550e8;
  --purple-hover: #6440dc;
  --purple-dark: #5b37d0;
  --hero-start: #8160f0;
  --lavender: #efeafd;
  --mist: #f5f2fe;
  --yellow: #ffc93c;
  --yellow-hover: #ffbd14;

  --night: #1b1530;
  --night-2: #241c3f;
  --night-text: #f3f0ff;
  --night-muted: #b8b2cf;
  --night-border: rgba(255, 255, 255, 0.12);

  --on-purple: #ffffff;
  --on-purple-muted: #ebe6ff;
  --purple-border: rgba(255, 255, 255, 0.2);

  --success: #067647;
  --whatsapp: #15803d;
  --whatsapp-hover: #166534;

  --focus: #7550e8;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(31, 29, 43, 0.05), 0 2px 8px -4px rgba(91, 55, 208, 0.12);
  --shadow: 0 18px 40px -22px rgba(91, 55, 208, 0.38);
  --header-h: 62px;
  --gutter: clamp(16px, 4vw, 32px);
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 93.75%; /* 15 px: the whole site one step smaller */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html[lang="ar"] body { line-height: 1.8; }

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

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

h2 {
  font-size: clamp(1.55rem, 1.1rem + 1.7vw, 2.2rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 800;
}

h3 { font-size: 1.16rem; line-height: 1.4; font-weight: 700; }

html[lang="ar"] h2,
html[lang="ar"] h3 { letter-spacing: 0; line-height: 1.5; }

a { color: var(--purple); text-underline-offset: 3px; }
a:hover { color: var(--purple-dark); }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

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

/* Purple and dark areas: a yellow focus ring stays visible. */
.hero,
.stats,
.section-dark,
.plan-featured,
.feature-wide,
.site-footer,
.lightbox { --focus: #ffc93c; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Iconsax glyphs (filled outlines from the app's icon font). */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: currentColor;
}

[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

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

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow);
}
.skip-link:focus { top: 12px; }

main:focus { outline: none; }

/* boot.js: another language is about to replace the Arabic text — keep the
   page hidden for that instant so nothing jumps. */
.lang-pending body { visibility: hidden; }

/* ---------- Buttons ---------- */
/* Flat and compact: no shadows, one radius, only the colour changes on hover. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.94rem;
  line-height: 1.25;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn .icon { width: 1.15em; height: 1.15em; }
.btn-sm { min-height: 36px; padding: 6px 14px; font-size: 0.88rem; }
.btn-lg { min-height: 46px; padding: 10px 22px; font-size: 0.98rem; }
.btn-block { width: 100%; }

.btn-primary { background: var(--purple); color: #fff; }
.btn-primary:hover { background: var(--purple-hover); color: #fff; }

/* The main call to action: warm yellow, as the leaflet's highlight. */
.btn-accent { background: var(--yellow); color: var(--text); }
.btn-accent:hover { background: var(--yellow-hover); color: var(--text); }

.btn-ghost-light { background: rgba(20, 10, 60, 0.22); color: #fff; border-color: rgba(255, 255, 255, 0.36); }
.btn-ghost-light:hover { background: rgba(20, 10, 60, 0.32); color: #fff; border-color: rgba(255, 255, 255, 0.6); }

.btn-outline-light { background: rgba(20, 10, 60, 0.18); color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.btn-outline-light:hover { color: #fff; border-color: #fff; background: rgba(20, 10, 60, 0.28); }

.btn-whatsapp { background: var(--whatsapp); color: #fff; }
.btn-whatsapp:hover { background: var(--whatsapp-hover); color: #fff; }

.phone-num { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

.btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--border); box-shadow: 0 10px 30px -24px rgba(91, 55, 208, 0.5); }

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
}
.brand:hover { color: var(--text); }

.brand-logo { display: inline-flex; align-items: center; }
.brand-logo img { height: 40px; width: auto; }
.brand-footer .brand-logo img { width: 120px; height: 76px; }
.brand-wordmark {
  display: none;
  font-weight: 800;
  font-style: italic;
  font-size: 1.45rem;
  letter-spacing: 0.02em;
}
[data-img-fallback].img-missing img { display: none; }
[data-img-fallback].img-missing .brand-wordmark { display: inline; }

/* «أقساط» pill, as on the app's launcher icon. */
.brand-tag {
  display: inline-block;
  padding: 3px 12px 2px;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.site-nav { margin-inline-start: auto; }
.nav-list { display: flex; gap: 2px; }
.nav-list a {
  display: block;
  padding: 8px 12px;
  border-radius: 10px;
  color: #3d3a4f;
  font-size: 0.98rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.nav-list a:hover { color: var(--purple-dark); background: var(--mist); }

.header-actions { display: flex; align-items: center; gap: 10px; }
/* The header's download button: compact and always on one line. */
.header-cta { white-space: nowrap; }
/* Just above the menu breakpoint the full row is tight (Arabic labels are long). */
@media (min-width: 1100px) and (max-width: 1279px) {
  .nav-list a { padding-inline: 8px; font-size: 0.93rem; }
  .header-actions { gap: 8px; }
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 5px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}
.lang-toggle:hover { background: var(--mist); border-color: var(--purple); }
.lang-toggle .icon { width: 1.15em; height: 1.15em; color: var(--purple); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
}
.nav-toggle .icon { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.site-header.nav-open .nav-toggle .icon-open { display: none; }
.site-header.nav-open .nav-toggle .icon-close { display: block; }

/* Narrow screens: the links fold into a menu button. The layout is chosen
   by the `scripting` media feature (not a class set by main.js), so the
   first paint already has the final header: no layout shift. */
@media (max-width: 1099px) {
  .nav-toggle { display: inline-flex; }
  .header-inner { gap: 12px; }
  .header-actions { margin-inline-start: auto; }
  .site-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    margin: 0;
    padding: 8px var(--gutter) 20px;
    background: #fff;
    box-shadow: 0 24px 40px -24px rgba(91, 55, 208, 0.45);
    border-bottom: 1px solid var(--border);
  }
  .site-header.nav-open .site-nav { display: block; }
  .nav-list { flex-direction: column; gap: 2px; }
  .nav-list a { padding: 13px 12px; font-size: 1.05rem; }
}
/* Without JavaScript the menu button cannot open: show the links instead. */
@media (max-width: 1099px) and (scripting: none) {
  .nav-toggle { display: none; }
  .header-inner { flex-wrap: wrap; padding-block: 8px; }
  .site-nav {
    display: block;
    position: static;
    order: 3;
    width: 100%;
    overflow-x: auto;
    padding: 0;
    background: none;
    box-shadow: none;
    border: 0;
  }
  .nav-list { flex-direction: row; }
  .nav-list a { padding: 8px 12px; font-size: 0.98rem; }
}

@media (max-width: 560px) {
  .header-cta { display: none; }
  .brand-logo img { height: 38px; }
}

/* ---------- Hero ---------- */
.hero-wrap { background: var(--bg-alt); }
/* The leaflet's soft white rings are painted as backgrounds (not boxes), so
   they can never register as a layout shift. */
.hero {
  --ring: rgba(255, 255, 255, 0.07);
  --ring-w: clamp(14px, 1.8vw, 22px);
  --ring-1: clamp(150px, 19vw, 280px);
  --ring-2: clamp(100px, 13vw, 190px);
  --ring-1-x: 92%;
  --ring-2-x: 5%;
  --glow-x: 85%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at var(--ring-1-x) -4%, transparent calc(var(--ring-1) - 1px), var(--ring) var(--ring-1), var(--ring) calc(var(--ring-1) + var(--ring-w)), transparent calc(var(--ring-1) + var(--ring-w) + 1px)),
    radial-gradient(circle at var(--ring-2-x) 97%, transparent calc(var(--ring-2) - 1px), rgba(255, 255, 255, 0.06) var(--ring-2), rgba(255, 255, 255, 0.06) calc(var(--ring-2) + var(--ring-w)), transparent calc(var(--ring-2) + var(--ring-w) + 1px)),
    radial-gradient(60% 50% at var(--glow-x) 0%, rgba(129, 96, 240, 0.55), transparent 70%),
    linear-gradient(180deg, #7550e8 0%, #6b47e2 58%, #5b37d0 100%);
  color: var(--on-purple);
  padding-block: clamp(24px, 3vw, 42px) clamp(34px, 4.6vw, 60px);
  border-end-start-radius: clamp(28px, 4vw, 56px);
  border-end-end-radius: clamp(28px, 4vw, 56px);
}
[dir="rtl"] .hero { --ring-1-x: 8%; --ring-2-x: 95%; --glow-x: 15%; }

.hero-inner {
  position: relative;
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}
@media (min-width: 1100px) {
  .hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

.hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
@media (min-width: 1100px) {
  .hero-copy { align-items: flex-start; text-align: start; }
}

.hero-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 30px -12px rgba(28, 10, 80, 0.55);
}
.hero-icon img { width: 100%; height: 100%; border-radius: inherit; }

.eyebrow {
  display: inline-flex;
  padding: 6px 16px;
  border: 1px solid var(--purple-border);
  border-radius: 999px;
  background: rgba(20, 10, 60, 0.18);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
}

.hero-title {
  margin-top: 14px;
  font-size: clamp(2.15rem, 1.5rem + 2.6vw, 3.3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
}
html[lang="ar"] .hero-title { letter-spacing: 0; line-height: 1.25; }
.hero-title .hl { display: inline-block; color: var(--yellow); }

.hero-lead {
  max-width: 600px;
  margin-top: 16px;
  color: #fff;
  font-size: clamp(1.06rem, 0.98rem + 0.4vw, 1.22rem);
}


.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}
@media (min-width: 1100px) { .hero-ctas { justify-content: flex-start; } }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 0;
  margin-top: 20px;
  color: var(--on-purple-muted);
  font-size: 0.95rem;
  font-weight: 700;
}
@media (min-width: 1100px) { .hero-meta { justify-content: flex-start; } }
.hero-meta li { display: inline-flex; align-items: center; }
.hero-meta li + li::before {
  content: '';
  width: 5px;
  height: 5px;
  margin-inline: 14px;
  border-radius: 50%;
  background: var(--yellow);
}

/* Phone + printer composition (pre-rendered, transparent). */
.hero-visual {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
@media (min-width: 1100px) { .hero-visual { max-width: 460px; margin-inline-end: 0; } }
.hero-visual::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 4% 2% 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06) 62%, transparent);
  pointer-events: none;
}
.hero-visual img { display: block; width: 100%; height: auto; }

/* The receipt feeds out of the printer's slot in small steps, like a
   thermal printer, waits, is torn off and prints again. Its window starts
   at the slot (tools/render-hero.cjs, PAPER_BOX, as % of the picture). */
.hero-paper {
  position: absolute;
  left: 6.4062%;
  top: 46.9444%;
  width: 36.25%;
  height: 44.5833%;
  overflow: hidden;
  pointer-events: none;
}
.hero-paper img { height: 100%; animation: receipt-print 10s linear 0.6s infinite both; }
@keyframes receipt-print {
  0% { transform: translateY(-100%); opacity: 1; animation-timing-function: steps(48, end); }
  55% { transform: translateY(0); opacity: 1; }
  85% { transform: translateY(0); opacity: 1; animation-timing-function: ease-in; }
  95% { transform: translateY(8%); opacity: 0; }
  100% { transform: translateY(-100%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-paper img { animation: none; transform: none; opacity: 1; }
}

/* ---------- Highlights strip ----------
   The leaflet's feature badges: lavender tiles over bold labels, five in a
   row on wide screens; a compact list on phones. */
.trust { background: var(--bg-alt); }
.trust-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  padding-block: clamp(28px, 3.5vw, 44px);
}
.trust-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
@media (max-width: 860px) {
  .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
  .trust-list li { flex-direction: row; text-align: start; }
}
@media (max-width: 480px) {
  .trust-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
.trust-badge {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 17px;
  background: var(--lavender);
  color: var(--purple);
}
.trust-badge .icon { width: 28px; height: 28px; }
@media (max-width: 860px) {
  .trust-badge { width: 46px; height: 46px; border-radius: 14px; }
  .trust-badge .icon { width: 24px; height: 24px; }
}

/* ---------- Business types (auto-scrolling strip) ---------- */
.biz { overflow: hidden; }
.section.biz { padding-block: clamp(38px, 4.8vw, 64px); }
.biz .section-head { margin-bottom: clamp(28px, 4vw, 44px); }
.biz-strip { max-width: 1440px; margin-inline: auto; }

.marquee {
  --wave: 9px;       /* how far the cards rise and fall (the snake) */
  --wave-time: 2.8s; /* one full wave */
  display: grid;
  gap: calc(2 * var(--wave) + 10px); /* the rows never touch, even peak to peak */
  overflow: hidden;
  padding-block: calc(4px + var(--wave)) calc(10px + var(--wave)); /* waves + shadow */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* Each row holds three identical copies of its list and moves by exactly one
   copy (a third of its width) per loop, so the loop is seamless. In RTL the
   copies extend to the left, so the row moves the other way. */
.marquee-row {
  display: flex;
  width: max-content;
  animation: marquee-ltr 60s linear infinite;
}
.marquee-row-reverse { animation-duration: 68s; animation-direction: reverse; }
[dir="rtl"] .marquee-row { animation-name: marquee-rtl; }
.biz-strip:hover .marquee-row,
.biz-strip:focus-within .marquee-row,
.biz-strip.is-paused .marquee-row,
.biz-strip:hover .biz-card,
.biz-strip:focus-within .biz-card,
.biz-strip.is-paused .biz-card { animation-play-state: paused; }

@keyframes marquee-ltr { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
@keyframes marquee-rtl { from { transform: translateX(0); } to { transform: translateX(33.3333%); } }

.marquee-track { display: flex; flex-shrink: 0; }
.biz-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-inline-end: 14px;
  padding-block: 9px;
  padding-inline: 9px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
  white-space: nowrap;
}
/* The snake: each card rises and falls a quarter wave after its neighbour,
   two waves per copy of the list (keep 4, 8, 12… cards per row). Every copy
   repeats the pattern, so the wave stays seamless across copies and loops;
   it runs against the row's movement, the way a snake slithers. */
.biz-card { animation: biz-wave var(--wave-time) ease-in-out infinite; }
@keyframes biz-wave {
  0%, 100% { transform: translateY(calc(-1 * var(--wave))); }
  50% { transform: translateY(var(--wave)); }
}
.marquee-track > .biz-card:nth-child(4n + 2) { animation-delay: calc(-0.75 * var(--wave-time)); }
.marquee-track > .biz-card:nth-child(4n + 3) { animation-delay: calc(-0.5 * var(--wave-time)); }
.marquee-track > .biz-card:nth-child(4n + 4) { animation-delay: calc(-0.25 * var(--wave-time)); }
.marquee-row-reverse .biz-card:nth-child(4n + 2) { animation-delay: calc(-0.25 * var(--wave-time)); }
.marquee-row-reverse .biz-card:nth-child(4n + 4) { animation-delay: calc(-0.75 * var(--wave-time)); }

.biz-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--lavender);
  color: var(--purple);
}
.biz-icon .icon { width: 24px; height: 24px; }
@media (max-width: 480px) {
  .marquee { --wave: 6px; }
  .biz-card { gap: 10px; margin-inline-end: 10px; padding-block: 7px; padding-inline: 7px 14px; font-size: 0.96rem; }
  .biz-icon { width: 38px; height: 38px; border-radius: 10px; }
  .biz-icon .icon { width: 21px; height: 21px; }
}

/* The ribbon: the business types ride one purple wave that moves from left
   to right, like a snake (built by main.js). The two rows above stay for
   visitors without JavaScript or with reduced motion, and — visually
   hidden — for screen readers. */
.ribbon {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ribbon-band { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ribbon-path { fill: none; stroke: url(#ribbon-fill); stroke-linecap: round; stroke-linejoin: round; }
.ribbon-shine { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-linecap: round; stroke-linejoin: round; }
.ribbon-items { position: absolute; inset: 0; }
.ribbon-item {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  will-change: transform;
}
.ribbon-item .biz-icon { width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, 0.18); color: #fff; }
.ribbon-item .biz-icon .icon { width: 20px; height: 20px; }
@media (max-width: 640px) {
  .ribbon-item { gap: 6px; font-size: 0.86rem; }
  .ribbon-item .biz-icon { width: 28px; height: 28px; border-radius: 8px; }
  .ribbon-item .biz-icon .icon { width: 17px; height: 17px; }
}
.has-ribbon .marquee {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.has-ribbon .marquee-row,
.has-ribbon .biz-card { animation: none; }

.marquee-controls { display: flex; justify-content: center; margin-top: 18px; }
.marquee-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 5px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}
.marquee-toggle[hidden] { display: none; }
.marquee-toggle:hover { color: var(--purple-dark); border-color: var(--purple); }
.marquee-toggle .icon { width: 1.1em; height: 1.1em; }
.marquee-toggle .icon-play,
.biz-strip.is-paused .marquee-toggle .icon-pause { display: none; }
.biz-strip.is-paused .marquee-toggle .icon-play { display: block; }

/* ---------- Stats band ----------
   Purple on purpose: it sits between two light sections (the business strip
   and the features), so a strong band separates them and echoes the hero. */
.stats {
  position: relative;
  padding-block: clamp(52px, 6vw, 84px);
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(129, 96, 240, 0.5), transparent 70%),
    linear-gradient(180deg, #6b47e2, #5b37d0);
  color: var(--on-purple);
}
.stats-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) { .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 339px) { .stats-grid { grid-template-columns: minmax(0, 1fr); } }

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(20px, 2.6vw, 28px) clamp(12px, 2vw, 24px);
  border: 1px solid var(--purple-border);
  border-radius: var(--radius-lg);
  background: rgba(20, 10, 60, 0.16);
  text-align: center;
}
.stat-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.stat-icon .icon { width: 24px; height: 24px; }
.stat-value {
  margin-top: 14px;
  color: #fff;
  font-size: clamp(2rem, 1.45rem + 1.8vw, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* main.js reserves the final width (min-width) before counting; the digits
   hug the side of that box where the sign sits, so the sign never moves:
   the right in English and for a unit ("100%"), the left for an Arabic
   suffix ("+70"). */
.stat-num { display: inline-block; text-align: right; }
[dir="rtl"] .stat-ltr:not(:last-child) .stat-num { text-align: left; }
.stat-unit,
.stat-suffix { color: var(--yellow); }
.stat-label {
  margin-top: 8px;
  max-width: 24ch;
  color: var(--on-purple-muted);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
}
@media (max-width: 480px) {
  .stat-icon { width: 40px; height: 40px; border-radius: 12px; }
  .stat-icon .icon { width: 21px; height: 21px; }
  .stat-value { margin-top: 10px; }
  .stat-label { font-size: 0.92rem; }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(46px, 6.4vw, 84px); }
.section-alt { background: var(--bg-alt); }
.section-dark {
  position: relative;
  background:
    radial-gradient(50% 60% at 100% 0%, rgba(129, 96, 240, 0.45), transparent 70%),
    linear-gradient(160deg, #5b37d0 0%, #432599 60%, #351d80 100%);
  color: var(--on-purple);
}
[dir="rtl"] .section-dark {
  background:
    radial-gradient(50% 60% at 0% 0%, rgba(129, 96, 240, 0.45), transparent 70%),
    linear-gradient(200deg, #5b37d0 0%, #432599 60%, #351d80 100%);
}

.section-head {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: clamp(26px, 3.6vw, 42px);
  text-align: center;
}
.section-head-start { margin-inline: 0; text-align: start; }

.kicker {
  margin-bottom: 12px;
  color: var(--purple);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.section-dark .kicker,
.plan-featured .kicker { color: var(--yellow); }
html[lang="ar"] .kicker { letter-spacing: 0; text-transform: none; font-size: 1rem; }

.section-lead {
  margin-top: 16px;
  color: var(--text-muted);
  font-size: 1.12rem;
}
.section-dark .section-lead { color: var(--on-purple-muted); }

/* ---------- Features ---------- */
.feature-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-wide { grid-column: span 2; }
}

.feature {
  position: relative;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.feature:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #d8cff8; }
.feature h3 { margin-top: 18px; }
.feature p { margin-top: 8px; color: var(--text-muted); font-size: 1rem; }

.feature-icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--lavender);
  color: var(--purple);
}
.feature-icon .icon { width: 26px; height: 26px; }
.feature-icon-dark { background: rgba(255, 255, 255, 0.14); color: #fff; }

.feature-wide {
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(129, 96, 240, 0.9), transparent 60%),
    linear-gradient(160deg, #6b47e2, #4b2db8);
  border-color: transparent;
  color: #fff;
}
[dir="rtl"] .feature-wide {
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(129, 96, 240, 0.9), transparent 60%),
    linear-gradient(200deg, #6b47e2, #4b2db8);
}
.feature-wide:hover { border-color: transparent; }
.feature-wide h3 { font-size: 1.45rem; }
.feature-wide p { color: var(--on-purple-muted); font-size: 1.05rem; max-width: 640px; }
.feature-wide .feature-icon { background: rgba(255, 255, 255, 0.16); color: var(--yellow); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chips li {
  padding: 5px 13px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(20, 10, 60, 0.18);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
}

/* ---------- Gallery (phone frames) ---------- */
#screenshots { overflow: hidden; } /* the glow behind the phone may be wider than a phone screen */
.gallery { max-width: 820px; margin-inline: auto; }
.gallery-tabs {
  display: flex;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 32px;
  padding: 5px;
  overflow-x: auto;
  scrollbar-width: thin;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.gallery-tabs [role="tab"] {
  flex-shrink: 0;
  min-height: 44px;
  padding: 9px 16px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.gallery-tabs [role="tab"]:hover { color: var(--purple-dark); background: var(--mist); }
.gallery-tabs [role="tab"][aria-selected="true"] { background: var(--purple); color: #fff; }

.gallery-stage {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  padding-block: 8px;
}
.gallery-stage::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(460px, 115%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--lavender), rgba(239, 234, 253, 0.6) 60%, transparent);
  transform: translate(-50%, -50%);
}

/* A phone, like the leaflet's: dark bezel, side keys, camera dot. */
.phone-frame {
  position: relative;
  width: min(250px, 64vw);
  padding: 8px;
  border-radius: 38px;
  background: #17151f;
  box-shadow: 0 40px 70px -32px rgba(40, 20, 110, 0.6), inset 0 0 0 1.5px #34314a;
}
.phone-frame::before,
.phone-frame::after {
  content: '';
  position: absolute;
  right: -3px;
  width: 4px;
  border-radius: 2px;
  background: #2a2738;
}
.phone-frame::before { top: 21%; height: 8%; }
.phone-frame::after { top: 32%; height: 13%; }
.phone-camera {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: #0b0a10;
  box-shadow: inset 0 0 0 1.5px #23212e;
  pointer-events: none;
}

.shot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1080 / 2268;
  border-radius: 31px;
  background: var(--bg);
  overflow: hidden;
}
.shot-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.shot.is-loaded .shot-img { opacity: 1; }
.shot.is-missing ~ .ph-label,
.shot.is-missing .ph-label { display: block; }
.shot.is-loaded .shot-ph { visibility: hidden; }
.shot.is-missing .shot-img { display: none; }

/* Styled placeholder: a sketch of the app (purple header, quick actions,
   list rows, bottom bar) until the real screenshot exists. */
.shot-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.shot-ph i, .shot-ph b { display: block; }
.ph-head {
  position: relative;
  display: block;
  height: 36%;
  padding: 16% 7% 0;
  background: linear-gradient(180deg, #8160f0, #6b47e2);
  border-end-start-radius: 14% 10%;
  border-end-end-radius: 14% 10%;
}
.ph-head b { width: 46%; height: 6%; border-radius: 99px; background: rgba(255, 255, 255, 0.55); }
.ph-head i {
  height: 48%;
  margin-top: 9%;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.14);
}
.ph-actions {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8%;
  margin: -9% 6% 0;
  padding: 6% 7%;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 20px -14px rgba(91, 55, 208, 0.5);
}
.ph-actions i { height: 20px; border-radius: 8px; background: var(--lavender); }
.ph-list { display: flex; flex-direction: column; gap: 5%; flex: 1; padding: 8% 6% 0; }
.ph-list i {
  height: 12%;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 34px 0 0 -4px #fff, inset 50px 0 0 -4px var(--lavender);
}
[dir="rtl"] .ph-list i { box-shadow: inset -34px 0 0 -4px #fff, inset -50px 0 0 -4px var(--lavender); }
.ph-nav {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 10%;
  background: #fff;
  border-top: 1px solid var(--border);
}
.ph-nav i { width: 9%; aspect-ratio: 1; border-radius: 30%; background: var(--lavender); }
.ph-nav b {
  width: 17%;
  aspect-ratio: 1;
  margin-top: -9%;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 6px 14px -6px rgba(91, 55, 208, 0.8);
}
/* "Screenshot coming soon": only over a screen that has no picture yet. */
.ph-label {
  position: absolute;
  z-index: 2;
  display: none;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  max-width: 86%;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(31, 29, 43, 0.82);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
}

.shot-button {
  padding: 0;
  border: 0;
  cursor: zoom-in;
  font: inherit;
  text-align: start;
}
.shot-button:focus-visible { outline-offset: 3px; border-radius: 38px; }
.shot-zoom {
  position: absolute;
  inset-block-end: 16px;
  inset-inline-end: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(31, 29, 43, 0.78);
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.shot-zoom .icon { width: 22px; height: 22px; }
.shot-button:hover .shot-zoom,
.shot-button:focus-visible .shot-zoom { opacity: 1; }
@media (hover: none) { .shot-zoom { opacity: 1; } }

.gallery-caption {
  max-width: 600px;
  min-height: 3.4em;
  margin: 26px auto 0;
  color: var(--text-muted);
  text-align: center;
}

/* ---------- Steps ---------- */
.steps {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
  position: relative;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.step-num {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-end: 22px;
  color: #e6e0fa;
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
}
.step-icon {
  display: inline-grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--lavender);
  color: var(--purple);
}
.step-icon .icon { width: 24px; height: 24px; }
.step h3 { margin-top: 18px; }
.step p { margin-top: 8px; color: var(--text-muted); font-size: 1rem; }
.step:nth-child(3) { border-color: rgba(117, 80, 232, 0.55); box-shadow: 0 0 0 4px rgba(117, 80, 232, 0.1); }
.step:nth-child(3) .step-icon { background: var(--purple); color: #fff; }

.steps-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  color: var(--text-muted);
  text-align: center;
}
.steps-note .icon { color: var(--purple); width: 1.4em; height: 1.4em; }

/* ---------- Video tour ---------- */
.video-card { max-width: 820px; margin: 0 auto; }
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #2a1a6e;
  box-shadow: 0 36px 70px -36px rgba(53, 29, 128, 0.75), 0 0 0 1px var(--border);
}
.video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #2a1a6e;
}
/* The whole poster is the play button; the disc is its visible part. */
.video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: rgba(20, 10, 60, 0.12);
  cursor: pointer;
}
.video-play[hidden] { display: none; }
.video-play-disc {
  display: grid;
  place-items: center;
  width: clamp(64px, 11vw, 96px);
  height: clamp(64px, 11vw, 96px);
  border-radius: 50%;
  background: #fff;
  color: var(--purple);
  box-shadow: 0 0 0 clamp(8px, 1.4vw, 12px) rgba(255, 255, 255, 0.28);
  transition: transform 0.15s ease;
}
/* The triangle's visual centre sits right of its box (media icons never mirror). */
.video-play-disc .icon { width: 44%; height: 44%; margin-left: 7%; }
.video-play:hover .video-play-disc { transform: scale(1.06); }
.video-play:focus-visible { outline-offset: -6px; border-radius: var(--radius-lg); }
.video-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 18px;
}
.video-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-weight: 700;
}
.video-meta .icon { color: var(--purple); }
.video-fs[hidden] { display: none; }
@media (max-width: 560px) {
  .video-bar { justify-content: center; }
  .video-fs { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .video-play-disc { transition: none; } }

/* ---------- Your data, your phone ---------- */
.local-inner { display: grid; gap: 40px; }
@media (min-width: 1024px) {
  .local-inner { grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
  .local-inner .section-head { margin-bottom: 0; }
}
.local-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .local-grid { grid-template-columns: repeat(2, 1fr); } }
.local-grid li {
  padding: 24px;
  border: 1px solid var(--purple-border);
  border-radius: var(--radius-lg);
  background: rgba(20, 10, 60, 0.18);
}
.local-grid h3 { margin-top: 16px; color: #fff; }
.local-grid p { margin-top: 8px; color: var(--on-purple-muted); font-size: 1rem; }

/* ---------- Licensing ---------- */
.license-inner { display: grid; gap: 40px; }
@media (min-width: 1024px) {
  .license-inner { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
}
.license-help { margin-top: 28px; color: var(--text-muted); }
.license-help .contact-actions { margin-top: 14px; }
.license-list { display: grid; gap: 14px; }
.license-list li {
  display: flex;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.license-list p { margin-top: 6px; color: var(--text-muted); font-size: 1rem; }

/* ---------- Plans ---------- */
/* Pricing cards: a pointed header band (name, price, one line), the features
   centred between hairlines, the button at the bottom. The full edition is
   solid purple with a yellow corner ribbon. */
.plans {
  display: grid;
  gap: 22px;
  max-width: 760px;
  margin-inline: auto;
}
@media (min-width: 720px) { .plans { grid-template-columns: repeat(2, 1fr); align-items: stretch; } }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
}
.plan-featured {
  border-color: transparent;
  background: linear-gradient(170deg, #6b47e2, #4b2db8);
  color: var(--on-purple);
  box-shadow: 0 30px 60px -30px rgba(91, 55, 208, 0.7);
}
.plan-head {
  padding: 26px 22px 44px;
  background: var(--mist);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 50% 100%, 0 calc(100% - 22px));
}
.plan-featured .plan-head { background: rgba(255, 255, 255, 0.1); }
.plan-title { color: var(--text-muted); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.02em; }
.plan-featured .plan-title { color: var(--on-purple-muted); }
.plan-price { margin-top: 6px; font-size: 2rem; font-weight: 800; line-height: 1.25; }
.plan-desc { margin-top: 4px; color: var(--text-muted); font-size: 0.9rem; }
.plan-featured .plan-desc { color: var(--on-purple-muted); }

/* Yellow ribbon hanging from the top corner ("best value"). */
.plan-ribbon {
  position: absolute;
  top: 0;
  inset-inline-start: 18px;
  z-index: 1;
  width: 78px;
  padding: 9px 6px 15px;
  background: var(--yellow);
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.3;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 7px), 0 100%);
}

.plan-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 4px clamp(18px, 3vw, 26px) clamp(20px, 3vw, 26px);
}
.plan-list { margin-block: 4px 20px; }
.plan-list li {
  padding: 10px 6px;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}
.plan-list li:last-child { border-bottom: 0; }
.plan-featured .plan-list li { border-color: rgba(255, 255, 255, 0.16); }

.plan-actions { display: grid; gap: 10px; justify-items: center; margin-top: auto; }
.plan-actions > .btn { width: min(100%, 280px); }
.plan-contact { margin-bottom: 4px; color: var(--on-purple-muted); font-size: 0.92rem; }
.plan-contact .contact-actions { flex-wrap: nowrap; justify-content: center; gap: 8px; margin-top: 10px; }
.plan-contact .contact-actions .btn { min-height: 36px; padding: 6px 12px; gap: 6px; font-size: 0.86rem; white-space: nowrap; }

.btn-light { background: #fff; color: var(--purple-dark); }
.btn-light:hover { background: var(--mist); color: var(--purple-dark); }

.dl-meta { margin-top: 12px; color: var(--text-muted); font-size: 0.86rem; }
.plan-featured .dl-meta { color: var(--on-purple-muted); }
.dl-contents { margin-top: 2px; color: var(--text-muted); font-size: 0.82rem; }
.plan-featured .dl-contents { color: var(--on-purple-muted); }
.dl-unavailable {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff7e0;
  color: #6b4800;
  font-size: 0.9rem;
  font-weight: 700;
}
.plan-featured .dl-unavailable { background: rgba(20, 10, 60, 0.3); color: #ffe39a; }
.plan-note { margin-top: 10px; color: var(--on-purple-muted); font-size: 0.86rem; }

/* ---------- Call / WhatsApp buttons ---------- */
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-actions .btn { flex: 1 1 auto; }

/* ---------- FAQ ---------- */
.faq-inner { max-width: 880px; }
.faq-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq-item + .faq-item { border-top: 1px solid var(--border); }
.faq-item summary {
  position: relative;
  display: block;
  padding: 20px 24px;
  padding-inline-end: 60px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '';
  position: absolute;
  inset-inline-end: 26px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  /* physical borders on purpose: the chevron must point down in LTR and RTL */
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  color: var(--purple);
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-item summary:hover { color: var(--purple-dark); }
.faq-item summary:focus-visible { outline-offset: -3px; border-radius: 0; }
.faq-item[open] summary { color: var(--purple-dark); }
.faq-item p { padding: 0 24px 22px; color: var(--text-muted); max-width: 780px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--night);
  color: var(--night-muted);
  padding-top: 64px;
}
.footer-inner {
  display: grid;
  gap: 36px;
  padding-bottom: 40px;
}
@media (min-width: 760px) { .footer-inner { grid-template-columns: 2fr 1fr 1.3fr; } }
.brand-footer { color: #fff; }
.brand-footer:hover { color: #fff; }
.brand-footer .brand-wordmark { color: #fff; }
.footer-brand p { margin-top: 14px; max-width: 320px; }
.footer-col h2 {
  margin-bottom: 14px;
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0;
}
.footer-col ul { display: grid; gap: 4px; }
.footer-col ul a { display: inline-block; padding-block: 6px; color: #d9d4ea; text-decoration: none; }
.footer-col ul a:hover { color: #fff; text-decoration: underline; }
.footer-contact p { margin-bottom: 14px; }
.footer-contact .contact-actions { display: grid; max-width: 320px; }
.footer-col .contact-actions a,
.footer-col .contact-actions a:hover { color: #fff; text-decoration: none; }


/* ---------- Lightbox ---------- */
.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: #120d24;
  color: #fff;
}
.lightbox::backdrop { background: rgba(17, 12, 34, 0.6); }
.lightbox-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px var(--gutter) 22px;
}
.lightbox-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lightbox-count { color: #d9d4ea; font-size: 0.95rem; font-weight: 700; }
.lightbox-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.shot-lightbox {
  width: min(430px, calc((100dvh - 190px) * 1080 / 2268), 100%);
  border-radius: 28px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}
.shot-lightbox .shot-img { object-fit: contain; background: var(--bg); }
.lightbox-caption { max-width: 640px; margin: 14px auto 0; color: #e4dff5; text-align: center; min-height: 1.7em; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
}
.icon-btn .icon { width: 22px; height: 22px; }
.icon-btn:hover { background: rgba(255, 255, 255, 0.16); }

@media (max-width: 719px) {
  .lightbox-stage { flex-wrap: wrap; align-content: center; }
  .shot-lightbox { order: -1; width: min(100%, calc((100dvh - 250px) * 1080 / 2268)); }
  .lightbox-nav { margin-top: 8px; }
}

html.lightbox-open { overflow: hidden; }

/* ---------- Privacy page ---------- */
.page-head {
  background:
    radial-gradient(60% 80% at 85% 0%, rgba(129, 96, 240, 0.55), transparent 70%),
    linear-gradient(180deg, #7550e8, #5b37d0);
  color: #fff;
  padding-block: clamp(40px, 6vw, 72px);
  border-end-start-radius: clamp(24px, 4vw, 48px);
  border-end-end-radius: clamp(24px, 4vw, 48px);
}
[dir="rtl"] .page-head {
  background:
    radial-gradient(60% 80% at 15% 0%, rgba(129, 96, 240, 0.55), transparent 70%),
    linear-gradient(180deg, #7550e8, #5b37d0);
}
.page-head h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.2rem); font-weight: 800; line-height: 1.3; }
.page-head p { margin-top: 12px; color: var(--on-purple-muted); font-size: 1.1rem; max-width: 720px; }
.page-head .updated { margin-top: 18px; font-size: 0.95rem; font-weight: 700; color: #fff; }
.prose { max-width: 820px; }
.prose-list { display: grid; gap: 16px; }
.prose-list li {
  display: flex;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.prose-list h2 { font-size: 1.25rem; line-height: 1.45; }
.prose-list p { margin-top: 8px; color: var(--text-muted); }
.prose-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; text-decoration: none; }
.back-link .icon { width: 1.2em; height: 1.2em; }

/* ---------- Motion & responsive fine-tuning ---------- */
@media (max-width: 480px) {
  .hero-ctas .btn { width: 100%; }
  .hero-meta { gap: 4px 16px; }
  .hero-meta li + li::before { display: none; }
  .feature, .step { padding: 22px; }
  .license-list li, .prose-list li { flex-direction: column; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .feature:hover { transform: none; }
  .marquee { --wave: 0px; gap: 10px; -webkit-mask-image: none; mask-image: none; }
  .marquee-row,
  [dir="rtl"] .marquee-row { width: auto; animation: none; }
  .marquee-track {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 1080px; /* 4 + 4 cards per row */
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .marquee-track[aria-hidden="true"],
  .marquee-controls { display: none; }
  .biz-card { margin-inline-end: 0; white-space: normal; animation: none; }
}