/* =========================================================================
   Central Clinic — презентация «Контроль коммуникаций администраторов».
   Доп-стили поверх NZT/Danifo site.css (импортируется первым в index.html).
   ========================================================================= */

/* ── Local accents ── */
:root {
  --green:      #178A53;
  --green-soft: rgba(23,138,83,.10);
  --red:        #C0392B;
  --red-soft:   rgba(192,57,43,.07);
  --amber-soft: rgba(244,121,41,.10);
  --bg-gray:    #f6f5fc;
  --shadow:     0 6px 18px rgba(41,37,106,.10);
}

/* Hero: чуть компактнее заголовок под длинную фразу (иначе «администраторов» ломается) */
.hero__title { max-width: 20ch; font-size: clamp(32px, 5.1vw, 60px); overflow-wrap: normal; }
.hero__badges { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.9); font-size: 14px; font-weight: 700;
}
.hero__badge svg { width: 16px; height: 16px; stroke: var(--danifo-orange); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.section--gray { background: var(--bg-gray); }

/* ── Problem cards (red accent) ── */
.problem-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-5); }
.problem-card {
  background: var(--surface-default); border: 1px solid var(--border-subtle);
  border-top: 4px solid var(--red); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.problem-card__icon { width: 56px; height: 56px; border-radius: var(--radius-md);
  background: var(--red-soft); display: flex; align-items: center; justify-content: center; }
.problem-card__icon svg { width: 30px; height: 30px; color: var(--red); stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.problem-card__tag { font-family: var(--danifo-font-body); font-weight: 700; font-size: var(--ts-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--red); }
.problem-card__title { font-family: var(--danifo-font-display); font-weight: 900; font-size: var(--ts-h3); line-height: var(--lh-h3); color: var(--text-primary); }
.problem-card__body { font-size: var(--ts-body); line-height: var(--lh-body); color: var(--text-secondary); }
.problem-card__cost { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--border-subtle);
  font-size: 14px; font-weight: 700; color: var(--red); display: flex; align-items: center; gap: 8px; }

/* ── Pipeline (how it works) ── */
.pipeline { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--space-3); align-items: stretch; }
.pipe-step { position: relative; background: var(--surface-default); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.section--navy .pipe-step { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.pipe-step__num { font-family: var(--danifo-font-display); font-weight: 900; font-size: 14px; color: var(--danifo-orange); }
.pipe-step__icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--surface-purple-soft);
  display: flex; align-items: center; justify-content: center; }
.section--navy .pipe-step__icon { background: rgba(244,121,41,.16); }
.pipe-step__icon svg { width: 26px; height: 26px; color: var(--danifo-orange); stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pipe-step__title { font-family: var(--danifo-font-body); font-weight: 700; font-size: 15px; line-height: 1.3; color: inherit; }
.pipe-step__body { font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.section--navy .pipe-step__body { color: rgba(255,255,255,.7); }
.pipe-step__arrow { position: absolute; right: -14px; top: 50%; transform: translateY(-50%); z-index: 2;
  color: var(--danifo-orange); font-size: 20px; line-height: 1; }
.pipe-step:last-child .pipe-step__arrow { display: none; }

/* ── Capability split (text + preview) ── */
.cap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; }
.cap--rev .cap__media { order: -1; }
.cap__list { list-style: none; margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.cap__list li { position: relative; padding-left: var(--space-6); font-size: var(--ts-body); line-height: var(--lh-body); color: var(--text-secondary); }
.cap__list li::before { content: ""; position: absolute; left: 0; top: .15em; width: 22px; height: 22px; border-radius: 50%;
  background: var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23178A53' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* preview cards inside capabilities */
.preview-card { background: var(--surface-default); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: 0 18px 40px -22px rgba(41,37,106,.35); }
.preview-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-4); font-weight: 700; font-size: 13px; color: var(--text-secondary); }
.preview-card__head .dot { width: 9px; height: 9px; border-radius: 50%; }

/* tone preview */
.tone-row { display: flex; align-items: center; gap: var(--space-4); }
.tone-orb { width: 56px; height: 56px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.tone-orb svg { width: 28px; height: 28px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tone-orb--bad { background: var(--red); }
.tone-orb__cap { font-family: var(--danifo-font-display); font-weight: 900; font-size: 18px; color: var(--red); }
.tone-quote { margin-top: var(--space-4); padding: 14px 16px; border-radius: var(--radius-md);
  background: var(--red-soft); border-left: 3px solid var(--red); font-size: 14px; line-height: 1.5; color: var(--text-primary); font-style: italic; }

/* call-center ticket preview */
.ticket-preview { display: flex; gap: var(--space-4); align-items: flex-start; border-radius: var(--radius-md);
  padding: 18px 20px; color: #fff; background: linear-gradient(135deg,#F47929,#d96920); }
.ticket-preview__icon { width: 42px; height: 42px; flex: none; border-radius: 11px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; }
.ticket-preview__icon svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ticket-preview__kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; margin-bottom: 5px; }
.ticket-preview__title { font-family: var(--danifo-font-display); font-weight: 900; font-size: 16px; margin-bottom: 5px; }
.ticket-preview__body { font-size: 13.5px; line-height: 1.5; opacity: .95; }
.sched-mini { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); }
.sched-mini__tile { flex: 1; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 12px 14px; }
.sched-mini__lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 6px; }
.sched-mini__val { font-family: var(--danifo-font-display); font-weight: 900; font-size: 17px; }
.sched-mini__val .bad { color: var(--red); }

/* ── Pricing / package ── */
.price-card { max-width: 860px; margin-inline: auto; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg); padding: var(--space-7); }
.price-incl { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-4); }
.price-incl li { position: relative; padding-left: var(--space-6); font-size: var(--ts-body); line-height: 1.5; color: rgba(255,255,255,.88); }
.price-incl li::before { content: ""; position: absolute; left: 0; top: .15em; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(244,121,41,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F47929' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 14px no-repeat; }
.price-rows { border-top: 1px solid rgba(255,255,255,.16); padding-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.price-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.price-row__label { font-size: var(--ts-body); color: rgba(255,255,255,.8); }
.price-row__val { font-family: var(--danifo-font-display); font-weight: 700; font-size: 18px; color: #fff; }
.price-row--final { border-top: 1px solid rgba(255,255,255,.16); padding-top: var(--space-4); margin-top: var(--space-2); }
.price-row--final:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.price-row--final .price-row__label { color: #fff; font-weight: 700; font-size: var(--ts-lead); }
.price-row__final { font-family: var(--danifo-font-display); font-weight: 900; font-size: clamp(26px,3vw,34px); color: var(--danifo-orange); }
.price-note { margin-top: var(--space-5); font-size: var(--ts-small); color: rgba(255,255,255,.55); }

/* ── Demo CTA band ── */
.demo-cta { text-align: center; }
.demo-cta .t-h2 { max-width: 18ch; margin-inline: auto; }
.demo-cta__sub { max-width: 56ch; margin: var(--space-4) auto var(--space-6); color: rgba(255,255,255,.82);
  font-size: var(--ts-lead); line-height: var(--lh-lead); }

/* Оранжевый акцентный фон демо-блока (отделяет его от синей «Стоимости») */
.demo-band { background: var(--danifo-orange); }
.demo-band .df-eyebrow,
.demo-band .df-eyebrow--on-dark { color: #fff; }
.demo-band .t-h2 { color: #fff; }
.demo-band .demo-cta__sub { color: rgba(255,255,255,.92); }
.demo-band .df-cta { background: #fff; color: var(--danifo-navy); border-color: #fff; }
.demo-band .df-cta:hover,
.demo-band .df-cta:focus-visible { background: #0E0B2C; color: #fff; border-color: #0E0B2C; }

/* ── Contacts: выровнять под карточку цены (860px по центру) ── */
#contacts .contacts { max-width: 860px; margin-inline: auto; }
#contacts .contact-list { align-items: flex-end; }   /* телефон к правому краю карточки */

/* ── Responsive ── */
@media (max-width: 980px) {
  .pipeline { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pipe-step__arrow { display: none; }
  .cap { grid-template-columns: 1fr; gap: var(--space-5); }
  .cap--rev .cap__media { order: 0; }
  #contacts .contact-list { align-items: flex-start; }   /* телефон слева под заголовком на мобиле */
}
@media (max-width: 640px) {
  .problem-grid { grid-template-columns: 1fr; }
  .price-incl { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .pipeline { grid-template-columns: 1fr; }
}