:root {
  color-scheme: light;
  --surface: #fff;
  --section-surface: #eef6ff;
  --contact-surface: #eff5ff;
  --header-surface: rgba(251, 252, 255, .94);
  --nav-text: #43506a;
  --label-text: #42506b;
  --icon-surface: #e8eeff;
  --field-border: #7b889f;
  --ghost-border: #bbc9dc;
  --note-surface: #e4edff;
  --note-text: #344568;
  --link-text: #214cdb;
  --hero-glow: #d7efff;
  --hero-start: #f9fbff;
  --hero-end: #eef5ff;
  --action: #2859ff;
  --cta-surface: #10182d;
  --cta-text: #fff;
  --success-surface: #e5f8f5;
  --success-text: #12564b;
  --error-surface: #fff1ef;
  --error-text: #8d2626;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #ecf2ff;
  --muted: #a8b6ce;
  --blue: #a0b9ff;
  --line: #34435e;
  --paper: #0b1020;
  --surface: #141e34;
  --section-surface: #101a2d;
  --contact-surface: #101a2d;
  --header-surface: rgba(11, 16, 32, .94);
  --nav-text: #c4cee2;
  --label-text: #c4cee2;
  --icon-surface: #243456;
  --field-border: #6b7ca0;
  --ghost-border: #516380;
  --note-surface: #1c2d50;
  --note-text: #d0dcf4;
  --link-text: #a0b9ff;
  --hero-glow: #183656;
  --hero-start: #0b1224;
  --hero-end: #131f38;
  --cta-surface: #e2ebff;
  --cta-text: #10182d;
  --success-surface: #123c35;
  --success-text: #a8f2de;
  --error-surface: #442126;
  --error-text: #ffc5c5;
}

/* Keep the system theme usable even when JavaScript is disabled. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --ink: #ecf2ff;
    --muted: #a8b6ce;
    --blue: #a0b9ff;
    --line: #34435e;
    --paper: #0b1020;
    --surface: #141e34;
    --section-surface: #101a2d;
    --contact-surface: #101a2d;
    --header-surface: rgba(11, 16, 32, .94);
    --nav-text: #c4cee2;
    --label-text: #c4cee2;
    --icon-surface: #243456;
    --field-border: #6b7ca0;
    --ghost-border: #516380;
    --note-surface: #1c2d50;
    --note-text: #d0dcf4;
    --link-text: #a0b9ff;
    --hero-glow: #183656;
    --hero-start: #0b1224;
    --hero-end: #131f38;
    --cta-surface: #e2ebff;
    --cta-text: #10182d;
    --success-surface: #123c35;
    --success-text: #a8f2de;
    --error-surface: #442126;
    --error-text: #ffc5c5;
  }
}

.site-header { background: var(--header-surface); gap: 20px; }
#main-nav { margin-left: auto; }
nav a { color: var(--nav-text); }
.nav-cta { background: var(--cta-surface); color: var(--cta-text) !important; }
.menu-toggle { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.theme-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}
.theme-control[hidden] { display: none; }
.theme-control svg { flex-shrink: 0; }
.theme-control select {
  min-height: 42px;
  max-width: 82px;
  border: 0;
  padding: 0 2px;
  font: 600 13px "DM Sans", sans-serif;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
/* 16px keeps iOS from zooming when the theme picker is focused. */
@media (pointer: coarse) { .theme-control select { font-size: 16px; } }
.hero { background: radial-gradient(circle at 80% 35%, var(--hero-glow) 0, transparent 31%), linear-gradient(135deg, var(--hero-start), var(--hero-end)); }
.primary { background: var(--action); }
.brand-mark { background: linear-gradient(135deg, var(--action), #53b6ff); }
.ghost { border-color: var(--ghost-border); }
.light { color: #10182d; }
.floating-card, .service-grid article, .dashboard, .tech-list span, .faq-list details { background: var(--surface); }
.service-grid article { transition: transform .25s, box-shadow .25s; }
.icon { background: var(--icon-surface); }
.marketing { background: var(--section-surface); }
.contact { background: var(--contact-surface); }
label { color: var(--label-text); }
input, textarea { background: var(--surface); border-color: var(--field-border); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.form-note { background: var(--note-surface); color: var(--note-text); }
.form-note a, .contact > div > p a, .faq-list details > p a { color: var(--link-text); }
.form-message:not(:empty) { background: var(--success-surface); color: var(--success-text); }
.form-message[data-kind="error"] { background: var(--error-surface); color: var(--error-text); }
.skip-link { background: var(--cta-surface); color: var(--cta-text); }
:focus-visible { box-shadow: 0 0 0 6px var(--paper); }
.phone { color-scheme: dark; }

/* The theme picker needs space alongside the navigation. */
@media (max-width: 1050px) {
  .site-header { height: 70px; gap: 12px; }
  .menu-toggle { display: block; margin-left: 0; }
  #main-nav {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    margin: 0;
    padding: 12px 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
  }
  .site-header.open #main-nav { display: flex; }
  #main-nav .nav-cta { align-self: flex-start; padding: 9px 19px; }
  html { scroll-padding-top: 88px; }
}
@media (max-width: 400px) {
  .site-header { padding-inline: 16px; gap: 8px; }
  .site-header .brand { font-size: 18px; gap: 6px; }
  .site-header .brand-mark { width: 26px; height: 26px; }
  .header-actions { gap: 4px; }
  .theme-control svg { display: none; }
  .theme-control { padding-inline: 5px; }
}