:root{--bg:#0D0D0D;--gold:#D4AF37;--text:#e7e3d5;--goldSoft:#c8ad55}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;overflow-x:hidden}
a{text-decoration:none}
.topbar{position:relative;display:flex;justify-content:space-between;align-items:center;padding:18px 40px;z-index:10}
.brand{width:160px}.nav{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;border-radius:999px;padding:10px 22px;border:1px solid var(--gold);font-weight:600;background:var(--gold);color:#0D0D0D;transition:transform .25s, box-shadow .25s, opacity .25s}
.btn.outline{background:transparent;color:var(--gold)}.btn.small{padding:8px 16px;font-size:.9rem}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(212,175,55,.35)}
.btn.primary.pulse{animation:pulseGold 3s infinite ease-in-out}
@keyframes pulseGold{50%{box-shadow:0 0 22px rgba(212,175,55,.45)}}
.hero{position:relative;min-height:78vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.overlay{position:absolute;inset:0;background:radial-gradient(circle at 50% 35%, rgba(0,0,0,.35), rgba(0,0,0,.85))}
.overlay-gold{position:absolute;inset:0;background:linear-gradient(180deg, rgba(212,175,55,.08), rgba(0,0,0,0) 35%, rgba(0,0,0,.4) 70%);mix-blend-mode:screen;pointer-events:none}
.hero-content{position:relative;z-index:2;max-width:860px;padding:0 16px}
.hero h1{font-size:clamp(34px,5vw,64px);margin:0;color:#fff}
.sub{color:#f0f0f0;margin:10px 0 6px}.price-note{color:var(--goldSoft);margin:8px 0 20px}
.container{width:min(1200px,94%);margin:0 auto}
.trending h2{margin:34px 0 12px;font-size:1.4rem;color:var(--gold)}
.carousel{position:relative}.track{display:flex;gap:12px;overflow:hidden;scroll-behavior:smooth}
.track img{flex:0 0 auto;width:280px;height:160px;object-fit:cover;border-radius:10px;border:1px solid rgba(212,175,55,.28);transition:transform .25s, box-shadow .25s, opacity .25s}
.track img:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.45)}
.arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:50%;width:36px;height:36px;cursor:pointer}
.arrow.left{left:-6px}.arrow.right{right:-6px}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:60px auto}
.features .card{background:rgba(0,0,0,.5);border:1px solid rgba(212,175,55,.3);border-radius:18px;padding:24px;text-align:center;transition:transform .25s, border-color .25s, box-shadow .25s;opacity:0;transform:translateY(12px)}
.features .card:hover{transform:translateY(-6px);border-color:rgba(212,175,55,.6);box-shadow:0 10px 26px rgba(212,175,55,.12)}
.icon{font-size:28px;margin-bottom:8px}.features h3{margin:6px 0;color:var(--gold)}.features p{margin:0;color:#d8d3c2}
footer{text-align:center;padding:22px 10px;color:#cfcab4;border-top:1px solid rgba(212,175,55,.15)}
.reveal{opacity:0;transform:translateY(12px);transition:opacity .8s ease, transform .8s ease}
.reveal.show{opacity:1;transform:translateY(0)}.stagger .reveal{transition-delay:var(--d,0s)}
@media(max-width:900px){.features{grid-template-columns:repeat(2,1fr)}.brand{width:130px}.btn.small{padding:6px 10px}.topbar{padding:12px 18px}.track img{width:240px;height:140px}}
@media(max-width:560px){.features{grid-template-columns:1fr}.arrow{display:none}}

/* checkout styles omitted for brevity in this preview */