:root {
  --font-display: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;

  --primary: #3688EB;
  --primary-hover: #368CF4;
  --primary-soft: #E7F5FF;
  --blue-tint: #F1F9FF;

  --red-soft: #FFE4E4;
  --red: #E94B4B;

  --page: #ffffff;
  --surface: #ffffff;
  --surface-2: #F8F8F8;

  --ink: #1F2430;
  --muted: #737373;
  --muted-2: #9A9A9A;

  --link: #0075FF;

  --dark: #10141C;
  --dark-fg: #ffffff;
  --dark-muted: #9AA3AF;

  --video: #0E1B33;

  /* gradients */
  --grad-brand: linear-gradient(135deg, #5EA6F5 0%, #3688EB 55%, #2E6FD6 100%);
  --grad-brand-soft: linear-gradient(135deg, #EAF4FF 0%, #E7F5FF 100%);
  --grad-red: linear-gradient(135deg, #FF7171 0%, #E94B4B 100%);
  --grad-hero: linear-gradient(180deg, #E9F3FF 0%, #FFFFFF 58%);
  --grad-red-card: linear-gradient(160deg, #FFFFFF 0%, #FFE4E4 120%);
  --grad-blue-card: linear-gradient(160deg, #FFFFFF 0%, #F1F9FF 120%);
  --grad-video: linear-gradient(145deg, #1E3E74 0%, #12264A 55%, #0A1424 100%);
  --grad-soft: linear-gradient(180deg, #FFFFFF 0%, #F4F8FD 100%);

  --glow-a: #B9D6FB;
  --glow-b: #E0EDFF;
}

html.dark {
  --primary: #4F97F0;
  --primary-hover: #62A5F4;
  --primary-soft: #16324F;
  --blue-tint: #101E33;

  --red-soft: #3A1D22;
  --red: #FF7171;

  --page: #0A1120;
  --surface: #101B2E;
  --surface-2: #0C1424;

  --ink: #E7EEFB;
  --muted: #ADB9CD;
  --muted-2: #8A94A8;

  --link: #6FAEFF;

  --video: #0A0F1A;

  --grad-hero: linear-gradient(180deg, #0D1B33 0%, #0A1120 62%);
  --grad-red-card: linear-gradient(160deg, #1A1418 0%, #3A1D22 130%);
  --grad-blue-card: linear-gradient(160deg, #101A2D 0%, #12213A 130%);
  --grad-soft: linear-gradient(180deg, #0E1728 0%, #0A1120 100%);

  --glow-a: #24518F;
  --glow-b: #17315F;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
}

.font-display {
  font-family: var(--font-display);
}
.font-body {
  font-family: var(--font-body);
}

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* FAQ */
.faq-accent {
  display: none;
}
.faq-panel {
  display: none;
}
.faq-item.is-open .faq-accent {
  display: block;
}
.faq-item.is-open .faq-panel {
  display: block;
}
.faq-item.is-open .faq-toggle-icon {
  transform: rotate(45deg);
}
.faq-toggle-icon {
  transition: transform 0.2s ease;
}