:root{
--bg:#020912;
--cyan:#5fffea;
--red:#ff0000;
}

body{
margin:0;
background:var(--bg);
color:#fff;
font-family:Arial;
overflow-x:hidden;
}

/* HERO */
.hero{
position:relative;
height:520px;
overflow:hidden;
}

.hero-q{
position:absolute;
right:5%;
top:50%;
transform:translateY(-50%);
font-size:20vw;
color:rgba(255,255,255,.04);
animation:pulse 6s infinite;
}

/* LASER */
.laser-svg{
position:absolute;
inset:0;
width:100%;
height:100%;
}

#laserPath{
fill:none;
stroke:var(--red);
stroke-width:2;
filter:drop-shadow(0 0 12px var(--red));
}

/* RADAR */
.radar{
position:absolute;
inset:-40%;
background:conic-gradient(from 0deg, transparent, rgba(95,255,234,.1), transparent);
animation:spin 5s linear infinite;
}

/* DATA STREAM */
.data-stream{
position:absolute;
inset:0;
opacity:.08;
background:repeating-linear-gradient(
0deg,
rgba(95,255,234,.3),
rgba(95,255,234,.3) 1px,
transparent 1px,
transparent 6px
);
animation:flow 3s linear infinite;
}

/* STRIP */
.strip-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:12px;
padding:30px;
}

.strip-item{
position:relative;
padding:20px;
border:1px solid rgba(255,255,255,.1);
transition:.3s;
overflow:hidden;
}

/* ACTIVE DEFENSE STATES */
.strip-item.evading{
transform:translateY(-6px) scale(1.03);
border-color:rgba(255,0,0,.4);
}

.strip-item.locked{
box-shadow:0 0 20px rgba(255,0,0,.4);
border-color:red;
}

/* HEAT COLOR */
.strip-item.hot{
background:rgba(255,0,0,.08);
}

/* ICON GLOW */
.ico{
font-size:32px;
transition:.3s;
}

.strip-item.locked .ico{
color:red;
text-shadow:0 0 12px red;
}

/* ANIMATIONS */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flow{to{transform:translateY(10px)}}
@keyframes pulse{50%{opacity:.6}}