/* ============================================================
   email.css — стили страницы Email Solution, scoped под .home-page
   (как для homepage / solutions). Все размеры — из Figma MCP,
   с комментарием nodeId или variable name.

   Figma source: 141:12501 (DT 1920×7920) / 141:14994 (M 390×14266)
   ============================================================ */


/* ============================================================
   email01-hero — Hero «Autonomous Email Data Protection»
   DT  141:14042 (02-Hero, 1920×1200)
   M   141:14999 (390×1796)
   Variables: Headline 1 (Syne 500 96/92 -3), Headline 4 (34/40 -1),
              Headline card 4 (Syne 700 18/24 -1), Caption 1/2 (Mono 12/16 ls 1),
              Label (Mono 10/16 ls 2), Text 4 (DM Sans 12/19),
              Red theme: Red/Red #FF6060, Red/Medium Red #9B362E, Red/Brown Red #271A27.
   ============================================================ */

.home-page .email01-hero {
    background: var(--c-bg);
    /* DT 1920×1200: content at y=256, h=747 → pad-block 256/197. */
    padding-block: 256px 197px;
    padding-inline: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.home-page .email01-hero__inner {
    width: 100%;
    max-width: 1816px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Figma — head 244h + content gap to split content 32 = ~276 */
    gap: 32px;
}

/* ──────── HERO titles ──────── */

.home-page .email01-hero__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

/* tag-3 «WORLD'S PIONEERING AUTONOMOUS PLATFORM» — red pill */
.home-page .email01-hero__tag-3 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 26px;
    padding: 0 14px;
    background: var(--c-red-brown);
    border: var(--bd-w) solid var(--c-red-d);
    border-radius: var(--r-pill);
    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;
}

.home-page .email01-hero__tag-3-dot {
    width: 6px;
    height: 6px;
    background: var(--c-red);
    border-radius: 50%;
}

/* tag-2 «- SOLUTION SHEET — 01 OF 02» — red dash + label */
.home-page .email01-hero__tag-2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    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;
}

.home-page .email01-hero__tag-2-line {
    width: 20px;
    height: 1px;
    background: var(--c-red);
}

/* H1 «Autonomous Email Data Protection» — Gradient Pink/Red + white */
.home-page .email01-hero__title {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--fs-h1);
    line-height: calc(var(--lh-h1) / var(--fs-h1));
    letter-spacing: var(--ls-h1);
    margin: 0;
    max-width: 1280px;
}

.home-page .email01-hero__title-line {
    display: block;
}

.home-page .email01-hero__title-line--white {
    color: var(--c-text);
}

.home-page .email01-hero__title-line--grad {
    /* Pink/red gradient — снято со screenshot */
    background: linear-gradient(90deg, #A78BFA 0%, #FB7185 50%, #FF6060 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ──────── Split content: LEFT (quote+stats) / RIGHT (rings+services) ──────── */

.home-page .email01-hero__split {
    display: flex;
    flex-direction: row;
    gap: 96px;
    align-items: flex-start;
    width: 100%;
    max-width: 1252px;
}

.home-page .email01-hero__left {
    flex: 0 0 568px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.home-page .email01-hero__left-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-red);
    text-transform: uppercase;
    margin: 0;
    max-width: 532px;
}

/* Quote-card: dark navy + red border-left */
.home-page .email01-hero__quote {
    background: var(--c-red-bg);
    border-left: 3px solid var(--c-red);
    border-radius: var(--r-md);
    padding: 32px 35px;
    margin: 0;
    font-family: var(--ff-text);
    font-size: var(--fs-t2);
    line-height: calc(var(--lh-t2) / var(--fs-t2));
    color: var(--c-text);
    font-style: italic;
}

/* 3 stat-cards row */
.home-page .email01-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.home-page .email01-hero__stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--c-red-bg);
    border: var(--bd-w) solid var(--c-red-dd);
    border-radius: var(--r-md);
    padding: 24px 20px;
    height: 131px;
}

.home-page .email01-hero__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 .email01-hero__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);
}

.home-page .email01-hero__stat-source {
    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-grey);
    text-transform: uppercase;
    margin-top: auto;
}

/* ──────── RIGHT: rings illustration + services-list ──────── */

.home-page .email01-hero__right {
    flex: 0 0 588px;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.home-page .email01-hero__rings {
    position: relative;
    width: 470px;
    height: 470px;
    margin-left: auto;
    /* DT — illustration справа, рядом с services-list */
}

/* 3 concentric ring borders */
.home-page .email01-hero__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: var(--bd-w) solid var(--c-red-dd);
    transform: translate(-50%, -50%);
}

.home-page .email01-hero__ring--outer {
    width: 450px;
    height: 450px;
    opacity: 0.5;
}

.home-page .email01-hero__ring--mid {
    width: 340px;
    height: 340px;
    opacity: 0.7;
}

.home-page .email01-hero__ring--inner {
    width: 230px;
    height: 230px;
    border-color: var(--c-red-d);
}

/* Vector (innermost — vector path 122×122, мы рендерим как dashed ring) */
.home-page .email01-hero__ring-vec {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 122px;
    height: 122px;
    border-radius: 50%;
    border: var(--bd-w) dashed var(--c-red);
    transform: translate(-50%, -50%);
}

.home-page .email01-hero__rings-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--c-red-bg);
    border: var(--bd-w) solid var(--c-red);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 24px rgba(255, 96, 96, 0.4),
        inset 0 0 6px rgba(255, 96, 96, 0.25);
}

.home-page .email01-hero__rings-center-label {
    font-family: var(--ff-mono);
    font-size: 9px;
    line-height: 1;
    letter-spacing: 1.44px;
    color: var(--c-red);
    opacity: 0.85;
    text-transform: uppercase;
}

.home-page .email01-hero__rings-center-sub {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    color: var(--c-text);
    margin-top: 4px;
}

/* 3 ring-dots для orbital animation hints */
.home-page .email01-hero__ring-dot {
    position: absolute;
    background: var(--c-red);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 96, 96, 0.7);
}

.home-page .email01-hero__ring-dot--top {
    top: 0;
    left: 50%;
    width: 11px;
    height: 11px;
    transform: translate(-50%, -50%);
}

.home-page .email01-hero__ring-dot--right {
    top: 50%;
    right: 12px;
    width: 8px;
    height: 8px;
    transform: translate(50%, -50%);
}

.home-page .email01-hero__ring-dot--btm {
    bottom: 12px;
    left: 12px;
    width: 6px;
    height: 6px;
    transform: translate(-50%, 50%);
}

/* Services list — 260w 6 pills (DT). Размещается слева от rings */
.home-page .email01-hero__services {
    position: absolute;
    top: 84px;
    left: 0;
    width: 260px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.home-page .email01-hero__services-head {
    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-red);
    text-transform: uppercase;
    padding-bottom: 6px;
    border-bottom: var(--bd-w) solid var(--c-red-d);
    margin: 0 0 8px 0;
}

.home-page .email01-hero__services-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.home-page .email01-hero__service {
    position: relative;
    background: var(--c-red-bg);
    border: var(--bd-w) solid var(--c-red-dd);
    border-radius: var(--r-sm);
    padding: 11px 13px 11px 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
}

.home-page .email01-hero__service-bar {
    position: absolute;
    left: 1px;
    top: 1px;
    width: 3px;
    height: calc(100% - 2px);
    background: var(--c-red);
    border-radius: 2px;
}

.home-page .email01-hero__service-icon {
    position: absolute;
    left: 13px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.home-page .email01-hero__service-name {
    font-family: var(--ff-text);
    font-size: var(--fs-t4);
    line-height: calc(var(--lh-t4) / var(--fs-t4));
    color: var(--c-text);
}

/* ──────── Mobile (<768): stack everything ──────── */

@media (max-width: 767px) {
    .home-page .email01-hero {
        padding-block: 64px;
        padding-inline: 20px;
        gap: 32px;
    }

    .home-page .email01-hero__inner {
        gap: 48px;
    }

    .home-page .email01-hero__head {
        align-items: flex-start;
        text-align: left;
        gap: 12px;
    }

    /* tag-3 mobile стэк full-w (350×26 from Figma) */
    .home-page .email01-hero__tag-3 {
        align-self: center;
    }

    /* H1 → H3 на mobile (52/54 -2) */
    .home-page .email01-hero__title {
        font-size: var(--fs-h3);
        line-height: calc(var(--lh-h3) / var(--fs-h3));
        letter-spacing: var(--ls-h3);
        text-align: center;
        max-width: 100%;
    }

    /* Split → stack column */
    .home-page .email01-hero__split {
        flex-direction: column;
        gap: 32px;
        max-width: 100%;
    }

    .home-page .email01-hero__left,
    .home-page .email01-hero__right {
        flex: 1 1 auto;
        width: 100%;
    }

    .home-page .email01-hero__left-label {
        text-align: center;
    }

    .home-page .email01-hero__quote {
        padding: 24px 28px;
        font-size: var(--fs-t3);
        line-height: calc(var(--lh-t3) / var(--fs-t3));
    }

    /* Mobile stats — col stack */
    .home-page .email01-hero__stats {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* Mobile rings: scale to 280 (350×355 visible Figma) */
    .home-page .email01-hero__rings {
        width: 280px;
        height: 280px;
        margin: 0 auto;
    }

    .home-page .email01-hero__ring--outer { width: 280px; height: 280px; }
    .home-page .email01-hero__ring--mid { width: 220px; height: 220px; }
    .home-page .email01-hero__ring--inner { width: 160px; height: 160px; }
    .home-page .email01-hero__ring-vec { width: 90px; height: 90px; }
    .home-page .email01-hero__rings-center { width: 80px; height: 80px; }
    .home-page .email01-hero__rings-center-label { font-size: 8px; }
    .home-page .email01-hero__rings-center-sub { font-size: 12px; }

    /* Services list mobile: full-width 350w */
    .home-page .email01-hero__services {
        position: static;
        width: 100%;
        margin-top: 16px;
    }

    .home-page .email01-hero__service {
        padding: 11px 13px 11px 46px;
    }
}


/* ============================================================
   email02-problem — «The #1 Breach Vector Your Board Has Not Contained»
   DT  141:14134  (03-Section, 1920×1730)
   M   141:15090  (390×3204)
   Variables: Headline 3 (Syne 500 52/54 -2), Headline 4 (34/40 -1),
              Headline card 1 (Syne 700 24/40), Caption 1/2 (Mono 12/16 ls 1),
              Label (10/16 ls 2), Text 3 (16/22), Text 4 (12/19),
              Red: #FF6060, Red Medium #9B362E, Red Dark #59231F, Red Brown #271A27.
   ============================================================ */

.home-page .email02-problem {
    background: var(--c-bg);
    padding-block: 64px;
    padding-inline: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}

.home-page .email02-problem__inner {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

/* ──────── Tag (red) ──────── */

.home-page .email02-problem__tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    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;
}

.home-page .email02-problem__tag-line {
    width: 20px;
    height: 1px;
    background: var(--c-red);
}

.home-page .email02-problem__tag--centered {
    align-self: center;
}

/* ──────── BLOCK 1: Head + stats + GC Advantage ──────── */

.home-page .email02-problem__block-1 {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    text-align: center;
}

.home-page .email02-problem__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 800px;
}

.home-page .email02-problem__title {
    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);
    margin: 0;
}

.home-page .email02-problem__title-line {
    display: block;
}

.home-page .email02-problem__title-line--red {
    color: var(--c-red);
}

.home-page .email02-problem__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-2);
    margin: 0;
    max-width: 700px;
}

.home-page .email02-problem__lead-bold {
    color: var(--c-text);
    font-weight: 700;
}

/* 4 stat-cards row */
.home-page .email02-problem__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    width: 100%;
    max-width: 900px;
}

.home-page .email02-problem__stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--c-red-bg);
    border: var(--bd-w) solid var(--c-red-dd);
    border-radius: var(--r-md);
    padding: 24px 20px;
    text-align: left;
}

.home-page .email02-problem__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 .email02-problem__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);
}

.home-page .email02-problem__stat-source {
    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-grey);
    text-transform: uppercase;
    margin-top: auto;
}

/* GC Advantage card */
.home-page .email02-problem__advantage {
    width: 100%;
    max-width: 900px;
    background: var(--c-bg-aqua);
    border: var(--bd-w) solid var(--c-bg-aqua-grey);
    border-radius: var(--r-md);
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
}

.home-page .email02-problem__advantage-title {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    color: var(--c-text);
    margin: 0;
}

.home-page .email02-problem__advantage-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-grey);
    text-transform: uppercase;
    margin: 0;
}

.home-page .email02-problem__advantage-row {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    margin-top: 12px;
}

.home-page .email02-problem__advantage-card {
    flex: 1 1 0;
    padding: 16px 24px;
    border-radius: var(--r-sm);
    background: var(--c-bg-card-d);
    border: var(--bd-w) solid var(--c-bg-aqua-grey);
}

.home-page .email02-problem__advantage-card--red {
    border-color: var(--c-red-d);
}

.home-page .email02-problem__advantage-card--purple {
    border-color: var(--c-purple);
}

.home-page .email02-problem__advantage-card-tag {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: var(--fs-cap1);
    line-height: 1.2;
    letter-spacing: var(--ls-cap1);
    text-transform: uppercase;
    margin: 0 0 4px 0;
}

.home-page .email02-problem__advantage-card--red .email02-problem__advantage-card-tag {
    color: var(--c-red);
}

.home-page .email02-problem__advantage-card--purple .email02-problem__advantage-card-tag {
    color: var(--c-purple);
}

.home-page .email02-problem__advantage-card-text {
    font-family: var(--ff-text);
    font-size: var(--fs-t3);
    line-height: calc(var(--lh-t3) / var(--fs-t3));
    color: var(--c-text);
    margin: 0;
}

.home-page .email02-problem__advantage-arrow {
    font-size: 24px;
    color: var(--c-text-grey-2);
    flex-shrink: 0;
}

/* ──────── BLOCK 2: What's at Stake ──────── */

.home-page .email02-problem__block-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.home-page .email02-problem__stakes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
    max-width: 1000px;
}

.home-page .email02-problem__stake-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--c-bg-card-d);
    border-radius: var(--r-md);
    padding: 24px;
    position: relative;
    overflow: hidden;
}

.home-page .email02-problem__stake-col--red {
    border: var(--bd-w) solid var(--c-red-dd);
}

.home-page .email02-problem__stake-col--red::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--c-red);
}

.home-page .email02-problem__stake-col--purple {
    border: var(--bd-w) solid var(--c-purple);
    opacity: 0.95;
}

.home-page .email02-problem__stake-col--purple::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--c-purple);
}

.home-page .email02-problem__stake-title {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    margin: 0;
}

.home-page .email02-problem__stake-col--red .email02-problem__stake-title {
    color: var(--c-red);
}

.home-page .email02-problem__stake-col--purple .email02-problem__stake-title {
    color: var(--c-purple);
}

.home-page .email02-problem__stake-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-page .email02-problem__stake-item {
    background: var(--c-bg-aqua);
    border: var(--bd-w) solid var(--c-bg-aqua-grey);
    border-radius: var(--r-sm);
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.home-page .email02-problem__stake-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.home-page .email02-problem__stake-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.home-page .email02-problem__stake-item-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);
    text-transform: uppercase;
    margin: 0;
}

.home-page .email02-problem__stake-item-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-2);
    margin: 0;
}

/* ──────── BLOCK 3: Legacy Solution Gaps ──────── */

.home-page .email02-problem__block-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.home-page .email02-problem__legacy {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    width: 100%;
    max-width: 1000px;
}

.home-page .email02-problem__legacy-card {
    background: var(--c-bg-aqua);
    border: var(--bd-w) solid var(--c-bg-aqua-grey);
    border-radius: var(--r-md);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.home-page .email02-problem__legacy-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--c-red);
}

.home-page .email02-problem__legacy-num {
    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-red);
    text-transform: uppercase;
}

.home-page .email02-problem__legacy-title {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    color: var(--c-text);
    margin: 0;
}

.home-page .email02-problem__legacy-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-2);
    margin: 0;
}

.home-page .email02-problem__result {
    width: 100%;
    max-width: 1000px;
    background: var(--c-red-bg);
    border: var(--bd-w) solid var(--c-red-dd);
    border-radius: var(--r-md);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-left-width: 3px;
}

.home-page .email02-problem__result-tag {
    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-red);
    text-transform: uppercase;
    margin: 0;
}

.home-page .email02-problem__result-text {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.3;
    color: var(--c-text);
    margin: 0;
}

/* ──────── Mobile (<768) ──────── */

@media (max-width: 767px) {
    .home-page .email02-problem {
        padding-block: 64px;
        padding-inline: 20px;
        gap: 64px;
    }

    .home-page .email02-problem__inner {
        gap: 64px;
    }

    .home-page .email02-problem__title {
        font-size: var(--fs-h5);
        line-height: calc(var(--lh-h5) / var(--fs-h5));
    }

    .home-page .email02-problem__stats {
        grid-template-columns: 1fr 1fr;
    }

    .home-page .email02-problem__advantage {
        padding: 20px;
    }

    .home-page .email02-problem__advantage-row {
        flex-direction: column;
        gap: 12px;
    }

    .home-page .email02-problem__advantage-arrow {
        transform: rotate(90deg);
    }

    .home-page .email02-problem__stakes {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .home-page .email02-problem__legacy {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   email03-closedloop — «The Autonomous Closed-Loop Model»
   (4-step architecture + stats + outcome)
   DT  141:14311 (04-Section, 1920×1355)
   M   141:15262 (390×2746)
   ============================================================ */

.home-page .email03-closedloop {
    background: var(--c-bg);
    padding-block: 96px;
    padding-inline: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

.home-page .email03-closedloop__inner {
    width: 100%;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

.home-page .email03-closedloop__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    max-width: 800px;
}

.home-page .email03-closedloop__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 26px;
    padding: 0 14px;
    background: var(--c-red-brown);
    border: var(--bd-w) solid var(--c-red-d);
    border-radius: var(--r-pill);
    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;
}

.home-page .email03-closedloop__tag-dot {
    width: 6px;
    height: 6px;
    background: var(--c-red);
    border-radius: 50%;
}

.home-page .email03-closedloop__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);
    margin: 0;
}

.home-page .email03-closedloop__title-line {
    display: block;
}

.home-page .email03-closedloop__title-line--red {
    color: var(--c-red);
}

.home-page .email03-closedloop__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-2);
    margin: 0;
}

.home-page .email03-closedloop__section-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    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;
    text-align: center;
}

.home-page .email03-closedloop__section-tag-line {
    width: 20px;
    height: 1px;
    background: var(--c-red);
}

/* ──────── 4-step architecture ──────── */

.home-page .email03-closedloop__steps {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: stretch;
    width: 100%;
    max-width: 1300px;
}

.home-page .email03-closedloop__step {
    flex: 1 1 0;
    background: var(--c-red-bg);
    border: var(--bd-w) solid var(--c-red-dd);
    border-radius: var(--r-md);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.home-page .email03-closedloop__step::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: var(--c-red);
}

.home-page .email03-closedloop__step-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-grey);
    text-transform: uppercase;
}

.home-page .email03-closedloop__step-title {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    color: var(--c-text);
    margin: 0;
}

.home-page .email03-closedloop__step-subtitle {
    font-family: var(--ff-text);
    font-size: var(--fs-t3);
    line-height: calc(var(--lh-t3) / var(--fs-t3));
    color: var(--c-text);
    margin: 0;
}

.home-page .email03-closedloop__step-diff {
    font-family: var(--ff-text);
    font-size: var(--fs-t4);
    line-height: calc(var(--lh-t4) / var(--fs-t4));
    color: var(--c-text-grey-2);
    margin: 0;
}

.home-page .email03-closedloop__step-diff-label {
    color: var(--c-text);
    display: block;
    margin-bottom: 4px;
}

.home-page .email03-closedloop__step-impact {
    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-red);
    margin: auto 0 0 0;
    padding-top: 12px;
}

.home-page .email03-closedloop__arrow {
    flex-shrink: 0;
    align-self: center;
    color: var(--c-red);
    font-size: 20px;
}

/* ──────── Stats row ──────── */

.home-page .email03-closedloop__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    width: 100%;
    max-width: 900px;
}

.home-page .email03-closedloop__stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--c-red-bg);
    border: var(--bd-w) solid var(--c-red-dd);
    border-radius: var(--r-md);
    padding: 24px 20px;
}

.home-page .email03-closedloop__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 .email03-closedloop__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);
}

.home-page .email03-closedloop__stat-source {
    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-grey);
    text-transform: uppercase;
    margin-top: auto;
}

/* ──────── Outcome card ──────── */

.home-page .email03-closedloop__outcome {
    width: 100%;
    max-width: 1000px;
    background: var(--c-red-bg);
    border: var(--bd-w) solid var(--c-red-dd);
    border-radius: var(--r-md);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-left-width: 3px;
}

.home-page .email03-closedloop__outcome-tag {
    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-red);
    text-transform: uppercase;
    margin: 0;
}

.home-page .email03-closedloop__outcome-text {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.3;
    color: var(--c-text);
    margin: 0;
}

.home-page .email03-closedloop__outcome-accent {
    color: var(--c-red);
}

/* ──────── Mobile (<768) ──────── */

@media (max-width: 767px) {
    .home-page .email03-closedloop {
        padding-block: 64px;
        padding-inline: 20px;
        gap: 32px;
    }

    .home-page .email03-closedloop__inner {
        gap: 32px;
    }

    .home-page .email03-closedloop__title {
        font-size: var(--fs-h4);
        line-height: calc(var(--lh-h4) / var(--fs-h4));
    }

    .home-page .email03-closedloop__steps {
        flex-direction: column;
    }

    .home-page .email03-closedloop__arrow {
        transform: rotate(90deg);
    }

    .home-page .email03-closedloop__stats {
        grid-template-columns: 1fr 1fr;
    }
}


/* ============================================================
   email04-fail — «Where Legacy DLP Fails»
   DT  141:14464  (05-Section, 1920×1698)
   M   141:15416  (390×3364)
   ============================================================ */

.home-page .email04-fail {
    background: var(--c-bg);
    padding-block: 96px;
    padding-inline: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

.home-page .email04-fail__inner {
    width: 100%;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

.home-page .email04-fail__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.home-page .email04-fail__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 26px;
    padding: 0 14px;
    background: var(--c-red-brown);
    border: var(--bd-w) solid var(--c-red-d);
    border-radius: var(--r-pill);
    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;
}

.home-page .email04-fail__tag-dot {
    width: 6px;
    height: 6px;
    background: var(--c-red);
    border-radius: 50%;
}

.home-page .email04-fail__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);
    margin: 0;
}

.home-page .email04-fail__title-red {
    color: var(--c-red);
    margin-left: 16px;
}

.home-page .email04-fail__section-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    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;
    align-self: center;
}

.home-page .email04-fail__section-tag-line {
    width: 20px;
    height: 1px;
    background: var(--c-red);
}

/* ──────── Why (3 cards) ──────── */

.home-page .email04-fail__why {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
}

.home-page .email04-fail__why-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    width: 100%;
    max-width: 1100px;
}

.home-page .email04-fail__why-card {
    background: var(--c-bg-aqua);
    border: var(--bd-w) solid var(--c-bg-aqua-grey);
    border-radius: var(--r-md);
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-page .email04-fail__why-icon {
    width: 24px;
    height: 24px;
    font-size: 16px;
    color: var(--c-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.home-page .email04-fail__why-icon svg {
    width: 24px;
    height: 24px;
}

.home-page .email04-fail__why-title {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    color: var(--c-text);
    margin: 0;
}

.home-page .email04-fail__why-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-2);
    margin: 0;
}

/* ──────── Next Steps (4 cards) ──────── */

.home-page .email04-fail__next {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
}

.home-page .email04-fail__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    width: 100%;
    max-width: 1200px;
    border: var(--bd-w) solid var(--c-bg-aqua-grey);
    border-radius: var(--r-md);
    overflow: hidden;
}

.home-page .email04-fail__step {
    background: var(--c-bg-aqua);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-right: var(--bd-w) solid var(--c-bg-aqua-grey);
}

.home-page .email04-fail__step:last-child {
    border-right: none;
}

.home-page .email04-fail__step-num {
    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-grey);
    text-transform: uppercase;
}

.home-page .email04-fail__step-title {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: var(--c-text);
    margin: 0;
}

.home-page .email04-fail__step-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-2);
    margin: 0;
}

/* ──────── Matrices ──────── */

.home-page .email04-fail__matrices {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.home-page .email04-fail__legend {
    display: flex;
    gap: 24px;
    justify-content: center;
}

.home-page .email04-fail__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ff-text);
    font-size: var(--fs-t4);
    color: var(--c-text);
}

.home-page .email04-fail__legend-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-weight: 700;
}

.home-page .email04-fail__legend-icon--full {
    background: rgba(52, 211, 153, 0.2);
    color: var(--c-green);
}

.home-page .email04-fail__legend-icon--partial {
    background: rgba(148, 163, 184, 0.2);
    color: var(--c-text-grey-2);
}

.home-page .email04-fail__legend-icon--none {
    background: rgba(255, 96, 96, 0.2);
    color: var(--c-red);
}

.home-page .email04-fail__tables {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
    max-width: 1300px;
}

.home-page .email04-fail__matrix {
    background: var(--c-bg-aqua);
    border: var(--bd-w) solid var(--c-bg-aqua-grey);
    border-radius: var(--r-md);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-page .email04-fail__matrix-title {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    color: var(--c-text);
    margin: 0;
}

.home-page .email04-fail__matrix-sub {
    font-family: var(--ff-text);
    font-size: var(--fs-t4);
    line-height: calc(var(--lh-t4) / var(--fs-t4));
    color: var(--c-text-grey-2);
    margin: 0;
}

.home-page .email04-fail__table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--ff-text);
    font-size: var(--fs-t4);
}

.home-page .email04-fail__table th,
.home-page .email04-fail__table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: var(--bd-w) solid var(--c-bg-aqua-grey);
}

.home-page .email04-fail__th--legacy {
    background: var(--c-red-bg);
    color: var(--c-red);
}

.home-page .email04-fail__th--gc {
    background: rgba(52, 211, 153, 0.15);
    color: var(--c-green);
}

.home-page .email04-fail__th {
    font-weight: 700;
    text-align: center;
}

.home-page .email04-fail__th--cap {
    text-align: left;
}

.home-page .email04-fail__table td {
    color: var(--c-text);
}

.home-page .email04-fail__td--full {
    color: var(--c-green);
    text-align: center;
    font-weight: 700;
}

.home-page .email04-fail__td--none {
    color: var(--c-red);
    text-align: center;
    font-weight: 700;
}

.home-page .email04-fail__td--partial {
    color: var(--c-text-grey-2);
    text-align: center;
    font-weight: 700;
}

.home-page .email04-fail__type-pill {
    display: inline-block;
    padding: 2px 8px;
    background: var(--c-red-bg);
    border: var(--bd-w) solid var(--c-red-dd);
    border-radius: var(--r-pill);
    font-family: var(--ff-mono);
    font-size: 10px;
    color: var(--c-red);
}

/* ──────── Result card (aqua blue) ──────── */

.home-page .email04-fail__result {
    width: 100%;
    max-width: 1100px;
    background: var(--c-bg-aqua);
    border: var(--bd-w) solid var(--c-blue);
    border-radius: var(--r-md);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-left-width: 3px;
}

.home-page .email04-fail__result-title {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    color: var(--c-text);
    margin: 0;
}

.home-page .email04-fail__result-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-2);
    margin: 0;
}

/* ──────── Mobile (<768) ──────── */

@media (max-width: 767px) {
    .home-page .email04-fail {
        padding-block: 64px;
        padding-inline: 20px;
        gap: 32px;
    }

    .home-page .email04-fail__inner {
        gap: 32px;
    }

    .home-page .email04-fail__title {
        font-size: var(--fs-h4);
        line-height: calc(var(--lh-h4) / var(--fs-h4));
    }

    .home-page .email04-fail__why-cards {
        grid-template-columns: 1fr;
    }

    .home-page .email04-fail__steps {
        grid-template-columns: 1fr;
    }

    .home-page .email04-fail__step {
        border-right: none;
        border-bottom: var(--bd-w) solid var(--c-bg-aqua-grey);
    }

    .home-page .email04-fail__tables {
        grid-template-columns: 1fr;
    }

    .home-page .email04-fail__table {
        font-size: 10px;
    }

    .home-page .email04-fail__table th,
    .home-page .email04-fail__table td {
        padding: 8px 6px;
    }
}


/* ============================================================
   email05-arch — «An Autonomous Data Protection Architecture»
   DT  141:14790 (06-Section, 1920×1183)
   M   147:13279 (390×1614)
   ============================================================ */

.home-page .email05-arch {
    background: var(--c-bg);
    padding-block: 64px;
    padding-inline: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.home-page .email05-arch__inner {
    width: 100%;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.home-page .email05-arch__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.home-page .email05-arch__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 26px;
    padding: 0 14px;
    background: var(--c-red-brown);
    border: var(--bd-w) solid var(--c-red-d);
    border-radius: var(--r-pill);
    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;
}

.home-page .email05-arch__tag-dot {
    width: 6px;
    height: 6px;
    background: var(--c-red);
    border-radius: 50%;
}

.home-page .email05-arch__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);
    margin: 0;
}

.home-page .email05-arch__title-line {
    display: block;
}

.home-page .email05-arch__title-line--red {
    color: var(--c-red);
}

.home-page .email05-arch__sub {
    font-family: var(--ff-text);
    font-size: var(--fs-t3);
    line-height: calc(var(--lh-t3) / var(--fs-t3));
    color: var(--c-text-grey-2);
    margin: 0;
}

/* ──────── Diagram (3 cols) ──────── */

.home-page .email05-arch__diagram {
    display: grid;
    grid-template-columns: 260px 1fr 260px;
    gap: 32px;
    align-items: center;
    width: 100%;
    max-width: 1200px;
}

.home-page .email05-arch__col-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-red);
    text-transform: uppercase;
    margin: 0 0 12px 0;
    padding-bottom: 6px;
    border-bottom: var(--bd-w) solid var(--c-red-d);
}

/* LEFT: actors */
.home-page .email05-arch__actor-list,
.home-page .email05-arch__channel-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-page .email05-arch__actor,
.home-page .email05-arch__channel {
    position: relative;
    background: var(--c-bg-card-d);
    border: var(--bd-w) solid var(--c-bg-aqua-grey);
    border-radius: var(--r-sm);
    padding: 14px 14px 14px 46px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.home-page .email05-arch__actor {
    border-color: var(--c-red-dd);
}

.home-page .email05-arch__actor-bar {
    position: absolute;
    left: 1px;
    top: 1px;
    width: 3px;
    height: calc(100% - 2px);
    background: var(--c-red);
}

.home-page .email05-arch__actor-icon,
.home-page .email05-arch__channel-icon {
    position: absolute;
    left: 13px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.home-page .email05-arch__channel-icon {
    position: static;
    flex-shrink: 0;
}

.home-page .email05-arch__channel {
    padding: 14px;
}

.home-page .email05-arch__actor-title,
.home-page .email05-arch__channel-title {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: var(--fs-cap1);
    line-height: 1.2;
    letter-spacing: var(--ls-cap1);
    color: var(--c-text);
    margin: 0 0 4px 0;
    text-transform: uppercase;
}

.home-page .email05-arch__actor-desc,
.home-page .email05-arch__channel-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-2);
    margin: 0;
}

/* CENTER: orbital rings + 8 agents + nucleus */
.home-page .email05-arch__rings {
    position: relative;
    width: 520px;
    height: 520px;
    margin: 0 auto;
}

.home-page .email05-arch__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: var(--bd-w) solid var(--c-red-dd);
    transform: translate(-50%, -50%);
}

.home-page .email05-arch__ring--outer {
    width: 520px;
    height: 520px;
    opacity: 0.4;
}

.home-page .email05-arch__ring--mid {
    width: 400px;
    height: 400px;
    opacity: 0.6;
    border-color: var(--c-red-d);
}

.home-page .email05-arch__ring--inner {
    width: 280px;
    height: 280px;
    border-color: var(--c-red);
}

.home-page .email05-arch__agent {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 88px;
    height: 88px;
    background: var(--c-red-bg);
    border: var(--bd-w) solid var(--c-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px;
    font-family: var(--ff-mono);
    font-size: 8px;
    line-height: 1.2;
    color: var(--c-text);
    box-shadow: 0 0 12px rgba(255, 96, 96, 0.25);
}

.home-page .email05-arch__nucleus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: var(--c-red-bg);
    border: 2px solid var(--c-red);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 24px rgba(255, 96, 96, 0.5),
        inset 0 0 8px rgba(255, 96, 96, 0.25);
}

.home-page .email05-arch__nucleus-text {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
    color: var(--c-red);
    text-align: center;
    margin: 0;
    letter-spacing: 1px;
}

/* ──────── Result card ──────── */

.home-page .email05-arch__result {
    width: 100%;
    max-width: 1000px;
    background: var(--c-red-bg);
    border: var(--bd-w) solid var(--c-red-dd);
    border-left-width: 3px;
    border-left-color: var(--c-red);
    border-radius: var(--r-md);
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.home-page .email05-arch__result-text {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.4;
    color: var(--c-text);
    margin: 0;
}

.home-page .email05-arch__result-accent {
    color: var(--c-red);
    font-weight: 700;
}

.home-page .email05-arch__result-sub {
    font-family: var(--ff-text);
    font-size: var(--fs-t4);
    line-height: calc(var(--lh-t4) / var(--fs-t4));
    color: var(--c-text-grey-2);
    margin: 0;
}

/* ──────── CTA ──────── */

.home-page .email05-arch__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 30px;
    background: var(--c-blue);
    color: var(--c-bg);
    border-radius: var(--r-sm);
    font-family: var(--ff-btn);
    font-weight: 700;
    font-size: var(--fs-btn);
    line-height: calc(var(--lh-btn) / var(--fs-btn));
    text-decoration: none;
    white-space: nowrap;
    filter: var(--glow-blue);
    transition: filter .2s ease;
}

.home-page .email05-arch__cta:hover {
    filter: var(--glow-blue-h);
}

/* ──────── Mobile (<768) ──────── */

@media (max-width: 767px) {
    .home-page .email05-arch {
        padding-block: 64px;
        padding-inline: 20px;
        gap: 32px;
    }

    .home-page .email05-arch__inner {
        gap: 32px;
    }

    .home-page .email05-arch__title {
        font-size: var(--fs-h4);
        line-height: calc(var(--lh-h4) / var(--fs-h4));
    }

    .home-page .email05-arch__diagram {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .home-page .email05-arch__rings {
        width: 320px;
        height: 320px;
        margin: 0 auto;
    }

    .home-page .email05-arch__ring--outer { width: 320px; height: 320px; }
    .home-page .email05-arch__ring--mid { width: 240px; height: 240px; }
    .home-page .email05-arch__ring--inner { width: 160px; height: 160px; }

    .home-page .email05-arch__agent {
        width: 56px;
        height: 56px;
        font-size: 6px;
        padding: 4px;
    }

    .home-page .email05-arch__nucleus {
        width: 90px;
        height: 90px;
    }

    .home-page .email05-arch__nucleus-text {
        font-size: 10px;
    }
}


/* ============================================================
   email06-cta — CTA «Stop the #1 Breach Vector. Start in 30 Days»
   DT  141:14979  (07-Section, 1920×626)
       └─ CTA card 141:14980  (900×434) at (510, 96)
   M   147:13471  (390×457) — full-width card
   Variables: Headline 4 (Syne 500 34/40 -1), Text 3 (DM Sans 16/22),
              Label (Mono 10/16 ls 2), Light Blue (#00AAFF),
              Basic/White (#F1F5FF), Basic/Grey (#94A3B8),
              Blue/Black Blue (#030C12), Aquamarine Grey (#073754).
   ============================================================ */

.home-page .email06-cta {
    background: var(--c-bg);
    /* DT 1920×626: card 900w centered → outer padding-block 96/96 (=> (626-434)/2),
       Mobile: card full-width, pad-block 0 (card сама даёт inset через pad). */
    padding-block: 96px;
    padding-inline: 20px;
    display: flex;
    justify-content: center;
}

.home-page .email06-cta__inner {
    width: 100%;
    /* from Figma 141:14980 — DT card 900w */
    max-width: 900px;
}

.home-page .email06-cta__card {
    position: relative;
    /* card bg — dark navy + blue-glow внизу (как sol03-cta). Снято со screenshot
       поскольку gradient stops Figma в variable defs не отдал. */
    background:
        radial-gradient(ellipse 600px 300px at 50% 110%, rgba(0, 170, 255, 0.35), transparent 70%),
        linear-gradient(180deg, var(--c-bg-card-d) 0%, #0F1A2E 100%);
    border-radius: var(--r-md);
    border: var(--bd-w) solid var(--c-bg-aqua-grey);
    /* from Figma 141:14981 — content pad 70×52 DT */
    padding: 70px 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* from Figma — gaps между tag/title/lead/buttons */
    gap: 20px;
    text-align: center;
    overflow: hidden;
}

/* ──────── Tag «AUTONOMOUS DATA PROTECTION» (tag-2 dash + label) ──────── */

.home-page .email06-cta__tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    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-blue);
    text-transform: uppercase;
}

.home-page .email06-cta__tag-line {
    width: 20px;
    height: 1px;
    background: var(--c-blue);
}

/* ──────── Title H4 (two lines: white + blue accent) ──────── */

.home-page .email06-cta__title {
    /* from Figma — Headline 4 (Syne 500 34/40 -1) */
    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);
    margin: 0;
    /* DT title 796w fits; M title 350w wraps 3 lines (1st 2 lines, 2nd 1) */
}

.home-page .email06-cta__title-line {
    display: block;
}

.home-page .email06-cta__title-line--accent {
    color: var(--c-blue);
}

/* ──────── Lead T3 grey-2 centered ──────── */

.home-page .email06-cta__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-2);
    margin: 0;
    /* DT lead 566w из 796 → max-w для центрирования */
    max-width: 566px;
}

/* ──────── 2 buttons row (DT) / col (M) ──────── */

.home-page .email06-cta__buttons {
    display: flex;
    gap: 15px;
    /* DT — row */
    flex-direction: row;
    /* DT pad-top: Container at y=226 vs lead end at y=202 → gap 24 already covers */
    margin-top: 12px;
}

.home-page .email06-cta__btn {
    /* from Figma — Button-2 / Button-outline h 48 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 28px;
    border-radius: var(--r-sm);
    font-family: var(--ff-btn);
    font-weight: 700;
    font-size: var(--fs-btn);
    line-height: calc(var(--lh-btn) / var(--fs-btn));
    text-decoration: none;
    white-space: nowrap;
    transition: filter .2s ease, background .2s ease, color .2s ease;
}

.home-page .email06-cta__btn--primary {
    /* Blue solid + glow */
    background: var(--c-blue);
    color: var(--c-bg);
    filter: var(--glow-blue);
}

.home-page .email06-cta__btn--primary:hover {
    filter: var(--glow-blue-h);
}

.home-page .email06-cta__btn--outline {
    /* Outline blue border + text */
    background: transparent;
    color: var(--c-blue);
    border: var(--bd-w) solid var(--c-blue);
}

.home-page .email06-cta__btn--outline:hover {
    background: rgba(0, 170, 255, 0.08);
}

/* ──────── Mobile (<768) ──────── */

@media (max-width: 767px) {
    .home-page .email06-cta {
        /* M 390×457 — card full-w, section pad-block 0 (card sets its own) */
        padding-block: 0;
        padding-inline: 20px;
    }

    .home-page .email06-cta__card {
        /* from Figma 147:13472 — content pad 48 top + ~48 bottom */
        padding: 48px 28px;
        gap: 20px;
    }

    .home-page .email06-cta__buttons {
        /* M stack vertical, gap 8 (from Figma Container 350×104 → 48+8+48) */
        flex-direction: column;
        gap: 8px;
        width: 100%;
        margin-top: 8px;
    }

    .home-page .email06-cta__btn {
        /* Full-width buttons on mobile */
        width: 100%;
        padding: 0 20px;
    }
}