:root {
            --ocean-blue: #4A70A9;
            --soft-sand: #EFECE3;
            --white: #FFFFFF;
        }

        body {
            font-family: 'Archivo', sans-serif;
            background-color: var(--white);
            color: #1a2a44;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        .archivo-bold { font-weight: 700; }
        .archivo-regular { font-weight: 400; }

        /* Color Utility overrides */
        .bg-ocean { background-color: var(--ocean-blue); }
        .bg-sand { background-color: var(--soft-sand); }
        .text-ocean { color: var(--ocean-blue); }
        .border-ocean { border-color: var(--ocean-blue); }

        /* Navigation Transitions */
        header.scrolled {
            background-color: var(--ocean-blue) !important;
            color: white !important;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            padding: 0.75rem 0;
        }
        header.scrolled .nav-link { color: white; }
        header.scrolled .logo-img { filter: brightness(0) invert(1); }

        /* Logo Constraint Logic */
        .logo-box {
            height: 40px; /* Fixed container height */
            display: flex;
            align-items: center;
        }
        .logo-img {
            height: 200px; /* Actual logo size */
            width: auto;
            object-fit: contain;
            transition: all 0.3s ease;
        }

        /* Page Management */
        .page-view { display: none; }
        .page-view.active { display: block; animation: fadeIn 0.6s ease forwards; }

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

        /* Dashboard & Cards */
        .dash-panel {
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        .dash-panel:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 50px -12px rgba(74, 112, 169, 0.2);
        }

        /* Animations */
        .float-anim { animation: float 5s ease-in-out infinite; }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }

        /* Custom Scrollbar for horizontal species cards */
        .hide-scroll::-webkit-scrollbar { display: none; }
        .hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }

        /* Hero Image Overlay */
        .hero-section {
            background: linear-gradient(rgba(74, 112, 169, 0.8), rgba(74, 112, 169, 0.95)), url('https://images.unsplash.com/photo-1524704654690-b56c05c78a00?q=80&w=2000');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }

        .modal-blur {
            backdrop-filter: blur(10px);
            background: rgba(26, 42, 68, 0.7);
        }