/* ============================================================
   Smart-Q / Алнико — дизайн-система сайта
   Подключается поверх Bootstrap 5.3. Цель: сдержанный
   современный корпоративный вид (B2B / госсектор).
   ============================================================ */

:root {
    /* Фирменный синий и его оттенки */
    --brand:      #2A5D84;
    --brand-700:  #224d6e;
    --brand-900:  #163750;
    --brand-050:  #eef4f9;
    --brand-100:  #dde9f2;

    /* Акцент (тёплый тех-бирюзовый) */
    --accent:     #18a0a8;
    --accent-600: #128a91;

    /* Нейтральные */
    --ink:    #1d2b38;   /* заголовки */
    --body:   #3b4a59;   /* основной текст */
    --muted:  #6c7c8b;   /* приглушённый */
    --line:   #e6ecf2;   /* тонкие линии */
    --bg:     #eef2f6;   /* фон страницы */
    --card:   #ffffff;

    --radius:    16px;
    --radius-sm: 10px;
    --shadow:    0 18px 40px -24px rgba(22, 55, 80, .35);
    --shadow-sm: 0 6px 18px -10px rgba(22, 55, 80, .30);
    --nav-h:     68px;

    --font-display: 'Onest', 'Segoe UI', system-ui, sans-serif;
    --font-body:    'Golos Text', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    background: var(--bg);          /* чтобы под body не проступал белый фон на коротких страницах */
    min-height: 100%;
}

body {
    font-family: var(--font-body);
    color: var(--body);
    background:
        radial-gradient(1200px 600px at 100% -10%, #e3edf5 0, rgba(227,237,245,0) 60%),
        var(--bg);
    background-attachment: fixed;
    line-height: 1.7;
    font-size: 16.5px;
    padding-top: var(--nav-h);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Sticky footer: подвал всегда прижат к низу окна, даже если контента мало */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
/* Обёртка контента (прямой потомок body) растягивается, выталкивая подвал вниз */
body > .mb-5 { flex: 1 0 auto; }
body > .site-footer { flex-shrink: 0; }

/* Убираем лишний разрыв между карточкой контента и подвалом:
   pb-5 у контейнера (48px) и mb-5 у обёртки (48px) складывались с собственным
   отступом карточки (36px) в ~96px. Оставляем только отступ карточки. */
body > .mb-5 { margin-bottom: 0 !important; }
body > .mb-5 > .container.pb-5 { padding-bottom: 0 !important; }

/* ---------- Типографика ---------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
}
h4 { font-size: 1.55rem; }
h5 { font-size: 1.18rem; }

p { margin-bottom: 1rem; }
strong, b { color: var(--ink); font-weight: 600; }

.fs-5 { font-size: 1.04rem !important; }

/* ---------- Навбар ---------- */
.navbar.site-nav {
    height: var(--nav-h);
    background: linear-gradient(180deg, #2f6791 0%, var(--brand) 60%, var(--brand-700) 100%);
    box-shadow: 0 6px 24px -12px rgba(13, 38, 56, .55);
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.navbar.site-nav .container { height: 100%; }
.navbar.site-nav .brand-logo img {
    height: 40px;
    width: auto;
    display: block;
    transition: transform .25s ease;
}
.navbar.site-nav .brand-logo:hover img { transform: scale(1.04); }

.navbar.site-nav .navbar-nav { gap: 2px; flex-wrap: wrap; }
.navbar.site-nav .nav-link {
    color: rgba(255,255,255,.88) !important;
    font-family: var(--font-display);
    font-size: .92rem;
    font-weight: 500;
    padding: .55rem .9rem !important;
    border: 0 !important;
    border-radius: 9px;
    position: relative;
    transition: color .2s ease, background .2s ease;
}
.navbar.site-nav .nav-link:hover,
.navbar.site-nav .nav-link.show {
    color: #fff !important;
    background: rgba(255,255,255,.12);
}
.navbar.site-nav .nav-link.active { color: #fff !important; }
.navbar.site-nav .nav-link.active::after {
    content: "";
    position: absolute;
    left: .9rem; right: .9rem; bottom: .35rem;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
}
.navbar.site-nav .dropdown-toggle::after { vertical-align: middle; opacity: .7; }

/* Выпадающие меню */
.navbar.site-nav .dropdown-menu {
    border: 0;
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 8px;
    margin-top: 10px;
    background: #fff;
    animation: ddIn .18s ease both;
}
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.navbar.site-nav .dropdown-item {
    border-radius: 9px;
    padding: .55rem .8rem;
    font-size: .95rem;
    color: var(--body);
    white-space: normal;
    transition: background .15s ease, color .15s ease;
}
.navbar.site-nav .dropdown-item:hover {
    background: var(--brand-050);
    color: var(--brand);
}

/* ---------- Контент-карточки (каждая страница) ---------- */
.container > [id^="page_"],
.container > .row.mt-5 {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(22px, 4vw, 48px);
    margin: 28px 0 36px;
    margin-inline: 0 !important;
    animation: fadeUp .5s ease both;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Заголовки секций внутри карточек */
[id^="page_"] h4,
[id^="page_"] h5 {
    position: relative;
    padding-left: 14px;
    margin-bottom: .5rem;
}
[id^="page_"] h4::before,
[id^="page_"] h5::before {
    content: "";
    position: absolute;
    left: 0; top: .1em;
    width: 4px; height: 1.05em;
    border-radius: 3px;
    background: linear-gradient(var(--accent), var(--brand));
}
/* Центрированные заголовки — без боковой полоски */
[id^="page_"] .text-center h4,
[id^="page_"] .text-center h5 { padding-left: 0; }
[id^="page_"] .text-center h4::before,
[id^="page_"] .text-center h5::before { display: none; }

/* Разделители — делаем тонкими и спокойными */
[id^="page_"] hr {
    border: 0;
    border-top: 1px solid var(--line);
    opacity: 1;
    margin: 0.8rem 0;
}
/* Убираем дублирующиеся «пустые» декоративные разделители */
[id^="page_"] .row.mt-3 > hr:only-child { display: none; }

/* Чистим лишние отступы и линии в самом верху карточки страницы:
   ведущие декоративные <hr> и пустые .row.mt-3 создавали «странное пустое место». */
[id^="page_"] > hr:first-child,
[id^="page_"] > .row:first-child > hr:first-child,
[id^="page_"] > .row.mt-3 > hr { display: none; }
[id^="page_"] > .row.mt-3:first-of-type,
[id^="page_"] > .row:first-child { margin-top: 0 !important; }
/* Если первый осмысленный блок — заголовок, прижимаем его к верху карточки */
[id^="page_"] > .row:first-child { margin-bottom: .25rem; }

/* Убираем висячий разделитель в самом низу карточки страницы:
   на всех страницах последний элемент — <hr> (или .row.mt-3 c <hr>),
   который рисовал лишнюю горизонтальную полосу внизу карточки. */
[id^="page_"] > hr:last-child,
[id^="page_"] > .row.mt-3:last-child { display: none; }

/* Заголовки-подписи к блокам (галерея проектов и т.п.), идущие сразу после
   контентного блока без разделителя — даём отступ сверху, чтобы не слипались. */
[id^="page_"] .row + .row.fs-5.text-start { margin-top: 1.6rem; }

/* Ссылки в контенте */
[id^="page_"] a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--brand-100);
    transition: color .18s ease, text-decoration-color .18s ease;
}
[id^="page_"] a:hover {
    color: var(--accent-600);
    text-decoration-color: var(--accent);
}
/* Ссылки-кнопки внутри контента не перекрашиваем — текст остаётся белым, без подчёркивания */
[id^="page_"] a.btn,
[id^="page_"] a.btn:hover {
    color: #fff;
    text-decoration: none;
}

/* Списки */
[id^="page_"] ul { padding-left: 1.35em; }
[id^="page_"] li { margin-bottom: .45rem; }
[id^="page_"] li::marker { color: var(--accent); }

/* Картинки в контенте */
[id^="page_"] img { max-width: 100%; height: auto; }
[id^="page_"] .justify-content-center img,
[id^="page_"] .justify-content-start img,
[id^="page_"] .justify-content-end img {
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}
/* Мелкие технологические иконки — без рамок и теней */
[id^="page_"] li img { border-radius: 0; box-shadow: none; }

/* Адаптивные фото в текстовых блоках (главная и др.) */
[id^="page_"] img.content-img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    display: block;
}
@media (max-width: 767px) {
    [id^="page_"] img.content-img { height: 200px; }
}

/* ---------- Таблицы (стоимость) ---------- */
[id^="page_"] table.table {
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.6rem;
    background: #fff;
}
[id^="page_"] table.table thead th {
    background: var(--brand);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    border: 0;
    padding: .9rem 1rem;
    vertical-align: middle;
}
[id^="page_"] table.table tbody td {
    border-color: var(--line);
    padding: .8rem 1rem;
    vertical-align: middle;
    color: var(--body);
}
[id^="page_"] table.table.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: #f7fafc;
}
[id^="page_"] table.table tbody tr { transition: background .15s ease; }
[id^="page_"] table.table.table-hover > tbody > tr:hover > * {
    background: var(--brand-050);
}
/* Колонка со стоимостью — выделяем */
[id^="page_"] table.table td:last-child {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

/* ---------- Кнопки ---------- */
.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-700);
    --bs-btn-hover-border-color: var(--brand-700);
    --bs-btn-active-bg: var(--brand-900);
    border-radius: 10px;
    padding: .6rem 1.4rem;
    font-family: var(--font-display);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease;
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-success {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent-600);
    --bs-btn-hover-border-color: var(--accent-600);
    border-radius: 10px;
    font-family: var(--font-display);
    font-weight: 600;
}

/* ---------- Подвал ---------- */
.site-footer {
    margin-top: 10px;
    background: linear-gradient(180deg, var(--brand-700) 0%, var(--brand-900) 100%);
    color: rgba(255,255,255,.82);
    font-size: .9rem;
    border-top: 3px solid var(--accent);
}
.site-footer .footer-inner {
    padding: 30px 0 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 22px 40px;
    align-items: flex-start;
    justify-content: space-between;
}
.site-footer .f-col { max-width: 560px; }
.site-footer .f-name {
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: 1rem;
    margin-bottom: 6px;
}
.site-footer .f-req { line-height: 1.6; }
.site-footer a { color: #fff; text-decoration: none; transition: color .18s ease; }
.site-footer a:hover { color: #bfe6ea; text-decoration: underline; }
.site-footer .f-links { display: flex; flex-direction: column; gap: 6px; }
.site-footer .f-badge { margin-top: 14px; display: inline-block; transition: transform .2s ease, opacity .2s ease; opacity: .92; }
.site-footer .f-badge:hover { transform: translateY(-2px); opacity: 1; }
.site-footer .f-badge img { height: 42px; width: auto; }
.site-footer .f-bottom {
    border-top: 1px solid rgba(255,255,255,.12);
    padding: 14px 0 20px;
    font-size: .82rem;
    color: rgba(255,255,255,.6);
    text-align: center;
}

/* ---------- Адаптив ---------- */
@media (max-width: 991px) {
    .navbar.site-nav { height: auto; padding: 8px 0; }
    body { padding-top: 0; }
    .navbar.site-nav.fixed-top { position: static; }
    .site-footer .footer-inner { flex-direction: column; }
}
@media (max-width: 575px) {
    body { font-size: 15.5px; }
    h4 { font-size: 1.3rem; }
}

/* ============================================================
   Hero на главной
   ============================================================ */
.hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    border-radius: 18px;
    padding: clamp(30px, 5vw, 60px);
    background:
        radial-gradient(900px 500px at 110% -20%, rgba(24,160,168,.40), transparent 60%),
        linear-gradient(135deg, var(--brand-900) 0%, var(--brand) 68%, var(--brand-700) 100%);
}
.hero::after {
    content: "";
    position: absolute;
    right: -90px; bottom: -120px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%);
    pointer-events: none;
}
.hero-eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #c4ecef;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    padding: .35rem .85rem;
    border-radius: 999px;
    margin-bottom: 18px;
}
.hero-title {
    font-family: var(--font-display);
    font-weight: 800;
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.3rem);
    line-height: 1.06;
    letter-spacing: -.02em;
    margin: 0 0 16px;
    padding-left: 0;
}
.hero-title span { color: #5fd3da; }
.hero-sub {
    color: rgba(255,255,255,.86);
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    max-width: 60ch;
    margin: 0 0 26px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-actions a.btn-cta {
    background: #fff;
    color: var(--brand);
    border-radius: 11px;
    padding: .65rem 1.6rem;
    font-family: var(--font-display);
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 10px 24px -12px rgba(0,0,0,.5);
    transition: transform .18s ease, background .18s ease, color .18s ease;
}
.hero-actions a.btn-cta:hover { transform: translateY(-2px); background: var(--accent); color: #fff; }
.hero-actions a.btn-ghost {
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.55);
    background: transparent;
    border-radius: 11px;
    padding: .65rem 1.6rem;
    font-family: var(--font-display);
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: transform .18s ease, background .18s ease, color .18s ease;
}
.hero-actions a.btn-ghost:hover { background: #fff; color: var(--brand); transform: translateY(-2px); }

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 22px 0 4px;
}
.hero-stats .stat {
    background: var(--brand-050);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 16px;
    text-align: center;
}
.hero-stats .stat b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--brand);
    line-height: 1;
}
.hero-stats .stat span {
    display: block;
    margin-top: 7px;
    font-size: .9rem;
    color: var(--muted);
}
@media (max-width: 640px) {
    .hero-stats { grid-template-columns: 1fr; }
}