:root{
  --bg:#000;
  --panel:#0d0d0d;
  --panel-2:#151515;
  --ink:#eee;
  --muted:#a8a8a8;
  --neon1:#9f6;
  --neon2:#c3f;
  --accent:#603;
  --border:#402;
  --card:#1e1e1e;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial;
  line-height:1.55;
  text-rendering: optimizeLegibility;
  overflow-x:hidden;
}

/* ---------- Global Grunge Layers ---------- */
body::before, body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
}
/* film grain */
body::before{
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0, rgba(255,255,255,.02) 2px, transparent 3px, transparent 4px),
    radial-gradient(100% 100% at 0% 50%, rgba(159,255,102,.03), transparent),
    radial-gradient(100% 100% at 100% 0%, rgba(195,63,255,.03), transparent);
  mix-blend-mode:screen;
}
/* vignette */
body::after{
  background: radial-gradient(120% 120% at 50% 50%, transparent 60%, rgba(0,0,0,.6) 100%);
}

/* ---------- Header / Nav ---------- */
header.site{
  background:var(--panel);
  padding:28px 16px 12px;
  text-align:center;
  position:sticky;
  top:0;
  z-index:1000;
  border-bottom:2px solid var(--border);
  box-shadow:0 0 24px rgba(159,255,102,0.08);
}
.brand{
  margin:0;
  font-family:'Eater', cursive;
  font-size: clamp(32px, 4vw, 64px);
  color:var(--neon1);
  text-shadow:2px 2px var(--accent), 0 0 12px rgba(195,63,255,.35);
  position:relative;
}
/* subtle glitch */
.brand.glitch{
  animation: glitch 2s infinite steps(20);
}
@keyframes glitch{
  0%,100%{ text-shadow:2px 2px var(--accent), 0 0 12px rgba(195,63,255,.35); transform: translate(0,0) }
  20%{ text-shadow:-2px 2px #236, 0 0 12px rgba(159,255,102,.25); transform: translate(-1px,0.5px) }
  40%{ text-shadow:2px -2px #632, 0 0 12px rgba(195,63,255,.25); transform: translate(1px,-0.5px) }
  60%{ text-shadow:-2px -2px #326, 0 0 12px rgba(159,255,102,.25); transform: translate(-1px,-0.5px) }
  80%{ text-shadow:2px 2px var(--accent), 0 0 12px rgba(195,63,255,.35); transform: translate(0.5px,0.5px) }
}

.tag{
  margin:6px 0 0 0;
  color:var(--neon2);
  font-style:italic;
  text-shadow:0 0 6px var(--neon2), 0 0 10px var(--neon1);
}

.marquee{
  color:#ddd; font-size:.95rem; letter-spacing:.3px;
  overflow:hidden; white-space:nowrap;
  border-top:1px solid #222; border-bottom:1px solid #222;
  background:#101010;
}
.marquee span{
  display:inline-block;
  padding:6px 0;
  animation: crawl 18s linear infinite;
}
@keyframes crawl{ from{ transform: translateX(100%) } to{ transform: translateX(-100%) } }

nav.site{
  background:#171717cc;
  backdrop-filter: blur(2px);
  display:flex;
  gap:20px;
  justify-content:center;
  padding:12px 16px;
  border-bottom:1px solid #222;
  position:sticky;
  top:118px;
  z-index:999;
}
nav.site a{
  color:var(--neon1);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.3px;
}
nav.site a:hover{ color:var(--neon2); text-shadow:0 0 10px var(--neon2)}

main{ padding:40px 16px; max-width:1080px; margin: 0 auto; position:relative; z-index:1 }
.section{ margin: 0 0 48px 0; }

/* ---------- Cards & Feature ---------- */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:20px;
}
.card{
  background:var(--card);
  border:2px solid var(--accent);
  padding:18px;
  position:relative;
  overflow:hidden;
  min-height:160px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.card:hover{
  transform: translateY(-2px);
  background:#2a2a2a;
  box-shadow:0 0 18px rgba(195,63,255,.25);
}
.card h3{ margin-top:0 }

.poster{
  border-image: repeating-linear-gradient(45deg, #c3f 0 6px, #9f6 6px 12px, #603 12px 18px) 8;
  border-width:3px;
}

.feature{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:22px;
}
@media (max-width: 820px){
  .feature{ grid-template-columns: 1fr; }
}

.feature .video-placeholder,
.thumb { 
  background:
    repeating-linear-gradient(90deg, #0f0f0f 0 2px, #131313 2px 4px),
    radial-gradient(60% 80% at 50% 30%, rgba(159,255,102,.06), transparent 60%),
    #0f0f0f;
  border:2px dashed var(--border);
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  letter-spacing:1px;
  text-transform:uppercase;
}

/* stickers */
.sticker{
  position:absolute; top:8px; right:-12px;
  transform: rotate(8deg);
  background:#000; color:#fff; border:2px solid var(--neon2);
  padding:6px 10px; font-weight:900; letter-spacing:1px;
  box-shadow:0 2px 0 #000, 0 0 10px rgba(195,63,255,.3);
}

.cta{
  display:inline-block;
  padding:10px 16px;
  border:2px solid var(--neon2);
  color:var(--neon2);
  text-decoration:none;
  font-weight:800;
  margin-top:12px;
}
.cta:hover{ background:rgba(195,63,255,.08) }

footer.site{
  background:var(--panel);
  color:#777;
  text-align:center;
  padding:16px;
  border-top:2px solid var(--border);
}

/* Patreon censor bar */
.patreon-bar{
  position:absolute;
  top:44%;
  left:-10%;
  width:120%;
  transform: rotate(-14deg);
  background:#000;
  color:#fff;
  border:3px solid var(--neon2);
  text-align:center;
  padding:6px 8px;
  font-weight:900;
  letter-spacing:2px;
  text-shadow:0 0 6px #000;
}

/* VHS hover flicker */
.vhs{ position:relative; isolation:isolate; }
.vhs::after{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 1px, transparent 2px, transparent 4px);
  opacity:.0; pointer-events:none; mix-blend-mode:screen;
  transition: opacity .12s ease;
}
.vhs:hover::after{ opacity:.5; }

/* Form (Curve Cult) */
form.inline{ display:flex; gap:10px; flex-wrap:wrap; }
input[type=email]{
  background:#0f0f0f;
  border:2px solid var(--border);
  color:var(--ink);
  padding:10px 12px;
  min-width:260px;
}
button{
  background:transparent;
  border:2px solid var(--neon1);
  color:var(--neon1);
  padding:10px 16px;
  font-weight:800;
  cursor:pointer;
}
button:hover{ background: rgba(159,255,102,.09) }
.small{ color:var(--muted); font-size:.9rem }

/* ---------- Secret: Curve Cult Unlocked banner ---------- */
.cult-banner{
  display:none; position:fixed; left:50%; transform:translateX(-50%);
  bottom:24px; z-index:9999; background:#000; border:3px solid #9f6;
  color:#9f6; padding:10px 18px; font-weight:900; box-shadow:0 0 20px rgba(159,255,102,.35);
}
body.cult .cult-banner{ display:block; }