:root { --lime:#b8ff00; --violet:#7773ff; --paper:#f7f8f3; --muted:#aaaca7; --line:rgba(255,255,255,.13); --mx:0; --my:0; }
* { box-sizing:border-box; }
html { background:#050505; scroll-behavior:smooth; }
body { margin:0; background:#050505; color:var(--paper); font-family:Inter,"Segoe UI",Arial,sans-serif; }
a { color:inherit; }
.race-stage { position:relative; min-height:100svh; overflow:hidden; isolation:isolate; display:grid; grid-template-rows:auto 1fr auto; background:radial-gradient(circle at 55% 110%,rgba(184,255,0,.075),transparent 34%),linear-gradient(135deg,#090a0a 0%,#030303 55%,#09090c 100%); }
.race-stage::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.18; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; }
.ambient { position:absolute; z-index:-2; width:42vw; height:42vw; border-radius:50%; filter:blur(120px); opacity:.22; pointer-events:none; transform:translate(calc(var(--mx) * 18px),calc(var(--my) * 18px)); transition:transform .35s ease-out; }
.ambient-lime { background:var(--lime); left:-23vw; top:22%; }
.ambient-violet { background:var(--violet); right:-20vw; top:-13vw; opacity:.17; }
.speed-grid { position:absolute; inset:0; z-index:-1; pointer-events:none; background:repeating-linear-gradient(112deg,transparent 0 84px,rgba(255,255,255,.035) 84px 85px); mask-image:linear-gradient(90deg,transparent,#000 35%,#000 70%,transparent); }
.topbar,.footer { width:min(1460px,calc(100% - 80px)); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:5; }
.topbar { padding:28px 0 16px; }
.brand-mark { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-size:13px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.brand-dot { width:10px; height:10px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 5px rgba(184,255,0,.09),0 0 26px rgba(184,255,0,.7); }
.season-tag { padding:9px 14px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.04); backdrop-filter:blur(18px); color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.season-tag span { color:var(--lime); margin-right:8px; }
.hero { width:min(1460px,calc(100% - 80px)); margin:auto; display:grid; grid-template-columns:minmax(360px,.93fr) minmax(520px,1.07fr); align-items:center; gap:clamp(46px,7vw,120px); padding:34px 0 46px; }
.logo-zone { position:relative; min-height:min(65vh,700px); display:grid; place-items:center; perspective:1200px; }
.logo-halo { position:absolute; width:78%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(184,255,0,.21),rgba(119,115,255,.05) 50%,transparent 69%); filter:blur(25px); animation:breathe 5s ease-in-out infinite; }
.logo-glass { position:relative; width:min(100%,570px); height:min(65vh,680px); display:grid; place-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:48px 18px 48px 18px; background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.025) 50%),rgba(10,10,10,.55); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 35px 80px rgba(0,0,0,.55),0 0 80px rgba(184,255,0,.07); backdrop-filter:blur(26px) saturate(135%); transform:rotateY(calc(var(--mx) * -2.8deg)) rotateX(calc(var(--my) * 2.3deg)); transition:transform .3s ease-out; }
.logo-glass::before { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 12%,rgba(255,255,255,.08) 34%,transparent 48%); transform:translateX(-70%); animation:glass-pass 8s ease-in-out infinite; }
.rider-logo { width:108%; height:108%; object-fit:contain; mix-blend-mode:screen; filter:saturate(1.08) contrast(1.05) drop-shadow(0 0 22px rgba(184,255,0,.18)); transform:translateY(1%); }
.number-ghost { position:absolute; right:-6%; bottom:-9%; z-index:-1; color:transparent; -webkit-text-stroke:1px rgba(184,255,0,.24); font:italic 900 clamp(150px,18vw,300px)/.8 "Arial Black",sans-serif; letter-spacing:-.13em; transform:skewX(-9deg); opacity:.65; }
.hero-copy { max-width:720px; }
.eyebrow { display:flex; align-items:center; gap:11px; margin-bottom:22px; color:var(--lime); font-size:12px; font-weight:900; letter-spacing:.2em; text-transform:uppercase; }
.pulse { width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 0 rgba(184,255,0,.5); animation:pulse 2s infinite; }
h1 { margin:0; max-width:700px; font-family:"Arial Black","Segoe UI Black",Impact,sans-serif; font-size:clamp(54px,6.6vw,108px); font-weight:950; line-height:.9; letter-spacing:-.068em; text-transform:uppercase; text-wrap:balance; }
h1 span { display:block; color:var(--lime); text-shadow:0 0 34px rgba(184,255,0,.13); }
.intro { max-width:610px; margin:27px 0 29px; color:#c3c5c0; font-size:clamp(16px,1.25vw,19px); line-height:1.65; }
.stats { max-width:640px; display:grid; grid-template-columns:.75fr .85fr 1.55fr; border:1px solid var(--line); border-radius:20px; background:linear-gradient(120deg,rgba(255,255,255,.075),rgba(255,255,255,.025)); backdrop-filter:blur(22px); box-shadow:inset 0 1px 0 rgba(255,255,255,.075); }
.stat { min-height:85px; padding:15px 20px; display:flex; flex-direction:column; justify-content:center; border-right:1px solid var(--line); }
.stat:last-child { border-right:0; }
.stat strong { font:italic 900 28px/1 "Arial Black",sans-serif; letter-spacing:-.04em; }
.stat span { margin-top:7px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.actions { display:flex; align-items:center; gap:25px; margin-top:30px; }
.primary-action { position:relative; min-height:56px; padding:0 20px 0 24px; display:inline-flex; align-items:center; gap:23px; border-radius:13px 4px 13px 4px; background:var(--lime); color:#050505; text-decoration:none; font-size:12px; font-weight:950; letter-spacing:.1em; text-transform:uppercase; box-shadow:0 12px 38px rgba(184,255,0,.16); transition:transform .2s ease,box-shadow .2s ease; }
.primary-action svg { width:21px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.primary-action:hover { transform:translateY(-3px); box-shadow:0 16px 44px rgba(184,255,0,.26); }
.primary-action:focus-visible,.text-action:focus-visible,.brand-mark:focus-visible { outline:2px solid var(--violet); outline-offset:5px; }
.text-action { color:#d4d5d1; font-size:12px; font-weight:800; text-underline-offset:6px; text-decoration-color:rgba(255,255,255,.25); transition:color .2s ease; }
.text-action:hover { color:var(--lime); }
.footer { padding:16px 0 24px; gap:32px; }
.footer p { margin:0; flex:none; color:#777a74; font-size:9px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.footer p span { color:var(--lime); padding-inline:7px; }
.track-line { width:100%; height:1px; overflow:visible; background:rgba(255,255,255,.11); position:relative; }
.track-line i { position:absolute; left:0; top:-1px; width:24%; height:3px; background:linear-gradient(90deg,transparent,var(--lime)); box-shadow:0 0 14px var(--lime); animation:lap 5s ease-in-out infinite; }
@keyframes breathe { 50% { transform:scale(1.08); opacity:.75; } }
@keyframes pulse { 70% { box-shadow:0 0 0 8px rgba(184,255,0,0); } 100% { box-shadow:0 0 0 0 rgba(184,255,0,0); } }
@keyframes glass-pass { 0%,45% { transform:translateX(-80%); } 65%,100% { transform:translateX(110%); } }
@keyframes lap { 0% { transform:translateX(-100%); } 60%,100% { transform:translateX(430%); } }
@media (max-width:980px) {
  .topbar,.hero,.footer { width:min(100% - 40px,720px); }
  .topbar { padding-top:20px; }
  .hero { grid-template-columns:1fr; gap:18px; padding:18px 0 34px; text-align:center; }
  .hero-copy { margin-inline:auto; }
  .logo-zone { min-height:36vh; order:1; }
  .logo-glass { height:min(40vh,400px); width:min(78vw,390px); border-radius:30px 12px; }
  .number-ghost { right:3%; bottom:-4%; }
  .hero-copy { order:2; }
  .eyebrow { justify-content:center; margin-bottom:15px; }
  h1 { font-size:clamp(45px,11vw,76px); }
  .intro { margin:19px auto 22px; }
  .stats { margin-inline:auto; }
  .actions { justify-content:center; }
}
@media (max-width:600px) {
  .topbar,.hero,.footer { width:calc(100% - 28px); }
  .season-tag { font-size:8px; padding:8px 10px; letter-spacing:.08em; }
  .brand-mark { font-size:10px; }
  .hero { align-content:center; gap:11px; padding-top:8px; }
  .logo-zone { min-height:31vh; }
  .logo-glass { width:min(72vw,300px); height:min(31vh,320px); border-radius:24px 9px; }
  .eyebrow { font-size:9px; margin-bottom:12px; }
  h1 { font-size:clamp(40px,13.8vw,64px); line-height:.91; }
  .intro { font-size:14px; line-height:1.5; margin:15px auto 18px; max-width:93%; }
  .stats { border-radius:15px; grid-template-columns:.7fr .8fr 1.5fr; }
  .stat { min-height:69px; padding:11px 8px; }
  .stat strong { font-size:22px; }
  .stat span { font-size:7px; letter-spacing:.08em; }
  .actions { flex-direction:column; gap:14px; margin-top:20px; }
  .primary-action { min-height:50px; font-size:10px; }
  .text-action { font-size:10px; }
  .footer { justify-content:center; padding:12px 0 17px; }
  .footer p { font-size:7px; }
  .track-line { display:none; }
}
@media (max-height:760px) and (min-width:981px) { .logo-zone { min-height:530px; } .logo-glass { height:530px; } h1 { font-size:clamp(60px,6.2vw,88px); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }