:root {
  --navy-950: #01071b;
  --navy-900: #02102f;
  --navy-800: #06235c;
  --blue-600: #0878ff;
  --cyan-400: #36d8ff;
  --cyan-200: #a8efff;
  --white: #ffffff;
  --muted: #a8b9dc;
  --gold: #ffce48;
  --radius: 22px;
  --shadow-blue: 0 0 12px rgba(54, 216, 255, .9), 0 0 35px rgba(8, 120, 255, .65);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--navy-950); }
body {
  margin: 0;
  color: var(--white);
  background:
    radial-gradient(circle at 50% 0%, rgba(8,120,255,.24), transparent 30rem),
    var(--navy-950);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { cursor: pointer; }

.page-shell {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: start center;
}

.landing {
  width: min(100%, 480px);
  overflow: hidden;
  background: linear-gradient(180deg, #03133b 0%, #020a22 38%, #010617 100%);
  box-shadow: 0 0 80px rgba(0, 56, 160, .28);
}

.hero {
  position: relative;
  min-height: 760px;
  padding: 28px 18px 0;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 20%, rgba(19, 96, 255, .35), transparent 30%),
    linear-gradient(180deg, #061b54 0%, #020b27 100%);
}
.hero::after {
  content: "";
  position: absolute;
  left: -15%; right: -15%; bottom: -14px;
  height: 94px;
  z-index: 1;
  background: radial-gradient(ellipse at center, rgba(0, 177, 255, .42) 0%, rgba(0, 85, 255, .15) 32%, transparent 68%);
  filter: blur(4px);
}
.hero-grid {
  position: absolute; inset: 0; z-index: -3; opacity: .18;
  background-image:
    linear-gradient(rgba(74, 168, 255, .24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 168, 255, .24) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, transparent 0%, black 38%, transparent 84%);
}
.hero-orbit {
  position: absolute; z-index: -2; border: 1px solid rgba(93, 206, 255, .23); border-radius: 50%;
  transform: rotate(-18deg);
}
.orbit-a { width: 430px; height: 190px; top: 205px; left: -44px; }
.orbit-b { width: 370px; height: 150px; top: 285px; left: 30px; }

.brand-header { text-align: center; position: relative; z-index: 4; }
.brand {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
  letter-spacing: -.07em;
  font-size: 27px;
  font-weight: 1000;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.brand-sbo { color: #fff; }
.brand-top { color: var(--gold); }
.brand-ball { position: absolute; right: 3px; top: -7px; color: #fff; font-size: 7px; text-shadow: 0 0 6px var(--gold); }
.brand-header p { margin: 3px 0 0; font-size: 9px; font-weight: 800; text-transform: uppercase; }

.hero-copy { position: relative; z-index: 4; text-align: center; margin-top: 11px; }
.eyebrow {
  margin: 0 0 5px;
  color: var(--cyan-200);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero-copy h1 {
  margin: 0;
  font-size: clamp(30px, 9vw, 43px);
  line-height: .94;
  font-weight: 1000;
  letter-spacing: -.045em;
  text-shadow: 0 4px 16px rgba(0,0,0,.6);
}
.hero-copy h1 span { color: var(--cyan-400); }
.hero-subtitle { max-width: 360px; margin: 10px auto 14px; color: #c9d9f7; font-size: 12px; line-height: 1.45; }
.cta {
  border: 0;
  color: #fff;
  font-weight: 1000;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.cta-primary {
  min-width: 158px;
  min-height: 47px;
  padding: 12px 24px;
  border: 2px solid rgba(163, 237, 255, .85);
  border-radius: 999px;
  background: linear-gradient(180deg, #26c9ff 0%, #0378f8 56%, #0454c6 100%);
  box-shadow: var(--shadow-blue), inset 0 1px 0 rgba(255,255,255,.8);
  transition: transform .2s ease, filter .2s ease;
}
.cta-primary:hover { transform: translateY(-2px) scale(1.015); filter: brightness(1.1); }
.cta-primary:active { transform: translateY(0) scale(.99); }
.cta-wide { width: min(260px, 100%); }

.partner-tag {
  position: relative; z-index: 4;
  width: max-content;
  margin-top: 16px;
  text-transform: uppercase;
  transform: rotate(-1deg);
}
.partner-tag span { display: block; font-size: 9px; font-weight: 700; color: #dce7ff; }
.partner-tag strong { font-size: 17px; line-height: 1; }

.hero-art { position: absolute; inset: 330px 0 0; z-index: 2; overflow: hidden; }
.hero-art::before {
  content: "";
  position: absolute; inset: 100px -30px 65px;
  background:
    linear-gradient(transparent 86%, rgba(0, 174, 255, .34) 87%, transparent 89%),
    repeating-linear-gradient(90deg, rgba(74,163,255,.16) 0 2px, transparent 2px 34px);
  clip-path: polygon(0 25%, 15% 9%, 23% 18%, 36% 3%, 48% 19%, 59% 5%, 72% 20%, 84% 6%, 100% 22%, 100% 100%, 0 100%);
  opacity: .8;
}
.stadium-light { position: absolute; top: 66px; width: 120px; height: 300px; opacity: .28; filter: blur(4px); }
.light-left { left: -25px; background: linear-gradient(105deg, rgba(93,220,255,.65), transparent 52%); transform: rotate(12deg); }
.light-right { right: -25px; background: linear-gradient(255deg, rgba(93,220,255,.65), transparent 52%); transform: rotate(-12deg); }
.score-panel {
  position: absolute; top: 95px; width: 92px; min-height: 68px; padding: 10px;
  border: 1px solid rgba(82, 178, 255, .45); color: #9fc9ff;
  font-size: 8px; line-height: 1.1; letter-spacing: .1em;
  background: linear-gradient(135deg, rgba(8,60,132,.65), rgba(2,10,36,.2));
  backdrop-filter: blur(3px);
}
.score-panel strong { color: #fff; font-size: 14px; }
.score-panel-left { left: 14px; transform: rotate(-4deg); }
.score-panel-right { right: 13px; transform: rotate(4deg); text-align: right; }

.player { position: absolute; filter: drop-shadow(0 16px 18px rgba(0,0,0,.65)); }
.player .head { position: absolute; border-radius: 48% 52% 45% 55%; background: linear-gradient(145deg, #563323, #ad7045 48%, #3b2119 50%); }
.player .body { position: absolute; clip-path: polygon(25% 0, 75% 0, 100% 30%, 83% 100%, 17% 100%, 0 30%); background: linear-gradient(105deg, #5a092d 0 18%, #8d1548 19% 50%, #47051f 51% 69%, #7d0f3b 70% 100%); }
.player .body::after { content: ""; position: absolute; left: 47%; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.35); }
.player span { position: absolute; color: rgba(255,255,255,.88); font-weight: 1000; letter-spacing: .04em; text-shadow: 0 2px 4px #000; }
.player-back { width: 190px; height: 335px; left: 0; top: 80px; transform: rotate(-3deg); opacity: .88; }
.player-back .head { width: 70px; height: 82px; left: 62px; top: 0; }
.player-back .body { width: 170px; height: 245px; left: 8px; top: 65px; }
.player-back span { left: 57px; top: 155px; font-size: 12px; }
.player-main { width: 236px; height: 390px; right: -6px; top: 8px; }
.player-main .head { width: 92px; height: 106px; left: 82px; top: 0; }
.player-main .body { width: 218px; height: 292px; left: 6px; top: 81px; background: linear-gradient(105deg, #7b1237 0 18%, #bd2459 19% 48%, #66102d 49% 69%, #9d1949 70% 100%); }
.player-main span { left: 91px; top: 205px; font-size: 17px; }
.player-action { width: 100px; height: 180px; left: calc(50% - 42px); bottom: 52px; transform: rotate(-6deg); z-index: 5; }
.player-action .head { width: 34px; height: 39px; left: 34px; top: 0; }
.player-action .body { width: 85px; height: 116px; left: 9px; top: 31px; background: linear-gradient(100deg, #51122c, #b52257 50%, #61132f); }
.player-action span { left: 30px; top: 72px; font-size: 9px; }
.player-action::after { content: ""; position: absolute; width: 17px; height: 76px; left: 51px; top: 125px; border-radius: 12px; background: linear-gradient(#eee, #b9d8ff); transform: rotate(-15deg); box-shadow: -30px -5px 0 #d5e5ff; }
.ball { position: absolute; width: 36px; height: 36px; right: 76px; bottom: 64px; border-radius: 50%; background: #0b67f1; border: 2px solid #7de9ff; box-shadow: 0 0 18px #0cbcff; }
.ball i { position: absolute; width: 8px; height: 8px; background: #ffe15b; clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.ball i:nth-child(1) { left: 13px; top: 4px; }
.ball i:nth-child(2) { left: 4px; top: 17px; }
.ball i:nth-child(3) { right: 4px; top: 18px; }
.pitch-ring { position: absolute; left: 5%; right: 5%; bottom: 22px; height: 46px; border: 2px solid rgba(50, 208, 255, .8); border-radius: 50%; box-shadow: 0 0 18px rgba(0, 157, 255, .8); transform: perspective(180px) rotateX(56deg); }

.section-pad { padding: 26px 20px; position: relative; }
.section-line { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(81, 204, 255, .8), transparent); box-shadow: 0 0 10px rgba(81, 204, 255, .7); }
.statement { text-align: center; background: linear-gradient(180deg, rgba(1,8,28,.2), rgba(1,7,23,.78)); }
.statement h2, .trust h2 { margin: 0; font-size: 23px; line-height: 1; font-weight: 1000; letter-spacing: -.035em; }
.statement p:last-child { margin: 10px auto 0; max-width: 390px; color: var(--muted); font-size: 12px; line-height: 1.5; }

.legends { padding-top: 34px; background: radial-gradient(circle at 50% 12%, rgba(8,108,255,.3), transparent 46%); overflow: hidden; }
.spotlight { position: absolute; top: -80px; width: 70px; height: 360px; background: linear-gradient(rgba(96,217,255,.46), transparent 85%); filter: blur(4px); opacity: .5; }
.spotlight-left { left: 30px; transform: rotate(24deg); }
.spotlight-right { right: 30px; transform: rotate(-24deg); }
.legend-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px 8px; position: relative; z-index: 1; }
.legend-card { text-align: center; min-width: 0; }
.legend-card:nth-child(n+5) { grid-column: span 2; width: 50%; justify-self: center; }
.avatar { width: 64px; aspect-ratio: .78; margin: 0 auto 8px; position: relative; overflow: hidden; border-radius: 38% 38% 18% 18%; border: 1px solid rgba(108,209,255,.35); background: linear-gradient(160deg, #193c79, #0d153b 55%, #040817); box-shadow: 0 9px 15px rgba(0,0,0,.45), inset 0 -14px 20px rgba(0,77,255,.25); }
.avatar::before { content: ""; position: absolute; left: 50%; top: 12px; width: 29px; height: 33px; transform: translateX(-50%); border-radius: 48%; background: linear-gradient(145deg, #d38b5e, #5c3424); }
.avatar::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 54px; height: 63px; transform: translateX(-50%); border-radius: 45% 45% 0 0; background: linear-gradient(100deg, #07162c, #143f85 50%, #07162c); }
.avatar span { position: absolute; z-index: 2; left: 0; right: 0; bottom: 7px; font-size: 10px; font-weight: 1000; letter-spacing: .06em; }
.avatar-2::after, .avatar-5::after { background: linear-gradient(100deg, #0c1323, #485e82 50%, #0c1323); }
.avatar-3::after, .avatar-6::after { background: linear-gradient(100deg, #1b102c, #8d2f87 50%, #1b102c); }
.avatar-4::after { background: linear-gradient(100deg, #24180c, #a16b28 50%, #24180c); }
.legend-card h3 { margin: 0; font-size: 8px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend-card p { margin: 3px 0 0; color: #8fa6ce; font-size: 6.5px; }

.trust { text-align: center; padding-top: 30px; background: linear-gradient(180deg, #010619, #020b26); }
.trust-copy { margin: 0 0 20px; color: #c5d0e8; font-size: 9px; line-height: 1.6; }
.trust .eyebrow { margin-bottom: 4px; color: #fff; }
.trust .cta { margin-top: 17px; }

.proof { background: #010718; padding-bottom: 30px; border-top: 1px solid rgba(73, 174, 255, .18); }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.proof-grid article { min-width: 0; text-align: center; padding: 9px 4px; border-radius: 10px; background: linear-gradient(180deg, rgba(11,37,84,.55), rgba(3,11,30,.75)); border: 1px solid rgba(68,150,255,.2); }
.proof-grid span { display: block; margin-bottom: 6px; color: #b7c6e1; font-size: 6px; }
.proof-grid strong { display: grid; place-items: center; min-height: 35px; color: #fff; font-size: 11px; line-height: 1; }
.proof-grid small { display: block; margin-top: 7px; color: #7792bb; font-size: 5.5px; line-height: 1.25; }
.mini-title { margin: 25px 0 10px; text-align: center; color: #a8b9d9; font-size: 8px; }
.badge-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.badge-row span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; color: #fff; font-size: 5.7px; font-weight: 900; background: linear-gradient(135deg, #0a3a8b, #d7a51f); border: 1px solid rgba(255,255,255,.35); box-shadow: 0 5px 12px rgba(0,0,0,.45); }

.footer { padding: 12px 12px calc(92px + env(safe-area-inset-bottom)); text-align: center; background: #000513; border-top: 1px solid rgba(39,127,255,.35); }
.footer > p:first-child { margin: 0 0 11px; font-size: 7px; color: #a8b5ce; }
.footer-meta { display: flex; justify-content: space-between; margin-bottom: 8px; color: #8da3c9; font-size: 6px; }
.payment-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.payment-row span { display: grid; place-items: center; min-height: 17px; border-radius: 3px; background: #f5f8ff; color: #16326c; font-size: 6px; font-weight: 1000; }
.copyright { margin: 12px 0 0; color: #52698d; font-size: 6px; }

.sticky-cta {
  position: fixed; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 20;
  width: min(calc(100% - 20px), 452px); min-height: 62px; padding: 8px 9px 8px 14px;
  transform: translateX(-50%) translateY(130%);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid rgba(137,226,255,.55); border-radius: 18px;
  background: rgba(2,16,49,.88); box-shadow: 0 14px 42px rgba(0,0,0,.5), 0 0 24px rgba(0,125,255,.22);
  backdrop-filter: blur(16px);
  transition: transform .35s cubic-bezier(.2,.9,.2,1);
}
.sticky-cta.is-visible { transform: translateX(-50%) translateY(0); }
.sticky-cta div { display: grid; }
.sticky-cta strong { font-size: 11px; }
.sticky-cta span { color: #9bb3d8; font-size: 8px; }
.sticky-cta button { flex: 0 0 auto; min-height: 40px; padding: 0 17px; border: 1px solid #91eaff; border-radius: 999px; color: #fff; font-weight: 1000; font-size: 10px; background: linear-gradient(#20c9ff, #0567e4); box-shadow: 0 0 14px rgba(25,192,255,.7); }

.register-modal { width: min(calc(100% - 28px), 430px); padding: 0; border: 0; border-radius: var(--radius); color: #fff; background: transparent; }
.register-modal::backdrop { background: rgba(0,4,18,.76); backdrop-filter: blur(7px); }
.register-card { position: relative; padding: 28px 22px 22px; border: 1px solid rgba(111,213,255,.48); border-radius: var(--radius); background: linear-gradient(160deg, #082561, #020a23 68%); box-shadow: 0 24px 70px rgba(0,0,0,.7), 0 0 35px rgba(0,120,255,.3); }
.register-card h2 { margin: 0 0 18px; font-size: 28px; }
.register-card label { display: grid; gap: 7px; margin: 12px 0; color: #c9d8f3; font-size: 11px; font-weight: 800; }
.register-card input[type="tel"], .register-card input[type="email"] { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid rgba(104,172,255,.35); border-radius: 12px; outline: 0; color: #fff; background: rgba(0,7,28,.72); }
.register-card input:focus { border-color: #44d5ff; box-shadow: 0 0 0 3px rgba(68,213,255,.12); }
.check-row { grid-template-columns: auto 1fr !important; align-items: start; font-weight: 500 !important; line-height: 1.4; }
.check-row input { margin-top: 2px; accent-color: #0ebeff; }
.modal-close { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; color: #fff; font-size: 25px; background: rgba(255,255,255,.08); }
.form-note { margin: 12px 0 0; color: #718ab0; font-size: 8px; text-align: center; }

@media (min-width: 700px) {
  body { padding: 28px 0; }
  .landing { border: 1px solid rgba(95,177,255,.2); border-radius: 28px; }
}

@media (max-width: 350px) {
  .hero { min-height: 710px; }
  .hero-art { transform: scale(.9); transform-origin: center bottom; inset-inline: -7%; }
  .legend-grid { gap-inline: 4px; }
  .avatar { width: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; }
}