:root {
  --bg: #F3F1EC;
  --bg-soft: #FAF9F6;
  --bg-dark: #111827;
  --text: #1A1A1A;
  --text-muted: #6B7280;
  --accent: #15965f;
  --accent-hover: #0d7448;
  --accent-light: #E6F4ED;
  --white: #FFFFFF;
  --border: #E5E0D7;
  --shadow-sm: 0 4px 12px rgba(0,0,0,.035);
  --shadow-lg: 0 20px 40px rgba(0,0,0,.08);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: Inter, Arial, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color:inherit; text-decoration:none; }
button, input { font:inherit; }
button { cursor:pointer; }
.container { width:min(1600px, calc(100% - clamp(48px, 10vw, 192px))); margin:0 auto; padding:0; }

.header {
  position: sticky;
  top:0;
  z-index:100;
  background: rgba(243,241,236,.9);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(229,224,215,.85);
}
.header-inner {
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.logo {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  font-weight:900;
  font-size:17px;
}
.logo-lockup {
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.logo-name {
  font-weight:900;
  font-size:17px;
  letter-spacing:-.2px;
}
.logo-domain {
  font-weight:600;
  font-size:11px;
  letter-spacing:.2px;
  color:var(--accent);
  opacity:.85;
}
.logo-badge {
  width:34px;
  height:34px;
  border-radius:10px;
  background:var(--accent);
  position:relative;
}
.logo-badge:before {
  content:"";
  position:absolute;
  inset:10px;
  border-radius:50%;
  background:#fff;
  opacity:.75;
}
.nav {
  display:flex;
  gap:0;
  font-size:14px;
  font-weight:700;
}
.nav a:hover { color:var(--accent); }

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:0 22px;
  border-radius:10px;
  font-size:14px;
  font-weight:800;
  border:1px solid transparent;
  transition:.2s ease;
}
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-hover); }
.btn-dark { background:#111; color:#fff; }
.btn-outline { background:transparent; color:var(--text); border-color:var(--border); }
.btn-lg { min-height:58px; padding:0 28px; font-size:15px; }

.badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border-radius:20px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  background:var(--accent-light);
  color:var(--accent);
}
.badge-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
}
.badge-dot--pulse {
  position:relative;
  animation:badgeDotPulse 1.8s ease-in-out infinite;
}
.badge-dot--pulse:before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:var(--accent);
  animation:badgeDotHalo 1.8s ease-out infinite;
}
@keyframes badgeDotPulse {
  0%,100% { transform:scale(1); opacity:1; }
  50% { transform:scale(.82); opacity:.75; }
}
@keyframes badgeDotHalo {
  0% { transform:scale(1); opacity:.55; }
  70%,100% { transform:scale(3.4); opacity:0; }
}

/* HERO: максимально близко к примеру */
.hero-copy { min-width:0; }
.hero {
  padding:34px 0 54px;
}
.hero-grid {
  display:grid;
  grid-template-columns: minmax(680px, .98fr) minmax(700px, 1.02fr);
  gap:22px;
  align-items:center;
}
.hero-title {
  margin:16px 0;
  font-size: clamp(46px, 4.6vw, 72px);
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.045em;
}
.hero-title span {
  display:inline-block;
  color:var(--accent);
  position:relative;
  white-space:nowrap;
}
.hero-title span:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  height:9px;
  border-radius:999px;
  background:rgba(21,150,95,.22);
  z-index:-1;
}
.hero-sub {
  max-width:520px;
  margin:0 0 24px;
  color:#2b2d28;
  font-size:18px;
  line-height:1.46;
}
.hero-metrics {
  max-width:520px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:0 0 32px;
}
.metric-card {
  background:var(--white);
  padding:18px 14px;
  border-radius:16px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  text-align:left;
}
.metric-val {
  margin-bottom:5px;
  color:var(--accent);
  font-size:30px;
  font-weight:900;
  line-height:1;
  letter-spacing:-.04em;
}
.metric-lbl {
  color:var(--text-muted);
  font-size:12px;
  font-weight:600;
  line-height:1.25;
}
.hero-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* visual exactly in spirit of example */
.hero-visual-container {
  position:relative;
  width:100%;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  background:transparent;
}
.hero-visual-container:before { display:none; }

.card-back-left {
  position:absolute;
  left:0;
  top:50px;
  width:240px;
  background:var(--white);
  border-radius:18px;
  padding:20px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  opacity:.96;
  transform:rotate(-4deg);
  z-index:1;
}
.card-back-left h5,
.card-back-right h5 {
  margin-bottom:12px;
  color:var(--text-muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.source-item {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  color:var(--text);
  font-size:13px;
  font-weight:800;
}
.card-back-right {
  position:absolute;
  right:0;
  top:80px;
  width:220px;
  background:var(--white);
  border-radius:18px;
  padding:20px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  opacity:.96;
  transform:rotate(5deg);
  z-index:1;
}
.lead-info {
  margin-bottom:2px;
  font-size:14px;
  font-weight:900;
}
.lead-sub {
  margin-bottom:8px;
  color:var(--text-muted);
  font-size:12px;
  font-weight:700;
}
.lead-tag {
  display:inline-block;
  padding:5px 10px;
  border-radius:6px;
  background:var(--accent-light);
  color:var(--accent);
  font-size:11px;
  font-weight:900;
}
.card-front-chat {
  position:relative;
  z-index:10;
  width:330px;
  background:var(--white);
  border-radius:24px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.chat-top {
  padding:18px 22px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:12px;
}
.chat-bot-icon {
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:var(--accent);
  color:#fff;
  font-size:12px;
  font-weight:900;
}
.chat-title {
  color:var(--text);
  font-size:13px;
  font-weight:900;
}
.chat-status {
  color:var(--accent);
  font-size:11px;
  font-weight:800;
}
.chat-messages {
  min-height:auto;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  background:#FAF9F6;
}
.msg-b,
.msg-u {
  max-width:88%;
  padding:12px 14px;
  border-radius:14px;
  font-size:13px;
  line-height:1.4;
}
.msg-b {
  align-self:flex-start;
  background:#EAE8E2;
  color:var(--text);
  border-bottom-left-radius:3px;
}
.msg-u {
  align-self:flex-end;
  background:var(--accent);
  color:#fff;
  border-bottom-right-radius:3px;
}
.chat-bottom {
  min-height:52px;
  padding:12px 18px;
  background:var(--white);
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--text-muted);
  font-size:12px;
}
.send-btn {
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-size:12px;
}


/* HERO NICHES */
.hero-niches {
  padding: clamp(44px, 6vw, 80px) 0 54px;
}
.hero-niches__sub {
  margin: 14px 0 0;
  max-width: 680px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted, #6b6b66);
}
.hero-niches__head {
  max-width: 820px;
  margin-bottom: 26px;
}
.hero-niches__head h2 {
  margin: 14px 0 0;
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1.08;
  letter-spacing: -.04em;
  font-weight: 900;
}
.hero-niches__grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
}
.hero-niches__grid article {
  min-height: 156px;
  padding: 24px;
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.hero-niches__grid article span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}
.hero-niches__grid article h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.18;
}
.hero-niches__grid article p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.42;
}

/* common */
.section { padding:84px 0; }
.section-white { background:var(--white); }
.section-head {
  max-width:720px;
  margin:0 auto 48px;
  text-align:center;
}
.section-head h2,
.about-grid h2,
.knowledge-box h2,
.demo-grid h2,
.price-box h2,
.roi-grid h2,
.cta-box h2 {
  margin:14px 0 12px;
  font-size:clamp(34px,4vw,48px);
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.04em;
}
.section-head p,
.about-grid p,
.knowledge-box p,
.demo-grid p,
.price-box p,
.roi-grid p,
.cta-box p {
  color:var(--text-muted);
  font-size:16px;
}

/* about */
.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.about-box,
.compare-card,
.feature-card,
.knowledge-box,
.step-card,
.demo-box,
.roi-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow-sm);
}
.about-box { padding:40px; }
.about-box h3 {
  margin-bottom:18px;
  font-size:24px;
}
.check-list {
  list-style:none;
  display:grid;
  gap:12px;
}
.check-list li {
  position:relative;
  padding-left:28px;
  color:#333;
  font-size:15px;
}
.check-list li:before {
  content:"✓";
  position:absolute;
  left:0;
  top:1px;
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--accent-light);
  color:var(--accent);
  font-size:11px;
  font-weight:900;
}

/* compare */
.compare-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.compare-card {
  min-height:310px;
  padding:30px;
}
.compare-card h3 {
  margin-bottom:18px;
  font-size:24px;
}
.compare-card ul {
  list-style:none;
  display:grid;
  gap:13px;
}
.compare-card li {
  position:relative;
  padding-left:22px;
  color:var(--text-muted);
  font-size:15px;
}
.compare-card li:before {
  content:"•";
  position:absolute;
  left:0;
  color:var(--accent);
  font-weight:900;
}
.compare-card.accent {
  background:var(--accent);
  color:#fff;
}
.compare-card.accent li,
.compare-card.accent p {
  color:#eefbf4;
}
.compare-card.accent li:before {
  color:#fff;
}

/* features */
.feature-grid,
.why-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.feature-card {
  min-height:230px;
  padding:28px;
}
.why-icon {
  width:50px;
  height:50px;
  margin-bottom:26px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:var(--accent-light);
  color:var(--accent);
  font-weight:900;
}
.feature-card h3 {
  margin-bottom:10px;
  font-size:19px;
}
.feature-card p {
  color:var(--text-muted);
  font-size:14px;
}

/* knowledge */
.knowledge-section { padding-top:0; }
.knowledge-box { padding:42px; }
.knowledge-flow {
  display:grid;
  grid-template-columns:repeat(5,1fr) auto 1.3fr auto 1fr;
  gap:12px;
  align-items:center;
}
.knowledge-source,
.knowledge-core {
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--bg-soft);
  text-align:center;
  font-size:13px;
  font-weight:900;
}
.knowledge-core {
  background:var(--accent-light);
  color:var(--accent);
}
.knowledge-core.answer {
  background:#eef0eb;
  color:#20231e;
}
.knowledge-arrow {
  color:#9CA3AF;
  font-size:22px;
  font-weight:900;
}
.knowledge-note {
  max-width:720px;
  margin:28px auto 0;
  text-align:center;
  font-size:13px!important;
}

/* steps */
.steps-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.step-card {
  min-height:230px;
  padding:28px 22px;
  background:var(--bg);
}
.step-num {
  width:38px;
  height:38px;
  margin-bottom:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  font-weight:900;
}
.step-card h4 {
  margin-bottom:8px;
  font-size:17px;
}
.step-card p {
  color:var(--text-muted);
  font-size:14px;
}

/* solutions */
.solutions-layout {
  display:grid;
  grid-template-columns:390px 1fr;
  gap:26px;
}
.solutions-list {
  display:grid;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:24px;
  background:#fff;
}
.solution-row {
  display:grid;
  grid-template-columns:1fr auto;
  gap:6px 14px;
  padding:20px 22px;
  border-bottom:1px solid var(--border);
}
.solution-row:last-child { border-bottom:0; }
.solution-row b { font-size:17px; }
.solution-row span {
  color:var(--text-muted);
  font-size:13px;
}
.solution-row em {
  grid-column:2;
  grid-row:1 / 3;
  align-self:center;
  color:var(--accent);
  font-style:normal;
  font-size:12px;
  font-weight:900;
}
.solution-row.active,
.solution-row:hover {
  background:var(--accent);
  color:#fff;
}
.solution-row.active span,
.solution-row.active em,
.solution-row:hover span,
.solution-row:hover em {
  color:#eefbf4;
}
.solution-preview {
  display:grid;
  grid-template-columns:1.1fr .85fr;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:24px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.preview-chat { padding:30px; }
.preview-title {
  margin-bottom:18px;
  font-weight:900;
}
.preview-chat .msg-b,
.preview-chat .msg-u,
.demo-chat .msg-b,
.demo-chat .msg-u {
  font-size:14px;
}
.preview-bottom {
  margin-top:12px;
  border:1px solid var(--border);
  border-radius:14px;
}
.preview-card {
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(circle at 80% 25%, rgba(21,150,95,.14), transparent 34%),
    var(--bg);
}
.preview-card span {
  width:72px;
  height:72px;
  margin-bottom:24px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:var(--accent);
  color:#fff;
  font-weight:900;
  font-size:24px;
}
.preview-card h3 {
  margin-bottom:10px;
  font-size:26px;
  line-height:1.1;
}
.preview-card p {
  color:var(--text-muted);
}

/* demo */
.demo-grid {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:52px;
  align-items:center;
}
.demo-box {
  padding:26px;
}
.demo-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:22px;
}
.demo-tabs button {
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--bg);
  padding:9px 14px;
  font-size:13px;
  font-weight:800;
}
.demo-tabs .active {
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.demo-chat {
  display:grid;
  gap:14px;
}
.demo-box small {
  display:block;
  margin-top:18px;
  color:var(--text-muted);
}

/* price */
.price-box {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:34px;
  align-items:stretch;
  padding:44px;
  border:1px solid #d7cab6;
  border-radius:30px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.price-list {
  margin-top:24px;
  grid-template-columns:1fr 1fr;
}
.price-card {
  padding:40px;
  border-radius:24px;
  border:1px solid var(--border);
  background:linear-gradient(145deg,#f7f5ef,#fff);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
.price-card strong {
  font-size:58px;
  line-height:1;
  letter-spacing:-.05em;
}
.price-card span {
  margin:10px 0 22px;
  color:var(--text-muted);
}
.price-card small {
  display:block;
  margin-top:18px;
  color:var(--text-muted);
}

/* roi */
.roi-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:52px;
  align-items:center;
}
.roi-card { padding:36px; }
.roi-card h3 {
  margin-bottom:18px;
  font-size:24px;
}

/* faq */
.faq-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 22px;
}
details {
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
}
summary {
  cursor:pointer;
  list-style:none;
  padding:18px 20px;
  font-weight:900;
}
summary::-webkit-details-marker { display:none; }
details p {
  padding:0 20px 20px;
  color:var(--text-muted);
  font-size:14px;
}

/* cta */
.cta-box {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:40px;
  align-items:center;
  padding:46px;
  border:1px solid #b7c9bd;
  border-radius:30px;
  background:
    radial-gradient(circle at 95% 55%, rgba(21,150,95,.14), transparent 28%),
    #fff;
}
.cta-form {
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
}
.cta-form input {
  min-height:54px;
  padding:0 18px;
  border:1px solid var(--border);
  border-radius:14px;
  outline:none;
}
.cta-form input:focus {
  border-color:var(--accent);
}

/* footer */
.footer {
  padding:62px 0;
  background:#111827;
  color:#fff;
}
.footer-grid {
  display:grid;
  grid-template-columns:1.4fr repeat(3,1fr);
  gap:44px;
}
.footer a,
.footer p,
.footer span {
  color:#9CA3AF;
  font-size:14px;
}
.footer .logo {
  color:#fff;
}
.footer h3 {
  margin-bottom:14px;
  color:#fff;
  font-size:15px;
}
.footer-grid>div {
  display:grid;
  align-content:start;
  gap:9px;
}
.footer-brand p {
  max-width:320px;
}

/* responsive */
@media (max-width:1050px) {
  .hero-niches__grid { grid-template-columns: repeat(2, 1fr); }
  .nav { display:none; }
  .hero-grid,
  .about-grid,
  .demo-grid,
  .price-box,
  .roi-grid,
  .cta-box {
    grid-template-columns:1fr;
  }
  .hero-visual-container { min-height:auto; }
  .feature-grid,
  .steps-grid,
  .compare-grid {
    grid-template-columns:repeat(2,1fr);
  }
  .knowledge-flow {
    grid-template-columns:repeat(2,1fr);
  }
  .knowledge-arrow { display:none; }
  .solutions-layout,
  .solution-preview {
    grid-template-columns:1fr;
  }
}
@media (max-width:760px) {
  .hero-niches__grid { grid-template-columns: 1fr; }
  .container { width:calc(100% - 32px); padding:0; }
  .header-inner { height:66px; }
  .header .btn { display:none; }
  .hero { padding:28px 0 44px; }
  .hero-title { font-size:42px; }
  .hero-sub { font-size:16px; }
  .hero-metrics,
  .mini-benefits-grid,
  .feature-grid,
  .steps-grid,
  .compare-grid,
  .faq-grid,
  .footer-grid,
  .price-list,
  .cta-form {
    grid-template-columns:1fr;
  }
  .card-back-left,
  .card-back-right {
    display:none;
  }
  .hero-visual-container {
    min-height:auto;
    padding-top:20px;
  }
  .hero-visual-container:before {
    display:none;
  }
  .card-front-chat {
    width:100%;
  }
  .chat-messages {
    min-height:auto;
  }
  .section { padding:62px 0; }
  .price-box,
  .cta-box,
  .knowledge-box {
    padding:28px;
  }
}




.hero-original-image {
  display:block;
  width:100%;
  max-width:960px;
  height:auto;
  object-fit:contain;
}

@media (min-width: 1060px) {
  .hero-title span { white-space: nowrap; }
}


/* Animated hero demo — HTML/CSS вместо статичной картинки */
.hero-visual-container {
  position: relative;
  width: 100%;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: transparent;
  overflow: visible;
}

.hero-visual-container:before { display: none; }

.hero-demo {
  position: relative;
  width: min(100%, 820px);
  min-height: 560px;
  margin-left: auto;
  margin-top: -62px;
  background: var(--bg);
  overflow: visible;
}

.hero-demo__dots {
  position: absolute;
  inset: 8px 0 0 0;
  border-radius: 36px;
  background-image: radial-gradient(rgba(80, 88, 77, .16) 1px, transparent 1.5px);
  background-size: 18px 18px;
  opacity: .55;
  pointer-events: none;
}

.demo-source-card,
.demo-lead-card,
.demo-chat-card {
  position: absolute;
  background: #fff;
  border: 1px solid rgba(26, 26, 26, .08);
  box-shadow: 0 24px 70px rgba(24, 22, 18, .09);
}

.demo-source-card {
  left: 18px;
  top: 135px;
  width: 270px;
  min-height: 214px;
  padding: 28px 26px;
  border-radius: 22px;
  z-index: 2;
  transform: translateX(10px);
}

.demo-card-label {
  margin-bottom: 22px;
  color: #a0a5a0;
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}

.demo-source-card ul {
  list-style: none;
  display: grid;
  gap: 15px;
  margin: 0;
  padding: 0;
}

.demo-source-card li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1b1f1a;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.demo-source-card li span {
  width: 14px;
  color: var(--accent);
  font-weight: 900;
  text-align: center;
}

.demo-lead-card {
  right: 20px;
  top: 174px;
  width: 270px;
  min-height: 300px;
  padding: 28px 0 28px 26px;
  border-radius: 22px;
  z-index: 1;
  overflow: hidden;
  transform: translateX(-2px);
}

.demo-lead-card dl {
  display: grid;
  gap: 5px;
  margin: 18px 0 18px;
  width: 238px;
}

.demo-lead-card dt {
  color: #b3b6b0;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}

.demo-lead-card dd {
  margin: 0 0 12px;
  color: #1b1f1a;
  font-size: 16px;
  line-height: 1.1;
  font-weight: 900;
  white-space: nowrap;
}

.demo-lead-card strong {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.demo-chat-card {
  left: 50%;
  top: 92px;
  z-index: 5;
  width: 390px;
  min-height: 468px;
  border-radius: 24px;
  overflow: hidden;
  transform: translateX(-50%);
  box-shadow: 0 34px 90px rgba(24, 22, 18, .14);
}

.demo-chat-head {
  height: 78px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(26, 26, 26, .08);
  background: #fff;
}

.demo-ai-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.demo-chat-head b {
  display: block;
  color: #10130f;
  font-size: 17px;
  line-height: 1.05;
  font-weight: 900;
}

.demo-chat-head span {
  display: block;
  margin-top: 6px;
  color: var(--accent);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
}

.demo-chat-head i {
  width: 10px;
  height: 10px;
  margin-left: auto;
  border-radius: 50%;
  background: #35c77a;
  box-shadow: 0 0 0 0 rgba(53,199,122,.44);
  animation: onlinePulse 1.8s ease-in-out infinite;
}

.demo-chat-body {
  position: relative;
  min-height: 350px;
  padding: 18px 20px;
  background: #fff;
}

.demo-message,
.demo-typing {
  display: flex;
  gap: 5px;
  width: 58px;
  padding: 12px 15px;
  border-radius: 15px;
  background: #efede8;
}

.demo-typing--one,
.demo-typing--three {
  background: var(--accent);
}

.demo-message {
  width: calc(100% - 25px);
  max-width: none;
  padding: 13px 15px;
  border-radius: 15px;
  color: #151814;
  font-size: 14px;
  line-height: 1.35;
}

.demo-message--bot,
.demo-typing--one,
.demo-typing--three {
  left: 25px;
  right: 0;
}

.demo-message--bot {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
  font-weight: 700;
}

.demo-message--user,
.demo-typing--two {
  left: 0;
  right: 25px;
}

.demo-message--user {
  background: #efede8;
  color: #151814;
  border-bottom-left-radius: 4px;
  font-weight: 700;
}

.demo-message--one,
.demo-typing--one { top: 18px; }

.demo-message--two,
.demo-typing--two { top: 128px; }

.demo-message--three,
.demo-typing--three { top: 238px; }

.demo-message--one { animation: messageOneCycle 10s ease-in-out infinite; }
.demo-message--two { animation: messageTwoCycle 10s ease-in-out infinite; }
.demo-message--three { animation: messageThreeCycle 10s ease-in-out infinite; }

.demo-typing {
  display: flex;
  gap: 5px;
  width: 58px;
  padding: 12px 15px;
  border-radius: 15px;
  background: #efede8;
}

.demo-typing--one,
.demo-typing--three {
  border-bottom-left-radius: 4px;
}

.demo-typing--two {
  border-bottom-right-radius: 4px;
}

.demo-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9a9a92;
  animation: typingDot .9s ease-in-out infinite;
}

.demo-typing--one span,
.demo-typing--three span {
  background: #fff;
}

.demo-typing span:nth-child(2) { animation-delay: .15s; }
.demo-typing span:nth-child(3) { animation-delay: .3s; }

.demo-typing--one { animation: typingOneCycle 10s ease-in-out infinite; }
.demo-typing--two { animation: typingTwoCycle 10s ease-in-out infinite; }
.demo-typing--three { animation: typingThreeCycle 10s ease-in-out infinite; }

.demo-chat-input {
  height: 62px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(26, 26, 26, .08);
  background: #fff;
  color: #a8aaa4;
  font-size: 13px;
}

.demo-chat-input button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  line-height: 1;
}

@keyframes messageOneCycle {
  0%, 11% { opacity: 0; transform: translateY(10px); }
  13%, 94.5% { opacity: 1; transform: translateY(0); }
  95.5%, 100% { opacity: 0; transform: translateY(0); }
}

@keyframes messageTwoCycle {
  0%, 36% { opacity: 0; transform: translateY(10px); }
  38%, 94.5% { opacity: 1; transform: translateY(0); }
  95.5%, 100% { opacity: 0; transform: translateY(0); }
}

@keyframes messageThreeCycle {
  0%, 66% { opacity: 0; transform: translateY(10px); }
  68%, 94.5% { opacity: 1; transform: translateY(0); }
  95.5%, 100% { opacity: 0; transform: translateY(0); }
}

@keyframes typingOneCycle {
  0%, 1% { opacity: 0; transform: translateY(10px); }
  2%, 11% { opacity: 1; transform: translateY(0); }
  13%, 100% { opacity: 0; transform: translateY(0); }
}

@keyframes typingTwoCycle {
  0%, 26% { opacity: 0; transform: translateY(10px); }
  28%, 36% { opacity: 1; transform: translateY(0); }
  38%, 100% { opacity: 0; transform: translateY(0); }
}

@keyframes typingThreeCycle {
  0%, 56% { opacity: 0; transform: translateY(10px); }
  58%, 66% { opacity: 1; transform: translateY(0); }
  68%, 100% { opacity: 0; transform: translateY(0); }
}

@keyframes typingDot {
  0%, 100% { transform: translateY(0); opacity: .45; }
  50% { transform: translateY(-4px); opacity: 1; }
}

@keyframes onlinePulse {
  0% { box-shadow: 0 0 0 0 rgba(53,199,122,.44); }
  70% { box-shadow: 0 0 0 10px rgba(53,199,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(53,199,122,0); }
}

@media (min-width: 1400px) {
  .hero-demo {
    width: min(100%, 900px);
    min-height: 610px;
    margin-top: -62px;
  }

  .demo-chat-card {
    width: 390px;
    top: 104px;
  }

  .demo-source-card {
    width: 300px;
    top: 150px;
  }

  .demo-lead-card {
  right: 20px;
  top: 174px;
  width: 270px;
  min-height: 300px;
  padding: 28px 0 28px 26px;
  border-radius: 22px;
  z-index: 1;
  overflow: hidden;
  transform: translateX(-2px);
}
}

@media (max-width: 1050px) {
  .hero-demo {
    margin: 0 auto;
    min-height: 560px;
  }
}

@media (max-width: 760px) {
  .hero-visual-container {
    min-height: auto;
    padding-top: 22px;
  }

  .hero-demo {
    width: 100%;
    min-height: 500px;
  }

  .demo-source-card,
  .demo-lead-card {
  right: 20px;
  top: 174px;
  width: 270px;
  min-height: 300px;
  padding: 28px 0 28px 26px;
  border-radius: 22px;
  z-index: 1;
  overflow: hidden;
  transform: translateX(-2px);
}

  .demo-chat-card {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    transform: none;
  }

  .demo-chat-body {
    min-height: auto;
  }
}




/* точечная правка видимости правой карточки в hero */
.demo-lead-card {
  right: 20px;
  top: 174px;
  width: 270px;
  min-height: 300px;
  padding: 28px 0 28px 26px;
  border-radius: 22px;
  z-index: 1;
  overflow: hidden;
  transform: translateX(-2px);
}
.demo-lead-card dl {
  display: grid;
  gap: 5px;
  margin: 18px 0 18px;
  width: 238px;
}
.demo-lead-card dt {
  color: #b3b6b0;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}
.demo-lead-card dd {
  margin: 0 0 12px;
  color: #1b1f1a;
  font-size: 16px;
  line-height: 1.1;
  font-weight: 900;
  white-space: nowrap;
}
.demo-lead-card strong {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

/* ===== HERO демо-чат — «рабочий» вид (агент = фон сайта, пользователь = зелёный) ===== */
.demo-chat-card{ min-height:auto; }
.demo-chat-head .hc-name{ flex:1; min-width:0; }
.demo-chat-head .hc-name b{ font-size:16px; }
.demo-chat-head .hc-name span{ display:flex; align-items:center; gap:7px; margin-top:5px; color:#7a8699; font-size:12.5px; font-weight:600; }
.hc-dot{ width:8px; height:8px; border-radius:50%; background:#22c55e; flex:none;
  box-shadow:0 0 0 0 rgba(34,197,94,.45); animation:onlinePulse 1.8s ease-in-out infinite; }
.hc-actions{ margin-left:auto; display:flex; gap:8px; }
.hc-ic{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; border:0; padding:0; cursor:default; }
.hc-ic.call{ background:var(--accent-light); color:var(--accent); }
.hc-ic.close{ background:#f0f0ee; color:#8a8f88; }
.demo-chat-body{ min-height:300px; display:flex; flex-direction:column; padding:18px 20px; }
.hc-flow{ flex:1; display:flex; flex-direction:column; gap:12px; }
.hc-row{ display:flex; max-width:82%; }
.hc-row.bot{ align-self:flex-start; }
.hc-row.usr{ align-self:flex-end; }
.hc-b{ padding:11px 14px; font-size:15px; line-height:1.4; font-weight:500; border-radius:15px;
  opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease; }
.hc-b.bot{ background:var(--bg); color:#2b2b2b; border:1px solid #e6e2d8; border-bottom-left-radius:5px; }
.hc-b.usr{ background:var(--accent); color:#fff; border-bottom-right-radius:5px; }
.hc-typ{ border-radius:15px; padding:12px 15px; display:flex; gap:5px; width:auto; }
.hc-typ.bot{ background:var(--bg); border:1px solid #e6e2d8; border-bottom-left-radius:5px; }
.hc-typ.usr{ background:var(--accent); border-bottom-right-radius:5px; }
.hc-typ span{ width:6px; height:6px; border-radius:50%; animation:typingDot .9s ease-in-out infinite; }
.hc-typ.bot span{ background:#b3ab9a; }
.hc-typ.usr span{ background:rgba(255,255,255,.85); }
.hc-typ span:nth-child(2){ animation-delay:.15s; }
.hc-typ span:nth-child(3){ animation-delay:.3s; }
.hc-qr{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; opacity:0; transition:opacity .4s ease; }
.hc-qb{ font-size:13px; font-weight:600; color:#0f7a50; background:var(--accent-light);
  border:1.5px solid var(--accent); border-radius:20px; padding:8px 14px; cursor:default; }
.demo-chat-input{ gap:8px; }
.demo-chat-input .hc-inwrap{ flex:1; }
.hc-mic,.hc-send{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; border:0; padding:0; cursor:default; flex:none; }
.hc-mic{ background:#f0f0ee; color:#8a8f88; }
.hc-send{ background:var(--accent); color:#fff; }
.hc-foot{ padding:9px 18px 12px; text-align:center; background:#fff; color:#a8aaa4; font-size:11px; }

/* ===== HERO демо-чат: фикс высоты + скролл внутри + подъём блока ===== */
.demo-chat-card{ top:64px; min-height:0; }
.demo-source-card{ top:108px; }
.demo-lead-card{ top:150px; }
.demo-chat-body{ height:388px; min-height:0; }
.hc-flow{ overflow-y:auto; scrollbar-width:thin; }
.hc-flow::-webkit-scrollbar{ width:5px; }
.hc-flow::-webkit-scrollbar-thumb{ background:#dcdad3; border-radius:3px; }

/* ===== HERO = один экран на ПК, без изменения высоты ===== */
@media (min-width: 993px){
  .hero{ min-height: calc(100vh - 72px); display:flex; flex-direction:column; justify-content:center; padding:20px 0; }
}

/* поле ввода с рамкой (как у Ферро) */
.demo-chat-input{ padding:0 16px; }
.demo-chat-input .hc-input{ font-size:16px; }

/* ===== Блок «Возможности» (фишки) ===== */
.cap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cap-card{ background:#fff; border:1px solid #eceae4; border-radius:18px; padding:22px 20px; transition:border-color .2s, box-shadow .2s, transform .2s; }
.cap-card:hover{ border-color:var(--accent); box-shadow:0 12px 30px rgba(21,150,95,.08); transform:translateY(-2px); }
.cap-ic{ width:44px; height:44px; border-radius:12px; background:var(--accent-light); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.cap-card h3{ font-size:16.5px; font-weight:700; color:#1a1815; margin:0 0 6px; line-height:1.25; }
.cap-card p{ font-size:13.5px; color:#6b6f68; margin:0; line-height:1.5; }

/* ===== Блок «Ценность для бизнеса» ===== */
.val-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.val-card{ background:#fff; border:1px solid #eceae4; border-radius:18px; padding:24px 20px; transition:border-color .2s, box-shadow .2s, transform .2s; }
.val-card:hover{ border-color:var(--accent); box-shadow:0 14px 34px rgba(21,150,95,.09); transform:translateY(-2px); }
.val-ic{ width:48px; height:48px; border-radius:14px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.val-card h3{ font-size:17px; font-weight:700; color:#1a1815; margin:0 0 8px; line-height:1.25; }
.val-card p{ font-size:14px; color:#6b6f68; margin:0; line-height:1.5; }

/* ===== Сквозной scroll-reveal ===== */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* адаптив для новых сеток */
@media (max-width:900px){ .cap-grid{ grid-template-columns:repeat(2,1fr); } .val-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cap-grid{ grid-template-columns:1fr; } .val-grid{ grid-template-columns:1fr; } }

/* ===== Кристаллы вокруг кнопки (hover), радиус кнопки не меняем ===== */
.has-crystals{ position:relative; overflow:visible; }
.has-crystals .btn-label{ position:relative; z-index:2; }
.btn-particles{ position:absolute; inset:-30px; z-index:0; opacity:0; pointer-events:none; transition:opacity .35s ease; }
.has-crystals:hover .btn-particles{ opacity:1; }
.btn-particles canvas{ width:100%; height:100%; display:block; }

/* ===== Кнопка «Смотреть демо»: зелёный градиент + искры (радиус 10px как у .btn) ===== */
.btn-ai{ background:linear-gradient(90deg,#22c55e,#15965f 45%,#0d9488); color:#fff; box-shadow:0 8px 22px rgba(21,150,95,.28); }
.btn-ai:hover{ background:linear-gradient(90deg,#22c55e,#15965f 45%,#0d9488); }
.btn-ai .btn-label{ position:relative; z-index:2; font-weight:600; }
.btn-spark{ fill:#fff; position:relative; z-index:2; }
.btn-spark--main{ width:20px; height:20px; margin-right:4px; }
.btn-spark--1{ position:absolute; z-index:2; width:8px; height:8px; left:24px; bottom:13px; transform:rotate(12deg); animation:btnSparkle 2.2s ease-in-out infinite; animation-delay:1s; }
.btn-spark--2{ position:absolute; z-index:2; width:6px; height:6px; left:32px; top:13px; transform:rotate(-12deg); animation:btnSparkle 2.5s ease-in-out infinite; animation-delay:1.5s; }
.btn-spark--3{ position:absolute; z-index:2; width:6px; height:6px; left:20px; top:15px; animation:btnSparkle 2.5s ease-in-out infinite; animation-delay:.5s; }
.btn-spark--main{ animation:btnSparkle 2.2s ease-in-out infinite; }
@keyframes btnSparkle{ 0%,100%{ opacity:0; transform:scale(0) rotate(0deg); } 50%{ opacity:1; transform:scale(1) rotate(18deg); } }

/* ===== Кнопка хедера «Получить демо» (стрелка-слайд) ===== */
.btn-getstarted{ display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 6px 0 18px;
  border-radius:10px; background:var(--accent); color:var(--accent-light); font-size:15px; font-weight:700;
  text-decoration:none; transition:background .12s ease, color .12s ease; }
.btn-getstarted:hover{ background:var(--accent-light); color:var(--accent); }
.gs-label{ line-height:1; }
.gs-badge{ position:relative; width:28px; height:28px; border-radius:50%; overflow:hidden; flex:none;
  background:var(--accent-light); transition:background .12s ease; }
.btn-getstarted:hover .gs-badge{ background:var(--accent); }
.gs-arrows{ position:absolute; left:0; top:0; width:56px; height:28px; display:flex; align-items:center;
  transform:translateX(-50%); transition:transform .22s ease; }
.gs-arr{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; transition:opacity .2s ease; }
.gs-arr svg{ width:16px; height:16px; }
.gs-arr--in{ color:var(--accent-light); opacity:0; }
.gs-arr--out{ color:var(--accent); opacity:1; }
.btn-getstarted:hover .gs-arrows{ transform:translateX(0); }
.btn-getstarted:hover .gs-arr--in{ opacity:1; }
.btn-getstarted:hover .gs-arr--out{ opacity:0; }

/* ===== Меню в хедере: sibling-focus blur (соседи размываются) ===== */
.nav > a{ transition:filter .2s ease-out, color .12s ease; }
.nav > a:not(:last-child){ padding-right:28px; }
.nav:has(> a:hover) > a:not(:hover),
.nav:has(> a:focus-visible) > a:not(:focus-visible){ filter:blur(3.5px); }
@media (prefers-reduced-motion: reduce){
  .nav:has(> a:hover) > a:not(:hover),
  .nav:has(> a:focus-visible) > a:not(:focus-visible){ filter:none; }
  .nav > a{ transition:color .12s ease; }
}

/* ── Флип-ротация ниши в заголовке hero-niches ── */
.niche-flip-title{ white-space:nowrap; }
.flip-words{
  display:inline-block;
  color:var(--accent);
  vertical-align:baseline;
  white-space:nowrap;
  will-change:transform, opacity;
}

/* ── Живой демо-чат в hero: поле ввода ── */
/* Рамка/фон — на обёртке; сам input прозрачный без рамки (без задвоения) */
.hc-inwrap{
  position:relative; flex:1; display:flex; align-items:center; min-width:0;
  border:1px solid #e0ded7; border-radius:12px; background:#faf9f6;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.hc-input{
  flex:1; width:100%; box-sizing:border-box;
  border:0; outline:0; background:transparent;
  padding:10px 14px; font-size:14px; font-family:inherit; color:#2b2b2b;
}
.hc-ph{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  pointer-events:none; font-size:14px; font-weight:500; white-space:nowrap;
  background:linear-gradient(90deg,#b4b1a8 0%,#b4b1a8 38%,var(--accent) 50%,#b4b1a8 62%,#b4b1a8 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:hcPhShimmer 2.6s linear infinite;
}
.hc-input:focus + .hc-ph, .hc-ph.hidden{ display:none; }
@keyframes hcPhShimmer{ 0%{ background-position:120% 0; } 100%{ background-position:-120% 0; } }

/* Призыв написать: мягкое пульсирующее свечение поля до первого сообщения */
.demo-chat-input:not(.live) .hc-inwrap{ animation:hcFieldGlow 2.2s ease-in-out infinite; }
.hc-inwrap:focus-within{ animation:none !important; border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px var(--accent-light); }
@keyframes hcFieldGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(21,150,95,0); border-color:#e0ded7; }
  50%{ box-shadow:0 0 0 5px rgba(21,150,95,.14); border-color:var(--accent); }
}

/* Кнопка отправки: неактивна до ввода, пульсирует-приглашает до первого сообщения */
.demo-chat-input .hc-send{ opacity:.4; cursor:default; transition:opacity .2s ease, transform .1s ease; }
.demo-chat-input:not(.live) .hc-send{ animation:hcSendPulse 2.2s ease-in-out infinite; opacity:.72; }
.demo-chat-input .hc-send.active{ opacity:1; cursor:pointer; }
.demo-chat-input .hc-send.active:hover{ transform:scale(1.08); }
.demo-chat-input .hc-send.active:active{ transform:scale(.92); }
@keyframes hcSendPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(21,150,95,.32); transform:scale(1); }
  50%{ box-shadow:0 0 0 7px rgba(21,150,95,0); transform:scale(1.05); }
}

/* ── 152-ФЗ: блок согласия в hero-чате ── */
.hc-consent{
  align-self:stretch;
  background:#fff8ec; border:1px solid #f0c98a; border-radius:12px;
  padding:12px 14px; font-size:13px; line-height:1.4; color:#7a5a1e;
  animation:hcConsentIn .3s ease both;
}
.hc-consent p{ margin:0 0 9px; font-weight:600; }
.hc-consent__warn{ margin-right:2px; }
.hc-consent__lb{ display:flex; gap:9px; align-items:flex-start; cursor:pointer; }
.hc-consent__cb{ margin-top:1px; width:16px; height:16px; flex:none; accent-color:var(--accent); cursor:pointer; }
.hc-consent__lb span{ font-weight:500; color:#6b5a3a; }
.hc-consent a{ color:var(--accent); text-decoration:underline; }
.hc-consent.done{ opacity:.55; }
.hc-consent.done .hc-consent__lb{ cursor:default; }
@keyframes hcConsentIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }