@media (max-width:991px) {
    body.poster {
        margin-top: 60vh;
    }
}

body.poster {
    background-attachment: fixed;
}

p{
  font-size:17px;
}

.top-5 {
    top: 5px;
}

@media (max-width:991px) {
  .image-box{
    height:250px;
  }
  p{
    font-size:16px;
  }
}

/* Визуально скрыто, но доступно для ассистивных технологий */
.visually-hidden-important {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* Для заданного вами формата чекбокса */
.form-group.checkbox-group {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  }
.form-group.checkbox-group input[type="checkbox"] {
  margin-top: .3rem;
}

h1{
  font-size: 30px;
  color: #12426c;
}
h2{
  font-size: 25px;
  color: #12426c;
}
h3{
  font-size: 20px;
  color: #12426c;
}

/* 1) Глобально отключаем горизонтальный скролл */
html { overflow-x: clip; }               /* современные браузеры */
body { overflow-x: hidden; width: 100%; } /* фолбэк */

/* ====== Базовые переменные для отступов и типографики ====== */
:root {
  --hero-y: clamp(2rem, 2.5vw + 1rem, 5rem);
  --hero-gap: clamp(0.75rem, 1vw + 0.5rem, 1.5rem);
  --hero-content-max: 72ch; /* ограничение длины текста */
}

/* ====== Контейнер секции ====== */
.hero {
  position: relative;
  isolation: isolate;
  background-color: var(--bs-dark);
  color: var(--bs-white);
  padding-block: var(--hero-y);
  overflow: hidden;
}

/* безопасные поля по краям на телефонах с "чёлкой" */
.hero .container {
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

/* ====== Градиент и декоративные элементы ====== */
.hero-gradient {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(900px 420px at 8% 12%,
      color-mix(in srgb, var(--bs-primary) 28%, transparent),
      transparent 60%)
    ,
    radial-gradient(700px 380px at 92% 85%,
      color-mix(in srgb, var(--bs-primary) 20%, transparent),
      transparent 60%);
  opacity: .55;
}

.hero-shape {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  filter: blur(22px);
  opacity: .4;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--bs-primary) 38%, transparent),
    transparent 70%);
  border-radius: 50%;
}
.hero-shape-1 { width: 360px; height: 360px; bottom: -80px; left: -80px; }
.hero-shape-2 { width: 260px; height: 260px; top: -60px; right: -60px; }

/* ====== Контентная колонка ====== */
.hero .col-lg-7 {
  position: relative;
  z-index: 1;
  max-width: var(--hero-content-max);
}

/* ====== Типографика ====== */
.hero-title {
  font-weight: 800;
  line-height: 1.12;
  /* балансировка строк и перенос длинных слов на немецком */
  text-wrap: balance;
  hyphens: auto;
  overflow-wrap: anywhere;
  /* плавный размер */
  font-size: clamp(1.5rem, 1rem + 4.2vw, 2.75rem);
  margin-bottom: .5rem;
}

.hero p,
.hero .lead {
  max-width: var(--hero-content-max);
}

.hero .lead {
  font-size: clamp(1rem, .9rem + 1vw, 1.375rem);
  line-height: 1.45;
}

/* ====== Бейдж ====== */
.hero .badge {
  font-weight: 600;
  padding: .5rem .9rem;
  border-radius: 999px;
  font-size: clamp(.75rem, .65rem + .6vw, .95rem);
}

/* ====== Кнопки ====== */
.hero .d-flex.gap-2 { gap: var(--hero-gap) !important; }

.hero .btn.btn-lg {
  font-size: clamp(1rem, .95rem + .6vw, 1.125rem);
  padding: clamp(.75rem, .6rem + .6vw, 1rem) clamp(1rem, 1.2rem + 1vw, 1.75rem);
  border-radius: 1.75rem;
  white-space: normal;      /* разрешаем перенос строк */
  line-height: 1.2;
}

/* На очень узких экранах делаем кнопки на всю ширину и столбиком */
@media (max-width: 575.98px) {
  .hero .d-flex.gap-2 { flex-direction: column; }
  .hero .btn.btn-lg { width: 100%; }
}

/* ====== Траст-линия (иконки) ====== */
.hero .small.opacity-75 {
  gap: 1rem !important;
}

/* ====== Медиа-блок справа ====== */
.hero-media { position: relative; z-index: 1; }
.hero-media .ratio {
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}

/* Отступы между колонками мобиль-first */
.col-12 + .col-12 { margin-top: calc(var(--hero-gap) * 1.5); }

/* На ≥lg показываем сетку в одну линию и увеличиваем вертикальные поля */
@media (min-width: 992px) {
  .hero { padding-block: clamp(4rem, 3vw + 3rem, 7rem); }
  .col-12 + .col-12 { margin-top: 0; }
}

/* Скрываем декоративные фигуры на малых экранах для производительности */
@media (max-width: 767.98px) {
  .hero-shape { display: none; }
}

/* ====== Доп: исправление “слипания” строк и переполнения ====== */
.hero *::selection { background: color-mix(in srgb, var(--bs-primary) 35%, #ffffff); color: #fff; }


/* Секция */
.why { position: relative; }

/* Заголовок */
.why-title{
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.25rem);
}

/* Карточка пункта */
.why-item{
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.why-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(0,0,0,.08);
  border-color: rgba(13,110,253,.25); /* оттенок primary */
}

/* Иконка-пилюля */
.why-icon{
  width: 3rem;
  height: 3rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  box-shadow: 0 10px 20px rgba(13,110,253,.25);
  font-size: 1.25rem;
  margin-bottom: .75rem;
}

/* Текст: переносы для длинных немецких слов */
.why-item-title{
  font-weight: 700;
  margin-bottom: .25rem;
  hyphens: auto;
  overflow-wrap: anywhere;
}
.why-item p{
  color: var(--bs-secondary-color, #6c757d);
  hyphens: auto;
  overflow-wrap: anywhere;
  max-width: 75ch;
}

/* Дополнительные мобильные корректировки */
@media (max-width: 575.98px){
  .why .container{ padding-left: 1rem; padding-right: 1rem; }
}


/* ===== Section frame ===== */
.services {
  position: relative;
}

/* Заголовок секции */
.services .section-title {
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.25rem);
}
.services .section-subtitle {
  max-width: 72ch;
}

/* Карточка услуги */
.service-card {
  border: 1px solid rgba(0, 0, 0, .05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .08);
  border-color: rgba(13, 110, 253, .25); /* оттенок primary */
}

/* Круглая иконка */
.service-icon {
  width: 3rem;
  height: 3rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  box-shadow: 0 10px 20px rgba(13, 110, 253, .25); /* primary glow */
  font-size: 1.25rem;
}

/* Мелкие типографические улучшения */
.service-card h3 {
  font-weight: 700;
}
.service-card p {
  margin-top: .25rem;
  color: var(--bs-secondary-color, #6c757d);
}

/* На очень узких экранах увеличим отступы между карточками */
@media (max-width: 575.98px) {
  .services .container { padding-left: 1rem; padding-right: 1rem; }
}


/* Секция и заголовок */
#sk-pricing {
  position: relative;
}

#sk-pricing .section-title {
  position: relative;
  padding-bottom: .35rem;
}

#sk-pricing .section-title::after {
  content: "";
  display: block;
  width: clamp(90px, 18%, 150px);
  height: 4px;
  margin-top: .6rem;
  border-radius: 999px;
  background: var(--bs-primary);
  opacity: .75;
}

/* Карточки цен */
#sk-pricing .pricing-card {
  border: 1px solid color-mix(in oklab, var(--bs-primary) 16%, transparent);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

#sk-pricing .pricing-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .08);
  border-color: color-mix(in oklab, var(--bs-primary) 28%, transparent);
}

/* Рекомендованный тариф (выделение) */
#sk-pricing .pricing-card.featured {
  border-color: color-mix(in oklab, var(--bs-primary) 38%, transparent);
  box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .08);
}

/* Лента "Beliebt" */
#sk-pricing .ribbon {
  position: absolute;
  top: 12px;
  right: -6px;
  background: var(--bs-primary);
  color: var(--bs-white);
  padding: .25rem .5rem;
  font-size: .75rem;
  border-top-left-radius: .375rem;
  border-bottom-left-radius: .375rem;
}

/* Блок цены */
#sk-pricing .price {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  line-height: 1;
}

#sk-pricing .price .currency {
  font-size: 1rem;
  color: var(--bs-secondary-color);
}

#sk-pricing .price .value {
  font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem);
  font-weight: 800;
  color: var(--bs-dark);
}

#sk-pricing .price .suffix {
  font-size: .95rem;
  color: var(--bs-secondary-color);
}

/* Списки преимуществ */
#sk-pricing .pricing-list li + li {
  margin-top: .6rem;
}

#sk-pricing .pricing-list .check {
  font-weight: 700;
  line-height: 1.4;
  color: var(--bs-primary);
}

/* Доступность: фокус и редуцированные анимации */
#sk-pricing a.btn:focus-visible,
#sk-pricing .alert a:focus-visible {
  outline: 2px solid var(--bs-dark);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #sk-pricing .pricing-card {
    transition: none;
  }
}

/* ===== Секция и заголовок ===== */
.testimonials { position: relative; }
.testi-title{
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.25rem);
}

/* ===== Карточки отзывов ===== */
.testimonial-card{
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.testimonial-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(0,0,0,.08);
  border-color: rgba(13,110,253,.25); /* оттенок primary */
}

/* Кавычки и текст */
.testimonial-quote{
  position: relative;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--bs-dark);
  hyphens: auto;
  overflow-wrap: anywhere;
  margin-left: .25rem;
  padding-left: 1.5rem;
}
.testimonial-quote::before{
  content: "“";
  position: absolute;
  left: 0;
  top: -.2rem;
  font-size: 2rem;
  line-height: 1;
  color: rgba(13,110,253,.6); /* primary tint */
}

/* Аватар */
.avatar{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bs-white);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}

/* Логотипы клиентов */
.brand-logo{
  height: 28px;
  opacity: .65;
  filter: grayscale(1);
}
.brand-logo:hover{
  opacity: 1;
  filter: none;
}

/* Кейс (расширенный блок) */
.case{
  border: 1px solid rgba(13,110,253,.25);
}

/* Мобильные доработки */
@media (max-width: 575.98px){
  .testimonials .container { padding-left: 1rem; padding-right: 1rem; }
}

/* ===== Section ===== */
.pricing { position: relative; }

/* Заголовок */
.pricing-title{
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.25rem);
}

/* Карточки */
.pricing-card{
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pricing-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(0,0,0,.08);
  border-color: rgba(13,110,253,.25); /* оттенок primary */
}

/* Цена */
.price{
  display: flex;
  align-items: baseline;
  gap: .35rem;
  line-height: 1;
  flex-wrap: wrap;
}
.price-currency{
  font-weight: 700;
  color: var(--bs-dark);
}
.price-value{
  font-size: clamp(2rem, 1.4rem + 2.5vw, 2.75rem);
  font-weight: 800;
  color: var(--bs-dark);
}
.price-period{
  font-size: .95rem;
}

/* Featured карта (средняя) */
.pricing-featured{
  border-width: 2px !important;
  box-shadow: 0 20px 60px rgba(13,110,253,.15) !important;
}
.pricing-featured .btn{
  box-shadow: 0 10px 24px rgba(13,110,253,.25);
}

/* Риббон “Beliebt” */
.ribbon{
  position: absolute;
  inset: 0 auto auto 0;
  transform: translate(0.5rem, -50%);
  background: var(--bs-primary);
  color: var(--bs-white);
  font-size: .75rem;
  letter-spacing: .02em;
  padding: .35rem .6rem;
  border-radius: 0 .5rem .5rem 0;
  font-weight: 700;
}

/* Списки фич */
.pricing-card li{
  hyphens: auto;
  overflow-wrap: anywhere;
}

/* Мобильные доработки */
@media (max-width: 575.98px){
  .pricing .container{ padding-left: 1rem; padding-right: 1rem; }
  .ribbon{ transform: translate(0.5rem, -60%); }
}