:root{
  --w:1200px; --g:24px; --txt:17px; --h1:42px; --h2:28px;
  --fg:#0f172a; --muted:#475569; --line:#e5e7eb; --brand:#2563eb; --bg:#ffffff; --bg-alt:#f8fafc;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:400 var(--txt)/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--fg);background:var(--bg)}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
.nx-wrap{max-width:var(--w);margin:0 auto;padding:0 var(--g)}
/* Header */
.nx-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:50}
.nx-header .nx-wrap{display:flex;align-items:center;gap:18px;padding:12px var(--g)}
.nx-logo{font-weight:700;color:var(--fg);text-decoration:none}
.nx-nav{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.nx-nav a{color:var(--fg)} .nx-nav a:hover{color:var(--brand)}
.nx-btn{margin-left:auto;background:var(--brand);color:#fff;padding:10px 14px;border-radius:10px}
.nx-btn:hover{opacity:.92}
/* Main + sections */
.nx-main{padding:28px 0}
section{margin:36px 0}
.lead{font-size:19px;color:var(--muted)}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.badge{background:var(--bg-alt);border:1px solid var(--line);padding:6px 10px;border-radius:999px;font-size:14px;color:var(--muted)}
.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
.card h3{margin:0 0 8px}
ol.steps{counter-reset:step;list-style:none;padding:0;margin:0}
ol.steps li{position:relative;padding-left:38px;margin:12px 0}
ol.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:.1rem;width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px}
.cta{background:var(--bg-alt);border:1px solid var(--line);padding:24px;border-radius:16px}
footer.nx-footer{border-top:1px solid var(--line);margin-top:36px}
footer .nx-wrap{padding:16px var(--g);font-size:14px;color:var(--muted)}
@media (max-width:900px){ .grid.cols-3{grid-template-columns:1fr} .grid.cols-2{grid-template-columns:1fr} .nx-btn{order:3;width:100%;text-align:center;margin-left:0} .nx-header .nx-wrap{flex-wrap:wrap} h1{font-size:34px} }
h1{font-size:var(--h1);line-height:1.15;margin:10px 0 8px}
h2{font-size:var(--h2);line-height:1.25;margin:24px 0 12px}

/* ===== Nextep Light UI tokens ===== */
:root{
  --nx-bg:#f7f9fc;
  --nx-card:#ffffff;
  --nx-text:#111827;
  --nx-muted:#6b7280;
  --nx-border:#e5e7eb;
  --nx-shadow:0 10px 24px rgba(17,24,39,.07);
  --nx-accent:#2563eb;         /* основной акцент (кнопки) */
  --nx-accent-600:#1d4ed8;     /* hover акцента */
}

/* База */
html,body{background:var(--nx-bg);color:var(--nx-text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;}
.container{max-width:1100px;margin:0 auto;padding:32px 20px;}
h1{font-size:clamp(28px,3.2vw,42px);line-height:1.2;margin:0 0 14px;}
h2{font-size:clamp(22px,2.6vw,30px);margin:28px 0 16px;}
p{color:var(--nx-muted);}

/* Кнопки */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;border-radius:12px;padding:12px 16px;
     text-decoration:none;border:1px solid transparent;transition:.15s ease;}
.btn-primary{background:var(--nx-accent);color:#fff;border-color:var(--nx-accent);}
.btn-primary:hover{background:var(--nx-accent-600);border-color:var(--nx-accent-600);transform:translateY(-1px);}
.btn-ghost{background:#fff;border-color:var(--nx-border);color:var(--nx-text);}
.btn-ghost:hover{border-color:#cfd6e6;box-shadow:0 2px 0 rgba(0,0,0,.02);}
.btn-sm{padding:8px 12px;font-size:14px;border-radius:10px;}

/* Карточки и сетки */
.grid{display:grid;gap:18px;grid-template-columns:repeat(12,1fr);}
.card{background:var(--nx-card);border:1px solid var(--nx-border);border-radius:18px;padding:18px;box-shadow:var(--nx-shadow);}
.card h3{margin:0 0 8px;font-size:20px;}
.badges,.kpis{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.badge,.kpi{background:#f3f4f6;border:1px solid var(--nx-border);padding:6px 10px;border-radius:999px;font-size:13px;color:#374151;font-weight:600;}
@media (max-width:900px){ .section .card{grid-column:span 12;} }

/* Hero (верхний блок) */
.hero{background:linear-gradient(180deg,#ffffff 0%,#f2f6ff 100%);border:1px solid var(--nx-border);
      border-radius:20px;padding:36px;margin:20px 0 28px;box-shadow:var(--nx-shadow);}
.hero p.lead{color:var(--nx-muted);margin:8px 0 16px;max-width:800px;}

/* Секции */
.section{margin:22px 0 28px;}
.section .card{grid-column:span 4;}       /* 3 карточки в ряд на десктопе */

/* FAQ */
.faq{background:var(--nx-card);border:1px solid var(--nx-border);border-radius:20px;padding:24px;box-shadow:var(--nx-shadow);}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px;}
.faq .item{background:#fff;border:1px solid var(--nx-border);border-radius:16px;padding:16px;box-shadow:0 8px 16px rgba(17,24,39,.06);}
.faq .q{font-weight:700;color:var(--nx-text);margin-bottom:8px;}
@media(max-width:800px){.faq-grid{grid-template-columns:1fr;}}

/* ROI-калькулятор (#pilot) — светлый */
#pilot{background:var(--nx-card);border:1px solid var(--nx-border);border-radius:20px;padding:24px;box-shadow:var(--nx-shadow);}
#pilot .row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
#pilot label{font-weight:600;font-size:14px;color:#374151;margin:0 0 6px;display:block;}
#pilot input,#pilot textarea,#pilot select{
  width:100%;background:#fff;border:1px solid #d1d5db;border-radius:12px;padding:12px 14px;color:var(--nx-text);
  outline:none;transition:.15s;box-shadow:0 1px 0 rgba(0,0,0,.02);
}
#pilot input::placeholder,#pilot textarea::placeholder{color:#9ca3af;opacity:1;}
#pilot input:focus,#pilot textarea:focus,#pilot select:focus{border-color:var(--nx-accent);box-shadow:0 0 0 4px rgba(37,99,235,.12);}
#pilot .calc-output{background:#f3f4f6;border:1px dashed #d1d5db;border-radius:12px;padding:12px 14px;color:#111827;font-weight:600;}
@media(max-width:900px){#pilot .row{grid-template-columns:1fr;}}

/* Низ страницы: дублируем CTA красиво */
.footer-cta{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap;}
.notice{background:#f8fafc;border:1px solid var(--nx-border);border-radius:16px;padding:14px;color:#475569;}

/* ========== Nextep • Bitrix-like Light Theme ========== */
:root{
  --nx-bg:        #F3F6FB;   /* общий фон */
  --nx-surface:   #FFFFFF;   /* карточки/блоки */
  --nx-surface-2: #F7F9FD;   /* мягкие плашки */
  --nx-text:      #1E2633;   /* основной текст */
  --nx-muted:     #5B6B84;   /* вторичный текст */
  --nx-border:    #E6ECF3;   /* границы */
  --nx-brand:     #3F7AEC;   /* синий, как в Б24 */
  --nx-accent:    #7B61FF;   /* фиолетовый акцент */
  --nx-info:      #2FB4D3;
  --nx-success:   #2DBE60;
  --nx-warning:   #FFB020;
  --nx-danger:    #F25353;
  --nx-radius:    18px;
  --nx-shadow:    0 12px 24px rgba(24,39,75,.08), 0 2px 4px rgba(24,39,75,.05);
}

html,body{
  background: linear-gradient(180deg,#F5F8FD 0%, #EFF3FA 60%, #EAEFF8 100%);
  color: var(--nx-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Заголовки и параграфы */
h1,h2,h3{ color:#121824; letter-spacing:.2px }
p      { color:var(--nx-muted) }

/* Ссылки */
a{ color:var(--nx-brand); text-decoration: none }
a:hover{ color:var(--nx-accent); text-decoration: underline }

/* Хедер: делаем светлым и «стеклянным» */
#header{
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--nx-border);
}
#header a{ color:#172036 }
#header .site-title a{ font-weight:700 }

/* Общие секции */
.section{ padding: 36px 0 }
.section-light{ background: transparent }
.section-contrast{
  background: linear-gradient(135deg,#ECF2FF 0%, #F8F5FF 100%);
}

/* Карточки */
.card{
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius);
  box-shadow: var(--nx-shadow);
  padding: 22px;
}
.card h3{ margin-top:0 }

/* Бейджи/чипсы (метрики: –22% и т.д.) */
.badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background: var(--nx-surface-2);
  border:1px solid var(--nx-border);
  color:#2A3850; font-weight:600; font-size:14px
}

/* Кнопки */
.btn{ 
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px; border-radius:12px; border:1px solid transparent;
  font-weight:700; line-height:1; cursor:pointer; transition:.15s ease
}
.btn-primary{
  color:#fff;
  background: linear-gradient(135deg,var(--nx-brand) 0%, var(--nx-accent) 100%);
  box-shadow: 0 8px 16px rgba(63,122,236,.25);
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 12px 22px rgba(63,122,236,.28) }
.btn-ghost{
  background: var(--nx-surface);
  border:1px solid var(--nx-border);
  color:#1b2233;
}
.btn-ghost:hover{ background:#FAFBFE }

/* FAQ — светлая коробка + белые карточки внутри */
.faq-wrap{
  background: linear-gradient(180deg,#FFFFFF 0%, #F4F7FD 100%);
  border:1px solid var(--nx-border);
  border-radius: 24px;
  box-shadow: var(--nx-shadow);
  padding: 26px;
}
.faq-grid{ display:grid; gap:18px; grid-template-columns: repeat(2, minmax(0,1fr)) }
.faq-item{ @apply .card; }     /* если @apply не работает, просто оставь .card */

/* ROI-калькулятор */
.calc{ background: var(--nx-surface); border:1px solid var(--nx-border);
       border-radius: var(--nx-radius); box-shadow: var(--nx-shadow); padding:22px }
.calc label{ color:var(--nx-muted); font-size:14px }
.calc input, .calc textarea, .calc select{
  width:100%; padding:12px 14px; border-radius:12px;
  background:#FFFFFF; color:#1c2434;
  border:1px solid var(--nx-border); outline:none
}
.calc input:focus, .calc textarea:focus, .calc select:focus{
  border-color: var(--nx-brand); box-shadow: 0 0 0 3px rgba(63,122,236,.15)
}
.calc-output{
  background: #F8FAFF; border:1px dashed #CFE0FF; border-radius:12px;
  padding:12px 14px; color:#1b2233; font-weight:700
}

/* Секции «Готовые решения» — сетка карточек */
.solutions{ display:grid; gap:18px; grid-template-columns: repeat(2, minmax(0,1fr)) }
.solution-card .meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px }

/* Футер */
#footer{
  background:#FFFFFF; border-top:1px solid var(--nx-border); color:var(--nx-muted)
}

/* Маленькие утилиты */
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}

/* ====== Hero (светлый, в стиле Битрикс) ====== */
.hero{ padding:56px 0 24px; }
.hero-grid{ display:grid; gap:24px; grid-template-columns: 1fr; }
.hero-title{
  font-weight:800; letter-spacing:.2px; margin:0 0 10px;
  /* ограничиваем длину строки, чтобы не «разваливалось» */
  max-width: 18ch;
  font-size:40px; line-height:1.15;
}
.hero-subtitle{ font-size:18px; color:var(--nx-muted); max-width:60ch; margin:0 0 18px; }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.hero-metrics{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 12px; }
.hero-strip{ color:var(--nx-muted); margin:0; }
.hero-strip .nda{ opacity:.7; border:1px solid var(--nx-border); border-radius:6px; padding:2px 6px; margin-left:6px; }

/* Правая колонка c PDF */
.hero-aside{ display:none; }
.pdf-card h3{ margin:0 }
.pdf-card p{ margin:6px 0 12px; color:var(--nx-muted) }

/* Иконка PDF у вторичных кнопок */
.btn-pdf::before{
  content:""; display:inline-block; width:16px; height:16px; margin-right:6px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%231e2633'><path d='M10.5 1H4.8C3.81 1 3 1.81 3 2.8v10.4c0 .99.81 1.8 1.8 1.8h6.4c.99 0 1.8-.81 1.8-1.8V5.5L10.5 1zM11 5.5h2.5L11 3v2.5z'/><path d='M5 11.5h6v1H5zM5 9.5h6v1H5z'/></svg>") no-repeat center/contain;
}

/* Десктоп: делаем двуколоночный герой */
@media (min-width: 1024px){
  .hero{ padding-top:72px; }
  .hero-grid{ grid-template-columns: 1.2fr 0.8fr; align-items:start; }
  .hero-title{ font-size:56px; }
  .hero-aside{ display:block; }
}

/* Карточки в гриде должны растягиваться, а не центрироваться */
.grid > .card { width: 100%; max-width: 100%; margin: 0; }
.grid { justify-items: stretch; align-items: start; }

/* На всякий случай обнулим левый отступ именно у первой */
.grid > .card:first-child { margin-left: 0 !important; }