h1, h2, h3, h4{
    color: #3f3f51;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

h1, h2, h3, h4 {
  opacity: 0;
  animation: fadeInUp 0.8s ease-out forwards;
}

/* Добавим небольшую задержку для красивого каскада */
h2 {
  font-size:25px;
  animation-delay: 0.2s;
}

h3 {
  font-size:22px;
  animation-delay: 0.4s;
}

h4 {
  animation-delay: 0.6s;
}

@media(max-width:680px){
  .h5{
    font-size:18px;
  }
  h2{
    font-size: 22px;
  }  
  
}
  /* 1) Глобально отключаем горизонтальный скролл */
html { overflow-x: clip; }               /* современные браузеры */
body { overflow-x: hidden; width: 100%; } /* фолбэк */

:root{
  --bm-primary: #3f3f51; /* dunkel */
  --bm-accent:  #bfd5df; /* hell */
  --bm-ink:     #242433;
  --bm-ink-dim: #3a3a49;
  --bm-card:    #ffffff;
  --bm-border:  rgba(63,63,81,.18);
  --bm-shadow:  0 8px 24px rgba(0,0,0,.08);
}

/* Общая секция */
  .about-wrap{
    background: linear-gradient(180deg, #fff 0%, var(--brand-accent, #bfd5df) 100%);
  }

  .about-section{
    --card-bg:#ffffff;
    --card-border: rgba(63,63,81,.18);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-left: 6px solid var(--brand-primary);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .about-section:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
  }

  .about-kicker{
    color: var(--brand-primary);
    letter-spacing:.08em;
    text-transform: uppercase;
    font-weight:600;
    font-size:.85rem;
  }
  .about-title{
    color: var(--brand-primary);
    font-weight: 700;
    line-height: 1.2;
  }
  .about-lead{
    color:#2c2c35;
    font-size:1.05rem;
  }
  .about-bullet{
    margin:0;
    padding-left:1.1rem;
  }
  .about-bullet li{
    margin:.35rem 0;
  }

  /* Адаптивные отступы */
  .py-section{ padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(2rem, 5vw, 4rem); }
  .gap-rows{ row-gap: 1.25rem; }
  @media (min-width: 992px){
    .gap-rows{ row-gap: 1.75rem; }
  }
/* ==== Layout-Grundlagen ==== */
.bm{
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(191,213,223,.45), transparent 60%),
    radial-gradient(1200px 500px at 110% 10%, rgba(191,213,223,.35), transparent 60%),
    #fff;
  padding: clamp(2rem, 6vw, 4.5rem) 0;
}
.bm__container{
  width: min(1120px, 92%);
  margin-inline: auto;
}

/* ==== Kopfbereich ==== */
.bm__kicker{
  color: var(--bm-primary);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  font-size: .9rem;
  margin: 0 0 .25rem 0;
}
.bm__title{
  color: var(--bm-primary);
  font-weight: 800;
  line-height: 1.15;
  font-size: clamp(1.5rem, 2.4vw + 1rem, 2.25rem);
  margin: 0 0 .75rem 0;
}
.bm__lead{
  color: var(--bm-ink);
  font-size: clamp(1rem, .4vw + .95rem, 1.125rem);
  margin: 0 0 1.75rem 0;
  max-width: 70ch;
}

/* ==== Grid ==== */
.bm__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 720px){
  .bm__grid{ grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}

/* ==== Karten ==== */
.bm__card{
  background: var(--bm-card);
  border: 1px solid var(--bm-border);
  border-left: 6px solid var(--bm-primary);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: var(--bm-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.bm__card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
.bm__card-title{
  color: var(--bm-primary);
  font-weight: 700;
  margin: 0 0 .5rem 0;
  font-size: 1.2rem;
}

/* ==== Typografie & Listen ==== */
.bm__text{
  color: var(--bm-ink);
  margin: 0 0 .75rem 0;
  line-height: 1.6;
}
.bm__list{
  margin: 0;
  padding-left: 1.1rem;
}
.bm__list li{
  color: var(--bm-ink-dim);
  margin: .35rem 0;
}
.bm__steps{
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bm__steps li{
  position: relative;
  padding-left: 2.4rem;
  margin: .6rem 0;
  color: var(--bm-ink);
  line-height: 1.6;
}
.bm__steps li::before{
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0; top: 0.1rem;
  width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  background: var(--bm-accent);
  color: var(--bm-primary);
  border: 2px solid var(--bm-primary);
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
}
.bm__steps span{
  font-weight: 700;
  color: var(--bm-primary);
}

/* ==== Fussnote ==== */
.bm__note{
  margin-top: 1.25rem;
  background: linear-gradient(90deg, var(--bm-accent), #e7f0f4);
  border: 1px solid var(--bm-border);
  border-radius: 14px;
  padding: .9rem 1rem;
  color: var(--bm-ink);
  font-size: .95rem;
}

:root{
  --brand-primary:#3f3f51; /* dunkel */
  --brand-accent:#bfd5df;  /* hell */
  --ink:#232332;
  --muted:#6b6b7a;
}

/* Section background */
.pricing-section{
  background:
    radial-gradient(1200px 480px at -10% 0%, rgba(191,213,223,.35), transparent 60%),
    radial-gradient(1200px 480px at 110% 20%, rgba(191,213,223,.25), transparent 60%),
    #ffffff;
}

/* Header */
.pricing-kicker{
  color: var(--brand-primary);
  letter-spacing: .08em;
}
.pricing-title{
  color: var(--brand-primary);
  font-weight: 800;
}

/* Cards */
.pricing-card{
  border-radius: 18px;
}
.pricing-card .card-header{
  border-bottom: 1px solid rgba(63,63,81,.12) !important;
}
.pricing-list li{
  position: relative;
  padding-left: 1.2rem;
  margin:.5rem 0;
  color: var(--ink);
}
.pricing-list li::before{
  content:"";
  position:absolute; left:0; top:.55rem;
  width:.5rem; height:.5rem; border-radius:999px;
  background: var(--brand-accent);
  border: 2px solid var(--brand-primary);
}

/* Price typography */
.pricing-price{
  color: var(--brand-primary);
  font-weight: 800;
  line-height: 1;
}
.pricing-currency{
  font-size: 1rem;
  vertical-align: super;
  margin-right:.15rem;
}
.pricing-amount{
  font-size: 2.25rem;
}
.pricing-period{
  font-size: .95rem;
  color: var(--muted);
  margin-left:.35rem;
}

/* Featured (mittlerer Plan) */
.featured{
  outline: 3px solid rgba(191,213,223,.9);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
  transform: translateY(-4px);
}
.badge-featured{
  position:absolute; top:12px; right:12px;
  background: var(--brand-primary);
  color:#fff;
  padding:.3rem .6rem;
  border-radius: 999px;
  font-size:.75rem; font-weight:700;
  letter-spacing:.02em;
}

/* Buttons */
.btn-brand{
  background: var(--brand-primary);
  color:#fff;
  border: 1px solid var(--brand-primary);
}
.btn-brand:hover,
.btn-brand:focus{
  background: #343447;
  border-color:#343447;
  color:#fff;
}
.btn-brand-contrast{
  background: var(--brand-accent);
  color: var(--brand-primary);
  border: 1px solid var(--brand-accent);
}
.btn-brand-contrast:hover,
.btn-brand-contrast:focus{
  color:#fff;
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-outline-brand{
  background: transparent;
  color: var(--brand-primary);
  border: 1.5px solid var(--brand-primary);
}
.btn-outline-brand:hover,
.btn-outline-brand:focus{
  background: var(--brand-primary);
  color:#fff;
}

/* Small tweaks */
@media (min-width: 992px){
  .pricing-amount{ font-size: 2.5rem; }
}