:root{
  --bg:#f4f5fb; --surface:#fff; --ink:#15123f; --muted:#6a6a8c; --line:#e3e5f1;
  --brand:#1b1664; --brand2:#3a34c9; --accent:#13d8be; --accent-ink:#06352e; --navy:#0c0b2b;
  --soft:#eceafd; --ok:#0f7a4d; --warn:#9a5b00; --err:#b3261e; --radius:16px;
  --shadow:0 1px 2px rgba(20,18,63,.05),0 10px 30px rgba(20,18,63,.07);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.65;font-size:16px;
  font-family:Inter,Tajawal,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
[dir=rtl] body{font-family:Tajawal,Inter,system-ui,sans-serif}
a{color:var(--brand2);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
h1,h2,h3{line-height:1.25;margin:0 0 .5em;color:var(--ink)}
h1{font-size:clamp(1.8rem,4.4vw,2.9rem);font-weight:800;letter-spacing:-.01em}
h2{font-size:1.5rem;font-weight:800}
h3{font-size:1.05rem}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}
.center{text-align:center}
.muted{color:var(--muted)} .small{font-size:.85rem}
code{background:var(--soft);padding:.1em .45em;border-radius:6px;font-size:.92em}
.block{padding-top:48px}

/* header */
.top{background:var(--navy);position:sticky;top:0;z-index:30;border-bottom:1px solid rgba(255,255,255,.06)}
.top .bar{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
.brand{display:flex;align-items:center}.brand img{height:32px;width:auto}
.top nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.top nav a{color:#c9c8e8;padding:7px 13px;border-radius:9px;font-size:.95rem;font-weight:500}
.top nav a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.top nav a.lang{border:1px solid rgba(255,255,255,.28);color:#fff}

/* hero */
.hero{background:radial-gradient(900px 400px at 85% -10%,rgba(19,216,190,.22),transparent 60%),linear-gradient(135deg,var(--navy),#1b1664 80%);color:#fff;padding:68px 0 92px}
.hero h1{color:#fff;max-width:640px}
.hero-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:30px;align-items:center}
.hero .lead{max-width:600px;color:#cfd0f2;font-size:1.12rem;margin:.5em 0 1.5em}
.eyebrow{display:inline-block;background:rgba(19,216,190,.14);color:var(--accent);border:1px solid rgba(19,216,190,.4);padding:4px 14px;border-radius:999px;font-size:.82rem;font-weight:700;margin-bottom:16px}
.search{display:flex;gap:8px;max-width:560px;background:#fff;padding:6px;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.search input{flex:1;border:0;background:transparent;font:inherit;padding:10px 14px;color:var(--ink);min-width:0}
.search input:focus{outline:none}
.hero-link{display:inline-block;margin-top:16px;color:var(--accent);font-weight:600}
.hero-art{justify-self:center;opacity:.95;filter:drop-shadow(0 20px 40px rgba(0,0,0,.35))}
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);border:0;border-radius:11px;
  padding:11px 22px;font:inherit;font-weight:800;cursor:pointer;transition:transform .12s,filter .12s}
.btn:hover{filter:brightness(1.06);text-decoration:none;transform:translateY(-1px)}
.btn.block{display:block;width:100%;text-align:center;padding:14px}
.buy .btn{background:var(--brand);color:#fff}
.btn.small{padding:6px 14px;font-size:.88rem;border-radius:9px}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}

/* trust strip */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:-48px;position:relative}
.tcell{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px}
.tcell b{font-size:.98rem}.tcell span{color:var(--muted);font-size:.88rem}

/* catalogue */
.sec-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:18px}
.sec-head h2{margin:0}.sec-head p{margin:.2em 0 0}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:7px 15px;border-radius:999px;font-size:.9rem;font-weight:500}
.chip small{opacity:.6;margin-inline-start:4px}
.chip.on,.chip:hover{background:var(--brand);color:#fff;border-color:var(--brand);text-decoration:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:20px;padding-bottom:12px}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  color:var(--ink);box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s,border-color .15s;overflow:hidden}
.card:hover{transform:translateY(-4px);border-color:var(--brand2);text-decoration:none;box-shadow:0 18px 40px rgba(27,22,100,.14)}
.thumb{position:relative;aspect-ratio:4/3;background:var(--soft);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.tags{position:absolute;top:10px;inset-inline-end:10px;display:flex;gap:6px;flex-wrap:wrap}
.tag{padding:3px 10px;border-radius:999px;font-size:.76rem;font-weight:800;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.tag.off{background:#ff3d6b;color:#fff}.tag.best{background:var(--accent);color:var(--accent-ink)}.tag.new{background:#fff;color:var(--brand)}
.cbody{display:flex;flex-direction:column;gap:4px;padding:16px 18px 18px;flex:1}
.cat{font-size:.75rem;font-weight:700;color:var(--brand2);text-transform:uppercase;letter-spacing:.04em}
.card h3{margin:.1em 0 0;font-size:1.08rem}
.card p{margin:0;color:var(--muted);font-size:.92rem;flex:1}
.deliv{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--ok);font-weight:600;margin-top:6px}
.dotg{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.foot-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:12px;border-top:1px dashed var(--line)}
.price{font-size:1.3rem;font-weight:800}
.price small{font-size:.8rem;color:var(--muted);font-weight:500}
.was{font-size:.9rem;color:var(--muted);font-weight:500;margin-inline-start:6px}
.ends{font-size:.76rem;color:#c2255c;font-weight:700;margin-top:4px}
.go{color:var(--brand2);font-weight:700;font-size:.88rem}
.badge{display:inline-flex;align-items:center;background:var(--soft);color:var(--brand);padding:3px 12px;border-radius:999px;font-size:.8rem;font-weight:700;margin-bottom:6px}

/* faq */
.faq{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:700}.faq p{margin:.6em 0 0;color:var(--muted)}

/* product page */
.prod{display:grid;grid-template-columns:1fr 380px;gap:40px;padding-top:32px;padding-bottom:40px;align-items:start}
.pimg{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:20px;background:var(--soft)}
.pimg img{width:100%;height:auto}
.lead2{font-size:1.15rem;color:var(--muted);margin:.2em 0 1em}
.prod .body{font-size:1.02rem;margin:1em 0 1.4em}
.back{display:inline-block;margin-bottom:12px;color:var(--muted);font-size:.9rem}
.ticks{list-style:none;padding:0;margin:0 0 1em}
.ticks li{padding-inline-start:30px;position:relative;margin:.4em 0}
.ticks li::before{content:"✓";position:absolute;inset-inline-start:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:.78rem;font-weight:900;text-align:center;line-height:20px}
.buy{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);position:sticky;top:84px}
.price-big{font-size:2.2rem;font-weight:800;margin-bottom:10px}
.price-big small{font-size:.9rem;font-weight:500;color:var(--muted)}
.price-big .was{font-size:1.1rem}
.offerbox{background:#fff0f4;border:1px solid #ffc9d6;color:#9f1239;border-radius:12px;padding:10px 14px;margin-bottom:12px;font-size:.9rem}
label{display:block;font-weight:600;font-size:.92rem;margin:12px 0 4px}
input[type=text],input[type=email],input[type=password],input[type=file],input[type=search],select,textarea{
  width:100%;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand2);outline-offset:1px}
label.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.86rem;margin:14px 0}
label.check input{margin-top:5px;accent-color:var(--brand)}
.hp{position:absolute;inset-inline-start:0;opacity:0;height:1px;width:1px;overflow:hidden;clip:rect(0 0 0 0);pointer-events:none}
.buy .btn{margin-top:6px}

/* alerts, panels */
.alert{padding:12px 16px;border-radius:10px;margin:16px 0;border:1px solid;font-size:.95rem}
.alert.error{background:#fef2f2;border-color:#fecaca;color:var(--err)}
.alert.warn{background:#fffbeb;border-color:#fde68a;color:var(--warn)}
.alert.ok,.alert.info{background:#effcf6;border-color:#a8ecd0;color:var(--ok)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin:18px 0;box-shadow:var(--shadow)}
.pill{display:inline-block;padding:3px 13px;border-radius:999px;font-weight:700;font-size:.82rem;background:var(--line);color:var(--ink)}
.pill.paid{background:#d9f7ea;color:#0b6b43}
.pill.pending{background:#fff1c9;color:#8a5200}
.pill.failed,.pill.cancelled{background:#fde1e1;color:#9b1c1c}
.state{margin-bottom:14px}
.keybox{display:flex;gap:10px;align-items:center;background:#f1fffc;border:2px dashed var(--accent);border-radius:12px;padding:14px 16px;flex-wrap:wrap}
.keybox code{font-size:1.05rem;background:none;word-break:break-all;flex:1}

/* legal */
.legal{padding-top:36px;padding-bottom:64px}
.legal h2{font-size:1.1rem;margin-top:1.4em}
.legal p{margin:.3em 0}

/* admin */
.admin-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px;flex-wrap:wrap}
.stats{display:flex;gap:14px;flex-wrap:wrap;margin:16px 0}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 22px;color:var(--ink)}
a.stat:hover{border-color:var(--brand2);text-decoration:none}
.stat span{display:block;font-size:1.8rem;font-weight:800;color:var(--brand2)}
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
th{background:var(--bg);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
tr:last-child td{border-bottom:0}
.formgrid h3{margin-top:1.2em}
.stack{display:flex;flex-direction:column;gap:6px;min-width:240px;margin-bottom:6px}
.inline{display:inline-block}
.adm-thumb{max-width:260px;border-radius:12px;border:1px solid var(--line);margin:8px 0}

/* footer */
.foot{background:var(--navy);color:#9a99c4;margin-top:56px;padding:36px 0;font-size:.9rem}
.foot a{color:#d7d6f2}
.foot-top{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:14px}
.foot-top p{margin:.5em 0 0}
.foot .links{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.foot p{margin:.3em 0}
.foot .muted{color:#6e6da0}
main{min-height:60vh}

@media (max-width:860px){
  .prod{grid-template-columns:1fr}
  .buy{position:static}
  .hero{padding:44px 0 80px}
  .hero-grid{grid-template-columns:1fr}.hero-art{display:none}
  .top .bar{height:auto;padding:10px 20px;flex-wrap:wrap}
}

/* ---- v3: full-width layout, bigger logo, install bar ---- */
.wrap{max-width:none;padding-inline:clamp(16px,4vw,72px)}
.narrow{max-width:760px;margin-inline:auto}
.brand img{height:46px}
.top .bar{min-height:76px}
.foot img[alt]{height:44px;width:auto}
.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.prod{grid-template-columns:minmax(0,1fr) clamp(340px,28vw,460px)}
.hero h1{max-width:900px}
.gbp{display:block;font-size:.78rem;color:var(--muted);font-weight:500}
@media (max-width:860px){.brand img{height:38px}.wrap{padding-inline:16px}}
.pwa-bar{position:fixed;inset-inline:12px;bottom:12px;z-index:60;display:flex;align-items:center;gap:12px;background:#12113a;color:#fff;border:1px solid #3a3880;border-radius:16px;padding:10px 12px;box-shadow:0 12px 40px rgba(0,0,0,.4);max-width:560px;margin-inline:auto}
.pwa-bar span{flex:1;font-size:.92rem;line-height:1.5}
.pwa-bar img{border-radius:10px}
.pwa-go{background:#7c6cf5;color:#fff;border:0;border-radius:10px;padding:9px 16px;font-weight:700;cursor:pointer}
.pwa-x{background:none;border:0;color:#aab;font-size:22px;cursor:pointer;padding:0 4px}

.pimg{max-width:760px}
.pimg img{width:100%;height:auto;max-height:520px;object-fit:cover}
.prod{max-width:1320px;margin-inline:auto}

/* ---- account ---- */
.acct-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:28px 0 10px}
.acct-actions{display:flex;gap:8px;align-items:center}
.tablewrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:14px;margin:10px 0}
.tbl{width:100%;border-collapse:collapse;font-size:.92rem}.tbl th,.tbl td{padding:10px 12px;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}.tbl th{background:var(--soft);font-weight:700;white-space:nowrap}
.nowrap{white-space:nowrap}.filter{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:8px 0 14px}.filter input{padding:8px;border:1px solid var(--line);border-radius:8px}
.stm-total{font-size:1.1rem;text-align:end;margin:10px 0}.print-head{display:none}
@media print{.top,.foot,.noprint,.pwa-bar{display:none!important}.print-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;border-bottom:3px solid #13d8be;padding-bottom:10px}.tablewrap{border:0}body{background:#fff}}

/* ---- v6: white header + animated hero slider ---- */
.top{background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 14px rgba(20,18,80,.06)}
.top .bar{min-height:84px}
.brand img{height:54px}
.top nav a{color:#2b2a5a;font-weight:600}
.top nav a:hover{background:var(--soft);color:var(--brand)}
.top nav a.lang{border:1px solid var(--line);color:var(--brand)}
@media (max-width:860px){.brand img{height:44px}.top .bar{min-height:70px}}
.hero{position:relative;overflow:hidden;color:#fff;padding:0 0 96px;background:#3a2fd0}
.hero-bgs{position:absolute;inset:0}
.hbg{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.hbg.on{opacity:1}
.hbg.s1{background:linear-gradient(120deg,#ff5f6d 0%,#c13cc4 48%,#5b2bd6 100%)}
.hbg.s2{background:linear-gradient(120deg,#00a8a0 0%,#1673d9 55%,#3a2fd0 100%)}
.hbg.s3{background:linear-gradient(120deg,#ff9a3c 0%,#e8407a 52%,#8a2bd6 100%)}
.hbg.s4{background:linear-gradient(120deg,#1db98a 0%,#1a8fd6 50%,#5a35d8 100%)}
.orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.28;background:radial-gradient(circle at 30% 30%,#fff,rgba(255,255,255,0) 70%);animation:orb 14s ease-in-out infinite}
.o1{width:520px;height:520px;inset-inline-end:-120px;top:-160px}.o2{width:300px;height:300px;inset-inline-start:30%;bottom:-120px;animation-delay:-5s}.o3{width:180px;height:180px;inset-inline-start:6%;top:12%;animation-delay:-9s}
@keyframes orb{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(26px,-30px) scale(1.08)}}
.hero-stage{position:relative;display:grid;min-height:560px}
.hslide{grid-area:1/1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:30px;padding:56px 0 24px;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s}
.hslide.on{opacity:1;visibility:visible}
.hslide .htext{animation:none}.hslide.on .htext{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero h1{color:#fff;font-size:clamp(2rem,4.2vw,3.6rem);line-height:1.12;max-width:760px;text-shadow:0 2px 24px rgba(30,10,80,.25)}
.hero .lead{color:rgba(255,255,255,.92);max-width:620px;font-size:1.15rem;margin:.7em 0 1.4em}
.eyebrow{background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(6px)}
.hbtn{display:inline-block;background:#fff;color:#3a2fd0;font-weight:800;padding:13px 26px;border-radius:14px;box-shadow:0 12px 30px rgba(30,10,80,.3);transition:transform .15s}
.hbtn:hover{transform:translateY(-2px);text-decoration:none}
.hart{position:relative;height:460px}
.hi{position:absolute;border-radius:22px;box-shadow:0 30px 60px rgba(20,10,70,.45),0 0 0 1px rgba(255,255,255,.25);width:min(62%,520px);height:auto;will-change:transform}
.hi1{inset-inline-end:2%;top:6%;z-index:3;animation:fl1 7s ease-in-out infinite;transform:rotate(-4deg)}
.hi2{inset-inline-start:2%;top:36%;z-index:2;width:min(46%,380px);animation:fl2 8s ease-in-out infinite;transform:rotate(5deg)}
.hi3{inset-inline-end:14%;top:58%;z-index:4;width:min(40%,330px);animation:fl3 6.5s ease-in-out infinite;transform:rotate(-2deg)}
.hslide:not(.on) .hi{animation-play-state:paused}
.hslide.on .hi1{animation:in1 1s cubic-bezier(.2,.7,.2,1) both,fl1 7s 1s ease-in-out infinite}
.hslide.on .hi2{animation:in2 1.1s .1s cubic-bezier(.2,.7,.2,1) both,fl2 8s 1.1s ease-in-out infinite}
.hslide.on .hi3{animation:in3 1.2s .2s cubic-bezier(.2,.7,.2,1) both,fl3 6.5s 1.2s ease-in-out infinite}
@keyframes in1{from{opacity:0;transform:translateX(60px) rotate(-12deg) scale(.9)}to{opacity:1;transform:rotate(-4deg)}}
@keyframes in2{from{opacity:0;transform:translateX(-60px) rotate(12deg) scale(.9)}to{opacity:1;transform:rotate(5deg)}}
@keyframes in3{from{opacity:0;transform:translateY(60px) scale(.9)}to{opacity:1;transform:rotate(-2deg)}}
@keyframes fl1{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-16px) rotate(-2deg)}}
@keyframes fl2{0%,100%{transform:translateY(0) rotate(5deg)}50%{transform:translateY(14px) rotate(3deg)}}
@keyframes fl3{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(-4deg)}}
.spk{position:absolute;color:#fff;opacity:.9;font-size:28px;animation:tw 3s ease-in-out infinite;z-index:5}
.k1{top:2%;inset-inline-start:30%}.k2{top:50%;inset-inline-end:0;font-size:20px;animation-delay:-1s}.k3{bottom:2%;inset-inline-start:12%;font-size:34px;animation-delay:-2s}
@keyframes tw{0%,100%{transform:scale(.6) rotate(0);opacity:.3}50%{transform:scale(1.15) rotate(25deg);opacity:1}}
.hero-foot{position:relative;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.hero .search{margin:0}
.hdots{display:flex;gap:10px}
.hdot{width:12px;height:12px;border-radius:99px;border:0;background:rgba(255,255,255,.45);cursor:pointer;padding:0;transition:width .3s,background .3s}
.hdot.on{width:38px;background:#fff}
@media (max-width:860px){
  .hero{padding-bottom:84px}.hero-stage{min-height:0}
  .hslide{grid-template-columns:1fr;padding:34px 0 10px;gap:12px}
  .hart{height:290px;order:2}.hi{width:58%}.hi2{width:44%}.hi3{width:38%;top:62%}
  .hero .lead{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){.hi,.orb,.spk,.hslide .htext{animation:none!important}.hbg,.hslide{transition:none}}