:root { color-scheme: light; }

html[data-theme="light"] {
  --ink: #161716;
  --paper: #fffefa;
  --acid: #bcf52d;
  --muted: #666861;
  --line: #d8d8d1;
}

html[data-theme="neutral"] {
  --ink: #131414;
  --paper: #e9e9e2;
  --acid: #c8ff38;
  --muted: #62655f;
  --line: #c4c5bd;
}

html[data-theme="dark"] {
  --ink: #eceee5;
  --paper: #151715;
  --acid: #c8ff38;
  --muted: #a5a79f;
  --line: #484b46;
  color-scheme: dark;
}

body, .topbar, .capabilities, .process, .nav-cta, .theme-switcher {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

.header-actions { display: flex; align-items: center; gap: 12px; }
.brand { width: 244px; height: 34px; gap: 9px; }
.brand-emblem { width: 34px; height: 34px; flex: 0 0 34px; object-fit: cover; border-radius: 3px; }
.brand-logo { width: 100%; height: 100%; display: block; object-fit: contain; object-position: left center; transition: opacity .25s ease; }
.brand-logo-dark { display: none; }
html[data-theme="dark"] .brand-logo-light { display: none; }
html[data-theme="dark"] .brand-logo-dark { display: block; }
.theme-switcher { display: flex; padding: 3px; border: 1px solid var(--line); gap: 2px; }
.theme-option { width: 23px; height: 23px; padding: 0; border: 0; background: transparent; color: var(--muted); font: 9px 'DM Mono', monospace; cursor: pointer; transition: background .25s ease, color .25s ease, transform .25s ease; }
.theme-option:hover { color: var(--ink); transform: translateY(-1px); }
.theme-option.active { background: var(--ink); color: var(--paper); }

html[data-theme="dark"] .brand-mark { background: var(--acid); color: #182000; }
html[data-theme="dark"] .proof { background: #090a09; }
html[data-theme="dark"] .dataset { background: #242821; }
html[data-theme="dark"] .dataset.active { background: linear-gradient(135deg, #323c2a, #60713e); }
html[data-theme="dark"] .contact { background: #577400; }
html[data-theme="dark"] .nav-cta { border-color: var(--ink); }
html[data-theme="dark"] .nav-cta:hover { background: var(--acid); color: #172000; }

@media (max-width: 720px) {
  .topbar { position: sticky; top: 0; z-index: 10; background: var(--paper); }
  .header-actions { gap: 7px; }
  .theme-option { width: 20px; height: 20px; font-size: 8px; }
  .nav-cta { display: grid; place-items: center; width: 32px; height: 28px; padding: 0; font-size: 0; }
  .nav-cta span { font-size: 17px; margin: 0; }
  .hero-media { margin-left: -20px; margin-right: -20px; height: min(124vw, 620px); }
  .hero-media img { object-position: 59% center; }
  .media-topline { top: 15px; left: 15px; right: 15px; font-size: 8px; }
  .hero-card { padding: 10px 11px; }
  .card-a { left: 15px; bottom: 15px; }
  .card-b { top: 22%; right: 15px; }
  .hero-footer { gap: 20px; }
  .hero-footer p { font-size: 11px; }
  .marquee { font-size: 11px; }
  .capability-grid article, .capability-grid article:not(:first-child) { min-height: 245px; }
  .capability-grid h3 { font-size: 22px; }
  .proof-head p, .capability-intro p { font-size: 14px; }
  .metrics strong { font-size: 29px; }
  .metrics div { min-height: 87px; padding-top: 19px; padding-bottom: 16px; }
  .dataset { height: 170px; }
  .step { padding-top: 20px; padding-bottom: 25px; }
  .step h3 { font-size: 22px; }
  .contact h2 { max-width: 94%; }
  .contact { padding-bottom: 102px; min-height: 560px; }
  .contact-bottom { left: 20px; right: 20px; bottom: 18px; gap: 10px; padding-top: 16px; border-top: 1px solid rgba(240, 241, 234, .35); }
  .contact-bottom span { display: block; line-height: 1.35; }
  .contact-bottom span:last-child { opacity: .72; }
  .big-cta { min-height: 48px; align-items: center; }
}

@media (max-width: 390px) {
  .topbar { padding-left: 14px; padding-right: 14px; }
  .brand { width: 177px; height: 25px; gap: 6px; }
  .brand-emblem { width: 25px; height: 25px; flex-basis: 25px; }
  .theme-switcher { gap: 0; padding: 2px; }
  .theme-option { width: 18px; }
  .nav-cta { width: 28px; }
  .hero-media { margin-left: -20px; margin-right: -20px; }
  .contact { min-height: 575px; padding-bottom: 120px; }
  .contact-bottom { left: 14px; right: 14px; font-size: 8px; }
}