/* SILENT — спільні стилі української та англомовної версій.
   Вийняті з <style> в index.html без жодної зміни правил: обидві сторінки
   мусять виглядати однаково, тож стилі мають бути буквально одним файлом, а
   не двома копіями, що поволі розходяться.
   Єдина правка при винесенні — два url(): вони резолвяться відносно цього
   файлу, а він лежить на крок глибше за сторінку. */
  :root {
    --night: #05070d;
    --night-2: #0b1020;
    --ink-inv: #ffffff;
    --muted: rgba(255,255,255,0.62);
    --muted-2: rgba(255,255,255,0.40);
    --line: rgba(255,255,255,0.08);
    --lime: #c6ff00;
    --lime-glow: rgba(198,255,0,0.35);
    --glass: rgba(255,255,255,0.03);
    --glass-2: rgba(255,255,255,0.05);

    /* matte glass depth system — fill gradients + edge highlights per elevation.
       Neutral, clearer frosted glass: near-neutral highlight (little blue),
       lower-opacity floor so it reads as real glass, with the blur doing the work. */
    --glass-fill-1: linear-gradient(158deg, rgba(226,230,238,0.10), rgba(210,216,228,0.035) 48%, rgba(210,216,228,0.02)), rgba(20,24,32,0.30);
    --glass-fill-2: linear-gradient(158deg, rgba(230,234,242,0.13), rgba(214,220,232,0.05) 48%, rgba(214,220,232,0.03)), rgba(24,28,38,0.36);
    --glass-edge: rgba(255,255,255,0.24);
    /* one frosted material for the whole page: same blur, same fill, so panels,
       cards, buttons and the nav all read as the same pane of glass */
    --glass-blur: blur(18px) saturate(1.15);
    --glass-fill-soft: linear-gradient(158deg, rgba(226,230,238,0.09), rgba(210,216,228,0.035) 48%, rgba(210,216,228,0.02)), rgba(20,24,32,0.26);
    /* darker pane: lets a bright backdrop read through while keeping text crisp */
    --glass-fill-dark: linear-gradient(158deg, rgba(226,230,238,0.07), rgba(210,216,228,0.02) 48%, rgba(210,216,228,0.012)), rgba(9,12,18,0.58);
    --glass-shadow-1: 0 20px 50px -28px rgba(0,0,0,0.7);
    --glass-shadow-2: 0 30px 70px -30px rgba(0,0,0,0.8);

    /* unified vertical rhythm between sections */
    --sec-pad: 72px;

    /* Шкала скруглень. Раніше по файлу було дванадцять довільних значень
       (10, 12, 15, 16, 18, 20, 22, 24, 26, 28, 40), і сусідні поверхні
       відрізнялись на два пікселі — око цього не читає як задум, лише як
       неохайність. Чотири щаблі за роллю елемента: поле вводу, кнопка,
       картка, велика панель. Кола (50%) і пігулки (999px) поза шкалою. */
    --r-xs: 12px;   /* поля вводу, дрібні чипи */
    --r-sm: 16px;   /* кнопки, дрібні картки, фото в стрічці */
    --r-md: 22px;   /* картки контенту */
    --r-lg: 28px;   /* великі панелі: форма, band, модалка */

    /* fixed RGB identity — the three headphone channels */
    /* Канальні кольори тримаємо ще й у вигляді компонент: усі світіння —
       це rgba від того самого відтінку, тож палітра міняється в одному місці,
       а не в 37 жорстко зашитих rgba по всьому файлу. */
    --red-rgb: 255, 26, 79;
    --green-rgb: 0, 255, 133;
    --blue-rgb: 0, 179, 255;
    --red: rgb(var(--red-rgb));
    --green: rgb(var(--green-rgb));
    --blue: rgb(var(--blue-rgb));

    /* Акцент усього сайту — лаймовий. Кольори каналів більше нікуди за межі
       панелі «Оберіть канал» не виходять: JS ставить --ch на саму панель
       (#channels), а не на :root, тож перемикання фарбує лише її піддерево. */
    --ch: #c6ff00;
    --ch-soft: rgba(198,255,0,0.14);
    --ch-glow: rgba(198,255,0,0.45);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Manrope', sans-serif;
    background: var(--night);
    color: var(--ink-inv);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background 0.8s ease;
  }
  h1,h2,h3 { font-family: 'Unbounded', sans-serif; letter-spacing: -0.02em; }
  .em { font-family: 'Lora', serif; font-style: italic; }
  a { color: inherit; text-decoration: none; }

  /* Visible keyboard focus — lime ring, only for keyboard users. */
  a:focus-visible, button:focus-visible, .ch-btn:focus-visible,
  .faq-q:focus-visible, [tabindex]:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 3px;
    border-radius: 6px;
  }

  /* Загальносайтової підсвітки більше немає: зафіксований у вікні шар тягнувся
     через усі секції до самого підвалу й міняв колір разом із каналом. Світло
     а з hero кольорові плями прибрані зовсім: вони лягали поверх знімка й
     розмивали фігуру. */
  body > nav, .hero, section, footer { position: relative; z-index: 1; }

  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
  /* На десктопі контейнер повторює геометрію меню, а не живе окремо: ті самі
     18px від країв екрана (звідси calc(100% - 36px)) і той самий внутрішній
     відступ 25px. Тому логотип, заголовок hero, плашка каналів і картки секцій
     стають на одну вертикаль — раніше секції були на 43px вужчі з кожного боку.
     Нижче 1000px нічого не змінюється: там працює базове правило вище. */
  @media (min-width: 1000px){
    .wrap { width: calc(100% - 36px); max-width: 1320px; padding-inline: 25px; }
  }
  section { position: relative; }
  section[id] { scroll-margin-top: 96px; }

  /* ---------- NAV ---------- */
  body > nav {
    position: fixed; top: 18px; left: 18px; right: 18px; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 24px;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    background: var(--glass-fill-1);
    border: 1px solid var(--line);
    border-top-color: var(--glass-edge);
    border-radius: 999px;
    max-width: 1320px;
    margin: 0 auto;
    box-shadow: 0 8px 32px -12px rgba(0,0,0,0.5);
  }
  .logo { font-family: 'Unbounded'; font-weight: 700; font-size: 17px; letter-spacing: 0.02em; display: flex; align-items: center; }
  .logo b { color: var(--ch); transition: color 0.6s ease; }
  .nav-links { display: flex; gap: 26px; align-items: center; font-size: 13.5px; font-weight: 500; }
  .nav-links a { color: var(--muted); transition: color 0.25s; }
  .nav-links a:hover { color: #fff; }
  .nav-links a.nav-cta,
  /* Global button reset */
  button { font-family: 'Manrope', sans-serif; }

  .nav-cta {
    background: var(--lime); color: #12100a !important;
    padding: 11px 24px; border-radius: 999px;
    font-weight: 700; font-size: 13px;
    border: none;
    box-shadow: 0 6px 20px -6px var(--lime-glow);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    cursor: pointer;
  }
  .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -4px var(--lime-glow); color: #12100a !important; background: var(--lime); }
  @media (max-width: 720px){ .nav-links a:not(.nav-cta){ display:none; } }

  /* Перемикач мови — один сегментний тумблер, а не два написи поруч. Спільна
     обводка з падінгом усередині збирає обидві мови в один елемент керування:
     рамка каже, що це одна річ, а заливка — котра з двох увімкнена. Дві мітки
     без рамки читалися б як ще два пункти меню.
     Стоїть перед лаймовою кнопкою, а не після неї: кнопка — головна дія в
     меню, і крайнє праве місце лишається за нею. Заливка активної мови біла, а
     не лаймова, щоб не сперечатися з тією кнопкою за увагу.
     Активна мова — не посилання, а текст: клікати по тому, де ти вже є, нема
     сенсу.
     Висоту меню не чіпає: тумблер виходить ~26px проти ~39px у кнопки. */
  .nav-links .lang-switch {
    display: inline-flex; align-items: center;
    margin-left: 4px; padding: 3px;
    border: 1px solid var(--line); border-radius: 999px;
    background: rgba(255,255,255,0.03);
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em;
    line-height: 1;
  }
  .nav-links .lang-switch > * {
    padding: 5px 9px; border-radius: 999px;
    transition: background 0.25s ease, color 0.25s ease;
  }
  .nav-links .lang-switch .lang-cur {
    color: #fff;
    background: rgba(255,255,255,0.11);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  }
  .nav-links .lang-switch a { color: var(--muted-2); }
  .nav-links .lang-switch a:hover { color: #fff; background: rgba(255,255,255,0.06); }
  /* Тільки десктоп. 1100px — та сама межа, на якій у цьому файлі закінчується
     планшетна смуга hero й календаря, тож перемикач зникає разом із рештою
     десктопної розкладки, а не на власній довільній ширині. */
  @media (max-width: 1100px){ .nav-links .lang-switch { display: none; } }

  /* ---------- HERO ---------- */
  .hero {
    min-height: auto;
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: 152px 0 118px;
    position: relative;
    overflow: hidden;
  }
  /* На широкому екрані hero заповнює перший екран, а плашка каналів іде донизу.
     Раніше висоту диктував тільки контент: на 16" ноутбуці секція закінчувалась
     за 200px до згину, і під плашкою лишалась смуга порожнечі.

     min-height, а не height: якщо вікно нижче за контент (короткий ноутбук,
     панель закладок), секція просто росте від контенту, і margin-top: auto
     нічого не додає — розкладка лишається такою ж, як була.

     Стеля 1040px — щоб на високому моніторі секція не розтягувалась у порожнє
     полотно з текстом угорі й плашкою десь далеко внизу.

     Межа 1101px не випадкова: нижче працює окремий блок правил hero
     (@media 761–1100), де інші розміри шрифту й відступи. Планшети лишаються
     точно такими, як були.

     Дві auto-межі замість однієї: вільна висота ділиться порівну над текстовим
     блоком і між ним та плашкою. Тому заголовок із кнопками стоїть рівно
     посередині між низом меню і верхом плашки, а не притискається до верху.

     Верхній падінг 157px — не на око. Щоб рівний поділ дав саме ту середину,
     він мусить дорівнювати низу пігулки меню (91px) плюс власний верхній
     відступ плашки (66px), який теж рахується як контент. Заодно це нижня
     межа: коли вікно надто низьке і вільної висоти немає, текст лишається
     там само, де стояв, а між ним і плашкою лишаються ті самі 66px. */
  @media (min-width: 1101px){
    .hero { min-height: min(100svh, 1040px); padding-top: 157px; padding-bottom: 64px; }
    .hero .wrap.hero-top { margin-top: auto; }
    .hero .wrap.hero-panel { margin-top: auto; }
  }
  .hero-photo {
    position: absolute; left: 0; right: 0; top: -190px; height: calc(100% + 380px); z-index: 0;
    background-size: cover;
    /* Кадри обрізані до смуги, де густо світяться навушники, і без великих
       передніх силуетів — саме вони раніше читались більшими за героїню.
       Позиція тримає цю смугу на рівні її торса. */
    background-position: 60% 62%;
    opacity: 0; transition: opacity 1.1s ease;
    filter: saturate(1.08) contrast(1.04);
    will-change: transform;
  }
  .hero-photo.active { opacity: 0.5; }
  /* Кольорових плям і блендового шару тут навмисно немає: вони лягали поверх
     знімка й розмивали фігуру. Кадр лишається таким, яким знятий. */
  .hero-photo::after {
    content: '';
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(5,7,13,0.55) 0%, transparent 18%, transparent 62%, var(--night) 100%),
      linear-gradient(90deg, var(--night) 0%, rgba(5,7,13,0.72) 22%, rgba(5,7,13,0.25) 42%, transparent 56%);
  }
  /* Танцівниця праворуч, із повітрям навколо: contain вписує кадр цілком, тож
     ані голова, ані рука ніколи не зрізаються — на відміну від cover, який
     кадрує під коробку. Ліворуч короткий перехід, щоб темне тло знімка
     зливалося із залом позаду. */
  .hero-dancer {
    position: absolute; z-index: 1;
    /* Висота підібрана так, щоб фігура закінчувалась там, де починається
       панель каналів: на ескізі вони не накладаються, і саме це дає відчуття
       простору навколо неї. */
    /* Розмір диктує ширина, а не висота. contain вписує кадр за меншим із двох
       масштабів, тож коробка мусить бути достатньо високою — інакше фігура
       зменшується до висоти й виглядає дрібною, приліпленою до краю.
       На ескізі вона займає близько 52% ширини екрана — сюди й цілимось. */
    /* Прив'язка до НИЗУ, а не до верху, і коробка рівно за пропорцією кадру.
       Раніше висота коробки була 88% від .hero, а розмір кадру диктувала ширина —
       щойно hero ставав високим відносно своєї ширини (планшет), кадр займав лише
       верх коробки, обривався різкою межею і "висів у повітрі" над плашкою, а
       маска танула вже в порожнечі під ним. Тепер низ фігури завжди всередині
       плашки, а маска завжди лягає на саму фігуру. */
    /* Прив'язка до краю КОНТЕЙНЕРА, а не до відсотка вікна. Відсоток росте разом
       з екраном, а контейнер зупиняється на 1320px — тому на широких моніторах
       фігура їхала все далі вправо й опинялась поза плашкою каналів. max()
       тримає її всередині: до 1320px працює відсоток, далі — відступ від краю
       контейнера. Число мусить збігатися з max-width меню і .hero .wrap. */
    right: max(9.5%, calc((100% - 1320px) / 2 + 34px));
    top: auto;
    bottom: 181px;
    /* Розмір диктує ВИСОТА: кадр тепер портретний (1385×2090), і прив'язка до
       ширини робила фігуру півтора раза вищою за секцію — голова йшла за верхній
       край. aspect-ratio лишає коробку рівною кадру, тож маска завжди лягає на
       саму фігуру, а не в порожнечу під нею. */
    height: min(69%, 650px);
    width: auto;
    aspect-ratio: 1385 / 1463;
    /* Один шар і жодної заглушки під ним: знімок має альфа-канал, фігура вже
       вирізана. Розмита мініатюра, яку я підкладав раніше, світилася крізь цю
       прозорість і читалась як ореол — і обрізалась об край коробки над головою. */
    background-image: url('../images/hero-dancer.webp');
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    /* Тільки нижній перехід. Бічної маски немає: у вирізаної фігури немає тла,
       яке треба було б розчиняти, а маска лише з'їдала б їй руку. */
    -webkit-mask-image: linear-gradient(180deg, #000 72%, rgba(0,0,0,0.45) 90%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, rgba(0,0,0,0.45) 90%, transparent 100%);
    opacity: 0; transition: opacity 1.2s ease 0.15s;
    will-change: transform;
  }
  .hero-dancer.active { opacity: 1; }

  /* Широкий екран: розмір фігури задає ВИСОТА секції, і тільки вона.

     bottom: 118px — плашка каналів притиснута донизу (64px падінга плюс 144px
     її висоти = 208px від низу секції), тож фігура заходить під її верхній край
     рівно на 90px. Раніше цю ж глибину давало значення 181px, бо плашка стояла
     в потоці.

     100% - 218px — стеля зверху: 118px знизу плюс 100px просвіту, щоб голова не
     заходила під пігулку меню (її низ на 91px).

     780px — щоб на дуже великому моніторі фігура не росла нескінченно.

     Тут навмисно НЕМАЄ обмеження у vw. Спершу воно було (46vw) — щоб піднята
     рука не наїжджала на найдовший рядок заголовка. Але від ширини вікна
     залежить лише положення фігури, а не її розмір, тож таке обмеження просто
     зменшувало її при звуженні вікна, хоч сам сайт лишався тієї ж ширини.
     Заміри по альфа-каналу знімка показали, що обмеження й не потрібне: на
     1728px рука і так заходить на рядок на 39px, і саме так композиція й
     задумана — білий жирний заголовок лягає на темне волосся. На 1200px
     перекриття 83px, на 1101px — 96px, і виглядає це так само. */
  @media (min-width: 1101px){
    .hero-dancer {
      bottom: 118px;
      height: min(100% - 218px, 780px);
    }
  }

  /* Планшет: hero тут високий відносно своєї ширини (текст складається в
     стовпчик), і фігура на 56% ширини не дотягувалась до заголовка — між ними
     зяяла порожнеча. Розмір диктує ширина, тож на цих ширинах вона більша. */
  @media (min-width: 761px) and (max-width: 1100px){
    /* Розмір і прив'язка разом тримають фігуру між двома краями: голова
       зупиняється з запасом під пігулкою меню (та закінчується на 91px, тож
       76% і bottom:181px заводили її верх аж на 11px — вона йшла за меню
       цілком), а низ лишається всередині панелі каналів. */
    .hero-dancer { height: min(65%, 520px); width: auto; right: 1%; bottom: 157px; }
    /* Планшет тримає десктопну композицію (текст ліворуч, фігура праворуч), але
       нижчу: padding, кегль заголовка й міра підзаголовка стиснуті так, щоб
       колонка тексту не заходила фігурі на руку. Короткий підзаголовок сюди
       підставляє JS — той самий mSub, що й на телефоні. */
    .hero { padding: 132px 0 88px; }
    .hero h1 { font-size: clamp(28px, 4vw, 42px); }
    .hero-sub { max-width: 32ch; margin-bottom: 34px; }
    .hero-photo { background-position: 65% 58%; }
  }

  /* ---- Мобільна композиція ---- */
  /* Та сама схема, що й на десктопі, зведена на телефон: заголовок на всю
     ширину, під ним ліворуч вузька колонка з поясненням і кнопками, фігура
     праворуч під текстом, панель каналів накриває її по пояс. Порядок кнопок
     тут зворотний до десктопного — зверху "Як це працює", під нею лаймова. */
  @media (max-width: 760px){
    .hero {
      /* 113, а не 126: стрічка фактів має стояти рівно посередині між нижнім
         краєм меню і заголовком. Різницю в 13px віддано її нижньому відступу
         нижче, тож сам заголовок лишається там само, де й був. */
      padding: 113px 0 0;
      text-align: left;
      position: relative;
    }

    /* Знімок → заголовок → фігура → колонка → панель. Фігура лежить ПОВЕРХ
       фігури — її волосся заходить на кілька пікселів на кінці правих рядків.
       Кнопки й панель лишаються над нею, тож вони ніколи не тонуть у знімку. */
    .hero .wrap.hero-top { z-index: 1; }
    .hero .hero-dancer { z-index: 2; }
    .hero .wrap.hero-bottom { z-index: 3; }
    .hero .wrap.hero-panel { z-index: 4; }

    /* .hero на мобільному вищий за екран, а .hero-photo брав height у відсотках
       від нього: cover тягнув кадр під вузьку високу коробку й показував не
       знімок, а стиснуту колонку з усіма прожекторами разом. */
    .hero .hero-photo {
      top: -30px;
      height: 700px;
      background-position: 62% 66%;
    }
    .hero .hero-photo.active { opacity: 0.55; }

    /* Рядки заголовка задає JS окремим набором на кожен канал (mLines): у
       кожного слайда свій розподіл слів і свої зсуви. Тут лише геометрія. */
    .hero .hero-lines {
      font-size: clamp(26px, 8.2vw, 34px);
      font-weight: 600;
      line-height: 1.03;
      letter-spacing: -0.035em;
      margin-bottom: 0;
    }
    .hero .hero-lines > span {
      display: block;
      white-space: nowrap;
    }
    .hero .hero-lines > span::after { content: none; }
    .hero .hero-lines > span.sr { text-align: right; }

    /* Підзаголовок на телефоні — одне коротке речення (mSub у heroContent).
       Довгий текст у вузькій колонці поруч із фігурою і був тим, через що
       композиція розсипалась; одного рядка вистачає, і він не заважає. */
    .hero .hero-sub {
      font-size: 13px; line-height: 1.45;
      color: var(--muted);
      max-width: none; margin: 0;
    }

    /* Ліва колонка: коротке речення одразу під заголовком, на темному тлі, а не
       на руці фігури. Кнопки відсуває вниз їхній власний відступ — спільний
       тягнув би за собою й підзаголовок. */
    .hero .wrap.hero-bottom {
      margin-top: 14px;
      padding-right: 46%;
    }
    .hero .hero-actions { margin-top: 46px; }
    /* column-reverse, а не інший порядок у розмітці: на десктопі лаймова кнопка
       має лишатись першою і за табуляцією, і за читанням. */
    .hero .hero-actions {
      flex-direction: column-reverse; align-items: flex-start;
      gap: 10px; flex-wrap: nowrap;
    }
    .hero .hero-actions .btn-primary,
    .hero .hero-actions .btn-ghost {
      padding: 11px 16px; font-size: 12px;
      max-width: 100%;
      text-align: center; white-space: nowrap;
    }
    .hero .hero-actions .lbl-wide { display: none; }
    .hero .hero-actions .lbl-tight { display: inline; }
    /* Друга кнопка на знімку майже зникала: матове скло й світліша рамка
       відділяють її від фігури позаду. */
    .hero .hero-actions .btn-ghost {
      background: rgba(255,255,255,0.06);
      backdrop-filter: blur(22px) saturate(1.5);
      -webkit-backdrop-filter: blur(22px) saturate(1.5);
      border-color: rgba(255,255,255,0.24);
      color: #fff;
    }
    /* Компактний варіант факт-рядка над заголовком: коротший текст і менший
       кегль — повна версія розтягнулась би на два рядки й тіснила фігуру. */
    .hero .hero-facts {
      /* Дорівнює зазору над стрічкою (113px падінга мінус 91px, на яких
         закінчується меню), тож вона висить рівно між ними. */
      margin-bottom: 22px;
      font-size: 11px;
    }
    .hero .hero-facts .hf-full { display: none; }
    /* Дві явні сходинки замість довільного переносу: перший рядок — послуга й
       ціна, другий — масштаб і географія. */
    .hero .hero-facts .hf-short { display: block; }
    .hero .hero-facts .hf-line { display: block; line-height: 1.5; }

    /* Фігура праворуч і прив'язана до низу: її низ завжди всередині панелі, тож
       між ними не може виникнути розриву на жодній ширині. Коробка рівно за
       пропорцією кадру — інакше маска танула б у порожнечі під ним. */
    .hero .hero-dancer {
      position: absolute;
      right: -24%;
      bottom: 96px;
      top: auto;
      left: auto;
      height: 52%;
      width: auto;
      aspect-ratio: 1385 / 1463;
      background-size: contain;
      background-position: right bottom;
      /* Без розмиття: низ просто плавно згасає, і крізь нього проступає той
         самий нічний фон, у який фігура й має піти. */
      -webkit-mask-image: linear-gradient(180deg, #000 62%, rgba(0,0,0,0.55) 82%, transparent 97%);
      mask-image: linear-gradient(180deg, #000 62%, rgba(0,0,0,0.55) 82%, transparent 97%);
    }

    .hero .wrap.hero-panel { margin-top: 22px; padding-bottom: 20px; }
    /* Тільки тонування, без непрозорої заливки: backdrop-filter з .glass-panel
       лишається чинним, тож скло матове й фігура крізь нього проступає. */
    .hero .hero-strip { background: rgba(10,14,24,0.52); }
    .hero-strip { margin-top: 0; }
  }

  /* Геометрія hero повторює меню. Меню має max-width 1320, відступ 18px від
     країв екрана і 24px падінга плюс 1px рамки всередині — тож текст і кнопки
     стають рівно під логотипом, а панель каналів під зовнішніми краями пігулки.
     width: calc(100% - 36px) відтворює ті самі 18px, коли меню впирається в краї
     екрана. Ту саму формулу має і .wrap на десктопі, тож секції нижче стоять на
     цій же вертикалі. */
  .hero .wrap {
    position: relative; z-index: 2;
    width: calc(100% - 36px);
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: 25px;
  }

  /* Тонше накреслення замість жирного: на ескізі заголовок помітно легший, і
     це працює на бренд — SILENT не має кричати. 500 лишає його твердим, але
     знімає ту вагу, через яку блок виглядав важким. */
  .hero h1 {
    font-size: clamp(30px, 4vw, 50px);
    line-height: 1.12; font-weight: 500;
    letter-spacing: -0.015em;
    margin-bottom: 24px;
  }
  .hero-lines > span { display: block; opacity: 0; animation: rise 0.8s forwards; }
  /* Each of the three headline lines stays on a single row — no internal wrap,
     so "в одному вечорі" never breaks onto a third line. Inner accent spans
     must stay inline (not inherit the block rule) or a word drops to its own line. */
  .hero-lines > span { white-space: nowrap; }
  .hero-lines > span > span { display: inline; white-space: nowrap; }
  /* П'ять кроків, а не три: у мобільному наборі рядків більше, і без цих затримок
     четвертий і п'ятий проявлялись би раніше за перший. */
  .hero-lines span:nth-child(1){ animation-delay: 0.18s; }
  .hero-lines span:nth-child(2){ animation-delay: 0.27s; }
  .hero-lines span:nth-child(3){ animation-delay: 0.36s; }
  .hero-lines span:nth-child(4){ animation-delay: 0.45s; }
  .hero-lines span:nth-child(5){ animation-delay: 0.54s; }
  .accent-lime { color: var(--lime); }
  /* Вузька міра рядка: на ескізі підзаголовок стоїть колонкою в чотири рядки,
     а не тягнеться на пів екрана. */
  .hero-sub {
    font-size: 15.5px; line-height: 1.65; color: var(--muted);
    max-width: 38ch; margin-bottom: 44px; font-weight: 400;
    opacity: 0; animation: rise 0.8s 0.55s forwards;
  }
  .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
    opacity: 0; animation: rise 0.8s 0.68s forwards; }
  /* Короткий факт-рядок над заголовком, замість надзаголовка, що раніше
     мінявся по каналах: ціна й формат одразу, ще до заголовка. Перший у
     черзі появи — та сама роль, що мав старий eyebrow. */
  .hero-facts {
    margin-bottom: 20px;
    font-size: 13px; color: var(--muted-2);
    opacity: 0; animation: rise 0.7s 0.1s forwards;
  }
  .hero-facts b { color: var(--lime); font-weight: 600; }
  .hero-facts .hf-dot { margin: 0 2px; opacity: 0.5; }
  .hero-facts .hf-short { display: none; }
  /* Усі три фрази в DOM завжди — видима лише .active, синхронізовано з
     каналом у updateHeroText(). Поява супроводжується тим самим підйомом, що
     й решта hero: раніше фраза підмінялась різко, і на тлі плавного переходу
     кольору панелі це читалось як збій. inline-block — бо transform на
     справжньому inline не діє. */
  .hero-facts .hf-phrase { display: none; }
  .hero-facts .hf-phrase.active {
    display: inline-block;
    animation: hfSwap 0.5s cubic-bezier(.16,.84,.44,1) both;
  }
  @keyframes hfSwap { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .hero-facts .hf-phrase.active { animation: none; }
  }

  .btn-primary {
    background: var(--lime); color: #12100a;
    padding: 12px 24px; border-radius: 999px;
    font-weight: 600; font-size: 14px;
    box-shadow: 0 0 0 0 transparent, 0 8px 28px -6px var(--lime-glow);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 38px -4px var(--lime-glow); }
  .btn-ghost {
    padding: 12px 22px; border-radius: 999px;
    border: 1px solid var(--line); color: #fff;
    font-weight: 500; font-size: 14px;
    transition: border-color 0.2s, background 0.2s;
  }
  .btn-ghost:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.04); }
  .lbl-tight { display: none; }

  @keyframes rise { from { opacity:0; transform: translateY(24px); } to { opacity:1; transform: none; } }

  /* Channel-driven hero text swap: a two-phase crossfade. On switch the current
     copy first eases up and out (swap-out), then the new copy rises back in
     (swap-in) — softer than replacing text mid-rise. Driven by setChannel(). */
  @keyframes fadeOutUp { from { opacity:1; transform: none; } to { opacity:0; transform: translateY(-14px); } }

  .hero-sub.swap-out,
  .hero-lines > span.swap-out { animation: fadeOutUp 0.32s cubic-bezier(.4,0,.2,1) forwards; }

  .hero-sub.swap-in { animation: rise 0.62s 0.22s cubic-bezier(.16,.84,.44,1) forwards; }
  .hero-lines > span.swap-in { animation: rise 0.6s cubic-bezier(.16,.84,.44,1) forwards; }
  .hero-lines > span.swap-in:nth-child(1){ animation-delay: 0.06s; }
  .hero-lines > span.swap-in:nth-child(2){ animation-delay: 0.13s; }
  .hero-lines > span.swap-in:nth-child(3){ animation-delay: 0.20s; }
  .hero-lines > span.swap-in:nth-child(4){ animation-delay: 0.27s; }
  .hero-lines > span.swap-in:nth-child(5){ animation-delay: 0.34s; }

  .hero-fade {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: clamp(240px, 32vh, 400px);
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(5,7,13,0.28) 34%,
      rgba(5,7,13,0.7) 66%,
      var(--night) 92%,
      var(--night) 100%);
    pointer-events: none;
    z-index: 1;
  }

  .hero-strip {
    position: relative;
    overflow: hidden;
    /* На всю ширину меню: панель виходить за падінг контейнера рівно настільки,
       щоб її краї стали під зовнішніми краями навігаційної пігулки. Висота
       зменшена — раніше вона займала майже чверть екрана. */
    margin-inline: -25px;
    margin-top: 66px;
    border-radius: var(--r-md);
    padding: 22px 26px;
    width: auto;
    opacity: 0; animation: rise 0.8s 0.9s forwards;
  }
  .ch-strip-glow-blob {
    /* Базова коробка фіксована, а рух і розмір задає transform: раніше тут
       анімувались left/width/top/bottom/height — усе це властивості розкладки,
       тож браузер перераховував layout на кожному кадрі переходу, а сам блоб
       фіксувався як джерело зсуву верстки. */
    position: absolute; z-index: 0;
    top: 0; left: 0;
    width: 300px; height: 100%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
      color-mix(in srgb, var(--glow-color, var(--red)) 55%, transparent) 0%,
      color-mix(in srgb, var(--glow-color, var(--red)) 25%, transparent) 40%,
      transparent 72%);
    filter: blur(18px);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    transition: transform 0.55s cubic-bezier(.4,0,.2,1),
                background 0.5s ease, opacity 0.35s ease;
  }
  .ch-strip-glow-blob.on { opacity: 1; }
  /* Проміжок винесено в змінну, бо його потребує не тільки сама сітка: розділювачі
     нижче ставлять себе рівно в його середину, і два незалежні clamp() рано чи
     пізно розійшлися б. */
  .ch-toggle-row {
    position: relative; z-index: 1; display: flex; flex-wrap: nowrap;
    --ch-gap: clamp(16px, 3.4vw, 44px);
    gap: var(--ch-gap);
  }
  .ch-strip-head {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
  }
  .ch-strip-title {
    font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
    font-weight: 700; color: var(--muted-2);
  }
  .ch-mute {
    display: flex; align-items: center; gap: 7px;
    border: 1px solid var(--line); border-top-color: var(--glass-edge);
    background: var(--glass-fill-soft);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--muted);
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
  }
  .ch-mute:hover { border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.06); }
  .ch-mute .ic-mute { display: none; }
  .ch-mute[aria-pressed="true"] .ic-sound { display: none; }
  .ch-mute[aria-pressed="true"] .ic-mute { display: block; }
  .ch-mute[aria-pressed="true"] { border-color: rgba(255,90,90,0.4); color: #ff8a8a; background: rgba(255,60,60,0.08); }
  .ch-toggle {
    position: relative;
    display: flex; flex-direction: column; gap: 10px;
    flex: 1 1 0; min-width: 0;
    /* No side padding: the rows must line up with the panel header above them,
       so their content sits flush against the strip's own padding. Nothing is
       painted on this box, and clipping it would cut the halo that the channel
       name (text-shadow) and the active switch (box-shadow) cast outwards —
       which the side padding used to leave room for. */
    padding: 8px 0;
  }
  /* Волосяний розділювач між каналами. Стоїть рівно посередині проміжку сітки
     і не доходить до країв колонки: 8px повітря згори й знизу лишають кожен
     канал окремою коміркою, а не шматком суцільної смуги.

     Градієнт, а не суцільний колір: лінія народжується з прозорості й у неї ж
     згасає, тож на скляній панелі читається як відблиск, а не як накреслена
     риска. Так само поводяться інші межі в системі.

     Тільки від 761px — це межа десктопної версії на всьому сайті. Нижче панель
     переходить у компактну розкладку з проміжком 6px, де лінії ні до чого. */
  @media (min-width: 761px){
    .ch-toggle + .ch-toggle::before {
      content: '';
      position: absolute; z-index: 1;
      left: calc(var(--ch-gap) / -2);
      transform: translateX(-50%);
      top: 8px; bottom: 8px;
      width: 1px;
      background: linear-gradient(180deg,
        transparent 0,
        rgba(255,255,255,0.22) 24%,
        rgba(255,255,255,0.22) 76%,
        transparent 100%);
      pointer-events: none;
    }
  }
  .ch-toggle-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .ch-toggle-label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .ch-toggle-name {
    font-family: 'Unbounded'; font-weight: 800; font-size: 20px;
    letter-spacing: 0.04em; line-height: 1;
    text-shadow: 0 0 0 transparent; transition: text-shadow 0.35s ease;
  }
  .ch-toggle.active .ch-toggle-name { text-shadow: 0 0 18px currentColor; }
  .ch-toggle-desc { font-size: 11.5px; color: var(--muted-2); line-height: 1.35; }
  .ch-switch {
    position: relative; width: 46px; height: 26px; border-radius: 999px;
    border: none; cursor: pointer; flex-shrink: 0;
    background: rgba(255,255,255,0.12);
    transition: background 0.3s ease;
  }
  .ch-switch-knob {
    position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: transform 0.3s cubic-bezier(.4,0,.2,1), background 0.3s ease;
  }
  .ch-toggle.active .ch-switch { background: var(--sw-color); box-shadow: 0 0 12px 0 var(--sw-color); }
  .ch-toggle.active .ch-switch-knob { transform: translateX(20px); }
  /* Заглушений вручну канал показує тумблер вимкненим: клікнути «вимкнути» і
     далі бачити його увімкненим — суперечність. Вибір каналу при цьому не
     губиться, лише гасне його підсвітка. */
  .hero-strip.is-silent .ch-toggle.active .ch-switch { background: rgba(255,255,255,0.12); box-shadow: none; }
  .hero-strip.is-silent .ch-toggle.active .ch-switch-knob { transform: none; }
  .hero-strip.is-silent .ch-toggle.active .ch-toggle-name { text-shadow: 0 0 0 transparent; }

  .ch-outline-eq {
    position: absolute; z-index: 1; bottom: 2px; left: 0;
    /* Крок фіксований, а стовпчиків із запасом: зайві обрізає overflow. Так
       ритм лишається однаковим на будь-якій ширині, а смуга завжди доходить від
       початку назви каналу до кінця його перемикача. При space-between вони
       натомість збивалися в лівий бік і не діставали до краю. */
    display: flex; align-items: flex-end; justify-content: flex-start; gap: 9px;
    height: 18px; width: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0; pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
    transition: left 0.5s cubic-bezier(.4,0,.2,1), width 0.5s cubic-bezier(.4,0,.2,1),
                bottom 0.5s cubic-bezier(.4,0,.2,1), opacity 0.3s ease;
  }
  .ch-outline-eq.on { opacity: 0.8; }
  .ch-outline-eq span {
    flex: 0 0 3px; border-radius: 1.5px 1.5px 0 0;
    background: var(--glow-color, var(--red));
    height: 10%;
    animation-play-state: running;
  }
  .ch-outline-eq span:nth-child(8n+1){ animation: miniEqBar1 0.8s ease-in-out infinite; animation-delay: 0s; }
  .ch-outline-eq span:nth-child(8n+2){ animation: miniEqBar2 1.3s ease-in-out infinite; animation-delay: 0.18s; }
  .ch-outline-eq span:nth-child(8n+3){ animation: miniEqBar3 0.65s ease-in-out infinite; animation-delay: 0.35s; }
  .ch-outline-eq span:nth-child(8n+4){ animation: miniEqBar1 1.1s ease-in-out infinite; animation-delay: 0.05s; }
  .ch-outline-eq span:nth-child(8n+5){ animation: miniEqBar2 0.75s ease-in-out infinite; animation-delay: 0.42s; }
  .ch-outline-eq span:nth-child(8n+6){ animation: miniEqBar3 1.4s ease-in-out infinite; animation-delay: 0.1s; }
  .ch-outline-eq span:nth-child(8n+7){ animation: miniEqBar1 0.55s ease-in-out infinite; animation-delay: 0.28s; }
  .ch-outline-eq span:nth-child(8n){ animation: miniEqBar2 1s ease-in-out infinite; animation-delay: 0.5s; }
  .ch-outline-eq span:nth-child(8n+9){ animation: miniEqBar3 0.9s ease-in-out infinite; animation-delay: 0.15s; }
  .ch-outline-eq span:nth-child(10){ animation: miniEqBar1 1.2s ease-in-out infinite; animation-delay: 0.38s; }
  .ch-outline-eq span:nth-child(11){ animation: miniEqBar2 0.7s ease-in-out infinite; animation-delay: 0.02s; }
  .ch-outline-eq span:nth-child(12){ animation: miniEqBar3 1.05s ease-in-out infinite; animation-delay: 0.22s; }
  .ch-outline-eq span:nth-child(13){ animation: miniEqBar1 0.95s ease-in-out infinite; animation-delay: 0.12s; }
  .ch-outline-eq span:nth-child(14){ animation: miniEqBar2 0.6s ease-in-out infinite; animation-delay: 0.45s; }
  .ch-outline-eq span:nth-child(15){ animation: miniEqBar3 1.25s ease-in-out infinite; animation-delay: 0.03s; }
  .ch-outline-eq span:nth-child(16){ animation: miniEqBar1 0.7s ease-in-out infinite; animation-delay: 0.33s; }
  .ch-outline-eq span:nth-child(17){ animation: miniEqBar2 1.15s ease-in-out infinite; animation-delay: 0.2s; }
  .ch-outline-eq span:nth-child(18){ animation: miniEqBar3 0.85s ease-in-out infinite; animation-delay: 0.4s; }@keyframes miniEqBar1 {
    0%   { height: 10%; }
    30%  { height: 85%; }
    55%  { height: 25%; }
    80%  { height: 65%; }
    100% { height: 10%; }
  }
  @keyframes miniEqBar2 {
    0%   { height: 15%; }
    25%  { height: 45%; }
    50%  { height: 95%; }
    75%  { height: 30%; }
    100% { height: 15%; }
  }
  @keyframes miniEqBar3 {
    0%   { height: 8%; }
    40%  { height: 70%; }
    60%  { height: 20%; }
    90%  { height: 55%; }
    100% { height: 8%; }
  }
  .ch-toggle-top { position: relative; z-index: 1; }
  @media (max-width: 640px){
    /* Три канали в ряд, а не стовпчиком: у стовпчику панель займала пів екрана.
       Перемикач переїжджає під назву, жанровий опис прибраний — на такій ширині
       він однаково переносився на три рядки й з'їдав усе місце. Що саме грає на
       кожному каналі, пояснює текст вище. */
    .ch-toggle-row { flex-direction: row; gap: 6px; }
    .ch-toggle {
      flex: 1 1 0; min-width: 0;
      align-items: center; text-align: center;
      padding: 6px 0; gap: 10px;
    }
    .ch-toggle-top { flex-direction: column; align-items: center; gap: 10px; }
    .ch-toggle-label { align-items: center; }
    .ch-toggle-name { font-size: 16px; }
    .ch-toggle-desc { display: none; }
    /* Headline lines are nowrap on desktop so each stays on its own row. On a
       phone a single line could end up wider than the screen, and because .hero
       is a flex column that stretched .wrap past the viewport — dragging the
       channel panel off-canvas with it. Let the lines wrap here instead. */
    .hero-lines > span, .hero-lines > span > span { white-space: normal; }
    .hero-lines > span { overflow-wrap: break-word; }
    .hero .wrap { min-width: 0; }
    /* max-width не має обрізати від'ємні поля, якими панель дотягується до
       країв меню */
    .hero-strip { max-width: none; }
  }

  /* ---------- ТЕЛЕФОН У ГОРИЗОНТАЛЬНІЙ ОРІЄНТАЦІЇ ----------
     iPhone 14 Pro у горизонталі дає 734×360: 852 мінус вирізи під «острівець» з
     обох боків, і втричі нижче за вертикальний екран. Форма, під яку не був
     розрахований жоден інший брейкпоінт.

     Композиція тут своя: текст ліворуч, фігура праворуч на всю висоту кадру —
     ближче до десктопної, ніж до вертикальної. Мобільна розкладка сюди не
     годиться з двох причин.

     Рядки заголовка. На телефоні їх будує JS окремим набором (mLines): чотири-
     п'ять коротких рядків зі зсувами, журнальна композиція під колонку
     завширшки з екран. У горизонталі вона давала вузький стовпчик тексту при
     порожній половині екрана, а зсунутий рядок відлітав до правого краю
     самотнім уламком. Тому heroNarrow у JS тепер вимагає ще й min-height: 481px,
     і сюди приходять десктопні три рядки — рівно те, що треба широкому кадру.

     Прив'язка фігури. Вертикальна розкладка ставить її від низу секції, а секція
     тут утричі вища за екран — фігура опинялась глибоко під згином, у правому
     нижньому кутку. Тут вона прив'язана до ВЕРХУ: стоїть одразу під меню й
     повністю в першому кадрі, а її власна нижня маска гасить низ.

     Блок стоїть після мобільного (≤760) і планшетного (761–1100) — обидва
     перекриваються ним на цих розмірах.

     Межі: max-width 900 закриває найширший телефон (Pro Max дає 814), а
     max-height 480 з orientation відсікає планшети й звичайні вікна. */
  @media (max-width: 900px) and (max-height: 480px) and (orientation: landscape){
    .hero { padding: 108px 0 24px; }

    /* Колонка тексту — до 500px, але не ширша за 68vw: на 667px (iPhone SE)
       фіксовані 500 залізли б фігурі на руку. */
    .hero .wrap.hero-top > *,
    .hero .wrap.hero-bottom > * { max-width: min(500px, 68vw); }

    /* Компактний двоступеневий факт-рядок, той самий, що на телефоні: повна
       версія на цих ширинах переносилась некрасивим хвостом. */
    .hero .hero-facts { margin-bottom: 10px; font-size: 11px; }
    .hero .hero-facts .hf-full { display: none; }
    .hero .hero-facts .hf-short { display: block; }
    .hero .hero-facts .hf-line { display: block; line-height: 1.5; }

    /* 24px: три рядки складаються у 74px замість 175px мобільного набору, і від
       меню до кнопок усе вкладається в екран заввишки 320px. */
    .hero .hero-lines { font-size: 24px; line-height: 1.03; letter-spacing: -0.03em; }

    .hero .wrap.hero-bottom { margin-top: 8px; padding-right: 0; }
    .hero .hero-sub { margin-bottom: 0; font-size: 13px; }

    /* Кнопки в рядок і в компактних підписах. Друге — не косметика: без нього на
       801–900px бралися десктопні підписи, і пара кнопок ставала на 5px вища,
       чого на 360px екрана вже бракувало. */
    .hero .hero-actions { margin-top: 14px; flex-direction: row; align-items: center; gap: 10px; }
    .hero .hero-actions .btn-primary,
    .hero .hero-actions .btn-ghost { padding: 11px 16px; font-size: 12px; white-space: nowrap; }
    .hero .hero-actions .lbl-wide { display: none; }
    .hero .hero-actions .lbl-tight { display: inline; }

    /* Від верху, а не від низу секції — див. коментар вище. Висота обмежена і
       відсотком, і шириною екрана: без другої величини на 667px фігура наповзала
       на текст. */
    .hero .hero-dancer {
      top: 108px; bottom: auto; right: -2%;
      height: min(300px, 42vw);
    }

    .hero .wrap.hero-panel { margin-top: 18px; }
  }

  /* ---------- GENERIC SECTION ---------- */
  .block { padding: var(--sec-pad) 0; }
  @media (max-width: 640px){ :root { --sec-pad: 56px; } }
  .eyebrow {
    font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--ch); font-weight: 700; margin-bottom: 18px;
    transition: color 0.6s ease;
  }
  .h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.15; font-weight: 700; margin-bottom: 16px; text-wrap: balance; }
  .section-lead { font-size: 17px; color: var(--muted); max-width: none; text-wrap: pretty; }

  /* problem→shift */
  .shift-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 64px; }
  @media (max-width: 760px){ .shift-grid { grid-template-columns: 1fr; } }
  /* Картка ділиться надвоє: кадр угорі, підписи під ним. Падінга в самої картки
     немає — інакше знімок не дійшов би до країв. */
  .shift-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line); border-top-color: var(--glass-edge);
    border-radius: var(--r-md);
    background: var(--glass-fill-1);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow-1), inset 0 1px 0 rgba(255,255,255,0.07);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  }
  .shift-photo {
    position: relative;
    aspect-ratio: 1180 / 620;
  }
  .shift-photo img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    /* Низ кадру розчиняється, а не обрізається лінією: маска робить його
       прозорим, тож крізь нього проступає тло самої картки й знімок переходить
       у підписи без шва. */
    -webkit-mask-image: linear-gradient(180deg, #000 52%, rgba(0,0,0,0.55) 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 52%, rgba(0,0,0,0.55) 78%, transparent 100%);
  }
  /* Підписи піднімаються під саме фото: там воно вже прозоре, тож текст лягає
     на тло картки, а не на знімок. */
  .shift-body { position: relative; padding: 0 30px 30px; margin-top: -46px; }
  .shift-card .tag { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin-bottom: 14px; }
  .shift-card.old .tag { color: var(--muted-2); }
  .shift-card.new .tag { color: var(--lime); }
  .shift-card h3 { font-size: 21px; font-weight: 600; margin-bottom: 12px; line-height: 1.15; }
  .shift-card p { color: var(--muted); font-size: 14.5px; }
  .shift-card.new { border-color: rgba(198,255,0,0.28); box-shadow: 0 0 32px -18px var(--lime-glow); }

  /* value stack */
  /* ---------- ЩО ВХОДИТЬ ---------- */
  /* Широкі плашки, що находять одна на одну: кожна наступна лягає поверх
     попередньої й трохи перекриває її низ. Не список і не сітка карток —
     одна стопка, яку читаєш зверху вниз за цифрами. */
  /* Запас під виїзд активної плашки: остання зсувається вниз і без нього
     налізала б на підпис під стопкою. Мобільний зсув більший, тож і запас теж.
     Обидва правила стоять тут разом, щоб медіазапит гарантовано йшов останнім. */
  .slabs { margin-top: 46px; padding-bottom: 30px; }
  @media (max-width: 760px){ .slabs { padding-bottom: 56px; } }
  .slab {
    position: relative;
    z-index: calc(var(--i) + 1);        /* наступна поверх попередньої */
    margin-top: -34px;   /* перекриття помітне, але з'їдає лише падінг сусідньої */
    display: grid;
    grid-template-columns: auto 1fr auto;
    /* Не center: у «Обладнання» опис в один рядок, у решти — у два, і при
       центруванні кожен блок сідав на свою висоту, тож заголовки не збігались
       між плашками. Від верху вони вирівняні однаково завжди. */
    align-items: start;
    gap: 30px;
    padding: 30px 32px;
    border: 1px solid var(--line); border-top-color: var(--glass-edge);
    border-radius: var(--r-md);
    background: var(--glass-fill-dark);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow-2), 0 22px 50px -30px rgba(0,0,0,0.95);
    /* довший і м'якший перехід: підсвітка переповзає між плашками, а не клацає */
    transition: transform 0.55s cubic-bezier(.22,1,.36,1),
                border-color 0.55s cubic-bezier(.22,1,.36,1),
                box-shadow 0.55s cubic-bezier(.22,1,.36,1),
                background 0.55s cubic-bezier(.22,1,.36,1);
  }
  .slab:first-child { margin-top: 0; }
  /* Розчиняється не лише текст, а й сам матеріал: маска гасить нижній край
     плашки разом із тлом, рамкою й тінню, тож картка не має чіткого низу — вона
     сходить у темряву рівно там, де на неї лягає наступна. */
  .slab:not(:last-child) {
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 56px), rgba(0,0,0,0.5) calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 calc(100% - 56px), rgba(0,0,0,0.5) calc(100% - 20px), transparent 100%);
  }
  /* Маска при наведенні НЕ змінюється — і саме тому рух став плавним. Раніше
     активна плашка отримувала іншу маску (з іншою кількістю зупинок градієнта),
     а такі маски браузер не інтерполює: вона підмінялась миттєво, і картка
     смикалась. Плавно піднімалась лише п'ята — у неї маски немає взагалі.
     Тепер «трохи прихований край» дає сама постійна маска, а весь рух —
     transform і прозорість затемнення, які анімуються надійно. */
  /* Низ плашки йде в темряву — рівно там, де на неї лягає наступна. У останньої
     цього немає: її ніщо не перекриває. */
  .slab:not(:last-child)::after {
    content: ''; position: absolute; inset: 0;
    pointer-events: none; z-index: 2;
    border-radius: var(--r-md);
    background: linear-gradient(180deg,
      transparent 18%, rgba(3,5,9,0.26) 42%, rgba(3,5,9,0.68) 71%, rgba(3,5,9,0.94) 100%);
    transition: opacity 0.6s cubic-bezier(.22,1,.36,1);
  }
  /* активна плашка виходить із темряви — і опис стає читабельним повністю */
  /* Затемнення не гасне повністю: плашка світлішає, але лишається в тіні. */
  .slab:hover::after, .slab:focus-within::after, .slab.is-lit::after { opacity: 0.34; }

  /* цифра намальована обведенням, тож на темному тлі вона читається як контур,
     а при наведенні заливається лаймом */
  .slab-num {
    font-family: 'Unbounded', sans-serif;
    font-size: 78px; font-weight: 800; line-height: 0.78;
    /* Рівна ширина цифр. «01» вужче за «02»: одиниця тонка, і колонка з цифрою
       виходила на 20px вужчою — через це заголовок у першій плашці стояв ближче
       до цифри, ніж у решти. З tabular-nums усі номери однакової ширини. */
    font-variant-numeric: tabular-nums;
    /* Верх цифри рівняємо з верхом заголовка. Геометричні краї елементів для
       цього не годяться: у великого кегля з line-height 0.78 гліф займає майже
       всю коробку, а в заголовка над літерами лишається піврядка інтерліньяжу.
       Виміряно по фактичних чорнилах: заголовок нижчий на 15.4px. */
    margin-top: 7px;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255,255,255,0.26);
    transition: -webkit-text-stroke-color 0.55s cubic-bezier(.22,1,.36,1), color 0.55s cubic-bezier(.22,1,.36,1);
    user-select: none;
  }
  /* Текст лежить над затемненням: темніє поверхня плашки, а не написи на ній —
     інакше бейдж унизу (а на телефоні він найнижчий) ішов би в темряву разом
     із фоном і переставав читатись. */
  .slab-num, .slab-body, .slab-meta { position: relative; z-index: 1; }
  .slab-body h3 { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
  /* Місце під два рядки резервуємо завжди: з прихованим описом плашки інакше
     мали б різну висоту без видимої причини. */
  .slab-body p { color: var(--muted); font-size: 14.5px; line-height: 1.5; max-width: 62ch; min-height: 44px; }
  .slab-meta {
    align-self: center;
    white-space: nowrap;
    font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--muted-2);
    border: 1px solid var(--line); border-radius: 999px;
    padding: 7px 14px;
    transition: color 0.55s cubic-bezier(.22,1,.36,1), border-color 0.55s cubic-bezier(.22,1,.36,1);
  }

  .slab:hover, .slab:focus-within, .slab.is-lit {
    z-index: 20;
    transform: translateY(-16px);
    border-color: rgba(198,255,0,0.45);
    background:
      radial-gradient(90% 160% at 6% 50%, rgba(198,255,0,0.20), rgba(198,255,0,0.05) 48%, transparent 78%),
      var(--glass-fill-dark);
    box-shadow: var(--glass-shadow-2), 0 0 70px -28px rgba(198,255,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .slab:hover .slab-num, .slab:focus-within .slab-num, .slab.is-lit .slab-num { -webkit-text-stroke-color: var(--lime); color: rgba(198,255,0,0.14); }
  .slab:hover .slab-meta, .slab:focus-within .slab-meta, .slab.is-lit .slab-meta { color: var(--lime); border-color: rgba(198,255,0,0.45); }

  /* Наступні плашки відступають рівно настільки, щоб активна встигла вилізти зі
     свого гнізда. Transform, а не margin: розкладка не перераховується, і
     сторінка не смикається. Перехід успадковується від .slab. */
  .slab:hover ~ .slab,
  .slab:focus-within ~ .slab,
  .slab.is-lit ~ .slab { transform: translateY(22px); }

  .slabs-foot { margin-top: 18px; font-size: 13px; color: var(--muted-2); }

  @media (max-width: 760px){
    .slab {
      /* Перша колонка фіксованої ширини: у ній і цифра, і підпис, а підписи
         різної довжини («у базовій ціні» / «за бажанням»). При auto колонка
         міряла б себе по вмісту й заголовок стартував би з різного місця. */
      grid-template-columns: 96px 1fr;
      grid-template-rows: auto auto;
      align-items: start;
      gap: 0 14px;
      padding: 20px 18px 24px;
      /* Перекриття більше за відстань від краю картки до заголовка (27px), тож
         під наступну плашку йде нижній падінг і приблизно останній рядок опису.
         Там і так затемнення 94%, тож візуально втрата мала — але текст справді
         недоступний. Свідомий розмін заради компактності стопки. */
      margin-top: -48px;
      border-radius: var(--r-md);
    }
    .slab-num { grid-column: 1; grid-row: 1; font-size: 48px; margin-top: 5px; }
    /* Активна плашка виходить наверх — але тоді вона накрила б заголовок
       наступної. Тому наступні одночасно відсуваються рівно на перекриття:
       transform, а не margin, тож нічого не перераховується й нічого не смикає
       сторінку. Перехід успадковується від .slab, тож стопка «розкривається». */
    .slab.is-lit { z-index: 30; }
    .slab.is-lit ~ .slab { transform: translateY(48px); }
    /* Підпис — під цифру, а не під опис: унизу його накривала б наступна плашка. */
    .slab-meta {
      grid-column: 1; grid-row: 2;
      justify-self: start; align-self: start;
      margin: 12px 0 0;
      padding: 4px 8px; font-size: 9px; letter-spacing: 0.6px;
    }
    .slab-body { grid-column: 2; grid-row: 1 / span 2; }
    .slab-body h3 { font-size: 17.5px; }
    .slab-body p { font-size: 13.5px; min-height: 0; }
  }

  /* how it works steps */
  /* Панелі-обгортки більше немає: чотири кроки стоять скляними картками, як
     і решта карток на сайті. Веселковий неоновий кант, який був у неї знизу,
     не повторювався ніде більше й вибивався з концепції; кольори каналів на
     кроках процесу теж нічого не означали — черговість несе номер. */
  /* Три елементи, два рядки: eyebrow сам по собі згори, а заголовок і текст —
     поруч в одному рядку. Тому текст починається на рівні заголовка, а не
     піднімається до надпису над ним. Картки йдуть окремим рядом під ними. */
  .how-head {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 14px 52px;
    align-items: start;
    margin-top: 4px;
  }
  .how-head .eyebrow { grid-column: 1; grid-row: 1; }
  .how-head .h2 { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .how-lead { grid-column: 2; grid-row: 2; color: var(--muted); font-size: 15px; line-height: 1.65; }

  /* Дві на дві. Іконка не лежить усередині картки — картка має справжній виріз
     під неї: маска з radial-gradient робить у верхньому краї півколо прозорим,
     тож там видно тло сторінки, а не підроблений кружечок кольору фону.
     Саме тому іконка — СУСІД картки, а не її нащадок: маска діє на все піддерево,
     і всередині вона б стерлася разом із вирізом. */
  /* Дві на дві. Іконка не лежить усередині картки — картка має справжній виріз
     під неї у верхньому правому куті: маска з radial-gradient робить там півколо
     прозорим, тож видно тло сторінки, а не підроблений кружечок кольору фону. */
  .flow {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 60px 18px;
    margin-top: 92px;
  }
  .flow-step { position: relative; }
  .flow-card {
    position: relative;
    padding: 34px 26px 30px;
    isolation: isolate;
  }
  /* Замість скляної поверхні — неонова обводка того краю, на якому стоять
     іконки: верх картки, обидва заокруглені кути, хвости згасають донизу.
     Той самий мотив, що й на десктопі та телефоні, тільки там лінія одна на
     весь ряд, а тут — своя в кожної з чотирьох карток.

     inset зверху на -0.75px: бордюр малюється всередину коробки, тож без цього
     зсуву середина лінії не збіглася б із центром кружечків.

     Радіус --r-lg, а не --r-md картки: дуга в кутах — частина самого мотиву, і
     на всіх трьох ширинах вона має бути та сама. */
  .flow-card::before {
    content: ''; position: absolute; inset: -0.75px 0 0; z-index: -1;
    border-radius: var(--r-lg);
    border: 1.5px solid var(--lime);
    box-shadow: 0 0 18px rgba(198,255,0,0.45), inset 0 0 14px rgba(198,255,0,0.22);
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 34px, transparent 138px);
    mask-image: linear-gradient(180deg, #000 0, #000 34px, transparent 138px);
  }
  /* Центр іконки — рівно на лінії: половина кружечка над нею, половина під.

     Друга тінь — кільце кольору тла, воно й дає 7px просвіту між лінією та
     краєм кружечка. Стоїть після світіння, щоб те лягало поверх кільця і
     просвіт лишався з лаймовим підсвітом, а не чорною дірою. Під блоком тло
     рівне (--night від body, жодних підкладок), тож саме кільце непомітне.
     Значення світіння повторюються в обох станах: box-shadow не доповнюється,
     а замінюється цілком. */
  .flow-node {
    position: absolute; z-index: 2;
    right: 39px; top: -39px;
    width: 78px; height: 78px; border-radius: 50%;
    display: grid; place-items: center;
    color: var(--lime);
    border: 1px solid rgba(198,255,0,0.34);
    background: var(--night);
    box-shadow:
      0 0 30px -10px rgba(198,255,0,0.55),
      0 0 0 7px var(--night),
      inset 0 0 18px -10px rgba(198,255,0,0.5);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
  /* Без translateY: кружечок стоїть серединою на лінії й від зсуву відривався
     б від неї. Лишається саме світіння. */
  .flow-step:hover .flow-node,
  .flow-step.is-lit .flow-node {
    border-color: rgba(198,255,0,0.65);
    box-shadow:
      0 0 40px -8px rgba(198,255,0,0.7),
      0 0 0 7px var(--night),
      inset 0 0 18px -8px rgba(198,255,0,0.6);
  }
  /* Номер стоїть перед назвою кроку одним рядком; до заголовка — виразний
     відступ, щоб черговість читалась окремим ярусом. */
  .flow-chip {
    display: flex; align-items: baseline; gap: 9px;
    font-family:'Unbounded'; font-weight: 600; font-size: 9px;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 16px;
  }
  .flow-chip b {
    color: var(--lime); font-size: 15px; font-weight: 800;
    letter-spacing: 0.5px; font-variant-numeric: tabular-nums;
  }
  .flow-step h3 { font-size: 16px; font-weight: 700; line-height: 1.3; margin-bottom: 9px; }

  @media (max-width: 1040px){
    .flow { grid-template-columns: 1fr 1fr; gap: 60px 20px; }
  }
  @media (max-width: 620px){
    .flow { grid-template-columns: 1fr; gap: 58px; }
  }

  /* ---------- ЕТАПИ ОДНІЄЮ СТРІЧКОЮ ----------
     Замість чотирьох скляних карток — сама лише світна лінія, що малює той край,
     де раніше проходила межа фрейма. Іконки стоять серединою рівно на ній.

     Лінія — це рамка з маскою, а не смужка. Так border-radius сам малює обидва
     кути, а маска лишає видимим тільки той бік, уздовж якого стоять іконки, і
     розчиняє хвости, що йдуть від кутів. Дуги, накреслені градієнтом вручну, не
     збігалися б із радіусом решти інтерфейсу.

     Текст, його оформлення та самі іконки не змінюються — тільки контейнер.

     Планшетна смуга (621–1040px) сюди не входить: там сітка 2×2, і одна лінія
     мусила б петляти між рядами. Мотив там той самий, але поштучний — обводка
     краю в кожної з чотирьох карток (базове правило .flow-card::before вище).

     Крізь іконки лінія не проходить: кружечки залиті var(--night) і стоять на
     z-index вище за неї, тож вона впирається в їхній край і виходить з іншого
     боку. Просвіт задає кільце в box-shadow іконки. */
  @media (min-width: 1041px), (max-width: 620px){
    .flow {
      position: relative;
      isolation: isolate;
      gap: 0;
    }
    /* Тут лінія одна на весь ряд, тож поштучна обводка карток не потрібна. */
    .flow-card::before { display: none; }
    .flow::before {
      content: '';
      position: absolute;
      pointer-events: none;
      border-radius: var(--r-lg);
      z-index: 1;
      border: 1.5px solid var(--lime);
      box-shadow: 0 0 18px rgba(198,255,0,0.45), inset 0 0 14px rgba(198,255,0,0.22);
    }
  }

  /* Десктоп: лінія — верхній край, скло тане вниз.
     Рамку піднято на пів товщини (0.75px), щоб її середина збіглася з центром
     іконок: бордюр малюється всередину коробки, а не по її межі. */
  @media (min-width: 1041px){
    .flow { padding: 0; }
    .flow-step { padding: 0 26px; }
    /* 58px — низ іконки на 39px під лінією плюс просвіт до першого рядка. */
    .flow-card { padding: 58px 0 0; }
    .flow::before {
      inset: -0.75px 0 0;
      -webkit-mask-image: linear-gradient(180deg, #000 0, #000 34px, transparent 138px);
      mask-image: linear-gradient(180deg, #000 0, #000 34px, transparent 138px);
    }
  }

  /* Телефон: той самий край, тільки правий. Іконка переїжджає у власну колонку
     і стає серединою на лінію, тому рамка відступає від правого краю на 39px —
     на половину кружечка, інакше він вилазив би за екран. Скло відповідно тане
     не вниз, а вліво, у протилежний від лінії бік. */
  @media (max-width: 620px){
    .flow {
      grid-template-columns: 1fr;
      /* Ліворуч 22px — рівно той відступ, який мають тексти всередині карток у
         наступних блоках (.benefit-card має padding 26px 22px). Так колонка
         кроків стає з ними на одну вертикаль, а не з краєм контейнера.

         Праворуч -10px — різниця між падінгом .wrap (28px) і відступом меню від
         краю екрана (18px). Стрічка виходить із контейнера рівно настільки, щоб
         зовнішній край кружечка став на лінію меню. Обидва відступи фіксовані,
         тож різниця не залежить від ширини екрана.

         Лінію це не зачіпає: вона абсолютна, а отже рахується від padding-box
         секції, на який padding-left не впливає. Зсув їй дає тільки від'ємне
         поле — рівно стільки ж, скільки й кружечкам, тож вони лишаються
         суміщеними. */
      padding: 0 0 0 22px;
      margin: 72px -10px 0 0;
    }
    .flow-step {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 78px;
      align-items: center;
      gap: 0 20px;
      padding: 26px 0;
    }
    .flow-card { grid-column: 1; grid-row: 1; padding: 0; }
    .flow-node { position: static; grid-column: 2; grid-row: 1; }
    .flow::before {
      top: 0; bottom: 0; left: 0; right: 38.25px;
      -webkit-mask-image: linear-gradient(270deg, #000 0, #000 34px, transparent 156px);
      mask-image: linear-gradient(270deg, #000 0, #000 34px, transparent 156px);
    }
  }

  @media (max-width: 900px){
    .how-head { grid-template-columns: 1fr; gap: 16px; }
    .how-head .eyebrow, .how-head .h2, .how-lead { grid-column: 1; grid-row: auto; }
  }

  .step-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }
  .step-list li {
    display: grid; grid-template-columns: 11px 1fr; align-items: start; gap: 9px;
    font-size: 13px; color: var(--muted); line-height: 1.45;
  }
  /* Галочка сидить на першому рядку тексту: у сітці вона більше не тягнеться
     по висоті пункту й не висить окремо, коли текст переноситься. */
  .step-list svg { color: var(--lime); opacity: 0.85; margin-top: 5px; }

  /* guarantee band */
  .band {
    /* Блок гарантії лежить у секції БЕЗ .wrap, тож ширину він задає собі сам.
       Історично це було max-width: 1120px — тобто ЗОВНІШНЯ коробка .wrap, а не
       колонка тексту всередині неї: панель навмисно виступає на ширину падінга
       контейнера з обох боків.

       Тому тут повторено формулу .wrap без його падінга. Прибрати обмеження
       зовсім не можна — тоді панель розтягується на весь монітор. */
    margin: 0 auto; max-width: 1120px;
    border-radius: var(--r-lg);
    background: radial-gradient(circle at 30% 0%, rgba(198,255,0,0.08), transparent 60%), var(--glass);
    border: 1px solid rgba(198,255,0,0.25);
    box-shadow: 0 0 60px -20px rgba(198,255,0,0.15);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding: 54px 48px;
    text-align: center;
    transition: border-color 0.8s ease;
  }
  /* Та сама межа, що й у .wrap на десктопі, тільки без його падінга: панель
     лишається рівно на зовнішній коробці контейнера, як була до розширення. */
  @media (min-width: 1000px){
    .band { width: calc(100% - 36px); max-width: 1320px; }
  }
  /* Same centred typography as the guarantee band, without its panel. */
  .band-bare {
    background: none; border: none; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 0;
  }
  .band-bare h2 { margin-bottom: 0; }
  .band .g-tag { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; opacity: 0.85; font-weight: 700; margin-bottom: 18px; color: var(--lime); }
  .band h2 { font-size: clamp(24px, 3.6vw, 38px); font-weight: 600; line-height: 1.15; max-width: none; margin: 0 auto 16px; color: #fff; text-wrap: balance; }
  .band p { font-size: 15px; color: var(--muted); max-width: 46ch; margin: 0 auto; }

  /* ---------- GALLERY ---------- */
  .gallery { padding: var(--sec-pad) 0; }

  /* Стрічка атмосфери: мозаїка у два ряди, що гортається вбік. Ритм у ній —
     вертикаль, потім блок із двох кадрів один над одним, знову вертикаль:
     V HH V SS V HH V SS … Тож ні дві вертикалі, ні два однакові блоки ніде не
     стоять поруч, а кожен блок закриває обидва рядки — дірок не лишається, і
     dense-упаковці нема чого переставляти.
     Кадри під ці три пропорції ріже скрипт складання, а не браузер: у кожного
     своя точка кадрування по горизонталі й вертикалі, підібрана під те, що в
     кадрі головне. Через це object-fit тут уже нічого не обрізає — саме тому
     герої не виїжджають за край, як було, коли вертикальні знімки підганялись
     під горизонтальну коробку. */
  .gallery-strip {
    position: relative; margin-top: 40px;
    --g-col: 300px; --g-row: 235px; --g-gap: 14px;
  }
  .gallery-grid {
    display: grid;
    grid-auto-flow: column dense;
    grid-template-rows: repeat(2, var(--g-row));
    grid-auto-columns: var(--g-col);
    gap: var(--g-gap);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior: auto;
    touch-action: pan-x pan-y;
    scroll-behavior: auto;
    padding: 4px 2px 16px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 58px, #000 calc(100% - 58px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 58px, #000 calc(100% - 58px), transparent 100%);
  }
  .gallery-grid::-webkit-scrollbar { display: none; }
  /* Три форми плитки. Пропорції, які з них виходять (300/484, 614/235, 300/235),
     зашиті в скрипт складання — саме під них ріжуться файли, тож міняти COL/ROW
     тут без перезбирання картинок не можна: кадри почне дорізати браузер. */
  .g-tall { grid-row: span 2; grid-column: span 1; }
  .g-wide { grid-row: span 1; grid-column: span 2; }
  .g-sq   { grid-row: span 1; grid-column: span 1; }

  .gallery-item {
    position: relative; margin: 0;
    border-radius: var(--r-sm); overflow: hidden;
    border: 1px solid var(--line); border-top-color: var(--glass-edge);
    box-shadow: var(--glass-shadow-1);
    transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
  }
  .gallery-item:hover {
    border-color: rgba(255,255,255,0.28);
    transform: translateY(-3px);
    box-shadow: var(--glass-shadow-2);
  }
  .gallery-item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    /* Плитка поза вікном завантаження лишається без src, тож під нею має бути
       хоч якийсь колір — той самий крихітний відбиток кадру, що й у картках. */
    background-image: var(--lqip); background-size: cover; background-position: center;
    filter: saturate(1.08) contrast(1.04);
    transition: transform 0.7s cubic-bezier(.2,.7,.3,1);
  }
  .gallery-item:hover img { transform: scale(1.05); }
  /* No captions here any more, so this is purely a grounding vignette rather
     than a scrim for text — kept light so the frames stay bright. */
  .gallery-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.34) 0%, transparent 38%);
  }

  /* Плитка з роликом. Кнопка лаймова, як і всі дії на сайті, і має власне
     кільце-світіння — кадри в стрічці різні за яскравістю, і на світлому
     сама заливка загубилася б.

     Обробник кліку висить на стрічці, а не на кнопці: стрічка клонується в
     п'ять копій через cloneNode, а він слухачів не переносить. */
  .gal-play {
    position: absolute; z-index: 2;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 64px; height: 64px; border-radius: 50%;
    display: grid; place-items: center;
    border: 0; padding: 0; cursor: pointer;
    background: var(--lime); color: var(--night);
    /* Три шари тіні: щільне кільце біля краю, широке лаймове світіння і
       звичайна тінь униз, щоб кнопка не висіла в повітрі над кадром. */
    box-shadow:
      0 0 0 7px rgba(198,255,0,0.16),
      0 0 30px -4px rgba(198,255,0,0.65),
      0 12px 32px -12px rgba(0,0,0,0.9);
    animation: playGlow 2.8s ease-in-out infinite;
    transition: transform 0.28s cubic-bezier(.22,1,.36,1);
  }
  /* Трикутник важчий праворуч, тож оптичний центр не збігається з коробкою. */
  .gal-play svg { margin-left: 2px; }
  /* Кільце, що розходиться і тане. Окремим шаром, бо анімувати box-shadow —
     це перемальовувати кнопку кожен кадр, а transform і opacity рахує
     композитор, не чіпаючи розкладку. */
  .gal-play::after {
    content: ''; position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(198,255,0,0.5);
    animation: playPulse 2.8s cubic-bezier(.22,1,.36,1) infinite;
    pointer-events: none;
  }
  @keyframes playPulse {
    0%        { transform: scale(1);    opacity: 0.75; }
    70%, 100% { transform: scale(1.85); opacity: 0; }
  }
  @keyframes playGlow {
    0%, 100% { box-shadow: 0 0 0 7px rgba(198,255,0,0.14), 0 0 26px -6px rgba(198,255,0,0.55), 0 12px 32px -12px rgba(0,0,0,0.9); }
    50%      { box-shadow: 0 0 0 10px rgba(198,255,0,0.22), 0 0 46px -2px rgba(198,255,0,0.95), 0 12px 32px -12px rgba(0,0,0,0.9); }
  }
  /* Клікабельна вся плитка, тож і підсвічування кнопки чіпляємо до плитки:
     інакше курсор десь у кутку кадру відкривав би ролик без жодної реакції. */
  .gallery-item.is-video { cursor: pointer; }
  .gal-play:hover,
  .gal-play:focus-visible,
  .gallery-item.is-video:hover .gal-play {
    transform: translate(-50%, -50%) scale(1.09);
    animation-play-state: paused;
    box-shadow:
      0 0 0 12px rgba(198,255,0,0.24),
      0 0 52px -2px rgba(198,255,0,1),
      0 14px 36px -12px rgba(0,0,0,0.95);
  }
  /* Пульсація тут декоративна, тож при вимкненій анімації просто зникає —
     кнопка лишається з рівним світінням. */
  @media (prefers-reduced-motion: reduce){
    .gal-play { animation: none; }
    .gal-play::after { display: none; }
  }
  @media (max-width: 640px){
    .gal-play { width: 54px; height: 54px; }
    .gal-play svg { width: 26px; height: 26px; }
  }

  /* arrows sit outside the tiles, at the nav's width — same as the experiences strip */
  .gal-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 3;
    width: 64px; height: 96px;
    display: grid; place-items: center;
    border: 0; background: none; padding: 0;
    color: rgba(255,255,255,0.58);
    font-family: 'Manrope', sans-serif; font-size: 52px; font-weight: 200; line-height: 1;
    text-shadow: 0 2px 18px rgba(0,0,0,0.65);
    cursor: pointer;
    transition: color 0.22s ease, transform 0.22s ease;
  }
  .gal-nav:hover { color: #fff; transform: translateY(-50%) scale(1.12); }
  .gal-prev { left: -52px; }
  .gal-next { right: -52px; }
  /* Від 1240px стрічка йде full-bleed і стрілки переїжджають на краї монітора
     (правило нижче в файлі). Тут закриваємо все, що до тієї межі: за ширшого
     контейнера поля обабіч меншають за 52px, і стрілка вилазила б за екран. */
  @media (max-width: 1239px){
    .gal-prev { left: -6px; }
    .gal-next { right: -6px; }
  }
  @media (max-width: 640px){
    /* На телефоні сітка дрібніша, але пропорції плиток збережені: 230/372 проти
       300/484 і 472/180 проти 614/235 — різниця в межах відсотка, тож ті самі
       файли лягають без дорізання. Бічний падінг 28px той самий, що й у стрічки
       «Silent-досвіди». */
    .gallery-strip {
      --g-col: 230px; --g-row: 180px; --g-gap: 12px;
      margin-inline: -28px;
    }
    .gal-nav { display: none; }
    .gallery-grid {
      padding: 4px 28px 14px;
      -webkit-mask-image: none; mask-image: none;
    }
  }

  /* ---------- FAQ ---------- */
  /* Не список із роздільниками, а стопка окремих карток матового скла. Відкрита
     піднімається з ряду лаймовою рамкою й світлом ізсередини — видно з одного
     погляду, де ти зараз. */
  .faq {
    padding: var(--sec-pad) 0;
    --faq-pad: 24px;      /* бічний падінг картки */
    --faq-num: 24px;      /* колонка з номером — фіксована, щоб текст усіх */
    --faq-gap: 18px;      /* питань починався з однієї вертикалі */
  }
  /* Дві колонки по чотири питання — окремими обгортками, а не однією сіткою на
     вісім карток. У сітці рядок спільний для обох колонок, тож розкрита картка
     ліворуч розсувала б рядок і під сусідкою праворуч зяяла б порожнеча. Тут
     колонки живуть незалежно: відкрите питання рухає тільки те, що під ним.

     Нумерація наскрізна: counter-reset стоїть на списку, а не на колонці, тож
     ліворуч 01–04, праворуч 05–08 — читається згори вниз, як і має бути.

     Один стовпчик — це та сама розкладка, тільки обгортки стають одна під одною,
     і порядок питань лишається 01…08. */
  .faq-list {
    margin-top: 44px; width: 100%;
    display: grid;
    /* Скільки колонок — вирішує сама сітка, без брейкпоінта. 380px — та ширина
       колонки, нижче за яку питання починають розсипатися на чотири рядки:
       заміряно, на 834px екрана (iPad портретом) колонки виходять рівно по 380
       і кожне питання тримається в один-три рядки, а на 768px уже в чотири.
       Тож поріг збігається з тим, де двома колонками ще комфортно.

       min(380px, 100%) — не косметика: без нього на телефоні колонка лишалася б
       380px при контейнері 334 і виштовхувала б сторінку вбік.

       auto-fit, а не auto-fill: на широкому екрані місця вистачає й на третю
       колонку, але третій обгортки немає — auto-fit згортає порожню доріжку в
       нуль, і дві наявні розтягуються на всю ширину. */
    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
    gap: 12px 18px;
    align-items: start;
    counter-reset: faq;
  }
  .faq-col { display: flex; flex-direction: column; gap: 12px; }
  .faq-item {
    counter-increment: faq;
    position: relative; width: 100%;
    border: 1px solid var(--line); border-top-color: var(--glass-edge);
    /* 28px — найбільший радіус, що вже є в системі (ним скруглена панель
       «Як це працює»), тож картки стають помітно круглішими, не вводячи нового
       значення. На закритій картці 68px висоти це майже пігулка. */
    border-radius: var(--r-lg);
    background: var(--glass-fill-1);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow-1), inset 0 1px 0 rgba(255,255,255,0.06);
    transition: border-color 0.45s cubic-bezier(.22,1,.36,1),
                background 0.45s cubic-bezier(.22,1,.36,1),
                box-shadow 0.45s cubic-bezier(.22,1,.36,1);
  }
  /* Світло приходить із лівого краю — звідти, де стоїть номер. Окремим шаром,
     а не тлом самої картки: тло вже зайняте станом «відкрито», і два градієнти
     в одній властивості не змогли б перетікати один в одного. */
  .faq-item::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    border-radius: inherit; pointer-events: none;
    background: linear-gradient(90deg,
      rgba(198,255,0,0.18), rgba(198,255,0,0.05) 24%, transparent 52%);
    opacity: 0; transition: opacity 0.45s cubic-bezier(.22,1,.36,1);
  }
  .faq-item:hover::before { opacity: 1; }
  .faq-item.open::before { opacity: 0; }   /* відкрита має власне світло */
  .faq-item:hover { border-color: rgba(198,255,0,0.32); }
  .faq-item:hover .faq-q::before { color: var(--lime); }
  .faq-q, .faq-a { position: relative; z-index: 1; }
  .faq-item.open {
    border-color: rgba(198,255,0,0.5);
    background:
      radial-gradient(130% 180% at 0% 0%, rgba(198,255,0,0.16), rgba(198,255,0,0.04) 46%, transparent 72%),
      var(--glass-fill-dark);
    box-shadow: var(--glass-shadow-2), 0 0 64px -26px rgba(198,255,0,0.5),
                inset 0 1px 0 rgba(255,255,255,0.09);
  }

  .faq-q {
    display: grid; grid-template-columns: var(--faq-num) 1fr auto;
    /* Від верху, а не по центру: довге питання переносить рядки, і при
       центруванні номер зависав би десь посеред нього. */
    align-items: start; gap: var(--faq-gap);
    padding: 22px var(--faq-pad);
    cursor: pointer; user-select: none; width: 100%;
  }
  /* Номер малює лічильник, а не розмітка: питання можна додати чи прибрати,
     і нумерація не поїде. */
  .faq-q::before {
    content: counter(faq, decimal-leading-zero);
    font-family: 'Unbounded', sans-serif; font-size: 12px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--muted-2);
    margin-top: 5px;                    /* сідає на перший рядок питання */
    transition: color 0.45s ease;
  }
  .faq-item.open .faq-q::before { color: var(--lime); }
  .faq-q h3 { font-size: 16px; font-weight: 600; line-height: 1.4; }

  .faq-icon {
    align-self: center;                 /* кнопка по центру картки, а не вгорі */
    flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid rgba(198,255,0,0.22);
    background: rgba(198,255,0,0.07);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Unbounded', sans-serif; font-size: 22px; font-weight: 300; line-height: 1;
    color: var(--lime);
    transition: transform 0.45s cubic-bezier(.22,1,.36,1), background 0.4s ease,
                color 0.4s ease, border-color 0.4s ease;
  }
  .faq-item:hover .faq-icon {
    border-color: rgba(198,255,0,0.55);
    background: rgba(198,255,0,0.13);
    box-shadow: 0 0 26px -8px rgba(198,255,0,0.6);
  }
  /* 135° перетворює плюс на хрестик — той самий знак, інший стан */
  .faq-item.open .faq-icon {
    transform: rotate(135deg);
    background: var(--lime); border-color: var(--lime); color: #12100a;
  }

  .faq-a {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 0.45s cubic-bezier(.22,1,.36,1), opacity 0.35s ease;
  }
  .faq-item.open .faq-a { opacity: 1; }
  .faq-a p {
    font-size: 14px; line-height: 1.65; color: var(--muted); max-width: 72ch;
    padding: 0 var(--faq-pad) 24px calc(var(--faq-pad) + var(--faq-num) + var(--faq-gap));
  }
  .faq-a p strong { color: rgba(255,255,255,0.9); }

  @media (max-width: 640px){
    .faq { --faq-pad: 18px; --faq-gap: 14px; }
    .faq-item { border-radius: var(--r-md); }
    .faq-list { gap: 10px; }
    .faq-q { padding: 18px var(--faq-pad); }
    .faq-q h3 { font-size: 14.5px; }
    .faq-icon { width: 42px; height: 42px; font-size: 20px; }
    .faq-a p { font-size: 13.5px; padding-bottom: 20px; }
  }

  /* ---------- CALCULATOR ---------- */
  .calculator { padding: var(--sec-pad) 0; }
  .calc-card {
    position: relative;
    border: 1px solid rgba(255,255,255,0.10);
    border-top-color: var(--glass-edge);
    border-radius: var(--r-lg);
    background:
      radial-gradient(circle at 78% 0%, var(--ch-soft), transparent 40%),
      var(--glass-fill-2);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow-2), inset 0 1px 0 rgba(255,255,255,0.1);
    padding: 42px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 36px;
  }
  /* Grid items default to min-width:auto and so refuse to shrink below their
     content — that is what pushed the card past the screen on phones. */
  .calc-card > * { min-width: 0; }
  .calc-copy h2 { font-size: clamp(22px, 3vw, 30px); line-height: 1.15; margin-bottom: 14px; font-weight: 700; }
  .calc-copy p { color: var(--muted); font-size: 15px; max-width: 58ch; }
  /* The shot is a cut-out PNG, so it needs no frame — it floats on the card.
     A soft three-colour backlight sits behind it, echoing the RED/GREEN/BLUE
     channels the headphones themselves are lit in. */
  .calc-photo { position: relative; margin-top: 22px; }
  .calc-photo::before {
    content: ''; position: absolute; inset: 12% 4% 16%;
    z-index: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 42% 58% at 20% 55%, rgba(var(--green-rgb), 0.34), transparent 72%),
      radial-gradient(ellipse 42% 58% at 50% 50%, rgba(var(--blue-rgb), 0.34), transparent 72%),
      radial-gradient(ellipse 42% 58% at 80% 55%, rgba(var(--red-rgb), 0.34), transparent 72%);
    filter: blur(34px);
  }
  .calc-photo img {
    position: relative; z-index: 1;
    display: block; width: 100%; height: auto;
  }
  .calc-rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 26px; }
  .calc-rule {
    border: 1px solid var(--line); border-top-color: var(--glass-edge);
    border-radius: var(--r-sm);
    padding: 16px;
    background: var(--glass-fill-soft);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    transition: border-color 0.3s ease, background 0.3s ease;
  }
  .calc-rule:hover { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.045); }
  .calc-rule b { display:block; font-family:'Unbounded'; font-size: 18px; line-height: 1.1; margin-bottom: 5px; }
  /* Inherited the global 1.6, which left a gap far too airy once a caption wraps
     to a second line. 1.35 matches the channel-toggle captions. */
  .calc-rule span { color: var(--muted); font-size: 12.5px; line-height: 1.35; display: block; }
  .calc-panel {
    border: 1px solid var(--line); border-top-color: var(--glass-edge);
    border-radius: var(--r-md);
    background: var(--glass-fill-1);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding: 24px;
  }
  .calc-top { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom: 18px; }
  /* Fixed shares, so neither readout resizes as its number changes — that jitter
     used to ripple out and shift the whole panel while dragging the slider. The
     price gets the larger share because it is the longer value ("22 000"). */
  .calc-top > div { min-width: 0; }
  .calc-top > div:first-child { flex: 0 0 36%; }
  .calc-top > div:last-child { flex: 1 1 0; }
  .calc-top span { color: var(--muted-2); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 800; }
  .calc-price {
    font-family:'Unbounded'; font-size: clamp(26px, 6.2vw, 54px); line-height: 1; color: #fff;
    /* fixed-width digits: 1 and 8 occupy the same space, so the readout can't
       shift as the value changes */
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    white-space: nowrap;
  }
  /* The unit always sits on its own line, so it can never hop beside/below the
     number depending on how wide that number happens to be. */
  .calc-price small {
    display: block; margin-top: 7px;
    font-family:'Manrope'; color: var(--muted); font-size: 13px; font-weight: 600;
  }
  .calc-slider { margin: 26px 0 20px; }
  .calc-slider input[type="range"] {
    width: 100%; accent-color: var(--ch); cursor: pointer;
  }
  .calc-labels { display:flex; justify-content:space-between; color: var(--muted-2); font-size: 11.5px; margin-top: 7px; }
  .calc-row { display:flex; justify-content:space-between; gap:18px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
  .calc-row span:first-child { color: var(--muted); }
  .calc-row span:last-child { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
  .calc-checks { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 20px; }
  .calc-checks label {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 11px 14px;
    color: var(--muted);
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
  }
  .calc-checks label:hover { border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.03); }
  .calc-checks input { accent-color: var(--ch); margin-right: 7px; }
  .calc-hours {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 11px 14px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .calc-hours span:first-child { color: var(--muted); font-size: 12.5px; }
  .hours-stepper { display: flex; align-items: center; gap: 8px; font-family:'Unbounded'; font-size: 14px; font-weight: 600; color: #fff; }
  .hours-stepper small { color: var(--muted-2); font-family:'Manrope'; font-weight: 400; font-size: 11px; }
  .hstep {
    width: 24px; height: 24px; border-radius: 50%;
    border: 1px solid var(--line); background: rgba(255,255,255,0.04);
    color: #fff; font-size: 15px; line-height: 1;
    cursor: pointer; transition: border-color 0.2s, background 0.2s;
    display: flex; align-items: center; justify-content: center;
  }
  .hstep:hover { border-color: var(--ch); background: var(--ch-soft); }
  .hstep:disabled { opacity: 0.3; cursor: not-allowed; }
  .calc-note { color: var(--muted-2); font-size: 12px; margin-top: 12px; line-height: 1.45; }

  @media (max-width: 860px){
    .calc-card { grid-template-columns: 1fr; }
    .calc-card { padding: 30px; }
  }
  @media (max-width: 520px){
    /* .calc-rules deliberately stays 2x2 here — as four full-width rows the
       stats read as a long list instead of a compact block. */
    .calc-checks { grid-template-columns: 1fr; }
    .calc-rule { padding: 13px 12px; border-radius: var(--r-sm); }
    .calc-rule b { font-size: 16px; }
    .calc-rule span { font-size: 11.5px; }
    .calc-card { padding: 20px; border-radius: var(--r-md); }
    /* nested padding (page + card + panel) eats the width the readouts need,
       so trim the innermost one rather than shrinking the numbers */
    .calc-panel { padding: 18px 16px; }
    .calc-top { gap: 10px; }
    .hero-photo { background-position: 70% 26%; }
  }

  /* ---------- FORM ---------- */
  .form-section { padding: var(--sec-pad) 0 0; position: relative; z-index: 2; }
  .form-card {
    border: 1px solid var(--line); border-radius: var(--r-lg);
    background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding: 48px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  }
  @media (max-width: 760px){ .form-card { grid-template-columns: 1fr; padding: 32px; } }
  /* Колонка — колонка флексів, щоб календар можна було притиснути донизу:
     тоді його нижній край збігається з низом правої колонки сам, без підгонки
     відступів під поточну кількість полів. */
  .form-left { display: flex; flex-direction: column; }
  .form-left h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; line-height: 1.15; margin-bottom: 14px; }
  .form-left .em { color: var(--lime); }
  .form-left p { color: var(--muted); font-size: 15px; margin-bottom: 26px; }
  .form-assure { display: flex; flex-direction: column; gap: 12px; }
  .form-assure div { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--muted); }
  .form-assure .ok { color: var(--lime); font-weight: 700; }

  /* ---------- КАЛЕНДАР У ФОРМІ ---------- */
  /* Займає порожнє місце під списком у лівій колонці. Те саме матове скло, що
     й у полів форми, тільки панеллю. */
  .cal {
    /* Прив'язки дві: верх панелі лягає на верхній край поля «Скільки гостей»,
       низ панелі — на нижній край кнопки «Надіслати заявку». Обидві рахує
       alignCalendarToForm() у JS: поля форми міняються (додається чи
       зникає рядок), тож фіксований відступ/висота тут же розійшлися б —
       margin-top і height нижче лише запасні значення до першого прорахунку. */
    margin-top: 0; margin-bottom: 0;
    box-sizing: border-box;
    display: flex; flex-direction: column;
    border: 1px solid var(--line); border-top-color: var(--glass-edge);
    border-radius: var(--r-sm);
    background: rgba(255,255,255,0.035);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding: 18px 18px 16px;
    width: 100%;                /* на всю ширину текстової колонки */
  }
  /* Стрілки тримаємо біля назви місяця, а не по краях панелі: розкидані по
     кутах вони читались як щось стороннє, а не як керування цим заголовком. */
  .cal-head { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; }
  /* Не Unbounded: його широкі геометричні цифри в дрібній сітці читаються
     важко. Основний шрифт сайту тримає ту саму ієрархію вагою й розміром. */
  .cal-title {
    font-size: 15px; font-weight: 700; letter-spacing: 0.2px;
    display: flex; align-items: baseline; gap: 6px;
  }
  .cal-title span { text-transform: capitalize; }
  .cal-title b { color: var(--lime); font-weight: 600; font-variant-numeric: tabular-nums; }
  .cal-nav {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid var(--line); background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.7); cursor: pointer;
    font-size: 15px; line-height: 1;
    display: grid; place-items: center;
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
  }
  .cal-nav:hover { border-color: rgba(198,255,0,0.5); color: var(--lime); background: rgba(198,255,0,0.09); }

  .cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
  /* flex:1 — сітка днів сама з'їдає (чи віддає) різницю, коли JS підганяє
     висоту .cal під поле «Скільки гостей» і кнопку: рядки тижнів рівномірно
     трохи вищі або нижчі за 32px, а не порожній відступ під низом сітки. */
  .cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(22px, 1fr);
    gap: 4px; flex: 1;
  }
  /* Дні тижня губились сірим на тлі цифр — тепер яскравіші, важчі й відділені
     лінією, тож шапка сітки читається як шапка. */
  .cal-week {
    padding-bottom: 8px; margin-bottom: 8px;
    border-bottom: 1px solid var(--line);
    font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: rgba(255,255,255,0.55); text-align: center;
  }
  .cal-day {
    display: grid; place-items: center;
    border: 1px solid transparent; border-radius: var(--r-xs);
    background: none; color: rgba(255,255,255,0.86);
    font-size: 13.5px; font-weight: 500;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .cal-day:hover { background: rgba(198,255,0,0.12); color: #fff; }
  .cal-day.other { color: rgba(255,255,255,0.16); pointer-events: none; }
  .cal-day.past { color: rgba(255,255,255,0.2); pointer-events: none; }
  /* сьогодні — лише обведення, щоб не сперечалось із обраною датою */
  .cal-day.today { border-color: rgba(198,255,0,0.45); }
  .cal-day.sel {
    background: var(--lime); color: #12100a; font-weight: 700;
    border-color: var(--lime);
    box-shadow: 0 0 22px -6px rgba(198,255,0,0.7);
  }
  /* .cal .cal-foot, а не просто .cal-foot: інакше програє загальному
     ".form-left p { margin-bottom: 26px }" (він специфічніший — клас+тег
     проти самого лише класу), і цей чужий відступ знизу відсовував панель
     календаря нижче кнопки, хоч сам текст рядка лежав, де треба. */
  .cal .cal-foot { margin: 10px 0 0; font-size: 11.5px; color: var(--muted-2); text-align: center; }

  /* Ховаємо тільки на телефоні: там колонка вузька, сітка стає нечитабельною, а
     поле «Бажана дата» й так відкриває рідний вибір дати. З 761px ширини вже
     вистачає, щоб сітка читалась. */
  @media (max-width: 760px){ .cal { display: none; } }

  .field { margin-bottom: 16px; }
  .field label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 7px; letter-spacing: 0.3px; }
  .field input, .field select, .field textarea {
    width: 100%; padding: 14px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line); border-radius: var(--r-xs);
    color: #fff; font-family: inherit; font-size: 14.5px;
    transition: border-color 0.2s, background 0.2s;
    resize: vertical;
  }
  /* Own chevron, drawn with room to breathe — the native one sat on the edge */
  .field select {
    -webkit-appearance: none; appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5 7 7.5l6-6' stroke='rgba(255,255,255,0.6)' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
  }
  .field select option { background: #10141c; color: #fff; }
  /* iOS Safari дає date-полю власну внутрішню ширину, розраховану під найдовший
     формат дати, і вона ігнорує width:100% — поле вилазить за контейнер. Знімаємо
     системний вигляд і дозволяємо йому стискатись: min-width:0 потрібен окремо,
     бо у флекс- і грид-контейнерах типове min-width:auto не дає полю звузитись.
     Заразом вирівнюємо значення ліворуч — iOS центрує його всередині поля. */
  .field input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0; max-width: 100%;
    text-align: left;
    /* Поки поле порожнє, iOS не малює всередині нічого — рядок сходить у нуль, і
       від поля лишається вузька смужка заввишки з самі падінги. Висоту задаємо
       явно, рівно як у звичайних полів (14px падінга + рядок + рамка). */
    line-height: 20px;
    min-height: 50px;
  }
  .field input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
    margin: 0;
    min-height: 20px;
  }
  /* the native date picker ships a black glyph, invisible on a dark field */
  .field input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.62);
    cursor: pointer;
    margin-right: 2px;
  }
  .field input[type="date"]::-webkit-calendar-picker-indicator:hover { filter: invert(1) opacity(1); }
  .field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--ch);
    background: rgba(255,255,255,0.06);
  }
  .field select option { background: var(--night-2); }
  .calc-summary-note {
    border: 1px solid var(--ch);
    background: var(--ch-soft);
    border-radius: var(--r-xs);
    padding: 13px 16px;
    margin-bottom: 20px;
    font-size: 13px; line-height: 1.5;
    color: rgba(255,255,255,0.92);
    transition: background 0.6s ease, border-color 0.6s ease;
  }
  .calc-summary-note b { color: var(--ch); transition: color 0.6s ease; }
  .form-submit {
    width: 100%; margin-top: 6px;
    background: var(--lime); color: #12100a;
    padding: 16px; border-radius: var(--r-sm); border: none;
    font-family: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
    box-shadow: 0 8px 26px -8px var(--lime-glow);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .form-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -6px var(--lime-glow); }
  .form-note { font-size: 12px; color: var(--muted-2); margin-top: 14px; text-align: center; }
  .form-success {
    display: none; text-align: center; padding: 20px;
  }
  .form-success.show { display: block; }
  .form-success .big { font-family:'Unbounded'; font-size: 22px; font-weight: 600; margin-bottom: 10px; color: var(--lime); }
  .form-success p { color: var(--muted); font-size: 14px; }

  /* ---------- FOOTER ---------- */
  /* Order down the page: booking form → SILENT wordmark tucked under it →
     divider → all the footer information at the very bottom. */
  .site-footer {
    position: relative;
    z-index: 0;                 /* under the form, so the form's blur bites into the word */
    padding: 0 0 34px;
    isolation: isolate;
  }
  /* Living mesh: slow blobs in the channel colours, brightest toward the bottom */
  .footer-aurora {
    position: absolute; left: 0; right: 0; bottom: 0; height: 1360px;
    overflow: hidden;   /* keeps the blobs from widening the page */
    z-index: 0; pointer-events: none;
    filter: blur(96px) saturate(1.4);
    opacity: 1;
    /* a long, gentle ramp so the glow grows out of the page background instead
       of starting on a line — it is already faint where it passes the form */
    -webkit-mask-image: linear-gradient(180deg,
      transparent 0%, rgba(0,0,0,0.10) 12%, rgba(0,0,0,0.34) 24%,
      rgba(0,0,0,0.68) 36%, #000 48%, #000 100%);
    mask-image: linear-gradient(180deg,
      transparent 0%, rgba(0,0,0,0.10) 12%, rgba(0,0,0,0.34) 24%,
      rgba(0,0,0,0.68) 36%, #000 48%, #000 100%);
  }
  .fa-blob { position: absolute; border-radius: 50%; transition: background 1.4s ease; }
  /* Brand lime (#c6ff00) leads everywhere; the accent blobs borrow --ch, so only
     one of red / green / blue ever joins it, following the live channel. */
  .fa-blob.b1 { width: 74%; height: 66%; left: -12%; bottom: 12%; background: radial-gradient(circle, rgba(198,255,0,0.55), transparent 66%); animation: faDrift1 21s ease-in-out infinite alternate; }
  .fa-blob.b2 { width: 62%; height: 56%; left: 24%;  bottom: 6%; background: radial-gradient(circle, var(--ch-glow), transparent 64%);       animation: faDrift2 17s ease-in-out infinite alternate; }
  .fa-blob.b3 { width: 72%; height: 64%; left: 44%;  bottom: 14%;  background: radial-gradient(circle, rgba(198,255,0,0.46), transparent 66%); animation: faDrift3 24s ease-in-out infinite alternate; }
  .fa-blob.b4 { width: 56%; height: 50%; left: 26%;  bottom: 26%;   background: radial-gradient(circle, var(--ch-glow), transparent 68%);       animation: faDrift4 19s ease-in-out infinite alternate; }
  @keyframes faDrift1 { from { transform: translate(0,0) scale(1); }    to { transform: translate(9%, -7%) scale(1.16); } }
  @keyframes faDrift2 { from { transform: translate(0,0) scale(1.08); } to { transform: translate(-11%, -4%) scale(0.94); } }
  @keyframes faDrift3 { from { transform: translate(0,0) scale(0.96); } to { transform: translate(-8%, -9%) scale(1.14); } }
  @keyframes faDrift4 { from { transform: translate(0,0) scale(1); }    to { transform: translate(6%, -12%) scale(1.1); } }

  /* Blended into the gradient rather than painted on top of it, so the letters
     read as light passing through the mesh — and the form above blurs their tops. */
  /* The clip only exists to cut the letters at the page edges. Its own font-size
     lets the tuck below be expressed in em, so the overlap stays proportional at
     every viewport instead of drifting with a fixed pixel value. */
  .footer-word-clip {
    overflow: hidden;
    font-size: clamp(78px, 22vw, 318px);
    margin-top: -0.45em;      /* lands the form's edge on the glyphs' midline */
  }
  .footer-word {
    position: relative;
    font-family: 'Unbounded'; font-weight: 800;
    font-size: 1em;
    white-space: nowrap;
    line-height: 0.9;
    letter-spacing: 0.012em;
    /* A clipping box refuses to let centred text spill past its inline start,
       so the S would stay pinned while only the T ran off. Shifting the box
       itself makes both ends overhang by the same amount. */
    width: max-content;
    margin-left: 50%;
    transform: translateX(-50%);
    user-select: none;
    /* Filled with the same palette the mesh throws — lime leading, the live
       channel closing — so the letters read as part of the gradient and never
       fall back to flat white. */
    background: linear-gradient(96deg,
      rgba(198,255,0,0.72) 0%,
      rgba(226,255,150,0.62) 22%,
      rgba(255,255,255,0.58) 46%,
      color-mix(in srgb, var(--ch) 72%, transparent) 76%,
      rgba(255,236,214,0.42) 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }

  /* keeps the links legible wherever the mesh happens to be bright */
  /* Legibility scrim for the footer text. Ramped over a long distance and in
     several steps, so it never shows an edge of its own against the mesh. */
  .site-footer::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 460px;
    background: linear-gradient(0deg,
      rgba(5,7,13,0.66) 0%, rgba(5,7,13,0.52) 22%, rgba(5,7,13,0.34) 44%,
      rgba(5,7,13,0.18) 64%, rgba(5,7,13,0.07) 82%, transparent 100%);
    z-index: 1; pointer-events: none;
  }
  .footer-inner {
    position: relative; z-index: 2;
    margin-top: 26px;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.16);
  }
  .footer-cols {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.05fr;
    gap: 34px;
  }
  .f-logo { font-family:'Unbounded'; font-weight: 800; font-size: 20px; letter-spacing: 0.02em; }
  .f-logo b { color: var(--lime); }
  .f-tagline { margin-top: 10px; font-size: 12.5px; color: rgba(255,255,255,0.7); line-height: 1.5; max-width: 30ch; }
  .f-cta { margin-top: 18px; display: inline-block; }
  /* .f-col a outranks .btn-primary, which turned the label white on lime */
  .f-col a.f-cta, .f-col a.f-cta:hover { color: #12100a; }
  /* Заголовок колонки був ТЬМЯНІШИЙ за свої ж посилання (0.58 проти 0.74) —
     через це футер і читався однією сірою масою. Тепер навпаки: заголовок
     майже білий, посилання приглушені. */
  .f-col h4 {
    font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
    color: rgba(255,255,255,0.95); font-weight: 700; margin-bottom: 15px;
  }
  .f-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
  .f-col a { font-size: 12.5px; color: rgba(255,255,255,0.55); transition: color 0.2s ease; }
  .f-col a:hover { color: #fff; }
  /* Заголовка над іконками більше немає, тож ряд треба опустити самому —
     інакше він висить вище за перші пункти сусідніх списків. */
  .f-socials { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin-top: 30px; }
  /* Без кружечків: сама іконка тонкою обводкою, лаймова і помітно більша.
     Селектор із .f-col навмисно: правило .f-col a вище задає колір посилань і
     за специфічністю перебивало б просто .f-soc — іконки лишались би сірими. */
  .f-col a.f-soc, .f-soc {
    display: grid; place-items: center;
    color: rgba(198,255,0,0.72);
    transition: color 0.25s ease, transform 0.2s ease, filter 0.25s ease;
  }
  .f-col a.f-soc:hover, .f-soc:hover {
    color: var(--lime);
    transform: translateY(-2px);
    filter: drop-shadow(0 0 8px rgba(198,255,0,0.55));
  }
  .f-note { margin-top: 14px; font-size: 11.5px; color: var(--muted-2); line-height: 1.5; max-width: 26ch; }
  .footer-legal {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px;
    margin-top: 28px; padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 11px; color: var(--muted-2);
  }

  @media (max-width: 900px){
    .footer-cols { grid-template-columns: 1fr 1fr; gap: 26px; }
    .f-brand { grid-column: 1 / -1; }
  }
  /* Планшет. Стоїть ПІСЛЯ правила 900px навмисно: діапазони перетинаються на
     761–900, специфічність у обох однакова, тож виграє те, що нижче. Логотип
     ліворуч, обидві навігаційні колонки поруч праворуч від нього, а контакти з
     іконками спускаються окремим рядом на всю ширину підвалу. */
  @media (min-width: 761px) and (max-width: 1050px){
    .footer-cols {
      grid-template-columns: 1.3fr 1fr 1fr;
      gap: 30px;
    }
    .f-brand { grid-column: 1 / 2; grid-row: 1; }
    .footer-cols > nav.f-col:nth-of-type(1) { grid-column: 2 / 3; grid-row: 1; }
    .footer-cols > nav.f-col:nth-of-type(2) { grid-column: 3 / 4; grid-row: 1; }
    .f-contact { grid-column: 1 / -1; grid-row: 2; }
    /* Ряд іконок на всю ширину підвалу: п'ять рівних комірок, іконка по центру
       кожної — той самий прийом, що й на телефоні, тільки більшим кеглем. */
    .f-socials {
      display: grid; grid-template-columns: repeat(5, 1fr);
      gap: 0; margin-top: 6px;
    }
    .f-soc { justify-self: center; width: auto; height: auto; }
    .f-soc svg { width: 32px; height: 32px; }
    .f-note { max-width: none; text-align: center; }
  }
  @media (max-width: 560px){
    /* Compact on phones: the two link lists sit side by side as short columns
       instead of one long scroll, and the supporting prose is dropped. */
    .footer-cols { grid-template-columns: 1fr 1fr; gap: 20px 18px; }
    .f-brand { grid-column: 1 / -1; }
    /* Phones drop the supporting prose and the CTA — the sticky nav already
       carries a booking button, and "Залишити заявку" stays in the link list. */
    .f-tagline, .f-note, .f-cta { display: none; }
    .f-brand { margin-bottom: 2px; }
    .f-col h4 { font-size: 10px; letter-spacing: 1.4px; margin-bottom: 9px; }
    .f-col ul { gap: 6px; }
    .f-col a { font-size: 12px; }
    /* the contact column itself has to span both tracks, then the five icons
       divide that full width between them */
    .footer-cols > .f-col:last-child { grid-column: 1 / -1; }
    /* На всю ширину підвалу: п'ять рівних колонок, іконка по центру кожної. */
    .f-socials { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 22px; }
    /* Більші, але з прив'язкою до ширини екрана, а не до комірки: сам .f-soc
       стискається під вміст, тож відсоток резолвився б від власної ширини
       іконки й давав 14px. */
    .f-soc { justify-self: center; }
    .f-soc svg { width: clamp(28px, 8.2vw, 34px); height: auto; }
    .f-soc { width: auto; height: auto; }
    .footer-inner { margin-top: 18px; padding-top: 22px; }
    .footer-legal { flex-direction: column; gap: 4px; margin-top: 20px; padding-top: 13px; }
  }


  .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); }
  .reveal.in { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal { opacity: 1; transform: none; }
    /* These start at opacity:0 and reveal themselves through the `rise`
       animation. With animations off they would stay invisible forever — the
       entire hero (headline, sub, CTAs, channel panel) would never appear. */
    .hero-sub, .hero-actions, .hero-facts,
    .hero-lines > span, .hero-strip {
      opacity: 1 !important; transform: none !important;
    }
  }
  /* ---------- BENEFITS (pain-language) ---------- */
  .benefits { padding: var(--sec-pad) 0; position: relative; overflow: hidden; isolation: isolate; }
  /* fade scrim: photo emerges from and dissolves back into the page bg */
  .benefits::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg,
      var(--night) 0%,
      rgba(5,7,13,0.82) 8%,
      rgba(5,7,13,0.20) 26%,
      rgba(5,7,13,0.14) 50%,
      rgba(5,7,13,0.24) 74%,
      rgba(5,7,13,0.82) 92%,
      var(--night) 100%);
  }
  /* Real SILENT crowd photo as the section backdrop. Brighter than before, and
     it fades out of nothing at the top and back into nothing at the bottom so
     there's no hard seam with the page background. */
  .benefits-bg {
    /* Overhang has to exceed the parallax travel, otherwise the photo's own edge
       slides into view and reads as a hard line before the scrim can fade it. */
    position: absolute; left: 0; right: 0; top: -190px; height: calc(100% + 380px); z-index: -2;
    /* Адреса знімка живе тут, поруч із двома іншими url() файлу, а не в атрибуті
       style у розмітці: відносний url() усередині власної властивості браузер
       розв'язує від того файлу, який його підставляє, тобто від цього. Зі
       сторінки в /en/ той самий рядок вказував би вже не туди. */
    --benefits-photo: url('../images/bg-5.webp');
    background-image: var(--benefits-photo, none);
    background-size: cover;
    background-position: center 42%;
    background-repeat: no-repeat;
    filter: brightness(1.12) saturate(1.05);
    /* Власна маска на додачу до скриму секції: знімок з'являється з нічого і в
       ніщо йде, тож у нього немає власного краю, який міг би читатись як лінія. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
    will-change: transform;
  }
  .benefits .wrap { position: relative; z-index: 1; }
  /* Bento замість таблиці. Раніше тут стояло шість однакових прямокутників у три
     колонки — сітка читалась рівним списком, і головна перевага (три канали) не
     виділялась нічим. Тепер розміри різні: велика картка 2×2 з реальним візуалом
     каналів задає ритм, дві вузькі 1×1 роблять паузу, три широкі 2×1 закривають
     ряди. Порядок у розмітці підібраний так, що звичайне auto-placement лягає
     без дірок — grid-auto-flow: dense не потрібен, і кадри не переставляються. */
  /* minmax(0, 1fr), а не просто 1fr: у заголовках стоять нерозривні пробіли
     («ще не бачили» — один нерозривний блок), і при звичайному 1fr його
     min-content розпирав колонку — сусідні картки виходили різної ширини. */
  .benefits-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
    margin-top: 40px;
  }
  @media (max-width: 860px){ .benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  /* Накладання — лише на мобільній одноколонковій стрічці (нижче). На десктопі
     й планшеті картки лишаються рівною сіткою з однаковими проміжками, без
     жодного зсуву чи повороту. */
  @media (max-width: 560px){
    .benefits-grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-top: 26px; }
    /* Хаотичне нашарування за зразком стрічки відгуків (.tst-card): там кожна
       картка на своєму нахилі, і ряд не читається рівною гребінкою. Тут те саме
       по вертикалі — власний rotateZ і невеликий горизонтальний зсув на КОЖНІЙ
       з шести карток окремо (а не через nth-child) — з парними/непарними
       правилами два патерни по 3 картки все одно виглядали б механічними.
       Порядок у DOM природно кладе пізніші картки поверх попередніх. */
    .benefit-card {
      margin-top: -26px;
      box-shadow: 0 18px 30px -18px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.07);
    }
    /* .benefits-grid .benefit-card — вища специфічність, ніж у базового
       .benefit-card { padding: 26px 22px }, яке стоїть НИЖЧЕ в коді й інакше
       перебивало б цей padding-bottom попри медіа-запит. Коробка й далі
       находить на сусідню картку на 26px (це і є ефект нашарування), але
       текст усередині мусить закінчуватись до її початку — без цього
       останній рядок опису ховався під сусідньою карткою (запас був лише
       4-7px замість потрібних 26). */
    .benefits-grid .benefit-card { padding-bottom: 52px; }
    .benefit-card:nth-child(1) { transform: rotateZ(-1.6deg) translateX(-5px); }
    .benefit-card:nth-child(2) { transform: rotateZ(1.8deg) translateX(7px); }
    .benefit-card:nth-child(3) { transform: rotateZ(-1.1deg) translateX(4px); }
    .benefit-card:nth-child(4) { transform: rotateZ(1.4deg) translateX(-7px); }
    .benefit-card:nth-child(5) { transform: rotateZ(-1.9deg) translateX(6px); }
    .benefit-card:nth-child(6) { transform: rotateZ(1.2deg) translateX(-4px); }
  }
  .benefit-card {
    position: relative;
    border: 1px solid var(--line); border-top-color: var(--glass-edge);
    border-radius: var(--r-md);
    padding: 26px 22px;
    background: var(--glass-fill-1);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow-1), inset 0 1px 0 rgba(255,255,255,0.07);
    /* Довше за звичайне наведення: підсвітка тут переповзає між картками під
       час прокрутки, і на 0.3s передача читалась би як клацання. */
    transition: border-color 0.5s ease, transform 0.5s ease, box-shadow 0.5s ease;
  }
  /* Те саме, що й при наведенні: обводка спалахує, коли картка проходить
     середину екрана, і гасне, щойно її змінює наступна. */
  .benefit-card:hover,
  .benefit-card.is-lit { border-color: var(--ch); transform: translateY(-4px); box-shadow: var(--glass-shadow-2), 0 0 40px -22px var(--ch-glow), inset 0 1px 0 rgba(255,255,255,0.1); }
  /* Over the photo backdrop: light, neutral frost so the crowd image reads
     clearly through the glass. Lower floor opacity + moderate blur. */
  .benefits .benefit-card {
    background:
      linear-gradient(158deg, rgba(230,234,242,0.12), rgba(214,220,232,0.04) 48%, rgba(214,220,232,0.025)),
      rgba(12,16,26,0.20);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
  }
  /* Намальована піктограма замість типографського символу (♪ ◈ – ✎), який
     нічого не пояснював. Без підкладки, у правому нижньому куті: заголовок і
     опис читаються зверху на всю ширину, а іконка лежить тихою позначкою під
     текстом, а не поруч із ним. */
  .benefit-card .b-icon {
    position: absolute; bottom: 22px; right: 20px;
    color: var(--ch); opacity: 0.9;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.6s ease;
  }
  .benefit-card .b-icon svg { width: 36px; height: 36px; display: block; }
  .benefit-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 14px; line-height: 1.3; }
  .benefit-card p { font-size: 13px; color: var(--muted); line-height: 1.55; }
  /* Іконка внизу картки, під останнім рядком опису, тож за ширину тексту вона
     не заважає — застереження потрібне лише в короткого заголовка. */
  .benefit-card h3 { padding-right: 52px; }
  /* Явний min-width, а не покладання на порядок у коді: у мобільного блоку
     нижче вже є свій padding-bottom на .benefits-grid .benefit-card (52px,
     під нашарування карток) — та сама специфічність, і без чіткої межі ширини
     невідомо, яке з двох правил виграло б на 560px. */
  @media (min-width: 561px){
    /* Резерв під іконку внизу картки: 26 (звичайний низ) + 36 (сама іконка) +
       трохи повітря — інакше довгий опис міг би зверстатись під неї. */
    .benefits-grid .benefit-card { padding-bottom: 66px; }
  }
  /* Мобільна одноколонкова стрічка (нижче) уже й так тісна через нашарування
     карток одна на одну — там іконка лишається у звичному верхньому куті,
     над текстом, а не під ним. */
  @media (max-width: 560px){
    .benefit-card .b-icon { top: 22px; bottom: auto; }
    .benefit-card h3, .benefit-card p { padding-right: 52px; }
  }

  /* ---------- USE CASES ---------- */
  .usecases { position: relative; padding: var(--sec-pad) 0; overflow: hidden; }
  /* A slow, deliberately unsynchronised lime mesh drifting behind the whole
     section — the cards are translucent, so it reads through them. */
  .uc-aurora {
    position: absolute; inset: -8% -6%;
    z-index: 0; pointer-events: none;
    /* Замість поля градієнтних плям — реальний кадр зі змазаними вогнями. Він
       уже розмитий сам по собі, тож blur тут майже не потрібен; лишається
       стільки, щоб не читались окремі деталі. */
    background-image: url('../images/bg-4.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(18px) saturate(1.2);
    opacity: 0.45;
    /* eased in at the top so the heading keeps a clean ground, and out at the
       bottom so the section doesn't end on a band of colour */
    -webkit-mask-image: linear-gradient(180deg,
      transparent 0%, rgba(0,0,0,0.10) 9%, rgba(0,0,0,0.34) 18%, rgba(0,0,0,0.68) 28%, #000 40%,
      #000 58%, rgba(0,0,0,0.72) 72%, rgba(0,0,0,0.38) 84%, rgba(0,0,0,0.12) 93%, transparent 100%);
    mask-image: linear-gradient(180deg,
      transparent 0%, rgba(0,0,0,0.10) 9%, rgba(0,0,0,0.34) 18%, rgba(0,0,0,0.68) 28%, #000 40%,
      #000 58%, rgba(0,0,0,0.72) 72%, rgba(0,0,0,0.38) 84%, rgba(0,0,0,0.12) 93%, transparent 100%);
  }
  /* Плями лишаються в розмітці, але сховані: їхню роль тепер грає сам знімок. */
  .ua-blob { display: none; position: absolute; border-radius: 50%; transition: background 1.4s ease; }
  .ua-blob.u1 { width: 60%; height: 58%; left: -10%; top: 26%;   background: radial-gradient(circle, rgba(198,255,0,0.62), transparent 66%); animation: uaDrift1 37s ease-in-out infinite; }
  .ua-blob.u2 { width: 52%; height: 52%; left: 20%;  top: 44%;  background: radial-gradient(circle, rgba(198,255,0,0.46), transparent 66%); animation: uaDrift2 29s ease-in-out infinite; }
  .ua-blob.u3 { width: 56%; height: 56%; left: 50%;  top: 22%;  background: radial-gradient(circle, rgba(198,255,0,0.54), transparent 66%); animation: uaDrift3 43s ease-in-out infinite; }
  .ua-blob.u4 { width: 48%; height: 48%; left: 62%;  top: 48%;  background: radial-gradient(circle, var(--ch-glow), transparent 68%);       animation: uaDrift4 31s ease-in-out infinite; }
  .ua-blob.u5 { width: 42%; height: 44%; left: 32%;  top: 32%;   background: radial-gradient(circle, var(--ch-glow), transparent 70%);       animation: uaDrift5 23s ease-in-out infinite; }
  /* four-step paths at unrelated durations, so the pattern never visibly repeats */
  @keyframes uaDrift1 { 0%{transform:translate(0,0) scale(1)} 27%{transform:translate(14%,9%) scale(1.14)} 58%{transform:translate(-6%,16%) scale(0.94)} 81%{transform:translate(9%,-7%) scale(1.08)} 100%{transform:translate(0,0) scale(1)} }
  @keyframes uaDrift2 { 0%{transform:translate(0,0) scale(1.06)} 31%{transform:translate(-13%,-8%) scale(0.92)} 62%{transform:translate(11%,12%) scale(1.16)} 84%{transform:translate(-5%,5%) scale(1)} 100%{transform:translate(0,0) scale(1.06)} }
  @keyframes uaDrift3 { 0%{transform:translate(0,0) scale(0.96)} 24%{transform:translate(-11%,13%) scale(1.12)} 55%{transform:translate(8%,-9%) scale(1.02)} 79%{transform:translate(-14%,-4%) scale(1.1)} 100%{transform:translate(0,0) scale(0.96)} }
  @keyframes uaDrift4 { 0%{transform:translate(0,0) scale(1)} 29%{transform:translate(9%,-14%) scale(1.18)} 61%{transform:translate(-12%,6%) scale(0.9)} 86%{transform:translate(4%,11%) scale(1.06)} 100%{transform:translate(0,0) scale(1)} }
  @keyframes uaDrift5 { 0%{transform:translate(0,0) scale(1.04)} 33%{transform:translate(16%,7%) scale(0.94)} 64%{transform:translate(-9%,-12%) scale(1.14)} 88%{transform:translate(6%,4%) scale(1)} 100%{transform:translate(0,0) scale(1.04)} }
  .usecases > .wrap { position: relative; z-index: 1; }

  /* Horizontal gallery: two rows that scroll together, the lower one offset by
     half a card so the grid reads as a woven strip rather than a plain table.
     Contents are cloned in JS so the strip loops endlessly in both directions. */
  .uc-gallery { position: relative; margin-top: 40px; --uc-col: 272px; --uc-gap: 14px; }
  .uc-grid {
    display: flex; flex-direction: column; gap: var(--uc-gap);
    overflow-x: auto;
    /* overflow-y must be pinned: left to compute as auto the strip also captures
       vertical wheel/touch, and the page stops scrolling over it. Chaining is
       left on because an endless strip never reaches an edge to hand back at,
       and scroll-behavior is forced to auto so the loop's corrections jump
       instantly instead of animating against the user's gesture. */
    overflow-y: hidden;
    overscroll-behavior: auto;
    touch-action: pan-x pan-y;
    scroll-behavior: auto;
    /* room for the cards' own shadows, which the scroll box would otherwise clip
       into a hard edge at the top and bottom */
    padding: 16px 0 22px;
    scrollbar-width: none;
    /* fades the strip itself at both ends — no solid overlay, so nothing cuts
       across the card shadows */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 68px, #000 calc(100% - 68px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 68px, #000 calc(100% - 68px), transparent 100%);
  }
  .uc-grid::-webkit-scrollbar { display: none; }
  .uc-row { display: flex; gap: var(--uc-gap); width: max-content; }
  .uc-row[data-row="b"] { padding-left: calc(var(--uc-col) / 2 + var(--uc-gap) / 2); }

  .uc-card {
    position: relative;
    flex: 0 0 var(--uc-col);
    display: flex; flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line); border-top-color: var(--glass-edge);
    border-radius: var(--r-md);
    /* Без backdrop-filter. Картка переставна: під час прокрутки їй міняють
       позицію, а рухомий елемент із backdrop-filter змушує браузер щоразу
       наново знімати й розмивати фон під собою. iOS цю роботу під час інерції
       відкладає — і картка встигала намалювати лише власне тло, тобто той самий
       «чорний напівпрозорий прямокутник», а вміст з'являвся аж після зупинки.
       Візуально втрата мізерна: під карткою і так лежить м'який лаймовий
       градієнт, розмивати його вдруге майже нема чого. */
    background: var(--glass-fill-dark);
    box-shadow: var(--glass-shadow-1), inset 0 1px 0 rgba(255,255,255,0.07);
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  }
  .uc-card:hover {
    border-color: var(--lime);
    transform: translateY(-3px);
    box-shadow: var(--glass-shadow-2), 0 0 40px -18px var(--lime-glow), inset 0 1px 0 rgba(255,255,255,0.09);
  }

  /* Кадр не обрізається рівною лінією, а сходить нанівець: сама картинка гасне
     по альфі, а поверх того ж хвоста лежить її ж версія 24×14 (--lqip), розтягнута
     на всю ширину — тобто розмитий варіант цього ж фото. Виходить послідовність
     «різке фото → розмите → скло картки». Хвіст виступає нижче медіа-блока й
     заходить під заголовок, тож переходу немає де прочитатись як межа. */
  .uc-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: visible;
    /* Хвіст під медіа-блоком — це вся зона, в якій кадр устигає згаснути.
       Було 64px: на них перехід стискався так, що низ фото й нижній край
       шару розмиття читались як лінія. 96px дають переходу вдвічі довший
       розгін, і обидва шари встигають дійти до нуля поступово. */
    --uc-tail: 96px;
    /* Власного тла тут навмисно немає. Це був прямокутник рівно по межах блока:
       акцентний радіальний градієнт плюс світлий лінійний. Він обривався точно
       там, де раніше різалось фото, і після того, як картинку зробили згасаючою,
       саме його нижній край і лишався тією чіткою лінією. Картинки є в усіх
       картках, тож підкладка тут не потрібна. */
  }
  /* --lqip задається інлайном на <img>; ::after читає його з .uc-media, тож
     успадковуємо змінну вгору по дереву. */
  .uc-media img {
    position: absolute; top: 0; left: 0; right: 0;
    /* Крихітна (24×14) розмита версія кадру як тло самої картинки: картка
       ніколи не виглядає порожнім квадратом, поки вантажиться справжнє фото.
       Тло лежить на <img>, тож його гасить та сама маска — окремого
       прямокутника з різким краєм не з'являється. */
    background-image: var(--lqip); background-size: cover; background-position: center;
    width: 100%; height: calc(100% + var(--uc-tail)); object-fit: cover;
    /* Різке фото має згасати ШВИДШЕ, ніж проявляється розмиття під ним
       (::after нижче), інакше воно просвічує крізь блюр і низ кадру читається
       різким. Зона розчинення розтягнута: починається на 42% і доходить до
       нуля аж на 96%. Разом зі збільшеним хвостом це ~110px плавного
       переходу замість ~79px, тож край кадру ніде не збирається в лінію.
       Довжину набрано переважно хвостом, а не раннім початком: почни фото
       гаснути помітно вище — і воно вицвітає ще всередині видимої частини
       картки, чого тут якраз не треба. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,0.34) 70%, rgba(0,0,0,0.07) 85%, transparent 96%);
    mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,0.34) 70%, rgba(0,0,0,0.07) 85%, transparent 96%);
  }
  .uc-media::after {
    content: ''; position: absolute; left: 0; right: 0; top: 0;
    height: calc(100% + var(--uc-tail));
    pointer-events: none;
    /* Розмиття теж без backdrop-filter — з тієї ж причини. Замість знімати фон
       беремо той самий кадр у версії 24×14 (--lqip): розтягнутий на всю ширину,
       він і є розмитим варіантом цього ж фото. Виходить та сама послідовність
       «різке → розмите → скло», але намальована один раз разом із карткою. */
    background-image:
      linear-gradient(180deg, rgba(6,8,14,0) 0%, rgba(6,8,14,0.30) 62%, rgba(6,8,14,0.34) 100%),
      var(--lqip);
    background-size: cover, cover;
    background-position: center, center;
    /* Маска не лише вмикає розмиття внизу, а й гасить його назад до нуля перед
       самим краєм шару. Раніше вона лишалась щільною до кінця, і низ цього
       прямокутника читався як окремий темний шматок на кожній картці. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 46%, rgba(0,0,0,0.5) 64%, rgba(0,0,0,0.85) 80%, rgba(0,0,0,0.6) 91%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 46%, rgba(0,0,0,0.5) 64%, rgba(0,0,0,0.85) 80%, rgba(0,0,0,0.6) 91%, transparent 100%);
  }

  .uc-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 7px; padding: 20px 16px 16px; flex: 1; }
  .uc-card h3 { font-size: 14.5px; font-weight: 700; }
  .uc-card p { font-size: 12px; color: var(--muted); line-height: 1.45; }
  .uc-order {
    margin-top: auto; align-self: flex-start;
    /* No dark pane of its own here: on an already-dark card it read as a hole.
       A thin translucent wash sits lighter and calmer. */
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.075);
    color: rgba(255,255,255,0.94); border-radius: 999px;
    padding: 8px 14px; font-size: 11.5px; font-weight: 600;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease;
  }
  .uc-order:hover { border-color: var(--lime); background: rgba(198,255,0,0.14); color: #fff; }

  /* Arrows live outside the cards, out at the nav's width (nav is 1200px wide
     against the 1120px content column, which leaves exactly this margin). */
  .uc-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 3;
    width: 64px; height: 96px;
    display: grid; place-items: center;
    border: 0; background: none; padding: 0;
    color: rgba(255,255,255,0.58);
    font-family: 'Manrope', sans-serif; font-size: 52px; font-weight: 200; line-height: 1;
    text-shadow: 0 2px 18px rgba(0,0,0,0.65);
    cursor: pointer;
    transition: color 0.22s ease, transform 0.22s ease;
  }
  .uc-nav:hover { color: #fff; transform: translateY(-50%) scale(1.12); }
  .uc-prev { left: -52px; }
  .uc-next { right: -52px; }
  /* Підказка про горизонтальний скрол закінчується лаймовою стрілкою, яка ледь
     помітно ходить вправо: сам текст легко проґавити, а рух у бік прокрутки
     показує напрямок без слів. Через ::after, тож у розмітку нічого не додається. */
  .uc-hint {
    margin-top: 12px; font-size: 11.5px; color: var(--muted-2);
    display: inline-flex; align-items: center; gap: 7px;
  }
  .uc-hint::after {
    content: '→';
    color: var(--lime); font-size: 14px; line-height: 1;
    animation: hintNudge 1.8s ease-in-out infinite;
  }
  @keyframes hintNudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
  }

  /* ---------- FULL-BLEED STRIPS (desktop only) ----------
     Обидві галереї виходять на всю ширину монітора, щоб на широких екранах
     влазило більше карток. Але лівий край контенту лишається там, де він у
     решти блоків: контейнер full-bleed, а внутрішній padding дорівнює
     відступу .wrap. Маска гасить усе, що ліворуч від цієї лінії (нескінченна
     стрічка сценаріїв стартує всередині середньої копії, тож картки там є),
     і розмиває правий край об край екрана. */
  @media (min-width: 1240px){
    .usecases, .gallery { overflow-x: clip; }
    .uc-gallery, .gallery-strip {
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
    }
    /* Симетрично з обох боків: невеликий відступ, щоб картка не впиралась у край
       монітора, і довгий однаковий градієнт, у який вона плавно заходить. */
    .uc-grid, .gallery-grid {
      padding-left: 24px;
      padding-right: 24px;
      -webkit-mask-image: linear-gradient(90deg,
        transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
      mask-image: linear-gradient(90deg,
        transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
    }
    .uc-grid { --fade: 190px; }
    .gallery-grid { --fade: 190px; }
    .uc-prev, .gal-prev { left: 10px; }
    .uc-next, .gal-next { right: 10px; }
  }


  /* below 1240px the arrows would collide with the cards, so tuck them inside.
     Межа саме 1239, а не більше: від 1240px діє full-bleed правило вище, яке
     ставить стрілки на краї монітора, і ширший брейкпоінт його б перебив —
     це правило йде пізніше в файлі, тож за однакової специфічності виграє. */
  @media (max-width: 1239px){
    .uc-prev { left: -6px; }
    .uc-next { right: -6px; }
  }
  @media (max-width: 640px){
    .uc-gallery {
      --uc-col: 232px; --uc-gap: 12px;
      /* run the strip to both screen edges: on a phone the fade ate width that
         the cards need, so here they simply carry on past the edge instead */
      margin-inline: -28px;
    }
    .uc-nav { display: none; }
    .uc-grid {
      padding: 12px 28px 18px;
      -webkit-mask-image: none;
      mask-image: none;
    }
  }


  /* ---------- WHAT TO EXPECT ---------- */
  .testimonials { padding: var(--sec-pad) 0; }
  /* Картки стоять на спільній похилій площині й находять одна на одну кутами.
     perspective живе на контейнері, тож усі бачаться з однієї точки — інакше
     кожна крутилась би сама по собі й ряд розсипався б. */
  .tst-wrap { position: relative; margin-top: 40px; perspective: 1500px; }
  /* Same scroll-container settings as the other strips: overflow-y hidden and
     touch-action pan-x pan-y, or the strip swallows the page's vertical gesture. */
  .tst-strip {
    display: flex; align-items: stretch; gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior: auto;
    touch-action: pan-x pan-y;
    scroll-behavior: auto;
    scroll-snap-type: x proximity;
    /* Запас під нахил, підйом і світіння при наведенні: overflow-y тут hidden,
       тож усе, що виходить за падінг, зрізається. */
    padding: 54px 2px 64px;
    scrollbar-width: none;
    /* Маски тут навмисно немає. Маска робить елемент «коренем підкладки», і
       backdrop-filter усередині перестає бачити сусідні картки — під переднім
       склом сусідня лишалась абсолютно різкою. Краї гасимо накладкою на .tst-wrap. */
  }
  /* Розтушовка країв — поверх стрічки, а не маскою на ній. Колір той самий, що
     й тло сторінки, тож перехід не читається як смуга. */
  .tst-wrap::before, .tst-wrap::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 64px;
    z-index: 3; pointer-events: none;
  }
  .tst-wrap::before { left: 0;  background: linear-gradient(90deg, var(--night), rgba(5,7,13,0)); }
  .tst-wrap::after  { right: 0; background: linear-gradient(270deg, var(--night), rgba(5,7,13,0)); }
  .tst-strip::-webkit-scrollbar { display: none; }
  .tst-strip > .tst-card {
    flex: 0 0 320px; scroll-snap-align: center;
    transform: rotateY(-11deg) rotateZ(-2deg);
  }
  /* через одну — інший нахил і зсув униз, щоб ряд не читався як рівна гребінка */
  .tst-strip > .tst-card:nth-child(even) {
    transform: rotateY(-11deg) rotateZ(1.7deg) translateY(18px);
  }
  /* Находять кутами: наступна лягає поверх попередньої. Нахлист великий
     навмисно — на 34px під передньою карткою опинявся самий її падінг, і
     розмиття не було на чому показати. На 72px під нею вже частина сусідньої
     разом із текстом, і матове скло справді читається як скло. */
  .tst-strip > .tst-card + .tst-card { margin-left: -72px; }
  .tst-prev { left: -72px; }
  .tst-next { right: -72px; }
  /* Ці стрілки винесені далі за інші (-72px) і повноекранного режиму не мають,
     тож межу рахуємо від контейнера: поле обабіч дорівнює 72px лише від 1414px
     ширини вікна. Беремо 1439, щоб стрілка не лягала впритул до краю екрана. */
  @media (max-width: 1439px){ .tst-prev { left: -6px; } .tst-next { right: -6px; } }
  @media (max-width: 720px){
    /* Раніше стрічка впиралась у падінг .wrap і картка різалась вертикальною
       лінією. Тепер стрічка на всю ширину екрана: перша картка стоїть рівно під
       текстом, наступна визирає з-за краю, а зріз пом'якшений градієнтом. */
    .testimonials { overflow-x: clip; }
    .tst-wrap {
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
    }
    .tst-strip {
      padding: 4px 28px 16px;
      scroll-padding-left: 28px;
      scroll-snap-type: x mandatory;
      -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
      mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
    }
    /* на телефоні нахил менший: картка ширша, і на великому куті дальній край
       тексту помітно тікав би від читача */
    .tst-strip > .tst-card { flex-basis: calc(100vw - 96px); scroll-snap-align: start; }
    .tst-strip > .tst-card { transform: rotateY(-6deg) rotateZ(-1.2deg); }
    .tst-strip > .tst-card:nth-child(even) { transform: rotateY(-6deg) rotateZ(1deg) translateY(12px); }
    /* Розмиття однакове на обох версіях, але відчувалось слабшим: тут під
       переднє скло заходило 17% сусідньої картки проти 23% на десктопі. 62px
       від 278px ширини вирівнює частку. */
    .tst-strip > .tst-card + .tst-card { margin-left: -62px; }
    /* Активна картка підіймається на 8px і світиться на ~36px за свій край —
       разом це 44px, а зверху було 26px, тож світіння зрізалось (overflow-y тут
       hidden). Плюс краї більше не гасимо: на вузькому екрані та розтушовка
       з'їдала саме картку, а не порожнє поле. */
    .tst-strip { padding: 50px 28px 58px; }
    .tst-wrap::before, .tst-wrap::after { display: none; }
    .tst-prev, .tst-next { display: none; }
  }
  .tst-card {
    position: relative;
    display: flex; flex-direction: column;
    border: 1px solid var(--line); border-top-color: var(--glass-edge);
    border-radius: var(--r-md);
    padding: 26px 24px;
    /* лаймовий градієнт усередині матового скла: світло падає згори зліва
       і сходить нанівець, щоб не заважати читати цитату */
    background:
      radial-gradient(150% 125% at 12% -12%, rgba(198,255,0,0.24), rgba(198,255,0,0.08) 46%, rgba(198,255,0,0.03) 76%, transparent 100%),
      rgba(9,12,18,0.20);
    /* Сильніше за загальне скло: картки лежать одна на одній, і саме тут видно,
       наскільки розмита сусідня під нею. Тло трохи прозоріше — інакше розмиття
       нема крізь що показати. */
    /* Скло навмисно слабке: сусідня картка має читатись крізь нього як розмита
       форма, а не зникати. Сильніше розмиття тут виглядає як суцільна заливка —
       матовості не видно саме тому, що вона з'їдає все, що під нею. */
    backdrop-filter: blur(9px) saturate(1.25);
    -webkit-backdrop-filter: blur(9px) saturate(1.25);
    box-shadow: var(--glass-shadow-2), 0 26px 60px -34px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.09);
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
  }
  /* Мусить стояти ПІСЛЯ базового правила: специфічність однакова, тож вирішує
     порядок у файлі, а медіазапит з розкладкою стрічки лежить вище.
     Розмиття тут сильніше, ніж на десктопі: екран щільніший, і ті самі 9px
     читаються майже як чиста прозорість. */
  @media (max-width: 720px){
    /* Самого розмиття тут було замало: тло картки лише на 20% непрозоре, тож
       сусідня під нею проступала крізь тонування хоч скільки розмивай. На
       телефоні заливка щільніша — і тоді матовість нарешті видно. */
    .tst-card {
      background:
        radial-gradient(150% 125% at 12% -12%, rgba(198,255,0,0.20), rgba(198,255,0,0.06) 46%, transparent 100%),
        rgba(9,12,18,0.66);
      backdrop-filter: blur(30px) saturate(1.35);
      -webkit-backdrop-filter: blur(30px) saturate(1.35);
    }
  }
  .tst-card .tst-author { margin-top: auto; }
  /* Під курсором — і на дотику, де курсора немає, за класом is-active —
     картка вирівнюється до глядача й підіймається над сусідніми. */
  .tst-strip > .tst-card:hover,
  .tst-strip > .tst-card:nth-child(even):hover,
  .tst-strip > .tst-card.is-active,
  .tst-strip > .tst-card:nth-child(even).is-active {
    z-index: 2;
    transform: rotateY(-4deg) rotateZ(0deg) translateY(-8px);
    border-color: rgba(198,255,0,0.45);
    box-shadow: var(--glass-shadow-2), 0 0 60px -24px rgba(198,255,0,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
  }
  .tst-stars { color: var(--lime); font-size: 13px; letter-spacing: 2px; margin-bottom: 14px; }
  .tst-card p.tst-quote {
    font-family: 'Lora', serif; font-style: italic;
    font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.88);
    margin-bottom: 18px;
  }
  .tst-author { display: flex; align-items: center; gap: 10px; }
  .tst-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--ch-soft); color: var(--ch);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Unbounded'; font-weight: 700; font-size: 13px;
    transition: background 0.6s ease, color 0.6s ease;
  }
  .tst-name { font-size: 12.5px; font-weight: 700; }
  .tst-role { font-size: 11px; color: var(--muted-2); }

  /* Matte glass surface — the primary card treatment across the site.
     Gradient fill + inset top-edge highlight sells the frosted look; the
     backdrop blur alone was invisible on near-black. */
  .glass-panel {
    position: relative;
    background: var(--glass-fill-1);
    border: 1px solid var(--line);
    border-top-color: var(--glass-edge);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow-1), inset 0 1px 0 rgba(255,255,255,0.09);
  }

  /* ---------- ЛАЙТБОКС-КАРУСЕЛЬ ДЛЯ РОЛИКІВ ----------
     Ролики вертикальні 9:16, тож «на всю ширину» на десктопі неможливо: слайд
     упирається у висоту вікна. Тому всю геометрію рахуємо ВІД висоти — одна
     змінна --vh задає висоту слайда, ширина випливає з пропорції, а --step
     (ширина + проміжок) розсуває сусідів. Через це верстка не потребує JS для
     розмірів: він лише перемикає активний індекс.

     Слайди позиціоновані абсолютно й зсунуті на --off кроків від центру. Такий
     спосіб замість стрічки з overflow: не треба рахувати прокрутку, а перехід
     живе на transform, тобто на композиторі. */
  .vbox {
    --vh: min(78vh, calc((100vw - 40px) * 16 / 9));
    --step: calc(var(--vh) * 9 / 16 + 26px);
    display: none;
    position: fixed; inset: 0; z-index: 600;
  }
  .vbox.show { display: block; }
  .vbox-backdrop {
    position: absolute; inset: 0;
    background: rgba(5,7,13,0.78);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    opacity: 0; transition: opacity 0.35s ease;
  }
  .vbox.show .vbox-backdrop { opacity: 1; }
  .vbox-stage { position: absolute; inset: 0; }

  .vbox-slide {
    position: absolute; left: 50%; top: 50%;
    height: var(--vh); aspect-ratio: 9 / 16;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #000 center/cover no-repeat;
    box-shadow: 0 30px 80px -30px rgba(0,0,0,0.9);
    transform: translate(-50%, -50%) translateX(calc(var(--off) * var(--step))) scale(0.8);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(.22,1,.36,1), opacity 0.4s ease, filter 0.4s ease;
    will-change: transform;
  }
  /* Показуємо лише активний і по одному сусіду з боків: далі вони все одно за
     краєм екрана, а кожен зайвий шар — це ще одна велика картинка в памʼяті. */
  .vbox-slide[data-near] { opacity: 1; }
  .vbox-slide[data-near="1"] {
    filter: brightness(0.42) blur(2px);
    cursor: pointer;
  }
  .vbox-slide[data-near="1"]:hover { filter: brightness(0.6) blur(1px); }
  .vbox-slide.is-active {
    transform: translate(-50%, -50%) scale(1);
    filter: none;
  }
  .vbox-slide video {
    display: block; width: 100%; height: 100%;
    object-fit: cover; background: transparent;
  }

  .vbox-btn {
    position: absolute; z-index: 3;
    display: grid; place-items: center;
    border: 1px solid var(--glass-edge);
    background: rgba(5,7,13,0.5);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: #fff; cursor: pointer; padding: 0;
    border-radius: 50%;
    transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
  }
  .vbox-btn:hover, .vbox-btn:focus-visible {
    background: rgba(5,7,13,0.72); border-color: rgba(198,255,0,0.55);
  }
  .vbox-close { top: 18px; right: 18px; width: 44px; height: 44px; font-size: 17px; }
  .vbox-close:hover { transform: scale(1.06); }

  /* Кнопка паузи стоїть над нижнім краєм активного слайда, а не вікна: слайд
     завжди по центру, тож його низ — це рівно 50% + половина висоти. */
  .vbox-toggle {
    left: 50%; top: calc(50% + var(--vh) / 2 - 44px);
    transform: translate(-50%, -50%);
    width: 56px; height: 56px;
  }
  .vbox-toggle:hover, .vbox-toggle:focus-visible { transform: translate(-50%, -50%) scale(1.06); }
  .vbox-toggle .ic-pause { display: none; }
  .vbox.playing .vbox-toggle .ic-play { display: none; }
  .vbox.playing .vbox-toggle .ic-pause { display: block; }

  .vbox-arrow {
    top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px; font-size: 26px; line-height: 1;
    font-family: 'Manrope', sans-serif; font-weight: 300;
  }
  .vbox-arrow:hover, .vbox-arrow:focus-visible { transform: translateY(-50%) scale(1.08); }
  .vbox-prev { left: 18px; }
  .vbox-next { right: 18px; }
  .vbox-arrow[disabled] { opacity: 0.25; pointer-events: none; }

  /* Смужки-сегменти, як у сторіз: одразу видно, скільки роликів і котрий іде. */
  .vbox-dots {
    position: absolute; z-index: 3;
    left: 50%; transform: translateX(-50%);
    top: calc(50% - var(--vh) / 2 - 22px);
    display: flex; gap: 6px;
  }
  .vbox-dot {
    width: 26px; height: 3px; border-radius: 2px;
    background: rgba(255,255,255,0.22);
    border: 0; padding: 0; cursor: pointer;
    transition: background 0.3s ease, width 0.3s ease;
  }
  .vbox-dot.is-on { background: var(--lime); width: 34px; }

  /* ---- Телефон: сторіз ----
     Слайд на всю ширину, сусіди відсунуті на цілий екран, тож у кадрі завжди
     один ролик. Перемикання — тап по половині екрана або свайп; стрілки з
     курсором тут зайві. */
  @media (max-width: 760px){
    .vbox {
      --vh: min(88vh, calc((100vw - 20px) * 16 / 9));
      --step: 100vw;
    }
    .vbox-slide { border-radius: var(--r-md); }
    .vbox-slide[data-near="1"] { filter: none; }
    .vbox-arrow { display: none; }
    .vbox-close { top: 12px; right: 12px; width: 40px; height: 40px; }
    .vbox-dots { top: calc(50% - var(--vh) / 2 - 18px); }
    .vbox-dot { width: 20px; }
    .vbox-dot.is-on { width: 28px; }
    /* Зони тапу поверх слайда: ліва третина — назад, решта — вперед. Під
       кнопкою паузи їх немає, бо вона лежить вище за z-index. */
    .vbox-tap {
      position: absolute; z-index: 2; top: 0; bottom: 0;
      border: 0; background: transparent; cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .vbox-tap-prev { left: 0; width: 33%; }
    .vbox-tap-next { right: 0; width: 67%; }
  }
  @media (min-width: 761px){
    .vbox-tap { display: none; }
  }
  @media (prefers-reduced-motion: reduce){
    .vbox-slide { transition: opacity 0.2s ease; }
  }

  /* ---------- LEAD MODAL ---------- */
  /* З'являється поверх існуючого formSuccess одразу після відправки — той
     екран лишається як був, це додатковий шар над ним. Задній фон
     розмивається (той самий --glass-blur, що й решта сайту), картка — той
     самий .glass-panel матеріал, що й панелі вище по сторінці. */
  .lead-modal {
    display: none;
    position: fixed; inset: 0; z-index: 500;
    align-items: center; justify-content: center;
    padding: 24px;
  }
  .lead-modal.show { display: flex; }
  .lead-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(5,7,13,0.62);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    opacity: 0; transition: opacity 0.35s ease;
  }
  .lead-modal.show .lead-modal-backdrop { opacity: 1; }
  .lead-modal-card {
    position: relative;
    width: 100%; max-width: 420px;
    border-radius: var(--r-lg);
    padding: 36px 30px 30px;
    text-align: center;
    transform: translateY(14px) scale(0.97);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(.2,.9,.25,1), opacity 0.35s ease;
  }
  .lead-modal.show .lead-modal-card { transform: translateY(0) scale(1); opacity: 1; }
  .lead-modal-close {
    position: absolute; top: 16px; right: 16px;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--glass-2);
    color: var(--muted); font-size: 15px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: color 0.2s, border-color 0.2s, transform 0.2s;
  }
  .lead-modal-close:hover { color: var(--lime); border-color: rgba(198,255,0,0.4); transform: rotate(90deg); }
  .lead-modal-big {
    font-family: 'Unbounded', sans-serif; font-size: 21px; font-weight: 600;
    color: var(--lime); margin-bottom: 10px; letter-spacing: -0.01em;
  }
  .lead-modal-text { color: var(--muted); font-size: 14px; }
  .lead-modal-divider {
    height: 1px; margin: 24px 0 20px;
    background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
  }
  .lead-modal-sub { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
  /* flex:1 на кожній іконці розтягує ряд рівно на всю ширину картки й сам
     перерозподіляє простір, якщо іконок стане більше чи менше — на відміну
     від фіксованого gap, тут не треба нічого підганяти вручну. */
  .lead-modal-socials { display: flex; align-items: center; justify-content: space-between; }
  .lead-modal-socials .f-soc {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 4px 0;
  }
  .lead-modal-socials .f-soc svg { width: 30px; height: 30px; }

  @media (max-width: 480px) {
    .lead-modal-card { padding: 30px 22px 24px; border-radius: var(--r-md); }
    .lead-modal-big { font-size: 19px; }
    .lead-modal-socials .f-soc svg { width: 27px; height: 27px; }
  }