:root{
  --pink:#fb83b2;
  --pink-dim:#f4699e;
  --bg:#08070a;
  --text:#f5f0f2;
  --muted:#8b8690;
  --border:rgba(255,255,255,.09);
  --status-online:#fb83b2;
  --status-dev:#f5c945;
  --status-offline:#ef4444;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);color:var(--text);
  font-family:'Inter',system-ui,sans-serif;line-height:1.55;
}
.container{max-width:1120px;margin:0 auto;padding:0 24px;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;}

@keyframes fadeInUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}

/* header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1rem;letter-spacing:-.01em;flex-shrink:0;}
.brand-logo{width:26px;height:26px;object-fit:contain;}
.main-nav{display:flex;gap:30px;align-items:center;}
.nav-link{
  position:relative;color:var(--muted);font-size:.88rem;font-weight:500;
  padding-bottom:4px;display:inline-flex;align-items:center;gap:7px;
  transition:color .2s ease;
}
.nav-link::after{
  content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--pink);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.nav-link:hover{color:var(--text);}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);}
.nav-link.active{color:var(--text);}

.discord-link{color:var(--pink);display:inline-flex;align-items:center;justify-content:center;opacity:.9;transition:opacity .15s ease;flex-shrink:0;}
.discord-link:hover{opacity:1;}

.menu-toggle{
  display:none;flex-direction:column;justify-content:center;gap:4px;
  width:36px;height:36px;background:none;border:1px solid var(--border);cursor:pointer;
}
.menu-toggle span{width:15px;height:1px;background:var(--text);margin:0 auto;transition:transform .15s,opacity .15s;}
.menu-toggle.open span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

/* buttons + links */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 20px;font-weight:600;font-size:.88rem;font-family:inherit;
  border:1px solid transparent;background:transparent;cursor:pointer;
  transition:transform .15s ease,background .15s ease,border-color .15s ease,color .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--pink);color:#1a1015;}
.btn-primary:hover{background:var(--pink-dim);}
.btn-outline{border-color:var(--border);color:var(--text);}
.btn-outline:hover{border-color:var(--pink);color:var(--pink);}

.link-cta{position:relative;font-weight:600;font-size:.9rem;color:var(--text);display:inline-flex;align-items:center;gap:6px;}
.link-cta svg{transition:transform .2s ease;}
.link-cta:hover svg{transform:translateX(3px);}
.link-cta.muted{color:var(--muted);}
.link-cta.muted:hover{color:var(--text);}

/* footer */
footer.site-footer{border-top:1px solid var(--border);padding:26px 0;}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;}
.footer-brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.88rem;color:var(--muted);}
.footer-copy{color:var(--muted);font-size:.8rem;}

@media (max-width:820px){
  .main-nav{
    display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:2px;
    background:var(--bg);border-bottom:1px solid var(--border);padding:10px 24px 16px;align-items:flex-start;
  }
  .main-nav.open{display:flex;animation:fadeInUp .2s ease both;}
  .nav-link{padding:12px 0;width:100%;}
  .nav-link::after{display:none;}
  .discord-link{margin-top:10px;}
  .menu-toggle{display:flex;}
}