:root {
  color-scheme: dark;

  /* Backgrounds and surfaces */
  --bg-primary: #080714;
  --bg-secondary: #100d24;
  --surface: #19162b;
  --surface-elevated: #211d37;

  /* Brand */
  --brand-primary: #7028e8;
  --brand-secondary: #933df5;
  --brand-highlight: #c16bff;
  --brand-deep: #4217a8;
  --gradient-brand: linear-gradient(115deg, #4217a8 0%, #7028e8 48%, #c16bff 100%);

  /* Text */
  --text-primary: #f7f5ff;
  --text-secondary: #b6b0ca;
  --text-muted: #817a99;

  /* Borders and states */
  --border-subtle: #302a47;
  --success: #24d6a0;
  --warning: #f5c451;
  --on-brand: var(--text-primary);

  /* Theme-aware component surfaces (dark values preserve the current page) */
  --page-background: radial-gradient(ellipse at 82% 4%, rgb(66 23 168 / 11%), transparent 30rem), var(--bg-primary);
  --header-background: rgb(8 7 20 / 84%);
  --header-border: rgb(48 42 71 / 74%);
  --footer-background: #070611;
  --section-divider-glow: rgb(193 107 255 / 7%);
  --menu-background: rgb(16 13 36 / 98%);
  --menu-item-hover: rgb(112 40 232 / 14%);
  --services-section-background: linear-gradient(180deg, rgb(16 13 36 / 38%), rgb(16 13 36 / 12%));
  --service-card-highlight-background: radial-gradient(ellipse at 100% 0%, rgb(112 40 232 / 13%), transparent 55%), var(--surface);
  --process-section-background: radial-gradient(ellipse at 50% 48%, rgb(66 23 168 / 10%), transparent 52%), linear-gradient(180deg, rgb(16 13 36 / 12%), rgb(16 13 36 / 30%) 50%, rgb(16 13 36 / 14%));
  --faq-section-background: linear-gradient(180deg, rgb(16 13 36 / 12%), transparent 30%, transparent 78%, rgb(16 13 36 / 12%));
  --contact-section-background: radial-gradient(ellipse at 50% 72%, rgb(66 23 168 / 7%), transparent 54%);
  --demo-ambient-glow: rgb(66 23 168 / 13%);
  --process-card-background: rgb(25 22 43 / 68%);
  --process-card-hover-background: rgb(33 29 55 / 88%);
  --demo-card-background: #100d24;
  --demo-visual-background: radial-gradient(ellipse at 50% 100%, rgb(112 40 232 / 19%), transparent 60%), #0c0a1b;
  --demo-badge-background: rgb(16 13 36 / 90%);
  --demo-badge-color: #d9c1fa;
  --demo-badge-border: rgb(193 107 255 / 22%);
  --button-secondary-background: rgb(25 22 43 / 52%);
  --button-secondary-hover-background: var(--surface);
  --button-secondary-hover-border: rgb(193 107 255 / 48%);
  --button-light-background: #fff;
  --button-light-color: #241044;
  --button-light-hover-background: #f1e6ff;
  --icon-badge-border: rgb(193 107 255 / 24%);
  --icon-badge-background: linear-gradient(145deg, rgb(112 40 232 / 19%), rgb(25 22 43 / 65%));
  --floating-note-background: rgb(25 22 43 / 92%);
  --floating-note-border: rgb(193 107 255 / 20%);
  --floating-note-shadow: 0 14px 34px rgb(3 2 13 / 30%);
  --hero-browser-background: #100d24;
  --hero-browser-chrome: #17132b;
  --hero-browser-border: rgb(193 107 255 / 22%);
  --hero-address-background: #100d24;
  --hero-address-border: rgb(48 42 71 / 65%);
  --hero-address-text: #8e86a5;
  --hero-mock-background: radial-gradient(ellipse at 82% 70%, rgb(112 40 232 / 18%), transparent 45%), linear-gradient(145deg, #100d24, #15102b);
  --hero-mock-divider: rgb(255 255 255 / 7%);
  --hero-mock-text: #f7f5ff;
  --hero-mock-muted: #514968;
  --hero-mock-art-background: linear-gradient(145deg, rgb(147 61 245 / 19%), transparent 68%), #1b1535;
  --hero-mock-art-border: rgb(193 107 255 / 17%);
  --hero-mock-art-ornament: rgb(247 245 255 / 46%);
  --hero-mock-footer: #39334e;
  --contact-panel-background: radial-gradient(ellipse at 100% 0%, rgb(193 107 255 / 21%), transparent 38%), radial-gradient(ellipse at 0% 100%, rgb(66 23 168 / 42%), transparent 52%), linear-gradient(120deg, #20123c, #17112b 57%, #120f25);
  --contact-panel-border: rgb(193 107 255 / 29%);
  --contact-panel-orbit: rgb(193 107 255 / 10%);
  --contact-panel-orbit-shadow: rgb(193 107 255 / 2%);
  --contact-panel-text: var(--text-primary);
  --contact-panel-secondary: #d4cbe4;
  --contact-panel-eyebrow: #e1baff;
  --contact-option-background: rgb(8 7 20 / 28%);
  --contact-option-hover-background: rgb(8 7 20 / 48%);
  --contact-option-border: rgb(255 255 255 / 10%);
  --contact-option-hover-border: rgb(193 107 255 / 40%);
  --contact-option-value: #c2bad2;
  --contact-arrow: #a79bbd;
  --contact-icon-color: #d6a4ff;
  --contact-icon-border: rgb(193 107 255 / 19%);
  --contact-icon-background: rgb(112 40 232 / 18%);
  --contact-whatsapp-color: #74e6b9;
  --contact-whatsapp-background: rgb(36 214 160 / 11%);
  --logo-filter: none;
  --hero-browser-shadow: 0 32px 90px rgb(3 2 13 / 60%), 0 0 70px rgb(112 40 232 / 15%);
  --hero-chrome-border: rgb(48 42 71 / 70%);
  --demo-browser-chrome: #211d37;
  --demo-browser-border: rgb(193 107 255 / 20%);
  --demo-address-background: #38314d;
  --dashboard-window-background: #100d24;
  --dashboard-window-border: rgb(193 107 255 / 20%);
  --dashboard-sidebar-background: #17132b;
  --dashboard-brand-line: #958ba8;
  --dashboard-nav-icon: #9a91aa;
  --dashboard-nav-icon-active: #d1a4ff;
  --dashboard-nav-active-background: rgb(147 61 245 / 22%);
  --dashboard-nav-line: #5b536a;
  --dashboard-user-divider: rgb(255 255 255 / 10%);
  --dashboard-user-line: #766e84;
  --dashboard-main-background: #100d24;
  --dashboard-topbar-background: #17132b;
  --dashboard-topbar-border: #302a47;
  --dashboard-page-title: #f7f5ff;
  --dashboard-avatar-border: #fff;
  --dashboard-avatar-shadow: #302a47;
  --dashboard-content-background: #100d24;
  --dashboard-title-line: #b6b0ca;
  --dashboard-card-background: #19162b;
  --dashboard-card-border: #302a47;
  --dashboard-label: #b6b0ca;
  --dashboard-value: #f7f5ff;
  --dashboard-icon: #c16bff;
  --dashboard-widget-background: #19162b;
  --dashboard-widget-heading: #b6b0ca;
  --dashboard-widget-heading-muted: #514968;
  --dashboard-chart-guide: #302a47;
  --dashboard-chart-line: #a66af4;
  --dashboard-chart-point: #f7f5ff;
  --dashboard-chart-axis: #514968;
  --dashboard-activity-border: #302a47;
  --dashboard-activity-primary: #b6b0ca;
  --dashboard-activity-secondary: #817a99;
  --process-number-color: rgb(182 176 202 / 58%);
  --button-light-shadow: 0 8px 28px rgb(16 5 44 / 18%);

  /* Typography */
  --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --heading-xl: clamp(2.375rem, 5.5vw, 3.75rem);
  --heading-lg: clamp(2rem, 3.8vw, 2.75rem);
  --heading-md: clamp(1.5rem, 2.5vw, 1.875rem);

  /* Spacing: 4px scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Shape, motion and layout */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.375rem;
  --radius-pill: 999px;
  --motion-fast: 180ms;
  --motion-normal: 300ms;
  --motion-slow: 450ms;
  --motion-micro: 180ms;
  --motion-interface: 300ms;
  --motion-entry: 560ms;
  --motion-stagger: 70ms;
  --motion-distance-reveal: 0.75rem;
  --motion-easing-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --motion-easing-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-easing-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --theme-transition: 300ms;
  --container-max: 75rem;
  --page-gutter: clamp(1.25rem, 4vw, 3rem);
  --section-space: clamp(4.5rem, 8vw, 7rem);
  --shadow-soft: 0 24px 80px rgb(3 2 13 / 38%);
  --shadow-card: 0 18px 48px rgb(3 2 13 / 20%);
}

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

  --bg-primary: #f8f7fc;
  --bg-secondary: #f0edf8;
  --surface: #fff;
  --surface-elevated: #f5f0ff;
  --brand-primary: #7028e8;
  --brand-secondary: #933df5;
  --brand-highlight: #7028e8;
  --brand-deep: #4217a8;
  --gradient-brand: linear-gradient(115deg, #4217a8 0%, #7028e8 52%, #933df5 100%);
  --text-primary: #211044;
  --text-secondary: #514866;
  --text-muted: #706782;
  --border-subtle: #ded7eb;
  --success: #16845f;
  --warning: #936100;
  --on-brand: #fff;

  --page-background: radial-gradient(ellipse at 82% 4%, rgb(112 40 232 / 7%), transparent 30rem), var(--bg-primary);
  --header-background: rgb(248 247 252 / 90%);
  --header-border: rgb(33 16 68 / 14%);
  --footer-background: #f0edf8;
  --section-divider-glow: rgb(112 40 232 / 5%);
  --menu-background: rgb(255 255 255 / 98%);
  --menu-item-hover: rgb(112 40 232 / 8%);
  --services-section-background: linear-gradient(180deg, rgb(240 237 248 / 72%), rgb(248 247 252 / 34%));
  --service-card-highlight-background: radial-gradient(ellipse at 100% 0%, rgb(112 40 232 / 8%), transparent 55%), var(--surface);
  --process-section-background: radial-gradient(ellipse at 50% 48%, rgb(112 40 232 / 5%), transparent 52%), linear-gradient(180deg, rgb(240 237 248 / 22%), rgb(240 237 248 / 55%) 50%, rgb(240 237 248 / 22%));
  --faq-section-background: linear-gradient(180deg, rgb(240 237 248 / 38%), transparent 30%, transparent 78%, rgb(240 237 248 / 34%));
  --contact-section-background: radial-gradient(ellipse at 50% 72%, rgb(112 40 232 / 5%), transparent 54%);
  --demo-ambient-glow: rgb(112 40 232 / 6%);
  --process-card-background: rgb(255 255 255 / 78%);
  --process-card-hover-background: #fff;
  --demo-card-background: #fff;
  --demo-visual-background: radial-gradient(ellipse at 50% 100%, rgb(112 40 232 / 12%), transparent 60%), #eeeaf6;
  --demo-badge-background: rgb(255 255 255 / 96%);
  --demo-badge-color: #4217a8;
  --demo-badge-border: rgb(112 40 232 / 22%);
  --button-secondary-background: rgb(245 240 255 / 76%);
  --button-secondary-hover-background: #f5f0ff;
  --button-secondary-hover-border: rgb(112 40 232 / 40%);
  --button-light-background: #7028e8;
  --button-light-color: #fff;
  --button-light-hover-background: #933df5;
  --icon-badge-border: rgb(112 40 232 / 18%);
  --icon-badge-background: linear-gradient(145deg, rgb(112 40 232 / 10%), #f5f0ff);
  --floating-note-background: rgb(255 255 255 / 96%);
  --floating-note-border: rgb(112 40 232 / 18%);
  --floating-note-shadow: 0 14px 34px rgb(33 16 68 / 12%);
  --hero-browser-background: #fff;
  --hero-browser-chrome: #f0edf8;
  --hero-browser-border: rgb(112 40 232 / 20%);
  --hero-address-background: #f8f7fc;
  --hero-address-border: rgb(33 16 68 / 12%);
  --hero-address-text: #706782;
  --hero-mock-background: radial-gradient(ellipse at 82% 70%, rgb(112 40 232 / 10%), transparent 45%), linear-gradient(145deg, #fff, #f5f0ff);
  --hero-mock-divider: rgb(33 16 68 / 10%);
  --hero-mock-text: #211044;
  --hero-mock-muted: #77708a;
  --hero-mock-art-background: linear-gradient(145deg, rgb(147 61 245 / 16%), transparent 68%), #f5f0ff;
  --hero-mock-art-border: rgb(112 40 232 / 16%);
  --hero-mock-art-ornament: rgb(112 40 232 / 42%);
  --hero-mock-footer: #d8d1e5;
  --contact-panel-background: radial-gradient(ellipse at 100% 0%, rgb(193 107 255 / 12%), transparent 38%), radial-gradient(ellipse at 0% 100%, rgb(112 40 232 / 8%), transparent 52%), linear-gradient(120deg, #f5f0ff, #f0edf8 57%, #ebe4f7);
  --contact-panel-border: rgb(112 40 232 / 20%);
  --contact-panel-orbit: rgb(112 40 232 / 12%);
  --contact-panel-orbit-shadow: rgb(112 40 232 / 3%);
  --contact-panel-text: #211044;
  --contact-panel-secondary: #514866;
  --contact-panel-eyebrow: #7028e8;
  --contact-option-background: rgb(255 255 255 / 78%);
  --contact-option-hover-background: #fff;
  --contact-option-border: rgb(112 40 232 / 14%);
  --contact-option-hover-border: rgb(112 40 232 / 38%);
  --contact-option-value: #514866;
  --contact-arrow: #706782;
  --contact-icon-color: #7028e8;
  --contact-icon-border: rgb(112 40 232 / 16%);
  --contact-icon-background: rgb(112 40 232 / 10%);
  --contact-whatsapp-color: #12845f;
  --contact-whatsapp-background: rgb(36 214 160 / 13%);
  --logo-filter: brightness(0) saturate(100%) invert(10%) sepia(44%) saturate(4940%) hue-rotate(258deg) brightness(70%) contrast(114%);
  --hero-browser-shadow: 0 32px 90px rgb(33 16 68 / 16%), 0 0 70px rgb(112 40 232 / 9%);
  --hero-chrome-border: rgb(33 16 68 / 12%);
  --demo-browser-chrome: #ede8f5;
  --demo-browser-border: rgb(112 40 232 / 18%);
  --demo-address-background: #f8f7fc;
  --dashboard-window-background: #f7f8fc;
  --dashboard-window-border: rgb(193 107 255 / 20%);
  --dashboard-sidebar-background: #17132b;
  --dashboard-brand-line: #958ba8;
  --dashboard-nav-icon: #9a91aa;
  --dashboard-nav-icon-active: #d1a4ff;
  --dashboard-nav-active-background: rgb(147 61 245 / 22%);
  --dashboard-nav-line: #5b536a;
  --dashboard-user-divider: rgb(255 255 255 / 10%);
  --dashboard-user-line: #766e84;
  --dashboard-main-background: #f7f8fc;
  --dashboard-topbar-background: #fff;
  --dashboard-topbar-border: #e9e9f0;
  --dashboard-page-title: #5b5668;
  --dashboard-avatar-border: #fff;
  --dashboard-avatar-shadow: #ded9e6;
  --dashboard-content-background: #f7f8fc;
  --dashboard-title-line: #373244;
  --dashboard-card-background: #fff;
  --dashboard-card-border: #e9e8ef;
  --dashboard-label: #aca6b8;
  --dashboard-value: #534d61;
  --dashboard-icon: #b88cef;
  --dashboard-widget-background: #fff;
  --dashboard-widget-heading: #7c758b;
  --dashboard-widget-heading-muted: #d7d3df;
  --dashboard-chart-guide: #eceaf1;
  --dashboard-chart-line: #8f4fe4;
  --dashboard-chart-point: #fff;
  --dashboard-chart-axis: #d8d5de;
  --dashboard-activity-border: #f0eef3;
  --dashboard-activity-primary: #898395;
  --dashboard-activity-secondary: #d1cdd8;
  --process-number-color: #706782;
  --button-light-shadow: 0 8px 28px rgb(43 27 78 / 14%);

  --shadow-soft: 0 24px 80px rgb(43 27 78 / 12%);
  --shadow-card: 0 18px 48px rgb(43 27 78 / 8%);
}