/* КУБ · Защита от БПЛА — стили продакшн-сборки.
   Токены — на основе design-tokens.css из пакета передачи. */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600&display=swap');
/* TODO(деплой): самохостинг Unbounded (cyrillic+latin, font-display: swap) вместо Google Fonts CDN — см. HANDOFF п.9 */

:root {
  --kub-orange: #F4773D;
  --kub-orange-hover: #E9662F;
  --kub-orange-text: #C24E14;

  --kub-text: #0A0A0A;
  --kub-text-2: #4A4A4A;
  --kub-text-3: #6F6F6F;
  --kub-text-4: #858585;

  --kub-white: #FFFFFF;
  --kub-surface: #F4F4F4;
  --kub-surface-2: #E4E4E4;
  --kub-dark: #1B1B1B;
  --kub-dark-2: #141414;

  --kub-border: #E4E4E4;
  --kub-border-2: #D2D2D2;
  --kub-track-off: #D6D6D6;
  --kub-focus: #0A0A0A;

  --kub-on-dark: #FFFFFF;
  --kub-on-dark-2: rgba(255,255,255,0.8);
  --kub-on-dark-3: rgba(255,255,255,0.6);
  --kub-line-on-dark: rgba(255,255,255,0.25);

  --kub-font-display: 'Unbounded', 'Helvetica Neue', Helvetica, sans-serif;
  --kub-font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --kub-r-card: 22px;
  --kub-r-card-sm: 18px;
  --kub-r-field: 14px;
  --kub-r-pill: 999px;

  --kub-container: 1440px;
  --kub-gutter: 64px;
  --kub-col-gap: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--kub-font-body);
  background: var(--kub-white);
  color: var(--kub-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--kub-orange-text); text-decoration: none; }
a:hover { color: var(--kub-orange); }
h1, h2, h3, p, blockquote { margin: 0; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, select, textarea { font-family: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

.eu { font-family: var(--kub-font-display); letter-spacing: -0.01em; font-weight: 500; }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.btn {
  background: var(--kub-orange);
  color: #FFFFFF;
  border: none;
  border-radius: var(--kub-r-pill);
  height: 48px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--kub-font-display);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--kub-orange-hover); color: #FFFFFF; }
.btn--lg { height: 52px; padding: 0 32px; font-size: 16px; }
.btn--form { height: 56px; font-size: 16px; width: 100%; }
.btn--outline {
  background: transparent; color: var(--kub-text); border: 1px solid var(--kub-text);
  height: 48px; padding: 0 24px; border-radius: var(--kub-r-pill);
  font-family: var(--kub-font-display); font-weight: 500; font-size: 14px;
  display: inline-flex; align-items: center; gap: 10px;
}
.btn--outline-light { background: transparent; color: #FFFFFF; border: 1px solid rgba(255,255,255,0.5); }
.btn--outline-light:hover { background: rgba(255,255,255,0.1); color: #FFFFFF; }
.link-pill {
  height: 44px; padding: 0 14px; display: inline-flex; align-items: center;
  border: 1px solid rgba(255,255,255,0.6); border-radius: var(--kub-r-pill);
  color: #FFFFFF; font-size: 14px; font-family: var(--kub-font-display); font-weight: 500;
}

.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--kub-focus);
  outline-offset: 3px;
}
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: #FFFFFF; }

.ic { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

.field {
  height: 56px;
  border: none;
  border-radius: var(--kub-r-field);
  padding: 0 18px;
  font-size: 17px;
  background: var(--kub-surface);
  color: var(--kub-text);
  width: 100%;
  min-width: 0;
}
.field--on-surface { background: #FFFFFF; }
select.field {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%236F6F6F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 16px;
}
textarea.field { height: auto; padding: 14px 18px; resize: none; }
.field-label { font-size: 15px; color: var(--kub-text-2); }
.field-group { display: flex; flex-direction: column; gap: 8px; }

.checks { display: flex; flex-direction: column; gap: 12px; margin: 8px 0; }
.check {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px; line-height: 1.4; color: var(--kub-text-2); cursor: pointer;
}
.on-dark .check { color: var(--kub-on-dark-2); }
.check a { text-decoration: underline; }
.check input {
  width: 20px; height: 20px; margin: 0; flex-shrink: 0; margin-top: 1px;
  appearance: none; -webkit-appearance: none;
  border: 1.5px solid var(--kub-border-2); border-radius: 5px; background: #FFFFFF;
  position: relative; cursor: pointer;
}
.check input:checked { background: var(--kub-orange); border-color: var(--kub-orange); }
.check input:checked::after {
  content: ""; position: absolute; left: 50%; top: 42%;
  width: 5px; height: 9px; border: solid #FFFFFF; border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.form-note { margin: 0; font-size: 14px; line-height: 1.45; color: var(--kub-text-3); }
.form-status { font-size: 14px; color: var(--kub-text-2); min-height: 20px; }
.form-status[data-state="ok"] { color: #1E7A3D; }
.form-status[data-state="error"] { color: #C23616; }

.form-download {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  background: #FFFFFF; border: 1px solid var(--kub-border); border-radius: var(--kub-r-card-sm);
  padding: 24px;
}
.form-download__icon {
  width: 40px; height: 40px; border-radius: 50%; background: #1E7A3D; color: #FFFFFF;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 4px;
}
.form-download__icon svg { width: 20px; height: 20px; }
.form-download__title { font-family: var(--kub-font-display); font-weight: 500; font-size: 18px; line-height: 1.25; color: var(--kub-text); }
.form-download__note { margin: 0; font-size: 14px; line-height: 1.45; color: var(--kub-text-2); }
.form-download__link { text-decoration: none; margin-top: 6px; display: inline-flex; align-items: center; }

input[type=range] { accent-color: var(--kub-orange); width: 100%; height: 28px; }
.hscroll { scrollbar-width: thin; scrollbar-color: #B7B7B7 transparent; }

/* ===== Layout ===== */
.container {
  max-width: var(--kub-container);
  margin: 0 auto;
  padding: 0 var(--kub-gutter);
}
.on-dark { color: #FFFFFF; }
.section { padding-top: 112px; }
.section--tight { padding-top: 56px; }
.section--loose { padding-top: 128px; }
/* «Приезжайте в гости» — последняя секция перед подвалом, своего нижнего отступа у подвала нет */
#trust { padding-bottom: 128px; }
.section-head {
  display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--kub-col-gap);
  align-items: end; margin-bottom: 64px;
}
.section-head__title { grid-column: span 7; }
.section-head__lede { grid-column: span 5; margin: 0; font-size: 18px; line-height: 1.45; color: var(--kub-text-3); }
.h2 { margin: 0; font-weight: 500; font-size: 48px; line-height: 1.1; }
.h2--sm { font-size: 44px; }
.eyebrow { font-size: 13px; color: var(--kub-orange-text); margin-bottom: 16px; }
.on-dark .eyebrow { color: var(--kub-orange); }

/* ===== Topbar ===== */
.topbar { background: #0A0A0A; color: rgba(255,255,255,0.7); font-size: 14px; }
.topbar .container { padding-top: 10px; padding-bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.topbar a { color: rgba(255,255,255,0.85); }

/* ===== Header ===== */
.site-header { position: relative; background: var(--kub-dark); color: #FFFFFF; }
.site-header .container { padding-top: 24px; padding-bottom: 0; }
.header-row { display: flex; align-items: center; gap: 36px; padding-bottom: 24px; }
.logo { color: #FFFFFF; flex-grow: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.logo img { height: 54px; width: auto; }
.logo__tag { font-size: 14px; line-height: 1.2; color: rgba(255,255,255,0.75); }
.header-contact { display: flex; align-items: center; gap: 14px; }
.phone-badge {
  width: 44px; height: 44px; border-radius: 50%; background: var(--kub-orange);
  display: flex; align-items: center; justify-content: center; color: #FFFFFF; flex-shrink: 0;
}
.phone-badge svg { width: 22px; height: 22px; }
.header-contact a.eu { color: #FFFFFF; font-size: 15px; line-height: 1.3; }
.social-row { display: flex; align-items: center; gap: 8px; }
.header-divider { border-top: 1px solid rgba(255,255,255,0.3); }
.main-nav { display: flex; align-items: center; gap: 8px; padding: 18px 0; font-family: var(--kub-font-display); font-size: 15px; }
.main-nav a { color: #FFFFFF; padding: 8px 16px; }
.main-nav a:first-child { border: 1px solid rgba(255,255,255,0.6); border-radius: 999px; }
.burger { display: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.5); align-items: center; justify-content: center; flex-shrink: 0; }
.burger svg { width: 22px; height: 22px; }
.mobile-menu-panel { display: none; }
.mobile-nav-list { display: flex; flex-direction: column; }
.mobile-nav-list a { color: #FFFFFF; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.15); font-family: var(--kub-font-display); font-size: 16px; }
.mobile-nav-list a.btn { padding: 0 28px; border-bottom: none; width: 100%; }
.mobile-social-row { display: flex; gap: 8px; margin-top: 16px; }
.mobile-menu-panel .header-contact { margin-top: 16px; }

.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--kub-col-gap); align-items: center; padding: 72px 0 80px; }
.hero-copy { grid-column: span 7; display: flex; flex-direction: column; gap: 32px; }
.hero-copy h1 { font-weight: 500; font-size: 48px; line-height: 1.08; max-width: 823px; }
.hero-copy h1 .accent { color: var(--kub-orange); }
.hero-sub { margin: 0; font-size: 22px; line-height: 1.35; max-width: 620px; color: rgba(255,255,255,0.88); }
.hero-ctas { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.3); }
.hero-facts > div { padding: 24px 16px 0 16px; border-right: 1px solid rgba(255,255,255,0.3); }
.hero-facts > div:last-child { border-right: none; padding-right: 0; }
.hero-facts > div:first-child { padding-left: 0; }
.hero-fact-num { font-weight: 500; font-size: 30px; line-height: 1; color: var(--kub-orange); }
.hero-fact-label { font-size: 15px; line-height: 1.4; margin-top: 10px; color: rgba(255,255,255,0.8); }
.hero-figure { grid-column: span 5; }
.hero-figure img { transform: scale(1.1); }

.office-bar { background: var(--kub-surface); }
.office-bar .container { padding: 28px var(--kub-gutter); display: flex; align-items: center; gap: 40px; }
.office-bar-main { display: flex; align-items: center; gap: 40px; }
.office-bar-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--kub-orange); color: #FFFFFF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.office-bar-icon svg { width: 24px; height: 24px; }
.office-bar-label { font-size: 14px; color: var(--kub-text-3); }
.office-bar-value { display: block; font-weight: 500; font-size: 20px; line-height: 1.25; margin-top: 4px; }
a.office-bar-value { color: var(--kub-text); }
a.office-bar-value:hover { color: var(--kub-orange); }
.office-bar-divider { width: 1px; height: 52px; background: var(--kub-border-2); flex-shrink: 0; }
.chip-row { display: flex; gap: 8px; margin-top: 0; align-items: center; flex-wrap: wrap; }
.chip { background: #FFFFFF; border: 1px solid var(--kub-border); border-radius: 999px; padding: 9px 18px; font-size: 16px; }

/* ===== Что защищаем ===== */
.what-grid { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 32px; align-items: start; }
.what-cats { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 32px; }
.what-cat {
  display: block; width: 100%; box-sizing: border-box; text-align: left;
  background: var(--kub-surface); border: 1.5px solid transparent; border-radius: 14px;
  padding: 14px 18px; font-family: var(--kub-font-body); font-size: 15px; font-weight: 500;
  line-height: 1.3; color: var(--kub-text); cursor: pointer;
}
.what-cat[aria-pressed="true"] { border-color: var(--kub-orange); background: #FFF5EF; color: var(--kub-orange-text); }
.what-output-head { display: flex; flex-wrap: nowrap; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--kub-border); }
.what-crumb { font-size: 15px; line-height: 1.6; color: var(--kub-text-3); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.what-crumb[hidden] { display: none; }
.what-crumb b { color: var(--kub-text); font-family: var(--kub-font-display); font-weight: 500; }
.what-crumb__sep { color: var(--kub-orange); margin: 0 10px; }
.what-reset {
  flex-shrink: 0; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--kub-text); background: transparent;
  color: var(--kub-text); font-family: var(--kub-font-display); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.what-reset:hover { background: var(--kub-text); color: #FFFFFF; }
.what-reset__x { display: none; }
.what-select-row { display: none; }
.what-cat-select {
  flex: 1 1 auto; min-width: 0; appearance: none; -webkit-appearance: none;
  height: 56px; padding: 0 44px 0 20px; border-radius: 999px; border: 1px solid var(--kub-text);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%230A0A0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center;
  background-size: 16px;
  color: var(--kub-text); font-family: var(--kub-font-display); font-size: 15px; font-weight: 500;
  cursor: pointer; text-overflow: ellipsis;
}
.what-reset--mobile { flex-shrink: 0; margin-left: 0; width: 56px; padding: 0; font-size: 18px; }

/* ===== Типовые решения ===== */
.solutions-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; align-items: start; }
.solutions-grid--single .solution-card { grid-column: 1 / -1; }
.solution-card { background: var(--kub-surface); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 20px; }
.solution-card[hidden] { display: none; }
.solution-card__img { background: var(--kub-surface-2); border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; }
.solution-card__body { padding: 0 12px 12px; }
.solution-card__body h3 { font-weight: 500; font-size: 20px; line-height: 1.2; }
.solution-card__body p { font-size: 16px; color: var(--kub-text-2); margin-top: 8px; line-height: 1.4; }

.solution-card--detail { background: #FFFFFF; border: 1px solid var(--kub-border); container: solution-card / inline-size; }
.solution-card__row { display: flex; flex-direction: column; gap: 20px; }
.solution-card--detail .solution-card__img {
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: #FFFFFF; cursor: pointer;
}
.solution-card--detail .solution-card__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.solution-card--detail .solution-card__body { display: flex; flex-direction: column; gap: 14px; flex-grow: 1; }
.solution-card--detail .solution-card__body h3 { min-height: 2.4em; }

/* Карточка решения сама переключается на 2 колонки (картинка слева/текст справа), когда её собственной
   ширины хватает на нормальную текстовую колонку — иначе остаётся в один столбец (картинка сверху). */
@container solution-card (min-width: 400px) {
  .solution-card__row { flex-direction: row; align-items: center; gap: 24px; }
  .solution-card--detail .solution-card__img { flex: 0 0 42%; aspect-ratio: 4 / 3; }
  .solution-card--detail .solution-card__body { padding: 4px 8px 4px 0; gap: 12px; }
  .solution-card--detail .solution-card__body h3 { min-height: 0; }
}
.solution-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: sol; flex-grow: 1; }
.solution-legend li { counter-increment: sol; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: var(--kub-text-2); }
.solution-legend li::before {
  content: counter(sol); flex-shrink: 0; font-family: var(--kub-font-display); font-weight: 500;
  font-size: 20px; line-height: 1.4; color: var(--kub-orange);
}
.solution-detail-btn {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; border-radius: 999px; border: 1px solid var(--kub-text); background: transparent; color: var(--kub-text);
  font-family: var(--kub-font-display); font-size: 14px; font-weight: 500; cursor: pointer; width: 100%;
}
.solution-detail-btn:hover { background: var(--kub-text); color: #FFFFFF; }

/* ===== Попап детального просмотра решения ===== */
.solution-modal {
  position: fixed; inset: 0; background: rgba(10,10,10,.65); display: none;
  align-items: center; justify-content: center; padding: 24px; z-index: 200;
}
.solution-modal.open { display: flex; }
.solution-modal__card { background: #FFFFFF; border-radius: var(--kub-r-card); max-width: 640px; width: 100%; max-height: 94vh; overflow: auto; padding: 22px 26px; display: flex; flex-direction: column; }
.solution-modal__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.solution-modal__card h3 { font-family: var(--kub-font-display); font-weight: 500; font-size: 19px; margin: 0; line-height: 1.25; }
.solution-modal__close { border: none; background: var(--kub-surface); width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0; font-size: 16px; cursor: pointer; color: var(--kub-text-2); }
.solution-modal__img { border-radius: 14px; overflow: hidden; background: #FFFFFF; border: 1px solid var(--kub-border); height: 42vh; position: relative; margin-bottom: 12px; flex-shrink: 0; }
.solution-modal__img img { width: 100%; height: 100%; object-fit: contain; display: block; position: absolute; inset: 0; opacity: 0; transition: opacity .2s; }
.solution-modal__img img.on { opacity: 1; }
.solution-step-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.solution-step-arrow {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 999px; border: none; background: var(--kub-surface);
  color: var(--kub-text); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.solution-step-arrow:disabled { color: #B7B7B7; cursor: default; }
.solution-step-arrow:not(:disabled):hover { background: var(--kub-surface-2); }
.solution-step-dots { flex-grow: 1; display: flex; justify-content: center; gap: 8px; }
.solution-step-dot {
  width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--kub-border); background: #FFFFFF;
  color: var(--kub-text-2); font-family: var(--kub-font-display); font-weight: 500; font-size: 13px; cursor: pointer;
}
.solution-step-dot:hover { border-color: var(--kub-orange); }
.solution-step-dot.active { background: var(--kub-orange); border-color: var(--kub-orange); color: #FFFFFF; }
.solution-step-dot--label { width: auto; height: 34px; padding: 0 16px; border-radius: 999px; font-size: 12px; }
.solution-single-note { font-size: 13px; color: var(--kub-text-3); margin-bottom: 12px; }
.solution-modal__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: sol-modal; }
.solution-modal__legend li { counter-increment: sol-modal; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: var(--kub-text-3); transition: color .2s; }
.solution-modal__legend li.active { color: var(--kub-text); }
.solution-modal__legend li.pending { color: var(--kub-text-3); }
.solution-modal__legend li::before {
  content: counter(sol-modal); flex-shrink: 0; font-family: var(--kub-font-display); font-weight: 500;
  font-size: 17px; line-height: 1.4; color: var(--kub-border-2); transition: color .2s;
}
.solution-modal__legend li.active::before { color: var(--kub-orange); }

/* ===== Калькулятор ===== */
.calc-section { background: var(--kub-dark-2); color: #FFFFFF; margin-top: 128px; }
.calc-section .section { padding-top: 112px; padding-bottom: 112px; }
.calc-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 24px; }
.calc-panel { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--kub-r-card); padding: 40px; display: flex; flex-direction: column; gap: 40px; }
.calc-step-label { font-size: 15px; color: rgba(255,255,255,0.7); display: flex; gap: 6px; }
.calc-step-label .num { color: var(--kub-orange); }
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip-btn {
  min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25);
  background: transparent; color: rgba(255,255,255,0.88); font-size: 16px; font-weight: 500;
}
.chip-btn[aria-pressed="true"] { border-color: var(--kub-orange); background: var(--kub-orange); color: #FFFFFF; }
.chip-group--on-light .chip-btn { border-color: var(--kub-border-2); color: var(--kub-text); }
.chip-group--on-light .chip-btn[aria-pressed="true"] { border-color: var(--kub-orange); background: var(--kub-orange); color: #FFFFFF; }
.faq-cats .chip-btn { min-height: 40px; padding: 0 14px; font-size: 15px; }
.calc-step-hint { color: rgba(255,255,255,0.45); font-weight: 400; }
.calc-dims { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 16px; }
.calc-dim-field { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 10px 14px; min-width: 0; }
.calc-dim-field label { display: block; font-size: 12px; color: rgba(255,255,255,0.55); margin-bottom: 6px; }
.calc-dim-input { display: flex; align-items: baseline; gap: 5px; }
.calc-dim-input input {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 8px;
  color: #FFFFFF; font-family: var(--kub-font-display); font-size: 16px; width: 100%; min-width: 0;
  padding: 6px 8px; cursor: text; -moz-appearance: textfield;
}
.calc-dim-input input:focus-visible { outline: none; border-color: var(--kub-orange); box-shadow: 0 0 0 3px rgba(244,119,61,0.25); }
.calc-dim-input input::-webkit-outer-spin-button, .calc-dim-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-dim-input span { font-size: 13px; color: rgba(255,255,255,0.5); flex-shrink: 0; }

.calc-layers { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; }
.calc-layer { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; cursor: pointer; }
.calc-layer:has(input:checked) { background: rgba(244,119,61,0.14); }
.calc-layer input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.calc-layer__sw { width: 34px; height: 20px; border-radius: 999px; background: rgba(255,255,255,0.16); position: relative; flex-shrink: 0; transition: background .15s; }
.calc-layer__sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; transition: left .15s; }
.calc-layer input:checked + .calc-layer__sw { background: var(--kub-orange); }
.calc-layer input:checked + .calc-layer__sw::after { left: 16px; }
.calc-layer input:focus-visible + .calc-layer__sw { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.calc-layer__name { flex: 1 1 auto; min-width: 0; font-size: 15px; overflow-wrap: break-word; }
.calc-layer__price { flex-shrink: 0; font-size: 13px; color: rgba(255,255,255,0.5); white-space: nowrap; }

.calc-result { background: var(--kub-surface); color: var(--kub-text); border-radius: var(--kub-r-card); padding: 40px; display: flex; flex-direction: column; gap: 20px; }
.calc-result__label { font-size: 14px; color: var(--kub-text-3); }
.calc-result__layers { display: flex; flex-direction: column; gap: 0; }
.calc-layer-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--kub-border); font-size: 14px; }
.calc-layer-row:last-child { border-bottom: none; }
.calc-layer-row__n { width: 22px; height: 22px; border-radius: 999px; background: var(--kub-orange); color: #FFFFFF; font-family: var(--kub-font-display); font-size: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.calc-layer-row__name { flex: 1; min-width: 0; color: var(--kub-text-2); }
.calc-layer-row__price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-result__placeholder { font-size: 16px; color: var(--kub-text-3); }
.calc-result__stats { display: flex; gap: 12px; }
.calc-stat { flex: 1; background: var(--kub-white); border: 1px solid var(--kub-border); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.calc-stat__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--kub-text-3); }
.calc-stat__value { font-size: 19px; margin-top: 6px; white-space: nowrap; }
.calc-stat--discount { background: rgba(63,166,107,0.08); border-color: rgba(63,166,107,0.3); }
.calc-stat--discount .calc-stat__value { color: #2F8F5B; }
.calc-result__price { font-size: 36px; font-weight: 500; line-height: 1.12; }
.calc-result__meta { display: flex; gap: 40px; padding: 20px 0; border-top: 1px solid var(--kub-border); border-bottom: 1px solid var(--kub-border); }
.calc-result__meta-label { font-size: 14px; color: var(--kub-text-3); }
.calc-result__meta-value { font-size: 17px; margin-top: 6px; }

/* ===== Комбинированная защита + Пределы ===== */
.combo-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; align-items: start; }
.combo-copy { display: flex; flex-direction: column; gap: 28px; padding-right: 40px; }
.combo-copy h2 { font-size: 40px; line-height: 1.12; }
.combo-copy p.lead { font-size: 18px; line-height: 1.45; color: var(--kub-text-2); }
.combo-copy p.sub { font-size: 18px; line-height: 1.45; color: var(--kub-text-2); }
.limits-card { background: var(--kub-surface); border-radius: var(--kub-r-card); padding: 40px; display: flex; flex-direction: column; gap: 20px; }
.limits-card__head { display: flex; align-items: center; gap: 14px; color: var(--kub-orange); }
.limits-card__head svg { width: 44px; height: 44px; }
.limits-card__head h3 { font-weight: 500; font-size: 22px; line-height: 1.1; color: var(--kub-text); }
.limits-card p { font-size: 18px; line-height: 1.45; color: var(--kub-text-2); }
.layers-panel { grid-column: span 2; background: var(--kub-surface); border-radius: var(--kub-r-card); padding: 32px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px 32px; align-items: start; }
.layers-diagram { background: #FFFFFF; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; }
.layers-diagram img { width: 100%; height: auto; aspect-ratio: 1400 / 949; object-fit: cover; border-radius: 10px; display: block; }
.layers-side { display: flex; flex-direction: column; gap: 16px; }
.layers-list__label { grid-column: 1 / -1; font-weight: 500; font-size: 20px; line-height: 1.15; color: var(--kub-text); }
.layers-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 10px; }
.layer-tile {
  display: flex; gap: 10px; align-items: center; text-align: left; width: 100%; box-sizing: border-box; min-width: 0;
  padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--kub-border-2); background: #FFFFFF; color: var(--kub-text);
}
.layer-tile__num { width: 26px; height: 26px; border-radius: 50%; background: var(--kub-surface-2); color: var(--kub-text); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.layer-tile__title { font-size: 13px; font-weight: 500; line-height: 1.2; min-width: 0; flex-grow: 1; overflow-wrap: break-word; }
.layer-tile[aria-pressed="true"] { border-color: var(--kub-orange); background: #FFF5EF; }
.layer-tile[aria-pressed="true"] .layer-tile__num { background: var(--kub-orange); color: #FFFFFF; }
.layers-desc { background: #FFFFFF; border-radius: 14px; padding: 18px 20px; }
.layers-desc__title { font-size: 17px; font-weight: 500; line-height: 1.2; }
.layers-desc__text { font-size: 14px; line-height: 1.45; color: var(--kub-text-2); margin-top: 8px; }
.layers-note { margin-top: auto; padding-top: 4px; font-size: 13px; line-height: 1.4; color: var(--kub-text-3); }
.layers-slider, .layers-note--mobile { display: none; }

/* ===== Уровни защиты ===== */
.levels-table { background: var(--kub-surface); border-radius: var(--kub-r-card); overflow: hidden; }
.levels-row {
  display: grid; grid-template-columns: 72px minmax(0,2.4fr) 150px minmax(0,1fr) minmax(0,1fr) 150px;
  align-items: center; padding: 24px 32px; border-bottom: 1px solid var(--kub-border);
}
.levels-row--head { padding: 20px 32px; font-size: 14px; color: var(--kub-text-3); }
.levels-row--opt { background: #ECECEC; }
.levels-row__num { font-size: 22px; font-family: var(--kub-font-display); color: var(--kub-orange); }
.levels-row--opt .levels-row__num { color: var(--kub-text-3); }
.levels-row__title h3 { font-weight: 500; font-size: 20px; line-height: 1.15; }
.levels-row__title p { font-size: 16px; color: var(--kub-text-2); margin-top: 6px; line-height: 1.4; }
.levels-row__title { padding-right: 24px; }
.level-bars { display: flex; gap: 4px; align-items: center; }
.level-bars span { width: 18px; height: 18px; border-radius: 4px; background: var(--kub-track-off); }
.level-bars span.on { background: var(--kub-orange); }
.levels-row__price { font-family: var(--kub-font-display); font-weight: 500; font-size: 20px; }
.levels-row__cta { font-size: 15px; font-weight: 600; justify-self: end; }
.levels-row__level-label { display: none; }

/* ===== Штрафы ===== */
.penalties-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; align-items: start; }
.penalties-panel { background: var(--kub-dark); color: #FFFFFF; border-radius: var(--kub-r-card); padding: 48px; display: flex; flex-direction: column; gap: 24px; }
.penalties-panel h2 { font-weight: 500; font-size: 40px; line-height: 1.12; }
.penalties-panel > p { font-size: 17px; line-height: 1.5; color: rgba(255,255,255,0.8); }
.penalty-items { margin-top: 8px; }
.penalty-item { padding: 24px 0; border-top: 1px solid rgba(255,255,255,0.2); display: flex; flex-direction: column; gap: 8px; }
.penalty-item__num { font-weight: 500; font-size: 34px; line-height: 1.1; color: var(--kub-orange); white-space: nowrap; }
.penalty-item__text { font-size: 16px; line-height: 1.45; color: rgba(255,255,255,0.85); }
.penalty-item__text b { font-weight: 600; color: #FFFFFF; }
.penalty-item__src { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.55); }
.penalties-side { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 32px; }
.cta-card { background: var(--kub-surface); border-radius: var(--kub-r-card); padding: 40px; display: flex; flex-direction: column; gap: 16px; }
.cta-card__title { font-weight: 500; font-size: 28px; line-height: 1.2; }
.cta-card__text { font-size: 17px; line-height: 1.5; color: var(--kub-text-2); }
.cta-card form { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.cta-card form .form-fields { display: flex; flex-direction: column; gap: 16px; }
.penalties-disclaimer { margin: 20px 0 0; font-size: 13px; line-height: 1.45; color: var(--kub-text-3); }

/* ===== Нормативы ===== */
.norms-head { display: flex; flex-direction: column; gap: 10px; }
.norms-head h2 { margin: 0; font-weight: 500; font-size: 40px; line-height: 1.12; }
.norms-head p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--kub-text-2); }
.norms-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.norms-pill { display: inline-flex; align-items: center; gap: 8px; background: #FFFFFF; border: 1px solid var(--kub-border); border-radius: 999px; padding: 9px 16px 9px 12px; font-family: var(--kub-font-display); font-weight: 500; font-size: 14px; color: var(--kub-text); }
.norms-pill__ic { width: 18px; height: 18px; border-radius: 50%; background: var(--kub-orange); color: #FFFFFF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.norms-pill__ic svg { width: 9px; height: 9px; }
.norms-panel { margin-top: 24px; background: var(--kub-dark); border-radius: var(--kub-r-card); padding: 28px 36px; display: flex; align-items: center; gap: 20px; }
.norms-panel__ic { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.1); color: #FFFFFF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.norms-panel__ic svg { width: 16px; height: 16px; }
.norms-panel__text { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.85); }
.norms-panel__line { display: block; }
.norms-panel__line + .norms-panel__line { margin-top: 2px; }

/* ===== Документы ===== */
.docs-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.docs-toolbar__hint { font-size: 15px; color: var(--kub-text-3); }
.docs-arrows { display: flex; gap: 12px; }
.docs-arrow { width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--kub-surface); color: var(--kub-text); display: flex; align-items: center; justify-content: center; }
.docs-arrow svg { width: 20px; height: 20px; }
.docs-arrow[disabled] { color: #B7B7B7; cursor: default; }
.docs-scroll { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 20px; margin-right: calc(var(--kub-gutter) * -1); padding-right: var(--kub-gutter); }
.doc-card { background: var(--kub-surface); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 16px; flex: 0 0 calc((100% - 72px) / 4); min-width: 0; scroll-snap-align: start; }
.doc-card__thumb { background: var(--kub-surface-2); border-radius: 16px; display: flex; justify-content: center; padding: 12px 0; }
.doc-card__thumb svg { width: 64px; height: 80px; }
.doc-card__body { padding: 0 8px 8px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.doc-card__body h3 { font-weight: 500; font-size: 20px; line-height: 1.2; }
.doc-card__body p { font-size: 16px; color: var(--kub-text-2); line-height: 1.4; }
.doc-card__meta { font-size: 13px; color: var(--kub-text-3); }
.doc-card__link { font-family: var(--kub-font-display); font-size: 13px; margin-top: auto; padding-top: 8px; }
.docs-progress { position: relative; height: 4px; background: var(--kub-border); border-radius: 2px; margin-top: 4px; }
.docs-progress__thumb { position: absolute; top: 0; height: 4px; width: 50%; background: var(--kub-orange); border-radius: 2px; }

/* ===== Этапы ===== */
.h2--loose { margin-bottom: 64px; }
.steps-panel { background: var(--kub-surface); border-radius: var(--kub-r-card); padding: 32px 36px; }
.steps-rail { position: relative; }
.steps-rail__line { position: absolute; left: 24px; right: 24px; top: 24px; height: 2px; background: var(--kub-border-2); }
.steps-grid { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 0; }
.step { display: flex; flex-direction: column; gap: 14px; padding-right: 12px; min-width: 0; }
.step h3, .step p { overflow-wrap: break-word; }
.step-dot { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; background: var(--kub-orange); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 500; flex-shrink: 0; border: 4px solid var(--kub-surface); box-sizing: border-box; }
.step:last-child .step-dot { background: var(--kub-text); }
.step h3 { font-weight: 500; font-size: 17px; line-height: 1.2; }
.step p { font-size: 15px; line-height: 1.4; color: var(--kub-text-2); }

/* ===== Обслуживание ===== */
.service-banner { background: var(--kub-orange); color: #FFFFFF; border-radius: var(--kub-r-card); padding: 48px; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,2fr); gap: 48px; align-items: center; }
.service-banner__title { font-weight: 500; font-size: 34px; line-height: 1.15; margin-top: 14px; }
.service-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.service-list > div { border-top: 1px solid rgba(255,255,255,0.5); padding-top: 16px; }
.service-list h3 { font-weight: 500; font-size: 17px; }
.service-list p { font-size: 16px; margin-top: 8px; line-height: 1.4; }

/* ===== О КУБе ===== */
.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 48px; }
.about-copy { display: flex; flex-direction: column; gap: 40px; }
.about-copy h2 { font-weight: 500; font-size: 40px; line-height: 1.12; }
.about-facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.about-fact-num { font-weight: 500; font-size: 56px; line-height: 1; color: var(--kub-orange); }
.about-fact-label { font-size: 16px; line-height: 1.4; color: var(--kub-text-2); margin-top: 10px; }
.clients-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 16px; }
.client-tile { background: var(--kub-surface); border-radius: 18px; height: 80px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 16px; font-size: 14px; font-weight: 500; color: var(--kub-text-3); }
.client-tile img { max-width: 100%; max-height: 44px; width: auto; height: auto; object-fit: contain; }
.about-photo { position: relative; margin: 0; border-radius: var(--kub-r-card); overflow: hidden; min-height: 420px; }
.about-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== Кейсы ===== */
.cases-banner { background: var(--kub-surface); border-radius: var(--kub-r-card); padding: 32px 40px; display: grid; grid-template-columns: 72px minmax(0,1fr) auto; gap: 28px; align-items: center; margin-bottom: 24px; }
.cases-banner svg { width: 64px; height: 64px; color: var(--kub-orange); }
.cases-banner h3 { font-weight: 500; font-size: 24px; line-height: 1.2; }
.cases-banner p { margin: 10px 0 0; font-size: 17px; line-height: 1.45; color: var(--kub-text-2); }
.cases-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.cases-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.placeholder-card { background: var(--kub-surface); border-radius: 20px; padding: 28px 24px; display: flex; flex-direction: column; gap: 20px; }
.placeholder-card__photo { margin: -28px -24px 0; border-radius: 20px 20px 0 0; overflow: hidden; aspect-ratio: 16 / 9; }
.placeholder-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.placeholder-card__body { display: flex; flex-direction: column; gap: 16px; }
.placeholder-card__tag { font-size: 13px; color: var(--kub-orange-text); }
.placeholder-card__body h3 { font-weight: 500; font-size: 22px; line-height: 1.15; }
.case-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 16px; padding: 16px 0; border-top: 1px solid var(--kub-border); border-bottom: 1px solid var(--kub-border); }
.case-stats-grid .lbl { font-size: 13px; color: var(--kub-text-3); }
.case-stats-grid .val { font-size: 16px; font-weight: 600; margin-top: 2px; }
.placeholder-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.placeholder-card__list li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.4; color: var(--kub-text-2); }
.placeholder-card__list li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--kub-orange); }
.visit-steps { margin-top: 24px; border: 1px solid var(--kub-border); border-radius: var(--kub-r-card); padding: 28px 36px; display: grid; grid-template-columns: minmax(0,1fr) repeat(3, minmax(0,1fr)); gap: 24px; align-items: center; }
.visit-steps__title { font-weight: 500; font-size: 18px; line-height: 1.3; }
.visit-step { display: flex; gap: 14px; align-items: flex-start; }
.visit-step span.num { color: var(--kub-orange); font-size: 16px; font-family: var(--kub-font-display); }
.visit-step span.text { font-size: 16px; line-height: 1.4; }

/* ===== Траст ===== */
.visit-stack { display: flex; flex-direction: column; gap: 24px; }
.trust-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; align-items: stretch; }
.map-card { position: relative; height: 280px; border-radius: var(--kub-r-card); overflow: hidden; background: var(--kub-surface-2); }
.map-card svg, .map-card iframe { width: 100%; height: 100%; display: block; }
.map-card__overlay { position: absolute; left: 16px; right: 16px; bottom: 16px; background: #FFFFFF; border-radius: 16px; padding: 16px 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.map-card__overlay-text { font-size: 15px; font-family: var(--kub-font-display); }

.reviews-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; align-items: stretch; }
.review-card { background: var(--kub-surface); border-radius: var(--kub-r-card); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.review-card__head { display: flex; align-items: baseline; gap: 10px; }
.review-card__name { font-size: 17px; }
.review-card__sub { font-size: 13px; color: var(--kub-text-3); }
.review-card__embed { margin: 0 -24px; overflow: hidden; height: 420px; background: var(--kub-surface-2); position: relative; }
.review-card__embed iframe { width: 100%; height: 100%; display: block; border: 0; position: absolute; inset: 0; }
.review-card__link { font-size: 13px; align-self: flex-start; }

.partners-card { background: var(--kub-surface); border-radius: var(--kub-r-card); padding: 28px; }
.partners-card h3 { font-weight: 500; font-size: 20px; line-height: 1.2; margin-bottom: 20px; }
.partners-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; }
.partners-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.partner-tile { background: #FFFFFF; border-radius: 18px; height: 88px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px 14px; font-size: 13px; color: var(--kub-text-3); line-height: 1.3; }
.partner-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ===== Блог / Подписка ===== */
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.post-card { background: var(--kub-surface); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 20px; }
.post-card__cover { background: var(--kub-dark); border-radius: 16px; height: 180px; display: flex; align-items: flex-end; padding: 16px; background-size: cover; background-position: center; }
.post-card__tag { font-size: 12px; color: #FFFFFF; border: 1px solid rgba(255,255,255,0.5); padding: 7px 14px; border-radius: 999px; font-family: var(--kub-font-display); }
.post-card__body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
.post-card__body h3 { font-weight: 500; font-size: 20px; line-height: 1.25; }
.post-card__link { font-family: var(--kub-font-display); font-size: 13px; margin-top: auto; padding-top: 8px; }
.subscribe-card { margin-top: 24px; background: var(--kub-surface); color: var(--kub-text); border-radius: var(--kub-r-card); padding: 48px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 64px; align-items: start; }
.subscribe-card__eyebrow { grid-column: 1 / -1; }
.subscribe-card__copy { display: flex; flex-direction: column; gap: 20px; }
.subscribe-card__title { font-weight: 500; font-size: 30px; line-height: 1.2; }
.subscribe-card__text { font-size: 18px; line-height: 1.5; color: var(--kub-text-2); }
.subscribe-form { display: flex; flex-direction: column; gap: 16px; }
.subscribe-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ===== FAQ ===== */
.faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--kub-col-gap); align-items: start; }
.faq-intro { grid-column: span 4; position: sticky; top: 32px; }
.faq-intro p { margin: 24px 0 0; font-size: 18px; line-height: 1.45; color: var(--kub-text-3); }
.faq-intro a { display: inline-block; margin-top: 20px; font-size: 14px; font-family: var(--kub-font-display); }
.faq-list { grid-column: span 8; background: var(--kub-surface); border-radius: var(--kub-r-card); padding: 16px 40px; }
.faq-cats { margin-top: 0; margin-bottom: 8px; }
.faq-item { border-bottom: 1px solid var(--kub-border); }
.faq-item:last-child { border-bottom: none; }
.faq-q__heading { margin: 0; font-weight: 400; }
.faq-q {
  width: 100%; min-height: 72px; padding: 22px 0; background: none; border: none;
  display: flex; align-items: center; gap: 24px; text-align: left; color: var(--kub-text);
}
.faq-q__sign { font-family: var(--kub-font-display); font-size: 22px; color: var(--kub-orange); width: 24px; flex-shrink: 0; }
.faq-q__text { margin: 0; font-family: var(--kub-font-display); font-size: 18px; font-weight: 500; line-height: 1.25; }
.faq-a { margin: 0 0 24px 48px; font-size: 17px; line-height: 1.5; color: var(--kub-text-2); max-width: 640px; }
.faq-a[hidden] { display: none; }

/* ===== Форма ===== */
.contact-section { background: var(--kub-dark-2); color: #FFFFFF; margin-top: 128px; }
.contact-section .section { padding-top: 112px; padding-bottom: 112px; }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 64px; }
.contact-copy { display: flex; flex-direction: column; gap: 32px; }
.contact-copy h2 { font-weight: 500; font-size: 40px; line-height: 1.12; }
.survey-card { background: rgba(255,255,255,0.08); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.survey-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.survey-card__head h3 { font-weight: 500; font-size: 20px; }
.survey-card__head span { font-size: 14px; color: rgba(255,255,255,0.7); }
.survey-card p { font-size: 16px; line-height: 1.45; color: rgba(255,255,255,0.75); }
.survey-card__actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.survey-card__actions .text-link { color: #FFFFFF; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,0.5); padding-bottom: 3px; }
.contact-phone-row { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.contact-messengers { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.contact-phone-row .lbl { font-size: 14px; color: rgba(255,255,255,0.65); }
.contact-phone-row a.phone { color: #FFFFFF; font-size: 24px; font-weight: 500; font-family: var(--kub-font-display); }
.lead-form { background: #FFFFFF; color: var(--kub-text); border-radius: var(--kub-r-card); padding: 40px; display: flex; flex-direction: column; gap: 20px; }
.lead-form h3 { font-weight: 500; font-size: 24px; }

/* ===== Подвал ===== */
.site-footer { background: #0A0A0A; color: rgba(255,255,255,0.7); }
.footer-grid { padding-top: 64px; padding-bottom: 32px; display: grid; grid-template-columns: minmax(0,1.5fr) repeat(3, minmax(0,1fr)); gap: 32px; font-size: 16px; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.footer-brand img { height: 46px; width: auto; }
.footer-brand .eu { color: #FFFFFF; font-size: 15px; }
.footer-brand .eu a { color: inherit; }
.footer-brand .eu a:hover { color: var(--kub-orange); }
.footer-phones { display: flex; flex-direction: column; gap: 4px; }
.footer-social-row { display: flex; gap: 8px; margin-top: 4px; }
.footer-social-row a {
  height: 36px; padding: 0 14px; display: inline-flex; align-items: center;
  border: 1px solid rgba(255,255,255,0.3); border-radius: var(--kub-r-pill);
  color: rgba(255,255,255,0.85); font-size: 13px; font-family: var(--kub-font-display);
}
.footer-social-row a:hover { color: #FFFFFF; border-color: rgba(255,255,255,0.6); }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col__title { font-family: var(--kub-font-display); font-size: 13px; color: #FFFFFF; }
.footer-col a { color: rgba(255,255,255,0.7); }
.footer-bottom { padding-top: 20px; padding-bottom: 32px; border-top: 1px solid rgba(255,255,255,0.15); font-size: 14px; color: rgba(255,255,255,0.55); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-bottom a { color: rgba(255,255,255,0.55); text-decoration: underline; }

/* =======================================================
   Планшет и мобильная версия: < 1280px
   Мобильная раскладка тянется до 1279 (контейнер max-width 720),
   на телефонах (≤600) — свои поля 20px, min-width 360.
   HANDOFF, разделы 3 и «Мобильная версия».
   ======================================================= */
@media (max-width: 1279.98px) {
  :root { --kub-gutter: 20px; }
  .container { max-width: 720px; }
  html, body { min-width: 360px; }

  .section { padding-top: 64px; }
  .section--loose { padding-top: 72px; }
  .section--tight { padding-top: 40px; }
  #trust { padding-bottom: 72px; }

  .h2, .section-head__title .h2 { font-size: 26px; line-height: 1.25; }
  .combo-copy h2, .about-copy h2, .h2--sm, .penalties-panel h2, .contact-copy h2, .norms-head h2 { font-size: 26px; line-height: 1.25; }
  .hero-copy h1 { font-size: 30px; line-height: 1.2; max-width: none; }

  .section-head { grid-template-columns: minmax(0,1fr); margin-bottom: 32px; gap: 16px; }
  .section-head__title, .section-head__lede { grid-column: 1; }

  .burger { display: flex; }
  .main-nav, .social-row, .header-cta { display: none; }
  .header-row { flex-wrap: wrap; gap: 16px; }
  .mobile-menu-panel { flex-direction: column; gap: 0; padding-bottom: 20px; }
  .mobile-menu-panel:not([hidden]) { display: flex; }

  .hero-grid { grid-template-columns: minmax(0,1fr); padding: 40px 0 48px; gap: 32px; }
  .hero-copy { grid-column: 1; gap: 24px; }
  .hero-sub { font-size: 17px; max-width: none; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero-ctas .btn { width: 100%; }
  .hero-facts { grid-template-columns: 0.92fr 1.2fr 0.88fr; }
  .hero-facts > div { padding: 20px 8px 0 8px; border-right: none; }
  .hero-facts > div:first-child { padding-left: 0; }
  .hero-facts > div:last-child { padding-right: 0; }
  .hero-figure { display: none; }

  .office-bar .container { flex-direction: column; align-items: stretch; gap: 16px; padding: 24px var(--kub-gutter); }
  .office-bar-main { gap: 16px; }
  .office-bar-divider { display: none; }
  .chip { font-size: 14px; padding: 7px 14px; }

  .what-grid { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .what-cats { flex-direction: row; flex-wrap: wrap; position: static; }
  .what-cat { width: auto; }

  .solutions-grid, .cases-grid, .service-list, .reviews-grid { grid-template-columns: minmax(0,1fr); }

  /* Блог на планшете/мобильном — горизонтальный слайдер карточек вместо сетки */
  .blog-grid {
    display: flex; flex-wrap: nowrap; gap: 16px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--kub-gutter));
    padding: 0 calc(var(--kub-gutter) + 8px) 6px;
    scroll-padding-left: calc(var(--kub-gutter) + 8px);
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }
  .post-card { flex: 0 0 82%; min-width: 0; scroll-snap-align: start; }
  .review-card__embed { height: 380px; }

  /* Сброс фильтра «Что защищаем» — на мобильном и планшете просто крестик, без текста */
  .what-reset__text { display: none; }
  .what-reset__x { display: inline; }
  #whatShowAll { width: 44px; padding: 0; font-size: 16px; }

  .about-facts { grid-template-columns: minmax(0,1fr); gap: 0; border-top: 1px solid var(--kub-border); }
  .about-facts > div { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--kub-border); }
  .about-fact-num { font-size: 28px; flex: 0 0 96px; white-space: nowrap; }
  .about-fact-label { font-size: 15px; margin-top: 0; }

  .calc-section .section { padding-top: 56px; padding-bottom: 56px; }
  .calc-grid { grid-template-columns: minmax(0,1fr); }
  .chip-group { gap: 8px; }
  .calc-dims { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .calc-result__price { font-size: 28px; }
  .calc-result__meta { gap: 24px; }

  .combo-grid, .penalties-grid, .about-grid, .contact-grid, .trust-grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .combo-copy { padding-right: 0; }
  .penalties-grid { gap: 0; }
  .penalties-side { position: static; }
  .layers-panel { grid-column: 1; grid-template-columns: minmax(0,1fr); gap: 24px; }

  .levels-table { background: transparent; }
  .levels-row--head { display: none; }
  .levels-row {
    grid-template-columns: auto minmax(0,1fr) minmax(0,auto);
    grid-template-areas: "num title title" "bars bars bars" "desc desc desc" "term term term" "price price cta";
    column-gap: 14px; row-gap: 8px; align-items: start;
    border-radius: 18px; background: var(--kub-surface);
    margin-bottom: 12px; border-bottom: none; padding: 20px 20px 16px;
  }
  .levels-row--opt { background: #ECECEC; }
  .levels-row__num { grid-area: num; align-self: center; min-width: 0; }
  .levels-row__title { display: contents; padding-right: 0; }
  .levels-row__title h3 { grid-area: title; align-self: center; min-width: 0; }
  .levels-row__title p { grid-area: desc; min-width: 0; }
  .level-bars { grid-area: bars; align-self: center; justify-self: start; min-width: 0; margin-top: 2px; }
  .levels-row__price { grid-area: price; align-self: center; min-width: 0; line-height: 1.2; }
  .levels-row__term { grid-area: term; align-self: start; color: var(--kub-text-3); font-size: 15px; margin-top: 14px; min-width: 0; }
  .levels-row__cta { grid-area: cta; align-self: center; justify-self: end; min-width: 0; white-space: nowrap; }

  .cta-card { padding: 28px; }
  .penalty-item__num { font-size: 30px; }
  .penalty-item--wide .penalty-item__num { font-size: 20px; }

  /* «Обслуживание от 50 000 ₽/мес» — на планшете/мобильном сплошная зона заливки во весь экран (как hero), не карточка с полями */
  .service-banner {
    grid-template-columns: minmax(0,1fr); gap: 24px; text-align: left;
    border-radius: 0; margin: 0 calc(-1 * var(--kub-gutter)); padding: 32px var(--kub-gutter);
  }

  /* «Защита от БПЛА — не инициатива»: на планшете/мобильном — сплошная зона заливки во весь экран (тёмная, как header в hero), а не карточка с полями */
  .penalties-panel {
    border-radius: 0;
    margin: 0 calc(-1 * var(--kub-gutter));
    padding: 56px var(--kub-gutter) 32px;
  }
  .penalty-items {
    margin: 0 calc(-1 * var(--kub-gutter));
    padding: 24px var(--kub-gutter) 0;
  }

  /* CTA-форма «Что закон требует…» — на планшете/мобильном тоже сплошная зона заливки (серая, подложка та же, что у cta-card), без карточки с полями */
  .cta-card {
    border-radius: 0;
    margin: 0 calc(-1 * var(--kub-gutter));
    padding: 32px var(--kub-gutter);
  }

  .docs-toolbar { display: none; }
  .docs-scroll { margin-right: calc(var(--kub-gutter) * -1); padding-right: var(--kub-gutter); margin-top: 4px; }
  .doc-card { flex: 0 0 76%; }

  /* Заголовки без section-head (Этапы и сроки / Блог / Приезжайте в гости): на доп. экранах отступ до тела блока должен быть меньше, иначе заголовок «висит» между секциями — тот же класс .h2--loose применяют все три */
  .h2--loose { margin-bottom: 28px; }

  .about-grid { gap: 48px; }
  .clients-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* Фото в блоке «О КУБе» — только для десктопа: на планшете/мобильном без явной высоты колонки картинка растягивалась на весь натуральный рост (огромная), выводим только на десктопе */
  .about-photo { display: none; }
  .case-card__stats { gap: 16px 24px; flex-wrap: wrap; }

  .cases-banner { grid-template-columns: minmax(0,1fr); text-align: left; }
  .cases-banner .btn { width: 100%; }
  .visit-steps { grid-template-columns: minmax(0,1fr); gap: 16px; padding: 24px; }

  .map-card { height: 200px; }
  .partners-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }

  .subscribe-card { grid-template-columns: minmax(0,1fr); gap: 24px; padding: 28px; }
  .subscribe-form__row { grid-template-columns: minmax(0,1fr); }

  .faq-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .faq-intro, .faq-list { grid-column: 1; }
  .faq-intro { position: static; }
  .faq-list { padding: 8px 20px; }

  .contact-section .section { padding-top: 56px; padding-bottom: 56px; }
  .lead-form, .survey-card { padding: 24px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; padding-top: 40px; padding-bottom: 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }
}

@media (max-width: 599.98px) {
  .case-stats-grid { grid-template-columns: minmax(0,1fr); }
  .footer-grid { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 767.98px) {
  /* Категории идут строкой пилюль над решениями — добавляем отбивку перед крошкой */
  .what-output-head { flex-wrap: wrap; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--kub-border); }

  /* Шапка: убираем график работы, телефон — кружком, рядом с бургером справа от лого */
  .topbar__hours { display: none; }
  .header-row { flex-wrap: nowrap; gap: 12px; }
  .header-contact--compact { gap: 0; }
  .header-contact--compact .phone-group { display: none; }

  /* Статы hero — мелкий размер только на настоящем мобильном; на планшете крупнее (см. ниже) */
  .hero-fact-num { font-size: 16px; white-space: nowrap; }
  .hero-fact-label { font-size: 11.5px; margin-top: 6px; }

  /* Калькулятор: на узком мобильном поля размеров и статы сжимаются плотнее */
  .calc-dims { gap: 8px; }
  .calc-dim-field { padding: 8px 10px; }
  .calc-result__stats { gap: 8px; }
  .calc-stat { padding: 10px 10px; }
  .calc-stat__value { font-size: 16px; }

  /* Слои защиты: названию не хватало ширины рядом с ценой (слова ломались) — цена переезжает под название */
  .calc-layer { display: grid; grid-template-columns: 34px minmax(0,1fr); grid-template-areas: "sw name" "sw price"; column-gap: 12px; row-gap: 2px; align-items: start; }
  .calc-layer__sw { grid-area: sw; margin-top: 2px; }
  .calc-layer__name { grid-area: name; overflow-wrap: normal; }
  .calc-layer__price { grid-area: price; }

  /* Что защищаем: на мобильном вместо плашек — выпадающий список + кнопка сброса рядом */
  .what-cats { display: block; min-width: 0; }
  .what-cats .what-cat { display: none; }
  .what-select-row { display: flex; gap: 10px; align-items: center; width: 100%; min-width: 0; }
  .what-output-head .what-reset { display: none; }

  /* Вопросы и ответы: на мобильном та же схема, что у «Что защищаем», — чипы прячем, вместо них выпадающий список категорий; плашка — сплошная заливка во весь экран, как hero; заголовки вопросов мельче */
  .faq-cats { display: none; }
  .faq-list { border-radius: 0; margin: 0 calc(-1 * var(--kub-gutter)); padding: 8px var(--kub-gutter) 20px; }
  .faq-list .what-select-row { margin-top: 16px; }
  .faq-q__text { font-size: 16px; }

  /* Уровни защиты на мобильном — горизонтальный слайдер карточек вместо вертикального списка */
  .levels-table {
    display: flex; flex-wrap: nowrap; gap: 16px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory;
    background: transparent; border-radius: 0; margin: 0 calc(-1 * var(--kub-gutter));
    padding: 0 calc(var(--kub-gutter) + 8px) 6px;
    scroll-padding-left: calc(var(--kub-gutter) + 8px);
    -webkit-overflow-scrolling: touch;
  }
  .levels-row { flex: 0 0 84%; min-width: 0; margin-bottom: 0; scroll-snap-align: start; }

  /* Карточка слайда «Уровни защиты» на телефоне — вариант «уровень как акцент сверху» */
  .levels-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas: "label num" "bars bars" "title title" "desc desc" "term term" "price cta";
    column-gap: 14px; row-gap: 16px; align-items: start;
    padding: 24px 20px 22px;
  }
  .levels-row__level-label {
    display: block; grid-area: label; align-self: center; min-width: 0;
    font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--kub-text-3);
  }
  .levels-row__num { grid-area: num; align-self: center; justify-self: end; min-width: 0; font-size: 15px; }
  .level-bars { grid-area: bars; justify-self: stretch; display: flex; gap: 5px; align-items: center; margin-top: 0; }
  .level-bars span { flex: 1; width: auto; height: 10px; border-radius: 5px; }
  .levels-row__title { display: contents; padding-right: 0; }
  .levels-row__title h3 { grid-area: title; align-self: start; min-width: 0; font-size: 16px; line-height: 1.25; overflow-wrap: break-word; }
  .levels-row__title p { grid-area: desc; min-width: 0; margin-top: 2px; }
  .levels-row__term {
    grid-area: term; min-width: 0; color: var(--kub-text-3); font-size: 12.5px;
    margin-top: 2px; border-top: 1px solid var(--kub-border); padding-top: 16px;
  }
  .levels-row__price { grid-area: price; align-self: center; min-width: 0; font-size: 17px; white-space: nowrap; }
  .levels-row__cta { grid-area: cta; align-self: center; justify-self: end; min-width: 0; white-space: nowrap; }
  .levels-row--head { display: none; }

  /* «Почему защита комбинированная» на телефоне — без серых плашек, всё лежит на фоне страницы с теми же полями, что и текст «С 2024 года…» */
  .limits-card { background: transparent; border-radius: 0; padding: 0; gap: 14px; }
  .layers-panel { background: transparent; border-radius: 0; padding: 0; gap: 16px; }

  /* «Слои защиты» на телефоне — картинка статична по центру (как раньше), листается только текст снизу; картинка меняется синхронно со свайпом (js/app.js, initLayers) — как будто слои нарастают */
  .layers-side { display: none; }
  .layers-diagram { margin: 0 auto; max-width: 420px; }
  .layers-slider {
    display: flex; flex-wrap: nowrap; gap: 14px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--kub-gutter));
    padding: 4px calc(var(--kub-gutter) + 8px) 6px;
    scroll-padding-left: calc(var(--kub-gutter) + 8px);
    -webkit-overflow-scrolling: touch;
  }
  .layers-slide {
    flex: 0 0 84%; min-width: 0; scroll-snap-align: start;
    background: var(--kub-surface); border-radius: 18px; padding: 16px 18px 18px;
    display: flex; flex-direction: column; gap: 8px;
  }
  .layers-slide__head { display: flex; align-items: center; gap: 10px; }
  .layers-slide__num {
    width: 24px; height: 24px; border-radius: 50%; background: var(--kub-orange); color: #FFFFFF;
    display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0;
  }
  .layers-slide__title { font-size: 16px; font-weight: 500; line-height: 1.2; min-width: 0; }
  .layers-slide__text { font-size: 13.5px; line-height: 1.45; color: var(--kub-text-2); }
  .layers-note--mobile { display: block; margin-top: 0; }

  /* «Защита от БПЛА — не инициатива» на телефоне — штрафы/нормы слайдером вместо списка через черту */
  .penalty-items {
    display: flex; flex-wrap: nowrap; gap: 14px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--kub-gutter));
    padding: 20px calc(var(--kub-gutter) + 8px) 8px;
    scroll-padding-left: calc(var(--kub-gutter) + 8px);
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }
  .penalty-item, .penalty-item--wide {
    flex: 0 0 82%; min-width: 0; scroll-snap-align: start;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px; padding: 20px 20px 18px;
  }
  .penalty-item__num, .penalty-item--wide .penalty-item__num {
    font-size: 22px; line-height: 1.2; white-space: normal; overflow-wrap: break-word;
  }
  .penalty-item__text b { display: block; margin-bottom: 4px; }

  /* «Знаем все актуальные нормативы» на телефоне — компактные пилюли вместо крупных псевдозаголовков, плашка без иконки */
  .norms-head p { font-size: 15px; }
  .norms-pills { margin-top: 20px; gap: 8px; }
  .norms-pill { padding: 8px 14px 8px 10px; font-size: 13px; gap: 7px; }
  .norms-pill__ic { width: 16px; height: 16px; }
  .norms-pill__ic svg { width: 8px; height: 8px; }
  .norms-panel { margin-top: 20px; padding: 22px 20px; align-items: flex-start; }
  .norms-panel__ic { display: none; }
  .norms-panel__text { font-size: 15px; }
  .norms-panel__line + .norms-panel__line { margin-top: 10px; }

  /* Этапы и сроки на телефоне — вертикальный рельс (сплошная линия через все 6 точек); на планшете — та же раскладка, что на десктопе (см. блок 768–1279.98px) */
  .steps-panel { padding: 24px 20px; }
  .steps-rail__line { left: 19px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; background: var(--kub-border-2); }
  .steps-grid { display: flex; flex-direction: column; gap: 26px; }
  .step {
    display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; row-gap: 3px;
    padding-right: 0;
  }
  .step-dot { grid-row: 1 / span 2; align-self: start; width: 40px; height: 40px; font-size: 15px; border-width: 3px; }
  .step h3 { font-size: 16px; }
  .step p { font-size: 14px; }

  /* «Обслуживание от 50 000 ₽/мес» на телефоне — заголовок вылезал за край карточки */
  .service-banner { padding: 24px 20px; }
  .service-banner__title { font-size: 26px; line-height: 1.2; }

  /* «Подробные фотографии…» на телефоне — иконка и заголовок в один ряд (не друг под другом), заголовок мельче, плашка сплошной заливкой во весь экран, как hero */
  .cases-banner {
    grid-template-columns: 36px minmax(0,1fr); grid-template-areas: "icon text" "btn btn";
    column-gap: 14px; row-gap: 18px; align-items: start;
    border-radius: 0; margin: 0 calc(-1 * var(--kub-gutter)); padding: 28px var(--kub-gutter);
  }
  .cases-banner svg { grid-area: icon; width: 30px; height: 30px; }
  .cases-banner > div { grid-area: text; }
  .cases-banner h3 { font-size: 15px; line-height: 1.3; }
  .cases-banner p { font-size: 14px; }
  .cases-banner .btn { grid-area: btn; width: 100%; }

  /* Слайдер постов блога на телефоне — заголовок мельче, чтобы не разрастался на всю карточку */
  .post-card__body h3 { font-size: 17px; line-height: 1.25; }

  /* Рассылка на телефоне — сплошная заливка во весь экран, как hero, заголовок мельче */
  .subscribe-card { border-radius: 0; margin: 0 calc(-1 * var(--kub-gutter)); padding: 32px var(--kub-gutter); }
  .subscribe-card__title { font-size: 22px; line-height: 1.25; }
  .subscribe-card__text { font-size: 15px; }
}

/* =======================================================
   Планшет: 768–1279px (вариант 5, свой макет — reference/Tablet.dc.html).
   Накладывается поверх общего блока выше: тот же общий каркас
   (бургер, скрытая десктоп-навигация, карточная подача секций),
   но с полями 40px и собственной раскладкой колонок.
   HANDOFF, раздел «Планшетная версия».
   ======================================================= */
@media (min-width: 768px) and (max-width: 1279.98px) {
  :root { --kub-gutter: 40px; }
  .container { max-width: none; }

  .h2, .combo-copy h2, .about-copy h2, .h2--sm, .penalties-panel h2, .contact-copy h2, .norms-head h2 { font-size: 34px; line-height: 1.12; }
  .hero-copy h1 { font-size: 46px; line-height: 1.1; }

  .hero-grid { position: relative; overflow: visible; }
  .hero-copy { grid-column: auto; max-width: 54%; }
  .hero-figure {
    display: block; grid-column: auto;
    position: absolute; top: 0; bottom: 0; right: calc(-1 * var(--kub-gutter));
    width: 42%; margin: 0; overflow: hidden;
  }
  .hero-figure img { width: 100%; height: 100%; object-fit: cover; object-position: left center; transform: none; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-ctas .btn { width: 100%; flex: none; }
  .hero-facts { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); column-gap: 16px; row-gap: 12px; }
  .hero-facts > div { border: none !important; padding: 20px 0 0 !important; }
  .hero-fact-num { font-size: 22px; }
  .hero-fact-label { font-size: 14px; margin-top: 8px; }

  .solutions-grid, .cases-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }

  /* Плашка «Подробные фотографии…» на планшете — иконка в один ряд с текстом, кнопка отдельной строкой снизу */
  .cases-banner { grid-template-columns: 56px minmax(0,1fr); grid-template-areas: "icon text" "btn btn"; align-items: start; row-gap: 20px; }
  .cases-banner svg { grid-area: icon; width: 48px; height: 48px; }
  .cases-banner > div { grid-area: text; }
  .cases-banner .btn { grid-area: btn; width: 100%; }

  .reviews-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .review-card__embed { height: 400px; }
  .partners-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .clients-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }

  /* «Что защищаем»: возвращаем 2 колонки (категории слева, решения справа) */
  .what-grid { grid-template-columns: 220px minmax(0,1fr); gap: 24px; }
  .what-cats { flex-direction: column; flex-wrap: nowrap; position: sticky; top: 24px; }
  .what-cat { width: 100%; }


  .levels-table { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; background: transparent; }
  .levels-row { margin-bottom: 0; }

  .penalty-items { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 32px; margin-top: 8px; }

  .doc-card { flex: 0 0 42%; }

  /* Этапы и сроки — на планшете та же раскладка, что на десктопе (рельс в один ряд из 6), только компактнее под более узкую колонку + переносы по слогам, чтобы длинные слова не ломались посередине без правил */
  .steps-panel { padding: 20px 16px; }
  .steps-rail__line { left: 16px; right: 16px; }
  .step { gap: 10px; padding-right: 6px; }
  .step-dot { width: 36px; height: 36px; font-size: 14px; border-width: 3px; }
  .step h3 { font-size: 13px; line-height: 1.25; hyphens: auto; }
  .step p { font-size: 12px; hyphens: auto; }

  .footer-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px 16px; }
}

/* Узкий планшет: статам тесно рядом с bleed-картинкой — убираем картинку совсем, статы — компактным рядом (как на мобильном) */
@media (min-width: 768px) and (max-width: 979.98px) {
  .hero-copy { max-width: none; }
  .hero-figure { display: none; }
  .hero-facts { grid-template-columns: 0.92fr 1.2fr 0.88fr; }
  .hero-facts > div { border: none !important; padding: 18px 8px 0 8px !important; }
  .hero-facts > div:first-child { padding-left: 0 !important; }
  .hero-facts > div:last-child { padding-right: 0 !important; }
  .hero-fact-num { font-size: 20px; white-space: nowrap; }
  .hero-fact-label { font-size: 14px; margin-top: 8px; }
}

/* ===== Уведомление о cookie ===== */
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  width: 100%; max-width: 100vw; box-sizing: border-box;
  background: var(--kub-white); color: var(--kub-text-2);
  padding: 18px var(--kub-gutter);
  display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap;
  border-top: 1px solid var(--kub-border);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.1);
}
.cookie-bar__text { font-size: 14px; line-height: 1.5; max-width: 760px; }
.cookie-bar__text a { color: var(--kub-text); text-decoration: underline; }
.cookie-bar__btn { height: 44px; padding: 0 28px; flex-shrink: 0; }
@media (max-width: 599.98px) {
  .cookie-bar { flex-direction: column; align-items: stretch; text-align: left; gap: 14px; padding: 16px 20px; }
  .cookie-bar__btn { width: 100%; }
}

/* ===== Статья блога ===== */
.article-section { padding: 56px var(--kub-gutter) 96px; }
.article { max-width: 900px; margin: 0 auto; }
.article-back { display: inline-block; margin-bottom: 32px; }
.article__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-size: 13px; color: var(--kub-text-3); font-family: var(--kub-font-display); }
.article__tag { color: var(--kub-orange-text); border: 1px solid var(--kub-border); padding: 6px 14px; border-radius: 999px; }
.article h1 { font-weight: 500; font-size: 38px; line-height: 1.15; margin-bottom: 20px; }
.article__cover { width: 100%; height: 320px; object-fit: cover; border-radius: var(--kub-r-card); margin: 24px 0 36px; display: block; }
@media (max-width: 599px) { .article__cover { height: 200px; } }
.article__lede { font-size: 19px; line-height: 1.5; color: var(--kub-text-2); margin-bottom: 36px; }
.article h2 { font-weight: 500; font-size: 24px; line-height: 1.25; margin: 40px 0 16px; }
.article p { font-size: 16px; line-height: 1.65; color: var(--kub-text-2); margin: 0 0 16px; }
.article ul, .article ol { padding-left: 22px; margin: 0 0 16px; }
.article li { font-size: 16px; line-height: 1.6; color: var(--kub-text-2); margin-bottom: 8px; }
.article strong { color: var(--kub-text); font-weight: 600; }
.article em { color: var(--kub-text-3); font-style: normal; }
.article-table-wrap { overflow-x: auto; margin: 0 0 24px; border-radius: 14px; border: 1px solid var(--kub-border); }
.article table { width: 100%; border-collapse: collapse; font-size: 15px; }
.article th { text-align: left; font-family: var(--kub-font-display); font-weight: 500; color: var(--kub-text); background: var(--kub-surface); padding: 12px 16px; white-space: nowrap; }
.article td { padding: 12px 16px; border-top: 1px solid var(--kub-border); color: var(--kub-text-2); vertical-align: top; }
.article-cta { margin-top: 48px; padding: 32px; background: var(--kub-surface); border-radius: var(--kub-r-card); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.article-cta p { margin: 0; font-size: 16px; color: var(--kub-text-2); }
@media (max-width: 599.98px) {
  .article h1 { font-size: 28px; }
  .article-cta { padding: 24px; flex-direction: column; align-items: flex-start; }
}