@import url(base.css);@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Inter:wght@400;600&family=Cairo:wght@400;700&display=swap');
:root{--c:#00f0ff;--m:#b14bff;--p:#ff2e88;--bg:#04050a;--ln:#1d2248}
html{scroll-behavior:smooth}body{background:var(--bg);color:#e9ecff;font-family:Inter,Cairo,system-ui,sans-serif;overflow-x:hidden}
[dir=rtl] body{font-family:Cairo,Inter,system-ui,sans-serif}
#hex{position:fixed;inset:0;width:100%;height:100%;z-index:-1;opacity:.55}
.scan{position:fixed;inset:0;pointer-events:none;z-index:20;background:repeating-linear-gradient(0deg,#0000 0 2px,#ffffff06 2px 3px);mix-blend-mode:overlay}
header{background:#04050acc;border-bottom:1px solid var(--ln)}.brand{font-family:Orbitron;letter-spacing:.25em;font-weight:900}
nav button{background:#0d1028;color:#e9ecff;border:1px solid #2a2f5a;padding:8px 14px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);font-family:Orbitron;font-size:12px;letter-spacing:.1em;transition:.2s}
nav button:hover{border-color:var(--c);box-shadow:0 0 18px #00f0ff44;color:var(--c)}#count{color:var(--c)}
.hero{min-height:calc(100vh - 60px);grid-template-columns:1fr;align-items:center;padding:8vh 5vw}
#three{position:absolute;inset:0;width:100%;height:100%}
.htxt{position:relative;max-width:620px;padding:30px;background:linear-gradient(135deg,#0a0d22cc,#05060b88);border:1px solid #00f0ff33;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hud .c{position:absolute;width:18px;height:18px;border:2px solid var(--c)}.tl{top:-2px;left:-2px;border-right:0!important;border-bottom:0!important}.tr{top:-2px;right:-2px;border-left:0!important;border-bottom:0!important}.bl{bottom:-2px;left:-2px;border-right:0!important;border-top:0!important}.br{bottom:-2px;right:-2px;border-left:0!important;border-top:0!important}
.tag{font-family:Orbitron;color:var(--c);letter-spacing:.3em;font-size:11px;display:flex;gap:8px;align-items:center}.dot{width:8px;height:8px;border-radius:50%;background:#39ff88;box-shadow:0 0 10px #39ff88;animation:bl 1.4s infinite}
@keyframes bl{50%{opacity:.2}}
.hero h1{font-family:Orbitron;font-weight:900;background:linear-gradient(90deg,#fff,var(--c) 55%,var(--m));-webkit-background-clip:text;background-clip:text;color:transparent;font-size:clamp(32px,5.2vw,68px)}
[dir=rtl] .hero h1,[dir=rtl] .sec,[dir=rtl] .mode span{font-family:Cairo;letter-spacing:0}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.ctas a{margin:0}
.cta,.ghost{font-family:Orbitron;letter-spacing:.12em;font-size:13px;padding:14px 26px;text-decoration:none;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.cta{background:linear-gradient(90deg,var(--c),var(--m));color:#04050a;font-weight:900;box-shadow:0 0 30px #00f0ff55;border:0}.cta:hover{filter:brightness(1.2)}
.ghost{color:var(--c);border:1px solid var(--c);display:inline-block}
.stats{list-style:none;padding:0;display:flex;gap:28px;margin-top:26px}.stats b{font-family:Orbitron;font-size:24px;color:#fff;display:block}.stats small{font-size:11px;opacity:.6;letter-spacing:.08em}
.scroll-hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-family:Orbitron;font-size:10px;letter-spacing:.4em;opacity:.45}
.glitch{position:relative}.glitch:hover{animation:gl .35s steps(2) 2}
@keyframes gl{0%{text-shadow:2px 0 var(--p),-2px 0 var(--c);transform:translate(1px)}50%{text-shadow:-2px 0 var(--p),2px 0 var(--c);transform:translate(-1px)}100%{text-shadow:none;transform:none}}
.sec{font-family:Orbitron;font-size:clamp(18px,2.4vw,28px);letter-spacing:.2em;margin:0 0 20px;color:#fff}.sec::after{content:"";display:block;width:80px;height:2px;margin-top:10px;background:linear-gradient(90deg,var(--c),transparent)}
.modes{padding:6vh 5vw 2vh}.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mode{position:relative;aspect-ratio:3/4;border:1px solid var(--ln);background:#090b18;padding:0;overflow:hidden;color:#fff;clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);transition:.3s}
.mode img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:.5s;filter:saturate(1.2)}
.mode::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,#04050af0)}
.mode span{position:absolute;bottom:16px;inset-inline-start:16px;z-index:1;font-family:Orbitron;font-weight:700;letter-spacing:.15em;font-size:14px}
.mode:hover,.mode:focus-visible{border-color:var(--c);box-shadow:0 0 28px #00f0ff30;transform:translateY(-3px)}.mode:hover img{opacity:.85;transform:scale(1.03)}
main{position:relative}#cats{gap:0;border:1px solid var(--ln);width:max-content;max-width:100%;overflow-x:auto;flex-wrap:nowrap;background:#070915cc}
#cats button{background:none;color:#8a90b8;border:0;border-inline-end:1px solid var(--ln);border-radius:0;font-family:Orbitron;font-size:11px;letter-spacing:.14em;padding:12px 18px;text-transform:uppercase;white-space:nowrap;position:relative}
[dir=rtl] #cats button{font-family:Cairo;font-size:13px;letter-spacing:0}
#cats button.on{color:#04050a;background:var(--c)}#cats button.on::before{content:"▸ "}#cats button:hover:not(.on){color:var(--c)}
.card{background:linear-gradient(160deg,#0e1128,#080a16);border:1px solid var(--ln);transform-style:preserve-3d;transition:border-color .3s,box-shadow .3s;will-change:transform;clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);position:relative}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),#00f0ff30,transparent 45%);opacity:0;transition:.3s}
.card:hover{border-color:var(--c);box-shadow:0 0 34px #00f0ff30}.card:hover::before{opacity:1}
.ph{background:#fff1}.info small{color:var(--c);opacity:.9;font-family:Orbitron;font-size:10px}
.row b{color:var(--c);font-family:Orbitron;font-size:14px}.row button{background:linear-gradient(90deg,var(--m),var(--p));color:#fff;font-weight:600;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
footer{border-top:1px solid var(--ln);font-family:Orbitron;font-size:11px;letter-spacing:.2em}
#bag{background:#000a;backdrop-filter:blur(4px)}#bag .in{background:#080a18;border-inline-start:1px solid #00f0ff66;box-shadow:0 0 60px #00f0ff22}#bag h2{font-family:Orbitron;letter-spacing:.15em}
#bag input{background:#10132a;border:1px solid #2a2f5a;color:#fff}#bag input:focus{outline:1px solid var(--c)}#bag .cta{width:100%;margin-top:14px}
#boot{position:fixed;inset:0;z-index:50;background:#020309;display:grid;place-items:center;transition:opacity .5s}#boot.gone{opacity:0;pointer-events:none}
.bt{width:min(460px,86vw);font-family:Orbitron;text-align:center}.bt img{width:56px;margin:0 auto 12px;filter:drop-shadow(0 0 16px var(--c))}.bt b{letter-spacing:.4em;color:var(--c)}
#bootlog{font:11px/1.6 ui-monospace,monospace;color:#7d86c0;text-align:start;height:96px;margin:18px 0;overflow:hidden;white-space:pre-wrap}
.bar{height:3px;background:#151937}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--c),var(--m));box-shadow:0 0 12px var(--c);transition:width .2s}
#skip{margin-top:18px;background:none;border:1px solid #2a2f5a;color:#aab;padding:6px 16px;font-family:Orbitron;font-size:11px}
.page-out{animation:po .35s forwards}@keyframes po{to{opacity:0;filter:blur(6px)}}
@media(max-width:760px){header{padding:10px 4vw}.brand{font-size:14px;letter-spacing:.15em}nav{gap:5px}nav button{padding:7px 9px;font-size:10px}.hero h1{font-size:30px}.htxt{padding:18px}.htxt p{font-size:14px}.stats{margin-top:16px}.stats b{font-size:18px}.ctas .cta,.ctas .ghost{padding:12px 18px}.mgrid{grid-template-columns:1fr 1fr}.htxt{padding:22px}.stats{gap:18px}.hero{min-height:88vh;align-items:end;padding-bottom:10vh}.scan{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}#boot{display:none}html{scroll-behavior:auto}}

[dir=rtl] .hero h1{line-height:1.35}
.modes,#shop{scroll-margin-top:70px}
/* ================= v3: depth / pop-out layer ================= */
#three{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}
.hero{overflow:visible;z-index:3;perspective:1200px}
.htxt{transform-style:preserve-3d;z-index:4}
.popout{position:absolute;inset-inline-end:4vw;top:16vh;width:min(40vw,560px);aspect-ratio:1;z-index:6;pointer-events:none;transform-style:preserve-3d;perspective:1000px}
.po-stage{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,6deg)) rotateY(var(--ry,-12deg))}
.po{position:absolute;overflow:hidden;border-radius:18px;border:1px solid #00f0ff55;box-shadow:0 40px 80px #000c,0 0 50px #00f0ff22;background:#0a0d22}
.po img{width:100%;height:100%;object-fit:cover;display:block}
.po::after{content:"";position:absolute;inset:0;background:linear-gradient(130deg,#ffffff2a,transparent 35%,transparent 70%,#00f0ff22)}
.po.l1{width:62%;aspect-ratio:4/5;left:2%;top:4%;transform:translateZ(-160px) rotateY(10deg);opacity:.75;filter:saturate(1.1) brightness(.8)}
.po.l2{width:56%;aspect-ratio:1;right:0;top:20%;transform:translateZ(-60px) rotateZ(4deg)}
.po.l3{width:52%;aspect-ratio:1;left:18%;bottom:-24%;transform:translateZ(140px) rotateZ(-6deg);border-color:var(--c);box-shadow:0 60px 90px #000e,0 0 70px #00f0ff55}
.po-tag{position:absolute;right:-4%;top:6%;transform:translateZ(220px);font-family:Orbitron;font-size:11px;letter-spacing:.25em;color:#04050a;background:var(--c);padding:8px 12px;box-shadow:0 18px 40px #000a,0 0 24px var(--c)}
[dir=rtl] .po-tag{font-family:Cairo;letter-spacing:0;right:auto;left:-4%}
.modes{position:relative;z-index:2;perspective:1400px}
.mgrid{transform-style:preserve-3d}.mode{transform-style:preserve-3d;clip-path:none;border-radius:16px;overflow:hidden}
.mode span{transform:translateZ(40px)}
main#shop{perspective:1600px;z-index:2;padding-top:4vh}
#grid{transform-style:preserve-3d;overflow:visible}
.card{clip-path:none!important;overflow:visible!important;border-radius:16px;animation:none!important;transition:transform .25s ease,box-shadow .25s,border-color .25s}
.card .ph{border-radius:16px 16px 0 0;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-radius .45s;position:relative;z-index:3}
.card .info{transform-style:preserve-3d;transition:transform .4s}
.card.lift,.card:hover{box-shadow:0 12px 28px -8px #000a,0 0 24px #00f0ff22;z-index:5;transform:translateY(-4px)}
.card.lift .ph,.card:hover .ph{transform:none;border-radius:14px}
.card.lift .info,.card:hover .info{transform:none}
.card .shadow{position:absolute;left:10%;right:10%;bottom:-26px;height:30px;background:radial-gradient(#000c,transparent 70%);filter:blur(8px);opacity:0;transition:.35s;pointer-events:none}
.card:hover .shadow,.card.lift .shadow{opacity:1}
.depth{will-change:transform}
.sec{transform-origin:0 50%}
@media(max-width:760px){.popout{position:relative;inset:auto;margin:-4vh auto -14vh;width:78vw;top:auto}.hero{display:flex;flex-direction:column-reverse;align-items:stretch}.po.l3{bottom:-14%}}
@media(hover:none){.card .ph{transform:none}}
@media(prefers-reduced-motion:reduce){.po-stage{transform:none!important}.po{transform:none!important;position:relative;display:none}.po.l3{display:block;width:100%;left:0;bottom:0}.card:hover .ph,.card.lift .ph{transform:none}}
@media(max-width:760px){.popout{width:62vw;margin:0 auto 6vh;inset-inline-end:auto}.po.l3{bottom:-8%;left:12%}.htxt{z-index:7}.hero{padding-top:4vh}}
@media(prefers-reduced-motion:reduce){.popout{aspect-ratio:auto;margin-bottom:3vh}.po-stage{position:relative}.po.l3{position:relative;inset:auto;width:100%;aspect-ratio:16/10;transform:none}}
@media(prefers-reduced-motion:reduce){.popout{display:none!important}#three,#hex{display:none!important}.card,.mode,.cta,.ghost{transform:none!important}.scroll-hint{animation:none!important}}