:root{
  --bg:#0b0b10;
  --text:#e9e9ef;
  --muted:#a7a7b4;
  --card:#141421;
  --accent:#7c4dff;
  --accent-2:#00e5ff;
  --accent-3:#ff7ab6;
  --good:#10ac84;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Poppins", sans-serif;
  background: radial-gradient(1200px 800px at 10% -20%, #1f1147 0%, #0b0b10 60%) no-repeat fixed;
  color:var(--text);
}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
/* NAV */
nav.nav{
  position:sticky;top:0;z-index:1000;
  background:rgba(10,10,18,.6);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06)
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;gap:10px;align-items:center}
.brand img{width:36px;height:36px;border-radius:10px;box-shadow:0 0 0 2px #fff3 inset}
.brand h1{font-size:18px;margin:0;font-weight:900;letter-spacing:.5px}
.links{display:flex;gap:14px;align-items:center}
.links a{padding:8px 10px;border-radius:12px;color:var(--muted)}
.links a:hover{color:#fff;background:rgba(255,255,255,.06)}
.cart-pill{font-size:12px;background:var(--accent-2);color:#001;padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:top}

/* HERO */
header.hero{position:relative;overflow:hidden;padding:64px 0 24px}
.hero h2{font-size:42px;margin:8px 0 4px}
.hero p{color:var(--muted);margin:0 0 12px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-2)}
.btn-ghost{border-color:rgba(255,255,255,.2);color:#fff;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.06)}

/* Splatter decorations */
.splatter{position:absolute;pointer-events:none;opacity:.25;z-index:-1}
.splatter.top-left{top:-30px;left:-30px;width:220px;transform:rotate(-10deg)}
.splatter.bottom-right{right:-40px;bottom:-40px;width:280px;transform:rotate(15deg)}
.splatter.mid{right:8%;top:48%;width:160px;transform:rotate(-4deg)}

/* GRID */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:20px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.card img{width:100%;height:260px;object-fit:cover;display:block}
.card .pad{padding:16px}
.badge{display:inline-block;font-size:12px;background:rgba(255,255,255,.08);padding:4px 8px;border-radius:999px;margin-right:8px}
.price{font-weight:700}
.card .actions{display:flex;gap:8px;margin-top:10px}
.small{font-size:12px;color:var(--muted)}

/* PDP */
.pdp{display:grid;grid-template-columns:1fr;gap:24px;margin:24px 0}
.pdp .gallery img{width:100%;border-radius:16px}
.pdp .info h1{margin:.2rem 0}
.pdp .info .cta{display:flex;gap:10px;margin:12px 0}
@media(min-width:900px){ .pdp{grid-template-columns:1.2fr 1fr} }

/* CHECKOUT */
.checkout{max-width:900px;margin:24px auto}
.table{width:100%;border-collapse:collapse;margin-top:8px}
.table th,.table td{padding:10px;border-bottom:1px solid rgba(255,255,255,.1);text-align:left}
.table th{color:#cfd0dc;font-weight:600}
.input, select{width:100%;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#171725;color:#fff}
.row{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:700px){ .row{grid-template-columns:1fr 1fr} }
.summary{background:var(--card);padding:16px;border-radius:16px;margin-top:10px}
footer{padding:30px 0;color:var(--muted)}