/* ═══════════════════════════════════════════════════════
   VANTA AUTO TRANSPORT — ELEMENTOR-SAFE SCOPED CSS
   All rules scoped under .vt to avoid WordPress conflicts
   ═══════════════════════════════════════════════════════ */

/* ── 0. VARS & RESET ── */

.vt {
  zoom: 0.8;
  font-size: 80%;
  --acc:    #1877F2;
  --acc-h:  #1464C9;
  --acc-lt: #4B9BFF;
  --acc-bg: rgba(24, 119, 242,0.10);
  --navy:   #0B2545;
  --navy-dk:#07192F;
  --surf:   #162236;
  --bord:   rgba(255,255,255,0.08);
  --gold:   #F59E0B;
  --radius: 12px;
  --ease:   0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  font-family:'Montserrat','Helvetica Neue',sans-serif;
  color:#1a1a1a;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;

  /* Ported template features variables */
  --vt-white:          #ffffff;
  --vt-accent:         #1877F2;
  --vt-accent-light:   rgba(24, 119, 242, 0.1);
  --vt-accent-bright:  #4B9BFF;
  --vt-accent-hover:   #1464C9;
  --vt-primary:        #0B2545;
  --vt-primary-surface:#162236;
  --vt-primary-deep:   #07192F;
  --vt-primary-border: rgba(255,255,255,0.08);
  --vt-gray-100:       #F3F4F6;
  --vt-gray-200:       #E5E7EB;
  --vt-gray-500:       #9CA3AF;
  --vt-gray-600:       #4B5563;
  --vt-gray-700:       #374151;
  --vt-gray-900:       #111827;
  --vt-warning:        #F59E0B;
  --vt-off-white:      #F9FAFB;
}
.vt *, .vt *::before, .vt *::after { box-sizing:border-box; margin:0; padding:0; }
.vt img  { max-width:100%; height:auto; display:block; }
.vt a    { text-decoration:none; color:inherit; transition:color var(--ease); }
.vt h1,.vt h2,.vt h3,.vt h4,.vt h5,.vt h6 { font-weight:700; line-height:1.15; }
.vt p    { line-height:1.7; }

/* Prevent Leaflet image tile/icon stretching issues in WordPress */
.vt #vanta-map img { max-width: none !important; height: auto !important; display: inline !important; }

/* ── CONTAINER ── */
.vt .vt-c { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ── BUTTONS ── */
.vt .vt-btn { display:inline-flex; align-items:center; gap:10px; padding:16px 36px; border-radius:8px; font-weight:700; font-size:15px; letter-spacing:.02em; transition:all var(--ease); cursor:pointer; border:none; font-family:inherit; }
.vt .vt-btn-primary { background:var(--acc); color:#fff!important; box-shadow:0 8px 24px rgba(24, 119, 242,0.25); border:1px solid rgba(255,255,255,0.1); }
.vt .vt-btn-primary:hover { background:var(--acc-h); transform:translateY(-3px); box-shadow:0 0 20px rgba(24, 119, 242,0.5), 0 12px 36px rgba(24, 119, 242,0.4); color:#fff!important; border-color:rgba(255,255,255,0.3); }
.vt .vt-btn-glass   { background:rgba(255,255,255,0.06); border:1.5px solid rgba(255,255,255,0.18); color:#fff; }
.vt .vt-btn-glass:hover { border-color:var(--acc-lt); color:var(--acc-lt); }
.vt .vt-btn-outline { background:transparent; border:1.5px solid rgba(0,0,0,0.15); color:var(--navy); }
.vt .vt-btn-outline:hover { background:var(--acc); border-color:var(--acc); color:#fff; }

/* ═══════ 1. HERO ═══════ */
.vt .vt-hero {
  position:relative;
  padding:clamp(160px, 14vw, 220px) 0 clamp(100px, 10vw, 160px);
  background: radial-gradient(at 0% 0%, rgba(24, 119, 242,0.08) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(24, 119, 242,0.05) 0px, transparent 50%), #ffffff;
  color:var(--navy);
  overflow:hidden;
  border-bottom:1px solid rgba(0,0,0,0.05);
}
.vt .vt-hero-inner { position:relative; z-index:2; }
.vt .vt-micro {
  display:inline-block;
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--acc); margin-bottom:24px;
  background:rgba(24, 119, 242,0.06); border:1px solid rgba(24, 119, 242,0.15);
  padding:6px 16px; border-radius:999px;
}
.vt .vt-hero h1 { font-size:clamp(40px,5.5vw,70px); color:var(--navy); letter-spacing:-1.5px; margin-bottom:24px; }
.vt .vt-hero h1 span { font-weight:300; }
.vt .vt-hero-sub { font-size:18px; color:#475569; max-width:520px; margin-bottom:16px; }
.vt .vt-hero-sub strong { color:var(--navy); }
.vt .vt-hero-cta { display:flex; flex-wrap:wrap; gap:16px; margin-top:36px; }

/* ═══════ 2. TICKER ═══════ */
@keyframes vtTick { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-50%,0,0)} }
.vt .vt-ticker-wrap { overflow:hidden; padding:14px 0; background:#f4f6fb; border-bottom:1px solid rgba(0,0,0,0.06); }
.vt .vt-ticker      { display:flex; white-space:nowrap; animation:vtTick 44s linear infinite; }
.vt .vt-tick-item   { display:inline-block; padding:0 32px; font-size:14px; color:#475569; }
.vt .vt-tick-item strong { color:#111827; }
.vt .vt-tick-item span   { color:var(--acc); font-weight:600; }

/* ═══════ 3. STATS ═══════ */
.vt .vt-stats { background:#f8f9fb; border-top:1px solid rgba(0,0,0,0.04); border-bottom:1px solid rgba(0,0,0,0.04); }
.vt .vt-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); padding:60px 0; }
.vt .vt-stat { text-align:center; padding:20px; position:relative; }
.vt .vt-stat:not(:last-child)::after { content:''; position:absolute; right:0; top:25%; height:50%; width:1px; background:rgba(0,0,0,0.08); }
.vt .vt-stat-val { font-size:clamp(30px,4vw,46px); font-weight:800; color:var(--acc); margin-bottom:8px; letter-spacing:-1px; }
.vt .vt-stat-lbl { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(0,0,0,0.4); font-weight:600; }

/* ═══════ 4. ABOUT ═══════ */
.vt .vt-about { padding:100px 0; }
.vt .vt-about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.vt .vt-about-img { border-radius:var(--radius); overflow:hidden; box-shadow:0 40px 80px rgba(0,0,0,0.12); }
.vt .vt-about-img img { width:100%; height:500px; object-fit:cover; transition:transform .8s ease; }
.vt .vt-about-img:hover img { transform:scale(1.04); }
.vt .vt-suptitle { display:inline-flex; align-items:center; gap:12px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--acc); margin-bottom:20px; }
.vt .vt-suptitle::before { content:''; width:32px; height:2px; background:var(--acc); }
.vt .vt-about h2 { font-size:clamp(30px,3.5vw,46px); margin-bottom:24px; letter-spacing:-.5px; color:var(--navy); }
.vt .vt-about h2 span { font-weight:300; }
.vt .vt-about p { color:#555; margin-bottom:16px; }
.vt .vt-quote-block { margin-top:32px; padding:20px 24px; background:rgba(24, 119, 242,0.05); border-left:3px solid var(--acc); border-radius:0 var(--radius) var(--radius) 0; }
.vt .vt-quote-block p { font-size:15px; font-weight:600; color:var(--navy); margin:0; }
.vt .vt-quote-block span { font-weight:400; }

/* ═══════ 5. HOW IT WORKS ═══════ */
.vt .vt-steps { padding:100px 0 80px; background:#fff; }
.vt .vt-steps-head { text-align:center; margin-bottom:60px; }
.vt .vt-steps-head h2 { font-size:clamp(30px,3.5vw,46px); color:var(--navy); margin-bottom:16px; }
.vt .vt-steps-head h2 span { font-weight:300; }
.vt .vt-steps-head p { color:#666; max-width:600px; margin:0 auto; }
.vt .vt-steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.vt .vt-step-card { padding:40px 28px 36px; border:1.5px solid rgba(0,0,0,0.07); border-radius:var(--radius); background:#fff; transition:all var(--ease); position:relative; overflow:hidden; cursor:pointer; }
.vt .vt-step-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--acc),var(--acc-lt)); transform:scaleX(0); transform-origin:left; transition:transform var(--ease); }
.vt .vt-step-card:hover { border-color:rgba(24, 119, 242,0.3); box-shadow:0 16px 48px rgba(24, 119, 242,0.10); transform:translateY(-4px); }
.vt .vt-step-card:hover::before { transform:scaleX(1); }
.vt .vt-step-num { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; background:var(--acc); color:#fff; margin-bottom:20px; box-shadow:0 4px 16px rgba(24, 119, 242,0.3); transition:background var(--ease); }
.vt .vt-step-card h5 { font-size:18px; color:var(--navy); margin-bottom:12px; }
.vt .vt-step-card p { font-size:14px; color:#666; }

/* Clickable active step card highlight */
.vt .vt-step-card.active { border-color: var(--acc); box-shadow: 0 16px 48px rgba(24, 119, 242,0.15); transform: translateY(-4px); }
.vt .vt-step-card.active::before { transform: scaleX(1); }
.vt .vt-step-card.active .vt-step-num { background: var(--acc-h); }

/* ═══════ 6. SERVICES ═══════ */
.vt .vt-services { background:var(--navy); color:#fff; padding:100px 0; position:relative; overflow:hidden; }
.vt .vt-services::before { content:''; position:absolute; top:80px; right:-100px; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(24, 119, 242,0.07),transparent 65%); pointer-events:none; }
.vt .vt-services-head { text-align:center; margin-bottom:60px; position:relative; z-index:2; }
.vt .vt-services-head h2 { font-size:clamp(34px,4vw,54px); color:#fff; margin-bottom:16px; }
.vt .vt-services-head h2 span { font-weight:300; }
.vt .vt-services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,0.06); position:relative; z-index:2; border-radius:var(--radius); overflow:hidden; }
.vt .vt-srv-card { padding:40px 28px; background:rgba(255,255,255,0.02); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.05); border-radius:16px; transition:all var(--ease); position:relative; overflow:hidden; }
.vt .vt-srv-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--acc),transparent); transform:scaleX(0); transform-origin:left; transition:transform var(--ease); }
.vt .vt-srv-card:hover { background:rgba(24, 119, 242,0.05); border-color:rgba(24, 119, 242,0.2); transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.2); }
.vt .vt-srv-card:hover::after { transform:scaleX(1); }
.vt .vt-srv-card h5 { color:#fff; font-size:18px; margin-bottom:14px; }
.vt .vt-srv-card p { font-size:14px; color:rgba(255,255,255,0.65); margin-bottom:24px; }
.vt .vt-srv-arrow { width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.15); display:flex; align-items:center; justify-content:center; transition:all var(--ease); }
.vt .vt-srv-card:hover .vt-srv-arrow { border-color:var(--acc); background:var(--acc); }

/* ═══════ 7. WHY VANTA (dark) ═══════ */
.vt .vt-pillars { background:var(--navy-dk); color:#fff; padding:100px 0 80px; }
.vt .vt-pillars-head { text-align:center; margin-bottom:60px; }
.vt .vt-pillars-head h2 { color:#fff; font-size:clamp(30px,3.5vw,46px); margin-bottom:16px; }
.vt .vt-pillars-head h2 span { font-weight:300; }
.vt .vt-pillars-head p { color:rgba(255,255,255,0.55); max-width:600px; margin:0 auto; }
.vt .vt-pillars-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.vt .vt-pillar { padding:36px 24px; border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius); background:rgba(255,255,255,0.03); transition:all var(--ease); }
.vt .vt-pillar:hover { border-color:rgba(24, 119, 242,0.3); transform:translateY(-4px); background:rgba(24, 119, 242,0.07); }
.vt .vt-pillar-ico { font-size:26px; color:var(--acc-lt); margin-bottom:20px; }
.vt .vt-pillar h5 { color:#fff; font-size:16px; margin-bottom:12px; }
.vt .vt-pillar p { font-size:14px; color:rgba(255,255,255,0.5); }

/* ═══════ 8. REVIEWS ═══════ */
.vt .vt-reviews { background:#f8f9fb; padding:100px 0; }
.vt .vt-reviews-head { text-align:center; margin-bottom:60px; }
.vt .vt-reviews-head h2 { font-size:clamp(30px,3.5vw,46px); color:var(--navy); margin-bottom:8px; }
.vt .vt-reviews-head h2 span { font-weight:300; }
.vt .vt-reviews-head p { color:#666; }
.vt .vt-review-slider { max-width:720px; margin:0 auto; text-align:center; position:relative; min-height:210px; }
.vt .vt-review-slide { display:none; animation:vtFadeIn .5s ease; }
.vt .vt-review-slide.active { display:block; }
@keyframes vtFadeIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.vt .vt-review-name  { font-size:18px; font-weight:700; color:var(--navy); margin-bottom:4px; }
.vt .vt-review-route { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--acc); margin-bottom:24px; }
.vt .vt-review-text  { font-size:20px; color:#333; line-height:1.75; font-style:italic; }
.vt .vt-review-text::before { content:'"'; font-size:64px; color:rgba(0,0,0,0.06); font-family:Georgia,serif; display:block; line-height:.5; margin-bottom:16px; }
.vt .vt-review-nav   { display:flex; justify-content:center; gap:16px; margin-top:40px; }
.vt .vt-review-dot   { width:12px; height:12px; border-radius:50%; background:rgba(0,0,0,0.1); cursor:pointer; transition:all var(--ease); border:none; }
.vt .vt-review-dot.active { background:var(--acc); transform:scale(1.2); }

/* ═══════ 9. TRUST BADGES ═══════ */
.vt .vt-trust { background:#f8f9fb; padding:0 0 80px; }
.vt .vt-trust-row { display:flex; flex-wrap:wrap; justify-content:center; gap:28px 48px; }
.vt .vt-trust-badge { display:flex; align-items:center; gap:14px; transition:transform var(--ease); }
.vt .vt-trust-badge:hover { transform:translateY(-2px); }
.vt .vt-trust-badge i { font-size:26px; color:var(--acc); flex-shrink:0; }
.vt .vt-trust-badge strong { display:block; font-size:14px; color:#1a1a1a; }
.vt .vt-trust-badge span   { display:block; font-size:12px; color:rgba(0,0,0,0.4); }

/* ═══════ 10. SERVICE AREA ═══════ */
.vt .vt-area { padding:100px 0 80px; background:#fff; }
.vt .vt-area-head { text-align:center; margin-bottom:60px; }
.vt .vt-area-head h2 { font-size:clamp(28px,3.5vw,44px); color:var(--navy); margin-bottom:12px; }
.vt .vt-area-head h2 span { font-weight:300; }
.vt .vt-area-head p { color:#666; max-width:600px; margin:0 auto; }
.vt .vt-area-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.vt .vt-area-card { border:1.5px solid rgba(0,0,0,0.07); border-radius:12px; padding:18px 16px; transition:all var(--ease); background:rgba(255,255,255,0.6); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.vt .vt-area-card:hover { border-color:var(--acc); transform:translateY(-4px) scale(1.02); box-shadow:0 12px 32px rgba(24, 119, 242,0.15); background:#fff; }
.vt .vt-area-card h6 { font-size:14px; font-weight:700; color:var(--navy); margin-bottom:4px; transition:color var(--ease); }
.vt .vt-area-card p  { font-size:11px; color:#888; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.vt .vt-area-hq { border-color:var(--acc); background:rgba(24, 119, 242,0.04); }
.vt .vt-area-hq h6 { color:var(--acc); }

/* ═══════ 11. PRICING (INTERACTIVE PORTED STYLES) ═══════ */
.vt .vt-pricing { padding:100px 0; background:#f8f9fb; }
.vt .vanta-calc-factors { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; }
.vt .vanta-calc-card { background: white; border: 1px solid var(--vt-gray-200); border-radius: 16px; padding: 32px 24px; text-align: center; flex: 1; box-shadow: 0 4px 15px rgba(0,0,0,0.02); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); position:relative; overflow:hidden; }
.vt .vanta-calc-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); border-color: var(--vt-accent); }
.vt .vanta-calc-card h4 { font-size: 14px; margin: 0; color: var(--vt-gray-900); font-weight:700; line-height:1.4; }
.vt .vanta-calc-icon { width: 56px; height: 56px; background: linear-gradient(135deg, var(--vt-accent-light) 0%, #ffffff 100%); color: var(--vt-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; box-shadow: inset 0 2px 4px rgba(255,255,255,0.5), 0 4px 10px rgba(0,0,0,0.05); transition: transform 0.3s ease; }
.vt .vanta-calc-card:hover .vanta-calc-icon { transform: scale(1.1) rotate(5deg); }
.vt .vanta-calc-plus { width: 32px; height: 32px; background: var(--vt-white); border: 2px solid var(--vt-gray-200); color: var(--vt-accent); font-weight: 900; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }

.vt .vanta-split-estimator {
  display: flex; gap: 48px; background: var(--vt-white); border: 1px solid var(--vt-gray-200); border-radius: 24px; padding: 40px; box-shadow: 0 15px 40px rgba(0,0,0,0.03); margin-top: 32px; text-align: left;
}
.vt .vanta-estimator-factors { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.vt .vanta-estimator-result { flex: 1.2; display: flex; flex-direction: column; justify-content: center; }
.vt .vanta-factor-group label { display: block; font-size: 13px; font-weight: 700; color: var(--vt-gray-900); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.05em; text-align: left; }
.vt .vanta-factor-pills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.vt .vanta-factor-pill { background: var(--vt-off-white); border: 2px solid var(--vt-gray-200); border-radius: 12px; padding: 16px 12px; text-align: center; cursor: pointer; transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1); font-weight: 800; font-size: 14px; color: var(--vt-gray-700); display: flex; flex-direction: column; justify-content: center; }
.vt .vanta-factor-pill small { font-weight: 600; font-size: 11px; color: var(--vt-gray-500); margin-top: 4px; }
.vt .vanta-factor-pill:hover { border-color: rgba(24, 119, 242, 0.4); transform: translateY(-2px); }
.vt .vanta-factor-pill.active { background: var(--vt-primary-deep); border-color: var(--vt-primary-deep); color: var(--vt-white); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.vt .vanta-factor-pill.active small { color: var(--vt-accent); }

.vt .vanta-select-input {
  width: 100%; height: 52px; background: var(--vt-off-white); border: 2px solid var(--vt-gray-200); color: var(--vt-gray-900); opacity: 1; padding: 0 16px; border-radius: 12px; font-size: 15px; font-weight: 700; font-family: inherit; outline: none; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" fill="none" stroke="%236B7280" stroke-width="2" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"></polyline></svg>');
  background-repeat: no-repeat; background-position: right 16px center; transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.vt .vanta-select-input:hover { border-color: rgba(24, 119, 242, 0.4); }
.vt .vanta-select-input:focus { border-color: var(--vt-accent); box-shadow: 0 0 0 4px rgba(24, 119, 242, 0.1); background-color: var(--vt-white); }

.vt .vanta-receipt { background: var(--vt-primary); border-radius: 20px; padding: 40px; color: white; box-shadow: 0 20px 40px rgba(11, 37, 69,0.4); position: relative; overflow: hidden; text-align: left; }
.vt .vanta-receipt::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(to right, var(--vt-accent), var(--vt-accent-bright)); }
.vt .vanta-receipt-header { font-size: 11px; font-weight: 800; color: var(--vt-accent); letter-spacing: 0.15em; margin-bottom: 8px; }
.vt .vanta-receipt-price { font-size: 44px; font-weight: 900; color: white; margin-bottom: 32px; line-height: 1; }
.vt .vanta-receipt-items { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); padding: 24px 0; }
.vt .vanta-receipt-item { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; }
.vt .vanta-receipt-item span:first-child { color: #9CA3AF; }
.vt .vanta-receipt-item span:last-child { color: white; text-align: right; }
.vt .vanta-receipt-footer { text-align: left; }

.vt .vanta-fmcsa-notice { background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3); border-radius: 12px; padding: 16px; display: flex; gap: 12px; color: var(--vt-gray-900); margin-top: 8px; text-align: left; }
.vt .vanta-fmcsa-notice svg { color: var(--vt-warning); flex-shrink: 0; }
.vt .vanta-fmcsa-notice p { font-size: 12px; margin: 4px 0 0 0; color: var(--vt-gray-700) !important; font-weight: 500; line-height: 1.4; }

.vt .vanta-time-dashboard { background: var(--vt-primary); border-radius: 20px; padding: 40px; color: white; box-shadow: 0 20px 40px rgba(11, 37, 69,0.4); text-align: left; }
.vt .vanta-time-header { font-size: 11px; font-weight: 800; color: var(--vt-accent); letter-spacing: 0.15em; margin-bottom: 8px; }
.vt .vanta-time-days { font-size: 44px; font-weight: 900; color: white; margin-bottom: 40px; line-height: 1; }
.vt .vanta-time-track-container { margin-bottom: 32px; }
.vt .vanta-time-track { background: rgba(255, 255, 255, 0.15); height: 8px; border-radius: 4px; position: relative; margin-bottom: 12px; }
.vt .vanta-time-progress { height: 100%; background: linear-gradient(to right, var(--vt-accent), var(--vt-accent-bright)); border-radius: 4px; transition: width 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); width: 25%; }
.vt .vanta-time-truck { position: absolute; top: 50%; transform: translate(-50%, -50%); background: var(--vt-primary-deep); color: var(--vt-accent-bright); border: 2px solid var(--vt-accent); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 15px rgba(24, 119, 242,0.4); transition: left 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); left: 25%; }
.vt .vanta-time-markers { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: #9CA3AF; text-transform: uppercase; }
.vt .vanta-time-desc { font-size: 14px; color: #D1D5DB; line-height: 1.6; margin: 0; }

.vt .vanta-feature-icon { width: 48px; height: 48px; color: var(--vt-accent); margin-bottom: 16px; background: rgba(24, 119, 242, 0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; }

.vt .vanta-list-card { display: flex; gap: 24px; align-items: flex-start; padding: 32px; background: rgba(255,255,255,0.6); backdrop-filter: blur(10px); border-radius: 20px; border: 1px solid var(--vt-gray-200); box-shadow: 0 8px 24px rgba(0,0,0,0.03); transition: all 0.4s ease; position: relative; overflow: hidden; text-align: left; }
.vt .vanta-list-card::before { content:''; position:absolute; left:0; top:0; height:100%; width:4px; background:var(--vt-accent); transform:scaleY(0); transition: transform 0.4s ease; transform-origin:bottom; }
.vt .vanta-list-card:hover { transform: translateX(8px); box-shadow: 0 15px 35px rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.1); background: #ffffff; }
.vt .vanta-list-card:hover::before { transform:scaleY(1); }
.vt .vanta-list-num { width: 48px; height: 48px; background: linear-gradient(135deg, var(--vt-primary) 0%, var(--vt-primary-surface) 100%); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; flex-shrink: 0; box-shadow: 0 4px 15px rgba(11, 37, 69, 0.3); border: 2px solid rgba(255,255,255,0.2); transition: transform 0.3s ease; }
.vt .vanta-list-card:hover .vanta-list-num { transform: scale(1.1) rotate(-5deg); }

.vt .vanta-state-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-top: 32px; }
.vt .vanta-state-item { display: flex; align-items: center; gap: 8px; background: white; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--vt-gray-200); font-weight: 600; font-size: 14px; color: var(--vt-gray-900); transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.vt .vanta-state-item:hover { border-color: var(--vt-accent); color: var(--vt-accent-hover); transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 20px rgba(0,0,0,0.08); background: var(--vt-off-white); }
.vt .vanta-state-icon { color: var(--vt-accent); display: flex; }

/* ═══════ 12. MID CTA ═══════ */
.vt .vt-cta-band { padding:80px 0; background:#fff; }
.vt .vt-cta-box { text-align:center; padding:80px 32px; border-radius:16px; background:linear-gradient(135deg,rgba(24, 119, 242,0.08),rgba(5,11,22,0.04)); border:1.5px solid rgba(24, 119, 242,0.2); position:relative; overflow:hidden; }
.vt .vt-cta-box::before { content:''; position:absolute; top:-80px; right:-80px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle,rgba(24, 119, 242,0.12),transparent 65%); pointer-events:none; }
.vt .vt-cta-box h3 { font-size:clamp(22px, 3vw, 36px); color:var(--navy); margin-bottom:16px; position:relative; z-index:1; }
.vt .vt-cta-box p  { color:#666; margin-bottom:32px; position:relative; z-index:1; max-width:560px; margin-left:auto; margin-right:auto; }
.vt .vt-cta-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; position:relative; z-index:1; }

/* ═══════ 13. FAQ ═══════ */
.vt .vt-faq { padding:100px 0; background:#fff; }
.vt .vt-faq-head { text-align:center; margin-bottom:60px; }
.vt .vt-faq-head h2 { font-size:clamp(28px,3.5vw,44px); color:var(--navy); margin-bottom:12px; }
.vt .vt-faq-head h2 span { font-weight:300; }
.vt .vt-faq-head p { color:#666; }
.vt .vt-faq-list { max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.vt .vt-faq-item { border:1.5px solid rgba(0,0,0,0.07); border-radius:10px; overflow:hidden; transition:border-color var(--ease); }
.vt .vt-faq-item.open { border-color:rgba(24, 119, 242,0.35); }
.vt .vt-faq-q { width:100%; padding:22px 24px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-weight:700; font-size:15px; color:var(--navy); text-align:left; cursor:pointer; background:#fff; border:none; font-family:inherit; transition:background var(--ease); }
.vt .vt-faq-q:hover { background:#f8f9fb; }
.vt .vt-faq-ic { width:28px; height:28px; background:rgba(24, 119, 242,0.1); color:var(--acc); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all var(--ease); }
.vt .vt-faq-item.open .vt-faq-ic { background:var(--acc); color:#fff; }
.vt .vt-faq-ic i { font-size:11px; transition:transform var(--ease); }
.vt .vt-faq-item.open .vt-faq-ic i { transform:rotate(45deg); }
.vt .vt-faq-a { max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.16,1,.3,1); }
.vt .vt-faq-ai { padding:0 24px 22px; font-size:14px; color:#555; line-height:1.75; }

/* ═══════ 14. BLOG ═══════ */
.vt .vt-blog { padding:100px 0 80px; background:#f8f9fb; }
.vt .vt-blog-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:40px; }
.vt .vt-blog-head h3 { font-size:26px; color:var(--navy); }
.vt .vt-blog-head a  { font-weight:600; color:var(--acc); }
.vt .vt-blog-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.vt .vt-blog-card { border-radius:var(--radius); overflow:hidden; border:1px solid rgba(0,0,0,0.06); transition:all var(--ease); background:#fff; }
.vt .vt-blog-card:hover { box-shadow:0 20px 50px rgba(0,0,0,0.08); transform:translateY(-4px); }
.vt .vt-blog-card img { width:100%; height:240px; object-fit:cover; transition:transform .6s ease; }
.vt .vt-blog-card:hover img { transform:scale(1.05); }
.vt .vt-blog-body { padding:28px; }
.vt .vt-blog-tags { display:flex; gap:8px; margin-bottom:16px; }
.vt .vt-blog-tag { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 12px; border-radius:20px; }
.vt .vt-blog-tag-acc  { background:rgba(24, 119, 242,0.1); color:var(--acc); }
.vt .vt-blog-tag-muted{ background:rgba(0,0,0,0.04); color:#666; }
.vt .vt-blog-body h4  { font-size:19px; color:var(--navy); margin-bottom:10px; }
.vt .vt-blog-body p   { font-size:14px; color:#666; margin-bottom:16px; }
.vt .vt-blog-link     { font-weight:700; color:var(--acc); font-size:14px; }

/* ═══════ 15. FOOTER ═══════ */
.vt .vt-footer { background:var(--navy); color:#fff; padding:80px 0 40px; }
.vt .vt-footer-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:60px; margin-bottom:60px; }
.vt .vt-footer-logo { font-size:36px; font-weight:800; margin-bottom:20px; letter-spacing:-.02em; }
.vt .vt-footer p   { color:rgba(255,255,255,0.5); font-size:14px; }
.vt .vt-footer a   { color:rgba(255,255,255,0.5); transition:color var(--ease); }
.vt .vt-footer a:hover { color:var(--acc-lt); }
.vt .vt-footer h6  { color:#fff; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-bottom:20px; }
.vt .vt-footer-links { list-style:none; }
.vt .vt-footer-links li { margin-bottom:12px; }
.vt .vt-footer-links a { font-size:14px; }
.vt .vt-footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding-top:24px; display:flex; justify-content:space-between; align-items:center; }
.vt .vt-footer-bottom p { font-size:13px; color:rgba(255,255,255,0.35); }
.vt .vt-social { display:flex; gap:12px; }
.vt .vt-social a { width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; font-size:14px; color:rgba(255,255,255,0.5); transition:all var(--ease); }
.vt .vt-social a:hover { border-color:var(--acc); color:var(--acc); background:rgba(24, 119, 242,0.1); }

/* FMCSA Badge & Payments Scoped styles */
.vt .vanta-fmcsa-badge { display: inline-flex; flex-direction: column; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 12px; padding: 12px 16px; margin-top: 24px; }
.vt .vanta-payments { display: flex; flex-wrap: wrap; gap: 8px; }
.vt .vanta-payments span { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 6px; }

/* ═══════ 16. FLOATING CTA ═══════ */
.vt .vt-float { position:fixed; bottom:28px; right:28px; z-index:9999; display:flex; align-items:center; gap:10px; padding:16px 28px; border-radius:50px; background:var(--acc); color:#fff!important; font-weight:700; font-size:14px; letter-spacing:.04em; text-transform:uppercase; box-shadow:0 8px 32px rgba(24, 119, 242,0.45); transition:all var(--ease); animation:vtPulse 3s ease-in-out infinite; font-family:inherit; }
.vt .vt-float:hover { transform:translateY(-3px) scale(1.03); box-shadow:0 12px 40px rgba(24, 119, 242,0.6); color:#fff!important; }
@keyframes vtPulse { 0%,100%{box-shadow:0 8px 32px rgba(24, 119, 242,0.45)} 50%{box-shadow:0 8px 32px rgba(24, 119, 242,0.7)} }

/* ═══════ 17. PORTED UNIQUE CALCULATOR STYLES ═══════ */
.vt .vanta-calc-wrap {
  width: 100%; max-width: 550px; margin: 0 auto;
  background: rgba(11, 37, 69, 0.9); backdrop-filter: blur(16px);
  border: 1px solid var(--vt-primary-border); border-radius: 24px;
  padding: 32px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  position: sticky; top: 20px; z-index: 999;
}
.vt .vanta-calc-wrap h2 { color: var(--vt-white) !important; display: flex; align-items: center; gap: 8px; font-size:20px; margin-bottom:24px; border:none; padding:0; text-align:left; }
.vt .vanta-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.vt .vanta-calc-grid-3 { display: grid; grid-template-columns: 1fr 1.5fr 1.5fr; gap: 8px; }
.vt .vanta-input-group { position: relative; margin-bottom: 12px; text-align: left; }
.vt .vanta-input-group label { display: block; font-size: 11px; font-weight: 700; color: #9CA3AF !important; text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.05em; text-align: left; }
.vt .vanta-calc-wrap .vanta-input { width: 100%; background: var(--vt-primary-deep) !important; border: 1px solid var(--vt-primary-border) !important; color: var(--vt-white) !important; padding: 12px 14px; border-radius: 12px; font-family: inherit; font-size:14px; outline: none; box-shadow: none !important; transition: border-color 0.2s; }
.vt .vanta-calc-wrap .vanta-input::placeholder { color: #6B7280 !important; }
.vt .vanta-calc-wrap .vanta-input:focus { border-color: var(--vt-accent) !important; }
.vt .vanta-calc-wrap input[type="date"].vanta-input::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }
.vt .vanta-suggestions { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--vt-primary-surface); border: 1px solid var(--vt-primary-border); border-radius: 8px; z-index: 100; max-height: 200px; overflow-y: auto; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.vt .vanta-suggestions.show { display: block; }
.vt .vanta-suggestion-item { padding: 10px 12px; cursor: pointer; color: var(--vt-white); font-size: 12px; border-bottom: 1px solid var(--vt-primary-deep); text-align: left; }
.vt .vanta-suggestion-item:last-child { border-bottom: none; }
.vt .vanta-suggestion-item:hover { background: var(--vt-primary-deep); color: var(--vt-accent); }
.vt .vanta-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.vt .vanta-pill { background: var(--vt-primary-deep); border: 1px solid var(--vt-primary-border); color: #9CA3AF; padding: 10px 4px; border-radius: 12px; cursor: pointer; text-align: center; font-size: 12px; font-weight: 600; transition: all 0.2s; }
.vt .vanta-pill.active { background: var(--vt-accent) !important; color: var(--vt-primary-deep) !important; border-color: var(--vt-accent) !important; }
.vt .vanta-toggle { display: flex; background: var(--vt-primary-deep); border: 1px solid var(--vt-primary-border); border-radius: 12px; padding: 4px; margin-bottom: 24px; }
.vt .vanta-toggle button { flex: 1; padding: 10px; border: none; background: transparent; color: #9CA3AF; cursor: pointer; border-radius: 8px; font-weight: 600; transition: 0.2s; font-size:14px; font-family: inherit; }
.vt .vanta-toggle button.active { background: var(--vt-primary-surface) !important; color: white !important; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.vt .vanta-result-panel { background: var(--vt-primary-deep); border: 1px solid var(--vt-primary-border); border-radius: 16px; padding: 20px; position: relative; overflow: hidden; min-height: 220px; display: flex; flex-direction: column; margin-bottom: 20px; }
.vt #vanta-map { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.65; pointer-events: none; z-index: 1; transition: opacity 0.5s; }
.vt .vanta-result-content { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; }
.vt .vanta-form { display: none; margin-top: 16px; border-top: 1px solid var(--vt-primary-border); padding-top: 16px; }
.vt .vanta-form.show { display: block; }
.vt .vanta-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vt .vanta-form .vanta-input { width: 100%; background: var(--vt-primary-deep) !important; border: 1px solid var(--vt-primary-border) !important; color: var(--vt-white) !important; padding: 12px 14px; border-radius: 12px; font-family: inherit; font-size:14px; outline: none; margin-bottom: 12px; }

/* Route Drawing Animation */
.vt .animated-route { stroke-dasharray: 10, 15; animation: vtDash 20s linear infinite; }
@keyframes vtDash { to { stroke-dashoffset: -1000; } }

/* Toast */
.vt .vanta-toast { position: fixed; bottom: 24px; left: 24px; background: rgba(11, 37, 69, 0.95); backdrop-filter: blur(12px); border: 1px solid var(--vt-primary-border); padding: 16px; border-radius: 12px; display: flex; align-items: center; gap: 12px; color: white; font-size: 13px; z-index: 9999; box-shadow: 0 10px 30px rgba(0,0,0,0.5); opacity: 0; transform: translateY(20px); pointer-events: none; transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); text-align: left; }
.vt .vanta-toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.vt .vanta-toast-icon { font-size: 20px; }
.vt .vanta-toast-time { font-size: 11px; color: var(--vt-accent); margin-top: 4px; }

/* ═══════ RESPONSIVE ═══════ */
@media(max-width:1024px){
  .vt .vt-pillars-grid { grid-template-columns:repeat(2,1fr); }
  .vt .vt-services-grid { grid-template-columns:repeat(2,1fr); }
  .vt .vt-area-grid { grid-template-columns:repeat(4,1fr); }
  .vt .vt-footer-grid { grid-template-columns:1fr 1fr; gap:40px; }
}
@media(max-width:900px){
  .vt .vanta-split-estimator { flex-direction: column; padding: 20px; gap: 24px; }
  .vt .vanta-factor-pills { grid-template-columns: 1fr 1fr !important; }
  .vt .vanta-factor-pill { padding: 12px 8px; font-size: 13px; }
  .vt .vanta-receipt { padding: 24px; }
  .vt .vanta-receipt-price { font-size: 32px; }
  .vt .vanta-time-dashboard { padding: 24px; }
  .vt .vanta-time-days { font-size: 32px; }
  .vt .vanta-select-input { padding: 0 12px; height: 48px; line-height: 48px; font-size: 14px; }
  .vt .vanta-calc-factors { flex-direction: column; gap: 8px; }
  .vt .vanta-calc-plus { transform: rotate(90deg); margin: 4px 0; }
  .vt .vanta-state-grid { grid-template-columns: 1fr 1fr; }
  .vt .vanta-toast { bottom: 16px; left: 16px; right: 16px; justify-content: center; }
}
@media(max-width:768px){
  .vt .vt-stats-grid { grid-template-columns:repeat(2,1fr); }
  .vt .vt-stat:nth-child(2)::after { display:none; }
  .vt .vt-about-grid { grid-template-columns:1fr; gap:40px; }
  .vt .vt-steps-grid { grid-template-columns:1fr; }
  .vt .vt-blog-grid { grid-template-columns:1fr; }
  .vt .vt-area-grid { grid-template-columns:repeat(3,1fr); }
  .vt .vt-footer-grid { grid-template-columns:1fr; gap:36px; }
}
@media(max-width:540px){
  .vt .vt-hero { padding:80px 0 100px; }
  .vt .vt-services-grid,.vt .vt-pillars-grid { grid-template-columns:1fr; }
  .vt .vt-area-grid { grid-template-columns:repeat(2,1fr); }
  .vt .vt-cta-box { padding:48px 20px; }
  .vt .vt-trust-row { flex-direction:column; align-items:center; }
  .vt .vt-float span { display:none; }
  .vt .vt-float { padding:16px; border-radius:50%; }
  .vt .vt-footer-bottom { flex-direction:column; gap:12px; text-align:center; }
  
  .vt .vanta-calc-grid { grid-template-columns: 1fr !important; }
  .vt .vanta-calc-grid-3 { grid-template-columns: 1fr !important; }
  .vt .vanta-form-grid { grid-template-columns: 1fr !important; }
  .vt .vanta-pills { grid-template-columns: 1fr 1fr; }
}

  /* --- PORTED NEW INTERACTIVE SECTIONS --- */
  .vt .vanta-section { padding: 96px 0; }
  .vt .vanta-bg-offwhite { background: var(--vt-off-white); }
  .vt .vanta-bg-deep { background: var(--vt-primary-deep); color: var(--vt-white); }
  .vt .vanta-center-head { text-align: center; margin-bottom: 64px; }
  .vt .vanta-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; width: 100%; }
  .vt .vanta-eyebrow { font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--vt-accent); font-size: 12px; display: block; margin-bottom: 12px; }
  
  /* How It Works (Advanced Split Stepper) */
  .vt .vanta-how-layout {
    display: flex; gap: 48px; align-items: stretch; max-width: 1100px; margin: 40px auto 0 auto;
  }
  .vt .vanta-how-stepper {
    flex: 1; display: flex; flex-direction: column; gap: 16px;
  }
  .vt .vanta-how-step {
    display: flex; gap: 20px; padding: 24px; border-radius: 20px;
    background: var(--vt-white); border: 1px solid var(--vt-gray-200);
    cursor: pointer; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
  }
  .vt .vanta-how-step:hover {
    border-color: var(--vt-accent); transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.03);
  }
  .vt .vanta-how-step.active {
    border-color: var(--vt-accent) !important;
    background: var(--vt-white) !important;
    box-shadow: 0 15px 30px rgba(24, 119, 242,0.06);
  }
  .vt .vanta-how-icon-wrap {
    display: flex; flex-direction: column; align-items: center; position: relative;
  }
  .vt .vanta-how-number {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--vt-gray-100); border: 2px solid var(--vt-gray-200);
    color: var(--vt-gray-500); display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 800; transition: all 0.3s;
    z-index: 2;
  }
  .vt .vanta-how-step.active .vanta-how-number {
    background: var(--vt-accent); border-color: var(--vt-accent); color: var(--vt-primary-deep);
    box-shadow: 0 0 15px rgba(24, 119, 242,0.3);
  }
  .vt .vanta-how-line {
    width: 2px; flex: 1; background: var(--vt-gray-200); margin: 8px 0;
    position: absolute; top: 44px; bottom: -28px; z-index: 1;
  }
  .vt .vanta-how-step.active .vanta-how-line {
    background: linear-gradient(to bottom, var(--vt-accent) 0%, var(--vt-gray-200) 100%);
  }
  .vt .vanta-how-step-info {
    flex: 1; text-align: left;
  }
  .vt .vanta-how-step-info h3 {
    font-size: 18px; margin: 0 0 6px 0; color: var(--vt-gray-900) !important;
    font-weight: 700; transition: color 0.3s;
  }
  .vt .vanta-how-step.active .vanta-how-step-info h3 {
    color: var(--vt-accent-hover) !important;
  }
  .vt .vanta-how-step-info p {
    font-size: 13.5px; line-height: 1.5; color: var(--vt-gray-600) !important; margin: 0;
  }
  .vt .vanta-how-preview {
    flex: 1.2; background: #0B2545; border: 1px solid var(--vt-primary-border);
    border-radius: 24px; padding: 28px; box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    display: flex; flex-direction: column; min-height: 380px; position: relative;
    overflow: hidden;
  }
  .vt .vanta-device-header {
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 14px; margin-bottom: 20px;
  }
  .vt .vanta-device-dots { display: flex; gap: 6px; }
  .vt .vanta-device-dots span { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
  .vt .vanta-device-dots span:nth-child(1) { background: #EF4444; }
  .vt .vanta-device-dots span:nth-child(2) { background: #F59E0B; }
  .vt .vanta-device-dots span:nth-child(3) { background: #10B981; }
  .vt .vanta-device-title { font-size: 11px; font-weight: 700; color: #6B7280; letter-spacing: 0.1em; text-transform: uppercase; }
  .vt .vanta-preview-screen {
    display: none; height: 100%; flex-direction: column; text-align: left;
    animation: vantaFadeIn 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  }
  .vt .vanta-preview-screen.active {
    display: flex;
  }
  @keyframes vantaFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @media (max-width: 900px) {
    .vt .vanta-how-layout { flex-direction: column; gap: 32px; }
    .vt .vanta-how-line { display: none; }
    .vt .vanta-how-step { padding: 18px; }
    .vt .vanta-how-preview { min-height: 340px; }
  }
  
  /* Detailed Timeline */
  .vt .vanta-timeline {
    position: relative;
    max-width: 1000px;
    margin: 60px auto 0;
  }
  .vt .vanta-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50px;
    width: 2px;
    background: rgba(255, 255, 255, 0.1);
  }
  @media (min-width: 900px) {
    .vt .vanta-timeline::before {
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .vt .vanta-step {
    position: relative;
    margin-bottom: 80px;
    width: 100%;
    display: flex;
    align-items: flex-start;
  }
  .vt .vanta-step:last-child {
    margin-bottom: 0;
  }
  @media (min-width: 900px) {
    .vt .vanta-step {
      justify-content: flex-end;
    }
    .vt .vanta-step:nth-child(even) {
      justify-content: flex-start;
    }
  }
  .vt .vanta-step-node {
    position: absolute;
    left: 50px;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background: var(--vt-primary-surface);
    border: 2px solid var(--vt-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    color: var(--vt-accent-bright);
    z-index: 2;
    box-shadow: 0 0 20px rgba(24, 119, 242, 0.4);
  }
  @media (min-width: 900px) {
    .vt .vanta-step-node {
      left: 50%;
    }
  }
  .vt .vanta-step-content {
    width: calc(100% - 100px);
    margin-left: 100px;
    background: rgba(11, 37, 69, 0.6);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 24px;
    padding: 40px;
    backdrop-filter: blur(12px);
    transition: transform 0.3s, border-color 0.3s;
  }
  .vt .vanta-step-content:hover {
    transform: translateY(-5px);
    border-color: rgba(24, 119, 242, 0.3);
  }
  @media (min-width: 900px) {
    .vt .vanta-step-content {
      width: 45%;
      margin-left: 0;
    }
  }
  @media (max-width: 899px) {
    .vt .vanta-timeline::before { left: 30px; }
    .vt .vanta-step-node { left: 30px; width: 40px; height: 40px; font-size: 18px; }
    .vt .vanta-step-content { margin-left: 70px; width: calc(100% - 70px); padding: 24px; }
  }
  .vt .vanta-substeps {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .vt .vanta-substep {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }
  .vt .vanta-substep-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(24, 119, 242, 0.1);
    color: var(--vt-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .vt .vanta-substep h4 {
    font-size: 14px;
    color: white;
    margin-bottom: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .vt .vanta-substep p {
    font-size: 14px;
    color: var(--vt-gray-200);
    margin: 0;
    line-height: 1.5;
  }

  /* Why Vanta proof dashboard */
  .vt .vanta-split-layout { display: flex; gap: 64px; align-items: center; flex-wrap: wrap; }
  .vt .vanta-split-left { flex: 1; min-width: 280px; }
  .vt .vanta-split-left h2 { color: var(--vt-gray-900) !important; }
  .vt .vanta-split-right { flex: 1.5; min-width: 280px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }
  .vt .vanta-feature-card { background: var(--vt-off-white); padding: 32px; border-radius: 24px; border: 1px solid var(--vt-gray-100); }
  .vt .vanta-feature-card h3 { color: var(--vt-gray-900) !important; }
  .vt .vanta-feature-icon { width: 48px; height: 48px; color: var(--vt-accent); margin-bottom: 16px; background: rgba(24, 119, 242, 0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
  .vt .vanta-why-proof-wrap {
    background: rgba(11, 37, 69, 0.85);
    backdrop-filter: blur(16px);
    border: 1px solid var(--vt-primary-border);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 32px;
  }
  .vt .vanta-why-screen {
    display: none;
    height: 100%;
    flex-direction: column;
    text-align: left;
    animation: vantaFadeIn 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  }
  .vt .vanta-why-screen.active {
    display: flex;
  }
  .vt .vanta-why-screen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 12px;
    margin-bottom: 16px;
  }
  .vt .vanta-feature-card {
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .vt .vanta-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border-color: rgba(24, 119, 242, 0.3) !important;
  }
  .vt .vanta-feature-card.active {
    background: var(--vt-white) !important;
    border-color: var(--vt-accent) !important;
    box-shadow: 0 12px 30px rgba(24, 119, 242, 0.1) !important;
    transform: scale(1.02);
  }

  /* Popular Routes / Trending routes */
  .vt .vanta-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }
  .vt .vanta-route-card { background: var(--vt-off-white); border: 1px solid var(--vt-gray-200); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; text-align: left; }
  .vt .vanta-route-head { font-size: 12px; font-weight: 700; color: var(--vt-gray-500); text-transform: uppercase; margin-bottom: 8px; }
  .vt .vanta-route-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--vt-gray-900) !important; }
  .vt .vanta-route-bottom { border-top: 1px solid var(--vt-gray-200); margin-top: auto; padding-top: 16px; display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 16px; }
  .vt .vanta-route-btn { background: var(--vt-primary); color: white; display: block; text-align: center; padding: 12px; border-radius: 8px; font-weight: 700; font-size: 14px; }
  .vt .vanta-route-btn:hover { background: var(--vt-primary-surface); }
}

/* ═══════ MOBILE CONVERSION OPTIMIZATIONS (Swipeable cards instead of long stacking) ═══════ */
@media (max-width: 768px) {
  /* Convert long stacked grids into horizontal swipeable carousels */
  .vt .vt-steps-grid, 
  .vt .vt-pillars-grid, 
  .vt .vt-services-grid, 
  .vt .vanta-routes, 
  .vt .vanta-split-right,
  .vt .vanta-state-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px !important;
    padding-bottom: 24px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    grid-template-columns: none !important;
  }
  
  .vt .vt-steps-grid > *, 
  .vt .vt-pillars-grid > *, 
  .vt .vt-services-grid > *, 
  .vt .vanta-routes > *, 
  .vt .vanta-split-right > *,
  .vt .vanta-state-grid > * {
    min-width: 85vw !important;
    scroll-snap-align: center;
    flex-shrink: 0;
  }

  /* Hide scrollbar for a cleaner app-like look */
  .vt .vt-steps-grid::-webkit-scrollbar, 
  .vt .vt-pillars-grid::-webkit-scrollbar, 
  .vt .vt-services-grid::-webkit-scrollbar, 
  .vt .vanta-routes::-webkit-scrollbar, 
  .vt .vanta-split-right::-webkit-scrollbar,
  .vt .vanta-state-grid::-webkit-scrollbar {
    display: none;
  }
  
  /* Compact service area grid */
  .vt .vt-area-grid {
    display: flex !important;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scroll-snap-type: x mandatory;
    padding-bottom: 16px;
    grid-template-columns: none !important;
  }
  .vt .vt-area-grid > * {
    min-width: 160px;
    scroll-snap-align: start;
    flex-shrink: 0;
  }
  .vt .vt-area-grid::-webkit-scrollbar {
    display: none;
  }

  /* Shrink huge padding on mobile to keep content tighter and reduce scroll fatigue */
  .vt .vt-hero { padding: 40px 0 60px; }
  .vt .vt-about { padding: 50px 0; }
  .vt .vt-steps { padding: 50px 0; }
  .vt .vt-services { padding: 50px 0; }
  .vt .vt-pillars { padding: 50px 0; }
  .vt .vt-reviews { padding: 50px 0; }
  .vt .vt-area { padding: 50px 0; }
  .vt .vanta-section { padding: 50px 0; }

  /* 
   * AGGRESSIVE SHORTENING 
   * Hide non-essential, extremely long sections on mobile to keep users focused on getting a quote
   */
  .vt .vanta-substeps { display: none !important; } /* Hides the huge lists under each timeline step */
  .vt .vt-blog { display: none !important; } /* Hide blog/articles on mobile (distraction from conversion) */
  .vt .vt-area { display: none !important; } /* Hide huge list of states/cities */
  .vt .vt-about-img { display: none !important; } /* Hide huge about image */
  .vt .vt-ticker-wrap { display: none !important; } /* Hide scrolling ticker */
  
  /* Make the timeline itself less spacious */
  .vt .vanta-step { margin-bottom: 24px !important; }
  .vt .vanta-step-content { padding: 20px !important; margin-left: 60px !important; }
  .vt .vanta-timeline::before { left: 24px !important; }
  .vt .vanta-step-node { left: 24px !important; width: 40px !important; height: 40px !important; font-size: 18px !important; }
  
  /* Hide the redundant 'How Shipping A Car Works' timeline completely on mobile */
  #detailed-process { display: none !important; }
}