:root {
    --white: #FFFFFF;
    --snow: #FAFBFC;
    --ash: #F2F3F5;
    --mist: #E8EAED;
    --smoke: #C4C8CF;
    --slate: #8A8F98;
    --ink: #1f3a52;
    --blue-pale: #EDF2FF;
    --blue-light: #B4C6FC;
    --blue: #4A6CF7;
    --blue-deep: #2A4AD4;
    --blue-ink: #1B2F80;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: "Russo One", sans-serif;
    /* 16:9 media: явные width+height (iOS не считает width из height+aspect-ratio) */
    --media-h-portrait: max(22vh, 80px);
    --media-w-portrait: min(100%, calc(max(22vh, 80px) * 16 / 9));
    --media-h-landscape: 32vh;
    --media-w-landscape: min(100%, calc(32vh * 16 / 9));
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
html {
    font-family: var(--font);
    background: var(--white);
    color: var(--ink);
    overflow: hidden;
    width: 100%;
    height: 100%;
    overscroll-behavior: none;
}

#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.grain-overlay {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.022;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 256px 256px;
}

/* 3D-дом: над фоном, под текстом */
#sceneLayer {
    position: fixed;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

#threeCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

/* PCB: над фоном/3D, под текстом; уезжает вниз после screen 3 */
#pcbOverlay {
    position: fixed;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    will-change: transform, opacity, top, left, width;
}

#pcbOverlay img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.18));
}

.scroll-container {
    position: relative;
    z-index: 2;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.screen {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    width: 100%;
}

.screen-content {
    width: 100%;
    max-width: 1200px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 4rem;
    align-content: center;
    height: 100%;
}

.block-a,
.block-b {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

h1,
h2 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

h1 {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
}

h2 {
    font-size: clamp(2rem, 3.5vw, 3rem);
}

p {
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    color: var(--ink);
}

.block-16x9 {
    aspect-ratio: 16 / 9;
    max-width: 380px;
    width: 100%;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    margin-top: 1rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.media-row {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin-top: 1rem;
    width: 100%;
    max-width: 520px;
}

.media-row .block-16x9 {
    margin-top: 0;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 380px;
}

.media-row .mic-inline-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    position: relative;
}

.media-row .mic-inline {
    display: block;
    height: auto;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.16));
}

/* Caption typewriter у mic (без mic-fly) */
.mic-caption {
    position: absolute;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 2px solid #1e4a72;
    border-radius: 10px;
    background: rgba(44, 92, 133, 0.94);
    color: #fff;
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
    box-shadow: 0 6px 18px rgba(31, 58, 82, 0.22);
    pointer-events: none;
    z-index: 9;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    white-space: nowrap;
}

.mic-caption.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.mic-caption--inline {
    /* left: calc(100% + 8px); */
    bottom: 30%;
    min-width: 260px;
}

.mic-caption--portrait {
    display: none;
    /* left: calc(12px + 25vw + 8px); */
    bottom: 30%;
    min-width: 260px;
    white-space: normal;
    font-size: 12px;
}

.mic-caret {
    display: inline-block;
    margin-left: 1px;
    animation: micCaretBlink 0.9s step-end infinite;
}

@keyframes micCaretBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

#micOverlay {
    display: none !important;
}

.mic-portrait {
    display: none;
}

#signalWavesLayer {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.signalWave {
    position: fixed;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 255, 0.42);
    background: rgba(0, 0, 255, 0.14);
    box-shadow: 0 0 18px rgba(0, 0, 255, 0.16);
    pointer-events: none;
    will-change: left, top, transform, opacity;
}

/* flatsTableWrap / original-transform — как в building-3d */
.wrap-original-transform {
    width: 100%;
    max-width: 480px;
    margin-top: 1rem;
}

/* Screen 2: таблица + полоса прокрутки справа (жесты по таблице → страница) */
.hero2MediaRow {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: calc(480px + 35px);
    margin-top: 1rem;
}

.hero2MediaRow .flatsTableWrap {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
}

.hero2VScroll {
    flex: 0 0 35px;
    position: relative;
    align-self: stretch;
    min-height: 0;
    touch-action: none;
    cursor: pointer;
    user-select: none;
}

.hero2VScrollTrack {
    position: absolute;
    inset: 0;
    border-radius: 100px;
    background: rgba(31, 58, 82, 0.12);
    box-shadow: inset 0 0 0 1px rgba(31, 58, 82, 0.08);
}

.hero2VScrollThumb {
    position: absolute;
    left: 2px;
    right: 2px;
    top: 0;
    height: 40px;
    border-radius: 100px;
    background: #2c5c85;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    cursor: grab;
    touch-action: none;
}

.hero2VScrollThumb:active,
.hero2VScroll.is-dragging .hero2VScrollThumb {
    cursor: grabbing;
    background: #1f4363;
}

.flatsTableWrap {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #1a1a1a;
    padding: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
    border-radius: 12px;
}

.flatsTableInner {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.browserChrome {
    flex-shrink: 0;
    background: linear-gradient(180deg, #ececef 0%, #e3e3e8 100%);
    padding: 8px 10px 7px;
    border-bottom: 1px solid #c8c8cd;
}

.browserToolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
}

.browserTraffic {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.browserTraffic span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.12);
}

.browserTraffic span:nth-child(1) { background: #ff5f57; }
.browserTraffic span:nth-child(2) { background: #febc2e; }
.browserTraffic span:nth-child(3) { background: #28c840; }

.browserAddressBar {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #c8c8cd;
    border-radius: 6px;
    padding: 4px 8px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.browserLock {
    flex-shrink: 0;
    width: 10px;
    height: 11px;
    color: #28a745;
}

.browserUrl {
    min-width: 0;
    font-size: 11px;
    line-height: 1.3;
    color: #1f3a52;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.browserUrlPrefix {
    color: #6b7c8f;
    font-weight: 400;
}

.browserContent {
    flex: 1;
    min-height: 0;
    padding: 0 12px;
    background: #fff;
}

/* Содержимое крутится только полосой справа; жесты → .scroll-container / snap */
.screen-2 .browserContent {
    overflow: hidden;
    overscroll-behavior: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.screen-2 .browserContent::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.flatsTableTitle {
    margin: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #1f3a52;
}

.flatsTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.4;
}

.flatsTable th,
.flatsTable td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(31, 58, 82, 0.1);
    white-space: nowrap;
}

.flatsTable th {
    position: sticky;
    top: 0;
    background: #fff;
    color: #1f3a52;
    font-weight: 600;
}

.flatsTable td {
    color: #3d5568;
}

.flatsTable tbody tr {
    cursor: pointer;
    transition: background 120ms ease;
}

.flatsTable tbody tr.is-selected {
    background: rgba(44, 92, 133, 0.12);
}

/* Hero2 cursor demo (screen 2) */
.hero2CursorDemo {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.hero2CursorDemo.is-offscreen,
.hero2CursorDemo.is-dismissed {
    opacity: 0;
    visibility: hidden;
}

.hero2DemoCursor {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.22));
    transform: translate(-4px, -4px);
    transition:
        left 0.65s cubic-bezier(0.4, 0, 0.2, 1),
        top 0.65s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.12s ease;
    transform-origin: 4px 4px;
}

.hero2DemoCursor.is-clicking {
    transform: translate(-4px, -2px) scale(0.88);
}

.hero2DemoClickRing {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 30px;
    border: 2px solid rgba(44, 92, 133, 0.55);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transform: translate(-4px, -4px);
}

.hero2DemoClickRing.is-active {
    animation: hero2DemoClickPulse 450ms ease-out forwards;
}

@keyframes hero2DemoClickPulse {
    0% { transform: translate(-4px, -4px) scale(0.35); opacity: 0.8; }
    100% { transform: translate(-4px, -4px) scale(1.55); opacity: 0; }
}

/* Screen 3: браузер-оболочка внутри block-16x9 */
.screen-3 .block-16x9.flatsTableWrap {
    background: #1a1a1a;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
    /* как screen-2: hidden, без contain:layout — иначе iOS ломает 16:9 */
    overflow: hidden;
    isolation: isolate;
    overscroll-behavior: auto;
}

.screen-3 .block-16x9.flatsTableWrap .browserChrome,
.screen-3 .block-16x9.flatsTableWrap .browserToolbar,
.screen-3 .block-16x9.flatsTableWrap .browserAddressBar,
.screen-3 .block-16x9.flatsTableWrap .browserUrl {
    min-width: 0;
}

/* «9» и «14» одной ширины — иначе URL чуть раздвигает chrome */
#hero3BrowserFlatSlug {
    display: inline-block;
    min-width: 2ch;
    text-align: left;
    font-variant-numeric: tabular-nums;
}

.screen-3 .browserAddressBar.is-loading::after {
    pointer-events: none;
}

.screen-3 .flatsTableInner,
.screen-3 .hero3BrowserContent,
.screen-3 .flatPage,
.screen-3 .flatPagePlan,
.screen-3 .hero3PageLoader,
.screen-3 .hero3IntroScreen {
    overflow: clip;
    overscroll-behavior: auto;
}

.screen-3 .hero3BrowserContent {
    position: relative;
    padding: 0;
    flex: 1;
    min-height: 0;
}

.screen-3 .hero3IntroScreen {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.screen-3 .hero3IntroScreen.is-active {
    opacity: 1;
    visibility: visible;
}

.screen-3 .hero3BrowserContent.is-awaiting-flat {
    background: #fff;
}

.screen-3 .hero3BrowserContent.is-awaiting-flat .flatPage {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.screen-3 .flatPage {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.38s ease, visibility 0.38s ease;
    pointer-events: none;
}

.screen-3 .flatPage.is-active {
    opacity: 1;
    visibility: visible;
    /* не ловить тач/wheel — жесты как у обычного декора */
    pointer-events: none;
}

.screen-3 .block-16x9.flatsTableWrap img {
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

.screen-3 .hero3PageLoader {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.screen-3 .hero3PageLoader.is-active {
    opacity: 1;
    visibility: visible;
}

.screen-3 .hero3PageLoaderSpinner {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(44, 92, 133, 0.16);
    border-top-color: #2c5c85;
    border-radius: 50%;
    animation: hero3PageSpin 0.72s linear infinite;
}

.screen-3 .hero3PageLoaderText {
    font-size: 10px;
    color: #6b7c8f;
    letter-spacing: 0.02em;
}

.screen-3 .hero3PageLoaderBar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(44, 92, 133, 0.08);
    overflow: hidden;
}

.screen-3 .hero3PageLoaderBar span {
    display: block;
    height: 100%;
    width: 36%;
    background: linear-gradient(90deg, #2c5c85, #4a8ec4);
    animation: hero3PageLoadBar 0.8s ease-in-out infinite;
}

.screen-3 .flatsTableInner.is-loading .hero3BrowserContent .flatPage {
    opacity: 0;
    visibility: hidden;
}

.screen-3 .browserAddressBar.is-loading {
    position: relative;
}

.screen-3 .browserAddressBar.is-loading::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: rgba(44, 92, 133, 0.1);
    border-radius: 0 0 4px 4px;
}

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

@keyframes hero3PageLoadBar {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}

.flatPageSiteNav {
    flex-shrink: 0;
    font-size: 8px;
    line-height: 1.3;
    color: #6b7c8f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flatPageSiteNav span {
    color: #2c5c85;
}

.flatPageBody {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1.05fr 0.88fr;
    gap: 8px;
    align-items: stretch;
}

.flatPagePlan {
    min-height: 0;
    margin: 0;
    border-radius: 6px;
    overflow: clip;
    border: 1px solid rgba(44, 92, 133, 0.14);
    background: #f6f9fc;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flatPagePlan img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.flatPageInfo {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
}

.flatPageTitle {
    margin: 0;
    font-size: 13px;
    line-height: 1.15;
    font-weight: 700;
    color: #1f3a52;
    font-family: var(--font);
    letter-spacing: 0;
}

.flatPageSpecs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.flatPageSpec {
    background: #f2f6fa;
    border-radius: 5px;
    padding: 4px;
    text-align: center;
}

.flatPageSpec strong {
    display: block;
    font-size: 11px;
    line-height: 1.15;
    color: #1f3a52;
}

.flatPageSpec span {
    font-size: 8px;
    color: #6b7c8f;
    text-transform: lowercase;
}

.flatPageTag {
    margin: 0;
    font-size: 9px;
    line-height: 1.35;
    color: #3d5568;
}

.flatPageTag span {
    display: block;
}

.snap {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.75rem;
    border-radius: 100px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    text-decoration: none;
    /* Не transition: all — иначе JS-сдвиги top/left анимируются и ломают sticky */
    transition:
        transform 0.22s ease,
        background-color 0.22s ease,
        box-shadow 0.22s ease,
        filter 0.22s ease;
    font-size: 0.9375rem;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    transform-origin: center center;
}

.btn-primary {
    background: #ffff7b;
    color: var(--ink);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.btn-secondary {
    background: #2c5c85;
    color: var(--white);
    border: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.btn-dark {
    background: var(--ink);
    color: var(--white);
}

/* Hover только там, где есть настоящий курсор (не touch) */
@media (hover: hover) and (pointer: fine) {
    /* scale чуть сильнее translateY — край кнопки не уезжает из-под курсора */
    .btn-primary:hover {
        background: #ffe400;
        filter: saturate(1.45) brightness(1.05);
        transform: scale(1.05) translateY(-1px);
        box-shadow:
            0 0 12px rgba(255, 230, 60, 0.95),
            0 0 32px rgba(255, 210, 0, 0.7),
            0 0 56px rgba(255, 200, 0, 0.4);
    }

    .btn-secondary:hover {
        background: #1a7ec4;
        filter: saturate(1.35) brightness(1.08);
        transform: scale(1.05) translateY(-1px);
        box-shadow:
            0 0 12px rgba(64, 160, 230, 0.9),
            0 0 32px rgba(40, 130, 200, 0.65),
            0 0 56px rgba(30, 110, 180, 0.4);
    }

    .btn-dark:hover {
        background: #000;
        transform: translateY(-2px);
    }

    .flatsTable tbody tr:hover {
        background: rgba(31, 58, 82, 0.06);
    }
}

.btn-group {
    display: flex;
    gap: 1rem;
    flex-wrap: nowrap;
}

/* Анимация стрелки "вниз" */
.scroll-down {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
    opacity: 0.7;
    z-index: 90;
    pointer-events: none;
    color: var(--ink);
    /* Темный цвет для белого шейдера */
    transition: opacity 0.3s ease;
}

.scroll-down svg {
    width: 32px;
    height: 32px;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0) translateX(-50%);
    }

    40% {
        transform: translateY(-15px) translateX(-50%);
    }

    60% {
        transform: translateY(-7px) translateX(-50%);
    }
}

.screen-0 {
    position: relative;
    display: block;
    background: #000;
    padding: 0;
    overflow: hidden;
}

.screen-0 .intro-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #000;
    touch-action: pan-y;
}

.screen-1,
.screen-2,
.screen-3 {
    background: transparent;
}

.screen-4 {
    background: rgba(0, 0, 0, 0.8);
    color: var(--white);
}

.screen-4 p {
    color: rgba(255, 255, 255, 0.9);
}

.screen-4 h1,
.screen-4 h2 {
    color: var(--white);
}

.screen-5 {
    /*
      site-preview ↔ низ textarea:
      margin-bottom = gap формы + margin-top кнопки «Отправить» + высота кнопки
    */
    --s5-form-gap: 1rem;
    --s5-btn-mt: 0.5rem;
    --s5-btn-pad-y: 0.75rem;
    --s5-btn-fs: 0.9375rem;
    --s5-btn-lh: 1.4;
    --s5-btn-dark-h: calc(2 * var(--s5-btn-pad-y) + var(--s5-btn-fs) * var(--s5-btn-lh));
    background: var(--white);
    color: var(--ink);
}

.screen-5 .block-a,
.screen-5 .block-b {
    justify-content: flex-start;
}

.screen-5 .block-b {
    padding-bottom: 0;
}

.screen-5 .block-16x9 {
    background: var(--snow);
    border-color: var(--mist);
    color: var(--ink);
}

/* Превью-ссылка на revlev.org (низ block-b) */
.screen-5 .site-preview {
    display: flex;
    align-items: stretch;
    margin-top: auto;
    margin-bottom: calc(var(--s5-form-gap) + var(--s5-btn-mt) + var(--s5-btn-dark-h));
    padding-top: 0;
    max-width: 100%;
    width: fit-content;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    border: 1px solid var(--mist);
    border-radius: 12px;
    background: var(--snow);
}

.screen-5 .site-preview-image {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: auto;
    max-width: none;
    height: 116px;
    align-self: stretch;
    aspect-ratio: 320 / 168;
    padding: 0.5rem;
    box-sizing: border-box;
    background: var(--ash) url("../img/og-bg.jpg") center / cover no-repeat;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.screen-5 .site-preview-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    gap: 0.15rem;
    padding: 0.45rem 0.75rem;
    min-width: 0;
    box-sizing: border-box;
}

.screen-5 .site-preview-title {
    display: block;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.screen-5 .site-preview-desc {
    display: block;
    font-family: var(--font);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--ink);
}

.screen-5 .site-preview-url {
    display: block;
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--slate);
}

.form-container {
    margin-top: 2rem;
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feedback-wrap {
    position: relative;
    margin-top: 2rem;
    width: 100%;
    max-width: 420px;
}

.feedback-wrap .form-container {
    margin-top: 0;
}

/* После отправки форма невидима, но место под неё сохраняется */
.feedback-wrap.is-sent .form-container {
    visibility: hidden;
    pointer-events: none;
}

.feedback-success {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

.feedback-success[hidden] {
    display: none;
}

.feedback-wrap.is-sent .feedback-success {
    position: absolute;
    inset: 0;
    display: flex;
}

.feedback-success-text {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--ink);
}

.form-container input,
.form-container textarea {
    width: 100%;
    padding: 0.875rem 1.25rem;
    border: 1px solid var(--smoke);
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    background: var(--snow);
    outline: none;
    transition: border-color 0.2s;
}

.form-container input:focus,
.form-container textarea:focus {
    border-color: var(--blue);
}

/* ===================== MOBILE ===================== */

/* --- Landscape (телефон горизонтально) --- */
/* max-height: ловит широкие телефоны (напр. 932×430), где width > 900 */
@media (max-width: 900px) and (orientation: landscape),
       (orientation: landscape) and (max-height: 500px) {

    .scroll-down {
        display: none;
    }

    /* Secondary только на экранах 1–3 */
    .screen-1 .btn-secondary,
    .screen-2 .btn-secondary,
    .screen-3 .btn-secondary {
        display: none !important;
    }

    .screen {
        padding-top: max(1rem, var(--safe-t));
        padding-bottom: max(1rem, var(--safe-b));
        padding-left: max(1.25rem, var(--safe-l));
        padding-right: max(1.25rem, var(--safe-r));
    }

    h1 {
        font-size: clamp(1.1rem, 5.5vh, 1.75rem);
    }

    h2 {
        font-size: clamp(1rem, 5vh, 1.5rem);
    }

    p {
        font-size: clamp(0.75rem, 3.2vh, 0.8125rem);
        margin-bottom: 0.5rem;
    }

    h1,
    h2 {
        margin-bottom: 0.5rem;
    }

    .screen-content {
        grid-template-columns: 1fr 1fr;
        /* Строго 50/50 */
        gap: 0.75rem 2rem;
        align-content: center;
        height: 100%;
        min-width: 0;
    }

    .block-a,
    .block-b {
        min-width: 0;
    }

    /*
      16:9 — явные width и height из одной формулы (не width:auto + aspect-ratio).
      flex: 0 0 auto — иначе media-row растягивает блок на всю колонку.
    */
    .block-16x9,
    .flatsTableWrap {
        width: var(--media-w-landscape);
        max-width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        flex: 0 0 auto;
        margin-top: 0.4rem;
        overflow: hidden;
        box-sizing: border-box;
    }

    .media-row {
        width: auto;
        max-width: 100%;
        gap: 0.5rem;
        margin-top: 0.4rem;
        align-self: flex-start;
    }

    .media-row .block-16x9 {
        margin-top: 0;
        flex: 0 1 auto;
        width: var(--media-w-landscape);
        max-width: 100%;
        /* высота следует за шириной — иначе mic в ряду сжимает width при фиксированном height */
        height: auto;
        aspect-ratio: 16 / 9;
        min-width: 0;
        overflow: hidden;
    }

    .screen-3 .media-row {
        /* ряд: браузер + mic; не шире колонки */
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .screen-3 .block-16x9.flatsTableWrap {
        flex: 0 1 auto;
        width: var(--media-w-landscape);
        max-width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        min-width: 0;
        overflow: hidden;
    }

    .wrap-original-transform {
        width: var(--media-w-landscape);
        max-width: 100%;
        margin-top: 0.4rem;
        flex-shrink: 0;
    }

    .wrap-original-transform.hero2MediaRow,
    .hero2MediaRow {
        width: calc(var(--media-w-landscape) + 35px);
        max-width: 100%;
        margin-top: 0.4rem;
    }

    .wrap-original-transform .flatsTableWrap {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        margin-top: 0;
    }

    .flatsTableTitle { font-size: 12px; margin: 6px; }
    .flatsTable { font-size: 10px; }
    .flatsTable th,
    .flatsTable td { padding: 4px 6px; }
    .browserChrome { padding: 5px 7px 4px; }
    .browserToolbar { gap: 6px; margin-bottom: 4px; }

    /* CTA — в правой половине экрана */
    .btn-group.main-actions {
        display: flex;
        justify-content: flex-end;
        grid-column: 2;
        width: 100%;
    }

    .btn-group.main-actions>.btn-primary {
        width: 100%;
        justify-content: center;
    }

    .btn {
        padding: 0.55rem 1.1rem;
        font-size: 0.8125rem;
    }

    .screen-5 {
        --s5-btn-pad-y: 0.55rem;
    }

    .form-container {
        max-width: 100%;
        margin-top: 0.5rem;
    }

    #btn-voice {
        display: none !important;
    }

    #spacer-voice,
    #spacer-cta {
        display: none !important;
    }
}

/* --- Portrait (телефон вертикально) --- */
@media (max-width: 900px) and (orientation: portrait) {

    .scroll-down {
        display: none;
    }

    /* Secondary только на экранах 1–3 */
    .screen-1 .btn-secondary,
    .screen-2 .btn-secondary,
    .screen-3 .btn-secondary {
        display: none !important;
    }

    .screen {
        padding-top: max(1.25rem, var(--safe-t));
        padding-bottom: max(1.25rem, var(--safe-b));
        padding-left: max(1.25rem, var(--safe-l));
        padding-right: max(1.25rem, var(--safe-r));
        align-items: stretch;
    }

    /* Шрифты масштабируются по высоте экрана (vh), чтобы текст
       всегда помещался в свою половину block-a */
    h1 {
        font-size: clamp(1.1rem, 3.2vh, 2rem);
        margin-bottom: clamp(0.5rem, 1.2vh, 0.75rem);
    }

    h2 {
        font-size: clamp(1rem, 2.8vh, 1.75rem);
        margin-bottom: clamp(0.4rem, 1vh, 0.75rem);
    }

    p {
        font-size: clamp(0.75rem, 1.8vh, 0.9rem);
        margin-bottom: clamp(0.3rem, 0.8vh, 0.6rem);
        line-height: 1.5;
    }

    /* Блок Б — сверху, Блок А — снизу, строго 50% высоты (экраны 1–3) */
    .screen-content {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 0;
        height: 100%;
        min-width: 0;
    }

    .block-a,
    .block-b {
        min-height: 0;
        min-width: 0;
        overflow: hidden;
    }

    .screen-1 .block-b,
    .screen-2 .block-b,
    .screen-3 .block-b {
        order: -1;
        justify-content: flex-end;
        padding-bottom: 0.75rem;
    }

    .screen-1 .block-a,
    .screen-2 .block-a,
    .screen-3 .block-a {
        justify-content: flex-start;
        padding-top: 0.75rem;
    }

    /* Экраны 4–5: наоборот — А сверху, Б снизу */
    .screen-4 .block-a,
    .screen-5 .block-a {
        justify-content: flex-end;
        padding-bottom: 0.75rem;
    }

    .screen-4 .block-b,
    .screen-5 .block-b {
        justify-content: flex-start;
        padding-top: 0.75rem;
    }

    /* Screen 4: смена А/Б не трогает кнопки —
       кнопка из Б сверху, кнопки из А снизу */
    .screen-4 .block-a,
    .screen-4 .block-b {
        display: contents;
    }

    .screen-4 .screen-content {
        grid-template-rows: none;
        grid-auto-rows: auto;
        align-content: center;
        gap: 0.5rem 0;
    }

    .screen-4 #spacer-cta-dock {
        order: 1;
        margin-bottom: 0.75rem;
        max-width: 100%;
    }

    .screen-4 .block-a > h2 {
        order: 2;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .screen-4 .block-a > p {
        order: 3;
        max-width: 100%;
    }

    .screen-4 .block-b > p {
        order: 4;
        max-width: 100%;
    }

    .screen-4 .block-a > .btn-group {
        order: 5;
        margin-top: 0.75rem;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        gap: 0.75rem;
    }

    .screen-4 .btn {
        width: 100%;
        max-width: 100%;
        white-space: normal;
        box-sizing: border-box;
    }

    /*
      16:9: явные width+height из --media-*-portrait.
      Не полагаться на width:auto + aspect-ratio (Safari/iOS часто ломает до rotate).
      flex: 0 0 auto — media-row иначе растягивает screen-3 на всю ширину.
    */
    .block-16x9,
    .flatsTableWrap {
        width: var(--media-w-portrait);
        max-width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        align-self: flex-start;
        flex: 0 0 auto;
        flex-shrink: 0;
        margin-top: auto;
        overflow: hidden;
        box-sizing: border-box;
    }

    .media-row {
        width: auto;
        max-width: 100%;
        margin-top: auto;
        align-self: flex-start;
        flex: 0 0 auto;
        flex-shrink: 0;
    }

    .media-row .block-16x9 {
        margin-top: 0;
        flex: 0 0 auto;
        width: var(--media-w-portrait);
        max-width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .media-row .mic-inline-wrap {
        display: none;
    }

    .screen-3 .block-16x9.flatsTableWrap {
        width: var(--media-w-portrait);
        max-width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        flex: 0 0 auto;
        overflow: hidden;
    }

    /* Mic только на screen 3: низ block-b, отступ снизу = ½ высоты mic */
    .screen-3 .mic-portrait {
        display: block;
        position: absolute;
        left: 12px; /* как PCB */
        width: 25vw; /* как PCB */
        height: auto;
        aspect-ratio: 409 / 610;
        object-fit: contain;
        /* низ block-b; отступ = половина фактической высоты (width × h/w) */
        bottom: calc(25vw * 610 / 409 / 2);
        margin: 0;
        filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.16));
        pointer-events: none;
        z-index: 1;
    }

    .screen-3 .block-b {
        position: relative;
        overflow: visible;
    }

    .mic-caption--inline {
        display: none;
    }

    .mic-caption--portrait {
        display: block;
    }

    .wrap-original-transform {
        width: var(--media-w-portrait);
        max-width: 100%;
        margin-top: auto;
        align-self: flex-start;
        flex: 0 0 auto;
        flex-shrink: 0;
    }

    .wrap-original-transform.hero2MediaRow,
    .hero2MediaRow {
        width: calc(var(--media-w-portrait) + 35px);
        max-width: 100%;
        margin-top: 0.5rem;
    }

    .wrap-original-transform .flatsTableWrap {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        margin-top: 0;
    }

    .flatsTableTitle { font-size: 12px; margin: 6px; }
    .flatsTable { font-size: 10px; }
    .flatsTable th,
    .flatsTable td { padding: 4px 6px; }
    .browserChrome { padding: 5px 7px 4px; }
    .browserToolbar { gap: 6px; margin-bottom: 4px; }

    /* btn-group — по центру экрана */
    .btn-group.main-actions {
        display: flex;
        justify-content: center;
        grid-column: 1;
        width: 100%;
        margin-top: 1rem;
    }

    .btn-group.main-actions>.btn-primary {
        min-width: 200px;
    }

    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9375rem;
        text-align: center;
    }

    .form-container {
        max-width: 100%;
        margin-top: 0.75rem;
    }
}

/* Мобилка: голос скрыт; стартовые spacer'ы не нужны — «полочка» CTA внизу экрана */
@media (max-width: 900px),
       (orientation: landscape) and (max-height: 500px) {
    #btn-voice {
        display: none !important;
    }

    #spacer-voice,
    #spacer-cta {
        display: none !important;
    }

    /* dvh только на mobile — на desktop 100vh, без лишних пересчётов viewport */
    html,
    body {
        height: 100dvh;
    }

    .scroll-container {
        height: 100dvh;
        overscroll-behavior-y: none;
    }

    .screen {
        height: 100dvh;
    }

    /* Screen 5: высота по контенту. min через svh (не dvh) —
       иначе при клавиатуре dvh скачет и ломает геометрию якоря CTA на screen-4 */
    .screen-5 {
        --s5-form-gap: 0.5rem;
        --s5-btn-mt: 0.5rem;
        --s5-btn-fs: 0.875rem;
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        align-items: flex-start;
        padding-bottom: max(2rem, calc(var(--safe-b) + 1.5rem));
    }

    .screen-5 h2 {
        margin-top: 2rem;
    }

    /* Клавиатура: секции 1–4 не сжимаются с dvh (inline px из JS важнее) */
    html.form-keyboard-lock .screen:not(.screen-5) {
        /* fallback, если inline ещё не проставлен */
        height: var(--lock-screen-h, 100svh);
        min-height: var(--lock-screen-h, 100svh);
        max-height: var(--lock-screen-h, 100svh);
    }

    .screen-5 .screen-content {
        height: auto;
        grid-template-rows: auto auto;
        align-content: start;
        gap: 1.5rem 2rem;
    }

    .screen-5 .block-a,
    .screen-5 .block-b {
        overflow: visible;
        min-height: auto;
        justify-content: flex-start;
        padding-top: 0;
        padding-bottom: 0;
    }

    .screen-5 .form-container {
        margin-top: 1rem;
        gap: 0.5rem;
        max-width: 100%;
    }

    .screen-5 p,
    .screen-5 .form-container input,
    .screen-5 .form-container textarea {
        font-size: 0.875rem;
    }

    .screen-5 .form-container input,
    .screen-5 .form-container textarea {
        padding: 0.5rem 0.85rem;
    }

    .screen-5 .form-container textarea {
        min-height: 4.5em;
    }

    .screen-5 .form-container .btn {
        margin-top: 0.25rem;
        font-size: 0.875rem;
    }

    .screen-5 .site-preview-image {
        height: 88px;
        font-size: 0.8125rem;
    }

    .screen-5 .site-preview-title,
    .screen-5 .site-preview-desc {
        font-size: 0.875rem;
    }

    .screen-5 .site-preview-url {
        font-size: 0.75rem;
    }

    .screen-5 .site-preview-body {
        padding: 0.35rem 0.6rem;
        gap: 0.1rem;
    }
}

/* Screen 5 portrait: А/Б друг под другом; высота = 2×block-a (JS) */
@media (max-width: 900px) and (orientation: portrait) {
    .screen-5 {
        min-height: 0;
        height: auto;
    }

    .screen-5 .screen-content {
        grid-template-columns: 1fr;
        align-content: start;
        gap: 1.5rem 0;
    }

    .screen-5 .block-a,
    .screen-5 .block-b {
        justify-content: flex-start;
        padding-top: 0;
        padding-bottom: 0;
        overflow: visible;
    }

    .screen-5 .block-a {
        min-height: auto;
    }

    .screen-5 .block-b {
        height: 100%;
        min-height: 100%;
        padding-bottom: 0;
        box-sizing: border-box;
    }

    .screen-5 .site-preview {
        margin-top: auto;
    }
}

.deploy-version {
    margin: 0;
    padding: 0.75rem 1.25rem 1.25rem;
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--slate);
    text-align: center;
    user-select: text;
    -webkit-user-select: text;
}