/* 1980s F1 — neon, chrome, CRT scanlines, digital dash */

:root {
  --f1-ink:      #0b0f1a;
  --f1-deep:     #101628;
  --f1-panel:    #161d34;
  --f1-bone:     #e9ecf5;
  --f1-haze:     #8a93b2;
  --f1-cyan:     #00e5ff;
  --f1-magenta:  #ff2fb8;
  --f1-yellow:   #ffe400;
  --f1-lime:     #c8ff00;
  --f1-red:      #ff243d;
  --f1-orange:   #ff7a1a;
  --grid: rgba(255,255,255,0.06);
}

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

.f1-body {
  background: var(--f1-ink);
  color: var(--f1-bone);
  font-family: "Rajdhani", "Helvetica Neue", sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  min-height: 100dvh;
  background-image:
    radial-gradient(1000px 500px at 10% 0%, rgba(0, 229, 255, 0.18), transparent 60%),
    radial-gradient(900px 500px at 95% 30%, rgba(255, 47, 184, 0.18), transparent 60%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: auto, auto, 40px 40px, 40px 40px;
}
.f1-body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9990;
  background: repeating-linear-gradient(0deg,
    rgba(255,255,255,0.025) 0 2px,
    transparent 2px 4px);
  mix-blend-mode: overlay;
}

/* championship stripe at the top */
.f1-bars {
  position: sticky; top: 0; z-index: 30;
  display: flex; height: 8px;
}
.f1-bars span { flex: 1; }
.f1-bars span:nth-child(1) { background: var(--f1-red); }
.f1-bars span:nth-child(2) { background: var(--f1-orange); }
.f1-bars span:nth-child(3) { background: var(--f1-yellow); }
.f1-bars span:nth-child(4) { background: var(--f1-cyan); }
.f1-bars span:nth-child(5) { background: var(--f1-magenta); }

/* ---- NAV ---- */
.f1-nav {
  position: sticky; top: 8px; z-index: 29;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(20px, 4vw, 56px);
  background: color-mix(in oklab, var(--f1-ink) 85%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: "Orbitron", "Rajdhani", sans-serif;
}
.f1-nav__brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 900; font-size: 14px; letter-spacing: 0.2em;
  text-transform: uppercase;
}
.f1-nav__logo {
  color: var(--f1-cyan);
  text-shadow: 0 0 10px var(--f1-cyan);
}
.f1-nav__pipe { color: var(--f1-haze); margin: 0 8px; }
.f1-nav__org { color: var(--f1-yellow); }
.f1-nav__links {
  display: none; gap: 28px;
  font-size: 12px; letter-spacing: 0.24em;
  color: var(--f1-haze);
}
@media (min-width: 820px) { .f1-nav__links { display: flex; } }
.f1-nav__links a {
  color: inherit; text-decoration: none;
  padding: 6px 0; border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.f1-nav__links a:hover { color: var(--f1-cyan); border-color: var(--f1-cyan); }
.f1-nav__round {
  font-size: 12px; letter-spacing: 0.28em;
  color: var(--f1-ink);
  background: var(--f1-yellow);
  padding: 6px 14px;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
  font-weight: 900;
}

/* ---- HERO ---- */
.f1-hero {
  position: relative;
  padding: clamp(44px, 7vw, 100px) clamp(20px, 4vw, 56px) clamp(60px, 8vw, 120px);
  overflow: hidden;
}
.f1-hero__crt {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg,
      rgba(0, 229, 255, 0.08) 0 1px,
      transparent 1px 3px);
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
}

.f1-hero__grid {
  position: relative;
  display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 60px);
  max-width: 1400px; margin: 0 auto;
}
@media (min-width: 1000px) {
  .f1-hero__grid { grid-template-columns: 1.35fr 1fr; align-items: center; }
}

.f1-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Share Tech Mono", monospace;
  font-size: 12px; letter-spacing: 0.32em;
  color: var(--f1-cyan);
  padding: 6px 14px;
  background: rgba(0, 229, 255, 0.1);
  border: 1px solid rgba(0, 229, 255, 0.4);
  margin-bottom: 24px;
  text-transform: uppercase;
}
.f1-hero__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--f1-cyan);
  box-shadow: 0 0 12px var(--f1-cyan);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.35; } }

.f1-hero__title {
  font-family: "Orbitron", sans-serif;
  font-size: clamp(56px, 9vw, 132px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.9;
  margin: 0 0 22px;
  text-transform: uppercase;
}
.f1-hero__title-line1 {
  display: block;
  background: linear-gradient(180deg, var(--f1-bone) 0%, var(--f1-haze) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1px rgba(0, 229, 255, 0.35);
}
.f1-hero__title-line2 {
  display: block;
  color: var(--f1-yellow);
  text-shadow:
    4px 4px 0 var(--f1-magenta),
    8px 8px 0 var(--f1-cyan);
}

.f1-hero__tag {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5; max-width: 56ch;
  color: var(--f1-haze);
  margin: 0 0 28px;
}

.f1-hero__telemetry {
  display: grid; grid-template-columns: repeat(3, auto);
  gap: 20px 28px;
  font-family: "Share Tech Mono", monospace;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(0, 229, 255, 0.25);
  padding: 14px 20px;
  margin-bottom: 28px;
  width: max-content;
  max-width: 100%;
}
.f1-hero__telemetry-k {
  display: block;
  font-size: 10px; letter-spacing: 0.28em;
  color: var(--f1-haze);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.f1-hero__telemetry-v {
  font-size: 20px; color: var(--f1-cyan);
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
  font-weight: 700;
}

.f1-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- BUTTONS ---- */
.f1-btn {
  display: inline-flex; align-items: center;
  padding: 16px 28px;
  font-family: "Orbitron", sans-serif;
  font-weight: 700; font-size: 13px;
  letter-spacing: 0.24em; text-transform: uppercase;
  text-decoration: none;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  transition: transform .15s, filter .2s;
  position: relative;
}
.f1-btn--go {
  background: linear-gradient(90deg, var(--f1-yellow), var(--f1-orange));
  color: var(--f1-ink);
  box-shadow: 0 0 0 1px rgba(255,228,0,0.5), 0 0 24px rgba(255,122,26,0.35);
}
.f1-btn--go:hover { transform: translateY(-2px); filter: brightness(1.05); }
.f1-btn--ghost {
  background: transparent;
  color: var(--f1-bone);
  outline: 1px solid var(--f1-cyan);
  outline-offset: -1px;
}
.f1-btn--ghost:hover {
  color: var(--f1-cyan);
  background: rgba(0, 229, 255, 0.08);
}
.f1-btn--xl { padding: 22px 40px; font-size: 16px; }

/* ---- DASH PANEL ---- */
.f1-panel {
  background: var(--f1-panel);
  border: 1px solid rgba(0, 229, 255, 0.25);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 20px 60px rgba(0,0,0,0.5);
  overflow: hidden;
}
.f1-panel__top {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(90deg, var(--f1-deep), var(--f1-panel));
  border-bottom: 1px solid rgba(0, 229, 255, 0.2);
}
.f1-panel__led {
  width: 10px; height: 10px; border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}
.f1-panel__led--g { color: var(--f1-lime);    background: currentColor; }
.f1-panel__led--y { color: var(--f1-yellow);  background: currentColor; }
.f1-panel__led--r { color: var(--f1-red);     background: currentColor; }
.f1-panel__top-label {
  margin-left: auto;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px; letter-spacing: 0.26em;
  color: var(--f1-haze);
}
.f1-panel__screen {
  padding: 20px 22px;
  font-family: "Share Tech Mono", monospace;
  background:
    repeating-linear-gradient(0deg,
      rgba(0, 229, 255, 0.04) 0 1px,
      transparent 1px 3px);
}
.f1-panel__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
  font-size: 14px;
}
.f1-panel__row span {
  color: var(--f1-haze);
  letter-spacing: 0.24em;
  font-size: 11px;
}
.f1-panel__row b {
  color: var(--f1-cyan);
  font-weight: 700;
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.35);
}
.f1-panel__bar { margin: 18px 0 10px; }
.f1-panel__bar-k {
  color: var(--f1-haze);
  letter-spacing: 0.24em;
  font-size: 11px;
  margin-bottom: 8px;
}
.f1-panel__bar-bg {
  height: 12px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(0, 229, 255, 0.25);
  position: relative; overflow: hidden;
}
.f1-panel__bar-fg {
  height: 100%;
  background: linear-gradient(90deg, var(--f1-lime), var(--f1-yellow) 50%, var(--f1-red));
  box-shadow: 0 0 16px rgba(255, 228, 0, 0.5);
  position: relative;
}
.f1-panel__bar-fg::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,
    transparent 0 6px, rgba(0,0,0,0.25) 6px 7px);
}
.f1-panel__bar-meta {
  display: flex; justify-content: space-between;
  font-size: 11px;
  color: var(--f1-haze);
  margin-top: 6px;
  letter-spacing: 0.2em;
}
.f1-panel__countdown {
  margin-top: 16px;
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 16px;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--f1-magenta);
  color: var(--f1-magenta);
}
.f1-panel__countdown span {
  font-size: 10px; letter-spacing: 0.3em;
  color: var(--f1-haze);
}
.f1-panel__countdown b {
  font-family: "Orbitron", monospace;
  font-size: 22px;
  color: var(--f1-magenta);
  text-shadow: 0 0 10px var(--f1-magenta);
}
.f1-panel__countdown small {
  font-size: 10px; margin-left: 2px; opacity: 0.7;
}

/* ---- SPECS STRIP ---- */
.f1-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  margin: 0 clamp(20px, 4vw, 56px);
  background: rgba(0, 229, 255, 0.2);
  border: 1px solid rgba(0, 229, 255, 0.25);
}
.f1-specs__cell {
  background: var(--f1-deep);
  padding: 24px 22px;
  position: relative;
  overflow: hidden;
}
.f1-specs__n {
  position: absolute; top: -20px; right: -6px;
  font-family: "Orbitron", sans-serif;
  font-size: 110px; font-weight: 900;
  color: rgba(0, 229, 255, 0.06);
  line-height: 1;
  pointer-events: none;
}
.f1-specs__k {
  font-family: "Share Tech Mono", monospace;
  font-size: 11px; letter-spacing: 0.28em;
  color: var(--f1-haze);
  margin-bottom: 10px;
}
.f1-specs__v {
  font-family: "Orbitron", sans-serif;
  font-size: 34px; font-weight: 900;
  color: var(--f1-yellow);
  text-shadow: 0 0 14px rgba(255, 228, 0, 0.35);
  letter-spacing: -0.01em;
}

/* ---- PHASES ---- */
.f1-phases {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 56px);
}
.f1-phases__head {
  display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 44px;
}
.f1-phases__head h2 {
  font-family: "Orbitron", sans-serif;
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0;
  text-transform: uppercase;
}
.f1-phases__head h2 span {
  color: var(--f1-cyan);
  text-shadow: 0 0 16px rgba(0, 229, 255, 0.4);
}
.f1-phases__head p {
  max-width: 42ch; color: var(--f1-haze); margin: 0;
}

.f1-phases__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.f1-phase {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 24px 28px;
  background: linear-gradient(180deg, var(--f1-panel), var(--f1-deep));
  border-left: 3px solid var(--f1-cyan);
  border-right: 1px solid rgba(255,255,255,0.06);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: transform .2s, border-left-color .2s;
  position: relative;
  overflow: hidden;
}
.f1-phase::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(0, 229, 255, 0.08), transparent 40%);
  pointer-events: none;
}
.f1-phase:hover {
  transform: translateX(6px);
  border-left-color: var(--f1-magenta);
}
.f1-phase__n {
  font-family: "Orbitron", sans-serif;
  font-size: 52px; font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--f1-cyan);
  line-height: 1;
}
.f1-phase__body h3 {
  font-family: "Orbitron", sans-serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.f1-phase__meta {
  font-family: "Share Tech Mono", monospace;
  font-size: 12px; letter-spacing: 0.16em;
  color: var(--f1-haze);
  margin-bottom: 6px;
}
.f1-phase__meta-win { color: var(--f1-yellow); }
.f1-phase__body p {
  margin: 0;
  font-size: 14px;
  color: var(--f1-bone);
  max-width: 60ch;
}
.f1-phase__arrow {
  font-size: 18px;
  color: var(--f1-cyan);
  opacity: 0.6;
  transition: opacity .2s, transform .2s;
}
.f1-phase:hover .f1-phase__arrow {
  opacity: 1; color: var(--f1-magenta); transform: translateX(4px);
}

/* ---- SPONSORS ---- */
.f1-sponsors {
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 22px 0 26px;
  background: var(--f1-deep);
  overflow: hidden;
}
.f1-sponsors__label {
  text-align: center;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px; letter-spacing: 0.32em;
  color: var(--f1-haze);
  margin-bottom: 14px;
  text-transform: uppercase;
}
.f1-sponsors__track {
  display: flex; gap: 64px;
  width: max-content;
  animation: f1drift 32s linear infinite;
}
@keyframes f1drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .f1-sponsors__track { animation: none; }
}
.f1-sponsors__item {
  font-family: "Orbitron", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.18em;
  color: var(--f1-bone);
  white-space: nowrap;
  position: relative;
}
.f1-sponsors__item::before {
  content: "▲";
  color: var(--f1-magenta);
  margin-right: 18px;
  text-shadow: 0 0 8px var(--f1-magenta);
}

/* ---- CTA ---- */
.f1-cta {
  position: relative;
  margin: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 56px);
  padding: clamp(48px, 6vw, 96px) clamp(28px, 5vw, 80px);
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--f1-magenta) 85%, black) 0%,
      color-mix(in oklab, var(--f1-cyan) 75%, black) 100%);
  color: var(--f1-ink);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
  overflow: hidden;
}
.f1-cta__grid {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(11,15,26,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,15,26,0.18) 1px, transparent 1px);
  background-size: 32px 32px;
  mask: linear-gradient(180deg, transparent, black 30%, black 70%, transparent);
  pointer-events: none;
}
.f1-cta__inner { position: relative; max-width: 780px; }
.f1-cta__eyebrow {
  font-family: "Share Tech Mono", monospace;
  letter-spacing: 0.3em;
  font-size: 12px;
  color: var(--f1-ink);
  background: var(--f1-yellow);
  display: inline-block;
  padding: 4px 10px;
  margin-bottom: 18px;
}
.f1-cta h2 {
  font-family: "Orbitron", sans-serif;
  font-size: clamp(56px, 8vw, 128px);
  font-weight: 900;
  line-height: 0.9; margin: 0 0 22px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-shadow: 4px 4px 0 rgba(11,15,26,0.3);
}
.f1-cta h2 span {
  color: var(--f1-yellow);
  text-shadow:
    4px 4px 0 var(--f1-red),
    8px 8px 0 rgba(11,15,26,0.5);
}
.f1-cta p {
  margin: 0 0 30px;
  max-width: 52ch;
  font-size: 17px;
  color: rgba(11,15,26,0.82);
  line-height: 1.5;
}

/* ---- FOOTER ---- */
.f1-foot {
  padding: 34px clamp(20px, 4vw, 56px) 72px;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px; letter-spacing: 0.24em;
  color: var(--f1-haze);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  text-transform: uppercase;
}
.f1-foot a { color: var(--f1-cyan); text-decoration: none; }
.f1-foot a:hover { color: var(--f1-magenta); }


.f1-nav__org-logo { height: 30px; width: auto; display: block; background: rgba(255,255,255,0.95); padding: 2px 6px; border-radius: 2px; }