/* ─────────── ТОКЕНЫ ─────────── Палитра снята с фирменной презентации: синий градиент + белые карточки. Синих два, и это не прихоть: --blue #2A6BD8 — акцент НА белом (5.01:1). Мягкий, голубой. --blue-bg #1F55C0 — фон ПОД белым текстом. Держит 4.75:1 даже под бликом. Один цвет обе роли не тянет: если фон сделать таким же светлым, как акцент, белый текст на нём проваливается до 3.7:1, как только сверху ложится градиент. */ :root { --blue: #2A6BD8; --blue-bg: #1F55C0; --blue-deep: #17408F; --blue-ink: #12306B; --sky: #5B8DEF; --sky-2: #8FB4F2; --sky-3: #C6D9FA; --mist: #EAF1FD; --mist-2: #F4F8FE; --white: #FFFFFF; --ink: #16233D; /* 15.65:1 на белом */ --ink-mut: #5A6480; /* 5.88:1 на белом */ --line: #E4EBF8; --err: #B3261E; --wa: #25D366; --font-display: 'Cormorant Garamond', 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 88px; --r-sm: 10px; --r: 14px; --r-lg: 20px; --pad: 20px; --maxw: 1180px; --nav-h: 60px; --shadow-sm: 0 1px 2px rgba(22,35,61,.05), 0 2px 8px rgba(22,35,61,.04); --shadow: 0 2px 4px rgba(22,35,61,.04), 0 10px 28px rgba(22,35,61,.07); --shadow-lg: 0 4px 8px rgba(22,35,61,.04), 0 20px 52px rgba(22,35,61,.10); --shadow-blue: 0 8px 24px rgba(42,107,216,.26); --ease: cubic-bezier(.22,.61,.36,1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); } body { background: var(--white); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--ink); -webkit-font-smoothing: antialiased; /* НЕ ставим overflow-x:hidden на body — оно превращает body в контейнер прокрутки (высотой в экран), из-за чего window.scrollTo и любой IntersectionObserver с root=null перестают работать. От горизонтальной прокрутки страхует .wrap ниже через overflow-x:clip (без scroll-контейнера). */ } img, svg, video { display: block; max-width: 100%; } /* Иконки Tabler — контурные: обводка из currentColor, заливки нет. */ svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.14; font-variant-numeric: lining-nums; /* иначе антиква даёт старостильные цифры */ text-wrap: balance; } .num { font-family: var(--font-sans); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em; } /* ─────────── ДОСТУПНОСТЬ ─────────── */ :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; } .hero :focus-visible, .footer :focus-visible { outline-color: var(--white); } .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ─────────── АНИМАЦИИ ─────────── Два разных механизма, и это намеренно. .rise — первый экран. Чистый CSS, стартует сразу при разборе страницы. Через IntersectionObserver делать нельзя: шапка ждала бы загрузки JS и первые мгновения показывала пустой синий прямоугольник. .reveal — всё, что ниже сгиба. Прячется ТОЛЬКО когда JS жив (класс .js ставится в ), иначе при отключённом JS контент исчез бы навсегда. */ @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .js .rise { animation: rise .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms); } .js .reveal { opacity: 0; transform: translateY(14px); } .js .reveal.in { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .55s var(--ease); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .rise { animation: none; } .js .reveal, .js .reveal.in { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ─────────── КАРКАС ─────────── */ .wrap { width: 100%; overflow-x: clip; } .inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .section { padding-block: var(--s8); } .section-tint { background: linear-gradient(180deg, var(--mist-2) 0%, var(--mist) 100%); border-block: 1px solid var(--line); } .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-bottom: var(--s3); } .sec-title { font-size: clamp(28px, 5.5vw, 42px); color: var(--ink); margin-bottom: var(--s4); } .sec-body { font-size: 16px; color: var(--ink-mut); line-height: 1.75; max-width: 62ch; } /* ─────────── ВЕРХНЯЯ ШАПКА ─────────── */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .nav.stuck { border-bottom-color: var(--line); box-shadow: 0 2px 14px rgba(22,35,61,.06); } .nav-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: var(--nav-h); } .nav-logo { display: flex; align-items: center; } .nav-logo img { height: 30px; width: auto; } .nav-links { display: flex; align-items: center; gap: var(--s2); } .nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--s2); font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; border-radius: var(--r-sm); transition: color .2s var(--ease), background-color .2s var(--ease); } .nav-links a:hover { color: var(--blue); background: var(--mist); } .nav-links a[aria-current="page"] { color: var(--blue); } .nav-cta { background: linear-gradient(135deg, var(--blue) 0%, var(--blue-bg) 100%); color: var(--white) !important; font-weight: 600 !important; padding-inline: var(--s4) !important; box-shadow: var(--shadow-blue); } .nav-cta:hover { background: linear-gradient(135deg, var(--blue-bg) 0%, var(--blue-deep) 100%) !important; } /* ─────────── ГЕРОЙ ─────────── Многослойный градиент: две цветные «линзы» + базовый диагональный. Все слои держатся в диапазоне, где белый текст даёт >=4.5:1. */ .hero { position: relative; overflow: hidden; text-align: center; background: radial-gradient(80% 60% at 82% 6%, rgba(91,141,239,.5), transparent 62%), radial-gradient(70% 70% at 6% 92%, rgba(18,48,107,.55), transparent 58%), linear-gradient(158deg, var(--blue-bg) 0%, #1B4AA8 52%, var(--blue-deep) 100%); padding-block: var(--s8) var(--s9); } /* Мягкий блик как в презентации. .16 — потолок: выше него подзаголовок уходит ниже 4.5:1 и первый экран перестаёт читаться. */ .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(110% 80% at 88% 2%, rgba(255,255,255,.16), transparent 58%); pointer-events: none; } .hero .inner { position: relative; } .hero-logo { height: 42px; width: auto; margin: 0 auto var(--s6); } .hero-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--white); margin-bottom: var(--s4); } .hero h1 { font-size: clamp(34px, 8vw, 60px); color: var(--white); margin-inline: auto; max-width: 15ch; margin-bottom: var(--s4); } .hero-sub { font-size: clamp(15px, 4vw, 18px); color: var(--white); line-height: 1.7; max-width: 54ch; margin: 0 auto var(--s6); } .hero-sm { padding-block: var(--s7) var(--s8); } .hero-sm h1 { font-size: clamp(30px, 6.5vw, 48px); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 54px; padding: 0 var(--s7); font-family: var(--font-sans); font-size: 16px; font-weight: 600; border: 0; border-radius: var(--r-sm); cursor: pointer; text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); } .btn-light { background: var(--white); color: var(--blue); box-shadow: 0 8px 22px rgba(9,24,66,.24); } .btn-light:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(9,24,66,.32); } .btn-light:active { transform: translateY(0); } .btn-blue { background: linear-gradient(135deg, var(--blue) 0%, var(--blue-bg) 100%); color: var(--white); box-shadow: var(--shadow-blue); } .btn-blue:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(42,107,216,.34); } .btn-blue:active { transform: translateY(0); } /* ─────────── ЦИФРЫ ─────────── */ .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); } .stat { background: linear-gradient(180deg, var(--white) 0%, var(--mist-2) 100%); padding: var(--s5) var(--s3); text-align: center; } .stat-num { font-size: clamp(26px, 6vw, 34px); font-weight: 700; color: var(--blue); line-height: 1.1; margin-bottom: var(--s1); } .stat-label { font-size: 13px; color: var(--ink-mut); line-height: 1.4; } /* ─────────── КАРТОЧКИ ─────────── */ .card { background: linear-gradient(180deg, var(--white) 0%, #FBFCFF 100%); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); transition: box-shadow .28s var(--ease), transform .28s var(--ease), border-color .28s var(--ease); } .card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--sky-3); } .ico-plate { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(140deg, var(--mist) 0%, var(--sky-3) 100%); display: grid; place-items: center; color: var(--blue); } .ico-plate svg { width: 24px; height: 24px; } .feats { display: grid; gap: var(--s3); margin-top: var(--s6); } .feat { display: flex; align-items: flex-start; gap: var(--s4); padding: var(--s5); } .feat-t { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 3px; } .feat-d { font-size: 14px; color: var(--ink-mut); line-height: 1.6; } /* ─────────── КЛИЕНТЫ ─────────── */ .clients { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s4); align-items: center; margin-top: var(--s6); } .client { display: grid; place-items: center; } /* Логотипы лежат на одинаковых холстах 3:1 и нормализованы по площади — поэтому у всех одна ширина, а оптический вес совпадает. */ .client img { width: 100%; height: auto; opacity: .7; transition: opacity .25s var(--ease); } .client img:hover { opacity: 1; } /* ─────────── ПРОЕКТЫ ─────────── */ .projects { display: grid; gap: var(--s5); margin-top: var(--s6); } .project { border-radius: var(--r-lg); overflow: hidden; } .project-img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; background: var(--mist); } .project-body { padding: var(--s5); } .project-name { font-size: 23px; color: var(--ink); margin-bottom: var(--s1); } .project-meta { font-size: 13px; font-weight: 500; color: var(--blue); margin-bottom: var(--s3); } .project-fact { font-size: 14px; color: var(--ink-mut); line-height: 1.65; padding-top: var(--s3); border-top: 1px solid var(--line); } .project-fact b { color: var(--ink); font-weight: 600; } /* ─────────── ВИДЕО ─────────── */ .videos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 62vw); gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; padding-block: var(--s2) var(--s5); margin-top: var(--s6); scrollbar-width: thin; scrollbar-color: var(--sky-2) transparent; -webkit-overflow-scrolling: touch; } .videos::-webkit-scrollbar { height: 5px; } .videos::-webkit-scrollbar-thumb { background: var(--sky-2); border-radius: 3px; } .vcard { scroll-snap-align: start; border-radius: var(--r); overflow: hidden; } /* Видео сняты вертикально (9:16) — показываем вертикально, а не режем в полоску. */ .vshell { position: relative; aspect-ratio: 9 / 16; background: var(--blue-ink); } .vshell video { width: 100%; height: 100%; object-fit: cover; } .vplay { position: absolute; inset: 0; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; background: transparent; } .vplay::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,48,107,.5), transparent 55%); } .vplay-dot { position: relative; z-index: 1; width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.94); display: grid; place-items: center; color: var(--blue); box-shadow: 0 6px 20px rgba(9,24,66,.32); transition: transform .25s var(--ease), background-color .25s var(--ease); } .vplay:hover .vplay-dot { background: var(--white); transform: scale(1.09); } .vplay-dot svg { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; stroke: none; } .vinfo { padding: var(--s4); } .vtitle { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.4; margin-bottom: 2px; } .vmeta { font-size: 13px; color: var(--ink-mut); } /* ─────────── ПОЧЕМУ ─────────── */ .why-grid { display: grid; gap: var(--s4); margin-top: var(--s6); } .why-card { padding: var(--s5); } .why-card .ico-plate { margin-bottom: var(--s4); } .why-t { font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.35; margin-bottom: var(--s2); } .why-d { font-size: 14px; color: var(--ink-mut); line-height: 1.7; } .why-d b { color: var(--blue); font-weight: 600; } /* ─────────── КВИЗ ─────────── */ .section-light { background: linear-gradient(180deg, var(--mist-2) 0%, var(--mist) 55%, var(--mist-2) 100%); border-top: 1px solid var(--line); padding-block: var(--s8) var(--s9); } .form-title { font-size: clamp(28px, 5.5vw, 42px); color: var(--ink); margin-bottom: var(--s3); } .form-sub { font-size: 16px; color: var(--ink-mut); line-height: 1.7; max-width: 56ch; margin-bottom: var(--s6); } .form-grid { display: grid; gap: var(--s4); max-width: 640px; } .field { border: 0; padding: 0; margin: 0; min-width: 0; } .field > label, .field > legend { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: var(--s2); padding: 0; } .control { width: 100%; min-height: 54px; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 var(--s4); font-family: var(--font-sans); font-size: 16px; /* 16px — иначе iOS зумит при фокусе */ outline: none; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); } .control:hover { border-color: var(--sky-3); } .control:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(42,107,216,.16); } select.control { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 44px; } .sel { position: relative; } .sel::after { content: ''; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--ink-mut); border-bottom: 2px solid var(--ink-mut); transform: rotate(45deg); pointer-events: none; } /* Код страны — статичная подпись, а НЕ часть значения поля. Иначе семёрка из «+7» попадает в разбор и съедается как цифра номера. */ .tel { position: relative; } .tel-code { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--ink); pointer-events: none; font-variant-numeric: tabular-nums lining-nums; } .tel .control { padding-left: 46px; } .areas { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); } .area { position: relative; display: grid; place-items: center; min-height: 58px; /* тач-цель с запасом к минимуму 44px */ background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; text-align: center; transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease); } .area input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .area-num { font-size: 15px; font-weight: 600; color: var(--ink); } .area-unit { font-size: 12px; color: var(--ink-mut); } .area:hover { border-color: var(--sky-2); transform: translateY(-1px); } .area:has(input:checked) { border-color: var(--blue); border-width: 2px; background: linear-gradient(180deg, rgba(42,107,216,.06), rgba(42,107,216,.11)); box-shadow: 0 0 0 3px rgba(42,107,216,.12); } .area:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; } .err { display: none; font-size: 13px; color: var(--err); margin-top: var(--s2); } .field.invalid .err { display: block; } .field.invalid .control { border-color: var(--err); } .field.invalid .areas .area { border-color: rgba(179,38,30,.45); } .btn-submit { width: 100%; min-height: 58px; margin-top: var(--s2); background: linear-gradient(135deg, var(--blue) 0%, var(--blue-bg) 100%); color: var(--white); font-size: 16px; font-weight: 600; font-family: var(--font-sans); border: 0; border-radius: var(--r-sm); cursor: pointer; box-shadow: var(--shadow-blue); transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); } .btn-submit:hover { background: linear-gradient(135deg, var(--blue-bg) 0%, var(--blue-deep) 100%); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(42,107,216,.34); } .btn-submit:active { transform: translateY(0); } /* ─────────── РЕЗУЛЬТАТ ─────────── */ .result { display: none; margin-top: var(--s7); padding-top: var(--s7); border-top: 1px solid var(--line); } .result.on { display: block; } .res-name { font-size: 30px; color: var(--ink); margin-bottom: var(--s1); } .res-area { font-size: 14px; color: var(--ink-mut); margin-bottom: var(--s4); } .res-equip { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s4); font-size: 14px; color: var(--ink-mut); line-height: 1.6; margin-bottom: var(--s5); } .res-equip b { color: var(--ink); font-weight: 600; } /* ─────────── ТАРИФЫ ─────────── */ .tariffs { display: grid; gap: var(--s4); margin-bottom: var(--s5); } .tariff { position: relative; padding: var(--s5); border-radius: var(--r-lg); } .tariff.pick { border-color: var(--blue); border-width: 2px; box-shadow: var(--shadow); } .tariff-badge { position: absolute; top: -1px; right: -1px; background: linear-gradient(135deg, var(--blue), var(--blue-bg)); color: var(--white); font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 6px 14px; border-radius: 0 var(--r-lg) 0 var(--r); } .tariff-name { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mut); margin-bottom: var(--s3); } .price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); } .price-old { font-size: 15px; color: var(--ink-mut); text-decoration: line-through; } .price-new { font-size: clamp(28px, 6vw, 34px); font-weight: 700; color: var(--ink); line-height: 1; } .price-note { font-size: 21px; font-weight: 600; color: var(--ink); } .off { font-size: 12px; font-weight: 700; color: var(--blue-bg); background: var(--mist); border-radius: 20px; padding: 3px 10px; } .tlist { list-style: none; } .tlist li { display: flex; align-items: flex-start; gap: var(--s2); font-size: 14px; color: var(--ink-mut); line-height: 1.5; padding-block: var(--s2); border-bottom: 1px solid var(--line); } .tlist li:last-child { border-bottom: 0; } .tlist svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--blue); margin-top: 3px; } .note { font-size: 13px; color: var(--ink-mut); line-height: 1.65; padding: var(--s4); margin-bottom: var(--s5); border-left: 3px solid var(--blue); background: linear-gradient(90deg, var(--mist), var(--mist-2)); border-radius: 0 var(--r-sm) var(--r-sm) 0; } .note b { color: var(--ink); font-weight: 600; } .btn-wa { display: flex; align-items: center; justify-content: center; gap: var(--s2); width: 100%; min-height: 60px; background: var(--wa); color: #06281A; /* тёмный текст: 8.77:1 вместо 1.98:1 с белым */ font-size: 16px; font-weight: 600; border-radius: var(--r-sm); text-decoration: none; box-shadow: 0 8px 24px rgba(37,211,102,.3); transition: filter .2s var(--ease), transform .2s var(--ease); } .btn-wa:hover { filter: brightness(1.05); transform: translateY(-2px); } .btn-wa svg { width: 22px; height: 22px; } .wa-note { text-align: center; font-size: 13px; color: var(--ink-mut); margin-top: var(--s3); line-height: 1.5; } /* ─────────── ПОЛОСА-ПРИЗЫВ ─────────── */ .cta-band { position: relative; overflow: hidden; text-align: center; background: radial-gradient(70% 90% at 85% 10%, rgba(91,141,239,.45), transparent 60%), linear-gradient(135deg, var(--blue-bg) 0%, var(--blue-deep) 100%); padding-block: var(--s8); } .cta-band h2 { color: var(--white); font-size: clamp(26px, 5vw, 38px); margin-bottom: var(--s3); } .cta-band p { color: var(--white); font-size: 16px; max-width: 52ch; margin: 0 auto var(--s6); line-height: 1.7; } /* ─────────── ПОДВАЛ ─────────── */ .footer { position: relative; overflow: hidden; text-align: center; background: radial-gradient(60% 80% at 90% 0%, rgba(91,141,239,.4), transparent 60%), linear-gradient(158deg, var(--blue-bg) 0%, var(--blue-deep) 100%); padding-block: var(--s8); } .footer .inner { position: relative; } .footer-logo { height: 32px; width: auto; margin: 0 auto var(--s5); } .contacts { display: grid; gap: var(--s2); margin-bottom: var(--s5); } .contact { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; /* тач-цель: ссылка-звонок должна нажиматься пальцем */ padding-inline: var(--s2); font-size: 15px; color: rgba(255,255,255,.92); text-decoration: none; transition: color .2s var(--ease); } a.contact:hover { color: var(--white); } .contact svg { width: 18px; height: 18px; color: rgba(255,255,255,.8); flex: 0 0 auto; } .copy { font-size: 13px; color: rgba(255,255,255,.85); } /* ─────────── АДАПТИВ ─────────── */ @media (min-width: 600px) { :root { --pad: 32px; } .stats { grid-template-columns: repeat(3, 1fr); } .areas { grid-template-columns: repeat(4, 1fr); } .clients { grid-template-columns: repeat(3, 1fr); } .contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s5); } } @media (min-width: 768px) { :root { --nav-h: 74px; } .nav-logo img { height: 36px; } .nav-links a { font-size: 15px; padding-inline: var(--s3); } .nav-cta { padding-inline: var(--s5) !important; } .hero-logo { height: 56px; } .footer-logo { height: 40px; } .hero { padding-block: var(--s9) calc(var(--s9) + var(--s5)); } .hero-sm { padding-block: var(--s8) var(--s9); } .feats { grid-template-columns: repeat(2, 1fr); } .projects { grid-template-columns: repeat(2, 1fr); } .why-grid { grid-template-columns: repeat(2, 1fr); } .videos { grid-auto-columns: 250px; } .clients { grid-template-columns: repeat(4, 1fr); gap: var(--s6) var(--s5); } .tariffs { grid-template-columns: repeat(3, 1fr); align-items: start; } .form-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s4) var(--s5); } .field-wide { grid-column: 1 / -1; } .btn-submit { grid-column: 1 / -1; justify-self: start; width: auto; padding-inline: var(--s8); } .btn-wa { max-width: 460px; margin-inline: auto; } } @media (min-width: 1024px) { :root { --pad: 40px; } .stats { grid-template-columns: repeat(6, 1fr); } .why-grid { grid-template-columns: repeat(3, 1fr); } .videos { grid-auto-columns: 270px; justify-content: start; } .clients { grid-template-columns: repeat(6, 1fr); } .hero h1 { max-width: 18ch; } }