        :root {
            --primary: #FF6B6B;
            --secondary: #1C1C1C;
            --accent1: #FFD93D;
            --accent2: #4ECDC4;
            --bg: #FFFFFF;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg);
            color: var(--secondary);
            scroll-behavior: smooth;
        }

        .font-serif { font-family: 'Playfair Display', serif; }

        /* Typography Presets */
        h1, h2, h3 { letter-spacing: -0.02em; font-weight: 900; }
        .btn-premium {
            letter-spacing: 0.15em;
            text-transform: uppercase;
            font-weight: 700;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        /* Hero Animation Background */
        .hero-gradient-bg {
            background: linear-gradient(45deg, #ffffff, #fef2f2, #fffbeb);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* Page Transitions */
        .page-content { display: none; opacity: 0; transform: translateY(20px); transition: all 0.6s ease; }
        .page-content.active { display: block; opacity: 1; transform: translateY(0); }

        /* Custom UI Elements */
        .card-lift { transition: all 0.4s ease; border-radius: 24px; overflow: hidden; }
        .card-lift:hover { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(0,0,0,0.1); }
        
        .diagonal-sep { clip-path: polygon(0 0, 100% 0, 100% 92%, 0% 100%); }
        
        .marquee { overflow: hidden; white-space: nowrap; }
        .marquee-inner { display: inline-block; animation: marquee 40s linear infinite; }
        @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

        .image-float { animation: float 6s ease-in-out infinite; }
        @keyframes float { 0%, 100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(-20px) rotate(5deg); } }

        /* Scroll Progress */
        .scroll-reveal { opacity: 0; transform: translateY(30px); transition: 0.8s all ease; }
        .scroll-reveal.visible { opacity: 1; transform: translateY(0); }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: #FF6B6B; border-radius: 10px; }
