body { 
            background-color: #FFEEB3; 
            font-family: 'Rationale', sans-serif; 
            color: #643A6B;
            scroll-behavior: smooth;
        }

        .page-content { display: none; min-height: 100vh; }
        .page-content.active { display: block; animation: fadeIn 0.8s ease-out; }

        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #FFEEB3; }
        ::-webkit-scrollbar-thumb { background: #9E6F21; border-radius: 10px; }

        /* Hero Wheel Rotation */
        .zodiac-wheel {
            animation: rotateWheel 60s linear infinite;
        }
        @keyframes rotateWheel { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

        /* Floating Stars */
        .star {
            position: absolute;
            background: #9E6F21;
            border-radius: 50%;
            opacity: 0.3;
            animation: twinkle 3s infinite ease-in-out;
        }
        @keyframes twinkle { 0%, 100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.5); } }

        /* Diagonal Split */
        .diagonal-split {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
        }

        /* Reveal on Scroll */
        .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
        .reveal.active { opacity: 1; transform: translateY(0); }

        .btn-gold { 
            background: #9E6F21; 
            color: #FFEEB3; 
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .btn-gold:hover { 
            background: #643A6B; 
            transform: scale(1.05);
            box-shadow: 0 10px 20px rgba(100, 58, 107, 0.2);
        }

        .zodiac-card {
            transition: all 0.4s ease;
            cursor: pointer;
        }
        .zodiac-card:hover {
            transform: translateY(-10px) scale(1.02);
            background-color: #9E6F21 !important;
            color: #FFEEB3 !important;
        }

        canvas#stars-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }