:root {
  --silver: #dfe7ee;
  --silver-mid: #9daab5;
  --electric: #4d8dff;
  --cyan: #5de8ff;
  --champion: #ffd166;
  --violet: #9b7bff;
}

body {
  background:
    radial-gradient(circle at 8% 28%, rgba(77, 141, 255, .07), transparent 24%),
    radial-gradient(circle at 94% 64%, rgba(52, 168, 83, .07), transparent 26%),
    var(--pale);
}

.site-header {
  border-bottom-color: rgba(223, 231, 238, .16);
  box-shadow: 0 8px 35px rgba(0,0,0,.2), 0 1px 0 rgba(93,232,255,.06);
}

.logo b {
  background: linear-gradient(90deg, #34a853, var(--cyan), var(--silver));
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: chrome-flow 5s ease-in-out infinite;
}

.hero {
  background-image:
    radial-gradient(circle at 84% 18%, rgba(77,141,255,.25), transparent 22%),
    radial-gradient(circle at 69% 62%, rgba(52,168,83,.21), transparent 30%),
    radial-gradient(circle at 98% 78%, rgba(155,123,255,.14), transparent 22%),
    linear-gradient(135deg, #070908 0%, #101813 48%, #080b11 76%, #050606 100%);
}

.hero::before,
.page-hero::before,
.proof::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: .68;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(93,232,255,.85) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,209,102,.8) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(52,168,83,.9) 0 1.2px, transparent 2.1px);
  background-size: 157px 163px, 211px 197px, 271px 233px, 319px 287px;
  background-position: 11px 9px, 61px 83px, 130px 47px, 180px 126px;
  mask-image: linear-gradient(90deg, transparent 12%, #000 44%, #000);
  animation: spark-drift 18s linear infinite;
}

.hero::before {
  filter: drop-shadow(0 0 5px rgba(93,232,255,.8));
}

.kinetic-title em {
  background-image: linear-gradient(102deg, #34a853 0%, #5ed878 28%, var(--silver) 46%, var(--cyan) 56%, var(--electric) 66%, #34a853 100%);
  background-size: 260% 100%;
  text-shadow: 0 0 40px rgba(77,141,255,.11);
}

.hero .eyebrow span {
  background: linear-gradient(90deg, #34a853, var(--cyan));
  box-shadow: 0 0 12px rgba(93,232,255,.7);
}

.hero-stamp {
  border-color: rgba(223,231,238,.5);
  background: radial-gradient(circle, rgba(77,141,255,.12), transparent 66%);
  box-shadow: inset 0 0 25px rgba(93,232,255,.08), 0 0 30px rgba(77,141,255,.08);
}

.hero-stamp strong {
  background: linear-gradient(145deg, #fff, var(--cyan) 45%, #34a853);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.button,
.circle-link {
  position: relative;
  overflow: hidden;
}

.button::before,
.circle-link::before {
  content: "";
  position: absolute;
  top: -80%;
  left: -45%;
  width: 30%;
  height: 260%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  transform: rotate(22deg);
  transition: left .65s ease;
}

.button:hover::before,
.circle-link:hover::before { left: 125%; }

.button-green {
  background: linear-gradient(110deg, #238e42 0%, #34a853 47%, #5fd77c 72%, #a8ffd2 100%);
  box-shadow: 0 10px 28px rgba(52,168,83,.2), inset 0 1px 0 rgba(255,255,255,.35);
}

.button-ghost {
  border-color: rgba(223,231,238,.45);
  background: linear-gradient(135deg, rgba(223,231,238,.06), rgba(77,141,255,.08));
  box-shadow: inset 0 0 20px rgba(93,232,255,.04);
}

.ticker {
  background: linear-gradient(90deg, #34a853, #69dc83 32%, var(--cyan) 52%, #67a0ff 63%, #34a853 100%);
  background-size: 220% 100%;
  box-shadow: 0 0 30px rgba(93,232,255,.22);
  animation: spectrum-slide 9s linear infinite;
}

.section:not(.levels-section) h2 {
  background: linear-gradient(135deg, #070907 15%, #4b555c 48%, #0a0c0a 72%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.intro-grid,
.location-callout {
  position: relative;
}

.intro-grid::after,
.location-callout::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(77,141,255,.09), transparent 67%);
  filter: blur(8px);
}

.intro-grid::after { right: 5%; top: 8%; }
.location-callout::after { left: 12%; bottom: 2%; background: radial-gradient(circle, rgba(52,168,83,.1), transparent 67%); }

.levels-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.8) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(93,232,255,.8) 0 1px, transparent 1.9px),
    radial-gradient(circle, rgba(255,209,102,.78) 0 1px, transparent 1.8px);
  background-size: 173px 181px, 257px 229px, 331px 277px;
  background-position: 25px 31px, 113px 87px, 190px 53px;
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 86%, transparent);
  animation: spark-drift 22s linear infinite reverse;
}

.level-beginner { --accent: var(--silver) !important; }
.level-intermediate { --accent: var(--electric) !important; }
.level-advanced { --accent: #42df70 !important; }
.level-pro { --accent: var(--champion) !important; }

.levels-section .level-card {
  background:
    radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 35%),
    linear-gradient(155deg, #1b1f21 0%, #111513 58%, #090b0d 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.level-badge::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 18% 10%;
  border-radius: 50%;
  background: var(--accent);
  opacity: .13;
  filter: blur(28px);
  animation: halo-pulse 3.8s ease-in-out infinite;
}

.level-badge .badge-frame {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 50%, transparent));
}

.badge-pro .badge-frame { fill: #211b0b; }
.badge-pro .badge-inset { fill: rgba(255,209,102,.08); }
.badge-pro .pro-star { fill: var(--champion); stroke: #fff4c8; }
.badge-intermediate .badge-inset { fill: rgba(77,141,255,.08); }
.badge-advanced .badge-inset { fill: rgba(66,223,112,.08); }

.proof {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 10%, rgba(77,141,255,.17), transparent 28%),
    radial-gradient(circle at 82% 78%, rgba(52,168,83,.17), transparent 28%),
    linear-gradient(145deg, #080a0d, #101411 55%, #070807);
}

.proof > .shell { position: relative; z-index: 2; }
.proof h2 {
  background: linear-gradient(120deg, #fff 5%, var(--silver) 40%, var(--cyan) 57%, #fff 72%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: chrome-flow 7s ease-in-out infinite;
}

.stats-grid strong {
  text-shadow: 0 0 24px currentColor;
}

.stats-grid div:nth-child(1) strong { color: #42df70; }
.stats-grid div:nth-child(2) strong { color: var(--electric); }
.stats-grid div:nth-child(3) strong { color: var(--silver); }
.stats-grid div:nth-child(4) strong { color: var(--champion); }

.page-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 18%, rgba(77,141,255,.2), transparent 26%),
    radial-gradient(circle at 65% 100%, rgba(52,168,83,.14), transparent 32%),
    linear-gradient(135deg, #080a0c, #111812 58%, #090a0d);
}

.page-hero > .shell { position: relative; z-index: 2; }
.page-hero::before { mask-image: linear-gradient(90deg, transparent, #000 50%); }

.page-hero h1 {
  background: linear-gradient(112deg, #fff 10%, var(--silver) 45%, var(--cyan) 58%, #fff 74%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: chrome-flow 8s ease-in-out infinite;
}

.program-row,
.schedule-card,
.coach-card,
.value {
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
}

.program-row:hover {
  transform: translateX(8px);
  border-top-color: var(--electric);
}

.schedule-card {
  border-image: linear-gradient(90deg, #34a853, var(--cyan), var(--electric)) 1;
  box-shadow: 0 14px 35px rgba(18,27,22,.07);
}

.schedule-card:hover,
.value:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 45px rgba(32,72,51,.13), 0 0 25px rgba(77,141,255,.07);
}

.coach-card {
  background:
    radial-gradient(circle at 84% 18%, rgba(77,141,255,.2), transparent 28%),
    linear-gradient(145deg, #1a1d21, #101410);
}

.coach-card:nth-child(2) {
  background:
    radial-gradient(circle at 84% 18%, rgba(155,123,255,.2), transparent 28%),
    linear-gradient(145deg, #1a1d21, #101410);
}

.coach-grid-single { grid-template-columns: minmax(0, 1fr); }
.coach-grid-single .coach-card { min-height: 460px; }

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--electric);
  box-shadow: 0 0 0 3px rgba(77,141,255,.1), 0 0 25px rgba(77,141,255,.08);
}

footer {
  position: relative;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, #34a853, var(--cyan), var(--electric), transparent) 1;
  background:
    radial-gradient(circle at 80% 20%, rgba(77,141,255,.08), transparent 24%),
    #070807;
}

.form-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.secure-form-note {
  display: block;
  margin-top: 12px;
  color: #697168;
  font: 600 9px/1.5 var(--font-mono);
  letter-spacing: .06em;
}

.form-status {
  grid-column: 1 / -1;
  padding: 15px 17px;
  border: 1px solid #c47a57;
  background: #fff1eb;
  color: #74391f;
  font-size: 13px;
  line-height: 1.5;
}

@keyframes chrome-flow {
  0%, 100% { background-position: 100% 0; }
  50% { background-position: -80% 0; }
}

@keyframes spectrum-slide {
  from { background-position: 0 0; }
  to { background-position: 220% 0; }
}

@keyframes spark-drift {
  from { background-position: 11px 9px, 61px 83px, 130px 47px, 180px 126px; }
  to { background-position: 168px 172px, -150px 280px, 401px -186px, -139px 413px; }
}

@keyframes halo-pulse {
  0%, 100% { opacity: .09; transform: scale(.85); }
  50% { opacity: .2; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .page-hero::before,
  .proof::before,
  .levels-section::after,
  .logo b,
  .ticker,
  .proof h2,
  .page-hero h1,
  .level-badge::before {
    animation: none;
  }
}