:root {
    --radar-bg: #001100;
    --radar-grid: #003300;
    --radar-bright: #00ff00;
    --radar-dim: #00aa00;
    --radar-muted: #005500;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background-color: var(--radar-bg);
    color: var(--radar-bright);
    font-family: 'Courier New', Courier, monospace;
    overflow-x: hidden;
}

/* Radar Scope Background */
body::before {
    content: ''; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100vmin; height: 100vmin; border-radius: 50%;
    border: 2px solid var(--radar-muted);
    box-shadow: 0 0 100px var(--radar-grid) inset, 0 0 0 1px var(--radar-muted);
    z-index: -2;
}
body::after {
    content: ''; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100vmin; height: 100vmin; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 70%, rgba(0, 255, 0, 0.1) 90%, rgba(0, 255, 0, 0.4) 100%);
    animation: sweep 4s linear infinite;
    z-index: -1; pointer-events: none;
}
@keyframes sweep { 100% { transform: translate(-50%, -50%) rotate(360deg); } }

a { text-decoration: none; color: inherit; }

.sys-wrapper { max-width: 1100px; margin: 0 auto; padding: 20px; display: grid; gap: 20px; grid-template-columns: 250px 1fr; }

/* Left Sidebar - Terminal Panel */
.terminal-nav {
    border: 1px solid var(--radar-dim); background: rgba(0,17,0,0.8);
    padding: 20px; display: flex; flex-direction: column; gap: 20px;
    position: sticky; top: 20px; height: calc(100vh - 40px);
}
.t-brand { font-size: 24px; font-weight: bold; text-shadow: 0 0 5px var(--radar-bright); margin-bottom: 20px; border-bottom: 1px dashed var(--radar-dim); padding-bottom: 10px;}
.t-brand::before { content: 'root@KM-VPN:~$ '; font-size: 12px; display: block; color: var(--radar-dim);}
.menu a { display: block; padding: 10px 0; font-size: 14px; text-transform: lowercase; }
.menu a::before { content: './'; color: var(--radar-dim); }
.menu a:hover { background: var(--radar-muted); color: #fff;}
.t-btn { margin-top: auto; border: 1px solid var(--radar-bright); padding: 10px; text-align: center; font-weight: bold; background: rgba(0,255,0,0.1); cursor: pointer;}
.t-btn:hover { background: var(--radar-bright); color: var(--radar-bg);}

/* Main Screen */
.sys-main { display: flex; flex-direction: column; gap: 20px; }

/* Block styling */
.scan-block { border: 1px solid var(--radar-dim); background: rgba(0,17,0,0.8); padding: 30px; position: relative; }
.scan-block::before { content: '[SCAN_AREA]'; position: absolute; top: -10px; left: 20px; background: var(--radar-bg); padding: 0 5px; font-size: 12px; color: var(--radar-dim);}

/* Hero */
.h-text h1 { font-size: 40px; margin-bottom: 20px; text-transform: uppercase;}
.h-text h1::after { content: '█'; animation: blink 1s step-end infinite;}
@keyframes blink { 50% { opacity: 0; } }
.h-text p { font-size: 16px; color: var(--radar-dim); margin-bottom: 30px;}
.act-group { display: flex; gap: 20px; }

/* Data Array */
.data-array { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; border-bottom: 1px dashed var(--radar-dim); padding-bottom: 20px; margin-bottom: 20px;}
.da-item b { display: block; font-size: 28px; }
.da-item span { font-size: 12px; color: var(--radar-dim); }

.trust-log { display: flex; gap: 20px; font-size: 12px; color: var(--radar-muted); }

/* Grid for Features & Nodes */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.f-item { margin-bottom: 20px; }
.f-item h3 { font-size: 16px; margin-bottom: 10px; color: #fff; background: var(--radar-muted); display: inline-block; padding: 2px 10px;}
.f-item p { font-size: 14px; color: var(--radar-dim); }

.n-log { font-size: 14px; line-height: 2; }
.n-log span { color: #fff; margin-right: 10px; }
.n-log i { color: var(--radar-dim); font-style: normal;}

/* Feedback & Support */
.r-sys { margin-bottom: 20px; border-left: 2px solid var(--radar-bright); padding-left: 15px;}
.r-sys p { font-size: 14px; margin-bottom: 5px; }
.r-sys b { font-size: 12px; color: var(--radar-dim); }

.q-sys { margin-bottom: 15px; }
.q { cursor: pointer; font-weight: bold; }
.q::before { content: '>? '; color: var(--radar-dim);}
.a { display: none; padding-top: 5px; font-size: 14px; color: var(--radar-dim); padding-left: 25px;}

footer { text-align: center; font-size: 12px; color: var(--radar-muted); padding: 20px;}

@media (max-width: 800px) {
    .sys-wrapper { grid-template-columns: 1fr; }
    .terminal-nav { height: auto; position: static; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center;}
    .menu { flex-direction: row; flex-wrap: wrap; gap: 10px; }
    .menu a { padding: 5px; }
    .split-grid { grid-template-columns: 1fr; }
}