/* =====================================================================
   SECTIONS — hero broadcast frame, telemetry diff, ghost, onboard,
   highlight factory, win-probability, footer
   ===================================================================== */

/* ---------------- HERO : frozen broadcast frame ---------------- */
.hero {
  position: relative;
  padding-top: clamp(28px, 5vh, 56px);
  padding-bottom: clamp(40px, 7vh, 90px);
  overflow: hidden;
}

/* faint radar/tracker ring (logo mark) behind track */
.hero__radar {
  position: absolute;
  inset-inline-end: -180px;
  top: -120px;
  width: 720px; height: 720px;
  opacity: .06;
  pointer-events: none;
  background: url("../assets/logo-mark.png") center / contain no-repeat;
  filter: grayscale(1) brightness(1.6);
  z-index: 0;
}
.hero__radar::after {
  content:""; position:absolute; inset: 12%;
  border: 1px solid rgba(46,196,182,.35); border-radius: 50%;
}

.hero__head {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 18px;
  margin-bottom: 26px;
}
.hero__title {
  font-size: var(--t-xxl);
  max-width: 16ch;
}
.hero__title .accent { color: var(--speed); }
.hero__kicker {
  display:flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
html[dir="rtl"] .hero__kicker { align-items: flex-start; }
.hero__sub {
  color: var(--ink-mute);
  font-size: var(--t-md);
  max-width: 34ch;
}

/* the broadcast grid: track + side panels */
.broadcast {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: var(--gap);
  align-items: stretch;
}
@media (max-width: 980px) {
  .broadcast { grid-template-columns: 1fr; }
}

/* ---- The track (RTL: finish at the LEFT, runners move right→left) ---- */
.track {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--hair);
  background:
    radial-gradient(140% 120% at 100% 0%, rgba(212,160,23,.10), transparent 55%),
    linear-gradient(180deg, var(--panel-2), var(--bg));
  min-height: 420px;
  display: flex; flex-direction: column;
}
.track__bar {
  display:flex; align-items:center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--hair);
}
.track__bar .meta {
  margin-inline-start: auto;
  font-family: var(--font-num); font-size: var(--t-xs); color: var(--ink-mute);
  display:flex; gap: 16px;
}
.track__bar .meta b { color: var(--ink); }

.lanes {
  position: relative;
  flex: 1;
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 0;
}
/* finish line on the inline-start (left in RTL) */
.lanes::before {
  content:""; position:absolute; top:0; bottom:0;
  inset-inline-start: 14%;
  width: 3px;
  background: repeating-linear-gradient(180deg, var(--leader) 0 8px, transparent 8px 16px);
  opacity: .8;
  z-index: 4;
}
.lanes__finishlbl {
  position:absolute; top: 8px; inset-inline-start: 14%;
  transform: translateX(-50%);
  font-family: var(--font-num); font-size: var(--t-xxs); letter-spacing:.12em;
  color: var(--leader); z-index:5; white-space: nowrap;
}
html[dir="rtl"] .lanes__finishlbl { transform: translateX(50%); }

.lane {
  position: relative;
  height: 46px;
  display: flex; align-items: center;
  border-bottom: 1px solid var(--hair);
}
.lane:last-child { border-bottom: 0; }
.lane__no {
  position:absolute; inset-inline-end: 6px;
  font-family: var(--font-num); font-size: var(--t-xs); color: var(--ink-dim);
}
/* the camel token, positioned by inline custom prop --x (0 = finish side) */
.token {
  position: absolute;
  inset-inline-start: calc(14% + (var(--x) * (86% - 14%) / 100));
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
}
html[dir="rtl"] .token { transform: translateX(50%); }
.token .dot {
  width: 22px; height: 22px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-num); font-size: var(--t-xxs); font-weight:700; color:#160d0a;
  box-shadow: 0 0 14px rgba(0,0,0,.5);
}
.token .nm { font-size: var(--t-sm); font-weight:700; }
.token.leader .dot { background: var(--leader); box-shadow: var(--glow-leader); }
.token.leader .nm { color: var(--leader); }
.token.p2 .dot { background: var(--speed); }
.token.norm .dot { background: var(--ink-mute); }
.token.norm .nm { color: var(--ink-mute); }

/* ghost trail of the champion */
.ghost-trail {
  position: absolute; height: 3px; top: 50%; transform: translateY(-50%);
  inset-inline-start: 14%;
  width: calc((86% - 14%) * 0.86);
  background: linear-gradient(90deg, rgba(212,160,23,.5), rgba(212,160,23,0));
  border-radius: var(--r-pill);
  filter: blur(.3px);
}
html[dir="rtl"] .ghost-trail {
  background: linear-gradient(270deg, rgba(212,160,23,.5), rgba(212,160,23,0));
}

/* the win-probability ribbon along the bottom of the track */
.track__ribbon { padding: 12px 16px; border-top: 1px solid var(--hair); }
.track__ribbon .lbl {
  font-family: var(--font-num); font-size: var(--t-xxs); letter-spacing:.12em;
  color: var(--ink-dim); margin-bottom: 8px; display:flex; gap:10px; align-items:center;
}

/* ---- Side rail (leaderboard + telemetry) ---- */
.rail { display:flex; flex-direction: column; gap: var(--gap); }

.leaderboard .row {
  display:grid; grid-template-columns: 2.2ch 1fr auto auto; gap: 12px;
  align-items:center; padding: 9px 16px;
  border-bottom: 1px solid var(--hair);
  font-family: var(--font-num); font-size: var(--t-sm);
}
.leaderboard .row:last-child { border-bottom:0; }
.leaderboard .row .pos { color: var(--ink-dim); }
.leaderboard .row .nm { font-family: var(--font-ui); font-weight:700; color: var(--ink); }
.leaderboard .row .spd { color: var(--speed); }
.leaderboard .row .gap { color: var(--ink-mute); text-align: end; }
.leaderboard .row.is-leader { background: linear-gradient(90deg, rgba(212,160,23,.10), transparent); }
.leaderboard .row.is-leader .nm { color: var(--leader); }
.leaderboard .row.is-leader .gap { color: var(--leader); }
.leaderboard .row.reorder { background: linear-gradient(90deg, rgba(46,196,182,.08), transparent); }

.telepanel__body { padding: 16px; display:flex; flex-direction:column; gap: 18px; }
.telepanel .topline {
  display:flex; align-items:flex-end; justify-content: space-between; gap: 14px;
}
.telepanel .readout__val { font-size: clamp(2.4rem, 5vw, 3.4rem); }
.telepanel .pulseblk {
  display:flex; align-items:center; gap: 14px;
  padding: 12px; border:1px solid var(--hair); border-radius: var(--r-sm);
  background: var(--panel-2);
}
.telepanel .pulseblk .readout__val { font-size: clamp(2rem, 4.2vw, 2.8rem); }

/* hero stat strip */
.hero__strip {
  position: relative; z-index:2;
  margin-top: 22px;
  display:flex; flex-wrap: wrap; gap: 10px; align-items:center;
}

/* ---------------- SECTION 2 : telemetry differentiator ---------------- */
.diff__grid {
  display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
  margin-top: 44px;
}
@media (max-width: 820px){ .diff__grid { grid-template-columns: 1fr; } }
.diff-card { padding: 26px 24px; display:flex; flex-direction:column; gap: 16px; min-height: 230px; }
.diff-card .readout__val { font-size: clamp(2.8rem, 6vw, 4rem); }
.diff-card p { color: var(--ink-mute); font-size: var(--t-sm); }
.diff-card .mini-ecg { margin-top:auto; }
.diff__note {
  margin-top: 30px; display:flex; gap:14px; align-items:center;
  color: var(--ink-mute); font-size: var(--t-sm);
  border-inline-start: 3px solid var(--pulse); padding-inline-start: 16px;
}
.diff__note b { color: var(--ink); }

/* ---------------- SECTION 3 : ghost of the champion ---------------- */
.ghost { background: linear-gradient(180deg, var(--bg), var(--bg-2)); border-block:1px solid var(--hair); }
.ghost__grid {
  display:grid; grid-template-columns: 1fr 1.3fr; gap: clamp(24px, 5vw, 64px);
  align-items:center; margin-top: 40px;
}
@media (max-width: 900px){ .ghost__grid { grid-template-columns: 1fr; } }
.ghost__chart { padding: 22px; }
.ghost__chart svg { width:100%; height:auto; display:block; }
.ghost-legend { display:flex; gap: 22px; margin-top: 16px; font-family: var(--font-num); font-size: var(--t-sm); }
.ghost-legend span { display:flex; align-items:center; gap:8px; color: var(--ink-mute); }
.ghost-legend i { width:18px; height:3px; border-radius:2px; }
.ghost-legend .live i { background: var(--speed); }
.ghost-legend .rec i  { background: var(--leader); opacity:.7; }
.ghost__times { display:flex; gap: 26px; margin-top: 26px; flex-wrap:wrap; }
.ghost__time .v { font-family: var(--font-num); font-size: clamp(2rem,4vw,2.8rem); font-weight:600; }
.ghost__time .l { font-size: var(--t-xs); color: var(--ink-mute); letter-spacing:.1em; }
.ghost__time.win .v { color: var(--leader); }

/* ---------------- SECTION 4 : onboard cam ---------------- */
.onboard-sec__grid {
  display:grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px,4vw,52px);
  align-items:center; margin-top: 40px;
}
@media (max-width: 900px){ .onboard-sec__grid { grid-template-columns: 1fr; } }
.onboard-sec__copy h3 { font-size: var(--t-xl); }
.onboard-sec__copy p { color: var(--ink-mute); margin-top: 16px; }
.feature-list { list-style:none; padding:0; margin: 22px 0 0; display:flex; flex-direction:column; gap:14px; }
.feature-list li { display:flex; gap:12px; align-items:flex-start; font-size: var(--t-sm); color: var(--ink-mute); }
.feature-list li::before {
  content:""; flex:none; margin-top:6px; width:8px; height:8px; border-radius:2px;
  background: var(--speed); box-shadow: var(--glow-speed); transform: rotate(45deg);
}

/* ---------------- SECTION 5 : highlight factory ---------------- */
.factory { background: linear-gradient(180deg, var(--bg-2), var(--bg)); border-block:1px solid var(--hair); }
.factory__clips {
  display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
  margin-top: 44px;
}
@media (max-width: 820px){
  .factory__clips { grid-template-columns: repeat(2,1fr); }
  .factory__clips .clip:nth-child(3){ display:none; }
}
@media (max-width: 540px){
  .factory__clips { grid-template-columns: 1fr; }
  .factory__clips .clip:nth-child(2){ display:none; }
}
.clip:nth-child(2){ transform: translateY(-22px); }
.factory__engine {
  margin-top: 40px; display:flex; flex-wrap:wrap; align-items:center; gap: 16px 28px;
  padding: 22px 24px;
}
.factory__engine .flow {
  display:flex; align-items:center; gap: 14px; flex-wrap:wrap;
  font-family: var(--font-num); font-size: var(--t-sm); color: var(--ink-mute);
}
.factory__engine .flow b { color: var(--ink); }
.factory__engine .flow .arr { color: var(--speed); }

/* ---------------- SECTION 6 : win probability ---------------- */
.winprob__panel { margin-top: 40px; padding: 26px 24px; }
.winprob__big {
  display:grid; grid-template-columns: auto 1fr; gap: 28px; align-items:center;
}
@media (max-width: 700px){ .winprob__big { grid-template-columns: 1fr; } }
.winprob__lead .v { font-family: var(--font-num); font-size: clamp(3rem,8vw,5rem); font-weight:600; color: var(--leader); line-height:.9; text-shadow: 0 0 30px rgba(212,160,23,.4); }
.winprob__lead .nm { font-size: var(--t-lg); font-weight:700; margin-top:6px; }
.winprob__lead .l { font-size: var(--t-xs); color: var(--ink-mute); letter-spacing:.12em; margin-top:4px; }
.winprob__graph { display:flex; flex-direction:column; gap:14px; }
.winprob__factors { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); margin-top: 30px; }
@media (max-width: 700px){ .winprob__factors { grid-template-columns:1fr; } }
.factor { padding: 18px; }
.factor .k { font-family: var(--font-num); font-size: 1.4rem; font-weight:600; }
.factor.s .k { color: var(--speed); } .factor.p .k { color: var(--pulse); } .factor.o .k { color: var(--leader); }
.factor .l { font-size: var(--t-sm); color: var(--ink-mute); margin-top:6px; }
.winprob__nobet { margin-top: 24px; font-size: var(--t-sm); color: var(--ink-dim); display:flex; gap:10px; align-items:center; }

/* ---------------- FOOTER ---------------- */
.foot {
  border-top: 1px solid var(--hair);
  background: linear-gradient(180deg, transparent, rgba(168,85,200,.04)), var(--bg-2);
  padding-block: clamp(48px, 7vh, 86px);
}
.foot__top { display:flex; flex-wrap:wrap; gap: 30px; justify-content: space-between; align-items:flex-start; }
.foot__brand img { height: 64px; width:auto; }
.foot__fed { color: var(--ink-mute); font-size: var(--t-sm); max-width: 42ch; margin-top: 18px; line-height: 1.8; }
.foot__cols { display:flex; gap: clamp(28px, 6vw, 80px); flex-wrap:wrap; }
.foot__col h4 { font-size: var(--t-sm); letter-spacing:.08em; color: var(--ink); margin-bottom:14px; }
.foot__col a { display:block; color: var(--ink-mute); font-size: var(--t-sm); padding: 4px 0; transition: color .2s; }
.foot__col a:hover { color: var(--ink); }
.foot__bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--hair);
  display:flex; flex-wrap:wrap; gap: 16px; align-items:center; justify-content: space-between;
}
.foot__caveat { color: var(--ink-dim); font-size: var(--t-xs); max-width: 60ch; line-height:1.7; }
.foot__wordmark { color: var(--wordmark); font-family: var(--font-num); font-size: var(--t-xs); letter-spacing:.14em; }