/* =========================================================================
   PROEKCIA · Брендбук — 03. COMPONENTS
   Перевикористовувані елементи: кнопки, лейбли-пігулки, шапка, мобільне меню,
   медіа-рамки, картка кейсу, рядок «до → після», контакти, футер.
   Секційної логіки тут немає — лише компоненти.
   ========================================================================= */

/* ============================ КНОПКА ===================================== */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--ff-display);   /* текст кнопок — Stolzl Regular */
  min-height:52px;                 /* зручно для пальця */
  padding:.9em 1.5em;
  border-radius:var(--radius-pill);
  font-size:var(--fs-small);
  font-weight:400;
  letter-spacing:-.005em;
  line-height:1;
  white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease);
}
.btn:active{transform:translateY(1px);}

/* ---- заливка росте з точки, де курсор ----------------------------------
   JS (main.js) кладе в --mx/--my координати курсора, CSS вирощує з цієї
   точки коло кольору --fill. Кожен різновид кнопки задає свій --fill. */
.btn,.hero__btn,.manifesto__btn,.garage__btn,.btn-bordered{
  position:relative;isolation:isolate;overflow:hidden;
}
.btn::before,.hero__btn::before,.manifesto__btn::before,
.garage__btn::before,.btn-bordered::before{
  content:"";position:absolute;z-index:-1;
  left:var(--mx,50%);top:var(--my,50%);
  width:44em;height:44em;margin:-22em 0 0 -22em;border-radius:50%;
  background:var(--fill,transparent);
  transform:scale(0);transition:transform .5s var(--ease);
}
@media (hover:hover){
  .btn:hover::before,.hero__btn:hover::before,.manifesto__btn:hover::before,
  .garage__btn:hover::before,.btn-bordered:hover::before{
    transform:scale(1);
    transition-duration:.38s;transition-timing-function:cubic-bezier(.5,0,.75,.3);
  }
}
/* клавіатура бачить той самий стан, тільки без руху від точки */
.btn:focus-visible::before,.hero__btn:focus-visible::before,
.manifesto__btn:focus-visible::before,.garage__btn:focus-visible::before,
.btn-bordered:focus-visible::before{transform:scale(1);}

.btn__arrow{
  width:1em;height:1em;flex:0 0 auto;
  transition:transform var(--dur) var(--ease);
}
.btn:hover .btn__arrow{transform:translateX(.28em);}

/* знімок, що їде з паралаксом: власний шар, щоб браузер не перемальовував
   його щокадру (клас вішає js/sections.js) */
.is-parallax{will-change:transform;}

/* мем біля курсора при наведенні на кнопку (js/sections.js) */
.meme{
  position:fixed;left:0;top:0;z-index:300;
  width:clamp(140px,11vw,190px);height:auto;
  border-radius:.4rem;
  box-shadow:0 10px 30px rgba(13,13,13,.25);
  transform-origin:50% 100%;
  pointer-events:none;
}
/* стікер без фону — без рамки-прямокутника, тінь по контуру */
.meme--cut{border-radius:0;box-shadow:none;filter:drop-shadow(0 10px 18px rgba(0,0,0,.25));}

.btn--primary{background:var(--ink);color:var(--white);--fill:var(--accent);}

.btn--accent{background:var(--accent);color:var(--accent-ink);--fill:var(--ink);}

.btn--ghost{border:1px solid var(--ink);color:var(--ink);--fill:var(--ink);}
.btn--ghost:hover{color:var(--white);}

.btn--night{border:1px solid var(--night-rule);color:var(--night-fg);--fill:var(--night-fg);}
.btn--night:hover{color:var(--ink);border-color:var(--night-fg);}

.btn--sm{min-height:42px;padding:.7em 1.15em;font-size:var(--fs-label);letter-spacing:.02em;}

/* ============================ ПІГУЛКА / ТЕГ ============================== */
/* Форма з презентації: контурна «пігулка» з великим радіусом. */
.pill{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.62em 1.05em;
  border:1px solid var(--rule);
  border-radius:var(--radius-pill);
  font-size:var(--fs-small);
  color:var(--ink-70);
  background:transparent;
}
.pill--solid{background:var(--ink);border-color:var(--ink);color:var(--white);}
.pill--accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.pill--night{border-color:var(--night-rule);color:var(--night-fg);}

/* маркер-цифра з презентації: чорне коло, світла цифра */
.dot-num{
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  width:2.6em;height:2.6em;border-radius:50%;
  background:var(--ink);color:var(--white);
  font-size:var(--fs-label);letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.section--night .dot-num{background:var(--night-fg);color:var(--ink);}

/* ============================ ШАПКА =====================================
   1:1 з .site-header на proekcia.com (зняв getComputedStyle при 1440 і 390):
   лого 200×43, бургер = підпис «МЕНЮ» 0.833vw + чорна пігулка 68×35 з
   радіусом 151px і двома білими лініями 26.45×2 на відстані ±4.53px.
   Навігації в рядку немає — усе в панелі #sidenav, як на сайті.        */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:1899;
  background:transparent;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             transform .45s var(--ease);
  border-bottom:1px solid transparent;
}
/* гортаємо вниз — шапка йде вгору, гортаємо вгору — повертається */
.site-header.is-hidden{transform:translateY(-100%);}
.site-header.is-stuck{
  /* суцільний фон замість напівпрозорого з розмиттям: blur на закріпленій
     шапці перераховується щокадру під час прокрутки і помітно її гальмує */
  background:var(--paper);
  border-bottom-color:var(--rule-soft);
}
.site-header__inner{
  position:relative;
  width:100%;max-width:var(--page-max);margin-inline:auto;
  padding:1.6vw var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
}
@media only screen and (max-width:767px){ .site-header__inner{padding:12px 20px;} }

/* посилання в рядку — від 992px; нижче їх замінює бургер */
/* навігація точно по центру рядка, незалежно від ширини лого і кнопки */
.site-header__nav{
  display:none;align-items:center;justify-content:center;
  position:absolute;left:50%;transform:translateX(-50%);
  gap:clamp(1rem,1.9vw,2.1rem);
}
@media only screen and (min-width:992px){ .site-header__nav{display:flex;} }
/* сім пунктів меню на вузьких десктопах ледь не впираються у кнопку —
   там проміжок менший */
@media (min-width:992px) and (max-width:1200px){
  .site-header__nav{gap:1.25vw;}
}
@media (min-width:992px) and (max-width:1100px){
  .site-header__nav{gap:.55rem;}
}
.site-header__nav a{
  position:relative;
  font-size:max(.94vw,14px);
  color:var(--ink-70);
  padding-block:.4rem;white-space:nowrap;
  transition:color var(--dur-fast) var(--ease);
}
.site-header__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
/* Одна риска, що їде між пунктами (js/sections.js). Поки скрипт не
   підхопив меню, працюють власні риски пунктів нижче. */
.site-header__nav.has-ink a::after{display:none;}
.site-header__ink{
  position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--ink);opacity:0;pointer-events:none;
}
.site-header.is-over-accent .site-header__ink{background:var(--white);}
.site-header.is-over-night .site-header__ink{background:var(--night-fg);}

/* на наведенні текст перемикається на Stolzl Regular */
.site-header__nav a:hover,
.site-header__nav a[aria-current="true"]{color:var(--ink);font-family:var(--ff-display);}
.site-header__nav a:hover::after,
.site-header__nav a[aria-current="true"]::after{transform:scaleX(1);}

/* кнопка в шапці — від 992px, поруч із навігацією */
.site-header__cta{display:none;flex:none;}
@media only screen and (min-width:992px){ .site-header__cta{display:inline-flex;} }
/* над помаранчевим героєм — світла пігулка, як у першому екрані,
   на наведенні (у будь-якому стані) чорна з білим текстом */
.site-header.is-over-accent .site-header__cta{background:var(--paper);color:var(--ink);}
.site-header.is-over-night .site-header__cta{background:var(--night-fg);color:var(--ink);}
/* кнопка в шапці на наведенні завжди чорніє — у будь-якому стані шапки;
   фон не підмінюємо, його накриває заливка з-під курсора */
.site-header__cta{--fill:var(--ink);}
.site-header__cta:hover,
.site-header.is-over-accent .site-header__cta:hover,
.site-header.is-over-night .site-header__cta:hover{color:var(--white);}

.site-header__logo{display:block;flex:none;width:150px;}   /* 150×32 у мобільному макеті */
@media only screen and (min-width:768px){ .site-header__logo{width:12.53vw;max-width:200px;} }
.site-header__logo img{width:100%;height:auto;}

/* ---- бургер ---- */
.hamburger{
  display:inline-flex;align-items:center;gap:12px;flex:none;
  color:var(--ink);
}
@media only screen and (min-width:992px){ .site-header .hamburger{display:none;} }
/* до 992px кнопка менша і в інверсії: біла пігулка з чорними рисками */
.hamburger__box{
  position:relative;display:block;flex:none;
  width:56.5px;height:29.2px;border-radius:352px;   /* з мобільного макета */
  background:var(--ink);          /* за замовчуванням чорна пігулка */
}
.hamburger__inner,
.hamburger__inner::before,
.hamburger__inner::after{
  position:absolute;left:50%;
  width:22.21px;height:2px;border-radius:352px;   /* риски жирніші */
  background:var(--white);        /* з білими рисками */
  transition:transform var(--dur) var(--ease),opacity var(--dur-fast) var(--ease);
}

.hamburger__inner{top:50%;transform:translate(-50%,-50%);background:transparent;}
.hamburger__inner::before{content:"";top:-3.49px;transform:translateX(-50%);}
.hamburger__inner::after{content:"";top:3.49px;transform:translateX(-50%);}

/* стан «відкрито» — лінії складаються в хрестик */
.hamburger.is-active .hamburger__inner::before{transform:translateX(-50%) translateY(3.49px) rotate(45deg);}
.hamburger.is-active .hamburger__inner::after{transform:translateX(-50%) translateY(-3.49px) rotate(-45deg);}

.hamburger:hover .hamburger__box{background:var(--accent);}
.hamburger:hover .hamburger__inner::before,
.hamburger:hover .hamburger__inner::after{background:var(--white);}

/* у відкритій панелі кнопка — чорне коло 32x32 з білим хрестиком */
#burgerClose .hamburger__box{width:32px;height:32px;border-radius:50%;background:var(--ink);}
#burgerClose .hamburger__inner::before,
#burgerClose .hamburger__inner::after{width:12.7px;background:var(--white);}
#burgerClose:hover .hamburger__box{background:var(--accent);}

/* над помаранчевим героєм шапка світла — і під час скролу теж:
   фон бере колір секції, а не стає сіро-синім */
.site-header.is-over-accent.is-stuck{
  /* рівно той самий помаранчевий, що й у секції: напівпрозорий фон
     із розмиттям давав трохи інший відтінок, і було видно межу */
  background:var(--accent);
  backdrop-filter:none;
  border-bottom-color:transparent;
}
.site-header.is-over-accent .site-header__logo img{filter:invert(1) brightness(2);}
.site-header.is-over-accent .hamburger{color:var(--white);}
/* над помаранчевим фоном — навпаки: біла пігулка з помаранчевими рисками */
.site-header.is-over-accent .hamburger__box{background:var(--white);}
.site-header.is-over-accent .hamburger__inner::before,
.site-header.is-over-accent .hamburger__inner::after{background:var(--accent);}
.site-header.is-over-accent .site-header__nav a{color:rgba(255,255,255,.85);}
.site-header.is-over-accent .site-header__nav a:hover,
.site-header.is-over-accent .site-header__nav a[aria-current="true"]{color:var(--white);}


/* над темною секцією — те саме, але лого просто інвертується */
.site-header.is-over-night.is-stuck{
  background:color-mix(in srgb,var(--night) 86%,transparent);
  border-bottom-color:var(--night-rule);
}
.site-header.is-over-night .site-header__logo img{filter:invert(1);}
.site-header.is-over-night .hamburger{color:var(--night-fg);}
.site-header.is-over-night .site-header__nav a{color:var(--night-fg-55);}
.site-header.is-over-night .site-header__nav a:hover{color:var(--night-fg);}
.site-header.is-over-night .hamburger__box{background:var(--night-fg);}
.site-header.is-over-night .hamburger__inner::before,
.site-header.is-over-night .hamburger__inner::after{background:var(--ink);}

/* ============================ ПАНЕЛЬ МЕНЮ ===============================
   #sidenav із сайту: світло-синє полотно виїжджає згори,
   transform .5s + opacity .3s.                                          */
.sidenav{
  position:fixed;inset:0 0 auto 0;z-index:1900;
  max-height:100svh;overflow-y:auto;
  background:var(--paper);color:var(--ink);
  transform:translateY(-110%);
  opacity:0;visibility:hidden;
  transition:transform .5s var(--ease),opacity .3s var(--ease),visibility 0s linear .5s;
}
.sidenav:focus{outline:none;}   /* панель отримує фокус програмно, рамка тут зайва */
.sidenav.is-open{
  transform:translateY(0);opacity:1;visibility:visible;
  transition:transform .5s var(--ease),opacity .3s var(--ease);
}
.sidenav__inner{
  width:100%;max-width:var(--page-max);margin-inline:auto;
  padding:1.6vw var(--gutter) 3.8vw;
}
@media only screen and (max-width:991px){
  .sidenav{height:100svh;}                    /* на мобільному — на весь екран */
  .sidenav__inner{padding:12px 12px 2rem;}
}

.sidenav__top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);}

/* ---- сітка меню ----
   До 992px — розкладка мобільного меню з сайту: посилання великим кеглем,
   чорна кнопка-пігулка на всю ширину, дві колонки контактів, лінійка,
   перемикач мови. Від 992px — чотири колонки, як у десктопному #sidenav. */
.sidenav__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(1rem,3vw,2rem);row-gap:0;
  margin-top:clamp(1.5rem,5vw,2.5rem);
}
.sidenav__col--menu{grid-column:1 / -1;}
.sidenav__label{
  margin-bottom:1.5rem;
  font-size:max(.84vw,16px);letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink-38);
}
.sidenav__label--menu{display:none;}          /* на мобільному підпису немає */
.sidenav__links{display:flex;flex-direction:column;gap:14.4px;}
.sidenav__links a{
  display:block;
  font-size:max(1.575vw,28px);font-weight:500;line-height:1.2;
  letter-spacing:var(--ls-head);
  transition:color var(--dur-fast) var(--ease);
}
.sidenav__links a:hover{color:var(--accent);}
.sidenav__links--small a{font-size:max(.84vw,18px);font-weight:400;line-height:1.4;letter-spacing:-.01em;}

/* чорна кнопка на всю ширину — тільки до 992px, як на сайті */
.sidenav__cta{
  grid-column:1 / -1;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin:2rem 0 2.5rem;padding:20.26px 32px;
  border-radius:320px;
  background:var(--ink);color:var(--white);
  font-family:var(--ff-display);
  font-size:16px;line-height:1.5;text-transform:uppercase;
  transition:background var(--dur-fast) var(--ease);
}
.sidenav__cta:hover{background:var(--accent);}
.sidenav__cta svg{flex:none;}

.sidenav__col--socials,
.sidenav__col--contacts{padding-bottom:2rem;}

.sidenav__col--lang{
  grid-column:1 / -1;
  display:flex;gap:1rem;align-items:center;
  padding-top:1.5rem;border-top:1px solid var(--rule);
}
.sidenav__col--lang a{font-size:16px;color:var(--ink-55);}
.sidenav__col--lang a.is-active,.sidenav__col--lang a:hover{color:var(--ink);}

@media only screen and (min-width:992px){
  .sidenav__grid{
    grid-template-columns:auto repeat(3,minmax(0,1fr));
    column-gap:2.5vw;align-items:start;
  }
  .sidenav__col--lang{
    grid-column:1;order:-1;
    padding-top:0;border-top:0;align-items:flex-start;
  }
  .sidenav__col--menu{grid-column:2;}
  .sidenav__col--socials,
  .sidenav__col--contacts{grid-column:auto;padding-bottom:0;}
  .sidenav__label--menu{display:block;}
  .sidenav__cta{display:none;}               /* на десктопі кнопка живе в шапці */
}

/* мобільна геометрія меню, зміряна на proekcia.com при 390px */
@media only screen and (max-width:991px){
  .sidenav__grid{margin-top:44px;}            /* перше посилання на y=88 */
  .sidenav__links a{line-height:1;}           /* висота рядка 28px */
}

/* ============================ МЕДІА ====================================== */
.media{
  position:relative;overflow:hidden;
  background:var(--paper-3);
  border-radius:var(--radius-sm);
}
.media--pill{border-radius:clamp(20px,4vw,56px);}
.media img,.media video{width:100%;height:100%;object-fit:cover;display:block;}
.media--ratio{aspect-ratio:var(--ratio,16/10);}
.media--plain{background:transparent;}   /* рендери з власним фоном */

.figure__cap{
  margin-top:.8rem;
  font-size:var(--fs-label);
  letter-spacing:.04em;
  color:var(--ink-38);
}

/* ============================ РЯДОК «ДО → ПІСЛЯ» ========================= */
/* Компонент секції 05 (сценарії) — форма з презентації: дві пігулки і стрілка. */
.flowrow{
  display:grid;
  /* пігулки впритул до кола: коло займає свою ширину, решта — порівну */
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:0;
  padding-block:clamp(1rem,1.542vw,25.9px);
  border-top:1px solid var(--rule);
}
.flowrow:last-child{border-bottom:1px solid var(--rule);}
.flowrow__from,.flowrow__to{
  display:flex;align-items:center;
  border-radius:999px;
  font-size:clamp(.95rem,1.143vw,19.2px);
  line-height:1.25;letter-spacing:-.00917em;
}
.flowrow__from{
  min-height:clamp(46px,3.512vw,59px);
  padding-left:clamp(1rem,1.545vw,25.95px);padding-right:1rem;
  border:1px solid var(--ink);color:var(--ink);
}
.flowrow__to{
  min-height:clamp(44px,3.393vw,57px);
  padding-left:clamp(1rem,1.485vw,24.95px);padding-right:1rem;
  background:var(--ink);color:var(--white);
}
/* коло зі стрілкою — чорний контур, прозоре всередині */
.flowrow__arrow{
  display:flex;align-items:center;justify-content:center;
  justify-self:center;
  width:clamp(38px,3.43vw,57.63px);aspect-ratio:1;
  border-radius:50%;
  border:1px solid var(--ink);background:transparent;color:var(--ink);
}
.flowrow__arrow svg{width:41.4%;height:auto;}

@media (max-width:720px){
  /* колонкою: пігулки однакової висоти і торкаються кола */
  .flowrow{grid-template-columns:minmax(0,1fr);gap:0;}
  .flowrow__arrow{transform:rotate(90deg);margin-inline:auto;}
  .flowrow__from,.flowrow__to{min-height:clamp(46px,13vw,54px);}
  /* коло тієї самої висоти, що й пігулки */
  .flowrow__arrow{width:clamp(46px,13vw,54px);}
}

/* ============================ СПИСОК-ПЕРЕЛІК ============================= */
.speclist{border-top:1px solid var(--rule);}
.speclist li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(.9rem,2vw,2rem);
  align-items:baseline;
  padding-block:clamp(.85rem,1.5vw,1.25rem);
  border-bottom:1px solid var(--rule);
}
.speclist li > span:last-child{font-size:clamp(1rem,1.35vw,1.2rem);}
.section--night .speclist,.section--night .speclist li{border-color:var(--night-rule);}

/* ============================ КРУГЛА КНОПКА-СТРІЛКА ====================== */
.rnav{
  display:inline-flex;align-items:center;justify-content:center;
  flex:none;
  border:1px solid var(--ink);border-radius:50%;
  color:var(--ink);background:transparent;
  transition:background var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             opacity var(--dur-fast) var(--ease);
}
.rnav svg{width:45%;height:auto;}
.rnav[data-dir="-1"] svg{transform:rotate(180deg);}
.rnav:hover{background:var(--ink);color:var(--white);border-color:var(--ink);}
.rnav[disabled]{opacity:.3;pointer-events:none;}

/* ============================ КОНТАКТИ =================================== */
.contact-list{display:flex;flex-direction:column;}
.contact-list a{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);
  padding-block:clamp(.9rem,1.5vw,1.15rem);
  border-top:1px solid var(--night-rule);
  font-size:clamp(1.05rem,1.8vw,1.5rem);
  transition:color var(--dur-fast) var(--ease),padding-left var(--dur) var(--ease);
}
.contact-list a:last-child{border-bottom:1px solid var(--night-rule);}
.contact-list a:hover{color:var(--accent);padding-left:.5rem;}
.contact-list span:last-child{font-size:var(--fs-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--night-fg-55);}


/* ============================ ПОПАП CTA =================================
   Панель із #modal-callback на proekcia.com. Числа зняті getComputedStyle()
   на живому сайті при 390 і 1440px: ширина 590px, падінги 45.36/56.7,
   заголовок 3.75vw (10.26vw на мобільному), поле 67px із «залитим» фоном
   rgba(0,0,0,.08) і лейблом усередині, кнопка #FF4613 з радіусом 9px.
   Анімація — той самий f-slideInPrevX: 0.85s cubic-bezier(.16,1,.3,1).   */
.cta-modal{
  width:min(590px,100%);max-width:100%;
  height:100%;max-height:100%;
  margin:0 0 0 auto;                 /* притиснута до правого краю */
  padding:0;border:0;
  background:var(--white);color:var(--ink);
  overflow-y:auto;overscroll-behavior:contain;
}
.cta-modal::backdrop{background:rgba(0,0,0,.2);}

/* відкриття: полотно виїжджає справа, підкладка проявляється */
.cta-modal[open]{animation:cta-slide-in .85s cubic-bezier(.16,1,.3,1) both;}
.cta-modal[open]::backdrop{animation:cta-fade-in .85s cubic-bezier(.16,1,.3,1) both;}
.cta-modal.is-closing{animation:cta-slide-out .45s cubic-bezier(.16,1,.3,1) both;}
.cta-modal.is-closing::backdrop{animation:cta-fade-out .45s cubic-bezier(.16,1,.3,1) both;}
@keyframes cta-slide-in{from{transform:translateX(100%);}to{transform:translateX(0);}}
@keyframes cta-slide-out{from{transform:translateX(0);}to{transform:translateX(100%);}}
@keyframes cta-fade-in{from{opacity:0;}to{opacity:1;}}
@keyframes cta-fade-out{from{opacity:1;}to{opacity:0;}}
@media (prefers-reduced-motion:reduce){
  .cta-modal[open],.cta-modal[open]::backdrop,
  .cta-modal.is-closing,.cta-modal.is-closing::backdrop{animation:none;}
}

.cta-modal__inner{padding:5.125vw;}
@media only screen and (min-width:992px){
  .cta-modal__inner{padding:3.15vw 3.15vw 3.15vw 3.94vw;}
}

.cta-modal__close{
  position:absolute;top:11px;right:19px;
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--ink);color:var(--white);
  transition:background var(--dur-fast) var(--ease);
}
.cta-modal__close:hover{background:var(--accent);}

.cta-modal__title{
  font-weight:500;text-transform:uppercase;
  line-height:1.1;letter-spacing:-.0144em;
  font-size:10.26vw;
}
@media only screen and (min-width:768px){ .cta-modal__title{font-size:5.73vw;} }
@media only screen and (min-width:992px){ .cta-modal__title{font-size:3.75vw;} }

.cta-modal__text{
  margin-top:1.1rem;color:var(--ink-70);
  font-size:4.1vw;line-height:1.35;max-width:34ch;
}
@media only screen and (min-width:768px){ .cta-modal__text{font-size:2.08vw;} }
@media only screen and (min-width:992px){ .cta-modal__text{font-size:1.05vw;} }
.cta-modal__text a{text-decoration:underline;text-underline-offset:.2em;}
.cta-modal__text a:hover{color:var(--accent);}

/* ---- поля: «залиті», лейбл усередині зверху ---- */
.cta-form{margin-top:clamp(1.5rem,4vw,2.25rem);}
.cta-form .form-group{position:relative;margin-bottom:5.74px;}
.cta-form label{
  position:absolute;top:12px;left:24px;
  color:var(--ink-38);font-size:16px;line-height:1.4;
  pointer-events:none;
}
.cta-form input,
.cta-form textarea{
  display:block;width:100%;
  padding:35.2px 24px 12.8px;
  border:0;border-radius:4px;
  background:rgba(13,13,13,.08);
  color:var(--ink);font-family:var(--ff);font-size:16px;line-height:1.2;
  transition:background var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.cta-form input{height:67px;}
.cta-form textarea{height:240px;resize:vertical;}
.cta-form input:hover,.cta-form textarea:hover{background:rgba(13,13,13,.12);}
.cta-form input:focus,.cta-form textarea:focus{
  outline:0;background:rgba(13,13,13,.12);
  box-shadow:inset 0 0 0 1px var(--ink);
}
.cta-form .form-group.has-error input,
.cta-form .form-group.has-error textarea{box-shadow:inset 0 0 0 1px var(--accent);}
.cta-form .form-group.has-error label{color:var(--accent);}

.cta-form__submit{
  width:100%;margin-top:17.22px;
  padding:18px 27px;border-radius:9px;
  background:var(--accent);color:var(--white);
  font-family:var(--ff);font-size:4.62vw;line-height:1.2;
  transition:background var(--dur-fast) var(--ease);
}
@media only screen and (min-width:768px){ .cta-form__submit{font-size:2.34vw;} }
@media only screen and (min-width:992px){ .cta-form__submit{font-size:1.25vw;} }
.cta-form__submit:hover{background:var(--ink);}
.cta-form__submit[disabled]{opacity:.6;pointer-events:none;}

.cta-form__note{
  margin-top:1rem;color:var(--ink-38);
  font-size:var(--fs-label);line-height:1.4;
}

.cta-modal__done{padding-top:clamp(1.5rem,4vw,2.25rem);}
.cta-modal__done-title{font-size:var(--fs-h4);font-weight:500;}

/* ============================ ФУТЕР ====================================== */
.footer{
  background:var(--night);color:var(--night-fg-55);
  padding-block:var(--sp-5);
  font-size:var(--fs-small);
}
.footer__inner{
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);
  align-items:center;justify-content:space-between;
  border-top:1px solid var(--night-rule);padding-top:var(--sp-4);
}
.footer a:hover{color:var(--night-fg);}