:root{
  --bg:#050807;
  --bg-soft:#0a0f0d;
  --panel:#0d1412;
  --line:#1c2b26;
  --green:#39ff14;
  --green-dim:#1f8f13;
  --green-soft:#8affa0;
  --amber:#ffb000;
  --red:#ff2b2b;
  --red-soft:#ff5a5a;
  --red-dim:#8f1f1f;
  --red-glow:rgba(255,43,43,.65);
  --text:#c8f7d0;
  --muted:#5d7a6b;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.6;
  min-height:100vh;
  background-image:
    radial-gradient(1200px 600px at 50% -10%, rgba(57,255,20,.08), transparent 60%),
    linear-gradient(transparent 95%, rgba(57,255,20,.04) 95%);
  background-size:auto, 100% 22px;
}

a{color:var(--green); text-decoration:none}
a:hover{text-shadow:0 0 8px var(--green)}

.prompt{color:var(--green); margin-right:.5rem}
.muted{color:var(--muted)}
.note{color:var(--muted); font-size:.85rem}

/* scanlines */
.scanlines{
  pointer-events:none; position:fixed; inset:0; z-index:9999;
  background:repeating-linear-gradient(
    to bottom, rgba(255,255,255,.02) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay; opacity:.35;
}

/* topbar */
.topbar{
  position:sticky; top:0; z-index:10;
  background:rgba(5,8,7,.85); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  max-width:1100px; margin:0 auto; padding:.8rem 1.2rem;
  display:flex; gap:1rem; align-items:center; justify-content:space-between;
  flex-wrap:wrap;
}
.topbar nav{display:flex; gap:1.2rem; flex-wrap:wrap}
.topbar nav a{color:var(--green-soft); font-size:.9rem}
.status{color:var(--green); font-size:.8rem; display:flex; align-items:center; gap:.4rem}
.dot{
  width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px var(--green); animation:pulse 1.6s infinite;
}
@keyframes pulse{50%{opacity:.35}}

main{max-width:1100px; margin:0 auto; padding:0 1.2rem}

/* hero */
.hero{padding:3rem 0 2rem; text-align:center}

.ascii{
  color:var(--red);
  font-size:clamp(4px, 1.1vw, 12px);
  line-height:1.05;
  text-shadow:0 0 12px var(--red-glow), 0 0 30px rgba(255,43,43,.35);
  margin:0 auto 1.5rem;
  white-space:pre;
  overflow:hidden;
  animation:asciiGlow 3.5s ease-in-out infinite;
}
@keyframes asciiGlow{
  0%,100%{ text-shadow:0 0 10px rgba(255,43,43,.5), 0 0 25px rgba(255,43,43,.2); }
  50%    { text-shadow:0 0 18px rgba(255,43,43,.95), 0 0 45px rgba(255,43,43,.5); }
}

.terminal{
  max-width:720px; margin:0 auto; text-align:left;
  background:var(--panel); border:1px solid var(--line);
  border-radius:8px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(57,255,20,.06), 0 30px 60px -30px rgba(57,255,20,.25);
}
.terminal__head{
  display:flex; align-items:center; gap:.4rem;
  padding:.5rem .8rem; background:#0a1210; border-bottom:1px solid var(--line);
}
.terminal__head .btn{width:10px;height:10px;border-radius:50%}
.btn.red{background:#ff5f56}.btn.yellow{background:#ffbd2e}.btn.green{background:#27c93f}
.terminal__title{margin-left:.6rem; color:var(--muted); font-size:.8rem}
.terminal__body{padding:1rem 1.1rem; font-size:.9rem}
.terminal__body p{margin:.25rem 0}
.terminal__body .out{color:var(--green-soft)}
.cursor{color:var(--green); animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.hero__cta{display:flex; gap:.8rem; justify-content:center; margin-top:2rem; flex-wrap:wrap}
.btn-primary, .btn-ghost{
  display:inline-block; padding:.7rem 1.1rem; border-radius:6px;
  font-family:var(--mono); font-size:.9rem; cursor:pointer; border:1px solid var(--green);
  transition:.15s;
}
.btn-primary{background:var(--green); color:#04120a; font-weight:700}
.btn-primary:hover{box-shadow:0 0 20px rgba(57,255,20,.6)}
.btn-ghost{background:transparent; color:var(--green)}
.btn-ghost:hover{background:rgba(57,255,20,.08)}

/* sections */
.section{padding:3.5rem 0 1rem; border-top:1px dashed var(--line)}
.section h2{
  font-size:1rem; font-weight:600; color:var(--green-soft);
  margin:0 0 1.5rem; letter-spacing:.02em;
}

.grid{display:grid; gap:1rem; grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:800px){.grid,.grid--3,.grid--2{grid-template-columns:1fr}}

.card{
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:1.1rem 1.2rem; position:relative;
}
.card h3{margin:0 0 .6rem; color:var(--green); font-size:.95rem}
.card p{margin:.3rem 0; color:var(--text); font-size:.9rem}

.tags{list-style:none; padding:0; margin:.3rem 0; display:flex; flex-wrap:wrap; gap:.4rem}
.tags li{
  font-size:.78rem; padding:.2rem .55rem; border:1px solid var(--green-dim);
  color:var(--green-soft); border-radius:4px; background:rgba(57,255,20,.05);
}
.certs{list-style:none; padding:0; margin:.3rem 0}
.certs li{padding-left:1.2rem; position:relative; font-size:.9rem}
.certs li:before{content:"[+]"; position:absolute; left:0; color:var(--green)}

/* cases */
.case{
  background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--green-dim);
  padding:1rem 1.2rem; border-radius:6px; margin-bottom:1rem;
}
.case header{display:flex; align-items:center; gap:.8rem; margin-bottom:.4rem; flex-wrap:wrap}
.case h3{margin:0; font-size:1rem; color:var(--green-soft)}
.case p{margin:.25rem 0; font-size:.9rem}
.sev{
  font-size:.7rem; padding:.15rem .5rem; border-radius:3px; font-weight:700; letter-spacing:.05em;
}
.sev.crit{background:var(--red); color:#120000}
.sev.high{background:var(--amber); color:#1a1100}
.sev.med{background:#2a8cff; color:#00101f}

/* ========================================================= */
/* writeups — КРАСНЫЙ АКЦЕНТ                                  */
/* ========================================================= */
#writeups{
  border-top:1px dashed rgba(78, 255, 43, 0.584);
}
#writeups h2{
  color:var(--green);
  text-shadow:0 0 10px rgba(255,43,43,.5);
}
#writeups h2 .prompt{
  color:var(--green);
}
.writeups{list-style:none; padding:0; margin:0}
.writeups li{
  display:flex; gap:1rem; padding:.6rem 0;
  border-bottom:1px dashed rgba(255, 43, 71, 0.35);
  align-items:baseline;
}
.writeups .date{
  color:var(--green);
  font-size:.85rem; min-width:80px;
  text-shadow:0 0 8px rgba(255,43,43,.45);
}
.writeups a{
  color:var(--red-soft);
}
.writeups a:hover{
  color:var(--red);
  text-shadow:0 0 10px rgba(255,43,43,.8);
}

/* contacts */
.contacts{list-style:none; padding:0; margin:0}
.contacts li{display:flex; gap:.6rem; padding:.25rem 0; font-size:.9rem}
.contacts span{color:var(--muted); min-width:90px}

/* form */
form label{display:block; margin-bottom:.7rem; font-size:.85rem; color:var(--green-soft)}
form input, form textarea{
  width:100%; margin-top:.3rem; padding:.55rem .7rem;
  background:#060d0a; color:var(--text); border:1px solid var(--line);
  border-radius:5px; font-family:var(--mono); font-size:.9rem; outline:none;
}
form input:focus, form textarea:focus{border-color:var(--green); box-shadow:0 0 0 3px rgba(57,255,20,.15)}
form .check{display:flex; align-items:center; gap:.5rem; color:var(--muted)}
form .check input{width:auto; margin:0}
form button{margin-top:.6rem}

/* footer */
.footer{
  max-width:1100px; margin:3rem auto 2rem; padding:1.5rem 1.2rem 0;
  border-top:1px dashed var(--line); text-align:center; font-size:.85rem;
}