:root{--gold:#ffb020;--orange:#ff7a00;--sky:#1d6fd6;--deep:#06142e;--ink:#0b1f44}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{font-family:Inter,sans-serif;background:var(--deep);color:#eaf3ff;overflow-x:hidden}
h1,h2,h3,.brand,.btn,.marquee{font-family:Anton,Impact,sans-serif;letter-spacing:.02em}
.gold{background:linear-gradient(180deg,#ffe08a,var(--gold) 50%,var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
img{max-width:100%;display:block}
nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:12px 4vw;transition:.3s}
nav.solid{background:rgba(6,20,46,.85);backdrop-filter:blur(10px);box-shadow:0 2px 20px #0008}
.brand{display:flex;gap:10px;align-items:center;font-size:24px;color:#fff;text-decoration:none}.brand img{width:40px;border-radius:50%}
.links{display:flex;gap:22px;align-items:center}.links a{color:#fff;text-decoration:none;font-weight:600}
.btn{display:inline-block;padding:14px 28px;border-radius:999px;border:0;cursor:pointer;font-size:20px;text-decoration:none;color:#1a0a00;background:linear-gradient(180deg,#ffd35a,var(--orange));box-shadow:0 6px 0 #a34a00,0 10px 30px #ff8a0066;transition:transform .15s}
.btn:hover{transform:translateY(-3px) scale(1.04)}.btn.sm{padding:8px 18px;font-size:16px;color:#1a0a00!important}
.btn.ghost{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 2px #ffffff88;backdrop-filter:blur(6px)}
.btn.roar{background:linear-gradient(180deg,#ff5a5a,#c4001a);color:#fff;box-shadow:0 6px 0 #6d0010}
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden;display:grid;place-items:center;text-align:center}
.layer,.clouds{position:absolute;inset:-10% 0;background-size:cover;background-position:center;will-change:transform}
.rays{position:absolute;inset:0;background:conic-gradient(from 0deg at 50% 20%,#fff0 0 10deg,#fff3 12deg,#fff0 16deg,#fff0 30deg,#fff2 33deg,#fff0 38deg);animation:spin 40s linear infinite;mix-blend-mode:screen}
.clouds{background:radial-gradient(ellipse at 20% 100%,#fffffff0 0 20%,#fff0 45%),radial-gradient(ellipse at 80% 100%,#fffffff0 0 22%,#fff0 45%);top:auto;height:60%;bottom:-15%}
.clouds.c2{opacity:.7;filter:blur(8px);bottom:-25%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#06142e55,#06142e00 30%,#06142e00 70%,var(--deep))}
.hero-inner{position:relative;z-index:2;padding:90px 20px 0}
.hero-logo{width:150px;margin:0 auto 10px;border-radius:50%;box-shadow:0 0 0 6px #ffb020,0 0 60px #ffb020;animation:float 4s ease-in-out infinite}
h1{font-size:clamp(54px,10vw,140px);line-height:.9;color:#fff;text-shadow:0 6px 0 #0b1f44,0 0 40px #0b1f4499}
.tag{font-size:clamp(16px,2.2vw,22px);margin:16px auto 26px;max-width:640px;font-weight:600;text-shadow:0 2px 8px #000a}
.cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:20px 0}
.ca{display:inline-flex;align-items:center;gap:10px;background:rgba(6,20,46,.75);border:2px solid var(--gold);border-radius:14px;padding:8px 10px;max-width:100%;backdrop-filter:blur(6px)}
.ca span{font-family:Anton;color:var(--gold)}.ca code{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca button{background:var(--gold);border:0;border-radius:8px;padding:6px 12px;font-weight:800;cursor:pointer}
.ca.big{display:flex;margin:30px auto;width:fit-content}.ca.big code{font-size:16px}
.scroll-hint{position:absolute;bottom:20px;z-index:3;animation:float 2s infinite;opacity:.8}
.marquee{background:linear-gradient(90deg,var(--gold),var(--orange));color:#1a0a00;font-size:28px;white-space:nowrap;overflow:hidden;padding:10px 0;transform:rotate(-1.5deg);margin:-20px -10px 0;position:relative;z-index:5}
.marquee div{display:inline-block;animation:mq 25s linear infinite}
section{padding:100px 6vw;position:relative}h2{font-size:clamp(40px,6vw,76px);margin-bottom:20px}
.center{text-align:center;justify-content:center}.sub{opacity:.7;margin:-10px 0 30px}
.lore{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center;max-width:1200px;margin:auto}
.lore-img img{border-radius:30px;box-shadow:0 0 0 8px #ffb02055,0 30px 80px #000a;transform:rotate(-3deg);transition:.4s}.lore-img img:hover{transform:rotate(0) scale(1.03)}
.lore-txt p{font-size:19px;line-height:1.7;margin-bottom:16px;opacity:.9}
.socials{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.socials a{padding:10px 18px;border-radius:12px;background:#ffffff14;border:1px solid #ffffff33;color:#fff;text-decoration:none;font-weight:700}.socials a:hover{background:var(--gold);color:#1a0a00}
.band{height:60vh;background-size:cover;background-position:center 30%;background-attachment:fixed;display:grid;place-items:center}
.band h2{font-size:clamp(50px,9vw,120px);text-shadow:0 0 40px #9cf,0 6px 0 #000}
.wall{columns:4 240px;column-gap:16px;max-width:1300px;margin:auto}
.wall figure{break-inside:avoid;margin-bottom:16px;position:relative;border-radius:18px;overflow:hidden;cursor:zoom-in;box-shadow:0 10px 30px #0008}
.wall img{width:100%;transition:transform .5s}.wall figure:hover img{transform:scale(1.08) rotate(1deg)}
.wall figcaption{position:absolute;inset:auto 0 0;padding:30px 14px 12px;font-family:Anton;font-size:20px;background:linear-gradient(transparent,#000c)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;max-width:1100px;margin:auto}
.card{background:linear-gradient(160deg,#16386f,#0b1f44);border:1px solid #ffffff22;border-radius:20px;padding:26px;text-align:center;transition:.3s}.card:hover{transform:translateY(-6px);border-color:var(--gold)}
.card h3{color:var(--gold);font-size:18px;opacity:.9}.card p{font-size:26px;font-weight:800;margin-top:6px}
.buy{background:linear-gradient(#06142ee6,#06142ef2),var(--bg) center/cover fixed}
.steps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;max-width:1100px;margin:30px auto}
.steps li{background:#ffffff10;border:1px solid #ffffff22;border-radius:20px;padding:26px;position:relative}
.steps b{font-family:Anton;font-size:46px;color:var(--gold)}.steps h3{font-size:24px;margin:6px 0}
footer{text-align:center;padding:60px 20px;background:#030a18}footer img{width:80px;margin:0 auto 16px;border-radius:50%}footer p{opacity:.6;max-width:600px;margin:auto}.small{margin-top:10px!important;font-size:13px}
#lightbox{position:fixed;inset:0;background:#000e;z-index:100;display:none;place-items:center;padding:30px}#lightbox.on{display:grid}
#lightbox img{max-height:80vh;border-radius:16px;animation:pop .3s}#lightbox p{font-family:Anton;font-size:26px;margin-top:10px;text-align:center}
#lightbox button{position:absolute;top:20px;right:24px;font-size:30px;background:none;border:0;color:#fff;cursor:pointer}
#flash{position:fixed;inset:0;pointer-events:none;background:radial-gradient(#ffb020aa,#ff3d0000 70%);opacity:0;z-index:90}
#fx{position:fixed;inset:0;pointer-events:none;z-index:95}
.reveal{opacity:0;transform:translateY(40px);transition:1s cubic-bezier(.2,.8,.2,1)}.reveal.in{opacity:1;transform:none}
.shake{animation:shake .5s}
@keyframes float{50%{transform:translateY(-12px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes mq{to{transform:translateX(-50%)}}
@keyframes pop{from{transform:scale(.8);opacity:0}}
@keyframes shake{20%{transform:translate(-12px,6px)}40%{transform:translate(10px,-8px)}60%{transform:translate(-8px,4px)}80%{transform:translate(6px,-2px)}}
@media(max-width:760px){.links a:not(.btn){display:none}.lore{grid-template-columns:1fr;gap:30px}.wall{columns:2 140px}.band,.buy{background-attachment:scroll}.ca code{font-size:11px;max-width:58vw}section{padding:70px 5vw}.btn{font-size:17px;padding:12px 20px}}
.hero{height:100vh;max-height:1000px}
h1 .gold{text-shadow:none;filter:drop-shadow(0 6px 0 #0b1f44)}
@media(max-width:760px){.layer.sky{background-image:url(img/heaven-stairs.webp)!important}}
.band{background-attachment:scroll;background-size:cover;background-position:center 20%}