/* ══════════════════════════════════════════════════════════════════════════
   HOMEPAGE — «Bento Showcase» (owner, 2026-10-05: a homepage with its own
   design, completely different from /features).

   Built on the LANDING's own system (em-* tokens, em-btn, em-reveal, the
   em-ico sprite, the landing fonts) — not the dashboard kit /features uses.
   Loaded only by landing/index.blade.php. Gold leads; blue and green only
   carry meaning. Neutral depth (borders, soft neutral shadows), no coloured
   glows, no cursor effects. Logical properties throughout, so LTR mirrors.
   Everything that moves stops under prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════════════ */
.hm{ --hm-gold:var(--em-gold); --hm-blue:var(--em-blue, var(--em-gold)); --hm-good:var(--em-good);
     --hm-card:var(--em-surface); --hm-card-2:var(--em-surface-2, var(--em-surface)); --hm-line:var(--em-border);
     --hm-r:28px; color:var(--em-text); }
.hm-num{ font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; }
.hm-tone-blue{ --t:var(--hm-blue); } .hm-tone-good{ --t:var(--hm-good); } .hm-tone-gold{ --t:var(--hm-gold); }
.hm-gold{ background:linear-gradient(100deg, var(--hm-gold) 0%, color-mix(in srgb,var(--hm-gold) 55%,#fff) 45%, var(--hm-gold) 70%);
          background-size:220% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--hm-gold);
          animation:hm-sheen 6s ease-in-out infinite; }
@keyframes hm-sheen{ 0%,100%{ background-position:100% 0; } 50%{ background-position:0 0; } }
.hm-sec{ padding-block:clamp(64px,9vw,128px); position:relative; }
.hm-head{ text-align:center; max-width:52rem; margin:0 auto clamp(36px,5vw,64px); }
.hm-h2{ margin:0; font-size:clamp(25px,3.48vw,46.5px); font-weight:800; line-height:1.18; letter-spacing:-.01em; }
.hm-sub{ margin:16px auto 0; max-width:40rem; font-size:clamp(14.5px,1.12vw,15.5px); line-height:1.85; color:var(--em-muted); }
.hm-center{ text-align:center; margin-top:clamp(28px,4vw,48px); }
.hm-live{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--em-muted); white-space:nowrap; }
.hm-live i{ width:8px; height:8px; border-radius:50%; background:var(--hm-good); animation:hm-blink 1.6s ease-in-out infinite; }
@keyframes hm-blink{ 50%{ opacity:.3; } }

/* ══ HERO — side by side (owner, 2026-10-05): copy on the start side, the
   shopper's view of a real store on the end side ═══════════════════════════ */
.hm-hero{ position:relative; overflow:hidden; padding-block:clamp(48px,6vw,88px) clamp(36px,5vw,64px); }
.hm-hero__in{ position:relative; z-index:1; }
.hm-hero__grid{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(28px,4vw,64px); align-items:center; }
@media (max-width:980px){ .hm-hero__grid{ grid-template-columns:minmax(0,1fr); } }
/* a perspective floor under the visual — thin lines, fading out; no glow */
.hm-hero__floor{ position:absolute; inset-inline-end:-12%; inset-block-end:-6%; width:72%; height:62%; pointer-events:none;
    background:linear-gradient(var(--hm-line) 1px, transparent 1px) 0 0/100% 44px, linear-gradient(90deg, var(--hm-line) 1px, transparent 1px) 50% 0/44px 100%;
    transform:perspective(600px) rotateX(62deg); transform-origin:50% 100%;
    mask-image:radial-gradient(ellipse at 50% 100%, #000 20%, transparent 70%); -webkit-mask-image:radial-gradient(ellipse at 50% 100%, #000 20%, transparent 70%); opacity:.75; }
.hm-h1{ margin:0; font-size:clamp(31.5px,4.14vw,61px); font-weight:800; line-height:1.1; letter-spacing:-.02em; }
/* Arabic needs room for its ascenders and descenders — at 1.1 the lines touched (owner, 2026-10-15);
   negative tracking also pulls joined Arabic letters into each other. */
[dir="rtl"] .hm-h1, .hm-h1:lang(ar){ line-height:1.38; letter-spacing:0; }
.hm-w{ display:inline-block; }
.hm-h1 .hm-w{ animation:hm-rise .9s cubic-bezier(.2,.8,.2,1) backwards; }
.hm-h1 .hm-w:nth-of-type(2){ animation-delay:.07s; } .hm-h1 .hm-w:nth-of-type(3){ animation-delay:.14s; } .hm-h1 .hm-w:nth-of-type(4){ animation-delay:.21s; }
.hm-h1 .hm-gold .hm-w:nth-child(1){ animation-delay:.18s; } .hm-h1 .hm-gold .hm-w:nth-child(2){ animation-delay:.26s; } .hm-h1 .hm-gold .hm-w:nth-child(3){ animation-delay:.34s; }
@keyframes hm-rise{ from{ opacity:0; transform:translateY(.5em); filter:blur(6px); } to{ opacity:1; transform:none; filter:none; } }
.hm-gold .hm-w{ background:inherit; -webkit-background-clip:text; background-clip:text; }
/* the gradient only paints inside the word's box — let it reach the descenders (ي ج) without moving the line (2026-10-15) */
.hm-gold .hm-w{ padding-block:.1em .22em; margin-block:-.1em -.22em; }
.hm-lead{ margin:22px 0 0; max-width:38rem; font-size:clamp(14.5px,1.12vw,15.5px); line-height:1.85; color:var(--em-muted); }
.hm-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.hm-btn{ min-width:180px; justify-content:center; }
.hm-trust{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 22px; font-size:13.5px; color:var(--em-muted); }
.hm-trust li{ display:inline-flex; align-items:center; gap:7px; }
.hm-trust svg{ width:16px; height:16px; padding:2px; border-radius:50%; color:var(--hm-good); background:color-mix(in srgb,var(--hm-good) 14%,transparent); }
.hm-close .hm-actions, .hm-close .hm-trust{ justify-content:center; }   /* the closing card stays centred */

/* the abstract visual: an isometric stack of the platform's layers
   (owner, 2026-10-05: professional, no screenshot). Drawn shapes only. */
.hm-iso-wrap{ position:relative; aspect-ratio:1/.92; container-type:inline-size; }
/* Single-column hero (≤980): the stack took the full width — ~840×780 on a 900px screen. Capped and
   centred; the chips are placed in % of this box, so they scale with it. (owner, 2026-10-06) */
@media (max-width:980px){ .hm-iso-wrap{ width:100%; max-width:560px; margin-inline:auto; } }
.hm-iso{ position:absolute; inset:16% 15% 14%; transform-style:preserve-3d; transform:rotateX(57deg) rotateZ(var(--hm-rz,-40deg)); }
[dir=rtl] .hm-iso{ --hm-rz:40deg; }
.hm-layer{ position:absolute; inset:0; border-radius:4cqw; padding:6%; transform-style:preserve-3d; background:var(--hm-card); border:1px solid var(--hm-line);
    box-shadow:0 0 0 1px color-mix(in srgb,var(--hm-gold) 10%,transparent), 0 6cqw 8cqw -3cqw rgba(0,0,0,.45); }
.hm-layer--1{ display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:auto 1fr auto; gap:5%; animation:hm-l1 7s ease-in-out infinite; }
.hm-layer--2{ display:grid; align-content:center; gap:7%; animation:hm-l2 7s ease-in-out infinite;
    background:linear-gradient(135deg, var(--hm-card), color-mix(in srgb,var(--hm-gold) 6%,var(--hm-card))); }
.hm-layer--3{ display:grid; align-content:space-between; gap:6%; animation:hm-l3 7s ease-in-out infinite;
    background:linear-gradient(135deg, color-mix(in srgb,var(--hm-gold) 14%,var(--hm-card)), var(--hm-card)); border-color:color-mix(in srgb,var(--hm-gold) 40%,var(--hm-line)); }
@keyframes hm-l1{ 0%,100%{ transform:translateZ(0); } 50%{ transform:translateZ(-1cqw); } }
@keyframes hm-l2{ 0%,100%{ transform:translateZ(11cqw); } 50%{ transform:translateZ(15cqw); } }
@keyframes hm-l3{ 0%,100%{ transform:translateZ(22cqw); } 50%{ transform:translateZ(30cqw); } }
/* layer 1 — a store, as shapes */
.hm-sk{ border-radius:1.4cqw; background:var(--hm-card-2); border:1px solid var(--hm-line); }
.hm-sk--nav{ grid-column:1/-1; height:3cqw; }
.hm-sk--hero{ grid-column:1/-1; background:linear-gradient(120deg, color-mix(in srgb,var(--hm-gold) 30%,var(--hm-card-2)), var(--hm-card-2) 70%); }
.hm-sk--p{ aspect-ratio:1; background:linear-gradient(160deg, var(--hm-card-2), color-mix(in srgb,var(--hm-blue) 14%,var(--hm-card-2))); }
/* layer 2 — orders, as rows */
.hm-row{ display:flex; align-items:center; gap:4%; padding:3% 4%; border-radius:1.4cqw; background:var(--hm-card-2); border:1px solid var(--hm-line); }
.hm-row i{ width:3cqw; height:3cqw; border-radius:50%; background:color-mix(in srgb,var(--em-muted) 40%,transparent); }
.hm-row b{ flex:1; height:1.2cqw; border-radius:99px; background:color-mix(in srgb,var(--em-muted) 30%,transparent); }
.hm-row em{ width:8cqw; height:2.4cqw; border-radius:99px; background:color-mix(in srgb,var(--t) 70%,transparent); }
/* layer 3 — profit, as a rising curve */
.hm-l3__num{ width:44%; height:4cqw; border-radius:99px; background:linear-gradient(90deg,var(--hm-gold),color-mix(in srgb,var(--hm-gold) 50%,#fff)); }
.hm-l3__chart{ width:100%; height:62%; }
.hm-l3__area{ fill:color-mix(in srgb,var(--hm-gold) 22%,transparent); }
.hm-l3__line{ fill:none; stroke:var(--hm-gold); stroke-width:3; stroke-linecap:round; stroke-dasharray:320; animation:hm-l3draw 7s ease-in-out infinite; }
@keyframes hm-l3draw{ 0%{ stroke-dashoffset:320; } 40%,100%{ stroke-dashoffset:0; } }
/* data rising through the stack: gold dots climbing the Z axis at three corners */
.hm-beam{ position:absolute; width:2cqw; height:2cqw; transform-style:preserve-3d; }
.hm-beam--a{ inset-block-start:8%; inset-inline-start:8%; } .hm-beam--b{ inset-block-end:8%; inset-inline-end:8%; } .hm-beam--c{ inset-block-start:8%; inset-inline-end:8%; }
.hm-beam i{ position:absolute; inset:0; border-radius:50%; background:var(--hm-gold); animation:hm-climb 2.8s linear infinite; }
.hm-beam--b i{ animation-delay:-.9s; } .hm-beam--c i{ animation-delay:-1.8s; }
@keyframes hm-climb{ 0%{ transform:translateZ(0); opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ transform:translateZ(30cqw); opacity:0; } }
/* every platform feature as a card around the stack (owner, 2026-10-05:
   "احترافية وأنيميشن وحركات"). Each card: a staggered entrance, its own float,
   a sweep of light, a hover lift, and a turn in the spotlight — every 18s the
   spotlight visits one card (2s apart): the card grows, its border and icon
   take the colour, a ring pulses, and its wire into the stack lights gold.
   --d = spotlight delay, --fd = float phase, --e = entrance delay. */
.hm-net{ position:absolute; inset:0; z-index:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
[dir=ltr] .hm-net{ transform:scaleX(-1); }
.hm-iso{ z-index:1; }
.hm-net__l{ fill:none; stroke:color-mix(in srgb,var(--hm-gold) 30%,var(--hm-line)); stroke-width:1.4; vector-effect:non-scaling-stroke; stroke-dasharray:3 5;
    animation:hm-wire 1.6s linear infinite, hm-wire-spot 18s ease-in-out infinite; }
@keyframes hm-wire{ to{ stroke-dashoffset:-16; } }
@keyframes hm-wire-spot{ 0%,9%,100%{ stroke:color-mix(in srgb,var(--hm-gold) 30%,var(--hm-line)); } 2%,7%{ stroke:var(--hm-gold); } }
.hm-net__l--1{ animation-delay:0s, 0s; }
.hm-net__l--2{ animation-delay:0s, 2s; }
.hm-net__l--3{ animation-delay:0s, 4s; }
.hm-net__l--4{ animation-delay:0s, 6s; }
.hm-net__l--5{ animation-delay:0s, 8s; }
.hm-net__l--6{ animation-delay:0s, 10s; }
.hm-net__l--7{ animation-delay:0s, 12s; }
.hm-net__l--8{ animation-delay:0s, 14s; }
.hm-net__l--9{ animation-delay:0s, 16s; }
.hm-net__dot{ fill:var(--hm-gold); }

.hm-fc{ position:absolute; z-index:3; display:inline-flex; align-items:center; gap:10px; padding:8px 14px 8px 8px; border-radius:16px; white-space:nowrap; overflow:hidden;
    background:var(--hm-card); border:1px solid var(--hm-line); box-shadow:0 16px 34px -20px rgba(0,0,0,.55); cursor:default;
    animation:hm-enter .8s cubic-bezier(.2,.9,.3,1.25) var(--e,0s) backwards, hm-float 7s ease-in-out var(--fd,0s) infinite, hm-spot 18s ease-in-out var(--d,0s) infinite;
    transition:translate .35s cubic-bezier(.2,.8,.2,1), border-color .3s; }
[dir=rtl] .hm-fc{ padding:8px 8px 8px 14px; }
@keyframes hm-enter{ from{ opacity:0; scale:.55; filter:blur(4px); } to{ opacity:1; scale:1; filter:none; } }
@keyframes hm-spot{ 0%,9%,100%{ scale:1; border-color:var(--hm-line); } 2%,7%{ scale:1.07; border-color:color-mix(in srgb,var(--t) 75%,transparent); } }
/* light sweep across the card */
.hm-fc::before{ content:''; position:absolute; inset:0; pointer-events:none; transform:translateX(-120%);
    background:linear-gradient(100deg, transparent 30%, color-mix(in srgb,#fff 10%,transparent) 50%, transparent 70%);
    animation:hm-sweep 18s ease-in-out var(--d,0s) infinite; }
@keyframes hm-sweep{ 0%,1%{ transform:translateX(-120%); } 6%,100%{ transform:translateX(120%); } }
/* a ring pulses around the card in the spotlight */
.hm-fc::after{ content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; border:1.5px solid var(--t); opacity:0;
    animation:hm-ring 18s ease-out var(--d,0s) infinite; }
@keyframes hm-ring{ 0%,2%{ opacity:0; transform:scale(1); } 3%{ opacity:.9; transform:scale(1); } 8%,100%{ opacity:0; transform:scale(1.25); } }
.hm-fc__ico{ position:relative; width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:11px; color:var(--t); background:color-mix(in srgb,var(--t) 15%,transparent);
    animation:hm-ico 18s ease-in-out var(--d,0s) infinite; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
@keyframes hm-ico{ 0%,9%,100%{ color:var(--t); background:color-mix(in srgb,var(--t) 15%,transparent); } 2%,7%{ color:#fff; background:var(--t); } }
.hm-fc__ico svg{ width:17px; height:17px; }
.hm-fc b{ display:block; font-size:13.5px; font-weight:800; } .hm-fc small{ display:block; margin-top:1px; font-size:11.5px; color:var(--em-muted); }
.hm-fc:hover{ translate:0 -6px; border-color:color-mix(in srgb,var(--hm-gold) 60%,transparent); }
.hm-fc:hover .hm-fc__ico{ transform:rotate(-10deg) scale(1.08); }
.hm-fc--1{ inset-block-start:0;   inset-inline-start:30%; --d:0s; --fd:-0.0s; --e:0.35s; }
.hm-fc--2{ inset-block-start:13%; inset-inline-start:-4%; --d:2s; --fd:-0.8s; --e:0.44s; }
.hm-fc--3{ inset-block-start:35%; inset-inline-start:-5%; --d:4s; --fd:-1.6s; --e:0.53s; }
.hm-fc--4{ inset-block-start:57%; inset-inline-start:-1%; --d:6s; --fd:-2.4s; --e:0.62s; }
.hm-fc--5{ inset-block-end:5%;    inset-inline-start:12%; --d:8s; --fd:-3.2s; --e:0.71s; }
.hm-fc--6{ inset-block-end:0;     inset-inline-end:28%; --d:10s; --fd:-4.0s; --e:0.80s; }
.hm-fc--7{ inset-block-end:19%;   inset-inline-end:-4%; --d:12s; --fd:-4.8s; --e:0.89s; }
.hm-fc--8{ inset-block-start:38%; inset-inline-end:-7%; --d:14s; --fd:-5.6s; --e:0.98s; }
.hm-fc--9{ inset-block-start:9%;  inset-inline-end:-4%; --d:16s; --fd:-6.4s; --e:1.07s; }
@keyframes hm-float{ 50%{ transform:translateY(-10px); } }
@media (max-width:1100px){ .hm-fc small{ display:none; } }
@media (max-width:640px){ .hm-fc{ padding:6px 10px 6px 6px; } .hm-fc__ico{ width:28px; height:28px; } .hm-fc b{ font-size:12px; } .hm-fc--3, .hm-fc--8{ display:none; } .hm-net{ display:none; } }
/* Hero chips vs the screen edge (2026-10-05). The side chips sit at −4…−7% so they float
   around the stack — fine where the page margin absorbs it (≥1280). Below that they left the
   viewport and the hero clipped them: «التقارير» read «التقار» on tablets, up to four chips were
   cut at 700–900px. Below 1280 they stop at the frame edge instead. On phones the pulled-in
   chips collided, so the ones that would overlap step out (measured: no cut, no overlap 320→1440). */
@media (max-width:1279.98px){ .hm-fc--2, .hm-fc--3, .hm-fc--4{ inset-inline-start:0; } .hm-fc--7, .hm-fc--8, .hm-fc--9{ inset-inline-end:0; } }
@media (max-width:480px){ .hm-fc--1{ display:none; } }
@media (max-width:380px){ .hm-fc--6{ display:none; } }
@media (max-width:339.98px){ .hm-fc--5, .hm-fc--9{ display:none; } }
@media (prefers-reduced-motion: reduce){ .hm-net__dot{ display:none; } }

/* providers strip */
.hm-logos{ display:flex; align-items:center; gap:18px; margin-top:clamp(28px,4vw,48px); }
.hm-logos__label{ flex:none; font-size:13px; color:var(--em-muted); }
.hm-logos__view{ flex:1; min-width:0; display:flex; overflow:hidden;
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.hm-logos__track{ flex:none; display:flex; gap:40px; padding-inline-end:40px; margin:0; list-style:none; animation:hm-mq 32s linear infinite; }
[dir=rtl] .hm-logos__track{ animation-name:hm-mq-rtl; }
.hm-logos__track li{ font-size:15px; font-weight:500; letter-spacing:.01em; color:var(--em-muted); white-space:nowrap; }
@keyframes hm-mq{ to{ transform:translateX(-100%); } } @keyframes hm-mq-rtl{ to{ transform:translateX(100%); } }

/* ══ BENTO ══════════════════════════════════════════════════════════════ */
.hm-bento{ display:grid; gap:18px; grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-areas:"store store orders pay" "store store ship ship" "ai stats stats seo" "lang domain domain prod"; }
.hm-b{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:16px; padding:24px; min-height:250px; border-radius:var(--hm-r);
    background:var(--hm-card); border:1px solid var(--hm-line); color:inherit; text-decoration:none;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s; }
a.hm-b:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--hm-gold) 45%,var(--hm-line)); }
.hm-b__txt h3{ margin:0; font-size:15.5px; font-weight:800; } .hm-b__txt p{ margin:6px 0 0; font-size:13.5px; line-height:1.7; color:var(--em-muted); }
.hm-b--store{ grid-area:store; background:linear-gradient(160deg, var(--hm-card) 40%, color-mix(in srgb,var(--hm-gold) 10%,var(--hm-card))); }
.hm-b--store .hm-b__txt h3{ font-size:clamp(18.5px,1.66vw,23px); }
.hm-b--orders{ grid-area:orders; } .hm-b--pay{ grid-area:pay; } .hm-b--ship{ grid-area:ship; } .hm-b--ai{ grid-area:ai; }
.hm-b--stats{ grid-area:stats; } .hm-b--seo{ grid-area:seo; } .hm-b--lang{ grid-area:lang; } .hm-b--domain{ grid-area:domain; } .hm-b--prod{ grid-area:prod; }
@media (max-width:1000px){ .hm-bento{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:"store store" "orders pay" "ship ship" "ai seo" "stats stats" "lang prod" "domain domain"; } }
@media (max-width:560px){ .hm-bento{ grid-template-columns:minmax(0,1fr); grid-template-areas:"store" "orders" "pay" "ship" "ai" "stats" "seo" "lang" "domain" "prod"; } }

/* store: real templates in a browser frame */
.hm-browser{ margin-top:auto; border-radius:16px; overflow:hidden; border:1px solid var(--hm-line); background:var(--hm-card-2); }
.hm-browser__bar{ display:flex; align-items:center; gap:6px; height:34px; padding-inline:12px; border-bottom:1px solid var(--hm-line); font-size:12px; color:var(--em-muted); }
.hm-browser__bar i{ width:9px; height:9px; border-radius:50%; background:var(--hm-line); }
.hm-browser__bar span{ margin-inline-start:8px; padding:2px 12px; border-radius:99px; background:var(--hm-card); }
.hm-browser__view{ position:relative; aspect-ratio:16/10; }
.hm-browser__view img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; opacity:0; transform:scale(1.04); transition:opacity .9s, transform 1.2s cubic-bezier(.2,.8,.2,1); }
.hm-browser__view img.is-on{ opacity:1; transform:none; }
/* orders list */
.hm-orders{ list-style:none; margin:auto 0 0; padding:0; display:grid; gap:8px; }
.hm-orders li{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:12px; background:var(--hm-card-2); border:1px solid var(--hm-line); font-size:13px; }
.hm-orders .hm-amt{ margin-inline-start:auto; color:var(--em-muted); white-space:nowrap; }
.hm-orders em{ font-style:normal; font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:99px; color:color-mix(in srgb,var(--t) 78%,var(--em-text)); background:color-mix(in srgb,var(--t) 14%,transparent); } /* ink pulled toward the text colour: tone-on-tint was 3.9–4.3:1 */
.hm-orders li.is-new{ animation:hm-in .6s cubic-bezier(.2,.9,.3,1.2); }
@keyframes hm-in{ from{ opacity:0; transform:translateY(-12px) scale(.97); } to{ opacity:1; transform:none; } }
/* payment check */
.hm-paid{ margin-top:auto; display:flex; align-items:center; gap:14px; }
.hm-paid__ring{ width:64px; height:64px; flex:none; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.hm-paid__ring circle{ stroke:color-mix(in srgb,var(--hm-good) 30%,transparent); stroke-width:4; }
.hm-paid__ring path{ stroke:var(--hm-good); stroke-width:5; stroke-dasharray:40; stroke-dashoffset:40; animation:hm-check 3.6s ease-in-out infinite; }
@keyframes hm-check{ 0%,15%{ stroke-dashoffset:40; } 45%,85%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:40; } }
.hm-paid b{ font-size:18.5px; color:var(--hm-good); }
/* shipping route */
.hm-route{ width:100%; height:90px; margin-top:auto; overflow:visible; }
.hm-route__path{ fill:none; stroke:var(--hm-line); stroke-width:3; stroke-dasharray:6 7; vector-effect:non-scaling-stroke; }
.hm-route__a{ fill:var(--hm-gold); } .hm-route__b{ fill:var(--hm-good); }
.hm-route__van circle{ fill:var(--hm-gold); stroke:var(--hm-card); stroke-width:3; }
/* AI */
.hm-b--ai{ background:linear-gradient(170deg, var(--hm-card) 45%, color-mix(in srgb,var(--hm-blue) 9%,var(--hm-card))); }
.hm-bot{ position:absolute; inset-block-end:-10px; inset-inline-end:-14px; width:44%; height:auto; animation:hm-float 6s ease-in-out infinite; }
.hm-bubble{ position:relative; z-index:1; margin-top:auto; max-width:62%; padding:10px 12px; border-radius:14px 14px 14px 4px; background:var(--hm-card-2); border:1px solid var(--hm-line); font-size:12.5px; min-height:3.2em; }
[dir=rtl] .hm-bubble{ border-radius:14px 14px 4px 14px; }
.hm-bubble i{ display:inline-block; width:2px; height:1em; vertical-align:-2px; margin-inline-start:2px; background:var(--hm-gold); animation:hm-blink 1s steps(2) infinite; }
/* analytics */
.hm-chart{ margin-top:auto; color:var(--hm-gold); } .hm-chart svg{ display:block; width:100%; height:120px; }
.hm-chart__line{ fill:none; stroke:var(--hm-gold); stroke-width:3; stroke-dasharray:420; animation:hm-draw 5s ease-in-out infinite; vector-effect:non-scaling-stroke; }
@keyframes hm-draw{ 0%{ stroke-dashoffset:420; } 45%,90%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:0; opacity:.4; } }
/* SEO */
.hm-serp{ margin-top:auto; display:grid; gap:6px; padding:14px; border-radius:14px; background:var(--hm-card-2); border:1px solid var(--hm-line); }
.hm-serp span{ font-size:11.5px; color:var(--em-muted); } .hm-serp b{ font-size:14px; color:#1a0dab; } html.dark .hm-serp b{ color:#8ab4f8; }
.hm-serp i{ height:7px; border-radius:99px; background:var(--hm-line); } .hm-serp i.is-short{ width:62%; }
/* Arabic first */
.hm-flip{ margin-top:auto; display:flex; align-items:center; gap:14px; perspective:600px; }
.hm-flip__card{ position:relative; width:76px; height:76px; transform-style:preserve-3d; animation:hm-flip 5s ease-in-out infinite; }
.hm-flip__card b{ position:absolute; inset:0; display:grid; place-items:center; border-radius:18px; font-size:33px; font-weight:800; backface-visibility:hidden;
    background:color-mix(in srgb,var(--hm-gold) 14%,var(--hm-card-2)); color:var(--hm-gold); border:1px solid var(--hm-line); }
.hm-flip__card b:last-child{ transform:rotateY(180deg); }
@keyframes hm-flip{ 0%,40%{ transform:rotateY(0); } 50%,90%{ transform:rotateY(180deg); } 100%{ transform:rotateY(360deg); } }
.hm-flip small{ font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--em-muted); direction:ltr; }
/* domain */
.hm-url{ margin-top:auto; display:flex; align-items:center; gap:10px; padding:14px 18px; border-radius:99px; background:var(--hm-card-2); border:1px solid var(--hm-line); font-size:14.5px; direction:ltr; }
.hm-url svg{ width:18px; height:18px; color:var(--hm-good); flex:none; }
.hm-url i{ width:2px; height:1.1em; background:var(--hm-gold); animation:hm-blink 1s steps(2) infinite; }
/* products */
.hm-prod{ margin-top:auto; display:flex; align-items:center; gap:14px; }
.hm-prod img{ width:72px; height:72px; object-fit:cover; border-radius:16px; }
.hm-prod > span{ flex:1; min-width:0; display:grid; gap:6px; } .hm-prod b{ font-size:14px; } .hm-prod small{ font-size:12px; color:var(--em-warn); font-weight:700; }
.hm-stock{ display:block; height:7px; border-radius:99px; background:var(--hm-line); overflow:hidden; }
.hm-stock i{ display:block; height:100%; width:18%; border-radius:inherit; background:var(--em-warn); animation:hm-stock 4s ease-in-out infinite; }
@keyframes hm-stock{ 0%{ width:70%; } 60%,100%{ width:14%; } }

/* ══ STEPS ══════════════════════════════════════════════════════════════ */
.hm-steps{ position:relative; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.hm-steps__rail{ position:absolute; inset-inline:4%; inset-block-start:calc(clamp(64px,7vw,104px) * .9 + 4px); height:2px; background:var(--hm-line); }   /* at the icons' centre line */
.hm-steps__rail i{ position:absolute; inset-block:0; inset-inline-start:0; width:calc(var(--hm-p,0) * 100%); background:linear-gradient(90deg,var(--hm-gold),color-mix(in srgb,var(--hm-gold) 60%,#fff)); transition:width .2s linear; }
[dir=rtl] .hm-steps__rail i{ background:linear-gradient(270deg,var(--hm-gold),color-mix(in srgb,var(--hm-gold) 60%,#fff)); }
.hm-step{ position:relative; text-align:start; }
.hm-step__n{ display:block; font-size:clamp(53px,5.8vw,86px); font-weight:800; line-height:.9; color:transparent; -webkit-text-stroke:1.5px color-mix(in srgb,var(--hm-gold) 70%,transparent); }
.hm-step__ico{ position:relative; z-index:1; margin-top:-22px; width:52px; height:52px; display:grid; place-items:center; border-radius:16px; background:var(--hm-card); border:1px solid var(--hm-line); color:var(--hm-gold); }
.hm-step__ico svg{ width:24px; height:24px; }
.hm-step h3{ margin:18px 0 0; font-size:16.5px; font-weight:800; } .hm-step p{ margin:8px 0 0; font-size:14px; line-height:1.85; color:var(--em-muted); }
@media (max-width:900px){ .hm-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:40px; } .hm-steps__rail{ display:none; } }
@media (max-width:520px){ .hm-steps{ grid-template-columns:minmax(0,1fr); } }

/* ══ TEMPLATES WALL ═════════════════════════════════════════════════════ */
.hm-wall{ overflow:hidden; perspective:1600px; padding-block:20px 40px; mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.hm-wall__plane{ display:flex; width:max-content; transform:rotateX(12deg) rotateZ(-3deg); transform-style:preserve-3d; }
[dir=rtl] .hm-wall__plane{ transform:rotateX(12deg) rotateZ(3deg); }
.hm-wall__track{ flex:none; display:flex; gap:24px; padding-inline-end:24px; animation:hm-mq 60s linear infinite; }
[dir=rtl] .hm-wall__track{ animation-name:hm-mq-rtl; }
.hm-wall:hover .hm-wall__track{ animation-play-state:paused; }
.hm-tpl{ position:relative; display:block; width:clamp(280px,30vw,420px); border-radius:20px; overflow:hidden; background:var(--hm-card); border:1px solid var(--hm-line);
    box-shadow:0 30px 60px -34px rgba(0,0,0,.55); text-decoration:none; transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.hm-tpl:hover{ transform:translateY(-8px) scale(1.02); }
.hm-tpl__bar{ display:flex; gap:6px; padding:10px 12px; } .hm-tpl__bar i{ width:9px; height:9px; border-radius:50%; background:var(--hm-line); }
.hm-tpl img{ display:block; width:100%; aspect-ratio:3/2; object-fit:cover; object-position:top; }
.hm-tpl__name{ position:absolute; inset-block-end:12px; inset-inline-start:12px; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:99px;
    font-size:13px; font-weight:700; color:#fff; background:rgba(15,16,19,.82); }
.hm-tpl__name svg{ width:13px; height:13px; }

/* ══ AI CHAT ════════════════════════════════════════════════════════════ */
.hm-ai{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center; }
.hm-ai__copy{ text-align:start; } .hm-ai__copy .hm-sub{ margin-inline:0; } .hm-ai__copy .em-btn{ margin-top:26px; }
@media (max-width:900px){ .hm-ai{ grid-template-columns:minmax(0,1fr); } }
.hm-chat{ border-radius:var(--hm-r); overflow:hidden; background:var(--hm-card); border:1px solid var(--hm-line); box-shadow:0 40px 80px -40px rgba(0,0,0,.5); }
.hm-chat__head{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--hm-line); }
.hm-chat__head img{ width:40px; height:40px; object-fit:contain; border-radius:12px; background:var(--hm-card-2); }
.hm-chat__head b{ flex:1; font-size:14px; }
.hm-chat__body{ padding:20px; display:grid; gap:12px; min-height:390px; align-content:start; }
.hm-msg{ margin:0; max-width:82%; padding:12px 16px; border-radius:18px; font-size:14px; line-height:1.7; }
.hm-msg--me{ justify-self:end; background:var(--hm-gold); color:var(--em-gold-ink); border-end-end-radius:6px; }
.hm-msg--ai{ justify-self:start; background:var(--hm-card-2); border:1px solid var(--hm-line); border-end-start-radius:6px; }
.hm-typing{ display:flex; gap:5px; } .hm-typing i{ width:7px; height:7px; border-radius:50%; background:var(--em-muted); animation:hm-dot 1.2s ease-in-out infinite; }
.hm-typing i:nth-child(2){ animation-delay:.15s; } .hm-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes hm-dot{ 50%{ transform:translateY(-4px); opacity:.4; } }
.hm-result{ display:grid; gap:8px; } .hm-result b{ font-size:13.5px; }
.hm-result__row{ display:flex; justify-content:space-between; gap:14px; font-size:13px; color:var(--em-muted); }
.hm-result__row em{ font-style:normal; color:var(--em-text); display:flex; gap:5px; align-items:center; }
.hm-sw{ width:16px; height:16px; border-radius:5px; } .hm-sw--1{ background:#1f2937; } .hm-sw--2{ background:var(--hm-gold); } .hm-sw--3{ background:#e5e7eb; }
/* chat playback: steps appear in order (home.js toggles .is-on); static when JS is off */
html.hm-js .hm-chat [data-hm-step]{ opacity:0; transform:translateY(10px); transition:opacity .45s, transform .45s cubic-bezier(.2,.8,.2,1); }
html.hm-js .hm-chat [data-hm-step].is-on{ opacity:1; transform:none; }
html.hm-js .hm-chat .hm-typing.is-done{ display:none; }

/* ══ CLOSE ══════════════════════════════════════════════════════════════ */
.hm-close{ position:relative; isolation:isolate; text-align:center; padding:clamp(48px,7vw,96px) clamp(20px,5vw,64px); border-radius:36px; background:var(--hm-card); overflow:hidden; }
.hm-close::before{ content:''; position:absolute; z-index:-2; inset:-50%; background:conic-gradient(from 0deg, transparent 0 70%, var(--hm-gold) 85%, transparent 100%);
    animation:hm-spin 7s linear infinite; }
.hm-close::after{ content:''; position:absolute; z-index:-1; inset:2px; border-radius:34px; background:var(--hm-card); }
@keyframes hm-spin{ to{ transform:rotate(360deg); } }

/* ══ reduced motion ═════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
    .hm *, .hm *::before, .hm *::after{ animation:none !important; transition:none !important; }
    .hm-logos__track[aria-hidden], .hm-wall__track[aria-hidden]{ display:none; }
    .hm-logos__view{ flex-wrap:wrap; } .hm-wall__plane{ transform:none; } .hm-wall__track{ flex-wrap:wrap; justify-content:center; }
    html.hm-js .hm-chat [data-hm-step]{ opacity:1; transform:none; } html.hm-js .hm-chat .hm-typing{ display:none; }
}
/* «الطلبات بتوصل» rows (2026-10-22, owner «اظبط دا»): the status pill wrapped to two lines («قيد / التجهيز») and
   squeezed the order number. The pill and the number never wrap now; the amount takes the slack. Weight ≤ 500. */
.hm-orders li{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; min-width:0; }
.hm-orders li > bdi.hm-num{ white-space:nowrap; font-weight:500; }
.hm-orders .hm-amt{ justify-self:end; overflow:hidden; text-overflow:ellipsis; }
.hm-orders em{ white-space:nowrap; font-weight:500; justify-self:end; line-height:1.6; }
.hm-orders{ container:hmo / inline-size; }
@container hmo (max-width: 260px){ .hm-orders li{ gap:6px; padding:8px 9px; font-size:12px; } .hm-orders em{ font-size:10.5px; padding:2px 7px; } }
@media (max-width: 380px){ .hm-orders li{ gap:8px; padding:8px 10px; font-size:12.5px; } .hm-orders em{ font-size:11px; padding:2px 8px; } }