/* shared-chrome.css — extracted from landing.html on 2026-05-18 for reuse on /contact and /404 */
html.dark {
      --bg: #0A0A0B;
      --surface: #18181B;
      --surface-2: #1F1F23;
      --border: #27272A;
      --fg: #FAFAFA;
      --fg-soft: #E4E4E7;
      --muted: #A1A1AA;

      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
      --shadow-md: 0 8px 24px -12px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
      --shadow-lg: 0 24px 60px -28px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.4);
    }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
      font-family: var(--font-sans);
      background: var(--bg);
      color: var(--fg);
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      min-height: 100vh;
    }

html.dark .nav-brand .mark { color: #F7F7F5; }

html.dark .theme-toggle .icon-sun { display: block; }

html.dark .theme-toggle .icon-moon { display: none; }

html.dark .feature-icon { color: color-mix(in srgb, var(--accent) 78%, white); }

.nav-brand {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      font-weight: 800;
      font-size: 1.15rem;
      letter-spacing: -0.3px;
    }

.nav-brand .mark {
      width: 22px; height: 22px;
      display: grid; place-items: center;
      color: #2a2f3a;
    }

.nav-brand .mark svg { width: 22px; height: 22px; }

.nav-brand span.accent { color: inherit; }

.nav-links { display: flex; align-items: center; gap: 0.4rem; }

.nav-link {
      padding: 0.55rem 0.75rem;
      border-radius: 10px;
      font-size: 0.92rem;
      font-weight: 500;
      color: var(--muted);
      transition: color .15s, background .15s;
    }

.nav-link:hover { color: var(--fg); background: var(--surface); }

.nav-link.hide-mob { display: none; }

.btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.6rem 1rem;
      border-radius: 11px;
      font-weight: 600;
      font-size: 0.92rem;
      line-height: 1;
      white-space: nowrap;
      border: 1px solid transparent;
      transition: transform .15s, background .15s, border-color .15s, color .15s, box-shadow .15s;
      min-height: 40px;
    }

.btn svg { width: 16px; height: 16px; }

.btn-primary {
      background: var(--fg);
      color: var(--bg);
    }

.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-ghost {
      background: var(--surface);
      color: var(--fg);
      border-color: var(--border);
    }

.btn-ghost:hover { border-color: color-mix(in srgb, var(--fg) 30%, var(--border)); }

.btn-lg {
      padding: 0.85rem 1.4rem;
      font-size: 1rem;
      min-height: 48px;
      border-radius: 13px;
    }

.footer-brand { font-weight: 600; color: var(--fg-soft); }

.footer-links {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
    }

.footer-links a:hover { color: var(--fg); }

.theme-toggle {
      width: 40px; height: 40px;
      display: inline-grid; place-items: center;
      border-radius: 11px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--muted);
      transition: color .15s, border-color .15s;
    }

.theme-toggle:hover { color: var(--fg); border-color: color-mix(in srgb, var(--fg) 30%, var(--border)); }

.theme-toggle svg { width: 16px; height: 16px; }

.theme-toggle .icon-sun { display: none; }

@keyframes pulse {
      0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); }
      70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--green) 0%, transparent); }
      100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 0%, transparent); }
    }

@media (prefers-color-scheme: dark) {
      :root:not(.light) .nav-brand .mark { color: #F7F7F5; }
    }