:root {
            --gold: #D4AF37;
            --dark-gold: #B8860B;
            --black: #0a0a0f;
            --dark-gray: #111118;
            --light-gray: #F5F5F5;
            --white: #FFFFFF;
            --success: #22c55e;
            --danger: #ef4444;
            --warning: #f59e0b;
            --info: #3b82f6;
            
            /* Theme colors - Dark mode default */
            --bg-primary: #0a0a0f;
            --bg-secondary: #111118;
            --bg-card: #1a1a24;
            --text-primary: #FFFFFF;
            --text-secondary: #a1a1aa;
            --text-muted: #71717a;
            --border-color: rgba(212, 175, 55, 0.2);
            
            /* Modern Design Tokens */
            --radius-sm: 8px;
            --radius-md: 16px;
            --radius-lg: 24px;
            --radius-xl: 32px;
            --radius-full: 9999px;
            
            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
            --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);
            --shadow-gold: 0 4px 20px rgba(212, 175, 55, 0.25);
            
            --spacing-section: clamp(80px, 12vw, 140px);
            
            /* Glass effect */
            --glass-bg: rgba(255, 255, 255, 0.05);
            --glass-border: rgba(255, 255, 255, 0.1);
        }
        
        /* Light Mode Theme - Angelic Off-White & Gold */
        [data-theme="light"] {
            --bg-primary: #fafafa;
            --bg-secondary: #f4f4f5;
            --bg-card: #FFFFFF;
            --text-primary: #1a1a1a;
            --text-secondary: #3f3f46;
            --text-muted: #666666;
            --border-color: #e4e4e7;
            --glass-bg: rgba(255, 255, 255, 0.7);
            --glass-border: rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
            --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.08);
            --gold: #B8860B; /* Darker gold for better contrast in light mode */
            --border-color: rgba(184, 134, 11, 0.4);
            --black: #1a1a1a;
            --dark-gray: #F5F3F0;
        }
        
        /* Prominent gold text in light mode */
        [data-theme="light"] .gold-text,
        [data-theme="light"] .section-title,
        [data-theme="light"] .fare-form-title,
        [data-theme="light"] h2[style*="color: var(--gold)"],
        [data-theme="light"] h3[style*="color: var(--gold)"],
        [data-theme="light"] strong[style*="color: var(--gold)"] {
            color: #9A7209 !important;
            text-shadow: none;
        }
        
        [data-theme="light"] .nav-link,
        [data-theme="light"] .dropdown-link,
        [data-theme="light"] a {
            color: #1a1a1a;
        }
        
        [data-theme="light"] .nav-link:hover,
        [data-theme="light"] a:hover {
            color: #9A7209;
        }
        
        [data-theme="light"] .impact-cta {
            background: linear-gradient(135deg, #B8860B 0%, #9A7209 100%);
            color: #000000 !important;
        }
        
        [data-theme="light"] body {
            background-color: var(--bg-primary);
            color: var(--text-primary);
        }
        
        [data-theme="light"] header {
            background: rgba(250, 248, 245, 0.98);
            border-bottom: none;
        }
        
        [data-theme="light"] .nav-links a,
        [data-theme="light"] .mobile-nav a {
            color: var(--text-primary);
        }
        
        [data-theme="light"] .hero {
            background: transparent !important;
        }
        
        [data-theme="light"] section {
            background-color: var(--bg-primary);
        }
        
        /* Modern section spacing */
        section {
            padding: var(--spacing-section) 0;
        }
        
        section .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }
        
        [data-theme="light"] .section-title,
        [data-theme="light"] h1, 
        [data-theme="light"] h2, 
        [data-theme="light"] h3 {
            color: var(--gold);
        }
        
        [data-theme="light"] h4,
        [data-theme="light"] h5,
        [data-theme="light"] h6 {
            color: #0a0a0f;
        }
        
        [data-theme="light"] p,
        [data-theme="light"] span,
        [data-theme="light"] li,
        [data-theme="light"] .section-subtitle {
            color: #2a2a2f;
        }
        
        [data-theme="light"] a {
            color: var(--gold);
        }
        
        [data-theme="light"] .btn-primary,
        [data-theme="light"] .book-btn {
            background: var(--gold);
            color: #0a0a0f;
        }
        
        [data-theme="light"] .stat-card,
        [data-theme="light"] .expandable-section,
        [data-theme="light"] .testimonial-card {
            background: var(--bg-card);
            border-color: var(--border-color);
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        /* Model steps in How It Works - no box styling */
        [data-theme="light"] .model-step {
            background: transparent;
            border: none;
            box-shadow: none;
        }
        
        [data-theme="light"] .soft-launch-notice {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(250, 248, 245, 0.9) 100%);
            border-color: var(--gold);
        }
        
        [data-theme="light"] .dual-driver-hero {
            background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
        }
        
        [data-theme="light"] .stats-section {
            background: linear-gradient(180deg, #F5F3F0 0%, #FAF8F5 100%);
        }
        
        /* Light Mode - Alternating section backgrounds for visual distinction */
        [data-theme="light"] #safety {
            background: linear-gradient(180deg, #FAF8F5 0%, #F8F6F1 100%);
        }
        
        [data-theme="light"] #substitute-driver,
        [data-theme="light"] #how-it-works {
            background: linear-gradient(180deg, #F8F6F1 0%, #FAF8F5 100%);
        }
        
        [data-theme="light"] #services {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.03) 0%, #FAF8F5 50%, rgba(212, 175, 55, 0.05) 100%);
        }
        
        [data-theme="light"] #book-now {
            background: linear-gradient(180deg, #FAF8F5 0%, #F5F3F0 100%);
        }
        
        /* Use Cases Section - Default (Dark Mode) */
        .use-cases-section {
            background: linear-gradient(180deg, #0a0a0a 0%, #111 100%);
        }
        
        .use-case-card {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(212,175,55,0.2);
            border-radius: 12px;
            padding: 1.5rem;
        }
        
        .use-case-icon {
            font-size: 2rem;
            margin-bottom: 0.75rem;
        }
        
        .use-case-card h4 {
            color: var(--gold);
            margin-bottom: 0.5rem;
        }
        
        .use-case-card p {
            color: #ccc;
            font-size: 0.9rem;
        }
        
        /* Use Cases Unified Card - Responsive */
        @media (max-width: 768px) {
            .use-cases-unified-card {
                grid-template-columns: 1fr !important;
            }
            .use-cases-unified-card > div:first-child {
                max-height: 200px;
            }
        }
        
        /* Light Mode - Use Cases Unified Card */
        [data-theme="light"] .use-cases-unified-card {
            background: #fff !important;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(212, 175, 55, 0.2) !important;
        }
        
        /* Safety Unified Card - Responsive */
        @media (max-width: 768px) {
            .safety-unified-card {
                grid-template-columns: 1fr !important;
            }
            .safety-unified-card > div:first-child {
                padding: 1.5rem 1rem !important;
            }
            .safety-unified-card > div:first-child img {
                max-width: 160px !important;
            }
            .tech-unified-card {
                grid-template-columns: 1fr !important;
            }
            .tech-unified-card > div:first-child {
                padding: 1.5rem 1rem !important;
            }
            .tech-unified-card > div:first-child img {
                max-width: 180px !important;
            }
        }
        
        [data-theme="light"] .safety-unified-card,
        [data-theme="light"] .tech-unified-card {
            background: #fff !important;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(212, 175, 55, 0.2) !important;
        }
        
        /* Fare Estimate Unified Card - Same as others */
        .fare-estimate-unified-card {
            max-width: 900px !important;
            width: 100% !important;
        }
        
        /* Cost & Rideshare Unified Cards - Responsive */
        @media (max-width: 768px) {
            .cost-unified-card,
            .rideshare-unified-card,
            .fare-unified-card,
            .drink-driving-unified-card {
                grid-template-columns: 1fr !important;
            }
            .cost-unified-card > div:first-child,
            .fare-unified-card > div:first-child,
            .drink-driving-unified-card > div:first-child {
                padding: 1rem !important;
            }
            .cost-unified-card > div:first-child img,
            .fare-unified-card > div:first-child img,
            .drink-driving-unified-card > div:first-child img {
                max-width: 180px !important;
            }
            .rideshare-unified-card > div:nth-child(2) {
                grid-template-columns: 1fr !important;
            }
            .rideshare-unified-card > div:nth-child(2) > div:first-child {
                border-right: none !important;
                border-bottom: 1px solid rgba(239, 68, 68, 0.2) !important;
            }
            
            /* Hero bar scene image - full width on mobile */
            .hero-bar-scene-container {
                max-width: 100% !important;
            }
            
            /* Hero section - full viewport on mobile */
            .hero {
                min-height: calc(100vh - 70px) !important;
                min-height: calc(100dvh - 70px) !important; /* Dynamic viewport height for mobile browsers */
                padding: 1rem 0 2rem !important;
            }
            
            /* Keep normal free scrolling between hero and How It Works */
            #substitute-driver {
                min-height: calc(100vh - 70px);
                min-height: calc(100dvh - 70px);
                display: flex;
                align-items: center;
                padding: 2rem 0;
            }
            
            /* Section dividers - mobile adjustments */
            main > section:not(:last-child)::after {
                max-width: 80%;
                margin: 1.5rem auto 0;
            }
            
            /* Redesigned Compact Sections - Mobile */
            #cost-savings > .container > div[style*="grid-template-columns: 140px"],
            #stats > .container > div[style*="grid-template-columns: 180px"] {
                grid-template-columns: 1fr !important;
            }
            #cost-savings > .container > div[style*="grid-template-columns: 140px"] > div:first-child,
            #stats > .container > div[style*="grid-template-columns: 180px"] > div:first-child {
                max-height: 140px;
                overflow: hidden;
            }
            #missionExpandedContent > div:last-child {
                grid-template-columns: 1fr !important;
            }
        }
        
        [data-theme="light"] .cost-unified-card,
        [data-theme="light"] .rideshare-unified-card,
        [data-theme="light"] .drink-driving-unified-card,
        [data-theme="light"] .fare-unified-card {
            background: #fff !important;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(212, 175, 55, 0.2) !important;
        }
        
        /* Cost Savings Section - Default (Dark Mode) */
        .cost-savings-section {
            background: linear-gradient(180deg, #111 0%, #0a0a0a 100%);
        }
        
        .cost-card {
            background: rgba(220,53,69,0.1);
            border: 1px solid rgba(220,53,69,0.3);
            border-radius: 12px;
            padding: 1.5rem;
            text-align: center;
        }
        
        .cost-icon {
            font-size: 2rem;
        }
        
        .cost-card h4 {
            color: #dc3545;
            margin: 0.75rem 0 0.5rem;
        }
        
        .cost-amount {
            font-size: 1.5rem;
            font-weight: 700;
            color: #dc3545;
        }
        
        .cost-card p {
            color: #999;
            font-size: 0.8rem;
            margin-top: 0.5rem;
        }
        
        .interlock-details {
            margin-top: 1.5rem;
            padding: 1.5rem;
            background: rgba(220,53,69,0.05);
            border-radius: 12px;
            border: 1px solid rgba(220,53,69,0.2);
        }
        
        .interlock-details h4 {
            color: #dc3545;
            margin-bottom: 0.75rem;
        }
        
        .interlock-intro {
            color: #ccc;
            font-size: 0.9rem;
            margin-bottom: 0.75rem;
        }
        
        .interlock-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 1rem;
            text-align: center;
        }
        
        .interlock-item {
            background: rgba(0,0,0,0.3);
            padding: 0.75rem;
            border-radius: 8px;
        }
        
        .interlock-cost {
            color: #dc3545;
            font-weight: 700;
        }
        
        .interlock-label {
            color: #888;
            font-size: 0.75rem;
        }
        
        .interlock-footer {
            color: #999;
            font-size: 0.8rem;
            margin-top: 1rem;
            text-align: center;
        }
        
        .angelift-cta-box {
            text-align: center;
            margin-top: 2.5rem;
            padding: 2rem;
            background: linear-gradient(135deg, rgba(212,175,55,0.15) 0%, rgba(0,0,0,0.5) 100%);
            border: 2px solid var(--gold);
            border-radius: 16px;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .angelift-cta-box h3 {
            color: var(--gold);
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
        }
        
        .angelift-cta-box p {
            color: #ccc;
            font-size: 1.1rem;
            margin: 0;
        }
        
        .success-text {
            color: var(--success);
        }
        
        /* Light Mode - Use Cases Section */
        [data-theme="light"] .use-cases-section {
            background: var(--bg-primary) !important;
        }
        
        [data-theme="light"] .use-case-card {
            background: var(--bg-card) !important;
            border-color: var(--border-color) !important;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        [data-theme="light"] .use-case-card h4 {
            color: var(--dark-gold) !important;
        }
        
        [data-theme="light"] .use-case-card p {
            color: var(--text-secondary) !important;
        }
        
        /* Light Mode - Cost Savings Section */
        [data-theme="light"] .cost-savings-section {
            background: var(--bg-secondary) !important;
        }
        
        [data-theme="light"] .cost-card {
            background: rgba(220, 53, 69, 0.08) !important;
            border-color: rgba(220, 53, 69, 0.25) !important;
        }
        
        [data-theme="light"] .cost-card p {
            color: var(--text-secondary) !important;
        }
        
        [data-theme="light"] .interlock-details {
            background: rgba(220, 53, 69, 0.05) !important;
            border-color: rgba(220, 53, 69, 0.2) !important;
        }
        
        [data-theme="light"] .interlock-intro,
        [data-theme="light"] .interlock-footer {
            color: var(--text-secondary) !important;
        }
        
        [data-theme="light"] .interlock-item {
            background: rgba(0, 0, 0, 0.05) !important;
        }
        
        [data-theme="light"] .interlock-label {
            color: var(--text-muted) !important;
        }
        
        [data-theme="light"] .angelift-cta-box {
            background: linear-gradient(135deg, rgba(212,175,55,0.15) 0%, rgba(250,248,245,0.9) 100%) !important;
        }
        
        [data-theme="light"] .angelift-cta-box p {
            color: var(--text-secondary) !important;
        }
        
        /* Community Section - Default (Dark Mode) */
        .community-section {
            background: linear-gradient(180deg, #0a0a0a 0%, #111 100%);
        }
        
        .community-card {
            border-radius: 16px;
            padding: 2rem;
            text-align: center;
        }
        
        .community-card-gold {
            background: linear-gradient(135deg, rgba(212,175,55,0.1) 0%, rgba(0,0,0,0.3) 100%);
            border: 2px solid var(--gold);
        }
        
        .community-card-gold h3 {
            color: var(--gold);
            margin-bottom: 1rem;
        }
        
        .community-card-green {
            background: linear-gradient(135deg, rgba(37,211,102,0.1) 0%, rgba(0,0,0,0.3) 100%);
            border: 2px solid var(--success);
        }
        
        .community-card-green h3 {
            color: var(--success);
            margin-bottom: 1rem;
        }
        
        .community-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
        }
        
        .community-card p {
            color: #ccc;
            line-height: 1.7;
        }
        
        .community-quote {
            text-align: center;
            margin-top: 2.5rem;
            padding: 2rem;
            background: rgba(255,255,255,0.02);
            border-radius: 16px;
        }
        
        .community-quote p {
            color: #ccc;
            font-size: 1.1rem;
            line-height: 1.8;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .gold-text {
            color: var(--gold);
        }
        
        .pink-text {
            color: #ec4899;
        }
        
        .female-safety-box {
            margin-top: 2.5rem;
            padding: 2rem;
            background: linear-gradient(135deg, rgba(236, 72, 153, 0.1) 0%, rgba(0,0,0,0.3) 100%);
            border: 2px solid rgba(236, 72, 153, 0.5);
            border-radius: 16px;
        }
        
        .female-safety-box h3 {
            color: #ec4899;
            text-align: center;
            margin-bottom: 1rem;
        }
        
        .female-safety-box p {
            color: #ccc;
            text-align: center;
            font-size: 1rem;
            line-height: 1.8;
            max-width: 800px;
            margin: 0 auto;
        }
        
        /* Light Mode - Community Section */
        [data-theme="light"] .community-section {
            background: var(--bg-primary) !important;
        }
        
        [data-theme="light"] .community-card-gold {
            background: linear-gradient(135deg, rgba(212,175,55,0.08) 0%, var(--bg-card) 100%) !important;
        }
        
        [data-theme="light"] .community-card-green {
            background: linear-gradient(135deg, rgba(37,211,102,0.08) 0%, var(--bg-card) 100%) !important;
        }
        
        [data-theme="light"] .community-card p {
            color: var(--text-secondary) !important;
        }
        
        [data-theme="light"] .community-quote {
            background: var(--bg-card) !important;
        }
        
        [data-theme="light"] .community-quote p {
            color: var(--text-secondary) !important;
        }
        
        [data-theme="light"] .female-safety-box {
            background: linear-gradient(135deg, rgba(236, 72, 153, 0.08) 0%, var(--bg-card) 100%) !important;
        }
        
        [data-theme="light"] .female-safety-box p {
            color: var(--text-secondary) !important;
        }
        
        /* Fare Estimate Form - Default (Dark Mode) */
        .fare-estimate-section {
            background: transparent;
        }
        
        .fare-form-container {
            max-width: 100%;
            margin: 0 auto;
            padding: 2.5rem;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 16px;
            border: 2px solid var(--border-color);
        }
        
        .fare-form-title {
            text-align: center;
            margin-bottom: 0.5rem;
            color: var(--gold);
            font-size: 1.75rem;
        }
        
        .fare-form-approved {
            text-align: center;
            color: #25D366;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        
        .fare-form-promo {
            text-align: center;
            color: var(--gold);
            margin-bottom: 1.5rem;
            font-size: 1rem;
        }
        
        .fare-input-group {
            margin-bottom: 1rem;
        }
        
        .fare-input-label {
            color: var(--text-primary);
            margin-bottom: 0.5rem;
            display: block;
            font-weight: 500;
        }
        
        .fare-input-row {
            display: flex;
            gap: 0.5rem;
        }
        
        .fare-input {
            flex: 1;
            padding: 0.875rem 1rem;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 1rem;
            width: 100%;
        }
        
        .fare-input::placeholder {
            color: var(--text-muted);
        }
        
        .fare-input-full {
            width: 100%;
        }
        
        .fare-location-btn {
            background: var(--gold);
            color: var(--black);
            border: none;
            padding: 0 1rem;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            font-size: 1.1rem;
            min-width: 50px;
        }
        
        .fare-location-btn:hover {
            opacity: 0.9;
        }
        
        .fare-calculate-btn {
            width: 100%;
            padding: 1rem;
            background: linear-gradient(135deg, var(--gold), var(--dark-gold));
            color: var(--black);
            border: none;
            border-radius: 8px;
            font-size: 1.1rem;
            font-weight: 700;
            cursor: pointer;
            margin-top: 0.5rem;
        }
        
        .fare-calculate-btn:hover {
            opacity: 0.95;
            transform: translateY(-1px);
        }
        
        .fare-result-box {
            background: rgba(0,0,0,0.3);
            border: 2px solid var(--gold);
            border-radius: 12px;
            padding: 1.5rem;
            margin-top: 1.5rem;
        }
        
        .fare-result-title {
            color: var(--gold);
            text-align: center;
            margin-bottom: 1rem;
        }
        
        .fare-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
            color: var(--text-secondary);
        }
        
        .fare-total-section {
            border-top: 1px solid var(--border-color);
            margin: 1rem 0;
            padding-top: 1rem;
        }
        
        .fare-subtotal {
            color: var(--text-muted);
            text-decoration: line-through;
            margin-bottom: 0.25rem;
        }
        
        .fare-discount {
            color: #25D366;
        }
        
        .fare-final {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--text-primary);
        }
        
        .fare-final span:last-child {
            color: var(--gold);
        }
        
        .fare-disclaimer {
            text-align: center;
            color: var(--text-muted);
            font-size: 0.85rem;
            margin: 1rem 0;
        }
        
        .fare-book-btn {
            width: 100%;
            padding: 1rem;
            background: var(--gold);
            color: var(--black);
            border: none;
            border-radius: 8px;
            font-size: 1.1rem;
            font-weight: 700;
            cursor: pointer;
            margin-top: 0.5rem;
        }
        
        .fare-book-btn:hover {
            opacity: 0.95;
        }
        
        .fare-links {
            text-align: center;
            color: var(--text-muted);
            font-size: 0.85rem;
            margin-top: 1rem;
        }
        
        .fare-links a {
            color: var(--gold);
            text-decoration: none;
        }
        
        .fare-links a:hover {
            text-decoration: underline;
        }
        
        /* Light Mode - Fare Estimate Form */
        [data-theme="light"] .fare-estimate-section {
            background: var(--bg-primary) !important;
        }
        
        [data-theme="light"] .fare-form-container {
            background: var(--bg-card) !important;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        }
        
        [data-theme="light"] .fare-input {
            background: var(--bg-secondary) !important;
            color: var(--text-primary) !important;
            border-color: var(--border-color) !important;
        }
        
        [data-theme="light"] .fare-input::placeholder {
            color: var(--text-muted) !important;
        }
        
        [data-theme="light"] .fare-result-box {
            background: var(--bg-secondary) !important;
        }
        
        [data-theme="light"] .fare-row {
            color: var(--text-secondary) !important;
        }
        
        [data-theme="light"] .fare-final {
            color: var(--text-primary) !important;
        }
        
        /* Mobile optimization for fare form */
        @media (max-width: 600px) {
            .fare-form-container {
                padding: 1.25rem;
                margin: 0 0.5rem;
            }
            
            .fare-form-title {
                font-size: 1.5rem;
            }
            
            .fare-input {
                padding: 0.75rem;
                font-size: 16px; /* Prevents iOS zoom */
            }
            
            .fare-calculate-btn,
            .fare-book-btn {
                padding: 0.875rem;
                font-size: 1rem;
            }
            
            .fare-result-box {
                padding: 1rem;
            }
        }
        
        /* Google Places Autocomplete Dropdown Styling */
        .pac-container {
            background-color: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            font-family: inherit;
            z-index: 10000;
        }
        
        .pac-item {
            padding: 0.75rem 1rem;
            color: var(--text-primary);
            cursor: pointer;
            border-top: 1px solid var(--border-color);
        }
        
        .pac-item:first-child {
            border-top: none;
        }
        
        .pac-item:hover,
        .pac-item-selected {
            background-color: rgba(212, 175, 55, 0.1);
        }
        
        .pac-item-query {
            color: var(--text-primary);
            font-weight: 500;
        }
        
        .pac-matched {
            color: var(--gold);
            font-weight: 600;
        }
        
        .pac-icon {
            display: none;
        }
        
        [data-theme="light"] .pac-container {
            background-color: #fff;
            border-color: #ddd;
        }
        
        [data-theme="light"] .pac-item {
            color: #333;
            border-color: #eee;
        }
        
        [data-theme="light"] .pac-item:hover,
        [data-theme="light"] .pac-item-selected {
            background-color: rgba(212, 175, 55, 0.08);
        }
        
        [data-theme="light"] .pac-item-query {
            color: #333;
        }
        
        [data-theme="light"] .footer-section {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }
        
        [data-theme="light"] .footer-section p,
        [data-theme="light"] .footer-section a {
            color: var(--text-secondary);
        }
        
        [data-theme="light"] .footer-section a:hover {
            color: var(--gold);
        }
        
        [data-theme="light"] .mobile-nav {
            background: var(--bg-primary);
        }
        
        [data-theme="light"] input,
        [data-theme="light"] textarea,
        [data-theme="light"] select {
            background: var(--bg-card);
            color: var(--text-primary);
            border-color: var(--border-color);
        }
        
        [data-theme="light"] .modal-content {
            background: var(--bg-card);
            color: var(--text-primary);
        }
        
        /* Light Mode - Statistics Section */
        [data-theme="light"] .stat-card {
            background: var(--bg-card);
            border-color: var(--border-color);
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        }
        
        [data-theme="light"] .stat-label {
            color: var(--text-secondary);
        }
        
        [data-theme="light"] .stat-comparison {
            background: rgba(0,0,0,0.03);
        }
        
        [data-theme="light"] .comparison-value {
            color: var(--text-primary);
        }
        
        [data-theme="light"] .comparison-label {
            color: var(--text-secondary);
        }
        
        /* Light Mode - Chart Container */
        [data-theme="light"] .chart-container {
            background: var(--bg-card);
            border-color: var(--border-color);
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        [data-theme="light"] .chart-interaction-notice {
            background: rgba(212, 175, 55, 0.08);
            border-color: var(--border-color);
        }
        
        [data-theme="light"] .chart-interaction-notice p {
            color: var(--text-secondary);
        }
        
        [data-theme="light"] .graph-controls button {
            background: var(--gold);
            color: var(--black);
        }
        
        /* Light Mode - Form Fields */
        [data-theme="light"] .form-group input,
        [data-theme="light"] .form-group textarea,
        [data-theme="light"] .form-group select {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
            border-color: var(--border-color) !important;
        }
        
        [data-theme="light"] .form-group input::placeholder,
        [data-theme="light"] .form-group textarea::placeholder {
            color: var(--text-muted) !important;
        }
        
        [data-theme="light"] .form-container {
            background: transparent;
            box-shadow: none;
        }
        
        [data-theme="light"] .fare-form-container {
            background: var(--bg-card);
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        }
        
        /* Light Mode - Model Steps (How It Works) */
        [data-theme="light"] .model-graphic {
            background: var(--bg-card);
            border-color: var(--border-color);
            box-shadow: 0 2px 15px rgba(0,0,0,0.05);
        }
        
        [data-theme="light"] .model-step p {
            color: var(--text-secondary);
        }
        
        /* Light Mode - Footer */
        [data-theme="light"] footer {
            background: var(--bg-secondary);
            border-top-color: var(--border-color);
        }
        
        [data-theme="light"] footer p {
            color: var(--text-secondary);
        }
        
        [data-theme="light"] .footer-details p {
            color: var(--text-secondary);
        }
        
        /* Light Mode - Social Buttons in Footer */
        [data-theme="light"] .social-btn,
        [data-theme="light"] footer .social-btn {
            background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%) !important;
            border-color: var(--border-color) !important;
            color: var(--gold) !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
        }
        
        [data-theme="light"] .social-btn:hover {
            box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2) !important;
        }
        
        /* Light Mode - Driver Model Section */
        [data-theme="light"] .dual-driver-hero {
            background: var(--bg-secondary);
        }
        
        /* Light Mode - Expandable Sections */
        [data-theme="light"] .expandable-header {
            background: rgba(212, 175, 55, 0.08);
        }
        
        [data-theme="light"] .expandable-header:hover {
            background: rgba(212, 175, 55, 0.15);
        }
        
        [data-theme="light"] .expandable-inner {
            color: var(--text-secondary);
        }
        
        /* Light Mode - Commission Highlight */
        [data-theme="light"] .commission-highlight {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(250, 248, 245, 0.9) 100%);
        }
        
        /* Light Mode - Dashboard Cards */
        [data-theme="light"] .dashboard-stat-card {
            background: var(--bg-card);
            border-color: var(--border-color);
        }
        
        [data-theme="light"] .stat-label-large {
            color: var(--text-secondary);
        }
        
        /* Light Mode - Earnings Chart */
        [data-theme="light"] .earnings-chart {
            background: var(--bg-card);
            border-color: var(--border-color);
        }
        
        /* Light Mode - Map Container */
        [data-theme="light"] .map-container {
            border-color: var(--border-color);
        }
        
        /* Light Mode - Lives Saved Counter */
        [data-theme="light"] .lives-saved-counter {
            background: linear-gradient(135deg, rgba(37, 211, 102, 0.1) 0%, var(--bg-card) 100%);
        }
        
        /* Light Mode - Price Display */
        [data-theme="light"] .price-summary {
            background: var(--bg-card);
            border-color: var(--border-color);
        }
        
        /* Light Mode - Testimonials */
        [data-theme="light"] .testimonial-text {
            color: var(--text-primary);
        }
        
        [data-theme="light"] .author-info h4 {
            color: var(--text-primary);
        }
        
        [data-theme="light"] .author-info p {
            color: var(--text-secondary);
        }
        
        /* Light Mode - Chat Widget */
        [data-theme="light"] .chat-popup {
            background: var(--bg-card);
            box-shadow: 0 5px 25px rgba(0,0,0,0.15);
        }
        
        [data-theme="light"] .chat-messages {
            background: var(--bg-secondary);
        }
        
        /* Light Mode - Chat Widget Enhanced Styling for Readability */
        [data-theme="light"] .chat-widget {
            background: var(--bg-card);
            border: 2px solid var(--dark-gold);
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        }
        
        [data-theme="light"] .chat-header {
            background: var(--dark-gold);
            color: #fff;
        }
        
        [data-theme="light"] .chat-header button {
            color: #fff;
        }
        
        [data-theme="light"] .chat-messages {
            background: #F0EDE8;
        }
        
        [data-theme="light"] .chat-message.bot {
            background: rgba(184, 134, 11, 0.15);
            border: 1px solid var(--dark-gold);
            color: #333;
        }
        
        [data-theme="light"] .chat-message.user {
            background: var(--dark-gold);
            color: #fff;
        }
        
        [data-theme="light"] .chat-input-area {
            background: var(--bg-card);
            border-top: 1px solid var(--border-color);
        }
        
        [data-theme="light"] .chat-input-area input {
            background: #fff !important;
            border: 1px solid var(--border-color) !important;
            color: #333 !important;
        }
        
        [data-theme="light"] .chat-input-area input::placeholder {
            color: #888 !important;
        }
        
        [data-theme="light"] .chat-input-area button {
            background: var(--dark-gold);
            color: #fff;
        }
        
        [data-theme="light"] .chat-quick-actions {
            background: var(--bg-card);
            border-top: 1px solid var(--border-color);
        }
        
        [data-theme="light"] .chat-quick-btn {
            background: rgba(184, 134, 11, 0.1);
            border: 1px solid var(--dark-gold);
            color: var(--dark-gold);
        }
        
        [data-theme="light"] .chat-quick-btn:hover {
            background: var(--dark-gold);
            color: #fff;
        }
        
        /* Light Mode - Modals */
        [data-theme="light"] .driver-modal-content,
        [data-theme="light"] .rider-modal-content {
            background: var(--bg-card);
            color: var(--text-primary);
        }
        
        /* Light Mode - Alert Boxes */
        [data-theme="light"] .alert-banner {
            background: var(--bg-card);
        }
        
        /* Light Mode - Inline styled elements override */
        [data-theme="light"] select,
        [data-theme="light"] textarea,
        [data-theme="light"] input[type="text"],
        [data-theme="light"] input[type="email"],
        [data-theme="light"] input[type="tel"],
        [data-theme="light"] input[type="password"],
        [data-theme="light"] input[type="datetime-local"] {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
            border-color: var(--border-color) !important;
        }
        
        /* Light Mode - Section backgrounds */
        [data-theme="light"] #japan-stats,
        [data-theme="light"] #safety,
        [data-theme="light"] #founder {
            background: var(--bg-secondary) !important;
        }
        
        [data-theme="light"] #founder {
            border-color: var(--border-color) !important;
        }
        
        /* Light Mode - Messages and Chat areas */
        [data-theme="light"] #messagesList {
            background: var(--bg-secondary) !important;
        }
        
        /* Light Mode - Rating textarea */
        [data-theme="light"] #commentDriverA,
        [data-theme="light"] #commentDriverB {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
            border-color: var(--border-color) !important;
        }
        
        /* Light Mode - Incident form elements */
        [data-theme="light"] #incidentType,
        [data-theme="light"] #incidentDescription {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
            border-color: var(--border-color) !important;
        }
        
        /* Light Mode - Urgency buttons */
        [data-theme="light"] .urgency-btn {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
            border-color: var(--border-color) !important;
        }
        
        [data-theme="light"] .urgency-btn.active {
            background: var(--gold) !important;
            color: var(--black) !important;
        }
        
        /* Light Mode - Data source text */
        [data-theme="light"] .data-source,
        [data-theme="light"] .data-citation {
            color: var(--text-muted);
        }
        
        /* Light Mode - Premium service info */
        [data-theme="light"] .premium-service-info {
            background: rgba(212, 175, 55, 0.08);
            border-color: var(--border-color);
        }
        
        /* Light Mode - Soft launch notice */
        [data-theme="light"] .soft-launch-notice p,
        [data-theme="light"] .premium-service-info p,
        [data-theme="light"] .premium-service-info li {
            color: var(--text-secondary);
        }
        
        /* Light Mode - FAQ cards in stats sections */
        [data-theme="light"] .stats-container .stat-card[style*="background: rgba(26"] {
            background: var(--bg-card) !important;
        }
        
        /* Light Mode - Patent badge */
        [data-theme="light"] .patent-badge {
            background: rgba(212, 175, 55, 0.15);
        }
        
        /* Light Mode - CTA buttons remain same */
        
        /* Light Mode - Paragraph text in special sections */
        [data-theme="light"] .model-graphic p,
        [data-theme="light"] .model-step p,
        [data-theme="light"] .driver-model p {
            color: var(--text-secondary) !important;
        }
        
        /* Light Mode - Inline paragraphs with #ccc color */
        [data-theme="light"] p[style*="color: #ccc"],
        [data-theme="light"] p[style*="color:#ccc"],
        [data-theme="light"] div[style*="color: #ccc"],
        [data-theme="light"] span[style*="color: #ccc"] {
            color: var(--text-secondary) !important;
        }
        
        /* Light Mode - Footer text override for inline styles */
        [data-theme="light"] footer p[style*="color: #ccc"] {
            color: var(--text-secondary) !important;
        }
        
        /* Light Mode - Testimonials Section */
        [data-theme="light"] .testimonials-section {
            background: var(--bg-secondary) !important;
        }
        
        /* Light Mode - Services Section */
        [data-theme="light"] .services-section {
            background: var(--bg-secondary) !important;
        }
        
        [data-theme="light"] .service-card {
            background: var(--bg-card) !important;
            border-color: var(--border-color) !important;
            box-shadow: 0 2px 15px rgba(0,0,0,0.05);
        }
        
        [data-theme="light"] .service-card p,
        [data-theme="light"] .service-card li,
        [data-theme="light"] .service-card .service-note,
        [data-theme="light"] .service-features li {
            color: #222 !important;
        }
        
        /* Light Mode - Hero crisis stats box */
        [data-theme="light"] .hero > .container > div[style*="border: 2px solid #dc3545"] {
            background: linear-gradient(135deg, rgba(220, 53, 69, 0.08) 0%, rgba(250, 248, 245, 0.95) 100%) !important;
        }
        
        /* Light Mode - Override inline #ccc color for text in hero sections */
        [data-theme="light"] .hero div[style*="color: #ccc"] {
            color: var(--text-secondary) !important;
        }
        
        /* Light Mode - Override inline #fff color for text */
        [data-theme="light"] p[style*="color: #fff"],
        [data-theme="light"] p[style*="color:#fff"] {
            color: var(--text-primary) !important;
        }
        
        /* Light Mode - Soft launch notice styling */
        [data-theme="light"] .soft-launch-notice h3 {
            color: var(--danger) !important;
        }
        
        /* Light Mode - Mission section (stats section) boxes */
        [data-theme="light"] #stats > .container > div[style*="border: 2px solid var(--gold)"] {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(250, 248, 245, 0.95) 100%) !important;
        }
        
        [data-theme="light"] #stats div[style*="background: rgba(0,0,0,0.3)"] {
            background: rgba(212, 175, 55, 0.08) !important;
        }
        
        /* Light Mode - Impact statement */
        [data-theme="light"] .impact-statement {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(250, 248, 245, 0.95) 100%) !important;
        }
        
        /* Light Mode - Japan stats section */
        [data-theme="light"] #japan-stats {
            background: var(--bg-secondary) !important;
        }
        
        [data-theme="light"] #japan-stats div[style*="background: rgba(0,0,0,0.3)"],
        [data-theme="light"] #japan-stats div[style*="background: linear-gradient"] {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(250, 248, 245, 0.95) 100%) !important;
        }
        
        /* Light Mode - FAQ section cards */
        [data-theme="light"] #faq .stat-card {
            background: var(--bg-card) !important;
        }
        
        [data-theme="light"] #faq .stat-card p {
            color: var(--text-secondary) !important;
        }
        
        /* Light Mode - Hero section crisis stats box */
        [data-theme="light"] .hero div[style*="border: 2px solid #dc3545"] {
            background: linear-gradient(135deg, rgba(220, 53, 69, 0.08) 0%, rgba(250, 248, 245, 0.95) 100%) !important;
        }
        
        /* Light Mode - All inline color:#ccc divs in hero */
        [data-theme="light"] .hero div[style*="color: #ccc"],
        [data-theme="light"] .hero div[style*="color:#ccc"] {
            color: var(--text-secondary) !important;
        }
        
        /* Light Mode - Mission section text */
        [data-theme="light"] #stats p[style*="color: #ccc"],
        [data-theme="light"] #stats div[style*="color: #ccc"] {
            color: var(--text-secondary) !important;
        }
        
        /* Light Mode - Hero intro paragraph */
        [data-theme="light"] .hero p[style*="color: #ccc"] {
            color: var(--text-secondary) !important;
        }
        
        /* Light Mode - Soft launch notice */
        [data-theme="light"] .soft-launch-notice {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(250, 248, 245, 0.95) 100%) !important;
            border-color: var(--gold) !important;
        }
        
        [data-theme="light"] .soft-launch-notice p {
            color: var(--text-secondary) !important;
        }
        
        /* Light Mode - Safety section with inline gradient */
        [data-theme="light"] #safety {
            background: var(--bg-secondary) !important;
        }
        
        /* Light Mode - All inline paragraphs with #ccc in any section */
        [data-theme="light"] p[style*="color: #ccc"],
        [data-theme="light"] p[style*="color:#ccc"] {
            color: var(--text-secondary) !important;
        }
        
        /* Light Mode - Expandable inner content paragraphs */
        [data-theme="light"] .expandable-inner p {
            color: var(--text-secondary) !important;
        }
        
        /* Light Mode - Safety card text */
        [data-theme="light"] .safety-card p {
            color: var(--text-secondary) !important;
        }
        
        /* Light Mode - Safety card heading */
        [data-theme="light"] .safety-card h3 {
            color: var(--text-primary) !important;
        }
        
        /* Light Mode - Safety card background */
        [data-theme="light"] .safety-card {
            background: var(--bg-card) !important;
        }
        
        /* Theme Toggle Button */
        .theme-toggle {
            position: fixed;
            bottom: 20px;
            left: 20px;
            z-index: 9999;
            background: linear-gradient(135deg, var(--gold) 0%, var(--dark-gold) 100%);
            border: none;
            border-radius: 50px;
            padding: 12px 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            font-size: 14px;
            color: var(--black);
            box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
            transition: all 0.3s ease;
        }
        
        .theme-toggle:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
        }
        
        .theme-toggle .toggle-icon {
            font-size: 18px;
            transition: transform 0.3s ease;
        }
        
        .theme-toggle:active .toggle-icon {
            transform: rotate(180deg);
        }
        
        .theme-toggle-text {
            display: none;
        }
        
        @media (min-width: 768px) {
            .theme-toggle-text {
                display: inline;
            }
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        }
        
        /* Modern Typography */
        h1, h2, h3, .section-title {
            font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
            font-weight: 700;
            letter-spacing: -0.02em;
        }
        
        h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.1; }
        h2, .section-title { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.2; }
        h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); line-height: 1.3; }
        
        p, span, li {
            font-weight: 400;
            line-height: 1.7;
        }
        
        /* Expandable Sections */
        .expandable-section {
            background: rgba(0, 0, 0, 0.3);
            border: 2px solid var(--border-color);
            border-radius: 16px;
            margin: 0;
            overflow: hidden;
        }
        
        .expandable-section + .expandable-section {
            margin-top: 8px;
        }
        
        .expandable-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 2rem;
            cursor: pointer;
            background: transparent;
            transition: background 0.3s;
        }
        
        .expandable-header:hover {
            background: rgba(212, 175, 55, 0.1);
        }
        
        .expandable-header h3 {
            color: var(--gold);
            font-size: 1.1rem;
            margin: 0;
        }
        
        .expandable-icon {
            color: var(--gold);
            font-size: 1.5rem;
            transition: transform 0.3s;
        }
        
        .expandable-section.open .expandable-icon {
            transform: rotate(180deg);
        }
        
        .expandable-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-out;
        }
        
        .expandable-section.open .expandable-content {
            max-height: 2000px;
        }
        
        .expandable-inner {
            padding: 0 2rem 2rem 2rem;
        }
        
        /* High Impact CTA Styles */
        .impact-cta {
            background: linear-gradient(135deg, var(--gold) 0%, var(--dark-gold) 100%);
            color: var(--black);
            padding: 1.2rem 2.5rem;
            font-size: 1.2rem;
            font-weight: 700;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            display: inline-block;
            text-align: center;
            position: relative;
            overflow: hidden;
            isolation: isolate;
        }
        
        /* Animated Book Now Button */
        .book-now-animated {
            animation: subtlePulse 2s ease-in-out infinite;
            box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
        }
        
        @keyframes subtlePulse {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
            }
            50% {
                transform: scale(1.02);
                box-shadow: 0 6px 30px rgba(212, 175, 55, 0.6);
            }
        }
        
        .book-now-animated:hover {
            animation: none;
            transform: scale(1.05) translateY(-3px);
            box-shadow: 0 8px 35px rgba(212, 175, 55, 0.7);
        }

        .cta-gleam {
            position: relative;
            overflow: hidden;
            isolation: isolate;
        }

        .cta-gleam::after {
            content: '';
            position: absolute;
            top: -35%;
            bottom: -35%;
            left: -55%;
            width: 32%;
            background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.12) 18%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.08) 78%, rgba(255,255,255,0) 100%);
            transform: skewX(-24deg) translateX(0);
            animation: ctaGleamSweep 3.8s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes ctaGleamSweep {
            0%, 68%, 100% {
                transform: skewX(-24deg) translateX(0);
                opacity: 0;
            }
            12% {
                opacity: 0.95;
            }
            34% {
                transform: skewX(-24deg) translateX(540%);
                opacity: 0;
            }
        }
        
        .impact-cta:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4);
        }
        
        /* Pulsing Book Now Nav Button - Gold glowing text only */
        .nav-book-now-pulse {
            animation: navTextPulseGlow 1.5s ease-in-out infinite;
            background: transparent !important;
            color: var(--gold) !important;
            font-weight: 700 !important;
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.8), 0 0 20px rgba(212, 175, 55, 0.5);
        }
        
        @keyframes navTextPulseGlow {
            0%, 100% {
                text-shadow: 0 0 5px rgba(212, 175, 55, 0.5), 0 0 10px rgba(212, 175, 55, 0.3);
                color: var(--gold);
            }
            50% {
                text-shadow: 0 0 15px rgba(212, 175, 55, 1), 0 0 25px rgba(212, 175, 55, 0.8), 0 0 35px rgba(212, 175, 55, 0.5);
                color: #FFD700;
            }
        }
        
        .lives-saved-counter {
            background: linear-gradient(135deg, rgba(37, 211, 102, 0.2) 0%, rgba(0,0,0,0.3) 100%);
            border: 2px solid #25D366;
            border-radius: 15px;
            padding: 2rem;
            text-align: center;
            margin: 2rem 0;
        }
        
        .lives-counter-number {
            font-size: 4rem;
            font-weight: 700;
            color: #25D366;
        }
        
        html {
            overflow-x: hidden;
            scroll-behavior: smooth;
        }
        
        body {
            background-color: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.6;
            padding-top: 80px;
            overflow-x: hidden;
            max-width: 100vw;
            position: relative;
        }
        
        /* Persistent background watermark - Dark mode */
        body::before {
            content: '';
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100vw;
            height: 100vh;
            background: url('/angelift-logo-final.png') center center no-repeat;
            background-size: 400px;
            opacity: 0.06;
            pointer-events: none;
            z-index: 0;
        }
        
        /* Light mode background - slightly more visible */
        [data-theme="light"] body::before {
            opacity: 0.05;
            filter: brightness(0.6) contrast(1.2);
        }
        
        /* Ensure all content is above the watermark */
        main, header, footer, section, .container {
            position: relative;
            z-index: 1;
        }
        
        /* Remove individual section backgrounds for seamless flow */
        section {
            background: transparent !important;
        }
        
        /* Only keep specific accent backgrounds */
        .stats-section,
        .dual-driver-hero {
            background: transparent !important;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* PWA Install Prompt */
        .pwa-install-prompt {
            display: none;
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--dark-gray);
            border: 2px solid var(--gold);
            border-radius: 16px;
            padding: 1.5rem;
            z-index: 10000;
            max-width: 340px;
            width: calc(100% - 40px);
            text-align: center;
            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
        }
        
        .pwa-install-prompt h4 {
            color: var(--gold);
            margin-bottom: 0.5rem;
            font-size: 1.2rem;
        }
        
        .pwa-install-prompt > p {
            color: #ccc;
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }
        
        .pwa-app-options {
            display: flex;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }
        
        .pwa-app-btn {
            flex: 1;
            background: rgba(0,0,0,0.3);
            border: 2px solid var(--border-color);
            border-radius: 12px;
            padding: 1rem 0.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.3rem;
        }
        
        .pwa-app-btn:hover {
            border-color: var(--gold);
            background: rgba(212, 175, 55, 0.1);
            transform: translateY(-2px);
        }
        
        .pwa-app-btn.rider:hover {
            border-color: #25D366;
        }
        
        .pwa-app-btn.driver:hover {
            border-color: var(--gold);
        }
        
        .pwa-app-icon {
            font-size: 1.8rem;
        }
        
        .pwa-app-label {
            color: #fff;
            font-weight: 700;
            font-size: 0.95rem;
        }
        
        .pwa-app-desc {
            color: #999;
            font-size: 0.75rem;
        }
        
        .pwa-dismiss-btn {
            background: transparent;
            color: #999;
            border: none;
            padding: 8px 16px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: color 0.3s;
        }
        
        .pwa-dismiss-btn:hover {
            color: #fff;
        }
        
        /* Light mode PWA prompt */
        [data-theme="light"] .pwa-install-prompt {
            background: var(--bg-card);
            box-shadow: 0 10px 40px rgba(0,0,0,0.15);
        }
        
        [data-theme="light"] .pwa-install-prompt > p {
            color: var(--text-secondary);
        }
        
        [data-theme="light"] .pwa-app-btn {
            background: var(--bg-secondary);
        }
        
        [data-theme="light"] .pwa-app-label {
            color: var(--text-primary);
        }
        
        [data-theme="light"] .pwa-dismiss-btn {
            color: var(--text-muted);
        }
        
        /* Top Install App Banner - Compact single line */
        .top-install-banner {
            display: flex !important;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            background: rgba(26, 26, 26, 0.85);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 0.4rem 0.75rem;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 10001;
            border-bottom: 1px solid rgba(212, 175, 55, 0.2);
        }
        
        .top-install-banner .banner-icon {
            font-size: 0.9rem;
            line-height: 1;
        }
        
        .top-install-banner .banner-text {
            color: #fff;
            font-size: 0.75rem;
            font-weight: 500;
            white-space: nowrap;
        }
        
        .top-install-banner .banner-cta {
            background: linear-gradient(135deg, #D4AF37 0%, #B8960F 100%);
            color: #1a1a1a;
            font-weight: 700;
            text-decoration: none;
            font-size: 0.7rem;
            padding: 0.35rem 0.85rem;
            border-radius: 15px;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            line-height: 1;
            white-space: nowrap;
            border: none;
            cursor: pointer;
        }
        
        .top-install-banner .banner-cta:hover {
            transform: scale(1.02);
            box-shadow: 0 2px 12px rgba(212, 175, 55, 0.4);
        }
        
        .top-install-banner .banner-close {
            background: transparent;
            border: none;
            color: #fff;
            font-size: 1.1rem;
            cursor: pointer;
            padding: 0.25rem;
            line-height: 1;
            margin-left: 0.25rem;
            z-index: 10002;
            position: relative;
            opacity: 0.8;
        }
        
        .top-install-banner .banner-close:hover {
            opacity: 1;
        }
        
        .top-install-banner .banner-close:active {
            transform: scale(0.95);
        }
        
        /* Adjust body and header when banner is shown */
        body.has-install-banner header {
            top: 36px !important;
        }
        
        body.has-install-banner {
            padding-top: 36px;
        }
        
        body.has-install-banner .hero {
            padding-top: 110px;
        }
        
        @media (max-width: 480px) {
            .install-banner-text span {
                display: none;
            }
            .install-banner-btn span:first-child {
                display: none;
            }
        }
        
        /* Hide banner in standalone PWA mode */
        @media (display-mode: standalone) {
            .top-install-banner {
                display: none !important;
            }
            body.has-install-banner header {
                top: 0 !important;
            }
            body.has-install-banner {
                padding-top: 0;
            }
        }
        
        [data-theme="light"] .pwa-dismiss-btn:hover {
            color: var(--text-primary);
        }
        
        /* PWA Update Prompt */
        .pwa-update-prompt {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: linear-gradient(135deg, var(--gold) 0%, var(--dark-gold) 100%);
            color: var(--black);
            padding: 12px 20px;
            z-index: 10001;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }
        
        .pwa-update-prompt .update-content {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .pwa-update-prompt button {
            background: var(--black);
            color: var(--gold);
            border: none;
            padding: 8px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
        }
        
        .pwa-update-prompt button:hover {
            background: var(--dark-gray);
        }
        
        .pwa-update-prompt .update-dismiss {
            background: transparent;
            color: var(--black);
            text-decoration: underline;
        }
        
        /* Network Status Indicator */
        .network-status {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--danger);
            color: white;
            padding: 12px 24px;
            border-radius: 30px;
            z-index: 10000;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
            animation: slideUp 0.3s ease-out;
        }
        
        .network-status.online {
            background: var(--success);
            box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
        }
        
        @keyframes slideUp {
            from {
                transform: translateX(-50%) translateY(100px);
                opacity: 0;
            }
            to {
                transform: translateX(-50%) translateY(0);
                opacity: 1;
            }
        }
        
        /* Scroll Reveal Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(40px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-40px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(40px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes scaleIn {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        /* Reveal on scroll classes - GPU accelerated */
        .reveal, .reveal-left, .reveal-right {
            will-change: transform, opacity;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }
        
        .reveal {
            opacity: 0;
            transform: translateY(30px) translateZ(0);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        
        .reveal.visible {
            opacity: 1;
            transform: translateY(0) translateZ(0);
        }
        
        .reveal-left {
            opacity: 0;
            transform: translateX(-30px) translateZ(0);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        
        .reveal-left.visible {
            opacity: 1;
            transform: translateX(0) translateZ(0);
        }
        
        .reveal-right {
            opacity: 0;
            transform: translateX(30px) translateZ(0);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        
        .reveal-right.visible {
            opacity: 1;
            transform: translateX(0) translateZ(0);
        }
        
        /* Stagger delays for children */
        .reveal-stagger > *:nth-child(1) { transition-delay: 0.05s; }
        .reveal-stagger > *:nth-child(2) { transition-delay: 0.1s; }
        .reveal-stagger > *:nth-child(3) { transition-delay: 0.15s; }
        .reveal-stagger > *:nth-child(4) { transition-delay: 0.2s; }
        .reveal-stagger > *:nth-child(5) { transition-delay: 0.25s; }
        .reveal-stagger > *:nth-child(6) { transition-delay: 0.3s; }
        
        /* Reduced motion for mobile and accessibility */
        @media (max-width: 768px), (prefers-reduced-motion: reduce) {
            .reveal, .reveal-left, .reveal-right {
                transform: none !important;
                transition: opacity 0.4s ease-out !important;
            }
            .reveal.visible, .reveal-left.visible, .reveal-right.visible {
                opacity: 1;
                transform: none !important;
            }
            .reveal-stagger > * {
                transition-delay: 0s !important;
            }
        }

        /* Banner removed - Theme toggle styles are in :root section */
        
        .banner-placeholder {
            display: none !important;
            height: 0 !important;
            width: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            visibility: hidden !important;
            position: absolute !important;
            pointer-events: none !important;
            opacity: 0 !important;
        }
        
        /* Banner styles removed */
        
        /* Home Button */
        .home-button {
            background: var(--gold);
            color: var(--black);
            border: none;
            padding: 8px 16px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
            white-space: nowrap;
        }
        
        .home-button:hover {
            background: var(--dark-gold);
            transform: translateY(-2px);
        }
        
        /* About/Mission Section */
        .about-section {
            background: linear-gradient(135deg, var(--dark-gray) 0%, var(--black) 100%);
            padding: 140px 0 80px;
            text-align: center;
            border-bottom: 2px solid var(--gold);
            margin-top: 0;
        }
        
        .about-section h1 {
            font-size: 2.8rem;
            margin-bottom: 1.5rem;
            color: var(--gold);
        }
        
        .about-section p {
            font-size: 1.3rem;
            margin-bottom: 2rem;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
            color: #ccc;
        }
        
        .impact-points {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }
        
        .impact-card {
            background: rgba(212, 175, 55, 0.1);
            padding: 2rem;
            border-radius: 10px;
            border: 1px solid var(--gold);
            text-align: center;
        }
        
        .impact-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }
        
        /* Header Styles - Clean Minimalist Design */
        header {
            background: linear-gradient(135deg, var(--black) 0%, var(--dark-gray) 100%);
            padding: 0.75rem 0;
            border-bottom: none;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            transform: translateY(-100%);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        /* Header gold line with fade effect */
        header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 5%;
            right: 5%;
            height: 2px;
            background: linear-gradient(90deg, transparent 0%, var(--gold) 15%, var(--gold) 85%, transparent 100%);
        }
        
        header.header-visible {
            transform: translateY(0);
        }
        
        /* Always show header */
        header {
            transform: translateY(0) !important;
        }
        
        /* Mobile Header Bar - Compact persistent header */
        .mobile-header-bar {
            display: none;
        }
        
        /* Desktop Logo Center - locked to viewport center */
        .desktop-logo-center {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 1rem;
        }
        
        .desktop-logo-center img {
            height: 88px;
            width: auto;
            display: block;
            margin: 0 auto;
        }
        
        /* Hero Logo - Large logo above "We Drive You" text on mobile */
        .hero-logo {
            display: none; /* Hidden on desktop */
        }
        
        @media (max-width: 768px) {
            /* Hero logo - visible on mobile above the heading */
            .hero-logo {
                display: block;
                text-align: center;
                margin-bottom: 0.1rem;
                opacity: 1;
                transform: translateY(0) scale(1);
                transition: opacity 0.35s ease, transform 0.35s ease;
            }
            
            .hero-logo img {
                height: 154px;
                max-width: min(80vw, 290px);
                width: auto;
                display: block;
                margin: 0 auto;
            }
            
            .hero-logo.is-hidden {
                opacity: 0;
                transform: translateY(-16px) scale(0.82);
            }
            
            /* Compact hero section on mobile to fit above the fold */
            .hero {
                padding: 5px 0 15px !important;
                min-height: auto !important;
            }
            
            .hero h1 {
                font-size: 1.7rem !important;
                margin-bottom: 0.5rem !important;
            }
            
            .hero-center {
                padding: 0 0.75rem;
            }
            
            .hero-bar-scene-container {
                margin-bottom: 0.5rem !important;
                max-height: 180px;
                overflow: hidden;
            }
            
            .hero-bar-scene-container img {
                object-fit: cover;
                object-position: center;
            }
            
            .hero p {
                font-size: 0.9rem !important;
                margin-bottom: 0.5rem !important;
                line-height: 1.3 !important;
            }
            
            .hero .btn-primary {
                padding: 0.65rem 1.75rem !important;
                font-size: 0.95rem !important;
            }
            
            /* Show mobile header bar - compact */
            .mobile-header-bar {
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                min-height: 62px;
                padding: 0.15rem 0.75rem;
                background: transparent;
                border-bottom: none;
            }
            
            /* Mobile logo starts invisible, fades in when scrolled */
            .mobile-logo {
                display: flex;
                align-items: center;
                opacity: 0;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%) scale(0.82);
                transform-origin: center center;
                transition: opacity 0.35s ease, transform 0.35s ease;
                pointer-events: none;
            }
            
            .mobile-logo.is-visible {
                opacity: 1;
                pointer-events: auto;
                transform: translate(-50%, -50%) scale(1);
            }
            
            .mobile-logo img {
                height: 60px;
                max-width: min(50vw, 210px);
                width: auto;
                display: block;
            }
            
            #mobileMenuBtn {
                display: flex !important;
                align-items: center;
                justify-content: center;
                position: absolute;
                right: 0.75rem;
                top: 50%;
                transform: translateY(-50%);
                padding: 0.15rem 0.35rem;
                font-size: 1.2rem;
                color: var(--gold);
                background: none;
                border: none;
                cursor: pointer;
                z-index: 2;
            }
            
            /* Hide desktop logo on mobile */
            .desktop-logo-center {
                display: none !important;
            }
            
            /* Hide old logo container on mobile */
            .logo-container {
                display: none !important;
            }
            
            /* Clean mobile menu */
            .nav-links {
                padding: 1rem 0 !important;
                text-align: center;
            }
            
            .nav-links a {
                padding: 0.75rem 1.5rem !important;
                font-size: 1rem !important;
                display: block;
                text-align: center;
            }
            
            /* Primary CTAs - More pronounced */
            .nav-links .nav-cta-primary {
                background: var(--gold) !important;
                color: var(--black) !important;
                font-weight: 700 !important;
                padding: 0.9rem 2rem !important;
                margin: 0.5rem 1.5rem !important;
                border-radius: 8px !important;
                display: block !important;
            }
            
            .nav-links .nav-install {
                border: 2px solid var(--gold) !important;
                color: var(--gold) !important;
                font-weight: 600 !important;
                padding: 0.75rem 2rem !important;
                margin: 0.5rem 1.5rem !important;
                border-radius: 8px !important;
                display: block !important;
                background: transparent !important;
            }
            
            /* Gold dividers */
            .nav-divider {
                height: 1px !important;
                width: 60% !important;
                margin: 0.75rem auto !important;
                background: linear-gradient(90deg, transparent, var(--gold), transparent) !important;
                display: block !important;
            }
            
            .menu-close-btn {
                padding: 0.25rem 0.5rem !important;
                font-size: 1.4rem !important;
            }
        }
        
        @media (min-width: 769px) {
            /* Hide mobile header bar on desktop */
            .mobile-header-bar {
                display: none !important;
            }
            
            /* Hide old logo container */
            .logo-container {
                display: none !important;
            }
            
            /* Show desktop centered logo */
            .desktop-logo-center {
                display: flex !important;
                grid-column: 2;
                justify-self: center;
            }
        }
        
        /* Removed extra header line */
        
        nav {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            gap: 1rem;
        }
        
        .nav-section {
            display: flex;
            align-items: center;
            flex: 1;
        }
        
        .nav-left {
            justify-content: flex-start;
        }
        
        .nav-center {
            justify-content: center;
        }
        
        .nav-right {
            justify-content: flex-end;
        }
        
        /* Header Logo - Always visible */
        .logo-container {
            display: flex;
            align-items: center;
            opacity: 1;
            pointer-events: auto;
        }
        
        .logo-image {
            width: 120px;
            height: 50px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: default;
            overflow: hidden;
            pointer-events: none;
        }
        
        .logo-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        
        /* Desktop Nav Links - Centered and Symmetrical */
        .nav-links {
            display: flex;
            gap: 0;
            align-items: center;
            justify-content: center;
            flex-wrap: nowrap;
        }

        .nav-group {
            display: contents;
        }
        
        .nav-links a {
            color: var(--gold);
            text-decoration: none;
            transition: color 0.2s ease;
            font-weight: 500;
            font-size: 0.9rem;
            white-space: nowrap;
            padding: 0.5rem 0.875rem;
            position: relative;
        }
        
        .nav-links a:hover {
            color: var(--gold);
        }
        
        /* Primary CTAs in nav */
        .nav-links .nav-cta-primary {
            color: var(--gold);
            font-weight: 600;
        }
        
        .nav-links .nav-install {
            color: var(--gold);
        }
        
        /* Nav dividers - subtle vertical lines */
        .nav-links .nav-divider {
            width: 1px;
            height: 16px;
            background: rgba(212, 175, 55, 0.2);
            margin: 0 0.25rem;
        }
        
        /* Hide mobile menu header on desktop */
        .nav-menu-header {
            display: none !important;
        }
        
        /* Hide certain items on desktop to keep it clean */
        @media (min-width: 769px) {
            .nav-links {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
                align-items: center;
                justify-content: center;
                column-gap: clamp(1rem, 2vw, 2.5rem);
                row-gap: 0;
                width: min(100%, 1320px);
                margin: 0 auto;
                padding: 0 1.5rem;
            }

            .nav-group {
                display: flex;
                align-items: center;
                gap: clamp(0.15rem, 0.65vw, 0.85rem);
                min-width: 0;
            }

            .nav-group-left {
                justify-content: flex-end;
            }

            .nav-group-right {
                justify-content: flex-start;
            }

            .nav-links a {
                text-align: center;
                padding: 0.5rem clamp(0.35rem, 0.6vw, 0.72rem);
            }

            .nav-links .nav-divider {
                display: none !important;
            }

            .nav-links .nav-cta-primary,
            .nav-links .nav-install,
            .nav-links .nav-register,
            .nav-links .nav-login {
                color: var(--gold) !important;
                font-weight: 600;
            }

            .nav-links .nav-driver-signup {
                color: var(--text-primary) !important;
                font-weight: 600;
            }

            .nav-links .nav-driver-signup:hover,
            .nav-links .nav-driver-signup:active {
                color: var(--text-primary) !important;
            }

            .nav-links .menu-close-btn {
                display: none !important;
            }
        }
        
        /* Section Dividers - subtle gold gradient line */
        .section-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.4) 20%, rgba(212, 175, 55, 0.6) 50%, rgba(212, 175, 55, 0.4) 80%, transparent 100%);
            max-width: 600px;
            margin: 0 auto;
        }
        
        /* Main sections get divider after them */
        main > section:not(:last-child)::after {
            content: '';
            display: block;
            height: 1px;
            background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.3) 20%, rgba(212, 175, 55, 0.5) 50%, rgba(212, 175, 55, 0.3) 80%, transparent 100%);
            max-width: 500px;
            margin: 2rem auto 0;
        }
        
        /* Hero Section */
        .hero {
            background: transparent;
            padding: 20px 0 40px;
            text-align: center !important;
            min-height: calc(100vh - 80px); /* Full viewport height minus header */
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
        }
        
        .hero-center {
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 900px;
            padding: 0 1rem;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .hero-carousel {
            width: 100%;
            aspect-ratio: 1024 / 739;
        }

        .hero-carousel .hero-carousel-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 1px solid rgba(212, 175, 55, 0.6);
            background: rgba(255, 255, 255, 0.85);
            color: var(--gold);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0.7;
            transition: all 0.2s ease;
            z-index: 2;
        }
        
        .hero-carousel .hero-carousel-nav:hover {
            opacity: 1;
            background: rgba(255, 255, 255, 0.95);
            transform: translateY(-50%) scale(1.05);
        }
        
        .hero-carousel .hero-carousel-prev {
            left: 12px;
        }
        
        .hero-carousel .hero-carousel-next {
            right: 12px;
        }
        
        .hero-carousel .hero-carousel-nav svg {
            width: 20px;
            height: 20px;
        }
        
        .hero-carousel .hero-carousel-image {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            object-position: center;
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        .hero-carousel .hero-carousel-image.hero-opera-house {
            object-position: center 20%;
        }
        
        .hero-carousel img.is-fading {
            opacity: 0;
        }
        
        @media (max-width: 768px) {
            .hero-carousel .hero-carousel-nav {
                width: 26px;
                height: 26px;
                background: transparent;
                border: none;
                box-shadow: none;
                opacity: 0.9;
                border-radius: 0;
            }
            .hero-carousel .hero-carousel-prev {
                left: 8px;
            }
            .hero-carousel .hero-carousel-next {
                right: 8px;
            }
            .hero-carousel .hero-carousel-nav svg {
                width: 18px;
                height: 18px;
            }
        }

        /* Desktop: reduce hero image size by ~30% */
        @media (min-width: 769px) {
            header {
                padding: 0.1rem 0 0 !important;
            }

            .hero-carousel {
                max-width: 560px !important;
            }

            .hero {
                padding-top: 72px !important;
            }
        }
        
        /* Disable scroll snap on desktop */
        @media (min-width: 769px) {
            body {
                scroll-snap-type: none !important;
            }
            .hero, #substitute-driver {
                scroll-snap-align: none !important;
                min-height: auto !important;
            }
            #substitute-driver {
                display: block !important;
            }
        }
        
        /* Unified Social Pill */
        .social-unified-pill {
            display: inline-flex;
            align-items: center;
            gap: 0;
            background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
            border: 2px solid rgba(212, 175, 55, 0.4);
            border-radius: 50px;
            padding: 0.5rem 0.75rem;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        }
        
        .social-unified-pill a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            color: var(--gold);
            text-decoration: none;
            transition: all 0.3s ease;
            border-radius: 50%;
            position: relative;
        }
        
        .social-unified-pill a:hover {
            background: rgba(212, 175, 55, 0.15);
            transform: scale(1.1);
        }
        
        .social-unified-pill a:not(:last-child)::after {
            content: '';
            position: absolute;
            right: -1px;
            top: 50%;
            transform: translateY(-50%);
            height: 20px;
            width: 1px;
            background: rgba(212, 175, 55, 0.3);
        }
        
        .social-unified-pill svg {
            width: 22px;
            height: 22px;
            filter: drop-shadow(0 2px 4px rgba(212, 175, 55, 0.2));
        }
        
        /* Light mode social pill */
        [data-theme="light"] .social-unified-pill {
            background: linear-gradient(135deg, #fff 0%, #fafafa 100%);
            box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 0 0 1px rgba(212, 175, 55, 0.2);
        }
        
        @media (max-width: 768px) {
            .social-unified-pill {
                padding: 0.4rem 0.5rem;
            }
            .social-unified-pill a {
                width: 40px;
                height: 40px;
            }
            .social-unified-pill svg {
                width: 20px;
                height: 20px;
            }
        }
        
        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            color: var(--gold);
        }
        
        .hero p {
            font-size: 1.3rem;
            margin-bottom: 2rem;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .patent-badge {
            background: rgba(212, 175, 55, 0.2);
            border: 1px solid var(--gold);
            border-radius: 20px;
            padding: 8px 16px;
            display: inline-block;
            margin-bottom: 1rem;
            font-weight: bold;
            color: var(--gold);
        }
        
        .soft-launch-notice {
            background: rgba(0, 0, 0, 0.3);
            border: 2px solid var(--border-color);
            border-radius: 16px;
            padding: 2.5rem;
            margin: 2rem 0;
        }
        
        .soft-launch-notice h3 {
            color: var(--gold);
            margin-bottom: 1rem;
        }
        
        .premium-service-info {
            background: rgba(0, 0, 0, 0.3);
            border: 2px solid var(--border-color);
            border-radius: 16px;
            padding: 2.5rem;
            margin: 2rem 0;
            text-align: left;
        }
        
        .premium-service-info h3 {
            color: var(--gold);
            margin-bottom: 1rem;
            text-align: center;
        }
        
        .premium-service-info ul {
            margin-left: 1.5rem;
            margin-bottom: 1rem;
        }
        
        .premium-service-info li {
            margin-bottom: 0.5rem;
        }
        
        .cta-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 14px 32px;
            border: none;
            border-radius: var(--radius-full);
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            position: relative;
            overflow: hidden;
        }
        
        .btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .btn:hover::before {
            opacity: 1;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--gold) 0%, var(--dark-gold) 100%);
            color: var(--black);
            font-weight: 700;
            box-shadow: var(--shadow-gold);
        }
        
        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(212, 175, 55, 0.4);
            color: var(--black) !important;
        }
        
        .btn-primary:active {
            transform: translateY(-1px);
            color: var(--black) !important;
        }

        .btn-primary,
        .btn-primary:focus-visible,
        .hero-primary-cta,
        .hero-primary-cta:hover,
        .hero-primary-cta:active,
        .hero-primary-cta:focus-visible {
            color: var(--black) !important;
        }
        
        .btn-secondary {
            background: transparent;
            color: var(--gold);
            border: 2px solid var(--gold);
        }
        
        .btn-secondary:hover {
            background: rgba(212, 175, 55, 0.1);
            transform: translateY(-2px);
        }
        
        .btn-secondary:hover {
            background-color: var(--gold);
            color: var(--black);
            transform: translateY(-2px);
        }

        /* Dual Driver Hero */
        .dual-driver-hero {
            padding: 40px 0 20px 0;
            background-color: var(--dark-gray);
            text-align: center;
        }

        .driver-model {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 3rem;
            margin-top: 3rem;
            align-items: center;
        }

        /* How It Works - Unified Card Design */
        .how-it-works-card {
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: start;
            background: var(--bg-card, #1a1a1a);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(212, 175, 55, 0.15);
            margin-top: 1rem;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }
        
        /* Row height follows copy (align-items:start). Left column stretches to row; video fills it (cover). */
        .how-it-works-card .hero-image-side {
            position: relative;
            display: block;
            min-height: 0;
            align-self: stretch;
            overflow: hidden;
            background: #1a1a1a;
            line-height: 0;
        }
        .how-it-works-card .hero-image,
        .how-it-works-card .hero-video {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            min-height: 0 !important;
            max-height: none !important;
            object-fit: cover;
            object-position: center center;
            display: block;
        }
        
        .how-it-works-card .steps-side {
            justify-content: flex-start;
        }
        
        .hero-image-side {
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: stretch;
            justify-content: center;
            background: #1a1a1a;
        }
        
        .hero-image,
        .hero-video {
            width: 100%;
            height: 100%;
            min-height: 250px;
            max-height: 320px;
            object-fit: cover; /* Fill container edge to edge */
            display: block;
            transition: transform 0.5s ease;
        }
        
        .hero-video {
            background: #1a1a1a;
        }
        
        .hero-image-side:hover .hero-image,
        .hero-image-side:hover .hero-video {
            transform: scale(1.02);
        }
        
        /* Video Replay Button */
        .video-replay-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.25rem;
            background: rgba(0, 0, 0, 0.7);
            border: 2px solid var(--gold);
            border-radius: 50px;
            color: var(--gold);
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 10;
        }
        
        .video-replay-btn:hover {
            background: var(--gold);
            color: #000;
        }
        
        /* Hero Inline Video (between text) */
        .hero-inline-video-container {
            position: relative;
            max-width: 320px; /* 50% smaller on desktop */
            margin: 1.5rem auto;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        }
        
        .hero-inline-video {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 12px;
        }
        
        .hero-inline-video-container .video-replay-btn {
            padding: 0.5rem 1rem;
            font-size: 0.8rem;
        }
        
        @media (max-width: 768px) {
            .hero-inline-video-container {
                max-width: 85%;
            }
        }
        
        .hero-image-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 1.5rem;
            background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent 100%);
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }
        
        .hero-badge {
            background: linear-gradient(135deg, var(--gold), #B8860B);
            color: #000;
            padding: 0.6rem 1.25rem;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
        }
        
        .steps-side {
            padding: 1.25rem 1.5rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 100%);
        }
        
        .steps-side h3 {
            color: var(--gold);
            font-size: 1.25rem;
            margin-bottom: 0.5rem;
            font-weight: 700;
        }
        
        /* Light mode */
        [data-theme="light"] .how-it-works-card {
            background: #fff;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(212, 175, 55, 0.2);
        }
        
        [data-theme="light"] .steps-side {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.03) 0%, transparent 100%);
        }
        
        /* Mobile: Stack vertically */
        @media (max-width: 900px) {
            .how-it-works-card {
                grid-template-columns: 1fr;
            }
            
            .hero-image-side {
                min-height: 220px;
            }
            
            .hero-image,
            .hero-video {
                min-height: 220px;
            }
            
            .how-it-works-card .hero-image-side {
                min-height: 12rem !important;
            }
            .how-it-works-card .hero-image,
            .how-it-works-card .hero-video {
                min-height: 0 !important;
                max-height: none !important;
            }
            
            .steps-side {
                padding: 1.25rem 1.5rem;
            }
        }
        
        @media (max-width: 600px) {
            .how-it-works-card {
                border-radius: 20px;
            }
            
            .hero-image-side {
                min-height: 180px;
            }
            
            .hero-image,
            .hero-video {
                min-height: 180px;
            }
            
            .how-it-works-card .hero-image-side {
                min-height: 10rem !important;
            }
            
            .steps-side h3 {
                font-size: 1.25rem;
                margin-bottom: 0.5rem;
            }
            
            .model-step {
                margin: 0.35rem 0;
                gap: 0.5rem;
            }
            
            .hero-badge {
                font-size: 0.7rem;
                padding: 0.5rem 1rem;
            }
        }

        .model-graphic {
            background: rgba(0, 0, 0, 0.3);
            padding: 2.5rem;
            border-radius: 16px;
            border: 2px solid var(--border-color);
            margin: 0;
        }

        .model-step {
            display: grid;
            grid-template-columns: 42px 1fr;
            align-items: flex-start;
            gap: 1rem;
            margin: 0;
            text-align: left;
            padding: 0.6rem 0;
            border-bottom: 1px solid rgba(212, 175, 55, 0.15);
        }
        
        .model-step strong {
            color: var(--gold);
        }
        
        .model-step:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .step-number {
            background: var(--gold);
            color: var(--black);
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            flex-shrink: 0;
            font-size: 0.9rem;
        }
        
        .model-step > div:last-child {
            padding-top: 0;
        }
        
        .model-step strong {
            display: block;
            font-size: 0.85rem;
            margin-bottom: 0.1rem;
            color: var(--text-primary);
        }
        
        .model-step p {
            margin: 0;
            font-size: 0.75rem;
            color: var(--text-secondary);
            line-height: 1.3;
        }

        /* Statistics Section */
        .stats-section {
            padding: 40px 0;
            background-color: var(--black);
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 3rem;
            color: var(--gold);
            font-size: 2.5rem;
        }
        
        .section-subtitle {
            text-align: center;
            margin-bottom: 4rem;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            font-size: 1.2rem;
            color: #ccc;
        }
        
        .stats-container {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            justify-content: center;
            margin-bottom: 3rem;
        }
        
        .stat-card {
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-lg);
            padding: 2rem 2.5rem;
            flex: 1;
            min-width: 280px;
            text-align: center;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        
        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--gold), var(--dark-gold));
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .stat-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-xl);
        }
        
        .stat-card:hover::before {
            opacity: 1;
        }
        
        .stat-value {
            font-size: clamp(2.5rem, 5vw, 3.5rem);
            font-weight: 800;
            margin-bottom: 0.75rem;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }
        
        .stat-value.success {
            color: var(--success);
        }
        
        .stat-value.danger {
            color: var(--danger);
        }
        
        .stat-label {
            font-size: 1.2rem;
            color: var(--white);
        }
        
        .stat-comparison {
            display: flex;
            justify-content: space-between;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid #444;
        }
        
        .comparison-item {
            text-align: center;
        }
        
        .comparison-value {
            font-size: 1.5rem;
            font-weight: bold;
        }
        
        .comparison-label {
            font-size: 0.9rem;
            color: #ccc;
        }
        
        /* Enhanced Chart Container for Mobile */
        .chart-container {
            background-color: var(--dark-gray);
            border-radius: 10px;
            padding: 1.5rem;
            margin-bottom: 3rem;
            border: 1px solid var(--gold);
            position: relative;
            overflow: hidden;
        }

        .chart-wrapper {
            position: relative;
            height: 400px;
        }

        .chart-interaction-notice {
            background: rgba(212, 175, 55, 0.1);
            border: 1px solid var(--gold);
            border-radius: 8px;
            padding: 1rem;
            margin-top: 1rem;
            text-align: center;
            display: none;
        }

        .chart-interaction-notice.mobile-visible {
            display: block;
        }

        .chart-interaction-notice p {
            margin: 0.5rem 0;
            font-size: 0.9rem;
            color: #ccc;
        }

        .chart-interaction-icon {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
        }
        
        .data-source {
            text-align: center;
            color: #999;
            font-style: italic;
            margin-top: 2rem;
            font-size: 0.9rem;
        }
        
        .impact-statement {
            text-align: center;
            margin: 3rem 0;
            padding: 2.5rem;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 16px;
            border: 2px solid var(--border-color);
        }
        
        /* Japan Impact Box - Full Width */
        .japan-impact-box {
            background: rgba(0, 0, 0, 0.4);
            border: 2px solid var(--border-color);
            border-radius: 16px;
            padding: 2.5rem;
            margin: 3rem 0;
            text-align: center;
        }
        
        .japan-impact-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        
        .japan-flag {
            font-size: 2.5rem;
        }
        
        .japan-impact-header h3 {
            color: var(--gold);
            font-size: 1.8rem;
            margin: 0;
            font-weight: 700;
        }
        
        .japan-impact-intro {
            color: #ccc;
            font-size: 1.1rem;
            max-width: 800px;
            margin: 0 auto 2rem;
            line-height: 1.6;
        }
        
        .japan-impact-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            text-align: left;
        }
        
        .japan-impact-item {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(0,0,0,0.2) 100%);
            padding: 1.5rem;
            border-radius: 12px;
            border-left: 4px solid var(--gold);
        }
        
        .japan-impact-icon {
            font-size: 2rem;
            margin-bottom: 0.75rem;
        }
        
        .japan-impact-item h4 {
            color: var(--gold);
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
        }
        
        .japan-impact-item p {
            color: #ccc;
            font-size: 0.95rem;
            margin: 0;
            line-height: 1.5;
        }
        
        /* Light mode Japan impact box */
        [data-theme="light"] .japan-impact-box {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, var(--bg-card) 100%);
        }
        
        [data-theme="light"] .japan-impact-intro {
            color: var(--text-secondary);
        }
        
        [data-theme="light"] .japan-impact-item {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(245, 243, 240, 0.9) 100%);
        }
        
        [data-theme="light"] .japan-impact-item h4 {
            color: #000;
        }
        
        [data-theme="light"] .japan-impact-item p {
            color: var(--text-secondary);
        }
        
        @media (max-width: 768px) {
            .japan-impact-grid {
                grid-template-columns: 1fr;
            }
            
            .japan-impact-header {
                flex-direction: column;
                gap: 0.5rem;
            }
            
            .japan-impact-header h3 {
                font-size: 1.5rem;
            }
        }

        /* Graph controls for mobile */
        .graph-controls {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 1rem;
            flex-wrap: wrap;
        }

        .graph-btn {
            background: var(--gold);
            color: var(--black);
            border: none;
            padding: 8px 16px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
        }

        .graph-btn:hover {
            background: var(--dark-gold);
        }

        /* Services Section */
        .services-section {
            padding: 8px 0;
            background-color: var(--black);
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .service-card {
            background: rgba(0, 0, 0, 0.3);
            padding: 1.5rem;
            border-radius: 16px;
            border: 2px solid var(--border-color);
            text-align: center;
            transition: all 0.3s;
            max-width: 100%;
            margin: 0 auto;
            box-sizing: border-box;
        }

        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(212, 175, 55, 0.2);
        }

        .service-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        .service-price {
            font-size: 1.5rem;
            color: var(--gold);
            font-weight: bold;
            margin: 1rem 0;
        }

        .service-features {
            list-style: none;
            margin: 1rem 0;
        }

        .service-features li {
            padding: 0.3rem 0;
            color: #ccc;
        }

        .service-features li:before {
            content: "✓";
            color: var(--gold);
            margin-right: 8px;
        }

        .service-note {
            background: rgba(212, 175, 55, 0.1);
            padding: 1rem;
            border-radius: 5px;
            margin: 1rem 0;
            font-size: 0.9rem;
            color: #ccc;
        }

        [data-theme="light"] .service-note {
            color: #000;
        }

        .booking-options {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin-top: 2rem;
        }

        .whatsapp-booking {
            background: #25D366;
            color: white;
            padding: 12px 20px;
            border-radius: 5px;
            text-decoration: none;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            transition: all 0.3s;
        }

        .whatsapp-booking:hover {
            background: #128C7E;
            transform: translateY(-2px);
        }

        /* Safety Features Section */
        .safety-features {
            padding: 20px 0;
            background: linear-gradient(135deg, var(--dark-gray) 0%, var(--black) 100%);
        }

        .safety-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .safety-card {
            background: var(--dark-gray);
            padding: 2rem;
            border-radius: 10px;
            border: 1px solid var(--gold);
            text-align: center;
            transition: all 0.3s;
        }

        .safety-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(212, 175, 55, 0.2);
        }

        .safety-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
            color: var(--gold);
        }

        .compliance-badge {
            background: var(--gold);
            color: var(--black);
            padding: 4px 12px;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: bold;
            margin-left: 8px;
        }

        /* Founder Signup Section */
        .founder-signup {
            padding: 80px 0;
            background: linear-gradient(135deg, var(--black) 0%, var(--dark-gray) 100%);
        }

        .founder-benefits {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin: 3rem 0;
        }

        .benefit-card {
            background: var(--dark-gray);
            padding: 2rem;
            border-radius: 10px;
            border: 1px solid var(--gold);
            text-align: center;
        }

        .benefit-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: var(--gold);
        }

        .benefit-badge {
            background: var(--gold);
            color: var(--black);
            padding: 4px 12px;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: bold;
            margin-left: 8px;
        }

        .founder-launch-info {
            background: rgba(0, 0, 0, 0.3);
            border: 2px solid var(--border-color);
            border-radius: 16px;
            padding: 2.5rem;
            margin: 2rem 0;
            text-align: center;
        }

        /* Forms Section */
        .forms-section {
            padding: 80px 0;
            background: transparent;
        }
        
        .form-container {
            max-width: 100%;
            margin: 0 auto;
            background-color: transparent;
            padding: 0;
            border-radius: 16px;
            border: none;
        }
        
        .form-toggle {
            display: flex;
            margin-bottom: 2rem;
            background-color: var(--black);
            border-radius: 5px;
            overflow: hidden;
        }
        
        .toggle-btn {
            flex: 1;
            padding: 1rem;
            text-align: center;
            background: none;
            border: none;
            color: var(--white);
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .toggle-btn.active {
            background-color: var(--gold);
            color: var(--black);
            font-weight: bold;
        }
        
        .form {
            display: none;
        }
        
        .form.active {
            display: block;
        }
        
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--gold);
        }
        
        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 12px;
            background-color: var(--black);
            border: 1px solid #444;
            border-radius: 5px;
            color: var(--white);
            font-size: 1rem;
        }
        
        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            outline: none;
            border-color: var(--gold);
        }
        
        .file-upload {
            border: 2px dashed #444;
            padding: 1rem;
            text-align: center;
            border-radius: 5px;
            transition: border-color 0.3s;
            margin-bottom: 1rem;
        }
        
        .file-upload:hover {
            border-color: var(--gold);
        }
        
        .file-upload input {
            border: none;
            background: none;
        }
        
        .submit-btn {
            width: 100%;
            padding: 15px;
            background-color: var(--gold);
            color: var(--black);
            border: none;
            border-radius: 5px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .submit-btn:hover {
            background-color: var(--dark-gold);
        }

        /* Insurance Badge */
        .insurance-badge {
            display: flex;
            align-items: center;
            gap: 1rem;
            background: var(--dark-gray);
            padding: 1rem;
            border-radius: 10px;
            border: 1px solid var(--gold);
            margin: 40px 0 2rem;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .badge-icon {
            font-size: 2rem;
        }
        
        .verify-link {
            color: var(--gold);
            text-decoration: none;
            font-size: 0.9rem;
            font-weight: bold;
        }

        /* Payment Section */
        .payment-section {
            margin-top: 2rem;
            padding: 1.5rem;
            background-color: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            border: 1px solid var(--gold);
        }
        
        .fare-summary {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #444;
        }
        
        .fare-total {
            font-size: 1.3rem;
            font-weight: bold;
            color: var(--gold);
        }
        
        .deposit-amount {
            font-size: 1.1rem;
            color: var(--gold);
        }
        
        .stripe-payment {
            margin-top: 1.5rem;
        }
        
        #card-element {
            padding: 12px;
            border: 1px solid #444;
            border-radius: 5px;
            background-color: var(--black);
            margin-bottom: 1rem;
        }
        
        .payment-disclaimer {
            font-size: 0.9rem;
            color: #999;
            margin-top: 1rem;
            text-align: center;
        }

        /* Footer */
        footer {
            background: var(--dark-gray);
            padding: 3rem 0;
            text-align: center;
            border-top: 2px solid var(--gold);
        }

        .footer-links {
            display: flex;
            justify-content: center;
            gap: 0.5rem 1.5rem;
            margin: 2rem 0;
            flex-wrap: wrap;
            padding: 1rem;
        }

        .footer-links a {
            color: var(--gold);
            text-decoration: none;
            font-size: 0.85rem;
            font-weight: 400;
            letter-spacing: 0.01em;
            padding: 0.4rem 0.6rem;
            transition: opacity 0.2s ease;
            opacity: 0.8;
        }

        .footer-links a:hover {
            opacity: 1;
        }

        .footer-details {
            margin: 2rem 0;
            color: #ccc;
        }

        /* Mobile Menu Buttons */
#mobileMenuBtn {
    display: none;
    color: #D4AF37 !important;
}

.menu-icon {
    display: none;
}

.menu-icon-bars {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.menu-icon-bars span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
    transition: transform 0.35s ease, opacity 0.25s ease, width 0.35s ease, background 0.25s ease;
}

@media (max-width: 768px) {
    #mobileMenuBtn {
        display: block !important;
        position: relative;
        width: 48px;
        height: 48px;
        border: none;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
        color: #D4AF37 !important;
        cursor: pointer;
    }
    
    #mobileMenuBtn .menu-icon-bars {
        animation: barsPulse 2s ease-in-out infinite;
    }
    
    @keyframes barsPulse {
        0%, 100% {
            transform: scale(1);
            opacity: 0.75;
        }
        50% {
            transform: scale(1.08);
            opacity: 1;
        }
    }
    
    #mobileMenuBtn.menu-opened .menu-icon-bars,
    .floating-menu-btn.menu-opened .menu-icon-bars {
        animation: none;
    }
    
    #mobileMenuBtn.menu-opened .menu-icon-bars span:nth-child(1),
    .floating-menu-btn.menu-opened .menu-icon-bars span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }
    
    #mobileMenuBtn.menu-opened .menu-icon-bars span:nth-child(2),
    .floating-menu-btn.menu-opened .menu-icon-bars span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0.2);
    }
    
    #mobileMenuBtn.menu-opened .menu-icon-bars span:nth-child(3),
    .floating-menu-btn.menu-opened .menu-icon-bars span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }
}

@media (max-width: 768px) {
    /* Mobile horizontal scroll fix */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    * {
        max-width: 100vw;
    }
    
    .container {
        padding: 0 15px;
        max-width: 100%;
    }
    
    section {
        overflow-x: hidden;
    }
    
    /* Header - ALWAYS stays on top */
    header {
        padding: 10px 0;
        position: fixed;
        top: 0 !important;
        left: 0;
        right: 0;
        z-index: 9999;
        background: linear-gradient(135deg, var(--black) 0%, var(--dark-gray) 100%);
        border-bottom: none;
    }
    
    header .container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 5px;
    }
    
    /* Hide desktop navigation sections */
    .nav-section {
        display: none !important;
    }
    
    /* Logo on mobile - centered */
    .logo-container {
        transform: scale(2);
        transform-origin: center center;
        margin: 8px auto 0 auto;
        display: flex;
        justify-content: center;
    }
    
    /* Center the nav container for logo */
    header .container nav {
        flex-direction: column;
        align-items: center;
    }
    
    /* Hide top hamburger button on mobile - using floating nav instead */
    #mobileMenuBtn {
        display: none !important;
    }
    
    body.mobile-menu-open {
        overflow: hidden;
    }

    /* Mobile menu overlay - click to close */
    .nav-overlay {
        position: fixed;
        inset: 0;
        display: block;
        background: rgba(248, 249, 250, 0.24);
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
        z-index: 99997;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0s linear 0.3s, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
    }
    
    .nav-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        transition: opacity 0.3s ease, visibility 0s linear 0s, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
    }
    
    /* Fullscreen menu modal - hidden by default */
    .nav-links {
        display: flex;
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(255, 255, 255, 0.86);
        backdrop-filter: blur(22px) saturate(160%);
        -webkit-backdrop-filter: blur(22px) saturate(160%);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2rem;
        gap: 0;
        z-index: 99998;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-12px) scale(0.985);
        transition: opacity 0.28s ease, transform 0.32s ease, visibility 0s linear 0.32s;
    }
    
    /* Show menu when data-open attribute is true */
    .nav-links[data-open="true"] {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto;
        transform: translateY(0) scale(1);
        z-index: 99998 !important;
        transition: opacity 0.28s ease, transform 0.32s ease, visibility 0s linear 0s;
    }
    
    /* Menu header with close button - Mobile only */
    .nav-menu-header {
        display: flex !important;
        justify-content: center;
        align-items: center;
        position: absolute !important;
        top: 1.5rem;
        right: 1.5rem;
        padding: 0 !important;
        margin: 0 !important;
        border: none;
        background: transparent;
    }
    
    .nav-menu-title {
        display: none;
    }
    
    .nav-menu-close {
        background: transparent;
        border: none;
        font-size: 2rem;
        color: var(--gold);
        cursor: pointer;
        padding: 0.5rem;
        border-radius: 50%;
        transition: all 0.3s ease;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 300;
        z-index: 10001;
    }
    
    .nav-menu-close:hover,
    .nav-menu-close:active {
        background: rgba(212, 175, 55, 0.2);
        color: #fff;
        transform: rotate(90deg);
    }
    
    /* Menu links - styled for clean, modern look */
    .nav-links a {
        width: min(100%, 234px);
        padding: 0.6rem 1.5rem;
        margin: 0;
        text-align: center;
        font-size: 1rem;
        color: #B8960B;
        text-decoration: none;
        font-weight: 500;
        line-height: 1.3;
        display: block;
        border-radius: 999px;
        transform: translateY(12px);
        opacity: 0;
        transition: transform 0.24s ease, opacity 0.24s ease, box-shadow 0.24s ease, color 0.24s ease;
    }
    
    /* When menu is open, ensure all elements are visible */
    .nav-links[data-open="true"] a {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        color: #B8960B !important;
        transform: translateY(0);
    }
    
    .nav-links[data-open="true"] .menu-close-btn {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: absolute !important;
        top: 0.4rem !important;
        right: 0.5rem !important;
        background: transparent !important;
        border: none !important;
        color: #D4AF37 !important;
        font-size: 1.8rem !important;
        cursor: pointer !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.25rem !important;
        transition: color 0.2s ease !important;
    }
    
    .nav-links[data-open="true"] .menu-close-btn:hover {
        background: transparent !important;
        color: var(--dark-gold) !important;
    }
    
    .nav-links .nav-divider {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.24s ease, transform 0.24s ease;
    }

    .nav-links[data-open="true"] .nav-divider {
        display: block !important;
        width: 80% !important;
        max-width: 200px !important;
        height: 1px !important;
        background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.18) 8%, rgba(212, 175, 55, 0.55) 22%, rgba(212, 175, 55, 0.68) 50%, rgba(212, 175, 55, 0.55) 78%, rgba(212, 175, 55, 0.18) 92%, transparent 100%) !important;
        margin: 0.6rem 0 !important;
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.14) !important;
        opacity: 1 !important;
        transform: translateY(0);
    }
    
    /* Modern pill buttons */
    .nav-links[data-open="true"] .nav-cta-primary {
        background: linear-gradient(135deg, #D4AF37 0%, #C9A227 100%) !important;
        color: #fff !important;
        border-radius: 30px !important;
        padding: 0.85rem 2rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em !important;
        box-shadow: 0 8px 24px rgba(212, 175, 55, 0.28) !important;
        border: none !important;
    }
    
    .nav-links[data-open="true"] .nav-install {
        background: linear-gradient(135deg, #E0B73F 0%, #C99E23 100%) !important;
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, 0.6) !important;
        border-radius: 30px !important;
        padding: 0.8rem 2rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em !important;
        box-shadow: 0 8px 24px rgba(212, 175, 55, 0.24) !important;
    }
    
    .nav-links a:hover,
    .nav-links a:active {
        color: var(--gold);
        transform: translateY(-2px) scale(1.02);
        background: transparent;
    }

    .nav-links .nav-cta-primary:hover,
    .nav-links .nav-cta-primary:active,
    .nav-links .nav-install:hover,
    .nav-links .nav-install:active {
        color: #fff !important;
        box-shadow: 0 12px 28px rgba(212, 175, 55, 0.34) !important;
    }
    
    /* Light mode mobile menu */
    [data-theme="light"] .nav-links {
        background: rgba(255, 255, 255, 0.86) !important;
    }
    
    [data-theme="light"] .nav-links a {
        color: #B8960B;
    }
    
    [data-theme="light"] .nav-links a:hover,
    [data-theme="light"] .nav-links a:active {
        color: #D4AF37;
    }
    
    [data-theme="light"] .nav-overlay {
        display: block;
    }
    
    /* Priority nav items styling for mobile */
    .nav-links a.nav-priority {
        background: transparent;
        color: var(--gold) !important;
        font-weight: 600;
        font-size: 1.35rem;
    }
    
    .nav-links a.nav-priority-top {
        background: transparent;
        color: var(--gold) !important;
        font-weight: 600;
        font-size: 1.35rem;
    }
    
    [data-theme="light"] .nav-links a.nav-priority {
        background: transparent;
        color: var(--gold) !important;
    }
    
    [data-theme="light"] .nav-links a.nav-priority-top {
        background: transparent;
        color: var(--gold) !important;
    }
}

/* Desktop nav - reorder priority items to end */
@media (min-width: 769px) {
    /* Keep header always visible on desktop */
    header {
        transform: translateY(0) !important;
        position: fixed !important;
    }
    
    /* Hide the close button on desktop - it's for mobile menu only */
    .menu-close-btn {
        display: none !important;
    }
    
    .nav-links a.nav-priority {
        order: 10;
        background: none !important;
        border: none !important;
        margin: 0 !important;
        font-weight: 500;
        border-radius: 0;
        color: var(--gold) !important;
    }
    
    .nav-links a.nav-priority-top {
        order: 12;
        background: none !important;
        color: var(--gold) !important;
        margin: 0 !important;
    }
    
    .nav-links a.nav-priority:first-of-type {
        order: 11;
    }
    
    /* Desktop-only: Match section widths to "When You Need Angelift" (900px) */
    .desktop-wide-container {
        max-width: 900px !important;
    }
}

        /* Enhanced Map Container */
        .map-container {
            height: 300px;
            margin: 1rem 0;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid var(--gold);
            position: relative;
        }
        
        /* Map divs need explicit height to render */
        #pickupMap, #destMap {
            width: 100%;
            height: 100%;
            min-height: 250px;
            background: #1a1a1a;
        }
        
        /* Mobile map fixes */
        @media (max-width: 768px) {
            #pickupMap, #destMap {
                min-height: 200px;
            }
            
            .map-container {
                height: 220px;
                margin: 0.5rem 0;
            }
            
            /* Ensure map controls are visible */
            .gm-style .gmnoprint,
            .gm-style .gm-style-cc {
                transform: scale(0.8);
            }
        }

        .map-instructions {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(255,255,255,0.95);
            padding: 8px 12px;
            border-radius: 5px;
            font-size: 0.8rem;
            z-index: 10;
            color: #B8860B;
            border: 1px solid var(--gold);
            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
            font-weight: 500;
        }

        .map-instructions.mobile {
            display: none;
        }

        .location-options {
            display: flex;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .location-btn {
            flex: 1;
            padding: 10px;
            background: var(--dark-gray);
            border: 1px solid #444;
            color: var(--white);
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .location-btn.active {
            background: var(--gold);
            color: var(--black);
            border-color: var(--gold);
        }

        /* Policy Modal */
        .policy-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            z-index: 2000;
            align-items: center;
            justify-content: center;
        }

        .policy-content {
            background: var(--dark-gray);
            padding: 2rem;
            border-radius: 10px;
            border: 2px solid var(--gold);
            max-width: 600px;
            max-height: 80vh;
            overflow-y: auto;
            margin: 0 20px;
        }

        .policy-content h3 {
            color: var(--gold);
            margin-bottom: 1rem;
        }

        .policy-content ul {
            margin: 1rem 0;
            padding-left: 1.5rem;
        }

        .policy-content li {
            margin-bottom: 0.5rem;
        }

        .close-policy {
            background: var(--gold);
            color: var(--black);
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            margin-top: 1rem;
        }

        /* Floating Navigation Bar - Gold/White theme */
        .floating-nav-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            padding: 10px 0.75rem;
            padding-bottom: max(10px, env(safe-area-inset-bottom));
            background: rgba(255, 255, 255, 0.98);
            border-top: none;
            box-shadow: 0 -4px 20px rgba(212, 175, 55, 0.1);
            transition: opacity 0.2s ease;
        }
        
        .floating-nav-bar::before {
            content: '';
            position: absolute;
            top: 0;
            left: 15%;
            right: 15%;
            height: 1px;
            background: linear-gradient(90deg, transparent 0%, var(--gold) 10%, var(--gold) 90%, transparent 100%);
        }
        
        @media (max-width: 768px) {
            .floating-nav-bar {
                display: flex;
            }
        }
        
        .floating-menu-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            background: #D4AF37;
            border: none;
            color: #fff;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            padding: 10px 22px;
            border-radius: 25px;
            transition: all 0.2s;
            letter-spacing: 0.03em;
            min-width: 120px;
            box-shadow: 0 10px 28px rgba(212, 175, 55, 0.22);
        }
        
        .floating-menu-btn:hover {
            background: #C9A227;
            transform: translateY(-1px);
        }
        
        .floating-menu-btn:active {
            transform: translateY(0);
        }
        
        .menu-label {
            font-size: 0.85rem;
        }
        
        .floating-nav-link {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            color: #B8860B;
            text-decoration: none;
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            width: 88px;
            height: 38px;
            padding: 0 14px;
            border-radius: 50px;
            border: none;
            background: transparent;
            overflow: hidden;
            white-space: nowrap;
            transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                        padding 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                        gap 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                        border-color 0.3s ease,
                        background 0.3s ease;
            -webkit-tap-highlight-color: rgba(0,0,0,0.05);
        }
        
        .floating-nav-link span {
            color: #B8860B;
            display: inline-block;
            overflow: hidden;
            max-width: 50px;
            transition: max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity 0.3s ease;
            opacity: 1;
        }
        
        /* Collapsed state — icon only circle */
        .floating-nav-link.collapsed {
            width: 38px;
            padding: 0;
            gap: 0;
            border: none;
            background: transparent;
        }
        
        .floating-nav-link.collapsed span {
            max-width: 0;
            opacity: 0;
        }
        
        /* Hover expand handled via JS for reliable mobile re-collapse */
        
        .floating-nav-link:first-child {
            position: absolute;
            left: 0.75rem;
        }
        
        .floating-nav-link:last-child {
            position: absolute;
            right: 0.75rem;
        }
        
        .floating-nav-link:active {
            transform: scale(0.96);
        }
        
        .floating-nav-link svg {
            flex-shrink: 0;
        }
        
        /* Subtle pulse on the icon-only state to hint interactivity */
        .floating-nav-link.collapsed.pulse {
        }
        
        /* Rider first-ride $30 off promo — compact chip above bar; width hugs content (not full width) */
        .mobile-credit-promo-float {
            display: none;
            position: fixed;
            right: 0.75rem;
            z-index: 1001;
            flex-direction: column;
            align-items: flex-end;
            width: auto;
            max-width: min(280px, calc(100vw - 1rem));
            pointer-events: none;
            box-sizing: border-box;
        }
        .mobile-credit-promo-float__inner {
            display: block;
            width: auto;
            max-width: min(280px, calc(100vw - 1rem));
            box-sizing: border-box;
        }
        /* Single-piece chip + small tail toward $ icon (no second row) */
        .mobile-signup-credit-bubble {
            position: relative;
            width: max-content;
            max-width: min(280px, calc(100vw - 1rem));
            min-width: 0;
            padding-bottom: 7px;
            box-sizing: border-box;
        }
        .mobile-signup-credit-bubble-surface {
            position: relative;
            border-radius: 999px;
            border: 1px solid #9a7b18;
            background: linear-gradient(135deg, #e8c547 0%, #D4AF37 45%, #c9a227 100%);
            box-shadow: 0 3px 14px rgba(184, 134, 11, 0.4);
            overflow: hidden;
            isolation: isolate;
        }
        .mobile-signup-credit-bubble-surface::after {
            content: '';
            position: absolute;
            top: -45%;
            bottom: -45%;
            left: -70%;
            width: 42%;
            background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 18%, rgba(255,255,255,0.95) 48%, rgba(255,255,255,0.45) 62%, rgba(255,255,255,0) 100%);
            transform: skewX(-22deg) translateX(-200%);
            opacity: 0;
            animation: mobileCreditGleamSweep 1.5s ease-in-out infinite;
            pointer-events: none;
            z-index: 1;
        }
        .mobile-signup-credit-bubble::before {
            content: '';
            position: absolute;
            z-index: 2;
            bottom: 1px;
            right: 20px;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 6px solid #b8960f;
            filter: drop-shadow(0 1px 0 rgba(154, 123, 24, 0.45));
            pointer-events: none;
        }
        .mobile-credit-promo-float.is-active {
            display: flex;
            flex-direction: column;
        }
        .mobile-credit-promo-float .mobile-signup-credit-pill {
            pointer-events: auto;
        }
        @media (min-width: 769px) {
            .mobile-credit-promo-float {
                display: none !important;
            }
        }
        /* Vertically center side icons in bar (symmetrical with left App link) */
        #navGetApp.floating-nav-link {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
        }
        #navDrive.floating-nav-link {
            position: absolute;
            right: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
        }
        #navGetApp.floating-nav-link:active,
        #navDrive.floating-nav-link:active {
            transform: translateY(-50%) scale(0.96);
        }
        .mobile-signup-credit-pill {
            display: none;
            position: relative;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: nowrap;
            gap: 0;
            padding: 0.32rem 2rem 0.32rem 0.75rem;
            background: transparent;
            border: none;
            border-radius: 0;
            font-size: clamp(0.62rem, 2.8vw, 0.74rem);
            font-weight: 700;
            color: #1a1a1a;
            box-shadow: none;
            max-width: 100%;
            width: auto;
            min-width: 0;
            cursor: pointer;
            overflow: visible;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
        }
        .mobile-credit-promo-float.is-active .mobile-signup-credit-bubble {
            display: block;
        }
        .mobile-credit-promo-float.is-active .mobile-signup-credit-pill {
            display: flex;
        }
        @keyframes mobileCreditGleamSweep {
            0%, 15%, 100% {
                transform: skewX(-22deg) translateX(-200%);
                opacity: 0;
            }
            22% {
                opacity: 1;
            }
            42% {
                transform: skewX(-22deg) translateX(260%);
                opacity: 0;
            }
        }
        .mobile-signup-credit-pill__close {
            position: absolute;
            top: 50%;
            right: 0.15rem;
            transform: translateY(-50%);
            width: 1.45rem;
            height: 1.45rem;
            border: none;
            background: transparent;
            color: #1a1a1a;
            font-size: 1rem;
            line-height: 1;
            cursor: pointer;
            padding: 0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
        }
        .mobile-signup-credit-pill__close:hover {
            background: rgba(0, 0, 0, 0.08);
        }
        .mobile-signup-credit-pill__label {
            position: relative;
            z-index: 2;
            text-align: left;
            line-height: 1.15;
            padding-right: 0;
            white-space: nowrap;
        }
        
        /* Desktop: first-ride $30 off promo pill under header gold line */
        .desktop-signup-credit-pill {
            display: none;
            position: fixed;
            left: 50%;
            top: max(96px, calc(env(safe-area-inset-top, 0px) + 88px));
            transform: translateX(-50%) translateY(-6px);
            z-index: 1001;
            align-items: center;
            gap: 0.5rem;
            padding: 0.45rem 0.55rem 0.45rem 0.85rem;
            background: #ffffff;
            border: 1px solid rgba(212, 175, 55, 0.55);
            border-radius: 999px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            max-width: min(420px, calc(100vw - 2rem));
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.45s ease, visibility 0.45s ease, transform 0.45s ease;
        }
        @media (min-width: 769px) {
            .desktop-signup-credit-pill {
                display: flex;
            }
        }
        .desktop-signup-credit-pill.is-perma-hidden {
            display: none !important;
        }
        .desktop-signup-credit-pill.is-visible {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(-50%) translateY(0);
        }
        .desktop-signup-credit-pill__link {
            position: relative;
            overflow: hidden;
            isolation: isolate;
            font-size: 0.82rem;
            font-weight: 700;
            color: #1a1a1a !important;
            text-decoration: none !important;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            padding: 0.2rem 0.35rem;
            border-radius: 999px;
        }
        .desktop-signup-credit-pill__link::after {
            content: '';
            position: absolute;
            top: -35%;
            bottom: -35%;
            left: -55%;
            width: 32%;
            background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.12) 18%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.08) 78%, rgba(255,255,255,0) 100%);
            transform: skewX(-24deg) translateX(0);
            animation: ctaGleamSweep 3.8s ease-in-out infinite;
            pointer-events: none;
        }
        .desktop-signup-credit-pill.is-visible .desktop-signup-credit-pill__link::after {
            animation-play-state: running;
        }
        .desktop-signup-credit-pill:not(.is-visible) .desktop-signup-credit-pill__link::after {
            animation-play-state: paused;
        }
        .desktop-signup-credit-pill__dismiss {
            flex-shrink: 0;
            width: 1.75rem;
            height: 1.75rem;
            border: none;
            background: transparent;
            color: #777;
            cursor: pointer;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }
        .desktop-signup-credit-pill__dismiss:hover {
            background: rgba(212, 175, 55, 0.12);
            color: #1a1a1a;
        }
        
        /* Signup credit modal (mobile $ icon) */
        .signup-credit-modal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 10050;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            padding-bottom: max(1rem, env(safe-area-inset-bottom));
        }
        .signup-credit-modal.is-open {
            display: flex;
        }
        .signup-credit-modal__backdrop {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.4);
        }
        .signup-credit-modal__panel {
            position: relative;
            width: 100%;
            max-width: 400px;
            background: #ffffff;
            border: 2px solid #D4AF37;
            border-radius: 16px;
            padding: 1.5rem 1.35rem 1.35rem;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
            animation: signupCreditModalIn 0.38s ease;
        }
        @keyframes signupCreditModalIn {
            from {
                opacity: 0;
                transform: scale(0.94) translateY(12px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }
        .signup-credit-modal__close {
            position: absolute;
            top: 0.65rem;
            right: 0.65rem;
            width: 2rem;
            height: 2rem;
            border: none;
            background: transparent;
            cursor: pointer;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #777;
        }
        .signup-credit-modal__close:hover {
            background: rgba(212, 175, 55, 0.12);
            color: #1a1a1a;
        }
        .signup-credit-modal__title {
            font-size: 1.2rem;
            font-weight: 800;
            color: #92600e;
            margin: 0 2rem 0.75rem 0;
            line-height: 1.25;
        }
        .signup-credit-modal__body {
            font-size: 0.95rem;
            color: #444;
            line-height: 1.55;
            margin: 0 0 1.25rem;
        }
        .signup-credit-modal__cta {
            display: block;
            width: 100%;
            text-align: center;
            padding: 0.85rem 1rem;
            background: linear-gradient(135deg, #D4AF37 0%, #B8960F 100%);
            color: #1a1a1a !important;
            font-weight: 700;
            font-size: 1rem;
            text-decoration: none !important;
            border-radius: 12px;
            border: none;
            cursor: pointer;
            box-sizing: border-box;
        }
        .signup-credit-modal__cta:hover {
            filter: brightness(1.03);
        }
        .signup-credit-modal__secondary {
            display: block;
            text-align: center;
            margin-top: 0.85rem;
            font-size: 0.88rem;
            color: #B8860B;
            font-weight: 600;
            text-decoration: none;
        }
        .signup-credit-modal__secondary:hover {
            text-decoration: underline;
        }
        body.signup-credit-modal-open {
            overflow: hidden;
        }
        
        /* Role Selection Modal */
        .role-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(4px);
            z-index: 10000;
            display: none;
            align-items: center;
            justify-content: center;
        }
        
        .role-modal.active {
            display: flex;
        }
        
        .role-modal-content {
            background: #fff;
            border-radius: 20px;
            padding: 2rem;
            max-width: 320px;
            width: 90%;
            text-align: center;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }
        
        .role-modal-title {
            font-family: 'Instrument Sans', 'DM Sans', sans-serif;
            font-size: 1.15rem;
            font-weight: 700;
            font-style: italic;
            color: #1a1a1a;
            margin-bottom: 1.25rem;
        }
        
        .role-btn {
            display: block;
            width: 100%;
            padding: 1rem;
            margin-bottom: 0.75rem;
            border: none;
            border-radius: 12px;
            background: linear-gradient(135deg, #D4AF37, #C9A227);
            color: #000 !important;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            text-decoration: none;
            box-shadow: 0 2px 8px rgba(201, 162, 39, 0.25);
        }
        
        .role-btn:hover {
            background: linear-gradient(135deg, #E5C34D, #D4AF37);
            color: #000 !important;
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 6px 20px rgba(201, 162, 39, 0.4);
        }
        
        .role-btn:active {
            transform: translateY(0) scale(0.98);
            box-shadow: 0 2px 6px rgba(201, 162, 39, 0.3);
        }
        
        .role-btn-close {
            background: transparent;
            border: none;
            color: #888;
            font-size: 0.9rem;
            cursor: pointer;
            margin-top: 0.5rem;
            transition: color 0.2s;
        }
        
        .role-btn-close:hover {
            color: #555;
        }
        
        /* Live Chat Widget */
        .chat-widget {
            position: fixed;
            bottom: 100px;
            right: 25px;
            width: 350px;
            max-width: calc(100vw - 50px);
            background: var(--dark-gray);
            border: 2px solid var(--gold);
            border-radius: 15px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
            z-index: 1001;
            display: none;
            flex-direction: column;
            overflow: hidden;
        }
        
        .chat-widget.active {
            display: flex;
        }
        
        .chat-header {
            background: var(--gold);
            color: var(--black);
            padding: 12px 15px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .chat-header button {
            background: rgba(0, 0, 0, 0.15);
            border: none;
            font-size: 1.2rem;
            cursor: pointer;
            color: var(--black);
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }
        
        .chat-header button:hover {
            background: rgba(0, 0, 0, 0.25);
        }
        
        .chat-messages {
            flex: 1;
            padding: 15px;
            max-height: 300px;
            overflow-y: auto;
            background: #1a1a1a;
        }
        
        .chat-message {
            margin-bottom: 10px;
            padding: 10px 15px;
            border-radius: 10px;
            max-width: 85%;
        }
        
        .chat-message.bot {
            background: rgba(212, 175, 55, 0.1);
            border: 1px solid var(--gold);
            color: #fff;
        }
        
        .chat-message.user {
            background: var(--gold);
            color: var(--black);
            margin-left: auto;
        }
        
        .chat-input-area {
            padding: 10px 12px;
            border-top: 1px solid #333;
            display: flex;
            gap: 8px;
            align-items: center;
        }
        
        .chat-input-area input {
            flex: 1;
            min-width: 0;
            padding: 10px 14px;
            border: 1px solid #444;
            border-radius: 25px;
            background: #1a1a1a;
            color: #fff;
            font-size: 14px;
        }
        
        .chat-input-area button {
            background: var(--gold);
            color: var(--black);
            border: none;
            padding: 10px 16px;
            border-radius: 25px;
            font-weight: bold;
            cursor: pointer;
            flex-shrink: 0;
            white-space: nowrap;
        }
        
        .chat-quick-actions {
            padding: 10px 15px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            border-top: 1px solid #333;
        }
        
        .chat-quick-btn {
            background: rgba(212, 175, 55, 0.1);
            border: 1px solid var(--gold);
            color: var(--gold);
            padding: 8px 12px;
            border-radius: 20px;
            font-size: 12px;
            cursor: pointer;
        }
        
        .chat-quick-btn:hover {
            background: var(--gold);
            color: var(--black);
        }
        
        /* Mobile Chat Widget Fixes */
        @media (max-width: 480px) {
            .chat-widget {
                bottom: 80px;
                right: 10px;
                left: 10px;
                width: auto;
                max-width: none;
            }
            
            .chat-input-area {
                padding: 8px 10px;
                gap: 6px;
            }
            
            .chat-input-area input {
                padding: 10px 12px;
                font-size: 16px; /* Prevents iOS zoom */
            }
            
            .chat-input-area button {
                padding: 10px 14px;
                font-size: 14px;
            }
            
            .chat-quick-actions {
                padding: 8px 10px;
                gap: 6px;
            }
            
            .chat-quick-btn {
                padding: 6px 10px;
                font-size: 11px;
            }
            
            .chat-messages {
                max-height: 200px;
                padding: 10px;
            }
        }

        /* Additional Destinations */
        .additional-destination {
            margin-top: 1.5rem;
            padding: 1rem;
            background: rgba(0,0,0,0.3);
            border-radius: 5px;
            border: 1px solid #444;
        }

        .add-destination-btn {
            background: var(--dark-gray);
            color: var(--gold);
            border: 1px solid var(--gold);
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 1rem;
            transition: all 0.3s;
        }

        .add-destination-btn:hover {
            background: var(--gold);
            color: var(--black);
        }

        .remove-destination {
            background: #ff4444;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
            margin-top: 0.5rem;
        }

        /* Terms Checkbox */
        .terms-checkbox {
            margin: 1.5rem 0;
            padding: 1rem;
            background: rgba(212, 175, 55, 0.1);
            border-radius: 5px;
        }

        .terms-checkbox label {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            cursor: pointer;
        }

        .terms-checkbox input {
            margin-top: 0.3rem;
        }

        .terms-link {
            color: var(--gold);
            text-decoration: underline;
        }
        
        /* Driver Application Modal */
        .driver-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.9);
            z-index: 2000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .driver-modal-content {
            background: var(--dark-gray);
            border: 2px solid var(--gold);
            border-radius: 10px;
            max-width: 800px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
        }

        .close-driver-modal {
            position: absolute;
            top: 15px;
            right: 15px;
            background: var(--gold);
            color: var(--black);
            border: none;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            font-weight: bold;
            z-index: 10;
        }

        /* Admin Dashboard */
        .admin-dashboard {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--dark-gray);
            border: 3px solid var(--gold);
            border-radius: 10px;
            padding: 2rem;
            z-index: 2001;
            max-width: 90%;
            max-height: 80vh;
            overflow-y: auto;
        }

        .admin-access-btn {
            position: fixed;
            bottom: 100px;
            right: 25px;
            background: #dc3545;
            color: white;
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            font-size: 1.2rem;
            cursor: pointer;
            z-index: 1000;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            transition: all 0.3s;
        }

        .admin-access-btn:hover {
            transform: scale(1.1);
            background: #c82333;
        }

        .close-admin {
            position: absolute;
            top: 15px;
            right: 15px;
            background: var(--gold);
            color: var(--black);
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
        }

        /* Age Verification */
        .age-verification {
            background: rgba(212, 175, 55, 0.1);
            padding: 1rem;
            border-radius: 5px;
            margin: 1rem 0;
            border: 1px solid var(--gold);
        }

        /* Fix for Google Places address dropdown */
        .pac-container {
            background-color: #1a1a1a !important;
            border: 1px solid var(--gold) !important;
            border-radius: 5px;
            z-index: 10000 !important;
            box-shadow: 0 4px 20px rgba(0,0,0,0.5);
            font-family: inherit;
        }
        
        .pac-item {
            background-color: #1a1a1a !important;
            color: #ffffff !important;
            padding: 12px 15px !important;
            border-bottom: 1px solid #333 !important;
            cursor: pointer;
            line-height: 1.4;
        }
        
        .pac-item:hover {
            background-color: #2a2a2a !important;
        }
        
        .pac-item-selected,
        .pac-item-selected:hover {
            background-color: rgba(212, 175, 55, 0.2) !important;
        }
        
        /* Main address text */
        .pac-item-query {
            color: #ffffff !important;
            font-size: 14px !important;
            font-weight: normal !important;
        }
        
        /* Secondary location text (city, state) */
        .pac-item span:not(.pac-item-query) {
            color: #cccccc !important;
            font-size: 14px !important;
            font-weight: normal !important;
        }
        
        /* Matched/highlighted text - same size, just colored */
        .pac-matched {
            color: var(--gold) !important;
            font-weight: normal !important;
            font-size: inherit !important;
        }
        
        /* Location pin icon */
        .pac-icon {
            filter: invert(1) brightness(0.8);
            margin-right: 10px;
        }
        
        /* "powered by Google" footer */
        .pac-logo::after {
            background-color: #1a1a1a !important;
            padding: 5px 10px;
        }
        
        /* Modal animations removed per request */
        
        /* Founder Commission Highlight */
        .commission-highlight {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(184, 134, 11, 0.2) 100%);
            border: 2px solid var(--gold);
            border-radius: 10px;
            padding: 1.5rem;
            margin: 2rem 0;
            text-align: center;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(212, 175, 55, 0); }
            100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
        }
        
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .commission-highlight h3 {
            color: var(--gold);
            font-size: 1.8rem;
            margin-bottom: 1rem;
        }
        
        .commission-highlight p {
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
        }
        
        /* Rider Signup Form */
        .rider-form {
            display: none;
        }
        
        .rider-form.active {
            display: block;
        }

        /* Dashboard Styles */
        .dashboard-section {
            display: none;
            padding: 80px 0;
            background: var(--dark-gray);
        }

        .dashboard-section.active {
            display: block;
        }

        .dashboard-nav {
            display: flex;
            gap: 1rem;
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }

        .dashboard-nav button {
            background: var(--black);
            color: var(--gold);
            border: 1px solid var(--gold);
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .dashboard-nav button.active {
            background: var(--gold);
            color: var(--black);
        }

        .dashboard-card {
            background: var(--black);
            border: 1px solid var(--gold);
            border-radius: 10px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .live-tracking-map {
            height: 400px;
            border-radius: 8px;
            overflow: hidden;
        }

        .driver-info-panel {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            background: rgba(212, 175, 55, 0.1);
            border-radius: 8px;
            margin-top: 1rem;
        }

        .driver-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--gold);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

        /* Real-time status indicators */
        .status-online {
            color: #25D366;
        }

        .status-offline {
            color: #dc3545;
        }

        .status-pending {
            color: #ffc107;
        }

        .online-toggle {
            background: #25D366;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }

        .online-toggle.offline {
            background: #dc3545;
        }
        
        /* Animated numbers */
        .animated-number {
            display: inline-block;
        }
        
        /* Mobile-specific adjustments */
        @media (max-width: 768px) {
            body {
                padding-top: 70px;
            }
            
            .about-section {
                padding: 120px 0 60px;
                margin-top: 0;
            }
            
            .about-section h1 {
                font-size: 2rem;
                margin-bottom: 1rem;
            }
            
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .section-title {
                font-size: 2rem;
            }
            
            .stat-card, .service-card {
                min-width: 100%;
            }
            
            /* Mission grid mobile fix - stack columns */
            .container > div[style*="grid-template-columns: repeat(2, 1fr)"] {
                grid-template-columns: 1fr !important;
            }
            
            .insurance-badge {
                margin: 60px 20px 2rem;
            }
            
            .chart-wrapper {
                height: 300px;
                touch-action: pan-x pan-y;
            }
            
            .chart-container {
                padding: 1rem;
            }
            
            .chartjs-container {
                -webkit-overflow-scrolling: touch;
                overflow-x: auto;
            }

            .location-options {
                flex-direction: column;
            }

            .form-container {
                padding: 1.5rem;
            }
            
            .nav-section {
                display: none;
            }
            
            .nav-center {
                display: flex;
                justify-content: center;
                flex: 1;
            }
            
            .logo-image {
                width: 100px;
                height: 50px;
            }
            
            .sleek-content {
                padding: 2rem 1.5rem;
            }
            
            .sleek-title {
                font-size: 1.8rem;
            }
            
            .sleek-subtitle {
                font-size: 1.1rem;
            }
            
            .sleek-choice {
                flex-direction: column;
                align-items: center;
            }
            
            .choice-card {
                min-width: 100%;
            }

            .map-instructions.desktop {
                display: none;
            }
            .map-instructions.mobile {
                display: block;
            }
            
            .dashboard-nav {
                flex-direction: column;
            }
            
            .dashboard-nav button {
                width: 100%;
            }
            
            .footer-logo {
                width: 100px;
                height: 50px;
            }
        }

        @media (max-width: 480px) {
            .chart-wrapper {
                height: 250px;
            }
            
            .graph-controls {
                flex-direction: column;
                align-items: center;
            }
            
            .graph-btn {
                width: 100%;
                max-width: 200px;
            }

            .map-container {
                height: 200px;
            }
            
            .sleek-title {
                font-size: 1.6rem;
            }
        }

        /* Enhanced Authentication System */
        .auth-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.95);
            z-index: 3000;
            align-items: center;
            justify-content: center;
        }
        
        .auth-container {
            background: linear-gradient(135deg, var(--dark-gray) 0%, var(--black) 100%);
            border: 2px solid var(--gold);
            border-radius: 15px;
            padding: 2rem;
            max-width: 500px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
        }
        
        .auth-tabs {
            display: flex;
            margin-bottom: 2rem;
            background: var(--black);
            border-radius: 10px;
            overflow: hidden;
        }
        
        .auth-tab {
            flex: 1;
            padding: 1rem;
            text-align: center;
            background: none;
            border: none;
            color: var(--white);
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .auth-tab.active {
            background: var(--gold);
            color: var(--black);
            font-weight: bold;
        }
        
        .auth-form {
            display: none;
        }
        
        .auth-form.active {
            display: block;
        }
        
        .user-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: var(--gold);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin: 0 auto 1rem;
        }
        
        .user-welcome {
            text-align: center;
            margin-bottom: 2rem;
        }
        
        .user-welcome h3 {
            color: var(--gold);
            margin-bottom: 0.5rem;
        }
        
        /* Testimonials Section */
        .testimonials-section {
            padding: 8px 0;
            background: linear-gradient(135deg, var(--black) 0%, var(--dark-gray) 100%);
        }
        
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 1.5rem;
            margin-top: 2rem;
        }
        
        .testimonial-card {
            background: var(--dark-gray);
            padding: 2rem;
            border-radius: 10px;
            border: 1px solid var(--gold);
            position: relative;
        }
        
        /* Mobile/Desktop visibility classes for testimonials */
        .show-on-mobile-only {
            display: none;
        }
        
        .hide-on-mobile {
            display: block;
        }
        
        @media (max-width: 768px) {
            .show-on-mobile-only {
                display: block;
            }
            .hide-on-mobile {
                display: none !important;
            }
        }
        
        /* Expanded reviews grid - 2 columns on desktop, 1 on mobile */
        .expanded-reviews-grid {
            grid-template-columns: repeat(2, 1fr) !important;
        }
        
        @media (max-width: 768px) {
            .expanded-reviews-grid {
                grid-template-columns: 1fr !important;
            }
        }
        
        .testimonial-text {
            font-style: italic;
            margin-bottom: 1rem;
            color: #ccc;
        }
        
        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .author-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--gold);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: var(--black);
        }
        
        .author-info h4 {
            color: var(--gold);
            margin-bottom: 0.2rem;
        }
        
        .author-info p {
            font-size: 0.9rem;
            color: #999;
        }
        
        .testimonial-rating {
            color: var(--gold);
            margin-top: 0.5rem;
        }
        
        /* Install App Section */
        .install-app-section {
            padding: 80px 0;
            background: var(--dark-gray);
            text-align: center;
        }
        
        .install-steps {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin: 3rem 0;
        }
        
        .install-step {
            text-align: center;
            padding: 2rem;
        }
        
        .step-number {
            background: var(--gold);
            color: var(--black);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: bold;
            margin: 0 auto 1rem;
        }
        
        .install-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 2rem;
        }
        
        .install-btn {
            background: var(--gold);
            color: var(--black);
            padding: 15px 30px;
            border-radius: 10px;
            text-decoration: none;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s;
        }
        
        .install-btn:hover {
            background: var(--dark-gold);
            transform: translateY(-2px);
        }
        
        /* Compliance Alerts */
        .compliance-alert {
            background: rgba(220, 53, 69, 0.1);
            border: 1px solid var(--danger);
            border-radius: 5px;
            padding: 1rem;
            margin: 1rem 0;
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .compliance-alert.warning {
            background: rgba(255, 193, 7, 0.1);
            border-color: var(--warning);
        }
        
        .alert-icon {
            font-size: 1.5rem;
        }
        
        /* Earnings Chart */
        .earnings-chart {
            background: var(--black);
            border-radius: 10px;
            padding: 1.5rem;
            margin: 1.5rem 0;
            border: 1px solid var(--gold);
        }
        
        /* Messaging System */
        .messaging-container {
            background: var(--black);
            border-radius: 10px;
            border: 1px solid var(--gold);
            height: 400px;
            display: flex;
            flex-direction: column;
        }
        
        .messages-list {
            flex: 1;
            overflow-y: auto;
            padding: 1rem;
        }
        
        .message {
            margin-bottom: 1rem;
            padding: 0.8rem;
            border-radius: 10px;
            max-width: 80%;
        }
        
        .message.sent {
            background: rgba(212, 175, 55, 0.2);
            margin-left: auto;
            border-bottom-right-radius: 0;
        }
        
        .message.received {
            background: rgba(255, 255, 255, 0.1);
            border-bottom-left-radius: 0;
        }
        
        .message-input {
            display: flex;
            padding: 1rem;
            border-top: 1px solid #444;
            gap: 0.5rem;
        }
        
        .message-input input {
            flex: 1;
            padding: 10px;
            background: var(--dark-gray);
            border: 1px solid #444;
            border-radius: 20px;
            color: var(--white);
        }
        
        .send-btn {
            background: var(--gold);
            color: var(--black);
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            cursor: pointer;
        }
        
        /* Incident Reporting */
        .incident-form {
            background: rgba(220, 53, 69, 0.05);
            border: 1px solid var(--danger);
            border-radius: 10px;
            padding: 2rem;
            margin: 1rem 0;
        }
        
        .urgency-level {
            display: flex;
            gap: 1rem;
            margin: 1rem 0;
        }
        
        .urgency-btn {
            flex: 1;
            padding: 10px;
            background: var(--dark-gray);
            border: 1px solid #444;
            border-radius: 5px;
            color: var(--white);
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .urgency-btn.active {
            background: var(--danger);
            border-color: var(--danger);
        }
        
        .urgency-btn.warning {
            background: var(--warning);
            border-color: var(--warning);
            color: var(--black);
        }
        
        .urgency-btn.warning.active {
            background: var(--warning);
            border-color: var(--warning);
        }
        
        /* Support Center */
        .support-categories {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin: 2rem 0;
        }
        
        .support-category {
            background: var(--dark-gray);
            padding: 1.5rem;
            border-radius: 10px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            border: 1px solid transparent;
        }
        
        .support-category:hover {
            border-color: var(--gold);
            transform: translateY(-2px);
        }
        
        .support-icon {
            font-size: 2rem;
            margin-bottom: 1rem;
            color: var(--gold);
        }

        /* Enhanced Dashboard Components */
        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .dashboard-stat-card {
            background: var(--black);
            border: 1px solid var(--gold);
            border-radius: 10px;
            padding: 1.5rem;
            text-align: center;
        }

        .stat-value-large {
            font-size: 2.5rem;
            font-weight: bold;
            color: var(--gold);
            margin-bottom: 0.5rem;
        }

        .stat-label-large {
            font-size: 1rem;
            color: #ccc;
        }

        .compliance-status {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            background: rgba(212, 175, 55, 0.1);
            border-radius: 8px;
            margin: 1rem 0;
        }

        .status-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .status-active {
            background: var(--success);
        }

        .status-warning {
            background: var(--warning);
        }

        .status-expired {
            background: var(--danger);
        }

        /* Enhanced Booking System */
        .booking-timeline {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin: 2rem 0;
        }

        .timeline-step {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            background: var(--black);
            border-radius: 8px;
            border: 1px solid var(--gold);
        }

        .timeline-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--gold);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: var(--black);
            flex-shrink: 0;
        }

        .timeline-content {
            flex: 1;
        }

        /* Enhanced PWA App Styles */
        .app-feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin: 3rem 0;
        }

        .app-feature-card {
            background: var(--black);
            padding: 2rem;
            border-radius: 10px;
            border: 1px solid var(--gold);
            text-align: center;
            transition: all 0.3s;
        }

        .app-feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(212, 175, 55, 0.2);
        }

        .app-feature-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        /* Enhanced Real-time Features */
        .real-time-badge {
            background: var(--success);
            color: white;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.7rem;
            font-weight: bold;
            margin-left: 8px;
            animation: pulse 2s infinite;
        }

        /* Enhanced Driver Compliance System */
        .compliance-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin: 1rem 0;
        }

        .compliance-item {
            background: var(--dark-gray);
            padding: 1rem;
            border-radius: 8px;
            border: 1px solid #444;
            text-align: center;
        }

        .compliance-status-badge {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.7rem;
            font-weight: bold;
            margin-top: 0.5rem;
        }

        .status-valid {
            background: var(--success);
            color: white;
        }

        .status-expiring {
            background: var(--warning);
            color: black;
        }

        .status-expired {
            background: var(--danger);
            color: white;
        }

        /* Enhanced Analytics Dashboard */
        .analytics-overview {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .analytics-card {
            background: var(--black);
            padding: 1.5rem;
            border-radius: 10px;
            border: 1px solid var(--gold);
            text-align: center;
        }

        .analytics-trend {
            font-size: 0.8rem;
            margin-top: 0.5rem;
        }

        .trend-positive {
            color: var(--success);
        }

        .trend-negative {
            color: var(--danger);
        }

        /* Enhanced Support System */
        .support-ticket {
            background: var(--black);
            border: 1px solid var(--gold);
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 1rem;
            cursor: pointer;
            transition: all 0.3s;
        }

        .support-ticket:hover {
            background: rgba(212, 175, 55, 0.1);
        }

        .ticket-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
        }

        .ticket-status {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.7rem;
            font-weight: bold;
        }

        .status-open {
            background: var(--warning);
            color: black;
        }

        .status-in-progress {
            background: var(--info);
            color: white;
        }

        .status-resolved {
            background: var(--success);
            color: white;
        }

        /* Enhanced Mobile Responsiveness */
        @media (max-width: 1024px) {
            .dashboard-grid {
                grid-template-columns: 1fr;
            }
            
            .analytics-overview {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 640px) {
            .analytics-overview {
                grid-template-columns: 1fr;
            }
            
            .compliance-grid {
                grid-template-columns: 1fr;
            }
            
            .app-feature-grid {
                grid-template-columns: 1fr;
            }
        }
        /* Footer Modal Styles - Professional Legal Document */
.footer-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.footer-modal-content {
    background: #ffffff;
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 20px;
    padding: 2.5rem;
    max-width: 700px;
    width: 95%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
}

.footer-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #D4AF37;
}

.footer-modal-title {
    color: #92600e;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
}

.close-footer-modal {
    background: #fffbeb;
    color: #B8860B;
    border: 1px solid rgba(212, 175, 55, 0.35);
    width: 38px;
    height: 38px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.close-footer-modal:hover {
    background: #fff7d6;
    color: #92600e;
    border-color: rgba(212, 175, 55, 0.55);
}

.footer-modal-body {
    color: #444;
    line-height: 1.7;
    font-size: 0.95rem;
}

.footer-modal-body h3 {
    color: #1a1a1a;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 2rem 0 0.75rem 0;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.footer-modal-body h3:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.footer-modal-body h4 {
    color: #333;
    font-size: 1rem;
    font-weight: 600;
    margin: 1.25rem 0 0.5rem 0;
}

.footer-modal-body p {
    margin-bottom: 1rem;
    text-align: justify;
}

.footer-modal-body ul, .footer-modal-body ol {
    margin: 1rem 0;
    padding-left: 1.25rem;
}

.footer-modal-body li {
    margin-bottom: 0.5rem;
}

.footer-modal-body strong {
    color: #1a1a1a;
    font-weight: 600;
}

.footer-legal-doc {
    color: #1a1a1a;
    line-height: 1.75;
}

.footer-legal-doc h1 {
    font-size: 2.2rem;
    color: #1a1a1a;
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
    text-align: center;
}

.footer-legal-doc h2 {
    font-size: 1.45rem;
    color: #92600e;
    border-bottom: 1px solid #D4AF37;
    padding-bottom: 0.6rem;
    margin-top: 1.8rem;
}

.footer-legal-doc h3 {
    font-size: 1.05rem;
    color: #1a1a1a;
    font-weight: 700;
    margin-top: 1.3rem;
    border-top: none;
    padding-top: 0;
}

.footer-legal-doc p {
    color: #1a1a1a;
    text-align: left;
}

.footer-legal-doc .warning,
.footer-legal-doc .highlight,
.footer-legal-doc .contact {
    background: #fffbeb;
    border: 1px solid rgba(212, 175, 55, 0.24);
    border-left: 4px solid #D4AF37;
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin: 1rem 0;
}

.footer-legal-doc table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.footer-legal-doc th,
.footer-legal-doc td {
    border: 1px solid #e2e8f0;
    padding: 0.72rem 0.85rem;
    text-align: left;
    vertical-align: top;
    font-size: 0.93rem;
}

.footer-legal-doc th {
    background: #fffbeb;
    color: #92600e;
    font-weight: 700;
}

.footer-legal-doc .footer-note {
    text-align: center;
    font-size: 0.9rem;
    color: #777;
}

.contact-info {
    background: #f8f8f8;
    padding: 1.25rem;
    border-radius: 4px;
    margin: 1.5rem 0;
    border-left: 3px solid #1a1a1a;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
}

.contact-icon {
    font-size: 1.5rem;
    width: 40px;
    text-align: center;
}

.contact-details {
    flex: 1;
}

.contact-details strong {
    display: block;
    margin-bottom: 0.2rem;
}

/* Mobile responsiveness for footer modals - FULLSCREEN on mobile */
@media (max-width: 768px) {
    .footer-modal {
        padding: 0 !important;
        align-items: stretch !important;
    }
    
    .footer-modal-content {
        padding: 1.25rem;
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        margin: 0;
    }
    
    .footer-modal-title {
        font-size: 1.25rem;
    }
    
    .footer-modal-body {
        font-size: 0.9rem;
        padding-bottom: 100px; /* Extra space at bottom for scroll */
    }
    
    .footer-modal-body p {
        text-align: left;
    }
    
    /* Fix contact modal grid on mobile */
    .footer-modal-body [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
    }
    
    .footer-modal-body [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Ensure email links wrap properly */
    .footer-modal-body a {
        word-break: break-all;
    }
    
    /* Adjust flex rows for contact items */
    .footer-modal-body [style*="display: flex"][style*="justify-content: space-between"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.25rem !important;
    }
}

@media (max-width: 480px) {
    .footer-modal-content {
        padding: 1rem;
    }
    
    .footer-modal-header {
        flex-direction: row;
        gap: 1rem;
        position: sticky;
        top: 0;
        background: #fff;
        margin: -1rem -1rem 1rem -1rem;
        padding: 1rem;
        border-bottom: 1px solid #eee;
        z-index: 10;
    }
    
    .footer-modal-title {
        font-size: 1.1rem;
    }
    
    .contact-item {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
}

/* MOBILE NAVIGATION FIX - CONSOLIDATED */
@media (max-width: 768px) {
    /* Header at top - no banner on mobile */
    header {
        top: 0 !important;
        z-index: 1002;
            padding: 0.2rem 0;
    }
    
    /* Adjust body padding for header height - ensure content not hidden */
    body {
            padding-top: 62px;
    }
    
    /* Hero section needs extra margin to clear header */
    .hero, #home, section:first-of-type {
        padding-top: 10px;
    }
    
    /* Push hero content down to avoid nav line cutoff */
    .hero .container > div:first-child {
        padding-top: 30px;
    }
}

/* Additional fix for very small screens */
@media (max-width: 480px) {
    body {
            padding-top: 58px;
    }
    
    /* Logo on very small screens - centered */
    .logo-container {
        transform: scale(1.8);
        transform-origin: center center;
        margin: 6px auto 0 auto;
    }
}

/* Banner hidden on mobile - styles only for desktop */

/* Fix for Founder Section Mobile Layout */
@media (max-width: 768px) {
    .perks-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .featured-perk {
        transform: scale(1) !important;
        order: -1; /* Ensure featured card comes first */
    }
    
    .perk-card {
        margin: 0 auto;
        max-width: 100% !important;
    }
    
    /* Ensure consistent card heights */
    .perk-card {
        min-height: auto !important;
        height: auto !important;
    }
    
    /* Fix list item consistency */
    .perk-card ul li {
        padding: 0.8rem !important;
        margin-bottom: 0.5rem !important;
    }
}

/* Additional mobile optimization */
@media (max-width: 480px) {
    .perks-grid {
        gap: 1rem !important;
    }
    
    .perk-card {
        padding: 1.5rem !important;
    }
    
    .urgency-bar {
        padding: 1rem !important;
    }
    
    .urgency-stat {
        flex: 1;
        min-width: 100px;
    }
}

/* =============================================================================
   MISSION SECTION MOBILE RESPONSIVE
   ============================================================================= */

/* Road Safety Card - Image Left, Content Right */
.road-safety-card {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    background: var(--bg-card, #1a1a1a);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(212, 175, 55, 0.15);
    max-width: 900px;
    margin: 0 auto;
}

.road-safety-image-side {
    position: relative;
    min-height: 320px;
    overflow: hidden;
}

.road-safety-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.9);
    transition: transform 0.5s ease, filter 0.3s ease;
}

.road-safety-image-side:hover .road-safety-image {
    transform: scale(1.03);
    filter: brightness(0.8);
}

.road-safety-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 1rem;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
}

.road-safety-quote {
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    font-style: italic;
    text-align: center;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.road-safety-content-side {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.road-safety-content-side .crisis-title {
    color: var(--gold);
    font-size: 1.3rem;
    margin: 0 0 1rem 0;
    font-weight: 700;
}

.crisis-stats-grid-compact {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.crisis-stat-compact {
    display: flex;
    flex-direction: column;
    text-align: center;
    flex: 1;
    min-width: 70px;
}

.crisis-stat-compact .crisis-number {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
}

.crisis-stat-compact .crisis-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 0.25rem;
}

.mission-compact {
    background: rgba(212, 175, 55, 0.08);
    border-left: 3px solid var(--gold);
    padding: 1rem;
    border-radius: 0 8px 8px 0;
    margin-bottom: 1.25rem;
}

.mission-compact h4 {
    font-size: 1rem;
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.mission-compact p {
    font-size: 0.85rem;
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.road-safety-cta {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--gold);
    color: #000 !important;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.road-safety-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
    color: #000 !important;
}

/* Light mode */
[data-theme="light"] .road-safety-card {
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(212, 175, 55, 0.2);
}

/* Mobile: Stack vertically */
@media (max-width: 768px) {
    .road-safety-card {
        grid-template-columns: 1fr;
    }
    
    .road-safety-image-side {
        min-height: 200px;
        max-height: 250px;
    }
    
    .road-safety-content-side {
        padding: 1.5rem;
    }
    
    .crisis-stats-grid-compact {
        justify-content: space-between;
    }
    
    .road-safety-quote {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .road-safety-content-side {
        padding: 1.25rem;
    }
    
    .crisis-stat-compact .crisis-number {
        font-size: 1.5rem;
    }
    
    .road-safety-cta {
        width: 100%;
    }
}

/* Crisis Stats Box */
.crisis-stats-box {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 2.5rem;
    margin-bottom: 2rem;
    text-align: center;
}

.crisis-title {
    color: #dc3545;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.crisis-stats-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.crisis-stat {
    text-align: center;
    min-width: 120px;
}

.crisis-number {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.1;
}

.crisis-number.danger { color: #dc3545; }
.crisis-number.success { color: #25D366; }

.crisis-label {
    font-size: 0.9rem;
    color: #ccc;
    margin-top: 0.25rem;
}

.crisis-message {
    font-size: 1rem;
    color: #fff;
    font-weight: 500;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Light mode crisis stats */
[data-theme="light"] .crisis-stats-box {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.05) 0%, var(--bg-card) 100%);
}

[data-theme="light"] .crisis-label {
    color: var(--text-secondary);
}

[data-theme="light"] .crisis-message {
    color: var(--text-primary);
}

@media (max-width: 480px) {
    .crisis-stats-grid {
        gap: 1rem;
    }
    
    .crisis-number {
        font-size: 2rem;
    }
    
    .crisis-stat {
        min-width: 100px;
    }
    
    /* Rideshare comparison stack on mobile */
    .rideshare-compare-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Mission Hero Box - Full Width Impactful Design */
.mission-hero-box {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 0;
    margin-bottom: 3rem;
    text-align: center;
    overflow: hidden;
}

.mission-urgency-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.15) 0%, rgba(37, 211, 102, 0.1) 100%);
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    flex-wrap: wrap;
}

.urgency-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.urgency-number {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
}

.urgency-number.danger { color: #dc3545; }
.urgency-number.success { color: #25D366; }
.urgency-number.gold { color: var(--gold); }

.urgency-label {
    font-size: 0.8rem;
    color: #999;
    margin-top: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.urgency-divider {
    font-size: 1.5rem;
    color: var(--gold);
    font-weight: bold;
}

.mission-headline {
    color: #fff;
    font-size: 2rem;
    margin: 2rem 2rem 0.5rem;
    font-weight: 800;
}

.mission-headline .gold-text {
    color: var(--gold);
}

.mission-subheadline {
    color: #ccc;
    font-size: 1.2rem;
    margin: 0 2rem 2rem;
}

.mission-hero-box .mission-grid-container {
    padding: 0 2rem 2rem;
}

/* Light mode mission hero box */
[data-theme="light"] .mission-hero-box {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, var(--bg-card) 100%);
}

[data-theme="light"] .mission-urgency-bar {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.08) 0%, rgba(37, 211, 102, 0.05) 100%);
}

[data-theme="light"] .mission-headline {
    color: var(--text-primary);
}

[data-theme="light"] .mission-subheadline {
    color: var(--text-secondary);
}

[data-theme="light"] .urgency-label {
    color: var(--text-muted);
}

/* Mission grid mobile responsiveness */
.mission-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    text-align: left;
}

.mission-grid-item {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(0,0,0,0.15) 100%);
    padding: 1.5rem;
    border-radius: 12px;
    border-left: 4px solid var(--gold);
    backdrop-filter: blur(10px);
}

/* Light mode mission grid items */
[data-theme="light"] .mission-grid-item {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(245, 243, 240, 0.9) 100%);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

[data-theme="light"] .mission-grid-item h4 {
    color: #000;
}

[data-theme="light"] .mission-grid-item p {
    color: #000;
}

.mission-grid-item h4 {
    color: var(--gold);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.mission-grid-item p {
    color: #ccc;
    margin: 0;
    font-size: 0.95rem;
}

.mission-see-more-btn {
    display: none;
    width: 100%;
    padding: 15px 30px;
    margin-top: 1.5rem;
    background: linear-gradient(135deg, var(--gold) 0%, var(--dark-gold) 100%);
    color: var(--black);
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mission-see-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.3);
}

.mission-hidden-mobile {
    display: block;
}

@media (max-width: 768px) {
    .mission-grid-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .mission-hidden-mobile {
        display: none;
    }
    
    .mission-hidden-mobile.mission-shown {
        display: block;
    }
    
    .mission-see-more-btn {
        display: block;
    }
    
    .mission-see-more-btn.hidden {
        display: none;
    }
    
    /* Mission Hero Box Mobile */
    .mission-urgency-bar {
        gap: 1rem;
        padding: 1rem;
    }
    
    .urgency-number {
        font-size: 1.8rem;
    }
    
    .urgency-label {
        font-size: 0.7rem;
    }
    
    .urgency-divider {
        font-size: 1.2rem;
    }
    
    .mission-headline {
        font-size: 1.5rem;
        margin: 1.5rem 1rem 0.5rem;
    }
    
    .mission-subheadline {
        font-size: 1rem;
        margin: 0 1rem 1.5rem;
    }
    
    .mission-hero-box .mission-grid-container {
        padding: 0 1rem 1.5rem;
    }
    
    /* Model graphic mobile */
    .model-graphic {
        padding: 1.5rem;
    }
}

/* =============================================================================
   MOBILE PWA OPTIMIZATIONS
   ============================================================================= */

/* Touch-friendly improvements */
@media (max-width: 768px) {
    /* Larger touch targets */
    button, .btn, a {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better form inputs on mobile */
    input, select, textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 14px 16px !important;
        border-radius: 8px;
    }
    
    /* Touch-friendly buttons */
    .btn {
        padding: 16px 24px;
        font-size: 1rem;
        width: 100%;
        text-align: center;
    }
    
    .cta-buttons {
        flex-direction: column;
        gap: 0.8rem;
    }
    
    .cta-buttons .btn {
        width: 100%;
    }
    
    /* Smoother scrolling */
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Better typography for mobile */
    body {
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
    }
    
    h1 { font-size: 1.8rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }
    
    .hero h1 {
        font-size: 2rem !important;
        line-height: 1.2;
    }
    
    .section-title {
        font-size: 1.6rem !important;
        padding: 0 10px;
    }
    
    /* Better spacing on mobile */
    .container {
        padding: 0 15px;
    }
    
    section {
        padding: 40px 0;
    }
    
    /* Card improvements */
    .stat-card, .service-card, .perk-card {
        margin: 10px 0;
        padding: 1.5rem;
    }
    
    /* Modal improvements for mobile */
    .auth-modal, .modal {
        padding: 10px;
    }
    
    .auth-container, .modal-content {
        width: 100%;
        max-width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        border-radius: 15px;
        margin: 5vh auto;
    }
    
    /* Form improvements */
    .form-group {
        margin-bottom: 1rem;
    }
    
    .form-group label {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }
    
    /* Better floating elements */
    .whatsapp-float {
        bottom: 20px;
        right: 15px;
        width: 55px;
        height: 55px;
        font-size: 1.5rem;
    }
    
    /* PWA Install prompt optimization */
    .pwa-install-prompt {
        width: calc(100% - 30px);
        max-width: none;
        bottom: 15px;
        left: 15px;
        right: 15px;
        transform: none;
    }
    
}

/* Small mobile optimizations */
@media (max-width: 375px) {
    body {
        padding-top: 115px;
    }
    
    .logo-container {
        transform: scale(1.6);
        transform-origin: center center;
        margin: 5px auto 0 auto;
    }
    
    .hero h1 {
        font-size: 1.6rem !important;
    }
    
    .section-title {
        font-size: 1.4rem !important;
    }
    
    .btn {
        padding: 14px 20px;
        font-size: 0.95rem;
    }
    
    .stat-value {
        font-size: 2rem;
    }
}

/* PWA Standalone mode optimizations */
@media (display-mode: standalone) {
    /* Extra padding for iOS notch */
    body {
        padding-top: max(120px, env(safe-area-inset-top) + 80px);
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    /* Hide install prompts in standalone mode */
    .pwa-install-prompt {
        display: none !important;
    }
    
    /* Adjust header for standalone */
    header {
        top: max(40px, env(safe-area-inset-top));
    }
    
    /* Banner removed */
}

/* Landscape mobile optimization */
@media (max-width: 896px) and (orientation: landscape) {
    body {
        padding-top: 80px;
    }
    
    /* Banner removed */
    
    header {
        padding: 8px 0;
        top: 0 !important;
    }
    
    .logo-container {
        transform: scale(1.8);
        transform-origin: center center;
        margin: 12px auto 0 auto;
    }
    
    .hero {
        padding: 30px 0 40px 0;
        margin-top: 0;
    }
    
    /* Push hero content below nav line */
    .hero .container > div:first-child {
        padding-top: 40px;
    }
    
    section {
        padding: 30px 0;
    }
}

/* High contrast and accessibility */
@media (prefers-contrast: high) {
    :root {
        --gold: #FFD700;
        --dark-gray: #000000;
    }
    
    .btn, button {
        border: 2px solid currentColor;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* Dark mode support (already dark, but explicit) */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
}

/* Accessibility - Skip Link */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--gold);
    color: var(--black);
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
    padding: 8px 16px;
    z-index: 100000;
    text-decoration: none;
    font-weight: bold;
    border-radius: 0 0 5px 0;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
    clip: auto;
    overflow: visible;
}

/* Focus visible styles for better keyboard navigation */
*:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}