/* ===== base ===== */
html, body {
font-family: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
:root, html[data-theme="dark"] {
color-scheme: dark;
--bg: #0B0D0A; --bg-elevated: #10130F; --surface: #151914; --surface-strong: #1B2119; --surface-soft: #111610;
--ink: #F5F7F1; --ink2: #CDD3C7; --ink3: #8F998A;
--line: rgba(226,238,218,0.11); --line-strong: rgba(226,238,218,0.19);
--green: #68DF37; --green-deep: #8AF05E; --on-green: #081006; --green-soft: rgba(104,223,55,0.11);
--shadow-card: 0 12px 40px -24px rgba(0,0,0,.72);
--shadow-float: 0 30px 90px -38px rgba(0,0,0,.88);
--glow: 0 0 0 1px rgba(104,223,55,.35), 0 0 40px -6px rgba(104,223,55,.35);
}
html[data-theme="light"] { color-scheme: light; --bg: #FAFAF7; --bg-elevated: #F5F6F1; --surface: #FFFFFF; --surface-strong: #F1F3EC; --surface-soft: #F7F8F4; --ink: #0E0F0E; --ink2: #3F4239; --ink3: #6B6E62; --green: #5BC72D; --green-deep: #3C8C1E; --on-green: #0C1F04; }
* { box-sizing: border-box; }
body { margin: 0; }
.page { color: var(--ink); font-family: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; transition: background-color .25s ease, color .25s ease; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; position: relative; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
svg { display: block; }
/* ---------- Typography ---------- */
h1, h2 { margin: 0; font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
h3 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 800; text-transform: uppercase; margin: 0; }
.dot { width: 7px; height: 7px; border-radius: 999px; background: var(--green); position: relative; flex: none; }
.dot::after {
content: ""; position: absolute; inset: 0; border-radius: 999px;
background: var(--green); animation: ping 2.4s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: .55; } 70%,100% { transform: scale(3.2); opacity: 0; } }
.hl { background: var(--green); color: var(--on-green); padding: 0 .18em; border-radius: 6px;
box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.muted { color: var(--ink3); }
@media (prefers-reduced-motion: reduce) { .dot::after { animation: none; } }
/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
border-radius: 999px; font-weight: 800; cursor: pointer; border: 1px solid transparent;
transition: background .2s ease, filter .2s ease, transform .15s ease, box-shadow .2s ease; }
.btn-primary { background: var(--green); color: var(--on-green); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-soft); }
.btn-sm { padding: 9px 18px; font-size: 14px; }
.btn-md { padding: 13px 24px; font-size: 15px; }
.btn-lg { padding: 16px 30px; font-size: 16px; }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.btn-block { width: 100%; }
.btn-glow-once { animation: glowOnce 1.6s ease .4s 1; }
@keyframes glowOnce { 0%,100% { box-shadow: none; } 40% { box-shadow: 0 0 0 6px rgba(104,223,55,.22); } }
@media (prefers-reduced-motion: reduce) { .btn-glow-once { animation: none; } }
/* ---------- Header ---------- */
header { position: sticky; top: 0; z-index: 50;
background: color-mix(in srgb, var(--bg) 72%, transparent);
-webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
border-bottom: 1px solid transparent; transition: border-color .3s ease, box-shadow .3s ease, background-color .25s ease; }
header.scrolled { border-bottom-color: var(--line); box-shadow: 0 12px 30px -20px rgba(0,0,0,.5); background: color-mix(in srgb, var(--bg) 88%, transparent); }
.bar { display: flex; align-items: center; gap: 20px; height: 64px; flex-wrap: nowrap; }
.logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 16px; color: var(--ink); }
nav.links { display: flex; gap: 22px; margin-left: 8px; flex-wrap: nowrap; white-space: nowrap; }
nav.links a { color: var(--ink3); font-size: 14px; font-weight: 600; transition: color .2s ease; }
nav.links a:hover { color: var(--ink); }
.spacer { margin-left: auto; }
.login-link { font-size: 14px; font-weight: 700; color: var(--ink2); }
.login-link:hover { color: var(--ink); }
.theme-toggle { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line-strong);
background: var(--surface); color: var(--ink); cursor: pointer; display: grid; place-items: center; flex: none;
transition: background .2s ease, transform .2s ease; }
.theme-toggle:hover { background: var(--surface-strong); }
.theme-toggle svg { width: 18px; height: 18px; transition: opacity .2s ease, transform .3s ease; }
.theme-toggle .i-sun { display: none; }
.theme-toggle .i-moon { display: block; }
html[data-theme="light"] .theme-toggle .i-sun { display: block; }
html[data-theme="light"] .theme-toggle .i-moon { display: none; }
.burger { display: none; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 12px;
background: var(--surface); padding: 0; cursor: pointer; flex: none; }
.burger span { display: block; width: 16px; height: 2px; margin: 3px auto; border-radius: 2px;
background: var(--ink); transition: transform .22s ease, opacity .18s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.mnav { position: fixed; inset: 64px 0 auto 0; z-index: 49; background: var(--surface);
border-bottom: 1px solid var(--line); padding: 6px 20px 16px; box-shadow: 0 18px 40px rgba(0,0,0,.3); }
.mnav[hidden] { display: none; }
.mnav a { display: flex; align-items: center; min-height: 44px; padding: 10px 4px; border-bottom: 1px solid var(--line);
color: var(--ink); font-size: 16px; font-weight: 700; }
.mnav a:last-child { border-bottom: 0; color: var(--green-deep); }
@media (max-width: 900px) {
nav.links { display: none; }
.login-link { display: none; }
.burger { display: block; }
.cta-mobile-label .full { display: none; }
.cta-mobile-label .short { display: inline; }
}
@media (min-width: 901px) { .mnav { display: none !important; } .cta-mobile-label .short { display: none; } }
/* ---------- Sections ---------- */
section.band.tint { background: var(--bg-elevated); }
.sec-pad { padding: clamp(64px, 8vw, 104px) 0; position: relative; }
.sec-h { margin-top: 12px; }
.sec-sub { margin-top: 12px; max-width: 58ch; color: var(--ink3); font-size: 16px; line-height: 1.6; }
.head-row { max-width: 640px; }
/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(48px, 7vh, 84px) 0 clamp(64px, 9vh, 100px); overflow: clip; }
.hero::before { content: ""; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(10px); }
.hero-grid { display: grid; align-items: center; position: relative; z-index: 1; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.05fr 1.05fr; gap: 40px; } }
.hero .sub { margin-top: 18px; color: var(--ink2); }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.trial-note { margin-top: 18px; font-size: 13.5px; color: var(--ink3); font-weight: 600; }
.trial-note b { color: var(--ink2); font-weight: 800; }
/* ---------- Hero product visual: SaaS app window ---------- */
.hero-visual-wrap { position: relative; }
.float-chip { position: absolute; display: flex; align-items: center; gap: 7px; padding: 8px 12px;
border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface);
box-shadow: var(--shadow-card); font-size: 12.5px; font-weight: 700; color: var(--ink2);
animation: floaty 5s ease-in-out infinite; }
.float-chip.a { top: -14px; left: 8%; animation-delay: 0s; }
.float-chip.b { bottom: 10%; right: -18px; animation-delay: 1.4s; }
.float-chip.c { top: 42%; right: -26px; animation-delay: 2.6s; opacity: .7; filter: blur(.2px); }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 900px) { .float-chip.c { display: none; } }
@media (max-width: 600px) { .float-chip.b { display: none; } }
@media (prefers-reduced-motion: reduce) { .float-chip { animation: none; } }
.appwin { position: relative; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--surface);
box-shadow: var(--shadow-float); overflow: hidden; }
.appwin-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-strong); }
.appwin-bar i { width: 9px; height: 9px; border-radius: 999px; background: var(--line-strong); display: block; }
.appwin-title { margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--ink3); }
.appwin-live { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--green-deep); }
.appwin-body { display: grid; grid-template-columns: 108px 1fr; min-height: 380px; }
.appwin-side { border-right: 1px solid var(--line); background: var(--surface-soft); padding: 16px 10px; display: grid; gap: 4px; align-content: start; }
.side-item { display: flex; align-items: center; gap: 8px; padding: 9px 8px; border-radius: 9px; font-size: 11.5px; font-weight: 600; color: var(--ink3); }
.side-item i { width: 6px; height: 6px; border-radius: 999px; background: var(--ink3); flex: none; }
.appwin-main { padding: 18px; display: grid; gap: 12px; align-content: start; }
.avz { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-elevated);
transition: border-color .3s ease, box-shadow .3s ease; }
.avz-tag-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.avz-tag { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
color: var(--ink3); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.avz-time { font-size: 11px; color: var(--ink3); }
.avz p { font-size: 14px; line-height: 1.5; margin: 10px 0 0; color: var(--ink2); }
.avz.pipe-message.lit { border-color: var(--green); box-shadow: 0 0 0 1px rgba(104,223,55,.25); }
.pipe-analysis .arow { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 12.5px; }
.pipe-analysis .arow span:first-child { color: var(--ink3); }
.pipe-analysis .arow span.val { font-weight: 700; text-align: right; }
.score { display: inline-flex; background: var(--green); color: var(--on-green); border-radius: 6px;
padding: 2px 9px; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pipe-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink3); }
.pipe-status .sdot { width: 6px; height: 6px; border-radius: 999px; background: var(--ink3); }
.pipe-status.done { color: var(--green-deep); }
.pipe-status.done .sdot { background: var(--green); }
.pipe-open { margin-top: 4px; }
.signal-line { position: absolute; left: 50%; width: 2px; background: linear-gradient(var(--green), transparent);
transform: translateX(-50%); opacity: 0; transition: opacity .2s ease; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .avz, .signal-line { transition: none; } }
@media (max-width: 560px) { .appwin-body { grid-template-columns: 1fr; } .appwin-side { display: none; } }
/* ---------- Examples (Telegram-like feed) ---------- */
.ex-row { margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (min-width: 861px) { .ex-row .ex-card:nth-child(2) { transform: translateY(18px); } }
.ex-card { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 0; box-shadow: var(--shadow-card);
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.ex-card:hover { transform: translateY(-5px); border-color: var(--line-strong); }
@media (min-width: 861px) { .ex-card:nth-child(2):hover { transform: translateY(13px); } }
.ex-head { display: flex; align-items: center; gap: 9px; padding: 14px 14px 0; }
.ex-avatar { width: 26px; height: 26px; border-radius: 999px; background: var(--green-soft); color: var(--green-deep);
display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; }
.ex-meta-top { font-size: 11.5px; color: var(--ink3); }
.ex-bubble { margin: 10px 14px 0; background: var(--surface-strong); border-radius: 12px 12px 12px 4px; padding: 10px 13px; font-size: 14px; line-height: 1.45; color: var(--ink2); }
.ex-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 14px; }
.ex-reason { padding: 0 14px 12px; font-size: 12.5px; color: var(--ink3); }
.ex-flag { display: block; padding: 0 14px 14px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.ex-card.in .score { animation: scorePulse .5s ease .3s 1; }
@keyframes scorePulse { 0%,100% { transform: scale(1); } 45% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .ex-card, .ex-card.in .score { transition: none; animation: none; } }
@media (max-width: 860px) {
.ex-row { display: flex; grid-template-columns: unset; overflow-x: auto; scroll-snap-type: x mandatory;
padding-bottom: 8px; margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
.ex-card { flex: 0 0 82%; scroll-snap-align: start; transform: none !important; }
}
/* ---------- Timeline (how it works) ---------- */
.timeline { margin-top: 40px; }
.tl-line-wrap { display: none; }
@media (min-width: 861px) {
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; }
.tl-line-wrap { display: block; position: absolute; left: 5%; right: 5%; top: 19px; height: 2px; background: var(--line); z-index: 0; }
.tl-line-fill { display: block; height: 100%; width: 0; background: var(--green); transition: width 1.1s cubic-bezier(.16,1,.3,1); }
.timeline.in .tl-line-fill { width: 100%; }
}
.tl-step { position: relative; z-index: 1; display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding-bottom: 26px; }
@media (min-width: 861px) { .tl-step { grid-template-columns: 1fr; gap: 14px; padding-bottom: 0; } }
.tl-step:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: -4px; width: 2px; background: var(--line); }
@media (min-width: 861px) { .tl-step::before { display: none; } }
.tl-node { width: 40px; height: 40px; border-radius: 999px; background: var(--surface-strong); border: 1px solid var(--line-strong);
color: var(--ink3); display: grid; place-items: center; font-weight: 800; font-size: 15px; transition: transform .3s ease, background .3s ease, color .3s ease; }
.timeline.in .tl-step.active .tl-node { background: var(--green); color: var(--on-green); border-color: transparent; transform: scale(1.12); }
.tl-body h3 { font-size: 17px; }
.tl-body p { margin: 6px 0 0; color: var(--ink3); font-size: 14.5px; line-height: 1.55; }
.tl-frag { margin-top: 10px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--line);
border-radius: 999px; font-size: 12px; color: var(--ink3); background: var(--surface); }
.tl-frag i { width: 6px; height: 6px; border-radius: 999px; background: var(--green); }
@media (prefers-reduced-motion: reduce) { .tl-line-fill, .tl-node { transition: none; } .timeline.in .tl-line-fill { width: 100%; } }
/* ---------- Onboarding demo ---------- */
.demo { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 22px; margin-top: 36px; box-shadow: var(--shadow-card); }
.demo-caption { font-size: 14.5px; color: var(--ink3); margin: 0; }
.demo-head { margin-top: 14px; display: flex; justify-content: flex-end; }
.demo-go { border: 0; border-radius: 999px; background: var(--green); color: var(--on-green);
font: inherit; font-weight: 800; font-size: 14px; padding: 10px 18px; cursor: pointer; }
.demo-go:disabled { opacity: .6; cursor: default; }
.demo-out { margin-top: 16px; display: grid; gap: 12px; }
@media (min-width: 720px) { .demo-out { grid-template-columns: 1.2fr 1fr; } }
.demo-card { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-elevated); padding: 15px; transition: opacity .35s ease; }
.demo-card h4 { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin: 0; }
.demo-card p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink2); }
.kw { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.kw span { border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; background: var(--surface); }
.demo-score { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13.5px; }
.demo-score b { color: var(--green-deep); font-size: 17px; font-variant-numeric: tabular-nums; }
/* ---------- Why (bento grid) ---------- */
.bento { margin-top: 34px; display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 741px) { .bento { grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; } }
.bento-card { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 26px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; }
.bento-big { grid-row: span 2; }
@media (min-width: 741px) { .bento-big { padding: 32px; } }
.bento-card h3 { font-size: 18px; }
.bento-big h3 { font-size: 21px; }
.bento-card p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink3); max-width: 40ch; }
.bento-illust { margin-top: 18px; opacity: .9; }
.bento-big .bento-illust { margin-top: 24px; }
/* ---------- Lead card (dashboard) ---------- */
.lead-shell { margin-top: 36px; position: relative; }
.lead-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 900px) { .lead-grid { grid-template-columns: 1fr 200px .85fr; align-items: start; } }
.mock { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 22px; box-shadow: var(--shadow-card); }
.mock-top { display: flex; align-items: center; gap: 10px; }
.mock-time { font-size: 12.5px; color: var(--ink3); }
.mock p.msg { margin: 12px 0 0; font-size: 16px; line-height: 1.5; }
.mock-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--line); font-size: 13px; }
.mock-row span { color: var(--ink3); }
.mock-row span.val { font-weight: 700; color: var(--ink); text-align: right; }
.mock-score-num { font-variant-numeric: tabular-nums; }
.mock-reason { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--green-soft); font-size: 13.5px; line-height: 1.5; color: var(--ink2);
opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; }
.lead-shell.in .mock-reason { opacity: 1; transform: none; }
.mock-actions { margin-top: 16px; display: flex; gap: 8px; align-items: center; position: relative; }
.icon-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface);
color: var(--ink3); cursor: pointer; display: grid; place-items: center; font-weight: 800; font-size: 16px; flex: none; }
.menu-pop { position: absolute; right: 0; bottom: 48px; min-width: 170px; border: 1px solid var(--line); border-radius: 12px;
background: var(--surface); box-shadow: var(--shadow-float); padding: 6px; display: grid; gap: 2px; }
.menu-pop[hidden] { display: none; }
.menu-pop button { border: 0; background: transparent; text-align: left; padding: 9px 10px; border-radius: 8px;
font-size: 13.5px; color: var(--ink); cursor: pointer; }
.menu-pop button:hover { background: var(--surface-strong); }
.status-col { border: 1px solid var(--line); border-radius: 18px; background: var(--bg-elevated); padding: 18px; display: grid; gap: 12px; align-content: start; }
.status-row b { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.status-row span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ink2); }
.lead-points { display: grid; gap: 16px; }
.lead-points li { font-size: 15px; line-height: 1.5; }
.lead-points b { display: block; font-weight: 800; margin-bottom: 3px; }
.lead-points span { color: var(--ink3); font-size: 14px; }
.score-legend { margin-top: 24px; }
.score-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; }
.score-bar i { display: block; }
.score-bar i:nth-child(1) { flex: 40; background: var(--surface-strong); }
.score-bar i:nth-child(2) { flex: 30; background: color-mix(in srgb, var(--green) 45%, var(--surface-strong)); }
.score-bar i:nth-child(3) { flex: 30; background: var(--green); }
.score-labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--ink3); }
/* ---------- Audience (panel with markers) ---------- */
.aud-panel { margin-top: 34px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface);
box-shadow: var(--shadow-card); display: grid; grid-template-columns: 1fr; }
@media (min-width: 800px) { .aud-panel { grid-template-columns: repeat(3, 1fr); } }
.aud-col { padding: 24px; }
@media (min-width: 800px) { .aud-col + .aud-col { border-left: 1px solid var(--line); } }
.aud-col:not(:first-child) { border-top: 1px solid var(--line); }
@media (min-width: 800px) { .aud-col:not(:first-child) { border-top: 0; } }
.aud-tag { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
color: var(--green-deep); background: var(--green-soft); border-radius: 999px; padding: 3px 10px; margin-bottom: 10px; }
.aud-col h3 { font-size: 16px; }
.aud-col p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink3); }
/* ---------- Pricing ---------- */
.cards { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.pcard { border: 1px solid var(--line); border-radius: 20px; padding: 26px 24px; background: var(--surface-soft);
box-shadow: var(--shadow-card); display: flex; flex-direction: column;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.pcard:hover { transform: translateY(-5px); border-color: var(--line-strong); }
.pcard.pop { padding: 32px 26px; position: relative; z-index: 1; }
@media (min-width: 901px) { .pcard.pop { transform: translateY(-10px); } .pcard.pop:hover { transform: translateY(-15px); } }
.pcard .badge { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green-deep); }
.pcard h3 { margin-top: 6px; font-size: 19px; letter-spacing: -0.01em; }
.price { margin-top: 14px; font-size: 38px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.price small { font-size: 14px; font-weight: 700; color: var(--ink3); }
.plist { margin: 16px 0 0; display: grid; gap: 8px; flex: 1; }
.plist li { display: flex; gap: 9px; font-size: 14px; color: var(--ink2); line-height: 1.4; }
.plist li::before { content: ""; width: 16px; height: 16px; margin-top: 2px; flex: none;
background: var(--green-deep); border-radius: 5px;
-webkit-mask: url('data:image/svg+xml;utf8,') center/13px no-repeat;
mask: url('data:image/svg+xml;utf8,') center/13px no-repeat; }
.pcard .btn { margin-top: 20px; }
.price-note { margin-top: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
padding: 16px 22px; display: grid; gap: 6px; }
.price-note p { margin: 0; font-size: 13.5px; color: var(--ink3); }
@media (prefers-reduced-motion: reduce) { .pcard, .pcard.pop { transition: none; } .pcard:hover, .pcard.pop:hover { transform: none; } }
@media (max-width: 900px) {
.cards { grid-template-columns: 1fr; }
.pcard.pop { order: -1; transform: none; }
.pcard.pop:hover { transform: none; }
}
/* ---------- Trust ---------- */
.trust-wrap { padding-top: clamp(40px, 6vw, 56px); padding-bottom: clamp(40px, 6vw, 56px); }
.trust { border: 2px solid var(--green); border-radius: 18px; padding: 22px 26px; }
.trust h3 { font-size: 16px; margin: 0; color: var(--ink); }
.trust p { margin: 6px 0 0; font-size: 14px; color: var(--ink2); line-height: 1.5; max-width: 60ch; }
/* ---------- FAQ ---------- */
.faq { margin-top: 30px; max-width: 74ch; }
.faq details { border-top: 1px solid var(--line); padding: 4px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; gap: 16px; align-items: center;
font-weight: 700; font-size: 15.5px; padding: 14px 0; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; font-size: 20px; line-height: 1; color: var(--ink3);
transition: transform .18s ease; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; border-radius: 6px; }
.faq p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--ink3); }
/* ---------- Final CTA (glowing panel) ---------- */
.final-panel { position: relative; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 24px;
background: linear-gradient(180deg, var(--surface-strong), var(--bg-elevated));
box-shadow: var(--shadow-float); padding: clamp(40px, 6vw, 64px); text-align: center; }
.final-panel::before { content: ""; position: absolute; inset: -40% -20% auto -20%; height: 260px;
background: radial-gradient(circle, var(--green-soft) 0%, transparent 70%); pointer-events: none; }
.final-panel::after { content: ""; position: absolute; inset: 0; border-radius: 24px; padding: 1px;
background: linear-gradient(120deg, rgba(104,223,55,.5), transparent 40%, transparent 60%, rgba(104,223,55,.35));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.final-panel h2 { position: relative; margin: 0 auto; }
.final-panel p { position: relative; margin: 14px auto 0; max-width: 44ch; color: var(--ink3); font-size: 16px; }
.final-panel .cta-row { position: relative; margin-top: 24px; display: flex; justify-content: center; }
.final-panel .trial-note { position: relative; justify-content: center; display: block; }
/* ---------- Footer ---------- */
footer { background: var(--bg-elevated); border-top: 1px solid var(--line); }
.footer-top { padding: 44px 0 24px; display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; }
.footer-brand p { margin: 8px 0 0; font-size: 13.5px; color: var(--ink3); max-width: 34ch; line-height: 1.5; }
.footer-legal { margin-top: 16px; font-size: 13px; line-height: 1.6; color: var(--ink3); max-width: 34ch; }
.footer-legal strong { color: var(--ink2); font-weight: 700; }
.footer-links { display: flex; flex-wrap: wrap; gap: 40px; }
.footer-col h4 { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin: 0; }
.footer-col ul { margin-top: 12px; display: grid; gap: 9px; }
.footer-col a { font-size: 14px; color: var(--ink2); }
.footer-col a:hover { color: var(--ink); text-decoration: underline; }
.foot { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
justify-content: space-between; padding: 18px 0; font-size: 13px; color: var(--ink3); }
/* ---------- Responsive base ---------- */
@media (max-width: 640px) {
.wrap { padding: 0 20px; }
.sec-pad { padding: 64px 0; }
.hero { padding: 40px 0 56px; }
.hero h1 { max-width: none; font-size: clamp(30px, 8.4vw, 40px); }
.hero .cta-row { flex-direction: column; align-items: stretch; }
.hero .cta-row .btn { width: 100%; }
.cards .pcard .btn { width: 100%; }
.lead-grid { grid-template-columns: 1fr; }
.status-col { order: 3; }
}
/* ---------- Reveal: visible by default (no-JS), animated only when JS is active ---------- */
html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1); }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
@supports not (background: color-mix(in srgb, white 50%, black)) {
header { background: var(--bg); }
header.scrolled { background: var(--bg); }
}
/* ==========================================================
XMBoost final art direction — conversion-led, product-first
========================================================== */
.announce { background: linear-gradient(90deg, color-mix(in srgb, var(--green) 18%, var(--bg)), color-mix(in srgb, var(--green) 8%, var(--bg))); border-bottom: 1px solid color-mix(in srgb, var(--green) 24%, transparent); }
.announce a { min-height: 38px; padding: 8px 20px; display: flex; align-items: center; justify-content: center; gap: 20px; color: var(--ink2); font-size: 13px; font-weight: 650; }
.announce strong { color: var(--green-deep); font-weight: 800; }
.announce-link { color: var(--green-deep); font-weight: 800; white-space: nowrap; }
.announce-link span { display: inline-block; transition: transform .2s ease; }
.announce a:hover .announce-link span { transform: translateX(3px); }
header { top: 0; }
.cta-mobile-label { display: inline-flex; }
.mnav-cta { color: var(--on-green) !important; background: var(--green); border-radius: 12px; justify-content: center; margin-top: 10px; border-bottom: 0 !important; }
.btn-hero { padding: 17px 28px; font-size: 16px; min-height: 56px; box-shadow: 0 14px 42px -18px color-mix(in srgb, var(--green) 72%, transparent); }
.btn-arrow { display: inline-block; transition: transform .2s ease; }
.btn-hero:hover .btn-arrow { transform: translateX(4px); }
.btn-secondary { background: color-mix(in srgb, var(--surface) 72%, transparent); color: var(--ink); border: 1px solid var(--line-strong); }
.btn-secondary:hover { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); background: var(--surface-strong); }
.btn-hero-secondary { padding: 16px 24px; min-height: 56px; }
.hero { min-height: 720px; display: grid; align-items: center; padding: clamp(54px, 7vh, 88px) 0 clamp(70px, 9vh, 108px); }
.hero::before { width: 900px; height: 900px; right: -260px; top: -340px; background: radial-gradient(circle, color-mix(in srgb, var(--green) 15%, transparent) 0%, transparent 64%); }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .32; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 84px 84px; mask-image: linear-gradient(to bottom, black, transparent 78%); }
.hero-grid { grid-template-columns: minmax(0, .94fr) minmax(500px, 1.06fr); gap: clamp(46px, 5vw, 76px); }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { line-height: .96; letter-spacing: -.055em; }
.hero h1 .hl { display: inline-block; margin: 0 -.02em; padding: .01em .15em .06em; border-radius: 5px; transform: rotate(-1deg); box-shadow: 0 8px 28px -18px color-mix(in srgb, var(--green) 86%, transparent); }
.hero .sub { font-size: 18px; line-height: 1.58; }
.hero .cta-row { margin-top: 28px; }
.hero-proof { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-proof span { display: inline-flex; align-items: center; min-height: 30px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--surface) 78%, transparent); color: var(--ink3); font-size: 12.5px; font-weight: 650; }
.hero-proof span:first-child { color: var(--green-deep); border-color: color-mix(in srgb, var(--green) 36%, var(--line)); background: var(--green-soft); }
.hero-start-note { margin: 15px 0 0; display: flex; align-items: center; gap: 8px; color: var(--ink2); font-size: 13px; font-weight: 650; }
.status-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 12%, transparent); }
.hero-visual-wrap { isolation: isolate; }
.hero-glow { position: absolute; inset: 10% -6% 8% 12%; z-index: -1; border-radius: 50%; background: color-mix(in srgb, var(--green) 14%, transparent); filter: blur(65px); }
.hero-app { transform-origin: 50% 50%; border-radius: 22px; }
.hero-app .appwin-body { min-height: 424px; grid-template-columns: 122px 1fr; }
.side-brand { width: 34px; height: 34px; margin: 0 0 14px 7px; display: grid; place-items: center; border-radius: 10px; background: var(--green); color: var(--on-green); font-size: 11px; font-weight: 800; }
.side-count { margin-left: auto; min-width: 22px; height: 20px; display: grid; place-items: center; border-radius: 6px; background: var(--green); color: var(--on-green); font-size: 10px; font-weight: 800; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 13%, transparent); animation: livePulse 2.2s ease-out infinite; }
@keyframes livePulse { 0%,100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 12%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } }
.app-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.app-summary > div { border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; background: var(--surface-soft); }
.app-summary-label { display: block; color: var(--ink3); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.app-summary strong { display: block; margin-top: 3px; font-size: 16px; }
.green-value { color: var(--green-deep); }
.lead-signal { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--green) 46%, var(--line)); border-radius: 16px; padding: 16px; background: linear-gradient(145deg, color-mix(in srgb, var(--green) 7%, var(--surface)), var(--surface)); animation: signalGlow 6.4s ease-in-out infinite; }
.lead-signal-top, .lead-signal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lead-signal time { color: var(--ink3); font-size: 11px; }
.source-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--ink2); font-size: 11px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.telegram-mark { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; background: var(--green-soft); color: var(--green-deep); }
.lead-signal p { margin: 15px 0 16px; font-size: 15px; line-height: 1.52; color: var(--ink); font-weight: 600; }
.ai-match { display: inline-flex; align-items: center; gap: 7px; color: var(--green-deep); font-size: 12px; font-weight: 750; }
.check-mini { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: var(--on-green); font-size: 11px; }
.score-large { min-width: 40px; justify-content: center; font-size: 14px; }
.lead-scan { position: absolute; top: 0; bottom: 0; left: -34%; width: 30%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--green) 24%, transparent), transparent); transform: skewX(-14deg); animation: scanLead 6.4s cubic-bezier(.22,.61,.36,1) infinite; pointer-events: none; }
@keyframes scanLead { 0%,18% { left: -38%; opacity: 0; } 24% { opacity: 1; } 48% { left: 116%; opacity: 1; } 54%,100% { left: 116%; opacity: 0; } }
@keyframes signalGlow { 0%,100% { border-color: color-mix(in srgb, var(--green) 30%, var(--line)); } 42%,60% { border-color: var(--green); box-shadow: 0 0 0 1px color-mix(in srgb, var(--green) 20%, transparent), 0 18px 46px -34px color-mix(in srgb, var(--green) 66%, transparent); } }
.delivery-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); animation: deliveryReady 6.4s ease infinite; }
.delivery-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--green-soft); color: var(--green-deep); font-weight: 800; }
.delivery-copy b, .delivery-copy span { display: block; }
.delivery-copy b { font-size: 13px; }
.delivery-copy span { margin-top: 1px; color: var(--ink3); font-size: 11.5px; }
@keyframes deliveryReady { 0%,55% { opacity: .58; transform: translateY(4px); } 66%,90% { opacity: 1; transform: none; } 100% { opacity: .58; transform: translateY(4px); } }
.hero-caption { width: fit-content; margin: 15px auto 0; color: var(--ink3); font-size: 12px; }
.hero-caption span { color: var(--green); }
.trial-strip { padding: 0 0 30px; background: var(--bg); }
.trial-strip-inner { display: grid; grid-template-columns: auto minmax(260px, 1.35fr) minmax(210px, .95fr) auto; align-items: center; gap: clamp(22px, 3vw, 42px); padding: 28px 30px; border: 1px solid var(--line-strong); border-radius: 20px; background: linear-gradient(120deg, color-mix(in srgb, var(--green) 8%, var(--surface)), var(--surface) 44%, var(--surface-soft)); box-shadow: var(--shadow-card); }
.trial-big { display: flex; align-items: center; gap: 10px; }
.trial-big strong { font-size: 64px; line-height: .8; letter-spacing: -.06em; color: var(--green-deep); }
.trial-big span { color: var(--ink3); font-size: 11px; line-height: 1.25; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.trial-kicker { margin: 0 0 4px; color: var(--green-deep); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.trial-main h2 { margin: 0; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.08; letter-spacing: -.035em; }
.trial-main > p:last-child { margin: 8px 0 0; color: var(--ink3); font-size: 13.5px; line-height: 1.52; }
.trial-benefits { display: grid; gap: 7px; }
.trial-benefits span { color: var(--ink2); font-size: 13px; font-weight: 650; }
.trial-benefits i { color: var(--green-deep); font-style: normal; margin-right: 7px; }
.trial-action { white-space: nowrap; }
.sec-h { font-size: clamp(32px, 3.5vw, 46px); line-height: 1.02; letter-spacing: -.05em; max-width: 15ch; }
.head-row { position: relative; }
.head-row::after { content: ""; display: block; width: 46px; height: 3px; margin-top: 20px; border-radius: 99px; background: var(--green); }
.demo-head-static { align-items: center; justify-content: space-between; gap: 18px; }
.demo-ready { display: inline-flex; align-items: center; gap: 7px; color: var(--green-deep); font-size: 13px; font-weight: 750; }
.demo-ready i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); font-style: normal; }
.demo-link { color: var(--green-deep); font-size: 13px; font-weight: 800; }
.demo-link:hover { text-decoration: underline; }
.pcard .btn-primary { box-shadow: 0 12px 30px -22px color-mix(in srgb, var(--green) 70%, transparent); }
.pcard:not(.pop) .btn-primary { background: color-mix(in srgb, var(--green) 92%, var(--surface)); }
.price-note b { color: var(--green-deep); }
.final-panel { padding: clamp(50px, 7vw, 76px); }
.final-panel h2 { max-width: 18ch; font-size: clamp(34px, 4.1vw, 50px); letter-spacing: -.05em; }
.final-panel .btn-lg { min-height: 56px; padding: 17px 30px; font-size: 16px; box-shadow: 0 18px 46px -24px color-mix(in srgb, var(--green) 80%, transparent); }
.footer-email { display: inline-block; margin-top: 12px; color: var(--ink2); font-size: 13.5px; font-weight: 650; }
.footer-email:hover { color: var(--green-deep); }
.legal-bar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.legal-grid { min-height: 86px; display: grid; grid-template-columns: minmax(220px, .7fr) minmax(420px, 1.3fr); align-items: center; gap: 36px; padding-top: 18px; padding-bottom: 18px; }
.legal-company strong, .legal-company span { display: block; }
.legal-company strong { color: var(--ink2); font-size: 13.5px; }
.legal-company span { margin-top: 3px; color: var(--ink3); font-size: 12.5px; }
.legal-grid address { margin: 0; justify-self: end; color: var(--ink3); font-size: 12.5px; line-height: 1.6; font-style: normal; text-align: right; }
.mobile-sticky-cta { display: none; position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 60; min-height: 54px; box-shadow: 0 18px 48px -18px rgba(0,0,0,.72); transform: translateY(130%); transition: transform .3s ease; }
.mobile-sticky-cta.show { transform: none; }
@media (max-width: 1100px) {
.hero-grid { grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr); gap: 36px; }
.hero h1 { font-size: clamp(48px, 5vw, 62px); }
.trial-strip-inner { grid-template-columns: auto 1fr auto; }
.trial-benefits { display: none; }
}
@media (max-width: 900px) {
.announce a { gap: 10px; }
.cta-mobile-label { display: none; }
.hero { min-height: auto; }
.hero-grid { grid-template-columns: 1fr; gap: 48px; }
.hero h1 { max-width: 11ch; }
.hero-app { transform: none; max-width: 660px; margin: 0 auto; }
.trial-strip-inner { grid-template-columns: auto 1fr; }
.trial-action { grid-column: 1 / -1; width: 100%; }
.legal-grid { grid-template-columns: 1fr; gap: 12px; }
.legal-grid address { justify-self: start; text-align: left; }
.mobile-sticky-cta { display: inline-flex; }
}
@media (max-width: 640px) {
.announce a { min-height: 34px; padding: 7px 14px; font-size: 11.5px; }
.announce-link { display: none; }
.hero { padding-top: 38px; padding-bottom: 66px; }
.hero::after { background-size: 56px 56px; }
.hero h1 { font-size: clamp(40px, 11.2vw, 52px); max-width: 9.4ch; }
.hero h1 .hl { padding-left: .12em; padding-right: .12em; }
.hero .sub { font-size: 16.5px; }
.hero .cta-row { flex-direction: column; }
.hero .cta-row .btn { width: 100%; }
.hero-proof { gap: 6px; }
.hero-proof span { font-size: 11.5px; }
.hero-start-note { font-size: 12px; }
.hero-app .appwin-body { grid-template-columns: 1fr; min-height: auto; }
.hero-app .appwin-side { display: none; }
.appwin-main { padding: 14px; }
.app-summary { grid-template-columns: 1fr 1fr; }
.lead-signal p { font-size: 14px; }
.delivery-row { grid-template-columns: auto 1fr; }
.delivery-row .btn { grid-column: 1 / -1; width: 100%; }
.trial-strip { padding-bottom: 16px; }
.trial-strip-inner { grid-template-columns: 1fr; padding: 24px 20px; gap: 18px; }
.trial-big strong { font-size: 54px; }
.trial-main h2 { font-size: 26px; }
.trial-action { grid-column: auto; }
.sec-h { font-size: clamp(30px, 8.8vw, 40px); max-width: 13ch; }
.demo-head-static { align-items: flex-start; flex-direction: column; }
.legal-grid address { font-size: 12px; }
.footer-links { gap: 28px; }
body { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) {
.live-dot, .lead-signal, .lead-scan, .delivery-row { animation: none !important; }
.mobile-sticky-cta { transition: none; }
}
/* ======================================================================
XMBoost v7 — premium minimal direction
Green is reserved for action, score and active status. Structural UI is neutral.
====================================================================== */
:root, html[data-theme="dark"] {
--line: rgba(238,241,235,.085);
--line-strong: rgba(238,241,235,.14);
--green-soft: rgba(104,223,55,.075);
--shadow-card: 0 14px 42px -30px rgba(0,0,0,.72);
--shadow-float: 0 28px 84px -44px rgba(0,0,0,.92);
--glow: 0 14px 44px -30px rgba(104,223,55,.42);
--neutral-soft: rgba(255,255,255,.035);
--neutral-mid: #8E958B;
}
html[data-theme="light"] {
--line: #E7E9E4;
--line-strong: #D9DDD5;
--green-soft: #EFF8E9;
--shadow-card: 0 12px 38px -30px rgba(24,30,20,.24);
--shadow-float: 0 26px 70px -42px rgba(24,30,20,.28);
--glow: 0 14px 42px -30px rgba(60,140,30,.32);
--neutral-soft: rgba(14,15,14,.025);
--neutral-mid: #747A70;
}
.hero::before, .hero-glow { display: none !important; }
.eyebrow { color: var(--ink3); letter-spacing: .16em; }
.eyebrow .dot { background: var(--neutral-mid); opacity: .7; }
.eyebrow .dot::after { display: none; }
.logo .dot, .appwin-live .live-dot { background: var(--green); opacity: 1; }
.logo .dot::after { display: block; }
.hero { padding-top: clamp(54px, 8vh, 94px); }
.hero-copy { padding-top: 0; }
.hero h1 { max-width: 12.5ch; font-size: clamp(44px, 5vw, 68px); }
.hero .sub { max-width: 43ch; }
.hero-app { transform: perspective(1500px) rotateY(-2deg); box-shadow: 0 34px 90px -50px rgba(0,0,0,.9); border-color: var(--line-strong); }
.appwin, .lead-signal, .delivery-row, .app-summary, .ex-card, .mock, .status-col, .aud-panel, .pcard, .price-note, .trust, .faq details, .onb-preview {
border-color: var(--line);
}
.appwin-side, .appwin-bar, .delivery-row, .status-col { background: var(--surface-soft); }
.side-item.active { background: var(--neutral-soft); color: var(--ink); }
.side-item.active i { background: var(--green); }
.lead-signal { box-shadow: none; }
.lead-signal.lit { box-shadow: none; }
.delivery-icon, .check-mini { background: var(--green); }
.btn-primary { box-shadow: var(--glow); }
.btn-primary:hover { transform: translateY(-1px); }
.pcard.pop { border-color: var(--line-strong); box-shadow: var(--shadow-float); background: var(--surface); }
.pcard.pop::before { content:""; position:absolute; top:-1px; left:26px; right:26px; height:2px; border-radius:999px; background:var(--green); }
.pcard.pop:hover { transform: translateY(-11px); }
.trust { border-width: 1px; background: var(--surface); }
.final-panel { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-card); }
.final-panel::before, .final-panel::after { display:none; }
/* Compact proof */
.compact-proof-wrap { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(0,1.45fr); gap:clamp(34px,6vw,88px); align-items:center; }
.compact-proof-head .sec-h { max-width:13ch; }
.proof-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; gap:14px; }
.proof-step { min-width:0; padding:18px 16px; border-top:1px solid var(--line-strong); background:transparent; opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease, border-color .5s ease; }
.proof-flow.in .proof-step { opacity:1; transform:none; }
.proof-flow.in .proof-step:nth-of-type(2) { transition-delay:.12s; }
.proof-flow.in .proof-step:nth-of-type(3) { transition-delay:.24s; }
.proof-index { display:block; font-size:11px; font-weight:800; color:var(--ink3); margin-bottom:20px; }
.proof-step b { display:block; font-size:15px; }
.proof-step small { display:block; margin-top:6px; color:var(--ink3); font-size:12.5px; line-height:1.45; }
.proof-result { border-top-color:var(--green); }
.proof-arrow { align-self:center; color:var(--ink3); opacity:.55; }
/* Personas */
.personas-grid { margin-top:38px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.5vw,32px); align-items:end; }
.persona-card { position:relative; cursor:pointer; outline:none; }
.persona-photo-wrap { position:relative; overflow:hidden; border-radius:20px; background:var(--surface); box-shadow:var(--shadow-card); }
.persona-photo { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 20%; filter:saturate(.82) contrast(1.02); transition:transform .45s cubic-bezier(.16,1,.3,1), filter .35s ease; }
.persona-card:hover .persona-photo, .persona-card:focus-visible .persona-photo, .persona-card.active .persona-photo { transform:scale(1.018); filter:saturate(.95) contrast(1.03); }
.persona-status { position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:999px; background:color-mix(in srgb,var(--surface) 88%,transparent); backdrop-filter:blur(12px); font-size:11px; font-weight:700; color:var(--ink2); }
.persona-status i { width:6px; height:6px; border-radius:50%; background:var(--green); }
.persona-basket { position:relative; width:88%; height:102px; margin:-36px auto 0; z-index:3; }
.persona-stack { position:absolute; }
.persona-basket-front { position:absolute; left:0; right:0; height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 15px; border:1px solid var(--line-strong); border-radius:13px; background:var(--surface); box-shadow:0 16px 32px -26px rgba(0,0,0,.65); font-size:12px; font-weight:800; color:var(--ink2); }
.persona-count { min-width:27px; height:27px; padding:0 7px; display:grid; place-items:center; border-radius:999px; background:var(--green); color:var(--on-green); font-variant-numeric:tabular-nums; }
.persona-lead { position:absolute; left:50%; display:flex; align-items:center; gap:7px; white-space:nowrap; padding:7px 9px; border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:var(--shadow-card); font-size:11.5px; color:var(--ink2); opacity:0; transform:translate(-50%,-110px) rotate(var(--rot,0deg)) scale(.96); transition:opacity .22s ease, transform .58s cubic-bezier(.16,1,.3,1); }
.persona-lead.land { opacity:1; transform:translate(calc(-50% + var(--x,0px)), calc(-1 * var(--lift,0px))) rotate(var(--rot,0deg)) scale(1); }
.persona-lead b { padding:1px 6px; border-radius:5px; background:var(--green); color:var(--on-green); font-size:10.5px; }
.persona-copy { padding:16px 6px 0; }
.persona-copy h3 { font-size:17px; }
.persona-copy p { margin:4px 0 0; color:var(--ink3); font-size:13px; }
.persona-copy small { display:block; margin-top:9px; color:var(--ink3); font-size:11.5px; opacity:.75; }
/* AI agent */
.sales-agent-section { display:grid; grid-template-columns:minmax(280px,.9fr) minmax(360px,1.1fr); gap:clamp(42px,7vw,100px); align-items:center; }
.sales-agent-copy .sec-h { max-width:15ch; }
.agent-points { margin-top:26px; display:grid; gap:16px; }
.agent-points li { display:grid; grid-template-columns:145px 1fr; gap:16px; padding-top:14px; border-top:1px solid var(--line); }
.agent-points b { font-size:14px; }
.agent-points span { font-size:13px; color:var(--ink3); line-height:1.5; }
.agent-phone { max-width:480px; width:100%; justify-self:end; border:1px solid var(--line-strong); border-radius:24px; background:var(--surface); box-shadow:var(--shadow-float); overflow:hidden; }
.agent-phone-top { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); background:var(--surface-soft); }
.agent-avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:var(--ink); color:var(--bg); font-size:11px; font-weight:800; }
.agent-phone-top div { display:grid; }
.agent-phone-top small { color:var(--ink3); font-size:11px; }
.agent-phone-top i { margin-left:auto; width:7px; height:7px; border-radius:50%; background:var(--green); }
.agent-chat { height:310px; padding:18px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.agent-bubble { max-width:82%; padding:10px 12px 8px; border-radius:14px; font-size:13px; line-height:1.42; opacity:0; transform:translateY(10px); transition:opacity .35s ease, transform .35s ease; }
.agent-bubble.show { opacity:1; transform:none; }
.agent-bubble.agent { align-self:flex-start; background:var(--surface-strong); border-bottom-left-radius:5px; }
.agent-bubble.client { align-self:flex-end; background:var(--neutral-soft); border:1px solid var(--line); border-bottom-right-radius:5px; }
.agent-bubble time { display:block; margin-top:5px; text-align:right; font-size:9.5px; color:var(--ink3); }
.agent-result { margin:0 18px 18px; border:1px solid var(--line); color:var(--ink2); font-weight:700; opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease; }
.agent-result.show { opacity:1; transform:none; }
.agent-result span { color:var(--green-deep); margin-right:6px; }
/* Deeper trial */
.trial-access { display:grid; grid-template-columns:auto minmax(260px,1.15fr) minmax(210px,.85fr) auto; align-items:center; gap:clamp(22px,3vw,42px); padding:30px 32px; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow-card); }
.trial-access-number { display:flex; align-items:baseline; gap:8px; padding-right:26px; border-right:1px solid var(--line); }
.trial-access-number strong { font-size:64px; line-height:1; letter-spacing:-.07em; }
.trial-access-number span { color:var(--ink3); font-size:13px; font-weight:700; }
.trial-access-copy h2 { margin:8px 0 0; font-size:28px; }
.trial-access-copy > p:last-child { margin:8px 0 0; color:var(--ink3); font-size:13.5px; }
.trial-access-list { display:grid; gap:8px; }
.trial-access-list span { position:relative; padding-left:16px; color:var(--ink2); font-size:13px; transition:opacity .4s ease, transform .4s ease; }
.trial-access.in .trial-access-list span { opacity:1; transform:none; }
.trial-access.in .trial-access-list span:nth-child(2){transition-delay:.09s}.trial-access.in .trial-access-list span:nth-child(3){transition-delay:.18s}
.trial-access-list span::before { content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--neutral-mid); }
/* Pricing without prices */
.pricing-no-price .pcard { min-height:430px; }
.tier-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.tier-top h3 { margin:0; }
.tier-size { font-size:12px; color:var(--ink3); white-space:nowrap; }
.tier-size b { color:var(--ink); font-size:16px; }
.tier-role { margin:16px 0 0; min-height:62px; color:var(--ink3); font-size:13.5px; line-height:1.5; }
.pricing-no-price .plist { margin-top:18px; }
.pricing-no-price .plist li::before { background:var(--neutral-mid); opacity:.65; }
.pricing-no-price .pcard.pop .plist li::before { background:var(--green); opacity:1; }
.all-plans { margin-top:22px; display:flex; flex-wrap:wrap; gap:8px 12px; padding:15px 18px; border-top:1px solid var(--line); color:var(--ink3); font-size:13px; }
.all-plans b { color:var(--ink2); }
.partner-marquee { max-width:1160px; margin:0 auto clamp(64px,8vw,98px); padding:0 28px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; }
.partner-window { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:999px; background:var(--surface); }
.partner-track { width:max-content; display:flex; align-items:center; gap:18px; padding:11px 18px; color:var(--ink3); font-size:13px; white-space:nowrap; animation:partnerRun 20s linear infinite; }
.partner-track strong { color:var(--green-deep); font-size:15px; }
.partner-track i { font-style:normal; opacity:.35; }
@keyframes partnerRun { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.partner-button { flex:none; }
/* Trust */
.trust { display:flex; align-items:center; gap:16px; }
.trust-icon { width:42px; height:42px; flex:none; border-radius:13px; display:grid; place-items:center; background:var(--surface-soft); border:1px solid var(--line); }
.trust-icon span { width:13px; height:16px; border:2px solid var(--neutral-mid); border-radius:3px; position:relative; }
.trust-icon span::before { content:""; position:absolute; left:1px; right:1px; top:-8px; height:8px; border:2px solid var(--neutral-mid); border-bottom:0; border-radius:8px 8px 0 0; }
.trust.in .trust-icon { animation:trustSettle .55s cubic-bezier(.16,1,.3,1) 1; }
@keyframes trustSettle { 0%{transform:translateY(5px);opacity:.4}100%{transform:none;opacity:1} }
/* Launch demo */
.launch-head { max-width:700px; }
.launch-demo { margin-top:34px; border:1px solid var(--line-strong); border-radius:22px; background:var(--surface); padding:clamp(20px,3vw,30px); box-shadow:var(--shadow-float); }
.launch-input-row { display:grid; grid-template-columns:1fr auto; gap:12px; }
.launch-input-shell { min-height:48px; display:flex; align-items:center; gap:10px; padding:0 14px; border:1px solid var(--line); border-radius:13px; background:var(--bg); }
.lock-mark { color:var(--ink3); }
.launch-input-shell input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:14px; }
.launch-progress { height:3px; margin-top:16px; background:var(--surface-strong); border-radius:999px; overflow:hidden; }
.launch-progress i { display:block; width:0; height:100%; background:var(--green); transition:width .55s cubic-bezier(.16,1,.3,1); }
.launch-status { min-height:20px; margin:10px 0 0; color:var(--ink3); font-size:12.5px; }
.launch-results { margin-top:18px; display:grid; grid-template-columns:1.1fr 1fr .46fr 1.15fr; gap:12px; }
.launch-card, .launch-inbox { min-height:150px; padding:15px; border:1px solid var(--line); border-radius:14px; background:var(--bg-elevated); transition:opacity .4s ease, transform .4s ease; }
.launch-card.ready, .launch-inbox.ready { opacity:1; transform:none; }
.launch-card small, .launch-inbox small { display:block; color:var(--ink3); font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.launch-card p { margin:10px 0 0; color:var(--ink2); font-size:13px; line-height:1.5; }
.launch-keywords { margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; }
.launch-keywords span { padding:4px 7px; border-radius:7px; background:var(--surface); border:1px solid var(--line); color:var(--ink2); font-size:11px; opacity:0; transform:translateY(5px); transition:opacity .25s ease, transform .25s ease; }
.launch-keywords span.show { opacity:1; transform:none; }
.launch-score-card { display:flex; flex-direction:column; }
.launch-score-card strong { margin-top:auto; font-size:46px; letter-spacing:-.05em; }
.launch-score-card > span { color:var(--ink3); font-size:11px; }
.launch-inbox-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.launch-inbox-head b { width:24px; height:24px; border-radius:999px; display:grid; place-items:center; background:var(--green); color:var(--on-green); font-size:11px; }
.launch-leads { margin-top:10px; display:grid; gap:7px; }
.demo-lead { display:flex; justify-content:space-between; gap:8px; padding:8px 9px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink2); font-size:10.5px; transition:opacity .35s ease, transform .55s cubic-bezier(.16,1,.3,1); }
.demo-lead.show { opacity:1; transform:none; }
.demo-lead b { color:var(--green-deep); }
.final-slim { margin-top:20px; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; text-align:left; border-radius:16px; }
.final-slim h2 { margin:0; max-width:none; font-size:24px; }
.final-slim p { margin:4px 0 0; max-width:none; font-size:13px; }
.final-slim .btn { flex:none; }
/* Section-level motion */
html.js .compact-proof-head, html.js .sales-agent-copy, html.js .launch-head { opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1); }
html.js .compact-proof-head.in, html.js .sales-agent-copy.in, html.js .launch-head.in { opacity:1; transform:none; }
.faq details { transition:background .2s ease; }
.faq details[open] { background:var(--neutral-soft); }
@media (max-width: 980px) {
.compact-proof-wrap, .sales-agent-section { grid-template-columns:1fr; }
.proof-flow { max-width:760px; }
.agent-phone { justify-self:start; }
.trial-access { grid-template-columns:auto 1fr; }
.trial-access-list { grid-column:2; }
.trial-access > .btn { grid-column:2; justify-self:start; }
.launch-results { grid-template-columns:1fr 1fr; }
}
@media (max-width: 760px) {
.hero h1 { max-width:none; }
.proof-flow { grid-template-columns:1fr; gap:0; }
.proof-arrow { transform:rotate(90deg); justify-self:center; padding:4px 0; }
.personas-grid { grid-template-columns:1fr; gap:38px; }
.persona-card { max-width:390px; margin:0 auto; width:100%; }
.persona-photo { aspect-ratio:1.05/1; }
.sales-agent-section { gap:32px; }
.agent-points li { grid-template-columns:1fr; gap:4px; }
.agent-phone { max-width:none; }
.trial-access { grid-template-columns:1fr; padding:24px 20px; }
.trial-access-number { border-right:0; border-bottom:1px solid var(--line); padding:0 0 18px; }
.trial-access-list, .trial-access > .btn { grid-column:auto; }
.pricing-no-price .pcard { min-height:auto; }
.partner-marquee { grid-template-columns:1fr; padding:0 20px; }
.partner-button { justify-self:start; }
.launch-input-row { grid-template-columns:1fr; }
.launch-input-row .btn { width:100%; }
.launch-results { grid-template-columns:1fr; }
.launch-card, .launch-inbox { min-height:auto; }
.final-slim { align-items:stretch; flex-direction:column; }
.final-slim .btn { width:100%; }
.footer-company address { max-width:34ch; }
}
@media (prefers-reduced-motion: reduce) {
.partner-track { animation:none; }
.persona-lead, .agent-bubble, .agent-result, .launch-progress i, .demo-lead, .proof-step { transition:none; }
}
.footer-company { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); max-width:390px; color:var(--ink3); font-size:12.5px; line-height:1.55; }
.footer-company strong, .footer-company span { display:block; }
.footer-company strong { color:var(--ink2); }
.footer-company address { margin-top:9px; font-style:normal; }
.footer-top { align-items:flex-start; }
.delivery-row { opacity:.72; transition:opacity .35s ease, transform .35s ease; }
.delivery-row.ready { opacity:1; transform:translateY(-1px); }
.lead-signal.lit { border-color:var(--line-strong); }
/* No-JS fallbacks: content stays visible; animation states apply only when JS is active. */
.proof-step { opacity:1; transform:none; }
html.js .proof-flow.reveal:not(.in) .proof-step { opacity:0; transform:translateY(10px); }
.trial-access-list span { opacity:1; transform:none; }
html.js .trial-access.reveal:not(.in) .trial-access-list span { opacity:0; transform:translateX(8px); }
.agent-bubble, .agent-result { opacity:1; transform:none; }
html.js .agent-bubble:not(.show), html.js .agent-result:not(.show) { opacity:0; transform:translateY(10px); }
.launch-card, .launch-inbox { opacity:1; }
html.js .launch-card:not(.ready), html.js .launch-inbox:not(.ready) { opacity:.45; }
.demo-lead { opacity:1; transform:none; }
html.js .demo-lead:not(.show) { opacity:0; transform:translate(55px,-12px) rotate(3deg); }
/* ===== v8-overrides ===== */
/* ======================================================================
XMBoost v8 — ambient premium system
====================================================================== */
:root, html[data-theme="dark"] {
--ambient-gray: rgba(125, 135, 126, .14);
--ambient-green: rgba(88, 116, 91, .13);
--ambient-soft: rgba(168, 178, 169, .055);
--ambient-cursor-opacity: .10;
--cursor-x: 68%;
--cursor-y: 18%;
--orb-a-x: 78%;
--orb-a-y: 15%;
--orb-b-x: 22%;
--orb-b-y: 76%;
--ambient-scale: 1;
}
body { background: var(--bg); }
.page { position:relative; z-index:1; isolation:isolate; background:transparent; }
.ambient-background { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; transition:background-color .45s ease; }
.ambient-background::before { content:""; position:absolute; transform:scale(var(--ambient-scale)); transition:background 1.1s ease, transform 1.1s cubic-bezier(.16,1,.3,1), opacity .6s ease; }
.ambient-background::after { content:""; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; }
section.band, section.band.tint { position:relative; border-top-color:color-mix(in srgb, var(--line) 76%, transparent); }
header {
background:color-mix(in srgb, var(--bg) 70%, transparent);
}
footer { position:relative; z-index:1; backdrop-filter:blur(12px); }
.post-footer-launch {
background:color-mix(in srgb, var(--bg) 72%, transparent) !important;
border-top:1px solid var(--line);
}
/* Hero proof ticker */
.hero-facts {
width:min(100%, 520px); margin-top:18px; overflow:hidden;
-webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hero-facts-track { display:flex; align-items:center; color:var(--ink3); font-size:12.5px; font-weight:650; white-space:nowrap; }
.hero-facts-track span { display:inline-flex; align-items:center; gap:7px; }
.hero-facts-track span i { width:4px; height:4px; border-radius:999px; background:var(--neutral-mid); opacity:.7; }
.hero-facts-track b { font-weight:400; }
@keyframes heroFactsRun { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* Pain-driven live chat */
.examples-pain-head { max-width:720px; }
.examples-pain-head .sec-h { max-width:18ch; }
.missed-layout {
margin-top:36px; display:grid; grid-template-columns:minmax(280px,.76fr) minmax(0,1.24fr);
gap:clamp(34px,6vw,82px); align-items:center;
}
.missed-overline {
margin:0; color:var(--ink3); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.missed-copy h3 { margin:12px 0 0; max-width:18ch; font-size:clamp(24px,3vw,38px); line-height:1.12; letter-spacing:-.035em; }
.missed-stages { margin-top:28px; display:grid; gap:0; }
.missed-stages > div {
display:grid; grid-template-columns:38px 1fr; gap:14px; padding:15px 0;
border-top:1px solid var(--line);
}
.missed-stages > div:last-child { border-bottom:1px solid var(--line); }
.missed-stages > div > span { color:var(--ink3); font-size:11px; font-weight:800; padding-top:2px; }
.missed-stages p { margin:0; }
.missed-stages b { display:block; font-size:14px; }
.missed-stages small { display:block; margin-top:3px; color:var(--ink3); font-size:12.5px; line-height:1.5; }
.missed-conclusion {
margin:20px 0 0; display:flex; align-items:center; gap:9px;
color:var(--ink2); font-size:13px; font-weight:700;
}
.missed-conclusion span { color:var(--green-deep); }
.missed-chat {
border:1px solid var(--line); border-radius:22px; overflow:hidden;
background:color-mix(in srgb, var(--surface) 92%, transparent);
box-shadow:var(--shadow-float);
}
.missed-chat-bar {
display:flex; align-items:center; justify-content:space-between; gap:16px;
padding:15px 18px; border-bottom:1px solid var(--line);
background:color-mix(in srgb, var(--surface-soft) 88%, transparent);
}
.missed-chat-bar > div { display:flex; align-items:center; gap:10px; }
.missed-chat-avatar {
width:32px; height:32px; display:grid; place-items:center; border-radius:10px;
background:var(--neutral-soft); color:var(--ink2); font-size:11px; font-weight:800;
}
.missed-chat-bar p { margin:0; }
.missed-chat-bar b { display:block; font-size:13px; }
.missed-chat-bar small { display:block; color:var(--ink3); font-size:11px; }
.missed-chat-live { display:flex; align-items:center; gap:6px; color:var(--ink3); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.missed-chat-live i { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px var(--green-soft); }
.missed-chat-stream { position:relative; min-height:390px; padding:24px 24px 32px; overflow:hidden; }
.noise-message {
max-width:72%; display:flex; align-items:flex-start; gap:9px; margin-bottom:18px;
opacity:.52; transform:translateZ(0);
}
.noise-message.right { margin-left:auto; flex-direction:row-reverse; }
.noise-message.faded { opacity:.28; }
.noise-message > span { width:22px; height:22px; flex:none; border-radius:50%; background:var(--neutral-soft); border:1px solid var(--line); }
.noise-message p { margin:0; padding:9px 12px; border-radius:13px; background:var(--surface-soft); color:var(--ink3); font-size:12px; line-height:1.45; }
.missed-incoming {
position:absolute; left:24px; right:24px; bottom:28px; z-index:2;
padding:17px 18px; border:1px solid var(--line-strong); border-radius:16px;
background:var(--surface); box-shadow:var(--shadow-card);
opacity:0; transform:translateY(34px); transition:opacity .45s ease, transform .65s cubic-bezier(.16,1,.3,1), filter .4s ease;
}
.missed-incoming.arrive { opacity:1; transform:translateY(0); }
.missed-incoming.missed { opacity:.18; transform:translateY(-152px) scale(.97); filter:grayscale(.55); }
.missed-incoming-top, .missed-incoming-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.missed-category { color:var(--ink3); font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.missed-incoming time { color:var(--ink3); font-size:10.5px; }
.missed-incoming > p { margin:12px 0; color:var(--ink); font-size:16px; line-height:1.46; font-weight:600; }
.missed-state { color:var(--ink3); font-size:11.5px; font-weight:700; }
.missed-incoming.missed .missed-state { color:var(--ink3); }
.missed-incoming-foot b {
min-width:34px; height:26px; display:grid; place-items:center; padding:0 7px;
border-radius:7px; background:var(--green); color:var(--on-green); font-size:12px;
}
.missed-chat-bottom {
display:grid; grid-template-columns:auto 1fr; align-items:center; gap:16px;
padding:12px 18px; border-top:1px solid var(--line); color:var(--ink3); font-size:11.5px;
}
.missed-timeline { height:2px; overflow:hidden; background:var(--line); }
.missed-timeline i { display:block; width:0; height:100%; background:var(--neutral-mid); transition:width 3.5s linear; }
.missed-timeline i.run { width:100%; transition:none; animation:missedProgress 4.2s linear 1; }
@keyframes missedProgress { from{width:0} to{width:100%} }
/* AI-Agent capability list */
.agent-capabilities { margin-top:28px; display:grid; gap:0; counter-reset:agentcap; }
.agent-capability {
display:grid; grid-template-columns:38px 1fr; gap:14px; padding:16px 0;
border-top:1px solid var(--line); position:relative;
}
.agent-capability:last-child { border-bottom:1px solid var(--line); }
.agent-capability-index {
color:var(--ink3); font-size:11px; font-weight:800; padding-top:3px;
transition:color .3s ease, transform .3s ease;
}
.agent-capability b { display:block; font-size:14px; }
.agent-capability p { margin:4px 0 0; color:var(--ink3); font-size:12.8px; line-height:1.5; }
.agent-capability.active .agent-capability-index { transform:translateX(3px); }
.agent-contact { margin-top:22px; }
/* Pricing / partner proximity */
#pricing .head-row .sec-h { max-width:none; }
#pricing .partner-marquee {
max-width:none; margin:18px 0 0; padding:0;
}
#pricing .all-plans { margin-top:18px; }
#pricing .partner-window { border-color:var(--line); background:color-mix(in srgb, var(--surface) 88%, transparent); }
#pricing .partner-track strong { color:var(--ink); }
/* FAQ CTA */
.faq-cta {
margin-top:34px; padding:26px 28px; display:grid; grid-template-columns:minmax(0,1fr) auto;
align-items:center; gap:32px; text-align:left; border-radius:18px;
background:color-mix(in srgb, var(--surface) 90%, transparent);
}
.faq-cta h2 { margin:8px 0 0; max-width:none; font-size:clamp(24px,3vw,34px); }
.faq-cta p { margin:8px 0 0; max-width:68ch; color:var(--ink3); font-size:13.5px; line-height:1.55; }
.faq-cta-label { color:var(--ink3); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.faq-cta .btn { flex:none; }
/* Footer / post-footer */
footer .footer-brand, footer .footer-col, footer .foot { transition-delay:0s; }
footer .footer-col:nth-child(2) { transition-delay:.08s; }
footer .footer-col:nth-child(3) { transition-delay:.16s; }
.post-footer-launch .launch-demo { box-shadow:var(--shadow-card); }
.post-footer-launch .launch-head .eyebrow { color:var(--ink3); }
/* Small section motion cues */
section .sec-h { position:relative; }
section .sec-h::after {
content:""; display:block; width:0; height:1px; margin-top:14px; background:var(--neutral-mid); opacity:.55;
transition:width .8s cubic-bezier(.16,1,.3,1);
}
section .head-row.in .sec-h::after,
section .compact-proof-head.in .sec-h::after,
section .sales-agent-copy.in .sec-h::after,
section .launch-head.in .sec-h::after,
section .examples-pain-head.in .sec-h::after { width:42px; }
.pcard.reveal.in { animation:cardSettle .55s cubic-bezier(.16,1,.3,1) both; }
.pcard.reveal.in:nth-child(2) { animation-delay:.08s; }
.pcard.reveal.in:nth-child(3) { animation-delay:.16s; }
@keyframes cardSettle { from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:translateY(0)} }
@media (max-width:900px) {
.missed-layout { grid-template-columns:1fr; }
.missed-copy h3 { max-width:24ch; }
.faq-cta { grid-template-columns:1fr; }
.faq-cta .btn { justify-self:start; }
}
@media (max-width:640px) {
.hero-facts { width:100%; }
.missed-chat-stream { min-height:350px; padding:20px 16px 28px; }
.missed-incoming { left:16px; right:16px; }
.missed-chat-bottom { grid-template-columns:1fr; gap:8px; }
.faq-cta { padding:22px 20px; }
.faq-cta .btn { width:100%; }
.post-footer-launch .sec-pad { padding-bottom:72px; }
}
@media (pointer:coarse) {
.ambient-background::before { opacity:.72; }
}
@media (prefers-reduced-motion:reduce) {
.ambient-background::before { transition:none; }
.hero-facts-track, .partner-track { animation:none !important; transform:none !important; }
.missed-incoming { opacity:1; transform:none; transition:none; }
.missed-incoming.missed { opacity:1; transform:none; filter:none; }
.missed-timeline i.run { animation:none; width:100%; }
.pcard.reveal.in { animation:none; }
}
/* Mobile min-content containment for the product hero */
@media (max-width:900px) {
.hero .wrap,
.hero-grid,
.hero-copy,
.hero-visual-wrap {
width:100%;
max-width:100%;
min-width:0;
}
.hero-grid { overflow:hidden; }
.hero h1 { width:100%; max-width:11ch; }
.hero-app { width:100%; max-width:100%; min-width:0; }
.hero-app .appwin-body,
.hero-app .appwin-main,
.hero-app .lead-signal,
.hero-app .delivery-row { min-width:0; }
}
@media (max-width:640px) {
.hero h1 { max-width:9.4ch; }
.hero-facts { max-width:100%; }
}
/* ===== base ===== */
/* ======================================================================
XMBoost v9 — stronger ambient, compact language control, merged launch
====================================================================== */
:root, html[data-theme="dark"] {
--ambient-gray: rgba(126, 141, 130, .22);
--ambient-green: rgba(78, 119, 83, .21);
--ambient-soft: rgba(174, 190, 178, .085);
--ambient-cursor-opacity: .18;
}
html[data-theme="light"] {
--ambient-gray: rgba(121, 139, 125, .18);
--ambient-green: rgba(91, 139, 97, .18);
--ambient-soft: rgba(102, 126, 106, .075);
--ambient-cursor-opacity: .15;
}
.ambient-background {
background:
linear-gradient(145deg, color-mix(in srgb, var(--bg) 88%, #839389 12%), var(--bg) 44%, color-mix(in srgb, var(--bg) 89%, #637267 11%));
}
.ambient-background::before {
inset:-18%;
background:
radial-gradient(920px circle at var(--orb-a-x) var(--orb-a-y), var(--ambient-green), transparent 66%),
radial-gradient(840px circle at var(--orb-b-x) var(--orb-b-y), var(--ambient-gray), transparent 68%),
radial-gradient(680px circle at var(--cursor-x) var(--cursor-y), color-mix(in srgb, var(--ambient-green) 72%, var(--ambient-soft)), transparent 68%);
opacity:1;
filter:saturate(1.08);
}
.ambient-background::after { opacity:.22; }
.hero, section.band, footer { position:relative; isolation:isolate; }
.hero::after, section.band::before, footer::before {
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background:radial-gradient(760px circle at var(--cursor-x) var(--cursor-y), color-mix(in srgb, var(--ambient-green) 34%, transparent), transparent 70%);
opacity:.52; transition:opacity .45s ease;
}
.hero > .wrap, section.band > .wrap, footer > .wrap { position:relative; z-index:1; }
section.band, section.band.tint {
background:color-mix(in srgb, var(--bg) 64%, transparent);
backdrop-filter:blur(2px);
}
section.band.tint { background:color-mix(in srgb, var(--bg-elevated) 66%, transparent); }
footer { background:color-mix(in srgb, var(--bg-elevated) 78%, transparent); }
/* Language selector */
.lang-switch { position:relative; flex:none; }
.lang-current {
width:54px; height:44px; display:flex; align-items:center; justify-content:center; gap:5px;
border:1px solid var(--line-strong); border-radius:999px; background:var(--surface); color:var(--ink2);
font:700 12px/1 "Manrope",sans-serif; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.lang-current:hover, .lang-current[aria-expanded="true"] { background:var(--surface-strong); color:var(--ink); border-color:color-mix(in srgb,var(--line-strong) 74%,var(--ink3)); }
.lang-current svg { width:12px; height:12px; transition:transform .2s ease; }
.lang-current[aria-expanded="true"] svg { transform:rotate(180deg); }
.lang-menu {
position:absolute; right:0; top:52px; z-index:80; width:168px; padding:6px;
border:1px solid var(--line-strong); border-radius:14px; background:color-mix(in srgb,var(--surface) 96%,transparent);
box-shadow:var(--shadow-float); backdrop-filter:blur(18px);
}
.lang-menu[hidden] { display:none; }
.lang-menu button {
width:100%; min-height:42px; display:grid; grid-template-columns:32px 1fr; align-items:center; gap:8px;
padding:8px 10px; border:0; border-radius:9px; background:transparent; color:var(--ink2); text-align:left; cursor:pointer;
}
.lang-menu button:hover, .lang-menu button[aria-selected="true"] { background:var(--neutral-soft); color:var(--ink); }
.lang-menu b { font-size:12px; }
.lang-menu span { font-size:12.5px; color:var(--ink3); }
.login-link { order:20; }
.cta-mobile-label { order:21; }
.burger { order:22; }
.theme-toggle { order:18; }
.lang-switch { order:19; }
/* Hero proof */
.hero-facts-track .hero-fact-trial { color:var(--green-deep); font-weight:800; }
.hero-facts-track .hero-fact-trial i { background:var(--green); opacity:1; box-shadow:0 0 0 4px var(--green-soft); }
/* Merged quick launch */
.how-head { max-width:720px; }
.launch-timeline { margin-top:34px; }
.how-launch { margin-top:34px; box-shadow:var(--shadow-card); background:color-mix(in srgb,var(--surface) 92%,transparent); }
.how-launch .launch-input-row { max-width:760px; }
.how-launch .launch-results { margin-top:20px; }
/* Taller lead stacks: cards fill roughly half of each portrait. */
.persona-basket { height:174px; margin:-94px auto 0; }
.persona-stack { inset:0 6px 34px; overflow:visible; }
.persona-basket-front { bottom:0; }
.persona-lead { bottom:9px; }
/* Footer: two navigation columns. */
.footer-links { gap:clamp(42px,7vw,86px); }
.footer-list-separator { height:1px; margin:3px 0; background:var(--line); }
@media (max-width:900px) {
.bar { gap:10px; }
.lang-current { width:46px; height:40px; }
.theme-toggle { width:40px; height:40px; }
.login-link, .cta-mobile-label { display:none !important; }
.footer-links { gap:34px; }
}
@media (max-width:640px) {
.lang-current { width:44px; }
.hero-facts { margin-top:16px; }
.how-launch { padding:18px; }
.persona-basket { height:158px; margin-top:-82px; }
.footer-links { display:grid; grid-template-columns:1fr 1fr; width:100%; }
}
@media (prefers-reduced-motion: reduce) {
.ambient-background::before, .hero::after, section.band::before, footer::before { transition:none; }
}
/* ===== v9-hero-facts-hotfix ===== */
.hero-facts { -webkit-mask-image:none; mask-image:none; }
.hero-facts-track { width:100%; animation:none; justify-content:space-between; gap:8px; }
.hero-facts-track > :nth-child(n+7), .hero-facts-track > :nth-child(6) { display:none; }
.hero-facts-track span { white-space:nowrap; }
@media (max-width:640px) {
.hero-facts-track { gap:5px; font-size:10.5px; letter-spacing:-.01em; }
.hero-facts-track b { font-size:9px; }
}
/* ===== v10-redesign ===== */
/* ===== v10: hero real sidebar (always ink) ===== */
.appwin-body{align-items:stretch;}
.appwin-side-real{display:flex;flex-direction:column;width:158px;min-width:158px;background:#0e0f0e;color:#c7c9be;border-right:1px solid #23251f;padding:0;gap:0;}
.appwin-side-real .side-top{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border-bottom:1px solid #23251f;}
.appwin-side-real .side-logo{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#f2f2ec;}
.appwin-side-real .side-logo-dot{width:6px;height:6px;border-radius:50%;background:#7bd850;box-shadow:0 0 0 3px rgba(123,216,80,.16);}
.appwin-side-real .side-live{display:inline-flex;align-items:center;gap:4px;font-size:7.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7bd850;background:#182a10;padding:3px 6px;border-radius:999px;}
.appwin-side-real .side-live-dot{width:5px;height:5px;border-radius:50%;background:#7bd850;animation:v10SidePulse 1.7s ease-in-out infinite;}
@keyframes v10SidePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}
.appwin-side-real .side-nav{display:flex;flex-direction:column;gap:2px;padding:9px 8px;flex:1;}
.appwin-side-real .side-link{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;font-size:11px;font-weight:600;color:#c7c9be;line-height:1;}
.appwin-side-real .side-link svg{width:14px;height:14px;flex:none;opacity:.92;}
.appwin-side-real .side-link.active{background:#1a2a12;color:#7bd850;}
.appwin-side-real .side-balance{margin:8px;padding:9px 11px;border-radius:12px;background:#1a2a12;}
.appwin-side-real .side-balance-row{display:flex;justify-content:space-between;font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7bd850;}
.appwin-side-real .side-balance-row span:last-child{color:#9a9d90;}
.appwin-side-real .side-balance strong{display:block;margin-top:2px;font-size:15px;font-weight:800;color:#f2f2ec;letter-spacing:-.01em;}
.appwin-main{min-width:0;}
/* ===== v10: hero scrolling lead feed ===== */
.hero-feed{position:relative;margin-top:12px;height:216px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 11%,#000 85%,transparent);mask-image:linear-gradient(180deg,transparent,#000 11%,#000 85%,transparent);}
.hero-feed-track{display:flex;flex-direction:column;gap:8px;will-change:transform;}
.hero-feed.playing .hero-feed-track{animation:v10Feed 26s linear infinite;}
.hero-feed:hover .hero-feed-track{animation-play-state:paused;}
@keyframes v10Feed{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.hero-feed-lead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px 11px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 10px 24px -22px rgba(0,0,0,.5);}
.hero-feed-av{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:9.5px;font-weight:800;color:#fff;letter-spacing:.02em;}
.av-ai{background:linear-gradient(135deg,#3aa0ff,#7b5bff);}.av-dev{background:linear-gradient(135deg,#f0883e,#e5484d);}.av-mkt{background:linear-gradient(135deg,#e5484d,#e93d82);}.av-lead{background:linear-gradient(135deg,#30a46c,#68df37);}.av-svc{background:linear-gradient(135deg,#8e8c99,#5b5966);}.av-crm{background:linear-gradient(135deg,#5b5bd6,#3aa0ff);}.av-hr{background:linear-gradient(135deg,#12a594,#30a46c);}.av-web3{background:linear-gradient(135deg,#ffc53d,#f0883e);}.av-smm{background:linear-gradient(135deg,#e93d82,#7b5bff);}
.hero-feed-body{min-width:0;}
.hero-feed-chip{display:block;font-size:8.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--green-deep);margin-bottom:2px;}
.hero-feed-msg{margin:0;font-size:11.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hero-feed-score{font-size:13px;font-weight:800;color:var(--green-deep);background:var(--green-soft);border-radius:8px;padding:4px 8px;letter-spacing:-.02em;}
/* ===== v10: hero facts — bigger + moving shine ===== */
.hero-facts{position:relative;overflow:hidden;margin-top:22px;}
.hero-facts-track{font-size:clamp(13px,1.35vw,17px)!important;font-weight:600!important;gap:clamp(6px,.8vw,13px)!important;row-gap:8px!important;line-height:1.25;flex-wrap:wrap!important;justify-content:flex-start!important;}
.hero-facts-track i{transform:scale(1.35);}
.hero-facts-track b{font-size:.8em;opacity:.5;}
.hero-facts-track .hero-fact-trial{color:var(--green-deep);}
.hero-facts::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-35%;width:13%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.26),transparent);transform:skewX(-16deg);pointer-events:none;animation:v10FactShine 4.6s ease-in-out infinite;}
@keyframes v10FactShine{0%{left:-35%}58%,100%{left:135%}}
:root[data-theme="light"] .hero-facts::after{background:linear-gradient(105deg,transparent,rgba(91,199,45,.32),transparent);}
@media (max-width:640px){.hero-facts-track{font-size:12px!important;gap:6px!important;}}
@media (prefers-reduced-motion:reduce){.hero-facts::after{animation:none;display:none;}}
/* ===== v10: 3-step timeline cyclic highlight ===== */
.tl-step .tl-node{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease,background .45s ease,color .45s ease;}
.tl-step.tl-current .tl-node{transform:scale(1.16);background:var(--green);color:#04120a;box-shadow:0 0 0 6px color-mix(in srgb,var(--green) 20%,transparent),0 12px 28px -10px var(--green);}
.tl-step.tl-current .tl-body h3{color:var(--green-deep);}
.tl-step.tl-current .tl-frag{border-color:color-mix(in srgb,var(--green) 45%,var(--line-strong));background:var(--green-soft);color:var(--green-deep);}
/* ===== v10: score scale animated sweep (dim → bright green, looping) ===== */
@media (prefers-reduced-motion:no-preference){
.score-legend .score-bar{position:relative;overflow:hidden;}
.score-legend .score-bar::after{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;border-radius:inherit;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--green) 88%,#fff),transparent);mix-blend-mode:screen;pointer-events:none;animation:v10ScoreSweep 1.5s linear infinite;}
}
@keyframes v10ScoreSweep{0%{transform:translateX(-120%)}100%{transform:translateX(360%)}}
:root[data-theme="light"] .score-legend .score-bar::after{mix-blend-mode:multiply;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--green) 60%,#0a5),transparent);}
/* ===== v10: lead card celebration (confetti + banner) ===== */
#leadShell{position:relative;}
.celebrate-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:30;border-radius:inherit;}
.confetti-piece{position:absolute;top:-14px;width:8px;height:13px;border-radius:2px;opacity:0;will-change:transform,opacity;}
.celebrate-banner{position:absolute;left:50%;top:16px;transform:translate(-50%,-16px) scale(.92);background:var(--green);color:#04120a;font-weight:800;font-size:13px;padding:10px 18px;border-radius:999px;box-shadow:0 16px 40px -14px var(--green);opacity:0;transition:opacity .32s ease,transform .32s cubic-bezier(.16,1,.3,1);z-index:32;white-space:nowrap;pointer-events:none;}
.celebrate-banner.show{opacity:1;transform:translate(-50%,0) scale(1);}
/* ===== v10: personas — speaking (open mouth) on hover ===== */
.persona-speak{position:absolute;left:50%;top:14px;transform:translate(-50%,-8px) scale(.88);display:inline-flex;align-items:center;gap:8px;padding:7px 12px;background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;box-shadow:var(--shadow-card);font-size:11px;font-weight:700;color:var(--ink);white-space:nowrap;opacity:0;transition:opacity .28s ease,transform .28s cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:6;}
.persona-speak::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:var(--surface);border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);transform:translateX(-50%) rotate(45deg);}
.persona-speak .mouth{width:15px;height:4px;border-radius:0 0 12px 12px;background:#d64b4b;flex:none;}
.persona-card:hover .persona-speak,.persona-card:focus-visible .persona-speak,.persona-card.active .persona-speak{opacity:1;transform:translate(-50%,0) scale(1);}
.persona-card:hover .persona-speak .mouth,.persona-card:focus-visible .persona-speak .mouth,.persona-card.active .persona-speak .mouth{animation:v10Talk .42s ease-in-out infinite;}
@keyframes v10Talk{0%,100%{height:3px}50%{height:11px}}
@media (prefers-reduced-motion:reduce){.persona-speak .mouth{animation:none!important;height:8px;}}
@media (max-width:600px){
.appwin-side-real{width:132px;min-width:132px;}
.appwin-side-real .side-link{font-size:10px;gap:6px;padding:6px 7px;}
.hero-feed{height:180px;}
}
/* ===== v11-redesign ===== */
/* ===== v11: tighter section spacing ===== */
.sec-pad{ padding-top:clamp(46px,5.4vw,78px) !important; padding-bottom:clamp(46px,5.4vw,78px) !important; }
@media (max-width:760px){ .sec-pad{ padding-top:42px !important; padding-bottom:42px !important; } }
/* ===== v11: timeline cumulative lit (green, persistent) ===== */
.tl-step .tl-node{ transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,background .4s ease,color .4s ease; }
.tl-step .tl-body h3{ transition:color .4s ease; }
.tl-step .tl-frag{ transition:background .4s ease,border-color .4s ease,color .4s ease; }
.tl-step.tl-lit .tl-node{ background:var(--green); color:#04120a; box-shadow:0 0 0 5px color-mix(in srgb,var(--green) 18%,transparent),0 10px 26px -10px var(--green); }
.tl-step.tl-lit .tl-body h3{ color:var(--green-deep); }
.tl-step.tl-lit .tl-frag{ border-color:color-mix(in srgb,var(--green) 45%,var(--line-strong)); background:color-mix(in srgb,var(--green) 16%,var(--surface)); color:var(--green-deep); }
.tl-step.tl-pop .tl-node{ transform:scale(1.17); }
.launch-timeline .tl-line-fill{ transition:width .55s cubic-bezier(.16,1,.3,1); }
/* ===== v11: "Не парсер. Канал продаж." — full width + animated ===== */
.compact-proof-wrap{ grid-template-columns:1fr !important; gap:clamp(26px,3vw,44px) !important; justify-items:center; text-align:center; }
.compact-proof-head .sec-h{ max-width:none !important; }
.compact-proof-head{ max-width:640px; }
.proof-flow{ width:100%; max-width:1000px; }
.proof-flow .proof-step{ padding:20px 20px; transition:border-color .45s ease,background .45s ease,box-shadow .45s ease,transform .45s ease; }
.proof-flow .proof-arrow{ transition:color .4s ease,transform .4s ease; }
.proof-flow .proof-step.lit{ border-color:color-mix(in srgb,var(--green) 55%,var(--line-strong)); background:color-mix(in srgb,var(--green) 14%,var(--surface)); box-shadow:0 14px 34px -18px var(--green); transform:translateY(-3px); }
.proof-flow .proof-step.lit .proof-index{ color:var(--green-deep); }
.proof-flow .proof-step.lit b{ color:var(--ink); }
.proof-flow .proof-arrow.lit{ color:var(--green); transform:scale(1.25); }
@media (max-width:900px){ .compact-proof-wrap{ text-align:left; justify-items:stretch; } }
/* ===== v11: AI-agent capabilities — sequential "press" to green ===== */
.agent-capability{ transition:background .35s ease,border-radius .35s ease,transform .18s ease; border-radius:12px; padding-left:6px; }
.agent-capability.active{ background:color-mix(in srgb,var(--green) 9%,transparent); }
.agent-capability.active .agent-capability-index{ color:var(--green-deep); }
.agent-capability.active b{ color:var(--ink); }
.agent-capability.press{ transform:scale(.975); }
/* ===== v11: AI-agent phone → iPhone frame + Telegram chat ===== */
.agent-phone{ max-width:344px !important; width:100% !important; justify-self:end; border:0 !important; border-radius:46px !important; background:#0a0a0c !important; padding:11px 11px 12px !important; box-shadow:0 40px 90px -34px rgba(0,0,0,.8),0 0 0 2px #26262b,0 0 0 6px #131316 !important; position:relative; overflow:visible !important; }
.agent-phone::before{ content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%); width:104px; height:28px; background:#000; border-radius:16px; z-index:8; }
.agent-phone::after{ content:""; position:absolute; bottom:17px; left:50%; transform:translateX(-50%); width:120px; height:5px; border-radius:3px; background:rgba(255,255,255,.6); z-index:8; }
.agent-phone > *{ position:relative; z-index:2; }
.agent-phone-top{ border-radius:34px 34px 0 0 !important; padding:34px 16px 12px !important; background:linear-gradient(180deg,#517da8,#5b8bb8) !important; border-bottom:0 !important; color:#fff; }
:root[data-theme="light"] .agent-phone-top{ background:linear-gradient(180deg,#527ea9,#6296c4) !important; }
.agent-phone-top .agent-avatar{ background:linear-gradient(135deg,#30a46c,#68df37); color:#04120a; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; }
.agent-phone-top b{ color:#fff !important; font-size:13.5px; }
.agent-phone-top small{ color:rgba(255,255,255,.8) !important; }
.agent-phone-top i{ background:#8fe36b !important; box-shadow:0 0 0 3px rgba(143,227,107,.25); }
.agent-chat{ height:326px !important; padding:16px 14px !important; background:#cfd9e3 !important; background-image:radial-gradient(rgba(255,255,255,.4) 1px,transparent 1px); background-size:16px 16px; }
:root[data-theme="dark"] .agent-chat{ background:#0e1621 !important; background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px); }
.agent-bubble{ box-shadow:0 1px 1px rgba(0,0,0,.12); border-radius:14px !important; }
.agent-bubble.agent{ background:#fff !important; color:#14181d !important; border:0 !important; border-bottom-left-radius:5px !important; }
.agent-bubble.client{ background:#e7fdcf !important; color:#1c2b16 !important; border:0 !important; border-bottom-right-radius:5px !important; }
:root[data-theme="dark"] .agent-bubble.agent{ background:#182430 !important; color:#e7edf3 !important; }
:root[data-theme="dark"] .agent-bubble.client{ background:#2b5136 !important; color:#e6f6d9 !important; }
.agent-bubble time{ color:rgba(0,0,0,.42) !important; }
:root[data-theme="dark"] .agent-bubble time{ color:rgba(255,255,255,.4) !important; }
.agent-result{ margin:2px 12px 20px !important; align-self:center; background:rgba(0,0,0,.42) !important; color:#fff !important; border-radius:999px; padding:6px 12px; font-size:11px; backdrop-filter:blur(4px); }
@media (max-width:900px){ }
/* ===== v11: metallic pricing cards ===== */
.pricing-no-price .pcard[data-tier]{ position:relative; overflow:hidden; border:0; color:#1c2027; box-shadow:0 22px 54px -26px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.65); }
.pcard[data-tier="silver"]{ background:linear-gradient(135deg,#f6f7f9 0%,#c9cdd4 24%,#eef0f3 46%,#adb2bb 70%,#dee1e6 100%); }
.pcard[data-tier="gold"]{ background:linear-gradient(135deg,#fdf3cb 0%,#e4bf5a 22%,#f8ecb2 46%,#c89f30 70%,#f3df95 100%); }
.pcard[data-tier="platinum"]{ background:linear-gradient(135deg,#f3f5f9 0%,#ccd2dd 22%,#ffffff 47%,#b4bcca 70%,#e4e9f1 100%); }
.pcard[data-tier] h3,.pcard[data-tier] .tier-size,.pcard[data-tier] .tier-role,.pcard[data-tier] .plist li{ color:#1c2027 !important; }
.pcard[data-tier] .tier-size b,.pcard[data-tier] .tier-size{ color:#0c0e12 !important; }
.pcard[data-tier] .plist li::before{ background:#2b7a1e !important; opacity:1 !important; }
.pcard[data-tier] .plist li{ opacity:.94; }
.pcard.pop::before{ display:none !important; }
.pcard[data-tier]::after{ content:""; position:absolute; top:-60%; left:-45%; width:34%; height:220%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.9),transparent); transform:rotate(9deg); pointer-events:none; animation:v11MetalShine 4.6s ease-in-out infinite; }
.pcard[data-tier="gold"]::after{ background:linear-gradient(105deg,transparent,rgba(255,251,224,.95),transparent); }
.pcard[data-tier="silver"]::after{ animation-delay:0s; }
.pcard[data-tier="gold"]::after{ animation-delay:.55s; }
.pcard[data-tier="platinum"]::after{ animation-delay:1.15s; }
@keyframes v11MetalShine{ 0%{ left:-45%; } 55%,100%{ left:135%; } }
.badge-best{ display:inline-block; align-self:flex-start; background:#141414; color:#fff; padding:6px 13px; border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; box-shadow:0 8px 22px -8px rgba(0,0,0,.5); }
.pcard[data-tier] .btn-primary{ position:relative; z-index:3; }
@media (prefers-reduced-motion:reduce){ .pcard[data-tier]::after{ animation:none; display:none; } }
/* ===== v11: celebrate banner ×3 ===== */
.celebrate-banner{ font-size:clamp(18px,3.2vw,29px) !important; font-weight:800; padding:22px 34px !important; border-radius:22px !important; top:22px !important; max-width:90% !important; white-space:normal !important; text-align:center; line-height:1.22; box-shadow:0 30px 72px -18px var(--green) !important; }
/* ===== v11: trial — blinking green dots ===== */
@media (prefers-reduced-motion:no-preference){
#trial .trial-access-list span::before{ animation:v11Blink 1.8s ease-in-out infinite; }
#trial .trial-access-list span:nth-child(2)::before{ animation-delay:.3s; }
#trial .trial-access-list span:nth-child(3)::before{ animation-delay:.6s; }
#trial .eyebrow .dot{ animation:v11Blink 1.8s ease-in-out infinite; }
}
@keyframes v11Blink{ 0%,100%{ background:var(--neutral-mid); box-shadow:none; } 50%{ background:var(--green); box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 22%,transparent); } }
/* ===== v11: personas — real open-mouth via stacked photo (talking) ===== */
.persona-photo-alt{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; object-position:center 20%; filter:saturate(.95) contrast(1.03); opacity:0; transition:transform .45s cubic-bezier(.16,1,.3,1); z-index:2; }
.persona-card:hover .persona-photo-alt,.persona-card:focus-visible .persona-photo-alt,.persona-card.active .persona-photo-alt{ transform:scale(1.018); animation:v11Talk .46s ease-in-out infinite; }
@keyframes v11Talk{ 0%,100%{ opacity:0; } 50%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .persona-card:hover .persona-photo-alt,.persona-card.active .persona-photo-alt{ animation:none; opacity:1; } }
.persona-status{ z-index:3; }
/* ===== v11: footer Telegram buttons ===== */
.footer-social{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.foot-social-btn{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:11px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink2); font-size:13px; font-weight:700; transition:border-color .2s,color .2s,transform .2s; }
.foot-social-btn svg{ width:16px; height:16px; color:#2ca5e0; }
.foot-social-btn:hover{ border-color:#2ca5e0; color:var(--ink); transform:translateY(-1px); }
/* ===== v11: floating support widget ===== */
.support-widget{ position:fixed; right:20px; bottom:20px; z-index:200; display:flex; flex-direction:column; align-items:flex-end; gap:14px; }
.support-fab{ width:58px; height:58px; border-radius:50%; border:0; cursor:pointer; background:var(--green); color:#04120a; box-shadow:0 18px 40px -12px color-mix(in srgb,var(--green) 70%,transparent); display:grid; place-items:center; position:relative; transition:transform .2s ease; }
.support-fab:hover{ transform:scale(1.06); }
.support-fab svg{ width:26px; height:26px; position:absolute; transition:opacity .22s ease,transform .22s ease; }
.support-fab .i-x{ opacity:0; transform:rotate(-90deg); }
.support-widget.open .support-fab .i-chat{ opacity:0; transform:rotate(90deg); }
.support-widget.open .support-fab .i-x{ opacity:1; transform:rotate(0); }
.support-panel{ width:344px; max-width:calc(100vw - 40px); border-radius:20px; overflow:hidden; background:var(--surface); border:1px solid var(--line-strong); box-shadow:0 34px 80px -26px rgba(0,0,0,.55); display:flex; flex-direction:column; transform-origin:bottom right; animation:v11PanelIn .26s cubic-bezier(.16,1,.3,1); }
.support-panel[hidden]{ display:none; }
@keyframes v11PanelIn{ from{ opacity:0; transform:translateY(12px) scale(.96); } to{ opacity:1; transform:none; } }
.support-head{ display:flex; align-items:center; gap:10px; padding:13px 14px; background:var(--surface-soft); border-bottom:1px solid var(--line); }
.support-ava{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,#30a46c,#68df37); color:#04120a; font-weight:800; font-size:13px; }
.support-head-info{ display:grid; }
.support-head-info b{ font-size:13.5px; }
.support-head-info small{ display:flex; align-items:center; gap:5px; font-size:11px; color:var(--ink3); }
.support-live-dot{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 20%,transparent); }
.support-close{ margin-left:auto; background:none; border:0; color:var(--ink3); font-size:15px; cursor:pointer; padding:4px 6px; line-height:1; }
.support-close:hover{ color:var(--ink); }
.support-body{ padding:16px 14px; max-height:min(46vh, 360px); overflow-y:auto; }
.support-msg{ background:var(--surface-strong); border-radius:14px; border-bottom-left-radius:5px; padding:11px 13px; font-size:13px; line-height:1.5; color:var(--ink); white-space:pre-wrap; }
.support-body > .support-msg + .support-msg{ margin-top:8px; }
.support-msg-mine{ background:var(--green); color:#04120a; border-bottom-left-radius:14px; border-bottom-right-radius:5px; margin-left:auto; max-width:85%; width:fit-content; }
.support-typing{ color:var(--ink3); font-style:italic; }
.support-foot{ padding:12px 14px; border-top:1px solid var(--line); display:grid; gap:9px; }
.support-input{ width:100%; padding:10px 12px; border-radius:11px; border:1px solid var(--line-strong); background:var(--bg-elevated); color:var(--ink); font-size:13px; }
.support-input::placeholder{ color:var(--ink3); }
.support-human{ display:inline-flex; justify-content:center; align-items:center; gap:6px; padding:10px; border-radius:11px; background:var(--green); color:#04120a; font-weight:800; font-size:13px; }
@media (max-width:900px){ .support-widget{ bottom:78px; } }
@media (max-width:520px){ .support-widget{ right:14px; } .support-fab{ width:52px; height:52px; } }
/* ===== v12-redesign ===== */
/* ===== v12: Platinum aligned & same size as Silver/Gold (badge floats, no elevation) ===== */
.pricing-no-price .pcard[data-tier]{ padding:48px 24px 26px !important; }
.badge-best{ position:absolute !important; top:15px; left:24px; margin:0 !important; z-index:4; }
.pcard.pop{ transform:none !important; order:0 !important; box-shadow:0 22px 54px -26px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.65) !important; }
.pcard.pop:hover{ transform:translateY(-5px) !important; }
@media (min-width:901px){ .pcard.pop{ transform:none !important; } .pcard.pop:hover{ transform:translateY(-5px) !important; } }
/* ===== v12: realistic iPhone 17 frame ===== */
.agent-phone{ max-width:300px !important; width:100% !important; aspect-ratio:300/620; display:flex !important; padding:10px !important; border:0 !important; border-radius:58px !important; overflow:visible !important; position:relative; justify-self:end; background:linear-gradient(150deg,#55555b 0%,#232327 26%,#0b0b0d 56%,#33333a 100%) !important; box-shadow:0 50px 100px -34px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.5) !important; }
.agent-phone::before, .agent-phone::after{ display:none !important; }
.phone-island{ position:absolute; top:19px; left:50%; transform:translateX(-50%); width:98px; height:30px; background:#000; border-radius:20px; z-index:12; box-shadow:0 1px 3px rgba(0,0,0,.6); }
.phone-screen{ position:relative; flex:1; width:100%; border-radius:48px; overflow:hidden; display:flex; flex-direction:column; background:#cfd9e3; }
:root[data-theme="dark"] .phone-screen{ background:#0e1621; }
.phone-statusbar{ display:flex; align-items:center; justify-content:space-between; padding:15px 24px 5px; font-size:13px; font-weight:700; color:#fff; }
.phone-statusbar, .agent-phone-top{ background:#17212b !important; }
:root[data-theme="light"] .phone-statusbar, :root[data-theme="light"] .agent-phone-top{ background:#5b8bb8 !important; }
.agent-phone-top{ border-radius:0 !important; padding:9px 16px 12px !important; border-bottom:0 !important; }
.phone-statusbar .sb-right{ display:inline-flex; align-items:center; gap:6px; }
.phone-statusbar .sb-i{ width:17px; height:12px; }
.phone-statusbar .sb-batt{ width:24px; height:12px; border:1.5px solid currentColor; border-radius:3.5px; position:relative; display:inline-flex; align-items:center; padding:1.6px; box-sizing:border-box; }
.phone-statusbar .sb-batt i{ display:block; width:72%; height:100%; background:currentColor; border-radius:1px; }
.phone-statusbar .sb-batt::after{ content:""; position:absolute; right:-3px; top:50%; transform:translateY(-50%); width:2px; height:5px; background:currentColor; border-radius:0 1px 1px 0; }
.agent-chat{ flex:1 !important; height:auto !important; }
.agent-result{ margin:2px 12px 24px !important; }
.phone-screen::after{ content:""; position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:112px; height:5px; border-radius:3px; background:rgba(0,0,0,.32); z-index:6; }
:root[data-theme="dark"] .phone-screen::after{ background:rgba(255,255,255,.4); }
@media (max-width:900px){ .agent-phone{ justify-self:center; margin:0 auto; } }
/* ===== v13-redesign ===== */
/* ===== v13: restore horizontal container padding (mobile left-edge bug — .sec-pad shorthand was zeroing it) ===== */
.wrap{ padding-left:28px !important; padding-right:28px !important; }
@media (max-width:640px){ .wrap{ padding-left:20px !important; padding-right:20px !important; } }
/* ===== v13: launch demo — fixed-size box, never grows/collapses ===== */
.launch-results{ grid-auto-rows:176px; }
.launch-card, .launch-inbox{ min-height:0 !important; height:176px !important; overflow:hidden !important; opacity:1 !important; transform:none !important; }
.launch-leads{ overflow:hidden; }
@media (max-width:640px){ .launch-results{ grid-auto-rows:168px; } .launch-card, .launch-inbox{ height:168px !important; } }
/* ===== v13: narrower metallic shine (less harsh) ===== */
.pcard[data-tier]::after{ width:22% !important; background:linear-gradient(105deg,transparent,rgba(255,255,255,.72),transparent) !important; }
.pcard[data-tier="gold"]::after{ background:linear-gradient(105deg,transparent,rgba(255,250,224,.8),transparent) !important; }
/* ===== Сравнение с ручным мониторингом ===== */
.mvs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px;align-items:start;}
.mvs-col{border:1px solid var(--line);border-radius:18px;padding:24px 22px;background:var(--surface);display:flex;flex-direction:column;gap:14px;}
.mvs-col.manual{border-color:rgba(200,80,70,.30);background:linear-gradient(160deg,rgba(200,80,70,.07),transparent);}
.mvs-col.ours{border-color:rgba(91,199,45,.38);background:linear-gradient(160deg,var(--green-soft),transparent);}
.mvs-cap{font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);}
.mvs-cost{font-weight:800;font-size:clamp(28px,5vw,38px);letter-spacing:-.022em;line-height:1;font-variant-numeric:tabular-nums;}
.mvs-col.manual .mvs-cost{color:#D2685C;}
:root[data-theme="light"] .mvs-col.manual .mvs-cost{color:#B4433A;}
.mvs-col.ours .mvs-cost{color:var(--green-deep);}
.mvs-why{color:var(--ink3);font-size:13.5px;line-height:1.45;margin:-8px 0 0;}
.mvs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.mvs-list li{display:flex;gap:11px;padding:11px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.46;color:var(--ink2);}
.mvs-list li:first-child{border-top:none;padding-top:0;}
.mvs-list li b{color:var(--ink);font-weight:800;}
.mvs-mk{flex:none;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;margin-top:2px;}
.mvs-mk.no{background:#D2685C;color:var(--bg);}
:root[data-theme="light"] .mvs-mk.no{background:#B4433A;color:#fff;}
.mvs-mk.yes{background:var(--green);color:var(--on-green);}
.mvs-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:20px;}
.mvs-fact{background:var(--surface);padding:18px 16px;display:flex;flex-direction:column;gap:6px;}
.mvs-fact .n{font-weight:800;font-size:clamp(20px,2.4vw,26px);letter-spacing:-.015em;line-height:1;font-variant-numeric:tabular-nums;}
.mvs-fact .l{font-size:12px;color:var(--ink3);line-height:1.38;}
.mvs-note{font-size:12.5px;color:var(--ink3);line-height:1.5;margin-top:14px;font-style:italic;}
.mvs-more{display:none;}
@media (max-width:860px){
.mvs{grid-template-columns:1fr;gap:14px;margin-top:20px;}
.mvs-col{padding:20px 17px;}
.mvs-facts{grid-template-columns:1fr 1fr;}
.mvs-list li.mvs-extra{display:none;}
.mvs-list.open li.mvs-extra{display:flex;}
.mvs-more{display:block;align-self:flex-start;background:none;border:1px solid var(--line-strong);color:var(--ink2);
border-radius:999px;padding:8px 16px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;}
.mvs-more:hover{border-color:var(--green);color:var(--green-deep);}
}
/* ===== Калькулятор потока заявок ===== */
.fcalc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px;}
.fcalc-field label{display:block;font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px;}
.fcalc-field select{width:100%;-webkit-appearance:none;appearance:none;background:var(--surface-strong);color:var(--ink);
border:1px solid var(--line-strong);border-radius:13px;padding:15px 42px 15px 15px;font:inherit;font-size:16px;font-weight:600;line-height:1.3;cursor:pointer;
background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
background-position:calc(100% - 21px) 23px,calc(100% - 15px) 23px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;}
.fcalc-field select:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.fcalc-out{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px;}
.fcalc-res{border:1px solid var(--line);border-radius:16px;padding:22px 20px;background:var(--surface);display:flex;flex-direction:column;gap:8px;}
.fcalc-res.hero{border-color:rgba(91,199,45,.38);background:linear-gradient(160deg,var(--green-soft),transparent);}
.fcalc-res .k{font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);}
.fcalc-res .v{font-weight:800;font-size:clamp(30px,4.4vw,40px);letter-spacing:-.024em;line-height:1;font-variant-numeric:tabular-nums;}
.fcalc-res.hero .v{color:var(--green-deep);}
.fcalc-res .d{font-size:13px;color:var(--ink3);line-height:1.46;}
.fcalc-mod{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;background:var(--surface-strong);
border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:11.5px;font-weight:700;color:var(--ink3);}
.fcalc-mod::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green);}
.fcalc-note{font-size:12.5px;color:var(--ink3);line-height:1.5;margin-top:16px;font-style:italic;}
@media (max-width:760px){
.fcalc,.fcalc-out{grid-template-columns:1fr;gap:13px;}
.fcalc{margin-top:20px;}
.fcalc-res{padding:19px 17px;}
}
/* ===== picture-wrappers ===== */
picture { display: contents; }
/* ===== form-typography ===== */
input, textarea, select, button {
font: inherit;
color: inherit;
}
/* ===== offscreen-animation-pause =====
Класс проставляет app-скрипт по IntersectionObserver: секция за пределами
экрана не тратит кадры на декоративную анимацию. */
.is-offscreen,
.is-offscreen *,
.is-offscreen *::before,
.is-offscreen *::after {
animation-play-state: paused !important;
}
/* Каскад появления — одноразовая анимация с fill-mode: backwards.
Поставленная на паузу, она застыла бы в кадре «from», то есть в
прозрачности ноль, и секция осталась бы пустой. Пауза касается только
бесконечной декоративной анимации. */
.is-offscreen .reveal.in > * {
animation-play-state: running !important;
}
/* ===== tap-targets =====
На телефоне зона нажатия доводится до 44×44 без изменения вида кнопки:
растягивается невидимая область, сама иконка остаётся прежнего размера. */
@media (max-width: 700px) {
.theme-toggle,
.burger,
.icon-btn,
.lang-current,
.mvs-more,
.foot-social-btn,
.footer-email {
position: relative;
}
.theme-toggle::after,
.burger::after,
.icon-btn::after,
.lang-current::after,
.mvs-more::after,
.foot-social-btn::after,
.footer-email::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: max(100%, 44px);
height: max(100%, 44px);
transform: translate(-50%, -50%);
}
}
/* ===== mobile-hero-headline =====
Ограничение в 11ch рассчитано на широкий экран; на телефоне оно ломает
заголовок на лишнюю строку и уводит продукт за сгиб. */
@media (max-width: 700px) {
.hero h1 { max-width: none; }
.hero { padding-top: 28px; }
}
/* ============================================================================
Движение: пружины вместо кривых постоянной длительности
----------------------------------------------------------------------------
Значения по методике Apple (damping ratio + response) из скилла apple-design:
критически задемпфированная пружина, damping 1.0, response 0.4 — приходит
к цели без перелёта. Ручного подбора cubic-bezier здесь нет: кривая
посчитана из физики и записана через linear().
========================================================================== */
:root {
--spring: linear(0, 0.0229, 0.0788, 0.1531, 0.236, 0.3206, 0.4028, 0.48, 0.5508, 0.6144, 0.6709, 0.7205, 0.7636, 0.8009, 0.8328, 0.86, 0.8831, 0.9026, 0.9191, 0.9329, 0.9444, 0.9541, 0.9621, 0.9688, 0.9743, 0.9789, 1);
--spring-duration: 380ms;
}
html.js .reveal {
transition:
opacity var(--spring-duration) var(--spring),
transform var(--spring-duration) var(--spring);
}
/* Стаггер внутри групп: элементы входят каскадом, а не одной плитой.
Шаг небольшой — каскад должен читаться, но не заставлять ждать. */
html.js .reveal.in > * { animation: revealChild var(--spring-duration) var(--spring) backwards; }
html.js .reveal.in > *:nth-child(1) { animation-delay: 0ms; }
html.js .reveal.in > *:nth-child(2) { animation-delay: 45ms; }
html.js .reveal.in > *:nth-child(3) { animation-delay: 90ms; }
html.js .reveal.in > *:nth-child(4) { animation-delay: 135ms; }
html.js .reveal.in > *:nth-child(5) { animation-delay: 180ms; }
html.js .reveal.in > *:nth-child(6) { animation-delay: 215ms; }
html.js .reveal.in > *:nth-child(n+7) { animation-delay: 240ms; }
@keyframes revealChild {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
/* Смена темы: резкий скачок яркости во весь экран неприятен и,
по рекомендациям доступности, должен быть сглажен. Переходим только
цвет и фон — двигать что-либо при смене темы не нужно. */
html.theme-switching,
html.theme-switching body,
html.theme-switching .page,
html.theme-switching header,
html.theme-switching section,
html.theme-switching footer {
transition: background-color 260ms ease, color 260ms ease, border-color 260ms ease;
}
/* Три независимых сигнала доступности, а не один.
Уменьшенная прозрачность: матовые поверхности вместо стеклянных. */
@media (prefers-reduced-transparency: reduce) {
.appwin, .support-panel, header, .mnav, [class*="glass"] {
backdrop-filter: none !important;
background-color: var(--bg-elevated) !important;
}
}
/* Повышенный контраст: плотный фон и различимая граница. */
@media (prefers-contrast: more) {
.appwin, .card, .pack, .faq-item {
background-color: var(--bg-elevated) !important;
border-color: currentColor !important;
}
}
/* При запросе на уменьшение движения каскад не нужен вовсе. */
@media (prefers-reduced-motion: reduce) {
html.js .reveal.in > * { animation: none; }
html.theme-switching, html.theme-switching * { transition-duration: 1ms !important; }
}
/* ===== price-facts =====
Блок вместо таблицы пакетов: два числа, на которых человек принимает
решение пробовать. Разбор тарифов ушёл внутрь платформы. */
.price-facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-top: 34px;
}
.price-fact {
padding: 30px 28px 26px;
border-radius: 20px;
background: var(--bg-elevated);
border: 1px solid var(--hairline);
}
.price-fact-accent {
background: color-mix(in srgb, var(--green) 8%, var(--bg-elevated));
border-color: color-mix(in srgb, var(--green) 32%, transparent);
}
.price-fact-label {
display: block;
font-size: 12px;
font-weight: 650;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink3);
}
.price-fact-value {
display: block;
margin-top: 10px;
font-size: clamp(38px, 5.4vw, 56px);
font-weight: 800;
line-height: 1;
/* Крупный кегль читается разреженным — стягиваем трекинг. */
letter-spacing: -.03em;
font-variant-numeric: tabular-nums;
}
.price-fact-accent .price-fact-value { color: var(--green-deep); }
.price-fact-unit {
font-size: .42em;
font-weight: 700;
letter-spacing: 0;
color: var(--ink3);
margin-left: 2px;
}
.price-fact-note {
margin-top: 12px;
font-size: 14px;
line-height: 1.5;
color: var(--ink2);
}
.price-cta {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
margin-top: 28px;
}
.price-cta-note {
font-size: 13px;
color: var(--ink3);
}
@media (max-width: 700px) {
.price-facts { grid-template-columns: 1fr; gap: 14px; }
.price-fact { padding: 24px 22px 22px; }
.price-cta { flex-direction: column; align-items: stretch; gap: 12px; }
.price-cta .btn { justify-content: center; }
.price-cta-note { text-align: center; }
}
/* ===== personas-mobile-carousel =====
На телефоне три персоны шли колонкой, и каждая занимала почти целый экран:
три подряд экрана без нового смысла. Теперь это лента с прокруткой и
привязкой — карточка примерно две трети ширины, соседняя видна краем,
поэтому сразу понятно, что листать есть куда. */
@media (max-width: 760px) {
.personas-grid {
display: flex !important;
grid-template-columns: none !important;
flex-wrap: nowrap;
gap: 14px;
margin: 26px -20px 0 !important;
padding: 4px 20px 18px !important;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
align-items: stretch;
}
.personas-grid::-webkit-scrollbar { display: none; }
.persona-card {
flex: 0 0 68vw;
min-width: 68vw;
max-width: 68vw;
scroll-snap-align: center;
}
/* Фото было во всю ширину карточки; половина высоты экрана уходила на
одно лицо. Ограничиваем по высоте — портрет остаётся узнаваемым,
но перестаёт вытеснять текст. */
.persona-photo-wrap {
max-height: 34vh;
overflow: hidden;
}
.persona-photo { height: 100%; object-fit: cover; }
}
/* Подсказка, что лента листается. */
.personas-hint { display: none; }
@media (max-width: 760px) {
.personas-hint {
display: flex;
justify-content: center;
gap: 7px;
margin-top: 4px;
}
.personas-hint span {
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--neutral-mid);
opacity: .35;
transition: opacity 180ms ease, transform 180ms ease;
}
.personas-hint span.on {
opacity: 1;
transform: scale(1.35);
background: var(--green);
}
}
/* ===== launch-stage =====
Раньше результаты разворачивались колонкой карточек и растягивали секцию
на полтора экрана. Теперь это одна сцена фиксированной высоты, в которой
сменяются кадры: высота не скачет, весь прогон помещается в экран. */
.launch-stage {
position: relative;
margin-top: 18px;
min-height: 208px;
}
.launch-frame {
position: absolute;
inset: 0;
padding: 20px 22px;
border-radius: 16px;
background: var(--bg-elevated);
border: 1px solid var(--hairline);
opacity: 0;
transform: translateY(10px) scale(.985);
transition: opacity 260ms var(--spring), transform 320ms var(--spring);
pointer-events: none;
}
.launch-frame.on {
opacity: 1;
transform: none;
pointer-events: auto;
}
.launch-frame small {
display: block;
font-size: 11px;
font-weight: 650;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink3);
}
.launch-frame p { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--ink2); }
.launch-frame-hint { color: var(--ink3) !important; }
.launch-metrics { display: flex; gap: 34px; margin-top: 14px; }
.launch-metrics strong {
display: block;
font-size: 34px;
font-weight: 800;
line-height: 1;
letter-spacing: -.02em;
color: var(--green-deep);
font-variant-numeric: tabular-nums;
}
.launch-metrics span { display: block; margin-top: 6px; font-size: 12px; color: var(--ink3); }
@media (max-width: 700px) {
.launch-stage { min-height: 224px; }
.launch-frame { padding: 18px; }
.launch-metrics { gap: 22px; }
.launch-metrics strong { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
.launch-frame { transition: opacity 140ms ease; transform: none; }
}
/* ===== support-chat-foot =====
Порядок в подвале чата: сначала выход на живого человека, затем поле ввода,
под ним отправка. Так кнопка «Позвать человека» не соревнуется за внимание
с основным действием и не оказывается ниже него. */
.support-foot { display: grid; gap: 9px; }
.support-human {
order: 1;
/* Второстепенное действие: контур вместо заливки, чтобы отправка читалась
как главная кнопка блока. */
background: transparent !important;
color: var(--ink) !important;
border: 1px solid var(--line-strong);
font-weight: 700 !important;
}
.support-human:hover { border-color: var(--green); color: var(--green-deep) !important; }
.support-input { order: 2; }
.support-send {
order: 3;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 10px;
border: 0;
border-radius: 11px;
background: var(--green);
color: #04120a;
font-weight: 800;
font-size: 13px;
cursor: pointer;
transition: transform 100ms ease-out, filter 160ms ease;
}
.support-send:hover { filter: brightness(1.05); }
.support-send:active { transform: scale(.97); }
/* ===== lead-actions =====
Кнопки в карточке заявки укоротились до «Открыть» и «Взять»: подпись больше
не растягивает их на всю строку. */
.mock-actions .btn { flex: 0 0 auto; }
/* ===== proof-flow-compact =====
Номер шага стоял отдельной строкой с отступом в 20 px, из-за чего каждый
шаг занимал вдвое больше места, чем нужно, а между блоками зияла пустота.
Теперь номер живёт слева от текста. */
.proof-step {
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
gap: 12px;
padding: 14px 16px;
}
.proof-index {
margin-bottom: 0 !important;
/* Цифра выравнивается по строке заголовка, а не по верхней кромке блока. */
line-height: 1.35;
font-variant-numeric: tabular-nums;
}
@media (max-width: 980px) {
.proof-flow {
grid-template-columns: 1fr;
gap: 0;
}
/* Стрелки между шагами съедали по экрану на телефоне —
разделителем работает граница самого шага. */
.proof-arrow { display: none; }
.proof-step { padding: 13px 14px; }
.proof-step:last-of-type { border-bottom: 1px solid var(--line-strong); }
.proof-step small { margin-top: 3px; }
}
/* ===== proof-bar =====
Полоса доказательств сразу под первым экраном: три факта о самой платформе.
Числа проверяемые — берутся из базы, а не из головы. */
.proof-bar {
border-block: 1px solid var(--hairline);
background: color-mix(in srgb, var(--bg-elevated) 60%, transparent);
}
.proof-bar-inner {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
padding-block: 22px;
}
.proof-fact { text-align: center; }
.proof-fact strong {
display: block;
font-size: clamp(26px, 3.4vw, 38px);
font-weight: 800;
line-height: 1;
letter-spacing: -.025em;
font-variant-numeric: tabular-nums;
color: var(--green-deep);
}
.proof-fact span {
display: block;
margin-top: 7px;
font-size: 13px;
color: var(--ink3);
}
@media (max-width: 700px) {
.proof-bar-inner { grid-template-columns: 1fr; gap: 14px; padding-block: 18px; }
.proof-fact { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.proof-fact strong { font-size: 24px; }
.proof-fact span { margin-top: 0; }
}
/* ===== price-math ===== */
.price-math {
margin-top: 22px;
padding: 16px 18px;
border-radius: 14px;
background: color-mix(in srgb, var(--green) 7%, var(--bg-elevated));
border: 1px solid color-mix(in srgb, var(--green) 24%, transparent);
font-size: 15px;
line-height: 1.55;
color: var(--ink2);
}
.price-math strong { color: var(--ink); }
/* ===== limits =====
Признание границ закрывает возражение раньше, чем оно возникнет. */
.limits { margin-top: 26px; }
.limits-title {
font-size: 13px;
font-weight: 650;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink3);
}
.limits-list {
margin-top: 12px;
display: grid;
gap: 9px;
list-style: none;
padding: 0;
}
.limits-list li {
position: relative;
padding-left: 22px;
font-size: 14.5px;
line-height: 1.55;
color: var(--ink2);
}
.limits-list li::before {
content: "";
position: absolute;
left: 4px;
top: .62em;
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--green);
}
/* ===== hdr-tg ===== */
.hdr-tg {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 999px;
color: var(--ink2);
transition: color 160ms ease, background-color 160ms ease;
}
.hdr-tg svg { width: 19px; height: 19px; }
.hdr-tg:hover { color: var(--green-deep); background: color-mix(in srgb, var(--green) 12%, transparent); }
@media (max-width: 700px) {
/* В шапке телефона место занято переключателями — контакт живёт в меню. */
.hdr-tg { display: none; }
}