:root {
  --orange: #F7931E;
  --orange-dark: #D97D0E;
  --cta-orange: #F7931E;
  --cta-orange-dark: #D97D0E;
  --green-dark: #2E5E2C;
  --green-medium: #5E8F3B;
  --beige-light: #F7F2E8;
  --rural-page: #FAF8F2;
  --rural-section: #EFF4E7;
  --warm-section: #FFFDF8;
  --warm-beige: #F7F2E8;
}

html,
body,
.bg-page {
  background: var(--rural-page);
}

.bg-page {
  background:
    linear-gradient(180deg, #FAF8F2 0%, #F7F2E8 34%, #FFFDF8 68%, #FAF8F2 100%);
}

.hero-section {
  background:
    radial-gradient(circle at 50% 0%, #ffffff 0%, #EFF4E7 54%, #FAF8F2 100%);
  margin-inline: calc(50% - 50vw);
  padding-inline: max(1.25rem, calc(50vw - 36rem));
}

.section-block {
  margin-inline: calc(50% - 50vw);
  padding-inline: max(1.25rem, calc(50vw - 36rem));
}

.section-block:nth-of-type(odd) {
  background: var(--rural-section);
}

.section-block:nth-of-type(even) {
  background: linear-gradient(180deg, var(--warm-section), var(--warm-beige));
}

.site-footer {
  margin-inline: calc(50% - 50vw);
  background: var(--rural-page);
}

.hero-image-shell {
  max-width: min(78vw, 420px);
  margin-left: auto;
  margin-right: auto;
}

@media (width >= 1024px) {
  .hero-image-shell {
    max-width: 460px;
  }
}

.cta-primary {
  background: var(--cta-orange);
  color: #fff;
  box-shadow: 0 14px 26px #f7931e42;
}

.cta-primary:hover {
  background: var(--cta-orange-dark);
  box-shadow: 0 18px 34px #f7931e52;
}

.cta-secondary:hover {
  border-color: var(--cta-orange);
  color: var(--cta-orange-dark);
}

.icon-wrap {
  color: var(--green-medium);
  background: #EEF5E7;
  border-color: #5e8f3b52;
}

.info-card:hover,
.type-card:hover,
.bonus-card:hover,
.review-card:hover {
  border-color: #5e8f3b5c;
}

.dot-active {
  background: var(--cta-orange);
}

.bonus-label,
.bonus-price strong,
.stars,
.faq-plus,
.check-icon {
  color: var(--green-dark);
}

.plan-price strong,
.discount-price strong,
.total-bonus strong {
  color: var(--green-medium);
}

.plan-price-complete strong {
  color: var(--green-dark);
}

.choice-badge {
  background: var(--cta-orange);
  color: #fff;
}

.featured-plan,
.discount-popup {
  border-color: var(--cta-orange);
}

.discount-badge {
  color: var(--cta-orange-dark);
  background: #fff3e2;
  border-color: #f7931e66;
}

.shield-icon {
  background: var(--green-dark);
}

.total-bonus {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(94, 143, 59, 0.24);
  box-shadow:
    0 24px 48px rgba(46, 94, 44, 0.16),
    0 8px 18px rgba(46, 94, 44, 0.1);
  backdrop-filter: blur(8px);
}

.total-bonus p {
  color: rgba(34, 25, 22, 0.62);
}