/* --- CONFIGURAÇÕES GERAIS --- */
:root {
    --primary: #00ff88; /* Verde Hacker */
    --secondary: #7000ff; /* Roxo Cyber */
    --dark: #050505;
    --glass: rgba(255, 255, 255, 0.05);
    --border: rgba(255, 255, 255, 0.1);
    --text-muted: #aaa;
}

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

body {
    background-color: var(--dark);
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    overflow-x: hidden; /* Evita rolagem horizontal */
}

/* --- PRELOADER (TELA DE CARREGAMENTO) --- */
#preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.5s ease-out;
}
.loader-content { text-align: center; width: 300px; }
.loader-text {
    font-family: 'Orbitron'; color: var(--primary); font-weight: bold;
    margin-bottom: 15px; letter-spacing: 2px; animation: blink 1s infinite;
}
.progress-bar {
    width: 100%; height: 4px; background: #222;
    border-radius: 2px; overflow: hidden;
}
.progress {
    width: 0%; height: 100%; background: var(--primary);
    box-shadow: 0 0 10px var(--primary);
    animation: load 2s ease-in-out forwards;
}
@keyframes load { 0% { width: 0%; } 100% { width: 100%; } }
@keyframes blink { 50% { opacity: 0.5; } }

/* --- CANVAS BACKGROUND --- */
#canvas-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1; opacity: 0.4;
}

/* --- TYPOGRAPHY --- */
h1, h2, h3 { font-family: 'Orbitron', sans-serif; text-transform: uppercase; }
.highlight { color: var(--primary); text-shadow: 0 0 10px rgba(0, 255, 136, 0.5); }
.highlight-sec { color: var(--secondary); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* --- HEADER --- */
header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 40px; position: fixed; width: 100%; top: 0; z-index: 100;
    background: rgba(5, 5, 5, 0.8); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    transition: 0.3s;
}

.logo { font-size: 1.8rem; font-weight: 900; letter-spacing: 2px; color: #fff; }
.logo span { color: var(--primary); }

nav ul { display: flex; list-style: none; gap: 30px; }
nav a {
    color: #fff; text-decoration: none; font-weight: 500;
    transition: 0.3s; text-transform: uppercase; font-size: 0.9rem;
}
nav a:hover { color: var(--primary); text-shadow: 0 0 8px var(--primary); }

/* --- BOTÕES --- */
.btn-cyber {
    padding: 12px 30px; background: transparent;
    border: 2px solid var(--primary); color: var(--primary);
    font-family: 'Orbitron', sans-serif; font-weight: bold;
    text-transform: uppercase; cursor: pointer; position: relative;
    overflow: hidden; transition: 0.3s; text-decoration: none;
    display: inline-block; font-size: 1rem;
}
.btn-cyber::before {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%; background: var(--primary);
    transition: 0.5s; z-index: -1;
}
.btn-cyber:hover { color: var(--dark); box-shadow: 0 0 20px var(--primary); }
.btn-cyber:hover::before { left: 0; }

/* --- HERO SECTION --- */
.hero {
    height: 100vh; display: flex; align-items: center; justify-content: center;
    text-align: center; position: relative; padding-top: 60px;
}
.hero-content h1 { font-size: 4rem; line-height: 1.1; margin-bottom: 20px; }
.hero-content p {
    font-size: 1.2rem; color: #ccc; margin-bottom: 40px;
    max-width: 600px; margin-left: auto; margin-right: auto;
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute; bottom: 30px; left: 50%;
    transform: translateX(-50%); display: flex; flex-direction: column;
    align-items: center; gap: 5px;
}
.scroll-indicator span {
    width: 20px; height: 20px; border-bottom: 2px solid var(--primary);
    border-right: 2px solid var(--primary);
    transform: rotate(45deg); opacity: 0;
    animation: scrollAnim 2s infinite;
}
.scroll-indicator span:nth-child(1) { animation-delay: 0s; }
.scroll-indicator span:nth-child(2) { animation-delay: 0.2s; }
.scroll-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes scrollAnim {
    0% { opacity: 0; transform: rotate(45deg) translate(-10px, -10px); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: rotate(45deg) translate(10px, 10px); }
}

/* CSS Corrigido para o Efeito Glitch */
.glitch-text {
    position: relative;
    display: inline-block; /* Garante que o contêiner se ajuste ao texto */
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #050505; /* Mesma cor do fundo para esconder o texto original */
    overflow: hidden;
}

.glitch-text::before {
    text-shadow: -2px 0 #ff00c1; /* Sombra rosa/magenta */
    clip-path: inset(0 0 0 0); /* Começa sem corte */
    animation: glitch-anim-1 2s infinite linear alternate-reverse;
    z-index: 1;
}

.glitch-text::after {
    text-shadow: 2px 0 #00fff9; /* Sombra ciano/azul */
    clip-path: inset(0 0 0 0); /* Começa sem corte */
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
    z-index: 2;
}

/* Animações (Verifique se elas já existem no seu CSS, se não, adicione-as) */
@keyframes glitch-anim-1 {
    0% { clip-path: inset(20% 0 80% 0); transform: translate(-2px, -2px); }
    20% { clip-path: inset(60% 0 20% 0); transform: translate(2px, 2px); }
    40% { clip-path: inset(40% 0 60% 0); transform: translate(-2px, 0); }
    60% { clip-path: inset(80% 0 5% 0); transform: translate(2px, -2px); }
    80% { clip-path: inset(10% 0 70% 0); transform: translate(-2px, 2px); }
    100% { clip-path: inset(50% 0 30% 0); transform: translate(2px, 0); }
}

@keyframes glitch-anim-2 {
    0% { clip-path: inset(10% 0 60% 0); transform: translate(2px, 2px); }
    20% { clip-path: inset(30% 0 20% 0); transform: translate(-2px, -2px); }
    40% { clip-path: inset(70% 0 10% 0); transform: translate(2px, 0); }
    60% { clip-path: inset(20% 0 50% 0); transform: translate(-2px, 2px); }
    80% { clip-path: inset(50% 0 30% 0); transform: translate(2px, -2px); }
    100% { clip-path: inset(90% 0 5% 0); transform: translate(-2px, 0); }
}

/* --- TECH MARQUEE (FAIXA INFINITA) --- */
.tech-marquee {
    background: #000; border-bottom: 1px solid var(--border);
    padding: 20px 0; overflow: hidden; position: relative; z-index: 10;
}
.tech-track {
    display: flex; width: calc(200px * 16); animation: scroll 20s linear infinite;
}
.tech-list { display: flex; justify-content: space-around; width: 50%; }
.tech-list span {
    font-family: 'Orbitron'; font-size: 1.2rem; color: #555;
    font-weight: bold; display: flex; align-items: center; gap: 10px;
    padding: 0 40px; white-space: nowrap; transition: 0.3s;
}
.tech-list span i { font-size: 1.5rem; color: var(--secondary); }
.tech-list span:hover { color: #fff; text-shadow: 0 0 10px #fff; }
.tech-list span:hover i { color: var(--primary); text-shadow: 0 0 15px var(--primary); }

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

/* --- SERVICES --- */
.section-title { text-align: center; font-size: 2.5rem; margin: 80px 0 50px; }
.services-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px; padding-bottom: 100px;
}
.card {
    background: var(--glass); border: 1px solid var(--border);
    padding: 40px; border-radius: 10px; transition: 0.4s;
    position: relative; overflow: hidden; backdrop-filter: blur(5px);
}
.card:hover {
    transform: translateY(-10px); border-color: var(--primary);
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.1);
}
.card i { font-size: 3rem; color: var(--secondary); margin-bottom: 20px; transition: 0.3s; }
.card:hover i { color: var(--primary); text-shadow: 0 0 15px var(--primary); }
.card h3 { font-size: 1.5rem; margin-bottom: 15px; }
.card p { color: var(--text-muted); line-height: 1.6; }
.badge-list { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.badge {
    background: rgba(255,255,255,0.1); padding: 5px 10px;
    font-size: 0.8rem; border-radius: 4px; color: var(--primary); font-weight: bold;
}

/* --- PORTFOLIO & IMAGENS --- */
.portfolio-highlight {
    background: linear-gradient(45deg, #111, #0a0a0a);
    padding: 80px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.project-row { display: flex; align-items: center; gap: 50px; margin-bottom: 80px; }
.project-row:nth-child(even) { flex-direction: row-reverse; }
.project-info { flex: 1; }

.project-mockup {
    flex: 1; min-height: 300px; 
    border-radius: 15px; position: relative; display: flex;
    align-items: center; justify-content: center;
    background: transparent !important; /* Importante para a imagem aparecer sem fundo */
    border: none !important;
}

/* [NOVO] Classe para as Imagens Reais */
.img-fluid {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 15px; transition: 0.5s; opacity: 0.85;
    box-shadow: 0 0 20px rgba(112, 0, 255, 0.2);
    border: 1px solid var(--border);
}
.project-mockup:hover .img-fluid {
    opacity: 1; transform: scale(1.02);
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.3);
    border-color: var(--primary);
}

/* --- FORMULÁRIO DE CONTATO --- */
.contact-section { padding: 80px 0; background: var(--dark); }
.contact-wrapper {
    max-width: 800px; margin: 0 auto; background: var(--glass);
    padding: 40px; border-radius: 10px; border: 1px solid var(--border);
}
.form-group { margin-bottom: 20px; }
.form-label { display: block; margin-bottom: 8px; font-family: 'Orbitron'; color: var(--primary); }
.form-input {
    width: 100%; padding: 15px; background: rgba(0,0,0,0.5);
    border: 1px solid var(--border); color: #fff; font-family: 'Rajdhani';
    font-size: 1rem; outline: none; transition: 0.3s;
}
select.form-input option { background: #000; color: #fff; padding: 10px; }
.form-input:focus { border-color: var(--primary); box-shadow: 0 0 10px rgba(0,255,136,0.2); }
textarea.form-input { resize: vertical; min-height: 150px; }

/* --- FOOTER --- */
footer {
    text-align: center; padding: 50px 0; background: #000;
    border-top: 1px solid var(--border);
}
.social-links a { color: #fff; font-size: 1.5rem; margin: 0 15px; transition: 0.3s; }
.social-links a:hover { color: var(--primary); }

/* --- WHATSAPP FLUTUANTE --- */
.float-wa {
    position: fixed; width: 60px; height: 60px; bottom: 30px; right: 30px;
    background-color: #25d366; color: #FFF; border-radius: 50%;
    text-align: center; font-size: 30px; box-shadow: 0 0 15px rgba(37, 211, 102, 0.5);
    z-index: 1000; display: flex; align-items: center; justify-content: center;
    transition: 0.3s; animation: pulse 2s infinite;
}
.float-wa:hover { background-color: #128c7e; transform: scale(1.1); }

/* --- PÁGINA DE RIFAS/PRODUTOS --- */
.product-hero {
    padding: 150px 0 80px; text-align: center;
    background: radial-gradient(circle at center, rgba(0, 255, 136, 0.1) 0%, transparent 70%);
}
.feature-list {
    list-style: none; text-align: left; margin: 0 auto; max-width: 800px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;
}
.feature-list li {
    background: rgba(255,255,255,0.05); padding: 20px; border-radius: 8px;
    display: flex; align-items: center; gap: 15px; border: 1px solid var(--border);
    transition: 0.3s;
}
.feature-list li:hover { border-color: var(--primary); transform: translateX(10px); }
.feature-list i { color: var(--primary); font-size: 1.2rem; }

/* Pricing Tables */
.pricing-grid {
    display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-top: 50px;
}
.price-card {
    background: var(--glass); border: 1px solid var(--border); padding: 40px;
    border-radius: 15px; width: 100%; max-width: 350px;
    text-align: center; position: relative; transition: 0.3s;
}
.price-card.featured {
    border: 2px solid var(--primary);
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.1);
    transform: scale(1.05); z-index: 2;
}
.price-card h3 { font-size: 1.5rem; color: #fff; margin-bottom: 10px; }
.price { font-size: 3rem; font-weight: 900; color: var(--primary); margin: 20px 0; font-family: 'Orbitron'; }
.price span { font-size: 1rem; color: #aaa; font-weight: normal; }
.price-features { list-style: none; margin-bottom: 30px; text-align: left; }
.price-features li { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.1); color: #ccc; }
.price-features li i { margin-right: 10px; }
.price-features li i.fa-check { color: var(--primary); }
.price-features li i.fa-times { color: #555; }
.tag-popular {
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
    background: var(--primary); color: #000; padding: 5px 20px;
    font-weight: bold; font-family: 'Orbitron'; text-transform: uppercase; border-radius: 20px;
}

/* --- PÁGINA DE SEGURANÇA (TERMINAL) --- */
.terminal-section { padding: 120px 0 60px; display: flex; flex-direction: column; align-items: center; }
.terminal-window {
    background: #0d0d0d; width: 100%; max-width: 800px;
    border-radius: 8px; box-shadow: 0 0 50px rgba(0, 255, 136, 0.15);
    border: 1px solid #333; overflow: hidden; font-family: 'Courier New', Courier, monospace;
}
.terminal-header { background: #1a1a1a; padding: 10px 15px; display: flex; gap: 8px; border-bottom: 1px solid #333; }
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot.red { background: #ff5f56; }
.dot.yellow { background: #ffbd2e; }
.dot.green { background: #27c93f; }
.terminal-body { padding: 20px; color: #00ff88; min-height: 300px; font-size: 0.9rem; overflow-x: hidden;}
.command-line { margin-bottom: 10px; display: flex; flex-wrap: wrap; }
.prompt { color: #bd93f9; margin-right: 10px; }
.output { color: #ccc; margin-bottom: 15px; white-space: pre-wrap; word-break: break-word; }
.cursor { display: inline-block; width: 8px; height: 15px; background: #00ff88; animation: blink 1s infinite; vertical-align: middle; }

/* Security Cards */
.security-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 50px; }
.sec-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.8) 100%);
    border: 1px solid #222; padding: 30px; transition: 0.3s;
}
.sec-card:hover { border-color: var(--primary); background: rgba(0, 255, 136, 0.05); }
.sec-card h3 { color: #fff; margin-bottom: 10px; font-family: 'Orbitron'; }
.sec-card p { font-size: 0.9rem; color: #888; }
.status-indicator { display: inline-block; width: 10px; height: 10px; background: var(--primary); border-radius: 50%; box-shadow: 0 0 10px var(--primary); margin-right: 8px; }

/* --- ESTATÍSTICAS --- */
.stats-section { padding: 60px 0; border-bottom: 1px solid var(--border); background: radial-gradient(circle, rgba(0,255,136,0.05) 0%, rgba(0,0,0,0) 70%); }
.stats-grid { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 30px; text-align: center; }
.stat-item h2 { font-size: 3.5rem; color: #fff; margin-bottom: 5px; font-family: 'Orbitron'; text-shadow: 0 0 20px rgba(0,255,136,0.3); }
.stat-item p { color: var(--primary); text-transform: uppercase; letter-spacing: 2px; font-weight: bold; }

/* --- FAQ ACCORDION --- */
.faq-section { padding: 80px 0; background: #080808; }
.faq-grid { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; }
.faq-item { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; transition: 0.3s; }
.faq-item:hover { border-color: var(--primary); }
.faq-question {
    padding: 20px; width: 100%; text-align: left; background: none; border: none;
    color: #fff; font-family: 'Orbitron'; font-size: 1.1rem; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
}
.faq-question i { color: var(--primary); transition: 0.3s; }
.faq-item.active .faq-question i { transform: rotate(180deg); color: var(--secondary); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; padding: 0 20px; color: #aaa; line-height: 1.6; }
.faq-item.active .faq-answer { padding-bottom: 20px; }

/* --- DEPOIMENTOS (CHAT) --- */
.testimonials-section { padding: 80px 0; background: #000; position: relative; }
.chat-container { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.chat-bubble { background: #111; padding: 20px; border-radius: 15px; border: 1px solid #333; position: relative; max-width: 80%; transition: 0.3s; }
.chat-bubble:hover { border-color: var(--secondary); transform: translateX(5px); }
.chat-left { align-self: flex-start; border-left: 3px solid var(--primary); }
.chat-left::before { content: ''; position: absolute; top: 15px; left: -10px; border-width: 10px 10px 10px 0; border-color: transparent #111 transparent transparent; border-style: solid; }
.chat-right { align-self: flex-end; background: rgba(112, 0, 255, 0.1); border-right: 3px solid var(--secondary); text-align: right; }
.client-name { font-size: 0.8rem; color: #888; margin-bottom: 5px; display: block; font-family: 'Orbitron'; }
.client-text { font-size: 1rem; color: #ddd; font-style: italic; }
.stars { color: #ffbd2e; font-size: 0.8rem; margin-top: 10px; display: block; }

/* =========================================
   MEDIA QUERIES (MOBILE) 
   ========================================= */
@media (max-width: 768px) {
    header { padding: 15px 20px; }
    nav { display: none; } 
    .logo { font-size: 1.4rem; }
    .btn-cyber { padding: 8px 15px; font-size: 0.8rem; }
    .hero-content h1 { font-size: 2.5rem; }
    .hero-content p { font-size: 1rem; padding: 0 10px; }
    .section-title { font-size: 2rem; }
    .project-row, .project-row:nth-child(even) { flex-direction: column; text-align: center; }
    .project-mockup { width: 100%; min-height: 200px; }
    .form-row { flex-direction: column; }
    .contact-wrapper { padding: 20px; }
    .stat-item h2 { font-size: 2.5rem; }
    .chat-bubble { max-width: 95%; }
    .price-card.featured { transform: scale(1); margin: 20px 0; }
    .terminal-section { padding-top: 100px; }
    .terminal-body { font-size: 0.8rem; }
}

@media (max-width: 480px) {
    .hero-content h1 { font-size: 2rem; }
    .logo { font-size: 1.2rem; }
    .price-card { width: 100%; }
    .float-wa { width: 50px; height: 50px; font-size: 24px; bottom: 20px; right: 20px; }
}

/* --- PROTEÇÃO CONTRA CÓPIA (ANTI-COPY) --- */
body {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE10+/Edge */
    user-select: none;         /* Padrão */
}

/* Permite selecionar apenas em campos de formulário (senão o usuário não consegue digitar) */
input, textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Impede arrastar imagens */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    pointer-events: none; /* Impede clique direito direto na imagem */
}

/* --- COOKIE BANNER (LGPD) --- */
.cookie-banner {
    position: fixed; bottom: -200px; left: 0; width: 100%;
    background: rgba(5, 5, 5, 0.95); border-top: 1px solid var(--primary);
    padding: 20px; z-index: 10000; display: flex; justify-content: center;
    align-items: center; gap: 30px; box-shadow: 0 -10px 30px rgba(0, 255, 136, 0.1);
    backdrop-filter: blur(10px); transition: bottom 0.5s ease-in-out;
}
.cookie-banner.show { bottom: 0; }

.cookie-content { display: flex; align-items: center; gap: 20px; max-width: 800px; }
.cookie-text h3 { font-family: 'Orbitron'; color: #fff; font-size: 1rem; margin-bottom: 5px; }
.cookie-text p { font-size: 0.9rem; color: #aaa; }
.cookie-text a { color: var(--primary); text-decoration: none; }

@media (max-width: 768px) {
    .cookie-banner { flex-direction: column; text-align: center; gap: 15px; }
    .cookie-content { flex-direction: column; }
    .cookie-actions { width: 100%; }
    .cookie-actions button { width: 100%; }
}

.scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px;
    background: var(--primary); /* Verde Neon */
    width: 0%; z-index: 99999;
    box-shadow: 0 0 10px var(--primary);
    transition: width 0.1s;
}