:root{
  --bg: rgb(214,226,211);
  --text: rgb(109,127,108);
  --band: rgba(0,0,0,.12);
  --card: #ffffff;
  --shadow: 0 14px 40px rgba(0,0,0,.10);
  --radius: 18px;
  --green-strong: rgb(73, 99, 71);
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Fredoka',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
.container{max-width:1080px;margin:0 auto;padding:20px}

.fade-up{opacity:1;transform:none}
.js .fade-up{opacity:0;transform:translateY(16px)}
.js .fade-up.show{opacity:1;transform:translateY(0);transition:opacity .6s ease,transform .6s ease}
@media(prefers-reduced-motion:reduce){.js .fade-up,.js .fade-up.show{opacity:1;transform:none;transition:none}}

/* NAV (closer & underline animation) */
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2px;margin-top:6px}
.nav a{padding:12px 22px;border-radius:14px;position:relative;text-align:center;color:var(--text)}
.nav a::after{content:"";position:absolute;left:20px;right:20px;bottom:6px;height:3px;background:var(--green-strong);transform:scaleX(0);transform-origin:left;transition:transform .5s ease}
.nav a:hover::after{transform:scaleX(1)}
.nav .center{justify-self:center;font-size:clamp(24px,5vw,40px);font-weight:800;background:rgba(255,255,255,.6);box-shadow:var(--shadow);border-radius:18px;padding:10px 28px}
.nav .center::after{height:4px;bottom:4px}
.nav .side{justify-self:center;min-width:185px;font-size:24px;font-weight:700}
.nav .left{margin-right:-116px}.nav .right{margin-left:-116px}

/* HERO */
.hero{margin:30px 0 10px;display:grid;gap:8px;justify-items:center;text-align:center}
.hero img{width:min(210px,52vw);height:auto;border-radius:16px;box-shadow:0 12px 34px rgba(255,255,255,.35),0 6px 18px rgba(0,0,0,.08)}
.hero h1{margin:6px 0 0;font-size:clamp(26px,5.6vw,40px)}

/* Bands */
.band-wrap{position:relative;margin-top:50px}
.band{position:relative;z-index:1;background:var(--band);border-radius:18px;padding:34px 28px 28px;box-shadow:0 1px 0 rgba(109,127,108,.35),var(--shadow);overflow:hidden}
.band h2{margin:0 0 6px;color:var(--text);font-size:clamp(32px,6.75vw,49px);text-align:center}
.band .sub{margin:0 0 6px;color:#7b8a79;text-align:center;font-size:clamp(21px,3.64vw,26px);overflow:hidden;--gap: 86px;padding-bottom:var(--gap)}
.stage{position:relative;height:clamp(230px,28vw,310px);margin-top:2px} /* Our Games slightly shorter */
.carousel.events .stage{height:clamp(242px,29.2vw,320px);margin-top:10px}    /* Events taller */
.slide{position:absolute;left:50%;top:0;width:50%;max-width:660px;transform:translateX(-50%);transition:transform .65s ease,opacity .65s ease}
.carousel.events .slide{width:58%} /* Events a bit wider */
.card{background:var(--card);border-radius:16px;box-shadow:0 1px 0 rgba(109,127,108,.35),0 10px 24px rgba(0,0,0,.12);padding:12px;transition:transform .2s ease}
.pos-center .card{box-shadow:0 18px 32px rgba(0,0,0,.22), 0 2px 0 rgba(255,255,255,.65), 0 0 0 1px rgba(109,127,108,.15), 0 0 18px rgba(255,255,255,.18)}
.pos-center .card:hover{transform:scale(1.03)}
.thumb{border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:#cfcfcf;box-shadow:inset 0 6px 16px rgba(255,255,255,.45)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.meta{text-align:center}
.meta h3{margin:8px 0 6px 0;font-size:22px;font-weight:700;color:var(--text)}
.badge{display:inline-block;padding:5px 9px;border-radius:10px;background:#111;color:#fff;font-weight:600;opacity:.9}

/* positions (far push so edges never peek) */
.pos-off-left{transform:translateX(calc(-50% - 320%)) scale(.55);opacity:0;pointer-events:none}
.pos-left{transform:translateX(calc(-50% - 110%)) scale(.88);opacity:.45}
.pos-center{transform:translateX(-50%) scale(1);opacity:1}
.pos-right{transform:translateX(calc(-50% + 110%)) scale(.88);opacity:.45}
.pos-off-right{transform:translateX(calc(-50% + 320%)) scale(.55);opacity:0;pointer-events:none}

/* arrows */
.arrow{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:999px;border:0;cursor:pointer;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.18),0 1px 0 rgba(109,127,108,.28);transition:transform .15s ease,box-shadow .15s ease;z-index:3}
.arrow:hover{transform:translateY(-50%) scale(1.08)}
.arrow.prev{left:10px}.arrow.next{right:10px}

/* CTA slot centered between stage bottom and band bottom */
.cta-slot{position:absolute;left:0;right:0;bottom:calc(var(--gap)/2);display:flex;align-items:center;justify-content:center;z-index:4}

/* Neon buttons — symmetric glow (no downward tail) */
@font-face{font-family:'Fredoka One Fallback';src:local('Fredoka One')}
.btn-neon{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;color:#fff;text-decoration:none;transition:transform .15s ease, box-shadow .15s ease;font-family:'Fredoka One','Fredoka One Fallback','Fredoka',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:18px}
.btn-neon img{width:22px;height:22px}
.btn-neon:hover{transform:scale(1.08)}
.btn-neon.blue{background:linear-gradient(135deg,#5865F2,#6C7BFF);box-shadow:0 0 16px rgba(88,101,242,.50),0 0 28px rgba(88,101,242,.36)}
.btn-neon.green{background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 0 16px rgba(34,197,94,.50),0 0 28px rgba(34,197,94,.36)}
.btn-neon.black{background:linear-gradient(135deg,#000,#222);box-shadow:0 0 16px rgba(0,0,0,.60),0 0 28px rgba(0,0,0,.50)}

/* Community */
.callout{margin:46px 0;border-radius:22px;background:rgba(0,0,0,.12);box-shadow:0 1px 0 rgba(109,127,108,.35),var(--shadow);padding:28px;text-align:center}
.callout h3{margin:0 0 6px;color:var(--text);font-size:clamp(24px,5vw,38px)}
.callout .muted{color:#7b8a79;margin:0 0 18px}
.actions{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}

.footer{margin:44px 0;font-size:14px;opacity:.9;text-align:center}