/* ==========================================================================
   base.css — design tokens, resets, typography, generic utilities
   Loaded on every page.
   ========================================================================== */

:root{
  /* Dark theme, site-wide — deep teal-black rather than navy, to sit
     naturally alongside the hero photography instead of fighting it. */
  --ink:#071A1C;
  --ink-soft:#0A2124;
  --surface:#0E2528;
  --surface-2:#153431;
  --hairline:#20423D;
  --gold:#D4A94F;
  --gold-soft:rgba(212,169,79,0.16);
  --signal:#22D3A6;
  --signal-soft:rgba(34,211,166,0.16);
  --text:#EDF3F1;
  --text-muted:#9CB0AB;
  --text-dim:#5E7873;
  --radius:14px;
  --maxw:1180px;
  --shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 40px -16px rgba(0,0,0,0.6);

  /* code / developer surface — a shade darker than the page so it still
     reads as its own "terminal" surface within the dark theme */
  --code-bg:#0C1224;
  --code-border:#232D4A;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
}

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}

h1,h2,h3,.display{
  font-family:'Instrument Sans',sans-serif;
  letter-spacing:-0.02em;
  margin:0;
}

.mono{ font-family:'IBM Plex Mono',monospace; }

a{ color:inherit; }
img,svg{ display:block; max-width:100%; }

a:focus-visible,
button:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
}

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

section{ position:relative; }

.divider{ border:none; border-top:1px solid var(--hairline); margin:0; }

.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--signal);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 0 3px var(--signal-soft);
}

.section-head{ max-width:640px; margin-bottom:52px; }
.section-head h2{ font-size:clamp(28px,3.4vw,38px); font-weight:600; }
.section-head p{ margin-top:14px; color:var(--text-muted); font-size:16px; }
.section-pad{ padding:96px 0; }
.section-pad.tight{ padding-top:56px; }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:14.5px;
  padding:13px 24px;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn-primary{
  background:linear-gradient(135deg,var(--gold),#B98B33);
  color:#171008;
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(212,169,79,0.28); }
.btn-ghost{
  background:transparent;
  border-color:var(--hairline);
  color:var(--text);
}
.btn-ghost:hover{ border-color:var(--signal); color:var(--signal); }
.btn-sm{ padding:9px 18px; font-size:13px; }

/* Breadcrumb (used on every inner page for wayfinding + SEO) */
.breadcrumb{
  display:flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  color:var(--text-dim);
  padding:20px 0 0;
}
.breadcrumb a{ color:var(--text-dim); text-decoration:none; }
.breadcrumb a:hover{ color:var(--signal); }
.breadcrumb span[aria-current]{ color:var(--text-muted); }

.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}