:root { scroll-behavior: smooth; }
        body { 
            background-color: #FFFDEB; 
            color: #3E2C23; 
            font-family: 'Raleway', sans-serif;
            overflow-x: hidden;
            margin: 0;
            padding: 0;
        }

        /* Editorial Typography */
        .h-xl { font-weight: 900; line-height: 0.9; letter-spacing: -0.05em; }
        .text-justify-custom { text-align: justify; text-justify: inter-word; }

        /* Page System */
        .page-container { display: none; opacity: 0; transform: translateY(10px); transition: all 0.6s ease; }
        .page-container.active { display: block; opacity: 1; transform: translateY(0); }

        /* Scroll Animations */
        .reveal { opacity: 0; transform: translateY(30px); transition: all 1s cubic-bezier(0.22, 1, 0.36, 1); }
        .reveal.visible { opacity: 1; transform: translateY(0); }

        /* Hero Image Parallax Layering */
        .hero-img-container {
            margin-top: -8rem;
            z-index: 10;
            position: relative;
        }

        /* Step Line Animation */
        #scroll-line {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            transition: stroke-dashoffset 0.1s linear;
        }

        /* Card Hover Tilt */
        .tilt-card { transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s ease; }
        .tilt-card:hover { transform: rotateX(2deg) rotateY(-2deg) translateY(-10px); box-shadow: 20px 20px 60px rgba(62, 44, 35, 0.1); }

        /* Custom Modal */
        .modal { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(255, 253, 235, 0.98); overflow-y: auto; }
        .modal.active { display: block; }

        /* Ripple Animation */
        .ripple { position: relative; overflow: hidden; }
        .ripple:after {
            content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0;
            pointer-events: none; background-image: radial-gradient(circle, #FFFDEB 10%, transparent 10.01%);
            background-repeat: no-repeat; background-position: 50%; transform: scale(10, 10);
            opacity: 0; transition: transform .5s, opacity 1s;
        }
        .ripple:active:after { transform: scale(0, 0); opacity: .3; transition: 0s; }

        /* Hidden Header - Non-sticky */
        header { position: absolute; width: 100%; top: 0; left: 0; z-index: 100; transition: opacity 0.3s ease; }