:root{
  --brand: #5a6ff5;
  --brand-2: #6ea8ff;
  --hero-bg-1: #f3f8ff;
  --hero-bg-2: #e9f1ff;
}

html, body { height: 100%; }
body { font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; }

/* Фон как на скрине: мягкий голубой градиент */
.bg-hero{
  background: radial-gradient(1200px 600px at 70% 0%, var(--hero-bg-1) 0%, var(--hero-bg-2) 60%, #eef3ff 100%);
}

/* Лого-заглушка */
.logo-box{
  width: 78px;
  height: 18px;
  background: linear-gradient(180deg, #f4f4f4 0%, #dcdcdc 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.06) inset, 0 .5px 0 rgba(255,255,255,.7);
}

/* Заголовок и подзаголовок */
.display-title{
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  /* размер близкий к макету, адаптивно */
  font-size: clamp(32px, 4.2vw, 64px);
  color: #1f244b;
  margin-top: 4.2rem; /* чтобы отступ от шапки визуально совпадал */
}

.grad-blue{
  background: linear-gradient(180deg, #3b4bd4 0%, #5a6ff5 50%, #6ea8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead-text{
  max-width: 760px;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.7;
  font-weight: 500;
}

/* Блок чата-изображения */
.chat-wrap{
  width: min(100%, 880px);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(26, 55, 124, .12), 0 6px 16px rgba(26,55,124,.08);
}

.chat-img{
  display: block;
  /* лёгкое скругление как у контейнера */
  border-radius: 18px;
}

/* Кнопка в шапке ближе к макету */
.btn-outline-dark{
  --bs-btn-border-color: rgba(0,0,0,.1);
  --bs-btn-hover-bg: #111827;
  --bs-btn-hover-border-color: #111827;
  --bs-btn-color: #111827;
  --bs-btn-hover-color: #fff;
  backdrop-filter: saturate(150%) blur(2px);
}

.fw-600{ font-weight: 600; }





/* ===== FEATURES ===== */
.section-features{
  padding-top: clamp(48px, 8vw, 96px);
  padding-bottom: clamp(56px, 10vw, 120px);
}

.features-box{
  background: #fdeff6a4;              /* мягкий розовый, как на скрине */
  border-radius: 1rem;
  padding: clamp(24px, 4vw, 48px);
}

.features-title{
  font-weight: 800;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -0.01em;
  color: #1f244b;
  margin-bottom: .25rem;
}

.features-subtitle{
  font-size: clamp(14px, 1.3vw, 18px);
  margin-bottom: 0;
}

.feature-card{
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(26,55,124,0.08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.feature-card .card-body{
  padding: 24px;
}

.feature-card:hover,
.feature-card:focus-within{
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(26,55,124,.18), 0 6px 16px rgba(26,55,124,.12);
}




.feature-ico{
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  box-shadow: 0 6px 16px rgba(26,55,124,.12);
}

/* Градиенты значков (близко к макету) */
.ic-purple{ background: linear-gradient(180deg,#e64cf6 0%, #9b4bff 100%); }
.ic-blue  { background: linear-gradient(180deg,#6ea8ff 0%, #5a6ff5 100%); }
.ic-green { background: linear-gradient(180deg,#32d469 0%, #17b26a 100%); }
.ic-orange{ background: linear-gradient(180deg,#ffa244 0%, #ff6f3d 100%); }
.ic-teal  { background: linear-gradient(180deg,#35e0d0 0%, #1fb3aa 100%); }

/* Текст карточек */
.feature-card h3{
  font-weight: 700;
  color: #1f244b;
}

.feature-card p{
  color: #556070;
  line-height: 1.6;
}








/* иконки-капсулы */
.info-ico{
  flex: 0 0 48px;


  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  box-shadow: 0 6px 16px rgba(26,55,124,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}


/* фикс пропорций svg внутри капсулы */
.info-ico svg{
  width: 24px !important;
  height: 24px !important;
  display: block;
  aspect-ratio: 1 / 1;
  /* если где-то стоит max-width:100% для svg — отключаем */
  max-width: none;
  /* на всякий случай сохраняем пропорции при масштабировании */
  vector-effect: non-scaling-stroke;
}
 
.ic-green{ background: linear-gradient(180deg,#32d469 0%, #17b26a 100%); }
.ic-blue { background: linear-gradient(180deg,#6ea8ff 0%, #5a6ff5 100%); }

/* карточки + ховер */
.info-card{
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(26,55,124,0.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.info-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(26,55,124,.18), 0 6px 16px rgba(26,55,124,.12);
}
.info-card:hover .info-ico{
  transform: scale(1.08);
  box-shadow: 0 10px 22px rgba(26,55,124,.18);
}

/* предпочтения по анимации */
@media (prefers-reduced-motion: reduce){
  .info-card, .info-ico{ transition: none; }
}




.section-setup{
  padding-top: clamp(48px, 8vw, 96px);
  padding-bottom: clamp(48px, 8vw, 96px);
  background: #f0f5ff; /* как на скрине */
}

.section-setup .section-title{
  font-weight: 800;
  font-size: clamp(24px, 3vw, 36px);
  color: #1f244b;
}

.section-setup .section-subtitle{
  font-size: clamp(14px, 1.2vw, 18px);
  color: #556070;
}

.setup-list .bullet{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 10px;
  margin-top: .5rem;
  margin-right: 1rem;
}
.bullet-blue{ background-color: #5a6ff5; }
.bullet-green{ background-color: #17b26a; }
.bullet-purple{ background-color: #9b4bff; }
.bullet-orange{ background-color: #ff6f3d; }

.setup-images img{
  display: block;
  max-width: 100%;
}





/* ===== PRICING ===== */
.section-pricing{
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.pricing-box{
  background: #eaf1ff;               /* светло-голубой фон как на скрине */
  border-radius: 18px;
  padding: clamp(20px, 3.6vw, 28px);
}

.pricing-card{
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(26,55,124,.10);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pricing-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(26,55,124,.18), 0 6px 16px rgba(26,55,124,.12);
}

/* зелёная рамка у левой карточки */
.pricing-card--primary{
  border: 2px solid #19b76d;
}

/* внутренние “подкарточки” */
.subcard{
  background: #f6f7fb;
  border: 1px solid rgba(0,0,0,.06);
}

/* бейджи */
.badge-pill{
  padding: .35rem .75rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .8rem;
}
.badge-green{ background: #e7f8ef; color: #19b76d; }
.badge-gray { background: #eef1f5; color: #606b7a; }

/* цены */
.price-now{ font-size: 1.25rem; }
.price-once{ font-size: 1.5rem; color: #1f244b; }

/* кнопка */
.btn-brand{
  background: #5a6ff5;
  border-color: #5a6ff5;
  color: #fff;
  box-shadow: 0 8px 22px rgba(90,111,245,.35);
}
.btn-brand:hover{
  background: #4f63ea;
  border-color: #4f63ea;
  color: #fff;
  box-shadow: 0 12px 28px rgba(90,111,245,.45);
}

/* мелочи */
.fw-700{ font-weight:700; }
.fw-800{ font-weight:800; }






/* ===== CTA ===== */
.section-cta{ padding: clamp(40px, 6vw, 72px) 0; }
.cta-box{
  background: linear-gradient(135deg,#2f5af2 0%, #4b45e6 100%);
  color: #fff;
  border-radius: 20px;
  padding: clamp(24px, 4.5vw, 48px);
  box-shadow: 0 12px 34px rgba(47,90,242,.28);
}
.cta-title{
  font-weight: 800;
  font-size: clamp(22px, 3vw, 36px);
}
.cta-subtitle{ opacity: .95; font-size: clamp(14px,1.2vw,18px); }
.cta-input{
  max-width: 320px;
  border: 0;
  box-shadow: 0 6px 16px rgba(12,19,38,.08);
}
.section-cta .btn.btn-light{
  box-shadow: 0 10px 26px rgba(255,255,255,.18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.section-cta .btn.btn-light:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(255,255,255,.22);
}

/* ===== FOOTER ===== */
.footer-dark{
  background: #0b1220;
  color: #e0e6f1;
}
.footer-dark .text-secondary{ color:#93a0b5 !important; }

.footer-logo{
  width: 56px; height: 20px;
  background: linear-gradient(180deg,#ffffff 0%, #cfd6e4 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.2) inset;
}

/* кнопка бренд уже есть из предыдущего блока */



/* Выравнивание “розового блока” по ширине контейнера на очень больших экранах */
@media (min-width: 1400px){
  .features-box{ padding: 1rem; border-radius: 2rem; }
}


/* Небольшой твик контейнера на больших экранах */
@media (min-width: 1400px){
  .container{
    max-width: 1140px;
  }
}