/* ================================================================
   РЕДИЗАЙН 2026-11 · напрям «Міський журнал»
   Продовжує мову першого екрана (_designlab/hero-proof-v1/HERO_LOCK.md):
   Literata для заголовків, Onest для інтерфейсу, COLOR SYSTEM V2.
   Простір імен .rd- новий навмисно: старі .section/.card/.facts
   не перевикористовуємо, щоб не ловити зіткнень каскаду.
   Рух: тільки transform і opacity, усе під prefers-reduced-motion.
   ================================================================ */

.page-home {
    --rd-light:  #F6F4F1;
    --rd-paper:  #EDE8E2;
    --rd-ink:    #1A1216;
    --rd-ink2:   #5E5459;      /* 6.6:1 на --rd-light */
    --rd-line:   #D9D1C9;
    --rd-terra:  #A8452A;      /* 5.6:1 на --rd-light */
    --rd-terra2: #8C3A1E;
    --rd-ease:   cubic-bezier(.2, .7, .1, 1);
    background: var(--rd-light);
}

@view-transition { navigation: auto; }

.rd-wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 48px; }

/* ---------- спільна типографіка секцій ---------- */

.rd-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
    margin-bottom: 56px;
}
.rd-eyebrow {
    font-family: var(--h-ui); font-size: 12px; font-weight: 500;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--rd-terra2); margin: 0 0 18px;
}
.rd-eyebrow--dark { color: var(--h-warm); }
.rd-h2 {
    font-family: var(--h-display); font-weight: 600;
    font-size: clamp(32px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -.02em;
    color: var(--rd-ink); margin: 0; max-width: 16ch;
    text-wrap: balance;
}
.rd-h2 em { font-style: italic; font-weight: 400; color: var(--rd-terra); }
.rd-h2--dark { color: var(--h-text); }
.rd-h2--dark em { color: var(--h-link); }
.rd-lead { font-family: var(--h-ui); font-size: 17px; line-height: 1.6; color: var(--rd-ink2); margin: 24px 0 0; max-width: 46ch; }
.rd-lead--dark { color: var(--h-text2); }

.rd-more {
    display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
    font-family: var(--h-ui); font-size: 16px; font-weight: 500; white-space: nowrap;
    color: var(--rd-ink);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px;
}
.rd-more span, .rd-btn span { transition: transform .3s var(--rd-ease); }
.rd-more:hover { color: var(--rd-terra); }
.rd-more:hover span, .rd-btn:hover span { transform: translateX(5px); }

.rd-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 54px; padding: 0 28px;
    font-family: var(--h-ui); font-size: 15px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
    color: #F2EEEA; background: var(--rd-terra); border-radius: 3px;
    transition: background-color .15s ease;
}
.rd-btn:hover { background: #B44A2D; }
.rd-btn:active { background: var(--rd-terra2); }
.rd-btn:focus-visible, .rd-more:focus-visible, .rd-row:focus-visible, .rd-route__mapbtn:focus-visible {
    outline: 2px solid var(--h-link); outline-offset: 3px;
}

/* ---------- рядок брендів ---------- */

.rd-marquee {
    background: var(--h-dark); color: var(--h-text);
    border-top: 1px solid var(--h-div);
    padding: 26px 0; overflow: hidden;
}
.rd-marquee__track { display: flex; width: max-content; }
.rd-marquee__set { display: flex; flex-shrink: 0; align-items: center; }
.rd-marquee__item {
    display: inline-flex; align-items: center;
    font-family: var(--h-display); font-style: italic; font-weight: 400;
    font-size: clamp(22px, 2.6vw, 38px); line-height: 1.2; white-space: nowrap;
}
.rd-marquee__item::after {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--h-link); margin: 0 clamp(20px, 2.4vw, 40px);
}
.rd-marquee__item:nth-child(3n+2) { color: var(--h-text2); }

/* ---------- цифри ---------- */

.rd-facts { background: var(--rd-light); padding: 88px 0 24px; }
.rd-facts__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.rd-fact { border-top: 1px solid var(--rd-ink); padding-top: 22px; }
.rd-fact__num {
    display: block;
    font-family: var(--h-display); font-weight: 500;
    font-size: clamp(44px, 5.6vw, 84px); line-height: 1; letter-spacing: -.03em;
    color: var(--rd-ink); font-variant-numeric: lining-nums tabular-nums;
}
.rd-fact__num small { font-size: .42em; font-weight: 400; letter-spacing: 0; color: var(--rd-terra); }
.rd-fact__label { display: block; margin-top: 14px; font-family: var(--h-ui); font-size: 15px; line-height: 1.45; color: var(--rd-ink2); max-width: 22ch; }

/* ---------- покажчик ---------- */

.rd-dir { background: var(--rd-light); padding: 96px 0 32px; }   /* з 2026-11-11 стоїть одразу під рядком брендів, за ним цифри */
.rd-dir__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 40px; align-items: start; }
.rd-group { border-top: 1px solid var(--rd-ink); padding-top: 18px; min-width: 0; }
.rd-group__top {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--h-ui); font-size: 13px; color: var(--rd-ink2);
    font-variant-numeric: tabular-nums;
}
.rd-group__no { color: var(--rd-terra); font-weight: 600; letter-spacing: .06em; }
.rd-group__title {
    font-family: var(--h-display); font-weight: 600;
    font-size: clamp(24px, 2.1vw, 30px); line-height: 1.12; letter-spacing: -.01em;
    color: var(--rd-ink); margin: 26px 0 20px; min-height: 2.24em;
}
.rd-list { list-style: none; margin: 0; padding: 0; }
.rd-row {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    min-height: 50px; padding: 8px 0;
    border-top: 1px solid var(--rd-line);
    font-family: var(--h-ui); color: var(--rd-ink);
    overflow: hidden;
}
.rd-list li:last-child .rd-row { border-bottom: 1px solid var(--rd-line); }
.rd-row__name { flex: 1; min-width: 0; font-size: 16px; line-height: 1.3; transition: transform .35s var(--rd-ease); }
.rd-row__meta { flex-shrink: 0; font-size: 12.5px; color: var(--rd-ink2); white-space: nowrap; }
.rd-row__meta { transition: opacity .2s ease; }
/* Стрілка стоїть поверх позначки поверху: місця в рядку не забирає, поки її не видно */
.rd-row__arrow { position: absolute; right: 2px; top: 50%; margin-top: -.62em; line-height: 1.24; color: var(--rd-terra); opacity: 0; transform: translateX(-10px); transition: transform .35s var(--rd-ease), opacity .2s ease; }
.rd-row:hover .rd-row__meta { opacity: 0; }
.rd-row:hover { color: var(--rd-terra); }
.rd-row:hover .rd-row__name { transform: translateX(8px); }
.rd-row:hover .rd-row__arrow { opacity: 1; transform: none; }

/* ---------- події ---------- */

.rd-news { background: var(--rd-paper); padding: 104px 0; }
.rd-news__rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.rd-card { display: block; font-family: var(--h-ui); color: var(--rd-ink); }
.rd-card__media { position: relative; aspect-ratio: 4 / 5; background: var(--rd-line); overflow: hidden; border-radius: 3px; }
.rd-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--rd-ease); }
.rd-card:hover .rd-card__media img { transform: scale(1.05); }
.rd-card__date { position: absolute; left: 12px; top: 12px; background: var(--rd-light); padding: 6px 10px; font-size: 13px; border-radius: 2px; }
.rd-card__tag { display: block; margin-top: 16px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--rd-terra2); }
.rd-card__title { font-family: var(--h-display); font-weight: 600; font-size: 22px; line-height: 1.2; margin: 8px 0 0; }
.rd-card__text { font-size: 15px; line-height: 1.5; color: var(--rd-ink2); margin: 8px 0 0; }

/* ---------- Portal VR ---------- */

.rd-vr { background: var(--h-dark); padding: 120px 0; }
.rd-vr__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.rd-vr__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: var(--h-dusk); }
.rd-vr__media img { width: 100%; height: 100%; object-fit: cover; }
.rd-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 36px; padding: 0; }
.rd-chips li {
    font-family: var(--h-ui); font-size: 14px; color: var(--h-text);
    padding: 9px 16px; border: 1px solid var(--h-div); border-radius: 100px;
}

/* ---------- як дістатися ---------- */

.rd-route { background: var(--rd-paper); padding: 112px 0 120px; }
.rd-route__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; align-items: stretch; }
.rd-route__map {
    position: relative; min-height: 440px; border-radius: 3px; overflow: hidden;
    background:
        linear-gradient(var(--rd-line) 1px, transparent 1px) 0 0 / 100% 56px,
        linear-gradient(90deg, var(--rd-line) 1px, transparent 1px) 0 0 / 56px 100%,
        #E4DDD5;
}
.rd-route__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rd-route__mapbtn {
    position: absolute; inset: 0; width: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    background: none; border: 0; cursor: pointer;
    font-family: var(--h-ui); color: var(--rd-ink);
}
.rd-route__mapbtn strong { font-size: 17px; font-weight: 600; border-bottom: 1px solid currentColor; }
.rd-route__mapbtn span:last-child { font-size: 14px; color: var(--rd-ink2); }
.rd-pin { position: relative; width: 18px; height: 18px; border-radius: 50%; background: var(--rd-terra); margin-bottom: 14px; }
.rd-pin::before, .rd-pin::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--rd-terra); opacity: .35; }

.rd-ways { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rd-way { display: flex; gap: 24px; padding: 24px 0; border-top: 1px solid var(--rd-ink); font-family: var(--h-ui); }
.rd-way__no { flex-shrink: 0; width: 2.2em; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--rd-terra); padding-top: 6px; }
.rd-way h3 { font-family: var(--h-display); font-weight: 600; font-size: 24px; line-height: 1.2; color: var(--rd-ink); margin: 0 0 8px; }
.rd-way p { font-size: 16px; line-height: 1.55; color: var(--rd-ink2); margin: 0; max-width: 36ch; }
.rd-way--cta { margin-top: auto; padding-bottom: 0; }

/* ---------- фінал ---------- */

.rd-outro { background: var(--h-dark); padding: 128px 0 112px; text-align: center; border-bottom: 1px solid var(--h-div); }
.rd-outro__line {
    font-family: var(--h-display); font-weight: 600;
    font-size: clamp(38px, 7vw, 108px); line-height: 1.02; letter-spacing: -.025em;
    color: var(--h-text); margin: 0; text-wrap: balance;
}
.rd-outro__line em { font-style: italic; font-weight: 400; color: var(--h-link); }
.rd-outro__sub { font-family: var(--h-ui); font-size: 17px; color: var(--h-text2); margin: 28px 0 0; }
.page-home .footer { background: var(--h-dark); }

/* Нижня панель на телефоні в тій самій гамі, що й сторінка */
.page-home .bottom-nav { background: var(--h-dark); border-top: 1px solid var(--h-div); box-shadow: none; }
.page-home .bottom-nav__item { color: var(--h-text2); font-family: var(--h-ui); }
.page-home .bottom-nav__item.active { color: var(--h-link2); }

/* ---------- хмари над будівлею, друга версія (2026-11-11) ----------
   Стара плитка була вирізана із самого знімка: у ній лишився відбиток
   силуету будівлі й один щільний жмут хмар, і під час руху цей «привид»
   пропливав над дахом. Тепер це окремі фотографічні хмари на прозорому тлі
   (clouds2-*.webp, 2172x724, альфа), до будівлі не прив'язані.
   Вікно неба й маска по силуету лишилися ті самі, з main.css. */
.hero2__cloud {
    aspect-ratio: 6 / 1;              /* дві плитки 3:1, плитка завжди на всю висоту екрана */
    background-size: 50% 100%;
    mix-blend-mode: normal;
    opacity: .92;
}
.hero2__cloud--far  { --sky-d: 520s; opacity: .7; background-position: 22% 0; top: -4%; }
.hero2__cloud--near { --sky-d: 300s; top: 3%; opacity: .86; }
/* На комп'ютері екран високий: хмари тримаємо меншими й вище, щоб вони не сперечалися із заголовком */
@media (min-width: 1100px) {
    .hero2__cloud { height: 74%; }
    .hero2__cloud--near { top: 2%; }
    .hero2__cloud--far  { top: 0; }
}
/* 2026-11-11, третя версія: хмари тепер намальовані в самому знімку (hero3-facade-*),
   тому купчастий рухомий шар вимкнено. Лишились тільки тонкі високі пасма, що повільно
   пливуть поверх: кадр живий, але хмари не двояться. Підкладка неба більше не потрібна. */
.hero2__cloud--near, .hero2__skyfill { display: none; }
.hero2__cloud--far { opacity: .8; }
@keyframes skyDrift2 { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
.hero2__cloud { animation-name: skyDrift2; }
@media (max-width: 600px) { .hero2__cloud { opacity: .9; } .hero2__cloud--far { opacity: .7; } }

/* ---------- шапка: живий відлік і стискання ---------- */

.rd-count { color: var(--h-text2); white-space: nowrap; }
.rd-count::before { content: "· "; }
/* На вузькому телефоні відлік іде окремим рядком, інакше рве «відчиняємо о 10:00» навпіл */
@media (max-width: 480px) {
    .hero2__status { flex-wrap: wrap; row-gap: 4px; }
    .rd-count { flex-basis: 100%; padding-left: 19px; }
    .rd-count::before { content: none; }
}
.hero2__h1 .rd-line { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.hero2__h1 .rd-line > span { display: block; }

@media (min-width: 901px) {
    .page-home .header--hero.header { transition: height .4s var(--rd-ease); }
    .page-home .header--hero.header .header__inner { transition: padding .4s var(--rd-ease); }
    .page-home .header--hero.header .header__logo-img { transition: height .4s var(--rd-ease); }
    .page-home .header--hero.header .header__logo-city { transition: opacity .2s ease; }
    .page-home .header--hero.header.rd-compact { height: 84px; }
    .page-home .header--hero.header.rd-compact .header__inner { padding-bottom: 14px; }
    .page-home .header--hero.header.rd-compact .header__logo-img { height: 44px; }
    .page-home .header--hero.header.rd-compact .header__logo-city { opacity: 0; height: 0; overflow: hidden; }
}

/* ================================================================
   РУХ
   ================================================================ */

@media (prefers-reduced-motion: no-preference) {

    /* Перший екран: заголовок виїжджає рядками з-під маски, знімок повільно відступає */
    .hero2__h1 .rd-line > span { transform: translateY(110%); animation: rdLine 1s var(--rd-ease) forwards; }
    .hero2__h1 .rd-line:nth-child(1) > span { animation-delay: .15s; }
    .hero2__h1 .rd-line:nth-child(2) > span { animation-delay: .27s; }
    .hero2__h1 .rd-line:nth-child(3) > span { animation-delay: .39s; }
    .hero2__status { opacity: 0; animation: rdFade .8s ease .05s forwards; }
    .hero2__act    { opacity: 0; transform: translateY(18px); animation: rdRise .9s var(--rd-ease) .6s forwards; }
    .hero2__photo  { scale: 1.07; animation: rdSettle 2.6s cubic-bezier(.16, .6, .2, 1) forwards; }

    /* Знімок відстає від прокрутки. Окрема властивість translate, щоб не сперечатися зі scale. */
    @supports (animation-timeline: scroll()) {
        .hero2__photo {
            animation: rdSettle 2.6s cubic-bezier(.16, .6, .2, 1) forwards, rdDrift linear both;
            animation-timeline: auto, scroll(root);
            animation-range: normal, 0 100vh;
        }
    }

    .rd-marquee__track { animation: rdMarquee 70s linear infinite; }
    .rd-marquee:hover .rd-marquee__track { animation-play-state: paused; }

    .rd-pin::before { animation: rdPulse 2.4s ease-out infinite; }
    .rd-pin::after  { animation: rdPulse 2.4s ease-out 1.2s infinite; }

    /* Поява під час прокрутки. Клас .rd-js ставить скрипт: без нього все видно одразу. */
    .rd-js [data-rd] {
        opacity: 0; transform: translateY(28px);
        transition: opacity .8s ease, transform 1s var(--rd-ease);
        transition-delay: calc(var(--i, 0) * 90ms);
    }
    .rd-js [data-rd].is-in { opacity: 1; transform: none; }

    /* Шторка ріже ВМІСТ, а не сам блок: блок із нульовою видимою площею
       спостерігач перетину не помічає, і шторка не відкрилася б ніколи. */
    .rd-js [data-rd="clip"] { opacity: 1; transform: none; }
    .rd-js [data-rd="clip"] > * { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--rd-ease), transform 1.8s var(--rd-ease); }
    .rd-js [data-rd="clip"].is-in > * { clip-path: inset(0 0 0 0); }
    .rd-js [data-rd="clip"] img { transform: scale(1.14); }
    .rd-js [data-rd="clip"].is-in img { transform: none; }
}

@keyframes rdLine    { to { transform: none; } }
@keyframes rdFade    { to { opacity: 1; } }
@keyframes rdRise    { to { opacity: 1; transform: none; } }
@keyframes rdSettle  { to { scale: 1; } }
@keyframes rdDrift   { to { translate: 0 14%; } }
@keyframes rdMarquee { to { transform: translateX(-50%); } }
@keyframes rdPulse   { from { transform: scale(1); opacity: .4; } to { transform: scale(3.4); opacity: 0; } }

/* ================================================================
   ПЛАНШЕТ І ТЕЛЕФОН
   ================================================================ */

@media (max-width: 1100px) {
    .rd-dir__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rd-group__title { min-height: 0; }
    .rd-news__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rd-vr__grid { gap: 48px; }
}

@media (max-width: 800px) {
    .rd-wrap { padding: 0 20px; }
    .rd-head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 36px; }
    .rd-marquee { padding: 18px 0; }

    .rd-facts { padding: 56px 0 8px; }
    .rd-facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
    .rd-fact { padding-top: 16px; }
    .rd-fact__label { font-size: 14px; }

    .rd-dir { padding: 64px 0 16px; }
    .rd-dir__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .rd-group__title { margin: 18px 0 14px; }
    /* На дотику стрілка видна завжди: наведення тут немає */
    .rd-row__arrow { opacity: 1; transform: none; }
    .rd-row { padding-right: 30px; }
    .rd-row:hover .rd-row__meta { opacity: 1; }
    .rd-row:hover .rd-row__name { transform: none; }

    .rd-news { padding: 72px 0; }
    .rd-news__rail {
        display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
        margin: 0 -20px; padding: 0 20px 8px; scrollbar-width: none;
    }
    .rd-news__rail::-webkit-scrollbar { display: none; }
    .rd-card { flex: 0 0 76%; scroll-snap-align: start; }

    .rd-vr { padding: 72px 0 80px; }
    .rd-vr__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .rd-lead { font-size: 16px; }
    .rd-btn { width: 100%; }

    .rd-route { padding: 72px 0 80px; }
    .rd-route__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .rd-route__map { min-height: 300px; }
    .rd-way { gap: 16px; padding: 20px 0; }
    .rd-way h3 { font-size: 22px; }
    .rd-way--cta { margin-top: 0; padding-top: 28px; }

    .rd-outro { padding: 88px 0 72px; }
    .rd-outro__sub { font-size: 15px; }
}

/* ================================================================
   ПЕРШИЙ ЕКРАН НА КОМП'ЮТЕРІ, друга композиція (2026-11-11)
   Було: текст дрібним блоком у лівому верхньому куті, просто на фасаді,
   екран жорстко 620px. На широкому моніторі блок губився, а будівлю
   різало по середині. Стало: екран на всю висоту вікна, заголовок
   великий і стоїть унизу ліворуч, пошук унизу праворуч на тій самій лінії.
   Верх кадру (небо, дах, вивіска) чистий, затемнення тільки знизу.
   Телефон і планшет не зачеплені.
   ================================================================ */
@media (min-width: 1100px) {
    .hero2 { height: clamp(620px, 100svh, 940px); min-height: 620px; max-height: none; }
    .hero2__grid { grid-template-columns: minmax(0, 1fr); }
    .hero2__type {
        flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 56px;
        padding: 0 48px 56px;
        max-width: none;      /* у main.css стоїть 980px під стару ліву колонку */
    }
    .hero2__msg { max-width: none; }
    .hero2__status { font-size: 15.5px; margin: 0 0 22px; }
    .hero2__h1 { font-size: clamp(52px, min(5vw, 11vh), 92px); line-height: .98; max-width: none; }
    .rd-count { color: #D6CDC8; }      /* стоїть на фасаді, сірий тут губився */
    .hero2__act { margin: 0 0 10px; width: min(460px, 32vw); flex-shrink: 0; align-items: stretch; gap: 18px; }
    .hero2__search { max-width: none; width: 100%; }
    .hero2__link { align-self: flex-start; }

    /* Кадр піднято: внизу тепер текст, а показати треба дах і небо.
       Маска неба й підкладка мусять стояти так само, як фото, інакше хмари поїдуть по будівлі. */
    .hero2__photo, .hero2__skyfill { background-position: 52% 26%; }
    .hero2__sky { -webkit-mask-position: 52% 26%; mask-position: 52% 26%; }

    .hero2__photo::before {
        background:
            linear-gradient(0deg,
                rgba(26, 18, 22, .95) 0%,
                rgba(26, 18, 22, .86) 20%,
                rgba(26, 18, 22, .52) 42%,
                rgba(26, 18, 22, 0) 66%),
            linear-gradient(180deg, rgba(26, 18, 22, .5) 0%, rgba(26, 18, 22, 0) 20%);
    }
    .hero2__photo::after { content: none; }
}

/* ================================================================
   ГОЛОВНІ МАГАЗИНИ (2026-11-11): TA-DA!, Маркетопт, Sinsay, Portal VR
   Панелі у фірмових кольорах мереж з їхніми офіційними логотипами.
   Сітка «журналом»: широка і вузька картки, у другому ряду навпаки.
   ================================================================ */

.rd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.rd-anchors { background: var(--rd-light); padding: 104px 0 24px; }
.rd-anchors__lead {
    font-family: var(--h-ui); font-size: 17px; line-height: 1.55; color: var(--rd-ink2);
    max-width: 34ch; margin: 0 0 6px;
}
.rd-anchors__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px 32px; }
.rd-anchor { grid-column: span 5; min-width: 0; display: flex; flex-direction: column; }
.rd-anchor:nth-child(4n+1), .rd-anchor:nth-child(4n+4) { grid-column: span 7; }

/* ---------- панель з логотипом ---------- */
.rd-anchor__panel {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; align-items: center; justify-content: center;
    height: clamp(240px, 24vw, 360px);
    border-radius: 4px;
    background: var(--a-bg, #EDE8E2);
}
/* М'яке світло фірмового кольору, що повільно дихає */
.rd-anchor__panel::before {
    content: ""; position: absolute; z-index: -1;
    width: 70%; aspect-ratio: 1; right: -12%; top: -30%;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--a-glow, transparent), transparent);
}
.rd-anchor__logo {
    position: relative; display: block;
    width: var(--a-lw, 56%); height: auto; max-height: 46%;
    object-fit: contain;
    transition: transform .6s var(--rd-ease);
}
.rd-anchor__slogan {
    position: absolute; left: 24px; bottom: 20px;
    font-family: var(--h-display); font-style: italic; font-size: 17px;
    color: var(--a-ink, var(--rd-ink));
}
.rd-anchor__photo {
    position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.2s var(--rd-ease);
}

.rd-anchor--tada      { --a-bg: #FFDD00; --a-glow: rgba(255, 255, 255, .55); --a-lw: 52%; --a-ink: #1A1919; }
.rd-anchor--marketopt { --a-bg: #FFFFFF; --a-glow: rgba(248, 200, 0, .38);   --a-lw: 66%; --a-ink: #0098E0; }
.rd-anchor--sinsay    { --a-bg: #F9DCEB; --a-glow: rgba(255, 255, 255, .7);  --a-lw: 42%; --a-ink: #16181D; }
.rd-anchor--vr        { --a-bg: #0D0A0C; --a-glow: rgba(255, 0, 51, .35);    --a-lw: 62%; --a-ink: #F2EEEA; }
.rd-anchor--marketopt .rd-anchor__panel { box-shadow: inset 0 0 0 1px var(--rd-line); }
.rd-anchor--sinsay .rd-anchor__logo { max-height: 40%; }
/* Знімок клубу темніший, щоб білий логотип читався */
.rd-anchor--vr .rd-anchor__panel::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(13, 10, 12, .55), rgba(13, 10, 12, .72));
}

.rd-anchor__panel:hover .rd-anchor__logo { transform: scale(1.04); }
.rd-anchor__panel:hover .rd-anchor__photo { transform: scale(1.05); }

/* ---------- текст під панеллю ---------- */
.rd-anchor__body { padding: 24px 0 0; font-family: var(--h-ui); display: flex; flex-direction: column; flex: 1; }
.rd-anchor__kind { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--rd-terra2); margin: 0; }
.rd-anchor__name {
    font-family: var(--h-display); font-weight: 600;
    font-size: clamp(28px, 2.6vw, 38px); line-height: 1.08; letter-spacing: -.015em;
    margin: 4px 0 -3px;
}
.rd-anchor__name a { color: var(--rd-ink); display: inline-flex; align-items: center; min-height: 48px; }   /* площа дотику: було 42px */
.rd-anchor__name a:hover { color: var(--rd-terra); }
.rd-anchor__stat { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 16px 0 0; }
.rd-anchor__stat strong {
    font-family: var(--h-display); font-weight: 500;
    font-size: clamp(30px, 2.8vw, 42px); line-height: 1; letter-spacing: -.02em; color: var(--rd-terra);
    font-variant-numeric: lining-nums;
}
.rd-anchor__stat span { font-size: 14.5px; color: var(--rd-ink2); }
.rd-anchor__text { font-size: 16px; line-height: 1.6; color: var(--rd-ink2); margin: 14px 0 0; max-width: 52ch; }
.rd-anchor__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
    margin-top: auto; padding-top: 20px;
}
.rd-anchor__hours { font-size: 14.5px; color: var(--rd-ink); }
.rd-anchor__hours::before {
    content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--rd-terra); margin-right: 9px; vertical-align: 2px;
}
.rd-anchor__more {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
    font-size: 15.5px; font-weight: 500; color: var(--rd-ink);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
}
.rd-anchor__more { margin-left: auto; }
.rd-anchor__more:hover { color: var(--rd-terra); }
.rd-anchor__more:focus-visible, .rd-anchor__name a:focus-visible { outline: 2px solid var(--h-link); outline-offset: 3px; }

/* ---------- рух ---------- */
@media (prefers-reduced-motion: no-preference) {
    .rd-anchor__panel::before { animation: rdGlow 7s ease-in-out infinite alternate; }
    .rd-anchor:nth-child(2) .rd-anchor__panel::before { animation-delay: -2s; }
    .rd-anchor:nth-child(3) .rd-anchor__panel::before { animation-delay: -4s; }
    .rd-anchor:nth-child(4) .rd-anchor__panel::before { animation-delay: -5.5s; }

    /* Колір панелі розкривається знизу вгору, логотип підіймається слідом */
    .rd-js .rd-anchor .rd-anchor__panel { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--rd-ease); transition-delay: calc(var(--i, 0) * 90ms); }
    .rd-js .rd-anchor.is-in .rd-anchor__panel { clip-path: inset(0 0 0 0); }
    .rd-js .rd-anchor .rd-anchor__logo { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform 1s var(--rd-ease); transition-delay: calc(var(--i, 0) * 90ms + .45s); }
    .rd-js .rd-anchor.is-in .rd-anchor__logo { opacity: 1; transform: none; }
    .rd-js .rd-anchor.is-in .rd-anchor__panel:hover .rd-anchor__logo { transform: scale(1.04); transition-delay: 0s; }
}
@keyframes rdGlow { from { transform: translate(0, 0) scale(1); } to { transform: translate(-18%, 14%) scale(1.15); } }

@media (max-width: 1100px) {
    .rd-anchors__grid { gap: 48px 24px; }
}
@media (max-width: 800px) {
    .rd-anchors { padding: 72px 0 8px; }
    .rd-anchors__lead { font-size: 16px; }
    .rd-anchors__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
    .rd-anchor, .rd-anchor:nth-child(4n+1), .rd-anchor:nth-child(4n+4) { grid-column: auto; }
    .rd-anchor__panel { height: 200px; }
    .rd-anchor__slogan { font-size: 15px; left: 16px; bottom: 14px; }
    .rd-anchor__body { padding-top: 18px; }
    .rd-anchor__text { font-size: 15.5px; }
}

/* ================================================================
   ЗНАК ПО ЦЕНТРУ (2026-11-11). Власник: «логотип зовсім не видно,
   має бути на видному місці, крупніше й по центру».
   Шапка головної стає світлою смугою кольору паперу, знак великий посередині.
   Чому світла смуга: літери знака темно-коричневі. На фото неба (як було)
   вони губилися, на темному їх тримає лише тонка обводка. HERO_LOCK вимагає
   під знаком рівне тло без фото, це тут виконано.
   Файл знака не змінювався (logo.png, md5 dcb0f835…), міняється лише розмір показу.
   Фото першого екрана починається під смугою, щоб небо не ховалося.
   Після прокрутки (.rd-compact, ставить rd.js) смуга стискається.
   ================================================================ */
body.page-home .header--hero.header,
body.page-home .header--hero.header:not(.scrolled),
body.page-home .header--hero.header.scrolled {
    background: var(--rd-light);
    border-bottom: 1px solid rgba(26, 18, 22, .10);
    box-shadow: none;
}
body.page-home .header--hero.header.rd-compact { box-shadow: 0 8px 28px rgba(26, 18, 22, .08); }
body.page-home .header--hero.header .header__inner { position: relative; }
body.page-home .header--hero.header .header__logo {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    align-items: center; gap: 10px; min-height: 0;
}
body.page-home .header--hero.header .header__logo-city {
    align-self: center; text-align: center; padding-left: .42em;
    font-size: 11px; letter-spacing: .42em; white-space: nowrap;
    color: var(--rd-ink2);
}
body.page-home .header--hero.header.rd-compact .header__logo-city { display: none; }
body.page-home .header--hero.header .burger { margin-left: auto; border-color: rgba(26, 18, 22, .24); }
body.page-home .header--hero.header .burger span { background: var(--rd-ink); }

@media (min-width: 769px) {
    body.page-home .header--hero.header .header__link { color: var(--rd-ink); }
    body.page-home .header--hero.header .header__link:hover { color: var(--rd-terra); }
    body.page-home .header--hero.header .header__link:hover::after { background: var(--rd-terra); }
    body.page-home .header--hero.header .header__link.active { color: var(--rd-ink); }
    body.page-home .header--hero.header .header__link.active::after { background: var(--rd-terra); }
    body.page-home .header--hero.header .header__cta { color: var(--rd-ink); border-color: rgba(26, 18, 22, .3); background: transparent; }
    body.page-home .header--hero.header .header__cta:hover { color: var(--rd-terra); border-color: var(--rd-terra); background: transparent; }
}

/* Широкий екран: знак посередині, меню по боках */
@media (min-width: 1100px) {
    body.page-home .header--hero.header { height: 148px; }
    body.page-home .header--hero.header .header__inner { padding: 0 48px; align-items: center; }
    body.page-home .header--hero.header .header__logo-img { height: 80px; }
    body.page-home .header--hero.header .header__nav { flex: 1; }
    body.page-home .header--hero.header .header__link:nth-child(3) { margin-right: auto; }
    body.page-home .header--hero.header.rd-compact { height: 76px; }
    body.page-home .header--hero.header.rd-compact .header__inner { padding: 0 48px; }
    body.page-home .header--hero.header.rd-compact .header__logo-img { height: 44px; }
    .page-home .hero2 { padding-top: 148px; }
    .page-home .hero2__photo { top: 148px; }
    /* Верхнє затемнення було потрібне прозорій шапці. Тепер лишається легка тінь під смугою. */
    .page-home .hero2__photo::before {
        background:
            linear-gradient(0deg,
                rgba(26, 18, 22, .95) 0%,
                rgba(26, 18, 22, .86) 20%,
                rgba(26, 18, 22, .52) 42%,
                rgba(26, 18, 22, 0) 66%),
            linear-gradient(180deg, rgba(26, 18, 22, .22) 0%, rgba(26, 18, 22, 0) 9%);
    }
}

/* Планшет: по боках меню не вміщається, тому знак угорі, меню рядком під ним.
   Після прокрутки звичайна розкладка: знак ліворуч, меню праворуч. */
@media (min-width: 769px) and (max-width: 1099px) {
    body.page-home .header--hero.header { height: 168px; }
    body.page-home .header--hero.header .header__inner { padding: 0 24px 6px; align-items: flex-end; justify-content: center; }
    body.page-home .header--hero.header .header__logo { top: 18px; transform: translateX(-50%); }
    body.page-home .header--hero.header .header__logo-img { height: 64px; }
    body.page-home .header--hero.header.rd-compact { height: 72px; }
    body.page-home .header--hero.header.rd-compact .header__inner { padding: 0 24px; align-items: center; justify-content: space-between; }
    body.page-home .header--hero.header.rd-compact .header__logo { position: static; transform: none; }
    body.page-home .header--hero.header.rd-compact .header__logo-img { height: 40px; }
    .page-home .hero2 { padding-top: 168px; height: 668px; min-height: 668px; }   /* було 580 з шапкою 80 */
    .page-home .hero2__photo { top: 168px; }
}

/* Телефон: знак по центру, кнопка меню праворуч. 156px = місце під кнопку з обох боків,
   щоб знак лишався рівно посередині й не заходив під неї на вузьких екранах. */
@media (max-width: 768px) {
    body.page-home .header--hero.header { height: 108px; }
    body.page-home .header--hero.header .header__inner { padding: 0 20px; align-items: center; }
    body.page-home .header--hero.header .header__logo { gap: 7px; }
    body.page-home .header--hero.header .header__logo-img { height: auto; width: min(214px, calc(100vw - 156px)); }
    body.page-home .header--hero.header .header__logo-city { font-size: 11px; letter-spacing: .1em; padding-left: .1em; }   /* 11px: межа читабельності на телефоні */
    body.page-home .header--hero.header.rd-compact { height: 64px; }
    body.page-home .header--hero.header.rd-compact .header__logo-img { width: min(150px, calc(100vw - 156px)); }
    .page-home .hero2 { padding-top: 108px; }
    .page-home .hero2__photo { top: 108px; }
}
@media (max-width: 360px) {
    body.page-home .header--hero.header .header__logo-city { letter-spacing: 0; padding-left: 0; }
}

@media (prefers-reduced-motion: no-preference) {
    body.page-home .header--hero.header .header__logo { animation: rdMast .8s var(--rd-ease) both; }
    body.page-home .header--hero.header { transition: height .4s var(--rd-ease), box-shadow .3s ease; }
    body.page-home .header--hero.header .header__logo-img { transition: height .4s var(--rd-ease), width .4s var(--rd-ease); }
}
@keyframes rdMast { from { opacity: 0; scale: .96; } to { opacity: 1; scale: 1; } }