@font-face{
  font-family:'Luckiest Guy';
  font-style: normal;
  font-weight: 400;
  src: local('Luckiest Guy'), url('https://fonts.gstatic.com/s/luckiestguy/v17/_gP_1RrxsjcxVyin9l9n_j2hTd52.woff2') format('woff2');
  font-display: swap;
}
:root{
  --bg:#07040D;
  --panel: rgba(17,10,30,.78);
  --text:#ffffff;
  --muted:#bfc0cc;
  --primary:#9146ff;
  --cyan:#00e5ff;
  --magenta:#ff47c2;
  --border:#24173d;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
/* neon background */
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background: radial-gradient(900px 600px at 15% -10%, rgba(255,71,194,.16), transparent 60%),
              radial-gradient(900px 600px at 100% 10%, rgba(0,229,255,.14), transparent 60%);
  pointer-events:none;
}
a{color:var(--cyan); text-decoration:none}
.container{max-width:1150px;margin:0 auto;padding:0 20px}
.nav{position:sticky;top:0;z-index:30;background:rgba(7,4,13,.6);backdrop-filter: blur(10px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:40px;height:40px;border-radius:8px}
.brand .word{font-family:'Luckiest Guy', system-ui; font-size:1.3rem; letter-spacing:.5px}
.btn{display:inline-block;padding:12px 16px;border-radius:14px;font-weight:800;background:linear-gradient(135deg,var(--primary),var(--magenta));color:#fff;border:1px solid rgba(255,255,255,.08)}
.btn.ghost{background:transparent;border:1px solid var(--border)}
@media (max-width: 520px){
  .btn{padding:10px 12px; border-radius:12px; font-size:.95rem}
}
.hero{display:grid;grid-template-columns: 1fr 1.2fr;gap:36px;align-items:center;padding:70px 0}
.hero .card{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:22px; backdrop-filter: blur(8px)}
.hero .portrait{width:100%; aspect-ratio: 1/1; object-fit: cover; border:6px solid white}
.hero .portrait.round{border-radius:50%}
.kicker{letter-spacing:.28em;text-transform:uppercase;color:var(--cyan);font-weight:900;font-size:.8rem}
h1{
  font-family:'Luckiest Guy', system-ui;
  font-size:clamp(2.2rem,5vw,3.6rem);
  margin:.2em 0 .25em; line-height:1.03;
  text-shadow: 0 0 24px rgba(255,71,194,.28), 0 10px 24px rgba(0,229,255,.18);
}
h2{font-family:'Luckiest Guy', system-ui; font-size:2rem; letter-spacing:.3px}
p.lead{font-size:1.1rem;color:var(--muted);max-width:60ch}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.badge{padding:8px 12px;border:1px solid var(--border);border-radius:999px;font-size:.9rem;color:var(--muted); background:rgba(255,71,194,.06)}
.section{padding:60px 0;border-top:1px solid var(--border)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gallery img{width:100%;height:100%;object-fit:cover;border-radius:14px;border:1px solid var(--border)}
.footer{padding:30px 0;color:var(--muted);font-size:.95rem;border-top:1px solid var(--border);margin-top:40px}
.socials{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.socials a{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.03); line-height:1}
.socials .icon{width:24px;height:24px;flex:0 0 24px;display:inline-flex;align-items:center;justify-content:center; background-size:cover; border-radius:6px}
.socials .icon svg{width:100%;height:100%;display:block;overflow:visible}
.socials a.youtube .icon{background-image:url('../assets/images/yt_play.svg')}
.socials a.discord .icon{background:linear-gradient(135deg,var(--primary),var(--cyan))}
.small{font-size:.9rem;color:var(--muted)}
.schedule{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.schedule .slot{padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--panel)}
.partners{position:relative; overflow:hidden; border:1px solid var(--border); border-radius:16px; background: rgba(255,255,255,.02); padding:10px; margin-top:16px}
.track{display:flex; gap:40px; animation: scroll 22s linear infinite}
.track img{height:46px; object-fit:contain; filter: drop-shadow(0 0 12px rgba(255,71,194,.2))}
@keyframes scroll{
  0%{transform: translateX(0)}
  100%{transform: translateX(-50%)}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .schedule{grid-template-columns:1fr}
  .track img{height:40px}
}