/* ============================================
   PREMIUM GLOBAL SHIPPING NETWORK — REDESIGN
   ============================================ */

/* ── Section Container ─────────────────────── */
#logistics {
  background: linear-gradient(180deg, #f8f5ee 0%, #f3ede0 40%, #f8f5ee 100%);
  padding: 100px 0 120px;
  position: relative;
}
#logistics::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(200,155,60,0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(21,63,46,0.03) 0%, transparent 50%);
  pointer-events: none;
}

/* ── KPI Statistics Bar ────────────────────── */
.logistics-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-bottom: 60px;
}
.kpi-card {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(200,155,60,0.15);
  border-radius: 20px;
  padding: 28px 20px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.kpi-card:hover::before { opacity: 1; }
.kpi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(200,155,60,0.12);
  border-color: rgba(200,155,60,0.35);
}
.kpi-icon {
  font-size: 1.6rem;
  margin-bottom: 10px;
  display: block;
}
.kpi-value {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--green);
  line-height: 1;
  margin-bottom: 6px;
}
.kpi-label {
  font-size: 0.78rem;
  color: #888;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Main Layout ───────────────────────────── */
.logistics-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.logistics-layout .world-map-wrapper {
  max-width: 760px;
  width: 100%;
  margin: 8px auto 0;
  aspect-ratio: 2.4 / 1;
  border-radius: 16px;
  overflow: hidden;
}

/* ── Premium Map Container ─────────────────── */
.premium-map-wrapper {
  position: relative;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(200,155,60,0.18);
  border-radius: 24px;
  padding: 30px;
  box-shadow:
    0 20px 60px rgba(44,24,16,0.06),
    0 0 0 1px rgba(255,255,255,0.3) inset;
  overflow: hidden;
}
.premium-map-wrapper::before {
  content: '';
  position: absolute;
  top: -1px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: 0 0 4px 4px;
}

/* Map Label */
.map-label {
  position: absolute;
  top: 20px; left: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10;
}
.map-label-dot {
  width: 8px; height: 8px;
  background: #25D366;
  border-radius: 50%;
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}
.map-label-text {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #999;
}

/* Map Legend */
.map-legend {
  position: absolute;
  bottom: 20px; right: 30px;
  display: flex;
  gap: 18px;
  z-index: 10;
  font-size: 0.7rem;
  color: #999;
}
.map-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.legend-dot.active { background: var(--gold); box-shadow: 0 0 6px rgba(200,155,60,0.5); }
.legend-dot.future { background: #ccc; border: 1px dashed #999; }
.legend-dot.hub { background: var(--green); box-shadow: 0 0 6px rgba(21,63,46,0.5); }

/* SVG Map Styles */
.world-map-svg {
  width: 100%;
  height: auto;
  min-height: 420px;
}
.continent-path {
  fill: #ede5d4;
  stroke: #d8cdb8;
  stroke-width: 0.5;
  transition: fill 0.3s ease;
}
.grid-line {
  stroke: #e8dece;
  stroke-width: 0.3;
  stroke-dasharray: 2 8;
}

/* Tashkent HQ Marker */
.hq-glow {
  fill: var(--gold);
  opacity: 0;
  animation: hqPulse 3s ease-out infinite;
}
@keyframes hqPulse {
  0% { r: 4; opacity: 0.6; }
  100% { r: 30; opacity: 0; }
}
.hq-ring {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  opacity: 0.4;
  animation: hqRing 4s ease-in-out infinite;
}
@keyframes hqRing {
  0%, 100% { r: 12; opacity: 0.4; }
  50% { r: 16; opacity: 0.2; }
}
.hq-dot {
  fill: var(--green);
  stroke: var(--gold);
  stroke-width: 2;
  filter: drop-shadow(0 0 6px rgba(200,155,60,0.6));
}
.hq-label {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 10px;
  fill: var(--green);
  text-anchor: middle;
}
.hq-sublabel {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 6.5px;
  fill: var(--gold);
  text-anchor: middle;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Destination Markers */
.dest-marker {
  cursor: pointer;
  transition: transform 0.3s ease;
}
.dest-marker:hover {
  transform: scale(1.3);
}
.dest-dot {
  stroke-width: 1.5;
  transition: r 0.3s ease, fill 0.3s ease;
}
.dest-dot.gold { fill: var(--gold); stroke: rgba(200,155,60,0.4); }
.dest-dot.emerald { fill: #2ecc71; stroke: rgba(46,204,113,0.4); }
.dest-dot.blue { fill: #3498db; stroke: rgba(52,152,219,0.4); }
.dest-dot.slate { fill: #7f8c8d; stroke: rgba(127,140,141,0.4); }
.dest-dot.future { fill: #bbb; stroke: #ddd; stroke-dasharray: 2 2; }

.dest-pulse {
  opacity: 0;
  animation: destPulse 3s ease-out infinite;
}
@keyframes destPulse {
  0% { r: 2; opacity: 0.5; }
  100% { r: 12; opacity: 0; }
}

.dest-label {
  font-family: 'Inter', sans-serif;
  font-size: 7px;
  font-weight: 600;
  fill: #777;
  text-anchor: middle;
  pointer-events: none;
  transition: fill 0.3s ease;
}

/* Route Lines */
.route-path {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 6 4;
  animation: routeFlow 20s linear infinite;
  transition: stroke-width 0.3s ease, opacity 0.3s ease;
}
.route-path.gold { stroke: var(--gold); filter: drop-shadow(0 0 2px rgba(200,155,60,0.3)); opacity: 0.6; }
.route-path.emerald { stroke: #2ecc71; filter: drop-shadow(0 0 2px rgba(46,204,113,0.3)); opacity: 0.6; }
.route-path.blue { stroke: #3498db; filter: drop-shadow(0 0 2px rgba(52,152,219,0.3)); opacity: 0.6; }
.route-path.slate { stroke: #95a5a6; filter: drop-shadow(0 0 2px rgba(149,165,166,0.3)); opacity: 0.6; }
.route-path.future { stroke: #ccc; stroke-dasharray: 3 6; opacity: 0.3; animation: routeFlow 40s linear infinite; }

@keyframes routeFlow {
  to { stroke-dashoffset: -200; }
}

/* Moving Cargo Dot */
.cargo-dot {
  r: 3;
  filter: drop-shadow(0 0 4px currentColor);
}
.cargo-dot.gold { fill: var(--gold); }
.cargo-dot.emerald { fill: #2ecc71; }
.cargo-dot.blue { fill: #3498db; }
.cargo-dot.slate { fill: #95a5a6; }

/* Floating Icons */
.float-icon {
  font-size: 16px;
  opacity: 0.15;
  position: absolute;
  pointer-events: none;
  animation: floatDrift 20s ease-in-out infinite;
}
.float-icon:nth-child(2) { animation-delay: -5s; animation-duration: 25s; }
.float-icon:nth-child(3) { animation-delay: -10s; animation-duration: 18s; }
.float-icon:nth-child(4) { animation-delay: -15s; animation-duration: 22s; }
.float-icon:nth-child(5) { animation-delay: -8s; animation-duration: 28s; }
.float-icon:nth-child(6) { animation-delay: -12s; animation-duration: 21s; }

@keyframes floatDrift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(15px, -10px) rotate(5deg); }
  50% { transform: translate(-10px, 15px) rotate(-3deg); }
  75% { transform: translate(8px, -5px) rotate(2deg); }
}

/* ── Route Region Cards ────────────────────── */
.route-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 50px;
}

.route-card-v2 {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(200,155,60,0.12);
  border-radius: 22px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.route-card-v2::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  border-radius: 22px 0 0 22px;
  transition: width 0.4s ease, opacity 0.4s ease;
  opacity: 0.7;
}
.route-card-v2.region-europe::before { background: linear-gradient(180deg, var(--gold), #daa520); }
.route-card-v2.region-russia::before { background: linear-gradient(180deg, #7f8c8d, #95a5a6); }
.route-card-v2.region-middle-east::before { background: linear-gradient(180deg, #2ecc71, #27ae60); }
.route-card-v2.region-east-asia::before { background: linear-gradient(180deg, #3498db, #2980b9); }
.route-card-v2.region-south-asia::before { background: linear-gradient(180deg, #e67e22, #d35400); }
.route-card-v2.region-southeast-asia::before { background: linear-gradient(180deg, #9b59b6, #8e44ad); }
.route-card-v2.region-north-america::before { background: linear-gradient(180deg, #e74c3c, #c0392b); }
.route-card-v2.region-future::before { background: linear-gradient(180deg, #bbb, #999); }

.route-card-v2:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(44,24,16,0.1);
  border-color: rgba(200,155,60,0.3);
}
.route-card-v2:hover::before {
  width: 6px;
  opacity: 1;
}

/* Card Header */
.rc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.rc-region {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rc-flag {
  font-size: 1.5rem;
  line-height: 1;
}
.rc-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--green);
  line-height: 1.2;
}
.rc-time {
  background: rgba(21,63,46,0.08);
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 50px;
  white-space: nowrap;
}

/* Card Description */
.rc-desc {
  font-size: 0.82rem;
  color: #777;
  line-height: 1.55;
  margin-bottom: 16px;
}

/* Card Countries */
.rc-countries {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.rc-country-tag {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 50px;
  background: rgba(21,63,46,0.05);
  color: #666;
  border: 1px solid rgba(21,63,46,0.08);
}

/* Card Badges */
.rc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--ivory);
  color: #666;
  border: 1px solid rgba(200,155,60,0.1);
}
.rc-badge-icon {
  font-size: 0.8rem;
}

/* ── Responsive ────────────────────────────── */
@media (max-width: 1200px) {
  .route-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .logistics-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  #logistics { padding: 70px 0 80px; }
  .route-cards-grid { grid-template-columns: 1fr; }
  .logistics-kpis { grid-template-columns: repeat(2, 1fr); }
  .premium-map-wrapper { padding: 15px; border-radius: 16px; }
  .map-label, .map-legend { display: none; }
  .kpi-card { padding: 20px 15px; }
  .kpi-value { font-size: 1.5rem; }
}
@media (max-width: 480px) {
  .logistics-kpis { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kpi-card { border-radius: 14px; padding: 16px 12px; }
  .route-card-v2 { padding: 20px 18px; border-radius: 16px; }
}