/* FinFlow AI — лендинг. Реализация макета «FinFlow AI - Лендинг.dc.html» из Claude Design. Палитра и размеры перенесены из макета один в один; добавлены только адаптивные брейкпоинты — макет был нарисован под десктоп. */ :root { --bg: #F5F4F0; --surface: #FFFFFF; --chip: #EDECE7; --chip-2: #F1F0EC; --chip-3: #E7E6E1; --bar: #DEDCD4; --ink: #111110; --ink-hover: #2C2B26; --on-ink: #FAFAF8; --on-ink-soft: #F2F1EC; --nav: #464439; --text-2: #5A574F; --muted: #75736B; --dim: #8C8981; --faint: #A3A098; --hairline: #E4E2DB; --line-strong: #DBD9D1; --line-card: #E0DED7; --dark-muted: #AFACA3; --dark-line: #2E2D28; --dark-chip-fg: #CFCCC3; --accent: #0FA971; --expense: #E23744; --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --shell: 1180px; --pad: 40px; } * { box-sizing: border-box; margin: 0; padding: 0; } /* Браузерное правило для [hidden] — это display:none с нулевой специфичностью, поэтому ЛЮБОЙ класс с собственным display (.contact, .lang, .social — все flex) молча его перебивает, и «скрытый» элемент остаётся на экране. Здесь это правило возвращает себе приоритет: на нём держатся скрытые до настройки соцссылки, свёрнутые ответы в вопросах и выключенная секция тарифов. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { font-family: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; background: var(--bg); color: var(--ink); overflow-x: hidden; } a { color: var(--ink); text-decoration: none; } a:hover { color: var(--muted); } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; } .shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); } /* Material Symbols Rounded — подгружается сабсетом (см. icon_names в ) */ .i { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-variation-settings: 'wght' 400, 'opsz' 24, 'GRAD' 0, 'FILL' 0; -webkit-font-feature-settings: 'liga'; } .i--fill { font-variation-settings: 'wght' 400, 'opsz' 24, 'GRAD' 0, 'FILL' 1; } .i--600 { font-variation-settings: 'wght' 600, 'opsz' 24, 'GRAD' 0, 'FILL' 0; } .i--500 { font-variation-settings: 'wght' 500, 'opsz' 24, 'GRAD' 0, 'FILL' 0; } .mono { font-family: var(--mono); } .eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--on-ink); padding: 12px 18px; border-radius: 0 0 12px 0; font-size: 14px; font-weight: 600; } .skip-link:focus { left: 0; color: var(--on-ink); } /* ── Шапка ─────────────────────────────────────────────────────────────── */ .header { position: sticky; top: 0; z-index: 50; background: rgba(245, 244, 240, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline); } .header__inner { max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; } .brand__mark { width: 34px; height: 34px; border-radius: 10px; background: var(--chip-2); border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brand__mark .i { font-size: 22px; color: var(--ink); } .brand__name { font-size: 17.5px; font-weight: 700; letter-spacing: -.025em; white-space: nowrap; } .brand__name em { font-style: normal; color: var(--accent); } .nav { display: flex; align-items: center; gap: 30px; } .nav__link { font-size: 14px; font-weight: 500; color: var(--nav); white-space: nowrap; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; border: 1px solid transparent; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .btn--ink { background: var(--ink); color: var(--on-ink); } .btn--ink:hover { background: var(--ink-hover); color: var(--on-ink); } .btn--ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; } .btn--ghost:hover { background: var(--chip); color: var(--ink); } .btn--sm { height: 40px; padding: 0 20px; border-radius: 20px; font-size: 14px; gap: 7px; } .btn--md { height: 54px; padding: 0 26px; border-radius: 27px; font-size: 16px; } .btn--lg { height: 56px; padding: 0 26px; border-radius: 28px; font-size: 16px; gap: 10px; } /* Стор-кнопки без ссылки: приложение ещё не опубликовано */ .btn--soon { border-color: var(--line-strong); color: var(--faint); background: transparent; cursor: default; } .btn--soon:hover { background: transparent; color: var(--faint); } .btn__soon-tag { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); } /* ── Hero ──────────────────────────────────────────────────────────────── */ .hero { display: grid; grid-template-columns: 1.04fr .96fr; gap: 56px; align-items: center; padding: 84px 0 92px; } .badge { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 13px; border-radius: 16px; border: 1px solid var(--hairline); background: var(--surface); font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .badge .i { font-size: 14px; color: var(--accent); } .hero__title { font-size: 68px; line-height: .97; letter-spacing: -.045em; font-weight: 800; margin-top: 26px; text-wrap: balance; } .hero__lead { font-size: 18.5px; line-height: 1.55; color: var(--text-2); margin-top: 22px; max-width: 520px; text-wrap: pretty; } .hero__actions { display: flex; align-items: center; gap: 14px; margin-top: 34px; flex-wrap: wrap; } .stats { display: flex; gap: 40px; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--hairline); flex-wrap: wrap; } .stats__v { font-family: var(--mono); font-size: 25px; font-weight: 600; letter-spacing: -.03em; white-space: nowrap; word-spacing: -.18em; } /* Geist Mono рисует пробел в ширину цифры — поджимаем, как в приложении */ .stats__l { font-size: 12.5px; color: var(--muted); margin-top: 4px; white-space: nowrap; } /* ── Макет телефона ────────────────────────────────────────────────────── */ .phone-wrap { display: flex; justify-content: center; } .phone { width: min(322px, 100%); background: var(--ink); border-radius: 44px; padding: 10px; box-shadow: 0 44px 90px -34px rgba(17, 17, 16, .45); } .phone__screen { background: var(--bg); border-radius: 36px; overflow: hidden; padding: 14px 18px 0; } .status { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 600; padding: 2px 4px 14px; } .status__right { display: flex; align-items: center; gap: 5px; color: var(--ink); } .status__right .i { font-size: 14px; } .status__batt { font-size: 15px !important; color: var(--accent); } .phone__user { display: flex; align-items: center; gap: 11px; } .avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--on-ink); display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; } .phone__hello { font-size: 11.5px; color: var(--muted); } .phone__name { font-size: 15.5px; font-weight: 700; } .phone__icons { margin-left: auto; display: flex; gap: 7px; } .round-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--chip); display: flex; align-items: center; justify-content: center; } .round-icon .i { font-size: 16px; color: var(--nav); } .phone__filters { display: flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 12.5px; color: var(--nav); font-weight: 500; } .phone__filters .i { font-size: 14px; } .phone__filters span[aria-hidden] { color: #B0ADA4; } .balance { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; } .balance__v { font-family: var(--mono); font-size: 31px; font-weight: 700; letter-spacing: -.045em; } .balance__c { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--muted); } .split { display: flex; gap: 20px; margin-top: 14px; } .split__rule { width: 1px; background: var(--hairline); } .split__v { font-family: var(--mono); font-size: 13px; font-weight: 600; } .split__v--in { color: var(--accent); } .split__v--out { color: var(--expense); } .split__l { font-size: 10.5px; color: var(--muted); margin-top: 2px; } .rule { height: 1px; background: var(--hairline); margin: 16px 0; border: 0; } .quick-row { display: flex; justify-content: space-between; } .quick-row__btn { width: 52px; height: 52px; border-radius: 50%; background: var(--chip); display: flex; align-items: center; justify-content: center; } .quick-row__btn .i { font-size: 22px; color: var(--ink); } .mini-head { display: flex; align-items: center; justify-content: space-between; } .mini-title { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; color: var(--dim); } .mini-all { font-size: 11.5px; font-weight: 600; color: var(--nav); } .debts { display: flex; gap: 18px; margin-top: 10px; } .debts__l { font-size: 11px; color: var(--muted); } .debts__v { font-family: var(--mono); font-size: 13.5px; font-weight: 600; margin-top: 3px; } .debts__v--out { color: var(--expense); } .debts__v--in { color: var(--accent); } .rates { display: flex; gap: 8px; margin-top: 10px; } .rate { flex: 1; background: var(--chip); border-radius: 14px; padding: 10px 11px; } .rate__head { display: flex; align-items: center; justify-content: space-between; } .rate__c { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--muted); } .rate__d { font-family: var(--mono); font-size: 9.5px; font-weight: 600; color: var(--accent); } .rate__v { font-family: var(--mono); font-size: 12.5px; font-weight: 600; margin-top: 5px; } .tabbar { display: grid; grid-template-columns: 1fr 1fr 54px 1fr 1fr; align-items: end; margin: 20px -4px 0; padding-top: 10px; border-top: 1px solid var(--hairline); } .tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding-bottom: 12px; } .tab .i { font-size: 19px; color: var(--dim); } .tab span:last-child { font-size: 9.5px; font-weight: 500; color: var(--dim); } .tab--on .i, .tab--on span:last-child { color: var(--ink); } /* В приложении кнопка отцентрована по высоте панели и сдвинута вверх на 10 (shell_screen.dart, Transform.translate). Повторяем это: слот растягивается на всю строку, кнопка центрируется в нём и поднимается на 16: 8 — это сам сдвиг (10 × 0.79), ещё 8 съедает padding-top самой панели, которого в приложении нет. В итоге кнопка выступает над волосяной линией на те же ~5px, что и в приложении. С align-items:end у сетки слот сжимался по содержимому и прижимался к низу — кнопка уезжала на скругление корпуса. */ .tabbar__fab-slot { align-self: stretch; display: flex; justify-content: center; align-items: center; } /* Размеры взяты из приложения (screens/shell/shell_screen.dart: кнопка 54, иконка 28, сдвиг −10) и умножены на 0.79 — коэффициент, в котором нарисован весь макет телефона (иконки вкладок 19px против 24px в приложении). До этого кнопка стояла 56px, то есть в натуральную величину внутри уменьшенного экрана, и выглядела непропорционально большой. */ .fab { width: 43px; height: 43px; transform: translateY(-16px); border-radius: 50%; background: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 19px -7px rgba(17, 17, 16, .5); } .fab .i { font-size: 22px; color: var(--on-ink); } /* ── 01 Быстрый ввод ───────────────────────────────────────────────────── */ .section-quick { padding: 16px 0 96px; } .slab { background: var(--ink); color: var(--on-ink-soft); border-radius: 34px; padding: 60px 56px; display: grid; grid-template-columns: 1fr .82fr; gap: 56px; align-items: center; } .slab .eyebrow { color: var(--dim); } .slab__title { font-size: 44px; line-height: 1.02; letter-spacing: -.04em; font-weight: 800; margin-top: 18px; text-wrap: balance; } .slab__lead { font-size: 17px; line-height: 1.6; color: var(--dark-muted); margin-top: 16px; max-width: 440px; text-wrap: pretty; } .phrases { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; list-style: none; } .phrase { height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--dark-line); display: flex; align-items: center; font-size: 13.5px; color: var(--dark-chip-fg); } .parse-card { background: var(--bg); border-radius: 26px; padding: 24px 22px; color: var(--ink); } .parse-card__head { display: flex; align-items: center; gap: 10px; } .parse-card__head .i { font-size: 20px; color: var(--nav); } .parse-card__head span:last-child { font-size: 17px; font-weight: 700; letter-spacing: -.02em; } .parse-input { margin-top: 18px; border: 1.5px solid var(--ink); border-radius: 20px; background: var(--chip); padding: 14px 16px; min-height: 92px; font-size: 16px; color: var(--muted); display: flex; align-items: flex-start; gap: 2px; } .caret { width: 1.5px; height: 20px; background: var(--ink); display: inline-block; animation: caret 1.1s steps(1) infinite; flex-shrink: 0; } @keyframes caret { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } } .parse-send { display: flex; justify-content: flex-end; margin-top: 14px; } .parse-send__btn { width: 44px; height: 44px; border-radius: 50%; background: var(--chip-3); display: flex; align-items: center; justify-content: center; } .parse-send__btn .i { font-size: 22px; color: var(--nav); } .parse-card__label { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; color: var(--dim); } .parsed { display: flex; flex-direction: column; gap: 1px; margin-top: 12px; background: var(--hairline); border-radius: 16px; overflow: hidden; list-style: none; } .parsed__row { background: var(--surface); padding: 12px 15px; display: flex; align-items: center; gap: 12px; } .parsed__k { font-size: 13px; color: var(--muted); flex: 1; } .parsed__v { font-family: var(--mono); font-size: 13px; font-weight: 600; } .parsed__v--out { color: var(--expense); } /* ── 02 Возможности ────────────────────────────────────────────────────── */ .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding-bottom: 34px; border-bottom: 1px solid var(--hairline); } .section-head h2 { font-size: 42px; line-height: 1.02; letter-spacing: -.035em; font-weight: 800; max-width: 620px; } .section-head .eyebrow { white-space: nowrap; } .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline); margin-top: 1px; list-style: none; } .feature { background: var(--bg); padding: 38px 34px 42px; min-height: 252px; transition: background-color .18s ease; } .feature:hover { background: var(--surface); } .feature .i { font-size: 26px; color: var(--ink); } .feature__t { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin-top: 22px; } .feature__d { font-size: 14.5px; line-height: 1.55; color: var(--text-2); margin-top: 9px; text-wrap: pretty; } /* ── 03 Отчёты ─────────────────────────────────────────────────────────── */ .section-reports { padding: 92px 0; } .reports { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .reports h2 { font-size: 42px; line-height: 1.02; letter-spacing: -.035em; font-weight: 800; margin-top: 18px; } .reports__lead { font-size: 16.5px; line-height: 1.6; color: var(--text-2); margin-top: 16px; max-width: 440px; text-wrap: pretty; } .bullets { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; list-style: none; } .bullet { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: var(--ink); } .bullet .i { font-size: 19px; color: var(--accent); padding-top: 1px; flex-shrink: 0; } .cats-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 26px; padding: 28px 26px; } .cats-card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .cats-card__head h3 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; } .cats-card__total { font-family: var(--mono); font-size: 12.5px; color: var(--muted); white-space: nowrap; } .cats { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; list-style: none; } .cat { position: relative; border-radius: 16px; background: var(--chip-2); overflow: hidden; } .cat__fill { position: absolute; inset: 0; background: var(--bar); } .cat__row { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; } .cat__row > .i { font-size: 20px; color: var(--nav); flex-shrink: 0; } .cat__body { flex: 1; min-width: 0; } .cat__n { font-size: 14.5px; font-weight: 600; } .cat__p { font-size: 11.5px; color: var(--muted); margin-top: 1px; } .cat__v { font-family: var(--mono); font-size: 13.5px; font-weight: 600; white-space: nowrap; } /* ── 04 Тарифы (по умолчанию скрыты) ───────────────────────────────────── */ .section-price { padding: 0 0 92px; } .plans { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 34px; } .plan { border: 1px solid var(--line-card); border-radius: 26px; padding: 36px 34px; background: var(--bg); color: var(--ink); } .plan--pro { background: var(--ink); color: var(--on-ink-soft); border-color: var(--ink); } .plan__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .plan__name { font-size: 16px; font-weight: 700; } .plan__tag { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .plan--pro .plan__tag { color: var(--dim); } .plan__price { display: flex; align-items: baseline; gap: 8px; margin-top: 20px; } .plan__price b { font-family: var(--mono); font-size: 38px; font-weight: 600; letter-spacing: -.04em; } .plan__per { font-size: 14px; color: var(--muted); } .plan--pro .plan__per { color: var(--dim); } .plan__rule { height: 1px; background: var(--hairline); margin: 26px 0 22px; border: 0; } .plan--pro .plan__rule { background: rgba(255, 255, 255, .12); } .plan__items { display: flex; flex-direction: column; gap: 12px; list-style: none; } .plan__items li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; } .plan__items .i { font-size: 18px; color: var(--muted); flex-shrink: 0; } .plan--pro .plan__items .i { color: var(--dim); } .plan__cta { margin-top: 28px; height: 48px; width: 100%; border-radius: 24px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; background: transparent; color: var(--ink); border: 1px solid var(--line-strong); } .plan--pro .plan__cta { background: var(--on-ink-soft); color: var(--ink); border-color: var(--on-ink-soft); } /* ── 05 Вопросы ────────────────────────────────────────────────────────── */ .section-faq { padding: 0 0 92px; } .faq { display: grid; grid-template-columns: .7fr 1.3fr; gap: 56px; } .faq h2 { font-size: 38px; line-height: 1.05; letter-spacing: -.035em; font-weight: 800; margin-top: 18px; } .faq__list { border-bottom: 1px solid var(--hairline); } .faq__item { border-top: 1px solid var(--hairline); } .faq__q { width: 100%; background: none; border: none; cursor: pointer; padding: 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; text-align: left; font-family: inherit; color: var(--ink); } .faq__q span:first-child { font-size: 18px; font-weight: 600; letter-spacing: -.015em; } .faq__q .i { font-size: 22px; color: var(--muted); flex-shrink: 0; } .faq__q[aria-expanded="true"] .i--plus { display: none; } .faq__q[aria-expanded="false"] .i--minus { display: none; } .faq__a { font-size: 15.5px; line-height: 1.6; color: var(--text-2); padding: 0 60px 26px 0; max-width: 660px; text-wrap: pretty; } .faq__a[hidden] { display: none; } /* ── CTA + футер ───────────────────────────────────────────────────────── */ .section-cta { padding: 0 0 92px; } .cta { border: 1px solid var(--line-card); border-radius: 32px; background: var(--surface); padding: 68px 60px; text-align: center; } .cta h2 { font-size: 46px; line-height: 1.02; letter-spacing: -.04em; font-weight: 800; text-wrap: balance; } .cta__lead { font-size: 17.5px; line-height: 1.55; color: var(--text-2); margin: 18px auto 0; max-width: 520px; } .cta__actions { display: flex; justify-content: center; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .cta__note { font-family: var(--mono); font-size: 12px; color: var(--faint); margin-top: 20px; } .footer { border-top: 1px solid var(--hairline); padding: 40px 0 56px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .footer__brand { display: flex; align-items: center; gap: 11px; } .footer__mark { width: 28px; height: 28px; border-radius: 9px; background: var(--chip-2); border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; } .footer__mark .i { font-size: 18px; } .footer__name { font-size: 14px; font-weight: 600; } .footer__year { font-size: 13px; color: var(--faint); margin-left: 6px; } .footer__links { display: flex; gap: 26px; flex-wrap: wrap; } .footer__links a { font-size: 13.5px; color: var(--muted); } /* ── Переключатель языка ───────────────────────────────────────────────── */ .lang { position: relative; flex-shrink: 0; } .lang__toggle { display: flex; align-items: center; gap: 3px; height: 34px; padding: 0 8px 0 12px; border: 1px solid var(--hairline); background: var(--chip); border-radius: 999px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; letter-spacing: .02em; transition: background-color .18s ease, border-color .18s ease; } .lang__toggle:hover { background: var(--chip-3); border-color: var(--line-strong); } .lang__toggle .i { font-size: 17px; color: var(--muted); transition: transform .18s ease; } .lang__toggle[aria-expanded="true"] .i { transform: rotate(180deg); } .lang__menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 148px; padding: 5px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; box-shadow: 0 12px 28px -12px rgba(17, 17, 16, .28); display: flex; flex-direction: column; gap: 1px; } .lang__btn { border: 0; background: transparent; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--ink); padding: 9px 12px; border-radius: 10px; cursor: pointer; text-align: left; white-space: nowrap; transition: background-color .15s ease; } .lang__btn:hover { background: var(--chip); } .lang__btn[aria-pressed="true"] { font-weight: 600; background: var(--chip-2); } /* ── Контакты ──────────────────────────────────────────────────────────── */ .section-contacts { padding: 0 0 92px; } .contacts__lead { font-size: 16.5px; line-height: 1.6; color: var(--text-2); margin-top: 20px; max-width: 520px; text-wrap: pretty; } .contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 16px; margin-top: 30px; list-style: none; } .contact { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--hairline); border-radius: 20px; padding: 24px 22px; background: var(--surface); color: var(--ink); transition: border-color .18s ease, background-color .18s ease; } a.contact:hover { border-color: var(--ink); color: var(--ink); } .contact__icon { width: 38px; height: 38px; border-radius: 12px; background: var(--chip-2); display: flex; align-items: center; justify-content: center; } .contact__icon .i { font-size: 20px; color: var(--ink); } .contact__icon svg { width: 20px; height: 20px; } .contact__label { font-size: 12.5px; color: var(--muted); } .contact__value { font-size: 16px; font-weight: 600; letter-spacing: -.01em; word-break: break-word; } /* ── Соцсети в футере ──────────────────────────────────────────────────── */ .socials { display: flex; align-items: center; gap: 8px; } .social { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; color: var(--nav); transition: border-color .18s ease, color .18s ease; } .social:hover { border-color: var(--ink); color: var(--ink); } .social .i { font-size: 18px; } .social svg { width: 17px; height: 17px; } /* ── Адаптив. Макет был только под десктоп — брейкпоинты добавлены здесь ── */ @media (max-width: 1080px) { :root { --pad: 28px; } .hero { gap: 40px; padding: 64px 0 72px; } .hero__title { font-size: 56px; } .slab { padding: 48px 40px; gap: 40px; } .reports { gap: 40px; } .faq { gap: 40px; } } @media (max-width: 900px) { .nav__link { display: none; } .nav { gap: 12px; } .hero { grid-template-columns: 1fr; } .hero__lead { max-width: none; } .slab { grid-template-columns: 1fr; } .slab__lead { max-width: none; } .features { grid-template-columns: repeat(2, 1fr); } .reports { grid-template-columns: 1fr; } .reports__lead { max-width: none; } .plans { grid-template-columns: 1fr; } .faq { grid-template-columns: 1fr; } .faq h2 { margin-top: 12px; } .section-reports { padding: 72px 0; } } @media (max-width: 620px) { :root { --pad: 20px; } .header__inner { height: 64px; gap: 10px; } /* Узбекское «Yuklab olish» не влезает в 390px рядом с логотипом и переключателем, поэтому здесь кнопка сжимается до иконки. Подпись остаётся в aria-label. */ .header__cta span:not(.i) { display: none; } .header__cta { padding: 0 13px; gap: 0; } .brand__name { font-size: 16px; } .hero { padding: 44px 0 56px; } .hero__title { font-size: 38px; letter-spacing: -.035em; } .hero__lead { font-size: 17px; } .hero__actions .btn { width: 100%; } .stats { gap: 24px; } .slab { padding: 36px 24px; border-radius: 26px; } .slab__title { font-size: 30px; } .section-head { flex-direction: column; align-items: flex-start; gap: 12px; } .section-head h2 { font-size: 30px; } .features { grid-template-columns: 1fr; } .feature { min-height: 0; padding: 30px 24px 34px; } .reports h2 { font-size: 30px; } .cats-card { padding: 22px 18px; } .section-price, .section-faq, .section-cta { padding-bottom: 72px; } .faq h2 { font-size: 28px; } .faq__q span:first-child { font-size: 16px; } .faq__a { padding-right: 0; } .cta { padding: 44px 24px; border-radius: 26px; } .cta h2 { font-size: 30px; } .cta__lead { font-size: 16px; } .cta__actions .btn { width: 100%; } .footer { flex-direction: column; align-items: flex-start; gap: 20px; } .section-contacts { padding-bottom: 72px; } .contacts { grid-template-columns: 1fr; gap: 12px; } .lang__toggle { padding: 0 6px 0 10px; height: 32px; font-size: 12px; } }