body {
margin:0;
height:100vh;
display:flex;
flex-direction:column;
font-family:Arial, sans-serif;
color:#cfe7ff;
background:#050914;
overflow:hidden;
}

.space {
position:fixed;
inset:0;
z-index:-1;
background:radial-gradient(circle at center,#061a33 0%,#020713 100%);
}

.space::before {
content:"";
position:absolute;
inset:0;
background-image:
radial-gradient(2px 2px at 10% 20%, #7cc7ff, transparent),
radial-gradient(2px 2px at 50% 50%, #ffffff, transparent),
radial-gradient(2px 2px at 80% 30%, #7fb8ff, transparent),
radial-gradient(2px 2px at 30% 70%, #00ffff, transparent),
radial-gradient(1px 1px at 60% 10%, #ffffff, transparent),
radial-gradient(1px 1px at 20% 80%, #7cc7ff, transparent);
background-size:400px 400px;
animation:drift 120s linear infinite;
opacity:.25;
}

@keyframes drift {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}

.crt-overlay {
position:fixed;
inset:0;
background:linear-gradient(rgba(18,16,16,0)50%,rgba(0,0,0,.15)50%),
linear-gradient(90deg,rgba(0,120,255,.05),rgba(0,255,255,.02));
background-size:100% 3px,3px 100%;
z-index:10;
pointer-events:none;
}

.scanlines {
position:fixed;
inset:0;
background:repeating-linear-gradient(to bottom,transparent,transparent 3px,rgba(0,120,255,.05)4px);
z-index:11;
pointer-events:none;
animation:scanline 8s linear infinite;
}

@keyframes scanline {
from {transform:translateY(0);}
to {transform:translateY(100%);}
}

.frame {
display:flex;
justify-content:center;
align-items:center;
height:100%;
padding:20px;
box-sizing:border-box;
z-index:2;
}

.container {
width:100%;
max-width:900px;
display:flex;
flex-direction:column;
gap:20px;
}

.header {
text-align:left;
border-bottom:1px solid rgba(124,199,255,.3);
padding-bottom:10px;
}

.title {
font-size:1.4rem;
margin:0;
letter-spacing:2px;
color:#7cc7ff;
}

.subtitle {
font-size:.65rem;
color:#ff2b2b;
margin-top:5px;
letter-spacing:2px;
position:relative;
animation:glitch 1.5s infinite;
}

.subtitle::before,
.subtitle::after {
content:"NOT YOUR AVERAGE PENTESTER";
position:absolute;
left:0;
top:0;
width:100%;
overflow:hidden;
}

.subtitle::before {
color:#ff2b2b;
transform:translate(1px,0);
opacity:.6;
animation:glitch 1.5s infinite;
}

.subtitle::after {
color:#7cc7ff;
transform:translate(-1px,0);
opacity:.4;
animation:glitch 1.2s infinite reverse;
}

@keyframes glitch {
0% {transform:translate(0);}
20% {transform:translate(-1px,1px);}
40% {transform:translate(1px,-1px);}
60% {transform:translate(-1px,0);}
80% {transform:translate(1px,1px);}
100% {transform:translate(0);}
}

.nav {
display:flex;
gap:20px;
}

.nav a {
color:#7cc7ff;
text-decoration:none;
font-size:.85rem;
padding:5px 10px;
border:1px solid rgba(124,199,255,.4);
background:rgba(0,120,255,.08);
transition:.2s;
}

.nav a:hover {
background:#7cc7ff;
color:#050914;
box-shadow:0 0 10px #7cc7ff;
}

.content {
display:flex;
justify-content:center;
}

.panel {
width:100%;
max-width:800px;
background:rgba(10,20,40,.92);
border:1px solid #2b6fb8;
box-shadow:0 0 20px rgba(0,120,255,.2);
backdrop-filter:blur(6px);
}

.section-title {
padding:10px 15px;
font-size:.75rem;
letter-spacing:2px;
color:#7cc7ff;
border-bottom:1px solid rgba(43,111,184,.5);
background:#081a33;
}

.description {
padding:15px;
font-size:.95rem;
line-height:1.6;
}

.footer {
display:flex;
justify-content:center;
gap:25px;
padding:15px 0;
border-top:1px solid rgba(124,199,255,.3);
}

.footer a {
color:#7cc7ff;
text-decoration:none;
font-size:.8rem;
transition:.2s;
}

.footer a:hover {
color:#ffffff;
text-shadow:0 0 8px #7cc7ff;
}

.cursor {
animation:blink 1s step-end infinite;
}

@keyframes blink {
50% {opacity:0;}
}