/* Vlačić V89 — top race journey + next start */
.vz89-topdrive{
  position:relative;
  padding:58px 0 64px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% -15%,rgba(38,111,184,.09),transparent 38%),
    linear-gradient(180deg,#ffffff 0%,#fbfcfe 72%,#f3f6fa 100%);
  border-bottom:1px solid rgba(12,39,70,.08);
}
.vz89-topdrive::before,
.vz89-topdrive::after{
  content:"";
  position:absolute;
  left:-7%;
  right:-7%;
  height:1px;
  bottom:31%;
  background:linear-gradient(90deg,transparent,rgba(23,75,126,.12),transparent);
  transform:rotate(-4deg);
}
.vz89-topdrive::after{bottom:24%;transform:rotate(3deg)}
.vz89-head{
  max-width:950px;
  margin:0 auto 42px;
  text-align:center;
  position:relative;
  z-index:1;
}
.vz89-head .eyebrow{
  margin:0 0 13px;
  color:#d8242b!important;
  font-weight:950;
  letter-spacing:.22em;
}
.vz89-head h2{
  margin:0;
  color:#0d203d;
  font-size:clamp(42px,5vw,76px);
  line-height:1.02;
  letter-spacing:-.035em;
}
.vz89-head p{
  margin:17px auto 0;
  max-width:650px;
  color:#64748b;
  font-size:17px;
  line-height:1.55;
}
.vz89-race{
  --vz89-progress:0%;
  position:relative;
  z-index:1;
  width:min(94vw,1560px);
  margin:0 auto;
  padding:27px 12px 6px;
}
.vz89-track{
  position:absolute;
  left:4.4%;
  right:4.4%;
  top:61px;
  height:5px;
  border-radius:999px;
  background:#d9e1e9;
  box-shadow:inset 0 1px 2px rgba(15,38,64,.10);
}
.vz89-track::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:var(--vz89-progress);
  border-radius:999px;
  background:linear-gradient(90deg,#e4232b 0%,#ef4439 22%,#ff8124 43%,#f5b919 61%,#b9cf28 74%,#2db353 100%);
  box-shadow:0 0 13px rgba(229,35,43,.22);
  transition:width .09s linear;
}
.vz89-start-mark,.vz89-finish-mark{
  position:absolute;
  top:43px;
  z-index:2;
  font-weight:1000;
  letter-spacing:-.12em;
  user-select:none;
  pointer-events:none;
}
.vz89-start-mark{left:0;color:#e4232b;font-size:26px;opacity:.48}
.vz89-finish-mark{right:0;color:#0d203d;font-size:22px;letter-spacing:-.2em;opacity:.35}
.vz89-steps{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:9px;
}
.vz89-step{
  --step:#1e5a91;
  min-width:0;
  text-align:center;
  cursor:default;
}
.vz89-step:nth-child(1){--step:#e4232b}
.vz89-step:nth-child(2){--step:#ef4439}
.vz89-step:nth-child(3){--step:#f35e31}
.vz89-step:nth-child(4){--step:#ff8124}
.vz89-step:nth-child(5){--step:#f1aa18}
.vz89-step:nth-child(6){--step:#d7c51d}
.vz89-step:nth-child(7){--step:#3eb749}
.vz89-step:nth-child(8){--step:#24a84b}
.vz89-dot{
  width:70px;
  height:70px;
  margin:0 auto 25px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:var(--step);
  border:4px solid var(--step);
  font-size:22px;
  font-weight:1000;
  box-shadow:0 5px 18px rgba(16,41,72,.08),0 0 0 4px #fff;
  transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .22s ease;
}
.vz89-step.is-lit .vz89-dot{
  transform:translateY(-5px) scale(1.05);
  background:var(--step);
  color:#fff;
  box-shadow:0 7px 20px rgba(16,41,72,.12),0 0 0 4px #fff,0 0 22px color-mix(in srgb,var(--step) 60%,transparent);
}
.vz89-step h3{
  margin:0;
  color:#0d203d;
  font-size:18px;
  line-height:1.2;
  transition:transform .18s ease,color .18s ease;
}
.vz89-step.is-lit h3{color:var(--step);transform:translateY(-2px)}
.vz89-step p{
  margin:9px auto 0;
  max-width:145px;
  color:#66788d;
  font-size:13px;
  line-height:1.42;
}
.vz89-detail{
  display:flex;
  justify-content:center;
  margin:30px 0 0;
}
.vz89-detail a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:390px;
  min-height:48px;
  padding:0 25px;
  border:1px solid #365474;
  border-radius:999px;
  color:#173858;
  text-decoration:none;
  font-weight:900;
  background:rgba(255,255,255,.84);
  transition:.2s ease;
}
.vz89-detail a:hover{transform:translateY(-2px);background:#fff;box-shadow:0 12px 24px rgba(15,42,72,.08)}

.vz89-startcard{
  position:relative;
  z-index:2;
  width:min(91vw,1450px);
  margin:48px auto 0;
  display:grid;
  grid-template-columns:150px minmax(0,1fr) minmax(300px,370px);
  gap:34px;
  align-items:center;
  min-height:310px;
  padding:29px 34px;
  border-radius:28px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 77% 45%,rgba(25,103,176,.22),transparent 31%),
    linear-gradient(135deg,#071a32 0%,#0b2c52 63%,#09233f 100%);
  box-shadow:0 26px 56px rgba(8,31,57,.22);
}
.vz89-startcard::before{
  content:"";
  position:absolute;
  right:-5%;
  bottom:-70%;
  width:58%;
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(99,164,225,.08);
  box-shadow:0 0 0 40px rgba(99,164,225,.025),0 0 0 90px rgba(99,164,225,.02);
  pointer-events:none;
}
.vz89-lights{
  position:relative;
  z-index:2;
  width:104px;
  margin:auto;
  padding:13px;
  border-radius:28px;
  background:linear-gradient(145deg,#24364b,#07111e);
  border:2px solid rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 4px rgba(0,0,0,.27),0 15px 28px rgba(0,0,0,.28);
}
.vz89-lamp{
  display:block;width:70px;
  height:70px;
  margin:8px auto;
  border-radius:50%;
  background:#0b1118;
  border:5px solid #263343;
  box-shadow:inset 0 8px 13px rgba(0,0,0,.8);
  transition:background .18s ease,box-shadow .18s ease;
}
.vz89-lamp.red{background:#3c0d12}
.vz89-lamp.amber{background:#3b2b0a}
.vz89-lamp.green{background:#0b351d}
.vz89-startcard.vz89-red .vz89-lamp.red{
  background:#e1242d;box-shadow:0 0 22px rgba(225,36,45,.8),inset 0 4px 10px rgba(255,255,255,.22);
}
.vz89-startcard.vz89-amber .vz89-lamp.amber{
  background:#f5b51d;box-shadow:0 0 22px rgba(245,181,29,.82),inset 0 4px 10px rgba(255,255,255,.22);
}
.vz89-startcard.vz89-green .vz89-lamp.green{
  background:#2bc553;box-shadow:0 0 26px rgba(43,197,83,.88),inset 0 4px 10px rgba(255,255,255,.24);
}
.vz89-startcard.vz89-green .vz89-status-dot{
  background:#2bc553;box-shadow:0 0 12px rgba(43,197,83,.85);
}
.vz89-main{
  position:relative;
  z-index:2;
  min-width:0;
}
.vz89-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 9px;
  color:#ff4e55;
  font-weight:950;
  font-size:12px;
  letter-spacing:.14em;
}
.vz89-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border:1px solid rgba(255,77,83,.55);
  border-radius:999px;
  background:rgba(255,70,76,.06);
}
.vz89-status-dot{
  width:7px;height:7px;border-radius:50%;background:#7e8d9b;transition:.2s ease;
}
.vz89-main h2{
  margin:0 0 7px;
  color:#fff;
  font-size:clamp(34px,3.4vw,52px);
  line-height:1.04;
  letter-spacing:-.025em;
}
.vz89-main > p{
  margin:0;
  color:#d5e1ed;
  font-size:15px;
}
.vz89-date-row{
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:19px;
  padding:15px 19px;
  width:max-content;
  max-width:100%;
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  background:rgba(255,255,255,.045);
}
.vz89-datebox{
  display:flex;
  align-items:baseline;
  gap:9px;
}
.vz89-day{
  font-size:43px;
  line-height:1;
  font-weight:1000;
  color:#fff;
}
.vz89-month{
  font-size:17px;
  font-weight:950;
  color:#f3c231;
  letter-spacing:.09em;
}
.vz89-year{font-size:14px;font-weight:800;color:#aebfd0}
.vz89-time{
  position:relative;
  padding-left:24px;
  font-size:35px;
  line-height:1;
  font-weight:1000;
  color:#fff;
}
.vz89-time::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:1px;
  background:rgba(255,255,255,.25);
}
.vz89-docs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:15px;
}
.vz89-docs span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.11);
  color:#eff6fd;
  font-size:12px;
  font-weight:800;
}
.vz89-docs span::before{content:"✓";color:#54dc7c;font-weight:1000}
.vz89-actions{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:13px;
  padding-left:32px;
  border-left:1px solid rgba(255,255,255,.18);
}
.vz89-actions a{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  border-radius:13px;
  text-decoration:none;
  font-weight:950;
  font-size:17px;
}
.vz89-actions .call{
  color:#fff;
  background:linear-gradient(180deg,#ef2d31,#d9171d);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 10px 26px rgba(221,25,31,.32),0 0 0 1px rgba(255,47,54,.15);
}
.vz89-actions .contact{
  color:#fff;
  border:1px solid rgba(255,255,255,.42);
  background:rgba(255,255,255,.025);
}
.vz89-actions a:hover{transform:translateY(-1px)}
.vz89-security{
  margin:5px 0 0;
  color:#9fb1c3;
  font-size:12px;
  text-align:center;
}

@media(max-width:1120px){
  .vz89-startcard{grid-template-columns:116px minmax(0,1fr) 300px;gap:25px;padding:25px}
  .vz89-lights{width:90px}.vz89-lamp{width:58px;height:58px}
  .vz89-step h3{font-size:16px}.vz89-step p{font-size:12px}
}
@media(max-width:900px){
  .vz89-topdrive{padding:43px 0 48px}
  .vz89-race{overflow-x:auto;padding:23px 20px 15px;scrollbar-width:thin}
  .vz89-track{left:58px;right:auto;width:920px}
  .vz89-steps{width:1000px;grid-template-columns:repeat(8,116px);gap:9px}
  .vz89-start-mark{left:18px}.vz89-finish-mark{left:1015px;right:auto}
  .vz89-detail{justify-content:flex-start;width:1000px;padding-left:312px}
  .vz89-startcard{grid-template-columns:100px 1fr;margin-top:32px}
  .vz89-actions{grid-column:1/-1;border-left:0;border-top:1px solid rgba(255,255,255,.15);padding:18px 0 0;display:grid;grid-template-columns:1fr 1fr}
  .vz89-security{grid-column:1/-1}
}
@media(max-width:640px){
  .vz89-head{padding:0 18px;margin-bottom:28px}
  .vz89-head h2{font-size:40px}
  .vz89-head p{font-size:15px}
  .vz89-startcard{width:calc(100% - 24px);grid-template-columns:1fr;padding:20px;border-radius:21px}
  .vz89-lights{display:flex;width:auto;padding:9px 10px;border-radius:20px;margin:0}
  .vz89-lamp{width:42px;height:42px;margin:0 6px;border-width:3px}
  .vz89-main h2{font-size:32px}
  .vz89-date-row{width:100%;justify-content:space-between;gap:10px}
  .vz89-day{font-size:38px}
  .vz89-time{font-size:30px}
  .vz89-actions{display:flex}
  .vz89-detail a{min-width:0;width:92vw}
}
@media(prefers-reduced-motion:reduce){
  .vz89-dot,.vz89-step h3,.vz89-track::after,.vz89-lamp{transition:none!important}
}