/* ---------- Шрифти (self-hosted, cyrillic + latin) ---------- */
/* Forum — римські великі літери: підзаголовок першого екрана */
@font-face {
  font-family: 'Forum';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/forum-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Forum';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/forum-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Tenor Sans — пункти меню (шапка й бургер) */
@font-face {
  font-family: 'Tenor Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/tenor-sans-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Tenor Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/tenor-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cormorant Garamond italic cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-italic-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Cormorant Garamond italic latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cormorant Garamond normal cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-normal-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Cormorant Garamond normal latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Manrope normal cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/manrope-normal-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Manrope normal latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/manrope-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Montserrat normal cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url("../fonts/montserrat-normal-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Montserrat normal latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url("../fonts/montserrat-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   BEAUTY ПЛАТФОРМА — стилі
   Палітра і фактура взяті з постера: чорний, металеве золото,
   дерев'яні ламелі з теплим підсвічуванням.
   ========================================================= */

:root {
  --ink: #0b0907;
  --ink-2: #14100c;
  --ink-3: #1c1611;
  --walnut: #5a3a1e;
  --gold-100: #fbebc4;
  --gold-300: #e9c27f;
  --gold-500: #c28c46;
  --gold-700: #8c5e2a;
  --cream: #f4ecdf;
  --stone: #a99c8b;
  --noir-red: #4a1215;
  --line: rgba(233, 194, 127, .18);
  --line-strong: rgba(233, 194, 127, .42);

  --gold-metal: linear-gradient(180deg, #fff4d8 0%, #f6dca0 22%, #e2b468 48%, #b9843f 70%, #e8c47f 88%, #fbe6b4 100%);
  --cream-metal: linear-gradient(180deg, #ffffff 0%, #f7efe2 45%, #dcc6a3 100%);
  --gold-line: linear-gradient(90deg, transparent, var(--gold-500) 18%, var(--gold-100) 50%, var(--gold-500) 82%, transparent);

  --f-display: "Montserrat", "Arial Black", system-ui, sans-serif;
  --f-text: "Manrope", "Segoe UI", system-ui, sans-serif;
  --f-serif: "Cormorant Garamond", Georgia, serif;
  --f-nav: "Tenor Sans", "Segoe UI", system-ui, sans-serif;
  --f-roman: "Forum", Georgia, serif;

  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 40px);
  --hdr: 76px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);   /* для вхідних анімацій (як на neuroastris.com) */
  --r: 4px;
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
/* темна тема: смуги прокрутки й системні елементи браузера теж темні */
html { color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 12px); -webkit-text-size-adjust: 100%; }
body {
  background: var(--ink);
  color: var(--cream);
  font: 400 17px/1.65 var(--f-text);
  font-feature-settings: "lnum", "kern";
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* ледь помітна сітка колонок на фоні */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(233, 194, 127, .035) calc(50% - .5px), rgba(233, 194, 127, .035) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(90deg, transparent calc(50% - 620px), rgba(233, 194, 127, .035) calc(50% - 620px), rgba(233, 194, 127, .035) calc(50% - 619px), transparent calc(50% - 619px)),
    linear-gradient(90deg, transparent calc(50% + 619px), rgba(233, 194, 127, .035) calc(50% + 619px), rgba(233, 194, 127, .035) calc(50% + 620px), transparent calc(50% + 620px));
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ol, ul { list-style: none; }
::selection { background: var(--gold-300); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 3px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.sec { position: relative; padding: clamp(80px, 11vw, 150px) 0; }
.sec[hidden] { display: none; }   /* заморожені секції (EXPO, освітні партнери) */

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px;
  background: var(--gold-300); color: var(--ink); font-weight: 700; border-radius: var(--r);
}
.skip:focus { top: 12px; }

.gold {
  background: var(--gold-metal);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}


.h2 {
  font: 800 clamp(32px, 4.6vw, 62px)/1.02 var(--f-display);
  text-transform: uppercase; letter-spacing: -.015em;
}
.sec__head { margin-bottom: clamp(36px, 5vw, 64px); max-width: 900px; }

/* ---------- Кнопки ---------- */
.btn {
  --bh: 52px;   /* висота кнопки; від неї масштабується рамка-табличка */
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--bh); padding: 0 30px; border-radius: 0;
  /* Tenor Sans — як заголовки «Два дні…», «Освітні програми» */
  font: 400 14px/1 var(--f-nav); letter-spacing: .14em; text-transform: uppercase;
  transition: transform .35s var(--ease), filter .35s var(--ease), color .35s var(--ease);
}
/* Таблички-рамки — вирізані 1:1 з еталона Gemini (варіант 5, 02.11), без перемальовування.
   Кінці (-l, -r) і центральний орнамент (-c) — у власних пропорціях на всю висоту кнопки;
   середня вставка (-m) розтягується на решту; у темної крапкові лінії — окремий шар (-d), що повторюється, щоб крапки не тягнулись.
   Ширина кінця = висота кнопки × (ширина / висота файлу): золото 150/199, темна 120/201 */
.btn--gold {
  color: #1d140a;
  background:
    url("../img/btn-gold-c.webp") 50% 0 / auto 100% no-repeat,
    url("../img/btn-gold-l.webp") 0 0 / auto 100% no-repeat,
    url("../img/btn-gold-r.webp") 100% 0 / auto 100% no-repeat,
    url("../img/btn-gold-m.webp") 50% 0 / calc(100% - var(--bh) * 1.5076 + 2px) 100% no-repeat;
  filter: drop-shadow(0 10px 18px rgba(226, 180, 104, .28));
}
.btn--line {
  color: var(--gold-100);
  background:
    url("../img/btn-dark-c.webp") 50% 0 / auto 100% no-repeat,
    url("../img/btn-dark-l.webp") 0 0 / auto 100% no-repeat,
    url("../img/btn-dark-r.webp") 100% 0 / auto 100% no-repeat,
    url("../img/btn-dark-d.webp") 50% 0 / auto 100% repeat-x,
    url("../img/btn-dark-m.webp") 50% 0 / calc(100% - var(--bh) * 1.194 + 2px) 100% no-repeat;
}
.btn:active { transform: translateY(1px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 13px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-300);
}
.link-arrow::after { content: "→"; font-family: var(--f-text); letter-spacing: 0; transition: transform .3s var(--ease); }

@media (hover: hover) {
  .btn--gold:hover { transform: translateY(-2px); filter: brightness(1.07) drop-shadow(0 14px 24px rgba(226, 180, 104, .42)); }
  .btn--line:hover { transform: translateY(-2px); filter: brightness(1.15); }
  .link-arrow:hover { color: var(--gold-100); }
  .link-arrow:hover::after { transform: translateX(4px); }
}

/* ---------- Шапка ---------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 60; height: var(--hdr);
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.hdr.is-solid {
  background: rgba(11, 9, 7, .9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.hdr__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

/* логотипи організаторів у шапці: Beauty HR Center | UBBC */
.brands { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 18px); flex: none; }
.brand { position: relative; display: inline-flex; align-items: center; flex: none; overflow: hidden; }
/* Поява логотипів (як на neuroastris.com): напис «прорізається» зліва направо, по ньому біжить
   золотий сканер; далі сканер проходить логотипи раз на 9 с. UBBC — слідом за Beauty HR */
.brand picture { animation: brand-reveal .85s var(--ease-out) .2s both; }
.brand + .brands__sep { animation: sep-in .6s var(--ease-out) .4s both; }
.brands__sep + .brand picture { animation-delay: .45s; }
.brand__scan {
  position: absolute; top: -10%; bottom: -10%; left: -14px; width: 14px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 205, .85), rgba(233, 194, 127, .95), transparent);
  box-shadow: 0 0 10px rgba(233, 194, 127, .7), 0 0 22px rgba(226, 180, 104, .45);
  animation: brand-scan-in .85s var(--ease-out) .2s both, brand-scan-loop 9s linear 3s infinite;
}
.brands__sep + .brand .brand__scan { animation-delay: .45s, 3.25s; }
@keyframes brand-reveal {
  0% { clip-path: inset(0 100% 0 0); transform: translateX(-6px); filter: brightness(1.8) saturate(1.3); }
  62% { transform: translateX(1px); }
  100% { clip-path: inset(0 0 0 0); transform: none; filter: none; }
}
@keyframes brand-scan-in { 0% { left: -14px; opacity: .9; } 95% { opacity: .9; } 100% { left: 100%; opacity: 0; } }
@keyframes brand-scan-loop { 0% { left: -14px; opacity: 0; } 2% { opacity: .75; } 12%, 100% { left: 100%; opacity: 0; } }
@keyframes sep-in { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: none; } }
.brand img { display: block; width: auto; height: 40px; }
.brands__sep { width: 1px; height: 30px; background: var(--line-strong); }
/* телефон: логотипи 22px заввишки — легша шапка, але «center» і «we make beauty» ще читаються */
@media (max-width: 767px) {
  .brands { gap: 10px; }
  .brand img { height: 22px; }
  .brands__sep { height: 16px; }
}
.mark { display: inline-flex; flex-direction: column; align-items: stretch; font-family: var(--f-display); font-weight: 900; line-height: .92; }
.mark__a { font-size: 19.5px; letter-spacing: .035em; background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.mark__b { font-size: 12.4px; letter-spacing: .03em; color: var(--cream); }
.mark--lg .mark__a { font-size: 34px; }
.mark--lg .mark__b { font-size: 21.6px; }

.nav { display: flex; align-items: center; gap: clamp(16px, 1.7vw, 30px); }
/* пункти меню — Tenor Sans великими літерами з розрядкою, без рамок */
.nav a:not(.btn) { font: 400 12px/1 var(--f-nav); text-transform: uppercase; letter-spacing: .14em; color: var(--cream); opacity: .82; transition: opacity .25s, color .25s; }
.nav__cta { --bh: 44px; padding: 0 22px; font-size: 11.5px; }
.nav a, .nav__cta { white-space: nowrap; }   /* пункти й кнопка завжди в один рядок */
@media (hover: hover) { .nav a:not(.btn):hover { opacity: 1; color: var(--gold-100); } }

.burger { display: none; width: 46px; height: 46px; position: relative; margin-right: -8px; }
.burger::before, .burger::after, .burger span {
  content: ""; position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--gold-300);
  transition: transform .35s var(--ease), opacity .2s;
}
.burger::before { top: 16px; }
.burger span { top: 22.5px; }
.burger::after { top: 29px; }
.hdr.is-open .burger::before { transform: translateY(6.5px) rotate(45deg); }
.hdr.is-open .burger span { opacity: 0; }
.hdr.is-open .burger::after { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- Ламелі (дерево + тепле світло) ---------- */
.slats {
  position: absolute; top: 0; bottom: 0; width: clamp(80px, 15vw, 260px); pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11, 9, 7, .15) 0%, rgba(11, 9, 7, .25) 45%, rgba(11, 9, 7, .95) 100%),
    repeating-linear-gradient(90deg, #1d120a 0 9px, #4a2f17 9px 15px, #b5793a 15px 16px, #6e4722 16px 18px, #24170c 18px 26px);
}
.slats--l { left: 0; -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent); mask-image: linear-gradient(90deg, #000 30%, transparent); opacity: .7; }
.slats--r { right: 0; -webkit-mask-image: linear-gradient(270deg, #000 30%, transparent); mask-image: linear-gradient(270deg, #000 30%, transparent); opacity: .85; }

.flare {
  position: absolute; z-index: 1; pointer-events: none; height: 2px; width: 360px;
  background: radial-gradient(ellipse at center, rgba(255, 226, 160, .95) 0%, rgba(255, 190, 100, .35) 32%, transparent 70%);
}
.flare::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff7e0 0%, rgba(255, 205, 130, .55) 40%, transparent 72%);
}
.flare--1 { top: 23%; left: -90px; }
.flare--2 { top: 49%; right: -70px; width: 300px; opacity: .8; }
.flare--3 { bottom: 9%; left: 34%; width: 460px; opacity: .55; }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--hdr) + 24px) 0 64px;
}
.hero__bg, .hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__bg { z-index: -2; }
.hero__bg img { object-fit: cover; object-position: 50% 60%; filter: saturate(.85) sepia(.12) brightness(.9); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(11, 9, 7, .55), transparent 70%),
    linear-gradient(180deg, rgba(11, 9, 7, .97) 0%, rgba(11, 9, 7, .72) 34%, rgba(11, 9, 7, .55) 60%, rgba(11, 9, 7, .9) 86%, var(--ink) 100%);
}
.hero__inner { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; }

/* обгортка H1: та сама колонка по центру, що й .hero__inner, — розкладка не змінюється */
.hero__h1 { display: flex; flex-direction: column; align-items: center; margin: 0; }
.hero__title { display: inline-flex; flex-direction: column; align-items: center; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; filter: drop-shadow(0 8px 28px rgba(0, 0, 0, .55)); }
/* слова заголовка виїжджають з-під маски (як на neuroastris.com); маска має запас .12em зверху й знизу,
   щоб не різати літери при line-height < 1, а від'ємні поля повертають попередню геометрію */
.hero__beauty, .hero__platform { display: block; overflow: hidden; padding: .12em .04em; margin: -.12em -.04em; }
.hero__beauty { font-size: clamp(51px, 11.7vw, 150px); line-height: .84; letter-spacing: -.012em; }
.hero__platform { font-size: clamp(30px, 6.87vw, 88px); line-height: .98; letter-spacing: -.018em; margin-top: calc(.06em - .12em); }
.hero__wi { display: inline-block; animation: word-up .9s var(--ease-out) .3s both; }
.hero__platform .hero__wi { animation-delay: .42s; }
.hero__beauty .hero__wi { background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hero__platform .hero__wi { background: var(--cream-metal); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@keyframes word-up { from { transform: translateY(115%); } to { transform: none; } }

/* решта першого екрана — каскадом після заголовка (усе ≤ 2 с) */
.hero__sub, .hero__date, .hero__city, .hero__cta, .hero__tag, .hero .count { animation: hero-in .7s var(--ease-out) both; }
/* трекінг підзаголовка «сідає» з розтягнутого — на всіх екранах (рядки зафіксовані, ширини з запасом) */
.hero__sub { animation: hero-in .7s var(--ease-out) .75s both, sub-track 1.1s var(--ease-out) .75s both; }
.hero__date { animation-delay: .95s; }
.hero__city { animation: hero-in .7s var(--ease-out) 1.1s both, city-track 1.1s var(--ease-out) 1.1s both; }
.hero__cta { animation-delay: 1.3s; }
.hero__tag { animation-delay: 1.45s; }
.hero .count { animation-delay: 1.6s; }
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* трекінг «сідає» з розтягнутого */
@keyframes sub-track { from { letter-spacing: .42em; } to { letter-spacing: .14em; } }
@keyframes city-track { from { letter-spacing: 1em; } to { letter-spacing: .62em; } }
/* «Всеукраїнський саміт сервісного бізнесу» — Forum, римські великі літери з розрядкою */
.hero__sub {
  display: block; margin-top: clamp(14px, 2vh, 22px);
  font: 400 clamp(16px, 1.9vw, 24px)/1.35 var(--f-roman); text-transform: uppercase; letter-spacing: .14em; color: #efe6d9;
}
/* рядки зафіксовано (телефон — три, від 660px — один), щоб під час анімації трекінгу текст не перескакував */
.hero__sub span { display: block; white-space: nowrap; }
@media (min-width: 660px) { .hero__sub { white-space: nowrap; } .hero__sub span { display: inline; } }

.hero__date {
  margin-top: clamp(24px, 4vh, 48px);
  font: 800 clamp(32px, 5.4vw, 66px)/1 var(--f-display); text-transform: uppercase; letter-spacing: -.01em;
  font-variant-numeric: lining-nums tabular-nums;
  background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.hero__city {
  display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 26px); width: min(100%, 760px);
  margin-top: 14px; font: 400 clamp(16px, 2.2vw, 26px)/1 var(--f-text); letter-spacing: .62em; text-transform: uppercase;
  padding-left: .62em;
}
.hero__city::before, .hero__city::after { content: ""; flex: 1 1 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-500)); }
.hero__city::after { background: linear-gradient(270deg, transparent, var(--gold-500)); }

@media (max-width: 639px) {
  .slats { width: 46px; }
  .slats--l { opacity: .45; }
  .slats--r { opacity: .55; }
  .hero__cta { flex-direction: column; align-items: stretch; width: min(100%, 300px); }
}

.hero__cta { margin-top: clamp(22px, 3.2vh, 36px); display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
/* гасло — Forum («римський» шрифт), як підзаголовок і тексти саміту */
/* Tenor Sans — як кнопки «Забронювати місце», «Гала-вечеря» */
.hero__tag { margin-top: clamp(18px, 2.6vh, 30px); font: 400 clamp(17px, 1.9vw, 25px)/1.3 var(--f-nav); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-100); }
.hero__tag span { white-space: nowrap; } /* на вузьких екранах перенос лише між реченнями */

.count {
  margin-top: 14px; display: inline-flex; align-items: stretch;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.count[hidden] { display: none; }
.count__cap { display: flex; align-items: center; padding: 0 18px 0 4px; font: 600 12.5px/1.3 var(--f-display); letter-spacing: .22em; text-transform: uppercase; color: var(--stone); max-width: 9em; text-align: left; }
.count__cell { display: flex; flex-direction: column; align-items: center; padding: 10px 16px; border-left: 1px solid var(--line); min-width: 72px; }
.count__cell b { font: 700 24px/1 var(--f-display); font-variant-numeric: tabular-nums; color: var(--cream); }
.count__cell small { margin-top: 5px; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }

/* ---------- Тонування фото ---------- */
.gala__shots img, .gal__item img, .dirs__preview img { filter: saturate(.86) sepia(.14) contrast(1.04) brightness(.94); }

/* ---------- 01 Про саміт ---------- */
.about__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 clamp(20px, 3vw, 40px); align-items: center; }
.about__text { grid-column: 1 / span 5; }
/* «Два дні професійного розвитку…» — Tenor Sans великими літерами з розрядкою (варіант C, як у меню) */
.about__title { font: 400 clamp(25px, 2.9vw, 42px)/1.22 var(--f-nav); text-transform: uppercase; letter-spacing: .05em; text-wrap: balance; }
/* лід «BEAUTY ПЛАТФОРМА збирає…» — Forum звичайними літерами (капсом три рядки читаються важко) */
.about__lead { margin-top: 26px; max-width: 52ch; font: 400 clamp(18px, 1.55vw, 21px)/1.6 var(--f-roman); letter-spacing: .01em; color: #cbbfae; }
.facts { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 22px; margin-top: clamp(36px, 5vw, 56px); }
.facts__item { padding-top: 18px; position: relative; }
.facts__item::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: linear-gradient(90deg, var(--gold-500), transparent); }
/* цифри — Tenor Sans, як заголовок «Освітні програми» */
.facts dt { font: 400 clamp(36px, 4.2vw, 60px)/1 var(--f-nav); letter-spacing: .02em; display: inline-block; }
.facts dd { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--stone); }

/* Два дні в чотирьох кадрах: сітка 2×2 «драбинкою», над кожним кадром дата, час і слово */
.about__day {
  --step: clamp(48px, 6vw, 88px);
  grid-column: 7 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2vw, 28px) clamp(14px, 1.8vw, 24px);
  align-items: start; width: 100%; max-width: 540px; justify-self: end;
}
.moment__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding-top: 12px; margin-bottom: 14px; border-top: 1px solid var(--gold-500); }
.moment__day { flex-basis: 100%; margin-bottom: 2px; font: 600 12.5px/1 var(--f-display); letter-spacing: .22em; text-transform: uppercase; color: var(--stone); }
.moment__time {
  font: 800 clamp(20px, 1.9vw, 28px)/1 var(--f-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums;
  background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
/* «Знання», «Знайомства»… — Forum («римський»), як тексти саміту */
.moment__word { font: 400 clamp(18px, 1.6vw, 23px)/1 var(--f-roman); letter-spacing: .02em; color: var(--cream); }
.moment__ph { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r); }
.moment__ph picture, .moment__ph img { width: 100%; height: 100%; }
.moment__ph img { object-fit: cover; filter: saturate(.9) sepia(.1) contrast(1.05) brightness(.9); transition: transform .8s var(--ease); }
.moment:first-child .moment__ph img { filter: saturate(.88) sepia(.12) contrast(1.06) brightness(.82); }
@media (min-width: 1024px) {
  /* права колонка нижче на крок; третій кадр підтягується під перший, щоб ліворуч не було дірки */
  .moment:nth-child(2) { margin-top: var(--step); }
  .moment:nth-child(3) { margin-top: calc(-1 * var(--step)); }
}
/* десктоп: кадри вищі за текст, тож текст «їде» поруч, поки гортаються кадри */
@media (min-width: 1024px) {
  .about__grid { align-items: start; }
  .about__text { position: sticky; top: calc(var(--hdr) + 40px); }
}
@media (hover: hover) { .moment:hover .moment__ph img { transform: scale(1.04); } }
.about__dots { display: none; }
.about__dots button { width: 32px; height: 32px; display: grid; place-items: center; }
.about__dots button::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--line-strong); transition: width .35s var(--ease), background-color .35s; }
.about__dots button[aria-current="true"]::before { width: 26px; background: var(--gold-300); }

/* ---------- 02 Напрямки ---------- */
.dirs { background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 40%, var(--ink-2) 70%, var(--ink) 100%); }
/* «Освітні програми» ближче до «Про саміт» — без довгої порожнечі між секціями */
.sec.dirs { padding-top: clamp(36px, 5vw, 72px); }
.dirs__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px 40px; margin-bottom: clamp(36px, 5vw, 60px); }
/* «Освітні програми» — як заголовок «Два дні…»: Tenor Sans великими літерами з розрядкою */
.dirs__head .h2, .org .sec__head .h2 { font: 400 clamp(25px, 2.9vw, 42px)/1.22 var(--f-nav); text-transform: uppercase; letter-spacing: .05em; }

.dirs__list { position: relative; }
.dirs__ol { border-top: 1px solid var(--line-strong); }
.dir { border-bottom: 1px solid var(--line); }
.dir__row {
  width: 100%; display: grid; grid-template-columns: clamp(64px, 9vw, 128px) 1fr auto; align-items: center; gap: 16px;
  padding: clamp(20px, 2.6vw, 32px) 0; text-align: left; position: relative;
}
.dir__num { font: 400 clamp(32px, 4.2vw, 60px)/1 var(--f-nav); letter-spacing: .02em; }
/* назви напрямків — Forum звичайними літерами, як лід «BEAUTY ПЛАТФОРМА збирає…» */
.dir__name { font: 400 clamp(21px, 2.6vw, 36px)/1.15 var(--f-roman); letter-spacing: .01em; transition: transform .45s var(--ease), color .3s; }
/* «Програма» / «Детальніше» — той самий Forum, що й назви напрямків */
.dir__more { display: inline-flex; align-items: center; gap: 14px; font: 400 clamp(16px, 1.3vw, 19px)/1 var(--f-roman); letter-spacing: .02em; color: var(--gold-300); white-space: nowrap; }
.dir__more i { position: relative; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--gold-500); transition: transform .45s var(--ease), background-color .3s; }
.dir__more i::before, .dir__more i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--gold-300); transform: translate(-50%, -50%); }
.dir__more i::after { transform: translate(-50%, -50%) rotate(90deg); transition: opacity .3s; }
.dir__row[aria-expanded="true"] .dir__more i { transform: rotate(180deg); background-color: rgba(233, 194, 127, .12); }
.dir__row[aria-expanded="true"] .dir__more i::after { opacity: 0; }
.dir__row[aria-expanded="true"] .dir__name { color: var(--gold-100); }

.dir__panel { overflow: hidden; transition: height .5s var(--ease); }
.dir__panel > .prog, .dir__panel > .dir__soon { padding: 4px 0 clamp(30px, 4vw, 48px) clamp(80px, calc(9vw + 16px), 144px); }
.dir__soon { color: var(--stone); }

.prog__photo { display: none; margin-bottom: 26px; overflow: hidden; border-radius: var(--r); aspect-ratio: 3 / 2; max-width: 760px; box-shadow: inset 0 0 0 1px var(--line); }
.prog__photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.03); }
/* там, де немає прев'ю при наведенні (телефони, планшети, сенсорні екрани), фото стоїть у самій програмі */
@media (max-width: 1099px), (hover: none) { .prog__photo { display: block; } }
.prog__days { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); }
.prog__day h3 { font: 700 12px/1 var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-300); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.prog__slots li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px dashed rgba(233, 194, 127, .12); font-size: 15px; }
.prog__slots time { font: 700 14px/1.5 var(--f-display); color: var(--gold-100); font-variant-numeric: tabular-nums; }
.prog__slots em { display: block; font-style: normal; color: var(--stone); font-size: 13px; }
.prog__tba { padding-top: 16px; font: italic 500 22px/1.3 var(--f-serif); color: var(--stone); }
.prog__text { color: var(--stone); max-width: 62ch; }
.prog__text--after { margin-top: 22px; }
.prog__foot { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.prog__foot .btn { --bh: 46px; padding: 0 22px; font-size: 11.5px; }
.prog__copy { font: 600 12px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--stone); display: inline-flex; gap: 8px; align-items: center; }
.prog__copy.is-done { color: var(--gold-300); }

.dirs__preview {
  position: absolute; top: 0; right: clamp(150px, 14vw, 210px); width: 250px; aspect-ratio: 4 / 3; z-index: 2;
  pointer-events: none; overflow: hidden; border-radius: var(--r); opacity: 0;
  transform: translateY(var(--y, 0)) rotate(-3deg) scale(.94);
  transition: opacity .25s var(--ease), transform .4s var(--ease);
  box-shadow: 0 24px 50px -12px rgba(0, 0, 0, .7);
  background: var(--ink-2);
  will-change: transform, opacity;
  display: none;
}
/* фото стоять стосом, видиме — .is-cur */
.dirs__preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s var(--ease); }
.dirs__preview img.is-cur { opacity: 1; }
.dirs__preview.is-on { opacity: 1; transform: translateY(var(--y, 0)) rotate(-3deg) scale(1); }

@media (hover: hover) and (min-width: 1100px) {
  .dirs__preview { display: block; }
  .dir__row:hover .dir__name { transform: translateX(14px); color: var(--gold-100); }
  .dir__row:hover .dir__more i { background-color: rgba(233, 194, 127, .12); }
}
@media (hover: hover) {
  .prog__copy:hover { color: var(--cream); }
}

/* ---------- 03 Гала-вечеря ---------- */
/* Кадр «Бʼюті-мафії» стоїть зверху секції у пропорції 16:9 і плавно тоне в темряві;
   його ліва темна третина — місце під заголовок */
.gala { --gala-h: clamp(640px, 56.25vw, 1000px); isolation: isolate; overflow: hidden; }
.gala__bg { position: absolute; top: 0; left: 0; right: 0; height: var(--gala-h); z-index: -3; }
.gala__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; filter: contrast(1.04) saturate(.95); }
.gala__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 9, 7, .82) 0%, rgba(11, 9, 7, .45) 32%, transparent 58%),
    linear-gradient(180deg, var(--ink) 0%, rgba(11, 9, 7, 0) 16%, rgba(11, 9, 7, 0) 62%, var(--ink) 100%);
}
/* на широких екранах кадр зсунуто праворуч, щоб гості не потрапляли під текст */
@media (min-width: 1024px) {
  .gala { --gala-h: clamp(600px, 47vw, 900px); }
  .gala__bg { left: 20vw; }
  .gala__bg::after {
    background:
      linear-gradient(90deg, var(--ink) 0%, rgba(11, 9, 7, .5) 22%, transparent 45%),
      linear-gradient(180deg, var(--ink) 0%, rgba(11, 9, 7, 0) 16%, rgba(11, 9, 7, 0) 62%, var(--ink) 100%);
  }
}
/* відео лежить під фото; коли воно заграло, фото плавно зникає, а градієнти фото лишаються зверху */
.gala__video { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .gala__video { display: block; position: absolute; z-index: -3; object-fit: cover; filter: contrast(1.04) saturate(.95); transition: opacity .6s var(--ease); }
  .gala__bg img { transition: opacity .8s var(--ease); }
  .gala.is-playing .gala__bg img { opacity: 0; }
  .gala.is-dipping .gala__video { opacity: 0; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .gala__video { top: 0; left: 20vw; width: calc(100% - 20vw); height: var(--gala-h); object-position: 62% 40%; }
}
/* телефон і планшет: те саме горизонтальне відео смугою 4:3 на місці столу; лівий темний край кадру
   зрізано (видно 25–100% ширини, тобто всіх шістьох), верх і низ смуги розчиняються в темряві */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .gala__video {
    left: 0; width: 100%; height: 75vw; top: calc(var(--gala-top, 0px) + var(--gala-h) - 79vw);
    object-position: 100% 50%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 80%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 80%, transparent 100%);
  }
}
/* планшет і телефон: вертикальні версії кадру (3:4 і 9:16), текст — на темній верхній частині */
@media (max-width: 1023px) {
  .gala { --gala-h: 115vw; } /* планшет: кадр 3:4 обрізано зверху (порожня стеля), люстра й гості ближче до тексту */
  .gala__bg { top: var(--gala-top, 0px); }
  .gala__bg img { object-position: 50% 100%; }
  .gala__bg::after {
    background: linear-gradient(180deg, var(--ink) 0%, rgba(11, 9, 7, .45) 16%, rgba(11, 9, 7, .12) 50%, rgba(11, 9, 7, .35) 84%, var(--ink) 100%);
  }
  .gala .gala__head { min-height: calc(var(--gala-top, 0px) + var(--gala-h) - 160px); }
}
.gala::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(ellipse 60% 40% at 80% 18%, rgba(74, 18, 21, .28), transparent 70%);
}
.gala__grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.gala__head { max-width: 600px; min-height: calc(var(--gala-h) - 360px); }
.gala__kicker { font: 700 13px/1 var(--f-display); letter-spacing: .42em; text-transform: uppercase; color: var(--gold-300); }
.gala__title {
  display: inline-block; margin-top: 14px; font: 900 clamp(40px, 4.8vw, 72px)/.92 var(--f-display); text-transform: uppercase; letter-spacing: -.025em;
  background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .6));
}
.gala__title { white-space: nowrap; } /* «Бʼюті-мафія» завжди в один рядок */
/* телефон: кегль від ширини екрана, щоб заголовок із лапками вміщався в один рядок (≈8.4px ширини на 1px кегля) */
@media (max-width: 767px) { .gala__title { font-size: clamp(32px, 11vw - 3px, 40px); } }
/* гасло — Tenor Sans, як «Освітні програми» */
.gala__slogan { margin-top: 22px; font: 400 clamp(22px, 2.9vw, 42px)/1.22 var(--f-nav); text-transform: uppercase; letter-spacing: .05em; text-wrap: balance; color: var(--cream); }
.gala__nw { white-space: nowrap; }   /* «Бʼюті-бізнес» не рвемо по дефісу */
/* Forum («римський»), як тексти «Про саміт» і «Локація» */
.gala__sub { margin-top: 14px; font: 400 clamp(18px, 1.55vw, 21px)/1.5 var(--f-roman); letter-spacing: .01em; color: #cbbfae; }

.gala__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(28px, 4vw, 56px); margin-top: clamp(48px, 6vw, 80px); align-items: start; }
.gala__story { grid-column: 1 / span 7; }
.gala__h3 { font: 700 12.5px/1 var(--f-display); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-300); margin-bottom: 18px; }

.acts li { display: grid; grid-template-columns: 58px 1fr; gap: 10px; padding: 18px 0; border-top: 1px solid var(--line); }
.acts li:last-child { border-bottom: 1px solid var(--line); }
.acts__n { font: italic 600 30px/1 var(--f-serif); color: var(--gold-300); }
/* пункти «Як проходитиме вечір» — Forum звичайними літерами, як лід «Про саміт» */
.acts p { font: 400 clamp(17px, 1.4vw, 19px)/1.55 var(--f-roman); letter-spacing: .01em; padding-top: 3px; }

.dress { position: relative; margin-top: 40px; padding: 28px 30px; background: rgba(11, 9, 7, .55); box-shadow: inset 0 0 0 1px var(--line); }
.dress::before, .dress::after { content: ""; position: absolute; width: 22px; height: 22px; border: 1px solid var(--gold-300); }
.dress::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.dress::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
/* «Дрескод» — Tenor Sans, як пункти меню в шапці */
.dress .gala__h3 { margin-bottom: 14px; font: 400 13px/1 var(--f-nav); letter-spacing: .14em; }
.dress p { font: italic 500 22px/1.4 var(--f-serif); color: var(--cream); }

/* дрескод: «Вона» і «Він», обидва 3:4, другий кадр трохи нижче */
.gala__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; align-items: start; }
.gala__shots figure { position: relative; overflow: hidden; border-radius: var(--r); }
.gala__shots figure:nth-child(2) { margin-top: 52px; }
.gala__shots img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.gala__shots figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px;
  background: linear-gradient(to top, rgba(8, 6, 4, .78), transparent);
  font: italic 600 clamp(20px, 2vw, 26px)/1 var(--f-serif); color: var(--gold-100);
}

/* Картка бронювання */
.book {
  grid-column: 8 / span 5; position: sticky; top: calc(var(--hdr) + 20px);
  padding: clamp(26px, 3vw, 38px); border-radius: 6px;
  background: linear-gradient(180deg, rgba(28, 21, 15, .96), rgba(13, 10, 8, .97));
  box-shadow: inset 0 0 0 1px rgba(194, 140, 70, .5), 0 30px 70px -20px rgba(0, 0, 0, .8);
}
.book__price { display: flex; align-items: baseline; gap: 12px; }
.book__price b { font: 900 clamp(56px, 6vw, 76px)/1 var(--f-display); letter-spacing: -.03em; }
.book__price span { color: var(--stone); font-size: 16px; }
.book__inc-cap { margin-top: 18px; font: 700 12.5px/1 var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-300); }
.book__inc { margin-top: 12px; display: grid; gap: 8px; }
.book__inc li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.book__inc li::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold-300); flex: none; }
/* заголовок «Забронювати місце» прибрано (дублював кнопку) — роздільна лінія тепер над приміткою */
.book__note { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--stone); line-height: 1.55; }

.form { margin-top: 22px; display: grid; gap: 14px; }
.form[hidden] { display: none; }   /* після успішної відправки форма ховається — display:grid інакше перебиває атрибут hidden */
.field { display: grid; gap: 7px; }
.field label { font: 700 12.5px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-100); }
.field input[type="text"], .field input[type="tel"] {
  width: 100%; min-height: 52px; padding: 0 16px; border-radius: var(--r);
  font: 500 16px/1 var(--f-text); color: var(--cream);
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(233, 194, 127, .28);
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.field input::placeholder { color: #7f7365; }
.field input:focus { outline: none; border-color: var(--gold-300); box-shadow: 0 0 0 3px rgba(233, 194, 127, .16); background-color: rgba(255, 255, 255, .055); }
.field__err { display: none; font-size: 13px; color: #eaa08f; line-height: 1.4; }
.field.is-invalid input { border-color: #c96a58; }
.field.is-invalid .field__err { display: block; }

.field--check { grid-template-columns: 22px 1fr; align-items: start; gap: 4px 12px; margin-top: 2px; }
.field--check input {
  appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 3px; cursor: pointer;
  border: 1px solid var(--gold-500); background: rgba(255, 255, 255, .03); display: grid; place-items: center;
}
.field--check input::after { content: ""; width: 10px; height: 5px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.field--check input:checked { background: var(--gold-300); border-color: var(--gold-300); }
.field--check input:checked::after { opacity: 1; }
.field--check label { font: 400 13.5px/1.5 var(--f-text); letter-spacing: 0; text-transform: none; color: var(--stone); cursor: pointer; }
.field--check .field__err { grid-column: 2; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__btn { width: 100%; margin-top: 6px; position: relative; }
.form__btn.is-loading { pointer-events: none; color: transparent; }
.form__btn.is-loading::after {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(29, 20, 10, .3); border-top-color: #1d140a; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* контейнер віджета Turnstile: порожній — не займає місця; віджет «flexible» потребує ≥ 300px ширини */
.form__ts:empty { display: none; }
.form__ts { min-width: 0; overflow: hidden; }
.form__ts iframe { display: block; max-width: 100%; }
.form__msg { font-size: 14px; color: #eaa08f; line-height: 1.5; }
.form__msg:empty { display: none; }
.form__msg a { color: var(--gold-300); text-decoration: underline; text-underline-offset: 3px; }

.book__done { margin-top: 24px; text-align: center; padding: 24px 0 8px; }
.book__done[hidden] { display: none; }
.book__done:focus { outline: none; }
.book__done-ic { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #fbe7b6, #bd8742); }
.book__done-ic::after { content: ""; width: 22px; height: 11px; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(-45deg) translate(2px, -3px); }
.book__done-t { font: 800 24px/1.2 var(--f-display); text-transform: uppercase; margin-bottom: 6px; }
.book__done p:last-child { color: var(--stone); }

/* ---------- Заклик ---------- */
.band { position: relative; overflow: hidden; padding: clamp(80px, 10vw, 130px) 0; background: var(--ink-2); box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.slats--band { width: auto; left: 0; right: 0; opacity: .5; -webkit-mask-image: radial-gradient(ellipse 60% 120% at 50% 50%, transparent 30%, #000 85%); mask-image: radial-gradient(ellipse 60% 120% at 50% 50%, transparent 30%, #000 85%); }
.band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold-line); }
.band__inner { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px 60px; }
/* Tenor Sans — як «Два дні професійного розвитку…» і «Освітні програми» */
.band__title { font: 400 clamp(25px, 3.2vw, 46px)/1.22 var(--f-nav); text-transform: uppercase; letter-spacing: .05em; max-width: 30ch; text-wrap: balance; }
.band__title .gold { white-space: nowrap; }   /* «beauty-бізнесі» не рвемо по дефісу */
/* дві кнопки одна під одною, однакової ширини: золота — місце на саміті, обвідна — гала-вечеря */
.band__cta { display: grid; gap: 12px; }
.band__cta .btn { width: 100%; }

/* ---------- Каруселі ---------- */
.car { --gap: 20px; --per: 3; }
.car__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px 1px 6px;
}
.car__track::-webkit-scrollbar { display: none; }
.car__track:focus-visible { outline-offset: 6px; }
.car__nav { display: flex; gap: 12px; margin-top: 30px; }
.car__btn { width: 54px; height: 54px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--gold-500); display: grid; place-items: center; transition: background-color .3s, opacity .3s; }
.car__btn i { width: 11px; height: 11px; border-left: 1.5px solid var(--gold-100); border-bottom: 1.5px solid var(--gold-100); transform: translateX(2px) rotate(45deg); }
.car__btn--next i { transform: translateX(-2px) rotate(-135deg); }
.car__btn:disabled { opacity: .3; cursor: default; }
.car--static .car__track { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); overflow: visible; }
.car--static .car__nav { display: none; }
@media (hover: hover) { .car__btn:not(:disabled):hover { background-color: rgba(233, 194, 127, .12); } }

.pc {
  scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; min-height: 100%;
  padding: 26px; border-radius: 6px; background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.pc__logo {
  height: 128px; margin-bottom: 8px; border-radius: var(--r); display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, rgba(233, 194, 127, .14), rgba(255, 255, 255, .015) 70%);
  box-shadow: inset 0 0 0 1px rgba(233, 194, 127, .12);
}
.pc__logo img { max-width: 72%; max-height: 64%; object-fit: contain; filter: grayscale(1) brightness(1.6); opacity: .85; transition: filter .4s, opacity .4s; }
.pc__mono { font: 900 36px/1 var(--f-display); letter-spacing: .02em; }
.pc__name { font: 800 19px/1.25 var(--f-display); }
.pc__desc { color: var(--stone); font-size: 15px; line-height: 1.5; }
.pc .link-arrow { margin-top: auto; padding-top: 8px; }
.pc--empty { background: transparent; box-shadow: inset 0 0 0 1px var(--line); background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(233, 194, 127, .025) 14px 15px); }
.pc--empty .pc__logo { background: none; box-shadow: inset 0 0 0 1px rgba(233, 194, 127, .12); }
.pc--empty .pc__logo span { font: italic 500 22px/1 var(--f-serif); color: var(--stone); }
@media (hover: hover) {
  .pc:hover { box-shadow: inset 0 0 0 1px var(--gold-500); transform: translateY(-4px); }
  .pc:hover .pc__logo img { filter: none; opacity: 1; }
}

.edu { padding-top: 0; }

/* ---------- 06 Організатори ---------- */
.org { background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); }
.org__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 28px); }
.org__card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; padding: clamp(30px, 4vw, 52px); border-radius: 6px;
  background: radial-gradient(ellipse 90% 70% at 0% 0%, rgba(233, 194, 127, .13), transparent 60%), var(--ink-3);
  box-shadow: inset 0 0 0 1px rgba(194, 140, 70, .45);
}
/* логотипи організаторів (версії для темного фону): обидва 230×64, на телефоні трохи менші */
.org__logo { display: block; margin-bottom: 30px; }
.org__logo img { display: block; width: auto; height: 64px; }
.org__name { font: 800 clamp(22px, 2.3vw, 30px)/1.15 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; max-width: 20ch; }
/* опис організатора — Forum, як пункти «Як проходитиме вечір» */
.org__desc { margin-top: 12px; font: 400 clamp(17px, 1.4vw, 19px)/1.55 var(--f-roman); letter-spacing: .01em; color: var(--stone); }
.org__soc { margin-top: auto; padding-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
/* круглі іконки соцмереж, як у футері: діаметр 48px (висота колишніх пігулок з текстом), іконка ≈ 45% */
.soc {
  --soc: 48px; display: inline-flex; align-items: center; justify-content: center; width: var(--soc); height: var(--soc); border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--gold-500); color: var(--gold-300);
  transition: background-color .3s, color .3s, box-shadow .3s, transform .3s var(--ease);
}
.soc svg { width: calc(var(--soc) * .45); height: calc(var(--soc) * .45); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .soc:hover { background-color: var(--gold-300); color: var(--ink); box-shadow: inset 0 0 0 1px var(--gold-300); transform: translateY(-2px); } }

/* ---------- 07 Локація ---------- */
.venue__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.venue__info { grid-column: 1 / span 4; }
/* «Готель на головній площі Ужгорода…» — Forum звичайними літерами, як лід «Про саміт» */
.venue__text { margin-top: 22px; font: 400 clamp(18px, 1.55vw, 21px)/1.6 var(--f-roman); letter-spacing: .01em; color: #cbbfae; }
.venue__addr { margin-top: 24px; display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.venue__addr svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--gold-300); stroke-width: 1.5; margin-top: 1px; }
.venue__btns { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }

/* Галерея: парадний фасад на всю ширину зверху, під ним зал і лобі-бар */
.gal { grid-column: 5 / span 8; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gal__item { position: relative; overflow: hidden; border-radius: var(--r); display: block; aspect-ratio: 3 / 2; }
.gal__item--wide { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.gal__item picture, .gal__item img { width: 100%; height: 100%; }
.gal__item img { object-fit: cover; transition: transform .8s var(--ease); }
@media (hover: hover) { .gal__item:hover img { transform: scale(1.04); } }

/* Лайтбокс */
.lb { margin: auto; max-width: none; max-height: none; width: 100vw; height: 100dvh; padding: 0; border: 0; background: rgba(5, 4, 3, .94); color: var(--cream); }
.lb[open] { display: grid; place-items: center; }
.lb::backdrop { background: transparent; }
.lb__img { max-width: min(92vw, 1500px); max-height: 82dvh; object-fit: contain; border-radius: var(--r); }
.lb__cap { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; font: italic 500 20px/1 var(--f-serif); color: var(--gold-100); }
.lb__close { position: absolute; top: 18px; right: 18px; width: 50px; height: 50px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--gold-500); }
.lb__close::before, .lb__close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px; background: var(--gold-100); transform: translate(-50%, -50%) rotate(45deg); }
.lb__close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* Модалка «Забронювати місце» — та сама картка, що й бронювання гала-вечері */
.bm {
  margin: auto; padding: 0; border: 0; background: transparent; color: var(--cream);
  width: min(100% - 32px, 500px); max-width: none; max-height: calc(100dvh - 32px); overflow: visible;
}
.bm::backdrop { background: rgba(5, 4, 3, .84); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bm__card {
  position: relative; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(28px, 5vw, 42px) clamp(22px, 5vw, 40px) clamp(24px, 4vw, 34px); border-radius: 6px;
  background: linear-gradient(180deg, rgba(28, 21, 15, .98), rgba(13, 10, 8, .99));
  box-shadow: inset 0 0 0 1px rgba(194, 140, 70, .5), 0 40px 90px -20px rgba(0, 0, 0, .9);
}
.bm[open] .bm__card { animation: bm-in .45s var(--ease) both; }
@keyframes bm-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.bm__card::before { content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 1px; background: var(--gold-line); }
.bm__close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color .25s, box-shadow .25s; }
.bm__close::before, .bm__close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: var(--gold-100); transform: translate(-50%, -50%) rotate(45deg); }
.bm__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
@media (hover: hover) { .bm__close:hover { background-color: rgba(233, 194, 127, .1); box-shadow: inset 0 0 0 1px var(--gold-300); } }
.bm__kicker { padding-right: 52px; font: 700 11.5px/1.4 var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-300); }
.bm__title {
  margin-top: 12px; display: inline-block; font: 900 clamp(26px, 6vw, 34px)/1.05 var(--f-display); text-transform: uppercase; letter-spacing: -.01em;
  background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.bm__note { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--stone); }
.bm .form { margin-top: 24px; }
.bm__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bm .book__done { margin-top: 10px; }
html.modal-open { overflow: hidden; }
@media (max-width: 420px) {
  .bm__row { grid-template-columns: 1fr; }
  /* віджет Turnstile ≥ 300px: на 360px діалог 328px → бічні поля 14px дають 300px (не повертати ширші) */
  .bm__card { padding-left: 14px; padding-right: 14px; }
  .bm__card::before { left: 14px; right: 14px; }
  .book { padding-left: 14px; padding-right: 14px; }
  .bm .form__btn { padding: 0 18px; font-size: 12px; letter-spacing: .08em; }
}

/* ---------- Футер ---------- */
.ftr { padding: clamp(60px, 7vw, 90px) 0 32px; background: #070504; position: relative; }
.ftr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--gold-line); }
.ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap: 40px; }
.ftr__brand p { margin-top: 20px; color: var(--stone); font-size: 15px; }
/* підписи й пункти меню — Tenor Sans, як навігація в шапці */
.ftr__cap { font: 400 13px/1 var(--f-nav); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-300); margin-bottom: 18px; }
.ftr__nav { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.ftr__nav a { font: 400 13px/1.3 var(--f-nav); letter-spacing: .14em; text-transform: uppercase; color: var(--cream); opacity: .82; }
.ftr__orgs { color: var(--stone); font-size: 15px; }
/* «Всеукраїнський саміт…» — Forum, як підзаголовок у hero */
.ftr__sub { font: 400 16px/1.4 var(--f-roman); letter-spacing: .12em; text-transform: uppercase; color: #efe6d9; }
/* назви організаторів — Tenor Sans, як «Освітні програми» */
.ftr__org { display: block; margin-bottom: 10px; font: 400 15px/1.35 var(--f-nav); letter-spacing: .05em; text-transform: uppercase; color: var(--cream); }
.ftr__orgs p + p { margin-top: 22px; }
/* соцмережі організаторів: золоті круглі іконки; --soc — діаметр (зона дотику), іконка ≈ 45% */
.ftr__soc { --soc: 42px; display: flex; gap: 10px; }
.ftr__soc-link { display: inline-flex; align-items: center; justify-content: center; width: var(--soc); height: var(--soc); border-radius: 50%;
  color: var(--gold-300); box-shadow: inset 0 0 0 1px var(--gold-500); transition: background-color .25s, color .25s, box-shadow .25s, transform .25s; }
.ftr__soc-link svg { width: calc(var(--soc) * .45); height: calc(var(--soc) * .45); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ftr__soc-link:active { transform: translateY(1px); }
@media (hover: hover) { .ftr__soc-link:hover { background-color: var(--gold-300); color: var(--ink); box-shadow: inset 0 0 0 1px var(--gold-300); } }
@media (max-width: 1023px) { .ftr__soc { --soc: 44px; } }   /* планшет і телефон — зона дотику 44px */
.ftr__bottom { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); color: #6f655a; font-size: 13px; }
@media (hover: hover) { .ftr a:not(.ftr__soc-link):hover { color: var(--gold-100); opacity: 1; } }

/* ---------- Поява при скролі ---------- */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .brand__scan { display: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .rv { opacity: 1; transform: none; }
}

/* =========================================================
   Адаптив
   ========================================================= */
/* бургер — доки повне меню (два логотипи + 5 пунктів + кнопка) не вміщається в один рядок */
@media (max-width: 1279px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: var(--hdr) 0 auto 0; height: calc(100dvh - var(--hdr));
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: 18px var(--gut) 32px; background: rgba(11, 9, 7, .98);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
    overflow-y: auto;
  }
  .hdr.is-open { background: rgba(11, 9, 7, .98); }
  .hdr.is-open .nav { opacity: 1; visibility: visible; transform: none; }
  /* бургер: на 30% менше, ніж було (22–30px → 15–21px), Tenor Sans з розрядкою */
  .nav a:not(.btn) { padding: 16px 0; border-bottom: 1px solid var(--line); font: 400 clamp(15px, 3.5vw, 21px)/1.1 var(--f-nav); text-transform: uppercase; letter-spacing: .16em; color: var(--cream); opacity: 1; }
  .nav__cta { margin-top: 28px; --bh: 54px; font-size: 12.5px; }
  body.menu-open { overflow: hidden; }
}

@media (max-width: 1023px) {
  .about__text, .about__day, .gala__story, .book, .venue__info, .gal { grid-column: 1 / -1; }
  /* одна колонка: 11 проміжків по 28px у 12-колонковій сітці на 320px ширші за екран */
  .venue__grid { grid-template-columns: 1fr; }
  /* телефон і планшет: каруселька — один кадр на екран, гортається сама кожні 2,5 с (JS) і пальцем */
  .about__day {
    width: 100%; max-width: 520px; justify-self: center; margin-top: 48px;
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 100%; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .about__day::-webkit-scrollbar { display: none; }
  .moment { scroll-snap-align: start; scroll-snap-stop: always; }
  .about__dots { grid-column: 1 / -1; justify-self: center; display: flex; gap: 2px; margin-top: 12px; }
  .book { position: static; max-width: 640px; }
  .car { --per: 2; }
  .band__inner { grid-template-columns: 1fr; align-items: start; }
  .band__cta { width: min(100%, 340px); }
}

@media (max-width: 767px) {
  body { font-size: 16px; }
  .dirs__head { grid-template-columns: 1fr; }
  .dir__row { grid-template-columns: 52px 1fr auto; gap: 12px; }
  .dir__more { font-size: 0; gap: 0; }
  .dir__panel > .prog, .dir__panel > .dir__soon { padding-left: 0; }
  .prog__days { grid-template-columns: 1fr; gap: 26px; }
  .org__grid { grid-template-columns: 1fr; }
  .car { --per: 1.15; --gap: 14px; }
  .ftr__grid { grid-template-columns: 1fr; gap: 34px; }
  .gal { gap: 10px; }
  .gal__item { aspect-ratio: 1; }
  .gal__item--wide { aspect-ratio: 16 / 10; }
  .org__card { padding: 30px 22px; }
  .org__logo img { height: 52px; }
  .facts { gap: 14px; }
  .facts dd { font-size: 13px; }
  .gala__shots figure:nth-child(2) { margin-top: 32px; }
  /* телефон: кадр 9:16 від самого верху секції — люстра й гості одразу під текстом, без порожньої темряви */
  .gala { --gala-h: 177.78vw; --gala-top: clamp(0px, (375px - 100vw) * 1.5, 80px); } /* на вужчих за 375 текст вищий — кадр трохи нижче, щоб люстра не лізла під підзаголовок */
  .dress { padding: 24px 22px; }
  .dress p { font-size: 20px; }
  .count__cap { display: none; }
  .count__cell { padding: 9px 14px; min-width: 64px; }
  .count__cell:first-of-type { border-left: 0; }
}

@media (max-width: 420px) {
  .hero__cta .btn { padding: 0 24px; }
  .facts dt { font-size: 36px; }
}

/* ---------- Документи (privacy.html та майбутні cookie / оферта) ---------- */
/* шапка документа: без бургера, кнопка «На головну» видима на всіх ширинах, шапка завжди непрозора */
.hdr--doc .nav { position: static; height: auto; flex-direction: row; padding: 0; background: none; opacity: 1; visibility: visible; transform: none; overflow: visible; }
.hdr--doc .burger { display: none; }
.hdr__home-arrow { display: none; }
/* на вузьких телефонах два логотипи + повна кнопка не вміщаються — лишаємо круглу кнопку зі стрілкою */
@media (max-width: 400px) {
  .hdr__home-text { display: none; }
  .hdr__home-arrow { display: inline; font-size: 20px; line-height: 1; }
  .hdr--doc .hdr__home { width: 40px; min-height: 40px; padding: 0; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1px var(--gold-500); }
}
.legal { max-width: 760px; padding-top: calc(var(--hdr) + clamp(48px, 7vw, 96px)); padding-bottom: clamp(64px, 8vw, 110px); }
.legal code { font: 400 .92em/1 ui-monospace, "Cascadia Mono", Consolas, monospace; padding: 2px 6px; background: var(--ink-3); border: 1px solid var(--line); border-radius: 3px; color: var(--cream); white-space: nowrap; }
.legal__title { margin-top: 0; font: 400 clamp(20px, 8vw - 3px, 44px)/1.18 var(--f-nav); /* слово «КОНФІДЕНЦІЙНОСТІ» ≈ 12.5px на 1px кегля — кегль від ширини, щоб не вилазило */ text-transform: uppercase; letter-spacing: .05em; color: var(--cream); text-wrap: balance; }
.legal__updated { margin-top: 12px; font: 400 15px/1.4 var(--f-roman); letter-spacing: .02em; color: var(--stone); }
.legal h2 { margin: clamp(36px, 4.5vw, 52px) 0 14px; font: 400 clamp(19px, 1.7vw, 23px)/1.3 var(--f-nav); letter-spacing: .03em; color: var(--gold-100); text-wrap: balance; }
.legal p, .legal li { font-size: clamp(16px, 1.25vw, 17px); line-height: 1.7; color: #d9cfc0; }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 12px 0; padding-left: 22px; list-style: disc; }
.legal li { margin-bottom: 8px; padding-left: 4px; }
.legal li::marker { color: var(--gold-500); }
.legal strong { font-weight: 600; color: var(--cream); }
.legal p a, .legal li a { color: var(--gold-300); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(233, 194, 127, .45); }
@media (hover: hover) { .legal p a:hover, .legal li a:hover { color: var(--gold-100); text-decoration-color: currentColor; } }
.legal__contacts { margin: 16px 0; padding: 20px 22px; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); }
.legal__contacts p { margin: 0 0 6px; font-size: 16px; }
.legal__contacts p:last-child { margin-bottom: 0; }
.legal__back { margin-top: clamp(40px, 5vw, 64px); }
.ftr--doc { padding-top: 0; }
.ftr--doc .ftr__bottom { margin-top: 0; }
.ftr__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.ftr__docs a { color: #8d8172; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(233, 194, 127, .3); }
@media (hover: hover) { .ftr__docs a:hover { color: var(--gold-300); } }
/* розробник сайту: «Розробник» + напис NEUROASTRIS у фірмовому кольорі студії; праворуч на десктопі, окремим рядком на телефоні */
.ftr__docs { margin-right: auto; }
.ftr__dev a { display: inline-flex; align-items: baseline; gap: 10px; color: #8d8172; cursor: pointer; }   /* низ напису NEUROASTRIS = базова лінія слова «Розробник» */
.ftr__dev-t { font-size: 13px; line-height: 1; }
/* картинка обрізана рівно по літерах (без прозорих полів), тож її низ = низ літер = базова лінія «Розробник» */
.ftr__dev img { display: block; width: auto; height: 15px; opacity: .88; transition: opacity .25s; }
@media (hover: hover) { .ftr__dev a:hover { color: var(--gold-300); } .ftr__dev a:hover img { opacity: 1; } }
/* поява напису — як логотипи в шапці («Cyber Wipe»): прорізається зліва направо, по ньому біжить сканер,
   далі сканер проходить раз на 9 с. Сканер — у фірмовому зеленому студії. На головній старт, коли футер
   на екрані (main.js додає .is-in); на сторінках без JS (політика, 404) — одразу після завантаження */
.ftr__dev-logo { position: relative; display: block; overflow: hidden; }
.ftr__dev-logo picture { display: block; animation: brand-reveal .85s var(--ease-out) .15s both; }
.ftr__dev-scan {
  position: absolute; top: -10%; bottom: -10%; left: -12px; width: 12px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(236, 255, 214, .85), rgba(135, 255, 29, .95), transparent);
  box-shadow: 0 0 8px rgba(135, 255, 29, .65), 0 0 18px rgba(135, 255, 29, .35);
  animation: brand-scan-in .85s var(--ease-out) .15s both, brand-scan-loop 9s linear 3s infinite;
}
.js .ftr__dev:not(.is-in) .ftr__dev-logo picture, .js .ftr__dev:not(.is-in) .ftr__dev-scan { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ftr__dev-scan { display: none; } }
@media (max-width: 1023px) { .ftr__dev img { height: 13px; } }
@media (max-width: 767px) {
  .ftr__bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ftr__dev { margin-top: 6px; }
  .ftr__dev img { height: 12px; }
}
/* посилання на політику всередині підпису чекбокса згоди */
.field--check label a { color: var(--gold-300); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(233, 194, 127, .45); }
@media (hover: hover) { .field--check label a:hover { color: var(--gold-100); } }

/* ---------- Сторінка 404 ---------- */
/* мова сайту: золоте «404» шрифтом назви (Montserrat 900, як «BEAUTY»), заголовок Tenor Sans, текст Forum */
.nf {
  min-height: calc(100svh - 80px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding-top: calc(var(--hdr) + clamp(32px, 6vh, 72px)); padding-bottom: clamp(48px, 8vh, 96px);
  background: radial-gradient(ellipse 60% 45% at 50% 46%, rgba(194, 140, 70, .14), transparent 70%);
}
.nf__kicker { font: 400 clamp(13px, 1.2vw, 15px)/1.3 var(--f-nav); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-300); }
.nf__code {
  margin-top: clamp(12px, 2vh, 20px); font: 900 clamp(96px, min(24vw, 28vh), 220px)/.86 var(--f-display);   /* і від висоти — щоб в альбомному телефоні кнопки не йшли за край */ letter-spacing: -.02em;
  background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.nf__title { margin-top: clamp(18px, 3vh, 30px); font: 400 clamp(24px, 3.4vw, 40px)/1.2 var(--f-nav); letter-spacing: .05em; text-transform: uppercase; color: var(--cream); text-wrap: balance; }
.nf__text { max-width: 34em; margin-top: 16px; font: 400 clamp(17px, 1.5vw, 20px)/1.55 var(--f-roman); color: #d9cfc0; text-wrap: pretty; }
.nf__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(28px, 4vh, 40px); }
@media (max-width: 480px) { .nf__cta { flex-direction: column; align-self: stretch; } }