/* TOLERAN — дизайн-система по принципам sondaven.com (MOTION.md §5, §5.2) */

/* ---------- токени ---------- */
:root {
  --c-dark: #0e0e0f;
  --c-light: #e8e4dd;
  --red: #de002c;
  --red-hover: #f0103d;
  --font: 'Onest', system-ui, -apple-system, sans-serif;
  --font-display: 'Unbounded', 'Onest', system-ui, sans-serif; /* слоган «Ми можемо все» (MOTION §5.2) */

  /* масштаб: розмір макета → rem (1rem = 1vw) */
  --ratio: 16.8; /* макет 1440 при ratio 14.4 → на 14% компактніше (рішення замовника: «усе надто велике») */
  --u-4: calc(4rem / var(--ratio));
  --u-8: calc(8rem / var(--ratio));
  --u-12: calc(12rem / var(--ratio));
  --u-16: calc(16rem / var(--ratio));
  --u-24: calc(24rem / var(--ratio));
  --u-28: calc(28rem / var(--ratio));
  --u-32: calc(32rem / var(--ratio));
  --u-40: calc(40rem / var(--ratio));
  --u-48: calc(48rem / var(--ratio));
  --u-72: calc(72rem / var(--ratio));
  --u-104: calc(104rem / var(--ratio));
  --u-136: calc(136rem / var(--ratio));
  --u-176: calc(176rem / var(--ratio));
  --header-h: calc(var(--u-24) * 2 + var(--u-28));

  /* шкала шрифтів (макет 1440): три розміри заголовків — великий / середній / малий — і акцентний для цифр (MOTION §5.2) */
  --fs-l: 76; --fs-m: 56; --fs-s: 32; --fs-display: 112; --fs-about-sub: 44;
  --fs-h1: var(--fs-display); --fs-h2: var(--fs-l); --fs-h3: var(--fs-m); --fs-h4: var(--fs-s); --fs-h5: var(--fs-s); --fs-h6: var(--fs-s);
  --fs-p1: 32; --fs-p2: 24; --fs-p3: 20; --fs-p4: 16; --fs-p5: 12; --fs-p6: 10;
  --fs-hero: calc(var(--fs-l) * 1.3); /* слоган першого екрана — найбільший текст сайту (рішення замовника: «зроби текст більше») */

  --bg: var(--c-dark);
  --fg: var(--c-light);
}
@media (max-width: 991px) {
  :root {
    --ratio: 7.68;
    --fs-l: 52; --fs-m: 44; --fs-s: 26; --fs-display: 84; --fs-about-sub: 36;
    --fs-p1: 24; --fs-p2: 20; --fs-p3: 18; --fs-p4: 16; --fs-p5: 13; --fs-p6: 11;
  }
}
@media (max-width: 599px) {
  :root {
    --ratio: 3.84;
    --fs-l: 28; --fs-m: 24; --fs-s: 18; --fs-display: 48; --fs-about-sub: 24;
    --fs-p1: 20; --fs-p2: 18; --fs-p3: 15; --fs-p4: 14; --fs-p5: 12; --fs-p6: 10;
  }
}

/* ---------- теми: міняють місцями дві фарби ---------- */
.theme-dark, .theme-color, .header[data-theme="dark"], .header[data-theme="color"] { --bg: var(--c-dark); --fg: var(--c-light); }
.theme-light, .header[data-theme="light"] { --bg: var(--c-light); --fg: var(--c-dark); }
.theme-dark, .theme-light, .theme-color, .header {
  --fg-72: color-mix(in srgb, var(--fg) 72%, transparent);
  --fg-50: color-mix(in srgb, var(--fg) 50%, transparent);
  --fg-30: color-mix(in srgb, var(--fg) 30%, transparent);
  --fg-14: color-mix(in srgb, var(--fg) 14%, transparent);
  color: var(--fg);
}
.theme-dark, .theme-light { background: var(--bg); }

/* ---------- база ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 1vw; }
html.is-locked { overflow: hidden; }
body {
  background: var(--c-dark); color: var(--c-light);
  font-family: var(--font); font-size: max(calc(var(--fs-p5) * 1rem / var(--ratio)), 12px);
  line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase;
  -webkit-font-smoothing: antialiased; overflow-x: clip; /* clip, не hidden: hidden робить body окремою прокручуваною областю, коли Lenis/блокування ставить html overflow — sticky-сцени тоді «відклеюються» (MOTION §3) */
}
img, video { display: block; max-width: 100%; }
/* смуга прокрутки праворуч прихована, прокрутка працює (рішення замовника) */
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
[hidden] { display: none !important; } /* атрибут hidden сильніший за display з класів (напр. .form__done) */
a { color: inherit; text-decoration: none; }
/* hover «зміна літер» на текстових кнопках, як [hover=text] у sondaven (MOTION §2) */
.tswap { position: relative; display: inline-block; white-space: nowrap; vertical-align: top; }
.tswap__b { position: absolute; left: 0; top: 0; }
.tswap i { display: inline-block; font-style: normal; transform-origin: 50% 50%; will-change: transform; }
/* тимчасово вимкнені переходи на внутрішні сторінки (сторінки є, посилання не клікаються) */
a[aria-disabled="true"] { pointer-events: none; cursor: default; opacity: 0.4; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
::selection { background: var(--red); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* до сплиту — приховано (MOTION §4) */
[data-reveal], [data-highlight] { visibility: hidden; }

/* ---------- типографіка ---------- */
.h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: -0.03em; }
.h1 { font-size: calc(var(--fs-h1) * 1rem / var(--ratio)); line-height: 0.94; }
.h2 { font-size: calc(var(--fs-h2) * 1rem / var(--ratio)); line-height: 1.02; }
.h3 { font-size: calc(var(--fs-h3) * 1rem / var(--ratio)); line-height: 1.08; }
.h4 { font-size: calc(var(--fs-h4) * 1rem / var(--ratio)); line-height: 1; }
.h5 { font-size: calc(var(--fs-h5) * 1rem / var(--ratio)); line-height: 1; }
.h6 { font-size: calc(var(--fs-h6) * 1rem / var(--ratio)); line-height: 1.1; letter-spacing: -0.02em; }
.p1, .p2, .p3, .p4, .p5, .p6 { font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; }
.p1 { font-size: calc(var(--fs-p1) * 1rem / var(--ratio)); line-height: 1; }
.p2 { font-size: calc(var(--fs-p2) * 1rem / var(--ratio)); line-height: 1.17; }
.p3 { font-size: calc(var(--fs-p3) * 1rem / var(--ratio)); line-height: 1.2; }
.p4 { font-size: max(calc(var(--fs-p4) * 1rem / var(--ratio)), 14px); line-height: 1.5; }
.p5 { font-size: max(calc(var(--fs-p5) * 1rem / var(--ratio)), 12px); line-height: 1.67; }
.p6 { font-size: max(calc(var(--fs-p6) * 1rem / var(--ratio)), 11px); line-height: 1.6; }

/* ---------- компоненти ---------- */

/* підпис колонки футера */
.label--left { display: block; margin-bottom: var(--u-16); color: var(--fg-50); }
.label__dot {
  width: max(var(--u-8), 6px); height: max(var(--u-8), 6px); flex: none; background: var(--red);
}

.hline { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--fg-30); }
.hline--bottom { top: auto; bottom: 0; }

/* кнопка-пігулка: hover — підкладка виходить на 4px і втрачає заокруглення, з'являється обводка */
.btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center;
  height: max(var(--u-40), 38px); padding: 0 var(--u-24); white-space: nowrap;
  font-size: max(calc(var(--fs-p6) * 1rem / var(--ratio)), 10px); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bg);
}
.btn::before, .btn::after {
  content: ''; position: absolute; z-index: -1; inset: 0; border-radius: 999px;
  transition: inset 0.6s cubic-bezier(0.25, 1, 0.5, 1), border-radius 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.btn::before { background: var(--fg); }
.btn::after { inset: calc(var(--u-4) * -1); outline: 2px solid var(--bg); outline-offset: -2px; opacity: 0; }
.btn:hover::before { inset: calc(var(--u-4) * -1); border-radius: 0; }
.btn:hover::after { inset: 0; border-radius: 0; opacity: 1; }
.btn--ghost { color: var(--fg); }
.btn--ghost::before { background: transparent; box-shadow: inset 0 0 0 1px var(--fg-50); }

/* кнопка дії .shiny — перенос ShinyButton на чистий CSS, підсвітка бренд-червона (MOTION §5.2) */
@property --gradient-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gradient-angle-offset { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gradient-percent { syntax: "<percentage>"; initial-value: 5%; inherits: false; }
@property --gradient-shine { syntax: "<color>"; initial-value: white; inherits: false; }

.shiny {
  --shiny-bg: #0e0e0f;
  --shiny-bg-subtle: #2b1418;
  --shiny-fg: #ffffff;
  --shiny-highlight: var(--red);
  --shiny-highlight-subtle: #ff6b86;
  --animation: shiny-angle linear infinite;
  --duration: 3s;
  --shadow-size: 2px;
  --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);

  isolation: isolate; position: relative; overflow: hidden; cursor: pointer; outline-offset: 4px;
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  padding: max(var(--u-12), 11px) max(var(--u-28), 22px);
  font: inherit; font-size: max(calc(var(--fs-p6) * 1rem / var(--ratio)), 10px); font-weight: 500;
  line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: 360px; color: var(--shiny-fg);
  background:
    linear-gradient(var(--shiny-bg), var(--shiny-bg)) padding-box,
    conic-gradient(
      from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
      transparent,
      var(--shiny-highlight) var(--gradient-percent),
      var(--gradient-shine) calc(var(--gradient-percent) * 2),
      var(--shiny-highlight) calc(var(--gradient-percent) * 3),
      transparent calc(var(--gradient-percent) * 4)
    ) border-box;
  box-shadow: inset 0 0 0 1px var(--shiny-bg-subtle);
  transition: var(--transition);
  transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine;
}
.shiny--lg { padding: max(var(--u-16), 14px) max(var(--u-40), 30px); font-size: max(calc(var(--fs-p5) * 1rem / var(--ratio)), 11px); }
.shiny::before, .shiny::after, .shiny > span::before {
  content: ''; pointer-events: none; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; translate: -50% -50%; z-index: -1;
}
.shiny:active { translate: 0 1px; }
/* точковий візерунок прибрано (рішення замовника) */
.shiny::before { display: none; }
/* внутрішній перелив */
.shiny::after {
  --animation: shiny-shimmer linear infinite;
  width: 100%; aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, var(--shiny-highlight), transparent);
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: 0.6;
}
.shiny > span { position: static; } /* світіння span::before рахується від усієї кнопки, а не від тексту */
.shiny > span::before {
  --size: calc(100% + 16px);
  width: var(--size); height: var(--size);
  box-shadow: inset 0 -1ex 32px 4px var(--shiny-highlight);
  opacity: 0; transition: opacity var(--transition);
  animation: calc(var(--duration) * 1.5) shiny-breathe linear infinite;
}
.shiny, .shiny::before, .shiny::after {
  animation: var(--animation) var(--duration), var(--animation) calc(var(--duration) / 0.4) reverse paused;
  animation-composition: add;
}
.shiny:is(:hover, .is-hover, .is-warm, :focus-visible) { --gradient-percent: 20%; --gradient-angle-offset: 95deg; --gradient-shine: var(--shiny-highlight-subtle); }
.shiny:is(:hover, .is-hover, .is-warm, :focus-visible), .shiny:is(:hover, .is-hover, .is-warm, :focus-visible)::before, .shiny:is(:hover, .is-hover, .is-warm, :focus-visible)::after { animation-play-state: running; }
.shiny:is(:hover, .is-hover, .is-warm, :focus-visible) > span::before { opacity: 1; }
@keyframes shiny-angle { to { --gradient-angle: 360deg; } }
@keyframes shiny-shimmer { to { rotate: 360deg; } }
@keyframes shiny-breathe { from, to { scale: 1; } 50% { scale: 1.2; } }
@media (prefers-reduced-motion: reduce) {
  .shiny, .shiny::before, .shiny::after, .shiny > span::before { animation: none; }
}

/* кнопка-стрілка .mbtn — перенос MotionButton на CSS, для кнопок не по центру (MOTION §5.2) */
.mbtn {
  --mbtn-d: max(var(--u-40), 38px);
  --mbtn-t: 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; flex: none;
  padding: 4px; border-radius: 999px; background: var(--bg); cursor: pointer; outline-offset: 4px;
  box-shadow: inset 0 0 0 1px var(--fg-14);
}
/* заливка — великий червоний круг, зменшений до кружка зі стрілкою; на hover росте через transform
   (композитна анімація на відеокарті, без перемальовування — плавно з першого наведення, MOTION §2) */
.mbtn__circle { position: absolute; inset: 4px; z-index: -1; border-radius: 999px; overflow: hidden; }
.mbtn__circle::before {
  content: ''; position: absolute; width: var(--mbtn-c, 1000px); height: var(--mbtn-c, 1000px); border-radius: 50%; background: var(--red);
  left: calc(var(--mbtn-d) / 2 - var(--mbtn-c, 1000px) / 2); top: calc(50% - var(--mbtn-c, 1000px) / 2);
  transform: scale(var(--mbtn-s0, 0.04)); transition: transform var(--mbtn-t); will-change: transform;
}
.mbtn__icon {
  position: absolute; left: calc(4px + var(--mbtn-d) / 2 - 10px); top: 50%; width: 20px; height: 20px; margin-top: -10px;
  color: #fff; transition: transform var(--mbtn-t);
}
.mbtn__text {
  display: block; height: var(--mbtn-d); line-height: var(--mbtn-d);
  padding: 0 var(--u-24) 0 calc(var(--mbtn-d) + var(--u-16));
  font-size: max(calc(var(--fs-p6) * 1rem / var(--ratio)), 10px); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap; color: var(--fg); transition: color var(--mbtn-t);
}
.mbtn:is(:hover, .is-hover, .is-warm, :focus-visible) .mbtn__circle::before { transform: scale(1); }
.mbtn:is(:hover, .is-hover, .is-warm, :focus-visible) .mbtn__icon { transform: translateX(6px); }
.mbtn:is(:hover, .is-hover, .is-warm, :focus-visible) .mbtn__text { color: #fff; }
.mbtn:active { translate: 0 1px; }
/* «прогрів» при завантаженні: кнопка один кадр у стані наведення без переходів — перше справжнє наведення без лагу (MOTION §2) */
.is-warm, .is-warm *, .is-warm::before, .is-warm::after, .is-warm *::before { transition: none !important; }
.is-cool, .is-cool *, .is-cool::before, .is-cool::after, .is-cool *::before { transition: none !important; }

/* кнопка-іконка: hover — заливка scale 0 → 1 */
.btn-ico {
  position: relative; isolation: isolate; display: inline-grid; place-items: center; flex: none;
  width: max(var(--u-40), 38px); height: max(var(--u-40), 38px); border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--fg); color: var(--fg); font-style: normal; font-size: 14px; letter-spacing: 0;
  transition: color 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.btn-ico::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--fg);
  transform: scale(0); transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.btn-ico:hover, [data-open]:hover > .btn-ico { color: var(--bg); }
.btn-ico:hover::before, [data-open]:hover > .btn-ico::before { transform: scale(1); }

/* ---------- прийоми завантаження hero по сайту (MOTION §5, §5.3) ---------- */
main { position: relative; z-index: 1; background: var(--c-dark); }

/* наїзд секцій */
.stack { position: sticky; top: var(--stack-top, 0px); z-index: 1; will-change: transform; }
.stack::after {
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: var(--c-dark); opacity: var(--stack-dim, 0);
}
.stack-over { position: relative; z-index: 2; }
/* секція, що і наїжджає, і сама йде під наступну, лишається липкою */
.stack.stack-over, .hero.stack { position: sticky; }

/* футер виїжджає з-під сторінки */
.footer { position: relative; }

/* «включення світла» */
.lights-dim { position: absolute; inset: 0; z-index: 1; background: var(--c-dark); pointer-events: none; }

/* ---------- шторка ---------- */
.curtain { position: fixed; inset: 0; z-index: 100; display: flex; pointer-events: auto; }
.curtain span { flex: 1; background: var(--c-dark); margin-right: -1px; }

/* ---------- шапка: фарбується під секцію під нею ---------- */
/* на головній шапку показує тільки інтро hero — до нього її не видно з першого кадру (MOTION §5.1) */
[data-page="home"] .header { opacity: 0; visibility: hidden; }
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--u-32);
  padding: 0 var(--u-16); background: transparent;
  transition: color 0.4s;
}
/* фон шапки завжди прозорий — лише колір тексту йде за темою секції (MOTION §5.2) */
.header__logo { justify-self: center; display: block; line-height: 0; }
.logo { height: max(calc(38rem / var(--ratio)), 30px); width: auto; display: block; }
.logo-ball { fill: #fff; }
.header__nav { display: flex; align-items: center; gap: var(--u-32); }
.header__nav, .header .lang, .header .mbtn__text { font-weight: 600; } /* шрифт шапки товщий (рішення замовника) */
.header__nav a { position: relative; color: var(--fg-72); transition: color 0.4s; }
.header__nav a:hover, .header__nav a.is-active { color: var(--fg); }
.header__drop { position: relative; }
.header__sub {
  position: absolute; top: 100%; left: calc(var(--u-16) * -1); padding-top: var(--u-16); min-width: calc(220rem / var(--ratio));
  display: grid; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.4s, transform 0.4s, visibility 0.4s;
}
.header__sub a { display: block; padding: var(--u-12) var(--u-16); background: var(--bg); color: var(--fg-72); }
.header__sub a + a { box-shadow: inset 0 1px 0 var(--fg-14); }
.header__drop:hover .header__sub, .header__drop:focus-within .header__sub { opacity: 1; visibility: visible; transform: none; }
.header__right { display: flex; align-items: center; justify-content: flex-end; gap: var(--u-32); }

.lang { display: flex; align-items: center; gap: var(--u-8); color: var(--fg-50); }
.lang button { color: var(--fg-50); padding: 4px 2px; transition: color 0.4s; }
.lang button.is-active, .lang button:hover { color: var(--fg); }

.burger { display: none; width: 44px; height: 44px; position: relative; }
.burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--fg); transition: transform 0.4s; }
.burger span:first-child { top: 18px; }
.burger span:last-child { top: 25px; }
.burger.is-open span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger.is-open span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 35; visibility: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--header-h) + var(--u-48)) var(--u-16) var(--u-32);
}
.menu__nav { display: grid; gap: var(--u-8); }
.menu__nav a { font-family: var(--font-display); font-size: calc(var(--fs-m) * 1rem / var(--ratio)); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; }
.menu__nav a.menu__sub {
  font-size: max(calc(var(--fs-p4) * 1rem / var(--ratio)), 13px); font-weight: 400; letter-spacing: 0.08em; line-height: 1.6;
  color: var(--fg-50); padding-left: var(--u-16);
}
.menu__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--u-16); }

/* ---------- hero: видео-скраб (MOTION §5.1) ---------- */
.hero { position: relative; height: 360vh; background: var(--c-dark); }
.hero__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero__card { position: absolute; inset: 0; overflow: hidden; background: var(--c-dark); transform-origin: 50% 50%; will-change: transform; }
.hero__zoom { position: absolute; inset: 0; will-change: transform; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.74) 0%, rgba(10, 10, 10, 0.42) 32%, rgba(10, 10, 10, 0.4) 62%, rgba(10, 10, 10, 0.8) 100%);
}
.hero__grain {
  position: absolute; top: -10%; left: -10%; width: 120%; height: 120%; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(4) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(-1%, -1%); }
}
/* розчинення комірками hero → «Про агенцію» (MOTION §5.1): смуга над верхнім краєм розділу */
.dissolve {
  --cols: 20; --rows: 6;
  position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); pointer-events: none;
  display: grid; grid-template-columns: repeat(var(--cols), 1fr); overflow: hidden;
  height: calc(100vw / var(--cols) * var(--rows));
}
.dissolve__cell { background: var(--c-light); transform: scaleX(0); transform-origin: 0 50%; margin: 0 -0.5px; }
@media (max-width: 599px) { .dissolve { --cols: 8; --rows: 5; } }
/* те саме між іншими секціями — варіанти diagonal / radial / blinds / scatter (MOTION §5.3) */
.tband {
  --cols: 20; --rows: 6;
  position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); z-index: 10; pointer-events: none;
  display: grid; grid-template-columns: repeat(var(--cols), 1fr); height: calc(100vw / var(--cols) * var(--rows));
}
.tband i { background: var(--bg); transform: scale(0); margin: -0.5px; }

.hero__brand {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  justify-content: flex-start; /* слоган нижче шапки, над сценою: логотип у кадрі лишається відкритим (кнопки на першому екрані немає — рішення замовника) */
  gap: var(--u-24); padding: clamp(104px, 21vh, 240px) var(--u-16) 0; text-align: center; color: var(--c-light);
  transform-origin: 50% 62%; will-change: transform; /* центр — сцена у відео (≈62% висоти кадру) */
}
/* слоган на весь екран — дисплейний шрифт як у заголовків секцій */
.hero__title {
  font-family: var(--font-display); font-size: calc(var(--fs-hero) * 1rem / var(--ratio)); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em;
  text-transform: uppercase; text-wrap: balance; max-width: 13em; /* рівно два рядки: «Ми можемо все / і навіть більше» */
}
.hero__scroll { position: absolute; left: 50%; bottom: var(--u-32); transform: translateX(-50%); color: rgba(232, 228, 221, 0.6); }

/* ---------- секції: загальний ритм ---------- */
.about, .gallery, .formats, .why, .partners { padding: var(--u-136) var(--u-16); }

/* ---------- про агенцію: розкладка як about у sondaven (MOTION §5.3.1) ---------- */
.about__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--u-32); }
.about__top > * { grid-column: 7 / 13; margin: 0; }
.about .h4 { font-size: calc(var(--fs-about-sub) * 1rem / var(--ratio)); } /* «Про нас» / «Наш підхід» — исключение из трёх размеров (решение заказчика) */
.about__num { color: var(--red); font-variant-numeric: tabular-nums; margin-left: calc(var(--u-8) * -1); font-size: calc(var(--fs-display) * 1.6rem / var(--ratio)); line-height: 0.8; }
.about__cap { display: flex; align-items: center; gap: var(--u-12); margin-top: var(--u-32) !important; margin-left: calc(var(--u-8) * 1.25); } /* край букв = край «2» (у «2» більший лівий відступ гліфа) */
.about__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--u-32);
  margin-top: var(--u-104); align-items: start;
}
.about__block { display: flex; flex-direction: column; align-items: flex-start; will-change: transform; }
.about__block--a { grid-column: 4 / 7; }
.about__block--b { grid-column: 7 / 10; margin-top: var(--u-136); }
.about__block .h4 { margin: 0 0 var(--u-24); }
.about__block .p5 { color: var(--fg-72); margin: 0; }
.about__block .p5 + .p5 { margin-top: var(--u-16); }
.about__block .mbtn { margin-top: var(--u-32); }


/* «Наші події» — галерея зі шторкою смугами (MOTION §5.4) */
/* ---------- «Наші події»: заголовок зверху, далі три колонки з різною швидкістю (MOTION §5.4) ---------- */
.gallery { position: relative; padding: var(--u-104) 0 var(--u-72); overflow: clip; }
.gal__head { position: relative; z-index: 2; padding: 0 var(--u-16); margin-bottom: var(--u-40); text-align: center; }
.gal__heading { margin: 0; }
.gal__cols { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--u-12); padding: 0 var(--u-16); align-items: start; }
.gal__col { display: flex; flex-direction: column; gap: var(--u-12); will-change: transform; }
.gal__col:nth-child(2) { margin-top: var(--u-72); }
.gal__col:nth-child(3) { margin-top: var(--u-24); }
.gal__fig { position: relative; display: block; }
.gal__ph { position: relative; overflow: hidden; aspect-ratio: 10 / 7; background: var(--fg-14); }
.gal__fig--p .gal__ph { aspect-ratio: 4 / 5; }
.gal__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; transition: scale 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
.gal__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top left, rgba(14, 14, 15, 0.5), rgba(14, 14, 15, 0) 28%); pointer-events: none; } /* мʼяка підкладка під рік у куті */
.gal__year { position: absolute; right: var(--u-12); bottom: var(--u-8); z-index: 1; color: var(--c-light); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; pointer-events: none; }
@media (hover: hover) { .gal__fig:hover .gal__ph img { scale: 1.04; } }
@media (max-width: 991px) { .gal__cols { gap: var(--u-8); } .gal__col { gap: var(--u-8); } }
@media (max-width: 599px) {
  .gal__cols { grid-template-columns: 1fr; gap: var(--u-12); }
  .gal__col, .gal__col:nth-child(n) { display: contents; margin-top: 0; }
  .gal__fig:nth-child(n+5) { display: none; } /* на телефоні — по 4 кадри з колонки, інакше надто довга сторінка */
}
/* ---------- формати ---------- */
.formats { margin-bottom: 40vh; margin-bottom: 40svh; } /* пауза: секція лишається закріпленою, поки наступна не наїхала — встигаєш дивитися фото до 10-го пункту (MOTION §5.3) */
.formats__title { max-width: calc(1360rem / var(--ratio)); text-wrap: balance; margin: 0 auto var(--u-104); text-align: center; } /* середній розмір, як «Наші події» (MOTION §5.4.1) */
.formats__list { list-style: none; margin: 0 auto; padding: 0; max-width: calc(1100rem / var(--ratio)); } /* лінії списку — компактно, по центру, тієї ж ширини, що й у «Чому ми» (MOTION §5.4.1) */
.formats__item {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--u-32);
  align-items: baseline; padding: var(--u-24) 0; cursor: default;
}
.formats__name { grid-column: 2 / 13; grid-row: 1; font-weight: 400; /* список легше за заголовок секції (MOTION §5.2) */ transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), color 0.4s; }
.formats__idx { grid-column: 1 / 2; grid-row: 1; color: var(--fg-50); font-variant-numeric: tabular-nums; transition: color 0.4s; }
@media (hover: hover) {
  .formats__item:hover .formats__name { transform: translateX(var(--u-32)); }
  .formats__item:hover .formats__idx { color: var(--red); }
}

/* «Формати»: вікно з фото біля курсора (MOTION §5.4.1) */
.fpreview {
  position: fixed; top: 0; left: 0; z-index: 40; pointer-events: none;
  width: calc(360rem / var(--ratio)); aspect-ratio: 4 / 3; overflow: hidden;
  visibility: hidden; clip-path: inset(50% 50% 50% 50%); will-change: transform, clip-path;
}
.fpreview__strip { position: relative; width: 100%; height: 100%; }
.fpreview__strip { overflow: hidden; }
.fpreview__strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; will-change: transform; }
.fpreview__strip img.is-active { opacity: 1; }
@media not ((hover: hover) and (pointer: fine)) { .fpreview { display: none; } }

/* ---------- напрямки ---------- */
.dirs {
  position: relative; height: 300vh; /* точна висота — з JS */
  --dir-h: min(72svh, calc(640rem / var(--ratio))); --dir-w: calc(var(--dir-h) * 0.82);
}
.dirs__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.dirs__head {
  position: absolute; inset: 0; padding: 0 var(--u-16);
  display: grid; place-items: center; text-align: center; pointer-events: none;
}
.dirs__title { margin: 0; max-width: 14ch; }
.dirs__title { position: relative; z-index: 2; }
.dirs__head { z-index: 0; } /* заголовок і лампа — під картками */
.dirs__track { z-index: 1; }
/* «Лампа» над заголовком — перенос Lamp на CSS (MOTION §5.4.2). Центр лампи = центр екрана; смуга на −140 px */
.lamp {
  --lamp-bg: var(--c-dark); --lamp-w: 650px; --lamp-k: 1;
  position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 1; pointer-events: none;
  transform: translateY(calc(-30px * var(--lamp-k))) scale(var(--lamp-k), calc(var(--lamp-k) * 1.25));
}
.lamp > span { position: absolute; display: block; }
.lamp__cone { top: -112px; width: var(--lamp-w); height: 224px; opacity: 1; }
.lamp__cone--l {
  right: 0; background: conic-gradient(from 70deg at 50% 0%, var(--red), transparent, transparent);
  -webkit-mask-image: linear-gradient(to top, transparent, #000 72%), linear-gradient(to right, transparent, #000 34%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to top, transparent, #000 72%), linear-gradient(to right, transparent, #000 34%); mask-composite: intersect;
}
.lamp__cone--r {
  left: 0; background: conic-gradient(from 290deg at 50% 0%, transparent, transparent, var(--red));
  -webkit-mask-image: linear-gradient(to top, transparent, #000 72%), linear-gradient(to left, transparent, #000 34%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to top, transparent, #000 72%), linear-gradient(to left, transparent, #000 34%); mask-composite: intersect;
}
.lamp__shade { left: -450px; width: 900px; top: 48px; height: 192px; background: var(--lamp-bg); filter: blur(40px); transform: scaleX(1.5); }
.lamp__glow { left: -300px; width: 600px; top: -72px; height: 144px; border-radius: 50%; background: var(--red); opacity: 0.5; filter: blur(64px); transform: translateY(-50%); }
.lamp__spot { left: 50%; width: 256px; top: -168px; height: 144px; border-radius: 50%; background: #ff3a5c; filter: blur(40px); transform: translateX(-50%); opacity: 0.7; }
.lamp__bar { left: 50%; width: var(--lamp-w); top: -113px; height: 2px; background: #ff3a5c; transform: translateX(-50%); box-shadow: 0 0 12px 1px rgba(222, 0, 44, 0.8); }
.lamp__cap { left: -150vw; width: 300vw; top: -412px; height: 298px; background: var(--lamp-bg); } /* вище смуги — темно: лампа світить лише вниз */
@media (max-width: 599px) { .lamp { --lamp-k: 0.6; } }
.dirs__track {
  position: absolute; left: 0; top: 50%; margin-top: calc(var(--dir-h) / -2);
  display: flex; gap: var(--u-24); will-change: transform;
}
.dir__item { flex: none; width: var(--dir-w); height: var(--dir-h); will-change: transform; }
.dir {
  position: relative; overflow: hidden; isolation: isolate; height: 100%;
  display: flex; flex-direction: column; min-height: 0;
  padding: var(--u-16); background: var(--fg-14);
}
.dir__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.dir__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.8s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform; }
/* наїзд камери на картці (MOTION §5.4.2): фото «виходить із темряви», поки картка їде до центру */
.dir__media::after { content: ""; position: absolute; inset: 0; background: var(--c-dark); opacity: var(--dir-dim, 0); pointer-events: none; }
.dir__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(14, 14, 15, 0.92) 15%, rgba(14, 14, 15, 0.35) 60%, rgba(14, 14, 15, 0.15));
}
.dir__num { color: var(--fg-72); }
.dir__title { margin-top: auto; max-width: 10ch; }
.dir__text { margin-top: var(--u-16); color: var(--fg-72); max-width: 34ch; }
.dir__more {
  display: flex; align-items: center; justify-content: space-between; gap: var(--u-16);
  margin-top: var(--u-24); padding-top: var(--u-16); box-shadow: inset 0 1px 0 var(--fg-30); text-align: left;
}
/* Перелік послуг на самій картці (MOTION §5.4.2) */
.dir__info {
  position: absolute; inset: 0 0 var(--dir-foot, 96px) 0; z-index: 1;
  padding: var(--u-16); background: var(--c-dark); overflow-y: auto; overscroll-behavior: contain;
  clip-path: inset(100% 0% 0% 0%); visibility: hidden;
}
.dir__list { margin: 0; padding: 0; list-style: none; counter-reset: li; }
.dir__list li { counter-increment: li; position: relative; padding: var(--u-12) 0 var(--u-12) var(--u-48); box-shadow: inset 0 -1px 0 var(--fg-14); color: var(--fg); }
.dir__list li::before { content: counter(li, decimal-leading-zero); position: absolute; left: 0; top: var(--u-12); color: var(--red); font-variant-numeric: tabular-nums; }
.dir__more { position: relative; z-index: 2; }
.dir__more .btn-ico span { display: inline-block; transition: rotate 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.dir.is-open .dir__more .btn-ico span { rotate: 45deg; }
@media (hover: hover) { .dir:hover .dir__media img { scale: 1.05; } }

/* ---------- партнери: сітка логотипів, що злітаються по скролу (MOTION §5.4.4) ---------- */
.partners { height: 195vh; padding: 0; overflow-x: clip; }
.partners__sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; flex-direction: column; justify-content: center; gap: var(--u-28);
  padding: var(--u-104) var(--u-16) var(--u-48);
}
.partners__title { margin: 0; text-align: center; }
.pgrid {
  list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: calc(1240rem / var(--ratio));
  display: grid; grid-template-columns: repeat(7, 1fr);
}
.pgrid__cell { display: grid; place-items: center; height: calc(136rem / var(--ratio)); min-height: 64px; }
.pgrid__logo { position: relative; display: block; width: 100%; height: 100%; will-change: transform, opacity; }
.pgrid__logo img {
  position: absolute; inset: 0; margin: auto; width: 84%; height: 66%; object-fit: contain;
  opacity: 1; /* логотипи — кольорові, як в оригіналі (рішення замовника) */
}
@media (hover: hover) { .pgrid__cell:hover img { opacity: 1; } }
@media (max-width: 599px) {
  .partners { height: 175vh; }
  .partners__sticky { gap: 40px; padding-top: calc(88px + 2vh); }
  .pgrid { grid-template-columns: repeat(5, 1fr); }
  .pgrid__cell { height: 70px; min-height: 0; }
  .pgrid__logo img { width: 88%; height: 70%; }
}

/* ---------- переваги ---------- */
/* «Чому ми» — як FAQ у sondaven (MOTION §5.4.3) */
.why__hero {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--u-32); align-items: end;
  margin: 0 auto var(--u-136); max-width: calc(1100rem / var(--ratio)); /* та сама ширина, що й список нижче: «Чому» стоїть над початком ліній, «TOLERAN» закінчується на їхньому краї (MOTION §5.4.3) */
}
.why__big { margin: 0; font-size: min(calc(var(--fs-display) * 1.3rem / var(--ratio)), 13.5vw); line-height: 0.9; letter-spacing: 0; font-weight: 500; text-transform: uppercase; font-family: var(--font-display); }
.why__big--a { grid-column: 1 / 7; grid-row: 1; white-space: nowrap; margin-left: -0.05em; } /* оптичне вирівнювання лівого краю літери */
.why__cap { grid-column: 8 / 11; grid-row: 1; margin: 0 0 0.6em; color: var(--fg-72); max-width: 18ch; }
.why { --why-num: calc(96rem / var(--ratio)); }
@media (max-width: 599px) { .why { --why-num: 32px; } }
.why__big--b { grid-column: 1 / 13; grid-row: 2; justify-self: end; white-space: nowrap; margin-top: var(--u-24); margin-right: -0.04em; }
.why__list { list-style: none; margin: 0 auto; padding: 0; max-width: calc(1100rem / var(--ratio)); }
.why__row { position: relative; }
.why__head {
  display: grid; grid-template-columns: var(--why-num) 1fr auto; align-items: center; gap: var(--u-24);
  width: 100%; padding: var(--u-24) 0; text-align: left; color: var(--fg); cursor: pointer;
}
.why__num { color: var(--fg-50); font-variant-numeric: tabular-nums; transition: color 0.4s; }
.why__name { font-weight: 400; transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
.why__head .btn-ico span { display: inline-block; transition: rotate 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.why__row.is-open .why__head .btn-ico span { rotate: 45deg; }
.why__row.is-open .why__num { color: var(--red); }
@media (hover: hover) {
  .why__head:hover .why__name { transform: translateX(var(--u-16)); }
  .why__head:hover .why__num { color: var(--red); }
  .why__head:hover .btn-ico { color: var(--bg); }
  .why__head:hover .btn-ico::before { transform: scale(1); }
}
.why__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
.why__row.is-open .why__body { grid-template-rows: 1fr; }
.why__inner { overflow: hidden; min-height: 0; }
.why__inner p {
  margin: 0; padding: 0 0 var(--u-32) calc(var(--why-num) + var(--u-24)); color: var(--fg-72); max-width: calc(56ch + var(--why-num));
  opacity: 0; transform: translateY(12px); transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.why__row.is-open .why__inner p { opacity: 1; transform: none; }

/* ---------- CTA ---------- */
.cta {
  position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; background: var(--c-dark); /* сплошной фон: прилиплі секції вище не просвічують */
  padding: var(--u-136) var(--u-16); display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--u-72); color: var(--c-light);
}
.cta__title { max-width: 12ch; }
.cta__bg { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.cta__bg img { width: 100%; height: 116%; margin-top: -8%; object-fit: cover; }
.cta__dim { position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at 50% 50%, rgba(14, 14, 15, 0.22), rgba(14, 14, 15, 0.45) 80%); } /* затемнення фото слабше (було 0.45 / 0.7) — рішення замовника */
/* кругла кнопка дії: той самий ефект .shiny, форма — коло */
.shiny.magnet {
  width: max(var(--u-176), 150px); height: max(var(--u-176), 150px); padding: 0; border-radius: 50%;
}
.magnet__label { display: block; font-weight: inherit; } /* «магніт» зсуває лише текст; span лишається статичним — світіння рахується від кнопки */

/* ---------- футер ---------- */
.footer { padding: var(--u-104) var(--u-16) var(--u-24); overflow: hidden;
  /* последний экран — на всю высоту окна: контакты сверху, логотип прижат к низу */
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.footer__top { margin-bottom: var(--u-104); }
.footer__slogan { max-width: 14ch; }
.footer__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--u-48) var(--u-32);
  padding-top: var(--u-24); box-shadow: inset 0 1px 0 var(--fg-30);
}
.footer__grid > div { display: grid; align-content: start; gap: var(--u-8); }
.footer__grid a { width: fit-content; transition: color 0.4s; }
.footer__grid a:hover { color: var(--red); }
.footer__mark-link { display: block; margin-top: auto; padding-top: var(--u-104); }
.footer__mark { display: block; width: 100%; height: auto; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; margin-top: var(--u-24); color: var(--fg-50); }

/* ---------- панелі ---------- */
.panel { position: fixed; inset: 0; z-index: 60; visibility: hidden; background: transparent; }
.panel.is-open { visibility: visible; }
.panel__overlay { position: absolute; inset: 0; background: rgba(14, 14, 15, 0.6); }
.panel__body {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(calc(640rem / var(--ratio)), 100vw);
  background: var(--bg); color: var(--fg); overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(56px, 11vh, var(--u-104)) var(--u-48) clamp(20px, 4vh, var(--u-48));
  display: flex; flex-direction: column; align-items: flex-start; gap: clamp(8px, 2vh, var(--u-24));
}
.panel__close {
  position: absolute; top: var(--u-24); right: var(--u-24);
  display: grid; place-items: center; width: max(var(--u-40), 38px); height: max(var(--u-40), 38px); border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--fg); font-size: 13px; letter-spacing: 0;
  transition: background 0.6s cubic-bezier(0.25, 1, 0.5, 1), color 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.panel__close:hover { background: var(--fg); color: var(--bg); }
.panel__num { color: var(--red); }
.panel__intro { color: var(--fg-72); }
.panel__list { align-self: stretch; margin: var(--u-8) 0 var(--u-16); counter-reset: li; box-shadow: inset 0 1px 0 var(--fg-30); }
.panel__list li { counter-increment: li; position: relative; padding: var(--u-16) 0 var(--u-16) var(--u-48); box-shadow: inset 0 -1px 0 var(--fg-30); }
.panel__list li::before {
  content: counter(li, decimal-leading-zero); position: absolute; left: 0; top: calc(var(--u-16) + 3px);
  font-size: max(calc(var(--fs-p6) * 1rem / var(--ratio)), 10px); color: var(--fg-50); font-variant-numeric: tabular-nums;
}

/* форма вміщається в один екран: проміжки залежать від висоти вікна, поле опису забирає залишок (MOTION §5.2) */
.form { align-self: stretch; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: clamp(10px, 2.2vh, var(--u-24)); margin-top: 0; }
.field--grow { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.field--grow textarea { flex: 1; min-height: 2.8em; }
.field { display: grid; gap: clamp(2px, 0.6vh, var(--u-8)); color: var(--fg-50); }
.field input, .field select, .field textarea {
  font: inherit; font-size: max(calc(var(--fs-p4) * 1rem / var(--ratio)), 15px); letter-spacing: 0.02em; text-transform: none;
  color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--fg-30); padding: var(--u-8) 0; border-radius: 0;
  transition: border-color 0.4s;
}
.field select { appearance: none; }
.field option { background: var(--c-light); color: var(--c-dark); }
.field textarea { resize: none; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--fg); }
.field [aria-invalid] { border-color: var(--red); }
.form .mbtn { align-self: flex-start; flex: none; margin-top: clamp(0px, 0.8vh, var(--u-8)); }
.form__error { color: var(--red); }
.form__done { display: grid; gap: var(--u-16); }

/* ---------- внутрішні сторінки ---------- */
.page-hero { position: relative; padding: calc(var(--header-h) + var(--u-136)) var(--u-16) var(--u-104); text-align: center; }
.page-hero__title { max-width: 14ch; margin: 0 auto; }
.page-hero__lead { margin: var(--u-48) auto 0; max-width: 46ch; color: var(--fg-72); }
.page-section { padding: var(--u-136) var(--u-16); }
.page-section > .h2 { text-align: center; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--u-32); margin-top: var(--u-72); }
.stat { position: relative; padding-top: var(--u-24); text-align: center; }
.stat__num { display: block; margin-bottom: var(--u-24); }
.stat__num--red { color: var(--red); }
.stat__cap { color: var(--fg-72); }
.portfolio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--u-16); margin-top: var(--u-72); }
.gallery__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--fg-14); }
.gallery__img img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
@media (hover: hover) { .portfolio .gallery__img:hover img { scale: 1.05; } }
.portfolio .gallery__img { aspect-ratio: 4 / 3; }
.rent-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--u-16); }
.rent-card {
  position: relative; padding: var(--u-24) var(--u-16); min-height: calc(320rem / var(--ratio)); background: var(--fg-14);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--u-24);
}
.rent-card p { color: var(--fg-72); }
.soon { margin: var(--u-72) auto 0; max-width: 52ch; color: var(--fg-72); text-align: center; }
.page-cta { display: flex; justify-content: center; margin-top: var(--u-32); }

/* ---------- адаптив ---------- */
@media (max-width: 1199px) {
  .header__nav { gap: var(--u-24); }
  .header__cta { display: none; }
}

@media (max-width: 991px) {
  .header { grid-template-columns: 1fr auto; }
  .header__nav, .header__right > .lang { display: none; }
  .header__logo { justify-self: start; }
  .burger { display: block; }

  .about__top > *, .about__block--a, .about__block--b { grid-column: 1 / 13; }
  .about__block--b { margin-top: var(--u-72); }
  .dirs { --dir-h: min(64svh, 100vw); }
  .why__big--a, .why__cap, .why__big--b { grid-column: 1 / 13; }
  .why__cap { grid-row: 2; margin: var(--u-16) 0 0; }
  .why__big--b { grid-row: 3; }
  .footer__grid, .stats { grid-template-columns: 1fr 1fr; }
  .portfolio, .rent-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 599px) {
  .hero { height: 280vh; }
  .portfolio, .rent-grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: var(--u-16); align-items: flex-start; }
  .panel__body { padding: clamp(56px, 11vh, var(--u-104)) var(--u-16) clamp(20px, 4vh, var(--u-48)); }
}