@font-face {
  font-family: 'Magistral';
  src: url('../fonts/Magistral-Book.woff2') format('woff2'),
       url('../fonts/Magistral-Book.woff') format('woff'),
       url('../fonts/Magistral-Book.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Magistral';
  src: url('../fonts/Magistral-Medium.woff2') format('woff2'),
       url('../fonts/Magistral-Medium.woff') format('woff'),
       url('../fonts/Magistral-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Magistral';
  src: url('../fonts/Magistral-Bold.woff2') format('woff2'),
       url('../fonts/Magistral-Bold.woff') format('woff'),
       url('../fonts/Magistral-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Magistral', sans-serif;
  background: var(--bx-bg);
  color: var(--bx-dark);
  overflow-x: hidden;
}

:root {
  --bx-bg: #FDFDFD;
  --bx-dark: #2D232E;
  --bx-grey: #CCCCCC;
  --bx-grey-btn: #D6D6D6;
  --bx-grey-pill: #D9D9D9;
  --bx-accent: #80AF81;
  --bx-light: #F2F2F2;
  --bx-dark-50: #858086;

  --bx-font: 'Magistral', Arial, sans-serif;

  --fs-giant: clamp(48px, 5.833vw, 112px);
  --fs-h2: clamp(32px, 3.333vw, 64px);
  --fs-card: clamp(22px, 2.292vw, 44px);
  --fs-sub: clamp(18px, 1.667vw, 32px);
  --fs-reg: clamp(14px, 1.458vw, 28px);
  --fs-sm: clamp(13px, 1.146vw, 22px);
  --fs-xs: clamp(11px, 0.833vw, 16px);

  --bx-radius-card: clamp(22px, 2.708vw, 52px);
  --bx-radius-lg: clamp(19px, 2.5vw, 48px);
  --bx-radius-form: clamp(16px, 1.406vw, 27px);
  --bx-radius-btn: clamp(11px, 0.885vw, 17px);
}

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 130px; }
body {
  font-family: var(--bx-font);
  font-weight: 400;
  color: var(--bx-dark);
  background: var(--bx-bg);
  line-height: 1.1163;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; }
.bx-container { width: 100%; margin-inline: auto; padding-inline: clamp(16px, 5vw, 96px); }
.bx-title { font-size: var(--fs-h2); font-weight: 700; line-height: 1; }
.bx-title-giant {
  font-size: clamp(51px, 6.667vw, 128px);
  font-weight: 700;
  text-align: center;
  line-height: 0.5;
  padding-block: clamp(37px, 4.688vw, 90px);
}
.bx-sub { font-size: var(--fs-sub); font-weight: 500; color: var(--bx-dark-50); line-height: 1.3; }

/* ===================== HEADER ===================== */
header { position: sticky; top: 0; z-index: 1030; }
.bx-header { background: var(--bx-bg); padding-block: 11px; box-shadow: 0 2px 14px rgba(45,35,46,.07); }
.bx-header__inner { padding-inline: 32px; }
.bx-logo { height: clamp(38px, 4.896vw, 94px); width: clamp(87px, 11.25vw, 216px); }
.bx-nav { margin-left: clamp(20px, 2.604vw, 50px); gap: clamp(12px, 2.083vw, 16px); }
.bx-nav .nav-link {
  font-size: clamp(16px, 1.667vw, 32px);
  font-weight: 400;
  color: var(--bx-dark);
  white-space: nowrap;
  padding-inline: 0;
}
.bx-lang { display: inline-flex; align-items: center; gap: clamp(3px, 0.365vw, 7px); }
.bx-lang img { width: clamp(12px, 1.25vw, 24px); height: clamp(12px, 1.25vw, 24px); transform: rotate(180deg); }
.bx-cta {
  height: clamp(51px, 3.333vw, 64px);
  border: 4px solid var(--bx-accent);
  border-radius: clamp(16px, 1.042vw, 20px);
  font-size: clamp(16px, 1.667vw, 32px);
  font-weight: 500;
  color: var(--bx-dark);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-inline: clamp(32px, 2.083vw, 40px);
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}
.bx-cta:hover { background: var(--bx-accent); color: #fff; }
.navbar-toggler { border: none; font-size: 1.6rem; }
.navbar-toggler:focus { box-shadow: none; }

/* ===================== FORM ===================== */
.bx-form {
  width: min(540px, 100%);
  border: 3px solid var(--bx-dark);
  border-radius: clamp(17px, 1.771vw, 34px);
  padding: clamp(22px, 2.292vw, 44px) clamp(19px, 1.979vw, 38px);
  background: var(--bx-bg);
  position: relative;
  z-index: 2;
}
.bx-form__decoration {
  position: absolute;
  width: clamp(400px, 50vw, 700px);
  height: clamp(400px, 50vw, 700px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  animation: rotateCircle 60s linear infinite, fadeInOut 4s ease-in-out infinite;
}
.bx-form__decoration svg {
  width: 100%;
  height: 100%;
}
.bx-form__decoration circle.orbit {
  animation: fadeInOut 4s ease-in-out infinite;
}

@keyframes rotateCircle {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes fadeInOut {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.7;
  }
}
.bx-field { margin-bottom: clamp(11px, 1.146vw, 22px); }
.bx-label { display: block; font-size: clamp(16px, 1.667vw, 32px); font-weight: 400; margin-bottom: 9px; }
.bx-control {
  height: clamp(43px, 2.813vw, 54px);
  background: var(--bx-grey);
  border: none;
  border-radius: clamp(11px, 1.146vw, 22px);
  width: 100%;
  padding-inline: clamp(17px, 1.042vw, 20px);
  font-size: clamp(12px, 1.25vw, 24px);
  color: var(--bx-dark);
  outline: none;
}
.bx-control::placeholder { color: var(--bx-dark-50); }
.bx-control--phone { border-radius: clamp(17px, 1.771vw, 34px); }
.bx-select-wrap {
  position: relative;
}
.bx-custom-select {
  position: relative;
  width: 100%;
}
.bx-custom-select__trigger {
  height: clamp(43px, 2.813vw, 54px);
  background: var(--bx-grey);
  border: none;
  border-radius: clamp(11px, 1.146vw, 22px);
  width: 100%;
  padding-inline: clamp(17px, 1.042vw, 20px);
  font-size: clamp(12px, 1.25vw, 24px);
  color: var(--bx-dark-50);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bx-custom-select__trigger.active {
  border-radius: clamp(11px, 1.146vw, 22px) clamp(11px, 1.146vw, 22px) 0 0;
}
.bx-custom-select__trigger.selected {
  color: var(--bx-dark);
}
.bx-custom-select__arrow {
  width: clamp(12px, 1.25vw, 24px);
  height: clamp(12px, 1.25vw, 24px);
  transform: rotate(180deg);
  flex-shrink: 0;
}
.bx-custom-select__trigger.active .bx-custom-select__arrow {
  transform: rotate(0deg);
}
.bx-custom-select__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bx-grey);
  border-radius: 0 0 clamp(11px, 1.146vw, 22px) clamp(11px, 1.146vw, 22px);
  display: none;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  max-height: 250px;
  overflow-y: auto;
}
.bx-custom-select__dropdown.active {
  display: block;
}
.bx-custom-select__option {
  padding: clamp(10px, 1vw, 16px) clamp(17px, 1.042vw, 20px);
  font-size: clamp(12px, 1.25vw, 24px);
  color: var(--bx-dark);
  cursor: pointer;
}
.bx-custom-select__option:hover {
  background: rgba(45, 35, 46, 0.05);
}
.bx-custom-select__option.selected {
  background: rgba(128, 175, 129, 0.1);
  color: var(--bx-accent);
  font-weight: 500;
}
.bx-custom-select__option:last-child {
  border-radius: 0 0 clamp(11px, 1.146vw, 22px) clamp(11px, 1.146vw, 22px);
}
/* Hide native select */
select.bx-control {
  display: none;
}
.bx-submit {
  height: clamp(51px, 3.333vw, 64px);
  border: 4px solid var(--bx-accent);
  border-radius: clamp(11px, 1.094vw, 21px);
  font-size: clamp(16px, 1.667vw, 32px);
  font-weight: 500;
  color: var(--bx-dark);
  background: transparent;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  transition: background 0.3s ease, color 0.3s ease;
}
.bx-submit:hover { background: var(--bx-accent); color: #fff; }

/* ===================== ARROW-DASH (пунктирная стрелка) ===================== */
.arrow-dash {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.arrow-dash::before {
  content: "";
  width: 34px;
  height: 0;
  border-top: 1.5px dashed currentColor;
  display: block;
}
/* Точка снизу вначале (порядок 1) */
.arrow-dash::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
/* Точка сверху в конце (порядок 2) — pseudo через span внутри */
/* Реализовано через отдельный span.arrow-dot-end в HTML,
   но если span недоступен — добавляем через outline на after */

/* Для кнопки "Більше проєктів" — точка сверху в конце */
.bx-projects-btn .arrow-dash::before {
  width: 34px;
  border-top: 1.5px dashed #2D232E;
}
.bx-projects-btn .arrow-dash::after {
  left: auto;
  right: 0;
  bottom: auto;
  top: -4px;
}

/* ===================== HERO ===================== */
.bx-hero { padding-block: clamp(37px, 4.844vw, 93px) clamp(19px, 1.25vw, 24px); }
.bx-h1 {
  font-size: clamp(26px, 3.333vw, 64px);
  font-weight: 700;
  line-height: 1.203;
  margin-bottom: clamp(22px, 1.979vw, 38px);
  max-width: 930px;
}
.bx-hero__text { font-size: clamp(16px, 1.667vw, 32px); font-weight: 400; line-height: 1.344; max-width: 660px; }
.bx-arc {
  position: absolute;
  width: clamp(264px, 34.375vw, 660px);
  height: clamp(264px, 34.375vw, 660px);
  top: 50%;
  right: -9%;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  opacity: 0.25;
}

/* ===================== STATS ===================== */
.bx-stats { padding-block: clamp(43px, 5.469vw, 105px) 0; }
.bx-stats__wrap {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: clamp(32px, 4.063vw, 78px);
  margin-inline: auto;
  padding-inline: clamp(16px, 5.052vw, 97px);
}
.bx-stat__inner { display: inline-flex; align-items: flex-start; }
.bx-stat__num { display: block; height: clamp(56px, 7.292vw, 140px); width: auto; }
.bx-stat:nth-child(1) .bx-stat__num { width: clamp(105px, 13.571vw, 261px); }
.bx-stat:nth-child(2) .bx-stat__num { width: clamp(219px, 28.308vw, 544px); }
.bx-stat:nth-child(3) .bx-stat__num { width: clamp(203px, 26.257vw, 504px); }
.bx-stat__label {
  font-size: clamp(16px, 1.667vw, 32px);
  font-weight: 400;
  line-height: 1.1875;
  white-space: nowrap;
  margin-left: clamp(3px, .313vw, 6px);
  flex-shrink: 0;
  margin-top: -60px;
}

/* ===================== ABOUT ===================== */
.bx-about { padding-block: clamp(50px, 4.948vw, 95px); }
.bx-about .col-lg-6:first-child { width: clamp(308px, 39.896vw, 766px); }
.bx-about__title {
  font-size: clamp(26px, 3.333vw, 64px);
  font-weight: 700;
  line-height: 1.203;
  margin-bottom: clamp(22px, 1.979vw, 38px);
}
.bx-about__desc { font-size: clamp(16px, 1.667vw, 32px); font-weight: 400; line-height: 1.344; }
.bx-about__desc .accent { color: var(--bx-accent); font-weight: 700; }

/* ===================== ADVANTAGES — сдвиг вправо ===================== */
.bx-adv {
  position: relative;
  height: clamp(104px, 13.542vw, 260px);
  margin-left: 0;
}
@media (min-width: 992px) {
  .bx-adv--desktop-shift {
    transform: translateX(200px);
  }
}
.bx-adv__line {
  position: absolute;
  left: 0;
  height: 0;
  border-top: 2px dashed var(--bx-dark-50);
}
.bx-adv__line::after {
  content: "";
  position: absolute;
  right: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bx-dark-50);
}
.bx-adv__pill {
  position: absolute;
  width: clamp(200px, 26.042vw, 500px);
  height: clamp(26px, 3.333vw, 64px);
  border-radius: clamp(13px, 1.667vw, 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(16px, 1.667vw, 32px);
  font-weight: 400;
}
.bx-adv__line--1 { top: 0; width: 36%; }
.bx-adv__pill--1 { top: 8%; left: 3%; background: var(--bx-grey-pill); }
.bx-adv__line--2 { top: 36%; width: 51%; }
.bx-adv__pill--2 { top: 43%; left: 12%; background: var(--bx-accent); color: #fff; }
.bx-adv__line--3 { top: 72%; width: 88%; }
.bx-adv__pill--3 { top: 79%; left: 27%; background: var(--bx-grey); }

/* ===================== SERVICES ===================== */
.bx-services { display: flex; flex-direction: column; gap: clamp(22px, 2.448vw, 47px); }
.bx-service { background: var(--bx-light); border-radius: var(--bx-radius-card); overflow: hidden; }
.bx-service__body {
  padding: clamp(34px, 2.76vw, 53px) clamp(37px, 4.479vw, 86px);
  display: flex;
  flex-direction: column;
  min-height: clamp(272px, 18.75vw, 360px);
}
.bx-service__title { font-size: var(--fs-sub); font-weight: 500; }
.bx-service__desc { font-size: var(--fs-sm); font-weight: 400; margin-top: clamp(14px, 1.51vw, 29px); line-height: 1.35; }
.bx-service__list { margin-top: 11px; padding-left: 29px; }
.bx-service__list li { font-size: var(--fs-sm); }
.bx-service__actions { display: flex; flex-direction: column; gap: 13px; margin-top: auto; }
.bx-service__media { position: relative; min-height: 224px; }
.bx-service__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bx-service__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(267deg, rgba(45,35,46,.076) 1%, rgba(45,35,46,.4) 71%);
  filter: blur(2.7px);
}

/* ===================== BUTTONS ===================== */
.bx-btn {
  height: clamp(37px, 2.083vw, 40px);
  border-radius: var(--bx-radius-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--fs-reg);
  width: min(288px, 100%);
  transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
  cursor: pointer;
}
.bx-btn--order { border: 2px solid var(--bx-accent); font-weight: 500; background: transparent; }
.bx-btn--order:hover { background: var(--bx-accent); color: #fff; }
.bx-btn--consult { border: 2px solid var(--bx-accent); font-weight: 500; background: transparent; font-size: clamp(10px, 1.05vw, 20px); white-space: nowrap; padding: 0 10px; }
.bx-btn--consult:hover { background: var(--bx-accent); color: #fff; }
.bx-btn--more { background: var(--bx-grey); font-weight: 400; border: 2px solid transparent; }
.bx-btn--more:hover { border-color: var(--bx-dark); }
.bx-btn--more-soft { background: var(--bx-grey-btn); font-weight: 400; border: 2px solid transparent; }
.bx-btn--more-soft:hover { border-color: var(--bx-dark); }

/* Service close button */
.bx-service__close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--bx-dark);
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
}
.bx-service__close:hover {
  background: var(--bx-dark);
}
.bx-service__close::before,
.bx-service__close::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background: var(--bx-dark);
  top: 50%;
  left: 50%;
  transition: background 0.3s ease;
}
.bx-service__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.bx-service__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.bx-service__close:hover::before,
.bx-service__close:hover::after {
  background: #fff;
}
.bx-service__media {
  position: relative;
}

/* ===================== CASES ===================== */
.bx-cases { padding-top: clamp(32px, 3.698vw, 71px); }
.bx-cases .row.g-5.align-items-start { align-items: center !important; }
.bx-cases .row.g-5 { gap: clamp(40px, 5.208vw, 100px) !important; flex-wrap: nowrap; }
.bx-cases .col-lg-5 { flex: 0 0 auto; width: clamp(300px, 38.229vw, 734px); }
.bx-cases .col-lg-7 { flex: 1 1 0; min-width: 0; }
.bx-cases .bx-title { font-size: clamp(26px, 3.333vw, 64px); font-weight: 700; line-height: 1.203; }
.bx-cases__sub {
  font-size: clamp(18px, 1.875vw, 36px);
  font-weight: 500;
  color: var(--bx-dark-50);
  line-height: 1.333;
  margin-top: clamp(14px, 1.823vw, 35px);
}
.bx-cases .col-lg-7 .row { flex-wrap: nowrap; }
.bx-cases .col-lg-7 .col-12 { flex: 1 1 0; min-width: 0; width: auto !important; }

/* ===================== COUNTER ===================== */
.bx-counter { padding-bottom: clamp(10px, 1.458vw, 28px); }
.bx-counter__num {
  font-size: clamp(30px, 3.802vw, 73px);
  font-weight: 800;
  line-height: 1;
  display: block;
  text-align: left;
}
.bx-counter__line {
  height: 0;
  border-top: 3px dashed var(--bx-dark);
  opacity: 0.5;
  position: relative;
  margin: clamp(10px, 1.302vw, 25px) 0;
}
.bx-counter__line::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(7px, 0.938vw, 18px);
  height: clamp(7px, 0.938vw, 18px);
  border-radius: 50%;
  background: var(--bx-dark);
}
.bx-counter__label {
  font-size: clamp(16px, 1.667vw, 32px);
  font-weight: 400;
  line-height: 1.344;
  text-align: right;
  display: block;
}

/* ===================== PROJECT CARDS ===================== */
.bx-project {
  padding: clamp(26px, 2.344vw, 45px) clamp(14px, 0.99vw, 19px);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: var(--bx-radius-card);
  border: 2px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  background: var(--bx-bg);
}

/* HOVER анимация карточки проекта: зелёный контур + подъём + затемнение */
.bx-project:hover {
  border-color: var(--bx-accent);
  box-shadow: 0 8px 32px rgba(128, 175, 129, 0.18);
  transform: translateY(-4px);
}

.bx-project:hover .bx-project__media::after {
  background: rgba(33, 31, 31, 0.42);
}

/* Описание появляется при hover через overlay внутри медиа */
.bx-project__media {
  position: relative;
  width: 100%;
  border-radius: var(--bx-radius-lg);
  overflow: hidden;
  aspect-ratio: 550/440;
}
.bx-project__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.bx-project:hover .bx-project__media img {
  transform: scale(1.03);
}
.bx-project__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(33, 31, 31, 0.24);
  filter: blur(3.16px);
  transition: background 0.3s ease;
}
.bx-project__chip {
  position: absolute;
  top: 14px;
  left: 9%;
  z-index: 3;
  background: #fff;
  border-radius: 26px;
  padding: 2px 11px;
  font-size: var(--fs-sm);
  font-weight: 400;
  white-space: nowrap;
}

/* Описание поверх фото — появляется при hover */
.bx-project__overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  padding: clamp(12px, 1.5vw, 24px);
  padding-top: clamp(48px, 5vw, 72px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.bx-project:hover .bx-project__overlay {
  opacity: 1;
  transform: translateY(0);
}
.bx-project__overlay-text {
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.8;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.bx-project__overlay-text div {
  margin-bottom: 6px;
}
.bx-project__overlay-text div:last-child {
  margin-bottom: 0;
}
.bx-project__overlay-text strong {
  font-weight: 500;
}

/* Заголовок карточки — исправлен размер по фигме */
.bx-project__title {
  font-family: 'Magistral', sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 2.292vw, 44px);
  line-height: 1.1;
  text-align: center;
  margin-bottom: clamp(14px, 1.406vw, 27px);
  color: var(--bx-dark);
}
.bx-project__caption {
  font-size: var(--fs-sm);
  font-weight: 400;
  text-align: center;
  margin-top: clamp(14px, 1.406vw, 27px);
  line-height: 1.35;
}
.bx-doc-btn { background: var(--bx-grey); width: min(320px, 100%); border: 2px solid transparent; }
.bx-doc-btn:hover { border-color: var(--bx-dark); }

/* Кнопка "Більше проєктів" — исправлена по фигме */
.bx-projects-btn {
  background: #FFFFFF;
  border: 3px solid var(--bx-accent);
  border-radius: 21px;
  font-family: 'Magistral', sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 1.667vw, 32px);
  color: var(--bx-dark);
  width: min(400px, 100%);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 38px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.bx-projects-btn:hover {
  background: var(--bx-accent);
  color: #fff;
}

/* ===================== CURRENT PROJECT ===================== */
.bx-current__info .name { font-size: var(--fs-card); font-weight: 500; line-height: 1.1; }
.bx-current__info .desc { font-size: var(--fs-sm); font-weight: 400; line-height: 1.35; }
.bx-current__info .area { font-size: var(--fs-card); font-weight: 500; line-height: 1.1; }
.bx-current__photo {
  position: relative;
  border-radius: var(--bx-radius-lg);
  overflow: hidden;
  background: #f6f0d7;
  aspect-ratio: 1200/580;
}
.bx-current__photo img { width: 100%; height: 100%; object-fit: cover; }
.bx-arrows { display: flex; gap: 11px; }
.bx-arrows--over { position: absolute; right: 5%; bottom: 8%; }
.arrow-circle {
  width: clamp(48px, 3.49vw, 67px);
  height: clamp(48px, 3.49vw, 67px);
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ececec;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 13px rgba(0,0,0,.07);
  transition: background 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}
.arrow-circle:hover {
  background: var(--bx-accent);
  border-color: var(--bx-accent);
}
.arrow-circle:hover svg path {
  stroke: #fff;
}
.arrow-circle svg { width: 48%; transition: all 0.3s ease; }
.arrow-circle svg path { transition: stroke 0.3s ease; }
.arrow-circle--prev svg { transform: rotate(180deg); }

/* ===================== TIMELINE ===================== */
.bx-timeline { padding-block: clamp(24px, 2.344vw, 45px) clamp(32px, 3.698vw, 71px); }
.bx-timeline__track { position: relative; height: 37px; margin-bottom: 24px; }
.bx-timeline__line { position: absolute; top: 50%; left: 0; right: 0; height: 0; border-top: 2px dashed var(--bx-grey); }
.bx-timeline__dot {
  position: absolute;
  top: 50%;
  width: clamp(24px, 1.875vw, 36px);
  height: clamp(24px, 1.875vw, 36px);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.bx-timeline__dot--1 { left: 0; background: var(--bx-grey); }
.bx-timeline__dot--2 { left: 50%; background: var(--bx-accent); }
.bx-timeline__dot--3 { left: 100%; background: var(--bx-grey-pill); }
.bx-timeline__title { font-size: var(--fs-sub); font-weight: 500; }
.bx-timeline__date { font-size: var(--fs-sm); font-weight: 400; }
.bx-timeline__col--3 { color: var(--bx-grey); }

/* ===================== PROCESS / STEPS ===================== */
.bx-process { padding-top: clamp(16px, 1.563vw, 30px); }
.bx-step {
  position: relative;
  padding: 6px 22px 80px;
  min-height: clamp(192px, 15.625vw, 224px);
}
.bx-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 0;
  border-left: 2px dashed var(--bx-dark);
}

/* Точки на пунктире шагов: 01 снизу, 02 сверху, 03 снизу, 04 сверху */
.bx-step::after {
  content: "";
  position: absolute;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bx-dark);
}
/* 01 — точка снизу вначале линии */
.col-6:nth-child(1) .bx-step::after,
.col-lg-3:nth-child(1) .bx-step::after {
  top: auto;
  bottom: 0;
}
/* 02 — точка сверху вконце линии */
.col-6:nth-child(2) .bx-step::after,
.col-lg-3:nth-child(2) .bx-step::after {
  top: 0;
  bottom: auto;
}
/* 03 — точка снизу */
.col-6:nth-child(3) .bx-step::after,
.col-lg-3:nth-child(3) .bx-step::after {
  top: auto;
  bottom: 0;
}
/* 04 — точка сверху */
.col-6:nth-child(4) .bx-step::after,
.col-lg-3:nth-child(4) .bx-step::after {
  top: 0;
  bottom: auto;
}
.bx-step__title { font-size: var(--fs-sm); font-weight: 700; }
.bx-step__desc { font-size: var(--fs-sm); font-weight: 400; margin-top: 19px; line-height: 1.35; }
.bx-step__num { font-size: var(--fs-h2); font-weight: 400; position: absolute; bottom: 14px; left: 22px; }
.bx-step__num--accent { color: var(--bx-accent); }

/* ===================== CONSULTATION ===================== */
.bx-consult { position: relative; padding-block: clamp(32px, 2.344vw, 45px); }
.bx-consult__box {
  background: var(--bx-light);
  border-radius: var(--bx-radius-lg);
  padding: clamp(26px, 2.344vw, 45px) clamp(22px, 2.5vw, 48px);
}
.bx-consult__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: clamp(19px, 1.563vw, 30px);
}
.bx-consult__sub { font-size: var(--fs-sub); font-weight: 400; color: var(--bx-dark-50); line-height: 1.3; }

/* ===================== SCROLL TO TOP ===================== */
.bx-scroll-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1080;
  width: 51px;
  height: 51px;
  border-radius: 50%;
  background: var(--bx-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity .3s, transform .3s, visibility .3s;
  cursor: pointer;
}
.bx-scroll-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.bx-scroll-top svg { width: 12px; height: auto; }
.bx-scroll-top:hover { background: var(--bx-accent); }

/* ===================== REVIEWS ===================== */
.bx-reviews { padding-top: clamp(16px, 1.563vw, 30px); }
.bx-review {
  background: var(--bx-light);
  border-radius: var(--bx-radius-lg);
  padding: clamp(29px, 2.604vw, 50px);
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 2px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* HOVER анимация отзыва: зелёный скруглённый контур */
.bx-review:hover {
  border-color: var(--bx-accent);
  box-shadow: 0 6px 28px rgba(128, 175, 129, 0.15);
  transform: translateY(-3px);
}

.bx-review__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 13px;
}

/* Аватар — выровнен влево, размер по фигме 86×86 */
.bx-review__avatar {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  /* убираем центрирование — прижат влево через flex родителя */
}

.bx-review__service { font-size: var(--fs-xs); text-align: right; font-style: italic; margin: 0; }
.bx-review__service b { font-weight: 700; }
.bx-review__quote-icon { width: 30px; height: 30px; margin-top: 24px; }
.bx-review__quote { font-size: var(--fs-reg); font-weight: 500; margin-top: 24px; flex: 1; line-height: 1.35; }
.bx-review__footer { display: flex; align-items: center; gap: 16px; margin-top: auto; }
.bx-review__divider {
  position: relative;
  width: 0;
  height: clamp(38px, 2.76vw, 53px);
  border-left: 3px dashed var(--bx-dark-50);
  flex-shrink: 0;
}
.bx-review__divider::after {
  content: "";
  position: absolute;
  left: -4.5px;
  bottom: -5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bx-dark-50);
}
.bx-review__name { font-size: var(--fs-sm); font-weight: 500; }
.bx-review__company { font-size: var(--fs-sm); font-weight: 300; }

/* ===================== FAQ ===================== */
.bx-faq { padding-block: clamp(32px, 2.344vw, 45px); }
.bx-faq .bx-title-giant { font-size: clamp(26px, 3.333vw, 64px); line-height: 0.5; }
.bx-faq__list .accordion-item {
  background: var(--bx-light);
  border: 2px solid transparent;
  border-radius: clamp(24px, 3.125vw, 60px);
  overflow: hidden;
  margin-bottom: clamp(13px, 1.198vw, 23px);
  transition: border-color 0.3s ease;
}
.bx-faq__list .accordion-item:hover {
  border-color: var(--bx-accent);
}
.bx-faq__list .accordion-button {
  background: var(--bx-light);
  box-shadow: none;
  font-size: clamp(16px, 1.667vw, 32px);
  font-weight: 400;
  color: #000;
  line-height: 1.344;
  min-height: clamp(40px, 5.208vw, 100px);
  padding: clamp(14px, 1.198vw, 23px) clamp(16px, 2.292vw, 44px) clamp(14px, 1.198vw, 23px) clamp(28px, 3.58vw, 69px);
}
.bx-faq__list .accordion-button:focus { box-shadow: none; }

/* Иконка аккордеона — тонкий крестик (не жирный) */
.bx-faq__list .accordion-button::after {
  flex-shrink: 0;
  width: clamp(33px, 4.282vw, 82px);
  height: clamp(33px, 4.282vw, 82px);
  border-radius: 50%;
  background-color: var(--bx-grey);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 45%;
  transition: transform .3s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v16M4 12h16' stroke='%232D232E' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.bx-faq__list .accordion-button:not(.collapsed)::after { transform: rotate(45deg); }
.bx-faq__list .accordion-body {
  font-size: var(--fs-sm);
  font-weight: 400;
  padding: 0 clamp(28px, 3.58vw, 69px) clamp(22px, 1.979vw, 38px);
  line-height: 1.35;
}

/* ===================== FOOTER ===================== */
.bx-footer {
  background: var(--bx-light);
  padding: clamp(26px, 2.344vw, 45px) clamp(32px, 1.667vw, 32px) clamp(32px, 3.125vw, 60px);
}
.bx-footer__logo { height: clamp(38px, 4.896vw, 94px); width: clamp(87px, 11.25vw, 216px); }
.bx-footer__link {
  font-size: clamp(16px, 1.667vw, 32px);
  font-weight: 400;
  color: var(--bx-dark);
  text-decoration: none;
}
.bx-footer nav { gap: clamp(12px, 2.083vw, 40px); }
.bx-footer__social { width: clamp(44px, 3.333vw, 64px); height: clamp(44px, 3.333vw, 64px); border-radius: 50%; }

/* Копирайт — выравнивание влево */
.bx-footer__copy {
  margin-top: clamp(19px, 1.979vw, 38px);
  font-size: var(--fs-xs);
  font-weight: 300;
  text-align: left; /* было center — прижато влево */
}

/* ===================== MODAL ===================== */
.bx-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.bx-modal.is-open {
  display: flex;
}
.bx-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(45, 35, 46, 0.75);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease;
}
.bx-modal__content {
  position: relative;
  z-index: 10;
  max-width: 540px;
  width: 100%;
  animation: slideUp 0.3s ease;
}
.bx-modal__close {
  position: absolute;
  top: clamp(14px, 1.5vw, 20px);
  right: clamp(14px, 1.5vw, 20px);
  z-index: 11;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.bx-modal__close:hover {
  background: var(--bx-light);
  transform: rotate(90deg);
}
.bx-modal__close svg {
  width: 20px;
  height: 20px;
  color: var(--bx-dark);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 991.98px) {
  .bx-adv { height: auto; display: flex; flex-direction: column; gap: 14px; margin-left: 0; }
  .bx-adv__line { display: none; }
  .bx-adv__pill { position: static; width: 100%; }
  .bx-arc { display: none; }
  .bx-arrows--over { position: static; justify-content: flex-end; margin-top: 14px; }
  .bx-step { border-left: 2px dashed var(--bx-dark); padding-left: 22px; }
  .bx-header__inner { padding-inline: 16px; }
}
@media (max-width: 575.98px) {
  .bx-step::before, .bx-step::after { display: none; }
  .bx-step {
    border-top: 2px dashed var(--bx-dark);
    border-left: none;
    padding: 19px 0 64px;
  }
  .bx-step__num { left: 0; bottom: 14px; }
  .bx-stat__num { margin-top: 0; }
  .bx-review__avatar { width: 56px; height: 56px; }
}