/* =================================================================
   webmaster30.ru — style.css
   1. Токены, сброс, типографика, контейнер, кнопки, формы
   ================================================================= */

:root{
  /* Поверхности */
  --sand:        #ECE9E2;
  --sand-light:  #F4F2ED;
  --white:       #FFFFFF;
  --graphite:    #212121;
  --graphite-hi: #3A3733;

  /* Текст */
  --ink:         #1D1D1B;
  --ink-soft:    #6B6862;
  --on-dark:     #FFFFFF;
  --on-dark-soft: rgba(255,255,255,.72);
  --on-dark-mute: rgba(255,255,255,.6);

  /* Линии и бейджи */
  --line:        #DCD8CE;
  --pill-bg:     #E4DFD4;
  --line-dark:   rgba(255,255,255,.18);
  --line-dark-2: rgba(255,255,255,.35);

  /* Акценты направлений */
  /* Затемнены до 4.5:1 на светлом песке #F4F2ED и на белом:
     этими цветами красятся номера шагов и цифра «30» в логотипе. */
  --c-dev:     #586C7D;
  --c-promo:   #554C49;
  --c-support: #815F5A;
  --c-extra:   #616B5B;
  --accent:    #586C7D;

  /* Типографика */
  --font-display: 'Prata', 'Times New Roman', Georgia, serif;
  --font-text:    'Manrope', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Consolas', 'SFMono-Regular', ui-monospace, monospace;

  /* Сетка */
  --container:    1400px;
  --container-nr: 920px;
  --pad:          16px;
  --gap:          16px;
  --radius:       8px;
  --radius-pill:  999px;
  --section-y:    56px;

  /* Движение */
  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (min-width: 900px){
  :root{ --pad: 24px; --section-y: 88px; }
}
@media (min-width: 1280px){
  :root{ --section-y: 96px; }
}

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

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

/* Критично: атрибут hidden всегда сильнее любого класса */
[hidden]{ display: none !important; }

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

body{
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip, а не hidden: hidden на body делает вьюпорт скролл-контейнером
     и ломает position: sticky у шапки */
  overflow-x: clip;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main{ flex: 1 0 auto; }

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,video,iframe{ display: block; max-width: 100%; }
img{ height: auto; }

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

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

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

hr{
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

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

.skip-link{
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  background: var(--graphite);
  color: var(--on-dark);
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 14px;
  transition: top .2s var(--ease);
}
.skip-link:focus{ top: 12px; }

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

h1,.h1{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  /* «Конфиденциальности» на 320px шире контейнера и утаскивало за собой
     горизонтальную прокрутку всей страницы. */
  overflow-wrap: break-word;
  hyphens: auto;
}

h2,.h2{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -.005em;
}

h3,.h3{
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.4;
}

p{ font-size: 1rem; line-height: 1.62; }

.lead{
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
@media (min-width: 900px){
  .lead{ font-size: 1.25rem; }
}

.text-soft{ color: var(--ink-soft); }
.text-serif{ font-family: var(--font-display); font-weight: 400; }

/* Сообщение о подмене запроса (например, неизвестная рубрика блога) */
.blognote{
  margin: 0 0 24px;
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--white);
  color: var(--ink);
  font-size: .9375rem;
  line-height: 1.55;
}

/* Моноширинная подпись — фирменная деталь макета */
.mono{
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .06em;
}

.mono-label{
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: .75rem;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ink);
}
@media (min-width: 900px){
  .mono-label{ font-size: .8125rem; }
}

.mono-label--light{
  color: var(--on-dark-mute);
  border-bottom-color: var(--line-dark-2);
}
.mono-label--plain{
  border-bottom: 0;
  padding-bottom: 0;
  color: var(--ink-soft);
}
.mono-label--accent{
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Название карточки капслоком — как в карточке товара донора */
.card-title{
  font-family: var(--font-text);
  font-weight: 700;
  font-size: .875rem;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.card-sub{
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Бейдж-пилюля */
.badge{
  display: inline-block;
  background: var(--pill-bg);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.badge--light{
  background: rgba(255,255,255,.92);
  color: var(--ink);
}

/* ------------------------ Контейнер ---------------------- */

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

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

.section{
  padding-block: var(--section-y);
}
.section--sand{  background: var(--sand); }
.section--light{ background: var(--sand-light); }
.section--white{ background: var(--white); }
.section--dark{  background: var(--graphite); color: var(--on-dark); }
.section--tight{ padding-block: calc(var(--section-y) * .6); }
.section--flush-top{ padding-top: 0; }

/* Шапка секции: ярлык + заголовок */
.section__head{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
}
.section__head .h2,
.section__head h2{ max-width: 22ch; }
.section__head-row{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}
.section__intro{
  max-width: 62ch;
  color: var(--ink-soft);
}

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

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: .8125rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: center;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .1s var(--ease);
}
@media (min-width: 900px){
  .btn{ height: 48px; padding: 0 28px; }
}
.btn:active{ transform: scale(.98); }

.btn--primary{
  background: var(--ink);
  color: var(--on-dark);
  border-color: var(--ink);
}
.btn--primary:hover{ background: var(--graphite-hi); border-color: var(--graphite-hi); }

.btn--secondary{
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--secondary:hover{ background: var(--ink); color: var(--on-dark); }

.btn--onphoto{
  background: transparent;
  color: var(--on-dark);
  border-color: rgba(255,255,255,.9);
}
.btn--onphoto:hover{ background: rgba(255,255,255,.95); color: var(--ink); }

.btn--light{
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}
.btn--light:hover{ background: var(--pill-bg); border-color: var(--pill-bg); }

.btn--sm{ height: 40px; padding: 0 20px; font-size: .75rem; }
@media (min-width: 900px){
  .btn--sm{ height: 40px; }
}

.btn--tile{
  height: 32px;
  padding: 0 18px;
  font-size: .6875rem;
  letter-spacing: .1em;
  background: rgba(255,255,255,.9);
  color: var(--ink);
  border-color: transparent;
}

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

/* Текстовая ссылка-кнопка: моно-капслок с подчёркиванием */
.link-mono{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.link-mono:hover{ color: var(--accent); border-bottom-color: var(--accent); }
.link-mono--light{ color: var(--on-dark); border-bottom-color: var(--line-dark-2); }
.link-mono--light:hover{ color: var(--on-dark); border-bottom-color: var(--on-dark); }

/* Чипы */
.chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip{
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: .875rem;
  color: var(--ink);
  white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.chip--sm{ height: 28px; padding: 0 12px; font-size: .8125rem; color: var(--ink-soft); }
.chip--button{ cursor: pointer; }
.chip--button:hover{ border-color: var(--ink); }
.chip.is-active,
.chip[aria-pressed="true"]{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-dark);
}

/* --------------------------- Формы ------------------------ */

.form{ display: grid; gap: 16px; }

.field{ display: flex; flex-direction: column; gap: 8px; }

.field__label{
  font-family: var(--font-mono);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-soft);
}

.input,
.textarea{
  width: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 16px;
  height: 48px;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .2s var(--ease);
}
.textarea{
  height: auto;
  min-height: 128px;
  padding: 14px 16px;
  line-height: 1.55;
  resize: vertical;
}
.input::placeholder,
.textarea::placeholder{ color: #A5A199; }
.input:hover,
.textarea:hover{ border-color: #C7C2B6; }
.input:focus,
.textarea:focus{ outline: none; border-color: var(--ink); }
.input[aria-invalid="true"],
.textarea[aria-invalid="true"]{ border-color: #8C6C67; }

.field__error{
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  color: #8C6C67;
}

.checkbox{
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--ink-soft);
  cursor: pointer;
}
.checkbox input{
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--ink);
  cursor: pointer;
}
.checkbox a{ color: var(--ink); border-bottom: 1px solid var(--line); }
.checkbox a:hover{ border-bottom-color: var(--ink); }

.form__success{
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.form__success svg{ flex: 0 0 auto; color: var(--accent); margin-top: 2px; }

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

/* ------------------- Строка-объявление ------------------- */

.announce{
  background: var(--graphite);
  color: var(--on-dark-soft);
  height: 36px;
  display: flex;
  align-items: center;
}
.announce .container{
  display: flex;
  align-items: center;
  justify-content: center;
}
.announce__text{
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255,255,255,.78);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.announce__text--short{ display: none; }

@media (max-width: 600px){
  .announce__text--full{ display: none; }
  .announce__text--short{ display: block; letter-spacing: .1em; }
}

/* ------------------ Плавающая шапка-пилюля ---------------- */

.topbar{
  position: sticky;
  top: 8px;
  z-index: 90;
  padding-inline: 16px;
  margin-top: 8px;
}

.page--home .topbar{
  /* На главной шапка лежит поверх фото первого экрана */
  margin-bottom: -72px;
}

.topbar__pill{
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  padding: 0 10px 0 20px;
  border-radius: 28px;
  background: var(--white);
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}

.page--home .topbar__pill{
  background: var(--white);
}

.topbar.is-stuck .topbar__pill,
.page--home .topbar.is-stuck .topbar__pill{
  background: var(--white);
  box-shadow: 0 1px 0 var(--line);
}

/* Логотип-вордмарк */
.logo{
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.logo__num{ color: var(--accent); }
.logo--footer{
  color: var(--on-dark);
  font-size: 1.625rem;
  display: inline-block;
  margin-bottom: 12px;
}
.logo--footer .logo__num{ color: var(--on-dark); }

/* Центральное меню */
.mainnav{
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.mainnav__list{
  display: flex;
  align-items: center;
  gap: 28px;
}
.mainnav__link{
  position: relative;
  display: inline-block;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: .8125rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  color: var(--ink);
  padding-block: 6px;
}
.mainnav__link::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.mainnav__link:hover::after{ opacity: .6; }
.mainnav__link.is-active::after{ opacity: 1; }

/* Правая зона */
.topbar__side{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.topbar__phone{
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.topbar__phone:hover{ border-bottom-color: var(--ink); }

/* Бургер */
.burger{
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  color: var(--ink);
}
.burger__close{ display: none; }
.burger[aria-expanded="true"] .burger__open{ display: none; }
.burger[aria-expanded="true"] .burger__close{ display: block; }

/* ------------------- Мобильная панель --------------------- */

.mobilemenu{
  position: fixed;
  inset: 100px 0 0;
  z-index: 80;
  background: var(--sand);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobilemenu__inner{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: 100%;
  padding-block: 28px 40px;
}
.mobilemenu__list{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobilemenu__link{
  display: block;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.3;
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.mobilemenu__link.is-active{ color: var(--accent); }

.mobilemenu__foot{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.mobilemenu__phone{
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  margin-top: 6px;
}
.mobilemenu__mail{
  font-size: 1rem;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.mobilemenu__hours{
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--ink-soft);
}
.mobilemenu__cta{ margin-top: 10px; }

/* ---------------------- Футер ----------------------------- */

.footer{
  background: var(--graphite);
  color: var(--on-dark);
  padding-top: 72px;
  padding-bottom: 32px;
  margin-top: auto;
}

.footer__top{
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.footer__tagline{
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--on-dark-soft);
  max-width: 32ch;
  margin-bottom: 28px;
}

.footer__brand .mono-label{ margin-bottom: 16px; }

.footer__phone{
  display: block;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--on-dark);
  margin-bottom: 6px;
}
.footer__phone:hover{ text-decoration: underline; text-underline-offset: 4px; }

.footer__mail{
  display: inline-block;
  font-size: .9375rem;
  color: var(--on-dark-soft);
  border-bottom: 1px solid var(--line-dark-2);
}
.footer__mail:hover{ color: var(--on-dark); border-bottom-color: var(--on-dark); }

.footer__hours{
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .06em;
  color: var(--on-dark-soft);
  margin-top: 10px;
}

.footer__cta{ margin-top: 24px; }

.footer__col .mono-label{ margin-bottom: 18px; }

.footer__list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__list a{
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--on-dark-soft);
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.footer__list a:hover{ color: var(--on-dark); border-bottom-color: var(--on-dark); }

.footer__social{ margin-top: 48px; }
.footer__social .mono-label{ margin-bottom: 16px; display: block; width: fit-content; }

.socials{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.socials__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-dark-2);
  border-radius: 50%;
  color: var(--on-dark);
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.socials__link:hover{
  background: var(--white);
  color: var(--graphite);
  border-color: var(--white);
}

.footer__bottom{
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line-dark);
}
.footer__copy{
  font-size: .8125rem;
  color: var(--on-dark-soft);
}
.footer__legal{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.footer__legal a{
  font-size: .8125rem;
  color: var(--on-dark-soft);
  border-bottom: 1px solid transparent;
}
.footer__legal a:hover{ color: var(--on-dark); border-bottom-color: var(--on-dark); }

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

/* ------------------- Сетки общего назначения -------------- */

.grid{ display: grid; gap: var(--gap); }
.grid--2{ grid-template-columns: 1fr; }
.grid--3{ grid-template-columns: 1fr; }
.grid--4{ grid-template-columns: 1fr; }

/* Появление при скролле.
   Прятать блок можно только тогда, когда его точно есть кому показать:
   класс .js ставит инлайновый скрипт в <head>, а если main.js не загрузился,
   его onerror этот класс снимает — контент остаётся видимым без анимации. */
.reveal{
  transition: opacity .32s ease-out, transform .32s ease-out;
}
.js .reveal{
  opacity: 0;
  transform: translateY(12px);
}
.reveal.is-visible{ opacity: 1; transform: none; }

/* ------------------------ hero-full ----------------------- */

.hero{
  position: relative;
  min-height: min(88vh, 720px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--graphite);
}
.hero__media{
  position: absolute;
  inset: 0;
}
.hero__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__scrim{
  position: absolute;
  inset: 0;
  /* Плотнее в нижней трети, где стоят надзаголовок, H1 и лид: на 375px кадр
     обрезается по центру и под текст попадает самое светлое место фотографии. */
  background: linear-gradient(to top, rgba(15,15,14,.88) 0%, rgba(15,15,14,.68) 42%, rgba(15,15,14,.22) 100%);
}
.hero__inner{
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: 48px 56px;
  color: var(--on-dark);
}
@media (min-width: 900px){
  .hero__inner{ padding-block: 64px 72px; }
}
.hero__label{
  color: var(--on-dark);
  border-bottom-color: rgba(255,255,255,.7);
  margin-bottom: 24px;
}
.hero h1{
  color: var(--on-dark);
  max-width: 16ch;
  margin-bottom: 20px;
}
.hero__lead{
  font-size: 1.0625rem;
  line-height: 1.55;
  color: rgba(255,255,255,.94);
  max-width: 46ch;
  margin-bottom: 32px;
}
@media (min-width: 900px){
  .hero__lead{ font-size: 1.1875rem; }
}
.hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ------------------------ page-hero ----------------------- */

.pagehero{
  background: var(--sand);
  padding-block: 40px 48px;
}
@media (min-width: 900px){
  .pagehero{ padding-block: 56px 64px; }
}
.pagehero__inner{
  border-left: 0;
  padding-left: 0;
}
.pagehero--accent .pagehero__inner{
  border-left: 4px solid var(--accent);
  padding-left: 20px;
}
.pagehero h1{ max-width: 20ch; margin-bottom: 18px; }
.pagehero__lead{
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
}
@media (min-width: 900px){
  .pagehero__lead{ font-size: 1.1875rem; }
}

.crumbs{ margin-bottom: 22px; }
.crumbs__list{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-soft);
}
.crumbs__item{ display: flex; align-items: center; gap: 8px; }
.crumbs a{ border-bottom: 1px solid transparent; }
.crumbs a:hover{ color: var(--ink); border-bottom-color: var(--ink); }
.crumbs__sep{ color: var(--line); }

/* -------------------- service-tiles-4 --------------------- */

.tiles{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
.tile-wrap{ display: flex; flex-direction: column; gap: 12px; }

.tile{
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--tile-color, var(--accent));
  padding: 20px;
}
.tile__media{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tile__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  opacity: .55;
  transition: transform .4s var(--ease);
}
.tile:hover .tile__media img{ transform: scale(1.03); }
.tile__btn{
  position: relative;
  z-index: 2;
  transition: background-color .22s var(--ease);
}
.tile:hover .tile__btn{ background: #FFFFFF; }
.tile__chips{ margin-top: 2px; }

/* --------------------- promo-tiles-3 ---------------------- */

.promos{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
.promo{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 340px;
  padding: 40px 24px 24px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--graphite);
  color: var(--on-dark);
}
@media (min-width: 900px){
  .promo{ min-height: 420px; }
}
.promo__media{ position: absolute; inset: 0; }
.promo__media img{ width: 100%; height: 100%; object-fit: cover; }
.promo__scrim{
  position: absolute; inset: 0;
  /* Второй, радиальный слой уплотняет затемнение ровно там, где лежит текст:
     фотографии плиток светлые, одного линейного градиента на 4.5:1 не хватало. */
  background:
    radial-gradient(88% 56% at 50% 46%, rgba(15,15,14,.40) 0%, rgba(15,15,14,0) 100%),
    linear-gradient(to top, rgba(15,15,14,.74) 0%, rgba(15,15,14,.54) 55%, rgba(15,15,14,.34) 100%);
}
.promo__body{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: auto;
  margin-top: auto;
}
.promo__title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  line-height: 1.2;
  color: var(--on-dark);
  max-width: 14ch;
}
.promo__text{
  font-size: .9375rem;
  color: var(--on-dark);
  max-width: 30ch;
}
.promo__actions{
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 24px;
}

/* ------------------------ works-grid ---------------------- */

.card{
  background: var(--white);
  border-radius: var(--radius);
  border: 0;
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-link{
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
}
.card-link__media{
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--pill-bg);
}
.card-link__media img{
  width: 100%; height: 100%;
  object-fit: cover;
}
.card-link__badge{
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
}
.card-link__body{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  flex: 1 1 auto;
}
@media (min-width: 1280px){
  .card-link__body{ padding: 28px; }
}
.card-link__meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.card-link__title{
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.4;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
  transition: border-color .2s var(--ease);
}
.card-link:hover .card-link__title{ border-bottom-color: var(--ink); }
.card-link__desc{
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.section__foot{
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* ---------------------- value-cards-3 --------------------- */

.values{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
.value{
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (min-width: 1280px){
  .value{ padding: 28px; }
}
.value .mono-label{ align-self: flex-start; }
.value p{
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ------------------------ terms-band ---------------------- */

.terms{
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.term{ display: flex; flex-direction: column; gap: 12px; }
.term .mono-label{ align-self: flex-start; }
.term p{
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 32ch;
}

/* ------------------------- cta-band ----------------------- */

.cta{
  background: var(--graphite);
  color: var(--on-dark);
  padding-block: var(--section-y);
}
.cta__inner{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.cta h2{ color: var(--on-dark); max-width: 18ch; }
.cta__text{
  font-size: 1rem;
  line-height: 1.6;
  color: var(--on-dark-soft);
  max-width: 52ch;
}
.cta__actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.cta__phone{
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--on-dark);
  white-space: nowrap;
}
.cta__phone:hover{ text-decoration: underline; text-underline-offset: 4px; }

/* --------------------- numbered-list-4 -------------------- */

.numbered{
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.numbered__item{ display: flex; flex-direction: column; gap: 10px; }
.numbered__num{
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .1em;
  color: var(--accent);
}
.numbered__title{
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.4;
}
.numbered__text{
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* ------------------------ tech-chips ---------------------- */

.tech{
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
.tech__text{ color: var(--ink-soft); max-width: 46ch; }
.tech__text .mono-label{ margin-bottom: 20px; }

/* -------------------- competencies-grid ------------------- */

.comps{
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.comp{ display: flex; flex-direction: column; gap: 12px; }
.comp .mono-label{ align-self: flex-start; }
.comp p{
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ------------------------- lead-form ---------------------- */

.leadform{
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
.leadform__aside h2{ margin-bottom: 18px; }
.leadform__aside p{
  color: var(--ink-soft);
  max-width: 42ch;
  margin-bottom: 20px;
}
.leadform__contacts{
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .875rem;
}
.leadform__contacts a{ border-bottom: 1px solid var(--line); }
.leadform__contacts a:hover{ border-bottom-color: var(--ink); }

.leadform__body{
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
}
@media (min-width: 900px){
  .leadform__body{ padding: 32px; }
}
.leadform__row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.leadform__actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}
.leadform__note{
  font-size: .8125rem;
  color: var(--ink-soft);
}

/* ------------------------ intro-text ---------------------- */

.introtext h2{ margin-bottom: 22px; }
.introtext p + p{ margin-top: 16px; }
.introtext p{ color: var(--ink-soft); }
.introtext .mono-label{ margin-bottom: 22px; }

/* -------------------- service-intro-2col ------------------ */

.sintro{
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
.sintro__text p + p{ margin-top: 16px; }
.sintro__text p{ color: var(--ink-soft); }
.sintro__note{
  font-family: var(--font-mono);
  font-size: clamp(1.125rem, .9rem + 1vw, 1.625rem);
  line-height: 1.35;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--accent);
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

/* --------------------- site-types-tiles ------------------- */

.types{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
.type{
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}
@media (min-width: 1280px){
  .type{ padding: 28px; }
}
.type__icon{ color: var(--accent); }
.type__title{
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
}
.type__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--ink-soft);
}
.type__text{
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.type__link{ margin-top: auto; padding-top: 6px; }

/* --------------------- Список с линиями ------------------- */

.linelist{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.linelist__item{
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
}
.linelist__item:first-child{ border-top: 1px solid var(--line); }
.linelist__title{
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
}
.linelist__text{
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.linelist__price{
  font-family: var(--font-mono);
  font-size: .9375rem;
  color: var(--ink);
  white-space: nowrap;
}

/* ---------------------- channels-grid --------------------- */

.channels{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
.channel{
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (min-width: 1280px){
  .channel{ padding: 28px; }
}
.channel__icon{ color: var(--accent); }
.channel__title{
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
}
.channel__text{
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.channel__list{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}
.channel__list li{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.channel__list svg{ color: var(--accent); margin-top: 3px; }

/* --------------------- Тарифные карточки ------------------ */

.plans{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
.plan{
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}
@media (min-width: 1280px){
  .plan{ padding: 28px; }
}
.plan .mono-label{ align-self: flex-start; }
.plan__title{
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
}
.plan__price{
  font-family: var(--font-mono);
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--ink);
}
.plan__text{
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.plan__list{
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.plan__list li{
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.plan__btn{ margin-top: auto; }

/* ------------------------ price-cards --------------------- */

.pricecards{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
.pricecard{
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  border-top: 4px solid var(--tile-color, var(--accent));
}
@media (min-width: 1280px){
  .pricecard{ padding: 28px; }
}
.pricecard__title{
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
}
.pricecard__text{
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.pricecard__price{
  font-family: var(--font-mono);
  font-size: 1.375rem;
  line-height: 1.2;
}
.pricecard__link{ margin-top: auto; padding-top: 6px; }

/* ------------------------ price-table --------------------- */

.tablewrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--white);
  border-radius: var(--radius);
}
.ptable{
  min-width: 640px;
  font-size: .9375rem;
}
.ptable caption{
  text-align: left;
  padding: 24px 24px 0;
  font-family: var(--font-mono);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-soft);
}
.ptable th,
.ptable td{
  text-align: left;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
/* Колонка цены прижата к правому краю карточки — иначе справа остаётся
   пустая четверть, а линейки строк идут до конца. */
.ptable th:last-child,
.ptable td:last-child{ text-align: right; }
.ptable thead th{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-soft);
}
.ptable tbody th{
  font-weight: 500;
  color: var(--ink);
}
.ptable td:nth-child(2){
  font-family: var(--font-mono);
  color: var(--ink-soft);
  white-space: nowrap;
}
.ptable td:last-child{
  font-family: var(--font-mono);
  white-space: nowrap;
}
.ptable tbody tr:last-child th,
.ptable tbody tr:last-child td{ border-bottom: 0; }

.pricenote{
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  color: var(--ink-soft);
  font-size: .9375rem;
  line-height: 1.6;
  max-width: 72ch;
}

/* ---------------------- filter / tag chips ---------------- */

.filterbar{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.filterbar::-webkit-scrollbar{ height: 4px; }
.filterbar::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 4px; }

/* ------------------------ articles ------------------------ */

.pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
}
.pagination__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: .875rem;
  color: var(--ink);
  border: 1px solid transparent;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.pagination__link:hover{ border-color: var(--ink); }
.pagination__link.is-active{
  background: var(--ink);
  color: var(--on-dark);
  border-color: var(--ink);
}
.pagination__link[aria-disabled="true"]{
  color: var(--line);
  pointer-events: none;
}

/* --------------------- article (статья) ------------------- */

.cover{
  aspect-ratio: 21 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--pill-bg);
}
.cover img{ width: 100%; height: 100%; object-fit: cover; }

.article__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-soft);
  margin-bottom: 28px;
}

.prose{ font-size: 1.0625rem; line-height: 1.62; }
.prose > * + *{ margin-top: 20px; }
.prose h2{
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  line-height: 1.22;
  margin-top: 44px;
}
.prose h3{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.3;
  margin-top: 32px;
}
.prose p{ font-size: 1.0625rem; line-height: 1.62; }
.prose ul,
.prose ol{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 0;
}
.prose ul li{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
}
.prose ul li::before{
  content: "";
  width: 6px; height: 6px;
  margin-top: 12px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.prose ol{ counter-reset: prose-counter; }
.prose ol li{
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: start;
  counter-increment: prose-counter;
}
.prose ol li::before{
  content: counter(prose-counter, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: .875rem;
  color: var(--accent);
  padding-top: 3px;
}
.prose blockquote{
  border-left: 2px solid var(--accent);
  padding-left: 20px;
  margin-block: 32px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.45;
}
.prose a{
  border-bottom: 1px solid var(--line);
}
.prose a:hover{ border-bottom-color: var(--ink); }
.prose figure img{ border-radius: var(--radius); }
.prose figcaption{
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--ink-soft);
  margin-top: 10px;
}

/* -------------------- about-photo-band -------------------- */

.photoband{
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--pill-bg);
}
@media (min-width: 900px){
  .photoband{ aspect-ratio: 21 / 9; }
}
.photoband img{ width: 100%; height: 100%; object-fit: cover; }

.aboutlead p{
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink-soft);
}
.aboutlead p + p{ margin-top: 18px; }
.aboutlead p:first-of-type{
  font-size: 1.1875rem;
  color: var(--ink);
}
.aboutlead .mono-label{ margin-bottom: 22px; }

/* ------------------------ Контакты ------------------------ */

.contacts{
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
.contacts__aside h2{ margin-bottom: 18px; }
.contacts__aside p{ color: var(--ink-soft); max-width: 42ch; margin-bottom: 24px; }

.dl{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.dl__row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}
.dl__row:first-child{ border-top: 1px solid var(--line); }
.dl__term{
  font-family: var(--font-mono);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-soft);
}
.dl__desc{
  font-family: var(--font-mono);
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ink);
}
.dl__desc a{ border-bottom: 1px solid var(--line); }
.dl__desc a:hover{ border-bottom-color: var(--ink); }
.dl__desc--big{
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 1.375rem;
}

.contacts__messengers{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.contacts__messengers .socials__link{
  border-color: var(--line);
  color: var(--ink);
}
.contacts__messengers .socials__link:hover{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-dark);
}

.map{
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--pill-bg);
}
.map iframe{
  width: 100%;
  height: 100%;
  border: 0;
}
.map__foot{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}
.map__address{
  font-family: var(--font-mono);
  font-size: .875rem;
  color: var(--ink-soft);
}

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

.notfound{
  padding-block: 72px;
  text-align: left;
}
@media (min-width: 900px){
  .notfound{ padding-block: 120px; }
}
.notfound__num{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(5rem, 3rem + 12vw, 11rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 20px;
}
.notfound h1{ margin-bottom: 18px; }
.notfound p{ color: var(--ink-soft); max-width: 48ch; margin-bottom: 32px; }
.notfound__links{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.notfound__links a{
  font-family: var(--font-mono);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
}
.notfound__links a:hover{ color: var(--ink); border-bottom-color: var(--ink); }

/* -------------------------- Модалка ----------------------- */

.modal{
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(29,29,27,.55);
}
.modal__box{
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px 24px;
}
@media (min-width: 900px){
  .modal__box{ padding: 36px; }
}
.modal__close{
  position: absolute;
  top: 12px; right: 12px;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ink);
}
.modal__close:hover{ background: var(--sand); }
.modal__title{ margin-bottom: 14px; padding-right: 40px; }
.modal__text{ color: var(--ink-soft); margin-bottom: 22px; }

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

.sitemapgrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.sitemapgrid .mono-label{ margin-bottom: 18px; display: inline-block; }
.sitemapgrid ul{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sitemapgrid a{
  font-size: .9375rem;
  border-bottom: 1px solid transparent;
}
.sitemapgrid a:hover{ border-bottom-color: var(--ink); }

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

/* ---- До 600px: плитки направлений лентой со scroll-snap ---- */

@media (max-width: 599px){
  .tiles{
    grid-auto-flow: column;
    grid-auto-columns: 74%;
    grid-template-columns: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    /* Без этого scroll-snap доводит первую плитку до самого края скроллпорта
       и съедает левое поле: лента стоит на 16px левее остальных блоков. */
    scroll-padding-inline: var(--pad);
  }
  .tile-wrap{ scroll-snap-align: start; }
}

/* ---- До 600px: прайс-таблица превращается в список карточек ---- */

@media (max-width: 599px){
  .ptable{ min-width: 0; }
  .ptable,
  .ptable caption,
  .ptable tbody,
  .ptable tbody tr,
  .ptable tbody th,
  .ptable tbody td{ display: block; }
  .ptable thead{
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
  .ptable caption{ padding: 20px 16px 0; }
  .ptable tbody tr{
    padding: 16px;
    border-bottom: 1px solid var(--line);
  }
  .ptable tbody tr:last-child{ border-bottom: 0; }
  .ptable tbody th,
  .ptable tbody td{ padding: 0; border: 0; }
  .ptable tbody th{
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 10px;
  }
  .ptable tbody td{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-top: 6px;
  }
  .ptable tbody td::before{
    content: attr(data-label);
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-soft);
  }
  .ptable tbody td:last-child{ font-weight: 600; }
}

/* ------------------------- от 600px ----------------------- */

@media (min-width: 600px){
  .grid--2,
  .grid--3,
  .grid--4{ grid-template-columns: repeat(2, 1fr); }

  .tiles{ grid-template-columns: repeat(2, 1fr); }
  .promos{ grid-template-columns: repeat(2, 1fr); }
  .values{ grid-template-columns: repeat(2, 1fr); }
  .types{ grid-template-columns: repeat(2, 1fr); }
  .channels{ grid-template-columns: repeat(2, 1fr); }
  .plans{ grid-template-columns: repeat(2, 1fr); }
  .pricecards{ grid-template-columns: repeat(2, 1fr); }
  .terms{ grid-template-columns: repeat(2, 1fr); }
  .numbered{ grid-template-columns: repeat(2, 1fr); column-gap: var(--gap); }
  .comps{ grid-template-columns: repeat(2, 1fr); }
  .sitemapgrid{ grid-template-columns: repeat(2, 1fr); }

  .linelist__item{
    grid-template-columns: minmax(180px, 1fr) 2fr auto;
    gap: 24px;
    align-items: baseline;
  }
  .dl__row{ grid-template-columns: 180px 1fr; gap: 20px; align-items: baseline; }
  .leadform__row{ grid-template-columns: repeat(2, 1fr); }
  .footer__bottom{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ------------------------- от 900px ----------------------- */

@media (min-width: 900px){
  .grid--3{ grid-template-columns: repeat(3, 1fr); }
  .grid--4{ grid-template-columns: repeat(3, 1fr); }

  .promos{ grid-template-columns: repeat(3, 1fr); }
  .values{ grid-template-columns: repeat(3, 1fr); }
  .channels{ grid-template-columns: repeat(2, 1fr); }
  .plans{ grid-template-columns: repeat(3, 1fr); }
  .comps{ grid-template-columns: repeat(3, 1fr); }
  .terms{ grid-template-columns: repeat(4, 1fr); }
  .sitemapgrid{ grid-template-columns: repeat(3, 1fr); }

  .tech{ grid-template-columns: minmax(280px, 1fr) 2fr; gap: 40px; }
  .sintro{ grid-template-columns: 1.4fr 1fr; gap: 40px; }
  .sintro__note{ border-top: 0; padding-top: 0; }
  .leadform{ grid-template-columns: minmax(280px, 1fr) 1.6fr; gap: 40px; }
  .contacts{ grid-template-columns: 1fr 1fr; gap: 48px; }

  .cta__inner{
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: end;
    gap: 40px;
  }
  .cta__actions{ justify-content: flex-end; }

  .footer__top{
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
  }
}

/* ------------------------ от 1100px ----------------------- */

@media (min-width: 1100px){
  .tiles{ grid-template-columns: repeat(4, 1fr); }
  .types{ grid-template-columns: repeat(4, 1fr); }
  .pricecards{ grid-template-columns: repeat(4, 1fr); }
  .grid--4{ grid-template-columns: repeat(4, 1fr); }
  .channels{ grid-template-columns: repeat(4, 1fr); }
}

/* ---- До 900px: центральное меню и телефон уходят в бургер --- */

@media (max-width: 899px){
  .mainnav{ display: none; }
  .topbar__phone{ display: none; }
  .topbar__cta{ display: none; }
  .burger{ display: inline-flex; }
  .topbar__pill{ justify-content: space-between; padding-right: 6px; }
  .page--home .topbar{ margin-bottom: -64px; }
}

/* Телефон в шапке прячется ниже 1100px, кнопка остаётся */
@media (min-width: 900px) and (max-width: 1099px){
  .topbar__phone{ display: none; }
  .mainnav__list{ gap: 20px; }
}

@media (min-width: 900px){
  .mobilemenu{ display: none !important; }
}

/* --------------------- Состояния фокуса ------------------- */

:focus{ outline: none; }

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

.section--dark :focus-visible,
.footer :focus-visible,
.cta :focus-visible,
.hero :focus-visible,
.promo :focus-visible,
.tile :focus-visible,
.btn--onphoto:focus-visible,
.btn--light:focus-visible{
  outline-color: #FFFFFF;
}

.tile:focus-within{ outline: 2px solid var(--ink); outline-offset: 2px; }

/* --------------- Уважение к настройкам движения ----------- */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }

  *,
  *::before,
  *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal{
    opacity: 1 !important;
    transform: none !important;
  }
  .tile:hover .tile__media img{ transform: none; }
}

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

@media print{
  .announce,
  .topbar,
  .mobilemenu,
  .cta,
  .footer__social,
  .skip-link,
  .filterbar,
  .pagination,
  .map{ display: none !important; }

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

  .section{ padding-block: 12pt; }

  .hero,
  .promo,
  .tile{
    min-height: 0;
    aspect-ratio: auto;
    background: #FFFFFF;
    color: #000000;
  }
  .hero__media,
  .hero__scrim,
  .promo__media,
  .promo__scrim,
  .tile__media{ display: none; }
  .hero h1,
  .promo__title{ color: #000000; }

  .card-link,
  .value,
  .plan,
  .type,
  .channel,
  .pricecard{
    border: 1px solid #CCCCCC;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .footer{
    background: #FFFFFF;
    color: #000000;
    padding-top: 12pt;
    border-top: 1px solid #CCCCCC;
  }
  .footer__phone,
  .footer__mail,
  .footer__list a,
  .footer__copy,
  .footer__legal a,
  .logo--footer{ color: #000000; }

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

  h1,h2,h3{ break-after: avoid; page-break-after: avoid; }
  img{ max-width: 100% !important; }
}

.services{padding:40px 0}.services__container{max-width:1100px;margin:0 auto}.services__title{margin-bottom:24px}.services__list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}.services__list li{background:#fff;border:1px solid #e5e5e5;border-radius:12px;padding:20px}.services__list h3{margin:0 0 10px}.services__list p{margin:0;line-height:1.6}.modal{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center}.modal[hidden]{display:none}.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}.modal__dialog{position:relative;background:#fff;border-radius:12px;padding:24px;max-width:520px;width:90%;max-height:90vh;overflow:auto}.modal__close{position:absolute;top:8px;right:12px;border:none;background:none;font-size:24px;cursor:pointer}.leadform .field{margin-bottom:12px}.leadform .field label{display:block;margin-bottom:4px}.leadform .input,.leadform .textarea{width:100%;padding:8px;border:1px solid #ccc;border-radius:8px}.leadform .textarea{min-height:80px}