:root {
  color-scheme: only light;
}

body {
  font-family: "Inter", "Segoe UI", sans-serif;
  background: linear-gradient(140deg, #f2fff7 0%, #edfff0 50%, #f9fffb 100%);
}

.glass {
  backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 20px 45px rgba(69, 90, 100, 0.18);
}

.pill {
  background: linear-gradient(120deg, #16a34a, #4ade80);
}

.card-gradient {
  background: linear-gradient(160deg, rgba(34, 197, 94, 0.12), rgba(132, 225, 188, 0.08));
}

.card-gradient:hover {
  background: linear-gradient(160deg, rgba(34, 197, 94, 0.18), rgba(110, 231, 183, 0.12));
}

.scroll-indicator {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.9;
  }

  50% {
    transform: translateY(12px);
    opacity: 0.4;
  }
}

#mobile-menu.is-open {
  display: flex;
  width: 100vw;
  height: 100dvh;
  min-height: 100vh;
}