*{box-sizing:border-box}
:root{
  --bg:#100b08;
  --cream:#fff0c8;
  --muted:#d8c09a;
  --orange:#f36b21;
  --red:#d8322f;
  --blue:#2364aa;
  --gold:#ffd166;
  --green:#2fa866;
  --line:rgba(255,240,200,.2);
}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--cream);
  background:
    radial-gradient(circle at top left,rgba(243,107,33,.25),transparent 28rem),
    radial-gradient(circle at top right,rgba(35,100,170,.22),transparent 30rem),
    linear-gradient(180deg,#160d08,#0a0a0a);
}
.top{
  width:min(1100px,calc(100% - 32px));
  margin:0 auto;
  padding:28px 0;
  display:flex;
  align-items:center;
  gap:14px;
}
.badge{
  width:52px;height:52px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--orange),var(--red));
  color:#260b00;
  font-weight:900;
  border:2px solid rgba(255,240,200,.7);
}
h1,h2,h3,p{margin-top:0}
h1{margin-bottom:3px}
.top p,.hero p,.brag-copy p,footer p{color:var(--muted);line-height:1.6}
main{width:min(1100px,calc(100% - 32px));margin:0 auto}
.hero{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:34px;
  align-items:center;
  padding:36px 0 60px;
}
.eyebrow{
  color:var(--orange);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.78rem;
  font-weight:900;
}
.hero h2,.brag-copy h2{
  font-size:clamp(2.4rem,6vw,5.5rem);
  line-height:.9;
  letter-spacing:-.06em;
}
.track{
  position:relative;
  height:430px;
  border:12px solid #1b1009;
  border-radius:30px;
  background:linear-gradient(145deg,#3b2b1d,#120f0c);
  box-shadow:0 30px 70px rgba(0,0,0,.45);
  overflow:hidden;
}
.oval{
  position:absolute;
  inset:42px;
  border:48px solid #191919;
  border-radius:50%;
  box-shadow:
    inset 0 0 0 8px #030303,
    0 0 0 8px rgba(243,107,33,.65),
    0 0 28px rgba(243,107,33,.35);
}
.rail{
  position:absolute;
  border:4px solid #d7d7d7;
  border-radius:50%;
  opacity:.75;
}
.rail-a{inset:78px}
.rail-b{inset:110px;opacity:.55}
.x{
  position:absolute;
  left:50%;top:50%;
  width:300px;height:34px;
  margin-left:-150px;margin-top:-17px;
  background:#191919;
  border-radius:999px;
  box-shadow:0 0 0 3px #050505;
}
.x1{transform:rotate(32deg)}
.x2{transform:rotate(-32deg)}
.danger{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  color:var(--orange);
  font-size:44px;
  font-weight:900;
  animation:pulse 1s infinite;
}
@keyframes pulse{50%{transform:translate(-50%,-50%) scale(1.3);opacity:.55}}
.car{
  position:absolute;
  width:56px;height:26px;
  border-radius:40% 55% 45% 40%;
  border:3px solid rgba(255,255,255,.75);
  box-shadow:0 10px 18px rgba(0,0,0,.45);
}
.red{background:linear-gradient(90deg,#8f1117,#ff3b30);animation:lap1 6s linear infinite}
.blue{background:linear-gradient(90deg,#0a3d91,#2e86de);animation:lap2 8s linear infinite}
.gold{background:linear-gradient(90deg,#a86a00,#ffd166);animation:lap3 7s linear infinite}
@keyframes lap1{
  0%{left:45%;top:22px}25%{left:85%;top:48%}50%{left:45%;top:86%}75%{left:5%;top:48%}100%{left:45%;top:22px}
}
@keyframes lap2{
  0%{left:5%;top:45%}25%{left:45%;top:22px}50%{left:85%;top:45%}75%{left:45%;top:86%}100%{left:5%;top:45%}
}
@keyframes lap3{
  0%{left:22%;top:26%}50%{left:68%;top:68%}100%{left:22%;top:26%}
}
.league,.brag-section{
  margin:70px 0;
}
.league h2{font-size:2.4rem}
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.cards article{
  border:1px solid var(--line);
  border-radius:22px;
  padding:22px;
  background:rgba(255,240,200,.06);
}
.cards strong{font-size:2.2rem;display:block;color:var(--gold)}
.cards span{color:var(--muted)}
.brag-section{
  display:grid;
  grid-template-columns:1fr 430px;
  gap:40px;
  align-items:center;
}
.brag-copy ul{
  color:var(--cream);
  line-height:2;
  font-weight:700;
}
.phone-frame{
  border-radius:42px;
  padding:18px;
  background:#050505;
  border:8px solid #222;
  box-shadow:0 34px 90px rgba(0,0,0,.55);
}
.brag-tag{
  border-radius:30px;
  padding:24px;
  background:linear-gradient(180deg,#ffe6af,#f6b65f);
  color:#2c1305;
  text-align:center;
  border:5px solid #8b2b12;
}
.brag-tag .mini,.tag-footer{
  color:#7a2a10;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:900;
  font-size:.78rem;
}
.slot-car-preview{
  width:190px;height:82px;
  margin:18px auto;
  border-radius:42% 54% 44% 40%;
  background:linear-gradient(90deg,#0a3d91,#2e86de);
  border:5px solid #fff6db;
  position:relative;
}
.slot-car-preview span{
  position:absolute;
  left:28px;right:28px;top:34px;
  height:10px;
  border-radius:999px;
  background:#fff6db;
}
.brag-tag h3{
  font-size:2.1rem;
  margin-bottom:4px;
}
.sub{color:#5d250e!important}
.stat{
  display:flex;
  justify-content:space-between;
  border-top:2px solid rgba(43,20,6,.22);
  padding:11px 0;
  text-align:left;
}
.stat span{font-weight:700}
.stat strong{font-size:1.3rem}
.tag-footer{margin-top:16px}
footer{
  width:min(1100px,calc(100% - 32px));
  margin:60px auto 0;
  padding:30px 0 46px;
  border-top:1px solid var(--line);
}
@media(max-width:900px){
  .hero,.brag-section{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .track{height:360px}
}