:root{
   /* Brand */
  --brand-900: #0f2f1f;
  --brand-860: #0c2a1c;
  --brand-800: #18452e;

  --accent: #76c14a;
  --accent-dark: #5ea53a;
  --accent-soft: rgba(118,193,74,.10);
  --accent-soft-2: rgba(118,193,74,.16);
  --accent-line: rgba(118,193,74,.22);

  /* Neutrals */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7faf7;
  --surface-3: #f2f5f2;
  --border: #e5ebe5;

  --text: #0b1f15;
  --muted: #5c6b62;
  --text-soft: rgba(15,47,31,.74);

  --on-dark: rgba(255,255,255,.92);
  --on-dark-muted: rgba(255,255,255,.74);
  --on-dark-kicker: rgba(255,255,255,.62);

  --chip-bg: rgba(118, 193, 74, .10);
  --chip-bd: rgba(118, 193, 74, .18);

  /* Radius */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 10px 24px rgba(15,47,31,.06);
  --shadow-md: 0 14px 34px rgba(15,47,31,.08);
  --shadow-lg: 0 22px 48px rgba(15,47,31,.12);

  /* Layout */
  --container-max: 1180px;
  --container-pad: 32px;
  --section-y: clamp(56px, 6vw, 92px);
  --section-y-tight: clamp(40px, 4.5vw, 72px);
  --section-y-loose: clamp(72px, 7vw, 120px);

  /* Typography */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --title-xl: clamp(2.25rem, 4vw, 4.25rem);
  --title-lg: clamp(1.9rem, 3vw, 3rem);
  --title-md: clamp(1.45rem, 2.2vw, 2.15rem);
  --text-md: 1.02rem;
  --text-sm: .95rem;

  /* Motion */
  --ease-standard: .22s ease;
}

html, body{ font-family: var(--font-sans); }

/* =========================================================
   LAYOUT
========================================================= */

html, body {
  margin: 0;
  padding: 0;
}

.container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

.section{ padding: clamp(56px, 6vw, 92px) 0; }
.section--tight{ padding: clamp(40px, 4.5vw, 72px) 0; }
.section--loose{ padding: clamp(72px, 7vw, 120px) 0; }

/* Section themes */
.section--light{ background: var(--bg); color: var(--text); }
.section--dark{ background: var(--brand-860); color: var(--on-dark); }
.section--soft{ background: var(--surface-2); color: var(--text); }
.section--softRadial{
  background:
    radial-gradient(circle at top left, rgba(118,193,74,.12), transparent 34%),
    var(--surface-2);
}


.grid-2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.grid-3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.grid-4{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 920px){
  .grid-2,
  .grid-3,
  .grid-4{
    grid-template-columns: 1fr;
  }
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
  --reveal-delay: 0ms;
}

.reveal.is-visible {
  animation: revealUp 900ms cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: var(--reveal-delay);
}

.reveal--soft {
  transform: translateY(18px);
}

.reveal--delay-1 { --reveal-delay: 120ms; }
.reveal--delay-2 { --reveal-delay: 240ms; }
.reveal--delay-3 { --reveal-delay: 360ms; }
.reveal--delay-4 { --reveal-delay: 480ms; }
.reveal--delay-5 { --reveal-delay: 600ms; }
.reveal--delay-6 { --reveal-delay: 720ms; }

@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

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


.heroIntro {
  opacity: 0;
  transform: translateY(24px);
  animation: heroIntro 900ms cubic-bezier(.22, 1, .36, 1) forwards;
}

.heroIntro--1 { animation-delay: 120ms; }
.heroIntro--2 { animation-delay: 260ms; }
.heroIntro--3 { animation-delay: 400ms; }
.heroIntro--4 { animation-delay: 540ms; }

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