/* ── Smooth scroll ── */
html {
  scroll-behavior: smooth;
}

/* ── Section fade-up animation ── */
[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Navbar scroll states ── */
.site-header {
  position: fixed;
  top: 0px;
  left: 16px;
  right: 16px;
  z-index: 999;
  border-radius: 16px;
  border: 1px solid transparent;
  padding: 0;
  /* From https://css.glass */
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;

backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);

}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}


/* ── Primary button hover (original CTA only) ── */
.primary-btn {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition:
    background 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.primary-btn:hover {
  background: radial-gradient(
      62.64% 82.75% at 28.14% -10.42%,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    #b8cf52;
}

.primary-btn:hover svg {
  transform: translateX(4px);
}

.primary-btn svg {
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Global cursor for all interactive elements ── */
a,
button,
[role="button"],
label,
select,
input[type="submit"] {
  cursor: pointer;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }


}