/* ===========================================================================
   Нишевые лендинги (md/niche_landings_beauty_tz.md)
   ---------------------------------------------------------------------------
   Общая база для /for/{niche}: топбар, hero, секции, отзывы, финальный CTA,
   футер. Уникальные секции ниши живут в её blade, но ВСЕ цвета берутся отсюда
   и только из токенов bizi-ds.css — своей палитры у лендинга нет (D3).

   Правила, которые здесь соблюдаются намеренно:
   · ни одного цветового хардкода — только var(--*) из bizi-ds;
   · зелёный по типизации: ФОН — --accent (текст #fff), ТЕКСТ — --success;
   · кнопки-действия НЕ описываются здесь: канонические .btn-primary /
     .btn-secondary / .btn-lg приходят из bizi-ds.css (у них !important на
     цветах — перебивать их запрещено);
   · кегль — по шкале 14/16/18/20/24, минимум 14px;
   · @font-face не дублируется: Lato уже подключён в bizi-ds.css.

   Префикс ln- (landing niche) — чтобы имена секций не столкнулись с классами
   дизайн-системы, когда обе таблицы подключены на одной странице.
   =========================================================================== */

.ln-page {
    /* Локальные НЕцветовые константы. Цвета сюда не заводить. */
    --ln-shell: max(24px, calc((100vw - 1320px) / 2));
    --ln-shell-narrow: max(24px, calc((100vw - 1220px) / 2));
    --ln-shadow-card: 0 18px 50px rgba(15, 23, 42, 0.08);
    --ln-shadow-soft: 0 14px 34px rgba(15, 23, 42, 0.06);

    min-height: 100vh;
    min-height: 100dvh;
    color: var(--text-main);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.45;
}

.ln-page * { box-sizing: border-box; }
.ln-page a { color: inherit; }
.ln-page :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.ln-icon { width: 22px; height: 22px; flex: 0 0 auto; stroke-width: 1.8; }

/* ── Топбар ───────────────────────────────────────────────────────────── */
/* Шапка липкая: на длинном лендинге CTA и переключатель языка должны быть
   в пределах одного движения, куда бы читатель ни ушёл. Фон полупрозрачный
   с блюром — под ней проезжает контент, а не «пустая полка». */
.ln-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px var(--ln-shell);
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
}
.ln-brand { display: inline-flex; align-items: center; text-decoration: none; }
.ln-brand-logo { width: auto; height: 42px; display: block; }
.ln-top-right { display: flex; align-items: center; gap: 16px; }
.ln-top-note {
    display: inline-flex; align-items: center; gap: 9px;
    color: var(--text-secondary); font-size: 14px; font-weight: 700; letter-spacing: 0.01em;
}
.ln-top-note::before {
    width: 8px; height: 8px; content: "";
    border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 0 5px var(--accent-tint);
}

/* Переключатель языка — как на посадочной фри-витрины */
.ln-lang {
    display: inline-flex; gap: 4px; margin: 0; padding: 4px;
    border: 1px solid var(--border-main); border-radius: 12px;
    background: var(--input-bg);
}
.ln-lang-btn {
    padding: 6px 12px; border: none; border-radius: 8px;
    background: none; color: var(--text-secondary);
    font: inherit; font-size: 14px; font-weight: 700; line-height: 1;
    cursor: pointer;
}
.ln-lang-btn.is-active {
    background: var(--card-bg); color: var(--text-main);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* ── Общие секционные примитивы ───────────────────────────────────────── */
.ln-section { padding: clamp(72px, 8vw, 112px) var(--ln-shell-narrow); }
.ln-section--tinted { border-top: 1px solid var(--border-main); background: var(--card-bg); }
.ln-section-intro { max-width: 780px; margin-bottom: 40px; }
.ln-kicker {
    display: inline-flex; align-items: center; gap: 9px; margin-bottom: 12px;
    color: var(--success); font-size: 14px; font-weight: 800;
}
.ln-kicker::before {
    width: 8px; height: 8px; content: "";
    border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 0 5px var(--accent-tint);
}
.ln-h1 {
    margin: 0; font-size: clamp(40px, 4.8vw, 72px); line-height: 1.02;
    font-weight: 800; letter-spacing: -0.045em; text-wrap: balance;
}
.ln-h2 {
    margin: 0; font-size: clamp(30px, 4vw, 52px); line-height: 1.05;
    font-weight: 800; letter-spacing: -0.035em; text-wrap: balance;
}
.ln-lead { max-width: 660px; margin: 16px 0 0; color: var(--text-secondary); font-size: 18px; font-weight: 600; }
.ln-accent-text { color: var(--success); }

/* ── Hero с панелью действия ──────────────────────────────────────────── */
.ln-hero {
    display: grid;
    grid-template-columns: minmax(480px, 1.08fr) minmax(390px, 0.92fr);
    align-items: center;
    gap: clamp(48px, 6vw, 86px);
    padding: clamp(42px, 6vh, 72px) var(--ln-shell-narrow);
    background-position: center;
    background-size: cover;
}
.ln-hero-copy { max-width: 660px; }
.ln-cta-wrap { margin-top: 16px; }
.ln-cta-note { min-height: 22px; margin: 10px 0 0; color: var(--warning); font-size: 14px; font-weight: 700; }
.ln-cta-note:empty { display: none; }

.ln-panel {
    position: relative; overflow: hidden;
    display: grid; align-content: center;
    padding: clamp(30px, 4vw, 44px);
    border: 1px solid var(--border-main); border-radius: 32px;
    background: linear-gradient(150deg, var(--card-bg), var(--accent-tint));
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.12);
}
.ln-panel > * { position: relative; z-index: 1; }
.ln-panel-intro { max-width: 420px; margin: 0 0 16px; color: var(--success); font-size: 18px; line-height: 1.3; font-weight: 800; }
.ln-panel-hook {
    max-width: 440px; margin: 0 0 24px; color: var(--text-main);
    font-size: clamp(28px, 2.7vw, 38px); line-height: 1.1;
    font-weight: 800; letter-spacing: -0.03em; text-wrap: balance;
}
.ln-panel-schedule {
    display: inline-flex; align-items: center; width: fit-content; gap: 9px;
    margin: 0; padding: 10px 13px;
    border: 1px solid var(--accent); border-radius: 9999px;
    color: var(--text-secondary); background: var(--card-bg);
    font-size: 16px; font-weight: 800;
    box-shadow: var(--ln-shadow-soft);
}
.ln-panel-schedule::before { width: 8px; height: 8px; content: ""; border-radius: 50%; background: var(--accent); }
.ln-panel .ln-cta-wrap { margin-top: 22px; }

/* ── Группы тем (программа) ───────────────────────────────────────────── */
.ln-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 18px; }
.ln-group {
    /* Три группы различаются семантическими токенами, а не произвольной палитрой:
       успех → инфо → графит. Своих цветов у групп нет (D3). */
    --ln-group-color: var(--success);
    --ln-group-tint: var(--accent-tint);
    padding: 24px; border: 1px solid var(--border-main); border-radius: 24px;
    background: linear-gradient(160deg, var(--card-bg), var(--ln-group-tint));
    box-shadow: var(--ln-shadow-soft);
}
.ln-group:nth-child(2) { --ln-group-color: var(--info); --ln-group-tint: var(--n100); }
.ln-group:nth-child(3) { --ln-group-color: var(--graphite); --ln-group-tint: var(--n50); }
.ln-group-head { display: grid; align-content: start; gap: 10px; min-height: 92px; padding-bottom: 20px; }
.ln-group-index {
    width: fit-content; padding: 5px 9px; border-radius: 9999px;
    color: var(--ln-group-color); background: var(--card-bg);
    font-size: 14px; font-weight: 800;
}
.ln-group h3 { margin: 0; color: var(--text-main); font-size: 24px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }
.ln-topic-list { display: grid; margin: 0; padding: 0; list-style: none; }
.ln-topic {
    display: grid; grid-template-columns: 38px 1fr; align-items: start; gap: 12px;
    padding: 18px 0; border-top: 1px solid var(--border-main);
}
.ln-topic-num {
    width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px;
    color: var(--ln-group-color); background: var(--card-bg);
    box-shadow: var(--ln-shadow-soft);
    font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.ln-topic p { margin: 3px 0 0; color: var(--text-main); font-size: 16px; line-height: 1.32; font-weight: 700; }

/* ── Отзывы ───────────────────────────────────────────────────────────── */
.ln-testimonials { margin-top: clamp(60px, 7vw, 92px); }
.ln-testimonials-head { margin-bottom: 24px; }
.ln-track {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(310px, 360px);
    gap: 16px; overflow-x: auto; padding: 2px 2px 18px;
    scroll-snap-type: x mandatory; overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}
.ln-quote-card {
    display: grid; grid-template-rows: auto 1fr auto; gap: 22px;
    min-height: 268px; padding: 24px;
    border: 1px solid var(--border-main); border-radius: 22px;
    background: var(--card-bg); box-shadow: var(--ln-shadow-soft);
    scroll-snap-align: start;
}
.ln-quote-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ln-quote-mark { color: var(--accent); font-family: Georgia, serif; font-size: 44px; line-height: 0.65; font-weight: 700; }
.ln-demo-mark { padding: 4px 8px; border-radius: 9999px; color: var(--text-muted); background: var(--n100); font-size: 14px; font-weight: 800; }
.ln-quote-card blockquote { margin: 0; color: var(--text-main); font-size: 16px; line-height: 1.48; font-weight: 700; }
.ln-quote-person { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--border-main); }
.ln-avatar { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: var(--success); background: var(--accent-tint); font-size: 14px; font-weight: 800; }
.ln-quote-card:nth-child(3n+2) .ln-avatar { color: var(--info); background: var(--n100); }
.ln-quote-card:nth-child(3n) .ln-avatar { color: var(--graphite); background: var(--n50); }
.ln-quote-person strong { display: block; font-size: 16px; font-weight: 800; }
.ln-quote-role { display: block; margin-top: 3px; color: var(--text-muted); font-size: 14px; font-weight: 700; }

/* ── Финальный CTA ────────────────────────────────────────────────────── */
.ln-final {
    max-width: 1220px; display: flex; align-items: center; justify-content: space-between;
    gap: 36px; margin: 52px auto 0; padding: 34px 38px; overflow: hidden;
    border-radius: 28px; color: #fff;
    background: var(--n900);
    box-shadow: 0 26px 70px rgba(15, 23, 42, 0.18);
}
.ln-final-copy { max-width: 660px; }
.ln-final-label { display: block; margin-bottom: 8px; color: var(--accent-tint); font-size: 14px; font-weight: 800; }
.ln-final .ln-h2 { color: #fff; font-size: clamp(28px, 3vw, 42px); }
.ln-final p { margin: 10px 0 0; color: var(--n300); font-size: 16px; font-weight: 600; }
.ln-final-action { flex: 0 0 auto; display: grid; justify-items: center; }
.ln-final .ln-cta-note { color: var(--warning); text-align: center; }

/* ── Футер (юр-блок обязателен) ───────────────────────────────────────── */
.ln-footer {
    display: grid; gap: 18px;
    padding: 36px var(--ln-shell);
    border-top: 1px solid rgba(15, 23, 42, 0.07);
    color: var(--text-muted); background: var(--panel-bg);
    font-size: 14px; font-weight: 600;
}
.ln-footer-links { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.ln-footer-links a {
    color: var(--text-secondary); text-decoration: none; font-weight: 700;
    text-underline-offset: 4px; transition: color 180ms ease;
}
.ln-footer-links a:hover { color: var(--text-main); text-decoration: underline; }
.ln-footer-legal {
    display: flex; flex-wrap: wrap; gap: 6px 20px;
    padding-top: 18px; border-top: 1px solid rgba(15, 23, 42, 0.06);
}

/* ── Адаптив ──────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .ln-hero { grid-template-columns: 1fr; align-items: start; gap: 44px; }
    .ln-hero-copy { max-width: 760px; }
    .ln-panel { width: 100%; max-width: 760px; }
    .ln-groups { grid-template-columns: 1fr; }
    .ln-group-head { min-height: 0; }
}

@media (max-width: 720px) {
    .ln-topbar { padding: 8px 16px; }
    .ln-brand-logo { height: 38px; }
    .ln-top-note { display: none; }
    .ln-hero { gap: 34px; padding: 34px 16px 48px; }
    .ln-panel { padding: 24px 20px; border-radius: 24px; }
    .ln-panel-hook { font-size: 26px; }
    .ln-section { padding: 64px 16px; }
    .ln-section-intro { margin-bottom: 28px; }
    .ln-lead { font-size: 16px; }
    .ln-groups { gap: 14px; }
    .ln-group { padding: 20px; border-radius: 20px; }
    .ln-track { grid-auto-columns: minmax(280px, 86vw); }
    .ln-quote-card { min-height: 280px; padding: 22px; }
    .ln-final { display: grid; gap: 24px; margin-top: 32px; padding: 28px 22px; border-radius: 22px; }
    .ln-final-action { width: 100%; }
    .ln-footer { padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
    .ln-page *,
    .ln-page *::before,
    .ln-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}