PAGE 7: TRANSPORT
   ═══════════════════════════════════════════ */
.route-visual {
  position: relative; padding: 0 0 40px;
}
.route-line {
  position: absolute; left: 36px; top: 20px; bottom: 0;
  width: 4px; border-radius: 4px;
  background: linear-gradient(to bottom, var(--theme-color2), rgba(200,155,44,0.2));
}
.route-stop {
  position: relative; padding-left: 88px; margin-bottom: 32px;
}
.route-stop-marker {
  position: absolute; left: 18px; top: 6px;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #fff; z-index: 1;
}
.route-stop-marker.start { background: linear-gradient(135deg, var(--theme-color), var(--theme-color2)); box-shadow: 0 6px 18px rgba(30,38,109,0.3); }
.route-stop-marker.mid { background: linear-gradient(135deg, var(--theme-color2), #e6a820); box-shadow: 0 6px 18px rgba(200,155,44,0.3); }
.route-stop-marker.end { background: linear-gradient(135deg, #2ecc71, #27ae60); box-shadow: 0 6px 18px rgba(46,204,113,0.3); }
.route-stop-card {
  background: #fff; border-radius: 18px; padding: 20px 24px;
  box-shadow: 0 8px 28px rgba(30,38,109,0.05);
  border: 1px solid rgba(30,38,109,0.06);
  transition: all .3s ease;
}
.route-stop-card:hover { transform: translateX(8px); box-shadow: 0 15px 40px rgba(30,38,109,0.09); }
.route-stop-label { font-size: 11px; font-weight: 700; color: var(--theme-color2); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.route-stop-title { font-size: 16px; font-weight: 800; color: var(--theme-color); margin-bottom: 4px; }
.route-stop-info { font-size: 13px; color: #777; line-height: 1.6; margin: 0; }

/* Bus safety pillars */
.transport-pillar {
  text-align: center; padding: 32px 20px;
  background: #fff; border-radius: 20px;
  box-shadow: 0 8px 28px rgba(30,38,109,0.05);
  border: 1px solid rgba(30,38,109,0.06);
  transition: all .3s ease; height: 100%;
}
.transport-pillar:hover { transform: translateY(-6px); box-shadow: 0 20px 45px rgba(30,38,109,0.1); }
.transport-pillar-icon {
  width: 76px; height: 76px; border-radius: 50%;
  margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: #fff;
}

/* ═══════════════════════════════════════════