:root{
  --bg:#0a0b0d;
  --bg-alt:#141518;
  --card:#17181c;
  --border:#2a2d33;
  --text:#f3f4f6;
  --muted:#9aa0ab;
  --accent:#ff3b5c;
  --accent-dim:#ff3b5c22;
  --gold:#2dd4ff;
  --radius:16px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Segoe UI',Roboto,-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

/* NAV */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,11,13,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
nav.wrap{display:flex;align-items:center;justify-content:space-between;height:72px;flex-wrap:wrap;gap:8px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.2rem;letter-spacing:.3px;}
.brand .logo{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(160deg,var(--gold),var(--accent));
  display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:900;color:#050506;
  flex-shrink:0;
}
.brand .brandname{display:flex;flex-direction:column;line-height:1.1;}
.brand .brandname small{font-weight:600;font-size:.62rem;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;}
.navlinks{display:flex;gap:6px;align-items:center;}
.navlinks button{
  background:none;border:none;color:var(--muted);font-size:.92rem;
  padding:10px 14px;border-radius:8px;cursor:pointer;font-weight:600;
  transition:.15s;
}
.navlinks button:hover,.navlinks button.active{color:var(--text);background:var(--card);}
.cart-btn{
  position:relative;background:linear-gradient(135deg,var(--accent),#c2264a);color:#fff;border:none;
  padding:11px 20px;border-radius:999px;font-weight:700;cursor:pointer;font-size:.9rem;
  display:flex;align-items:center;gap:8px;
}
.cart-btn:hover{filter:brightness(1.1);}
.cart-count{
  background:#0a0b0d;color:#fff;border-radius:999px;font-size:.7rem;
  min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 5px;
}

section{display:none;padding:60px 0 90px;}
section.active{display:block;}

/* HERO */
.hero{
  background:
    radial-gradient(1200px 550px at 85% -10%, #ff3b5c26, transparent 60%),
    radial-gradient(900px 450px at 5% 0%, #2dd4ff22, transparent 60%);
  padding:80px 0 60px;
}
.hero .wrap{display:flex;align-items:center;gap:56px;flex-wrap:wrap;}
.hero-text{flex:1;min-width:300px;}
.hero .kicker{
  display:inline-block;color:var(--gold);font-weight:700;font-size:.78rem;letter-spacing:2.5px;
  text-transform:uppercase;margin-bottom:16px;
}
.hero h1{font-size:2.9rem;line-height:1.12;margin:0 0 18px;font-weight:800;}
.hero h1 span{
  background:linear-gradient(120deg,var(--gold),var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{color:var(--muted);font-size:1.08rem;max-width:480px;margin-bottom:30px;}
.btnrow{display:flex;gap:14px;flex-wrap:wrap;}
.btn{
  padding:14px 28px;border-radius:10px;font-weight:700;cursor:pointer;border:none;font-size:.95rem;
}
.btn-primary{background:linear-gradient(135deg,var(--accent),#c2264a);color:#fff;}
.btn-primary:hover{filter:brightness(1.1);}
.btn-outline{background:none;border:1.5px solid var(--border);color:var(--text);}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);}
.hero-visual{flex:1;min-width:260px;display:flex;justify-content:center;align-items:center;}

.eq-box{
  width:240px;height:240px;border-radius:28px;
  background:linear-gradient(160deg,#1a1c21,#0c0d0f);
  border:1px solid var(--border);
  display:flex;align-items:flex-end;justify-content:center;gap:8px;padding:30px;
  box-shadow:0 30px 70px -25px #000c;
}
.eq-box span{
  width:16px;border-radius:6px;
  background:linear-gradient(180deg,var(--gold),var(--accent));
  animation:eq 1.1s ease-in-out infinite;
}
.eq-box span:nth-child(1){height:40%;animation-delay:0s;}
.eq-box span:nth-child(2){height:80%;animation-delay:.15s;}
.eq-box span:nth-child(3){height:55%;animation-delay:.3s;}
.eq-box span:nth-child(4){height:95%;animation-delay:.1s;}
.eq-box span:nth-child(5){height:65%;animation-delay:.25s;}
.eq-box span:nth-child(6){height:35%;animation-delay:.4s;}
@keyframes eq{
  0%,100%{transform:scaleY(0.5);}
  50%{transform:scaleY(1);}
}

h2.section-title{font-size:2rem;margin-bottom:6px;font-weight:800;}
.section-sub{color:var(--muted);margin-bottom:36px;max-width:640px;}
.center{text-align:center;margin-left:auto;margin-right:auto;}

/* BRAND STRIP */
.brand-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;}
.brand-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px;text-align:center;
}
.brand-card .bname{font-size:1.4rem;font-weight:900;letter-spacing:1px;margin-bottom:8px;}
.brand-card .bname.alpine{color:#5ec8ff;}
.brand-card .bname.kicker{color:#ff5a5a;}
.brand-card .bname.jl{color:#ffd447;}
.brand-card p{color:var(--muted);font-size:.88rem;margin:0;}

/* BENEFITS */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;}
.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;display:flex;flex-direction:column;gap:10px;transition:.15s;
}
.card:hover{border-color:#454a54;transform:translateY(-3px);}
.card .icon{font-size:2rem;}
.card h3{margin:2px 0 0;font-size:1.15rem;}
.card p.desc{color:var(--muted);font-size:.9rem;margin:0;flex:1;}

/* SHOP FILTERS */
.filters{display:flex;gap:10px;margin-bottom:28px;flex-wrap:wrap;}
.filter-btn{
  background:var(--card);border:1px solid var(--border);color:var(--muted);
  padding:9px 18px;border-radius:999px;font-weight:700;font-size:.85rem;cursor:pointer;
}
.filter-btn:hover{color:var(--text);}
.filter-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;}

/* PRODUCT GRID */
.card-glyph{
  height:130px;border-radius:10px;background:linear-gradient(160deg,#1e2026,#101114);
  display:flex;align-items:center;justify-content:center;margin-bottom:6px;position:relative;
}
.glyph-icon{width:56px;height:56px;filter:drop-shadow(0 4px 10px #0008);}
.glyph-icon-sm{width:28px;height:28px;}
.brand-badge{
  position:absolute;top:10px;left:10px;font-size:.65rem;font-weight:800;letter-spacing:.5px;
  padding:3px 9px;border-radius:999px;background:#00000070;text-transform:uppercase;
}
.brand-badge.alpine{color:#5ec8ff;}
.brand-badge.kicker{color:#ff5a5a;}
.brand-badge.jl{color:#ffd447;}
.tag{
  display:inline-block;background:var(--accent-dim);color:var(--accent);
  font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:999px;letter-spacing:.4px;
  text-transform:uppercase;width:fit-content;
}
.prod-card h3{margin:2px 0 0;font-size:1.1rem;}
.prod-card .specs{color:var(--gold);font-size:.78rem;font-weight:700;margin:0;}
.prod-card p.desc{color:var(--muted);font-size:.86rem;margin:0;flex:1;}
.price-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.price{font-size:1.25rem;font-weight:800;}
.add-btn{
  background:var(--bg);border:1.5px solid var(--border);color:var(--text);
  padding:9px 16px;border-radius:8px;font-weight:700;cursor:pointer;font-size:.85rem;
}
.add-btn:hover{border-color:var(--accent);color:var(--accent);}

/* CART MODAL */
.overlay{
  position:fixed;inset:0;background:#000a;z-index:100;display:none;align-items:center;justify-content:center;padding:20px;
}
.overlay.active{display:flex;}
.modal{
  background:var(--bg-alt);border:1px solid var(--border);border-radius:16px;
  width:100%;max-width:480px;max-height:85vh;display:flex;flex-direction:column;overflow:hidden;
}
.modal-head{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.modal-head h3{margin:0;}
.modal-close{background:none;border:none;color:var(--muted);font-size:1.4rem;cursor:pointer;}
.modal-body{padding:20px 24px;overflow-y:auto;flex:1;}
.cart-item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);}
.cart-item:last-child{border-bottom:none;}
.ci-glyph{width:52px;height:52px;border-radius:8px;background:#1e2026;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ci-info{flex:1;}
.ci-info h4{margin:0 0 4px;font-size:.95rem;}
.ci-info .sub{color:var(--muted);font-size:.8rem;}
.qty-controls{display:flex;align-items:center;gap:8px;}
.qty-controls button{
  width:26px;height:26px;border-radius:6px;border:1px solid var(--border);background:none;color:var(--text);cursor:pointer;
}
.empty-msg{color:var(--muted);text-align:center;padding:30px 0;}
.modal-foot{padding:20px 24px;border-top:1px solid var(--border);}
.subtotal-row{display:flex;justify-content:space-between;font-weight:700;margin-bottom:14px;font-size:1.05rem;}

footer{border-top:1px solid var(--border);padding:34px 0;color:var(--muted);font-size:.85rem;text-align:center;}
footer .tagline{color:var(--text);font-weight:700;margin-bottom:6px;}