/* EXTRUCK — 3D header nav CTAs + valuation promo */

.ex-nav-3d,
.ex-val-nav-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  text-decoration: none;
  perspective: 800px;
  transform-style: preserve-3d;
  flex-shrink: 0;
}
.ex-nav-3d .ex-nav-3d-glow,
.ex-val-nav-btn .ex-val-nav-glow {
  position: absolute;
  inset: -4px;
  border-radius: 1rem;
  filter: blur(8px);
  opacity: 0.75;
  animation: exValPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
.ex-nav-3d .ex-nav-3d-inner,
.ex-val-nav-btn .ex-val-nav-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  border-radius: 0.95rem;
  font-size: 0.7rem;
  font-weight: 900;
  border: 2px solid rgba(255, 255, 255, 0.65);
  transform: translateZ(8px) rotateX(2deg);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s;
}
.ex-nav-3d:hover .ex-nav-3d-inner,
.ex-nav-3d:focus-visible .ex-nav-3d-inner,
.ex-val-nav-btn:hover .ex-val-nav-inner,
.ex-val-nav-btn:focus-visible .ex-val-nav-inner {
  transform: translateZ(14px) rotateX(-4deg) scale(1.04);
}
.ex-nav-3d:active .ex-nav-3d-inner,
.ex-val-nav-btn:active .ex-val-nav-inner {
  transform: translateZ(4px) translateY(2px);
}
.ex-nav-3d .ex-hico,
.ex-nav-3d i,
.ex-val-nav-btn .ex-hico,
.ex-val-nav-btn i {
  font-size: 0.85rem;
  width: 0.9rem;
  height: 0.9rem;
}

/* Valuation — gold / amber */
.ex-val-nav-btn .ex-val-nav-glow {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.55), rgba(251, 191, 36, 0.15), rgba(148, 163, 184, 0.35));
}
.ex-val-nav-btn .ex-val-nav-inner {
  color: #1c1917;
  background: linear-gradient(145deg, #fde68a 0%, #f59e0b 45%, #d97706 100%);
  box-shadow:
    0 4px 0 #b45309,
    0 8px 20px rgba(217, 119, 6, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.ex-val-nav-btn:hover .ex-val-nav-inner,
.ex-val-nav-btn:focus-visible .ex-val-nav-inner {
  box-shadow:
    0 6px 0 #b45309,
    0 14px 28px rgba(217, 119, 6, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.ex-val-nav-btn:active .ex-val-nav-inner {
  box-shadow: 0 2px 0 #b45309, 0 6px 14px rgba(217, 119, 6, 0.3);
}

/* Catalog — orange / truck-yard accent (matches catalog FAB) */
.ex-nav-3d--catalog .ex-nav-3d-glow {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.55), rgba(251, 146, 60, 0.2), rgba(15, 23, 42, 0.25));
  animation-delay: 0.4s;
}
.ex-nav-3d--catalog .ex-nav-3d-inner {
  color: #fff;
  background: linear-gradient(145deg, #fb923c 0%, #ea580c 48%, #c2410c 100%);
  box-shadow:
    0 4px 0 #9a3412,
    0 8px 20px rgba(234, 88, 12, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.ex-nav-3d--catalog:hover .ex-nav-3d-inner,
.ex-nav-3d--catalog:focus-visible .ex-nav-3d-inner {
  box-shadow:
    0 6px 0 #9a3412,
    0 14px 28px rgba(234, 88, 12, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.ex-nav-3d--catalog:active .ex-nav-3d-inner {
  box-shadow: 0 2px 0 #9a3412, 0 6px 14px rgba(234, 88, 12, 0.32);
}

/* Prices — emerald / live market chart */
.ex-nav-3d--prices .ex-nav-3d-glow {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.5), rgba(52, 211, 153, 0.2), rgba(15, 23, 42, 0.2));
  animation-delay: 0.8s;
}
.ex-nav-3d--prices .ex-nav-3d-inner {
  color: #fff;
  background: linear-gradient(145deg, #34d399 0%, #059669 48%, #047857 100%);
  box-shadow:
    0 4px 0 #065f46,
    0 8px 20px rgba(5, 150, 105, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.ex-nav-3d--prices:hover .ex-nav-3d-inner,
.ex-nav-3d--prices:focus-visible .ex-nav-3d-inner {
  box-shadow:
    0 6px 0 #065f46,
    0 14px 28px rgba(5, 150, 105, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.ex-nav-3d--prices:active .ex-nav-3d-inner {
  box-shadow: 0 2px 0 #065f46, 0 6px 14px rgba(5, 150, 105, 0.32);
}

@keyframes exValPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.95; transform: scale(1.06); }
}
@keyframes exValIconSpin {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
}

/* Home teaser section */
.ex-val-home {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #78350f 100%);
  border-block: 4px solid #f59e0b;
}
.ex-val-home-orbit {
  position: absolute;
  border: 1px dashed rgba(251, 191, 36, 0.12);
  border-radius: 50%;
  pointer-events: none;
  animation: exValOrbit 36s linear infinite;
}
.ex-val-home-orbit-a { width: 320px; height: 320px; top: -80px; left: -60px; }
.ex-val-home-orbit-b { width: 480px; height: 480px; bottom: -120px; right: -100px; animation-direction: reverse; animation-duration: 48s; }
@keyframes exValOrbit {
  to { transform: rotate(360deg); }
}
.ex-val-home-card {
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s;
}
.ex-val-home-card:hover {
  transform: translateY(-6px) rotateX(4deg) translateZ(12px);
}
.ex-val-home-silver {
  background: linear-gradient(155deg, rgba(248, 250, 252, 0.97), rgba(203, 213, 225, 0.92));
  border: 2px solid #94a3b8;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.ex-val-home-gold {
  background: linear-gradient(155deg, #fffbeb, #fde68a 55%, #fbbf24);
  border: 2px solid #d97706;
  box-shadow: 0 16px 40px rgba(180, 83, 9, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.ex-val-home-hero-3d {
  perspective: 900px;
  transform-style: preserve-3d;
}
.ex-val-home-truck {
  font-size: 5.5rem;
  color: #fbbf24;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.45));
  animation: exValTruckFloat 3.5s ease-in-out infinite;
  transform: rotateY(-12deg);
}
@keyframes exValTruckFloat {
  0%, 100% { transform: translateY(0) rotateY(-12deg); }
  50% { transform: translateY(-14px) rotateY(12deg); }
}
.ex-val-home-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 900;
}
.ex-val-home-badge-free {
  background: linear-gradient(135deg, #94a3b8, #475569);
  color: #fff;
  box-shadow: 0 4px 12px rgba(71, 85, 105, 0.4);
}
.ex-val-home-badge-vip {
  background: linear-gradient(135deg, #fcd34d, #b45309);
  color: #1c1917;
  box-shadow: 0 4px 14px rgba(180, 83, 9, 0.45);
}
.ex-val-home-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.35rem;
  border-radius: 1rem;
  font-size: 0.8rem;
  font-weight: 900;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.ex-val-home-cta-primary {
  background: linear-gradient(135deg, #fbbf24, #ea580c);
  color: #0f172a;
  box-shadow: 0 6px 0 #c2410c, 0 12px 24px rgba(234, 88, 12, 0.35);
}
.ex-val-home-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #c2410c, 0 16px 32px rgba(234, 88, 12, 0.4);
}
.ex-val-home-cta-ghost {
  border: 2px solid rgba(251, 191, 36, 0.5);
  color: #fde68a;
  background: rgba(15, 23, 42, 0.5);
}
.ex-val-home-cta-ghost:hover {
  background: rgba(251, 191, 36, 0.12);
  transform: translateY(-2px);
}

.ex-val-mobile-cta,
.ex-nav-mobile-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  font-weight: 900;
  font-size: 0.85rem;
  text-decoration: none;
}
.ex-val-mobile-cta {
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  color: #1c1917;
  border: 2px solid #d97706;
  box-shadow: 0 4px 0 #b45309;
}
.ex-nav-mobile-cta--catalog {
  background: linear-gradient(135deg, #fb923c, #ea580c);
  color: #fff;
  border: 2px solid #c2410c;
  box-shadow: 0 4px 0 #9a3412;
}
.ex-nav-mobile-cta--prices {
  background: linear-gradient(135deg, #34d399, #059669);
  color: #fff;
  border: 2px solid #047857;
  box-shadow: 0 4px 0 #065f46;
}

.ex-val-mobile-cta .ex-hico,
.ex-nav-mobile-cta .ex-hico {
  width: 1.1rem;
  height: 1.1rem;
}

@media (prefers-reduced-motion: reduce) {
  .ex-nav-3d .ex-nav-3d-glow,
  .ex-val-nav-btn .ex-val-nav-glow,
  .ex-val-nav-btn i,
  .ex-val-nav-btn .ex-hico,
  .ex-val-home-orbit,
  .ex-val-home-truck { animation: none !important; }
}