/* Tiny custom additions. Tailwind handles 95%. */

html {
  scroll-behavior: smooth;
}

body {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
  text-rendering: optimizeLegibility;
}

/* Hide content until Alpine is initialised to prevent flash of unstyled state. */
[x-cloak] {
  display: none !important;
}

/* Underline links inside prose blocks only. */
.prose a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Subtle focus ring for keyboard users. */
:focus-visible {
  outline: 2px solid #0F766E;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Make form inputs feel consistent across browsers. */
input,
select,
textarea {
  font-family: inherit;
}

/* Sticky shadow nudge when scrolled. */
.nav-scrolled {
  box-shadow: 0 1px 0 #E5E7EB, 0 4px 16px rgba(14, 17, 22, 0.03);
}

/* Hero halo: zachte blauwe gloed achter de headline, geeft SaaS-gevoel. */
.hero-halo {
  position: relative;
  isolation: isolate;
}
.hero-halo::before {
  content: "";
  position: absolute;
  inset: -10% 20% auto -10%;
  height: 70%;
  background: radial-gradient(ellipse at 30% 40%, rgba(56, 189, 248, 0.18), rgba(37, 99, 235, 0.08) 40%, transparent 70%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}

/* CTA glow voor primaire knoppen — subtle floating feel. */
.btn-glow {
  box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.25);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.btn-glow:hover {
  box-shadow: 0 6px 20px 0 rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
}

/* Hero subtle blue-to-white gradient background. */
.hero-bg {
  background:
    radial-gradient(circle at 80% -10%, rgba(56, 189, 248, 0.12), transparent 50%),
    linear-gradient(to bottom, #EFF6FF 0%, #FFFFFF 60%);
}