:root{
  --ink:#f5f3ef;
  --ink-dim:#a8a49d;
  --ground:#0a0908;
  --panel-line:#2a2724;
  --racing-1:#ff7b00;
  --racing-2:#f83416;
  --kinetic-1:#00d2ff;
  --kinetic-2:#0078ff;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:'Segoe UI',ui-sans-serif,system-ui,-apple-system,sans-serif;
  overflow-x:hidden;
}
.stage{
  position:relative;
  height:100vh;
  height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ---- top mark ---- */
.mark{
  position:absolute;
  top:28px; left:50%;
  transform:translateX(-50%);
  z-index:30;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  pointer-events:none;
}
.mark--mobile{display:none;}
.mark__glyph{
  height:38px;width:auto;
  display:block;
  object-fit:contain;
}
.mark__wordmark{
  font-size:11px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--ink-dim);
}

/* ---- split panels ---- */
.split{
  position:relative;
  flex:1;
  display:flex;
  min-height:0;
}
.panel{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  width:0;
  padding:0 0 88px 0;
  cursor:pointer;
  overflow:hidden;
  transition:flex-grow 520ms cubic-bezier(.22,.61,.36,1);
  text-decoration:none;
  color:inherit;
}
.split:hover .panel{flex-grow:0.86;}
.split:hover .panel:hover{flex-grow:1.3;}

.panel__bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transform:scale(1.06);
  transition:transform 700ms ease, filter 700ms ease;
  filter:saturate(0.85) brightness(0.62);
}
.panel:hover .panel__bg{transform:scale(1.13);filter:saturate(1) brightness(0.72);}

.panel__scrim{
  position:absolute;inset:0;
  mix-blend-mode:normal;
}
.panel--racing .panel__scrim{
  background:
    linear-gradient(0deg, rgba(10,9,8,0.94) 0%, rgba(10,9,8,0.35) 52%, rgba(10,9,8,0.55) 100%),
    linear-gradient(100deg, rgba(248,52,22,0.18), transparent 60%);
}
.panel--kinetic .panel__scrim{
  background:
    linear-gradient(0deg, rgba(10,9,8,0.94) 0%, rgba(10,9,8,0.35) 52%, rgba(10,9,8,0.55) 100%),
    linear-gradient(260deg, rgba(0,120,255,0.18), transparent 60%);
}

.panel__seam{
  position:absolute;top:110px;bottom:110px;width:1px;
  opacity:0.35;
}
.panel--racing .panel__seam{right:-0.5px;background:linear-gradient(0deg, transparent, var(--racing-1) 15%, var(--racing-2) 50%, var(--racing-1) 85%, transparent);}
.panel--kinetic .panel__seam{left:-0.5px;background:linear-gradient(0deg, transparent, var(--kinetic-2) 15%, var(--kinetic-1) 50%, var(--kinetic-2) 85%, transparent);}

.panel__stretch{
  position:absolute;inset:0;z-index:4;
  text-decoration:none;color:inherit;
}

.panel__content{
  position:relative;z-index:5;
  padding:0 56px;
  max-width:560px;
  pointer-events:none;
}
.panel__content a{pointer-events:auto;}
.panel__eyebrow{
  font-size:12px;
  letter-spacing:3.5px;
  text-transform:uppercase;
  font-weight:700;
  margin:0 0 14px 0;
  display:flex;align-items:center;gap:10px;
}
.panel--racing .panel__eyebrow{color:var(--racing-1);}
.panel--kinetic .panel__eyebrow{color:var(--kinetic-1);}
.panel__eyebrow::before{
  content:"";
  width:22px;height:2px;
  background:currentColor;
}

.panel__title{
  font-family:'Arial Narrow','Bahnschrift Condensed',sans-serif;
  font-weight:800;
  font-size:clamp(38px,5.4vw,66px);
  line-height:0.94;
  letter-spacing:0.5px;
  margin:0 0 18px 0;
  text-wrap:balance;
  text-transform:uppercase;
}
.panel__desc{
  font-size:15.5px;
  line-height:1.55;
  color:var(--ink-dim);
  margin:0 0 26px 0;
  max-width:44ch;
}
.panel__cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:13px 22px;
  border:1.5px solid rgba(245,243,239,0.4);
  border-radius:2px;
  transition:border-color 220ms ease, background 220ms ease, gap 220ms ease;
}
.panel--racing:hover .panel__cta{border-color:var(--racing-1);}
.panel--kinetic:hover .panel__cta{border-color:var(--kinetic-1);}
.panel__cta svg{width:14px;height:14px;transition:transform 220ms ease;}
.panel:hover .panel__cta{gap:14px;}
.panel:hover .panel__cta svg{transform:translateX(2px);}

/* secondary link inside racing panel -> Race-Insight */
.panel__sub{
  position:relative;z-index:5;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(245,243,239,0.18);
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  color:var(--ink-dim);
}
.panel__sub-badge{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:2px;
  background:linear-gradient(135deg,#00d2ff,#0078ff);
  color:#04121c;
}
.panel__sub a{
  color:var(--ink);
  text-decoration:none;
  font-weight:600;
  border-bottom:1px solid rgba(245,243,239,0.4);
}
.panel__sub a:hover{border-color:var(--kinetic-1);color:var(--kinetic-1);}
.panel__sub--spacer{visibility:hidden;pointer-events:none;}

/* footer strip */
.footer{
  position:absolute;
  bottom:0;left:0;right:0;
  z-index:20;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:18px 32px;
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--ink-dim);
  pointer-events:none;
}

@media (max-width:820px){
  .panel__sub--spacer{display:none;}
  .stage{height:100vh;height:100dvh;overflow:hidden;}
  .split{flex-direction:column;}
  .panel{
    width:auto;
    height:auto;
    flex:1 1 0;
    min-height:0;
    justify-content:center;
    padding:0;
    transition:flex-grow 460ms cubic-bezier(.22,.61,.36,1);
  }
  .split:hover .panel,
  .split:hover .panel:hover{flex-grow:1;}
  .panel.is-expanded{flex-grow:5;}
  .split.is-picked .panel:not(.is-expanded){flex-grow:0.6;}

  .panel__content{padding:0 24px;}
  .panel__seam{display:none;}
  .mark{display:none;}
  .mark--mobile{
    display:flex;
    position:relative;
    flex:0 0 auto;
    z-index:6;
    padding:14px 0;
  }
  .mark__glyph{height:30px;}
  .mark__wordmark{font-size:9.5px;letter-spacing:2px;}

  .panel__desc,.panel__cta,.panel__sub{
    opacity:0;
    max-height:0;
    margin:0;
    pointer-events:none;
    overflow:hidden;
    transition:opacity 260ms ease, max-height 420ms ease, margin 420ms ease;
  }
  .panel.is-expanded .panel__desc{opacity:1;max-height:160px;margin:0 0 22px 0;}
  .panel.is-expanded .panel__cta{opacity:1;max-height:60px;pointer-events:auto;}
  .panel.is-expanded .panel__sub{opacity:1;max-height:90px;margin-top:20px;pointer-events:auto;}

  .panel__title{font-size:clamp(30px,9vw,48px);margin-bottom:8px;}
  .panel.is-expanded .panel__title{margin-bottom:16px;}

  .panel__tap-hint{
    display:block;
    margin-top:10px;
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--ink-dim);
    opacity:0.7;
    transition:opacity 260ms ease, max-height 420ms ease;
  }
  .panel.is-expanded .panel__tap-hint{opacity:0;max-height:0;margin:0;}
}
@media (min-width:821px){
  .panel__tap-hint{display:none;}
}