/* ============ الصفحة الرئيسية (Sterio Store) ============ */
html{--hb1:#020819;--hb2:#041033;--ht:#fff;--hm:#a9b8d8;--hblue:#1668f5;--hline:rgba(70,130,255,.22);--hpanel:rgba(4,12,34,.97);--hact:rgba(12,40,110,.5);--hghost:rgba(10,30,80,.35);--hico:#2f7bff;--hfi:rgba(12,40,110,.5)}
html[data-theme=light]{--hb1:#f4f8ff;--hb2:#e4edfc;--ht:#0a1633;--hm:#52648a;--hblue:#1457e0;--hline:rgba(30,90,220,.2);--hpanel:rgba(255,255,255,.98);--hact:rgba(20,87,224,.1);--hghost:rgba(255,255,255,.7);--hico:#1457e0;--hfi:rgba(20,87,224,.09);color-scheme:light}

body.home,body.home *{font-family:'Plus Jakarta Sans','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
body.home{background:radial-gradient(900px 520px at 12% 4%,rgba(20,80,255,.22),transparent 65%),radial-gradient(900px 600px at 82% 38%,rgba(15,70,230,.24),transparent 65%),linear-gradient(180deg,var(--hb1) 0%,var(--hb2) 100%);color:var(--ht);overflow-x:hidden}
html[data-theme=light] body.home{background:radial-gradient(900px 520px at 12% 4%,rgba(60,120,255,.18),transparent 65%),radial-gradient(900px 600px at 82% 38%,rgba(60,130,255,.2),transparent 65%),linear-gradient(180deg,var(--hb1) 0%,var(--hb2) 100%)}
.home .background{display:none}
.hd a,.ft a,.hero a,.feat a{text-decoration:none;color:inherit}
.home .i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.home .i.fill{fill:currentColor;stroke:none}
.hd button,.ft button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.home :focus-visible{outline:2px solid #6db3ff;outline-offset:3px;border-radius:10px}

.page{position:relative;overflow:hidden}
.screen{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden}
.screen>*{position:relative;z-index:1}
main{flex:1;display:flex;flex-direction:column}
.wrap{width:100%;max-width:1840px;margin-inline:auto;padding-inline:clamp(20px,7.8vw,140px)}

/* موجات */
.wave{position:absolute!important;z-index:0!important;bottom:0;pointer-events:none}
.wave-l{left:0;width:min(32vw,520px);height:min(20vh,190px)}
.wave-r{right:0;width:min(26vw,420px);height:min(28vh,260px)}
html[data-theme=light] .wave{opacity:.5}

/* ---------- الهيدر ---------- */
.hd{position:relative;z-index:40;border-bottom:1px solid var(--hline);background:linear-gradient(180deg,rgba(4,14,40,.35),transparent)}
html[data-theme=light] .hd{background:rgba(255,255,255,.45);backdrop-filter:blur(8px)}
.hd-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:96px;gap:16px}
.brand{display:flex;align-items:center;gap:14px;justify-self:start;min-width:0}
.mk{display:grid;place-items:center;width:54px;height:60px;flex:none}
.mark{width:100%;height:100%;transform:skewX(-8deg);filter:drop-shadow(0 0 14px rgba(40,120,255,.7))}
.bn{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.bn b{font-size:clamp(1.45rem,1.7vw,1.9rem);font-weight:700;letter-spacing:-.01em;color:var(--ht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bn b,.bn i,.hero h1 span{text-transform:uppercase}
.bn i{padding-inline-start:.9em;font-style:normal;font-size:clamp(1.1rem,1.35vw,1.45rem);font-weight:600;color:var(--hblue);letter-spacing:-.01em;filter:brightness(1.25)}
html[data-theme=light] .bn i{filter:none}

.home nav.links{display:flex;align-items:center;gap:6px;background:none;padding:0;border:0;backdrop-filter:none;position:static;flex-wrap:nowrap;justify-content:flex-start;top:auto}
.home nav.links a{margin:0;padding:13px 25px;border-radius:999px;font-weight:500;font-size:1.06rem;color:var(--ht);opacity:.92;transition:background .2s,opacity .2s,box-shadow .2s;border:1px solid transparent}
.home nav.links a:hover{opacity:1;background:var(--hact)}
.home nav.links a.on{opacity:1;font-weight:600;background:linear-gradient(180deg,#0f46b4,#0a2c80);border-color:rgba(90,160,255,.5);box-shadow:0 0 26px rgba(30,100,255,.5),inset 0 1px 0 rgba(255,255,255,.18);color:#fff}
.dc-m{display:none!important}

.acts{display:flex;align-items:center;gap:6px;justify-self:end}
.ib{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;transition:background .2s}
.ib:hover{background:var(--hact)}
.ib .i{width:24px;height:24px}
.ib.ct{position:relative;color:inherit}.ib.ct.on{background:var(--hact)}
.ib .badge{position:absolute;top:2px;right:0;min-width:18px;padding:0 5px;font-size:.7rem;line-height:18px;text-align:center;background:linear-gradient(180deg,#1b74ff,#0a5bff);color:#fff;border-radius:99px}
.ico-moon,.ico-x{display:none}
html[data-theme=light] .ico-sun{display:none}html[data-theme=light] .ico-moon{display:block}
.sep{width:1px;height:30px;background:var(--hline);margin-inline:10px}
.dcb{display:inline-flex;align-items:center;gap:11px;height:50px;padding:0 24px;border-radius:999px;border:1px solid rgba(70,140,255,.6);background:var(--hghost);font-weight:600;font-size:1.02rem;transition:.2s;white-space:nowrap}
.dcb:hover{background:#5865f2;border-color:#5865f2;color:#fff}
.dcb .i{width:25px;height:25px;color:#5b8dff}.dcb:hover .i{color:#fff}
.burger{display:none}

.sbar{position:absolute;right:clamp(20px,7.8vw,140px);top:calc(100% + 10px);display:flex;align-items:center;gap:10px;width:min(480px,calc(100% - 40px));padding:8px 8px 8px 16px;border-radius:16px;background:var(--hpanel);border:1px solid var(--hline);box-shadow:0 18px 50px rgba(0,0,0,.45);z-index:60}
.sbar[hidden]{display:none}
.sbar input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ht);font-size:1rem;padding:8px 0}
.sbar input::placeholder{color:var(--hm)}
.sbar button{padding:10px 20px;border-radius:11px;background:linear-gradient(180deg,#1a72ff,#0a5bff);color:#fff;font-weight:600}

/* ---------- الهيرو ---------- */
.hero{flex:1;display:grid;grid-template-columns:1.02fr 1fr;align-items:center;gap:clamp(12px,2vw,40px);padding-block:clamp(28px,4vh,56px)}
.tagpill{display:inline-flex;align-items:center;gap:10px;padding:10px 20px 10px 16px;border-radius:999px;background:rgba(14,44,120,.55);border:1px solid rgba(70,140,255,.4);font-weight:600;font-size:1rem;color:#fff}
.tagpill .i{width:18px;height:18px;color:#2f7bff}
html[data-theme=light] .tagpill{background:rgba(20,87,224,.1);color:var(--ht)}
.hero h1{margin:clamp(18px,3vh,30px) 0 clamp(14px,2.4vh,24px);font-size:clamp(3.1rem,5.3vw,6.4rem);line-height:.98;font-weight:800;letter-spacing:-.035em;background:none;color:var(--ht);-webkit-text-fill-color:currentColor}
.hero h1 span{display:block}
.hero h1 .b{padding-inline-start:.5em;color:var(--hblue);-webkit-text-fill-color:currentColor;background:linear-gradient(180deg,#2b82ff,#1260f0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.08em}
.lead{max-width:30em;font-size:clamp(1.02rem,1.26vw,1.34rem);line-height:1.6;color:var(--hm);font-weight:400}
.cta-row{display:flex;flex-wrap:wrap;gap:18px;margin-top:clamp(24px,4vh,42px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:64px;padding:0 32px;border-radius:15px;font-weight:600;font-size:1.12rem;transition:transform .2s,box-shadow .2s,background .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn .i{width:22px;height:22px}
.btn.primary{color:#fff;background:linear-gradient(180deg,#1b74ff,#0a5bff);box-shadow:0 12px 34px rgba(18,100,255,.5),inset 0 1px 0 rgba(255,255,255,.25)}
.btn.primary:hover{box-shadow:0 16px 42px rgba(40,130,255,.65),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.ghost{border:1px solid rgba(80,150,255,.5);background:var(--hghost);color:var(--ht)}
.btn.ghost:hover{background:var(--hact)}

.art-col{display:flex;justify-content:center;align-items:center;min-width:0}
.art{width:100%;max-width:700px;height:auto;overflow:visible;filter:drop-shadow(0 30px 50px rgba(5,30,120,.35))}
.corona{transform-box:fill-box;transform-origin:center;animation:spin 70s linear infinite}.corona.rev{animation-direction:reverse;animation-duration:110s}
@keyframes spin{to{transform:rotate(360deg)}}
.fl{animation:flt 7s ease-in-out infinite}.fl2{animation-delay:-2.2s;animation-duration:8s}.fl3{animation-delay:-4s;animation-duration:9s}
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---------- المميزات ---------- */
.feat{position:relative;display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;padding-block:clamp(26px,4vh,40px)}
.feat::before{content:'';position:absolute;top:0;left:clamp(20px,7.8vw,140px);right:clamp(20px,7.8vw,140px);height:1px;background:var(--hline)}
.f{position:relative;display:flex;align-items:center;gap:18px;min-width:0}
.f:not(:first-child){padding-left:clamp(18px,2.4vw,46px)}
.f:not(:first-child)::before{content:'';position:absolute;left:0;top:50%;height:64px;transform:translateY(-50%);width:1px;background:var(--hline)}
.fi{width:70px;height:70px;border-radius:18px;display:grid;place-items:center;flex:none;background:var(--hfi);border:1px solid rgba(70,140,255,.45);color:var(--hico);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.fi .i{width:32px;height:32px}
.f h3,.f p{white-space:nowrap}
.f h3{font-size:1.16rem;font-weight:600;margin-bottom:5px;color:var(--ht)}
.f p{font-size:.95rem;color:var(--hm);line-height:1.4}


/* ---------- الفوتر ---------- */
.ft{padding:64px 0 48px;border-top:1px solid var(--hline);background:rgba(2,8,25,.45)}
html[data-theme=light] .ft{background:rgba(255,255,255,.5)}
.ft .wrap{display:flex;flex-direction:column;align-items:center;gap:20px}
.dcf{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:var(--hico);background:var(--hfi);border:1px solid var(--hline);transition:.2s}
.dcf:hover{background:#5865f2;border-color:#5865f2;color:#fff;transform:translateY(-2px)}
.dcf .i{width:26px;height:26px}
.copy{font-size:.85rem;color:var(--hm)}

/* ---------- لاب توب / تابلت ---------- */
@media(max-width:1180px){
 .links a{padding:12px 17px;font-size:1rem}
 .dcb{padding:0 18px}.dcb span{font-size:.95rem}
 .btn{height:58px;padding:0 26px;font-size:1.04rem}
 .fi{width:60px;height:60px;border-radius:16px}.fi .i{width:28px;height:28px}
 .f{gap:14px}
}

/* ---------- موبايل / تابلت صغير ---------- */
@media(max-width:900px){
 .hd-in{grid-template-columns:1fr auto;height:74px}
 .mk{width:42px;height:48px}
 .sep,.acts .dcb{display:none}
 .burger{display:grid}
 .hd.open .ico-menu{display:none}.hd.open .ico-x{display:block}
 .home nav.links{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:4px;padding:14px clamp(20px,5vw,40px) 18px;background:var(--hpanel);border-bottom:1px solid var(--hline);box-shadow:0 24px 50px rgba(0,0,0,.45);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s}
 .home .hd.open nav.links{opacity:1;visibility:visible;transform:none}
 .home nav.links a{padding:15px 18px;border-radius:14px;font-size:1.08rem}
 .dc-m{display:flex!important;align-items:center;gap:12px;margin-top:8px;justify-content:center;border:1px solid rgba(70,140,255,.6)!important;background:var(--hghost)}
 .dc-m[hidden]{display:none!important}
 .dc-m .i{width:24px;height:24px;color:#5b8dff}
 .sbar{right:clamp(20px,5vw,40px);left:clamp(20px,5vw,40px);width:auto}

 .hero{grid-template-columns:1fr;gap:6px;padding-block:30px 12px}
 .hero h1{font-size:clamp(3rem,14vw,5.4rem)}
 .lead{font-size:1.04rem;max-width:34em}
 .art-col{order:2;margin-top:8px}
 .art{max-width:560px}
 .feat{grid-template-columns:1fr 1fr;justify-content:stretch;gap:22px 18px;padding-block:28px 26px}.f h3,.f p{white-space:normal}
 .f:not(:first-child){padding-left:0}.f:not(:first-child)::before{display:none}
 .screen{min-height:0}.wave{opacity:.55}.wave-l{width:38vw;height:70px}.wave-r{width:30vw;height:100px}
}
@media(max-width:560px){
 .hd-in{gap:8px}.brand{gap:10px}.mk{width:34px;height:40px}.bn b{font-size:1.2rem}.bn i{font-size:.95rem}
 .acts{gap:0}.ib{width:40px;height:40px;border-radius:12px}.ib .i{width:22px;height:22px}
 .cta-row{gap:12px;width:100%}
 .btn{flex:1 1 0;height:56px;padding:0 12px;gap:9px;font-size:1rem}
 .feat{grid-template-columns:1fr;gap:18px}.f h3,.f p{white-space:normal}
 .fi{width:58px;height:58px}
 .tagpill{font-size:.92rem;padding:9px 16px 9px 13px}
 .art{max-width:100%}
 .ft{padding:44px 0 36px}
}
@media(max-width:380px){.bn b{font-size:1.25rem}.bn i{font-size:1rem}.hero h1{font-size:2.9rem}}
@media(prefers-reduced-motion:reduce){.fl,.corona{animation:none}.btn,.links a{transition:none}}