:root{
  --graffiti-orange:#ec7a2b;
  --graffiti-orange-deep:#c2541a;
  --graffiti-orange-glow:#f59a4a;
  --ink-black:#1a1411;
  --discord-blue:#7289DA;
  --font-display:"Bungee",system-ui,sans-serif;
  --font-graffiti:"Permanent Marker",cursive;
  --font-body:"Space Grotesk",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--ink-black);color:#fff5e6;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.875rem;padding:.15rem .4rem;border-radius:.3rem;background:rgba(0,0,0,.6);color:var(--graffiti-orange-glow)}

.bg-graffiti{
  position:relative;min-height:100vh;overflow:hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(245,154,74,.55), transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(194,84,26,.5), transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(140,60,20,.4), transparent 60%),
    linear-gradient(135deg, var(--graffiti-orange-deep), var(--graffiti-orange) 60%, var(--graffiti-orange-glow));
}
.bg-graffiti::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.scribble{font-family:var(--font-graffiti);position:absolute;color:rgba(0,0,0,.15);user-select:none;pointer-events:none;line-height:1}
.scribble-1{left:-1rem;top:8rem;font-size:6rem;transform:rotate(-12deg)}
.scribble-2{right:.5rem;bottom:2.5rem;font-size:5rem;transform:rotate(6deg)}
@media(min-width:768px){.scribble-1{font-size:9rem}.scribble-2{font-size:8rem}}

.navbar{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.85);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.05)}
.nav-inner{max-width:72rem;margin:0 auto;padding:1rem 1.25rem;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:.5rem}
.logo-text{font-family:var(--font-display);font-size:1.5rem;color:var(--graffiti-orange);letter-spacing:-.02em;transition:color .2s}
.logo:hover .logo-text{color:var(--graffiti-orange-glow)}
.logo-star{font-family:var(--font-graffiti);font-size:1.25rem;color:rgba(255,255,255,.7);transform:rotate(-6deg);margin-left:-.25rem}
.nav-links.desktop{display:none;align-items:center;gap:.25rem}
@media(min-width:768px){.nav-links.desktop{display:flex}.menu-btn{display:none}}
.nav-link{padding:.5rem 1rem;border-radius:9999px;font-size:.875rem;font-weight:500;color:rgba(255,255,255,.85);transition:all .2s}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.1);transform:translateY(-2px)}
.nav-link.discord{color:var(--discord-blue);font-weight:600}
.nav-link.discord:hover{background:rgba(114,137,218,.15)}
.nav-sep{width:1px;height:1.5rem;background:rgba(255,255,255,.25);margin:0 .75rem}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:.5rem;background:rgba(255,255,255,.05);color:#fff;border:0;font-size:1.25rem;cursor:pointer}
.menu-btn:hover{background:rgba(255,255,255,.1)}
.mobile-menu{display:none;flex-direction:column;gap:.25rem;padding:.75rem 1.25rem;background:rgba(0,0,0,.95);border-top:1px solid rgba(255,255,255,.05)}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:.5rem .75rem;border-radius:.5rem;color:rgba(255,255,255,.85)}
.mobile-menu a:hover{background:rgba(255,255,255,.1)}
.mobile-menu .discord{color:var(--discord-blue);font-weight:600}
.mobile-menu .divider{height:1px;background:rgba(255,255,255,.15);margin:.25rem 0}

.main{position:relative;z-index:1;max-width:48rem;margin:0 auto;padding:5rem 1.25rem 6rem;text-align:center}
.badge{display:inline-block;padding:.375rem 1rem;border-radius:9999px;background:rgba(0,0,0,.7);color:var(--graffiti-orange-glow);font-size:.75rem;text-transform:uppercase;letter-spacing:.25em;font-weight:600;border:1px solid rgba(255,255,255,.1)}
.title{font-family:var(--font-display);margin-top:1.5rem;font-size:3rem;line-height:.95;color:#fff}
@media(min-width:768px){.title{font-size:4.5rem}}
@media(min-width:1024px){.title{font-size:6rem}}
.title-graffiti{font-family:var(--font-graffiti);color:var(--graffiti-orange-glow);display:inline-block;transform:rotate(-2deg)}
.drip-shadow{text-shadow:0 1px 0 #000,0 4px 0 #000,0 8px 24px rgba(0,0,0,.55),4px 4px 0 var(--ink-black)}
.intro{margin-top:2.5rem;display:flex;flex-direction:column;gap:1rem;font-size:1.125rem;color:rgba(255,255,255,.95);max-width:42rem;margin-left:auto;margin-right:auto}
@media(min-width:768px){.intro{font-size:1.25rem}}
.tag-underline{background-image:linear-gradient(90deg,var(--graffiti-orange) 0%,transparent 100%);background-repeat:no-repeat;background-position:0 100%;background-size:100% 4px;font-weight:700;color:#fff}
.tag-underline.white{color:#fff;font-size:.875rem}

.cta{display:inline-flex;align-items:center;gap:.5rem;margin-top:2rem;padding:.875rem 1.75rem;border-radius:9999px;font-weight:700;color:#fff;background:var(--discord-blue);box-shadow:0 10px 30px rgba(0,0,0,.4);transition:all .2s}
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,0,0,.5)}

.spray-card{background:rgba(28,22,18,.78);backdrop-filter:blur(10px);border:1px solid rgba(236,122,43,.35);border-radius:1.5rem;box-shadow:0 20px 50px -10px rgba(0,0,0,.6),inset 0 1px 0 rgba(245,154,74,.2);padding:1.75rem;text-align:left}
@media(min-width:768px){.spray-card{padding:2.25rem}}
.spray-card.small{padding:1.5rem;border-radius:1rem}
.fun-facts{margin-top:4rem}
.section-head{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}
.section-title{font-family:var(--font-graffiti);font-size:1.875rem;color:var(--graffiti-orange);transform:rotate(-3deg)}
.section-rule{flex:1;height:1px;background:linear-gradient(90deg,rgba(236,122,43,.6),transparent)}
.facts{list-style:none;display:flex;flex-direction:column;gap:.75rem;color:rgba(255,255,255,.9)}
.facts li{display:flex;gap:.75rem}
.num{font-family:var(--font-display);color:var(--graffiti-orange-glow);flex-shrink:0}
.facts li>span:last-child{padding-top:.125rem}

.stack{margin-top:6rem;display:grid;gap:1.5rem;text-align:left}
.card-title{font-family:var(--font-display);font-size:1.25rem;color:var(--graffiti-orange);margin-bottom:.5rem}
.card-text{color:rgba(255,255,255,.8);font-size:.875rem;margin-bottom:1rem}
.discord-link{font-size:.875rem;font-weight:600;color:var(--discord-blue)}

.footer{margin-top:4rem;font-size:.75rem;color:rgba(255,255,255,.7);text-align:center}
.footer-graffiti{font-family:var(--font-graffiti);font-size:1rem;margin-right:.5rem}