@font-face{font-family:"Plex Ar";src:url(fonts/plex-arabic-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Ar";src:url(fonts/plex-arabic-medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plex Ar";src:url(fonts/plex-arabic-semibold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex Ar";src:url(fonts/plex-arabic-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--night:#0E0A1F;--deep:#1A1033;--plum:#2A1B4D;--violet:#9277F0;--royal:#5B7BFF;--cyan:#1FB6E8;--lav:#C9BCFF;--light:#F7F8FB;
 --muted:#A9AECB;--line:rgba(201,188,255,.14);--card:rgba(255,255,255,.04);--grad:linear-gradient(135deg,#9277F0 0%,#5B7BFF 55%,#1FB6E8 100%);
 --r:20px;--pad:clamp(16px,4.5vw,64px);--max:1240px;--font:"Plex Ar","Inter",system-ui,sans-serif;--ok:#34d399;--bad:#f87171}
html[lang=en]{--font:"Inter","Plex Ar",system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--night);color:var(--light);font-family:var(--font);font-size:16px;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
html[lang=en] body{line-height:1.55}
img,svg{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--violet);color:#fff;padding:10px 16px;border-radius:10px;z-index:100;text-decoration:none}.skip:focus{top:12px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}.narrow{max-width:860px}
h1,h2,h3,h4{margin:0;line-height:1.2;font-weight:700}
html[lang=en] h1,html[lang=en] h2{letter-spacing:-.03em;font-weight:650}
h2{font-size:clamp(28px,4.6vw,48px)}h3{font-size:clamp(18px,2vw,21px);font-weight:600}
p{margin:0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--lav);margin-bottom:14px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.lead{color:var(--muted);font-size:clamp(16px,1.5vw,19px);max-width:640px;margin-top:14px}
.gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
section{position:relative;padding:clamp(56px,8vw,104px) 0}
.sec-head{max-width:760px;margin-bottom:clamp(28px,4vw,48px)}
.center{text-align:center;margin-inline:auto}.center .lead{margin-inline:auto}
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(1200px 700px at 50% -10%,#24164a 0%,transparent 60%),var(--night)}
.aurora i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.45}
.aurora i:nth-child(1){width:60vmax;height:60vmax;background:#4b2fb3;top:-30vmax;inset-inline-start:-20vmax}
.aurora i:nth-child(2){width:45vmax;height:45vmax;background:#9277F0;top:10vh;inset-inline-end:-25vmax;opacity:.22}
.aurora i:nth-child(3){width:40vmax;height:40vmax;background:#1FB6E8;bottom:-25vmax;inset-inline-start:20vw;opacity:.12}
/* nav */
.nav{position:fixed;top:0;inset-inline:0;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(14,10,31,.8);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:16px;height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:22px}
.brand svg{width:32px;height:32px}.brand small{font-family:Inter;font-weight:600;font-size:15px;color:var(--muted)}
.nav-links{display:none;gap:2px;margin-inline-start:auto}
.nav-links a{text-decoration:none;color:var(--muted);font-size:15px;padding:8px 12px;border-radius:10px}.nav-links a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-actions{display:flex;gap:8px;align-items:center;margin-inline-start:auto}
@media(min-width:980px){.nav-links{display:flex}.nav-actions{margin-inline-start:12px}}
.lang{font:600 14px Inter,"Plex Ar";background:rgba(255,255,255,.06);border:1px solid var(--line);color:#fff;border-radius:999px;height:40px;min-width:48px;padding:0 12px;cursor:pointer}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;color:#fff;background:var(--grad);border:0;cursor:pointer;transition:transform .2s,box-shadow .2s,opacity .2s;box-shadow:0 10px 30px -10px rgba(146,119,240,.8),inset 0 1px 0 rgba(255,255,255,.3);text-align:center}
.btn:hover{transform:translateY(-2px)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.ghost{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line)}
.btn.sm{min-height:40px;padding:0 16px;font-size:14px}
.btn.wide{width:100%}.btn.danger{background:linear-gradient(135deg,#ef4444,#f97316);box-shadow:none}
.btn .arr{transition:transform .2s}html[dir=rtl] .btn .arr{transform:scaleX(-1)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:999px;padding:7px 14px;font-size:14px;cursor:pointer;color:var(--light);font-variant-numeric:tabular-nums}
.chip[aria-pressed=true]{background:var(--grad);border-color:transparent;color:#fff}
/* hero */
.hero{padding-top:88px}
.segbar{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.segbar-l{color:var(--muted);font-weight:600;flex:none}
.segs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 2px;margin:-4px 0;-webkit-mask-image:linear-gradient(to right,#000 85%,transparent);mask-image:linear-gradient(to right,#000 85%,transparent)}
html[dir=rtl] .segs{-webkit-mask-image:linear-gradient(to left,#000 85%,transparent);mask-image:linear-gradient(to left,#000 85%,transparent)}
.segs::-webkit-scrollbar{display:none}
.seg{flex:none;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--light);border-radius:999px;padding:9px 16px;font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .2s}
.seg:hover{background:rgba(255,255,255,.1)}
.seg[aria-selected=true]{background:#fff;color:var(--night);border-color:#fff}
.hero-grid{display:grid;gap:28px;align-items:center}
@media(min-width:1040px){.hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px}html .segs,html[dir=rtl] .segs{-webkit-mask-image:none;mask-image:none}}
.hero h1{font-size:clamp(34px,6.2vw,64px);line-height:1.12}
html[lang=en] .hero h1{line-height:1.05}
.tagline{font-size:clamp(18px,2.2vw,24px);font-weight:600;margin-top:14px;color:#fff}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px 16px;padding:0;margin:20px 0 0;list-style:none;color:var(--muted);font-size:14px}
.hero-facts li::before{content:"✓";color:var(--cyan);margin-inline-end:6px;font-weight:700}
.vs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:28px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03)}
.vs b{color:var(--lav);margin-inline-end:4px}
.vs span{padding:4px 12px;border-radius:999px;background:rgba(248,113,113,.08);color:#fbd5d5;font-size:14px}.vs span::before{content:"✕";color:#f87171;margin-inline-end:6px;font-weight:700}
/* tv */
.tv{background:#05040b;border-radius:14px;padding:clamp(5px,.8vw,9px);box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08),0 0 80px -20px rgba(91,123,255,.45);position:relative}
.tv::after{content:"";position:absolute;bottom:-12px;left:50%;width:22%;height:6px;transform:translateX(-50%);background:#16131f;border-radius:0 0 8px 8px}
.tv-scr{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:linear-gradient(160deg,#1b1240,#0b1530);container-type:inline-size;color:#fff}
.dm{display:grid;gap:22px;align-items:start}
.demo-note{color:var(--muted);font-size:13px;margin-top:12px}
.ed-h{font-size:13px;font-weight:600;color:var(--lav);margin-bottom:10px}
.spin{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;animation:sp .8s linear infinite;vertical-align:middle;margin-inline-end:8px}
@keyframes sp{to{transform:rotate(360deg)}}
.shake{animation:shk .35s}@keyframes shk{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.sh-toast{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.95);color:var(--night);padding:.6em 1.1em;border-radius:999px;font-size:clamp(11px,2.6cqw,18px);font-weight:600;white-space:nowrap;animation:up .35s}
@keyframes up{from{opacity:0;transform:translate(-50%,10px)}}
/* share */
.dm.share{grid-template-columns:1fr}
@media(min-width:760px){.dm.share:not(.compact){grid-template-columns:1.35fr 1fr;align-items:center}}
.sh-idle,.sh-live{position:absolute;inset:0}
.sh-idle{display:flex;flex-direction:column;padding:5cqw 6cqw;background:radial-gradient(80% 90% at 80% 10%,rgba(146,119,240,.35),transparent 60%),linear-gradient(160deg,#160f33,#0a1430)}
.sh-room{font-size:3cqw;color:var(--lav);font-weight:600}
.sh-main{flex:1;display:flex;align-items:center;justify-content:space-between;gap:5cqw}
.sh-txt p{font-size:4.2cqw;font-weight:700}
.sh-code{font:700 9.5cqw/1.1 Inter,monospace;letter-spacing:.06em;margin:1.5cqw 0;direction:ltr;text-align:start;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sh-code span{display:inline-block;width:2.2cqw}
.sh-txt small{font:500 2.4cqw Inter;color:var(--muted);direction:ltr;display:block}
.sh-idle .qr{width:24cqw;height:24cqw;border-radius:2cqw;flex:none}
.sh-bar{height:.7cqw;background:rgba(255,255,255,.1);border-radius:9px;overflow:hidden}
.sh-bar i{display:block;height:100%;background:var(--grad);animation:bar linear infinite;transform-origin:left}
@keyframes bar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.sh-conn{position:absolute;inset:0;display:grid;place-items:center;font-size:3.6cqw;background:rgba(5,4,11,.7)}

.slide{position:absolute;inset:0;padding:5cqw 6cqw;display:flex;flex-direction:column}
.sl-h b{display:block;font-size:4.6cqw}.sl-h span{font-size:2.4cqw;color:#5b5f7a}
.bars{flex:1;display:flex;align-items:flex-end;gap:2.5cqw;padding-top:4cqw;direction:ltr}
.bars i{flex:1;height:var(--v);background:var(--grad);border-radius:1cqw 1cqw 0 0;position:relative;animation:grow .7s var(--d) both cubic-bezier(.2,.8,.2,1);transform-origin:bottom}
.bars em{position:absolute;bottom:-3.4cqw;left:0;right:0;text-align:center;font:500 2cqw Inter;color:#5b5f7a;font-style:normal}
@keyframes grow{from{transform:scaleY(0)}}
.sh-badge{position:absolute;top:2.5cqw;inset-inline-end:2.5cqw;background:rgba(14,10,31,.85);color:#fff;padding:.8cqw 2cqw;border-radius:9px;font-size:2.3cqw}
.rec{position:absolute;top:2.5cqw;left:50%;transform:translateX(-50%);background:#dc2626;color:#fff;font:700 2.3cqw Inter;padding:.8cqw 1.8cqw;border-radius:9px;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.55}}
.sender{border:1px solid var(--line);border-radius:16px;background:rgba(20,15,45,.9);overflow:hidden}
.bbar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:rgba(255,255,255,.05);border-bottom:1px solid var(--line)}
.bbar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2)}
.bbar span{margin-inline-start:8px;font:500 12px Inter;color:var(--muted);direction:ltr;background:rgba(0,0,0,.25);padding:3px 10px;border-radius:8px;flex:1;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sender-body{padding:16px}
.sh-form label{display:block;font-size:13px;color:var(--muted);margin:2px 0 6px}
.otp{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:12px}
.otp input{width:100%;min-width:0;height:48px;text-align:center;font:700 20px Inter;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.3);text-transform:uppercase;padding:0}
.otp input:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 0 3px rgba(31,182,232,.25)}
.nm{width:100%;height:44px;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.3);padding:0 12px}
.err{color:var(--bad);font-size:13px;min-height:1.3em;margin:6px 0}
.sh-btns{display:flex;flex-wrap:wrap;gap:8px}.sh-btns .btn{flex:1 1 auto;min-height:44px;font-size:15px;padding:0 16px}
.sh-wait{color:var(--muted);padding:14px 0}
.sh-on .ok{color:var(--ok);font-weight:600;margin-bottom:12px}
.sw{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--light);margin:10px 0 14px;cursor:pointer}
.sw input{width:20px;height:20px;accent-color:var(--violet);flex:none;margin-top:2px}
.dm.compact .sender-body{padding:12px}
/* menu */
.dm.menu{grid-template-columns:1fr}
@media(min-width:760px){.dm.menu:not(.compact){grid-template-columns:1.35fr 1fr}}
.mb{position:absolute;inset:0;display:grid;grid-template-columns:1.25fr 1fr;background:#120d07;color:#f8efe4}
.mb-l{padding:3.2cqw 4cqw;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.mb-h b{display:block;font-size:3.9cqw;line-height:1.25;color:#f5c27a}.mb-h span{font-size:2.1cqw;line-height:1.3;color:#b9a68f}
.mb ul{list-style:none;padding:0;margin:1.8cqw 0 0;flex:1;display:flex;flex-direction:column;justify-content:space-evenly;min-height:0}
.mb li{display:flex;align-items:baseline;gap:1.2cqw;font-size:2.7cqw;line-height:1.3;padding:.45cqw .8cqw;border-radius:1cqw;transition:background .4s}
.mb li i{flex:1;border-bottom:.25cqw dotted rgba(248,239,228,.3)}
.mb li b{font-family:Inter,"Plex Ar";white-space:nowrap}.mb li small{font-size:1.9cqw;color:#b9a68f}
.mb li.out span,.mb li.out i{opacity:.4;text-decoration:line-through}.mb li.out b{color:#f87171;font-size:2.4cqw}
.mb li.flash{animation:fl 1.2s}@keyframes fl{0%,40%{background:rgba(245,194,122,.35)}}
.mb-r{position:relative;overflow:hidden}.mb-r>img{width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.mb-offer{position:absolute;inset:0;animation:up2 .4s}.mb-offer img{width:100%;height:100%;object-fit:cover;object-position:28% 50%}
.mb-offer p{position:absolute;bottom:0;inset-inline:0;padding:2cqw 2.5cqw;gap:2cqw;background:linear-gradient(transparent,rgba(0,0,0,.85));display:flex;justify-content:space-between;align-items:end}
.mb-offer b{font-size:3cqw}.mb-offer span{font:700 3.6cqw Inter;color:#f5c27a}
@keyframes up2{from{opacity:0}}
.editor{border:1px solid var(--line);border-radius:16px;background:rgba(20,15,45,.9);padding:14px}
.ed-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.stepper button{width:34px;height:36px;border:0;background:rgba(255,255,255,.06);cursor:pointer;font-size:18px}
.stepper input{width:44px;height:36px;border:0;background:transparent;text-align:center;font:600 15px Inter;-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none}
.mini{font-size:12px;color:var(--muted);display:flex;gap:4px;align-items:center;cursor:pointer}.mini input{accent-color:var(--violet)}
/* queue / booth / camp controls */
.dm.queue,.dm.booth,.dm.camp{grid-template-columns:1fr}
@media(min-width:760px){.dm.queue:not(.compact),.dm.booth:not(.compact),.dm.camp:not(.compact){grid-template-columns:1.35fr 1fr}}
.qctl{display:grid;gap:12px}
.qbox{border:1px solid var(--line);border-radius:16px;background:rgba(20,15,45,.9);padding:14px}
.qk{display:flex;gap:8px;flex-wrap:wrap}.qk .btn{flex:1}
.ticket{margin-top:10px;min-height:1.6em;color:var(--muted)}.ticket b{color:#fff;font-family:Inter}
.qbox .btn.call,.qbox .btn.reg,.qbox .btn.go{width:100%}
.qwait{margin-top:10px;color:var(--muted);font-size:14px;min-height:1.4em}
.qd{position:absolute;inset:0;display:grid;grid-template-columns:1.4fr 1fr;background:linear-gradient(150deg,#062a3a,#0b1530)}
.q-now{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqw;border-inline-end:.3cqw solid rgba(255,255,255,.08)}
.q-now small{font-size:3cqw;color:#9fdcf0}.q-now b{font:800 13cqw/1 Inter;letter-spacing:-.02em}.q-now span{font-size:4cqw;font-weight:600;color:#9fdcf0}
.q-now.flash{animation:qf 1.4s}@keyframes qf{0%,30%{background:rgba(31,182,232,.35)}}
.q-side{padding:4cqw 3.5cqw}.q-side p{font-size:2.6cqw;color:#9fdcf0}
.q-side ul{list-style:none;padding:0;margin:1.5cqw 0}.q-side li{display:flex;justify-content:space-between;font-size:3cqw;padding:1.2cqw 0;border-bottom:.2cqw solid rgba(255,255,255,.08)}
.q-side li b{font-family:Inter}.q-side li span{color:#cbd5e1;font-size:2.4cqw}.q-w b{font:700 3.4cqw Inter;color:#fff}
/* wall */
.dm.wall{grid-template-columns:1fr}
@media(min-width:760px){.dm.wall:not(.compact){grid-template-columns:1.35fr 1fr;align-items:center}}
.wall-stage{background:linear-gradient(#1b1630,#0c0a18);border-radius:16px;padding:clamp(12px,3vw,26px);display:grid;place-items:center;border:1px solid var(--line);min-height:200px}
.wgrid{display:grid;gap:3px;width:100%;background:#000;padding:3px;border-radius:6px;box-shadow:0 20px 50px -20px rgba(0,0,0,.8);position:relative;overflow:hidden;margin-inline:auto}
.wimg{position:absolute;inset:3px;background-size:cover;background-repeat:no-repeat}
.wgrid i{position:relative;z-index:1;border-radius:1px;min-height:0;box-shadow:0 0 0 1.5px #000;background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,0) 38%,rgba(0,0,0,.05))}
.wgrid em{position:absolute;top:3px;inset-inline-start:4px;font:600 9px Inter;color:rgba(255,255,255,.55);font-style:normal;text-shadow:0 1px 2px #000}
.wtxt{position:absolute;z-index:2;container-type:size;display:grid;place-items:center;padding:3%;pointer-events:none}
.wcard{max-width:88cqw;max-height:86cqh;overflow:hidden;padding:7cqh 7cqw;border-radius:4cqh;background:linear-gradient(160deg,rgba(14,10,31,.78),rgba(14,10,31,.58));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;color:#fff;text-align:start;line-height:1.15}
.wcard small{display:block;font-size:max(6px,8cqh);font-weight:600;color:var(--lav);letter-spacing:.02em;margin-bottom:3cqh}
.wcard b{display:block;font-size:max(9px,17cqh);font-weight:700;margin-bottom:3cqh;background:linear-gradient(90deg,#fff,#d9d2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.wcard span{display:block;font-size:max(6px,8.5cqh);color:rgba(255,255,255,.88);line-height:1.35}
.wtxt.cap{place-items:end start;align-content:end}
.wcap{font-size:max(6px,8cqh);font-weight:600;color:#fff;padding:2.5cqh 4cqw;border-radius:99px;background:rgba(14,10,31,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.wgrid{transition:opacity .2s ease}@keyframes wf{from{filter:brightness(0)}}
.wctl{border:1px solid var(--line);border-radius:16px;background:rgba(20,15,45,.9);padding:14px}.wctl .chips{margin-bottom:14px}
.wnote{color:var(--muted);font-size:14px}
.dm.compact .wctl .ed-h{margin-bottom:6px}
/* booth */
.bt{position:absolute;inset:0;background:url(img/share-bg-960.webp?v=gl1) center/cover}
.bt-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,10,31,.85),rgba(14,10,31,.2))}
html[dir=rtl] .bt-bg{background:linear-gradient(270deg,rgba(14,10,31,.85),rgba(14,10,31,.2))}
.bt-c{position:absolute;top:10%;inset-inline-start:6%;max-width:60%}.bt-c small{font-size:2.6cqw;color:var(--lav)}.bt-c b{display:block;font-size:5.4cqw;line-height:1.2;animation:up2 .5s}
.bt-q{position:absolute;bottom:7%;inset-inline-end:5%;background:#fff;color:var(--night);border-radius:2cqw;padding:1.5cqw;text-align:center;font-size:2.2cqw;font-weight:600}
.bt-q .qr{width:16cqw;height:16cqw}
.bt-n{position:absolute;bottom:8%;inset-inline-start:6%;font-size:3cqw;background:rgba(0,0,0,.4);padding:1cqw 2cqw;border-radius:9px}.bt-n b{font-family:Inter}
/* campaign */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cs .cs-s{aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000;border:3px solid #05040b;position:relative;container-type:inline-size}
.cs .cs-s img{width:100%;height:100%;object-fit:cover}
.cs p{font-size:13px;color:var(--muted);margin-top:4px;display:flex;flex-wrap:wrap;gap:4px;justify-content:space-between}.cs p em{color:var(--ok);font-style:normal;font-family:Inter;font-size:11px}
.promo{position:absolute;inset:0;background:linear-gradient(135deg,#0b0b0b,#2b2b2b);display:flex;flex-direction:column;align-items:center;justify-content:center;animation:up2 .4s;color:#fff}
.promo b{font:800 22cqw/1 Inter;background:linear-gradient(90deg,#fff,#c9bcff);-webkit-background-clip:text;background-clip:text;color:transparent}.promo span{font-size:10cqw;font-weight:700}

.lines{list-style:none;padding:0;margin:12px 0 0}
.lines li{display:grid;grid-template-columns:auto auto 1fr;gap:4px 10px;padding:8px 0;border-bottom:1px solid var(--line);animation:up2 .4s;font-size:14px}
.lines b{color:var(--lav)}.lines time{font:500 12px Inter;color:var(--muted);padding-top:2px}.lines span{grid-column:1/-1}@keyframes up3{from{opacity:0;transform:translateY(8px)}}
/* hero demo */
.hero-demo{min-width:0}
.hero-demo .dm{gap:14px}
@media(min-width:600px){.hero-demo .dm.share.compact,.hero-demo .dm.menu.compact,.hero-demo .dm.queue.compact,.hero-demo .dm.booth.compact,.hero-demo .dm.camp.compact,.hero-demo .dm.wall.compact{grid-template-columns:1.45fr 1fr;align-items:center}}
@media(min-width:1040px){.hero-demo .dm.compact{grid-template-columns:1fr!important}.hero-demo .dm.compact .sender,.hero-demo .dm.compact .editor,.hero-demo .dm.compact .qctl,.hero-demo .dm.compact .wctl{max-width:none}}
.hero-demo .dm.camp .cgrid{grid-template-columns:repeat(3,1fr)}
.hero-demo .editor .ed-row{padding:4px 0}
/* features */
.feat-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:620px){.feat-grid{grid-template-columns:1fr 1fr}}@media(min-width:1000px){.feat-grid{grid-template-columns:repeat(3,1fr)}}
.feat{padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.feat .ic{width:30px;height:30px;color:var(--cyan);margin-bottom:12px}
.feat h3{margin-bottom:6px}.feat p{color:var(--muted);font-size:15px}
.new{font-style:normal;font-size:12px;font-weight:700;background:var(--grad);color:#fff;padding:2px 9px;border-radius:999px;vertical-align:middle}
.feat-shot{margin:24px auto 0;max-width:880px}.feat-shot img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.feat-shot figcaption{color:var(--muted);font-size:13px;margin-top:8px}



/* how */
.how{display:grid;gap:30px;align-items:center}@media(min-width:900px){.how{grid-template-columns:1.1fr .9fr}}
.steps{list-style:none;counter-reset:s;padding:0;margin:24px 0 0;display:grid;gap:14px}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:2px 14px}
.steps li::before{content:counter(s);grid-row:span 2;width:44px;height:44px;border-radius:12px;background:var(--grad);display:grid;place-items:center;font:700 18px Inter}
.steps span{color:var(--muted)}.device{margin:0}.device img{width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line)}
/* pricing */
.pack-hero{margin-bottom:22px}.ph-l{color:var(--lav);font-weight:600;margin-bottom:10px}
.pack{padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);display:flex;flex-direction:column}
.pack.big{background:linear-gradient(160deg,rgba(146,119,240,.18),rgba(31,182,232,.08));border-color:rgba(146,119,240,.5);display:grid;gap:8px 24px}
@media(min-width:800px){.pack.big{grid-template-columns:1fr 1fr auto;align-items:center}.pack.big ul{grid-row:1/span 3;grid-column:2}.pack.big .btn{grid-column:3;grid-row:1/span 3}}
.pack .price{margin-top:6px}.pack .price b{font:700 32px Inter}.pack .price small{display:block;color:var(--muted);font-size:13px}
.pack .ref{color:var(--muted);font-size:13px}.pack .ref s{font-family:Inter}
.pack ul{margin:12px 0 0;padding:0;list-style:none;font-size:14px;display:grid;gap:4px}.pack li::before{content:"✓ ";color:var(--cyan)}
.pack.cur:not(.big){border-color:var(--violet)}
.plans{display:grid;gap:12px;grid-template-columns:1fr;margin-bottom:14px}@media(min-width:800px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}.plan.hot{border-color:rgba(31,182,232,.6)}
.plan .price b{font:700 36px Inter}.plan .price small{color:var(--muted);font-size:13px;margin-inline-start:6px}
.plan .for{color:var(--lav);font-size:14px;margin:4px 0 8px}.plan .inc{color:var(--muted);font-size:14px}
.addons{display:grid;gap:10px;grid-template-columns:1fr 1fr}@media(min-width:900px){.addons{grid-template-columns:repeat(4,1fr)}}
.addon{padding:14px;border:1px dashed var(--line);border-radius:14px;font-size:14px}.addon b{display:block}.addon span{color:var(--muted)}
.calc{margin-top:40px;display:grid;gap:18px;padding:clamp(16px,3vw,28px);border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.03)}
@media(min-width:900px){.calc{grid-template-columns:1fr 1.1fr;gap:32px}}
.calc h3{margin-bottom:14px}
.f{display:grid;gap:6px;margin-bottom:14px;font-size:14px;color:var(--muted)}
.f input:not([type=range]):not([type=checkbox]),.f select,.f textarea{height:46px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.3);padding:0 12px;color:#fff;width:100%;font-size:16px}
.f textarea{height:auto;padding:10px 12px;resize:vertical}
.f select option{background:#1a1033}
.f output{font:700 16px Inter;color:#fff}
.f input[type=range]{width:100%;accent-color:var(--violet);height:28px}
.f.chk{display:flex;gap:10px;align-items:center;color:var(--light)}.f.chk input{width:20px;height:20px;accent-color:var(--violet)}
[hidden]{display:none!important}
.calc-out{background:rgba(14,10,31,.6);border:1px solid var(--line);border-radius:18px;padding:18px}
.lines-c{list-style:none;padding:0;margin:0}.lines-c li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:15px}.lines-c b{font-family:Inter;white-space:nowrap}
.total{display:flex;align-items:baseline;gap:8px;margin-top:12px}.total span{flex:1;font-weight:600}.total b{font:700 34px Inter}
.foot{color:var(--muted);font-size:14px}.est{color:var(--muted);font-size:12px;margin-top:8px}
.cmp{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}.cmp p{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:3px 0}.cmp p b{font-family:Inter;white-space:nowrap}
.cmp .save{color:var(--ok);font-weight:600}.cmp p.est{display:block}
.hint{margin-top:12px;font-size:14px;color:var(--lav)}
/* trust & faq */
.trust{display:grid;gap:12px;grid-template-columns:1fr}@media(min-width:700px){.trust{grid-template-columns:1fr 1fr}}@media(min-width:1000px){.trust{grid-template-columns:repeat(3,1fr)}}
.trust div{padding:18px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}.trust b{display:block;margin-bottom:4px}.trust span{color:var(--muted);font-size:15px}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";color:var(--cyan);font:400 24px/1 Inter}
.faq details[open] summary::after{content:"−"}.faq p{color:var(--muted);margin-top:10px}
/* preorder */
.po{display:grid;gap:28px}@media(min-width:900px){.po{grid-template-columns:1fr 1fr;align-items:start}}
.po-pts{padding:0;list-style:none;margin:18px 0 0;display:grid;gap:8px}.po-pts li::before{content:"✓ ";color:var(--cyan);font-weight:700}
.po-form{padding:clamp(16px,3vw,28px);border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.04)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.po-msg{margin-top:12px;min-height:1.4em;font-size:15px}.po-msg.good{color:var(--ok)}.po-msg.bad{color:var(--bad)}
footer{padding:44px 0 36px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:6px 18px}footer nav a{text-decoration:none}
@media(max-width:420px){.hero h1{font-size:32px}.btn{padding:0 18px}.nav .btn.sm{padding:0 12px}.brand small{display:none}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}}

@media(max-width:639px){.plans{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-inline:calc(var(--pad)*-1);padding:2px var(--pad) 8px;scrollbar-width:none}
.plans::-webkit-scrollbar{display:none}.plans>.plan{flex:0 0 82%;scroll-snap-align:center}
.swipe{display:block;color:var(--muted);font-size:13px;margin:-6px 0 10px}}
@media(min-width:640px){.swipe{display:none}}

/* image fit pass (Oct 19) */

.cs .cs-s img{object-position:0 50%}
.cs-tag{position:absolute;inset-block:0;inset-inline-start:50%;inset-inline-end:0;display:flex;flex-direction:column;justify-content:center;gap:1.5cqw;padding-inline:4cqw;color:#fff;line-height:1.2}
html[dir=rtl] .cs-tag{inset-inline-start:0;inset-inline-end:50%}
.cs-tag small{font-size:5.6cqw;color:#c9bcff;font-weight:600}
.cs-tag b{font-size:7.6cqw;font-weight:700;overflow-wrap:anywhere}
.cgrid{display:flex;flex-wrap:wrap;justify-content:center}
.cgrid .cs{flex:0 0 calc((100% - 20px)/3);min-width:0}

.promo{background:#0b0b0b}
.cs .cs-s .promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.promo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,5,12,.82) 0%,rgba(6,5,12,.55) 45%,rgba(6,5,12,0) 75%)}
.promo-tx{position:absolute;left:0;top:0;bottom:0;width:55%;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.promo-tx b{font:800 18cqw/1 Inter;background:linear-gradient(90deg,#fff,#ffe7a8);-webkit-background-clip:text;background-clip:text;color:transparent}
.promo-tx span{font-size:8cqw;font-weight:700;margin-top:2cqw}

/* shared slide: Q4 dashboard */
.sh-live{background:#0b1030;color:#fff}
.db{position:absolute;inset:0;display:flex;flex-direction:column;gap:1.4cqw;padding:2.6cqw 3.2cqw 2.8cqw;background:linear-gradient(180deg,rgba(9,11,38,.93) 0%,rgba(13,14,48,.86) 55%,rgba(16,14,52,.66) 100%),url(img/dash-skyline.webp?v=gl1) center 78%/cover;font-family:var(--font)}
.db::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 85% 0%,rgba(146,119,240,.28),transparent 60%),radial-gradient(50% 60% at 0% 100%,rgba(31,182,232,.18),transparent 60%);pointer-events:none}
.db>*{position:relative}
.db-h{display:flex;align-items:center;gap:1.6cqw}
.db-h b{display:block;font-size:3.5cqw;font-weight:700;line-height:1.15}
.db-h span{display:block;font-size:1.8cqw;color:#aab3e6;margin-top:.3cqw}
.db-h em{font:600 1.6cqw Inter,sans-serif;font-style:normal;padding:.5cqw 1.3cqw;border-radius:99px;background:linear-gradient(135deg,rgba(146,119,240,.35),rgba(31,182,232,.3));border:.12cqw solid rgba(255,255,255,.18);align-self:flex-start;margin-top:.6cqw}
.db-c{background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.04));border:.12cqw solid rgba(255,255,255,.14);border-radius:1.6cqw;padding:1.3cqw 1.7cqw;box-shadow:0 1cqw 3cqw -1cqw rgba(0,0,0,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.db-c small{display:block;font-size:1.65cqw;color:#b9c1ee;font-weight:500}
.db-k{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw}
.db-k b{display:block;font:700 3.5cqw/1.1 Inter,var(--font);margin:.6cqw 0 .4cqw;text-align:start;letter-spacing:-.01em}
.db-k span{display:flex;align-items:center;gap:.8cqw;font-size:1.5cqw;color:#9aa3d6}
.db-k i{font:600 1.45cqw Inter,sans-serif;font-style:normal;color:#34d399;background:rgba(52,211,153,.14);padding:.2cqw .8cqw;border-radius:99px}
.db-m{flex:1;min-height:0;display:grid;grid-template-columns:1.9fr 1fr;gap:1.6cqw}
.db-chart{display:flex;flex-direction:column;min-height:0}
.db-ct{display:flex;align-items:center;justify-content:space-between;gap:1cqw}
.db-lg{display:flex;align-items:center;gap:.6cqw;font-size:1.4cqw;color:#9aa3d6}
.db-lg i{width:1.3cqw;height:1.3cqw;border-radius:.35cqw;background:var(--grad);margin-inline-start:.8cqw}
.db-lg i.t{background:repeating-linear-gradient(135deg,rgba(124,140,255,.75) 0 .35cqw,rgba(124,140,255,.3) .35cqw .7cqw)}
.db-bars{flex:1;min-height:0;display:flex;align-items:stretch;gap:2cqw;direction:ltr;margin-top:1cqw;padding:2.4cqw .6cqw 0;background:repeating-linear-gradient(to top,rgba(255,255,255,.07) 0 .1cqw,transparent .1cqw 25%)}
[dir=rtl] .db-bars{flex-direction:row-reverse}
.db-b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch}
.db-b i{display:block;height:var(--v);background:var(--grad);border-radius:.8cqw .8cqw .2cqw .2cqw;position:relative;animation:grow .7s var(--d) both cubic-bezier(.2,.8,.2,1);transform-origin:bottom;box-shadow:0 0 2cqw -.5cqw rgba(91,123,255,.7)}
.db-b.t i{background:repeating-linear-gradient(135deg,rgba(124,140,255,.85) 0 .5cqw,rgba(124,140,255,.45) .5cqw 1cqw);box-shadow:inset 0 0 0 .15cqw rgba(160,170,255,.8)}
.db-b u{position:absolute;bottom:100%;left:0;right:0;text-align:center;text-decoration:none;font:600 1.55cqw Inter,sans-serif;color:#fff;padding-bottom:.4cqw}
.db-b em{font-style:normal;text-align:center;font-size:1.45cqw;color:#9aa3d6;padding-top:.6cqw;white-space:nowrap}
.db-pie{display:flex;flex-direction:column;align-items:center;min-height:0}
.db-pie small{align-self:stretch}
.db-donut{width:10.5cqw;aspect-ratio:1;border-radius:50%;margin:.8cqw 0 .9cqw;background:conic-gradient(#7c8cff 0 var(--a),#22c3ee var(--a) var(--b),#a78bfa var(--b) 360deg);display:grid;place-items:center;position:relative;flex:none}
.db-donut::after{content:"";position:absolute;inset:1.7cqw;border-radius:50%;background:#141640}
.db-donut span{position:relative;z-index:1;text-align:center;font-size:1.3cqw;color:#9aa3d6;line-height:1.2}
.db-donut span b{display:block;font:700 2.2cqw Inter,sans-serif;color:#fff}
.db-pie ul{list-style:none;padding:0;margin:0;align-self:stretch;display:grid;gap:.35cqw}
.db-pie li{display:flex;align-items:center;gap:.8cqw;font-size:1.45cqw;color:#cfd5f5}
.db-pie li i{width:1.2cqw;height:1.2cqw;border-radius:50%;flex:none}
.db-pie li b{margin-inline-start:auto;font:600 1.45cqw Inter,sans-serif;color:#fff}
.sh-badge{z-index:2;background:rgba(10,12,40,.82);border:.12cqw solid rgba(255,255,255,.18);backdrop-filter:blur(4px)}

/* queue screen themes: clinic / bank */
.qd.th-clinic,.qd.th-bank{gap:3cqw;padding:4.2cqw 4.6cqw}
.qd.th-clinic{--qa:#7ee8dc;--qb:rgba(4,48,56,.62);background:linear-gradient(150deg,rgba(3,38,46,.5),rgba(4,46,56,.18) 60%,rgba(3,30,40,.45)),var(--qbg) center/cover}
.qd.th-bank{--qa:#e8c56f;--qb:rgba(8,14,40,.66);background:linear-gradient(150deg,rgba(5,10,32,.45),rgba(8,16,44,.12) 60%,rgba(5,10,30,.45)),var(--qbg) center/cover}
.qd.th-clinic .q-now,.qd.th-bank .q-now,.qd.th-clinic .q-side,.qd.th-bank .q-side{background:var(--qb);border:.15cqw solid rgba(255,255,255,.16);border-radius:2cqw;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 1.5cqw 4cqw -1.5cqw rgba(0,0,0,.6)}
.qd.th-clinic .q-now,.qd.th-bank .q-now{border-inline-end:.15cqw solid rgba(255,255,255,.16)}
.qd.th-clinic .q-side,.qd.th-bank .q-side{padding:2.6cqw 2.8cqw}
.qd[class*=th-] .q-now small,.qd[class*=th-] .q-now span,.qd[class*=th-] .q-side p{color:var(--qa)}
.qd[class*=th-] .q-now b{text-shadow:0 .4cqw 2cqw rgba(0,0,0,.45)}
.qd[class*=th-] .q-side p.q-pl{font-size:2cqw;color:#fff;opacity:.85;letter-spacing:.02em;margin-bottom:1.4cqw;padding-bottom:1.2cqw;border-bottom:.2cqw solid var(--qa)}
.qd.th-bank .q-now b{color:#fff;text-shadow:0 0 3cqw rgba(232,197,111,.45),0 .4cqw 1.5cqw rgba(0,0,0,.5)}
.qtheme{display:flex;gap:8px}
.qtheme .chip{flex:1;text-align:center}
.sh-idle{background:radial-gradient(80% 90% at 80% 10%,rgba(146,119,240,.32),transparent 60%),linear-gradient(170deg,rgba(22,15,51,.95) 35%,rgba(10,20,48,.78)),url(img/dash-skyline.webp?v=gl1) center 85%/cover}
.qk .btn{white-space:nowrap;padding-inline:10px;min-width:0}

/* ===== clickable affordance: hover / press / focus on every control in the demos ===== */
.dm button:not(:disabled),.dm .sw,.dm .mini,.dm .mini input,.dm .sw input,.chip,.seg,.lang,#cPlan .chip{cursor:pointer}
.btn,.chip,.seg,.stepper button,.lang,.dm .sw,.dm .mini{transition:transform .15s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease,filter .2s ease}
@media (hover:hover){
 .btn:not(:disabled):hover{filter:brightness(1.12);box-shadow:0 10px 26px -10px rgba(91,123,255,.75),0 0 0 2px rgba(146,119,240,.45)}
 .btn.ghost:not(:disabled):hover{background:rgba(146,119,240,.18);box-shadow:inset 0 0 0 1px rgba(146,119,240,.7),0 8px 22px -12px rgba(146,119,240,.8)}
 .btn.danger:hover{box-shadow:0 10px 26px -10px rgba(239,68,68,.7)}
 .chip:not([aria-pressed=true]):hover{background:rgba(146,119,240,.16);border-color:rgba(146,119,240,.65);color:#fff;transform:translateY(-1px)}
 .chip[aria-pressed=true]:hover{filter:brightness(1.1)}
 .seg:not([aria-selected=true]):hover{background:rgba(146,119,240,.16);border-color:rgba(146,119,240,.6);color:#fff}
 .stepper button:hover{background:rgba(146,119,240,.35);color:#fff}
 .dm .sw:hover,.dm .mini:hover{color:#fff}
 .lang:hover{background:rgba(146,119,240,.18);border-color:rgba(146,119,240,.6)}
}
.btn:not(:disabled):active,.chip:active,.seg:active,.stepper button:active,.lang:active{transform:scale(.97)}
.btn:focus-visible,.chip:focus-visible,.seg:focus-visible,.stepper button:focus-visible,.lang:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;box-shadow:0 0 0 5px rgba(31,182,232,.22)}
.dm .sw:focus-within,.dm .mini:focus-within{color:#fff}

/* ===== the one control to press next: blinks on and off with a ring, plus a small «اضغط هنا» chip ===== */
.hint-on{position:relative;z-index:2;animation:hintPulse 1.6s ease-in-out infinite}
.dm .sw.hint-on,.dm .mini.hint-on{border-radius:12px;padding:6px 8px;margin-inline:-8px;background:rgba(31,182,232,.10)}
.dm .mini.hint-on{margin-inline:0;padding:4px 6px}
.stepper button.hint-on{background:rgba(31,182,232,.35);color:#fff;z-index:3}
.chip.hint-on:not([aria-pressed=true]),.btn.ghost.hint-on{border-color:rgba(31,182,232,.9);box-shadow:inset 0 0 0 1px rgba(31,182,232,.9)}
.hint-on::after{content:attr(data-hint);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:#1FB6E8;color:#06121c;font:700 11px/1 var(--font);padding:5px 9px 6px;border-radius:999px;white-space:nowrap;pointer-events:none;box-shadow:0 4px 14px -4px rgba(31,182,232,.9);animation:hintBob 1.6s ease-in-out infinite;z-index:5;letter-spacing:0}
.hint-on::before{content:"";position:absolute;bottom:calc(100% + 2px);left:50%;margin-left:-5px;border:5px solid transparent;border-bottom:0;border-top-color:#1FB6E8;pointer-events:none;animation:hintBob 1.6s ease-in-out infinite;z-index:5}
.dm .sw.hint-on::after,.dm .sw.hint-on::before{left:auto;inset-inline-end:14px;transform:none}
.dm .sw.hint-on::before{margin-left:0;inset-inline-end:34px}
@keyframes hintPulse{0%,100%{box-shadow:0 0 0 0 rgba(31,182,232,.75),0 0 0 2px rgba(31,182,232,.9);filter:brightness(1)}50%{box-shadow:0 0 0 10px rgba(31,182,232,0),0 0 22px 4px rgba(31,182,232,.55);filter:brightness(1.28)}}
@keyframes hintBob{0%,100%{translate:0 0}50%{translate:0 -3px}}
.hint-off .hint-on,.hint-off .hint-on::after,.hint-off .hint-on::before{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
 .hint-on,.hint-on::after,.hint-on::before{animation:none}
 .hint-on{box-shadow:0 0 0 2px #1FB6E8,0 0 18px 2px rgba(31,182,232,.5)}
 .btn,.chip,.seg,.stepper button,.lang{transition:none}
 .btn:not(:disabled):active,.chip:active,.seg:active,.stepper button:active{transform:none}
}

.fsegbar{margin-bottom:18px}
#features .fsegbar .segs{flex:1;min-width:0}
.stepper:has(.hint-on){overflow:visible}
.stepper button.hint-on:last-child{border-radius:0 9px 9px 0}
.stepper button.hint-on:first-child{border-radius:9px 0 0 9px}

/* ===== AI Designer ===== */
#ai .sec-head .eyebrow .new{margin-inline-start:6px}
.aid{display:grid;gap:22px;align-items:start;grid-template-columns:minmax(0,1fr)}
.aid-panel,.aid-stage{min-width:0}
.aid-panel{grid-template-columns:minmax(0,1fr)}
.aid-panel>*{min-width:0}
.aid-sugs .chip{white-space:normal}
@media (min-width:900px){.aid{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}}
.aid-panel{border:1px solid var(--line);border-radius:16px;background:rgba(20,15,45,.9);padding:16px;display:grid;gap:12px}
.aid-panel .ed-h{display:flex;align-items:center;gap:6px;margin:0}
.aid-panel .ed-h .ic{width:18px;height:18px;color:var(--cyan)}
.aid-in{display:flex;gap:8px;align-items:stretch;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;padding:6px}
.aid-in:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(31,182,232,.2)}
.aid-in input{flex:1;min-width:0;background:transparent;border:0;color:#fff;font:500 15px/1.4 var(--font);padding:8px 10px;outline:none}
.aid-in input::placeholder{color:var(--muted)}
.aid-in .btn{min-height:44px;padding:0 18px;font-size:15px;flex:none}
.aid-sugs{display:flex;flex-wrap:wrap;gap:8px}
.aid-sugs .chip{flex:0 1 auto;text-align:start;font-size:13px;padding:7px 12px}
.aid-think{display:grid;gap:10px}
.aid-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.aid-steps li{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;transition:color .2s}
.aid-steps li i{width:18px;height:18px;border-radius:50%;border:2px solid rgba(201,188,255,.25);flex:none;position:relative}
.aid-steps li.on{color:#fff}
.aid-steps li.on i{border-color:var(--cyan);border-top-color:transparent;animation:sp .8s linear infinite}
.aid-steps li.ok{color:var(--light)}
.aid-steps li.ok i{background:var(--ok);border-color:var(--ok)}
.aid-steps li.ok i::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #06121c;border-width:0 2px 2px 0;transform:rotate(45deg)}
.aid-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.aid-bar i{display:block;height:100%;width:0;background:var(--grad);border-radius:99px}
.aid-clock{margin:0;font:600 13px Inter;color:var(--muted);text-align:end}
.aid-ready{margin:0 0 26px;color:var(--light);font-size:14px}
.aid-ready b{color:var(--ok)}
.aid-stage{min-width:0}
.aid-out{position:absolute;inset:0}
.aid-empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;color:var(--muted);background:radial-gradient(circle at 50% 40%,rgba(91,123,255,.18),transparent 60%)}
.aid-empty .ic{width:clamp(28px,7cqw,54px);height:auto;color:var(--lav);opacity:.8}
.aid-empty p{margin:0;font-size:clamp(12px,2.6cqw,18px)}
.aid-skel{position:absolute;inset:0;padding:9% 8%;display:flex;flex-direction:column;gap:4cqw;justify-content:center;background:linear-gradient(110deg,#141033 30%,#1f1850 50%,#141033 70%);background-size:300% 100%;animation:aidShim 1.2s linear infinite}
.aid-skel i,.aid-skel b{display:block;height:4cqw;border-radius:99px;background:rgba(255,255,255,.09)}
.aid-skel i:nth-child(1){width:22%}.aid-skel i:nth-child(2){width:55%;height:7cqw}.aid-skel i:nth-child(3){width:40%}.aid-skel b{width:18%;height:6cqw;background:rgba(31,182,232,.22)}
@keyframes aidShim{to{background-position:-300% 0}}
.aid-res{position:absolute;inset:0;animation:aidIn .6s ease both}
@keyframes aidIn{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
.aid-gl{margin:26px 0 10px;font-weight:600;color:var(--light)}
.aid-gal{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);gap:10px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 8px}
.aid-gal::-webkit-scrollbar{display:none}
.aid-th{background:none;border:0;padding:0;color:var(--muted);text-align:start;font:500 12px/1.3 var(--font);display:grid;gap:6px;cursor:pointer;border-radius:12px}
.aid-mini{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;container-type:inline-size;border:1px solid var(--line);transition:transform .2s,box-shadow .2s,border-color .2s}
.aid-th[aria-pressed=true] .aid-mini{border-color:var(--cyan);box-shadow:0 0 0 2px var(--cyan)}
.aid-th[aria-pressed=true]{color:#fff}
@media (hover:hover){.aid-th:hover .aid-mini{transform:translateY(-2px);border-color:rgba(146,119,240,.7);box-shadow:0 12px 26px -14px rgba(91,123,255,.9)}.aid-th:hover{color:#fff}}
.aid-th:active .aid-mini{transform:scale(.97)}
/* the designs: crisp HTML text over a photoreal background, scaled by the screen width (cqw) */
.ad{position:absolute;inset:0;overflow:hidden;color:#fff;font-family:var(--font)}
.ad-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.ad[dir=ltr] .ad-bg{transform:scaleX(-1)}
.ad::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to left,rgba(9,7,24,.92) 0%,rgba(9,7,24,.7) 38%,rgba(9,7,24,0) 72%)}
.ad[dir=ltr]::before{background:linear-gradient(to right,rgba(9,7,24,.92) 0%,rgba(9,7,24,.7) 38%,rgba(9,7,24,0) 72%)}
.ad.th-light{color:#0d2a33}
.ad.th-light::before{background:linear-gradient(to left,rgba(255,255,255,.95) 0%,rgba(255,255,255,.82) 40%,rgba(255,255,255,0) 74%)}
.ad.th-light[dir=ltr]::before{background:linear-gradient(to right,rgba(255,255,255,.95) 0%,rgba(255,255,255,.82) 40%,rgba(255,255,255,0) 74%)}
.ad-tx{position:absolute;z-index:2;inset-block:0;inset-inline-start:0;width:54%;padding:0 6cqw;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1.3cqw}
.ad-k{font-size:2.3cqw;font-weight:600;letter-spacing:.02em;opacity:.85;text-transform:uppercase}
.ad-h{font-size:5.6cqw;line-height:1.12;font-weight:700}
.ad-s{font-size:2.3cqw;line-height:1.45;opacity:.9}
.ad-pill{margin-top:1cqw;font-size:2.2cqw;font-weight:700;padding:.7cqw 2cqw;border-radius:99px;background:var(--grad);color:#fff;white-space:nowrap}
.ad-badge{font:800 4.4cqw/1 Inter,var(--font);padding:1.2cqw 2.2cqw;border-radius:2cqw;background:linear-gradient(135deg,#f97316,#ef4444);color:#fff;margin-bottom:.8cqw;box-shadow:0 1cqw 3cqw -1cqw rgba(239,68,68,.7)}
.ad-badge.gold{font-size:2.6cqw;background:linear-gradient(135deg,#f5d27a,#c9973d);color:#2a1a00}
.ad-price{font-size:2.4cqw;margin-top:.6cqw}
.ad-price s{opacity:.6}
.ad-price b{font:800 4.6cqw Inter,var(--font);color:#ffd27a}
.ad-mark{position:absolute;z-index:2;bottom:3cqw;inset-inline-end:3cqw;font:700 1.7cqw Inter,var(--font);padding:.5cqw 1.2cqw;border-radius:99px;background:rgba(0,0,0,.45);color:#fff;backdrop-filter:blur(4px)}
.ad-menu{list-style:none;margin:.4cqw 0;padding:0;width:100%;display:grid;gap:.9cqw}
.ad-menu li{display:flex;align-items:baseline;gap:1cqw;font-size:2.35cqw}
.ad-menu li i{flex:1;border-bottom:.2cqw dotted rgba(255,255,255,.35)}
.ad-menu li b{font:700 2.5cqw Inter;color:#ffd27a}
.ad-clinic .ad-pill{background:#0f8f8a}
.ad-clinic .ad-h{color:#0b4f55}
.ad-welcome .ad-h{font-size:6.4cqw;color:#2b2210}
.ad-welcome .ad-pill{background:#2b2210}
.ad-breakfast .ad-tx{width:50%;gap:1cqw}
.ad-breakfast .ad-h{font-size:4.8cqw}

/* ===== AI Assistant ===== */
.asd{display:grid;gap:22px;align-items:stretch}
@media (min-width:900px){.asd{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}}
.as-chat{border:1px solid var(--line);border-radius:16px;background:rgba(20,15,45,.9);padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.as-head{display:flex;align-items:center;gap:10px}
.as-head b{display:block;font-size:15px}.as-head small{color:var(--ok);font-size:12px}
.as-av{width:36px;height:36px;border-radius:50%;background:var(--grad);display:grid;place-items:center;flex:none}
.as-av .ic{width:18px;height:18px;color:#fff}
.as-log{display:flex;flex-direction:column;gap:8px;height:230px;overflow-y:auto;padding:4px 2px;scrollbar-width:thin}
.as-msg{max-width:86%;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.5;animation:aidIn .25s ease both}
.as-msg.bot{align-self:flex-start;background:rgba(255,255,255,.07);border:1px solid var(--line);border-start-start-radius:4px}
.as-msg.me{align-self:flex-end;background:var(--grad);color:#fff;border-start-end-radius:4px}
.as-card{display:flex;align-items:center;gap:6px;margin-top:6px;padding:6px 10px;border-radius:10px;background:rgba(31,182,232,.14);border:1px solid rgba(31,182,232,.4);font-size:13px}
.as-card .ic{width:16px;height:16px}
.as-dots{display:inline-flex;gap:4px;padding:3px 0}
.as-dots i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:asDot 1s infinite}
.as-dots i:nth-child(2){animation-delay:.15s}.as-dots i:nth-child(3){animation-delay:.3s}
@keyframes asDot{0%,80%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-3px)}}
.as-sugs{display:flex;flex-wrap:wrap;gap:6px}
.as-sugs .chip{flex:0 1 auto;font-size:12.5px;padding:6px 11px;text-align:start}
.as-form{display:flex;gap:8px;align-items:center;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;padding:6px}
.as-form:focus-within{border-color:var(--cyan)}
.as-form input{flex:1;min-width:0;background:transparent;border:0;color:#fff;font:500 15px var(--font);padding:8px 6px;outline:none}
.as-form input::placeholder{color:var(--muted)}
.as-send{min-height:42px;padding:0 16px;font-size:14px;flex:none}
.as-mic{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;display:grid;place-items:center;flex:none;cursor:pointer;position:relative;transition:background .2s,transform .15s}
.as-mic svg{width:20px;height:20px}
@media (hover:hover){.as-mic:hover{background:rgba(146,119,240,.25)}}
.as-mic:active{transform:scale(.95)}
.as-mic.listening{background:#ef4444;border-color:#ef4444;animation:micRing 1s ease-out infinite}
@keyframes micRing{0%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}100%{box-shadow:0 0 0 14px rgba(239,68,68,0)}}
.as-room{border:1px solid var(--line);border-radius:16px;background:rgba(20,15,45,.6);padding:14px;min-width:0}
.as-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:600px){.as-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.as-tile p{margin:6px 0 0;font-size:12.5px;color:var(--light);display:flex;align-items:center;gap:6px}
.as-tile p i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px var(--ok);flex:none}
.as-tile.off p i{background:#555;box-shadow:none}
.as-scr{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;container-type:inline-size;background:#000;border:3px solid #05040b;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.as-img{position:absolute;inset:0;background-size:cover;background-position:center}
.as-offv{position:absolute;inset:0;z-index:3;display:grid;place-items:center;color:#555;font-size:clamp(10px,7cqw,14px);opacity:0;background:#020203;pointer-events:none}
.as-tile.chg.off .as-offv{animation:asOff .6s ease both}
.as-tile.chg.on .as-scr>.ad,.as-tile.chg.on .as-scr>.as-img{animation:aidIn .6s ease both}
@keyframes asOff{from{opacity:0}to{opacity:1}}
.as-tile.off .as-offv{opacity:1}
.as-tile.chg .as-scr{animation:asFlash .7s ease}
@keyframes asFlash{0%{box-shadow:0 0 0 1px rgba(255,255,255,.08)}35%{box-shadow:0 0 0 3px var(--cyan),0 0 22px rgba(31,182,232,.6)}100%{box-shadow:0 0 0 1px rgba(255,255,255,.08)}}
.as-clock{position:absolute;top:4cqw;inset-inline-start:4cqw;z-index:3;font:700 max(9px,5.5cqw) Inter;background:rgba(0,0,0,.6);color:#fff;padding:1cqw 3cqw;border-radius:99px}
.as-tile.off .as-clock{opacity:1;z-index:4}
@media (max-width:899px){.as-room{order:-1;padding:10px}.as-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.as-tile p{font-size:11px;margin-top:4px}.as-log{height:180px}.as-room .ed-h{margin:0 0 6px}}

/* ===== Analytics demo ===== */
.an{border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(26,16,51,.92),rgba(14,10,31,.92));padding:16px;display:grid;gap:14px;min-width:0}
.an-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;justify-content:space-between}
.an-ttl{margin:0;display:flex;align-items:center;gap:8px;font-size:16px}
.an-ttl .ic{width:20px;height:20px;color:var(--cyan)}
.an-live{font-size:12px;color:var(--ok);font-weight:600;margin-inline-start:4px}
.an-ctl{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.an-rng,.an-brs{display:flex;gap:6px;flex-wrap:wrap;padding-top:2px}
.an-rng{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;padding:3px}
.an-rng .chip{border-color:transparent;background:transparent;padding:6px 14px}
.an-rng .chip[aria-pressed=true]{background:var(--grad)}
.an-brs .chip{font-size:13px;padding:6px 12px}
.an-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:900px){.an-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.an-kp{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.04);padding:12px 14px;min-width:0;position:relative;overflow:hidden}
.an-kp::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--grad)}
.an-kp.warn::before{background:#F5B547}
.an-kl{margin:0;display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;font-weight:600}
.an-kl .ic{width:16px;height:16px;color:var(--lav);flex:none}
.an-kv{margin:6px 0 4px;font:700 clamp(22px,2.4vw,30px)/1.1 Inter,var(--font);color:#fff;letter-spacing:-.01em;white-space:nowrap}
.an-kv small,.an-of{font:600 14px var(--font);color:var(--lav);letter-spacing:0}
.an-of b{font:700 clamp(22px,2.4vw,30px) Inter,var(--font);color:#fff}
.an-kf{margin:0;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:12px;color:var(--muted)}
.an-up{font-style:normal;font-weight:700;color:var(--ok);background:rgba(52,211,153,.12);border-radius:999px;padding:2px 7px;direction:ltr}
.an-kp.warn .an-ks{color:#F5B547}
.an-mid{display:grid;gap:14px}
@media (min-width:900px){.an-mid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}}
.an-card{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035);padding:14px;min-width:0}
.an-ch{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:10px}
.an-ch b{font-size:15px}.an-ch span{color:var(--muted);font-size:12.5px;margin-inline-start:auto}
.an-plot{position:relative;height:230px;background:repeating-linear-gradient(to top,rgba(201,188,255,.07) 0 1px,transparent 1px 25%);border-bottom:1px solid var(--line);padding-top:4px}
.an-bars{position:absolute;inset:0 0 -22px;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(4px,1vw,12px);align-items:stretch}
.an-col{display:grid;grid-template-rows:auto 1fr 22px;min-width:0;text-align:center}
.an-bv{font:700 11px/1.2 Inter,var(--font);color:var(--lav);white-space:nowrap;padding-bottom:3px;align-self:end;min-height:14px;opacity:0;transition:opacity .4s .3s}
.an-bt{position:relative;display:block}
.an-bt i{position:absolute;inset-inline:12%;bottom:0;height:0;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#9277F0,#5B7BFF);transition:height .9s cubic-bezier(.2,.8,.2,1)}
.an-col.pk .an-bt i{background:linear-gradient(180deg,#1FB6E8,#5B7BFF);box-shadow:0 0 18px -4px rgba(31,182,232,.8)}
.an-col.pk .an-bv{color:#fff}
.an-bl{font-size:11px;color:var(--muted);line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:clip}
.an-bars.grow .an-bt i{height:var(--h)}
.an-bars.grow .an-bv{opacity:1}
.an-col:nth-child(2) i{transition-delay:.04s}.an-col:nth-child(3) i{transition-delay:.08s}.an-col:nth-child(4) i{transition-delay:.12s}.an-col:nth-child(5) i{transition-delay:.16s}.an-col:nth-child(6) i{transition-delay:.2s}.an-col:nth-child(7) i{transition-delay:.24s}.an-col:nth-child(8) i{transition-delay:.28s}.an-col:nth-child(9) i{transition-delay:.32s}.an-col:nth-child(10) i{transition-delay:.36s}.an-col:nth-child(11) i{transition-delay:.4s}.an-col:nth-child(12) i{transition-delay:.44s}
.an-chart{padding-bottom:36px;display:flex;flex-direction:column}
.an-chart .an-plot{flex:1;min-height:230px}
.an-top{display:grid;gap:6px}
.an-tr{display:grid;grid-template-columns:18px 76px minmax(0,1fr);gap:10px;align-items:center;width:100%;text-align:start;background:transparent;border:1px solid transparent;border-radius:12px;padding:6px;color:var(--light);font:inherit;cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
@media (hover:hover){.an-tr:hover{background:rgba(146,119,240,.12);border-color:rgba(146,119,240,.45)}}
.an-tr:active{transform:scale(.98)}
.an-tr[aria-pressed=true]{background:rgba(31,182,232,.12);border-color:rgba(31,182,232,.6)}
.an-tr:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.an-rk{font:700 14px Inter;color:var(--lav);text-align:center}
.an-th{position:relative;aspect-ratio:16/9;border-radius:7px;overflow:hidden;container-type:inline-size;border:1px solid var(--line);display:block}
.an-tt{display:grid;gap:4px;min-width:0}
.an-tt b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-tt small{font-size:12px;color:var(--muted)}
.an-tm{height:5px;border-radius:9px;background:rgba(255,255,255,.07);overflow:hidden;display:block}
.an-tm i{display:block;height:100%;width:var(--w);background:var(--grad);border-radius:9px}
.an-best{margin:10px 2px 0;font-size:12.5px;color:var(--lav);min-height:1.5em}
.an-tw{max-height:262px;overflow:auto;scrollbar-width:thin;border-radius:10px}
.an-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.an-tbl th{position:sticky;top:0;background:#1d1438;color:var(--muted);font-weight:600;font-size:12.5px;text-align:start;padding:8px 10px;z-index:1}
.an-tbl td{padding:8px 10px;border-top:1px solid var(--line);white-space:nowrap}
.an-tbl td:nth-child(2),.an-tbl td:nth-child(4){color:var(--muted)}
.an-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 7px var(--ok);margin-inline-end:7px;vertical-align:middle}
.an-tbl tr.off td{color:#f8b4b4}.an-tbl tr.off .an-dot{background:var(--bad);box-shadow:0 0 7px var(--bad)}
.an-tbl tr.off td:first-child b{color:#fff}
.an-tr.hint-on{z-index:3}
.an-tr.hint-on::after{top:auto;bottom:calc(100% - 2px)}
@media (max-width:899px){
 .an{padding:12px;gap:12px}
 .an-ctl{width:100%}
 .an-rng{width:100%;justify-content:space-between}.an-rng .chip{flex:1;text-align:center}
 .an-brs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:26px 2px 2px;margin-top:-12px}
 .an-brs .chip{flex:none}
 .an-kp{padding:10px 12px}.an-kl{font-size:12px}.an-kf{font-size:11px}
 .an-plot{height:190px}
 .an-bv{font-size:9.5px}.an-bl{font-size:9.5px}
 .an-tbl{font-size:12.5px}.an-tbl td,.an-tbl th{padding:7px 6px}
}
@media (prefers-reduced-motion:reduce){.an-bt i,.an-bv{transition:none}}

/* ================= theme toggle + LIGHT MODE (html[data-theme=light]); dark stays the default stylesheet above ================= */
.theme-btn{display:inline-grid;place-items:center;padding:0;min-width:40px;width:40px}
.theme-btn svg{width:18px;height:18px}
.theme-btn .i-sun{display:none}
html[data-theme=light] .theme-btn .i-sun{display:none}html[data-theme=light] .theme-btn .i-moon{display:block}
html:not([data-theme=light]) .theme-btn .i-sun{display:block}html:not([data-theme=light]) .theme-btn .i-moon{display:none}
html[data-theme=light]{color-scheme:light;--night:#F7F8FB;--deep:#FFFFFF;--plum:#EEF0F7;--lav:#5B45C9;--light:#0F1222;--muted:#585E7A;--line:#E6E8F0;--card:#FFFFFF;--ok:#047857;--bad:#C81E1E;
 --sh:0 1px 2px rgba(15,18,34,.04),0 10px 28px -18px rgba(30,27,75,.22)}
/* real screens keep the dark palette: TVs, assistant screen tiles, designer thumbnails, campaign screens */
html[data-theme=light] :is(.tv,.as-scr,.aid-mini,.cs .cs-s){color-scheme:dark;--night:#0E0A1F;--deep:#1A1033;--plum:#2A1B4D;--lav:#C9BCFF;--light:#F7F8FB;--muted:#A9AECB;--line:rgba(201,188,255,.14);--card:rgba(255,255,255,.04);--ok:#34d399;--bad:#f87171}
html[data-theme=light] .tv{color:#F7F8FB;box-shadow:0 28px 50px -26px rgba(15,18,34,.55),0 0 0 1px rgba(15,18,34,.10),0 18px 60px -30px rgba(91,123,255,.35)}
html[data-theme=light] .aurora{background:radial-gradient(1200px 700px at 50% -10%,#ECE7FF 0%,transparent 60%),var(--night)}
html[data-theme=light] .aurora i{opacity:.10}html[data-theme=light] .aurora i:nth-child(1){background:#9277F0}html[data-theme=light] .aurora i:nth-child(2){opacity:.10}html[data-theme=light] .aurora i:nth-child(3){opacity:.07}
html[data-theme=light] .eyebrow::before{box-shadow:none}
/* nav */
html[data-theme=light] .nav.scrolled{background:rgba(247,248,251,.86);box-shadow:0 6px 20px -16px rgba(15,18,34,.35)}
html[data-theme=light] .nav-links a:hover{color:var(--light);background:rgba(15,18,34,.05)}
html[data-theme=light] .lang{background:#fff;color:var(--light);box-shadow:0 1px 2px rgba(15,18,34,.05)}
@media(hover:hover){html[data-theme=light] .lang:hover{background:rgba(146,119,240,.12);border-color:rgba(146,119,240,.6)}}
/* buttons, chips, segments */
html[data-theme=light] .btn{box-shadow:0 10px 22px -12px rgba(91,123,255,.6),inset 0 1px 0 rgba(255,255,255,.3)}
html[data-theme=light] .btn.ghost{background:#fff;color:var(--light);box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(15,18,34,.05)}
html[data-theme=light] .btn.danger{box-shadow:none}
@media(hover:hover){
 html[data-theme=light] .btn:not(:disabled):hover{box-shadow:0 12px 24px -12px rgba(91,123,255,.65),0 0 0 2px rgba(146,119,240,.35)}
 html[data-theme=light] .btn.ghost:not(:disabled):hover{background:rgba(146,119,240,.10);box-shadow:inset 0 0 0 1px rgba(146,119,240,.65),0 8px 20px -14px rgba(91,123,255,.6)}
 html[data-theme=light] .chip:not([aria-pressed=true]):hover{background:rgba(146,119,240,.10);border-color:rgba(146,119,240,.6);color:#3B2A9E}
 html[data-theme=light] .seg:not([aria-selected=true]):hover{background:rgba(146,119,240,.10);border-color:rgba(146,119,240,.6);color:#3B2A9E}
 html[data-theme=light] .stepper button:hover{background:rgba(146,119,240,.18);color:#3B2A9E}
 html[data-theme=light] .dm .sw:hover,html[data-theme=light] .dm .mini:hover{color:var(--light)}
 html[data-theme=light] .aid-th:hover{color:var(--light)}
 html[data-theme=light] .as-mic:hover{background:rgba(146,119,240,.14)}
}
html[data-theme=light] .chip{background:#fff;color:var(--light)}
html[data-theme=light] .seg{background:#fff;color:var(--light);box-shadow:0 1px 2px rgba(15,18,34,.04)}
html[data-theme=light] .seg[aria-selected=true]{background:#0F1222;color:#fff;border-color:#0F1222}
html[data-theme=light] .dm .sw:focus-within,html[data-theme=light] .dm .mini:focus-within{color:var(--light)}
html[data-theme=light] .stepper button{background:#F1F2F7;color:var(--light)}
html[data-theme=light] .stepper button.hint-on{background:rgba(31,182,232,.22);color:var(--light)}
html[data-theme=light] .chip.hint-on:not([aria-pressed=true]),html[data-theme=light] .btn.ghost.hint-on{background:rgba(31,182,232,.08)}
/* hero */
html[data-theme=light] .tagline{color:var(--light)}
html[data-theme=light] .vs{background:#fff;box-shadow:var(--sh)}
html[data-theme=light] .vs span{background:rgba(220,38,38,.07);color:#9B1C1C}html[data-theme=light] .vs span::before{color:#DC2626}
/* demo control panels (page chrome) */
html[data-theme=light] :is(.sender,.editor,.qbox,.wctl,.aid-panel,.as-chat,.as-room){background:#fff;box-shadow:var(--sh)}
html[data-theme=light] .bbar{background:#F3F4F8}html[data-theme=light] .bbar i{background:#D5D8E3}html[data-theme=light] .bbar span{background:#fff;border:1px solid var(--line)}
html[data-theme=light] .otp input,html[data-theme=light] .nm{background:#fff;color:var(--light)}
html[data-theme=light] .ticket b{color:var(--light)}
html[data-theme=light] .as-tile.off p i{background:#B6BACB}
/* features, how, pricing, forms */
html[data-theme=light] :is(.feat,.pack,.plan,.trust div,.calc,.po-form){background:#fff;box-shadow:var(--sh)}
html[data-theme=light] .pack.big{background:linear-gradient(160deg,rgba(146,119,240,.10),rgba(31,182,232,.06)),#fff;border-color:rgba(146,119,240,.45)}
html[data-theme=light] .steps li::before{color:#fff}
html[data-theme=light] .f input:not([type=range]):not([type=checkbox]),html[data-theme=light] .f select,html[data-theme=light] .f textarea{background:#fff;color:var(--light)}
html[data-theme=light] .f select option{background:#fff;color:var(--light)}
html[data-theme=light] .f output{color:var(--light)}
html[data-theme=light] .calc-out{background:#F7F8FB}
html[data-theme=light] .addon{background:#fff}
/* AI designer */
html[data-theme=light] .aid-in,html[data-theme=light] .as-form{background:#F7F8FB}
html[data-theme=light] .aid-in input,html[data-theme=light] .as-form input{color:var(--light)}
html[data-theme=light] .aid-in input::placeholder,html[data-theme=light] .as-form input::placeholder{color:#7A7F99}
html[data-theme=light] .aid-steps li i{border-color:rgba(91,69,201,.28)}
html[data-theme=light] .aid-steps li.on{color:var(--light)}
html[data-theme=light] .aid-bar{background:#ECEEF5}
html[data-theme=light] .aid-th[aria-pressed=true]{color:var(--light)}
/* AI assistant */
html[data-theme=light] .as-msg.bot{background:#F3F4F8}
html[data-theme=light] .as-mic{background:#fff;color:var(--light)}
html[data-theme=light] .as-card{background:rgba(31,182,232,.08);border-color:rgba(31,182,232,.45)}
/* analytics: a web dashboard, goes light */
html[data-theme=light] .an{background:#fff;box-shadow:var(--sh)}
html[data-theme=light] .an-rng{background:#F3F4F8}
html[data-theme=light] .an-kp,html[data-theme=light] .an-card{background:#FAFBFE}
html[data-theme=light] .an-kv,html[data-theme=light] .an-of b,html[data-theme=light] .an-col.pk .an-bv,html[data-theme=light] .an-tbl tr.off td:first-child b{color:var(--light)}
html[data-theme=light] .an-kp.warn .an-ks{color:#B45309}
html[data-theme=light] .an-up{background:rgba(4,120,87,.10)}
html[data-theme=light] .an-tm{background:#ECEEF5}
html[data-theme=light] .an-plot{background:repeating-linear-gradient(to top,rgba(15,18,34,.07) 0 1px,transparent 1px 25%)}
html[data-theme=light] .an-col.pk .an-bt i{box-shadow:0 8px 18px -8px rgba(31,182,232,.7)}
html[data-theme=light] .an-tbl th{background:#F3F4F8}
html[data-theme=light] .an-tbl tr.off td{color:#B42318}
html[data-theme=light] .an-dot{box-shadow:none}

.addon s{opacity:.6;margin-inline-end:4px}.addon b.pre{color:var(--accent-ink,#16a34a);font-weight:800}

/* ===== background network («رابط» = link): canvas drawn by bg.js ===== */
#bgnet{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity 1.2s ease;
 -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(0,0,0,.75) 0%,#000 85%);mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(0,0,0,.75) 0%,#000 85%)}
#bgnet.on{opacity:1}
@media print{#bgnet{display:none}}

/* ===== floating header (Oct 19): detached card, squircle corners like the logo mark (~30% of height) ===== */
html{scroll-padding-top:92px}
.nav{top:0;padding:12px 12px 0;border:0!important;background:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;pointer-events:none}
.nav .wrap{pointer-events:auto;max-width:calc(var(--max) - 2*var(--pad) + 28px);height:60px;padding-inline:14px 10px;gap:12px;border-radius:18px;
 background:rgba(26,16,51,.58);border:1px solid rgba(201,188,255,.14);box-shadow:0 14px 34px -22px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.04);
 backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);transition:background .3s,box-shadow .3s,border-color .3s}
.nav.scrolled .wrap{background:rgba(20,13,40,.82)}
.nav-links{margin-inline:auto}
.nav-links a{border-radius:10px}
.nav-actions{margin-inline-start:0;gap:8px}
.brand{flex:none}
.nav .lang{border-radius:12px}
.nav .btn.sm{border-radius:12px;min-height:40px;padding:0 16px;font-weight:700}
html[data-theme=light] .nav .wrap{background:#fff;border-color:#E6E8F0;box-shadow:0 1px 2px rgba(15,18,34,.04),0 14px 34px -22px rgba(30,27,75,.30)}
html[data-theme=light] .nav.scrolled .wrap{background:rgba(255,255,255,.86)}
/* light/dark toggle switch: track + sliding knob */
.theme-sw{position:relative;flex:none;width:58px;height:32px;padding:0;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--muted);cursor:pointer;transition:background-color .2s,border-color .2s}
.theme-sw:hover{border-color:rgba(146,119,240,.6);background:rgba(146,119,240,.14)}
.theme-sw:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.theme-sw svg{width:14px;height:14px;display:block}
.tsw-ico{position:absolute;top:50%;margin-top:-7px;opacity:.6}
.tsw-sun{inset-inline-start:8px}.tsw-moon{inset-inline-end:8px}
.tsw-knob{position:absolute;top:3px;inset-inline-start:3px;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--grad);color:#fff;box-shadow:0 2px 6px -1px rgba(0,0,0,.35);transition:transform .28s cubic-bezier(.3,.7,.25,1)}
.tsw-knob .k-sun{display:none}
html:not([data-theme=light]) .tsw-knob{transform:translateX(26px)}
html[dir=rtl]:not([data-theme=light]) .tsw-knob{transform:translateX(-26px)}
html[data-theme=light] .tsw-knob{background:#fff;color:#E59A0B;box-shadow:0 1px 2px rgba(15,18,34,.12),0 3px 8px -2px rgba(30,27,75,.28)}
html[data-theme=light] .tsw-knob .k-sun{display:block}html[data-theme=light] .tsw-knob .k-moon{display:none}
html[data-theme=light] .theme-sw{background:#EEF0F7;border-color:#E2E5EF;color:#7A809C}
html[data-theme=light] .theme-sw:hover{border-color:rgba(91,69,201,.45)}
@media(max-width:560px){
 .nav{padding:10px 10px 0}
 .nav .wrap{height:56px;border-radius:17px;padding-inline:12px 8px;gap:8px}
 .brand{font-size:20px;gap:8px}.brand svg{width:28px;height:28px}
 .nav .lang{height:38px;min-width:40px;padding:0 9px;border-radius:11px}
 .nav .btn.sm{min-height:38px;padding:0 12px;font-size:13.5px;border-radius:11px}
 .theme-sw{width:54px;height:30px;border-radius:9px}
 .tsw-knob{width:22px;height:22px;border-radius:7px}
 html:not([data-theme=light]) .tsw-knob{transform:translateX(24px)}html[dir=rtl]:not([data-theme=light]) .tsw-knob{transform:translateX(-24px)}
 .tsw-sun{inset-inline-start:7px}.tsw-moon{inset-inline-end:7px}
}
@media(max-width:979px){.nav-actions{margin-inline-start:auto}}
@media(max-width:360px){.brand span{display:none}}
.hero{padding-top:104px}
@media(max-width:560px){.hero{padding-top:92px}}

/* hero text sits on its own solid card so the animated background never mixes with the copy */
.hero-copy{align-self:center;height:auto;background:#1A1033;border:1px solid rgba(201,188,255,.14);border-radius:20px;padding:26px 28px;box-shadow:0 24px 50px -30px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.04)}
html[data-theme=light] .hero-copy{background:#fff;border-color:#E6E8F0;box-shadow:0 1px 2px rgba(15,18,34,.04),0 18px 40px -26px rgba(30,27,75,.28)}
@media(max-width:560px){.hero-copy{padding:18px 18px 20px;border-radius:18px}}
.hero-copy>:first-child{margin-top:0}.hero-copy>:last-child{margin-bottom:0}

/* ===== Liquid Glass (Oct 19): header bar + every button. Material in variables; pointer sheen via --mx/--my set by glass.js ===== */
@property --gs{syntax:'<number>';inherits:false;initial-value:0}
:root{--spring:cubic-bezier(.2,.8,.2,1.2);
 --g-fill:rgba(30,32,45,.42);--g-fill-h:rgba(46,48,70,.52);--g-border:rgba(255,255,255,.12);--g-border-h:rgba(255,255,255,.26);
 --g-rim:rgba(255,255,255,.22);--g-rim-h:rgba(255,255,255,.45);--g-shade:rgba(0,0,0,.30);
 --g-drop:0 8px 22px -12px rgba(0,0,0,.65);--g-drop-h:0 14px 30px -14px rgba(0,0,0,.8),0 0 0 1px rgba(146,119,240,.18);
 --g-sheen-a:.10;--g-sheen-h:.20;--g-spot-a:.30;--g-halo-rgb:150,170,255;--g-halo-a:.16;
 --g-bar:rgba(28,24,50,.46);--g-bar-s:rgba(22,18,42,.64)}
html[data-theme=light]{
 --g-fill:rgba(255,255,255,.56);--g-fill-h:rgba(255,255,255,.76);--g-border:rgba(255,255,255,.75);--g-border-h:#fff;
 --g-rim:rgba(255,255,255,.8);--g-rim-h:#fff;--g-shade:rgba(15,18,34,.07);
 --g-drop:0 0 0 .5px rgba(15,18,34,.11),0 1px 2px rgba(15,18,34,.05),0 8px 20px -12px rgba(30,27,75,.30);
 --g-drop-h:0 0 0 .5px rgba(91,69,201,.30),0 2px 4px rgba(15,18,34,.05),0 14px 28px -14px rgba(30,27,75,.42);
 --g-sheen-a:.55;--g-sheen-h:.85;--g-spot-a:.95;--g-halo-rgb:120,96,230;--g-halo-a:.2;
 --g-bar:rgba(255,255,255,.58);--g-bar-s:rgba(255,255,255,.72)}

/* shared material */
html[data-theme] body :is(.lang,.theme-sw,.btn.ghost,.seg,.chip,.as-mic,.btn){--gs:0;--mx:50%;--my:-30%;position:relative;isolation:isolate;border:1px solid var(--g-border);color:var(--light);
 background-color:transparent;background-image:radial-gradient(var(--g-spot,70px) circle at var(--mx) var(--my),rgba(255,255,255,calc(var(--gs)*var(--g-spot-a)*1)) 0%,rgba(255,255,255,0) 62%),radial-gradient(calc(var(--g-spot,70px)*2.4) circle at var(--mx) var(--my),rgba(var(--g-halo-rgb),calc(var(--gs)*var(--g-halo-a))) 0%,rgba(var(--g-halo-rgb),0) 70%),linear-gradient(180deg,rgba(255,255,255,calc(var(--g-sheen-a) + var(--gs)*(var(--g-sheen-h) - var(--g-sheen-a)))) 0%,rgba(255,255,255,0) 52%),linear-gradient(var(--g-fill),var(--g-fill));background-size:auto;background-repeat:no-repeat;
 box-shadow:inset 0 1px 0 var(--g-rim),inset 0 -1px 1px var(--g-shade),var(--g-drop);
 -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
 transition:transform .34s var(--spring),box-shadow .3s ease,border-color .3s ease,color .2s ease,filter .3s ease,--gs .35s ease}
html[data-theme] body .chip{--g-spot:46px}html[data-theme] body :is(.seg,.lang,.theme-sw,.as-mic){--g-spot:52px}html[data-theme] body .btn{--g-spot:80px}

/* primary CTA + selected chips: tinted glass in the brand gradient, deepened a step so white text passes AA */
html[data-theme] body .btn:not(.ghost):not(.danger),html[data-theme] body .chip[aria-pressed=true]{color:#fff;text-shadow:0 1px 1px rgba(16,8,60,.28);border-color:rgba(255,255,255,.28);--g-spot-a:.32;--g-halo-rgb:255,255,255;--g-halo-a:.12;--g-sheen-a:.10;--g-sheen-h:.18;
 background-image:radial-gradient(var(--g-spot,70px) circle at var(--mx) var(--my),rgba(255,255,255,calc(var(--gs)*var(--g-spot-a)*1)) 0%,rgba(255,255,255,0) 62%),radial-gradient(calc(var(--g-spot,70px)*2.4) circle at var(--mx) var(--my),rgba(var(--g-halo-rgb),calc(var(--gs)*var(--g-halo-a))) 0%,rgba(var(--g-halo-rgb),0) 70%),linear-gradient(180deg,rgba(255,255,255,calc(var(--g-sheen-a) + var(--gs)*(var(--g-sheen-h) - var(--g-sheen-a)))) 0%,rgba(255,255,255,0) 50%),linear-gradient(135deg,rgba(104,76,218,.96) 0%,rgba(66,92,236,.96) 55%,rgba(13,118,170,.96) 100%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 1px rgba(10,8,40,.25),0 10px 24px -12px rgba(74,98,240,.75)}
html[data-theme] body .btn.danger{color:#fff;border-color:rgba(255,255,255,.28);--g-spot-a:.4;--g-halo-rgb:255,255,255;--g-halo-a:.12;--g-sheen-a:.2;--g-sheen-h:.3;
 background-image:radial-gradient(var(--g-spot,70px) circle at var(--mx) var(--my),rgba(255,255,255,calc(var(--gs)*var(--g-spot-a)*1)) 0%,rgba(255,255,255,0) 62%),radial-gradient(calc(var(--g-spot,70px)*2.4) circle at var(--mx) var(--my),rgba(var(--g-halo-rgb),calc(var(--gs)*var(--g-halo-a))) 0%,rgba(var(--g-halo-rgb),0) 70%),linear-gradient(180deg,rgba(255,255,255,calc(var(--g-sheen-a) + var(--gs)*(var(--g-sheen-h) - var(--g-sheen-a)))) 0%,rgba(255,255,255,0) 50%),linear-gradient(135deg,rgba(208,36,36,.93),rgba(194,65,12,.93));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 1px rgba(60,0,0,.25),0 10px 24px -12px rgba(220,38,38,.6)}

/* selected segment: near-solid, inverted glass so it stays obvious */
html[data-theme] body .seg[aria-selected=true]{color:#0E0A1F;border-color:rgba(255,255,255,.9);--g-fill:rgba(255,255,255,.94);--g-sheen-a:.5;--g-sheen-h:.7;--g-spot-a:.6;--g-halo-rgb:146,119,240;--g-halo-a:.16;
 box-shadow:inset 0 1px 0 #fff,inset 0 -1px 1px rgba(15,18,34,.12),0 8px 22px -12px rgba(0,0,0,.6)}
html[data-theme=light] body .seg[aria-selected=true]{color:#fff;border-color:rgba(15,18,34,.9);--g-fill:rgba(15,18,34,.9);--g-sheen-a:.16;--g-sheen-h:.24;--g-spot-a:.3;--g-halo-rgb:150,170,255;--g-halo-a:.2;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 1px rgba(0,0,0,.4),0 8px 20px -12px rgba(15,18,34,.55)}

/* hover: lift 1px + 2%, brighter rim and sheen; the highlight follows the pointer */
@media(hover:hover){
 html[data-theme] body :is(.lang,.theme-sw,.btn.ghost,.seg,.chip,.as-mic,.btn):not(:disabled):hover{--gs:1;transform:translateY(-1px) scale(1.02);filter:none;border-color:var(--g-border-h);
  box-shadow:inset 0 1px 0 var(--g-rim-h),inset 0 -1px 1px var(--g-shade),var(--g-drop-h)}
 html[data-theme] body :is(.lang,.theme-sw,.btn.ghost,.seg,.chip,.as-mic):not(:disabled):not([aria-pressed=true]):not([aria-selected=true]):hover{--g-fill:var(--g-fill-h);color:var(--light)}
 html[data-theme] body .btn:not(.ghost):not(.danger):not(:disabled):hover,html[data-theme] body .chip[aria-pressed=true]:not(:disabled):hover{filter:brightness(1.06) saturate(1.05);border-color:rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62),inset 0 -1px 1px rgba(10,8,40,.25),0 14px 30px -12px rgba(74,98,240,.85),0 0 0 1px rgba(146,119,240,.25)}
 html[data-theme] body .btn.danger:not(:disabled):hover{border-color:rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 14px 28px -12px rgba(220,38,38,.7)}
 html[data-theme] body .seg[aria-selected=true]:not(:disabled):hover{border-color:#fff;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 1px rgba(15,18,34,.12),0 14px 28px -14px rgba(0,0,0,.7)}
 html[data-theme=light] body .seg[aria-selected=true]:not(:disabled):hover{border-color:rgba(15,18,34,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.36),inset 0 -1px 1px rgba(0,0,0,.4),0 14px 26px -14px rgba(15,18,34,.6)}
}
html[data-theme] body :is(.lang,.theme-sw,.btn.ghost,.seg,.chip,.as-mic,.btn):focus-visible{--gs:1}
/* press: quick squish to .97, then the base transition springs it back with a small overshoot */
html[data-theme] body :is(.lang,.theme-sw,.btn.ghost,.seg,.chip,.as-mic,.btn):not(:disabled):active{--gs:1;transform:scale(.97);transition:transform .1s ease-out,box-shadow .1s ease,--gs .1s ease}
html[data-theme] body .btn:disabled{transform:none}

/* corners: the logo-curve rule, about 30% of the height (never pills) */
html[data-theme] body .btn{border-radius:15px}
html[data-theme] body .btn.sm,html[data-theme] body .nav .btn.sm{border-radius:12px}
html[data-theme] body :is(.sh-btns,.aid-in,.qbox,.qk) .btn{border-radius:13px}
html[data-theme] body .chip{border-radius:10px}
html[data-theme] body .seg,html[data-theme] body .lang{border-radius:12px}
html[data-theme] body .as-mic{border-radius:13px}
@media(max-width:560px){html[data-theme] body .nav .lang,html[data-theme] body .nav .btn.sm{border-radius:11px}}

/* analytics range: one glass track; its chips are clear until selected */
html[data-theme] body .an-rng{border-radius:13px;border:1px solid var(--g-border);background:linear-gradient(180deg,rgba(255,255,255,var(--g-sheen-a)),rgba(255,255,255,0) 55%),var(--g-fill);
 box-shadow:inset 0 1px 0 var(--g-rim),inset 0 -1px 1px var(--g-shade),var(--g-drop);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
html[data-theme] body .an-rng .chip{border-radius:9px}
html[data-theme] body .an-rng .chip:not([aria-pressed=true]){border-color:transparent;--g-fill:transparent;--g-sheen-a:0;--g-sheen-h:.08;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
@media(hover:hover){html[data-theme] body .an-rng .chip:not([aria-pressed=true]):not(:disabled):hover{--g-fill:var(--g-fill-h);border-color:var(--g-border);box-shadow:inset 0 1px 0 var(--g-rim),var(--g-drop)}}

/* theme switch: glass track; the knob swells into a clear lens while pressed, like iOS 26 */
html[data-theme] body .theme-sw{border-radius:10px;--kx:0px;--ks:1}
html:not([data-theme=light]) body .theme-sw{--kx:26px}html[dir=rtl]:not([data-theme=light]) body .theme-sw{--kx:-26px}
@media(max-width:560px){html:not([data-theme=light]) body .theme-sw{--kx:24px}html[dir=rtl]:not([data-theme=light]) body .theme-sw{--kx:-24px}}
html[data-theme] body .tsw-knob{transform:translateX(var(--kx)) scale(var(--ks));transition:transform .42s var(--spring),background-color .25s ease,box-shadow .25s ease;
 background-image:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 55%),var(--grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 1px rgba(0,0,0,.18),0 2px 6px -1px rgba(0,0,0,.35)}
html[data-theme=light] body .tsw-knob{background-color:#fff;background-image:linear-gradient(180deg,#fff,rgba(255,255,255,0) 60%);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 1px rgba(15,18,34,.08),0 1px 2px rgba(15,18,34,.12),0 3px 8px -2px rgba(30,27,75,.28)}
@media(hover:hover){html[data-theme] body .theme-sw:hover{--ks:1.06}}
html[data-theme] body .theme-sw:active{--ks:1.28}
html[data-theme] body .theme-sw:active .tsw-knob{background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.08) 60%);color:var(--light);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 2px rgba(0,0,0,.14),inset 0 0 0 1px rgba(255,255,255,.5),0 4px 12px -3px rgba(0,0,0,.35)}

/* header bar: one sheet of glass */
html[data-theme] body .nav .wrap{--gs:0;--mx:50%;--my:-60%;--g-spot:150px;--g-halo-a:.12;isolation:isolate;border:1px solid var(--g-border);
 background-color:transparent;background-image:radial-gradient(var(--g-spot,70px) circle at var(--mx) var(--my),rgba(255,255,255,calc(var(--gs)*var(--g-spot-a)*.5)) 0%,rgba(255,255,255,0) 62%),radial-gradient(calc(var(--g-spot,70px)*2.4) circle at var(--mx) var(--my),rgba(var(--g-halo-rgb),calc(var(--gs)*var(--g-halo-a))) 0%,rgba(var(--g-halo-rgb),0) 70%),linear-gradient(180deg,rgba(255,255,255,calc(var(--g-sheen-a) + var(--gs)*(var(--g-sheen-h) - var(--g-sheen-a)))) 0%,rgba(255,255,255,0) 50%),linear-gradient(var(--g-bar),var(--g-bar));
 box-shadow:inset 0 1px 0 var(--g-rim),inset 0 -1px 1px var(--g-shade),var(--g-drop),0 18px 40px -26px rgba(0,0,0,.55);
 -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
 transition:box-shadow .35s ease,border-color .35s ease,--gs .4s ease}
html[data-theme=light] body .nav .wrap{box-shadow:inset 0 1px 0 var(--g-rim),inset 0 -1px 1px var(--g-shade),var(--g-drop),0 18px 40px -26px rgba(30,27,75,.32)}
html[data-theme] body .nav.scrolled .wrap{background-image:radial-gradient(var(--g-spot,70px) circle at var(--mx) var(--my),rgba(255,255,255,calc(var(--gs)*var(--g-spot-a)*.5)) 0%,rgba(255,255,255,0) 62%),radial-gradient(calc(var(--g-spot,70px)*2.4) circle at var(--mx) var(--my),rgba(var(--g-halo-rgb),calc(var(--gs)*var(--g-halo-a))) 0%,rgba(var(--g-halo-rgb),0) 70%),linear-gradient(180deg,rgba(255,255,255,calc(var(--g-sheen-a) + var(--gs)*(var(--g-sheen-h) - var(--g-sheen-a)))) 0%,rgba(255,255,255,0) 50%),linear-gradient(var(--g-bar-s),var(--g-bar-s))}
@media(hover:hover){html[data-theme] body .nav .wrap:hover{--gs:1;border-color:var(--g-border-h)}}
/* Chromium only (class set by glass.js): faint refraction of what passes under the bar; Safari/iPhone keep blur + saturate */
html.lg-refract[data-theme] body .nav .wrap{backdrop-filter:url(#lgRefract) blur(24px) saturate(180%)}

/* header links: a glass capsule forms under the hovered link */
html[data-theme] body .nav-links a{--gs:0;--mx:50%;--my:-30%;position:relative;border:1px solid transparent;border-radius:11px;background:transparent;
 transition:transform .34s var(--spring),border-color .3s ease,box-shadow .3s ease,color .2s ease,--gs .35s ease}
@media(hover:hover){html[data-theme] body .nav-links a:hover{--gs:1;color:var(--light);transform:translateY(-1px) scale(1.02);border-color:var(--g-border);
 background:radial-gradient(54px circle at var(--mx) var(--my),rgba(255,255,255,calc(var(--gs)*var(--g-spot-a))) 0%,rgba(255,255,255,0) 62%),linear-gradient(180deg,rgba(255,255,255,var(--g-sheen-h)),rgba(255,255,255,0) 52%),var(--g-fill-h);
 box-shadow:inset 0 1px 0 var(--g-rim-h),inset 0 -1px 1px var(--g-shade),var(--g-drop)}}
html[data-theme] body .nav-links a:active{transform:scale(.97);transition-duration:.1s}

/* analytics rows: glass on hover */
@media(hover:hover){html[data-theme] body .an-tr:hover{--gs:1;background:radial-gradient(90px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,calc(var(--gs)*var(--g-spot-a)*.6)) 0%,rgba(255,255,255,0) 62%),linear-gradient(180deg,rgba(255,255,255,var(--g-sheen-a)),rgba(255,255,255,0) 52%),var(--g-fill-h);border-color:var(--g-border-h);box-shadow:inset 0 1px 0 var(--g-rim),var(--g-drop)}}

/* FAQ toggles: the +/− becomes a small glass key */
html[data-theme] body .faq summary{align-items:center}
html[data-theme] body .faq summary::after{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;border:1px solid var(--g-border);
 background:linear-gradient(180deg,rgba(255,255,255,var(--g-sheen-a)),rgba(255,255,255,0) 55%),var(--g-fill);box-shadow:inset 0 1px 0 var(--g-rim),inset 0 -1px 1px var(--g-shade),var(--g-drop);
 -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);transition:transform .34s var(--spring),box-shadow .3s ease}
@media(hover:hover){html[data-theme] body .faq summary:hover::after{transform:translateY(-1px) scale(1.06);background:linear-gradient(180deg,rgba(255,255,255,var(--g-sheen-h)),rgba(255,255,255,0) 55%),var(--g-fill-h);box-shadow:inset 0 1px 0 var(--g-rim-h),inset 0 -1px 1px var(--g-shade),var(--g-drop-h)}}
html[data-theme] body .faq summary:active::after{transform:scale(.92);transition-duration:.1s}

/* «اضغط هنا» hint keeps its cyan cue on top of the glass */
html[data-theme] body .chip.hint-on:not([aria-pressed=true]),html[data-theme] body .btn.ghost.hint-on{border-color:rgba(31,182,232,.9);box-shadow:inset 0 0 0 1px rgba(31,182,232,.9),inset 0 1px 0 var(--g-rim),var(--g-drop)}

/* reduced motion: no lift, no squish, no spring, no pointer-follow */
@media(prefers-reduced-motion:reduce){
 html[data-theme] body :is(.lang,.theme-sw,.btn.ghost,.seg,.chip,.as-mic,.btn),html[data-theme] body .nav-links a,html[data-theme] body .faq summary::after{transition:border-color .2s,box-shadow .2s,color .2s!important;transform:none!important}
 html[data-theme] body .tsw-knob{transition:none!important;transform:translateX(var(--kx))!important}
}
@media print{html[data-theme] body :is(.lang,.theme-sw,.btn.ghost,.seg,.chip,.as-mic,.btn),html[data-theme] body .nav .wrap{-webkit-backdrop-filter:none;backdrop-filter:none}}

/* header back to full-width bar (Oct 19), glass kept */
html[data-theme] body .nav{padding:0!important}
html[data-theme] body .nav .wrap{max-width:none!important;width:100%;margin:0!important;border-radius:0!important;border-width:0 0 1px 0!important;height:66px;
 padding-inline:max(var(--pad,20px),calc((100vw - var(--max,1200px))/2 + var(--pad,20px)))!important}
html[data-theme] body .nav .wrap::before,html[data-theme] body .nav .wrap::after{border-radius:0!important}
@media (max-width:760px){html[data-theme] body .nav .wrap{height:58px;padding-inline:14px!important}}

/* light mode: clear glass (not white) so the hover glass is visible (Oct 19) */
html[data-theme=light] body :is(.lang,.theme-sw,.btn.ghost,.seg,.chip,.as-mic,.faq summary::after):not([aria-pressed=true]):not([aria-selected=true]){
 --g-fill:rgba(255,255,255,.14);--g-fill-h:rgba(255,255,255,.06);
 --g-border:rgba(91,69,201,.22);--g-border-h:rgba(91,69,201,.5);
 --g-rim:rgba(255,255,255,.9);--g-rim-h:#fff;
 --g-halo-rgb:91,123,255;--g-halo-a:.34;--g-sheen-a:.32;--g-sheen-h:.55;--g-spot-a:.9;
 --g-drop:0 1px 2px rgba(15,18,34,.06),0 8px 22px -14px rgba(60,50,160,.28);
 --g-drop-h:0 2px 4px rgba(15,18,34,.07),0 14px 30px -14px rgba(60,50,160,.42)}
@media(hover:hover){html[data-theme=light] body :is(.lang,.theme-sw,.btn.ghost,.seg,.chip,.as-mic):not(:disabled):not([aria-pressed=true]):not([aria-selected=true]):hover{
 box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(120,96,230,.18),inset 0 -8px 16px -10px rgba(91,123,255,.30),var(--g-drop-h)}}

/* demo captions inside a readable card (Oct 19) */
.demo-note{display:table;margin:14px auto 0;padding:8px 16px;border-radius:12px;background:#1a1333;border:1px solid rgba(201,188,255,.18);color:#e9e6f7;font-size:13.5px;font-weight:500;box-shadow:0 8px 22px -14px rgba(0,0,0,.6);text-align:center}
html[data-theme=light] .demo-note{background:#fff;border-color:#E6E8F0;color:#3a3f55;box-shadow:0 1px 2px rgba(15,18,34,.05),0 10px 24px -16px rgba(30,27,75,.3)}

/* ===== guided onboarding (Oct 19): chip invite + step arrows (guide.js) ===== */
/* chips not tried yet: a light ring travels chip to chip */
html.ga-on .segs.ga-attn .seg:not([aria-selected=true]):not(.ga-tried){animation:gaInvite 5.4s ease-in-out infinite;animation-delay:calc(var(--ga-i,0) * .55s + .8s)}
html.ga-on .segs.ga-attn.ga-soft .seg:not([aria-selected=true]):not(.ga-tried){animation-name:gaInviteSoft;animation-duration:8s}
@keyframes gaInvite{0%,18%,100%{outline:2px solid rgba(91,123,255,0);outline-offset:0;translate:0 0}
 6%{outline:2px solid rgba(110,100,245,.85);outline-offset:3px;translate:0 -2px}
 12%{outline:2px solid rgba(31,182,232,0);outline-offset:8px;translate:0 0}}
@keyframes gaInviteSoft{0%,12%,100%{outline:2px solid rgba(91,123,255,0);outline-offset:0}
 5%{outline:2px solid rgba(110,100,245,.45);outline-offset:3px}
 9%{outline:2px solid rgba(31,182,232,0);outline-offset:7px}}
.hero .segbar{position:relative}
.ga-pick{position:absolute;top:calc(100% + 1px);inset-inline-start:0;z-index:3;display:none;pointer-events:none;
 font:700 12px/1 var(--font);white-space:nowrap;padding:5px 10px 6px;border-radius:8px;color:#fff;background:linear-gradient(135deg,#7A62E6,#4F6BF5 55%,#1596C8);
 box-shadow:0 6px 16px -8px rgba(79,107,245,.9);animation:gaPickIn .5s cubic-bezier(.2,.8,.2,1.2) both,gaPickBob 1.8s ease-in-out .5s infinite}
.ga-pick.on{display:block}
@keyframes gaPickIn{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@keyframes gaPickBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* the arrow layer: fixed, under the header (z 50), never catches the pointer */
.ga-layer{position:fixed;inset:0;z-index:45;pointer-events:none;overflow:hidden;contain:strict;opacity:0;transition:opacity .25s}
.ga-layer.on{opacity:1}
.ga-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ga-svg path{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ga-line{stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 1px 2px rgba(60,70,200,.25))}
.ga-head{stroke-width:2.6}
.ga-conn{stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.ga-conn-h{stroke-width:2.2;opacity:0}
.ga-arw{transition:opacity .25s}
.ga-arw.draw .ga-line{animation:gaDraw .55s ease-out both}
.ga-arw.draw .ga-head{animation:gaHead .55s ease-out both}
@keyframes gaDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes gaHead{0%,60%{opacity:0}100%{opacity:1}}
.ga-bob{animation:gaBob 1.5s ease-in-out infinite}
@keyframes gaBob{0%,100%{transform:translate(0,0)}50%{transform:translate(0,var(--by,-4px))}}
.ga-lab{position:absolute;left:0;top:0;display:flex;align-items:center;gap:6px;padding:4px 4px 4px 9px;border-radius:9px;white-space:nowrap;
 font:700 12px/1.2 var(--font);letter-spacing:0;color:#3B2FC9;background:rgba(255,255,255,.94);border:1px solid rgba(110,100,245,.35);
 box-shadow:0 6px 18px -8px rgba(60,70,200,.45);transition:opacity .25s;will-change:transform}
html[dir=rtl] .ga-lab{padding:4px 9px 4px 4px}
.ga-n{font:700 10px/1 Inter,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#7A62E6,#4F6BF5 55%,#1596C8);padding:3px 5px;border-radius:5px;direction:ltr}
.ga-x{pointer-events:auto;display:grid;place-items:center;width:20px;height:20px;padding:0;margin:0;border:0;border-radius:6px;background:rgba(110,100,245,.1);color:inherit;font:600 10px/1 system-ui,sans-serif;cursor:pointer;opacity:.75}
.ga-x:hover{opacity:1;background:rgba(110,100,245,.2)}
.ga-lab.go{pointer-events:auto;cursor:pointer}
html[data-theme=dark] .ga-lab{color:#D8E6FF;background:rgba(22,20,44,.92);border-color:rgba(140,160,255,.35);box-shadow:0 6px 18px -8px rgba(0,0,0,.7)}
html[data-theme=dark] .ga-x{background:rgba(255,255,255,.08)}
/* the arrow carries the words now: hide the old «اضغط هنا» chip; skipping the guide also stops the pulse */
html.ga-on .hint-on::after,html.ga-on .hint-on::before,html.ga-skip .hint-on::after,html.ga-skip .hint-on::before{content:none!important;display:none!important}
html.ga-skip .hint-on{animation:none!important}
html.ga-skip .ga-layer,html.ga-skip .ga-pick{display:none!important}
@media (prefers-reduced-motion:reduce){
 html.ga-on .segs.ga-attn .seg:not([aria-selected=true]):not(.ga-tried){animation:none;outline:2px dashed rgba(110,100,245,.45);outline-offset:2px}
 .ga-pick,.ga-bob,.ga-arw.draw .ga-line,.ga-arw.draw .ga-head{animation:none!important}
 .ga-layer,.ga-arw,.ga-lab{transition:none}
}

/* pre-order: price summary + return-from-payment state */
.po-sum{margin:6px 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:rgba(124,58,237,.06);display:grid;gap:6px;font-size:14.5px}
.po-sum-l{display:flex;justify-content:space-between;gap:12px;align-items:baseline}.po-sum-l b{font-size:16px;white-space:nowrap}.po-sum-l s{opacity:.55;font-weight:400;font-size:13px;margin-inline-start:4px}
.po-sum-l.bad{color:var(--bad)}.po-sum-n{margin:2px 0 0;font-size:12.5px;opacity:.75;line-height:1.5}
.po-ret{margin-top:14px;padding:16px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.05)}
.po-ret h3{margin:0 0 6px;font-size:19px}.po-ret p{margin:4px 0}.po-ret .btn{margin-top:10px}.po-ret .dim{opacity:.75;font-size:13.5px}
.po-ret.good{border-color:color-mix(in srgb,var(--ok) 55%,transparent);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.po-ret.warn{border-color:color-mix(in srgb,#f59e0b 55%,transparent);background:color-mix(in srgb,#f59e0b 10%,transparent)}
.po-ret.bad{border-color:color-mix(in srgb,var(--bad) 55%,transparent);background:color-mix(in srgb,var(--bad) 8%,transparent)}
html[data-theme=light] .po-ret{background:#fff}
.po-form .btn[disabled]{opacity:.6;pointer-events:none}

/* floating pre-order button (Oct 19) */
html[data-theme] body .btn.fab-po{position:fixed;z-index:40;bottom:calc(18px + env(safe-area-inset-bottom,0px));inset-inline-end:18px;display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 20px;border-radius:15px;font-weight:800;font-size:15px;
 opacity:0;transform:translateY(16px) scale(.96);pointer-events:none;transition:opacity .3s ease,transform .4s var(--spring,cubic-bezier(.2,.8,.2,1.2)),box-shadow .3s ease;box-shadow:0 14px 32px -14px rgba(60,40,180,.6),inset 0 1px 0 rgba(255,255,255,.35)}
html[data-theme] body .btn.fab-po.show{opacity:1;transform:none;pointer-events:auto}
@media (max-width:480px){html[data-theme] body .btn.fab-po{min-height:46px;padding:0 16px;font-size:14px;border-radius:14px;inset-inline-end:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}}
@media (prefers-reduced-motion:reduce){html[data-theme] body .btn.fab-po{transition:opacity .2s}}