@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root{
  --bg:#050505; --panel:#090909; --text:#f3f3f3; --muted:#aaa;
  --red:#e00000; --line:#272727;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Montserrat,Arial,sans-serif}
a{text-decoration:none;color:inherit}
.nav{height:76px;background:#030303;display:flex;align-items:center;padding:0 4vw;gap:32px;position:sticky;top:0;z-index:20;border-bottom:1px solid #111}
.brand{width:185px;display:flex;align-items:center}
.brand img{width:100%;height:auto;display:block}
.nav nav{display:flex;gap:36px;margin:auto;font-size:12px;letter-spacing:3px}
.nav nav a{padding:29px 0;color:#ddd}
.nav nav a:hover,.nav nav .active{color:var(--red);border-bottom:2px solid var(--red)}
.social-mini{display:flex;gap:18px;font-weight:700;color:#ddd}.social-mini a:hover{color:var(--red)}
.menu{display:none;background:none;border:0;color:white;font-size:24px}

.hero{height:500px;position:relative;overflow:hidden;display:flex;align-items:center}
.hero-image{position:absolute;inset:0;background-image:url('assets/avatar.jpg');background-size:cover;background-position:center 32%;filter:brightness(.7) contrast(1.12)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.72) 40%,rgba(0,0,0,.2) 75%,rgba(0,0,0,.65) 100%),linear-gradient(0deg,rgba(0,0,0,.5),transparent 45%)}
.hero-content{position:relative;z-index:2;width:min(900px,92%);margin-left:5.5vw}
.hero-logo{width:min(520px,70vw);max-height:170px;object-fit:contain;object-position:left center;filter:drop-shadow(0 2px 8px #000)}
.roles{font-size:18px;letter-spacing:7px;margin:15px 0 28px}.roles span,.tagline span{color:var(--red)}
.hero-actions{display:flex;gap:14px}.btn{border:1px solid #aaa;padding:15px 26px;font-size:12px;letter-spacing:2px}.btn:hover{border-color:var(--red)}.btn.primary{background:#d40000;border-color:#d40000}.btn span{margin-left:7px}
.tagline{font-size:11px;letter-spacing:3px;margin-top:28px;color:#ddd}

.section{padding:46px 5.5vw;border-top:1px solid #141414}
.section-title{display:flex;align-items:center;gap:14px;justify-content:center;margin-bottom:24px}.section-title span{width:55px;height:1px;background:var(--red)}h2{font-size:17px;letter-spacing:6px;font-weight:500;margin:0}
.release-grid{display:grid;grid-template-columns:42% 1fr;gap:5vw;align-items:center;max-width:1050px;margin:auto}
.cover{width:100%;max-width:520px;display:block;border:1px solid #444}
.release-info h3{font-size:25px;letter-spacing:8px;margin:0 0 18px}.available{letter-spacing:5px;font-size:12px;color:#ddd}.red-line{width:55px;height:2px;background:var(--red);margin:20px 0}
.platform-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.platform,.more{font:inherit;color:#ddd;background:#080808;border:1px solid #3a3a3a;padding:17px;letter-spacing:1px;border-radius:4px}.disabled{opacity:.55;cursor:not-allowed}.more{width:100%;margin-top:12px}.more span{float:right}.note{font-size:11px;color:#777;line-height:1.7}

.section-heading{display:flex;align-items:center;gap:16px;margin-bottom:20px}.section-heading span{height:1px;background:var(--red);flex:1}.section-heading a{font-size:10px;letter-spacing:2px;color:var(--red)}
.empty-card{border:1px solid #2a2a2a;min-height:105px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,#080808,#050505)}.empty-card .icon,.youtube-icon{color:var(--red);font-size:26px}.empty-card p{letter-spacing:5px;font-size:12px;margin:8px 0}.empty-card strong{color:var(--red);font-size:11px;letter-spacing:4px}
.about{max-width:1100px;margin:auto}.about p{max-width:750px;color:#aaa;line-height:1.9;letter-spacing:1px}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:6vw}.socials{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.social{border:1px solid #292929;padding:18px 10px;text-align:center;font-size:11px;letter-spacing:1px}.social:hover{border-color:var(--red)}
.contact-card{border-left:1px solid #333;padding-left:25px;color:#ddd}.contact-card p{padding-bottom:18px;border-bottom:1px solid #222;font-size:12px;letter-spacing:2px;line-height:1.8}.contact-card span{color:#777;letter-spacing:1px}
footer{padding:35px 5vw;text-align:center;border-top:1px solid #151515}footer img{width:150px;max-width:45vw}footer p{font-size:9px;color:#666;letter-spacing:3px}

@media(max-width:800px){
  .nav{height:64px;padding:0 18px;gap:12px}.brand{width:145px}.nav nav,.social-mini{display:none}.menu{display:block;margin-left:auto}
  .hero{height:650px;align-items:flex-end}.hero-image{background-position:center top}.hero-overlay{background:linear-gradient(0deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.65) 45%,rgba(0,0,0,.25) 100%)}
  .hero-content{margin:0 22px 45px}.hero-logo{width:90vw;max-height:140px}.roles{font-size:12px;letter-spacing:4px}.hero-actions{flex-direction:column;max-width:260px}.btn{text-align:center}.tagline{font-size:9px;letter-spacing:2px}
  .section{padding:36px 22px}.release-grid,.contact{grid-template-columns:1fr}.release-info{padding-top:10px}.platform-grid{grid-template-columns:1fr 1fr}.socials{grid-template-columns:1fr 1fr}.contact-card{border-left:0;border-top:1px solid #222;padding:10px 0 0}
}