@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

:root{
  --bg:#0b0e17;
  --panel:#12182a;
  --line:#1b2440;
  --text:#eaf4ff;
  --muted:#9fb2c9;
  --accent:#19bfff;
  --accent-10:rgba(25,191,255,.10);
  --accent-20:rgba(25,191,255,.20);
  --radius:16px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --trans:.25s ease;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:
    radial-gradient(800px 600px at 10% -10%, rgba(25,191,255,.08), transparent 60%),
    radial-gradient(700px 500px at 100% 0%, rgba(25,191,255,.06), transparent 60%),
    var(--bg);
  color:var(--text);
  min-height:100vh; line-height:1.6;
}

img{max-width:100%;display:block;border-radius:12px}
a{color:var(--accent);text-decoration:none;transition:color var(--trans)}
a:hover{color:#8bdcff}

.container{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}

.site-header{position:sticky;top:0;z-index:20;background:rgba(5,8,16,.55);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:14px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;color:var(--text)}
.brand-logo{width:44px;height:44px;border-radius:50%;object-fit:cover}
.brand-title{font-weight:800;font-size:1.2rem;letter-spacing:.3px}
.hamburger{display:none;margin-left:auto;background:none;border:0;cursor:pointer}
.hamburger span{display:block;width:24px;height:2px;background:var(--text);margin:5px 0;border-radius:2px}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-links a{color:var(--text);padding:8px 10px;border-radius:10px;border:1px solid transparent}
.nav-links a:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}

@media (max-width:860px){
  .hamburger{display:block}
  .nav-links{position:absolute;right:20px;left:20px;top:70px;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;display:none}
  .nav-links.open{display:flex}
}

.btn{display:inline-block;background:#16213c;color:var(--text);border:1px solid var(--line);padding:10px 16px;border-radius:999px;font-weight:700;transition:transform var(--trans),background var(--trans),border-color var(--trans)}
.btn:hover{transform:translateY(-2px);background:#1d2b52;border-color:#25356a}
.btn.ghost{background:transparent}
.btn.small{padding:7px 12px;font-weight:600}

main{padding:28px 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card.center{max-width:640px;margin:40px auto;text-align:center}
.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.products{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.grid.products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid.products,.grid.two{grid-template-columns:1fr}}

h1,h2,h3{margin:0 0 10px;line-height:1.2}
h1{font-size:clamp(1.6rem,2.8vw,2.3rem)}
h2{font-size:clamp(1.3rem,2.2vw,1.6rem)}
.muted{color:var(--muted)}

.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:center;background:linear-gradient(180deg,rgba(25,191,255,.06),transparent)}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.hero-art{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat{background:#0e1526;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.stat-value{font-weight:800;font-size:1.2rem}
.stat-label{color:var(--muted);font-size:.9rem}

.categories{margin:14px 0 18px;display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 12px;border-radius:999px;border:1px solid var(--line);color:var(--text);background:rgba(255,255,255,.02)}
.chip.active{background:var(--accent-10);border-color:var(--accent-20)}
.card.product .card-body{display:flex;flex-direction:column;gap:10px}
.card-body .row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.price{font-weight:800}

.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.product-detail .detail-img{width:100%;height:360px;object-fit:cover}
@media (max-width:900px){.product-detail{grid-template-columns:1fr}.product-detail .detail-img{height:240px}}

table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.07);text-align:left}
thead th{color:var(--muted);font-weight:700}

input,select,textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#0f1426;color:var(--text)}
input[type=number]{max-width:100px}
.error{color:#ff6b6b}

.footer{border-top:1px solid var(--line);background:rgba(5,8,16,.45);margin-top:32px}
.footer .row{display:flex;align-items:center;gap:12px;padding:16px 0}
.footer .spacer{flex:1}

.profile{display:flex;align-items:center;gap:16px}
.profile .avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--line)}
.list{margin:8px 0 0 18px}
.list li{margin:.3rem 0}