:root {
  --paper: #fcfbf9;
  --surface: #f6f0e9;
  --ink: #1c1a17;
  --mute: #6f6a63;
  --line: #e6e2dc;
  --espresso: #5e3a21;
  --on-espresso: #fcfbf9;
  --band: #2a1a10;
  --band-ink: #f3ece4;
  --band-mute: #c4b3a2;
  --band-line: #4a3526;
  --font-sans: Geist, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #17110c;
    --surface: #201811;
    --ink: #efe8e0;
    --mute: #a99a8b;
    --line: #34281e;
    --espresso: #d4a373;
    --on-espresso: #1c120b;
    --band: #251a11;
    --band-line: #3d2c1f;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--espresso); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 68rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 720px) { .wrap { padding: 0 2rem; } }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; z-index: 1; padding: 0.5rem 0.75rem; background: var(--paper); }

/* Header */
header.site { display: flex; align-items: center; gap: 1.5rem; padding-top: 1.25rem; padding-bottom: 1.25rem; }
.brand { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; }
.mark { width: 1.75rem; height: 1.75rem; color: var(--espresso); flex-shrink: 0; }
.wordmark { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.sections { margin-left: auto; display: flex; gap: 1.5rem; font-size: 0.9375rem; }
.sections a { color: var(--mute); text-decoration: none; }
.sections a:hover { color: var(--ink); }
.lang {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--mute);
  text-decoration: none;
}
.lang:hover { color: var(--ink); border-color: var(--mute); }
@media (max-width: 719px) {
  .sections { display: none; }
  .lang { margin-left: auto; }
}

/* Hero */
.hero { padding-top: 4.5rem; padding-bottom: 5rem; }
.hero h1 {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.04em;
}
.lede { margin: 1.5rem 0 2.25rem; max-width: 36rem; font-size: clamp(1.125rem, 2vw, 1.3125rem); color: var(--mute); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.125rem;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}
.btn-primary { background: var(--espresso); color: var(--on-espresso); }
.btn-primary:hover { opacity: 0.9; }
.btn-secondary { border: 1px solid var(--line); }
.btn-secondary:hover { border-color: var(--mute); }

/* Sections */
.block { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.section-head { max-width: 40rem; margin-bottom: 2.5rem; }
.kicker {
  margin: 0 0 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--espresso);
}
h2 { margin: 0; font-size: clamp(1.625rem, 3vw, 2.125rem); line-height: 1.15; font-weight: 600; letter-spacing: -0.025em; }
.section-head p:not(.kicker) { margin: 0.75rem 0 0; font-size: 1.0625rem; color: var(--mute); }
h3 { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }

/* Lab */
#lab { border-top: 1px solid var(--line); }
.products { display: grid; gap: 1.5rem; }
@media (min-width: 720px) { .products { grid-template-columns: 1fr 1fr; } }
.product {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.15s;
}
.product:hover { border-color: var(--espresso); }
.product img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  border-bottom: 1px solid var(--line);
}
.product-body { padding: 1.25rem 1.5rem 1.5rem; }
.product-title { display: flex; align-items: center; gap: 0.75rem; font-size: 1.25rem; }
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--espresso);
}
.status::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; }
.product p { margin: 0.5rem 0 1rem; color: var(--mute); }
.url { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--espresso); }

/* Security */
.band { background: var(--band); color: var(--band-ink); }
.band .kicker, .band .section-head p:not(.kicker) { color: var(--band-mute); }
.pillars { display: grid; gap: 2rem; }
@media (min-width: 720px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { padding-top: 1.25rem; border-top: 1px solid var(--band-line); }
.pillar p { margin: 0.5rem 0 0; color: var(--band-mute); }
.note { margin: 2.5rem 0 0; font-size: 0.875rem; color: var(--band-mute); }
.note a { color: var(--band-ink); }

/* Services */
.services { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
@media (min-width: 720px) { .services { grid-template-columns: 1fr 1fr; } }
.service { display: grid; grid-template-columns: 2.5rem 1fr; padding: 1.75rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 720px) {
  .service:nth-child(odd) { padding-right: 2rem; border-right: 1px solid var(--line); }
  .service:nth-child(even) { padding-left: 2rem; }
}
.num { padding-top: 0.2rem; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--espresso); }
.service p { margin: 0.375rem 0 0; color: var(--mute); }

/* About + contact */
.split { display: grid; border-top: 1px solid var(--line); }
@media (min-width: 720px) { .split { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.split h2 { margin-bottom: 1.25rem; }
.about-text { margin: 0 0 1rem; max-width: 30rem; font-size: 1.125rem; }
.link-arrow { font-weight: 500; color: var(--espresso); text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }
.contact dl { display: grid; gap: 1.25rem; margin: 0; }
.contact dt { font-size: 0.875rem; color: var(--mute); }
.contact dd { margin: 0.25rem 0 0; font-family: var(--font-mono); }
.contact dd a { text-decoration: none; }
.contact dd a:hover { color: var(--espresso); }

/* Footer */
footer.site {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 2rem;
  padding-bottom: 3rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--mute);
}
footer.site p { margin: 0; font-family: var(--font-mono); }
footer.site a { text-decoration: none; }
footer.site a:hover { color: var(--ink); }