/* ==========================================================================
   رزق | RZQ — Delivery Service Landing Page
   Flat design system (no gradients), components & motion
   Palette sampled from the RZQ app UI + app icon.
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Raw RGB triplets so rgb() / alpha helpers can consume them */
  --bg: 20 19 34;          /* #141322 page            */
  --band: 26 25 42;        /* #1A192A alternating band */
  --surface: 31 30 48;     /* #1F1E30 cards           */
  --surface-2: 40 38 64;   /* #282640 raised / hover  */
  --line: 255 255 255;
  --line-op: 0.09;

  --ink: 236 235 247;
  --ink-soft: 176 173 200;
  --ink-mute: 133 130 160;

  /* Brand — from the RZQ app icon and in-app primary */
  --brand: 114 102 242;      /* #7266F2 */
  --brand-soft: 155 147 247; /* #9B93F7 */
  --brand-deep: 90 76 224;   /* #5A4CE0 */
  --brand-ink: 155 147 247;  /* icon/text purple on dark */

  --accent: 242 143 35;      /* #F28F23 */
  --accent-soft: 255 169 77; /* #FFA94D */
  --accent-ink: 255 169 77;  /* icon/text orange on dark */

  --radius: 20px;
  --radius-lg: 26px;

  --shadow-sm: 0 2px 8px rgb(0 0 0 / 0.3);
  --shadow: 0 16px 40px -18px rgb(0 0 0 / 0.6);
  --shadow-lg: 0 34px 80px -30px rgb(0 0 0 / 0.75);

  --nav-h: 78px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --font-family--dm-sans: "DM Sans", "IBM Plex Sans Arabic", sans-serif;
  --font-display: var(--font-family--dm-sans);
  --font-body: var(--font-family--dm-sans);
}

html[data-theme="light"] {
  --bg: 253 253 253;       /* #FDFDFD */
  --band: 244 243 248;     /* #F4F3F8 — the app's light sheet colour */
  --surface: 255 255 255;
  --surface-2: 244 243 248;
  --line: 22 20 48;
  --line-op: 0.1;

  --ink: 24 22 46;
  --ink-soft: 82 78 110;
  --ink-mute: 122 118 148;

  --brand-ink: 90 76 224;
  --accent-ink: 199 111 12;

  --shadow-sm: 0 2px 8px rgb(30 24 70 / 0.05);
  --shadow: 0 16px 36px -20px rgb(30 24 70 / 0.18);
  --shadow-lg: 0 34px 70px -32px rgb(30 24 70 / 0.24);
}

/* ---------- 2. Base (Tailwind preflight is disabled — this is the reset) ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: rgb(var(--line) / var(--line-op));
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 18px);
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
}

body.rzq {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: rgb(var(--ink));
  background: rgb(var(--bg));
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

body.rzq.is-locked { overflow: hidden; }

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button, select { text-transform: none; }
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
textarea { resize: vertical; }
[hidden] { display: none; }

/* Zero-specificity element defaults so every utility / component class wins */
:where(body.rzq) :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  color: rgb(var(--ink));
}
:where(body.rzq) :where(p) { margin: 0; color: rgb(var(--ink-soft)); }
:where(body.rzq) :where(a) { color: inherit; text-decoration: none; }
:where(body.rzq) :where(img, svg, video) { display: block; max-width: 100%; }
:where(body.rzq) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }

::selection { background: rgb(var(--brand)); color: #fff; }

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

body.rzq ::-webkit-scrollbar { width: 10px; height: 10px; }
body.rzq ::-webkit-scrollbar-track { background: rgb(var(--band)); }
body.rzq ::-webkit-scrollbar-thumb {
  background: rgb(var(--brand));
  border-radius: 20px;
  border: 3px solid rgb(var(--band));
}

/* ---------- 3. Layout helpers ---------- */
.container-x {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 22px;
}

.section {
  position: relative;
  padding-block: clamp(56px, 6.5vw, 96px);
}

.section-band {
  background: rgb(var(--band));
  border-top: 1px solid rgb(var(--line) / var(--line-op));
  border-bottom: 1px solid rgb(var(--line) / var(--line-op));
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--brand-ink));
  background: rgb(var(--brand) / 0.12);
  border: 1px solid rgb(var(--brand) / 0.24);
}
.eyebrow.is-accent {
  color: rgb(var(--accent-ink));
  background: rgb(var(--accent) / 0.12);
  border-color: rgb(var(--accent) / 0.26);
}
.eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.section-title {
  font-size: clamp(30px, 4.4vw, 52px);
  letter-spacing: -0.035em;
}

.section-lead {
  font-size: clamp(15px, 1.45vw, 17px);
  color: rgb(var(--ink-mute));
}

.text-brand { color: rgb(var(--brand-ink)); }
.text-accent { color: rgb(var(--accent-ink)); }
.muted { color: rgb(var(--ink-mute)); }

main, header, footer { position: relative; z-index: 2; }

/* ---------- 4. Preloader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: rgb(var(--bg));
  transition: opacity 0.6s var(--ease), visibility 0.6s;
}
.preloader.done { opacity: 0; visibility: hidden; }

.pre-inner { display: grid; justify-items: center; gap: 22px; }
.pre-inner img { width: 68px; height: 68px; border-radius: 18px; }
/* Same treatment as the nav badge — the near-white logo plate needs an
   outline to read against the light preloader background. */
html[data-theme="light"] .pre-inner img {
  box-shadow: 0 0 0 1px rgb(var(--line) / 0.14), 0 10px 26px -12px rgb(30 24 70 / 0.3);
}

.pre-bar {
  width: 170px; height: 3px;
  border-radius: 99px;
  background: rgb(var(--line) / 0.14);
  overflow: hidden;
}
.pre-bar i {
  display: block; height: 100%; width: 40%;
  border-radius: inherit;
  background: rgb(var(--brand));
  animation: preSlide 1.1s var(--ease-io) infinite;
}
@keyframes preSlide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(320%); }
}

/* ---------- 5. Cursor & scroll progress ---------- */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  z-index: 190;
  pointer-events: none;
  border-radius: 50%;
  transform: translate3d(-100px, -100px, 0);
}
.cursor-dot { width: 6px; height: 6px; background: rgb(var(--brand)); margin: -3px 0 0 -3px; }
.cursor-ring {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid rgb(var(--brand) / 0.6);
  transition: width 0.28s var(--ease), height 0.28s var(--ease), margin 0.28s var(--ease);
}
.cursor-ring.grow { width: 60px; height: 60px; margin: -30px 0 0 -30px; }

@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  z-index: 120;
  background: rgb(var(--brand));
}

/* ---------- 6. Navigation ---------- */
.nav {
  position: fixed;
  inset: 14px 0 auto;
  z-index: 100;
  transition: transform 0.45s var(--ease);
}
.nav.hide { transform: translateY(-150%); }

.nav-shell {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 64px;
  padding: 0 12px 0 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
}
.nav.stuck .nav-shell {
  background: rgb(var(--surface));
  border-color: rgb(var(--line) / var(--line-op));
  box-shadow: var(--shadow);
}

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-badge {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.5s var(--ease), box-shadow 0.35s var(--ease);
}
.brand-badge img { width: 100%; height: 100%; object-fit: cover; }
.brand:hover .brand-badge { transform: scale(1.07); }
/* The logo plate is almost white, so it melts into the light page until the
   nav shell fades in — outline it while the header is transparent. */
html[data-theme="light"] .nav:not(.stuck) .brand-badge {
  box-shadow: 0 0 0 1px rgb(var(--line) / 0.14), 0 6px 16px -8px rgb(30 24 70 / 0.3);
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  line-height: 1.15;
  white-space: nowrap;
}
.brand-name small {
  display: block;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgb(var(--ink-mute));
}

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-link {
  position: relative;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  color: rgb(var(--ink-soft));
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.nav-link:hover { color: rgb(var(--ink)); background: rgb(var(--line) / 0.07); }
.nav-link.active { color: rgb(var(--brand-ink)); background: rgb(var(--brand) / 0.12); }

.icon-btn {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid rgb(var(--line) / var(--line-op));
  background: rgb(var(--surface-2));
  color: rgb(var(--ink));
  cursor: pointer;
  transition: transform 0.3s var(--ease), background-color 0.25s, color 0.25s;
}
.icon-btn:hover { transform: translateY(-2px); background: rgb(var(--brand)); color: #fff; border-color: transparent; }
.icon-btn:active { transform: scale(0.94); }

.theme-btn .sun { display: none; }
html[data-theme="light"] .theme-btn .sun { display: block; }
html[data-theme="light"] .theme-btn .moon { display: none; }

.burger { display: none; }
.burger i {
  display: block;
  width: 18px; height: 2px;
  border-radius: 9px;
  background: currentColor;
  transition: transform 0.4s var(--ease), opacity 0.25s;
}
.burger i + i { margin-top: 5px; }
.burger.open i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open i:nth-child(2) { opacity: 0; }
.burger.open i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: grid;
  align-content: center;
  padding: 90px 26px 40px;
  background: rgb(var(--bg));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.drawer.open { opacity: 1; visibility: visible; }
.drawer a {
  font-family: var(--font-display);
  font-size: clamp(24px, 7vw, 32px);
  font-weight: 700;
  padding: 13px 0;
  border-bottom: 1px solid rgb(var(--line) / var(--line-op));
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), color 0.25s;
}
.drawer a:hover { color: rgb(var(--brand-ink)); }
.drawer a.cta { color: rgb(var(--brand-ink)); }
.drawer.open a { opacity: 1; transform: none; }
.drawer.open a:nth-child(1) { transition-delay: 0.06s; }
.drawer.open a:nth-child(2) { transition-delay: 0.12s; }
.drawer.open a:nth-child(3) { transition-delay: 0.18s; }
.drawer.open a:nth-child(4) { transition-delay: 0.24s; }
.drawer.open a:nth-child(5) { transition-delay: 0.3s; }
.drawer.open a:nth-child(6) { transition-delay: 0.36s; }

/* ---------- 7. Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
              background-color 0.25s, border-color 0.25s, color 0.25s;
}
.btn:active { transform: scale(0.96); }

.btn-primary {
  color: #fff;
  background: rgb(var(--brand));
  box-shadow: 0 12px 28px -14px rgb(var(--brand) / 0.9);
}
.btn-primary:hover {
  background: rgb(var(--brand-deep));
  box-shadow: 0 18px 36px -14px rgb(var(--brand) / 0.85);
  transform: translateY(-2px);
}

.btn-accent { color: #fff; background: rgb(var(--accent)); }
.btn-accent:hover { background: rgb(var(--accent-soft)); transform: translateY(-2px); }

.btn-ghost {
  color: rgb(var(--ink));
  background: rgb(var(--surface));
  border-color: rgb(var(--line) / var(--line-op));
}
.btn-ghost:hover { background: rgb(var(--surface-2)); transform: translateY(-2px); }

.btn-on-brand { color: rgb(var(--brand)); background: #fff; }
.btn-on-brand:hover { background: rgb(255 255 255 / 0.88); transform: translateY(-2px); }

.btn-whatsapp { color: #fff; background: #25D366; }
.btn-whatsapp:hover { background: #1EBE5A; transform: translateY(-2px); }

.btn-outline-light {
  color: #fff;
  background: transparent;
  border-color: rgb(255 255 255 / 0.4);
}
.btn-outline-light:hover { background: rgb(255 255 255 / 0.12); transform: translateY(-2px); }

/* App store buttons */
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px 11px 16px;
  border-radius: 14px;
  border: 1px solid rgb(var(--line) / var(--line-op));
  background: rgb(var(--surface));
  color: rgb(var(--ink));
  transition: transform 0.3s var(--ease), border-color 0.25s, background-color 0.25s;
}
.store-btn:hover {
  transform: translateY(-3px);
  border-color: rgb(var(--brand) / 0.6);
  background: rgb(var(--surface-2));
}
.store-btn svg { width: 25px; height: 25px; flex: none; }
.store-btn b {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}
.store-btn small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--ink-mute));
  line-height: 1.4;
}

/* On a solid brand panel */
.on-brand .store-btn {
  background: #fff;
  color: #14122c;
  border-color: transparent;
}
.on-brand .store-btn small { color: rgb(20 18 44 / 0.55); }
.on-brand .store-btn:hover { background: rgb(255 255 255 / 0.9); }

/* ---------- 8. Cards & surfaces ---------- */
.card {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid rgb(var(--line) / var(--line-op));
  background: rgb(var(--surface));
  transition: transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.4s var(--ease),
              background-color 0.3s;
}
html[data-theme="light"] .card { box-shadow: var(--shadow-sm); }

.card-hover:hover {
  transform: translateY(-6px);
  border-color: rgb(var(--brand) / 0.5);
  box-shadow: var(--shadow-lg);
}

/* Bidding is the one thing RZQ does that ordinary delivery apps don't, so its
   card is lifted out of the uniform grid instead of blending into it. The tint
   is mixed into the surface colour rather than layered as translucent brand
   over it, so it stays lighter than the neighbouring cards in both themes. */
.card-feature {
  background: rgb(var(--surface));
  background: color-mix(in srgb, rgb(var(--brand)) 12%, rgb(var(--surface)));
  border-color: rgb(var(--brand) / 0.4);
}
.card-feature.card-hover:hover { border-color: rgb(var(--brand) / 0.75); }

.card-tag {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 4px 11px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(var(--brand-ink));
  background: rgb(var(--brand) / 0.14);
  border: 1px solid rgb(var(--brand) / 0.28);
}

.ico {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 15px;
  color: rgb(var(--brand-ink));
  background: rgb(var(--brand) / 0.13);
  border: 1px solid rgb(var(--brand) / 0.22);
  transition: transform 0.45s var(--ease), background-color 0.3s, color 0.3s;
}
.ico.orange {
  color: rgb(var(--accent-ink));
  background: rgb(var(--accent) / 0.13);
  border-color: rgb(var(--accent) / 0.26);
}
.ico.solid { color: #fff; background: rgb(var(--brand)); border-color: transparent; }
.ico.solid-orange { color: #fff; background: rgb(var(--accent)); border-color: transparent; }
.card-hover:hover .ico { transform: translateY(-2px) scale(1.06); }

/* ---------- 9. Reveal animations ---------- */
[data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal="up"] { transform: translateY(38px); }
[data-reveal="down"] { transform: translateY(-34px); }
[data-reveal="left"] { transform: translateX(-42px); }
[data-reveal="right"] { transform: translateX(42px); }
[data-reveal="zoom"] { transform: scale(0.92); }
[data-reveal].in { opacity: 1; transform: none; }

.split-line { display: block; overflow: hidden; }
.split-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 0.95s var(--ease);
  transition-delay: var(--d, 0ms);
}
.split-line.in > span { transform: none; }

/* ---------- 10. Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--nav-h) + 36px);
  padding-bottom: clamp(48px, 5.5vw, 84px);
}
.hero > .container-x { position: relative; z-index: 1; }

/* Soft light circles behind the hero (parallax layers) */
.hero-bg {
  position: absolute;
  inset: -12% 0 -16%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: translate;
}
.hero-orb.orb-1 {
  width: min(560px, 64vw); aspect-ratio: 1;
  top: -10%; left: -14%;
  background: rgb(var(--brand) / 0.13);
}
.hero-orb.orb-2 {
  width: min(440px, 54vw); aspect-ratio: 1;
  bottom: -12%; right: -10%;
  background: rgb(var(--accent) / 0.12);
}
html[data-theme="light"] .hero-orb.orb-1 { background: rgb(var(--brand) / 0.09); }
html[data-theme="light"] .hero-orb.orb-2 { background: rgb(var(--accent) / 0.08); }

/* Kuwait Towers line illustration */
.hero-towers {
  position: absolute;
  z-index: 0;
  inset-inline-end: clamp(-24px, 1.5vw, 30px);
  bottom: 0;
  width: clamp(210px, 30vw, 420px);
  height: auto;
  color: rgb(var(--brand));
  opacity: 0.17;
  pointer-events: none;
  will-change: translate;
}
html[data-theme="light"] .hero-towers { opacity: 0.13; }
html[dir="rtl"] .hero-towers { transform: scaleX(-1); }

.tw-shaft path,
.tw-sphere,
.tw-band path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.tw-sphere { fill: rgb(var(--bg)); }
.tw-band path { opacity: 0.5; stroke-width: 1.6; }

@media (max-width: 1023px) {
  .hero-towers,
  html[data-theme="light"] .hero-towers { opacity: 0.1; }

  /* Stacked layout: tuck the towers into the gap beside the headline */
  .hero-towers {
    top: calc(var(--nav-h) + 6px);
    bottom: auto;
    inset-inline-end: -12px;
    width: min(235px, 57vw);
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  }
}

.hero h1 {
  font-size: clamp(36px, 6vw, 70px);
  letter-spacing: -0.045em;
  font-weight: 700;
}

.rotator {
  display: inline-grid;
  vertical-align: bottom;
  overflow: hidden;
  height: 1.16em;
}
.rotator b {
  grid-area: 1 / 1;
  font-weight: 700;
  white-space: nowrap;
  color: rgb(var(--brand-ink));
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.45s var(--ease), transform 0.6s var(--ease);
}
.rotator b.on { opacity: 1; transform: none; }
.rotator b.out { opacity: 0; transform: translateY(-100%); }

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 13.5px;
  color: rgb(var(--ink-soft));
}
.hero-points li { display: flex; align-items: center; gap: 9px; }
.hero-points svg { flex: none; color: rgb(var(--brand-ink)); }

.hero-proof {
  display: grid;
  gap: 18px;
  padding-top: 22px;
  border-top: 1px solid rgb(var(--line) / var(--line-op));
}
@media (min-width: 560px) {
  .hero-proof {
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: center;
    gap: 24px;
  }
  .hero-proof .hero-stats {
    padding-inline-start: 24px;
    border-inline-start: 1px solid rgb(var(--line) / var(--line-op));
  }
}

.hero-stats { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.hero-stats b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(21px, 2.5vw, 28px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.hero-stats span { font-size: 12.5px; color: rgb(var(--ink-mute)); }

.avatars { display: flex; }
.avatars i {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  margin-left: -10px;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-display);
  color: #fff;
  border: 2px solid rgb(var(--bg));
  transition: transform 0.35s var(--ease);
}
.avatars i:first-child { margin-left: 0; }
.avatars:hover i { transform: translateY(-4px); }
.avatars i:nth-child(1) { background: #7266F2; }
.avatars i:nth-child(2) { background: #F28F23; }
.avatars i:nth-child(3) { background: #5A4CE0; }
.avatars i:nth-child(4) { background: #9B93F7; }

/* ---------- 11. Phone frame + real app screenshot ---------- */
.phone {
  position: relative;
  width: 100%;
  max-width: 316px;
  margin-inline: auto;
  aspect-ratio: 9 / 19.1;
  border-radius: 44px;
  padding: 10px;
  background: #23213a;
  box-shadow:
    0 0 0 1.5px rgb(255 255 255 / 0.08),
    var(--shadow-lg);
}
html[data-theme="light"] .phone { background: #2a2842; }

.phone-screen {
  position: relative;
  height: 100%;
  border-radius: 35px;
  overflow: hidden;
  background: #14132a;
  display: flex;
  flex-direction: column;
}

.app-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.app-shot.is-light { display: none; }
html[data-theme="light"] .app-shot.is-dark { display: none; }
html[data-theme="light"] .app-shot.is-light { display: block; }

.phone-float {
  position: absolute;
  z-index: 6;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line) / var(--line-op));
  box-shadow: var(--shadow);
  color: rgb(var(--ink));
}

.float-a { top: 13%; left: -17%; animation: bob 5.5s ease-in-out infinite; }
.float-b { bottom: 6%; right: -19%; animation: bob 6.5s ease-in-out 0.6s infinite; }
.float-c { top: 47%; right: -12%; animation: bob 7s ease-in-out 1.2s infinite; }

@keyframes bob { 50% { transform: translateY(-14px); } }

/* ---------- 12. Marquee ---------- */
.marquee {
  position: relative;
  display: grid;
  gap: 14px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 14px;
  animation: scrollX 46s linear infinite;
  will-change: transform;
}
.marquee-track.is-reverse { animation-duration: 58s; animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scrollX { to { transform: translateX(calc(-50% - 7px)); } }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 20px 7px 7px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  color: rgb(var(--ink-soft));
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line) / var(--line-op));
  transition: color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--ease);
}
.pill:hover {
  color: rgb(var(--ink));
  border-color: rgb(var(--brand) / 0.5);
  transform: translateY(-2px);
}
.pill-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px; height: 30px;
  border-radius: 999px;
  font-size: 15px;
  line-height: 1;
  background: rgb(var(--brand) / 0.12);
  transition: background-color 0.25s;
}
.pill:hover .pill-ic { background: rgb(var(--brand) / 0.22); }
html[data-theme="light"] .pill { box-shadow: var(--shadow-sm); }
html[data-theme="light"] .pill:hover { box-shadow: var(--shadow); }

/* ---------- 13. Steps ---------- */
.steps {
  display: grid;
  gap: 18px;
}
/* A connector runs from each card down to the next, aligned to the number
   bubbles, so the three cards read as 01 → 02 → 03 rather than as three loose
   cards. It reveals with its own card, and the next card's background masks
   the overshoot (which also absorbs the hover lift). */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 56px;
  bottom: -30px;
  width: 2px;
  height: 30px;
  border-radius: 2px;
  background: rgb(var(--brand) / 0.3);
}

.step-num {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 17px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  background: rgb(var(--brand));
  transition: transform 0.45s var(--ease);
}
.step.s2 .step-num { background: rgb(var(--accent)); }
.step.s3 .step-num { background: rgb(var(--brand-deep)); }
.step:hover .step-num { transform: translateY(-5px); }

.step-ghost {
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  color: rgb(var(--line) / 0.07);
  user-select: none;
}

.tick {
  width: 18px; height: 18px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 999px;
  color: #fff;
  background: rgb(var(--brand));
}
.tick.orange { background: rgb(var(--accent)); }

.how-extras {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgb(var(--line) / var(--line-op));
}
.how-extras li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: rgb(var(--ink-mute));
}
@media (min-width: 640px) {
  .how-extras { grid-template-columns: 1fr 1fr; gap: 10px 18px; }
}

/* ---------- 14. Brand panel (flat CTA blocks) ---------- */
.brand-panel {
  position: relative;
  border-radius: 28px;
  background: rgb(var(--brand));
  color: #fff;
  overflow: hidden;
}
.brand-panel :where(h2, h3, h4) { color: #fff; }
.brand-panel :where(p) { color: rgb(255 255 255 / 0.82); }
.brand-panel .eyebrow {
  color: #fff;
  background: rgb(255 255 255 / 0.16);
  border-color: rgb(255 255 255 / 0.28);
}

.panel-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgb(255 255 255 / 0.14);
  pointer-events: none;
}

/* ---------- 15. Video / demo ---------- */
.play-btn {
  position: relative;
  width: 86px; height: 86px;
  display: grid; place-items: center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: rgb(var(--brand));
  background: #fff;
  transition: transform 0.35s var(--ease);
}
.play-btn:hover { transform: scale(1.08); }
.play-btn i, .play-btn::before, .play-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgb(255 255 255 / 0.5);
  animation: ripple 2.8s var(--ease-io) infinite;
}
.play-btn::after { animation-delay: 0.9s; }
.play-btn i { animation-delay: 1.8s; }
@keyframes ripple {
  0% { transform: scale(1); opacity: 0.75; }
  100% { transform: scale(2); opacity: 0; }
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgb(8 7 18 / 0.9);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.modal.open { opacity: 1; visibility: visible; }
.modal-box {
  position: relative;
  width: min(960px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgb(255 255 255 / 0.12);
  transform: scale(0.93) translateY(14px);
  transition: transform 0.45s var(--ease);
}
.modal.open .modal-box { transform: none; }
.modal-box iframe { width: 100%; height: 100%; border: 0; }
.modal-close {
  position: absolute;
  top: -48px; right: 0;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.22);
  background: rgb(255 255 255 / 0.08);
  color: #fff;
  cursor: pointer;
  transition: transform 0.3s var(--ease), background-color 0.25s;
}
.modal-close:hover { transform: rotate(90deg); background: rgb(255 255 255 / 0.2); }

/* ---------- 16. Testimonials ---------- */
.testi-viewport { overflow: hidden; }
.testi-track { display: flex; transition: transform 0.65s var(--ease); }
.testi-slide { flex: 0 0 100%; padding: 4px; }

.quote-mark {
  font-family: var(--font-display);
  font-size: 68px;
  line-height: 0.7;
  color: rgb(var(--brand) / 0.35);
}

.dots { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.dots button {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgb(var(--line) / 0.22);
  cursor: pointer;
  transition: width 0.35s var(--ease), background-color 0.35s;
}
.dots button.on { width: 26px; background: rgb(var(--brand)); }

.arrow-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 999px;
  cursor: pointer;
  color: rgb(var(--ink));
  border: 1px solid rgb(var(--line) / var(--line-op));
  background: rgb(var(--surface));
  transition: transform 0.3s var(--ease), background-color 0.25s, color 0.25s, border-color 0.25s;
}
.arrow-btn:hover {
  transform: translateY(-3px);
  color: #fff;
  border-color: transparent;
  background: rgb(var(--brand));
}

.stars { display: flex; gap: 4px; color: rgb(var(--accent)); }

/* ---------- 17. FAQ accordion ---------- */
.faq-item {
  border-radius: var(--radius);
  border: 1px solid rgb(var(--line) / var(--line-op));
  background: rgb(var(--surface));
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.faq-item.open { border-color: rgb(var(--brand) / 0.5); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 17px 18px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: rgb(var(--ink));
  line-height: 1.45;
}
.faq-sign {
  margin-left: auto;
  position: relative;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgb(var(--line) / 0.18);
  transition: transform 0.45s var(--ease), background-color 0.3s, border-color 0.3s, color 0.3s;
}
.faq-sign::before, .faq-sign::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 11px; height: 1.8px;
  border-radius: 9px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.4s var(--ease), opacity 0.25s;
}
.faq-sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.open .faq-sign {
  background: rgb(var(--brand));
  border-color: transparent;
  color: #fff;
  transform: rotate(180deg);
}
.faq-item.open .faq-sign::after { opacity: 0; }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 18px 18px; font-size: 14.5px; }

/* ---------- 18. Stats ---------- */
.stat { position: relative; text-align: center; padding: 26px 16px; }
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: rgb(var(--ink));
}
.stat span { font-size: 13px; color: rgb(var(--ink-mute)); }

/* ---------- 19. Forms ---------- */
.field { position: relative; }
.field input,
.field textarea {
  width: 100%;
  padding: 15px 18px 15px 44px;
  border-radius: 14px;
  font: inherit;
  font-size: 14.5px;
  color: rgb(var(--ink));
  background: rgb(var(--bg));
  border: 1px solid rgb(var(--line) / var(--line-op));
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}
html[data-theme="light"] .field input,
html[data-theme="light"] .field textarea { background: rgb(var(--band)); }
.field textarea { padding-left: 18px; min-height: 120px; }
.field input::placeholder,
.field textarea::placeholder { color: rgb(var(--ink-mute)); }
.field input:focus,
.field textarea:focus {
  border-color: rgb(var(--brand));
  box-shadow: 0 0 0 3px rgb(var(--brand) / 0.18);
}
.field .fi {
  position: absolute;
  left: 16px; top: 16px;
  color: rgb(var(--ink-mute));
  pointer-events: none;
  transition: color 0.25s;
}
.field input:focus ~ .fi { color: rgb(var(--brand-ink)); }
.field.err input, .field.err textarea { border-color: #ff5f73; }
.field .msg {
  display: block;
  font-size: 11.5px;
  color: #ff7183;
  padding: 5px 4px 0;
  min-height: 17px;
}

.toast {
  position: fixed;
  left: 50%; bottom: 30px;
  z-index: 160;
  display: flex; align-items: center; gap: 11px;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: rgb(var(--brand));
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, 160%);
  transition: transform 0.5s var(--ease);
}
.toast.show { transform: translate(-50%, 0); }

/* ---------- 20. Contact info ---------- */
.info-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgb(var(--line) / var(--line-op));
  background: rgb(var(--surface));
  transition: transform 0.35s var(--ease), border-color 0.25s;
}
.info-row:hover { transform: translateX(5px); border-color: rgb(var(--brand) / 0.5); }
.info-row .ic {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  color: rgb(var(--brand-ink));
  background: rgb(var(--brand) / 0.13);
  border: 1px solid rgb(var(--brand) / 0.2);
}

/* ---------- 21. Footer ---------- */
.footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgb(var(--line) / var(--line-op));
  background: rgb(var(--band));
}

.footer-towers {
  position: absolute;
  right: clamp(10px, 3vw, 40px);
  bottom: -18px;
  width: clamp(120px, 17vw, 170px);
  color: rgb(var(--brand));
  opacity: 0.14;
  pointer-events: none;
}

html[data-theme="light"] .footer-towers { opacity: 0.12; }

.soc {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  color: rgb(var(--ink-soft));
  border: 1px solid rgb(var(--line) / var(--line-op));
  background: rgb(var(--surface));
  transition: transform 0.3s var(--ease), color 0.25s, background-color 0.25s, border-color 0.25s;
}
.soc:hover {
  transform: translateY(-3px);
  color: #fff;
  border-color: transparent;
  background: rgb(var(--brand));
}
.foot-link {
  display: inline-block;
  color: rgb(var(--ink-mute));
  font-size: 14px;
  transition: color 0.25s, padding-left 0.25s var(--ease);
}
.foot-link:hover { color: rgb(var(--ink)); padding-left: 5px; }

.to-top {
  position: fixed;
  right: 22px; bottom: 24px;
  z-index: 90;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid rgb(var(--line) / var(--line-op));
  border-radius: 14px;
  cursor: pointer;
  color: rgb(var(--ink));
  background: rgb(var(--surface));
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(20px) scale(0.85);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), background-color 0.25s, color 0.25s;
}
.to-top.show { opacity: 1; transform: none; }
.to-top:hover { background: rgb(var(--brand)); color: #fff; border-color: transparent; }

/* ---------- 22. Misc ---------- */
.badge-line {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600;
  color: rgb(var(--accent-ink));
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgb(var(--accent));
  box-shadow: 0 0 0 0 rgb(var(--accent) / 0.7);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 9px rgb(var(--accent) / 0); }
  100% { box-shadow: 0 0 0 0 rgb(var(--accent) / 0); }
}

.spin-ico {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid rgb(255 255 255 / 0.35);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn:disabled { opacity: 0.75; cursor: not-allowed; }

.app-icon {
  border-radius: 24px;
  box-shadow: var(--shadow);
}

/* ---------- 23. Responsive ---------- */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .burger { display: grid; }
}

@media (max-width: 640px) {
  :root { --nav-h: 70px; }
  .nav { inset: 8px 0 auto; }
  .nav-shell { height: 58px; padding: 0 8px 0 12px; }
  .brand-badge { width: 36px; height: 36px; border-radius: 10px; }
  .brand-name { font-size: 17px; }
  .float-a, .float-b, .float-c { display: none; }
  .section { padding-block: 56px; }
  .hero {
    padding-top: calc(var(--nav-h) + 26px);
    padding-bottom: 56px;
  }
  .brand-panel { border-radius: 24px; }
  .modal-close { top: -44px; }
  .pill { font-size: 12.5px; padding-right: 16px; }
  .pill-ic { width: 27px; height: 27px; font-size: 14px; }
  .marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
}

/* ---------- 24. Language switch controls ---------- */
.lang-btn {
  width: auto;
  min-width: 42px;
  padding-inline: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.lang-btn svg { flex: none; }
.lang-btn b {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
}

.drawer-lang {
  justify-self: center;
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid rgb(var(--line) / var(--line-op));
  background: rgb(var(--surface));
  color: rgb(var(--ink));
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease),
              background-color 0.25s, color 0.25s, border-color 0.25s;
}
.drawer-lang svg { flex: none; }
.drawer.open .drawer-lang { opacity: 1; transform: none; transition-delay: 0.42s; }
.drawer-lang:hover { background: rgb(var(--brand)); color: #fff; border-color: transparent; }

/* ---------- 25. Arabic typography ---------- */
html[lang="ar"] {
  --font-family--dm-sans: "IBM Plex Sans Arabic", "DM Sans", sans-serif;
}
html[lang="ar"] body.rzq { line-height: 1.85; }

/* Arabic has no case and no tracking — undo the Latin display treatment. */
html[lang="ar"] :where(h1, h2, h3, h4, h5, h6),
html[lang="ar"] .section-title,
html[lang="ar"] .hero h1,
html[lang="ar"] .hero-stats b,
html[lang="ar"] .stat b,
html[lang="ar"] .brand-name,
html[lang="ar"] .brand-name small,
html[lang="ar"] .eyebrow,
html[lang="ar"] .card-tag,
html[lang="ar"] .step-num,
html[lang="ar"] .drawer a,
html[lang="ar"] .btn { letter-spacing: 0; }

html[lang="ar"] .eyebrow,
html[lang="ar"] .card-tag,
html[lang="ar"] .brand-name small { text-transform: none; }

html[lang="ar"] :where(h1, h2, h3, h4, h5, h6) { line-height: 1.45; }
/* Arabic descenders need more room than the Latin line box inside the
   overflow-clipped .split-line wrappers. */
html[lang="ar"] .hero h1 { line-height: 1.58; }
html[lang="ar"] .hero-stats b,
html[lang="ar"] .stat b { line-height: 1.35; }
html[lang="ar"] .rotator { height: 1.3em; }
html[lang="ar"] .quote-mark { line-height: 0.9; }

/* ---------- 26. RTL mirroring ---------- */
html[dir="rtl"] [data-rtl-flip] { transform: scaleX(-1); }

/* Counters read "11,500+", not "+11,500", regardless of the surrounding script. */
html[dir="rtl"] [data-count] { direction: ltr; unicode-bidi: isolate; }

html[dir="rtl"] .scroll-progress { left: auto; right: 0; }
@keyframes preSlideRtl {
  0% { transform: translateX(110%); }
  100% { transform: translateX(-320%); }
}
html[dir="rtl"] .pre-bar i { animation-name: preSlideRtl; }

html[dir="rtl"] .nav-shell { padding: 0 16px 0 12px; }

html[dir="rtl"] .avatars i { margin-left: 0; margin-right: -10px; }
html[dir="rtl"] .avatars i:first-child { margin-right: 0; }

html[dir="rtl"] .float-a { left: auto; right: -17%; }
html[dir="rtl"] .float-b { right: auto; left: -19%; }
html[dir="rtl"] .float-c { right: auto; left: -12%; }

/* The track still overflows towards the reading start, so it has to travel
   the other way for the duplicated half to fill the gap. */
@keyframes scrollXRtl { to { transform: translateX(calc(50% + 7px)); } }
html[dir="rtl"] .marquee-track { animation-name: scrollXRtl; }
html[dir="rtl"] .pill { padding: 7px 7px 7px 20px; }

html[dir="rtl"] [data-reveal="left"] { transform: translateX(42px); }
html[dir="rtl"] [data-reveal="right"] { transform: translateX(-42px); }
html[dir="rtl"] [data-reveal].in { transform: none; }

html[dir="rtl"] .faq-q { text-align: right; }
html[dir="rtl"] .faq-sign { margin-left: 0; margin-right: auto; }

html[dir="rtl"] .field input,
html[dir="rtl"] .field textarea { padding: 15px 44px 15px 18px; }
html[dir="rtl"] .field textarea { padding-right: 18px; }
html[dir="rtl"] .field .fi { left: auto; right: 16px; }

html[dir="rtl"] .info-row:hover { transform: translateX(-5px); }

html[dir="rtl"] .foot-link { transition: color 0.25s, padding-right 0.25s var(--ease); }
html[dir="rtl"] .foot-link:hover { padding-left: 0; padding-right: 5px; }

html[dir="rtl"] .to-top { right: auto; left: 22px; }
html[dir="rtl"] .modal-close { right: auto; left: 0; }

@media (max-width: 640px) {
  html[dir="rtl"] .nav-shell { padding: 0 12px 0 8px; }
  html[dir="rtl"] .pill { padding-left: 16px; padding-right: 7px; }
  .lang-btn { padding-inline: 9px; gap: 0; }
  .lang-btn svg { display: none; }
}

/* ---------- 27. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .split-line > span { transform: none !important; }
  .marquee { -webkit-mask-image: none; mask-image: none; padding-inline: 20px; }
  .marquee-track {
    animation: none !important;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .marquee-track .pill[aria-hidden="true"] { display: none; }
}