:root {
            --ocean-blue: #1C6E8C;
            --sea-foam: #9AD1D4;
            --sand-beige: #F4EBD0;
            --driftwood: #7A6C5D;
            --white: #FFFFFF;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background-color: var(--white);
            color: #333;
            scroll-behavior: smooth;
        }

        h1, h2, h3, h4, .serif {
            font-family: 'Cormorant Garamond', serif;
            font-weight: 600;
        }

        /* Multipage Display */
        .page { display: none; opacity: 0; transition: opacity 0.5s ease; }
        .page.active { display: block; opacity: 1; }

        /* Header Transitions */
        header.scrolled {
            background-color: var(--sand-beige);
            padding-top: 1rem;
            padding-bottom: 1rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            color: var(--driftwood);
        }

        /* Hero Background Animation */
        @keyframes panBG {
            from { transform: scale(1) translate(0, 0); }
            to { transform: scale(1.1) translate(-2%, -2%); }
        }
        .hero-bg {
            animation: panBG 20s infinite alternate linear;
        }

        /* Wave Separators */
        .wave-divider {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
            line-height: 0;
            transform: rotate(180deg);
        }
        .wave-divider svg {
            position: relative;
            display: block;
            width: calc(154% + 1.3px);
            height: 100px;
            animation: waveMove 10s infinite alternate ease-in-out;
        }
        @keyframes waveMove {
            from { transform: translateX(0); }
            to { transform: translateX(-10%); }
        }

        /* Destination Cards */
        .dest-card { transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
        .dest-card:hover { transform: scale(1.02); }

        /* Experience Tiles */
        .beach-tile {
            transition: all 0.4s ease;
            cursor: pointer;
        }
        .beach-tile:hover {
            background-color: var(--white);
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.05);
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--sand-beige); }
        ::-webkit-scrollbar-thumb { background: var(--ocean-blue); border-radius: 10px; }

        /* Modal styling */
        .modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(15, 62, 79, 0.9);
            backdrop-filter: blur(8px);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        .modal-overlay.active { display: flex; }