/* ============================================================
   Главная по макету «Homepage»: карточки на сером поле.
   Та же система, что у каталога специалистов (specialist-catalog.css)
   и страницы специалиста: белые карточки со скруглением, оранжевый акцент,
   Playfair в крупных заголовках.

   Стили ограничены классом .hc — шапка и подвал сайта остаются прежними.
   Шрифты берём уже подключённые: в макете Manrope, но тянуть третье
   семейство с Google Fonts ради одной страницы значит платить лишним
   запросом и прыжком вёрстки при загрузке.
   ============================================================ */
.hc {
    --hc-bg: #f4f6f9;
    --hc-card: #fff;
    --hc-ink: #14181f;
    --hc-text: #3b4351;
    --hc-body: #5c6573;
    --hc-muted: #8a93a1;
    --hc-faint: #98a1ae;
    --hc-line: #eceff3;
    --hc-border: #e3e7ed;
    --hc-accent: #f0602b;
    --hc-accent-dark: #d9491c;
    --hc-accent-soft: #fdeae0;
    --hc-shadow: 0 2px 24px rgba(24, 34, 51, .06);
    --hc-shadow-hover: 0 6px 30px rgba(24, 34, 51, .11);

    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 24px 80px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    background: var(--hc-bg);
    color: var(--hc-ink);
}
/* Поле страницы шире контейнера: карточки должны лежать на сером. */
.hc::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    z-index: -1;
    height: 100%;
    background: var(--hc-bg);
}
.hc a { color: var(--hc-accent); text-decoration: none; }
.hc a:hover { color: var(--hc-accent-dark); }

.hc-card {
    background: var(--hc-card);
    border-radius: 28px;
    box-shadow: var(--hc-shadow);
}

/* Плашка предпросмотра для сотрудников */
.hc-preview {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
    background: #fff5ed; border: 1px solid #f7d3bf; border-radius: 16px;
    padding: 14px 20px; font-size: 14.5px; color: #8a4a28;
}
.hc-preview b { color: var(--hc-accent-dark); }
.hc .hc-preview a { font-weight: 700; white-space: nowrap; }

/* Общие заголовки секций */
.hc-head {
    display: flex; flex-wrap: wrap; gap: 16px;
    align-items: baseline; justify-content: space-between; margin-bottom: 20px;
}
.hc-head--end { align-items: end; }
.hc-h2 {
    color: var(--hc-ink);
    font-size: 36px; font-weight: 800; letter-spacing: -.025em; margin: 0;
}
.hc-head__lead {
    font-size: 18px; line-height: 1.6; color: var(--hc-body);
    margin: 10px 0 0; max-width: 64ch; text-wrap: pretty;
}
.hc .hc-more { font-size: 15px; font-weight: 700; white-space: nowrap; }

/* Кнопки */
.hc-btn {
    display: inline-block; border-radius: 14px; font-weight: 700; cursor: pointer;
    text-align: center; border: none;
}
.hc .hc-btn--primary { background: var(--hc-accent); color: #fff; font-size: 17px; padding: 18px 34px; }
.hc .hc-btn--primary:hover { background: var(--hc-accent-dark); color: #fff; }
.hc .hc-btn--ghost {
    border: 1.5px solid var(--hc-border); color: var(--hc-ink);
    font-size: 17px; padding: 16.5px 28px; background: none;
}
.hc .hc-btn--ghost:hover { border-color: var(--hc-ink); color: var(--hc-ink); }
.hc .hc-btn--dark {
    background: var(--hc-ink); color: #fff; font-size: 16px; padding: 15px 28px; border-radius: 13px;
}
.hc .hc-btn--dark:hover { background: #000; color: #fff; }

/* ── Герой ─────────────────────────────────────────────────── */
.hc-hero {
    padding: 48px;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    gap: 44px; align-items: center;
}
.hc-hero--single { grid-template-columns: minmax(0, 1fr); }
.hc-hero__badge {
    display: inline-block; background: var(--hc-accent-soft); color: var(--hc-accent-dark);
    font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 999px;
}
.hc-hero__title {
    color: var(--hc-ink);
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700; font-size: 62px; line-height: 1.03; letter-spacing: -.025em;
    margin: 24px 0 18px;
}
.hc-hero__desc {
    font-size: 20px; line-height: 1.6; color: var(--hc-body);
    margin: 0 0 30px; max-width: 48ch; text-wrap: pretty;
}
.hc-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hc-hero__stats {
    display: flex; flex-wrap: wrap; gap: 34px;
    margin-top: 38px; padding-top: 28px; border-top: 1px solid var(--hc-line);
}
.hc-hero__num { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.hc-hero__label { font-size: 14px; font-weight: 600; color: var(--hc-muted); }
.hc-hero__media { border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--hc-bg); }
.hc-hero__media img, .hc-hero__media picture {
    display: block; width: 100%; height: 100%; object-fit: cover;
}

/* ── Запросы: плитки с фото ────────────────────────────────── */
.hc-grid { display: grid; gap: 16px; }
.hc-tiles {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 300px; gap: 16px;
}
.hc-tile {
    position: relative; overflow: hidden; border-radius: 26px;
    /* Тёмная подложка: пока картинка грузится, белый текст должен читаться. */
    background: #2a313c; box-shadow: 0 2px 24px rgba(24, 34, 51, .08);
    transition: transform .25s ease, box-shadow .25s ease;
}
.hc a.hc-tile { color: #fff; }
.hc a.hc-tile:hover { color: #fff; }
.hc-tile__media { position: absolute; inset: 0; }
.hc-tile__media img, .hc-tile__media picture {
    display: block; width: 100%; height: 100%; object-fit: cover;
}
/* Градиент, из-за которого читается текст на любой фотографии. */
.hc-tile__veil {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(12, 16, 22, 0) 30%,
                rgba(12, 16, 22, .55) 62%, rgba(12, 16, 22, .88) 100%);
}
.hc-tile__kicker {
    position: absolute; top: 18px; left: 18px; pointer-events: none;
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); color: var(--hc-ink);
    font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    padding: 7px 12px; border-radius: 999px;
}
.hc-tile__go {
    position: absolute; top: 14px; right: 14px; pointer-events: none;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--hc-accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; line-height: 1;
    transition: background .2s, color .2s;
}
.hc-tile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; pointer-events: none; }
.hc-tile__title {
    margin: 0 0 8px; color: #fff; font-size: 22px; font-weight: 800;
    line-height: 1.18; letter-spacing: -.02em; text-wrap: balance;
}
.hc-tile__sub { display: block; color: #e4e8ee; font-size: 15px; line-height: 1.5; text-wrap: pretty; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .hc a.hc-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(24, 34, 51, .18); }
}
@media (hover: hover) {
    .hc a.hc-tile:hover .hc-tile__go { background: #fff; color: var(--hc-accent); }
}

/* Последняя плитка — вход в раздел видов коучинга */
.hc-tile--more {
    background: var(--hc-ink); padding: 26px;
    display: flex; flex-direction: column; justify-content: space-between;
}
.hc-tile__more-kicker {
    font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: #f0a184;
}
.hc-tile__more-title {
    display: block; font-size: 24px; font-weight: 800; line-height: 1.2;
    letter-spacing: -.02em; margin-bottom: 10px;
}
.hc-tile__more-text { display: block; font-size: 15px; line-height: 1.5; color: #b4bcc8; margin-bottom: 18px; }
.hc-tile__more-cta {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 15.5px; font-weight: 700; color: var(--hc-accent);
}
.hc-tile__go--inline {
    position: static; width: 36px; height: 36px; font-size: 17px;
}

/* ── Как работает сервис ───────────────────────────────────── */
.hc-steps { padding: 44px; }
.hc-steps__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.hc-step__media {
    display: block; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 11;
    background: #fdf3ee; margin-bottom: 20px;
}
.hc-step__media img, .hc-step__media picture {
    display: block; width: 100%; height: 100%; object-fit: cover;
}
.hc-step__num {
    display: inline-block; font-size: 13px; font-weight: 800; color: var(--hc-accent);
    letter-spacing: .08em; margin-bottom: 8px;
}
.hc-step__title {
    color: var(--hc-ink);
    font-size: 22px; font-weight: 800; margin: 0 0 10px; letter-spacing: -.01em;
}
.hc-step__text { font-size: 16.5px; line-height: 1.6; color: var(--hc-body); margin: 0; }

/* ── Рубрики (новости, статьи) ─────────────────────────────── */
.hc-rubrics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.hc-rubric {
    border: 1px solid var(--hc-border); background: var(--hc-card);
    border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 600;
}
.hc a.hc-rubric { color: var(--hc-body); }
.hc a.hc-rubric:hover { border-color: var(--hc-accent); color: var(--hc-accent); }
.hc a.hc-rubric--on, .hc a.hc-rubric--on:hover {
    background: var(--hc-ink); border-color: var(--hc-ink); color: #fff;
}

/* ── Карточки новостей (без обложки) ───────────────────────── */
.hc-grid--news { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.hc-news {
    background: var(--hc-card); border-radius: 22px; padding: 24px; box-shadow: var(--hc-shadow);
    display: flex; flex-direction: column; gap: 10px; transition: box-shadow .16s;
}
.hc a.hc-news { color: var(--hc-ink); }
.hc a.hc-news:hover { color: var(--hc-ink); box-shadow: var(--hc-shadow-hover); }
.hc-kicker {
    font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--hc-accent);
}
.hc-news__title { font-size: 19px; font-weight: 700; line-height: 1.38; letter-spacing: -.01em; }
.hc-news__lead { font-size: 15.5px; line-height: 1.55; color: var(--hc-body); }
.hc-meta { margin-top: auto; padding-top: 14px; font-size: 13.5px; color: var(--hc-faint); font-weight: 600; }

/* ── Главная статья ────────────────────────────────────────── */
.hc-featured {
    overflow: hidden;
    display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); align-items: stretch;
}
.hc-featured__media { background: var(--hc-bg); min-height: 320px; }
.hc-featured__media img, .hc-featured__media picture {
    display: block; width: 100%; height: 100%; object-fit: cover;
}
.hc-featured__body { padding: 44px; display: flex; flex-direction: column; justify-content: center; }
.hc-featured__title {
    color: var(--hc-ink);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 34px; font-weight: 700; line-height: 1.18; letter-spacing: -.015em;
    margin: 14px 0;
}
.hc .hc-featured__title a { color: var(--hc-ink); }
.hc .hc-featured__title a:hover { color: var(--hc-accent); }
.hc-featured__lead {
    font-size: 17.5px; line-height: 1.6; color: var(--hc-body);
    margin: 0 0 24px; max-width: 52ch; text-wrap: pretty;
}
.hc-featured__foot { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.hc-featured__meta { font-size: 14.5px; color: var(--hc-faint); font-weight: 600; }

/* ── Карточки статей (с обложкой) ──────────────────────────── */
.hc-grid--articles { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.hc-article {
    background: var(--hc-card); border-radius: 22px; box-shadow: var(--hc-shadow);
    display: flex; flex-direction: column; overflow: hidden; transition: box-shadow .16s;
}
.hc a.hc-article { color: var(--hc-ink); }
.hc a.hc-article:hover { color: var(--hc-ink); box-shadow: var(--hc-shadow-hover); }
.hc-article__media { aspect-ratio: 16 / 10; background: var(--hc-bg); }
.hc-article__media img, .hc-article__media picture {
    display: block; width: 100%; height: 100%; object-fit: cover;
}
.hc-article__body { padding: 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.hc-article__title { font-size: 19px; font-weight: 700; line-height: 1.38; letter-spacing: -.01em; }
.hc-article__lead { font-size: 15.5px; line-height: 1.55; color: var(--hc-body); }

/* ── Мероприятия и тесты ───────────────────────────────────── */
.hc-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.hc-panel { padding: 36px; }
.hc-panel__head {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between;
    margin-bottom: 22px;
}
.hc-h3 { color: var(--hc-ink); font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.hc-event {
    display: block; border: 1px solid var(--hc-line); border-radius: 20px; padding: 22px;
}
.hc a.hc-event { color: var(--hc-ink); }
.hc a.hc-event:hover { border-color: #d8dee6; color: var(--hc-ink); }
.hc-event__tag {
    display: inline-block; background: #e4f5ec; color: #1d7a4c;
    font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    padding: 6px 12px; border-radius: 8px;
}
.hc-event__date { display: block; font-size: 14px; font-weight: 700; color: var(--hc-muted); margin: 14px 0 8px; }
.hc-event__title {
    display: block; font-size: 21px; font-weight: 800; line-height: 1.3;
    letter-spacing: -.01em; margin-bottom: 10px;
}
.hc-event__text { display: block; font-size: 16px; line-height: 1.55; color: var(--hc-body); }
.hc-event__price { display: block; margin-top: 16px; font-size: 14.5px; font-weight: 700; color: var(--hc-accent); }
.hc-quizzes { display: grid; gap: 12px; }
.hc-quiz { display: block; border: 1px solid var(--hc-line); border-radius: 18px; padding: 20px; }
.hc a.hc-quiz { color: var(--hc-ink); }
.hc a.hc-quiz:hover { background: #f8fafc; color: var(--hc-ink); }
.hc-quiz__kicker {
    display: block; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--hc-muted); margin-bottom: 8px;
}
.hc-quiz__title { display: block; font-size: 18.5px; font-weight: 700; line-height: 1.35; margin-bottom: 8px; }
.hc-quiz__meta { display: block; font-size: 14px; color: var(--hc-faint); font-weight: 600; }

/* ── Курсы ─────────────────────────────────────────────────── */
.hc-grid--courses { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.hc-course {
    background: var(--hc-card); border-radius: 22px; box-shadow: var(--hc-shadow);
    overflow: hidden; display: flex; flex-direction: column;
}
.hc-course__media { position: relative; aspect-ratio: 16 / 9; background: var(--hc-bg); }
.hc-course__media img, .hc-course__media picture {
    display: block; width: 100%; height: 100%; object-fit: cover;
}
.hc-course__badge {
    position: absolute; top: 14px; left: 14px;
    background: var(--hc-accent); color: #fff; font-size: 13px; font-weight: 800;
    padding: 6px 12px; border-radius: 8px;
}
.hc-course__body { padding: 22px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.hc-course__title { font-size: 19px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.hc .hc-course__title a { color: var(--hc-ink); }
.hc .hc-course__title a:hover { color: var(--hc-accent); }
.hc-course__meta { font-size: 14.5px; color: var(--hc-muted); font-weight: 600; }
.hc-course__doc { font-size: 15px; line-height: 1.5; color: var(--hc-body); }
.hc-course__foot {
    margin-top: auto; padding-top: 18px;
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
}
.hc-course__old { display: block; font-size: 13.5px; color: var(--hc-faint); text-decoration: line-through; }
.hc-course__price { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.hc .hc-course__btn {
    background: var(--hc-accent); color: #fff; font-size: 15px; font-weight: 700;
    padding: 13px 22px; border-radius: 12px;
}
.hc .hc-course__btn:hover { background: var(--hc-accent-dark); color: #fff; }

/* ── Семья проектов ────────────────────────────────────────── */
.hc-partners { background: var(--hc-ink); border-radius: 28px; padding: 48px; color: #fff; }
.hc-partners__eyebrow {
    display: inline-block; background: #262c38; color: #f0a184;
    font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    padding: 7px 14px; border-radius: 999px;
}
.hc-partners__title {
    color: #fff;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 40px; font-weight: 700; letter-spacing: -.015em; margin: 20px 0 12px;
}
.hc-partners__lead {
    font-size: 18px; line-height: 1.6; color: #b4bcc8; margin: 0 0 34px;
    max-width: 56ch; text-wrap: pretty;
}
.hc-partners__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.hc-partner {
    background: #1c222c; border: 1px solid #2c3340; border-radius: 22px; padding: 28px;
    display: flex; flex-direction: column; gap: 14px;
}
.hc .hc-partner { color: #fff; }
.hc .hc-partner:hover { border-color: var(--hc-accent); color: #fff; }
.hc-partner__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hc-partner__name {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 27px; font-weight: 700; letter-spacing: -.01em;
}
.hc-partner__domain { font-size: 13px; font-weight: 700; color: var(--hc-muted); }
.hc-partner__kicker {
    font-size: 13.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #f0a184;
}
.hc-partner__desc { font-size: 16.5px; line-height: 1.6; color: #b4bcc8; }
.hc-partner__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hc-partner__tags li {
    border: 1px solid #333a47; border-radius: 999px; padding: 7px 13px;
    font-size: 13px; font-weight: 600; color: #dce1e8;
}
.hc-partner__cta { margin-top: auto; padding-top: 18px; font-size: 15.5px; font-weight: 700; color: var(--hc-accent); }
.hc-partner--self { opacity: .72; }

/* ── FAQ ───────────────────────────────────────────────────── */
.hc-faq { padding: 48px; }
.hc-faq__head { text-align: center; margin-bottom: 34px; }
.hc-faq__eyebrow {
    display: inline-block; background: var(--hc-bg); color: var(--hc-body);
    font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 999px;
}
.hc-faq__head .hc-h2 { margin-top: 20px; }
.hc-faq__list { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.hc-faq__item { border: 1px solid var(--hc-line); border-radius: 18px; overflow: hidden; background: #fff; }
.hc-faq__item[open] { background: #f8fafc; }
.hc-faq__q {
    width: 100%; cursor: pointer; list-style: none;
    padding: 22px 24px; display: flex; gap: 18px; align-items: center; justify-content: space-between;
    font-size: 18.5px; font-weight: 700; line-height: 1.4; color: var(--hc-ink);
}
.hc-faq__q::-webkit-details-marker { display: none; }
.hc-faq__sign { font-size: 22px; font-weight: 700; color: var(--hc-accent); line-height: 1; }
.hc-faq__item[open] .hc-faq__sign::before { content: '–'; }
.hc-faq__item:not([open]) .hc-faq__sign::before { content: '+'; }
.hc-faq__a {
    margin: 0; padding: 0 24px 24px;
    font-size: 16.5px; line-height: 1.65; color: var(--hc-text); max-width: 70ch; text-wrap: pretty;
}
.hc-faq__foot {
    max-width: 860px; margin: 26px auto 0; background: var(--hc-bg); border-radius: 22px;
    padding: 26px 30px; display: flex; flex-wrap: wrap; gap: 20px;
    align-items: center; justify-content: space-between;
}
.hc-faq__foot-title { display: block; font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.hc-faq__foot-text { display: block; font-size: 16px; color: var(--hc-body); }

/* ── Адаптив ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .hc-hero { padding: 36px; gap: 32px; }
    .hc-hero__title { font-size: 48px; }
    .hc-h2 { font-size: 30px; }
}

@media (max-width: 900px) {
    .hc { padding: 20px 16px 56px; gap: 24px; }
    .hc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 260px; }
    .hc-tile { border-radius: 22px; }
    .hc-tile__title { font-size: 21px; }
    .hc-card, .hc-partners, .hc-faq { border-radius: 22px; }
    .hc-hero { grid-template-columns: minmax(0, 1fr); padding: 28px; }
    .hc-hero__title { font-size: 36px; margin: 18px 0 14px; }
    .hc-hero__desc { font-size: 17px; margin-bottom: 24px; }
    .hc-hero__stats { gap: 22px; margin-top: 26px; padding-top: 20px; }
    .hc-hero__media { order: -1; }
    .hc-steps, .hc-faq, .hc-partners { padding: 28px; }
    .hc-featured { grid-template-columns: minmax(0, 1fr); }
    .hc-featured__media { min-height: 0; aspect-ratio: 16 / 9; }
    .hc-featured__body { padding: 28px; }
    .hc-featured__title { font-size: 27px; }
    .hc-partners__title { font-size: 30px; }
    .hc-panel { padding: 26px; }
    .hc-h2 { font-size: 27px; }
    .hc-h3 { font-size: 23px; }
}

@media (max-width: 560px) {
    .hc-tiles { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 220px; }
    .hc-tile__title { font-size: 20px; }
    .hc-tile__body { padding: 18px; }
    .hc-tile--more { padding: 22px; }
    .hc-hero__title { font-size: 30px; }
    .hc-hero__actions .hc-btn { flex: 1 1 100%; }
    .hc-faq__q { font-size: 16.5px; padding: 18px 20px; }
    .hc-faq__a { padding: 0 20px 20px; font-size: 15.5px; }
    .hc-faq__foot { padding: 22px; }
}