:root {
  color-scheme: dark;

  --bg-900: #060b17;
  --bg-850: #0b1224;
  --bg-800: #111a33;
  --surface-700: #15223f;
  --surface-650: #1a2b4e;
  --surface-600: #213761;
  --text-100: #f1f5ff;
  --text-200: #d6e0fb;
  --text-300: #a9b9df;
  --text-muted: #8494bc;
  --line-soft: rgba(160, 184, 240, 0.24);
  --line-strong: rgba(178, 201, 255, 0.36);

  --accent-cyan: #20d5ff;
  --accent-blue: #4f8dff;
  --accent-emerald: #2fd6ab;
  --accent-violet: #8f78ff;
  --accent-warm: #ffb76a;
  --link-hover: #aaf0ff;

  --body-glow-1: rgba(62, 98, 255, 0.16);
  --body-glow-2: rgba(32, 213, 255, 0.12);
  --body-grad-end: #0a1125;

  --header-bg: linear-gradient(180deg, rgba(6, 12, 27, 0.92), rgba(6, 12, 27, 0.75));
  --header-bg-sticky: linear-gradient(180deg, rgba(6, 12, 27, 0.98), rgba(8, 17, 36, 0.93));
  --header-border: rgba(145, 172, 228, 0.15);
  --header-border-sticky: rgba(155, 184, 249, 0.3);
  --header-shadow-sticky: 0 12px 30px rgba(0, 0, 0, 0.25);

  --brand-mark-border: rgba(147, 174, 255, 0.35);
  --brand-mark-bg:
    radial-gradient(circle at 27% 18%, rgba(32, 213, 255, 0.5), transparent 38%),
    linear-gradient(150deg, #0c1938, #182a54);
  --brand-mark-color: #dff7ff;
  --brand-mark-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.08);

  --badge-border: rgba(130, 188, 255, 0.4);
  --badge-bg: rgba(13, 22, 46, 0.66);
  --badge-text: #b9cbf7;

  --nav-active-bg: rgba(92, 123, 214, 0.2);
  --mobile-toggle-bg: rgba(84, 114, 202, 0.18);
  --mobile-toggle-border: rgba(129, 165, 255, 0.35);
  --mobile-toggle-bar: #e8edff;

  --surface-card: linear-gradient(160deg, rgba(18, 31, 62, 0.86), rgba(15, 23, 47, 0.66));
  --surface-chip: rgba(38, 56, 103, 0.55);
  --surface-chip-border: rgba(135, 170, 252, 0.26);
  --surface-icon: rgba(16, 30, 63, 0.74);
  --surface-icon-border: rgba(151, 185, 255, 0.38);
  --surface-strip: linear-gradient(90deg, rgba(10, 20, 44, 0.88), rgba(12, 24, 52, 0.65));
  --surface-metric: rgba(12, 22, 47, 0.75);
  --surface-metric-border: rgba(127, 161, 243, 0.27);
  --surface-cta:
    radial-gradient(circle at 15% 18%, rgba(32, 213, 255, 0.17), transparent 38%),
    radial-gradient(circle at 86% 80%, rgba(143, 120, 255, 0.16), transparent 44%),
    linear-gradient(160deg, rgba(17, 30, 62, 0.93), rgba(14, 25, 49, 0.88));
  --surface-cta-border: rgba(130, 169, 255, 0.42);
  --surface-notice: rgba(15, 26, 54, 0.88);
  --surface-faq: rgba(13, 22, 46, 0.72);
  --surface-faq-border: rgba(133, 166, 247, 0.3);
  --surface-form: linear-gradient(165deg, rgba(15, 27, 57, 0.92), rgba(13, 23, 47, 0.82));
  --surface-form-border: rgba(130, 164, 243, 0.35);
  --surface-input: rgba(8, 16, 33, 0.82);
  --surface-input-border: rgba(129, 163, 242, 0.38);
  --surface-footer: rgba(7, 14, 30, 0.75);
  --surface-hero-diagram:
    radial-gradient(circle at 10% 12%, rgba(32, 213, 255, 0.13), transparent 45%),
    radial-gradient(circle at 90% 82%, rgba(143, 120, 255, 0.14), transparent 45%),
    rgba(11, 20, 43, 0.82);
  --surface-hero-diagram-border: rgba(143, 177, 255, 0.35);
  --surface-problem-bg: rgba(13, 24, 49, 0.72);
  --surface-problem-border: rgba(126, 161, 238, 0.25);
  --surface-problem-text: #d8e6ff;
  --surface-process-bg: rgba(10, 20, 43, 0.82);
  --surface-process-border: rgba(125, 159, 236, 0.32);
  --surface-timeline-bg: rgba(14, 24, 48, 0.76);
  --surface-timeline-border: rgba(131, 166, 245, 0.27);
  --surface-contact-card-bg: rgba(10, 19, 39, 0.7);
  --surface-contact-card-border: rgba(134, 167, 243, 0.28);
  --surface-disclaimer-bg: rgba(10, 20, 43, 0.66);
  --surface-disclaimer-border: rgba(149, 176, 242, 0.45);
  --surface-step-index-bg: rgba(32, 213, 255, 0.18);
  --surface-step-index-border: rgba(78, 213, 247, 0.38);

  --btn-secondary-bg: rgba(12, 21, 44, 0.6);
  --btn-secondary-border: rgba(134, 176, 255, 0.5);
  --btn-secondary-border-hover: rgba(161, 197, 255, 0.88);
  --btn-secondary-text: #e5efff;
  --btn-ghost-bg: rgba(9, 18, 38, 0.43);
  --btn-ghost-border: rgba(102, 141, 229, 0.28);

  --theme-toggle-bg: rgba(84, 114, 202, 0.18);
  --theme-toggle-border: rgba(129, 165, 255, 0.35);
  --theme-toggle-text: #eaf2ff;
  --theme-toggle-hover-bg: rgba(95, 129, 226, 0.3);
  --theme-toggle-icon: #ffd36b;
  --theme-toggle-icon-alt: #8cc9ff;
  --status-error: #ffc0cb;
  --status-success: #b9ffd8;

  --font-heading: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 2.75rem;
  --space-3xl: 3.5rem;
  --space-4xl: 5rem;

  --radius-xs: 0.35rem;
  --radius-sm: 0.6rem;
  --radius-md: 0.9rem;
  --radius-lg: 1.2rem;
  --radius-xl: 1.6rem;
  --radius-pill: 100vmax;

  --shadow-soft: 0 20px 40px rgba(2, 8, 22, 0.42);
  --shadow-glow: 0 0 0 1px rgba(145, 173, 255, 0.2), 0 22px 45px rgba(4, 16, 43, 0.5);

  --container-max: 1140px;
  --container-narrow: 860px;
  --section-pad: clamp(3.5rem, 6vw, 6.5rem);
  --content-gap: clamp(1.4rem, 2.3vw, 2.2rem);

  --transition-fast: 160ms ease;
  --transition-med: 240ms ease;

  --header-height: 78px;
  --header-height-sticky: 68px;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg-900: #f2f6ff;
  --bg-850: #e7efff;
  --bg-800: #dce7ff;
  --surface-700: #ffffff;
  --surface-650: #f4f8ff;
  --surface-600: #e9f1ff;
  --text-100: #162647;
  --text-200: #253b64;
  --text-300: #3e5480;
  --text-muted: #5c7099;
  --line-soft: rgba(100, 126, 179, 0.26);
  --line-strong: rgba(89, 120, 181, 0.38);
  --accent-cyan: #0c5ecf;
  --accent-blue: #2a66de;
  --accent-emerald: #0d8f66;
  --accent-violet: #5f55d6;
  --accent-warm: #cb7a1e;
  --link-hover: #1453c4;

  --body-glow-1: rgba(101, 148, 255, 0.24);
  --body-glow-2: rgba(57, 170, 255, 0.17);
  --body-grad-end: #d8e6ff;

  --header-bg: linear-gradient(180deg, rgba(239, 245, 255, 0.95), rgba(235, 243, 255, 0.86));
  --header-bg-sticky: linear-gradient(180deg, rgba(245, 249, 255, 0.98), rgba(235, 242, 255, 0.96));
  --header-border: rgba(125, 156, 212, 0.38);
  --header-border-sticky: rgba(109, 147, 216, 0.5);
  --header-shadow-sticky: 0 12px 30px rgba(68, 103, 167, 0.16);

  --brand-mark-border: rgba(106, 140, 206, 0.45);
  --brand-mark-bg:
    radial-gradient(circle at 27% 18%, rgba(73, 178, 255, 0.45), transparent 38%),
    linear-gradient(150deg, #dce9ff, #c3d7ff);
  --brand-mark-color: #103165;
  --brand-mark-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.88);

  --badge-border: rgba(110, 145, 214, 0.5);
  --badge-bg: rgba(214, 227, 252, 0.78);
  --badge-text: #2a457a;

  --nav-active-bg: rgba(92, 123, 214, 0.14);
  --mobile-toggle-bg: rgba(105, 143, 222, 0.18);
  --mobile-toggle-border: rgba(105, 143, 222, 0.4);
  --mobile-toggle-bar: #1c3f7a;

  --surface-card: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(239, 246, 255, 0.88));
  --surface-chip: rgba(210, 225, 252, 0.88);
  --surface-chip-border: rgba(113, 146, 211, 0.36);
  --surface-icon: rgba(229, 238, 255, 0.92);
  --surface-icon-border: rgba(118, 151, 218, 0.4);
  --surface-strip: linear-gradient(90deg, rgba(228, 237, 255, 0.92), rgba(220, 232, 255, 0.74));
  --surface-metric: rgba(234, 242, 255, 0.92);
  --surface-metric-border: rgba(114, 146, 210, 0.37);
  --surface-cta:
    radial-gradient(circle at 15% 18%, rgba(32, 143, 255, 0.12), transparent 38%),
    radial-gradient(circle at 86% 80%, rgba(108, 122, 255, 0.12), transparent 44%),
    linear-gradient(160deg, rgba(245, 250, 255, 0.97), rgba(227, 238, 255, 0.93));
  --surface-cta-border: rgba(113, 145, 212, 0.48);
  --surface-notice: rgba(229, 238, 255, 0.95);
  --surface-faq: rgba(240, 247, 255, 0.92);
  --surface-faq-border: rgba(119, 150, 216, 0.42);
  --surface-form: linear-gradient(165deg, rgba(248, 252, 255, 0.98), rgba(230, 239, 255, 0.94));
  --surface-form-border: rgba(111, 143, 210, 0.45);
  --surface-input: rgba(255, 255, 255, 0.98);
  --surface-input-border: rgba(112, 145, 212, 0.4);
  --surface-footer: rgba(233, 242, 255, 0.8);
  --surface-hero-diagram:
    radial-gradient(circle at 10% 12%, rgba(36, 144, 255, 0.13), transparent 45%),
    radial-gradient(circle at 90% 82%, rgba(96, 120, 245, 0.11), transparent 45%),
    rgba(243, 249, 255, 0.92);
  --surface-hero-diagram-border: rgba(115, 148, 212, 0.45);
  --surface-problem-bg: rgba(233, 242, 255, 0.94);
  --surface-problem-border: rgba(116, 149, 214, 0.36);
  --surface-problem-text: #284574;
  --surface-process-bg: rgba(236, 245, 255, 0.93);
  --surface-process-border: rgba(114, 146, 212, 0.39);
  --surface-timeline-bg: rgba(236, 245, 255, 0.9);
  --surface-timeline-border: rgba(113, 146, 211, 0.38);
  --surface-contact-card-bg: rgba(237, 246, 255, 0.92);
  --surface-contact-card-border: rgba(114, 148, 213, 0.39);
  --surface-disclaimer-bg: rgba(234, 243, 255, 0.95);
  --surface-disclaimer-border: rgba(111, 145, 212, 0.5);
  --surface-step-index-bg: rgba(76, 162, 255, 0.2);
  --surface-step-index-border: rgba(71, 129, 214, 0.44);

  --btn-secondary-bg: rgba(224, 236, 255, 0.84);
  --btn-secondary-border: rgba(98, 133, 205, 0.5);
  --btn-secondary-border-hover: rgba(79, 120, 198, 0.7);
  --btn-secondary-text: #1c3f7a;
  --btn-ghost-bg: rgba(226, 237, 255, 0.64);
  --btn-ghost-border: rgba(96, 133, 205, 0.4);

  --theme-toggle-bg: rgba(224, 236, 255, 0.95);
  --theme-toggle-border: rgba(105, 142, 215, 0.5);
  --theme-toggle-text: #1f3f79;
  --theme-toggle-hover-bg: rgba(208, 225, 252, 0.96);
  --theme-toggle-icon: #f0a13d;
  --theme-toggle-icon-alt: #2e6ed2;
  --status-error: #8b2030;
  --status-success: #0f6a37;

  --shadow-soft: 0 18px 34px rgba(67, 100, 160, 0.13);
  --shadow-glow: 0 0 0 1px rgba(104, 134, 196, 0.26), 0 20px 38px rgba(65, 95, 152, 0.15);
}
