/* --- VARIÁVEIS --- */
        :root {
            --primary-color: #00f3ff; /* Ciano Neon */
            --secondary-color: #0051ff; /* Azul Escuro */
            --bg-color: #0a0a12; /* Fundo quase preto */
            --text-color: #e0e0e0;
            --orbit-speed: 60s; /* Tempo de rotação */
            --circuit-line-color: rgba(0, 243, 255, 0.3);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        html, body {
            height: 100%;
            font-family: 'Roboto', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            overflow-x: hidden;
        }

        body {
            display: flex;
            flex-direction: column;
            background-image: radial-gradient(circle at center, #1a1a2e 0%, #000000 100%);
        }

        /* --- CABEÇALHO --- */
        header {
            position: absolute;
            top: 0; width: 100%;
            padding: 20px;
            text-align: center;
            z-index: 10;
            background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
        }

        header h1 {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.5rem;
            color: var(--primary-color);
            text-transform: uppercase;
            letter-spacing: 3px;
            text-shadow: 0 0 10px var(--primary-color);
        }

        /* --- HERO SECTION --- */
        main {
            flex-grow: 1;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden; /* Esconde o que sair da tela */
        }

        /* O Centro (MARCKS) */
        .core {
            position: relative;
            z-index: 20; /* Garante que fique acima das linhas */
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.9);
            border: 2px solid var(--primary-color);
            box-shadow: 0 0 30px rgba(0, 243, 255, 0.2), inset 0 0 20px rgba(0, 243, 255, 0.1);
        }

        .core h2 {
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 900;
            color: white;
            letter-spacing: 2px;
            text-shadow: 3px 3px 0px var(--secondary-color);
        }

        .core::after {
            content: '';
            position: absolute;
            top: -10px; left: -10px; right: -10px; bottom: -10px;
            border-radius: 50%;
            border: 1px dashed var(--primary-color);
            animation: spin-pulse 20s linear infinite;
        }

        /* Container da Órbita (Gira tudo) */
        .orbit-container {
            position: absolute;
            width: 0; height: 0;
            top: 50%; left: 50%;
            animation: orbit-rotate var(--orbit-speed) linear infinite;
        }

        /* --- PAUSA AO PASSAR O MOUSE (Hover) --- */
        /* Se passar o mouse no container (área da roda), pausa tudo */
        .orbit-container:hover {
            animation-play-state: paused;
        }
        /* Também pausa a contra-rotação dos itens */
        .orbit-container:hover .service-item {
            animation-play-state: paused;
        }

        /* Wrapper de Posição (Fica estático na órbita, definido pelo JS) */
        .pos-wrapper {
            position: absolute;
            top: 0; left: 0;
            width: 0; height: 0;
            /* O JS vai aplicar transform: rotate(...) translate(...) aqui */
        }

        /* O Item Visual (Gira ao contrário para ficar em pé) */
        .service-item {
            position: absolute;
            top: -20px; /* Metade da altura aproximada */
            left: -100px; /* Metade da largura aproximada */
            width: 200px;
            
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;

            /* Animação crítica: Gira ao contrário da órbita */
            animation: counter-rotate var(--orbit-speed) linear infinite;
        }

        /* Conteúdo do Texto */
        .service-content {
            background: rgba(10, 10, 20, 0.9);
            border: 1px solid var(--circuit-line-color);
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 0.85rem;
            color: #fff;
            transition: all 0.3s ease;
            cursor: pointer;
            white-space: nowrap; /* Evita quebra de linha se possível */
            box-shadow: 0 0 10px rgba(0,0,0,0.8);
        }

        /* Efeito ao passar o mouse no item específico */
        .service-item:hover .service-content {
            background: var(--primary-color);
            color: #000;
            transform: scale(1.15);
            box-shadow: 0 0 20px var(--primary-color);
            font-weight: bold;
            z-index: 100; /* Traz para frente de tudo */
        }

        /* Linha Conectora */
        .connector {
            position: absolute;
            height: 1px;
            background: var(--circuit-line-color);
            top: 50%;
            right: 50%; /* Começa do centro do item e vai para a esquerda */
            transform-origin: right center;
            z-index: -1;
        }

        /* Bolinha da conexão */
        .service-content::before {
            content: '';
            position: absolute;
            left: -4px; top: 50%; margin-top: -3px;
            width: 6px; height: 6px;
            background-color: var(--primary-color);
            border-radius: 50%;
            box-shadow: 0 0 5px var(--primary-color);
        }

        /* --- RODAPÉ --- */
        footer {
            height: 50px;
            background-color: rgba(0, 0, 0, 0.9);
            border-top: 1px solid #333;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8em;
            color: #888;
            z-index: 50;
        }
        footer a { color: var(--primary-color); text-decoration: none; margin-left: 5px; }

        /* --- ANIMAÇÕES --- */
        @keyframes spin-pulse {
            0% { transform: rotate(0deg); opacity: 0.5; }
            50% { opacity: 1; }
            100% { transform: rotate(360deg); opacity: 0.5; }
        }

        @keyframes orbit-rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes counter-rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(-360deg); }
        }

        /* --- MOBILE / TABLET --- */
        @media (max-width: 768px) {
            main {
                flex-direction: column;
                padding-top: 100px;
                overflow-y: auto;
                height: auto;
                justify-content: flex-start;
                padding-bottom: 50px;
            }

            .orbit-container {
                position: relative;
                top: auto; left: auto;
                width: 100%; height: auto;
                animation: none;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 15px;
                padding: 20px;
            }
            
            /* Desativa Wrappers no mobile */
            .pos-wrapper {
                position: relative;
                width: auto; height: auto;
                top: auto; left: auto;
                transform: none !important;
            }

            .service-item {
                position: relative;
                top: auto; left: auto;
                width: auto;
                animation: none;
                margin: 0;
            }

            .connector { display: none; }

            .core {
                width: 120px; height: 120px;
                flex-shrink: 0;
                margin-bottom: 30px;
            }
            .core h2 { font-size: 1.4rem; }
            
            .service-content {
                white-space: normal;
                text-align: center;
            }
        }