/* --- 1. Custom Colors and Fonts --- */
        :root {
            --color-blue: #3BA8FF;
            --color-coral: #FF7F50;
            --color-charcoal: #222222;
            --color-silver: #DDDDDD;
            --bg-light: #F9F9F9;
        }

        body {
            font-family: 'Inter', sans-serif;
            color: var(--color-charcoal);
            background: linear-gradient(180deg, #FFFFFF 0%, #F0F0F0 100%);
            background-attachment: fixed;
            overflow-x: hidden;
        }
        h1, h2, h3 { font-family: 'Montserrat', sans-serif; }
        .text-tech { font-family: 'Roboto Mono', monospace; }
        .text-blue-accent { color: var(--color-blue); }
        .bg-coral-accent { background-color: var(--color-coral); }
        .border-silver { border-color: var(--color-silver); }

        /* --- 2. Glassmorphism and Hover Effects --- */
        .card-glass {
            background-color: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        .card-glass:hover {
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
            transform: translateY(-8px);
        }

        /* --- 3. Scroll Progress Bar --- */
        #progress-bar {
            height: 3px;
            background: var(--color-blue);
            width: 0%;
            transition: width 0.1s;
        }

        /* --- 4. Scroll Fade Animation --- */
        .scroll-fade {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .scroll-fade.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- 5. Hero Section Animations (Sliding Panels) --- */
        @keyframes slideInFromLeft {
            0% { transform: translateX(-100%); opacity: 0; }
            100% { transform: translateX(0); opacity: 1; }
        }
        @keyframes slideInFromRight {
            0% { transform: translateX(100%); opacity: 0; }
            100% { transform: translateX(0); opacity: 1; }
        }

        #image-panel-left {
            animation: slideInFromLeft 1.5s ease-out forwards;
            background-image: url('https://i.pinimg.com/736x/c0/b9/bf/c0b9bf9d5f9fa040d3a20f23931b2bd5.jpg');
            background-size: cover;
            background-position: center;
        }
        #image-panel-right {
            animation: slideInFromRight 1.5s ease-out forwards;
            background-image: url('https://i.pinimg.com/736x/c9/37/ff/c937ff74440244ae2734f54f7435b98f.jpg');
            background-size: cover;
            background-position: center;
        }
        #hero-carousel-content {
            opacity: 0;
            animation: fadeIn 1s ease-out 1s forwards;
        }
        @keyframes fadeIn {
            to { opacity: 1; }
        }

        /* --- 6. Horizontal Scroll/Carousel Style --- */
        .horizontal-scroll {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            padding-bottom: 1rem;
            -webkit-overflow-scrolling: touch;
        }
        .scroll-item {
            flex: 0 0 auto;
            scroll-snap-align: start;
            margin-right: 1.5rem;
            width: 85%; /* Mobile width */
        }
        @media (min-width: 768px) {
            .scroll-item {
                width: 300px; /* Desktop fixed width */
            }
        }