/* ============================================================
   ASANOV NET — темна тема
   База: docs/04-design-system.md (кольори бренду, типографіка, відступи).
   Напрямок оновлено 2026-08-20: темне полотно з градієнтним світлом
   замість світлої сторінки. Помаранчевий, як і раніше, — тільки кнопки дії.
   ============================================================ */

/* ---------- 0. Шрифти ---------- */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/manrope-v20-cyrillic_latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/manrope-v20-cyrillic_latin-800.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/inter-v20-cyrillic_latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/inter-v20-cyrillic_latin-500.woff2') format('woff2');
}

/* ---------- 1. Змінні ---------- */

:root {
  /* Кольори бренду з дизайн-системи */
  --brand-900: #011F3B;
  --brand-700: #13449A;
  --brand-500: #2886FF;
  --brand-300: #7FB4FF;

  --accent:       #FE8112;
  --accent-hover: #E6740A;

  /* Темне полотно */
  --bg:        #04080F;
  --bg-soft:   #070E1A;
  --surface:   rgba(255, 255, 255, .035);
  --surface-2: rgba(255, 255, 255, .06);
  --border:    rgba(255, 255, 255, .09);
  --border-strong: rgba(127, 180, 255, .38);

  --text:       #FFFFFF;
  --text-muted: #9FB3CC;
  --text-dim:   #6B819C;

  /* Світло: градієнти й підсвітки */
  --glow-blue:   rgba(40, 134, 255, .45);
  --glow-deep:   rgba(19, 68, 154, .55);
  --glow-accent: rgba(254, 129, 18, .30);
  --glow-btn:    rgba(254, 129, 18, .45);

  /* Шрифти */
  --font-head: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   800;

  /* Типографіка — мобільні значення */
  --fs-h1:      32px;
  --fs-h2:      26px;
  --fs-h3:      20px;
  --fs-body:    16px;
  --fs-small:   15px;
  --fs-caption: 13px;
  --fs-price:   26px;

  --lh-h1:    1.08;
  --lh-h2:    1.2;
  --lh-h3:    1.3;
  --lh-body:  1.6;
  --lh-small: 1.5;

  --ls-tight: -0.02em;
  --ls-wide:  0.08em;
  --measure:  58ch;

  /* Сітка й відступи */
  --container: 1160px;
  --gutter: 16px;

  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  --section-gap: 64px;

  /* Форми елементів */
  --radius-control: 8px;
  --radius-card:    16px;
  --radius-pill:    999px;

  --border-width:     1px;
  --border-width-btn: 1.5px;

  --shadow-card: 0 18px 40px rgba(0, 0, 0, .45);
  --shadow-glow: 0 10px 30px var(--glow-btn);

  /* Стани */
  --focus-ring:   3px solid rgba(127, 180, 255, .75);
  --focus-offset: 2px;
  --transition:   180ms cubic-bezier(.2, .7, .3, 1);
  --transition-slow: 420ms cubic-bezier(.2, .7, .3, 1);
  --tap-target:   44px;

  /* Компоненти */
  --btn-padding-y: 14px;
  --btn-padding-x: 26px;
  --fs-btn: 17px;
  --icon-size: 20px;
  --icon-size-lg: 24px;
  --logo-height: 28px;
  --sticky-bar-height: 60px;
  --header-height: 68px;
}

@media (min-width: 900px) {
  :root {
    --fs-h1:    56px;
    --fs-h2:    38px;
    --fs-h3:    22px;
    --fs-body:  17px;
    --fs-price: 32px;

    --gutter:      20px;
    --section-gap: 112px;
    --logo-height: 34px;
    --header-height: 80px;
  }
}

/* ---------- 2. Скидання ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-16));
}

body {
  position: relative;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-head);
  color: var(--text);
}

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-tight);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-tight);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h3);
}

p {
  margin: 0;
  max-width: var(--measure);
}

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

a {
  color: var(--brand-300);
  text-decoration: none;
  transition: color var(--transition);
}

img, svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

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

/* Атрибут hidden має вигравати у власних display: grid/flex */
[hidden] {
  display: none !important;
}

.sprite {
  display: none;
}

/* ---------- 3. Полотно: градієнтне світло і сітка ---------- */

.canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.canvas__glow {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.canvas__glow--one {
  top: -22vh;
  left: -10vw;
  width: 70vw;
  height: 70vw;
  background: radial-gradient(circle, var(--glow-deep) 0%, transparent 65%);
  animation: drift-one 26s ease-in-out infinite alternate;
}

.canvas__glow--two {
  top: 30vh;
  right: -20vw;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, var(--glow-blue) 0%, transparent 65%);
  animation: drift-two 32s ease-in-out infinite alternate;
}

.canvas__glow--three {
  bottom: -10vh;
  left: 20vw;
  width: 46vw;
  height: 46vw;
  background: radial-gradient(circle, var(--glow-accent) 0%, transparent 60%);
  animation: drift-three 38s ease-in-out infinite alternate;
}

@keyframes drift-one {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6vw, 8vh, 0) scale(1.15); }
}

@keyframes drift-two {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-8vw, -6vh, 0) scale(1); }
}

@keyframes drift-three {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(10vw, -10vh, 0) scale(1.2); }
}

/* ---------- 4. Каркас ---------- */

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

.section {
  position: relative;
  padding-block: var(--section-gap);
}

.section--soft {
  background: linear-gradient(180deg, transparent, var(--bg-soft) 12%, var(--bg-soft) 88%, transparent);
}

.section__head {
  max-width: 720px;
  margin-bottom: var(--space-32);
}

.section__title {
  margin-top: var(--space-12);
}

.section__subtitle {
  margin-top: var(--space-16);
  color: var(--text-muted);
}

/* Мітка над заголовком */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--brand-300);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.eyebrow::before {
  content: '';
  width: var(--space-24);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-500));
}

.microcopy {
  margin-top: var(--space-16);
  color: var(--text-dim);
  font-size: var(--fs-caption);
  line-height: var(--lh-small);
}

/* ---------- 5. Кнопки ---------- */
/* Головних кнопок на сторінці три: перший екран, комплекти, бізнес.
   Усі три відкривають попап із формою. Дзвінок живе окремо — у хедері
   й у липкій панелі, бо за брифом дзвінок і є головною дією. */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: var(--tap-target);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border: none;
  border-radius: var(--radius-control);
  font-family: var(--font-text);
  font-size: var(--fs-btn);
  font-weight: var(--fw-medium);
  line-height: var(--lh-small);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition),
              background-color var(--transition), border-color var(--transition), color var(--transition);
}

.btn__icon {
  position: relative;
  z-index: 1;
  width: var(--icon-size);
  height: var(--icon-size);
  flex-shrink: 0;
  transition: transform var(--transition);
}

.btn > span {
  position: relative;
  z-index: 1;
}

.btn--primary {
  background: var(--accent);
  color: var(--brand-900);
  box-shadow: 0 6px 18px rgba(254, 129, 18, .25);
}

/* Світлова хвиля, що проходить кнопкою на ховері */
.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform var(--transition-slow);
}

.btn--primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

.btn--primary:hover::after {
  transform: translateX(120%);
}

.btn--primary:hover .btn__icon {
  transform: translateX(2px);
}

.btn--primary:active {
  transform: translateY(0);
}

.btn--secondary {
  background: var(--surface);
  border: var(--border-width-btn) solid var(--border);
  color: var(--text);
}

.btn--secondary:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.btn--ghost {
  padding-inline: 0;
  background: none;
  color: var(--brand-300);
}

.btn--ghost:hover {
  color: var(--text);
}

.btn--ghost .btn__icon {
  transition: transform var(--transition);
}

.btn--ghost:hover .btn__icon {
  transform: translateX(4px);
}

/* ---------- 6. Картки з підсвіткою під курсором ---------- */

.card {
  position: relative;
  padding: var(--space-24);
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition), background-color var(--transition);
}

/* Пляма світла йде за курсором: координати кладе JS у --mx / --my */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(40, 134, 255, .18), transparent 70%);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  background: var(--surface-2);
}

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

.card > * {
  position: relative;
  z-index: 1;
}

.card__title {
  margin-bottom: var(--space-12);
}

.card__text {
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-48);
  height: var(--space-48);
  margin-bottom: var(--space-16);
  background: linear-gradient(140deg, rgba(40, 134, 255, .22), rgba(19, 68, 154, .12));
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-control);
  color: var(--brand-300);
  transition: transform var(--transition), color var(--transition), border-color var(--transition);
}

.icon-badge svg {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}

.card:hover .icon-badge {
  transform: translateY(-2px) scale(1.06);
  border-color: var(--border-strong);
  color: var(--text);
}

/* ---------- 7. Хедер ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 30;
  transition: background-color var(--transition), border-color var(--transition), backdrop-filter var(--transition);
  border-bottom: var(--border-width) solid transparent;
}

.header--stuck {
  background: rgba(4, 8, 15, .82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-height: var(--header-height);
}

.header__logo img {
  height: var(--logo-height);
  width: auto;
  transition: transform var(--transition);
}

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

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.header__messengers {
  display: none;
  gap: var(--space-4);
}

.header__messenger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  border-radius: var(--radius-control);
  color: var(--text-muted);
  transition: color var(--transition), background-color var(--transition), transform var(--transition);
}

.header__messenger:hover {
  background: var(--surface-2);
  color: var(--text);
  transform: translateY(-2px);
}

.header__messenger-icon {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}

.header__phone {
  padding-inline: var(--space-12);
}

.header__phone-label {
  display: none;
}

@media (min-width: 600px) {
  .header__messengers {
    display: flex;
  }

  .header__phone {
    padding-inline: var(--btn-padding-x);
  }

  .header__phone-label {
    display: inline;
  }
}

/* ---------- 8. Перший екран ---------- */

.hero {
  position: relative;
  padding-top: var(--space-48);
  padding-bottom: var(--section-gap);
  overflow: hidden;
  /* Запасний варіант: якщо канвас не стартував, перший екран
     не лишається порожнім. Полотно лягає зверху, коли запрацює */
  background-image: radial-gradient(120% 90% at 75% 50%, rgba(16, 119, 252, .18), transparent 60%);
}

/* Поле крапок: полотно Canvas 2D під вмістом. Малює js/hero-field.js.
   Якщо скрипт не стартував — лишається підсвітка нижче */
.hero__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Знак із лого як водяний знак — лишився в контактах */
@keyframes mark-breathe {
  from { transform: translateY(-50%) scale(1) rotate(0deg); opacity: .1; }
  to   { transform: translateY(-52%) scale(1.06) rotate(3deg); opacity: .18; }
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-32);
}

/* Перший екран не чекає на IntersectionObserver: заголовок малюється одразу
   (він і є елементом LCP), решта проступає одразу після завантаження. */
.hero .eyebrow,
.hero__subtitle,
.hero__actions,
.hero__stats {
  animation: hero-in 600ms cubic-bezier(.2, .7, .3, 1) both;
}

.hero__subtitle { animation-delay: 80ms; }
.hero__actions  { animation-delay: 160ms; }
.hero__stats    { animation-delay: 240ms; }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__title {
  margin-top: var(--space-16);
}

/* Друга половина заголовка світиться градієнтом бренду.
   Тільки сині відтінки: помаранчевий за дизайн-системою лишається кнопкам. */
.hero__accent {
  background: linear-gradient(100deg, var(--brand-300), var(--brand-500) 70%, #4E9BFF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__subtitle {
  margin-top: var(--space-24);
  color: var(--text-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
  margin-top: var(--space-32);
}

.hero__actions .btn--primary {
  flex: 1 1 100%;
}

.hero__call {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  color: var(--text);
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  transition: color var(--transition);
}

.hero__call:hover {
  color: var(--brand-300);
}

.hero__call svg {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  color: var(--brand-300);
  transition: transform var(--transition);
}

.hero__call:hover svg {
  transform: rotate(-12deg) scale(1.1);
}

/* Смуга з цифрами під кнопками — тримає нижню частину першого екрана */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-24);
  margin-top: var(--space-48);
  padding-top: var(--space-32);
  border-top: var(--border-width) solid var(--border);
}

.hero__stats li {
  position: relative;
  padding-left: var(--space-16);
}

.hero__stats li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--brand-500), transparent);
  transition: background var(--transition);
}

.hero__stats li:hover::before {
  background: linear-gradient(180deg, var(--accent), transparent);
}

.hero__stat-value {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
}

.hero__stat-label {
  display: block;
  margin-top: var(--space-4);
  color: var(--text-dim);
  font-size: var(--fs-caption);
  line-height: var(--lh-small);
}

@media (min-width: 900px) {
  .hero {
    padding-top: var(--space-64);
  }

  /* Текст першого екрана не ширший за рядок, але сам контейнер —
     той самий, що й у решти секцій. Інакше блок «вужчий за сайт». */
  .hero__title {
    max-width: 22ch;
  }

  .hero__subtitle {
    max-width: 52ch;
  }

  .hero__stats {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-32);
  }

  .hero__actions .btn--primary {
    flex: 0 1 auto;
  }
}

/* ---------- 9. Сітки секцій ---------- */

.grid {
  display: grid;
  gap: var(--space-16);
}

.grid > * {
  min-width: 0;
}

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

@media (min-width: 900px) {
  .grid { gap: var(--space-24); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 10. Карусель ---------- */

.carousel {
  position: relative;
}

.carousel__viewport {
  display: flex;
  gap: var(--space-16);
  overflow-x: auto;
  /* proximity, а не mandatory: інакше останній слайд не може стати на початок
     (йому не вистачає діапазону прокрутки) і карусель залипає на передостанньому */
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-block: var(--space-4);
  /* щоб тінь картки не обрізалась */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

.carousel__viewport::-webkit-scrollbar {
  display: none;
}

.carousel__slide {
  flex: 0 0 86%;
  scroll-snap-align: start;
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-top: var(--space-24);
}

/* Усі слайди вмістилися — гортати нема чого */
.carousel--static .carousel__controls {
  display: none;
}

.carousel__dots {
  display: flex;
  gap: var(--space-8);
}

.carousel__dot {
  width: var(--space-8);
  height: var(--space-8);
  padding: 0;
  background: var(--border);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: width var(--transition), background-color var(--transition);
}

.carousel__dot--active {
  width: var(--space-24);
  background: var(--brand-500);
}

.carousel__arrows {
  display: flex;
  gap: var(--space-8);
}

.carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), transform var(--transition);
}

.carousel__arrow:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.carousel__arrow:disabled {
  opacity: .35;
  cursor: default;
}

.carousel__arrow svg {
  width: var(--icon-size);
  height: var(--icon-size);
}

.carousel__arrow--prev svg {
  transform: rotate(90deg);
}

.carousel__arrow--next svg {
  transform: rotate(-90deg);
}

@media (min-width: 600px) {
  .carousel__slide {
    flex-basis: calc((100% - var(--space-16)) / 2);
  }
}

@media (min-width: 900px) {
  .carousel__viewport {
    gap: var(--space-24);
  }

  .carousel__slide {
    flex-basis: calc((100% - var(--space-24) * 2) / 3);
  }
}

/* ---------- 11. Комплекти ---------- */

.package {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.package__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  color: var(--brand-300);
  font-family: var(--font-head);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.package__lead {
  margin-top: var(--space-8);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.package__list {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: var(--border-width) solid var(--border);
}


.package__list li {
  display: flex;
  gap: var(--space-8);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.package__check {
  width: var(--icon-size);
  height: var(--icon-size);
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--brand-500);
}

.package__price {
  margin-top: auto;
  padding-top: var(--space-24);
  font-family: var(--font-head);
  font-size: var(--fs-price);
  font-weight: var(--fw-black);
  line-height: 1.1;
}

.package__price span {
  display: block;
  color: var(--text-dim);
  font-family: var(--font-text);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
}

/* ---------- 12. Ціни ---------- */

.prices__table-wrap {
  padding-inline: var(--space-16);
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
}

.prices__table th,
.prices__table td {
  padding-block: var(--space-12);
  border-bottom: var(--border-width) solid var(--border);
  text-align: left;
  vertical-align: top;
}

.prices__table th {
  color: var(--text-dim);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.prices__table td {
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  transition: color var(--transition);
}

.prices__table tbody tr {
  transition: background-color var(--transition);
}

.prices__table tbody tr:hover td {
  color: var(--text);
}

.prices__table td:last-child {
  width: 42%;
  color: var(--text);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.prices__table tr:last-child td {
  border-bottom: none;
}

.prices__note {
  margin-top: var(--space-24);
  padding: var(--space-16) var(--space-24);
  background: linear-gradient(120deg, rgba(40, 134, 255, .12), transparent);
  border-left: 2px solid var(--brand-500);
  border-radius: var(--radius-control);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  max-width: none;
}

@media (min-width: 600px) {
  .prices__table-wrap {
    padding-inline: var(--space-24);
  }

  .prices__table td:last-child {
    width: 30%;
  }
}

/* ---------- 13. Роботи ---------- */

.work {
  margin: 0;
}

.work__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(140deg, rgba(19, 68, 154, .25), rgba(4, 8, 15, .6));
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
}

.work__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(4, 8, 15, .85));
  opacity: 0;
  transition: opacity var(--transition);
}

.work:hover .work__frame {
  border-color: var(--border-strong);
  transform: translateY(-4px);
}

.work:hover .work__frame::after {
  opacity: 1;
}

.work__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.work:hover .work__img {
  transform: scale(1.05);
}

.work__caption {
  margin-top: var(--space-12);
  color: var(--text-dim);
  font-size: var(--fs-caption);
  line-height: var(--lh-small);
  transition: color var(--transition);
}

.work:hover .work__caption {
  color: var(--text-muted);
}

/* ---------- 14. Кроки ---------- */

.step {
  position: relative;
  padding-top: var(--space-24);
  border-top: var(--border-width) solid var(--border);
  transition: border-color var(--transition);
}

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

.step__number {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  line-height: 1;
  background: linear-gradient(140deg, var(--brand-300), rgba(40, 134, 255, .25));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: transform var(--transition);
}

.step:hover .step__number {
  transform: translateY(-2px);
}

.step__title {
  margin-top: var(--space-12);
  font-size: var(--fs-body);
}

.step__text {
  margin-top: var(--space-8);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

/* ---------- 15. Про майстра ---------- */

.about__inner {
  display: grid;
  gap: var(--space-32);
}

.about__inner > * {
  min-width: 0;
}

.about__text {
  margin-top: var(--space-16);
  color: var(--text-muted);
}

.about__text strong {
  color: var(--text);
  font-weight: var(--fw-medium);
}

.about__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, rgba(19, 68, 154, .3), rgba(4, 8, 15, .7));
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.about__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 900px) {
  .about__inner {
    grid-template-columns: 1.3fr 0.7fr;
    gap: var(--space-64);
    align-items: center;
  }
}

/* ---------- 16. Бізнес ---------- */

.business {
  position: relative;
}

.business__card {
  position: relative;
  padding: var(--space-32) var(--space-24);
  background: linear-gradient(150deg, rgba(19, 68, 154, .35), rgba(4, 8, 15, .5));
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.business__card::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 60%;
  height: 180%;
  background: radial-gradient(circle, var(--glow-blue), transparent 65%);
  opacity: .5;
  pointer-events: none;
}

.business__inner {
  position: relative;
  z-index: 1;
}

.business__points {
  display: grid;
  gap: var(--space-16);
  margin-top: var(--space-32);
}

.business__points li {
  display: flex;
  gap: var(--space-12);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.business__points strong {
  color: var(--text);
  font-weight: var(--fw-medium);
}

@media (min-width: 600px) {
  .business__points {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-24) var(--space-32);
  }
}

@media (min-width: 900px) {
  .business__card {
    padding: var(--space-64);
  }
}

/* ---------- 17. Відгуки ---------- */

.review {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.review__quote {
  color: var(--brand-500);
  font-family: var(--font-head);
  font-size: 40px;
  line-height: 1;
}

/* ---------- 18. FAQ ---------- */

.faq__list {
  border-top: var(--border-width) solid var(--border);
}

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

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-height: var(--tap-target);
  padding-block: var(--space-16);
  color: var(--text);
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h3);
  cursor: pointer;
  list-style: none;
  transition: color var(--transition);
}

.faq__question:hover {
  color: var(--brand-300);
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__answer {
  padding-bottom: var(--space-16);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

/* ---------- 19. Контакти ---------- */

.contact__inner {
  display: grid;
  gap: var(--space-32);
}

.contact__inner > * {
  min-width: 0;
}

.contact__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  margin-top: var(--space-24);
  color: var(--text);
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  transition: color var(--transition);
}

.contact__phone:hover {
  color: var(--brand-300);
}

.contact__phone svg {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  flex-shrink: 0;
  color: var(--brand-300);
  transition: transform var(--transition);
}

.contact__phone:hover svg {
  transform: rotate(-12deg) scale(1.1);
}

.contact__messengers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-24);
}

.contact__facts {
  display: grid;
  gap: var(--space-16);
  margin: var(--space-32) 0 0;
}

.contact__facts div {
  padding-left: var(--space-16);
  border-left: 2px solid var(--border);
  transition: border-color var(--transition);
}

.contact__facts div:hover {
  border-left-color: var(--brand-500);
}

.contact__facts dt {
  color: var(--text-dim);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.contact__facts dd {
  margin: var(--space-4) 0 0;
  color: var(--text);
  font-size: var(--fs-small);
}

@media (min-width: 900px) {
  .contact__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-64);
    align-items: center;
  }
}

/* ---------- 20. Попап із формою ---------- */

.modal {
  width: min(520px, calc(100vw - var(--space-32)));
  max-height: calc(100vh - var(--space-48));
  padding: 0;
  background: linear-gradient(160deg, #0A1526, #04080F);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-card);
  color: var(--text);
  overflow: visible;
}

.modal::backdrop {
  background: rgba(2, 5, 10, .78);
  backdrop-filter: blur(6px);
}

.modal[open] {
  animation: modal-in var(--transition-slow) both;
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal__inner {
  position: relative;
  padding: var(--space-32) var(--space-24);
  max-height: calc(100vh - var(--space-48));
  overflow-y: auto;
}

.modal__close {
  position: absolute;
  top: var(--space-12);
  right: var(--space-12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  background: none;
  border: none;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.modal__close:hover {
  background: var(--surface-2);
  color: var(--text);
  transform: rotate(90deg);
}

.modal__close svg {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}

.modal__title {
  padding-right: var(--space-48);
}

.modal__subtitle {
  margin-top: var(--space-12);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

/* Форма */

.form {
  display: grid;
  gap: var(--space-16);
  margin-top: var(--space-24);
}

.form__field {
  display: grid;
  gap: var(--space-8);
}

.form__label {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.form__input {
  width: 100%;
  min-height: var(--tap-target);
  padding: var(--space-12) var(--space-16);
  background: rgba(255, 255, 255, .04);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-control);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-small);
  transition: border-color var(--transition), background-color var(--transition);
}

.form__input::placeholder {
  color: var(--text-dim);
}

.form__input:hover {
  border-color: var(--border-strong);
}

.form__input:focus {
  background: rgba(255, 255, 255, .07);
}

.form__input[aria-invalid='true'] {
  border-color: var(--brand-300);
  border-width: var(--border-width-btn);
}

.form__error {
  color: var(--text);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: var(--lh-small);
}

.form__error:empty {
  display: none;
}

.form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__submit {
  width: 100%;
}

.form__success {
  display: grid;
  gap: var(--space-16);
  justify-items: center;
  padding-block: var(--space-32);
  text-align: center;
}

.form__success svg {
  width: var(--space-48);
  height: var(--space-48);
  color: var(--brand-300);
  animation: pop-in var(--transition-slow) both;
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---------- 21. Липка панель ---------- */

.sticky-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 25;
  background: rgba(4, 8, 15, .9);
  backdrop-filter: blur(14px);
  border-top: var(--border-width) solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.sticky-bar--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sticky-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--sticky-bar-height);
  padding: var(--space-8) var(--gutter);
}

.sticky-bar__btn {
  flex: 1;
  padding-inline: var(--space-12);
  padding-block: var(--space-8);
}

.footer {
  /* запас, щоб найнижча смуга не лягала впритул до липкої панелі */
  padding-bottom: calc(var(--sticky-bar-height) + var(--space-24) + env(safe-area-inset-bottom));
}

@media (min-width: 900px) {
  .sticky-bar {
    display: none;
  }

  .footer {
    padding-bottom: 0;
  }
}

/* ---------- 22. Футер ---------- */

.footer {
  position: relative;
  padding-top: var(--section-gap);
  border-top: var(--border-width) solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(1, 31, 59, .35));
}

.footer__inner {
  display: grid;
  gap: var(--space-32);
}

.footer__logo {
  height: var(--logo-height);
  width: auto;
}

.footer__legal {
  margin-top: var(--space-16);
  color: var(--text-dim);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.footer__phone {
  color: var(--text);
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  transition: color var(--transition);
}

.footer__phone:hover,
.footer__link:hover,
.footer__messengers a:hover {
  color: var(--brand-300);
}

.footer__messengers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin-top: var(--space-16);
}

.footer__messengers a,
.footer__link {
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-16);
  margin-top: var(--space-16);
  padding-block: var(--space-24);
  border-top: var(--border-width) solid var(--border);
}

.footer__copy {
  color: var(--text-dim);
  font-size: var(--fs-small);
}

@media (min-width: 900px) {
  .footer__inner {
    grid-template-columns: 1fr 1fr;
  }

  .footer__bottom {
    grid-column: 1 / -1;
  }
}

/* ---------- 23. Правова сторінка ---------- */

.legal__inner {
  max-width: var(--measure);
}

.legal h2 {
  margin-top: var(--space-32);
  font-size: var(--fs-h3);
}

.legal p {
  margin-top: var(--space-12);
  color: var(--text-muted);
}

.legal a {
  text-decoration: underline;
  text-underline-offset: var(--space-4);
}

.legal__back {
  margin-top: var(--space-48);
}

/* ---------- 25. Доступність ---------- */

.skip-link {
  position: absolute;
  left: var(--space-16);
  top: var(--space-16);
  z-index: 40;
  padding: var(--space-12) var(--space-16);
  background: var(--bg-soft);
  border: var(--border-width-btn) solid var(--border-strong);
  border-radius: var(--radius-control);
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  transform: translateY(-200%);
  transition: transform var(--transition);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .canvas__glow {
    animation: none;
  }
}

/* ---------- 26. Меню в хедері ---------- */

.header__nav {
  display: none;
  gap: var(--space-24);
  margin-inline: auto;
}

.header__nav a {
  position: relative;
  color: var(--text-muted);
  font-size: var(--fs-small);
  white-space: nowrap;
}

.header__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--brand-500), var(--brand-300));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

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

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

@media (min-width: 1024px) {
  .header__nav {
    display: flex;
  }
}

/* ---------- 27. Месенджери ---------- */

.messengers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-24);
}

.messenger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text);
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

/* Фірмовий колір сервісу проступає під іконкою на ховері */
.messenger::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand-color, var(--brand-500));
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--transition), transform var(--transition);
}

.messenger svg {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  transition: transform var(--transition);
}

.messenger:hover {
  transform: translateY(-3px);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 10px 24px var(--brand-shadow, rgba(40, 134, 255, .35));
}

.messenger:hover::before {
  opacity: 1;
  transform: scale(1);
}

.messenger:hover svg {
  transform: scale(1.08);
}

.messenger--viber {
  --brand-color: #7360F2;
  --brand-shadow: rgba(115, 96, 242, .4);
}

.messenger--telegram {
  --brand-color: #2AABEE;
  --brand-shadow: rgba(42, 171, 238, .4);
}

.messenger--whatsapp {
  --brand-color: #25D366;
  --brand-shadow: rgba(37, 211, 102, .35);
}

.messengers--small {
  margin-top: var(--space-16);
  gap: var(--space-8);
}

.messengers--small .messenger {
  width: 44px;
  height: 44px;
}

.messengers--small .messenger svg {
  width: 20px;
  height: 20px;
}

/* ---------- 28. Дії під секцією ---------- */

.section__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16) var(--space-24);
  margin-top: var(--space-32);
}

.section__actions .microcopy {
  margin-top: 0;
  max-width: 46ch;
}

/* ---------- 29. Кроки: лінія процесу ---------- */

.steps {
  position: relative;
}

.step::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 40%;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-500), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-slow);
}

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

/* ---------- 30. Фото робіт ---------- */

/* Світлова смуга пробігає кадром на ховері */
.work__frame::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: -60%;
  height: 60%;
  z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(127, 180, 255, .22), transparent);
  transform: translateY(0);
  transition: transform var(--transition-slow);
  pointer-events: none;
}

.work:hover .work__frame::before {
  transform: translateY(280%);
}

/* ---------- 31. Відгуки ---------- */

.review__text {
  margin-top: var(--space-8);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

.review__author {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-top: auto;
  padding-top: var(--space-24);
  font-size: var(--fs-caption);
  color: var(--text-dim);
  line-height: var(--lh-small);
}

.review__author strong {
  display: block;
  color: var(--text);
  font-family: var(--font-head);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
}

.review__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-48);
  height: var(--space-48);
  flex-shrink: 0;
  background: linear-gradient(140deg, rgba(40, 134, 255, .35), rgba(19, 68, 154, .15));
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  transition: transform var(--transition);
}

.review:hover .review__avatar {
  transform: scale(1.06);
}

/* ---------- 32. Футер ---------- */

.footer__inner {
  grid-template-columns: 1fr;
  gap: var(--space-32);
}

.footer__nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-12) var(--space-24);
}

.footer__nav a {
  color: var(--text-muted);
  font-size: var(--fs-small);
  transition: color var(--transition), transform var(--transition);
}

.footer__nav a:hover {
  color: var(--text);
  transform: translateX(3px);
}

.footer__brand .footer__legal {
  max-width: 34ch;
}

.footer__bottom {
  align-items: center;
}

.footer__copy,
.footer__link {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--fs-caption);
}

@media (min-width: 900px) {
  .footer__inner {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: var(--space-48);
  }

  .footer__nav {
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    gap: var(--space-12) var(--space-32);
  }

  .footer__bottom {
    grid-column: 1 / -1;
  }
}

/* ---------- 33. Заголовок першого екрана: живий градієнт ---------- */

.hero__accent {
  background-size: 220% 100%;
  animation: accent-sweep 12s ease-in-out infinite alternate;
}

@keyframes accent-sweep {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* ---------- 34. Вкладки ---------- */

.tabs {
  display: inline-flex;
  gap: var(--space-4);
  margin-bottom: var(--space-24);
  padding: var(--space-4);
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-pill);
}

.tab {
  padding: var(--space-8) var(--space-16);
  background: none;
  border: none;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.tab:hover {
  color: var(--text);
}

.tab--active {
  background: rgba(40, 134, 255, .16);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.package__tag {
  padding: 2px var(--space-8);
  background: rgba(127, 180, 255, .12);
  border-radius: var(--radius-pill);
  color: var(--brand-300);
  font-size: 11px;
}

.package__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

/* ---------- 35. Прайс ---------- */

.prices__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  width: 100%;
  min-height: var(--tap-target);
  margin-top: var(--space-8);
  padding: var(--space-12);
  background: none;
  border: none;
  border-top: var(--border-width) solid var(--border);
  color: var(--brand-300);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: color var(--transition), background-color var(--transition);
}

.prices__toggle:hover {
  background: rgba(255, 255, 255, .03);
  color: var(--text);
}

.prices__toggle svg {
  width: var(--icon-size);
  height: var(--icon-size);
  transition: transform var(--transition);
}

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


/* ---------- 37. Переваги і блок про майстра ---------- */

.advantage .card__title {
  font-size: var(--fs-body);
}

.about__inner {
  display: grid;
  gap: var(--space-32);
  margin-top: var(--space-48);
  padding-top: var(--space-48);
  border-top: var(--border-width) solid var(--border);
  align-items: center;
}

.about__inner > * {
  min-width: 0;
}

.about__portrait {
  position: relative;
  margin: 0;
  max-width: 320px;
  aspect-ratio: 4 / 5;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.about__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__quote {
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.35;
}

.about__text {
  margin-top: var(--space-16);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

@media (min-width: 900px) {
  .about__inner {
    grid-template-columns: 320px 1fr;
    gap: var(--space-64);
  }
}

/* ---------- 38. Для бізнесу ---------- */

.business__bg {
  position: absolute;
  right: -6%;
  bottom: -12%;
  width: 60%;
  max-width: 520px;
  opacity: .16;
  pointer-events: none;
}

.business__inner {
  display: grid;
  gap: var(--space-32);
}

.business__inner > * {
  min-width: 0;
}

.business__points {
  display: grid;
  gap: var(--space-16);
  margin-top: var(--space-32);
}

.business__points li {
  display: flex;
  gap: var(--space-12);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.business__points strong {
  color: var(--text);
  font-weight: var(--fw-medium);
}

.tariff {
  display: flex;
  flex-direction: column;
  padding: var(--space-24);
  background: rgba(4, 8, 15, .55);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-card);
  backdrop-filter: blur(6px);
}

.tariff__label {
  color: var(--brand-300);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.tariff__price {
  margin-top: var(--space-8);
  font-family: var(--font-head);
  font-size: var(--fs-price);
  font-weight: var(--fw-black);
  line-height: 1.1;
}

.tariff__price span {
  display: block;
  color: var(--text-dim);
  font-family: var(--font-text);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
}

.tariff__list {
  display: grid;
  gap: var(--space-12);
  margin-top: var(--space-24);
  padding-top: var(--space-24);
  border-top: var(--border-width) solid var(--border);
}

.tariff__list li {
  display: flex;
  gap: var(--space-8);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.tariff__btn {
  width: 100%;
  margin-top: var(--space-24);
}

.tariff .microcopy {
  margin-top: var(--space-12);
  text-align: center;
}

@media (min-width: 900px) {
  .business__inner {
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-64);
    align-items: center;
  }

  .tariff {
    padding: var(--space-32);
  }
}

/* ---------- 39. FAQ ---------- */

.faq__question {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-16);
  min-height: var(--tap-target);
  padding-block: var(--space-16);
  cursor: pointer;
  list-style: none;
  transition: color var(--transition);
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__index {
  color: var(--text-dim);
  font-family: var(--font-head);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  transition: color var(--transition);
}

.faq__label {
  color: var(--text);
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h3);
  transition: color var(--transition);
}

.faq__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--brand-300);
  transition: transform var(--transition), background-color var(--transition), border-color var(--transition), color var(--transition);
}

.faq__toggle svg {
  width: var(--icon-size);
  height: var(--icon-size);
}

.faq__question:hover .faq__label,
.faq__question:hover .faq__index {
  color: var(--brand-300);
}

.faq__question:hover .faq__toggle {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

/* Плюс повертається на 45° і стає хрестиком */
.faq__item[open] .faq__toggle {
  transform: rotate(135deg);
  background: rgba(40, 134, 255, .18);
  border-color: var(--border-strong);
  color: var(--text);
}

.faq__item[open] .faq__index {
  color: var(--brand-300);
}

.faq__answer {
  padding: 0 0 var(--space-24) calc(var(--space-32) + var(--space-16));
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  animation: faq-in 320ms cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes faq-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 40. Форма на сторінці ---------- */

.form-card {
  align-self: start;
}

.form-card__title {
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
}

.form-card__text {
  margin-top: var(--space-8);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.form--sending .form__submit {
  opacity: .8;
}

.form--sending .btn__icon {
  animation: sending 900ms linear infinite;
}

@keyframes sending {
  from { transform: translateX(0); opacity: 1; }
  50%  { transform: translateX(6px); opacity: .4; }
  to   { transform: translateX(0); opacity: 1; }
}

@media (min-width: 900px) {
  .form-card {
    padding: var(--space-32);
  }
}

/* ---------- 41. Сторінка подяки ---------- */

.thanks__inner {
  display: grid;
  justify-items: start;
  max-width: 640px;
  padding-block: var(--space-48);
}

.thanks__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-64);
  height: var(--space-64);
  margin-bottom: var(--space-24);
  background: linear-gradient(140deg, rgba(40, 134, 255, .35), rgba(19, 68, 154, .12));
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--brand-300);
}

.thanks__mark svg {
  width: var(--space-32);
  height: var(--space-32);
}

.thanks__title {
  font-size: var(--fs-h1);
}

.thanks__text {
  margin-top: var(--space-16);
  color: var(--text-muted);
}

.thanks__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-24);
  margin-top: var(--space-32);
}

/* ---------- 42. Кейси ---------- */

.case {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

.case__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.case__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.case:hover .case__img {
  transform: scale(1.05);
}

.case__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(4, 8, 15, .92));
}

.case__badge {
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
  z-index: 1;
  padding: var(--space-4) var(--space-12);
  background: rgba(4, 8, 15, .72);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--brand-300);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  backdrop-filter: blur(6px);
}

.case__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-24);
}

.case__place {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--text-dim);
  font-size: var(--fs-caption);
}

.case__place svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--brand-300);
}

.case__title {
  margin-top: var(--space-8);
  font-size: var(--fs-body);
}

.case__text {
  margin-top: var(--space-8);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.case__specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  /* auto згори притискає рядок до низу картки, щоб у сусідніх
     кейсах цифри стояли на одній лінії попри різну довжину тексту.
     Повітря над рискою даємо відступом, а не полем: поле згори
     перебило б auto і рядок знову приклеївся б до тексту */
  margin: auto 0 0;
  padding-top: var(--space-24);
  border-top: var(--border-width) solid var(--border);
}

.case__specs dt {
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.case__specs dd {
  margin: var(--space-4) 0 0;
  font-family: var(--font-head);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
}

.case__specs div:last-child dd {
  color: var(--brand-300);
}

/* ---------- 43. Прайс-лист ---------- */

.prices {
  display: grid;
  gap: var(--space-24);
}

.prices > * {
  min-width: 0;
}

.prices__list {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.pricelist__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-16);
  border-bottom: var(--border-width) solid var(--border);
  transition: background-color var(--transition);
}

.pricelist:last-of-type .pricelist__row:last-child {
  border-bottom: none;
}

.pricelist__row:hover {
  background: rgba(255, 255, 255, .03);
}

.pricelist__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: linear-gradient(140deg, rgba(40, 134, 255, .2), rgba(19, 68, 154, .1));
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-control);
  color: var(--brand-300);
  transition: transform var(--transition), border-color var(--transition), color var(--transition);
}

.pricelist__icon svg {
  width: var(--icon-size);
  height: var(--icon-size);
}

.pricelist__row:hover .pricelist__icon {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  color: var(--text);
}

.pricelist__name {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: var(--lh-small);
}

.pricelist__note {
  display: block;
  margin-top: 2px;
  color: var(--text-dim);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
}

.pricelist__price {
  display: block;
  flex-shrink: 0;
  text-align: right;
  font-family: var(--font-head);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.pricelist__price span {
  display: block;
  color: var(--text-dim);
  font-family: var(--font-text);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
}

@media (min-width: 600px) {
  .pricelist__row {
    padding-inline: var(--space-24);
  }
}

@media (min-width: 1024px) {
  .prices {
    grid-template-columns: 1.55fr 1fr;
    gap: var(--space-32);
    align-items: start;
  }
}

/* ---------- 44. Оффер збоку ---------- */

.offer {
  display: flex;
  flex-direction: column;
  padding: var(--space-24);
  background: linear-gradient(160deg, rgba(40, 134, 255, .16), rgba(4, 8, 15, .35));
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-card);
}

.offer .icon-badge {
  margin-bottom: var(--space-16);
}

.offer__title {
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
}

.offer__text {
  margin-top: var(--space-8);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.offer__list {
  display: grid;
  gap: var(--space-12);
  margin-top: var(--space-24);
  padding-top: var(--space-24);
  border-top: var(--border-width) solid var(--border);
}

.offer__list li {
  display: flex;
  gap: var(--space-8);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.offer__btn {
  width: 100%;
  margin-top: var(--space-24);
}

@media (min-width: 1024px) {
  .offer {
    position: sticky;
    top: calc(var(--header-height) + var(--space-24));
    padding: var(--space-32);
  }
}

/* ---------- 45. Картка майстра ---------- */

.master {
  display: grid;
  gap: var(--space-24);
  margin-top: var(--space-48);
  padding: var(--space-24);
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
}

.master > * {
  min-width: 0;
}

.master__photo {
  position: relative;
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.master__photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.master__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-32) var(--space-16) var(--space-16);
  background: linear-gradient(180deg, transparent, rgba(4, 8, 15, .9));
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.master__head {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.master__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-64);
  height: var(--space-64);
  flex-shrink: 0;
  background: linear-gradient(140deg, rgba(40, 134, 255, .25), rgba(19, 68, 154, .1));
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-pill);
}

.master__mark img {
  width: 34px;
  height: auto;
}

.master__name {
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
}

.master__role {
  color: var(--text-dim);
  font-size: var(--fs-caption);
}

/* Цитата з великою лапкою */
.master__quote {
  position: relative;
  margin: var(--space-24) 0 0;
  padding-left: var(--space-32);
  color: var(--text);
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.4;
}

.master__quote::before {
  content: '“';
  position: absolute;
  left: 0;
  top: -14px;
  color: var(--brand-500);
  font-family: var(--font-head);
  font-size: 56px;
  line-height: 1;
}

.master__facts {
  display: grid;
  gap: var(--space-16);
  margin-top: var(--space-32);
  padding-top: var(--space-24);
  border-top: var(--border-width) solid var(--border);
}

.master__facts li {
  display: flex;
  gap: var(--space-12);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.master__facts strong {
  color: var(--text);
  font-weight: var(--fw-medium);
}

.master__fact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--surface-2);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-control);
  color: var(--brand-300);
  transition: transform var(--transition), border-color var(--transition);
}

.master__fact-icon svg {
  width: 18px;
  height: 18px;
}

.master__facts li:hover .master__fact-icon {
  transform: translateY(-2px);
  border-color: var(--border-strong);
}

.master__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16) var(--space-24);
  margin-top: var(--space-32);
}

@media (min-width: 900px) {
  .master {
    grid-template-columns: 340px 1fr;
    gap: var(--space-48);
    padding: var(--space-32);
    align-items: center;
  }
}

/* ---------- 46. Поле коментаря ---------- */

.form__textarea {
  min-height: 96px;
  resize: vertical;
  line-height: var(--lh-body);
}

.form__optional {
  color: var(--text-dim);
  font-weight: var(--fw-regular);
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- 49. Бургер і меню на мобільному ---------- */

.burger {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: var(--tap-target);
  height: var(--tap-target);
  padding: 0;
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}

.burger:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

.burger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--text);
  transition: transform var(--transition), opacity var(--transition);
}

.burger[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Панель виїжджає справа майже на всю сторінку */
.menu {
  width: min(420px, 90vw);
  max-width: none;
  height: 100%;
  max-height: 100%;
  margin: 0 0 0 auto;
  padding: 0;
  background: linear-gradient(160deg, #0A1526, #04080F);
  border: none;
  border-left: var(--border-width) solid var(--border-strong);
  color: var(--text);
  overflow: hidden;
}

.menu::backdrop {
  background: rgba(2, 5, 10, .72);
  backdrop-filter: blur(6px);
}

.menu[open] {
  animation: menu-in var(--transition-slow) both;
}

@keyframes menu-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.menu__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  height: 100%;
  padding: var(--space-24) var(--gutter) calc(var(--space-24) + env(safe-area-inset-bottom));
  overflow-y: auto;
}

.menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.menu__head img {
  height: var(--logo-height);
  width: auto;
}

.menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.menu__close:hover {
  background: var(--surface-2);
  color: var(--text);
  transform: rotate(90deg);
}

.menu__close svg {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}

.menu__nav {
  display: grid;
  gap: var(--space-4);
}

.menu__nav a {
  display: flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-control);
  color: var(--text);
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.menu__nav a:hover {
  background: var(--surface-2);
  color: var(--brand-300);
  transform: translateX(4px);
}

.menu__cta {
  width: 100%;
}

.menu__contacts {
  margin-top: auto;
  padding-top: var(--space-24);
  border-top: var(--border-width) solid var(--border);
}

.menu__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  color: var(--text);
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
}

.menu__phone svg {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  color: var(--brand-300);
}

.menu__note {
  margin-top: var(--space-16);
  color: var(--text-dim);
  font-size: var(--fs-caption);
}

/* Хедер: до 900px — бургер замість номера, далі — меню і номер */
@media (max-width: 899px) {
  .header__phone {
    display: none;
  }
}

@media (min-width: 900px) {
  .burger,
  .menu {
    display: none;
  }
}

/* ---------- 50. Футер: карта і меню в рядок ---------- */

.footer__top {
  display: grid;
  gap: var(--space-32);
}

.footer__top > * {
  min-width: 0;
}


/* Меню одним рядком */
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-24);
  margin-top: var(--space-32);
  padding-top: var(--space-24);
  border-top: var(--border-width) solid var(--border);
  grid-template-columns: none;
}

@media (min-width: 900px) {
  .footer__top {
    grid-template-columns: 1.1fr 1fr 0.9fr;
    gap: var(--space-48);
    align-items: start;
  }

  .footer__nav {
    justify-content: space-between;
    gap: var(--space-16);
  }
}

/* Футер тепер укладається рядками: верх, меню, низ */
.footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 900px) {
  .footer__inner {
    grid-template-columns: 1fr;
  }
}

/* ---------- 51. Футер: чотири колонки, меню вертикально ---------- */

.footer__heading {
  margin-bottom: var(--space-16);
  color: var(--text-dim);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.footer__nav {
  display: grid;
  gap: var(--space-8);
  justify-items: start;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}


@media (min-width: 600px) {
  .footer__top {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-32);
  }
}

@media (min-width: 1024px) {
  .footer__top {
    /* Колонки за вмістом, вільне місце йде між ними —
       після прибирання карти інакше лишається порожній стовпець */
    grid-template-columns: minmax(240px, 320px) auto auto;
    justify-content: space-between;
    gap: var(--space-48);
  }


}

/* ---------- 52. Фон блоку для бізнесу ---------- */

.business__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 60% 50%;
  opacity: .5;
  transform: scale(1.02);
  transition: transform var(--transition-slow), opacity var(--transition-slow);
  pointer-events: none;
}

.business__card:hover .business__bg {
  opacity: .62;
  transform: scale(1.05);
}

/* Затемнення, щоб текст лишався читабельним поверх фото */
.business__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(4, 8, 15, .96) 32%, rgba(4, 8, 15, .72) 55%, rgba(4, 8, 15, .55));
  pointer-events: none;
}

.business__inner {
  position: relative;
  z-index: 1;
}

/* ---------- 53. Знак бренду в контактах ---------- */

.contact {
  position: relative;
  overflow: hidden;
}

.contact__mark {
  position: absolute;
  left: -14%;
  bottom: -18%;
  width: 48%;
  max-width: 520px;
  opacity: .07;
  transform: rotate(-8deg);
  animation: mark-breathe 18s ease-in-out infinite alternate;
  pointer-events: none;
}

.contact__inner {
  position: relative;
  z-index: 1;
}

@media (min-width: 900px) {
  .contact__mark {
    left: auto;
    right: -8%;
    bottom: -22%;
    width: 38%;
  }
}


/* ---------- Пара фото в картці обʼєкта ---------- */
/* Два вертикальні кадри поруч дають горизонтальний блок,
   тому обрізати портретні фото під 4:3 не доводиться */

.case__media--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--border-width);
  aspect-ratio: 3 / 2;
}

.case__media--pair .case__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Скріншот переписки ---------- */

.shot {
  margin: 0;
  overflow: hidden;
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
}

.shot__img {
  display: block;
  width: 100%;
  height: auto;
  /* Скрін телефона вищий за будь-яку картку поруч. Обмежуємо висоту
     і показуємо низ переписки — там і є суть відгуку */
  max-height: 520px;
  object-fit: cover;
  object-position: center bottom;
}


/* ---------- Заглушка в каруселі ---------- */
/* Порожнє місце під наступний обʼєкт чи відгук. Пунктир одразу
   показує, що це слот, а не поламана картка */

.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  height: 100%;
  min-height: 220px;
  padding: var(--space-32) var(--space-24);
  background: var(--surface);
  border: var(--border-width) dashed var(--border-strong);
  border-radius: var(--radius-card);
  text-align: center;
}

.slot--shot {
  min-height: 520px;
}

.slot__icon {
  width: 28px;
  height: 28px;
  color: var(--brand-300);
  opacity: .7;
}

.slot__text {
  color: var(--text-dim);
  font-size: var(--fs-small);
}

/* ---------- Текстове посилання ---------- */

.link {
  color: var(--brand-300);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--transition);
}

.link:hover {
  color: var(--text);
}


/* ---------- Найнижча смуга футера ---------- */
/* Напис про ваучер і знак агенції-розробника */

.footer__strip {
  display: flex;
  justify-content: center;
  margin-top: var(--space-24);
  padding-top: var(--space-24);
  border-top: var(--border-width) solid var(--border);
}

.footer__voucher {
  width: 100%;
  max-width: 340px;
  height: auto;
}

.footer__strip picture {
  display: block;
  max-width: 100%;
}

.footer__agency {
  display: inline-block;
  margin-top: var(--space-16);
  opacity: .75;
  transition: opacity var(--transition);
}

@media (min-width: 768px) {
  /* Знак агенції притискаємо до низу колонки, а не лишаємо
     висіти одразу під текстом */
  .footer__brand {
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }

  /* Гнучкий контейнер розтягує елементи по ширині, і бокс лого
     ставав на всю колонку — сам знак центрувався всередині нього.
     Притискаємо картинки до лівого краю, текст лишаємо на всю ширину */
  .footer__brand .footer__logo,
  .footer__brand .footer__agency {
    align-self: flex-start;
  }

  .footer__brand .footer__agency {
    margin-top: auto;
    padding-top: var(--space-24);
  }
}

.footer__agency:hover {
  opacity: 1;
}

.footer__agency img {
  width: 104px;
  height: auto;
}

@media (min-width: 768px) {
  .footer__voucher {
    max-width: 100%;
  }
}

/* ---------- Пошта в контактах і футері ---------- */
/* Дрібніша за телефон: дзвінок лишається головною дією */

.contact__mail {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-12);
  color: var(--text-muted);
  font-size: var(--fs-body);
  transition: color var(--transition);
}

.contact__mail svg {
  width: var(--icon-size);
  height: var(--icon-size);
  flex-shrink: 0;
  color: var(--brand-300);
}

.contact__mail:hover,
.footer__mail:hover {
  color: var(--text);
}

.footer__mail {
  display: block;
  margin-top: var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-small);
  transition: color var(--transition);
}