html {
  scroll-behavior: smooth;
}

/* Simple focus outline tweak */
:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid theme('colors.brand.DEFAULT', #2F7DF6);
  outline-offset: 2px;
}

/* Dark-mode logo treatment (keep SVG black in light, white in dark) */
html.dark .logo-invert {
  filter: brightness(0) invert(1);
}

/* Mobile menu: allow shadow to show when open (no clip at bottom corners) */
#mobile-menu.menu-open {
  overflow: visible;
}

/* Hero text spacing: override space-y so margin-top applies */
.hero-subtext { margin-top: 5rem !important; }
.hero-pills { margin-top: 5rem !important; }
.hero-ctas { margin-top: 5.5rem !important; }

/* Hero: one-time scale 2→1 on background only (not the content) */
@keyframes hero-bg-scale-in {
  0% { transform: scale(2); opacity: 0.6; }
  100% { transform: scale(1); opacity: 1; }
}

/* Hero: background on ::before so only it scales; content stays on top */
.hero-bg-abstract {
  position: relative;
  overflow: hidden;
  background: transparent !important;
}

.hero-bg-abstract .hero-section {
  position: relative;
  z-index: 1;
}

.hero-bg-abstract::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  transform-origin: center;
  animation: hero-bg-scale-in 0.9s ease-out forwards;
  background-color: #fcfcfd;
  background-image:
    linear-gradient(90deg, rgba(71, 85, 105, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(71, 85, 105, 0.06) 1px, transparent 1px),
    linear-gradient(165deg, #fcfcfd 0%, #f8f9fb 50%, #f4f5f8 100%);
  background-size: 36px 36px, 36px 36px, 100% 100%;
  background-position: 0 0, 0 0, 0 0;
}

html.dark .hero-bg-abstract::before {
  background-color: rgba(15, 23, 42, 0.35);
  background-image:
    linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.25) 100%);
  background-size: 40px 40px, 40px 40px, 100% 100%;
}