/* P26M — final CTA section.
 * Echoes the hero: subtle routing background, big headline, mailto CTA.
 */

.cta {
    position: relative;
    padding-block: var(--space-10) var(--space-9);
    overflow: hidden;
    isolation: isolate;
    text-align: center;
}

.cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 50%,
            rgba(115, 196, 75, 0.16) 0%,
            transparent 60%),
        radial-gradient(ellipse 60% 60% at 50% 100%,
            rgba(59, 91, 255, 0.20) 0%,
            transparent 50%);
    z-index: -1;
    pointer-events: none;
}

.cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(34, 38, 46, 0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 38, 46, 0.4) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, black 0%, transparent 80%);
    mask-image: radial-gradient(ellipse 70% 60% at center, black 0%, transparent 80%);
    z-index: -1;
    pointer-events: none;
    opacity: 0.6;
}

/* Light mode: the hardcoded dark grid colour becomes too heavy on white.
   Switch to a cool-grey tone matching --color-border and drop opacity. */
.surface--light .cta::after {
    background-image:
        linear-gradient(rgba(14, 20, 27, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 20, 27, 0.07) 1px, transparent 1px);
    opacity: 1;
}

.cta__inner {
    max-width: 880px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
}

.cta__pretitle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: 8px 16px;
    background: var(--color-elevated);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-secondary);
}
.cta__pretitle::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(115, 196, 75, 0.20);
    animation: live-blink 2s ease-in-out infinite;
}

.cta__title {
    font-family: var(--font-display);
    font-weight: 800;
    /* --display-scale = 1 на латинице; на uk/ru подрезает кегль (tokens.css). */
    font-size: calc(clamp(2.5rem, 1.8rem + 4.5vw, 5.5rem) * var(--display-scale));
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--color-text);
}
/* uk/ru: на мере в 880px русский заголовок ломался на 3 строки уже при
   --display-scale (77px против 76px порога) — запас был меньше одного
   пикселя. Расширяем меру под кириллицу вместо того, чтобы резать кегль
   ещё сильнее: лид и кнопки внутри .cta__inner центрируются по собственным
   max-width, поэтому шире становится только строка заголовка. */
:lang(uk) .cta__inner,
:lang(ru) .cta__inner {
    max-width: 1000px;
}

.cta__title em {
    font-style: normal;
    background: linear-gradient(135deg,
        var(--color-brand-strong) 0%,
        var(--color-brand) 60%,
        var(--color-brand-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cta__lead {
    font-size: var(--fs-lg);
    color: var(--color-text-secondary);
    max-width: 56ch;
    line-height: var(--lh-relaxed);
}

.cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-3);
}

.cta__meta {
    margin-top: var(--space-5);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-5) var(--space-7);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}
.cta__meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.cta__meta-item .p26m-icon {
    width: 14px;
    height: 14px;
    color: var(--color-brand);
}