:root{
  --bg-0:#0b0706;           /* deep coal */
  --bg-1:#160b09;
  --lava-1:#3a0f0a;
  --lava-2:#641d0d;
  --lava-3:#8f2a0f;
  --fire-1:#ff4d00;
  --fire-2:#ff8a33;
  --fire-3:#ffd9a3;
  --text:#f6f5f4;
  --muted:#c4b9b3;
  --glass:rgba(255,255,255,.05);
  --glass-strong:rgba(255,255,255,.09);
  --radius:16px;
  --card:#1a1110;
  --card-b:#2b1a17;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  line-height:1.35;
  background:
    radial-gradient(1200px 600px at 70% 20%, rgba(255,77,0,.12), transparent 60%),
    radial-gradient(1000px 500px at 20% 90%, rgba(255,138,51,.10), transparent 60%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 70%, #0a0605 100%);
  overflow-x:hidden;
}

#bg{
  position:fixed; inset:0; width:100vw; height:100vh;
  display:block; z-index:-1; pointer-events:none; background:transparent;
}

.skip{ position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip:focus{left:16px; top:16px; width:auto; height:auto; padding:.5rem .75rem; background:#000; color:#fff; border-radius:8px;}

.site-header{
  position:sticky; top:0; display:flex; align-items:center; justify-content:space-between;
  padding:1rem 2rem; backdrop-filter:saturate(120%) blur(10px);
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.15));
  border-bottom:1px solid rgba(255,255,255,.06); z-index:20;
}
.brand{ font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  background:linear-gradient(90deg, var(--fire-2), var(--fire-3)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav a{ color:var(--text); text-decoration:none; margin-left:1rem; padding:.5rem .75rem; border-radius:999px; }
.nav a:hover{ background:var(--glass); }
.nav .cta{ background:var(--glass-strong); border:1px solid rgba(255,255,255,.08); }

.cart-btn{
  border:1px solid rgba(255,255,255,.12); background:var(--glass-strong); color:var(--text);
  border-radius:999px; padding:.6rem .8rem; font-weight:700; cursor:pointer;
}
.cart-btn span{ background:linear-gradient(90deg, var(--fire-1), var(--fire-2));
  padding:.2rem .45rem; border-radius:999px; color:#0b0706; font-weight:800; }

.hero{ max-width:1100px; margin:8vh auto 10vh; padding:0 2rem; text-align:center; }
.headline{ font-size: clamp(2.4rem, 6vw, 5.2rem); margin:0 0 0.8rem 0; letter-spacing:-.01em; }
.accent{ color:var(--fire-2); text-shadow:0 0 24px rgba(255,138,51,.35); }
.subhead{ color:var(--muted); font-size: clamp(1rem, 2vw, 1.25rem); margin:0 auto 1.5rem; max-width:760px; }
.actions{ display:flex; align-items:center; justify-content:center; gap:1rem; margin:1rem 0 2rem; }
.btn{
  display:inline-block; border-radius:999px; padding:.9rem 1.2rem; text-decoration:none; color:#0b0706;
  background:linear-gradient(90deg, var(--fire-1), var(--fire-2)); font-weight:700; border:0;
  box-shadow:0 6px 30px rgba(255,77,0,.25), inset 0 1px 0 rgba(255,255,255,.15); cursor:pointer;
}
.btn:hover{ filter:brightness(1.05); }
.btn.ghost{ background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.16); box-shadow:none; }

.stage{ max-width:1200px; margin:0 auto 2rem; padding:0 2rem; }
.stage-head{ display:flex; align-items:baseline; justify-content:space-between; }
.stage .stage-wrap{ width:100%; height:min(70vh, 640px); border-radius:16px; overflow:hidden; position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); }
#stage3d{ width:100%; height:100%; display:block; }

.grid{ max-width:1100px; margin:0 auto; padding:4rem 2rem; }
.grid h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); margin:0 0 1.5rem 0; }
.cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1rem; padding:0; list-style:none; }
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:.75rem;
  display:grid; gap:.5rem;
}
.card img{ width:100%; height:260px; object-fit:cover; border-radius:12px; }
.card h3{ margin:.2rem 0 .25rem; font-size:1rem; }
.card .price{ color:#f2d2c2; }
.card .card-actions{ display:flex; gap:.5rem; }
.card .small{ font-size:.85rem; }

.about, .contact{ max-width:900px; margin:0 auto; padding:4rem 2rem; }
.contact-form{ display:grid; gap:1rem; max-width:560px; }
.contact-form label{ display:grid; gap:.5rem; }
.contact-form input, .contact-form textarea{
  width:100%; padding:.9rem 1rem; border-radius:12px; border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.04); color:var(--text);
}
.contact-form input::placeholder, .contact-form textarea::placeholder{ color:#b9aaa5; }

.site-footer{ padding:3rem 2rem; color:#b7a9a3; text-align:center;
  border-top:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)); }

/* Modal */
.modal{ width:min(900px, 96vw); border:none; border-radius:16px; background:rgba(20,14,12,.9); color:var(--text);
  box-shadow:0 30px 100px rgba(0,0,0,.6); }
.modal::backdrop{ background:rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.modal .close{ position:absolute; top:.6rem; right:.6rem; background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:.25rem .5rem; cursor:pointer; }
.modal .modal-content{ display:grid; grid-template-columns: 1.2fr 1fr; gap:1rem; padding:1rem; }
.modal img{ width:100%; height:100%; object-fit:cover; border-radius:12px; background:#000; }
.modal-info h3{ margin:.5rem 0; }
.size-row{ display:flex; gap:.5rem; flex-wrap:wrap; }
.size-pill{ padding:.5rem .75rem; border:1px solid rgba(255,255,255,.15); border-radius:999px; cursor:pointer; }
.size-pill.active{ background:linear-gradient(90deg, var(--fire-1), var(--fire-2)); color:#0b0706; border-color:transparent; }

/* Cart drawer */
.cart-drawer{ position:fixed; right:0; top:0; bottom:0; width:min(360px, 92vw); background:#110a09; color:#fff;
  border-left:1px solid rgba(255,255,255,.08); transform:translateX(100%); transition: transform .28s ease; z-index:30; display:flex; flex-direction:column; }
.cart-drawer.open{ transform:none; }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:1rem; border-bottom:1px solid rgba(255,255,255,.08); }
.cart-items{ list-style:none; padding:1rem; margin:0; display:grid; gap:.75rem; flex:1; overflow:auto; }
.cart-item{ display:grid; grid-template-columns:64px 1fr auto; gap:.5rem; align-items:center; }
.cart-item img{ width:64px; height:64px; object-fit:cover; border-radius:8px; }
.cart-foot{ padding:1rem; border-top:1px solid rgba(255,255,255,.08); }
.total{ display:flex; align-items:center; justify-content:space-between; margin:0 0 .75rem; }

@media (max-width: 800px){
  .modal .modal-content{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  #bg{ display:none; }
  .stage .stage-wrap{ height: 400px; }
}