:root{
  --indigo: 99,102,241;
  --sky: 56,189,248;
  --emerald: 52,211,153;
}

/* ---------- HERO BACKGROUND (dark tech) ---------- */
.aurora{
  background:
    radial-gradient(60% 60% at 10% 10%, rgba(var(--indigo),.35) 0%, transparent 55%),
    radial-gradient(55% 55% at 90% 15%, rgba(var(--sky),.25) 0%, transparent 60%),
    radial-gradient(50% 50% at 60% 90%, rgba(var(--emerald),.18) 0%, transparent 60%);
  filter: blur(22px);
  transform: scale(1.1);
  animation: auroraMove 10s ease-in-out infinite alternate;
}
@keyframes auroraMove{
  0%{ transform: translate3d(-1%, -1%, 0) scale(1.1); opacity:.9;}
  100%{ transform: translate3d(1%, 1%, 0) scale(1.15); opacity:1;}
}

.grid-overlay{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 30%, black 0%, transparent 60%);
  opacity:.35;
  animation: gridMove 14s linear infinite;
}
@keyframes gridMove{
  0%{ background-position: 0 0, 0 0;}
  100%{ background-position: 128px 64px, 128px 64px;}
}

/* floating particles (tech dust) */
.particles{
  background-image:
    radial-gradient(circle, rgba(255,255,255,.20) 1px, transparent 1px),
    radial-gradient(circle, rgba(56,189,248,.18) 1px, transparent 1px),
    radial-gradient(circle, rgba(99,102,241,.18) 1px, transparent 1px);
  background-size: 140px 140px, 220px 220px, 320px 320px;
  mix-blend-mode: screen;
  opacity:.25;
  animation: particlesDrift 26s linear infinite;
}
@keyframes particlesDrift{
  0%{ background-position: 0 0, 40px 80px, -80px 40px; }
  100%{ background-position: 240px 180px, 320px -40px, 120px 240px; }
}

/* moving routes */
.route, .route2{
  stroke: rgba(148,163,184,.7);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 10 10;
  animation: dash 5s linear infinite;
}
.route2{ stroke: rgba(56,189,248,.55); animation-duration: 7s; }
@keyframes dash{ to { stroke-dashoffset: -240; } }

/* shimmer/progress */
.progress{
  background: linear-gradient(90deg, rgba(var(--indigo),.95), rgba(var(--sky),.9), rgba(var(--emerald),.8));
  animation: shimmer 1.8s linear infinite;
  transform: translateX(-20%);
}
@keyframes shimmer{
  0%{ transform: translateX(-35%); }
  100%{ transform: translateX(35%); }
}

.floaty{ animation: floaty 3.5s ease-in-out infinite; }
@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

/* ---------- LIGHT SECTIONS TECH PATTERN ---------- */
.soft-grid{
  background-image:
    radial-gradient(circle at 1px 1px, rgba(15,23,42,.10) 1px, transparent 0);
  background-size: 18px 18px;
}

/* ---------- ICON MICRO-ANIMS ---------- */
.pulseDot{ animation: pulseDot 1.4s ease-in-out infinite; transform-origin: center; }
@keyframes pulseDot { 0%,100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.8); opacity: 1; } }

.pulseRing{
  position: relative;
}
.pulseRing::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  border:1px solid rgba(var(--sky),.55);
  opacity:.0;
  transform: scale(.65);
  animation: ring 1.7s ease-out infinite;
}
@keyframes ring{
  0%{ opacity:.0; transform: scale(.65); }
  30%{ opacity:.55; }
  100%{ opacity:0; transform: scale(1.25); }
}

.radarSweep{ animation: radar 2.6s linear infinite; transform-origin: 50% 50%; }
@keyframes radar { from { transform: rotate(0deg); opacity: .95; } to { transform: rotate(360deg); opacity: .95; } }

.barShine{ animation: bar 1.4s ease-in-out infinite; }
@keyframes bar { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* pricing highlight glow */
.glowBorder{
  box-shadow:
    0 0 0 1px rgba(var(--indigo),.35),
    0 0 0 1px rgba(34,211,238,.12) inset,
    0 18px 60px rgba(var(--indigo),.18);
}

/* card hover polish */
.cardHover{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cardHover:hover{
  transform: translateY(-3px);
  border-color: rgba(99,102,241,.35);
  box-shadow: 0 18px 55px rgba(2,6,23,.10);
}

/* animated road + truck (CSS motion path with fallback) */
.roadLine{
  stroke: rgba(148,163,184,.55);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 8 10;
  animation: dash 6s linear infinite;
}
.truck{
  width: 46px;
  height: 46px;
  position: absolute;
  left: 6%;
  top: 66%;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
  animation: driveFallback 9s linear infinite;
}
@keyframes driveFallback{
  0%{ transform: translateX(0) translateY(0) rotate(-3deg); opacity:.95; }
  45%{ transform: translateX(260px) translateY(-42px) rotate(1deg); }
  100%{ transform: translateX(560px) translateY(-110px) rotate(3deg); opacity:.95; }
}
@supports (offset-path: path("M0 0 L10 10")){
  .truck{
    left: auto; top: auto;
    offset-path: path("M 70 290 C 210 180, 330 330, 470 230 S 680 120, 840 160");
    -webkit-offset-path: path("M 70 290 C 210 180, 330 330, 470 230 S 680 120, 840 160");
    offset-rotate: auto;
    -webkit-offset-rotate: auto;
    animation: drive 9.5s linear infinite;
  }
  @keyframes drive{
    0%{ offset-distance: 0%; opacity:.96; }
    100%{ offset-distance: 100%; opacity:.96; }
  }
}

/* reveal on scroll */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* tiny sparkline anim */
.spark path{ stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw 1.8s ease forwards; }
@keyframes draw{ to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce){
  .aurora,.grid-overlay,.particles,.route,.route2,.progress,.floaty,
  .pulseDot,.pulseRing::after,.radarSweep,.barShine,.truck,.reveal,.spark path{
    animation: none !important;
    transition: none !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* --- Control tower section enhancements --- */
.ctChip{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid rgba(226,232,240,1);
  background: rgba(255,255,255,.85);
  padding:.45rem .75rem;
  border-radius: 9999px;
  font-size:.875rem;
  color: rgb(51,65,85);
  box-shadow: 0 1px 0 rgba(15,23,42,.04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.ctChip:hover{ transform: translateY(-1px); box-shadow: 0 10px 30px rgba(15,23,42,.10); border-color: rgba(203,213,225,1); }
.ctChip.isActive{ border-color: rgba(var(--indigo),.35); box-shadow: 0 0 0 3px rgba(var(--indigo),.10), 0 18px 40px rgba(15,23,42,.10); background: rgba(255,255,255,.98); }
.ctChipDot{ width:.5rem; height:.5rem; border-radius:9999px; display:inline-block; }
.ctChipCount{ margin-left:.25rem; font-size:.75rem; color: rgb(100,116,139); background: rgba(226,232,240,.6); border: 1px solid rgba(226,232,240,1); padding: .05rem .4rem; border-radius: 9999px; }
.pulseDot{
  width:.55rem; height:.55rem; border-radius:9999px;
  background: rgba(16,185,129,1);
  position: relative;
}
.pulseDot:after{
  content:""; position:absolute; inset:-7px;
  border-radius:9999px;
  border: 2px solid rgba(16,185,129,.45);
  animation: ctPing 1.4s ease-out infinite;
}
.liveBadge{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.25rem .55rem;
  border-radius:9999px;
  border:1px solid rgba(226,232,240,1);
  background: rgba(255,255,255,.85);
}
.liveBadge:before{
  content:""; width:.4rem; height:.4rem; border-radius:9999px;
  background: rgba(16,185,129,1);
  margin-right:.4rem;
  box-shadow: 0 0 0 3px rgba(16,185,129,.15);
}
.ctBar{ display:block; width:100%; border-radius: 9999px; background: rgba(99,102,241,.28); }
.ctRoute{ stroke-dasharray: 10 14; animation: ctDash 7s linear infinite; }
.ctRoute2{ stroke-dasharray: 6 14; animation-duration: 9s; opacity:.75; }
.ctCluster{ animation: ctPulse 2.6s ease-in-out infinite; transform-origin: center; }
.ctCluster2{ animation-delay: .55s; }
.ctNode{ animation: ctNodePulse 2.2s ease-in-out infinite; }
.ctSignal{ opacity:.0; }
.ctSignalA{ animation: ctSignalMoveA 6.8s linear infinite; }
.ctSignalB{ animation: ctSignalMoveB 7.6s linear infinite; }

@keyframes ctPing{ 0%{ transform: scale(.6); opacity:.85 } 70%{ transform: scale(1.15); opacity:0 } 100%{ opacity:0 } }
@keyframes ctDash{ to { stroke-dashoffset: -200; } }
@keyframes ctPulse{ 0%,100%{ opacity:.7 } 50%{ opacity:1 } }
@keyframes ctNodePulse{ 0%,100%{ transform: scale(1); opacity:.95 } 50%{ transform: scale(1.08); opacity:1 } }
@keyframes ctSignalMoveA{
  0%{ opacity:0; transform: translate(0px,0px); }
  8%{ opacity:1 }
  100%{ opacity:0; transform: translate(640px,-25px); }
}
@keyframes ctSignalMoveB{
  0%{ opacity:0; transform: translate(0px,0px); }
  10%{ opacity:1 }
  100%{ opacity:0; transform: translate(600px,45px); }
}

/* filtering */
.ctHide{ opacity:.08 !important; filter: grayscale(1); }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.speed-badge {
  display: block;
  min-width: 78px;
  text-align: center;
}


.mb-15{
  margin-bottom: 15px;
}