:root{
  --gold:#d4af37;
  --bg:#0b0b0e;
  --text:#f3f3f3;
  --muted:#c9c9c9;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
}
header{
  position:sticky; top:0; z-index:10;
  background:rgba(11,11,14,.7);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{max-width:1100px; margin:auto; display:flex; gap:18px; align-items:center; padding:14px 20px}
.brand{font-weight:800; letter-spacing:.08em; color:var(--gold);}
.nav a{color:var(--text); text-decoration:none; opacity:.85}
.nav a:hover{opacity:1}
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(70% 80% at 50% 10%, rgba(212,175,55,.12), transparent 60%),
    url('assets/img/lightning-watermark.png'), /* optional slot */
    linear-gradient(180deg, #0b0b0e 0%, #0b0b0e 100%);
  padding:56px 20px 24px;
 min-height:520px;}
.container{max-width:1100px; margin:auto}
.h-title{
  font-size: clamp(32px, 5vw, 54px);
  line-height:1.05;
  margin:6px 0 10px;
  font-weight:800;
  letter-spacing:.02em;
}
.h-sub{color:var(--muted); font-size:clamp(16px,2.2vw,20px); max-width:900px}
.hero-wrap{display:grid; grid-template-columns: 1.15fr .85fr; gap:30px; align-items:center; margin-top:24px}
.hero img{width:100%; height:auto; border-radius:14px; box-shadow: 0 12px 60px rgba(0,0,0,.6);}
.cta{display:flex; gap:12px; margin-top:18px}
.btn{
  background:var(--gold);
  color:#111;
  border:none; padding:12px 18px; font-weight:700; border-radius:10px; cursor:pointer;
}
.btn.secondary{background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.18)}
.section{padding:56px 20px; border-top:1px solid rgba(255,255,255,.08)}
.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.card{background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); padding:18px; border-radius:14px}
footer{padding:32px 20px; color:var(--muted); text-align:center; border-top:1px solid rgba(255,255,255,.08)}
@media (max-width:900px){
  .hero-wrap{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
}


/* Watermark overlay */
#wm-layer{position:absolute;inset:0;background-size:cover;background-position:center top;background-repeat:no-repeat;pointer-events:none;z-index:0;opacity:.5;transition:opacity .6s ease;}


/* Ensure content sits above watermark */
.hero .container{ position: relative; z-index: 1; }


/* Watermark visibility tweaks */
#wm-layer{position:absolute;inset:0;background-size:cover;background-position:center top;background-repeat:no-repeat;pointer-events:none;z-index:0;opacity:.5;transition:opacity .6s ease;}


/* Cart badge */
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 6px;
  background:#d4af37; color:#111; border-radius:999px; font-weight:800; font-size:12px;
  margin-left:6px;
}
.table{width:100%; border-collapse: collapse; margin-top:12px}
.table th, .table td{border-bottom:1px solid rgba(255,255,255,.12); padding:10px; text-align:left}
.table th{opacity:.8; font-weight:700}
.right{text-align:right}
.inline{display:inline-flex; gap:8px; align-items:center}
.input-qty{width:60px; padding:8px; border-radius:8px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04); color:var(--text)}
.payrow{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:16px}
.note{color:var(--muted); font-size:14px; opacity:.9}
    

/* Slim hero for inner pages with lightning watermark */
.hero--slim{
  position:relative;
  overflow:hidden;
  padding:34px 20px 28px;
  min-height:320px;
  background:
    radial-gradient(60% 70% at 50% 12%, rgba(212,175,55,.10), transparent 60%),
    linear-gradient(180deg, #0b0b0e 0%, #0b0b0e 100%);
}
.hero--slim .h-title{ font-size: clamp(26px, 4vw, 40px); margin: 8px 0; font-weight: 800; }
.hero--slim .h-sub{ color: var(--muted); max-width: 800px; }
.hero--slim .container{ position: relative; z-index: 1; }

/* --- Lightning & Thunder Enhancements --- */
.hero, .hero--slim { position: relative; }

#wm-layer{
  position:absolute; inset:0;
  background-size:cover; background-position:center top; background-repeat:no-repeat;
  pointer-events:none; z-index:0; opacity:.55; transition:opacity .4s ease;
  filter: contrast(1.2) brightness(1.1) saturate(1.05);
}

/* Flash layer draws quick white/blue pulses to guarantee visible lightning */
#flash-layer{
  position:absolute; inset:0; z-index:0;
  pointer-events:none; opacity:0;
  background: radial-gradient(60% 60% at 55% 15%, rgba(255,255,255,.85), rgba(180,200,255,.35) 35%, transparent 60%);
  mix-blend-mode: screen;
}
@keyframes lightningFlash {
  0% { opacity: 0; }
  5% { opacity: .9; }
  12% { opacity: .15; }
  18% { opacity: .7; }
  30% { opacity: 0; }
  100% { opacity: 0; }
}
.flash-active { animation: lightningFlash 1200ms ease-out 1; }

/* Sound toggle */
.sound-toggle {
  position:absolute; right:16px; top:16px; z-index:2;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  color: var(--text);
  padding: 8px 12px; border-radius: 10px; cursor:pointer; font-weight:700;
}
.sound-toggle:hover{ background: rgba(255,255,255,.14); }