:root {
  color-scheme: dark;
  --bg: #061019;
  --surface: #0b1924;
  --line: #1a3446;
  --line-bright: #2a536b;
  --text: #eef8ff;
  --muted: #849dac;
  --cyan: #42d8ff;
  --green: #a9ef46;
  --red: #ff6479;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); }
body::before { content: ""; position: fixed; z-index: -1; inset: 0; background: linear-gradient(rgba(66,216,255,.025) 1px, transparent 1px), linear-gradient(90deg,rgba(66,216,255,.025) 1px,transparent 1px), radial-gradient(circle at 76% 7%, rgba(28,125,164,.2), transparent 34rem); background-size: 44px 44px,44px 44px,auto; }
a { color: inherit; text-decoration: none; }
.site-header, main, footer { width: min(1360px, calc(100% - 64px)); margin-inline: auto; }
.site-header { min-height: 96px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 40px; border-bottom: 1px solid var(--line); }
.wordmark { display: flex; align-items: center; gap: 12px; width: max-content; }
.wordmark-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--cyan); color: var(--cyan); font-size: .72rem; font-weight: 850; letter-spacing: .08em; clip-path: polygon(0 0,82% 0,100% 18%,100% 100%,18% 100%,0 82%); }
.wordmark > span:last-child { display: flex; align-items: baseline; gap: 7px; letter-spacing: .035em; }
.wordmark b { font-size: .94rem; }
.wordmark small { color: var(--cyan); font-size: .58rem; font-weight: 800; letter-spacing: .18em; }
.site-header > nav { display: flex; gap: 34px; color: #a8bbc7; font-size: .78rem; font-weight: 660; }
.site-header > nav a:hover { color: var(--cyan); }
.header-cta { justify-self: end; padding: 11px 15px; border: 1px solid var(--line-bright); color: #dcebf4; font-size: .75rem; font-weight: 700; }
.header-cta:hover { border-color: var(--cyan); color: var(--cyan); }

.hero { min-height: 650px; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(360px,.65fr); align-items: center; gap: clamp(60px,9vw,150px); padding: 82px 4vw 84px; border-bottom: 1px solid var(--line); }
.eyebrow, .section-index { color: var(--cyan); font-size: .68rem; font-weight: 800; letter-spacing: .17em; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.live-dot.offline { background: var(--red); box-shadow: 0 0 12px var(--red); }
.hero h1 { margin: 0; max-width: 800px; font-size: clamp(3.8rem,7.8vw,7.2rem); font-weight: 790; letter-spacing: -.072em; line-height: .87; }
.hero h1 em { color: var(--cyan); font-style: normal; font-weight: 540; }
.hero-lead { max-width: 670px; margin: 36px 0 0; color: #9db1be; font-size: clamp(1rem,1.35vw,1.16rem); line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.button { padding: 14px 18px; border: 1px solid var(--line-bright); font-size: .82rem; font-weight: 750; }
.button.primary { border-color: var(--cyan); background: var(--cyan); color: #041018; }
.button.primary:hover { background: #8ce8ff; }
.button.secondary:hover { border-color: var(--cyan); color: var(--cyan); }

.live-card { position: relative; border: 1px solid var(--line-bright); background: rgba(7,20,30,.82); box-shadow: 24px 24px 0 rgba(21,57,73,.16); }
.live-card::before { content: ""; position: absolute; inset: -7px auto auto -7px; width: 28px; height: 28px; border-top: 1px solid var(--cyan); border-left: 1px solid var(--cyan); }
.live-card-head { display: flex; justify-content: space-between; padding: 17px 20px; border-bottom: 1px solid var(--line); color: var(--cyan); font-size: .65rem; font-weight: 800; letter-spacing: .14em; }
.live-card-head b { color: var(--green); font-weight: 750; letter-spacing: .05em; }
.matchup { min-height: 160px; display: flex; flex-direction: column; justify-content: center; padding: 28px 24px; }
.matchup strong { font-size: clamp(1.3rem,2vw,1.8rem); letter-spacing: -.035em; line-height: 1.15; }
.matchup strong span { color: var(--cyan); font-size: .58em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.matchup > span { margin-top: 12px; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.live-stats { display: grid; grid-template-columns: repeat(3,1fr); border-block: 1px solid var(--line); }
.live-stats div { padding: 18px 12px; border-right: 1px solid var(--line); text-align: center; }
.live-stats div:last-child { border-right: 0; }
.live-stats strong, .live-stats span { display: block; }
.live-stats strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.live-stats span { margin-top: 4px; color: var(--muted); font-size: .6rem; text-transform: uppercase; }
.live-card > a { display: flex; justify-content: space-between; padding: 17px 20px; color: var(--cyan); font-size: .72rem; font-weight: 700; }

.mission { display: grid; grid-template-columns: 1fr 3fr; gap: 60px; padding: 108px 4vw; border-bottom: 1px solid var(--line); }
.mission h2, .principles h2 { max-width: 900px; margin: 0; font-size: clamp(2.1rem,4vw,4rem); letter-spacing: -.05em; line-height: 1.03; }
.mission > div > p { max-width: 760px; margin: 28px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.8; }

.destinations { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid var(--line); }
.destination { min-height: 390px; display: grid; grid-template-rows: auto 1fr auto; position: relative; padding: 30px; border-right: 1px solid var(--line); transition: background 160ms ease; }
.destination:last-child { border-right: 0; }
.destination:hover { background: rgba(66,216,255,.045); }
.destination-number { color: #5f7888; font-size: .68rem; font-variant-numeric: tabular-nums; }
.destination > div:nth-of-type(2) { align-self: end; }
.destination p { margin: 0 0 9px; color: var(--cyan); font-size: .62rem; font-weight: 800; letter-spacing: .14em; }
.destination h2 { margin: 0; font-size: 2rem; letter-spacing: -.045em; }
.destination div > span { display: block; max-width: 320px; margin-top: 13px; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.destination > b { position: absolute; right: 28px; bottom: 28px; color: var(--cyan); font-size: 1.3rem; }
.destination-icon { align-self: center; justify-self: center; width: 92px; height: 92px; display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; transform: rotate(45deg); }
.destination-icon i { border: 1px solid var(--cyan); background: rgba(66,216,255,.09); }
.destination-icon.crosshair { display: block; border: 1px solid var(--green); border-radius: 50%; background: linear-gradient(transparent 49%,var(--green) 49%,var(--green) 51%,transparent 51%),linear-gradient(90deg,transparent 49%,var(--green) 49%,var(--green) 51%,transparent 51%); }
.destination-icon.playback { display: block; width: 0; height: 0; border-top: 46px solid transparent; border-bottom: 46px solid transparent; border-left: 74px solid var(--cyan); transform: none; opacity: .8; }

.principles { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding: 112px 4vw; }
.principles .section-index { margin: 0 0 24px; }
.principle-list article { display: grid; grid-template-columns: 44px 1fr; gap: 20px; padding: 25px 0; border-top: 1px solid var(--line); }
.principle-list article > span { color: var(--cyan); font-size: .72rem; }
.principle-list h3 { margin: 0; font-size: 1.05rem; }
.principle-list p { margin: 8px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.site-footer { min-height: 190px; display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; align-items: start; gap: 54px; padding-block: 43px; border-top: 1px solid var(--line); color: var(--muted); font-size: .7rem; }
.footer-brand > span { color: var(--text); font-weight: 850; letter-spacing: .08em; }
.footer-brand p { max-width: 310px; margin: 12px 0 0; line-height: 1.55; }
.footer-links { display: grid; grid-template-columns: repeat(2,max-content); justify-content: center; gap: 12px 30px; font-size: .7rem; }
.footer-links a { color: #b5c7d1; }
.footer-links a:hover { color: var(--cyan); }
.footer-credits { justify-self: end; text-align: right; line-height: 1.65; }
.footer-credits p { margin: 0; }
.footer-credits a, .footer-credits span { color: var(--text); font-weight: 700; }
.footer-credits a:hover { color: var(--cyan); }

@media (max-width: 900px) {
  .site-header, main, footer { width: min(100% - 32px,1360px); }
  .site-header { grid-template-columns: 1fr auto; }
  .site-header > nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-inline: 0; }
  .hero h1 { font-size: clamp(3.2rem,14vw,6rem); }
  .live-card { max-width: 600px; }
  .mission { grid-template-columns: 1fr; padding-inline: 0; }
  .destinations { grid-template-columns: 1fr; }
  .destination { min-height: 300px; border-right: 0; border-bottom: 1px solid var(--line); }
  .principles { grid-template-columns: 1fr; padding-inline: 0; }
}
@media (max-width: 560px) {
  .header-cta { display: none; }
  .site-header { display: flex; }
  .hero { min-height: auto; padding-top: 58px; }
  .hero h1 { font-size: 3.45rem; }
  .mission, .principles { padding-block: 76px; }
  .destination { padding-inline: 20px; }
  .site-footer { grid-template-columns: 1fr; gap: 28px; padding-block: 34px; }
  .footer-links { justify-content: start; }
  .footer-credits { justify-self: start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }