:root {
  --bg: #070b12;
  --surface: #0e1522;
  --elevated: #151d2e;
  --fg: #e8eef7;
  --muted: #8b97ab;
  --faint: #5c6a80;
  --accent: #2aa3ff;
  --accent-fg: #041018;
  --border: #243044;
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --display: clamp(2.4rem, 1.2rem + 5vw, 4.4rem);
  --section: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); color: var(--fg); }
body {
  margin: 0; font-family: var(--sans); background: var(--bg); color: var(--fg);
  -webkit-font-smoothing: antialiased; min-height: 100dvh;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1,h2,h3 { text-wrap: balance; font-weight: 500; }
p { text-wrap: pretty; }
button, [role=button] { cursor: pointer; font-family: inherit; }
.skip { position:absolute; left:-999px; }
.skip:focus { left:1rem; top:1rem; z-index:50; background:var(--accent); color:var(--accent-fg); padding:.5rem .75rem; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
header.nav {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
  background: color-mix(in oklab, var(--bg) 90%, transparent);
  backdrop-filter: blur(8px);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:4rem; }
.brand { display:flex; align-items:center; gap:.75rem; }
.mono-mark {
  width:2rem; height:2rem; display:grid; place-items:center;
  background: var(--accent); color: var(--accent-fg);
  font-family: var(--mono); font-size:.75rem; font-weight:500; border-radius:2px;
}
.links { display:none; gap:1.5rem; font-size:.875rem; color: var(--muted); }
.links a:hover { color: var(--fg); }
.nav-actions { display:flex; align-items:center; gap:.5rem; }
.lang { display:flex; border:1px solid var(--border); border-radius:.375rem; padding:2px; }
.lang button {
  min-height:2.25rem; min-width:2.5rem; border:0; background:transparent;
  color: var(--muted); border-radius:2px; font-size:.75rem; font-weight:500;
}
.lang button.on { background: var(--elevated); color: var(--fg); }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:2.75rem; padding:0 1.25rem; border-radius:.375rem;
  font-size:.875rem; font-weight:500; border:1px solid transparent;
}
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { opacity:.9; }
.btn-outline { border-color: var(--border); color: var(--fg); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost { color: var(--muted); }
.btn-ghost:hover { color: var(--fg); }
.menu-btn {
  display:grid; place-items:center; width:2.75rem; height:2.75rem;
  border:1px solid var(--border); background:transparent; color:var(--fg); border-radius:.375rem;
}
.mobile-nav { display:none; border-top:1px solid var(--border); padding:1rem 1.5rem; }
.mobile-nav a { display:block; min-height:2.75rem; padding:.75rem; }
.hero { position:relative; overflow:hidden; border-bottom:1px solid var(--border); }
.grid-bg {
  position:absolute; inset:0; pointer-events:none; opacity:.7;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--fg) 4%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--fg) 4%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
}
.hero-inner { position:relative; display:grid; gap:2.5rem; padding:4rem 1.5rem; }
.kicker { font-family: var(--mono); font-size:.75rem; letter-spacing:.04em; color: var(--accent); }
.display { font-size: var(--display); line-height:1.1; margin:.75rem 0 0; }
.lede { margin-top:.75rem; font-size:1.125rem; color: var(--muted); }
.value { margin-top:1.5rem; max-width:36rem; line-height:1.6; }
.cta-row { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
.photo { overflow:hidden; width:100%; max-width:18rem; border-radius:1.25rem; border:1px solid var(--border); background:#9aa3ad; margin-left:auto; }
.photo img { width:100%; height:auto; display:block; }
@media (max-width: 1023px) { .photo { margin-left:auto; margin-right:auto; } }
.stats { display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.5rem; margin-top:1.5rem; }
.stat { border-top:1px solid var(--border); padding-top:1rem; }
.stat b { display:block; font-family:var(--mono); font-size:1.875rem; font-weight:500; font-variant-numeric: tabular-nums; }
.stat span { display:block; margin-top:.25rem; font-size:.875rem; color:var(--muted); }
section.block { padding:5rem 1.5rem; }
.section-title { font-size: var(--section); margin:.75rem 0 0; max-width:40rem; }
.prose { max-width:48rem; margin-top:1.5rem; color:var(--muted); line-height:1.65; }
.prose p + p { margin-top:1rem; }
.cards { display:grid; gap:1rem; margin-top:3rem; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:1.25rem; padding:1.5rem; }
.card:hover { border-color: var(--accent); }
.num { font-family:var(--mono); font-size:.75rem; color:var(--accent); }
.card h3 { margin:.75rem 0 0; font-size:1.125rem; }
.card p { margin:.75rem 0 0; font-size:.875rem; color:var(--muted); line-height:1.6; }
.band { background: color-mix(in oklab, var(--surface) 50%, transparent); border-block:1px solid var(--border); }
.row-head { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:1rem; }
.steps { display:grid; gap:1rem; margin-top:1.5rem; }
.step { background:var(--bg); border:1px solid var(--border); border-radius:.75rem; padding:1.25rem; }
.job { display:grid; gap:1rem; padding:1.5rem 0; }
.job-meta { font-size:.875rem; color:var(--muted); }
.job ul { margin:.75rem 0 0; padding:0; list-style:none; color:var(--muted); font-size:.875rem; line-height:1.6; }
.job li { display:flex; gap:.5rem; margin-top:.5rem; }
.job li::before { content:""; width:.25rem; height:.25rem; margin-top:.55rem; border-radius:99px; background:var(--accent); flex:none; }
.skill { display:grid; gap:.25rem; padding:1rem 0; border-bottom:1px solid var(--border); }
.certs { display:grid; gap:.75rem; margin-top:2.5rem; }
.cert { background:var(--surface); border:1px solid var(--border); border-radius:.75rem; padding:1.25rem; }
.contact-grid { display:grid; gap:3rem; }
.contact-list { list-style:none; padding:0; margin:2rem 0 0; }
.contact-list li, .contact-list a { display:flex; align-items:center; gap:.75rem; margin-top:.75rem; }
form.box { background:var(--bg); border:1px solid var(--border); border-radius:1.25rem; padding:1.5rem; }
label { display:block; font-size:.875rem; color:var(--muted); margin-top:1rem; }
label:first-child { margin-top:0; }
input, select, textarea {
  width:100%; min-height:2.75rem; margin-top:.4rem; padding:0 .75rem;
  border-radius:.375rem; border:1px solid var(--border);
  background:var(--elevated); color:var(--fg); font-family:inherit; font-size:.875rem;
}
textarea { min-height:8rem; padding:.5rem .75rem; }
.form-grid { display:grid; gap:1rem; }
.hint { font-size:.75rem; color:var(--muted); margin:0; }
footer.site { border-top:1px solid var(--border); padding:2rem 1.5rem; color:var(--muted); font-size:.875rem; }
.foot { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:space-between; }
.flow { display:grid; gap:.75rem; margin-top:1.5rem; }
.flow-item { background:var(--elevated); border:1px solid var(--border); border-radius:.75rem; padding:1.25rem; }
.browser { display:block; background:var(--surface); border:1px solid var(--border); border-radius:1.25rem; padding:.75rem; }
.browser:hover { border-color: var(--accent); }
.dots { display:flex; gap:.35rem; padding:0 .5rem .5rem; }
.dot { width:.5rem; height:.5rem; border-radius:99px; background:var(--faint); }
.browser-body { background:var(--elevated); border-radius:.375rem; padding:2.5rem 1.25rem; text-align:center; }
.hidden { display:none !important; }
@media (min-width: 640px) {
  .hide-sm { display:inline-flex !important; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .certs { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .links { display:flex; }
  .menu-btn { display:none; }
  .hero-inner { grid-template-columns: 1.2fr .8fr; padding:6rem 1.5rem; }
  .cards { grid-template-columns: 1fr 1fr 1fr; }
  .steps { grid-template-columns: repeat(4,1fr); }
  .job { grid-template-columns: 220px 1fr; }
  .skill { grid-template-columns: 200px 1fr; }
  .certs { grid-template-columns: 1fr 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .flow { grid-template-columns: repeat(4,1fr); }
  .sites { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; }
}
@media (max-width: 1023px) {
  .brand-name { display:none; }
  .hire-desk { display:none; }
  .sites { display:grid; gap:1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Tank Wars */
.tw-root { display:flex; flex-direction:column; gap:1rem; }
.tw-stage {
  position:relative; border:1px solid var(--border); border-radius:1.25rem;
  overflow:hidden; background:#0b1524;
}
.tw-canvas { display:block; width:100%; height:auto; touch-action:none; vertical-align:middle; }
.tw-hud {
  position:absolute; top:.75rem; left:.75rem; right:.75rem;
  display:flex; justify-content:space-between; gap:.5rem; pointer-events:none;
}
.tw-chip {
  font-family:var(--mono); font-size:.75rem; padding:.4rem .7rem;
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  border:1px solid var(--border); border-radius:.375rem; color:var(--fg);
}
.tw-chip.tw-cpu { color:#ff6b4a; }
.tw-overlay {
  position:absolute; inset:0; display:grid; place-content:center; text-align:center;
  padding:1.5rem; background: color-mix(in oklab, var(--bg) 72%, transparent);
  backdrop-filter: blur(6px); gap:.5rem;
}
.tw-overlay[hidden] { display:none !important; }
.tw-overlay h2 { margin:.25rem 0; font-size:clamp(1.8rem, 4vw, 2.8rem); }
.tw-lede { color:var(--muted); max-width:28rem; margin:0 auto; }
.tw-help { list-style:none; padding:0; margin:1rem auto; color:var(--faint); font-size:.875rem; }
.tw-help li { margin:.2rem 0; font-family:var(--mono); font-size:.75rem; }
.tw-record { color:var(--muted); font-size:.8rem; min-height:1.2em; }
.tw-panel {
  display:grid; gap:.75rem; align-items:end;
  grid-template-columns: 1fr;
}
.tw-stat { display:flex; flex-direction:column; gap:.35rem; font-size:.8rem; color:var(--muted); }
.tw-stat b { color:var(--fg); font-family:var(--mono); font-weight:500; }
.tw-stat input[type=range] { width:100%; accent-color: var(--accent); min-height:2.75rem; }
.tw-ammo { display:grid; grid-template-columns: repeat(4, 1fr); gap:.5rem; }
.tw-ammo-btn {
  min-height:2.75rem; border:1px solid var(--border); background:var(--surface);
  color:var(--fg); border-radius:.375rem; display:flex; flex-direction:column;
  align-items:center; justify-content:center; font-size:.75rem; gap:0;
}
.tw-ammo-btn small { color:var(--muted); font-family:var(--mono); }
.tw-ammo-btn.on { border-color: var(--accent); color: var(--accent); }
.tw-ammo-btn:disabled { opacity:.4; }
.tw-fire { min-height:2.75rem; width:100%; }
@media (min-width: 800px) {
  .tw-panel { grid-template-columns: 1fr 1fr auto; }
  .tw-ammo { grid-column: 1 / -1; }
  .tw-fire { width:auto; min-width:8rem; }
}