.hero {
  position: relative;
  background: linear-gradient(180deg, #EAF3ED 0%, #F8F7F2 65%);
  overflow: hidden;
  padding-block: 56px 0;
}

.hero-inner {
  display: grid;
  gap: 40px;
  padding-bottom: 48px;
}

.hero-copy {
  max-width: 620px;
}

.hero-copy .eyebrow {
  background: var(--color-white);
  padding: 7px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow-card);
}

.hero-copy h1 {
  font-size: clamp(34px, 5.4vw, 60px);
  margin-block: 18px 20px;
  color: var(--color-text);
}

.hero-copy h1 .accent-word {
  color: var(--color-primary);
}

.hero-copy .hero-sub {
  font-size: 18px;
  color: var(--color-text-muted);
  max-width: 52ch;
  margin-bottom: 24px;
}

.hero-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.hero-keywords span {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-white);
  border: 1px solid rgba(0, 107, 63, 0.18);
  padding: 6px 14px;
  border-radius: 999px;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}

.hero-cta-row .btn {
  min-height: 44px;
}

.hero-support-line {
  font-size: 15px;
  color: var(--color-text-muted);
  font-weight: 600;
}

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}

.hero-photo-frame {
  position: relative;
  width: 100%;
  max-width: 560px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card-hover);
  aspect-ratio: 4 / 3.2;
  background-color: var(--color-section);
  background-image: url("../assets/images/hero-illustration.png");
  background-size: cover;
  background-position: center;
}

@media (min-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    padding-bottom: 72px;
  }
}