/* ── CSS CUSTOM PROPERTIES ── */
:root {
  --color-background: rgb(91, 196, 191);
  --color-secondary-background: rgb(245, 245, 245);
  --color-foreground: rgb(255, 255, 255);
  --color-border: rgb(229, 229, 229);
  --color-field: rgb(245, 245, 245);
  --color-progress-bar: rgb(13, 135, 86);
  --color-lighten-60: #bde7e5;
  --color-lighten-40: #9ddcd9;
  --color-lighten-19: #7acfcb;

  --color-primary: rgb(240, 92, 122);
  --color-primary-dark: rgb(210, 60, 92);
  --color-primary-light: rgb(255, 200, 215);
  --color-secondary: rgb(255, 219, 79);
  --color-secondary-dark: rgb(220, 185, 40);

  --teal-deep: #3aada8;
  --teal-dark: #1f8b87;
  --teal-darkest: #155f5c;
}

/* ── RESET ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;
  background: var(--color-secondary-background);
  color: #222;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ── SECTION TYPOGRAPHY SYSTEM ── */
.section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

.section-title {
  font-family: "Baloo 2", cursive;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 0.75rem;
  color: var(--teal-darkest);
}

.section-sub {
  color: #777;
  font-size: 15px;
  font-weight: 300;
  max-width: 500px;
  line-height: 1.75;
  margin-bottom: 3rem;
}

/* ── KEYFRAMES ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes livepulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.4);
  }
}

/* ── HERO ENTRY ANIMATIONS ── */
.hero-inner > * {
  animation: fadeUp 0.55s ease both;
}
.hero-eyebrow {
  animation-delay: 0.1s;
}
.hero h1 {
  animation-delay: 0.2s;
}
.hero-desc {
  animation-delay: 0.3s;
}
.hero-actions {
  animation-delay: 0.4s;
}