/* ============================================
   DRIVE — Premium Automotive Marketplace
   Light/Dark Mode Support - Complete
   ============================================ */

   @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap');

   /* Light Mode (Default) */
   :root {
       /* Primary Colors - Brighter Red */
       --red: #DC2626;
       --red-bright: #EF4444;
       --red-dark: #B91C1C;
       --red-glow: rgba(220, 38, 38, 0.12);
       --red-light: #FEE2E2;
       
       --gold: #F59E0B;
       --gold-light: #FBBF24;
       
       /* Light Mode Backgrounds */
       --bg-0: #F8FAFC;
       --bg-1: #FFFFFF;
       --bg-2: #F1F5F9;
       --bg-3: #E2E8F0;
       --bg-4: #CBD5E1;
       
       /* Light Mode Text */
       --text: #0F172A;
       --text-dim: #475569;
       --text-faint: #94A3B8;
       
       /* Borders */
       --border: rgba(0, 0, 0, 0.08);
       --border-md: rgba(0, 0, 0, 0.12);
       --border-red: rgba(220, 38, 38, 0.3);
       
       /* Shadows */
       --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
       --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
       --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.07);
       --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08);
       
       --radius-sm: 6px;
       --radius-md: 10px;
       --radius-lg: 16px;
       --radius-xl: 22px;
       
       --nav-h: 72px;
       
       --ease: cubic-bezier(0.4, 0, 0.2, 1);
       --ease-out: cubic-bezier(0, 0, 0.2, 1);
   }
   
   /* Dark Mode */
   [data-theme="dark"] {
       --red: #EF4444;
       --red-bright: #F87171;
       --red-dark: #DC2626;
       --red-glow: rgba(239, 68, 68, 0.15);
       --red-light: rgba(239, 68, 68, 0.1);
       
       --gold: #FBBF24;
       --gold-light: #FCD34D;
       
       /* Dark Mode Backgrounds */
       --bg-0: #050508;
       --bg-1: #0A0A10;
       --bg-2: #101018;
       --bg-3: #181824;
       --bg-4: #1E1E2C;
       
       /* Dark Mode Text */
       --text: #EAE6DE;
       --text-dim: rgba(234, 230, 222, 0.65);
       --text-faint: rgba(234, 230, 222, 0.35);
       
       /* Dark Mode Borders */
       --border: rgba(255, 255, 255, 0.06);
       --border-md: rgba(255, 255, 255, 0.1);
       --border-red: rgba(239, 68, 68, 0.35);
       
       /* Dark Mode Shadows */
       --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
       --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
       --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
       --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
   }
   
   /* ---- Reset & Base ---- */
   *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
   
   html { scroll-behavior: smooth; }
   
   body {
       font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
       background: var(--bg-0);
       color: var(--text);
       line-height: 1.6;
       -webkit-font-smoothing: antialiased;
       overflow-x: hidden;
       transition: background 0.3s ease, color 0.3s ease;
   }
   
   a { text-decoration: none; color: inherit; }
   img { display: block; max-width: 100%; }
   
   /* ---- Scrollbar ---- */
   ::-webkit-scrollbar { width: 6px; }
   ::-webkit-scrollbar-track { background: var(--bg-1); }
   ::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 3px; }
   ::-webkit-scrollbar-thumb:hover { background: var(--red); }
   
   /* ============================================
      MAIN CONTENT - FIXED HEADER OFFSET (GLOBAL)
      ============================================ */
   
   .main-content {
       position: relative;
       z-index: 1;
       min-height: 100vh;
       padding-top: var(--nav-h); /* mobile offset — overridden on desktop below */
   }
   
   .main-content > :first-child {
       margin-top: 0;
   }
   
   /* ============================================
      NAVIGATION - FIXED HEADER
      ============================================ */
   
   /* Desktop Navigation */
   .desktop-nav {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       z-index: 1000;
       height: var(--nav-h);
       background: var(--bg-1);
       backdrop-filter: blur(20px) saturate(1.4);
       border-bottom: 1px solid var(--border);
       display: block;
       transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
   }
   
   /* Dark mode specific override */
   [data-theme="dark"] .desktop-nav {
       background: rgba(10, 10, 16, 0.95);
   }
   
   /* Light mode specific (ensures solid background) */
   [data-theme="light"] .desktop-nav {
       background: var(--bg-1);
       box-shadow: var(--shadow-sm);
   }
   
   .desktop-nav-container {
       max-width: 1400px;
       margin: 0 auto;
       padding: 0 2.5rem;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 2rem;
   }
   
   .desktop-logo a {
       display: flex;
       align-items: center;
       gap: 0.6rem;
       font-family: 'Barlow Condensed', sans-serif;
       font-size: 1.75rem;
       font-weight: 800;
       letter-spacing: 0.04em;
       color: var(--text);
       text-decoration: none;
   }
   
   .desktop-logo a span.logo-accent { color: var(--red-bright); }
   .desktop-logo i { color: var(--red-bright); font-size: 1.5rem; }
   
   .desktop-menu {
       display: flex;
       align-items: center;
       gap: 0.25rem;
       list-style: none;
   }
   
   .desktop-menu li a {
       padding: 0.5rem 1rem;
       font-size: 0.8125rem;
       font-weight: 500;
       color: var(--text-dim);
       border-radius: var(--radius-sm);
       transition: all 0.18s var(--ease);
       letter-spacing: 0.02em;
       text-decoration: none;
   }
   
   .desktop-menu li a:hover { 
       color: var(--text); 
       background: rgba(0, 0, 0, 0.05);
   }
   
   [data-theme="dark"] .desktop-menu li a:hover { 
       background: rgba(255, 255, 255, 0.05);
   }
   
   .desktop-menu li a i { margin-right: 0.375rem; font-size: 0.8rem; opacity: 0.7; }
   
   /* Mobile Navigation */
   .mobile-nav {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       z-index: 1000;
       height: var(--nav-h);
       background: var(--bg-1);
       backdrop-filter: blur(20px);
       border-bottom: 1px solid var(--border);
       display: none;
       transition: background 0.3s var(--ease);
   }
   
   [data-theme="light"] .mobile-nav {
       background: rgba(255, 255, 255, 0.98);
   }
   
   [data-theme="dark"] .mobile-nav {
       background: rgba(10, 10, 16, 0.95);
   }
   
   .nav-container {
       padding: 0 1.25rem;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: space-between;
   }
   
   .logo a {
       font-family: 'Barlow Condensed', sans-serif;
       font-size: 1.6rem;
       font-weight: 800;
       letter-spacing: 0.04em;
       color: var(--text);
       text-decoration: none;
   }
   
   .logo a span.logo-accent { color: var(--red-bright); }
   .logo i { color: var(--red-bright); margin-right: 0.4rem; }
   
   .menu-toggle {
       background: transparent;
       border: 1px solid var(--border-md);
       color: var(--text);
       width: 40px;
       height: 40px;
       border-radius: var(--radius-sm);
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1rem;
       transition: background 0.18s, border-color 0.18s;
   }
   
   .menu-toggle:hover { background: var(--bg-3); border-color: var(--red); }
   
   /* Sidebar (Mobile) */
   .sidebar {
       position: fixed;
       left: -300px;
       top: 0;
       width: 300px;
       height: 100%;
       background: var(--bg-1);
       border-right: 1px solid var(--border);
       z-index: 1001;
       transition: left 0.3s var(--ease-out);
       overflow-y: auto;
       display: flex;
       flex-direction: column;
   }
   
   [data-theme="dark"] .sidebar {
       background: var(--bg-2);
   }
   
   .sidebar.active { left: 0; }
   
   .sidebar-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 1.25rem 1.5rem;
       border-bottom: 1px solid var(--border);
   }
   
   .close-sidebar {
       background: var(--bg-3);
       border: 1px solid var(--border);
       color: var(--text-dim);
       width: 36px;
       height: 36px;
       border-radius: var(--radius-sm);
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 0.875rem;
       transition: background 0.18s;
   }
   
   .close-sidebar:hover { background: var(--red); color: white; border-color: var(--red); }
   
   .user-info {
       padding: 1.5rem;
       border-bottom: 1px solid var(--border);
       background: var(--bg-2);
   }
   
   .user-avatar i { font-size: 2.5rem; color: var(--text-faint); }
   .user-details h4 { margin-top: 0.5rem; font-size: 1rem; }
   
   .user-role {
       display: inline-block;
       padding: 0.2rem 0.6rem;
       background: var(--red);
       color: white;
       border-radius: var(--radius-sm);
       font-size: 0.7rem;
       font-weight: 600;
       letter-spacing: 0.06em;
       text-transform: uppercase;
       margin-top: 0.4rem;
   }
   
   .nav-menu {
       list-style: none;
       padding: 0.75rem 0.75rem;
       flex: 1;
   }
   
   .nav-menu li a {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       padding: 0.75rem 1rem;
       color: var(--text-dim);
       font-size: 0.875rem;
       font-weight: 500;
       border-radius: var(--radius-md);
       transition: all 0.18s var(--ease);
       margin-bottom: 2px;
   }
   
   .nav-menu li a:hover {
       background: var(--bg-3);
       color: var(--text);
   }
   
   .nav-menu li a i { width: 18px; font-size: 0.875rem; opacity: 0.65; }
   
   /* Bottom Navigation (Mobile) */
   .bottom-nav {
       position: fixed;
       bottom: 0;
       left: 0;
       right: 0;
       background: var(--bg-1);
       backdrop-filter: blur(16px);
       border-top: 1px solid var(--border);
       display: none;
       justify-content: space-around;
       padding: 0.5rem 0.5rem 0.75rem;
       z-index: 1000;
   }
   
   [data-theme="light"] .bottom-nav {
       background: rgba(255, 255, 255, 0.95);
   }
   
   [data-theme="dark"] .bottom-nav {
       background: rgba(10, 10, 16, 0.95);
   }
   
   .bottom-nav-item {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 0.2rem;
       padding: 0.5rem 0.75rem;
       border-radius: var(--radius-md);
       color: var(--text-faint);
       font-size: 0.625rem;
       font-weight: 600;
       letter-spacing: 0.04em;
       text-transform: uppercase;
       transition: all 0.18s var(--ease);
   }
   
   .bottom-nav-item i { font-size: 1.125rem; }
   .bottom-nav-item.active, .bottom-nav-item:hover { color: var(--red-bright); background: var(--red-glow); }
   
   /* Overlay */
   .overlay {
       display: none;
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, 0.7);
       backdrop-filter: blur(4px);
       z-index: 1000;
   }
   
   .overlay.active { display: block; }
   
   /* ============================================
      RESPONSIVE NAVIGATION
      Desktop (>=1024px): persistent left sidebar
      Mobile (<1024px): hamburger drawer
      ============================================ */
   @media (min-width: 1024px) {
       /* Hide top bars & mobile bottom nav */
       .desktop-nav  { display: none !important; }
       .mobile-nav   { display: none !important; }
       .bottom-nav   { display: none !important; }
       .menu-toggle  { display: none !important; }
       .overlay      { display: none !important; }

       /* Sidebar: always visible, full-height, left-anchored */
       .sidebar {
           display: flex !important;
           position: fixed;
           left: 0;
           top: 0;
           width: 260px;
           height: 100vh;
           z-index: 1100;
           overflow-y: auto;
           overflow-x: hidden;
           transition: none;
           box-shadow: 1px 0 0 var(--border);
       }

       /* Hide the X close button inside sidebar on desktop */
       .close-sidebar { display: none !important; }

       /* Push main content right so it doesn't sit behind the sidebar */
       .main-content {
           padding-left: 260px;
           padding-top: 0;
       }

       .footer {
           margin-left: 260px !important;
           display: block !important;
       }
   }

   @media (max-width: 1023px) {
       .desktop-nav { display: none; }
       .mobile-nav  { display: block; }
       .bottom-nav  { display: flex; }
       .main-content { padding-bottom: 80px !important; }

       /* Hide full footer on mobile — bottom-nav is the primary navigation */
       .footer {
           display: none !important;
       }
   }

   /* Payment Requests Link Highlight */
.payment-requests-link {
    position: relative;
}

.payment-requests-link i {
    color: var(--red-bright);
}

/* Optional: Add a subtle badge for pending count */
.payment-requests-link .badge {
    position: absolute;
    top: -8px;
    right: -12px;
    background: var(--red);
    color: white;
    font-size: 0.6rem;
    padding: 0.125rem 0.375rem;
    border-radius: 100px;
    min-width: 16px;
    text-align: center;
}
   
   /* ============================================
      THEME TOGGLE BUTTON
      ============================================ */
   
   .theme-toggle {
       position: fixed;
       bottom: 2rem;
       right: 2rem;
       width: 48px;
       height: 48px;
       border-radius: 50%;
       background: var(--bg-3);
       border: 1px solid var(--border-md);
       color: var(--text);
       cursor: pointer;
       z-index: 9999;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s var(--ease);
       backdrop-filter: blur(8px);
       font-size: 1.25rem;
       box-shadow: var(--shadow-md);
   }
   
   .theme-toggle:hover {
       background: var(--red);
       border-color: var(--red);
       transform: scale(1.05);
       color: white;
   }
   
   @media (max-width: 768px) {
       .theme-toggle {
           bottom: 5rem;
           right: 1rem;
       }
   }
   
   /* ============================================
      BUTTONS
      ============================================ */
   
   .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
       padding: 0.75rem 1.5rem;
       border: none;
       border-radius: var(--radius-md);
       font-family: 'Plus Jakarta Sans', sans-serif;
       font-size: 0.875rem;
       font-weight: 600;
       letter-spacing: 0.01em;
       cursor: pointer;
       transition: all 0.22s var(--ease);
       white-space: nowrap;
   }
   
   .btn-primary {
       background: var(--red);
       color: white;
   }
   
   .btn-primary:hover {
       background: var(--red-bright);
       transform: translateY(-1px);
       box-shadow: 0 8px 24px rgba(220, 38, 38, 0.35);
   }
   
   .btn-secondary {
       background: transparent;
       color: var(--text);
       border: 1.5px solid var(--border-md);
   }
   
   .btn-secondary:hover {
       border-color: var(--red);
       color: var(--red-bright);
       background: var(--red-glow);
   }
   
   .btn-outline {
       background: transparent;
       color: var(--text);
       border: 1.5px solid var(--border-md);
   }
   
   .btn-outline:hover {
       border-color: var(--text);
       background: rgba(255, 255, 255, 0.04);
       transform: translateY(-1px);
   }
   
   /* ============================================
      HERO SECTION - ALWAYS WHITE TEXT (dark photo background)
      ============================================ */
   
   .hero-section {
       position: relative;
       min-height: 90vh;
       display: flex;
       align-items: flex-end;
       overflow: hidden;
       margin-top: 0;
   }
   
   .hero-bg {
       position: absolute;
       inset: 0;
       background: url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=1800&q=85&auto=format') center 40% / cover no-repeat;
   }
   
   .hero-bg::after {
       content: '';
       position: absolute;
       inset: 0;
       background: linear-gradient(to right, rgba(5, 5, 8, 0.92) 30%, rgba(5, 5, 8, 0.3) 70%),
                   linear-gradient(to top, rgba(5, 5, 8, 1) 0%, transparent 55%);
   }
   
   .hero-content {
       position: relative;
       z-index: 1;
       width: 100%;
       padding: 6rem 2.5rem 5rem;
       max-width: 1400px;
       margin: 0 auto;
   }
   
   .hero-eyebrow {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       margin-bottom: 1.25rem;
       opacity: 0;
       animation: fadeUp 0.6s 0.1s var(--ease-out) forwards;
   }
   
   .hero-eyebrow span {
       font-size: 0.75rem;
       font-weight: 600;
       letter-spacing: 0.14em;
       text-transform: uppercase;
       color: rgba(255, 255, 255, 0.55);
   }
   
   .eyebrow-line {
       width: 40px;
       height: 1.5px;
       background: var(--red-bright);
       border-radius: 2px;
   }
   
   .hero-content h1 {
       font-family: 'Barlow Condensed', sans-serif;
       font-size: clamp(3.5rem, 8vw, 7.5rem);
       font-weight: 800;
       line-height: 0.92;
       letter-spacing: -0.01em;
       text-transform: uppercase;
       color: #FFFFFF;
       margin-bottom: 1.5rem;
       opacity: 0;
       animation: fadeUp 0.7s 0.25s var(--ease-out) forwards;
   }
   
   .hero-content h1 em {
       font-style: normal;
       color: var(--red-bright);
   }
   
   .hero-sub {
       font-size: 1.0625rem;
       color: rgba(255, 255, 255, 0.72);
       max-width: 460px;
       line-height: 1.65;
       margin-bottom: 2.5rem;
       opacity: 0;
       animation: fadeUp 0.7s 0.4s var(--ease-out) forwards;
   }
   
   .hero-actions {
       display: flex;
       gap: 0.875rem;
       flex-wrap: wrap;
       opacity: 0;
       animation: fadeUp 0.7s 0.55s var(--ease-out) forwards;
   }
   
   .hero-actions .btn-primary { padding: 0.875rem 2rem; font-size: 0.9375rem; }
   
   .hero-scroll-hint {
       position: absolute;
       bottom: 2.5rem;
       right: 2.5rem;
       display: flex;
       align-items: center;
       gap: 0.625rem;
       font-size: 0.6875rem;
       letter-spacing: 0.1em;
       text-transform: uppercase;
       color: rgba(255, 255, 255, 0.45);
       opacity: 0;
       animation: fadeIn 1s 1.2s forwards;
   }
   
   .hero-scroll-hint i {
       animation: bounce 1.6s ease-in-out infinite;
       font-size: 1rem;
   }
   
   /* ============================================
      STATS BAR
      ============================================ */
   
   .stats-bar {
       background: var(--bg-2);
       border-top: 1px solid var(--border);
       border-bottom: 1px solid var(--border);
       padding: 0;
       margin-top: 0;
   }
   
   .stats-inner {
       max-width: 1400px;
       margin: 0 auto;
       padding: 0 2.5rem;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
   }
   
   .stat-item {
       display: flex;
       align-items: center;
       gap: 1.25rem;
       padding: 1.875rem 2rem;
       border-right: 1px solid var(--border);
       transition: background 0.22s;
   }
   
   .stat-item:last-child { border-right: none; }
   .stat-item:hover { background: var(--bg-3); }
   
   .stat-icon {
       width: 48px;
       height: 48px;
       background: var(--red-glow);
       border: 1px solid var(--border-red);
       border-radius: var(--radius-md);
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   .stat-icon i { color: var(--red-bright); font-size: 1.125rem; }
   
   .stat-number {
       font-family: 'Barlow Condensed', sans-serif;
       font-size: 2.25rem;
       font-weight: 700;
       line-height: 1;
       color: var(--text);
   }
   
   .stat-label {
       font-size: 0.8rem;
       color: var(--text-dim);
       margin-top: 0.2rem;
       font-weight: 500;
   }
   
   /* ============================================
      VEHICLE CARDS
      ============================================ */
   
   .vehicles-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 1.25rem;
   }
   
   .vehicle-card {
       background: var(--bg-2);
       border: 1px solid var(--border);
       border-radius: var(--radius-xl);
       overflow: hidden;
       transition: all 0.28s var(--ease);
       cursor: pointer;
   }
   
   .vehicle-card:hover {
       border-color: var(--border-red);
       transform: translateY(-4px);
       box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
   }
   
   .card-image-wrap {
       position: relative;
       height: 220px;
       overflow: hidden;
       background: var(--bg-3);
   }
   
   .card-image-wrap img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.5s var(--ease);
   }
   
   .vehicle-card:hover .card-image-wrap img { transform: scale(1.06); }
   
   .card-badge {
       position: absolute;
       top: 0.875rem;
       left: 0.875rem;
       padding: 0.3rem 0.7rem;
       border-radius: 100px;
       font-size: 0.65rem;
       font-weight: 700;
       letter-spacing: 0.08em;
       text-transform: uppercase;
       backdrop-filter: blur(8px);
   }
   
   .badge-sale { background: rgba(220, 38, 38, 0.9); color: white; }
   .badge-rent { background: rgba(245, 158, 11, 0.9); color: var(--bg-0); }
   .badge-both { background: rgba(30, 30, 44, 0.9); color: var(--text); }
   
   .card-body {
       padding: 1.25rem 1.375rem 1.5rem;
   }
   
   .card-title {
       font-family: 'Barlow Condensed', sans-serif;
       font-size: 1.375rem;
       font-weight: 700;
       color: var(--text);
       margin-bottom: 1rem;
       text-transform: uppercase;
   }
   
   .card-specs {
       display: flex;
       gap: 0.75rem;
       flex-wrap: wrap;
       margin-bottom: 1rem;
       padding-bottom: 1rem;
       border-bottom: 1px solid var(--border);
   }
   
   .card-spec {
       display: flex;
       align-items: center;
       gap: 0.35rem;
       font-size: 0.75rem;
       color: var(--text-dim);
   }
   
   .card-spec i { font-size: 0.7rem; opacity: 0.6; }
   
   .card-price {
       font-family: 'Barlow Condensed', sans-serif;
       font-size: 1.625rem;
       font-weight: 700;
       color: var(--red-bright);
       line-height: 1;
   }
   
   .card-price-unit {
       font-size: 0.7rem;
       color: var(--text-faint);
       margin-top: 0.15rem;
   }
   
   .card-footer-row {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 1rem;
   }
   
   .card-btn {
       padding: 0.625rem 1.25rem;
       font-size: 0.8rem;
       border-radius: var(--radius-md);
       white-space: nowrap;
   }
   
   /* ============================================
      HOW IT WORKS
      ============================================ */
   
   .how-section {
       background: var(--bg-1);
       border-top: 1px solid var(--border);
       border-bottom: 1px solid var(--border);
       padding: 5rem 0;
   }
   
   .steps-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 1px;
       background: var(--border);
       border: 1px solid var(--border);
       border-radius: var(--radius-xl);
       overflow: hidden;
       margin-top: 3rem;
   }
   
   .step-item {
       background: var(--bg-2);
       padding: 2.5rem 2rem;
       transition: background 0.22s;
   }
   
   .step-item:hover { background: var(--bg-3); }
   
   .step-num {
       font-family: 'Barlow Condensed', sans-serif;
       font-size: 4rem;
       font-weight: 800;
       color: rgba(220, 38, 38, 0.12);
       line-height: 1;
       margin-bottom: 1.25rem;
   }
   
   .step-icon-wrap {
       width: 44px;
       height: 44px;
       border-radius: var(--radius-md);
       background: var(--red-glow);
       border: 1px solid var(--border-red);
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 1.25rem;
   }
   
   .step-icon-wrap i { color: var(--red-bright); font-size: 1.125rem; }
   
   .step-title {
       font-family: 'Barlow Condensed', sans-serif;
       font-size: 1.25rem;
       font-weight: 700;
       text-transform: uppercase;
       color: var(--text);
       margin-bottom: 0.5rem;
   }
   
   .step-desc {
       font-size: 0.8375rem;
       color: var(--text-dim);
       line-height: 1.6;
   }
   
   /* ============================================
      ALERTS & NOTIFICATIONS
      ============================================ */
   
   .alert {
       padding: 0.875rem 1.25rem;
       border-radius: var(--radius-md);
       margin: 1rem 2.5rem;
       font-size: 0.875rem;
       font-weight: 500;
       display: flex;
       align-items: center;
       gap: 0.625rem;
       animation: fadeDown 0.3s var(--ease-out);
   }
   
   .alert-success {
       background: rgba(16, 185, 129, 0.1);
       color: #34D399;
       border: 1px solid rgba(16, 185, 129, 0.2);
   }
   
   .alert-error {
       background: rgba(239, 68, 68, 0.1);
       color: #F87171;
       border: 1px solid rgba(239, 68, 68, 0.2);
   }
   
   .alert-warning {
       background: rgba(245, 158, 11, 0.1);
       color: #FBBF24;
       border: 1px solid rgba(245, 158, 11, 0.2);
   }
   
   /* ============================================
      FOOTER
      ============================================ */
   
   .footer {
       background: var(--bg-1);
       border-top: 1px solid var(--border);
       padding: 4rem 0 0;
       margin-top: 0;
   }
   
   .footer-container {
       max-width: 1400px;
       margin: 0 auto;
       padding: 0 2.5rem;
   }
   
   .footer-grid {
       display: grid;
       grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
       gap: 3rem;
       padding-bottom: 3rem;
       border-bottom: 1px solid var(--border);
   }
   
   .footer-brand {
       font-family: 'Barlow Condensed', sans-serif;
       font-size: 1.75rem;
       font-weight: 800;
       letter-spacing: 0.04em;
       color: var(--text);
       margin-bottom: 0.875rem;
       display: flex;
       align-items: center;
       gap: 0.5rem;
   }
   
   .footer-brand i { color: var(--red-bright); }
   .footer-brand span.logo-accent { color: var(--red-bright); }
   
   .footer-col p {
       font-size: 0.8375rem;
       color: var(--text-dim);
       line-height: 1.7;
       margin-bottom: 1.5rem;
   }
   
   .footer-col h3 {
       font-size: 0.75rem;
       font-weight: 600;
       letter-spacing: 0.1em;
       text-transform: uppercase;
       color: var(--text-dim);
       margin-bottom: 1.25rem;
   }
   
   .footer-links { list-style: none; }
   .footer-links li { margin-bottom: 0.625rem; }
   .footer-links li a {
       font-size: 0.8375rem;
       color: var(--text-dim);
       transition: color 0.18s;
   }
   .footer-links li a:hover { color: var(--red-bright); }
   
   .social-links {
       display: flex;
       gap: 0.625rem;
   }
   
   .social-links a {
       width: 36px;
       height: 36px;
       background: var(--bg-3);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--text-dim);
       font-size: 0.875rem;
       transition: all 0.18s;
   }
   
   .social-links a:hover { background: var(--red); border-color: var(--red); color: white; transform: translateY(-2px); }
   
   .newsletter-form { display: flex; gap: 0.5rem; }
   .newsletter-form input {
       flex: 1;
       padding: 0.625rem 0.875rem;
       background: var(--bg-3);
       border: 1px solid var(--border-md);
       border-radius: var(--radius-md);
       color: var(--text);
       font-size: 0.8125rem;
       outline: none;
   }
   .newsletter-form input:focus { border-color: var(--red); }
   .newsletter-form button {
       padding: 0.625rem 1rem;
       background: var(--red);
       border: none;
       border-radius: var(--radius-md);
       color: white;
       cursor: pointer;
       font-size: 0.875rem;
       transition: background 0.18s;
   }
   .newsletter-form button:hover { background: var(--red-bright); }
   
   .footer-contact {
       margin-top: 1.25rem;
       display: flex;
       flex-direction: column;
       gap: 0.4rem;
       font-size: 0.75rem;
       color: var(--text-dim);
   }
   .footer-contact span { display: flex; align-items: center; gap: 0.5rem; }
   .footer-contact i { color: var(--red-bright); font-size: 0.7rem; width: 20px; }
   
   .footer-bottom {
       padding: 1.5rem 0;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 1rem;
       flex-wrap: wrap;
   }
   
   .footer-bottom p {
       font-size: 0.75rem;
       color: var(--text-faint);
       margin: 0;
   }
   
   /* ============================================
      DESKTOP USER DROPDOWN
      ============================================ */
   
   .desktop-user {
       position: relative;
   }
   
   .user-dropdown {
       position: relative;
   }
   
   .user-dropdown-btn {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       background: var(--bg-3);
       border: 1px solid var(--border-md);
       border-radius: var(--radius-lg);
       padding: 0.5rem 1rem;
       cursor: pointer;
       transition: all 0.2s var(--ease);
   }
   
   .user-dropdown-btn:hover {
       border-color: var(--red);
       background: var(--bg-2);
   }
   
   .user-dropdown-btn .user-name {
       font-size: 0.8125rem;
       font-weight: 500;
       color: var(--text);
   }
   
   .user-dropdown-btn .user-avatar {
       width: 32px;
       height: 32px;
       background: var(--red);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
   }
   
   .dropdown-arrow {
       font-size: 0.7rem;
       color: var(--text-dim);
       transition: transform 0.2s var(--ease);
   }
   
   .user-dropdown.active .dropdown-arrow {
       transform: rotate(180deg);
   }
   
   .user-dropdown-menu {
       position: absolute;
       top: calc(100% + 0.5rem);
       right: 0;
       min-width: 280px;
       background: var(--bg-2);
       border: 1px solid var(--border);
       border-radius: var(--radius-lg);
       box-shadow: var(--shadow-lg);
       opacity: 0;
       visibility: hidden;
       transform: translateY(-10px);
       transition: all 0.2s var(--ease);
       z-index: 1000;
   }
   
   .user-dropdown.active .user-dropdown-menu {
       opacity: 1;
       visibility: visible;
       transform: translateY(0);
   }
   
   .dropdown-header {
       display: flex;
       align-items: center;
       gap: 1rem;
       padding: 1rem;
       border-bottom: 1px solid var(--border);
   }
   
   .dropdown-avatar i {
       font-size: 2rem;
       color: var(--text-faint);
   }
   
   .dropdown-name {
       font-weight: 600;
       color: var(--text);
   }
   
   .dropdown-role {
       font-size: 0.65rem;
       color: var(--red-bright);
       text-transform: uppercase;
   }
   
   .dropdown-email {
       font-size: 0.6rem;
       color: var(--text-dim);
   }
   
   .dropdown-divider {
       height: 1px;
       background: var(--border);
       margin: 0.5rem 0;
   }
   
   .dropdown-item {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       padding: 0.75rem 1rem;
       color: var(--text-dim);
       text-decoration: none;
       transition: all 0.2s var(--ease);
       font-size: 0.8rem;
   }
   
   .dropdown-item:hover {
       background: var(--bg-3);
       color: var(--text);
   }
   
   .dropdown-item.logout {
       color: #F87171;
   }
   
   /* ============================================
      MODALS
      ============================================ */
   
   .modal {
       display: none;
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, 0.85);
       backdrop-filter: blur(8px);
       z-index: 2000;
       align-items: center;
       justify-content: center;
   }
   .modal.active { display: flex; }
   
   .modal-content {
       background: var(--bg-2);
       border: 1px solid var(--border-md);
       border-radius: var(--radius-xl);
       max-width: 520px;
       width: 94%;
       max-height: 92vh;
       overflow-y: auto;
       box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7);
   }
   
   .modal-header {
       padding: 1.5rem;
       border-bottom: 1px solid var(--border);
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   
   .modal-body { padding: 1.5rem; }
   
   /* ============================================
      BADGES
      ============================================ */
   
   .badge {
       display: inline-flex;
       align-items: center;
       gap: 0.3rem;
       padding: 0.2rem 0.65rem;
       border-radius: 100px;
       font-size: 0.6875rem;
       font-weight: 600;
       letter-spacing: 0.06em;
       text-transform: uppercase;
   }
   
   .badge-pending { background: rgba(245, 158, 11, 0.15); color: #FBBF24; }
   .badge-approved { background: rgba(34, 197, 94, 0.15); color: #4ADE80; }
   .badge-rejected { background: rgba(239, 68, 68, 0.15); color: #F87171; }
   .badge-confirmed { background: rgba(59, 130, 246, 0.15); color: #60A5FA; }
   .badge-active { background: rgba(34, 197, 94, 0.15); color: #4ADE80; }
   .badge-completed { background: rgba(34, 197, 94, 0.15); color: #4ADE80; }
   .badge-cancelled { background: rgba(239, 68, 68, 0.15); color: #F87171; }
   
   /* ============================================
      RESPONSIVE (Additional)
      ============================================ */
   
   @media (max-width: 1024px) {
       .vehicles-grid { grid-template-columns: repeat(2, 1fr); }
       .steps-grid { grid-template-columns: repeat(2, 1fr); }
       .stats-inner { grid-template-columns: repeat(3, 1fr); }
       .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
       .page-container { padding: 0 1.25rem; }
       .footer-container { padding: 0 1.25rem; }
       .footer-bottom { flex-direction: column; text-align: center; }
   }
   
   @media (max-width: 768px) {
       .vehicles-grid { grid-template-columns: 1fr; }
       .steps-grid { grid-template-columns: 1fr; }
       .stats-inner { grid-template-columns: 1fr; }
       .stat-item { border-right: none; border-bottom: 1px solid var(--border); }
       .stat-item:last-child { border-bottom: none; }
       .footer-grid { grid-template-columns: 1fr; }
       .hero-content { padding: 4rem 1.25rem 3.5rem; }
       .hero-actions { flex-direction: column; }
       .hero-actions .btn { width: 100%; justify-content: center; }
       .section-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
       .alert { margin: 0.75rem 1.25rem; }
   }
   
   /* ============================================
      ANIMATIONS
      ============================================ */
   
   @keyframes fadeUp {
       from { opacity: 0; transform: translateY(20px); }
       to { opacity: 1; transform: translateY(0); }
   }
   
   @keyframes fadeDown {
       from { opacity: 0; transform: translateY(-10px); }
       to { opacity: 1; transform: translateY(0); }
   }
   
   @keyframes fadeIn {
       from { opacity: 0; }
       to { opacity: 1; }
   }
   
   @keyframes spin {
       to { transform: rotate(360deg); }
   }
   
   @keyframes bounce {
       0%, 100% { transform: translateY(0); }
       50% { transform: translateY(5px); }
   }