:root{
    --bg: #0A0E17;
    --bg-elevated: #121729;
    --bg-elevated-2: #161D33;
    --line: #232B41;
    --line-soft: #1A2035;
    --text-primary: #E9EDF7;
    --text-secondary: #8A96B8;
    --text-tertiary: #5D688A;
    --accent: #2F6FEF;
    --accent-soft: #17335E;
    --accent-glow: rgba(47,111,239,0.35);
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --display: 'Space Grotesk', sans-serif;
    --body: 'Satoshi', sans-serif;
    --maxw: 1120px;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--text-primary);
    font-family:var(--body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; }

  ::selection{ background:var(--accent); color:#fff; }

  :focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
    border-radius:4px;
  }

  .wrap{ max-width:var(--maxw); margin:0 auto; padding:5px 28px; }

  /* Background texture: faint grid, evokes network topology / graph paper without being loud */
  body::before{
    content:"";
    position:fixed; inset:0;
    background-image:
      linear-gradient(var(--line-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size: 64px 64px;
    opacity:0.35;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 10%, transparent 70%);
    pointer-events:none;
    z-index:0;
  }

  /* ---------- NAV ---------- */
  header.nav{
    position:sticky; top:0; z-index:50;
    background:rgba(10,14,23,0.82);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 28px;
  }
  .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
  .brand-icon{ width:30px; height:30px; flex-shrink:0; }
  .brand-word{
    font-family:var(--display); font-weight:700; font-size:19px;
    letter-spacing:-0.01em;
  }
  .brand-word span{ color:var(--accent); }
  nav.links{ display:flex; gap:40px; align-items:center; }
  nav.links a{
    text-decoration:none; color:var(--text-secondary);
    font-size:14.5px; font-weight:500;
    transition:color .15s ease;
  }
  nav.links a:hover{ color:var(--text-primary); }
  .nav-cta{
    color:var(--text-primary) !important;
    border:1px solid var(--line);
    padding:10px 20px;
    border-radius:7px;
    transition:border-color .15s ease, background .15s ease;
  }
  .nav-cta:hover{ border-color:var(--accent); background:var(--accent-soft); }

  @media (max-width:640px){
    nav.links a:not(.nav-cta){ display:none; }
  }

  /* ---------- HERO ---------- */
  .hero{ position:relative; z-index:1; padding:96px 0 72px; }
  .eyebrow{
    font-family:var(--mono); font-size:13px; color:var(--text-tertiary);
    letter-spacing:0.04em; margin-bottom:28px;
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow .dot{
    width:7px; height:7px; border-radius:50%; background:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);
  }

  /* traceroute signature element */
  .trace{
    font-family:var(--mono); font-size:14px; line-height:1.9;
    color:var(--text-secondary);
    background:var(--bg-elevated);
    border:1px solid var(--line);
    border-radius:10px;
    padding:22px 26px;
    max-width:640px;
    margin-bottom:44px;
  }
  .trace-title{ color:var(--text-tertiary); font-size:12.5px; margin-bottom:12px; }
  .trace-line{
    display:grid; grid-template-columns:22px 1fr auto; gap:14px;
    opacity:0; transform:translateY(4px);
    animation:hopIn 0.5s ease forwards;
  }
  .trace-line .hop{ color:var(--text-tertiary); }
  .trace-line .host{ color:var(--text-secondary); }
  .trace-line .status{ text-align:right; }
  .trace-line.ok .status{ color:#4ADE80; }
  .trace-line.pending .status{ color:#F5B942; }
  .trace-line.final{ color:var(--text-primary); font-weight:500; }
  .trace-line.final .host{ color:var(--text-primary); }
  .trace-line.final .status{ color:var(--accent); }

  .trace-line:nth-child(2){ animation-delay:0.15s; }
  .trace-line:nth-child(3){ animation-delay:0.35s; }
  .trace-line:nth-child(4){ animation-delay:0.55s; }
  .trace-line:nth-child(5){ animation-delay:0.75s; }
  .trace-line:nth-child(6){ animation-delay:0.95s; }
  .trace-line:nth-child(7){ animation-delay:1.2s; }

  @keyframes hopIn{ to{ opacity:1; transform:translateY(0); } }

  @media (prefers-reduced-motion: reduce){
    .trace-line{ animation:none; opacity:1; transform:none; }
  }

  h1{
    font-family:var(--display); font-weight:700;
    font-size:clamp(34px, 5vw, 54px);
    line-height:1.12; letter-spacing:-0.01em;
    max-width:780px; margin:0 0 24px;
  }
  h1 .accent{ color:var(--accent); }

  .hero-sub{
    font-size:17.5px; color:var(--text-secondary);
    max-width:600px; margin:0 0 36px;
  }

  .cta-row{ display:flex; gap:16px; flex-wrap:wrap; }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--body); font-weight:600; font-size:15px;
    padding:13px 22px; border-radius:8px;
    text-decoration:none;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .btn-primary{
    background:var(--accent); color:#fff;
    box-shadow:0 0 0 0 var(--accent-glow);
  }
  .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 6px 24px var(--accent-glow); }
  .btn-ghost{
    border:1px solid var(--line); color:var(--text-primary);
  }
  .btn-ghost:hover{ border-color:var(--text-secondary); }

  /* ---------- SECTION SHELL ---------- */
  section{ position:relative; z-index:1; padding:96px 0; border-top:1px solid var(--line); }
  .section-head{ margin-top: 10px; margin-bottom:40px; max-width:640px; }
  .section-label{
    font-family:var(--mono); font-size:12.5px; color:var(--accent);
    letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px;
  }
  .section-title{
    font-family:var(--display); font-weight:600; font-size:28px;
    letter-spacing:-0.01em; margin:0 0 12px;
  }
  .section-desc{ color:var(--text-secondary); font-size:15.5px; margin:0; }

  /* ---------- ROUTING TABLE (focus areas) ---------- */
  .rtable{ border:1px solid var(--line); border-radius:10px; overflow:hidden; }
  .rtable-head, .rtable-row{
    display:grid; grid-template-columns: 1.3fr 1.6fr 1fr;
    gap:20px; padding:18px 24px;
  }
  .rtable-head{
    font-family:var(--mono); font-size:11.5px; color:var(--text-tertiary);
    letter-spacing:0.06em; text-transform:uppercase;
    background:var(--bg-elevated); border-bottom:1px solid var(--line);
  }
  .rtable-row{
    border-bottom:1px solid var(--line-soft);
    transition:background .15s ease;
  }
  .rtable-row:last-child{ border-bottom:none; }
  .rtable-row:hover{ background:var(--bg-elevated); }
  .rtable-dest{ font-family:var(--display); font-weight:600; font-size:16.5px; }
  .rtable-via{ color:var(--text-secondary); font-size:14.5px; }
  .rtable-via code{
    font-family:var(--mono); font-size:12.5px; color:var(--text-primary);
    background:var(--bg-elevated-2); padding:2px 7px; border-radius:5px;
    margin-right:6px; display:inline-block; margin-bottom:5px;
  }
  .rtable-metric{ font-family:var(--mono); font-size:13px; color:var(--text-tertiary); text-align:right; align-self:center; }
  .rtable-metric.live{ color:#4ADE80; }
  .rtable-metric.progress{ color:#F5B942; }

  @media (max-width:720px){
    .rtable-head{ display:none; }
    .rtable-row{ grid-template-columns:1fr; gap:8px; }
    .rtable-metric{ text-align:left; }
  }

  /* ---------- POSTS ---------- */
  .posts-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
  }
  .post-card{
    border:1px solid var(--line); border-radius:10px;
    padding:24px; background:var(--bg-elevated);
    display:flex; flex-direction:column; gap:14px;
    min-height:180px;
  }
  .post-tag{
    font-family:var(--mono); font-size:11px; color:var(--accent);
    text-transform:uppercase; letter-spacing:0.05em;
  }
  .post-title{ font-family:var(--display); font-weight:600; font-size:16.5px; line-height:1.35; }
  .post-desc{ color:var(--text-secondary); font-size:13.5px; margin-top:auto; }
  .post-card.stub{
    align-items:center; justify-content:center; text-align:center;
    color:var(--text-tertiary); font-size:13.5px; border-style:dashed;
  }

  @media (max-width:820px){
    .posts-grid{ grid-template-columns:1fr; }
  }

  /* ---------- ABOUT ---------- */
  .about-grid{
    display:grid; grid-template-columns:1fr 1.3fr; gap:56px; align-items:start;
  }
  .about-name{ font-family:var(--display); font-weight:700; font-size:22px; margin:0 0 4px; }
  .about-role{ color:var(--text-secondary); font-size:14.5px; margin:0 0 24px; }
  .cert-list{ display:flex; flex-direction:column; gap:10px; }
  .cert{
    display:flex; align-items:center; gap:10px;
    font-family:var(--mono); font-size:12.5px; color:var(--text-secondary);
    padding:9px 12px; border:1px solid var(--line); border-radius:7px;
  }
  .cert .yr{ margin-left:auto; color:var(--text-tertiary); }
  .about-body p{ color:var(--text-secondary); font-size:15.5px; margin:0 0 18px; }
  .about-body strong{ color:var(--text-primary); font-weight:600; }

  @media (max-width:820px){
    .about-grid{ grid-template-columns:1fr; gap:32px; }
  }

  /* ---------- FOOTER ---------- */
  footer{ position:relative; z-index:1; border-top:1px solid var(--line); padding:40px 0; }
  .footer-inner{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  }
  .footer-brand{ display:flex; align-items:center; gap:10px; }
  .footer-brand .brand-icon{ width:20px; height:20px; opacity:0.7; }
  .footer-text{ font-size:13px; color:var(--text-tertiary); }
  .footer-links{ display:flex; gap:22px; }
  .footer-links a{
    font-size:13.5px; color:var(--text-secondary); text-decoration:none;
  }
  .footer-links a:hover{ color:var(--text-primary); }

  /* reveal-on-scroll */
  .reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
  }

/* Utility classes (replacing inline styles, required for a strict style-src CSP) */
.text-right{ text-align:right; }
.link-inline{ color:var(--accent); text-decoration:none; }
.link-inline.margin-l{ margin-left:4px; }
.link-inline.bold{ font-weight:600; }
/* .pad-b-sm{ padding-bottom:24px; } */
.pad-b-lg{ padding-bottom:96px; }
.h1-narrow{ max-width:640px; }