/* ============================================================
   САЙТ ТОВ «АЛЬФА СЕРВІС»
   Один файл стилів. Розділи йдуть у тому ж порядку, що й секції на
   сайті, а медіазапити для планшета й десктопа — наприкінці файлу.

   ЩОБ ЗМІНИТИ КОЛЬОРИ АБО ШРИФТ — редагуйте лише блок «НАЛАШТУВАННЯ»
   нижче. Усі кольори по сайту беруться звідти.
   ============================================================ */

/* ------------------------------------------------------------
   НАЛАШТУВАННЯ
   ------------------------------------------------------------ */
:root {
  /* Кольори з брендбуку */
  --yellow: #f5c01f; /* головний акцент */
  --yellow-dark: #d9a713; /* акцент при наведенні */
  --black: #1a1a1a; /* основний темний */
  --black-light: #262626; /* темний для карток */
  --white: #ffffff;
  --beige: #f3eee6; /* фон світлих секцій */

  /* Кольори тексту */
  --text: #1a1a1a;
  --text-grey: #5c5c5c; /* другорядний текст */
  --text-on-dark: rgba(255, 255, 255, 0.68);

  /* Рамки та тіні */
  --border: rgba(26, 26, 26, 0.12);
  --border-on-dark: rgba(255, 255, 255, 0.14);
  --shadow: 0 4px 24px rgba(26, 26, 26, 0.07);
  --shadow-hover: 0 12px 32px rgba(26, 26, 26, 0.14);

  /* Швидкість усіх плавних переходів */
  --speed: 250ms;
}

/* ------------------------------------------------------------
   БАЗОВІ СТИЛІ
   ------------------------------------------------------------ */
* {
  box-sizing: border-box;
}

html {
  /* Плавний перехід при кліку на пункт меню */
  scroll-behavior: smooth;
  /* Невеликий відступ зверху при переході до секції */
  scroll-padding-top: 20px;
}

body {
  margin: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  /*
    Запобіжник для довгих українських термінів на вузьких екранах:
    «трансформаторів», «електромонтажні» тощо. Слово переноситься лише
    тоді, коли інакше воно вилізло б за межі екрана.
  */
  overflow-wrap: break-word;
}

h2 {
  font-size: 28px;
}

h3 {
  font-size: 18px;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/*
  Посилання «Перейти до вмісту»: сховане, поки на нього не перейшли Tab'ом.
*/
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 0 0 4px 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  background: var(--yellow);
  transition: top var(--speed);
}

.skip-link:focus {
  top: 0;
}

/*
  Видима рамка на елементі, до якого перейшли з клавіатури.
  Мишею вона не з'являється — за це відповідає :focus-visible.
*/
:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

/*
  Однакові поля по краях на всіх секціях.

  ВАЖЛИВО: тут задані тільки ліве і праве поля, окремими властивостями.
  Якщо написати коротко `padding: 0 20px`, то ця властивість обнулить
  верхній і нижній відступи в елементів, які мають клас .container разом
  з іншим класом (наприклад, .container.header__inner).
*/
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* ------------------------------------------------------------
   СЕКЦІЇ
   ------------------------------------------------------------ */
.section {
  padding: 64px 0;
}

.section--beige {
  background: var(--beige);
}

.section--dark {
  color: var(--white);
  background: var(--black);
}

.section__head {
  margin-bottom: 40px;
}

.section__lead {
  margin-top: 16px;
  max-width: 640px;
  color: var(--text-grey);
}

.section--dark .section__lead {
  color: var(--text-on-dark);
}

/* Маленький надзаголовок з жовтою рискою */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-grey);
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 3px;
  background: var(--yellow);
}

.eyebrow--light {
  color: var(--yellow);
}

/* ------------------------------------------------------------
   КНОПКИ
   ------------------------------------------------------------ */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--speed), color var(--speed),
    border-color var(--speed);
}

.btn--yellow {
  color: var(--black);
  background: var(--yellow);
}

.btn--yellow:hover {
  background: var(--yellow-dark);
}

.btn--ghost {
  color: var(--white);
  border-color: var(--border-on-dark);
}

.btn--ghost:hover {
  color: var(--black);
  background: var(--white);
}

.btn--outline {
  color: var(--black);
  border-color: var(--black);
}

.btn--outline:hover {
  background: var(--yellow);
  border-color: var(--yellow);
}

/* ------------------------------------------------------------
   ШАПКА
   ------------------------------------------------------------ */
/*
  На вузьких екранах меню переноситься на другий рядок і шапка стає високою,
  тому «липкою» вона робиться лише на десктопі (див. розділ ДЕСКТОП внизу).
*/
.header {
  z-index: 10;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.logo {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.logo__name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.logo__sub {
  position: relative;
  padding-top: 6px;
  font-size: 11px;
  /* 600 замість 500: різниці на 11px не видно, зате на два файли шрифту менше */
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* Жовта риска над словом «Сервіс» */
.logo__sub::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--yellow);
}

.logo--light {
  color: var(--white);
}

/* Меню. На вузьких екранах просто переноситься на новий рядок */
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  order: 3;
  width: 100%;
}

/*
  Відступи зверху і знизу роблять зону натискання зручною для пальця
  (близько 42px замість 30px). На вигляд це не впливає.
*/
.nav__link {
  position: relative;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
}

/* Жовта лінія, що виїжджає при наведенні */
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  /* Дорівнює верхньому відступу, щоб лінія була впритул до тексту */
  bottom: 10px;
  width: 100%;
  height: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--speed);
}

.nav__link:hover::after {
  transform: scaleX(1);
}

.header__phone {
  display: inline-block;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transition: color var(--speed);
}

.header__phone:hover {
  color: var(--yellow-dark);
}

/* ------------------------------------------------------------
   ГОЛОВНИЙ ЕКРАН
   ------------------------------------------------------------ */
.hero {
  /* На телефоні відступи менші, щоб кнопки були якомога вище */
  padding: 36px 0;
  color: var(--white);
  background: var(--black);
}

.hero__title {
  /* 28px — щоб слово «трансформаторів» вміщувалось на екрані 375px */
  font-size: 28px;
}

.hero__accent {
  display: block;
  color: var(--yellow);
}

.hero__lead {
  margin-top: 20px;
  max-width: 560px;
  color: var(--text-on-dark);
}

.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.hero__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-top: 40px;
  border-radius: 8px;
}

/*
  Смуга з показниками. Роздільні лінії намальовані так само, як у
  «Перевагах»: проміжок 1px, під ним світлий фон контейнера. Тому порожня
  комірка одразу видно світлим прямокутником — правила нижче цього не
  дають статися за будь-якої кількості показників.
*/
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 48px;
  border: 1px solid var(--border-on-dark);
  background: var(--border-on-dark);
}

/* Дві колонки (телефон): непарний останній показник займає обидві комірки */
@media (max-width: 767.98px) {
  .stats__item:last-child:nth-child(odd) {
    grid-column: span 2;
  }
}

.stats__item {
  padding: 20px 16px;
  background: var(--black);
}

.stats__value {
  display: block;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--yellow);
}

.stats__label {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-on-dark);
}

/* ------------------------------------------------------------
   ПРО КОМПАНІЮ
   ------------------------------------------------------------ */
.about__media {
  position: relative;
  margin-bottom: 40px;
}

.about__img {
  width: 100%;
  /*
    aspect-ratio + object-fit: якщо підставите своє фото іншої пропорції,
    воно акуратно обріжеться, а не розтягнеться.
  */
  aspect-ratio: 14 / 13;
  object-fit: cover;
  border-radius: 8px;
}

/* Жовтий бейдж «15+ років» поверх картинки */
.about__badge {
  position: absolute;
  right: 16px;
  bottom: -20px;
  padding: 16px 20px;
  border-radius: 8px;
  color: var(--black);
  background: var(--yellow);
  box-shadow: var(--shadow);
}

.about__badge-value {
  display: block;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.about__badge-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.about__text p {
  margin-top: 14px;
  /*
    Обмеження довжини рядка. Без нього на планшеті в альбомній орієнтації
    рядок розтягувався до 88 символів — комфортно читати десь до 75.
    ch — це ширина символа «0» поточним шрифтом.
  */
  max-width: 62ch;
  color: var(--text-grey);
}

.mission {
  margin: 28px 0;
  padding: 20px 24px;
  border-left: 4px solid var(--yellow);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, 0.6);
}

.mission p {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.mission cite {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-grey);
}

/* Цінності компанії — «пігулки» з галочкою */
.values {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.values li {
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  background: var(--white);
}

.values li::before {
  content: '✓';
  margin-right: 8px;
  font-weight: 800;
  color: var(--yellow);
}

/* ------------------------------------------------------------
   ПОСЛУГИ
   ------------------------------------------------------------ */
/*
  Сітка карток підлаштовується під їхню кількість: два блоки займуть
  половину ширини кожен, три — по третині. Так не лишається порожньої
  колонки, коли карток менше за три.
*/
.cards {
  display: grid;
  gap: 20px;
  /*
    280px давало три колонки вже на 1024px, тоді як сусідні сітки
    лишалися дво­колонковими. 330px вирівнює поведінку: телефон — одна
    колонка, планшет — дві, десктоп — три.
  */
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

.card {
  position: relative;
  overflow: hidden;
  padding: 28px 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  transition: box-shadow var(--speed), transform var(--speed),
    border-color var(--speed);
}

/* Жовта смужка зверху, що з'являється при наведенні */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--speed);
}

.card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.card:hover::before {
  transform: scaleX(1);
}

/* Іконка в жовтому квадраті над заголовком картки */
.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  border-radius: 8px;
  background: var(--yellow);
  transition: transform var(--speed);
}

.card__icon svg {
  fill: none;
  stroke: var(--black);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card:hover .card__icon {
  transform: translateY(-2px) rotate(-4deg);
}

.card h3 {
  margin-bottom: 12px;
}

.card p {
  font-size: 15px;
  color: var(--text-grey);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.tags li {
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-grey);
  background: var(--beige);
}

/* Блок із закликом під картками послуг */
.callout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: 32px;
  padding: 28px 24px;
  border-radius: 8px;
  background: var(--beige);
}

.callout p {
  font-weight: 600;
}

/* ------------------------------------------------------------
   ЕНЕРГЕТИКА ТА ЕЛЕКТРОМОНТАЖ
   Картки з фотографією зверху й описом знизу
   ------------------------------------------------------------ */
.energy {
  display: grid;
  gap: 20px;
}

.energy__item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow);
  transition: box-shadow var(--speed), transform var(--speed);
}

.energy__item:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.energy__item img {
  width: 100%;
  /* Однакова висота фото незалежно від пропорцій оригіналу */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 500ms ease;
}

.energy__item:hover img {
  transform: scale(1.04);
}

.energy__body {
  /* flex-grow вирівнює нижні краї карток у рядку */
  flex-grow: 1;
  padding: 24px 22px 26px;
  border-top: 3px solid var(--yellow);
}

.energy__body h3 {
  margin-bottom: 12px;
}

.energy__body p {
  font-size: 15px;
  color: var(--text-grey);
}

/* ------------------------------------------------------------
   КАРТКИ БЕЗ ПОСИЛАННЯ

   У секції «Енергетика» частина карток веде на окрему сторінку,
   а частина — ні. Підйом і тінь при наведенні натякають, що по
   картці можна клацнути, тому лишаємо їх тільки там, де посилання
   справді є. :has() перевіряє наявність посилання всередині.
   ------------------------------------------------------------ */
@supports selector(:has(a)) {
  .energy__item:not(:has(h3 a)):hover {
    transform: none;
    box-shadow: var(--shadow);
  }

  .energy__item:not(:has(h3 a)):hover img {
    transform: none;
  }

  .card:not(:has(h3 a)):hover {
    transform: none;
    box-shadow: var(--shadow-hover);
  }
}

/* ------------------------------------------------------------
   КЛІКАБЕЛЬНА КАРТКА

   Посилання стоїть у заголовку, але натискати зручно по всій картці:
   прозорий прямокутник ::after розтягується на весь блок. Текст при
   цьому лишається виділюваним, а в розмітці — звичайне посилання.
   ------------------------------------------------------------ */
.energy__item,
.card {
  position: relative;
}

.energy__body h3 a,
.card h3 a {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--speed);
}

.energy__body h3 a::after,
.card h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.energy__item:hover h3 a,
.card:hover h3 a {
  color: var(--yellow-dark);
}

/* Рамка фокуса має охопити всю картку, а не лише текст заголовка */
.energy__body h3 a:focus-visible::after,
.card h3 a:focus-visible::after {
  outline: 3px solid var(--yellow);
  outline-offset: -3px;
  border-radius: 8px;
}

.energy__body h3 a:focus-visible,
.card h3 a:focus-visible {
  outline: none;
}

/* ------------------------------------------------------------
   ТАБЛИЦЯ МАРОК ТРАНСФОРМАТОРІВ
   ------------------------------------------------------------ */
.models {
  margin-top: 48px;
  /* На телефоні відступи менші, щоб таблиця вмістилася без прокрутки */
  padding: 24px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--yellow);
  border-radius: 8px;
  background: var(--beige);
}

/*
  Обгортка з горизонтальною прокруткою: на вузькому телефоні таблиця
  прокручується всередині себе, а сторінка не їде вбік.
*/
.models__scroll {
  overflow-x: auto;
}

.models__table {
  width: 100%;
  min-width: 288px;
  border-collapse: collapse;
  background: var(--white);
}

/* Підпис таблиці потрібен пошуковим системам, візуально його ховаємо */
.models__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.models__table th,
.models__table td {
  padding: 11px 6px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.models__table thead th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-grey);
  background: var(--beige);
}

.models__table tbody th {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.models__table tbody td {
  font-size: 15px;
  color: var(--text-grey);
}

.models__table tbody tr:last-child th,
.models__table tbody tr:last-child td {
  border-bottom: none;
}

.models__table tbody tr {
  transition: background var(--speed);
}

.models__table tbody tr:hover {
  background: rgba(245, 192, 31, 0.12);
}

/*
  Таблиця кабелю: марок у рядку по кілька, тому їм дозволено переноситись,
  інакше на телефоні таблиця стала б надто широкою.
*/
.models__table--cable th,
.models__table--cable td {
  padding-left: 6px;
  padding-right: 6px;
}

.models__table--cable tbody th {
  white-space: normal;
  min-width: 78px;
}

.models__table--cable tbody td:first-of-type {
  min-width: 118px;
}

.models__note {
  margin-top: 20px;
  max-width: 68ch;
  font-size: 14px;
  color: var(--text-grey);
}

.models__note a {
  font-weight: 600;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.models__note a:hover {
  color: var(--yellow-dark);
}

/* ------------------------------------------------------------
   БЛОК «НА СКЛАДІ» на головній

   Коротка витримка замість повних таблиць: самі переліки марок
   живуть на сторінках послуг, щоб головна лишалася оглядовою.
   ------------------------------------------------------------ */
.stock {
  display: grid;
  gap: 20px;
  margin-top: 40px;
}

.stock__item {
  padding: 24px 22px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--yellow);
  border-radius: 4px;
  background: var(--beige);
}

.stock__title {
  margin-bottom: 12px;
  font-size: 17px;
}

.stock__text {
  font-size: 15px;
  color: var(--text-grey);
}

.stock__link {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--speed);
}

.stock__link::after {
  content: ' →';
  text-decoration: none;
}

.stock__link:hover {
  color: var(--yellow-dark);
}

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

/* Стисла примітка про дані у формі */
.privacy-note__short {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-on-dark);
}

/* ------------------------------------------------------------
   ПІДРОЗДІЛИ ПІД ОКРЕМІ НОМІНАЛИ ОБЛАДНАННЯ
   (сторінка продажу трансформаторів)
   ------------------------------------------------------------ */
.specs {
  display: grid;
  gap: 1px;
  border: 1px solid var(--border);
  background: var(--border);
}

.spec {
  padding: 26px 24px;
  background: var(--white);
  transition: background var(--speed);
}

.spec:hover {
  background: var(--beige);
}

.spec__name {
  margin-bottom: 16px;
  font-size: 22px;
  letter-spacing: 0.02em;
}

/* Три показники в рядок: потужність, напруга, виконання */
.spec__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.spec__row dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-grey);
}

.spec__row dd {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
}

.spec__text {
  max-width: 68ch;
  font-size: 15px;
  color: var(--text-grey);
}

@media (min-width: 1100px) {
  .spec {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    align-items: start;
    padding: 30px 28px;
  }

  /* На широкому екрані назва й показники стоять зліва від опису */
  .spec__name {
    grid-row: 1;
    margin-bottom: 14px;
  }

  .spec__meta {
    grid-row: 2;
    grid-column: 1;
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    border-bottom: none;
  }

  .spec__text {
    grid-row: 1 / span 2;
    grid-column: 2;
  }
}

/* ------------------------------------------------------------
   ПЕРЕВАГИ
   ------------------------------------------------------------ */
/*
  Сітка «Переваг» намальована хитрістю: проміжок 1px, під ним світлий фон
  контейнера — саме він і виглядає як роздільні лінії між картками.

  Наслідок: якщо карток не вистачає на повний рядок, порожня комірка
  проявиться світлим прямокутником. Щоб цього не сталося за будь-якої
  кількості карток, остання розтягується на вільні комірки — правила
  для цього стоять у медіазапитах наприкінці файлу.
*/
.advantages {
  display: grid;
  gap: 1px;
  border: 1px solid var(--border-on-dark);
  background: var(--border-on-dark);
}

.advantage {
  padding: 28px 24px;
  background: var(--black);
  transition: background var(--speed);
}

.advantage:hover {
  background: var(--black-light);
}

/*
  Жовта риска однакової довжини в усіх картках.
  Раніше вона була межею самого заголовка й тягнулася по ширині тексту —
  через це в сітці риски виходили різної довжини.
*/
.advantage h3 {
  margin-bottom: 10px;
}

.advantage h3::before {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  margin-bottom: 16px;
  background: var(--yellow);
}

.advantage p {
  font-size: 15px;
  color: var(--text-on-dark);
}

/* ------------------------------------------------------------
   ЯК МИ ПРАЦЮЄМО
   ------------------------------------------------------------ */
.steps {
  display: grid;
  gap: 24px;
}

.step {
  position: relative;
  padding-left: 28px;
  border-left: 2px solid var(--border);
  transition: border-color var(--speed);
}

.step:hover {
  border-color: var(--yellow);
}

/* Жовта крапка на лінії */
.step::before {
  content: '';
  position: absolute;
  top: 6px;
  left: -7px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--yellow);
}

.step__num {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--text-grey);
}

.step h3 {
  margin-bottom: 10px;
}

.step p {
  font-size: 15px;
  color: var(--text-grey);
}

/* ------------------------------------------------------------
   ЧАСТІ ЗАПИТАННЯ
   Розкривні блоки зроблені тегом <details> — це вміє сам браузер,
   JavaScript не потрібен.
   ------------------------------------------------------------ */
.faq__list {
  max-width: 820px;
  border-top: 1px solid var(--border);
}

.faq__item {
  border-bottom: 1px solid var(--border);
}

.faq__q {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  transition: color var(--speed);
}

/* Прибираємо стандартний трикутник браузера */
.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q:hover {
  color: var(--yellow-dark);
}

/* Власний знак «плюс», який стає «мінусом» у розкритому стані */
.faq__q::after {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-left: auto;
  margin-top: 3px;
  background: linear-gradient(var(--yellow), var(--yellow)) center/20px 3px
      no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) center/3px 20px no-repeat;
  transition: transform var(--speed);
}

.faq__item[open] .faq__q::after {
  /* Повертаємо вертикальну риску так, щоб лишився тільки «мінус» */
  transform: rotate(90deg);
  background: linear-gradient(var(--yellow), var(--yellow)) center/20px 3px
    no-repeat;
}

.faq__a {
  padding-bottom: 24px;
}

.faq__a p {
  max-width: 62ch;
  font-size: 15px;
  color: var(--text-grey);
}

/* ============================================================
   СТОРІНКИ ПОСЛУГ
   (remont-transformatoriv.html, prodazh-transformatoriv.html,
   kabel.html) — стилі, яких немає на головній
   ============================================================ */

/* Підсвічування поточного пункту меню */
.nav__link--active {
  color: var(--yellow-dark);
}

.nav__link--active::after {
  transform: scaleX(1);
}

/* Хлібні крихти */
.crumbs {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-grey);
}

.crumbs .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.crumbs a {
  /* Відступи роблять зону натискання зручною для пальця */
  padding: 8px 0;
  color: var(--text-grey);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--speed);
}

.crumbs a:hover {
  color: var(--yellow-dark);
}

.crumbs [aria-current] {
  font-weight: 600;
  color: var(--text);
}

/* Вступний блок із заголовком H1 */
.section--lead {
  padding-bottom: 48px;
}

.lead-block {
  max-width: 820px;
}

.section--lead h1 {
  font-size: 30px;
}

.lead-block__text {
  margin-top: 20px;
  max-width: 62ch;
  font-size: 17px;
  color: var(--text-grey);
}

.lead-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* Абзаци розгорнутого тексту */
.prose {
  margin-top: 16px;
  max-width: 62ch;
  color: var(--text-grey);
}

.prose a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose a:hover {
  color: var(--yellow-dark);
}

/* Заклик до дії перед підвалом */
.cta {
  display: grid;
  gap: 32px;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.cta__mail {
  display: inline-block;
  padding: 9px 0;
  font-weight: 600;
  color: var(--yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Заголовок-посилання в картках перелінковки */
.card h3 a {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--speed);
}

.card h3 a:hover {
  color: var(--yellow-dark);
}

@media (min-width: 768px) {
  .section--lead h1 {
    font-size: 40px;
  }

  .cta {
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
  }
}

@media (min-width: 1100px) {
  .section--lead h1 {
    font-size: 48px;
  }
}

/* ------------------------------------------------------------
   КОНТАКТИ І ФОРМА
   ------------------------------------------------------------ */
.contacts__list {
  display: grid;
  gap: 20px;
  margin-top: 36px;
}

.contacts__list a,
.contacts__list span {
  display: block;
}

.contacts__label {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yellow);
}

.contacts__list a {
  /* Телефон і пошта — головні цільові дії, зона натискання має бути великою */
  padding: 7px 0;
  font-weight: 600;
  transition: color var(--speed);
}

.contacts__list a:hover {
  color: var(--yellow);
}

.form {
  display: grid;
  gap: 20px;
  margin-top: 48px;
  padding: 28px 24px;
  border: 1px solid var(--border-on-dark);
  border-radius: 8px;
  background: var(--black-light);
}

.field {
  display: block;
}

.field__label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-on-dark);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--border-on-dark);
  border-radius: 4px;
  font-family: inherit;
  font-size: 15px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.04);
  transition: border-color var(--speed), background var(--speed);
}

.field textarea {
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  /* Світліше за 0.55 — і підказку стає важко прочитати */
  color: rgba(255, 255, 255, 0.55);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--yellow);
  background: rgba(255, 255, 255, 0.07);
}

/* Мишею — лише жовта рамка, з клавіатури — ще й обведення */
.field input:focus:not(:focus-visible),
.field select:focus:not(:focus-visible),
.field textarea:focus:not(:focus-visible) {
  outline: none;
}

/* Список у випадайці має бути темним текстом на світлому тлі */
.field select option {
  color: var(--black);
  background: var(--white);
}

/* Пастка для спам-ботів — людина її не бачить */
.honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* Блок «Що буде з вашими даними» */
.privacy-note {
  padding: 20px 22px;
  border: 1px solid var(--border-on-dark);
  border-left: 3px solid var(--yellow);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
}

.privacy-note a,
.checkbox a {
  color: var(--yellow);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-on-dark);
  cursor: pointer;
}

.checkbox input {
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--yellow);
  cursor: pointer;
}

.form .btn {
  justify-self: start;
}

/* Кнопка під час надсилання */
.form .btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ---- Помилки під полями (їх показує form.js) ---- */
.field__error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #ff9d9d;
}

.field--invalid input,
.field--invalid select,
.field--invalid textarea {
  border-color: #ff9d9d;
}

.checkbox.field--invalid .field__error {
  /* У чекбокса напис іде під усім рядком, а не поруч із галочкою */
  width: 100%;
}

/* ---- Результат надсилання ---- */
.form__status:empty {
  display: none;
}

.form__status {
  padding: 14px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.form__status--success {
  color: var(--black);
  background: var(--yellow);
}

.form__status--error {
  color: #ff9d9d;
  border: 1px solid #ff9d9d;
  background: rgba(255, 157, 157, 0.08);
}

/* ------------------------------------------------------------
   СТОРІНКА ПОЛІТИКИ КОНФІДЕНЦІЙНОСТІ (privacy.html)
   ------------------------------------------------------------ */
.legal__inner {
  /* Вужча колонка — довгий юридичний текст так читається легше */
  max-width: 760px;
}

.legal h1 {
  font-size: 30px;
}

.legal h2 {
  margin-top: 40px;
  margin-bottom: 12px;
  font-size: 20px;
}

.legal p {
  margin-top: 14px;
  color: var(--text-grey);
}

.legal__updated {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.legal__lead {
  margin-top: 20px;
  font-size: 17px;
  color: var(--text);
}

.legal__list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  color: var(--text-grey);
}

.legal__list li {
  position: relative;
  padding-left: 20px;
}

.legal__list li::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
}

.legal a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal a:hover {
  color: var(--yellow-dark);
}

.legal__back {
  margin-top: 48px;
}

.legal__back a {
  text-decoration: none;
}

/* ------------------------------------------------------------
   СТОРІНКА 404 (404.html)
   ------------------------------------------------------------ */
.notfound__inner {
  max-width: 620px;
}

.notfound__code {
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
  color: var(--yellow);
}

.notfound h1 {
  margin-top: 12px;
  font-size: 30px;
}

.notfound__text {
  margin-top: 20px;
  color: var(--text-grey);
}

.notfound__text a {
  font-weight: 700;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.notfound__links {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.notfound__links li {
  position: relative;
  padding-left: 20px;
}

.notfound__links li::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
}

.notfound__links a {
  font-weight: 600;
  transition: color var(--speed);
}

.notfound__links a:hover {
  color: var(--yellow-dark);
}

.notfound__cta {
  margin-top: 32px;
}

/* ------------------------------------------------------------
   ПІДВАЛ
   ------------------------------------------------------------ */
.footer {
  padding: 56px 0 24px;
  color: var(--white);
  background: var(--black);
  border-top: 1px solid var(--border-on-dark);
}

.footer__inner {
  display: grid;
  gap: 32px;
}

.footer__brand p {
  margin-top: 20px;
  font-size: 15px;
  color: var(--text-on-dark);
}

.footer__col h3 {
  margin-bottom: 16px;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--yellow);
}

.footer__col a,
.footer__col p {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  color: var(--text-on-dark);
}

.footer__col a {
  /* Збільшена зона натискання для пальця */
  padding: 8px 0;
  margin-bottom: 2px;
  transition: color var(--speed);
}

.footer__col a:hover {
  color: var(--yellow);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border-on-dark);
  font-size: 13px;
  color: var(--text-on-dark);
}

.footer__up {
  display: inline-block;
  padding: 10px 0;
  font-weight: 700;
  text-transform: uppercase;
  transition: color var(--speed);
}

.footer__up:hover {
  color: var(--yellow);
}

/* ============================================================
   АНІМАЦІЇ
   ============================================================ */

/* Плавна поява тексту на головному екрані при завантаженні */
@keyframes appear {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero__text > * {
  animation: appear 700ms ease both;
}

.hero__text > *:nth-child(2) {
  animation-delay: 80ms;
}
.hero__text > *:nth-child(3) {
  animation-delay: 160ms;
}
.hero__text > *:nth-child(4) {
  animation-delay: 240ms;
}

.hero__img {
  animation: appear 900ms 200ms ease both;
}

/*
  Поява блоків при прокручуванні — без JavaScript.
  Працює у браузерах, що підтримують animation-timeline (Chrome, Edge).
  В інших браузерах блоки просто одразу видимі — нічого не ламається.
*/
@supports (animation-timeline: view()) {
  .reveal {
    animation: appear linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 20%;
  }
}

/* Якщо в системі увімкнено «зменшити рух» — вимикаємо всі анімації */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   ДРУК
   Щоб роздрукована сторінка була читабельною: без чорних заливок,
   без меню й форми, з видимими адресами посилань.
   ============================================================ */
@media print {
  .header,
  .skip-link,
  .hero__buttons,
  .form,
  .footer__up,
  .callout .btn {
    display: none;
  }

  body,
  .hero,
  .section--dark,
  .section--beige,
  .footer {
    color: #000;
    background: #fff;
  }

  .hero__lead,
  .section--dark .section__lead,
  .advantage p,
  .contacts__list span,
  .footer__brand p,
  .footer__col a,
  .footer__col p {
    color: #333;
  }

  .section,
  .hero {
    padding: 12pt 0;
  }

  /* Показуємо телефон і пошту повністю */
  a[href^='tel:']::after,
  a[href^='mailto:']::after {
    content: ' (' attr(href) ')';
    font-weight: 400;
  }

  /* Картки не повинні розриватися між сторінками */
  .card,
  .energy__item,
  .advantage,
  .step {
    break-inside: avoid;
  }

  .reveal {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* ============================================================
   ПЛАНШЕТ — від 768px
   ============================================================ */
@media (min-width: 768px) {
  h2 {
    font-size: 36px;
  }

  .container {
    padding-left: 32px;
    padding-right: 32px;
  }

  .section {
    padding: 80px 0;
  }

  .section__head {
    margin-bottom: 56px;
  }

  .hero {
    padding: 64px 0;
  }

  .hero__buttons {
    margin-top: 32px;
  }

  .hero__title {
    font-size: 48px;
  }

  .stats {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Три колонки: останній показник добирає вільні комірки */
  .stats__item:last-child:nth-child(3n + 1) {
    grid-column: span 3;
  }

  .stats__item:last-child:nth-child(3n + 2) {
    grid-column: span 2;
  }

  .energy,
  .advantages,
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps {
    gap: 32px 40px;
  }

  .models {
    padding: 28px 24px;
  }

  .models__table th,
  .models__table td {
    padding: 12px 16px;
  }

  .callout {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 32px;
  }

  .form {
    grid-template-columns: repeat(2, 1fr);
    padding: 36px 32px;
  }

  .field--wide,
  .form .btn {
    grid-column: 1 / -1;
  }

  .footer__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*
  ДУЖЕ ВУЗЬКІ ЕКРАНИ (від 320px)

  Сім пунктів меню на такій ширині розкладаються в три рядки, і шапка
  займає майже половину екрана. Трохи меншим шрифтом і щільнішими
  проміжками вони вкладаються у два рядки.
*/
@media (max-width: 379.98px) {
  .nav {
    gap: 6px 14px;
  }

  .nav__link {
    padding: 9px 0;
    font-size: 13px;
  }

  .nav__link::after {
    bottom: 9px;
  }

  .header__inner {
    gap: 8px 16px;
  }
}

/*
  Захист сітки «Переваг» від порожніх комірок — лише там, де дві колонки.
  Діапазон вказаний точно (768–1099px), бо на десктопі колонок три
  і правило для двох колонок там лише зашкодило б.
*/
@media (min-width: 768px) and (max-width: 1099.98px) {
  .advantage:last-child:nth-child(odd) {
    grid-column: span 2;
  }

  /*
    Те саме для карток: у двох колонках непарна кількість лишає останню
    саму в рядку. Розтягуємо її на обидві комірки.
  */
  .cards > :last-child:nth-child(odd) {
    grid-column: span 2;
  }
}

/*
  РІВНО ЧОТИРИ КАРТКИ

  У сітці на три колонки чотири картки лягають як 3+1: четверта висить
  сама, дві третини рядка порожні. Розкладка 2×2 виглядає рівно.
  Селектор сам знаходить такі блоки — нічого дописувати в HTML не треба.
*/
@supports selector(:has(*)) {
  @media (min-width: 1100px) {
    .cards:has(> :nth-child(4):last-child) {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

/* ============================================================
   ДЕСКТОП — від 1100px
   ============================================================ */
@media (min-width: 1100px) {
  h2 {
    font-size: 44px;
  }

  .section {
    padding: 112px 0;
  }

  /* Меню повертається в один рядок із логотипом */
  .nav {
    order: 0;
    width: auto;
    gap: 28px;
  }

  .header__inner {
    flex-wrap: nowrap;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  /* Тепер шапка невисока — можна закріпити її зверху */
  .header {
    position: sticky;
    top: 0;
  }

  html {
    /* Дорівнює висоті закріпленої шапки + невеликий запас */
    scroll-padding-top: 100px;
  }

  .hero {
    padding: 88px 0;
  }

  .hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 64px;
  }

  .hero__title {
    font-size: 58px;
  }

  .hero__img {
    margin-top: 0;
  }

  .stats {
    margin-top: 80px;
  }

  .stats__item {
    padding: 28px 24px;
  }

  .stats__value {
    font-size: 40px;
  }

  .about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 64px;
  }

  .about__media {
    margin-bottom: 0;
  }

  .energy,
  .advantages,
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }

  /*
    Три колонки. Те саме, але варіантів два:
    остання картка лишилась сама → займає всі три комірки;
    остання картка друга в рядку → займає дві.
    Працює за будь-якої кількості карток — можна додавати й прибирати.
  */
  .advantage:last-child:nth-child(3n + 1) {
    grid-column: span 3;
  }

  .advantage:last-child:nth-child(3n + 2) {
    grid-column: span 2;
  }

  .steps {
    gap: 48px;
  }

  /* На широкому екрані етапи йдуть під горизонтальною лінією */
  .step {
    padding-left: 0;
    padding-top: 28px;
    border-left: none;
    border-top: 2px solid var(--border);
  }

  .step::before {
    top: -7px;
    left: 0;
  }

  .contacts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 64px;
  }

  .form {
    margin-top: 0;
    padding: 40px;
  }

  .footer__inner {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
  }
}