:root{
  --bg:#0a0908;
  --card:#17110f;
  --card-border:#2b1816;
  --red:#c62828;
  --red-bright:#e63946;
  --red-glow:rgba(230,57,70,.35);
  --text:#ece7e5;
  --muted:#9b8f8c;
  --mono: 'Consolas','Courier New',monospace;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:radial-gradient(ellipse at top, #1a0f0e 0%, var(--bg) 55%), var(--bg);
  color:var(--text);
  font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.55;
}
a{color:var(--red-bright);text-decoration:none}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:760px}

.topnav{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:16px 24px;border-bottom:1px solid var(--card-border);
  background:#0d0a09;
}
.topnav .brand-link{
  font-family:var(--mono);font-weight:bold;letter-spacing:.04em;
  color:#fff;font-size:1rem;margin-right:10px;
}
.topnav .tabs{display:flex;gap:18px;flex-wrap:wrap}
.topnav .tabs a{color:var(--muted);font-size:.88rem;font-family:var(--mono)}
.topnav .tabs a:hover{color:var(--red-bright)}
.topnav .tabs a.active{color:var(--red-bright);border-bottom:2px solid var(--red-bright);padding-bottom:3px}

.cat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;padding:40px 0 20px}
.tile{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  background:var(--card);border:1px solid var(--card-border);border-radius:12px;
  padding:30px 16px;transition:border-color .15s, transform .15s;
}
.tile:hover{border-color:var(--red);transform:translateY(-3px)}
.tile-icon{width:46px;height:46px;color:var(--red-bright);filter:drop-shadow(0 0 14px var(--red-glow))}
.tile-icon svg{width:100%;height:100%}
.tile h3{margin:0;color:#fff;font-size:1.05rem}
.tile span{color:var(--muted);font-family:var(--mono);font-size:.78rem}

.about .contact{margin-top:14px;font-family:var(--mono);font-size:.9rem}

header.hero{
  padding:60px 20px 40px;
  text-align:center;
  border-bottom:1px solid var(--card-border);
  background:
    repeating-linear-gradient(0deg, rgba(198,40,40,.04) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(198,40,40,.04) 0 1px, transparent 1px 40px);
  position:relative;
}
header.hero.small{padding:40px 20px 30px}
header.hero .back{
  position:absolute;top:20px;left:20px;
  font-family:var(--mono);font-size:.85rem;color:var(--muted);
}
header.hero .back:hover{color:var(--red-bright)}
header.hero img.logo{
  width:130px;height:130px;border-radius:18px;
  box-shadow:0 0 50px var(--red-glow);
  margin-bottom:16px;
}
header.hero .proj-icon{
  width:64px;height:64px;margin:0 auto 14px;color:var(--red-bright);
  filter:drop-shadow(0 0 16px var(--red-glow));
}
header.hero .proj-icon svg{width:100%;height:100%}
header.hero h1{
  font-family:var(--mono);
  letter-spacing:.1em;
  font-size:2.3rem;
  margin:0 0 8px;
  color:#fff;
  text-shadow:0 0 18px var(--red-glow);
}
header.hero.small h1{font-size:1.5rem;letter-spacing:.03em}
header.hero .tagline{color:var(--muted);font-size:1rem;margin-bottom:6px}

section.cat{padding:46px 0 6px}
section.cat h2{
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);
  font-size:1.2rem;
  color:var(--red-bright);
  border-bottom:1px solid var(--card-border);
  padding-bottom:12px;
  margin-bottom:20px;
  letter-spacing:.02em;
}
section.cat h2 svg{width:28px;height:28px;flex-shrink:0}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{
  display:block;
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:10px;
  padding:18px;
  transition:border-color .15s, transform .15s;
}
.card:hover{border-color:var(--red);transform:translateY(-2px)}
.card-icon{width:34px;height:34px;color:var(--red-bright);opacity:.85;margin-bottom:10px}
.card-icon svg{width:100%;height:100%}
.card h3{margin:0 0 6px;font-size:1rem;color:#fff}
.card p{margin:0 0 12px;color:var(--muted);font-size:.87rem}

.badge{
  display:inline-block;font-family:var(--mono);font-size:.68rem;
  padding:3px 9px;border-radius:20px;letter-spacing:.03em;
}
.b-done{background:rgba(76,175,80,.15);color:#81c784;border:1px solid rgba(76,175,80,.35)}
.b-dev{background:rgba(255,179,0,.15);color:#ffcc66;border:1px solid rgba(255,179,0,.35)}
.b-plan{background:rgba(155,143,140,.12);color:var(--muted);border:1px solid var(--card-border)}

.pblock{padding:22px 0;border-bottom:1px solid var(--card-border)}
.pblock h2{font-family:var(--mono);font-size:.95rem;color:var(--red-bright);margin:0 0 8px;letter-spacing:.03em;text-transform:uppercase}
.pblock p{margin:0;color:#d8d0ce}

section.about{max-width:700px;margin:50px auto 0;padding:30px 20px;border-top:1px solid var(--card-border)}
section.about h2{font-family:var(--mono);font-size:1rem;color:var(--red-bright);letter-spacing:.03em;margin-bottom:10px}
section.about p{color:#c9bfbc;font-size:.93rem}

footer{text-align:center;padding:30px 20px 50px;color:var(--muted);font-family:var(--mono);font-size:.78rem}