@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&display=swap');

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --bg:   #060a10;
  --bg-2: #090f18;
  --bg-3: #0d1520;
  --bg-4: #111d2c;

  --border:        rgba(28, 80, 150, .22);
  --border-bright: rgba(45, 140, 240, .52);

  --blue-400: #2a8ae8;
  --blue-300: #50b4ff;
  --blue-200: #90d0ff;
  --blue-100: #c8e8ff;

  --accent:      #1e8de8;
  --accent-soft: rgba(30, 141, 232, .08);
  --accent-line: rgba(30, 141, 232, .5);

  --cyan:   #00e5ff;
  --green:  #00e676;
  --amber:  #ffab00;
  --red:    #ff5252;
  --purple: #b388ff;

  --text:   #ddeeff;
  --text-2: #7a9abb;
  --text-3: #3d5a78;
  --text-4: #1e3048;

  --font-body: 'Bricolage Grotesque', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --t: .18s ease;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 68px; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background-image: radial-gradient(ellipse 100% 55% at 50% -5%, rgba(16, 65, 160, .15) 0%, transparent 65%);
}

/* ── Navbar ─────────────────────────────────────────────── */
.navbar {
  background: rgba(6, 10, 16, .96) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--border);
  padding: .7rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.navbar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 5%, var(--accent) 35%, var(--cyan) 65%, transparent 95%);
  opacity: .45;
}
.navbar-brand {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .95rem;
  color: var(--blue-300) !important;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.nav-link {
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--text-3) !important;
  letter-spacing: .02em;
  padding: .35rem .65rem !important;
  border-radius: var(--r-sm);
  transition: color var(--t), background var(--t);
}
.nav-link:hover { color: var(--blue-300) !important; background: var(--accent-soft); }
.nav-link.active {
  color: var(--blue-200) !important;
  background: rgba(30, 141, 232, .1);
  border: 1px solid rgba(30, 141, 232, .18);
}

.btn-github {
  font-family: var(--font-mono);
  font-size: .73rem;
  color: var(--text-3) !important;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .35rem .85rem !important;
  background: transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: all var(--t);
}
.btn-github:hover { color: var(--blue-300) !important; border-color: var(--border-bright); background: var(--accent-soft); }

.navbar-toggler { border: 1px solid var(--border) !important; border-radius: var(--r-sm) !important; padding: .35rem .5rem !important; }
.navbar-toggler:focus { box-shadow: none !important; outline: none !important; }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(122,154,187,.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  width: 1.2em !important; height: 1.2em !important;
}

/* Mobile collapse dropdown */
@media (max-width: 991px) {
  .navbar-collapse {
    background: rgba(6, 10, 16, .98);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    margin-top: .6rem;
    padding: .75rem;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .65);
  }
  .nav-link { min-height: 44px; display: flex !important; align-items: center; padding: .5rem .75rem !important; }
  .btn-github { width: 100%; justify-content: center; min-height: 44px; margin-top: .4rem; padding: .5rem 1rem !important; }
}

/* ── Page header (inner pages) ──────────────────────────── */
.page-header {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  padding: 3rem 0 2.5rem;
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 100% at 0 50%, rgba(30, 141, 232, .06) 0%, transparent 60%);
  pointer-events: none;
}
.page-header h1 {
  font-weight: 800;
  font-size: clamp(1.7rem, 4vw, 2.75rem);
  letter-spacing: -.04em;
  color: var(--text);
  margin-bottom: .4rem;
  position: relative;
}
.page-header .subtitle {
  font-size: .83rem;
  font-family: var(--font-mono);
  position: relative;
  margin: 0;
}
.breadcrumb { margin-bottom: 1rem; font-size: .7rem; font-family: var(--font-mono); position: relative; }
.breadcrumb-item a { text-decoration: none; transition: color var(--t); }
.breadcrumb-item a:hover { color: var(--accent); }
.breadcrumb-item.active { color: var(--text-3); }

/* ── Buttons ────────────────────────────────────────────── */
.btn-primary-hx {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: .9rem;
  font-family: var(--font-body);
  padding: .72rem 1.5rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: all var(--t);
  box-shadow: 0 0 22px rgba(30, 141, 232, .3), inset 0 1px 0 rgba(255,255,255,.1);
  position: relative;
  overflow: hidden;
}
.btn-primary-hx::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.07) 0%, transparent 55%); }
.btn-primary-hx:hover { color: #fff; background: var(--blue-400); transform: translateY(-2px); box-shadow: 0 0 36px rgba(30, 141, 232, .45); }
.btn-primary-hx:active { transform: translateY(0); }

.btn-secondary-hx {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-weight: 500;
  font-size: .9rem;
  font-family: var(--font-body);
  padding: .72rem 1.5rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: all var(--t);
}
.btn-secondary-hx:hover { color: var(--blue-300); border-color: var(--border-bright); background: var(--accent-soft); }
.btn-sm-hx { font-size: .77rem !important; padding: .38rem .9rem !important; border-radius: var(--r-sm) !important; }

/* ── Code ───────────────────────────────────────────────── */
code {
  font-family: var(--font-mono);
  font-size: .78em;
  background: rgba(16, 50, 110, .45);
  border: 1px solid rgba(30, 141, 232, .18);
  color: var(--blue-300);
  padding: .07rem .4rem;
  border-radius: var(--r-xs);
}
pre.codeblock {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 1.1rem 1.25rem;
  font-family: var(--font-mono);
  font-size: .79rem;
  color: var(--blue-200);
  overflow-x: auto;
  line-height: 1.8;
  margin-top: .875rem;
  position: relative;
}
pre.codeblock::before {
  content: 'sh';
  position: absolute;
  top: .5rem; right: .75rem;
  font-size: .58rem;
  color: var(--text-4);
  letter-spacing: .06em;
  text-transform: uppercase;
}
pre.codeblock code { background: none; border: none; padding: 0; font-size: inherit; color: inherit; }
pre.codeblock .cmd     { color: var(--blue-300); }
pre.codeblock .comment { color: var(--text-4); font-style: italic; }

/* ── Cards ──────────────────────────────────────────────── */
.card-dark {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  transition: border-color var(--t), box-shadow var(--t);
  position: relative;
}
.card-dark:hover { border-color: var(--border-bright); box-shadow: 0 8px 36px rgba(0,0,0,.4); }

/* ── Icon badges ─────────────────────────────────────────── */
.icon-badge {
  width: 42px; height: 42px; min-width: 42px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.icon-blue   { background: rgba(30,141,232,.12); color: var(--blue-300); border: 1px solid rgba(30,141,232,.2); }
.icon-cyan   { background: rgba(0,229,255,.08);  color: var(--cyan);     border: 1px solid rgba(0,229,255,.15); }
.icon-green  { background: rgba(0,230,118,.08);  color: #33e890;         border: 1px solid rgba(0,230,118,.18); }
.icon-amber  { background: rgba(255,171,0,.1);   color: #ffbe33;         border: 1px solid rgba(255,171,0,.2); }
.icon-red    { background: rgba(255,82,82,.1);   color: #ff7070;         border: 1px solid rgba(255,82,82,.2); }
.icon-purple { background: rgba(179,136,255,.1); color: var(--purple);   border: 1px solid rgba(179,136,255,.2); }
.icon-slate  { background: rgba(100,116,139,.12);color: #8899b0;         border: 1px solid rgba(100,116,139,.2); }

/* ── Alerts ─────────────────────────────────────────────── */
.alert-info-dark, .alert-warning-dark, .alert-success-dark {
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: .75rem 1rem;
  font-size: .82rem;
  font-family: var(--font-mono);
  line-height: 1.65;
}
.alert-info-dark    { background: rgba(30,141,232,.05); border: 1px solid rgba(30,141,232,.18); border-left: 2px solid var(--accent); color: var(--blue-200); }
.alert-warning-dark { background: rgba(255,171,0,.05);  border: 1px solid rgba(255,171,0,.18);  border-left: 2px solid var(--amber);  color: #ffd040; }
.alert-success-dark { background: rgba(0,230,118,.04);  border: 1px solid rgba(0,230,118,.18);  border-left: 2px solid var(--green);  color: #80f0b8; }
.alert-info-dark a, .alert-warning-dark a, .alert-success-dark a { color: inherit; text-decoration: underline; }

/* ── Sidebar TOC ─────────────────────────────────────────── */
.sidebar-sticky {
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  scrollbar-width: none;
}
.sidebar-sticky::-webkit-scrollbar { display: none; }
.toc {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: .875rem;
  overflow: hidden;
}
.toc h6 {
  font-family: var(--font-mono);
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: .5rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}
.toc a {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .76rem;
  font-family: var(--font-mono);
  color: var(--text-3);
  text-decoration: none;
  padding: .28rem .5rem;
  border-radius: var(--r-xs);
  border-left: 2px solid transparent;
  transition: all var(--t);
  margin-bottom: .03rem;
}
.toc a:hover { color: var(--blue-300); background: var(--accent-soft); border-left-color: var(--accent); padding-left: .75rem; }
.toc a i { font-size: .7rem; width: 13px; flex-shrink: 0; }
.toc .dot { width: 6px; height: 6px; min-width: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.toc .step-sm {
  width: 18px; height: 18px; min-width: 18px;
  background: var(--bg-4);
  border: 1px solid var(--accent-line);
  color: var(--blue-300);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .62rem;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

/* ── Tables ─────────────────────────────────────────────── */
.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  overflow-x: auto;
  background: var(--bg-2);
  -webkit-overflow-scrolling: touch;
}
.table-dark-hx {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .84rem;
  min-width: 480px;
}
.table-dark-hx thead th {
  background: rgba(6, 12, 22, .95);
  color: var(--text-4);
  font-family: var(--font-mono);
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 500;
  padding: .6rem .875rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table-dark-hx tbody tr { transition: background var(--t); }
.table-dark-hx tbody tr:hover { background: rgba(30,141,232,.04); }
.table-dark-hx tbody td {
  padding: .6rem .875rem;
  color: var(--text-2);
  vertical-align: middle;
  border-bottom: 1px solid rgba(25, 70, 140, .08);
}
.table-dark-hx tbody tr:last-child td { border-bottom: none; }
.table-dark-hx tbody td:first-child {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--blue-300);
  white-space: nowrap;
}
.td-muted { color: var(--text-3) !important; }

/* ── Badges & pills ─────────────────────────────────────── */
.badge-cap {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 500;
  padding: .1rem .42rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.badge-grad   { background: rgba(30,141,232,.12); color: var(--blue-200);  border: 1px solid rgba(30,141,232,.25); }
.badge-draft  { background: rgba(255,171,0,.1);   color: #ffc040;          border: 1px solid rgba(255,171,0,.22); }
.badge-vendor { background: rgba(179,136,255,.1); color: #c0a0ff;          border: 1px solid rgba(179,136,255,.22); }

.cat-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 500;
  padding: .1rem .42rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.cat-msg  { background: rgba(30,141,232,.1);   color: var(--blue-200); border: 1px solid rgba(30,141,232,.22); }
.cat-chan  { background: rgba(0,230,118,.08);   color: #60e8a0;         border: 1px solid rgba(0,230,118,.2); }
.cat-user  { background: rgba(255,171,0,.08);   color: #f0c040;         border: 1px solid rgba(255,171,0,.2); }
.cat-util  { background: rgba(179,136,255,.08); color: #c0a0ff;         border: 1px solid rgba(179,136,255,.2); }
.cat-op    { background: rgba(255,120,20,.08);  color: #f0a040;         border: 1px solid rgba(255,120,20,.18); }

/* ── Step numbers ────────────────────────────────────────── */
.step-num {
  width: 30px; height: 30px; min-width: 30px;
  background: var(--bg-4);
  border: 1px solid var(--accent-line);
  color: var(--blue-300);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .72rem;
  font-family: var(--font-mono);
}
.section-title {
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -.03em;
  color: var(--text);
  margin: 0;
}
.section-anchor { scroll-margin-top: 80px; }
.section-subhead {
  font-family: var(--font-mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-3);
  margin-bottom: .875rem;
}

/* ── Misc cards ─────────────────────────────────────────── */
.network-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .5rem .75rem;
  margin-bottom: .3rem;
  font-family: var(--font-mono);
  font-size: .77rem;
  transition: border-color var(--t);
}
.network-card:hover { border-color: var(--border-bright); }
.network-card strong { display: block; font-size: .77rem; color: var(--text); margin-bottom: .1rem; }

.mfr-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-left: 2px solid rgba(30,141,232,.35);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: .7rem 1rem;
  margin-bottom: .35rem;
  font-size: .79rem;
  color: var(--text-2);
  font-family: var(--font-mono);
  transition: border-color var(--t);
}
.mfr-card:hover { border-left-color: var(--accent); border-color: var(--border-bright); }
.mfr-card strong { display: block; color: var(--text); margin-bottom: .25rem; }

.note-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1.1rem 1.25rem;
  margin-bottom: .875rem;
  font-size: .82rem;
  color: var(--text-2);
  font-family: var(--font-mono);
}
.note-card strong { color: var(--text); }

.perm-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: .875rem 1.125rem;
  margin-bottom: .375rem;
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  transition: border-color var(--t);
}
.perm-card:hover { border-color: var(--border-bright); }
.perm-card strong { font-size: .79rem; color: var(--text); display: block; font-family: var(--font-mono); }
.perm-card span   { font-size: .77rem; color: var(--text-3); font-family: var(--font-mono); }

.summary-card {
  background: rgba(0,230,118,.03);
  border: 1px solid rgba(0,230,118,.16);
  border-left: 2px solid var(--green);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.summary-card h3 { font-size: .92rem; font-weight: 700; color: #50d890; margin-bottom: .75rem; font-family: var(--font-mono); }
.summary-card ul { font-size: .8rem; color: #80d8a8; line-height: 1.85; font-family: var(--font-mono); padding-left: 1.1rem; }

/* ── Policy ─────────────────────────────────────────────── */
.policy-section { margin-bottom: 2.25rem; }
.policy-section h2 { font-size: .93rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; font-family: var(--font-mono); }
.policy-section h2 i { color: var(--accent); }
.policy-section p, .policy-section li { font-size: .82rem; color: var(--text-2); line-height: 1.8; font-family: var(--font-mono); }
.policy-section ul { padding-left: 1.2rem; }
.policy-section li { margin-bottom: .35rem; }
.policy-section strong { color: var(--text); }

/* ── Search ─────────────────────────────────────────────── */
.search-wrap { position: relative; }
.search-wrap .bi { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-4); pointer-events: none; }
.search-wrap input {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: .75rem 1rem .75rem 2.75rem;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: .85rem;
  transition: border-color var(--t), box-shadow var(--t);
}
.search-wrap input::placeholder { color: var(--text-4); }
.search-wrap input:focus { outline: none; border-color: var(--border-bright); box-shadow: 0 0 0 3px rgba(30,141,232,.09); }

.cmd-row.hidden-row { display: none; }
#no-results { display: none; text-align: center; padding: 2.5rem; color: var(--text-4); font-size: .83rem; font-family: var(--font-mono); }

/* ── Animations ─────────────────────────────────────────── */
@keyframes pulse-dot {
  0%,100% { opacity: 1; box-shadow: 0 0 4px var(--accent); }
  50%      { opacity: .3; box-shadow: 0 0 8px var(--accent); }
}
.pulse-dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; display: inline-block; animation: pulse-dot 2s infinite; }
.glow-line { height: 1px; background: linear-gradient(90deg, transparent 5%, var(--accent) 40%, var(--cyan) 60%, transparent 95%); opacity: .25; }

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  padding: 5.5rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -80px; right: -60px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(30,141,232,.07) 0%, transparent 65%);
  pointer-events: none;
}
.hero::after {
  content: 'IRC';
  position: absolute;
  right: -1rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-weight: 900;
  font-size: clamp(9rem, 16vw, 18rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(30,141,232,.05);
  pointer-events: none;
  line-height: 1;
  user-select: none;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(30,141,232,.07);
  border: 1px solid rgba(30,141,232,.2);
  color: var(--blue-300);
  padding: .22rem .7rem .22rem .55rem;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .03em;
  margin-bottom: 1.5rem;
}
.hero h1 {
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.05em;
  color: var(--text);
  margin-bottom: 1.25rem;
}
.hero h1 em {
  font-style: normal;
  color: var(--accent);
  position: relative;
}
.hero h1 em::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  border-radius: 1px;
  opacity: .4;
}
.hero-desc { font-size: 1.02rem; color: var(--text-2); line-height: 1.75; margin-bottom: 1.75rem; font-weight: 300; }
.hero-btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; align-items: center; }
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem 1.25rem;
  font-size: .7rem;
  color: var(--text-4);
  font-family: var(--font-mono);
}
.hero-meta span { display: flex; align-items: center; gap: .35rem; }

/* Phone mockup */
.phone-frame {
  max-width: 220px;
  margin: 0 auto;
  filter: drop-shadow(0 28px 56px rgba(30,141,232,.18));
  transition: transform .4s ease, filter .4s ease;
}
.phone-frame:hover { transform: translateY(-8px) rotate(.8deg); filter: drop-shadow(0 44px 72px rgba(30,141,232,.3)); }
.phone-frame img { width: 100%; border-radius: 20px; border: 1px solid rgba(42,130,230,.3); display: block; }

/* ── Stats strip ────────────────────────────────────────── */
.stats-strip {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2.25rem 0;
}
.stat-num { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; color: var(--blue-300); line-height: 1; display: block; letter-spacing: -.04em; margin-bottom: .3rem; }
.stat-label { font-size: .62rem; color: var(--text-4); display: block; text-transform: uppercase; letter-spacing: .1em; font-family: var(--font-mono); }

/* ── Feature cards ──────────────────────────────────────── */
.feat-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.375rem;
  height: 100%;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
  position: relative;
  overflow: hidden;
}
.feat-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; transition: opacity var(--t); }
.feat-card:hover { border-color: var(--border-bright); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.feat-card:hover::after { opacity: 1; }
.feat-card h3 { font-weight: 700; font-size: .95rem; color: var(--text); margin-bottom: .45rem; letter-spacing: -.02em; }
.feat-card p  { font-size: .81rem; color: var(--text-3); margin: 0; line-height: 1.7; }

/* ── Cap chips ──────────────────────────────────────────── */
.caps-section {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 3.25rem 0;
}
.cap-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .66rem;
  background: rgba(8,18,36,.9);
  border: 1px solid rgba(24,72,140,.32);
  color: var(--blue-300);
  padding: .2rem .55rem;
  border-radius: var(--r-xs);
  margin: .16rem;
  transition: all var(--t);
  cursor: default;
}
.cap-chip:hover { background: rgba(30,141,232,.1); border-color: var(--border-bright); color: var(--blue-200); transform: translateY(-1px); }

/* ── Quick doc cards ────────────────────────────────────── */
.quick-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.375rem;
  height: 100%;
  text-decoration: none;
  display: block;
  color: inherit;
  transition: all var(--t);
  position: relative;
  overflow: hidden;
}
.quick-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--cyan)); opacity: 0; transition: opacity var(--t); }
.quick-card:hover { color: inherit; border-color: var(--border-bright); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.quick-card:hover::before { opacity: 1; }
.quick-card .qc-icon { font-size: 1.5rem; color: var(--accent); margin-bottom: .75rem; display: block; }
.quick-card h3 { font-size: .88rem; font-weight: 700; color: var(--text); margin-bottom: .3rem; letter-spacing: -.02em; }
.quick-card p  { font-size: .74rem; color: var(--text-3); margin: 0; line-height: 1.6; font-family: var(--font-mono); }

/* ── Section headings ───────────────────────────────────── */
.sec-heading { font-weight: 800; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.03em; color: var(--text); margin: 0; }
.sec-sub { color: var(--text-2); font-size: .93rem; margin-top: .5rem; }

/* ── Doc prose ──────────────────────────────────────────── */
.doc-text    { font-size: .9rem; line-height: 1.78; }
.doc-text-sm { font-size: .85rem; line-height: 1.75; }
.doc-list    { font-size: .9rem; color: var(--text-2); line-height: 1.82; padding-left: 1.2rem; }
.doc-list li { margin-bottom: .35rem; }
.doc-list strong, .doc-text strong, .doc-text-sm strong { color: var(--text); }
.doc-list em { color: var(--text-3); font-style: italic; }
.card-title  { font-weight: 700; font-size: 1rem; color: var(--text); margin: 0; }
.card-body-sm { font-size: .875rem; color: var(--text-2); }

/* ── Footer ─────────────────────────────────────────────── */
footer {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding: 3rem 0 1.75rem;
  margin-top: 5rem;
  position: relative;
}
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 5%, var(--accent) 40%, var(--cyan) 60%, transparent 95%);
  opacity: .3;
}
.footer-brand { font-family: var(--font-mono); font-size: .88rem; color: var(--blue-300); margin-bottom: .6rem; letter-spacing: .02em; }
footer p { font-size: .76rem; color: var(--text-3); line-height: 1.7; font-family: var(--font-mono); }
footer a { color: var(--text-3); text-decoration: none; transition: color var(--t); }
footer a:hover { color: var(--blue-300); }
.footer-heading { font-family: var(--font-mono); font-size: .58rem; text-transform: uppercase; letter-spacing: .14em; color: var(--text-4); margin-bottom: .875rem; }
footer ul { list-style: none; }
footer ul li { margin-bottom: .375rem; }
footer ul li a { font-size: .76rem; font-family: var(--font-mono); }
.social-btn {
  width: 34px; height: 34px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  text-decoration: none;
  font-size: .88rem;
  transition: all var(--t);
}
.social-btn:hover { color: var(--blue-300); border-color: var(--border-bright); background: var(--accent-soft); }
.footer-bottom {
  border-top: 1px solid var(--border);
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  font-size: .66rem;
  color: var(--text-4);
  font-family: var(--font-mono);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
}
.footer-bottom a { color: var(--text-4); }
.footer-bottom a:hover { color: var(--text-3); }

/* ── Utility ─────────────────────────────────────────────── */
.text-accent { color: var(--accent) !important; }
.text-dim    { color: var(--text-3); }
hr.hx { border-color: var(--border); margin: 2rem 0; opacity: 1; }

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */

/* ── ≤991px ────────────────── */
@media (max-width: 991px) {
  .hero { padding: 3.5rem 0 3rem; }
  .hero::after { font-size: clamp(6rem, 20vw, 10rem); }
  .phone-frame { max-width: 180px; }
}

/* ── ≤767px ────────────────── */
@media (max-width: 767px) {
  .hero { padding: 2.5rem 0 2rem; }
  .hero::after { display: none; }
  .hero h1 { font-size: clamp(1.75rem, 8vw, 2.3rem); }
  .hero-desc { font-size: .93rem; }
  .hero-btns { flex-direction: column; align-items: stretch; gap: .5rem; }
  .hero-btns > * { justify-content: center; width: 100%; min-height: 48px; }
  .hero-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .75rem; }

  .stats-strip { padding: 1.75rem 0; }
  .stat-num { font-size: 1.65rem; }

  .feat-card { padding: 1.1rem; }

  .page-header { padding: 2rem 0 1.75rem; }
  .page-header h1 { font-size: 1.5rem; }

  .card-dark { padding: 1.125rem; }

  footer { margin-top: 3rem; padding: 2rem 0 1.25rem; }
  .footer-bottom { flex-direction: column; gap: .25rem; }

  .btn-primary-hx,
  .btn-secondary-hx { min-height: 44px; }

  .social-btn { width: 44px; height: 44px; }

  .doc-list, .doc-text { font-size: .87rem; }
}

/* ── ≤575px ────────────────── */
@media (max-width: 575px) {
  .hero { padding: 2rem 0 1.5rem; }
  .stat-num { font-size: 1.45rem; }
  .page-header { padding: 1.5rem 0 1.25rem; }
  .page-header h1 { font-size: 1.3rem; }
  .cap-chip { font-size: .6rem; }
  .cat-pill, .badge-cap { font-size: .56rem; }
  .quick-card { padding: 1rem; }
  .quick-card h3 { font-size: .82rem; }
  .footer-bottom { font-size: .6rem; }
  .table-dark-hx { font-size: .78rem; }
}

/* ── Dot colour helpers ──────────────────────────────── */
.dot-red    { background: #f87171; }
.dot-amber  { background: #fbbf24; }
.dot-blue   { background: #60a5fa; }
.dot-purple { background: #a78bfa; }
.dot-green  { background: #4ade80; }
.dot-slate  { background: #94a3b8; }

/* ── Misc helpers ────────────────────────────────────── */
.footer-irc-note { font-size: .76rem; margin-top: .4rem; font-family: var(--font-mono); }
.warn-sidebar { border-color: rgba(245,158,11,.25) !important; background: rgba(245,158,11,.03) !important; }
.section-last { margin-bottom: 0; }
.dcc-security { border-radius: var(--r-lg); padding: 1.5rem; }
.sec-heading-sm { font-size: 1.3rem !important; }