/* ==========================================================================
   Ol Bud Invest — компоненти
   ========================================================================== */

/* --- Іконки --------------------------------------------------------------- */

/* Обведення задаємо тут, а не тільки всередині спрайта.
   У <use> вміст потрапляє в тіньове дерево, і зовнішня <svg class="icon">
   передає йому свій успадкований fill — а він за замовчуванням чорний.
   Через це іконка могла намалюватися чорною плямою замість контуру.
   Ці властивості успадковуються, тож перекривають типове значення,
   але програють presentation-атрибутам на конкретних фігурах
   (як заливка крапки в іконці Instagram) — саме так і треба. */
.icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm {
  width: 1.125rem;
  height: 1.125rem;
}

.icon--lg {
  width: 2.25rem;
  height: 2.25rem;
}

/* --- Кнопки ---------------------------------------------------------------
   Один первинний CTA на екран. Мінімальна висота 48px — вимога до тач-цілей. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 3rem;
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--ink-800);
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.btn:hover {
  background: var(--steel-700);
  color: var(--white);
}

.btn:active {
  transform: translateY(1px);
}

.btn .icon {
  transition: transform var(--dur) var(--ease-out);
}

.btn:hover .icon {
  transform: translateX(3px);
}

/* Акцентна кнопка — головна конверсійна дія */
.btn--accent {
  background: var(--accent);
}

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

/* Другорядна дія — завжди візуально слабша за первинну */
.btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn--ghost:hover {
  background: var(--white);
  border-color: var(--steel-500);
  color: var(--ink-800);
}

.on-dark .btn--ghost,
.section--dark .btn--ghost {
  border-color: rgb(255 255 255 / 0.3);
  color: var(--white);
}

.on-dark .btn--ghost:hover,
.section--dark .btn--ghost:hover {
  background: rgb(255 255 255 / 0.1);
  border-color: rgb(255 255 255 / 0.55);
  color: var(--white);
}

.btn--block {
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.45;
  pointer-events: none;
}

/* Текстове посилання зі стрілкою */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}

.link-arrow .icon {
  transition: transform var(--dur) var(--ease-out);
}

.link-arrow:hover .icon {
  transform: translateX(4px);
}

/* --- Шапка ----------------------------------------------------------------
   На головній лежить поверх hero (--overlay) і ущільнюється при скролі. */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--white);
  border-bottom: 1px solid var(--border);
  transition: background var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.site-header--overlay {
  position: fixed;
  inset: 0 0 auto;
  /* Тло темне ОДРАЗУ, а не лише після скролу: перший кадр hero світлий
     угорі (небо), і на ньому білий текст меню просто зникав. */
  background: rgb(10 29 34 / 0.82);
  backdrop-filter: blur(12px);
  border-bottom-color: rgb(255 255 255 / 0.1);
  color: var(--white);
}

.site-header--overlay.is-solid {
  background: rgb(10 29 34 / 0.96);
  border-bottom-color: var(--ink-700);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: 5.875rem;
}

@media (max-width: 63.99em) {
  .site-header__inner {
    min-height: 4.75rem;
  }
}

/* Логотип — цілісний локап (кільце + напис одним SVG).
   Пропорції зняті з оригіналу і не змінюються: напис починається
   всередині кільця. Масштабується лише цілком, через ширину. */
.logo {
  display: inline-flex;
  align-items: center;
  color: var(--ink-800);
  text-decoration: none;
  flex: none;
}

.site-header--overlay .logo,
.on-dark .logo,
.mobile-nav .logo,
.site-footer .logo {
  color: var(--white);
}

.logo__lockup {
  /* У оригіналі напис усемеро нижчий за кільце — така пропорція знака.
     Тому локап тримаємо максимально великим, наскільки дозволяє шапка:
     менше 8.5rem напис стає нечитабельним. */
  width: 8.875rem; /* 142px → висота 80px */
  height: auto;
}

@media (max-width: 63.99em) {
  .logo__lockup {
    width: 7.125rem; /* 114px → висота 64px */
  }
}

/* --- Навігація ------------------------------------------------------------ */

.nav {
  margin-left: auto;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  position: relative;
  display: block;
  padding: var(--sp-2) 0;
  color: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}

.site-header--overlay .nav__link::after {
  background: var(--accent-text);
}

.nav__link:hover::after,
.nav__link[aria-current='page']::after {
  transform: scaleX(1);
}

.nav__link[aria-current='page'] {
  font-weight: 600;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex: none;
}

.header__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: inherit;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* Трубка — акцентним кольором: телефон у шапці це конверсійний елемент,
   і кольорова іконка веде до нього око. Працює на обох тлах: на темному
   це світла сталь, на світлому — темна. */
.header__phone .icon {
  color: var(--accent-text);
}

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

.site-header--overlay .header__phone:hover {
  color: var(--accent-text);
}

/* Бургер — прихований на десктопі */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-right: calc(var(--sp-3) * -1);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

@media (max-width: 63.99em) {
  .nav,
  .header__phone {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  .header__actions .btn {
    display: none;
  }
}

/* --- Мобільне меню -------------------------------------------------------- */

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  background: var(--ink-950);
  color: var(--text);
  padding: var(--sp-4) 0 var(--sp-8);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out),
    visibility 0s linear var(--dur);
}

.mobile-nav[data-open='true'] {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.5rem;
}

.mobile-nav__list {
  margin: var(--sp-8) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

.mobile-nav__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 3.5rem;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  text-decoration: none;
}

.mobile-nav__list a[aria-current='page'] {
  color: var(--accent-text);
}

.mobile-nav__foot {
  margin-top: var(--sp-8);
  display: grid;
  gap: var(--sp-3);
}

/* --- Картки послуг -------------------------------------------------------- */

.cards {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

/* Синя заливка тіла картки при наведенні.

   Малюється окремим шаром під вмістом, а не через background самої
   картки: фон картки треба лишити білим під фото, а перехід кольору
   анімувати не можна разом із трансформом без окремого шару — інакше
   браузер перемальовує всю картку разом із зображенням.
   inset-block-start: 0 — шар накриває і медіа, і текст, але медіа лежить
   вище (z-index), тож фото лишається чистим. */
.card__body::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, var(--steel-600), var(--steel-800));
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.card:hover {
  border-color: var(--steel-500);
  transform: translateY(-4px);
  /* Подвійна тінь: щільне синє кільце по контуру + м'яке холодне сяйво
     під карткою. Разом дають «неон», але без чужорідного світіння —
     колір узятий рівно з кнопки форми (--steel-500). */
  box-shadow: 0 0 0 1px var(--steel-500),
    0 20px 44px -14px rgb(62 120 153 / 0.55),
    0 4px 12px -4px rgb(16 50 58 / 0.28);
}

.card:hover .card__body::before {
  opacity: 1;
}

/* Текст на синьому — інвертуємо ролі, а не переписуємо кожне правило. */
.card:hover .card__body {
  --text: var(--white);
  --text-muted: #d7e3e8;
  --accent: var(--steel-50);
  --accent-text: var(--steel-50);
  color: var(--white);
}

.card:hover .card__title,
.card:hover .card__link {
  color: var(--white);
}

/* Стрілка їде від наведення на всю картку, а не лише на сам напис:
   клікабельна тут уся площа, тож і реакція має бути на всю площу. */
.card:hover .link-arrow .icon {
  transform: translateX(4px);
}

.card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--concrete-100);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.card:hover .card__media img {
  transform: scale(1.05);
}

.card__body {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sp-3);
  padding: var(--sp-6);
  transition: color var(--dur) var(--ease-out);
}

.card__icon {
  color: var(--accent);
  transition: color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

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

.card__title {
  margin: 0;
  font-size: 1.1875rem;
  transition: color var(--dur) var(--ease-out);
}

.card__text {
  margin: 0;
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Посилання розтягується на всю картку — уся площа клікабельна,
   але у DOM лишається один зрозумілий лінк для скрінрідера. */
.card__link {
  transition: color var(--dur) var(--ease-out);
}

.card__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* --- Чипи типів об'єктів -------------------------------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
}

.chip .icon {
  color: var(--accent);
}

.section--dark .chip {
  background: rgb(255 255 255 / 0.04);
  border-color: var(--border);
  color: var(--text);
}

.section--dark .chip .icon {
  color: var(--accent-text);
}

/* Інтерактивний чип-перемикач (галерея, ізометрія).

   Це орган керування, а не підпис: обидва стани мусять читатися як кнопки.
   Раніше на темній секції рамка невибраного давала 1.5:1 до фону, а заливка
   вибраного (--ink-800) — 1.3:1. Обидва чипи фактично зникали, лишався текст,
   що висить у повітрі, і другий варіант ніхто не бачив. Тепер рамка тримає
   контраст, а вибраний стан заливається акцентом — тим самим, що на кнопках. */
.chip--toggle {
  cursor: pointer;
  border-color: var(--accent);
  transition: background var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.chip--toggle:hover {
  border-color: var(--accent-hover, var(--accent));
}

/* steel-600 на ink-950 давав 2.62:1 — нижче за поріг 3:1, який WCAG
   вимагає для меж елементів керування. steel-500 виводить у норму. */
.section--dark .chip--toggle {
  border-color: var(--steel-500);
}

.section--dark .chip--toggle:hover {
  border-color: var(--steel-300);
}

.chip--toggle[aria-pressed='true'],
.chip--toggle[aria-selected='true'],
.section--dark .chip--toggle[aria-pressed='true'],
.section--dark .chip--toggle[aria-selected='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

/* Іконка всередині залитого чипа — того ж кольору, що й напис:
   акцентний відтінок на акцентній заливці не має за що зачепитися. */
.chip--toggle[aria-pressed='true'] .icon,
.chip--toggle[aria-selected='true'] .icon,
.section--dark .chip--toggle[aria-pressed='true'] .icon,
.section--dark .chip--toggle[aria-selected='true'] .icon {
  color: currentColor;
}

/* --- Показники ------------------------------------------------------------ */

.stats {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin: 0;
  padding: 0;
  /* Без цього <li> лишаються list-item і малюють маркери. Поки блок ішов
     на всю ширину контейнера, крапки падали за його межу й були непомітні;
     у вузькій колонці вони вилізли просто перед цифрами. */
  list-style: none;
}

.stat {
  border-top: 2px solid var(--accent);
  padding-top: var(--sp-4);
}

.section--dark .stat {
  border-top-color: var(--accent-text);
}

.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--track-display);
}

.stat__label {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.section--dark .stat__label {
  color: var(--text-muted);
}

/* --- Акордеон FAQ --------------------------------------------------------- */

.accordion {
  border-top: 1px solid var(--border);
}

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

.accordion__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  min-height: 3.5rem;
  padding: var(--sp-4) 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

.accordion__trigger:hover {
  color: var(--accent);
}

.accordion__trigger .icon {
  margin-top: 0.125rem;
  color: var(--accent);
  transition: transform var(--dur) var(--ease-out);
}

.accordion__trigger[aria-expanded='true'] .icon {
  transform: rotate(180deg);
}

/* Панель анімується через grid-template-rows — працює з довільною висотою */
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease-out);
}

.accordion__panel[data-open='true'] {
  grid-template-rows: 1fr;
}

.accordion__panel > div {
  overflow: hidden;
}

.accordion__panel p {
  max-width: 68ch;
  margin: 0 0 var(--sp-4);
  color: var(--text-muted);
}

/* --- Форма ---------------------------------------------------------------- */

.form {
  display: grid;
  gap: var(--sp-4);
}

.form__row {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.field {
  display: grid;
  gap: var(--sp-2);
}

.field__label {
  font-size: var(--fs-sm);
  font-weight: 500;
}

.field__req {
  color: var(--accent);
}

.section--dark .field__req {
  color: var(--accent-text);
}

/* Поле вводу — завжди білий острівець, хай навколо буде хоч темна
   секція. Тому і колір напису, і рамка беруться напряму, а не з ролей
   поверхні: усередині .cta роль --text світла, і введений текст лягав
   #d7e3e8 по білому — контраст 1.31, тобто людина не бачила, що набрала.
   Те саме стосується рамки: --border на темній поверхні майже чорний. */
.field__control {
  min-height: 3rem;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--concrete-200);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink-900);
  font-size: 1rem; /* 16px — інакше iOS автоматично збільшує сторінку */
  transition: border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.field__control:focus {
  outline: none;
  border-color: var(--steel-600);
  box-shadow: 0 0 0 3px rgb(51 112 125 / 0.18);
}

.field__control:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

textarea.field__control {
  min-height: 6.5rem;
  resize: vertical;
}

.field__hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.section--dark .field__hint {
  color: var(--text-muted);
}

/* Помилка — завжди поруч із полем, ніколи лише зверху сторінки */
.field__error {
  display: none;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--danger);
}

.section--dark .field__error {
  color: var(--danger);
}

.field[data-invalid='true'] .field__error {
  display: block;
}

.field[data-invalid='true'] .field__control {
  border-color: var(--danger);
}

/* Пастка для ботів — прибрана з потоку та з дерева доступності */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  min-height: 1.5rem;
  font-size: var(--fs-sm);
  font-weight: 500;
}

.form__status[data-state='error'] {
  color: var(--danger);
}

.section--dark .form__status[data-state='error'] {
  color: var(--danger);
}

.form__status[data-state='ok'] {
  color: #15803d;
}

.section--dark .form__status[data-state='ok'] {
  color: #86efac;
}

.form__consent {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.section--dark .form__consent {
  color: var(--text-muted);
}

/* --- Хлібні крихти -------------------------------------------------------- */

.breadcrumbs {
  padding-block: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs li:not(:last-child)::after {
  content: '/';
  margin-left: var(--sp-2);
  color: var(--concrete-400);
}

.breadcrumbs [aria-current='page'] {
  color: var(--text);
}

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

.site-footer {
  background: var(--ink-950);
  color: var(--text-muted);
  padding-block: var(--sp-12) var(--sp-8);
}

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

.site-footer h3 {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.footer__grid {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.footer__brand {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}

.footer__list {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

.footer__list a {
  color: var(--text-muted);
  text-decoration: none;
}

.footer__list a:hover {
  color: var(--accent-text);
}

.footer__contact {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.footer__contact .icon {
  margin-top: 0.125rem;
  color: var(--steel-500);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-8);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
}

/* Це <ul>, тож без скидання list-style браузер малює маркери —
   поруч із кожною іконкою з'являлася крапка. */
.social {
  display: flex;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
}

.social a:hover {
  border-color: var(--accent-text);
  color: var(--accent-text);
}