:root{--bg:#040a22;--card:#0a1540;--blue:#1e6fff;--cyan:#27d3ff;--red:#ff2d3d;--yel:#ffd21f;--tx:#eaf1ff;box-sizing:border-box}
*{box-sizing:border-box}html{scroll-behavior:smooth;color-scheme:dark}
body{margin:0;background:radial-gradient(circle at 20% 0,#0d2a7a 0,transparent 45%),radial-gradient(circle at 90% 30%,#3a0a2a 0,transparent 40%),var(--bg);background-attachment:fixed;color:var(--tx);font-family:"Segoe UI",system-ui,Arial,sans-serif;overflow-x:hidden;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body:before{content:"";position:fixed;inset:0;background-image:linear-gradient(#1e6fff14 1px,transparent 1px),linear-gradient(90deg,#1e6fff14 1px,transparent 1px);background-size:44px 44px;pointer-events:none;mask-image:linear-gradient(#000,transparent 85%);z-index:-1}
header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 5vw;position:sticky;top:0;z-index:5;background:#040a22e6;backdrop-filter:blur(10px);border-bottom:1px solid #1e6fff44}
header img{height:50px;width:auto;border-radius:50%;filter:drop-shadow(0 0 10px var(--blue))}
nav{display:flex;gap:6px}nav a{color:var(--tx);text-decoration:none;font-weight:700;padding:8px 12px;border-radius:8px;transition:.2s}nav a:hover{background:#1e6fff44;box-shadow:0 0 14px var(--blue)}
.btn{position:relative;overflow:hidden;border:0;cursor:pointer;color:#fff;font-weight:800;letter-spacing:.3px;padding:12px 18px;border-radius:12px;background:linear-gradient(135deg,#25d366,#0fa64a);box-shadow:0 0 18px #25d36688;text-decoration:none;display:inline-block;text-align:center;transition:transform .15s,box-shadow .2s}
.btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 0 30px #25d366}.btn:active{transform:scale(.95)}
.rip{position:absolute;border-radius:50%;background:#fff8;transform:scale(0);animation:r .6s linear;pointer-events:none}@keyframes r{to{transform:scale(4);opacity:0}}
main{max-width:1100px;margin:auto;padding:0 5vw 40px}
.hero{text-align:center;padding:36px 0 20px}
h1{font-size:clamp(1.6rem,6vw,3rem);margin:0 0 10px;line-height:1.1}
.hero h1{text-transform:uppercase;font-style:italic;background:linear-gradient(90deg,#fff,var(--cyan),var(--yel));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px #1e6fff99)}
.hero p{color:#b9c8f5;max-width:560px;margin:0 auto}
h2{font-size:1.5rem;margin:30px 0 14px;border-left:5px solid var(--red);padding-left:12px}
.car{position:relative;max-width:560px;margin:10px auto 26px;border-radius:18px;overflow:hidden;border:2px solid var(--blue);box-shadow:0 0 36px #1e6fff88;aspect-ratio:1/1}
.car .sl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}.car .sl.on{opacity:1}
.sb{position:relative;max-width:560px;margin:0 auto 10px}.sb input{width:100%;padding:13px 16px;border-radius:12px;border:1px solid var(--blue);background:#0a1540;color:var(--tx);font-size:1rem}
#res{position:absolute;left:0;right:0;top:100%;z-index:4;background:#0a1540;border:1px solid var(--cyan);border-radius:12px;max-height:60vh;overflow:auto;display:none}
#res a{display:flex;gap:10px;align-items:center;padding:8px 12px;color:var(--tx);text-decoration:none;border-bottom:1px solid #1e6fff33}#res a:hover{background:#1e6fff33}#res img{width:44px;height:44px;object-fit:cover;border-radius:6px}#res b{color:var(--yel);margin-left:auto;white-space:nowrap}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.cat{display:block;text-decoration:none;color:var(--tx);text-align:center;padding:20px 8px;border-radius:16px;background:linear-gradient(160deg,var(--card),#070f30);border:1px solid #1e6fff66;transition:.25s;font-weight:700}
.cat:hover{transform:translateY(-6px) scale(1.03);border-color:var(--yel);box-shadow:0 0 28px #ffd21f66}.cat b{display:block;font-size:2.2rem}.cat small{display:block;color:#9db0e8;font-weight:400}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.card{background:linear-gradient(160deg,var(--card),#070f30);border:1px solid #1e6fff66;border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:6px;transition:transform .2s,box-shadow .3s,border-color .3s}
.card:hover{border-color:var(--cyan);box-shadow:0 0 28px #27d3ff66;transform:translateY(-5px)}
.card .btn{margin-top:auto}.card h3{margin:4px 0;font-size:.92rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
a.lk{color:inherit;text-decoration:none}
.ph{position:relative;aspect-ratio:1/1;border-radius:10px;background:#fff;display:grid;place-items:center;overflow:hidden}.ph img{width:100%;height:100%;object-fit:contain}
.noimg{font-size:56px;background:linear-gradient(135deg,#123a9e,#050d33);width:100%;height:100%;display:grid;place-items:center}.noimg.big{font-size:120px}
.tg{position:absolute;top:8px;left:8px;background:var(--yel);color:#111;font-weight:800;font-size:.72rem;padding:3px 9px;border-radius:6px;transform:skew(-8deg)}.tg.liq{background:var(--red);color:#fff}
.st{font-size:.78rem;font-weight:800;color:#3dff8c}.st.no{color:var(--red)}
.price{font-size:1.5rem;font-weight:900;color:var(--yel);text-shadow:0 0 14px #ffd21f66}.old{color:#9db0e8;text-decoration:line-through}
.sv{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}.sv span{background:#0a1540;border:1px solid var(--blue);padding:10px 16px;border-radius:30px}
.crumb{margin:20px 0 6px;color:#9db0e8;font-size:.9rem}.crumb a{color:var(--cyan)}
.det{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;margin-top:10px}.det .ph{max-width:460px}
.fl{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.fl span{background:#0a1540;border:1px solid var(--cyan);border-radius:20px;padding:4px 12px;font-size:.85rem}
table{width:100%;border-collapse:collapse}td{padding:8px;border-bottom:1px solid #1e6fff44}td:first-child{color:var(--cyan);width:40%}
footer{text-align:center;color:#8aa0dd;padding:30px 5vw 80px;font-size:.85rem;border-top:1px solid #1e6fff33}footer a{color:var(--cyan)}
.fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:9;width:58px;height:58px;border-radius:50%;padding:0;display:grid;place-items:center;font-size:28px;animation:pu 2s infinite}
@keyframes pu{0%{box-shadow:0 0 0 0 #25d366aa}100%{box-shadow:0 0 0 22px #25d36600}}
@media(max-width:620px){.hb{display:none}nav a{padding:8px 8px;font-size:.9rem}.grid{grid-template-columns:repeat(2,1fr);gap:10px}.card{padding:10px}}