:root {
            --n-bg: #F8FAFC; 
            --n-surface: #FFFFFF;
            --n-border: #E2E8F0;
            --n-text: #0F172A;
            --n-muted: #64748B;
            --n-accent: #0284C7;
            
            --n-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --n-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
            --n-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
        }

        html, body { margin: 0; padding: 0; overflow-x: hidden; scroll-behavior: smooth; }
        body { background-color: var(--n-bg); color: var(--n-text); font-family: 'Inter', sans-serif; font-size: 0.9375rem; -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; }

        .text-n-text { color: var(--n-text) !important; }
        .text-n-muted { color: var(--n-muted) !important; }
        .text-n-accent { color: var(--n-accent) !important; }

        /* =========================================================
           HERO & BRAND SIDE (Dark Theme Premium)
           ========================================================= */
        .hero-section { background: #070B14; /* Tom ainda mais escuro e premium */ position: relative; overflow: hidden; color: #fff; padding: 7rem 0; min-height: 85vh; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05); }
        .brand-glow { position: absolute; width: 700px; height: 700px; background: radial-gradient(circle, rgba(2, 132, 199, 0.12) 0%, rgba(7, 11, 20, 0) 70%); top: -150px; right: -100px; border-radius: 50%; pointer-events: none;}
        .brand-glow-2 { position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, rgba(7, 11, 20, 0) 70%); bottom: -100px; left: -100px; border-radius: 50%; pointer-events: none;}
        
        .navbar-custom { background: transparent; padding: 1.5rem 0; position: absolute; top: 0; width: 100%; z-index: 10; border-bottom: 1px solid rgba(255,255,255,0.05); }
        .logo-header { display: flex; align-items: center; gap: 0.6rem; font-size: 1.35rem; font-weight: 800; color: #fff; letter-spacing: -0.03em; text-decoration: none; }
        .logo-icon { width: 44px; height: 44px; border-radius: 0.75rem; background: transparent; border: 2px solid #fff; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
        
        .hero-title { font-size: 4rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.04em; margin-bottom: 1.5rem; }
        .hero-subtitle { font-size: 1.2rem; color: #94A3B8; font-weight: 300; max-width: 650px; margin-bottom: 2.5rem; line-height: 1.6; }

        /* Botões */
        .btn-neural { background: #fff; color: var(--n-text); border: 0; padding: 0.85rem 1.75rem; border-radius: 0.5rem; font-size: 0.9375rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s ease; cursor: pointer; text-decoration: none; box-shadow: 0 4px 14px 0 rgba(255, 255, 255, 0.1); }
        .btn-neural:hover { background: #F8FAFC; transform: translateY(-2px); color: var(--n-text); box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15); }
        
        .btn-outline-glow { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.2); padding: 0.85rem 1.75rem; border-radius: 0.5rem; font-size: 0.9375rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s ease; text-decoration: none;}
        .btn-outline-glow:hover { border-color: #fff; background: rgba(255,255,255,0.05); color: #fff; transform: translateY(-2px); }

        /* =========================================================
           SECTIONS (Light Theme Premium)
           ========================================================= */
        .section-padding { padding: 7rem 0; }
        .section-title { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--n-text); margin-bottom: 1rem; }
        .section-subtitle { font-size: 1rem; color: var(--n-muted); margin-bottom: 3.5rem; font-weight: 400; line-height: 1.6; }

        /* Cards Serviços Refining */
        .n-card { background: var(--n-surface); border: 1px solid var(--n-border); border-radius: 1rem; padding: 2.5rem 2rem; box-shadow: 0 2px 4px rgba(0,0,0,0.02); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); height: 100%; position: relative; overflow: hidden; }
        .n-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: transparent; transition: 0.3s; }
        .n-card:hover { box-shadow: var(--n-shadow-lg); border-color: transparent; transform: translateY(-5px); }
        .n-card:hover::before { background: var(--n-accent); }
        
        .card-icon { width: 56px; height: 56px; border-radius: 0.75rem; background: var(--n-bg); color: var(--n-text); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; margin-bottom: 1.5rem; border: 1px solid var(--n-border); transition: 0.3s; }
        .n-card:hover .card-icon { background: var(--n-accent); color: #fff; border-color: var(--n-accent); }
        
        .card-title { font-size: 1.25rem; font-weight: 700; color: var(--n-text); margin-bottom: 0.75rem; letter-spacing: -0.02em; }
        .card-text { font-size: 0.9375rem; color: var(--n-muted); line-height: 1.6; font-weight: 400; }

        /* =========================================================
           MODAL DE DIAGNÓSTICO B2B (CLEAN LAPIDADO)
           ========================================================= */
        .modal-backdrop { backdrop-filter: blur(4px); background-color: rgba(15, 23, 42, 0.4); } 
        .modal-content-neural { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 1.25rem; color: #0F172A; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); overflow: hidden; }
        .modal-header-neural { border-bottom: 1px solid #E2E8F0; padding: 1.5rem 2rem; display: flex; justify-content: space-between; align-items: center; background: #FFFFFF; }
        .modal-title-neural { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 0.5rem; color: #0F172A; }
        .btn-close-neural { background: transparent; border: 0; color: #64748B; font-size: 1.25rem; cursor: pointer; transition: 0.2s; display: flex; }
        .btn-close-neural:hover { color: #0F172A; transform: scale(1.1); }
        
        .modal-body-neural { padding: 2rem; }
        .form-section-title { font-size: 0.875rem; color: #0F172A; font-weight: 700; margin-bottom: 1rem; border-bottom: 1px solid #E2E8F0; padding-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
        .form-label-neural { font-size: 0.75rem; font-weight: 600; color: #64748B; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.4rem; display: block; }
        
        /* Inputs & Selects c/ Altura Travada para não quebrar layout */
        .input-neural { width: 100%; height: 46px; background: #FFFFFF; border: 1px solid #CBD5E1; border-radius: 0.5rem; padding: 0.5rem 1rem; color: #0F172A; font-size: 0.9375rem; transition: 0.3s ease; font-family: 'Inter', sans-serif; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.02); }
        .input-neural:focus { outline: none; border-color: #0284C7; box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15); }
        .input-neural::placeholder { color: #94A3B8; }
        textarea.input-neural { height: auto; min-height: 80px; resize: vertical; padding: 0.75rem 1rem; }
        
        select.input-neural { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748B'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1em; }
        select.input-neural option { background: #FFFFFF; color: #0F172A; }

        /* Custom Radio Pills (Grid Responsivo Inteligente) */
        .radio-pills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
        .radio-pill { position: relative; }
        .radio-pill input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
        .radio-pill-label { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding: 1rem; background: #F1F5F9; border: 1px solid #E2E8F0; border-radius: 0.75rem; cursor: pointer; transition: 0.2s; height: 100%; color: #64748B; }
        .radio-pill:hover .radio-pill-label { background: #E2E8F0; }
        .radio-pill input:checked ~ .radio-pill-label { background: rgba(2, 132, 199, 0.05); border-color: #0284C7; color: #0F172A; }
        .pill-icon { font-size: 1.5rem; color: inherit; transition: 0.2s; }
        .radio-pill input:checked ~ .radio-pill-label .pill-icon { color: #0284C7; }
        .pill-title { font-weight: 600; font-size: 0.8125rem; line-height: 1.3; }

        /* Botão Submit */
        .btn-submit-neural { width: 100%; background: var(--n-accent); color: #FFFFFF; border: 0; padding: 0.85rem; border-radius: 0.5rem; font-size: 1rem; font-weight: 700; margin-top: 0.5rem; transition: 0.2s; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 0.5rem; box-shadow: 0 4px 6px -1px rgba(2, 132, 199, 0.2); }
        .btn-submit-neural:hover { background: #0369A1; transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(2, 132, 199, 0.3); }

        /* =========================================================
           CARROSSEL INFINITO (TECH STACK) - PREMIUM OFFICIAL LOGOS
           ========================================================= */
        .carousel-wrapper {
            position: relative;
            width: 100%;
            overflow: hidden;
            padding: 3rem 0;
            -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
            mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
            background: #fff;
            border-top: 1px solid var(--n-border);
            border-bottom: 1px solid var(--n-border);
        }

        .carousel-track {
            display: flex;
            gap: 6rem; 
            width: max-content;
            animation: scroll-carousel 45s linear infinite; 
            align-items: center;
        }

        .carousel-track:hover {
            animation-play-state: paused;
        }

        @keyframes scroll-carousel {
            0% { transform: translateX(0); }
            100% { transform: translateX(calc(-50% - 3rem)); } 
        }

        .carousel-item-clean {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.25rem;
            min-width: 160px;
            opacity: 0.4; /* Opacidade menor para maior contraste no hover */
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            cursor: default;
            filter: grayscale(100%); /* Começa P&B */
        }

        .carousel-item-clean:hover {
            opacity: 1; 
            transform: scale(1.1);
            filter: grayscale(0%); /* Revela a cor original no hover */
        }

        .carousel-item-clean svg {
            width: 64px; /* Ícones maiores */
            height: auto;
            max-height: 64px;
            fill: #0F172A; /* Cor base fallback */
            transition: fill 0.4s ease;
        }

        .carousel-item-clean i {
            font-size: 4rem;
            color: #0F172A;
            transition: all 0.4s ease;
            line-height: 1;
        }

        .icon-vmware-img {
            width: 64px;
            height: 64px;
            object-fit: contain;
            filter: grayscale(100%) opacity(0.6);
            transition: 0.3s;
        }

        .carousel-item-clean:hover .icon-vmware-img {
            filter: grayscale(0%) opacity(1);
            transform: scale(1.1);
        }

        /* Cores originais ativadas no hover */
        .carousel-item-clean:hover .svg-linux { fill: #EAA545; } /* Tux Yellow/Orange */
        .carousel-item-clean:hover .svg-vmware { fill: #60B515; } /* VMware Green */
        .carousel-item-clean:hover .svg-fortinet { fill: #C8102E; } /* Fortinet Red */
        .carousel-item-clean:hover .svg-microsoft { fill: #00A4EF; } /* Microsoft Blue */
        .carousel-item-clean:hover .svg-network { fill: #0284C7; } /* Accent Blue */
        .carousel-item-clean:hover .icon-microsoft { color: #00A4EF; }
        .carousel-item-clean:hover .icon-python { color: #3776AB; }

        .tech-name {
            font-weight: 700;
            color: var(--n-text);
            font-size: 1rem;
            text-align: center;
            margin-bottom: -0.25rem;
            letter-spacing: -0.01em;
        }

        /* Tech Badge */
        .tech-level { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.25rem 0.6rem; border-radius: 2rem; }
        .lvl-exp { background: rgba(16, 185, 129, 0.1); color: #059669; border: 1px solid rgba(16, 185, 129, 0.2); }
        .lvl-int { background: rgba(2, 132, 199, 0.1); color: #0284C7; border: 1px solid rgba(2, 132, 199, 0.2); }

        /* Footer */
        .footer-custom { background: var(--n-surface); padding: 4rem 0; font-size: 0.875rem; color: var(--n-muted); }