:root {
            --vibrant-pink: #EA2C62;
            --soft-cream: #F1EEDC;
            --deep-blue: #362FD9;
            --muted-teal: #58828B;
        }

        * { scroll-behavior: smooth; }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--soft-cream);
            color: var(--deep-blue);
            overflow-x: hidden;
        }

        .font-elsie { font-family: 'Elsie', serif; }
        .elsie-black { font-weight: 900; }
        .elsie-regular { font-weight: 400; }

        /* HERO DIAGONAL SPLIT */
        .hero-container {
            height: 100vh;
            display: flex;
            position: relative;
            overflow: hidden;
            background-color: var(--soft-cream);
        }

        .hero-left {
            background: var(--deep-blue);
            width: 60%;
            clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
            display: flex;
            align-items: center;
            padding-left: 10%;
            z-index: 20;
            position: relative;
        }

        .hero-right {
            position: absolute;
            right: 0;
            top: 0;
            width: 50%;
            height: 100%;
            z-index: 10;
            overflow: hidden;
        }

        .hero-image-parallax {
            width: 100%;
            height: 120%;
            object-fit: cover;
            position: absolute;
            top: 0;
            transition: transform 0.1s ease-out;
        }

        /* ANIMATIONS */
        @keyframes revealUp {
            from { opacity: 0; transform: translateY(80px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-reveal { animation: revealUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

        .floating-leaf {
            position: absolute;
            color: var(--muted-teal);
            animation: float 8s ease-in-out infinite;
            pointer-events: none;
            z-index: 25;
            opacity: 0.5;
        }
        @keyframes float {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            33% { transform: translate(30px, -50px) rotate(15deg); }
            66% { transform: translate(-20px, 20px) rotate(-10deg); }
        }

        /* SECTION STYLING */
        .angled-block {
            background: white;
            padding: 4rem;
            transform: rotate(-2deg);
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(54, 47, 217, 0.05);
        }
        .angled-block:hover {
            transform: rotate(0deg) scale(1.03);
            box-shadow: 0 40px 80px rgba(54, 47, 217, 0.15);
        }
        .hidden-details {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.6s ease;
            color: var(--deep-blue);
            font-size: 0.875rem;
            opacity: 0.7;
        }
        .angled-block:hover .hidden-details { max-height: 200px; margin-top: 2rem; }

        .wave-separator {
            fill: var(--muted-teal);
            transform: translateY(2px);
        }

        /* MASONRY CARDS */
        .masonry-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            grid-auto-rows: 250px;
            gap: 1.5rem;
        }
        .masonry-card { border-radius: 2rem; overflow: hidden; position: relative; transition: 0.4s ease; }
        .card-hex { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
        .card-tall { grid-row: span 2; }
        .card-square { grid-row: span 1; }

        /* NAVIGATION & CART */
        .nav-scrolled { background: var(--deep-blue); padding-top: 1rem; padding-bottom: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
        
        .cart-drawer {
            position: fixed;
            right: -450px;
            top: 0;
            width: 450px;
            height: 100vh;
            background: white;
            z-index: 500;
            transition: right 0.5s cubic-bezier(0.85, 0, 0.15, 1);
            box-shadow: -20px 0 60px rgba(0,0,0,0.1);
        }
        .cart-drawer.active { right: 0; }

        .reveal { opacity: 0; transform: translateY(40px); transition: 1s cubic-bezier(0.22, 1, 0.36, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }

        .input-underline {
            position: relative;
        }
        .input-underline::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--vibrant-pink);
            transition: 0.4s ease;
        }
        input:focus + .input-underline::after { width: 100%; }

        .testimonial-parallax {
            transition: transform 0.2s ease-out;
        }