/* ===== base (если уже есть - не дублируйте) ===== */
:root{
  --ux-text:#0f172a;
  --ux-muted:rgba(15,23,42,.68);
  --ux-border:rgba(15,23,42,.12);
  --ux-surface:#f7f8fa;
  --ux-accent:#2563eb;
  --ux-radius:16px;
  --ux-radius-sm:12px;
  --ux-gap:16px;
  --ux-shadow:0 10px 30px rgba(15,23,42,.08);
}

.ux-section{padding:24px;border:1px solid var(--ux-border);border-radius:var(--ux-radius);background:#fff;}
.ux-title{margin:0 0 16px 0;font-size:22px;line-height:1.25;letter-spacing:-.01em;color:var(--ux-text);}

.ux-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ux-gap);}
@media (max-width:1024px){.ux-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.ux-grid{grid-template-columns:1fr;}}

.ux-card{padding:16px;background:var(--ux-surface);border:1px solid var(--ux-border);border-radius:var(--ux-radius-sm);color:var(--ux-text);font-size:15px;line-height:1.35;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.ux-card:hover{transform:translateY(-2px);box-shadow:var(--ux-shadow);border-color:rgba(37,99,235,.35);}

.ux-card--icon{display:flex;gap:10px;align-items:flex-start;}
.ux-icon{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--ux-accent);color:#fff;font-size:14px;line-height:26px;text-align:center;margin-top:1px;}

/* ===== 1) promo cards ===== */
.ux-section--promo .ux-title{margin-bottom:14px;}
.ux-section--promo .ux-card{background:#fff;}

/* ===== 2) process (simple, без карточек внутри) ===== */
.ux-section--process{border:0;background:transparent;padding:0;}
.ux-section--process .ux-title{margin:0 0 14px 0;}
.ux-process{display:grid;gap:18px;}
.ux-step{display:grid;gap:8px;padding:14px 0;border-top:1px solid var(--ux-border);}
.ux-step:first-child{border-top:0;padding-top:0;}
.ux-step__title{font-size:16px;font-weight:600;color:var(--ux-text);}
.ux-step__list{margin:0;padding-left:18px;display:grid;gap:6px;}
.ux-step__list li{font-size:14.5px;line-height:1.45;color:var(--ux-muted);}

/* ===== 3) benefits (ол) ===== */
.ux-section--benefits .ux-title{margin-bottom:12px;}
.ux-benefits{margin:0;padding-left:18px;display:grid;gap:10px;}
.ux-benefits li{color:var(--ux-muted);line-height:1.5;}
.ux-benefits strong{color:var(--ux-text);font-weight:600;}

/* ===== 4) docs (списки с группами) ===== */
.ux-section--docs .ux-title{margin-bottom:10px;}
.ux-lead{margin:0 0 12px 0;color:var(--ux-muted);line-height:1.55;}
.ux-kv{margin:0;padding:0;display:grid;gap:10px;list-style:none;}
.ux-kv li{display:flex;gap:10px;align-items:flex-start;color:var(--ux-muted);line-height:1.5;}
.ux-kv b{min-width:56px;color:var(--ux-text);font-weight:700;}
.ux-list{margin:0;padding-left:18px;display:grid;gap:8px;}
.ux-list li{color:var(--ux-muted);line-height:1.5;}

/* ===== 5) audience (заказчики) ===== */
.ux-section--audience .ux-title{margin-bottom:10px;}