/* Океаника — раскладка страницы поверх компонентов макета.
   Значения только из tokens.css: поля space-7 (60), 6 колонок по 300, гаттер space-4 (20),
   между секциями space-9 (200). Скруглений, теней, переходов и анимаций нет. */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-padding-top: calc(var(--header-height) + var(--space-4)); }
section[id], .oc-field, .oc-control { scroll-margin-top: calc(var(--header-height) + var(--space-4)); }
body { overflow-x: hidden; position: relative; }
button, input, select, textarea { font-family: inherit; }

/* Все состояния переключаются мгновенно — движения в системе нет */
* { transition: none !important; animation: none !important; scroll-behavior: auto !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;
}

/* ---------- Направляющие 6-колоночной сетки (grid-line) ---------- */
.oc-grid-lines {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none;
}
.oc-grid-lines i {
  display: block; position: absolute; top: 0; bottom: 0; width: var(--hairline);
  background: var(--grid-line);
}
.oc-page { position: relative; z-index: 1; }

/* ---------- Общий контейнер секции ---------- */
.sec { padding: var(--space-9) var(--space-7) 0; }
.sec-flush { padding: var(--space-9) 0 0; }
.sec-inner { max-width: var(--container); margin: 0 auto; }
.sec-body { margin-top: var(--space-6); }
.sec-last { padding-bottom: var(--space-9); }
.sec-gap { margin-top: var(--space-9); }

.oc-text { margin: var(--space-3) 0 0; font: 400 22px/31px var(--font-display); max-width: 900px; }

/* ---------- Шапка ---------- */
.oc-header { z-index: 30; }
.oc-menu[hidden] { display: none; }
.oc-nav-link { cursor: pointer; }

/* ---------- Направления: стрелка только у активной строки (как в макете) ---------- */
.oc-show-row .oc-arrow, .oc-dir .oc-arrow { display: none; }
.oc-show-row.is-active .oc-arrow, .oc-dir.is-active .oc-arrow { display: block; }

/* ---------- Hero ---------- */
.oc-hero-actions .oc-btn { width: 100%; }

/* ---------- О компании ---------- */
.about-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-4); }
.about-media { display: block; width: 100%; height: 560px; object-fit: cover; }
.about-media-wrap { margin-top: var(--space-6); }

/* ---------- Этапы: 4 колонки по 435px ---------- */
.steps-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4);
  margin-top: var(--space-6);
}
.steps-grid .oc-step { width: 100%; }
.steps-photo { grid-column: span 3; display: block; width: 100%; height: 368px; object-fit: cover; align-self: stretch; }

/* ---------- Сервис ---------- */
.service-grid {
  display: grid; grid-template-columns: 920px 1fr; gap: var(--space-4);
  align-items: stretch; margin-top: var(--space-6);
}
.service-photo { display: block; width: 100%; height: 620px; object-fit: cover; align-self: stretch; }
.service-card { display: flex; flex-direction: column; gap: var(--space-5); justify-content: center; }
.service-card .oc-btn { margin-top: var(--space-2); }

/* ---------- Форма расчёта ---------- */
.calc-form { margin-top: var(--space-6); border: var(--hairline) solid var(--border); padding: var(--space-6); }
.calc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.calc-wide { grid-column: 1 / -1; }
.oc-consent { margin: var(--space-5) 0 var(--space-4); font: 400 16px/20px var(--font-display); color: var(--ink-subtle); }
.oc-consent a { color: var(--ink); }
.field-error { display: none; font: 400 16px/20px var(--font-display); color: var(--ink); }
.oc-field.is-invalid .field-error { display: block; }
.oc-field.is-invalid .oc-control { outline: 2px solid var(--ink); outline-offset: 0; }
.form-note { margin: var(--space-4) 0 0; font: 400 18px/22px var(--font-display); color: var(--ink); }
.form-note:empty { margin: 0; }

/* ---------- Партнёры: 2×3 плитки по бокам заголовка ---------- */
.partners-grid {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4);
  align-items: center; margin-top: var(--space-6);
}
.partners-side { display: grid; grid-template-columns: repeat(3, 210px); gap: var(--m-gutter); }
.partners-mid { text-align: center; }
.partners-note { margin: var(--space-4) 0 0; font: 400 16px/20px var(--font-display); color: var(--ink-subtle); }

/* ---------- Отзывы: карусель из трёх карточек ---------- */
.reviews { overflow: hidden; }
.sec.reviews { padding-left: 0; padding-right: 0; }
.sec.reviews > .oc-heading { padding: 0 var(--space-7); }
.sec.reviews > .partners-note { padding: 0 var(--space-7); }
.reviews-track { display: flex; gap: var(--space-4); margin-top: var(--space-6); justify-content: center; }
.reviews-track .oc-testimonial { flex: none; }
.reviews-nav { display: flex; gap: var(--space-4); justify-content: center; margin-top: var(--space-5); }
.oc-arrow-btn {
  width: 72px; height: 52px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--ink); border: var(--hairline) solid var(--border); cursor: pointer;
}
.oc-arrow-btn:hover { background: var(--ink); color: var(--on-ink); }
.oc-arrow-btn:active { background: var(--ink-soft); color: var(--on-ink); }

/* ---------- Цифры ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.stats-grid .oc-stat { width: 100%; }

/* ---------- Финальный призыв ---------- */
.final { position: relative; height: 760px; overflow: hidden; background: var(--bg-deep); margin-top: var(--space-9); }
.final-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.final-inner {
  position: absolute; left: var(--space-7); bottom: 60px; right: var(--space-7);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4);
}
.final-text { max-width: 920px; background: var(--bg); border: var(--hairline) solid var(--border); padding: var(--space-5); }
.final-actions { width: 590px; display: flex; flex-direction: column; gap: var(--space-2); }

/* ---------- Подвал ---------- */
.oc-footer { position: relative; z-index: 1; }
.oc-sub {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-7); border-top: var(--hairline) solid var(--grid-line);
  background: var(--bg); font: 400 16px/20px var(--font-display); color: var(--ink-subtle);
  position: relative; z-index: 1;
}
.oc-sub a { color: var(--ink-subtle); text-decoration: underline; }
.oc-sub a:hover { color: var(--ink); }

/* ---------- Плавающая кнопка WhatsApp ---------- */
.wa-float {
  position: fixed; right: var(--space-7); bottom: var(--space-7); z-index: 15;
  width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-deep); border: var(--hairline) solid var(--ink); color: var(--ink);
  border-radius: var(--radius-none); text-decoration: none;
}
.wa-float:hover { background: var(--ink); color: var(--on-ink); }
.wa-float svg { width: 32px; height: 32px; }

/* ---------- Мобильная раскладка (до 1023px, макет 390px) ---------- */
@media (max-width: 1023px) {
  html { scroll-padding-top: calc(var(--m-header-height) + var(--space-3)); }
  section[id], .oc-field, .oc-control { scroll-margin-top: calc(var(--m-header-height) + var(--space-3)); }
  .oc-grid-lines { display: none; }
  .sec { padding: var(--m-section) var(--m-margin) 0; }
  .sec-flush { padding: var(--m-section) 0 0; }
  .sec-last { padding-bottom: var(--m-section); }
  .sec-gap { margin-top: var(--m-section); }
  .sec-body { margin-top: var(--space-5); }
  .oc-text { font-size: 15px; line-height: 22px; }

  .service-grid { display: block; margin-top: var(--space-5); }
  .about-media-wrap { margin-top: var(--space-5); }
  .about-media, .service-photo, .steps-photo {
    width: calc(100% + 2 * var(--m-margin)); height: 240px; min-height: 0;
    margin-left: calc(-1 * var(--m-margin)); margin-right: calc(-1 * var(--m-margin));
  }

  .steps-grid { grid-template-columns: 1fr; gap: var(--m-gutter); margin-top: var(--space-5); }
  .steps-photo { grid-column: auto; margin-top: var(--space-2); }

  .service-card { margin-top: var(--space-5); gap: var(--space-4); }

  .calc-form { margin-top: var(--space-5); padding: 0; border: 0; }
  .calc-grid { grid-template-columns: 1fr; gap: var(--m-gutter); }
  .oc-consent { margin: var(--space-4) 0; font-size: 12px; line-height: 16px; text-align: center; }
  .field-error, .form-note { font-size: 13px; line-height: 18px; }

  .partners-grid { display: flex; flex-direction: column; gap: var(--m-gutter); margin-top: var(--space-5); }
  .partners-side { grid-template-columns: repeat(2, 1fr); gap: var(--m-gutter); }
  .partners-side .oc-logotile { width: 100%; }
  .partners-mid { order: -1; margin-bottom: var(--space-3); }
  .partners-note { font-size: 12px; line-height: 16px; }

  .sec.reviews > .oc-heading, .sec.reviews > .partners-note { padding: 0 var(--m-margin); }
  .reviews-track, .reviews-nav { padding: 0 var(--m-margin); }
  .reviews-track { display: flex; gap: var(--m-gutter); margin-top: var(--space-5); }
  .reviews-track .oc-testimonial { display: none; }
  .reviews-track .oc-testimonial.is-current { display: flex; flex: 1 1 100%; }
  .reviews-nav { margin-top: var(--space-4); gap: var(--m-gutter); }
  .oc-arrow-btn { width: 48px; height: 48px; flex: 1 1 0; }

  .stats-grid { grid-template-columns: 1fr; gap: var(--m-gutter); margin-top: var(--space-5); }

  .final { height: auto; margin-top: var(--m-section); padding: 0 0 var(--space-5); }
  .final-bg { position: static; height: 300px; }
  .final-inner {
    position: static; display: block; margin: calc(-1 * var(--space-5)) var(--m-margin) 0;
  }
  .final-text { max-width: none; padding: var(--m-card-padding); }
  .final-actions { width: auto; margin-top: var(--m-gutter); gap: 8px; }

  /* цели касания ≥44px без изменения вида: паддинг компенсируется отрицательным margin */
  .oc-footer-col a, .oc-menu-contacts a { display: block; padding: 13px 0; margin: -13px 0; }
  .oc-sub a { display: inline-block; padding: 13px 0; margin: -13px 0; }
  .oc-sub { flex-direction: column; align-items: flex-start; gap: 8px; padding: var(--space-4) var(--m-margin); font-size: 12px; line-height: 16px; }

  .wa-float { right: var(--m-margin); bottom: var(--m-margin); width: 56px; height: 56px; }
  .wa-float svg { width: 28px; height: 28px; }
}

/* Планшет 768–1023: две колонки там, где их можно удержать */
@media (min-width: 768px) and (max-width: 1023px) {
  .steps-grid, .stats-grid, .calc-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-photo { grid-column: 1 / -1; }
  .partners-side { grid-template-columns: repeat(3, 1fr); }
  .about-media, .service-photo, .steps-photo { height: 360px; }
}