/* CAMMIO Industries - Core Stylesheet */
        body { font-family: 'Fira Code', monospace; }
        .pixel-font { font-family: 'Press Start 2P', system-ui; }
        
        .scanline {
            width: 100%;
            height: 100px;
            z-index: 9999;
            position: fixed;
            pointer-events: none;
            opacity: 0.1;
            animation: scanline 8s linear infinite;
        }
        
        /* Light/Dark variations for the scanline */
        html:not(.dark) .scanline {
            background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(22,163,74,0.05) 50%, rgba(0,0,0,0) 100%);
        }
        html.dark .scanline {
            background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(34,197,94,0.1) 50%, rgba(0,0,0,0) 100%);
        }

        @keyframes scanline {
            0% { top: -100px; }
            100% { top: 100vh; }
        }

        .sky-gradient-layer {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -8;
            pointer-events: none;
            transition: opacity 0.5s ease;
        }

        html.dark .sky-gradient-layer { opacity: 0.95; }
        html:not(.dark) .sky-gradient-layer { opacity: 0.55; }

        html:not(.dark) .hero-text-glow {
            text-shadow: 0 0 15px rgba(255, 255, 255, 1), 0 0 25px rgba(255, 255, 255, 0.8);
        }

        .sky-gradient-layer > div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
        }

        .sky-night {
            background: linear-gradient(to top, #1e3a8a 0%, #312e81 33%, transparent 66%);
            animation: fadeNight 120s linear infinite;
        }
        .sky-sunrise {
            background: linear-gradient(to top, #f97316 0%, #db2777 33%, transparent 66%);
            animation: fadeSunrise 120s linear infinite;
        }
        .sky-day {
            background: linear-gradient(to top, #0ea5e9 0%, #1d4ed8 33%, transparent 66%);
            animation: fadeDay 120s linear infinite;
        }
        .sky-sunset {
            background: linear-gradient(to top, #e11d48 0%, #6b21a8 33%, transparent 66%);
            animation: fadeSunset 120s linear infinite;
        }

        @keyframes fadeNight {
            0%, 10% { opacity: 1; }
            25%, 75% { opacity: 0; }
            90%, 100% { opacity: 1; }
        }
        @keyframes fadeSunrise {
            0%, 10% { opacity: 0; }
            25% { opacity: 1; }
            40%, 100% { opacity: 0; }
        }
        @keyframes fadeDay {
            0%, 35% { opacity: 0; }
            50% { opacity: 1; }
            65%, 100% { opacity: 0; }
        }
        @keyframes fadeSunset {
            0%, 60% { opacity: 0; }
            75% { opacity: 1; }
            90%, 100% { opacity: 0; }
        }

        .cyber-button {
            position: relative;
            overflow: hidden;
            transition: transform 0.1s steps(4), box-shadow 0.1s steps(4), background-color 0.2s ease;
        }

        .cyber-button:hover {
            transform: translate(0px, -4px);
        }

        .grecaptcha-badge {
            display:none !important;
        }

        .cyber-button-primary:hover {
            box-shadow: 0px 4px 0px rgba(20, 83, 45, 1), 0 0 20px rgba(34, 197, 94, 0.6);
        }
        html.dark .cyber-button-primary:hover {
            box-shadow: 0px 4px 0px rgba(16, 185, 129, 0.4), 0 0 20px rgba(34, 197, 94, 0.4);
        }

        .cyber-button-secondary:hover {
            box-shadow: 0px 4px 0px rgba(22, 163, 74, 0.4), 0 0 15px rgba(22, 163, 74, 0.2);
        }
        html.dark .cyber-button-secondary:hover {
            box-shadow: 0px 4px 0px rgba(34, 197, 94, 0.4), 0 0 15px rgba(34, 197, 94, 0.2);
        }

        .cyber-button:active {
            transform: translate(0px, 0px);
            box-shadow: 0px 0px 0px transparent, 0 0 10px rgba(34, 197, 94, 0.5);
            transition: transform 0.05s, box-shadow 0.05s;
        }

        .cyber-button::after {
            content: '';
            position: absolute;
            top: 0;
            left: -150%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.2) 80%, transparent);
            transform: skewX(-20deg);
        }
        
        .cyber-button:hover::after {
            animation: cyberScan 0.4s steps(6) forwards;
        }

        @keyframes cyberScan {
            0% { left: -150%; }
            100% { left: 150%; }
        }

        /* Top Navigation Text Shimmer */
        .nav-link,
        .nav-link-mobile {
            position: relative;
            display: inline-block;
            transition: color 0.2s ease, text-shadow 0.2s ease, filter 0.2s ease;
        }

        html.dark .nav-link:hover,
        html.dark .nav-link-mobile:hover {
            background: linear-gradient(
                115deg,
                #22c55e 0%,
                #22c55e 35%,
                #ffffff 50%,
                #22c55e 65%,
                #22c55e 100%
            );
            background-size: 250% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: navTextShimmer 0.45s steps(7) forwards;
            filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.6));
        }

        html:not(.dark) .nav-link:hover,
        html:not(.dark) .nav-link-mobile:hover {
            background: linear-gradient(
                115deg,
                #16a34a 0%,
                #16a34a 35%,
                #ffffff 50%,
                #16a34a 65%,
                #16a34a 100%
            );
            background-size: 250% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: navTextShimmer 0.45s steps(7) forwards;
            filter: drop-shadow(0 0 4px rgba(22, 163, 74, 0.4));
        }

        @keyframes navTextShimmer {
            0% {
                background-position: 150% 0;
            }
            100% {
                background-position: -50% 0;
            }
        }

        .pixel-collapse-wrapper {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.3s steps(5), opacity 0.2s steps(5), margin 0.3s steps(5);
        }
        
        .pixel-collapse-wrapper.is-open {
            max-height: 600px;
            opacity: 1;
            margin-top: 1.5rem;
        }

        .progress-bar-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: transparent;
            opacity: 0;
            transition: opacity 0.3s ease;
            overflow: hidden;
            border-radius: inherit;
        }
        .cyber-button.is-loading .progress-bar-container {
            opacity: 1;
        }
        .progress-bar-fill {
            height: 100%;
            width: 0%;
            background: #16a34a; /* Tailwind green-600 */
            position: relative;
            transition: width 0.4s ease;
        }
        html.dark .progress-bar-fill {
            background: #22c55e; /* Tailwind green-500 */
        }
        .progress-bar-fizz {
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            width: 40px;
            background: repeating-linear-gradient(
                45deg,
                transparent,
                transparent 4px,
                rgba(255, 255, 255, 0.4) 4px,
                rgba(255, 255, 255, 0.4) 8px
            );
            animation: fizz 0.5s linear infinite;
        }
        @keyframes fizz {
            0% { background-position: 0 0; }
            100% { background-position: 28px 0; }
        }

        .entity-toggle input[type="radio"]:checked + div {
            background-color: #16a34a;
            color: white;
            border-color: #16a34a;
        }
        html.dark .entity-toggle input[type="radio"]:checked + div {
            background-color: #22c55e;
            color: #030712;
            border-color: #22c55e;
        }

        .pixel-divider {
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M4 0h1v1H4z M2 1h1v1H2z M6 1h1v1H6z M1 2h1v1H1z M4 2h1v1H4z M7 2h1v1H7z M1 3h1v1H1z M3 3h1v1H3z M5 3h1v1H5z M7 3h1v1H7z M0 4h1v1H0z M2 4h2v1H2z M5 4h1v1H5z M7 4h1v1H7z M0 5h2v1H0z M3 5h2v1H3z M6 5h2v1H6z M0 6h3v1H0z M4 6h3v1H4z M0 7h8v1H0z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M4 0h1v1H4z M2 1h1v1H2z M6 1h1v1H6z M1 2h1v1H1z M4 2h1v1H4z M7 2h1v1H7z M1 3h1v1H1z M3 3h1v1H3z M5 3h1v1H5z M7 3h1v1H7z M0 4h1v1H0z M2 4h2v1H2z M5 4h1v1H5z M7 4h1v1H7z M0 5h2v1H0z M3 5h2v1H3z M6 5h2v1H6z M0 6h3v1H0z M4 6h3v1H4z M0 7h8v1H0z'/%3E%3C/svg%3E");
            -webkit-mask-size: 64px 64px;
            mask-size: 64px 64px;
            -webkit-mask-repeat: repeat-x;
            mask-repeat: repeat-x;
        }

        /* Maintain mobile menu on landscape mobile viewports */
        @media (orientation: landscape) and (max-height: 600px) and (max-width: 1024px) {
            .desktop-nav-links {
                display: none !important;
            }
            #mobile-menu-btn {
                display: block !important;
            }
            #mobile-menu {
                display: flex !important;
                overflow-y: auto;
                justify-content: flex-start;
                padding: 4rem 1.5rem 2rem;
                gap: 1.25rem !important;
            }
        }

/* Inline style replacements for strict CSP compliance */
#clouds-canvas { z-index: -5; }
.no-text-shadow,
.hero-future-text,
html:not(.dark) .hero-future-text,
html.dark .hero-future-text {
    text-shadow: none !important;
}
#form-msg-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease-out, opacity 0.4s ease-out;
    opacity: 0;
}
#form-msg-wrapper > div {
    overflow: hidden;
}