/* Аква Стар — РВД. Стили страницы.
   Цвета, шрифты и размеры — только из tokens.css. Числа — только в @media. */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

/* На светлом #209aeb даёт контраст 2.5 — рамка фокуса там тёмно-синяя, на тёмном — акцент */
:focus-visible {
  outline: var(--focus-w) solid var(--color-accent-text);
  outline-offset: var(--focus-offset);
}
.section--dark :focus-visible,
.footer :focus-visible { outline-color: var(--color-accent); }

.visually-hidden {
  position: absolute;
  width: var(--border);
  height: var(--border);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--gap-m);
  top: calc(-2 * var(--header-h));
  z-index: 100;
  padding: var(--gap-s) var(--gap-m);
  border-radius: var(--radius);
  background: var(--color-ink);
  color: var(--color-paper);
}
.skip:focus { top: var(--gap-s); }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-s);
  padding: var(--btn-py) var(--btn-px);
  border: var(--border) solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-body);
  font-weight: var(--weight-medium);
  line-height: var(--lh-tight);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition), transform var(--transition);
}
.btn:hover { transform: translateY(calc(-1 * var(--lift))); }
.btn:disabled { cursor: progress; transform: none; }

.btn--dark { background: var(--color-ink); color: var(--color-paper); }
.btn--dark:hover { background: var(--color-ink-soft); }
.btn--light { background: var(--color-paper); color: var(--color-ink); }
.btn--light:hover { background: var(--color-paper-soft); }
.btn--accent { background: var(--color-accent); color: var(--color-on-accent); }
.btn--accent:hover { background: var(--color-accent-deep); }
.btn--wide { width: 100%; }

/* ---------- Шапка ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-paper);
  border-bottom: var(--border) solid var(--color-ink);
}

.header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-l);
  min-height: var(--header-h);
}
/* Ничего в шапке не сжимается и не переносится: не влезает — меню прячется по @media ниже */
.header__row > * { flex-shrink: 0; }
/* Шапка шире контента: меню, почта, телефон и кнопка в 1200 px не помещаются */
.header .container { max-width: calc(var(--header-container) + 2 * var(--gutter)); }

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-s);
  font-size: var(--fs-logo);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.logo img { width: var(--logo-size); height: var(--logo-size); }

.nav {
  display: flex;
  align-self: stretch;
  align-items: center;
  gap: var(--gap-nav);
  margin-left: auto;
  padding-left: var(--gap-l);
  border-left: var(--border) solid var(--color-ink);
}
.nav a {
  font-weight: var(--weight-medium);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--transition);
}
.nav a:hover { color: var(--color-accent-text); }

/* Почта, телефон и кнопка — одним блоком справа */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--gap-l);
}

/* Почта и телефон в одну строку: почта синей ссылкой слева, номер жирным справа.
   Синий — тёмный акцент: яркий #209aeb на бумаге даёт контраст 2.5, мелкий текст не читается */
.header__contacts {
  display: flex;
  align-items: center;
  gap: var(--gap-contacts);
  white-space: nowrap;
}
.header__mail {
  font-size: var(--fs-body);
  color: var(--color-accent-text);
  text-decoration: none;
  transition: color var(--transition);
}
.header__mail:hover { color: var(--color-ink); }
.header__phone {
  font-size: var(--fs-body);
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition: color var(--transition);
}
.header__phone:hover { color: var(--color-accent-text); }

/* ---------- 1. Баннер ---------- */

.banner {
  position: relative;
  background: var(--color-ink);
}
.banner__img { width: 100%; }

.banner__hot {
  position: absolute;
  left: var(--hot-x);
  top: var(--hot-y);
  width: var(--hot-w);
  height: var(--hot-h);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--transition);
}
.banner__hot:hover { background: var(--color-hot-hover); }

.banner__hot--phone {
  --hot-x: var(--hot-pk-phone-x);
  --hot-y: var(--hot-pk-phone-y);
  --hot-w: var(--hot-pk-phone-w);
  --hot-h: var(--hot-pk-phone-h);
}
.banner__hot--btn {
  --hot-x: var(--hot-pk-btn-x);
  --hot-y: var(--hot-pk-btn-y);
  --hot-w: var(--hot-pk-btn-w);
  --hot-h: var(--hot-pk-btn-h);
}

/* ---------- 2. Бегущая строка ---------- */

.marquee {
  overflow: hidden;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-bottom: var(--border) solid var(--color-ink);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-speed) linear infinite;
}
.marquee__list { display: flex; }
.marquee__list li {
  display: flex;
  align-items: center;
  gap: var(--gap-l);
  padding: var(--gap-m) var(--gap-l) var(--gap-m) 0;
  font-size: var(--fs-marquee);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}
.marquee__list li::after {
  content: "";
  width: var(--pixel);
  height: var(--pixel);
  background: var(--color-ink);
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---------- Секции ---------- */

.section { padding-block: var(--section-y); }
.section--dark {
  background: var(--color-ink);
  color: var(--color-paper);
}

.h2 {
  font-size: var(--fs-h2);
  font-weight: var(--weight-black);
  line-height: var(--lh-head);
  letter-spacing: var(--tracking-head);
  text-wrap: balance;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  text-wrap: pretty;
}

.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: var(--gap-m) var(--gap-xl);
  margin-bottom: var(--gap-xl);
}

/* ---------- Раскладка «текст + фото» ---------- */

.split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: center;
  gap: var(--gap-xl);
}
.split--even {
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.split--stretch { align-items: stretch; }

.split__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-l);
}
.split--stretch .split__text { justify-content: space-between; }

.split__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-l);
}

.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
.split__media--sticky {
  position: sticky;
  top: var(--sticky-top);
}

.numlist {
  width: 100%;
  counter-reset: n;
  border-top: var(--border) solid var(--color-line);
}
.numlist li {
  counter-increment: n;
  display: grid;
  grid-template-columns: var(--num-w) 1fr;
  gap: var(--gap-m);
  padding-block: var(--gap-m);
  border-bottom: var(--border) solid var(--color-line);
  font-weight: var(--weight-medium);
}
.numlist li::before {
  content: counter(n, decimal-leading-zero);
  color: var(--color-accent-text);
  font-weight: var(--weight-bold);
}

/* ---------- Пиксельный переход ---------- */

.dither {
  position: relative;
  height: var(--dither-h);
  background: var(--dither-from);
}
.dither::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dither-to);
  -webkit-mask: url("assets/dither.png") left top / var(--dither-w) var(--dither-h) repeat-x;
  mask: url("assets/dither.png") left top / var(--dither-w) var(--dither-h) repeat-x;
}
.dither--paper-ink { --dither-from: var(--color-paper); --dither-to: var(--color-ink); }
.dither--ink-paper { --dither-from: var(--color-ink); --dither-to: var(--color-paper); }

/* ---------- 5. Комплектующие ---------- */

.parts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--border);
  background: var(--color-line);
  border: var(--border) solid var(--color-line);
}
/* Название стоит сразу под номером, а не прибито к низу: иначе подпись у «БРС»
   и высокое фото в ряду разводят заголовки соседних клеток по разной высоте */
.parts__item {
  display: flex;
  flex-direction: column;
  gap: var(--gap-l);
  min-height: var(--part-h);
  padding: var(--gap-m) var(--gap-m) var(--gap-l);
  background: var(--color-paper);
  transition: background-color var(--transition), color var(--transition);
}
.parts__num {
  color: var(--color-accent-text);
  font-weight: var(--weight-bold);
  transition: color var(--transition);
}
.parts__name {
  font-size: var(--fs-h3);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.parts__note {
  display: block;
  margin-top: var(--gap-xs);
  font-size: var(--fs-small);
  font-weight: var(--weight-regular);
  letter-spacing: normal;
  color: var(--color-text-muted);
  transition: color var(--transition);
}

/* Фото не задаёт высоту ряда — только заполняет свою клетку */
.parts__item--photo {
  position: relative;
  padding: 0;
}
.parts__item--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Наведение: клетка заливается акцентом. Только при курсоре — на телефоне заливка залипала бы после тапа */
@media (hover: hover) {
  .parts__item:not(.parts__item--photo):hover {
    background: var(--color-accent);
    color: var(--color-on-accent);
  }
  .parts__item:not(.parts__item--photo):hover .parts__num,
  .parts__item:not(.parts__item--photo):hover .parts__note {
    color: var(--color-on-accent);
  }
}

/* ---------- 6. Бренды ---------- */

.brands {
  padding-block: var(--gap-l);
  background: var(--color-paper-soft);
  border-block: var(--border) solid var(--color-line);
}
.brands__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m) var(--gap-xl);
}
.brands__title {
  font-size: var(--fs-body);
  font-weight: var(--weight-bold);
}
.brands__list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gap-m) var(--gap-xl);
}
.brands__list li {
  font-size: var(--fs-brand);
  font-weight: var(--weight-black);
  line-height: var(--lh-head);
  letter-spacing: var(--tracking-head);
}
.brands__list .brands__more {
  font-size: var(--fs-body);
  font-weight: var(--weight-medium);
  letter-spacing: normal;
  color: var(--color-text-muted);
}

/* ---------- 7. Почему к нам ---------- */

.why {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--gap-xl);
}
.why__title {
  font-size: var(--fs-display);
  font-weight: var(--weight-black);
  line-height: var(--lh-head);
  letter-spacing: var(--tracking-head);
}
.why__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-l) var(--gap-xl);
}
.why__list li {
  display: grid;
  align-content: start;
  gap: var(--gap-s);
  padding-top: var(--gap-m);
  border-top: var(--border) solid var(--color-line-dark);
}
.why__list li::before {
  content: "";
  width: var(--pixel-l);
  height: var(--pixel-l);
  margin-bottom: var(--gap-xs);
  background: var(--color-accent);
}
.why__list h3 {
  font-size: var(--fs-h3);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.why__list p { color: var(--color-text-muted-dark); }

/* ---------- 8. Финальный призыв ---------- */

.cta {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--cta-h);
  padding: var(--section-y) var(--gutter);
  overflow: hidden;
  text-align: center;
  background: var(--color-paper);
}
.cta__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  image-rendering: pixelated;
}
.cta__content {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--gap-l);
  max-width: var(--cta-text-w);
}
.cta__title {
  font-size: var(--fs-display);
  font-weight: var(--weight-black);
  line-height: var(--lh-head);
  letter-spacing: var(--tracking-head);
  text-wrap: balance;
}
.cta__text {
  padding: var(--gap-xs) var(--gap-s);
  border-radius: var(--radius);
  background: var(--color-paper);
  font-size: var(--fs-lead);
  font-weight: var(--weight-medium);
}

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

.footer {
  overflow: hidden;
  padding-top: var(--section-y);
  background: var(--color-ink);
  color: var(--color-paper);
}
.footer__cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--gap-l);
}
.footer__h {
  margin-bottom: var(--gap-m);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.footer ul {
  display: grid;
  gap: var(--gap-s);
}
.footer ul a {
  color: var(--color-text-muted-dark);
  text-decoration: none;
  transition: color var(--transition);
}
.footer ul a:hover { color: var(--color-paper); }
.footer__copy {
  margin-top: var(--gap-xl);
  font-size: var(--fs-small);
  color: var(--color-text-muted-dark);
}
.footer__wordmark {
  height: var(--wordmark-crop);
  margin-top: var(--gap-l);
  overflow: hidden;
  font-size: var(--fs-wordmark);
  font-weight: var(--weight-black);
  line-height: 1;
  letter-spacing: var(--tracking-head);
  text-align: center;
  white-space: nowrap;
  color: var(--color-paper);
}

/* ---------- Окно «Заказать звонок» ---------- */

.modal {
  width: min(var(--modal-w), calc(100% - 2 * var(--gutter)));
  max-height: calc(100% - 2 * var(--gutter));
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: var(--shadow-modal);
}
.modal::backdrop { background: var(--color-overlay); }

.modal__close {
  position: absolute;
  top: var(--gap-xs);
  right: var(--gap-xs);
  z-index: 1;
  width: var(--close-size);
  height: var(--close-size);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  font-size: var(--fs-close);
  line-height: 1;
  cursor: pointer;
}
.modal__close:hover { background: var(--color-line); }

.form {
  display: grid;
  gap: var(--gap-m);
  padding: var(--gap-l);
}
.form[hidden] { display: none; }
.form--done { justify-items: start; }

.form__title {
  padding-right: var(--close-size);
  font-size: var(--fs-modal-title);
  font-weight: var(--weight-black);
  line-height: var(--lh-head);
  letter-spacing: var(--tracking-head);
}
.form__sub { color: var(--color-text-muted); }

.field {
  display: grid;
  gap: var(--gap-xs);
  font-size: var(--fs-small);
  font-weight: var(--weight-medium);
}
.field input,
.field textarea {
  width: 100%;
  padding: var(--input-py) var(--input-px);
  border: var(--border) solid var(--color-line-strong);
  border-radius: var(--radius);
  background: var(--color-paper-soft);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: var(--weight-regular);
  resize: vertical;
}
.field input:focus-visible,
.field textarea:focus-visible {
  outline-offset: 0;
  border-color: var(--color-accent);
}
.field input[aria-invalid="true"] { border-color: var(--color-error); }

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--gap-s);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  cursor: pointer;
}
.check input {
  width: var(--check-size);
  height: var(--check-size);
  margin: var(--check-offset) 0 0;
  accent-color: var(--color-accent-deep);
}

.form__status {
  font-size: var(--fs-small);
  font-weight: var(--weight-medium);
}
.form__status:empty { display: none; }
.form__status--error { color: var(--color-error); }
.form__status--success { color: var(--color-success); }

/* ---------- Адаптив ---------- */

/* Границы шапки — по замеру 2026-09-15 (Inter Tight / без веб-шрифта, запасной шире):
   всё в строку — 1266 / 1298 px → меню видно от 1440 (шапка шире контента, до 1360);
   без меню — 731 / 738 → название у звезды от 850; без названия — 622 / 627 → почта от 720.
   Меняешь тексты или размеры в шапке — перемерь */
@media (max-width: 1439px) {
  .nav { display: none; }
  .header__actions { margin-left: auto; }
}

@media (max-width: 1023px) {
  .parts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 899px) {
  .split,
  .split--even,
  .why,
  .section-head { grid-template-columns: 1fr; }
  .split__media--sticky { position: static; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 759px) {
  .banner__hot--phone {
    --hot-x: var(--hot-mob-phone-x);
    --hot-y: var(--hot-mob-phone-y);
    --hot-w: var(--hot-mob-phone-w);
    --hot-h: var(--hot-mob-phone-h);
  }
  .banner__hot--btn {
    --hot-x: var(--hot-mob-btn-x);
    --hot-y: var(--hot-mob-btn-y);
    --hot-w: var(--hot-mob-btn-w);
    --hot-h: var(--hot-mob-btn-h);
  }
}

@media (max-width: 849px) {
  .header .logo span { display: none; }
}

@media (max-width: 719px) {
  .header__mail { display: none; }
}

@media (max-width: 519px) {
  .header__row { gap: var(--gap-s); }
  .header__btn { padding-inline: var(--gap-m); }
  .header__actions { gap: var(--gap-s); }
  .header__phone { font-size: var(--fs-phone-mob); }
  .parts { grid-template-columns: 1fr; }
  .parts__item { min-height: 0; }
  .parts__item--photo { aspect-ratio: 4 / 3; }
  .why__list { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; }
  .btn:hover { transform: none; }
}