/* ============================================================
   AVDH — Адвокатське бюро Вікторії Сікори
   Робочий макет хедера v1 (HTML2)

   Методологія: BEM. Виняток — внутрішня розмітка меню, де
   класи (.menu, .sub-menu, .menu-item, .menu-item-has-children)
   жорстко прив'язані до того, як WordPress генерує wp_nav_menu().
   Це навмисно — щоб у майбутньому верстка лягла у WP без змін.

   Правила:
     · ЖОДНИХ скруглень.
     · Розміри — у rem/em. 1rem = 16px. Всі px-еквіваленти парні.
     · 1px — тільки для hairline-бордерів.
   ============================================================ */

/* -------- Fonts -------- */
@font-face{
    font-family:"BalticaC";
    src:url("../Resources/Logo%20Style/Font/BalticaC/BalticaC.otf") format("opentype");
    font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
    font-family:"BalticaC";
    src:url("../Resources/Logo%20Style/Font/BalticaC/BalticaC_Bold.otf") format("opentype");
    font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
    font-family:"Involve";
    src:url("../Resources/Logo%20Style/Font/Involve/Involve-Regular.ttf") format("truetype");
    font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
    font-family:"Involve";
    src:url("../Resources/Logo%20Style/Font/Involve/Involve-Medium.ttf") format("truetype");
    font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
    font-family:"Involve";
    src:url("../Resources/Logo%20Style/Font/Involve/Involve-SemiBold.ttf") format("truetype");
    font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
    font-family:"Involve";
    src:url("../Resources/Logo%20Style/Font/Involve/Involve-Bold.ttf") format("truetype");
    font-weight:700; font-style:normal; font-display:swap;
}

/* ============================================================
   Tokens
   ============================================================ */
:root{
    --color-green:        #101F19;
    --color-green-2:      #14261F;
    --color-green-3:      #1A3027;
    --color-green-4:      #25382C;
    --color-sage:         #5A6960;
    --color-beige:        #CFBFB1;
    --color-beige-2:      #E7DCD0;
    --color-cream:        #F4EDE4;
    --color-gold:         #BA942D;
    --color-gold-2:       #D7B65C;

    --color-line:         rgba(207, 191, 177, 0.18);
    --color-line-soft:    rgba(207, 191, 177, 0.10);
    --color-line-strong:  rgba(207, 191, 177, 0.32);

    /* Glass-фон для скляних поверхонь */
    --glass-bg:           rgba(16, 31, 25, 0.62);
    --glass-bg-strong:    rgba(16, 31, 25, 0.78);
    --glass-bg-mobile:    rgba(16, 31, 25, 0.86);
    --glass-blur:         blur(1rem) saturate(140%);
    --glass-blur-strong:  blur(1.5rem) saturate(140%);

    --font-display:       "BalticaC", Georgia, serif;
    --font-sans:          "Involve", "Helvetica Neue", Arial, sans-serif;

    /* .container ширина = .header__inner ширина — щоб усі секції на сторінці
       мали ті самі бокові межі, що й контент хедера */
    --container-max:      86.25rem;  /* 1380px — як --header-max */
    --container-pad:      1.25rem;   /* 20px — як --header-pad */
    --header-max:         86.25rem;
    --header-pad:         1.25rem;
    --header-height:      5.375rem;  /* 86px */

    --z-header:           40;
    --z-mega:             39;
    --z-mobile-menu:      50;
    --z-skip:             60;

    --ease:               cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after{ box-sizing:border-box; }

html{
    font-size:100%;
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body, .page{
    margin:0;
    font-family:var(--font-sans);
    color:var(--color-beige);
    /* Continuous base — повільний вертикальний sweep через тони бренду.
       Жодних різких меж: кожна секція лежить на цьому шарі без власного
       solid bg. Унікальні абстракції секцій додають варіації, але теж
       із fade-out на стиках, тому розривів немає. */
    background:
        linear-gradient(180deg,
            #0D1B16 0%,
            #101F19 22%,
            #14261F 58%,
            #101F19 86%,
            #0C1813 100%
        );
    min-height:100vh;
    line-height:1.55;
    overflow-x:hidden;
    font-weight:400;
}

body.is-menu-open{ overflow:hidden; }

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button, input, textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; padding:0; }
ul{ margin:0; padding:0; list-style:none; }

code{
    font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size:0.875em;
    color:var(--color-gold-2);
    background:rgba(186, 148, 45, 0.08);
    padding:0.125rem 0.375rem;
}

::selection{ background:rgba(186, 148, 45, 0.42); color:var(--color-cream); }

:focus-visible{
    outline:2px solid var(--color-gold-2);
    outline-offset:0.25rem;
}

/* ============================================================
   Utilities
   ============================================================ */
.container{
    width:min(var(--container-max), calc(100% - var(--container-pad) * 2));
    margin:0 auto;
}

.skip-link{
    position:absolute;
    top:0.875rem; left:0.875rem;
    z-index:var(--z-skip);
    transform:translateY(-200%);
    padding:0.625rem 0.875rem;
    background:var(--color-gold);
    color:var(--color-green);
    font-weight:700;
}
.skip-link:focus{ transform:translateY(0); }

.kicker{
    margin:0 0 1rem;
    color:var(--color-gold);
    font-size:0.75rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    font-weight:600;
}


/* ============================================================
   BLOCK: header
   ============================================================ */
.header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:var(--z-header);
    color:var(--color-cream);
    background:transparent;
    transition:background 220ms var(--ease), border-color 220ms var(--ease);
}

/* Glass-стан хедера: при скролі АБО коли активна dropdown/mega панель.
   .is-menu-active клас додає JS при відкритті будь-якої панелі.
   Mega-panel портується у <body> (поза DOM хедера) — тому хедер і
   панель можуть мати свої незалежні backdrop-filter без конфлікту
   containing-block. */
.header.is-scrolled,
.header.is-menu-active{
    background:var(--glass-bg);
    border-bottom:1px solid var(--color-line-soft);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
}

/* Коли активна mega/dropdown — прибираємо нижній бордер хедера,
   бо його роль перебирає золотиста лінія зверху панелі */
.header.is-menu-active{
    border-bottom:0;
}

.header__inner{
    width:min(var(--header-max), calc(100% - var(--header-pad) * 2));
    min-height:var(--header-height);
    margin:0 auto;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:2rem;
}

/* -- header__brand -- */
.header__brand{
    display:inline-flex;
    align-items:center;
    gap:0.25rem;
    min-width:0;
}
.header__brand-logo{
    width:2.5rem;
    height:2.5rem;
    flex:none;
}
.header__brand-text{
    display:block;
    font-size:0.875rem;
    line-height:1.2;
    color:var(--color-beige-2);
    letter-spacing:0.01em;
}
.header__brand-name{
    display:block;
    font-family:var(--font-display);
    font-size:1.25rem;
    font-weight:400;
    line-height:1.05;
    color:var(--color-cream);
    letter-spacing:0.005em;
}

/* -- header__nav (контейнер) -- */
.header__nav{
    align-self:stretch;          /* розтягуємо на повну висоту хедера */
    display:flex;
    align-items:stretch;
    justify-content:center;
}

/* -- header__actions -- */
.header__actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:0.625rem;
}

/* -- header__burger -- */
.header__burger{
    display:none;
    width:2.625rem;
    height:2.625rem;
    border:1px solid var(--color-line);
    background:rgba(16, 31, 25, 0.6);
    color:var(--color-cream);
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:0.25rem;
}
.header__burger-bar{
    display:block;
    width:1.125rem;
    height:1px;
    background:var(--color-cream);
}


/* ============================================================
   MENU (WordPress-сумісна розмітка)
   .menu / .sub-menu / .menu-item / .menu-item-has-children
   ============================================================ */

/* ---- Рівень 1 — горизонтальне меню в хедері ----
   .menu і .menu-item розтягуються на повну висоту хедера, щоб
   між <a> і dropdown-панеллю не було мертвої зони, де ховер злітає. */
.header__nav > .menu{
    display:flex;
    align-items:stretch;
    gap:0.25rem;
    height:100%;
}

.header__nav > .menu > .menu-item{
    position:relative;
    display:flex;
    align-items:stretch;
}

.header__nav > .menu > .menu-item > a{
    position:relative;
    align-self:center;            /* <a> не розтягується — лише <li> */
    display:inline-flex;
    align-items:center;
    gap:0.375rem;
    padding:0.625rem 0.875rem;
    color:rgba(244, 237, 228, 0.78);
    font-size:0.875rem;
    line-height:1;
    letter-spacing:0.02em;
    transition:color 180ms var(--ease);
}
.header__nav > .menu > .menu-item > a::after{
    content:"";
    position:absolute;
    left:0.875rem; right:0.875rem;
    bottom:0.25rem;
    height:1px;
    background:var(--color-gold);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform 260ms var(--ease);
}
.header__nav > .menu > .menu-item:hover > a,
.header__nav > .menu > .menu-item:focus-within > a{
    color:var(--color-cream);
}
.header__nav > .menu > .menu-item:hover > a::after,
.header__nav > .menu > .menu-item:focus-within > a::after{
    transform:scaleX(1);
}

/* Шеврон біля пунктів з дітьми (інжектується через JS — клас .menu-item__chevron) */
.menu-item__chevron{
    width:0.75rem;
    height:0.75rem;
    flex:none;
    transition:transform 220ms var(--ease);
}
.header__nav > .menu > .menu-item-has-children.is-open > a .menu-item__chevron{
    transform:rotate(-180deg);
}

/* ---- DROPDOWN для .menu-item-has-children:not(.mega) ----
   (Про нас, Вартість) Залишаються у <li>, керуються JS — .is-open.
   Тригер тільки через JS на <a>:mouseenter, не на :hover всього <li>. */
.header__nav > .menu > .menu-item-has-children:not(.mega) > .sub-menu{
    position:absolute;
    top:100%;
    left:0;
    min-width:14rem;
    padding:0.75rem;
    background:var(--glass-bg-strong);
    backdrop-filter:var(--glass-blur-strong);
    -webkit-backdrop-filter:var(--glass-blur-strong);
    border:1px solid var(--color-line-soft);
    border-top:1px solid rgba(186, 148, 45, 0.4);
    box-shadow:0 1.5rem 2.5rem rgba(0, 0, 0, 0.4);
    display:flex;
    flex-direction:column;
    gap:0.125rem;
    opacity:0;
    visibility:hidden;
    transform:translateY(-0.5rem);
    pointer-events:none;
    transition:opacity 220ms var(--ease), transform 220ms var(--ease), visibility 220ms var(--ease);
    z-index:var(--z-mega);
}

.header__nav > .menu > .menu-item-has-children:not(.mega).is-open > .sub-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
}

.header__nav > .menu > .menu-item-has-children:not(.mega) > .sub-menu .menu-item > a{
    display:block;
    padding:0.625rem 0.875rem;
    color:rgba(244, 237, 228, 0.86);
    font-size:0.875rem;
    line-height:1.2;
    letter-spacing:0.01em;
    transition:color 180ms var(--ease), background-color 180ms var(--ease);
}
.header__nav > .menu > .menu-item-has-children:not(.mega) > .sub-menu .menu-item > a:hover{
    color:var(--color-cream);
    background:rgba(207, 191, 177, 0.06);
}

/* ---- MEGA-MENU (Послуги) — портується у body через JS ----
   У хедері залишається лише <li.mega> з <a>; <ul.sub-menu> JS переносить
   у .mega-portal у <body>, щоб backdrop-filter хедера не створював
   containing-block для mega-panel. */
.header__nav > .menu > .menu-item.mega{
    position:static;
}


/* ============================================================
   BLOCK: mega-portal (контейнер mega-panel, портується у <body>)
   ============================================================ */
.mega-portal{
    position:fixed;
    top:var(--header-height);
    left:0;
    right:0;
    z-index:var(--z-mega);
    pointer-events:none;
}

/* <ul.sub-menu> після переносу — це і є mega-панель */
.mega-portal > .sub-menu{
    width:100%;
    margin:0;
    padding:2.5rem 0 3rem;
    padding-left:calc((100vw - min(var(--container-max), 100vw - 4rem)) / 2);
    padding-right:calc((100vw - min(var(--container-max), 100vw - 4rem)) / 2);
    background:var(--glass-bg-strong);
    backdrop-filter:var(--glass-blur-strong);
    -webkit-backdrop-filter:var(--glass-blur-strong);
    border-top:1px solid rgba(186, 148, 45, 0.4);
    border-bottom:1px solid var(--color-line-soft);
    box-shadow:0 1.5rem 3rem rgba(0, 0, 0, 0.4);
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    column-gap:2rem;
    row-gap:2rem;
    opacity:0;
    visibility:hidden;
    transform:translateY(-0.5rem);
    pointer-events:none;
    transition:opacity 240ms var(--ease), transform 240ms var(--ease), visibility 240ms var(--ease);
    list-style:none;
}
.mega-portal > .sub-menu.is-open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
}

/* Рівень 2 — заголовки колонок */
.mega-portal > .sub-menu > .menu-item > a{
    display:block;
    padding:0 0 0.75rem;
    margin-bottom:0.75rem;
    border-bottom:1px solid var(--color-line-soft);
    font-family:var(--font-display);
    font-size:1.125rem;
    font-weight:400;
    color:var(--color-cream);
    letter-spacing:0.005em;
    transition:color 180ms var(--ease), border-color 180ms var(--ease);
}
.mega-portal > .sub-menu > .menu-item > a:hover{
    color:var(--color-gold-2);
    border-bottom-color:var(--color-gold);
}

/* Рівень 3 — вкладений .sub-menu всередині колонки */
.mega-portal > .sub-menu .sub-menu{
    display:flex;
    flex-direction:column;
    gap:0.375rem;
    list-style:none;
    margin:0;
    padding:0;
}
.mega-portal > .sub-menu .sub-menu .menu-item > a{
    display:inline-block;
    padding:0.25rem 0;
    color:rgba(244, 237, 228, 0.72);
    font-size:0.875rem;
    line-height:1.4;
    letter-spacing:0.005em;
    transition:color 180ms var(--ease), transform 180ms var(--ease);
}
.mega-portal > .sub-menu .sub-menu .menu-item > a:hover{
    color:var(--color-cream);
    transform:translateX(0.25rem);
}

/* На рівні 2 mega-меню шеврон не потрібен */
.mega-portal .menu-item__chevron{ display:none; }


/* ============================================================
   BLOCK: mobile-menu
   ============================================================ */
.mobile-menu{
    position:fixed;
    inset:0;
    z-index:var(--z-mobile-menu);
    visibility:hidden;
    pointer-events:none;
    /* Затримка visibility = тривалості анімації панелі.
       Так контейнер залишається visible поки панель і бекдроп
       плавно «їдуть» назад, і лише потім зникає. */
    transition:visibility 0s 360ms;
}
.mobile-menu.is-open{
    visibility:visible;
    pointer-events:auto;
    transition:visibility 0s 0s;
}

.mobile-menu__backdrop{
    position:absolute;
    inset:0;
    background:rgba(0, 0, 0, 0.5);
    opacity:0;
    transition:opacity 320ms var(--ease);
    cursor:pointer;
}
.mobile-menu.is-open .mobile-menu__backdrop{ opacity:1; }

.mobile-menu__panel{
    position:absolute;
    top:0; right:0; bottom:0;
    width:min(26rem, 100%);
    background:var(--glass-bg-mobile);
    backdrop-filter:var(--glass-blur-strong);
    -webkit-backdrop-filter:var(--glass-blur-strong);
    border-left:1px solid var(--color-line-soft);
    box-shadow:-1.5rem 0 3rem rgba(0, 0, 0, 0.5);
    transform:translateX(100%);
    transition:transform 360ms var(--ease);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.mobile-menu.is-open .mobile-menu__panel{ transform:translateX(0); }

.mobile-menu__head{
    flex:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.5rem;
    min-height:var(--header-height);
    padding:0 var(--header-pad);
    border-bottom:1px solid var(--color-line-soft);
}
.mobile-menu__brand{
    display:inline-flex;
    align-items:center;
    gap:0.25rem;
    color:var(--color-cream);
}
.mobile-menu__brand-logo{
    width:2.25rem;
    height:2.25rem;
    flex:none;
}
.mobile-menu__brand-text{
    display:block;
    font-size:0.75rem;
    line-height:1.2;
    color:var(--color-beige-2);
}
.mobile-menu__brand-name{
    display:block;
    font-family:var(--font-display);
    font-size:1rem;
    font-weight:700;
    line-height:1.05;
    color:var(--color-cream);
}

.mobile-menu__close{
    width:2.625rem;              /* 42px — як кнопка телефону та бургер */
    height:2.625rem;
    border:1px solid var(--color-line);
    color:var(--color-cream);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:border-color 180ms var(--ease), background-color 180ms var(--ease);
}
.mobile-menu__close svg{ width:1.25rem; height:1.25rem; }
.mobile-menu__close:hover{
    border-color:var(--color-gold);
    background:rgba(186, 148, 45, 0.08);
}

.mobile-menu__nav{
    flex:1 1 auto;
    overflow-y:auto;
    overscroll-behavior:contain;
}

.mobile-menu__foot{
    flex:none;
    display:flex;
    flex-direction:column;
    gap:0.625rem;
    padding:1.25rem 1.5rem;
    border-top:1px solid var(--color-line-soft);
    background:rgba(16, 31, 25, 0.4);
}
.mobile-menu__foot .button{ width:100%; }


/* ---- Меню всередині mobile-menu ---- */
.mobile-menu .menu{
    display:flex;
    flex-direction:column;
}

/* .menu-item на мобільному — flex-wrap, щоб <a> і toggle йшли рядком,
   а <ul.sub-menu> переносилась на новий рядок 100% ширини */
.mobile-menu .menu-item{
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    border-bottom:1px solid var(--color-line-soft);
}
.mobile-menu .menu-item:last-child{ border-bottom:0; }

.mobile-menu .menu-item > a{
    flex:1 1 auto;
    display:flex;
    align-items:center;
    padding:1rem 1.5rem;
    color:var(--color-cream);
    font-size:1rem;
    line-height:1.3;
    letter-spacing:0.005em;
    transition:color 180ms var(--ease), background-color 180ms var(--ease);
}
.mobile-menu .menu-item > a:hover{
    color:var(--color-gold-2);
    background:rgba(207, 191, 177, 0.04);
}

/* Toggle-кнопка стрілки — інжектується JS, сидить поряд з <a> */
.mobile-menu .menu-item__toggle{
    flex:none;
    width:3.5rem;
    align-self:stretch;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--color-beige-2);
    border-left:1px solid var(--color-line-soft);
    transition:color 180ms var(--ease), background-color 180ms var(--ease);
}
.mobile-menu .menu-item__toggle svg{
    width:1rem;
    height:1rem;
    transition:transform 240ms var(--ease);
}
.mobile-menu .menu-item__toggle:hover{
    color:var(--color-gold-2);
    background:rgba(186, 148, 45, 0.06);
}
.mobile-menu .menu-item.is-open > .menu-item__toggle svg{
    transform:rotate(-180deg);
}

/* Вкладений sub-menu — займає 100% ширини під рядком, акордеон */
.mobile-menu .sub-menu{
    flex:1 0 100%;
    display:none;
    flex-direction:column;
    background:rgba(0, 0, 0, 0.18);
    border-top:1px solid var(--color-line-soft);
}
.mobile-menu .menu-item.is-open > .sub-menu{ display:flex; }

/* Рівень 2 — менший шрифт, більший лівий відступ */
.mobile-menu .sub-menu .menu-item > a{
    padding:0.875rem 1.5rem 0.875rem 2.5rem;
    font-size:0.875rem;
}
/* Рівень 3 — ще більший лівий відступ і приглушений колір */
.mobile-menu .sub-menu .sub-menu .menu-item > a{
    padding-left:3.5rem;
    color:rgba(244, 237, 228, 0.78);
}


/* ============================================================
   BLOCK: button (реюзний)
   ============================================================ */
.button{
    --button-h: 2.75rem;
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:var(--button-h);
    padding:0 1.125rem;
    border:0;
    background:transparent;
    color:var(--color-cream);
    font-family:var(--font-sans);
    font-size:0.875rem;
    font-weight:600;
    line-height:1;
    letter-spacing:0.04em;
    text-transform:uppercase;
    white-space:nowrap;
    cursor:pointer;
    transition:color 220ms var(--ease), background-color 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease);
    user-select:none;
}
.button__icon{
    width:1rem; height:1rem;
    flex:none;
    margin-right:0.5rem;
}
.button__label{ display:inline-block; }
.button--phone{ letter-spacing:0.06em; }

.button--primary{
    background:var(--color-gold);
    color:var(--color-green);
    border:1px solid var(--color-gold);
}
.button--primary:hover{
    background:var(--color-gold-2);
    border-color:var(--color-gold-2);
}
.button--primary:active{ transform:translateY(1px); }

.button--ghost{
    border:1px solid var(--color-line-strong);
    background:rgba(16, 31, 25, 0.32);
    color:var(--color-cream);
}
.button--ghost:hover{
    border-color:var(--color-beige);
    background:rgba(207, 191, 177, 0.08);
}
.button--ghost:active{ transform:translateY(1px); }

/* ============================================================
   КНОПКИ — ВАРІАНТИ ЗАЛИВКИ (fill)
   Спільна механіка: шар .button__fill «заливає» кнопку при ховері.
   Напрям задає -h (горизонт.) / -v (вертик.) / -c (з центру),
   роль і кольори — -cta (золота) / -ghost (контурна).
   Відтінок заливки CTA — is-deep (глибокий green-4) або зелений.
   ============================================================ */
.button--fill{ overflow:hidden; padding:0; border:1px solid transparent; }
.button__fill{
    position:absolute; inset:0; z-index:0;
    transition:transform 420ms cubic-bezier(.6,.05,.2,1);
    will-change:transform;
}
.button--fill .button__content{
    position:relative; z-index:1;
    display:inline-flex; align-items:center;
    padding:0 1.25rem; min-height:var(--button-h);
    transition:color 300ms var(--ease);
}

/* --- напрями заливки --- */
.button--fill-h .button__fill{ transform:translateX(-101%); }
.button--fill-h:hover .button__fill,
.button--fill-h:focus-visible .button__fill{ transform:translateX(0); }

.button--fill-v .button__fill{ transform:translateY(101%); }
.button--fill-v:hover .button__fill,
.button--fill-v:focus-visible .button__fill{ transform:translateY(0); }

.button--fill-c .button__fill{ transform:scaleX(0); transform-origin:center; }
.button--fill-c:hover .button__fill,
.button--fill-c:focus-visible .button__fill{ transform:scaleX(1); }

/* --- CTA: суцільне золото у спокої, заливка іншим кольором --- */
.button--fill-cta{
    background:var(--color-gold);
    color:var(--color-green);
    border-color:var(--color-gold);
}
.button--fill-cta .button__fill{ background:var(--color-green); }
.button--fill-cta:hover{ color:var(--color-gold-2); }

.button--fill-cta.is-deep .button__fill{ background:var(--color-green-4); }

/* --- Ghost (контурна, як «телефон») --- */
.button--fill-ghost{
    background:rgba(16, 31, 25, 0.32);
    color:var(--color-beige);
    border-color:var(--color-line-strong);
}
.button--fill-ghost .button__fill{ background:var(--color-beige); }
.button--fill-ghost:hover{ color:var(--color-green); border-color:var(--color-beige); }

.button--fill:active{ transform:translateY(1px); }

@media (prefers-reduced-motion: reduce){
    .button__fill{ transition:none; }
}


/* ============================================================
   BLOCK: hero (загальні стилі для обох модифікаторів)
   ============================================================ */
.hero{
    position:relative;
    overflow:hidden;
    padding:calc(var(--header-height) + 5rem) 0 5rem;
    background:transparent;
    color:var(--color-cream);
}

/* Hero abstraction — радіальні блюри + ортогональна сітка 4rem.
   Маски fade зверху і знизу — на стику з about абстракція
   плавно щезає, переходів не видно. */
.hero__bg{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 14%, black 80%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, black 14%, black 80%, transparent 100%);
}
.hero__bg::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse at 85% 12%, rgba(186, 148, 45, 0.16) 0%, transparent 45%),
        radial-gradient(ellipse at 8% 92%, rgba(90, 105, 96, 0.22) 0%, transparent 55%);
}
.hero__bg::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(207, 191, 177, 0.030) 1px, transparent 1px),
        linear-gradient(90deg, rgba(207, 191, 177, 0.030) 1px, transparent 1px);
    background-size:4rem 4rem;
}

.hero__container{
    position:relative;
    z-index:1;
}

.hero__eyebrow{
    margin:0 0 1.5rem;
    color:var(--color-gold);
    font-size:0.75rem;                /* 12px */
    letter-spacing:0.3em;
    text-transform:uppercase;
    font-weight:600;
}

.hero__title{
    margin:0 0 1.5rem;
    font-family:var(--font-display);
    font-weight:400;
    color:var(--color-cream);
    font-size:clamp(2.5rem, 5.5vw, 4.5rem);   /* 40-72px */
    line-height:1.06;
    letter-spacing:-0.005em;
    text-wrap:balance;
}
.hero__title-accent{ color:var(--color-gold); }

.hero__lead{
    margin:0 0 2.5rem;
    max-width:54ch;
    font-size:1.125rem;                /* 18px */
    line-height:1.6;
    color:rgba(244, 237, 228, 0.78);
}

.hero__actions{
    display:flex;
    flex-wrap:wrap;
    gap:0.75rem;
}

/* Маркери довіри — 4 в ряд внизу хіро */
.hero__markers{
    list-style:none;
    margin:5rem 0 0;
    padding:3rem 0 0;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:2rem;
    border-top:1px solid var(--color-line-soft);
}

.hero-marker__num{
    display:inline-flex;
    align-items:baseline;
    font-family:var(--font-display);
    font-weight:400;
    color:var(--color-gold);
    font-size:clamp(2rem, 4vw, 3.5rem);  /* 32-56px */
    line-height:1;
    letter-spacing:-0.01em;
}

/* Odometer — переписуємо стилі бібліотеки під наш бренд (BalticaC, золотий).
   Theme-minimal задає Helvetica і line-height:1.1em — нам це не треба. */
.hero-marker__num .odometer{
    font-family:var(--font-display);
    line-height:1;
}
.hero-marker__suffix{
    font-family:var(--font-display);
    color:inherit;
}
.hero-marker__label{
    display:block;
    margin-top:0.75rem;
    font-size:0.75rem;                  /* 12px */
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:rgba(244, 237, 228, 0.66);
    line-height:1.4;
}


/* ============================================================
   BLOCK: hero — модифікатор editorial (v1)
   Лівий стовпчик: текст. Правий: монограм.
   ============================================================ */
.hero--editorial .hero__layout{
    display:grid;
    grid-template-columns:minmax(0, 2fr) minmax(0, 1fr);
    gap:4rem;
    align-items:center;
}

.hero--editorial .hero__visual{
    display:flex;
    align-items:center;
    justify-content:center;
}
.hero--editorial .hero__monogram{
    width:100%;
    max-width:22rem;                   /* 352px */
    height:auto;
    filter:drop-shadow(0 1rem 1.5rem rgba(0, 0, 0, 0.35));
}


/* ============================================================
   BLOCK: about — editorial dissolve (v1)
   ------------------------------------------------------------
   Фон продовжує атмосферу hero: та сама --color-green база,
   радіальні блюри в інших кутах (рух при скролі), сітка 4rem
   маскована з обох боків (на стиках з hero/filler прозора —
   жодних видимих швів між секціями).
   ============================================================ */
.about{
    position:relative;
    overflow:hidden;
    padding:5rem 0 7rem;
    background:transparent;
    color:var(--color-cream);
}

/* About abstraction — ІНШИЙ характер, ніж у hero:
   - діагональні штрихи 1px (замість ортогональної сітки)
   - єдиний м'який золотий spotlight зліва-по-центру
   - sage glow у правому нижньому куті
   Маски fade зверху й знизу — на стиках секцій незримо. */
.about__bg{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 18%, black 80%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, black 18%, black 80%, transparent 100%);
}
.about__bg::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse 45% 60% at 18% 48%, rgba(186, 148, 45, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 55% 45% at 92% 85%, rgba(90, 105, 96, 0.16) 0%, transparent 60%);
}
/* Діагональні штрихи (1px @ 35°), мінімальна непрозорість */
.about__bg::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:repeating-linear-gradient(
        125deg,
        rgba(207, 191, 177, 0.025) 0 1px,
        transparent 1px 5rem
    );
}

.about__container{
    position:relative;
    z-index:1;
}

/* Editorial page-marker — тонка золота лінія + номер + лейбл */
.about__index{
    display:flex;
    align-items:center;
    gap:0.75rem;
    margin:0 0 3rem;
    font-size:0.75rem;                  /* 12px */
    letter-spacing:0.3em;
    text-transform:uppercase;
}
.about__index-line{
    width:3rem;                          /* 48px */
    height:1px;
    background:var(--color-gold);
    opacity:0.55;
}
.about__index-num{
    font-family:var(--font-display);
    font-size:0.875rem;                 /* 14px */
    font-weight:400;
    color:var(--color-gold);
    letter-spacing:0.1em;
}
.about__index-label{
    color:rgba(244, 237, 228, 0.66);
    font-weight:600;
}

.about__layout{
    display:grid;
    grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
    gap:5rem;
    align-items:center;
}

/* Портрет — без рамки. Знизу dissolve у фон через mask-image,
   тому фото не має жорсткої прямокутної межі знизу */
.about__portrait{
    position:relative;
    margin:0;
}
.about__portrait-img{
    display:block;
    width:100%;
    height:auto;                       /* природні пропорції обрізаного фото (~0.38) */
    -webkit-mask-image:linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
    mask-image:linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}

/* Підпис — magazine-style з тонкою лівою межею */
.about__caption{
    margin-top:1.5rem;
    padding-left:1.5rem;
    display:flex;
    flex-direction:column;
    gap:0.25rem;
    border-left:1px solid var(--color-line);
}
.about__caption-name{
    font-family:var(--font-display);
    font-size:1.125rem;                 /* 18px */
    color:var(--color-cream);
    letter-spacing:-0.005em;
    line-height:1.2;
}
.about__caption-role{
    font-size:0.75rem;                  /* 12px */
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--color-gold);
}

/* Текстова частина */
.about__body{
    padding-top:0.5rem;
}

.about__eyebrow{
    margin:0 0 1.5rem;
    color:var(--color-gold);
    font-size:0.75rem;                  /* 12px */
    letter-spacing:0.3em;
    text-transform:uppercase;
    font-weight:600;
}

.about__title{
    margin:0 0 1.75rem;
    font-family:var(--font-display);
    font-weight:400;
    color:var(--color-cream);
    font-size:clamp(2rem, 3.6vw, 3.25rem); /* 32-52px */
    line-height:1.1;
    letter-spacing:-0.005em;
    text-wrap:balance;
}
.about__title-accent{ color:var(--color-gold); }

.about__lead{
    margin:0 0 1.25rem;
    max-width:54ch;
    font-size:1.125rem;                 /* 18px */
    line-height:1.6;
    color:rgba(244, 237, 228, 0.82);
}

.about__text{
    margin:0 0 2.5rem;
    max-width:54ch;
    font-size:1rem;                     /* 16px */
    line-height:1.7;
    color:rgba(244, 237, 228, 0.64);
}

/* Власний CTA — editorial underline + arrow; окремий від .button */
.about__cta{
    display:inline-flex;
    align-items:center;
    gap:0.75rem;
    padding:0.875rem 0;
    font-family:var(--font-sans);
    font-size:0.875rem;                 /* 14px */
    font-weight:600;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--color-gold);
    border-bottom:1px solid var(--color-gold);
    transition:gap 280ms cubic-bezier(0.4, 0, 0.2, 1),
               color 280ms cubic-bezier(0.4, 0, 0.2, 1),
               border-bottom-color 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.about__cta:hover,
.about__cta:focus-visible{
    gap:1.25rem;
    color:var(--color-gold-2);
    border-bottom-color:var(--color-gold-2);
}
.about__cta-arrow{
    width:1rem;                         /* 16px */
    height:1rem;
    transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.about__cta:hover .about__cta-arrow,
.about__cta:focus-visible .about__cta-arrow{
    transform:translateX(0.25rem);
}


/* ============================================================
   BLOCK: intro (заглушка під хедером)
   ============================================================ */
.intro{
    padding:calc(var(--header-height) + 4.5rem) 0 3.5rem;
    border-bottom:1px solid var(--color-line-soft);
}
.intro__title{
    margin:0 0 1.125rem;
    font-family:var(--font-display);
    font-weight:400;
    color:var(--color-cream);
    font-size:clamp(2rem, 4vw, 3.25rem);
    line-height:1.08;
    letter-spacing:-0.005em;
    max-width:22ch;
}
.intro__lead{
    margin:0;
    max-width:62ch;
    color:rgba(244, 237, 228, 0.74);
    font-size:1rem;
    line-height:1.6;
}



/* ============================================================
   BLOCK: filler
   ============================================================ */
.filler{
    padding:7.5rem 0 12.5rem;
    color:rgba(244, 237, 228, 0.5);
    border-top:1px solid var(--color-line-soft);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Між 1024 і 1180 — стискаємо горизонтальне меню */
@media (max-width:73.75rem){    /* 1180px */
    .header__inner{ gap:1.25rem; }
    .header__nav > .menu > .menu-item > a{
        padding:0.625rem 0.625rem;
        font-size:0.75rem;
    }
    .button{ padding:0 0.875rem; font-size:0.75rem; }

    /* mega-menu в 3 колонки */
    .header__nav > .menu > .menu-item.mega > .sub-menu{
        grid-template-columns:repeat(3, 1fr);
    }
}

/* Ховаємо desktop-меню, показуємо бургер */
@media (max-width:56.25rem){    /* 900px */
    :root{ --header-height: 4.25rem; } /* 68px */
    .header__inner{ gap:0.5rem; }
    .header__nav{ display:none; }

    /* Лого + текст залишаємо, але зменшуємо */
    .header__brand{ gap:0.25rem; }             /* 4px */
    .header__brand-logo{
        width:2.25rem;                         /* 36px */
        height:2.25rem;
    }
    /* Текст біля логотипу — рівно як у .mobile-menu__brand-* */
    .header__brand-text{
        display:block;
        font-size:0.75rem;                     /* 12px */
        line-height:1.2;
        letter-spacing:0;
    }
    .header__brand-name{
        font-size:1rem;                        /* 16px */
        line-height:1.05;
        letter-spacing:0;
        font-weight:700;
    }

    /* Всі кнопки в actions — однієї висоти 42px (як бургер) */
    .header__actions .button{ --button-h:2.625rem; }

    .header__actions .button--phone,
    .header__actions .button--phone .button__content{ padding:0 0.75rem; }
    .header__actions .button--phone .button__label{ display:none; }
    .header__actions .button--phone .button__icon{ margin-right:0; }

    .header__actions .header__cta{ font-size:0.75rem; }
    .header__actions .header__cta .button__content{ padding:0 0.875rem; }
    .header__burger{
        display:inline-flex;
        margin-left:0.25rem;
    }
}

@media (max-width:35rem){       /* 560px */
    :root{
        --container-pad: 1rem;
        --header-pad: 1rem;
    }
    .header__actions .header__cta{ display:none; }
    .intro{ padding-top:calc(var(--header-height) + 3rem); }
    .hero{ padding:calc(var(--header-height) + 3rem) 0 3rem; }
    .hero__markers{
        margin-top:3rem;
        padding-top:2rem;
        gap:1.5rem 1rem;
    }
}

/* Hero responsive ─ стек */
@media (max-width:56.25rem){    /* 900px */
    .hero{ padding:calc(var(--header-height) + 4rem) 0 4rem; }
    .hero--editorial .hero__layout{
        grid-template-columns:1fr;
        gap:2.5rem;
    }
    .hero--editorial .hero__visual{ order:-1; }
    .hero--editorial .hero__monogram{ max-width:8rem; }
    .hero__markers{
        grid-template-columns:repeat(2, 1fr);
        gap:2.5rem 2rem;
    }
}

/* About — стек на планшеті/мобільному.
   На стеку фото повертається у межі контейнера, fade — донизу,
   щоб текст під ним «виплив» із темряви, а не збоку. */
@media (max-width:56.25rem){    /* 900px */
    .about{ padding:4rem 0 5rem; }
    .about__index{ margin-bottom:2rem; }
    .about__layout{
        grid-template-columns:1fr;
        gap:3rem;
    }
    .about__portrait-img{
        max-width:28rem;                 /* 448px */
        margin:0 auto;
    }
    .about__caption{
        max-width:28rem;
        margin-left:auto;
        margin-right:auto;
    }
    .about__title{ max-width:none; }
    .about__lead, .about__text{ max-width:none; }
}

@media (max-width:35rem){       /* 560px */
    .about{ padding:3rem 0 4rem; }
    .about__index{ gap:0.5rem; margin-bottom:1.5rem; }
    .about__index-line{ width:1.5rem; }
    .about__layout{ gap:2.5rem; }
    .about__lead{ font-size:1rem; }
}

/* Користувач воліє менш агресивну анімацію */
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        transition-duration:0.01ms !important;
        animation-duration:0.01ms !important;
    }
}
/* ============================================================
   BLOCK: testimonials — «Відео відгуки»
   ------------------------------------------------------------
   Асиметрична сітка постерів. Перша картка (--feature) займає
   2×2. Клік по .vtesti__card → плеєр у лайтбоксі Fancybox.
   Атмосфера секції продовжує hero/about: та сама green-база,
   радіальні блюри, маски fade на стиках. ЖОДНИХ скруглень.
   ============================================================ */
.testimonials{
    position:relative;
    overflow:hidden;
    padding:5rem 0;
    background:transparent;
    color:var(--color-cream);
}
.testimonials__bg{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
}
.testimonials__bg::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse 50% 55% at 88% 18%, rgba(186, 148, 45, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 55% 50% at 6% 88%, rgba(90, 105, 96, 0.16) 0%, transparent 60%);
}
.testimonials__bg::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:repeating-linear-gradient(
        55deg,
        rgba(207, 191, 177, 0.022) 0 1px,
        transparent 1px 5rem
    );
}

.testimonials__container{
    position:relative;
    z-index:1;
}

/* -- head (по лівому краю) -- */
.testimonials__head{
    max-width:46rem;
    margin:0 0 4rem;
}
.testimonials__kicker{
    margin:0 0 1.5rem;
    display:inline-flex;
    align-items:baseline;
    gap:0.75rem;
    color:var(--color-gold);
    font-size:0.75rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    font-weight:600;
}
.testimonials__kicker-mark{
    font-family:var(--font-display);
    font-size:1.5rem;
    line-height:1;
    color:var(--color-gold-2);
    letter-spacing:0;
}
.testimonials__title{
    margin:0 0 1.25rem;
    font-family:var(--font-display);
    font-weight:400;
    color:var(--color-cream);
    font-size:clamp(2rem, 3.6vw, 3.25rem);  /* 32-52px */
    line-height:1.1;
    letter-spacing:-0.005em;
    text-wrap:balance;
}
.testimonials__title-accent{ color:var(--color-gold); }
.testimonials__lead{
    margin:0;
    max-width:56ch;
    font-size:1.125rem;                 /* 18px */
    line-height:1.6;
    color:rgba(244, 237, 228, 0.78);
}

/* -- mosaic: 4 колонки — центральний герой + фланги + дві нижні половини.
   Блок мінімум 100dvh: на десктопі рядки 1fr розтягують клітинки.
     r1: [ 1 ][ 2   2 ][ 3 ]
     r2: [ 4 ][ 2   2 ][ 5 ]
     r3: [ 6   6 ][ 7   7 ]                                        */
.testimonials__grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-auto-rows:13rem;               /* 208px — базова клітинка (фолбек) */
    grid-auto-flow:dense;
    gap:1.25rem;
}
.testimonials__grid > .vtesti:nth-child(2){ grid-column:span 2; grid-row:span 2; }  /* центральний герой */
.testimonials__grid > .vtesti:nth-child(6){ grid-column:span 2; }                    /* нижній ряд — ліва половина */
.testimonials__grid > .vtesti:nth-child(7){ grid-column:span 2; }                    /* нижній ряд — права половина */

@media (min-width:73.8125rem){          /* >1180px — блок мінімум 100dvh */
    .testimonials__grid{
        min-height:100dvh;
        grid-template-rows:repeat(3, minmax(0, 1fr));
        grid-auto-rows:auto;
    }
}

/* ============================================================
   ELEMENT: vtesti (одна картка-відгук) — full-bleed постер з
   підписом-оверлеєм; уся картка заповнює свою клітинку мозаїки.
   ============================================================ */
.vtesti{ display:flex; }

.vtesti__card{
    position:relative;
    display:block;
    width:100%;
    height:100%;
    padding:0;
    text-align:left;
    overflow:hidden;
    background:rgba(16, 31, 25, 0.4);
    border:1px solid var(--color-line);
    color:var(--color-cream);
    transition:border-color 320ms var(--ease), transform 420ms var(--ease), box-shadow 420ms var(--ease);
    will-change:transform;
}
.vtesti__card:hover,
.vtesti__card:focus-visible{
    border-color:var(--color-gold);
    transform:translateY(-0.375rem);
    box-shadow:0 1.5rem 2.5rem rgba(0, 0, 0, 0.42);
}

/* -- media (постер + плей) — заповнює всю картку -- */
.vtesti__media{
    position:absolute;
    inset:0;
    display:block;
    overflow:hidden;
}

.vtesti__poster{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(0.32) brightness(0.86) contrast(1.04);
    transform:scale(1.02);
    transition:transform 720ms var(--ease), filter 520ms var(--ease);
}
.vtesti__card:hover .vtesti__poster,
.vtesti__card:focus-visible .vtesti__poster{
    transform:scale(1.08);
    filter:grayscale(0) brightness(0.96) contrast(1.02);
}

/* Темна градієнтна вуаль знизу — для контрасту й глибини */
.vtesti__veil{
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        rgba(16, 31, 25, 0.06) 0%,
        rgba(16, 31, 25, 0.04) 38%,
        rgba(12, 24, 19, 0.52) 74%,
        rgba(10, 20, 16, 0.88) 100%
    );
    transition:background 520ms var(--ease);
}

/* -- кастомна play-кнопка: золоте кільце + трикутник -- */
.vtesti__play{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%, -50%);
    width:4.5rem;                       /* 72px */
    height:4.5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--color-gold-2);
}
.vtesti--feature .vtesti__play{ width:5.5rem; height:5.5rem; } /* 88px */

.vtesti__play-ring{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    color:var(--color-gold);
    opacity:0.8;
    transform:scale(0.92);
    transition:transform 520ms var(--ease), opacity 520ms var(--ease);
}
/* Подвійний пульс-ореол навколо кільця */
.vtesti__play::before,
.vtesti__play::after{
    content:"";
    position:absolute;
    inset:0;
    border:1px solid var(--color-gold);
    border-radius:50%;                  /* виняток: коло play-ореолу, не картка */
    opacity:0;
}
.vtesti__card:hover .vtesti__play::before{
    animation:vtesti-pulse 1800ms var(--ease) infinite;
}
.vtesti__card:hover .vtesti__play::after{
    animation:vtesti-pulse 1800ms var(--ease) 900ms infinite;
}
@keyframes vtesti-pulse{
    0%{ opacity:0.5; transform:scale(0.92); }
    100%{ opacity:0; transform:scale(1.5); }
}

.vtesti__play-icon{
    position:relative;
    width:1.5rem;                       /* 24px */
    height:1.5rem;
    margin-left:0.25rem;                /* оптична компенсація трикутника */
    color:var(--color-gold-2);
    transition:transform 420ms var(--ease), color 320ms var(--ease);
}
.vtesti--feature .vtesti__play-icon{ width:1.875rem; height:1.875rem; }

.vtesti__card:hover .vtesti__play-ring,
.vtesti__card:focus-visible .vtesti__play-ring{
    transform:scale(1);
    opacity:1;
    color:var(--color-gold-2);
}
.vtesti__card:hover .vtesti__play-icon,
.vtesti__card:focus-visible .vtesti__play-icon{
    transform:scale(1.12);
    color:var(--color-cream);
}

/* -- caption — оверлей на постері знизу -- */
.vtesti__caption{
    position:absolute;
    left:0; right:0; bottom:0;
    z-index:2;
    display:flex;
    flex-direction:column;
    gap:0.25rem;
    padding:1.125rem 1.25rem 1.25rem;
}
.vtesti__name{
    font-family:var(--font-display);
    font-size:1.125rem;                 /* 18px */
    line-height:1.2;
    color:var(--color-cream);
    letter-spacing:-0.005em;
    text-shadow:0 1px 8px rgba(8, 16, 13, 0.55);
}
.vtesti--feature .vtesti__name{ font-size:1.625rem; }  /* 26px */
.vtesti__role{
    font-size:0.75rem;                  /* 12px */
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--color-gold);
    line-height:1.4;
}

/* ---- Testimonials responsive ---- */
@media (max-width:73.75rem){    /* 1180px → 3 колонки: герой 2×2 + одинарні */
    .testimonials__grid{ grid-template-columns:repeat(3, 1fr); grid-auto-rows:12rem; }
    .testimonials__grid > .vtesti:nth-child(n){ grid-column:span 1; grid-row:span 1; }
    .testimonials__grid > .vtesti:nth-child(2){ grid-column:span 2; grid-row:span 2; }  /* герой */
}
@media (max-width:56.25rem){    /* 900px → 2 колонки */
    .testimonials{ padding:3rem 0; }
    .testimonials__head{ margin-bottom:2.5rem; }
    .testimonials__lead{ font-size:1rem; }
    .testimonials__grid{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:11rem; }
    .testimonials__grid > .vtesti:nth-child(n){ grid-column:span 1; grid-row:span 1; }
}
@media (max-width:35rem){       /* 560px → 1 колонка */
    .testimonials__grid{ grid-template-columns:1fr; grid-auto-rows:13rem; }
    .testimonials__grid > .vtesti:nth-child(n){ grid-column:auto; grid-row:auto; }
}

/* prefers-reduced-motion — глушимо зум/пульс */
@media (prefers-reduced-motion: reduce){
    .vtesti__poster{ transform:none; transition:none; }
    .vtesti__card:hover .vtesti__poster,
    .vtesti__card:focus-visible .vtesti__poster{ transform:none; }
    .vtesti__card:hover .vtesti__play::before,
    .vtesti__card:hover .vtesti__play::after{ animation:none; }
}


/* ═══════════════════════════════════════════════════════════════════
   ЄДИНИЙ РИТМ МІЖ БЛОКАМИ — 160px ПК / 96px моб.
   Кожна секція дає 80px (моб 48px) зверху й знизу → кожен стик = сума 160/96.
   (hero.top лишається з офсетом хедера; filler.bottom — кінець сторінки.)
═══════════════════════════════════════════════════════════════════════ */
.hero{ padding-bottom:5rem; }
.about{ padding-top:5rem; padding-bottom:5rem; }
.testimonials{ padding-top:5rem; padding-bottom:5rem; }
.reviews{ padding-top:5rem; padding-bottom:5rem; }
.filler{ padding-top:5rem; }
@media (max-width:56.25rem){   /* 900px */
    .hero{ padding-bottom:3rem; }
    .about{ padding-top:3rem; padding-bottom:3rem; }
    .testimonials{ padding-top:3rem; padding-bottom:3rem; }
    .reviews{ padding-top:3rem; padding-bottom:3rem; }
    .filler{ padding-top:3rem; }
}


/* ═══════════════════════════════════════════════════════════════════
   BLOCK: reviews — текстові відгуки клієнтів (Swiper-слайдер).
   Невеликі картки: цитата зверху · аватар 64×64 (SVG-clip) + ПІБ/опис.
═══════════════════════════════════════════════════════════════════════ */
.reviews{
    position:relative;
    overflow:hidden;
    background:var(--color-green);
    color:var(--color-cream);
    isolation:isolate;
}
.reviews__bg{
    position:absolute;
    inset:0;
    z-index:0;
    background:
        radial-gradient(60rem 40rem at 88% -10%, rgba(186,148,45,0.08), transparent 60%),
        radial-gradient(50rem 40rem at 0% 110%, rgba(90,105,96,0.16), transparent 60%);
    pointer-events:none;
}
.reviews__defs{ position:absolute; }
.reviews__container{ position:relative; z-index:1; }

.reviews__head{
    max-width:46rem;
    margin:0 0 4rem;
}
.reviews__kicker{
    margin:0 0 1.5rem;
    display:inline-flex;
    align-items:baseline;
    gap:0.75rem;
    color:var(--color-gold);
    font-size:0.75rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    font-weight:600;
}
.reviews__kicker-mark{
    font-family:var(--font-display);
    font-size:1.5rem;
    line-height:1;
    color:var(--color-gold-2);
    letter-spacing:0;
}
.reviews__title{
    margin:0 0 1.25rem;
    font-family:var(--font-display);
    font-weight:400;
    color:var(--color-cream);
    font-size:clamp(2rem, 3.6vw, 3.25rem);
    line-height:1.1;
    letter-spacing:-0.005em;
    text-wrap:balance;
}
.reviews__title-accent{ color:var(--color-gold); }
.reviews__lead{
    margin:0;
    max-width:42rem;
    font-size:1.125rem;
    line-height:1.6;
    color:rgba(244, 237, 228, 0.72);
}

/* ---- Слайдер ---- */
.reviews__slider{
    position:relative;
    overflow:hidden;
    padding-block:1.25rem;            /* запас під hover-ліфт у межах clip-зони */
    margin-block:-1.25rem;
}
.reviews__slider .swiper-slide{
    height:auto;                      /* картки тягнуться на висоту найвищої */
    display:flex;
}

/* ---- Картка ---- */
.review-card{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:1.5rem;
    width:100%;
    padding:2rem;
    background:rgba(26, 48, 39, 0.55);
    border:1px solid var(--color-line);
    transition:border-color 320ms var(--ease), transform 320ms var(--ease), background-color 320ms var(--ease);
}
.review-card:hover{
    border-color:var(--color-gold);
    background:rgba(26, 48, 39, 0.72);
    transform:translateY(-0.375rem);
}
.review-card__mark{
    font-family:var(--font-display);
    font-size:3.5rem;
    line-height:0.6;
    color:var(--color-gold);
    opacity:0.5;
}
.review-card__text{
    margin:0;
    flex:1 1 auto;
    font-size:1rem;
    line-height:1.66;
    color:rgba(244, 237, 228, 0.9);
}
.review-card__author{
    display:flex;
    align-items:center;
    gap:1rem;
    padding-top:1.5rem;
    border-top:1px solid var(--color-line-soft);
}
.review-card__avatar{
    flex:0 0 auto;
    width:4rem;                       /* 64px */
    height:4rem;
    display:block;
}
.review-card__meta{
    display:flex;
    flex-direction:column;
    gap:0.25rem;
    min-width:0;
}
.review-card__name{
    margin:0;
    font-family:var(--font-display);
    font-size:1.125rem;
    line-height:1.2;
    color:var(--color-cream);
}
.review-card__role{
    margin:0;
    font-size:0.875rem;
    line-height:1.35;
    color:var(--color-sage);
}

/* ---- Підвал: стрілки/пагінація ліворуч + кнопки праворуч ---- */
.reviews__foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:2rem;
    margin-top:3rem;
}
.reviews__controls{
    display:flex;
    align-items:center;
    gap:1.5rem;
}
.reviews__actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:1rem;
}
.reviews__arrow{
    flex:0 0 auto;
    width:3rem;
    height:3rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    background:transparent;
    color:var(--color-cream);
    border:1px solid var(--color-line-strong);
    cursor:pointer;
    transition:border-color 240ms var(--ease), color 240ms var(--ease), background-color 240ms var(--ease);
}
.reviews__arrow svg{ width:1.25rem; height:1.25rem; }
.reviews__arrow:hover{
    border-color:var(--color-gold);
    color:var(--color-gold);
    background:rgba(186,148,45,0.08);
}
.reviews__arrow.swiper-button-disabled{
    opacity:0.32;
    pointer-events:none;
}
.reviews__pagination{
    display:flex;
    align-items:center;
    gap:0.5rem;
    width:auto;
}
.reviews__pagination .swiper-pagination-bullet{
    width:0.5rem;
    height:0.5rem;
    margin:0 !important;
    background:var(--color-sage);
    opacity:0.5;
    border-radius:0;                  /* квадратні маркери — бренд без скруглень */
    transition:opacity 240ms var(--ease), background-color 240ms var(--ease), transform 240ms var(--ease);
}
.reviews__pagination .swiper-pagination-bullet-active{
    background:var(--color-gold);
    opacity:1;
    transform:scaleX(2);
}

@media (max-width:56.25rem){    /* 900px */
    .reviews__head{ margin-bottom:2.5rem; }
    .reviews__lead{ font-size:1rem; }
}

@media (prefers-reduced-motion: reduce){
    .review-card,
    .review-card__avatar{ transition:none; }
    .review-card:hover{ transform:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   BLOCK: location — офіс у Львові + онлайн-супровід.
   Тема v1 (темна): смарагдовий фон, світлий текст, золоті акценти.
   Концепція «кабінет картографа». Шари глибини:
   (1) атмосферні градієнти, (2) компасне кільце з поділками, що
   повільно обертається, (3) контент: зліва — картки-вузли на «нитці
   маршруту», справа — картографічна панель з планом кварталів,
   маршрутом (stroke-draw при появі) та пульсуючим маркером.
   Ритм: 5rem 0; ≤900px → 3rem 0. Жодних border-radius (кола — SVG).
═══════════════════════════════════════════════════════════════════════ */
.location{
    position:relative;
    overflow:hidden;
    padding:5rem 0;
    background:var(--color-green);
    color:var(--color-cream);
    isolation:isolate;
}
/* Шар 1 — атмосферні градієнти */
.location__bg{
    position:absolute;
    inset:0;
    z-index:0;
    background:
        radial-gradient(54rem 38rem at 92% 8%, rgba(186,148,45,0.10), transparent 62%),
        radial-gradient(46rem 40rem at -6% 96%, rgba(90,105,96,0.18), transparent 60%),
        linear-gradient(180deg, var(--color-green-2) 0%, var(--color-green) 100%);
    pointer-events:none;
}
/* Шар 2 — компасна роза (праворуч): зовнішнє кільце дрейфує за
   годинниковою і докручується скролом (JS виставляє transform на
   .location__compass-scroll), середнє кільце пливе у зворотний бік,
   стрілка «дихає» коливанням ±5°, як у справжнього компаса. */
.location__compass{
    position:absolute;
    top:-1rem;
    right:-2rem;
    width:40rem;
    height:40rem;
    z-index:0;
    opacity:0.45;
    pointer-events:none;
}
.location__compass-scroll{
    transform-box:fill-box;
    transform-origin:center;
    will-change:transform;
}
.location__compass-spin{
    transform-box:fill-box;
    transform-origin:center;
    animation:location-compass-spin 180s linear infinite;
}
.location__compass-spin-rev{
    transform-box:fill-box;
    transform-origin:center;
    animation:location-compass-spin 120s linear infinite reverse;
}
.location__compass-ticks{
    fill:none;
    stroke:var(--color-line-strong);
    stroke-width:18;
}
.location__compass-ticks--fine{
    stroke:var(--color-line);
    stroke-width:8;
}
.location__compass-ring{
    fill:none;
    stroke:var(--color-line);
    stroke-width:1;
}
.location__compass-ring--dashed{
    stroke:var(--color-line-soft);
    stroke-dasharray:2 8;
}
.location__compass-studs rect{
    fill:var(--color-gold);
    opacity:0.5;
}
.location__compass-node{
    fill:var(--color-green);
    stroke:var(--color-gold);
    stroke-width:1;
}
.location__compass-axis{
    stroke:var(--color-line-soft);
    stroke-width:1;
}
.location__compass-axis--diag{ opacity:0.6; }
.location__compass-needle{
    transform-box:fill-box;
    transform-origin:center;
    animation:location-needle 6s ease-in-out infinite alternate;
}
.location__compass-needle-n{ fill:var(--color-gold); opacity:0.85; }
.location__compass-needle-s{ fill:var(--color-sage); opacity:0.45; }
.location__compass-pivot{
    fill:var(--color-green-2);
    stroke:var(--color-gold);
    stroke-width:1.5;
}
.location__compass-pivot-dot{ fill:var(--color-gold-2); }
.location__compass-cardinal{
    font-family:var(--font-display);
    font-size:26px;
    letter-spacing:0.08em;
    fill:var(--color-sage);
    text-anchor:middle;
    dominant-baseline:middle;
}
.location__compass-cardinal--n{ fill:var(--color-gold); }
@keyframes location-compass-spin{
    to{ transform:rotate(360deg); }
}
@keyframes location-needle{
    from{ transform:rotate(-5deg); }
    to{ transform:rotate(5deg); }
}

/* Шар 3 — контент */
.location__container{
    position:relative;
    z-index:1;
}
.location__head{ margin:0 0 3.5rem; }
.location__head-text{ max-width:46rem; }
.location__kicker{
    margin:0 0 1.5rem;
    display:inline-flex;
    align-items:baseline;
    gap:0.75rem;
    color:var(--color-gold);
    font-size:0.75rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    font-weight:600;
}
.location__kicker-mark{
    font-family:var(--font-display);
    font-size:1.5rem;
    line-height:1;
    color:var(--color-gold-2);
    letter-spacing:0;
}
.location__title{
    margin:0 0 1.25rem;
    font-family:var(--font-display);
    font-weight:400;
    color:var(--color-cream);
    font-size:clamp(2rem, 3.6vw, 3.25rem);
    line-height:1.1;
    letter-spacing:-0.005em;
    text-wrap:balance;
}
.location__title-accent{ color:var(--color-gold); }
.location__lead{
    margin:0;
    max-width:42rem;
    font-size:1.125rem;
    line-height:1.6;
    color:rgba(244, 237, 228, 0.72);
}
/* ---- Асиметричний layout: картки (більше) + мапа (менше) ---- */
.location__layout{
    display:grid;
    grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr);
    gap:3rem;
    align-items:stretch;
}
/* «Нитка маршруту» зліва від карток */
.location__cards{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:1.5rem;
    padding-left:2.5rem;
}
.location__cards::before{
    content:"";
    position:absolute;
    left:0.5rem;
    top:1.5rem;
    bottom:1.25rem;
    width:1px;
    background:linear-gradient(180deg, transparent, var(--color-line-strong) 12%, var(--color-line-strong) 86%, transparent);
}

/* ---- Інфо-картки ---- */
.location__card{
    position:relative;
    display:flex;
    gap:1.5rem;
    padding:2rem;
    background:rgba(20, 38, 31, 0.55);
    border:1px solid var(--color-line);
    transition:border-color 280ms var(--ease), background-color 280ms var(--ease);
}
.location__card::before{
    content:"";
    position:absolute;
    left:0; top:0; bottom:0;
    width:2px;
    background:linear-gradient(180deg, var(--color-gold), rgba(186,148,45,0));
    transform:scaleY(0.4);
    transform-origin:top;
    transition:transform 320ms var(--ease);
}
.location__card:hover{
    border-color:var(--color-line-strong);
    background:rgba(26, 48, 39, 0.6);
}
.location__card:hover::before{ transform:scaleY(1); }
/* Вузли-ромби на нитці маршруту */
.location__card::after,
.location__actions::before{
    content:"";
    position:absolute;
    left:-2.375rem;
    width:0.75rem;
    height:0.75rem;
    border:1px solid var(--color-gold);
    background:var(--color-green);
    transform:rotate(45deg);
}
.location__card::after{ top:2rem; }
.location__card-index{
    flex:0 0 auto;
    font-family:var(--font-display);
    font-size:1.25rem;
    line-height:1;
    color:var(--color-gold-2);
    letter-spacing:0.04em;
}
.location__card-body{ min-width:0; }
.location__card-tag{
    margin:0 0 0.5rem;
    font-size:0.75rem;
    letter-spacing:0.24em;
    text-transform:uppercase;
    color:var(--color-sage);
    font-weight:600;
}
.location__card-title{
    margin:0 0 1.25rem;
    font-family:var(--font-display);
    font-weight:400;
    font-size:1.5rem;
    line-height:1.2;
    color:var(--color-cream);
}
.location__meta{
    margin:0 0 1.25rem;
    display:grid;
    gap:1rem;
}
.location__meta-row{
    display:grid;
    grid-template-columns:6rem 1fr;
    gap:1rem;
    padding-bottom:1rem;
    border-bottom:1px solid var(--color-line-soft);
}
.location__meta-row:last-child{ border-bottom:0; padding-bottom:0; }
.location__meta-label{
    margin:0;
    font-size:0.75rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--color-sage);
    padding-top:0.125rem;
}
.location__meta-value{
    margin:0;
    font-size:1rem;
    line-height:1.5;
    color:var(--color-beige-2);
}
.location__card-note{
    margin:0;
    font-size:0.875rem;
    line-height:1.6;
    color:rgba(244, 237, 228, 0.66);
}
.location__card-note--lead{ margin-bottom:1.25rem; }
.location__channels{
    margin:0;
    padding:0;
    list-style:none;
    display:grid;
    gap:0.75rem;
}
.location__channel{
    position:relative;
    padding-left:1.5rem;
    font-size:0.875rem;
    line-height:1.5;
    color:var(--color-beige-2);
}
.location__channel::before{
    content:"";
    position:absolute;
    left:0; top:0.5rem;
    width:0.5rem; height:0.5rem;
    border:1px solid var(--color-gold);
    transform:rotate(45deg);
}

/* ---- Дії (фінальний вузол нитки) ---- */
.location__actions{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    margin-top:0.5rem;
}
.location__actions::before{
    top:0.875rem;
    background:var(--color-gold);
}

/* ---- Картографічна панель ---- */
.location__map{
    position:relative;
    display:flex;
    flex-direction:column;
    border:1px solid var(--color-line);
    background:
        radial-gradient(30rem 30rem at 60% 40%, rgba(186,148,45,0.07), transparent 70%),
        rgba(16, 31, 25, 0.5);
}
/* Золоті куточки рамки */
.location__map::before,
.location__map::after{
    content:"";
    position:absolute;
    width:1.5rem;
    height:1.5rem;
    pointer-events:none;
}
.location__map::before{
    top:-1px; left:-1px;
    border-top:2px solid var(--color-gold);
    border-left:2px solid var(--color-gold);
}
.location__map::after{
    right:-1px; bottom:-1px;
    border-right:2px solid var(--color-gold);
    border-bottom:2px solid var(--color-gold);
}
.location__map-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    padding:0.875rem 1.5rem;
    border-bottom:1px solid var(--color-line-soft);
    font-size:0.75rem;
    letter-spacing:0.14em;
    color:var(--color-sage);
}
.location__map-top-code{
    color:var(--color-gold);
    letter-spacing:0.24em;
    font-weight:600;
}
/* Жива мапа (Leaflet перетворює #location-map на .leaflet-container) */
.location__map-canvas{
    position:relative;
    flex:1;
    min-height:26rem;
    z-index:0;
    isolation:isolate;
    background:var(--color-green-2);
    font-family:var(--font-sans);
}
/* Тонування тайлів CARTO dark під смарагд бренду */
.location__map-canvas .leaflet-tile{
    filter:sepia(1) hue-rotate(92deg) saturate(0.55) brightness(1.0) contrast(1.08);
}
/* Вуаль: золоте світіння по центру + м'яка віньєтка (під маркером) */
.location__map-veil{
    position:absolute;
    inset:0;
    z-index:450;
    pointer-events:none;
    background:
        radial-gradient(60% 60% at 50% 44%, rgba(186,148,45,0.10), transparent 72%),
        linear-gradient(180deg, rgba(16,31,25,0.26), rgba(16,31,25,0.08) 30%, rgba(16,31,25,0.08) 70%, rgba(16,31,25,0.30));
    box-shadow:inset 0 0 5rem rgba(8, 16, 12, 0.55);
}
/* Перефарбування тайлів у смарагд бренду: hue/sat — від кольору,
   світлота — від мапи (вулиці й підписи лишаються читабельними) */
.location__map-veil::before{
    content:"";
    position:absolute;
    inset:0;
    background:var(--color-green-4);
    mix-blend-mode:color;
    opacity:0.5;
}
/* Кастомний маркер офісу (кола — лише через SVG) */
.location__pin-wrap{ background:none; border:0; }
.location__pin{ display:block; width:4rem; height:4rem; }
.location__pin-halo{
    fill:rgba(186,148,45,0.14);
    stroke:rgba(186,148,45,0.4);
    stroke-width:1;
    transform-box:fill-box;
    transform-origin:center;
    animation:location-pulse 3.2s var(--ease) infinite;
}
.location__pin-ring{
    fill:rgba(16, 31, 25, 0.55);
    stroke:var(--color-gold);
    stroke-width:1.5;
}
.location__pin-dot{ fill:var(--color-gold-2); }
/* Leaflet-контроли в бренд: прямі кути, темне скло, золотий ховер */
.location__map-canvas .leaflet-bar{
    border:0;
    border-radius:0;
    box-shadow:none;
}
.location__map-canvas .leaflet-bar a{
    width:2rem;
    height:2rem;
    line-height:2rem;
    border-radius:0;
    background:rgba(16, 31, 25, 0.92);
    border:1px solid var(--color-line-strong);
    color:var(--color-beige);
    font-family:var(--font-sans);
}
.location__map-canvas .leaflet-bar a + a{ border-top:0; }
.location__map-canvas .leaflet-bar a:hover,
.location__map-canvas .leaflet-bar a:focus-visible{
    background:rgba(26, 48, 39, 0.95);
    color:var(--color-gold);
}
.location__map-canvas .leaflet-bar a.leaflet-disabled{
    opacity:0.4;
    color:var(--color-sage);
}
.location__map-canvas .leaflet-control-attribution{
    background:rgba(16, 31, 25, 0.78);
    color:var(--color-sage);
    font-size:0.625rem;
    letter-spacing:0.02em;
    padding:0.125rem 0.5rem;
}
.location__map-canvas .leaflet-control-attribution a{ color:var(--color-sage); }
.location__map-foot{
    display:flex;
    align-items:center;
    gap:0.75rem;
    padding:0.875rem 1.5rem;
    border-top:1px solid var(--color-line-soft);
    font-size:0.875rem;
    letter-spacing:0.04em;
    color:var(--color-beige);
}
.location__map-foot-pin{
    flex:0 0 auto;
    width:0.5rem;
    height:0.5rem;
    background:var(--color-gold);
    transform:rotate(45deg);
}
.location__map-foot-net{
    margin-left:auto;
    font-size:0.75rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--color-sage);
}

@keyframes location-pulse{
    0%, 100%{ opacity:0.9; transform:scale(0.86); }
    50%{ opacity:0.35; transform:scale(1.12); }
}

/* ---- Адаптив ---- */
@media (max-width:56.25rem){          /* ≤900px */
    .location{ padding:3rem 0; }
    .location__head{ margin-bottom:2.5rem; }
    .location__lead{ font-size:1rem; }
    .location__layout{
        grid-template-columns:1fr;
        gap:2rem;
    }
    .location__compass{ width:30rem; height:30rem; top:-2rem; right:-12rem; opacity:0.25; }
    .location__map{ order:-1; }
    .location__map-canvas{ min-height:22rem; }
}
@media (max-width:35rem){             /* ≤560px */
    .location__cards{ padding-left:0; }
    .location__cards::before,
    .location__card::after,
    .location__actions::before{ display:none; }
    .location__card{
        flex-direction:column;
        gap:0.75rem;
        padding:1.5rem;
    }
    .location__card-title{ font-size:1.375rem; }
    .location__meta-row{ grid-template-columns:1fr; gap:0.25rem; }
    .location__actions .button{ width:100%; }
    .location__map-top{ padding:0.75rem 1rem; }
    .location__map-foot{ padding:0.75rem 1rem; flex-wrap:wrap; }
    .location__map-canvas{ min-height:18rem; }
}

@media (prefers-reduced-motion: reduce){
    .location__pin-halo{ animation:none; }
    .location__compass-spin,
    .location__compass-spin-rev,
    .location__compass-needle{ animation:none; }
    .location__compass-scroll{ transform:none !important; }
    .location__card,
    .location__card::before{ transition:none; }
}

/* ============================================================
   ЦІНИ (2.7) — прозоре ціноутворення + програма лояльності
   Тема v1: темний смарагд, світлий текст, золоті акценти.
   Глибина: (1) атмосферний bg, (2) декор-кільця SVG, (3) контент.
   Жодних border-radius — кола лише через SVG <circle>.
   ============================================================ */
.prices{
    position:relative;
    overflow:hidden;
    padding:5rem 0;
    background:var(--color-green);
    color:var(--color-cream);
    isolation:isolate;
}
/* Шар 1 — атмосферні градієнти */
.prices__bg{
    position:absolute;
    inset:0;
    z-index:0;
    background:
        radial-gradient(50rem 34rem at 88% -4%, rgba(186,148,45,0.12), transparent 60%),
        radial-gradient(44rem 38rem at -8% 104%, rgba(90,105,96,0.16), transparent 62%),
        linear-gradient(180deg, var(--color-green) 0%, var(--color-green-2) 100%);
    pointer-events:none;
}
/* Шар 1b — гравірувальна ledger-сітка (атмосфера документа) */
.prices__grid{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:0.5;
    background-image:
        linear-gradient(to right, var(--color-line-soft) 1px, transparent 1px),
        linear-gradient(to bottom, var(--color-line-soft) 1px, transparent 1px);
    background-size:6rem 6rem;
    -webkit-mask-image:radial-gradient(60rem 40rem at 70% 30%, #000 0%, transparent 75%);
    mask-image:radial-gradient(60rem 40rem at 70% 30%, #000 0%, transparent 75%);
}
/* Шар 2 — кінетичний ghost-нумерал «2.7» на правому зрізі */
.prices__ghost{
    position:absolute;
    z-index:0;
    top:1rem;
    right:-1rem;
    font-family:var(--font-display);
    font-size:clamp(12rem, 26vw, 26rem);
    line-height:0.8;
    font-weight:400;
    letter-spacing:-0.02em;
    color:transparent;
    -webkit-text-stroke:1px var(--color-line);
    opacity:0.6;
    pointer-events:none;
    user-select:none;
}
/* Шар 2 — декоративні кільця праворуч-угорі (за панеллю лояльності) */
.prices__mark{
    position:absolute;
    top:-5rem;
    right:-5rem;
    width:24rem;
    height:24rem;
    z-index:0;
    opacity:0.5;
    pointer-events:none;
}
.prices__mark-ring{
    fill:none;
    stroke:var(--color-line);
    stroke-width:1;
}
.prices__mark-ring--dashed{
    stroke:var(--color-line-soft);
    stroke-dasharray:3 8;
}

/* Шар 3 — контент */
.prices__container{
    position:relative;
    z-index:1;
}
.prices__head{
    max-width:46rem;
    margin:0 0 3.5rem;
}
.prices__kicker{
    margin:0 0 1.5rem;
    display:inline-flex;
    align-items:baseline;
    gap:0.75rem;
    color:var(--color-gold);
    font-size:0.75rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    font-weight:600;
}
.prices__kicker-mark{
    font-family:var(--font-display);
    font-size:1.5rem;
    line-height:1;
    color:var(--color-gold-2);
    letter-spacing:0;
}
.prices__title{
    margin:0 0 1.25rem;
    font-family:var(--font-display);
    font-weight:400;
    color:var(--color-cream);
    font-size:clamp(2rem, 3.6vw, 3.25rem);
    line-height:1.1;
    letter-spacing:-0.005em;
    text-wrap:balance;
}
.prices__title-accent{ color:var(--color-gold); }
.prices__lead{
    margin:0;
    max-width:42rem;
    font-size:1.125rem;
    line-height:1.6;
    color:rgba(244, 237, 228, 0.72);
}

/* --- Розкладка: маніфест (ліворуч) + панель лояльності (праворуч) --- */
.prices__layout{
    display:grid;
    grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr);
    gap:4rem;
    align-items:start;
}

/* Колонка А — нумерований маніфест прозорості (ledger) */
.prices__manifest{
    position:relative;
}
.prices__manifest-label{
    display:flex;
    align-items:center;
    gap:1rem;
    margin:0 0 1.5rem;
    font-size:0.75rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    font-weight:600;
    color:rgba(244, 237, 228, 0.5);
}
.prices__manifest-line{
    flex:1 1 auto;
    height:1px;
    background:linear-gradient(to right, var(--color-line-strong), transparent);
}
.prices__principles{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:0;
    counter-reset:none;
}
/* Вертикальний «корінець» ledger-а, що проростає при появі */
.prices__principles::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:1px;
    background:var(--color-line);
    transform:scaleY(0);
    transform-origin:top;
    transition:transform 1.2s var(--ease) 0.2s;
}
.prices__principles--drawn::before{ transform:scaleY(1); }
.prices__principle{
    position:relative;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:start;
    gap:1.5rem;
    padding:2rem 0 2rem 2rem;
    border-top:1px solid var(--color-line);
    transition:padding-left 0.45s var(--ease);
}
.prices__principle:last-child{ border-bottom:1px solid var(--color-line); }
.prices__principle-num{
    position:relative;
    font-family:var(--font-display);
    font-size:2rem;
    line-height:1;
    color:var(--color-gold);
    letter-spacing:0.02em;
    padding-top:0.125rem;
    transition:color 0.4s var(--ease), transform 0.45s var(--ease);
}
/* Вузол-маркер на корінці навпроти номера */
.prices__principle-num::before{
    content:"";
    position:absolute;
    left:-2.5rem;
    top:0.625rem;
    width:0.5rem;
    height:0.5rem;
    background:var(--color-green);
    border:1px solid var(--color-line-strong);
    transform:rotate(45deg);
    transition:background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.prices__principle-title{
    margin:0 0 0.5rem;
    font-family:var(--font-display);
    font-weight:400;
    font-size:1.375rem;
    line-height:1.2;
    color:var(--color-cream);
}
.prices__principle-text{
    margin:0;
    font-size:1rem;
    line-height:1.6;
    color:rgba(244, 237, 228, 0.68);
    max-width:34rem;
}
/* Тег-категорія, що проявляється на hover */
.prices__principle-tag{
    align-self:start;
    margin-top:0.375rem;
    font-size:0.625rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--color-gold-2);
    white-space:nowrap;
    opacity:0;
    transform:translateX(0.5rem);
    transition:opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
/* Підкреслення-індикатор, що промальовується від вузла */
.prices__principle::before{
    content:"";
    position:absolute;
    left:0;
    top:-1px;
    width:3rem;
    height:2px;
    background:var(--color-gold);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 0.5s var(--ease);
}
.prices__principle:hover{ padding-left:2.5rem; }
.prices__principle:hover::before{ transform:scaleX(1); }
.prices__principle:hover .prices__principle-num{ color:var(--color-gold-2); transform:translateY(-0.125rem); }
.prices__principle:hover .prices__principle-num::before{ background:var(--color-gold); border-color:var(--color-gold); }
.prices__principle:hover .prices__principle-tag{ opacity:1; transform:translateX(0); }

/* Колонка Б — акцентна скляна панель лояльності */
.prices__loyalty{
    position:relative;
    overflow:hidden;
    padding:2.5rem;
    background:var(--glass-bg-strong);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border:1px solid var(--color-line-strong);
}
.prices__loyalty::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(155deg, rgba(186,148,45,0.10), transparent 55%);
    pointer-events:none;
}
/* Декор: кутові скоби-рамка (SVG, без border-radius) */
.prices__loyalty-frame{
    position:absolute;
    inset:0.75rem;
    width:auto;
    height:auto;
    z-index:1;
    pointer-events:none;
}
.prices__loyalty-corner{
    fill:none;
    stroke:var(--color-gold);
    stroke-width:1;
    opacity:0.55;
    vector-effect:non-scaling-stroke;
}
/* Накопичувальний «лічильник»: діаграма + readout */
.prices__loyalty-meter{
    position:relative;
    width:6rem;
    height:6rem;
    margin:0 0 1.75rem;
}
.prices__loyalty-art{
    width:100%;
    height:100%;
    display:block;
}
.prices__loyalty-track{
    fill:none;
    stroke:var(--color-line);
    stroke-width:4;
}
.prices__loyalty-track--inner{
    stroke:var(--color-line-soft);
    stroke-width:2;
}
.prices__loyalty-arc{
    fill:none;
    stroke:var(--color-gold);
    stroke-width:4;
    /* r=50 → коло ≈ 314; показуємо ~70% дуги */
    stroke-dasharray:220 314;
    stroke-dashoffset:314;
    transform:rotate(-90deg);
    transform-origin:center;
    animation:prices-fill 1.6s var(--ease) forwards 0.2s;
}
.prices__loyalty-arc--inner{
    stroke:var(--color-gold-2);
    stroke-width:2;
    opacity:0.7;
    /* r=38 → коло ≈ 239; коротша внутрішня дуга */
    stroke-dasharray:120 239;
    stroke-dashoffset:239;
    animation:prices-fill-inner 1.6s var(--ease) forwards 0.45s;
}
@keyframes prices-fill{ to{ stroke-dashoffset:94; } }
@keyframes prices-fill-inner{ to{ stroke-dashoffset:119; } }
.prices__loyalty-core{
    fill:var(--color-gold-2);
}
/* Цифровий readout у центрі діаграми */
.prices__loyalty-readout{
    position:absolute;
    left:0;
    top:50%;
    width:100%;
    transform:translateY(-58%);
    text-align:center;
    font-family:var(--font-display);
    font-size:1.5rem;
    line-height:1;
    color:var(--color-cream);
    letter-spacing:-0.01em;
}
.prices__loyalty-unit{
    position:absolute;
    left:0;
    bottom:0.875rem;
    width:100%;
    text-align:center;
    font-size:0.5rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--color-gold);
    font-weight:600;
}
.prices__loyalty-tag{
    margin:0 0 0.625rem;
    font-size:0.75rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--color-gold);
    font-weight:600;
}
.prices__loyalty-title{
    margin:0 0 0.875rem;
    font-family:var(--font-display);
    font-weight:400;
    font-size:1.75rem;
    line-height:1.15;
    color:var(--color-cream);
}
.prices__loyalty-text{
    margin:0 0 1.75rem;
    font-size:1rem;
    line-height:1.6;
    color:rgba(244, 237, 228, 0.74);
}
.prices__loyalty-list{
    display:flex;
    flex-direction:column;
    gap:0.875rem;
}
.prices__loyalty-item{
    position:relative;
    padding-left:1.75rem;
    font-size:0.875rem;
    line-height:1.5;
    color:rgba(244, 237, 228, 0.82);
}
.prices__loyalty-item::before{
    content:"";
    position:absolute;
    left:0;
    top:0.5rem;
    width:0.5rem;
    height:0.5rem;
    background:var(--color-gold);
    transform:rotate(45deg);
}

/* --- Підвал: примітка про окрему сторінку + кнопки --- */
.prices__foot{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
    margin-top:3.5rem;
    padding-top:2rem;
    border-top:1px solid var(--color-line);
}
.prices__foot-note{
    margin:0;
    max-width:28rem;
    font-size:0.875rem;
    line-height:1.55;
    color:rgba(244, 237, 228, 0.6);
}
.prices__actions{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
}

/* --- Адаптив --- */
@media (max-width:56.25rem){          /* ≤900px */
    .prices{ padding:3rem 0; }
    .prices__head{ margin-bottom:2.5rem; }
    .prices__lead{ font-size:1rem; }
    .prices__layout{
        grid-template-columns:1fr;
        gap:2.5rem;
    }
    .prices__loyalty{ padding:2rem; }
    .prices__foot{ margin-top:2.5rem; }
    .prices__ghost{ font-size:clamp(10rem, 34vw, 18rem); }
}
@media (max-width:35rem){             /* ≤560px */
    .prices__principle{
        grid-template-columns:auto 1fr;
        gap:0.75rem 1rem;
        padding:1.5rem 0 1.5rem 1.5rem;
    }
    .prices__principle-num{ font-size:1.5rem; }
    .prices__principle-num::before{ left:-2rem; }
    .prices__principle-title{ font-size:1.125rem; }
    /* тег-категорія ховається на вузьких екранах */
    .prices__principle-tag{ display:none; }
    .prices__principle:hover{ padding-left:1.5rem; }
    .prices__loyalty-title{ font-size:1.5rem; }
    .prices__foot{ flex-direction:column; align-items:flex-start; }
    .prices__actions{ width:100%; }
    .prices__actions .button{ flex:1 1 auto; }
}

@media (prefers-reduced-motion: reduce){
    .prices__loyalty-arc,
    .prices__loyalty-arc--inner{ animation:none; stroke-dashoffset:94; }
    .prices__loyalty-arc--inner{ stroke-dashoffset:119; }
    .prices__principles::before{ transition:none; transform:scaleY(1); }
    .prices__principle,
    .prices__principle::before,
    .prices__principle-num,
    .prices__principle-num::before,
    .prices__principle-tag{ transition:none; }
}

/* ============================================================
   Contact — Форма запиту (2.8)
   ============================================================ */
.contact{
    position:relative;
    overflow:hidden;
    padding:5rem 0;
    background:var(--color-green);
    color:var(--color-cream);
    isolation:isolate;
}
/* Шар 1 — атмосферні градієнти */
.contact__bg{
    position:absolute;
    inset:0;
    z-index:0;
    background:
        radial-gradient(50rem 36rem at 6% 4%, rgba(186,148,45,0.12), transparent 60%),
        radial-gradient(44rem 40rem at 104% 102%, rgba(90,105,96,0.20), transparent 58%),
        radial-gradient(60rem 60rem at 50% 130%, rgba(8,16,13,0.55), transparent 60%),
        linear-gradient(180deg, var(--color-green-2) 0%, var(--color-green) 100%);
    pointer-events:none;
}
/* Шар 1b — лінійна сітка «бланку досьє»: ледь помітні горизонтальні лінії */
.contact__grid-lines{
    position:absolute;
    inset:0;
    z-index:0;
    background-image:repeating-linear-gradient(
        180deg,
        transparent 0,
        transparent 2.5rem,
        var(--color-line-soft) 2.5rem,
        var(--color-line-soft) calc(2.5rem + 1px)
    );
    -webkit-mask-image:radial-gradient(38rem 32rem at 78% 46%, #000 0%, transparent 72%);
    mask-image:radial-gradient(38rem 32rem at 78% 46%, #000 0%, transparent 72%);
    opacity:0.6;
    pointer-events:none;
}
/* Шар 2 — декоративний знак-печатка праворуч угорі */
.contact__mark{
    position:absolute;
    top:-3rem;
    right:-3rem;
    width:18rem;
    height:18rem;
    z-index:0;
    opacity:0.5;
    pointer-events:none;
    animation:contact-mark-drift 64s linear infinite;
    transform-origin:50% 50%;
}
.contact__mark-ring{
    fill:none;
    stroke:var(--color-line);
    stroke-width:1;
}
.contact__mark-ring--dashed{
    stroke:var(--color-line-soft);
    stroke-dasharray:3 7;
}
.contact__mark-text{
    fill:var(--color-beige);
    font-family:var(--font-sans);
    font-size:8px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    opacity:0.55;
}
.contact__mark-tick{
    stroke:var(--color-gold);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:0.85;
}
.contact__mark-core{ fill:var(--color-gold); }
@keyframes contact-mark-drift{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}

/* Шар 3 — контент */
.contact__container{
    position:relative;
    z-index:1;
}
.contact__layout{
    display:grid;
    grid-template-columns:minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap:3rem;
    align-items:start;
}

/* --- Ліва колонка: запрошення --- */
.contact__kicker{
    margin:0 0 1.5rem;
    display:inline-flex;
    align-items:baseline;
    gap:0.75rem;
    color:var(--color-gold);
    font-size:0.75rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    font-weight:600;
}
.contact__kicker-mark{
    font-family:var(--font-display);
    font-size:1.5rem;
    line-height:1;
    color:var(--color-gold-2);
    letter-spacing:0;
}
.contact__title{
    margin:0 0 1.25rem;
    font-family:var(--font-display);
    font-weight:400;
    color:var(--color-cream);
    font-size:clamp(2rem, 3.6vw, 3.25rem);
    line-height:1.1;
    letter-spacing:-0.005em;
    text-wrap:balance;
}
.contact__title-accent{ color:var(--color-gold); }
.contact__lead{
    margin:0 0 2.5rem;
    max-width:30rem;
    color:var(--color-beige);
    font-size:1.125rem;
    line-height:1.6;
}
.contact__assurances{
    display:flex;
    flex-direction:column;
    gap:1.5rem;
}
.contact__assurance{
    display:flex;
    gap:1rem;
    padding-top:1.5rem;
    border-top:1px solid var(--color-line);
}
.contact__assurance-icon{
    flex:0 0 auto;
    width:1.75rem;
    height:1.75rem;
    margin-top:0.125rem;
    color:var(--color-gold);
}
.contact__assurance-title{
    margin:0 0 0.375rem;
    font-family:var(--font-display);
    font-weight:400;
    font-size:1.25rem;
    line-height:1.2;
    color:var(--color-cream);
}
.contact__assurance-text{
    margin:0;
    color:var(--color-sage);
    font-size:0.875rem;
    line-height:1.55;
}

/* --- Права колонка: форма як приватний бланк --- */
.contact__form-wrap{
    position:relative;
    padding:2.5rem;
    background:var(--glass-bg);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border:1px solid var(--color-line);
    box-shadow:0 1.5rem 3rem rgba(8, 16, 13, 0.45);
}
/* Тонка золота риска-акцент угорі панелі */
.contact__form-wrap::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:3rem;
    height:1px;
    background:var(--color-gold);
}
/* Кутові реєстраційні маркери (Г-подібні засічки) */
.contact__corner{
    position:absolute;
    width:0.875rem;
    height:0.875rem;
    z-index:2;
    pointer-events:none;
}
.contact__corner--tl{
    top:0.75rem;
    left:0.75rem;
    border-top:1px solid var(--color-gold);
    border-left:1px solid var(--color-gold);
}
.contact__corner--br{
    bottom:0.75rem;
    right:0.75rem;
    border-bottom:1px solid var(--color-gold);
    border-right:1px solid var(--color-gold);
}
/* Editorial-шапка бланку */
.contact__form-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:2rem;
    padding-bottom:1rem;
    border-bottom:1px solid var(--color-line);
}
.contact__form-eyebrow{
    margin:0;
    font-size:0.75rem;
    letter-spacing:0.24em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--color-beige);
}
.contact__form-ref{
    margin:0;
    flex:0 0 auto;
    white-space:nowrap;
    font-family:var(--font-display);
    font-size:0.875rem;
    letter-spacing:0.04em;
    color:var(--color-sage);
}
.contact__form{
    display:flex;
    flex-direction:column;
    gap:1.5rem;
}
/* [hidden] має перемагати явні display-декларації полів (керується JS-подякою) */
.contact__field[hidden],
.contact__foot[hidden]{ display:none !important; }
.contact__field{
    position:relative;
    display:grid;
    grid-template-columns:2rem 1fr;
    grid-template-rows:auto auto;
    column-gap:0.75rem;
    row-gap:0.5rem;
    align-items:baseline;
}
/* Editorial-нумерація поля */
.contact__field-no{
    grid-column:1;
    grid-row:1 / span 2;
    align-self:start;
    margin-top:0.125rem;
    font-family:var(--font-display);
    font-size:0.875rem;
    line-height:1;
    color:var(--color-sage);
    transition:color 220ms var(--ease);
}
.contact__label{
    grid-column:2;
    grid-row:1;
    font-size:0.75rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--color-beige);
    transition:color 220ms var(--ease);
}
.contact__control{
    position:relative;
    grid-column:2;
    grid-row:2;
}
.contact__input{
    display:block;
    width:100%;
    padding:0.75rem 1rem;
    background:rgba(16, 31, 25, 0.45);
    border:1px solid var(--color-line-strong);
    color:var(--color-cream);
    font-family:var(--font-sans);
    font-size:1rem;
    line-height:1.5;
    transition:border-color 220ms var(--ease), background-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.contact__input::placeholder{
    color:var(--color-sage);
    opacity:1;
}
.contact__input:hover{
    border-color:var(--color-beige);
}
.contact__input:focus{
    outline:none;
    border-color:var(--color-gold);
    background:rgba(16, 31, 25, 0.62);
    box-shadow:0 0 0 1px var(--color-gold);
}
.contact__input:focus-visible{
    outline:none;
    border-color:var(--color-gold);
    box-shadow:0 0 0 2px var(--color-gold-2);
}
/* Золота лінія, що промальовується знизу поля при фокусі */
.contact__field-line{
    position:absolute;
    left:0;
    bottom:0;
    height:2px;
    width:100%;
    transform:scaleX(0);
    transform-origin:left center;
    background:linear-gradient(90deg, var(--color-gold) 0%, var(--color-gold-2) 100%);
    transition:transform 320ms var(--ease);
    pointer-events:none;
}
.contact__input:focus ~ .contact__field-line{ transform:scaleX(1); }
/* Активний стан поля підсвічує нумерацію + лейбл */
.contact__field:focus-within .contact__field-no{ color:var(--color-gold); }
.contact__field:focus-within .contact__label{ color:var(--color-cream); }
.contact__textarea{
    resize:vertical;
    min-height:6rem;
}
/* Стан помилки валідації — м'який пульс рамки + червінь нумерації */
.contact__input.is-invalid{
    border-color:var(--color-gold-2);
    box-shadow:0 0 0 1px var(--color-gold-2);
    animation:contact-field-pulse 480ms var(--ease);
}
.contact__field:has(.contact__input.is-invalid) .contact__field-no{ color:var(--color-gold-2); }
@keyframes contact-field-pulse{
    0%{ box-shadow:0 0 0 1px var(--color-gold-2); }
    40%{ box-shadow:0 0 0 4px rgba(215,182,92,0.28); }
    100%{ box-shadow:0 0 0 1px var(--color-gold-2); }
}

.contact__foot{
    display:flex;
    align-items:center;
    gap:1.5rem;
    flex-wrap:wrap;
}
.contact__submit{ flex:0 0 auto; }
.contact__note{
    flex:1 1 12rem;
    margin:0;
    color:var(--color-sage);
    font-size:0.75rem;
    line-height:1.5;
}

/* Повідомлення-подяка — поглиблений екран підтвердження з печаткою */
.contact__status{
    display:flex;
    align-items:flex-start;
    gap:1.5rem;
    margin:0;
    padding:2rem;
    background:
        radial-gradient(24rem 16rem at 100% 0%, rgba(186,148,45,0.14), transparent 60%),
        rgba(16, 31, 25, 0.55);
    border:1px solid var(--color-gold);
    color:var(--color-cream);
    outline:none;
    animation:contact-status-in 520ms var(--ease) both;
}
.contact__status[hidden]{ display:none; }
.contact__status-seal{
    flex:0 0 auto;
    width:4rem;
    height:4rem;
    color:var(--color-gold);
}
.contact__status-seal-ring{
    fill:none;
    stroke:var(--color-gold);
    stroke-width:1.5;
    opacity:0.55;
}
.contact__status-seal-ring--in{
    stroke:var(--color-gold-2);
    stroke-dasharray:3 6;
    opacity:0.7;
}
.contact__status-seal-tick{
    stroke:var(--color-gold-2);
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:60;
    stroke-dashoffset:60;
    animation:contact-tick-draw 620ms var(--ease) 180ms forwards;
}
.contact__status-body{ display:flex; flex-direction:column; gap:0.5rem; }
.contact__status-title{
    margin:0;
    font-family:var(--font-display);
    font-weight:400;
    font-size:1.5rem;
    line-height:1.1;
    color:var(--color-cream);
}
.contact__status-text{
    margin:0;
    color:var(--color-beige);
    font-size:0.875rem;
    line-height:1.6;
}
@keyframes contact-status-in{
    from{ opacity:0; transform:translateY(0.75rem); }
    to{ opacity:1; transform:translateY(0); }
}
@keyframes contact-tick-draw{
    to{ stroke-dashoffset:0; }
}

/* --- Адаптив --- */
@media (max-width:900px){
    .contact{ padding:3rem 0; }
    .contact__layout{
        grid-template-columns:1fr;
        gap:2.5rem;
    }
    .contact__lead{ font-size:1rem; margin-bottom:2rem; }
    .contact__form-wrap{ padding:2rem; }
    .contact__mark{ width:14rem; height:14rem; }
}
@media (max-width:560px){
    .contact__form-wrap{ padding:1.5rem; }
    .contact__foot{
        flex-direction:column;
        align-items:stretch;
        gap:1rem;
    }
    .contact__submit{ width:100%; }
    .contact__note{ flex:1 1 auto; }
    .contact__assurance{ gap:0.75rem; }
    /* На вузьких екранах нумерація йде над лейблом, поле — на всю ширину */
    .contact__field{
        grid-template-columns:1fr;
        grid-template-rows:auto auto auto;
        row-gap:0.375rem;
    }
    .contact__field-no{ grid-column:1; grid-row:1; }
    .contact__label{ grid-column:1; grid-row:2; }
    .contact__control{ grid-column:1; grid-row:3; }
    .contact__status{ flex-direction:column; gap:1rem; padding:1.5rem; }
}

@media (prefers-reduced-motion: reduce){
    .contact__input{ transition:none; }
    .contact__mark{ animation:none; }
    .contact__field-line{ transition:none; }
    .contact__input.is-invalid{ animation:none; }
    .contact__status{ animation:none; }
    .contact__status-seal-tick{
        animation:none;
        stroke-dashoffset:0;
    }
}

/* ============================================================
   FAQ (2.9) — нативний акордеон <details>/<summary>
   ============================================================ */
.faq{
    position:relative;
    overflow:hidden;
    padding:6rem 0;
    background:var(--color-green);
    color:var(--color-cream);
    isolation:isolate;
}
/* Шар 1 — атмосферні градієнти + ледь помітна «паперова» сітка-лінійка */
.faq__bg{
    position:absolute;
    inset:0;
    z-index:0;
    background:
        radial-gradient(48rem 34rem at -8% -8%, rgba(186,148,45,0.12), transparent 60%),
        radial-gradient(44rem 38rem at 108% 112%, rgba(90,105,96,0.18), transparent 62%),
        linear-gradient(180deg, var(--color-green) 0%, var(--color-green-2) 100%);
    pointer-events:none;
}
.faq__bg::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:linear-gradient(to right, var(--color-line-soft) 1px, transparent 1px);
    background-size:8rem 100%;
    opacity:0.4;
    mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    -webkit-mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

/* Шар 2 — гігантський «?» як kinetic-вотермарка, що креслить себе */
.faq__glyph{
    position:absolute;
    top:-2rem;
    right:-3rem;
    width:26rem;
    height:auto;
    z-index:0;
    opacity:0.5;
    pointer-events:none;
}
.faq__glyph-path{
    fill:none;
    stroke:var(--color-gold);
    stroke-width:2;
    stroke-linecap:round;
    opacity:0.3;
    stroke-dasharray:760;
    stroke-dashoffset:760;
    transition:stroke-dashoffset 1800ms var(--ease);
}
.faq__glyph-dot{
    fill:var(--color-gold-2);
    opacity:0;
    transition:opacity 600ms var(--ease) 1400ms;
}
.faq.is-glyph-drawn .faq__glyph-path{ stroke-dashoffset:0; }
.faq.is-glyph-drawn .faq__glyph-dot{ opacity:0.8; }

/* Шар 2b — концентричні кільця ліворуч-внизу */
.faq__mark{
    position:absolute;
    bottom:-7rem;
    left:-7rem;
    width:26rem;
    height:26rem;
    z-index:0;
    opacity:0.45;
    pointer-events:none;
}
.faq__mark-ring{
    fill:none;
    stroke:var(--color-line);
    stroke-width:1;
}
.faq__mark-ring--draw{
    stroke:var(--color-line-strong);
    stroke-dasharray:578;
    stroke-dashoffset:578;
    transform:rotate(-90deg);
    transform-origin:100px 100px;
    transition:stroke-dashoffset 2000ms var(--ease) 200ms;
}
.faq.is-glyph-drawn .faq__mark-ring--draw{ stroke-dashoffset:0; }
.faq__mark-ring--dashed{
    stroke:var(--color-line-soft);
    stroke-dasharray:3 8;
}
.faq__mark-core{ fill:var(--color-gold-2); stroke:none; }

/* Шар 3 — контент: асиметрична сітка «аннотація | реєстр» */
.faq__container{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0, 22rem) minmax(0, 1fr);
    grid-template-areas:
        "aside list"
        "foot  foot";
    column-gap:5rem;
    row-gap:4rem;
    align-items:start;
}

/* --- Ліва аннотація (закріплена) --- */
.faq__aside{
    grid-area:aside;
    position:sticky;
    top:6rem;
    padding-left:1.5rem;
    border-left:1px solid var(--color-line);
}
.faq__kicker{
    margin:0 0 1.5rem;
    display:inline-flex;
    align-items:baseline;
    gap:0.75rem;
    color:var(--color-gold);
    font-size:0.75rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    font-weight:600;
}
.faq__kicker-mark{
    font-family:var(--font-display);
    font-size:1.5rem;
    line-height:1;
    color:var(--color-gold-2);
    letter-spacing:0;
}
.faq__title{
    margin:0 0 1.25rem;
    font-family:var(--font-display);
    font-weight:400;
    color:var(--color-cream);
    font-size:clamp(2rem, 3vw, 2.75rem);
    line-height:1.08;
    letter-spacing:-0.005em;
    text-wrap:balance;
}
.faq__title-accent{
    color:var(--color-gold);
    font-style:italic;
}
.faq__lead{
    margin:0;
    font-size:1rem;
    line-height:1.6;
    color:rgba(244, 237, 228, 0.72);
}
/* Маленька статистика-«рахівниця» під лідом */
.faq__meta{
    margin-top:2.5rem;
    display:flex;
    align-items:center;
    gap:1rem;
}
.faq__meta-count{
    font-family:var(--font-display);
    font-size:3rem;
    line-height:1;
    color:var(--color-gold);
    font-variant-numeric:tabular-nums;
}
.faq__meta-rule{
    width:2rem;
    height:1px;
    background:var(--color-line-strong);
    flex:0 0 auto;
}
.faq__meta-label{
    font-size:0.75rem;
    line-height:1.4;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:rgba(244, 237, 228, 0.5);
}

/* --- Реєстр запитань (акордеон) --- */
.faq__list{
    grid-area:list;
    border-top:1px solid var(--color-line);
}
.faq__item{
    position:relative;
    border-bottom:1px solid var(--color-line);
    transition:border-color 0.4s var(--ease);
}
/* Золота лінія-індикатор активного питання зліва */
.faq__item::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:2px;
    background:var(--color-gold);
    transform:scaleY(0);
    transform-origin:top;
    transition:transform 0.5s var(--ease);
}
.faq__item[open]{
    background:linear-gradient(90deg, rgba(186,148,45,0.06), transparent 50%);
}
.faq__item[open]::before{ transform:scaleY(1); }
.faq__item[open]{ border-color:var(--color-line-strong); }

.faq__summary{
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:1.5rem;
    padding:1.75rem 1.5rem 1.75rem 1.5rem;
    transition:color 0.3s var(--ease), padding-left 0.4s var(--ease);
}
.faq__summary::-webkit-details-marker{ display:none; }
.faq__summary:focus-visible{
    outline:2px solid var(--color-gold-2);
    outline-offset:0.25rem;
}

/* Номер питання — kinetic-індекс на полях */
.faq__index{
    flex:0 0 auto;
    font-family:var(--font-display);
    font-size:0.875rem;
    letter-spacing:0.08em;
    color:var(--color-sage);
    font-variant-numeric:tabular-nums;
    transition:color 0.3s var(--ease), transform 0.4s var(--ease);
}
.faq__summary:hover .faq__index{ color:var(--color-gold-2); }
.faq__item[open] .faq__index{ color:var(--color-gold); }

.faq__q{
    flex:1 1 auto;
    font-family:var(--font-display);
    font-weight:400;
    font-size:clamp(1.125rem, 1.6vw, 1.5rem);
    line-height:1.3;
    color:var(--color-beige);
    transition:color 0.3s var(--ease);
}
.faq__summary:hover .faq__q{ color:var(--color-cream); }
.faq__item[open] .faq__q{ color:var(--color-cream); }

/* Кружок-іконка +/− (коло через SVG, без border-radius) */
.faq__icon{
    flex:0 0 auto;
    position:relative;
    width:2.5rem;
    height:2.5rem;
    display:grid;
    place-items:center;
    color:var(--color-gold-2);
    transition:transform 0.5s var(--ease);
}
.faq__item[open] .faq__icon{ transform:rotate(180deg); }
.faq__icon svg{
    position:relative;
    width:2.5rem;
    height:2.5rem;
    overflow:visible;
}
.faq__icon-ring{
    fill:none;
    stroke:var(--color-line-strong);
    stroke-width:1;
    transition:stroke 0.3s var(--ease), fill 0.3s var(--ease);
}
.faq__summary:hover .faq__icon-ring{ stroke:var(--color-gold-2); }
.faq__item[open] .faq__icon-ring{
    stroke:var(--color-gold);
    fill:rgba(186,148,45,0.12);
}
.faq__icon-h,
.faq__icon-v{
    stroke:currentColor;
    stroke-width:1.5;
    stroke-linecap:square;
    transform-origin:center;
    transition:transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
/* + → − : вертикальна риска складається при [open] */
.faq__item[open] .faq__icon-v{
    transform:scaleY(0);
    opacity:0;
}

/* Відповідь — справжня анімація висоти через grid-rows (0fr → 1fr) */
.faq__answer{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows 0.5s var(--ease);
}
.faq__item[open] .faq__answer{ grid-template-rows:1fr; }
.faq__answer-inner{
    overflow:hidden;
    min-height:0;
}
.faq__answer p{
    margin:0;
    padding:0 4rem 1.75rem 4rem;
    max-width:46rem;
    font-size:1rem;
    line-height:1.65;
    color:rgba(244, 237, 228, 0.74);
    opacity:0;
    transform:translateY(0.5rem);
    transition:opacity 0.4s var(--ease) 0.1s, transform 0.4s var(--ease) 0.1s;
}
.faq__item[open] .faq__answer p{
    opacity:1;
    transform:translateY(0);
}

/* --- Підвал з кнопкою --- */
.faq__foot{
    grid-area:foot;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem 2rem;
    padding-top:2.5rem;
    border-top:1px solid var(--color-line);
}
.faq__foot-text{
    flex:1 1 24rem;
    max-width:40rem;
}
.faq__foot-eyebrow{
    display:block;
    margin-bottom:0.5rem;
    font-family:var(--font-display);
    font-style:italic;
    font-size:1.25rem;
    color:var(--color-gold-2);
}
.faq__foot-note{
    margin:0;
    font-size:1rem;
    line-height:1.6;
    color:rgba(244, 237, 228, 0.6);
}

@media (max-width: 1000px){
    .faq__container{
        grid-template-columns:1fr;
        grid-template-areas:
            "aside"
            "list"
            "foot";
        row-gap:3rem;
    }
    .faq__aside{
        position:static;
        max-width:46rem;
    }
}

@media (max-width: 900px){
    .faq{ padding:4rem 0; }
    .faq__lead{ font-size:1rem; }
    .faq__answer p{ padding-right:2.5rem; }
}

@media (max-width: 560px){
    .faq__glyph{ width:18rem; right:-4rem; }
    .faq__summary{ gap:1rem; padding:1.25rem 1rem; }
    .faq__index{ display:none; }
    .faq__icon{ width:2rem; height:2rem; }
    .faq__icon svg{ width:2rem; height:2rem; }
    .faq__answer p{ padding:0 1rem 1.5rem 1rem; }
}

@media (prefers-reduced-motion: reduce){
    .faq__summary,
    .faq__q,
    .faq__index,
    .faq__icon,
    .faq__icon-ring,
    .faq__icon-h,
    .faq__icon-v,
    .faq__item::before,
    .faq__answer,
    .faq__answer p,
    .faq__glyph-path,
    .faq__glyph-dot,
    .faq__mark-ring--draw{ transition:none; }
    .faq.is-glyph-drawn .faq__glyph-path{ stroke-dashoffset:0; }
    .faq.is-glyph-drawn .faq__mark-ring--draw{ stroke-dashoffset:0; }
}

/* ============================================================
   Clients (2.10) — «Наші клієнти»
   Темна тема: смарагдовий фон, світлий текст, золоті акценти.
   Глибина: 1) атмосферні градієнти, 2) декоративні кільця,
   3) контент. Стіна логотипів — CSS-marquee.
   ============================================================ */
.clients{
    position:relative;
    overflow:hidden;
    padding:5rem 0;
    background:var(--color-green);
    color:var(--color-cream);
    isolation:isolate;
}
/* Шар 1 — атмосферні градієнти */
.clients__bg{
    position:absolute;
    inset:0;
    z-index:0;
    background:
        radial-gradient(44rem 34rem at 106% -8%, rgba(186,148,45,0.10), transparent 60%),
        radial-gradient(40rem 34rem at -6% 110%, rgba(90,105,96,0.16), transparent 62%),
        linear-gradient(180deg, var(--color-green-2) 0%, var(--color-green) 100%);
    pointer-events:none;
}
/* Шар 1b — тонка вертикальна сітка «полів документа» */
.clients__grid-lines{
    position:absolute;
    inset:0;
    z-index:0;
    background-image:linear-gradient(90deg, var(--color-line-soft) 1px, transparent 1px);
    background-size:8rem 100%;
    opacity:0.5;
    mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    -webkit-mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    pointer-events:none;
}
/* Шар 2 — печатка конфіденційності праворуч-вгорі */
.clients__mark{
    position:absolute;
    top:-7rem;
    right:-7rem;
    width:24rem;
    height:24rem;
    z-index:0;
    opacity:0.45;
    pointer-events:none;
    animation:clients-seal-spin 90s linear infinite;
}
.clients__mark-ring{
    fill:none;
    stroke:var(--color-line);
    stroke-width:1;
}
.clients__mark-ring--dashed{
    stroke:var(--color-line-soft);
    stroke-dasharray:3 8;
}
.clients__mark-arc{
    fill:none;
    stroke:var(--color-gold);
    stroke-width:1.5;
    opacity:0.55;
}
.clients__mark-core{ fill:var(--color-gold-2); stroke:none; }
@keyframes clients-seal-spin{
    from{ transform:rotate(0deg); }
    to{   transform:rotate(360deg); }
}

/* Шар 3 — контент */
.clients__container{
    position:relative;
    z-index:1;
}
.clients__head{
    max-width:46rem;
    margin:0 0 2.5rem;
}
.clients__kicker{
    margin:0 0 1.5rem;
    display:inline-flex;
    align-items:baseline;
    gap:0.75rem;
    color:var(--color-gold);
    font-size:0.75rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    font-weight:600;
}
.clients__kicker-mark{
    font-family:var(--font-display);
    font-size:1.5rem;
    line-height:1;
    color:var(--color-gold-2);
    letter-spacing:0;
}
.clients__title{
    margin:0 0 1.25rem;
    font-family:var(--font-display);
    font-weight:400;
    color:var(--color-cream);
    font-size:clamp(2rem, 3.6vw, 3.25rem);
    line-height:1.1;
    letter-spacing:-0.005em;
    text-wrap:balance;
}
.clients__title-accent{ color:var(--color-gold); }
.clients__lead{
    margin:0;
    max-width:42rem;
    font-size:1.125rem;
    line-height:1.6;
    color:rgba(244, 237, 228, 0.72);
}

/* --- Леджер довіри (count-up) --- */
.clients__ledger{
    margin:0 0 3.5rem;
    padding:0;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1px;
    background:var(--color-line);
    border-top:1px solid var(--color-line);
    border-bottom:1px solid var(--color-line);
}
.clients__stat{
    position:relative;
    padding:2rem 1.5rem 2rem 0;
    background:var(--color-green);
}
.clients__stat:not(:first-child){ padding-left:1.5rem; }
.clients__stat-label{
    margin:0 0 1rem;
    font-size:0.75rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--color-sage);
    font-weight:600;
}
.clients__stat-value{
    margin:0;
    display:flex;
    align-items:baseline;
    font-family:var(--font-display);
    font-weight:400;
    line-height:1;
    color:var(--color-cream);
    font-size:clamp(2.5rem, 4vw, 3.5rem);
    font-variant-numeric:tabular-nums;
}
.clients__stat-suffix{
    margin-left:0.125rem;
    color:var(--color-gold);
    font-size:0.5em;
}
.clients__stat-value--seal{ color:var(--color-gold); }
.clients__stat-glyph{
    font-family:var(--font-display);
    font-size:clamp(2.5rem, 4vw, 3.5rem);
    line-height:1;
    color:var(--color-gold);
    text-shadow:0 0 1.5rem rgba(186,148,45,0.35);
}
.clients__stat-note{
    margin:1rem 0 0;
    max-width:16rem;
    font-size:0.875rem;
    line-height:1.5;
    color:rgba(244, 237, 228, 0.5);
}

/* --- Підпис-розділювач секцій --- */
.clients__section-tag{
    display:flex;
    align-items:center;
    gap:1rem;
    margin:0 0 1.5rem;
    font-size:0.75rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--color-gold-2);
    font-weight:600;
}
.clients__section-tag-line{
    width:2rem;
    height:1px;
    background:var(--color-gold);
    flex:0 0 auto;
}

/* --- Хто є клієнтами: сітка категорій --- */
.clients__audience{
    list-style:none;
    margin:0 0 3rem;
    padding:0;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--color-line);
    border:1px solid var(--color-line);
}
.clients__audience-item{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:1rem;
    padding:1.5rem;
    background:var(--color-green);
    overflow:hidden;
    transition:background 0.4s var(--ease);
}
/* промінь, що ковзає при наведенні */
.clients__audience-item::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:2px;
    background:var(--color-gold);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 0.5s var(--ease);
}
.clients__audience-item:hover{
    background:var(--color-green-3);
}
.clients__audience-item:hover::after{ transform:scaleX(1); }
.clients__audience-tick{
    position:absolute;
    top:0.75rem;
    right:0.75rem;
    width:1rem;
    height:1rem;
    color:var(--color-gold);
    opacity:0;
    transition:opacity 0.4s var(--ease);
    pointer-events:none;
}
.clients__audience-tick path{
    stroke-dasharray:100;
    stroke-dashoffset:100;
    transition:stroke-dashoffset 0.6s var(--ease);
}
.clients__audience-item:hover .clients__audience-tick{ opacity:1; }
.clients__audience-item:hover .clients__audience-tick path{ stroke-dashoffset:0; }
.clients__audience-no{
    font-family:var(--font-display);
    font-size:0.875rem;
    color:var(--color-gold);
    letter-spacing:0.08em;
    flex:0 0 auto;
    line-height:1.4;
}
.clients__audience-body{
    display:flex;
    flex-direction:column;
    gap:0.25rem;
}
.clients__audience-label{
    font-size:1rem;
    line-height:1.4;
    color:var(--color-beige);
    font-weight:500;
}
.clients__audience-desc{
    font-size:0.875rem;
    line-height:1.4;
    color:var(--color-sage);
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:max-height 0.45s var(--ease), opacity 0.45s var(--ease);
}
.clients__audience-item:hover .clients__audience-desc{
    max-height:4rem;
    opacity:1;
}

/* --- Реєстр довіри (CSS-marquee монограм) --- */
.clients__wall{
    position:relative;
    margin:0 0 3rem;
    padding:1.5rem 0 2rem;
    border-top:1px solid var(--color-line);
    border-bottom:1px solid var(--color-line);
    overflow:hidden;
}
.clients__wall-caption{
    margin:0 0 1.5rem;
    max-width:44rem;
    font-size:0.875rem;
    line-height:1.6;
    color:rgba(244, 237, 228, 0.5);
}
.clients__wall-tag{
    display:inline-block;
    margin-right:0.5rem;
    padding:0.125rem 0.5rem;
    border:1px solid var(--color-line-strong);
    font-size:0.625rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--color-gold-2);
    vertical-align:middle;
}
/* плавне згасання логотипів на краях */
.clients__wall::before,
.clients__wall::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:5rem;
    z-index:2;
    pointer-events:none;
}
.clients__wall::before{
    left:0;
    background:linear-gradient(90deg, var(--color-green), transparent);
}
.clients__wall::after{
    right:0;
    background:linear-gradient(270deg, var(--color-green), transparent);
}
.clients__marquee{
    overflow:hidden;
}
.clients__track{
    display:flex;
    width:max-content;
    animation:clients-marquee 40s linear infinite;
}
.clients__marquee:hover .clients__track{
    animation-play-state:paused;
}
.clients__set{
    display:flex;
    align-items:center;
    flex:0 0 auto;
}
.clients__logo{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:11.5rem;
    height:3rem;
    padding:0 1rem;
    color:var(--color-sage);
    opacity:0.55;
    filter:blur(1.5px);
    transition:color 0.4s var(--ease), opacity 0.4s var(--ease), filter 0.4s var(--ease);
}
/* гриф конфіденційності — закреслювальна риска, що зникає при наведенні */
.clients__logo::after{
    content:"";
    position:absolute;
    left:1rem;
    right:1rem;
    top:50%;
    height:1px;
    background:var(--color-gold);
    opacity:0.45;
    transform:scaleX(1);
    transform-origin:right;
    transition:transform 0.4s var(--ease), opacity 0.4s var(--ease);
    pointer-events:none;
}
.clients__logo:hover{
    color:var(--color-cream);
    opacity:1;
    filter:blur(0);
}
.clients__logo:hover::after{
    transform:scaleX(0);
    opacity:0;
}
.clients__logo svg{
    width:100%;
    height:100%;
    display:block;
}
.clients__logo-word{
    fill:currentColor;
    font-family:var(--font-display);
    font-size:20px;
    letter-spacing:0.06em;
}
@keyframes clients-marquee{
    from{ transform:translateX(0); }
    to{   transform:translateX(-50%); }
}

/* --- Підвал секції з CTA --- */
.clients__foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
    flex-wrap:wrap;
    padding-top:1rem;
    border-top:1px solid var(--color-line);
}
.clients__foot-text{
    max-width:40rem;
}
.clients__foot-oath{
    display:inline-flex;
    align-items:center;
    margin-bottom:0.75rem;
    font-family:var(--font-display);
    font-size:0.875rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--color-gold-2);
}
.clients__foot-note{
    margin:0;
    max-width:38rem;
    font-size:1rem;
    line-height:1.6;
    color:rgba(244, 237, 228, 0.6);
}

/* --- Адаптив --- */
@media (max-width:60rem){
    .clients__audience{
        grid-template-columns:repeat(2, 1fr);
    }
    .clients__ledger{
        grid-template-columns:repeat(2, 1fr);
    }
    .clients__stat{ padding:1.75rem 1.5rem; }
    .clients__stat:not(:first-child){ padding-left:1.5rem; }
}
@media (max-width:37.5rem){
    .clients__audience{
        grid-template-columns:1fr;
    }
    .clients__ledger{
        grid-template-columns:1fr;
    }
    .clients__stat{ padding:1.5rem; }
    .clients__stat-note{ max-width:none; }
    .clients__logo{ width:9.5rem; }
    .clients__grid-lines{ background-size:4rem 100%; }
}
@media (max-width:56.25rem){
    .clients{ padding:3rem 0; }
    .clients__head{ margin-bottom:2.5rem; }
    .clients__lead{ font-size:1rem; }
    .clients__foot{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion: reduce){
    .clients__track{ animation:none; }
    .clients__mark{ animation:none; }
    .clients__audience-item,
    .clients__audience-item::after,
    .clients__audience-tick,
    .clients__audience-tick path,
    .clients__audience-desc,
    .clients__logo,
    .clients__logo::after{ transition:none; }
}

/* ============================================================
   Site footer (v1) — solid premium, dark emerald, gold accents
   ============================================================ */
.site-footer{
    position:relative;
    overflow:hidden;
    margin-top:3rem;
    padding:4rem 0 1.5rem;
    background:
        linear-gradient(180deg,
            rgba(13, 27, 22, 0) 0%,
            #0D1B16 14%,
            #0B1712 100%
        );
    color:var(--color-beige);
    border-top:1px solid var(--color-line);
}

/* Атмосферний золотий ореол угорі-ліворуч — глибина, без різких меж */
.site-footer__glow{
    position:absolute;
    top:-12rem; left:-6rem;
    width:32rem; height:32rem;
    pointer-events:none;
    background:radial-gradient(circle at center,
        rgba(186, 148, 45, 0.16) 0%,
        rgba(186, 148, 45, 0.06) 38%,
        rgba(186, 148, 45, 0) 70%);
}

/* Декоративний шар — гравіровані контурні лінії на всю ширину */
.site-footer__engraving{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    opacity:0.5;
}

.site-footer__container{
    position:relative;
    z-index:1;
}

/* -------- ФІНАЛЬНИЙ АКОРД: монументальний CTA-рядок -------- */
.site-footer__beacon{
    position:relative;
    padding:0 0 3rem;
    margin-bottom:3rem;
    border-bottom:1px solid var(--color-line-soft);
}
.site-footer__beacon-eyebrow{
    margin:0 0 1rem;
    color:var(--color-gold-2);
    font-family:var(--font-sans);
    font-size:0.75rem;
    font-weight:600;
    letter-spacing:0.22em;
    text-transform:uppercase;
}
.site-footer__beacon-line{
    margin:0;
    max-width:50rem;
    color:var(--color-cream);
    font-family:var(--font-display);
    font-size:clamp(2.5rem, 6vw, 4.5rem);
    line-height:1.04;
    letter-spacing:-0.01em;
}
.site-footer__beacon-word{
    display:inline-block;
    margin-right:0.25rem;
}
.site-footer__beacon-word--accent{
    color:var(--color-gold-2);
    font-style:italic;
}
.site-footer__beacon-sub{
    margin:1.5rem 0 0;
    max-width:34rem;
    color:var(--color-sage);
    font-size:1rem;
    line-height:1.7;
}
.site-footer__beacon-cta{
    margin-top:2rem;
}

/* Кінетична поява слів у CTA-рядку (синхронізовано з reveal-системою) */
.site-footer__beacon[data-kinetic-ready] .site-footer__beacon-word{
    opacity:0;
    transform:translateY(0.75rem);
    transition:opacity 620ms var(--ease), transform 620ms var(--ease);
}
.site-footer__beacon[data-kinetic-ready].is-revealed .site-footer__beacon-word{
    opacity:1;
    transform:none;
}
.site-footer__beacon[data-kinetic-ready].is-revealed .site-footer__beacon-word:nth-child(1){ transition-delay:120ms; }
.site-footer__beacon[data-kinetic-ready].is-revealed .site-footer__beacon-word:nth-child(2){ transition-delay:220ms; }
.site-footer__beacon[data-kinetic-ready].is-revealed .site-footer__beacon-word:nth-child(3){ transition-delay:320ms; }
.site-footer__beacon[data-kinetic-ready].is-revealed .site-footer__beacon-word:nth-child(4){ transition-delay:420ms; }

/* -------- Верхня сітка -------- */
.site-footer__top{
    display:grid;
    grid-template-columns:1.6fr 1fr 1.2fr 0.8fr;
    gap:2.5rem;
    padding-bottom:2.5rem;
    border-bottom:1px solid var(--color-line-soft);
}

/* -------- Бренд -------- */
.site-footer__brand-col{
    position:relative;
}
.site-footer__monogram{
    position:absolute;
    top:-1.5rem; right:1.5rem;
    width:9rem; height:9rem;
    color:var(--color-beige);
    opacity:0.06;
    pointer-events:none;
}
.site-footer__brand{
    position:relative;
    display:inline-flex;
    align-items:center;
}
.site-footer__logo{
    width:13.5rem;
    height:auto;
    display:block;
}
.site-footer__descriptor{
    position:relative;
    margin:1.5rem 0 0;
    max-width:24rem;
    color:var(--color-sage);
    font-size:1rem;
    line-height:1.7;
}
.site-footer__creed{
    position:relative;
    display:flex;
    align-items:center;
    gap:0.75rem;
    margin:1.5rem 0 0;
    color:var(--color-beige-2);
    font-family:var(--font-display);
    font-size:1.125rem;
    font-style:italic;
    line-height:1.4;
}
.site-footer__creed-mark{
    flex:none;
    width:1.5rem;
    height:1px;
    background:var(--color-gold);
}

/* -------- Заголовки колонок -------- */
.site-footer__col-title{
    display:flex;
    align-items:baseline;
    gap:0.5rem;
    margin:0 0 1.25rem;
    color:var(--color-cream);
    font-family:var(--font-sans);
    font-size:0.75rem;
    font-weight:600;
    letter-spacing:0.18em;
    text-transform:uppercase;
}
.site-footer__col-index{
    color:var(--color-gold);
    font-size:0.625rem;
    letter-spacing:0.1em;
}
.site-footer__col-title::after{
    content:"";
    display:block;
    width:1.5rem;
    height:2px;
    margin-top:0.5rem;
    background:var(--color-gold);
}

/* -------- Навігація -------- */
.site-footer__nav{ margin:0; }
.site-footer__list,
.site-footer__contact-list,
.site-footer__social,
.site-footer__legal{
    list-style:none;
    margin:0;
    padding:0;
}
.site-footer__item{ margin-bottom:0.75rem; }
.site-footer__link{
    position:relative;
    display:inline-flex;
    align-items:center;
    color:var(--color-beige);
    font-size:1rem;
    text-decoration:none;
}
/* Золота позначка-стрілка, що виїжджає зліва при ховері */
.site-footer__link::before{
    content:"";
    width:0;
    height:1px;
    margin-right:0;
    background:var(--color-gold);
    transition:width 260ms var(--ease), margin-right 260ms var(--ease);
}
.site-footer__link-text{
    display:inline-block;
    transition:color 220ms var(--ease), transform 260ms var(--ease);
}
.site-footer__link:hover .site-footer__link-text,
.site-footer__link:focus-visible .site-footer__link-text{
    color:var(--color-cream);
    transform:translateX(0.125rem);
}
.site-footer__link:hover::before,
.site-footer__link:focus-visible::before{
    width:0.75rem;
    margin-right:0.5rem;
}

/* -------- Контакти -------- */
.site-footer__contact-item{
    margin-bottom:1.25rem;
}
.site-footer__contact-label{
    display:block;
    margin-bottom:0.25rem;
    color:var(--color-sage);
    font-size:0.75rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
}
.site-footer__contact-value{
    display:block;
    color:var(--color-beige);
    font-size:1rem;
    line-height:1.5;
    text-decoration:none;
}
.site-footer__contact-value--link{
    transition:color 220ms var(--ease);
}
.site-footer__contact-value--link:hover,
.site-footer__contact-value--link:focus-visible{ color:var(--color-gold-2); }

/* -------- Графік прийому з живим індикатором -------- */
.site-footer__hours{
    margin-top:0.5rem;
    padding:1rem;
    border:1px solid var(--color-line-soft);
    background:rgba(26, 48, 39, 0.4);
}
.site-footer__hours-label{
    display:block;
    margin-bottom:0.25rem;
    color:var(--color-sage);
    font-size:0.75rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
}
.site-footer__hours-value{
    margin:0 0 0.5rem;
    color:var(--color-beige);
    font-size:1rem;
}
.site-footer__status{
    display:flex;
    align-items:center;
    gap:0.5rem;
    margin:0;
    color:var(--color-beige-2);
    font-size:0.875rem;
}
.site-footer__status-dot{
    position:relative;
    flex:none;
    display:inline-flex;
    width:1rem;
    height:1rem;
    color:var(--color-gold-2);
}
.site-footer__status-dot svg{ width:1rem; height:1rem; }
.site-footer__status--closed .site-footer__status-dot{ color:var(--color-sage); }
.site-footer__status-pulse{
    transform-origin:center;
    animation:footerStatusPulse 2400ms var(--ease) infinite;
}
@keyframes footerStatusPulse{
    0%   { transform:scale(0.7); opacity:0.9; }
    70%  { transform:scale(1.6); opacity:0; }
    100% { transform:scale(1.6); opacity:0; }
}

/* -------- Соцмережі -------- */
.site-footer__social{
    display:flex;
    flex-wrap:wrap;
    gap:0.75rem;
}
.site-footer__social-link{
    position:relative;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.5rem;
    height:2.5rem;
    color:var(--color-beige);
    border:1px solid var(--color-line);
    transition:color 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease);
}
/* Золота заливка знизу вгору при ховері (без border-radius) */
.site-footer__social-link::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:var(--color-gold);
    transform:translateY(101%);
    transition:transform 320ms cubic-bezier(.6,.05,.2,1);
}
.site-footer__social-icon{
    position:relative;
    z-index:1;
    width:1.25rem;
    height:1.25rem;
    display:block;
}
.site-footer__social-link:hover,
.site-footer__social-link:focus-visible{
    color:var(--color-green);
    border-color:var(--color-gold);
    transform:translateY(-2px);
}
.site-footer__social-link:hover::before,
.site-footer__social-link:focus-visible::before{ transform:translateY(0); }

/* -------- Нижній рядок -------- */
.site-footer__bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem 1.5rem;
    flex-wrap:wrap;
    padding-top:1.5rem;
}
.site-footer__copy{
    margin:0;
    color:var(--color-sage);
    font-size:0.875rem;
}
/* Гравірований рядок координат — Львів */
.site-footer__place{
    display:flex;
    align-items:center;
    gap:0.75rem;
    margin:0;
    color:var(--color-sage);
    font-family:var(--font-sans);
    font-size:0.75rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
}
.site-footer__place-sep{
    width:4px;
    height:4px;
    background:var(--color-gold);
}
.site-footer__legal{
    display:flex;
    gap:1.5rem;
}
.site-footer__legal-link{
    color:var(--color-sage);
    font-size:0.875rem;
    text-decoration:none;
    transition:color 220ms var(--ease);
}
.site-footer__legal-link:hover,
.site-footer__legal-link:focus-visible{ color:var(--color-beige); }

/* Повернення нагору — компас-маркер (SVG-коло) */
.site-footer__totop{
    display:inline-flex;
    align-items:center;
    gap:0.75rem;
    color:var(--color-sage);
    font-family:var(--font-sans);
    font-size:0.75rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    text-decoration:none;
    transition:color 220ms var(--ease);
}
.site-footer__totop-mark{
    width:2.5rem;
    height:2.5rem;
    color:var(--color-line-strong);
    transition:color 280ms var(--ease), transform 480ms var(--ease);
}
.site-footer__totop-arrow{
    transition:transform 320ms var(--ease);
}
.site-footer__totop:hover,
.site-footer__totop:focus-visible{ color:var(--color-beige); }
.site-footer__totop:hover .site-footer__totop-mark,
.site-footer__totop:focus-visible .site-footer__totop-mark{
    color:var(--color-gold);
    transform:rotate(360deg);
}
.site-footer__totop:hover .site-footer__totop-arrow,
.site-footer__totop:focus-visible .site-footer__totop-arrow{
    transform:translateY(-0.125rem);
}

/* Спільний focus-visible для футера */
.site-footer a:focus-visible{
    outline:2px solid var(--color-gold-2);
    outline-offset:4px;
}

/* -------- Адаптив -------- */
@media (max-width:56.25rem){
    .site-footer{ padding-top:3rem; }
    .site-footer__beacon{ padding-bottom:2.5rem; margin-bottom:2.5rem; }
    .site-footer__top{
        grid-template-columns:1fr 1fr;
        gap:2rem 1.5rem;
    }
    .site-footer__brand-col{ grid-column:1 / -1; }
    .site-footer__monogram{ right:0; top:-0.5rem; }
}
@media (max-width:35rem){
    .site-footer{ padding-top:2.5rem; }
    .site-footer__top{
        grid-template-columns:1fr;
        gap:2rem;
    }
    .site-footer__brand-col{ grid-column:auto; }
    .site-footer__logo{ width:12rem; }
    .site-footer__monogram{ width:7rem; height:7rem; }
    .site-footer__beacon-line{ font-size:clamp(2.25rem, 11vw, 3rem); }
    .site-footer__bottom{
        flex-direction:column;
        align-items:flex-start;
        gap:1rem;
    }
    .site-footer__legal{ flex-wrap:wrap; gap:0.75rem 1.5rem; }
    .site-footer__totop{ margin-top:0.5rem; }
}

@media (prefers-reduced-motion: reduce){
    .site-footer__link-text,
    .site-footer__link::before,
    .site-footer__social-link,
    .site-footer__social-link::before,
    .site-footer__contact-value--link,
    .site-footer__legal-link,
    .site-footer__totop,
    .site-footer__totop-mark,
    .site-footer__totop-arrow{ transition:none; }
    .site-footer__social-link:hover,
    .site-footer__social-link:focus-visible{ transform:none; }
    .site-footer__totop:hover .site-footer__totop-mark,
    .site-footer__totop:focus-visible .site-footer__totop-mark{ transform:none; }
    .site-footer__status-pulse{ animation:none; }
    .site-footer__beacon[data-kinetic-ready] .site-footer__beacon-word{
        opacity:1;
        transform:none;
        transition:none;
    }
}


/* ============================================================
   SCROLL-REVEAL — cinematic поява при скролі
   База: невелике підняття + проявлення. Тригер — клас is-revealed,
   що інжектує IntersectionObserver у script.js. Анімуються лише
   opacity/transform (без layout). will-change знімається разом із
   класом is-revealed (стан спокою — без will-change).
   ============================================================ */
.reveal{
    opacity:0;
    transform:translateY(1.5rem);
    transition:opacity 700ms var(--ease), transform 700ms var(--ease);
    will-change:opacity, transform;
}
.reveal.is-revealed{
    opacity:1;
    transform:none;
    will-change:auto;
}

/* Варіанти напрямку появи (для асиметричних композицій) */
.reveal--left{ transform:translateX(-1.5rem); }
.reveal--right{ transform:translateX(1.5rem); }
.reveal--up{ transform:translateY(2.5rem); }
.reveal--fade{ transform:none; }
.reveal--left.is-revealed,
.reveal--right.is-revealed,
.reveal--up.is-revealed,
.reveal--fade.is-revealed{ transform:none; }

/* Стаггер-затримки — для послідовної появи елементів усередині секції */
.reveal--d1{ transition-delay:80ms; }
.reveal--d2{ transition-delay:160ms; }
.reveal--d3{ transition-delay:240ms; }
.reveal--d4{ transition-delay:320ms; }
.reveal--d5{ transition-delay:400ms; }
.reveal--d6{ transition-delay:480ms; }

/* Альтернатива через інлайновий --d (напр. style="--d:120ms") */
.reveal[style*="--d"]{ transition-delay:var(--d, 0ms); }

@media (prefers-reduced-motion: reduce){
    .reveal,
    .reveal--left,
    .reveal--right,
    .reveal--up,
    .reveal--fade,
    .reveal--d1,
    .reveal--d2,
    .reveal--d3,
    .reveal--d4,
    .reveal--d5,
    .reveal--d6{
        opacity:1;
        transform:none;
        transition:none;
        transition-delay:0ms;
        will-change:auto;
    }
}


/* ============================================================
   МІКРОВЗАЄМОДІЇ — посилення (стримано, преміально)
   Лише transform/opacity. Усі мають reduced-motion fallback нижче.
   ============================================================ */

/* FAQ summary — м'який зсув питання й номера при ховері */
.faq__q,
.faq__index{
    transition:transform 260ms var(--ease), color 220ms var(--ease);
}
.faq__summary:hover .faq__q,
.faq__summary:focus-visible .faq__q,
.faq__summary:hover .faq__index,
.faq__summary:focus-visible .faq__index{ transform:translateX(0.375rem); }

/* Принципи цін — тонкий зсув номера й тексту в групі */
.prices__principle{
    transition:transform 320ms var(--ease);
}
.prices__principle:hover{ transform:translateX(0.25rem); }

/* Картки локації — підняття при ховері (вузол-ромб лишається на нитці) */
.location__card{
    transition:transform 420ms var(--ease), border-color 280ms var(--ease), background-color 280ms var(--ease);
}
.location__card:hover{ transform:translateY(-0.375rem); }
.location__card::after{ transition:transform 420ms var(--ease); }
.location__card:hover::after{ transform:translateY(0.375rem) rotate(45deg); }

/* Рядки аудиторії клієнтів — підкреслення-зсув */
.clients__audience-item{
    transition:transform 320ms var(--ease), background 400ms var(--ease);
}
.clients__audience-item:hover{ transform:translateX(0.375rem); }

/* Монограма у реєстрі — легкий lift + зняття грифу на ховері (доріжка не рухається) */
.clients__logo{
    transition:opacity 320ms var(--ease), transform 320ms var(--ease),
        color 320ms var(--ease), filter 320ms var(--ease);
}
.clients__logo:hover{ transform:translateY(-0.25rem); }

/* Контакти у футері — підкреслення лінком */
.site-footer__contact-value--link{
    position:relative;
}
.site-footer__contact-value--link::after{
    content:"";
    position:absolute;
    left:0; bottom:-2px;
    width:100%;
    height:1px;
    background:var(--color-gold);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 260ms var(--ease);
}
.site-footer__contact-value--link:hover::after,
.site-footer__contact-value--link:focus-visible::after{ transform:scaleX(1); }

@media (prefers-reduced-motion: reduce){
    .faq__q,
    .faq__index,
    .prices__principle,
    .location__card,
    .clients__audience-item,
    .clients__logo,
    .site-footer__contact-value--link::after{ transition:none; }
    .faq__summary:hover .faq__q,
    .faq__summary:focus-visible .faq__q,
    .faq__summary:hover .faq__index,
    .faq__summary:focus-visible .faq__index,
    .prices__principle:hover,
    .location__card:hover,
    .clients__audience-item:hover,
    .clients__logo:hover{ transform:none; }
    .location__card::after{ transition:none; }
    .location__card:hover::after{ transform:rotate(45deg); }
}