/* =========================================================
   SOULULAB - SITE AUDIT OFFER / FRONT V4
   Типографику h2 / h3 / p НЕ переопределяем.
   Используем существующие Montserrat + gls-section-title /
   gls-section-text / soul-chip / soul-form / soul-btn.
   ========================================================= */

.sla-offer {
    padding: 118px 0;
}


/* =========================================================
   LAYOUT ISOLATION
   Outer wrapper is intentionally a DIV, not SECTION.
   This prevents the global form.css rule
   section:has(form.soul-form) from rebuilding this component
   into the generic 2-column request layout.
   ========================================================= */


.sla-offer > .soul-container {
    display: block;
    width: min(calc(100% - 160px), var(--soul-container));
    max-width: var(--soul-container);
    margin-inline: auto;
}

.sla-offer__usp,
.sla-offer__brief {
    width: 100%;
    min-width: 0;
}

.sla-offer [hidden] {
    display: none !important;
}

/* =========================================================
   1. УТП - ВСЕГДА BASE / SKY TITANIUM
   ========================================================= */

.sla-offer__usp {
    --sla-rgb: var(--base-rgb);
    --sla-soft-rgb: var(--base-soft-rgb);
    --sla-end-rgb: var(--base-end-rgb);

    position: relative;
    isolation: isolate;

    padding: clamp(28px, 4.2vw, 54px);
    border: 1px solid rgba(var(--base-rgb), .26);
    border-radius: var(--radius-lg);

    background:
        radial-gradient(circle at 12% 4%, rgba(255,255,255,.88), transparent 34%),
        linear-gradient(
            145deg,
            rgba(255,255,255,.82) 0%,
            rgba(255,255,255,.62) 42%,
            rgba(var(--base-rgb),.10) 72%,
            rgba(var(--base-end-rgb),.16) 100%
        );

    box-shadow:
        0 26px 64px rgba(63,78,92,.09),
        inset 0 1px 0 rgba(255,255,255,.96);

    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.sla-offer__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(245px, 310px);
    gap: clamp(28px, 5vw, 70px);
    align-items: end;
}

.sla-offer__copy .soul-chip {
    margin-bottom: 22px;
}

.sla-offer__copy .soul-section__title {
    max-width: 900px;
    margin-bottom: 20px;
}

.sla-offer__copy .soul-section__text {
    max-width: 900px;
    margin: 0;
}

.sla-offer__capacity {
    padding: 22px;
    border: 1px solid rgba(var(--base-rgb), .28);
    border-radius: 24px;

    background:
        linear-gradient(145deg, rgba(255,255,255,.90), rgba(var(--base-rgb),.10));

    box-shadow:
        0 14px 34px rgba(var(--base-rgb),.12),
        inset 0 1px 0 rgba(255,255,255,.96);
}

.sla-offer__capacity-label,
.sla-offer__capacity-foot {
    color: var(--soul-muted);
    font-size: var(--font-small-size);
    font-weight: var(--font-small-weight);
    line-height: var(--font-small-line);
}

.sla-offer__capacity-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 10px 0 14px;
}

.sla-offer__capacity-main strong {
    color: rgb(var(--base-rgb));
    font-size: 34px;
    line-height: 1;
}

.sla-offer__capacity-main span {
    color: var(--soul-text);
    font-weight: 700;
}

.sla-offer__progress {
    height: 8px;
    overflow: hidden;
    margin-bottom: 10px;
    border-radius: 999px;
    background: rgba(80,91,103,.10);
}

.sla-offer__progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(var(--base-rgb),.58), rgb(var(--base-rgb)));
    transition: width .5s ease;
}

.sla-offer__results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 16px;
    margin-top: 34px;
}

.sla-offer__result-card,
.sla-offer__audit-item {
    border: 1px solid rgba(var(--base-rgb), .18);
    background: rgba(255,255,255,.56);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}

.sla-offer__result-card {
    position: relative;
    min-height: 150px;
    padding: 24px 24px 22px 78px;
    border-radius: 24px;
}

.sla-offer__result-number {
    position: absolute;
    top: 25px;
    left: 24px;
    color: rgb(var(--base-rgb));
    font-weight: 800;
}

.sla-offer__result-card h3,
.sla-offer__audit-item h3 {
    margin-bottom: 9px;
}

.sla-offer__result-card p,
.sla-offer__audit-item p {
    margin-bottom: 0;
    color: var(--soul-muted);
}

.sla-offer__audit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
    margin-top: 16px;
}

.sla-offer__audit-item {
    padding: 22px;
    border-radius: 22px;
}

.sla-offer__audit-item > span {
    display: block;
    margin-bottom: 10px;
    color: rgb(var(--base-rgb));
    font-size: var(--font-small-size);
    font-weight: 700;
}

/* =========================================================
   2. ФУНКЦИОНАЛЬНАЯ ЧАСТЬ / БРИФ
   До выбора - Base. После выбора цвет только этой части.
   ========================================================= */

.sla-offer__brief {
    --sla-rgb: var(--base-rgb);
    --sla-soft-rgb: var(--base-soft-rgb);
    --sla-end-rgb: var(--base-end-rgb);
    --theme-rgb: var(--sla-rgb);
    --theme-soft-rgb: var(--sla-soft-rgb);
    --theme-end-rgb: var(--sla-end-rgb);
    --soul-accent: rgb(var(--sla-rgb));

    margin-top: 42px;
    padding: clamp(26px, 3.6vw, 44px);

    border: 1px solid rgba(var(--sla-rgb),.18);
    border-radius: var(--radius-lg);

    background:
        linear-gradient(145deg, rgba(255,255,255,.67), rgba(var(--sla-soft-rgb),.30));

    box-shadow:
        0 18px 48px rgba(55,68,82,.065),
        inset 0 1px 0 rgba(255,255,255,.94);

    transition:
        border-color .28s ease,
        background .28s ease,
        box-shadow .28s ease;
}

.sla-offer__brief[data-theme="nko"] {
    --sla-rgb: var(--nko-rgb);
    --sla-soft-rgb: 241, 234, 248;
    --sla-end-rgb: 202, 205, 211;
}

.sla-offer__brief[data-theme="business"] {
    --sla-rgb: var(--business-rgb);
    --sla-soft-rgb: 255, 238, 225;
    --sla-end-rgb: 202, 205, 211;
}

.sla-offer__brief[data-theme="experts"] {
    --sla-rgb: var(--experts-rgb);
    --sla-soft-rgb: 239, 251, 234;
    --sla-end-rgb: 202, 205, 211;
}

.sla-offer__brief[data-theme] {
    border-color: rgba(var(--sla-rgb),.30);
    background:
        radial-gradient(circle at 8% 2%, rgba(255,255,255,.82), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.74), rgba(var(--sla-soft-rgb),.48));
    box-shadow:
        0 20px 52px rgba(var(--sla-rgb),.09),
        inset 0 1px 0 rgba(255,255,255,.96);
}

.sla-offer__divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    margin-bottom: 30px;
    color: var(--soul-muted);
}

.sla-offer__divider span {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(91,104,116,.22), transparent);
}

.sla-offer__divider strong {
    font-size: var(--font-small-size);
    font-weight: 700;
}

.sla-offer__niche-head {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    align-items: end;
}

.sla-offer__niche-head .soul-chip,
.sla-offer__form-head .soul-chip,
.sla-offer__extended-head .soul-chip {
    margin-bottom: 15px;
}

.sla-offer__niche-head h3,
.sla-offer__form-head h3,
.sla-offer__extended-head h3 {
    margin-bottom: 0;
}

.sla-offer__niche-head p,
.sla-offer__form-head p {
    max-width: 520px;
    margin: 0;
    color: var(--soul-muted);
}

.sla-offer__niches {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
    margin-top: 18px;
}

.sla-offer__niche {
    --niche-rgb: var(--base-rgb);

    min-height: 84px;
    padding: 16px 18px;
    text-align: left;

    border: 1px solid rgba(82,95,108,.16);
    border-radius: 19px;

    background:
        linear-gradient(145deg, rgba(255,255,255,.86), rgba(226,234,239,.54));

    color: var(--soul-text);
    font-family: inherit;
    cursor: pointer;

    box-shadow: inset 0 1px 0 rgba(255,255,255,.96);

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.sla-offer__niche--nko { --niche-rgb: var(--nko-rgb); }
.sla-offer__niche--business { --niche-rgb: var(--business-rgb); }
.sla-offer__niche--experts { --niche-rgb: var(--experts-rgb); }

.sla-offer__niche:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--niche-rgb),.34);
    box-shadow:
        0 10px 22px rgba(var(--niche-rgb),.08),
        inset 0 1px 0 rgba(255,255,255,.96);
}

.sla-offer__niche.is-active {
    border-color: rgba(var(--niche-rgb),.48);
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(var(--niche-rgb),.17));
    box-shadow:
        0 12px 28px rgba(var(--niche-rgb),.14),
        inset 0 1px 0 rgba(255,255,255,1);
}

.sla-offer__niche > span,
.sla-offer__niche > small {
    display: block;
}

.sla-offer__niche > span {
    font-weight: 700;
}

.sla-offer__niche > small {
    margin-top: 5px;
    color: var(--soul-muted);
}

/* =========================================================
   FORM REVEAL
   ========================================================= */

.sla-offer__form-card {
    margin-top: 22px;
    padding-top: 28px;
    border-top: 1px solid rgba(var(--sla-rgb),.20);
}

.sla-offer__form-card.is-revealing {
    animation: slaOfferReveal .30s ease both;
}

@keyframes slaOfferReveal {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.sla-offer__form-head {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 28px;
    align-items: end;
    margin-bottom: 26px;
}

.sla-offer__mode-switch {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 5px;
    padding: 5px;

    border: 1px solid rgba(var(--sla-rgb),.20);
    border-radius: 15px;
    background: rgba(235,241,245,.70);
}

.sla-offer__mode {
    min-height: 42px;
    padding: 9px 15px;

    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;

    color: var(--soul-muted);
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
}

.sla-offer__mode.is-active {
    color: var(--soul-text);
    border-color: rgba(var(--sla-rgb),.38);
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(var(--sla-rgb),.14));
    box-shadow: 0 6px 16px rgba(var(--sla-rgb),.09);
}

/* Используем существующую форму сайта. Здесь только снимаем max-width. */
form.soul-form.sla-offer__form {
    max-width: none;
    padding: clamp(22px, 3vw, 34px);
    border-color: rgba(var(--sla-rgb),.24);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.90) 0%,
            rgba(255,255,255,.72) 36%,
            rgba(var(--sla-soft-rgb),.42) 70%,
            rgba(var(--sla-rgb),.13) 100%
        );
    box-shadow:
        0 24px 48px rgba(36,42,54,.09),
        0 0 24px rgba(var(--sla-rgb),.09),
        inset 0 1px 0 rgba(255,255,255,.90);
}

form.soul-form.sla-offer__form .soul-form__grid {
    margin-bottom: 16px;
}

form.soul-form.sla-offer__form label > small {
    color: var(--soul-muted);
    font-size: var(--font-small-size);
    font-weight: var(--font-small-weight);
    line-height: var(--font-small-line);
}

.sla-offer__fieldset {
    margin: 0 0 24px;
    padding: 0;
    border: 0;
}

.sla-offer__fieldset legend {
    margin-bottom: 12px;
    color: var(--soul-text);
    font-weight: 700;
}

.sla-offer__fieldset--compact {
    margin-top: 20px;
}

.sla-offer__choice-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
}

.sla-offer__choice {
    position: relative;
    cursor: pointer;
}

.sla-offer__choice input {
    position: absolute !important;
    opacity: 0;
    pointer-events: none;
}

.sla-offer__choice > span {
    min-height: 86px;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    padding: 15px;

    border: 1px solid rgba(82,95,108,.17);
    border-radius: 17px;
    background: rgba(255,255,255,.58);

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.sla-offer__choice strong {
    color: var(--soul-text);
}

.sla-offer__choice small {
    margin-top: 5px;
    color: var(--soul-muted);
}

.sla-offer__choice input:checked + span {
    border-color: rgba(var(--sla-rgb),.46);
    background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(var(--sla-rgb),.13));
    box-shadow: 0 8px 20px rgba(var(--sla-rgb),.09);
}

.sla-offer__extended {
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid rgba(var(--sla-rgb),.17);
}

.sla-offer__extended-head {
    margin-bottom: 22px;
}

.sla-offer__niche-fields {
    margin: 18px 0;
    padding: 20px;

    border: 1px solid rgba(var(--sla-rgb),.18);
    border-radius: 20px;
    background: rgba(255,255,255,.44);
}

.sla-offer__niche-fields h4 {
    margin: 0 0 16px;
}

.sla-offer__checks {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
}

.sla-offer__checks label {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    align-items: center;

    min-height: 40px;
    padding: 9px 11px;

    border: 1px solid rgba(82,95,108,.14);
    border-radius: 12px;
    background: rgba(255,255,255,.56);

    cursor: pointer;
}

.sla-offer__checks input {
    width: auto !important;
    height: auto !important;
    margin: 0;
    accent-color: rgb(var(--sla-rgb));
}

.sla-offer__upload {
    margin: 2px 0 22px;
}

.sla-offer__consent {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    align-items: flex-start;
    margin-top: 22px;
    color: var(--soul-muted) !important;
}

.sla-offer__consent input {
    width: auto !important;
    height: auto !important;
    margin-top: 3px;
    accent-color: rgb(var(--sla-rgb));
}

.sla-offer__consent a {
    color: inherit;
    text-decoration: underline;
}

.sla-offer__submit-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 24px;
    align-items: center;
    margin-top: 22px;
}

.sla-offer__submit-note {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sla-offer__submit-note span {
    color: var(--soul-muted);
}

.sla-offer__submit {
    min-width: 220px;
    --theme-rgb: var(--sla-rgb);
    --theme-soft-rgb: var(--sla-soft-rgb);
    --theme-end-rgb: var(--sla-end-rgb);

    border-color: rgba(var(--sla-rgb),.46) !important;
}

.sla-offer__submit:hover {
    border-color: rgba(var(--sla-rgb),.72) !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {
    .sla-offer__top {
        grid-template-columns: 1fr;
    }

    .sla-offer__capacity {
        max-width: 390px;
    }

    .sla-offer__audit-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .sla-offer__niches {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .sla-offer {
        padding: 82px 0;
    }

    .sla-offer__usp,
    .sla-offer__brief {
        padding: 22px 16px;
        border-radius: 26px;
    }

    .sla-offer__results,
    .sla-offer__audit-grid,
    .sla-offer__choice-grid,
    .sla-offer__checks {
        grid-template-columns: 1fr;
    }

    .sla-offer__result-card {
        padding-left: 58px;
    }

    .sla-offer__result-number {
        left: 18px;
    }

    .sla-offer__niche-head,
    .sla-offer__form-head {
        display: block;
    }

    .sla-offer__niche-head p {
        margin-top: 14px;
    }

    .sla-offer__mode-switch {
        margin-top: 16px;
    }

    .sla-offer__submit-row {
        grid-template-columns: 1fr;
    }

    .sla-offer__submit {
        width: 100%;
        min-width: 0;
    }
}


@media (max-width: 1180px) {
    .sla-offer > .soul-container {
        width: min(calc(100% - 112px), var(--soul-container));
    }
}

@media (max-width: 860px) {
    .sla-offer > .soul-container {
        width: min(calc(100% - 48px), var(--soul-container));
    }
}

@media (max-width: 560px) {
    .sla-offer > .soul-container {
        width: min(calc(100% - 28px), var(--soul-container));
    }
}

/* =========================================================
   FRONT V5 - VISUAL ALIGNMENT + RELIABLE FORM REVEAL
   ========================================================= */

/* Верхнее УТП всегда остаётся в базовой Sky Titanium теме,
   независимо от выбранного направления на главной. */
.sla-offer__usp {
    --sla-rgb: 148, 184, 207;
    --sla-soft-rgb: 231, 242, 248;
    --sla-end-rgb: 196, 202, 209;
}

/* Заголовок - тот же класс и та же типографика, что у H2
   .gls-section-title на главной. Размер/шрифт здесь не задаём. */
.sla-offer__copy .gls-section-title {
    max-width: 980px;
    margin: 0 0 28px !important;
}

.sla-offer__copy .soul-section__text {
    max-width: 900px;
    margin: 0 !important;
}

/* Лимит - выше и визуально ближе к центру композиции. */
.sla-offer__top {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 310px);
    align-items: center;
}

.sla-offer__capacity {
    align-self: center;
    transform: translateY(-8px);
    padding: 22px 22px 20px;
    border-color: rgba(148, 184, 207, .34);
    background:
        radial-gradient(circle at 18% 4%, rgba(255,255,255,.98), transparent 46%),
        linear-gradient(145deg,
            rgba(255,255,255,.78) 0%,
            rgba(231,242,248,.62) 54%,
            rgba(196,202,209,.30) 100%);
    box-shadow:
        0 18px 42px rgba(84,112,132,.12),
        inset 0 1px 0 rgba(255,255,255,.98),
        inset 0 -1px 0 rgba(148,184,207,.10);
    backdrop-filter: blur(20px) saturate(1.08);
    -webkit-backdrop-filter: blur(20px) saturate(1.08);
}

.sla-offer__capacity-main strong,
.sla-offer__result-number,
.sla-offer__audit-item > span {
    color: rgb(105, 145, 171);
}

.sla-offer__progress span {
    background: linear-gradient(90deg, rgba(148,184,207,.56), rgb(105,145,171));
}

/* 01 / 02 - более выраженное стекло с переливом базовой темы. */
.sla-offer__result-card {
    overflow: hidden;
    border: 1px solid rgba(148,184,207,.30);
    background:
        radial-gradient(circle at 12% 0%, rgba(255,255,255,.98), transparent 42%),
        linear-gradient(135deg,
            rgba(255,255,255,.72) 0%,
            rgba(231,242,248,.56) 48%,
            rgba(148,184,207,.16) 100%);
    box-shadow:
        0 18px 42px rgba(82,110,130,.10),
        inset 0 1px 0 rgba(255,255,255,.98),
        inset 0 -1px 0 rgba(148,184,207,.10);
    backdrop-filter: blur(18px) saturate(1.06);
    -webkit-backdrop-filter: blur(18px) saturate(1.06);
}

.sla-offer__result-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(112deg,
        rgba(255,255,255,.18) 0%,
        rgba(255,255,255,0) 38%,
        rgba(148,184,207,.08) 66%,
        rgba(255,255,255,.22) 100%);
}

/* Нижние четыре пункта - более воздушное выпуклое стекло. */
.sla-offer__audit-item {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(148,184,207,.24);
    background:
        radial-gradient(circle at 16% 0%, rgba(255,255,255,.96), transparent 44%),
        linear-gradient(145deg,
            rgba(255,255,255,.62),
            rgba(231,242,248,.40) 58%,
            rgba(196,202,209,.16));
    box-shadow:
        0 14px 34px rgba(83,107,124,.075),
        inset 0 1px 0 rgba(255,255,255,.97),
        inset 0 -1px 0 rgba(148,184,207,.08);
    backdrop-filter: blur(16px) saturate(1.04);
    -webkit-backdrop-filter: blur(16px) saturate(1.04);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.sla-offer__audit-item:hover {
    transform: translateY(-2px);
    border-color: rgba(148,184,207,.38);
    box-shadow:
        0 20px 42px rgba(83,107,124,.11),
        inset 0 1px 0 rgba(255,255,255,1);
}

/* Кнопки выбора направления: цвет темы проявляется уже на hover. */
.sla-offer__niche:hover {
    transform: translateY(-2px);
    color: var(--soul-text);
    border-color: rgba(var(--niche-rgb), .56);
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.98), transparent 50%),
        linear-gradient(145deg,
            rgba(255,255,255,.90),
            rgba(var(--niche-rgb), .14));
    box-shadow:
        0 14px 30px rgba(var(--niche-rgb), .14),
        inset 0 1px 0 rgba(255,255,255,1);
}

.sla-offer__niche.is-active {
    transform: translateY(-2px);
    border-color: rgba(var(--niche-rgb), .72);
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.98), transparent 50%),
        linear-gradient(145deg,
            rgba(255,255,255,.94),
            rgba(var(--niche-rgb), .22));
    box-shadow:
        0 16px 34px rgba(var(--niche-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(var(--niche-rgb),.08);
}

/* Форма раскрывается классом, а не HTML hidden.
   Это исключает конфликт с глобальными правилами сайта. */
.sla-offer__form-card {
    display: none;
}

.sla-offer__form-card.is-open {
    display: block;
}

.sla-offer__form-card[aria-hidden="false"] {
    display: block;
}

@media (max-width: 900px) {
    .sla-offer__top {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .sla-offer__capacity {
        width: min(100%, 420px);
        transform: none;
    }
}

/* =========================================================
   FRONT V6 - FORM LAYOUT / THEME / RESPONSIVE FINAL PATCH
   ========================================================= */

/* Section marker between USP and functional brief */
.sla-offer__brief-marker {
    display: grid;
    grid-template-columns: minmax(24px, 1fr) auto minmax(24px, 1fr);
    gap: 14px;
    align-items: center;
    margin: 0 0 30px;
}

.sla-offer__brief-marker-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--sla-rgb), .28), transparent);
}

.sla-offer__brief-marker-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 14px;
    border: 1px solid rgba(var(--sla-rgb), .22);
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(var(--sla-rgb),.08));
    box-shadow: 0 7px 18px rgba(var(--sla-rgb), .06), inset 0 1px 0 rgba(255,255,255,.96);
    color: rgba(34,27,44,.72);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* Functional card: true full width, even against global form.css */
.sla-offer__form-card,
.sla-offer__form-card.is-open,
.sla-offer__form-card[aria-hidden="false"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

.sla-offer__form-card.is-open {
    margin-top: 28px;
    padding: clamp(24px, 3.2vw, 38px);
    border: 1px solid rgba(var(--sla-rgb), .26);
    border-radius: 28px;
    background:
        radial-gradient(circle at 8% 0%, rgba(255,255,255,.90), transparent 34%),
        linear-gradient(145deg,
            rgba(255,255,255,.72) 0%,
            rgba(var(--sla-soft-rgb),.32) 68%,
            rgba(var(--sla-rgb),.08) 100%);
    box-shadow:
        0 22px 54px rgba(var(--sla-rgb), .075),
        inset 0 1px 0 rgba(255,255,255,.96);
    backdrop-filter: blur(18px) saturate(1.06);
    -webkit-backdrop-filter: blur(18px) saturate(1.06);
}

.sla-offer__form-head {
    margin: 0 0 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(var(--sla-rgb), .16);
}

.sla-offer__form-head > div:first-child {
    min-width: 0;
}

.sla-offer__form-head h3 {
    max-width: 760px;
    margin: 0 0 8px;
}

.sla-offer__form-head p {
    max-width: 780px;
}

/* The actual form must occupy the whole card. */
form.soul-form.sla-offer__form {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: clamp(24px, 3vw, 36px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
    border: 1px solid rgba(var(--sla-rgb), .22) !important;
    border-radius: 26px !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(255,255,255,.98), transparent 36%),
        linear-gradient(145deg,
            rgba(255,255,255,.86) 0%,
            rgba(255,255,255,.70) 38%,
            rgba(var(--sla-soft-rgb),.38) 72%,
            rgba(var(--sla-rgb),.10) 100%) !important;
    box-shadow:
        0 22px 48px rgba(36,42,54,.075),
        0 0 26px rgba(var(--sla-rgb),.07),
        inset 0 1px 0 rgba(255,255,255,.96) !important;
}

/* Desktop field grids */
form.soul-form.sla-offer__form .soul-form__grid {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 20px !important;
    margin: 0 !important;
}

form.soul-form.sla-offer__form .sla-offer__field--wide {
    width: 100% !important;
    min-width: 0 !important;
}

form.soul-form.sla-offer__form textarea {
    min-height: 126px;
}

/* Result choice cards */
.sla-offer__fieldset {
    width: 100%;
    min-width: 0;
    margin: 0 !important;
}

.sla-offer__fieldset legend {
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 700;
}

.sla-offer__choice-grid--results {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.sla-offer__choice > span {
    min-height: 104px;
    padding: 18px;
    border-color: rgba(var(--sla-rgb), .14);
    background:
        linear-gradient(145deg, rgba(255,255,255,.82), rgba(var(--sla-rgb),.035));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96);
}

.sla-offer__choice:hover > span {
    border-color: rgba(var(--sla-rgb), .34);
    background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(var(--sla-rgb),.09));
    box-shadow: 0 10px 24px rgba(var(--sla-rgb),.075), inset 0 1px 0 rgba(255,255,255,1);
}

.sla-offer__choice input:checked + span {
    border-color: rgba(var(--sla-rgb), .54);
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.98), transparent 50%),
        linear-gradient(145deg, rgba(255,255,255,.92), rgba(var(--sla-rgb),.16));
    box-shadow: 0 12px 28px rgba(var(--sla-rgb),.12), inset 0 1px 0 rgba(255,255,255,1);
}

/* Upload spans full width and inherits the selected theme */
.sla-offer__upload {
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 18px;
    border: 1px solid rgba(var(--sla-rgb), .14);
    border-radius: 20px;
    background: rgba(255,255,255,.36);
}

.sla-offer__upload .soulu-upload__drop {
    min-height: 145px;
    border-color: rgba(var(--sla-rgb), .34);
    background:
        linear-gradient(145deg, rgba(255,255,255,.66), rgba(var(--sla-rgb),.045));
}

.sla-offer__upload .soulu-upload__drop:hover {
    border-color: rgba(var(--sla-rgb), .60);
    box-shadow: 0 0 22px rgba(var(--sla-rgb), .10);
}

/* Extended brief becomes a full-width nested glass section */
.sla-offer__extended {
    width: 100%;
    min-width: 0;
    margin: 4px 0 0 !important;
    padding: 26px 0 0 !important;
    border-top: 1px solid rgba(var(--sla-rgb), .18) !important;
}

.sla-offer__extended-head {
    margin-bottom: 22px;
}

.sla-offer__extended-head h3 {
    max-width: 760px;
}

.sla-offer__niche-fields {
    width: 100%;
    min-width: 0;
    margin: 20px 0 !important;
    padding: clamp(20px, 2.5vw, 28px) !important;
    border: 1px solid rgba(var(--sla-rgb), .22) !important;
    border-radius: 22px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.58), rgba(var(--sla-rgb),.055)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.94);
}

/* Functional feature checkboxes only. Never touches personal-data consent. */
form.soul-form.sla-offer__form .sla-offer__checks {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

form.soul-form.sla-offer__form .sla-offer__checks label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0;
    min-height: 54px;
    padding: 11px 12px !important;
    border: 1px solid rgba(var(--sla-rgb), .14);
    border-radius: 14px;
    background: rgba(255,255,255,.54);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

form.soul-form.sla-offer__form .sla-offer__checks label:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--sla-rgb), .36);
    background: rgba(255,255,255,.78);
    box-shadow: 0 8px 18px rgba(var(--sla-rgb), .07), inset 0 1px 0 rgba(255,255,255,1);
}

form.soul-form.sla-offer__form .sla-offer__checks input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    flex: 0 0 19px !important;
    width: 19px !important;
    min-width: 19px !important;
    max-width: 19px !important;
    height: 19px !important;
    min-height: 19px !important;
    max-height: 19px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(var(--sla-rgb), .46) !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,.74) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96) !important;
    cursor: pointer;
    position: relative;
}

form.soul-form.sla-offer__form .sla-offer__checks input[type="checkbox"]:checked {
    border-color: rgba(var(--sla-rgb), .82) !important;
    background: rgba(var(--sla-rgb), .18) !important;
    box-shadow: 0 0 0 3px rgba(var(--sla-rgb), .08) !important;
}

form.soul-form.sla-offer__form .sla-offer__checks input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 3px;
    width: 6px;
    height: 9px;
    border-right: 2px solid rgb(var(--sla-rgb));
    border-bottom: 2px solid rgb(var(--sla-rgb));
    transform: rotate(42deg);
}

form.soul-form.sla-offer__form .sla-offer__checks label > span {
    display: block !important;
    min-width: 0;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

/* Personal-data consent: explicitly use existing compact SOULULAB component. */
form.soul-form.sla-offer__form .soulu-form-consent.sla-offer__consent {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

form.soul-form.sla-offer__form .soulu-form-consent__input {
    position: absolute !important;
    width: 1px !important;
    min-width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

form.soul-form.sla-offer__form .soulu-form-consent__box {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 1px 0 0 !important;
    padding: 0 !important;
    color: rgb(var(--sla-rgb)) !important;
    border-color: rgba(var(--sla-rgb), .40) !important;
    background: rgba(255,255,255,.62) !important;
}

form.soul-form.sla-offer__form .soulu-form-consent__text,
form.soul-form.sla-offer__form .soulu-form-consent__text * {
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}

/* Submit area */
.sla-offer__submit-row {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) !important;
    gap: 28px !important;
    margin-top: 4px !important;
    padding-top: 22px;
    border-top: 1px solid rgba(var(--sla-rgb), .16);
}

.sla-offer__submit-note strong {
    font-size: 13px;
    font-weight: 700;
}

.sla-offer__submit-note span {
    max-width: 620px;
    font-size: 13px;
    line-height: 1.5;
}

/* Force theme-aware submit button, overriding global purple/metal accents. */
form.soul-form.sla-offer__form .sla-offer__submit {
    --theme-rgb: var(--sla-rgb) !important;
    --theme-soft-rgb: var(--sla-soft-rgb) !important;
    --theme-end-rgb: var(--sla-end-rgb) !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    border: 1px solid rgba(var(--sla-rgb), .58) !important;
    border-radius: 15px !important;
    background:
        linear-gradient(115deg, transparent 0%, transparent 16%, rgba(255,255,255,.22) 32%, rgba(255,255,255,.05) 47%, transparent 62%),
        linear-gradient(145deg,
            rgba(var(--sla-rgb), .94) 0%,
            rgba(var(--sla-rgb), .78) 45%,
            rgba(var(--sla-rgb), .66) 100%) !important;
    box-shadow:
        0 14px 28px rgba(var(--sla-rgb), .20),
        0 0 18px rgba(var(--sla-rgb), .10),
        inset 0 1px 0 rgba(255,255,255,.30),
        inset 0 -1px 0 rgba(20,25,32,.12) !important;
    color: #fff !important;
}

form.soul-form.sla-offer__form .sla-offer__submit:hover {
    border-color: rgba(var(--sla-rgb), .82) !important;
    background:
        linear-gradient(115deg, transparent 0%, transparent 14%, rgba(255,255,255,.62) 30%, rgba(255,255,255,.18) 43%, transparent 60%),
        linear-gradient(145deg,
            rgba(255,255,255,.82) 0%,
            rgba(var(--sla-rgb), .30) 35%,
            rgba(var(--sla-rgb), .48) 100%) !important;
    color: rgba(31,36,44,.94) !important;
    box-shadow:
        0 16px 32px rgba(var(--sla-rgb), .22),
        0 0 24px rgba(var(--sla-rgb), .18),
        inset 0 1px 0 rgba(255,255,255,.96) !important;
}

/* Mode switch follows selected theme */
.sla-offer__mode-switch {
    min-width: 210px;
    border-color: rgba(var(--sla-rgb), .24);
    background: linear-gradient(145deg, rgba(255,255,255,.50), rgba(var(--sla-rgb),.055));
}

.sla-offer__mode:hover {
    color: var(--soul-text);
    background: rgba(var(--sla-rgb), .07);
}

.sla-offer__mode.is-active {
    border-color: rgba(var(--sla-rgb), .48);
    background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(var(--sla-rgb),.16));
    box-shadow: 0 7px 18px rgba(var(--sla-rgb), .10), inset 0 1px 0 rgba(255,255,255,.96);
}

/* TABLET */
@media (max-width: 980px) {
    .sla-offer__form-card.is-open {
        padding: 26px;
    }

    form.soul-form.sla-offer__form .sla-offer__checks {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .sla-offer__submit-row {
        grid-template-columns: 1fr !important;
    }

    .sla-offer__submit {
        max-width: 360px;
    }
}

/* MOBILE */
@media (max-width: 720px) {
    .sla-offer__brief-marker {
        grid-template-columns: minmax(16px, 1fr) auto minmax(16px, 1fr);
        gap: 10px;
        margin-bottom: 22px;
    }

    .sla-offer__brief-marker-text {
        min-height: 30px;
        padding: 6px 11px;
        font-size: 11px;
    }

    .sla-offer__form-card.is-open {
        margin-top: 20px;
        padding: 16px;
        border-radius: 22px;
    }

    .sla-offer__form-head {
        display: block;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .sla-offer__form-head h3 {
        margin-bottom: 8px;
    }

    .sla-offer__mode-switch {
        width: 100%;
        min-width: 0;
        margin-top: 18px;
    }

    form.soul-form.sla-offer__form {
        padding: 18px !important;
        gap: 18px !important;
        border-radius: 20px !important;
    }

    form.soul-form.sla-offer__form .soul-form__grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .sla-offer__choice-grid--results {
        grid-template-columns: 1fr !important;
    }

    .sla-offer__choice > span {
        min-height: 86px;
    }

    .sla-offer__upload {
        padding: 12px;
    }

    form.soul-form.sla-offer__form .sla-offer__checks {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    form.soul-form.sla-offer__form .sla-offer__checks label {
        min-height: 50px;
        padding: 9px 10px !important;
    }

    .sla-offer__niche-fields {
        padding: 16px !important;
    }

    .sla-offer__submit {
        width: 100% !important;
        max-width: none;
    }
}

@media (max-width: 430px) {
    .sla-offer__form-card.is-open {
        padding: 12px;
    }

    form.soul-form.sla-offer__form {
        padding: 15px !important;
    }

    form.soul-form.sla-offer__form .sla-offer__checks {
        grid-template-columns: 1fr !important;
    }

    .sla-offer__brief-marker-line {
        display: none;
    }

    .sla-offer__brief-marker {
        display: block;
    }
}

/* =========================================================
   FRONT V7 - FINAL LAYOUT / GLASS / BRIEF SYNC
   Сверено с актуальными form.css, 04-typography.css,
   site-solutions.css и logo-picker.js главной страницы.
   ========================================================= */

/* ---------- H2 exactly from current SOULULAB typography ---------- */
.sla-offer__copy .gls-section-title.soul-section__title {
    max-width: 980px;
    margin: 0 0 30px !important;
    font-family: var(--font-main) !important;
    font-size: var(--font-h2-size) !important;
    font-weight: var(--font-h2-weight) !important;
    line-height: var(--font-h2-line) !important;
    letter-spacing: var(--font-h2-letter) !important;
}

.sla-offer__copy .soul-section__text {
    max-width: 900px;
    margin: 0 !important;
}

/* ---------- 01 / 02: deliberately more expressive than audit cards ---------- */
.sla-offer__result-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 164px;
    border-color: rgba(var(--base-rgb), .38) !important;
    background:
        radial-gradient(circle at 12% -12%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.34) 37%, transparent 60%),
        linear-gradient(128deg,
            rgba(255,255,255,.78) 0%,
            rgba(var(--base-soft-rgb),.70) 34%,
            rgba(var(--base-rgb),.22) 72%,
            rgba(var(--base-end-rgb),.30) 100%) !important;
    box-shadow:
        0 22px 46px rgba(77,103,122,.14),
        0 0 30px rgba(var(--base-rgb),.10),
        inset 0 1px 0 rgba(255,255,255,.98),
        inset 0 -1px 0 rgba(var(--base-rgb),.12) !important;
    backdrop-filter: blur(22px) saturate(1.15);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
}

.sla-offer__result-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(108deg,
        rgba(255,255,255,.42) 0%,
        rgba(255,255,255,.04) 30%,
        rgba(var(--base-rgb),.10) 63%,
        rgba(255,255,255,.24) 100%);
}

.sla-offer__result-card h3 {
    position: relative;
    z-index: 1;
}

.sla-offer__result-card p {
    position: relative;
    z-index: 1;
}

/* Lower audit cards remain lighter so 01/02 are visually primary. */
.sla-offer__audit-item {
    background:
        radial-gradient(circle at 16% 0%, rgba(255,255,255,.92), transparent 48%),
        linear-gradient(145deg,
            rgba(255,255,255,.58),
            rgba(var(--base-soft-rgb),.32) 62%,
            rgba(var(--base-rgb),.09)) !important;
    border-color: rgba(var(--base-rgb), .22) !important;
}

/* ---------- Brief title: a real heading, not a floating pill ---------- */
.sla-offer__brief-intro {
    position: relative;
    margin: 0 0 34px;
    padding: 0 0 22px;
    border-bottom: 1px solid rgba(91,104,116,.16);
}

.sla-offer__brief-intro::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: min(180px, 34%);
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(var(--sla-rgb),.72), rgba(var(--sla-rgb),0));
}

.sla-offer__brief-title {
    margin: 0 0 8px !important;
    color: var(--soul-text);
}

.sla-offer__brief-intro p {
    max-width: 760px;
    margin: 0;
    color: var(--soul-muted);
}

/* ---------- Direction selector ---------- */
.sla-offer__niches {
    margin-top: 20px;
}

.sla-offer__niche:hover,
.sla-offer__niche.is-active {
    transform: translateY(-2px);
}

/* ---------- Form card / form: hard full-width isolation from global form.css ---------- */
.sla-offer__form-card,
.sla-offer__form-card.is-open,
.sla-offer__form-card[aria-hidden="false"] {
    box-sizing: border-box !important;
    display: none;
    inline-size: 100% !important;
    width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    max-inline-size: none !important;
    max-width: none !important;
}

.sla-offer__form-card.is-open,
.sla-offer__form-card[aria-hidden="false"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

.sla-offer__form-card > .sla-offer__form-head,
.sla-offer__form-card > form.soul-form.sla-offer__form {
    flex: 0 0 auto;
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: none !important;
    max-width: none !important;
}

form.soul-form.sla-offer__form {
    box-sizing: border-box !important;
    inline-size: 100% !important;
    width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    max-inline-size: none !important;
    max-width: none !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    margin-inline: 0 !important;
}

/* Form internals use the complete available width. */
form.soul-form.sla-offer__form > *,
form.soul-form.sla-offer__form .soul-form__grid,
form.soul-form.sla-offer__form .sla-offer__extended,
form.soul-form.sla-offer__form .sla-offer__niche-fields {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
}

/* Slightly more breathing room between logical form blocks. */
form.soul-form.sla-offer__form {
    row-gap: 26px !important;
}

form.soul-form.sla-offer__form .soul-form__grid {
    gap: 20px 22px !important;
}

form.soul-form.sla-offer__form .sla-offer__fields--contacts,
form.soul-form.sla-offer__form .sla-offer__fields--source {
    margin-bottom: 0 !important;
}

/* Desired colors -> references needed visible vertical gap. */
.sla-offer__extended > .soul-form__grid + .sla-offer__field--wide,
.sla-offer__niche-fields + .soul-form__grid + .sla-offer__field--wide {
    display: grid !important;
    margin-top: 20px !important;
}

.sla-offer__field--wide > span {
    margin-bottom: 0;
}

/* Theme illumination follows NKO / business / experts inside the whole brief. */
.sla-offer__brief[data-theme] .sla-offer__form-card.is-open {
    border-color: rgba(var(--sla-rgb), .30) !important;
    box-shadow:
        0 24px 58px rgba(var(--sla-rgb), .09),
        0 0 34px rgba(var(--sla-rgb), .055),
        inset 0 1px 0 rgba(255,255,255,.97) !important;
}

.sla-offer__brief[data-theme] form.soul-form.sla-offer__form {
    border-color: rgba(var(--sla-rgb), .26) !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(255,255,255,.98), transparent 36%),
        linear-gradient(145deg,
            rgba(255,255,255,.86) 0%,
            rgba(255,255,255,.70) 38%,
            rgba(var(--sla-soft-rgb),.42) 72%,
            rgba(var(--sla-rgb),.10) 100%) !important;
    box-shadow:
        0 24px 50px rgba(36,42,54,.075),
        0 0 30px rgba(var(--sla-rgb),.08),
        inset 0 1px 0 rgba(255,255,255,.97) !important;
}

/* Submit button is strictly current theme; no fixed purple border. */
form.soul-form.sla-offer__form .sla-offer__submit,
html[data-theme="nko"] form.soul-form.sla-offer__form .sla-offer__submit,
html[data-theme="business"] form.soul-form.sla-offer__form .sla-offer__submit,
html[data-theme="experts"] form.soul-form.sla-offer__form .sla-offer__submit {
    border-color: rgba(var(--sla-rgb), .64) !important;
    --theme-rgb: var(--sla-rgb) !important;
    --theme-soft-rgb: var(--sla-soft-rgb) !important;
    --theme-end-rgb: var(--sla-end-rgb) !important;
}

/* ---------- Responsive ---------- */
@media (min-width: 761px) and (max-width: 980px) {
    .sla-offer__niches {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    }
}

@media (max-width: 760px) {
    .sla-offer__copy .gls-section-title.soul-section__title {
        margin-bottom: 20px !important;
        font-size: clamp(34px, 9vw, var(--font-h2-size)) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.04em !important;
    }

    .sla-offer__brief-intro {
        margin-bottom: 26px;
        padding-bottom: 18px;
    }

    .sla-offer__niches {
        grid-template-columns: 1fr !important;
    }

    .sla-offer__form-card.is-open,
    .sla-offer__form-card[aria-hidden="false"] {
        padding: 16px !important;
    }

    form.soul-form.sla-offer__form {
        inline-size: 100% !important;
        width: 100% !important;
        max-inline-size: none !important;
        max-width: none !important;
        padding: 18px !important;
        row-gap: 20px !important;
    }

    form.soul-form.sla-offer__form .soul-form__grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .sla-offer__extended > .soul-form__grid + .sla-offer__field--wide,
    .sla-offer__niche-fields + .soul-form__grid + .sla-offer__field--wide {
        margin-top: 15px !important;
    }
}

@media (max-width: 430px) {
    .sla-offer__form-card.is-open,
    .sla-offer__form-card[aria-hidden="false"] {
        padding: 10px !important;
    }

    form.soul-form.sla-offer__form {
        padding: 14px !important;
    }
}


/* =========================================================
   V8 QUIZ PATCH
   ========================================================= */

.sla-offer__quiz-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: end;
    width: 100%;
    margin-bottom: 28px;
}

.sla-offer__quiz-head h3 {
    margin: 14px 0 8px;
    font-size: clamp(26px, 2.5vw, 38px);
    line-height: 1.05;
    letter-spacing: -.035em;
}

.sla-offer__quiz-head p,
.sla-offer__quiz-step-head p { margin: 0; color: var(--soul-muted); }

.sla-offer__quiz-progress {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 6px;
    padding: 5px;
    border: 1px solid rgba(var(--sla-rgb), .20);
    border-radius: 16px;
    background: rgba(255,255,255,.44);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.94);
}

.sla-offer__quiz-progress span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 11px;
    border-radius: 11px;
    color: var(--soul-muted);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.sla-offer__quiz-progress b {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(var(--sla-rgb), .24);
    border-radius: 999px;
    font-size: 10px;
}

.sla-offer__quiz-progress span.is-active {
    color: var(--soul-text);
    background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(var(--sla-soft-rgb),.62));
    box-shadow: 0 6px 16px rgba(var(--sla-rgb),.10), inset 0 1px 0 rgba(255,255,255,.98);
}

.sla-offer__quiz-progress span.is-done b {
    color: #fff;
    border-color: rgba(var(--sla-rgb), .56);
    background: rgb(var(--sla-rgb));
}

form.soul-form.sla-offer__quiz { display: block !important; }

.sla-offer__quiz-step { display: none; width: 100%; min-width: 0; }
.sla-offer__quiz-step.is-active { display: block; animation: slaQuizIn .24s ease both; }

@keyframes slaQuizIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.sla-offer__quiz-step-head {
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(91,104,116,.14);
}

.sla-offer__quiz-step-head > span {
    display: block;
    margin-bottom: 7px;
    color: rgb(var(--sla-rgb));
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sla-offer__quiz-step-head h3 {
    margin: 0 0 7px;
    font-size: clamp(24px, 2.2vw, 32px);
    line-height: 1.08;
    letter-spacing: -.025em;
}

.sla-offer__quiz-step-head--mode {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 22px;
    align-items: end;
}

.sla-offer__quiz-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(91,104,116,.14);
}

.sla-offer__quiz-actions--end { justify-content: flex-end; }

.sla-offer__quiz-next,
.sla-offer__quiz-back {
    min-height: 46px;
    padding: 11px 22px;
    border-radius: 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.sla-offer__quiz-back {
    border: 1px solid rgba(91,104,116,.18);
    background: rgba(255,255,255,.38);
    color: var(--soul-text);
}

.sla-offer__quiz-next {
    border: 1px solid rgba(var(--sla-rgb),.44) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.90), rgba(var(--sla-soft-rgb),.72)) !important;
    color: var(--soul-text) !important;
    box-shadow: 0 8px 20px rgba(var(--sla-rgb),.10), inset 0 1px 0 rgba(255,255,255,.98) !important;
}

.sla-offer__quiz-next:hover,
.sla-offer__quiz-back:hover { transform: translateY(-1px); }

/* Submit: force ONLY current brief theme, never the global purple contour. */
form.soul-form.sla-offer__form button.sla-offer__submit,
form.soul-form.sla-offer__form button.sla-offer__submit:hover,
html[data-theme] form.soul-form.sla-offer__form button.sla-offer__submit {
    --cta-neon-rgb: var(--sla-rgb) !important;
    --theme-rgb: var(--sla-rgb) !important;
    border: 1px solid rgba(var(--sla-rgb), .52) !important;
    background:
        linear-gradient(115deg, transparent 0%, transparent 17%, rgba(255,255,255,.24) 31%, rgba(255,255,255,.08) 43%, transparent 58%, transparent 100%),
        linear-gradient(145deg, rgba(var(--sla-rgb),.78), rgba(var(--sla-rgb),.52)) !important;
    box-shadow:
        0 12px 24px rgba(var(--sla-rgb),.16),
        inset 0 1px 0 rgba(255,255,255,.38) !important;
    filter: drop-shadow(0 0 9px rgba(var(--sla-rgb),.18)) !important;
}

form.soul-form.sla-offer__form button.sla-offer__submit::before {
    border: 0 !important;
    box-shadow: none !important;
}

.sla-offer__quiz-step .sla-offer__extended { margin-top: 24px !important; }

@media (max-width: 760px) {
    .sla-offer__quiz-head,
    .sla-offer__quiz-step-head--mode { grid-template-columns: 1fr; gap: 16px; }
    .sla-offer__quiz-progress { grid-template-columns: repeat(3, 1fr); width: 100%; }
    .sla-offer__quiz-progress span { justify-content: center; padding: 7px 5px; font-size: 0; }
    .sla-offer__quiz-progress b { font-size: 10px; }
    .sla-offer__mode-switch { width: 100%; }
    .sla-offer__quiz-actions { margin-top: 22px; }
    .sla-offer__quiz-next, .sla-offer__quiz-back { flex: 1 1 0; }
}

@media (max-width: 430px) {
    .sla-offer__quiz-head h3 { font-size: 27px; }
    .sla-offer__quiz-step-head h3 { font-size: 24px; }
    .sla-offer__quiz-actions--submit { flex-direction: column-reverse; }
    .sla-offer__quiz-actions--submit > * { width: 100%; }
}

/* =========================================================
   V9 FINAL VISUAL PATCH
   1) spacing inside quiz
   2) USP recolors with selected global niche
   ========================================================= */

/* ---------------------------------------------------------
   STEP 2 - more breathing room between logical fields
   --------------------------------------------------------- */

.sla-offer__quiz-step[data-quiz-step="2"] .sla-offer__fields--source {
    margin-bottom: 24px !important;
}

.sla-offer__quiz-step[data-quiz-step="2"] .sla-offer__field--wide {
    display: grid !important;
    gap: 9px !important;
    margin-top: 0 !important;
    margin-bottom: 28px !important;
}

.sla-offer__quiz-step[data-quiz-step="2"] .sla-offer__field--wide > small {
    display: block !important;
    margin-top: 1px !important;
    line-height: 1.45 !important;
}

.sla-offer__quiz-step[data-quiz-step="2"] .sla-offer__upload {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
}

/* ---------------------------------------------------------
   STEP 3 - separate consent from contact fields
   --------------------------------------------------------- */

.sla-offer__quiz-step[data-quiz-step="3"] .sla-offer__fields--contacts {
    margin-bottom: 24px !important;
}

.sla-offer__quiz-step[data-quiz-step="3"] .sla-offer__consent {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
}

/* ---------------------------------------------------------
   USP THEME VARIABLES
   No selection = original Sky Titanium.
   After niche selection the whole USP follows the page theme.
   --------------------------------------------------------- */

.sla-offer[data-active-niche="nko"] .sla-offer__usp {
    --sla-rgb: var(--nko-rgb);
    --sla-soft-rgb: 241, 234, 248;
    --sla-end-rgb: 202, 205, 211;
}

.sla-offer[data-active-niche="business"] .sla-offer__usp {
    --sla-rgb: var(--business-rgb);
    --sla-soft-rgb: 255, 238, 225;
    --sla-end-rgb: 202, 205, 211;
}

.sla-offer[data-active-niche="experts"] .sla-offer__usp {
    --sla-rgb: var(--experts-rgb);
    --sla-soft-rgb: 239, 251, 234;
    --sla-end-rgb: 202, 205, 211;
}

/* Main glass shell */
.sla-offer[data-active-niche] .sla-offer__usp {
    border-color: rgba(var(--sla-rgb), .28) !important;

    background:
        radial-gradient(
            circle at 12% 4%,
            rgba(255,255,255,.92) 0%,
            rgba(255,255,255,.48) 22%,
            transparent 40%
        ),
        radial-gradient(
            circle at 90% 12%,
            rgba(var(--sla-rgb), .095) 0%,
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.84) 0%,
            rgba(255,255,255,.66) 40%,
            rgba(var(--sla-soft-rgb),.46) 73%,
            rgba(var(--sla-rgb),.08) 100%
        ) !important;

    box-shadow:
        0 26px 64px rgba(var(--sla-rgb), .085),
        0 0 38px rgba(var(--sla-rgb), .045),
        inset 0 1px 0 rgba(255,255,255,.97) !important;

    transition:
        border-color .32s ease,
        background .32s ease,
        box-shadow .32s ease !important;
}

/* Top chip */
.sla-offer[data-active-niche] .sla-offer__usp .soul-chip {
    border-color: rgba(var(--sla-rgb), .34) !important;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.86),
            rgba(var(--sla-soft-rgb),.54)
        ) !important;
    box-shadow:
        0 7px 18px rgba(var(--sla-rgb), .10),
        inset 0 1px 0 rgba(255,255,255,.96) !important;
}

.sla-offer[data-active-niche] .sla-offer__usp .soul-chip__line {
    background: rgb(var(--sla-rgb)) !important;
    box-shadow: 0 0 9px rgba(var(--sla-rgb), .28) !important;
}

/* Capacity card */
.sla-offer[data-active-niche] .sla-offer__capacity {
    border-color: rgba(var(--sla-rgb), .30) !important;
    background:
        radial-gradient(circle at 20% 0%, rgba(255,255,255,.92), transparent 42%),
        linear-gradient(145deg, rgba(255,255,255,.78), rgba(var(--sla-soft-rgb),.52)) !important;
    box-shadow:
        0 14px 34px rgba(var(--sla-rgb), .10),
        inset 0 1px 0 rgba(255,255,255,.97) !important;
}

.sla-offer[data-active-niche] .sla-offer__capacity-main strong,
.sla-offer[data-active-niche] .sla-offer__capacity-main strong span {
    color: rgb(var(--sla-rgb)) !important;
}

.sla-offer[data-active-niche] .sla-offer__progress span {
    background:
        linear-gradient(
            90deg,
            rgba(var(--sla-rgb), .52),
            rgb(var(--sla-rgb))
        ) !important;
}

/* 01 / 02 - premium themed glass */
.sla-offer[data-active-niche] .sla-offer__result-card {
    border-color: rgba(var(--sla-rgb), .34) !important;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.88) 0%,
            rgba(255,255,255,.54) 27%,
            rgba(var(--sla-soft-rgb),.56) 64%,
            rgba(var(--sla-rgb),.105) 100%
        ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.99),
        inset 0 -1px 0 rgba(var(--sla-rgb),.09),
        0 16px 38px rgba(var(--sla-rgb),.09),
        0 0 26px rgba(var(--sla-rgb),.045) !important;
}

.sla-offer[data-active-niche] .sla-offer__result-card::before {
    background:
        radial-gradient(
            circle at 12% 0%,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.40) 24%,
            transparent 50%
        ),
        radial-gradient(
            circle at 94% 100%,
            rgba(var(--sla-rgb),.18) 0%,
            transparent 48%
        ) !important;
}

.sla-offer[data-active-niche] .sla-offer__result-number {
    color: rgb(var(--sla-rgb)) !important;
    text-shadow: 0 0 14px rgba(var(--sla-rgb), .18) !important;
}

/* Four audit cards - subtler tint than 01 / 02 */
.sla-offer[data-active-niche] .sla-offer__audit-item {
    border-color: rgba(var(--sla-rgb), .20) !important;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.70),
            rgba(var(--sla-soft-rgb),.28)
        ) !important;
    box-shadow:
        0 12px 28px rgba(var(--sla-rgb), .045),
        inset 0 1px 0 rgba(255,255,255,.94) !important;
}

.sla-offer[data-active-niche] .sla-offer__audit-item > span {
    color: rgb(var(--sla-rgb)) !important;
}

/* Smooth visual transition when another niche is selected. */
.sla-offer__capacity,
.sla-offer__result-card,
.sla-offer__audit-item,
.sla-offer__usp .soul-chip,
.sla-offer__usp .soul-chip__line {
    transition:
        color .30s ease,
        border-color .30s ease,
        background .30s ease,
        box-shadow .30s ease !important;
}

/* ---------------------------------------------------------
   MOBILE SPACING
   --------------------------------------------------------- */

@media (max-width: 760px) {
    .sla-offer__quiz-step[data-quiz-step="2"] .sla-offer__fields--source {
        margin-bottom: 20px !important;
    }

    .sla-offer__quiz-step[data-quiz-step="2"] .sla-offer__field--wide {
        margin-bottom: 22px !important;
    }

    .sla-offer__quiz-step[data-quiz-step="3"] .sla-offer__fields--contacts {
        margin-bottom: 20px !important;
    }
}


/* =========================================================
   V11 FIX - STEP 2 HEADER + PROJECT FIELD SPACING
   Based on current backup 12.08 akt
   ========================================================= */

/* STEP 2: the copy is wrapped because the mode switch is placed beside it.
   Reproduce exactly the same kicker/title/text styling used by steps 1 and 3. */
.sla-offer__quiz-step[data-quiz-step="2"]
.sla-offer__quiz-step-head--mode
.sla-offer__quiz-step-copy {
    min-width: 0;
}

.sla-offer__quiz-step[data-quiz-step="2"]
.sla-offer__quiz-step-head--mode
.sla-offer__quiz-step-copy > span {
    display: block !important;
    margin: 0 0 7px !important;
    color: rgb(var(--sla-rgb)) !important;
    font-family: var(--soul-font-main) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

.sla-offer__quiz-step[data-quiz-step="2"]
.sla-offer__quiz-step-head--mode
.sla-offer__quiz-step-copy > h3 {
    margin: 0 0 7px !important;
    font-family: var(--soul-font-main) !important;
    font-size: clamp(24px, 2.2vw, 32px) !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;
}

.sla-offer__quiz-step[data-quiz-step="2"]
.sla-offer__quiz-step-head--mode
.sla-offer__quiz-step-copy > p {
    margin: 0 !important;
    color: var(--soul-muted) !important;
}

/* STEP 2 spacing: the URL pair is a grid followed by the full-width project field.
   Set the space on the actual adjacent elements instead of relying on label margins. */
form.soul-form.sla-offer__form
.sla-offer__quiz-step[data-quiz-step="2"]
.sla-offer__fields--source {
    margin: 0 0 30px !important;
}

form.soul-form.sla-offer__form
.sla-offer__quiz-step[data-quiz-step="2"]
.sla-offer__fields--source + .sla-offer__field--wide {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 9px !important;
    margin: 0 0 30px !important;
}

/* Give the upload block its own separation from the helper text. */
form.soul-form.sla-offer__form
.sla-offer__quiz-step[data-quiz-step="2"]
.sla-offer__field--wide + .sla-offer__upload {
    margin: 0 0 4px !important;
}

@media (max-width: 760px) {
    form.soul-form.sla-offer__form
    .sla-offer__quiz-step[data-quiz-step="2"]
    .sla-offer__fields--source {
        margin-bottom: 22px !important;
    }

    form.soul-form.sla-offer__form
    .sla-offer__quiz-step[data-quiz-step="2"]
    .sla-offer__fields--source + .sla-offer__field--wide {
        margin-bottom: 24px !important;
    }
}