.gt-transport-planning { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 35px 20px 30px; box-sizing: border-box; text-align: center; color: var(--text); }
.gt-transport-planning .gt-route { position: relative; width: 360px; max-width: 90%; height: 70px; margin-bottom: 8px; }
.gt-transport-planning .gt-route-line { position: absolute; left: 15px; right: 15px; top: 38px; height: 3px; background: #dbeafe; border-radius: 3px; }
.gt-transport-planning .gt-truck { position: absolute; top: 5px; left: 5px; font-size: 32px; animation: gt-transport-drive 3s ease-in-out infinite; }
.gt-transport-planning .gt-point { position: absolute; top: 33px; width: 13px; height: 13px; box-sizing: content-box; background: #2563eb; border: 3px solid #fff; box-shadow: 0 0 0 2px #93c5fd; border-radius: 50%; animation: gt-transport-pulse 1.5s ease-in-out infinite; }
.gt-transport-planning .gt-p1 { left: 5%; }
.gt-transport-planning .gt-p2 { left: 33%; animation-delay: .25s; }
.gt-transport-planning .gt-p3 { left: 64%; animation-delay: .5s; }
.gt-transport-planning .gt-p4 { left: 92%; animation-delay: .75s; }
.gt-transport-planning .gt-planning-title { font-size: 20px; font-weight: 600; }
.gt-transport-planning .gt-planning-description { margin-top: 8px; font-size: 15px; color: var(--muted); }
.gt-transport-planning .gt-planning-dots { display: flex; gap: 7px; margin-top: 18px; }
.gt-transport-planning .gt-dot { width: 7px; height: 7px; background: #2563eb; border-radius: 50%; animation: gt-transport-dot 1.2s ease-in-out infinite; }
.gt-transport-planning .gt-d2 { animation-delay: .15s; }
.gt-transport-planning .gt-d3 { animation-delay: .3s; }
.gt-transport-planning .gt-planning-hint { margin-top: 15px; font-size: 12px; color: var(--muted); }
@keyframes gt-transport-drive { 0%, 100% { left: 5px; } 50% { left: calc(100% - 45px); } }
@keyframes gt-transport-pulse { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.45); opacity: 1; } }
@keyframes gt-transport-dot { 0%, 80%, 100% { transform: scale(.7); opacity: .35; } 40% { transform: scale(1.25); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gt-transport-planning .gt-truck, .gt-transport-planning .gt-point, .gt-transport-planning .gt-dot { animation: none; } }