/**
 * Mitverse marketing theme — loaded after the app bundle to override tokens,
 * hardcoded blues in bundled gradients/shadows, and motion curves.
 */
:root {
  /* Core UI tokens (bundle maps --brand → --ui-color-*) */
  --ui-color-bg: #f3f6fb;
  --ui-color-surface: #ffffff;
  --ui-color-surface-subtle: #e8eef7;
  --ui-color-text: #0c1222;
  --ui-color-text-muted: #3d4f6f;
  --ui-color-text-subtle: #5c6d8c;
  --ui-color-border: rgba(12, 18, 34, 0.11);
  --ui-color-border-strong: rgba(12, 18, 34, 0.17);
  /* Teal–indigo “verse” spectrum */
  --ui-color-brand: #0d9488;
  --ui-color-brand-strong: #0f766e;
  --ui-color-brand-soft: rgba(13, 148, 136, 0.16);
  --ui-color-success: #059669;
  --ui-shadow-sm: 0 1px 2px rgba(12, 18, 34, 0.06);
  --ui-shadow-md: 0 14px 36px rgba(12, 18, 34, 0.11);
  --ui-motion-fast: 0.12s;
  --ui-motion-base: 0.2s;
  --ui-motion-slow: 0.34s;
  --ui-motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ui-motion-ease-emphasis: cubic-bezier(0.22, 1, 0.32, 1);
}

:root {
  --motion-micro-fast: var(--ui-motion-fast);
  --motion-micro-base: var(--ui-motion-base);
  --motion-micro-slow: var(--ui-motion-slow);
  --motion-medium: 0.48s;
  --motion-page-enter: 0.58s;
  --motion-page-enter-fast: 0.42s;
  --motion-micro-ease: var(--ui-motion-ease);
  --motion-micro-ease-emphasized: var(--ui-motion-ease-emphasis);
  --motion-micro-lift: translate3d(0, -2px, 0) scale(1.01);
  --motion-micro-press: translate3d(0, 0, 0) scale(0.99);
  --motion-scroll-duration: 0.64s;
}

body {
  background: var(--bg);
}

/* Ambient mesh behind scrollable pages */
.landing-page,
.service-detail-page {
  background:
    radial-gradient(980px 520px at 12% -8%, rgba(13, 148, 136, 0.14), transparent 58%),
    radial-gradient(840px 480px at 88% 6%, rgba(99, 102, 241, 0.1), transparent 52%),
    radial-gradient(700px 400px at 50% 100%, rgba(14, 165, 233, 0.06), transparent 55%),
    linear-gradient(180deg, #f3f6fb 0%, #fafcfe 45%, #ffffff 100%) !important;
}

.site-header {
  background: color-mix(in srgb, var(--ui-color-surface) 88%, transparent);
  border-bottom-color: var(--border);
}

.site-header.site-header-compact,
.site-header:focus-within {
  box-shadow: 0 14px 34px rgba(12, 18, 34, 0.09);
}

.hero-badge {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.stat-item {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}

/* Bundled primary hover glows (was #2563eb40) */
.btn-primary:hover:not(:disabled):not([aria-disabled='true']) {
  box-shadow: 0 16px 36px rgba(13, 148, 136, 0.35);
}

.ui-button--primary:hover:not(:disabled):not([aria-disabled='true']) {
  box-shadow: 0 16px 36px rgba(13, 148, 136, 0.35);
}

/* Deferred landing chunk: scroll masks matched to new base */
.landing-scroll-mask.top {
  background: linear-gradient(to bottom, rgba(243, 246, 251, 0.94), rgba(243, 246, 251, 0));
}

.landing-scroll-mask.bottom {
  background: linear-gradient(to top, rgba(243, 246, 251, 0.94), rgba(243, 246, 251, 0));
}

.landing-scroll-button {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-page-enter: 0.01ms;
    --motion-page-enter-fast: 0.01ms;
    --motion-scroll-duration: 0.01ms;
    --motion-micro-lift: translate3d(0, 0, 0);
    --motion-micro-press: translate3d(0, 0, 0);
  }
}