:root{
  --bg: #0f141b;
  --panel: #171f29;
  --panel-2: #1d2732;
  --line: #2a3644;
  --amber: #f5a623;
  --teal: #3ecfb0;
  --red: #e2503f;
  --text: #e9edf2;
  --dim: #93a1b0;
  --dim-2: #63707e;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(62,207,176,0.08), transparent 60%),
    radial-gradient(ellipse 700px 500px at 90% 0%, rgba(245,166,35,0.07), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  line-height:1.5;
  min-height:100vh;
}
h1,h2,h3,.display{font-family:'Archivo Expanded',sans-serif;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;}

/* ===== Nav ===== */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px;
  background:rgba(15,20,27,0.88);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:0.5px; font-size:1.05rem; text-decoration:none;}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--amber); box-shadow:0 0 12px var(--amber); animation:pulse 2.2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}
.navlinks{display:flex; gap:6px;}
.navlinks a{
  color:var(--dim); text-decoration:none; font-size:0.85rem; font-weight:600;
  padding:8px 14px; border-radius:999px; letter-spacing:0.3px;
  text-transform:uppercase; transition:all .2s;
}
.navlinks a:hover{color:var(--text); background:var(--panel-2);}
.navlinks a.active{color:var(--text); background:var(--panel-2);}

/* ===== Hero ===== */
.hero{
  padding:90px 32px 70px;
  max-width:1100px; margin:0 auto;
  border-bottom:1px solid var(--line);
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--amber); font-size:0.78rem; letter-spacing:2px; text-transform:uppercase;
  font-weight:600; margin-bottom:18px;
}
.eyebrow::before{content:''; width:18px; height:2px; background:var(--amber); display:inline-block;}
.hero h1{
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  line-height:0.98; margin:0 0 22px; font-weight:800;
  letter-spacing:-1px;
}
.hero h1 .accent{color:var(--teal);}
.hero p{color:var(--dim); max-width:640px; font-size:1.08rem; margin:0 0 34px;}
.hero-stats{display:flex; gap:36px; flex-wrap:wrap;}
.stat-block{border-left:2px solid var(--line); padding-left:14px;}
.stat-num{font-family:'IBM Plex Mono',monospace; font-size:1.6rem; font-weight:600; color:var(--text);}
.stat-label{font-size:0.72rem; color:var(--dim-2); text-transform:uppercase; letter-spacing:1px;}

/* ===== Category nav cards (home page) ===== */
.cat-nav{
  max-width:1100px; margin:0 auto; padding:20px 32px 100px;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
}
.cat-card{
  display:block; text-decoration:none; color:var(--text);
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line);
  border-radius:16px;
  padding:32px 26px 28px;
  position:relative; overflow:hidden;
  transition:transform .25s ease, border-color .25s ease;
}
.cat-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--card-accent, var(--teal));
}
.cat-card:hover{transform:translateY(-4px); border-color:var(--card-accent, var(--teal));}
.cat-card .idx{
  font-family:'IBM Plex Mono',monospace; font-size:0.75rem; color:var(--card-accent, var(--teal));
  letter-spacing:1px; margin-bottom:18px; display:block;
}
.cat-card h2{font-size:1.7rem; margin:0 0 12px; font-weight:800;}
.cat-card p{color:var(--dim); font-size:0.92rem; margin:0 0 22px;}
.cat-card .count{
  font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--dim-2);
  border-top:1px solid var(--line); padding-top:14px;
  display:flex; align-items:center; justify-content:space-between;
}
.cat-card .arrow{color:var(--card-accent, var(--teal)); font-size:1.1rem; transition:transform .2s;}
.cat-card:hover .arrow{transform:translateX(4px);}
.cat-card.probes{--card-accent:var(--teal);}
.cat-card.interceptors{--card-accent:var(--red);}
.cat-card.chasers{--card-accent:var(--amber);}

/* ===== Section shell (category pages) ===== */
section.category{
  max-width:1100px; margin:0 auto; padding:60px 32px 90px;
}
.cat-head{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:38px;}
.cat-head h1{font-size:2.4rem; margin:0; font-weight:800; letter-spacing:-0.5px;}
.cat-tag{
  font-family:'IBM Plex Mono',monospace; font-size:0.75rem;
  color:var(--dim-2); border:1px solid var(--line); padding:6px 12px; border-radius:6px;
}
.cat-desc{color:var(--dim); max-width:620px; margin:10px 0 0; font-size:0.98rem;}

.back-link{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--dim); text-decoration:none; font-size:0.85rem; font-weight:600;
  margin-bottom:26px; transition:color .2s;
}
.back-link:hover{color:var(--text);}

/* ===== Cards ===== */
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:20px;}
.card{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line);
  border-radius:14px;
  padding:24px;
  position:relative;
  overflow:hidden;
  transition:transform .25s ease, border-color .25s ease;
}
.card:hover{transform:translateY(-3px); border-color:var(--card-accent, var(--teal));}
.card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--card-accent, var(--teal));
}
.card-name{font-size:1.25rem; font-weight:700; margin:2px 0 4px; font-family:'Archivo Expanded',sans-serif;}
.card-sub{color:var(--card-accent, var(--teal)); font-size:0.78rem; text-transform:uppercase; letter-spacing:1px; font-weight:600; margin-bottom:14px;}
.card-desc{color:var(--dim); font-size:0.92rem; margin-bottom:16px;}
.meta-row{
  display:flex; gap:8px; padding:8px 0; border-top:1px solid var(--line); font-size:0.82rem;
}
.meta-row:first-of-type{border-top:1px solid var(--line); margin-top:4px;}
.meta-k{color:var(--dim-2); min-width:96px; flex-shrink:0; font-family:'IBM Plex Mono',monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.5px; padding-top:2px;}
.meta-v{color:var(--text);}
.note{font-size:0.78rem; color:var(--dim-2); margin-top:12px; font-style:italic; line-height:1.4;}

.probes .card{--card-accent:var(--teal);}
.interceptors .card{--card-accent:var(--red);}
.chasers .card{--card-accent:var(--amber);}

/* ===== Subsections within a category (e.g. interceptor tiers) ===== */
.subsection{margin-top:56px;}
.subsection:first-of-type{margin-top:0;}
.sub-head{
  display:flex; align-items:baseline; gap:14px; margin-bottom:6px;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.sub-head h3{
  font-size:1.3rem; margin:0; font-weight:800; white-space:nowrap;
}
.sub-head .sub-desc{color:var(--dim); font-size:0.88rem; margin:0;}
.subsection .grid{margin-top:22px;}
.tier-note{
  font-size:0.8rem; color:var(--dim-2); background:var(--panel);
  border:1px solid var(--line); border-radius:10px; padding:12px 16px;
  margin-bottom:22px; line-height:1.5;
}

footer{
  max-width:1100px; margin:0 auto; padding:50px 32px 70px;
  color:var(--dim-2); font-size:0.85rem;
  border-top:1px solid var(--line);
}

@media (max-width:800px){
  .cat-nav{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .topbar{padding:14px 18px;}
  .navlinks{display:none;}
  .hero{padding:60px 18px 50px;}
  section.category{padding:50px 18px;}
  .cat-nav{padding:20px 18px 70px;}
}