:root {
  --impact-a: #2f6df6;
  /* blauw */
  --impact-b: #8a5bff;
  /* paars */
  --impact-c: #18a0fb;
  /* cyaan */
}

/* HERO — animated gradient mesh + larger type */
.hero {
  position: relative;
  overflow: hidden
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('assets/background.svg') center 6%/1100px auto no-repeat;
  opacity: .16;
  pointer-events: none;
  mask: none;
  -webkit-mask: none
}

.hero::after {
  content: "";
  position: absolute;
  inset: -30% -10% -10% -10%;
  z-index: 0;
  filter: blur(24px);
  background:
    radial-gradient(600px 400px at 15% 12%, rgba(47, 109, 246, .28), transparent 60%),
    radial-gradient(520px 360px at 85% 18%, rgba(138, 91, 255, .26), transparent 60%),
    radial-gradient(680px 420px at 50% 88%, rgba(24, 160, 251, .22), transparent 60%);
  animation: meshShift 16s ease-in-out infinite alternate;
  will-change: transform;
  transform: translate3d(var(--hx, 0px), var(--hy, 0px), 0);
  transition: transform .25s ease-out;
}

@keyframes meshShift {
  0% {
    background-position: 15% 12%, 85% 18%, 50% 88%
  }

  100% {
    background-position: 25% 16%, 75% 22%, 46% 80%
  }
}

.hero-inner {
  position: relative;
  z-index: 1
}

.hero .container {
  width: min(900px, 86%)
}

.hero h1 {
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 8px
}

.hero .subtitle {
  font-size: clamp(16px, 1.7vw, 18px);
  margin: 0
}

.hero .actions {
  gap: 14px
}

/* CTA — premium shine */
.btn-primary {
  position: relative;
  overflow: hidden
}

.btn-primary::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -30%;
  width: 22%;
  height: 220%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .7), transparent);
  transform: translateX(-160%) rotate(20deg);
  transition: transform .6s ease
}

.btn-primary:hover::before {
  transform: translateX(320%) rotate(20deg)
}

/* FEATURES — glassy gradient border cards */
.features .grid {
  perspective: 900px
}

.feature {
  position: relative;
  padding: 28px 22px;
  border-radius: 16px;
  background: linear-gradient(rgba(255, 255, 255, .82), rgba(255, 255, 255, .9)) padding-box,
    linear-gradient(120deg, rgba(47, 109, 246, .35), rgba(138, 91, 255, .28)) border-box;
  border: 1px solid transparent;
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: 0 10px 28px rgba(16, 38, 74, .10);
  transition: transform .22s ease, box-shadow .25s ease
}

.feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(16, 38, 74, .18)
}

.feature .icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  filter: drop-shadow(0 14px 22px rgba(47, 109, 246, .25))
}

.feature h3 {
  font-size: 19px;
  margin: 8px 0 6px
}

.feature p {
  font-size: 15px
}

/* interactive highlight */
.feature::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(140px 80px at var(--px, 50%) var(--py, 0%), rgba(47, 109, 246, .16), transparent 70%);
  opacity: 0;
  transition: opacity .2s
}

.feature:hover::after {
  opacity: 1
}

/* Reveal animation */
[data-reveal],
.feature {
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition: opacity .7s ease, transform .7s ease
}

.reveal-in {
  opacity: 1;
  transform: none
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .hero::after {
    animation: none
  }

  .btn-primary::before {
    display: none
  }

  [data-reveal],
  .feature {
    transition: none;
    opacity: 1;
    transform: none
  }
}

.site-header {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(160%) blur(10px)
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  opacity: .32
}

.site-header.scrolled::after {
  opacity: .5
}

.hero-stats {
  position: relative;
  margin-top: 36px;
  pointer-events: none;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 260px));
  gap: 22px;
  justify-content: center;
  align-items: start;
  justify-items: center
}

.hero-stats .stat-card {
  position: relative;
  width: auto;
  min-width: 255px;
  max-width: 260px;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  padding: 18px 16px;
  border-radius: 16px;
  background: linear-gradient(rgba(255, 255, 255, .86), rgba(255, 255, 255, .94)) padding-box, linear-gradient(120deg, rgba(47, 109, 246, .30), rgba(138, 91, 255, .24)) border-box;
  border: 1px solid transparent;
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: 0 10px 26px rgba(16, 38, 74, .10);
  color: #0e1320;
  will-change: transform;
  transform: translateZ(0);
}

.hero-stats .stat-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #68748a
}

.hero-stats .mini-icon {
  width: 18px;
  height: 18px;
  margin: 0;
  filter: drop-shadow(0 6px 12px rgba(47, 109, 246, .18))
}

.hero-stats .stat-main {
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  gap: 6px
}

.hero-stats .stat-number {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1
}

.hero-stats .sparkline {
  display: block;
  margin-top: auto;
  width: 100%;
  height: 40px;
  color: #3a7bff;
  opacity: .9
}

/* removed absolute positioning for tighter alignment */

@media (max-width:1000px) {
  .hero-stats {
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    gap: 18px
  }
}

@media (max-width:700px) {
  .hero {
    padding: 104px 0 128px
  }

  .hero .container {
    width: min(620px, 92%)
  }

  .hero::before {
    background-position: center 2%;
    background-size: 820px auto;
    opacity: .18
  }

  .hero-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 420px;
    margin-inline: auto
  }

  .hero-stats .stat-card {
    position: static;
    transform: none !important;
    min-width: 0;
    width: 100%;
    box-sizing: border-box
  }

  /* reduce curve overlap */
  .intro .curve {
    height: 120px
  }

  .intro .curve.top {
    top: -80px
  }

  .intro .curve.bottom {
    bottom: -80px
  }
}

@media (max-width:480px) {
  .hero {
    padding: 88px 0 64px
  }

  .hero .actions {
    gap: 10px
  }

  .hero-stats {
    gap: 10px
  }
}