/* home.css — landing page only. A big, calm hero plus three feature cards;
   distinctly simpler/wider than the list-heavy blog/chat/account pages. */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-peach-pale);
  padding: 90px 20px 100px;
  text-align: center;
}

.hero-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin-bottom: 0.4em;
}

.hero-tagline {
  font-size: 1.15rem;
  color: var(--color-forest-deep);
  margin-bottom: 2em;
}

.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.hero-doodle-1 { top: 12%; left: 6%; width: 70px; transform: rotate(-12deg); }
.hero-doodle-2 { bottom: 10%; left: 12%; width: 60px; transform: rotate(8deg); }
.hero-doodle-3 { top: 18%; right: 8%; width: 60px; }

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 64px 20px;
}

.feature-card { text-align: center; }
.feature-icon { width: 56px; height: 56px; margin: 0 auto 16px; }
.feature-card h3 { margin-bottom: 0.4em; }
.feature-card p { color: var(--color-forest-deep); margin: 0; }

@media (max-width: 760px) {
  .features { grid-template-columns: 1fr; }
}