/* Vox Alchemist v3: fiery metallic, reactive */
:root{--ember:#ff7a1a;--hot:#ffb347;--blood:#ff2a3a}
body.fire{overflow-x:hidden}
.fire header{background:linear-gradient(180deg,#0b0b0fee,#0b0b0fcc)}
.hero3{position:relative;min-height:92vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;border-bottom:1px solid #3a1014}
.hero3 canvas{position:absolute;inset:0;width:100%;height:100%}
.hero3::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(0deg,#0a0a0e,transparent);pointer-events:none}
.hero3 .in{position:relative;z-index:2;padding:60px 20px 90px}
.hero3 .mark{width:min(380px,66vw);filter:drop-shadow(0 20px 40px #000) drop-shadow(0 0 46px #ff2a3a88);animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.hero3 h1{margin:6px 0 8px;font:400 clamp(54px,12vw,150px)/.95 "Metal Mania",serif;letter-spacing:.03em;text-transform:uppercase;background:linear-gradient(180deg,#fff 0,#d6deec 36%,#58667e 50%,#f1f6ff 54%,#a3b1c6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px #ff4a2866) drop-shadow(0 4px 0 #000)}
.hero3 .tag{font:700 clamp(14px,2.4vw,22px) "Rajdhani";letter-spacing:.42em;text-transform:uppercase;color:var(--hot);text-shadow:0 0 18px #ff7a1a}
.hero3 p{max-width:700px;margin:18px auto 26px;color:#d3cde0;font-size:clamp(18px,2.4vw,23px)}
.ticker{overflow:hidden;white-space:nowrap;border-block:1px solid #3a1014;background:linear-gradient(90deg,#1a0508,#0d0d12,#1a0508);padding:12px 0}
.ticker div{display:inline-block;animation:tick 38s linear infinite;font:700 22px "Rajdhani";letter-spacing:.3em;color:#cfd6e4;text-transform:uppercase}
.ticker b{color:var(--blood);margin:0 .9em;text-shadow:0 0 10px #ff2a3a}
@keyframes tick{to{transform:translateX(-50%)}}
.stage{display:grid;grid-template-columns:260px 1fr;gap:22px;align-items:start}
.chain{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.chain button{all:unset;cursor:pointer;text-align:center;padding:12px 4px;border:1px solid #33333f;border-radius:6px;background:linear-gradient(180deg,#1d1d27,#101016);font:700 15px "Rajdhani";letter-spacing:.14em;color:#aab3c4;position:relative;transition:.18s}
.chain button:hover{border-color:var(--ember);color:#fff;transform:translateY(-2px)}
.chain button.on{border-color:var(--blood);color:#fff;background:linear-gradient(180deg,#5a0912,#26050a);box-shadow:0 0 22px #ff2a3a66,inset 0 1px 0 #ff8a96}
.chain button i{display:block;font:600 10px monospace;color:var(--ember);letter-spacing:.2em}
.screen{background:#07070b;border:1px solid #4a4a5a;border-radius:10px;padding:0;overflow:hidden;box-shadow:0 0 0 4px #14141b,0 0 0 5px #3a3a48,0 20px 60px #000,0 0 60px #ff2a3a22}
.screen canvas{display:block;width:100%;height:340px}
.screen .cap{padding:16px 22px 20px;border-top:1px solid #2a2a36;background:linear-gradient(180deg,#14141b,#0b0b0f)}
.screen h3{font:400 34px "Metal Mania";margin:0;background:linear-gradient(180deg,#fff,#7c8aa2);-webkit-background-clip:text;background-clip:text;color:transparent}
.screen p{margin:6px 0 0;color:#b9b4c6;font-size:18px}
.screen .use{color:var(--hot);font-weight:700}
.tools{display:flex;gap:12px;align-items:center;padding:10px 22px;background:#0c0c11;border-bottom:1px solid #2a2a36}
.tools .pw{width:34px;height:34px;border-radius:50%;border:2px solid #667;background:#14141b;cursor:pointer;position:relative}
.tools .pw.on{border-color:var(--blood);box-shadow:0 0 16px #ff2a3a,inset 0 0 8px #ff2a3a66}
.tools .pw::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:10px;background:#aab;transform:translateX(-50%);border-radius:2px}
.tools .pw.on::after{background:#fff}
.tools input{accent-color:var(--blood);flex:1}
.tools span{font:700 13px "Rajdhani";letter-spacing:.2em;color:#9aa8bd;text-transform:uppercase}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;text-align:center}
.stats div{padding:22px 10px;border:1px solid #33333f;border-radius:8px;background:linear-gradient(180deg,#171720,#0d0d12)}
.stats b{display:block;font:400 54px/1 "Metal Mania";background:linear-gradient(180deg,#ffd9a0,#ff7a1a 55%,#c8101e);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{font:700 14px "Rajdhani";letter-spacing:.22em;color:#aab3c4;text-transform:uppercase}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s}.reveal.in{opacity:1;transform:none}
.tiles{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.tile{position:relative;overflow:hidden;border-radius:10px;border:1px solid #33333f;padding:22px;background:linear-gradient(160deg,#1a1a23,#0c0c11);transition:.25s}
.tile::before{content:"";position:absolute;inset:-40% -20% auto auto;width:200px;height:200px;background:radial-gradient(circle,#ff2a3a55,transparent 65%);opacity:0;transition:.3s}
.tile:hover{transform:translateY(-4px);border-color:var(--ember)}.tile:hover::before{opacity:1}
.tile h3{font:700 22px "Rajdhani";letter-spacing:.14em;color:#fff;margin-bottom:4px}.tile p{margin:0;color:#aab3c4;font-size:17px}
.cta3{text-align:center;padding:90px 0;background:radial-gradient(700px 300px at 50% 100%,#6a0a14aa,transparent 70%)}
.cta3 h2{font-size:clamp(40px,7vw,78px);background:linear-gradient(180deg,#fff,#7c8aa2);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:820px){.stage{grid-template-columns:1fr}.chain{grid-template-columns:repeat(4,1fr)}.chain button{font-size:12px;letter-spacing:.04em}}
@media(prefers-reduced-motion:reduce){.hero3 .mark,.ticker div{animation:none}.reveal{opacity:1;transform:none}}