@import url('/vendor/fonts.css'); :root { --bg: #000000; --bg2: #0a0a0a; --bg3: #141414; --card: #101010; --border: #232323; --border2: #2f2f2f; --accent: #6fac46; --accent2: #7ec750; --accent-soft: rgba(111,172,70,.12); --red: #ef4444; --red-soft: rgba(239,68,68,.12); --text: #f2f2f2; --text2: #b0b0b0; --text3: #7a7a7a; --radius: 14px; } * { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } body { font-family:'Jost',-apple-system,'Helvetica Neue',Arial,sans-serif; background:var(--bg); color:var(--text); line-height:1.55; overflow-x:hidden; } a { color:var(--accent); text-decoration:none; } img { max-width:100%; } .wrap { max-width:1120px; margin:0 auto; padding:0 24px; } /* Верхний отступ одинаковый у всех секций: от полоски до зелёного надзаголовка столько же, сколько в блоке «Для кого». */ section { padding:56px 0 88px; } /* Липкая шапка высотой 104px перекрывала верх секции при переходе по якорю — браузер докручивал «слишком низко». scroll-margin отодвигает точку остановки. */ section[id], header[id] { scroll-margin-top:118px; } @media (max-width:860px) { section[id], header[id] { scroll-margin-top:90px; } } h2 { font-size:clamp(26px,4vw,40px); font-weight:800; letter-spacing:-.5px; margin-bottom:14px; } .sub { color:var(--text2); font-size:17px; max-width:640px; } .eyebrow { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; } /* ── Nav ── */ nav { position:sticky; top:0; z-index:50; background:rgba(0,0,0,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); } .nav-inner { display:flex; align-items:center; gap:20px; height:104px; } .nav-logo img { height:84px; display:block; } @media (max-width:860px){ .nav-inner{height:76px} .nav-logo img{height:58px} } .nav-links { display:flex; gap:18px; margin-left:auto; } /* ── Бургер: до 1060px основная навигация уезжала в display:none и с телефона между сегментными страницами перейти было нельзя. Кнопка рисуется тремя полосками, в открытом состоянии складывается в крестик. ── */ .nav-burger { display:none; margin-left:auto; width:44px; height:44px; padding:11px 10px; flex:none; flex-direction:column; justify-content:space-between; background:none; border:1px solid var(--border); border-radius:10px; cursor:pointer; } .nav-burger span { display:block; height:2px; width:100%; background:var(--text); border-radius:2px; transition:transform .18s, opacity .15s; } nav.open .nav-burger span:nth-child(1) { transform:translateY(9px) rotate(45deg); } nav.open .nav-burger span:nth-child(2) { opacity:0; } nav.open .nav-burger span:nth-child(3) { transform:translateY(-9px) rotate(-45deg); } /* nowrap обязателен: без него узкий флекс-item ломает пункт на две строки («Как\nработает») и вся шапка распухает вдвое. */ .nav-links a { color:var(--text2); font-size:14px; font-weight:600; transition:color .15s; white-space:nowrap; } .nav-links a:hover { color:var(--text); } /* ── «Для кого»: подменю по наведению и по фокусу с клавиатуры ── Пункты без своей страницы не кликабельны (span, а не ссылка) — чтобы не вести на 404. ::before держит невидимый мостик над зазором, иначе меню схлопывается, пока курсор идёт от пункта к списку. */ .nav-drop { position:relative; display:flex; align-items:center; } .nav-drop > a::after { content:'▾'; margin-left:5px; font-size:11px; opacity:.65; } .nav-drop-menu { position:absolute; top:100%; left:-14px; margin-top:12px; min-width:252px; padding:8px; background:var(--bg2); border:1px solid var(--border); border-radius:12px; box-shadow:0 18px 44px rgba(0,0,0,.6); display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .16s, transform .16s, visibility .16s; } .nav-drop-menu::before { content:''; position:absolute; left:0; right:0; top:-14px; height:14px; } .nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { opacity:1; visibility:visible; transform:translateY(0); } .nav-drop-menu a { padding:9px 12px; border-radius:8px; font-size:14px; font-weight:600; display:flex; align-items:center; } .nav-drop-menu a:hover { background:var(--card); color:var(--text); } .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; font-weight:700; font-size:15px; padding:13px 26px; border-radius:10px; border:1px solid transparent; cursor:pointer; transition:transform .15s, box-shadow .15s, background .15s; white-space:nowrap; } .btn-primary { background:var(--accent); color:#0a0a0a; } .btn-primary:hover { background:var(--accent2); transform:translateY(-1px); box-shadow:0 8px 30px rgba(111,172,70,.35); } .btn-ghost { border-color:var(--border2); color:var(--text); background:transparent; } .btn-ghost:hover { border-color:var(--accent); color:var(--accent); } .btn-sm { padding:9px 18px; font-size:14px; } /* В шапке две кнопки: демо (второстепенная) и заявка (целевая). Пункт «Контакты» на десктопе не дублируем — его работу делает зелёная кнопка; в бургер-меню он возвращается ссылкой .nav-in-burger. .nav-only-mobile — для «Демо»: появляется там, где прячется сама демо-кнопка. */ .nav-only-mobile, .nav-in-burger { display:none; } /* ── Hero ── */ .hero { padding:96px 0 80px; position:relative; } .hero::before { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 900px 480px at 75% 10%, rgba(111,172,70,.14), transparent 65%); } .hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; position:relative; } .hero h1 { font-size:clamp(32px,5vw,54px); font-weight:900; line-height:1.12; letter-spacing:-1px; margin-bottom:20px; } .hero h1 em { font-style:normal; color:var(--accent); } .hero p { font-size:18px; color:var(--text2); max-width:520px; margin-bottom:32px; } .hero-cta { display:flex; gap:14px; flex-wrap:wrap; } .hero-note { margin-top:18px; font-size:13px; color:var(--text3); } /* мокап алерта */ .mock { background:var(--card); border:1px solid var(--border2); border-radius:var(--radius); padding:22px; box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(111,172,70,.08); transform:rotate(1.5deg); } .mock-head { display:flex; align-items:center; gap:10px; margin-bottom:16px; } .mock-dot { width:10px; height:10px; border-radius:50%; background:var(--red); animation:pulse 1.6s infinite; } @keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.5)} 50%{box-shadow:0 0 0 9px rgba(239,68,68,0)} } .mock-head b { font-size:15px; } /* Только метка времени прижимается вправо. Раньше селектор ловил и .mock-dot (он тоже span), из-за чего свободное место делилось надвое и вся строка с огоньком уезжала от левого края. */ .mock-head > span:last-child { margin-left:auto; font-size:12px; color:var(--text3); } .mock-photo { height:190px; border-radius:10px; margin-bottom:16px; position:relative; overflow:hidden; background:linear-gradient(135deg,#161d12 0%, #0d130a 60%, #0a0a0a 100%); border:1px solid var(--border); } .mock-photo svg { position:absolute; inset:0; width:100%; height:100%; } /* Полоса сканирования: кадр выглядит живым, а не статичной картинкой */ .mock-photo::after { content:''; position:absolute; top:0; bottom:0; width:90px; pointer-events:none; background:linear-gradient(90deg, transparent, rgba(111,172,70,.13), transparent); animation:scan 11s ease-in-out infinite; } /* Проход занимает меньше половины цикла, дальше пауза — иначе полоса мельтешит */ @keyframes scan { 0% { left:-90px; opacity:0 } 4% { opacity:1 } 38% { opacity:1 } 44% { left:100%; opacity:0 } 100% { left:100%; opacity:0 } } .mock-badge { position:absolute; top:3px; left:6px; background:rgba(20,8,8,.85); color:#ff8a8a; border:1px solid rgba(239,68,68,.4); font-size:11px; font-weight:700; padding:3px 8px; border-radius:6px; } .mock-cam { position:absolute; bottom:10px; right:12px; font-size:11px; color:var(--text3); font-family:monospace; } .mock-rows { display:flex; flex-direction:column; gap:9px; font-size:14px; } .mock-rows div { display:flex; justify-content:space-between; color:var(--text2); } .mock-rows b { color:var(--text); } .mock-rows .warn { color:#ff8a8a; font-weight:700; } /* ── Pains ── */ /* Сетка, а не flex с центрированием: колонки должны совпадать от ряда к ряду, иначе иконки нижнего ряда «уезжают» относительно верхнего. */ .cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:40px; } /* «Знакомо?» — 5 карточек: при колонке от 240px они ложились 4+1 и пятая висела одна. Более широкая колонка даёт 3+2 — ряды заполнены, ничего не прячем. */ #pains .cards { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); } .card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:26px; transition:border-color .2s, transform .2s; } .card:hover { border-color:var(--border2); transform:translateY(-3px); } .card .ico { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--red-soft); color:var(--red); margin-bottom:16px; } .card.green .ico { background:var(--accent-soft); color:var(--accent); } .card h3 { font-size:17px; font-weight:700; margin-bottom:8px; } /* ── Карточки-сегменты на общей странице («Для кого») ── Карточка целиком кликабельна, если у сегмента есть своя страница. */ a.card { color:inherit; display:flex; } /* Сегментов всего четыре — кладём их в две широкие колонки, так карточка вдвое крупнее и читается как отдельная «дверь», а не как плитка в ряду. Внутри — горизонтально: иконка, текст, круглая стрелка. */ /* display:flex именно здесь, а не только на a.card: некликабельная карточка — это div, у неё иначе иконка вставала над текстом. */ .seg { display:flex; flex-direction:row; align-items:center; gap:20px; position:relative; overflow:hidden; padding:28px 30px; } .seg .ico { width:58px; height:58px; flex:0 0 58px; border-radius:14px; margin-bottom:0; } .seg .ico svg { width:28px; height:28px; } .seg-body { flex:1; min-width:0; } .seg h3 { font-size:20px; margin-bottom:4px; } не помещалась в строку), а к короткой строке описания — сразу за словом. */ .seg p { font-size:14.5px; color:var(--text3); } .seg-go { flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border2); color:var(--accent); font-size:17px; transition:background .22s ease, border-color .22s ease, color .22s ease; } .seg-go i { font-style:normal; transition:transform .22s ease; } a.seg:hover .seg-go { background:var(--accent); border-color:var(--accent); color:#0a0a0a; } /* Свечение из-под верхней кромки — включается только на кликабельных карточках */ .seg::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(460px 170px at 50% -10%, rgba(111,172,70,.18), transparent 72%); opacity:0; transition:opacity .25s ease; } a.seg:hover { transform:translateY(-6px); border-color:var(--accent); } a.seg:hover::after { opacity:1; } a.seg:hover .seg-go i { transform:translateX(6px); } /* Под заголовком нет подзаголовка — убираем провал до карточек. line-height у h2 наследуется от body (1.55) и добавляет пустую полосу под буквами, поэтому режем и его. */ #segments .sec-head h2 { margin-bottom:0; line-height:1.15; } /* grid-auto-rows:1fr — оба ряда одной высоты, иначе более длинный заголовок в четвёртой карточке делал нижний ряд выше верхнего. */ #segments .cards { grid-template-columns:repeat(auto-fit,minmax(430px,1fr)); grid-auto-rows:1fr; gap:16px; margin-top:14px; } /* Карточки сегментов появляются заметнее и с большим шагом, чем обычные */ #segments .cards > .rv { transform:translateY(38px) scale(.96); transition-duration:.7s; } #segments .cards > .rv:nth-child(2) { transition-delay:.12s } #segments .cards > .rv:nth-child(3) { transition-delay:.24s } #segments .cards > .rv:nth-child(4) { transition-delay:.36s } /* ── Термин с подсказкой ── Словарь из блока «События» убран, но слово «алерт» осталось в тексте. Подсвечиваем и объясняем по наведению; tabindex + :focus-within — чтобы подсказка открывалась и с клавиатуры, и тапом на телефоне. */ .term { position:relative; color:var(--accent); font-weight:600; cursor:help; border-bottom:1px dashed currentColor; outline:none; } .term-tip { position:absolute; left:50%; bottom:calc(100% + 10px); z-index:60; width:max-content; max-width:min(300px,72vw); transform:translateX(-50%) translateY(4px); padding:11px 14px; border-radius:10px; background:var(--bg2); border:1px solid var(--border2); box-shadow:0 16px 40px rgba(0,0,0,.6); color:var(--text2); font-size:13px; font-weight:400; line-height:1.5; letter-spacing:0; text-transform:none; white-space:normal; text-align:left; opacity:0; visibility:hidden; transition:opacity .16s, transform .16s, visibility .16s; } .term-tip::after { content:''; position:absolute; top:100%; left:50%; margin-left:-6px; border:6px solid transparent; border-top-color:var(--border2); } .term:hover .term-tip, .term:focus .term-tip, .term:focus-within .term-tip { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } .card p { font-size:14px; color:var(--text2); } /* ── Steps ── */ .steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:40px; counter-reset:step; } .step { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:28px; position:relative; } .step::before { counter-increment:step; content:counter(step,decimal-leading-zero); font-size:44px; font-weight:900; color:var(--accent-soft); -webkit-text-stroke:1px rgba(111,172,70,.5); position:absolute; top:16px; right:20px; line-height:1; } .step h3 { font-size:18px; font-weight:700; margin-bottom:10px; max-width:80%; } .step p { font-size:14px; color:var(--text2); } /* ── Privacy strip ── */ .privacy { background:linear-gradient(180deg, rgba(111,172,70,.07), rgba(111,172,70,.02)); border:1px solid rgba(111,172,70,.25); border-radius:var(--radius); padding:40px; display:grid; grid-template-columns:1.2fr 1fr; gap:36px; align-items:center; } .privacy ul { list-style:none; margin-top:18px; display:flex; flex-direction:column; gap:12px; } .privacy li { display:flex; gap:12px; font-size:15px; color:var(--text2); } .privacy li svg { flex-shrink:0; margin-top:3px; color:var(--accent); } /* анимированная схема «куда уходят записи» */ .scheme { display:flex; flex-direction:column; } .scheme-srcs { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } .scheme-chip { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--text2); background:var(--bg2); border:1px solid var(--border2); border-radius:10px; padding:9px 14px; } .scheme-chip svg { color:var(--accent); flex-shrink:0; } .scheme svg.pipe { display:block; width:100%; height:auto; } .scheme-box { background:var(--bg2); border-radius:12px; padding:14px 18px; text-align:center; } .scheme-box b { display:block; font-size:15px; } .scheme-box span { display:block; font-size:12.5px; color:var(--text3); line-height:1.5; margin-top:3px; } .scheme-hub { border:1px solid rgba(111,172,70,.45); animation:hubGlow 3.2s ease-out infinite; } @keyframes hubGlow { 0%{box-shadow:0 0 0 0 rgba(111,172,70,.22)} 70%,100%{box-shadow:0 0 0 12px rgba(111,172,70,0)} } .scheme-cab { border:1px solid var(--border2); } .scheme-drop { position:relative; } .scheme-drop .pipe-note { position:absolute; left:calc(50% + 16px); right:0; top:50%; transform:translateY(-50%); font-size:12px; color:var(--text3); line-height:1.45; text-align:left; } /* ── Словарь ── */ /* Левая колонка — один грид-элемент (.terms-col). Раньше список событий и аккордеон были отдельными элементами в двух рядах, и высокий кадр справа, растянутый на оба ряда, раздвигал их: на страницах с коротким списком аккордеон уезжал далеко вниз. */ .glossary { display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:start; margin-top:36px; } .terms-col { display:flex; flex-direction:column; gap:18px; min-width:0; } /* Оба словаря — в левой колонке, кадр — в правой и липнет к верху секции */ .glossary > .terms-col { grid-column:1; } .glossary > .shot { grid-column:2; } .terms { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:4px 26px; } /* Технические термины — аккордеон: по умолчанию свёрнут, стили
из FAQ */ .terms-tech { padding:0 26px; } .terms-tech > summary { font-size:15.5px; } /* Раскрытый аккордеон: нижний padding summary (20px из общих стилей) давал слишком большой зазор до вступительного абзаца — в открытом виде поджимаем. */ .terms-tech[open] > summary { padding-bottom:6px; } .terms-tech .tech-intro { font-size:13.5px; color:var(--text3); line-height:1.6; margin:0; padding-bottom:4px; } .terms-tech dl > div { padding:18px 0; border-top:1px solid var(--border); } .terms-tech dl { padding-bottom:8px; } .terms > div { padding:18px 0; border-bottom:1px solid var(--border); } .terms > div:last-child { border-bottom:none; } .terms dt { display:flex; align-items:center; gap:9px; font-size:15.5px; font-weight:700; margin-bottom:6px; } .terms dt .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--accent); } .terms dt .dot.red { background:#ef4444; } .terms dt .dot.orange { background:#e6b45a; } .terms dt .dot.violet { background:#8b7cf6; } .terms dd { font-size:14px; color:var(--text2); line-height:1.6; } .shot { position:sticky; top:88px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:12px; } .shot img { width:100%; height:auto; display:block; border-radius:8px; background:#000; } .shot figcaption { font-size:12.5px; color:var(--text3); line-height:1.55; margin-top:11px; } .shot figcaption b { color:var(--text2); font-weight:600; } /* ── Demo ── */ .demo-box { background:var(--card); border:1px solid var(--border2); border-radius:var(--radius); padding:44px; text-align:center; position:relative; overflow:hidden; } .demo-box::before { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 500px 260px at 50% 0%, rgba(111,172,70,.12), transparent 70%); } /* Отступ у кнопки: раньше её отбивали от текста блоки с логином и паролем, теперь их нет — иначе кнопка слипается с абзацем сверху. */ .demo-box .btn { margin-top:26px; } .demo-note { font-size:13px; color:var(--text3); margin-top:16px; } /* ── Pricing ── */ .plans-all { margin-top:36px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px 26px; } .plans-all-title { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; } .plans-all-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px 24px; } .plans-all-grid span { display:flex; gap:9px; font-size:14px; color:var(--text2); align-items:flex-start; } .plans-all-grid svg { flex-shrink:0; margin-top:3px; color:var(--accent); } .plan .price { font-size:28px; font-weight:800; letter-spacing:-.5px; margin-bottom:18px; } .plan .price span { font-size:14px; color:var(--text3); font-weight:600; letter-spacing:0; } .plan .cams { color:var(--text); font-weight:700; } .plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:18px; } .plan { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:32px; display:flex; flex-direction:column; } .plan.featured { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 20px 60px rgba(111,172,70,.12); position:relative; } .plan.featured::before { content:'Популярный'; position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--accent); color:#0a0a0a; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:4px 14px; border-radius:20px; } .plan h3 { font-size:20px; font-weight:800; margin-bottom:4px; } .plan .for { font-size:13px; color:var(--text3); margin-bottom:22px; } .plan ul { list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:28px; } .plan li { display:flex; gap:10px; font-size:14px; color:var(--text2); } .plan li svg { flex-shrink:0; margin-top:3px; color:var(--accent); } .plan .btn { margin-top:auto; } /* Оговорка про оплату оборудования: выделяем цветом, её часто пропускают */ .pay-extra { color:var(--accent); font-weight:600; } /* ── FAQ ── */ .faq { max-width:760px; margin:40px auto 0; display:flex; flex-direction:column; gap:12px; } details { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:0 24px; } details[open] { border-color:var(--border2); } summary { cursor:pointer; font-weight:700; font-size:16px; padding:20px 0; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; } summary::-webkit-details-marker { display:none; } summary::after { content:'+'; font-size:22px; color:var(--accent); font-weight:400; transition:transform .2s; } details[open] summary::after { transform:rotate(45deg); } details p { color:var(--text2); font-size:15px; padding-bottom:22px; } /* ── Форма заявки ── */ #lead { background:var(--bg2); border-top:1px solid var(--border); } .lead-box { max-width:760px; margin:32px auto 0; } .lead-form { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:32px; box-shadow:0 24px 70px rgba(0,0,0,.5); display:grid; grid-template-columns:1fr 1fr; gap:18px; } .lf-field { display:flex; flex-direction:column; gap:7px; } .lf-field.full { grid-column:1 / -1; } .lf-field label { font-size:13px; font-weight:600; color:var(--text2); letter-spacing:.02em; } .lf-field label .req { color:var(--accent); } .lf-field input, .lf-field textarea { font:inherit; font-size:15px; color:var(--text); background:var(--bg3); border:1px solid var(--border2); border-radius:10px; padding:12px 14px; outline:none; transition:border-color .15s, box-shadow .15s; } .lf-field textarea { resize:vertical; min-height:96px; } .lf-field input::placeholder, .lf-field textarea::placeholder { color:var(--text3); } .lf-field input:focus, .lf-field textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } /* «Сколько объектов» — число вручную. Поле на всю ширину сетки не растягиваем: цифра короткая, широкий инпут выглядит как ошибка вёрстки. */ .lf-num { max-width:220px; } .lf-submit { grid-column:1 / -1; display:flex; align-items:center; gap:16px; margin-top:4px; } .lf-note { font-size:12.5px; color:var(--text3); line-height:1.4; } /* Honeypot: люди поле не видят и не заполняют; заполнено → бот */ .lf-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; } .lf-consent { display:flex; flex-direction:column; gap:10px; } .lf-consent a { text-decoration:underline; text-underline-offset:2px; } .lf-consent label { display:flex; align-items:flex-start; gap:9px; font-size:12.5px; font-weight:400; color:var(--text3); line-height:1.4; cursor:pointer; } .lf-consent input { margin-top:1px; width:15px; height:15px; flex:none; accent-color:var(--accent); } .lead-form.sent { display:block; text-align:center; padding:56px 32px; } .lf-done { font-size:20px; font-weight:700; margin-bottom:8px; } .lf-done::before { content:'✓'; display:block; font-size:40px; color:var(--accent); margin-bottom:10px; } .lead-alt { text-align:center; margin-top:20px; font-size:14px; color:var(--text3); } .lead-alt a { font-weight:600; } /* ── CTA + Footer ── */ /* Финальный призыв: мягкое дыхание фона + пульс вокруг главной кнопки — блок текстово короткий, без движения выглядел пустым. */ .final { text-align:center; position:relative; overflow:hidden; } .final h2 { font-size:clamp(28px,4vw,44px); } .final::before { content:''; position:absolute; left:50%; bottom:-45%; width:min(1000px,120%); height:460px; transform:translateX(-50%); pointer-events:none; background:radial-gradient(ellipse at center, rgba(111,172,70,.16), transparent 70%); animation:glow 6s ease-in-out infinite; } @keyframes glow { 0%,100%{opacity:.5} 50%{opacity:1} } .final .wrap { position:relative; z-index:1; } .final .btn-primary { position:relative; } .final .btn-primary::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; animation:cta-pulse 2.6s cubic-bezier(.4,0,.6,1) infinite; } @keyframes cta-pulse { 0% { box-shadow:0 0 0 0 rgba(111,172,70,.55) } 70% { box-shadow:0 0 0 18px rgba(111,172,70,0) } 100% { box-shadow:0 0 0 0 rgba(111,172,70,0) } } footer { border-top:1px solid var(--border); padding:36px 0; } .foot { display:flex; align-items:center; gap:20px; flex-wrap:wrap; color:var(--text3); font-size:13px; } .foot img { height:26px; opacity:.8; } .foot .links { margin-left:auto; display:flex; gap:18px; } .foot a { color:var(--text3); } .foot .links b { color:var(--text2); font-weight:700; margin-right:5px; } .foot a:hover { color:var(--text2); } /* дисклеймер про оферту (ст. 435/437 ГК) — отдельной строкой под подвалом. Ссылки на Политику и Согласие добавятся сюда же, когда появятся /privacy и /personaldata */ .foot-legal { margin-top:22px; padding-top:18px; border-top:1px solid var(--border); } .foot-legal p { color:var(--text3); font-size:12px; line-height:1.6; max-width:900px; } /* reveal-анимация */ .rv { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; } .rv.on { opacity:1; transform:none; } /* Карточки выезжают по очереди, а не все разом — ряд «собирается» на глазах. Заголовок секции (надзаголовок + h2) — один блок, чтобы «Знакомо?» не всплывало отдельно от заголовка. */ .sec-head .eyebrow { display:block; margin-bottom:10px; } .cards > .rv { transform:translateY(28px) scale(.985); } .cards > .rv.on { transform:none; } .cards > .rv:nth-child(1) { transition-delay:0s } .cards > .rv:nth-child(2) { transition-delay:.07s } .cards > .rv:nth-child(3) { transition-delay:.14s } .cards > .rv:nth-child(4) { transition-delay:.21s } .cards > .rv:nth-child(5) { transition-delay:.28s } .cards > .rv:nth-child(6) { transition-delay:.35s } .cards > .rv:nth-child(7) { transition-delay:.42s } .cards > .rv:nth-child(8) { transition-delay:.49s } /* Уважаем системную настройку «уменьшить движение»: анимации выключаются, контент остаётся видимым. */ @media (prefers-reduced-motion: reduce) { .rv, .cards > .rv { opacity:1; transform:none; transition:none; } .final::before, .final .btn-primary::after, .mock-dot, .mock-photo::after { animation:none; } .mock-photo::after { display:none; } } /* Шапка схлопывается в бургер раньше остальной вёрстки: логотип + 6 пунктов + две кнопки перестают помещаться в .wrap (1120px) примерно на 1040px, и пункты начинают наезжать друг на друга. Блочные правила остаются на 860px ниже. */ @media (max-width: 1060px) { /* Меню закрыто; открывается кнопкой .nav-burger (класс open на