:root {
            --primary-blue: #003d80;
            --accent-gold: #ffc107;
            --section-1: #ffffff; /* About */
            --section-2: #f8f9fa; /* Features */
            --section-3: #f1f4f8; /* Services */
            --section-4: #e9ecef; /* How it Works */
            --section-5: #fffdf5; /* FAQs */
            --section-6: #f0f2f5; /* Contact */
            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        body { font-family: 'Inter', sans-serif; color: #333; }

        /* --- 1. HEADER (Popup Design) --- */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1050;
            transition: var(--transition);
            background: white;
            padding: 10px 0;
        }

        header.scrolled {
            top: 15px;
            left: 5%;
            right: 5%;
            width: 90%;
            border-radius: 50px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            padding: 5px 0;
        }

        .btn-call {
            background-color: var(--primary-blue);
            color: white !important;
            border-radius: 25px;
            padding: 10px 24px;
            font-weight: 600;
            white-space: nowrap; /* Ensures single line on desktop */
            text-decoration: none;
            transition: var(--transition);
        }
        .btn-call:hover { background-color: #002a5a; transform: scale(1.05); }

        /* --- 2. HERO SECTION --- */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.5)), 
                        url('../assets/img/hero-img.png') center/cover;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }

        /* --- 3. SECTION SPACING & COLORS --- */
        section { padding: 100px 0; }
        .bg-about { background-color: var(--section-1); }
        .bg-features { background-color: var(--section-2); }
        .bg-services { background-color: var(--section-3); }
        .bg-steps { background-color: var(--section-4); }
        .bg-faq { background-color: var(--section-5); }
        .bg-contact { background-color: var(--section-6); }

        /* --- 4. CARDS & SHADOWS --- */
        /* Features: Shadow + Lift Hover */
        .feature-card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.08);
            transition: var(--transition);
        }
        .feature-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 15px 35px rgba(0,30,80,0.2);
            background: var(--primary-blue);
            color: white;
        }

        /* Services: Shadow + Zoom/Icon Spin */
        .service-card {
            border: none;
            border-radius: 20px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.06);
            overflow: hidden;
            transition: var(--transition);
        }
        .service-card:hover {
            box-shadow: 0 12px 30px rgba(0,0,0,0.12);
        }
        .service-card:hover .service-icon i {
            transform: rotateY(360deg) scale(1.2);
            color: var(--accent-gold);
        }
        .service-icon i { font-size: 3rem; color: var(--primary-blue); transition: 0.6s; }

        /* How it Works: Border Bottom Effect */
        .step-card {
            border: none;
            border-bottom: 5px solid #ddd;
            transition: var(--transition);
        }
        .step-card:hover {
            border-bottom-color: var(--accent-gold);
            background-color: #fff;
        }

        /* --- 8. FORM WIDTH --- */
        .custom-form-container {
            width: 80%; /* Fixed 80% width for the form section */
            margin: 0 auto;
        }

        @media (max-width: 991px) {
            .custom-form-container { width: 100%; }
        }

        /* Mobile specific header logic */
        @media (max-width: 991px) {
            .navbar-brand { order: 1; }
            .mobile-call-wrapper { order: 2; }
            .navbar-toggler { order: 3; }
        }