:root {
            --primary: #2FA4D7;
            --secondary: #87B6BC;
            --bg-neutral: #F5E9D8;
            --text-dark: #1a1a1a;
            --footer-bg: #213C51;
        }

        body {
            font-family: 'Nunito', sans-serif;
            background-color: var(--bg-neutral);
            color: var(--text-dark);
            scroll-behavior: smooth;
        }

        .h-bold { font-weight: 700; }
        .h-extra { font-weight: 800; letter-spacing: -0.03em; }

        /* Smooth Section Transitions */
        .view-section { display: none; min-height: 80vh; }
        .view-section.active { display: block; animation: slideUp 0.6s cubic-bezier(0.23, 1, 0.32, 1); }
        @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

        /* Custom UI */
        .btn-primary {
            background-color: var(--primary);
            color: white;
            font-weight: 800;
            padding: 0.8rem 2rem;
            border-radius: 6px;
            transition: all 0.3s ease;
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 0.05em;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(47, 164, 215, 0.4);
            filter: brightness(1.1);
        }

        .card-dynamic {
            background: white;
            border-radius: 16px;
            border: 1px solid rgba(0,0,0,0.04);
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        .card-dynamic:hover {
            transform: translateY(-8px);
            box-shadow: 0 40px 80px -20px rgba(33, 60, 81, 0.15);
        }

        /* Hero Animation Background */
        .hero-bg-anim {
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 50% 50%, rgba(47, 164, 215, 0.08) 0%, transparent 70%);
            z-index: -1;
        }

        .parallax-wrapper {
            perspective: 1000px;
        }

        /* Sticky Header */
        header.scrolled {
            backdrop-filter: blur(12px);
            box-shadow: 0 4px 30px rgba(0,0,0,0.03);
            padding-top: 1rem;
            padding-bottom: 1rem;
        }

        /* Modal Blur */
        .modal-blur { background: rgba(33, 60, 81, 0.6); backdrop-filter: blur(8px); }
        
        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--bg-neutral); }
        ::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: 10px; }
/* Mobile Menu Slide */
#mobile-menu {
    display: none;
    flex-direction: column;
    animation: slideDown 0.3s ease forwards;
}
#mobile-menu.show {
    display: flex;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Fixed header height and logo */
header#navbar { height: 100px; }

/* Hamburger animation */
#menu-toggle span { transition: all 0.3s ease; }
#menu-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
#menu-toggle.open span:nth-child(2) { opacity: 0; }
#menu-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile menu slide */
#mobile-menu { display: none; flex-direction: column; animation: slideDown 0.3s ease forwards; }
#mobile-menu.show { display: flex; }

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Auth buttons */
#auth-zone button { font-size: 0.75rem; }