/* Бастион — блоки страницы (десктоп). Адаптив вынесен в responsive.css. */

.page{background:var(--surface-inverse);min-height:100vh;overflow-x:clip}
.shell{width:100%;max-width:var(--container-max);margin:0 auto}

/* ═══════════════════════════════ 1. Хедер ═══════════════════════════════ */
.b-header{position:fixed;left:0;right:0;top:0;z-index:var(--z-header);padding:0;
  transition:top var(--dur-slow) var(--ease-standard),padding var(--dur-slow) var(--ease-standard)}
.b-header__bar{
  margin:0 auto;height:var(--header-height);
  display:flex;align-items:center;gap:32px;
  background:var(--surface-card);box-shadow:var(--shadow-sm);
  max-width:100%;border-radius:0;padding:0 12px 0 var(--pad-page-x);
  transition:border-radius var(--dur-slow) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard),
             max-width var(--dur-slow) var(--ease-standard),
             padding var(--dur-slow) var(--ease-standard);
}
.b-header[data-scrolled="true"]{top:var(--header-inset);padding:0 var(--panel-inset)}
.b-header[data-scrolled="true"] .b-header__bar{
  max-width:var(--container-max);border-radius:var(--radius-pill);
  padding:0 12px 0 28px;box-shadow:var(--shadow-lg)}

.b-header__logo{display:flex;align-items:center;flex:none}
.b-header__logo img{height:30px;width:auto;align-self:center}

.b-header__nav{display:flex;gap:28px;margin-left:auto}
.b-header__nav a{
  font:var(--type-body-sm);font-weight:var(--weight-semibold);white-space:nowrap;
  color:var(--text-heading);transition:var(--transition-color)}
.b-header__nav a:hover{color:var(--action-primary)}
.b-header__nav a:active{color:var(--action-primary-active)}

.b-header__cta{margin-left:auto;flex:none}
.b-header__burger{margin-left:auto;display:none}

/* скрим под выезжающей панелью */
.b-scrim{
  position:fixed;inset:0;z-index:390;background:var(--scrim-flat);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-standard)}
.b-header[data-menu="true"] .b-scrim{opacity:1;pointer-events:auto}

/* выезжающая панель */
.b-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(88vw,340px);z-index:var(--z-overlay);
  display:none;flex-direction:column;gap:8px;padding:24px 24px 32px;
  background:var(--surface-card);box-shadow:var(--shadow-xl);
  overflow-y:auto;
  transform:translateX(102%);
  /* закрытая панель не должна ловить фокус и клики */
  visibility:hidden;
  transition:transform var(--dur-slow) var(--ease-standard),
             visibility 0s linear var(--dur-slow)}
.b-header[data-menu="true"] .b-drawer{
  transform:translateX(0);visibility:visible;
  transition:transform var(--dur-slow) var(--ease-standard),visibility 0s}
.b-drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.b-drawer__head img{height:28px;width:auto;align-self:center}
.b-drawer__link{
  font:var(--type-h5);color:var(--text-heading);
  padding:14px 12px 14px 14px;margin:0 -12px 0 -14px;
  border-radius:var(--radius-sm);border-bottom:1px solid var(--border-subtle);
  transition:var(--transition-color),transform var(--dur-fast) var(--ease-standard)}
.b-drawer__link:hover{background:var(--surface-card-muted);color:var(--action-primary)}
.b-drawer__link:active{background:var(--surface-accent-soft);color:var(--action-primary-active);transform:scale(.99)}
.b-drawer .btn{margin-top:20px}
.b-drawer__phone{font:var(--type-h5);color:var(--text-heading);margin-top:16px}
.b-drawer__phone:hover{color:var(--action-primary)}
.b-drawer__hours{font:var(--type-caption);color:var(--text-subtle)}

/* ════════════════════════════════ 2. Hero ════════════════════════════════ */
.b-hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden}
.b-hero__bg{position:absolute;inset:-8% 0;z-index:0;will-change:transform}
.b-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:70% center}
.b-hero__scrim{position:absolute;inset:0;z-index:1}
.b-hero__scrim--x{background:linear-gradient(90deg,rgba(18,17,16,.86) 0%,rgba(18,17,16,.55) 38%,rgba(18,17,16,0) 72%)}
.b-hero__scrim--y{background:linear-gradient(180deg,rgba(18,17,16,.55) 0%,rgba(18,17,16,0) 28%,rgba(18,17,16,.35) 72%,rgba(18,17,16,.8) 100%)}
.b-hero__inner{position:relative;z-index:2;width:100%;max-width:var(--container-max);margin:0 auto;
  padding:calc(var(--header-height) + 40px) var(--pad-page-x) 96px}
.b-hero__col{max-width:780px;display:flex;flex-direction:column;gap:24px}
.b-hero__title{font:var(--type-h2);font-size:45px;letter-spacing:var(--tracking-display);color:var(--text-on-inverse)}
.b-hero__photo{display:none;border-radius:var(--radius-panel);overflow:hidden;border:1px solid var(--border-inverse)}
.b-hero__photo img{width:100%;aspect-ratio:3 / 2;object-fit:cover;object-position:center;display:block}
.b-hero__lead{font:var(--type-body);color:rgba(255,255,255,.88);max-width:58ch}
.b-hero__lead--mobile{display:none;max-width:none}
.b-hero__points{list-style:none;margin:12px 0 0;padding:0;display:flex;gap:22px;flex-wrap:nowrap;white-space:nowrap}
.b-hero__points li{display:flex;align-items:center;gap:12px}
.b-hero__badge{
  width:44px;height:44px;flex:none;border-radius:var(--radius-circle);
  background:var(--surface-glass);border:1px solid var(--border-inverse);
  -webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);
  display:flex;align-items:center;justify-content:center}
.b-hero__badge img{width:24px;height:24px;flex:none}
.b-hero__points span:last-child{font:var(--type-body-sm);color:var(--text-on-inverse)}

/* ═══════════════════════════ 3. Этапы работы ═══════════════════════════ */
.b-steps{padding:var(--pad-section-y) var(--pad-page-x)}
.b-steps__grid{max-width:var(--container-max);margin:0 auto;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.b-steps__aside{position:sticky;top:120px;display:flex;flex-direction:column;gap:24px}
.b-steps__title{font:var(--type-h2);letter-spacing:var(--tracking-display);color:var(--text-on-inverse)}
.b-steps__lead{font:var(--type-body);color:var(--text-on-inverse-muted);max-width:44ch}
.b-steps__media{margin-top:8px;border-radius:var(--radius-panel);overflow:hidden;
  border:1px solid var(--border-inverse);aspect-ratio:3 / 2}
.b-steps__media img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform}

.b-steps__list{list-style:none;margin:0;padding:0;position:relative;
  display:flex;flex-direction:column;gap:20px}
.b-steps__track{position:absolute;left:27px;top:28px;bottom:28px;width:2px;
  background:var(--border-inverse);border-radius:2px}
.b-steps__progress{position:absolute;inset:0;background:var(--action-primary);border-radius:2px;
  transform-origin:top center;transform:scaleY(0)}

.b-step{display:grid;grid-template-columns:56px 1fr;gap:24px;align-items:start}
.b-step__dot{
  width:56px;height:56px;flex:0 0 auto;border-radius:var(--radius-circle);
  background:var(--surface-inverse);border:2px solid var(--border-inverse);
  display:flex;align-items:center;justify-content:center;
  font:var(--type-h5);color:var(--text-on-inverse-subtle);position:relative;z-index:2;
  transition:background-color var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard),
             color var(--dur-base) var(--ease-standard)}
.b-step__card{display:flex;flex-direction:column;gap:10px;padding:18px 24px 22px;
  border-radius:var(--radius-card);border:1px solid transparent;
  transition:background-color var(--dur-slow) var(--ease-standard),
             border-color var(--dur-slow) var(--ease-standard),
             box-shadow var(--dur-slow) var(--ease-standard)}
.b-step__eyebrow{font:var(--type-caption);color:var(--text-on-inverse-subtle);letter-spacing:var(--tracking-label)}
.b-step__title{font:var(--type-h4);letter-spacing:var(--tracking-heading);color:var(--text-on-inverse)}
.b-step__text{font:var(--type-body-sm);color:var(--text-on-inverse-muted);max-width:56ch}

/* пройденный шаг */
.b-step[data-active] .b-step__dot{
  background:var(--action-primary);border-color:var(--action-primary);color:var(--text-on-accent)}
/* финал пятого шага */
.b-step__num{transition:opacity .3s var(--ease-standard)}
.b-step__check{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);z-index:3;
  opacity:0;transition:opacity .2s var(--ease-standard) .12s}
.b-step__check path{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .5s var(--ease-standard) .18s}
.b-step[data-lit] .b-step__num{opacity:0}
.b-step[data-lit] .b-step__check{opacity:1}
.b-step[data-lit] .b-step__check path{stroke-dashoffset:0}
.b-step[data-lit] .b-step__dot{
  background:linear-gradient(0deg,rgba(67,185,110,.12),rgba(67,185,110,.12)),var(--surface-inverse);
  border-color:#43B96E;animation:bst-finish-glow .85s var(--ease-standard) forwards}
.b-step[data-lit] .b-step__card{
  background:linear-gradient(180deg,rgba(67,185,110,.10),rgba(67,185,110,.02));
  border-color:rgba(67,185,110,.34);box-shadow:0 18px 48px -24px rgba(67,185,110,.45)}
@keyframes bst-finish-glow{
  0%{box-shadow:0 0 0 0 rgba(67,185,110,.18)}
  45%{box-shadow:0 0 0 12px rgba(67,185,110,.18)}
  100%{box-shadow:0 0 0 16px rgba(67,185,110,0)}}

/* ═══════════════════════════ 4. Как мы помогаем ═══════════════════════════ */
.b-approach{padding:0 var(--panel-inset)}
.b-approach__panel{max-width:var(--container-max);margin:0 auto;
  background:var(--surface-card);border-radius:var(--radius-section);padding:var(--pad-panel)}
.b-approach__head{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end;margin-bottom:48px}
.b-approach__headline{display:flex;flex-direction:column;gap:20px}
.b-approach__title{font:var(--type-h1);letter-spacing:var(--tracking-display);color:var(--text-heading)}
.b-approach__lead{font:var(--type-body-lg);color:var(--text-muted)}
.b-approach__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card)}

.b-help{display:flex;flex-direction:column;gap:18px;padding:var(--pad-card-lg);
  background:var(--surface-card-muted);border:1px solid transparent;border-radius:var(--radius-card);
  transition:var(--transition-lift),var(--transition-color)}
.b-help:hover{transform:var(--lift-card-hover);border-color:rgba(240,117,43,.4);
  box-shadow:0 20px 44px -22px rgba(23,22,20,.35)}
.b-help__media{border-radius:var(--radius-image);overflow:hidden;aspect-ratio:4 / 3;background:var(--surface-card)}
.b-help__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--dur-slow) var(--ease-standard)}
.b-help:hover .b-help__media img{transform:scale(1.03)}
.b-help__label{font:var(--type-eyebrow);color:var(--text-accent)}
.b-help__title{font:var(--type-h4);color:var(--text-heading)}
.b-help__text{font:var(--type-body-sm);font-weight:var(--weight-medium);color:var(--ink-600)}
/* вторая карточка — тёмная */
.b-help--dark{background:var(--surface-inverse);border-color:var(--border-inverse)}
.b-help--dark .b-help__media{background:var(--surface-inverse-raised)}
.b-help--dark .b-help__label{color:var(--orange-400)}
.b-help--dark .b-help__title{color:var(--text-on-inverse)}
.b-help--dark .b-help__text{color:rgba(255,255,255,.82)}

/* ═════════════════════════════ 5. Результаты ═════════════════════════════ */
.b-stats{padding:24px var(--panel-inset) 0}
.b-stats__row{max-width:var(--container-max);margin:0 auto;
  background:var(--surface-inverse-raised);border-radius:var(--radius-panel);
  padding:var(--pad-panel);display:flex;align-items:stretch;gap:0}
.b-stat{flex:1;display:flex;flex-direction:column;gap:8px;padding-right:40px}
.b-stat + .b-stat{padding-left:40px;border-left:2px solid var(--action-primary)}
.b-stat__num{font:var(--type-display);font-size:var(--size-display-2);
  letter-spacing:var(--tracking-display);color:var(--action-primary)}
.b-stat__label{font:var(--type-body);color:var(--text-on-inverse-muted);max-width:26ch}

/* ══════════════════════════════ 6. Отзывы ══════════════════════════════ */
.b-reviews{padding:var(--pad-section-y) 0}
.b-reviews__head{max-width:var(--container-max);margin:0 auto 40px;padding:0 var(--pad-page-x);
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.b-reviews__headline{display:flex;flex-direction:column;gap:20px}
.b-reviews__title{font:var(--type-h2);letter-spacing:var(--tracking-display);color:var(--text-on-inverse)}
.b-reviews__nav{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.b-reviews__counter{font:var(--type-label);color:var(--text-on-inverse-subtle)}
.b-reviews__rail{display:flex;gap:var(--gap-card);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px var(--pad-page-x) 8px;scroll-padding-inline-start:var(--pad-page-x);
  cursor:grab;scrollbar-width:none;
  /* НЕ pan-x: это правило запрещает браузеру отдавать вертикальный жест
     странице, и палец, начавший движение на карточке, «залипает» —
     страница не скроллится вниз. auto = браузер сам выбирает ось. */
  touch-action:auto}
.b-reviews__rail::-webkit-scrollbar{display:none}
.b-reviews__rail:active{cursor:grabbing}
.b-reviews__rail:focus-visible{outline:2px solid var(--action-primary);outline-offset:-2px}
.b-reviews__item{flex:0 0 424px;scroll-snap-align:start}
.b-reviews__bar{max-width:var(--container-max);margin:24px auto 0;padding:0 var(--pad-page-x)}
.b-reviews__bar > div{height:2px;background:var(--border-inverse);border-radius:2px;overflow:hidden}
.b-reviews__fill{display:block;height:100%;width:20%;background:var(--action-primary);border-radius:2px;
  transition:width var(--dur-base) var(--ease-standard)}
.b-reviews__rail .testimonial:hover{transform:var(--lift-card-hover);border-color:rgba(240,117,43,.45)}

/* ═══════════════════════════ 7. Финальный CTA ═══════════════════════════ */
.b-cta{padding:0 var(--panel-inset) var(--pad-section-y)}
.b-cta__band{position:relative;max-width:var(--container-max);margin:0 auto;
  border-radius:var(--radius-section);overflow:hidden;min-height:460px;display:flex;align-items:center}
.b-cta__bg{position:absolute;inset:-10% 0;will-change:transform}
.b-cta__bg img{width:100%;height:100%;object-fit:cover;object-position:78% center;display:block}
.b-cta__scrim{position:absolute;inset:0;background:var(--scrim-left)}
.b-cta__edge{position:absolute;inset:0;border-radius:var(--radius-section);padding:1px;
  background:linear-gradient(120deg,rgba(240,117,43,.85) 0%,rgba(240,117,43,.28) 26%,rgba(240,117,43,0) 52%,rgba(240,117,43,.35) 82%,rgba(240,117,43,.8) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;pointer-events:none}
.b-cta__glow{position:absolute;inset:0;border-radius:var(--radius-section);
  box-shadow:inset 0 0 60px -20px rgba(240,117,43,.35);pointer-events:none}
.b-cta__content{position:relative;padding:var(--pad-panel);max-width:720px;
  display:flex;flex-direction:column;gap:24px}
.b-cta__title{font:var(--type-h2);letter-spacing:var(--tracking-display);color:var(--text-on-inverse)}
.b-cta__lead{font:var(--type-body);color:var(--text-on-inverse-muted);max-width:58ch}

/* ══════════════════════════════ 8. Футер ══════════════════════════════ */
.b-footer{padding:0 var(--pad-page-x) 48px}
.b-footer__inner{max-width:var(--container-max);margin:0 auto;display:flex;flex-direction:column;gap:32px}
.b-footer__rule{height:1px;background:var(--border-inverse)}
.b-footer__cols{display:flex;align-items:stretch;gap:40px}
.b-footer__brand{flex:1.6 1 0;display:flex;flex-direction:column;gap:18px}
/* без align-self флекс-колонка растягивает логотип по ширине (см. handoff) */
.b-footer__brand img{height:28px;width:auto;align-self:flex-start}
.b-footer__about{font:var(--type-body-sm);color:var(--text-on-inverse-muted);max-width:52ch}
.b-footer__divider{width:1px;align-self:stretch;background:var(--border-inverse);flex:none}
.b-footer__col{flex:1 1 0;display:flex;flex-direction:column;gap:10px;padding-left:8px}
.b-footer__heading{font:var(--type-label);color:var(--text-on-inverse)}
.b-footer__phone{font:var(--type-h5);color:var(--text-on-inverse);white-space:nowrap}
.b-footer__mail{font:var(--type-body-sm);color:var(--text-on-inverse-muted)}
.b-footer__line{font:var(--type-body-sm);color:var(--text-on-inverse-muted)}
.b-footer__legal{font:var(--type-caption);color:var(--text-on-inverse-subtle);max-width:80ch}

/* ─────────── Выделенный оранжевым фрагмент заголовка ─────────── */
.b-hero__title em,.b-steps__title em,.b-approach__title em,
.b-reviews__title em,.b-cta__title em{font-style:italic;color:var(--action-primary)}

/* ─────────── Параллакс изображения в «Этапах» (depth 40) ─────────── */
.b-steps__media{position:relative}
.b-steps__media img{position:absolute;left:0;right:0;top:-6%;width:100%;height:112%;will-change:transform}

/* Якоря: нативный переход по хешу не заезжает под фиксированный хедер */
#steps,#approach,#results,#reviews,#contacts{scroll-margin-top:96px}