:root {
            --sky-blue: #89D4FF;
            --beige: #E8E2DB;
            --mint: #CBF3BB;
            --margin-lr: 3rem;
            --margin-top: 2rem;
        }

        body { 
            background-color: #ffffff; /* Visible behind content */
            color: #000000;
            font-family: 'Roboto Condensed', sans-serif;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }

        /* Global Layout Rule: Strict Margins */
        .canvas-container {
            margin-top: var(--margin-top);
            margin-left: var(--margin-lr);
            margin-right: var(--margin-lr);
            position: relative;
        }

        /* Sticky Header Logic */
        header {
            position: sticky;
            top: var(--margin-top);
            z-index: 1000;
            background: white;
            margin-left: var(--margin-lr);
            margin-right: var(--margin-lr);
            border-bottom: 1px solid rgba(0,0,0,0.05);
            transition: all 0.4s ease;
        }
        header.scrolled {
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            transform: translateY(-5px);
        }

        /* Hero Split Design */
        .hero-left {
            border-bottom-right-radius: 80px;
        }
        .hero-image-overlap {
            margin-left: -10%;
            z-index: 20;
        }

        /* Section 2: Half-in Half-out Image */
        .overflow-card-image {
            position: absolute;
            bottom: -5rem;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 350px;
            object-fit: cover;
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
            transition: transform 0.6s ease;
        }
        .overflow-card:hover .overflow-card-image {
            transform: translateX(-50%) translateY(-10px);
        }

        /* Animations */
        .fade-up {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }
        .fade-up.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Custom Scrollbar for Zodiac Strip */
        .zodiac-strip::-webkit-scrollbar { display: none; }
        .zodiac-card {
            min-width: 200px;
            transition: all 0.3s ease;
        }
        .zodiac-card:hover {
            background: var(--sky-blue);
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(137, 212, 255, 0.4);
        }

        /* Page Management */
        .page-content { display: none; }
        .page-content.active { display: block; }

        /* Smooth Floating for Cards */
        .float-hover { transition: transform 0.4s ease, box-shadow 0.4s ease; }
        .float-hover:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); }