/* ============================================================ GreenMP — shared.css Единый источник стилей. Подключать первым во всех страницах. ============================================================ */ /* ── RESET ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ── ТОКЕНЫ ── */ :root { /* Цвета */ --cream: #F5F0E8; --cream2: #EDE8DC; --cream3: #E4DDD0; --dark: #1a1814; --dark2: #1a1814; --ink: #3D3830; --muted: #8B8278; --accent: #C8440A; --accent2: #A8360A; --green: #1A6B3C; --blue: #1E5FA8; --border: #D8D0C4; --white: #ffffff; /* Отступы */ --sp-xs: 8px; --sp-sm: 16px; --sp-md: 32px; --sp-lg: 64px; --sp-xl: 96px; /* Внутренние отступы секций */ --sec-pad-v: 100px; --sec-pad-h: 40px; /* Типографика */ --fz-label: 11px; --fz-small: 12px; --fz-body: 14px; --fz-mid: 16px; --fz-lead: 18px; --fz-h3: 20px; --fz-h2-min: 28px; --fz-h1-min: 36px; /* Радиусы */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-btn: 10px; --r-pill: 100px; /* Шапка */ --hdr-h: 64px; } /* ── БАЗОВЫЕ СТИЛИ ── */ html { scroll-behavior: smooth; } body { background: var(--cream); color: var(--dark); font-family: 'Manrope', sans-serif; font-size: var(--fz-mid); line-height: 1.6; overflow-x: hidden; } /* ── ШРИФТЫ — preconnect прописывать в каждой страницы ── */ /* ── ШАПКА ── */ .hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(245, 240, 232, .97); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); height: var(--hdr-h); display: flex; align-items: center; padding: 0 var(--sec-pad-h); justify-content: space-between; } .logo { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 900; color: var(--dark); text-decoration: none; letter-spacing: -.5px; } .logo em { color: var(--accent); font-style: normal; } .hnav { display: flex; gap: var(--sp-md); } .hnav a { font-size: var(--fz-body); font-weight: 600; color: var(--muted); text-decoration: none; transition: color .2s; } .hnav a:hover, .hnav a.active { color: var(--dark); } .hright { display: flex; align-items: center; gap: var(--sp-sm); } .hphone { font-size: var(--fz-body); font-weight: 700; color: var(--dark); text-decoration: none; transition: color .2s; } .hphone:hover { color: var(--accent); } /* ── КНОПКИ ── */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-xs); background: var(--accent); color: white; border: none; padding: 13px 28px; border-radius: var(--r-btn); font-family: 'Manrope', sans-serif; font-size: var(--fz-body); font-weight: 800; cursor: pointer; text-decoration: none; transition: all .2s; white-space: nowrap; } .btn-primary:hover { background: var(--accent2); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(200, 68, 10, .25); } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-xs); background: transparent; color: var(--dark); border: 1.5px solid var(--border); padding: 12px 26px; border-radius: var(--r-btn); font-family: 'Manrope', sans-serif; font-size: var(--fz-body); font-weight: 700; cursor: pointer; text-decoration: none; transition: all .2s; } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .btn-full { width: 100%; padding: 16px; font-size: var(--fz-mid); } /* ── СЕКЦИИ ── */ .sec { padding: var(--sec-pad-v) var(--sec-pad-h); border-top: 1px solid var(--border); } .sec-w { background: var(--white); } .sec-c { background: var(--cream); } .sec-c2 { background: var(--cream2); } .sec-d { background: var(--dark); } .sin { max-width: 1100px; margin: 0 auto; } .sin-wide { max-width: 1240px; margin: 0 auto; } .sin-narrow { max-width: 760px; margin: 0 auto; } /* ── ТИПОГРАФИКА СЕКЦИЙ ── */ .ey { font-size: var(--fz-label); font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; color: var(--accent); margin-bottom: var(--sp-sm); display: flex; align-items: center; gap: var(--sp-xs); } .ey::before { content: ''; width: 20px; height: 1.5px; background: var(--accent); display: block; flex-shrink: 0; } .ey-light { color: rgba(200, 68, 10, .6); } .ey-light::before { background: rgba(200, 68, 10, .4); } .sh { font-family: 'Playfair Display', serif; font-size: clamp(28px, 3.2vw, 44px); font-weight: 900; line-height: 1.1; letter-spacing: -1.5px; color: var(--dark); margin-bottom: var(--sp-sm); } .sh-l { color: var(--white); } .ss { font-size: var(--fz-lead); color: var(--muted); line-height: 1.8; max-width: 560px; margin-bottom: var(--sp-md); } .ss-l { color: rgba(255, 255, 255, .4); } /* ── ФОРМЫ ── */ .fi { margin-bottom: var(--sp-xs) + 2px; } .fi { margin-bottom: 10px; } .finput { width: 100%; padding: 13px 16px; border: 1.5px solid var(--border); border-radius: var(--r-sm); font-family: 'Manrope', sans-serif; font-size: var(--fz-body); color: var(--dark); background: #fafaf8; transition: border-color .2s, background .2s; outline: none; } .finput:focus { border-color: var(--accent); background: var(--white); } .finput::placeholder { color: #b0a898; } .finput.error { border-color: #d33; } .fpriv { font-size: var(--fz-small); color: #b0a898; text-align: center; margin-top: var(--sp-xs); line-height: 1.5; } .fgar { display: flex; align-items: center; gap: var(--sp-xs); background: #f0faf4; border: 1px solid #bbf7d0; border-radius: var(--r-sm); padding: 10px 14px; margin-top: var(--sp-xs); } .fgar p { font-size: var(--fz-small); color: var(--green); font-weight: 600; } /* Состояние успеха после отправки формы */ .form-success { display: none; text-align: center; padding: var(--sp-md) 0; } .form-success.visible { display: block; } .form-success-ico { font-size: 48px; margin-bottom: var(--sp-sm); } .form-success-ttl { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 900; color: var(--dark); margin-bottom: var(--sp-xs); } .form-success-txt { font-size: var(--fz-body); color: var(--muted); line-height: 1.7; } /* ── ЧИП-ТЕГИ ── */ .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 6px 14px; font-size: var(--fz-small); font-weight: 600; color: var(--dark); white-space: nowrap; } .chip-g { color: var(--green); } .chip-warm { background: #fff8f0; border-color: #f5c6a0; } .chips-row { display: flex; gap: var(--sp-xs); flex-wrap: wrap; } /* ── TRUST BAR ── */ .tbar { background: var(--dark); padding: 18px var(--sec-pad-h); } .tbar-in { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-sm); } .ti { display: flex; align-items: center; gap: var(--sp-xs); } .tdot { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; flex-shrink: 0; } .ttxt { font-size: 13px; color: rgba(255, 255, 255, .5); font-weight: 500; } .ttxt strong { color: var(--white); } /* ── STICKY ── */ .sticky { position: fixed; bottom: var(--sp-md); right: var(--sp-md); z-index: 200; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-xs) + 2px; gap: 10px; } .sticky-ph { background: var(--dark2); color: var(--white); text-decoration: none; font-size: 13px; font-weight: 600; padding: 10px 18px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .1); display: flex; align-items: center; gap: 7px; transition: border-color .2s; } .sticky-ph:hover { border-color: var(--accent); } .sticky-cta { background: var(--accent); color: var(--white); border: none; padding: 13px 24px; border-radius: var(--r-pill); font-family: 'Manrope', sans-serif; font-size: var(--fz-body); font-weight: 800; cursor: pointer; transition: all .25s; box-shadow: 0 8px 28px rgba(200, 68, 10, .3); white-space: nowrap; } .sticky-cta:hover { background: var(--accent2); transform: translateY(-2px); } /* ── ФУТЕР ── */ .ftr { background: #0d0d0d; padding: 32px var(--sec-pad-h) 0; } .ftr-in { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 0; } .ftr-logo { display: flex; align-items: center; } .ftr-logo em { color: var(--accent); font-style: normal; } .ftr-tagline { display: none; } .ftr-col-ttl { display: none; } .ftr-links { list-style: none; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px 24px; justify-content: center; } .ftr-links a { font-size: 13px; color: rgba(255,255,255,.4); text-decoration: none; transition: color .2s; } .ftr-links a:hover { color: rgba(255,255,255,.8); } .ftr-contacts { display: flex; flex-direction: row; gap: 16px; } .ftr-contact a { font-size: 13px; color: rgba(255,255,255,.4); text-decoration: none; transition: color .2s; } .ftr-contact a:hover { color: rgba(255,255,255,.8); } .ftr-bottom { max-width: 1100px; margin: 0 auto; padding: 12px 0 24px; display: flex; align-items: center; justify-content: center; } .ftr-copy { font-size: 12px; color: rgba(255,255,255,.2); } .ftr-legal a { font-size: 12px; color: rgba(255,255,255,.2); text-decoration: none; transition: color .2s; } .ftr-legal a:hover { color: rgba(255,255,255,.5); } /* ── FAQ ── */ .faq-item { border-bottom: 1px solid var(--border); } .faq-q { width: 100%; text-align: left; background: none; border: none; padding: 20px 0; font-family: 'Manrope', sans-serif; font-size: var(--fz-mid); font-weight: 700; color: var(--dark); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-sm); transition: color .2s; } .faq-q:hover { color: var(--accent); } .faq-ico { font-size: 22px; font-weight: 300; color: var(--muted); transition: transform .25s; flex-shrink: 0; line-height: 1; } .faq-item.open .faq-ico { transform: rotate(45deg); color: var(--accent); } .faq-a { display: none; padding: 0 0 20px; font-size: var(--fz-body); color: var(--ink); line-height: 1.85; } .faq-item.open .faq-a { display: block; } /* ── АНИМАЦИИ ── */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; } .reveal.visible { opacity: 1; transform: none; } .reveal-d1 { transition-delay: .1s; } .reveal-d2 { transition-delay: .2s; } .reveal-d3 { transition-delay: .3s; } /* ── ПУЛЬС ── */ @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.4); } } .pulse-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; animation: pulse 2s infinite; flex-shrink: 0; } /* ── МОБИЛЬНАЯ ВЕРСИЯ ── */ @media (max-width: 960px) { :root { --sec-pad-v: 64px; --sec-pad-h: 20px; --hdr-h: 56px; } .hdr { padding: 0 var(--sec-pad-h); } .hnav { display: none; } .tbar { padding-left: var(--sec-pad-h); padding-right: var(--sec-pad-h); } .ftr { padding-left: var(--sec-pad-h); padding-right: var(--sec-pad-h); } .ftr-in { grid-template-columns: 1fr; gap: var(--sp-md); } .ftr-bottom { flex-direction: column; text-align: center; } .sticky { bottom: var(--sp-sm); right: var(--sp-sm); } .ss { font-size: var(--fz-mid); margin-bottom: var(--sp-md); } } @media (max-width: 480px) { :root { --sec-pad-v: 48px; } .logo { font-size: 20px; } .sticky-ph { display: none; } } /* ── ПЛАНШЕТ 768px ── */ @media (max-width: 768px) { .hphone { display: none !important; } .hph { display: none !important; } .hright { gap: 10px !important; } .team-grid { grid-template-columns: repeat(2,1fr) !important; } .roles-g { grid-template-columns: 1fr 1fr !important; } .hero-nav { grid-template-columns: 1fr 1fr !important; } .hstat { min-width: 0; } .sin { padding-left: 24px !important; padding-right: 24px !important; } } /* ── МОБИЛЬНЫЙ УСИЛЕННЫЙ 480px ── */ @media (max-width: 480px) { h1 { font-size: clamp(26px, 7.5vw, 40px) !important; line-height: 1.1 !important; } h2, .sh, .cta-h { font-size: clamp(20px, 5.5vw, 30px) !important; } .hero h1, [data-dynamic-h1] { font-size: clamp(26px, 7.5vw, 40px) !important; } [style*="font-size:80px"],[style*="font-size: 80px"],[style*="font-size:88px"],[style*="font-size: 88px"] { font-size: 32px !important; } [style*="font-size:72px"],[style*="font-size: 72px"],[style*="font-size:56px"],[style*="font-size: 56px"] { font-size: 28px !important; } [style*="font-size:52px"],[style*="font-size: 52px"],[style*="font-size:48px"],[style*="font-size: 48px"] { font-size: 24px !important; } [style*="width:1200px"],[style*="width:1100px"],[style*="width:1000px"],[style*="width:960px"],[style*="width:900px"],[style*="width:600px"],[style*="width:560px"],[style*="width:500px"] { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } [style*="grid-template-columns:400px 400px"],[style*="grid-template-columns: 400px 400px"],[style*="grid-template-columns:1fr 460px"],[style*="grid-template-columns: 1fr 460px"],[style*="grid-template-columns:380px 1fr"],[style*="grid-template-columns: 380px 1fr"],[style*="grid-template-columns:1fr 380px"],[style*="grid-template-columns: 1fr 380px"],[style*="grid-template-columns:1fr 480px"],[style*="grid-template-columns: 1fr 480px"],[style*="grid-template-columns:1fr 500px"],[style*="grid-template-columns: 1fr 500px"],[style*="grid-template-columns:400px 1fr"],[style*="grid-template-columns: 400px 1fr"],[style*="grid-template-columns:1fr 280px"],[style*="grid-template-columns: 1fr 280px"],[style*="grid-template-columns:1fr 1fr 1fr"],[style*="grid-template-columns: 1fr 1fr 1fr"],[style*="grid-template-columns:2fr 1fr"],[style*="grid-template-columns: 2fr 1fr"] { grid-template-columns: 1fr !important; } [style*="grid-template-columns:repeat(4"],[style*="grid-template-columns: repeat(4"],[style*="grid-template-columns:repeat(3"],[style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2,1fr) !important; } .team-grid { grid-template-columns: repeat(2,1fr) !important; gap: 12px !important; } .roles-g { grid-template-columns: 1fr !important; } .sin { padding-left: 16px !important; padding-right: 16px !important; } video { max-width: 100% !important; height: auto !important; } .hero-nav { grid-template-columns: 1fr !important; } .hnav-card { padding: 16px !important; } .header-phone { display: none !important; } } /* ── СКРОЛЛБАР ── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--cream2); } ::-webkit-scrollbar-thumb { background: var(--cream3); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); } /* ============================================================ GreenMP shared.css — ANIMATIONS v2.0 ============================================================ */ /* ── ПАРАЛЛАКС HERO ── */ .hero::before { transform: translateY(calc(var(--px-offset, 0px) * -0.6)); } .hero::after { transform: translateY(calc(var(--px-offset, 0px) * -0.3)); } /* ── TEXT REVEAL — строки заголовков ── */ .line-wrap { display: block; overflow: hidden; line-height: 1.12; padding-bottom: 0.06em; /* не обрезать descenders */ } .line-inner { display: block; transform: translateY(110%); opacity: 0; transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .5s ease; } .line-inner.line-visible { transform: translateY(0); opacity: 1; } /* ── HERO LOAD — появление блоков при загрузке ── */ .hero-load { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s cubic-bezier(.16,1,.3,1); } .hero-load.hero-loaded { opacity: 1; transform: none; } /* ── PILL-ВЫДЕЛЕНИЕ важных слов ── */ .pill { display: inline-block; background: var(--accent); color: #fff; border-radius: 100px; padding: .06em .36em .1em; line-height: inherit; font-style: normal; white-space: nowrap; } .pill-dark { background: var(--dark); color: #fff; } .pill-outline { background: transparent; color: var(--accent); border: 2px solid var(--accent); padding: .04em .3em .08em; } /* Подчёркивание волной */ .underline-accent { position: relative; white-space: nowrap; } .underline-accent::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.16,1,.3,1); } .underline-accent.line-visible::after, .underline-accent.visible::after { transform: scaleX(1); } /* ── HOVER КАРТОЧЕК — polished ── */ .hnav-card { transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, border-color .28s ease; } .hnav-card::before { transform-origin: left; transform: scaleX(0); transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .3s; opacity: 1 !important; } .hnav-card:hover::before { transform: scaleX(1); } .hnav-card.featured::before { transform: scaleX(1); } .svc, .case, .diff, .rev { transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, border-color .28s ease; } .svc:hover, .case:hover, .diff:hover, .rev:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(26,24,20,.12); border-color: var(--accent); } /* ── ПУЛЬС-ДОТ улучшенный ── */ @keyframes gmp-pulse { 0%, 100% { opacity:1; transform:scale(1); } 50% { opacity:.45; transform:scale(1.6); } } .pulse-dot { animation: gmp-pulse 1.8s ease-in-out infinite; } /* ── ВИДЖЕТ ОНЛАЙН-МЕНЕДЖЕРА ── */ #ow { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font-family: 'Manrope', sans-serif; } /* FAB кнопка */ .ow-fab { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(200,68,10,.4); display: flex; align-items: center; justify-content: center; position: relative; transition: transform .25s cubic-bezier(.16,1,.3,1), background .2s; flex-shrink: 0; } .ow-fab:hover { transform: scale(1.08); background: var(--accent2); } .ow-fab:active { transform: scale(.95); } .ow-ico { color: #fff; transition: opacity .2s, transform .2s; position: absolute; } .ow-ico-x { opacity: 0; transform: rotate(-90deg) scale(.7); } .ow-ico-chat { opacity: 1; transform: rotate(0) scale(1); } .ow-fab.ow-fab-open .ow-ico-chat { opacity: 0; transform: rotate(90deg) scale(.7); } .ow-fab.ow-fab-open .ow-ico-x { opacity: 1; transform: rotate(0) scale(1); } /* Бейдж */ .ow-badge { position: absolute; top: -2px; right: -2px; width: 18px; height: 18px; background: #22c55e; border-radius: 50%; border: 2px solid #fff; font-size: 10px; font-weight: 800; color: #fff; display: flex; align-items: center; justify-content: center; transition: opacity .2s, transform .2s; } .ow-fab.ow-fab-open .ow-badge { opacity: 0; transform: scale(0); } /* Панель */ .ow-panel { width: 300px; background: #fff; border-radius: 20px; box-shadow: 0 8px 40px rgba(26,24,20,.15), 0 2px 8px rgba(26,24,20,.08); overflow: hidden; opacity: 0; transform: translateY(16px) scale(.96); pointer-events: none; transition: opacity .3s ease, transform .35s cubic-bezier(.16,1,.3,1); transform-origin: bottom right; } .ow-panel.ow-panel-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } /* Шапка панели */ .ow-header { background: var(--dark); padding: 16px 18px; display: flex; align-items: center; gap: 12px; } .ow-av { width: 40px; height: 40px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; flex-shrink: 0; position: relative; } .ow-dot { position: absolute; bottom: 1px; right: 1px; width: 10px; height: 10px; background: #22c55e; border-radius: 50%; border: 2px solid var(--dark); } .ow-info { flex: 1; } .ow-name { font-size: 13px; font-weight: 700; color: #fff; } .ow-status { font-size: 11px; color: rgba(255,255,255,.45); display: flex; align-items: center; gap: 5px; margin-top: 2px; } .ow-pulse { width: 7px; height: 7px; background: #22c55e; border-radius: 50%; flex-shrink: 0; animation: gmp-pulse 1.8s ease-in-out infinite; } .ow-x { background: none; border: none; color: rgba(255,255,255,.35); cursor: pointer; padding: 4px; border-radius: 6px; transition: color .2s; display: flex; align-items: center; justify-content: center; } .ow-x:hover { color: rgba(255,255,255,.8); } /* Тело панели */ .ow-body { padding: 16px 18px; background: var(--cream); } .ow-msg-wrap { display: flex; gap: 10px; align-items: flex-start; } .ow-av-sm { width: 30px; height: 30px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; flex-shrink: 0; margin-top: 2px; } .ow-msg { background: #fff; border-radius: 0 12px 12px 12px; padding: 10px 13px; font-size: 13px; color: var(--ink); line-height: 1.55; box-shadow: 0 1px 4px rgba(0,0,0,.06); } /* Кнопки каналов */ .ow-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 18px 16px; background: #fff; border-top: 1px solid var(--border); } .ow-btn { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; text-decoration: none; transition: transform .2s, box-shadow .2s; } .ow-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.1); } .ow-wa { background: #25D366; color: #fff; } .ow-tg { background: #229ED9; color: #fff; } /* Мобилка */ @media (max-width: 480px) { #ow { bottom: 16px; right: 16px; } .ow-panel { width: 280px; } } /* PRODVIZHENIE DARK SECTIONS */ .cta-section,.sec-d,[style*="background:var(--dark)"],[style*="background: var(--dark)"]{background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px} /* ── PULSE CTA ── */ @keyframes ctaPulse { 0% { box-shadow: 0 0 0 0 rgba(200,68,10,.45); } 70% { box-shadow: 0 0 0 10px rgba(200,68,10,0); } 100% { box-shadow: 0 0 0 0 rgba(200,68,10,0); } } #header-cta-btn { animation: ctaPulse 2.4s ease-out infinite; transition: opacity .18s ease, transform .18s ease; } @keyframes ctaPulse { 0% { box-shadow: 0 0 0 0 rgba(200,68,10,.45); } 70% { box-shadow: 0 0 0 10px rgba(200,68,10,0); } 100% { box-shadow: 0 0 0 0 rgba(200,68,10,0); } } #header-cta-btn { animation: ctaPulse 2.4s ease-out infinite; transition: opacity .18s ease, transform .18s ease; } .pain-section,.solution-section,.cases-section,.compare-section,.founder-section,.reviews-section,.pricing-section,.faq-section,.cta-section,.sec-d,.trust-bar,.tbar{background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px} footer{background:#1a1814;padding:0 40px} .fin{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px} .flogo{font-family:"Playfair Display",serif;font-size:18px;font-weight:900;color:white} .flogo em{color:var(--accent);font-style:normal} .flinks{display:flex;gap:24px;flex-wrap:wrap} .flinks a{font-size:13px;color:rgba(255,255,255,.35);text-decoration:none;transition:color .2s} .flinks a:hover{color:rgba(255,255,255,.7)} .fcopy{font-size:12px;color:rgba(255,255,255,.2)} @media(max-width:768px){.fin{flex-direction:column;text-align:center}.flinks{justify-content:center}} .pain-section,.solution-section,.cases-section,.compare-section,.founder-section,.reviews-section,.pricing-section,.faq-section,.cta-section{background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:48px 48px} /* FAQ анимация и отступы */ .faq-a { display: block; max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; padding: 0; } .faq-item.open .faq-a { max-height: 400px; padding: 0 0 20px; } .faq-list { margin-top: 24px; } .cta-section { background-color: #1a1814; background-image: linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size: 72px 72px; } /* Галочки согласия в формах */ .form-consents{margin:12px 0 8px;display:flex;flex-direction:column;gap:10px} .form-consent{display:flex;align-items:flex-start;gap:10px;cursor:pointer;line-height:1} .form-consent input[type=checkbox]{width:15px;height:15px;min-width:15px;margin-top:1px;accent-color:var(--accent);cursor:pointer;flex-shrink:0} .form-consent-text{font-family:'Manrope',sans-serif;font-size:12px;color:var(--muted);line-height:1.5} .form-consent-text a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--border)} .form-consent-text a:hover{color:var(--ink);border-color:var(--ink)} .form-consent.required .form-consent-text{color:var(--ink)}