:root{
  --ink:#0b0b0c;
  --char:#17171a;
  --steel:#2a2a2e;
  --grey:#8d8d93;
  --paper:#f4f4f1;
  --white:#ffffff;
  --red:#e80000;
  --red-deep:#b30000;
  --red-text:#ff4545;
  --mute:#5f5f66;
  --f-wide:"Michroma","Eurostile","Arial Black",sans-serif;
  --f-body:"Manrope",system-ui,sans-serif;
  --slant:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
  --gut:clamp(16px,4vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--white);font:500 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--f-wide);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.08;margin:0}
p{margin:0}

/* buttons: slanted like a start-light tab */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 26px;font:400 13px/1 var(--f-wide);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;clip-path:var(--slant);transition:background .2s,color .2s,transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--white);outline-offset:4px;clip-path:none}
.btn-red{background:var(--red);color:var(--white)}
.btn-red:hover{background:var(--red-deep)}
.btn-white{background:var(--white);color:var(--ink)}
.btn-black{background:var(--ink);color:var(--white)}
.btn-line{color:var(--white);background:transparent;border:2px solid var(--white);clip-path:none;transform:skewX(-12deg)}
.btn-line:hover{background:var(--white);color:var(--ink)}

.eyebrow-red,.eyebrow-dark,.kicker{font:400 13px/1.3 var(--f-wide);letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}
.eyebrow-red,.kicker{color:var(--red)}
.eyebrow-dark{color:var(--ink)}

/* top bar */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:32px;height:68px;padding-right:var(--gut);background:var(--ink)}
.bar-logo{display:flex;align-items:center;height:100%;padding:0 44px 0 var(--gut);background:var(--red);clip-path:polygon(0 0,100% 0,calc(100% - 22px) 100%,0 100%)}
.bar-logo img{height:30px;width:auto}
.bar-nav{display:flex;gap:30px;margin-left:auto}
.bar-nav a{font:400 13px/1 var(--f-wide);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:#d8d8dc;padding:8px 0}
.bar-nav a:hover{color:var(--white)}
.bar-cta{min-height:40px}

/* hero */
.hero{position:relative;padding:28px var(--gut) 0;overflow:hidden}
.hero-split{position:absolute;inset:0;background:var(--red);clip-path:polygon(62% 0,100% 0,100% 100%,44% 100%)}
.hero-frame{position:relative;max-width:1400px;margin:0 auto;aspect-ratio:16/8.4;min-height:560px;background:#1c1c1e;overflow:hidden}
.feed{position:absolute;inset:0;width:100%;height:100%}
.feed-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(8,8,9,.92) 0%,rgba(8,8,9,.7) 34%,rgba(8,8,9,0) 62%),
  repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
.hud{position:absolute;inset:22px 26px;pointer-events:none;font:400 13px/1 var(--f-wide);letter-spacing:.14em;color:#f0f0f0}
.hud>span{position:absolute;display:flex;align-items:center;gap:10px}
.hud-rec{top:0;right:0}
.hud-rec i{width:9px;height:9px;border-radius:50%;background:var(--red);animation:blink 1.2s steps(2) infinite}
.hud-lane{top:26px;right:0;color:#bdbdc2}
.hud-lane b{color:var(--white);font-weight:400}
.hud-time{bottom:0;right:0;font-size:22px;letter-spacing:.06em}
.hud-time small{font-size:13px;letter-spacing:.14em;color:#bdbdc2}
.hud-time b{font-weight:400;font-variant-numeric:tabular-nums}
.hud-throttle{bottom:40px;right:0}
.hud-throttle small{font-size:13px;color:#bdbdc2}
.hud-throttle em{display:block;width:120px;height:6px;background:rgba(255,255,255,.18);transform:skewX(-20deg)}
.hud-throttle i{display:block;height:100%;width:60%;background:var(--red)}
@keyframes blink{50%{opacity:0}}

.hero-copy{position:absolute;left:clamp(24px,5vw,72px);bottom:clamp(36px,6vw,80px);max-width:960px}
.hero-copy h1{font-size:clamp(44px,5.4vw,80px);line-height:1.02;margin-bottom:24px}
.hero-sub{max-width:470px;color:#d6d6da;font-size:18px;margin-bottom:32px}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px}

.hero-facts{position:relative;display:grid;grid-template-columns:repeat(3,1fr);max-width:1400px;margin:0 auto;padding:0;list-style:none;background:var(--ink)}
.hero-facts li{display:flex;align-items:baseline;gap:14px;padding:24px clamp(18px,3vw,40px)}
.hero-facts li+li{box-shadow:inset 1px 0 0 var(--steel)}
.hero-facts b{font:400 clamp(24px,2.6vw,36px)/1 var(--f-wide);color:var(--white)}
.hero-facts span{color:var(--grey);font-size:16px}

/* band */
.band{display:grid;grid-template-columns:1.05fr 1fr 1.1fr;width:calc(100% - 2 * var(--gut));max-width:1400px;margin:0 auto;background:var(--white);color:var(--ink)}
.band>div{padding:clamp(28px,3.4vw,48px)}
.band h2{font-size:clamp(20px,1.8vw,26px);margin-bottom:18px}
.map{width:100%;max-width:340px;height:auto;overflow:visible}
.map-line{fill:none;stroke:var(--red);stroke-width:5;stroke-linejoin:round}
.map-start{stroke:var(--ink);stroke-width:3}
.map-car{fill:var(--ink)}
.map-flag path:first-child{stroke:var(--ink);stroke-width:2}
.flag-bg{fill:var(--white);stroke:var(--ink);stroke-width:1}
.flag-sq{fill:var(--ink)}
.note{font-size:14px;color:var(--mute);margin-top:10px}

.band-next{position:relative}
.next-time{font-size:clamp(40px,4.2vw,62px)!important;line-height:1;margin-bottom:14px!important;font-variant-numeric:tabular-nums}
.next-line{font-weight:700;margin-bottom:6px}
.next-fine{font-size:14px;color:var(--mute);margin-bottom:24px;max-width:330px}

.band-about{position:relative;background:var(--char);color:var(--white);overflow:hidden}
.band-about p:last-child{color:#c9c9ce;font-size:16px}
.band-about h2{margin-bottom:18px}
.stripes{position:absolute;top:0;bottom:0;left:-36px;display:flex;gap:9px;transform:skewX(-24deg)}
.stripes i{width:9px;background:var(--red)}
.band-about>*:not(.stripes){position:relative;margin-left:44px}

/* how */
.how{max-width:1400px;margin:0 auto;padding:clamp(72px,9vw,128px) var(--gut)}
.how-head{display:flex;flex-direction:column;margin-bottom:clamp(40px,5vw,72px)}
.how-head h2,.sessions-head h2{font-size:clamp(32px,4.4vw,62px);margin-bottom:16px}
.lead{font-size:clamp(18px,1.6vw,22px);color:#c4c4c9;max-width:34ch}
.sessions .lead{color:var(--mute)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;padding:0;list-style:none}
.steps li{position:relative;padding:44px 30px 8px 0}
.steps li::before,.steps li::after{content:"";position:absolute;top:0;left:0;height:12px;transform:skewX(-30deg);transform-origin:0 100%}
.steps li::before{right:14px;background:var(--steel)}
.steps li::after{width:calc((100% - 14px) * var(--fill));background:var(--red)}
.steps li:nth-child(1){--fill:.25}.steps li:nth-child(2){--fill:.5}.steps li:nth-child(3){--fill:.75}.steps li:nth-child(4){--fill:1}
.steps h3{font-size:18px;line-height:1.35;margin-bottom:14px}
.steps p{color:#b9b9bf;font-size:16px}

/* sessions */
.sessions{position:relative;padding:clamp(72px,9vw,120px) var(--gut);background:var(--paper);color:var(--ink);overflow:hidden}
.sessions::before{content:"";position:absolute;top:0;right:-6%;width:44%;height:100%;background:var(--red);clip-path:polygon(32% 0,100% 0,100% 100%,0 100%)}
.sessions>*{position:relative;max-width:1400px;margin-left:auto;margin-right:auto}
.sessions-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:48px}
.drivers{display:flex;align-items:center;gap:8px;background:var(--ink);padding:8px;clip-path:var(--slant)}
.drivers-label{font:400 13px/1 var(--f-wide);letter-spacing:.1em;text-transform:uppercase;color:var(--grey);padding:0 12px 0 16px}
.drivers button{min-height:40px;padding:0 20px;border:0;background:transparent;color:#cfcfd4;font:400 13px/1 var(--f-wide);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;clip-path:var(--slant)}
.drivers button[aria-checked="true"]{background:var(--red);color:var(--white)}
.drivers button:focus-visible{outline:2px solid var(--white);outline-offset:-4px}

.tickets{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ticket{display:flex;flex-direction:column;gap:22px;padding:clamp(28px,3vw,44px);background:var(--white);color:var(--ink)}
.ticket-full{background:var(--ink);color:var(--white)}
.ticket header{display:flex;flex-direction:column;gap:14px;padding-bottom:4px}
.ticket-kind{font:400 14px/1 var(--f-wide);letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.ticket-full .ticket-kind{color:var(--red-text)}
.ticket-price{white-space:nowrap;font:400 clamp(48px,5vw,76px)/1 var(--f-wide);font-variant-numeric:tabular-nums}
.ticket-price .rs{font-size:.45em;vertical-align:.7em;margin-right:4px}
.ticket-per{font-size:14px;color:var(--mute)}
.ticket-full .ticket-per,.ticket-full dt{color:#a4a4aa}
.ticket dl{display:flex;gap:40px;margin:0}
.ticket dt{font:400 13px/1 var(--f-wide);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.ticket dd{margin:0;font:400 24px/1 var(--f-wide)}
.ticket>p{font-size:16px;color:inherit;opacity:.78;flex:1}
.ticket .btn{align-self:flex-start}
.sessions-fine{margin-top:28px;max-width:min(560px,52%);margin-left:0!important;font-size:14px;color:var(--mute)}

/* visit */
.visit{display:grid;grid-template-columns:1.1fr 1fr}
.visit-red{padding:clamp(56px,7vw,104px) var(--gut);background:var(--red);color:var(--white)}
.visit-red h2{font-size:clamp(28px,3.4vw,50px);margin-bottom:14px}
.visit-city{font-size:18px;margin-bottom:34px}
.visit-info{padding:clamp(56px,7vw,104px) var(--gut);background:var(--char)}
.visit-info dl{margin:0;display:grid;gap:0}
.visit-info dl div{display:grid;grid-template-columns:130px 1fr;gap:20px;padding:18px 0;box-shadow:inset 0 -1px 0 var(--steel)}
.visit-info dt{font:400 13px/1.6 var(--f-wide);letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.visit-info dd{margin:0;font-size:17px;min-width:0;overflow-wrap:anywhere}
.visit-info dt{color:#a4a4aa!important}
.visit-info a{text-decoration:none;border-bottom:1px solid var(--red)}

/* footer */
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px;padding:26px var(--gut);background:var(--ink);font-size:14px;color:#a9a9af}
.foot img{height:26px;width:auto}
.foot a{text-decoration:none}
.foot a:hover{color:var(--white)}
.foot nav{display:flex;gap:22px;margin-left:auto}

@media (max-width:1100px){
  .visit{grid-template-columns:1fr}
  .bar-nav{display:none}
  .bar-cta{margin-left:auto}
  .band{grid-template-columns:1fr 1fr}
  .band-about{grid-column:1/-1}
  .steps{grid-template-columns:1fr 1fr;row-gap:36px}
  .hero-facts li{flex-direction:column;gap:8px}
}
@media (max-width:760px){
  body{font-size:16px}
  .bar{height:60px;gap:12px}
  .bar-logo{padding:0 30px 0 16px}
  .bar-logo img{height:24px}
  .bar-cta{padding:0 16px;min-height:38px;font-size:10px}
  .hero{padding:16px 16px 0}
  .hero-split{clip-path:polygon(70% 0,100% 0,100% 100%,30% 100%)}
  .hero-frame{aspect-ratio:auto;min-height:0;height:min(760px,calc(100svh - 92px))}
  .feed-shade{background:linear-gradient(0deg,rgba(8,8,9,.95) 0%,rgba(8,8,9,.75) 45%,rgba(8,8,9,0) 75%),repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
  .hud{inset:16px}
  .hud-time{top:0;bottom:auto;left:0;right:auto;font-size:16px}
  .hud .hud-throttle{display:none}
  .hero-copy{left:20px;right:20px;bottom:24px}
  .hero-copy h1{font-size:clamp(40px,12vw,52px);margin-bottom:16px}
  .how-head h2,.sessions-head h2{font-size:30px}
  .visit-red h2{font-size:26px}
  .hero-sub{font-size:16px;margin-bottom:22px}
  .hero-facts{grid-template-columns:1fr}
  .hero-facts li{padding:16px 20px}
  .hero-facts li+li{box-shadow:inset 0 1px 0 var(--steel)}
  .band{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step-no{font-size:40px}
  .sessions::before{width:80%;height:34%;top:42%;right:-12%}
  .tickets{grid-template-columns:1fr}
  .sessions-fine{max-width:none}
  .hero-facts li{flex-direction:row}
  .drivers{width:100%}
  .drivers button{flex:1;padding:0 8px}
  .drivers-label{padding:0 6px 0 12px}
  .visit{grid-template-columns:1fr}
  .visit-info dl div{grid-template-columns:1fr;gap:4px}
  .foot nav{margin-left:0;flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hud-rec i{animation:none}
  .btn{transition:none}
}

/* entrances */
.rise{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rise.in{opacity:1;transform:none}
.steps li.rise::after{transform:skewX(-30deg) scaleX(0);transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) + .2s)}
.steps li.rise.in::after{transform:skewX(-30deg) scaleX(1)}
.hero-copy>*{animation:enter .8s cubic-bezier(.2,.7,.2,1) both}
.hero-copy>:nth-child(2){animation-delay:.08s}.hero-copy>:nth-child(3){animation-delay:.16s}.hero-copy>:nth-child(4){animation-delay:.24s}
@keyframes enter{from{opacity:0;transform:translateX(-40px)}}
.drivers button{transition:background .2s,color .2s}
.drivers button:active{transform:scale(.96)}
[data-price]{display:inline-block}
[data-price].tick{animation:tick .35s cubic-bezier(.2,.7,.2,1)}
@keyframes tick{from{transform:translateY(-30%);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  .steps li.rise::after{transform:skewX(-30deg);transition:none}
  .hero-copy>*,[data-price].tick{animation:none}
}