:root {
--header-h: 100px;
--ink: #111111;
--muted: #878787;
--paper: #ffffff;
--soft: #f4f4f4;
--line: #e5e5e5;
--blue: #9fb7ff;
/* Типографическая шкала. Значения — на 1920px, дальше живёт на clamp(). */
--headline-3xl: clamp(48px, 7.03125vw, 135px); /* огромные декоративные */
--headline-2xl: clamp(30px, 3.33333vw, 64px); /* главные заголовки секций */
--headline-xl: clamp(22px, 1.66667vw, 32px); /* подзаголовки, крупные сообщения */
--headline-lg: clamp(19px, 1.25vw, 24px); /* заголовки карточек */
--text-lg: clamp(16px, 1.04167vw, 20px); /* крупные описания */
--text-md: clamp(14px, .83333vw, 16px); /* основной текст, меню */
--text-sm: clamp(12px, .72917vw, 14px); /* подписи, второстепенное */
--label-mono: clamp(11px, .83333vw, 16px); /* uppercase mono: категории, метки */
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
--font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--tracking: -.07em;
}
*, *::before, *::after { box-sizing: border-box; }
/* Плавную прокрутку колеса задаёт Lenis в js/main.js. Через
`scroll-behavior: smooth` её делать нельзя: браузер анимирует скролл сам,
пока ScrollTrigger держит блок на position: fixed — это и даёт рывки. */
html { scroll-behavior: auto; }
body { margin: 0; color: var(--ink); font-family: var(--font-ui); font-size: 16px; letter-spacing: var(--tracking); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11" 1, "ss01" 1; background: var(--paper); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
p, h1, h2, h3 { margin: 0; }
:focus-visible { outline: 2px solid #6486ff; outline-offset: 4px; }
::selection { background: #cdd8ff; }
/* Ровно 40px по бокам — как в херое (.hero-copy). Без max-width, иначе
на широких экранах секции уезжают в центр, а херой прилипает к краю.
Ширина и отступ переопределяются в блоке эндпоинтов, где живут
--container-pad и --header-h. */
.headline-3xl, .headline-2xl, .headline-xl, .headline-lg { font-weight: 600; }
.headline-3xl { font-size: var(--headline-3xl); line-height: .98; letter-spacing: var(--tracking); }
.headline-2xl { font-size: var(--headline-2xl); line-height: 1.02; letter-spacing: var(--tracking); }
.headline-xl { font-size: var(--headline-xl); line-height: 1.06; letter-spacing: var(--tracking); }
.headline-lg { font-size: var(--headline-lg); line-height: 1.14; letter-spacing: var(--tracking); }
.text-lg { font-size: var(--text-lg); line-height: 1.35; letter-spacing: var(--tracking); }
.text-md { font-size: var(--text-md); line-height: 1.36; letter-spacing: var(--tracking); }
.text-sm { font-size: var(--text-sm); line-height: 1.4; letter-spacing: var(--tracking); }
/* Uppercase Mono: категории и метки */
.label-mono { font-family: var(--font-mono); font-size: var(--label-mono); line-height: 1.2; letter-spacing: .07em; text-transform: uppercase; }
.muted { color: var(--muted); }
.center { text-align: center; }
.section-space { padding-block: clamp(115px, 9vw, 180px); }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 1000; background: #fff; border: 1px solid #222; padding: 12px 18px; }
.skip-link:focus { top: 12px; }
/* Header */
.site-header { position: relative; z-index: 60; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; background: #fff; }
.brand img { width: clamp(122px, 7.8125vw, 150px); height: auto; }
.main-nav { display: flex; align-items: center; gap: clamp(15px, 1.65vw, 32px); }
.main-nav a { color: #717171; font-size: var(--text-sm); letter-spacing: var(--tracking); transition: color .2s; white-space: nowrap; }
.main-nav a:hover, .footer a:hover { color: #4c6cff; }
.header-actions { display: flex; align-items: center; justify-content: end; gap: 20px; font-size: var(--text-md); }
.registration { color: #686868; }
.btn { border-radius: 100px; padding: 13px 24px; display: inline-flex; align-items: center; justify-content: center; gap: 22px; }
.btn-black { color: #fff; background: #050505; }
.btn span { font-size: 15px; }
/* Ниже 1024 бургер встаёт в третью колонку грида (1fr auto 1fr) и по
умолчанию растягивается на неё, а полоски внутри прижаты влево — визуально
он висит сразу после кнопок, а не у края. justify-self: end сжимает кнопку
по содержимому и прижимает её к правому полю хедера. */
.menu-toggle { display: none; justify-self: end; background: transparent; border: 0; padding: 10px; }
.menu-toggle span { display: block; height: 2px; width: 26px; background: #111; margin: 6px 0; }
/* Hero */
/* хедер + херой = ровно один экран */
/* Отступ снизу: между hero и следующим блоком 100px. Иначе обзор упирается
в край экрана и кажется, что появляется слишком резко. */
.hero { height: max(540px, calc(100svh - var(--header-h))); margin-bottom: 100px; position: relative; overflow: hidden; background: #fff; isolation: isolate; }
/* Логотип-надпись: SVG вшит прямо в разметку, «фонарик» — его родной
radialGradient (#beam), центр которого GSAP двигает за курсором.
Инлайн, а не ![]()
/маска: Chrome на file:// не грузит внешний SVG в mask-image. */
.hero-word {
position: absolute;
z-index: 0;
left: 0;
top: 15.3%;
width: 100%;
height: auto;
pointer-events: none;
}
.hero-person { position: absolute; z-index: 2; width: clamp(560px, 40.6vw, 780px); height: auto; left: 50%; bottom: 13.6%; transform: translateX(-50%); pointer-events: none; -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 72%,transparent 97%); mask-image: linear-gradient(to bottom,#000 0%,#000 72%,transparent 97%); }
.operation { --rotation: 0deg; position: absolute; z-index: 3; width: 152px; min-height: 56px; display: flex; flex-direction: column; justify-content: center; padding: 8px 14px; border-radius: 11px; background: #eff2ff; transform: rotate(var(--rotation)); white-space: nowrap; }
.operation span { font-size: var(--text-sm); letter-spacing: var(--tracking); }
.operation strong { font-weight: 400; font-size: var(--text-lg); letter-spacing: var(--tracking); }
.operation-one { left: 29%; top: 29.6%; --rotation: 8deg; }
.operation-two { left: 56.5%; top: 28%; --rotation: -13deg; }
.operation-three { left: 21.1%; top: 64.7%; --rotation: -12deg; }
.operation-four { left: 73.9%; top: 71.1%; --rotation: -11deg; }
.operation.expense { background: #fceef3; }
.hero-copy { position: absolute; z-index: 5; bottom: 40px; left: var(--container-pad, 40px); right: var(--container-pad, 40px); display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.hero-copy h1 { max-width: 440px; }
.hero-copy p { width: 420px; max-width: none; line-height: 1.35; }
/* Overview — блок прилипает к потолку и живёт ровно один экран.
Заголовок сразу в 2xl: уменьшать его анимацией было лишним, всё равно
он нужен на всех четырёх сегмента и только мельчит до конца залипания. */
/* Фон по макету: сверху чистый белый держится ~3% высоты, дальше плавно
уходит в #dedede к низу. Начинать градиент сразу было нельзя — верх
получался серым. */
.overview { background: linear-gradient(180deg,#fff 0%,#fff 3%,#dedede 100%); overflow: hidden; position: relative; height: 100svh; }
/* Четыре фоновых узора — по одному на таб. Переключает setTab(). */
.overview-wave { position: absolute; z-index: 0; left: 0; top: 32.4vw; width: 100%; height: 27.1vw; pointer-events: none; opacity: 0; transition: opacity .55s ease; }
.overview-wave.is-active { opacity: 1; }
/* Узор появляется только вместе с таб-барами, а не с самого начала блока. */
.overview:not(.is-tabs) .overview-wave { opacity: 0; }
.overview-inner { position: relative; z-index: 1; height: 100svh; display: flex; flex-direction: column; padding-top: clamp(30px, 2.6vw, 50px); padding-bottom: clamp(32px, 2.1vw, 40px); }
.overview .headline-3xl { position: relative; z-index: 5; max-width: 1900px; font-size: var(--headline-2xl); line-height: .98; }
/* Построчная анимация заголовка: внешний span режет, внутренний едет. */
.overview .headline-3xl .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.overview .headline-3xl .line-i { display: block; will-change: transform; }
.overview-content { flex: 1 1 0; min-height: 0; display: grid; position: relative; grid-template-columns: 1fr 1.35fr 1fr; gap: 36px; align-items: stretch; margin-top: clamp(28px, 2.5vw, 48px); }
.overview-left { max-width: 500px; z-index: 2; align-self: start; }
.overview-left p { max-width: 500px; font-weight: 400; font-size: clamp(19px, 1.66667vw, 32px); line-height: 1.14; }
/* align-items: flex-end — телефон прижат к нижней части экрана. Раньше был
flex-start, и на планшете с object-fit:contain картинка коротко висела
посреди колонки. */
.phone-stage { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 100%; min-height: 0; z-index: 1; }
.phone-img { height: 100%; max-width: none; width: auto; margin-top: 0; position: relative; z-index: 2; }
.overview .phone-indicator { position: absolute; z-index: 4; font-size: var(--text-sm); color: #333; background: rgba(255,255,255,.93); backdrop-filter: blur(5px); padding: 10px 14px; border-radius: 100px; left: 50%; top: 46%; transform: translateX(-50%); box-shadow: 0 8px 45px #00000015; opacity: 0; transition: opacity .3s; pointer-events: none; white-space: nowrap; }
.phone-stage.show-indicator .phone-indicator { opacity: 1; }
/* Табы: пилюли по ширине подписи, прижатые вправо. Активная — белая с чёрным
текстом, остальные серые. Ширину задаёт текст, поэтому подписи не подгоняем.
Живут вне грида и центрируются по вертикали относительно экрана:
`top: 50%` считается от .overview-inner, а он ровно 100svh, поэтому это
середина залипающего блока, а не середина места под заголовком.
Отступ справа — 0: .container задаёт поля через width, не паддингом,
так что right: 0 и есть ровно контентная кромка.
Падинги по вертикали одинаковые, по бокам — ровно вдвое больше; боковой
считается от --tab-pad-y, так что отношение не разъезжается по ширинам.
white-space: nowrap обязателен: без него длинная подпись переносилась,
и второй ряд кнопки выглядел обрезанным по высоте.
Трансформ задаётся на контейнере, GSAP двигает y только на кнопках —
они не конфликтуют. */
.overview-tabs { position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding-top: 0; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: clamp(6px, .35vw, 10px); }
.overview-tab { --tab-pad-y: clamp(10px, .73vw, 14px); white-space: nowrap; text-align: center; color: #9c9c9c; background: #ececec; border: 0; border-radius: clamp(20px, 1.9vw, 36px); font-size: var(--text-md); line-height: 1.2; padding: var(--tab-pad-y) calc(var(--tab-pad-y) * 2); transition: color .25s, background .25s; }
.overview-tab.active { color: #111; background: #fff; }
.overview-tab:hover { color: #111; }
/* Текст снизу стоит слева, рядом с телефоном (как в макете), а не под гридом —
иначе не влезает в один экран вместе с 3xl-заголовком. */
.overview-note { position: absolute; z-index: 5; left: 0; bottom: clamp(32px, 2.1vw, 40px); max-width: min(500px, 33vw); }
/* Features — 12 колонок, строки идут внахлёст через margin-top */
/* Отступ снизу отдан секции ИИ: между блоком возможностей и блоком ИИ должно
быть 200px. Раньше 350 здесь + 70 там давали 420px пустоты. */
.features { padding-top: 72px; padding-bottom: 0; }
.features-title { max-width: 1250px; margin-bottom: 88px; }
.feature-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); column-gap: 24px; row-gap: 0; align-items: start; }
.feature { min-width: 0; }
/* Рамка-обрезка: параллакс раздувает картинку до scale 1.06, и без
overflow:hidden она залезает в соседние колонки и за поле секции.
Радиус переносим на рамку — иначе вылезшие углы обрезаются по прямой. */
.feature-media { overflow: hidden; border-radius: 22px; aspect-ratio: 1.173; }
.feature img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Зазоры в карточке: картинка → заголовок и заголовок → описание.
Оба задаются здесь, потому что p глобально обнулён (margin: 0). */
.feature h3 { margin: 34px 0 10px; }
.feature p { max-width: 520px; }
.feature--business { grid-column: 1 / 5; grid-row: 1; }
.feature--wallets { grid-column: 6 / 10; grid-row: 1; margin-top: 220px; }
.feature--docs { grid-column: 2 / 4; grid-row: 2; }
.feature--projects { grid-column: 9 / 11; grid-row: 2; margin-top: 220px; }
.feature--planning { grid-column: 3 / 7; grid-row: 3; }
.feature--private { grid-column: 8 / 10; grid-row: 3; margin-top: 460px; }
/* Assistant */
.assistant { padding-top: 200px; padding-bottom: 160px; }
.assistant-layout { display: flex; flex-direction: column; align-items: stretch; }
.assistant-heading { text-align: center; }
/* Чат: слева и справа от картинки по одной реплике. Всё зациклено само,
кликов нет. Реплики чередуются сторонами: сначала вопрос справа и ответ
слева, потом наоборот. */
.assistant-demo { margin-top: clamp(48px, 5.6vw, 108px); display: grid; grid-template-columns: 1fr clamp(160px, 11.5vw, 230px) 1fr; gap: clamp(24px, 2.6vw, 50px); align-items: center; }
.assistant-orb-wrap { position: relative; display: grid; place-items: center; width: clamp(150px, 11vw, 210px); height: clamp(150px, 11vw, 210px); }
.assistant-orb { width: 92%; height: 92%; object-fit: contain; filter: saturate(1.08); }
.orb-shadow { width: 52%; height: 15px; border-radius: 50%; background: #8799ec25; filter: blur(14px); position: absolute; bottom: 6px; }
/* Каждая сторона — позиционированная коробка, реплики в ней наезжают
друг на друга. Так у круга своя разметка и таймлайну не нужно ничего
переключать во время показа. */
.chat-side { position: relative; min-height: clamp(124px, 9.5vw, 178px); }
/* Реплики прижаты к картинке, а не к краям секции: у левой стороны блок
прижат правым краем, у правой — левым. Поэтому и вопрос, и ответ
подходят к картинке вплотную на обеих сторонах. */
.chat-msg { position: absolute; top: 0; bottom: 0; width: min(350px, 100%); display: flex; opacity: 0; font-size: var(--text-md); line-height: 1.45; }
.chat-side--left .chat-msg { right: 0; }
.chat-side--right .chat-msg { left: 0; }
.chat-msg.is-answer { flex-direction: column; justify-content: center; text-align: left; }
/* вопрос — серая пилюля, как в макете */
.chat-msg.is-question { align-items: center; }
.chat-side--left .chat-msg.is-question { justify-content: flex-end; }
.chat-side--right .chat-msg.is-question { justify-content: flex-start; }
.chat-msg.is-question > span { display: inline-block; max-width: 100%; background: #f4f4f4; color: #111; border-radius: clamp(14px, 1.2vw, 22px); padding: clamp(13px, 1.05vw, 20px) clamp(16px, 1.3vw, 25px); }
/* Построчная анимация: внешний span режет, внутренний едет снизу вверх. */
.chat-line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.chat-line-i { display: block; will-change: transform; }
/* Точки «раздумья» — первым блоком ответа, над текстом */
.thinking-dots { height: 22px; display: flex; align-items: center; gap: 7px; opacity: 0; margin-bottom: 4px; }
.thinking-dots i { width: 9px; height: 9px; border-radius: 50%; background: #c9c9c9; display: flex; }
.assistant-bottom { max-width: 900px; margin: clamp(90px, 13vw, 250px) auto 0; text-align: center; font-weight: 400; font-size: var(--headline-lg); line-height: 1.3; }
/* Audience */
.audience { padding-top: 9px; padding-bottom: 90px; }
.audience h2 { margin-bottom: 52px; }
/* Четыре карточки: в макете их было три, четвёртая добавлена по требованию.
Ниже 1024 остаются три, ниже 480 — одна. */
.audience-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 26px; }
/* Рамка-обрезка. Параллакс раздувает картинку до scale 1.12, и без
overflow:hidden она наезжает на соседние карточки и вылезает за поле
секции (левый край уезжал на 17px левее контейнера). Радиус — на рамке,
иначе скруглённой остаётся только исходная картинка, а вылезшие углы
обрезаются по прямой. */
.audience-media { overflow: hidden; border-radius: 18px; aspect-ratio: 1.184; }
.audience-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Ритм внутри карточки — тот же, что в блоке возможностей (34 / 10). */
.audience-card h3 { margin: 34px 0 10px; }
.audience-card p { max-width: 520px; font-size: var(--text-md); line-height: 1.36; color: #868686; }
/* Pricing */
/* Падинг снизу нельзя обнулять: на секции градиент, и без него он обрывается
ровно по нижнему краю карточек — они липнут к границе блока. В макете под
карточками ~70pt градиента: карточки кончаются на 9055, секция на 9125. */
.pricing { background: linear-gradient(180deg,#fff 0%,#f9f9f9 18%,#ebebeb 38%,#e6e6e6 100%); padding-top: 100px; padding-bottom: 90px; }
/* Зазор между карточками — 13px по макету (карточки 46..498, 511..963,
973..1431, 1441..1893). Было 35px, карточки висели в воздухе. */
.pricing-grid { margin: clamp(70px, 6vw, 115px) 23px 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: stretch; gap: 13px; }
.price-card { min-height: 800px; display: flex; flex-direction: column; justify-content: space-between; gap: 55px; padding: 34px 32px 30px; border-radius: 16px; background: #fff; border: 3px solid transparent; position: relative; }
.price-card--popular { border-color: #6f92ff; background: linear-gradient(180deg,#fff 0%,#e9efff 42%,#c3d4ff 100%); }
.price { font-weight: 600; font-size: calc(var(--headline-2xl) * 1.03); letter-spacing: var(--tracking); margin: 12px 0 24px; }
.price-desc { color: #888; font-size: var(--text-lg); line-height: 1.36; min-height: 150px; }
.price-card ul { list-style: none; padding: 0; margin: 0 auto auto; display: flex; flex-direction: column; gap: 16px; width: 100%; }
.price-card li { font-size: var(--text-lg); line-height: 1.3; letter-spacing: var(--tracking); font-weight: 500; }
.price-action { display: flex; align-items: center; justify-content: space-between; padding: 13px 22px; color: white; background: #3d3d3d; border-radius: 100px; min-height: 56px; font-size: var(--text-md); transition: background .2s, transform .2s; }
.price-action:hover { background: #111; transform: translateY(-3px); }
/* FAQ */
/* Воздух между карточками тарифов и блоком вопросов — 200px, поделён так:
90px остаётся под карточками (градиент секции прайса не должен обрываться
по их краю), 110px — сверху здесь, иначе заголовок стоит вплотную к краю
секции и читается прилипшим к границе. При 100px суммарно на секцию
приходилось всего 10px и воздуха не было видно. */
.faq { padding-top: 110px; padding-bottom: 145px; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.faq-list { padding-top: 7px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { cursor: pointer; padding: 25px 0; font-size: var(--text-lg); letter-spacing: var(--tracking); line-height: 1.2; display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { width: 17px; height: 17px; position: relative; flex-shrink: 0; }
.faq-list summary span:before,.faq-list summary span:after { content: ''; background: #555; height: 1px; width: 17px; position: absolute; top: 8px; left: 0; }
.faq-list summary span:after { transform: rotate(90deg); transition: transform .18s ease; }
.faq-list details[open] summary span:after { transform: rotate(0); }
.faq-answer { color: #777; line-height: 1.45; font-size: var(--text-md); max-width: 680px; padding-bottom: 25px; }
/* Footer */
.footer { padding-top: 100px; position: relative; overflow: hidden; border-top: 1px solid #f3f3f3; min-height: 730px; }
.footer .container { position: relative; z-index: 2; }
.footer-main { display: grid; grid-template-columns: 1.9fr .6fr .6fr; gap: 45px; padding-bottom: 180px; }
.footer-links { display: flex; flex-direction: column; gap: 8px; font-size: var(--text-md); }
.footer-contacts { font-size: var(--text-md); display: flex; flex-direction: column; gap: 8px; }
.footer-label { font-family: var(--font-mono); font-size: var(--label-mono); letter-spacing: .07em; color: #9b9b9b; margin-bottom: 14px; text-transform: uppercase; }
.footer-contacts .footer-label:not(:first-child) { margin-top: 34px; }
.footer-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 65px; font-family: var(--font-mono); font-size: var(--label-mono); line-height: 1.5; letter-spacing: .07em; color: #8e8e8e; text-transform: uppercase; }
.footer-made { text-align: left; }
/* Тот же вордмарк, что в hero, но вшит инлайном: у него свой radialGradient
#beam-foot, который двигает фонарик. Как ![]()
покрасить нельзя. */
.footer-big-word { display: block; width: 100%; max-width: none; height: auto; position: absolute; bottom: -240px; left: 0; z-index: 1; opacity: .73; pointer-events: none; }
/* ==========================================================================
Эндпоинты
--------------------------------------------------------------------------
ЕДИНЫЙ ИСТОЧНИК ПРАВДЫ: значения --bp-* ниже и числа в @media в этом же
блоке. Оверлей в правом нижнем углу читает их через getComputedStyle, то
есть показывает ровно то, что реально применено в стилях, — назвать ему
границу, которой в CSS нет, нельзя технически.
Шкала (подобрана под этот лендинг, а не универсальная):
1440+ десктоп раскладка как в макете, 4 тарифа в ряд
1024 ноутбук 4 тарифа, поля ужимаются
768 планшет 2 тарифа, лесенка возможностей рассыпается
480 телефон 1 колонка везде, меню в бургер
<360 узкий телефон поля и кегли ужимаются ещё
========================================================================== */
@media (max-width: 479.98px) {
:root {
--bp-xm: 360px;
--bp-xm-max: 479px;
--container-pad: 16px;
--header-h: 60px;
}
}
@media (max-width: 359.98px) {
:root {
--bp-xs: 0px;
--bp-xs-max: 359px;
--container-pad: 12px;
--header-h: 56px;
}
}
@media (min-width: 480px) {
:root {
--bp-sm: 480px;
--bp-sm-max: 767px;
--container-pad: 18px;
--header-h: 64px;
}
}
@media (min-width: 768px) {
:root {
--bp-md: 768px;
--bp-md-max: 1023px;
--container-pad: 24px;
--header-h: 72px;
}
}
@media (min-width: 1024px) {
:root {
--bp-lg: 1024px;
--bp-lg-max: 1439px;
--container-pad: 32px;
--header-h: 84px;
}
}
@media (min-width: 1440px) {
:root {
--bp-xl: 1440px;
--container-pad: 40px;
--header-h: 100px;
}
}
/* Поля и высота хедера берутся из --container-pad/--header-h, которые заданы
в блоке эндпоинтов выше. */
.container { width: calc(100% - var(--container-pad, 40px) * 2); margin-inline: auto; }
.site-header { height: var(--header-h); padding: 0 var(--container-pad, 40px); }
/* Оверлей брейкпоинта: чёрный прямоугольник, белый моноширинный текст,
правый нижний угол. Служебный — гасится флагом ?bp=0 или data-bp="off".
Он же перехватывает клик по футеру, но это осознанно: показывать его
предполагалось для отладки вёрстки на разных ширинах. */
.bp-badge {
position: fixed;
z-index: 2147483000;
right: 0;
bottom: 0;
max-width: min(100vw, 260px);
padding: 7px 10px 8px;
background: #0b0b0b;
color: #fff;
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.45;
letter-spacing: 0;
white-space: pre;
border-top-left-radius: 8px;
text-align: left;
pointer-events: auto;
}
.bp-badge b { font-weight: 700; color: #9fb7ff; }
.bp-badge[hidden] { display: none; }
/* ==========================================================================
Адаптив
--------------------------------------------------------------------------
Сверху вниз: чем уже экран, тем больше правил. Числа границ — те же, что в
блоке эндпоинтов в начале файла.
========================================================================== */
/* --- 1440 и выше: базовая раскладка, править нечего ---------------------- */
/* --- < 1440: ноутбук --------------------------------------------------- */
@media (max-width: 1439.98px) {
:root {
--headline-3xl: clamp(44px, 7.03125vw, 135px);
--headline-2xl: clamp(28px, 3.33333vw, 64px);
}
.hero { margin-bottom: 80px; }
.features-title { margin-bottom: 64px; }
.features { padding-top: 56px; }
.assistant { padding-top: 160px; padding-bottom: 130px; }
.audience { padding-bottom: 80px; }
.pricing { padding-top: 80px; padding-bottom: 80px; }
.faq { padding-top: 90px; padding-bottom: 120px; }
.price-card { min-height: 700px; padding: 30px 26px 28px; gap: 44px; }
.price-desc { min-height: 130px; }
.footer { padding-top: 80px; min-height: 640px; }
.footer-main { padding-bottom: 140px; gap: 34px; }
.footer-big-word { bottom: -190px; }
}
/* --- < 1024: маленький ноутбук и горизонтальный планшет ------------------ */
@media (max-width: 1023.98px) {
:root {
--headline-2xl: clamp(26px, 4.6vw, 64px);
--headline-xl: clamp(20px, 3.1vw, 32px);
--text-lg: clamp(15px, 1.9vw, 20px);
}
.section-space { padding-block: clamp(80px, 9vw, 140px); }
/* Меню в бургер. Ниже 1024 навигация уходит из потока (position: absolute),
и в гриде 1fr auto 1fr остаются три предмета: бренд, кнопки, бургер. Тогда
бургер попадает в третью колонку и растягивается на неё, а кнопки стоят
по центру — обе висели не у правого поля. Поэтому хедер переключается на
flex: бренд прижат влево через margin-right:auto, кнопки и бургер — вправо.
Паддинг бургера асимметричный, иначе полоски утоплены внутрь кнопки и
не доходят до края на 10px. */
.site-header { display: flex; align-items: center; gap: 10px; }
.brand { margin-right: auto; }
.menu-toggle { display: block; justify-self: auto; flex: 0 0 auto; padding: 10px 0 10px 18px; }
.header-actions { flex: 0 0 auto; }
.menu-toggle span { transition: transform .25s, opacity .2s; }
.site-header.menu-open .menu-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
.site-header.menu-open .menu-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }
.main-nav {
position: absolute;
left: 0;
right: 0;
top: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: 8px var(--container-pad) 20px;
background: #fff;
border-top: 1px solid var(--line);
box-shadow: 0 18px 30px rgba(0, 0, 0, .06);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity .22s, transform .22s, visibility .22s;
}
.main-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.main-nav a { padding: 13px 0; font-size: var(--text-md); width: 100%; border-bottom: 1px solid #f2f2f2; }
.main-nav a:last-child { border-bottom: 0; }
/* Обзор: телефон сжимается, текст слева и табы справа делят экран.
Иначе колонка 1fr 1.35fr 1fr оставляет под текст ~100px. */
/* Обзор на планшете: текст слева больше не помещается в свою колонку — на 900px
это 300px против ~560 в макете, и он рвался на шесть коротких строк.
Поэтому текст занимает отдельную строку над телефоном, а телефон
растягивается на всю ширину и остаётся прижатым к низу. Табы по-прежнему
висят абсолютом справа и в грид не входят. */
.overview-content {
gap: 18px;
grid-template-columns: 1fr;
grid-template-rows: auto minmax(0, 1fr);
align-items: end;
}
.overview-left { grid-row: 1; max-width: 560px; }
.phone-stage { grid-row: 2; }
.overview-left p { font-size: clamp(18px, 2.6vw, 32px); }
/* Описание снизу уходит из абсолютного слоя: телефон теперь растянут на всю
ширину, и широкий текст уезжал под него. */
.overview-note {
position: static;
max-width: min(560px, 62vw);
margin-top: 20px;
}
.overview-tab { --tab-pad-y: clamp(9px, 1.1vw, 14px); }
/* Телефон рисуется по высоте секции (height:100%), поэтому в узкой колонке
он вылезал на 300px. Переводим на ширину и object-fit: contain. */
.phone-img { width: 100%; height: 100%; object-fit: contain; }
/* Лесенка возможностей на сетке 12 колонок не выживает уже на 900px:
карточка шириной в одну ячейку получает ~49px. Раскладываем в 2 колонки. */
.feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 36px; }
.feature--business, .feature--wallets, .feature--docs,
.feature--projects, .feature--planning, .feature--private {
grid-column: auto;
grid-row: auto;
margin-top: 0;
}
.feature-media { border-radius: 16px; }
.feature h3 { margin: 22px 0 8px; }
/* Чат: карточка 350px перестаёт помещаться в боковую колонку. */
.chat-msg { width: min(300px, 100%); }
/* Четыре карточки аудитории в один ряд на 1024px дают по 193px — читаться
не будут. Ниже этого две колонки, ниже 480 одна. */
.audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
/* Тарифы в две колонки: четыре карточки по 230px не читаются. */
.pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-inline: 0; }
.price-card { min-height: 0; padding: 28px 24px 26px; gap: 34px; }
.price-desc { min-height: 0; }
.price-card ul { margin-top: 26px; }
.faq-grid { grid-template-columns: 1fr; gap: 28px; }
.faq-list { padding-top: 0; }
}
/* --- < 768: планшет ---------------------------------------------------- */
@media (max-width: 767.98px) {
:root {
--headline-3xl: clamp(36px, 9vw, 64px);
--headline-2xl: clamp(24px, 6.4vw, 42px);
--headline-lg: clamp(18px, 3.4vw, 24px);
--text-md: clamp(14px, 2.6vw, 16px);
}
.section-space { padding-block: clamp(56px, 10vw, 90px); }
.hero { margin-bottom: 56px; }
.header-actions { gap: 12px; }
.registration { display: none; }
.btn { padding: 10px 18px; }
/* Узоры в процентах высоты секции, а не в vw: на 1920 секция выше ширины
примерно вдвое, и 32.4vw попадало за картинку, а на узком экране — над
ней. Теперь полоса всегда лежит за телефоном. */
.overview-wave { top: 38%; height: 40%; }
/* Аудитория уже в двух колонках (правило на < 1024). */
/* Hero: заголовок и абзац в одну колонку — иначе flex сжимает их в две
узкие полосы. Карточки операций уводим внутрь экрана: при width 152px
правая вылезала за край уже на 500px. */
.hero-copy { flex-direction: column; gap: 16px; bottom: 28px; }
.hero-copy p { width: auto; max-width: 460px; }
.hero-copy h1 { max-width: none; }
.hero-person { width: min(420px, 62vw); }
.operation { width: 128px; min-height: 46px; padding: 6px 11px; }
.operation-one { left: 14%; top: 26%; }
.operation-two { left: 58%; top: 24%; }
.operation-three { left: 8%; top: 62%; }
.operation-four { left: 62%; top: 68%; }
.audience { padding-bottom: 60px; }
.audience h2 { margin-bottom: 32px; }
.assistant { padding-top: 90px; padding-bottom: 80px; }
.assistant-demo { grid-template-columns: 1fr; gap: 22px; }
/* У картинки заданная ширина, поэтому в одноколоночном гриде она прижата
влево, а не по центру. */
.assistant-orb-wrap { width: clamp(120px, 34vw, 160px); height: clamp(120px, 34vw, 160px); justify-self: center; }
/* Стороны чата встают в одну колонку, карточка — по центру от края. */
.chat-side { min-height: 120px; }
.chat-msg { width: min(420px, 100%); }
.chat-side--left .chat-msg { right: auto; left: 0; }
.chat-side--right .chat-msg { left: auto; right: 0; }
.assistant-bottom { margin-top: 64px; }
/* Табы уходят из абсолютного слоя в поток и становятся горизонтальными
на всём узком диапазоне, а не только ниже 480: раньше правило лежало
в блоке < 480, и на всём phone-диапазоне 480–767 табы оставались
вертикальным столбиком справа. Стоят под заголовком через order —
раньше стояли после текста и читались как относящиеся к нему.
Табы висят абсолютом и в грид не входят, поэтому отдельная строка
под заголовком для них свободна. */
.overview-tabs {
position: static;
transform: none;
order: 1;
margin-top: 22px;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
gap: 8px;
}
.overview-content { order: 2; }
.overview-note { order: 3; }
.overview-tab { --tab-pad-y: 9px; font-size: var(--text-sm); }
.footer-main { grid-template-columns: 1fr 1fr; gap: 36px 24px; padding-bottom: 100px; }
.footer-main > h2 { grid-column: 1 / -1; }
.footer-meta { flex-direction: column; gap: 18px; }
.footer-big-word { bottom: -140px; }
}
/* --- < 480: телефон ---------------------------------------------------- */
@media (max-width: 479.98px) {
:root {
--headline-3xl: clamp(32px, 10.5vw, 52px);
--headline-2xl: clamp(22px, 7.4vw, 36px);
--headline-xl: clamp(19px, 5.6vw, 26px);
--text-lg: clamp(15px, 4.2vw, 18px);
}
.section-space { padding-block: clamp(44px, 11vw, 68px); }
/* Две колонки карточек на телефоне не читаются — в одну. */
.feature-grid { grid-template-columns: 1fr; row-gap: 28px; }
.feature h3 { margin: 20px 0 8px; }
/* Телефон на узких экранах не скрываем: полосы обзора без картинки выглядят
пусто. Прижимаем к верху — с flex-end снизу он уезжал под описание.
flex у .overview-content остаётся базовым (1 1 0): при 0 0 auto стадия
брала высоту по картинке, и та уезжала за нижний край экрана. */
.phone-stage { align-items: flex-start; }
.overview-content { grid-template-columns: 1fr; }
.overview-note { max-width: none; }
.audience-grid { grid-template-columns: 1fr; gap: 28px; }
.audience-card h3 { margin: 22px 0 8px; }
/* Блок ИИ на телефоне — всё по центру. Центруем margin-ом, а не transform:
GSAP двигает `.chat-msg` через `y`, и любой наш translate на том же
элементе был бы затёрт инлайновым transform. */
.chat-side--left .chat-msg,
.chat-side--right .chat-msg { left: 0; right: 0; margin-inline: auto; }
.chat-side--left .chat-msg.is-question,
.chat-side--right .chat-msg.is-question { justify-content: center; }
/* Строки ответа собираются в центре через align-items: они перестают
растягиваться на всю ширину блока, но текст внутри остаётся влево —
получается блок, а не рваный центрированный набор. На замер длины строк
не влияет: fillAnswerLines мерит в position:absolute пробе на inset:0,
то есть вне флекс-раскладки. */
.chat-msg.is-answer { align-items: center; }
/* Карточки операций на 320px вылезали за правый край: сужаем и уводим
внутрь. Подписи перестаём держать в одну строку — при 108px
«Аренда квартиры» уже не влезает. */
.operation { width: 108px; min-height: 42px; padding: 5px 9px; white-space: normal; }
.operation-one { left: 4%; top: 24%; }
.operation-two { left: 56%; top: 22%; }
.operation-three { left: 2%; top: 60%; }
.operation-four { left: 58%; top: 66%; }
.pricing-grid { grid-template-columns: 1fr; }
.pricing-grid { margin-top: 40px; }
.price-card { padding: 24px 20px 22px; }
.price { font-size: clamp(30px, 11vw, 46px); }
.faq { padding-top: 60px; padding-bottom: 80px; }
.faq-list summary { padding: 19px 0; }
.footer-main { grid-template-columns: 1fr; gap: 30px; }
.footer-big-word { bottom: -90px; }
.footer-main { padding-bottom: 80px; }
}
/* --- < 360: совсем узкий телефон ---------------------------------------- */
@media (max-width: 359.98px) {
:root {
--headline-2xl: clamp(20px, 7.8vw, 30px);
}
.feature-grid { grid-template-columns: 1fr; }
.footer-main { padding-bottom: 64px; }
.footer-big-word { bottom: -60px; }
.bp-badge { font-size: 10px; padding: 6px 8px 7px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.footer-legal{display:flex;flex-wrap:wrap;gap:12px 28px;margin:32px 0;font-size:13px;line-height:1.5}.footer-legal a{color:inherit;text-decoration:underline;text-underline-offset:4px}.footer-legal a:hover{opacity:.7}