:root {
            --navy: #1b3927;
            --sky: #CFECF3;
            --accent: #C3CC9B;
        }

        body {
            font-family: 'Manrope', sans-serif;
            color: var(--navy);
            background-color: #fff;
            overflow-x: hidden;
        }

        /* Smooth scroll and custom scrollbar */
        html { scroll-behavior: smooth; }
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--sky); }
        ::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 10px; }

        .navy-bg { background-color: var(--navy); }
        .sky-bg { background-color: var(--sky); }
        .accent-bg { background-color: var(--accent); }
        .accent-text { color: var(--accent); }

        .btn-pill {
            background-color: var(--accent);
            color: var(--navy);
            padding: 0.8rem 2rem;
            border-radius: 50px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: inline-block;
            font-size: 0.85rem;
        }

        .btn-pill:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(195, 204, 155, 0.4);
            background-color: #d1dab3;
        }

        .nav-scrolled {
            background: var(--navy) !important;
            box-shadow: 0 4px 30px rgba(0,0,0,0.1);
            padding: 1rem 0 !important;
        }

        .page-content { display: none; }
        .page-content.active { display: block; animation: fadeIn 0.6s ease-out; }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Hero Animation */
        .hero-parallax {
            background-image: url('https://i1-c.pinimg.com/736x/2d/56/f9/2d56f9225e71981996d5a242fc84d96f.jpg');
            background-attachment: fixed;
            background-position: center;
            background-size: cover;
        }

        .floating-card {
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        .step-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--navy);
            color: white;
            font-weight: bold;
            position: relative;
            z-index: 2;
        }

        .step-line {
            position: absolute;
            left: 20px;
            top: 40px;
            bottom: -40px;
            width: 2px;
            background: var(--accent);
            z-index: 1;
        }

        .card-hover:hover {
            box-shadow: 0 20px 40px rgba(195, 204, 155, 0.25);
            border-color: var(--accent);
        }

        /* Mobile Menu */
        #mobile-menu {
            transition: transform 0.4s ease-in-out;
            transform: translateX(100%);
        }
        #mobile-menu.open {
            transform: translateX(0);
        }

        input[type="range"] {
            accent-color: var(--navy);
        }