/* =============================================
   Global Fixes — единый стандарт верстки
   Эталон: главная страница (front-page.php)

   Container: max-width 1280px, padding 0 clamp(16px,4vw,40px)
   Section spacing: clamp(48px, 8vw, 80px)
   Breakpoints: 1023px, 768px, 480px
   ============================================= */

/* -----------------------------------------
   a) Overflow & Box-Model Safety
   ----------------------------------------- */
html {
    overflow-x: hidden;
}
body {
    overflow-x: hidden;
    width: 100%;
}
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* -----------------------------------------
   b) Единый контейнер — значения с главной
   ----------------------------------------- */
.container,
.site-container,
.content-wrapper {
    max-width: var(--container, 1280px);
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(16px, 4vw, 40px);
    padding-right: clamp(16px, 4vw, 40px);
    width: 100%;
    box-sizing: border-box;
}

/* -----------------------------------------
   b2) Страницы без сайдбара — контент на всю ширину контейнера
   На страницах С сайдбаром: .page-content > .container > .page-with-sidebar > .page-content__inner
   На страницах БЕЗ: .page-content > .container > .page-content__inner (прямой потомок)
   ----------------------------------------- */
.page-content > .container > .page-content__inner {
    max-width: 100%;
}

/* -----------------------------------------
   c) Секции — overflow safety
   ----------------------------------------- */
section,
.section {
    width: 100%;
    overflow: hidden;
}

/* -----------------------------------------
   d) Полноширинные секции: фон на 100%, контент ограничен
   ----------------------------------------- */
.hero-section,
.cta-section,
.full-width-section {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding-left: 0;
    padding-right: 0;
}

.hero-section .container,
.cta-section .container,
.full-width-section .container {
    max-width: var(--container, 1280px);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
}

/* -----------------------------------------
   e) Типографика .entry-content (Gutenberg)
   ----------------------------------------- */
.entry-content h2,
.content-section h2 {
    margin-top: 2.5rem;
    margin-bottom: 1.2rem;
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    color: #ffffff;
    font-weight: 700;
    line-height: 1.3;
}

.entry-content h3,
.content-section h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: clamp(1.15rem, 2.5vw, 1.4rem);
    color: #e0e0e0;
    font-weight: 600;
}

.entry-content p,
.content-section p {
    margin-bottom: 1.2rem;
    line-height: 1.75;
    color: var(--text-secondary, #8b949e);
    max-width: 75ch;
    word-wrap: break-word;
}

.entry-content strong { color: #ffffff; }

.entry-content a {
    color: var(--accent, #0891b2);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.entry-content a:hover {
    color: var(--accent-hover, #0e7490);
}

/* -----------------------------------------
   f) CTA-блоки — фикс слипания
   ----------------------------------------- */
.cta-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 2rem;
    border-radius: var(--radius-lg, 12px);
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .cta-block {
        flex-direction: column;
        align-items: stretch;
        padding: 1.2rem 1rem;
        text-align: center;
    }
    .cta-block .btn,
    .cta-block a[class*="btn"] {
        width: 100%;
        justify-content: center;
    }
}

/* -----------------------------------------
   g) Карточные сетки — мобильная адаптация
   ----------------------------------------- */
@media (max-width: 768px) {
    .cards-grid,
    .products-grid,
    .catalog-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* -----------------------------------------
   h) Таблицы — горизонтальный скролл
   ----------------------------------------- */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

@media (max-width: 768px) {
    .page-content table,
    .entry-content table {
        font-size: 0.85rem;
    }
    .page-content td,
    .page-content th,
    .entry-content td,
    .entry-content th {
        padding: 0.5rem;
    }
}

/* -----------------------------------------
   i) Hero — мобильная адаптация
   ----------------------------------------- */
@media (max-width: 768px) {
    .hero__actions,
    .hero-buttons,
    .hero-section .buttons,
    .hero-section .btn-group {
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }
    .hero__actions .btn,
    .hero-buttons .btn,
    .hero-buttons a {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* -----------------------------------------
   j) Footer — мобильная адаптация
   ----------------------------------------- */
@media (max-width: 768px) {
    .site-footer__top {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .site-footer__desc {
        max-width: 100%;
    }
}

/* -----------------------------------------
   k) page-header container consistency
   ----------------------------------------- */
.page-header .container {
    max-width: var(--container, 1280px);
}

/* -----------------------------------------
   l) Sidebar phone & desc
   ----------------------------------------- */
.sidebar__phone {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--accent, #0891b2);
    margin-bottom: var(--space-md, 16px);
    text-decoration: none;
}
.sidebar__phone:hover {
    color: var(--accent-hover, #0e7490);
}
.sidebar__block-desc {
    font-size: 14px;
    color: var(--text-secondary, #8b949e);
    margin-bottom: var(--space-md, 16px);
    line-height: 1.5;
}

/* -----------------------------------------
   m) CTA-inline box
   ----------------------------------------- */
.cta-inline__box {
    background: linear-gradient(135deg, rgba(8,145,178,.08) 0%, rgba(15,52,96,.12) 100%);
    border: 1px solid rgba(8,145,178,.2);
    border-radius: var(--radius-lg, 12px);
    padding: 32px;
    margin: 48px 0;
    text-align: center;
}
.cta-inline__box h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--white, #fff);
    margin-bottom: 8px;
}
.cta-inline__box p {
    font-size: 15px;
    color: var(--text-secondary, #8b949e);
    margin-bottom: 20px;
}

/* -----------------------------------------
   n) Projects filters
   ----------------------------------------- */
.projects__filters-wrapper {
    margin-bottom: var(--space-xl, 32px);
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 16px);
}
.projects__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm, 8px);
}
.projects__filter {
    padding: 8px 16px;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--border, #30363d);
    background: transparent;
    color: var(--text-secondary, #8b949e);
    font-size: 14px;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
}
.projects__filter:hover {
    border-color: var(--accent, #0891b2);
    color: var(--text, #e6edf3);
}
.projects__filter--active {
    background: var(--accent, #0891b2);
    border-color: var(--accent, #0891b2);
    color: #fff;
}

.projects__summary {
    text-align: center;
    margin-top: var(--space-xl, 32px);
    padding-top: var(--space-lg, 24px);
    border-top: 1px solid var(--border, #30363d);
    color: var(--text-secondary, #8b949e);
    font-size: 15px;
}
.projects__summary-count {
    font-weight: 700;
    color: var(--accent, #0891b2);
    font-size: 20px;
}

/* -----------------------------------------
   o) Contact items
   ----------------------------------------- */
.contacts-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg, 24px);
}
.contact-item {
    display: flex;
    gap: var(--space-md, 16px);
    align-items: flex-start;
}
.contact-item__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md, 8px);
    background: rgba(8,145,178,.08);
    flex-shrink: 0;
}
.contact-item__label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #8b949e);
    margin-bottom: 4px;
}

/* -----------------------------------------
   p) Lightbox
   ----------------------------------------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.9);
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
}
.lightbox.is-active {
    opacity: 1;
    visibility: visible;
}
.lightbox__overlay {
    position: absolute;
    inset: 0;
}
.lightbox__wrap {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox__img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius-md, 8px);
}
.lightbox__close,
.lightbox__prev,
.lightbox__next {
    position: absolute;
    background: rgba(255,255,255,.1);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: background .2s;
    z-index: 2;
}
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
    background: rgba(255,255,255,.2);
}
.lightbox__close { top: -60px; right: 0; }
.lightbox__prev { left: -60px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: -60px; top: 50%; transform: translateY(-50%); }

@media (max-width: 768px) {
    .lightbox__prev { left: 8px; }
    .lightbox__next { right: 8px; }
    .lightbox__close { top: 8px; right: 8px; }
}

/* -----------------------------------------
   q) Archive/Blog header
   ----------------------------------------- */
.archive-header {
    padding: var(--space-2xl, 48px) 0 var(--space-xl, 32px);
    border-bottom: 1px solid var(--border, #30363d);
    background: var(--dark2, #161b22);
    text-align: center;
}
.archive-header__title {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 800;
    margin-bottom: var(--space-sm, 8px);
    color: var(--white, #fff);
}
.archive-header__desc {
    color: var(--text-secondary, #8b949e);
    font-size: 17px;
    max-width: 600px;
    margin: 12px auto 0;
}

.archive-content {
    padding: var(--space-2xl, 48px) 0 var(--space-3xl, 64px);
}

/* -----------------------------------------
   r) CTA-strip actions
   ----------------------------------------- */
.cta-strip__actions {
    display: flex;
    gap: var(--space-sm, 8px);
    flex-wrap: wrap;
}

/* -----------------------------------------
   s) Article CTA
   ----------------------------------------- */
.article-cta {
    background: linear-gradient(135deg, rgba(8,145,178,.08) 0%, rgba(15,52,96,.12) 100%);
    border: 1px solid rgba(8,145,178,.2);
    border-radius: var(--radius-lg, 12px);
    padding: 32px;
    margin: 48px 0;
    text-align: center;
}
.article-cta h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--white, #fff);
    margin-bottom: 8px;
}
.article-cta p {
    font-size: 15px;
    color: var(--text-secondary, #8b949e);
    margin-bottom: 20px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.article-cta__actions {
    display: flex;
    gap: var(--space-md, 16px);
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 480px) {
    .article-cta__actions {
        flex-direction: column;
    }
    .article-cta__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Article tags */
.article-content__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--space-xl, 32px);
    padding-top: var(--space-lg, 24px);
    border-top: 1px solid var(--border, #30363d);
}
.article-content__tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-sm, 6px);
    background: rgba(8,145,178,.08);
    color: var(--accent, #0891b2);
    font-size: 13px;
    text-decoration: none;
    transition: all .2s;
}
.article-content__tag:hover {
    background: rgba(8,145,178,.15);
}

/* -----------------------------------------
   t) Related posts
   ----------------------------------------- */
.related-posts {
    padding: var(--space-2xl, 48px) 0;
    background: var(--dark2, #161b22);
    border-top: 1px solid var(--border, #30363d);
}
.related-posts__title {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--space-xl, 32px);
    color: var(--white, #fff);
}

/* -----------------------------------------
   u) Exit popup
   ----------------------------------------- */
.exit-popup {
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
}
.exit-popup.is-active {
    opacity: 1;
    visibility: visible;
}
.exit-popup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(4px);
}
.exit-popup__content {
    position: relative;
    background: var(--dark2, #161b22);
    border: 1px solid var(--border, #30363d);
    border-radius: var(--radius-lg, 12px);
    padding: 40px;
    max-width: 480px;
    width: 90%;
    text-align: center;
}
.exit-popup__close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-secondary, #8b949e);
    font-size: 28px;
    cursor: pointer;
    transition: color .2s;
}
.exit-popup__close:hover { color: var(--white, #fff); }
.exit-popup__content h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--white, #fff);
    margin-bottom: 8px;
}
.exit-popup__content p {
    font-size: 15px;
    color: var(--text-secondary, #8b949e);
    margin-bottom: 24px;
}
.exit-popup__privacy {
    margin-top: 16px;
    font-size: 12px;
    color: var(--text-secondary, #8b949e);
}
.exit-popup__privacy a {
    color: var(--accent, #0891b2);
    text-decoration: underline;
}

/* -----------------------------------------
   v) Quiz modal
   ----------------------------------------- */
.quiz__progress {
    height: 4px;
    background: var(--border, #30363d);
    border-radius: 2px;
    margin-bottom: var(--space-xl, 32px);
    overflow: hidden;
}
.quiz__progress-bar {
    height: 100%;
    background: var(--accent, #0891b2);
    border-radius: 2px;
    transition: width .3s ease;
}
.quiz__question-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--white, #fff);
    margin-bottom: var(--space-lg, 24px);
}
.quiz__options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm, 8px);
}
.quiz__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid var(--border, #30363d);
    border-radius: var(--radius-md, 8px);
    background: transparent;
    color: var(--text, #e6edf3);
    font-size: 14px;
    cursor: pointer;
    transition: all .2s;
    text-align: left;
    font-family: inherit;
}
.quiz__option:hover {
    border-color: var(--accent, #0891b2);
    background: rgba(8,145,178,.06);
}
.quiz__option.selected {
    border-color: var(--accent, #0891b2);
    background: rgba(8,145,178,.12);
}
@media (max-width: 480px) {
    .quiz__options { grid-template-columns: 1fr; }
}

/* -----------------------------------------
   w) Form inputs global
   ----------------------------------------- */
.form-group {
    margin-bottom: var(--space-md, 16px);
}
.form-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--dark, #0d1117);
    border: 1px solid var(--border, #30363d);
    border-radius: var(--radius-md, 8px);
    color: var(--text, #e6edf3);
    font-size: 15px;
    font-family: inherit;
    transition: border-color .2s;
    box-sizing: border-box;
}
.form-input:focus {
    outline: none;
    border-color: var(--accent, #0891b2);
}
.form-input::placeholder {
    color: var(--text-secondary, #8b949e);
}

/* -----------------------------------------
   x) Telegram float button
   ----------------------------------------- */
.tg-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    background: #0088cc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 136, 204, 0.3);
    z-index: 996;
    transition: transform .3s, box-shadow .3s;
    text-decoration: none;
}
.tg-float:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 30px rgba(0, 136, 204, 0.4);
}
.tg-float__icon {
    width: 28px;
    height: 28px;
}
.tg-float__tooltip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--dark2, #161b22);
    color: var(--text, #e6edf3);
    padding: 8px 14px;
    border-radius: var(--radius-md, 8px);
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all .2s;
    pointer-events: none;
    border: 1px solid var(--border, #30363d);
}
.tg-float:hover .tg-float__tooltip {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 1023px) {
    .tg-float {
        width: 56px;
        height: 56px;
        bottom: 80px;
        right: 16px;
    }
    .tg-float__tooltip { display: none; }
}

/* =============================================
   y) МОБИЛЬНЫЙ ФИКС — обрезка текста / overflow
   Проблема: текст на страницах услуг вылезает за viewport на мобильных
   ============================================= */

/* y0) Ядерный фикс — принудительное ограничение ширины всей цепочки */
@media (max-width: 1023px) {
    html {
        overflow-x: clip !important;
    }
    body {
        overflow-x: clip !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    .page-content {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: clip !important;
    }
    .page-content > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
        overflow-x: clip !important;
    }
    .page-with-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: clip !important;
        grid-template-columns: 1fr !important;
    }
    .page-content__inner {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: clip !important;
    }
    .sidebar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Все потомки page-content__inner — max-width 100% */
    .page-content__inner > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* y1) Таблицы: убрать breakout-margins на мобильных, сделать скроллируемыми */
@media (max-width: 768px) {
    .page-content__inner table,
    .page-content__inner .advantages-grid,
    .page-content__inner .service-cards--grid,
    .page-content__inner .vacancy-grid {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .page-content table,
    .entry-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100% !important;
    }
}

/* y2) Текст — перенос слов */
.page-content,
.page-content__inner,
.entry-content,
.page-with-sidebar {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* y3) Заголовки — не вылезают */
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-hero__title {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* y4) Кнопки — разрешить перенос текста на мобильных */
@media (max-width: 768px) {
    .btn,
    .btn-cta,
    .btn-outline,
    .btn-sm,
    .faq__question {
        white-space: normal !important;
    }

    .page-hero__actions .btn,
    .page-hero__actions .btn-cta {
        width: 100%;
        justify-content: center;
    }

    /* Длинные ссылки */
    .page-content a,
    .entry-content a {
        word-break: break-all;
    }
    .page-content a.btn,
    .page-content a.btn-cta,
    .page-content a.btn-outline,
    .page-content a.btn-sm,
    .entry-content a.btn {
        word-break: normal;
    }

    /* pre/code блоки */
    pre, code {
        max-width: 100% !important;
        overflow-x: auto;
        word-break: break-all;
    }

    /* See-also cards */
    .see-also__grid {
        grid-template-columns: 1fr !important;
    }

    /* inline-cta блоки */
    .inline-cta {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        max-width: 100% !important;
    }
    .inline-cta .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* =============================================
   z) Service Cards — Icon variant (hub pages)
   .service-cards--grid + .service-card with __icon / __title / __desc
   ============================================= */
.service-cards--grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 24px 0;
}

.service-cards--grid .service-card {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
    background: var(--dark2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all .3s cubic-bezier(.4,0,.2,1);
}

.service-cards--grid .service-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(8, 145, 178, .15);
}

.service-card__icon {
    font-size: 36px;
    line-height: 1;
    margin-bottom: 16px;
}

.service-card__title {
    color: var(--white);
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.3;
}

.service-card__desc {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 1023px) {
    .service-cards--grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .service-cards--grid {
        grid-template-columns: 1fr;
    }

    .service-cards--grid .service-card {
        padding: 20px;
    }
}

/* =============================================
   z2) Advantages Grid — 4-column variant + icon fix
   HTML uses .advantage-card__icon but CSS expects .adv-icon
   ============================================= */
.advantages-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

.advantage-card__icon {
    font-size: 40px;
    margin-bottom: 16px;
    line-height: 1;
}

.advantage-card__title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--white);
}

@media (max-width: 1023px) {
    .advantages-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .advantages-grid--4 {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   z3) Steps — "Как заказать" section
   ============================================= */
.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 24px 0;
    counter-reset: step-counter;
}

.step {
    background: var(--dark2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    position: relative;
}

.step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(8, 145, 178, .12);
    color: var(--accent);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}

.step__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 8px;
}

.step p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 1023px) {
    .steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .steps {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   z4) CTA inline blocks — fix light theme on dark site
   Override inline styles with !important
   ============================================= */
.page-content__inner div[style*="background:#f0f7f7"],
.page-content__inner div[style*="background: #f0f7f7"] {
    background: linear-gradient(135deg, rgba(8, 145, 178, .08) 0%, rgba(15, 52, 96, .12) 100%) !important;
    border: 1px solid rgba(8, 145, 178, .2) !important;
    border-left: 4px solid var(--accent) !important;
}

.page-content__inner div[style*="background:#f0f7f7"] p[style*="color:#0D7377"],
.page-content__inner div[style*="background: #f0f7f7"] p[style*="color:#0D7377"] {
    color: var(--accent) !important;
}