/* =================================================================
   sro-stroitel.ru
   1. Токены, сброс, типографика, контейнер, кнопки, формы
   ================================================================= */

:root{
  /* нейтрали */
  --bg:        #F2F2F2;
  --ink:       #373737;
  --ink-2:     #2F2F2F;
  --surface:   #E1DFDF;
  --surface-2: #E8E8E8;
  --line:      #D6D4D4;
  --muted:     #5A5856;
  --muted-on-dark: #C9C7C7;
  --field-dark:#EDEDED;
  --white:     #FFFFFF;

  /* единственный акцент */
  --orange:    #FF5B00;
  --pink:      #FF1A6B;
  --grad:      linear-gradient(90deg, #FF5B00 0%, #FF1A6B 100%);
  --pink-ink:  #B31251;          /* инлайновые ссылки и мелкий текст на светлом */
  --accent-on-dark: #FF7A4D;     /* акцентный текст на #373737 */

  /* сетка */
  --container: 1160px;
  --gutter:    24px;
  --pad:       20px;

  /* радиусы */
  --r-btn:   8px;
  --r-tab:   12px;
  --r-card:  16px;
  --r-band:  32px;

  /* ритм */
  --sec:      96px;
  --head-gap: 40px;

  /* шрифты */
  --f-head: 'Onest', 'Golos Text', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Golos Text', 'Onest', 'Helvetica Neue', Arial, sans-serif;
}

/* --- сброс ------------------------------------------------------- */

*,*::before,*::after{ box-sizing:border-box; }

[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.is-locked{ overflow:hidden; }

h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }

img,svg{ display:block; max-width:100%; }
img{ height:auto; }

a{ color:inherit; text-decoration:none; }

button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }

table{ border-collapse:collapse; width:100%; }

:focus-visible{ outline:2px solid var(--pink); outline-offset:3px; border-radius:4px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--white); color:var(--ink);
  padding:12px 20px; border-radius:0 0 var(--r-btn) 0;
}
.skip:focus{ left:0; }

.vh{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --- типографика -------------------------------------------------- */

h1,h2,h3,h4,.h1,.h2,.h3{
  font-family:var(--f-head);
  font-weight:400;
  color:var(--ink);
}

h1,.h1{ font-size:56px; line-height:1.08; letter-spacing:-.01em; }
h2,.h2{ font-size:40px; line-height:1.15; letter-spacing:-.01em; }
h3,.h3{ font-size:22px; line-height:1.3; font-weight:500; letter-spacing:0; }

.lead{ font-size:20px; line-height:1.5; color:var(--muted); }
.small{ font-size:14px; line-height:1.45; }
.muted{ color:var(--muted); }

p + p{ margin-top:16px; }

/* фирменный приём донора: первые слова h2 залиты градиентом */
.gt{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

/* инлайновая ссылка в тексте — затемнённый розовый ради контраста */
.txt a,
.prose a{
  color:var(--pink-ink);
  text-decoration:underline;
  text-underline-offset:3px;
}
.txt a:hover,
.prose a:hover{ text-decoration-thickness:2px; }

/* --- контейнер и секции ------------------------------------------- */

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-inline:var(--pad);
}

.section{ padding-block:var(--sec); }
.section--tight{ padding-block:calc(var(--sec) / 2); }

.section__head{ margin-bottom:var(--head-gap); }
.section__head .lead{ margin-top:16px; max-width:720px; }

/* тёмная полноширинная плашка */
.band-dark{
  background:var(--ink);
  color:var(--white);
  padding-block:var(--sec);
  border-radius:var(--r-band);
  position:relative;
  overflow:hidden;
}
.band-dark h1,
.band-dark h2,
.band-dark h3{ color:var(--white); }
.band-dark .lead,
.band-dark .muted{ color:var(--muted-on-dark); }
.band-dark a:not(.btn){ color:var(--accent-on-dark); }

.band-dark--top{ border-radius:0 0 var(--r-band) var(--r-band); }
.band-dark--bottom{ border-radius:var(--r-band) var(--r-band) 0 0; }
.band-dark--flush{ border-radius:0; }

/* радиальный оранжево-розовый засвет за объектом — приём донора */
.glow{ position:relative; }
.glow::before{
  content:"";
  position:absolute; inset:-25%;
  background:radial-gradient(circle at 70% 45%, #FF5B00 0%, #FF1A6B 45%, transparent 72%);
  opacity:.55;
  z-index:0;
  pointer-events:none;
}
.glow > *{ position:relative; z-index:1; }

.art{ width:100%; height:auto; }

/* --- кнопки ------------------------------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:56px;
  padding-inline:32px;
  border-radius:var(--r-btn);
  border:0;
  font-family:var(--f-head);
  font-size:16px;
  font-weight:500;
  line-height:1;
  text-align:center;
  cursor:pointer;
  transition:background-position .25s ease, filter .2s ease, background-color .2s ease, color .2s ease;
}

.btn--grad{
  color:var(--white);
  background-image:var(--grad);
  background-size:200% 100%;
  background-position:100% 0;
}
.btn--grad:hover{ filter:brightness(1.06); background-position:0 0; }
.btn--grad:active{ filter:brightness(.95); }

.btn--sec{
  background:transparent;
  color:var(--ink);
  border:1px solid #C9C9C9;
}
.btn--sec:hover{ background:var(--surface); }

.btn--sec-dark{
  background:transparent;
  color:var(--white);
  border:1px solid var(--white);
}
.btn--sec-dark:hover{ background:rgba(255,255,255,.1); }

.btn--wide{
  display:flex;
  width:100%;
  height:64px;
}

.btn--block{ display:flex; width:100%; }

.btn--sm{ height:44px; padding-inline:22px; }

/* светлая ссылка-кнопка промо-полосы */
.btn--light{
  height:44px;
  padding-inline:22px;
  background:var(--white);
  color:var(--ink);
  border:1px solid var(--line);
}
.btn--light:hover{ background:var(--surface-2); }

.btn:focus-visible{ outline:2px solid var(--pink); outline-offset:3px; }

/* --- чипы --------------------------------------------------------- */

.chip{
  display:inline-flex;
  align-items:center;
  height:44px;
  padding-inline:20px;
  border-radius:var(--r-btn);
  background:#E0DEDE;
  color:var(--ink);
  font-size:16px;
  line-height:1;
  border:0;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease;
}
.chip:hover{ background:var(--line); }
.chip.is-active,
.chip[aria-pressed="true"]{
  background-image:var(--grad);
  background-color:transparent;
  color:var(--white);
}
.chip--dark{ background:rgba(255,255,255,.1); color:var(--white); }
.chip--dark:hover{ background:rgba(255,255,255,.18); }

.chips{ display:flex; flex-wrap:wrap; gap:12px; }

/* --- вкладки ------------------------------------------------------ */

.tabs{ display:flex; gap:0; }
.tab{
  flex:1 1 0;
  height:64px;
  border-radius:var(--r-tab) var(--r-tab) 0 0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-head);
  font-size:16px;
  line-height:1;
  transition:background-color .2s ease, color .2s ease;
}
.tab:hover{ background:var(--surface-2); }
.tab[aria-selected="true"]{
  background:var(--surface);
  color:var(--pink-ink);
  font-weight:500;
}
.tabpanel{
  background:var(--surface);
  border-radius:0 0 var(--r-card) var(--r-card);
  padding:32px;
}

/* --- формы -------------------------------------------------------- */

.form{ display:grid; gap:16px; }
.form__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.form__grid--full{ grid-column:1 / -1; }

.field{ display:grid; gap:6px; }
.field__label{ font-size:14px; line-height:1.45; color:var(--muted); }

.field__input{
  width:100%;
  height:52px;
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:var(--r-btn);
  background:var(--white);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  transition:border-color .2s ease;
}
.field__input::placeholder{ color:var(--muted); }
.field__input:hover{ border-color:var(--muted); }
.field__input:focus-visible{ outline:2px solid var(--pink); outline-offset:2px; border-color:transparent; }

.field__input--area{
  height:auto;
  min-height:112px;
  padding:14px 16px;
  line-height:1.5;
  resize:vertical;
}

select.field__input{
  appearance:none;
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237C7A79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
}

.field__err{
  font-size:13px;
  line-height:1.4;
  color:var(--pink-ink);
}
.field.is-invalid .field__input{ border-color:var(--pink-ink); }

/* поля на тёмной плашке */
.on-dark .field__label{ color:var(--muted-on-dark); }
.on-dark .field__input{
  background:var(--field-dark);
  border-color:transparent;
  color:var(--ink);
}
.on-dark .field__err{ color:var(--accent-on-dark); }
.on-dark .check__txt{ color:var(--muted-on-dark); }
/* Ссылка согласия (14px) лежит в .consult поверх оранжево-розового радиального
   градиента ::before, поэтому фирменный --accent-on-dark #FF7A4D давал по реальным
   пикселям 2.71-2.90 — ниже рабочего порога 3.0. Светлый оттенок того же акцента
   поднимает контраст, подчёркивание и «ссылочность» сохраняются. */
.on-dark .check__txt a{ color:#FFC0A8; }

.check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
}
.check__box{
  flex:0 0 auto;
  width:20px; height:20px;
  margin-top:2px;
  accent-color:var(--pink);
  cursor:pointer;
}
.check__txt{ font-size:14px; line-height:1.45; color:var(--muted); }
.check__txt a{ color:var(--pink-ink); text-decoration:underline; text-underline-offset:2px; }

.form__ok{
  padding:16px 20px;
  border-radius:var(--r-tab);
  background:var(--surface);
  color:var(--ink);
  font-size:15px;
  line-height:1.5;
}
.on-dark .form__ok{ background:rgba(255,255,255,.12); color:var(--white); }

/* --- радиогруппа --------------------------------------------------- */

.radios{ display:flex; flex-wrap:wrap; gap:10px; }
.radio{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:44px;
  padding-inline:16px;
  border-radius:var(--r-btn);
  background:var(--white);
  border:1px solid var(--line);
  font-size:15px;
  cursor:pointer;
}
.radio input{ accent-color:var(--pink); cursor:pointer; }
.radio:has(input:checked){ border-color:var(--pink); }

/* --- иконки -------------------------------------------------------- */

.ic{ flex:0 0 auto; }
.ic-grad{ color:var(--pink); }

.fileic{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  width:48px; height:48px;
  border-radius:50%;
  background:var(--white);
  color:var(--ink);
  flex:0 0 auto;
}
.fileic b{ font-size:9px; font-weight:500; letter-spacing:.04em; }

/* =================================================================
   2. Шапка, навигация, бургер, мобильное меню, подвал
   ================================================================= */

.hdr{ background:var(--white); }

/* --- ярус 1: утилитарная полоса ------------------------------------ */

.util{
  display:none;
  height:36px;
  background:var(--surface-2);
  font-size:13px;
  color:var(--muted);
}
.util__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:36px;
}
.util__geo{ display:inline-flex; align-items:center; gap:6px; }
.util__nav{ display:flex; align-items:center; gap:10px; }
.util__nav a{ transition:color .2s ease; }
.util__nav a:hover{ color:var(--pink-ink); }
.util__dot{ color:var(--line); }

/* --- залипающий блок (ярусы 2 + 3) --------------------------------- */

.hdr__sticky{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--white);
}

/* --- ярус 2: основная строка --------------------------------------- */

.bar{ background:var(--white); }
.bar__in{
  display:flex;
  align-items:center;
  height:64px;
  transition:height .2s ease;
}

.logo{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:12px;
}
.logo__mark{ flex:0 0 auto; display:block; }
.logo__mark svg{ width:36px; height:36px; transition:width .2s ease, height .2s ease; }
.logo__txt{ display:flex; flex-direction:column; }
.logo__name{
  font-family:var(--f-head);
  font-size:17px;
  font-weight:600;
  line-height:1.15;
  color:var(--ink);
  white-space:nowrap;
}
.logo__sub{
  display:none;
  font-family:var(--f-head);
  font-size:11px;
  line-height:1.3;
  color:var(--muted);
  letter-spacing:.06em;
  white-space:nowrap;
}

.bar__right{
  display:none;
  align-items:center;
  gap:24px;
  margin-left:auto;
  flex-shrink:0;
}
.bar__call{ flex:0 0 auto; height:44px; padding-inline:22px; }
.bar__phone{ display:flex; flex-direction:column; align-items:flex-end; }
.bar__phone-label{ font-size:13px; line-height:1.3; color:var(--muted); white-space:nowrap; }
.bar__phone-num{
  font-family:var(--f-head);
  font-size:24px;
  font-weight:600;
  line-height:1;
  color:var(--ink);
  white-space:nowrap;
  transition:font-size .2s ease, color .2s ease;
}
.bar__phone-num:hover{ color:var(--pink-ink); }

/* мобильная правая группа */
.bar__mob{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  flex-shrink:0;
}
.mobcall{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border-radius:50%;
  background-image:var(--grad);
  color:var(--white);
}
.burger{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:44px; height:44px;
  border-radius:var(--r-btn);
}
.burger__l{
  display:block;
  width:20px; height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] .burger__l:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__l:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] .burger__l:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* --- ярус 3: навигация --------------------------------------------- */

.nav{
  display:none;
  background:var(--white);
  border-bottom:1px solid var(--surface);
}
.nav__in {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  height: 56px;
  padding-bottom: 12px;
  justify-content: space-between;
}
.nav__link{
  position:relative;
  font-family:var(--f-head);
  font-size:15px;
  font-weight:400;
  line-height:1;
  color:var(--ink);
  white-space:nowrap;
  padding-bottom:11px;
  transition:color .2s ease;
}
.nav__link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:2px;
  background:var(--muted);
  opacity:0;
  transition:opacity .2s ease;
}
.nav__link:hover::after{ opacity:1; }
.nav__link.is-active{ color:var(--pink-ink); font-weight:500; }
.nav__link.is-active::after{ background-image:var(--grad); background-color:transparent; opacity:1; }

/* сжатие при прокрутке */
body.is-scrolled .bar__in{ height:64px; }
body.is-scrolled .bar__phone-num{ font-size:20px; }

/* --- оверлей и выдвижная панель ------------------------------------ */

.overlay{
  position:fixed;
  inset:0;
  background:rgba(55,55,55,.6);
  z-index:90;
}

.drawer{
  position:fixed;
  top:0; right:0; bottom:0;
  z-index:100;
  display:flex;
  flex-direction:column;
  gap:20px;
  width:min(360px, 88vw);
  padding:20px;
  background:var(--white);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.drawer__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.drawer__title{
  font-family:var(--f-head);
  font-size:17px;
  font-weight:600;
  color:var(--ink);
}
.drawer__close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border-radius:var(--r-btn);
  color:var(--ink);
}
.drawer__nav{ display:flex; flex-direction:column; }
.drawer__link{
  padding:14px 0;
  border-bottom:1px solid var(--surface);
  font-family:var(--f-head);
  font-size:18px;
  line-height:1.3;
  color:var(--ink);
}
.drawer__link.is-active{ color:var(--pink-ink); font-weight:500; }
.drawer__extra{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  font-size:15px;
  color:var(--muted);
}
.drawer__extra a:hover{ color:var(--pink-ink); }
.drawer__contacts{ display:flex; flex-direction:column; gap:6px; }
.drawer__phone{
  font-family:var(--f-head);
  font-size:22px;
  font-weight:600;
  color:var(--ink);
}
.drawer__mail{ font-size:15px; color:var(--muted); }
.drawer .btn{ margin-top:auto; }

/* --- подвал --------------------------------------------------------- */

.footer{
  position:relative;
  z-index:2;
  margin-top:-32px;
  padding-block:56px 40px;
  background:var(--bg);
  border-radius:var(--r-band) var(--r-band) 0 0;
}

.footer__top{
  display:flex;
  flex-direction:column;
  gap:24px;
  padding-bottom:32px;
}
.footer__h3{
  font-family:var(--f-head);
  font-size:22px;
  font-weight:500;
  line-height:1.3;
}
.footer__stay-note{
  margin-top:8px;
  max-width:520px;
  font-size:15px;
  line-height:1.5;
  color:var(--muted);
}
.footer__soc{ display:flex; gap:12px; }

.soc{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--white);
  background-image:var(--grad);
  background-size:200% 100%;
  background-position:100% 0;
  transition:background-position .25s ease, filter .2s ease;
}
.soc:hover{ background-position:0 0; filter:brightness(1.06); }
.soc--lg{ width:64px; height:64px; border-radius:var(--r-tab); }
.soc--sm{
  width:40px; height:40px;
  border-radius:var(--r-btn);
  background-image:none;
  background-color:var(--surface);
  color:var(--ink);
}
.soc--sm:hover{ background-color:var(--line); filter:none; }

.footer__rule{ height:1px; background:var(--line); }

.footer__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px var(--gutter);
  padding-block:40px;
}
.footer__col--brand{ display:flex; flex-direction:column; gap:4px; }
.footer__logo{
  font-family:var(--f-head);
  font-size:18px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:8px;
}
.footer__meta{ font-size:14px; line-height:1.45; color:var(--muted); }
.footer__soc-sm{ display:flex; gap:8px; margin-top:16px; }

.footer__h4{
  font-family:var(--f-head);
  font-size:16px;
  font-weight:500;
  line-height:1.3;
  color:var(--ink);
  margin-bottom:16px;
}
.footer__list{ display:flex; flex-direction:column; gap:10px; }
.footer__list a,
.footer__list span{
  font-size:15px;
  line-height:1.45;
  color:var(--ink);
  transition:color .2s ease;
}
.footer__list a:hover{ color:var(--pink-ink); text-decoration:underline; text-underline-offset:3px; }
.footer__list--contacts span{ color:var(--muted); }

.footer__label{
  margin-top:20px;
  font-family:var(--f-head);
  font-size:14px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--ink);
}
.footer__label + .footer__meta{ margin-top:4px; }

.footer__bottom{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding-top:32px;
}
.footer__legal{
  max-width:860px;
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}

/* --- CTA-плашка перед подвалом -------------------------------------- */

.cta{
  background:var(--ink);
  color:var(--white);
  border-radius:0 0 var(--r-band) var(--r-band);
  padding-block:64px 88px;
  overflow:hidden;
}
.cta__in{
  display:flex;
  flex-direction:column;
  gap:32px;
}
.cta__title{
  font-family:var(--f-head);
  font-size:34px;
  font-weight:400;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--white);
}
.cta__note{
  margin:16px 0 28px;
  max-width:560px;
  font-size:16px;
  line-height:1.55;
  color:var(--muted-on-dark);
}
.cta__art{ display:none; }
.cta__art .art{ width:240px; height:240px; }

/* --- модальное окно -------------------------------------------------- */

.modal{
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(55,55,55,.6);
}
.modal__box{
  position:relative;
  width:min(520px, 100%);
  max-height:90vh;
  overflow-y:auto;
  padding:32px;
  background:var(--white);
  border-radius:var(--r-card);
}
.modal__close{
  position:absolute;
  top:16px; right:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  border-radius:var(--r-btn);
  color:var(--ink);
}
.modal__close:hover{ background:var(--surface); }
.modal__title{
  font-family:var(--f-head);
  font-size:28px;
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.01em;
  padding-right:48px;
}
.modal__lead{
  margin:12px 0 24px;
  font-size:15px;
  line-height:1.55;
  color:var(--muted);
}

/* =================================================================
   3. Секции
   ================================================================= */

/* --- page-head: хлебные крошки + h1 --------------------------------- */

.crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:14px;
  line-height:1.45;
  color:var(--muted);
}
.crumbs a{ transition:color .2s ease; }
.crumbs a:hover{ color:var(--pink-ink); }
.crumbs__sep{ color:var(--line); }
.crumbs__cur{ color:var(--ink); }

.pagehead{ padding-block:32px 0; }
.pagehead__title{
  margin-top:20px;
  font-size:34px;
  font-weight:400;
  line-height:1.15;
  letter-spacing:-.01em;
}
.pagehead__lead{
  margin-top:16px;
  max-width:720px;
  font-size:17px;
  line-height:1.55;
  color:var(--muted);
}
.pagehead__rule{ margin-top:32px; height:1px; background:var(--line); }

/* --- hero (главная) --------------------------------------------------- */

.hero{
  position:relative;
  background:var(--ink);
  color:var(--white);
  border-radius:0 0 var(--r-band) var(--r-band);
  overflow:hidden;
  padding-block:48px 56px;
}
.hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.hero__bg img{
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(.85);
}
.hero__bg::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(55,55,55,.84);
}
.hero__flare{
  position:absolute;
  inset:0;
  z-index:1;
  background:radial-gradient(circle at 86% 46%, rgba(255,91,0,.34) 0%, rgba(255,26,107,.20) 34%, transparent 60%);
  pointer-events:none;
}
.hero__in{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  align-items:start;
}
.hero__eyebrow{
  font-size:14px;
  line-height:1.45;
  color:var(--muted-on-dark);
}
.hero__title{
  margin-top:16px;
  font-size:34px;
  font-weight:400;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--white);
}
/* фирменный градиент в герое берём осветлённым: на затемнённой фотографии
   насыщенные #FF5B00 / #FF1A6B не добирают контраст */
.hero__title .gt{
  background-image:linear-gradient(90deg,#FFA366 0%,#FF9CBE 100%);
}
.hero__lead{
  margin-top:20px;
  max-width:560px;
  font-size:17px;
  line-height:1.5;
  color:var(--muted-on-dark);
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}
.hero__fine{
  margin-top:20px;
  max-width:520px;
  font-size:14px;
  line-height:1.5;
  color:var(--muted-on-dark);
}

/* --- calc-tabs: виджет предварительного расчёта ------------------------ */

.calc{
  background:var(--white);
  border-radius:var(--r-card);
  overflow:hidden;
}
.calc .tab{ background:var(--surface-2); border-radius:0; }
.calc .tab[aria-selected="true"]{ background:var(--surface); }
.calc__panel{ padding:24px; background:var(--surface); }
.calc__grid{ display:grid; gap:16px; }
.calc__result{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:16px 20px;
  border-radius:var(--r-tab);
  background:var(--white);
}
.calc__sum{
  font-family:var(--f-head);
  font-size:28px;
  font-weight:500;
  line-height:1.1;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.calc__note{ font-size:13px; line-height:1.5; color:var(--muted); }

/* --- promo-strip -------------------------------------------------------- */

.promo{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:28px 28px 28px 32px;
  background:var(--surface);
  border-radius:var(--r-card);
  overflow:hidden;
}
.promo::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background-image:var(--grad);
}
.promo__title{
  font-family:var(--f-head);
  font-size:22px;
  font-weight:500;
  line-height:1.3;
}
.promo__note{
  margin-top:8px;
  max-width:640px;
  font-size:15px;
  line-height:1.5;
  color:var(--muted);
}
.promo .btn{ flex:0 0 auto; align-self:flex-start; }

/* --- intro-two-col ------------------------------------------------------- */

.two{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}
.two__text p{ font-size:16px; line-height:1.65; }
.facts{
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:28px;
  background:var(--surface);
  border-radius:var(--r-card);
}
.facts__row{ display:flex; flex-direction:column; gap:4px; }
.facts__row + .facts__row{ padding-top:20px; border-top:1px solid var(--line); }
.facts__t{
  font-family:var(--f-head);
  font-size:17px;
  font-weight:500;
  line-height:1.35;
}
.facts__d{ font-size:15px; line-height:1.5; color:var(--muted); }

/* --- regions-band --------------------------------------------------------- */

.regions__note{ margin-top:16px; max-width:640px; font-size:16px; line-height:1.55; }
.regions__chips{ margin-top:32px; }

/* --- directions-tabs ------------------------------------------------------- */

.dirs__panel{ padding:28px; }

/* --- services-tiles: неровная сетка плиток ---------------------------------- */

.tiles{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:var(--gutter);
}
.tile{
  position:relative;
  grid-column:span 12;
  display:flex;
  flex-direction:column;
  min-height:260px;
  padding:28px;
  border-radius:var(--r-card);
  background:var(--surface);
  color:var(--ink);
  overflow:hidden;
  transition:filter .2s ease, background-color .2s ease;
}
.tile:hover{ background:var(--line); }
.tile__title{
  position:relative;
  z-index:2;
  font-family:var(--f-head);
  font-size:20px;
  font-weight:500;
  line-height:1.3;
}
.tile__text{
  position:relative;
  z-index:2;
  margin-top:10px;
  max-width:60%;
  font-size:15px;
  line-height:1.5;
  color:var(--muted);
}
.tile__art{
  position:absolute;
  right:-24px;
  bottom:-28px;
  z-index:1;
  width:150px;
  pointer-events:none;
}
.tile__art .art{ width:100%; height:auto; }

.tile--dark{ background:var(--ink-2); color:var(--white); }
.tile--dark:hover{ background:#353535; }
.tile--dark .tile__text{ color:var(--muted-on-dark); }

.tile--grad{
  background-image:var(--grad);
  background-size:200% 100%;
  background-position:100% 0;
  color:var(--white);
  transition:background-position .25s ease;
}
.tile--grad:hover{ background-position:0 0; }
.tile--grad .tile__text{ color:var(--white); font-weight:500; }
.tile--grad .art [fill^="url"]{ fill:#FFFFFF; }
.tile--grad .tile__art{ opacity:.9; }

.tiles__cta{ margin-top:var(--gutter); }

/* --- steps ------------------------------------------------------------------- */

.steps{ display:grid; grid-template-columns:1fr; gap:0; }
.step{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px;
  padding:24px 0;
  border-top:1px solid var(--line);
}
.step:last-child{ border-bottom:1px solid var(--line); }
.step__num{
  font-family:var(--f-head);
  font-size:40px;
  font-weight:500;
  line-height:1;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.step__title{
  font-family:var(--f-head);
  font-size:18px;
  font-weight:500;
  line-height:1.3;
}
.step__text{
  margin-top:8px;
  font-size:15px;
  line-height:1.55;
  color:var(--muted);
}

/* --- advantages ---------------------------------------------------------------- */

.adv{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gutter);
}
.adv__card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:28px;
  background:var(--surface);
  border-radius:var(--r-card);
}
.adv__ic{ color:var(--pink); }
.adv__val{
  font-family:var(--f-head);
  font-size:24px;
  font-weight:500;
  line-height:1.2;
}
.adv__txt{ font-size:15px; line-height:1.5; color:var(--muted); }
.adv__cta{ margin-top:var(--gutter); }

/* --- docs-list ------------------------------------------------------------------ */

.docs{ display:flex; flex-direction:column; gap:12px; }
.docs__note{ margin-top:20px; max-width:720px; font-size:14px; line-height:1.55; color:var(--muted); }
.doc{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  padding:16px 20px;
  background:var(--surface);
  border-radius:var(--r-tab);
}
.doc__main{ flex:1 1 260px; min-width:0; }
.doc__title{
  font-family:var(--f-head);
  font-size:16px;
  font-weight:500;
  line-height:1.4;
}
.doc__meta{ margin-top:4px; font-size:14px; line-height:1.45; color:var(--muted); }
.doc__side{ display:flex; align-items:center; gap:12px; margin-left:auto; }

/* --- чеклисты -------------------------------------------------------------------- */

.checks{ display:grid; grid-template-columns:1fr; gap:16px; }
.check-row{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:start;
}
.check-row__ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px; height:28px;
  border-radius:50%;
  background-image:var(--grad);
  color:var(--white);
  flex:0 0 auto;
}
.check-row__txt{ font-size:16px; line-height:1.55; padding-top:2px; }
.check-row__t{
  display:block;
  font-family:var(--f-head);
  font-size:17px;
  font-weight:500;
  line-height:1.35;
  margin-bottom:4px;
}
.check-row__d{ display:block; font-size:15px; line-height:1.55; color:var(--muted); }
.band-dark .check-row__d{ color:var(--muted-on-dark); }

/* --- полосы-строки (сроки, порядок оплаты) ---------------------------------------- */

.rows{ display:flex; flex-direction:column; gap:12px; }
.row-band{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  padding:20px 24px;
  background:var(--surface);
  border-radius:var(--r-tab);
}
.row-band__t{
  font-family:var(--f-head);
  font-size:17px;
  font-weight:500;
  line-height:1.35;
}
.row-band__d{ font-size:15px; line-height:1.55; color:var(--muted); }
.row-band__n{
  font-family:var(--f-head);
  font-size:15px;
  font-weight:500;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

/* --- honest-scope (две колонки на тёмном) ------------------------------------------ */

.scope{ display:grid; grid-template-columns:1fr; gap:32px; }
.scope__col h3{ color:var(--white); margin-bottom:20px; }
.scope__list{ display:flex; flex-direction:column; gap:14px; }
.scope__item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:start;
  font-size:15px;
  line-height:1.55;
  color:var(--muted-on-dark);
}
.scope__item .ic{ margin-top:3px; }
.scope__item--yes .ic{ color:var(--accent-on-dark); }
.scope__item--no .ic{ color:var(--muted-on-dark); }

/* --- news ------------------------------------------------------------------------- */

.news{ display:grid; grid-template-columns:1fr; gap:var(--gutter); }
.news-card{
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border-radius:var(--r-card);
  overflow:hidden;
  transition:background-color .2s ease;
}
.news-card:hover{ background:var(--line); }
.news-card__media{
  position:relative;
  aspect-ratio:16 / 9;
  background:var(--ink);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.news-card__media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.85); }
.news-card__media .art{ width:110px; height:110px; }
.news-card__body{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:24px;
  flex:1 1 auto;
}
.news-card__title{
  font-family:var(--f-head);
  font-size:20px;
  font-weight:500;
  line-height:1.3;
}
.news-card__lead{ font-size:15px; line-height:1.55; color:var(--muted); }
.news-card__date{
  align-self:flex-start;
  margin-top:auto;
  padding:6px 12px;
  border-radius:var(--r-btn);
  background:var(--white);
  font-size:14px;
  line-height:1.45;
  color:var(--muted);
}
.news-card:hover .news-card__date{ background:var(--surface); }

.news-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:var(--head-gap);
}
.link-more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--f-head);
  font-size:16px;
  color:var(--pink-ink);
  transition:gap .2s ease;
}
.link-more:hover{ gap:12px; }

/* --- пагинация --------------------------------------------------------------------- */

.pager{ display:flex; flex-wrap:wrap; gap:8px; }
.pager__item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px; height:44px;
  padding-inline:12px;
  border-radius:var(--r-btn);
  background:var(--surface);
  font-size:15px;
  color:var(--ink);
  transition:background-color .2s ease;
}
.pager__item:hover{ background:var(--line); }
.pager__item.is-active{
  background-image:var(--grad);
  background-color:transparent;
  color:var(--white);
}

/* --- FAQ-аккордеон ------------------------------------------------------------------ */

.faq{ display:flex; flex-direction:column; }
.faq__group + .faq__group{ margin-top:48px; }
.faq__group-title{
  margin-bottom:8px;
  font-family:var(--f-head);
  font-size:22px;
  font-weight:500;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item:first-of-type{ border-top:1px solid var(--line); }
.faq__q{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  width:100%;
  padding:20px 0;
  text-align:left;
  font-family:var(--f-head);
  font-size:17px;
  font-weight:400;
  line-height:1.4;
  color:var(--ink);
  transition:color .2s ease;
}
.faq__q:hover{ color:var(--pink-ink); }
.faq__sign{ flex:0 0 auto; margin-top:2px; color:var(--ink); }
.faq__q[aria-expanded="true"] .faq__sign-v{ opacity:0; }
.faq__sign-v{ transition:opacity .2s ease; }
.faq__a{ padding:0 0 24px; max-width:820px; }
.faq__a p{ font-size:16px; line-height:1.65; color:var(--muted); }

/* --- consult-form -------------------------------------------------------------------- */

.consult{
  position:relative;
  background:var(--ink);
  color:var(--white);
  border-radius:var(--r-band);
  padding:48px 0;
  overflow:hidden;
}
.consult::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 88% 30%, rgba(255,91,0,.45) 0%, rgba(255,26,107,.3) 45%, transparent 70%);
  pointer-events:none;
}
.consult__in{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
}
.consult__title{
  font-family:var(--f-head);
  font-size:30px;
  font-weight:400;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--white);
}
.consult__note{
  margin-top:16px;
  max-width:460px;
  font-size:16px;
  line-height:1.55;
  color:var(--muted-on-dark);
}
.consult__perks{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:28px;
}
.consult__perk{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:start;
  font-size:15px;
  line-height:1.5;
  color:var(--muted-on-dark);
}
.consult__perk .ic{ color:var(--accent-on-dark); margin-top:2px; }
.consult__form{
  background:rgba(255,255,255,.06);
  border-radius:var(--r-card);
  padding:28px;
}

/* --- таблицы ---------------------------------------------------------------------------- */

.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--r-tab);
  background:var(--surface);
}
.table{
  min-width:620px;
  font-size:15px;
}
.table th,
.table td{
  padding:14px 20px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--line);
}
.table thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:var(--surface);
  font-family:var(--f-head);
  font-weight:500;
  color:var(--ink);
  white-space:nowrap;
}
.table tbody tr:last-child td{ border-bottom:0; }
.table td:first-child{ font-family:var(--f-head); font-weight:500; white-space:nowrap; }
.table__note{ margin-top:16px; font-size:14px; line-height:1.55; color:var(--muted); }

/* --- две крупные плитки (компфонды) -------------------------------------------------------- */

.duo{ display:grid; grid-template-columns:1fr; gap:var(--gutter); }
.duo__card{
  position:relative;
  padding:32px;
  border-radius:var(--r-card);
  background:var(--surface);
  overflow:hidden;
  min-height:320px;
}
.duo__card--dark{ background:var(--ink-2); color:var(--white); }
/* глобальное h1..h4{color:var(--ink)} бьёт по h3 внутри тёмной карточки — возвращаем белый */
.duo__card--dark .duo__title{ color:var(--white); }
.duo__card--dark .duo__text{ color:var(--muted-on-dark); }
.duo__title{
  position:relative;
  z-index:2;
  font-family:var(--f-head);
  font-size:22px;
  font-weight:500;
  line-height:1.3;
}
.duo__text{
  position:relative;
  z-index:2;
  margin-top:14px;
  max-width:78%;
  font-size:15px;
  line-height:1.6;
  color:var(--muted);
}
.duo__art{
  position:absolute;
  right:-30px;
  bottom:-34px;
  z-index:1;
  width:170px;
  pointer-events:none;
}

/* --- врезка с левой градиентной чертой ------------------------------------------------------ */

.callout{
  position:relative;
  padding:28px 28px 28px 32px;
  background:var(--surface);
  border-radius:var(--r-card);
  overflow:hidden;
}
.callout::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background-image:var(--grad);
}
.callout p{ font-size:16px; line-height:1.65; }

/* --- карточки контактов ---------------------------------------------------------------------- */

.contacts{ display:grid; grid-template-columns:1fr; gap:var(--gutter); }
.contact-card{
  position:relative;
  min-height:220px;
  padding:28px;
  border-radius:var(--r-card);
  background:var(--surface);
  overflow:hidden;
}
.contact-card__label{
  position:relative; z-index:2;
  font-size:14px; line-height:1.45;
  color:var(--muted);
}
.contact-card__val{
  position:relative; z-index:2;
  display:block;
  margin-top:8px;
  max-width:70%;
  font-family:var(--f-head);
  font-size:20px;
  font-weight:500;
  line-height:1.35;
  color:var(--ink);
}
a.contact-card__val:hover{ color:var(--pink-ink); }
.contact-card__art{
  position:absolute;
  right:-22px; bottom:-26px;
  z-index:1;
  width:130px;
  pointer-events:none;
}

/* --- карта ----------------------------------------------------------------------------------- */

.map{
  position:relative;
  aspect-ratio:16 / 9;
  border-radius:var(--r-card);
  overflow:hidden;
  background:var(--surface);
}
.map iframe{ width:100%; height:100%; border:0; display:block; }
.map__link{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; color:var(--pink-ink); }
.map__link:hover{ text-decoration:underline; text-underline-offset:3px; }

/* --- реквизиты -------------------------------------------------------------------------------- */

.req-card{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:28px;
  background:var(--surface);
  border-radius:var(--r-card);
}
.req-row{ display:flex; flex-direction:column; gap:2px; }
.req-row__k{ font-size:14px; color:var(--muted); }
.req-row__v{ font-family:var(--f-head); font-size:16px; font-weight:500; line-height:1.4; }

/* --- карта сайта -------------------------------------------------------------------------------- */

.smap{ display:grid; grid-template-columns:1fr; gap:32px var(--gutter); }
.smap__col h2{ font-size:20px; font-weight:500; margin-bottom:8px; }
.smap__list li{ border-bottom:1px solid var(--line); }
.smap__list a{
  display:block;
  padding:12px 0;
  font-size:16px;
  line-height:1.45;
  transition:color .2s ease;
}
.smap__list a:hover{ color:var(--pink-ink); }

/* --- 404 ---------------------------------------------------------------------------------------- */

.err{
  position:relative;
  background:var(--ink);
  color:var(--white);
  border-radius:0 0 var(--r-band) var(--r-band);
  overflow:hidden;
  padding-block:64px 72px;
}
.err__flare{
  position:absolute; inset:0;
  background:radial-gradient(circle at 80% 45%, rgba(255,91,0,.5) 0%, rgba(255,26,107,.35) 45%, transparent 72%);
  pointer-events:none;
}
.err__in{ position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:32px; align-items:center; }
.err__code{
  font-family:var(--f-head);
  font-size:96px;
  font-weight:500;
  line-height:1;
  letter-spacing:-.02em;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.err__title{ margin-top:16px; font-size:28px; font-weight:400; color:var(--white); }
.err__note{ margin-top:12px; max-width:520px; font-size:17px; line-height:1.5; color:var(--muted-on-dark); }
.err__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.err__art{ display:none; }

/* --- статья ------------------------------------------------------------------------------------- */

.article{ max-width:820px; }
.article__date{ font-size:15px; line-height:1.45; color:var(--muted); margin-top:20px; }
.article__title{ margin-top:12px; font-size:34px; font-weight:400; line-height:1.15; letter-spacing:-.01em; }
.article__hero{
  margin-top:32px;
  border-radius:var(--r-card);
  overflow:hidden;
  aspect-ratio:16 / 9;
  background:var(--ink);
}
.article__hero img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.85); }

.prose{ margin-top:32px; }
.prose p{ font-size:17px; line-height:1.7; }
.prose p + p{ margin-top:20px; }
.prose h2{
  margin-top:40px;
  font-size:28px;
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.01em;
}
.prose h2 + p{ margin-top:16px; }
.prose ul{ margin-top:20px; display:flex; flex-direction:column; gap:12px; }
.prose ul li{
  position:relative;
  padding-left:24px;
  font-size:17px;
  line-height:1.7;
}
.prose ul li::before{
  content:"";
  position:absolute;
  left:0; top:12px;
  width:10px; height:10px;
  border-radius:3px;
  background-image:var(--grad);
}
.prose blockquote{
  position:relative;
  margin-top:32px;
  padding:4px 0 4px 24px;
  font-size:19px;
  line-height:1.55;
  color:var(--ink);
}
.prose blockquote::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  border-radius:2px;
  background-image:var(--grad);
}
.prose__source{ margin-top:32px; font-size:15px; color:var(--muted); }

/* --- «не нашли ответ» ------------------------------------------------------------------------------ */

.notfound-band{
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:28px 32px;
  background:var(--surface);
  border-radius:var(--r-card);
}
.notfound-band__t{ font-family:var(--f-head); font-size:22px; font-weight:500; line-height:1.3; }
.notfound-band__d{ margin-top:8px; font-size:15px; line-height:1.55; color:var(--muted); }
.notfound-band__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.notfound-band__phone{
  font-family:var(--f-head);
  font-size:22px;
  font-weight:600;
  color:var(--ink);
}
.notfound-band__phone:hover{ color:var(--pink-ink); }

/* --- появление при скролле ------------------------------------------------------------------------- */

.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s ease, transform .5s ease;
}
.reveal.is-in{ opacity:1; transform:none; }

/* =================================================================
   4. Медиазапросы, доступность, печать
   ================================================================= */

/* --- ≥600px ------------------------------------------------------- */

@media (min-width:600px){
  .checks{ grid-template-columns:repeat(2,1fr); }
  .row-band{ grid-template-columns:auto 1fr; gap:8px 20px; align-items:baseline; }
  .row-band__d{ grid-column:2; }
  .promo{ flex-direction:row; align-items:center; justify-content:space-between; gap:32px; }
  .promo .btn{ align-self:center; }
  .notfound-band{ flex-direction:row; align-items:center; justify-content:space-between; gap:32px; }
  .contacts{ grid-template-columns:repeat(2,1fr); }
  .smap{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:repeat(2,1fr); }
  .footer__top{ flex-direction:row; align-items:center; justify-content:space-between; }
  .footer__bottom{ flex-direction:row; align-items:flex-start; justify-content:space-between; gap:32px; }
  .form__grid{ grid-template-columns:repeat(2,1fr); }
  .news{ grid-template-columns:repeat(2,1fr); }
  .adv{ grid-template-columns:repeat(2,1fr); }
  .err__code{ font-size:120px; }
}

/* --- ≥768px (планшет) ---------------------------------------------- */

@media (min-width:768px){
  :root{
    --pad:32px;
    --sec:64px;
  }

  h1,.h1{ font-size:44px; }
  h2,.h2{ font-size:32px; }
  .lead{ font-size:18px; }

  .hero__title{ font-size:44px; }
  .hero__lead{ font-size:19px; }
  .pagehead__title{ font-size:40px; }
  .article__title{ font-size:40px; }
  .cta__title{ font-size:36px; }
  .consult__title{ font-size:34px; }
  .modal__title{ font-size:32px; }
  .err__code{ font-size:140px; }
  .err__title{ font-size:32px; }

  .step{ grid-template-columns:auto 1fr; gap:28px; padding:28px 0; }
  .step__num{ font-size:48px; }

  .duo{ grid-template-columns:repeat(2,1fr); }
  .scope{ grid-template-columns:repeat(2,1fr); gap:48px; }
  .two{ grid-template-columns:1.15fr .85fr; gap:48px; }
  .tiles{ gap:var(--gutter); }
  .tile{ grid-column:span 6; }
  .calc__grid{ grid-template-columns:repeat(2,1fr); }
  .calc__result,
  .calc__grid > .calc__full{ grid-column:1 / -1; }
  .contacts{ grid-template-columns:repeat(3,1fr); }
  .consult__in{ grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start; }
  .consult{ padding:56px 0; }
  .news{ grid-template-columns:repeat(3,1fr); }
  .adv{ grid-template-columns:repeat(2,1fr); }
  .smap{ grid-template-columns:repeat(2,1fr); }

  .cta__in{ flex-direction:row; align-items:center; justify-content:space-between; }
  .cta__art{ display:block; flex:0 0 auto; }
  .cta__text{ max-width:620px; }

  .err__in{ grid-template-columns:1.2fr .8fr; }
  .err__art{ display:block; }
  .err__art .art{ width:220px; height:220px; margin-left:auto; }

  .hero{ padding-block:64px 72px; }
  .hero__in{ grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }

  .facts{ padding:32px; }
  .tile{ min-height:280px; padding:32px; }
  .tile__art{ width:170px; }
}

/* --- ≥900px --------------------------------------------------------- */

@media (min-width:900px){
  .footer__grid{ grid-template-columns:repeat(3,1fr); }
  .adv{ grid-template-columns:repeat(2,1fr); }
  .smap{ grid-template-columns:repeat(4,1fr); }
  .tiles .tile--c4{ grid-column:span 4; }
  .tiles .tile--c8{ grid-column:span 8; }
  .tile--c8 .tile__text{ max-width:52%; }
  .tile--c8 .tile__art{ width:200px; }
}

/* --- ≥1024px (десктоп: три яруса шапки) ------------------------------- */

@media (min-width:1024px){
  :root{
    --sec:96px;
    --pad:20px;
  }

  h1,.h1{ font-size:56px; }
  h2,.h2{ font-size:40px; }
  h3,.h3{ font-size:22px; }
  .lead{ font-size:20px; }

  .hero__title{ font-size:56px; }
  .hero__lead{ font-size:20px; }
  .pagehead__title{ font-size:44px; }
  .article__title{ font-size:44px; }
  .cta__title{ font-size:40px; }
  .consult__title{ font-size:38px; }

  .util{ display:block; }
  .nav{ display:block; }
  .bar__in{ height:88px; }
  .bar__right{ display:flex; }
  .bar__mob{ display:none; }
  .logo__mark svg{ width:40px; height:40px; }
  .logo__name{ font-size:20px; }
  .logo__sub{ display:block; }

  body.is-scrolled .bar__in{ height:64px; }
  body.is-scrolled .logo__mark svg{ width:36px; height:36px; }

  .footer{ padding-block:64px 48px; }
  .footer__grid{ grid-template-columns:1.15fr repeat(4, 1fr); gap:40px var(--gutter); }
  .adv{ grid-template-columns:repeat(2,1fr); }
  .adv__card{ min-height:200px; }
  .cta{ padding-block:80px 104px; }
  .cta__art .art{ width:260px; height:260px; }
  .consult{ padding:64px 0; }
  .consult__form{ padding:32px; }
  .hero{ padding-block:80px 96px; min-height:600px; display:flex; align-items:center; }
  .hero > .container{ width:100%; }
  .calc__panel{ padding:28px; }
  .duo__card{ min-height:360px; padding:36px; }
  .duo__art{ width:200px; }
  .tile{ min-height:300px; }
}

/* --- ≥1280px --------------------------------------------------------- */

@media (min-width:1280px){
  .tile__art{ width:190px; }
  .tile--c8 .tile__art{ width:220px; }
}

/* --- десктопные ярусы скрыты на узких экранах -------------------------- */

@media (max-width:1023.98px){
  [data-desktop-only]{ display:none !important; }
}

/* --- предпочтение уменьшенного движения --------------------------------- */

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* --- усиленная видимость фокуса ------------------------------------------ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--pink);
  outline-offset:3px;
}

.band-dark a:focus-visible,
.hero a:focus-visible,
.cta a:focus-visible,
.consult a:focus-visible,
.err a:focus-visible,
.band-dark button:focus-visible,
.hero button:focus-visible,
.cta button:focus-visible,
.consult button:focus-visible,
.err button:focus-visible{
  outline-color:#FF7A4D;
}

/* --- печать ---------------------------------------------------------------- */

@media print{
  .hdr,
  .drawer,
  .overlay,
  .modal,
  .cta,
  .consult,
  .footer__soc,
  .footer__soc-sm,
  .skip,
  .btn,
  .map{
    display:none !important;
  }

  body{
    background:#FFFFFF;
    color:#000000;
    font-size:12pt;
  }

  .band-dark,
  .hero,
  .err{
    background:#FFFFFF !important;
    color:#000000 !important;
    border-radius:0 !important;
    padding-block:16pt !important;
  }

  .band-dark h1,.band-dark h2,.band-dark h3,
  .hero h1,.hero__lead,.hero__eyebrow,
  .err__title,.err__note{ color:#000000 !important; }

  .gt,
  .step__num,
  .faq__group-title,
  .calc__sum,
  .err__code{
    background:none !important;
    color:#000000 !important;
    -webkit-text-fill-color:#000000 !important;
  }

  .hero__bg,
  .hero__flare,
  .glow::before,
  .tile__art,
  .duo__art,
  .contact-card__art{ display:none !important; }

  .section{ padding-block:16pt; }
  .tile,.adv__card,.doc,.row-band,.facts,.callout,.duo__card,.contact-card,.req-card{
    background:#FFFFFF !important;
    color:#000000 !important;
    border:1pt solid #999999;
    min-height:0 !important;
  }

  .faq__a[hidden]{ display:block !important; }

  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555555; }

  .table-wrap{ overflow:visible; }
  .table{ min-width:0; }
}

/* =================================================================
   5. Дополнения секций: утилиты ритма и блоки страниц
   ================================================================= */

.mt-16{ margin-top:16px; }
.mt-32{ margin-top:32px; }

/* абзацы двухколоночного текста */
.two__text p + p{ margin-top:16px; }

/* ссылка «полный список» под аккордеоном */
.faq__more{ margin-top:24px; }
.faq__more a{ color:var(--pink-ink); text-decoration:underline; text-underline-offset:3px; }
.faq__more a:hover{ text-decoration-thickness:2px; }

/* заголовок над таблицей */
.table-head{
  margin-top:40px;
  font-family:var(--f-head);
  font-size:20px;
  font-weight:500;
  line-height:1.3;
}
.section__head + .table-head{ margin-top:0; }
.table__link{ color:var(--pink-ink); text-decoration:underline; text-underline-offset:3px; }
.table__link:hover{ text-decoration-thickness:2px; }

/* лид внутри панели вкладки */
.req-lead{
  max-width:720px;
  font-size:16px;
  line-height:1.6;
  color:var(--muted);
}

/* врезка с предметным объектом */
.callout--art{ padding-right:28px; }
.callout__art{ display:none; }
.callout--art p{ position:relative; z-index:1; }

/* нумерованный список комплекта документов */
.numlist{ display:flex; flex-direction:column; }
.numlist__item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:baseline;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.numlist__item:last-child{ border-bottom:0; padding-bottom:0; }
.numlist__item:first-child{ padding-top:0; }
.numlist__n{
  font-family:var(--f-head);
  font-size:15px;
  font-weight:500;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.numlist__t{ font-size:16px; line-height:1.55; }

/* тема в карточке новости */
.news-card__topic{
  align-self:flex-start;
  font-size:13px;
  line-height:1.4;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--pink-ink);
}

/* фото в блоке «О компании» */
.about__media{ display:flex; flex-direction:column; gap:12px; }
.about__media img{
  width:100%;
  height:auto;
  border-radius:var(--r-card);
  filter:grayscale(.85);
}
.about__cap{ font-size:14px; line-height:1.5; color:var(--muted); }

/* лид статьи */
.prose__lead{
  font-size:19px;
  line-height:1.6;
  color:var(--muted);
}
.prose__lead + h2{ margin-top:32px; }
.prose__source a{ color:var(--pink-ink); text-decoration:underline; text-underline-offset:3px; }

/* виджет расчёта на тёмном первом экране */
.hero__widget{ position:relative; z-index:2; }

@media (min-width:768px){
  .callout--art{
    position:relative;
    padding-right:180px;
    min-height:170px;
    display:flex;
    align-items:center;
  }
  .callout__art{
    display:block;
    position:absolute;
    right:-18px;
    bottom:-24px;
    width:150px;
    z-index:0;
    pointer-events:none;
  }
  .two__col{ align-self:start; }
}

/* длинные термины в заголовках не должны распирать колонку */
h1,h2,h3,h4,.h1,.h2,.h3,
.tile__title,.duo__title,.faq__q,.row-band__t{ overflow-wrap:break-word; }

/* виджет расчёта живёт на светлой панели даже внутри тёмного первого экрана */
.calc{ color:var(--ink); }

/* засвет героя концентрируем справа, за виджетом: заголовок остаётся читаемым */
.hero__flare{
  background:radial-gradient(circle at 88% 48%, rgba(255,91,0,.32) 0%, rgba(255,26,107,.18) 32%, transparent 56%);
}

/* вкладки на узких экранах: три подписи должны помещаться в полосу */
@media (max-width:599.98px){
  .tab{
    padding-inline:8px;
    font-size:13px;
    line-height:1.2;
    height:56px;
    text-align:center;
  }
}