/* ==== HERO PREMIUM ==== */

.hero {
  position: relative !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: left !important;
  color: #fff !important;
  overflow: hidden !important;
  padding: 110px 0 70px !important;
  background: #0b0b0f !important;
}

.hero__bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(255, 109, 61, 0.22), transparent 55%),
    radial-gradient(ellipse 70% 50% at 80% 20%, rgba(139, 92, 246, 0.18), transparent 50%),
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(255, 109, 61, 0.12), transparent 50%),
    linear-gradient(180deg, #0b0b0f 0%, #13131a 50%, #0b0b0f 100%) !important;
  animation: none !important;
}

.hero__glow {
  position: absolute !important;
  border-radius: 50% !important;
  filter: blur(80px) !important;
  opacity: 0.55 !important;
  pointer-events: none !important;
}

.hero__glow--1 {
  width: 420px !important;
  height: 420px !important;
  top: -120px !important;
  right: -60px !important;
  background: rgba(255, 109, 61, 0.35) !important;
}

.hero__glow--2 {
  width: 360px !important;
  height: 360px !important;
  bottom: -80px !important;
  left: -80px !important;
  background: rgba(139, 92, 246, 0.28) !important;
}

.hero__glow--3 {
  width: 260px !important;
  height: 260px !important;
  top: 40% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: rgba(255, 109, 61, 0.12) !important;
}

.hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,0.35) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.hero__content {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 1200px !important;
  padding: 0 32px !important;
  margin: 0 auto !important;
  text-align: left !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 260px !important;
  gap: 48px !important;
  align-items: center !important;
}

/* redesign.css добавляет декоративный ::before, который становится grid-item
   и ломает двухколоночную раскладку. Убираем его. */
.hero__content::before {
  content: none !important;
  display: none !important;
}

/* Явно раскладываем колонки, чтобы pseudo-element или другие стили
   не могли их переставить местами. */
.hero__main {
  grid-column: 1 / 2 !important;
}

.hero__side {
  grid-column: 2 / 3 !important;
}

.hero__eyebrow {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(255, 109, 61, 0.9) !important;
  margin-bottom: 18px !important;
  padding: 7px 16px !important;
  border: 1px solid rgba(255, 109, 61, 0.35) !important;
  border-radius: 100px !important;
  background: rgba(255, 109, 61, 0.08) !important;
}

.hero__content h1 {
  font-size: clamp(32px, 4.6vw, 58px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  margin: 0 0 16px !important;
  color: #fff !important;
  max-width: 700px !important;
}

.hero__brand {
  font-weight: 900 !important;
}

.hero__brand--yandex {
  color: #ff6d3d !important;
}

.hero__brand--google {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
}

.hero__subtitle {
  font-size: clamp(15px, 1.6vw, 20px) !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  max-width: 520px !important;
  margin: 0 0 28px !important;
}

/* Offer card */
.hero__offer {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 26px 30px 24px !important;
  margin: 0 !important;
  max-width: 440px !important;
  width: 100% !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
}

.hero__offer-badge {
  position: absolute !important;
  top: -12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: linear-gradient(135deg, #ff6d3d, #ff8a5c) !important;
  padding: 6px 16px !important;
  border-radius: 100px !important;
  box-shadow: 0 8px 24px rgba(255, 109, 61, 0.35) !important;
}

.hero__offer-head {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
}

.hero__offer-num {
  font-size: clamp(64px, 8vw, 96px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  background: linear-gradient(180deg, #fff 0%, #ff9e7a 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.hero__offer-label {
  text-align: left !important;
  font-size: clamp(16px, 2vw, 22px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #fff !important;
}

.hero__offer-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px 14px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.hero__offer-list li {
  position: relative !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.78) !important;
  padding-left: 18px !important;
}

.hero__offer-list li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: #ff6d3d !important;
  font-weight: 800 !important;
}

.hero__offer-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 14px 28px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 100px !important;
  background: linear-gradient(135deg, #ff6d3d 0%, #ff8a5c 100%) !important;
  box-shadow: 0 12px 32px rgba(255, 109, 61, 0.38) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  border: none !important;
}

.hero__offer-btn:hover,
.hero__offer-btn:focus {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 44px rgba(255, 109, 61, 0.48) !important;
  color: #fff !important;
  text-decoration: none !important;
}

.hero__offer-note {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  margin: 0 !important;
}

/* Social proof */
.hero__proof {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 22px !important;
}

.hero__proof-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  padding: 16px 20px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  width: 100% !important;
}

.hero__proof-item strong {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1 !important;
}

.hero__proof-item span {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* ===== Buttons under hero ===== */
.hero-after-cta {
  position: relative !important;
  z-index: 3 !important;
  background: #fff !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  padding: 48px 0 52px !important;
}

.hero-after-cta .hero-after-cta__inner {
  display: flex !important;
  gap: 14px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.hero__cta-group {
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin-top: 8px !important;
}

.hero-after-cta__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 22px 56px !important;
  border-radius: 100px !important;
  font-family: var(--font-head, "MontserratCustom", sans-serif) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s !important;
  -webkit-font-smoothing: antialiased !important;
}

.hero-after-cta__btn--primary {
  background: #ff6d3d !important;
  color: #fff !important;
  box-shadow: 0 8px 28px rgba(255, 109, 61, 0.42) !important;
}

.hero-after-cta__btn--primary:hover {
  background: #ff5722 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 36px rgba(255, 109, 61, 0.52) !important;
}

.hero-after-cta__btn--secondary {
  background: transparent !important;
  color: #ff6d3d !important;
  border: 1.5px solid #ff6d3d !important;
}

.hero-after-cta__btn--secondary:hover {
  background: #ff6d3d !important;
  border-color: #ff6d3d !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(255, 109, 61, 0.25) !important;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .hero__content {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .hero__main,
  .hero__side {
    grid-column: auto !important;
  }

  .hero__side {
    order: 2 !important;
  }

  .hero__proof {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  .hero__proof-item {
    width: auto !important;
    padding: 14px 18px !important;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: auto !important;
    padding: 120px 0 60px !important;
  }

  .hero__content {
    padding: 0 24px !important;
  }

  .hero__content h1 br {
    display: none !important;
  }

  .hero__offer {
    padding: 26px 22px 24px !important;
    max-width: 100% !important;
  }

  .hero__offer-head {
    gap: 10px !important;
  }

  .hero__offer-label {
    font-size: 18px !important;
  }

  .hero__offer-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .hero__proof {
    gap: 10px !important;
  }

  .hero__proof-item {
    padding: 12px 16px !important;
  }

  .hero__proof-item strong {
    font-size: 18px !important;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 110px 0 60px !important;
  }

  .hero__eyebrow {
    font-size: 10px !important;
    padding: 6px 12px !important;
  }

  .hero__offer {
    padding: 24px 18px 22px !important;
    border-radius: 20px !important;
  }

  .hero__offer-num {
    font-size: 64px !important;
  }

  .hero__offer-label {
    font-size: 16px !important;
  }

  .hero__offer-list li {
    font-size: 12px !important;
  }

  .hero__offer-btn {
    padding: 14px 22px !important;
    font-size: 15px !important;
  }

  .hero__proof {
    flex-direction: column !important;
  }

  .hero__proof-item {
    width: 100% !important;
  }

  .hero__proof-item strong {
    font-size: 18px !important;
  }

  .hero__proof-item span {
    font-size: 11px !important;
  }

  .hero-after-cta {
    padding: 36px 0 40px !important;
  }

  .hero-after-cta__inner {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .hero-after-cta__btn {
    width: 100% !important;
    max-width: 420px !important;
    font-size: 16px !important;
    padding: 18px 28px !important;
  }
}