:root{--bg:#0b1220;--card:#111827;--text:#e5e7eb;--muted:#9ca3af;--brand:#22c55e;--line:rgba(255,255,255,.08);}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(180deg,#0b1220,#070b12);color:var(--text)}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 18px}
.header{position:sticky;top:0;background:rgba(17,24,39,.72);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:10}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{font-weight:900;letter-spacing:.04em}
.nav{display:flex;gap:14px;align-items:center}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 8px;border-radius:999px;background:rgba(34,197,94,.18);border:1px solid rgba(34,197,94,.35);font-size:12px}
.hero{padding:66px 0 34px;background:radial-gradient(900px 300px at 20% 0%, rgba(56,189,248,.20), transparent 60%),radial-gradient(900px 300px at 110% 10%, rgba(34,197,94,.16), transparent 60%)}
.hero h1{font-size:42px;line-height:1.08;margin:0 0 10px}
.hero p{color:var(--muted);max-width:70ch}
.btn{background:var(--brand);color:#08101e;font-weight:800;border:none;border-radius:12px;padding:12px 16px;cursor:pointer;display:inline-flex;gap:10px;align-items:center}
.btn.secondary{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.section{padding:44px 0}
.section.alt{background:rgba(255,255,255,.02);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:950px){.grid.cols-4{grid-template-columns:repeat(2,1fr)}.grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid.cols-4,.grid.cols-3{grid-template-columns:1fr} .hero h1{font-size:34px}}
.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid var(--line);border-radius:16px;overflow:hidden}
.card .pad{padding:14px}
.card img{width:100%;height:220px;object-fit:cover;display:block}
.muted{color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tag{font-size:12px;color:var(--muted);border:1px solid var(--line);padding:6px 10px;border-radius:999px}
.product-top{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media(max-width:900px){.product-top{grid-template-columns:1fr}}
.main-img{width:100%;border-radius:16px;border:1px solid var(--line);max-height:520px;object-fit:cover}
.thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.thumb{width:86px;height:86px;border-radius:12px;border:1px solid var(--line);object-fit:cover;cursor:pointer;opacity:.86}
.thumb.active{outline:2px solid rgba(34,197,94,.7);opacity:1}
.select{width:100%;padding:10px;border-radius:12px;border:1px solid var(--line);background:rgba(15,23,42,.8);color:var(--text)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.small{font-size:12px;color:var(--muted)}
.hr{height:1px;background:var(--line);margin:18px 0}
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table td{padding:10px 12px;background:rgba(255,255,255,.03);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.table td:first-child{border-left:1px solid var(--line);border-radius:12px 0 0 12px}
.table td:last-child{border-right:1px solid var(--line);border-radius:0 12px 12px 0}
.footer{padding:26px 0;border-top:1px solid var(--line);color:var(--muted);text-align:center}