:root {
  --forest-50: #f4f8f2;
  --forest-100: #e7efe3;
  --forest-200: #cfdfc6;
  --forest-700: #2f5d43;
  --forest-800: #204433;
  --steel-700: #2e3e4f;
  --steel-900: #1d2733;
  --paper: #fdfcf8;
  --ember: #a8542e;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 10% -20%, rgba(55, 87, 113, 0.25), transparent 50%),
    radial-gradient(circle at 90% -10%, rgba(79, 132, 91, 0.24), transparent 45%),
    linear-gradient(180deg, #f5f6f2 0%, var(--paper) 35%, #f1f3ef 100%);
}

.texture-overlay {
  background-image: linear-gradient(
      115deg,
      rgba(32, 68, 51, 0.08) 0,
      rgba(32, 68, 51, 0) 35%
    ),
    repeating-linear-gradient(
      -35deg,
      rgba(31, 39, 51, 0.04),
      rgba(31, 39, 51, 0.04) 1px,
      transparent 1px,
      transparent 10px
    );
}

.hero-clip {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

.glass-panel {
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(47, 93, 67, 0.16);
}

.card-float {
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.card-float:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(29, 39, 51, 0.14);
}

.fade-in-up {
  opacity: 0;
  transform: translateY(18px);
  animation: fadeUp 0.8s ease forwards;
}

.fade-delay-1 {
  animation-delay: 0.08s;
}

.fade-delay-2 {
  animation-delay: 0.16s;
}

.fade-delay-3 {
  animation-delay: 0.24s;
}

.fade-delay-4 {
  animation-delay: 0.32s;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-link::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: var(--forest-700);
  transition: width 180ms ease;
}

.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
  width: 100%;
}

.prose-list li + li {
  margin-top: 0.4rem;
}

.store-badge {
  transition: transform 180ms ease;
}

.store-badge:hover {
  transform: scale(1.03);
}

@media (max-width: 767px) {
  .hero-clip {
    clip-path: none;
  }
}