/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(420px, 38vw, 560px);
    overflow: hidden;
    color: var(--color-on-primary);
    background: var(--color-primary);
    isolation: isolate;
}

.hero__slides { position: absolute; inset: 0; z-index: -2; }

.hero__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1.4s ease, transform 9s ease-out;
}
.hero__slide--active { opacity: 1; transform: none; }

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(20, 18, 15, .28) 0%, rgba(20, 18, 15, .5) 100%);
}

.hero__inner { text-align: center; }

.hero__title { display: grid; justify-items: center; gap: var(--space-5); }
.hero__cta { margin-top: var(--space-6); }
/* Прозора кнопка з рамкою в колір тексту hero */
.hero__cta.btn--light { color: inherit; background: transparent; border-color: currentColor; }
.hero__cta.btn--light:hover { color: var(--color-on-primary); background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: .32em;
    text-transform: uppercase;
}
.hero__eyebrow::before,
.hero__eyebrow::after { content: ''; width: 36px; height: 1px; background: currentColor; opacity: .75; }

.hero__text {
    max-width: 18ch;
    font-size: var(--fs-h1);
    font-weight: var(--fw-light);
    line-height: 1.12;
    letter-spacing: var(--ls-heading);
    text-wrap: balance;
}

/* ── Про нас ────────────────────────────────────────────────────────────── */
.about__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    gap: var(--space-9);
    align-items: center;
}

.about__title { margin-bottom: var(--space-5); }

.about__text { max-width: 60ch; }
.about__lead { font-size: var(--fs-lg); line-height: 1.55; color: var(--color-heading); }

.about__more { display: none; }

.about__media { position: relative; isolation: isolate; }
.about__media::before {
    content: '';
    position: absolute;
    inset: var(--space-5) calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-5);
    z-index: -1;
    background: var(--color-bg-warm);
    border-radius: var(--radius);
}
.about__img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }

/* ── Категорії ──────────────────────────────────────────────────────────── */
.categories__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-7) var(--space-6);
}

.category-tile { display: block; }

.category-tile__media {
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--color-bg-warm);
    border-radius: var(--radius);
}
.category-tile__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2, .6, .2, 1);
}
.category-tile:hover .category-tile__img { transform: scale(1.05); }

.category-tile__title {
    margin-top: var(--space-4);
    font-size: var(--fs-lg);
    font-weight: var(--fw-regular);
    text-align: center;
    color: var(--color-heading);
    transition: color var(--transition);
}
.category-tile__name { position: relative; display: inline-block; }
.category-tile__name::after {
    content: '→' / '';
    position: absolute;
    left: 100%;
    margin-left: var(--space-2);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity var(--transition), transform var(--transition);
}
.category-tile:hover .category-tile__title { color: var(--color-accent); }
.category-tile:hover .category-tile__name::after { opacity: 1; transform: none; }

/* ── Відгуки ────────────────────────────────────────────────────────────── */
.review-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    height: 100%;
    padding: var(--space-7);
    background: var(--color-bg);
    border-radius: var(--radius);
}

.review-card__mark { color: var(--color-accent-soft); }

.review-card__quote { flex: 1; }
.review-card__text { font-size: var(--fs-lg); line-height: 1.6; color: var(--color-heading); }

.review-card__author {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: 'avatar name' 'avatar role';
    column-gap: var(--space-4);
    align-items: center;
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}
.review-card__avatar {
    grid-area: avatar;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-weight: var(--fw-medium);
    color: var(--color-heading);
    background: var(--color-bg-warm);
    border-radius: 50%;
}
.review-card__name { grid-area: name; font-weight: var(--fw-medium); color: var(--color-heading); }
.review-card__role { grid-area: role; font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-muted); }

/* ── Чому CHYSTOTIL ─────────────────────────────────────────────────────── */
.facts {
    color: var(--color-on-primary);
    background: var(--color-primary);
}

.facts__head { margin-bottom: var(--space-7); text-align: center; }
.facts__title { font-size: var(--fs-h2); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--ls-heading); }

.facts__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.facts__item {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-6);
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, .16);
}
.facts__item:first-child { border-left: 0; }

.facts__value {
    font-size: clamp(2.75rem, 2rem + 2.6vw, 4rem);
    font-weight: var(--fw-light);
    line-height: 1;
    letter-spacing: -.04em;
}

.facts__label {
    max-width: 22ch;
    margin: 0 auto;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: rgba(255, 255, 255, .75);
}

/* ── Часті запитання ────────────────────────────────────────────────────── */
.faq__inner {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-9);
    align-items: start;
}

.faq__head { position: sticky; top: calc(var(--header-offset, var(--header-height)) + var(--space-5)); }
.faq__intro { max-width: 36ch; margin-top: var(--space-4); }
.faq__more { margin-top: var(--space-5); }


/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .about__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
    .about { overflow: hidden; }
    .about__media { max-width: 560px; margin-inline: auto; width: 100%; }
    .about__media::before { inset: var(--space-4) calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-4); }
    .categories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
    .facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-6); }
    .facts__item { padding-inline: var(--space-4); }
    .facts__item:nth-child(odd) { border-left: 0; }
    .facts__item:nth-child(n + 3) { padding-top: var(--space-6); border-top: 1px solid rgba(255, 255, 255, .16); }
    .facts__item:nth-child(3) { border-left: 0; }
    .faq__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
    .faq__head { position: static; }
    .faq__intro { max-width: 56ch; }
}

@media (max-width: 767px) {
    .hero { min-height: 380px; }
    .hero__eyebrow { gap: var(--space-3); font-size: var(--fs-xs); letter-spacing: .24em; }
    .hero__eyebrow::before,
    .hero__eyebrow::after { width: 20px; }
    .hero__text { max-width: 16ch; }
    .categories__grid { gap: var(--space-5) var(--space-3); }
    .category-tile__title { margin-top: var(--space-3); font-size: var(--fs-base); }
    .category-tile__media { aspect-ratio: 4 / 3; }
    .review-card { padding: var(--space-6) var(--space-5); gap: var(--space-4); }
    .review-card__text { font-size: var(--fs-base); }
    .facts__value { font-size: clamp(2rem, 9vw, 2.75rem); }
    .facts__label { font-size: var(--fs-xs); }
    .facts__item { padding-inline: var(--space-3); }
}

@media (max-width: 767px) {
    .instagram .sbi_load_btn,
    .instagram .sbi_follow_btn a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Мобільний: у блоці «Про нас» лишається перший абзац, решту розгортає кнопка «Більше / Менше» */
@media (max-width: 767px) {
    .about__text:not(.is-open) > :not(.about__lead) { display: none; }
    .about__more { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; margin-top: var(--space-3); padding: 0; font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-heading); background: none; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; cursor: pointer; transition: color var(--transition); }
    .about__more:hover { color: var(--color-accent); }
}

/* ── Клуб CHYSTOTIL ─────────────────────────────────────────────────────── */
.home-club__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-9); align-items: center; }
.home-club__title { margin-bottom: var(--space-4); }
.home-club__text { max-width: 52ch; font-size: var(--fs-lg); line-height: 1.6; }
.home-club__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.home-club .club-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1023px) {
    .home-club__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}
@media (max-width: 767px) {
    .home-club__text { font-size: var(--fs-base); }
    .home-club__actions .btn { flex: 1 1 100%; }
}