body{
background:#050816;
color:#00ff9c;
font-family:monospace;
margin:0;
}

/* GRID */

.cyber-grid{
position:fixed;
width:100%;
height:100%;
background:linear-gradient(#00ff9c22 1px, transparent 1px),
linear-gradient(90deg,#00ff9c22 1px,transparent 1px);
background-size:40px 40px;
z-index:-1;
}

.logo{
width:220px;
transition:all 0.4s ease;
filter:drop-shadow(0 0 10px #00ff9c55);
}

/* EFECTO HOVER 3D */

.logo:hover{
transform:scale(1.1) rotateX(10deg) rotateY(10deg);
filter:
drop-shadow(0 0 15px #00ff9c)
drop-shadow(0 0 25px #00e0ff);
}

/* CONTENEDOR CON PROFUNDIDAD */

.hero{
text-align:center;
padding:60px;
perspective:1000px;
}

.slogan{
color:#00e0ff;
}

.tagline{
color:#8affc1;
}

/* TITLES */

h2{
text-align:center;
color:#00e0ff;
text-shadow:0 0 10px #00e0ff55;
}

/* SECTIONS */

section{
padding:50px 20px;
max-width:1100px;
margin:auto;
}

/* DASHBOARD */

.dashboard{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
}

.metric{
background:#0a0f1f;
padding:20px;
border:1px solid #00ff9c44;
border-radius:10px;
text-align:center;
transition:0.3s;
}

.metric:hover{
transform:scale(1.05);
}

.metric h3{
font-size:40px;
}

.metric.critical{
color:#ff4d4d;
}

/* TERMINAL */

.terminal{
background:black;
padding:20px;
height:200px;
overflow:auto;
border-radius:10px;
}

/* CANVAS */

canvas{
width:100%;
height:300px;
background:#020617;
border-radius:10px;
}

/* AI */

.ai-box{
background:#0a0f1f;
padding:20px;
border-radius:10px;
border:1px solid #00ff9c44;
}

/* CARDS (MEJORADAS) */

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
margin-top:20px;
}

.card{
background:#0a0f1f;
padding:20px;
border-radius:12px;
border:1px solid #00ff9c33;
transition:all 0.3s ease;
cursor:pointer;
position:relative;
overflow:hidden;
}

.card:hover{
transform:translateY(-8px) scale(1.02);
border-color:#00e0ff;
box-shadow:
0 0 10px #00ff9c,
0 0 20px #00e0ff33;
}

.card::before{
content:"";
position:absolute;
width:200%;
height:200%;
top:-50%;
left:-50%;
background:linear-gradient(
45deg,
transparent,
#00ff9c22,
#00e0ff22,
transparent
);
transform:rotate(25deg);
opacity:0;
transition:0.5s;
}

.card:hover::before{
opacity:1;
}

.card h3{
color:#00e0ff;
transition:0.3s;
}

.card:hover h3{
color:#00ff9c;
}

.card p{
color:#8affc1;
}

/* TEXT */

.vision-text{
max-width:800px;
margin:auto;
text-align:center;
color:#8affc1;
}

/* FOOTER */

footer{
text-align:center;
padding:30px;
color:#8affc1;
}

/* EFECTO ALERTA GLOBAL */

.metric.critical{
color:#ff4d4d;
text-shadow:0 0 10px red;
}

/* TERMINAL MÁS VIVO */

.terminal{
background:black;
color:#00ff9c;
box-shadow:0 0 10px #00ff9c33;
}