:root{
  --bg:#0b0c10;
  --panel:#111218;
  --muted:#9aa3b2;
  --text:#e9eef6;
  --brand:#6ee7ff;
  --brand-2:#8b5cf6;
  --accent:#22d3ee;
  --card:#121624;
  --card-2:#0f1420;
  --border:#20263a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  background: radial-gradient(1200px 600px at 80% -10%, rgba(110,231,255,.12), transparent 60%),
              radial-gradient(900px 500px at 10% 10%, rgba(139,92,246,.12), transparent 55%),
              var(--bg);
  color:var(--text);
  line-height:1.6;
}

/* Layout */
.container{width:min(1120px, 92%); margin-inline:auto}
.section{padding:64px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00))}
.section-head{margin-bottom:24px; text-align:center}
.section-head h2{font-size: clamp(22px, 3vw, 32px); margin:0 0 8px}
.section-head p{color:var(--muted); margin:0}

/* Header */
.site-header{position:sticky; top:0; z-index:50; background:rgba(11,12,16,0.6); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid rgba(255,255,255,0.06)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{width:40px; height:40px; display:grid; place-items:center; background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#081018; font-weight:800; border-radius:12px}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-name{font-weight:800; letter-spacing:.2px}
.brand-tag{font-size:12px; color:var(--muted)}
.nav{display:flex; align-items:center; gap:16px}
.nav a{color:var(--text); text-decoration:none; font-weight:600; font-size:14px; opacity:.9}
.nav .cta{padding:10px 14px; background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#0b0c10; border-radius:10px}

/* Hero */
.hero{padding:72px 0 32px}
.hero-inner{display:grid; grid-template-columns: 1.2fr .8fr; gap:32px; align-items:center}
.hero-copy h1{font-size: clamp(28px, 4.5vw, 52px); line-height:1.1; margin:0 0 14px}
.hero-copy h1 span{background: linear-gradient(135deg, var(--brand), var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-copy p{color:var(--muted); margin:0 0 18px}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin: 18px 0}
.btn-primary, .btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:700;
}
.btn-primary{background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#0b0c10}
.btn-secondary{border:1px solid var(--border); color:var(--text)}
.hero-meta{display:flex; gap:14px; flex-wrap:wrap; color:var(--muted); font-size:14px}
.hero-art{position:relative; height:260px}
.bubble{position:absolute; border-radius:999px; filter:blur(8px); opacity:.8}
.b1{width:180px; height:180px; background:radial-gradient(circle at 30% 30%, var(--brand), transparent 60%); right:10%; top:0}
.b2{width:130px; height:130px; background:radial-gradient(circle at 30% 30%, var(--brand-2), transparent 60%); right:35%; bottom:10%}
.b3{width:220px; height:220px; background:radial-gradient(circle at 30% 30%, var(--accent), transparent 60%); left:5%; top:15%}

/* Cards */
.grid-3{display:grid; gap:18px; grid-template-columns: repeat(3, 1fr)}
.grid-2{display:grid; gap:24px; grid-template-columns: repeat(2, 1fr)}
.card{
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding:18px;
}
.card h3{margin:0 0 6px}
.card p{margin:0; color:var(--muted)}

/* Products */
.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-top:18px}
.product{
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid var(--border);
  border-radius:18px; overflow:hidden; display:flex; flex-direction:column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.product:hover{transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.25)}
.product img{width:100%; height:240px; object-fit:cover; display:block; background:#0f172a}
.product .product-body{padding:16px; display:flex; flex-direction:column; gap:10px}
.product .desc{color:var(--muted); margin:0}
.product .bullets{margin:2px 0 8px 18px; color:var(--muted)}
.product .bullets li{margin:4px 0}
.product .product-footer{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto}
.price{font-size:20px; font-weight:800; letter-spacing:.2px}
.w-full{width:100%}
.featured{position:relative; border-color: rgba(255,255,255,.16)}
.badge{
  position:absolute; top:12px; left:12px; background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#081018; font-weight:800; font-size:12px; padding:6px 10px; border-radius:999px;
}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.06); padding:28px 0; background:rgba(0,0,0,.25)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
.foot-note{color:var(--muted)}

/* Responsive */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr}
  .cards{grid-template-columns: 1fr}
  .grid-3{grid-template-columns: 1fr}
  .grid-2{grid-template-columns: 1fr}
  .hero-art{height:180px}
}