:root {
  color-scheme: dark;
  --surface-transition: 220ms ease;
}

/* Keep navigation readable over every dark hero and animation state. */
.mega-panel {
  background: linear-gradient(135deg, #171c25 0%, #0c1119 100%);
  border-color: #9db7dc42;
  box-shadow:
    0 32px 90px #000c,
    inset 0 1px 0 #ffffff0f;
  backdrop-filter: blur(28px) saturate(120%);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
}
.mega-copy > p,
.mega-link small {
  color: #c2ccda;
}
.mega-link strong {
  color: #f4f7fb;
}
.mega-link:hover,
.mega-link[aria-current] {
  background: #a7c9ff12;
}
.mega-icon {
  background: #a7c9ff0c;
  border-color: #a7c9ff30;
  color: #cfe1fa;
}
.mega-feature {
  background: radial-gradient(ellipse at 60% 20%, #29466f88, transparent 70%), #090e16;
  border-color: #9db7dc30;
}
.mega-bottom {
  background: #090e16;
  color: #b8c4d5;
  border-color: #9db7dc24;
}
.mega-bottom a,
.mega-feature-cta {
  color: #e0e9f6;
}

body,
.floating-header,
.glass-nav,
.mega-panel,
.button,
.comparison-card,
.demo-form-card,
input,
select,
textarea {
  transition:
    color var(--surface-transition),
    background-color var(--surface-transition),
    border-color var(--surface-transition),
    box-shadow var(--surface-transition);
}

@media (prefers-reduced-motion: reduce) {
  body,
  .floating-header,
  .glass-nav,
  .mega-panel,
  .button,
  .comparison-card,
  .demo-form-card,
  input,
  select,
  textarea {
    transition: none;
  }
}