:root {
            --pci-turquoise: #00A99D;
            --pci-turquoise-light: #00c7b9;
            --pci-yellow-alert: #FFC107;
            --pci-yellow-alert-dark: #e0a800;
            --pci-dark-bg: #111827;
            --pci-dark-card: #1F2937;
            --pci-dark-border: #374151;
            --pci-light-text: #F9FAFB;
            --pci-gray-text: #9CA3AF;
        }

        body {
            font-family: 'Lato', sans-serif;
            color: var(--pci-gray-text);
            background-color: var(--pci-dark-bg);
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Montserrat', sans-serif;
            color: var(--pci-light-text);
        }

        .hero-bg {
            background-color: var(--pci-dark-bg);
            background-image: 
                radial-gradient(circle at 25% 30%, hsla(175, 100%, 33%, 0.3), transparent 50%),
                radial-gradient(circle at 75% 70%, hsla(175, 100%, 33%, 0.2), transparent 50%);
        }
        
        .cta-button {
            transition: all 0.3s ease;
        }
        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
        }
        
        .form-step {
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
        }
        .form-step.hidden {
            opacity: 0;
            transform: translateX(20px);
            position: absolute;
            pointer-events: none;
        }
        .form-step.visible {
            opacity: 1;
            transform: translateX(0);
            position: static;
        }

        .brand-logo {
            filter: grayscale(100%) opacity(60%) brightness(1.5);
            transition: all 0.3s ease;
        }
        .brand-logo:hover {
            filter: grayscale(0%) opacity(100%) brightness(1);
        }

        .tech-glow {
            box-shadow: 0 0 15px rgba(0, 169, 157, 0.3), 0 0 5px rgba(0, 169, 157, 0.2);
        }