/* =========================================================
   ЗЕЛЕМІНЬ — заклик до бронювання
   Фото на заході сонця: ліворуч темний ліс під світлий текст,
   праворуч будиночок. Головна дія — перейти до календаря.
   ========================================================= */
.cta { background: var(--forest-950); padding: 0 var(--gutter) clamp(24px, 2.4vw, 36px); }
.cta__banner {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: var(--container); margin: 0 auto;
  min-height: clamp(440px, 30vw, 540px); border-radius: 32px;
  display: flex; align-items: center;
  background: var(--forest-900); color: var(--cream);
  box-shadow: inset 0 0 0 1px rgba(240, 224, 184, .1);
}
.cta__bg { position: absolute; inset: 0; z-index: -2; }
.cta__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%;
  transform: scale(1.04); transition: transform 2.5s var(--ease);
}
.cta__banner:hover .cta__bg img { transform: scale(1); }
/* підсилюємо сонячний серпанок під текстом */
.cta__banner::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(12, 16, 9, .82) 0%, rgba(12, 16, 9, .6) 30%, rgba(12, 16, 9, .15) 50%, rgba(12, 16, 9, 0) 62%),
    linear-gradient(0deg, rgba(12, 16, 9, .35), transparent 35%);
}

.cta__body { width: min(800px, 100%); padding: clamp(30px, 3.2vw, 56px) clamp(36px, 5vw, 84px); min-width: 0; }
.cta__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px;
  font-size: .75rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--moss-300);
}
.cta__eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: #8fc06a; box-shadow: 0 0 0 4px rgba(143, 192, 106, .2); animation: livePulse 2.4s ease-in-out infinite; }
@keyframes livePulse { 50% { box-shadow: 0 0 0 7px rgba(143, 192, 106, 0); } }
.cta__title {
  margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--cream);
  font-size: clamp(2.3rem, 1.2rem + 2.4vw, 3.8rem); line-height: .98; letter-spacing: -.01em; text-wrap: balance;
}
.cta__title em {
  font-style: italic; font-weight: 500; padding-right: .06em;
  background: linear-gradient(180deg, #fff4dc 0%, var(--cream) 40%, #e2b06a 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cta__lead { margin: 16px 0 26px; max-width: 30em; font-size: 1.08rem; line-height: 1.65; color: var(--cream-soft); }

.cta__perks { list-style: none; margin: -8px 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.cta__perks li { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 500; color: var(--cream); }
.cta__perks li::before {
  content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%;
  background: rgba(242, 180, 101, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5' fill='none' stroke='%23f2b465' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.cta__actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.btn--dark {
  background: var(--forest-900); color: var(--cream); border-color: var(--forest-900);
  box-shadow: 0 18px 40px -18px rgba(23, 30, 17, .8);
}
.btn--dark:hover { background: var(--olive-700); border-color: var(--olive-700); transform: translateY(-1px); }
.cta__quick {
  display: grid; justify-items: start; align-content: center; gap: 1px;
  padding: 10px 24px; border-radius: 999px; cursor: pointer;
  background: rgba(240, 224, 184, .08); border: 1px solid rgba(240, 224, 184, .28);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--cream); text-align: left; transition: background .3s, border-color .3s, transform .3s var(--ease);
}
.cta__quick small { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--moss-300); }
.cta__quick span { font-weight: 600; font-size: .98rem; }
.cta__quick:hover { background: rgba(240, 224, 184, .16); border-color: var(--cream); transform: translateY(-1px); }

.cta__alt { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--glass-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.cta__alt > span { font-size: .86rem; color: var(--cream-soft); }
.cta__alt-links { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.cta__phone { font-weight: 700; font-size: 1.1rem; color: var(--cream); font-variant-numeric: tabular-nums; }
.cta__phone:hover { color: var(--ember); }

@media (max-width: 1080px) {
  .cta__banner::before { background: linear-gradient(90deg, rgba(12, 16, 9, .96) 0%, rgba(12, 16, 9, .82) 50%, rgba(12, 16, 9, .35) 100%); }
}
@media (max-width: 760px) {
  .cta { padding-bottom: 20px; }
  .cta__banner { border-radius: 24px; min-height: 0; align-items: flex-end; background: var(--forest-900); }
  .cta__bg { bottom: auto; height: 320px; }
  .cta__bg img { object-position: 50% 50%; }
  .cta__banner::before { background: linear-gradient(180deg, rgba(23, 30, 17, 0) 120px, var(--forest-900) 300px); }
  .cta__body { padding: 285px 20px 26px; }
  .cta__lead { font-size: 1rem; margin-bottom: 24px; }
  .cta__perks { flex-direction: column; gap: 8px; }
  .cta__alt { flex-direction: column; align-items: flex-start; }
  .cta__actions .btn, .cta__quick { width: 100%; justify-content: center; }
  .cta__quick { justify-items: center; text-align: center; }
}