/* Cliclick Technology Egypt — site styles */
:root{
  --bg:#fbf9fa;
  --bg-2:#f3eef1;
  --ink:#140c12;
  --ink-2:#5b5259;
  --ink-3:#8a8189;
  --line:rgba(20,12,18,.12);
  --accent:#8e2f72;
  --accent-ink:#ffffff;
  --accent-soft:rgba(142,47,114,.10);
  --slate:#8a9099;
  --spark:#c98400;
  --spark-fill:#ffb829;
  --code-bg:#140c12;
  --code-ink:#efe7ec;
  --logo-light:block;
  --logo-dark:none;
  --f-lat:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-ar:"Alexandria","Segoe UI","Tahoma",sans-serif;
  --f-word:"Fredoka","Baloo 2",ui-rounded,system-ui,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --f-body:var(--f-lat);
  --max:1280px;
  --gut:clamp(16px,4vw,48px);
  --r:24px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#040304;--bg-2:#0e0a0d;--ink:#ffffff;--ink-2:#b8b0b6;--ink-3:#8c858b;
    --line:rgba(255,255,255,.12);--accent:#d66eb8;--accent-ink:#1a0714;--accent-soft:rgba(214,110,184,.12);
    --slate:#9aa1aa;--spark:#ffb829;--code-bg:#0e0a0d;--code-ink:#efe7ec;
    --logo-light:none;--logo-dark:block;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#040304;--bg-2:#0e0a0d;--ink:#ffffff;--ink-2:#b8b0b6;--ink-3:#8c858b;
  --line:rgba(255,255,255,.12);--accent:#d66eb8;--accent-ink:#1a0714;--accent-soft:rgba(214,110,184,.12);
  --slate:#9aa1aa;--spark:#ffb829;--code-bg:#0e0a0d;--code-ink:#efe7ec;
  --logo-light:none;--logo-dark:block;
}
:root[lang="ar"]{--f-body:var(--f-ar)}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-weight:300;font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;transition:background .4s,color .4s}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.mono{font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
:root[lang="ar"] .mono{font-family:var(--f-ar);letter-spacing:0;font-size:13px;text-transform:none}
.accent{color:var(--accent)}
.spark{color:var(--spark)}
h1,h2,h3{font-weight:400;margin:0;text-wrap:balance}
p{margin:0}

/* ---------- Nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:76px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:40px;width:auto}
.brand .l{display:var(--logo-light)}
.brand .d{display:var(--logo-dark)}
.links{display:flex;gap:28px;margin-inline-start:auto;list-style:none;padding:0;margin-block:0}
.links a{text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);transition:color .2s}
:root[lang="ar"] .links a{letter-spacing:0;font-size:14px;font-weight:500;text-transform:none}
.links a:hover{color:var(--ink)}
.tools{display:flex;align-items:center;gap:8px}
.icon-btn{height:40px;min-width:40px;padding-inline:12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font:600 13px/1 var(--f-lat);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:border-color .2s,background .2s}
.icon-btn:hover{border-color:var(--ink-3)}
.icon-btn .ar{font-family:var(--f-ar);font-weight:500}
.icon-btn svg{width:18px;height:18px}
.sun{display:var(--logo-dark)}.moon{display:var(--logo-light)}
.menu-btn{display:none}

.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding-inline:26px;border-radius:24px;border:1px solid transparent;font:600 14px/1 var(--f-lat);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .2s,background .2s,border-color .2s,color .2s;white-space:nowrap}
:root[lang="ar"] .btn{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-size:15px;font-weight:500}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{box-shadow:0 12px 30px -12px var(--accent)}
.mag{transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s,box-shadow .3s}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(4px)}
:root[dir="rtl"] .btn .arr{transform:scaleX(-1)}
:root[dir="rtl"] .btn:hover .arr{transform:scaleX(-1) translateX(4px)}
.nav .btn{height:40px;padding-inline:18px;font-size:12px}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden}
.hero .wrap{padding-block:clamp(12px,3vw,40px) clamp(56px,7vw,96px)}
.stage{position:relative;width:100%;aspect-ratio:1280/400;max-width:100%}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.stage .hint{position:absolute;inset-inline-end:0;bottom:2%}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px clamp(40px,6vw,96px);align-items:end;margin-top:clamp(8px,2vw,28px)}
.hero h1{font-size:clamp(44px,6.6vw,104px);line-height:.92;letter-spacing:-.04em;margin-top:20px}
:root[lang="ar"] .hero h1{letter-spacing:0;line-height:1.15;font-size:clamp(40px,5.6vw,86px);font-weight:300}
.hero h1 em{font-style:normal;color:var(--accent)}
.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.split .w>span{display:inline-block;animation:rise 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d)*70ms + 250ms)}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.hero .lead{font-size:clamp(18px,1.5vw,20px);font-weight:200;color:var(--ink-2);max-width:42ch}
:root[lang="ar"] .hero .lead{font-weight:300}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .stack{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px}
.hero-side{animation:fadeUp 1s .7s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.pill{display:inline-flex;align-items:center;height:32px;padding-inline:14px;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:400;color:var(--ink-2);white-space:nowrap}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--accent);margin-inline-end:8px;flex:none}
.pill.s i{background:var(--spark-fill)}

/* ---------- Cursor follower + click ripples ---------- */
.cur{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1.5px solid var(--accent);pointer-events:none;z-index:90;opacity:0;transition:width .25s,height .25s,margin .25s,opacity .3s,background .25s}
.cur.on{opacity:.9}
.cur.big{width:64px;height:64px;margin:-32px 0 0 -32px;background:var(--accent-soft)}
.rip{position:fixed;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid var(--accent);pointer-events:none;z-index:89;animation:rip .7s ease-out forwards}
.rip.y{border-color:var(--spark-fill);animation-delay:.08s;opacity:0}
@keyframes rip{0%{transform:scale(1);opacity:.9}100%{transform:scale(7);opacity:0}}

/* ---------- Ticker ---------- */
.ticker{border-block:1px solid var(--line);overflow:hidden;padding-block:22px}
.ticker .track{display:flex;gap:56px;width:max-content;animation:tick 42s linear infinite}
.ticker span{font-size:clamp(22px,2.4vw,32px);font-weight:200;white-space:nowrap;display:inline-flex;align-items:center;gap:56px;color:var(--ink-2)}
.ticker span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.ticker span:nth-child(3n)::after{background:var(--spark-fill)}
@keyframes tick{to{transform:translateX(-50%)}}
:root[dir="rtl"] .ticker .track{animation-name:tickr}
@keyframes tickr{to{transform:translateX(50%)}}

/* ---------- Sections ---------- */
section{scroll-margin-top:84px}
.sec{padding-block:clamp(80px,11vw,150px)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 64px;align-items:end;margin-bottom:clamp(48px,6vw,80px)}
.sec-head h2{font-size:clamp(38px,5.4vw,80px);line-height:.95;letter-spacing:-.035em;margin-top:18px}
:root[lang="ar"] .sec-head h2{letter-spacing:0;line-height:1.2;font-weight:300}
.sec-head p{color:var(--ink-2);font-weight:200;max-width:46ch;font-size:19px}
:root[lang="ar"] .sec-head p{font-weight:300}

/* Services carousel (oval cards) */
.cf{position:relative;margin-top:-12px}
.cf-stage{position:relative;height:var(--ch,300px);perspective:1400px;overflow:hidden;padding-block:20px;box-sizing:content-box;touch-action:pan-y;user-select:none}
.card{position:absolute;left:50%;top:20px;width:var(--cw,640px);height:var(--ch,260px);border-radius:999px;background:var(--bg-2);border:1px solid var(--line);display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);padding-inline:clamp(14px,1.6vw,22px) clamp(28px,4vw,56px);transition:transform .9s cubic-bezier(.2,.75,.2,1),opacity .9s,border-color .5s,box-shadow .6s,background .5s;cursor:pointer;will-change:transform;transform-style:preserve-3d}
:root[dir="rtl"] .card{padding-inline:clamp(14px,1.6vw,22px) clamp(28px,4vw,56px)}
.card.active{border-color:var(--accent);box-shadow:0 30px 80px -30px var(--accent),0 0 0 1px var(--accent) inset;cursor:default}
.card .art{flex:none;width:calc(var(--ch,260px) - clamp(28px,3.2vw,44px));aspect-ratio:1;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;position:relative;overflow:hidden}
.card .art::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px dashed var(--accent);opacity:.35;animation:spin 18s linear infinite}
.card .art svg{width:74%;height:74%;overflow:visible}
.card .txt{min-width:0;transition:opacity .6s}
.card:not(.active) .txt{opacity:.35}
.card small{display:block;color:var(--accent);margin-bottom:10px}
.card h3{font-size:clamp(22px,2.5vw,36px);line-height:1.05;letter-spacing:-.025em;font-weight:400}
:root[lang="ar"] .card h3{letter-spacing:0;line-height:1.35;font-weight:400}
.card p{color:var(--ink-2);font-weight:200;font-size:clamp(14px,1.2vw,17px);margin-top:10px}
:root[lang="ar"] .card p{font-weight:300}
.cf-bar{display:flex;align-items:center;gap:12px;margin-top:18px;justify-content:center}
.cf-arrow{flex:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.cf-arrow:hover{border-color:var(--accent);background:var(--accent-soft)}
.cf-arrow:active{transform:scale(.92)}
.cf-arrow svg{width:20px;height:20px}
:root[dir="rtl"] .cf-arrow svg{transform:scaleX(-1)}
.cf-tabs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;min-width:0}
.cf-tab{position:relative;overflow:hidden;height:36px;padding-inline:14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink-2);font:400 13px/1 var(--f-body);cursor:pointer;transition:color .3s,border-color .3s}
.cf-tab:hover{color:var(--ink)}
.cf-tab.on{color:var(--accent-ink);border-color:var(--accent);background:var(--accent)}
.cf-tab.on::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--spark-fill);transform-origin:left;animation:prog var(--dur,5s) linear forwards}
:root[dir="rtl"] .cf-tab.on::after{transform-origin:right}
.cf.paused .cf-tab.on::after{animation-play-state:paused}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.cf-detail{max-width:720px;margin:28px auto 0;text-align:center;min-height:120px}
.cf-detail p{font-size:clamp(17px,1.5vw,20px);font-weight:200;color:var(--ink-2)}
:root[lang="ar"] .cf-detail p{font-weight:300}
.cf-detail .tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:16px}
.stack-row{display:flex;flex-wrap:wrap;gap:8px 10px;justify-content:center;align-items:center;margin-top:14px}
.stackc{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.stackc code,.stack code{font:500 12px var(--f-mono);padding:5px 10px;border-radius:8px;background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2)}
.typing{animation:tdot 1.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.typing.t2{animation-delay:.15s}.typing.t3{animation-delay:.3s}
@keyframes tdot{0%,60%,100%{transform:translateY(0);opacity:.6}30%{transform:translateY(-6px);opacity:1}}
.spark4{transform-box:fill-box;transform-origin:center;animation:pop 2.4s ease-in-out infinite}
.wave-a{fill:none;stroke:var(--spark-fill);stroke-width:4;stroke-linecap:round;animation:blink 1.4s ease-in-out infinite}
.wave-a.w2{animation-delay:.3s}
.cf-detail.swap{animation:swap .6s ease}
@keyframes swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* illustration strokes/fills */
.card svg .sa,.card svg .ss{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.card svg .sa{stroke:var(--accent)}
.card svg .ss{stroke:var(--slate);stroke-width:3}
.card svg .fa{fill:var(--accent)}.card svg .fs{fill:var(--slate)}.card svg .fy{fill:var(--spark-fill)}
.card svg .fp{fill:#fffdf8;stroke:var(--slate);stroke-width:1.5}
.card svg .fbg{fill:var(--bg)}
.erp rect{transform-box:fill-box;transform-origin:center;animation:mod 3.2s ease-in-out infinite}
.erp rect:nth-child(2){animation-delay:.4s}.erp rect:nth-child(3){animation-delay:1.2s}.erp rect:nth-child(4){animation-delay:.8s}
@keyframes mod{0%,100%{transform:scale(1);opacity:1}40%{transform:scale(.72) rotate(12deg);opacity:.55}}
.ecg,.ring-ecg{fill:none;stroke:var(--spark-fill);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:120;animation:ecg 2.2s linear infinite}
@keyframes ecg{from{stroke-dashoffset:240}to{stroke-dashoffset:0}}
.bar{fill:var(--slate);transform-box:fill-box;transform-origin:bottom;animation:grow 2.8s ease-in-out infinite}
.bar.b3{fill:var(--accent)}.b2{animation-delay:.2s}.b3{animation-delay:.4s}
@keyframes grow{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.trend{fill:none;stroke:var(--spark-fill);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:110;animation:draw 2.8s ease-in-out infinite}
@keyframes draw{0%{stroke-dashoffset:110}50%,100%{stroke-dashoffset:0}}
.dotp{animation:pop 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pop{0%,45%{transform:scale(0)}60%{transform:scale(1.3)}75%,100%{transform:scale(1)}}
.line{fill:var(--slate);transform-box:fill-box;transform-origin:left;animation:type 3s ease-in-out infinite}
.line.l1{fill:var(--accent)}.l2{animation-delay:.35s}.l3{animation-delay:.7s}
@keyframes type{0%{transform:scaleX(0)}40%,80%{transform:scaleX(1)}100%{transform:scaleX(0);opacity:0}}
.packet{fill:var(--spark-fill)}
.env{animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.badge{transform-box:fill-box;transform-origin:center;animation:pop 2.6s ease-in-out infinite}
.led{fill:#15b86e;animation:blink 1.4s infinite}.led.d2{animation-delay:.45s;fill:var(--spark-fill)}.led.d3{animation-delay:.9s}
.paper{animation:print 3s ease-in-out infinite}
@keyframes print{0%{transform:translateY(46px)}60%,85%{transform:translateY(0)}100%{transform:translateY(0);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
.code-sl{fill:none;stroke:var(--spark-fill);stroke-width:4;stroke-linecap:round;stroke-dasharray:60;animation:draw 2.6s ease-in-out infinite}
.caret{fill:var(--accent);animation:blink 1s steps(2) infinite}
.orbit-path{fill:none;stroke:var(--slate);stroke-width:1.5;stroke-dasharray:3 6;opacity:.7}
.pulse-r{fill:none;stroke:var(--accent);stroke-width:3;transform-box:fill-box;transform-origin:center;animation:pring 2.4s ease-out infinite}
.pulse-r.p2{animation-delay:1.2s}
@keyframes pring{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.7);opacity:0}}

/* Odoo */
.odoo{background:var(--bg-2)}
.odoo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.apps{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.apps .pill{height:40px;font-size:15px;padding-inline:18px;background:var(--bg)}
.apps .pill.plus{border-style:dashed;color:var(--accent);border-color:var(--accent)}
.odoo h3{font-size:clamp(26px,2.6vw,36px);letter-spacing:-.02em;line-height:1.1}
:root[lang="ar"] .odoo h3{letter-spacing:0;line-height:1.35;font-weight:300}
.odoo .sub{color:var(--ink-2);font-weight:200;margin-top:14px;max-width:48ch}
:root[lang="ar"] .odoo .sub{font-weight:300}
.custom{display:grid;gap:0;margin-top:28px;border-top:1px solid var(--line)}
.mod{padding-block:26px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 20px}
.mod .dot{width:44px;height:44px;border-radius:14px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;grid-row:span 2}
.mod .dot svg{width:22px;height:22px}
.mod h4{margin:0;font-size:21px;font-weight:400}
.mod p{color:var(--ink-2);font-weight:200;font-size:16px}
:root[lang="ar"] .mod p{font-weight:300}
.versions{margin-top:40px;display:grid;gap:14px}
.vline{position:relative;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.vline i{position:absolute;inset-block:0;width:30%;background:linear-gradient(90deg,transparent,var(--accent),var(--spark-fill),transparent);animation:scan 3.4s ease-in-out infinite}
@keyframes scan{from{inset-inline-start:-30%}to{inset-inline-start:100%}}

/* Support band */
.band{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 15% 50%,var(--accent-soft),transparent 60%),var(--bg)}
.band-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,110px);align-items:center}
.ring{width:100%;max-width:420px;justify-self:center}
.ring svg{width:100%;height:auto;display:block;overflow:visible}
.ring-t{font:500 11.5px var(--f-mono);letter-spacing:.2em;fill:var(--ink-2);transform-origin:100px 100px;animation:spin 26s linear infinite}
:root[lang="ar"] .ring-t{font-family:var(--f-ar);letter-spacing:0;font-size:13px}
.ring-core{fill:var(--accent);transform-origin:100px 100px;animation:breathe 3s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.ring-ecg{stroke:var(--accent-ink)}
.band h2{font-size:clamp(36px,4.8vw,72px);line-height:.98;letter-spacing:-.035em;margin-top:18px}
:root[lang="ar"] .band h2{letter-spacing:0;line-height:1.25;font-weight:300}
.band p{color:var(--ink-2);font-weight:200;margin-top:22px;max-width:52ch;font-size:19px}
:root[lang="ar"] .band p{font-weight:300}
.checks{list-style:none;padding:0;margin:28px 0 34px;display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:baseline}
.checks li::before{content:"";flex:none;width:18px;height:10px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg) translateY(-3px)}

/* POS */
.pos-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,110px);align-items:center}
.ticket{width:100%;max-width:420px;margin-inline:auto;background:#fffdf8;color:#1b1418;border-radius:18px;padding:30px 28px 34px;font-family:var(--f-mono);font-size:13.5px;box-shadow:0 40px 80px -30px rgba(142,47,114,.45),0 0 0 1px rgba(0,0,0,.04);transform:rotate(-2.5deg);position:relative;direction:ltr}
:root[dir="rtl"] .ticket{transform:rotate(2.5deg)}
.ticket::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:20px;background:radial-gradient(circle at 10px -2px,transparent 10px,#fffdf8 11px) repeat-x;background-size:20px 20px}
.ticket .t-head{text-align:center;border-bottom:1px dashed #cfc3ca;padding-bottom:16px;margin-bottom:14px}
.ticket .t-head b{display:block;font-size:15px;letter-spacing:.1em}
.ticket .t-meta{display:flex;justify-content:space-between;color:#6d6269;font-size:12px;margin-bottom:12px}
.ticket .row{display:flex;justify-content:space-between;gap:12px;padding-block:5px}
.ticket .row span:first-child{display:flex;gap:10px}
.ticket .row .q{color:#8e2f72;font-weight:600}
.ticket .sep{border-top:1px dashed #cfc3ca;margin-block:12px}
.ticket .tot{font-size:17px;font-weight:600}
.ticket .ar-name{font-family:var(--f-ar);font-size:12px;color:#8a7f86;display:block}
.ticket .kds{margin-top:18px;display:flex;align-items:center;gap:8px;font-size:12px;color:#15846e}
.ticket .kds i{width:8px;height:8px;border-radius:50%;background:#15846e;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
.feat{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;border-top:1px solid var(--line)}
.feat li{padding-block:20px;border-bottom:1px solid var(--line)}
.feat b{display:block;font-weight:400;font-size:19px}
.feat span{color:var(--ink-2);font-weight:200;font-size:15.5px}
:root[lang="ar"] .feat span{font-weight:300}

.sec-head.flat{display:block;margin-bottom:0}
.sub-lead{color:var(--ink-2);font-weight:200;margin-top:22px;max-width:46ch}
:root[lang="ar"] .sub-lead{font-weight:300}
.js .ticket.wait .pr{opacity:0;transform:translateY(-6px)}
.ticket .pr{transition:opacity .45s,transform .45s;transition-delay:calc(var(--i)*180ms)}
.ticket{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* Process */
/* Process timeline */
.tl{position:relative;--p:0}
.tl-track{position:absolute;top:28px;left:12.5%;right:12.5%;height:2px;background:var(--line);border-radius:2px}
.tl-fill{position:absolute;inset-block:0;inset-inline-start:0;width:calc(var(--p)*100%);background:linear-gradient(90deg,var(--accent),var(--spark-fill));border-radius:2px}
:root[dir="rtl"] .tl-fill{background:linear-gradient(270deg,var(--accent),var(--spark-fill))}
.tl-dot{position:absolute;top:50%;inset-inline-start:calc(var(--p)*100%);width:14px;height:14px;margin:-7px 0 0;margin-inline-start:-7px;border-radius:50%;background:var(--spark-fill);box-shadow:0 0 0 6px rgba(255,184,41,.18),0 0 24px 4px rgba(255,184,41,.45)}
.tl-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;position:relative}
.tl-step{display:grid;justify-items:center;align-content:start;gap:22px}
.tl-node{position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--bg-2);border:2px solid var(--line);font:500 15px var(--f-mono);color:var(--ink-3);transition:background .4s,border-color .4s,color .4s,transform .4s}
.tl-node::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--accent);opacity:0}
.tl-step.on .tl-node{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:scale(1.06)}
.tl-step.on .tl-node::after{animation:nodePulse 2.4s ease-out infinite}
@keyframes nodePulse{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.35);opacity:0}}
.tl-card{width:100%;height:100%;display:grid;align-content:start;gap:12px;padding:26px 24px 22px;border-radius:26px;background:var(--bg);border:1px solid var(--line);text-align:start;transition:border-color .5s,box-shadow .5s,transform .5s}
.tl-step.on .tl-card{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 24px 50px -30px var(--accent);transform:translateY(-4px)}
.tl-ic{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);transition:background .4s,color .4s}
.tl-step.on .tl-ic{background:var(--accent);color:var(--accent-ink)}
.tl-ic svg{width:22px;height:22px}
.tl-card h3{font-size:clamp(22px,2vw,27px);letter-spacing:-.02em;line-height:1.15;margin-top:4px}
:root[lang="ar"] .tl-card h3{letter-spacing:0;font-weight:400;line-height:1.4}
.tl-card p{color:var(--ink-2);font-weight:300;font-size:16px;line-height:1.6}
.tl-get{margin-top:6px;padding-top:14px;border-top:1px dashed var(--line);display:grid;gap:6px}
.tl-get span{display:flex;gap:8px;align-items:baseline;font-size:15px;font-weight:400;color:var(--ink)}
.tl-get span::before{content:"";flex:none;width:12px;height:7px;border-left:2px solid var(--spark);border-bottom:2px solid var(--spark);transform:rotate(-45deg) translateY(-2px)}

/* Why */
.why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,72px) clamp(40px,6vw,96px)}
.why div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 20px}
.why svg{width:28px;height:28px;color:var(--accent);grid-row:span 2;margin-top:4px}
.why h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;line-height:1.2}
:root[lang="ar"] .why h3{letter-spacing:0;font-weight:400;line-height:1.4}
.why p{color:var(--ink-2);font-weight:200;font-size:17px;max-width:44ch}
:root[lang="ar"] .why p{font-weight:300}

/* Contact */
.contact{background:var(--bg-2)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,110px);align-items:start}
.contact h2{font-size:clamp(52px,8vw,124px);line-height:.88;letter-spacing:-.045em;margin-top:18px}
:root[lang="ar"] .contact h2{letter-spacing:0;line-height:1.15;font-weight:300;font-size:clamp(46px,6.6vw,100px)}
.contact h2 em{font-style:normal;color:var(--accent)}
.contact .lead{color:var(--ink-2);font-weight:200;margin-top:24px;max-width:38ch}
:root[lang="ar"] .contact .lead{font-weight:300}
.info{margin-top:44px;display:grid;gap:0;border-top:1px solid var(--line)}
.info div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.info .v{font-size:17px;direction:ltr;unicode-bidi:isolate;user-select:all}
.info .v.addr{direction:inherit}
.v-wrap{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.info a.v{text-decoration:none;color:var(--ink)}
.info a.v:hover{color:var(--accent)}
.copy{height:30px;padding-inline:12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink-2);font:500 12px var(--f-body);cursor:pointer}
.copy:hover{border-color:var(--accent);color:var(--accent)}
.ct-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.form{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.field{display:grid;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-size:13px;font-weight:500;color:var(--ink-2)}
.field input,.field select,.field textarea{width:100%;font:300 17px/1.4 var(--f-body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:14px 16px;transition:border-color .2s,box-shadow .2s;appearance:none;-webkit-appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-inline-end:40px}
:root[dir="rtl"] .field select{background-position:22px 50%,16px 50%}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.field input[aria-invalid="true"]{border-color:#d9434e}
.hp{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
.form .actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:6px}
.form .note{font-size:14px;color:var(--ink-3)}
.status{grid-column:1/-1;border-radius:16px;padding:16px 18px;font-size:15.5px;background:var(--accent-soft);color:var(--ink)}
.status a{color:var(--accent);font-weight:500}

/* Footer */
.foot{padding-block:48px 40px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.foot img{height:34px;width:auto}
.foot .l{display:var(--logo-light)}.foot .d{display:var(--logo-dark)}
.foot small{color:var(--ink-3);font-size:14px}

/* Floating WhatsApp (fixed while scrolling, gently bobs up and down) */
.wa-float{position:fixed;inset-inline-start:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:61;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 14px 34px -10px rgba(37,211,102,.75);animation:waBob 2.6s ease-in-out infinite;transition:bottom .45s cubic-bezier(.2,.8,.2,1)}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25d366;z-index:-1;animation:waPing 2.6s ease-out infinite}
.wa-float:hover{animation-play-state:paused;background:#1ebe5b}
.wa-float:hover svg{transform:scale(1.1)}
.wa-float svg{width:32px;height:32px;transition:transform .2s}
@keyframes waBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes waPing{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(1.6);opacity:0}}
@media (max-width:760px){.wa-float{bottom:calc(86px + env(safe-area-inset-bottom,0px));width:54px;height:54px}}
@media (prefers-reduced-motion:reduce){.wa-float,.wa-float::before{animation:none}}

/* Reveal */
.rv{transition:opacity .9s ease,transform .9s ease}
.js .rv.pre{opacity:.001;transform:translateY(24px)}


/* ---------- Sound toggle ---------- */
.snd-off{display:none}
.muted .snd-on{display:none}.muted .snd-off{display:block}

/* ---------- Theme click-wave (View Transitions) ---------- */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}

/* ---------- 3D tilt ---------- */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.tilt.tilting{transition:transform .08s linear}
.mod.tilt{border-radius:18px;padding-inline:12px;margin-inline:-12px}
.mod.tilt:hover{background:var(--accent-soft)}

/* ---------- Lab ---------- */
.lab{background:transparent}
.lab-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:28px}
.lab-tab{position:relative;text-align:start;padding:18px 22px;border-radius:22px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;display:grid;gap:4px;font-family:var(--f-body);transition:border-color .3s,background .3s,transform .3s}
.lab-tab b{font-weight:400;font-size:19px}
.lab-tab span{color:var(--ink-3);font-size:14px;font-weight:300}
.lab-tab:hover{border-color:var(--ink-3)}
.lab-tab.on{border-color:var(--accent);background:var(--accent-soft)}
.lab-tab.on::before{content:"";position:absolute;inset-inline-start:22px;top:-1px;width:40px;height:3px;border-radius:3px;background:var(--accent)}
.lab-panel{border:1px solid var(--line);border-radius:32px;background:var(--bg-2);padding:clamp(20px,3vw,40px);animation:swap .5s ease}
.q{font-size:15px;color:var(--ink-2);font-weight:400;margin-block:0 12px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.chip{height:40px;padding-inline:16px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:400 14.5px/1 var(--f-body);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .25s}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chip .em{font-size:16px;line-height:1}
.rng{display:grid;gap:10px;margin-bottom:24px}
.rng label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:15px;color:var(--ink-2)}
.rng output{font:500 20px/1 var(--f-mono);color:var(--ink);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:linear-gradient(to right,var(--accent) var(--fill,50%),var(--line) var(--fill,50%));outline:none;cursor:pointer}
:root[dir="rtl"] .rng input[type=range]{background:linear-gradient(to left,var(--accent) var(--fill,50%),var(--line) var(--fill,50%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--bg);border:3px solid var(--accent);box-shadow:0 4px 14px -4px var(--accent);transition:transform .2s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--bg);border:3px solid var(--accent)}
input[type=range]:focus-visible{box-shadow:0 0 0 4px var(--accent-soft)}
.fine{font-size:13.5px;color:var(--ink-3);font-weight:300}
.fine.center{text-align:center;margin-top:14px}

.bld{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px)}
.board{min-height:340px;border-radius:24px;background:var(--bg);border:1px solid var(--line);padding:20px;display:grid;gap:18px;align-content:start;background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:18px 18px}
.grp{display:grid;gap:10px}
.grp>small{font:500 11.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
:root[lang="ar"] .grp>small{font-family:var(--f-ar);letter-spacing:0;font-size:13px;text-transform:none}
.tiles{display:flex;flex-wrap:wrap;gap:8px}
.tile{display:inline-flex;align-items:center;gap:10px;height:44px;padding-inline:8px 16px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line);font-size:14.5px;animation:tileIn .5s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:calc(var(--i)*45ms)}
.tile i{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-style:normal;font:600 12px var(--f-mono);background:var(--accent-soft);color:var(--accent)}
.tile.c{border-color:var(--accent);border-style:dashed}
.tile.c i{background:var(--accent);color:var(--accent-ink)}
.tile.s i{background:rgba(255,184,41,.18);color:var(--spark)}
@keyframes tileIn{from{opacity:0;transform:translateY(10px) scale(.85)}to{opacity:1;transform:none}}
.bld-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.calc-out{display:grid;gap:14px}
.calc-how{margin-top:8px;border:1px dashed var(--line);border-radius:20px;padding:16px 18px;background:var(--bg)}
.calc-how ol{margin:10px 0 12px;padding-inline-start:20px;display:grid;gap:8px;font-size:14.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.calc-how b{color:var(--ink);font-weight:500}
.big{border-radius:24px;border:1px solid var(--line);background:var(--bg);padding:18px 22px;display:grid;gap:4px}
.big .num{font:300 clamp(34px,4.2vw,58px)/1 var(--f-lat);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.big small{color:var(--ink-2);font-size:14.5px}
.big.hi{background:var(--accent);border-color:var(--accent)}
.big.hi .num,.big.hi small{color:var(--accent-ink)}
.calc-out .btn{justify-self:start}

.chk{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,64px);align-items:center}
.chk-dots{display:flex;gap:6px;margin-bottom:18px}
.chk-dots i{width:28px;height:4px;border-radius:4px;background:var(--line);transition:background .3s}
.chk-dots i.done{background:var(--accent)}.chk-dots i.now{background:var(--spark-fill)}
.chk-q h3{font-size:clamp(24px,2.6vw,36px);line-height:1.2;letter-spacing:-.02em;margin-block:10px 24px;min-height:2.4em}
:root[lang="ar"] .chk-q h3{letter-spacing:0;line-height:1.45;font-weight:400}
.chk-q h3.swap{animation:swap .45s ease}
.chk-ans{display:flex;flex-wrap:wrap;gap:10px}
.chk-ans .chip{height:48px;padding-inline:22px;font-size:15.5px}
.gauge{text-align:center;display:grid;justify-items:center;gap:6px}
.gauge svg{width:100%;max-width:300px;overflow:visible}
.g-bg,.g-fg{fill:none;stroke-width:14;stroke-linecap:round}
.g-bg{stroke:var(--line)}
.g-fg{stroke:var(--g,var(--accent));stroke-dasharray:100;stroke-dashoffset:var(--off,100);transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1),stroke .4s}
.g-num{margin-top:-58px;font:300 52px/1 var(--f-lat);font-variant-numeric:tabular-nums}
.g-num small{font-size:18px;color:var(--ink-3)}
.g-msg{color:var(--ink-2);max-width:32ch;min-height:3em;margin-top:8px}

/* ---------- Before / after ---------- */
.ba{position:relative;border-radius:32px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/8.4;max-width:100%;user-select:none;touch-action:pan-y;font-family:var(--f-lat)}
.ba-pane{position:absolute;inset:0;padding:clamp(12px,2.2vw,28px);display:flex;flex-direction:column;gap:12px}
.before{background:#f4f6f3;color:#222}
.after{background:#130b11;color:#f3ecf1;clip-path:inset(0 0 0 var(--pos,50%))}
.xl-bar{display:flex;gap:14px;align-items:center;font:500 12px var(--f-mono);color:#555;flex-wrap:wrap}
.xl-file{background:#1f7a45;color:#fff;padding:5px 10px;border-radius:6px}
.xl{display:grid;grid-template-columns:28px repeat(4,minmax(0,1fr));border:1px solid #cfd6cf;background:#fff;font-size:clamp(9px,1.1vw,14px);flex:1;overflow:hidden}
.xl span{border:1px solid #e1e6e1;padding:4px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center}
.xl .h{background:#eef1ee;color:#777;justify-content:center;font-size:.85em}
.xl .b{font-weight:600}
.xl .err{color:#c62828;font-weight:600;background:#fdecea}
.xl .warn{background:#fff4c2}
.xl .dup{background:#ffe0e6}
.xl-tabs{display:flex;gap:4px;font-size:12px}
.xl-tabs span{padding:4px 10px;background:#e3e8e3;border-radius:0 0 6px 6px}
.db-top{display:flex;align-items:center;gap:12px;font-size:14px}
.db-top b{background:#8e2f72;color:#fff;padding:4px 10px;border-radius:8px;font-weight:600}
.db-top i{margin-inline-start:auto;width:8px;height:8px;border-radius:50%;background:#15b86e;box-shadow:0 0 0 4px rgba(21,184,110,.2);animation:blink 1.6s infinite}
.db-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.db-kpis div{background:#21141d;border-radius:14px;padding:clamp(8px,1.2vw,14px);display:grid;gap:2px}
.db-kpis small{color:#b9a9b4;font-size:clamp(9px,1vw,12px)}
.db-kpis b{font-size:clamp(16px,2.4vw,30px);font-weight:400}
.db-kpis em{font-style:normal;font-size:clamp(9px,1vw,12px);color:#4fd18b}
.db-kpis em.n{color:#ffb829}
.db-chart{flex:1;display:flex;align-items:flex-end;gap:3%;padding:10px 4px 0;border-bottom:1px solid #3a2733;min-height:40px}
.db-chart span{flex:1;height:var(--h);border-radius:8px 8px 0 0;background:linear-gradient(#d66eb8,#8e2f72)}
.ba.seen .db-chart span{animation:barUp 1s cubic-bezier(.2,.8,.2,1) both}
.db-chart span:nth-child(n){animation-delay:calc(var(--n,0)*60ms)}
@keyframes barUp{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}
.db-list{display:grid;gap:4px;font-size:clamp(9px,1.05vw,13px)}
.db-list div{display:grid;grid-template-columns:1.4fr 1fr .8fr;gap:8px;padding:6px 10px;border-radius:8px;background:#1b1018}
.db-list span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.db-list .ok{color:#4fd18b}.db-list .due{color:#ffb829}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);pointer-events:none;z-index:3}
.ba-handle span{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(0,0,0,.5)}
.ba-handle svg{width:24px;height:24px}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:4;margin:0}
.ba-lab{position:absolute;bottom:14px;z-index:2;font:500 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;pointer-events:none}
:root[lang="ar"] .ba-lab{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-size:13px}
.ba-lab.l{left:14px}.ba-lab.r{right:14px}

/* ---------- POS demo ---------- */
.posdemo{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,80px);align-items:start}
.pos-left>.mono{display:block;margin-bottom:12px}
.tables{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin-bottom:28px}
.tbl{aspect-ratio:1;border-radius:50%;border:1px solid var(--line);background:var(--bg-2);color:var(--ink);font:500 14px var(--f-mono);cursor:pointer;transition:all .25s;position:relative}
.tbl:hover{border-color:var(--accent)}
.tbl.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:scale(1.08)}
.tbl.busy::after{content:"";position:absolute;top:8%;inset-inline-end:8%;width:9px;height:9px;border-radius:50%;background:var(--spark-fill)}
.menu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.dish{border-radius:22px;border:1px solid var(--line);background:var(--bg-2);color:var(--ink);padding:14px 12px 12px;text-align:start;cursor:pointer;display:grid;gap:6px;font-family:var(--f-body);transition:transform .2s,border-color .2s,background .2s;position:relative;overflow:hidden}
.dish:hover{border-color:var(--accent);transform:translateY(-3px)}
.dish:active{transform:scale(.96)}
.dish .ic{width:40px;height:40px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;font-size:20px}
.dish b{font-weight:400;font-size:15px;line-height:1.25}
.dish span{font:500 13px var(--f-mono);color:var(--ink-3)}
.dish .qb{position:absolute;top:10px;inset-inline-end:10px;min-width:24px;height:24px;border-radius:12px;background:var(--accent);color:var(--accent-ink);font:600 12px/24px var(--f-mono);text-align:center;padding-inline:6px;transform:scale(0);transition:transform .3s cubic-bezier(.2,.9,.3,1.4)}
.dish .qb.on{transform:scale(1)}
.dish.bump{animation:bump .35s}
@keyframes bump{50%{transform:scale(.94)}}
.pos-right{display:grid;gap:18px;justify-items:center}
.pos-right .ticket{animation:float 6s ease-in-out infinite;margin-inline:0}
#tRows{min-height:40px}
#tRows .row{animation:rowIn .35s ease both}
@keyframes rowIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
#tRows .empty{color:#8a7f86;text-align:center;padding-block:14px;font-size:12.5px}
.ticket .kds{color:#8a7f86}
.ticket .kds i{background:#b3a9af;animation:none}
.ticket .kds.sent{color:#15846e}
.ticket .kds.sent i{background:#15846e;animation:blink 1.6s infinite}
.ticket.printing{animation:printOut .8s cubic-bezier(.2,.8,.2,1)}
@keyframes printOut{0%{clip-path:inset(0 0 100% 0)}100%{clip-path:inset(0 0 -20px 0)}}
.pos-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.feat3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(40px,6vw,72px)}

@media (max-width:1080px){
  .menu{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .tl-track{left:auto;right:auto;inset-inline-start:27px;top:28px;bottom:28px;width:2px;height:auto}
  .tl-fill{width:100%;height:calc(var(--p)*100%);background:linear-gradient(180deg,var(--accent),var(--spark-fill))}
  :root[dir="rtl"] .tl-fill{background:linear-gradient(180deg,var(--accent),var(--spark-fill))}
  .tl-dot{top:calc(var(--p)*100%);inset-inline-start:50%;margin-top:-7px}
  .tl-steps{grid-template-columns:minmax(0,1fr);gap:18px}
  .tl-step{grid-template-columns:56px minmax(0,1fr);justify-items:stretch;gap:16px;align-items:start}
  .tl-node{justify-self:start}
}
@media (max-width:860px){
  .lab-tabs{grid-template-columns:minmax(0,1fr)}
  .lab-tab{padding:14px 18px}
  .bld,.calc,.chk,.posdemo{grid-template-columns:minmax(0,1fr)}
  .feat3{grid-template-columns:minmax(0,1fr)}
  .ba{aspect-ratio:4/4.2}
  .tables{grid-template-columns:repeat(4,minmax(0,1fr));max-width:280px}
  .g-num{margin-top:-50px}
}
@media (max-width:560px){
  .menu{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lab-panel{border-radius:24px}
  .db-list{display:none}
  .bld-cta .btn,.calc-out .btn,.gauge .btn,.pos-actions .btn{width:100%;justify-content:center;white-space:normal;height:auto;min-height:48px;padding-block:12px;text-align:center}
  .chk-ans .chip{flex:1 1 auto;justify-content:center}
  .xl{grid-template-columns:22px repeat(4,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){ .tilt{transform:none!important} }

/* ---------- Clicky: the scroll guide ---------- */
.guide{position:fixed;top:0;right:22px;z-index:45;direction:ltr;pointer-events:none}
.guide.rtl{right:auto;left:22px}
.guide.off .g-rig{display:none}
.g-rig{display:flex;flex-direction:column;align-items:flex-start;width:72px;transform-origin:27px 0;will-change:transform}
.guide.rtl .g-rig{transform-origin:45px 0}
.g-thread{display:block;width:2px;height:var(--len,140px);margin-left:26px;background:repeating-linear-gradient(to bottom,var(--slate) 0 6px,transparent 6px 11px);opacity:.8}
.guide.rtl .g-thread{margin-left:44px}
.g-body{position:relative;margin-top:-4px;animation:gBob 3.4s ease-in-out infinite}
@keyframes gBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.g-bot{pointer-events:auto;display:block;width:72px;height:90px;padding:0;border:0;background:none;cursor:pointer;filter:drop-shadow(0 12px 18px rgba(142,47,114,.35));transition:transform .25s}
.g-bot:hover{transform:scale(1.07) rotate(-4deg)}
.g-bot:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:24px}
.g-bot svg{width:100%;height:100%;overflow:visible}
.guide.rtl .g-bot svg{transform:scaleX(-1)}
.g-shape{fill:var(--accent);stroke:var(--accent);stroke-width:7;stroke-linejoin:round}
.g-shine{fill:none;stroke:rgba(255,255,255,.55);stroke-width:3;stroke-linecap:round}
.g-eye ellipse{fill:#fff}
.g-eye{transform-box:fill-box;transform-origin:center;animation:gBlink 4.6s infinite}
.g-eye:nth-child(2){animation-delay:.04s}
@keyframes gBlink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.g-pupil{fill:#1b1018;transition:transform .12s linear}
.g-happy{fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;opacity:0}
.g-cheek{fill:#ffb829;opacity:.55}
.g-mouth{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;transform-box:fill-box;transform-origin:center}
.g-arm{fill:none;stroke:var(--slate);stroke-width:4;stroke-linecap:round;transform-box:view-box;transform-origin:24px 58px}
.g-arm circle{fill:var(--slate);stroke:none}
.guide.happy .g-eyes{opacity:0}.guide.happy .g-happy{opacity:1}
.guide.talk .g-mouth{animation:gTalk .32s ease-in-out infinite alternate}
@keyframes gTalk{from{transform:scaleY(1)}to{transform:scaleY(2.1)}}
.guide.wave .g-arm{animation:gWave .5s ease-in-out 4 alternate}
@keyframes gWave{from{transform:rotate(0)}to{transform:rotate(38deg)}}
.g-bot.jump{animation:gJump .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes gJump{0%{transform:translateY(0) scale(1,1)}25%{transform:translateY(4px) scale(1.12,.86)}55%{transform:translateY(-26px) scale(.92,1.1)}100%{transform:translateY(0) scale(1)}}
.g-star{position:absolute;width:10px;height:10px;left:30px;top:30px;pointer-events:none;background:var(--spark-fill);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:gStar .9s ease-out forwards}
@keyframes gStar{from{transform:translate(0,0) scale(.4);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(1.2) rotate(120deg);opacity:0}}
.g-bubble{pointer-events:auto;position:absolute;top:6px;right:calc(100% + 10px);width:max-content;max-width:min(270px,70vw);background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:14px 34px 14px 16px;box-shadow:0 18px 40px -18px rgba(0,0,0,.45);font:400 15px/1.5 var(--f-body);transform-origin:right top;animation:gPop .35s cubic-bezier(.2,.9,.3,1.3)}
.g-bubble[dir="rtl"]{padding:14px 16px 14px 34px}
.guide.rtl .g-bubble{right:auto;left:calc(100% + 10px);transform-origin:left top}
.g-bubble::after{content:"";position:absolute;top:22px;right:-7px;width:12px;height:12px;background:var(--bg);border-top:1px solid var(--line);border-right:1px solid var(--line);transform:rotate(45deg)}
.guide.rtl .g-bubble::after{right:auto;left:-7px;transform:rotate(-135deg)}
@keyframes gPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.g-bubble p{margin:0}
.g-x{position:absolute;top:6px;right:8px;width:24px;height:24px;border-radius:50%;border:0;background:transparent;color:var(--ink-3);font-size:18px;line-height:1;cursor:pointer}
.g-bubble[dir="rtl"] .g-x{right:auto;left:8px}
.g-x:hover{color:var(--ink);background:var(--accent-soft)}
.g-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:12px;width:min(250px,64vw)}
.g-menu button{height:34px;border-radius:999px;border:1px solid var(--line);background:var(--bg-2);color:var(--ink);font:400 13px var(--f-body);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:10px}
.g-menu button:hover{border-color:var(--accent);color:var(--accent)}
.g-return{pointer-events:auto;position:fixed;bottom:calc(18px + env(safe-area-inset-bottom,0px));right:18px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--bg);display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 24px -12px rgba(0,0,0,.4)}
.guide.rtl .g-return{right:auto;left:18px}
.g-return svg{width:26px;height:30px}
/* Phones and small screens: same hanging guide, just smaller */
.guide.small{right:6px}
.guide.small.rtl{right:auto;left:6px}
.guide.small .g-rig{width:52px;transform-origin:19.5px 0}
.guide.small.rtl .g-rig{transform-origin:32.5px 0}
.guide.small .g-thread{margin-left:18.5px}
.guide.small.rtl .g-thread{margin-left:31.5px}
.guide.small .g-bot{width:52px;height:65px}
.guide.small .g-bubble{max-width:min(230px,calc(100vw - 84px));font-size:14px;top:0}
.guide.small .g-menu{width:min(220px,calc(100vw - 110px))}
/* Docked mode: only when the visitor asked for reduced motion */
.guide.dock{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));right:12px}
.guide.dock.rtl{right:auto;left:12px}
.guide.dock .g-thread{display:none}
.guide.dock .g-bot{width:56px;height:70px}
.guide.dock .g-rig{width:56px}
.guide.dock .g-bubble{top:auto;bottom:calc(100% + 8px);right:0;transform-origin:right bottom}
.guide.dock.rtl .g-bubble{right:auto;left:0;transform-origin:left bottom}
.guide.dock .g-bubble::after{top:auto;bottom:-7px;right:22px;transform:rotate(135deg)}
.guide.dock.rtl .g-bubble::after{right:auto;left:22px;transform:rotate(135deg)}
@media (prefers-reduced-motion:reduce){.g-body,.g-eye{animation:none}}

/* ---------- Staff shortcut back to the Odoo backend (only rendered for logged-in employees) ---------- */

/* ---------- IT & cybersecurity ---------- */
.sec-guard{background:radial-gradient(90% 70% at 20% 40%,var(--accent-soft),transparent 65%),var(--bg)}
.guard-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,80px);align-items:center}
.guard-vis{position:relative;border:1px solid var(--line);border-radius:32px;background:var(--bg-2);padding:clamp(12px,2vw,24px)}
.guard-vis svg{width:100%;height:auto;display:block;overflow:visible}
.gv-lines use{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:4 6}
.gv-cloud path{fill:none;stroke:var(--slate);stroke-width:3;stroke-linejoin:round}
.gv-dev rect{fill:none;stroke:var(--slate);stroke-width:2.5}
.gv-dev path{fill:none;stroke:var(--slate);stroke-width:2.5;stroke-linecap:round}
.gv-led{fill:#15b86e;animation:blink 1.4s infinite}
.guard-vis text{font:500 10.5px var(--f-mono);letter-spacing:.14em;fill:var(--ink-3)}
.gv-shield path:first-child{fill:var(--accent);stroke:var(--accent);stroke-width:4;stroke-linejoin:round}
.gv-check{fill:none;stroke:var(--accent-ink);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.gv-shield text{fill:var(--accent);font-weight:600}
.gv-ring{fill:none;stroke:#d9434e;stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center}
.gv-ring.hit{animation:ringHit .5s ease-out}
@keyframes ringHit{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
.pk{transition:opacity .4s,transform .4s;transform-box:fill-box;transform-origin:center}
.pk.ok{fill:#15b86e}
.pk.bad{fill:#e5484d}
.pk.pop{opacity:0;transform:scale(2.6)}
.guard-stat{position:absolute;left:clamp(14px,2vw,26px);top:clamp(12px,2vw,22px);display:flex;align-items:baseline;gap:10px;font-size:13px;color:var(--ink-2)}
:root[dir="rtl"] .guard-stat{left:auto;right:clamp(14px,2vw,26px)}
.guard-stat b{font:300 30px/1 var(--f-lat);color:#e5484d;font-variant-numeric:tabular-nums}
.guard-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.guard-list li{border:1px solid var(--line);border-radius:20px;background:var(--bg);padding:18px;display:grid;gap:6px}
.guard-list b{font-weight:400;font-size:18px}
.guard-list span{color:var(--ink-2);font-weight:300;font-size:14.5px;line-height:1.55}
.guard-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}
.nd{transform-box:fill-box;transform-origin:center;animation:pop 2.4s ease-in-out infinite}
.nd.n2{animation-delay:.3s}.nd.n3{animation-delay:.6s}
.scan{fill:var(--spark-fill);opacity:.55;animation:scanY 2.4s ease-in-out infinite}
@keyframes scanY{0%,100%{transform:translateY(0)}50%{transform:translateY(80px)}}
.chk{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50;animation:draw 2.4s ease-in-out infinite}
@media (max-width:980px){.guard-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.guard-list{grid-template-columns:minmax(0,1fr)}.guard-stat b{font-size:22px}}

/* ---------- Scenes (automation, AI, rack) ---------- */
.scene{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center}
.scene.flip .scene-txt{order:2}
.scene-txt h2{font-size:clamp(36px,4.6vw,68px);line-height:.98;letter-spacing:-.035em;margin-top:16px}
:root[lang="ar"] .scene-txt h2{letter-spacing:0;line-height:1.25;font-weight:300}
.scene-txt>p{color:var(--ink-2);font-weight:200;font-size:19px;margin-top:20px;max-width:48ch}
:root[lang="ar"] .scene-txt>p{font-weight:300}
.scene-pts{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 26px}
.scene-pts li{display:grid;gap:4px;padding-inline-start:14px;border-inline-start:2px solid var(--accent)}
.scene-pts b{font-weight:400;font-size:17px}
.scene-pts span{color:var(--ink-2);font-weight:300;font-size:14.5px}
.stack{display:flex;flex-wrap:wrap;gap:6px;margin-top:26px}
/* automation board */
.flow-vis{border:1px solid var(--line);border-radius:28px;background:var(--bg-2);padding:18px;display:grid;gap:14px;font-family:var(--f-lat)}
.flow-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font-size:13px;color:var(--ink-2)}
.live{display:inline-flex;align-items:center;gap:6px;color:#15b86e;font-weight:500}
.live i{width:8px;height:8px;border-radius:50%;background:#15b86e;box-shadow:0 0 0 4px rgba(21,184,110,.18);animation:blink 1.6s infinite}
.flow-name{font-family:var(--f-mono);font-size:12px}
.flow-runs{margin-left:auto;font-family:var(--f-mono);font-size:12px}
.flow-runs b{color:var(--ink);font-size:15px;font-variant-numeric:tabular-nums}
.flow-board{position:relative;aspect-ratio:600/320;max-width:100%;border-radius:20px;background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:16px 16px}
.flow-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flow-wires path{fill:none;stroke:var(--line);stroke-width:2.5;vector-effect:non-scaling-stroke;transition:stroke .3s}
.flow-wires path.hot{stroke:var(--accent)}
.fw-pulse{fill:var(--spark-fill);opacity:0;filter:drop-shadow(0 0 6px var(--spark-fill))}
.fnode{position:absolute;left:var(--x);top:var(--y);width:23.4%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:14px;background:var(--bg);border:1px solid var(--line);transition:border-color .3s,box-shadow .3s,transform .3s}
.fnode b{display:block;font-size:13px;font-weight:600;line-height:1.2}
.fnode small{display:block;font-size:11px;color:var(--ink-3);line-height:1.3}
:root[lang="ar"] .fnode small{font-family:var(--f-ar)}
.fic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff}
.fic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fic.hook{background:#e0782a}.fic.erp{background:#8e2f72}.fic.wa{background:#1faa59}.fic.sheet{background:#1f7a45}.fic.mail{background:#3b6fd8}
.fok{position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;background:#15b86e;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.fok::after{content:"";position:absolute;left:5px;top:4px;width:7px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.fnode.run{border-color:var(--spark-fill);box-shadow:0 0 0 4px rgba(255,184,41,.16);transform:translateY(-50%) scale(1.04)}
.fnode.done .fok{transform:scale(1)}
.fnode.done{border-color:color-mix(in srgb,#15b86e 60%,transparent)}
/* AI chat */
.chat{border:1px solid var(--line);border-radius:28px;background:var(--bg-2);display:grid;grid-template-rows:auto auto 1fr auto;height:min(560px,78vh);overflow:hidden;max-width:560px;width:100%;justify-self:center}
.chat-top{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.chat-av{width:40px;height:40px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center}
.chat-av svg{width:22px;height:26px}
.chat-av path{fill:var(--accent)}
.chat-top b{display:block;font-weight:500;font-size:15px}
.chat-top small{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#15b86e}
.chat-top small i{width:7px;height:7px;border-radius:50%;background:#15b86e}
.chat-demo{margin-inline-start:auto;padding:4px 10px;border:1px solid var(--line);border-radius:999px}
.chat-kb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 18px;border-bottom:1px solid var(--line)}
.kb{font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--ink-3);transition:all .3s}
.kb.on{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.chat-log{overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.msg{max-width:82%;padding:10px 14px;border-radius:18px;font-size:15px;line-height:1.5;animation:msgIn .35s ease both}
.msg.u{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-end-end-radius:6px}
.msg.b{align-self:flex-start;background:var(--bg);border:1px solid var(--line);border-end-start-radius:6px}
.msg.b small{display:block;margin-top:6px;font-size:11px;color:var(--ink-3)}
.msg.dots{display:inline-flex;gap:4px;padding:14px}
.msg.dots i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:tdot 1.2s infinite}
.msg.dots i:nth-child(2){animation-delay:.15s}.msg.dots i:nth-child(3){animation-delay:.3s}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chat-sugg{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px 16px;border-top:1px solid var(--line)}
.chat-sugg button{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:8px 12px;font:400 13.5px var(--f-body);cursor:pointer;transition:border-color .2s}
.chat-sugg button:hover{border-color:var(--accent)}
.chat-sugg button:disabled{opacity:.4;cursor:default}
/* rack */
.rack{justify-self:center;width:100%;max-width:520px}
.rack-frame{border-radius:18px;padding:14px 16px;background:linear-gradient(#1b1419,#0f0a0d);border:1px solid #2c2129;box-shadow:inset 0 0 0 6px #140e12,0 30px 70px -30px rgba(142,47,114,.5);display:grid;gap:6px;font-family:var(--f-lat)}
.ru{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:0 12px;border-radius:6px;background:linear-gradient(#2a2127,#1d161b);border:1px solid #3a2d36;color:#e9dfe6;cursor:pointer;position:relative;transition:border-color .2s,box-shadow .2s,transform .2s}
.ru.u1{height:40px}.ru.u2{height:62px}
.ru:hover,.ru:focus-visible,.ru.sel{border-color:#d66eb8;box-shadow:0 0 0 3px rgba(214,110,184,.25),0 0 20px -4px rgba(214,110,184,.6)}
.ru.sel{transform:translateX(-4px)}
.ru-l{display:grid;min-width:118px}
.ru-l b{font:600 10.5px var(--f-mono);letter-spacing:.1em}
.ru-l small{font:400 10px var(--f-mono);color:#9c8f98}
.ports,.cables,.bays{display:flex;gap:3px;flex:1;flex-wrap:wrap;align-content:center}
.ports i{width:12px;height:9px;border-radius:2px;background:#0c0809;border:1px solid #4a3a44;position:relative}
.ports i::after{content:"";position:absolute;top:1px;left:2px;width:3px;height:3px;border-radius:50%;background:#15b86e;animation:blink 1.1s infinite}
.ports i:nth-child(3n)::after{animation-delay:.4s;background:#ffb829}
.ports i:nth-child(4n)::after{animation-duration:.7s}
.ports.many i{width:9px}
.cables i{width:8px;height:12px;border-radius:2px}
.cables i:nth-child(4n+1){background:#3b6fd8}.cables i:nth-child(4n+2){background:#e5484d}.cables i:nth-child(4n+3){background:#ffb829}.cables i:nth-child(4n){background:#15b86e}
.bays i{width:22px;height:36px;border-radius:3px;background:#120d10;border:1px solid #3d2f38;position:relative}
.bays i::after{content:"";position:absolute;bottom:4px;left:50%;margin-left:-2px;width:4px;height:4px;border-radius:50%;background:#15b86e;animation:blink 1.4s infinite}
.bays i:nth-child(2n)::after{animation-delay:.5s}
.lcd{flex:1;font:500 11px var(--f-mono);color:#4fd18b;background:#07140d;border:1px solid #1d3b2a;border-radius:4px;padding:6px 8px;text-align:center;letter-spacing:.06em}
.leds{display:flex;gap:5px;margin-left:auto}
.leds i{width:7px;height:7px;border-radius:50%;background:#15b86e;box-shadow:0 0 8px #15b86e}
.leds i.a{background:#ffb829;box-shadow:0 0 8px #ffb829;animation:blink 1s infinite}
.leds i.b{background:#3b6fd8;box-shadow:0 0 8px #3b6fd8;animation:blink 1.8s infinite}
.ru-gap{height:14px;border-radius:4px;background:repeating-linear-gradient(90deg,#1a1317 0 6px,#140e12 6px 12px)}
.rack-foot{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font:500 12.5px var(--f-mono);color:var(--ink-2)}
.rack-foot i{width:8px;height:8px;border-radius:50%;background:#15b86e;animation:blink 1.6s infinite}
.rk-info{margin-top:26px;border:1px solid var(--line);border-radius:22px;background:var(--bg-2);padding:18px 20px;min-height:128px}
.rk-info.swap{animation:swap .45s ease}
.rk-info small{color:var(--accent)}
.rk-info h3{font-size:22px;margin-top:6px}
.rk-info p{color:var(--ink-2);font-weight:300;margin-top:6px;font-size:15.5px}
@media (max-width:980px){
  .scene{grid-template-columns:minmax(0,1fr)}
  .scene.flip .scene-txt{order:0}
}
@media (max-width:640px){
  .scene-pts{grid-template-columns:minmax(0,1fr)}
  .flow-board{aspect-ratio:auto;display:grid;gap:10px;background:none}
  .flow-wires{display:none}
  .fnode{position:relative;left:auto;top:auto;width:100%;transform:none}
  .fnode.run{transform:scale(1.02)}
  .fnode[data-n="1"]{order:1}.fnode[data-n="2"]{order:2}.fnode[data-n="4"]{order:3}.fnode[data-n="3"]{order:4}.fnode[data-n="5"]{order:5}
  .ru-l{min-width:96px}
  .bays i{width:16px}
  .chat{height:520px}
}

/* ---------- Circuit background ---------- */
#pcb{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
:root[data-theme="light"] #pcb{display:none}
#cc>main,#cc>footer{position:relative;z-index:1}
/* ---------- Side progress rail ---------- */
.rail{position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:44;display:grid;gap:14px;padding:6px 0}
:root[dir="rtl"] .rail{left:auto;right:18px}
.rail-track{position:absolute;left:5px;top:0;bottom:0;width:2px;background:var(--line);border-radius:2px}
:root[dir="rtl"] .rail-track{left:auto;right:5px}
.rail-fill{position:absolute;left:0;top:0;width:100%;background:linear-gradient(var(--accent),var(--spark-fill));border-radius:2px}
.rail-dot{all:unset;position:relative;display:flex;align-items:center;gap:10px;cursor:pointer;height:12px}
.rail-dot i{width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--line);box-sizing:border-box;transition:all .3s;flex:none}
.rail-dot.past i{border-color:var(--accent);background:var(--accent)}
.rail-dot.on i{border-color:var(--spark-fill);background:var(--spark-fill);box-shadow:0 0 0 4px rgba(255,184,41,.2);transform:scale(1.25)}
.rail-dot span{font:500 11.5px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s;pointer-events:none;background:var(--bg);padding:3px 8px;border-radius:999px;border:1px solid var(--line)}
:root[lang="ar"] .rail-dot span{font-family:var(--f-ar);letter-spacing:0;text-transform:none}
:root[dir="rtl"] .rail-dot span{transform:translateX(6px)}
.rail-dot.on span,.rail-dot:hover span,.rail-dot:focus-visible span{opacity:1;transform:none}
.rail-dot:focus-visible i{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:1199px){.rail{display:none}}
/* ---------- First-visit intro ---------- */
.booting body{overflow:hidden}
.boot{position:fixed;inset:0;z-index:200;background:#040304;color:#f3ecf1;display:grid;place-items:center;align-content:center;gap:18px;text-align:center;transition:opacity .45s ease;font-family:var(--f-body)}
.boot.off{opacity:0;pointer-events:none}
.boot-term{position:absolute;top:24px;left:24px;right:24px;text-align:left;direction:ltr;font:400 12.5px/1.8 var(--f-mono);color:#8c858b}
.boot-term b{color:#d66eb8;font-weight:500}.boot-term span{color:#4fd18b}
.boot-power{all:unset;cursor:pointer;position:relative;width:108px;height:108px;border-radius:50%;display:grid;place-items:center;border:2px solid #d66eb8;box-shadow:0 0 40px -6px #d66eb8,inset 0 0 30px -10px #d66eb8;transition:transform .2s}
.boot-power:hover{transform:scale(1.06)}
.boot-power:focus-visible{outline:2px solid #ffb829;outline-offset:6px}
.boot-power svg{width:40px;height:40px;fill:none;stroke:#d66eb8;stroke-width:2;stroke-linecap:round}
.br{position:absolute;inset:-14px;border-radius:50%;border:1px solid #d66eb8;opacity:.5;animation:pring 2.4s ease-out infinite}
.br.r2{animation-delay:1.2s}
.boot-t{font-size:clamp(26px,4vw,44px);font-weight:500;margin:22px 0 0}
.boot-s{color:#b8b0b6;font-size:15px;margin:0}
.boot-skip{all:unset;cursor:pointer;position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font:500 13px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#8c858b;padding:8px 16px;border:1px solid #2c2129;border-radius:999px}
.boot-skip:hover{color:#f3ecf1;border-color:#8c858b}
.boot-scan{position:fixed;left:0;right:0;top:50%;height:2px;margin-top:-1px;z-index:201;background:#d66eb8;box-shadow:0 0 24px 6px #d66eb8;pointer-events:none;animation:scanOpen 1.2s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes scanOpen{0%{transform:scaleX(0);opacity:1}35%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1) scaleY(260);opacity:0}}

/* ================= Live demos (tabs) ================= */
/* Live demos */
.demos{padding-bottom:clamp(60px,8vw,110px)}
.demo-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:-24px}
.dtab{display:flex;gap:12px;align-items:center;text-align:start;padding:14px 16px;border-radius:22px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;font-family:var(--f-body);transition:all .3s}
.dtab:hover{border-color:var(--ink-3)}
.dic{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);transition:all .3s}
.dic svg{width:22px;height:22px}
.dtab b{display:block;font-weight:500;font-size:16px}
.dtab small{display:block;color:var(--ink-3);font-size:13px;margin-top:2px}
.dtab.on{border-color:var(--accent);background:var(--accent-soft)}
.dtab.on .dic{background:var(--accent);color:var(--accent-ink)}
.demo-panel{padding-top:clamp(40px,5vw,64px)}
.demo-panel.show{animation:swap .5s ease}
.demo-panel .sec-head{margin-bottom:36px}
.demo-panel .sec-head h2,.demo-panel .scene-txt h2{font-size:clamp(30px,3.6vw,52px)}
@media (max-width:980px){.demo-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.dtab small{display:none}.dtab{padding:10px 12px}.dic{width:36px;height:36px}}
/* ---------- Clicky courier + language curtain ---------- */
.guide.away .g-body{visibility:hidden}
.courier{position:fixed;left:0;top:0;z-index:210;pointer-events:none;filter:drop-shadow(0 14px 18px rgba(142,47,114,.45));will-change:transform}
.courier svg{width:100%;height:100%;overflow:visible}
.courier.rtl svg{transform:scaleX(-1)}
.courier.tap svg{animation:courierTap .26s ease}
@keyframes courierTap{50%{transform:scale(.82,.9) translateY(4px)}}
.courier.rtl.tap svg{animation:courierTapR .26s ease}
@keyframes courierTapR{0%,100%{transform:scaleX(-1)}50%{transform:scaleX(-.82) scaleY(.9) translateY(4px)}}
.courier-ring{position:fixed;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid var(--spark-fill);z-index:209;pointer-events:none;animation:rip .6s ease-out forwards}
.wipe{position:fixed;inset:0;z-index:220;pointer-events:none;background:linear-gradient(120deg,#5e1d4b,#8e2f72 45%,#d66eb8);display:grid;place-items:center;transition:transform .6s cubic-bezier(.7,0,.2,1);transform:translateX(105%)}
.wipe.to-en{transform:translateX(-105%)}
.wipe.cover{transform:translateX(0)}
.wipe.to-ar.away{transform:translateX(-105%)}
.wipe.to-en.away{transform:translateX(105%)}
.wipe.instant{transition:none}
.wipe-in{display:grid;justify-items:center;gap:10px;color:#fff;text-align:center}
.wipe-word{font:500 clamp(56px,11vw,160px)/1 var(--f-ar);letter-spacing:0}
.wipe.to-en .wipe-word{font-family:var(--f-lat);font-weight:400;letter-spacing:-.04em}
.wipe-sub{font:500 13px var(--f-mono);letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.wipe-rider{position:absolute;top:50%;width:84px;height:105px;margin-top:-52px;filter:drop-shadow(0 16px 20px rgba(0,0,0,.35))}
.wipe.to-ar .wipe-rider{left:-46px}
.wipe.to-en .wipe-rider{right:-46px}
.wipe.to-en .wipe-rider svg{transform:scaleX(-1)}
.wipe-rider svg{width:100%;height:100%;overflow:visible}
.wipe-rider .g-shape{fill:#fff;stroke:#fff}
.wipe-rider .g-eye ellipse{fill:#8e2f72}
.wipe-rider .g-pupil{fill:#fff}
.wipe-rider .g-mouth,.wipe-rider .g-happy{stroke:#8e2f72}
html.wiping body::after{content:"";position:fixed;inset:0;z-index:220;background:linear-gradient(120deg,#5e1d4b,#8e2f72 45%,#d66eb8)}
@media (prefers-reduced-motion:reduce){.wipe{display:none}}
/* ---------- Industry orbit ---------- */
.orbit-wrap{margin-top:clamp(56px,7vw,96px);overflow-x:clip}
.orbit-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:10px 40px;margin-bottom:10px}
.orbit-head p{color:var(--ink-2);font-weight:300;max-width:46ch}
.orbit-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px);align-items:center}
.orbit{position:relative;width:min(600px,100%);aspect-ratio:1;justify-self:center;--r:220px}
.orbit-rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orbit-rings circle{fill:none;stroke:var(--line);stroke-width:.3;stroke-dasharray:1 1.4}
.orbit-rings circle:first-child{stroke-width:.35}
.orbit-rings line{stroke:var(--accent);stroke-width:.45;stroke-dasharray:1.2 1;animation:dash 1.2s linear infinite;filter:drop-shadow(0 0 1.5px var(--accent))}
@keyframes dash{to{stroke-dashoffset:-4.4}}
.hub{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;align-content:center;gap:4px;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--accent) 80%,#fff),var(--accent) 55%,#5e1d4b);color:#fff;box-shadow:0 0 0 10px var(--accent-soft),0 30px 70px -20px var(--accent);text-align:center;z-index:2}
.hub-glow{position:absolute;inset:-18%;border-radius:50%;border:1px solid var(--accent);opacity:.5;animation:pring 3s ease-out infinite}
.hub-ic{width:38%;aspect-ratio:1;display:grid;place-items:center}
.hub-ic svg{width:100%;height:100%;stroke:#fff}
.hub-ic b{font:600 clamp(20px,3.2vw,34px)/1 var(--f-lat);letter-spacing:-.02em}
.hub small{font:500 clamp(10px,1.2vw,12.5px) var(--f-body);max-width:80%;line-height:1.25;opacity:.9}
.hub.swap .hub-ic,.hub.swap small{animation:pop .5s ease}
.ring{position:absolute;inset:0;animation:spin 70s linear infinite}
.planet{all:unset;position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)));cursor:pointer;z-index:3}
.pl-body{position:absolute;left:0;top:0;translate:-50% -50%;display:grid;justify-items:center;gap:6px;animation:spin 70s linear infinite reverse}
.pl-ic{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:var(--bg-2);border:1px solid var(--line);color:var(--accent);box-shadow:0 12px 30px -14px rgba(0,0,0,.6);transition:background .35s,color .35s,transform .35s,border-color .35s,box-shadow .35s;position:relative}
.pl-ic svg{width:30px;height:30px}
.planet em{font-style:normal;font-size:12.5px;font-weight:500;color:var(--ink-2);white-space:nowrap;background:var(--bg);padding:2px 9px;border-radius:999px;border:1px solid var(--line);transition:color .3s,border-color .3s}
.planet:hover .pl-ic,.planet:focus-visible .pl-ic{transform:scale(1.1);border-color:var(--accent)}
.planet.on .pl-ic{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);transform:scale(1.2);box-shadow:0 0 0 8px var(--accent-soft),0 0 40px -4px var(--accent)}
.planet.on .pl-ic::before,.planet.on .pl-ic::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--spark-fill);top:50%;left:50%;margin:-4px;animation:sat 2.4s linear infinite}
.planet.on .pl-ic::after{width:5px;height:5px;margin:-2.5px;animation-duration:3.6s;animation-direction:reverse;background:#fff}
@keyframes sat{from{transform:rotate(0) translateX(52px)}to{transform:rotate(360deg) translateX(52px)}}
.planet.on em{color:var(--ink);border-color:var(--accent)}
.orbit:hover .ring,.orbit:hover .pl-body,.orbit.paused .ring,.orbit.paused .pl-body{animation-play-state:paused}
.orb-panel{border:1px solid var(--line);border-radius:28px;background:var(--bg);padding:clamp(22px,3vw,34px);display:grid;gap:12px;align-content:start;min-height:320px}
.orb-panel.swap>*{animation:swap .45s ease both}
.orb-panel.swap>*:nth-child(2){animation-delay:.05s}.orb-panel.swap>*:nth-child(3){animation-delay:.1s}.orb-panel.swap>*:nth-child(4){animation-delay:.15s}
.orb-panel small{color:var(--accent)}
.orb-ic-big{width:60px;height:60px;border-radius:18px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.orb-ic-big svg{width:30px;height:30px}
.orb-panel h4{margin:0;font-size:clamp(26px,3vw,38px);font-weight:400;letter-spacing:-.02em;line-height:1.1}
:root[lang="ar"] .orb-panel h4{letter-spacing:0;line-height:1.35}
.orb-panel p{color:var(--ink-2);font-weight:300;font-size:17px;line-height:1.65}
.orb-nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
:root[dir="rtl"] .orb-nav .cf-arrow svg{transform:scaleX(-1)}
@media (max-width:980px){.orbit-grid{grid-template-columns:minmax(0,1fr)}.orb-panel{min-height:0}}
@media (max-width:560px){
  .pl-ic{width:50px;height:50px}.pl-ic svg{width:22px;height:22px}
  .planet em{display:none}
  .hub{width:34%}
  @keyframes sat{from{transform:rotate(0) translateX(36px)}to{transform:rotate(360deg) translateX(36px)}}
}
@media (prefers-reduced-motion:reduce){.ring,.pl-body{animation:none}}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .links{display:none}
  .menu-btn{display:inline-flex}
  .tools{margin-inline-start:auto}
  .links.open{display:flex;position:absolute;top:76px;inset-inline:0;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px var(--gut) 20px}
  .links.open a{display:block;padding-block:14px;font-size:15px;border-bottom:1px solid var(--line)}
}
@media (max-width:860px){
  .hero-grid,.band-grid{grid-template-columns:minmax(0,1fr)}
  .stage .hint{display:none}
  .ring{max-width:260px}
  .sec-head,.odoo-grid,.pos-grid,.contact-grid,.why{grid-template-columns:minmax(0,1fr)}
  .feat{grid-template-columns:minmax(0,1fr)}
  .ticket{max-width:330px}
}
@media (max-width:560px){
  body{font-size:17px}
  .nav .btn{display:none}
  .brand img{height:32px}
  .form{grid-template-columns:minmax(0,1fr)}
  .cf-arrow{width:42px;height:42px}
  .cf-tabs{display:none}
  .card p{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv.pre,.js .ticket.wait .pr{opacity:1;transform:none}
  .cur,.rip{display:none}
}
.odoo-grid.one{grid-template-columns:minmax(0,1fr)}

/* v4: calmer page */
#pcb{transition:opacity .8s ease}
html.past-hero #pcb{opacity:.28}
.band-check{margin-top:clamp(40px,6vw,72px);border:1px solid var(--line);border-radius:32px;background:var(--bg-2);padding:clamp(20px,3vw,40px);position:relative;z-index:1}
.bc-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.bc-head .mono{color:var(--accent)}
.bc-head b{font-weight:300;color:var(--ink-2);font-size:15px}
#p-check{scroll-margin-top:110px}
@media (max-width:900px){.band-check{border-radius:24px}}
.demo-tabs{grid-template-columns:repeat(5,minmax(0,1fr))}
.dtab{padding:12px 14px}
@media (max-width:1180px){.demo-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){.demo-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.dtab:last-child:nth-child(odd){grid-column:span 2}}

/* =========================================================
   Phones (<=760px) - desktop layout is not affected
   ========================================================= */
.m-only,.mbar,.m-tools,.wiz-nav{display:none}
@media (max-width:760px){
  .d-only{display:none}
  .m-only{display:block}
  /* header: logo + menu; the toggles live inside the menu */
  .links.open .m-tools{display:flex;gap:10px;padding-top:16px;border:0}
  .links.open .m-tools .icon-btn{width:48px;height:48px}
  /* language + theme buttons stay visible in the header, outside the menu */
  .nav .wrap{gap:12px}
  .nav .tools{gap:6px}
  .nav .tools .icon-btn{height:40px;min-width:40px;padding-inline:10px}
  .nav .tools #langBtn{min-width:52px}
  /* sticky action bar */
  .mbar{display:flex;gap:10px;position:fixed;inset-inline:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;padding:8px;border-radius:999px;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 12px 40px rgba(0,0,0,.35);transform:translateY(140%);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
  .mbar.show{transform:none;opacity:1}
  .mbar .btn{flex:1;justify-content:center;height:48px}
  .mbar .icon-btn{width:48px;height:48px;flex:0 0 48px;display:inline-flex;align-items:center;justify-content:center}
  /* shorter page */
  .sec{padding-block:64px}
  .sec-head{gap:14px}
  .lab-tabs,.demo-tabs{display:flex!important;overflow-x:auto;scroll-snap-type:x proximity;gap:8px;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .lab-tabs::-webkit-scrollbar,.demo-tabs::-webkit-scrollbar,#bType::-webkit-scrollbar,#bExtra::-webkit-scrollbar{display:none}
  .lab-tab,.dtab{flex:0 0 auto;scroll-snap-align:start;padding:12px 16px;border-radius:999px}
  .lab-tab span,.dtab small{display:none}
  .lab-tab b{font-size:15px;white-space:nowrap}
  .dtab .dic{width:30px;height:30px}
  .dtab b{white-space:nowrap}
  .dtab:last-child:nth-child(odd){grid-column:auto}
  /* easier reading */
  .hero h1{font-size:44px}
  :root[lang="ar"] .hero h1{font-size:40px}
  .sec-head h2,.scene-txt h2,.demo-panel .sec-head h2,.demo-panel .scene-txt h2{font-size:34px;line-height:1.02}
  :root[lang="ar"] .sec-head h2,:root[lang="ar"] .scene-txt h2{line-height:1.3}
  .contact h2{font-size:54px}
  .hero .lead,.sec-head p,.why p,.contact .lead,.scene-txt p{font-weight:300;font-size:16.5px;line-height:1.6}
  :root[lang="ar"] .hero .lead,:root[lang="ar"] .sec-head p,:root[lang="ar"] .why p{font-weight:400}
  .ctas{flex-wrap:nowrap;gap:8px}
  .ctas .btn{flex:1 1 0;justify-content:center;padding-inline:12px;font-size:12px;white-space:nowrap}
  .ct-btns{display:flex;flex-wrap:nowrap;gap:8px}
  .ct-btns .btn{flex:1 1 0;justify-content:center;padding-inline:10px;font-size:11.5px;white-space:nowrap}
  .scene-pts li span{display:none}
  .scene-pts{gap:8px}
  .scene-pts li{padding-block:4px}
  .apps{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scrollbar-width:none;margin-top:20px}
  .apps::-webkit-scrollbar{display:none}
  .apps .pill{flex:0 0 auto;white-space:nowrap;height:38px;font-size:14px}
  .versions{margin-top:18px}
  .why{gap:28px}
  .why h3{font-size:20px}
  .why p{font-size:15.5px}
  .orbit-head{margin-bottom:8px}
  .guide.small{right:0}
  .guide.small.rtl{left:0}
  .guide.small .g-rig{width:44px;transform-origin:16.5px 0}
  .guide.small.rtl .g-rig{transform-origin:27.5px 0}
  .guide.small .g-thread{margin-left:15.5px}
  .guide.small.rtl .g-thread{margin-left:26.5px}
  .guide.small .g-bot{width:44px;height:55px}
  /* builder wizard */
  .bld.wiz{display:flex;flex-direction:column;gap:18px}
  .bld.wiz .bstep{display:none}
  .bld.wiz .bstep.is-cur{display:block;animation:swap .45s ease}
  .bld.wiz .bstep .q{font-size:22px;color:var(--ink);margin-bottom:16px;line-height:1.3}
  .bld.wiz .bstep .chips{margin-bottom:6px}
  .bld.wiz .bstep .chip{height:44px;padding-inline:16px;font-size:15px}
  .bld.wiz[data-step="4"] .bld-in{display:none}
  .bld.wiz:not([data-step="4"]) .bld-out{display:none}
  .bld.wiz[data-step="4"] .bld-out{animation:swap .5s ease}
  .wiz-done{font-size:22px;margin-bottom:14px}
  .bld.wiz .board{min-height:0}
  .wiz-nav{display:grid;gap:12px;border-top:1px solid var(--line);padding-top:16px}
  .wiz-top{display:flex;justify-content:space-between;align-items:center}
  .wiz-top .mono{font-size:12px;color:var(--ink-3)}
  .wiz-dots{display:flex;gap:6px}
  .wiz-dots i{width:26px;height:4px;border-radius:4px;background:var(--line);transition:background .3s}
  .wiz-dots i.done{background:var(--accent)}.wiz-dots i.now{background:var(--spark-fill)}
  .wiz-sum{margin:0;font-size:14.5px;color:var(--ink-2);padding:12px 14px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
  .wiz-sum b{color:var(--accent);font-weight:600}
  .wiz-sum.pulse{animation:wizPulse .6s ease}
  @keyframes wizPulse{0%{border-color:var(--accent);box-shadow:0 0 0 0 var(--accent-soft)}60%{box-shadow:0 0 0 8px transparent}100%{border-color:var(--line)}}
  .wiz-btns{display:flex;gap:10px}
  .wiz-btns .btn{flex:1;justify-content:center;height:50px}
  .wiz-btns .btn[hidden]{display:none}
  #p-build{scroll-margin-top:90px}
  /* calculator: results sit above the sliders */
  .calc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:stretch}
  .calc .big.hi{grid-column:1/-1;order:-2}
  .calc .big.hi .num{font-size:34px}
  .calc-out{display:contents}
  .calc .big{order:-1;padding:12px 10px;border-radius:16px;align-content:start}
  .calc .big .num{font-size:24px}
  .calc .big small{font-size:11.5px;line-height:1.35}
  .calc-in{grid-column:1/-1;margin-top:10px}
  .calc-out .btn{grid-column:1/-1;order:2;margin-top:6px}
  body{padding-bottom:0}
  .contact{padding-bottom:110px}
}