:root{--bg:#0b0c0e;--panel:#14161a;--panel2:#1a1d22;--line:#262a31;--text:#f4f5f6;--mute:#9aa0a8;--lime:#c8f31d;--lime-d:#9ccc0a}
:root[data-theme="light"]{--bg:#f3f4f1;--panel:#fff;--panel2:#eceee8;--line:#d9dcd3;--text:#14161a;--mute:#5d646d}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Cairo,system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;position:relative}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.wrap{max-width:1360px;margin:0 auto;padding:0 28px;position:relative;z-index:2}
/* navbar */
header{border-bottom:1px solid var(--line);position:relative;z-index:5}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;direction:ltr}
.logo svg{width:46px;height:46px}
.logo b{font-size:30px;font-weight:900;letter-spacing:.5px;line-height:1;display:block}
.logo small{font-size:10px;color:var(--mute);display:block;margin-top:3px}
.links{display:flex;gap:6px;align-items:center}
.links a{padding:8px 18px;border-radius:999px;font-weight:600;font-size:15px;color:var(--text)}
.links a:hover{color:var(--lime)}
.links a.on{background:var(--lime);color:#0b0c0e;font-weight:700}
.tools{display:flex;gap:12px;align-items:center}
.pill{background:var(--panel);border:1px solid var(--line);border-radius:999px;height:42px;display:flex;align-items:center;padding:0 14px;gap:8px;font:600 14px Cairo;color:var(--text);cursor:pointer}
.pill svg{width:20px;height:20px}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:10px;width:42px;height:42px;color:var(--text);cursor:pointer}
/* hero */
.hero{position:relative;padding:56px 0 30px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 20% 40%,rgba(200,243,29,.09),transparent 70%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:center}
.copy h1{font-size:clamp(40px,5.4vw,82px);font-weight:900;line-height:1.28}
.copy h1 em{font-style:normal;color:var(--lime)}
.copy p{margin:16px 0 28px;font-size:clamp(15px,1.5vw,20px);color:var(--text);opacity:.92}
.form{display:flex;gap:0;background:linear-gradient(180deg,#23262c,#15171b);border:1px solid #3a3f47;border-radius:999px;padding:0;height:80px;box-shadow:0 10px 40px rgba(0,0,0,.4)}
:root[data-theme="light"] .form{background:#fff}
.form label{display:flex;align-items:center;flex:1;padding:0 24px;gap:14px;min-width:0}
.form svg.lk{width:34px;height:34px;color:var(--text);flex:none}
.form input{flex:1;min-width:0;background:none;border:0;color:var(--text);font:600 18px Cairo;outline:none;text-align:start}
.form input::placeholder{color:var(--mute)}
.go{border:0;cursor:pointer;background:var(--lime);color:#0b0c0e;font:900 24px Cairo;padding:0 38px;border-radius:999px;display:flex;align-items:center;gap:12px;margin:0}
.go:hover{background:#d8ff3a}
.go svg{width:30px;height:30px}
.badges{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.badge{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:9px 22px;font-size:15px;font-weight:600}
.badge svg{width:24px;height:24px;color:var(--lime)}
/* phone art */
.art{position:relative;height:520px;direction:ltr}
.ring{position:absolute;border:4px solid var(--lime);border-radius:50%;box-shadow:0 0 22px rgba(200,243,29,.55),inset 0 0 18px rgba(200,243,29,.25);opacity:.9}
.r1{width:440px;height:170px;left:30px;top:310px;transform:rotate(-14deg)}
.r2{width:380px;height:150px;left:60px;top:90px;transform:rotate(-12deg);opacity:.6}
.phone{position:absolute;left:130px;top:60px;width:300px;height:380px;border-radius:34px;background:#0e0f12;border:6px solid #2b2e35;transform:rotate(-12deg) skewY(2deg);box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 2px #444;overflow:hidden}
.screen{position:absolute;inset:0;background:linear-gradient(180deg,#f0a35c 0%,#b9567b 38%,#3b3a7a 70%,#15162a 100%)}
.screen::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,transparent,#0c0d18)}
.play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.22);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:2}
.play svg{width:36px;height:36px;fill:#fff;margin-left:5px}
.bar{position:absolute;left:18px;right:18px;bottom:22px;z-index:2;font-size:11px;color:#fff;display:flex;justify-content:space-between;align-items:center}
.bar i{position:absolute;left:0;right:0;top:-12px;height:3px;background:rgba(255,255,255,.35);border-radius:2px}
.bar i::before{content:"";position:absolute;left:0;top:0;height:3px;width:30%;background:#ff3b3b;border-radius:2px}
.tile{position:absolute;width:84px;height:84px;border-radius:24px;display:grid;place-items:center;box-shadow:0 14px 30px rgba(0,0,0,.55)}
.tile svg{width:46px;height:46px}
.t-ig{left:20px;top:150px;background:linear-gradient(45deg,#fdc468,#e1306c 50%,#6a3df0);transform:rotate(-8deg)}
.t-tt{right:70px;top:30px;background:#0d0d0f;border:2px solid #222;transform:rotate(8deg)}
.t-fb{right:20px;top:210px;background:linear-gradient(180deg,#2d7cf2,#0b5bd3);transform:rotate(6deg)}
.t-x{left:100px;top:330px;background:#0d0d0f;border:2px solid #222;transform:rotate(-6deg);width:70px;height:70px}
.dl{position:absolute;right:50px;top:380px;width:96px;height:96px;border-radius:50%;background:#0d0d0f;border:5px solid var(--lime);box-shadow:0 0 26px rgba(200,243,29,.6);display:grid;place-items:center}
.dl svg{width:50px;height:50px;color:var(--lime)}
/* platforms */
.plat{position:relative;margin:28px 0 28px}
.plat h2{position:absolute;top:-22px;left:50%;transform:translateX(-50%);background:var(--bg);padding:6px 60px;font-size:24px;font-weight:900;border-radius:20px 20px 0 0;border:1px solid var(--line);border-bottom:0;white-space:nowrap}
.plat-box{background:var(--panel);border:1px solid var(--line);border-radius:34px;padding:34px 30px 22px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.pl{display:flex;align-items:center;gap:12px;background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:12px 24px;font-weight:600;font-size:16px;direction:ltr}
.pl:hover{border-color:var(--lime)}
.pl svg{width:36px;height:36px;flex:none}
.pl.more{gap:10px}
.pl.more svg{width:22px;height:22px}
/* features */
.feats{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-bottom:34px}
.f{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:26px;text-align:center;padding:24px 14px 22px}
.f svg{width:52px;height:52px;color:var(--lime);margin-bottom:6px}
.f h3{font-size:20px;font-weight:900}
.f p{font-size:13px;color:var(--mute);margin-top:4px}
/* footer strip */
.strip{display:flex;align-items:center;justify-content:center;gap:20px;padding:12px 0 46px;color:var(--text)}
.strip::before,.strip::after{content:"";height:1px;background:var(--lime);opacity:.7;flex:1;max-width:260px}
.strip svg{width:26px;height:26px;color:var(--lime)}
.wave{position:absolute;left:0;bottom:0;width:100%;height:120px;z-index:1;pointer-events:none}
.sig{position:absolute;left:30px;bottom:26px;z-index:2;direction:ltr;font-weight:900;color:var(--lime);line-height:1}
.sig b{font-size:34px;display:block}.sig span{font:italic 700 17px Cairo;display:block;margin:4px 0 0 18px;color:#fff}
/* responsive */
@media(max-width:1100px){
.hero-grid{grid-template-columns:1fr}
.art{height:430px;max-width:560px;margin:0 auto;width:100%;transform:scale(.88);transform-origin:top center}
.feats{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){
.burger{display:grid;place-items:center}
.links{display:none;position:absolute;top:78px;inset-inline:0;background:var(--panel);border-bottom:1px solid var(--line);flex-direction:column;padding:14px;align-items:stretch;text-align:center}
.links.open{display:flex}
.pill.lang span{display:none}
}
@media(max-width:640px){
.wrap{padding:0 16px}
.form{flex-direction:column;height:auto;border-radius:28px;padding:10px;gap:10px}
.form label{padding:14px 12px}
.go{justify-content:center;padding:16px;font-size:20px}
.art{height:340px;transform:scale(.62);margin-top:-20px;margin-bottom:-90px}
.feats{grid-template-columns:repeat(2,1fr)}
.f:last-child{grid-column:1/-1}
.plat h2{font-size:18px;padding:6px 26px}
.pl{padding:10px 16px;font-size:14px}
.sig{display:none}
.badge{padding:8px 14px;font-size:13px}
}
@media(prefers-reduced-motion:no-preference){
.dl{animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 40px rgba(200,243,29,.9)}}
}
html[dir=ltr] .pl.more svg{transform:scaleX(-1)}
.err{min-height:56vh;display:grid;place-items:center;text-align:center;padding:60px 0 120px;position:relative;z-index:2}
.err b{font-size:clamp(80px,16vw,170px);font-weight:900;color:var(--lime);line-height:1;display:block}
.err h1{font-size:clamp(24px,3.4vw,36px);margin:8px 0}
.err p{color:var(--mute);max-width:520px;margin:0 auto 26px}
.btn{display:inline-block;background:var(--lime);color:#0b0c0e;font-weight:900;padding:12px 32px;border-radius:999px}
.btn:hover{background:#d8ff3a}