/* ========================================================= VOLT AI — Design System Тёмная неоновая AI-SaaS эстетика. Иконки: Lucide (self-hosted). Логотипы: Simple Icons + брендовые знаки (inline SVG-спрайт). Оглавление: 1. Токены (:root, светлая тема) 6. Компоненты (карточки, чек-лист…) 2. База / reset 7. Секции-блоки (hero, чат, плитки…) 3. Фон (сетка, glow) 8. Премиум-слой (поверхности, hover) 4. Layout (контейнер, секции) 9. Тёмная «сцена» — оверрайды 5. Типографика, кнопки 10. Адаптив ========================================================= */ :root { /* Поверхности */ --bg: #09090b; --bg-2: #0c0c0f; --surface: #18181b; --surface-2: #1c1c20; --border: #27272a; --border-soft: #ffffff14; /* Текст */ --text: #fafafa; --text-soft: #e4e4e7; --muted: #a1a1aa; --muted-2: #71717a; color-scheme: dark; /* Неоновые акценты — фирменная палитра VOLT (электрик-бирюза #02feed) */ --brand: #02feed; /* основной бренд-цвет */ --brand-2: #19d8e6; /* мягче, для градиентов */ --brand-deep: #00b8cf; /* глубже, для текста на светлом */ --blue: #2b9ef0; /* вторичный синий акцент */ --teal: #14b8a6; --green: #00c758; --red: #ef4444; --amber: #f5b700; /* акцентные алиасы → «чернила» (авто-тема: ярко на тёмной, глубоко на светлой) */ --accent: var(--ink); --cyan: var(--ink); --violet: var(--ink); --magenta: var(--ink); --indigo: var(--blue); --grad-brand: linear-gradient(135deg, #02feed 0%, #1cd3e6 45%, #2b9ef0 100%); --grad-cool: linear-gradient(135deg, #02feed 0%, #2b9ef0 100%); --grad-warm: linear-gradient(135deg, #00e6d8 0%, #2b9ef0 100%); /* «Чернила» акцента — для иконок, тонких штрихов и градиентного текста. Светлые/яркие на тёмной теме, глубокие на светлой (не режут глаз). */ --ink: #02feed; --grad-ink: linear-gradient(135deg, #02feed 0%, #2b9ef0 100%); /* Кнопки — глубокий градиент, чтобы белый текст был читаем во всех темах */ --grad-btn: linear-gradient(135deg, #0b8fa8 0%, #1f6fe0 100%); --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 32px; --shadow: 0 20px 60px -20px #000000cc; --container: 1200px; --font: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } /* ---------- Светлая тема ---------- */ html[data-theme="light"] { color-scheme: light; --bg: #f7f7f8; --bg-2: #f1f1f3; --surface: #ffffff; --surface-2: #fafafa; --border: #e4e4e7; --border-soft: #00000012; --text: #18181b; --text-soft: #3f3f46; --muted: #52525b; --muted-2: #71717a; --shadow: 0 20px 60px -28px #00000026; /* Глубокий teal вместо ярко-бирюзового — комфортно на белом */ --ink: #0a8194; --grad-ink: linear-gradient(135deg, #0a8194 0%, #1f5fd0 100%); --amber: #b07d00; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); } body { margin: 0; font-family: var(--font); background: transparent; /* базовый цвет ушёл на , чтобы под контентом жил единый аврора-слой */ color: var(--text); line-height: 1.55; font-size: 17px; -webkit-font-smoothing: antialiased; position: relative; padding-top: 68px; /* высота фиксированного хедера */ } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4 { line-height: 1.12; margin: 0; letter-spacing: -0.02em; font-weight: 800; } p { margin: 0; } /* Lucide-иконки */ svg.lucide { width: 1em; height: 1em; stroke-width: 2; flex: 0 0 auto; } /* Тонкая сетка-подложка как у референса */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(#ffffff05 1px, transparent 1px), linear-gradient(90deg, #ffffff05 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 75%); } html[data-theme="light"] body::before { background-image: linear-gradient(#00000007 1px, transparent 1px), linear-gradient(90deg, #00000007 1px, transparent 1px); } /* ---------- Единый «воздух»: органическое свечение на весь экран ---------- Заякорено к вьюпорту и со всех сторон растворяется в прозрачность. Это ЕДИНСТВЕННЫЙ источник цветного фона — у секций больше нет своих панелей, поэтому между блоками нет ни жёстких, ни размытых горизонтальных граней. */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 40% at 12% 4%, #02feed14, transparent 62%), radial-gradient(48% 42% at 88% 26%, #2b9ef012, transparent 62%), radial-gradient(54% 46% at 16% 64%, #02feed10, transparent 62%), radial-gradient(50% 44% at 86% 92%, #2b9ef012, transparent 62%); } html[data-theme="light"] body::after { opacity: .5; } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; } /* overflow-x: clip убирает горизонтальный скролл от свечений, но НЕ режет их по вертикали — поэтому градиент-свечения перетекают между секциями без линии. */ .section { position: relative; padding: 56px 0; overflow-x: clip; } .section--tight { padding: 40px 0; } .section-head { max-width: 760px; margin: 0 auto 34px; text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: #ffffff08; margin-bottom: 20px; } .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); animation: dot-pulse 2s ease-in-out infinite; } @keyframes dot-pulse { 0%,100% { box-shadow: 0 0 6px var(--green); } 50% { box-shadow: 0 0 16px var(--green), 0 0 30px #00c75866; } } h1.title { font-size: clamp(34px, 5.4vw, 62px); } h2.title { font-size: clamp(28px, 4vw, 46px); } .title { text-wrap: balance; } /* ровные строки заголовка, без «битых» переносов */ h1.title .grad { white-space: nowrap; } /* «5 секунд» не разрывается между строками */ .title .grad, .grad { background: var(--grad-ink); -webkit-background-clip: text; background-clip: text; color: transparent; } .lead { color: var(--muted); font-size: clamp(16px, 2vw, 20px); margin-top: 18px; } .muted { color: var(--muted); } /* ---------- Glow blobs: радиальные градиенты, растворяются в прозрачность ---------- */ .glow { position: absolute; pointer-events: none; z-index: 0; width: 760px; height: 760px; border-radius: 50%; animation: glow-drift 16s ease-in-out infinite alternate; } .glow--blue { background: radial-gradient(circle, #2b9ef040 0%, #2b9ef01c 32%, transparent 68%); } .glow--violet { background: radial-gradient(circle, #02feed33 0%, #02feed14 32%, transparent 68%); animation-delay: -4s; } .glow--magenta { background: radial-gradient(circle, #12c7e030 0%, #12c7e012 32%, transparent 68%); animation-delay: -8s; } .glow--cyan { background: radial-gradient(circle, #02feed38 0%, #02feed16 32%, transparent 68%); animation-delay: -12s; } html[data-theme="light"] .glow { opacity: .5; } @keyframes glow-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, -30px) scale(1.08); } 100% { transform: translate(-30px, 30px) scale(.95); } } .section > .container { position: relative; z-index: 1; } /* ---------- Buttons ---------- */ .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; font-size: 16px; padding: 14px 24px; border-radius: 999px; border: 1px solid transparent; transition: transform .15s ease, box-shadow .25s ease, background .2s ease, border-color .2s; white-space: nowrap; } .btn .lucide, .btn .brand-ico { font-size: 18px; } .btn:active { transform: translateY(1px); } /* блик, пробегающий по кнопке */ .btn--primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%; background: linear-gradient(105deg, transparent, #ffffff4d, transparent); transform: skewX(-20deg); animation: btn-shine 3.4s ease-in-out infinite; } @keyframes btn-shine { 0%, 60% { left: -80%; } 100% { left: 130%; } } .btn--primary { background: var(--grad-btn); color: #fff; font-weight: 700; box-shadow: 0 10px 30px -8px #1f6fe088; animation: btn-glow 2.8s ease-in-out infinite; } .btn--primary:hover { box-shadow: 0 14px 44px -8px #1f6fe0cc; transform: translateY(-2px); } @keyframes btn-glow { 0%,100% { box-shadow: 0 10px 30px -8px #0b8fa877; } 50% { box-shadow: 0 10px 38px -6px #1f6fe099; } } .btn--ghost { background: #ffffff0a; color: var(--text); border-color: var(--border); } .btn--ghost:hover { background: #ffffff14; border-color: #ffffff33; } html[data-theme="light"] .btn--ghost { background: #00000006; } html[data-theme="light"] .btn--ghost:hover { background: #0000000d; border-color: #00000033; } .btn--tg { background: #229ed9; color: #fff; } .btn--tg:hover { background: #1f93cc; transform: translateY(-2px); box-shadow: 0 10px 28px -10px #229ed9; } .btn--wa { background: #25d366; color: #fff; } .btn--wa:hover { background: #1fc15c; transform: translateY(-2px); box-shadow: 0 10px 28px -10px #25d366; } .btn--tg .brand-ico, .btn--wa .brand-ico { fill: currentColor; } .btn--lg { padding: 17px 30px; font-size: 17px; } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; } .btn-row--center { justify-content: center; } /* Бренд-иконки (Simple Icons, inline) */ .brand-ico { width: 1em; height: 1em; flex: 0 0 auto; } /* ---------- Cards ---------- */ .card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; transition: border-color .3s, transform .3s, box-shadow .3s; } .card:hover { border-color: #ffffff2e; transform: translateY(-4px); box-shadow: 0 18px 44px -22px #000; } .card__ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; margin-bottom: 18px; background: #ffffff0d; border: 1px solid var(--border); color: var(--violet); transition: transform .3s, color .3s, border-color .3s; } html[data-theme="light"] .card__ico { background: #00000005; } .card:hover .card__ico { transform: scale(1.08) rotate(-4deg); border-color: currentColor; } .card__ico.c-cyan { color: var(--cyan); } .card__ico.c-magenta { color: var(--magenta); } .card h3 { font-size: 19px; margin-bottom: 8px; } .card p { color: var(--muted); font-size: 15.5px; } .grid { display: grid; gap: 20px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } /* ---------- Checklist (лаконичный маркер, без «моря» зелёных бейджей) ---------- */ .checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .checklist li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-soft); font-size: 15.5px; } .checklist .ck { flex: 0 0 auto; width: 18px; height: 18px; display: grid; place-items: center; background: none; color: var(--ink); margin-top: 3px; } .checklist .ck .lucide { stroke-width: 2.75; } /* Сильный смысловой контраст оставляем только в блоке сравнения */ .cmp-good .checklist .ck { width: 22px; height: 22px; border-radius: 50%; background: #00c75822; color: var(--green); margin-top: 2px; } .cmp-good .checklist .ck .lucide { stroke-width: 3; } .crosslist .ck { width: 22px; height: 22px; border-radius: 50%; background: #ef444422; color: var(--red); margin-top: 2px; } .crosslist .ck .lucide { stroke-width: 3; } /* Роли (блок 8): маркер-точка вместо галочки — другая визуальная подача */ .role .checklist .ck { color: var(--muted); } .role .checklist .ck .lucide { display: none; } .role .checklist .ck::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); display: block; } /* ---------- Header ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 100; backdrop-filter: blur(14px); background: #09090bcc; border-bottom: 1px solid var(--border); } html[data-theme="light"] .site-header { background: #f7f7f8cc; } /* Переключатель темы */ .theme-btn { /* Переключатель темы скрыт — тема зафиксирована на тёмной. Чтобы вернуть: display: grid; */ width: 40px; height: 40px; border-radius: 50%; display: none; place-items: center; background: #ffffff0a; border: 1px solid var(--border); color: var(--text); font-size: 18px; transition: border-color .2s, transform .2s; } .theme-btn:hover { border-color: var(--violet); transform: rotate(15deg); } html[data-theme="light"] .theme-btn { background: #00000006; } .theme-btn .t-sun { display: grid; place-items: center; } .theme-btn .t-moon { display: none; place-items: center; } html[data-theme="light"] .theme-btn .t-sun { display: none; } html[data-theme="light"] .theme-btn .t-moon { display: grid; } .nav { display: flex; align-items: center; justify-content: space-between; height: 68px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -.02em; } /* Логотип-картинка (две версии под тему) */ .brand { line-height: 0; } .brand-logo { height: 44px !important; width: auto !important; max-width: 160px; display: block; } .brand-logo--dark { display: none; } html[data-theme="light"] .brand-logo--light { display: none; } html[data-theme="light"] .brand-logo--dark { display: block; } .site-footer .brand-logo { height: 42px; } .nav__links { display: flex; gap: 26px; } .nav__links a { color: var(--muted); font-size: 15px; font-weight: 500; transition: color .2s; } .nav__links a:hover { color: #fff; } .nav__cta { display: flex; gap: 10px; align-items: center; } /* ---------- Hero ---------- */ .hero { padding: 44px 0 52px; position: relative; overflow-x: clip; } .hero .glow--blue { top: -260px; left: -200px; } .hero .glow--violet { top: -60px; right: -260px; } .hero .glow--magenta{ bottom: -300px; left: 24%; } .hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } .hero__sub { margin-top: 22px; text-wrap: balance; } .hero__cta { margin-top: 34px; } /* 4 метрики — компактная сетка (адаптив в блоке media) */ .hero__stats { margin-top: 40px; display: grid; grid-template-columns: repeat(4, auto); gap: 22px 34px; } .stat .n { font-size: 30px; font-weight: 800; background: var(--grad-ink); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat .l { color: var(--muted); font-size: 14px; } /* Chat mockup — живой цикл диалога */ .chat { background: linear-gradient(180deg, #141417, #0e0e11); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 20px; box-shadow: var(--shadow); position: relative; } html[data-theme="light"] .chat { background: linear-gradient(180deg, #ffffff, #f7f7f8); } .chat::before { content: ""; position: absolute; inset: -40px; border-radius: 50%; z-index: -1; background: radial-gradient(circle, #02feed30 0%, transparent 65%); } .chat__top { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 16px; } .chat__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--grad-brand); display: grid; place-items: center; font-size: 18px; color: #04211f; } .chat__name { font-weight: 700; font-size: 15px; } .chat__status { font-size: 12.5px; color: var(--green); display: flex; align-items: center; gap: 6px; } .chat__status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: dot-pulse 2s infinite; } .msgs { display: flex; flex-direction: column; gap: 12px; height: 300px; overflow: hidden; justify-content: flex-end; } .msg { max-width: 84%; padding: 11px 15px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; opacity: 0; transform: translateY(10px) scale(.97); animation: pop .45s cubic-bezier(.2,.9,.3,1.2) forwards; } .msg--in { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 5px; } .msg--out { align-self: flex-end; background: var(--grad-cool); color: #04212b; border-bottom-right-radius: 5px; font-weight: 500; } .msg .meta { display: block; font-size: 11px; opacity: .6; margin-top: 4px; } .typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; border-bottom-left-radius: 5px; opacity: 0; animation: pop .3s forwards; } .typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; } .typing span:nth-child(2){ animation-delay: .2s; } .typing span:nth-child(3){ animation-delay: .4s; } @keyframes pop { to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes blink { 0%,100%{ opacity:.3 } 50%{ opacity:1 } } /* ---------- Steps / flow ---------- */ .flow { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .flow__step { flex: 1 1 150px; min-width: 150px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 20px 16px; text-align: center; position: relative; transition: border-color .3s, transform .3s; } .flow__step:hover { border-color: var(--violet); transform: translateY(-3px); } .flow__step .ic { font-size: 26px; color: var(--cyan); display: flex; justify-content: center; } .flow__step .t { font-weight: 600; font-size: 14.5px; margin-top: 10px; } .flow__step:not(:last-child)::after { content: "→"; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); color: var(--violet); font-size: 20px; z-index: 2; animation: arrow-nudge 1.6s ease-in-out infinite; } @keyframes arrow-nudge { 0%,100% { transform: translate(0,-50%); opacity: .6; } 50% { transform: translate(4px,-50%); opacity: 1; } } /* ---------- Voice / голосовые ---------- */ .wave { display: inline-flex; align-items: center; gap: 3px; height: 26px; margin-top: 14px; } .wave span { width: 4px; border-radius: 2px; background: var(--grad-cool); background: var(--cyan); animation: wave-bar 1.1s ease-in-out infinite; } .wave span:nth-child(1){ height: 8px; } .wave span:nth-child(2){ height: 18px; animation-delay: .1s; } .wave span:nth-child(3){ height: 26px; animation-delay: .2s; } .wave span:nth-child(4){ height: 14px; animation-delay: .3s; } .wave span:nth-child(5){ height: 22px; animation-delay: .4s; } .wave span:nth-child(6){ height: 10px; animation-delay: .5s; } .wave span:nth-child(7){ height: 19px; animation-delay: .6s; } .wave span:nth-child(8){ height: 7px; animation-delay: .7s; } @keyframes wave-bar { 0%,100% { transform: scaleY(.55); } 50% { transform: scaleY(1.15); } } /* ---------- Qualifier funnel — анимированная воронка ---------- */ .funnel { display: grid; gap: 12px; max-width: 420px; margin: 0 auto; } .funnel__row { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); font-weight: 500; transition: border-color .4s, box-shadow .4s, transform .4s; opacity: .55; } .funnel__row .b { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; } .funnel__row.cold .b { background: var(--blue); } .funnel__row.warm .b { background: var(--amber); } .funnel__row.hot .b { background: var(--red); } .funnel__row.done { background: var(--grad-brand); border: 0; font-weight: 700; color: #04211f; opacity: .55; } .funnel__row.active { opacity: 1; transform: scale(1.03); } .funnel__row.cold.active { border-color: var(--blue); box-shadow: 0 0 30px -8px var(--blue); } .funnel__row.cold.active .b { box-shadow: 0 0 14px var(--blue); } .funnel__row.warm.active { border-color: var(--amber); box-shadow: 0 0 30px -8px var(--amber); } .funnel__row.warm.active .b { box-shadow: 0 0 14px var(--amber); } .funnel__row.hot.active { border-color: var(--red); box-shadow: 0 0 30px -8px var(--red); } .funnel__row.hot.active .b { box-shadow: 0 0 14px var(--red); } .funnel__row.done.active { box-shadow: 0 0 44px -8px var(--violet); } /* ---------- Niches ---------- */ .niche { display: flex; align-items: center; gap: 12px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); transition: .25s; } .niche:hover { border-color: var(--violet); transform: translateY(-3px); box-shadow: 0 12px 30px -16px var(--violet); } .niche .e { font-size: 22px; color: var(--cyan); display: flex; } .niche .n { font-weight: 600; font-size: 15.5px; } /* ---------- Roles ---------- */ .role { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px; transition: border-color .3s, transform .3s; } .role:hover { border-color: #ffffff2e; transform: translateY(-4px); } .role h3 { font-size: 18px; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .role h3 .e { font-size: 21px; color: var(--violet); display: flex; } /* ---------- Metrics ---------- */ .metric { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px; text-align: left; transition: border-color .3s, transform .3s; } .metric:hover { border-color: #ffffff2e; transform: translateY(-4px); } .metric .e { font-size: 24px; color: var(--cyan); display: flex; } .metric .v { font-size: 28px; font-weight: 800; margin-top: 10px; background: var(--grad-ink); -webkit-background-clip: text; background-clip: text; color: transparent; } .metric .l { color: var(--muted); font-size: 14.5px; margin-top: 4px; } /* ---------- Cases ---------- */ .case { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: border-color .3s, transform .3s; } .case:hover { border-color: #ffffff2e; transform: translateY(-4px); } .case__head { padding: 22px 24px; border-bottom: 1px solid var(--border); font-weight: 700; display: flex; align-items: center; gap: 10px; } .case__head .lucide { color: var(--violet); font-size: 20px; } .case__body { padding: 22px 24px; display: grid; gap: 16px; } .case__row .k { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); margin-bottom: 4px; } .case__row .vv { color: var(--text-soft); font-size: 15px; } /* ---------- Testimonials ---------- */ .testi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px; transition: border-color .3s, transform .3s; } .testi:hover { border-color: #ffffff2e; transform: translateY(-4px); } .testi .stars { color: var(--amber); margin-bottom: 12px; letter-spacing: 2px; } .testi p { color: var(--text-soft); font-size: 16px; } .testi .who { margin-top: 16px; display: flex; align-items: center; gap: 12px; } .testi .who .av { width: 42px; height: 42px; border-radius: 50%; background: var(--grad-warm); display: grid; place-items: center; font-weight: 700; color: #04211f; } .testi .who .nm { font-weight: 700; font-size: 15px; } .testi .who .rl { color: var(--muted); font-size: 13px; } /* ---------- FAQ ---------- */ .faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; } .faq__item { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); overflow: hidden; transition: border-color .3s; } .faq__item.open { border-color: #02feed66; } .faq__q { width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 20px 22px; font-size: 16.5px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .faq__q .pm { font-size: 20px; color: var(--violet); transition: transform .3s; flex: 0 0 auto; display: flex; } .faq__item.open .faq__q .pm { transform: rotate(45deg); } .faq__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .faq__a p { padding: 0 22px 20px; color: var(--muted); font-size: 15.5px; } /* ---------- Final CTA / form ---------- */ .cta-wrap { background: linear-gradient(135deg, #14101f, #0c0c11); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 48px; position: relative; overflow: hidden; } html[data-theme="light"] .cta-wrap { background: linear-gradient(135deg, #f3f0ff, #ffffff) !important; } .cta-wrap .glow { width: 560px; height: 560px; } .cta-wrap .glow--violet { top: -240px; right: -180px; } .cta-wrap .glow--cyan { bottom: -260px; left: -180px; } .cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; position: relative; z-index: 1; } .form { display: grid; gap: 14px; } .field label { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 6px; } .field input, .field select { width: 100%; background: #0a0a0d; border: 1px solid var(--border); border-radius: 12px; padding: 13px 16px; color: var(--text); font-size: 15.5px; font-family: inherit; transition: border-color .2s, box-shadow .2s; } .field select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } html[data-theme="light"] .field input, html[data-theme="light"] .field select { background-color: #ffffff; } .field input::placeholder { color: var(--muted-2); } .field input:focus, .field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px #02feed33; } .form .btn { width: 100%; margin-top: 6px; } .form__note { font-size: 12.5px; color: var(--muted-2); text-align: center; } .form__ok { display: none; text-align: center; padding: 24px; border: 1px solid #00c75844; background: #00c7581a; border-radius: var(--r); color: #b9f6cf; } html[data-theme="light"] .form__ok { background: #ecfdf5; border-color: #a7f3d0; color: #047857; } /* Раньше эти стили стояли инлайном в HTML. Инлайн сильнее любого правила, поэтому .form.sent .form__inner { display:none } не срабатывало и форма не пряталась после отправки. Держим их здесь — иначе баг вернётся. */ .form__inner { display: grid; gap: 14px; } .form.sent .form__inner { display: none; } /* Появление через animation, но БЕЗ статического opacity:0. Иначе при `prefers-reduced-motion` (см. ниже: animation: none !important) блок остался бы прозрачным навсегда — человек отправил заявку и не увидел подтверждения. */ .form.sent .form__ok { display: block; animation: form-ok-in .35s ease-out both; } @keyframes form-ok-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } } /* Ошибка отправки — парный блок к .form__ok */ .form__err { display: none; text-align: center; padding: 14px 16px; font-size: 14px; line-height: 1.5; border: 1px solid #ef444455; background: #ef44441a; border-radius: var(--r); color: #fca5a5; } html[data-theme="light"] .form__err { background: #fef2f2; border-color: #fecaca; color: #b91c1c; } /* Пока заявка уходит на сервер */ .form.sending .btn { opacity: .65; cursor: wait; } /* Honeypot: поле-ловушка для ботов. Скрыто от людей, но НЕ display:none — часть ботов игнорирует такие поля, а так они его видят и заполняют. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border); padding: 56px 0 40px; background: var(--bg-2); position: relative; z-index: 1; } .footer__grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; } .footer__links { display: flex; gap: 24px; flex-wrap: wrap; } .footer__links a { color: var(--muted); font-size: 14.5px; display: inline-flex; align-items: center; gap: 7px; } .footer__links a:hover { color: #fff; } .footer__bottom { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--muted-2); font-size: 13.5px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; } /* Усиленный текст, корректный в обеих темах (вместо inline color:#fff) */ .lead--strong { color: var(--text) !important; font-weight: 700; } /* ---------- Reveal on scroll (со stagger через JS) ---------- Скрытие активно только при html.js — без JS контент виден всегда. */ .reveal { transition: opacity .6s ease, transform .6s ease; transition-delay: var(--d, 0s); } html.js .reveal { opacity: 0; transform: translateY(26px); } .reveal.in { opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } } /* ---------- Responsive ---------- */ @media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; gap: 40px; } .grid-4 { grid-template-columns: repeat(2,1fr); } .grid-3 { grid-template-columns: repeat(2,1fr); } .cta-grid { grid-template-columns: 1fr; gap: 28px; } .nav__links { display: none; } .cta-wrap { padding: 32px 22px; } .glow { width: 520px; height: 520px; } } @media (max-width: 600px) { body { font-size: 16px; } .section { padding: 40px 0; } .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } .flow__step:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: -17px; transform: translateX(50%); animation: none; } .hero__stats { grid-template-columns: 1fr 1fr; gap: 18px; } .nav__cta .btn--ghost { display: none; } .footer__bottom { flex-direction: column; } .glow { width: 380px; height: 380px; } } /* ========================================================= 6–7. Компоненты и блоки: формы, поп-ап, плитки, свайпер, мокап чата, сравнение, CRM, кейсы, шаги, результаты ========================================================= */ /* Более заметные бейджи и акценты в подзаголовках */ .eyebrow--accent { color: var(--brand-deep); border-color: #02feed55; background: #02feed14; } html[data-theme="light"] .eyebrow--accent { color: var(--ink); background: #02feed12; } .hl { color: var(--ink); font-weight: 700; } /* ---------- Pop-up форма ---------- */ .modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: flex-start; justify-content: center; padding: 24px; overflow-y: auto; } .modal.open { display: flex; } .modal__overlay { position: fixed; inset: 0; background: #000000ad; backdrop-filter: blur(6px); animation: fade .25s ease; } .modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 480px; margin: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 34px 32px; box-shadow: var(--shadow); animation: pop-modal .3s cubic-bezier(.2,.9,.3,1.2); } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes pop-modal { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } } .modal__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: #ffffff0d; border: 1px solid var(--border); color: var(--text); display: grid; place-items: center; transition: border-color .2s, transform .2s; } .modal__close:hover { border-color: var(--brand); transform: rotate(90deg); } html[data-theme="light"] .modal__close { background: #00000006; } body.modal-open { overflow: hidden; } /* Чипы выбора канала связи в форме */ .field--methods .opts { display: flex; flex-wrap: wrap; gap: 8px; } .chip { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 999px; background: #ffffff06; font-size: 14px; font-weight: 600; color: var(--text-soft); cursor: pointer; transition: .2s; user-select: none; } html[data-theme="light"] .chip { background: #00000005; } .chip input { position: absolute; opacity: 0; pointer-events: none; } .chip:hover { border-color: #ffffff33; } .chip.sel { border-color: var(--brand); background: #02feed16; color: var(--ink); } /* ---------- Слайдеры (Swiper.js) ---------- */ .vswiper { position: relative; } /* ширину слайда задаём в CSS — Swiper в режиме slidesPerView:'auto' её уважает; половинка следующей карточки «подглядывает» одинаково в начале и в конце. */ .proc-swiper .swiper-slide { width: 320px; height: auto; } .dlg-swiper .swiper-slide { width: 320px; height: auto; } .proc-swiper, .dlg-swiper { padding: 6px 2px 8px; } /* чуть воздуха под тень/обводку */ .swipe-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; transition: border-color .3s, transform .3s; } .swipe-card:hover { border-color: #ffffff2e; transform: translateY(-4px); } .swipe-card .num { width: 42px; height: 42px; border-radius: 13px; background: var(--grad-brand); color: #04211f; font-weight: 800; display: grid; place-items: center; font-size: 18px; } .swipe-card .e { font-size: 28px; margin-top: 14px; color: var(--ink); display: flex; } .swipe-card h3 { font-size: 19px; margin: 10px 0 8px; } .swipe-card p { color: var(--muted); font-size: 15px; } .swipe-nav { display: flex; gap: 10px; justify-content: center; margin-top: 14px; } .swipe-nav button { width: 44px; height: 44px; border-radius: 50%; background: #ffffff0a; border: 1px solid var(--border); color: var(--text); display: grid; place-items: center; transition: border-color .2s, transform .2s, opacity .2s; } .swipe-nav button:hover { border-color: var(--brand); transform: translateY(-2px); } .swipe-nav button.is-disabled { opacity: .35; cursor: default; pointer-events: none; } html[data-theme="light"] .swipe-nav button { background: #00000006; } .swipe-hint { text-align: center; color: var(--muted-2); font-size: 13px; margin-top: 6px; } /* ---------- Реалистичный мокап чата (Telegram / Instagram) ---------- */ .phone { width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: 26px; overflow: hidden; box-shadow: var(--shadow); } .phone__bar { display: flex; align-items: center; justify-content: space-between; padding: 9px 16px 6px; font-size: 11.5px; color: var(--muted); } .phone__hd { display: flex; align-items: center; gap: 11px; padding: 11px 15px; border-bottom: 1px solid var(--border); } .phone__hd .av { width: 38px; height: 38px; border-radius: 50%; background: var(--grad-warm); display: grid; place-items: center; font-weight: 700; color: #04211f; font-size: 13px; flex: 0 0 auto; } .phone__hd .nm { font-weight: 700; font-size: 14.5px; } .phone__hd .sub { font-size: 11.5px; color: var(--muted); } .phone__body { padding: 16px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--bg-2); min-height: 320px; } .cb { max-width: 82%; padding: 9px 13px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; } .cb--in { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 5px; } .cb--out { align-self: flex-end; background: var(--grad-cool); color: #04212b; border-bottom-right-radius: 5px; font-weight: 500; } .cb .t { display: block; font-size: 10px; opacity: .55; margin-top: 3px; text-align: right; } .daysep { align-self: center; font-size: 11px; color: var(--muted-2); background: #ffffff0d; padding: 3px 12px; border-radius: 999px; } html[data-theme="light"] .daysep { background: #00000008; } .voicebubble { align-self: flex-end; display: flex; align-items: center; gap: 10px; background: var(--grad-cool); color: #04212b; padding: 10px 14px; border-radius: 16px; border-bottom-right-radius: 5px; } .voicebubble .lucide { font-size: 16px; } .wave--sm { height: 18px; margin: 0; } .wave--sm span { background: #04212b; opacity: .65; } .phone--ig .phone__hd .av { background: linear-gradient(45deg, #feda75, #d62976, #962fbf); color: #fff; } /* ---------- Плитки интеграций (вместо бегущей строки) ---------- */ .tiles-group + .tiles-group { margin-top: 40px; } .tiles-group__t { text-align: center; font-size: 15px; color: var(--muted); margin-bottom: 22px; font-weight: 600; } .tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } .tile { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); transition: .25s; text-align: center; } .tile:hover { border-color: #ffffff2e; transform: translateY(-4px); box-shadow: 0 14px 34px -20px #000; } .tile .ico { height: 46px; display: grid; place-items: center; } .tile .ico .brand-ico { width: 42px; height: 42px; } /* Обобщённые понятия (сайт/приложение) — нейтральная линейная иконка в рамке */ .tile .ico--generic { width: 46px; border-radius: 13px; background: #ffffff0a; border: 1px solid var(--border); font-size: 24px; color: var(--ink); } html[data-theme="light"] .tile .ico--generic { background: #00000005; } .tile .nm { font-weight: 600; font-size: 14px; } /* ---------- Вертикальное сравнение (блок 5) ---------- */ .compare-v { max-width: 640px; margin: 0 auto; display: grid; gap: 10px; } .cmp-card { border-radius: var(--r-lg); padding: 28px; border: 1px solid var(--border); } .cmp-card h3 { font-size: 20px; display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .cmp-bad { background: linear-gradient(180deg, #2a1416, #170d0e); border-color: #ef444433; } .cmp-good { background: linear-gradient(180deg, #0e2419, #0b1a13); border-color: #00c75844; box-shadow: 0 0 60px -24px #00c75866; } html[data-theme="light"] .cmp-bad { background: linear-gradient(180deg, #fef2f2, #fff5f5); border-color: #fecaca; } html[data-theme="light"] .cmp-good { background: linear-gradient(180deg, #f0fdf4, #f6fef9); border-color: #bbf7d0; box-shadow: 0 0 60px -24px #00c75833; } .cmp-bad h3 .lucide { color: var(--red); } .cmp-good h3 .lucide { color: var(--green); } .cmp-arrow { justify-self: center; color: var(--muted); font-size: 26px; display: flex; } /* ---------- CRM-карточки (блок 6) ---------- */ .crm-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .crm-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: border-color .3s, transform .3s; } .crm-card:hover { border-color: #ffffff2e; transform: translateY(-4px); } .crm-card__hd { padding: 15px 18px; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .crm-card__hd .lucide { color: var(--ink); font-size: 17px; } .crm-card__hd .badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; } .badge--hot { background: #ef44441f; color: #ff6b6b; } html[data-theme="light"] .badge--hot { color: #dc2626; } .crm-card__bd { padding: 16px 18px; display: grid; gap: 11px; } .crm-msg { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 13px; color: var(--text-soft); font-size: 13.5px; line-height: 1.45; } .crm-field { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 13.5px; } .crm-field b { color: var(--text); font-weight: 600; } .crm-ok { color: var(--green); display: inline-flex; gap: 5px; align-items: center; } .crm-ok .lucide { font-size: 14px; stroke-width: 3; } /* ---------- Сетка внедрения 2×2 + широкая (блок 16) ---------- */ .steps2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 840px; margin: 0 auto; } .steps2 .step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px; transition: border-color .3s, transform .3s; } .steps2 .step:hover { border-color: var(--brand); transform: translateY(-3px); } .steps2 .step--wide { grid-column: 1 / -1; } .steps2 .step .no { width: 36px; height: 36px; border-radius: 50%; background: var(--grad-brand); color: #04211f; font-weight: 800; display: grid; place-items: center; margin-bottom: 14px; } .steps2 .step h3 { font-size: 18px; margin-bottom: 6px; } .steps2 .step .dur { color: var(--ink); font-weight: 700; font-size: 14px; } .steps2 .step p { color: var(--muted); font-size: 14.5px; margin-top: 10px; } .steps-note { text-align: center; margin-top: 28px; font-weight: 700; font-size: 18px; } /* ---------- Компактные карточки результата (блок 11) ---------- */ .results { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .res { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 22px 16px; text-align: center; transition: border-color .3s, transform .3s; } .res:hover { border-color: var(--brand); transform: translateY(-3px); } .res .e { font-size: 28px; color: var(--ink); display: flex; justify-content: center; } .res .v { font-weight: 800; font-size: 17px; margin: 8px 0 5px; line-height: 1.25; } .res .l { color: var(--muted); font-size: 13px; } /* ---------- Кейсы: крупные цифры наверху (блок 14) ---------- */ .case-num { display: flex; flex-wrap: wrap; gap: 16px 22px; padding: 22px 24px; border-bottom: 1px solid var(--border); } .case-num .kpi { display: flex; flex-direction: column; } .case-num .kpi__v { display: flex; align-items: center; gap: 7px; } .case-num .kpi__v .lucide { color: var(--ink); font-size: 18px; } .case-num .kpi .v { font-size: 20px; font-weight: 800; background: var(--grad-ink); -webkit-background-clip: text; background-clip: text; color: transparent; } .case-num .kpi .l { font-size: 12px; color: var(--muted); margin-top: 2px; } /* ---------- Фото команды (блок 17) ---------- */ .team-photo { width: 100%; max-height: 560px; object-fit: cover; object-position: center 20%; border-radius: var(--r-lg); border: 1px solid var(--border); display: block; box-shadow: var(--shadow); } /* ---------- Адаптив для новых блоков ---------- */ @media (max-width: 980px) { .tiles { grid-template-columns: repeat(3, 1fr); } .crm-row { grid-template-columns: 1fr; } .results { grid-template-columns: repeat(2, 1fr); } .steps2 { grid-template-columns: 1fr; } } @media (max-width: 600px) { .tiles { grid-template-columns: repeat(2, 1fr); } .phone { width: 280px; } .proc-swiper .swiper-slide { width: 80vw; max-width: 320px; } .dlg-swiper .swiper-slide { width: 82vw; max-width: 300px; } .modal { padding: 0; align-items: flex-end; } .modal__dialog { max-width: none; border-radius: 24px 24px 0 0; } } /* ========================================================= 8. Премиум-слой: поверхности секций, spotlight/hover, hero-чипы, прогресс-бар, мобильная CTA ========================================================= */ /* ---------- Ритм вертикальных отступов ---------- */ .section--lg { padding: 80px 0; } @media (max-width: 600px) { .section--lg { padding: 48px 0; } } /* ---------- Полоса прокрутки сверху ---------- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 101; background: var(--grad-brand); box-shadow: 0 0 14px -2px var(--brand); transition: width .1s linear; } /* ---------- Секции БЕЗ собственных фоновых панелей ---------- Раньше .section--band рисовала прямоугольную «полку» (var(--bg-2)), а .section--dark — тёмную плашку с зерном. Именно эти прямоугольники давали горизонтальные грани между блоками. Теперь фон единый на всю страницу (аврора на body::after), а секции прозрачны — рельеф дают только мягкие glow-пятна, которые со всех сторон растворяются в прозрачность. */ .section--band { background: transparent; } /* Меш-градиент — мягкое «свечение». Маска гасит пятна к верх/низ краю секции, поэтому радиальные пятна не упираются в границу и не дают горизонтальной грани на стыке. Заливки-плашки нет — тает именно свечение. */ .section--mesh::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(560px circle at 14% 34%, #02feed14, transparent 55%), radial-gradient(680px circle at 88% 46%, #2b9ef014, transparent 55%); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); } /* Тёмная «сцена»: без плашки и зерна. Оставляем только акцентные переменные (ярче «чернила», стеклянные поверхности) и мягкие glow-пятна без граней. */ .section--dark { --surface: #ffffff0a; --surface-2: #ffffff12; --border: #ffffff1c; --border-soft: #ffffff14; --bg-2: #0a0c12; --text: #fafafa; --text-soft: #e7e7ea; --muted: #a7adba; --muted-2: #767c8a; --ink: #34f7ec; --grad-ink: linear-gradient(135deg, #34f7ec 0%, #5cb6ff 100%); background: transparent; color: var(--text); } .section--dark::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(680px circle at 16% 42%, #02feed1f, transparent 55%), radial-gradient(720px circle at 88% 64%, #2b9ef01c, transparent 55%); /* пятна тают к верх/низ краю — никаких горизонтальных граней на стыках */ -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 76%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 76%, transparent 100%); } .section--dark .glow { opacity: .9; } .section--dark .nav__links a:hover { color: #fff; } /* ---------- Разнообразие заголовков секций ---------- */ /* «Сплит»: заголовок слева, подводка справа — ломает монотонность центра */ .section-head--split { max-width: var(--container); text-align: left; display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px 48px; align-items: end; } .section-head--split .lead { margin-top: 0; } .section-head--split .eyebrow { grid-column: 1 / -1; justify-self: start; } @media (max-width: 820px) { .section-head--split { grid-template-columns: 1fr; align-items: start; } } /* Декоративная линия-подчёркивание под заголовком */ .section-head .rule { width: 56px; height: 3px; border-radius: 3px; background: var(--grad-brand); margin: 18px auto 0; } .section-head--split .rule { margin: 14px 0 0; } /* ---------- Pointer-spotlight на карточках ---------- */ .spot { position: relative; } .spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity .35s ease; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--ink) 20%, transparent), transparent 62%); } .spot:hover::after { opacity: 1; } /* Премиальный hover: бирюзовое кольцо + цветная тень (вместо серой рамки) */ .card:hover, .tile:hover, .crm-card:hover, .swipe-card:hover, .case:hover, .role:hover, .metric:hover, .res:hover, .testi:hover, .niche:hover, .steps2 .step:hover, .flow__step:hover { border-color: transparent; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 45%, transparent), 0 24px 50px -26px color-mix(in srgb, var(--ink) 60%, transparent); } /* верхняя «стеклянная» подсветка для всех панелей */ .card, .role, .metric, .case, .testi, .crm-card, .swipe-card, .steps2 .step { box-shadow: inset 0 1px 0 #ffffff0d; } html[data-theme="light"] .card, html[data-theme="light"] .role, html[data-theme="light"] .metric, html[data-theme="light"] .case, html[data-theme="light"] .testi, html[data-theme="light"] .crm-card, html[data-theme="light"] .swipe-card, html[data-theme="light"] .steps2 .step { box-shadow: inset 0 1px 0 #ffffffcc; } /* ---------- Анимированный градиентный текст ---------- */ .grad { background-size: 220% auto; animation: grad-shift 7s ease-in-out infinite; } @keyframes grad-shift { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } } @media (prefers-reduced-motion: reduce) { .grad { animation: none; } } /* ---------- Hero: меш-фон ---------- */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(620px circle at 78% 22%, #02feed10, transparent 55%); } .hero .chat { position: relative; } /* count-up: моноширинные цифры, чтобы не «прыгали» */ .stat .n, .count { font-variant-numeric: tabular-nums; } /* ---------- Header: тень при прокрутке ---------- */ .site-header { transition: box-shadow .25s, background .25s, border-color .25s; } .site-header.scrolled { box-shadow: 0 10px 30px -18px #000; border-bottom-color: color-mix(in srgb, var(--ink) 30%, var(--border)); } .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 60%, transparent), transparent); opacity: 0; transition: opacity .25s; } .site-header.scrolled::after { opacity: 1; } /* ---------- Мобильная «липкая» кнопка (продающий UX) ---------- */ .mobile-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; display: none; gap: 10px; padding: 8px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(12px); border: 1px solid var(--border); box-shadow: var(--shadow); transform: translateY(140%); transition: transform .35s cubic-bezier(.2,.9,.3,1.2); } .mobile-cta.show { transform: none; } .mobile-cta .btn { flex: 1; padding: 13px 18px; } .mobile-cta .btn--tg { flex: 0 0 auto; width: 50px; padding: 13px; } body.modal-open .mobile-cta { transform: translateY(140%); } @media (max-width: 760px) { .mobile-cta { display: flex; } .site-footer { padding-bottom: 96px; } } /* Уважение к reduce-motion */ @media (prefers-reduced-motion: reduce) { .glow, .btn--primary, .btn--primary::after { animation: none !important; } } /* В тёмной «сцене» сравнение и панели всегда в тёмном исполнении (независимо от темы). Префикс html[data-theme=light] нужен, чтобы перебить светлые правила .cmp-* по специфичности. */ .section--dark .cmp-bad, html[data-theme="light"] .section--dark .cmp-bad { background: linear-gradient(180deg, #2a1416, #170d0e); border-color: #ef444440; } .section--dark .cmp-good, html[data-theme="light"] .section--dark .cmp-good { background: linear-gradient(180deg, #0e2419, #0b1a13); border-color: #00c75855; box-shadow: 0 0 70px -24px #00c75866; } .section--dark .daysep { background: #ffffff12; } .section--dark .res .e { filter: saturate(1.1); } .section--dark .card, .section--dark .res { background: #ffffff0a; border-color: #ffffff1c; box-shadow: inset 0 1px 0 #ffffff12; } .section-head--split .rule { background: var(--grad-brand); } /* ---------- Чекбокс согласия в форме + подпись результата кейса ---------- */ .consent { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--muted); line-height: 1.4; cursor: pointer; user-select: none; text-align: left; } .consent input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; accent-color: var(--ink); cursor: pointer; } .case-num__t { flex: 0 0 100%; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); font-weight: 700; } /* ---------- Skip-link (доступность: переход к контенту с клавиатуры) ---------- */ .skip-link { position: absolute; top: 0; left: 0; z-index: 300; transform: translateY(-120%); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 0 0 10px 0; padding: 10px 16px; font-weight: 600; transition: transform .2s; } .skip-link:focus { transform: none; outline: 2px solid var(--brand); outline-offset: 2px; }