*{box-sizing:border-box; margin:0; padding:0;}
html{ scroll-behavior:smooth; overflow-x:hidden; width:100%; }
body{
  background:var(--void); color:var(--ink); font-family:'Inter', sans-serif;
  overflow-x:hidden; width:100%; -webkit-font-smoothing:antialiased;
}
body.nav-locked{ overflow:hidden; }
::selection{ background:var(--blue); color:var(--void); }

h1,h2,h3{ font-family:'Space Grotesk', sans-serif; font-weight:700; letter-spacing:-0.01em; line-height:1.1; }
p{ color:var(--muted); line-height:1.65; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }

:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

/* Custom elements have no layout semantics of their own by default;
   make them behave like the markup they render instead of an
   anonymous inline box. */
site-nav, site-footer{ display:contents; }

/* ---------- particle background ---------- */
#field{ position:fixed; inset:0; width:100%; height:100%; z-index:0; }
section, main, footer{ position:relative; z-index:2; }

/* ---------- shared type helpers ---------- */
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--c-security); display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(52,211,153,0.35); padding:7px 14px; border-radius:20px;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--c-security); box-shadow:0 0 8px var(--c-security); }
.eyebrow.center{ display:flex; justify-content:center; width:fit-content; margin:0 auto; }

/* ---------- layout utilities (used by About, and any future page) ---------- */
.container{ max-width:1180px; margin:0 auto; padding:0 clamp(20px,5vw,64px); }
.section{ padding:min(12vh,120px) 0; }
.section-header{ margin-bottom:52px; }
.section-header.center{ text-align:center; }
.section-header h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); margin-top:6px; }
.section-header p{ max-width:600px; font-size:0.95rem; margin-top:14px; }
.section-header.center p{ margin-left:auto; margin-right:auto; }

/* ---------- shared closing / CTA banner (Home + About) ---------- */
.closing{ text-align:center; padding:150px 24px 110px; border-top:1px solid var(--line); }
.closing h2{ font-size:clamp(1.8rem,4vw,2.6rem); max-width:20ch; margin:20px auto 32px; }