/* ===== ДОПОЛНЕНИЯ К ОСНОВНОМУ ТЕМУ =====
 *
 * Собраны в отдельный файл, чтобы не править style.css, который вы уже
 * загружаете на сервер. Подключается последним — переопределяет базовые стили.
 *
 * Здесь: форма заявки, доступность, кастомная 404, семантические таблицы.
 */

/* ===== ДОСТУПНОСТЬ ===== */

/* Ссылка «Перейти к содержимому» — видна только при фокусе с клавиатуры. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 12px 20px;
    background: var(--accent-primary);
    color: var(--primary-black);
    font-weight: 600;
    border-radius: 0 0 var(--border-radius-sm) 0;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/* Скрыто визуально, но читается скринридером. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Заметный фокус для навигации с клавиатуры. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Уважаем системную настройку «уменьшить движение». */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Сообщение для браузеров с отключённым JavaScript. */
.noscript-notice {
    padding: 14px 20px;
    background: rgba(255, 200, 0, 0.12);
    border-bottom: 1px solid rgba(255, 200, 0, 0.4);
    color: var(--text-primary);
    font-size: 0.9rem;
    text-align: center;
}

/* ===== ФОРМА ЗАЯВКИ ===== */

.lead-form {
    margin-top: 4px;
    padding-top: 24px;
    border-top: 1px solid var(--card-border);
}

.lead-form-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.form-row {
    margin-bottom: 14px;
}

.form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.form-label span {
    color: var(--accent-primary);
}

.lead-form input[type="text"],
.lead-form textarea {
    width: 100%;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 136, 0.2);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: var(--transition);
}

.lead-form textarea {
    resize: vertical;
    min-height: 84px;
}

.lead-form input[type="text"]:focus,
.lead-form textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.2);
}

.lead-form input::placeholder,
.lead-form textarea::placeholder {
    color: var(--text-muted);
}

/* Ловушка для ботов: не показываем людям. */
.form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.form-consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

.form-consent label {
    cursor: pointer;
}

.form-consent a {
    color: var(--accent-primary);
}

.btn-block {
    width: 100%;
    justify-content: center;
}

.form-status {
    margin-top: 12px;
    font-size: 0.88rem;
    line-height: 1.45;
    min-height: 0;
}

.form-status:empty {
    margin-top: 0;
}

.form-status.is-error {
    color: #ff6b6b;
}

.form-status.is-success {
    color: var(--accent-primary);
}

/* ===== СПИСОК УСЛУГ В МОДАЛЬНОМ ОКНЕ ===== */

.modal-services-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.modal-services-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.95rem;
    transition: var(--transition);
}

.modal-services-list a:hover {
    border-color: var(--accent-primary);
    background: rgba(0, 255, 136, 0.08);
    transform: translateX(3px);
}

.modal-services-list i {
    width: 20px;
    text-align: center;
    color: var(--accent-primary);
}

/* ===== СТРАНИЦА 404 ===== */

.error-page {
    text-align: center;
    padding: 80px 0 60px;
}

.error-code {
    font-family: var(--font-heading);
    font-size: clamp(4rem, 14vw, 8rem);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 8px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0.5;
}

.error-actions {
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 28px;
}

.error-hint {
    margin-top: 26px;
    color: var(--text-secondary);
}

/* Кнопка, которая выглядит как ссылка. */
.as-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* ===== СЕМАНТИЧЕСКИЕ ТАБЛИЦЫ ===== */

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.spec-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

.spec-table th,
.spec-table td {
    padding: 12px 16px;
    text-align: left;
    font-size: 0.92rem;
    border-bottom: 1px solid var(--card-border);
    vertical-align: top;
}

.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td {
    border-bottom: 0;
}

.spec-table th {
    color: var(--text-secondary);
    font-weight: 600;
}

.spec-table td {
    color: var(--text-primary);
}

.plans-table {
    min-width: 560px;
}

.plans-table thead th {
    background: rgba(0, 255, 136, 0.08);
    color: var(--accent-primary);
    font-family: var(--font-heading);
    white-space: nowrap;
}

.plans-table th[scope="row"] {
    color: var(--text-primary);
    font-weight: 500;
}

.plans-table td {
    text-align: center;
    white-space: nowrap;
}

.cell-yes,
.cell-no {
    text-align: center;
}

.cell-yes i {
    color: var(--accent-primary);
}

.cell-no i {
    color: var(--text-muted);
}

.plans-price {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: rgba(0, 255, 136, 0.08);
    border-radius: var(--border-radius-sm);
    color: var(--accent-primary);
    font-size: 0.92rem;
}

/* ===== БЛОКИ ВОЗМОЖНОСТЕЙ КЕЙСА ===== */

/* ===== ДВИЖУЩИЙСЯ ФОН ВСЕГО САЙТА =====
 *
 * Раньше сетка и свечение жили только внутри .hero-bg на главной,
 * поэтому при прокрутке фон заканчивался. Теперь это фон всего
 * документа: два слоя через body::before и body::after.
 *
 * Почему отдельные элементы, а не background у body:
 * нужно ДВА слоя с разной скоростью (даёт глубину) и своя анимация
 * у каждого. В одном background-image так не сделать.
 *
 * position: fixed — принципиально: слой покрывает окно, а не высоту
 * документа, поэтому работает на любой длине страницы и не создаёт
 * горизонтальную прокрутку (его двигает transform, который
 * не участвует в расчёте scrollWidth).
 *
 * z-index: -1 — фон уходит под весь контент. Отрицательный индекс
 * безопасен только потому, что у body есть свой контекст наложения
 * (position: relative в style.css).
 *
 * Устройство:
 *   body::before — крупная сетка 60px + свечение, едет 20 с
 *   body::after  — мелкая сетка 20px, едет 12 с (быстрее — дальше)
 */

body::before,
body::after {
    content: '';
    position: fixed;
    /* Запас по краям: слой сдвигается анимацией, без запаса
       на границах обнажалась бы пустая полоса. */
    top: -120px;
    left: -120px;
    right: -120px;
    bottom: -120px;
    z-index: -1;
    pointer-events: none;
    background-repeat: repeat;
    will-change: transform;
}

body::before {
    /* Два фона: первым идёт свечение, оно рисуется поверх сетки. */
    background-image:
        radial-gradient(
            ellipse 80% 50% at 50% 40%,
            rgba(0, 255, 136, 0.10) 0%,
            transparent 70%
        ),
        linear-gradient(rgba(0, 255, 136, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 136, 0.09) 1px, transparent 1px);
    background-size: 100% 100%, 60px 60px, 60px 60px;
    animation: rift-grid-move 20s linear infinite;
}

body::after {
    background-image:
        linear-gradient(rgba(0, 255, 136, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 136, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    animation: rift-grid-move 12s linear infinite;
}

/*
 * Смещение ровно на размер клетки (60px): в конце цикла сетка
 * встаёт в исходное положение, и переход незаметен.
 */
@keyframes rift-grid-move {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(60px, 60px, 0); }
}

/* ===== ГЕРОЙ-БЛОК =====
 * Сетка теперь общая для сайта, поэтому в .hero-bg остаётся только
 * канвас с частицами — свой у каждого экрана. */

/*
 * Контейнер фона.
 *
 * Нужен в двух видах герой-блока: .hero-section на главной
 * и .page-hero на внутренних страницах. Секции должны быть
 * position: relative, иначе absolute-слой фона уедет к body
 * и канвас растянется на всю страницу.
 */
.hero-section,
.page-hero {
    position: relative;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-bg__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/*
 * Контент поверх фона.
 *
 * .hero-bg имеет z-index: 0, поэтому контейнеру достаточно
 * position: relative — тогда текст окажется выше без грубых значений
 * вроде 999, которые ломают порядок с модальными окнами.
 *
 * Внутренние страницы — отдельным блоком: их контейнер лежит
 * внутри .page-hero, а не прямо в секции.
 */
.hero-section > .container,
.page-hero > .container {
    position: relative;
    z-index: 1;
}

/*
 * На внутренних страницах герой-блок низкий (только заголовок),
 * поэтому канвасу не хватает высоты под крупную надпись.
 * Даём ему минимальную высоту, чтобы силуэт читался.
 */
.page-hero {
    min-height: 340px;
    display: flex;
    align-items: center;
}

.page-hero > .container {
    width: 100%;
}

/*
 * Доступность: при системной настройке «уменьшить движение»
 * фон остаётся видимым, но статичным — движение на фоне
 * у части людей вызывает головокружение.
 */
@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after {
        animation: none;
    }
}

/*
 * На узких экранах сетка реже и слабее: на маленьком экране
 * частые линии выглядят как грязь под текстом.
 */
@media (max-width: 600px) {
    body::before {
        background-size: 100% 100%, 44px 44px, 44px 44px;
        opacity: 0.8;
    }

    body::after {
        display: none;
    }

    .page-hero {
        min-height: 260px;
    }
}

/* ===== КОНЕЦ: ДВИЖУЩИЙСЯ ФОН ===== */

/* Цветовые маркеры остатка игрового времени (кейс iCafeCloud). */
.case-color-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.case-color-dot::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--text-muted);
}

.case-color-dot.green::before  { background: var(--accent-primary); }
.case-color-dot.yellow::before { background: #ffd93d; }
.case-color-dot.orange::before { background: #ff9f43; }
.case-color-dot.red::before    { background: #ff6b6b; }

.feature-tier {
    margin-bottom: 28px;
}

.feature-tier-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
    font-family: var(--font-heading);
    font-size: 1.15rem;
}

.feature-tier-note {
    font-size: 0.78rem;
    font-weight: 500;
    padding: 3px 10px;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    color: var(--text-muted);
}

.service-block h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    margin-bottom: 8px;
    color: var(--accent-primary);
}

.case-steps {
    padding-left: 22px;
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.7;
}

.case-steps li {
    margin-bottom: 8px;
}

.case-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 12px 16px;
    background: rgba(0, 255, 136, 0.08);
    border-radius: var(--border-radius-sm);
    color: var(--accent-primary);
    font-size: 0.9rem;
}

/* ===== ЯЗЫКОВОЙ ПЕРЕКЛЮЧАТЕЛЬ ===== */

.lang-switch {
    flex: 0 0 auto;
}

/* На широких экранах второй переключатель не нужен. */
.lang-switch-mobile {
    display: none;
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-sm);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}

.lang-switch-mobile:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

@media (max-width: 992px) {
    /* На мобильных основной переключатель уходит в меню, наружу — компактный. */
    .nav-container > .lang-switch {
        display: none;
    }
    .lang-switch-mobile {
        display: inline-flex;
    }
}

/* ===== КОНТАКТЫ В ПОДВАЛЕ ===== */

.contact-item a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition);
}

.contact-item a:hover {
    color: var(--accent-primary);
}

/* ===== КАРТОЧКИ КЕЙСОВ ===== */

.case-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--accent-primary);
    cursor: pointer;
    transition: var(--transition);
}

.case-open-btn:hover {
    gap: 12px;
}

/* =====================================================================
 * ТИПОГРАФИКА И РИТМ
 *
 * За основу взят приём из референса: иерархия строится масштабом
 * и трекингом, а не жирностью. Заголовки становятся крупнее и легче,
 * отрицательный трекинг собирает их в плотный блок, воздуха между
 * секциями больше.
 *
 * Цвета, шрифты (Exo 2 / Montserrat) и карточки остаются прежними —
 * это осознанно: полный перенос чужого гайда означал бы смену бренда.
 *
 * Блок подключён последним, поэтому перекрывает style.css. Каждое
 * правило — точечное (один селектор), чтобы не задеть разметку
 * модальных окон, форм и админки.
 * ===================================================================== */

/* --- Заголовки ---
 * font-weight: 600 вместо 700/800 — при крупном кегле этого достаточно,
 * а лишний вес делает заголовок грузным. letter-spacing отрицательный:
 * без него большие буквы выглядят разрозненными. */

.section-title {
    font-size: var(--text-h2);
    font-weight: 600;
    letter-spacing: var(--ls-heading);
    line-height: 1.1;
    margin-bottom: 2.5rem;
}

/* Вводный текст героя: крупнее обычного абзаца, чтобы читался
   как лид, а не как рядовой текст. */
.hero-subtitle {
    font-size: var(--text-h3);
    font-weight: 500;
    letter-spacing: var(--ls-subheading);
    line-height: 1.25;
    margin-bottom: 1.25rem;
}

.hero-description {
    font-size: var(--text-lead);
    line-height: 1.65;
    max-width: 62ch;
    color: var(--text-secondary);
}

.cta-section h2 {
    font-size: var(--text-h1);
    font-weight: 600;
    letter-spacing: var(--ls-heading);
    line-height: 1.1;
}

/* Заголовки карточек: чуть плотнее и с тем же ритмом, что у секций. */
.feature-card h3,
.stat-number {
    letter-spacing: var(--ls-subheading);
}

/* --- Мелкие метки ---
 * Разрядка прописными делает подпись различимой без увеличения кегля. */
.stat-label,
.contact-label,
.nav-dropdown-title {
    font-size: var(--text-caption);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    line-height: 1.4;
}

.nav-dropdown-title,
.contact-label {
    font-weight: 600;
}

.stat-label {
    color: var(--text-muted);
}

/* --- Вертикальный ритм ---
 * Секции дышат одинаково: один токен вместо разных padding
 * в каждом блоке. Значения берутся из --section-gap. */
.hero-section {
    padding: var(--section-gap) 0;
}

.features-section,
.cta-section {
    padding: var(--section-gap) 0;
}

/* --- Плавная загрузка шрифтов ---
 * font-display: swap в @font-face не задан, поэтому подсказываем
 * браузеру тот же режим — иначе текст ждёт шрифт и не показывается. */
body {
    text-rendering: optimizeLegibility;
}

/* --- Крупный кегль требует своего трекинга на узких экранах ---
 * На мобильном clamp уже ужимает размер, но трекинг −0.045em
 * при мелком кегле тесен, поэтому ослабляем его. */
@media (max-width: 576px) {
    .section-title,
    .cta-section h2 {
        letter-spacing: -0.015em;
    }

    .hero-description {
        max-width: none;
    }
}

/* --- Внутренние страницы ---
 * У этих блоков был свой padding (60/40px), из-за чего главная
 * и вложенные страницы начинались на разной высоте. Приводим
 * к общей вертикальной сетке. */
.page-services .page-hero,
.page-portfolio .page-hero {
    padding: calc(var(--section-gap) * 0.6) 0
             calc(var(--section-gap) * 0.4);
}

.page-hero-text {
    max-width: 60ch;
    font-size: var(--text-lead);
    line-height: 1.6;
}

/* --- Секция возможностей ---
 * Заголовок карточки и текст внутри были без своего ритма: они просто
 * наследовали body. Задаём явно — тогда иерархия в карточке читается. */
.features-section .section-title {
    text-align: left;
    max-width: 20ch;
    margin-bottom: 3rem;
}

.feature-card h3 {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

.feature-card p {
    font-size: var(--text-body);
    line-height: 1.65;
    color: var(--text-secondary);
}

/* Ссылка «подробнее»: мелкая метка с разрядкой — тот же приём,
   что у подписей, чтобы мелкий текст выглядел однотипно. */
.feature-link {
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* --- Призыв к действию ---
 * Блок был центрирован и зажат в 60px отступов, из-за чего крупный
 * заголовок выглядел зажатым. Даём воздух и ограничиваем ширину
 * абзаца — длинная строка по центру читается хуже. */
.cta-section {
    text-align: center;
}

.cta-section p {
    font-size: var(--text-lead);
    line-height: 1.6;
    max-width: 56ch;
    margin-inline: auto;
    margin-bottom: 2rem;
}

/* --- Подвал ---
 * padding и margin-left были фиксированными (60/30/100px), из-за чего
 * подвал не попадал в общий вертикальный ритм страницы. */
.main-footer {
    padding: var(--section-gap) 0 calc(var(--section-gap) * 0.4);
    margin-top: var(--section-gap);
}

.footer-content {
    gap: clamp(24px, 3vw, 40px);
    margin-bottom: calc(var(--section-gap) * 0.5);
}

/* Логотип в подвале — часть типографической системы, а не
   отдельная надпись: тот же трекинг, что у заголовков. */
.footer-logo {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: 600;
    letter-spacing: var(--ls-heading);
    line-height: 1.1;
}

.footer-title {
    font-size: var(--text-caption);
    font-weight: 600;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
    padding-bottom: 0;
}

/* Подчёркивание под заголовком колонки убираем: в референсе
   разделители не нужны — иерархию задаёт сам текст. */
.footer-title::after {
    display: none;
}

.footer-description,
.newsletter-text {
    font-size: var(--text-small);
    line-height: 1.7;
}

.footer-links a,
.contact-item {
    font-size: var(--text-small);
    line-height: 1.5;
}

/* Стрелка «›» перед каждой ссылкой превращала список в шум.
   Оставляем её только как реакцию на наведение. */
.footer-links a::before {
    content: none;
}

.footer-links a:hover {
    padding-left: 0;
}

.footer-links a:hover::before {
    content: none;
}

.footer-copyright,
.footer-legal a {
    font-size: var(--text-caption);
    line-height: 1.6;
    color: var(--text-muted);
}

.footer-bottom {
    padding-top: calc(var(--section-gap) * 0.3);
    gap: 1rem;
}

/* Логотип в шапке и футере — сплошной зелёный.
 *
 * Раньше слово было внутри .gradient-text и заливалось градиентом
 * (зелёный → бирюзовый). Градиент читается хуже сплошного цвета
 * на мелком кегле и в шапке, и он же делал логотип визуально
 * «выключенным» рядом с зелёными ссылками.
 *
 * !important нужен, чтобы перебить background-clip: text
 * из .gradient-text: без него буквы остались бы прозрачными. */
.nav-logo .gradient-text,
.footer-logo .gradient-text {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    color: var(--accent-primary) !important;
}

/* --- Ссылки внутри текста ---
 *
 * Раньше ссылки без класса (например mailto: в политике
 * конфиденциальности) окрашивались браузером в #0000ee —
 * синий цвет по умолчанию выбивался из зелёной палитры.
 *
 * Правило общее для текстовых блоков, а не для каждой ссылки:
 * так новые ссылки в правовых текстах подхватят цвет сами. */
.legal-text a,
.article-content a,
.page-hero a:not(.btn):not(.case-back),
main p a:not(.btn):not(.case-open-btn):not(.portfolio-card-link),
main li a:not(.btn) {
    color: var(--accent-primary);
    text-decoration-color: rgba(0, 255, 136, 0.4);
    text-underline-offset: 3px;
}

.legal-text a:hover,
.article-content a:hover,
main p a:not(.btn):hover,
main li a:not(.btn):hover {
    text-decoration-color: var(--accent-primary);
}

/* ===== КОНЕЦ: ТИПОГРАФИКА И РИТМ ===== */

/* =====================================================================
 * ПОЛУПРОЗРАЧНЫЕ ПОВЕРХНОСТИ
 *
 * Сетка на фоне (body::before) видна только там, где контент
 * её не перекрывает. Карточки и подвал были залиты непрозрачными
 * --card-bg / --primary-black, поэтому фон под ними пропадал
 * и страница выглядела набором серых прямоугольников.
 *
 * Заменяем заливку на полупрозрачную: тот же тон, но сквозь него
 * читаются линии.
 *
 * Размытие (backdrop-filter) НЕ используем на фоновых блоках:
 * оно замывает именно тонкие линии сетки толщиной 1px, и фон
 * формально виден, но выглядит ровной заливкой. Проверено
 * замером по скриншоту: с blur(4px) амплитуда полос 2.4,
 * без него — сопоставимо с открытым фоном.
 *
 * Исключение — модальные окна: они живут поверх прокрученной
 * страницы, и там размытие нужно, чтобы тексты не накладывались.
 *
 * Мелкие элементы (кнопки, иконки, поля ввода) не трогаем —
 * их заливка и так полупрозрачная.
 * ===================================================================== */

/* Подвал.
 *
 * Без backdrop-filter.
 *
 * Размытие замывает именно тонкие линии сетки: при blur(4px) линия
 * толщиной 1px почти исчезает. Замер по скриншоту: с размытием
 * амплитуда 2.4, без — 4.5.
 *
 * Плотность 0.58, а не 0.55: подвал темнее страницы, и на тёмном
 * фоне зелёные линии теряют контраст. 0.58 даёт достаточно тёмную
 * подложку под текст и при этом не съедает сетку. */
.main-footer {
    background: rgba(10, 10, 10, 0.58);
}

/* Карточки — тоже без размытия, по той же причине.
   0.55 сохраняет фон видимым и не мешает тексту. */
.feature-card,
.portfolio-card,
.case-item-card {
    background: rgba(26, 26, 26, 0.55);
}

/* Модальные окна — единственное место, где размытие уместно:
   их читают поверх прокрученной страницы, и без размытия
   текст накладывался бы на текст. Плотность высокая осознанно —
   это временное окно, оно не часть фона. */
.modal-box {
    background: rgba(26, 26, 26, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Встроенный просмотр кейса: iframe должен оставаться непрозрачным,
   иначе содержимое просвечивает насквозь. */
.case-modal-iframe {
    background: var(--primary-black);
}

/*
 * Шапка (класс в разметке — .main-nav).
 *
 * Без размытия: оно замывало линии сетки при прокрутке.
 * Плотность 0.72 сохраняет читаемость меню и оставляет фон видным.
 */
.main-nav {
    background: rgba(10, 10, 10, 0.72);
}

/* ===== КОНЕЦ: ПОЛУПРОЗРАЧНЫЕ ПОВЕРХНОСТИ ===== */