/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  background:var(--ink);
  color:var(--paper);
  position:relative;
  overflow:hidden;
  padding:96px 0 88px;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(90deg, transparent, transparent 78px, rgba(255,255,255,0.035) 78px, rgba(255,255,255,0.035) 79px);
  pointer-events:none;
}
.hero-grid{
  display:grid; grid-template-columns:1fr; gap:48px;
  position:relative; z-index:1;
}
@media(min-width:960px){.hero-grid{grid-template-columns:1.1fr 0.9fr; align-items:center;}}

.hero h1{
  font-size:clamp(40px, 6vw, 68px);
  color:var(--paper);
  margin:18px 0 22px;
  text-transform:uppercase;
}
.hero h1 em{
  font-style:normal;
  color:var(--route-light);
}
.hero p.lede{
  font-size:17.5px;
  color:#C7D0D9;
  max-width:520px;
  margin-bottom:34px;
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}

.hero-visual{
  position:relative;
  min-height:340px;
}

/* Route map illustration */
.route-map{width:100%; height:100%;}
.route-map .path{
  fill:none; stroke:rgba(255,255,255,0.18); stroke-width:2; stroke-dasharray:6 8;
}
.route-map .path-active{
  fill:none; stroke:var(--route); stroke-width:2.5;
  stroke-dasharray:820; stroke-dashoffset:820;
  animation:draw 3.2s ease forwards 0.4s;
}
@keyframes draw{ to{stroke-dashoffset:0;} }
.route-map .stop{fill:var(--paper);}
.route-map .stop-ring{fill:none; stroke:var(--route); stroke-width:1.5; opacity:0.7;}
.route-map .label{
  font-family:var(--mono); font-size:11px; fill:#8FA0B0; letter-spacing:0.05em;
}
.route-map .label-hot{fill:var(--route-light);}