:root {
      --bg: #fff;
      --bg-2: #f8f9fa;
      --card: #ffffff;
      --text: #0e1726;
      --muted: #667085;
      --accent: #22d3c5;
      --road: #bfe5ff;
      --road-dim: #c9d3db;
      --max: 1200px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 20% 20%, rgba(94, 200, 255, 0.10), transparent 30%),
        radial-gradient(circle at 80% 10%, rgba(94, 200, 255, 0.06), transparent 25%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
      overflow-x: hidden;
    }
	
  .eyebrow-light{
    color:rgba(255,255,255,.74);
  }
	 
    .hero {
      
      display: grid;
      place-items: center;
      padding: 80px 24px;
      position: relative;
      isolation: isolate;
    }

    .hero__bg {
      position: absolute;
      
      background:
        radial-gradient(circle at 30% 40%, rgba(94, 200, 255, 0.12), transparent 20%),
        radial-gradient(circle at 70% 30%, rgba(255,255,255,0.10), transparent 22%),
        radial-gradient(circle at 60% 70%, rgba(94, 200, 255, 0.10), transparent 24%);
      transform: translateY(var(--parallax, 0px)) scale(1.1);
      z-index: -1;
      filter: blur(10px);
    }

    .hero__inner {
      width: 100%;
      max-width: var(--max);
      text-align: center;
    }

    .eyebrow {
    display: inline-block;
  margin-bottom: 14px;
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #12b8aa;
    }

    h1, h2, h3 {
  margin: 0;
  line-height: 1.05;
  letter-spacing: -.05em;
  color: var(--text);
}
h1 {
  font-size: clamp(2.2rem, 4vw, 4rem);
  
  text-align: center;
  margin: 20px 0 16px;
}
    .lead {
      max-width: 740px;
      margin: 0 auto;
      color: var(--muted);
      font-size: clamp(18px, 2vw, 22px);
      line-height: 1.6;
    }

    .story {
      position: relative;
      padding: 0px 20px 140px;
    }

    .story__inner {
      position: relative;
      max-width: var(--max);
      margin: 0 auto;
      min-height: 2600px;
    }
 
    .road-layer {
      position: sticky;
      top: 0;
      height: 100vh;
      pointer-events: none;
      z-index: 1;
    }

    .road-svg {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .road-base {
      fill: none;
      stroke: var(--road-dim);
      stroke-width: 3;
      stroke-linecap: round;
      stroke-dasharray: 10 16;
    }

    .road-progress {
fill: none;
  stroke: #7fdfff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 10 16;
  filter:
    drop-shadow(0 0 6px rgba(127,223,255,0.45))
    drop-shadow(0 0 14px rgba(34,211,197,0.35))
    drop-shadow(0 0 28px rgba(34,211,197,0.22));
    }
 
   .car-marker {
  position: absolute;
  width: 150px;
  height: auto;
  transform: translate(-50%, -55%) rotate(180deg);
  transform-origin: center center;
  pointer-events: none;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.18));
  z-index: 2;
    animation: carFloat 1.8s ease-in-out infinite;
}
 

@keyframes carFloat {
  0%   { margin-top: 0; }
  50%  { margin-top: -5px; }
  100% { margin-top: 0; }
}

    .step {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr minmax(80px, 180px) 1fr;
      align-items: center;
      min-height: 520px;
    }

    .step__content {
      background: var(--card);
      border: 1px solid #dbe5ea;
      border-radius: 24px;
      padding: 28px;
      box-shadow: 0 18px 40px rgba(0,0,0,0.10);
      max-width: 460px;
      transition: transform .35s ease, opacity .35s ease, border-color .35s ease;
     
      transform: translateY(24px) scale(0.98);
    }

    .step.active .step__content {
        opacity: 1;
  transform: translateY(0) scale(1.03);
  border-color: rgba(34,211,197,0.55);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.10),
    0 0 0 1px rgba(34,211,197,0.20),
    0 0 24px rgba(34,211,197,0.10);
    }

    .step.left .step__content {
      grid-column: 1;
      justify-self: end;
    }

    .step.right .step__content {
      grid-column: 3;
      justify-self: start;
    }

    .step__number {
      display: inline-flex;
      width: 42px;
      height: 42px;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(94, 200, 255, 0.14);
      color: var(--accent);
      font-weight: 700;
      margin-bottom: 16px;
    }

    .step h2 {
      margin: 0 0 12px;
      font-size: clamp(28px, 3vw, 40px);
    }

    .step p {
      margin: 0;
      color: var(--muted);
      font-size: 18px;
      line-height: 1.7;
    }

    .step__dot {
      grid-column: 2;
      justify-self: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 3px solid rgba(34,211,197,0.40);
      background: white;
      box-shadow: 0 0 0 10px rgba(94, 200, 255, 0.08);
      transition: transform .35s ease, background .35s ease, border-color .35s ease;
    }

    .step.active .step__dot {
      transform: scale(1.2);
      background: var(--accent);
      border-color: white;
    }

    .footer-space {
      height: 30vh;
    }

    @media (max-width: 900px) {
      .story__inner {
        min-height: 2200px;
      }
       .step {
        grid-template-columns: 1fr;
        gap: 22px;
        min-height: 440px;
        padding-inline: 8px;
      }
	  
.step__content {
  background: rgb(255, 255, 255, 0.9 );
  
}
      .step.left .step__content,
      .step.right .step__content {
        grid-column: 1;
        justify-self: center;
      }

      .step__dot {
        display: none;
      }

      .road-layer {
        
      }

      .car-marker {
       width: 144px;
      }
    }
.cta {
  background: linear-gradient(135deg,#0f172a 0%,#10213e 100%);
  padding: 88px 0;
}
.cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.cta  .eyebrow-light {
  color: rgba(255,255,255,.74);
}

.cta .cta-box h2 {
  color: #fff;
  margin-bottom: 14px;
  font-size: clamp(2rem,4vw,3.4rem);
  line-height: 1.04;
  letter-spacing: -.05em;
  margin-top: 0px;
}

.cta .cta-box p {
  max-width: 700px;
  color: rgba(255,255,255,.76);
}

.cta .btn-white {
  background: #fff;
  color: var(--text);
}
.cta .eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-size: .84rem;
  padding: 0px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
 color: rgba(255,255,255,.74);
 background: none;
 border: 0px;
}
 
@media (max-width: 820px) {
  .cta  .cta-box {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {

 .story {
      position: relative;
      padding: 20px 20px 140px;
    }
	
	 }