/* ============================================================
   MASDAR — promotional site
   Palette from masdar-icon-dark.png:
     ink #0b0e14 · gold #c8a96e · ring #86734e
   Type: Marcellus (display EN) / Noto Kufi Arabic (display AR)
         IBM Plex Sans (+Arabic) body · IBM Plex Mono (figures)

   Shape system (one scale, no exceptions):
     pill 999px  -> buttons, chips, pills
     18px        -> panels, cards, frames
     12px        -> inputs, small tiles
     8px         -> micro elements inside a 12px tile

   Motion: everything that moves with the scroll is a native CSS
   scroll-driven animation (animation-timeline) or an IntersectionObserver
   class. There is not a single scroll event listener in this site.
   ============================================================ */

:root {
  --ink: #0b0e14;
  --ink-2: #0d1119;
  --panel: #121724;
  --panel-2: #1a2133;
  --line: rgba(200, 169, 110, 0.18);
  --line-soft: rgba(236, 231, 219, 0.08);
  --brass: #c8a96e;
  --brass-2: #e6cd96;
  --brass-deep: #86734e;
  --sand: #ece7db;
  --dim: #98a0b3;
  --good: #4caf7d;
  --warn: #d98a3d;

  --font-display: 'Marcellus', 'Noto Kufi Arabic', serif;
  --font-body: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --r-card: 18px;
  --r-field: 12px;
  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* live tint, rewritten by the design gallery as it pans */
  --tint: #c8a96e;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--ink); overflow-x: clip; }

body {
  color: var(--sand);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  background: transparent;
}

[dir="rtl"] { --font-display: 'Noto Kufi Arabic', serif; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0 !important; }

img { max-width: 100%; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.15; }
h2 { font-size: clamp(1.8rem, 3.8vw, 2.9rem); color: var(--sand); letter-spacing: 0.01em; }

::selection { background: var(--brass); color: var(--ink); }
:focus-visible { outline: 2px solid var(--brass-2); outline-offset: 3px; border-radius: 4px; }

/* figures always read left-to-right, even in Arabic */
.fig-n, .fig-s, .price-big, .tile b, .o-amt, .sticky-price, .calc-amt,
.hero-price, .fv, .pcard u, .prod-price, .totals b, .pay-item u,
.rate-row b, .ship-label b, .label b, .box-tag, .exports i,
.dock-row b, .dock-num, .parcel em {
  direction: ltr;
  unicode-bidi: isolate;
}

.ic {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* ============================================================
   BRANDMARK — a logo rendered like a glyph
   The PNG is used as an alpha mask over `currentColor`, so every carrier
   logo takes the surrounding text colour instead of dragging its own
   brand colours in. Each mask is pre-trimmed and pre-scaled so all the
   logos carry the same amount of ink (see assets/carriers/make-mono.py).
   ============================================================ */
.mono {
  display: block;
  flex: none;
  width: var(--w);
  height: var(--h);
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform 0.25s var(--ease), box-shadow 0.25s, background 0.25s, border-color 0.25s;
}
.btn-brass {
  background: linear-gradient(135deg, var(--brass-2), var(--brass) 60%, var(--brass-deep) 130%);
  color: #241c09;
  box-shadow: 0 6px 24px rgba(200, 169, 110, 0.25);
}
.btn-brass::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
}
.btn-brass:hover { box-shadow: 0 14px 38px rgba(200, 169, 110, 0.42); }
.btn-brass:hover::after { transform: translateX(120%); }
[dir="rtl"] .btn-brass::after { transform: translateX(120%); }
[dir="rtl"] .btn-brass:hover::after { transform: translateX(-120%); }
.btn:active { transform: scale(0.975); }
.btn-ghost { border-color: var(--line); color: var(--sand); }
.btn-ghost:hover { border-color: var(--brass); color: var(--brass-2); }

/* Démo interactive : vert « en direct » pour la distinguer des CTA d'achat. */
.btn-demo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border-color: rgba(76, 175, 125, 0.45);
  background: rgba(76, 175, 125, 0.08);
  color: #8ee3b4;
  backdrop-filter: blur(8px);
}
.btn-demo:hover {
  border-color: var(--good);
  background: rgba(76, 175, 125, 0.16);
  box-shadow: 0 12px 30px rgba(76, 175, 125, 0.2);
}
.nav-demo { display: inline-flex; align-items: center; gap: 0.4rem; color: #8ee3b4 !important; }
.nav-demo:hover { color: #b6f0d2 !important; }

.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 0 rgba(76, 175, 125, 0.65);
  animation: live-pulse 2s infinite;
  flex: none;
}
@keyframes live-pulse {
  70% { box-shadow: 0 0 0 7px rgba(76, 175, 125, 0); }
  100% { box-shadow: 0 0 0 0 rgba(76, 175, 125, 0); }
}
.btn-sm { padding: 0.55rem 1.1rem; font-size: 0.85rem; }
.btn-lg { padding: 1rem 2.2rem; font-size: 1.02rem; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.9rem;
}
[dir="rtl"] .eyebrow { letter-spacing: 0.06em; font-family: var(--font-body); }

/* ============================================================
   THE ATMOSPHERE
   One fixed stack behind the page. <html data-world="…"> cross-fades the
   plates, so scrolling from one section to the next walks into a
   different environment instead of scrolling a long dark page.
   ============================================================ */
.cosmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--ink);
  overflow: clip;
  contain: strict;
}
.plate {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.p-dawn {
  opacity: 1;
  background:
    radial-gradient(52% 46% at 78% 8%, rgba(200, 169, 110, 0.22), transparent 70%),
    radial-gradient(45% 42% at 6% 72%, rgba(56, 82, 150, 0.28), transparent 72%),
    linear-gradient(180deg, #0a0d13, #0b0e14 60%);
}
.p-forge {
  background:
    radial-gradient(38% 30% at 50% 0%, rgba(200, 169, 110, 0.2), transparent 70%),
    radial-gradient(60% 50% at 88% 96%, rgba(134, 115, 78, 0.22), transparent 72%),
    linear-gradient(180deg, #0b0e14, #0e0f13);
}
.p-prism {
  background:
    radial-gradient(46% 42% at 22% 26%, color-mix(in srgb, var(--tint) 34%, transparent), transparent 70%),
    radial-gradient(52% 48% at 82% 78%, color-mix(in srgb, var(--tint) 20%, transparent), transparent 72%),
    linear-gradient(180deg, #090b11, #0c0f17);
  transition: opacity 1.1s ease, background 0.9s ease;
}
.p-control {
  background:
    radial-gradient(60% 40% at 50% 106%, rgba(72, 112, 196, 0.26), transparent 70%),
    radial-gradient(40% 36% at 12% 6%, rgba(200, 169, 110, 0.1), transparent 70%),
    linear-gradient(180deg, #080a10, #0a0f1a);
}
.p-ledger {
  background:
    radial-gradient(70% 50% at 50% -10%, rgba(148, 158, 178, 0.12), transparent 70%),
    linear-gradient(180deg, #0c0e13, #0a0c11);
}
.p-vault {
  background:
    radial-gradient(70% 55% at 50% 102%, rgba(200, 169, 110, 0.4), transparent 66%),
    radial-gradient(46% 34% at 50% -4%, rgba(134, 115, 78, 0.22), transparent 70%),
    linear-gradient(180deg, #0a0c11, #14100a);
}
.p-close {
  background:
    radial-gradient(60% 44% at 84% 96%, rgba(56, 82, 150, 0.2), transparent 72%),
    radial-gradient(40% 34% at 10% 4%, rgba(200, 169, 110, 0.1), transparent 70%),
    linear-gradient(180deg, #090b11, #0b0e14);
}
:root[data-world="forge"] .p-forge,
:root[data-world="prism"] .p-prism,
:root[data-world="control"] .p-control,
:root[data-world="ledger"] .p-ledger,
:root[data-world="vault"] .p-vault,
:root[data-world="close"] .p-close { opacity: 1; }
:root[data-world="forge"] .p-dawn,
:root[data-world="prism"] .p-dawn,
:root[data-world="control"] .p-dawn,
:root[data-world="ledger"] .p-dawn,
:root[data-world="vault"] .p-dawn,
:root[data-world="close"] .p-dawn { opacity: 0; }

/* perspective floor: only the control room stands on a grid */
.floor {
  position: absolute;
  inset: 55% -30% -20% -30%;
  opacity: 0;
  transition: opacity 1.1s ease;
  background:
    linear-gradient(rgba(146, 178, 235, 0.16) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, rgba(146, 178, 235, 0.14) 1px, transparent 1px) 0 0 / 5% 100%;
  transform: perspective(420px) rotateX(70deg);
  transform-origin: 50% 0;
  mask-image: linear-gradient(180deg, #000, transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 72%);
  animation: floorRun 6s linear infinite;
}
@keyframes floorRun { to { background-position: 0 46px, 0 0; } }
:root[data-world="control"] .floor { opacity: 1; }

.field { position: absolute; inset: 0; width: 100%; height: 100%; }
.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.55));
}

/* content sits above the atmosphere */
.topbar, main, .footer, .sticky-cta, .scroll-progress { position: relative; z-index: 2; }

/* ---------- scroll progress (pure CSS scroll-driven) ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 2px;
  z-index: 80;
  background: linear-gradient(90deg, var(--brass-deep), var(--brass), var(--brass-2));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
[dir="rtl"] .scroll-progress { transform-origin: 100% 50%; }
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: growX linear;
    animation-timeline: scroll(root block);
  }
}
@keyframes growX { to { transform: scaleX(1); } }

/* ---------- topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 72px;
  padding: 0 var(--pad);
  background: rgba(11, 14, 20, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.topbar.scrolled {
  border-bottom-color: var(--line-soft);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  background: rgba(11, 14, 20, 0.86);
}
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand-logo { width: 38px; height: 38px; }
.brand-name { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.08em; color: var(--brass-2); }
.brand-ar { font-family: 'Noto Kufi Arabic', serif; color: var(--dim); font-size: 0.85rem; margin-top: 0.2rem; }
.topnav { display: flex; gap: 1.4rem; margin-inline-start: auto; }
.topnav a { font-size: 0.9rem; color: var(--dim); transition: color 0.2s; }
.topnav a:hover, .topnav a.active { color: var(--brass-2); }
.topbar-actions { display: flex; align-items: center; gap: 0.8rem; }
.lang-toggle {
  background: none;
  border: 1px solid var(--line);
  color: var(--sand);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: 'Noto Kufi Arabic', var(--font-body);
  transition: border-color 0.2s, color 0.2s;
}
.lang-toggle:hover { border-color: var(--brass); color: var(--brass-2); }
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  padding: 0 10px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  cursor: pointer;
}
.nav-burger span { display: block; height: 2px; border-radius: 2px; background: var(--sand); transition: transform 0.3s, opacity 0.3s; }
.topbar.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topbar.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.topbar.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 4rem) var(--pad) clamp(3rem, 6vw, 5rem);
  min-height: min(100dvh, 860px);
}
.hero-copy { position: relative; }

.rise { opacity: 0; transform: translateY(26px); animation: riseIn 1s var(--ease) forwards; }
.d-2 { animation-delay: 0.14s; }
.d-3 { animation-delay: 0.28s; }
@keyframes riseIn { to { opacity: 1; transform: none; } }

.hero-title {
  font-size: clamp(2.7rem, 6.4vw, 4.8rem);
  color: var(--sand);
  margin-bottom: 1.4rem;
  letter-spacing: -0.01em;
}
.hero-title em {
  font-style: normal;
  display: block;
  color: transparent;
  background: linear-gradient(110deg, var(--brass-deep) 0%, var(--brass-2) 30%, var(--brass) 50%, var(--brass-2) 70%, var(--brass-deep) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: goldSheen 7s ease-in-out infinite;
  padding-bottom: 0.08em;
}
@keyframes goldSheen {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.hero-sub { color: var(--dim); max-width: 32rem; margin-bottom: 2rem; font-size: 1.03rem; }
.hero-ctas { display: flex; gap: 0.9rem; flex-wrap: wrap; }

/* ============================================================
   THE STAGE — the Masdar template running a real sale
   A working miniature of the storefront: browse, product, COD checkout,
   confirmation, then the phone turns around and the order lands in the
   seller's dashboard. Driven by data-scene on .stage.
   ============================================================ */
.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  perspective: 1600px;
}
.stage-halo {
  position: absolute;
  top: 6%; left: 50%;
  width: 118%; height: 78%;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 42%, rgba(200, 169, 110, 0.26), transparent 68%);
  filter: blur(34px);
}
.rings { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%); }
.rings i {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(200, 169, 110, 0.16);
  border-radius: 999px 999px 30px 30px;
  mask-image: linear-gradient(180deg, #000 55%, transparent 95%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 95%);
  animation: archBreathe 9s ease-in-out infinite;
}
.rings i:nth-child(1) { width: 360px; height: 660px; }
.rings i:nth-child(2) { width: 430px; height: 750px; opacity: 0.6; animation-delay: 1.2s; }
.rings i:nth-child(3) { width: 500px; height: 840px; opacity: 0.3; animation-delay: 2.4s; }
@keyframes archBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -52%) scale(1.015); }
}

.fone {
  position: relative;
  width: min(300px, 78vw);
  aspect-ratio: 9 / 18.6;
  background: #10141d;
  border: 1px solid #2b3346;
  border-radius: 44px;
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(200, 169, 110, 0.08),
    inset 0 1px 0 rgba(236, 231, 219, 0.09);
  animation: heroFloat 9s ease-in-out infinite;
  transform-style: preserve-3d;
}
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.fone-notch {
  position: absolute;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  width: 32%; height: 18px;
  background: #10141d;
  border-radius: 999px;
  z-index: 6;
}
.screen { position: absolute; inset: 12px; }
.face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border-radius: 33px;
  overflow: hidden;
}
.face-shop { background: #faf7f2; color: #1c1a17; }

.statusbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 18px 2px;
  font-size: 9px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  opacity: 0.7;
}
.statusbar .sig { width: 16px; height: 8px; border-radius: 2px; background: currentColor; opacity: 0.45; }

/* --- storefront chrome --- */
.shopnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 14px 8px;
  border-bottom: 1px solid #e6ddcd;
}
.shop-name { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.04em; }
[dir="rtl"] .shop-name { font-family: 'Noto Kufi Arabic', serif; font-size: 12px; }
.shop-tools { display: flex; align-items: center; gap: 9px; }
.shop-tools .ic { width: 13px; height: 13px; stroke-width: 1.6; opacity: 0.6; }
.cart { position: relative; display: flex; }
.cart-n {
  position: absolute;
  top: -5px; inset-inline-end: -6px;
  min-width: 12px; height: 12px;
  border-radius: 999px;
  background: #c9a35f;
  color: #fff;
  font-size: 8px;
  font-style: normal;
  font-weight: 600;
  display: grid; place-items: center;
  transform: scale(0);
  transition: transform 0.35s var(--ease);
}
.stage[data-cart="1"] .cart-n { transform: scale(1); }

.views { position: relative; flex: 1; overflow: hidden; }
.v {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.45s ease, transform 0.55s var(--ease);
  pointer-events: none;
}
.stage[data-scene="home"] .v-home,
.stage[data-scene="prod"] .v-prod,
.stage[data-scene="pay"] .v-pay,
.stage[data-scene="ok"] .v-ok { opacity: 1; transform: none; }
.v-scroll { padding: 10px 12px 16px; }

/* home */
.banner { position: relative; border-radius: var(--r-field); overflow: hidden; aspect-ratio: 16 / 9; }
.banner img { width: 100%; height: 100%; object-fit: cover; }
.banner b {
  position: absolute;
  inset-inline-start: 10px; bottom: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.chips { display: flex; gap: 5px; margin: 9px 0; }
.chips i {
  font-style: normal;
  font-size: 8.5px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #e6ddcd;
  color: #6d675c;
}
.chips i.on { background: #1c1a17; border-color: #1c1a17; color: #faf7f2; }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pcard { display: block; border-radius: var(--r-field); background: #fff; border: 1px solid #efe8da; padding: 6px; }
.pcard img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.pcard b { display: block; font-size: 8.5px; font-weight: 600; margin-top: 5px; line-height: 1.3; }
.pcard u { display: block; font-size: 9px; text-decoration: none; color: #8a6f3c; font-weight: 600; margin-top: 1px; }
.stage[data-scene="home"] .v-home .v-scroll { animation: browse 2.6s 1.2s var(--ease) both; }
@keyframes browse { to { transform: translateY(-92px); } }
.pcard-hot { transition: box-shadow 0.35s, transform 0.35s; }
.stage[data-scene="home"][data-tap="prod"] .pcard-hot {
  box-shadow: 0 0 0 2px #c9a35f;
  transform: scale(0.97);
}

/* product */
.shot { border-radius: var(--r-field); overflow: hidden; background: #fff; }
.shot img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.prod-body { padding-top: 9px; }
.prod-name { font-family: var(--font-display); font-size: 14px; display: block; }
[dir="rtl"] .prod-name { font-family: 'Noto Kufi Arabic', serif; font-size: 12px; }
.prod-price { display: flex; align-items: baseline; gap: 7px; margin: 4px 0 8px; }
.prod-price u { text-decoration: none; font-size: 13px; font-weight: 600; color: #8a6f3c; font-family: var(--font-mono); }
.prod-price s { font-size: 9px; color: #b0a894; font-family: var(--font-mono); }
.swatches { display: flex; gap: 6px; margin-bottom: 8px; }
.swatches i {
  width: 15px; height: 15px;
  border-radius: 999px;
  background: var(--c);
  box-shadow: 0 0 0 1px #e6ddcd;
}
.swatches i.on { box-shadow: 0 0 0 1.5px #1c1a17, inset 0 0 0 2px #faf7f2; }
.sizes { display: flex; gap: 5px; margin-bottom: 11px; }
.sizes i {
  font-style: normal;
  font-size: 8.5px;
  font-family: var(--font-mono);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #e6ddcd;
  color: #6d675c;
}
.sizes i.on { border-color: #1c1a17; color: #1c1a17; }
.buy {
  display: block;
  text-align: center;
  background: #1c1a17;
  color: #faf7f2;
  font-size: 10px;
  font-weight: 600;
  padding: 9px;
  border-radius: 999px;
  transition: transform 0.3s var(--ease), background 0.3s;
}
.prod-desc { font-size: 8.5px; color: #6d675c; line-height: 1.6; margin-top: 10px; }
.prod-notes { display: flex; gap: 12px; margin-top: 9px; border-top: 1px solid #efe8da; padding-top: 8px; }
.prod-notes span { display: flex; align-items: center; gap: 4px; font-size: 8px; color: #6d675c; }
.prod-notes .ic { width: 11px; height: 11px; stroke-width: 1.6; color: #c9a35f; }
.prod-notes i { font-style: normal; }
.stage[data-tap="buy"] .v-prod .buy,
.stage[data-tap="confirm"] .confirm { background: #c9a35f; transform: scale(0.96); }

/* checkout */
.pay-item {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid #efe8da;
  border-radius: var(--r-field);
  padding: 5px 8px 5px 5px;
  margin-bottom: 10px;
}
.pay-item img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; }
.pay-item span { display: flex; flex-direction: column; min-width: 0; }
.pay-item b { font-size: 9px; font-weight: 600; }
.pay-item i { font-style: normal; font-size: 7.5px; color: #b0a894; font-family: var(--font-mono); }
.pay-item u { margin-inline-start: auto; text-decoration: none; font-size: 9.5px; font-weight: 600; color: #8a6f3c; font-family: var(--font-mono); }
.pay-title { font-family: var(--font-display); font-size: 12px; display: block; margin-bottom: 8px; }
[dir="rtl"] .pay-title { font-family: 'Noto Kufi Arabic', serif; font-size: 11px; }
.v-pay .f {
  display: block;
  border: 1px solid #e6ddcd;
  border-radius: 8px;
  padding: 5px 8px 6px;
  margin-bottom: 8px;
  background: #fff;
  opacity: 0.55;
  transition: opacity 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.v-pay .f i { display: block; font-style: normal; font-size: 7px; color: #b0a894; letter-spacing: 0.06em; text-transform: uppercase; }
[dir="rtl"] .v-pay .f i { letter-spacing: 0; text-transform: none; }
.v-pay .fv {
  display: block;
  font-size: 9.5px;
  font-weight: 500;
  min-height: 13px;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.5s ease;
}
[dir="rtl"] .v-pay .fv { clip-path: inset(0 0 0 100%); }
.v-pay .f.filled { opacity: 1; border-color: #c9a35f; box-shadow: 0 2px 10px rgba(201, 163, 95, 0.14); }
.v-pay .f.filled .fv { clip-path: inset(0); }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.f-lab { display: block; font-style: normal; font-size: 7px; color: #b0a894; letter-spacing: 0.06em; text-transform: uppercase; margin: 4px 0 5px; }
[dir="rtl"] .f-lab { letter-spacing: 0; text-transform: none; }
.pay-trust { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.pay-trust span { display: flex; align-items: center; gap: 5px; font-size: 8px; color: #6d675c; }
.pay-trust .ic { width: 11px; height: 11px; stroke-width: 1.6; color: #c9a35f; }
.pay-trust i { font-style: normal; }

.carriers { display: flex; gap: 5px; opacity: 0.4; transition: opacity 0.4s; }
.carriers i {
  flex: 1;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 6px 6px;
  border: 1px solid #e6ddcd;
  border-radius: 8px;
  background: #fff;
  color: #6d675c;
  transition: color 0.35s, border-color 0.35s, background 0.35s;
}
/* inside the chip the mask letterboxes itself, so every carrier fits its slot */
.carriers .mono { width: 100%; height: 11px; }
.carriers.filled { opacity: 1; }
.carriers.filled i:first-child { color: #1c1a17; border-color: #c9a35f; background: #fcf7ee; }
.modes { display: flex; gap: 5px; margin: 9px 0; opacity: 0.4; transition: opacity 0.4s; }
.modes i {
  font-style: normal;
  font-size: 8.5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #e6ddcd;
  color: #6d675c;
}
.modes.filled { opacity: 1; }
.modes.filled i.on { background: #1c1a17; border-color: #1c1a17; color: #faf7f2; }
.totals { display: flex; flex-direction: column; gap: 3px; margin-bottom: 11px; opacity: 0.4; transition: opacity 0.4s; }
.totals.filled { opacity: 1; }
.totals span { display: flex; justify-content: space-between; font-size: 9px; color: #6d675c; }
.totals i { font-style: normal; }
.totals b { font-family: var(--font-mono); font-weight: 500; }
.totals .grand { font-size: 11px; color: #1c1a17; border-top: 1px solid #efe8da; padding-top: 4px; margin-top: 2px; }
.totals .grand b { font-weight: 600; color: #8a6f3c; }

/* confirmation */
.v-ok { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 22px; gap: 5px; }
.okmark {
  width: 46px; height: 46px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(76, 175, 125, 0.14);
  color: #2f9d6d;
  margin-bottom: 6px;
}
.okmark .ic { width: 22px; height: 22px; stroke-width: 2.4; }
.stage[data-scene="ok"] .okmark { animation: pop 0.6s var(--ease) both; }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.v-ok b { font-family: var(--font-display); font-size: 13px; }
[dir="rtl"] .v-ok b { font-family: 'Noto Kufi Arabic', serif; font-size: 12px; }
.v-ok u { text-decoration: none; font-family: var(--font-mono); font-size: 11px; color: #8a6f3c; }
.v-ok p { font-size: 9px; color: #6d675c; }

.toast {
  position: absolute;
  bottom: 16px; left: 50%;
  transform: translate(-50%, 14px);
  display: flex; align-items: center; gap: 6px;
  background: rgba(28, 26, 23, 0.94);
  color: #faf7f2;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 8.5px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.35s, transform 0.35s var(--ease);
  z-index: 5;
}
.toast em { font-style: normal; }
.stage[data-toast="1"] .toast { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   THE HAND-OFF — the order leaves the phone and lands in the dashboard
   A flip would have hidden one side of the story. Here both screens stay
   on stage: the receipt lifts off the phone, arcs across, and the seller
   panel wakes up with the money already counted.
   ============================================================ */
.parcel {
  position: absolute;
  left: 50%; top: 42%;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fffaf0, #e9dcc2);
  color: #241c09;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  box-shadow: 0 14px 40px rgba(200, 169, 110, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  pointer-events: none;
}
.parcel .ic { width: 13px; height: 13px; stroke-width: 2.6; }
.parcel em { font-style: normal; font-weight: 500; }
.stage[data-fly] .parcel { animation: fly 1.15s cubic-bezier(0.55, 0, 0.2, 1) forwards; }
@keyframes fly {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  26% { transform: translate(-50%, -50%) scale(1); }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--fx, -180px)), calc(-50% + var(--fy, 170px))) scale(0.45) rotate(-10deg);
  }
}

.dock {
  position: absolute;
  inset-inline-start: -5%;
  bottom: 9%;
  z-index: 7;
  width: min(238px, 62%);
  padding: 0.85rem 0.9rem 0.75rem;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(26, 33, 51, 0.94), rgba(11, 14, 20, 0.96));
  backdrop-filter: blur(14px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(18px) scale(0.94);
  transition: opacity 0.5s ease, transform 0.65s var(--ease), box-shadow 0.5s;
}
.dock.on { opacity: 1; transform: none; }
.dock.hit { box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(230, 205, 150, 0.55); }
.dock-head { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.55rem; }
.dock-head b { font-size: 0.78rem; color: var(--brass-2); font-weight: 600; }
.dock-head em { margin-inline-start: auto; font-style: normal; font-family: var(--font-mono); font-size: 0.7rem; color: var(--dim); }
.dock-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; font-size: 0.74rem; color: var(--dim); }
.dock-row b { font-family: var(--font-mono); font-weight: 500; color: var(--sand); direction: ltr; unicode-bidi: isolate; }
.dock-cta { display: flex; gap: 0.35rem; margin: 0.7rem 0; }
.dock-cta i {
  font-style: normal;
  font-size: 0.66rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--brass-2);
  white-space: nowrap;
}
.dock-cta i:first-child { background: linear-gradient(135deg, var(--brass-2), var(--brass)); color: #241c09; border-color: transparent; font-weight: 600; }
.dock-kpi { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; border-top: 1px solid var(--line-soft); padding-top: 0.55rem; }
.dock-kpi i { font-style: normal; font-size: 0.62rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.09em; }
[dir="rtl"] .dock-kpi i { text-transform: none; letter-spacing: 0; }
.dock-num { font-family: var(--font-mono); font-size: 0.92rem; color: var(--brass-2); font-weight: 500; direction: ltr; unicode-bidi: isolate; }

/* pointer */
.tapdot {
  position: absolute;
  left: var(--tx, 50%); top: var(--ty, 50%);
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 999px;
  background: rgba(236, 231, 219, 0.75);
  box-shadow: 0 0 14px rgba(236, 231, 219, 0.5);
  opacity: 0;
  z-index: 7;
  transition: left 0.5s var(--ease), top 0.5s var(--ease), opacity 0.3s;
}
.stage[data-tap] .tapdot { opacity: 1; animation: tap 0.65s ease; }
@keyframes tap {
  40% { transform: scale(0.55); }
  100% { transform: scale(1); }
}
.stage-cap { margin-top: 1.1rem; font-size: 0.8rem; color: var(--dim); text-align: center; }

/* ============================================================
   PROOF — figures then the carrier wall
   ============================================================ */
.proof { padding: clamp(1rem, 3vw, 2rem) 0 clamp(2rem, 5vw, 3.5rem); }
.figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--line-soft);
  margin: 0 var(--pad) clamp(2rem, 5vw, 3.2rem);
}
.fig {
  padding: clamp(1.1rem, 3vw, 1.9rem) 0.6rem;
  text-align: center;
  border-inline-end: 1px solid var(--line-soft);
}
.fig:last-child { border-inline-end: none; }
.fig-n, .fig-s {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  color: var(--brass-2);
  line-height: 1;
}
.fig-s { color: var(--brass); font-size: clamp(1.1rem, 2.2vw, 1.5rem); }
.fig i { display: block; font-style: normal; color: var(--dim); font-size: 0.82rem; margin-top: 0.45rem; }

.marquee-label {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1.6rem;
}
[dir="rtl"] .marquee-label { letter-spacing: 0.04em; text-transform: none; font-family: var(--font-body); }
.marquee {
  overflow: hidden;
  direction: ltr;
  color: var(--sand);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
/* the gap lives on the items, not on the flex container: that way the track is
   exactly two identical halves and translating -50% loops without a jump. */
.marquee-track { display: flex; align-items: center; width: max-content; animation: marquee 42s linear infinite; }
.marquee-track > * { margin-inline-end: clamp(2.2rem, 5vw, 4rem); }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee .mono { opacity: min(1, calc(0.55 * var(--o, 1))); transition: opacity 0.3s, color 0.3s; }
.marquee .mono:hover { opacity: 1; color: var(--brass-2); }
.marquee-more {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--brass);
  white-space: nowrap;
  opacity: 0.85;
}

/* ---------- sections ---------- */
.section { padding: clamp(3.5rem, 8vw, 7rem) var(--pad); }
.section-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section-sub { color: var(--dim); margin-top: 1rem; max-width: 40rem; }

/* ============================================================
   FEATURES BENTO — an instrument console
   Each tile is a working miniature of the feature it describes, framed
   like a readout: HUD brackets that draw themselves, a scan line that
   powers the tile on, and a light that runs around the frame on hover.
   The demos are gated on `.play`, which the reveal observer adds once the
   tile is on screen and re-adds on hover, so nothing loops forever.
   ============================================================ */
@property --spin {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
}
.cell {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background: linear-gradient(165deg, rgba(18, 23, 36, 0.9), rgba(13, 17, 25, 0.7));
  backdrop-filter: blur(6px);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.cell::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(200, 169, 110, 0.13), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.cell::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--spin),
      transparent 0%, rgba(230, 205, 150, 0.9) 9%, rgba(200, 169, 110, 0.15) 20%, transparent 34%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.cell:hover { border-color: var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); }
.cell:hover::before { opacity: 1; }
.cell:hover::after { opacity: 1; animation: spin 2.8s linear infinite; }
@keyframes spin { to { --spin: 360deg; } }

/* 2. the scan line that boots the tile */
.scan {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 3;
  height: 34%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(230, 205, 150, 0.14) 62%, rgba(230, 205, 150, 0.5));
  box-shadow: 0 1px 0 rgba(230, 205, 150, 0.5);
}
.cell.play .scan { animation: boot 1.05s var(--ease) forwards; }
@keyframes boot {
  0% { opacity: 0; transform: translateY(-110%); }
  12% { opacity: 1; }
  85% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(320%); }
}
.cell-hero { grid-column: span 2; grid-row: span 2; }
.cell-wide { grid-column: span 2; }
.cell h3 { font-size: 1.06rem; color: var(--brass-2); margin-bottom: 0.5rem; font-family: var(--font-body); font-weight: 600; line-height: 1.35; }
.cell p { color: var(--dim); font-size: 0.9rem; }
.cell-body { padding: 1.2rem 1.3rem 1.4rem; }
.cell-hero .cell-body { padding: 1.4rem 1.5rem 1.6rem; }

.cell-art {
  position: relative;
  overflow: hidden;
  height: 132px;
  flex: none;
  border-bottom: 1px solid var(--line-soft);
  background:
    radial-gradient(80% 90% at 50% 0%, rgba(200, 169, 110, 0.1), transparent 70%),
    linear-gradient(rgba(236, 231, 219, 0.026) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, rgba(236, 231, 219, 0.026) 1px, transparent 1px) 0 0 / 24px 100%;
}
/* corner brackets, drawn in when the tile powers on */
.cell-art::before {
  content: '';
  position: absolute;
  inset: 9px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  --br: linear-gradient(var(--brass), var(--brass));
  background:
    var(--br) 0 0 / 11px 1px no-repeat, var(--br) 0 0 / 1px 11px no-repeat,
    var(--br) 100% 0 / 11px 1px no-repeat, var(--br) 100% 0 / 1px 11px no-repeat,
    var(--br) 0 100% / 11px 1px no-repeat, var(--br) 0 100% / 1px 11px no-repeat,
    var(--br) 100% 100% / 11px 1px no-repeat, var(--br) 100% 100% / 1px 11px no-repeat;
  transition: opacity 0.4s;
}
.cell.play .cell-art::before { animation: brackets 0.7s 0.25s var(--ease) forwards; }
@keyframes brackets {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 0.34; transform: none; }
}
.cell:hover .cell-art::before { opacity: 0.75; }
.cell-hero .cell-art { flex: 1; height: auto; min-height: 230px; }

/* --- carriers wall + the label that prints out of it --- */
.art-carriers {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  padding: 1.6rem 1.4rem;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(200, 169, 110, 0.13), transparent 70%),
    linear-gradient(rgba(236, 231, 219, 0.026) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, rgba(236, 231, 219, 0.026) 1px, transparent 1px) 0 0 / 24px 100%;
}
.wall { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 1.3rem 2rem; color: var(--sand); }
.wall .mono { opacity: 0.3; animation: carrierIn 11s ease-in-out infinite; }
.wall .mono:nth-child(2) { animation-delay: 1.4s; }
.wall .mono:nth-child(3) { animation-delay: 2.8s; }
.wall .mono:nth-child(4) { animation-delay: 4.2s; }
.wall .mono:nth-child(5) { animation-delay: 5.6s; }
.wall .mono:nth-child(6) { animation-delay: 7s; }
.wall .mono:nth-child(7) { animation-delay: 8.4s; }
.wall .mono:nth-child(8) { animation-delay: 9.8s; }
@keyframes carrierIn {
  0%, 88%, 100% { opacity: 0.28; color: var(--sand); }
  94% { opacity: 1; color: var(--brass-2); }
}
.label {
  position: absolute;
  inset-inline-end: 1.2rem;
  bottom: -1px;
  width: 176px;
  padding: 0.6rem 0.75rem 0.7rem;
  border-radius: 10px 10px 0 0;
  background: #faf7f2;
  color: #1c1a17;
  box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.45);
  transform: translateY(102%);
  clip-path: inset(0 0 0 0);
}
.cell.play .label { animation: printOut 0.9s 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) forwards; }
@keyframes printOut { to { transform: translateY(0); } }
.label-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.35rem; }
.label-top .mono { opacity: 0.85; }
.label-top em { font-style: normal; font-size: 0.55rem; font-family: var(--font-mono); border: 1px solid #d8cdb4; border-radius: 999px; padding: 0.1rem 0.4rem; }
.label b { display: block; font-family: var(--font-mono); font-size: 0.9rem; }
.label p { font-size: 0.6rem !important; color: #6d675c !important; margin-bottom: 0.4rem; }
.barcode {
  display: block;
  height: 20px;
  background:
    repeating-linear-gradient(90deg, #1c1a17 0 2px, transparent 2px 4px, #1c1a17 4px 5px, transparent 5px 9px, #1c1a17 9px 12px, transparent 12px 14px);
}

/* --- COD checkout filling itself --- */
.art-cod { padding: 1.1rem 1.2rem; display: flex; flex-direction: column; justify-content: center; gap: 0.55rem; }
.cod-row { display: block; }
.cod-row i, .cod-row u {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: rgba(236, 231, 219, 0.12);
}
.cod-row i { width: 34%; margin-bottom: 5px; }
.cod-row u {
  height: 11px;
  background: linear-gradient(90deg, var(--brass), var(--brass-deep));
  transform: scaleX(0);
  transform-origin: 0 50%;
}
[dir="rtl"] .cod-row u { transform-origin: 100% 50%; }
.cell.play .cod-row u { animation: fillBar 0.55s var(--ease) forwards; }
.cell.play .r1 u { animation-delay: 0.25s; }
.cell.play .r2 u { animation-delay: 0.55s; }
.cell.play .r3 u { animation-delay: 0.85s; }
@keyframes fillBar { to { transform: scaleX(1); } }
.cod-fee {
  position: absolute;
  inset-inline-end: 1.1rem; bottom: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--brass-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  background: rgba(11, 14, 20, 0.8);
  opacity: 0;
  transform: translateY(6px);
}
.cell.play .cod-fee { animation: popIn 0.5s 1.25s var(--ease) forwards; }
@keyframes popIn { to { opacity: 1; transform: none; } }

/* --- confirmers racing for the order --- */
.art-conf { padding: 1.1rem 1.2rem; display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; }
.conf-row {
  display: flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 0.42rem 0.6rem;
  font-size: 0.72rem;
  transition: border-color 0.4s, background 0.4s;
}
.conf-row i { width: 18px; height: 18px; border-radius: 999px; background: linear-gradient(135deg, var(--brass-deep), var(--panel-2)); flex: none; }
.conf-row b { font-family: var(--font-mono); font-weight: 500; color: var(--sand); }
.conf-row em {
  margin-inline-start: auto;
  font-style: normal;
  font-size: 0.6rem;
  color: var(--good);
  border: 1px solid rgba(76, 175, 125, 0.4);
  border-radius: 999px;
  padding: 0.08rem 0.45rem;
  opacity: 0;
  transform: scale(0.7);
}
.cell.play .c1 { animation: claimRow 0.6s 0.45s var(--ease) forwards; }
.cell.play .c1 em { animation: popIn 0.45s 0.75s var(--ease) forwards; }
@keyframes claimRow {
  to { border-color: rgba(76, 175, 125, 0.45); background: rgba(76, 175, 125, 0.08); }
}
.conf-fee {
  position: absolute;
  inset-inline-end: 1.1rem; bottom: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--good);
  opacity: 0;
  transform: translateY(6px);
}
.cell.play .conf-fee { animation: popIn 0.5s 1.15s var(--ease) forwards; }

/* --- return-risk gauge --- */
.art-fraud { display: grid; place-items: center; padding-top: 1.4rem; }
.gauge { position: relative; width: 104px; height: 52px; }
/* the arc carries the mask, the needle must stay outside it */
.gauge::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 104px 104px 0 0;
  background: conic-gradient(from -90deg, #3f8f68 0deg 62deg, #b8762f 62deg 124deg, #a8453a 124deg 180deg, transparent 180deg);
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 57%, #000 57.6%);
  mask: radial-gradient(circle at 50% 100%, transparent 57%, #000 57.6%);
  opacity: 0.85;
}
.gauge i {
  position: absolute;
  z-index: 2;
  bottom: -3px; left: 50%;
  width: 2px; height: 46px;
  margin-inline-start: -1px;
  border-radius: 2px;
  background: var(--sand);
  transform-origin: 50% 100%;
  transform: rotate(-88deg);
}
.cell.play .gauge i { animation: needle 1.1s 0.35s cubic-bezier(0.3, 1.4, 0.5, 1) forwards; }
@keyframes needle { to { transform: rotate(56deg); } }
.risk { display: flex; align-items: baseline; gap: 0.4rem; margin-top: 0.4rem; }
.risk em { font-style: normal; font-size: 0.64rem; color: var(--dim); }
.risk b { font-family: var(--font-mono); font-size: 0.86rem; color: #d98a3d; }
.blocked {
  position: absolute;
  inset-inline-end: 1rem; top: 1rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e79184;
  border: 1px solid rgba(231, 145, 132, 0.45);
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
  opacity: 0;
  transform: rotate(-9deg) scale(1.7);
}
[dir="rtl"] .blocked { letter-spacing: 0; text-transform: none; }
.cell.play .blocked { animation: stamp 0.4s 1.3s var(--ease) forwards; }
@keyframes stamp { to { opacity: 1; transform: rotate(-9deg) scale(1); } }

/* --- the pings that land the second an order does --- */
.art-ping { padding: 1rem 1.1rem; display: flex; flex-direction: column; justify-content: center; gap: 0.42rem; }
.ping {
  display: flex; align-items: center; gap: 0.45rem;
  border: 1px solid var(--line-soft);
  background: rgba(11, 14, 20, 0.6);
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
  font-size: 0.66rem;
  color: var(--dim);
  opacity: 0;
  transform: translateY(10px);
}
.ping em { font-style: normal; }
.ping i { width: 6px; height: 6px; border-radius: 999px; background: var(--brass); flex: none; }
.p1 { color: var(--brass-2); border-color: var(--line); }
.cell.play .ping { animation: popIn 0.5s var(--ease) forwards; }
.cell.play .p1 { animation-delay: 0.3s; }
.cell.play .p2 { animation-delay: 0.55s; }
.cell.play .p3 { animation-delay: 0.8s; }

/* --- a prompt on the left, the page it writes on the right --- */
.art-ai {
  height: 190px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.4rem;
  padding: 1.2rem 1.4rem;
}
.prompt { display: flex; align-items: flex-start; gap: 0.6rem; }
.prompt em { font-style: normal; font-family: var(--font-mono); color: var(--brass); font-size: 0.85rem; line-height: 1; }
.ai-type { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.ai-type i { display: block; height: 7px; border-radius: 999px; background: rgba(236, 231, 219, 0.26); transform: scaleX(0); transform-origin: 0 50%; }
[dir="rtl"] .ai-type i { transform-origin: 100% 50%; }
.ai-type i:nth-child(1) { width: 92%; }
.ai-type i:nth-child(2) { width: 64%; }
.ai-type i:nth-child(3) { width: 78%; background: rgba(200, 169, 110, 0.5); }
.cell.play .ai-type i { animation: fillBar 0.5s var(--ease) forwards; }
.cell.play .ai-type i:nth-child(2) { animation-delay: 0.3s; }
.cell.play .ai-type i:nth-child(3) { animation-delay: 0.6s; }

.mock {
  position: relative;
  width: 158px;
  padding: 0.5rem;
  border-radius: 12px;
  background: #faf7f2;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mock > span { opacity: 0; transform: translateY(8px); }
.cell.play .mock > span { animation: popIn 0.45s var(--ease) forwards; }
.cell.play .mock-bar { animation-delay: 0.75s; }
.cell.play .mock-hero { animation-delay: 0.95s; }
.cell.play .mock-t1 { animation-delay: 1.15s; }
.cell.play .mock-t2 { animation-delay: 1.3s; }
.cell.play .mock-cta { animation-delay: 1.45s; }
.mock-bar { height: 6px; border-radius: 999px; background: #e6ddcd; width: 44%; }
.mock-hero { display: block; height: 74px; border-radius: 8px; background: #f1ece1; overflow: hidden; }
.mock-hero img { width: 100%; height: 100%; object-fit: cover; }
.mock-t1, .mock-t2 { height: 6px; border-radius: 999px; background: #e6ddcd; }
.mock-t2 { width: 62%; }
.mock-cta { height: 15px; border-radius: 999px; background: linear-gradient(135deg, #c9a35f, #8a6f3c); margin-top: 2px; }

.ai-spark {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(230, 205, 150, 0.18) 50%, transparent 58%);
  transform: translateX(-100%);
  animation: aiSweep 6s ease-in-out infinite;
}
@keyframes aiSweep { 0%, 62% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* --- what is really left at the end of the month --- */
.art-money { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; gap: 0.5rem; padding: 1.3rem 1.2rem 0.9rem; }
.art-money .col { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 5px; }
.art-money i {
  display: block;
  height: var(--h, 60%);
  border-radius: 4px 4px 0 0;
  background: color-mix(in srgb, var(--brass) 55%, transparent);
  transform: scaleY(0);
  transform-origin: 50% 100%;
}
.art-money em { font-style: normal; font-size: 0.55rem; color: var(--dim); text-align: center; font-family: var(--font-mono); }
.m1 i { --h: 88%; }
.m2 i { --h: 34%; }
.m3 i { --h: 22%; }
.m4 i { --h: 30%; }
.m5 i { --h: 56%; }
.art-money .down i { background: rgba(236, 231, 219, 0.14); }
.art-money .net i { background: linear-gradient(180deg, var(--brass-2), var(--brass)); box-shadow: 0 0 18px rgba(200, 169, 110, 0.35); }
.cell.play .art-money i { animation: growY 0.55s var(--ease) forwards; }
.cell.play .m2 i { animation-delay: 0.15s; }
.cell.play .m3 i { animation-delay: 0.3s; }
.cell.play .m4 i { animation-delay: 0.45s; }
.cell.play .m5 i { animation-delay: 0.65s; }

/* --- the same shop wearing three designs --- */
.art-skins { height: 170px; }
.art-skins img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  animation: skinCycle 9s linear infinite;
}
.art-skins img:nth-child(2) { animation-delay: 3s; }
.art-skins img:nth-child(3) { animation-delay: 6s; }
@keyframes skinCycle {
  0%, 30% { opacity: 1; }
  36%, 94% { opacity: 0; }
  100% { opacity: 1; }
}

/* ============================================================
   DESIGN GALLERY — pinned horizontal pan
   The section is tall, its inner stage sticks to the viewport and the
   track slides sideways on a native view() timeline. Browsers without
   scroll-driven animations fall back to a snap carousel, no JS involved.
   ============================================================ */
.pan { position: relative; }
.pan-stage {
  position: sticky;
  top: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  padding-block: clamp(4rem, 9vh, 7rem);
  overflow: hidden;
}
.pan-head { padding-inline: var(--pad); max-width: 46rem; }
.pan-sub { color: var(--dim); margin-top: 0.9rem; }
/* default = the fallback: an ordinary snap carousel */
.pan-track {
  display: flex;
  gap: 1.2rem;
  padding-inline: var(--pad);
  padding-bottom: 0.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--brass) transparent;
}
.deck {
  flex: 0 0 min(320px, 76vw);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  overflow: hidden;
  background: rgba(18, 23, 36, 0.72);
  backdrop-filter: blur(8px);
  transition: border-color 0.4s, transform 0.4s var(--ease), box-shadow 0.4s;
}
.deck.live { border-color: color-mix(in srgb, var(--t) 60%, transparent); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); }
.deck-shot { position: relative; overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.deck-shot img { display: block; width: 100%; aspect-ratio: 1280 / 832; object-fit: cover; object-position: top; }
.deck-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 253, 245, 0.2) 50%, transparent 65%);
  transform: translateX(-130%) skewX(-8deg);
  transition: transform 0.9s ease;
}
.deck:hover .deck-sheen, .deck.live .deck-sheen { transform: translateX(130%) skewX(-8deg); }
.deck-info { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.9rem 1.1rem 0.3rem; }
.deck-info b { font-family: 'Marcellus', serif; font-size: 1.1rem; color: var(--sand); letter-spacing: 0.04em; }
/* the three swatches are the pack's real palette, straight from its theme file */
.deck-pal { display: flex; gap: 3px; flex: none; }
.deck-pal u { width: 12px; height: 12px; border-radius: 4px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(236, 231, 219, 0.16); }
.deck-desc { padding: 0.2rem 1.1rem 1.1rem; color: var(--dim); font-size: 0.82rem; line-height: 1.5; }
.deck-last {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem 1.6rem;
  flex: 0 0 min(280px, 72vw);
}
.deck-last p { color: var(--dim); font-size: 0.9rem; margin-bottom: 1.2rem; }

.deck { scroll-snap-align: center; }

/* Rail segmenté : masqué tant que le carrousel autonome n'est pas actif
   (en repli, la barre de défilement native joue déjà ce rôle). */
.pan-rail, .pan-floor { display: none; }

/* ── CARROUSEL AUTONOME ────────────────────────────────────────────────────
   Plus de section de 420vh ni de piste qu'il faut pousser : les cartes
   tournent d'elles-mêmes sur un anneau 3D.

   Toutes jouent LA MÊME animation, simplement décalée d'un cran par
   `animation-delay`. La carte 0 a donc un décalage nul : elle est au centre à
   l'instant zéro, et la galerie s'ouvre bien sur le PREMIER design.

   Aucune timeline de scroll ici — ça fonctionne aussi là où
   `animation-timeline` n'existe pas encore. */
@media (prefers-reduced-motion: no-preference) and (min-width: 641px) {
  .pan { height: auto; }
  .pan-stage {
    position: static;
    min-height: 0;
    perspective: 1700px;
    perspective-origin: 50% 40%;
    overflow: hidden;
    --cw: min(360px, 74vw);
    --step: min(292px, 25vw);
  }

  .pan-track {
    position: relative;
    display: block;
    height: clamp(340px, 44vh, 460px);
    margin-top: clamp(2rem, 5vh, 3.4rem);
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
    transform-style: preserve-3d;
  }

  /* Sol en perspective qui défile : c'est lui qui donne l'assise futuriste.
     Il emprunte la teinte du design courant, poussée par l'observateur. */
  .pan-floor {
    display: block;
    position: absolute;
    left: 50%;
    bottom: -12%;
    width: 240%;
    height: 62%;
    transform: translateX(-50%) rotateX(76deg);
    transform-origin: 50% 100%;
    pointer-events: none;
    background:
      repeating-linear-gradient(90deg, transparent 0 84px,
        color-mix(in srgb, var(--tint, #c8a96e) 30%, transparent) 84px 85px),
      repeating-linear-gradient(0deg, transparent 0 84px,
        color-mix(in srgb, var(--tint, #c8a96e) 20%, transparent) 84px 85px);
    -webkit-mask-image: linear-gradient(to top, #000, transparent 76%);
    mask-image: linear-gradient(to top, #000, transparent 76%);
    opacity: 0.55;
    animation: floorRun 5.5s linear infinite;
  }
  @keyframes floorRun { to { background-position: 0 85px, 0 85px; } }

  /* Toutes les cartes ont la même hauteur : sans ça, l'anneau 3D bringuebale. */
  .deck {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--cw);
    height: 100%;
    margin-left: calc(var(--cw) / -2);
    flex: none;
    display: flex;
    flex-direction: column;
    transition: none;
    will-change: transform, filter, opacity;
    animation: deckCycle var(--T, 26s) linear infinite both;
    animation-delay: calc(-1 * var(--i, 0) * var(--T, 26s) / var(--n, 1));
  }
  .deck-shot { flex: 1 1 auto; min-height: 0; }
  .deck-shot img { height: 100%; }
  .deck-desc { min-height: 3.4em; }
  .deck-last { display: flex; align-items: center; justify-content: center; padding: 2rem 1.6rem; }

  @keyframes deckCycle {
    0%, 7% {
      transform: translate3d(0, 0, 80px) rotateY(0deg) scale(1.02);
      filter: blur(0) saturate(1.08) brightness(1.06);
      box-shadow: 0 44px 96px rgba(0, 0, 0, 0.6),
        0 0 0 1px color-mix(in srgb, var(--t) 62%, transparent),
        0 0 78px color-mix(in srgb, var(--t) 32%, transparent);
      opacity: 1;
      z-index: 6;
    }
    17% {
      transform: translate3d(calc(var(--step) * -1), 0, -230px) rotateY(34deg) scale(0.9);
      filter: blur(2.5px) saturate(0.55) brightness(0.6);
      box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
      opacity: 0.92;
      z-index: 4;
    }
    27% {
      transform: translate3d(calc(var(--step) * -2), 0, -480px) rotateY(46deg) scale(0.76);
      filter: blur(6px) saturate(0.3) brightness(0.4);
      opacity: 0;
      z-index: 2;
    }
    /* 27 % → 73 % : la carte revient côté droit, invisible. */
    50% { opacity: 0; z-index: 2; }
    73% {
      transform: translate3d(calc(var(--step) * 2), 0, -480px) rotateY(-46deg) scale(0.76);
      filter: blur(6px) saturate(0.3) brightness(0.4);
      opacity: 0;
      z-index: 2;
    }
    83% {
      transform: translate3d(var(--step), 0, -230px) rotateY(-34deg) scale(0.9);
      filter: blur(2.5px) saturate(0.55) brightness(0.6);
      box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
      opacity: 0.92;
      z-index: 4;
    }
    100% {
      transform: translate3d(0, 0, 80px) rotateY(0deg) scale(1.02);
      filter: blur(0) saturate(1.08) brightness(1.06);
      box-shadow: 0 44px 96px rgba(0, 0, 0, 0.6),
        0 0 0 1px color-mix(in srgb, var(--t) 62%, transparent),
        0 0 78px color-mix(in srgb, var(--t) 32%, transparent);
      opacity: 1;
      z-index: 6;
    }
  }

  /* Balayage lumineux sur la carte au centre. */
  .deck-sheen {
    animation: sheenRun var(--T, 26s) linear infinite both;
    animation-delay: calc(-1 * var(--i, 0) * var(--T, 26s) / var(--n, 1));
    transition: none;
  }
  @keyframes sheenRun {
    0%, 1% { transform: translateX(-130%) skewX(-8deg); }
    7% { transform: translateX(130%) skewX(-8deg); }
    8%, 100% { transform: translateX(-130%) skewX(-8deg); }
  }

  /* Rail : un segment par design, celui du centre est plein. */
  .pan-rail {
    display: flex;
    gap: 7px;
    justify-content: center;
    margin-top: clamp(1.6rem, 4vh, 2.4rem);
  }
  .pan-rail i {
    position: relative;
    width: 30px;
    height: 3px;
    border-radius: 2px;
    background: rgba(236, 231, 219, 0.14);
    overflow: hidden;
  }
  .pan-rail i::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 2px;
    background: var(--brass);
    transform-origin: left center;
    transform: scaleX(0);
    animation: segFill var(--T, 26s) linear infinite both;
    animation-delay: calc(-1 * var(--i, 0) * var(--T, 26s) / var(--n, 1));
  }
  [dir='rtl'] .pan-rail i::after { transform-origin: right center; }
  @keyframes segFill {
    0%, 7% { transform: scaleX(1); }
    9%, 82% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
  }

  /* Hors écran : rien ne tourne — inutile de faire travailler le compositeur
     sur une section que personne ne regarde.

     Volontairement AUCUNE pause au survol : le carrousel ne doit jamais
     s'arrêter parce que la souris traverse la section. On passe souvent au-dessus
     sans intention de s'arrêter, et l'anneau qui se fige au milieu d'une
     rotation donne l'impression que la page a planté. */
  .pan:not(.playing) .deck,
  .pan:not(.playing) .deck-sheen,
  .pan:not(.playing) .pan-floor,
  .pan:not(.playing) .pan-rail i::after { animation-play-state: paused; }
}

/* ============================================================
   DASHBOARD — a pinned product tour
   The section is four screens tall. The dashboard sticks, and four scroll
   markers hand the main panel over one after the other, so the visitor
   walks through Orders, Delivery, Finance and Themes without clicking.
   ============================================================ */
.tour { position: relative; height: 400vh; }
.tour-stage {
  position: sticky;
  top: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(1.6rem, 4vw, 3.6rem);
  padding: clamp(4rem, 10vh, 7rem) var(--pad);
}
.tour-copy h2 { margin-bottom: 1.8rem; }
.tour-steps { list-style: none; display: flex; flex-direction: column; gap: 0.2rem; }
.ts {
  position: relative;
  padding: 0.75rem 0 0.75rem 1.25rem;
  border-inline-start: 2px solid var(--line-soft);
  transition: border-color 0.45s, opacity 0.45s;
  opacity: 0.42;
  cursor: pointer;
}
.ts:hover { opacity: 0.75; }
.ts:focus-visible { outline: 2px solid var(--brass-2); outline-offset: 4px; border-radius: 4px; }
[dir="rtl"] .ts { padding: 0.75rem 1.25rem 0.75rem 0; }
.ts b { display: block; font-size: 1.02rem; font-weight: 600; color: var(--sand); margin-bottom: 0.25rem; }
.ts span { display: block; font-size: 0.88rem; color: var(--dim); max-width: 30rem; }
.ts.on { opacity: 1; border-inline-start-color: var(--brass); }
.ts.on b { color: var(--brass-2); }

/* Four bands, one per step: whichever one holds the middle of the screen
   owns the panel, so a fast scroll can never fall between two markers.
   They only cover the pinned stretch (the stage sticks for 300vh of the
   400vh section, so the viewport centre sweeps 12.5% to 87.5% of it). */
.tour-mark { position: absolute; inset-inline: 0; height: 18.75%; pointer-events: none; }
.tour-mark:nth-of-type(1) { top: 12.5%; }
.tour-mark:nth-of-type(2) { top: 31.25%; }
.tour-mark:nth-of-type(3) { top: 50%; }
.tour-mark:nth-of-type(4) { top: 68.75%; }

.tour-rail {
  position: absolute;
  inset-inline-start: var(--pad);
  bottom: 8%;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.tour-rail i { display: block; width: 34px; height: 3px; border-radius: 999px; background: rgba(236, 231, 219, 0.14); transition: background 0.4s; }
.tour[data-at="1"] .tour-rail i:nth-child(1),
.tour[data-at="2"] .tour-rail i:nth-child(2),
.tour[data-at="3"] .tour-rail i:nth-child(3),
.tour[data-at="4"] .tour-rail i:nth-child(4) { background: var(--brass); }

.dash {
  display: grid;
  grid-template-columns: 190px 1fr;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: rgba(18, 23, 36, 0.88);
  backdrop-filter: blur(10px);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55);
}
.dash-side {
  background: rgba(11, 14, 20, 0.7);
  padding: 1.1rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border-inline-end: 1px solid var(--line-soft);
}
.dash-brand { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; padding: 0 0.4rem; }
.dash-brand img { width: 26px; }
.dash-brand span { font-family: 'Marcellus', serif; color: var(--brass-2); letter-spacing: 0.06em; }
.dash-item {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.84rem;
  color: var(--dim);
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  transition: background 0.4s, color 0.4s;
}
.dash-item .ic { width: 16px; height: 16px; }
.dash-item em { font-style: normal; }
.dash[data-panel="orders"] [data-item="orders"],
.dash[data-panel="delivery"] [data-item="delivery"],
.dash[data-panel="finance"] [data-item="finance"],
.dash[data-panel="themes"] [data-item="themes"] { background: var(--panel-2); color: var(--brass-2); }

.dash-main { position: relative; padding: 1.2rem; min-width: 0; min-height: 322px; }

.panel {
  position: absolute;
  inset: 1.2rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.55s var(--ease);
  pointer-events: none;
}
.dash[data-panel="orders"] .p-orders,
.dash[data-panel="delivery"] .p-delivery,
.dash[data-panel="finance"] .p-finance,
.dash[data-panel="themes"] .p-themes { opacity: 1; transform: none; }

.dash-box { background: rgba(11, 14, 20, 0.6); border: 1px solid var(--line-soft); border-radius: var(--r-field); padding: 0.9rem; min-width: 0; }
.box-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.85rem; }
.box-head b { font-size: 0.78rem; font-weight: 600; color: var(--sand); }
.box-head .live-dot, .box-tag { margin-inline-start: auto; }
.box-tag { font-family: var(--font-mono); font-size: 0.66rem; color: var(--brass); }

/* orders */
.dash-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; margin-bottom: 0.9rem; }
.tile { background: rgba(11, 14, 20, 0.6); border: 1px solid var(--line-soft); border-radius: var(--r-field); padding: 0.75rem 0.85rem; }
.tile i { display: block; font-style: normal; font-size: 0.66rem; color: var(--dim); margin-bottom: 0.3rem; }
.tile b { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 500; color: var(--sand); display: block; }
.tile b small { font-size: 0.62rem; color: var(--dim); }
.tile-up { font-size: 0.64rem; color: var(--good); font-family: var(--font-mono); }
.tile-up::before { content: '▲ '; font-size: 0.5rem; }
.tile-profit { border-color: var(--line); background: linear-gradient(150deg, rgba(200, 169, 110, 0.14), rgba(11, 14, 20, 0.6) 70%); }
.tile-profit b { color: var(--brass-2); }
.dash-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0.9rem; }
.bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 150px; direction: ltr; }
.bar-col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bar-col i {
  width: 100%; max-width: 30px;
  height: var(--h);
  border-radius: 4px 4px 0 0;
  background: color-mix(in srgb, var(--brass) 42%, var(--panel-2));
  transform-origin: 50% 100%;
  transition: background 0.2s;
}
.bar-col i:hover { background: var(--brass-2); }
.bar-col .bar-hot { background: var(--brass); }
.bar-col span { font-size: 0.6rem; color: var(--dim); font-family: var(--font-mono); }
.dash[data-panel="orders"] .bar-col i { animation: growY 0.9s var(--ease) both; }
.dash[data-panel="orders"] .bar-col:nth-child(2) i { animation-delay: 0.06s; }
.dash[data-panel="orders"] .bar-col:nth-child(3) i { animation-delay: 0.12s; }
.dash[data-panel="orders"] .bar-col:nth-child(4) i { animation-delay: 0.18s; }
.dash[data-panel="orders"] .bar-col:nth-child(5) i { animation-delay: 0.24s; }
.dash[data-panel="orders"] .bar-col:nth-child(6) i { animation-delay: 0.3s; }
.dash[data-panel="orders"] .bar-col:nth-child(7) i { animation-delay: 0.36s; }
@keyframes growY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.order-rows { display: flex; flex-direction: column; gap: 0.45rem; min-height: 150px; }
.order-row {
  display: flex; align-items: center; gap: 0.6rem;
  background: rgba(18, 23, 36, 0.8);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  font-size: 0.72rem;
  animation: rowIn 0.5s var(--ease) both;
}
@keyframes rowIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.order-row b { font-weight: 500; color: var(--sand); font-family: var(--font-mono); }
.order-row .o-place { color: var(--dim); }
.order-row .o-amt { margin-inline-start: auto; color: var(--brass-2); font-weight: 500; font-family: var(--font-mono); white-space: nowrap; }
.order-row .o-place { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-pill { font-size: 0.58rem; font-weight: 600; border-radius: 999px; padding: 0.12rem 0.55rem; }
.o-pill.p-new { background: rgba(200, 169, 110, 0.15); color: var(--brass-2); }
.o-pill.p-conf { background: rgba(76, 175, 125, 0.15); color: var(--good); }
.o-pill.p-ship { background: rgba(114, 134, 255, 0.15); color: #9daaff; }

/* delivery */
.p-delivery { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0.9rem; align-content: start; }
.rate-head, .rate-row {
  display: grid;
  grid-template-columns: 1.3fr 0.75fr 0.85fr 0.85fr;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.2rem;
  font-size: 0.72rem;
}
.rate-head { color: var(--dim); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; padding-bottom: 0.3rem; }
[dir="rtl"] .rate-head { text-transform: none; letter-spacing: 0; }
.rate-row { border-top: 1px solid var(--line-soft); color: var(--sand); }
.rate-row .mono { opacity: 0.75; }
.rate-row b { font-family: var(--font-mono); font-weight: 500; color: var(--dim); }
.rate-row em { font-style: normal; font-size: 0.62rem; color: var(--warn); }
.rate-row em.ok { color: var(--good); }
.dash[data-panel="delivery"] .rate-row { animation: rowIn 0.5s var(--ease) both; }
.dash[data-panel="delivery"] .rate-row:nth-of-type(2) { animation-delay: 0.07s; }
.dash[data-panel="delivery"] .rate-row:nth-of-type(3) { animation-delay: 0.14s; }
.dash[data-panel="delivery"] .rate-row:nth-of-type(4) { animation-delay: 0.21s; }
.ship-label {
  background: #faf7f2;
  color: #1c1a17;
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.75rem;
}
.ship-label .mono { opacity: 0.9; margin-bottom: 0.35rem; }
.ship-label b { display: block; font-family: var(--font-mono); font-size: 0.9rem; }
.ship-label p { font-size: 0.64rem; color: #6d675c; margin-bottom: 0.45rem; }
.ship-btn {
  display: block;
  text-align: center;
  border-radius: 999px;
  padding: 0.5rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: #241c09;
  background: linear-gradient(135deg, var(--brass-2), var(--brass));
}

/* finance */
.cycle { height: 6px; border-radius: 999px; background: rgba(236, 231, 219, 0.1); overflow: hidden; margin-bottom: 1rem; }
.cycle i { display: block; width: 73%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brass-deep), var(--brass-2)); transform-origin: 0 50%; }
[dir="rtl"] .cycle i { transform-origin: 100% 50%; }
.dash[data-panel="finance"] .cycle i { animation: fillBar 0.9s var(--ease) both; }
.flow { display: flex; flex-direction: column; gap: 0.55rem; }
.flow-row { display: grid; grid-template-columns: 92px 1fr 92px; align-items: center; gap: 0.7rem; font-size: 0.74rem; color: var(--dim); }
.flow-row b { font-family: var(--font-mono); font-weight: 500; text-align: end; color: var(--sand); direction: ltr; unicode-bidi: isolate; }
.fb { display: block; height: 10px; width: var(--w); border-radius: 999px; background: color-mix(in srgb, var(--brass) 55%, transparent); transform: scaleX(0); transform-origin: 0 50%; }
[dir="rtl"] .fb { transform-origin: 100% 50%; }
.flow-row.minus .fb { background: rgba(236, 231, 219, 0.16); }
.flow-row.minus b { color: var(--dim); }
.flow-row.net .fb { background: linear-gradient(90deg, var(--brass-2), var(--brass)); box-shadow: 0 0 18px rgba(200, 169, 110, 0.3); }
.flow-row.net b { color: var(--brass-2); }
.dash[data-panel="finance"] .fb { animation: fillBar 0.6s var(--ease) both; }
.dash[data-panel="finance"] .flow-row:nth-child(2) .fb { animation-delay: 0.12s; }
.dash[data-panel="finance"] .flow-row:nth-child(3) .fb { animation-delay: 0.24s; }
.dash[data-panel="finance"] .flow-row:nth-child(4) .fb { animation-delay: 0.36s; }
.dash[data-panel="finance"] .flow-row:nth-child(5) .fb { animation-delay: 0.52s; }
.exports { display: flex; align-items: center; gap: 0.4rem; margin-top: 1rem; }
.exports i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--brass-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
}
.exports em { font-style: normal; font-size: 0.66rem; color: var(--dim); margin-inline-start: auto; }

/* themes */
.skins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 0.9rem; }
.skin { position: relative; display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-soft); transition: border-color 0.3s, transform 0.3s var(--ease); }
.skin img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.skin::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(transparent, rgba(9, 11, 16, 0.75));
  pointer-events: none;
}
.skin em {
  position: absolute;
  z-index: 1;
  inset-inline-start: 0.5rem; bottom: 0.35rem;
  font-style: normal;
  font-size: 0.66rem;
  font-family: 'Marcellus', serif;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
.skin.on { border-color: var(--brass); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); }
.dash[data-panel="themes"] .skin { animation: popIn 0.45s var(--ease) both; }
.dash[data-panel="themes"] .skin:nth-child(2) { animation-delay: 0.06s; }
.dash[data-panel="themes"] .skin:nth-child(3) { animation-delay: 0.12s; }
.dash[data-panel="themes"] .skin:nth-child(4) { animation-delay: 0.18s; }
.dash[data-panel="themes"] .skin:nth-child(5) { animation-delay: 0.24s; }
.dash[data-panel="themes"] .skin:nth-child(6) { animation-delay: 0.3s; }

/* ---------- comparison ---------- */
/* On a phone a five-column table is unreadable, so the visitor picks the one
   competitor they care about and the table narrows to a straight duel. */
.vs-pick { display: none; gap: 0.4rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.vs {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--dim);
  background: none;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.vs.on { color: var(--brass-2); border-color: var(--brass); background: rgba(200, 169, 110, 0.1); }


.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background: rgba(18, 23, 36, 0.8);
  backdrop-filter: blur(8px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}
.cmp { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 0.9rem; }
.cmp th, .cmp td { padding: 0.9rem 1rem; text-align: start; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.cmp thead th { font-family: 'Marcellus', serif; font-size: 1rem; letter-spacing: 0.04em; color: var(--dim); font-weight: 400; }
.cmp tbody tr { transition: background 0.2s; }
.cmp tbody tr:hover { background: rgba(236, 231, 219, 0.03); }
.cmp tbody tr:last-child td { border-bottom: none; }
.cmp td { color: var(--sand); }
.cmp td:first-child { color: var(--dim); font-weight: 500; max-width: 230px; }
.cmp-masdar { background: rgba(200, 169, 110, 0.07); border-inline: 1px solid rgba(200, 169, 110, 0.28); color: var(--sand); }
th.cmp-masdar { color: var(--brass-2) !important; font-weight: 600; }
.cmp-logo { width: 22px; vertical-align: -5px; margin-inline-end: 6px; }
.yes { color: var(--good); font-size: 1.05rem; font-weight: 700; }
.no { color: #9b5b5b; font-size: 1rem; }
.mid { color: var(--warn); font-size: 0.82rem; }
.cmp-note { margin-top: 1rem; font-size: 0.78rem; color: var(--dim); max-width: 52rem; }

.calc {
  margin-top: 2.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: linear-gradient(165deg, rgba(26, 33, 51, 0.85), rgba(11, 14, 20, 0.85));
  backdrop-filter: blur(8px);
  padding: clamp(1.4rem, 3.5vw, 2.4rem);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}
.calc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.calc-head h3 { font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: var(--sand); }
.calc-months { color: var(--dim); font-size: 0.92rem; white-space: nowrap; }
.calc-months b { font-family: var(--font-mono); font-size: 1.3rem; color: var(--brass-2); direction: ltr; unicode-bidi: isolate; }
#calcRange {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brass) var(--fill, 27%), rgba(236, 231, 219, 0.12) var(--fill, 27%));
  outline-offset: 6px;
  cursor: pointer;
  margin-bottom: 1.6rem;
  direction: ltr;
}
#calcRange::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brass-2), var(--brass));
  border: 2px solid #241c09;
  box-shadow: 0 4px 16px rgba(200, 169, 110, 0.5);
  transition: transform 0.15s;
}
#calcRange::-webkit-slider-thumb:hover { transform: scale(1.15); }
#calcRange::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brass-2), var(--brass));
  border: 2px solid #241c09;
  box-shadow: 0 4px 16px rgba(200, 169, 110, 0.5);
}
.calc-rows { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.4rem; }
.calc-row { display: grid; grid-template-columns: 90px 1fr 110px; align-items: center; gap: 0.9rem; }
.calc-name { font-size: 0.88rem; color: var(--dim); font-weight: 500; }
.calc-row-masdar .calc-name { color: var(--brass-2); font-weight: 600; }
.calc-bar { display: block; height: 10px; border-radius: 999px; direction: ltr; border-bottom: 1px solid rgba(236, 231, 219, 0.14); }
[dir="rtl"] .calc-bar { direction: rtl; }
.calc-bar b {
  display: block;
  height: 100%;
  width: 50%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(107, 114, 134, 0.9), #98a0b3);
  transition: width 0.5s var(--ease);
}
.calc-row-masdar .calc-bar b { background: linear-gradient(90deg, var(--brass-2), var(--brass)); box-shadow: 0 0 18px rgba(200, 169, 110, 0.4); }
.calc-amt { font-size: 0.9rem; color: var(--sand); font-weight: 500; text-align: end; font-family: var(--font-mono); white-space: nowrap; }
.calc-row-masdar .calc-amt { color: var(--brass-2); }
.calc-save { text-align: center; color: var(--dim); font-size: 0.95rem; }
.calc-save b { font-family: var(--font-mono); font-size: 1.35rem; color: var(--good); margin-inline: 0.4rem; direction: ltr; unicode-bidi: isolate; }

/* ============================================================
   THE THREE NUMBERS
   A pinned pause between the comparison table and the price. Three
   statements, one at a time, each one a single huge numeral orbited by a
   slow ring, with the competitor's figure printed underneath so the
   number is an argument and not a decoration.
   ============================================================ */
.creed { position: relative; height: 300vh; }
.creed-stage {
  position: sticky;
  top: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--pad);
  overflow: hidden;
}
.line {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 4vw, 3.4rem);
  max-width: 62rem;
  opacity: 0;
  transform: scale(0.94) translateY(20px);
  filter: blur(7px);
  transition: opacity 0.7s ease, transform 0.9s var(--ease), filter 0.7s ease;
}
.creed-stage[data-line="1"] .l1,
.creed-stage[data-line="2"] .l2,
.creed-stage[data-line="3"] .l3 { opacity: 1; transform: none; filter: none; }

/* named .glyph, not .fig: the proof strip already owns .fig and its divider */
.glyph {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  font-size: clamp(6.5rem, 19vw, 15rem);
  width: 1.5em;
  height: 1.5em;
}
.glyph em {
  position: relative;
  font-style: normal;
  font-family: 'Marcellus', serif;
  font-size: 1em;
  line-height: 0.82;
  color: transparent;
  background: linear-gradient(150deg, var(--brass-2) 8%, var(--brass) 44%, var(--brass-deep) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 20px 55px rgba(200, 169, 110, 0.3));
}
.glyph em u { text-decoration: none; font-size: 0.44em; }
/* two rings: one turning slowly, one holding still, both hairlines */
.ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: conic-gradient(from 0deg, transparent 0 54%, rgba(200, 169, 110, 0.75) 74%, transparent 88%);
  /* closest-side + a closing stop, otherwise the mask leaks into the corners
     of the square and the ring shows up as a wedge with a straight edge */
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 93%, #000 94% 100%, transparent 100%);
  mask: radial-gradient(circle closest-side, transparent 0 93%, #000 94% 100%, transparent 100%);
  animation: orbit 16s linear infinite;
}
.ring-2 {
  inset: 8%;
  background: none;
  border: 1px solid rgba(200, 169, 110, 0.16);
  -webkit-mask: none;
  mask: none;
  animation: none;
}
@keyframes orbit { to { transform: rotate(360deg); } }

.say { display: flex; flex-direction: column; gap: 0.7rem; }
.say b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.8vw, 2.2rem);
  line-height: 1.3;
  color: var(--sand);
  max-width: 14em;
}
.say i {
  font-style: normal;
  font-size: clamp(0.82rem, 1.2vw, 0.95rem);
  color: var(--dim);
  padding-inline-start: 0.9rem;
  border-inline-start: 2px solid rgba(200, 169, 110, 0.35);
  max-width: 26em;
}

.creed-rail { position: absolute; inset-inline-start: var(--pad); bottom: 12%; display: flex; gap: 6px; }
.creed-rail i { width: 34px; height: 3px; border-radius: 999px; background: rgba(236, 231, 219, 0.14); transition: background 0.4s; }
.creed-stage[data-line="1"] .creed-rail i:nth-child(1),
.creed-stage[data-line="2"] .creed-rail i:nth-child(2),
.creed-stage[data-line="3"] .creed-rail i:nth-child(3) { background: var(--brass); }

/* the stage is pinned for 200vh of the 300vh section, so the viewport centre
   only ever sweeps 16.6% to 83.2%: the three bands share exactly that */
.creed-mark { position: absolute; inset-inline: 0; height: 22.2%; pointer-events: none; }
.creed-mark:nth-of-type(1) { top: 16.6%; }
.creed-mark:nth-of-type(2) { top: 38.8%; }
.creed-mark:nth-of-type(3) { top: 61%; }

/* ---------- the road from the form to the first order ---------- */
.road { list-style: none; margin-top: 2rem; display: flex; flex-direction: column; }
.road li {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 1rem;
  padding: 0 0 1.6rem 0;
}
.road li::before {
  content: '';
  position: absolute;
  inset-inline-start: 16px;
  top: 34px; bottom: 0;
  width: 1px;
  background: linear-gradient(var(--brass), rgba(200, 169, 110, 0.08));
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 0.7s var(--ease) 0.15s;
}
[dir="rtl"] .road li::before { inset-inline-start: auto; inset-inline-end: 16px; }
.road li:last-child { padding-bottom: 0; }
.road li:last-child::before { display: none; }
.order-copy.in .road li::before { transform: scaleY(1); }
.road b {
  grid-row: span 2;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--brass);
  color: var(--brass-2);
  font-family: 'Marcellus', serif;
  background: rgba(11, 14, 20, 0.9);
  z-index: 1;
  transform: scale(0.6);
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.5s ease;
}
.order-copy.in .road b { transform: none; opacity: 1; }
.order-copy.in .road li:nth-child(2) b { transition-delay: 0.12s; }
.order-copy.in .road li:nth-child(3) b { transition-delay: 0.24s; }
.order-copy.in .road li:nth-child(4) b { transition-delay: 0.36s; }
.road span { align-self: center; font-weight: 600; color: var(--sand); font-size: 0.98rem; }
.road em { grid-column: 2; font-style: normal; color: var(--dim); font-size: 0.86rem; margin-top: 0.15rem; }

/* ---------- pricing ---------- */
.section-pricing { display: flex; justify-content: center; }
.price-card {
  position: relative;
  isolation: isolate;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(170deg, rgba(26, 33, 51, 0.9), rgba(11, 14, 20, 0.92) 80%);
  backdrop-filter: blur(10px);
  padding: clamp(2rem, 5vw, 3.4rem) clamp(1.5rem, 5vw, 3.6rem);
  max-width: 560px;
  width: 100%;
  box-shadow:
    0 50px 120px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(230, 205, 150, 0.28);
  overflow: hidden;
}
.price-card::after {
  content: '';
  position: absolute;
  inset: -60% -20% auto;
  height: 60%;
  background: linear-gradient(100deg, transparent 40%, rgba(230, 205, 150, 0.14) 50%, transparent 60%);
  animation: vaultSweep 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes vaultSweep {
  0%, 70% { transform: translateY(0); opacity: 0; }
  80% { opacity: 1; }
  100% { transform: translateY(320%); opacity: 0; }
}
.price-emblem { width: 74px; margin-bottom: 1rem; filter: drop-shadow(0 6px 18px rgba(200, 169, 110, 0.35)); }
.price-big { font-family: 'Marcellus', serif; font-size: clamp(3.2rem, 8vw, 4.8rem); color: var(--brass-2); line-height: 1; }
.price-big small { font-size: 0.35em; color: var(--brass); }
.price-once { color: var(--dim); margin: 0.5rem 0 1.8rem; }
.price-list { list-style: none; text-align: start; margin: 0 auto 1.9rem; max-width: 400px; display: flex; flex-direction: column; gap: 0.6rem; }
.price-list li { padding-inline-start: 1.7rem; position: relative; color: var(--sand); font-size: 0.93rem; }
.price-list li::before { content: '✔'; position: absolute; inset-inline-start: 0; color: var(--brass); font-weight: 700; }
.price-compare { margin-top: 1.1rem; font-size: 0.85rem; color: var(--dim); }

/* ---------- order form ---------- */
.order-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.order-copy p { color: var(--dim); margin-top: 1rem; max-width: 30rem; }
.order-steps { list-style: none; margin-top: 1.8rem; display: flex; flex-direction: column; gap: 1rem; counter-reset: s; }
.order-steps li { display: flex; align-items: center; gap: 0.9rem; }
.order-steps b {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--brass);
  color: var(--brass-2);
  font-family: 'Marcellus', serif;
}
.order-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  background: rgba(11, 14, 20, 0.75);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(1.3rem, 3vw, 2rem);
}
.order-form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.86rem; color: var(--sand); }
.order-form label[hidden] { display: none; }
.order-form .order-full, .order-form .order-submit, .form-note, .form-status { grid-column: 1 / -1; }
.order-form input, .order-form select, .order-form textarea {
  background: rgba(18, 23, 36, 0.9);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-field);
  color: var(--sand);
  padding: 0.75rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}
.order-form ::placeholder { color: #7d879b; }
.order-form input:focus, .order-form select:focus, .order-form textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.14);
}
.order-form input:user-invalid { border-color: #d2705f; }
.order-form textarea { resize: vertical; }
.order-submit { cursor: pointer; border: none; }
.order-submit:disabled { opacity: 0.6; cursor: wait; }
.form-note { text-align: center; font-size: 0.8rem; color: var(--dim); margin-top: -0.2rem; }
.form-status { text-align: center; font-size: 0.9rem; min-height: 1.4em; }
.form-status.ok { color: var(--good); }
.form-status.err { color: #e79184; }

/* ---------- FAQ ---------- */
.section-faq { padding-top: 0; }
.section-faq .section-head { margin-bottom: 1.6rem; }
.faq { max-width: 46rem; display: flex; flex-direction: column; gap: 0.7rem; }
.faq details {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-field);
  background: rgba(18, 23, 36, 0.7);
  backdrop-filter: blur(6px);
  overflow: hidden;
  transition: border-color 0.25s;
}
.faq details[open] { border-color: var(--line); }
.faq summary {
  cursor: pointer;
  padding: 1rem 1.2rem;
  font-weight: 600;
  color: var(--sand);
  list-style: none;
  position: relative;
  padding-inline-end: 3rem;
  transition: color 0.2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; inset-inline-end: 1.2rem; top: 0.85rem; color: var(--brass); font-size: 1.3rem; transition: transform 0.25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] summary { color: var(--brass-2); }
.faq details p { padding: 0 1.2rem 1.1rem; color: var(--dim); font-size: 0.92rem; }

/* ---------- final CTA ---------- */
.cta-band {
  position: relative;
  text-align: center;
  padding: clamp(4rem, 9vw, 7rem) var(--pad);
}
.cta-band img { width: 84px; margin-bottom: 1.2rem; filter: drop-shadow(0 8px 24px rgba(200, 169, 110, 0.4)); }
.cta-band h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin-bottom: 0.9rem; }
.cta-band p { color: var(--dim); max-width: 34rem; margin: 0 auto 2rem; }
.cta-band .btn-lg { min-width: 250px; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line-soft); background: rgba(9, 11, 16, 0.85); backdrop-filter: blur(10px); }
.footer-inner { padding: 2.5rem var(--pad); display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 0.9rem; }
.footer-brand img { width: 46px; }
.footer-brand b { font-family: 'Marcellus', 'Noto Kufi Arabic', serif; color: var(--brass-2); letter-spacing: 0.05em; }
.footer-brand p { color: var(--dim); font-size: 0.85rem; }
.footer-nav { display: flex; gap: 1.3rem; margin-inline-start: auto; }
.footer-nav a { color: var(--dim); font-size: 0.88rem; }
.footer-nav a:hover { color: var(--brass-2); }
.footer-copy { color: var(--dim); font-size: 0.8rem; width: 100%; font-family: var(--font-mono); }

/* ---------- sticky mobile CTA ---------- */
.sticky-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.1rem calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(11, 14, 20, 0.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 0.35s var(--ease);
}
.sticky-cta.show { transform: none; }
.sticky-price { font-family: var(--font-mono); font-size: 1.05rem; color: var(--brass-2); }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: var(--rd, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .cell-hero, .cell-wide { grid-column: span 2; }
  .cell-hero { grid-row: auto; }
}
@media (max-width: 1020px) {
  .topnav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0.5rem var(--pad) 1rem;
    background: rgba(11, 14, 20, 0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line-soft);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
  }
  .topbar.nav-open .topnav { display: flex; }
  .topnav a { padding: 0.8rem 0; font-size: 1rem; border-bottom: 1px solid var(--line-soft); }
  .topnav a:last-child { border-bottom: none; }
  .nav-burger { display: flex; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: clamp(1.5rem, 4vw, 3rem); }
  .stage { order: 2; margin-top: 1.6rem; }
  .tour { height: 360vh; }
  .tour-stage { grid-template-columns: 1fr; align-content: center; gap: 1.4rem; padding-block: clamp(3rem, 8vh, 5rem); }
  .tour-copy h2 { margin-bottom: 1rem; }
  .ts { display: none; }
  .ts.on { display: block; }
  .dash { grid-template-columns: 1fr; }
  .dash-side { flex-direction: row; overflow-x: auto; align-items: center; border-inline-end: none; border-bottom: 1px solid var(--line-soft); }
  .dash-brand { margin-bottom: 0; }
  .dash-item { white-space: nowrap; }
  .dash-cols { grid-template-columns: 1fr; }
  .p-delivery { grid-template-columns: 1fr; }
  .dash-main { min-height: 500px; }
  .order-grid { grid-template-columns: 1fr; }
  .calc-row { grid-template-columns: 72px 1fr 96px; gap: 0.6rem; }
  .calc-amt { font-size: 0.8rem; }
}
@media (max-width: 640px) {
  .topbar-actions .btn { display: none; }
  .bento { grid-template-columns: 1fr; }
  .cell-hero, .cell-wide { grid-column: auto; }
  .rings i:nth-child(1) { width: min(360px, 88vw); height: 580px; }
  .rings i:nth-child(2) { width: min(430px, 96vw); height: 650px; }
  .rings i:nth-child(3) { display: none; }
  .figures { grid-template-columns: repeat(2, 1fr); }
  .fig:nth-child(2) { border-inline-end: none; }
  .fig:nth-child(1), .fig:nth-child(2) { border-bottom: 1px solid var(--line-soft); }
  .dash-tiles { grid-template-columns: repeat(2, 1fr); }
  .skins { grid-template-columns: repeat(2, 1fr); }
  .flow-row { grid-template-columns: 74px 1fr 82px; gap: 0.5rem; font-size: 0.68rem; }
  .rate-head, .rate-row { grid-template-columns: 1.3fr 0.8fr 0.8fr; }
  .rate-head span:last-child, .rate-row em { display: none; }
  .order-form { grid-template-columns: 1fr; }
  .brand-ar { display: none; }
  .sticky-cta { display: flex; }
}

/* ============================================================
   NARROW SCREENS
   The two heaviest sections are rebuilt rather than shrunk: the comparison
   becomes a one-on-one duel, and the pinned tour is trimmed until it fits
   in a single phone screen without ever being cut off.
   ============================================================ */
@media (max-width: 900px) {
  .vs-pick { display: flex; }
  .cmp { min-width: 0; font-size: 0.86rem; }
  .cmp th, .cmp td { padding: 0.75rem 0.7rem; }
  .cmp td:first-child { max-width: none; }
  .table-scroll[data-vs="shopify"] .cmp tr > *:nth-child(4),
  .table-scroll[data-vs="shopify"] .cmp tr > *:nth-child(5),
  .table-scroll[data-vs="youcan"] .cmp tr > *:nth-child(3),
  .table-scroll[data-vs="youcan"] .cmp tr > *:nth-child(5),
  .table-scroll[data-vs="woo"] .cmp tr > *:nth-child(3),
  .table-scroll[data-vs="woo"] .cmp tr > *:nth-child(4) { display: none; }
}

@media (max-width: 1020px) {
  /* the tour has to fit one screen, so the copy shrinks with it */
  .tour-stage { padding-block: 5.5rem 3.5rem; align-content: center; }
  .tour-copy h2 { font-size: clamp(1.35rem, 5.6vw, 2rem); margin-bottom: 0.7rem; }
  .ts { padding: 0.5rem 0 0.5rem 0.9rem; }
  [dir="rtl"] .ts { padding: 0.5rem 0.9rem 0.5rem 0; }
  .ts b { font-size: 0.95rem; margin-bottom: 0.15rem; }
  .ts span { font-size: 0.84rem; }
  .dash-main { min-height: clamp(300px, 46dvh, 430px); padding: 0.85rem; }
  .panel { inset: 0.85rem; }
  .dash-side { padding: 0.6rem; gap: 0.2rem; }
  .dash-item { font-size: 0.76rem; padding: 0.38rem 0.55rem; gap: 0.4rem; }
  .tour-rail { bottom: 4%; }
}

@media (max-width: 640px) {
  /* only the four stops of the tour stay in the sidebar */
  .dash-brand { display: none; }
  .dash-item:not([data-item]) { display: none; }
  .dash-main { min-height: clamp(280px, 43dvh, 380px); }
  .dash-side { padding: 0.5rem 0.4rem; }
  .dash-item { font-size: 0.72rem; padding: 0.35rem 0.45rem; }
  .dash-item .ic { width: 14px; height: 14px; }
  .dash-tiles { gap: 0.5rem; margin-bottom: 0.7rem; }
  .tile { padding: 0.55rem 0.65rem; }
  .tile b { font-size: 0.95rem; }
  /* the seven-day chart is the first thing to go: the live feed says more */
  .p-orders .dash-cols > .dash-box:first-child { display: none; }
  .p-orders .dash-cols { grid-template-columns: 1fr; }
  .order-rows { min-height: 0; }
  /* same idea for the parcel card: the rate table is the argument */
  .ship-side { display: none; }
  .rate-head, .rate-row { padding: 0.42rem 0.1rem; font-size: 0.68rem; }
  .flow-row { grid-template-columns: 66px 1fr 74px; gap: 0.45rem; font-size: 0.66rem; }
  .exports em { display: none; }
  .skins { grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
  .skin em { font-size: 0.58rem; }
  .ship-btn { font-size: 0.7rem; }

  /* the savings rows stop fighting for width */
  .calc-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name amount" "bar bar";
    row-gap: 0.4rem;
  }
  .calc-name { grid-area: name; }
  .calc-amt { grid-area: amount; font-size: 0.85rem; }
  .calc-bar { grid-area: bar; }

  /* the three numbers stack: the figure on top, the sentence under it */
  .line { flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
  .glyph { font-size: clamp(5rem, 32vw, 9rem); }
  .say { align-items: center; }
  .say b { max-width: 15rem; }
  .say i { border-inline-start: none; padding-inline-start: 0; max-width: 20rem; }
  .say i::before { content: ''; display: block; width: 26px; height: 1px; background: rgba(200, 169, 110, 0.4); margin: 0 auto 0.5rem; }
  .creed-rail { inset-inline-start: 50%; transform: translateX(-50%); bottom: 8%; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fone, .marquee-track, .live-dot, .floor, .rings i, .hero-title em,
  .wall .mono, .ai-spark, .art-skins img, .price-card::after, .ring,
  .cell.play *, .cell:hover::after, .scan,
  .stage[data-scene="home"] .v-home .v-scroll { animation: none !important; }
  .scan { display: none; }
  .cell-art::before { opacity: 0.3 !important; }
  /* the tiles must still show their finished state, not their first frame */
  .cod-row u, .ai-type i, .art-money i { transform: none !important; }
  .cod-fee, .conf-row em, .conf-fee, .ping, .blocked { opacity: 1 !important; transform: none !important; }
  .label { transform: none !important; }
  .gauge i { transform: rotate(56deg) !important; }
  .art-skins img:first-child { opacity: 1 !important; }
  .rise { animation: none; opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .plate, .floor { transition: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ═══════════ Pointer-reactive depth, desktop only, motion-safe ═══════════
   A cursor-following warm spotlight in the hero, 3D tilt on bento cells and
   a magnetic primary CTA. All initialised in app.js only when
   (hover:hover)+(pointer:fine) and NOT prefers-reduced-motion. */
.hero-spot {
  position: absolute;
  inset: -20% -10%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 30%),
      rgba(200, 169, 110, 0.16), rgba(76, 175, 125, 0.05) 42%, transparent 64%);
}
.hero.spot-on .hero-spot { opacity: 1; }
/* the tilt owns `transform`, so it has to hand `opacity` back to .reveal,
   otherwise tilted cards would pop in instead of fading in */
.tilting {
  transition: transform 0.18s ease-out, opacity 0.8s var(--ease);
  will-change: transform;
  transform-style: preserve-3d;
}
[data-magnetic] { will-change: transform; }