/* style.css */

/* Root design tokens (HSL used) */
:root{
  --background: 0 0% 4%;
  --foreground: 0 0% 98%;
  --card: 0 0% 8%;
  --muted-foreground: 0 0% 65%;
  --primary: 8 100% 60%;
  --accent: 14 100% 55%;
  --border: 0 0% 20%;
  --radius: 0.75rem;
  --chaos-red: 8 100% 60%;
  --glow-intensity: 0.6;
  --container: 1100px;
  --bp-md: 880px;
}

/* Reset + base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  -webkit-tap-highlight-color: transparent;
}

/* Utility */
.container{max-width:var(--container);margin:0 auto;padding:0 1.25rem}
.small{font-size:.95rem}
.tiny{font-size:.82rem}
.muted{color: hsl(var(--muted-foreground))}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace}
.break{word-break:break-all}

/* Hero */
.hero{
  position:relative;
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:3.5rem 0;
  background-image: url(hero-bg.jpg)
}
.hero-inner{position:relative;z-index:2;text-align:center}
.hero-overlay{
  position:absolute;inset:0;background:
    radial-gradient(circle at 10% 10%, hsl(var(--chaos-red)/0.10), transparent 10%),
    linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.6));
  mix-blend-mode:overlay;pointer-events:none;
}
.title{
  font-size: clamp(2rem, 6vw, 4.5rem);
  margin:0;
  letter-spacing:2px;
  text-transform:uppercase;
  line-height:1;
  color: hsl(var(--foreground));
  text-shadow: 0 0 18px hsl(var(--chaos-red) / 0.28);
  animation:glitch-text 4s infinite;
}
.subtitle{margin:.6rem 0 1.2rem;color:hsl(var(--muted-foreground));font-size:1.1rem}
.btn{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid hsl(var(--border));
  padding:.7rem 1rem;
  border-radius:12px;
  cursor:pointer;
  color:inherit;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  transition:all .18s ease;
}
.btn:hover{transform:translateY(-3px); box-shadow:0 8px 30px rgba(0,0,0,0.5)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:.9rem 1.1rem}
.muted.small{opacity:.9;margin-top:.6rem;color:hsl(var(--muted-foreground))}

/* Cards / sections */
.section{padding:3rem 0}
.section-card{padding:2.4rem 0}
.section-title{font-size:1.6rem;margin:0 0 1.2rem;text-align:center;color:hsl(var(--primary))}
.card{
  background: hsl(var(--card));
  border-radius: var(--radius);
  padding:1rem;
  border:1px solid hsl(var(--border));
  box-shadow: 0 6px 30px rgba(0,0,0,0.45);
}

/* Status */
.status-card{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:1rem 1.25rem}
.iframe-wrap{width:100%;max-width:728px;overflow:hidden;border-radius:8px}

/* Features grid */
.features-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:1rem}
@media(min-width:820px){.features-grid{grid-template-columns:repeat(3,1fr)}}
.feature{padding:1.2rem;display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.feature .icon{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;background: linear-gradient(180deg, hsl(var(--chaos-red) / 0.16), rgba(0,0,0,0.08));border:1px solid hsl(var(--border));box-shadow:0 6px 18px rgba(0,0,0,0.45)}

/* Join grid */
.join-grid{display:grid;gap:1rem}
@media(min-width:820px){.join-grid{grid-template-columns:repeat(2,1fr)}}
.join-card{padding:1rem}
.row{display:flex;align-items:center;gap:.8rem;justify-content:space-between}
.code, code{background:transparent}
.join-card code.mono, .donation code.mono{background:transparent;padding:.2rem .4rem;border-radius:6px;border:1px solid hsl(var(--border))}

/* Donation */
.donation{margin-top:0.8rem}
.donation .btn{padding:.5rem .6rem;font-size:.95rem}

/* FAQ */
.faq-list{display:grid;gap:.6rem;max-width:900px;margin:0 auto}
.faq-item{overflow:hidden;border-radius:12px;border:1px solid hsl(var(--border));background:hsl(var(--card));}
.faq-q{
  width:100%;
  text-align:left;
  padding:1rem;
  font-weight:700;
  background:transparent;
  border:0;
  color:inherit;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  cursor:pointer;
}
.faq-q .chev{opacity:.75}
.faq-a{padding:0 1rem 1rem 1rem;color:hsl(var(--muted-foreground));max-height:0;overflow:hidden;transition: max-height .28s ease}

/* Rules */
.rules-list{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.rules-list li{display:flex;align-items:center;gap:.6rem}
.x{color:hsl(var(--destructive, 0 100% 50%));font-weight:800}
.tick{color:hsl(var(--primary));font-weight:800}

/* Footer */
.footer{padding:2rem 0;border-top:1px solid hsl(var(--border));margin-top:2rem}
.footer-inner{text-align:center;display:flex;flex-direction:column;gap:.6rem;align-items:center}

/* Small animations */
@keyframes glitch-text{
  0%,100%{text-shadow:0 0 10px hsl(var(--chaos-red)/0.24)}
  50%{text-shadow:0 0 18px hsl(var(--chaos-red)/0.35)}
}

a {
    color: hsl(var(--foreground));
    text-decoration: none;
}