/* Публичный сайт-описание сервиса crm.chapchan.kg (для клиентов и ревью Meta). */
:root {
  --brand: #00b14f;
  --brand-600: #00a046;
  --brand-700: #007a38;
  --surface: #fafdfb;
  --surface-soft: #f0f9f4;
  --ink: #0f1a14;
  --muted: #5b6b62;
  --line: #e2ece6;
  --radius: 16px;
  --max: 960px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--surface);
  line-height: 1.6;
}

a { color: var(--brand-700); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* Header */
.site-header {
  border-bottom: 1px solid var(--line);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  padding-bottom: 14px;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 20px;
  color: var(--ink);
  text-decoration: none;
}
.brand .dot {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--brand);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 900;
}
.nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.nav a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; }
.nav a:hover { color: var(--ink); }

.lang-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lang-switch button {
  border: 0; background: #fff; color: var(--muted);
  padding: 6px 12px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.lang-switch button.active { background: var(--brand); color: #fff; }

/* Hero */
.hero { background: linear-gradient(180deg, var(--surface-soft), var(--surface)); padding: 64px 0 40px; }
.hero h1 { font-size: 40px; line-height: 1.15; margin: 0 0 16px; letter-spacing: -0.5px; }
.hero p.lede { font-size: 19px; color: var(--muted); margin: 0 0 24px; max-width: 620px; }
.badge {
  display: inline-block; background: #fff; border: 1px solid var(--line);
  color: var(--brand-700); font-size: 13px; font-weight: 700;
  padding: 6px 12px; border-radius: 999px; margin-bottom: 20px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border-radius: 12px; font-size: 15px; font-weight: 700;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease;
}
.btn-sm { padding: 8px 16px; font-size: 14px; border-radius: 10px; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-600); filter: none; }
.btn-outline { background: #fff; color: var(--brand-700); border-color: var(--line); }
.btn-outline:hover { background: var(--surface-soft); color: var(--ink); }

/* Sections */
section.block { padding: 44px 0; border-top: 1px solid var(--line); }
section.block h2 { font-size: 26px; margin: 0 0 18px; letter-spacing: -0.3px; }
section.block h3 { font-size: 18px; margin: 24px 0 8px; }
section.block p { color: #2a3a31; margin: 0 0 14px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.card .n { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-soft); color: var(--brand-700); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.card h4 { margin: 0 0 6px; font-size: 16px; }
.card p { margin: 0; color: var(--muted); font-size: 14px; }

.note { background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; color: #2a3a31; }

ul.clean { margin: 0 0 14px; padding-left: 20px; color: #2a3a31; }
ul.clean li { margin-bottom: 8px; }

/* Legal pages */
.legal { padding: 40px 0 20px; }
.legal h1 { font-size: 30px; margin: 0 0 6px; }
.legal .updated { color: var(--muted); font-size: 14px; margin: 0 0 26px; }
.legal h2 { font-size: 20px; margin: 28px 0 10px; }
.legal p, .legal li { color: #2a3a31; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: #fff; padding: 30px 0; margin-top: 20px; }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.site-footer a { color: var(--muted); text-decoration: none; font-size: 14px; margin-right: 16px; }
.site-footer a:hover { color: var(--ink); }
.site-footer .muted { color: var(--muted); font-size: 13px; }

/* Language visibility */
[data-lang] { display: none; }
body.lang-ru [data-lang="ru"] { display: revert; }
body.lang-en [data-lang="en"] { display: revert; }
/* Блочные обёртки языка */
.langblock[data-lang] { display: none; }
body.lang-ru .langblock[data-lang="ru"] { display: block; }
body.lang-en .langblock[data-lang="en"] { display: block; }

@media (max-width: 720px) {
  .hero h1 { font-size: 30px; }
  .cards { grid-template-columns: 1fr; }
}

/* Selling landing for crm.chapchan.kg. All product examples use fictional data. */
.crm-landing { background: #f7faf8; color: #102018; }
.crm-wrap { max-width: 1360px; }
.crm-header { background: rgba(255,255,255,.94); backdrop-filter: blur(18px); }
.crm-header .wrap { min-height: 72px; }
.crm-nav .btn { color: inherit; }
.crm-nav .btn-primary { color: #fff; }
.crm-hero { overflow: hidden; padding: 72px 0 56px; background: radial-gradient(circle at 80% 12%, rgba(0,177,79,.2), transparent 30%), linear-gradient(135deg, #f7fbf8 0%, #edf8f1 55%, #fafffb 100%); }
.crm-hero-grid { display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; gap: 54px; }
.crm-kicker { display: inline-flex; align-items: center; gap: 9px; border: 1px solid #cce9d7; border-radius: 999px; background: rgba(255,255,255,.75); padding: 8px 13px; color: #08723a; font-size: 12px; font-weight: 800; letter-spacing: .03em; }
.crm-kicker-dot { width: 8px; height: 8px; border-radius: 99px; background: #00b14f; box-shadow: 0 0 0 5px rgba(0,177,79,.11); }
.crm-hero h1 { max-width: 650px; margin: 22px 0 20px; font-size: clamp(42px, 4.5vw, 68px); line-height: .99; letter-spacing: -.055em; }
.crm-hero p.lede { max-width: 640px; margin: 0; color: #4a6154; font-size: 18px; line-height: 1.7; }
.btn-lg { min-height: 52px; padding: 14px 24px; border-radius: 14px; }
.btn-ghost { color: #173c27; background: #fff; border-color: #d8e8de; box-shadow: 0 8px 24px rgba(20,80,45,.06); }
.btn-dark { color: #fff; background: #102018; }
.crm-hero-note { margin: 18px 0 0; color: #61766a; font-size: 13px; }
.crm-proof-row { display: flex; flex-wrap: wrap; gap: 14px 20px; margin-top: 32px; color: #244d36; font-size: 13px; font-weight: 700; }
.crm-meta-trust { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 13px; max-width: 590px; margin-top: 23px; border: 1px solid #cfe1f4; border-radius: 15px; background: rgba(255,255,255,.82); padding: 13px 15px; box-shadow: 0 10px 28px rgba(35,91,154,.06); }
.crm-meta-mark { display: flex; align-items: center; min-width: 130px; }.crm-meta-mark img { display: block; width: 124px; height: auto; }
.crm-meta-trust > div[data-lang] > strong { display: block; color: #193b62; font-size: 12px; }.crm-meta-trust p { margin: 3px 0 0; color: #5c6e82; font-size: 10px; line-height: 1.45; }

.crm-product-demo { min-width: 0; margin-top: 66px; overflow: hidden; border: 1px solid rgba(16,32,24,.12); border-radius: 24px; background: #11161b; box-shadow: 0 30px 90px rgba(14,65,37,.23); transform: perspective(1400px) rotateY(-3deg); transform-origin: center; }
.demo-topbar { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 18px; border-bottom: 1px solid #2b333b; color: #f2f7f4; }
.demo-brand { display: flex; align-items: center; gap: 8px; font-size: 12px; }.demo-brand span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: #00b14f; color: #fff; font-weight: 900; }
.demo-dots { display: flex; gap: 5px; }.demo-dots i { width: 7px; height: 7px; border-radius: 99px; background: #59636d; }
.demo-shell { display: grid; grid-template-columns: 46px 190px minmax(320px,1fr) 185px; min-height: 440px; color: #f0f4f2; }
.demo-rail { display: flex; flex-direction: column; align-items: center; gap: 26px; padding-top: 19px; border-right: 1px solid #293038; color: #85919a; }.demo-rail b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #00b14f; color: #fff; }
.demo-list { padding: 15px 10px; border-right: 1px solid #293038; background: #151b21; }.demo-list-head,.demo-tabs { display: flex; align-items: center; justify-content: space-between; }.demo-list-head strong { font-size: 14px; }.demo-search { margin: 14px 0 10px; padding: 9px 10px; border-radius: 8px; background: #232a32; color: #87939d; font-size: 10px; }.demo-tabs { justify-content: flex-start; gap: 8px; font-size: 9px; color: #87939d; }.demo-tabs b { border-radius: 7px; background: #00b14f; padding: 6px 8px; color: #fff; }
.demo-contact { display: flex; gap: 8px; margin-top: 8px; padding: 10px 8px; border-radius: 10px; }.demo-contact.active { border: 1px solid rgba(45,212,120,.35); background: #173226; }.demo-contact strong,.demo-contact p,.demo-contact small { display: block; overflow: hidden; max-width: 130px; margin: 0; white-space: nowrap; text-overflow: ellipsis; }.demo-contact strong { font-size: 10px; }.demo-contact p { margin-top: 3px; color: #9ca7af; font-size: 9px; }.demo-contact small { margin-top: 4px; color: #6e7b84; font-size: 8px; }
.demo-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 800; }.demo-avatar.teal { background: #0ba8a0; }.demo-avatar.pink { background: #d54e85; }.demo-avatar.amber { background: #e99620; }
.demo-chat { display: flex; min-width: 0; flex-direction: column; background: #10151a; }.demo-chat-head { display: flex; align-items: center; gap: 8px; height: 58px; padding: 0 14px; border-bottom: 1px solid #293038; }.demo-chat-head strong,.demo-chat-head small { display: block; font-size: 10px; }.demo-chat-head small { margin-top: 2px; color: #849099; font-size: 8px; }.demo-manager { margin-left: auto; border: 1px solid #333d46; border-radius: 8px; padding: 6px 8px; color: #b7c0c6; font-size: 8px; }
.demo-ai { padding: 9px 14px; border-bottom: 1px solid #563c87; background: #211638; color: #d8c7ff; font-size: 9px; font-weight: 700; }.demo-messages { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px 14px; }.bubble { max-width: 75%; border-radius: 12px; padding: 9px 11px; font-size: 9px; line-height: 1.5; }.bubble time { display: block; margin-top: 5px; color: #829087; font-size: 7px; text-align: right; }.bubble.incoming { align-self: flex-start; background: #282f37; }.bubble.outgoing { align-self: flex-end; background: #00a949; color: #fff; }.bubble.outgoing time { color: #c8f3d9; }
.demo-order-card { align-self: flex-end; width: 76%; border: 1px solid #bfe8cf; border-radius: 11px; background: #f2fff6; padding: 10px 11px; color: #173c27; }.demo-order-card span,.demo-order-card strong,.demo-order-card small { display: block; }.demo-order-card span { color: #08753b; font-size: 8px; font-weight: 800; text-transform: uppercase; }.demo-order-card strong { margin-top: 4px; font-size: 10px; }.demo-order-card small { margin-top: 3px; color: #5e7868; font-size: 8px; }
.demo-composer { margin: 0 12px 12px; border: 1px solid #2b343c; border-radius: 10px; padding: 10px 11px; color: #74808a; font-size: 9px; }.demo-composer b { float: right; display: grid; place-items: center; width: 21px; height: 21px; margin-top: -5px; border-radius: 7px; background: #00b14f; color: #fff; }
.demo-profile { padding: 17px 12px; border-left: 1px solid #293038; background: #151b21; }.demo-profile > small { color: #808c95; font-size: 8px; letter-spacing: .08em; }.demo-person { display: flex; align-items: center; gap: 8px; margin: 15px 0; }.demo-person strong,.demo-person span { display: block; font-size: 10px; }.demo-person span { color: #829087; font-size: 8px; }.demo-profile dl { margin: 0; }.demo-profile dt { margin-top: 12px; color: #75818b; font-size: 8px; text-transform: uppercase; }.demo-profile dd { margin: 3px 0; font-size: 9px; }.demo-profile em { color: #4ee494; font-style: normal; }.demo-labels { display: flex; flex-wrap: wrap; gap: 5px; margin: 14px 0; }.demo-labels span { border-radius: 99px; background: #25322b; padding: 4px 6px; color: #a8dcb9; font-size: 7px; }.demo-profile button { width: 100%; border: 0; border-radius: 8px; background: #00b14f; padding: 8px; color: #fff; font-size: 8px; font-weight: 800; }.demo-disclaimer { margin: 0; padding: 8px 14px; background: #0c1115; color: #718079; font-size: 9px; text-align: right; }

.crm-metrics { background: #102018; color: #fff; }.crm-metric-grid { display: grid; grid-template-columns: repeat(4,1fr); }.crm-metric-grid > div { padding: 28px 25px; border-left: 1px solid rgba(255,255,255,.1); }.crm-metric-grid > div:last-child { border-right: 1px solid rgba(255,255,255,.1); }.crm-metric-grid strong,.crm-metric-grid span { display: block; }.crm-metric-grid strong { color: #72e59d; font-size: 21px; }.crm-metric-grid span { margin-top: 5px; color: #b8c8bf; font-size: 12px; }
.crm-section { padding: 96px 0; }.crm-section-soft { background: #edf7f1; }.crm-section-heading { max-width: 710px; }.crm-section-heading > span,.crm-security-card .langblock > span,.crm-final-card .langblock > span { color: #078342; font-size: 12px; font-weight: 900; letter-spacing: .12em; }.crm-section-heading h2,.crm-security h2,.crm-final h2 { margin: 10px 0 14px; font-size: clamp(32px,4vw,50px); line-height: 1.08; letter-spacing: -.04em; }.crm-section-heading p { color: #5b7064; font-size: 17px; }
.crm-feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 45px; }.crm-feature-grid article { border: 1px solid #dce8e0; border-radius: 20px; background: #fff; padding: 25px; box-shadow: 0 12px 35px rgba(17,70,39,.04); }.crm-feature-grid i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: #e9f9ef; font-style: normal; }.crm-feature-grid h3 { margin: 22px 0 8px; font-size: 18px; }.crm-feature-grid p { margin: 0; color: #63776b; font-size: 14px; }
.crm-modules { border-top: 1px solid #deebe3; background: #f1f8f4; }.crm-module-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 45px; }.crm-module-card { border: 1px solid #d6e6dc; border-radius: 22px; background: #fff; padding: 27px; box-shadow: 0 14px 34px rgba(17,70,39,.045); }.crm-module-head { display: flex; align-items: center; gap: 15px; }.crm-module-head b { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; background: #102018; color: #72e59d; font-size: 12px; letter-spacing: .05em; }.crm-module-head h3 { margin: 0; font-size: 20px; letter-spacing: -.02em; }.crm-module-card ul { display: grid; gap: 9px; margin: 20px 0 0; padding: 0; color: #5b7064; list-style: none; font-size: 14px; }.crm-module-card li { position: relative; padding-left: 19px; }.crm-module-card li::before { position: absolute; top: .54em; left: 0; width: 7px; height: 7px; border-radius: 50%; background: #00b14f; content: ""; }
.crm-workflow-grid { display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; gap: 80px; }.crm-steps { margin: 0; padding: 0; list-style: none; }.crm-steps li { display: grid; grid-template-columns: 55px 1fr; gap: 17px; padding: 20px 0; border-bottom: 1px solid #cfe1d5; }.crm-steps li > b { color: #00a64a; font-size: 13px; }.crm-steps strong { font-size: 18px; }.crm-steps p { margin: 4px 0 0; color: #617469; font-size: 14px; }
.crm-security { background: #102018; color: #fff; }.crm-security-card { display: grid; grid-template-columns: 100px 1fr; gap: 25px; align-items: start; }.crm-security-icon { display: grid; place-items: center; width: 80px; height: 80px; border: 1px solid rgba(114,229,157,.45); border-radius: 24px; background: rgba(0,177,79,.15); color: #72e59d; font-size: 34px; }.crm-security-card .langblock > span { color: #72e59d; }.crm-security h2 { max-width: 760px; }.crm-security p { max-width: 780px; color: #b8c8bf; font-size: 16px; }.crm-security ul { display: flex; flex-wrap: wrap; gap: 10px 25px; padding: 0; color: #d8e6dd; list-style: none; font-size: 13px; }.crm-security li::before { content: "✓"; margin-right: 7px; color: #72e59d; }
.crm-faq { background: #f7faf8; }.crm-faq-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 13px; margin-top: 38px; }.crm-faq details { border: 1px solid #dce8e0; border-radius: 16px; background: #fff; padding: 18px 20px; }.crm-faq summary { cursor: pointer; color: #173c27; font-size: 15px; font-weight: 800; }.crm-faq details p { margin: 10px 0 0; color: #5f7367; font-size: 13px; }
.crm-request { background: #edf7f1; }.crm-request-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }.crm-request-points { display: grid; gap: 9px; margin-top: 27px; padding: 0; list-style: none; color: #365746; font-size: 14px; font-weight: 700; }.crm-request-points li::before { content: "✓"; margin-right: 9px; color: #00a64a; }.crm-lead-form { position: relative; display: grid; grid-template-columns: repeat(2,1fr); gap: 15px; border: 1px solid #d3e5da; border-radius: 22px; background: #fff; padding: 26px; box-shadow: 0 20px 50px rgba(17,70,39,.08); }.crm-lead-form label > span { display: block; margin-bottom: 6px; color: #40584b; font-size: 12px; font-weight: 750; }.crm-lead-form input:not([type="checkbox"]),.crm-lead-form textarea { width: 100%; border: 1px solid #d9e5dd; border-radius: 11px; background: #fbfdfc; padding: 11px 13px; color: #102018; font: inherit; font-size: 14px; outline: none; }.crm-lead-form input:focus,.crm-lead-form textarea:focus { border-color: #00b14f; box-shadow: 0 0 0 3px rgba(0,177,79,.1); }.crm-form-wide { grid-column: 1/-1; }.crm-form-consent { display: flex; align-items: flex-start; gap: 9px; }.crm-form-consent input { margin-top: 4px; }.crm-form-consent > span { margin: 0!important; font-weight: 500!important; }.crm-lead-status { min-height: 21px; margin: 9px 0 0; color: #5c6f63; font-size: 12px; }.crm-lead-status.success { color: #078342; font-weight: 750; }.crm-lead-status.error { color: #c13535; font-weight: 750; }.crm-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.crm-final { padding: 70px 0; background: #e7f8ed; }.crm-final-card { display: flex; align-items: center; justify-content: space-between; gap: 35px; }.crm-final-card h2 { max-width: 760px; margin-bottom: 8px; }.crm-final-card p { color: #577063; }.crm-final-actions { display: flex; flex: 0 0 auto; gap: 10px; }.crm-footer { margin-top: 0; }
.crm-landing [data-lang] { display: none; }
.crm-landing.lang-ru [data-lang="ru"], .crm-landing.lang-en [data-lang="en"] { display: revert; }

@media (max-width: 1200px) {
  .crm-nav > a:not(.btn), .crm-nav .lang-switch { display: none; }
  .crm-hero-grid { grid-template-columns: 1fr; }
  .crm-product-demo { min-width: 0; margin-top: 0; transform: none; }
  .crm-workflow-grid { grid-template-columns: 1fr; gap: 35px; }
  .crm-request-grid { grid-template-columns: 1fr; gap: 35px; }
}
@media (max-width: 780px) {
  .crm-header .wrap { min-height: 60px; }.crm-nav .btn-outline { display: none; }
  .crm-hero { padding: 50px 0 35px; }.crm-hero h1 { font-size: 42px; }.crm-hero p.lede { font-size: 16px; }
  .crm-product-demo { overflow-x: auto; border-radius: 16px; }.demo-shell { width: 760px; }.demo-topbar,.demo-disclaimer { width: 760px; }
  .crm-metric-grid { grid-template-columns: repeat(2,1fr); }.crm-feature-grid,.crm-module-grid,.crm-faq-grid { grid-template-columns: 1fr; }.crm-section { padding: 65px 0; }
  .crm-security-card { grid-template-columns: 1fr; }.crm-security-icon { width: 60px; height: 60px; }.crm-final-card { align-items: flex-start; flex-direction: column; }.crm-final-actions { width: 100%; flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .crm-hero h1 { font-size: 35px; }.crm-nav .btn-primary { padding: 8px 12px; }.crm-proof-row { display: grid; gap: 8px; }
  .crm-meta-trust { grid-template-columns: 1fr; }.crm-meta-mark { min-width: 0; }
  .crm-lead-form { grid-template-columns: 1fr; padding: 20px; }.crm-form-wide { grid-column: auto; }
  .crm-metric-grid { grid-template-columns: 1fr; }.crm-metric-grid > div { border-right: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }.crm-final-actions .btn { width: 100%; }
}