:root{--bg:#0b0b0f;--panel:#14141b;--panel2:#1b1b24;--red:#c8101e;--redhi:#ff2a3a;--gold:#ffcc22;--bone:#f4efe2;--mute:#9a96a8;--line:#2a2a36}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(1200px 600px at 70% -10%,#2a0509 0,transparent 60%),var(--bg);color:var(--bone);font:17px/1.65 "Segoe UI",system-ui,sans-serif}
a{color:var(--gold);text-decoration:none}a:hover{color:#fff}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;z-index:10;background:#0b0b0fee;backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:62px}
.logo{font:700 22px "Metal Mania","Segoe UI",serif;letter-spacing:.04em;color:var(--bone)}
.logo b{color:var(--redhi)}
nav a{margin-left:20px;color:var(--bone);font-size:15px;opacity:.85}nav a.on,nav a:hover{color:var(--gold);opacity:1}
.hero{padding:84px 0 56px;text-align:center}
.hero h1{font:400 clamp(44px,8vw,92px)/1 "Metal Mania","Segoe UI",serif;margin:0 0 14px;background:linear-gradient(90deg,#3a3a42,var(--redhi));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{max-width:680px;margin:0 auto 28px;color:var(--mute);font-size:19px}
.btn{display:inline-block;padding:13px 26px;border-radius:6px;background:var(--red);color:#fff;font-weight:700;border:1px solid var(--redhi);margin:6px}
.btn:hover{background:var(--redhi);color:#fff}.btn.ghost{background:transparent;border-color:var(--gold);color:var(--gold)}
h2{font:400 34px "Metal Mania","Segoe UI",serif;margin:0 0 10px;color:var(--bone)}h3{margin:0 0 6px;color:var(--gold);font-size:18px}
section{padding:46px 0;border-top:1px solid var(--line)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(235px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:18px}
.card .n{font:700 12px monospace;color:var(--redhi);letter-spacing:.12em}
.card p{margin:6px 0 0;color:var(--mute);font-size:15px}
.shot{aspect-ratio:16/9;background:repeating-linear-gradient(45deg,#14141b,#14141b 14px,#191922 14px,#191922 28px);border:1px dashed var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--mute);text-align:center;padding:14px}
audio{width:100%;margin-top:8px}
.price{display:flex;gap:14px;flex-wrap:wrap}.price .card{flex:1;min-width:210px;text-align:center}
.price .big{font-size:30px;color:var(--gold);font-weight:700}
table{width:100%;border-collapse:collapse}td,th{padding:10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{color:var(--gold)}
code,kbd{background:var(--panel2);padding:2px 6px;border-radius:4px;font-size:.92em}
details{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px 18px;margin:10px 0}summary{cursor:pointer;font-weight:700}
footer{border-top:1px solid var(--line);padding:30px 0;color:var(--mute);font-size:14px;text-align:center}
.note{background:#2a0509;border:1px solid var(--red);border-radius:8px;padding:14px 18px;color:var(--bone)}
@media(max-width:700px){.nav{flex-direction:column;height:auto;padding:8px 0}nav{display:flex;flex-wrap:wrap;justify-content:center}nav a{margin:2px 8px;font-size:14px}header{position:static}.hero{padding:48px 0 32px}}


/* ===== v2 look: chrome, brushed red steel, ember glow ===== */
:root{--chrome:linear-gradient(180deg,#ffffff 0%,#c9d4e4 38%,#56637a 50%,#e9f0fa 52%,#9aa8bd 100%);--steelred:linear-gradient(180deg,#e02a38 0%,#9c1220 55%,#5a0912 100%)}
body{background:
 radial-gradient(900px 520px at 50% -8%,#4a0810 0,transparent 62%),
 radial-gradient(700px 400px at 100% 30%,#1c0306 0,transparent 60%),
 repeating-linear-gradient(135deg,#0c0c11 0,#0c0c11 3px,#0f0f15 3px,#0f0f15 6px),#0a0a0e;
 font-family:"Rajdhani","Segoe UI",system-ui,sans-serif;font-size:19px;letter-spacing:.01em}
header{background:linear-gradient(180deg,#14141bf2,#0b0b0ff2);border-bottom:1px solid #3a3a48;box-shadow:0 6px 24px #000a}
.logo{display:flex;align-items:center;gap:12px;font:400 26px "Metal Mania","Segoe UI",serif;letter-spacing:.06em;text-transform:uppercase}
.logo img{height:40px;width:auto;filter:drop-shadow(0 0 8px #ff2a3a66)}
.logo span{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 #000)}
.logo b{background:var(--steelred);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:400}
nav a{font:600 16px "Rajdhani","Segoe UI",sans-serif;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
nav a.on,nav a:hover{color:#fff;opacity:1;text-shadow:0 0 12px #ff2a3a}
.hero{position:relative;padding:70px 0 70px;overflow:hidden}
.hero::before{content:"";position:absolute;left:50%;top:44%;width:760px;height:760px;transform:translate(-50%,-50%);background:radial-gradient(circle,#ff2a3a55 0,#c8101e22 38%,transparent 66%);pointer-events:none}
.hero .mark{position:relative;width:min(300px,62vw);height:auto;margin:0 auto 6px;display:block;filter:drop-shadow(0 18px 30px #000c) drop-shadow(0 0 28px #ff2a3a55)}
.hero h1{position:relative;font:400 clamp(46px,9vw,104px)/1 "Metal Mania","Segoe UI",serif;margin:6px 0 10px;letter-spacing:.04em;text-transform:uppercase;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #000) drop-shadow(0 0 22px #ffffff22)}
.hero p{position:relative;color:#b9b4c6;font-size:21px}
.tagline{position:relative;font:600 15px "Rajdhani",sans-serif;letter-spacing:.38em;text-transform:uppercase;color:#ff4a58;margin:0 0 18px}
.facts{position:relative;display:flex;gap:10px 30px;justify-content:center;flex-wrap:wrap;margin:34px 0 0;color:#cfd6e4;font:600 15px "Rajdhani",sans-serif;letter-spacing:.2em;text-transform:uppercase}
.facts span::before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;background:var(--steelred);transform:rotate(45deg);box-shadow:0 0 8px #ff2a3a}
.btn{position:relative;font:700 17px "Rajdhani",sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:14px 30px;border-radius:4px;border:1px solid #ff5a68;background:var(--steelred);box-shadow:inset 0 1px 0 #ffffff55,0 6px 18px #c8101e66;text-shadow:0 1px 0 #0008}
.btn:hover{background:linear-gradient(180deg,#ff4452,#b01624 60%,#6a0a14);box-shadow:inset 0 1px 0 #fff8,0 8px 26px #ff2a3a88}
.btn.ghost{background:linear-gradient(180deg,#1b1f28,#0d1016);border-color:#9aa8bd;color:#e9f0fa;box-shadow:inset 0 1px 0 #ffffff33,0 6px 18px #0009}
.btn.ghost:hover{border-color:#fff;color:#fff;box-shadow:inset 0 1px 0 #fff6,0 8px 24px #9aa8bd44}
h2{font:400 40px "Metal Mania","Segoe UI",serif;letter-spacing:.05em;text-transform:uppercase;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0 0 6px;filter:drop-shadow(0 2px 0 #000)}
h2::after{content:"";display:block;width:84px;height:3px;margin:8px 0 14px;background:linear-gradient(90deg,#ff2a3a,transparent);box-shadow:0 0 10px #ff2a3a}
h3{font:700 20px "Rajdhani",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#e9f0fa}
section{border-top:1px solid #2a2a38;padding:54px 0;background:linear-gradient(180deg,#ffffff04,transparent 40%)}
.card{background:linear-gradient(180deg,#1c1d27,#101117);border:1px solid #34364a;border-radius:6px;padding:20px;box-shadow:inset 0 1px 0 #ffffff12,0 8px 22px #0008;transition:transform .15s,border-color .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);border-color:#c8101e;box-shadow:inset 0 1px 0 #ffffff1c,0 12px 30px #c8101e44}
.card .n{font:700 13px "Rajdhani",monospace;color:#ff4a58;letter-spacing:.3em}
.card p{color:#a9a5b8;font-size:17px}
.shot{border-radius:6px;border:1px dashed #44465a;background:repeating-linear-gradient(135deg,#12131a,#12131a 12px,#171822 12px,#171822 24px)}
.price .big{font:400 36px "Metal Mania",serif;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
th{font:700 15px "Rajdhani",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#ff4a58}
footer{background:linear-gradient(180deg,transparent,#000a);border-top:1px solid #34364a}
@media(max-width:700px){.hero::before{width:480px;height:480px}.logo{font-size:21px}.logo img{height:32px}}