/* ===== 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;}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Wiki Article Link */
.wiki-article {
    color: #787878;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.3s ease;
    cursor: pointer;
    position: relative;
}

.wiki-article:hover {
    color: #0b0b0b;
}

/* Wiki Tooltip Card */
.wiki-tooltip-card {
    position: absolute;
    z-index: 9999;
    width: 320px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    padding: 15px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: auto;
}

.wiki-tooltip-card.active {
    opacity: 1;
    visibility: visible;
}

.wiki-tooltip-link {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.wiki-tooltip-image-wrapper {
    width: 100%;
    height: 180px;
    border-radius: 8px;
    overflow: hidden;
    display: none;
}

.wiki-tooltip-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wiki-tooltip-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wiki-tooltip-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: #252525;
    margin: 0;
}

.wiki-tooltip-desc {
    font-size: 13px;
    line-height: 1.5;
    color: #a9a8b0;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}