:root{
  --bg:#0f172a;
  --card:#111827;
  --muted:#94a3b8;
  --text:#e5e7eb;
  --brand:#22c55e;
  --brand-2:#06b6d4;
  --accent:#f59e0b;
  --danger:#ef4444;
  --shadow: 0 10px 25px rgba(0,0,0,.35);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:radial-gradient(1200px 600px at 10% -20%, rgba(34,197,94,.15), transparent 60%),
             radial-gradient(900px 500px at 90% -10%, rgba(6,182,212,.17), transparent 55%),
             var(--bg);
  color:var(--text);
  font-family:"Poppins", sans-serif;
}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* Header */
header{position:sticky;top:0;z-index:50;background:rgba(15,23,42,.7);backdrop-filter: blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.5px}
.logo{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:var(--shadow);font-weight:800}
.nav-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.search{position:relative}
.search input{width:320px;max-width:62vw;padding:12px 40px 12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:#0b1220;color:var(--text);outline:none}
.search svg{position:absolute;right:10px;top:50%;transform:translateY(-50%);opacity:.7}
.chip{padding:8px 12px;border:1px solid rgba(255,255,255,.12);border-radius:999px;cursor:pointer;transition:.2s}
.chip.active, .chip:hover{background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.4)}
.cart-btn{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:linear-gradient(135deg, rgba(34,197,94,.12), rgba(6,182,212,.12));border:1px solid rgba(255,255,255,.08);cursor:pointer}

/* Hero */
.hero{position:relative;padding:48px 0}
.hero-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
.hero-card{padding:28px;border-radius:var(--radius);background:linear-gradient(180deg, rgba(17,24,39,.9), rgba(17,24,39,.6));box-shadow:var(--shadow)}
.hero h1{margin:0 0 10px;font-size:clamp(26px,4vw,42px)}
.hero p{margin:0 0 16px;color:var(--muted)}
.cta{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#071016;font-weight:700;border:none;cursor:pointer}
.stat{display:flex;gap:16px;margin-top:14px;color:var(--muted)}
.stat b{color:var(--text)}
.hero-img{border-radius:var(--radius);min-height:260px;background:url('image/image.jpg') center/cover;border:1px solid rgba(255,255,255,.05)}

/* Products */
.section{padding:14px 0 60px}
.section h2{font-size:clamp(22px,3vw,30px)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:16px}
@media (max-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.hero-wrap{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}.search input{width:240px}}
@media (max-width:460px){.grid{grid-template-columns:1fr}}

.card{background:linear-gradient(180deg, rgba(17,24,39,.9), rgba(17,24,39,.6));border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card .img{aspect-ratio:4/3;background:#0b1220 url('') center/cover}
.card .body{padding:14px}
.title{font-weight:600;margin:4px 0}
.price{font-size:18px;font-weight:700}
.category{font-size:12px;opacity:.8;color:var(--muted)}
.add{margin-top:auto;display:flex;gap:10px}
.btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#0b1220;color:var(--text);cursor:pointer}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#071016;border:none;font-weight:700}

/* Drawer */
.drawer{position:fixed;right:-420px;top:0;height:100dvh;width:400px;max-width:86vw;background:#0b1220;border-left:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);transition:right .28s ease;display:flex;flex-direction:column;z-index:60}
.drawer.open{right:0}
.drawer header{position:sticky;top:0;background:#0b1220;border-bottom:1px solid rgba(255,255,255,.08)}
.drawer .content{flex:1;overflow:auto;padding:14px}
.cart-item{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;padding:10px;border:1px solid rgba(255,255,255,.06);border-radius:14px;margin-bottom:10px;background:rgba(255,255,255,.02)}
.qty{display:flex;align-items:center;gap:8px}
.qty button{width:28px;height:28px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:#0b1220;color:var(--text);cursor:pointer}
.totals{padding:14px;border-top:1px solid rgba(255,255,255,.08)}
.checkout{width:100%;padding:12px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#fde047);color:#111827;border:none;font-weight:800;cursor:pointer}

/* Toast */
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(80px);opacity:0;background:rgba(17,24,39,.92);border:1px solid rgba(255,255,255,.12);padding:12px 16px;border-radius:999px;box-shadow:var(--shadow);transition:.3s;z-index:70}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* Footer */
footer{border-top:1px solid rgba(255,255,255,.06);padding:28px 0;color:var(--muted)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.foot small{opacity:.8}
.gradient-text{background:linear-gradient(135deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}