:root {
            --primary-orange: #ff8c00;
            --deep-blue: #0a235c;
            --soft-gray: #f4f7f6;
            --warm-white: #fdfbf7;
            --ice-blue: #eef2f3;
        }

        body { font-family: 'Inter', sans-serif; scroll-behavior: smooth; }

        /* --- 1. Header Logic --- */
        header { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1050; width: 100%; }
        .navbar-custom { background: #fff; padding: 15px 0; border-bottom: 1px solid #eee; }

        /* Scrolled Popup State */
        header.scrolled { padding: 10px 0; }
        header.scrolled .navbar-custom {
            margin: 10px 5%;
            width: 90%;
            border-radius: 50px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            border: none;
        }

        .btn-call {
            background-color: var(--primary-orange);
            color: white !important;
            border-radius: 30px;
            padding: 10px 24px;
            font-weight: 700;
            white-space: nowrap; /* Forces one single line on desktop */
            display: inline-flex;
            align-items: center;
            transition: 0.3s;
            text-decoration: none;
        }
        .btn-call:hover { transform: scale(1.05); background: #e67e00; }

        /* --- 2. Hero Section --- */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(10, 35, 92, 0.7), rgba(10, 35, 92, 0.7)), 
                        url('https://images.unsplash.com/photo-1513828583688-c52646db42da?auto=format&fit=crop&q=80&w=2070') center/cover;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-align: center;
        }

        /* --- Section Backgrounds --- */
        #about { background-color: #ffffff; }
        #features { background-color: var(--soft-gray); }
        #services { background-color: var(--ice-blue); }
        #how-it-works { background-color: #ffffff; }
        #faq { background-color: var(--warm-white); }
        #contact { background-color: #ffffff; }

        /* --- Card Hover Effects & Shadows --- */
        
        /* Features: Shadow + Lift */
        .feature-card {
            border: none; border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.05);
            transition: 0.4s ease;
        }
        .feature-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.12);
        }

        /* Services: Border Glow + Icon Slide */
        .service-card {
            border: none; border-radius: 20px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.05);
            transition: 0.4s ease;
            background: white;
        }
        .service-card:hover {
            box-shadow: 0 0 0 3px var(--primary-orange);
            background: var(--deep-blue);
            color: white;
        }
        .service-card i { transition: 0.4s; }
        .service-card:hover i { transform: translateX(10px); color: white !important; }

        /* How it Works: Background Fill */
        .step-card {
            border: 1px solid #ddd;
            transition: 0.3s;
            position: relative;
            z-index: 1;
        }
        .step-card:hover {
            color: white;
            border-color: var(--primary-orange);
        }
        .step-card::after {
            content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%;
            background: var(--primary-orange); transition: 0.4s; z-index: -1; border-radius: 4px;
        }
        .step-card:hover::after { width: 100%; }

        /* --- 8. Contact Form (80% Width) --- */
        .contact-container {
            max-width: 80%;
            margin: auto;
        }

        section { padding: 100px 0; }
        .section-title { font-weight: 800; margin-bottom: 60px; text-align: center; }

        /* Mobile Adjustments */
        @media (max-width: 991px) {
            .navbar-brand { font-size: 1.2rem; }
            .btn-call { padding: 8px 15px; font-size: 0.8rem; }
            .contact-container { max-width: 95%; }
        }