:root {
            --purple: #7E2553;
            --soft-pink: #FFC5E6;
            --coral: #FF5F5F;
            --gold: #F7E6AD;
        }

        body {
            font-family: 'Oranienbaum', serif;
            background-color: #FFFFFF;
            color: var(--purple);
            overflow-x: hidden;
        }

        /* Hero Section with Fixed Parallax */
        .hero-section {
            height: 100vh;
            width: 100%;
            position: relative;
            background-image: url('https://static.wixstatic.com/media/84770f_4f43f866913a4d89a671ee77a7fbdb84.jpg/v1/fill/w_1883,h_823,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/84770f_4f43f866913a4d89a671ee77a7fbdb84.jpg');
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            overflow: hidden;
        }

        .hero-overlay {
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, 0.2);
        }

        /* Hero Animations */
        .animate-left { animation: slideLeft 1.2s ease-out forwards; }
        .animate-right { animation: slideRight 1.2s ease-out forwards; }
        .animate-up { animation: fadeInUp 1.5s ease-out forwards; opacity: 0; }
        .floating-text { animation: float 4s ease-in-out infinite; }

        @keyframes slideLeft {
            from { opacity: 0; transform: translateX(-100px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes slideRight {
            from { opacity: 0; transform: translateX(100px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(40px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        /* Navigation */
        .nav-link {
            transition: color 0.3s;
            cursor: pointer;
            position: relative;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 1px;
            bottom: -2px;
            left: 0;
            background-color: var(--coral);
            transition: width 0.3s;
        }
        .nav-link:hover::after { width: 100%; }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: var(--purple); border-radius: 10px; }

        /* Page Transitions */
        .page { display: none; }
        .page.active { display: block; }

        /* Utility */
        .bg-coral { background-color: var(--coral); }
        .text-coral { color: var(--coral); }
        .border-coral { border-color: var(--coral); }
        
        .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
        .reveal.visible { opacity: 1; transform: translateY(0); }


        /* Masonry-ish Blog */
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 2rem;
        }

        .auth-container {
            max-width: 450px;
            margin: 100px auto;
            padding: 40px;
            background: var(--soft-pink);
            border-radius: 20px;
        }