body {
            background-color: #FFCE99;
            font-family: 'Comic Neue', cursive;
            color: #000;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* --- Header Dynamics --- */
        header {
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1000;
        }
        header.scrolled {
            background-color: #C68FE6 !important;
            padding: 12px 40px !important;
            box-shadow: 0 5px 0 #000;
        }

        /* --- Hero Dashboard Layout --- */
        .hero-dashboard {
            display: flex;
            height: 100vh;
            width: 100%;
            overflow: hidden;
            border-bottom: 6px solid #000;
        }

        .hero-left {
            width: 70%;
            height: 100vh;
            position: relative;
            background-image: url('https://i.pinimg.com/1200x/33/ca/96/33ca96f4a0ac34c480cee5e7df210ee1.jpg');
            background-size: cover;
            overflow: hidden;
        }

        @keyframes zoomEffect {
            from { transform: scale(1); }
            to { transform: scale(1.1); }
        }

        .hero-left::after {
            content: "";
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, transparent 60%);
            z-index: 1;
        }

        .hero-right {
            width: 30%;
            height: 100%;
            background: #fff;
            border-left: 6px solid #000;
            display: flex;
            flex-direction: column;
            z-index: 10;
        }

        .scrollable-cards {
            flex-grow: 1;
            overflow-y: auto;
            padding: 20px;
            background-color: #f3f3f3;
        }

        /* --- Custom Card Styling --- */
        .sa-card {
            border: 4px solid #000;
            background: #fff;
            margin-bottom: 25px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        .sa-card:hover {
            transform: translate(-5px, -5px);
            box-shadow: 10px 10px 0 #000;
        }

        /* --- Page Management --- */
        .page { display: none; min-height: 100vh; }
        .page.active { display: block; animation: pageFade 0.6s ease-out; }

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

        /* --- Modal Styling --- */
        #modal-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.9);
            z-index: 9999;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        .modal-inner {
            background: #fff;
            border: 6px solid #000;
            max-width: 1000px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            box-shadow: 20px 20px 0 #FF714B;
        }

        /* Hide scrollbars for a cleaner look while maintaining function */
        .scrollable-cards::-webkit-scrollbar { width: 8px; }
        .scrollable-cards::-webkit-scrollbar-thumb { background: #FF714B; border: 2px solid #000; }

        /* Responsive Mobile Hero */
        @media (max-width: 1024px) {
            .hero-dashboard { flex-direction: column; height: auto; }
            .hero-left { width: 100%; height: 60vh; }
            .hero-right { width: 100%; height: 70vh; border-left: none; border-top: 6px solid #000; }
        }