:root {
            --turquoise: #76D2DB;
            --soft-blue: #B4D3D9;
            --neutral: #F3F4F4;
            --highlight: #FFC570;
            --secondary: #2FA4D7;
            --dark: #1E293B;
        }

        body {
            font-family: 'Roboto', sans-serif;
            background-color: var(--neutral);
            color: var(--dark);
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* 🏛️ HEADER STYLES */
        header {
            transition: all 0.4s ease;
        }
        .header-scrolled {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            padding: 1rem 3rem !important;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            color: var(--dark) !important;
        }

        /* 🎨 HERO SECTION */
        .hero-bg {
            position: relative;
            height: 100vh;
            width: 100%;
            background: url('https://i.pinimg.com/1200x/33/fb/d0/33fbd0e09a5ea0470e4319072b27bde8.jpg') no-repeat center center/cover;
            overflow: hidden;
            display: flex;
            align-items: center;
        }

        .hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(70deg, rgba(0,0,0,0.6) 0%, transparent 70%);
        }

        /* Floating Animation */
        @keyframes float {
            0% { transform: translateY(0px) rotate(var(--rot)); }
            50% { transform: translateY(-15px) rotate(var(--rot)); }
            100% { transform: translateY(0px) rotate(var(--rot)); }
        }

        .floating-main-card {
            background: white;
            padding: 3rem;
            width: 450px;
            box-shadow: 0 40px 80px rgba(0,0,0,0.2);
            z-index: 10;
            border-radius: 4px;
        }

        .float-sub-card {
            position: absolute;
            width: 240px;
            background: white;
            padding: 1rem;
            border-radius: 8px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
            animation: float 6s ease-in-out infinite;
            z-index: 15;
            cursor: pointer;
            transition: 0.3s;
        }
        .float-sub-card:hover { transform: scale(1.05) !important; z-index: 20; }

        .shape-blob {
            position: absolute;
            width: 400px;
            height: 400px;
            background: var(--turquoise);
            filter: blur(80px);
            border-radius: 50%;
            opacity: 0.4;
            animation: moveBlob 20s infinite alternate;
        }

        @keyframes moveBlob {
            from { transform: translate(-10%, -10%); }
            to { transform: translate(20%, 20%); }
        }

        /* 📚 EDITORIAL GRID */
        .editorial-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 2rem;
        }
        .grid-item { transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
        .grid-item:hover { transform: translateY(-10px) rotate(0deg) !important; z-index: 10; }

        /* 🎓 PARALLAX SECTION */
        .parallax-container {
            display: flex;
            background: var(--soft-blue);
            min-height: 120vh;
        }
        .parallax-content {
            flex: 1;
            padding: 10rem 5%;
            position: sticky;
            top: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .parallax-images {
            flex: 1;
            padding: 10rem 5%;
        }

        /* 💡 HORIZONTAL SCROLL */
        .h-scroll-wrapper {
            display: flex;
            overflow-x: auto;
            gap: 2rem;
            padding: 2rem 0 4rem 0;
            scrollbar-width: none;
        }
        .h-scroll-wrapper::-webkit-scrollbar { display: none; }
        .h-card {
            flex: 0 0 320px;
            background: white;
            padding: 2.5rem;
            border-radius: 24px;
            transition: 0.3s;
        }
        .h-card:hover { transform: translateY(-10px); background: var(--secondary); color: white; }

        /* 🔍 SIDEBAR QUICK VIEW */
        #quickview-sidebar {
            position: fixed;
            top: 0;
            right: -100%;
            width: 600px;
            height: 100vh;
            background: white;
            z-index: 2000;
            transition: 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            box-shadow: -20px 0 50px rgba(0,0,0,0.1);
            padding: 4rem;
            overflow-y: auto;
        }
        #quickview-sidebar.open { right: 0; }
        .sidebar-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.4);
            z-index: 1999;
            opacity: 0;
            pointer-events: none;
            transition: 0.4s;
        }
        .sidebar-overlay.active { opacity: 1; pointer-events: auto; }

        /* CTA Underline Animation */
        .cta-btn::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 3px;
            background: white;
            transition: 0.3s;
        }
        .cta-btn:hover::after { width: 100%; }

        /* Page Transitions */
        .view-section { display: none; }
        .view-section.active { display: block; animation: pageFadeIn 0.8s ease; }
        @keyframes pageFadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }