/* =========================================================
   RESET GLOBAL
========================================================= */

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

:root{

/* CORES */

--bg-primary:#06101d;
--bg-secondary:#081120;
--bg-card:rgba(255,255,255,0.05);

--text-primary:#ffffff;
--text-secondary:#c7d5e6;

--color-main:#64ffda;
--color-blue:#00d9ff;

--border-color:rgba(255,255,255,0.08);

/* SOMBRAS */

--shadow-main:
0 10px 30px rgba(0,0,0,0.35);

--shadow-hover:
0 0 25px rgba(100,255,218,0.12);

/* TRANSIÇÃO */

--transition:0.35s ease;
}

/* =========================================================
   BODY
========================================================= */

body{
background:var(--bg-primary);
color:var(--text-primary);

font-family:'Poppins',sans-serif;

line-height:1.7;

overflow-x:hidden;
}

/* =========================================================
   CONTAINER
========================================================= */

.container{
width:100%;
max-width:1300px;

margin:0 auto;
}

/* =========================================================
   SECTION PADRÃO
========================================================= */

section{
padding:110px 8%;
position:relative;
overflow:hidden;
}

/* =========================================================
   TÍTULOS GLOBAIS
========================================================= */

h1,h2,h3,h4{
font-weight:700;
line-height:1.3;
}

h2{
position:relative;

display:inline-block;

font-size:2.8rem;

font-family:'Archivo Black',sans-serif;

margin-bottom:22px;

color:white;
}

/* LINHA */

h2::after{
content:"";

position:absolute;

left:0;
bottom:-8px;

width:60%;
height:4px;

border-radius:20px;

background:
linear-gradient(
90deg,
var(--color-main),
var(--color-blue)
);

transition:var(--transition);
}

h2:hover::after{
width:100%;
}

/* PARÁGRAFOS */

p{
color:var(--text-secondary);
font-size:1rem;
}

/* =========================================================
   BOTÕES GLOBAIS
========================================================= */

.btn{
display:inline-flex;

align-items:center;
justify-content:center;

padding:12px 22px;

border-radius:14px;

border:1px solid rgba(100,255,218,0.25);

background:
rgba(255,255,255,0.04);

color:var(--text-primary);

text-decoration:none;

font-size:0.9rem;
font-weight:600;

transition:var(--transition);

cursor:pointer;
}

/* HOVER */

.btn:hover{
background:
linear-gradient(
90deg,
var(--color-blue),
var(--color-main)
);

color:#06101d;

transform:
translateY(-4px)
scale(1.03);

box-shadow:
0 10px 20px rgba(100,255,218,0.18);
}

/* =========================================================
   HEADER — FUNDO COM VÍDEOS
========================================================= */

header {
    position: relative;
    padding: 70px 20px;
    text-align: center;
    overflow: hidden;
    background: #06101d;
}

/* CONTAINER DOS VÍDEOS */

.hero-videos {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* VÍDEOS */

.hero-video {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;

    object-fit: cover;

    opacity: 0;
    visibility: hidden;
}

/* VÍDEO ATIVO */

.hero-video.ativo {
    opacity: 1;
    visibility: visible;
}

/* =========================================================
   OVERLAY DO FUNDO
========================================================= */

header::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        135deg,
        rgba(6,16,29,0.20),
        rgba(8,17,32,0.65)
    );

    z-index: 1;
    pointer-events: none;
}

/* CONTEÚDO ACIMA DOS VÍDEOS */

header > *:not(.hero-videos) {
    position: relative;
    z-index: 2;
}

/* =========================================================
   TYPING TEXT
========================================================= */
.typing-text{
    display:block;
    width:100%;
    max-width:900px;
    margin:25px auto 0;
    padding:0 10px;

    font-size:1rem;
    font-family:'Archivo Black',sans-serif;
    color:white;
    line-height:1.6;
    text-align:center;

    white-space:normal;
    overflow:visible;

    border-right:none;
}
.typing-text::after{
    content:"";
    display:inline-block;
    width:3px;
    height:1em;
    margin-left:5px;
    vertical-align:middle;
    background:var(--color-blue);
    animation:cursor 0.7s infinite;
}
/* CURSOR */

@keyframes cursor{

0%{
border-color:transparent;
}

50%{
border-color:var(--color-blue);
}

100%{
border-color:transparent;
}

}

/* =========================================================
   CARD PADRÃO
========================================================= */

.card{
background:var(--bg-card);

border:
1px solid var(--border-color);

border-radius:24px;

padding:28px;

backdrop-filter:blur(12px);

box-shadow:var(--shadow-main);

transition:var(--transition);
}

/* HOVER */

.card:hover{
transform:
translateY(-8px)
scale(1.02);

box-shadow:var(--shadow-hover);
}

/* =========================================================
   GRID PADRÃO
========================================================= */

.grid{
display:grid;

grid-template-columns:
repeat(auto-fit,minmax(260px,1fr));

gap:25px;
}

/* =========================================================
   TABELAS
========================================================= */

table{
width:100%;

border-collapse:collapse;

overflow:hidden;

border-radius:20px;

margin-top:20px;
}

table th{
background:var(--color-main);

color:#06101d;

padding:14px;
}

table td{
padding:14px;

background:#0d1d33;

color:#dbe7f7;
}

table tr:nth-child(even) td{
background:#10233d;
}

/* =========================================================
   FOOTER MODERNO - PROJETO OZÔNIO
========================================================= */

.footer{
position:relative;

overflow:hidden;

background:
linear-gradient(
180deg,
#07111f 0%,
#081827 35%,
#0b1f33 100%
);

padding:100px 8% 35px;

border-top:
1px solid rgba(100,255,218,0.12);
}

/* EFEITO FUNDO */

.footer::before{
content:"";

position:absolute;

top:-150px;
left:-150px;

width:350px;
height:350px;

background:
radial-gradient(
circle,
rgba(100,255,218,0.12),
transparent 70%
);

pointer-events:none;
}

.footer::after{
content:"";

position:absolute;

bottom:-180px;
right:-150px;

width:380px;
height:380px;

background:
radial-gradient(
circle,
rgba(0,170,255,0.10),
transparent 70%
);

pointer-events:none;
}

/* =========================================================
   CONTAINER
========================================================= */

.footer-container{
position:relative;
z-index:2;

display:grid;

grid-template-columns:
2fr 1fr 1fr 1fr;

gap:60px;
}

/* =========================================================
   LOGO
========================================================= */

.footer-brand{
max-width:400px;
}

.footer-logo{
display:flex;
align-items:center;

gap:16px;

margin-bottom:22px;
}

.footer-logo img{
width:72px;
height:72px;

object-fit:cover;

border-radius:18px;

background:white;

padding:6px;

box-shadow:
0 0 25px rgba(100,255,218,0.15);
}

.footer-logo h3{
font-size:1.7rem;

font-weight:700;

color:white;
}

/* =========================================================
   DESCRIÇÃO
========================================================= */

.footer-desc{
line-height:1.9;

font-size:0.96rem;

color:#b8c7d9;
}

/* =========================================================
   TITULOS
========================================================= */

.footer-col h4{
position:relative;

font-size:1.1rem;

margin-bottom:28px;

color:white;

font-weight:600;
}

.footer-col h4::after{
content:"";

position:absolute;

left:0;
bottom:-10px;

width:45px;
height:3px;

border-radius:20px;

background:
linear-gradient(
90deg,
var(--color-main),
transparent
);
}

/* =========================================================
   LINKS
========================================================= */

.footer-links{
display:flex;
flex-direction:column;

gap:16px;
}

.footer-links a{
position:relative;

text-decoration:none;

font-size:0.95rem;

color:#c9d7e8;

transition:0.35s;
}

.footer-links a::before{
content:"";

position:absolute;

left:-14px;
top:50%;

transform:translateY(-50%);

width:0px;
height:2px;

background:var(--color-main);

transition:0.35s;
}

.footer-links a:hover{
color:var(--color-main);

transform:translateX(10px);
}

.footer-links a:hover::before{
width:8px;
}

/* =========================================================
   CONTATO
========================================================= */

.footer-contact{
display:flex;
flex-direction:column;

gap:14px;
}

.footer-contact p{
font-weight:600;

color:var(--color-main);

margin-bottom:-6px;
}

.footer-contact span{
color:#c7d4e5;

font-size:0.95rem;
}

/* =========================================================
   REDES SOCIAIS
========================================================= */

.footer-social{
display:flex;

gap:16px;

flex-wrap:wrap;
}

.footer-social a{
width:52px;
height:52px;

display:flex;
align-items:center;
justify-content:center;

border-radius:18px;

background:
rgba(255,255,255,0.04);

border:
1px solid rgba(255,255,255,0.08);

backdrop-filter:blur(12px);

transition:0.35s;
}

.footer-social a:hover{
transform:
translateY(-6px)
scale(1.08);

background:
linear-gradient(
135deg,
rgba(100,255,218,0.18),
rgba(0,170,255,0.18)
);

border:
1px solid rgba(100,255,218,0.35);

box-shadow:
0 0 30px rgba(100,255,218,0.18);
}

.footer-social img{
width:24px;
height:24px;

object-fit:contain;

filter:brightness(1.1);
}

/* =========================================================
   COPYRIGHT
========================================================= */

.footer-copy{
position:relative;
z-index:2;

margin-top:70px;

padding-top:28px;

border-top:
1px solid rgba(255,255,255,0.08);

text-align:center;

font-size:0.92rem;

color:#8da2bb;

letter-spacing:0.3px;
}

/* =========================================================
   NOME DEV
========================================================= */

.nome-dev{
position:relative;

color:var(--color-main);

font-weight:700;

transition:0.35s;
}

.nome-dev:hover{
color:white;

text-shadow:
0 0 15px rgba(100,255,218,0.5);
}

.footer-links a{
position:relative;

display:flex;
align-items:center;

gap:10px;

text-decoration:none;

font-size:0.96rem;

font-weight:500;

color:#d6e2f0;

padding:6px 0;

transition:0.35s;
}

.footer-links a::before{
content:"➜";

font-size:0.8rem;

color:var(--color-main);

opacity:0;

transform:translateX(-8px);

transition:0.35s;
}

.footer-links a:hover{
color:var(--color-main);

transform:translateX(8px);
}

.footer-links a:hover::before{
opacity:1;

transform:translateX(0);
}
/* =========================================================
   RESPONSIVO
========================================================= */

@media(max-width:1000px){

.footer-container{
grid-template-columns:
1fr 1fr;

gap:45px;
}

}

@media(max-width:650px){

.footer{
padding:80px 7% 30px;
}

.footer-container{
grid-template-columns:1fr;

text-align:center;
}

.footer-logo{
justify-content:center;
}

.footer-desc{
margin:0 auto;
}

.footer-col h4::after{
left:50%;

transform:translateX(-50%);
}

.footer-links{
align-items:center;
}

.footer-contact{
align-items:center;
}

.footer-social{
justify-content:center;
}

.footer-links a:hover{
transform:none;
}

}