:root {
            --teal: #215E61;
            --white: #FFFFFF;
        }

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

        .font-caps {
            font-family: 'Six Caps', sans-serif;
            text-transform: uppercase;
            line-height: 0.8;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 5px; }
        ::-webkit-scrollbar-track { background: var(--white); }
        ::-webkit-scrollbar-thumb { background: var(--teal); }

        /* Multipage Navigation Logic */
        .page-view { display: none; min-height: 100vh; }
        .page-view.active { display: block; animation: fadeIn 0.8s ease-out; }

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

        /* Experimental Layout Elements */
        .vertical-text {
            writing-mode: vertical-rl;
            text-orientation: mixed;
        }

        .hero-title-reveal span {
            display: block;
            overflow: hidden;
        }

        .hero-title-reveal i {
            display: block;
            animation: slideUp 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
            transform: translateY(100%);
        }

        @keyframes slideUp { to { transform: translateY(0); } }

        .broken-grid-item:nth-child(even) { margin-top: 4rem; }
        
        .floating-card {
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
            box-shadow: 0 10px 30px rgba(33, 94, 97, 0.05);
        }

        .floating-card:hover {
            transform: translateY(-20px) scale(1.02);
            box-shadow: 0 20px 50px rgba(33, 94, 97, 0.15);
        }

        /* Auth UI */
        .auth-overlay {
            backdrop-filter: blur(20px);
            background: rgba(255, 255, 255, 0.8);
        }

        /* Glassmorphism Navigation */
        nav.sticky-active {
            background: rgba(255, 255, 255, 0.95);
            padding-top: 1rem !important;
            padding-bottom: 1rem !important;
            border-bottom: 1px solid rgba(33, 94, 97, 0.1);
        }

        .filter-btn.active {
            border-bottom: 2px solid var(--teal);
            opacity: 1;
        }