.hero {
  position: relative;
  overflow: hidden;
  background: #f2f5f2;
  padding: clamp(72px, 10vw, 120px) var(--px) clamp(56px, 8vw, 96px);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: #f2f5f2;
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  transition: opacity 1.1s cubic-bezier(.4, 0, .2, 1);
}

.hero.revealed .hero-overlay { opacity: 0 }

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 80% 30%, rgba(180, 220, 190, .35) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 10% 80%, rgba(200, 230, 205, .22) 0%, transparent 55%),
    linear-gradient(160deg, #edf4ee 0%, #f4f7f4 50%, #f9faf8 100%);
  pointer-events: none;
}

/* 우측 장식 원형 */
.hero-bg::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: clamp(280px, 40vw, 520px);
  height: clamp(280px, 40vw, 520px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 222, 128, .12) 0%, transparent 70%);
  pointer-events: none;
}

.hero-bg::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: 40%;
  width: clamp(160px, 22vw, 300px);
  height: clamp(160px, 22vw, 300px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 222, 128, .08) 0%, transparent 70%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 680px;
}

.hero-kicker {
  font-size: clamp(11px, 1.2vw, 13px);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #2d6a4f;
  margin-bottom: clamp(18px, 3vw, 28px);
  margin-left: clamp(14px, 2.9vw, 33px);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s var(--ease) .2s, transform .6s var(--ease) .2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-kicker::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background: #2d6a4f;
  flex-shrink: 0;
}

.hero.revealed .hero-kicker { opacity: 1; transform: none }

.hero-title {
  margin-bottom: clamp(14px, 2vw, 20px);
  line-height: 1;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease) .35s, transform .7s var(--ease) .35s;
}

.hero.revealed .hero-title { opacity: 1; transform: none }

.hero-title-img {
  display: block;
  width: clamp(260px, 52vw, 600px);
  height: auto;
  max-width: 100%;
}

.hero-sub {
  font-size: clamp(14px, 1.6vw, 18px);
  color: rgba(13, 26, 15, .5);
  line-height: 1.65;
  word-break: keep-all;
  margin-bottom: clamp(28px, 4vw, 40px);
  margin-left: clamp(14px, 2.9vw, 33px);
  max-width: 420px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s var(--ease) .5s, transform .6s var(--ease) .5s;
}

.hero.revealed .hero-sub { opacity: 1; transform: none }

.hero-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s var(--ease) .65s, transform .6s var(--ease) .65s;
}

.hero.revealed .hero-btns { opacity: 1; transform: none }

.btn-p {
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 700;
  color: #fff;
  background: #0d1a0f;
  padding: 13px 26px;
  border-radius: 100px;
  text-decoration: none;
  transition: transform .2s, background .2s;
}

.btn-p:hover { transform: translateY(-2px); background: #1a3320 }

.btn-g {
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 500;
  color: rgba(13, 26, 15, .65);
  padding: 13px 26px;
  border-radius: 100px;
  text-decoration: none;
  border: 1px solid rgba(13, 26, 15, .18);
  transition: border-color .2s, color .2s;
}

.btn-g:hover { border-color: rgba(13, 26, 15, .4); color: #0d1a0f }