/* ═══════════════════════════════════════════════════════════
   T&K Performance — темна тема, BMW M як акцент
   ═══════════════════════════════════════════════════════════ */

:root{
  /* тло і поверхні */
  --bg:        #08080a;
  --bg-alt:    #0d0d10;
  --surface:   #131317;
  --surface-2: #17171c;
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.16);

  /* текст */
  --txt:   #f4f5f7;
  --txt-2: #a3a6ae;
  --txt-3: #7f838d;

  /* BMW M */
  --m-lblue: #6cb2e4;
  --m-blue:  #0c63b0;
  --m-red:   #e4002b;   /* кнопки і плашки — білий на ньому 4.85:1 */
  --red-txt: #ff3355;   /* дрібний текст на темному — 5.17:1 */
  --red-hi:  #ff1f45;

  /* Бордовий — лише для блоку Stage-тюнінгу. Свідомо НЕ з палітри
     BMW M: саме тому блок і читається як окремий, преміальний.
     --burg-tx освітлений під дрібний текст на темному — 7.1:1. */
  --burg:    #7b1f30;
  --burg-hi: #a63349;
  --burg-tx: #e8879a;

  /* сітка */
  --wrap: 1220px;
  --pad: clamp(20px, 5vw, 48px);
  --sec-y: clamp(72px, 11vw, 148px);

  --r: 14px;
  --ease: cubic-bezier(.22,.7,.2,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:"Archivo","Manrope","Helvetica Neue",Arial,sans-serif;
  font-size:16.5px;
  line-height:1.62;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block }
a{ color:inherit }
h1,h2,h3{ margin:0; line-height:1.03; letter-spacing:-.02em }
p{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }

::selection{ background:var(--m-red); color:#fff }

:focus-visible{
  outline:2px solid var(--m-lblue);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--m-red); color:#fff; padding:12px 20px; font-weight:600;
}
.skip:focus{ left:0 }

/* ── смуга BMW M ─────────────────────────────────────────── */
.mstripe{ display:inline-flex; height:9px; width:52px }
.mstripe i{ flex:1; transform:skewX(-22deg) }
.mstripe i:nth-child(1){ background:var(--m-lblue) }
.mstripe i:nth-child(2){ background:var(--m-blue) }
.mstripe i:nth-child(3){ background:var(--m-red) }
.mstripe--wide{ display:flex; width:100%; height:4px }
.mstripe--wide i{ transform:none }

/* ═══ ШАПКА ═══════════════════════════════════════════════ */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(8,8,10,.72);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.hdr.is-stuck{ border-bottom-color:var(--line); background:rgba(8,8,10,.92) }

.hdr__in{
  display:flex; align-items:center; gap:28px;
  min-height:72px;
}
.hdr__logo img{ height:34px; width:auto }
.hdr__logo{ flex:none; line-height:0 }

.nav{
  display:flex; align-items:center; gap:26px;
  margin-left:auto;
  font-size:14.5px; font-weight:500;
}
.nav a{
  text-decoration:none; color:var(--txt-2);
  transition:color .2s; white-space:nowrap;
}
.nav__cta{ display:none }

.hdr__side{ display:flex; align-items:center; gap:14px; flex:none }

/* Перемикач мов. Чотири кнопки в ряд у шапку не влазять:
   на 375px логотип, мова, телефон і бургер уже стоять впритул.
   Тому в шапці лише пігулка з поточною мовою, а вибір випадає. */
.lang{ position:relative; flex:none }

.lang__btn{
  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:1px solid var(--line); border-radius:99px;
  color:var(--txt-3); font:600 12px/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.06em; padding:9px 11px 9px 13px;
  transition:color .2s, border-color .2s, background .2s;
}
.lang__btn[aria-expanded="true"]{
  color:var(--txt); border-color:var(--line-2); background:var(--surface-2);
}
.lang__chev{
  width:11px; height:11px; flex:none;
  fill:none; stroke:currentColor; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .24s var(--ease);
}
.lang__btn[aria-expanded="true"] .lang__chev{ transform:rotate(180deg) }

.lang__menu{
  position:absolute; top:calc(100% + 10px); right:0; z-index:5;
  min-width:186px; padding:6px;
  display:flex; flex-direction:column; gap:2px;
  background:var(--bg); border:1px solid var(--line-2); border-radius:14px;
  box-shadow:0 24px 48px -14px rgba(0,0,0,.85);

  /* Видимість гасимо visibility, а не display:none — інакше не
     буде переходу. visibility:hidden так само ховає список від
     зчитувачів екрана і від Tab.

     🔴 ПАСТКА, спіймана перевіркою. Якщо написати просто
     `visibility .2s`, браузер перемикає її не одразу, а десь
     посередині переходу. Усі 200 мс список лишається hidden —
     і focus() на пункт меню мовчки не спрацьовує, бо на
     невидимий елемент фокус не стає. Стрілка ↓ відкривала
     список, але фокус лишався на пігулці.

     Тому visibility не плавна, а миттєва (0s), і лише при
     ЗАКРИТТІ відкладена на .2s — щоб список встиг згаснути,
     перш ніж зникнути. Плавно їдуть тільки opacity і transform. */
  transform-origin:top right;
  transform:translateY(-6px) scale(.98); opacity:0;
  pointer-events:none; visibility:hidden;
  transition:opacity .2s var(--ease), transform .2s var(--ease),
             visibility 0s linear .2s;
}
.lang__menu.is-open{
  transform:none; opacity:1; pointer-events:auto; visibility:visible;
  transition:opacity .2s var(--ease), transform .2s var(--ease),
             visibility 0s linear 0s;
}
.lang__menu button{
  appearance:none; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; gap:11px; width:100%;
  padding:10px 12px; border-radius:9px; text-align:left;
  color:var(--txt-2); font-size:14.5px; font-weight:500;
  transition:color .18s, background .18s;
}
.lang__menu button i{
  font:600 11px/1 "JetBrains Mono",ui-monospace,monospace;
  font-style:normal; letter-spacing:.08em;
  color:var(--txt-3); min-width:21px;
  transition:color .18s;
}
.lang__menu button.is-on{ color:var(--txt); background:rgba(255,255,255,.06) }
/* --m-red на темному дає лише 3.70:1 — не проходить WCAG AA
   для 11px. --red-txt це той самий акцент, але освітлений
   саме під дрібний текст на темному: 5.27:1. */
.lang__menu button.is-on i{ color:var(--red-txt) }

.hdr__tel{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; font-weight:600; font-size:14.5px;
  padding:9px 16px; border-radius:99px;
  border:1px solid var(--line-2);
  transition:border-color .2s, background .2s;
  white-space:nowrap;
}
.hdr__tel svg{ width:15px; height:15px; fill:var(--m-red); flex:none }

.burger{
  display:none; width:40px; height:40px; padding:0;
  background:none; border:1px solid var(--line); border-radius:10px;
  cursor:pointer; position:relative;
}
.burger span{
  position:absolute; left:11px; width:18px; height:1.5px; background:var(--txt);
  transition:transform .28s var(--ease), opacity .2s;
}
.burger span:nth-child(1){ top:15px }
.burger span:nth-child(2){ top:22px }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg) }

/* затемнення сторінки під відкритим меню */
.veil{
  position:fixed; inset:0; z-index:90;
  background:rgba(4,4,6,.72);
  opacity:0; pointer-events:none;
  transition:opacity .26s var(--ease);
}
.veil.is-on{ opacity:1; pointer-events:auto }
body.nav-open{ overflow:hidden }

/* ═══ ГЕРОЙ ═══════════════════════════════════════════════ */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line) }

.hero__grid{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 55% at 78% 18%, rgba(12,99,176,.18), transparent 70%),
    radial-gradient(45% 40% at 12% 82%, rgba(228,0,43,.10), transparent 70%),
    linear-gradient(transparent 0 39px, rgba(255,255,255,.022) 39px 40px) 0 0/100% 40px,
    linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.022) 39px 40px) 0 0/40px 100%;
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
  pointer-events:none;
}

.hero__in{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,72px); align-items:center;
  padding-block:clamp(56px,9vw,120px) clamp(48px,7vw,96px);
}

.eyebrow{
  display:flex; align-items:center; gap:14px;
  font:500 12.5px/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.16em; text-transform:uppercase; color:var(--txt-2);
  margin-bottom:26px;
}

.hero__h1{
  font-size:clamp(2.9rem, 7.4vw, 5.6rem);
  font-weight:700;
  font-variation-settings:"wdth" 108;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.hero__h1 em{
  font-style:italic; color:var(--m-red);
  font-variation-settings:"wdth" 96;
}
.hero__h1 span:last-child{ color:var(--txt-2); font-weight:500 }

.hero__lead{
  margin-top:26px; max-width:50ch;
  font-size:clamp(1rem,1.35vw,1.16rem); color:var(--txt-2);
}

.hero__act{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px }

.hero__facts{
  display:flex; flex-wrap:wrap; gap:12px 40px;
  margin-top:44px; padding-top:28px; border-top:1px solid var(--line);
}
.hero__facts li{ display:flex; flex-direction:column; gap:2px }
.hero__facts b{
  font-size:1.02rem; font-weight:700; font-variation-settings:"wdth" 106;
  letter-spacing:-.01em;
}
.hero__facts span{ font-size:13.5px; color:var(--txt-3) }

.hero__mark{ justify-self:center; width:min(100%,420px) }
.hero__mark picture{ display:block }
.hero__mark img{ width:100%; filter:drop-shadow(0 24px 60px rgba(0,0,0,.6)) }

/* біжучий рядок */
.ticker{
  position:relative; overflow:hidden;
  border-top:1px solid var(--line);
  background:var(--bg-alt);
  padding-block:14px;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker__row{
  display:flex; align-items:center; gap:22px; width:max-content;
  animation:slide 42s linear infinite;
  font:500 12.5px/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.12em; text-transform:uppercase; color:var(--txt-3);
  white-space:nowrap;
}
.ticker__row i{ width:5px; height:5px; background:var(--m-red); transform:rotate(45deg); flex:none }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ═══ СЕКЦІЇ ══════════════════════════════════════════════ */
.sec{ padding-block:var(--sec-y) }
.sec--alt{ background:var(--bg-alt); border-block:1px solid var(--line) }

.sec__head{ max-width:62ch; margin-bottom:clamp(40px,5vw,68px) }
.sec__num{
  font:500 12px/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.2em; color:var(--red-txt); margin-bottom:18px;
}
.sec__h2{
  font-size:clamp(2rem,4.4vw,3.3rem); font-weight:700;
  font-variation-settings:"wdth" 106; letter-spacing:-.032em;
  text-wrap:balance;
}
.sec__sub{ margin-top:18px; color:var(--txt-2); font-size:1.04rem; max-width:56ch }

/* ── кнопки ──────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:99px;
  font-weight:600; font-size:15px; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:transform .18s var(--ease), background .2s, border-color .2s, box-shadow .2s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px) }
.btn--red{ background:var(--m-red); color:#fff; box-shadow:0 8px 26px -12px rgba(228,0,43,.9) }
.btn--ghost{ border-color:var(--line-2); color:var(--txt); background:rgba(255,255,255,.02) }
.btn--ghost b{ font-variant-numeric:tabular-nums }
.btn--wide{ width:100%; padding-block:16px; font-size:16px }
.btn--sm{ padding:10px 18px; font-size:14px }
.btn .ico{ width:17px; height:17px; fill:currentColor }

/* Кнопка WhatsApp. Навмисно БЕЗ фірмового зеленого: сайт побудований
   на кольорах BMW M, і зелена плашка читалась би тут як чужа наліпка
   з чужого бренду. Упізнаваність дає сам значок і слово в підписі,
   а кнопка лишається в одній мові з рештою сторінки. */
.btn--wa{
  margin-top:30px;
  border-color:var(--line-2); color:var(--txt);
  background:rgba(255,255,255,.02);
}
.ic-wa{ width:19px; height:19px; flex:none; fill:currentColor }

/* ═══ КАРТКИ ПОСЛУГ ═══════════════════════════════════════ */
.cards{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
}
.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(24px,2.6vw,34px);
  transition:border-color .28s, background .28s, transform .28s var(--ease);
}
.card::before{
  content:""; position:absolute; left:-1px; top:22px; bottom:22px; width:2px;
  background:var(--m-red); border-radius:2px;
  opacity:0; transform:scaleY(.35); transform-origin:center;
  transition:opacity .3s, transform .35s var(--ease);
}

.card h3{
  font-size:1.22rem; font-weight:700; font-variation-settings:"wdth" 104;
  margin-bottom:12px;
}
.card p{ color:var(--txt-2); font-size:15.2px }

/* 🪤 grid-column був ТІЛЬКИ в медіазапиті від 940px. Лід-картка це
   переживала, бо мала власне правило тут, а нова .card--stage — ні:
   між ~570 і 939px вона ставала звичайною вузькою карткою в ряду.
   Дірок у сітці не лишалось (auto-fit усе вирівнював), тому очима
   це не ловилось — зловив замір ширини на восьми точках.
   Тепер повна ширина оголошена в базі, а не лише на широкому екрані. */
.card--wide{ grid-column:1/-1 }

.card--lead{
  background:linear-gradient(150deg, var(--surface-2), var(--surface) 60%);
}
/* Обідок у кольорах BMW M. Свідомо ТИХІШИЙ за бордовий у stage:
   там головний акцент, тут підтримка — якщо обидва кричатимуть,
   не виділятиметься жоден.

   Як це зроблено: елемент на всю картку залитий градієнтом, а маска
   вирізає з нього середину. Лишається сама рамка завтовшки 1px.
   Звичайним border градієнт зробити не можна.

   Градієнт гасне в прозорість під кінець — щоб це читалось як
   фірмова смужка M, а не як кільце всіх кольорів веселки. */
.card--lead::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1px; pointer-events:none; opacity:.6;
  background:linear-gradient(118deg,
    var(--m-lblue) 0%, var(--m-blue) 26%, var(--m-red) 58%,
    rgba(228,0,43,.25) 78%, rgba(255,255,255,.05) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}
.card--lead h3{ font-size:clamp(1.5rem,2.7vw,2.05rem) }
.card--lead p{ max-width:68ch; font-size:16px }
.card__tag{
  display:inline-block; margin-bottom:16px;
  font:500 11px/1 "JetBrains Mono",ui-monospace,monospace; letter-spacing:.18em;
  text-transform:uppercase; color:var(--red-txt);
  border:1px solid rgba(228,0,43,.45); border-radius:99px; padding:7px 12px;
}
/* Stage-тюнінг. «Виділити, але не геть сильно»: інший нахил
   градієнта, смуга BMW M зверху і дуже повільний відблиск.
   Жодного нового кольору — виділяє форма і рух, а не яскравість. */
.card--stage{
  /* Бордовий обідок — єдиний такий на сторінці: решта карток має сірий
     --line. Плюс внутрішній волосок, тепла пляма у верхньому правому
     куті і глибока тінь того ж тону. Око бачить «це інше» ще до того,
     як прочитає заголовок. */
  /* Обідок бере СВІТЛІШИЙ бордовий, не базовий: базовий #7b1f30 дає
     проти тла сторінки лише 1.98:1 — норму 3:1 для елементів
     інтерфейсу не тягне, та й «виділяється» з нього ніяке.
     #a63349 дає 3.04:1 і лишається винним, а не червоним. */
  border-color:var(--burg-hi);
  background:
    radial-gradient(118% 140% at 88% -12%, rgba(166,51,73,.19), transparent 58%),
    linear-gradient(115deg, var(--surface-2), var(--surface) 58%);
  box-shadow:
    inset 0 0 0 1px rgba(166,51,73,.13),
    0 30px 80px -52px rgba(166,51,73,.95);
}
.card--stage .mstripe{ margin-bottom:18px }
/* Смужка при наведенні успадковувала BMW-червоний від .card::before
   і билася з бордовим обідком — два різні червоні поруч. */
.card--stage::before{ background:var(--burg-hi) }
/* Тег нейтральний, а не червоний: червоний у цій секції вже зайнятий
   плашкою «Our speciality», і два червоні тримали б увагу навпіл. */
.card--stage .card__tag{ color:var(--txt-2); border-color:var(--line-2) }
.card--stage h3{ font-size:clamp(1.34rem,2.2vw,1.72rem) }
.card--stage p{ max-width:66ch; font-size:16px }

/* Відблиск. 7 секунд і 5% білого — на межі помітності: око ловить рух
   периферійним зором, але читати текст не заважає. border-radius:inherit
   обрізає його по картці, тому overflow:hidden не потрібен — інакше
   він з'їв би червону смужку .card::before при наведенні.
   Під prefers-reduced-motion анімацію глушить загальне правило нижче. */
.card--stage::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(100deg,
    transparent 42%, rgba(255,255,255,.05) 50%, transparent 58%);
  background-size:260% 100%;
  animation:stage-sheen 7s linear infinite;
}
@keyframes stage-sheen{
  from{ background-position:170% 0 }
  to  { background-position:-70% 0 }
}

/* ── Вкладки Stage ───────────────────────────────────────
   Вибір кліком або дотиком, стрілки з клавіатури. Наведення мишею
   лише підглядає — бачити зміст має й той, хто на телефоні. */
.stage{ margin-top:28px }

.stage__tabs{ display:flex; flex-wrap:wrap; gap:9px }
.stage__tab{
  appearance:none; cursor:pointer; min-height:44px;
  font:600 12.5px/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--txt-2); background:rgba(255,255,255,.02);
  border:1px solid var(--line-2); border-radius:99px; padding:12px 19px;
  transition:color .2s, background .25s, border-color .2s, box-shadow .25s;
}
.stage__tab[aria-selected="true"]{
  color:#fff; background:var(--burg); border-color:var(--burg-hi);
  box-shadow:0 12px 28px -16px rgba(166,51,73,1);
}

.stage__panel{
  margin-top:22px; padding-top:22px;
  border-top:1px solid rgba(166,51,73,.3);
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(20px,3vw,46px); align-items:start;
}
.stage__h{ font-size:1.04rem; font-weight:700; margin-bottom:9px; color:var(--txt) }
.stage__p{ color:var(--txt-2); font-size:15.2px; max-width:52ch }

/* Смужка приросту. Вона НЕ число і не обіцянка — це масштаб:
   показує, наскільки один варіант більший за інший. Точні цифри
   словами поруч, і під ними застереження. */
.stage__meter{ display:grid; gap:11px }
.stage__k{
  font:500 11px/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.18em; text-transform:uppercase; color:var(--txt-3);
}
.stage__bar{
  display:block; height:6px; border-radius:99px;
  background:rgba(255,255,255,.07); overflow:hidden;
}
.stage__bar i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--burg), var(--burg-hi));
  transition:width .55s var(--ease);
}
/* Цифра — це те, заради чого людина сюди й клікнула. Тому вона
   велика: права колонка отримує власний фокус, і блок перестає
   виглядати як текст із тонкою рискою збоку. */
.stage__g{
  color:var(--burg-tx); font-weight:700; line-height:1.1;
  font-size:clamp(1.24rem,2vw,1.62rem);
  font-variation-settings:"wdth" 104;
}
/* Партнер. Відокремлений бордовим волоском — читається як підпис
   під цифрою, а не як ще один абзац тексту. */
.stage__partner{
  margin-top:18px; padding-top:16px;
  border-top:1px solid rgba(166,51,73,.22);
  display:grid; gap:7px;
}
.stage__pk{
  font:500 11px/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.18em; text-transform:uppercase; color:var(--txt-3);
}
.stage__pn{
  font-size:1.06rem; font-weight:700; color:var(--txt);
  font-variation-settings:"wdth" 104; letter-spacing:.01em;
}

.stage__note{ margin-top:20px; color:var(--txt-3); font-size:13.4px; max-width:74ch }

@media (max-width:760px){
  .stage__panel{ grid-template-columns:1fr; gap:24px }
}
/* На вузькому екрані три вкладки не влазили в ряд і третя зривалась
   окремо — виглядало як помилка верстки. На телефоні це вже не flex,
   а сітка з трьох РІВНИХ колонок: вкладки завжди в один ряд, однакові
   за шириною і зручніші для пальця. Висота 44px лишається. */
@media (max-width:430px){
  .stage__tabs{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px }
  .stage__tab{
    padding-inline:8px; font-size:11.5px; letter-spacing:.04em;
    display:flex; align-items:center; justify-content:center;
  }
}

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px }
.chips li{
  font:500 12.5px/1 "JetBrains Mono",ui-monospace,monospace; color:var(--txt-2);
  border:1px solid var(--line); border-radius:99px; padding:8px 13px;
  background:rgba(255,255,255,.02);
}

/* На широкому екрані ряди не лишають дір:
   лід на всю ширину · 3 картки по третині · 2 по половині · stage на всю.

   🪤 Було .card:nth-last-child(2), .card:last-child — ширина залежала
   від ПОЗИЦІЇ в сітці. Варто додати сьому картку в кінець — і дві
   попередні мовчки міняли ширину, лишаючи дірку в ряду. Плюс селектор
   із псевдокласом (0-0-2-0) перебивав би .card--stage (0-0-1-0) — та
   сама пастка специфічності, що з .nav a проти .nav__cta у PR #11.
   Тепер ширину задає ЯВНИЙ клас у розмітці, і порядок карток нічого
   не ламає. */
@media (min-width:940px){
  .cards{ grid-template-columns:repeat(6,1fr) }
  .card{ grid-column:span 2 }
  .card--half{ grid-column:span 3 }
  .card--wide{ grid-column:1/-1 }
}

/* ═══ ЧОМУ BMW ════════════════════════════════════════════ */
.why{
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(36px,5vw,80px); align-items:start;
}
.why__lead{ margin-top:20px; color:var(--txt-2); font-size:1.06rem; max-width:44ch }
.why__act{ margin-top:32px }

.why__list li{ padding:26px 0; border-top:1px solid var(--line) }
.why__list li:first-child{ border-top:0; padding-top:0 }
.why__list h3{
  font-size:1.14rem; font-weight:700; font-variation-settings:"wdth" 104;
  margin-bottom:8px;
}
.why__list p{ color:var(--txt-2); font-size:15.2px }

/* ═══ ПРОЦЕС ══════════════════════════════════════════════ */
.steps{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  counter-reset:s;
}
.steps li{
  position:relative; padding:30px 26px 28px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface);
  transition:border-color .28s, transform .28s var(--ease);
}
.steps__n{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; margin-bottom:20px;
  border-radius:10px; border:1px solid var(--line-2);
  font:600 15px/1 "JetBrains Mono",ui-monospace,monospace; color:var(--red-txt);
  background:rgba(228,0,43,.07);
}
.steps h3{ font-size:1.08rem; font-weight:700; margin-bottom:8px }
.steps p{ color:var(--txt-2); font-size:15px }

/* ═══ ГАЛЕРЕЯ ═════════════════════════════════════════════ */
.gal{
  display:grid; gap:14px; margin-bottom:36px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.gal__i{ margin:0; display:grid; gap:11px }
.gal__i picture{
  display:block; overflow:hidden;
  border-radius:var(--r); border:1px solid var(--line);
  background:var(--surface);
}
.gal__i img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition:transform .55s var(--ease);
}
.gal__i figcaption{ font-size:13.6px; color:var(--txt-2); line-height:1.45 }

/* ═══ ВІДГУКИ ════════════════════════════════════════════ */

/* заголовок і стрілки в один рядок */
.sec__head--row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; max-width:none;
}
.sec__head--row > div:first-child{ max-width:62ch }

.revs__nav{ display:flex; gap:8px; flex:none; padding-bottom:4px }
.revs__btn{
  width:44px; height:44px; display:grid; place-items:center;
  background:rgba(255,255,255,.02); border:1px solid var(--line-2);
  border-radius:99px; cursor:pointer;
  transition:border-color .2s, background .2s, opacity .2s;
}
.revs__btn svg{ width:20px; height:20px; fill:var(--txt) }
.revs__btn[disabled]{ opacity:.32; cursor:default }

/* ── стрічка ──────────────────────────────────────────────
   Нативний скрол зі scroll-snap: свайп пальцем працює сам,
   без жодної бібліотеки. Стрічка навмисно виходить за межі
   .wrap — наступна картка визирає з краю, і одразу видно,
   що вона там не остання. */
.revs-rail{
  /* відступ стрічки і scroll-padding мають збігатися, інакше
     scroll-snap приліплює першу картку до іншої точки, і стрічка
     відкривається вже зсунутою (було 110px зсуву на 1440) */
  --rail-pad:max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)));
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--rail-pad);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  margin-bottom:28px;
}
.revs-rail::-webkit-scrollbar{ display:none }
.revs-rail:focus-visible{ outline:2px solid var(--m-lblue); outline-offset:-2px }

.revs{
  display:flex; gap:16px; align-items:stretch;
  width:max-content;
  padding-inline:var(--rail-pad);
}

.rev{
  flex:0 0 clamp(285px, 78vw, 385px);
  scroll-snap-align:start;
  /* рядки: шапка · зірки · текст (росте) · робота (притиснута донизу).
     Через це рядок з роботою стоїть на одній лінії в усіх картках,
     хоч відгуки й різної довжини. */
  display:grid; gap:16px;
  grid-template-rows:auto auto 1fr auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(22px,2.4vw,30px);
  transition:border-color .28s, background .28s;
}

.rev__top{ display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:center }

/* ініціали замість фото: аватарки з Google означали б запит
   до чужого сервера з кожного відкриття сторінки */
.rev__ava{
  display:grid; place-items:center;
  width:42px; height:42px; border-radius:99px; flex:none;
  background:linear-gradient(150deg, rgba(12,99,176,.55), rgba(228,0,43,.45));
  border:1px solid var(--line-2);
  font:600 13.5px/1 "Archivo","Manrope",sans-serif;
  color:var(--txt);
}
.rev__who{ display:grid; gap:3px; min-width:0 }
.rev__name{
  font-size:15.4px; font-weight:700; font-variation-settings:"wdth" 104;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rev__meta{
  font:500 10.5px/1.3 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.11em; text-transform:uppercase; color:var(--txt-3);
}

.rev__stars{ display:flex; gap:3px }
.rev__stars svg{ width:15px; height:15px; fill:#f5b301; flex:none }

.rev__text{ margin:0 }
.rev__text p{ color:var(--txt-2); font-size:15px; line-height:1.6 }

/* що саме робили — прив'язує похвалу до конкретної роботи */
.rev__work{
  margin-top:auto; padding-top:15px; border-top:1px solid var(--line);
  font:500 11.5px/1.5 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.06em; color:var(--red-txt);
}

/* ── низ: крапки і кнопка ── */
.revs__foot{ display:flex; align-items:center; gap:22px; flex-wrap:wrap }
.revs__dots{ display:flex; gap:7px }
.revs__dots i{
  width:7px; height:7px; border-radius:99px;
  background:var(--line-2); transition:background .25s, width .25s;
}
.revs__dots i.is-on{ width:22px; background:var(--m-red) }

@media (max-width:760px){
  .sec__head--row{ display:block }
  .revs__nav{ display:none }
}

/* ═══ ФОРМА ═══════════════════════════════════════════════ */
.book{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(36px,5vw,72px); align-items:start;
}
.book__lead{ margin-top:20px; color:var(--txt-2); font-size:1.06rem; max-width:44ch }

.book__alt{ margin-top:34px; display:grid; gap:16px }
.book__alt li{ display:flex; flex-direction:column; gap:3px }
.book__alt-k{
  font:500 11.5px/1 "JetBrains Mono",ui-monospace,monospace; letter-spacing:.16em;
  text-transform:uppercase; color:var(--txt-3);
}
.book__alt a{
  font-size:1.22rem; font-weight:700; text-decoration:none;
  font-variation-settings:"wdth" 104; width:fit-content;
  border-bottom:1px solid var(--line-2); padding-bottom:2px;
  transition:color .2s, border-color .2s;
}

.form{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:clamp(24px,3vw,38px);
  display:grid; gap:18px;
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px }

.fld{ display:grid; gap:8px; min-width:0 }
.fld label{
  font-size:13.5px; font-weight:600; color:var(--txt-2);
  display:flex; align-items:center; gap:8px;
}
.opt{
  font:400 11px/1 "JetBrains Mono",ui-monospace,monospace; letter-spacing:.1em;
  text-transform:uppercase; color:var(--txt-3);
}
.fld input, .fld select, .fld textarea{
  width:100%; font:inherit; font-size:15.5px; color:var(--txt);
  background:var(--bg); border:1px solid var(--line-2); border-radius:10px;
  padding:13px 15px;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.fld textarea{ resize:vertical; min-height:110px; line-height:1.55 }
.fld input::placeholder, .fld textarea::placeholder{ color:var(--txt-3) }
.fld input:focus, .fld select:focus, .fld textarea:focus{
  outline:none; border-color:var(--m-lblue);
  box-shadow:0 0 0 3px rgba(108,178,228,.16);
}
.fld select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a3a6ae'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:20px;
  padding-right:42px;
}
.fld select option{ background:var(--bg-alt); color:var(--txt) }

.fld.is-bad input, .fld.is-bad select{ border-color:var(--m-red) }
.fld__err{
  font-size:12.8px; color:var(--red-hi); min-height:0;
  display:none;
}
.fld.is-bad .fld__err{ display:block }

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

.form__note{ font-size:12.8px; color:var(--txt-3); text-align:center }
.form__msg{ font-size:14.5px; text-align:center; display:none }
.form__msg.is-ok{ display:block; color:var(--m-lblue) }
.form__msg.is-bad{ display:block; color:var(--red-hi) }

/* ═══ КОНТАКТИ ════════════════════════════════════════════ */
.find{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(32px,4vw,60px); align-items:start;
}
.find__info{ display:grid; gap:34px }
.find__blk h3{
  font:500 11.5px/1 "JetBrains Mono",ui-monospace,monospace; letter-spacing:.18em;
  text-transform:uppercase; color:var(--txt-3); margin-bottom:14px;
}
.find__blk address{ font-style:normal; font-size:1.06rem; line-height:1.75; margin-bottom:18px }

.big-link{
  font-size:1.16rem; font-weight:700; text-decoration:none;
  font-variation-settings:"wdth" 104;
  border-bottom:1px solid var(--line-2); padding-bottom:2px;
  transition:color .2s, border-color .2s;
}

.status{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
  font:500 12.5px/1 "JetBrains Mono",ui-monospace,monospace; letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid var(--line); border-radius:99px; padding:8px 13px;
}
.status::before{ content:""; width:7px; height:7px; border-radius:99px; background:var(--txt-3) }
.status.is-open{ color:#63d68a; border-color:rgba(99,214,138,.35) }
.status.is-open::before{ background:#63d68a; box-shadow:0 0 0 3px rgba(99,214,138,.18) }
.status.is-shut{ color:var(--txt-2) }

.hours{ width:100%; border-collapse:collapse; font-size:15.2px }
.hours tr{ border-top:1px solid var(--line) }
.hours tr:first-child{ border-top:0 }
.hours th, .hours td{ padding:12px 0; text-align:left; font-weight:400 }
.hours th{ color:var(--txt-2) }
.hours td{ text-align:right; font-variant-numeric:tabular-nums }
.hours tr.is-today th{ color:var(--txt); font-weight:600 }
.hours tr.is-today td{ color:var(--txt); font-weight:600 }

.find__map{ min-height:340px }
.map-load, .find__map iframe{
  width:100%; height:100%; min-height:340px;
  border:1px solid var(--line); border-radius:var(--r); display:block;
}
.map-load{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 14px, transparent 14px 28px),
    var(--surface);
  color:var(--txt-2); cursor:pointer;
  display:grid; place-items:center; align-content:center; gap:6px;
  font:inherit; transition:border-color .25s, background .25s;
}
.map-load svg{ width:26px; height:26px; fill:var(--m-red) }
.map-load span{ font-weight:600; font-size:15px }
.map-load small{ font-size:12.5px; color:var(--txt-3) }
.find__map iframe{ filter:grayscale(1) invert(.92) hue-rotate(180deg) contrast(.86) }

/* ═══ ПІДВАЛ ══════════════════════════════════════════════ */
.ftr{ border-top:1px solid var(--line); background:var(--bg-alt) }
.ftr__in{
  display:grid; grid-template-columns:1.2fr 1fr 1fr;
  gap:36px; padding-block:clamp(44px,6vw,72px);
}
.ftr__brand img{ height:40px; width:auto; margin-bottom:16px }
.ftr__brand p{ color:var(--txt-3); font-size:14px; max-width:30ch }
.ftr__nav{ display:grid; gap:11px; align-content:start; font-size:14.5px }
.ftr__nav a{ text-decoration:none; color:var(--txt-2); width:fit-content; transition:color .2s }
.ftr__meta{ display:grid; gap:11px; align-content:start; font-size:14.5px }
.ftr__meta a{ text-decoration:none; color:var(--txt-2); width:fit-content; transition:color .2s }
.ftr__meta p{ color:var(--txt-3); font-size:13px; margin-top:6px }

/* ═══ ПОЯВА ПРИ СКРОЛІ ════════════════════════════════════ */
.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .62s var(--ease), transform .62s var(--ease);
  transition-delay:calc(var(--d,0) * 70ms);
}
.reveal.is-in{ opacity:1; transform:none }

/* ═══ АДАПТИВ ═════════════════════════════════════════════ */
@media (max-width:1000px){
  .hero__in{ grid-template-columns:1fr }
  .hero__mark{ grid-row:1; width:min(72%,300px); justify-self:start }
  .why, .book, .find, .ftr__in{ grid-template-columns:1fr }
  .ftr__in{ gap:30px }
}

/* Поріг 960, а не 840: із номером у міжнародному форматі (+44 7522 018523)
   десктопна шапка перестає влазити вже на ~940px — меню, мова і телефон
   в один рядок не поміщаються, і сторінка виїжджала вбік. */
@media (max-width:960px){
  /* Цілі дотику: Apple радить 44×44, Google 48×48. Кнопки мови були
     34×28, дзвінок 41×35, бургер 40×40 — палець промахувався.
     Розмір самих написів не чіпаємо, збільшуємо тільки зону натискання. */
  .lang__btn{ min-height:44px; padding-inline:15px 13px }
  .lang__menu button{ min-height:44px }
  .hdr__tel{ min-height:44px; min-width:44px }
  .burger{ width:44px; height:44px }
  .burger span{ left:13px }

  /* Текстові посилання (телефон, Instagram, навігація в підвалі) мали
     висоту рядка 23–35px. Розширюємо зону дотику невидимим шаром
     поверх — вигляд і відступи не змінюються, а палець уже не
     промахується. Саме так це роблять, коли не можна чіпати верстку. */
  .big-link, .book__alt a, .ftr__nav a, .ftr__meta a, .hdr__logo{ position:relative }
  .big-link::after, .book__alt a::after,
  .ftr__nav a::after, .ftr__meta a::after, .hdr__logo::after{
    content:""; position:absolute; left:0; right:0;
    top:50%; height:44px; transform:translateY(-50%);
  }

  /* три колонки: логотип ліворуч, мова точно посередині,
     дзвінок і бургер праворуч. Меню випадає окремо (position:fixed),
     тому в сітці місця не займає. */
  .hdr__in{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center; gap:10px;
  }
  .hdr__logo{ justify-self:start }
  .lang{ justify-self:center }
  .hdr__side{ justify-self:end; gap:10px }

  .nav{
    position:fixed; inset:72px 0 auto; margin:0;
    flex-direction:column; align-items:stretch; gap:0;
    /* суцільний фон, без backdrop-filter: меню лежить усередині
       шапки, яка вже розмиває фон, а вкладене розмиття в Chromium
       не малює фон дочірнього елемента як слід */
    background:var(--bg);
    box-shadow:0 24px 48px -12px rgba(0,0,0,.8);
    border-bottom:1px solid var(--line);
    padding:8px var(--pad) 22px;
    transform:translateY(-12px); opacity:0; pointer-events:none; visibility:hidden;
    transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
    max-height:calc(100dvh - 72px); overflow-y:auto;
  }
  .nav.is-open{ transform:none; opacity:1; pointer-events:auto; visibility:visible }
  .nav a{ padding:15px 0; border-bottom:1px solid var(--line); font-size:16px }
  /* .nav a має вищу специфічність (клас + тег), ніж .nav__cta (клас),
     тому сірий color:var(--txt-2) перебивав тут білий — напис на
     червоній кнопці виходив сіруватим. Селектор .nav a.nav__cta
     повертає той самий чистий білий, що й .btn--red на сторінці. */
  .nav a.nav__cta{
    display:block; margin-top:18px; border:0!important; text-align:center;
    background:var(--m-red); color:#fff; border-radius:99px; padding:15px 24px;
    font-weight:600;
  }
  .burger{ display:block }
  .hdr__tel span{ display:none }
  .hdr__tel{ padding:9px 12px }
}

@media (max-width:600px){
  body{ font-size:16px }
  .hero__mark{ display:none }
  .hero__in{ padding-block:44px 56px }
  .form__row{ grid-template-columns:1fr }
  .hero__facts{ gap:16px 28px }
  .hero__act .btn{ flex:1 1 100%; }
  .lang__btn{ padding-inline:11px 9px }
  .gal{ grid-template-columns:1fr 1fr; gap:10px }
}


/* ═══ НАВЕДЕННЯ — ТІЛЬКИ ДЛЯ МИШІ ═════════════════════════
   На сенсорному екрані :hover «залипає» після дотику: палець
   уже прибрали, а підсвітка лишається, поки не торкнешся
   іншого місця. Найпомітніше це на червоній смужці картки.
   Тому всі ефекти наведення вмикаємо лише там, де є справжній
   курсор. Активний стан при натисканні (:active) не чіпаємо —
   він на дотик працює правильно. */
@media (hover: hover) and (pointer: fine){
  .nav a:hover{ color:var(--txt) }
  .lang__btn:hover{ color:var(--txt); border-color:var(--line-2) }
  .lang__menu button:hover{ color:var(--txt); background:rgba(255,255,255,.06) }
  .hdr__tel:hover{ border-color:var(--m-red); background:rgba(228,0,43,.09) }
  .btn--red:hover{ background:var(--red-hi); box-shadow:0 12px 34px -12px rgba(228,0,43,1) }
  .btn--ghost:hover{ border-color:var(--txt-2); background:rgba(255,255,255,.06) }
  .btn--wa:hover{ border-color:var(--txt-2); background:rgba(255,255,255,.06) }
  .stage__tab:hover{ color:var(--txt); border-color:var(--burg-hi) }
  .stage__tab[aria-selected="true"]:hover{ color:#fff; background:var(--burg-hi) }
  .card:hover{ border-color:var(--line-2); background:var(--surface-2); transform:translateY(-3px) }
  .card:hover::before{ opacity:1; transform:scaleY(1) }
  .steps li:hover{ border-color:var(--line-2); transform:translateY(-3px) }
  .gal__i:hover img{ transform:scale(1.04) }
  .revs__btn:hover{ border-color:var(--txt-2); background:rgba(255,255,255,.06) }
  .revs__btn[disabled]:hover{ border-color:var(--line-2); background:rgba(255,255,255,.02) }
  .rev:hover{ border-color:var(--line-2); background:var(--surface-2) }
  .book__alt a:hover{ color:var(--m-red); border-color:var(--m-red) }
  .big-link:hover{ color:var(--m-red); border-color:var(--m-red) }
  .map-load:hover{ border-color:var(--line-2); color:var(--txt) }
  .ftr__nav a:hover{ color:var(--txt) }
  .ftr__meta a:hover{ color:var(--txt) }
}

/* ═══ ЗМЕНШЕНИЙ РУХ ═══════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .reveal{ opacity:1; transform:none }
}