:root { --ease: cubic-bezier(.22,.61,.36,1); }

html, body {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
}

body {
  background-color: #F2F7FB;
  color: #142a3d;
  -webkit-font-smoothing: antialiased;
}

section[id] {
  scroll-margin-top: 104px;
}

.font-display {
  font-family: 'Fraunces', Georgia, serif;
  letter-spacing: -0.01em;
}

.grain::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .03;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mesh-warm {
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(79,149,198,0.18), transparent 60%),
    radial-gradient(55% 45% at 5% 15%, rgba(216,232,243,0.55), transparent 55%);
}

.marquee {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

.marquee-pause:hover .marquee {
  animation-play-state: paused;
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.wpp-pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: #25D366;
  z-index: -1;
  animation: pulse-ring 2.2s var(--ease) infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(1); opacity: .55; }
  70% { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease);
}

.faq-item.open .faq-panel {
  grid-template-rows: 1fr;
}

.faq-panel > div {
  overflow: hidden;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.tracking-mega {
  letter-spacing: .28em;
}

.card-hover {
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.card-hover:hover {
  transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }

  .marquee,
  .wpp-pulse::before {
    animation: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}