/* ==========================================================================
   Бинк — продуктовая страница в палитре Black & gold: Geist для заголовков, Inter для текста
   ========================================================================== */

@font-face {
    font-family: 'Geist';
    src: url('fonts/Geist-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Палитра Black & gold */
    --bg: #0b0b0c;
    --bg-alt: #1c1c1f;
    --surface-2: #26262a;
    --ink: #e9dfcc;
    --ink-2: #a39a89;
    --ink-3: #7d766a;
    --line: #34322e;
    --line-strong: #5a554c;
    --accent: #b08d57;
    --accent-hover: #c4a26b;
    --on-accent: #0b0b0c;
    --danger: #ff7a6b;
    --black: #000000;
    --on-black: #e9dfcc;
    --on-black-2: #a39a89;

    --font-display: 'Geist', 'Inter', system-ui, sans-serif;
    --font-text: 'Inter', system-ui, -apple-system, sans-serif;

    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);

    --gutter: clamp(20px, 4vw, 48px);
    --section: clamp(96px, 12vw, 168px);
    --radius-lg: 28px;
    --radius-md: 18px;

    color-scheme: dark;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 64px;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -0.012em;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
    caret-color: var(--accent);
}

::selection {
    background: rgba(176, 141, 87, 0.35);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* Ссылка внутри текста отличается не только цветом: тонкое подчёркивание, при наведении — в полную силу */
:where(p, label, li) a:not([class]) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(176, 141, 87, 0.45);
    text-underline-offset: 0.18em;
    transition: text-decoration-color 0.2s var(--ease-out);
}

:where(p, label, li) a:not([class]):hover {
    text-decoration-color: currentColor;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}

button {
    font: inherit;
    color: inherit;
}

.wrap {
    width: min(1180px, 100% - var(--gutter) * 2);
    margin-inline: auto;
}

.skip {
    position: absolute;
    left: 16px;
    top: -100px;
    z-index: 200;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--on-accent);
}

.skip:focus {
    top: 12px;
}

/* Заголовок секции: жирная часть + серое продолжение */
.headline {
    max-width: 22ch;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 4.6vw, 3.5rem);
    line-height: 1.07;
    letter-spacing: -0.035em;
    color: var(--ink-2);
    text-wrap: balance;
}

.headline b {
    font-weight: 600;
    color: var(--ink);
}

/* Ссылка со стрелкой › */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.15em;
    color: var(--accent);
    font-weight: 400;
}

.link-arrow::after {
    content: '';
    width: 0.42em;
    height: 0.42em;
    margin-left: 0.18em;
    border-top: 0.09em solid currentColor;
    border-right: 0.09em solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s var(--ease-out);
}

.link-arrow:hover::after {
    transform: translateX(3px) rotate(45deg);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: 980px;
    background: var(--accent);
    color: var(--on-accent);
    font: 400 17px/1 var(--font-text);
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background-color 0.2s var(--ease-out), transform 0.16s var(--ease-out), opacity 0.2s;
    user-select: none;
}

.btn:hover {
    background: var(--accent-hover);
    text-decoration: none;
}

.btn:active {
    transform: scale(0.97);
}

.btn--small {
    min-height: 36px;
    padding: 0 16px;
    font-size: 14px;
}

/* ==========================================================================
   Навигация
   ========================================================================== */

.nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    padding-top: env(safe-area-inset-top);
    background: rgba(11, 11, 12, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}

.nav.is-scrolled {
    border-bottom-color: rgba(233, 223, 204, 0.08);
}

.nav.is-dark {
    background: rgba(0, 0, 0, 0.72);
    border-bottom-color: rgba(233, 223, 204, 0.06);
    color: var(--on-black);
}

.nav__bar {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 52px;
    width: min(1180px, 100% - var(--gutter) * 2);
    margin-inline: auto;
}

.nav__logo {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -0.03em;
    color: inherit;
}

.nav__logo:hover {
    text-decoration: none;
}

.nav__menu {
    margin-left: auto;
}

.nav__menu ul {
    display: flex;
    gap: 28px;
    list-style: none;
}

.nav__menu a {
    color: inherit;
    font-size: 13px;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.nav__menu a:hover {
    opacity: 1;
    text-decoration: none;
}

.nav__cta {
    padding: 5px 13px;
    border-radius: 980px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 13px;
}

.nav__cta:hover {
    background: var(--accent-hover);
    text-decoration: none;
}

.nav__burger {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    margin-right: -12px;
    border: 0;
    background: none;
    cursor: pointer;
}

.nav__burger span {
    position: absolute;
    left: 14px;
    width: 16px;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.4s var(--ease-out);
}

.nav__burger span:first-child { top: 18px; }
.nav__burger span:last-child { top: 24px; }

.nav.is-open .nav__burger span:first-child { transform: translateY(3px) rotate(45deg); }
.nav.is-open .nav__burger span:last-child { transform: translateY(-3px) rotate(-45deg); }

/* ==========================================================================
   Первый экран
   ========================================================================== */

.hero {
    padding: clamp(120px, 16vh, 168px) var(--gutter) clamp(40px, 6vh, 64px);
    text-align: center;
}

.hero__title {
    max-width: 14ch;
    margin-inline: auto;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.75rem, 7.4vw, 6rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.hero__title .w {
    display: inline-block;
    white-space: pre;
}

.hero__lead {
    max-width: 36rem;
    margin: 20px auto 0;
    color: var(--ink-2);
    font-size: clamp(1.1875rem, 1.6vw, 1.5rem);
    line-height: 1.38;
    letter-spacing: -0.02em;
}

.hero__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 32px;
    margin-top: 28px;
    font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
}

/* Слова поднимаются из размытия; изначально всё видно, прячем только при работающем JS */
@media (prefers-reduced-motion: no-preference) {
    .js .hero__title .w {
        opacity: 0;
        filter: blur(12px);
        transform: translateY(0.35em);
        transition: opacity 0.9s var(--ease-out), filter 0.9s var(--ease-out), transform 0.9s var(--ease-out);
        transition-delay: calc(var(--i) * 70ms);
    }

    .js [data-rise] {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 0.9s var(--ease-out) 0.45s, transform 0.9s var(--ease-out) 0.45s;
    }

    .js .hero__links[data-rise] {
        transition-delay: 0.6s;
    }

    .js.is-loaded .hero__title .w,
    .js.is-loaded [data-rise] {
        opacity: 1;
        filter: none;
        transform: none;
    }

    /* Появление блоков при прокрутке */
    .js [data-reveal] {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
    }

    .js [data-reveal].is-in {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   Работы: карусель
   ========================================================================== */

.works {
    padding-bottom: var(--section);
}

.works .headline {
    margin-bottom: 40px;
}

.carousel {
    --card-w: min(440px, 78vw);
    position: relative;
}

.carousel__track {
    display: flex;
    gap: clamp(16px, 2vw, 24px);
    padding: 8px calc(50% - var(--card-w) / 2) 24px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    cursor: grab;
}

.carousel__track::-webkit-scrollbar {
    display: none;
}

.carousel__track:focus-visible {
    outline-offset: -2px;
}

.carousel.is-dragging .carousel__track {
    cursor: grabbing;
}

.card {
    --d: 0;
    flex: 0 0 var(--card-w);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-alt);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 18px 40px -16px rgba(0, 0, 0, 0.22);
    transform: scale(calc(1 - var(--d) * 0.04));
    opacity: calc(1 - var(--d) * 0.25);
    transition: box-shadow 0.4s var(--ease-out);
    -webkit-user-drag: none;
    user-select: none;
}

.card:hover {
    text-decoration: none;
}

.card img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top center;
    pointer-events: none;
    transition: transform 0.8s var(--ease-out);
}

@media (hover: hover) {
    .card:hover img {
        transform: scale(1.03);
    }
}

.card:active {
    transform: scale(calc(0.985 - var(--d) * 0.04));
}

.carousel__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 12px;
    text-align: center;
}

.caption {
    min-height: 56px;
}

.caption__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.17;
    letter-spacing: -0.025em;
}

.caption__meta {
    color: var(--ink-2);
    font-size: 15px;
}

.caption.is-swapping {
    animation: caption-swap 0.5s var(--ease-out);
}

@keyframes caption-swap {
    from { opacity: 0; transform: translateY(8px); filter: blur(4px); }
    to { opacity: 1; transform: none; filter: none; }
}

.carousel__controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dots {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    margin-inline: 4px;
    border-radius: 980px;
    background: var(--bg-alt);
}

.dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 980px;
    background: var(--line-strong);
    cursor: pointer;
    transition: width 0.45s var(--ease-out), background-color 0.3s;
}

.dot[aria-selected='true'] {
    width: 32px;
    background: var(--ink);
}

.round-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--ink);
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s, transform 0.16s var(--ease-out);
}

.round-btn svg {
    width: 22px;
    height: 22px;
}

.round-btn:hover {
    background: #303035;
}

.round-btn:active {
    transform: scale(0.92);
}

.round-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.carousel.is-single .carousel__controls {
    display: none;
}

/* ==========================================================================
   Почему Бинк: слова закрашиваются по прокрутке
   ========================================================================== */

.why {
    padding: var(--section) 0;
    background: var(--bg-alt);
}

.why__text {
    max-width: 30ch;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.875rem, 4.2vw, 3.5rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
    text-wrap: pretty;
}

.why__text .w {
    transition: color 0.35s var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
    .js .why__text .w {
        color: #45413a;
    }

    .js .why__text .w.is-on {
        color: var(--ink);
    }
}

/* ==========================================================================
   Услуги: бенто
   ========================================================================== */

.services {
    padding: var(--section) 0;
}

.bento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 48px;
}

.tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-height: 420px;
    padding: 36px;
    border-radius: var(--radius-lg);
    background: var(--bg-alt);
    overflow: hidden;
}

.tile--wide {
    grid-column: span 2;
    flex-direction: row;
    align-items: flex-end;
}

.tile--wide .tile__text {
    flex: 0 0 38%;
    align-self: flex-start;
}

.tile__title {
    margin-bottom: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 28px;
    line-height: 1.14;
    letter-spacing: -0.03em;
}

.tile__text p {
    color: var(--ink-2);
}

@media (prefers-reduced-motion: no-preference) {
    .js [data-tile] {
        opacity: 0;
        transform: translateY(40px) scale(0.97);
        transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
        transition-delay: calc(var(--i, 0) * 90ms);
    }

    .js [data-tile].is-in {
        opacity: 1;
        transform: none;
    }
}

/* Мини-браузер: страница собирается по блокам */
.mock-browser {
    flex: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    margin: 0 -36px -36px 0;
    border-radius: 16px 0 0 0;
    background: var(--surface-2);
    box-shadow: 0 0 0 1px rgba(233, 223, 204, 0.06), 0 20px 50px -20px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.mock-browser__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-bottom: 1px solid var(--line);
    background: #222226;
}

.mock-browser__bar i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #45413a;
}

.mock-browser__bar span {
    margin-left: 12px;
    padding: 3px 12px;
    border-radius: 6px;
    background: var(--bg);
    color: var(--ink-2);
    font-size: 11px;
}

.mock-browser__page {
    position: relative;
    flex: 1;
    min-height: 300px;
}

/* Работы сменяют друг друга, как будто листаешь вкладки */
.mock-browser__page img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.8s var(--ease-out), transform 1.2s var(--ease-out);
}

.mock-browser__page img.is-on {
    opacity: 1;
    transform: none;
}

.mock-browser__bar span {
    transition: opacity 0.3s var(--ease-out);
}

/* Мини-окно оплаты: живое демо — переключатель способа и кнопка, которая «оплачивает» */
.mock-pay {
    margin-top: auto;
    padding: 20px;
    border-radius: 20px;
    background: var(--bg);
    box-shadow: 0 0 0 1px rgba(233, 223, 204, 0.07), 0 16px 40px -18px rgba(0, 0, 0, 0.6);
}

.mock-pay__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-2);
}

.mock-pay__demo {
    padding: 1px 7px;
    border-radius: 980px;
    background: var(--bg-alt);
    font-size: 11px;
}

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

/* Сегментный переключатель с переезжающей плашкой */
.seg {
    --i: 0;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 12px 0;
    padding: 3px;
    border-radius: 10px;
    background: var(--bg-alt);
}

.seg.is-sbp {
    --i: 1;
}

.seg__thumb {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    border-radius: 8px;
    background: var(--surface-2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 0, 0, 0.06);
    transform: translateX(calc(var(--i) * 100%));
    transition: transform 0.45s var(--ease-spring);
}

.seg__opt {
    position: relative;
    z-index: 1;
    padding: 7px 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ink-2);
    font-size: 13px;
    cursor: pointer;
    transition: color 0.25s var(--ease-out), transform 0.16s var(--ease-out);
}

.seg__opt[aria-checked='true'] {
    color: var(--ink);
    font-weight: 500;
}

.seg__opt:active {
    transform: scale(0.96);
}

.seg__opt:focus-visible {
    outline-offset: -1px;
}

/* Содержимое под переключателем: карта или QR */
.pay-panes {
    display: grid;
    margin-bottom: 12px;
}

.pay-pane {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink-2);
    font-size: 13px;
    opacity: 0;
    transform: translateY(6px);
    visibility: hidden;
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), visibility 0s 0.3s;
}

.pay-pane.is-on {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity 0.35s var(--ease-out) 0.05s, transform 0.35s var(--ease-out) 0.05s;
}

.pay-pane__icon {
    flex: none;
    width: 22px;
    height: 22px;
}

.pay-pane__num {
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

.pay-pane__exp {
    margin-left: auto;
}

.pay-pane__qr {
    flex: none;
    width: 36px;
    height: 36px;
    color: var(--ink);
}

.pay-pane__hint {
    line-height: 1.3;
}

/* Кнопка: ожидание → загрузка → готово */
.mock-pay__btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: var(--ink);
    color: var(--on-accent);
    font-size: 15px;
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.4s var(--ease-out), transform 0.16s var(--ease-out);
}

.mock-pay__btn:hover {
    background: #d6cbb5;
}

.mock-pay__btn:active {
    transform: scale(0.98);
}

.mock-pay__btn > * {
    grid-area: 1 / 1;
}

.mock-pay__btn-text {
    transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.mock-pay__spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(11, 11, 12, 0.3);
    border-top-color: var(--on-accent);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s var(--ease-out);
}

.mock-pay__check {
    width: 24px;
    height: 24px;
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    opacity: 0;
}

.mock-pay[data-state='loading'] .mock-pay__btn,
.mock-pay[data-state='done'] .mock-pay__btn {
    cursor: default;
}

.mock-pay[data-state='loading'] .mock-pay__btn-text,
.mock-pay[data-state='done'] .mock-pay__btn-text {
    opacity: 0;
    transform: translateY(-8px);
}

.mock-pay[data-state='loading'] .mock-pay__spinner {
    opacity: 1;
    animation: spin 0.8s linear infinite;
}

.mock-pay[data-state='done'] .mock-pay__btn {
    background: var(--accent);
}

.mock-pay[data-state='done'] .mock-pay__check {
    opacity: 1;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.45s var(--ease-out) 0.1s, opacity 0.1s;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Мини-карта: метка падает, карточка всплывает */
.mock-map {
    position: relative;
    flex: 1;
    min-height: 200px;
    margin: 0 -36px -36px;
    background: #141416;
    overflow: hidden;
}

.mock-map__park {
    position: absolute;
    left: 8%;
    top: 10%;
    width: 30%;
    height: 32%;
    border-radius: 40% 55% 45% 60%;
    background: rgba(176, 141, 87, 0.16);
}

.mock-map__water {
    position: absolute;
    right: -6%;
    bottom: -10%;
    width: 34%;
    height: 46%;
    border-radius: 50% 40% 0 60%;
    background: rgba(233, 223, 204, 0.06);
}

.mock-map__road {
    position: absolute;
    background: #2a2a2e;
    border-radius: 4px;
}

.mock-map__road--a { left: -10%; right: -10%; top: 46%; height: 12px; transform: rotate(-8deg); }
.mock-map__road--b { top: -10%; bottom: -10%; left: 58%; width: 10px; transform: rotate(12deg); }
.mock-map__road--c { left: -10%; right: 30%; top: 78%; height: 7px; transform: rotate(4deg); }
.mock-map__road--d { top: -10%; bottom: 40%; left: 24%; width: 6px; transform: rotate(-6deg); }

.mock-map__pin {
    position: absolute;
    left: calc(50% - 16px);
    top: calc(44% - 40px);
    width: 32px;
    height: 42px;
    fill: var(--accent);
    filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.25));
}

.mock-map__card {
    position: absolute;
    left: 50%;
    bottom: 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 10px 10px 16px;
    border-radius: 14px;
    background: var(--surface-2);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
    font-size: 14px;
    white-space: nowrap;
    transform: translateX(-50%);
}

.mock-map__card span {
    padding: 6px 12px;
    border-radius: 980px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 12px;
}

@media (prefers-reduced-motion: no-preference) {
    .js .mock-map__pin {
        opacity: 0;
        transform: translateY(-60px);
    }

    .js .mock-map__card {
        opacity: 0;
        transform: translate(-50%, 16px);
    }

    .js .tile.is-in .mock-map__pin {
        animation: pin-drop 0.7s var(--ease-spring) 0.5s forwards;
    }

    .js .tile.is-in .mock-map__card {
        transition: opacity 0.6s var(--ease-out) 1s, transform 0.6s var(--ease-out) 1s;
        opacity: 1;
        transform: translateX(-50%);
    }
}

@keyframes pin-drop {
    to { opacity: 1; transform: none; }
}

/* Мини-график: столбики растут */
.mock-chart {
    flex: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
}

.mock-chart__bars {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 220px;
    padding: 0 4px;
    border-bottom: 1px solid var(--line);
}

.mock-chart__bars i {
    flex: 1;
    height: var(--h);
    border-radius: 8px 8px 2px 2px;
    background: linear-gradient(180deg, #c9a874, var(--accent));
    transform-origin: bottom;
}

.mock-chart__bars i:nth-child(-n + 4) {
    background: rgba(176, 141, 87, 0.28);
}

.mock-chart figcaption {
    color: var(--ink-2);
    font-size: 12px;
}

@media (prefers-reduced-motion: no-preference) {
    .js .mock-chart__bars i {
        transform: scaleY(0);
        transition: transform 0.9s var(--ease-out);
    }

    .js .mock-chart__bars i:nth-child(1) { transition-delay: 0.30s; }
    .js .mock-chart__bars i:nth-child(2) { transition-delay: 0.36s; }
    .js .mock-chart__bars i:nth-child(3) { transition-delay: 0.42s; }
    .js .mock-chart__bars i:nth-child(4) { transition-delay: 0.48s; }
    .js .mock-chart__bars i:nth-child(5) { transition-delay: 0.54s; }
    .js .mock-chart__bars i:nth-child(6) { transition-delay: 0.60s; }
    .js .mock-chart__bars i:nth-child(7) { transition-delay: 0.66s; }
    .js .mock-chart__bars i:nth-child(8) { transition-delay: 0.72s; }

    .js .tile.is-in .mock-chart__bars i {
        transform: none;
    }
}

/* ==========================================================================
   Партнёры
   ========================================================================== */

.partners {
    padding: var(--section) 0;
    background: var(--bg-alt);
}

.partners__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 48px;
    list-style: none;
}

.partner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 280px;
    padding: 36px;
    border-radius: var(--radius-lg);
    background: var(--bg);
    transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

@media (hover: hover) {
    .partner.is-in:hover {
        transform: translateY(-6px);
        box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.22);
    }
}

.partner__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.75rem, 2.6vw, 2.25rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.partner__text {
    color: var(--ink-2);
}

.partner .link-arrow {
    margin-top: auto;
    font-size: 17px;
}

.partners__note {
    margin-top: 20px;
    color: var(--ink-2);
    font-size: 13px;
}













/* ==========================================================================
   Стоимость: конфигуратор
   ========================================================================== */

.price {
    padding: var(--section) 0;
}

.config {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    margin-top: 48px;
    align-items: start;
}

.config__visual {
    position: sticky;
    top: 96px;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    background: var(--bg-alt);
    overflow: hidden;
}

.config__summary,
.config__cta {
    display: none;
}

/* Листы сайта: один для лендинга, веер из трёх для многостраничника */
.pages {
    --fan: 0;
    position: relative;
    width: 46%;
    aspect-ratio: 3 / 4;
}

.pages__sheet {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface-2);
    box-shadow: 0 0 0 1px rgba(233, 223, 204, 0.08), 0 24px 50px -24px rgba(0, 0, 0, 0.7);
    transition: transform 0.8s var(--ease-spring), opacity 0.5s var(--ease-out);
}

.pages__sheet img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.pages__sheet:nth-child(1) {
    z-index: 3;
}

.pages__sheet:nth-child(2) {
    z-index: 2;
    transform: translate(calc(var(--fan) * -34%), calc(var(--fan) * 6%)) rotate(calc(var(--fan) * -8deg)) scale(calc(1 - var(--fan) * 0.06));
    opacity: var(--fan);
}

.pages__sheet:nth-child(3) {
    z-index: 1;
    transform: translate(calc(var(--fan) * 34%), calc(var(--fan) * 6%)) rotate(calc(var(--fan) * 8deg)) scale(calc(1 - var(--fan) * 0.06));
    opacity: var(--fan);
}

.pages__badge {
    position: absolute;
    z-index: 4;
    padding: 8px 14px;
    border-radius: 980px;
    background: var(--surface-2);
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.3);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-spring);
}

.pages__badge--pay { right: -22%; top: 18%; }
.pages__badge--map { left: -24%; bottom: 16%; }

.pages__badge.is-on {
    opacity: 1;
    transform: none;
}

.group {
    border: 0;
    min-width: 0;
    margin-bottom: 40px;
}

.group__title {
    margin-bottom: 14px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 21px;
    letter-spacing: -0.02em;
}

.option {
    display: block;
    margin-bottom: 12px;
    cursor: pointer;
}

.option input,
.switch-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.option__box {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 16px;
    padding: 18px 20px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.option__name {
    font-weight: 600;
}

.option__desc {
    grid-column: 1;
    color: var(--ink-2);
    font-size: 14px;
}

.option__price {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    font-variant-numeric: tabular-nums;
}

.option input:checked + .option__box {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.option input:focus-visible + .option__box {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.switch-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
}

.switch-row:first-of-type {
    border-top: 1px solid var(--line);
}

.switch-row__text {
    display: grid;
}

.switch-row__desc {
    color: var(--ink-2);
    font-size: 14px;
}

.switch-row__price {
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

/* Переключатель в стиле iOS */
.switch {
    position: relative;
    width: 51px;
    height: 31px;
    border-radius: 980px;
    background: #3a3833;
    transition: background-color 0.3s var(--ease-out);
}

.switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    border-radius: 980px;
    background: var(--ink);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16);
    transition: transform 0.4s var(--ease-spring), width 0.2s var(--ease-out);
}

.switch-row:active .switch::after {
    width: 33px;
}

.switch-row input:checked ~ .switch {
    background: var(--accent);
}

.switch-row input:checked ~ .switch::after {
    transform: translateX(20px);
}

.switch-row:active input:checked ~ .switch::after {
    transform: translateX(14px);
}

.switch-row input:focus-visible ~ .switch {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.switch-row input:checked ~ .switch-row__price {
    color: var(--ink);
}

.total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 8px;
}

.total__label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 21px;
    letter-spacing: -0.02em;
}

.total__sum {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.25rem, 4vw, 3rem);
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

/* Нижняя плашка с итогом */
.buybar {
    position: fixed;
    inset: auto 0 0;
    z-index: 90;
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(28, 28, 31, 0.82);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid rgba(233, 223, 204, 0.08);
    transform: translateY(110%);
    transition: transform 0.5s var(--ease-out);
}

.buybar.is-on {
    transform: none;
}

.buybar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: min(1180px, 100% - var(--gutter) * 2);
    min-height: 64px;
    margin-inline: auto;
}

.buybar__text {
    font-size: 15px;
    color: var(--ink-2);
}

.buybar__text b {
    margin-left: 8px;
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Заявка
   ========================================================================== */

.contact {
    padding: var(--section) 0;
    background: var(--bg-alt);
}

.contact__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
}

.contacts {
    display: grid;
    gap: 12px;
    margin-top: 40px;
    list-style: none;
}

.tg {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    max-width: 360px;
    border-radius: var(--radius-md);
    background: var(--bg);
    color: var(--ink);
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.tg:hover {
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.25);
}

.tg__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
}

.tg__icon svg {
    width: 24px;
    height: 24px;
    margin-left: -2px;
}

.tg__text {
    display: grid;
}

.tg__label {
    color: var(--ink-2);
    font-size: 13px;
}

.tg__handle {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 21px;
    letter-spacing: -0.02em;
}

.lead {
    position: relative;
    display: grid;
    gap: 14px;
}

/* Поле с подписью, которая уезжает вверх */
.field {
    position: relative;
}

.field input,
.field textarea {
    width: 100%;
    padding: 26px 16px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--bg);
    color: var(--ink);
    font: 400 17px/1.3 var(--font-text);
    letter-spacing: -0.01em;
    transition: border-color 0.2s, box-shadow 0.2s;
    resize: vertical;
}

.field textarea {
    min-height: 112px;
}

.field label {
    position: absolute;
    left: 17px;
    top: 18px;
    color: var(--ink-2);
    font-size: 17px;
    pointer-events: none;
    transform-origin: left top;
    transition: transform 0.25s var(--ease-out), color 0.2s;
}

.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.3);
}

.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
    transform: translateY(-10px) scale(0.72);
}

.field input[aria-invalid='true'] {
    border-color: var(--danger);
    background: rgba(255, 122, 107, 0.08);
}

.field__error {
    display: block;
    min-height: 0;
    margin-top: 6px;
    color: var(--danger);
    font-size: 13px;
}

.field__error:empty {
    display: none;
}

.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.lead__summary {
    color: var(--ink-2);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.lead__summary b {
    color: var(--ink);
    font-weight: 600;
}

.lead .btn {
    justify-self: start;
    min-width: 220px;
}

.lead .btn[disabled] {
    opacity: 0.55;
    cursor: progress;
}

.lead__status {
    min-height: 1.4em;
    color: var(--danger);
    font-size: 15px;
}

.lead__done {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 8px;
    padding: 24px;
    border-radius: var(--radius-lg);
    background: var(--bg-alt);
    text-align: center;
}

.lead__done[hidden] {
    display: none;
}

/* После отправки форма прячется под панелью успеха */
.lead.is-done > :not(.lead__done) {
    visibility: hidden;
}

.lead__done svg {
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
    color: var(--accent);
}

.lead__done circle {
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: draw 0.7s var(--ease-out) forwards;
}

.lead__done path {
    stroke-dasharray: 36;
    stroke-dashoffset: 36;
    animation: draw 0.45s var(--ease-out) 0.55s forwards;
}

@keyframes draw {
    to { stroke-dashoffset: 0; }
}

.lead__done-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 28px;
    letter-spacing: -0.03em;
}

.lead__done-text {
    max-width: 24rem;
    color: var(--ink-2);
}

/* ---------- Подвал ---------- */

.footer {
    padding: 24px 0 calc(24px + env(safe-area-inset-bottom));
    background: var(--bg-alt);
    border-top: 1px solid var(--line);
    color: var(--ink-2);
    font-size: 12px;
}

.footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
}

/* ==========================================================================
   Адаптив
   ========================================================================== */

@media (max-width: 1024px) {
    .bento,
    .partners__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tile--wide {
        grid-column: 1 / -1;
    }

    .partners__grid .partner:last-child {
        grid-column: 1 / -1;
        min-height: 0;
    }
}

@media (max-width: 833px) {
    body {
        font-size: 16px;
    }

    .nav__menu {
        position: fixed;
        inset: calc(52px + env(safe-area-inset-top)) 0 auto;
        height: calc(100svh - 52px - env(safe-area-inset-top));
        margin: 0;
        padding: 16px var(--gutter);
        background: rgba(11, 11, 12, 0.96);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.35s var(--ease-out), visibility 0s 0.35s;
    }

    .nav.is-dark .nav__menu {
        background: rgba(0, 0, 0, 0.96);
    }

    .nav.is-open .nav__menu {
        visibility: visible;
        opacity: 1;
        transition: opacity 0.35s var(--ease-out);
    }

    .nav__menu ul {
        flex-direction: column;
        gap: 4px;
    }

    .nav__menu a {
        display: block;
        padding: 10px 0;
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 28px;
        letter-spacing: -0.03em;
        opacity: 1;
    }

    .nav__menu li {
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
    }

    .nav.is-open .nav__menu li {
        opacity: 1;
        transform: none;
        transition-delay: calc(var(--i) * 40ms + 60ms);
    }

    .nav__cta {
        margin-left: auto;
    }

    .nav__burger {
        display: block;
    }

    .carousel__footer {
        gap: 16px;
    }

    .bento,
    .partners__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tile,
    .tile--wide {
        grid-column: auto;
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        padding: 28px;
    }

    .tile--wide .tile__text {
        flex: none;
    }

    .mock-browser {
        margin: 0 -28px -28px 0;
        min-height: 260px;
    }

    .mock-map {
        margin: 0 -28px -28px;
    }

    .mock-chart__bars {
        height: 160px;
    }

    .partner {
        min-height: 0;
        padding: 28px;
    }

    .partners__grid .partner:last-child {
        grid-column: auto;
    }




    .config,
    .contact__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Картинка и итог в одной панели, которая держится под шапкой, пока листаешь опции */
    .config__visual {
        position: sticky;
        top: calc(52px + env(safe-area-inset-top) + 10px);
        z-index: 5;
        aspect-ratio: auto;
        grid-template-columns: clamp(124px, 40vw, 168px) minmax(0, 1fr);
        align-items: center;
        place-items: center start;
        gap: 14px;
        padding: 20px 18px 20px 12px;
        border-radius: 22px;
        background: rgba(28, 28, 31, 0.9);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        box-shadow: 0 0 0 1px rgba(233, 223, 204, 0.06), 0 14px 34px -20px rgba(0, 0, 0, 0.7);
        overflow: visible;
    }

    /* Веер сайтов крупнее: скриншоты должны читаться и на телефоне */
    .pages {
        justify-self: center;
        width: clamp(74px, 24vw, 100px);
    }

    .pages__sheet {
        border-radius: 8px;
    }

    .pages__badge {
        display: none;
    }

    .config__summary {
        display: grid;
        gap: 2px;
        min-width: 0;
    }

    .config__summary-label {
        color: var(--ink-2);
        font-size: 13px;
    }

    .config__summary-sum {
        font-family: var(--font-display);
        font-weight: 600;
        font-size: clamp(24px, 7.4vw, 30px);
        line-height: 1.1;
        letter-spacing: -0.035em;
        font-variant-numeric: tabular-nums;
    }

    .config__summary-plan {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        color: var(--ink-2);
        font-size: 13px;
        line-height: 1.35;
    }

    /* Нижний итог дублирует панель: прячем визуально, но оставляем для экранного чтения */
    .total {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .config__cta {
        display: flex;
        width: 100%;
        min-height: 52px;
    }

    .buybar {
        display: none;
    }

    /* Компактные опции: весь конфигуратор помещается примерно в один экран */
    .config {
        gap: 20px;
        margin-top: 28px;
    }

    .group {
        margin-bottom: 20px;
    }

    .group__title {
        margin-bottom: 10px;
        font-size: 17px;
    }

    .option {
        margin-bottom: 8px;
    }

    .option__box {
        padding: 12px 16px;
    }

    .option__desc,
    .switch-row__desc {
        font-size: 13px;
    }

    .switch-row {
        padding: 10px 0;
        gap: 12px;
    }

    .buybar__text span {
        display: none;
    }

    .buybar__text b {
        margin-left: 0;
        font-size: 17px;
    }

    .lead .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }












}

/* Стрелки по бокам от точек: ‹ • • • › */
.carousel__controls [data-prev] {
    order: -1;
}

/* ==========================================================================
   Согласия в форме заявки
   ========================================================================== */

.checks {
    display: grid;
    gap: 12px;
}

.check {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 4px 12px;
    align-items: start;
}

.check input {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    border: 1.5px solid var(--line-strong);
    border-radius: 6px;
    background: var(--bg) center / 14px no-repeat;
    cursor: pointer;
    transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), transform 0.16s var(--ease-out);
}

.check input:checked {
    border-color: var(--accent);
    background-color: var(--accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='m3 7.5 2.6 2.6L11 4.5' fill='none' stroke='%230B0B0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.check input:active {
    transform: scale(0.92);
}

.check input[aria-invalid='true'] {
    border-color: var(--danger);
}

.check label {
    font-size: 15px;
    line-height: 1.4;
    cursor: pointer;
}

.check .field__error {
    grid-column: 2;
    margin-top: 0;
}

.checks__note {
    color: var(--ink-2);
    font-size: 13px;
}

.price-note {
    margin-top: 8px;
    color: var(--ink-2);
    font-size: 12px;
}

/* ==========================================================================
   Подвал со ссылками на документы
   ========================================================================== */

.footer__inner--docs {
    align-items: flex-start;
    gap: 16px 48px;
}

.footer__inner--docs p + p {
    margin-top: 4px;
}

.footer__docs {
    display: grid;
    justify-items: start;
}

/* Высота строки 4 + 17.6 + 4 ≥ 24px — палец попадает в нужный документ */
.footer__docs a {
    padding-block: 4px;
    color: var(--ink-2);
}

.footer__docs a:hover,
.footer__docs a[aria-current='page'] {
    color: var(--ink);
}

/* ==========================================================================
   Страницы документов
   ========================================================================== */

.doc-page {
    background: var(--bg);
}

.doc-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    padding-top: env(safe-area-inset-top);
    background: rgba(11, 11, 12, 0.8);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(233, 223, 204, 0.08);
}

.doc-nav__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    width: min(760px, 100% - var(--gutter) * 2);
    margin-inline: auto;
    font-size: 15px;
}

.legal {
    width: min(760px, 100% - var(--gutter) * 2);
    margin: 0 auto;
    padding: clamp(48px, 8vw, 88px) 0 clamp(64px, 10vw, 120px);
    font-size: 17px;
    line-height: 1.6;
}

.legal h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.legal__meta {
    margin: 12px 0 40px;
    color: var(--ink-2);
    font-size: 15px;
}

.legal h2 {
    margin: 48px 0 12px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.025em;
    scroll-margin-top: 72px;
}

.legal p,
.legal ul {
    max-width: 68ch;
}

.legal p + p {
    margin-top: 12px;
}

.legal ul {
    margin: 12px 0;
    padding-left: 1.2em;
}

.legal li + li {
    margin-top: 6px;
}

.legal__toc {
    padding: 20px 24px;
    border-radius: var(--radius-md);
    background: var(--bg-alt);
}

.legal__toc ol {
    columns: 2;
    column-gap: 32px;
    padding-left: 1.2em;
    font-size: 15px;
}

.legal__toc li + li {
    margin-top: 4px;
}

.legal__table {
    margin: 16px 0 20px;
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--line);
}

.legal table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.45;
}

.legal th,
.legal td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.legal th {
    background: var(--bg-alt);
    font-weight: 600;
}

.legal tr:last-child td {
    border-bottom: 0;
}

@media (max-width: 833px) {
    .legal__toc ol {
        columns: 1;
    }

    .footer__inner--docs {
        flex-direction: column;
    }
}

/* ==========================================================================
   Чат-бот: отдельная услуга, 3D-телефон с примером диалога
   ========================================================================== */

.bot {
    padding: var(--section) 0;
    overflow: hidden;
}

.bot__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
}

.bot__lead {
    max-width: 30rem;
    margin-top: 20px;
    color: var(--ink-2);
    font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
}

.bot__features {
    margin-top: 32px;
    list-style: none;
    border-top: 1px solid var(--line);
}

.bot__features li {
    display: grid;
    gap: 2px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.bot__features b {
    font-weight: 600;
}

.bot__features span {
    color: var(--ink-2);
    font-size: 15px;
}

.bot__buy {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    margin-top: 32px;
}

.bot__price {
    display: grid;
}

.bot__price-label {
    color: var(--ink-2);
    font-size: 13px;
}

.bot__price-sum {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

/* Сцена: перспектива и мягкое золотое свечение за телефоном */
.bot__stage {
    position: relative;
    display: grid;
    justify-items: center;
    perspective: 1600px;
    padding: 24px 0 8px;
}

.bot__stage::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 42%;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(176, 141, 87, 0.22), rgba(176, 141, 87, 0));
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.phone {
    position: relative;
    width: 300px;
    height: 620px;
    transform-style: preserve-3d;
    transform: rotateX(6deg) rotateY(-18deg) rotateZ(1.5deg);
    will-change: transform;
}

/* Корпус и два слоя торца: при повороте видна толщина телефона */
.phone__body,
.phone__edge {
    position: absolute;
    inset: 0;
    border-radius: 52px;
}

.phone__edge--1 {
    background: linear-gradient(160deg, #6b5636, #2a241b 55%, #4a3d28);
    transform: translateZ(2px);
}

.phone__edge--2 {
    background: linear-gradient(160deg, #4a3d28, #1a1712 60%, #3a3022);
    transform: translateZ(-6px);
}

.phone__body {
    padding: 12px;
    background: linear-gradient(150deg, #2c2a26, #121214 45%, #24221f);
    box-shadow:
        inset 0 0 0 2px rgba(176, 141, 87, 0.6),
        inset 0 0 0 5px #0b0b0c;
    transform: translateZ(8px);
}

.phone__key {
    position: absolute;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #6b5636, #b08d57);
}

.phone__key--action { left: -3px; top: 112px; height: 28px; }
.phone__key--up { left: -3px; top: 160px; height: 54px; }
.phone__key--down { left: -3px; top: 226px; height: 54px; }
.phone__key--power { right: -3px; top: 180px; height: 86px; }

.phone__screen {
    position: absolute;
    inset: 12px;
    border-radius: 41px;
    background: #121214;
    overflow: hidden;
}

.phone__island {
    position: absolute;
    top: 11px;
    left: 50%;
    z-index: 3;
    width: 96px;
    height: 28px;
    border-radius: 20px;
    background: #000;
    transform: translateX(-50%);
}

.phone__glare {
    position: absolute;
    inset: 0;
    border-radius: 52px;
    background: linear-gradient(115deg, rgba(233, 223, 204, 0.12) 0%, rgba(233, 223, 204, 0) 34%);
    pointer-events: none;
}

.phone__floor {
    width: 240px;
    height: 36px;
    margin-top: 18px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    filter: blur(6px);
}

.bot__caption {
    margin-top: 12px;
    color: var(--ink-2);
    font-size: 13px;
    text-align: center;
}

/* Интерфейс чата внутри экрана */
.chat {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 48px;
    font-size: 12.5px;
    line-height: 1.35;
    letter-spacing: -0.005em;
}

.chat__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 10px;
    border-bottom: 1px solid rgba(233, 223, 204, 0.06);
}

.chat__avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
}

.chat__title {
    display: grid;
    font-weight: 600;
    font-size: 13px;
}

.chat__title small {
    color: var(--ink-2);
    font-weight: 400;
    font-size: 11px;
}

.chat__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    min-height: 0;
    padding: 10px;
    overflow: hidden;
}

.msg {
    max-width: 82%;
    padding: 8px 11px;
    border-radius: 16px;
}

.msg--in {
    align-self: flex-start;
    background: var(--surface-2);
    border-bottom-left-radius: 6px;
    transform-origin: bottom left;
}

.msg--out {
    align-self: flex-end;
    background: var(--accent);
    color: var(--on-accent);
    border-bottom-right-radius: 6px;
    transform-origin: bottom right;
}

.msg--paid {
    background: rgba(176, 141, 87, 0.16);
    color: var(--ink);
}

.msg__keys {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-top: 8px;
}

.msg__keys--one {
    grid-template-columns: 1fr;
}

.msg__keys i {
    padding: 6px 4px;
    border-radius: 9px;
    background: rgba(233, 223, 204, 0.08);
    font-style: normal;
    text-align: center;
    transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.16s var(--ease-out);
}

/* Без проигрывания (нет JS или движение отключено) сразу видно, что выбрал клиент */
.chat:not(.is-armed) .msg__keys i[data-press],
.msg__keys i.is-pressed {
    background: var(--accent);
    color: var(--on-accent);
    transform: scale(0.96);
}

.typing {
    display: none;
    align-self: flex-start;
    gap: 4px;
    padding: 11px 12px;
    border-radius: 16px;
    border-bottom-left-radius: 6px;
    background: var(--surface-2);
}

.typing i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink-2);
    animation: typing-dot 1.2s var(--ease-in-out) infinite;
}

.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-dot {
    0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

.chat__input {
    margin: 6px 10px 16px;
    padding: 9px 14px;
    border-radius: 18px;
    background: var(--bg-alt);
    color: var(--ink-2);
    font-size: 12px;
}

/* Пошаговый показ диалога — только с JS и разрешённым движением; иначе виден весь диалог */
@media (prefers-reduced-motion: no-preference) {
    .js .chat.is-armed .msg {
        display: none;
    }

    .js .chat.is-armed .msg.is-shown {
        display: block;
        animation: msg-in 0.45s var(--ease-out);
    }

    .js .chat.is-armed .typing.is-on {
        display: flex;
        animation: msg-in 0.3s var(--ease-out);
    }
}

@keyframes msg-in {
    from { opacity: 0; transform: translateY(8px) scale(0.97); filter: blur(4px); }
    to { opacity: 1; transform: none; filter: none; }
}

/* Заявка на бота в сводке формы */
.lead__summary .link-btn {
    margin-left: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    cursor: pointer;
}

.lead__summary .link-btn:hover {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

@media (max-width: 833px) {
    .bot__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .bot__stage {
        padding-top: 8px;
    }

    .bot__stage::before {
        width: 420px;
        height: 420px;
    }

    .phone {
        scale: 0.86;
        margin: -40px 0 -48px;
    }

    .bot__buy .btn {
        width: 100%;
    }
}

/* ==========================================================================
   Конфигуратор: подарок и предоплата
   ========================================================================== */

.gift-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}

.gift-row__badge {
    padding: 4px 12px;
    border: 1px solid var(--accent);
    border-radius: 980px;
    color: var(--accent);
    font-size: 13px;
    white-space: nowrap;
}

.prepay {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 6px;
}

.prepay__label {
    color: var(--ink-2);
    font-size: 15px;
}

.prepay__sum {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 24px;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.config__summary-prepay {
    color: var(--ink-2);
    font-size: 13px;
}

.config__summary-prepay b {
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (min-width: 834px) {
    .config__summary-prepay {
        display: none;
    }
}

@media (max-width: 833px) {
    .gift-row {
        padding: 10px 0;
        gap: 12px;
    }

    /* На телефоне предоплата видна в липкой панели рядом с итогом */
    .prepay {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
}

/* ==========================================================================
   Сборка: сцена чистого чёрного, сайт собирается по деталям при прокрутке
   По умолчанию (без JS и при reduced motion) показан готовый сайт и все фразы;
   «разобранное» состояние и закреплённая сцена — только под .js и разрешённым движением.
   ========================================================================== */

.build {
    position: relative;
    background: var(--black);
    color: var(--on-black);
}

.build__stage {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    padding: 96px 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
    width: min(1180px, 100% - var(--gutter) * 2);
    margin-inline: auto;
}

/* Мягкое золотое свечение под «рабочим столом» */
.build__stage::before {
    content: '';
    position: absolute;
    left: 28%;
    top: 55%;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(176, 141, 87, 0.16), rgba(176, 141, 87, 0));
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.build__scene {
    position: relative;
    display: grid;
    place-items: center;
    perspective: 1800px;
    perspective-origin: 50% 30%;
}

.build__site {
    --page-w: min(440px, 34vw);
    position: relative;
    width: var(--page-w);
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
}

.build__chrome {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 12px;
    border-radius: 12px 12px 0 0;
    background: #222226;
    border: 1px solid rgba(233, 223, 204, 0.1);
    border-bottom: 0;
}

.build__chrome i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #45413a;
}

.build__chrome span {
    margin-left: 10px;
    padding: 2px 10px;
    border-radius: 5px;
    background: var(--bg);
    color: var(--ink-2);
    font-size: 10px;
}

/* Холст: в разобранном состоянии пунктирный контур, затем заливается фоном сайта */
.build__page {
    --fill: 1;
    position: relative;
    aspect-ratio: 908 / 1100;
    border-radius: 0 0 12px 12px;
    outline: 1px dashed rgba(176, 141, 87, calc(0.6 - var(--fill) * 0.6));
    outline-offset: -1px;
    transform-style: preserve-3d;
}

.build__page::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #f6f0e8;
    opacity: var(--fill);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
}

.piece {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    border-radius: 6px;
    transition: box-shadow 0.4s var(--ease-out);
}

.build__text {
    position: relative;
    display: grid;
    gap: 28px;
}

.build__lines {
    position: relative;
    display: grid;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.06;
    letter-spacing: -0.035em;
}

.build__line {
    font: inherit;
    text-wrap: balance;
}

.build__line[data-line='2'] {
    color: var(--on-black-2);
}

.build__cta {
    justify-self: start;
    color: var(--accent-hover);
    font-size: 19px;
    white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
    .js .build {
        height: 380vh;
    }

    .js .build__stage {
        position: sticky;
        top: 0;
        height: 100vh;
        height: 100svh;
        min-height: 0;
        padding: 0;
    }

    .js .build__site {
        transform: translateY(22%) rotateX(54deg) rotateZ(-26deg) scale(0.8);
        will-change: transform;
    }

    .js .build__page {
        --fill: 0;
    }

    .js .piece {
        box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(176, 141, 87, 0.35);
        transform: translate3d(0, -10%, var(--z));
        will-change: transform, opacity;
    }

    /* Деталь встала на место: тень и золотой контур пропадают */
    .js .piece.is-set {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(176, 141, 87, 0);
    }

    .js .build__lines {
        display: block;
        min-height: 3.4em;
    }

    .js .build__line {
        position: absolute;
        inset: auto 0 0;
        opacity: 0;
        transform: translateY(24px);
        filter: blur(8px);
        transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), filter 0.7s var(--ease-out);
    }

    .js .build__line.is-on {
        opacity: 1;
        transform: none;
        filter: none;
    }

    .js .build__cta {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
        pointer-events: none;
    }

    .js .build__cta.is-on {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}

@media (max-width: 833px) {
    .build__stage {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
        gap: 24px;
        padding: 72px 0 40px;
    }

    .build__stage::before {
        left: 50%;
        top: 40%;
        width: 420px;
        height: 420px;
    }

    .build__site {
        --page-w: min(300px, 74vw);
    }

    .build__text {
        gap: 16px;
        text-align: center;
    }

    .build__lines {
        font-size: clamp(1.75rem, 8vw, 2.25rem);
    }

    .build__cta {
        justify-self: center;
        font-size: 17px;
    }
}

@media (max-width: 833px) and (prefers-reduced-motion: no-preference) {
    .js .build {
        height: 320vh;
    }

    .js .build__stage {
        gap: 8px;
        padding: 64px 0 max(28px, env(safe-area-inset-bottom));
    }

    .js .build__lines {
        min-height: 2.3em;
    }
}

/* ==========================================================================
   Страницы под ниши (цветочный магазин, тренажёрный зал)
   Та же грамматика, что на главной: двухтоновые заголовки, смена фона секций, золото только на действиях
   ========================================================================== */

.niche-page .doc-nav__bar {
    width: min(1180px, 100% - var(--gutter) * 2);
}

.niche__hero {
    padding: clamp(72px, 12vw, 152px) 0 clamp(64px, 9vw, 112px);
    text-align: center;
}

.niche__title {
    max-width: 16ch;
    margin-inline: auto;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.5rem, 6.4vw, 5rem);
    line-height: 1.03;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.niche__section {
    padding: var(--section) 0;
}

.niche__section--alt {
    background: var(--bg-alt);
}

.niche__section .headline {
    margin-bottom: clamp(36px, 4vw, 48px);
}

.niche__works {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 440px));
    gap: 20px;
}

.niche-card {
    display: block;
    color: var(--ink);
}

.niche-card:hover {
    text-decoration: none;
}

.niche-card__shot {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--bg-alt);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 18px 40px -16px rgba(0, 0, 0, 0.22);
}

.niche-card__shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 0.8s var(--ease-out);
}

.niche-card:hover .niche-card__shot img {
    transform: scale(1.03);
}

.niche-card__name {
    margin-top: 20px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.17;
    letter-spacing: -0.025em;
}

.niche-card__meta {
    margin-top: 2px;
    color: var(--ink-2);
    font-size: 15px;
}

.niche-card__meta span {
    color: var(--accent);
}

.niche-card:hover .niche-card__meta span {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.niche__list {
    max-width: 760px;
    list-style: none;
    border-top: 1px solid var(--line);
}

.niche__list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 24px;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}

.niche__list b {
    font-weight: 600;
}

.niche__list p {
    grid-column: 1;
    color: var(--ink-2);
    font-size: 15px;
}

.niche__price {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 21px;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.niche__gift {
    padding: 3px 10px;
    border: 1px solid var(--accent);
    border-radius: 980px;
    color: var(--accent);
    font: 400 13px/1.4 var(--font-text);
    letter-spacing: 0;
}

.niche__note {
    max-width: 760px;
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    color: var(--ink-2);
    font-size: 15px;
}

.niche__text {
    max-width: 36rem;
    color: var(--ink-2);
    font-size: clamp(1.1875rem, 1.6vw, 1.5rem);
    line-height: 1.38;
    letter-spacing: -0.02em;
}

.niche__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 32px;
    margin-top: 40px;
}

.niche__actions .link-arrow {
    font-size: 17px;
}

.footer__niches {
    display: grid;
    justify-items: start;
}

.footer__niches a {
    padding-block: 4px;
    color: var(--ink-2);
}

.footer__niches a:hover,
.footer__niches a[aria-current='page'] {
    color: var(--ink);
}

@media (max-width: 833px) {
    .niche__list li {
        grid-template-columns: minmax(0, 1fr);
    }

    .niche__price {
        grid-column: 1;
        grid-row: auto;
        font-size: 19px;
    }
}