h1, h2, h3, h4{
    color: #443927;
}

@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;
  } 
  
}

 /* Базовые отступы секции на крупных экранах */
@media (min-width: 992px) {
  #hero {
    padding-top: 5rem;   /* py-lg-6 в разметке добавляет ещё, можно подстроить */
    padding-bottom: 5rem;
  }
}
/* 1) Глобально отключаем горизонтальный скролл */
html { overflow-x: clip; }               /* современные браузеры */
body { overflow-x: hidden; width: 100%; } /* фолбэк */

:root{
  --be-primary: #BA5809;
  --be-dark: #222;       /* тёмно-серый */
  --be-light: #ffffff;   /* белый */
  --be-muted: #6c757d;
}

.be-hero{
  background:
    radial-gradient(1200px 400px at 10% -20%, rgba(100,70,180,.15), transparent 60%),
    radial-gradient(1000px 300px at 90% -10%, rgba(100,70,180,.12), transparent 55%),
    var(--be-light);
  color: var(--be-dark);
}

.be-card{
  background: #fff;
  border-radius: 1rem;
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden; /* чтобы акцентная полоса не выходила за края */
}

/* Узкая акцентная полоса сверху карточки */
.be-accent{
  height: .5rem;
  background: linear-gradient(90deg, var(--be-primary), #443927 60%, var(--be-primary));
}

/* Микро-лейбл над заголовком */
.be-kicker{
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--be-primary);
  font-weight: 700;
  margin-bottom: .25rem;
}

/* Главный заголовок */
.be-title{
  line-height: 1.15;
  color: var(--be-dark);
}

/* Подзаголовок */
.be-subtitle{
  color: var(--be-dark);
}

/* Основной текст */
.be-text{
  color: #2f2f2f;
  font-size: 1.0625rem; /* немного крупнее для читабельности */
}

/* Улучшение контраста ссылок (если понадобятся внутри секции) */
.be-hero a{
  color: var(--be-primary);
  text-decoration: none;
}
.be-hero a:hover{
  text-decoration: underline;
}

/* Вариативность отступов на больших экранах */
@media (min-width: 992px){
  .py-lg-6{ padding-top: 5rem !important; padding-bottom: 5rem !important; }
  .be-title{ font-size: 3rem; }
}

.be-services{
  background:
    radial-gradient(900px 260px at 0% -10%, rgba(100,70,180,.10), transparent 60%),
    radial-gradient(700px 220px at 100% 0%, rgba(100,70,180,.08), transparent 55%),
    var(--be-light);
  color: var(--be-dark);
}

.be-services-title{
  color: var(--be-dark);
  letter-spacing: -.01em;
}

.be-services-lead{
  color: var(--be-muted);
  font-size: 1.0625rem;
}

/* Карточка услуги */
.be-service{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  overflow: hidden; /* для акцентной полосы */
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  background: #fff;
}

.be-service-accent{
  height: .35rem;
  background: linear-gradient(90deg, var(--be-primary), #443927 60%, var(--be-primary));
}

/* Заголовок и текст карточек */
.be-service .card-title{
  color: var(--be-dark);
  line-height: 1.2;
}

.be-service .card-text{
  color: #2f2f2f;
}

/* Hover/focus эффекты */
.be-service:hover,
.be-service:focus-within{
  transform: translateY(-2px);
  box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,.08);
  border-color: rgba(100,70,180,.35);
}

/* Адаптация отступов на больших экранах */
@media (min-width: 992px){
  .py-lg-6{ padding-top: 5rem !important; padding-bottom: 5rem !important; }
}

.be-benefits{
  background:
    radial-gradient(900px 260px at 0% -10%, rgba(100,70,180,.10), transparent 60%),
    radial-gradient(700px 220px at 100% 0%, rgba(100,70,180,.08), transparent 55%),
    var(--be-light);
  color: var(--be-dark);
}

.be-benefits-title{
  color: var(--be-dark);
  letter-spacing: -.01em;
}

.be-benefits-lead{
  color: var(--be-muted);
  font-size: 1.0625rem;
}

/* KPI badges */
.be-kpi{
  gap: .5rem;
  background: rgba(100,70,180,.08);
  border: 1px solid rgba(100,70,180,.25);
  color: var(--be-dark);
  padding: .5rem .75rem;
  border-radius: 999px;
}
.be-kpi-number{
  font-weight: 800;
  color: var(--be-primary);
  font-size: 1.125rem;
  line-height: 1;
}
.be-kpi-label{
  font-size: .9375rem;
  line-height: 1;
  color: var(--be-dark);
}

/* Benefit card */
.be-benefit{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  overflow: hidden; /* для акцентной полосы */
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.be-benefit-accent{
  height: .3rem;
  background: linear-gradient(90deg, var(--be-primary), #443927 60%, var(--be-primary));
}

/* Иконка-чек */
.be-icon-wrap{
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .75rem;
  background: rgba(100,70,180,.10);
  color: var(--be-primary);
  border: 1px solid rgba(100,70,180,.25);
}
.be-icon{
  display: block;
}

/* Заголовок и текст */
.be-benefit .h5{
  color: var(--be-dark);
}
.be-benefit p{
  color: #2f2f2f;
}

/* Hover/focus эффекты */
.be-benefit:hover,
.be-benefit:focus-within{
  transform: translateY(-2px);
  box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,.08);
  border-color: rgba(100,70,180,.35);
}

/* Дополнительные отступы на больших экранах */
@media (min-width: 992px){
  .py-lg-6{ padding-top: 5rem !important; padding-bottom: 5rem !important; }
}

/* Общие */
.py-lg-6{ padding-top: 5rem !important; padding-bottom: 5rem !important; }

:root {
  --cp-radius-lg: 1rem;   /* ~ rounded-4 */
  --cp-radius-xl: 1.25rem;
  --cp-shadow: 0 0.5rem 1rem rgba(0,0,0,0.08);
}

body {
  background-color: #fff;
  color: #1f2937;
}

/* Utility tweaks */
.object-fit-cover { object-fit: cover; }

/* General sections */
.section {
  scroll-margin-top: 80px;
}

/* Hero card tweaks */
.hero-card .card-body {
  border-left: 4px solid var(--bs-success);
}

/* Step cards */
.step-card .step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 0.5rem;
  font-weight: 700;
}

/* Callout block */
.callout {
  background: rgba(var(--bs-success-rgb), 0.05);
}

/* Icon tiles */
.icon-tile__icon {
  width: 48px;
  height: 48px;
  border-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Stats */
.stat__number {
  font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  line-height: 1;
  font-weight: 800;
}

.stat__label {
  color: var(--bs-secondary-color, #6c757d);
}

/* Utilities for better spacing on light backgrounds */
.bg-light .border {
  border-color: rgba(var(--bs-secondary-rgb), 0.2) !important;
}

/* Buttons: ensure good focus outline contrast */
.btn:focus-visible {
  outline: 3px solid rgba(var(--bs-primary-rgb), 0.5);
  outline-offset: 2px;
}

/* Card & tile subtle hover (non-essential) */
.card:hover,
.icon-tile:hover {
  transform: translateY(-2px);
  transition: transform 160ms ease;
}

/* Ensure white background panels pop on light section */
.bg-light .card,
.bg-light .icon-tile {
  background-color: #fff;
}


/* Image rounding to match design language */
.rounded-4 { border-radius: var(--cp-radius-lg) !important; }
.rounded-5 { border-radius: var(--cp-radius-xl) !important; }

/* Small accessibility helpers */
img { max-width: 100%; height: auto; }

/* Container polish */
#faq .faq-search .form-control {
  box-shadow: none;
}

#faq .faq-search .btn {
  white-space: nowrap;
}

/* Accordion visuals */
#faq .accordion-button {
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-weight: 600;
}

#faq .accordion-button:not(.collapsed) {
  background-color: rgba(var(--bs-primary-rgb), 0.06);
  color: var(--bs-primary);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);
}

#faq .accordion-item {
  border-left: 2px solid rgba(var(--bs-primary-rgb), 0.25);
  border-right: 2px solid rgba(var(--bs-primary-rgb), 0.25);
  border-bottom: 2px solid rgba(var(--bs-primary-rgb), 0.12);
}

#faq .accordion-button:focus {
  border-color: rgba(var(--bs-primary-rgb), 0.45);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Side card */
#faq .border {
  border-color: rgba(var(--bs-secondary-rgb), 0.25) !important;
}

/* Small helper: subtle list spacing inside answers, if any */
#faq .accordion-body ul {
  margin-bottom: 0;
}

/* Optional: simple, JS-free filter (progressive enhancement via [data-*] attributes) */
[data-faq-filter]::placeholder {
  opacity: .8;
}

/* Visually emphasize links inside answers */
#faq .accordion-body a {
  text-decoration: underline;
}



/* Pricing cards */
.price-card {
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.price-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.07);
}

/* Price typography */
.price {
  font-size: clamp(2rem, 2.5vw + 1rem, 3rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* Subtle highlight for the "Most Popular" card */
.card.border-primary {
  box-shadow: 0 .75rem 1.5rem rgba(var(--bs-primary-rgb), .1);
}

/* Table polish */
.table th, .table td {
  vertical-align: middle;
}

/* Billing toggle (no JS): we switch the displayed price text using data attributes) */
#bill-annual:checked ~ .row .price,
#bill-annual:checked ~ .row + .row .price {
  /* override visual value using the data-price-annual attribute via pseudo-element */
  position: relative;
}
#bill-annual:checked ~ .row .price::after,
#bill-annual:checked ~ .row + .row .price::after {
  content: "$" attr(data-price-annual);
  position: absolute;
  inset: 0;
}
#bill-annual:checked ~ .row .price::before,
#bill-annual:checked ~ .row + .row .price::before {
  /* hide original text when annual is toggled */
  content: "";
  position: absolute;
  inset: 0;
  background: #fff0; /* transparent layer to mask text for screen-readers we keep aria-live text unchanged */
  -webkit-text-fill-color: transparent;
}

/* Show the "annual note" helper on larger screens by default already done; ensure visibility when toggled */
#bill-annual:checked ~ .row [data-annual-note] {
  display: block !important;
}

/* Accessibility: focus ring on buttons */
.btn:focus-visible {
  outline: 3px solid rgba(var(--bs-primary-rgb), .45);
  outline-offset: 2px;
}

/* Responsive spacing tweaks */
@media (max-width: 991.98px) {
  #pricing .btn-group {
    width: 100%;
  }
  #pricing .btn-group .btn {
    width: 50%;
  }
}