/* Плюс Офис — палитра и то, что есть только здесь.
 *
 * Предмет — сети и мониторинг, поэтому цвет взят у приборной панели, а не
 * у «корпоративного сайта»: спокойный тёмно-синий как основной и один
 * сигнальный зелёный — тот самый, которым на мониторинге горит «всё живо».
 *
 * Зелёного намеренно мало и только по делу. Если им красить кнопки и
 * заголовки, он перестанет значить «работает» — а это единственное, что
 * клиент хочет видеть на экране мониторинга.
 */

:root {
    --c-ink: #16202b;
    --c-text: #1b2733;
    --c-muted: #5b6b7a;

    --c-bg: #f6f8fa;
    --c-surface: #ffffff;
    --c-surface-2: #eef2f6;
    --c-border: #dde5ec;
    --c-border-strong: #c6d3de;

    --c-primary: #1f5f8b;
    --c-primary-dark: #164863;
    --c-primary-soft: #e8f1f7;

    --c-link: #1f5f8b;
    --c-link-hover: #164863;
    --c-focus: #1f5f8b;
    --c-accent: #1f5f8b;

    --c-ok: #15803d;
    --c-ok-soft: #e8f5ec;
    --c-err: #b42318;
    --c-err-soft: #fdecea;
}

/* ── Шапка ────────────────────────────────────────────────────────────────*/
.site-head { background: var(--c-ink); border-bottom: 0; }
.site-head .brand { color: #fff; }
.site-head .brand:hover { color: #fff; }
.brand-plus { color: #6fb3d9; font-weight: 800; }
.head-contact { color: #9db4c6; font-size: .92rem; text-decoration: none; }
.head-contact:hover { color: #fff; }

/* ── Первый экран ─────────────────────────────────────────────────────────*/
.hero {
    padding: var(--s-9) 0;
    background:
        radial-gradient(900px 380px at 85% -10%, #1e3a52 0%, transparent 65%),
        var(--c-ink);
    color: #e8eef4;
}
.hero h1 { color: #fff; max-width: 20ch; }
.hero .lead { color: #b9c9d6; max-width: 60ch; font-size: 1.12rem; }
.hero .btn-outline { color: #cfe0ec; border-color: #3d5a72; }
.hero .btn-outline:hover { background: #223648; color: #fff; }

/* ── Панель состояния: показываем предмет, а не абстракцию ────────────────*/
.board {
    background: #101a24;
    border: 1px solid #24384a;
    border-radius: var(--radius);
    padding: var(--s-4);
    font-family: var(--mono);
    font-size: .86rem;
}
.board-row {
    display: flex; align-items: center; gap: var(--s-3);
    padding: 9px 0;
    border-bottom: 1px solid #1c2b3a;
}
.board-row:last-child { border-bottom: 0; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.dot-up { background: #2fbf6b; box-shadow: 0 0 0 3px rgba(47, 191, 107, .18); }
.dot-warn { background: #e0a010; box-shadow: 0 0 0 3px rgba(224, 160, 16, .18); }
.board-name { color: #dbe6ef; flex: 1; }
.board-val { color: #7d93a6; }

/* ── Услуги ───────────────────────────────────────────────────────────────*/
.svc {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--s-5);
    height: 100%;
}
.svc-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 8px;
    background: var(--c-primary-soft); color: var(--c-primary-dark);
    font-weight: 700; margin-bottom: var(--s-3);
}
.svc h3 { margin-bottom: var(--s-2); }

/* ── Случай «когда провайдер не вариант» ──────────────────────────────────*/
.case {
    display: grid; gap: var(--s-3);
    padding: var(--s-4);
    border-left: 3px solid var(--c-primary);
    background: var(--c-surface);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.case b { color: var(--c-ink); }

/* ── Партнёры ─────────────────────────────────────────────────────────────*/
.partners { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.partner {
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    text-decoration: none;
    color: inherit;
}
.partner:hover { border-color: var(--c-primary); color: inherit; }
.partner b { display: block; color: var(--c-ink); }
.partner span { font-size: .9rem; color: var(--c-muted); }