/* ============================================================
   home.css — стили главной gccybersecurity.ai
   Все правила scoped под .home-page чтобы не утечь на другие страницы.

   ПОЛИТИКА (CONVENTIONS §1, §12):
   - Цвета/шрифты/типографические pre-sets — через var(--...) (см. home.tokens.css)
   - Spacing (padding/margin/gap/width/height) — inline с комментарием
     источника:  «from Figma <nodeId> → описание»  либо
                 «clamp(m_px, ..., d_px) — Figma <m_id>/<d_id>»  для fluid пар.
   - Mobile-first, единственный media-query @media (min-width: 768px).
   - BEM-классы только с префиксом .sNN-name__*.
   ============================================================ */

/* ============================================================
   BASELINE — применяется только к .home-page
   ============================================================ */

.home-page {
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--ff-text);
    /* Text 3 baseline — самый частый body-text */
    font-size: var(--fs-t3);
    line-height: calc(var(--lh-t3) / var(--fs-t3));

    display: flex;
    flex-direction: column;

    /* Phase 10 — landing спроектирован под 1920 + 375. На промежуточных
       ширинах (768-1279) ряд DT-секций c fixed widths (s01 cards row,
       s03/s15 split-row 560+80+560, s04 illustration 1320, s07 container 1160,
       s11 3-col 1100, s13 6-col) выходят за viewport. clip визуально
       обрезает без horizontal scrollbar на body. См. README → "Брейкпоинты". */
    overflow-x: clip;
}

/* border-box scoped — без глобального ресета (CONVENTIONS §11) */
.home-page,
.home-page *,
.home-page *::before,
.home-page *::after {
    box-sizing: border-box;
}

/* Сбрасываем дефолтные margins на типографических узлах внутри .home-page
   (каждая секция сама задаёт нужные размеры через свои __title и т.п.). */
.home-page h1,
.home-page h2,
.home-page h3,
.home-page h4,
.home-page h5,
.home-page h6,
.home-page p {
    margin: 0;
    font-family: inherit;
    font-weight: inherit;
    color: inherit;
}

.home-page a {
    color: var(--c-blue);
    text-decoration: none;
    transition: color .2s ease;
}
.home-page a:hover { color: var(--c-aqua); }

/* image safe defaults — WP-Smush совместимо */
.home-page img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* list/button reset (имена совпадают с темой gc_n, не переопределяем — только локально) */
.home-page ul.list-reset,
.home-page ol.list-reset {
    list-style: none;
    padding: 0;
    margin: 0;
}
.home-page button.btn-reset {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

/* ============================================================
   СЕКЦИИ — наполняются по фазам (см. HOMEPAGE-PLAN.md)
   ============================================================ */

/* ────── s00-header (Phase 9) ────── */
/* TODO */

/* ============================================================
   s01-hero (Phase 2)
   Desktop nodeId: 79:5082 (02-Hero)
   Mobile nodeId : 86:1170 (HERO v12)

   Структура:
     .s01-hero          (section)
       .s01-hero__head  (tag + title + lead + powered)
       .s01-hero__cards (3 outcome cards)
       .s01-hero__metrics (4 KPI)

   Типография — РАЗНЫЕ pre-sets m vs d (см. CONVENTIONS §12):
     title desktop = Headline 1 (96/92 -3)  ← --fs-h1
     title mobile  = Headline 3 (52/54 -2)  ← --fs-h3
     powered desktop = Caption 1 (12/16 +1) ← --fs-cap1
     powered mobile  = Label    (10/16 +2)  ← --fs-label
     lead    desktop = Text 2   (18/26)     ← --fs-t2
     lead    mobile  = Text 4   (12/19)     ← --fs-t4
     metric-label desktop = Caption 1 (12/16 +1)
     metric-label mobile  = Label    (10/16 +2)
   ============================================================ */

.home-page .s01-hero {
    /* from Figma 79:5082 / 86:1170 — оба используют #0A0E1A, не основной --c-bg */
    background: var(--c-bg-card-d);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* mobile: from Figma 86:1170 → gap 20, pt 96, pb 64, px 14 */
    gap: 20px;
    padding: 96px 14px 64px;
}

/* ───────── head (tag + title + lead + powered) ───────── */

.home-page .s01-hero__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* mobile: from Figma 86:3218 → gap 20 */
    gap: 20px;
    width: 100%;
}

/* tag-pill «World Premiere · RSA 2026 · World's First» — Figma 79:14443
   ВАЖНО: цвет blue (#00AAFF), не red как в s02. Точка/текст blue. */
.home-page .s01-hero__tag {
    display: inline-flex;
    align-items: center;
    /* from Figma 79:14443 → gap 8 */
    gap: 8px;
    /* from Figma 79:14443 → px 17 py 5 */
    padding: 5px 17px;
    background: var(--c-bg-aqua);             /* #091624 — Aquamarine Black */
    border: var(--bd-w) solid var(--bd-c-aqua); /* #073754 */
    border-radius: var(--r-pill);
    font-family: var(--ff-mono);
    /* Label preset (mono 10/16 +2px uppercase) */
    font-size: var(--fs-label);
    line-height: calc(var(--lh-label) / var(--fs-label));
    letter-spacing: var(--ls-label);
    color: var(--c-blue);
    text-transform: uppercase;
    text-align: center;
}
.home-page .s01-hero__tag-dot {
    /* from Figma 79:14440 → 6×6 r 3, bg #00AAFF */
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--c-blue);
    flex-shrink: 0;
}
.home-page .s01-hero__tag-text {
    white-space: normal; /* на mobile может оборачиваться */
}

/* ───── title — 3-строчный rainbow стек на mobile, 2-line на desktop ─────
   Figma 79:5089 (desktop) и 86:1176 (mobile).
   Gradient/H1 (variable) = linear-gradient(~110deg,
     #38BDF8 0%, #FB7185 50%, #10B981 100%).
   Применяется через background + background-clip:text + transparent color.
   Один gradient на блок из 2 строк (Autonomous + Data Protection) —
   так в Figma визуально (см. screenshot 79:5089 — gradient идёт ПО
   ОБЕИМ строкам как один pass). Третья строка «for The AI Era.» —
   solid white. */
.home-page .s01-hero__title {
    /* mobile: Headline 3 (52/54 -2, Syne Medium) */
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-h3);
    line-height: calc(var(--lh-h3) / var(--fs-h3));
    letter-spacing: var(--ls-h3);
    color: var(--c-text);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* from Figma 86:1176 → px 36.97 (на mobile внутри h1) — даём через padding-inline */
    padding-inline: 36.97px;
}
.home-page .s01-hero__title-grad {
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(
        110deg,
        #38BDF8 0%,
        #FB7185 50%,
        #10B981 100%
    );
    /* from Figma 79:5089 / 86:1177 — Gradient/H1 variable, ~110deg */
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.home-page .s01-hero__title-line {
    display: block;
}
.home-page .s01-hero__title-line--white {
    color: var(--c-text);
    -webkit-text-fill-color: var(--c-text);
}

/* lead-card (бордеред pill) — Figma 79:5091 (d) / 86:1180 (m) */
.home-page .s01-hero__lead-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}
.home-page .s01-hero__lead {
    background: var(--c-bg-aqua);              /* #091624 */
    border: var(--bd-w) solid var(--bd-c-aqua); /* #073754 */
    border-radius: 8px;                         /* from Figma 79:5091 → r 8 */
    /* mobile: from Figma 86:1180 → pt 12.39 pb 12.78 pl 29.52 pr 29.53,
       w 323, max-w 640 */
    padding: 12.39px 29.52px 12.78px;
    max-width: 640px;
    width: 100%;
    font-family: var(--ff-text);
    /* mobile: Text 4 (12/19) */
    font-size: var(--fs-t4);
    line-height: calc(var(--lh-t4) / var(--fs-t4));
    color: var(--c-text);
    text-align: center;
    box-sizing: border-box;
}
.home-page .s01-hero__lead-accent {
    color: var(--c-blue);
}

/* powered — mono caption под lead.
   mobile: Label preset 10/16 +2px (Figma 86:1184),
   desktop: Caption 1 12/16 +1px (Figma 79:5095) */
.home-page .s01-hero__powered {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    line-height: calc(var(--lh-label) / var(--fs-label));
    letter-spacing: var(--ls-label);
    color: var(--c-aqua);
    text-transform: uppercase;
    text-align: center;
}

/* ───────── outcome cards ───────── */

.home-page .s01-hero__cards {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* mobile: from Figma 86:3221 → cards стек, без gap (внутри dividers).
       Используем border-top на не-первой карточке. */
    background: var(--c-bg-aqua);              /* #091624 */
    border: var(--bd-w) solid var(--bd-c-aqua); /* #073754 */
    border-radius: 12px;                        /* from Figma 86:3221 → r 12 */
    /* from Figma 86:3221 → max-w n/a на mobile, w full;
       desktop из 79:5097 → max-w 840 */
    width: 100%;
    max-width: 840px;
    overflow: hidden;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.home-page .s01-hero__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* from Figma 86:3222 / 79:5098 → gap 7, py 28
       mobile: px 0 (контент центрирован); desktop: px 22 */
    gap: 7px;
    padding: 28px 22px;
    text-align: center;
    /* mobile: каждая занимает h 179 (внутри в зависимости от текста);
       не фиксируем height — пусть растягивается */
}
.home-page .s01-hero__card + .s01-hero__card {
    /* divider — на mobile horizontal, на desktop переключим на vertical */
    border-top: var(--bd-w) solid var(--bd-c-aqua);
    /* from Figma 86:3227 → divider py 16 (отступ от линии до контента),
       реализуем через сам padding 28 у карточки (28+16≈совпадает в Figma) */
}
.home-page .s01-hero__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* from Figma 84:1051 → 28×28 */
    width: 28px;
    height: 28px;
    /* цвет stroke зашит в SVG через var(--stroke-0, #F1F5FF) fallback —
       <img> не наследует CSS, поэтому переопределение цвета невозможно.
       Если когда-то понадобится менять цвет — переключить иконки на inline SVG. */
}
.home-page .s01-hero__card-icon img {
    width: 100%;
    height: 100%;
}
.home-page .s01-hero__card-title {
    font-family: var(--ff-display);
    font-weight: 700;
    /* Headline card 4 — Figma var (18/24 -1) — Figma 79:5103/86:3224 */
    font-size: var(--fs-hc4);
    line-height: calc(var(--lh-hc4) / var(--fs-hc4));
    letter-spacing: var(--ls-hc4);
    color: var(--c-blue);
}
.home-page .s01-hero__card-text {
    font-family: var(--ff-text);
    /* Text 4 — Figma var (12/19) — Figma 79:5105/86:3226 */
    font-size: var(--fs-t4);
    line-height: calc(var(--lh-t4) / var(--fs-t4));
    color: var(--c-text-grey);
    /* from Figma 79:5104 → w 234 (внутренний контейнер текста) */
    max-width: 235px;
}

/* ───────── metrics (4 KPI) ───────── */

.home-page .s01-hero__metrics {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: var(--c-bg-aqua);              /* #091624 */
    border: var(--bd-w) solid var(--bd-c-aqua); /* #073754 */
    border-radius: 10px;                        /* from Figma 79:5124 → r 10 */
    /* from Figma 79:5124 → max-w 840, w 840 desktop; на mobile w full */
    width: 100%;
    max-width: 840px;
    overflow: hidden;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.home-page .s01-hero__metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* mobile: from Figma 86:1212 → gap 5, py 16 px 14 */
    gap: 5px;
    padding: 16px 14px;
    text-align: center;
}
.home-page .s01-hero__metric + .s01-hero__metric {
    /* mobile divider горизонтальный */
    border-top: var(--bd-w) solid var(--bd-c-aqua);
}
.home-page .s01-hero__metric-value {
    font-family: var(--ff-display);
    font-weight: 500;
    /* Headline 4 (34/40 -1) — Figma 79:5127 / 86:1214 */
    font-size: var(--fs-h4);
    line-height: calc(var(--lh-h4) / var(--fs-h4));
    letter-spacing: var(--ls-h4);
    color: var(--c-blue);
}
.home-page .s01-hero__metric-label {
    font-family: var(--ff-mono);
    /* mobile: Label (10/16 +2px) — Figma 86:1216 */
    font-size: var(--fs-label);
    line-height: calc(var(--lh-label) / var(--fs-label));
    letter-spacing: var(--ls-label);
    color: var(--c-text-mute);  /* #3D6880 */
    text-transform: uppercase;
}

/* ============================================================
   DESKTOP (≥768)
   Figma 79:5082 — pt 234 pb 174 px 52 gap 46
   ============================================================ */

@media (min-width: 768px) {

    .home-page .s01-hero {
        /* from Figma 79:5082 → pt 234, pb 174, px 52, gap 46 */
        gap: 46px;
        padding: 234px 52px 174px;
    }

    .home-page .s01-hero__head {
        /* from Figma 85:1086 → gap 16, h 353 */
        gap: 16px;
        width: auto;
    }

    .home-page .s01-hero__title {
        /* Desktop: Headline 1 (96/92 -3) */
        font-size: var(--fs-h1);
        line-height: calc(var(--lh-h1) / var(--fs-h1));
        letter-spacing: var(--ls-h1);
        /* На desktop единственная видимая строка с rainbow = «Autonomous Data
           Protection» (1 строка), и solid white «for The AI Era.» (1 строка).
           Reset padding-inline (mobile-only). */
        padding-inline: 0;
        white-space: nowrap; /* from Figma 79:5089 → whitespace-nowrap */
    }
    .home-page .s01-hero__title-grad {
        /* На desktop хочется чтобы Autonomous + Data Protection шли В ОДНУ
           строку (Figma 79:5089). Переводим внутренний стек в inline-flex row. */
        flex-direction: row;
        gap: 0;
    }
    .home-page .s01-hero__title-line {
        /* На desktop линии grad → inline (две слова в одной строке через пробел) */
    }
    /* Restore: между «Autonomous» и «Data Protection» нужен space.
       Используем pseudo-element с literal space. */
    .home-page .s01-hero__title-grad .s01-hero__title-line + .s01-hero__title-line::before {
        content: "\00a0";
    }

    .home-page .s01-hero__lead-wrap {
        /* from Figma 79:5090 → px 588 (центрирование с боковыми отступами 588 на 1920),
           но в наших границах max-w 1400 (.container темы) — просто центрируем
           без px-clamp. */
    }
    .home-page .s01-hero__lead {
        /* Desktop: Text 2 (18/26), padding 13 29 — Figma 79:5091 */
        font-size: var(--fs-t2);
        line-height: calc(var(--lh-t2) / var(--fs-t2));
        padding: 13px 29px;
        width: auto;        /* shrink to content */
        max-width: 760px;   /* from Figma 79:5092 → 2 строки текста ~760px */
        white-space: normal;
    }

    .home-page .s01-hero__powered {
        /* Desktop: Caption 1 (12/16 +1px) — Figma 79:5095 */
        font-size: var(--fs-cap1);
        line-height: calc(var(--lh-cap1) / var(--fs-cap1));
        letter-spacing: var(--ls-cap1);
    }

    /* cards row */
    .home-page .s01-hero__cards {
        flex-direction: row;
        align-items: stretch;
        /* desktop: max-w 840, h 175 фикс — даём auto, пусть растягивается контентом */
    }
    .home-page .s01-hero__card {
        flex: 1 1 0;
        /* from Figma 79:5098/79:5108 → w 279, py 28 px 22 */
        width: 279px;
        flex-basis: 279px;
    }
    .home-page .s01-hero__card + .s01-hero__card {
        /* divider становится вертикальным */
        border-top: 0;
        border-left: var(--bd-w) solid var(--bd-c-aqua);
    }

    /* metrics row */
    .home-page .s01-hero__metrics {
        flex-direction: row;
        align-items: stretch;
        /* from Figma 79:5124 → h 121, w 840 */
        width: 840px;
        max-width: 840px;
    }
    .home-page .s01-hero__metric {
        flex: 1 1 0;
        /* from Figma 79:5125 → py 22 px 28, gap 5 */
        padding: 22px 28px;
    }
    .home-page .s01-hero__metric + .s01-hero__metric {
        border-top: 0;
        border-left: var(--bd-w) solid var(--bd-c-aqua);
    }
    .home-page .s01-hero__metric-label {
        /* Desktop: Caption 1 (12/16 +1px) — Figma 79:5129 */
        font-size: var(--fs-cap1);
        line-height: calc(var(--lh-cap1) / var(--fs-cap1));
        letter-spacing: var(--ls-cap1);
    }
}


/* ============================================================
   s02-problem (Phase 1, audit 1.5)
   Desktop nodeId: 79:5148   Mobile nodeId: 86:1270 (DIFFERENT content)
   ============================================================ */

/* На mobile показывается __mobile-блок (4 stat + diagram).
   На ≥768px — __desktop-блок (3 problem-card row). */
.home-page .s02-problem {
    background: var(--c-bg);
    /* mobile: только заголовок + лид + 4 карты + диаграмма */
    /* from Figma 86:1270 → pt 64 px 20 (нет нижнего padding в фрейме) */
    padding: 64px 20px;
}
.home-page .s02-problem__desktop { display: none; }
.home-page .s02-problem__mobile  { display: block; }

/* ───── mobile: heading block (86:1271) ───── */
.home-page .s02-problem__m-header {
    display: flex;
    flex-direction: column;
    /* from Figma 86:1271 → gap 19.1 px между блоками */
    gap: 19.1px;
    margin-bottom: 16.9px; /* from Figma 86:1283 → pt 16.9 на сетке кард */
}
.home-page .s02-problem__m-title {
    font-family: var(--ff-display);
    font-weight: 500;
    /* Headline 5 — Figma var (27/32) */
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
    letter-spacing: var(--ls-h5);
    color: var(--c-text);
}
.home-page .s02-problem__m-title--accent { color: var(--c-blue); }
.home-page .s02-problem__m-lead {
    font-family: var(--ff-text);
    /* Text 4 — Figma var (12/19) */
    font-size: var(--fs-t4);
    line-height: var(--lh-t4);
    color: var(--c-text-grey);
}
.home-page .s02-problem__m-lead--white { color: var(--c-text); }

/* ───── mobile: 4 stat-cards (86:1283..86:1303) ───── */
.home-page .s02-problem__m-stats {
    display: grid;
    grid-template-columns: 1fr;
    /* from Figma 86:1283 → gap 10/10 */
    gap: 10px;
}
.home-page .s02-problem__m-stat {
    background: var(--c-bg-aqua);
    border: var(--bd-w) solid var(--bd-c-aqua);
    border-radius: var(--r-sm);
    /* from Figma 86:1284 → padding pt 20 pb 21 px 21 */
    padding: 20px 21px 21px;
    display: flex;
    flex-direction: column;
    /* from Figma 86:1284 → gap 3 */
    gap: 3px;
}
.home-page .s02-problem__m-stat-value {
    font-family: var(--ff-display);
    font-weight: 500;
    /* Headline 5 — Figma var (27/32) */
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
    letter-spacing: var(--ls-h5);
    color: var(--c-red);
}
.home-page .s02-problem__m-stat-label {
    font-family: var(--ff-text);
    /* Text 4 — Figma var (12/19) */
    font-size: var(--fs-t4);
    line-height: var(--lh-t4);
    color: var(--c-text-grey);
}

/* ───── mobile: diagram (86:1304..1355) — composite PNG ───── */
.home-page .s02-problem__m-diagram {
    /* from Figma 86:1304 → h 408 (≈ height of svg-fragment), pt 16.9 visually
       after stats; image сам задаёт свою высоту через width:100% */
    margin-top: 8.39px; /* from Figma 86:1283 row-end mb 8.39 */
    width: 100%;
}
.home-page .s02-problem__m-diagram img {
    width: 100%;
    height: auto;
    max-width: 350px; /* from Figma 86:1271 → w 350 */
    margin: 0 auto;
    display: block;
}

/* ───── desktop (≥768): scrap mobile, render 3 problem-cards (79:5148) ───── */
@media (min-width: 768px) {
    .home-page .s02-problem {
        border-top: var(--bd-w) solid var(--bd-c);
        border-bottom: var(--bd-w) solid var(--bd-c);
        /* from Figma 79:5148 → pt/pb 97, px 52, gap 72 */
        padding: 97px 52px;
    }
    .home-page .s02-problem__mobile  { display: none; }
    .home-page .s02-problem__desktop {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* from Figma 79:5148 → gap 72 */
        gap: 72px;
    }
}

/* ───── desktop header (79:5149/79:5153) ───── */
.home-page .s02-problem__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* from Figma 79:5153 → gap 20 между tag/title/lead */
    gap: 20px;
}

/* tag-pill «THE SECURITY ARCHITECTURE PROBLEM» — 79:14448 */
.home-page .s02-problem__tag {
    display: inline-flex;
    align-items: center;
    /* from Figma 79:14448 → gap 8 */
    gap: 8px;
    /* from Figma 79:14448 → px 17 py 5 */
    padding: 5px 17px;
    background: var(--c-red-bg);
    border: var(--bd-w) solid var(--c-red-dd);
    border-radius: var(--r-pill);
    /* Label preset (mono, 10/16, +2px tracking, uppercase) */
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    line-height: calc(var(--lh-label) / var(--fs-label));
    letter-spacing: var(--ls-label);
    color: var(--c-red);
    text-transform: uppercase;
    white-space: nowrap;
}
.home-page .s02-problem__tag-dot {
    /* from Figma I79:14448;79:14440 → 6×6 r 3 */
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--c-red);
}

.home-page .s02-problem__title {
    font-family: var(--ff-display);
    font-weight: 500;
    /* Headline 2 — Figma var (64/67, -2) */
    font-size: var(--fs-h2);
    line-height: calc(var(--lh-h2) / var(--fs-h2));
    letter-spacing: var(--ls-h2);
    color: var(--c-text);
    /* from Figma 79:5155 → w 1189 (max-width) */
    max-width: 1189px;
}
.home-page .s02-problem__title--accent { color: var(--c-blue); }

.home-page .s02-problem__lead {
    font-family: var(--ff-text);
    /* Text 2 — Figma var (18/26) */
    font-size: var(--fs-t2);
    line-height: calc(var(--lh-t2) / var(--fs-t2));
    color: var(--c-text-grey);
}

/* cards (79:5158 — w 1160, h 343, r 12, border red-dd) */
.home-page .s02-problem__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: var(--bd-w) solid var(--c-red-dd);
    border-radius: var(--r-md);
    overflow: hidden;
    /* from Figma 79:5158 → max-w 1160 */
    max-width: 1160px;
    width: 100%;
}

.home-page .s02-problem__card {
    display: flex;
    flex-direction: column;
    /* from Figma 79:5159 → gap 15.1 */
    gap: 15.1px;
    /* from Figma 79:5159 → pl 32 pr 33 py 40 */
    padding: 40px 33px 40px 32px;
    background: var(--c-bg-card-d);
}
.home-page .s02-problem__card + .s02-problem__card {
    border-left: var(--bd-w) solid var(--c-red-dd);
}

.home-page .s02-problem__card-label {
    font-family: var(--ff-mono);
    /* Label preset (10/16, +2px tracking) */
    font-size: var(--fs-label);
    line-height: calc(var(--lh-label) / var(--fs-label));
    letter-spacing: var(--ls-label);
    color: var(--c-red-d);
    text-transform: uppercase;
}

.home-page .s02-problem__card-title {
    font-family: var(--ff-display);
    font-weight: 700;
    /* Headline card 4 — Figma var (18/24 bold, -1) */
    font-size: var(--fs-hc4);
    line-height: calc(var(--lh-hc4) / var(--fs-hc4));
    letter-spacing: var(--ls-hc4);
    color: var(--c-text);
}

.home-page .s02-problem__card-text {
    font-family: var(--ff-text);
    /* Text 4 — Figma var (12/19) */
    font-size: var(--fs-t4);
    line-height: calc(var(--lh-t4) / var(--fs-t4));
    color: var(--c-text-grey);
    flex: 1;
}

/* «→ Eliminate with: …» — 79:5166 Overlay+VerticalBorder */
.home-page .s02-problem__card-fix {
    background: var(--c-red-bg);
    /* from Figma 79:5166 → border-l 3 (not 1) */
    border-left: 3px solid var(--c-red-d);
    /* from Figma 79:5166 → pl 17 pr 14 py 8 */
    padding: 8px 14px 8px 17px;
    font-family: var(--ff-mono);
    font-weight: 700;
    /* Caption 2 BOLD style (10/16, +1px tracking) */
    font-size: var(--fs-cap2);
    line-height: calc(var(--lh-cap2) / var(--fs-cap2));
    letter-spacing: var(--ls-cap2);
    color: var(--c-red);
}


/* ============================================================
   s03-unified (Phase 6)
   Desktop Figma 79:5186 (04-Section)
   Mobile  Figma 86:1356 — контент уже в .s02-problem__mobile (Phase 1.5),
                            здесь display:none.
   DT split 2-col: intro (5-line H3 + 2 lead) + diagram (560×560 composite SVG)
   + 4 stat-cards row снизу (value H4 red + label T4 grey).
   ============================================================ */
.home-page .s03-unified {
    /* mobile — скрыто, контент в s02-problem__mobile (Phase 1.5) */
    display: none;
}

@media (min-width: 768px) {
    .home-page .s03-unified {
        display: block;
        background: var(--c-bg);
        /* clamp y 64→96 / x 20→80 — единообразно с s11/s15 (Figma 79:5186) */
        padding: clamp(64px, calc(64px + (100vw - 768px) * 0.028), 96px)
                 clamp(20px, calc(20px + (100vw - 768px) * 0.052), 80px);
    }
    .home-page .s03-unified__inner {
        display: flex;
        flex-direction: column;
        gap: 48px;
        max-width: 1200px;
        margin: 0 auto;
        align-items: stretch;
    }
    .home-page .s03-unified__top {
        /* Figma 79:5187 — row gap 80, intro 560 + diagram 560 */
        display: flex;
        gap: 80px;
        align-items: center;
    }
    .home-page .s03-unified__intro {
        flex: 0 0 560px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        min-width: 0;
    }
    .home-page .s03-unified__title {
        /* H3 Syne 500 52/54 -2, 5 lines via __title-line */
        font-family: var(--ff-display);
        font-weight: 500;
        font-size: var(--fs-h3);
        line-height: calc(var(--lh-h3) / var(--fs-h3));
        letter-spacing: var(--ls-h3);
        color: var(--c-text);
    }
    .home-page .s03-unified__title-line {
        display: block;
    }
    .home-page .s03-unified__title-line--accent {
        color: var(--c-blue);
    }
    .home-page .s03-unified__lead {
        font-family: var(--ff-text);
        font-size: var(--fs-t4);
        line-height: calc(var(--lh-t4) / var(--fs-t4));
        color: var(--c-text-grey);
    }
    .home-page .s03-unified__lead-strong {
        color: var(--c-text);
    }
    .home-page .s03-unified__diagram {
        flex: 0 0 560px;
        width: 560px;
        max-width: 100%;
        aspect-ratio: 1 / 1;
        min-width: 0;
    }
    .home-page .s03-unified__diagram img {
        display: block;
        width: 100%;
        height: 100%;
    }
    .home-page .s03-unified__stats {
        /* Figma 79:5250 — row 4 cards, gap 18 */
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }
    .home-page .s03-unified__stat {
        background: var(--c-bg-aqua);
        border: 1px solid var(--c-bg-aqua-grey);
        border-radius: var(--r-md);
        padding: 21px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .home-page .s03-unified__stat-value {
        font-family: var(--ff-display);
        font-weight: 500;
        font-size: var(--fs-h4);
        line-height: calc(var(--lh-h4) / var(--fs-h4));
        letter-spacing: var(--ls-h4);
        color: var(--c-red);
    }
    .home-page .s03-unified__stat-label {
        font-family: var(--ff-text);
        font-size: var(--fs-t4);
        line-height: calc(var(--lh-t4) / var(--fs-t4));
        color: var(--c-text-grey);
    }
}

/* ============================================================
   s04-rings (Phase 7, DT only)
   Desktop Figma 79:5271 (05-Section, 1920×1365)
   Mobile  — нет дизайна, display:none.

   Структура DT:
   - HEADER (centered)  : tag + 2-line H3 split (white / blue) + lead T3
   - 3 SOLUTION TABS    : row, pills cyan/red/green с dot
   - ILLUSTRATION (1320×613): 3 cols absolute layout —
       LEFT 4 actor-cards (190w) + CENTER diagram 520×520 +
       RIGHT 9 pods grouped 3×3 (260w) + connector overlay SVG
   - LEGEND (1100×211)  : 2 boxes DLEP (red) + Compliance (purple)
   ============================================================ */
.home-page .s04-rings {
    /* mobile — нет дизайна */
    display: none;
}

@media (min-width: 768px) {
    .home-page .s04-rings {
        display: block;
        background: var(--c-bg);
        /* from Figma 79:5271 — pt 97 / pb 96 (1365 - 211 legend - 1058 top = 96), px clamp 20→52 */
        padding: clamp(64px, calc(64px + (100vw - 768px) * 0.0214), 97px)
                 clamp(20px, calc(20px + (100vw - 768px) * 0.0278), 52px) 96px;
    }
    .home-page .s04-rings__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        max-width: 1816px;
        margin: 0 auto;
    }

    /* ── HEADER ─────────────────────────────────────────────── */
    .home-page .s04-rings__head {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        text-align: center;
        max-width: 882px;
    }
    .home-page .s04-rings__tag {
        /* from Figma 84:197 — tag-2 instance */
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--c-blue);
        font-family: var(--ff-mono);
        font-size: var(--fs-label);
        line-height: calc(var(--lh-label) / var(--fs-label));
        letter-spacing: var(--ls-label);
        text-transform: uppercase;
    }
    .home-page .s04-rings__tag-line {
        display: inline-block;
        width: 20px;
        height: 1px;
        background: var(--c-blue);
    }
    .home-page .s04-rings__title {
        font-family: var(--ff-display);
        font-weight: 500;
        font-size: var(--fs-h3);
        line-height: calc(var(--lh-h3) / var(--fs-h3));
        letter-spacing: var(--ls-h3);
        color: var(--c-text);
    }
    .home-page .s04-rings__title-line {
        display: block;
    }
    .home-page .s04-rings__title-line--accent {
        color: var(--c-blue);
    }
    .home-page .s04-rings__lead {
        font-family: var(--ff-text);
        font-size: var(--fs-t3);
        line-height: calc(var(--lh-t3) / var(--fs-t3));
        color: var(--c-text-grey);
        max-width: 683px;
    }

    /* ── 3 SOLUTION TABS ────────────────────────────────────── */
    .home-page .s04-rings__tabs {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: center;
    }
    .home-page .s04-rings__tab {
        /* from Figma 84:254 — tag-1 instance ~333×30 */
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 14px;
        border: 1px solid;
        border-radius: var(--r-pill);
        background: rgba(10, 14, 26, 0.6);
        font-family: var(--ff-mono);
        font-size: var(--fs-label);
        line-height: calc(var(--lh-label) / var(--fs-label));
        letter-spacing: var(--ls-label);
        text-transform: uppercase;
        color: var(--c-text);
    }
    .home-page .s04-rings__tab-dot {
        flex: 0 0 6px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
    }
    .home-page .s04-rings__tab--cyan { border-color: var(--c-aqua); }
    .home-page .s04-rings__tab--cyan .s04-rings__tab-dot { background: var(--c-aqua); }
    .home-page .s04-rings__tab--red { border-color: var(--c-red); }
    .home-page .s04-rings__tab--red .s04-rings__tab-dot { background: var(--c-red); }
    .home-page .s04-rings__tab--green { border-color: var(--c-green); }
    .home-page .s04-rings__tab--green .s04-rings__tab-dot { background: var(--c-green); }

    /* ── ILLUSTRATION (1320×613) ────────────────────────────── */
    .home-page .s04-rings__illustration {
        /* from Figma 79:5290 — 1320×613, absolute children */
        position: relative;
        width: 1320px;
        max-width: 100%;
        height: 613px;
        margin: 0 auto;
    }
    .home-page .s04-rings__connectors {
        /* SVG 79:5526 — 1320×613 dashed connectors overlay */
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    /* LEFT actors */
    .home-page .s04-rings__actors {
        /* from Figma 79:5291 — w 190, h 350 at top 131.32 */
        position: absolute;
        left: 0;
        top: 131px;
        width: 190px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .home-page .s04-rings__actor {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 13px 15px;
        background: var(--c-bg-card-d);
        border: 1px solid var(--c-bg-aqua-grey);
        border-radius: var(--r-sm);
        min-height: 70px;
    }
    .home-page .s04-rings__actor-bar {
        position: absolute;
        left: 1px;
        top: 1px;
        bottom: 1px;
        width: 4px;
        border-radius: var(--r-sm) 0 0 var(--r-sm);
    }
    .home-page .s04-rings__actor--cyan .s04-rings__actor-bar { background: var(--c-aqua); }
    .home-page .s04-rings__actor--purple .s04-rings__actor-bar { background: var(--c-purple); }
    .home-page .s04-rings__actor--yellow .s04-rings__actor-bar { background: var(--c-orange); }
    .home-page .s04-rings__actor--red .s04-rings__actor-bar { background: var(--c-red); }
    .home-page .s04-rings__actor-icon {
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        margin-left: 4px;
    }
    .home-page .s04-rings__actor-body {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .home-page .s04-rings__actor-title {
        font-family: var(--ff-display);
        font-weight: 700;
        font-size: var(--fs-tag);
        line-height: calc(var(--lh-tag) / var(--fs-tag));
        letter-spacing: var(--ls-tag);
        color: var(--c-text);
    }
    .home-page .s04-rings__actor-desc {
        font-family: var(--ff-text);
        font-size: var(--fs-t5);
        line-height: calc(var(--lh-t5) / var(--fs-t5));
        color: var(--c-text-grey);
    }
    .home-page .s04-rings__actor-badge {
        display: inline-flex;
        align-items: center;
        margin-top: 2px;
        padding: 4px 8px;
        background: rgba(255, 96, 96, 0.12);
        border: 1px solid rgba(255, 96, 96, 0.35);
        border-radius: var(--r-sm);
        font-family: var(--ff-mono);
        font-size: var(--fs-label);
        line-height: calc(var(--lh-label) / var(--fs-label));
        letter-spacing: var(--ls-label);
        color: var(--c-red);
        text-transform: uppercase;
        width: fit-content;
    }

    /* CENTER diagram */
    .home-page .s04-rings__center {
        /* from Figma 79:5330 — w 870 h 540, diagram centered inside */
        position: absolute;
        left: 190px;
        top: 36px;
        width: 870px;
        height: 540px;
        display: grid;
        place-items: center;
    }
    .home-page .s04-rings__diagram {
        position: relative;
        width: 520px;
        height: 520px;
    }
    .home-page .s04-rings__diagram-img {
        display: block;
        width: 100%;
        height: 100%;
    }
    /* 6 badges — center coordinates from Figma 79:5404..5414 (на 520×520) */
    .home-page .s04-rings__badge {
        position: absolute;
        transform: translate(-50%, -50%);
        padding: 3px 7px;
        border-radius: var(--r-sm);
        font-family: var(--ff-mono);
        font-weight: 700;
        font-size: var(--fs-label);
        line-height: calc(var(--lh-label) / var(--fs-label));
        letter-spacing: var(--ls-label);
        color: var(--c-bg-card-d);
        white-space: nowrap;
    }
    .home-page .s04-rings__badge--adc { left: 50%;   top: 23.8%; background: var(--c-orange); }
    .home-page .s04-rings__badge--dac { left: 72.6%; top: 36.9%; background: var(--c-aqua); }
    .home-page .s04-rings__badge--aaa { left: 27.3%; top: 36.9%; background: var(--c-purple); }
    .home-page .s04-rings__badge--aps { left: 27.5%; top: 63.1%; background: var(--c-purple); }
    .home-page .s04-rings__badge--rra { left: 72.6%; top: 63.1%; background: var(--c-aqua); }
    .home-page .s04-rings__badge--arw { left: 50.1%; top: 76.2%; background: var(--c-green); }

    /* 2 shield chips — from Figma 79:5416 / 79:5421 */
    .home-page .s04-rings__shield {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }
    .home-page .s04-rings__shield--dlep { right: 7.5%; }
    .home-page .s04-rings__shield--compliance { left: 4.6%; }
    .home-page .s04-rings__shield-icon {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        filter: drop-shadow(0 0 6px rgba(255, 96, 96, 0.5));
    }
    .home-page .s04-rings__shield--compliance .s04-rings__shield-icon {
        filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.5));
    }
    .home-page .s04-rings__shield-label {
        font-family: var(--ff-mono);
        font-weight: 700;
        font-size: var(--fs-label);
        line-height: calc(var(--lh-label) / var(--fs-label));
        letter-spacing: var(--ls-label);
        text-transform: uppercase;
    }
    .home-page .s04-rings__shield--dlep .s04-rings__shield-label { color: var(--c-red); }
    .home-page .s04-rings__shield--compliance .s04-rings__shield-label { color: var(--c-purple); }

    /* Center node — 110×110 at 50%/50% */
    .home-page .s04-rings__node {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 110px;
        height: 110px;
        border-radius: 50%;
        background: radial-gradient(circle at 50% 30%, rgba(167, 139, 250, 0.55) 0%, rgba(10, 14, 26, 0.95) 70%);
        border: 1.5px solid rgba(167, 139, 250, 0.5);
        box-shadow: 0 0 24px rgba(167, 139, 250, 0.35), inset 0 0 12px rgba(167, 139, 250, 0.4);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
    }
    .home-page .s04-rings__node-tag {
        font-family: var(--ff-mono);
        font-size: var(--fs-label);
        line-height: calc(var(--lh-label) / var(--fs-label));
        letter-spacing: var(--ls-label);
        color: var(--c-text);
        text-transform: uppercase;
    }
    .home-page .s04-rings__node-title {
        font-family: var(--ff-display);
        font-weight: 800;
        font-size: 24px;
        line-height: 1;
        color: var(--c-text);
        margin-top: 2px;
    }

    /* RIGHT pods */
    .home-page .s04-rings__pods {
        /* from Figma 79:5432 — w 260, h 616 at left 1060 top -1.68 */
        position: absolute;
        left: 1060px;
        top: 0;
        width: 260px;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .home-page .s04-rings__pod-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .home-page .s04-rings__pod-head {
        padding: 3px 10px 5px;
        border-bottom: 1px solid;
        font-family: var(--ff-mono);
        font-weight: 700;
        font-size: var(--fs-label);
        line-height: calc(var(--lh-label) / var(--fs-label));
        letter-spacing: var(--ls-label);
        text-transform: uppercase;
    }
    .home-page .s04-rings__pod-group--cyan .s04-rings__pod-head { color: var(--c-aqua); border-color: rgba(34, 211, 238, 0.4); }
    .home-page .s04-rings__pod-group--red .s04-rings__pod-head { color: var(--c-red); border-color: rgba(255, 96, 96, 0.4); }
    .home-page .s04-rings__pod-group--green .s04-rings__pod-head { color: var(--c-green); border-color: rgba(52, 211, 153, 0.4); }
    .home-page .s04-rings__pod-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .home-page .s04-rings__pod {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: 9px;
        padding: 11px 13px 11px 18px;
        background: var(--c-bg-card-d);
        border: 1px solid var(--c-bg-aqua-grey);
        border-radius: var(--r-sm);
        min-height: 51px;
    }
    .home-page .s04-rings__pod--tall {
        min-height: 64px;
    }
    .home-page .s04-rings__pod-bar {
        position: absolute;
        left: 1px;
        top: 1px;
        bottom: 1px;
        width: 3px;
        border-radius: var(--r-sm) 0 0 var(--r-sm);
    }
    .home-page .s04-rings__pod-group--cyan .s04-rings__pod-bar { background: var(--c-aqua); }
    .home-page .s04-rings__pod-group--red .s04-rings__pod-bar { background: var(--c-red); }
    .home-page .s04-rings__pod-group--green .s04-rings__pod-bar { background: var(--c-green); }
    .home-page .s04-rings__pod-icon {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }
    .home-page .s04-rings__pod-body {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 1px;
    }
    .home-page .s04-rings__pod-title {
        font-family: var(--ff-display);
        font-weight: 700;
        font-size: 11px;
        line-height: 15px;
        color: var(--c-text);
    }
    .home-page .s04-rings__pod-desc {
        font-family: var(--ff-text);
        font-size: var(--fs-t5);
        line-height: calc(var(--lh-t5) / var(--fs-t5));
        color: var(--c-text-grey);
    }

    /* ── LEGEND (1100×211) ──────────────────────────────────── */
    .home-page .s04-rings__legend {
        /* from Figma 79:5566 — 1100×211 */
        width: 1100px;
        max-width: 100%;
        padding: 24px 29px;
        background: rgba(10, 14, 26, 0.6);
        border: 1px solid var(--c-bg-aqua-grey);
        border-radius: var(--r-md);
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .home-page .s04-rings__legend-title {
        font-family: var(--ff-mono);
        font-size: var(--fs-label);
        line-height: calc(var(--lh-label) / var(--fs-label));
        letter-spacing: var(--ls-label);
        color: var(--c-text-grey-2);
        text-transform: uppercase;
    }
    .home-page .s04-rings__legend-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .home-page .s04-rings__legend-box {
        padding: 17px 19px;
        background: var(--c-bg-card-d);
        border: 1px solid var(--c-bg-aqua-grey);
        border-radius: var(--r-md);
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-height: 120px;
    }
    .home-page .s04-rings__legend-head {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .home-page .s04-rings__legend-icon {
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }
    .home-page .s04-rings__legend-name {
        font-family: var(--ff-display);
        font-weight: 800;
        font-size: 13px;
        line-height: 21px;
        letter-spacing: 2px;
        text-transform: uppercase;
    }
    .home-page .s04-rings__legend-name--red { color: var(--c-red); }
    .home-page .s04-rings__legend-name--purple { color: var(--c-purple); }
    .home-page .s04-rings__legend-desc {
        font-family: var(--ff-text);
        font-size: var(--fs-t4);
        line-height: calc(var(--lh-t4) / var(--fs-t4));
        color: var(--c-text-grey);
    }
    .home-page .s04-rings__legend-desc-strong {
        color: var(--c-text);
    }
}

/* ============================================================
   s05-three-steps (Phase 3)
   Desktop nodeId: 79:5586   Mobile nodeId: 86:1702
   Mobile-first → @media (min-width: 768px) меняет stack → row,
   показывает arrows между cards, переключает H5 → H3.
   ============================================================ */

.home-page .s05-three-steps {
    background: var(--c-bg-card-d);
    border-top: var(--bd-w) solid var(--bd-c-aqua);
    /* from Figma 86:1702 → mobile pt 65 pb 64 px 20 gap 56 */
    padding: 65px 20px 64px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 56px;
}
.home-page .s05-three-steps__head {
    /* from Figma 86:1703 → max-w 700 gap 13 items-center */
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    text-align: center;
}
.home-page .s05-three-steps__tag {
    /* from Figma 92:5816 → gap 10 items-center */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    line-height: var(--lh-label);
    letter-spacing: var(--ls-label);
    color: var(--c-blue);
    text-transform: uppercase;
}
.home-page .s05-three-steps__tag-line {
    /* from Figma I92:5816;84:192 → h-px w-20 bg blue */
    display: block;
    width: 20px;
    height: 1px;
    background: var(--c-blue);
}
.home-page .s05-three-steps__title {
    /* mobile = Headline 5 (27/32 ls 0) — Figma 86:1708 */
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
    letter-spacing: var(--ls-h5);
    color: var(--c-text);
    margin: 0;
}
.home-page .s05-three-steps__title--accent { color: var(--c-blue); }

.home-page .s05-three-steps__cards {
    display: flex;
    flex-direction: column;
    /* from Figma 92:5820 → gap 16 */
    gap: 16px;
}
.home-page .s05-three-steps__card {
    /* from Figma 92:5821 → bg, border, radius 12, px 29 py 37, gap 32 inside */
    position: relative;
    background: var(--c-bg-aqua);
    border: var(--bd-w) solid var(--bd-c-aqua);
    border-radius: var(--r-md);
    padding: 37px 29px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    overflow: hidden;
}
.home-page .s05-three-steps__card::before {
    /* top gradient bar — Figma I92:5821;85:858 → h-3px blue → aqua */
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(to right, var(--c-blue), var(--c-aqua));
    pointer-events: none;
}
.home-page .s05-three-steps__card-label {
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    line-height: var(--lh-label);
    letter-spacing: var(--ls-label);
    color: var(--c-text-mute);
    text-transform: uppercase;
}
.home-page .s05-three-steps__card-icon {
    /* from Figma → size 28 */
    width: 28px;
    height: 28px;
    display: inline-flex;
}
.home-page .s05-three-steps__card-icon img { width: 100%; height: 100%; }

.home-page .s05-three-steps__card-title {
    /* Headline card 4 = Syne Bold 18/24 -0.18 — Figma I92:5821;85:853 */
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: var(--fs-hc4);
    line-height: var(--lh-hc4);
    letter-spacing: var(--ls-hc4);
    color: var(--c-text);
    margin: 0;
}
.home-page .s05-three-steps__card-text {
    /* Text 4 — DM Sans 12/19 — Figma I92:5821;85:855 */
    font-family: var(--ff-text);
    font-size: var(--fs-t4);
    line-height: var(--lh-t4);
    color: var(--c-text-grey);
    margin: 0;
}
.home-page .s05-three-steps__card-text--white { color: var(--c-text); }

.home-page .s05-three-steps__card-outcome {
    /* footer pill — Figma I92:5821;85:856 → bg aqua-d, border rgba(0,255,212,.2), radius 6 */
    background: var(--c-bg-aqua-d);
    border: var(--bd-w) solid rgba(0, 255, 212, 0.2);
    border-radius: var(--r-sm);
    /* from Figma → pt 12.79 pb 8 px 13 */
    padding: 12.79px 13px 8px;
    font-family: var(--ff-mono);
    font-size: var(--fs-cap2);
    line-height: var(--lh-cap2);
    letter-spacing: var(--ls-cap2);
    color: var(--c-aqua);
    margin: 0;
}

/* arrow between cards — hidden on mobile, visible on desktop */
.home-page .s05-three-steps__arrow {
    display: none;
}

.home-page .s05-three-steps__bottom {
    /* from Figma 92:5828 → gap 9.64 items-center */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9.64px;
    text-align: center;
}
.home-page .s05-three-steps__bottom-label {
    font-family: var(--ff-mono);
    font-size: var(--fs-cap1);
    line-height: var(--lh-cap1);
    letter-spacing: var(--ls-cap1);
    color: var(--c-text-grey);
    text-transform: uppercase;
    margin: 0;
}
.home-page .s05-three-steps__bottom-arrow {
    display: inline-flex;
    width: 19.6px;
    height: 20.636px;
    transform: rotate(90deg);
}
.home-page .s05-three-steps__bottom-arrow img { width: 100%; height: 100%; }

/* DESKTOP — layout-shift на row + видимые arrows + H3 */
@media (min-width: 768px) {
    .home-page .s05-three-steps {
        /* from Figma 79:5586 → pt 97 pb 96 px 52 gap 56 */
        padding: 97px 52px 96px;
        align-items: center;
    }
    .home-page .s05-three-steps__head {
        gap: 14px;
    }
    .home-page .s05-three-steps__title {
        /* Headline 3 = 52/54 -2 — Figma 79:5592 */
        font-size: var(--fs-h3);
        line-height: var(--lh-h3);
        letter-spacing: var(--ls-h3);
        max-width: 584px;
    }
    .home-page .s05-three-steps__cards {
        /* from Figma 79:5594 → h-426 row, gap 0 (arrows внутри) */
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 0;
        flex-wrap: wrap;
    }
    .home-page .s05-three-steps__card {
        /* from Figma 85:864 → w 327 inner gap 13, items justify-between */
        width: 327px;
        flex: 0 0 327px;
        gap: 13px;
        justify-content: space-between;
    }
    .home-page .s05-three-steps__arrow {
        /* from Figma 85:880 → w 60 h 126, pt 79 px 16 */
        display: inline-flex;
        align-items: flex-start;
        justify-content: center;
        flex: 0 0 60px;
        width: 60px;
        padding-top: 79px;
        align-self: stretch;
    }
    .home-page .s05-three-steps__arrow img {
        width: 19.6px;
        height: 20.636px;
    }
}

/* ============================================================
   s06-wm-intro (Phase 3)
   Desktop nodeId: 79:5650   Mobile nodeId: 86:1762
   Aqua tag-pill (full-width на mobile, fit-content на desktop) +
   H5↔H2 split title + lead + 3 chip-пилюли (col↔row).
   ============================================================ */

.home-page .s06-wm-intro {
    background: var(--c-bg-card-d);
    border-top: var(--bd-w) solid var(--bd-c);
    border-bottom: var(--bd-w) solid var(--bd-c);
    /* from Figma 86:1762 → mobile px 20 py 65 gap 48 items-start */
    padding: 65px 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
}
.home-page .s06-wm-intro__head {
    /* from Figma 86:1764 → max-w 860 gap 21 items-start */
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 21px;
}
.home-page .s06-wm-intro__tag {
    /* mobile = full-width aqua pill — Figma 92:5894 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--c-bg-aqua-d);
    border: var(--bd-w) solid var(--bd-c-aqua);
    border-radius: var(--r-pill);
    padding: 5px 17px;
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    line-height: var(--lh-label);
    letter-spacing: var(--ls-label);
    color: var(--c-aqua);
    text-transform: uppercase;
    text-align: center;
}
.home-page .s06-wm-intro__tag-dot {
    /* from Figma I92:5894;79:14440 → 6×6 radius 3 bg aqua */
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--c-aqua);
    flex-shrink: 0;
}

.home-page .s06-wm-intro__title {
    /* mobile = Headline 5 (27/32 ls 0) — Figma 86:1769 */
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
    letter-spacing: var(--ls-h5);
    color: var(--c-text);
    text-align: center;
    margin: 0;
}
.home-page .s06-wm-intro__title--accent { color: var(--c-blue); }

.home-page .s06-wm-intro__lead {
    /* mobile = Text 4 (12/19) — Figma 86:1772 */
    font-family: var(--ff-text);
    font-size: var(--fs-t4);
    line-height: var(--lh-t4);
    color: var(--c-text-grey);
    text-align: center;
    margin: 0;
}

/* chips: stack mobile, row desktop */
.home-page .s06-wm-intro__chips {
    /* from Figma 86:1773 → gap 16, items-center justify-center */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.home-page .s06-wm-intro__chip {
    /* from Figma 84:294 → bg aqua-d, border aqua-grey, rounded 100, px 15 py 7, gap 8, h 37 */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 37px;
    background: var(--c-bg-aqua-d);
    border: var(--bd-w) solid var(--bd-c-aqua);
    border-radius: var(--r-pill);
    padding: 7px 15px;
}
.home-page .s06-wm-intro__chip-icon {
    /* from Figma 84:317 → size 14 */
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.home-page .s06-wm-intro__chip-icon img { width: 100%; height: 100%; }

.home-page .s06-wm-intro__chip-text {
    /* Text 4 — DM Sans 12/19 — Figma 84:292 */
    font-family: var(--ff-text);
    font-size: var(--fs-t4);
    line-height: var(--lh-t4);
    color: var(--c-text-grey);
    white-space: nowrap;
}

/* DESKTOP — H5→H2, lead T4→T2, chips col→row, tag pill fit-content */
@media (min-width: 768px) {
    .home-page .s06-wm-intro {
        /* from Figma 79:5650 → py 97 px 52 gap 72 items-center */
        padding: 97px 52px;
        gap: 72px;
        align-items: center;
    }
    .home-page .s06-wm-intro__head {
        /* from Figma 79:5652 → w 1370 max-w 1370 gap 22 items-center */
        max-width: 1370px;
        width: 100%;
        align-items: center;
        gap: 22px;
    }
    .home-page .s06-wm-intro__tag {
        /* fit-content на desktop */
        width: auto;
        text-align: left;
    }
    .home-page .s06-wm-intro__title {
        /* Headline 2 = 64/67 -2 — Figma 79:5657 */
        font-size: var(--fs-h2);
        line-height: var(--lh-h2);
        letter-spacing: var(--ls-h2);
        max-width: 893px;
    }
    .home-page .s06-wm-intro__lead {
        /* Text 2 = 18/26 — Figma 79:5660 */
        font-size: var(--fs-t2);
        line-height: var(--lh-t2);
    }
    .home-page .s06-wm-intro__chips {
        /* row on desktop — Figma 79:5661 → gap-x 28 wrap */
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0 28px;
    }
}

/* ============================================================
   s07-wm-arch (Phase 8, DT only)
   Desktop Figma 79:5686 (08-Section, 1920×918)
   Mobile  — нет дизайна, display:none.
   Container 79:5687 1160×630 = LEFT pillar 220 + CENTER 720 + RIGHT pillar 220
   + CTA-wrap 79:5938 (gap 48 от container до button, button 301×48).
   ============================================================ */
.home-page .s07-wm-arch {
    /* mobile — скрыто (нет дизайна) */
    display: none;
}

@media (min-width: 768px) {
    .home-page .s07-wm-arch {
        display: block;
        background: var(--c-bg);
        /* from Figma 79:5686 — top/bottom padding 96 */
        padding-block: 96px;
    }
    .home-page .s07-wm-arch__inner {
        max-width: 1160px;
        margin: 0 auto;
        padding-inline: 20px;
    }
    .home-page .s07-wm-arch__container {
        /* 3 cols: 220 + 720 + 220 = 1160, без gap (Figma 79:5687) */
        display: flex;
        gap: 0;
        align-items: flex-start;
    }

    /* ── PILLAR (220w, 4 cards + head) ── */
    .home-page .s07-wm-arch__pillar {
        flex: 0 0 220px;
        display: flex;
        flex-direction: column;
        /* from Figma 79:5688 — gap 14 между cards */
        gap: 14px;
    }
    .home-page .s07-wm-arch__pillar--left  { padding-right: 24px; }
    .home-page .s07-wm-arch__pillar--right { padding-left: 24px; }

    /* pillar-head — "Margin" 196×31 с HorizontalBorder 196×27 + 4 bottom */
    .home-page .s07-wm-arch__pillar-head {
        padding: 0 4px 4px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
    .home-page .s07-wm-arch__pillar-title {
        font-family: var(--ff-mono);
        font-weight: 400;
        font-size: var(--fs-label);
        line-height: 16px;
        letter-spacing: var(--ls-label);
        text-transform: uppercase;
        color: var(--c-blue); /* Structural — Light Blue (Figma var) */
        margin: 0;
    }
    .home-page .s07-wm-arch__pillar-head--aqua .s07-wm-arch__pillar-title {
        color: var(--c-aqua); /* Behavioral — Aquamarine */
    }

    /* ── CARD (196×132, last right card 146 tall) ── */
    .home-page .s07-wm-arch__card {
        position: relative;
        width: 196px;
        height: 132px;
        background: transparent;
        border: 1px solid var(--c-bg-aqua-grey);
        border-radius: var(--r-md);
        /* from Figma — padding 14×18 */
        padding: 14px 18px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        overflow: hidden;
    }
    .home-page .s07-wm-arch__card--tall { height: 146px; }

    /* Left accent bar 3px по color-modifier */
    .home-page .s07-wm-arch__card::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 3px;
        border-radius: 3px 0 0 3px;
    }
    .home-page .s07-wm-arch__card--cyan::before   { background: var(--c-blue); }
    .home-page .s07-wm-arch__card--aqua::before   { background: var(--c-aqua); }
    .home-page .s07-wm-arch__card--orange::before { background: var(--c-orange); }
    .home-page .s07-wm-arch__card--purple::before { background: var(--c-purple); }

    .home-page .s07-wm-arch__card-icon {
        position: relative;
        display: block;
        width: 18px;
        height: 18px;
        margin: 2px 0 6px;
        overflow: hidden;
        flex: none;
    }
    .home-page .s07-wm-arch__card-icon img {
        display: block;
        max-width: 100%;
        max-height: 100%;
    }
    .home-page .s07-wm-arch__card-label {
        font-family: var(--ff-mono);
        font-weight: 400;
        font-size: var(--fs-label);
        line-height: 16px;
        letter-spacing: var(--ls-label);
        text-transform: uppercase;
        color: var(--c-text-mute); /* Blue/Grey Blue #3D6880 */
        margin: 0;
    }
    .home-page .s07-wm-arch__card-title {
        font-family: var(--ff-display);
        font-weight: 700;
        font-size: var(--fs-hc5);
        line-height: 18px;
        letter-spacing: var(--ls-hc5);
        color: var(--c-text);
        margin: 0;
        padding-top: 4px;
    }
    .home-page .s07-wm-arch__card-desc {
        font-family: var(--ff-text);
        font-weight: 400;
        font-size: var(--fs-t5);
        line-height: 14px;
        color: var(--c-text-grey);
        margin: 0;
        padding-top: 2px;
    }

    /* ── CENTER (Illustration-3 79:5745 720×620) ── */
    .home-page .s07-wm-arch__center {
        position: relative;
        width: 720px;
        height: 620px;
        flex: 0 0 720px;
    }
    .home-page .s07-wm-arch__diagram-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    /* AGENT (Figma 79:5818) — 80×80 chip, координаты центров inline через style
       (top/left из Figma absolute coords внутри 720×620 wrapper) */
    .home-page .s07-wm-arch__agent {
        position: absolute;
        width: 80px;
        height: 80px;
        transform: translate(-50%, -50%);
        border: 2px solid rgba(0, 170, 255, 0.78);
        border-radius: 40px;
        background: rgba(4, 18, 38, 0.97);
        backdrop-filter: blur(2px);
        box-shadow:
            0 0 24px rgba(0, 170, 255, 0.5),
            inset 0 0 6px rgba(0, 170, 255, 0.25);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2px;
        margin: 0;
        z-index: 3;
    }
    .home-page .s07-wm-arch__agent-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        margin-bottom: 3px;
    }
    .home-page .s07-wm-arch__agent-icon img {
        display: block;
        width: 100%;
        height: 100%;
    }
    .home-page .s07-wm-arch__agent-icon--emoji {
        font-size: 20px;
        line-height: 1;
        color: var(--c-text);
    }
    .home-page .s07-wm-arch__agent-label {
        font-family: var(--ff-mono);
        font-weight: 500;
        font-size: 7px;
        line-height: 8.4px;
        letter-spacing: 0.42px;
        color: var(--c-aqua);
        text-align: center;
        margin: 0;
    }

    /* NUCLEUS: World Model (Figma 79:5874) 148×148 центр.
       radial-gradient + 3-слойный glow + 9px tag + Syne 800 17/19.55 title */
    .home-page .s07-wm-arch__nucleus {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 148px;
        height: 148px;
        border-radius: 74px;
        border: 2px solid var(--c-blue);
        background: radial-gradient(circle at 38% 35%,
            rgba(10, 42, 74, 1) 0%,
            rgba(6, 28, 50, 1) 50%,
            rgba(2, 13, 26, 1) 100%);
        box-shadow:
            0 0 0 8px rgba(0, 170, 255, 0.14),
            0 0 50px 0 rgba(0, 170, 255, 0.75),
            0 0 90px 0 rgba(0, 170, 255, 0.35);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 2px;
        z-index: 5;
    }
    .home-page .s07-wm-arch__nucleus-tag {
        font-family: var(--ff-mono);
        font-weight: 400;
        font-size: 9px;
        line-height: 14.85px;
        letter-spacing: 1.44px;
        text-transform: uppercase;
        color: var(--c-blue);
        opacity: 0.8;
        margin: 0 0 2px;
    }
    .home-page .s07-wm-arch__nucleus-title {
        font-family: var(--ff-display);
        font-weight: 800; /* Syne ExtraBold */
        font-size: 17px;
        line-height: 19.55px;
        letter-spacing: -0.17px;
        color: var(--c-text);
        margin: 0;
    }
    .home-page .s07-wm-arch__nucleus-foot {
        font-family: var(--ff-mono);
        font-weight: 400;
        font-size: 8px;
        line-height: 13.2px;
        letter-spacing: 0.96px;
        text-transform: uppercase;
        color: var(--c-aqua);
        opacity: 0.9;
        margin: 4px 0 0;
    }

    /* ── CTA-wrap (79:5938 1920×96, кнопка по центру через y=48 → gap 48px) ── */
    .home-page .s07-wm-arch__cta-wrap {
        display: flex;
        justify-content: center;
        padding-top: 48px;
    }
    .home-page .s07-wm-arch__cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 48px;
        padding: 13px 30px;
        background: var(--c-blue);
        color: var(--c-bg);
        font-family: var(--ff-text);
        font-weight: 500;
        font-size: var(--fs-btn);
        line-height: 1;
        border-radius: var(--r-sm);
        text-decoration: none;
        filter: var(--glow-blue);
        transition: filter .15s ease;
    }
    .home-page .s07-wm-arch__cta:hover,
    .home-page .s07-wm-arch__cta:focus-visible {
        filter: var(--glow-blue-h);
    }
}


/* ============================================================
   s08-quote-1 (Phase 1, audit 1.5)
   Desktop nodeId: 79:5941   (DT only — на mobile нет в дизайне)
   ============================================================ */

.home-page .s08-quote-1 {
    background: var(--c-bg-card-d);
    border-top: var(--bd-w) solid var(--bd-c);
    /* from Figma 79:5941 → pt 97 pb 96 px 506 (1920w) → padding-block fixed,
       inline px должен схлопываться при < 1920. Используем безопасный
       max-width на тексте и padding-x как у container темы. */
    padding: 97px 0 96px;
}
.home-page .s08-quote-1__inner {
    display: flex;
    justify-content: center;
    padding-inline: 20px; /* из gc_n .container */
}
.home-page .s08-quote-1__text {
    font-family: var(--ff-display);
    font-weight: 500;
    /* Headline 4 — Figma var (34/40, -1) */
    font-size: var(--fs-h4);
    line-height: calc(var(--lh-h4) / var(--fs-h4));
    letter-spacing: var(--ls-h4);
    color: var(--c-text-grey);
    text-align: center;
    /* from Figma 79:5942 → w 992 */
    max-width: 992px;
}
.home-page .s08-quote-1__accent {
    color: var(--c-text);
    font-weight: 500;
}

@media (max-width: 767.98px) {
    .home-page .s08-quote-1 { display: none; }
}


/* ============================================================
   s09-trust (Phase 4)
   Desktop Figma 79:6001  ·  Mobile Figma 86:1844
   Header H4 Bold + 12 industry pill-cards (DT 4×3, M 2×6) + Button-2 CTA.
   ============================================================ */
.home-page .s09-trust {
    /* from Figma 79:6001 → bg-gradient + inset shadow + border-t/b rgba(blue,.35) */
    position: relative;
    border-top: 1px solid rgba(0, 170, 255, 0.35);
    border-bottom: 1px solid rgba(0, 170, 255, 0.35);
    background-image: linear-gradient(125.772deg,
        rgba(0, 170, 255, 0.12) 0%,
        rgba(8, 24, 40, 0.98) 50%,
        rgba(0, 255, 212, 0.08) 100%);
    overflow: hidden;
    /* mobile 86:1844 → px 20 py 65 */
    padding: 65px 20px;
}
.home-page .s09-trust::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 80px rgba(0, 170, 255, 0.18);
}
.home-page .s09-trust__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    /* mobile gap 48 — Figma 86:1844 */
    gap: 48px;
    align-items: flex-start;
}
.home-page .s09-trust__title {
    /* mobile 86:1844 — Headline 4 (34/40 -1) Bold (НЕ Medium как variable)
       per handoff PROGRESS.md p4 — title 2 lines на DT, 1 line на M */
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: var(--fs-h4);
    line-height: calc(var(--lh-h4) / var(--fs-h4));
    letter-spacing: var(--ls-h4);
    color: var(--c-text);
    text-align: left;
}
.home-page .s09-trust__title br {
    /* mobile — title в одну строку — убираем перенос */
    display: none;
}
.home-page .s09-trust__grid {
    /* mobile 86:1844 → 2-col grid, cards w 168 h 72, gap 14 */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    width: 100%;
}
.home-page .s09-trust__card {
    /* from Figma 84:870 — bg rgba(blue,.06) border rgba(blue,.25) r-12 */
    height: 72px;
    background: rgba(0, 170, 255, 0.06);
    border: 1px solid rgba(0, 170, 255, 0.25);
    border-radius: var(--r-md);
    /* mobile 86:1844 — w 168, на узких экранах grid 1fr shrinks card content */
    min-width: 0;
    /* padding px-14 py-26 gap 12 items-center (mobile) */
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.home-page .s09-trust__card > .s09-trust__name {
    min-width: 0;
    overflow-wrap: anywhere;
}
.home-page .s09-trust__icon {
    /* icon 20×20 opacity 0.7 */
    width: 20px;
    height: 20px;
    opacity: 0.7;
    flex-shrink: 0;
}
.home-page .s09-trust__icon--multi {
    position: relative;
    display: block;
    color: var(--c-blue);
}
.home-page .s09-trust__v {
    position: absolute;
}
.home-page .s09-trust__vi {
    position: absolute;
    inset: 0;
}
.home-page .s09-trust__icon--multi img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}
.home-page .s09-trust__name {
    /* JetBrains Mono Bold 10/16 letter-spacing 1 white */
    font-family: var(--ff-mono);
    font-weight: 700;
    font-size: var(--fs-cap2);
    line-height: calc(var(--lh-cap2) / var(--fs-cap2));
    letter-spacing: var(--ls-cap2);
    color: var(--c-text);
}
.home-page .s09-trust__cta {
    /* Figma 84:664 Button-2 — bg blue, padding 13/30, r-6, glow-blue,
       DM Sans 16/22 #030C12 */
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 30px;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--c-blue);
    color: var(--c-bg);
    font-family: var(--ff-text);
    font-weight: 400;
    font-size: var(--fs-btn);
    line-height: calc(var(--lh-btn) / var(--fs-btn));
    cursor: pointer;
    filter: var(--glow-blue);
    transition: filter .2s ease, transform .2s ease;
}
.home-page .s09-trust__cta:hover {
    transform: translateY(-1px);
    filter: var(--glow-blue-h);
}

@media (min-width: 768px) {
    .home-page .s09-trust {
        /* desktop 79:6001 → outer padding ~460px (центрирование 1000px container в 1920) py 97 */
        padding: 97px clamp(52px, calc(52px + (100vw - 768px) * 0.354), 460px);
    }
    .home-page .s09-trust__inner {
        gap: 48px;
        align-items: center;
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
    }
    .home-page .s09-trust__title {
        /* desktop 79:6004 — 2 lines centered */
        text-align: center;
    }
    .home-page .s09-trust__title br {
        display: inline;
    }
    .home-page .s09-trust__grid {
        /* desktop 79:6005 → 4 cols × 3 rows, w-960 cards 229×72 gap 14 */
        grid-template-columns: repeat(4, 229px);
        gap: 14px;
        justify-content: center;
        max-width: 960px;
    }
    .home-page .s09-trust__card {
        /* desktop — restore px-19 gap-20 per Figma 84:870 */
        padding: 0 19px;
        gap: 20px;
    }
}

/* ============================================================
   s10-generations (Phase 4)
   Desktop Figma 79:6072  ·  Mobile Figma 86:1913
   Timeline 5 поколений: DT row 5-col gradient-line + dots, M col stacked.
   Gen 5 active: blue glow dot + blue title + ADP-pill.
   ============================================================ */
.home-page .s10-generations {
    background: var(--c-bg-card-d);
    /* mobile 86:1913 → px 20 py 64 */
    padding: 64px 20px;
}
.home-page .s10-generations__inner {
    display: flex;
    flex-direction: column;
    /* mobile gap 60 */
    gap: 60px;
    align-items: flex-start;
    width: 100%;
}
.home-page .s10-generations__head {
    display: flex;
    flex-direction: column;
    /* mobile gap 12.8 — Figma 86:1913 */
    gap: 12.8px;
    align-items: flex-start;
    width: 100%;
}
.home-page .s10-generations__tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-mono);
    font-weight: 400;
    font-size: var(--fs-cap2);
    line-height: calc(var(--lh-cap2) / var(--fs-cap2));
    letter-spacing: var(--ls-cap2);
    color: var(--c-blue);
    text-transform: uppercase;
}
.home-page .s10-generations__tag-line {
    width: 20px;
    height: 1px;
    background: var(--c-blue);
    flex-shrink: 0;
}
.home-page .s10-generations__title {
    /* mobile Headline 5 (27/32) */
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-h5);
    line-height: calc(var(--lh-h5) / var(--fs-h5));
    letter-spacing: var(--ls-h5);
    color: var(--c-text);
    text-align: left;
}
.home-page .s10-generations__title--accent {
    color: var(--c-blue);
}
.home-page .s10-generations__lead {
    /* mobile Text 4 (12/19) */
    font-family: var(--ff-text);
    font-size: var(--fs-t4);
    line-height: calc(var(--lh-t4) / var(--fs-t4));
    color: var(--c-text-grey);
    max-width: 300px;
}
.home-page .s10-generations__timeline {
    /* mobile — stack 5 rows pl-28 с vertical line left-10 */
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-left: 28px;
}
.home-page .s10-generations__line {
    /* mobile vertical line 2px от 10px top до 10px bottom */
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: linear-gradient(180deg,
        rgba(0, 170, 255, 0.15) 0%,
        rgba(0, 170, 255, 0.5) 20%,
        var(--c-blue) 80%,
        rgba(0, 170, 255, 0.5) 100%);
    border-radius: 1px;
    z-index: 0;
}
.home-page .s10-generations__line--gradient {
    /* mobile progress overlay 75%-100% */
    width: 4px;
    left: 9px;
    background: linear-gradient(180deg,
        transparent 0%,
        transparent 75%,
        var(--c-blue) 75%,
        rgba(34, 211, 238, 0.6) 100%);
    filter: blur(1.5px);
    z-index: 1;
}
.home-page .s10-generations__step {
    position: relative;
    padding: 16px 0 24px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
}
.home-page .s10-generations__step:last-child {
    padding-bottom: 0;
}
.home-page .s10-generations__dot {
    /* dot 22×22 with outer ring 4px → 13r */
    position: absolute;
    left: -28px;
    top: 16px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--c-bg-card-d);
    border: 2px solid var(--c-bg-aqua-grey);
}
.home-page .s10-generations__dot-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid var(--c-bg-aqua-grey);
}
.home-page .s10-generations__dot--glow {
    background: var(--c-blue);
    border-color: var(--c-blue);
    filter: drop-shadow(0 0 10px var(--c-blue)) drop-shadow(0 0 20px rgba(0, 170, 255, 0.3));
}
.home-page .s10-generations__dot--glow .s10-generations__dot-ring {
    border-color: rgba(0, 170, 255, 0.4);
}
.home-page .s10-generations__step-year {
    font-family: var(--ff-mono);
    font-weight: 400;
    font-size: var(--fs-cap2);
    line-height: calc(var(--lh-cap2) / var(--fs-cap2));
    letter-spacing: var(--ls-cap2);
    color: var(--c-text-grey);
    text-align: left;
}
.home-page .s10-generations__step-year sup {
    font-size: 6px;
    letter-spacing: 0.6px;
    line-height: 9.9px;
    vertical-align: super;
}
.home-page .s10-generations__step-title {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: var(--fs-hc5);
    line-height: calc(var(--lh-hc5) / var(--fs-hc5));
    letter-spacing: var(--ls-hc5);
    color: var(--c-text);
    text-transform: uppercase;
    text-align: left;
}
.home-page .s10-generations__step-title--accent {
    color: var(--c-blue);
}
.home-page .s10-generations__step-sub {
    font-family: var(--ff-mono);
    font-weight: 400;
    font-size: var(--fs-cap2);
    line-height: calc(var(--lh-cap2) / var(--fs-cap2));
    letter-spacing: var(--ls-cap2);
    color: var(--c-text-grey);
    margin-top: 4px;
}
.home-page .s10-generations__step-tags {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.home-page .s10-generations__step-tags li {
    font-family: var(--ff-text);
    font-size: var(--fs-t5);
    line-height: calc(var(--lh-t5) / var(--fs-t5));
    color: var(--c-text);
}
.home-page .s10-generations__step-tags--aqua li {
    color: var(--c-aqua);
}
.home-page .s10-generations__step-badge {
    margin-top: 8px;
    align-self: flex-start;
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--c-blue);
    color: var(--c-bg-card-d);
    font-family: var(--ff-mono);
    font-weight: 700;
    font-size: var(--fs-cap2);
    line-height: calc(var(--lh-cap2) / var(--fs-cap2));
    letter-spacing: 2px;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .home-page .s10-generations {
        /* desktop 79:6072 → px 52 py 96 */
        padding: 96px 52px;
    }
    .home-page .s10-generations__inner {
        gap: 60px;
        align-items: center;
    }
    .home-page .s10-generations__head {
        /* desktop gap 16 + centered */
        gap: 16px;
        align-items: center;
        max-width: 876px;
        text-align: center;
    }
    .home-page .s10-generations__title {
        font-size: var(--fs-h3);
        line-height: calc(var(--lh-h3) / var(--fs-h3));
        letter-spacing: var(--ls-h3);
        text-align: center;
    }
    .home-page .s10-generations__lead {
        font-size: var(--fs-t3);
        line-height: calc(var(--lh-t3) / var(--fs-t3));
        max-width: none;
        text-align: center;
    }
    .home-page .s10-generations__timeline {
        /* desktop 79:6081 — 5-col grid, h-229, max-w 1200, horizontal line top-20 */
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 0;
        width: 100%;
        max-width: 1200px;
        padding: 32px 0 0 0;
    }
    .home-page .s10-generations__line {
        /* desktop — horizontal line top-20px от 5% до 95% */
        top: 20px;
        left: 5%;
        right: 5%;
        bottom: auto;
        width: auto;
        height: 2px;
        background: linear-gradient(90deg,
            rgba(0, 170, 255, 0.15) 0%,
            rgba(0, 170, 255, 0.5) 20%,
            var(--c-blue) 80%,
            rgba(0, 170, 255, 0.5) 100%);
    }
    .home-page .s10-generations__line--gradient {
        top: 19px;
        height: 4px;
        background: linear-gradient(90deg,
            transparent 0%,
            transparent 75%,
            var(--c-blue) 75%,
            rgba(34, 211, 238, 0.6) 100%);
    }
    .home-page .s10-generations__step {
        padding: 0 12px;
        align-items: center;
        text-align: center;
        gap: 4px;
    }
    .home-page .s10-generations__dot {
        position: relative;
        left: auto;
        top: auto;
        margin: 0 auto 16px;
    }
    .home-page .s10-generations__step-year,
    .home-page .s10-generations__step-title,
    .home-page .s10-generations__step-sub {
        text-align: center;
    }
    .home-page .s10-generations__step-tags {
        align-items: center;
    }
    .home-page .s10-generations__step-tags li {
        text-align: center;
    }
    .home-page .s10-generations__step-badge {
        align-self: center;
    }
}

/* ============================================================
   s11-coverage (Phase 4)
   Desktop Figma 79:6167  ·  Mobile Figma 86:2007
   6 platform-cards: DT 3×2 grid, M 1×6 stack. Card icon+title+text+chip-pills.
   ============================================================ */
.home-page .s11-coverage {
    background: var(--c-bg);
    /* mobile 86:2007 → px 20 py 64 (без border на M) */
    padding: 64px 20px;
}
.home-page .s11-coverage__inner {
    display: flex;
    flex-direction: column;
    gap: 60px;
    align-items: flex-start;
    width: 100%;
}
.home-page .s11-coverage__head {
    display: flex;
    flex-direction: column;
    gap: 12.8px;
    align-items: flex-start;
    width: 100%;
}
.home-page .s11-coverage__tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-mono);
    font-weight: 400;
    font-size: var(--fs-cap2);
    line-height: calc(var(--lh-cap2) / var(--fs-cap2));
    letter-spacing: var(--ls-cap2);
    color: var(--c-blue);
    text-transform: uppercase;
}
.home-page .s11-coverage__tag-line {
    width: 20px;
    height: 1px;
    background: var(--c-blue);
    flex-shrink: 0;
}
.home-page .s11-coverage__title {
    /* mobile Headline 5 (27/32) */
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-h5);
    line-height: calc(var(--lh-h5) / var(--fs-h5));
    letter-spacing: var(--ls-h5);
    color: var(--c-text);
}
.home-page .s11-coverage__title--accent {
    color: var(--c-blue);
}
.home-page .s11-coverage__lead {
    font-family: var(--ff-text);
    font-size: var(--fs-t4);
    line-height: calc(var(--lh-t4) / var(--fs-t4));
    color: var(--c-text-grey);
}
.home-page .s11-coverage__cards {
    /* mobile — 1-col stack */
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    width: 100%;
}
.home-page .s11-coverage__card {
    /* Figma 84:1161 — bg #1A2236 border #4C5362 r-14 px-21 py-23, gap 10
       justify-content: space-between (icon+text сверху, chips снизу) */
    position: relative;
    background: var(--c-bg-card);
    border: 1px solid var(--c-text-dark);
    border-radius: 14px;
    padding: 23px 21px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}
.home-page .s11-coverage__card-icon {
    position: relative;
    display: block;
    width: 28px;
    height: 28px;
    color: var(--c-blue);
}
.home-page .s11-coverage__v {
    position: absolute;
}
.home-page .s11-coverage__vi {
    position: absolute;
    inset: 0;
}
.home-page .s11-coverage__card-icon img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}
.home-page .s11-coverage__card-title {
    /* Headline card 4 (18/24 -1) Bold */
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: var(--fs-hc4);
    line-height: calc(var(--lh-hc4) / var(--fs-hc4));
    letter-spacing: var(--ls-hc4);
    color: var(--c-text);
    padding-top: 7px;
}
.home-page .s11-coverage__card-text {
    /* Text 4 (12/19) */
    font-family: var(--ff-text);
    font-size: var(--fs-t4);
    line-height: calc(var(--lh-t4) / var(--fs-t4));
    color: var(--c-text-grey);
    flex: 1;
}
.home-page .s11-coverage__card-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 4px;
}
.home-page .s11-coverage__card-pills li {
    padding: 4px 10px;
    background: rgba(0, 170, 255, 0.1);
    border: 1px solid rgba(0, 170, 255, 0.22);
    border-radius: var(--r-pill);
    font-family: var(--ff-mono);
    font-weight: 400;
    font-size: var(--fs-cap2);
    line-height: calc(var(--lh-cap2) / var(--fs-cap2));
    letter-spacing: var(--ls-cap2);
    color: var(--c-blue);
}

@media (min-width: 768px) {
    .home-page .s11-coverage {
        /* desktop 79:6167 → border-t/b --bd-c, px 52 py 96 */
        border-top: 1px solid var(--bd-c);
        border-bottom: 1px solid var(--bd-c);
        padding: 96px 52px;
    }
    .home-page .s11-coverage__inner {
        align-items: center;
    }
    .home-page .s11-coverage__head {
        gap: 16px;
        align-items: center;
        max-width: 800px;
        text-align: center;
    }
    .home-page .s11-coverage__title {
        font-size: var(--fs-h3);
        line-height: calc(var(--lh-h3) / var(--fs-h3));
        letter-spacing: var(--ls-h3);
        text-align: center;
    }
    .home-page .s11-coverage__lead {
        font-size: var(--fs-t3);
        line-height: calc(var(--lh-t3) / var(--fs-t3));
        text-align: center;
    }
    .home-page .s11-coverage__cards {
        /* desktop 79:6168 — 3-col grid, cards 354×277, gap 18, max-w 1100 */
        grid-template-columns: repeat(3, 354px);
        gap: 18px;
        max-width: 1100px;
        justify-content: center;
    }
    .home-page .s11-coverage__card {
        height: 277px;
    }
}
/* ============================================================
   s12-agents (Phase 3)
   Desktop nodeId: 79:6289   Mobile nodeId: 86:2123
   3 function-cards (Understanding/Decisioning/Enforcement):
   icon 28 + label + Hc1 title + text + 2 agent-pills + outcome strip.
   Top gradient bar. CTA «Book Technical Demo» с blue glow.
   ============================================================ */

.home-page .s12-agents {
    background: var(--c-bg);
    /* from Figma 86:2123 → mobile px 20 py 64 gap 48 items-center */
    padding: 64px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}
.home-page .s12-agents__head {
    /* from Figma 86:2124 → gap 12.8 items-center */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12.8px;
    width: 100%;
    text-align: center;
}
.home-page .s12-agents__tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    line-height: var(--lh-label);
    letter-spacing: var(--ls-label);
    color: var(--c-blue);
    text-transform: uppercase;
}
.home-page .s12-agents__tag-line {
    display: block;
    width: 20px;
    height: 1px;
    background: var(--c-blue);
}
.home-page .s12-agents__title {
    /* mobile = Headline 5 (27/32) — Figma 86:2129 */
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
    letter-spacing: var(--ls-h5);
    color: var(--c-text);
    margin: 0;
}
.home-page .s12-agents__title--accent { color: var(--c-blue); }

.home-page .s12-agents__lead {
    /* mobile = Text 4 (12/19) — Figma 86:2132 */
    font-family: var(--ff-text);
    font-size: var(--fs-t4);
    line-height: var(--lh-t4);
    color: var(--c-text-grey);
    margin: 0;
}

.home-page .s12-agents__cards {
    /* mobile = stack 1col w-319 — Figma 92:7000 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 319px;
}
.home-page .s12-agents__card {
    /* from Figma 85:864 → bg aqua, border aqua-grey, r-12, px-29 pt-37 pb-52, gap 10 items-start overflow-clip */
    position: relative;
    width: 100%;
    background: var(--c-bg-aqua);
    border: var(--bd-w) solid var(--bd-c-aqua);
    border-radius: var(--r-md);
    padding: 37px 29px 52px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    overflow: hidden;
}
.home-page .s12-agents__card::before {
    /* top gradient bar — Figma 85:551 → h-3 blue→aqua */
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(to right, var(--c-blue), var(--c-aqua));
    pointer-events: none;
}
.home-page .s12-agents__card-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
}
.home-page .s12-agents__card-icon img { width: 100%; height: 100%; }

.home-page .s12-agents__card-label {
    /* Label = JetBrains Mono 10/16 ls 2 uppercase — Figma 85:539 */
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    line-height: var(--lh-label);
    letter-spacing: var(--ls-label);
    color: var(--c-text-mute);
    text-transform: uppercase;
    width: 100%;
}
.home-page .s12-agents__card-title {
    /* Headline card 1 = Syne Bold 24/40 — Figma 85:541 */
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: var(--fs-hc1);
    line-height: var(--lh-hc1);
    letter-spacing: var(--ls-hc1);
    color: var(--c-blue);
    margin: 0;
    width: 100%;
}
.home-page .s12-agents__card-text {
    /* Text 4 — DM Sans 12/19 — Figma 85:543 */
    font-family: var(--ff-text);
    font-size: var(--fs-t4);
    line-height: var(--lh-t4);
    color: var(--c-text-grey);
    margin: 0;
    width: 100%;
}

.home-page .s12-agents__pills {
    /* from Figma 85:544 → gap 6 pb 8 pt 10 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 0 8px;
    width: 100%;
}
.home-page .s12-agents__pill {
    /* from Figma 85:545 → bg card, border aqua-grey, rounded 100, px 11 py 5 */
    display: inline-flex;
    background: var(--c-bg-card);
    border: var(--bd-w) solid var(--bd-c-aqua);
    border-radius: var(--r-pill);
    padding: 5px 11px;
    font-family: var(--ff-mono);
    font-size: var(--fs-cap2);
    line-height: var(--lh-cap2);
    letter-spacing: var(--ls-cap2);
    color: var(--c-text-grey);
    white-space: nowrap;
}

.home-page .s12-agents__card-outcome {
    /* from Figma 85:549 → bg aqua-d, border aqua-grey, r-6, px-13 py-9 */
    background: var(--c-bg-aqua-d);
    border: var(--bd-w) solid var(--bd-c-aqua);
    border-radius: var(--r-sm);
    padding: 9px 13px;
    font-family: var(--ff-mono);
    font-size: var(--fs-cap2);
    line-height: var(--lh-cap2);
    letter-spacing: var(--ls-cap2);
    color: var(--c-aqua);
    margin: 0;
    width: 100%;
}

.home-page .s12-agents__cta {
    /* from Figma 84:667 → bg blue, drop-shadow glow-blue, px-30 py-13, r-6 */
    background: var(--c-blue);
    color: var(--c-bg);
    border: 0;
    border-radius: var(--r-sm);
    padding: 13px 30px;
    font-family: var(--ff-text);
    font-weight: 400;
    font-size: var(--fs-btn);
    line-height: var(--lh-btn);
    cursor: pointer;
    filter: var(--glow-blue);
    transition: filter .2s ease;
}
.home-page .s12-agents__cta:hover { filter: var(--glow-blue-h); }

/* DESKTOP — H5→H3, T4→T3, cards 1col→3col */
@media (min-width: 768px) {
    .home-page .s12-agents {
        /* from Figma 79:6289 → py 96 px 52 gap 48 */
        padding: 96px 52px;
    }
    .home-page .s12-agents__head {
        /* from Figma 79:6290 → gap 16 */
        gap: 16px;
    }
    .home-page .s12-agents__title {
        /* Headline 3 = 52/54 -2 — Figma 79:6295 */
        font-size: var(--fs-h3);
        line-height: var(--lh-h3);
        letter-spacing: var(--ls-h3);
    }
    .home-page .s12-agents__lead {
        /* Text 3 = 16/22 — Figma 79:6297 */
        font-size: var(--fs-t3);
        line-height: var(--lh-t3);
    }
    .home-page .s12-agents__cards {
        /* from Figma 79:6298 → row wrap, w-1100 max-w-1100, gap 20, px-52 pt-8 */
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 1100px;
        width: 100%;
        padding: 8px 52px 0;
    }
    .home-page .s12-agents__card {
        /* w 319 fixed — Figma 85:581 */
        width: 319px;
        flex: 0 0 319px;
        height: 447px;
    }
}
/* ============================================================
   s13-usecases (Phase 3)
   Desktop nodeId: 79:6360   Mobile nodeId: 86:2195
   Mobile: 6 row × 1 col (horizontal borders, icon ← text row,
           icon 28, title Syne SemiBold 14).
   Desktop: 1 row × 6 col (vertical borders, icon на верху,
            title center, icon 40, Headline card 5).
   + DT-only Challenge / Solution / Benefit блок (3 col).
   Mobile: __csb display:none.
   ============================================================ */

.home-page .s13-usecases {
    background: var(--c-bg);
    border-top: var(--bd-w) solid rgba(255, 255, 255, 0.12);
    /* from Figma 86:2195 → mobile pb 60 pt 61 px 20 gap 60 */
    padding: 61px 20px 60px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 60px;
}
.home-page .s13-usecases__head {
    /* from Figma 86:2196 → gap 13 items-center */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    text-align: center;
}
.home-page .s13-usecases__tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-mono);
    font-size: var(--fs-label);
    line-height: var(--lh-label);
    letter-spacing: var(--ls-label);
    color: var(--c-blue);
    text-transform: uppercase;
}
.home-page .s13-usecases__tag-line {
    display: block;
    width: 20px;
    height: 1px;
    background: var(--c-blue);
}
.home-page .s13-usecases__title {
    /* mobile = Headline 5 (27/32) — Figma 86:2201 */
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-h5);
    line-height: var(--lh-h5);
    letter-spacing: var(--ls-h5);
    color: var(--c-text);
    margin: 0;
}
.home-page .s13-usecases__title--accent { color: var(--c-blue); }

.home-page .s13-usecases__lead {
    /* mobile = Text 4 (12/19) — Figma 86:2203 */
    font-family: var(--ff-text);
    font-size: var(--fs-t4);
    line-height: var(--lh-t4);
    color: var(--c-text-grey);
    margin: 0;
}

/* USE CASES — mobile: stack rows, desktop: 6-col grid */
.home-page .s13-usecases__cards {
    /* from Figma 86:2204 → border #1a2236, r-14, mobile = 6 stacked rows */
    display: flex;
    flex-direction: column;
    border: var(--bd-w) solid var(--bd-c);
    border-radius: 14px;
    overflow: hidden;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}
.home-page .s13-usecases__card {
    /* mobile row — Figma 86:2205 → bg card-d, border-b, gap 14 items-center, pb 19 pt 18 px 20 */
    background: var(--c-bg-card-d);
    border-bottom: var(--bd-w) solid var(--bd-c);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px 19px;
    position: relative;
}
.home-page .s13-usecases__card:last-child { border-bottom: 0; }

.home-page .s13-usecases__card-icon {
    /* mobile icon 28×28 — Figma 86:2206 */
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
}
.home-page .s13-usecases__card-icon img { width: 100%; height: 100%; }

.home-page .s13-usecases__card-title {
    /* mobile = Syne SemiBold 14/19.6 — Figma 86:2212 */
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 14px;
    line-height: 19.6px;
    color: var(--c-text);
    margin: 0;
}

/* CSB (Challenge/Solution/Benefit) — DT-only */
.home-page .s13-usecases__csb { display: none; }

/* DESKTOP — H5→H3, T4→T3, cards 1col→6col, icon 28→40, CSB visible */
@media (min-width: 768px) {
    .home-page .s13-usecases {
        /* from Figma 79:6360 → pt 97 pb 96 px 52 items-center */
        padding: 97px 52px 96px;
        align-items: center;
        gap: 0;
    }
    .home-page .s13-usecases__head {
        /* from Figma 79:6361 → gap 16 pb 60 */
        gap: 16px;
        padding-bottom: 60px;
    }
    .home-page .s13-usecases__title {
        /* Headline 3 = 52/54 -2 — Figma 79:6366 */
        font-size: var(--fs-h3);
        line-height: var(--lh-h3);
        letter-spacing: var(--ls-h3);
    }
    .home-page .s13-usecases__lead {
        /* Text 3 = 16/22 — Figma 79:6368 */
        font-size: var(--fs-t3);
        line-height: var(--lh-t3);
    }

    /* USE CASES grid 6 col */
    .home-page .s13-usecases__cards {
        /* from Figma 79:6369 → h 189, 6 col, border-radius top-only (bottom = csb) */
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        max-width: 1200px;
        width: 1200px;
        border-radius: 14px 14px 0 0;
        border-bottom: 0;
    }
    .home-page .s13-usecases__card {
        /* from Figma 79:6379 → vertical borders, items-center text-center, gap 14, pb 28 pl 20 pr 21 pt 32 */
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
        padding: 32px 21px 28px 20px;
        border-bottom: 0;
        border-right: var(--bd-w) solid var(--bd-c);
        min-height: 186px;
    }
    .home-page .s13-usecases__card:last-child { border-right: 0; }
    .home-page .s13-usecases__card--active {
        /* from Figma 79:6370 → bg #091624 + inner shadow + gradient bar bottom */
        background: var(--c-bg-aqua);
        box-shadow: inset 0 0 32px 0 rgba(0, 170, 255, 0.08);
    }
    .home-page .s13-usecases__card--active::after {
        /* from Figma 79:6378 → bottom gradient bar h-3 blue→aqua */
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: linear-gradient(to right, var(--c-blue), var(--c-aqua));
        pointer-events: none;
    }
    .home-page .s13-usecases__card-icon {
        /* desktop = 40×40 — Figma 79:6376 */
        width: 40px;
        height: 40px;
    }
    .home-page .s13-usecases__card-title {
        /* Headline card 5 = Syne Bold 13/18 ls 2 — Figma 79:6377 (ls 0.26 = 2px) */
        font-family: var(--ff-display);
        font-weight: 700;
        font-size: var(--fs-hc5);
        line-height: var(--lh-hc5);
        letter-spacing: var(--ls-hc5);
    }

    /* CSB block visible on desktop */
    .home-page .s13-usecases__csb {
        /* from Figma 79:6426 → h 230, w 1200, bg aqua, border #1a2236, r-b-14 */
        display: grid;
        grid-template-columns: 399px 400px 1fr;
        max-width: 1200px;
        width: 1200px;
        background: var(--c-bg-aqua);
        border: var(--bd-w) solid var(--bd-c);
        border-top: 0;
        border-radius: 0 0 14px 14px;
        overflow: hidden;
    }
    .home-page .s13-usecases__csb-col {
        /* from Figma 79:6428 → gap 12.8, pl 28 pr 29 py 31, border-r */
        display: flex;
        flex-direction: column;
        gap: 12.8px;
        padding: 31px 29px 31px 28px;
        border-right: var(--bd-w) solid var(--bd-c);
    }
    .home-page .s13-usecases__csb-col:last-child { border-right: 0; }
    .home-page .s13-usecases__csb-label {
        /* Headline card 2 = Syne ExtraBold 18/21 ls 2 uppercase — Figma 79:6430 */
        font-family: var(--ff-display);
        font-weight: 800;
        font-size: var(--fs-hc2);
        line-height: var(--lh-hc2);
        letter-spacing: var(--ls-hc2);
        text-transform: uppercase;
        margin: 0;
    }
    .home-page .s13-usecases__csb-label--red   { color: var(--c-red); }
    .home-page .s13-usecases__csb-label--blue  { color: var(--c-blue); }
    .home-page .s13-usecases__csb-label--green { color: var(--c-green); }
    .home-page .s13-usecases__csb-text {
        /* Text 4 — DM Sans 12/19 — Figma 79:6432 */
        font-family: var(--ff-text);
        font-size: var(--fs-t4);
        line-height: var(--lh-t4);
        color: var(--c-text-grey);
        margin: 0;
    }
}


/* ============================================================
   s14-quote-2 (Phase 1, audit 1.5)
   Desktop nodeId: 79:6443   (DT only)
   ============================================================ */

.home-page .s14-quote-2 {
    background: var(--c-bg-card-d);
    border-top: var(--bd-w) solid var(--bd-c);
    border-bottom: var(--bd-w) solid var(--bd-c);
    /* from Figma 79:6443 → pt/pb 97, px 477 (1920w) */
    padding: 97px 0;
}
.home-page .s14-quote-2__inner {
    display: flex;
    justify-content: center;
    padding-inline: 20px;
}
.home-page .s14-quote-2__text {
    font-family: var(--ff-display);
    font-weight: 500;
    /* Headline 4 — Figma var (34/40, -1) */
    font-size: var(--fs-h4);
    line-height: calc(var(--lh-h4) / var(--fs-h4));
    letter-spacing: var(--ls-h4);
    color: var(--c-text-grey);
    text-align: center;
    /* in Figma 79:6445 — whitespace-nowrap, без max-width;
       для resilience задаём mw чуть больше длинной строки */
    max-width: 1000px;
}
.home-page .s14-quote-2__accent {
    color: var(--c-text);
    font-weight: 500;
}

@media (max-width: 767.98px) {
    .home-page .s14-quote-2 { display: none; }
}


/* ============================================================
   s15-outcomes (Phase 5)
   Desktop Figma 79:6447  ·  Mobile Figma 86:2267
   DT split 2-col (560 + 80 gap + 560) — left: tag/title/lead + 3 stat-cards
   + quote (border-l); right: 4 outcome-items col. CTA centered. M — stack 1col.
   ============================================================ */
.home-page .s15-outcomes {
    background: var(--c-bg);
    /* mobile 86:2267 → px 20 py 64 */
    padding: 64px 20px;
}
.home-page .s15-outcomes__inner {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: stretch;
    width: 100%;
}
.home-page .s15-outcomes__main {
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.home-page .s15-outcomes__lead-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.home-page .s15-outcomes__tag {
    /* tag-2 (188×16) — mono cap2 ls 2 blue + dash 20×1 */
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-mono);
    font-weight: 400;
    font-size: var(--fs-cap2);
    line-height: calc(var(--lh-cap2) / var(--fs-cap2));
    letter-spacing: var(--ls-label);
    color: var(--c-blue);
    text-transform: uppercase;
}
.home-page .s15-outcomes__tag-line {
    width: 20px;
    height: 1px;
    background: var(--c-blue);
    flex-shrink: 0;
}
.home-page .s15-outcomes__title {
    /* mobile H4 (34/40 -1) centered, 2 lines */
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-h4);
    line-height: calc(var(--lh-h4) / var(--fs-h4));
    letter-spacing: var(--ls-h4);
    color: var(--c-text);
    text-align: center;
}
.home-page .s15-outcomes__title--accent {
    color: var(--c-blue);
}
.home-page .s15-outcomes__lead {
    /* mobile T4 (12/19) grey centered */
    font-family: var(--ff-text);
    font-size: var(--fs-t4);
    line-height: calc(var(--lh-t4) / var(--fs-t4));
    color: var(--c-text-grey);
    text-align: center;
}
.home-page .s15-outcomes__stats {
    /* mobile — stack 1 col */
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.home-page .s15-outcomes__stat {
    /* Figma 79:6458 — 176×191 (DT). card: bg --c-bg-aqua border --c-bg-aqua-grey r-12 */
    background: var(--c-bg-aqua);
    border: 1px solid var(--c-bg-aqua-grey);
    border-radius: var(--r-md);
    padding: 21px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.home-page .s15-outcomes__stat-value {
    /* H4 (34/40 -1) blue */
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-h4);
    line-height: calc(var(--lh-h4) / var(--fs-h4));
    letter-spacing: var(--ls-h4);
    color: var(--c-blue);
}
.home-page .s15-outcomes__stat-text {
    /* T4 (12/19) white */
    font-family: var(--ff-text);
    font-size: var(--fs-t4);
    line-height: calc(var(--lh-t4) / var(--fs-t4));
    color: var(--c-text);
}
.home-page .s15-outcomes__stat-attr {
    /* mono caption-2 (10/16 +1) grey */
    font-family: var(--ff-mono);
    font-weight: 400;
    font-size: var(--fs-cap2);
    line-height: calc(var(--lh-cap2) / var(--fs-cap2));
    letter-spacing: var(--ls-cap2);
    color: var(--c-text-mute);
    margin-top: auto;
}
.home-page .s15-outcomes__quote {
    /* Figma 79:6479 — vertical border-left blue, 31px padding-l, w-560 */
    margin: 0;
    border-left: 3px solid var(--c-blue);
    background: var(--c-bg-aqua);
    padding: 28px 31px;
    border-radius: 0 var(--r-md) var(--r-md) 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.home-page .s15-outcomes__quote-text {
    /* Hc4 (18/24 -1 Bold) — кажется italic в Figma */
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: var(--fs-hc4);
    line-height: calc(var(--lh-hc4) / var(--fs-hc4));
    letter-spacing: var(--ls-hc4);
    color: var(--c-text);
    font-style: italic;
}
.home-page .s15-outcomes__quote-attr {
    /* caption-2 grey */
    font-family: var(--ff-mono);
    font-weight: 400;
    font-size: var(--fs-cap2);
    line-height: calc(var(--lh-cap2) / var(--fs-cap2));
    letter-spacing: var(--ls-cap2);
    color: var(--c-text-mute);
}
.home-page .s15-outcomes__list {
    /* 4 items col. mobile — stack */
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.home-page .s15-outcomes__item {
    /* Figma 79:6485 — Item 560×111 (DT). bg --c-bg-card-d border --c-bg-aqua-grey r-12 */
    background: var(--c-bg-card-d);
    border: 1px solid var(--c-bg-aqua-grey);
    border-radius: var(--r-md);
    padding: 23px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.home-page .s15-outcomes__item-value {
    /* Figma 79:6487 — container 70×24. Hc1 24/40 Bold blue */
    width: 70px;
    flex-shrink: 0;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: var(--fs-hc1);
    line-height: 24px;
    color: var(--c-blue);
}
.home-page .s15-outcomes__item-body {
    display: flex;
    flex-direction: column;
    gap: 6.4px;
    flex: 1;
}
.home-page .s15-outcomes__item-title {
    /* T3 (16/22) Bold white */
    font-family: var(--ff-text);
    font-weight: 700;
    font-size: var(--fs-t3);
    line-height: calc(var(--lh-t3) / var(--fs-t3));
    color: var(--c-text);
}
.home-page .s15-outcomes__item-text {
    /* T4 (12/19) grey */
    font-family: var(--ff-text);
    font-size: var(--fs-t4);
    line-height: calc(var(--lh-t4) / var(--fs-t4));
    color: var(--c-text-grey);
}
.home-page .s15-outcomes__cta {
    /* Figma 84:670 Button-2 — bg blue, padding 13/30, r-6, glow-blue */
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 30px;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--c-blue);
    color: var(--c-bg);
    font-family: var(--ff-text);
    font-weight: 400;
    font-size: var(--fs-btn);
    line-height: calc(var(--lh-btn) / var(--fs-btn));
    cursor: pointer;
    filter: var(--glow-blue);
    transition: filter .2s ease, transform .2s ease;
}
.home-page .s15-outcomes__cta:hover {
    transform: translateY(-1px);
    filter: var(--glow-blue-h);
}

@media (min-width: 768px) {
    .home-page .s15-outcomes {
        /* desktop 79:6447 → outer container 1200 → px ≈ (1920-1200)/2 = 360, py 96 */
        padding: 96px clamp(52px, calc(52px + (100vw - 768px) * 0.267), 360px);
    }
    .home-page .s15-outcomes__inner {
        gap: 48px;
        max-width: 1200px;
        margin: 0 auto;
        align-items: center;
    }
    .home-page .s15-outcomes__main {
        /* DT split 2-col, 560 + 80 gap + 560 = 1200 */
        flex-direction: row;
        align-items: flex-start;
        gap: 80px;
        width: 100%;
    }
    .home-page .s15-outcomes__lead-col {
        flex: 0 0 560px;
        gap: 0;
    }
    .home-page .s15-outcomes__tag {
        align-self: flex-start;
    }
    .home-page .s15-outcomes__title {
        /* desktop H3 (52/54 -2), text-align left */
        font-size: var(--fs-h3);
        line-height: calc(var(--lh-h3) / var(--fs-h3));
        letter-spacing: var(--ls-h3);
        text-align: left;
        margin-top: 13px;
    }
    .home-page .s15-outcomes__lead {
        /* desktop T3 (16/22) left */
        font-size: var(--fs-t3);
        line-height: calc(var(--lh-t3) / var(--fs-t3));
        text-align: left;
        margin-top: 14px;
    }
    .home-page .s15-outcomes__stats {
        /* DT row of 3 cards 176×191 gap 16 */
        flex-direction: row;
        gap: 16px;
        margin-top: 14px;
    }
    .home-page .s15-outcomes__stat {
        flex: 1;
        width: 176px;
        min-height: 191px;
    }
    .home-page .s15-outcomes__quote {
        /* desktop w-560, mt 14px от stats */
        margin-top: 14px;
    }
    .home-page .s15-outcomes__list {
        flex: 0 0 560px;
        /* DT — 4 items col, gap 16, total 4*111 + 3*16 = 492 (≈ 491 figma h) */
        gap: 16px;
        margin-top: 10px;
    }
    .home-page .s15-outcomes__item {
        min-height: 111px;
    }
}

/* ============================================================
   s16-ciso-strip (Phase 5)
   Desktop Figma 79:6515  ·  Mobile Figma 86:2339
   Header centered + 4 KPI strip (260×115 row) + 3 testimonial cards (353×240).
   KPI values colored: 73%/90% blue, 4→1 orange, <1s aqua.
   Aqua-pill ↑ outcome — overlay внизу карточки.
   ============================================================ */
.home-page .s16-ciso-strip {
    background: var(--c-bg);
    /* mobile 86:2339 → px 20 py 64 */
    padding: 64px 20px;
}
.home-page .s16-ciso-strip__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}
.home-page .s16-ciso-strip__head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    width: 100%;
}
.home-page .s16-ciso-strip__tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-mono);
    font-weight: 400;
    font-size: var(--fs-cap2);
    line-height: calc(var(--lh-cap2) / var(--fs-cap2));
    letter-spacing: var(--ls-label);
    color: var(--c-blue);
    text-transform: uppercase;
}
.home-page .s16-ciso-strip__tag-line {
    width: 20px;
    height: 1px;
    background: var(--c-blue);
    flex-shrink: 0;
}
.home-page .s16-ciso-strip__title {
    /* mobile H4 (34/40 -1) centered, 2 lines */
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-h4);
    line-height: calc(var(--lh-h4) / var(--fs-h4));
    letter-spacing: var(--ls-h4);
    color: var(--c-text);
    text-align: center;
}
.home-page .s16-ciso-strip__title--accent {
    color: var(--c-blue);
}
.home-page .s16-ciso-strip__kpis {
    /* mobile 2×2 grid */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
}
.home-page .s16-ciso-strip__kpi {
    /* Figma 79:6525 — 260×115 (DT). card bg --c-bg-card border --c-bg-aqua-grey r-12 */
    background: var(--c-bg-card);
    border: 1px solid var(--c-bg-aqua-grey);
    border-radius: var(--r-md);
    padding: 19px 17px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.home-page .s16-ciso-strip__kpi-value {
    /* H4 (34/40 -1) — colored by modifier */
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-h4);
    line-height: 40px;
    letter-spacing: var(--ls-h4);
}
.home-page .s16-ciso-strip__kpi-value--blue   { color: var(--c-blue); }
.home-page .s16-ciso-strip__kpi-value--orange { color: var(--c-orange); }
.home-page .s16-ciso-strip__kpi-value--aqua   { color: var(--c-aqua); }
.home-page .s16-ciso-strip__kpi-label {
    /* JetBrains Mono Label 10/16 ls 2 white uppercase */
    font-family: var(--ff-mono);
    font-weight: 400;
    font-size: var(--fs-label);
    line-height: calc(var(--lh-label) / var(--fs-label));
    letter-spacing: var(--ls-label);
    color: var(--c-text);
    text-transform: uppercase;
}
.home-page .s16-ciso-strip__kpi-attr {
    /* T5 (10/14) grey */
    font-family: var(--ff-text);
    font-size: var(--fs-t5);
    line-height: calc(var(--lh-t5) / var(--fs-t5));
    color: var(--c-text-mute);
    margin-top: 1px;
}
.home-page .s16-ciso-strip__cards {
    /* mobile stack 1×3 */
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}
.home-page .s16-ciso-strip__card {
    /* Figma 79:6554 — 353×240 (DT). bg --c-bg-card-d border --c-bg-aqua-grey r-12 */
    background: var(--c-bg-card-d);
    border: 1px solid var(--c-bg-aqua-grey);
    border-radius: var(--r-md);
    padding: 33px 31px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.home-page .s16-ciso-strip__card-quote {
    /* Hc4 (18/24 -1) — main quote text */
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: var(--fs-hc4);
    line-height: calc(var(--lh-hc4) / var(--fs-hc4));
    letter-spacing: var(--ls-hc4);
    color: var(--c-text);
    flex: 1;
}
.home-page .s16-ciso-strip__card-attr {
    /* caption-2 grey */
    font-family: var(--ff-mono);
    font-weight: 400;
    font-size: var(--fs-cap2);
    line-height: calc(var(--lh-cap2) / var(--fs-cap2));
    letter-spacing: var(--ls-cap2);
    color: var(--c-text-mute);
}
.home-page .s16-ciso-strip__card-pill {
    /* Aqua pill — bg --c-bg-aqua-d border --c-bg-aqua-grey, mono cap2 aqua */
    align-self: center;
    display: inline-block;
    padding: 4px 12px;
    background: var(--c-bg-aqua-d);
    border: 1px solid var(--c-bg-aqua-grey);
    border-radius: var(--r-pill);
    font-family: var(--ff-mono);
    font-weight: 400;
    font-size: var(--fs-cap2);
    line-height: calc(var(--lh-cap2) / var(--fs-cap2));
    letter-spacing: var(--ls-cap2);
    color: var(--c-aqua);
    text-align: center;
}

@media (min-width: 768px) {
    .home-page .s16-ciso-strip {
        /* desktop 79:6515 → outer container 1100 → px ≈ (1920-1100)/2 = 410, py 97 */
        padding: 97px clamp(52px, calc(52px + (100vw - 768px) * 0.311), 410px);
    }
    .home-page .s16-ciso-strip__inner {
        gap: 48px;
    }
    .home-page .s16-ciso-strip__head {
        gap: 30px;
    }
    .home-page .s16-ciso-strip__title {
        /* desktop H3 (52/54 -2) centered */
        font-size: var(--fs-h3);
        line-height: calc(var(--lh-h3) / var(--fs-h3));
        letter-spacing: var(--ls-h3);
    }
    .home-page .s16-ciso-strip__kpis {
        /* DT 4-col strip, 260×115 gap 20, total = 4*260 + 3*20 = 1100 */
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    .home-page .s16-ciso-strip__kpi {
        min-height: 115px;
    }
    .home-page .s16-ciso-strip__cards {
        /* DT 3-col row */
        flex-direction: row;
        gap: 20px;
    }
    .home-page .s16-ciso-strip__card {
        flex: 1;
        min-height: 240px;
    }
}


/* ============================================================
   s17-conversion (Phase 1, audit 1.5)
   Desktop nodeId: 79:6575   Mobile nodeId: 86:2400
   ============================================================ */

.home-page .s17-conversion {
    /* radial blue glow background — from Figma 79:6575 inline svg bg */
    background:
        radial-gradient(ellipse 60% 50% at 50% 50%,
            rgba(0, 80, 140, 0.15) 0%,
            rgba(0, 80, 140, 0) 70%),
        var(--c-bg);
    /* mobile: from Figma 86:2400 → py 64 px 20, gap 32 */
    padding: 64px 20px;
}
.home-page .s17-conversion__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* from Figma 86:2400 → gap 32 между секциями-блоками */
    gap: 32px;
}

/* header (tag + title + lead) — 97:7809 wrapper */
.home-page .s17-conversion__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* from Figma 97:7809 → gap 14 */
    gap: 14px;
}

.home-page .s17-conversion__tag {
    display: inline-flex;
    align-items: center;
    /* from Figma 84:229 / 95:7786 → gap 10 */
    gap: 10px;
    font-family: var(--ff-mono);
    /* Label preset 10/16 +2px uppercase */
    font-size: var(--fs-label);
    line-height: calc(var(--lh-label) / var(--fs-label));
    letter-spacing: var(--ls-label);
    color: var(--c-blue);
    text-transform: uppercase;
}
.home-page .s17-conversion__tag-line {
    /* from Figma I84:229;84:192 → 20×1 */
    width: 20px;
    height: 1px;
    background: var(--c-blue);
}

.home-page .s17-conversion__title {
    font-family: var(--ff-display);
    font-weight: 500;
    /* Mobile: Headline 4 (Figma 86:2405 — 34/40 -1). Desktop переключаем на H2 ниже. */
    font-size: var(--fs-h4);
    line-height: calc(var(--lh-h4) / var(--fs-h4));
    letter-spacing: var(--ls-h4);
    color: var(--c-text);
    text-align: center;
}
.home-page .s17-conversion__title--accent {
    color: var(--c-blue);
}

.home-page .s17-conversion__lead {
    font-family: var(--ff-text);
    /* Text 2 — Figma var (18/26) */
    font-size: var(--fs-t2);
    line-height: calc(var(--lh-t2) / var(--fs-t2));
    color: var(--c-text-grey);
    text-align: center;
}

/* чекмарки — mobile 86:2409 stack col, gap 16 */
.home-page .s17-conversion__checks {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* from Figma 86:2409 → gap 16 vertical (mobile) */
    gap: 16px;
}
.home-page .s17-conversion__check {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* mobile: icon сверху, текст снизу (Figma 97:7790 — col, без gap-row,
       icon h26 pb 8.39 pt 2, текст ниже) */
}
.home-page .s17-conversion__check-icon {
    /* from Figma 97:7792 → 16×16 */
    width: 16px;
    height: 16px;
    /* SVG check.svg использует var(--stroke-0, #22D3EE) — задаём явно */
    --stroke-0: var(--c-aqua);
    margin-bottom: 0;
}
.home-page .s17-conversion__check-text {
    font-family: var(--ff-text);
    /* Text 4 — Figma var (12/19) */
    font-size: var(--fs-t4);
    line-height: calc(var(--lh-t4) / var(--fs-t4));
    color: var(--c-text-grey);
    text-align: center;
}

/* CTA-кнопки — mobile 86:2428 col gap 10 */
.home-page .s17-conversion__ctas {
    display: flex;
    flex-direction: column;
    /* from Figma 86:2428 → gap 10.01 */
    gap: 10px;
    width: 100%;
}
.home-page .s17-conversion__cta {
    appearance: none;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* from Figma 84:692 / 84:693 → gap 8 (icon+text) */
    gap: 8px;
    /* from Figma 86:2428 children h 58, px 37, pt 15 pb 16.39 */
    height: 58px;
    padding: 0 37px;
    border-radius: var(--r-sm);
    font-family: var(--ff-text);
    /* Text 3 — Figma var (16/22) */
    font-size: var(--fs-t3);
    line-height: calc(var(--lh-t3) / var(--fs-t3));
    text-align: center;
    transition: filter .2s ease, background .2s ease;
    width: 100%;
}
.home-page .s17-conversion__cta--outline {
    background: transparent;
    border: var(--bd-w) solid var(--bd-c-aqua);
    color: var(--c-blue);
}
.home-page .s17-conversion__cta--outline:hover {
    background: rgba(0, 170, 255, 0.06);
}
.home-page .s17-conversion__cta--primary {
    background: var(--c-blue);
    color: var(--c-bg-card-d);
    font-weight: 500;
    filter: var(--glow-blue);
}
.home-page .s17-conversion__cta--primary:hover {
    filter: var(--glow-blue-h);
}
.home-page .s17-conversion__cta-icon {
    width: 16px;
    height: 16px;
    /* lock.svg использует var(--stroke-0, #0A0E1A) — оставляем дефолт (тёмный на blue) */
}

/* RSA-инфо — mobile 97:7833 wrap, gap 14 (по факту строки текста) */
.home-page .s17-conversion__rsa-wrap {
    display: flex;
    flex-direction: column;
    /* from Figma 97:7833 → gap 14 */
    gap: 14px;
    width: 100%;
}
.home-page .s17-conversion__rsa {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    /* from Figma 97:7819 → gap 8 (dot+text) */
    gap: 8px;
    font-family: var(--ff-mono);
    /* Caption 2 (10/16 +1px) */
    font-size: var(--fs-cap2);
    line-height: calc(var(--lh-cap2) / var(--fs-cap2));
    letter-spacing: var(--ls-cap2);
    color: var(--c-text-grey);
    text-align: center;
}
.home-page .s17-conversion__rsa-dot {
    /* from Figma 97:7820 → 8×8 r 4 */
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: var(--c-aqua);
    flex-shrink: 0;
}
.home-page .s17-conversion__rsa-sub {
    font-family: var(--ff-mono);
    font-size: var(--fs-cap2);
    line-height: calc(var(--lh-cap2) / var(--fs-cap2));
    letter-spacing: var(--ls-cap2);
    color: var(--c-text-mute);
    text-align: center;
}

/* footline (border-top divider) — mobile 97:7832 wrap */
.home-page .s17-conversion__footline {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* from Figma 97:7832 → gap 14 */
    gap: 14px;
    width: 100%;
    /* На desktop добавится border-top + pt/pb из 79:6616 (mobile в Figma без рамки) */
}
.home-page .s17-conversion__footline-label {
    font-family: var(--ff-mono);
    font-size: var(--fs-cap2);
    line-height: calc(var(--lh-cap2) / var(--fs-cap2));
    letter-spacing: var(--ls-cap2);
    color: var(--c-text-mute);
    text-align: center;
}
.home-page .s17-conversion__footline-accent {
    font-family: var(--ff-text);
    /* Text 3 — Figma var (16/22) */
    font-size: var(--fs-t3);
    line-height: calc(var(--lh-t3) / var(--fs-t3));
    color: var(--c-blue);
    text-align: center;
}

@media (min-width: 768px) {
    .home-page .s17-conversion {
        /* from Figma 79:6575 → py 96 px 52, gap 13.2 (header-блоки идут row gap по факту) */
        padding: 96px 52px;
    }
    .home-page .s17-conversion__inner {
        /* desktop: контент идёт более компактно, gap-row 13.2 */
        gap: 13.2px;
    }
    .home-page .s17-conversion__title {
        /* Desktop: Headline 2 (Figma 79:6580 — 64/67 -2) */
        font-size: var(--fs-h2);
        line-height: calc(var(--lh-h2) / var(--fs-h2));
        letter-spacing: var(--ls-h2);
        /* from Figma 79:6580 → w 1065 */
        max-width: 1065px;
    }
    .home-page .s17-conversion__lead {
        /* from Figma 79:6581 → w 782 */
        max-width: 782px;
    }
    .home-page .s17-conversion__checks {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        /* from Figma 79:6582 → gap-x 32, pt 34.8 */
        gap: 0 32px;
        padding-top: 34.8px;
        width: 100%;
    }
    .home-page .s17-conversion__check {
        /* desktop: icon+text row (Figma 79:6583 → row, gap 8, h 26) */
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    .home-page .s17-conversion__ctas {
        flex-direction: row;
        justify-content: center;
        /* from Figma 79:6601 → gap 14.01, pt 18.8 */
        gap: 14.01px;
        padding-top: 18.8px;
        width: auto;
    }
    .home-page .s17-conversion__cta {
        width: auto;
    }
    .home-page .s17-conversion__cta--primary {
        /* from Figma 84:692 → w 284.52 (округлим до 285) */
        width: 285px;
    }
    .home-page .s17-conversion__rsa-wrap {
        gap: 0;
    }
    .home-page .s17-conversion__rsa {
        /* from Figma 79:6609 → h 30 pt 14.3, gap 8 row */
        padding-top: 14.3px;
        flex-wrap: nowrap;
    }
    .home-page .s17-conversion__rsa-sub {
        /* from Figma 79:6614 → h 43 pb 22.8 pt 4.44 */
        padding-top: 4.44px;
        padding-bottom: 22.8px;
    }
    .home-page .s17-conversion__footline {
        /* from Figma 79:6616 → border-t, pt 17 pb 16, gap-x 16, wrap */
        border-top: var(--bd-w) solid var(--bd-c-aqua);
        padding: 17px 0 16px;
        flex-direction: row;
        justify-content: center;
        gap: 16px;
        flex-wrap: wrap;
    }
}


/* ============================================================
   s18-final-cta (Phase 1, audit 1.5)
   Desktop nodeId: 79:6621   Mobile nodeId: 86:1162
   ============================================================ */

.home-page .s18-final-cta {
    background: var(--c-bg);
    /* Mobile (86:1162): сама секция-card — full-width, нет outer padding.
       Desktop (79:6621): outer wrapper pb 96, card max-w 900 центрирован. */
}

.home-page .s18-final-cta__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(180deg, #000000 0%, #002060 100%);
    /* Mobile: from Figma 86:1162 → pt 79.39 pb 80 px 52, gap 32, r 12, full-width */
    padding: 79.39px 52px 80px;
    gap: 32px;
    border-radius: var(--r-md);
}

/* Heading block внутри card (97:7838) — col gap 16 */
.home-page .s18-final-cta__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* from Figma 97:7838 → gap 16 */
    gap: 16px;
    width: 100%;
    text-align: center;
}

.home-page .s18-final-cta__title {
    font-family: var(--ff-display);
    font-weight: 500;
    /* Headline 4 — Figma var (34/40 -1) — одинаково для m и d */
    font-size: var(--fs-h4);
    line-height: calc(var(--lh-h4) / var(--fs-h4));
    letter-spacing: var(--ls-h4);
    color: var(--c-text);
}

.home-page .s18-final-cta__lead {
    font-family: var(--ff-text);
    /* Text 3 — Figma var (16/22) */
    font-size: var(--fs-t3);
    line-height: calc(var(--lh-t3) / var(--fs-t3));
    color: var(--c-text-grey-2);
}

.home-page .s18-final-cta__cta {
    appearance: none;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* from Figma 97:7839 / 84:673 → px 30 py 13 */
    padding: 13px 30px;
    border-radius: var(--r-sm);
    background: var(--c-blue);
    color: var(--c-bg-card-d);
    font-family: var(--ff-text);
    /* Text 3 — Figma var (16/22) */
    font-size: var(--fs-t3);
    line-height: calc(var(--lh-t3) / var(--fs-t3));
    filter: var(--glow-blue);
    transition: filter .2s ease;
}
.home-page .s18-final-cta__cta:hover {
    filter: var(--glow-blue-h);
}

@media (min-width: 768px) {
    .home-page .s18-final-cta {
        /* from Figma 79:6621 → pb 96, контент centered, выше card обернут pad 0 */
        padding: 0 20px 96px;
    }
    .home-page .s18-final-cta__card {
        /* from Figma 79:6622 → max-w 900, w 900, h 348, py 80 px 52, gap 12 */
        max-width: 900px;
        margin: 0 auto;
        padding: 80px 52px;
        gap: 12px;
    }
    .home-page .s18-final-cta__heading {
        /* on desktop heading uses tighter gap — Figma 79:6623 no gap, 79:6624 single line title */
        gap: 0;
    }
    .home-page .s18-final-cta__lead {
        /* from Figma 79:6625 → w 520 */
        max-width: 520px;
    }
}