/*
 * SplitStrategy — splitstrategy.com
 *
 * Editorial premium aesthetic. Serif headlines (Playfair Display) paired with
 * a clean modern sans (Inter) for body. Gold + green from the app logo,
 * subtle SVG grain texture, ornamental section dividers, generous rhythm.
 * Inspired by Elite400M's intensity but elevated into magazine-grade
 * sophistication.
 */

/* Self-hosted Google Fonts via @import (loaded from the Google CDN). The
   browser caches them aggressively and they're routinely the fastest CDN
   loads on the web. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,500;0,700;0,800;0,900;1,400;1,700&display=swap");

:root {
  /* Palette — sourced from the app's theme.ts */
  --bg:           #080A0D;     /* near-black */
  --bg-elev:      #0F1216;     /* first elevation */
  --surface:      #13171D;     /* cards */
  --surface-alt:  #1A1F27;     /* secondary surfaces */
  --divider:      #1F252E;     /* hairline borders */
  --text:         #EFEAE0;     /* warm off-white */
  --text-muted:   #A29C8F;     /* secondary */
  --text-dim:     #6E6960;     /* tertiary */
  --gold:         #C9A24E;     /* champagne gold — from logo */
  --gold-bright:  #E5BF6F;     /* highlight gold */
  --gold-soft:    #7A6128;     /* muted gold */
  --green:        #0E8C5A;     /* refined track green — from logo */
  --green-bright: #10A567;     /* highlight green */
  --speed:        #C8443B;     /* red */

  /* Typography stacks */
  --font-display: "Playfair Display", "Times New Roman", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Subtle SVG grain texture overlay — gives the dark background depth
     instead of flat black. Embedded as a base64 data URI for zero requests. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
}

img { max-width: 100%; display: block; }
a {
  color: var(--gold);
  text-decoration: none;
  transition: opacity 0.15s ease;
}
a:hover { opacity: 0.78; }

/* ────────────────────────────────────────────────────────────────────
   Animation primitives
   ──────────────────────────────────────────────────────────────────── */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Marquee — slow horizontal scroll for the event-names ticker */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.00s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.07s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.14s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.21s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.28s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.35s; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.42s; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 0.49s; }
.reveal-stagger.is-visible > *:nth-child(9) { transition-delay: 0.56s; }
.reveal-stagger.is-visible > *:nth-child(10){ transition-delay: 0.63s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ────────────────────────────────────────────────────────────────────
   Layout helpers
   ──────────────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 130px 0; position: relative; }
.section--tight { padding: 70px 0; }

/* Ornamental section divider — gold dot flanked by faint hairlines.
   Used between sections to add magazine-grade structure. */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto;
  max-width: 220px;
  color: var(--gold);
  opacity: 0.65;
}
.ornament::before, .ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.55;
}
.ornament-mark {
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  position: relative;
}
.ornament-mark::before {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: 0.5;
}

.eyebrow-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.eyebrow-dot {
  width: 5px;
  height: 5px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(201, 162, 78, 0.6);
}
.eyebrow {
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

h1, h2, h3, h4 {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.08;
}
h2 {
  font-size: clamp(34px, 5vw, 60px);
  margin-bottom: 16px;
  letter-spacing: -1.2px;
  font-weight: 800;
}
h3 {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.1px;
  margin-bottom: 10px;
}

.lead {
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1.65;
  max-width: 660px;
  font-weight: 400;
}

/* ────────────────────────────────────────────────────────────────────
   Top nav
   ──────────────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  background: rgba(8, 10, 13, 0.78);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-bottom: 1px solid rgba(201, 162, 78, 0.12);
  z-index: 100;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav__logo {
  width: 38px;
  height: 38px;
}
.nav__name {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.nav__name strong { color: var(--gold); font-weight: 800; }
.nav__links {
  display: flex;
  gap: 32px;
  align-items: center;
}
.nav__links a:not(.nav__cta) {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.nav__links a:not(.nav__cta):hover { color: var(--gold); opacity: 1; }

.nav__cta {
  background: var(--gold);
  color: var(--bg);
  padding: 11px 20px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset,
              0 0 0 1px rgba(201, 162, 78, 0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nav__cta:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset,
              0 4px 16px rgba(201, 162, 78, 0.4);
}

@media (max-width: 720px) {
  .nav__links a:not(.nav__cta) { display: none; }
}

/* ────────────────────────────────────────────────────────────────────
   Hero — centered, elegant, dramatic
   ──────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding: 100px 0 120px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 900px 700px at 30% -10%, rgba(201, 162, 78, 0.13), transparent 55%),
    radial-gradient(ellipse 900px 700px at 70% -10%, rgba(14, 140, 90, 0.14), transparent 55%);
  pointer-events: none;
  z-index: -1;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 30%, rgba(201, 162, 78, 0.05) 50%, transparent 70%),
    linear-gradient(225deg, transparent 30%, rgba(14, 140, 90, 0.05) 50%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.hero__logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 36px;
  animation: scaleIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero__logo {
  width: clamp(130px, 14vw, 170px);
  filter: drop-shadow(0 8px 40px rgba(14, 140, 90, 0.45));
  animation: logoFloat 5s ease-in-out 1.3s infinite;
}

.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  border: 1px solid rgba(201, 162, 78, 0.6);
  border-radius: 999px;
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 36px;
  background: rgba(201, 162, 78, 0.06);
  animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}
.hero__pill::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(201, 162, 78, 0.7);
}

.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(52px, 9vw, 116px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -3px;
  margin-bottom: 0;
}
.hero__headline-1 {
  color: var(--text);
  display: block;
  animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
  font-style: normal;
}
.hero__headline-2 {
  display: block;
  font-style: italic;
  font-weight: 700;
  background: linear-gradient(
    135deg,
    var(--gold-bright) 0%,
    var(--gold) 25%,
    var(--green-bright) 50%,
    var(--gold) 75%,
    var(--gold-bright) 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation:
    fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both,
    shimmer 9s ease-in-out 2.2s infinite;
}

.hero__tagline {
  max-width: 720px;
  margin: 36px auto 0;
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.2px;
  animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.78s both;
}
.hero__tagline-sub {
  max-width: 660px;
  margin: 18px auto 0;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.7;
  font-weight: 400;
  animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.92s both;
}

.hero__banner {
  display: inline-block;
  margin-top: 48px;
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.07s both;
}
.hero__banner .sparkle {
  color: var(--green-bright);
  margin: 0 10px;
  display: inline-block;
  animation: fadeIn 2.4s ease-in-out 1.5s infinite alternate;
}

.hero__cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
  animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.22s both;
}
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 32px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  transition: transform 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
}
.cta--primary {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--bg);
  border: 1px solid var(--gold);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 6px 24px rgba(201, 162, 78, 0.28);
}
.cta--secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--text);
}
.cta:hover { opacity: 0.94; transform: translateY(-2px); }
.cta--primary:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 8px 32px rgba(201, 162, 78, 0.5);
}

/* Stats row at the bottom of the hero */
.hero__stats {
  display: flex;
  justify-content: center;
  gap: clamp(48px, 9vw, 110px);
  margin-top: 96px;
  flex-wrap: wrap;
  animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.42s both;
}
.hero__stat {
  text-align: center;
}
.hero__stat-num {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 78px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2.5px;
  font-variant-numeric: tabular-nums;
}
.hero__stat-label {
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  margin-top: 14px;
}

/* ────────────────────────────────────────────────────────────────────
   Marquee — slow scroll of event names
   ──────────────────────────────────────────────────────────────────── */

.marquee {
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  background: var(--bg-elev);
  overflow: hidden;
  padding: 28px 0;
  position: relative;
}
.marquee::before, .marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-elev), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--bg-elev), transparent); }
.marquee__track {
  display: flex;
  gap: 64px;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  width: max-content;
}
.marquee__item {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 500;
  font-style: italic;
  color: var(--text-muted);
  letter-spacing: -0.5px;
  display: inline-flex;
  align-items: center;
  gap: 64px;
}
.marquee__item::after {
  content: "✦";
  color: var(--gold);
  font-size: 14px;
  font-style: normal;
  opacity: 0.7;
}

/* ────────────────────────────────────────────────────────────────────
   Pull quote — magazine treatment
   ──────────────────────────────────────────────────────────────────── */

.pull-quote {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 30px 0 30px 36px;
  border-left: 2px solid var(--gold);
}
.pull-quote::before {
  content: "“";
  position: absolute;
  top: -28px;
  left: 16px;
  font-family: var(--font-display);
  font-size: 120px;
  color: var(--gold);
  opacity: 0.25;
  line-height: 1;
  font-weight: 800;
}
.pull-quote p {
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: -0.4px;
  font-style: italic;
}
.pull-quote .citation {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  font-style: normal;
  margin-top: 18px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* ────────────────────────────────────────────────────────────────────
   Section heading pattern
   ──────────────────────────────────────────────────────────────────── */

.section-head {
  text-align: center;
  margin-bottom: 56px;
}
.section-head .lead { margin-left: auto; margin-right: auto; }

/* ────────────────────────────────────────────────────────────────────
   Features grid
   ──────────────────────────────────────────────────────────────────── */

.features {
  background: var(--bg-elev);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}
.features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 48px;
}
.feature {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.feature::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 30%, var(--gold) 70%, transparent 100%);
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.feature::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 60px; height: 60px;
  background: radial-gradient(circle, rgba(201, 162, 78, 0.12), transparent 70%);
  pointer-events: none;
}
.feature:hover {
  border-color: rgba(201, 162, 78, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}
.feature:hover::before { opacity: 1; }
.feature h3 {
  color: var(--gold);
  margin-bottom: 12px;
  font-size: 19px;
  letter-spacing: 0.2px;
  font-weight: 700;
}
.feature p {
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 400;
}

/* ────────────────────────────────────────────────────────────────────
   How it works (3-step)
   ──────────────────────────────────────────────────────────────────── */

.how__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
}
.how__step {
  text-align: center;
  padding: 28px 24px;
  position: relative;
}
.how__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  font-style: italic;
  margin-bottom: 22px;
  font-variant-numeric: tabular-nums;
  background: rgba(201, 162, 78, 0.06);
  box-shadow: 0 0 24px rgba(201, 162, 78, 0.18);
}
.how__step h3 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--text);
  margin-bottom: 10px;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.how__step p {
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.65;
}
@media (max-width: 760px) {
  .how__grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ────────────────────────────────────────────────────────────────────
   Events showcase
   ──────────────────────────────────────────────────────────────────── */

.events__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 12px;
  margin-top: 28px;
}

/*
 * Event card — "fancy" treatment:
 *   - subtle dark-to-darker gradient background so the card has depth
 *   - centered layout: icon at top → event name → optional sub label
 *   - gold corner ornament (top-left + bottom-right) instead of a single
 *     top stripe — small ornamental detail that reads as premium
 *   - hover: lifts, brightens border, drops a soft gold glow shadow,
 *     and the runner icon scales + glows
 */
.event {
  background:
    linear-gradient(155deg, rgba(28, 30, 36, 0.95) 0%, rgba(18, 20, 26, 0.95) 100%);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 22px 16px 18px;
  position: relative;
  text-align: center;
  min-height: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  overflow: hidden;
  transition:
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

/* Two tiny gold L-shaped corner ornaments — top-left and bottom-right.
   Reads as a refined "framed" treatment without being heavy. */
.event::before,
.event::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--gold);
  border-style: solid;
  border-width: 0;
  opacity: 0.55;
  transition: opacity 0.25s ease, width 0.25s ease, height 0.25s ease;
}
.event::before {
  top: 8px;
  left: 8px;
  border-top-width: 1.5px;
  border-left-width: 1.5px;
  border-top-left-radius: 4px;
}
.event::after {
  bottom: 8px;
  right: 8px;
  border-bottom-width: 1.5px;
  border-right-width: 1.5px;
  border-bottom-right-radius: 4px;
}

.event:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow:
    0 14px 30px -16px rgba(201, 162, 78, 0.45),
    0 0 0 1px rgba(201, 162, 78, 0.18) inset;
}
.event:hover::before,
.event:hover::after {
  opacity: 1;
  width: 18px;
  height: 18px;
}
.event:hover .event__icon {
  transform: scale(1.08);
  filter: drop-shadow(0 0 10px rgba(201, 162, 78, 0.55));
}

/* Icon — sized via font-size so the parent's color cascade works for the
   Iconify web component (it scales its inner SVG to 1em). Inline SVGs use
   their own width/height. Both pick up the gold color via currentColor. */
.event__icon {
  color: var(--gold);
  font-size: 44px;
  line-height: 1;
  display: inline-block;
  transition: transform 0.25s ease, filter 0.25s ease;
}
/* Inline SVG variant — the hurdle equipment. Same visual size as the
   iconify runners (44px square box). The viewBox is slightly wider than
   tall so the hurdle reads as the right proportion, hence the height tweak. */
.event__icon--svg {
  width: 44px;
  height: 40px;
}

.event__name {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.1;
}
.event__sub {
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: -4px;
}

.section-groups {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-top: 56px;
}
.group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.group-dot { width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.group-dot--sprints  { background: var(--speed); color: var(--speed); }
.group-dot--hurdles  { background: #C9882F; color: #C9882F; }
.group-dot--middle   { background: #3E7FA0; color: #3E7FA0; }
.group-dot--distance { background: #7A66B5; color: #7A66B5; }
.group-label {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
}
.group-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--divider), transparent);
}

/* ────────────────────────────────────────────────────────────────────
   Made-by cross-promo
   ──────────────────────────────────────────────────────────────────── */

.made-by {
  background: var(--bg-elev);
  border-top: 1px solid var(--divider);
}
.made-by__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 40px;
}
.sibling-card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 36px 32px;
  display: block;
  color: var(--text);
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.sibling-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.5;
}
.sibling-card:hover {
  border-color: rgba(201, 162, 78, 0.5);
  transform: translateY(-3px);
  opacity: 1;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}
.sibling-card h4 {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 26px;
  margin-bottom: 10px;
  font-weight: 700;
  letter-spacing: -0.4px;
  font-style: italic;
}
.sibling-card p {
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.65;
}
.sibling-card .arrow {
  color: var(--gold);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.8px;
  margin-top: 18px;
  display: inline-block;
}

/* "Coming soon" variant */
.sibling-card--soon { cursor: default; opacity: 0.85; }
.sibling-card--soon:hover {
  border-color: var(--divider);
  transform: none;
  box-shadow: none;
}
.sibling-card--soon h4 { color: var(--text-muted); }
.sibling-card .soon-pill {
  display: inline-block;
  margin-top: 18px;
  padding: 6px 14px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: rgba(201, 162, 78, 0.08);
}

@media (max-width: 660px) {
  .made-by__grid { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────────────────
   Footer
   ──────────────────────────────────────────────────────────────────── */

.footer {
  background: var(--bg);
  border-top: 1px solid var(--divider);
  padding: 64px 0 36px;
  color: var(--text-dim);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 44px;
  margin-bottom: 40px;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.footer__brand img { width: 42px; height: 42px; }
.footer__brand-name {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.footer__brand-name strong { color: var(--gold); font-weight: 800; }
.footer__tag {
  color: var(--text-muted);
  font-size: 13.5px;
  max-width: 400px;
  line-height: 1.7;
  font-weight: 400;
}
.footer__col h5 {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer__col ul { list-style: none; }
.footer__col li { margin-bottom: 10px; }
.footer__col a {
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 500;
}
.footer__col a:hover { color: var(--gold); opacity: 1; }
.footer__legal {
  border-top: 1px solid var(--divider);
  padding-top: 24px;
  font-size: 11.5px;
  color: var(--text-dim);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-style: italic;
}

@media (max-width: 660px) {
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ────────────────────────────────────────────────────────────────────
   Legal pages (Privacy / TOS)
   ──────────────────────────────────────────────────────────────────── */

.legal {
  padding: 80px 0 110px;
}
.legal-content {
  max-width: 780px;
  margin: 0 auto;
}
.legal-content h1 {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: -1.5px;
  font-style: italic;
}
.legal-content .meta {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 36px;
  letter-spacing: 0.4px;
}
.legal-content h2 {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 26px;
  font-weight: 700;
  margin-top: 44px;
  margin-bottom: 14px;
  letter-spacing: -0.4px;
  font-style: italic;
}
.legal-content h3 {
  font-family: var(--font-body);
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  margin-top: 24px;
  margin-bottom: 8px;
}
.legal-content p, .legal-content li {
  color: var(--text-muted);
  font-size: 15.5px;
  line-height: 1.75;
  margin-bottom: 14px;
}
.legal-content ul {
  margin-left: 24px;
  margin-bottom: 14px;
}
.legal-content strong {
  color: var(--text);
  font-weight: 700;
}

/* ────────────────────────────────────────────────────────────────────
   Starfield — "soaring through the universe" warp canvas
   Fixed behind all content. Pointer-events disabled. Honors reduced motion.
   ──────────────────────────────────────────────────────────────────── */
#starfield {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  /* The grain texture lives on <body>; the canvas paints on top of the grain
     but stays below all positioned content. */
}

/* Lift every major content band above the canvas. Most already use
   position: relative for layering, but this guarantees stacking. */
.nav,
.hero,
.section,
.marquee,
.features,
.made-by,
.footer,
.legal {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  /* Static starfield handled in JS by skipping the animation loop; the canvas
     still draws a single frame so the universe is present, just not moving. */
  #starfield { opacity: 0.6; }
}

/* ────────────────────────────────────────────────────────────────────
   Contact form (contact.html)
   ──────────────────────────────────────────────────────────────────── */
.contact-form {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-field { display: flex; flex-direction: column; gap: 6px; }
.contact-field label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.contact-hint {
  color: var(--text-dim);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: none;
  margin-left: 4px;
}
.contact-field input,
.contact-field select,
.contact-field textarea {
  font-family: var(--font-body);
  background: rgba(20, 22, 28, 0.85);
  color: var(--text);
  border: 1px solid var(--divider);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 15px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(28, 30, 36, 0.95);
}
.contact-field textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.55;
}
.contact-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

/* Honeypot — visually hidden but still in the tab order for bots */
.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-submit {
  align-self: flex-start;
  margin-top: 8px;
}
.contact-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.contact-status {
  font-size: 13px;
  margin-top: 4px;
  min-height: 1.2em;
  color: var(--text-muted);
}
.contact-status--ok { color: #6FCF7A; }
.contact-status--err { color: #C8443B; }
.contact-status--pending { color: var(--gold); }

/* ────────────────────────────────────────────────────────────────────
   Back to Top button (assets/backtotop.js injects this)
   Appears once the visitor scrolls past the page midpoint.
   ──────────────────────────────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(14, 17, 22, 0.82);
  color: var(--gold);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.7);
  /* Hidden by default — faded out, nudged down, and non-interactive until
     the .is-visible class is added by the scroll handler. */
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease,
    background 0.2s ease, box-shadow 0.2s ease;
}
.back-to-top svg {
  width: 22px;
  height: 22px;
  display: block;
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  background: var(--gold);
  color: #0F0A00;
  box-shadow: 0 10px 26px -8px rgba(201, 162, 78, 0.55);
}
.back-to-top:active {
  transform: translateY(1px);
}
.back-to-top:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 0.2s ease;
    transform: none;
  }
  .back-to-top.is-visible {
    transform: none;
  }
}