:root{ --plum:#7a0249; --pink:#e0368f; }
*{box-sizing:border-box}
html,body{margin:0;background:#000;color:#fff;font-family:'Montserrat',sans-serif}
a{color:#fff;text-decoration:none}
a:hover{color:var(--pink)}
::-webkit-scrollbar{width:10px;background:#000} ::-webkit-scrollbar-thumb{background:var(--plum)}
@keyframes heartbeat{0%,100%{transform:scale(1)}14%{transform:scale(1.06)}28%{transform:scale(1)}42%{transform:scale(1.06)}70%{transform:scale(1)}}

.header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,3vw,36px);background:linear-gradient(180deg,rgba(0,0,0,.75),rgba(0,0,0,0))}
.logo img{height:clamp(54px,7vw,84px);width:auto;display:block;animation:heartbeat 2.4s ease-in-out infinite}
.header-right{display:flex;align-items:center;gap:clamp(12px,2vw,22px)}
.socials{display:flex;gap:14px;align-items:center}
.socials a{display:flex;opacity:.9} .socials a:hover{opacity:1}
.socials img{width:20px;height:20px}
.menu-btn{font-family:'Inconsolata',monospace;font-size:15px;letter-spacing:.2em;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.6);padding:10px 16px;cursor:pointer;min-height:44px}
.menu-btn:hover{background:var(--plum);border-color:var(--plum)}
@media (max-width:480px){ .header .socials{display:none} }

.hero{line-height:0} .hero img{width:100%;height:auto;display:block}

.release{background:radial-gradient(ellipse at 50% 0%,#3a0a2c 0%,#0b0208 60%,#000 100%);padding:clamp(40px,6vw,80px) clamp(16px,4vw,48px);text-transform:uppercase}
.release h2{text-align:center;margin:0 0 clamp(24px,4vw,44px);font-size:clamp(26px,3.4vw,44px);letter-spacing:.18em;font-weight:700}
.art-player{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(20px,3vw,36px);align-items:start}
.art-player img{width:100%;height:auto;display:block;box-shadow:0 20px 60px rgba(122,2,73,.45)}
.art-player iframe{border-radius:12px;border:0;min-height:300px;width:100%}
.buy{max-width:1100px;margin:clamp(24px,3vw,36px) auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.buy a{display:flex;align-items:center;justify-content:center;min-width:180px;min-height:48px;padding:0 24px;border:2px solid #fff;font-weight:700;letter-spacing:.14em;font-size:15px}
.buy a:hover{background:var(--plum);border-color:var(--plum);color:#fff}

.footer{text-align:center;padding:28px 16px 22px;background:#050005;border-top:1px solid #2a0a20;text-transform:uppercase;line-height:1.5em;display:flex;flex-direction:column;align-items:center;gap:12px}
.footer .socials{gap:16px}
.credit{font-size:12px;letter-spacing:.1em} .credit a{text-decoration:underline}

.menu{position:fixed;inset:0;z-index:100;background:rgba(10,0,8,.97);overflow-y:auto;display:none;flex-direction:column;align-items:center;padding:24px}
.menu.open{display:flex}
.menu-close{position:fixed;top:18px;right:clamp(16px,3vw,36px);font-size:30px;line-height:1;color:#fff;background:transparent;border:0;cursor:pointer;width:48px;height:48px;z-index:1}
.menu-inner{margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.6vh,20px);padding:24px 0}
.menu-inner img{height:clamp(56px,12vh,96px);width:auto;margin-bottom:8px}
.menu-inner a{font-size:clamp(20px,min(3.4vw,4.5vh),34px);font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:6px 12px;min-height:44px;display:flex;align-items:center}

.page{min-height:100vh;background:radial-gradient(ellipse at 50% 0%,#3a0a2c 0%,#0b0208 60%,#000 100%);padding:clamp(120px,14vw,170px) clamp(16px,4vw,48px) clamp(48px,6vw,80px)}
.page h1{text-align:center;margin:0 0 clamp(24px,4vw,44px);font-size:clamp(30px,4vw,52px);letter-spacing:.18em;font-weight:700;text-transform:uppercase}
.page-body{max-width:760px;margin:0 auto;font-size:clamp(16px,1.2vw,18px);line-height:1.75}
.page-body p{margin:0 0 1.2em}
.ind-release{max-width:1100px;margin:0 auto clamp(56px,7vw,96px);text-transform:uppercase}
.ind-release h2{text-align:center;margin:0 0 clamp(20px,3vw,32px);font-size:clamp(22px,2.6vw,34px);letter-spacing:.16em;font-weight:700}

/* ── Space theme (Industry era). Delete this block to return to the original look. ── */
:root{ --violet:#5b2bd6; --cyan:#47d7ff; }
html{background:#03000a} body{background:transparent;position:relative}
body::before,body::after{content:"";position:fixed;inset:-50%;z-index:-1;pointer-events:none}
body::before{background:
  radial-gradient(1px 1px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 140px 80px,#fff,transparent),
  radial-gradient(1.5px 1.5px at 260px 160px,#ffd6f0,transparent),radial-gradient(1px 1px at 90px 210px,#fff,transparent),
  radial-gradient(1px 1px at 310px 40px,#cfe8ff,transparent),radial-gradient(2px 2px at 200px 260px,#fff,transparent);
  background-size:340px 300px;animation:drift 240s linear infinite,twinkle 6s ease-in-out infinite alternate;opacity:.8}
body::after{background:
  radial-gradient(ellipse 40% 30% at 20% 30%,rgba(122,2,73,.35),transparent 70%),
  radial-gradient(ellipse 35% 25% at 80% 70%,rgba(91,43,214,.28),transparent 70%),
  radial-gradient(ellipse 25% 20% at 60% 15%,rgba(224,54,143,.18),transparent 70%),#03000a;
  z-index:-2;inset:0}
@keyframes drift{to{transform:translate3d(-340px,-300px,0)}}
@keyframes twinkle{from{opacity:.55}to{opacity:.95}}
.release,.page{background:transparent}
.footer{background:rgba(3,0,10,.75);border-top:1px solid rgba(122,2,73,.5)}
.menu{background:radial-gradient(ellipse at 50% 40%,rgba(58,10,44,.97),rgba(3,0,10,.98) 70%)}
.release h2,.page h1,.ind-release h2,.coming h2{text-shadow:0 0 18px rgba(224,54,143,.55),0 0 42px rgba(91,43,214,.35)}
.art-player img{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 20px 60px rgba(122,2,73,.45),0 0 80px rgba(91,43,214,.25)}
.buy a{background:rgba(3,0,10,.35);backdrop-filter:blur(2px)}
.buy a:hover{box-shadow:0 0 24px rgba(224,54,143,.6)}
.hero{position:relative} .hero::after{content:"";position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(transparent,#03000a)}

/* Industry teaser */
.coming{padding:clamp(56px,8vw,110px) clamp(16px,4vw,48px);text-align:center;text-transform:uppercase;overflow:hidden}
.coming .eyebrow{font-family:'Inconsolata',monospace;letter-spacing:.4em;font-size:clamp(12px,1.1vw,15px);color:var(--cyan);margin:0 0 18px}
.coming h2{margin:0;font-size:clamp(44px,9vw,120px);letter-spacing:.22em;font-weight:700;line-height:1;padding-left:.22em}
.coming .soon{margin:18px 0 0;letter-spacing:.5em;font-size:clamp(14px,1.6vw,20px);padding-left:.5em}
.planet{position:relative;width:clamp(180px,26vw,300px);aspect-ratio:1;margin:0 auto clamp(28px,4vw,48px)}
.planet .core{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle at 32% 30%,#ff8fcf,var(--pink) 25%,var(--plum) 55%,#14001f 85%);box-shadow:0 0 60px rgba(224,54,143,.55),inset -18px -14px 40px rgba(0,0,0,.6)}
.planet .ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(71,215,255,.55);transform:rotateX(72deg) rotateZ(-18deg);box-shadow:0 0 18px rgba(71,215,255,.35)}
.planet .moon{position:absolute;top:50%;left:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:#fff;box-shadow:0 0 12px #fff;animation:orbit 9s linear infinite}
.planet .planet-logo{position:absolute;inset:0;margin:auto;width:40%;height:auto;filter:drop-shadow(0 0 10px rgba(255,255,255,.55)) drop-shadow(0 0 22px rgba(224,54,143,.7));animation:heartbeat 2.4s ease-in-out infinite}
@keyframes orbit{from{transform:rotate(0) translateX(calc(clamp(180px,26vw,300px)/2)) rotate(0)}to{transform:rotate(360deg) translateX(calc(clamp(180px,26vw,300px)/2)) rotate(-360deg)}}
@media (prefers-reduced-motion:reduce){ body::before,.planet .moon,.logo img,.planet .planet-logo{animation:none} }