/*
 * SERP Expert 2.0.20 — форма захвата «Подберём SEO-стратегию» / «Калькулятор стоимости».
 * Макет 1933 px перенесён в масштабе 0,8: левая карточка 931 px + форма 487 px,
 * высота 546 px. Иллюстрация масштабируется (--i = 1/485 ширины).
 */

.se-cap {
    --c-ink: #0d1d37;
    --c-text: #455471;
    --c-blue: #2470fa;
    --c-font: var(--font-main, "Manrope", system-ui, sans-serif);
    position: relative;
    overflow: hidden;
    padding: 52px 20px 53px;
    background: linear-gradient(90deg, #f1f4fc 0%, #eef3fc 38%, #e3ecfb 52%, #b4cff7 64%, #5d8ff0 75%, #1f4fbf 84%, #0a2a66 92%, #022152 100%);
    color: var(--c-ink);
    font-family: var(--c-font);
    isolation: isolate;
}
.se-cap *, .se-cap *::before, .se-cap *::after { box-sizing: border-box; }
.se-cap .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-cap__bg { position: absolute; z-index: 0; pointer-events: none; }
.se-cap__bg--wave {
    left: 46%;
    top: -60%;
    width: 820px;
    height: 720px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(120, 164, 245, .75), rgba(150, 190, 250, .35) 60%, transparent);
    transform: rotate(-18deg);
}
.se-cap__bg--glow {
    right: 6%;
    bottom: -45%;
    width: 760px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(70, 130, 245, .75), rgba(40, 90, 220, .25) 60%, transparent);
}
.se-cap__bg--streak {
    right: -40px;
    top: 26%;
    width: 180px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(160, 205, 255, .95), transparent);
    box-shadow: 0 0 14px rgba(120, 180, 255, .9);
    transform: rotate(-42deg);
}
.se-cap__bg--dots {
    right: 14px;
    top: 30%;
    width: 72px;
    height: 150px;
    background-image: radial-gradient(circle, rgba(92, 150, 255, .9) 0 1.6px, transparent 2px);
    background-size: 12px 12px;
    opacity: .8;
}

/* ---------- Сетка ---------- */

.se-cap__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 487px;
    max-width: 1418px;
    margin: 0 auto;
}

/* ---------- Левая карточка ---------- */

.se-cap__card {
    position: relative;
    min-height: 546px;
    padding: 52px 44px 43px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-right: 0;
    border-radius: 20px 0 0 20px;
    background: linear-gradient(180deg, rgba(250, 251, 254, .96) 0%, rgba(243, 247, 253, .94) 100%);
    box-shadow: 0 30px 60px rgba(30, 70, 150, .10);
}
.se-cap__content { position: relative; z-index: 2; }

.se-cap .se-cap__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    color: #7886a0;
    font: 800 11px/16px var(--c-font);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.se-cap__eyebrow::before {
    content: "";
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: #ec0001;
}
.se-cap .se-cap__title {
    margin: 28px 0 0;
    padding: 0;
    color: var(--c-ink);
    font-family: var(--c-font);
    font-size: 37px;
    line-height: 46px;
    font-weight: 800;
    letter-spacing: -0.8px;
    text-transform: none;
    white-space: nowrap;
}
.se-cap .se-cap__text {
    margin: 17px 0 0;
    color: var(--c-text);
    font: 400 15.5px/25.6px var(--c-font);
    letter-spacing: 0;
}

.se-cap .se-cap__features {
    display: grid;
    grid-template-columns: repeat(3, 176px);
    margin: 39px 0 0;
    padding: 0;
    list-style: none;
}
.se-cap .se-cap__feature { margin: 0; padding: 0; list-style: none; }
.se-cap .se-cap__feature::before { content: none; }
.se-cap__feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #e7f0fd;
    color: var(--c-blue);
}
.se-cap__feature-icon svg { width: 27px; height: 27px; stroke-width: 2; }
.se-cap__feature-text {
    display: block;
    margin-top: 9px;
    color: #2a3550;
    font: 400 14px/19px var(--c-font);
}

.se-cap__bottom {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 43px;
}
.se-cap .se-cap__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 320px;
    height: 62px;
    margin: 0;
    padding: 0 64px 0 52px;
    border: 0;
    border-radius: 31px;
    background: linear-gradient(90deg, #d21010 0%, #e0141c 55%, #cc080c 100%);
    box-shadow: 0 14px 28px rgba(210, 16, 16, .28);
    color: #fff;
    font: 700 16px/1 var(--c-font);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.se-cap__btn i,
.se-cap__submit i {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #c3111a;
    transform: translateY(-50%);
}
.se-cap__btn i { right: 20px; width: 35px; height: 35px; }
.se-cap__btn i svg,
.se-cap__submit i svg { width: 55%; height: 55%; stroke-width: 2.4; transition: transform .2s ease; }
.se-cap .se-cap__btn:hover { color: #fff; filter: brightness(1.06); transform: translateY(-1px); }
.se-cap__btn:hover i svg,
.se-cap__submit:hover i svg { transform: translateX(2px); }
.se-cap .se-cap__btn:focus-visible,
.se-cap .se-cap__submit:focus-visible { outline: 3px solid rgba(36, 112, 250, .5); outline-offset: 3px; }

.se-cap .se-cap__support {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0;
    color: #4a5570;
    font: 400 13.5px/21px var(--c-font);
}
.se-cap__support strong { color: var(--c-ink); font-weight: 700; }
.se-cap__support-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: #dbe7fb;
    color: #2a3a60;
}
.se-cap__support-icon svg { width: 20px; height: 20px; }

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

.se-cap__art {
    position: absolute;
    z-index: 1;
    right: -1px;
    top: 68px;
    width: clamp(0px, calc(100% - 544px), 388px);
    aspect-ratio: 485 / 530;
    container-type: inline-size;
    pointer-events: none;
}
.se-cap__art-stage {
    --i: calc(100cqw / 485);
    position: absolute;
    inset: 0;
}
.se-cap__laptop,
.se-cap__art-img { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; object-fit: contain; }

.se-cap__badge {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .95);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 calc(16 * var(--i)) calc(34 * var(--i)) rgba(30, 70, 160, .14);
    color: var(--c-ink);
    font-family: var(--c-font);
}
.se-cap__badge svg { flex: 0 0 auto; color: var(--c-blue); }
.se-cap__badge--growth {
    left: calc(215 * var(--i));
    top: calc(35 * var(--i));
    width: calc(215 * var(--i));
    height: calc(90 * var(--i));
    gap: calc(22 * var(--i));
    padding: 0 calc(16 * var(--i)) 0 calc(25 * var(--i));
    border-radius: calc(14 * var(--i));
}
.se-cap__badge--growth svg { width: calc(34 * var(--i)); height: calc(34 * var(--i)); }
.se-cap__badge--growth > span { display: flex; flex-direction: column; gap: calc(2 * var(--i)); }
.se-cap__badge--growth small { font: 500 calc(16 * var(--i)) / 1.2 var(--c-font); color: #1c2640; }
.se-cap__badge--growth b { font: 800 calc(28 * var(--i)) / 1.1 var(--c-font); letter-spacing: -0.02em; }
.se-cap__badge--leads {
    left: calc(272 * var(--i));
    top: calc(412 * var(--i));
    width: calc(175 * var(--i));
    height: calc(115 * var(--i));
    gap: calc(20 * var(--i));
    padding: 0 calc(14 * var(--i)) 0 calc(25 * var(--i));
    border-radius: calc(14 * var(--i));
    transform: rotate(6deg);
}
.se-cap__badge--leads svg { width: calc(34 * var(--i)); height: calc(34 * var(--i)); }
.se-cap__badge--leads b { font: 800 calc(17 * var(--i)) / calc(24 * var(--i)) var(--c-font); }

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

.se-cap__form {
    position: relative;
    z-index: 2;
    min-height: 546px;
    margin: 0;
    padding: 32px 42px 30px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 24px;
    background: linear-gradient(180deg, #244487 0%, #1a3a7a 45%, #0c2457 100%);
    box-shadow: 0 30px 60px rgba(4, 20, 60, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
    color: #fff;
}
.se-cap .se-cap__form-title {
    margin: 0;
    color: #fff;
    font: 800 29px/36px var(--c-font);
    letter-spacing: -0.4px;
}
.se-cap .se-cap__form-text {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .88);
    font: 400 15px/22.5px var(--c-font);
}
.se-cap__fields {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 22px;
}
.se-cap-field {
    position: relative;
    display: block;
    margin: 0;
}
.se-cap-field__icon {
    position: absolute;
    z-index: 1;
    left: 17px;
    top: 50%;
    width: 19px;
    height: 19px;
    margin-top: -9.5px;
    color: #3c4a66;
    pointer-events: none;
    stroke-width: 1.8;
}
.se-cap-field__chevron {
    position: absolute;
    right: 20px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    color: #3c4a66;
    pointer-events: none;
    stroke-width: 2;
}
.se-cap .se-cap-field input,
.se-cap .se-cap-field select {
    display: block;
    width: 100%;
    height: 46px;
    min-height: 0;
    margin: 0;
    padding: 0 18px 0 49px;
    border: 1px solid #fff;
    border-radius: 23px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 10, 40, .12);
    color: #1c2640;
    font: 400 15px/1.2 var(--c-font);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.se-cap .se-cap-field select { padding-right: 48px; cursor: pointer; text-overflow: ellipsis; }
.se-cap .se-cap-field select:has(option[value=""]:checked) { color: #5f6b80; }
.se-cap .se-cap-field select option { color: #1c2640; }
.se-cap .se-cap-field input::placeholder { color: #5f6b80; opacity: 1; }
.se-cap .se-cap-field input:focus,
.se-cap .se-cap-field select:focus { border-color: #8fb4ff; box-shadow: 0 0 0 3px rgba(143, 180, 255, .45); }

.se-cap__captcha { margin-top: 10px; }

.se-cap .se-cap__submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    margin: 12px 0 0;
    padding: 0 60px;
    border: 0;
    border-radius: 30px;
    background: linear-gradient(90deg, #cf171c 0%, #e0161d 50%, #c70a0f 100%);
    box-shadow: 0 14px 30px rgba(200, 10, 20, .4);
    color: #fff;
    font: 700 15.5px/1 var(--c-font);
    cursor: pointer;
    transition: filter .2s ease, transform .2s ease;
}
.se-cap__submit i { right: 13px; width: 34px; height: 34px; }
.se-cap .se-cap__submit:hover { filter: brightness(1.07); transform: translateY(-1px); }
.se-cap .se-cap__submit:disabled { opacity: .75; cursor: wait; }

.se-cap .se-cap__policy {
    margin: 13px 0 0;
    color: rgba(255, 255, 255, .78);
    font: 400 11px/16px var(--c-font);
}
.se-cap__policy a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.se-cap__policy a:hover { color: #cfe0ff; }
@media (max-width: 640px) { .se-cap__policy br { display: none; } }

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

@media (min-width: 1181px) and (max-width: 1439px) {
    .se-cap__inner { grid-template-columns: minmax(0, 1fr) 440px; }
    .se-cap__form { padding: 32px 30px 30px; }
    .se-cap__art { width: clamp(0px, calc(100% - 520px), 388px); top: 96px; }
    .se-cap__policy br { display: none; }
    .se-cap__form-text br { display: none; }
}

@media (max-width: 1439px) {
    .se-cap .se-cap__title { font-size: 34px; line-height: 43px; }
    .se-cap__text br { display: none; }
    .se-cap .se-cap__text { max-width: 470px; }
}

@media (max-width: 1180px) {
    .se-cap { padding: 44px 20px; }
    .se-cap__inner { grid-template-columns: 1fr; max-width: 920px; gap: 16px; }
    .se-cap__card { border-right: 1px solid rgba(255, 255, 255, .9); border-radius: 20px; min-height: 0; }
    .se-cap__form { min-height: 0; }
    .se-cap__form-text br { display: none; }
    .se-cap__art { width: clamp(0px, calc(100% - 520px), 360px); top: 50px; }
}

@media (max-width: 860px) {
    .se-cap__art { display: none; }
    .se-cap .se-cap__title { white-space: normal; }
}

@media (max-width: 640px) {
    .se-cap { padding: 32px 14px; }
    .se-cap__card { padding: 30px 20px 28px; }
    .se-cap .se-cap__title { font-size: 28px; line-height: 34px; margin-top: 18px; }
    .se-cap__title br { display: none; }
    .se-cap .se-cap__text { font-size: 15px; line-height: 23px; }
    .se-cap .se-cap__features { grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }
    .se-cap .se-cap__feature { display: flex; align-items: center; gap: 14px; }
    .se-cap__feature-icon { flex: 0 0 48px; width: 48px; height: 48px; }
    .se-cap__feature-text { margin-top: 0; }
    .se-cap__feature-text br { display: none; }
    .se-cap__bottom { flex-direction: column; align-items: stretch; gap: 18px; margin-top: 28px; }
    .se-cap .se-cap__btn { width: 100%; justify-content: center; padding: 0 60px; }
    .se-cap__form { padding: 26px 18px 24px; border-radius: 20px; }
    .se-cap .se-cap__form-title { font-size: 24px; line-height: 30px; }
    .se-cap__form-text br { display: none; }
    .se-cap .se-cap-field input,
    .se-cap .se-cap-field select { height: 50px; font-size: 16px; border-radius: 25px; }
}