:root{--bg:#0b1020;--txt:#e8edf6;--muted:#9aa6bd;--white:#fff;--accent:#22c55e;--violet:#8b5cf6;--sunset:#f97316;--line:#1e2742;--panel:#0d1530}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--txt)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.top{position:sticky;top:0;z-index:40;background:rgba(5,10,25,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;font-weight:900;letter-spacing:.4px}
.logo{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:8px;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--violet));font-size:14px;color:var(--white)}
.links{display:flex;gap:16px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--white);padding:12px 16px;border-radius:14px;border:0;font-weight:700;cursor:pointer;transition:.2s}
.btn:hover{transform:translateY(-1px)}
.btn.alt{background:transparent;border:1px solid var(--line);color:#e2e8f0}
.btn.ghost{background:#0d1530;border:1px solid var(--line)}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;background:rgba(139,92,246,.12);color:#d7c6ff;border:1px solid rgba(139,92,246,.35)}
.hero{padding:56px 0;background:radial-gradient(1200px 400px at 20% -10%, rgba(139,92,246,.22), transparent),radial-gradient(900px 300px at 90% 0%, rgba(34,197,94,.28), transparent)}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.lead{color:#cbd5e1}
.note .band{padding:16px;border-radius:14px;border:1px dashed #334155}
.band.violet{background:rgba(139,92,246,.10)}
.band.mint{background:rgba(34,197,94,.10)}
.mt-12{margin-top:12px}
.section{padding:48px 0;border-top:1px solid #0c1326}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.card{background:linear-gradient(180deg,#0d1530,#0d1530 60%, #0f1a3a);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.card-head{padding:18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.tone-mint{background:linear-gradient(135deg,rgba(34,197,94,.18),rgba(34,197,94,.10))}
.tone-violet{background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(139,92,246,.10))}
.tone-sunset{background:linear-gradient(135deg,rgba(249,115,22,.18),rgba(249,115,22,.10))}
.card-body{padding:18px;display:grid;gap:12px}
.price{font-size:20px;font-weight:800;color:#f8fafc}
.small{font-size:12px;color:#94a3b8}
.pill{display:inline-flex;gap:8px;align-items:center;border:1px dashed #334155;padding:6px 10px;border-radius:999px;font-size:12px}
.box{background:#0d1530;border:1px solid var(--line);border-radius:16px;padding:18px}
.muted{color:#9aa6bd}
.stack{display:grid;gap:8px}
.row{display:flex;gap:10px;align-items:center}
.row.between{justify-content:space-between}
.row.center{justify-content:center}
.row.gap{gap:14px}
.mt-6{margin-top:6px}
.mt-8{margin-top:8px}
.foot{border-top:1px solid var(--line);padding:22px 0}
.cart-count{position:relative;top:-1px;background:#f59e0b;color:#111827;border-radius:999px;padding:2px 6px;font-size:11px;font-weight:800}
/* Drawer */
.drawer{position:fixed;inset:0;pointer-events:none}
.drawer.open{pointer-events:auto}
.drawer .overlay{position:absolute;inset:0;background:rgba(5,10,25,.6);opacity:0;transition:.2s}
.drawer.open .overlay{opacity:1}
.drawer .panel{position:absolute;right:0;top:0;height:100%;width:380px;max-width:92vw;background:#0d1530;border-left:1px solid var(--line);transform:translateX(100%);transition:.2s;display:flex;flex-direction:column}
.drawer.open .panel{transform:translateX(0)}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.panel-body{padding:16px;overflow:auto;display:grid;gap:12px}
.line{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);padding:10px;border-radius:12px}
.qty{display:inline-flex;align-items:center;gap:8px}
.qty button{width:28px;height:28px;border-radius:8px;border:1px solid #334155;background:#0d1530;color:#e2e8f0;cursor:pointer}
.panel-foot{margin-top:auto;border-top:1px solid var(--line);padding:16px;display:grid;gap:10px}
/* Mobile */
@media (max-width: 980px){.hero-grid{grid-template-columns:1fr}.grid3{grid-template-columns:1fr;gap:16px}.grid2{grid-template-columns:1fr}.links{gap:10px}}