/* Матове скло Хʼюстон, версія 2 — «живіше».
 *
 * Що змінилось проти першої: скло було рівне й пластикове. Справжнє скло
 * впізнають за трьома речами, і всі три тут є:
 *   1) райдужна кромка — тонкий conic-градієнт по межі, він повертається
 *      разом із прокруткою (змінна --gsc від hx-glass.js);
 *   2) відблиск, що повзе поверхнею, теж прив'язаний до прокрутки;
 *   3) дрібне зерно — без нього матова поверхня виглядає намальованою.
 *      Зерно — крихітний SVG у самому файлі, окремого запиту не робить.
 *
 * Ціна кадру не зросла: усе це фон і композитні перетворення, жодного
 * додаткового backdrop-filter. Бюджет розмиття на телефоні лишився той
 * самий, що був до скла, — дві поверхні, 17% екрана.
 */

:root{
  --gsc:.25;                       /* 0..1, ставить hx-glass.js */
  --gpx:0px;
  --g-line: rgba(255,255,255,.13);
  --g-hl:   rgba(255,255,255,.30);
  --g-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.5'/></svg>");
}


/* ---------- райдужна кромка ----------
   Через background-clip:padding-box/border-box зробити не можна: та техніка
   вимагає НЕПРОЗОРОЇ першої заливки, а в скла вона напівпрозора — конічний
   градієнт проступав крізь усю кнопку і робив її каламутною (побачив на
   рендері). Тому кромку малюємо окремим шаром і вирізаємо маскою:
   всередині лишається чисте скло, забарвлена лише смуга в 1 px. */
.calc-out::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;
  background:conic-gradient(from calc(var(--gsc) * 1turn),
    rgba(158,188,50,.75), rgba(120,200,220,.65), rgba(190,170,255,.55),
    rgba(255,215,150,.65), rgba(158,188,50,.75));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  z-index:2}
/* Де маски немає (старі вебвю) — просто рівна кромка, без райдуги.
   Скло лишається склом, просто без переливу. */
@supports not ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .calc-out::before{display:none}
  .calc-out{border:1px solid var(--g-line)!important}
}

/* ---------- матова панель ---------- */
.g-pane{
  border-radius:18px;
  box-shadow:
    inset 0 1px 0 var(--g-hl),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 10px 34px rgba(0,0,0,.38);
}
/* зерно + відблиск, що повзе від прокрутки */
.g-pane::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(108deg,
    transparent 34%, rgba(255,255,255,.13) 46%,
    rgba(255,255,255,.05) 52%, transparent 66%);
  transform:translateX(calc((var(--gsc) * 210 - 105) * 1%));
  z-index:0}
@media(prefers-reduced-motion:reduce){
  .g-pane::after{transform:none;opacity:.5}
}
/* вміст панелі над відблиском */
.g-pane > *,.g-btn > *{position:relative;z-index:1}

/* справжнє розмиття — тільки де воно дешеве */
@media(min-width:900px){
  @supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
    .g-pane{-webkit-backdrop-filter:blur(18px) saturate(135%);
            backdrop-filter:blur(18px) saturate(135%)}
  }
}

/* ---------- шапка ---------- */
.nav{
  background:
    linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.012) 100%),
    rgba(13,11,9,.74)!important;
  border-bottom:1px solid transparent!important;
  border-image:linear-gradient(90deg,
    rgba(158,188,50,.0) 0%,
    rgba(158,188,50,.45) calc(var(--gsc) * 100%),
    rgba(120,200,220,.35) calc(var(--gsc) * 100% + 12%),
    rgba(255,255,255,.0) 100%) 1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 8px 26px rgba(0,0,0,.30)}
/* Ніякого overflow:hidden на шапці: він обрізав випадне меню. Блік і так
   не вилізе — він absolute з inset:0, тобто рівно по межах шапки. */
@media(max-width:899px){
  .nav{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}
@media(min-width:900px){
  .nav{-webkit-backdrop-filter:blur(20px) saturate(140%);
       backdrop-filter:blur(20px) saturate(140%)}
}
.nav::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.07) 50%,transparent 62%);
  transform:translateX(calc((var(--gsc) * 160 - 80) * 1%))}
@media(prefers-reduced-motion:reduce){.nav::after{display:none}}

/* ---------- випадне меню ---------- */
.nav .drop-menu{
  background:
    linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 100%),
    rgba(14,16,21,.86)!important;
  border:1px solid var(--g-line)!important;
  border-radius:16px!important;
  box-shadow:inset 0 1px 0 var(--g-hl), 0 18px 44px rgba(0,0,0,.5)!important;
  -webkit-backdrop-filter:blur(20px) saturate(135%);
  backdrop-filter:blur(20px) saturate(135%);
  overflow:hidden}

/* ---------- нижня панель на телефоні ---------- */
.msb{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.015) 100%),
    rgba(13,11,9,.90)!important;
  border-top:1px solid var(--g-line)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 -8px 26px rgba(0,0,0,.34)}

/* ---------- калькулятор ---------- */
.calc-out{
  background:
    linear-gradient(180deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.025) 55%,
                            rgba(255,255,255,.04) 100%),
    rgba(14,16,21,.55)!important;
  border:1px solid transparent!important;
  border-radius:20px!important;
  box-shadow:inset 0 1px 0 var(--g-hl), 0 14px 40px rgba(0,0,0,.34);
  position:relative;isolation:isolate}
@media(min-width:900px){
  @supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
    .calc-out{-webkit-backdrop-filter:blur(16px) saturate(130%);
              backdrop-filter:blur(16px) saturate(130%)}
  }
}
.calc-opt{
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.028))!important;
  border:1px solid var(--g-line)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .16s ease, box-shadow .16s ease, background .2s ease}
.calc-opt:active{transform:translateY(1px)}
.calc-opt[aria-pressed="true"]{
  background:linear-gradient(180deg, rgba(182,212,70,.98), rgba(146,176,48,.96))!important;
  border-color:rgba(182,212,70,.9)!important;
  color:#0b0f04!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 6px 20px rgba(158,188,50,.28)}
@media(prefers-reduced-motion:reduce){
  .calc-opt{transition:none}.calc-opt:active{transform:none}
}

/* ---------- чорна діра в героя ---------- */
.hero-hole{
  position:absolute;z-index:1;pointer-events:none;
  top:6%;right:-6%;width:min(52vw,540px);
  mix-blend-mode:screen;            /* чорне тло картинки зникає саме собою */
  opacity:.9;
  transform:translate3d(0,var(--gpx),0);
  will-change:transform}
.hero-hole img{width:100%;height:auto;display:block}
@media(max-width:899px){
  .hero-hole{top:3%;right:-18%;width:74vw;opacity:.8}
}
@media(prefers-reduced-motion:reduce){.hero-hole{transform:none}}


/* ---------- мобільна група дій ----------
   Кнопки запису й цін на телефоні тепер по центру й однакової ширини:
   у стовпчик ліворуч вони читались як список, а не як головна дія. */
@media(max-width:760px){
  /* Дії героя: у стовпчик, по центру, однакової ширини. Ліворуч вони
     читались як список посилань, а не як головна дія екрана. */
  .hero-actions{display:flex;flex-direction:column;align-items:center;gap:10px}
  .hero-actions > .btn,.hero-actions > a,.hero-actions > button{
    width:100%;max-width:340px;justify-content:center;text-align:center}
  .hero-inner{text-align:center}

  /* Форма запису: поля в один стовпчик на всю ширину, кнопки під ними
     по центру. Раніше «Записатися» і Telegram стояли ліворуч різної
     ширини — на телефоні це читається як дві різні за вагою дії. */
  .booking .form-row{display:flex;flex-direction:column;gap:10px}
  .booking .form-row > *{width:100%}
  .booking .ff,.booking .fs{width:100%;min-height:52px}
  .booking .btn,.booking .btn-tg-form{
    width:100%;max-width:340px;margin-left:auto;margin-right:auto;
    display:flex;align-items:center;justify-content:center;min-height:52px}
  .booking .form-trust{text-align:center}
  .booking-head{text-align:center}

  /* Дії калькулятора теж по центру */
  .calc-acts{justify-content:center}
  .calc-acts > .btn{flex:1 1 auto;min-width:150px;justify-content:center}
}


/* ================= КНОПКИ: РІДКЕ СКЛО (версія 3) =================
 *
 * Проти версії 2 змінився не колір, а матеріал. Стара кнопка була
 * підсвічена зверху пластина. Скло впізнають за іншим:
 *
 *   1) кромка ловить світло ДВІЧІ — угорі-ліворуч і внизу-праворуч.
 *      Промінь входить у товщу і виходить із протилежного боку; одна
 *      світла грань угорі — це метал, а не скло;
 *   2) під верхнім краєм світло розмивається всередину на кілька
 *      пікселів (inset-тінь із від'ємним spread) — це заломлення;
 *   3) нижня межа світліша за середину: світло збирається біля дальньої
 *      стінки;
 *   4) натиснення стискає кнопку і гасить тінь. Товсте скло під пальцем
 *      сідає, а не просто темнішає.
 *
 * Тінь із двох шарів: контактна 1px (кнопка торкається поверхні) і
 * широка м'яка (висота над нею). Один шар дає наліпку.
 *
 * Ціна кадру нульова: усе це background і box-shadow, жодного нового
 * backdrop-filter. Бюджет розмиття на телефоні не змінився.
 */

:root{
  --lg-ease:cubic-bezier(.22,.90,.28,1.06);   /* легка пружина */
  --lg-rim-hi:rgba(255,255,255,.30);
  --lg-rim-lo:rgba(255,255,255,.18);
}

/* ---------- спільна геометрія й фізика ---------- */
.btn,.g-btn,.g-cta,.calc-opt,.tmap-gbtn,.msb-btn{
  position:relative;
  isolation:isolate;
  border:1px solid transparent!important;
  transition:transform .24s var(--lg-ease),
             box-shadow .24s var(--lg-ease),
             background-color .2s ease!important;
  -webkit-tap-highlight-color:transparent}

/* Базовий .btn гасив непрозорість на наведенні — скло від цього
   каламутніє. Підйом і тінь роблять те саме виразніше. */
.btn:hover,.g-btn:hover,.g-cta:hover{opacity:1}

/* ---------- кромка: світло входить і виходить ----------
   Через background-clip зробити не можна: та техніка вимагає непрозорої
   першої заливки, а скло напівпрозоре. Тому кромка — окремий шар,
   вирізаний маскою; всередині лишається чисте скло. */
.g-btn::before,.g-cta::before,
.btn-lime::before,.btn-outline::before,.btn-ghost::before,
.btn-tg-form::before,.calc-opt::before,.tmap-gbtn::before,
.msb-btn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;padding:1px;
  background:linear-gradient(152deg,
    var(--lg-rim-hi) 0%,
    rgba(255,255,255,.14) 26%,
    rgba(255,255,255,.02) 48%,
    rgba(255,255,255,.16) 74%,
    var(--lg-rim-lo) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  z-index:2}
/* Старі вебвʼю без маски: рівна кромка. Скло лишається склом, просто
   без подвійного полиску. */
@supports not ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .g-btn::before,.g-cta::before,
  .btn-lime::before,.btn-outline::before,.btn-ghost::before,
  .btn-tg-form::before,.calc-opt::before,.tmap-gbtn::before,
  .msb-btn::before{display:none}
  .g-btn,.g-cta,.btn-lime,.btn-outline,.btn-ghost,
  .btn-tg-form,.calc-opt,.tmap-gbtn{border-color:var(--g-line)!important}
}

/* ---------- відблиск, що повзе від прокрутки ----------
   z-index:-1 кладе його НАД власним тлом кнопки, але ПІД текстом:
   у кнопках текст — голий вузол, йому z-index не поставиш. */
.g-btn::after,.g-cta::after,
.btn-lime::after,.btn-outline::after,.btn-ghost::after,
.btn-tg-form::after,.msb-btn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:-1;
  background-image:linear-gradient(106deg,
    transparent 36%, rgba(255,255,255,.09) 47%,
    rgba(255,255,255,.03) 54%, transparent 66%);
  background-size:230% 100%;
  background-repeat:no-repeat;
  background-position:calc(var(--gsc) * 200% - 50%) 0}
@media(prefers-reduced-motion:reduce){
  .g-btn::after,.g-cta::after,
  .btn-lime::after,.btn-outline::after,.btn-ghost::after,
  .btn-tg-form::after,.msb-btn::after{background-position:50% 0;opacity:.55}
}

/* ---------- друга дія: темне скло ---------- */
.g-btn,.btn-outline,.btn-ghost,.btn-tg-form,.calc-opt,.tmap-gbtn,.msb-btn{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.062) 0%,
      rgba(255,255,255,.030) 55%,
      rgba(255,255,255,.042) 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 1px 1px rgba(0,0,0,.28),
    0 4px 12px -6px rgba(0,0,0,.34)!important}

.g-btn:hover,.btn-outline:hover,.btn-ghost:hover,
.btn-tg-form:hover,.calc-opt:hover,.tmap-gbtn:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 1px 2px rgba(0,0,0,.26),
    0 8px 18px -7px rgba(0,0,0,.40)!important}

/* ---------- головна дія: те саме скло, залите лаймом ----------
   Прозорість тримаємо високою: кнопка запису має лишатись
   найпомітнішою на екрані. */
.g-cta,.btn-lime{
  color:#0b0f04!important;
  background:
    linear-gradient(180deg,
      rgba(176,208,64,1) 0%,
      rgba(162,193,53,1) 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 1px 1px rgba(0,0,0,.24),
    0 4px 12px -6px rgba(158,188,50,.28)!important}

.g-cta:hover,.btn-lime:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 1px 2px rgba(0,0,0,.22),
    0 8px 18px -7px rgba(158,188,50,.36)!important}

.g-cta::before,.btn-lime::before{
  --lg-rim-hi:rgba(255,255,255,.42);
  --lg-rim-lo:rgba(255,255,255,.24)}

/* ---------- натиснення: скло сідає ---------- */
.btn:active,.g-btn:active,.g-cta:active,
.calc-opt:active,.tmap-gbtn:active,.msb-btn:active{
  transform:translateY(0) scale(.985);
  transition-duration:.09s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 1px 5px rgba(0,0,0,.20),
    0 1px 1px rgba(0,0,0,.24)!important}

.btn:focus-visible,.g-btn:focus-visible,.g-cta:focus-visible,
.calc-opt:focus-visible,.tmap-gbtn:focus-visible{
  outline:2px solid rgba(182,212,70,.9);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .btn,.g-btn,.g-cta,.calc-opt,.tmap-gbtn,.msb-btn{transition:none!important}
  .btn:hover,.g-btn:hover,.g-cta:hover,.btn-lime:hover{transform:none}
  .btn:active,.g-btn:active,.g-cta:active,
  .calc-opt:active,.tmap-gbtn:active{transform:none}
}

/* ---------- розміри (для нової розмітки) ---------- */
.g-btn--sm{padding:9px 18px!important;font-size:13px!important}
.g-btn--lg{padding:17px 34px!important;font-size:16px!important}
.g-btn--icon{padding:0!important;width:44px;height:44px;
  justify-content:center;border-radius:100px!important}


/* ---------- калькулятор: стан вибору ----------
 * Лаймова плита серед десяти темних карток кричала голосніше, ніж того
 * варта дія «я обрав пункт». Тепер вибір — це грань, текст і свічення:
 * помітно з першого погляду, але сітка лишається спокійною.
 *
 * Вага 400 в обох станах. Стрибок 500 -> 700 міняв ширину рядка, і
 * текст смикався просто під пальцем.
 */
.calc-opt,.tmap-gbtn,
.calc-opt[aria-pressed="true"],.tmap-gbtn[aria-pressed="true"]{
  font-weight:400!important}

.calc-opt[aria-pressed="true"],.tmap-gbtn[aria-pressed="true"]{
  color:var(--lime,#9ebc32)!important;
  background:
    linear-gradient(180deg,
      rgba(182,212,70,.075) 0%,
      rgba(182,212,70,.045) 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(182,212,70,.50),
    0 1px 1px rgba(0,0,0,.26),
    0 4px 12px -7px rgba(158,188,50,.22)!important}

/* кромка вибраного світиться лаймом, а не білим */
.calc-opt[aria-pressed="true"]::before,.tmap-gbtn[aria-pressed="true"]::before{
  padding:1px;
  background:linear-gradient(152deg,
    rgba(198,228,96,.72) 0%,
    rgba(182,212,70,.34) 30%,
    rgba(182,212,70,.20) 52%,
    rgba(182,212,70,.36) 76%,
    rgba(198,228,96,.60) 100%)}

.calc-opt[aria-pressed="true"]:hover,.tmap-gbtn[aria-pressed="true"]:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 0 1px rgba(182,212,70,.68),
    0 1px 2px rgba(0,0,0,.24),
    0 7px 16px -8px rgba(158,188,50,.28)!important}

/* ================= ПАПЕРОВІ КОЛАЖІ (версія 2) =================
 *
 * Версія 1 ставила колаж окремим блоком у потік — сторінка виростала
 * на 250–470 px. Це прямо суперечило вимозі: картинка має вписатись,
 * а не зайняти місце.
 *
 * Тому тепер колаж не займає жодного пікселя потоку:
 *   - контейнер має height:0, сама картинка absolute;
 *   - висить у полі, яке вже порожнє: праворуч від центрованого блоку
 *     заклику й у нижньому правому куті футера;
 *   - до 1280 px вільного поля немає взагалі, тому там картинки просто
 *     немає. На телефоні висота сторінки не змінюється ні на піксель.
 *
 * Растрований півтон на білому: біле тло — частина малюнка. У футері
 * (тло --cream2) його прибирає mix-blend-mode:multiply; на темних
 * сторінках навпаки лишаємо білу картку з тінню — вирізка, наклеєна
 * поверх.
 */

/* ---------- у футері ---------- */
.footer-bottom{position:relative}
.hxc-foot{
  position:absolute;right:-24px;bottom:12px;
  margin:0;padding:0;line-height:0;pointer-events:none;z-index:1}
.hxc-foot img{
  /* Ширина рахується з вільного поля: колонка тексту — 1064 px, решта
     ділиться навпіл. Так картинка ніколи не наїжджає на текст, на якій
     би ширині її не дивились. Невеликий виступ за край навмисний:
     вирізка, наклеєна з краю аркуша. */
  width:clamp(120px, calc((100vw - 1064px)/2 + 10px), 180px);
  height:auto;aspect-ratio:3/4;
  mix-blend-mode:multiply;
  transform:rotate(1.4deg)}

/* ---------- на сторінці послуги ---------- */
.hxc-svc{
  position:relative;height:0;margin:0;padding:0;
  overflow:visible;pointer-events:none;z-index:1}
.hxc-svc figure{position:absolute;right:-36px;bottom:-96px;margin:0}
.hxc-svc figcaption{display:none}
.hxc-svc img{
  width:clamp(140px, calc((100vw - 1064px)/2 + 24px), 230px);
  height:auto;aspect-ratio:3/4;
  transform:rotate(-1.4deg);
  box-shadow:0 2px 4px rgba(0,0,0,.38), 0 16px 34px -12px rgba(0,0,0,.5)}

/* Вільного поля праворуч немає до 1280 px: колонка тексту займає всю
   ширину. Там картинки просто немає — жодного приросту висоти. */
@media(max-width:1279px){
  .hxc-foot,.hxc-svc{display:none}
}