body { 
            background-color: #FDF4F5; 
            scroll-behavior: smooth;
            overflow-x: hidden;
        }

        /* --- Circular Navigation --- */
        .nav-circle {
            width: 150px;
            height: 50px;
            border-radius: 50%;
            background-color: #EAFF81;
            color: #438A70;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 0.1em;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            box-shadow: 0 10px 20px rgba(234, 255, 129, 0.2);
        }
        .nav-circle:hover {
            transform: scale(1.1) translateY(-5px);
            box-shadow: 0 20px 30px rgba(234, 255, 129, 0.4);
            filter: brightness(1.05);
        }

        /* --- Layered Hero Animations --- */
        @keyframes float {
            0%, 100% { transform: translate(0, 0) rotate(-2deg); }
            50% { transform: translate(10px, -20px) rotate(2deg); }
        }
        .hero-card-base {
            background-color: #E4BAD4;
            right:10rem;
            bottom:10rem;
        }
        .hero-card-img {
            box-shadow: 30px 30px 60px rgba(0,0,0,0.1);
        }

        /* --- Story Path --- */
        .story-path {
            position: relative;
        }
        .story-path::before {
            content: '';
            position: absolute;
            top: 0; left: 50%;
            width: 2px; height: 100%;
            background: linear-gradient(to bottom, transparent, #438A70, transparent);
            transform: translateX(-50%);
            z-index: 0;
        }

        /* --- Page Transitions --- */
        .page-view { display: none; opacity: 0; transform: translateY(20px); transition: all 0.5s ease; }
        .page-view.active { display: block; opacity: 1; transform: translateY(0); }

        /* --- Custom Scrollbar --- */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: #438A70; border-radius: 10px; }

        /* Card Hover */
        .card-overlap:hover {
            transform: translateY(-10px) rotate(1deg);
            z-index: 50;
        }