/*
 * SERP Expert 2.0.17 — блоки «Остались вопросы?» и «Какие задачи решает комплексный подход».
 * Геометрия снята с утверждённого макета шириной 1536 px:
 * контент 1246 px, левая колонка 675 px, иллюстрация 676 × 478 px.
 * Иллюстрация масштабируется через container query units (--u = 1/676 ширины сцены).
 */

.se-cta,
.se-tasks {
    --se-navy: #061e33;
    --se-ink: #071d32;
    --se-font: var(--font-main, "Manrope", system-ui, sans-serif);
    font-family: var(--se-font);
    box-sizing: border-box;
}
.se-cta *,
.se-cta *::before,
.se-cta *::after,
.se-tasks *,
.se-tasks *::before,
.se-tasks *::after { box-sizing: border-box; }

.se-cta .screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Секция ---------- */

.se-cta {
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-height: 478px;
    padding: 27px 20px 20px;
    background: var(--se-navy);
    color: #fff;
    isolation: isolate;
}

.se-cta__orb {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
}
.se-cta__orb--top {
    width: 230px; height: 230px;
    left: -118px; top: -150px;
    background: radial-gradient(circle at 60% 70%, #2b465e 0%, #1c3750 55%, #13304a 100%);
    opacity: .85;
}
.se-cta__orb--bottom {
    width: 260px; height: 260px;
    left: -170px; top: 312px;
    background: radial-gradient(circle at 70% 40%, #1a3a55 0%, #12304a 60%, #0c2740 100%);
    opacity: .9;
}

.se-cta__inner {
    position: static;
    max-width: 1246px;
    margin: 0 auto;
}

.se-cta__content {
    position: relative;
    z-index: 4;
    width: 675px;
    max-width: 100%;
}

/* ---------- Тексты ---------- */

.se-cta__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 19px;
    color: #c9d4de;
    font: 500 12.5px/14px var(--se-font);
    letter-spacing: 0;
}
.se-cta__eyebrow::after {
    content: "";
    display: block;
    width: 30px;
    height: 1px;
    background: #8c9cab;
}

.se-cta .se-cta__title {
    margin: 0 0 14px;
    padding: 0;
    color: #fff;
    font-family: var(--se-font);
    font-size: 42px;
    line-height: 41px;
    font-weight: 800;
    letter-spacing: -0.6px;
    text-transform: none;
}
.se-cta__accent {
    color: #f8c8ad;
    background: linear-gradient(90deg, #ffd6bb 0%, #f7c2a3 55%, #f2b394 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.se-cta .se-cta__subtitle {
    margin: 0 0 14px;
    color: #dfe6ed;
    font: 400 16.5px/23px var(--se-font);
    letter-spacing: 0;
}

.se-cta__notice {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 10px;
    font: 500 14px/20px var(--se-font);
}
.se-cta__notice--ok { background: rgba(31, 169, 113, .18); color: #c9f5de; border: 1px solid rgba(31, 169, 113, .45); }
.se-cta__notice--error { background: rgba(227, 27, 27, .16); color: #ffd2d2; border: 1px solid rgba(227, 27, 27, .45); }

/* ---------- Форма ---------- */

.se-cta-form { margin: 0; }

.se-cta-form__grid {
    display: grid;
    grid-template-columns: 331px minmax(0, 1fr);
    gap: 7px 11px;
}

.se-cta-field {
    position: relative;
    display: block;
    margin: 0;
}
.se-cta-field--message { grid-column: 1 / -1; margin-top: 1px; }

.se-cta-field__icon {
    position: absolute;
    z-index: 1;
    left: 15px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    color: #6b7682;
    pointer-events: none;
    stroke-width: 1.7;
}

.se-cta .se-cta-field input,
.se-cta .se-cta-field textarea {
    display: block;
    width: 100%;
    height: 44px;
    min-height: 0;
    margin: 0;
    padding: 0 16px 0 43px;
    border: 1px solid #fff;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(3, 18, 33, .08);
    color: #13263a;
    font: 400 14.5px/20px var(--se-font);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
    -webkit-appearance: none;
    appearance: none;
}
.se-cta .se-cta-field textarea {
    height: 69px;
    min-height: 69px;
    max-height: 220px;
    padding: 24px 16px 8px 43px;
    resize: vertical;
    overflow: auto;
}
.se-cta .se-cta-field input::placeholder,
.se-cta .se-cta-field textarea::placeholder { color: #5f6b78; opacity: 1; font-weight: 400; }
.se-cta .se-cta-field input:focus,
.se-cta .se-cta-field textarea:focus {
    border-color: #f8c8ad;
    box-shadow: 0 0 0 3px rgba(248, 200, 173, .35);
}

.se-cta-form__captcha { margin-top: 10px; }

.se-cta-form__footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: center;
    gap: 24px;
    margin-top: 10px;
}

.se-cta .se-cta-form__note {
    display: flex;
    align-items: center;
    gap: 17px;
    margin: 0;
    padding-left: 2px;
    color: #b7c3cf;
    font: 400 11px/16px var(--se-font);
    letter-spacing: 0;
}
.se-cta-form__note a { color: #d9e2ea; text-decoration: underline; text-underline-offset: 2px; }
.se-cta-form__note a:hover { color: #fff; }
.se-cta-form__lock {
    flex: 0 0 20px;
    width: 20px;
    height: 24px;
    color: #a8b6c4;
    stroke-width: 2.2;
}

.se-cta .se-cta-form__submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    width: 300px;
    height: 60px;
    margin: 0;
    padding: 0 24px;
    border: 1px solid rgba(255, 92, 92, .55);
    border-radius: 16px;
    background: linear-gradient(180deg, #e01a1a 0%, #c50808 55%, #b40606 100%);
    box-shadow: 0 0 0 3px rgba(226, 20, 20, .18), 0 12px 26px rgba(222, 16, 16, .34), inset 0 1px 0 rgba(255, 255, 255, .18);
    color: #fff;
    font: 700 15px/1 var(--se-font);
    letter-spacing: 0;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.se-cta .se-cta-form__submit:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(226, 20, 20, .24), 0 16px 32px rgba(222, 16, 16, .42), inset 0 1px 0 rgba(255, 255, 255, .2); }
.se-cta .se-cta-form__submit:focus-visible { outline: 3px solid #f8c8ad; outline-offset: 3px; }
.se-cta .se-cta-form__submit:disabled { opacity: .75; cursor: wait; }
.se-cta-form__arrow { width: 17px; height: 17px; stroke-width: 2; }

/* ---------- Иллюстрация ---------- */

.se-cta__visual {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: calc(max(20px, 50% - 623px) + 715px);
    width: min(676px, calc(100% - max(20px, 50% - 623px) - 715px));
    aspect-ratio: 676 / 478;
    container-type: inline-size;
    pointer-events: none;
}

.se-cta__stage {
    --u: calc(100cqw / 676);
    position: absolute;
    inset: 0;
}

.se-cta__blob {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.se-cta__blob-ring { fill: #0c2a43; opacity: .55; }

.se-cta__rays {
    position: absolute;
    fill: none;
    stroke: #f0566a;
    stroke-width: 3.6;
    stroke-linecap: round;
}
.se-cta__rays--title { left: calc(-65 * var(--u)); top: calc(30 * var(--u)); width: calc(66 * var(--u)); height: calc(56 * var(--u)); }
.se-cta__rays--card { left: calc(580 * var(--u)); top: calc(170 * var(--u)); width: calc(54 * var(--u)); height: calc(44 * var(--u)); z-index: 3; }

.se-cta__dots {
    position: absolute;
    display: block;
}
.se-cta__dots--peach {
    left: calc(461 * var(--u));
    top: calc(11 * var(--u));
    width: calc(112 * var(--u));
    height: calc(68 * var(--u));
    background-image: radial-gradient(circle, #f6c3a3 0 calc(2 * var(--u)), transparent calc(2.4 * var(--u)));
    background-size: calc(22.4 * var(--u)) calc(22.7 * var(--u));
}
.se-cta__dots--white {
    z-index: 2;
    left: calc(4 * var(--u));
    top: calc(348 * var(--u));
    width: calc(150 * var(--u));
    height: calc(94 * var(--u));
    background-image: radial-gradient(circle, rgba(255, 255, 255, .82) 0 calc(1.9 * var(--u)), transparent calc(2.3 * var(--u)));
    background-size: calc(21.4 * var(--u)) calc(23.4 * var(--u));
}

.se-cta__doodle {
    position: absolute;
    left: calc(95 * var(--u));
    top: calc(190 * var(--u));
    width: calc(55 * var(--u));
    height: calc(65 * var(--u));
    fill: none;
    stroke: #5d6f80;
    stroke-width: 1.9;
    stroke-linecap: round;
}

.se-cta__plant {
    position: absolute;
    z-index: 1;
    left: calc(18 * var(--u));
    top: calc(206 * var(--u));
    width: calc(126 * var(--u));
    height: calc(179 * var(--u));
}
.se-cta__plant svg,
.se-cta__plant img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }

.se-cta__person {
    position: absolute;
    z-index: 2;
    left: calc(61 * var(--u));
    bottom: calc(-2 * var(--u));
    width: calc(512 * var(--u));
    height: auto;
    max-width: none;
}

.se-cta-card {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(12 * var(--u));
    padding: calc(19 * var(--u)) calc(18 * var(--u)) calc(20 * var(--u));
    border-radius: calc(16 * var(--u));
    background: #fff;
    box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(4, 20, 40, .13);
    color: #0b1c2e;
}
.se-cta-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: calc(52 * var(--u));
    height: calc(52 * var(--u));
    border-radius: 50%;
}
.se-cta-card__icon svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); stroke-width: 2.1; }
.se-cta-card__text {
    display: block;
    font: 600 calc(13 * var(--u)) / calc(18 * var(--u)) var(--se-font);
    letter-spacing: 0;
    white-space: nowrap;
}

.se-cta-card--1 {
    left: calc(26 * var(--u));
    top: calc(57 * var(--u));
    min-width: calc(160 * var(--u));
    transform: rotate(-4deg);
}
.se-cta-card--2 {
    left: calc(381 * var(--u));
    top: calc(90 * var(--u));
    min-width: calc(240 * var(--u));
    min-height: calc(75 * var(--u));
    flex-direction: row;
    align-items: center;
    gap: calc(14 * var(--u));
    padding: calc(11 * var(--u)) calc(16 * var(--u)) calc(11 * var(--u)) calc(14 * var(--u));
}
.se-cta-card--3 {
    left: calc(484 * var(--u));
    top: calc(210 * var(--u));
    min-width: calc(147 * var(--u));
    min-height: calc(153 * var(--u));
    gap: calc(14 * var(--u));
    padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));
}
.se-cta-card--3 .se-cta-card__text { line-height: calc(20 * var(--u)); }

/* ---------- Цветовые пары иконок ---------- */

.se-tone--red { background: #fde4e3; color: #e2463f; }
.se-tone--green { background: #daf5e7; color: #1ea56b; }
.se-tone--blue { background: #dcecfd; color: #2d7fde; }
.se-tone--orange { background: #fde7d7; color: #d4581a; }
.se-tone--purple { background: #e7defd; color: #6a3fe0; }
.se-tone--teal { background: #dcf5f6; color: #13a3b4; }
.se-tasks .se-tone--red { background: #fee5e7; color: #e5484d; }
.se-tasks .se-tone--blue { background: #e6effc; color: #2f6fe0; }

/* ---------- Блок «Какие задачи…» ---------- */

.se-tasks {
    position: relative;
    padding: 26px 20px 48px;
    background: #fff;
    color: var(--se-ink);
}
.se-tasks__inner {
    max-width: 1246px;
    margin: 0 auto;
    padding-left: 8px;
}
.se-tasks .se-tasks__title {
    max-width: 900px;
    margin: 0 0 10px;
    padding: 0;
    color: var(--se-ink);
    font-family: var(--se-font);
    font-size: 34px;
    line-height: 38px;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-transform: none;
}
.se-tasks .se-tasks__intro {
    max-width: 1180px;
    margin: 0 0 28px;
    padding: 0;
    color: #3a4b5e;
    font: 400 16.5px/23px var(--se-font);
    letter-spacing: 0;
}
.se-tasks__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    column-gap: 82px;
    row-gap: 14px;
}
.se-tasks__item {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 34px;
    align-items: start;
}
.se-tasks__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
}
.se-tasks__icon svg { width: 34px; height: 34px; stroke-width: 1.9; }
.se-tasks__copy { padding-top: 2px; max-width: 500px; }
.se-tasks .se-tasks__item-title {
    margin: 0 0 8px;
    padding: 0;
    color: var(--se-ink);
    font-family: var(--se-font);
    font-size: 17.5px;
    line-height: 22px;
    font-weight: 800;
    letter-spacing: -0.1px;
    text-transform: none;
}
.se-tasks .se-tasks__text {
    margin: 0;
    padding: 0;
    color: #56677a;
    font: 400 14.5px/19.5px var(--se-font);
    letter-spacing: 0;
}

/* ---------- Адаптив ---------- */

@media (min-width: 1181px) and (max-width: 1400px) {
    .se-cta__content { width: 640px; }
    .se-cta .se-cta__title { font-size: 38px; line-height: 38px; }
    .se-cta-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .se-cta-form__footer { grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; }
    .se-cta .se-cta-form__submit { width: 260px; }
    .se-cta__visual { left: calc(max(20px, 50% - 623px) + 680px); width: min(676px, calc(100% - max(20px, 50% - 623px) - 680px)); }
    .se-cta__rays--title { display: none; }
}

@media (max-width: 1180px) {
    .se-cta { min-height: 0; padding: 40px 24px 0; }
    .se-cta__content { width: 100%; max-width: 720px; margin: 0 auto; }
    .se-cta-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .se-cta__visual {
        position: relative;
        left: auto;
        bottom: auto;
        width: min(676px, 100%);
        margin: 30px auto 0;
    }
    .se-cta__rays--title { display: none; }
    .se-tasks__grid { column-gap: 48px; }
}

@media (max-width: 900px) {
    .se-tasks { padding: 32px 24px 40px; }
    .se-tasks__inner { padding-left: 0; }
    .se-tasks__grid { grid-template-columns: 1fr; row-gap: 24px; }
    .se-tasks__copy { max-width: none; }
}

@media (max-width: 640px) {
    .se-cta { padding: 32px 16px 0; }
    .se-cta__eyebrow { margin-bottom: 14px; }
    .se-cta .se-cta__title { font-size: 30px; line-height: 33px; letter-spacing: -0.4px; }
    .se-cta .se-cta__subtitle { font-size: 15px; line-height: 22px; }
    .se-cta__subtitle br { display: none; }
    .se-cta-form__grid { grid-template-columns: 1fr; gap: 8px; }
    .se-cta .se-cta-field input { height: 48px; font-size: 16px; }
    .se-cta .se-cta-field textarea { font-size: 16px; padding-top: 14px; min-height: 96px; height: 96px; }
    .se-cta .se-cta-field--message .se-cta-field__icon { top: 24px; }
    .se-cta-form__footer { grid-template-columns: 1fr; gap: 14px; margin-top: 12px; }
    .se-cta .se-cta-form__submit { width: 100%; order: -1; }
    .se-cta__visual { margin-top: 26px; width: calc(100% + 16px); margin-right: -8px; margin-left: -8px; }

    .se-cta-card--2,
    .se-cta-card--3,
    .se-cta__rays--card,
    .se-cta__dots--peach { display: none; }
    .se-cta-card--1 {
        left: 0;
        top: calc(40 * var(--u));
        min-width: 0;
        max-width: 60%;
        gap: 8px;
        padding: 10px 12px;
        border-radius: 12px;
    }
    .se-cta-card--1 .se-cta-card__icon { width: 34px; height: 34px; }
    .se-cta-card--1 .se-cta-card__icon svg { width: 18px; height: 18px; }
    .se-cta-card--1 .se-cta-card__text { font-size: 12px; line-height: 16px; }

    .se-tasks { padding: 28px 16px 36px; }
    .se-tasks .se-tasks__title { font-size: 25px; line-height: 30px; }
    .se-tasks__title br { display: none; }
    .se-tasks .se-tasks__intro { font-size: 15px; line-height: 22px; margin-bottom: 24px; }
    .se-tasks__item { grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; }
    .se-tasks__icon { width: 56px; height: 56px; }
    .se-tasks__icon svg { width: 26px; height: 26px; }
    .se-tasks .se-tasks__item-title { font-size: 17px; margin-bottom: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .se-cta .se-cta-form__submit { transition: none; }
}
