:root{--bk:#07080a;--ink:#f2efe9;--ember:#ff6a1a;--gold:#c9a45c;--mut:#9a958c}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:auto}
body{background:var(--bk);color:var(--ink);font-family:Inter,system-ui,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,.logo,.btn,.tag,.marquee,.big,.num{font-family:Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.02em}
.grain{pointer-events:none;position:fixed;inset:-50%;z-index:99;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:g 1s steps(4) infinite}
@keyframes g{0%{transform:translate(0)}25%{transform:translate(-5%,3%)}50%{transform:translate(4%,-4%)}75%{transform:translate(-3%,5%)}}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:18px 5vw;background:linear-gradient(#07080acc,transparent)}
.logo{font-size:22px}.logo span{color:var(--ember)}
.nav nav{display:flex;gap:26px;align-items:center;font-weight:600;font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.nav nav a:hover{color:var(--ember)}
.btn{display:inline-block;padding:16px 30px;background:var(--ember);color:#000;border:2px solid var(--ember);font-size:18px;cursor:pointer;transition:.3s;box-shadow:0 0 30px #ff6a1a55}
.btn:hover{background:transparent;color:var(--ember)}.btn.sm{padding:8px 16px;font-size:14px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:none}.btn.ghost:hover{border-color:var(--ember);color:var(--ember)}
.hero{position:relative;min-height:100vh;padding-top:110px;display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0}.hero-bg img{width:100%;height:115%;object-fit:cover;animation:kb 20s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.12) translateX(-2%)}}
#embers{position:absolute;inset:0;width:100%;height:100%}
.hero-shade{position:absolute;inset:0;background:linear-gradient(0deg,var(--bk) 3%,#07080a99 40%,transparent 75%),linear-gradient(90deg,#07080acc,transparent 70%)}
.hero-inner{position:relative;padding:0 5vw 14vh;max-width:1100px}
.eyebrow{color:var(--gold);letter-spacing:.35em;text-transform:uppercase;font-size:13px;margin-bottom:18px}
h1{font-size:clamp(48px,9vw,140px);line-height:.9}h1 em{font-style:normal;color:var(--ember);text-shadow:0 0 40px #ff6a1a88}
.lede{max-width:560px;margin:26px 0 34px;color:#d8d2c8;font-size:clamp(16px,1.4vw,19px);line-height:1.6}
.ctas{display:flex;gap:16px;flex-wrap:wrap}
.scroll-cue{position:absolute;bottom:26px;right:5vw;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--mut);writing-mode:vertical-rl;animation:b 2s infinite}
@keyframes b{50%{transform:translateY(10px)}}
.marquee{overflow:hidden;border-block:1px solid #ffffff22;background:var(--ember);color:#000;padding:14px 0;transform:rotate(-1.5deg) scale(1.04)}
.track{white-space:nowrap;font-size:clamp(22px,3vw,38px);display:inline-block;animation:m 25s linear infinite}
@keyframes m{to{transform:translateX(-50%)}}
.split-sec{display:grid;grid-template-columns:1fr 1fr;min-height:80vh}
.half{padding:12vh 6vw;display:flex;flex-direction:column;justify-content:center}
.mettle{background:linear-gradient(135deg,#0d0f12,#1a1d22)}.mercy{background:linear-gradient(135deg,#2a1608,#4a2410)}
.half h2{font-size:clamp(60px,10vw,160px);line-height:.9}.mercy h2{color:var(--gold)}
.half p{font-size:clamp(17px,1.5vw,21px);line-height:1.6;max-width:460px;margin-top:20px;color:#ddd5c9}
.num{color:var(--ember);font-size:20px}
.creed{padding:22vh 6vw;text-align:center}
.big{font-size:clamp(34px,5.5vw,84px);line-height:1.05;max-width:1300px;margin:auto}
.big .word{opacity:.12;display:inline-block}
.shop{padding:14vh 5vw}.shop.alt{background:#0e0f12}
.head{max-width:700px;margin-bottom:50px}.head h2{font-size:clamp(44px,6vw,96px);line-height:.95}.head p{color:var(--mut);margin-top:12px;line-height:1.6}
.tag{color:var(--ember);font-size:15px;letter-spacing:.3em}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.grid.three{grid-template-columns:repeat(3,1fr)}
.card{background:#14161a;border:1px solid #ffffff14;padding:16px;transition:border-color .3s,box-shadow .3s;transform-style:preserve-3d;will-change:transform}
.card:hover{border-color:var(--ember);box-shadow:0 20px 60px #ff6a1a33}
.ph{aspect-ratio:4/5;display:grid;place-items:center;text-align:center;font-family:Anton;font-size:20px;letter-spacing:.1em;color:#ffffff44;border:2px dashed #ffffff22;background:repeating-linear-gradient(45deg,#16181c 0 14px,#1b1e23 14px 28px);margin-bottom:16px}
.card h3{font-size:18px}.card p{color:var(--mut);font-size:14px;margin:6px 0 12px}
.soon{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.join{padding:20vh 6vw;text-align:center;background:radial-gradient(circle at 50% 120%,#ff6a1a44,transparent 60%)}
.join h2{font-size:clamp(50px,8vw,130px)}.join p{color:#d8d2c8;margin:10px 0 30px}
.join form{display:flex;max-width:560px;margin:auto}.join input{flex:1;padding:16px;background:#111;border:2px solid #333;color:var(--ink);font-size:16px}
.join small{display:block;margin-top:14px;color:var(--mut)}.ok{color:var(--gold)!important}
footer{padding:60px 5vw;border-top:1px solid #ffffff14;text-align:center;color:var(--mut);display:grid;gap:10px}
footer .logo{font-size:34px;color:var(--ink)}footer a{color:var(--ember)}.fine{font-size:12px}
.reveal{opacity:0;transform:translateY(60px)}
@media(max-width:820px){.nav nav a:not(.btn){display:none}.split-sec{grid-template-columns:1fr}.grid,.grid.three{grid-template-columns:1fr 1fr}.join form{flex-direction:column;gap:10px}.half{padding:10vh 7vw}}
@media(max-width:480px){.grid,.grid.three{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}.reveal{opacity:1;transform:none}}