/* =========================================================
   VARIÁVEIS GLOBAIS E RESET (SISTROM WEB SYSTEM)
   ========================================================= */
   :root {
	--bg-deep: #050914;
	--bg-glow: #101b3b;
	--cyan: #00f0ff;
	--cyan-rgb: 0, 240, 255;
	--green-pix: #00e676;
	--text-main: #ffffff;
	--text-muted: #8d99ae;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Rajdhani', sans-serif; }
body { background: radial-gradient(circle at top center, var(--bg-glow) 0%, var(--bg-deep) 100%); color: var(--text-main); min-height: 100vh; overflow-x: hidden; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-deep); border-left: 1px solid rgba(var(--cyan-rgb), 0.1); }
::-webkit-scrollbar-thumb { background: rgba(var(--cyan-rgb), 0.4); border-radius: 10px; border: 2px solid var(--bg-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

/* Neural Canvas Base */
#neural-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; opacity: 0.4; }
.wrapper { position: relative; z-index: 10; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* =========================================================
   NAVBAR (GLASSMORPHISM)
   ========================================================= */
.glass-nav { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; z-index: 100; background: rgba(5, 9, 20, 0.7); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-bottom: 1px solid rgba(0, 240, 255, 0.1); }
.nav-logo { font-size: 1.8rem; font-weight: 700; color: #fff; letter-spacing: 2px; }
.nav-logo span { color: var(--cyan); }
.nav-links { display: flex; gap: 30px; }
.nav-links a { color: var(--text-main); text-decoration: none; font-size: 1.2rem; font-weight: 600; text-transform: uppercase; transition: all 0.3s; }
.nav-links a:hover { color: var(--cyan); text-shadow: 0 0 10px rgba(0, 240, 255, 0.5); }

/* =========================================================
   HERO SECTION
   ========================================================= */
.hero { position: relative; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.hero-bg-video { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; object-fit: cover; z-index: -2; opacity: 0.3; mix-blend-mode: screen; }
.hero-overlay { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background: radial-gradient(circle at center, transparent 0%, var(--bg-deep) 100%); z-index: -1; }
.hero-subtitle { color: var(--cyan); font-size: 1.2rem; font-weight: 700; letter-spacing: 4px; display: block; margin-bottom: 10px; }
.hero-title { font-size: 5rem; font-weight: 700; line-height: 1; margin-bottom: 20px; text-shadow: 0 0 30px rgba(0,0,0,0.8); }
.hero-title span { color: transparent; -webkit-text-stroke: 2px var(--cyan); }
.hero-desc { font-size: 1.5rem; color: var(--text-muted); max-width: 700px; margin: 0 auto 40px; }

/* Botão Global Neon */
.btn-glow { position: relative; display: inline-flex; align-items: center; gap: 10px; background: rgba(5, 9, 20, 0.4); backdrop-filter: blur(5px); color: var(--cyan); font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 15px 35px; border: 2px solid var(--cyan); border-radius: 4px; cursor: pointer; text-decoration: none; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 0 15px rgba(var(--cyan-rgb), 0.2) inset, 0 0 20px rgba(var(--cyan-rgb), 0.2); }
.btn-glow:hover { background: var(--cyan); color: var(--bg-deep); box-shadow: 0 0 30px var(--cyan); transform: translateY(-3px); }

/* Indicador de Rola */
.scroll-indicator { position: absolute; bottom: 40px; color: var(--text-muted); font-size: 2rem; animation: bounce 2s infinite; cursor: pointer; transition: 0.3s; }
.scroll-indicator:hover { color: var(--cyan); }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-15px); } }

/* =========================================================
   SEÇÕES GLOBAIS E BADGES
   ========================================================= */
.section-header { text-align: center; margin-bottom: 60px; padding-top: 80px; }
.cyber-badge { display: inline-block; font-size: 1rem; font-weight: 700; color: var(--cyan); border: 1px solid var(--cyan); padding: 5px 20px; border-radius: 50px; margin-bottom: 20px; letter-spacing: 2px; }
.section-header h2 { font-size: 3.5rem; margin-bottom: 20px; text-transform: uppercase; }
.section-header p { font-size: 1.3rem; color: var(--text-muted); max-width: 800px; margin: 0 auto; }

/* =========================================================
   DNA GRID (SOBRE)
   ========================================================= */
.dna-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; padding-bottom: 80px;}
.dna-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(0, 240, 255, 0.1); border-radius: 12px; padding: 40px 30px; text-align: center; transition: all 0.3s ease; cursor: crosshair; }
.dna-card:hover { border-color: rgba(0, 240, 255, 0.5); background: rgba(0, 240, 255, 0.05); transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.dna-icon { font-size: 3rem; color: var(--cyan); margin-bottom: 20px; filter: drop-shadow(0 0 10px rgba(0,240,255,0.5)); }
.dna-card h3 { font-size: 1.5rem; margin-bottom: 15px; text-transform: uppercase; }
.dna-card p { color: var(--text-muted); font-size: 1.1rem; line-height: 1.5; }

/* =========================================================
   SISTEMAS (ECOSSISTEMA) - CARDS 3D HOLOGRÁFICOS
   ========================================================= */
.system-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; padding-bottom: 100px;}
.system-card {
	background: linear-gradient(180deg, rgba(5,9,20,0.9) 0%, rgba(16,27,59,0.9) 100%);
	border: 1px solid rgba(255,255,255,0.1);
	border-top: 3px solid var(--sys-color);
	border-radius: 12px;
	padding: 40px 30px;
	display: flex; flex-direction: column; align-items: center; text-align: center;
	box-shadow: 0 20px 40px rgba(0,0,0,0.8);
	transition: all 0.3s;
	position: relative;
	overflow: hidden;
}
.system-card::before { content: ''; position: absolute; top:0; left:0; width:100%; height:100%; background: radial-gradient(circle at top, var(--sys-color) 0%, transparent 60%); opacity: 0.1; pointer-events: none; }
.system-card:hover { border-color: var(--sys-color); box-shadow: 0 20px 50px rgba(0,0,0,0.9), 0 0 30px var(--sys-color) inset; }

.sys-svg { width: 100px; height: 100px; margin-bottom: 25px; filter: drop-shadow(0 0 10px var(--sys-color)); }
.float-anim { animation: float-obj 4s ease-in-out infinite; }
@keyframes float-obj { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

.system-card h3 { font-size: 1.8rem; margin-bottom: 15px; color: #fff; letter-spacing: 1px; }
.system-card p { color: var(--text-muted); font-size: 1.1rem; line-height: 1.5; margin-bottom: 30px; flex-grow: 1; }
.btn-sys { color: var(--sys-color); font-weight: bold; font-size: 1.1rem; text-decoration: none; border-bottom: 1px dashed var(--sys-color); padding-bottom: 5px; transition: 0.3s; }
.btn-sys:hover { color: #fff; letter-spacing: 1px; border-bottom-style: solid; }

/* =========================================================
   CERTIFICADOS DIGITAIS
   ========================================================= */
.cert-section { padding: 80px 0; border-top: 1px solid rgba(255,255,255,0.05); background: linear-gradient(90deg, rgba(243, 156, 18, 0.05) 0%, transparent 100%); }
.cert-container { display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.cert-text { flex: 1; }
.cert-text p { font-size: 1.3rem; color: var(--text-muted); margin-bottom: 30px; line-height: 1.6; }
.cert-actions { display: flex; align-items: center; gap: 20px; }
.cert-link { color: var(--text-muted); text-decoration: underline; font-size: 1.1rem; transition: 0.3s; }
.cert-link:hover { color: #f39c12; }
.cert-visual { flex: 1; max-width: 400px; filter: drop-shadow(0 0 30px rgba(243, 156, 18, 0.3)); }

/* =========================================================
   FOOTER E CONTATO
   ========================================================= */
.footer-section { padding: 100px 0 20px 0; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); margin-top: 50px; }
.footer-content p { font-size: 1.3rem; color: var(--text-muted); margin-bottom: 50px; }

.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 80px; }
.contact-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.1); padding: 30px; border-radius: 8px; text-decoration: none; color: #fff; display: flex; flex-direction: column; align-items: center; transition: 0.3s; }
.contact-card i { font-size: 2.5rem; color: var(--cyan); margin-bottom: 15px; }
.contact-card span { font-size: 1.3rem; font-weight: bold; margin-bottom: 5px; }
.contact-card small { color: var(--text-muted); }
.contact-card:hover { background: rgba(0, 240, 255, 0.05); border-color: var(--cyan); transform: translateY(-5px); }

footer { border-top: 1px dashed rgba(255,255,255,0.1); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; color: var(--text-muted); }
.social-mini a { color: var(--text-muted); font-size: 1.5rem; margin-left: 15px; transition: 0.3s; }
.social-mini a:hover { color: var(--cyan); }

/* =========================================================
   WHATSAPP FLOAT & REVEAL
   ========================================================= */
.whatsapp-float { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background-color: var(--green-pix); color: #000; border-radius: 50px; display: flex; justify-content: center; align-items: center; font-size: 2rem; box-shadow: 0 0 20px rgba(0, 230, 118, 0.4); z-index: 99; transition: 0.3s; animation: pulse-wa 2s infinite; }
.whatsapp-float:hover { transform: scale(1.1); background-color: #00ff84; }
@keyframes pulse-wa { 0% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.7); } 70% { box-shadow: 0 0 0 20px rgba(0, 230, 118, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0); } }

/* Animações Iniciais */
.anim-fade-up { opacity: 0; animation: fadeUp 1s forwards ease-out; }
@keyframes fadeUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } }

.reveal { opacity: 0; transform: translateY(50px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Responsivo Mobile */
@media (max-width: 768px) {
	.glass-nav { padding: 15px; flex-direction: column; gap: 10px; }
	.nav-links { gap: 15px; font-size: 0.9rem; }
	.hero-title { font-size: 3rem; }
	.section-header h2 { font-size: 2.5rem; }
	.cert-container { flex-direction: column; text-align: center; }
	.cert-actions { flex-direction: column; }
	footer { flex-direction: column; gap: 15px; text-align: center; }
}