/* ══════════════════════════════════════════════════════════════════════════
   /features — composition layer over the product design system  (2026-10-05)

   Loaded ONLY on /features, AFTER the dashboard's tokens.css + ds-foundation.css.
   This file defines NO colour, radius, shadow or type token of its own — every
   value is a «المُذهَّب» token (see FEATURES_DESIGN_SYSTEM_AUDIT.md). It only
   arranges real kit components into a marketing page:
     • layout (sections, splits, grids) and display-size headings;
     • the 3D scene and the story sequences' visual states.

   Kit rules kept: 1px --ds-border, --radius-lg cards, NO box-shadow, NO
   backdrop-filter, depth from border + tint. Owner (2026-10-05):
     • no own page background and no section divider lines — the site's
       ambient pattern shows through;
     • system colours, via the kit's own `--tone` / `--tone-soft` pattern
       (brand / success / warning / gold) on icon tiles, sparklines, charts,
       selections and status — the journey step cards stay NEUTRAL;
     • a page that moves: live numbers, incoming orders, a scrolling store,
       a provider strip, floating layers. Everything pauses off-screen and
       stops under reduced motion.
   ══════════════════════════════════════════════════════════════════════════ */

/* no own background (owner 2026-10-05): the site's ambient pattern shows through */
.fx{ font-family:var(--font-sans); color:var(--foreground); }
.fx .num{ font-family:var(--font-latin); font-variant-numeric:tabular-nums; }
.fx-sec{ padding-block:clamp(48px,7vw,104px); }
.fx-wrap{ width:min(1180px, 100% - 32px); margin-inline:auto; }
.fx-narrow{ width:min(820px, 100% - 32px); }
.fx-split{ display:grid; gap:clamp(28px,4vw,64px); align-items:center; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.fx-copy{ min-width:0; }
@media (max-width:960px){ .fx-split{ grid-template-columns:minmax(0,1fr); } .fx-split--rev > .fx-copy{ order:-1; } }

/* ── type: the kit's faces at marketing sizes ─────────────────────────── */
.fx-display{ font-family:var(--font-display); font-size:clamp(28px,4.14vw,49.5px); font-weight:700; line-height:1.2; margin:16px 0 0; letter-spacing:0; }
.fx-display--sm{ font-size:clamp(23px,3.15vw,38px); margin:0; }
.fx-h2{ font-family:var(--font-display); font-size:clamp(21.5px,2.48vw,31.5px); font-weight:700; line-height:1.3; margin:0; }
.fx-h3{ font-family:var(--font-display); font-size:var(--text-xl); font-weight:700; margin:var(--sp-4) 0 0; }
.fx-lead{ font-size:clamp(14.5px,1.12vw,15.5px); line-height:1.85; color:var(--muted-foreground); margin:var(--sp-5) 0 0; max-width:38rem; }
.fx-sub{ font-size:var(--text-md); line-height:1.85; color:var(--muted-foreground); margin:var(--sp-3) 0 0; }
.fx-head .fx-sub, .fx-center .fx-sub{ margin-inline:auto; }
.fx-note{ font-size:var(--text-sm); color:var(--muted-foreground); margin:var(--sp-4) 0 0; }
.fx-center{ text-align:center; }
.fx-head{ text-align:center; max-width:46rem; margin:0 auto clamp(28px,4vw,48px); }

/* ── kit components, sized for a landing page ─────────────────────────── */
.fx-cta{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-block-start:var(--sp-8); }
.fx-cta--center{ justify-content:center; }
.fx-btn-lg{ height:44px; padding-inline:var(--sp-6); font-size:var(--text-md); text-decoration:none; }
.fx-ico{ width:18px; height:18px; flex:none; }
.fx .ds-badge:not(.fx-st){ background:var(--muted-c); color:var(--foreground); border-color:var(--ds-border); }
.fx-row{ display:flex; align-items:center; gap:var(--sp-3); }
.fx-grow{ flex:1 1 auto; min-width:0; }
/* neutral icon tile — the dashboard KPI's tile, without the brand tint */
.fx-tile{ width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:var(--radius-md);
          background:var(--tone-soft,var(--muted-c)); color:var(--tone,var(--foreground));
          border:1px solid color-mix(in srgb,var(--tone,var(--foreground)) 18%,transparent);
          transition:transform .35s var(--ease-out); }
/* status badges carry meaning, exactly like the Orders screen */
.fx .fx-st--ok  { background:var(--success-soft); color:var(--ds-success); border-color:transparent; }
.fx .fx-st--warn{ background:var(--warning-soft); color:var(--ds-warning); border-color:transparent; }
.fx-spark{ display:block; width:100%; height:40px; margin-block-start:var(--sp-3); }
.fx-spark path{ fill:none; stroke:var(--tone,var(--muted-foreground)); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ── 1 · hero visual — the owner's reference, matched (2026-10-05) ──────
   A dashboard laptop (tilted), its dark sidebar floating in front of the
   laptop's edge, the products phone, and KPI cards, a «new order» toast, a
   chart badge, a gold arrow, a gold cart coin and a 3D box around them.
   Every position and size is a share of the visual's own width (container
   query units), so the composition holds at any width. Logical insets, so
   LTR mirrors RTL. No background circles (owner). */
.fx-hero .fx-wrap.fx-split--hero{ width:min(1400px, 100% - 32px); }
.fx-split--hero{ grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(20px,3vw,48px); }
@media (max-width:960px){ .fx-split--hero{ grid-template-columns:minmax(0,1fr); } }
.fx-hv-wrap{ container-type:inline-size; }
.fx-hv{ position:relative; aspect-ratio:900/690; font-size:1.55cqw; }
.fx-hv__dot{ position:absolute; width:1.1cqw; height:1.1cqw; border-radius:50%; background:var(--gold); }
.fx-hv__dot--1{ inset-block-start:7%; inset-inline-end:27%; } .fx-hv__dot--2{ inset-block-end:5%; inset-inline-end:39%; } .fx-hv__dot--3{ inset-block-start:34%; inset-inline-start:3%; }
.fx-hv__spark{ position:absolute; inset-block-start:41%; inset-inline-end:7%; width:2.6cqw; fill:color-mix(in srgb,var(--muted-foreground) 55%,transparent); }

/* laptop (screen = the main dashboard) */
.fx-hv__laptop{ position:absolute; inset-block-start:19%; inset-inline-end:24%; width:48%; z-index:1;
    transform:perspective(160cqw) rotateY(var(--fx-ry,-18deg)) rotateX(5deg); transform-origin:50% 60%; }
[dir=ltr] .fx-hv__laptop{ --fx-ry:18deg; }
.fx-hv__screen{ aspect-ratio:16/10.6; overflow:hidden; border:1cqw solid #d9dce1; border-block-end-width:1.2cqw; border-radius:1.8cqw 1.8cqw .5cqw .5cqw;
    background:var(--background); padding:1.6cqw 1.6cqw 1.6cqw 1.6cqw; display:grid; gap:1.2cqw; align-content:start; font-size:1.05cqw; }
body.dark-mode .fx-hv__screen{ border-color:#2a2c33; }
.fx-hv__base{ position:relative; height:1.15cqw; margin-inline:-5%; border-radius:.3cqw .3cqw 1.6cqw 1.6cqw;
    background:linear-gradient(180deg,#eceef1 0%,#c3c8cf 55%,#9da3ab 100%); }
.fx-hv__base::before{ content:''; position:absolute; inset-block-start:0; inset-inline:0; margin-inline:auto; width:15%; height:.45cqw;
    border-radius:0 0 .7cqw .7cqw; background:#a9aeb6; }   /* the finger notch */
body.dark-mode .fx-hv__base{ background:linear-gradient(180deg,#4a4d55 0%,#2f3238 55%,#1f2125 100%); }
body.dark-mode .fx-hv__base::before{ background:#1a1c20; }
.fx-hv__top{ display:flex; align-items:center; gap:.8cqw; color:var(--foreground); }
.fx-hv__top b{ flex:1; }
.fx-hv__dots{ display:flex; gap:.4cqw; } .fx-hv__dots i{ width:.7cqw; height:.7cqw; border-radius:50%; background:var(--muted-c); }
.fx-hv__pill{ padding:.2cqw .8cqw; border-radius:99px; border:1px solid var(--ds-border); color:var(--muted-foreground); }
.fx-hv__panel{ padding:1cqw 1.2cqw; border-radius:1cqw; background:var(--card); border:1px solid var(--ds-border); }
.fx-hv__panel-h{ display:flex; justify-content:space-between; color:var(--muted-foreground); }
.fx-hv__up{ color:var(--ds-success); font-weight:700; }
.fx-hv__chart{ display:block; width:100%; height:9cqw; margin-top:.6cqw; }
.fx-hv__area{ fill:color-mix(in srgb,var(--gold) 18%,transparent); }
.fx-hv__line{ fill:none; stroke:var(--gold); stroke-width:2.2; stroke-dasharray:100; animation:fx-draw 6s var(--ease-out) infinite; }
.fx-hv__tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8cqw; }
.fx-hv__tile{ display:flex; align-items:center; gap:.6cqw; padding:.8cqw; border-radius:.9cqw; background:var(--card); border:1px solid var(--ds-border); min-width:0; }
.fx-hv__tile small{ display:block; color:var(--muted-foreground); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fx-hv__tile b{ color:var(--foreground); font-size:1.2cqw; }
.fx-hv__tile-ico{ width:2.6cqw; height:2.6cqw; flex:none; display:grid; place-items:center; border-radius:.7cqw; background:var(--brand-soft); color:var(--brand); }
.fx-hv__tile-ico .fx-ico{ width:1.4cqw; height:1.4cqw; }

/* the dashboard's dark sidebar, floating in front of the laptop's edge */
.fx-hv__side{ position:absolute; z-index:2; inset-block-start:25%; inset-inline-end:19%; width:14.5%; height:46%; padding:1.4cqw 1cqw; border-radius:1.8cqw;
    background:#131418; color:#a1a6ad; display:grid; align-content:start; gap:.7cqw; font-size:1.15cqw;
    transform:perspective(160cqw) rotateY(var(--fx-ry,-18deg)); }
[dir=ltr] .fx-hv__side{ --fx-ry:18deg; }
.fx-hv__brand{ display:flex; align-items:center; gap:.7cqw; color:#f1f2f4; font-weight:700; margin-bottom:.6cqw; }
.fx-hv__logo{ width:2.8cqw; height:2.8cqw; display:grid; place-items:center; border-radius:.8cqw; background:var(--gold); color:var(--em-gold-ink); }
.fx-hv__logo .fx-ico{ width:1.5cqw; height:1.5cqw; }
.fx-hv__nav{ display:flex; align-items:center; gap:.7cqw; padding:.55cqw .7cqw; border-radius:.7cqw; white-space:nowrap; }
.fx-hv__nav .fx-ico{ width:1.3cqw; height:1.3cqw; }
.fx-hv__nav.is-on{ background:color-mix(in srgb,var(--gold) 24%,transparent); color:#edd28f; }

/* phone — light frame, status bar, header, gold «add», real product photos */
.fx-hv__phone{ position:absolute; z-index:3; inset-block-start:37%; inset-inline-start:7%; width:19.5%; padding:.75cqw; border-radius:3.4cqw;
    background:linear-gradient(145deg,#f4f5f7,#c9cdd3); border:1px solid rgba(0,0,0,.12); animation:fx-bob 7s ease-in-out infinite; }
body.dark-mode .fx-hv__phone{ background:linear-gradient(145deg,#3a3d44,#1d1f24); border-color:rgba(255,255,255,.1); }
.fx-hv__pscreen{ position:relative; aspect-ratio:9/17.6; overflow:hidden; border-radius:2.8cqw; background:var(--card); padding:1cqw 1.2cqw 2cqw;
    display:grid; grid-template-columns:minmax(0,1fr); gap:.9cqw; align-content:start; font-size:1.15cqw; }
.fx-hv__status{ display:flex; justify-content:space-between; align-items:center; direction:ltr; font-size:.95cqw; font-weight:700; color:var(--foreground); padding:0 .6cqw; }
.fx-hv__sig{ display:flex; align-items:flex-end; gap:.2cqw; } .fx-hv__sig i{ width:.35cqw; border-radius:1px; background:var(--foreground); }
.fx-hv__sig i:nth-child(1){ height:.5cqw; } .fx-hv__sig i:nth-child(2){ height:.75cqw; } .fx-hv__sig i:nth-child(3){ height:1cqw; }
.fx-hv__ptop{ display:flex; align-items:center; gap:.6cqw; color:var(--foreground); margin-top:.3cqw; }
.fx-hv__ptop b{ flex:1; text-align:center; font-size:1.35cqw; }
.fx-hv__back{ font-size:2cqw; line-height:1; color:var(--muted-foreground); }
[dir=rtl] .fx-hv__back{ transform:scaleX(-1); }
.fx-hv__kebab{ display:grid; gap:.25cqw; } .fx-hv__kebab i{ width:.4cqw; height:.4cqw; border-radius:50%; background:var(--muted-foreground); }
.fx-hv__add{ justify-self:center; padding:.55cqw 1.6cqw; border-radius:99px; background:var(--gold); color:var(--gold-ink); font-weight:700; }
.fx-hv__prow{ display:flex; align-items:center; gap:.9cqw; padding:.7cqw; border-radius:1.2cqw; border:1px solid var(--ds-border); background:var(--card); min-width:0; }
.fx-hv__prow b{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3; color:var(--foreground); font-weight:700; }
.fx-hv__prow .fx-grow{ min-width:0; } .fx-hv__prow small{ display:block; color:var(--muted-foreground); margin-top:.2cqw; }
.fx-hv__thumb{ width:4.6cqw; height:4.6cqw; flex:none; object-fit:cover; border-radius:.9cqw; }
.fx-hv__home{ position:absolute; inset-block-end:.8cqw; inset-inline:0; margin-inline:auto; width:34%; height:.45cqw; border-radius:99px; background:var(--foreground); opacity:.75; }

/* KPI cards */
.fx .fx-hv__kpi{ position:absolute; z-index:4; padding:1.7cqw 1.9cqw; border-radius:2cqw; display:grid; gap:1.1cqw; translate:0 var(--fx-bob); animation:fx-float 7s ease-in-out infinite; }
.fx-hv__kpi .fx-row{ gap:1cqw; }
.fx-hv__kpi .fx-tile{ width:4cqw; height:4cqw; border-radius:1.1cqw; } .fx-hv__kpi .fx-tile .fx-ico{ width:2cqw; height:2cqw; }
.fx-hv__lbl{ font-size:1.55cqw; color:var(--muted-foreground); }
.fx-hv__chip{ white-space:nowrap; direction:ltr; unicode-bidi:isolate; font-size:1.25cqw; font-weight:700; padding:.25cqw .9cqw; border-radius:99px; color:var(--ds-success); background:var(--success-soft); }
.fx-hv__val{ display:flex; align-items:baseline; gap:.6cqw; font-size:3.2cqw; font-weight:700; color:var(--foreground); line-height:1; }
.fx-hv__val small{ font-family:var(--font-sans); font-size:1.5cqw; color:var(--muted-foreground); font-weight:500; }
.fx-hv__coin-dot{ width:1.5cqw; height:1.5cqw; border-radius:50%; border:.35cqw solid var(--gold); align-self:center; }
.fx-hv__bar{ display:block; height:.6cqw; border-radius:99px; background:var(--muted-c); overflow:hidden; }
.fx-hv__bar i{ display:block; height:100%; width:52%; border-radius:inherit; background:var(--brand); transform-origin:var(--fx-o,right); animation:fx-fill 5s var(--ease-out) infinite; }
.fx-hv__bar--gold i{ background:var(--gold); }
[dir=ltr] .fx-hv__bar i{ --fx-o:left; }
@keyframes fx-fill{ 0%{ transform:scaleX(0); } 35%,100%{ transform:scaleX(1); } }
.fx-hv__kpi--sales{ inset-block-start:19%; inset-inline-start:13.5%; width:29.5%; animation-delay:-1s; }
.fx-hv__kpi--orders{ inset-block-start:47%; inset-inline-end:9%; width:24.5%; animation-delay:-3s; }
.fx-hv__kpi--customers{ inset-block-start:71%; inset-inline-start:27%; width:25%; animation-delay:-5s; }
.fx-hv__kpi--orders .fx-hv__bar i{ width:48%; } .fx-hv__kpi--customers .fx-hv__bar i{ width:58%; }

/* toast, badge, coin, arrow, box */
.fx .fx-hv__toast{ position:absolute; z-index:5; inset-block-start:73%; inset-inline-end:19%; width:23%; display:flex; align-items:center; gap:1.2cqw; padding:1.6cqw 1.8cqw; border-radius:1.8cqw; }
.fx-hv__toast b{ display:block; font-size:1.75cqw; color:var(--foreground); } .fx-hv__toast small{ display:block; font-size:1.3cqw; color:var(--muted-foreground); white-space:nowrap; }
.fx-hv__toast-ico{ position:relative; width:4.6cqw; height:4.6cqw; flex:none; display:grid; place-items:center; border-radius:1.3cqw; color:var(--gold); }
.fx-hv__toast-ico .fx-ico{ width:3cqw; height:3cqw; }
.fx-hv__toast-ico i{ position:absolute; inset-block-start:.2cqw; inset-inline-start:.2cqw; width:1.1cqw; height:1.1cqw; border-radius:50%; background:var(--ds-success); }
.fx-hv__toast.is-pop{ animation:fx-toast .6s cubic-bezier(.2,.9,.3,1.3); }
@keyframes fx-toast{ from{ opacity:0; transform:translateY(12px) scale(.94); } to{ opacity:1; transform:none; } }
.fx-hv__badge{ position:absolute; z-index:4; inset-block-start:19%; inset-inline-end:9%; width:9.5cqw; height:9.5cqw; display:grid; place-items:center; border-radius:2.4cqw;
    background:#17181b; color:#f1f2f4; transform:rotate(-14deg); animation:fx-bob 6s ease-in-out -2s infinite; }
.fx-hv__badge .fx-ico{ width:4.4cqw; height:4.4cqw; }
.fx-hv__coin{ position:absolute; z-index:4; inset-block-start:28%; inset-inline-start:6.5%; width:3.6cqw; height:3.6cqw; display:grid; place-items:center; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 60%, color-mix(in srgb,var(--gold) 70%,#000)); color:#fff; animation:fx-bob 5s ease-in-out -1s infinite; }
.fx-hv__coin .fx-ico{ width:1.9cqw; height:1.9cqw; }
.fx-hv__arrow{ position:absolute; z-index:5; inset-block-start:11%; inset-inline-start:40%; width:7cqw; height:7cqw; fill:none; stroke:var(--gold); stroke-width:7; stroke-linecap:round; stroke-linejoin:round; }
[dir=rtl] .fx-hv__arrow{ transform:scaleX(-1); }
.fx-hv__arrow path:first-child{ stroke-dasharray:100; animation:fx-draw 4s var(--ease-out) infinite; }
.fx-hv__box{ position:absolute; z-index:5; inset-block-start:70%; inset-inline-end:7%; width:8cqw; height:8cqw; transform-style:preserve-3d;
    transform:rotateX(-22deg) rotateY(-36deg); animation:fx-box 9s ease-in-out infinite; }
.fx-hv__box i{ position:absolute; inset:0; border-radius:.5cqw; }
.fx-hv__box .f1{ background:linear-gradient(160deg,#e9c88a,#c99a52); transform:translateZ(4cqw); }
.fx-hv__box .f2{ background:linear-gradient(160deg,#c99a52,#9c7234); transform:rotateY(90deg) translateZ(4cqw); }
.fx-hv__box .f3{ background:#f0d9a8; transform:rotateX(90deg) translateZ(4cqw); }
.fx-hv__box .f4{ background:#b0823f; transform:rotateY(-90deg) translateZ(4cqw); }
.fx-hv__box .f1::after{ content:''; position:absolute; inset-block:0; inset-inline-start:42%; width:16%; background:#e2c58f; }
@keyframes fx-box{ 50%{ transform:rotateX(-22deg) rotateY(-16deg) translateY(-1cqw); } }

@media (max-width:960px){ .fx-hv-wrap{ margin-top:var(--sp-6); } }

/* ── 2 · journey (neutral active state — no blue) ─────────────────────── */
.fx-steps5{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-4); grid-template-columns:repeat(5,minmax(0,1fr)); }
@media (max-width:1080px){ .fx-steps5{ grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); } }
.fx-step{ border:1px solid var(--ds-border); transition:border-color .3s var(--ease-out), background-color .3s var(--ease-out); }
.fx-step__n{ display:inline-block; font-size:var(--text-sm); font-weight:600; color:var(--muted-foreground); margin-block-end:var(--sp-3); }
.fx-step .ds-card-desc{ margin:var(--sp-2) 0 0; line-height:1.8; }
.fx-step.is-on{ border-color:var(--input); background:var(--accent-c); }
.fx-step.is-on .fx-step__n{ color:var(--foreground); }

/* ── 3 · AI assistant ─────────────────────────────────────────────────── */
.fx-ai{ display:grid; gap:var(--sp-4); }
.fx-ai__head{ display:flex; align-items:center; gap:var(--sp-3); }
.fx-bubble{ padding:var(--sp-4); border-radius:var(--radius-md); background:var(--muted-c); line-height:1.9; font-size:var(--text-md); margin:0; }
.fx-caret{ display:inline-block; width:2px; height:1.05em; vertical-align:-2px; margin-inline-start:2px; background:var(--foreground); animation:fx-blink 1s steps(2) infinite; }
@keyframes fx-blink{ 50%{ opacity:0; } }
.fx-ai__steps{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-2); }
.fx-ai__steps li{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-radius:var(--radius-md);
                  border:1px solid var(--ds-border); color:var(--muted-foreground); transition:color .3s, border-color .3s, background-color .3s; }
.fx-ai__steps li.is-on{ color:var(--foreground); border-color:var(--input); background:var(--accent-c); }
.fx-check{ width:22px; height:22px; flex:none; display:grid; place-items:center; border-radius:50%; border:1px solid var(--input); }
.fx-check .fx-ico{ width:12px; height:12px; opacity:.3; transition:opacity .3s; }
.is-on > .fx-check .fx-ico, .fx-list .fx-check .fx-ico{ opacity:1; }

/* ── 4 · template deck (real previews) ────────────────────────────────── */
.fx-deck{ position:relative; aspect-ratio:16/11; perspective:1400px; margin-block-start:28px; }
.fx .fx-deck__card{ position:absolute; inset:0; margin:0; padding:0; overflow:hidden; border:1px solid var(--ds-border);
                transform-origin:50% 100%; transition:transform .9s var(--ease-out), opacity .9s ease; }
.fx-deck__card img{ display:block; width:100%; height:calc(100% - 34px); object-fit:cover; object-position:top; }
.fx-deck__card figcaption{ position:absolute; inset-block-end:var(--sp-3); inset-inline-start:var(--sp-3); }
.fx-deck__card[data-pos="0"]{ transform:translate3d(0,0,0); opacity:1; z-index:5; }
.fx-deck__card[data-pos="1"]{ transform:translate3d(0,-14px,-70px) scale(.95); opacity:.7; z-index:4; }
.fx-deck__card[data-pos="2"]{ transform:translate3d(0,-26px,-140px) scale(.9); opacity:.4; z-index:3; }
.fx-deck__card[data-pos="3"], .fx-deck__card[data-pos="4"], .fx-deck__card[data-pos="5"]{ transform:translate3d(0,-36px,-200px) scale(.86); opacity:0; z-index:1; }
.fx-deck:not([data-ready]) .fx-deck__card{ opacity:0; }
.fx-deck:not([data-ready]) .fx-deck__p0{ opacity:1; }
.fx-chrome{ display:flex; align-items:center; gap:6px; height:34px; padding-inline:var(--sp-3); border-block-end:1px solid var(--ds-border); background:var(--card); }
.fx-chrome i{ width:9px; height:9px; border-radius:50%; background:var(--muted-c); border:1px solid var(--ds-border); }
.fx-chrome span{ margin-inline-start:var(--sp-2); font-size:11px; color:var(--muted-foreground); }

/* sequenced pills (storefront steps, dashboard sections) */
.fx-pills{ list-style:none; margin:var(--sp-5) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.fx-pills--center{ justify-content:center; margin-block-start:var(--sp-8); }
.fx .fx-pills .ds-badge{ font-size:var(--text-sm); padding:6px 14px; color:var(--muted-foreground); transition:color .3s, background-color .3s, border-color .3s; }
.fx .fx-pills .ds-badge.is-on{ color:var(--foreground); background:var(--accent-c); border-color:var(--input); }

/* ── 5 · KPI row ──────────────────────────────────────────────────────── */
.fx-kpis{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1000px){ .fx-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .fx-kpis{ grid-template-columns:minmax(0,1fr); } }
.fx-kpi{ border:1px solid var(--ds-border); }
.fx-kpi .ds-kpi-value small{ font-size:var(--text-sm); color:var(--muted-foreground); font-weight:500; }
.fx-kpi .cell-sub{ margin-block-start:var(--sp-2); }

/* ── 6 · orders ───────────────────────────────────────────────────────── */
.fx .fx-table{ padding:var(--sp-2) 0; }
.fx-tr{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-5); flex-wrap:wrap; }
.fx-tr + .fx-tr{ border-block-start:1px solid var(--ds-border); }
.fx-flow{ list-style:none; margin:var(--sp-6) 0 0; padding:0; display:grid; gap:var(--sp-2); }
.fx-flow li{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-radius:var(--radius-md);
             border:1px solid var(--ds-border); color:var(--muted-foreground); transition:color .3s, background-color .3s, border-color .3s; }
.fx-flow li .num{ font-size:var(--text-sm); }
.fx-flow li.is-on{ color:var(--foreground); background:var(--accent-c); border-color:var(--input); }

/* ── 7/8 · payments + shipping ────────────────────────────────────────── */
.fx-pair{ display:grid; gap:var(--sp-4); grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
@media (max-width:860px){ .fx-pair{ grid-template-columns:minmax(0,1fr); } }
.fx .fx-panel{ padding:clamp(20px,3vw,32px); }
.fx-opts{ list-style:none; margin:var(--sp-5) 0 0; padding:0; display:grid; gap:var(--sp-2); }
.fx-opts li{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-radius:var(--radius-md);
             border:1px solid var(--ds-border); transition:background-color .3s, border-color .3s; }
.fx-radio{ width:16px; height:16px; flex:none; border-radius:50%; border:1.5px solid var(--input); display:grid; place-items:center; }
.fx-radio::after{ content:''; width:8px; height:8px; border-radius:50%; background:var(--tone,var(--foreground)); transform:scale(0); transition:transform .25s var(--ease-out); }
.fx-opts li.is-on{ background:var(--tone-soft,var(--accent-c)); border-color:color-mix(in srgb,var(--tone,var(--foreground)) 30%,transparent); }
.fx-opts li.is-on .fx-radio{ border-color:var(--tone,var(--input)); }
.fx-opts li.is-on .fx-radio::after{ transform:scale(1); }
.fx-tl{ margin-block-start:var(--sp-5); }
.fx-badges{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-block-start:var(--sp-5); }

/* ── 9 · analytics ────────────────────────────────────────────────────── */
.fx-mini{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-5); margin-block-start:var(--sp-6); }
.fx-chart svg{ display:block; width:100%; height:auto; margin-block-start:var(--sp-4); }
.fx-chart g.fx-grid line{ stroke:var(--ds-border); stroke-width:1; }
.fx-bar{ fill:var(--tone-soft,var(--muted-c)); stroke:color-mix(in srgb,var(--tone,var(--foreground)) 30%,transparent); transform:scaleY(0); transform-box:fill-box; transform-origin:bottom; transition:transform .9s var(--ease-out); }
.fx-line{ fill:none; stroke:var(--tone,var(--foreground)); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
          stroke-dasharray:900; stroke-dashoffset:900; transition:stroke-dashoffset 1.6s var(--ease-out) .25s; }
.fx-chart.is-on .fx-bar{ transform:scaleY(var(--s,1)); }
.fx-chart.is-on .fx-line{ stroke-dashoffset:0; }
.fx-chart .fx-bar:nth-of-type(2){ transition-delay:.05s; } .fx-chart .fx-bar:nth-of-type(3){ transition-delay:.1s; }
.fx-chart .fx-bar:nth-of-type(4){ transition-delay:.15s; } .fx-chart .fx-bar:nth-of-type(5){ transition-delay:.2s; }
.fx-chart .fx-bar:nth-of-type(6){ transition-delay:.25s; } .fx-chart .fx-bar:nth-of-type(7){ transition-delay:.3s; }

/* ── 10 · one store, every screen ──────────────────────────────────────
   Real captures of one template. Each screen is a size container, so the
   scroll distance is `100% of the image − 100cqh of the screen` — exact at
   any width, no JS. */
.fx-devices{ position:relative; padding-block-end:var(--sp-6); padding-inline-end:clamp(60px,12%,110px); }
.fx-laptop{ position:relative; }
.fx-laptop__screen{ border:1px solid var(--input); border-radius:var(--radius-lg) var(--radius-lg) 6px 6px; overflow:hidden; background:var(--card); padding:6px 6px 0; }
.fx-laptop__screen .fx-chrome{ border-radius:10px 10px 0 0; }
.fx-laptop__base{ height:14px; margin-inline:-5%; border:1px solid var(--input); border-block-start:0; border-radius:0 0 14px 14px; background:var(--muted-c); }
.fx-view{ position:relative; overflow:hidden; container-type:size; background:var(--muted-c); }
.fx-laptop .fx-view{ aspect-ratio:16/10; }
.fx-scroll{ display:block; width:100%; height:auto; animation:fx-browse 26s var(--ease-io,ease-in-out) infinite; }
.fx-scroll--m{ animation-duration:21s; animation-delay:-4s; }
@keyframes fx-browse{
    0%, 10%   { transform:translateY(0); }
    45%, 58%  { transform:translateY(calc(-100% + 100cqh)); }
    92%, 100% { transform:translateY(0); }
}
.fx-phone{ position:absolute; inset-inline-end:0; inset-block-end:0; width:clamp(118px,30%,190px); padding:7px; border:1px solid var(--input);
           border-radius:30px; background:var(--card); animation:fx-bob 6s ease-in-out infinite; }
.fx-phone .fx-view{ aspect-ratio:9/19; border-radius:23px; }
.fx-phone__notch{ position:absolute; z-index:2; top:12px; inset-inline-start:50%; translate:-50% 0; width:34%; height:14px; border-radius:99px; background:var(--card); }
[dir=rtl] .fx-phone__notch{ translate:50% 0; }
.fx-devices:hover .fx-scroll{ animation-play-state:paused; }
@keyframes fx-bob{ 50%{ transform:translateY(-10px); } }
.fx-list{ list-style:none; margin:var(--sp-5) 0 0; padding:0; display:grid; gap:var(--sp-3); }
.fx-list li{ display:flex; align-items:center; gap:var(--sp-3); }




/* focus — the kit's ring, never removed */
.fx a:focus-visible, .fx summary:focus-visible{ outline:2px solid var(--ring); outline-offset:3px; }

/* ── reduced motion: the kit sets html.no-motion; everything settles ───── */
html.no-motion .fx-caret{ animation:none; }
html.no-motion .fx-deck__card{ transition:none; }
html.no-motion .fx-bar{ transform:scaleY(1); transition:none; }
html.no-motion .fx-line{ stroke-dashoffset:0; transition:none; }
@media (prefers-reduced-motion: reduce){
    .fx-caret{ animation:none; }
    .fx-bar{ transform:scaleY(1); } .fx-line{ stroke-dashoffset:0; }
}


/* ds-card itself carries no padding (the kit pads via ds-kpi / card body);
   cards used as plain containers here take the kit's 20px card inset. */
.fx .fx-step, .fx .fx-ai, .fx .fx-chart{ padding:var(--sp-5); }

/* ══ colour: the kit's tone pattern (same as ds-alert / ds-notif tiles) ══ */
.fx-tone-brand  { --tone:var(--brand);      --tone-soft:var(--brand-soft); }
.fx-tone-success{ --tone:var(--ds-success); --tone-soft:var(--success-soft); }
.fx-tone-warning{ --tone:var(--ds-warning); --tone-soft:var(--warning-soft); }
.fx-tone-gold   { --tone:var(--gold);       --tone-soft:var(--gold-soft); }
.fx-tl .ds-timeline-item{ transition:color .3s; color:var(--muted-foreground); }
.fx-tl .ds-timeline-item.is-on{ --tl:var(--tone,var(--ds-success)); color:var(--foreground); }
.fx-kpi:hover .fx-tile{ transform:translateY(-3px) rotate(-6deg); }


/* ══ motion ═════════════════════════════════════════════════════════════ */
/* hero layers float independently (registered property so it can animate,
   and so it adds to the scroll drift instead of replacing it) */
@property --fx-bob{ syntax:'<length>'; inherits:false; initial-value:0px; }
@keyframes fx-float{ 50%{ --fx-bob:-12px; } }

/* sparklines draw, hold, fade, redraw */
.fx-spark path{ stroke-dasharray:100; animation:fx-draw 5s var(--ease-out) infinite; }
@keyframes fx-draw{ 0%{ stroke-dashoffset:100; opacity:1; } 40%,88%{ stroke-dashoffset:0; opacity:1; } 100%{ stroke-dashoffset:0; opacity:0; } }

/* a live number just changed */
[data-fx-live]{ display:inline-block; transition:color .5s; }
[data-fx-live].is-tick{ color:var(--tone,var(--foreground)); animation:fx-tick .5s var(--ease-out); }
@keyframes fx-tick{ 0%{ transform:translateY(5px); opacity:.4; } 100%{ transform:none; opacity:1; } }

/* a new order arrives at the top of the table */
.fx-tr.is-new{ animation:fx-row-in .7s var(--ease-out); }
.fx-tr.is-new .cell-main:first-child{ color:var(--brand); transition:color 2s; }
@keyframes fx-row-in{ 0%{ opacity:0; transform:translateY(-10px); background:var(--brand-soft); } 60%{ background:var(--brand-soft); } 100%{ opacity:1; transform:none; background:transparent; } }

/* provider strip */
.fx-mq{ display:flex; align-items:center; gap:var(--sp-4); margin-block-start:clamp(36px,5vw,64px); }
.fx-mq__label{ flex:none; font-size:var(--text-sm); color:var(--muted-foreground); }
.fx-mq__view{ flex:1; min-width:0; display:flex; overflow:hidden;
              mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
              -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.fx-mq__track{ flex:none; display:flex; gap:var(--sp-2); margin:0; padding:0 var(--sp-2) 0 0; list-style:none; animation:fx-mq 30s linear infinite; }
.fx-mq__track .ds-badge{ font-size:var(--text-sm); padding:6px 14px; white-space:nowrap; }
[dir=rtl] .fx-mq__track{ animation-name:fx-mq-rtl; padding:0 0 0 var(--sp-2); }
.fx-mq:hover .fx-mq__track{ animation-play-state:paused; }
@keyframes fx-mq    { to{ transform:translateX(-100%); } }
@keyframes fx-mq-rtl{ to{ transform:translateX(100%); } }

/* nothing animates while its section is off-screen (features.js sets .is-vis) */
html.js .fx-sec:not(.is-vis) :is(.fx-hv__kpi,.fx-hv__phone,.fx-hv__badge,.fx-hv__box,.fx-hv__line,.fx-hv__bar i,.fx-hv__arrow path,.fx-spark path,.fx-scroll,.fx-phone,.fx-mq__track,.fx-caret){ animation-play-state:paused; }

/* reduced motion: everything settles into its final, readable state */
html.no-motion :is(.fx-hv__kpi,.fx-hv__phone,.fx-hv__badge,.fx-hv__box,.fx-hv__line,.fx-hv__bar i,.fx-hv__arrow path,.fx-spark path,.fx-scroll,.fx-phone,.fx-mq__track,[data-fx-live],.fx-tr){ animation:none !important; }
html.no-motion .fx-mq__view{ mask-image:none; -webkit-mask-image:none; }
html.no-motion .fx-mq__track{ flex-wrap:wrap; }
html.no-motion .fx-mq__track[aria-hidden]{ display:none; }
@media (prefers-reduced-motion: reduce){
    :is(.fx-hv__kpi,.fx-hv__phone,.fx-hv__badge,.fx-hv__box,.fx-hv__line,.fx-hv__bar i,.fx-hv__arrow path,.fx-spark path,.fx-scroll,.fx-phone,.fx-mq__track){ animation:none !important; }
    .fx-mq__track[aria-hidden]{ display:none; }
}
@media (max-width:560px){ .fx-mq{ flex-direction:column; align-items:stretch; } .fx-mq__label{ text-align:center; } }

/* ══ hero headline: words rise in turn, the key phrase in the system gold ══ */
.fx-h1 .fx-w{ display:inline-block; }
html.js .fx-h1 .fx-w{ animation:fx-word .9s var(--ease-out) backwards; }
@keyframes fx-word{ from{ opacity:0; transform:translateY(.45em) rotate(2deg); filter:blur(4px); } to{ opacity:1; transform:none; filter:none; } }
.fx-w2{ animation-delay:.08s !important; } .fx-w3{ animation-delay:.16s !important; } .fx-w4{ animation-delay:.24s !important; }
.fx-w5{ animation-delay:.36s !important; } .fx-w6{ animation-delay:.46s !important; } .fx-w7{ animation-delay:.56s !important; }
.fx-w8{ animation-delay:.66s !important; } .fx-w9{ animation-delay:.76s !important; } .fx-w10{ animation-delay:.86s !important; }
.fx-hl{ position:relative; display:inline-block; white-space:nowrap; padding-block-end:.12em; }
/* gold sheen: a slow moving highlight across the letters (no glow, no shadow) */
.fx-hl .fx-w{ color:var(--gold); background:linear-gradient(100deg, var(--gold) 0%, var(--gold) 35%, var(--gold-hi) 50%, var(--gold) 65%, var(--gold) 100%);
              background-size:250% 100%; background-position:100% 0; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
html.js .fx-hl .fx-w{ animation:fx-word .9s var(--ease-out) backwards, fx-sheen 4.5s ease-in-out 1.6s infinite; }
@keyframes fx-sheen{ 0%{ background-position:100% 0; } 55%,100%{ background-position:0% 0; } }
.fx-hl__line{ position:absolute; inset-inline:0; inset-block-end:-.08em; width:100%; height:.32em; overflow:visible; }
.fx-hl__line path{ fill:none; stroke:var(--gold); stroke-width:3.5; stroke-linecap:round;
                   stroke-dasharray:100; stroke-dashoffset:100; animation:fx-underline 1s var(--ease-out) 1.1s forwards; }
[dir=rtl] .fx-hl__line{ transform:scaleX(-1); }
@keyframes fx-underline{ to{ stroke-dashoffset:0; } }
html.no-motion .fx-h1 .fx-w, html.no-motion .fx-hl .fx-w{ animation:none !important; }
html.no-motion .fx-hl__line path{ animation:none; stroke-dashoffset:0; }
@media (prefers-reduced-motion: reduce){
    .fx-h1 .fx-w, .fx-hl .fx-w{ animation:none !important; }
    .fx-hl__line path{ animation:none; stroke-dashoffset:0; }
}

/* ══ analytics: compact KPI tiles (owner 2026-10-05: "اظبط التصميم هنا") ══ */
.fx-mini{ gap:var(--sp-3); }
.fx .fx-mini__k{ padding:var(--sp-4); display:grid; gap:var(--sp-3); transition:border-color .3s var(--ease-out); }
.fx-mini__k:hover{ border-color:color-mix(in srgb,var(--tone) 35%,var(--ds-border)); }
.fx-tile--sm{ width:30px; height:30px; border-radius:8px; }
.fx-tile--sm .fx-ico{ width:15px; height:15px; }
.fx-mini__v{ font-size:clamp(18.5px,1.82vw,23px); font-weight:600; line-height:1; color:var(--foreground); }
.fx-mini__v small{ font-family:var(--font-sans); font-size:var(--text-sm); font-weight:500; color:var(--muted-foreground); margin-inline-start:6px; }
.fx-up{ display:inline-flex; align-items:center; gap:2px; font-size:12px; font-weight:600; color:var(--ds-success);
        background:var(--success-soft); border-radius:99px; padding:2px 8px; direction:ltr; }
.fx-up .fx-ico{ width:11px; height:11px; }
.fx-mini__bar{ display:block; height:4px; border-radius:99px; background:var(--muted-c); overflow:hidden; }
.fx-mini__bar i{ display:block; height:100%; width:var(--w,70%); border-radius:inherit; background:var(--tone); transform-origin:var(--fx-o,right);
                 transform:scaleX(0); transition:transform 1.4s var(--ease-out) .3s; }
[dir=ltr] .fx-mini__bar i{ --fx-o:left; }
.fx-mini__k:nth-child(2) .fx-mini__bar i{ --w:46%; } .fx-mini__k:nth-child(3) .fx-mini__bar i{ --w:82%; } .fx-mini__k:nth-child(4) .fx-mini__bar i{ --w:30%; }
.rv.in .fx-mini__bar i, html:not(.js) .fx-mini__bar i, html.no-motion .fx-mini__bar i{ transform:scaleX(1); }
@media (max-width:420px){ .fx-mini{ grid-template-columns:minmax(0,1fr); } }

/* ══ journey: a gold line traces each card's border, then flows to the next ══
   (owner 2026-10-05: "بوردر بيتحرك ويلف اللفة بالذهبي وينتقل للكارد اللي بعده").
   features.js drives the states: .is-tracing (border drawing) → .is-lit (card
   done) and .is-flow on the connector leading to the next card. System gold only;
   no glow, no shadow. Under reduced motion every card simply rests neutral. */
@property --fx-p{ syntax:'<percentage>'; inherits:false; initial-value:0%; }
.fx-steps5{ --fx-gap:var(--sp-4); gap:var(--fx-gap); }
@media (min-width:1081px){ .fx-steps5{ --fx-gap:var(--sp-8); } }
.fx .fx-step{ position:relative; isolation:isolate; transition:background-color .6s var(--ease-out), translate .6s var(--ease-out), border-color .6s; }
/* the travelling border: a conic arc that grows round the card, masked to a 1.5px ring */
.fx-step::before{ content:''; position:absolute; inset:-1px; z-index:1; border-radius:inherit; padding:1.5px; pointer-events:none; opacity:0;
    /* starts at the card's EXIT side — where the connector leaves for the next
       card (inline-end middle: 270deg in RTL, 90deg in LTR) — and runs ONE way
       round, closing there, so the line flows straight on (owner 2026-10-05:
       "من ناحية خروجه" / "تخرج من اتجاه واحد" / "القفل من الناحية التانية"). */
    background:conic-gradient(from var(--fx-in,270deg),
        var(--gold) 0%, var(--gold-hi) var(--fx-p), transparent var(--fx-p) 100%);
    -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 exclude, linear-gradient(#000 0 0);
    transition:opacity .5s; }
[dir=ltr] .fx-step::before{ --fx-in:90deg; }
.fx-step.is-tracing::before{ opacity:1; animation:fx-trace 1.5s cubic-bezier(.45,.05,.35,1) forwards; }
.fx-step.is-lit::before{ opacity:1; --fx-p:100%; }
@keyframes fx-trace{ from{ --fx-p:0%; } to{ --fx-p:100%; } }
.fx-step.is-tracing, .fx-step.is-lit{ background:color-mix(in srgb,var(--gold) 5%,var(--card)); border-color:transparent; }
.fx-step.is-tracing{ translate:0 -4px; }
.fx-step.is-tracing .fx-step__n, .fx-step.is-lit .fx-step__n{ color:var(--gold); }
.fx-step.is-tracing .fx-step__n{ animation:fx-num-pop .6s var(--ease-out); }
@keyframes fx-num-pop{ 0%{ transform:scale(.6); opacity:.3; } 60%{ transform:scale(1.25); } 100%{ transform:none; opacity:1; } }
.fx-step.is-lit:not(.is-tracing){ background:color-mix(in srgb,var(--gold) 3%,var(--card)); }

/* connector: the line between this card and the next, filling with gold toward it */
@media (min-width:1081px){
    .fx-step:not(:last-child)::after{ content:''; position:absolute; z-index:0; top:50%; inset-inline-end:calc(-1 * var(--fx-gap) - 1px);
        width:calc(var(--fx-gap) + 2px); height:2px; margin-block-start:-1px; border-radius:2px;
        background:linear-gradient(90deg, var(--gold), var(--gold-hi)) no-repeat var(--fx-from,right) / 0% 100%, var(--ds-border);
        transition:background-size .55s cubic-bezier(.45,.05,.35,1); }
    [dir=ltr] .fx-step:not(:last-child)::after{ --fx-from:left; }
    .fx-step.is-flow:not(:last-child)::after, .fx-step.is-lit:not(:last-child)::after{ background-size:100% 100%, auto; }
}
html.no-motion .fx-step::before, html.no-motion .fx-step::after{ animation:none !important; transition:none !important; }
@media (prefers-reduced-motion: reduce){ .fx-step::before{ animation:none !important; } }

/* ══ AI section: the platform mascot + coloured steps (owner 2026-10-05) ══
   Same robot as the home page's AI section; life comes from motion, not light:
   a float, two thin rings turning in opposite directions (gold dashes, a brand
   arc) and two dots orbiting. No glow, no aura, no shadow. */
.fx-bot{ position:relative; width:min(100%,340px); aspect-ratio:1; margin-block-start:var(--sp-6); display:grid; place-items:center; }
.fx-bot__ring{ position:absolute; inset:4%; border-radius:50%; border:1px dashed color-mix(in srgb,var(--gold) 55%,transparent);
               animation:fx-spin 36s linear infinite; }
.fx-bot__ring--in{ inset:15%; border:1.5px solid color-mix(in srgb,var(--brand) 18%,transparent); border-block-start-color:var(--brand);
                   animation-duration:14s; animation-direction:reverse; }
.fx-bot__orbit{ position:absolute; inset:4%; animation:fx-spin 11s linear infinite; }
.fx-bot__orbit i{ position:absolute; top:-5px; inset-inline-start:50%; width:10px; height:10px; margin-inline-start:-5px; border-radius:50%; background:var(--gold); }
.fx-bot__orbit--b{ inset:15%; animation-duration:7s; animation-direction:reverse; }
.fx-bot__orbit--b i{ width:7px; height:7px; top:-4px; background:var(--brand); }
.fx-bot__img{ position:relative; width:82%; height:auto; animation:fx-bob 6s ease-in-out infinite; }
@keyframes fx-spin{ to{ transform:rotate(360deg); } }
@media (max-width:960px){ .fx-bot{ width:min(78%,300px); margin-inline:auto; } }

/* the assistant's steps light up in system colours as they run */
.fx-ai__steps li{ position:relative; overflow:hidden; }
.fx-ai__steps li.is-on{ color:var(--foreground); background:var(--tone-soft,var(--accent-c));
                        border-color:color-mix(in srgb,var(--tone,var(--foreground)) 35%,transparent); }
.fx-ai__steps li.is-on .fx-check{ background:var(--tone,var(--foreground)); border-color:var(--tone,var(--foreground)); color:var(--background);
                                  animation:fx-num-pop .5s var(--ease-out); }
.fx-ai__steps li::after{ content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
                         background:linear-gradient(100deg, transparent 30%, color-mix(in srgb,var(--tone,var(--foreground)) 22%,transparent) 50%, transparent 70%);
                         transform:translateX(-100%); }
.fx-ai__steps li.is-on::after{ animation:fx-sweep 1s var(--ease-out); }
@keyframes fx-sweep{ 0%{ opacity:1; transform:translateX(100%); } 100%{ opacity:0; transform:translateX(-100%); } }
[dir=ltr] .fx-ai__steps li.is-on::after{ animation-name:fx-sweep-ltr; }
@keyframes fx-sweep-ltr{ 0%{ opacity:1; transform:translateX(-100%); } 100%{ opacity:0; transform:translateX(100%); } }
.fx-ai .fx-caret{ background:var(--gold); }
.fx-ai .fx-bubble{ border-inline-start:2px solid color-mix(in srgb,var(--gold) 55%,transparent); }

html.js .fx-sec:not(.is-vis) :is(.fx-bot__ring,.fx-bot__orbit,.fx-bot__img){ animation-play-state:paused; }
html.no-motion :is(.fx-bot__ring,.fx-bot__orbit,.fx-bot__img,.fx-ai__steps li::after,.fx-ai__steps .fx-check){ animation:none !important; }
@media (prefers-reduced-motion: reduce){ :is(.fx-bot__ring,.fx-bot__orbit,.fx-bot__img){ animation:none !important; } }

/* ══ orders: a status tracker (owner 2026-10-05: "الجزء ده يتظبط") ══════════
   Nodes on a rail; each lights in its system tone as the order reaches it, the
   rail fills brand → success, the current status pulses (a ring, not a glow)
   and a «customer notified» chip slides in. Cumulative states come from the
   existing [data-fx-seq] loop; the rail length is read with :has(). */
.fx-flow{ --fx-node:40px; position:relative; gap:var(--sp-3); margin-block-start:var(--sp-6); }
.fx-flow::before, .fx-flow::after{ content:''; position:absolute; inset-inline-start:calc(var(--fx-node) / 2 - 1px); top:calc(var(--fx-node) / 2); width:2px; border-radius:2px; }
.fx-flow::before{ bottom:calc(var(--fx-node) / 2); background:var(--ds-border); }
.fx-flow::after{ height:0; background:linear-gradient(180deg, var(--brand), var(--ds-success)); transition:height .8s var(--ease-out); }
.fx-flow:has(li:nth-child(2).is-on)::after{ height:calc(25% - var(--fx-node) / 4); }
.fx-flow:has(li:nth-child(3).is-on)::after{ height:calc(50% - var(--fx-node) / 2); }
.fx-flow:has(li:nth-child(4).is-on)::after{ height:calc(75% - var(--fx-node) * .75); }
.fx-flow:has(li:nth-child(5).is-on)::after{ height:calc(100% - var(--fx-node)); }
.fx .fx-flow li{ position:relative; z-index:1; padding:0; border:0; background:none; gap:var(--sp-4); color:var(--muted-foreground); }
.fx .fx-flow li.is-on{ background:none; border:0; color:var(--foreground); }
.fx-flow__node{ position:relative; width:var(--fx-node); height:var(--fx-node); flex:none; display:grid; place-items:center; border-radius:50%;
                background:var(--card); border:1px solid var(--ds-border); color:var(--muted-foreground);
                transition:background-color .4s, border-color .4s, color .4s, transform .4s var(--ease-out); }
.fx-flow__node .fx-ico{ width:17px; height:17px; }
.fx-flow li.is-on .fx-flow__node{ background:var(--tone-soft); border-color:color-mix(in srgb,var(--tone) 55%,transparent); color:var(--tone); }
/* the current status: on, and the next one not yet */
.fx-flow li.is-on:not(:has(+ li.is-on)) .fx-flow__node{ transform:scale(1.08); }
.fx-flow li.is-on:not(:has(+ li.is-on)) .fx-flow__node::after{ content:''; position:absolute; inset:-1px; border-radius:50%;
                border:1.5px solid var(--tone); animation:fx-ring 1.6s var(--ease-out) infinite; }
@keyframes fx-ring{ 0%{ transform:scale(1); opacity:.9; } 100%{ transform:scale(1.55); opacity:0; } }
.fx-flow__txt{ flex:0 1 auto; min-width:0; display:flex; align-items:baseline; gap:var(--sp-2); font-size:var(--text-md); font-weight:600; }
.fx-flow__n{ font-size:12px; font-weight:500; color:var(--muted-foreground); }
.fx-flow li.is-on .fx-flow__n{ color:var(--tone); }
.fx-flow__note{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; padding:3px 10px; border-radius:99px;
                color:var(--tone); background:var(--tone-soft); opacity:0; translate:8px 0; transition:opacity .4s, translate .4s var(--ease-out); white-space:nowrap; }
[dir=rtl] .fx-flow__note{ translate:-8px 0; }
.fx-flow__note .fx-ico{ width:12px; height:12px; }
.fx-flow li.is-on .fx-flow__note{ opacity:1; translate:0 0; }
@media (max-width:420px){ .fx-flow__note{ display:none; } }
html.no-motion .fx-flow__node::after{ animation:none !important; display:none; }
@media (prefers-reduced-motion: reduce){ .fx-flow__node::after{ animation:none !important; display:none; } }

/* ══ payments: the money path (owner 2026-10-05: "فكرة أحسن") ══════════════
   One 5s loop, every piece keyed to the same clock: the coin leaves the
   customer, the gateway pulses as it passes, it lands in the merchant's
   account, the account pulses and «Paid +1,250» pops. */
.fx-pay{ --fx-loop:5s; position:relative; margin-block-start:var(--sp-6); padding:var(--sp-5) var(--sp-4) var(--sp-4); border-radius:var(--radius-md);
         border:1px solid var(--ds-border); background:color-mix(in srgb,var(--muted-c) 45%,transparent); }
.fx-pay__nodes{ position:relative; display:flex; justify-content:space-between; }
.fx-pay__node{ display:grid; justify-items:center; gap:6px; width:72px; }
.fx-pay__node small{ font-size:12px; color:var(--muted-foreground); white-space:nowrap; }
.fx-pay__node .fx-tile{ background:var(--card); }
.fx-pay__line{ position:absolute; z-index:0; top:calc(var(--sp-5) + 19px); inset-inline:calc(var(--sp-4) + 36px); height:2px;
               background:repeating-linear-gradient(90deg, var(--ds-border) 0 6px, transparent 6px 11px); container-type:inline-size; }
.fx-pay__nodes{ z-index:1; }
.fx-pay__coin{ position:absolute; top:-6px; inset-inline-start:-7px; width:14px; height:14px; border-radius:50%;
               background:var(--gold); border:2px solid var(--gold-hi); animation:fx-coin var(--fx-loop) cubic-bezier(.5,0,.3,1) infinite; }
@keyframes fx-coin{ 0%{ transform:translateX(0); opacity:0; } 6%{ opacity:1; } 42%,50%{ transform:translateX(calc(50cqw * var(--fx-dir,1))); }
                    80%{ transform:translateX(calc(100cqw * var(--fx-dir,1))); opacity:1; } 88%,100%{ transform:translateX(calc(100cqw * var(--fx-dir,1))); opacity:0; } }
[dir=rtl] .fx-pay{ --fx-dir:-1; }
.fx-pay__node--gw .fx-tile { animation:fx-hit var(--fx-loop) ease-out infinite; --fx-at:44%; }
.fx-pay__node--you .fx-tile{ animation:fx-hit-you var(--fx-loop) ease-out infinite; }
@keyframes fx-hit    { 0%,40%{ transform:none; border-color:color-mix(in srgb,var(--tone) 18%,transparent); } 46%{ transform:scale(1.14); border-color:var(--tone); } 60%,100%{ transform:none; border-color:color-mix(in srgb,var(--tone) 18%,transparent); } }
@keyframes fx-hit-you{ 0%,78%{ transform:none; border-color:color-mix(in srgb,var(--tone) 18%,transparent); } 84%{ transform:scale(1.16); border-color:var(--tone); background:var(--tone-soft); } 100%{ transform:none; border-color:color-mix(in srgb,var(--tone) 18%,transparent); } }
.fx-pay__ok{ display:flex; align-items:center; justify-content:center; gap:6px; margin-block-start:var(--sp-4); font-size:var(--text-sm); font-weight:600;
             color:var(--ds-success); animation:fx-paid var(--fx-loop) ease-out infinite; }
.fx-pay__ok .fx-ico{ width:15px; height:15px; }
@keyframes fx-paid{ 0%,80%{ opacity:0; transform:translateY(6px); } 86%,96%{ opacity:1; transform:none; } 100%{ opacity:0; } }

/* gateway / carrier chips: one at a time, in the panel's tone */
.fx-chips{ list-style:none; display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-5) 0 0; padding:0; }
.fx .fx-chips .ds-badge{ font-size:var(--text-sm); padding:6px 14px; color:var(--muted-foreground); transition:color .35s, background-color .35s, border-color .35s, transform .35s var(--ease-out); }
.fx .fx-chips .ds-badge.is-on{ color:var(--tone); background:var(--tone-soft); border-color:color-mix(in srgb,var(--tone) 40%,transparent); transform:translateY(-2px); }

/* ══ shipping: the delivery route ═════════════════════════════════════════
   Stops sit in four equal columns (centres at 12.5/37.5/62.5/87.5%); the track
   runs between the outer centres. The truck's position follows the lit stops
   (:has), so it drives stop to stop on the same [data-fx-seq] loop. */
.fx-route{ --k:0; position:relative; margin-block-start:var(--sp-6); padding:var(--sp-5) 0 var(--sp-2); }
.fx-route__track{ position:relative; margin-inline:12.5%; height:3px; border-radius:3px; background:var(--ds-border); container-type:inline-size; margin-block:22px 0; }
.fx-route__fill{ position:absolute; inset-block:0; inset-inline-start:0; width:calc(var(--k) * 100%); border-radius:inherit;
                 background:linear-gradient(90deg, var(--ds-success), color-mix(in srgb,var(--ds-success) 60%,var(--brand))); transition:width .9s cubic-bezier(.5,0,.3,1); }
[dir=rtl] .fx-route__fill{ background:linear-gradient(270deg, var(--ds-success), color-mix(in srgb,var(--ds-success) 60%,var(--brand))); }
.fx-truck{ position:absolute; top:-34px; inset-inline-start:-17px; width:34px; height:30px; display:grid; place-items:center; border-radius:9px;
           color:var(--ds-success); background:var(--success-soft); border:1px solid color-mix(in srgb,var(--ds-success) 40%,transparent);
           transform:translateX(calc(var(--k) * 100cqw * var(--fx-dir,1))); transition:transform .9s cubic-bezier(.5,0,.3,1), opacity .3s; }
[dir=rtl] .fx-route{ --fx-dir:-1; }
[dir=rtl] .fx-truck svg{ transform:scaleX(-1); }   /* the glyph's cab faces right */
.fx-truck .fx-ico{ width:18px; height:18px; animation:fx-rumble .5s ease-in-out infinite alternate; }
@keyframes fx-rumble{ to{ translate:0 -1.5px; } }
.fx-route:not(:has(li.is-on)) .fx-truck{ opacity:0; transition:none; }
.fx-route:not(:has(li.is-on)) .fx-route__fill{ transition:none; }
.fx-route:has(li:nth-child(2).is-on){ --k:.3333; }
.fx-route:has(li:nth-child(3).is-on){ --k:.6667; }
.fx-route:has(li:nth-child(4).is-on){ --k:1; }
.fx-route__stops{ list-style:none; margin:-8px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.fx-route__stops li{ display:grid; justify-items:center; gap:10px; text-align:center; font-size:var(--text-sm); color:var(--muted-foreground); transition:color .4s; }
.fx-route__stops i{ width:13px; height:13px; border-radius:50%; background:var(--card); border:2px solid var(--input); transition:background-color .4s, border-color .4s, transform .4s var(--ease-out); }
.fx-route__stops li.is-on{ color:var(--foreground); font-weight:600; }
.fx-route__stops li.is-on i{ background:var(--ds-success); border-color:var(--ds-success); transform:scale(1.15); }

html.js .fx-sec:not(.is-vis) :is(.fx-pay__coin,.fx-pay__node .fx-tile,.fx-pay__ok,.fx-truck .fx-ico){ animation-play-state:paused; }
html.no-motion :is(.fx-pay__coin,.fx-pay__node .fx-tile,.fx-truck .fx-ico){ animation:none !important; }
html.no-motion .fx-pay__ok{ animation:none !important; opacity:1; transform:none; }
html.no-motion .fx-pay__coin{ display:none; }
@media (prefers-reduced-motion: reduce){
    :is(.fx-pay__coin,.fx-pay__node .fx-tile,.fx-truck .fx-ico){ animation:none !important; }
    .fx-pay__ok{ animation:none !important; opacity:1; transform:none; } .fx-pay__coin{ display:none; }
}

/* ══ orders: the merchant's order card + the customer's phone (owner 2026-10-05:
   "فكرة مختلفة خالص، احترافية وقوية"). One order moves through its statuses;
   every change lands on the customer's lock screen as an email notification —
   what OrderController really sends. Kit components; tones from the kit. ══ */
.fx-stages{ list-style:none; margin:var(--sp-6) 0 0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.fx-stages li{ display:grid; gap:8px; font-size:12.5px; color:var(--muted-foreground); transition:color .4s; }
.fx-stages__bar{ display:block; height:5px; border-radius:99px; background:var(--muted-c); overflow:hidden; position:relative; }
.fx-stages__bar::after{ content:''; position:absolute; inset:0; border-radius:inherit; background:var(--tone); transform:scaleX(0);
                        transform-origin:var(--fx-o,right); transition:transform .7s cubic-bezier(.5,0,.3,1); }
[dir=ltr] .fx-stages__bar::after{ --fx-o:left; }
.fx-stages li.is-on{ color:var(--foreground); }
.fx-stages li.is-on .fx-stages__bar::after{ transform:scaleX(1); }
.fx-stages li.is-now .fx-stages__l{ color:var(--tone); font-weight:600; }
@media (max-width:520px){ .fx-stages{ grid-template-columns:repeat(5,minmax(0,1fr)); } .fx-stages__l{ font-size:11px; } }

.fx-ostage{ --fx-ph:clamp(170px,36%,215px); position:relative; padding-inline-end:calc(var(--fx-ph) - 28px); padding-block:var(--sp-4) var(--sp-8); }
.fx .fx-ocard{ padding:var(--sp-5); display:grid; gap:var(--sp-4); }
.fx-ocard__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.fx-ocard__head b{ font-size:var(--text-lg); }
.fx .ds-badge.fx-ostatus{ font-size:var(--text-sm); padding:5px 12px; color:var(--tone); background:var(--tone-soft); border-color:color-mix(in srgb,var(--tone) 35%,transparent);
                 transition:color .35s, background-color .35s, border-color .35s; }
.fx-ostatus.is-swap{ animation:fx-swap .45s var(--ease-out); }
@keyframes fx-swap{ 0%{ transform:scale(.85); opacity:.3; } 60%{ transform:scale(1.08); } 100%{ transform:none; opacity:1; } }
.fx-ocard__who{ display:flex; align-items:center; gap:var(--sp-3); padding-block:var(--sp-3); border-block:1px solid var(--ds-border); }
.fx-avatar{ width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:50%; font-size:13px; font-weight:700;
            background:var(--brand-soft); color:var(--brand); }
.fx-ocard__items{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-3); }
.fx-ocard__items li{ display:flex; align-items:center; gap:var(--sp-3); font-size:var(--text-sm); }
.fx-ocard__items small{ color:var(--muted-foreground); margin-inline-start:4px; }
.fx-thumb{ width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:9px; background:var(--tone-soft); color:var(--tone); }
.fx-thumb .fx-ico{ width:16px; height:16px; }
.fx-ocard__total{ display:flex; justify-content:space-between; align-items:center; padding-block-start:var(--sp-3); border-block-start:1px dashed var(--ds-border); font-size:var(--text-sm); }
.fx-ocard__total b{ font-size:var(--text-lg); }
.fx-ocard__act{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; }
.fx-onext{ pointer-events:none; transition:transform .2s var(--ease-out); }
.fx-onext.is-press{ transform:scale(.94); }

/* the customer's phone: a lock screen (solid surfaces — no glass, no blur) */
.fx-mphone{ position:absolute; inset-inline-end:0; inset-block-end:0; width:var(--fx-ph,215px); padding:8px; border-radius:34px;
            border:1px solid var(--input); background:var(--card); animation:fx-bob 7s ease-in-out infinite; }
.fx-mphone__notch{ position:absolute; z-index:2; top:14px; inset-inline-start:50%; translate:-50% 0; width:30%; height:15px; border-radius:99px; background:var(--card); }
[dir=rtl] .fx-mphone__notch{ translate:50% 0; }
.fx-mphone__screen{ position:relative; aspect-ratio:9/17; overflow:hidden; border-radius:26px; padding:44px 10px 10px;
                    background:linear-gradient(165deg, color-mix(in srgb,var(--brand) 26%,var(--background)), var(--background) 55%, color-mix(in srgb,var(--gold) 16%,var(--background))); }
.fx-mphone__time{ text-align:center; font-size:31.5px; font-weight:600; line-height:1; color:var(--foreground); }
.fx-mphone__date{ text-align:center; font-size:11px; color:var(--muted-foreground); margin:6px 0 16px; }
.fx-notifs{ display:grid; gap:7px; }
.fx-notif{ display:flex; gap:8px; align-items:flex-start; padding:9px; border-radius:14px; background:color-mix(in srgb,var(--card) 92%,var(--foreground));
           border:1px solid var(--ds-border); transition:opacity .4s, transform .4s var(--ease-out); }
.fx-notif.is-in{ animation:fx-notif-in .55s cubic-bezier(.2,.9,.3,1.2); }
@keyframes fx-notif-in{ from{ opacity:0; transform:translateY(-14px) scale(.96); } to{ opacity:1; transform:none; } }
.fx-notif.is-old{ opacity:.55; transform:scale(.97); }
.fx-notif__ico{ width:26px; height:26px; flex:none; display:grid; place-items:center; border-radius:8px; background:var(--tone); color:var(--background); }
.fx-notif__ico .fx-ico{ width:14px; height:14px; }
.fx-notif__top{ display:flex; justify-content:space-between; gap:6px; font-size:11px; }
.fx-notif__top small{ color:var(--muted-foreground); }
.fx-notif p{ margin:2px 0 0; font-size:11.5px; line-height:1.45; color:var(--foreground); }

@media (max-width:640px){
    .fx-ostage{ padding-inline-end:0; padding-block-end:0; display:grid; gap:var(--sp-5); justify-items:center; }
    .fx-ostage .fx-ocard{ width:100%; }
    .fx-mphone{ position:relative; inset:auto; width:min(230px,70%); }
}
html.js .fx-sec:not(.is-vis) .fx-mphone{ animation-play-state:paused; }
html.no-motion .fx-mphone, html.no-motion .fx-notif, html.no-motion .fx-ostatus{ animation:none !important; }
@media (prefers-reduced-motion: reduce){ .fx-mphone{ animation:none !important; } }

/* the phone overlaps the card's edge by 28px — keep the card's content clear of it */
@media (min-width:641px){ .fx .fx-ostage .fx-ocard{ padding-inline-end:calc(var(--sp-5) + 30px); } }

/* ══ 11 · all features — Swiper coverflow (owner reference, 2026-10-05) ════
   Swiper = the bundle the storefront themes already ship. The section clips
   horizontally so the side slides bleed to the viewport edge. Each slide is
   tinted by its feature tone; visuals use real assets only. */
.fx-allf{ overflow:hidden; }
.fx-allf .fx-wrap{ width:min(1400px, 100% - 32px); }
.fx-allf__pill{ display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:99px; font-size:var(--text-sm); font-weight:600;
    color:var(--brand); background:var(--brand-soft); border:1px solid color-mix(in srgb,var(--brand) 25%,transparent); }
.fx-allf__pill .fx-ico{ width:16px; height:16px; }
.fx-allf__h{ margin-top:var(--sp-4); font-size:clamp(25px,3.15vw,41.5px); }

.fx-sw{ position:relative; }
.fx .fx-sw__swiper{ overflow:visible; padding-block:12px 8px; }
.fx .fx-sw__slide{ width:min(860px, 82vw); height:auto; display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(18px,2.5vw,36px); align-items:center;
    padding:clamp(22px,3vw,40px); border-radius:30px; border:1px solid var(--ds-border); min-height:clamp(360px,30vw,430px);
    background:linear-gradient(135deg, var(--card) 38%, color-mix(in srgb,var(--tone) 10%,var(--card))); transition:opacity .5s, border-color .5s; }
.fx .fx-sw__slide:not(.swiper-slide-active){ opacity:.62; cursor:pointer; }
.fx .fx-sw__slide.swiper-slide-active{ border-color:color-mix(in srgb,var(--tone) 35%,var(--ds-border)); }
.fx-sw__copy{ display:grid; gap:var(--sp-4); align-content:center; min-width:0; }
.fx-sw__badge{ justify-self:start; padding:6px 14px; border-radius:99px; font-size:var(--text-sm); font-weight:700; color:var(--brand); background:var(--brand-soft); }
.fx-sw__title{ display:flex; align-items:center; gap:var(--sp-3); }
.fx-sw__title h3{ margin:0; font-family:var(--font-display); font-size:clamp(20px,2.15vw,30px); font-weight:700; color:var(--foreground); }
.fx-sw__ico{ width:clamp(46px,4vw,60px); height:clamp(46px,4vw,60px); flex:none; display:grid; place-items:center; border-radius:16px;
    background:var(--tone-soft); color:var(--tone); border:1px solid color-mix(in srgb,var(--tone) 25%,transparent); }
.fx-sw__ico .fx-ico{ width:46%; height:46%; }
.fx-sw__copy p{ margin:0; font-size:clamp(14px,0.95vw,14.5px); line-height:1.95; color:var(--muted-foreground); }
.fx .fx-sw__more{ justify-self:start; height:50px; padding-inline:26px; border-radius:14px; gap:10px; font-size:var(--text-md);
    background:var(--brand); color:#fff; border-color:transparent; text-decoration:none; }
.fx .fx-sw__more:hover{ background:color-mix(in srgb,var(--brand) 88%,#000); color:#fff; }

/* arrows + dots */
.fx-sw__nav{ position:absolute; z-index:5; top:calc(50% - 30px); width:56px; height:56px; display:grid; place-items:center; border-radius:50%; cursor:pointer;
    background:var(--card); color:var(--brand); border:1px solid var(--ds-border); transition:transform .2s; }
.fx-sw__nav:hover{ transform:scale(1.06); } .fx-sw__nav .fx-ico{ width:20px; height:20px; }
.fx-sw__nav--prev{ inset-inline-start:max(12px, calc(50% - 600px)); } .fx-sw__nav--next{ inset-inline-end:max(12px, calc(50% - 600px)); }
.fx-sw__nav--prev .fx-ico{ transform:scaleX(-1); } [dir=rtl] .fx-sw__nav--prev .fx-ico{ transform:none; } [dir=rtl] .fx-sw__nav--next .fx-ico{ transform:scaleX(-1); }
.fx-sw__nav.swiper-button-disabled{ opacity:.4; }
.fx-sw__dots{ display:flex; justify-content:center; gap:8px; margin-top:var(--sp-6); }
.fx-sw__dots .swiper-pagination-bullet{ width:9px; height:9px; margin:0 !important; opacity:1; background:var(--input); transition:width .3s, background-color .3s; }
.fx-sw__dots .swiper-pagination-bullet-active{ width:30px; border-radius:99px; background:var(--brand); }

/* feature tabs */
.fx-sw__tabs{ display:flex; overflow:hidden; margin-top:var(--sp-8); padding-block:4px 6px;
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.fx-sw__track{ flex:none; display:flex; gap:10px; padding-inline-end:10px; animation:fx-mq 46s linear infinite; }
[dir=rtl] .fx-sw__track{ animation-name:fx-mq-rtl; }
.fx-sw__tabs:hover .fx-sw__track, .fx-sw__tabs:focus-within .fx-sw__track{ animation-play-state:paused; }
html.js .fx-sec:not(.is-vis) .fx-sw__track{ animation-play-state:paused; }
html.no-motion .fx-sw__track{ animation:none; } html.no-motion .fx-sw__track[aria-hidden]{ display:none; }
html.no-motion .fx-sw__tabs{ overflow-x:auto; mask-image:none; -webkit-mask-image:none; }
@media (prefers-reduced-motion: reduce){ .fx-sw__track{ animation:none; } .fx-sw__track[aria-hidden]{ display:none; } .fx-sw__tabs{ overflow-x:auto; } }
.fx-sw__tab{ flex:none; display:inline-flex; align-items:center; gap:9px; padding:7px 14px 7px 7px; border-radius:15px; text-decoration:none; font-weight:600; font-size:13.5px; white-space:nowrap;
    color:var(--foreground); background:var(--card); border:1px solid var(--ds-border); transition:border-color .25s, background-color .25s, transform .25s; }
[dir=rtl] .fx-sw__tab{ padding:7px 7px 7px 14px; }
.fx-sw__tab:hover{ transform:translateY(-2px); }
.fx-sw__tab.is-on{ border-color:color-mix(in srgb,var(--brand) 50%,var(--ds-border)); background:var(--brand-soft); }
.fx-sw__tab-ico{ width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:var(--tone-soft); color:var(--tone); }
.fx-sw__tab-ico .fx-ico{ width:19px; height:19px; }
@media (max-width:760px){
    .fx .fx-sw__slide{ grid-template-columns:minmax(0,1fr); width:86vw; min-height:0; }
    .fx-sw__nav{ display:none; }
}

/* ── slide visuals (sv-*) ── */
.sv{ position:relative; min-height:clamp(240px,24vw,320px); }
.sv img{ display:block; }
.sv-card{ background:var(--card); border:1px solid var(--ds-border); border-radius:18px; }
.sv-plus{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--brand); color:#fff; font-weight:700; line-height:1; }
/* online store */
.sv-laptop{ position:absolute; inset-block-start:6%; inset-inline-end:16%; width:74%; }
.sv-laptop__screen{ aspect-ratio:16/10; overflow:hidden; container-type:size; border:7px solid #17181b; border-block-end-width:9px; border-radius:14px 14px 4px 4px; background:#fff; }
.sv-laptop__screen img{ width:100%; height:auto; animation:em-sc-browse 22s ease-in-out infinite; }
.sv-laptop__base{ height:11px; margin-inline:-6%; border-radius:0 0 12px 12px; background:linear-gradient(180deg,#d4d7dc,#a6abb2); }
body.dark-mode .sv-laptop__base{ background:linear-gradient(180deg,#4a4d55,#24262b); }
.sv-panel{ position:absolute; inset-block-start:0; inset-inline-end:0; list-style:none; margin:0; padding:10px; width:31%; display:grid; gap:6px;
    background:var(--card); border:1px solid var(--ds-border); border-radius:16px; font-size:12.5px; color:var(--foreground); }
.sv-panel li{ display:flex; align-items:center; gap:8px; padding:6px; border-radius:10px; }
.sv-panel li:first-child{ background:var(--tone-soft); }
.sv-panel__i{ width:24px; height:24px; display:grid; place-items:center; border-radius:7px; background:var(--muted-c); color:var(--tone); font-weight:800; font-size:11px; }
.sv-panel__i .fx-ico{ width:13px; height:13px; }
.sv-swatch{ width:12px; height:12px; border-radius:50%; background:conic-gradient(var(--brand) 0 33%, var(--gold) 0 66%, var(--ds-success) 0); }
.sv-drag{ position:absolute; inset-block-end:6%; inset-inline-start:2%; width:26%; padding:8px; background:var(--card); border:1px solid var(--ds-border); border-radius:16px;
    animation:fx-drag 5s ease-in-out infinite; }
.sv-drag img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; }
.sv-drag .sv-plus{ position:absolute; inset-block-start:-8px; inset-inline-end:-8px; }
.sv-slot{ position:absolute; inset-block-end:12%; inset-inline-start:32%; width:13%; aspect-ratio:1; display:grid; place-items:center; border:2px dashed var(--brand); border-radius:12px; }
.sv-cursor{ position:absolute; inset-block-end:4%; inset-inline-start:38%; width:30px; fill:var(--foreground); stroke:var(--card); stroke-width:1.5; animation:fx-drag 5s ease-in-out infinite; }
@keyframes fx-drag{ 0%,15%{ transform:translate(0,0); } 45%,60%{ transform:translate(calc(var(--fx-dx,1) * 14px), -10px); } 100%{ transform:translate(0,0); } }
/* products */
.sv-editor{ position:absolute; inset-block-start:4%; inset-inline-end:14%; width:58%; padding:12px; background:var(--card); border:1px solid var(--ds-border); border-radius:18px; display:grid; gap:10px; }
.sv-editor__img{ position:relative; } .sv-editor__img img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.sv-plus--corner{ position:absolute; inset-block-start:8px; inset-inline-end:8px; }
.sv-lines{ display:grid; gap:6px; } .sv-lines i{ height:8px; border-radius:99px; background:var(--muted-c); } .sv-lines i.is-short{ width:60%; }
.sv-chips{ display:flex; gap:6px; } .sv-chips span{ padding:3px 10px; border-radius:8px; font-size:12px; border:1px solid var(--ds-border); color:var(--muted-foreground); }
.sv-chips span.is-on{ border-color:var(--tone); color:var(--tone); background:var(--tone-soft); }
.sv-tools{ position:absolute; inset-block-start:16%; inset-inline-end:0; list-style:none; margin:0; padding:6px; display:grid; gap:6px; background:var(--card); border:1px solid var(--ds-border); border-radius:14px; }
.sv-tools li{ width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:var(--muted-foreground); } .sv-tools li:first-child{ background:var(--tone-soft); color:var(--tone); }
.sv-tools .fx-ico{ width:15px; height:15px; }
.sv-thumbs{ position:absolute; inset-block-end:0; inset-inline-start:0; display:flex; gap:8px; padding:8px; background:var(--card); border:1px solid var(--ds-border); border-radius:16px; }
.sv-thumbs img{ width:52px; height:52px; object-fit:cover; border-radius:10px; }
/* orders */
.sv-orders{ position:absolute; inset:4% 4% auto 4%; padding:8px; display:grid; gap:6px; }
.sv-orders__row{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:12px; border:1px solid var(--ds-border); font-size:13px; }
.sv-orders__row b{ display:block; color:var(--foreground); } .sv-orders__row small{ color:var(--muted-foreground); }
.sv-avatar{ width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--brand-soft); color:var(--brand); font-weight:700; }
.sv-badge{ padding:3px 10px; border-radius:99px; font-size:12px; font-weight:600; color:var(--tone); background:var(--tone-soft); white-space:nowrap; }
.sv-pdf{ position:absolute; inset-block-end:2%; inset-inline-start:6%; display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:12px; font-weight:700;
    background:var(--card); border:1px solid var(--ds-border); color:var(--tone); animation:fx-bob 6s ease-in-out infinite; }
.sv-pdf .fx-ico{ width:15px; height:15px; }
/* payments */
.sv-pay{ position:absolute; inset:4% 10% auto 4%; padding:14px; display:grid; gap:8px; }
.sv-pay__h{ font-size:13px; color:var(--muted-foreground); }
.sv-opt{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid var(--ds-border); font-size:13.5px; color:var(--foreground); }
.sv-opt.is-on{ border-color:color-mix(in srgb,var(--tone) 50%,transparent); background:var(--tone-soft); }
.sv-radio{ width:16px; height:16px; border-radius:50%; border:2px solid var(--input); } .sv-opt.is-on .sv-radio{ border:5px solid var(--tone); }
.sv-paid{ position:absolute; inset-block-end:4%; inset-inline-end:0; display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:16px;
    background:var(--card); border:1px solid var(--ds-border); animation:fx-bob 6s ease-in-out infinite; }
.sv-paid .fx-ico{ width:30px; height:30px; padding:7px; border-radius:50%; background:var(--success-soft); color:var(--ds-success); }
.sv-paid b{ display:block; color:var(--foreground); } .sv-paid small{ color:var(--muted-foreground); }
/* shipping */
.sv-route{ position:absolute; inset:14% 2% auto 2%; padding:34px 18px 18px; }
.sv-route__track{ position:relative; height:4px; margin-inline:12%; border-radius:4px; background:var(--muted-c); container-type:inline-size; }
.sv-route__fill{ position:absolute; inset-block:0; inset-inline-start:0; border-radius:inherit; background:var(--tone); animation:sv-ship 4.5s cubic-bezier(.5,0,.3,1) infinite; }
.sv-route__truck{ position:absolute; top:-34px; inset-inline-start:-17px; width:34px; height:28px; display:grid; place-items:center; border-radius:9px; background:var(--tone-soft); color:var(--tone);
    animation:sv-truck 4.5s cubic-bezier(.5,0,.3,1) infinite; }
[dir=rtl] .sv-route__truck svg{ transform:scaleX(-1); }
.sv-route__truck .fx-ico{ width:17px; height:17px; }
@keyframes sv-ship{ 0%{ width:0; } 70%,100%{ width:100%; } }
@keyframes sv-truck{ 0%{ transform:translateX(0); } 70%,100%{ transform:translateX(calc(100cqw * var(--fx-dir,1))); } }
[dir=rtl] .sv-route{ --fx-dir:-1; }
.sv-route__stops{ list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); text-align:center; font-size:13px; color:var(--muted-foreground); }
.sv-route__stops li.is-on{ color:var(--foreground); font-weight:600; }
.sv-carriers{ position:absolute; inset-block-end:6%; inset-inline:2%; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.sv-carriers span{ padding:6px 14px; border-radius:99px; font-size:13px; font-weight:600; background:var(--card); border:1px solid var(--ds-border); color:var(--muted-foreground); }
.sv-carriers span.is-on{ color:var(--tone); border-color:color-mix(in srgb,var(--tone) 45%,transparent); background:var(--tone-soft); }
/* marketing */
.sv-mega{ position:absolute; inset-block-start:2%; inset-inline-end:6%; width:76px; height:76px; display:grid; place-items:center; border-radius:22px; background:var(--tone-soft); color:var(--tone); transform:rotate(-10deg);
    animation:fx-bob 6s ease-in-out infinite; }
.sv-mega .fx-ico{ width:38px; height:38px; }
.sv-bars{ position:absolute; inset-block-start:16%; inset-inline-start:4%; width:56%; padding:14px; font-size:13px; color:var(--muted-foreground); }
.sv-bars__set{ display:flex; align-items:flex-end; gap:8px; height:120px; margin-top:10px; }
.sv-bars__set i{ flex:1; border-radius:8px 8px 3px 3px; background:var(--tone); opacity:.85; transform-origin:bottom; animation:sv-grow 4s var(--ease-out) infinite; }
.sv-bars__set i:nth-child(1){ height:32%; } .sv-bars__set i:nth-child(2){ height:48%; animation-delay:.1s; } .sv-bars__set i:nth-child(3){ height:42%; animation-delay:.2s; }
.sv-bars__set i:nth-child(4){ height:68%; animation-delay:.3s; } .sv-bars__set i:nth-child(5){ height:90%; animation-delay:.4s; }
@keyframes sv-grow{ 0%{ transform:scaleY(.2); } 40%,100%{ transform:scaleY(1); } }
.sv-ticket{ position:absolute; inset-block-end:4%; inset-inline-end:4%; display:grid; gap:2px; padding:14px 20px; border-radius:14px; border:2px dashed var(--tone); background:var(--card);
    text-align:center; animation:fx-bob 7s ease-in-out -2s infinite; }
.sv-ticket b{ font-size:16.5px; color:var(--tone); } .sv-ticket span{ font-size:12px; color:var(--muted-foreground); letter-spacing:.06em; }
/* ai */
.sv-bot{ position:absolute; inset-block-start:0; inset-inline-end:6%; width:62%; height:auto; animation:fx-bob 6s ease-in-out infinite; }
.sv-prompt{ position:absolute; inset-block-end:4%; inset-inline-start:0; display:flex; align-items:center; gap:10px; padding:12px 16px; font-size:13.5px; color:var(--foreground); }
.sv-prompt .fx-ico{ width:18px; height:18px; color:var(--tone); }
/* analytics */
.sv-chart{ position:absolute; inset:6% 4% auto 4%; padding:16px; display:grid; gap:4px; font-size:13px; color:var(--muted-foreground); }
.sv-chart b{ font-size:21.5px; color:var(--foreground); } .sv-chart b small{ font-size:13px; color:var(--muted-foreground); }
.sv-chart svg{ width:100%; height:120px; margin-top:6px; }
.sv-chart__area{ fill:color-mix(in srgb,var(--tone) 16%,transparent); }
.sv-chart__line{ fill:none; stroke:var(--tone); stroke-width:2.5; stroke-dasharray:400; animation:sv-line 5s var(--ease-out) infinite; }
@keyframes sv-line{ 0%{ stroke-dashoffset:400; } 45%,100%{ stroke-dashoffset:0; } }
.sv-mini{ position:absolute; inset-block-end:2%; inset-inline-start:6%; padding:10px 16px; border-radius:14px; background:var(--card); border:1px solid var(--ds-border); font-size:12.5px; color:var(--muted-foreground);
    animation:fx-bob 6s ease-in-out infinite; }
.sv-mini b{ display:block; font-size:16.5px; color:var(--foreground); }
/* seo */
.sv-serp{ position:absolute; inset:12% 4% auto 4%; padding:18px; display:grid; gap:6px; }
.sv-serp__url{ font-size:12.5px; color:var(--muted-foreground); }
.sv-serp__t{ font-size:15px; color:#1a0dab; } body.dark-mode .sv-serp__t{ color:#8ab4f8; }
.sv-serp__d{ font-size:13.5px; line-height:1.7; color:var(--muted-foreground); }
.sv-score{ position:absolute; inset-block-end:4%; inset-inline-end:6%; width:96px; height:96px; display:grid; place-content:center; text-align:center; border-radius:50%;
    background:conic-gradient(var(--ds-success) 0 94%, var(--muted-c) 0); animation:fx-bob 6s ease-in-out infinite; }
.sv-score::before{ content:''; position:absolute; inset:8px; border-radius:50%; background:var(--card); }
.sv-score b, .sv-score small{ position:relative; } .sv-score b{ font-size:21.5px; color:var(--foreground); line-height:1; } .sv-score small{ font-size:11px; color:var(--muted-foreground); }

html.no-motion .sv *, html.no-motion .sv{ animation:none !important; }
@media (prefers-reduced-motion: reduce){ .sv *, .sv{ animation:none !important; } }
@media (max-width:760px){ .sv{ min-height:260px; } }