/* =========================================
   VARIÁVEIS PREMIUM
========================================= */
:root {
    --color-bg: #0d0d12;
    --color-panel: #161720;
    --color-neon-purple: #c516ff;
    --color-neon-light: #f5d0ff;
    --color-blue: #00d2ff;
    --color-text: #ffffff;
    --color-text-dim: #9ca3af;
    --font-main: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }
body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-main); }
html, body { max-width: 100%; overflow-x: clip; }
.container { width: 90%; max-width: 1280px; margin: 0 auto; }

/* =========================================
   HEADER PREMIUM & MOBILE ICON FIX
========================================= */
header {
    background-color: rgba(13, 13, 18, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    padding: 1.2rem 0; 
    position: fixed; width: 100%; top: 0; z-index: 1000;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}

.nav-wrapper { display: flex; justify-content: space-between; align-items: center; }

/* O Ícone de menu mobile FICA ESCONDIDO NO PC */
.mobile-btn {
    display: none; 
    background: none; border: none; color: #fff; 
    cursor: pointer; transition: var(--transition);
}
.mobile-btn:hover { color: var(--color-neon-purple); filter: drop-shadow(0 0 8px var(--color-neon-purple)); }

.logo { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.5px; color: #fff; }
.text-gradient {
    background: linear-gradient(90deg, #c516ff, #00d2ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-menu { display: flex; gap: 2.5rem; align-items: center; list-style: none; }
.nav-link { font-size: 0.95rem; font-weight: 500; color: var(--color-text-dim); text-decoration: none; transition: var(--transition); position: relative; padding: 0.5rem 0; }
.nav-link:hover { color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); }
.nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 2px; background: var(--color-neon-purple); transition: var(--transition); box-shadow: 0 0 8px var(--color-neon-purple); }
.nav-link:hover::after { width: 100%; }

.btn-nav {
    background: rgba(197, 22, 255, 0.1); border: 1px solid rgba(197, 22, 255, 0.3); color: #fff;
    padding: 0.6rem 1.5rem; border-radius: 50px; text-decoration: none; font-size: 0.9rem; font-weight: 600; transition: var(--transition);
}
.btn-nav:hover { background: var(--color-neon-purple); box-shadow: 0 0 20px rgba(197, 22, 255, 0.5); transform: translateY(-2px); }

/* =========================================
   HERO SECTION
========================================= */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: 80px; overflow: hidden; }
.hero-ambient-glow { position: absolute; top: 50%; right: 10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(197, 22, 255, 0.15) 0%, rgba(0, 0, 0, 0) 70%); transform: translateY(-50%); z-index: 1; pointer-events: none; }
.hero-content { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; position: relative; z-index: 2; }

.hero-text { text-align: left; }
.hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); padding: 0.4rem 1rem; border-radius: 50px; font-size: 0.85rem; font-weight: 600; color: var(--color-text-dim); margin-bottom: 2rem; letter-spacing: 0.5px; }
.badge-dot { width: 8px; height: 8px; background: var(--color-blue); border-radius: 50%; box-shadow: 0 0 8px var(--color-blue); }
.hero-text h1 { font-size: clamp(3rem, 5vw, 5rem); font-weight: 900; line-height: 1.1; margin-bottom: 1.5rem; letter-spacing: -1px; }
.hero-text p { font-size: 1.15rem; color: var(--color-text-dim); line-height: 1.7; margin-bottom: 2.5rem; max-width: 90%; }

.hero-buttons { display: flex; gap: 1.5rem; align-items: center; }
.btn-primary { display: flex; align-items: center; gap: 0.5rem; background: var(--color-neon-purple); color: #fff; padding: 1rem 2rem; border-radius: 8px; font-weight: 700; text-decoration: none; transition: var(--transition); box-shadow: 0 10px 30px rgba(197, 22, 255, 0.4); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(197, 22, 255, 0.6); }
.btn-secondary { color: #fff; text-decoration: none; font-weight: 600; transition: var(--transition); }
.btn-secondary:hover { color: var(--color-blue); }

.hero-image { display: flex; justify-content: center; align-items: center; }

/* =========================================
   A LOGO EM SVG (SNIPER CSS MANTIDO)
========================================= */
.hero-svg-logo { width: 100% !important; max-width: 750px !important; height: auto !important; display: block !important; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.8)) !important; overflow: visible !important; }
.hero-svg-logo path[d*="1771" i], .hero-svg-logo path[d*="1772" i], .hero-svg-logo path[d*="1773" i] { display: none !important; }

path[fill="#fae5fd"], path[fill="#fae4fd"], g[fill="#fae5fd"] path, g[fill="#fae4fd"] path, .sabre-luz, path[fill="url(#luzSabre)"] { 
    fill: url(#luzSabre) !important; filter: drop-shadow(0 0 15px #c516ff) drop-shadow(0 0 25px #c516ff) !important; 
}

[fill="#be17f4"], [fill="#bf17f7"], [fill="#743595"], [stroke="#7e14a9"], 
[stroke="#9926c5"], [stroke="#592379"], [stroke="#dc7ef9"], [stroke="#6f1b89"], 
[stroke="#4e3166"], [stroke="#3c2058"], [stroke="#331e4a"], [stroke="#5f427a"], 
[stroke="#9c7aad"], [stroke="#2f173e"], [stroke="#4a2a5a"],
g[fill="#743595"] path, g[fill="#be17f4"] path, g[fill="#bf17f7"] path {
    fill: #c516ff !important; stroke: #c516ff !important; animation: respirarNeon 2s infinite alternate ease-in-out !important; transform-origin: center;
}

[fill="#8f8e8e"], [fill="#494f5f"], [stroke="#8f8e8e"], [stroke="#494f5f"], g[fill="#494f5f"] path {
    fill: #ffffff !important; stroke: none !important;
}

[fill="#201e1e"], [fill="#282c37"], [fill="#040a1b"], [stroke="#12141d"], [stroke="#161b29"], [stroke="#24252b"], [stroke="#272d3d"], [stroke="#393e4b"], [stroke="#35373f"] {
    animation: none !important; filter: none !important;
}

@keyframes respirarNeon { 0% { filter: drop-shadow(0 0 3px #c516ff); opacity: 0.8; } 100% { filter: drop-shadow(0 0 25px #c516ff) brightness(1.3); opacity: 1; } }

/* =========================================
   SEÇÃO DE SERVIÇOS
========================================= */
.services { padding: 8rem 0 3rem 0; }
.section-title { font-size: 2.8rem; font-weight: 800; font-family: var(--font-main); margin-bottom: 1rem; text-align: center; letter-spacing: -1px; }
.section-subtitle { text-align: center; color: var(--color-text-dim); font-size: 1.15rem; margin-bottom: 3.5rem; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; }

.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.panel { background: var(--color-panel); padding: 2.5rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.03); transition: var(--transition); }
.panel:hover { transform: translateY(-10px); background: rgba(255,255,255,0.02); border-color: rgba(197, 22, 255, 0.3); box-shadow: 0 20px 40px rgba(0,0,0,0.5); }
.panel-icon { font-size: 3rem; margin-bottom: 1.5rem; }
.panel h3 { font-size: 1.5rem; margin-bottom: 1rem; font-family: var(--font-mono); color: #fff; }

/* =========================================
   SEÇÃO EMPRESAS (PARALLAX CYBERGRID)
========================================= */
.corporate { padding: 6rem 0; position: relative; }
/* =========================================
   SEÇÃO EMPRESAS (CYBER GRID ANIMADA)
========================================= */
.corporate {
    padding: 8rem 0;
    position: relative;
    background-color: var(--color-bg);
    border-top: 1px solid rgba(197, 22, 255, 0.1);
    border-bottom: 1px solid rgba(197, 22, 255, 0.1);
    overflow: hidden;
}

/* O Motor da Malha Animada */
.corporate::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Gradiente para esfumaçar o topo e a base + A grade Neon */
    background-image: 
        linear-gradient(to bottom, var(--color-bg) 0%, transparent 15%, transparent 85%, var(--color-bg) 100%),
        url('data:image/svg+xml;utf8,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><path d="M60 0L0 0 0 60" fill="none" stroke="%23c516ff" stroke-width="1.5" stroke-opacity="0.4"/></svg>');
    background-size: 100% 100%, 80px 80px;
    z-index: 0;
    /* Animação contínua e suave */
    animation: cyberGridMove 4s linear infinite;
}

.corporate .container {
    position: relative;
    z-index: 2;
}

.glass-panel { 
    background: rgba(22, 23, 32, 0.6); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px); 
    border: 1px solid rgba(197, 22, 255, 0.15); 
}
.glass-panel:hover { 
    background: rgba(22, 23, 32, 0.9); 
    border-color: rgba(0, 210, 255, 0.5); 
    box-shadow: 0 15px 35px rgba(0, 210, 255, 0.2); 
}

@keyframes cyberGridMove {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 0 0, 80px 80px; }
}

/* =========================================
   CONTATO & FORMULÁRIO PREMIUM
========================================= */
.contact { padding: 6rem 0 8rem 0; }
.contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; background: var(--color-panel); padding: 4rem; border-radius: 16px; border: 1px solid rgba(197, 22, 255, 0.15); box-shadow: 0 25px 50px rgba(0,0,0,0.5); }

/* Ícone com gradiente na tag SVG */
.icon-gradient { fill: url(#gradient-neon); width: 28px; height: 28px; transition: var(--transition); }

.btn-whatsapp-premium { display: inline-flex; align-items: center; gap: 0.8rem; background: rgba(197, 22, 255, 0.05); border: 1px solid rgba(197, 22, 255, 0.3); color: #fff; padding: 1rem 2rem; border-radius: 50px; font-weight: 700; text-decoration: none; transition: var(--transition); box-shadow: 0 0 15px rgba(197, 22, 255, 0.1); }
.btn-whatsapp-premium:hover { background: rgba(197, 22, 255, 0.15); border-color: var(--color-neon-purple); box-shadow: 0 10px 25px rgba(197, 22, 255, 0.4); transform: translateY(-3px); }

/* Form inputs */
.contact-form-premium { display: flex; flex-direction: column; gap: 1.2rem; }
.input-group input, .input-group textarea { width: 100%; padding: 1.2rem; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; color: #fff; font-family: var(--font-main); transition: var(--transition); font-size: 1rem; }
.input-group input:focus, .input-group textarea:focus { outline: none; border-color: var(--color-neon-purple); box-shadow: 0 0 15px rgba(197, 22, 255, 0.15); background: rgba(255,255,255,0.04); }
.btn-submit { background: linear-gradient(90deg, #c516ff, #00d2ff); color: #fff; padding: 1.2rem; border-radius: 8px; border: none; font-weight: 700; font-size: 1rem; cursor: pointer; transition: var(--transition); box-shadow: 0 10px 20px rgba(197, 22, 255, 0.2); }
.btn-submit:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(0, 210, 255, 0.4); }

/* =========================================
   FOOTER PREMIUM
========================================= */
.footer { background: #08080b; padding: 4rem 0 2rem 0; border-top: 1px solid rgba(255,255,255,0.03); text-align: center; }
.social-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-text-dim); text-decoration: none; font-weight: 600; font-family: var(--font-mono); transition: var(--transition); }
.social-link:hover { color: #fff; }
.social-link:hover .icon-gradient { filter: drop-shadow(0 0 10px var(--color-neon-purple)); transform: scale(1.1); }
.footer-bottom { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.03); }

/* =========================================
   RESPONSIVIDADE (MOBILE)
========================================= */
@media (max-width: 992px) {
    .hero-content { grid-template-columns: 1fr; text-align: center; gap: 2rem; }
    .hero-text { text-align: center; }
    .hero-text p { margin: 0 auto 2.5rem auto; }
    .hero-buttons { justify-content: center; }
    .nav-menu { display: none; }
    .mobile-btn { display: block; }
    .hero-ambient-glow { right: 50%; transform: translate(50%, -50%); }
    .contact-wrapper { grid-template-columns: 1fr; padding: 2.5rem; }
}


/* =========================================
   SCROLL REVEAL ANIMATIONS (SURGIMENTO)
========================================= */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Atraso em cascata para os painéis surgirem um por um */
.services-grid .panel:nth-child(1) { transition-delay: 0.1s; }
.services-grid .panel:nth-child(2) { transition-delay: 0.25s; }
.services-grid .panel:nth-child(3) { transition-delay: 0.4s; }


/* =========================================
   EFEITO MOUSE SPOTLIGHT (Luz Dinâmica)
========================================= */
.panel {
    overflow: hidden; /* Garante que a luz não vaze pelas bordas redondas do cartão */
}

/* O feixe de luz invisível por padrão */
.panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* A mágica acontece aqui: as variáveis CSS recebem a posição do mouse em tempo real */
    background: radial-gradient(
        600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        rgba(197, 22, 255, 0.12), /* O tom de luz roxa */
        transparent 40%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none; /* Deixa o mouse clicar e selecionar os textos através da luz */
    z-index: 1;
}

/* Acende a luz quando o mouse passa por cima do painel */
.panel:hover::before {
    opacity: 1;
}

/* Coloca o ícone e o texto "flutuando" acima do feixe de luz */
.panel-icon, .panel h3, .panel p {
    position: relative;
    z-index: 2;
}