:root{
  --pink:#C83068;--orange:#E87830;--teal:#48BCAC;
  --red:#D44028;--yellow:#F5BE18;--purple:#2D1858;
  --purple-dark:#1a0d38;--purple-deeper:#0e0520;
  --off-white:#FAFAF8;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Barlow',sans-serif;background:#fff;color:var(--purple);overflow-x:hidden;}

body::after{
  content:'';position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:9999;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;mix-blend-mode:multiply;
}

/* ---- HERO ---- */
.hero{
  position:relative;min-height:100vh;background:var(--purple);
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  padding:80px 24px 100px;
}
.band{position:absolute;width:145%;left:-22%;pointer-events:none;}
.band-1{height:230px;background:var(--pink);top:0%;transform:rotate(-18deg);opacity:1;}
.band-2{height:150px;background:var(--orange);top:30%;transform:rotate(-18deg);opacity:.95;}
.band-3{height:190px;background:var(--teal);bottom:2%;transform:rotate(-18deg);opacity:.9;}
.halftone{
  position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:2;
  background-image:radial-gradient(circle,rgba(0,0,0,.28) 1.5px,transparent 1.5px);
  background-size:10px 10px;
}
.vignette{
  position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:3;
  box-shadow:inset 0 0 180px rgba(0,0,0,.7);
}
.hero-content{position:relative;z-index:4;text-align:center;max-width:980px;width:100%;}
.hero-eyebrow{
  font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.35em;text-transform:uppercase;color:var(--yellow);margin-bottom:14px;
  animation:fadeUp .6s ease both;animation-delay:.1s;
}
.hero-title{
  font-family:'Bangers',cursive;font-size:clamp(76px,19vw,210px);
  letter-spacing:.04em;line-height:.86;text-transform:uppercase;display:block;
  background:linear-gradient(145deg,#F5BE18 0%,#E87830 42%,#C83068 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:
    drop-shadow(6px 6px 0 rgba(45,24,88,.9))
    drop-shadow(-6px -6px 0 rgba(45,24,88,.9))
    drop-shadow(6px -6px 0 rgba(45,24,88,.9))
    drop-shadow(-6px 6px 0 rgba(45,24,88,.9))
    drop-shadow(0 6px 0 rgba(45,24,88,.9))
    drop-shadow(6px 0 0 rgba(45,24,88,.9))
    drop-shadow(0 -6px 0 rgba(45,24,88,.9))
    drop-shadow(-6px 0 0 rgba(45,24,88,.9));
  animation:fadeUp .7s ease both;animation-delay:.2s;
}
.hero-tagline{
  font-family:'Bangers',cursive;font-size:clamp(18px,3.8vw,40px);
  letter-spacing:.22em;color:var(--yellow);margin:18px 0 38px;
  text-transform:uppercase;animation:fadeUp .6s ease both;animation-delay:.45s;
}
.hero-meta{
  display:flex;align-items:center;justify-content:center;gap:14px;
  flex-wrap:wrap;margin-bottom:42px;
  animation:fadeUp .6s ease both;animation-delay:.6s;
}
.meta-pill{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.18em;text-transform:uppercase;padding:9px 20px;
  border:2.5px solid rgba(255,255,255,.5);color:#fff;white-space:nowrap;
}
.meta-pill.hot{background:var(--yellow);color:var(--purple);border-color:var(--yellow);}
.hero-btn{
  display:inline-block;font-family:'Bangers',cursive;font-size:clamp(22px,3.5vw,34px);
  letter-spacing:.1em;text-decoration:none;background:var(--yellow);color:var(--purple);
  padding:20px 58px;border:4px solid var(--purple);
  box-shadow:7px 7px 0 var(--purple);text-transform:uppercase;
  transition:transform .15s ease,box-shadow .15s ease;cursor:pointer;
  animation:fadeUp .6s ease both;animation-delay:.75s;
}
.hero-btn:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--purple);}
.hero-btn:active{transform:translate(4px,4px);box-shadow:3px 3px 0 var(--purple);}
.scroll-arrow{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  z-index:4;display:flex;flex-direction:column;align-items:center;gap:6px;
  opacity:.4;animation:bob 2s ease-in-out infinite;
}
.scroll-arrow span{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:#fff;}

/* ---- VIBE (white) ---- */
.vibe{background:#fff;padding:110px 24px;position:relative;overflow:hidden;}
.vibe-stripe{
  position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--pink),var(--orange),var(--yellow),var(--teal));
}
.inner{max-width:880px;margin:0 auto;}
.section-label{
  font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.4em;text-transform:uppercase;text-align:center;color:var(--teal);margin-bottom:20px;
}
.vibe-headline{
  font-family:'Bangers',cursive;font-size:clamp(44px,9vw,100px);
  letter-spacing:.05em;line-height:1;text-align:center;color:var(--purple);margin-bottom:28px;
}
.vibe-headline em{color:var(--pink);font-style:normal;}
.vibe-body{
  font-family:'Barlow Condensed',sans-serif;font-size:clamp(18px,2.5vw,23px);
  font-weight:400;line-height:1.55;color:rgba(45,24,88,.65);
  text-align:center;max-width:600px;margin:0 auto 56px;
}
.vibe-tags{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
.vtag{
  font-family:'Bangers',cursive;font-size:clamp(18px,2.8vw,26px);
  letter-spacing:.12em;padding:11px 26px;text-transform:uppercase;border:3px solid;
}
.vtag:nth-child(1){color:var(--purple);background:var(--yellow);border-color:var(--yellow);}
.vtag:nth-child(2){color:#fff;background:var(--pink);border-color:var(--pink);}
.vtag:nth-child(3){color:var(--purple);background:var(--teal);border-color:var(--teal);}
.vtag:nth-child(4){color:#fff;background:var(--orange);border-color:var(--orange);}

/* ---- WHAT TO EXPECT (off-white) ---- */
.expect{background:var(--off-white);padding:110px 24px;position:relative;overflow:hidden;}
.dots-bg{
  position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(45,24,88,.07) 1px,transparent 1px);
  background-size:22px 22px;
}
.section-title{
  font-family:'Bangers',cursive;font-size:clamp(38px,7vw,74px);
  letter-spacing:.07em;text-align:center;margin-bottom:60px;color:var(--purple);position:relative;
}
.section-title span{display:inline-block;position:relative;}
.section-title span::after{
  content:'';position:absolute;bottom:-8px;left:0;right:0;height:4px;background:var(--orange);
}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;position:relative;}
.pillar{
  background:#fff;border:2px solid rgba(45,24,88,.1);overflow:hidden;
  box-shadow:4px 4px 0 rgba(45,24,88,.08);
  transition:transform .2s ease,box-shadow .2s ease;
}
.pillar:hover{transform:translateY(-5px);box-shadow:4px 8px 0 rgba(45,24,88,.14);}
.pillar-top{padding:22px 26px;position:relative;}
.pillar:nth-child(1) .pillar-top{background:var(--pink);}
.pillar:nth-child(2) .pillar-top{background:var(--teal);}
.pillar:nth-child(3) .pillar-top{background:var(--orange);}
.pillar-num{
  font-family:'Bangers',cursive;font-size:70px;letter-spacing:.03em;
  color:rgba(255,255,255,.22);position:absolute;right:14px;top:4px;line-height:1;
}
.pillar-name{
  font-family:'Bangers',cursive;font-size:28px;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;position:relative;z-index:1;
}
.pillar-body{padding:26px;}
.pillar-body p{
  font-family:'Barlow Condensed',sans-serif;font-size:17px;
  line-height:1.6;color:rgba(45,24,88,.68);margin-bottom:18px;
}
.tags{display:flex;flex-wrap:wrap;gap:8px;}
.tag{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;padding:4px 10px;
  background:rgba(45,24,88,.07);color:rgba(45,24,88,.5);
}

/* ---- PLAY YOUR PART (white) ---- */
.games{background:#fff;padding:110px 24px;position:relative;overflow:hidden;}
.games-accent-band{
  position:absolute;width:145%;height:220px;background:var(--yellow);
  opacity:.07;left:-22%;top:50%;transform:translateY(-50%) rotate(-18deg);pointer-events:none;
}
.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;position:relative;}
.gcard{
  position:relative;overflow:hidden;border:3px solid;
  padding:36px 28px 32px;background:#fff;
  transition:transform .2s ease,box-shadow .2s ease;
}
.gcard:hover{transform:translate(-4px,-4px);}
.gcard:nth-child(1){border-color:var(--yellow);}
.gcard:nth-child(2){border-color:var(--pink);}
.gcard:nth-child(3){border-color:var(--teal);}
.gcard:nth-child(1):hover{box-shadow:6px 6px 0 var(--yellow);}
.gcard:nth-child(2):hover{box-shadow:6px 6px 0 var(--pink);}
.gcard:nth-child(3):hover{box-shadow:6px 6px 0 var(--teal);}
.gcard::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;}
.gcard:nth-child(1)::before{background:var(--yellow);}
.gcard:nth-child(2)::before{background:var(--pink);}
.gcard:nth-child(3)::before{background:var(--teal);}
.gicon{width:52px;height:52px;margin-bottom:20px;display:flex;align-items:center;justify-content:center;}
.gcard:nth-child(1) .gicon{color:var(--yellow);}
.gcard:nth-child(2) .gicon{color:var(--pink);}
.gcard:nth-child(3) .gicon{color:var(--teal);}
.gtitle{
  font-family:'Bangers',cursive;font-size:32px;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:12px;color:var(--purple);
}
.gdesc{
  font-family:'Barlow Condensed',sans-serif;font-size:17px;line-height:1.6;
  color:rgba(45,24,88,.65);margin-bottom:22px;
}
.gwhy{
  font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;padding:10px 16px;
  border-left:3px solid;font-style:italic;color:rgba(45,24,88,.5);
}
.gcard:nth-child(1) .gwhy{border-color:var(--yellow);background:rgba(245,190,24,.09);}
.gcard:nth-child(2) .gwhy{border-color:var(--pink);background:rgba(200,48,104,.07);}
.gcard:nth-child(3) .gwhy{border-color:var(--teal);background:rgba(72,188,172,.08);}

/* ---- FINALE (dark close) ---- */
.finale{background:var(--purple);padding:130px 24px 120px;position:relative;overflow:hidden;}
.fn-band{position:absolute;width:145%;left:-22%;pointer-events:none;}
.fn-band-1{height:100px;background:var(--pink);top:16%;transform:rotate(-18deg);opacity:.25;}
.fn-band-2{height:70px;background:var(--orange);bottom:20%;transform:rotate(-18deg);opacity:.22;}
.fn-dots{
  position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:14px 14px;
}
.finale-content{position:relative;z-index:2;text-align:center;max-width:700px;margin:0 auto;}
.fn-eyebrow{
  font-family:'Bangers',cursive;font-size:clamp(18px,3vw,26px);
  letter-spacing:.3em;color:var(--teal);text-transform:uppercase;margin-bottom:18px;
}
.fn-title{
  font-family:'Bangers',cursive;font-size:clamp(52px,12vw,120px);
  letter-spacing:.04em;line-height:.88;margin-bottom:48px;
  background:linear-gradient(140deg,var(--yellow),var(--orange));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:
    drop-shadow(4px 4px 0 rgba(45,24,88,.8))
    drop-shadow(-4px -4px 0 rgba(45,24,88,.8))
    drop-shadow(4px -4px 0 rgba(45,24,88,.8))
    drop-shadow(-4px 4px 0 rgba(45,24,88,.8));
}
.event-block{display:flex;flex-direction:column;gap:10px;margin-bottom:52px;}
.erow{
  font-family:'Barlow Condensed',sans-serif;font-size:clamp(18px,2.5vw,24px);
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);
}
.erow strong{color:#fff;}
.fn-btn{
  display:inline-block;font-family:'Bangers',cursive;
  font-size:clamp(22px,4vw,36px);letter-spacing:.1em;text-decoration:none;
  background:var(--pink);color:#fff;padding:22px 64px;
  border:4px solid #fff;box-shadow:8px 8px 0 rgba(255,255,255,.2);
  text-transform:uppercase;transition:transform .15s ease,box-shadow .15s ease;cursor:pointer;
}
.fn-btn:hover{transform:translate(-4px,-4px);box-shadow:12px 12px 0 rgba(255,255,255,.2);}
.fn-btn:active{transform:translate(4px,4px);box-shadow:4px 4px 0 rgba(255,255,255,.2);}
.fn-note{
  margin-top:18px;font-family:'Barlow Condensed',sans-serif;font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.3);
}

/* ---- FOOTER ---- */
footer{
  background:var(--purple-deeper);padding:36px 24px;text-align:center;
  border-top:1px solid rgba(255,255,255,.07);
}
.footer-tag{font-family:'Bangers',cursive;font-size:22px;letter-spacing:.18em;color:var(--pink);}
.footer-sub{
  font-family:'Barlow Condensed',sans-serif;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.22);margin-top:8px;
}
.footer-wa{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.15em;text-transform:uppercase;text-decoration:none;
  color:#25D366;border-bottom:1px solid rgba(37,211,102,.35);
  padding-bottom:2px;transition:border-color .15s,color .15s;
}
.footer-wa:hover{color:#1aad55;border-color:#1aad55;}

/* ---- ANIMATIONS ---- */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}
@keyframes bob{
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%{transform:translateX(-50%) translateY(7px);}
}

/* ---- RESPONSIVE ---- */
@media(max-width:640px){
  .hero-meta{gap:10px;}
  .meta-pill{font-size:12px;padding:7px 14px;}
  .hero-btn{padding:18px 36px;}
  .pillars,.games-grid{grid-template-columns:1fr;}
  .vibe-tags{gap:10px;}
  .vtag{padding:9px 20px;}
  .fn-btn{padding:18px 40px;}
}