/* ===================== TOKENS — from the crest ===================== */
:root{
  --bg:#06122b;            /* deep court navy */
  --bg-2:#0a1c3f;
  --panel:rgba(255,255,255,.045);
  --panel-line:rgba(146,190,255,.14);
  --ink:#eef4ff;
  --ink-soft:#9fb2d4;
  --ink-dim:#5f7196;
  --blue:#1b74e0;          /* paddle royal blue */
  --blue-2:#4fa0ff;
  --blue-deep:#0d3f8f;
  --lime:#cbe66e;          /* crest lime */
  --lime-2:#e2f59a;
  --ball:#efeee6;          /* wiffle ball cream */
  --radius:20px;
  --maxw:1160px;
  --ease:cubic-bezier(.16,.84,.44,1);
  --font-display:"Anton",system-ui,sans-serif;
  --font-alt:"Bebas Neue",system-ui,sans-serif;
  --font-body:"Manrope",system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
section{position:relative;z-index:2}

/* ===================== BACKGROUND ===================== */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:
  radial-gradient(1200px 700px at 80% -10%, #123063 0%, transparent 60%),
  radial-gradient(900px 600px at 0% 25%, #0d2a55 0%, transparent 55%),
  linear-gradient(180deg,#06122b,#040c1e);}
/* court lines */
.bg__court{position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(rgba(146,190,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(146,190,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 40%,transparent 100%);}
.bg__orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:float 16s var(--ease) infinite alternate;}
.bg__orb--1{width:540px;height:540px;top:-140px;right:-110px;background:radial-gradient(circle,#1b74e0,transparent 65%);}
.bg__orb--2{width:460px;height:460px;bottom:-140px;left:-120px;background:radial-gradient(circle,#0d3f8f,transparent 65%);animation-delay:-6s;}
.bg__orb--3{width:360px;height:360px;top:38%;left:56%;background:radial-gradient(circle,#cbe66e,transparent 65%);opacity:.14;animation-delay:-3s;}
.bg__noise{position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
@keyframes float{to{transform:translate3d(40px,-30px,0) scale(1.08)}}

/* ===================== UNVEIL CURTAIN ===================== */
.unveil{position:fixed;inset:0;z-index:100;background:linear-gradient(160deg,#0d3f8f,#06122b 70%);display:grid;place-items:center;transition:opacity .8s ease,visibility .8s;}
.unveil.done{opacity:0;visibility:hidden}
.unveil__inner{text-align:center;padding:0 20px}
.unveil__kicker{font-family:var(--font-alt);letter-spacing:6px;color:var(--lime);font-size:15px;margin-bottom:10px}
.unveil__kicker--sub{margin:22px 0 0;color:var(--ink-soft)}
.unveil__title{font-family:var(--font-display);font-size:clamp(38px,9vw,84px);color:var(--ink);letter-spacing:0;animation:pulse 1.5s ease-in-out infinite}
.unveil__bar{width:220px;height:3px;background:rgba(255,255,255,.12);border-radius:3px;margin:26px auto 0;overflow:hidden}
.unveil__bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue-2),var(--lime));animation:load 2s var(--ease) forwards}
@keyframes load{to{width:100%}}
@keyframes pulse{50%{opacity:.6}}

/* ===================== CONFETTI ===================== */
.confetti{position:fixed;inset:0;z-index:90;pointer-events:none}

/* ===================== NAV ===================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(18px,5vw,48px);transition:background .4s,backdrop-filter .4s,padding .4s;}
.nav.scrolled{background:rgba(6,18,43,.75);backdrop-filter:blur(14px);border-bottom:1px solid var(--panel-line);padding-top:10px;padding-bottom:10px}
.nav__brand{display:flex;align-items:center;gap:12px}
.nav__logo{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));transition:filter .7s ease}
/* keep every crest sealed until the ceremony */
body.sealed .nav__logo,body.sealed .footer__logo{filter:brightness(.07) saturate(0) drop-shadow(0 0 10px rgba(79,160,255,.25))}
.nav__name{font-weight:800;font-size:14px;letter-spacing:.5px;color:var(--ink)}
.nav__links{display:flex;align-items:center;gap:28px}
.nav__links a{font-size:14px;font-weight:600;color:var(--ink-soft);transition:color .25s}
.nav__links a:hover{color:var(--ink)}
.nav__cta{padding:9px 18px;border-radius:999px;background:linear-gradient(120deg,var(--lime),#b8d94f);color:#0a1c33!important;font-weight:800!important}
.nav__cta:hover{filter:brightness(1.06)}
@media(max-width:820px){.nav__name{display:none}.nav__links a:not(.nav__cta){display:none}}

/* ===================== HERO ===================== */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:110px clamp(18px,5vw,48px) 60px;text-align:center;overflow:hidden}
.hero__ticker{position:absolute;top:84px;left:0;right:0;overflow:hidden;opacity:.14;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker__track{display:flex;white-space:nowrap;animation:ticker 30s linear infinite;font-family:var(--font-display);font-size:52px;color:var(--ink)}
.ticker__track span{padding-right:20px}
@keyframes ticker{to{transform:translateX(-50%)}}

.hero__inner{max-width:820px;width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}
.hero__eyebrow{font-family:var(--font-alt);letter-spacing:5px;color:var(--lime);font-size:14px}

/* Emblem — the real crest */
.hero__emblem{position:relative;width:min(400px,82vw);margin:8px auto 6px;display:grid;place-items:center}
@media(max-height:940px){.hero__emblem{width:min(330px,78vw)}}
@media(max-height:820px){.hero__emblem{width:min(285px,72vw)}}
.hero__logo{position:relative;z-index:3;width:100%;height:auto;
  filter:drop-shadow(0 30px 60px rgba(3,10,26,.75)) drop-shadow(0 0 40px rgba(27,116,224,.35));
  transition:filter .7s ease;}
/* sealed state — pure silhouette, shape teased, details hidden */
.hero__logo.veiled{
  filter:brightness(.04) saturate(0) contrast(1.15)
    drop-shadow(0 0 26px rgba(79,160,255,.30)) drop-shadow(0 20px 50px rgba(3,10,26,.8));
  animation:veilBob 5s ease-in-out infinite;}
@keyframes veilBob{50%{transform:translateY(-8px)}}
/* heartbeat pulses during the drumroll */
.hero__logo.veiled.beat{animation:veilBeat .52s ease-in-out infinite}
@keyframes veilBeat{
  0%,100%{transform:scale(1);filter:brightness(.04) saturate(0) contrast(1.15) drop-shadow(0 0 22px rgba(79,160,255,.25))}
  50%{transform:scale(1.035);filter:brightness(.10) saturate(0) contrast(1.15) drop-shadow(0 0 60px rgba(203,230,110,.5))}
}
/* the burst into color */
.hero__logo.pop{animation:logoPop 1s var(--ease) forwards}
@keyframes logoPop{
  0%{transform:scale(.92)}
  55%{transform:scale(1.07) rotate(1.2deg)}
  100%{transform:scale(1) rotate(0)}
}
/* sheen sweeping across the silhouette, clipped to the crest shape */
.hero__sheen{position:absolute;inset:0;z-index:4;pointer-events:none;
  -webkit-mask-image:url("assets/sss-logo.png");mask-image:url("assets/sss-logo.png");
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  background:linear-gradient(115deg,transparent 38%,rgba(203,230,110,.16) 47%,rgba(255,255,255,.22) 50%,rgba(79,160,255,.16) 53%,transparent 62%);
  background-size:260% 100%;animation:sheen 3.2s ease-in-out infinite;transition:opacity .5s}
@keyframes sheen{0%{background-position:120% 0}100%{background-position:-140% 0}}
.hero__emblem.revealed .hero__sheen{opacity:0;animation:none}
/* shockwave rings */
.shock{position:absolute;inset:0;z-index:2;pointer-events:none;display:grid;place-items:center}
.shock span{position:absolute;width:52%;aspect-ratio:1;border-radius:50%;opacity:0;
  border:2px solid rgba(203,230,110,.75)}
.shock span:nth-child(2){border-color:rgba(79,160,255,.65)}
.shock span:nth-child(3){border-color:rgba(239,238,230,.5)}
.shock.go span{animation:ringOut 1s var(--ease) forwards}
.shock.go span:nth-child(2){animation-delay:.14s}
.shock.go span:nth-child(3){animation-delay:.28s}
@keyframes ringOut{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.6)}}
/* stadium beams */
.beam{position:absolute;top:-20%;width:16vw;height:150vh;z-index:1;opacity:0;pointer-events:none;filter:blur(10px);
  background:linear-gradient(rgba(226,245,154,.16),rgba(79,160,255,.05) 60%,transparent)}
.beam--l{left:6%;transform-origin:top center;transform:rotate(-38deg)}
.beam--r{right:6%;transform-origin:top center;transform:rotate(38deg)}
.hero.ceremony .beam--l{animation:sweepL 2.3s ease-in-out forwards}
.hero.ceremony .beam--r{animation:sweepR 2.3s ease-in-out forwards}
@keyframes sweepL{0%{opacity:0;transform:rotate(-38deg)}25%{opacity:1}100%{opacity:.8;transform:rotate(-9deg)}}
@keyframes sweepR{0%{opacity:0;transform:rotate(38deg)}25%{opacity:1}100%{opacity:.8;transform:rotate(9deg)}}
.hero.revealed .beam{transition:opacity 1.6s ease .8s;opacity:0}
/* flash */
.flash{position:fixed;inset:0;z-index:95;background:#fff;opacity:0;pointer-events:none}
.flash.go{animation:flashPop .5s ease-out forwards}
@keyframes flashPop{0%{opacity:.95}100%{opacity:0}}
/* the flying pickleball */
.fly-ball{position:fixed;top:0;left:0;z-index:60;width:clamp(54px,9vw,82px);aspect-ratio:1;
  pointer-events:none;will-change:transform;
  filter:drop-shadow(0 10px 22px rgba(3,10,26,.6)) drop-shadow(0 0 18px rgba(203,230,110,.45))}
.fly-ball svg{width:100%;height:100%;animation:ballSpin .45s linear infinite}
@keyframes ballSpin{to{transform:rotate(360deg)}}
/* impact shake */
.hero__inner.shake{animation:arenaShake .18s ease-in-out}
@keyframes arenaShake{25%{transform:translate(-5px,3px)}50%{transform:translate(4px,-3px)}75%{transform:translate(-3px,2px)}}
.hero__rays{position:absolute;inset:-22%;z-index:1;opacity:0;transition:opacity 1s ease .3s;
  background:conic-gradient(from 0deg,
    transparent 0 14deg, rgba(203,230,110,.10) 14deg 18deg,
    transparent 18deg 32deg, rgba(79,160,255,.12) 32deg 36deg,
    transparent 36deg 50deg, rgba(203,230,110,.10) 50deg 54deg,
    transparent 54deg 68deg, rgba(79,160,255,.12) 68deg 72deg,
    transparent 72deg 86deg, rgba(203,230,110,.10) 86deg 90deg,
    transparent 90deg 104deg, rgba(79,160,255,.12) 104deg 108deg,
    transparent 108deg 122deg, rgba(203,230,110,.10) 122deg 126deg,
    transparent 126deg 140deg, rgba(79,160,255,.12) 140deg 144deg,
    transparent 144deg 158deg, rgba(203,230,110,.10) 158deg 162deg,
    transparent 162deg 176deg, rgba(79,160,255,.12) 176deg 180deg,
    transparent 180deg 194deg, rgba(203,230,110,.10) 194deg 198deg,
    transparent 198deg 212deg, rgba(79,160,255,.12) 212deg 216deg,
    transparent 216deg 230deg, rgba(203,230,110,.10) 230deg 234deg,
    transparent 234deg 248deg, rgba(79,160,255,.12) 248deg 252deg,
    transparent 252deg 266deg, rgba(203,230,110,.10) 266deg 270deg,
    transparent 270deg 284deg, rgba(79,160,255,.12) 284deg 288deg,
    transparent 288deg 302deg, rgba(203,230,110,.10) 302deg 306deg,
    transparent 306deg 320deg, rgba(79,160,255,.12) 320deg 324deg,
    transparent 324deg 338deg, rgba(203,230,110,.10) 338deg 342deg,
    transparent 342deg 360deg);
  mask-image:radial-gradient(circle,#000 30%,transparent 68%);
  animation:spin 40s linear infinite;}
.hero__emblem.lit .hero__rays{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
.hero__ring{position:absolute;inset:6%;z-index:2;border-radius:32px;opacity:0;transition:opacity .8s ease .5s;
  box-shadow:0 0 0 1px rgba(203,230,110,.25), 0 0 80px 8px rgba(27,116,224,.25) inset}
.hero__emblem.lit .hero__ring{opacity:1}

/* ===== PRE-REVEAL BLOCK ===== */
.pre{display:flex;flex-direction:column;align-items:center;gap:10px;transition:opacity .45s ease,transform .45s ease}
.pre.out{opacity:0;transform:translateY(-14px);pointer-events:none}
.pre__title{font-family:var(--font-display);font-size:clamp(30px,6.5vw,58px);line-height:1;letter-spacing:0;color:var(--ink);margin-top:14px}
.pre__sub{color:var(--ink-soft);font-size:15px}
.unveil-btn{position:relative;margin-top:18px;padding:20px 46px;border:none;border-radius:999px;cursor:pointer;
  font-family:var(--font-alt);font-size:clamp(20px,4vw,26px);letter-spacing:6px;color:#0a1c33;
  background:linear-gradient(120deg,var(--lime-2),var(--lime) 45%,#b8d94f);
  box-shadow:0 18px 46px -12px rgba(203,230,110,.55);transition:.25s var(--ease)}
.unveil-btn:hover{transform:translateY(-2px) scale(1.02);filter:brightness(1.05)}
.unveil-btn:disabled{cursor:default;filter:saturate(.6) brightness(.85);transform:none}
.unveil-btn__ring{position:absolute;inset:-7px;border-radius:999px;border:2px solid rgba(203,230,110,.55);
  animation:btnPing 1.7s var(--ease) infinite;pointer-events:none}
@keyframes btnPing{0%{transform:scale(1);opacity:1}75%,100%{transform:scale(1.22);opacity:0}}
.unveil-btn:disabled .unveil-btn__ring{animation:none;opacity:0}

/* ===== POST-REVEAL BLOCK ===== */
.post{display:flex;flex-direction:column;align-items:center;gap:8px}
.reveal-post{opacity:0;transform:translateY(20px);transition:.8s var(--ease)}
.reveal-post.in{opacity:1;transform:none}

/* replay (for rehearsal) */
.replay{position:absolute;bottom:20px;right:22px;z-index:5;background:none;border:1px solid var(--panel-line);
  color:var(--ink-dim);font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:1px;
  padding:8px 14px;border-radius:999px;cursor:pointer;transition:.25s}
.replay:hover{color:var(--lime);border-color:var(--lime)}

.hero__title{font-family:var(--font-display);line-height:.92;letter-spacing:-1px;margin:10px 0 4px}
.hero__title .line{display:block;font-size:clamp(40px,9vw,86px);color:var(--ink)}
.hero__title .line--accent{background:linear-gradient(120deg,var(--lime-2) 5%,var(--lime) 45%,var(--blue-2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__sub{color:var(--ink-soft);max-width:520px;font-size:16px}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:18px}

/* staged reveal */
.reveal-seq{opacity:0;transform:translateY(18px);transition:.8s var(--ease)}
.reveal-seq.in{opacity:1;transform:none}

.hero__scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink-dim);font-size:11px;letter-spacing:3px}
@media(max-height:940px){.hero__scroll{display:none}}
.hero__scroll-line{width:1px;height:40px;background:linear-gradient(var(--lime),transparent);animation:scrolldrop 1.8s var(--ease) infinite}
@keyframes scrolldrop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ===================== BUTTONS ===================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:15px;
  padding:14px 26px;border-radius:999px;border:none;cursor:pointer;transition:.25s var(--ease);font-family:var(--font-body)}
.btn--primary{background:linear-gradient(120deg,var(--lime),#b8d94f);color:#0a1c33;box-shadow:0 12px 30px -10px rgba(203,230,110,.45)}
.btn--primary:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn--ghost{background:transparent;border:1px solid var(--panel-line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--lime);color:var(--lime)}
.btn--block{width:100%}

/* ===================== LIVE STRIP ===================== */
.live{max-width:var(--maxw);margin:0 auto;padding:34px clamp(18px,5vw,48px);display:flex;align-items:center;justify-content:center;gap:clamp(14px,4vw,40px);flex-wrap:wrap;text-align:center}
.live__badge{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-alt);letter-spacing:4px;font-size:17px;color:var(--lime);
  padding:12px 22px;border:1px solid rgba(203,230,110,.35);border-radius:999px;background:rgba(203,230,110,.06)}
.live__dot{width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(203,230,110,.6);animation:ping 1.6s infinite}
@keyframes ping{70%{box-shadow:0 0 0 12px rgba(203,230,110,0)}100%{box-shadow:0 0 0 0 rgba(203,230,110,0)}}
.live__date{color:var(--ink);font-weight:700;letter-spacing:.4px}
.live__tag{font-family:var(--font-alt);letter-spacing:2px;color:var(--blue-2);font-size:17px}

/* ===================== SECTION HEAD ===================== */
.sec-head{text-align:center;max-width:640px;margin:0 auto 46px}
.sec-head--left{text-align:left;margin-left:0}
.sec-head__kicker{display:inline-block;font-family:var(--font-alt);letter-spacing:5px;color:var(--lime);font-size:14px;
  padding:6px 14px;border:1px solid var(--panel-line);border-radius:999px;margin-bottom:16px}
.sec-head__title{font-family:var(--font-display);font-size:clamp(30px,6vw,54px);line-height:1;letter-spacing:-.5px}
.sec-head__lead{color:var(--ink-soft);margin-top:16px;font-size:16px}

/* ===================== CREST GRID ===================== */
.crest-sec{max-width:var(--maxw);margin:0 auto;padding:70px clamp(18px,5vw,48px)}
.crest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.crest-card{position:relative;padding:30px 24px 26px;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(146,190,255,.06),rgba(146,190,255,.015));
  border:1px solid var(--panel-line);overflow:hidden;transition:.35s var(--ease)}
.crest-card::before{content:"";position:absolute;inset:0;background:radial-gradient(120px 80px at 80% 0%,rgba(203,230,110,.14),transparent 70%);opacity:0;transition:.35s}
.crest-card:hover{transform:translateY(-6px);border-color:rgba(203,230,110,.4)}
.crest-card:hover::before{opacity:1}
.crest-card__no{font-family:var(--font-display);font-size:34px;color:transparent;-webkit-text-stroke:1.5px var(--lime);opacity:.75;margin-bottom:14px}
.crest-card h3{font-size:19px;margin-bottom:8px}
.crest-card p{color:var(--ink-soft);font-size:14.5px}
@media(max-width:900px){.crest-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.crest-grid{grid-template-columns:1fr}}

/* ===================== SQUAD ===================== */
.squad{max-width:var(--maxw);margin:0 auto;padding:50px clamp(18px,5vw,48px)}
.squad__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{text-align:center;padding:28px 12px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--panel-line)}
.stat__num{display:block;font-family:var(--font-display);font-size:clamp(34px,7vw,58px);line-height:1;
  background:linear-gradient(120deg,var(--lime-2),var(--blue-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat__label{display:block;margin-top:8px;font-size:12px;letter-spacing:2px;color:var(--ink-dim);text-transform:uppercase}
.squad__quote{text-align:center;font-family:var(--font-display);font-size:clamp(22px,4.5vw,40px);line-height:1.15;margin-top:44px;
  color:var(--ink);letter-spacing:-.5px}
@media(max-width:640px){.squad__stats{grid-template-columns:repeat(2,1fr)}}

/* ===================== FIXTURES ===================== */
.fixtures{max-width:900px;margin:0 auto;padding:70px clamp(18px,5vw,48px)}
.fixture-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.fixture{display:flex;align-items:center;gap:20px;padding:18px 22px;border-radius:var(--radius);
  background:var(--panel);border:1px solid var(--panel-line);transition:.3s var(--ease)}
.fixture:hover{transform:translateX(6px);border-color:rgba(203,230,110,.4);background:rgba(203,230,110,.05)}
.fixture--done{border-color:rgba(203,230,110,.45);background:rgba(203,230,110,.07)}
.fixture__date{font-family:var(--font-display);text-align:center;line-height:1;color:var(--lime);font-size:14px;min-width:52px}
.fixture__date span{display:block;font-size:34px;color:var(--ink)}
.fixture__body{flex:1}
.fixture__body h3{font-size:18px;margin-bottom:2px}
.fixture__body p{color:var(--ink-soft);font-size:14px}
.fixture__tag{font-family:var(--font-alt);letter-spacing:2px;font-size:12px;padding:6px 12px;border-radius:999px;
  border:1px solid var(--panel-line);color:var(--blue-2)}
.fixture__tag--live{color:#0a1c33;background:var(--lime);border-color:var(--lime)}
@media(max-width:520px){.fixture{gap:14px;padding:16px}.fixture__tag{display:none}}

/* ===================== JOIN ===================== */
.join{max-width:var(--maxw);margin:0 auto;padding:60px clamp(18px,5vw,48px) 90px}
.join__card{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;
  padding:clamp(28px,5vw,54px);border-radius:28px;
  background:linear-gradient(160deg,rgba(27,116,224,.14),rgba(203,230,110,.05) 55%,rgba(146,190,255,.03));
  border:1px solid var(--panel-line);box-shadow:0 40px 100px -50px rgba(27,116,224,.6)}
.join__form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{position:relative}
.field--full{grid-column:1/-1}
.field input,.field select{width:100%;padding:16px 14px 8px;border-radius:12px;background:rgba(3,10,26,.45);
  border:1px solid var(--panel-line);color:var(--ink);font-family:var(--font-body);font-size:15px;outline:none;transition:.25s}
.field select{padding-top:12px;padding-bottom:12px}
.field input:focus,.field select:focus{border-color:var(--lime);background:rgba(3,10,26,.65)}
.field label{position:absolute;left:14px;top:15px;color:var(--ink-dim);font-size:15px;pointer-events:none;transition:.2s var(--ease)}
.field input:focus+label,.field input:not(:placeholder-shown)+label{top:6px;font-size:11px;color:var(--lime);letter-spacing:1px}
.field .label--static{position:static;display:block;margin-bottom:6px;font-size:11px;letter-spacing:1px;color:var(--lime)}
.join__form .btn{grid-column:1/-1;margin-top:6px}
.join__note{grid-column:1/-1;text-align:center;color:var(--lime-2);font-weight:600;padding-top:6px}
.join__venues{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;padding-top:22px;border-top:1px solid var(--panel-line)}
.venue{display:flex;align-items:center;gap:8px;color:var(--ink-soft);font-size:14px}
@media(max-width:820px){.join__card{grid-template-columns:1fr}.sec-head--left{margin-bottom:24px}}
@media(max-width:480px){.join__form{grid-template-columns:1fr}}

/* ===================== FOOTER ===================== */
.footer{text-align:center;padding:70px clamp(18px,5vw,48px) 50px;border-top:1px solid var(--panel-line);position:relative;z-index:2}
.footer__logo{width:110px;height:auto;filter:drop-shadow(0 10px 24px rgba(3,10,26,.6))}
.footer__name{font-family:var(--font-display);font-size:clamp(22px,5vw,40px);letter-spacing:1px;margin:14px 0 20px}
.footer__socials{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.footer__socials a{color:var(--ink-soft);font-weight:600;font-size:14px;transition:.25s}
.footer__socials a:hover{color:var(--lime)}
.footer__copy{color:var(--ink-dim);font-size:13px}

/* ===================== REVEAL ANIM ===================== */
.reveal-up{opacity:0;transform:translateY(28px);transition:.7s var(--ease)}
.reveal-up.in{opacity:1;transform:none}
.reveal-up:nth-child(2){transition-delay:.08s}
.reveal-up:nth-child(3){transition-delay:.16s}
.reveal-up:nth-child(4){transition-delay:.24s}

[hidden]{display:none!important}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal-up,.reveal-seq,.reveal-post{opacity:1;transform:none}
  .hero__sheen{opacity:.4}
}