:root{
  --bg:#0b0b0d;
  --panel:#111;
  --muted:#9a9a9a;
  --accent:#e23b3b;
  --accent-2:#ff4d4d;
  --glass:rgba(255,255,255,0.03);
  --container-padding:6vw;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:#fff;-webkit-font-smoothing:antialiased}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;padding:8px 12px;background:#111;border-radius:8px;color:#fff;z-index:9999}

/* Fluid typography */
html{font-size:16px}
h1,h2,h3{line-height:1.06;margin:0}
.headline{font-size:clamp(1.6rem, 2.6vw + 1rem, 2.75rem)}
body{font-size:clamp(0.95rem, 0.5vw + 0.9rem, 1rem)}

.container{max-width:1200px;margin:0 auto;padding:30px var(--container-padding)}
.site-header{display:flex;align-items:center;justify-content:space-between;padding:14px var(--container-padding);background:linear-gradient(90deg,rgba(255,255,255,0.02),transparent);backdrop-filter:blur(4px);position:sticky;top:0;z-index:40}
.brand{display:flex;align-items:center;gap:12px}
.logo-wrap{width:60px;height:60px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:6px;overflow:hidden}
.site-title{font-size:1.75rem;margin:0}
.site-title a{color:#fff;text-decoration:none;font-weight:700}
.logo{width:44px;height:44px;display:block;object-fit:contain}
.main-nav{display:flex;gap:14px;align-items:center}
.main-nav a{color:var(--muted);text-decoration:none;padding:10px 12px;border-radius:10px;transition:all .18s ease;font-weight:500}
.main-nav a:hover,.main-nav a:focus{color:#fff;background:var(--glass);transform:translateY(-2px)}
.discord-cta{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;padding:9px 14px;border-radius:12px}
.api-cta{background:transparent;color:var(--accent-2);border:1px solid rgba(255,77,77,0.12);padding:8px 12px;border-radius:10px;font-weight:700}
.main-nav a.privacy-link{font-weight:700;color:#fff}
.nav-toggle{display:none;background:transparent;border:0;color:#fff;font-size:22px;padding:8px;border-radius:10px}
.nav-toggle:focus{outline:2px solid rgba(226,59,59,0.25)}

.hero{display:flex;align-items:center;justify-content:space-between;padding:60px var(--container-padding);gap:30px}
.hero-inner{max-width:760px}
.sub{color:var(--muted);font-size:1.05rem;margin:0 0 18px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:600}
.btn-primary{background:linear-gradient(90deg,var(--accent),#ff5b5b);color:#fff}
.btn-outline{border:1px solid rgba(255,255,255,0.06);color:#fff;background:transparent}
.hero-graphic{width:360px;height:260px;position:relative}
.glow{width:100%;height:100%;border-radius:14px;background:radial-gradient(circle at 20% 20%, rgba(226,59,59,0.35), transparent 20%), radial-gradient(circle at 80% 80%, rgba(255,77,77,0.18), transparent 12%);box-shadow:0 10px 80px rgba(226,59,59,0.06) inset;animation:float 6s ease-in-out infinite}

@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:36px var(--container-padding)}
.feature{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:20px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);transition:transform .2s,box-shadow .2s}
.feature:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(0,0,0,0.6)}

.latest{padding:0 var(--container-padding) 80px}
.site-footer{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;padding:24px var(--container-padding);border-top:1px solid rgba(255,255,255,0.02);color:var(--muted);text-align:center}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* Improve touch targets */
.main-nav a, .discord-cta, .btn{touch-action:manipulation}

/* Responsive improvements */
@media (max-width:1100px){
  .features{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .features{grid-template-columns:1fr}
  .hero{flex-direction:column;align-items:flex-start;padding:40px var(--container-padding)}
  .hero-graphic{width:100%;height:160px}
  .nav-toggle{display:block}
  .main-nav{position:fixed;right:12px;top:64px;background:#080808;padding:12px;border-radius:12px;display:flex;flex-direction:column;gap:10px;box-shadow:0 18px 40px rgba(0,0,0,0.6);display:none;min-width:200px}
  .main-nav.open{display:flex}
  .showcase{margin:40px auto;padding:20px}
  .discord-widget-section{padding:20px;margin:40px auto}
  .discord-widget-container{padding:20px}
  .discord-widget-container h3{font-size:1.5rem}
  .discord-widget-container iframe{height:400px}
}

@media (max-width:480px){
  .site-header{padding:10px 4vw}
  .logo{width:40px;height:40px}
  .headline{font-size:1.6rem}
  .btn{padding:10px 14px}
  .showcase{margin:30px auto;padding:16px}
  .showcase .showcase-info h3{font-size:1.8rem}
  .discord-widget-section{padding:16px;margin:30px auto}
  .discord-widget-container{padding:16px}
  .discord-widget-container h3{font-size:1.3rem;margin-bottom:16px}
  .discord-widget-container iframe{width:100%;height:350px}
}

/* Accessibility: reduce motion preference */
@media (prefers-reduced-motion:reduce){
  .glow, .feature, .reveal{animation:none;transition:none}
}

/* Projects/servers pages */
.page{max-width:980px;margin:36px auto;padding:18px}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:16px;border-radius:10px;margin-bottom:12px;border:1px solid rgba(255,255,255,0.03)}

a { color:var(--accent-2) }

/* Polyfield / Showcase layout */
.showcase{max-width:94%;margin:60px auto;padding:32px;display:flex;gap:50px;align-items:center}
.showcase .showcase-image{flex:0 0 40%;max-width:40%}
.showcase .showcase-image img{width:100%;height:auto;max-height:380px;border-radius:18px;object-fit:cover;display:block;box-shadow:0 10px 30px rgba(0,0,0,0.6)}
.showcase .showcase-info{flex:1;min-width:240px}
.showcase .showcase-info h3{font-size:2.6rem;margin-bottom:16px}
.showcase .meta{color:var(--muted);font-size:1.1rem;margin-top:8px}
.showcase .showcase-info p{font-size:1.1rem;line-height:1.7}

@media (max-width:900px){
  .showcase{flex-direction:column;padding:12px}
  .showcase .showcase-image,.showcase .showcase-info{max-width:100%;flex:unset}
}

/* Shift the showcase image slightly left on wide screens for visual pop */
@media (min-width:1000px){
  .showcase{padding-left:calc(var(--container-padding) - 40px)}
  .showcase .showcase-image img{margin-left:-40px}
}

/* Global subtle animations */
@keyframes slideDown { from { transform: translateY(-8px); opacity:0 } to { transform: translateY(0); opacity:1 } }
@keyframes pop { from { transform: translateY(6px) scale(0.995); opacity:0 } to { transform: translateY(0) scale(1); opacity:1 } }
.site-header{animation:slideDown .5s ease both}
.hero-inner{animation:pop .6s cubic-bezier(.2,.9,.3,1) both}
.feature{transition:transform .3s ease,box-shadow .3s ease}
.feature:nth-child(1){transition-delay:.05s}
.feature:nth-child(2){transition-delay:.12s}
.feature:nth-child(3){transition-delay:.18s}
.btn{transition:transform .12s ease,box-shadow .12s ease}
.btn:active{transform:translateY(1px) scale(.997)}

/* enhance reveal animation (uses .reveal.visible added by JS) */
.reveal{opacity:0;transform:translateY(12px) scale(.996);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0) scale(1)}

/* prefer reduced motion */
@media (prefers-reduced-motion:reduce){
  .site-header,.hero-inner,.feature,.btn,.reveal,.showcase,.showcase .showcase-image,.showcase .showcase-info,.discord-widget-container,.discord-cta,.btn::before,.hero-graphic .glow,.site-footer{animation:none;transition:none}
  .showcase:hover,.showcase:hover .showcase-image img,.btn:hover{transform:none}
}

/* Discord Widget Section */
.discord-widget-section{max-width:94%;margin:60px auto;padding:32px;text-align:center}
.discord-widget-container{display:inline-block;background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));padding:30px;border-radius:18px;border:1px solid rgba(255,255,255,0.05);box-shadow:0 10px 40px rgba(0,0,0,0.4);animation:fadeInScale 0.8s ease-out both;max-width:100%}
.discord-widget-container h3{font-size:2rem;margin-bottom:24px;background:linear-gradient(90deg,#fff,var(--accent-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.discord-widget-container iframe{border-radius:12px;box-shadow:0 5px 20px rgba(0,0,0,0.3);max-width:100%;height:500px}

/* Section Separators */
.section-separator{border:none;height:2px;background:linear-gradient(90deg,transparent,rgba(226,59,59,0.3),transparent);margin:80px auto;max-width:70%;position:relative;overflow:visible}
.section-separator::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;background:radial-gradient(circle,var(--accent),var(--accent-2));border-radius:50%;box-shadow:0 0 20px rgba(226,59,59,0.6)}

/* Advanced Animations */
@keyframes fadeInScale{
  from{opacity:0;transform:scale(0.92)}
  to{opacity:1;transform:scale(1)}
}
@keyframes slideInLeft{
  from{opacity:0;transform:translateX(-30px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes slideInRight{
  from{opacity:0;transform:translateX(30px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes glow{
  0%,100%{box-shadow:0 0 20px rgba(226,59,59,0.3),0 0 40px rgba(226,59,59,0.2)}
  50%{box-shadow:0 0 30px rgba(226,59,59,0.5),0 0 60px rgba(226,59,59,0.3)}
}
@keyframes pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.02)}
}

/* Apply animations to showcases */
.showcase{position:relative;transition:transform 0.3s ease}
.showcase:nth-child(even) .showcase-image{animation:slideInLeft 0.8s ease-out both;animation-delay:0.2s}
.showcase:nth-child(even) .showcase-info{animation:slideInRight 0.8s ease-out both;animation-delay:0.3s}
.showcase:nth-child(odd) .showcase-image{animation:slideInRight 0.8s ease-out both;animation-delay:0.2s}
.showcase:nth-child(odd) .showcase-info{animation:slideInLeft 0.8s ease-out both;animation-delay:0.3s}

/* Hover effects for showcases */
.showcase:hover{transform:scale(1.01)}
.showcase .showcase-image img{transition:transform 0.4s ease,box-shadow 0.4s ease}
.showcase:hover .showcase-image img{transform:scale(1.05) rotate(1deg);box-shadow:0 20px 50px rgba(0,0,0,0.8)}

/* Enhanced button animations */
.btn{position:relative;overflow:hidden}
.btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.5s ease}
.btn:hover::before{left:100%}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(226,59,59,0.4)}

/* Glow effect on Discord CTA */
.discord-cta{animation:glow 3s ease-in-out infinite}

/* Parallax-like scroll effect */
.hero-graphic .glow{animation:float 6s ease-in-out infinite,pulse 4s ease-in-out infinite}

/* Stagger reveal animations */
.reveal:nth-child(1){transition-delay:0.1s}
.reveal:nth-child(2){transition-delay:0.2s}
.reveal:nth-child(3){transition-delay:0.3s}
.reveal:nth-child(4){transition-delay:0.4s}
.reveal:nth-child(5){transition-delay:0.5s}

/* Enhanced footer animation */
.site-footer{animation:slideDown 0.8s ease both;animation-delay:0.5s}