/* Лендинг для бизнеса (pro.neirokadr.ru). Общие токены, шапка, подвал и поля форм — в site.css.
   Главный образ — световой стол фотографа: кадры в плёночной рамке, выбранные обведены грифелем. */

.bz-page {
    --bz-lightbox: #eceeec;
    --bz-lightbox-edge: #d4d8d5;
    --bz-rebate: #000;
    --bz-grease: #c73a2b;
    --bz-edge-print: #6b716d;
    margin: 0; background: var(--nk-ink); color: var(--nk-bone); font: 17px/1.6 var(--nk-body);
}
.bz-page img { display: block; max-width: 100%; height: auto; }

/* ---------- Первый экран ---------- */
.bz-hero {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center;
    max-width: var(--nk-page); margin: 0 auto; padding: clamp(40px, 6vw, 88px) var(--nk-gutter) clamp(56px, 7vw, 104px);
}
.bz-hero__title { margin: 0; font: 400 clamp(34px, 4.2vw, 52px)/1.1 var(--nk-display); letter-spacing: -.01em; text-wrap: balance; }
.bz-hero__lead { margin: 24px 0 0; max-width: 52ch; font-size: 18px; line-height: 1.65; color: var(--nk-ash); }
.bz-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.bz-hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 44px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; color: var(--nk-ash); }
.bz-hero__facts strong { display: block; margin-bottom: 4px; font-size: 15px; color: var(--nk-bone); }

/* ---------- Световой стол ---------- */
.bz-hero__visual { justify-self: end; width: 100%; max-width: 480px; }
.bz-lightbox {
    margin: 0; padding: clamp(18px, 2.4vw, 32px); display: grid; gap: clamp(18px, 2vw, 26px);
    background: var(--bz-lightbox); border-radius: 3px;
    box-shadow: inset 0 0 0 1px var(--bz-lightbox-edge), 0 0 0 1px rgba(236, 238, 236, .06), 0 40px 120px -20px rgba(236, 238, 236, .14);
}
.bz-lightbox figcaption { font-size: 13px; line-height: 1.45; color: var(--bz-edge-print); }
.bz-lightbox__pair { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 3vw, 40px); }
.bz-lightbox--series { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bz-lightbox--series figcaption { grid-column: 1 / -1; }

.bz-frame { position: relative; display: grid; gap: 6px; }
.bz-frame img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 5px solid var(--bz-rebate); border-bottom-width: 9px; }
.bz-frame__num { font: 600 11px/1 var(--nk-body); color: var(--bz-edge-print); }

/* Обводка растягивается под кадр вместе со штрихом: толщина задана в единицах viewBox (100 ≈ ширина кадра). */
.bz-mark { position: absolute; z-index: 2; overflow: visible; fill: none; stroke: var(--bz-grease); stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.bz-mark--circle { left: -18px; top: -16px; width: calc(100% + 34px); height: calc(100% + 18px); stroke-width: 2.2; opacity: .92; }
.bz-mark--arrow { left: 50%; top: 30%; width: clamp(56px, 6vw, 76px); transform: translateX(-50%); stroke-width: 4; opacity: .92; }

@media (prefers-reduced-motion: no-preference) {
    /* Длина штриха — с запасом к длине пути в единицах viewBox: обводка ≈ 365, части стрелки ≈ 60 и 25. */
    .bz-hero .bz-mark path { --bz-length: 70; stroke-dasharray: var(--bz-length); stroke-dashoffset: var(--bz-length); animation: bz-draw .55s cubic-bezier(.5, 0, .3, 1) forwards; }
    .bz-hero .bz-mark--circle path { --bz-length: 380; }
    .bz-hero .bz-mark--arrow path:first-child { animation-delay: .6s; }
    .bz-hero .bz-mark--arrow path:last-child { animation-delay: 1s; animation-duration: .25s; }
    .bz-hero .bz-mark--circle path { animation-delay: 1.25s; animation-duration: .7s; }
    .bz-hero .bz-lightbox__pair + .bz-lightbox__pair .bz-mark--arrow path:first-child { animation-delay: 1.9s; }
    .bz-hero .bz-lightbox__pair + .bz-lightbox__pair .bz-mark--arrow path:last-child { animation-delay: 2.3s; }
    .bz-hero .bz-lightbox__pair + .bz-lightbox__pair .bz-mark--circle path { animation-delay: 2.55s; }
}
@keyframes bz-draw { to { stroke-dashoffset: 0; } }

/* ---------- Указатель направлений ---------- */
.bz-index { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--nk-line); }
.bz-index li { border-bottom: 1px solid var(--nk-line); }
.bz-index__row {
    display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.5fr) auto; gap: 8px 32px; align-items: center;
    padding: 18px 0; color: inherit; text-decoration: none;
}
.bz-index__row img { width: 72px; aspect-ratio: 3 / 4; object-fit: cover; }
.bz-index__name { font: 400 26px/1.2 var(--nk-display); transition: color .2s; }
.bz-index__for { font-size: 15px; color: var(--nk-ash); }
.bz-index__price { font-weight: 600; color: var(--nk-gold); white-space: nowrap; }
.bz-index__row:hover .bz-index__name { color: var(--nk-gold-light); }

/* ---------- Блоки направлений ---------- */
.bz-offer { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.nk-section.bz-offer { padding-top: clamp(56px, 8vw, 104px); border-top: 1px solid var(--nk-line); }
.bz-offer--reverse .bz-offer__media { order: 2; }
.bz-offer__text > .nk-btn { margin-top: 32px; }
.bz-offer__media--series { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bz-offer__media--series img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

.bz-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.bz-pair__item { display: grid; gap: 8px; }
.bz-pair__item img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.bz-pair__label { font-size: 13px; color: var(--nk-ash-dim); }

.bz-list { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.bz-list li { position: relative; padding-left: 26px; }
.bz-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 12px; height: 6px; border-left: 1.5px solid var(--nk-gold); border-bottom: 1.5px solid var(--nk-gold); transform: rotate(-45deg); }

.bz-price { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--nk-line-strong); }
.bz-price__main { margin: 0; font: 400 36px/1.1 var(--nk-display); color: var(--nk-gold); }
.bz-price__main span { font: 15px/1.4 var(--nk-body); color: var(--nk-ash); }
.bz-price__note { margin: 10px 0 0; font-size: 15px; color: var(--nk-ash); }

.bz-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.bz-plan { display: flex; flex-direction: column; padding: 22px 24px; border: 1px solid var(--nk-line-strong); border-radius: var(--nk-radius); }
.bz-plan h3 { margin: 0; font: 400 24px/1.2 var(--nk-display); }
.bz-plan__price { margin: 6px 0 0; font: 600 18px/1.4 var(--nk-body); color: var(--nk-gold); }
.bz-plan__price span { font-weight: 400; font-size: 15px; color: var(--nk-ash); }
.bz-plan .bz-list { margin-top: 16px; font-size: 15px; }

/* ---------- Таблицы цен ---------- */
.bz-table { width: 100%; margin-top: 28px; border-collapse: collapse; font-size: 15px; }
.bz-table caption { padding-bottom: 10px; text-align: left; font-weight: 600; }
.bz-table th, .bz-table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--nk-line); text-align: left; vertical-align: top; }
.bz-table thead th { font-size: 13px; font-weight: 600; color: var(--nk-ash-dim); }
.bz-table td:last-child { white-space: nowrap; font-weight: 600; }
.bz-table td span { font-weight: 400; color: var(--nk-ash); }
.bz-table--wide { margin-top: 0; }
.bz-table--wide tbody th { font-weight: 600; }
.bz-table--wide tbody th a { color: var(--nk-bone); text-decoration: none; }
.bz-table--wide tbody th a:hover { color: var(--nk-gold-light); }
.bz-table--wide td { color: var(--nk-ash); }
.bz-table--wide td:last-child { color: var(--nk-bone); }
.bz-table-wrap { overflow-x: auto; }

/* ---------- Этапы ---------- */
.bz-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; counter-reset: bz-step; }
.bz-steps li { counter-increment: bz-step; }
.bz-steps li::before { content: counter(bz-step); display: block; margin-bottom: 12px; font: 400 40px/1 var(--nk-display); color: var(--nk-gold); }
.bz-steps h3 { margin: 0; font: 600 17px/1.3 var(--nk-body); }
.bz-steps p { margin: 8px 0 0; font-size: 15px; color: var(--nk-ash); }

/* ---------- Вопросы ---------- */
.bz-faq { max-width: 860px; border-top: 1px solid var(--nk-line); }
.bz-faq details { border-bottom: 1px solid var(--nk-line); }
.bz-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; cursor: pointer; list-style: none; }
.bz-faq summary::-webkit-details-marker { display: none; }
.bz-faq summary h3 { margin: 0; font: 600 18px/1.4 var(--nk-body); }
.bz-faq__toggle { position: relative; flex: none; width: 16px; height: 16px; }
.bz-faq__toggle::before, .bz-faq__toggle::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 1.5px; background: var(--nk-gold); transition: transform .2s; }
.bz-faq__toggle::after { transform: rotate(90deg); }
.bz-faq details[open] .bz-faq__toggle::after { transform: rotate(0); }
.bz-faq details p { margin: 0 0 22px; max-width: 68ch; color: var(--nk-ash); }

/* ---------- Заявка ---------- */
.bz-lead { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.bz-lead__alt { margin: 24px 0 0; color: var(--nk-ash); }
.bz-form { display: grid; gap: 18px; padding: clamp(20px, 3vw, 32px); background: var(--nk-surface); border: 1px solid var(--nk-line); border-radius: var(--nk-radius); }
.bz-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: end; }
.bz-form select.nk-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--nk-gold) 50%), linear-gradient(135deg, var(--nk-gold) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.bz-optional { font-weight: 400; color: var(--nk-ash-dim); }
.bz-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.bz-consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--nk-ash); cursor: pointer; }
.bz-consent input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--nk-gold); }
.bz-form__error { margin: 0; color: var(--nk-danger); font-size: 14px; }
.bz-form__done h3 { margin: 0; font: 400 28px/1.2 var(--nk-display); }
.bz-form__done p { margin: 0; color: var(--nk-ash); }

/* ---------- Адаптив ---------- */
@media (max-width: 1080px) {
    .bz-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bz-index__row { grid-template-columns: 72px minmax(0, 1fr) auto; }
    .bz-index__row img { grid-row: span 2; }
    .bz-index__for { grid-column: 2 / -1; }
}
@media (max-width: 900px) {
    .bz-hero, .bz-offer, .bz-lead { grid-template-columns: 1fr; }
    .bz-offer--reverse .bz-offer__media { order: 0; }
    /* На телефоне световой стол — сразу под заголовком, до описания и кнопок. */
    .bz-hero { gap: 0; }
    .bz-hero__text { display: contents; }
    .bz-hero__visual { order: 1; max-width: 560px; margin-top: 28px; }
    .bz-hero__lead { order: 2; }
    .bz-hero__actions { order: 3; }
    .bz-hero__facts { order: 4; }
}
@media (max-width: 640px) {
    .bz-page { font-size: 16px; }
    .bz-hero__title { font-size: 31px; }
    .bz-hero__lead { font-size: 17px; }
    .bz-hero__actions .nk-btn { flex: 1 1 100%; }
    /* Вторая пара на телефоне отодвигает кнопку заявки за второй экран. */
    .bz-hero .bz-lightbox__pair + .bz-lightbox__pair { display: none; }
    .bz-hero__facts { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
    .bz-lightbox--series { gap: 10px; }
    .bz-index__row { grid-template-columns: 56px minmax(0, 1fr); gap: 4px 16px; align-items: start; }
    .bz-index__row img { width: 56px; grid-row: span 3; }
    .bz-index__name { font-size: 22px; }
    .bz-index__for, .bz-index__price { grid-column: 2; }
    .bz-plans, .bz-form__row, .bz-steps { grid-template-columns: 1fr; }
    .bz-table--wide thead { display: none; }
    .bz-table--wide tr { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--nk-line); }
    .bz-table--wide th, .bz-table--wide td { padding: 0; border: 0; white-space: normal; }
}