@charset "UTF-8";
/* ==========================================================================
   Базовое оформление платформы
   Вёрстка по UI-киту этапа 2. Без зависимостей и сборки.
   Порядок: токены → сброс → типографика → сетка → компоненты → секции → адаптив
   ========================================================================== */

/* ---------- 1. Токены ---------- */
:root{
  /* цвет */
  --bg-page:#ffffff;
  --bg-subtle:#f5f9fb;
  --bg-muted:#eef2f5;
  --bg-render:#eff0f9;   /* фон студийных рендеров изделий — совпадает с фоном фото */
  --brand-900:#032334;
  --brand-800:#043048;
  --brand-700:#054060;
  --brand-500:#0b6791;
  --brand-100:#dce8ef;
  --accent-600:#c40807;
  --accent-500:#ed0f0f;
  --accent-100:#fdeaea;
  --ink-900:#0e2233;
  --ink-700:#35373a;
  --ink-500:#5b6b78;
  --ink-400:#8e9aa5;
  --line-200:#dde5ea;
  --line-300:#ced4da;
  --success-600:#15794a;
  --success-100:#e4f3ea;
  --warning-600:#9a6206;
  --warning-100:#fdf2dd;
  --danger-600:#b3261e;
  --danger-100:#fbe9e7;
  --focus-ring:var(--brand-500);

  /* шрифт */
  --font-sans:Ubuntu,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,monospace;

  /* отступы */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;

  /* радиусы */
  --radius-sm:4px; --radius-md:6px; --radius-lg:10px; --radius-pill:999px;

  /* тени */
  --shadow-card:0 1px 2px rgba(5,64,96,.06),0 1px 3px rgba(5,64,96,.05);
  --shadow-hover:0 4px 10px rgba(5,64,96,.10),0 12px 24px rgba(5,64,96,.08);
  --shadow-header:0 1px 0 rgba(5,64,96,.10);
  --shadow-modal:0 24px 60px rgba(3,35,52,.24);

  /* размеры */
  --container:1200px;
  --gutter:24px;
  --control-h:44px;
  --control-h-sm:36px;
  --control-h-lg:52px;
  --header-h:76px;
}

/* ---------- 2. Сброс ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg-page);
  color:var(--ink-900);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:26px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5,p,figure,blockquote{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
img,svg,video{display:block;max-width:100%;}
img{height:auto;}
a{color:var(--brand-500);text-decoration:none;}
a:hover{color:var(--brand-700);}
button,input,select,textarea{font:inherit;color:inherit;}
table{border-collapse:collapse;width:100%;}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:2px;}
[id]{scroll-margin-top:calc(var(--header-h) + var(--space-5));}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
[hidden]{display:none !important;}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--brand-700);color:#fff;padding:12px 20px;border-radius:0 0 var(--radius-md) 0;
}
.skip-link:focus{left:0;color:#fff;}

/* ---------- 3. Типографика ---------- */
.h1,.h2,.h3,.h4,.h5{color:var(--ink-900);}
.h1{font-size:40px;line-height:46px;font-weight:700;letter-spacing:-.01em;}
.h2{font-size:32px;line-height:38px;font-weight:700;}
.h3{font-size:24px;line-height:30px;font-weight:500;}
.h4{font-size:20px;line-height:26px;font-weight:500;}
.h5{font-size:17px;line-height:24px;font-weight:500;}
.lead{font-size:18px;line-height:28px;color:var(--ink-700);}
.text-sm{font-size:14px;line-height:22px;}
.caption{font-size:13px;line-height:18px;color:var(--ink-500);}
.code{font-family:var(--font-mono);font-size:14px;line-height:20px;letter-spacing:.01em;}
.overline{
  font-size:12px;line-height:16px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent-500);
}
.muted{color:var(--ink-500);}
.prose p+p{margin-top:var(--space-4);}
.prose ul{margin-top:var(--space-3);}
.prose li{position:relative;padding-left:20px;line-height:28px;color:var(--ink-700);}
.prose li::before{
  content:"";position:absolute;left:4px;top:12px;
  width:5px;height:5px;border-radius:50%;background:var(--brand-500);
}
/* Нумерованный список остаётся нумерованным: кружок подменял бы цифру,
   и «шаг 3» в перенесённом тексте превращался в безымянный пункт. */
.prose ol{margin-top:var(--space-3);padding-left:24px;list-style:decimal;}
.prose ol>li{padding-left:4px;}
.prose ol>li::before{content:none;}
.prose ol>li::marker{color:var(--brand-500);font-weight:700;}

/* ---------- 4. Сетка ---------- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter);}
.section{padding:var(--space-9) 0;}
.section--tight{padding:var(--space-8) 0;}
.section--subtle{background:var(--bg-subtle);}
.grid{display:grid;gap:var(--space-5);}
.grid>li{display:flex;flex-direction:column;}
.grid>li>.card,.grid>li>a.card,.grid>li>.pcard{flex-grow:1;width:100%;}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);}
.stack{display:flex;flex-direction:column;}
.row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;}

.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--space-5);margin-bottom:var(--space-7);
}
.section-head .overline{margin-bottom:var(--space-2);}
.section-head__link{font-size:15px;font-weight:500;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}


/* раскладки страниц (вместо инлайновых grid-template-columns) */
.grid--gap-lg{gap:var(--space-7);}
.grid--top{align-items:start;}
.grid--sidebar{grid-template-columns:300px minmax(0,1fr);}
.grid--main-aside{grid-template-columns:1.35fr minmax(0,1fr);}
.grid--form-aside{grid-template-columns:minmax(0,1fr) 340px;}

/* ---------- 5. Кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  /* flex:none — чтобы кнопка не сжималась по высоте внутри колоночного
     флекса: в формах она схлопывалась до высоты строки текста и выглядела
     пустой полосой */
  flex:none;
  height:var(--control-h);min-height:var(--control-h);
  padding:0 20px;border:1px solid transparent;
  border-radius:var(--radius-md);
  font-size:15px;line-height:20px;font-weight:500;
  white-space:nowrap;cursor:pointer;
  transition:background-color .12s ease,border-color .12s ease,color .12s ease;
}
.btn svg{width:20px;height:20px;flex:none;}
.btn--accent{background:var(--accent-500);color:#fff;}
.btn--accent:hover{background:var(--accent-600);color:#fff;}
.btn--primary{background:var(--brand-700);color:#fff;}
.btn--primary:hover{background:var(--brand-800);color:#fff;}
.btn--outline{background:var(--bg-page);color:var(--brand-700);border-color:var(--line-300);}
.btn--outline:hover{background:var(--bg-subtle);border-color:var(--brand-700);color:var(--brand-700);}
.btn--ghost{background:transparent;color:var(--brand-500);padding:0 10px;}
.btn--ghost:hover{background:var(--brand-100);}
.btn--on-dark{border-color:rgba(255,255,255,.45);color:#fff;background:transparent;}
.btn--on-dark:hover{background:rgba(255,255,255,.12);color:#fff;}
.btn--lg{height:var(--control-h-lg);min-height:var(--control-h-lg);padding:0 28px;font-size:16px;}
.btn--sm{height:var(--control-h-sm);padding:0 14px;font-size:14px;}
.btn--icon{width:var(--control-h-sm);padding:0;border-radius:var(--radius-sm);}
.btn--block{width:100%;}
.btn[disabled],.btn[aria-disabled="true"]{
  background:var(--bg-muted);color:var(--ink-400);border-color:var(--line-200);
  cursor:not-allowed;pointer-events:none;
}

/* ---------- 6. Шапка ---------- */
.header{
  position:sticky;top:0;z-index:40;
  background:var(--bg-page);border-bottom:1px solid var(--line-200);
}
.header.is-stuck{box-shadow:var(--shadow-header);}
.header__inner{display:flex;align-items:center;gap:var(--space-6);height:var(--header-h);}
.header__logo{flex:none;}
.header__logo img{height:34px;width:auto;}
.header__nav{margin-left:auto;}
.menu{display:flex;align-items:stretch;gap:var(--space-5);height:var(--header-h);}
.menu__item{position:relative;display:flex;align-items:center;}
.menu__link{
  display:inline-flex;align-items:center;gap:6px;
  height:100%;font-size:15px;font-weight:500;color:var(--ink-900);
  border-bottom:3px solid transparent;
  background:none;border-left:0;border-right:0;border-top:0;padding:0;cursor:pointer;
}
.menu__link:hover{color:var(--brand-700);}
.menu__item.is-active>.menu__link{color:var(--brand-700);border-bottom-color:var(--accent-500);}
.menu__caret{width:16px;height:16px;transition:transform .15s ease;}
.menu__item.is-open .menu__caret{transform:rotate(180deg);}
.header__phone{font-size:16px;font-weight:500;color:var(--brand-700);white-space:nowrap;}
.header__phone:hover{color:var(--brand-800);}
.header__cta{flex:none;}
.burger{
  display:none;width:40px;height:40px;flex:none;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  background:var(--bg-page);border:1px solid var(--line-300);border-radius:var(--radius-md);
  cursor:pointer;padding:0;
}
.burger span{display:block;width:18px;height:2px;background:var(--brand-700);transition:transform .15s ease,opacity .15s ease;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* мегаменю */
.megamenu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  min-width:680px;padding:var(--space-5);
  background:var(--bg-page);border:1px solid var(--line-200);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  box-shadow:var(--shadow-hover);
  display:none;
}
.menu__item.is-open .megamenu{display:block;}
.megamenu__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2) var(--space-5);}
.megamenu__link{
  display:flex;gap:var(--space-3);align-items:flex-start;
  padding:10px 12px;border-radius:var(--radius-md);color:var(--ink-900);
}
.megamenu__link:hover{background:var(--bg-subtle);color:var(--ink-900);}
.megamenu__link .icon{color:var(--brand-700);flex:none;}
.megamenu__name{font-size:15px;line-height:20px;font-weight:500;display:block;}
.megamenu__note{font-size:13px;line-height:18px;color:var(--ink-500);display:block;margin-top:2px;}

/* ---------- 7. Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--brand-900);}
.hero__media,.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(3,35,52,.95) 0%,rgba(3,35,52,.88) 44%,rgba(3,35,52,.52) 100%);
}
.hero__inner{position:relative;display:flex;flex-direction:column;justify-content:center;}
.hero--home .hero__inner{min-height:580px;padding:var(--space-8) 0;}
.hero--page .hero__inner{min-height:280px;padding:var(--space-6) 0;}
.hero .overline{color:rgba(255,255,255,.72);margin-bottom:18px;}
.hero__title{color:#fff;max-width:700px;}
.hero--home .hero__title{font-size:48px;line-height:56px;font-weight:700;letter-spacing:-.015em;}
.hero--page .hero__title{font-size:40px;line-height:46px;font-weight:700;letter-spacing:-.01em;}
.hero__lead{margin-top:20px;font-size:18px;line-height:28px;color:rgba(255,255,255,.84);max-width:600px;}
.hero--page .hero__lead{font-size:17px;line-height:26px;max-width:740px;margin-top:12px;}
.hero__actions{display:flex;gap:var(--space-3);margin-top:var(--space-6);flex-wrap:wrap;}

/* полоса цифр */
.factbar{background:var(--bg-subtle);border-bottom:1px solid var(--line-200);padding:var(--space-5) 0;}
.factbar__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);}
.fact{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-1);}
.fact__num{font-size:34px;line-height:40px;font-weight:700;color:var(--brand-700);white-space:nowrap;}
.fact__label{font-size:14px;line-height:20px;color:var(--ink-500);}

/* ---------- 8. Хлебные крошки ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;line-height:18px;}
.crumbs li:not(:last-child)::after{content:"·";margin-left:8px;color:currentColor;opacity:.5;}
.crumbs li{display:flex;align-items:center;}
.crumbs--light{color:rgba(255,255,255,.62);margin-bottom:14px;}
.crumbs--light a{color:rgba(255,255,255,.88);}
.crumbs--light a:hover{color:#fff;}
.crumbs--dark{color:var(--ink-500);}
.crumbs-bar{background:var(--bg-subtle);border-bottom:1px solid var(--line-200);padding:14px 0;}

/* ---------- 9. Карточки ---------- */
.card{
  display:flex;flex-direction:column;
  background:var(--bg-page);border:1px solid var(--line-200);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
  overflow:hidden;color:var(--ink-900);
  transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease;
}
a.card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);border-color:var(--brand-100);color:var(--ink-900);}
.card__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);flex-grow:1;}
.card__icon{color:var(--brand-700);}
.card__icon svg{width:36px;height:36px;}
.card__title{font-size:20px;line-height:26px;font-weight:500;}
.card__title--sm{font-size:17px;line-height:24px;}
.card__note{font-size:14px;line-height:22px;color:var(--ink-500);}
.card__list{margin-top:var(--space-1);}
.card__list li{font-size:14px;line-height:24px;color:var(--ink-700);position:relative;padding-left:16px;}
.card__list li::before{content:"";position:absolute;left:2px;top:11px;width:4px;height:4px;border-radius:50%;background:var(--ink-400);}
.card__more{margin-top:auto;padding-top:var(--space-3);font-size:14px;font-weight:500;color:var(--brand-500);}
.card__shot{
  height:132px;background:var(--bg-muted);border-bottom:1px solid var(--line-200);
  display:flex;align-items:center;justify-content:center;padding:var(--space-3);
}
.card__shot img{max-height:108px;width:auto;mix-blend-mode:multiply;}
.card__photo{position:relative;height:190px;overflow:hidden;}
.card__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.card__stamp{
  position:absolute;left:14px;bottom:14px;
  background:rgba(255,255,255,.94);border-radius:var(--radius-sm);
  padding:4px 10px;font-size:12px;font-weight:500;color:var(--ink-900);
}
.card__foot{border-top:1px solid var(--line-200);padding:12px var(--space-5);font-size:14px;font-weight:500;color:var(--brand-500);}

/* карточка документа */
.doc{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-4) var(--space-5);}
.doc>span:last-child{display:block;}
.doc__icon{color:var(--accent-500);flex:none;}
.doc__icon svg{width:26px;height:26px;}
.doc__name{display:block;font-size:16px;line-height:22px;font-weight:500;color:var(--ink-900);}
.doc__meta{display:block;font-size:13px;line-height:18px;color:var(--ink-500);margin-top:4px;}

/* плашка партнёра */
.partner{
  height:96px;display:flex;align-items:center;justify-content:center;
  background:var(--bg-page);border:1px solid var(--line-200);border-radius:var(--radius-lg);
  font-size:18px;letter-spacing:.06em;font-weight:500;color:var(--ink-500);text-align:center;padding:var(--space-3);
}

/* строка документа в разделе «Документация» */
.docrow{
  display:grid;grid-template-columns:auto minmax(0,1fr) 160px 24px;
  gap:var(--space-4);align-items:center;
  padding:16px var(--space-5);color:var(--ink-900);
}
.docrow:hover{color:var(--ink-900);background:var(--bg-subtle);}
.docrow__icon{color:var(--accent-500);}
.docrow__icon svg{width:26px;height:26px;}
.docrow__name{display:block;font-size:16px;line-height:22px;font-weight:500;}
.docrow__meta{display:block;font-size:13px;line-height:18px;color:var(--ink-500);margin-top:4px;}
.docrow__tag{display:flex;justify-content:center;}
.docrow__dl{color:var(--brand-700);display:flex;justify-content:flex-end;}
.doclist>li+li{border-top:1px solid var(--line-200);}

/* ---------- 10. Статусы, теги, чипы, сообщения ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;
  border-radius:var(--radius-sm);font-size:13px;line-height:26px;font-weight:500;
}
.badge--ok{background:var(--success-100);color:var(--success-600);}
.badge--order{background:var(--warning-100);color:var(--warning-600);}
.badge--new{background:var(--accent-100);color:var(--accent-600);}
.badge--off{background:var(--bg-muted);color:var(--ink-500);}
.tag{
  display:inline-flex;align-items:center;height:26px;padding:0 12px;
  border:1px solid var(--line-200);background:var(--bg-subtle);
  border-radius:var(--radius-pill);font-size:13px;color:var(--ink-700);
}
.chips{display:flex;gap:var(--space-2);flex-wrap:wrap;}
.chip{
  display:inline-flex;align-items:center;height:34px;padding:0 14px;
  border:1px solid var(--line-300);background:var(--bg-page);
  border-radius:var(--radius-pill);font-size:14px;color:var(--ink-700);cursor:pointer;
}
.chip:hover{border-color:var(--brand-500);color:var(--brand-700);}
.chip.is-active{background:var(--brand-100);border-color:var(--brand-700);color:var(--brand-700);font-weight:500;}
.message{
  display:flex;gap:var(--space-3);padding:var(--space-4);
  border-radius:var(--radius-md);font-size:14px;line-height:20px;
}
.message svg{width:20px;height:20px;flex:none;margin-top:1px;}
.message--ok{background:var(--success-100);color:var(--success-600);}
.message--error{background:var(--danger-100);color:var(--danger-600);}
.message--info{background:var(--bg-subtle);color:var(--ink-700);}
.message--info svg{color:var(--brand-700);}

/* ---------- 11. Табы и пагинация ---------- */
.tabs{
  display:inline-flex;background:var(--bg-page);border:1px solid var(--line-200);
  border-radius:var(--radius-pill);padding:4px;gap:4px;
}
.tabs__btn{
  height:36px;padding:0 20px;border:0;background:transparent;
  border-radius:var(--radius-pill);font-size:15px;font-weight:500;
  color:var(--ink-500);cursor:pointer;white-space:nowrap;
}
.tabs__btn:hover{color:var(--brand-700);}
.tabs__btn[aria-selected="true"]{background:var(--brand-700);color:#fff;}
.tabs-line{border-bottom:1px solid var(--line-200);display:flex;gap:var(--space-6);overflow-x:auto;}
.tabs-line a{
  display:inline-flex;align-items:center;height:44px;
  font-size:16px;font-weight:500;color:var(--ink-500);
  border-bottom:3px solid transparent;white-space:nowrap;
}
.tabs-line a.is-active{color:var(--brand-700);border-bottom-color:var(--accent-500);}
.pager{display:flex;gap:var(--space-2);align-items:center;}
.pager a,.pager span{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-200);border-radius:var(--radius-md);
  background:var(--bg-page);font-size:14px;color:var(--ink-700);
}
.pager a:hover{border-color:var(--brand-500);color:var(--brand-700);}
.pager .is-current{background:var(--brand-700);border-color:var(--brand-700);color:#fff;font-weight:500;}

/* ---------- 12. Формы ---------- */
.field{display:flex;flex-direction:column;gap:var(--space-2);}
.field__label{font-size:14px;line-height:18px;font-weight:500;color:var(--ink-900);}
.field__req{color:var(--accent-500);}
.field__hint{font-size:13px;line-height:18px;color:var(--ink-500);}
.field__error{
  display:none;gap:6px;align-items:center;
  font-size:13px;line-height:18px;color:var(--danger-600);
}
.field__error svg{width:16px;height:16px;flex:none;}
.field.has-error .field__error{display:flex;}
.field.has-error .control{border-color:var(--danger-600);}
.control{
  width:100%;height:var(--control-h);
  border:1px solid var(--line-300);border-radius:var(--radius-md);
  padding:0 12px;background:var(--bg-page);font-size:15px;color:var(--ink-900);
}
.control::placeholder{color:var(--ink-400);}
.control:hover{border-color:var(--ink-400);}
.control:focus{border-color:var(--brand-500);}
textarea.control{height:84px;padding:10px 12px;line-height:22px;resize:vertical;}
.control[disabled]{background:var(--bg-muted);color:var(--ink-400);border-color:var(--line-200);cursor:not-allowed;}
.select{position:relative;}
.select select{appearance:none;-webkit-appearance:none;padding-right:36px;}
.select svg{position:absolute;right:12px;top:14px;width:16px;height:16px;color:var(--ink-500);pointer-events:none;}
.choices{display:flex;gap:var(--space-5);flex-wrap:wrap;align-items:center;min-height:var(--control-h);}
.choice{display:inline-flex;gap:8px;align-items:center;font-size:15px;color:var(--ink-700);cursor:pointer;}
.choice input{position:absolute;opacity:0;width:0;height:0;}
.choice__box,.choice__radio{
  width:20px;height:20px;flex:none;border:1px solid var(--line-300);background:var(--bg-page);
  display:inline-flex;align-items:center;justify-content:center;
}
.choice__box{border-radius:var(--radius-sm);}
.choice__radio{border-radius:50%;}
.choice__box::after{
  content:"";width:11px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(1px,-2px);opacity:0;
}
.choice__radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--brand-700);opacity:0;}
.choice input:checked+.choice__box{background:var(--brand-700);border-color:var(--brand-700);}
.choice input:checked+.choice__box::after{opacity:1;}
.choice input:checked+.choice__radio{border-color:var(--brand-700);border-width:2px;}
.choice input:checked+.choice__radio::after{opacity:1;}
.choice input:focus-visible+.choice__box,
.choice input:focus-visible+.choice__radio{outline:2px solid var(--focus-ring);outline-offset:2px;}
.dropzone{
  display:flex;gap:var(--space-3);align-items:center;
  border:1px dashed var(--line-300);background:var(--bg-muted);
  border-radius:var(--radius-md);padding:var(--space-4);
  font-size:14px;color:var(--ink-500);cursor:pointer;
}
.dropzone svg{width:24px;height:24px;color:var(--ink-400);flex:none;}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);}
.form-grid__full{grid-column:1/-1;}

/* ---------- 13. Таблицы ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table{font-size:14px;}
.table th{
  text-align:left;font-size:13px;font-weight:500;color:var(--ink-500);
  padding:0 var(--space-4) 10px;border-bottom:1px solid var(--line-200);white-space:nowrap;
}
.table td{
  padding:12px var(--space-4);border-bottom:1px solid var(--line-200);
  color:var(--ink-700);vertical-align:top;
}
.table th:first-child,.table td:first-child{padding-left:var(--space-5);}
.table th:last-child,.table td:last-child{padding-right:var(--space-5);}
.table tbody tr:nth-child(even) td{background:var(--bg-subtle);}
.table td:first-child{color:var(--ink-900);}
.table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.table--spec td:first-child{width:40%;}

/* ---------- 14. Галерея товара ---------- */
.gallery__main{
  background:var(--bg-render);border:1px solid var(--line-200);border-radius:var(--radius-lg);
  height:420px;display:flex;align-items:center;justify-content:center;padding:var(--space-5);
}
.gallery__main img{max-height:100%;width:auto;}
.gallery__thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-3);}
.gallery__thumb{
  height:72px;background:var(--bg-render);border:1px solid var(--line-200);
  border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;
  padding:var(--space-2);cursor:pointer;
}
.gallery__thumb img{max-height:100%;width:auto;opacity:.65;}
.gallery__thumb.is-active{border-color:var(--brand-700);}
.gallery__thumb.is-active img{opacity:1;}

/* ---------- 15. Спецблоки ---------- */
/* колонок столько, сколько плиток: при одной характеристике
   фиксированные три оставляли пустой серый прямоугольник рядом */
.keyspecs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:1px;
  background:var(--line-200);border:1px solid var(--line-200);
  border-radius:var(--radius-lg);overflow:hidden;
}
.keyspec{background:var(--bg-page);padding:18px;}
.keyspec__label{font-size:13px;line-height:18px;color:var(--ink-500);}
.keyspec__value{font-size:24px;line-height:30px;font-weight:500;color:var(--ink-900);margin-top:4px;}

.panel{background:var(--bg-page);border:1px solid var(--line-200);border-radius:var(--radius-lg);padding:var(--space-5);}
.panel--subtle{background:var(--bg-subtle);}
.panel__title{font-size:20px;line-height:26px;font-weight:500;margin-bottom:var(--space-2);}
.linklist li{border-bottom:1px solid var(--line-200);}
.linklist li:last-child{border-bottom:0;}
.linklist a{display:flex;gap:var(--space-3);align-items:center;padding:14px 0;color:var(--ink-900);}
.linklist a>span:not([class]){flex-grow:1;min-width:0;}
.linklist a:hover{color:var(--brand-700);}
.linklist__name{display:block;font-size:15px;line-height:20px;font-weight:500;}
.linklist__meta{display:block;font-size:13px;line-height:18px;color:var(--ink-500);margin-top:3px;}

.steps li{display:flex;gap:var(--space-3);margin-top:18px;}
.steps__n{
  flex:none;width:26px;height:26px;border-radius:50%;background:var(--brand-700);color:#fff;
  font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center;
}
.steps__text{font-size:14px;line-height:22px;color:var(--ink-700);}

.timeline li{display:grid;grid-template-columns:110px 1fr;gap:var(--space-5);padding-bottom:26px;}
.timeline__year{font-size:20px;line-height:26px;font-weight:700;color:var(--brand-700);}
.timeline__text{font-size:16px;line-height:26px;color:var(--ink-700);}

.photo-tile{position:relative;height:220px;border-radius:var(--radius-lg);overflow:hidden;}
.photo-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.photo-tile__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,35,52,0) 45%,rgba(3,35,52,.72) 100%);}
.photo-tile__label{position:absolute;left:16px;bottom:14px;font-size:14px;font-weight:500;color:#fff;}

/* ---------- 16. Призыв к действию ---------- */
.cta{position:relative;overflow:hidden;background:var(--brand-700);padding:var(--space-8) 0;}
.cta__render{position:absolute;right:-30px;top:-70px;height:420px;width:auto;opacity:.13;pointer-events:none;}
.cta__inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);}
.cta__title{font-size:28px;line-height:34px;font-weight:700;color:#fff;max-width:620px;}
.cta__note{margin-top:10px;font-size:16px;line-height:24px;color:rgba(255,255,255,.8);}
.cta__actions{display:flex;gap:var(--space-3);flex:none;flex-wrap:wrap;}

/* ---------- 17. Подвал ---------- */
.footer{background:var(--brand-900);color:#fff;padding:var(--space-7) 0 var(--space-6);}
.footer a{color:#fff;}
.footer a:hover{color:#fff;opacity:1;}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1.4fr 1.2fr;gap:var(--space-7);}
.footer__logo img{height:30px;width:auto;}
.footer__about{margin-top:var(--space-4);font-size:14px;line-height:22px;opacity:.72;max-width:280px;}
.footer__head{
  font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;
  opacity:.5;margin-bottom:10px;
}
.footer__menu a{font-size:15px;line-height:30px;opacity:.82;display:block;}
.footer__menu a:hover{opacity:1;}
.footer__contact{display:flex;gap:var(--space-2);align-items:flex-start;line-height:30px;}
.footer__contact svg{width:18px;height:18px;flex:none;margin-top:6px;}
.footer__contact--phone{font-size:17px;font-weight:500;}
.footer__contact--addr{line-height:22px;margin-top:6px;opacity:.82;font-size:15px;}
.footer__contact--mail{font-size:15px;opacity:.82;}
.footer__bottom{
  margin-top:var(--space-6);padding-top:var(--space-5);
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;
  font-size:13px;opacity:.55;
}

/* ---------- 18. Утилиты ---------- */
.icon{width:24px;height:24px;flex:none;}
.icon--sm{width:20px;height:20px;}
.mt-2{margin-top:var(--space-2);}
.mt-3{margin-top:var(--space-3);}
.mt-4{margin-top:var(--space-4);}
.mt-5{margin-top:var(--space-5);}
.mt-6{margin-top:var(--space-6);}
.mt-7{margin-top:var(--space-7);}

.measure{max-width:680px;}

/* ==========================================================================
   19. Адаптив
   ========================================================================== */
@media (max-width:1100px){
  .footer__grid{grid-template-columns:1.6fr 1fr 1.4fr;}
  .footer__cta{grid-column:1/-1;}
  .megamenu{min-width:560px;}
}

@media (max-width:980px){
  :root{--header-h:64px;}
  .header__inner{gap:var(--space-4);}
  .header__nav{
    position:fixed;left:0;right:0;top:var(--header-h);bottom:0;
    background:var(--bg-page);border-top:1px solid var(--line-200);
    padding:var(--space-5) var(--gutter);overflow-y:auto;margin-left:0;
    transform:translateX(100%);transition:transform .2s ease;z-index:39;
  }
  .header__nav.is-open{transform:translateX(0);}
  .menu{flex-direction:column;height:auto;gap:0;}
  .menu__item{display:block;border-bottom:1px solid var(--line-200);}
  .menu__link{
    width:100%;height:auto;padding:16px 0;justify-content:space-between;
    border-bottom:0;font-size:17px;
  }
  .menu__item.is-active>.menu__link{color:var(--brand-700);}
  .megamenu{
    position:static;transform:none;min-width:0;width:100%;
    border:0;box-shadow:none;padding:0 0 var(--space-4);border-radius:0;
  }
  .megamenu__grid{grid-template-columns:1fr;gap:0;}
  .megamenu__link{padding:10px 0;}
  .header__phone{margin-left:auto;font-size:15px;}
  .header__cta{display:none;}
  .burger{display:flex;}
  body.is-locked{overflow:hidden;}

  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cta__inner{flex-direction:column;align-items:flex-start;}
  .cta__render{height:320px;right:-60px;opacity:.1;}
}

@media (max-width:860px){
  .grid--2,.grid--sidebar,.grid--main-aside,.grid--form-aside{grid-template-columns:minmax(0,1fr);}
  .form-grid{grid-template-columns:1fr;gap:var(--space-4);}
  .keyspecs{grid-template-columns:1fr;}
  .section-head{flex-direction:column;align-items:flex-start;gap:var(--space-3);}
  .footer__grid{grid-template-columns:1fr 1fr;gap:var(--space-5);}
  .footer__brand{grid-column:1/-1;}
}

@media (max-width:768px){
  .docrow{grid-template-columns:auto minmax(0,1fr) auto;row-gap:10px;}
  .docrow__tag{grid-column:2/3;justify-content:flex-start;}
  /* 16px на телефоне читается как «текст прилип к краю»: 20 даёт воздух,
     не съедая заметную долю и без того узкой строки */
  :root{--gutter:20px;--space-9:56px;--space-8:44px;--space-7:32px;}
  .h1{font-size:28px;line-height:34px;}
  .h2{font-size:24px;line-height:30px;}
  .h3{font-size:20px;line-height:26px;}
  .lead{font-size:16px;line-height:25px;}
  .hero--home .hero__inner{min-height:0;padding:var(--space-7) 0;}
  .hero--home .hero__title{font-size:28px;line-height:34px;}
  .hero--page .hero__inner{min-height:0;padding:var(--space-6) 0;}
  .hero--page .hero__title{font-size:26px;line-height:32px;}
  .hero__scrim{background:linear-gradient(180deg,rgba(3,35,52,.88) 0%,rgba(3,35,52,.94) 100%);}
  .hero__lead{font-size:15px;line-height:24px;}
  .hero__actions{flex-direction:column;align-items:stretch;}
  .hero__actions .btn{width:100%;}
  .factbar__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);}
  .fact__num{font-size:20px;line-height:26px;}
  .fact__label{font-size:12px;line-height:16px;}
  .grid--3,.grid--4{grid-template-columns:1fr;}
  .gallery__main{height:300px;}
  .timeline li{grid-template-columns:1fr;gap:var(--space-1);}
  .cta__title{font-size:22px;line-height:28px;}
  .cta__actions{width:100%;flex-direction:column;align-items:stretch;}
  .cta__actions .btn{width:100%;}
  .footer__grid{grid-template-columns:1fr;}
  .footer__bottom{flex-direction:column;gap:var(--space-2);}
  .table--spec td:first-child{width:auto;min-width:150px;}
}

@media (max-width:420px){
  .tabs{width:100%;}
  .tabs__btn{flex:1;padding:0 10px;font-size:14px;}
}

/* ---------- 20. Печать ---------- */
@media print{
  .header,.footer,.cta,.burger,.chips,.pager{display:none !important;}
  body{font-size:12pt;}
  .card{break-inside:avoid;box-shadow:none;}
}

/* карточка товара в витрине направления */
.pcard{
  display:flex;flex-direction:column;background:var(--bg-page);
  border:1px solid var(--line-200);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);overflow:hidden;color:var(--ink-900);
  transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease;
}
a.pcard:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);border-color:var(--brand-100);color:var(--ink-900);}
.pcard__media{
  height:180px;background:var(--bg-render);border-bottom:1px solid var(--line-200);
  display:flex;align-items:center;justify-content:center;padding:var(--space-2);
}
.pcard__media img{max-height:100%;max-width:100%;width:auto;object-fit:contain;}
.pcard__media--empty{position:relative;}
.pcard__media--empty::after{content:"";position:absolute;inset:24px;border:1px dashed var(--line-300);border-radius:var(--radius-md);}
.pcard__body{padding:var(--space-5);display:flex;flex-direction:column;gap:6px;flex-grow:1;}
.pcard__code{font-size:13px;line-height:18px;color:var(--ink-500);}
.pcard__title{font-size:17px;line-height:23px;font-weight:500;color:var(--ink-900);}
.pcard__note{
  font-size:14px;line-height:21px;color:var(--ink-500);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.pcard .card__more{margin-top:auto;padding-top:var(--space-3);}
/* ключевые свойства и цена в карточке позиции каталога */
.pcard__keys{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:4px;font-size:14px;line-height:19px;}
.pcard__key{display:flex;flex-direction:column;}
.pcard__key>span{color:var(--ink-500);}
.pcard__price{margin-top:6px;font-size:18px;line-height:24px;font-weight:600;color:var(--ink-900);}

/* Сообщения сайта: ответ формы — отправилось, не отправилось, почему */
.messages{margin:20px auto 0;}
.messages .message{margin:0 0 10px;}
/* Сообщение внутри формы: формы бывают сеткой и флексом, поэтому строке
   явно задаётся вся ширина — иначе она встаёт в колонку рядом с полями */
.message--list{
  list-style:none;padding:14px 16px;margin:0 0 16px;display:block;
  width:100%;flex:1 0 100%;grid-column:1/-1;
}
.message--list li{margin:0 0 4px;}
.message--list li:last-child{margin:0;}

/* Галочка согласия на обработку данных.
   Снятая по умолчанию: проставленная заранее — не действие человека.
   Поле должно быть крупным: по нему придётся попасть пальцем на телефоне. */
.agree,
.cta__agree,
.hero-g__agree--check,
.svc__agree,
.pb-form__agree,
.review-form__agree{
  display:flex;gap:10px;align-items:flex-start;
  font-size:13px;line-height:1.45;cursor:pointer;
  width:100%;flex:1 0 100%;grid-column:1/-1;
}
.agree input[type="checkbox"],
.cta__agree input[type="checkbox"],
.hero-g__agree--check input[type="checkbox"],
.svc__agree input[type="checkbox"],
.pb-form__agree input[type="checkbox"],
.review-form__agree input[type="checkbox"]{
  width:20px;height:20px;flex:none;margin:0;cursor:pointer;
}