:root{--navy:#050d1f;--deep:#0a1a3a;--blue:#1e6bff;--sky:#4aa3ff;--orange:#ff7a1a;--text:#e8efff;--muted:#8a9cc4;--green:#2ee59d;--line:rgba(74,163,255,.22)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.ab{margin:0;font-family:'Space Grotesk',system-ui,sans-serif;background:var(--navy)!important;color:var(--text)!important;min-height:100vh;overflow-x:hidden;text-align:left}
body.ab::before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(60% 40% at 15% 0%,rgba(30,107,255,.25),transparent),radial-gradient(50% 35% at 90% 10%,rgba(255,122,26,.14),transparent),linear-gradient(rgba(74,163,255,.05) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(74,163,255,.05) 1px,transparent 1px) 0 0/40px 40px}
#particles{position:fixed;inset:0;z-index:-1;pointer-events:none}
.ab .navbar{display:none!important}
/* header */
.abh{position:sticky;top:0;z-index:20;background:rgba(5,13,31,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:calc(8px + env(safe-area-inset-top,0px)) 16px 8px;display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.mark{height:40px;width:auto;background:#fff;border-radius:10px;padding:4px 6px;display:block;box-shadow:0 0 0 1px rgba(74,163,255,.35),0 0 14px rgba(30,107,255,.3)}
.logo{line-height:1.05}.logo b{display:block;font-size:1.15rem;letter-spacing:.14em;color:#fff}.logo span{font-size:.62rem;letter-spacing:.2em;color:var(--orange)}.logo small{display:block;font-size:.6rem;color:var(--muted);letter-spacing:.08em}
.mainnav{display:flex;gap:4px;margin-left:24px}
.mainnav a{color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:500;padding:8px 14px;border-radius:8px;border-bottom:2px solid transparent;transition:.25s;white-space:nowrap}
.mainnav a:hover{color:var(--text);background:rgba(30,107,255,.15)}.mainnav a.on{color:#fff;border-bottom-color:var(--orange)}
.hnav{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-btn{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(10,26,58,.7);color:var(--text);display:grid;place-items:center;cursor:pointer;text-decoration:none;font-size:1.05rem;transition:.25s}
.icon-btn:hover,.icon-btn:focus-visible{border-color:var(--orange);box-shadow:0 0 14px rgba(255,122,26,.4);outline:none}
.icon-btn i{position:absolute;top:-4px;right:-4px;background:var(--orange);color:#111;font:700 .65rem/1 inherit;border-radius:10px;padding:3px 5px;font-style:normal}
.circuit{position:absolute;left:0;bottom:-1px;width:100%;height:8px;pointer-events:none}
.circuit path{fill:none;stroke-width:1.4;vector-effect:non-scaling-stroke}
.c1{stroke:#4aa3ff;stroke-dasharray:70 330;animation:run 7s linear infinite}.c2{stroke:#ff7a1a;stroke-dasharray:36 460;animation:run 11s linear infinite reverse}
@keyframes run{to{stroke-dashoffset:-1600}}
@media(max-width:820px){.mainnav{order:3;width:100%;margin:0;overflow-x:auto;scrollbar-width:none}.mainnav::-webkit-scrollbar{display:none}}
/* legacy bootstrap content in dark theme */
.ab section,.ab .bg-light,.ab .product-section,.ab .cta-section,.ab .bg-white{background:transparent!important;color:var(--text)!important}
.ab header:not(.abh){background:linear-gradient(120deg,rgba(30,107,255,.35),rgba(255,122,26,.2))!important;color:#fff!important;border-bottom:1px solid var(--line)}
.ab h1,.ab h2,.ab h3,.ab h4,.ab h5{color:#fff}
.ab .lead,.ab p,.ab li{color:var(--text)}.ab .text-muted{color:var(--muted)!important}
.ab .card{background:linear-gradient(160deg,rgba(14,32,72,.75),rgba(6,14,32,.9));border:1px solid var(--line);color:var(--text);border-radius:14px;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s}
.ab .card:hover{transform:translateY(-4px);border-color:var(--sky);box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 26px rgba(30,107,255,.4)}
.ab .card-title,.ab .card:hover .card-title{color:#fff;text-decoration:none}.ab .card-text,.ab .card:hover .card-text{color:var(--muted)}
.ab .card-footer{background:transparent;border-top:1px solid var(--line)}
.ab .btn-primary,.ab .btn-info{background:var(--blue);border-color:var(--blue);color:#fff}
.ab .btn-primary:hover,.ab .btn-info:hover{background:var(--orange);border-color:var(--orange);color:#1a0d00}
.ab .btn-light{background:#fff;color:#0a1a3a;border:0}.ab .btn-light:hover{background:var(--orange)}
.ab .form-control{background:rgba(10,26,58,.75);border:1px solid var(--line);color:var(--text)}.ab .form-control:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,122,26,.18);background:rgba(10,26,58,.9);color:#fff}
.ab .form-label{color:var(--muted)}
.ab a{color:var(--sky)}.ab .card a,.ab a.btn{text-decoration:none}
.ab .hover-effect:hover{transform:translateY(-4px)!important}
/* layout helpers */
.wrap{max-width:1240px;margin:0 auto;padding:28px 16px 40px}
.title{text-align:center;position:relative;padding:14px 0 22px}
.title::before{content:"";position:absolute;left:50%;top:50%;width:min(520px,90%);height:120px;transform:translate(-50%,-50%);background:linear-gradient(90deg,rgba(30,107,255,.35),rgba(255,122,26,.3));filter:blur(60px);z-index:-1}
.title h1{font-size:clamp(1.9rem,5.5vw,3.2rem);letter-spacing:.05em;font-weight:700;margin:0}.title p{color:var(--muted);margin:6px 0 0}
.status{display:inline-block;margin-top:10px;font-size:.8rem;color:var(--orange);border:1px solid rgba(255,122,26,.4);border-radius:20px;padding:3px 12px}
.soon{min-height:60vh;display:grid;place-items:center;text-align:center;padding:40px 16px}
.soon .box{max-width:560px}.soon h1{font-size:clamp(1.8rem,5vw,2.8rem);margin:10px 0}.soon p{color:var(--muted)}
.soon .row2{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
/* catalogue */
.tools{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.search{flex:1 1 300px;position:relative}.search::before{content:"⌕";position:absolute;left:14px;top:50%;transform:translateY(-52%);color:var(--sky);font-size:1.3rem}
.search input,.sort select{width:100%;height:46px;background:rgba(10,26,58,.75);border:1px solid var(--line);border-radius:12px;color:var(--text);font:inherit;padding:0 14px 0 42px;transition:.25s}
.sort select{padding:0 12px;width:auto;min-width:190px;cursor:pointer}
.search input:focus,.sort select:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,122,26,.18)}
.cats{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none}.cats::-webkit-scrollbar{display:none}
.chip{flex:none;font:600 .78rem inherit;letter-spacing:.05em;color:var(--muted);background:rgba(10,26,58,.6);border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;transition:.3s}
.chip:hover{color:var(--text)}.chip.on{background:var(--blue);color:#fff;border-color:var(--orange);box-shadow:0 0 14px rgba(255,122,26,.45)}
.count{color:var(--muted);font-size:.85rem;margin:2px 0 14px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:680px){.grid{grid-template-columns:repeat(2,1fr);gap:10px}}
.pc{position:relative;overflow:hidden;display:flex;flex-direction:column;background:linear-gradient(160deg,rgba(14,32,72,.75),rgba(6,14,32,.9));border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 22px rgba(0,0,0,.35);transition:transform .3s,box-shadow .3s,border-color .3s;animation:in .4s both;cursor:pointer}
@keyframes in{from{opacity:0;transform:translateY(8px)}}
.pc::before{content:"";position:absolute;top:0;left:0;height:2px;width:0;background:var(--orange);transition:width .4s;z-index:2}
.pc::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),rgba(74,163,255,.2),transparent)}
.pc:hover{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);border-color:var(--sky);box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 26px rgba(30,107,255,.4)}
.pc:hover::before{width:100%}.pc:hover::after{opacity:1}
.img{position:relative;aspect-ratio:4/3;display:grid;place-items:center;font-size:3.2rem;background:radial-gradient(circle at 50% 40%,rgba(30,107,255,.3),rgba(5,13,31,.2));overflow:hidden}
.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}.pc:hover .img img{transform:scale(1.1)}
.badge{position:absolute;top:8px;left:8px;z-index:1;font:700 .62rem inherit;letter-spacing:.06em;padding:3px 8px;border-radius:6px;background:var(--blue);color:#fff;font-style:normal}
.badge.SALE,.badge.LIMITED{background:var(--orange);color:#1a0d00}
.body{padding:12px;display:flex;flex-direction:column;gap:5px;flex:1}
.cat{font-size:.65rem;color:var(--orange);letter-spacing:.1em}.name{font-size:.95rem;font-weight:600;line-height:1.25;color:#fff;margin:0}.spec{font-size:.75rem;color:var(--muted)}
.price{margin-top:auto;padding-top:6px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.price strong{font-size:1.4rem;color:#fff}.price s{color:var(--muted);font-size:.8rem}.save{font-size:.68rem;font-weight:700;color:var(--orange)}
.stock{font-size:.72rem;font-weight:600;color:var(--green)}.stock.low{color:var(--orange)}.stock.out{color:#ff5d6c}
.btns{display:grid;gap:6px;margin-top:6px}
.btn2{height:40px;border-radius:9px;font:700 .75rem inherit;letter-spacing:.06em;cursor:pointer;text-decoration:none!important;display:flex;align-items:center;justify-content:center;gap:6px;transition:.25s;border:1px solid;padding:0 12px}
.wa{background:#1fa855;border-color:#1fa855;color:#fff!important}.wa:hover{background:#25d366;box-shadow:0 0 16px rgba(37,211,102,.5)}
.add{background:transparent;border-color:var(--blue);color:var(--sky)}.add:hover{background:var(--blue);color:#fff;box-shadow:0 0 16px rgba(30,107,255,.6)}
.btn2.off,.btn2:disabled{pointer-events:none;opacity:.4}
.btn2:focus-visible,.chip:focus-visible,.pc:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.skel{height:340px;border-radius:14px;background:linear-gradient(100deg,rgba(14,32,72,.6) 30%,rgba(30,107,255,.18) 50%,rgba(14,32,72,.6) 70%) 0 0/300% 100%;animation:sh 1.2s linear infinite}@keyframes sh{to{background-position:-300% 0}}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:50px 0}
.more{display:block;margin:28px auto 0;padding:13px 34px;background:transparent;color:var(--text);border:1px solid var(--orange);border-radius:999px;font:700 .85rem inherit;cursor:pointer;transition:.3s}.more:hover{background:var(--orange);color:#1a0d00}
/* footer */
.abf{text-align:center;color:var(--muted);font-size:.8rem;padding:24px 16px calc(24px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);margin-top:30px}.abf b{color:var(--text);letter-spacing:.12em}.abf a{color:var(--orange)}
.flogo{height:96px;width:auto;background:#fff;border-radius:12px;padding:8px 12px;display:block;margin:0 auto 12px}
/* overlay, drawer, modal, fab, toast */
.ov{position:fixed;inset:0;background:rgba(2,6,16,.72);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s;z-index:40}.ov.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(400px,100%);z-index:60;background:var(--navy);border-left:1px solid var(--line);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .35s;padding-top:env(safe-area-inset-top,0px)}.drawer.open{transform:none}
.dh{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--line);font-size:1.1rem}
.x{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;font-size:1rem}.x:hover,.x:focus-visible{border-color:var(--orange);outline:none}
.items{flex:1;overflow-y:auto;padding:8px 16px}.it{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.ti{width:46px;height:46px;flex:none;border-radius:10px;background:rgba(30,107,255,.2);display:grid;place-items:center;font-size:1.4rem;overflow:hidden}.ti img{width:100%;height:100%;object-fit:cover}
.tn{flex:1;min-width:0}.tn b{display:block;font-size:.85rem;font-weight:600}.tn small{color:var(--sky)}
.q{display:flex;align-items:center;gap:8px}.q button{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:rgba(10,26,58,.8);color:var(--text);cursor:pointer;font-size:1rem}.q button:hover{border-color:var(--orange)}
.df{padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);display:grid;gap:8px}.tot{display:flex;justify-content:space-between;align-items:baseline}.tot strong{font-size:1.5rem}
.modal2{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .3s}.modal2.on{opacity:1;pointer-events:auto}
.mp{position:relative;width:min(860px,100%);max-height:92vh;overflow:auto;display:grid;grid-template-columns:1fr 1fr;background:linear-gradient(160deg,#0e2048,#060e20);border:1px solid var(--sky);border-radius:18px;box-shadow:0 0 50px rgba(30,107,255,.4);transform:scale(.94);transition:transform .3s}.modal2.on .mp{transform:none}
.mp .x{position:absolute;top:10px;right:10px;z-index:2;background:rgba(5,13,31,.8)}
.gal .img{aspect-ratio:auto;height:300px;font-size:6rem;border-radius:18px 0 0 0}.gal .img img{object-fit:contain;background:#fff}
.thumbs{display:flex;gap:6px;padding:8px;overflow-x:auto}.thumbs img{width:56px;height:44px;object-fit:cover;border-radius:6px;border:2px solid transparent;cursor:pointer;background:#fff}.thumbs img.on{border-color:var(--orange)}
.mi{padding:22px;display:flex;flex-direction:column;gap:8px}.mi h2{font-size:1.4rem;line-height:1.2;padding-right:30px;margin:0}
.mi ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}.mi li{font-size:.75rem;border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--sky)}.mi .price strong{font-size:2rem}.mi p{color:var(--muted);font-size:.85rem;margin:0}
@media(max-width:680px){.mp{grid-template-columns:1fr}.gal .img{height:220px;border-radius:18px 18px 0 0}}
.fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:25;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff!important;display:grid;place-items:center;font-size:1.6rem;text-decoration:none;box-shadow:0 6px 20px rgba(37,211,102,.5);animation:ring 3s ease-out infinite}
@keyframes ring{0%{box-shadow:0 6px 20px rgba(37,211,102,.5),0 0 0 0 rgba(37,211,102,.5)}70%,100%{box-shadow:0 6px 20px rgba(37,211,102,.5),0 0 0 18px rgba(37,211,102,0)}}
.fb{position:absolute;right:66px;white-space:nowrap;background:var(--deep);border:1px solid var(--orange);color:var(--text);font-size:.8rem;padding:8px 12px;border-radius:10px;opacity:0;transform:translateX(10px);transition:.4s;pointer-events:none}.fb.show{opacity:1;transform:none}
.fly{position:fixed;width:40px;height:40px;z-index:80;font-size:1.6rem;pointer-events:none;display:grid;place-items:center;border-radius:50%;background:rgba(30,107,255,.7)}
#abToast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,30px);opacity:0;background:var(--deep);border:1px solid var(--orange);padding:10px 18px;border-radius:10px;transition:.3s;pointer-events:none;z-index:70;font-size:.85rem;color:var(--text)}#abToast.show{opacity:1;transform:translate(-50%,0)}
body.lock{overflow:hidden}
@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}}
.ab .mainnav a{color:var(--muted)}.ab .mainnav a:hover{color:var(--text)}.ab .mainnav a.on{color:#fff}
.ab .brand,.ab .brand:hover{color:inherit}.ab .icon-btn{color:var(--text)}.ab .abf a{color:var(--orange)}
.ab [id]{scroll-margin-top:110px}