/* =========================================================
   SOULULAB — CASES PAGE
   Новый чистый CSS под текущий сайт: titanium / glass / color niches
   ========================================================= */

.soul-cases-page,
.soul-case-detail {
    --case-neutral-dark: 32, 37, 48;
    --case-muted: rgba(32, 37, 48, 0.66);
    --case-text: rgba(31, 29, 44, 0.94);
    --case-surface: rgba(255, 255, 255, 0.72);
    --case-rgb: 148, 184, 207;
    --case-color: rgb(var(--case-rgb));
    --case-dark: rgb(74, 92, 112);

    position: relative;
    overflow: hidden;
    min-height: 100vh;
    color: var(--case-text);

    background:
        radial-gradient(ellipse at 16% 7%, rgba(210, 218, 224, 0.38) 0%, rgba(210, 218, 224, 0.14) 28%, transparent 56%),
        radial-gradient(ellipse at 88% 10%, rgba(232, 224, 210, 0.34) 0%, rgba(232, 224, 210, 0.12) 26%, transparent 56%),
        linear-gradient(180deg, #e6e7e4 0%, #f4f3ee 22%, #f8f8f5 48%, #e7e8e8 100%);
}

.soul-cases-container {
    width: min(100% - 64px, 1280px);
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.soul-cases-hero {
    position: relative;
    padding: 148px 0 64px;
}

.soul-cases-hero::before,
.soul-case-detail-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.44), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,0.16), transparent 64%);
}

.soul-cases-hero__content,
.soul-case-detail-hero__content {
    position: relative;
    z-index: 1;
}

.soul-cases-chip {
    width: fit-content;
}

.soul-cases-hero__title,
.soul-case-detail-hero__title {
    max-width: 880px;
    margin: 22px 0 0;
    color: rgba(29, 33, 44, 0.96);
    font-size: clamp(46px, 6vw, 86px);
    line-height: 0.94;
    letter-spacing: -0.065em;
    font-weight: 700;
    text-shadow: 0 14px 34px rgba(32, 37, 48, 0.10);
}

.soul-cases-hero__text,
.soul-case-detail-hero__text {
    max-width: 760px;
    margin: 26px 0 0;
    color: var(--case-muted);
    font-size: clamp(16px, 1.45vw, 20px);
    line-height: 1.65;
    font-weight: 400;
    letter-spacing: -0.018em;
}

.soul-cases-section {
    position: relative;
    padding: 36px 0 112px;
}

/* FILTER */

.soul-cases-filter {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0 auto 42px;
}

.soul-cases-filter__btn {
    --filter-rgb: 47, 52, 65;
    --filter-text: rgba(63, 67, 80, 0.92);

    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 24px;
    border-radius: 14px;
    border: 1.5px solid rgba(var(--filter-rgb), 0.26);
    color: var(--filter-text);
    background:
        linear-gradient(145deg, rgba(255,255,255,0.92), rgba(255,255,255,0.62) 42%, rgba(var(--filter-rgb),0.08));
    box-shadow:
        0 14px 34px rgba(var(--filter-rgb), 0.12),
        0 7px 18px rgba(34, 32, 46, 0.045),
        inset 0 1px 0 rgba(255,255,255,0.96),
        inset 0 -1px 0 rgba(var(--filter-rgb),0.10);
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
    transition: transform 180ms ease, color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.soul-cases-filter__btn--nko { --filter-rgb: 132, 75, 210; --filter-text: rgb(92, 52, 150); }
.soul-cases-filter__btn--business { --filter-rgb: 242, 145, 84; --filter-text: rgb(138, 75, 38); }
.soul-cases-filter__btn--experts { --filter-rgb: 116, 175, 84; --filter-text: rgb(68, 104, 48); }
.soul-cases-filter__btn--future { --filter-rgb: 77, 134, 200; --filter-text: rgb(47, 101, 159); }

.soul-cases-filter__btn::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,0.70), rgba(255,255,255,0.18) 38%, transparent 64%, rgba(255,255,255,0.54));
    opacity: 0.7;
}

.soul-cases-filter__btn:hover,
.soul-cases-filter__btn.is-active {
    transform: translateY(-1px);
    color: #fff;
    background: linear-gradient(145deg, rgba(var(--filter-rgb),0.96), rgba(var(--filter-rgb),0.78) 48%, rgba(var(--filter-rgb),0.64));
    border-color: rgba(var(--filter-rgb),0.48);
    box-shadow:
        0 18px 42px rgba(var(--filter-rgb), 0.26),
        0 0 0 7px rgba(var(--filter-rgb), 0.06),
        inset 0 1px 0 rgba(255,255,255,0.34),
        inset 0 -1px 0 rgba(0,0,0,0.10);
}

/* CARDS */

.soul-cases-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

.soul-case-card {
    --card-rgb: 132, 75, 210;
    --card-color: rgb(var(--card-rgb));
    --card-dark: #6d279f;

    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border-radius: 30px;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.82), rgba(244,244,240,0.66) 42%, rgba(var(--card-rgb),0.06));
    border: 1px solid rgba(var(--card-rgb), 0.16);
    box-shadow:
        0 20px 46px rgba(34, 38, 48, 0.08),
        0 0 0 1px rgba(var(--card-rgb), 0.045),
        inset 0 1px 0 rgba(255,255,255,0.78);
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.soul-case-card--nko { --card-rgb: 132, 75, 210; --card-dark: #6d279f; }
.soul-case-card--business { --card-rgb: 242, 145, 84; --card-dark: #b85f2e; }
.soul-case-card--experts { --card-rgb: 116, 175, 84; --card-dark: #4f842e; }
.soul-case-card--future { --card-rgb: 77, 134, 200; --card-dark: #2f659f; }

.soul-case-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--card-rgb), 0.28);
    box-shadow:
        0 28px 66px rgba(34, 38, 48, 0.12),
        0 0 32px rgba(var(--card-rgb), 0.10),
        inset 0 1px 0 rgba(255,255,255,0.86);
}

.soul-case-card.is-hidden {
    display: none !important;
}

.soul-case-card__visual {
    display: block;
    padding: 16px 16px 0;
    text-decoration: none;
}

.soul-case-mock {
    position: relative;
    overflow: hidden;
    height: 248px;
    border-radius: 23px;
    background:
        radial-gradient(circle at 80% 24%, rgba(var(--card-rgb),0.26), transparent 28%),
        linear-gradient(145deg, rgba(255,255,255,0.86), rgba(222,226,228,0.58));
    border: 1px solid rgba(255,255,255,0.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.84), 0 14px 30px rgba(34,38,48,0.08);
}

.soul-case-mock__top {
    display: flex;
    gap: 6px;
    height: 36px;
    padding: 13px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.50);
}

.soul-case-mock__top span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(var(--card-rgb), 0.56);
}

.soul-case-mock__hero {
    width: 72%;
    height: 64px;
    margin: 22px 0 0 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(var(--card-rgb),0.72), rgba(var(--card-rgb),0.28));
}

.soul-case-mock__rows {
    display: grid;
    gap: 9px;
    width: 62%;
    margin: 18px 0 0 18px;
}

.soul-case-mock__rows i {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.76);
}

.soul-case-mock__cards {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: grid;
    grid-template-columns: repeat(3, 42px);
    gap: 8px;
}

.soul-case-mock__cards b {
    height: 48px;
    border-radius: 14px;
    background: rgba(255,255,255,0.70);
    border: 1px solid rgba(255,255,255,0.64);
}

.soul-case-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 24px;
}

.soul-case-card__meta,
.soul-case-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.soul-case-card__meta span,
.soul-case-card__tags span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
}

.soul-case-card__meta span:first-child {
    color: #fff;
    background: rgb(var(--card-rgb));
}

.soul-case-card__meta span:last-child,
.soul-case-card__tags span {
    color: var(--card-dark);
    background: rgba(var(--card-rgb), 0.10);
    border: 1px solid rgba(var(--card-rgb), 0.12);
}

.soul-case-card__title {
    margin: 18px 0 0;
    font-size: 27px;
    line-height: 1.06;
    letter-spacing: -0.04em;
    font-weight: 650;
}

.soul-case-card__title a {
    color: rgba(29,33,44,0.96);
    text-decoration: none;
}

.soul-case-card__subtitle {
    margin: 12px 0 0;
    color: rgba(29,33,44,0.84);
    font-size: 15px;
    line-height: 1.45;
    font-weight: 500;
}

.soul-case-card__description {
    margin: 13px 0 0;
    color: var(--case-muted);
    font-size: 14px;
    line-height: 1.55;
}

.soul-case-card__tags {
    margin-top: 18px;
}

.soul-case-card__metrics {
    display: grid;
    gap: 8px;
    margin: 18px 0 22px;
}

.soul-case-card__metrics div {
    padding: 11px 12px;
    border-radius: 14px;
    color: rgba(29,33,44,0.82);
    background: rgba(var(--card-rgb),0.065);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 500;
}

.soul-case-card__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: auto;
    padding: 0 18px;
    border-radius: 15px;
    color: var(--card-dark);
    background: rgba(var(--card-rgb), 0.12);
    border: 1px solid rgba(var(--card-rgb), 0.18);
    text-decoration: none;
    font-size: 14px;
    font-weight: 650;
    transition: transform 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.soul-case-card__link:hover {
    transform: translateY(-1px);
    color: #fff;
    background: rgb(var(--card-rgb));
    box-shadow: 0 14px 28px rgba(var(--card-rgb),0.20);
}

.soul-cases-empty {
    display: none;
    margin-top: 18px;
    padding: 24px;
    border-radius: 24px;
    text-align: center;
    color: var(--case-muted);
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(120,120,130,0.12);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
}

.soul-cases-empty.is-visible { display: block; }

/* DETAIL */

.soul-case-detail--nko { --case-rgb: 132, 75, 210; --case-dark: #6d279f; }
.soul-case-detail--business { --case-rgb: 242, 145, 84; --case-dark: #b85f2e; }
.soul-case-detail--experts { --case-rgb: 116, 175, 84; --case-dark: #4f842e; }

.soul-case-detail-hero {
    position: relative;
    padding: 140px 0 76px;
}

.soul-case-back {
    position: relative;
    z-index: 2;
    display: inline-flex;
    margin-bottom: 34px;
    color: var(--case-dark);
    text-decoration: none;
    font-size: 14px;
    font-weight: 650;
}

.soul-case-detail-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
    gap: 52px;
    align-items: center;
}

.soul-case-detail-hero__title {
    max-width: 720px;
}

.soul-case-detail-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.soul-case-detail-hero__tags span,
.soul-case-label {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    color: var(--case-dark);
    background: rgba(var(--case-rgb), 0.10);
    border: 1px solid rgba(var(--case-rgb), 0.14);
    font-size: 13px;
    font-weight: 650;
}

.soul-case-browser {
    overflow: hidden;
    border-radius: 34px;
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(var(--case-rgb),0.18);
    box-shadow: 0 28px 70px rgba(var(--case-rgb),0.13), inset 0 1px 0 rgba(255,255,255,0.82);
}

.soul-case-browser__top {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 46px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(var(--case-rgb),0.10);
    background: rgba(255,255,255,0.66);
}

.soul-case-browser__top span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(var(--case-rgb),0.60);
}

.soul-case-browser__top b {
    margin-left: auto;
    color: var(--case-dark);
    font-size: 12px;
    font-weight: 700;
}

.soul-case-browser__screen {
    min-height: 430px;
    padding: 34px;
    background:
        radial-gradient(circle at 80% 24%, rgba(var(--case-rgb),0.24), transparent 30%),
        linear-gradient(145deg, rgba(255,255,255,0.88), rgba(232,234,232,0.62));
}

.soul-case-browser__headline {
    width: 70%;
    height: 78px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(var(--case-rgb),0.74), rgba(var(--case-rgb),0.26));
}

.soul-case-browser__text {
    width: 58%;
    height: 54px;
    margin-top: 18px;
    border-radius: 16px;
    background: rgba(255,255,255,0.70);
}

.soul-case-browser__button {
    width: 142px;
    height: 46px;
    margin-top: 22px;
    border-radius: 14px;
    background: rgb(var(--case-rgb));
}

.soul-case-browser__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 42px;
}

.soul-case-browser__grid i {
    height: 112px;
    border-radius: 22px;
    background: rgba(255,255,255,0.66);
    border: 1px solid rgba(255,255,255,0.74);
}

.soul-case-facts {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 46px;
}

.soul-case-facts div {
    padding: 22px;
    border-radius: 22px;
    background: rgba(255,255,255,0.70);
    border: 1px solid rgba(var(--case-rgb),0.12);
    box-shadow: 0 14px 34px rgba(var(--case-rgb),0.06), inset 0 1px 0 rgba(255,255,255,0.76);
}

.soul-case-facts strong {
    display: block;
    margin-bottom: 8px;
    color: rgba(29,33,44,0.90);
    font-size: 14px;
    font-weight: 650;
}

.soul-case-facts span {
    color: var(--case-muted);
    font-size: 14px;
    line-height: 1.45;
}

.soul-case-detail-section {
    padding: 76px 0 96px;
}

.soul-case-detail-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}

.soul-case-detail-nav {
    position: sticky;
    top: 112px;
    display: grid;
    gap: 8px;
    padding: 16px;
    border-radius: 24px;
    background: rgba(255,255,255,0.58);
    border: 1px solid rgba(var(--case-rgb),0.10);
    box-shadow: 0 14px 34px rgba(34,38,48,0.06), inset 0 1px 0 rgba(255,255,255,0.72);
}

.soul-case-detail-nav a {
    padding: 11px 12px;
    border-radius: 14px;
    color: var(--case-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.soul-case-detail-nav a:hover {
    color: var(--case-dark);
    background: rgba(var(--case-rgb),0.09);
}

.soul-case-detail-content {
    display: grid;
    gap: 28px;
}

.soul-case-block {
    padding: 36px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 90% 12%, rgba(var(--case-rgb),0.06), transparent 28%),
        rgba(255,255,255,0.72);
    border: 1px solid rgba(var(--case-rgb),0.12);
    box-shadow: 0 18px 44px rgba(var(--case-rgb),0.06), inset 0 1px 0 rgba(255,255,255,0.76);
}

.soul-case-block h2 {
    margin: 18px 0 0;
    color: rgba(29,33,44,0.94);
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.05;
    letter-spacing: -0.045em;
    font-weight: 650;
}

.soul-case-block p {
    margin: 18px 0 0;
    color: var(--case-muted);
    font-size: 16px;
    line-height: 1.7;
}

.soul-case-note {
    margin-top: 24px;
    padding: 22px;
    border-radius: 22px;
    color: rgba(29,33,44,0.84);
    background: rgba(var(--case-rgb),0.08);
    border: 1px solid rgba(var(--case-rgb),0.12);
    font-size: 16px;
    line-height: 1.55;
    font-weight: 500;
}

.soul-case-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 26px;
}

.soul-case-check-grid div,
.soul-case-result-grid div {
    padding: 15px 16px;
    border-radius: 16px;
    background: rgba(var(--case-rgb),0.055);
    color: rgba(29,33,44,0.86);
    font-size: 15px;
    line-height: 1.45;
    font-weight: 500;
}

.soul-case-check-grid div::before {
    content: "•";
    margin-right: 8px;
    color: var(--case-dark);
}

.soul-before-after {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 30px;
}

.soul-before-after__side {
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(var(--case-rgb),0.12);
    background: rgba(255,255,255,0.68);
}

.soul-before-after__side strong {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 14px;
    margin-bottom: 16px;
    border-radius: 999px;
    color: rgba(29,33,44,0.88);
    background: rgba(255,255,255,0.78);
    font-size: 14px;
    font-weight: 800;
}

.soul-before-after__side div {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 13px;
    border-radius: 16px;
    background: rgba(255,255,255,0.72);
    color: var(--case-muted);
    font-size: 14px;
    line-height: 1.42;
}

.soul-before-after__side div + div { margin-top: 10px; }

.soul-before-after__side span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    color: #fff;
    background: rgba(232, 91, 74, 0.92);
    font-weight: 900;
}

.soul-before-after__side--after span {
    background: rgba(53, 168, 82, 0.92);
}

.soul-case-result-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 26px;
}

/* REQUEST */

.soul-case-request {
    padding: 0 0 118px;
}

.soul-case-request__box {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(440px, 1fr);
    gap: 42px;
    align-items: center;
    padding: 42px;
    border-radius: 36px;
    background:
        radial-gradient(circle at 12% 18%, rgba(var(--case-rgb),0.14), transparent 34%),
        radial-gradient(circle at 90% 20%, rgba(255,255,255,0.38), transparent 32%),
        linear-gradient(135deg, rgba(var(--case-rgb),0.08), rgba(255,255,255,0.72));
    border: 1px solid rgba(var(--case-rgb),0.14);
    box-shadow: 0 24px 70px rgba(var(--case-rgb),0.08), inset 0 1px 0 rgba(255,255,255,0.76);
}

.soul-case-request__content h2 {
    margin: 18px 0 0;
    color: rgba(29,33,44,0.94);
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 650;
}

.soul-case-request__content p {
    max-width: 560px;
    margin: 22px 0 0;
    color: var(--case-muted);
    font-size: 17px;
    line-height: 1.65;
}

.soul-case-request__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.soul-case-request__meta span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(var(--case-rgb),0.12);
    color: rgba(29,33,44,0.82);
    font-size: 13px;
    font-weight: 600;
}

.soul-case-form {
    display: grid;
    gap: 16px;
    padding: 28px;
    border-radius: 28px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(var(--case-rgb),0.12);
    box-shadow: 0 18px 48px rgba(var(--case-rgb),0.07), inset 0 1px 0 rgba(255,255,255,0.82);
}

.soul-case-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.soul-case-form label {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.soul-case-form label span {
    color: rgba(29,33,44,0.78);
    font-size: 13px;
    font-weight: 650;
}

.soul-case-form input,
.soul-case-form textarea {
    width: 100%;
    min-height: 50px;
    padding: 14px 15px;
    border-radius: 14px;
    border: 1px solid rgba(var(--case-rgb),0.16);
    background: rgba(255,255,255,0.86);
    color: rgba(29,33,44,0.90);
    font: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.soul-case-form textarea {
    min-height: 118px;
    resize: vertical;
}

.soul-case-form input:focus,
.soul-case-form textarea:focus {
    border-color: rgba(var(--case-rgb),0.50);
    box-shadow: 0 0 0 4px rgba(var(--case-rgb),0.08);
}

.soul-case-form__agree {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: flex-start;
    gap: 10px;
}

.soul-case-form__agree input {
    width: 18px;
    height: 18px;
    min-height: 18px;
    margin-top: 1px;
    padding: 0;
}

.soul-case-form__agree span {
    color: var(--case-muted) !important;
    font-size: 13px !important;
    line-height: 1.45;
    font-weight: 500 !important;
}

.soul-case-form__submit {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    margin-top: 6px;
    padding: 0 22px;
    border: 0;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(145deg, rgba(var(--case-rgb),0.96), rgba(var(--case-rgb),0.74));
    box-shadow: 0 14px 28px rgba(var(--case-rgb),0.22), inset 0 1px 0 rgba(255,255,255,0.28);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.soul-case-form__submit.is-success {
    background: linear-gradient(145deg, #79ad3d, #35a852);
}

/* ADAPTIVE */

@media (max-width: 1180px) {
    .soul-cases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .soul-case-detail-hero__grid { grid-template-columns: 1fr; }
    .soul-case-detail-hero__visual { max-width: 760px; }
}

@media (max-width: 980px) {
    .soul-case-detail-layout,
    .soul-case-request__box,
    .soul-case-facts,
    .soul-before-after,
    .soul-case-result-grid {
        grid-template-columns: 1fr;
    }

    .soul-case-detail-nav {
        position: static;
    }
}

@media (max-width: 760px) {
    .soul-cases-container {
        width: min(100% - 32px, 1280px);
    }

    .soul-cases-hero,
    .soul-case-detail-hero {
        padding-top: 116px;
    }

    .soul-cases-hero__title,
    .soul-case-detail-hero__title {
        font-size: clamp(38px, 13vw, 58px);
    }

    .soul-cases-filter {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        margin-bottom: 30px;
    }

    .soul-cases-filter__btn {
        flex: 0 0 auto;
        min-height: 42px;
        padding: 0 18px;
        font-size: 13px;
    }

    .soul-cases-grid,
    .soul-case-check-grid,
    .soul-case-form__grid {
        grid-template-columns: 1fr;
    }

    .soul-case-card__body,
    .soul-case-block,
    .soul-case-request__box,
    .soul-case-form {
        padding: 22px;
        border-radius: 24px;
    }

    .soul-case-mock {
        height: 220px;
    }

    .soul-case-browser__screen {
        min-height: 330px;
        padding: 24px;
    }
}

/* =========================================================
   CASES — REAL IMAGE PREVIEWS
   Карточки и детальные кейсы используют реальные изображения
   из /assets/img/cases/ с сохранёнными именами файлов.
   ========================================================= */

.soul-case-card__visual {
    position: relative;
    overflow: hidden;
    border-radius: 30px 30px 0 0;
}

.soul-case-card__image {
    display: block;
    width: 100%;
    height: 248px;
    object-fit: cover;
    object-position: top center;
    border-radius: 23px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.84),
        0 14px 30px rgba(34,38,48,0.08);
    transition: transform 320ms ease, filter 320ms ease;
}

.soul-case-card:hover .soul-case-card__image {
    transform: scale(1.025);
    filter: saturate(1.03) contrast(1.02);
}

.soul-case-card__visual .soul-case-mock {
    display: none;
}

.soul-case-card__visual.is-image-missing .soul-case-mock {
    display: block;
}

.soul-case-browser__screen--image {
    position: relative;
    overflow: auto;
    min-height: 430px;
    max-height: 640px;
    padding: 0;
    background: #ffffff;
}

.soul-case-browser__image {
    display: block;
    width: 100%;
    height: auto;
    min-height: 430px;
    object-fit: cover;
    object-position: top center;
}

.soul-case-browser__fallback {
    display: none;
    min-height: 430px;
    padding: 34px;
    background:
        radial-gradient(circle at 80% 24%, rgba(var(--case-rgb),0.24), transparent 30%),
        linear-gradient(145deg, rgba(255,255,255,0.88), rgba(232,234,232,0.62));
}

.soul-case-browser__screen--image.is-image-missing .soul-case-browser__fallback {
    display: block;
}

@media (max-width: 720px) {
    .soul-case-card__image {
        height: 260px;
    }

    .soul-case-browser__screen--image {
        min-height: 320px;
        max-height: 520px;
    }

    .soul-case-browser__image {
        min-height: 320px;
    }
}
/* =========================================================
   CASE CARDS — TAG PILLS WITH DOTS
   Верхние плашки тегов: прозрачные, с кантом в цвет кейса и точкой
   ========================================================= */

.soul-case-card__tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 18px !important;
}

.soul-case-card__tags span {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;

    min-height: 30px !important;
    padding: 0 11px !important;

    border-radius: 999px !important;

    color: rgba(29, 33, 44, 0.88) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.76) 0%,
            rgba(255, 255, 255, 0.42) 52%,
            rgba(var(--card-rgb), 0.055) 100%
        ) !important;

    border: 1px solid rgba(var(--card-rgb), 0.22) !important;

    box-shadow:
        0 6px 14px rgba(var(--card-rgb), 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        inset 0 -1px 0 rgba(var(--card-rgb), 0.06) !important;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 600 !important;

    backdrop-filter: blur(10px) saturate(1.04) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.04) !important;
}

/* цветная точка слева */
.soul-case-card__tags span::before {
    content: "" !important;

    flex: 0 0 auto !important;

    width: 6px !important;
    height: 6px !important;

    border-radius: 999px !important;

    background: rgba(var(--card-rgb), 0.72) !important;

    box-shadow:
        0 0 6px rgba(var(--card-rgb), 0.24) !important;
}

/* hover — чуть плотнее, но не заливка */
.soul-case-card__tags span:hover {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.88) 0%,
            rgba(255, 255, 255, 0.58) 50%,
            rgba(var(--card-rgb), 0.085) 100%
        ) !important;

    border-color: rgba(var(--card-rgb), 0.34) !important;

    box-shadow:
        0 8px 18px rgba(var(--card-rgb), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        inset 0 -1px 0 rgba(var(--card-rgb), 0.08) !important;
}
/* =========================================================
   CASE DETAIL — OLD VISUAL RESTORE
   Детальные страницы кейсов: возвращаем старую структуру и стили
   ========================================================= */

.glc-page {
    --gls-active-rgb: var(--theme-rgb, 132, 75, 210);
    --gls-active-2-rgb: var(--theme-soft-rgb, 190, 150, 255);
    --gls-active: rgb(var(--gls-active-rgb));
    --gls-active-dark: rgb(var(--gls-active-rgb));
    --gls-text: rgba(34, 27, 44, 0.94);
    --gls-muted: rgba(34, 27, 44, 0.62);
}

.glc-page .gls-container {
    width: min(100% - 48px, 1180px);
    margin-left: auto;
    margin-right: auto;
}

.glc-detail-hero {
    padding: 132px 0 64px;
    background:
        radial-gradient(circle at 15% 10%, rgba(var(--gls-active-rgb), 0.12), transparent 34%),
        radial-gradient(circle at 90% 18%, rgba(var(--gls-active-2-rgb), 0.08), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, rgba(var(--gls-active-rgb), 0.045) 100%);
}

.glc-back-link {
    display: inline-flex;
    align-items: center;
    margin-bottom: 34px;
    color: var(--gls-active-dark);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
}

.glc-detail-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
    gap: 42px;
    align-items: center;
}

.glc-detail-hero__title {
    margin: 18px 0 0;
    font-size: clamp(42px, 5vw, 70px);
    line-height: 0.98;
    letter-spacing: -0.055em;
    color: var(--gls-text);
    font-weight: 700;
}

.glc-detail-hero__text {
    max-width: 680px;
    margin: 24px 0 0;
    color: var(--gls-muted);
    font-size: 20px;
    line-height: 1.6;
}

.glc-detail-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.glc-detail-hero__tags span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(var(--gls-active-rgb), 0.10);
    border: 1px solid rgba(var(--gls-active-rgb), 0.16);
    color: var(--gls-active-dark);
    font-size: 13px;
    font-weight: 600;
}

.glc-detail-hero__image {
    overflow: hidden;
    max-height: 720px;
    border-radius: 34px;
    border: 1px solid rgba(var(--gls-active-rgb), 0.14);
    background: #ffffff;
    box-shadow: 0 28px 70px rgba(var(--gls-active-rgb), 0.12);
}

.glc-detail-hero__image img {
    width: 100%;
    display: block;
}

.glc-image-preview {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    text-align: left;
}

.glc-image-preview img {
    width: 100%;
    display: block;
    transition: 0.25s ease;
}

.glc-image-preview:hover img {
    transform: scale(1.015);
}

.glc-image-preview__label {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 11px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--gls-active-dark);
    border: 1px solid rgba(var(--gls-active-rgb), 0.16);
    box-shadow: 0 12px 28px rgba(var(--gls-active-rgb), 0.12);
    font-size: 14px;
    font-weight: 700;
}

.glc-image-preview__label::before {
    content: "↗";
    margin-right: 8px;
    font-size: 15px;
}

.glc-detail-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 42px;
}

.glc-detail-stats div {
    padding: 22px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(var(--gls-active-rgb), 0.12);
    box-shadow: 0 14px 34px rgba(var(--gls-active-rgb), 0.06);
}

.glc-detail-stats strong {
    display: block;
    margin-bottom: 8px;
    color: var(--gls-text);
    font-size: 14px;
    font-weight: 700;
}

.glc-detail-stats span {
    color: var(--gls-muted);
    font-size: 14px;
    line-height: 1.45;
}

.glc-detail-section {
    padding: 76px 0 90px;
    background: #ffffff;
}

.glc-detail-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}

.glc-detail-nav {
    position: sticky;
    top: 110px;
    display: grid;
    gap: 8px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(var(--gls-active-rgb), 0.045);
    border: 1px solid rgba(var(--gls-active-rgb), 0.10);
}

.glc-detail-nav a {
    padding: 11px 12px;
    border-radius: 14px;
    color: var(--gls-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.glc-detail-nav a:hover {
    color: var(--gls-active-dark);
    background: rgba(var(--gls-active-rgb), 0.10);
}

.glc-detail-content {
    display: grid;
    gap: 28px;
}

.glc-case-block {
    padding: 36px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 90% 12%, rgba(var(--gls-active-rgb), 0.06), transparent 28%),
        rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(var(--gls-active-rgb), 0.12);
    box-shadow: 0 18px 44px rgba(var(--gls-active-rgb), 0.06);
}

.glc-case-label {
    display: inline-flex;
    margin-bottom: 16px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(var(--gls-active-rgb), 0.10);
    color: var(--gls-active-dark);
    font-size: 13px;
    font-weight: 700;
}

.glc-case-block h2 {
    margin: 0;
    color: var(--gls-text);
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-weight: 700;
}

.glc-case-block h3 {
    margin: 0 0 14px;
    color: var(--gls-text);
    font-size: 22px;
    line-height: 1.2;
}

.glc-case-block p {
    margin: 18px 0 0;
    color: var(--gls-muted);
    font-size: 17px;
    line-height: 1.7;
}

.glc-case-block ul {
    margin: 16px 0 0;
    padding-left: 20px;
    color: var(--gls-muted);
    font-size: 16px;
    line-height: 1.7;
}

.glc-note,
.glc-accent {
    margin-top: 24px;
    padding: 22px;
    border-radius: 22px;
    background: rgba(var(--gls-active-rgb), 0.08);
    color: var(--gls-text);
    font-size: 17px;
    line-height: 1.55;
    font-weight: 600;
}

.glc-list-grid,
.glc-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.glc-list-grid div,
.glc-check-grid div {
    padding: 15px 16px;
    border-radius: 16px;
    background: rgba(var(--gls-active-rgb), 0.055);
    color: var(--gls-text);
    font-size: 15px;
    font-weight: 600;
}

.glc-list-grid div::before,
.glc-check-grid div::before {
    content: "•";
    margin-right: 8px;
    color: var(--gls-active-dark);
}

.glc-two-cols,
.glc-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 26px;
}

.glc-two-cols > div,
.glc-steps div {
    padding: 24px;
    border-radius: 22px;
    background: rgba(var(--gls-active-rgb), 0.045);
    border: 1px solid rgba(var(--gls-active-rgb), 0.10);
}

.glc-steps span {
    display: inline-flex;
    margin-bottom: 14px;
    color: var(--gls-active-dark);
    font-size: 13px;
    font-weight: 800;
}

.glc-steps strong {
    display: block;
    color: var(--gls-text);
    font-size: 18px;
    font-weight: 700;
}

.glc-steps p {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.55;
}

@media (max-width: 980px) {
    .glc-detail-hero__grid,
    .glc-detail-layout,
    .glc-two-cols,
    .glc-steps,
    .glc-detail-stats {
        grid-template-columns: 1fr;
    }

    .glc-detail-nav {
        position: static;
    }

    .glc-detail-hero__image {
        max-height: 520px;
    }
}

@media (max-width: 640px) {
    .glc-page .gls-container {
        width: min(100% - 32px, 1180px);
    }

    .glc-detail-hero {
        padding: 104px 0 42px;
    }

    .glc-detail-hero__text {
        font-size: 16px;
    }

    .glc-case-block {
        padding: 24px;
        border-radius: 24px;
    }

    .glc-list-grid,
    .glc-check-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   CASE DETAIL — RESULT GRID RESTORE
   Блок “Результат”: 4 метрики в карточках, как было
   ========================================================= */

html body main.gls-page .glc-case-block#result {
    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(var(--gls-active-rgb), 0.075),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 255, 255, 0.88) 52%,
            rgba(var(--gls-active-rgb), 0.035) 100%
        ) !important;

    border: 1px solid rgba(var(--gls-active-rgb), 0.12) !important;

    box-shadow:
        0 18px 44px rgba(var(--gls-active-rgb), 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

html body main.gls-page .glc-case-block#result .glc-result-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;

    width: 100% !important;
    margin-top: 28px !important;
}

html body main.gls-page .glc-case-block#result .glc-result-grid > div {
    display: block !important;

    min-width: 0 !important;
    padding: 22px 20px !important;

    border-radius: 22px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.68) 0%,
            rgba(255, 255, 255, 0.42) 52%,
            rgba(var(--gls-active-rgb), 0.075) 100%
        ) !important;

    border: 1px solid rgba(var(--gls-active-rgb), 0.12) !important;

    box-shadow:
        0 12px 28px rgba(var(--gls-active-rgb), 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        inset 0 -1px 0 rgba(var(--gls-active-rgb), 0.06) !important;
}

html body main.gls-page .glc-case-block#result .glc-result-grid > div strong {
    display: block !important;

    margin: 0 0 10px !important;

    color: rgb(var(--gls-active-rgb)) !important;

    font-size: 34px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
}

html body main.gls-page .glc-case-block#result .glc-result-grid > div span {
    display: block !important;

    color: rgba(34, 27, 44, 0.62) !important;

    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
}

@media (max-width: 980px) {
    html body main.gls-page .glc-case-block#result .glc-result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    html body main.gls-page .glc-case-block#result .glc-result-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    html body main.gls-page .glc-case-block#result .glc-result-grid > div {
        padding: 20px !important;
        border-radius: 20px !important;
    }

    html body main.gls-page .glc-case-block#result .glc-result-grid > div strong {
        font-size: 30px !important;
    }
}
/* =========================================================
   CASE DETAIL — ALL RESULT BLOCKS + FORM RESTORE
   Стили результатов для всех старых кейсов + форма заявки
   ========================================================= */

html body main.gls-page.glc-page {
    --gls-active-rgb: var(--theme-rgb, 132, 75, 210);
    --gls-active-2-rgb: var(--theme-soft-rgb, 190, 150, 255);
    --gls-active: rgb(var(--gls-active-rgb));
    --gls-active-dark: rgb(var(--gls-active-rgb));
    --gls-text: rgba(34, 27, 44, 0.94);
    --gls-muted: rgba(34, 27, 44, 0.62);
}

/* общая карточка результата */
html body main.gls-page.glc-page .glc-case-block#result,
html body main.gls-page.glc-page .glc-case-block--result {
    background:
        radial-gradient(circle at 88% 10%, rgba(var(--gls-active-rgb), 0.08), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.88) 54%, rgba(var(--gls-active-rgb),0.04) 100%) !important;

    border: 1px solid rgba(var(--gls-active-rgb), 0.12) !important;

    box-shadow:
        0 18px 44px rgba(var(--gls-active-rgb), 0.07),
        inset 0 1px 0 rgba(255,255,255,0.84) !important;
}

/* =========================================================
   1. Центр “Дам помощи” — glc-result-grid
   ========================================================= */

html body main.gls-page.glc-page .glc-result-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    margin-top: 28px !important;
}

html body main.gls-page.glc-page .glc-result-grid > div {
    padding: 22px 20px !important;
    border-radius: 22px !important;

    background:
        linear-gradient(145deg, rgba(255,255,255,0.70) 0%, rgba(255,255,255,0.44) 52%, rgba(var(--gls-active-rgb),0.075) 100%) !important;

    border: 1px solid rgba(var(--gls-active-rgb), 0.12) !important;

    box-shadow:
        0 12px 28px rgba(var(--gls-active-rgb), 0.06),
        inset 0 1px 0 rgba(255,255,255,0.78),
        inset 0 -1px 0 rgba(var(--gls-active-rgb),0.06) !important;
}

html body main.gls-page.glc-page .glc-result-grid > div strong {
    display: block !important;
    margin: 0 0 10px !important;

    color: rgb(var(--gls-active-rgb)) !important;
    font-size: 34px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
}

html body main.gls-page.glc-page .glc-result-grid > div span {
    display: block !important;

    color: rgba(34, 27, 44, 0.62) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
}

/* =========================================================
   2. АНО / эксперт — glc-result-final
   ========================================================= */

html body main.gls-page.glc-page .glc-result-final {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: 100% !important;
    margin-top: 30px !important;
}

html body main.gls-page.glc-page .glc-result-final__metric {
    display: grid !important;
    grid-template-columns: 160px minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: center !important;

    padding: 26px !important;
    border-radius: 26px !important;

    background: rgba(255, 255, 255, 0.90) !important;
    border: 1px solid rgba(var(--gls-active-rgb), 0.12) !important;

    box-shadow:
        0 16px 34px rgba(var(--gls-active-rgb), 0.06),
        inset 0 1px 0 rgba(255,255,255,0.82) !important;
}

html body main.gls-page.glc-page .glc-result-final__number {
    color: rgb(var(--gls-active-rgb)) !important;
    font-size: 44px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    white-space: nowrap !important;
}

html body main.gls-page.glc-page .glc-result-final__content strong {
    display: block !important;
    color: var(--gls-text) !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
}

html body main.gls-page.glc-page .glc-result-final__content p {
    margin: 12px 0 0 !important;
    color: var(--gls-muted) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

html body main.gls-page.glc-page .glc-result-final__bars {
    display: grid !important;
    gap: 10px !important;
    margin-top: 16px !important;
}

html body main.gls-page.glc-page .glc-result-final__bar {
    display: block !important;
    width: 100% !important;
    height: 11px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, 0.06) !important;
}

html body main.gls-page.glc-page .glc-result-final__bar i {
    display: block !important;
    height: 100% !important;
    border-radius: inherit !important;
}

html body main.gls-page.glc-page .glc-result-final__bar--before i {
    background:
        linear-gradient(90deg, #e85b4a 0%, #f29154 100%) !important;
}

html body main.gls-page.glc-page .glc-result-final__bar--after i {
    background:
        linear-gradient(90deg, #79ad3d 0%, #35a852 100%) !important;

    box-shadow: 0 0 18px rgba(53, 168, 82, 0.22) !important;
}

html body main.gls-page.glc-page .glc-result-final-summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
    margin-top: 24px !important;
}

html body main.gls-page.glc-page .glc-result-final-summary > div {
    padding: 26px !important;
    border-radius: 26px !important;
    background: rgba(var(--gls-active-rgb), 0.055) !important;
    border: 1px solid rgba(var(--gls-active-rgb), 0.10) !important;
}

html body main.gls-page.glc-page .glc-result-final-summary strong {
    display: block !important;
    color: var(--gls-text) !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
}

html body main.gls-page.glc-page .glc-result-final-summary p,
html body main.gls-page.glc-page .glc-result-final-summary li {
    color: var(--gls-muted) !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
}

/* =========================================================
   3. StroyMarket — glc-result-v2
   ========================================================= */

html body main.gls-page.glc-page .glc-result-v2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: 100% !important;
    margin-top: 30px !important;
}

html body main.gls-page.glc-page .glc-result-v2__card {
    display: grid !important;
    grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: center !important;

    padding: 26px !important;
    border-radius: 26px !important;

    background: rgba(255, 255, 255, 0.90) !important;
    border: 1px solid rgba(var(--gls-active-rgb), 0.12) !important;

    box-shadow:
        0 16px 34px rgba(var(--gls-active-rgb), 0.06),
        inset 0 1px 0 rgba(255,255,255,0.82) !important;
}

html body main.gls-page.glc-page .glc-result-v2__head span {
    display: block !important;
    margin-bottom: 10px !important;

    color: var(--gls-text) !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
}

html body main.gls-page.glc-page .glc-result-v2__head strong {
    display: block !important;

    color: rgb(var(--gls-active-rgb)) !important;
    font-size: 36px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
}

html body main.gls-page.glc-page .glc-result-v2__card p {
    margin: 0 !important;
    color: var(--gls-muted) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

html body main.gls-page.glc-page .glc-result-v2-summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
    margin-top: 24px !important;
}

html body main.gls-page.glc-page .glc-result-v2-summary__item {
    padding: 26px !important;
    border-radius: 26px !important;
    background: rgba(var(--gls-active-rgb), 0.055) !important;
    border: 1px solid rgba(var(--gls-active-rgb), 0.10) !important;
}

html body main.gls-page.glc-page .glc-result-v2-summary__item strong {
    display: block !important;
    color: var(--gls-text) !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
}

/* =========================================================
   4. АНО social project — glc-result-metrics
   ========================================================= */

html body main.gls-page.glc-page .glc-result-metrics {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin: 34px 0 !important;
}

html body main.gls-page.glc-page .glc-result-metric {
    padding: 26px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(var(--gls-active-rgb), 0.13) !important;
    background: rgba(255, 255, 255, 0.88) !important;

    box-shadow:
        0 14px 34px rgba(var(--gls-active-rgb), 0.07),
        inset 0 1px 0 rgba(255,255,255,0.82) !important;
}

html body main.gls-page.glc-page .glc-result-metric__top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 20px !important;
    margin: 0 0 20px !important;
}

html body main.gls-page.glc-page .glc-result-metric__top span {
    display: block !important;
    margin: 0 0 7px !important;
    color: var(--gls-text) !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
}

html body main.gls-page.glc-page .glc-result-metric__top strong {
    display: block !important;
    color: rgba(42, 36, 58, 0.62) !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

html body main.gls-page.glc-page .glc-result-metric__delta {
    flex: 0 0 auto !important;
    color: rgb(var(--gls-active-rgb)) !important;
    font-size: 44px !important;
    line-height: 0.9 !important;
    font-weight: 900 !important;
    letter-spacing: -0.055em !important;
}

html body main.gls-page.glc-page .glc-result-metric__compare {
    display: grid !important;
    grid-template-columns: 132px minmax(0, 1fr) 132px !important;
    gap: 18px !important;
    align-items: center !important;
    margin: 0 0 16px !important;
}

html body main.gls-page.glc-page .glc-result-metric__value span {
    display: block !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

html body main.gls-page.glc-page .glc-result-metric__value strong {
    display: block !important;
    font-size: 32px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.045em !important;
}

html body main.gls-page.glc-page .glc-result-metric__value em {
    display: block !important;
    margin-top: 4px !important;
    font-style: normal !important;
    color: rgba(42, 36, 58, 0.58) !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
}

html body main.gls-page.glc-page .glc-result-metric__value--before span,
html body main.gls-page.glc-page .glc-result-metric__value--before strong {
    color: #d94f3f !important;
}

html body main.gls-page.glc-page .glc-result-metric__value--after {
    text-align: right !important;
}

html body main.gls-page.glc-page .glc-result-metric__value--after span,
html body main.gls-page.glc-page .glc-result-metric__value--after strong {
    color: #24964a !important;
}

html body main.gls-page.glc-page .glc-result-metric__bars {
    display: grid !important;
    gap: 12px !important;
}

html body main.gls-page.glc-page .glc-result-metric__bar {
    height: 13px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: rgba(52, 42, 72, 0.085) !important;
}

html body main.gls-page.glc-page .glc-result-metric__bar span {
    display: block !important;
    height: 100% !important;
    width: var(--before) !important;
    border-radius: inherit !important;

    background:
        linear-gradient(90deg, #e85b4a 0%, #f29154 100%) !important;
}

html body main.gls-page.glc-page .glc-result-metric__bar--after span {
    width: var(--after) !important;

    background:
        linear-gradient(90deg, #79ad3d 0%, #35a852 100%) !important;

    box-shadow: 0 0 18px rgba(53, 168, 82, 0.22) !important;
}

/* =========================================================
   5. До / После внутри результатов
   ========================================================= */

html body main.gls-page.glc-page .glc-before-after {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 28px !important;
    align-items: stretch !important;
    margin-top: 30px !important;
}

html body main.gls-page.glc-page .glc-before-after__center {
    display: none !important;
}

html body main.gls-page.glc-page .glc-before-after__side {
    padding: 24px !important;
    border-radius: 26px !important;
    border: 1px solid rgba(var(--gls-active-rgb), 0.12) !important;
    background: rgba(255, 255, 255, 0.78) !important;
}

html body main.gls-page.glc-page .glc-before-after__side--after {
    background:
        linear-gradient(145deg, rgba(255,255,255,0.88), rgba(var(--gls-active-rgb),0.055)) !important;
}

html body main.gls-page.glc-page .glc-before-after__title span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    color: var(--gls-text) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

html body main.gls-page.glc-page .glc-before-after__items {
    display: grid !important;
    gap: 12px !important;
    margin-top: 18px !important;
}

html body main.gls-page.glc-page .glc-ba-item {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 14px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.84) !important;
    border: 1px solid rgba(var(--gls-active-rgb), 0.10) !important;
}

html body main.gls-page.glc-page .glc-ba-item__icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    background: rgb(var(--gls-active-rgb)) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

html body main.gls-page.glc-page .glc-ba-item strong {
    display: block !important;
    color: var(--gls-text) !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
}

html body main.gls-page.glc-page .glc-ba-item span {
    display: block !important;
    margin-top: 5px !important;
    color: var(--gls-muted) !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
}

/* =========================================================
   6. Форма на детальной странице кейса
   ========================================================= */

html body main.gls-page.glc-page .glc-detail-form-section {
    padding: 90px 0 120px !important;
    background:
        radial-gradient(circle at 12% 12%, rgba(var(--gls-active-rgb), 0.08), transparent 34%),
        linear-gradient(180deg, rgba(var(--gls-active-rgb), 0.035) 0%, #ffffff 100%) !important;
}

html body main.gls-page.glc-page .glc-detail-form-box {
    display: grid !important;
    grid-template-columns: minmax(0, 0.82fr) minmax(440px, 1fr) !important;
    gap: 42px !important;
    align-items: center !important;

    padding: 42px !important;
    border-radius: 36px !important;

    background:
        radial-gradient(circle at 12% 18%, rgba(var(--gls-active-rgb), 0.14), transparent 34%),
        radial-gradient(circle at 90% 20%, rgba(var(--gls-active-2-rgb), 0.10), transparent 32%),
        linear-gradient(135deg, rgba(var(--gls-active-rgb), 0.08), rgba(255, 255, 255, 0.92)) !important;

    border: 1px solid rgba(var(--gls-active-rgb), 0.14) !important;

    box-shadow:
        0 24px 70px rgba(var(--gls-active-rgb), 0.08),
        inset 0 1px 0 rgba(255,255,255,0.82) !important;
}

html body main.gls-page.glc-page .glc-detail-form-box__content h2 {
    margin: 18px 0 0 !important;
    color: var(--gls-text) !important;
    font-size: clamp(34px, 4vw, 56px) !important;
    line-height: 1 !important;
    letter-spacing: -0.05em !important;
    font-weight: 700 !important;
}

html body main.gls-page.glc-page .glc-detail-form-box__content p {
    max-width: 560px !important;
    margin: 22px 0 0 !important;
    color: var(--gls-muted) !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
}

html body main.gls-page.glc-page .glc-detail-form-box__meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 28px !important;
}

html body main.gls-page.glc-page .glc-detail-form-box__meta span {
    display: inline-flex !important;
    padding: 9px 13px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.74) !important;
    border: 1px solid rgba(var(--gls-active-rgb), 0.12) !important;
    color: var(--gls-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

html body main.gls-page.glc-page .glc-detail-form {
    padding: 28px !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    border: 1px solid rgba(var(--gls-active-rgb), 0.12) !important;
    box-shadow: 0 18px 48px rgba(var(--gls-active-rgb), 0.07) !important;
}

html body main.gls-page.glc-page .glc-detail-form__grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

html body main.gls-page.glc-page .glc-detail-form label span {
    display: block !important;
    margin-bottom: 8px !important;
    color: var(--gls-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

html body main.gls-page.glc-page .glc-detail-form input,
html body main.gls-page.glc-page .glc-detail-form textarea,
html body main.gls-page.glc-page .glc-detail-form select {
    width: 100% !important;
    min-height: 50px !important;
    padding: 14px 15px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(var(--gls-active-rgb), 0.16) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: var(--gls-text) !important;
    font: inherit !important;
    font-size: 15px !important;
    outline: none !important;
}

html body main.gls-page.glc-page .glc-detail-form textarea {
    min-height: 118px !important;
    resize: vertical !important;
}

html body main.gls-page.glc-page .glc-detail-form__textarea {
    margin-top: 16px !important;
}

html body main.gls-page.glc-page .glc-detail-form__agree {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-top: 18px !important;
}

html body main.gls-page.glc-page .glc-detail-form__agree input {
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin-top: 2px !important;
    padding: 0 !important;
}

html body main.gls-page.glc-page .glc-detail-form__agree span {
    margin: 0 !important;
    color: var(--gls-muted) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
}

html body main.gls-page.glc-page .glc-detail-form__button {
    width: 100% !important;
    min-height: 54px !important;
    margin-top: 22px !important;
    border: 0 !important;
    border-radius: 16px !important;
    color: #ffffff !important;
    background: rgb(var(--gls-active-rgb)) !important;
    font: inherit !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 14px 28px rgba(var(--gls-active-rgb), 0.22) !important;
}

html body main.gls-page.glc-page .glc-detail-form__success {
    display: none;
    margin-top: 16px !important;
    padding: 15px 16px !important;
    border-radius: 16px !important;
    background: rgba(121, 173, 61, 0.12) !important;
    color: #496c24 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
}

html body main.gls-page.glc-page .glc-detail-form__success.is-visible {
    display: block !important;
}

/* mobile */
@media (max-width: 980px) {
    html body main.gls-page.glc-page .glc-result-grid,
    html body main.gls-page.glc-page .glc-result-final-summary,
    html body main.gls-page.glc-page .glc-result-v2-summary,
    html body main.gls-page.glc-page .glc-before-after,
    html body main.gls-page.glc-page .glc-detail-form-box {
        grid-template-columns: 1fr !important;
    }

    html body main.gls-page.glc-page .glc-result-final__metric,
    html body main.gls-page.glc-page .glc-result-v2__card,
    html body main.gls-page.glc-page .glc-result-metric__compare {
        grid-template-columns: 1fr !important;
    }

    html body main.gls-page.glc-page .glc-result-metric__value--after {
        text-align: left !important;
    }
}

@media (max-width: 640px) {
    html body main.gls-page.glc-page .glc-result-grid {
        grid-template-columns: 1fr !important;
    }

    html body main.gls-page.glc-page .glc-detail-form-section {
        padding: 76px 0 90px !important;
    }

    html body main.gls-page.glc-page .glc-detail-form-box {
        padding: 24px !important;
        border-radius: 28px !important;
    }

    html body main.gls-page.glc-page .glc-detail-form {
        padding: 22px !important;
        border-radius: 24px !important;
    }

    html body main.gls-page.glc-page .glc-detail-form__grid {
        grid-template-columns: 1fr !important;
    }
}
/* =========================================================
   CASE ANO SOCIAL PROJECT 2 — RESULT METRICS OLD LAYOUT
   Возвращаем блок результата как был:
   заголовок сверху, +% справа, было/стало с полосками внутри карточки
   ========================================================= */

html body main.gls-page.glc-page .glc-result-metrics {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    width: 100% !important;
    margin: 34px 0 !important;
}

/* сама карточка метрики */
html body main.gls-page.glc-page .glc-result-metric {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    padding: 28px 30px !important;
    border-radius: 24px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 255, 255, 0.88) 58%,
            rgba(var(--gls-active-rgb), 0.035) 100%
        ) !important;

    border: 1px solid rgba(var(--gls-active-rgb), 0.12) !important;

    box-shadow:
        0 14px 34px rgba(var(--gls-active-rgb), 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

/* верх карточки: название слева, процент справа */
html body main.gls-page.glc-page .glc-result-metric__top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 24px !important;
    align-items: start !important;

    margin: 0 0 22px !important;
}

html body main.gls-page.glc-page .glc-result-metric__top span {
    display: block !important;
    margin: 0 0 6px !important;

    color: rgba(34, 27, 44, 0.94) !important;

    font-size: 18px !important;
    line-height: 1.18 !important;
    font-weight: 900 !important;
    letter-spacing: -0.025em !important;
}

html body main.gls-page.glc-page .glc-result-metric__top strong {
    display: block !important;

    color: rgba(34, 27, 44, 0.62) !important;

    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

/* большой процент справа */
html body main.gls-page.glc-page .glc-result-metric__delta {
    display: block !important;
    flex: none !important;

    color: rgb(var(--gls-active-rgb)) !important;

    font-size: 44px !important;
    line-height: 0.9 !important;
    font-weight: 950 !important;
    letter-spacing: -0.06em !important;
    white-space: nowrap !important;

    text-shadow:
        0 8px 20px rgba(var(--gls-active-rgb), 0.18) !important;
}

/* центральная зона: было / полоски / стало */
html body main.gls-page.glc-page .glc-result-metric__compare {
    display: grid !important;
    grid-template-columns: 118px minmax(0, 1fr) 118px !important;
    gap: 22px !important;
    align-items: center !important;

    width: 100% !important;
    margin: 0 0 16px !important;
}

/* значения было/стало */
html body main.gls-page.glc-page .glc-result-metric__value {
    display: grid !important;
    gap: 5px !important;
    min-width: 0 !important;
}

html body main.gls-page.glc-page .glc-result-metric__value--after {
    text-align: right !important;
}

html body main.gls-page.glc-page .glc-result-metric__value span {
    display: block !important;

    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

html body main.gls-page.glc-page .glc-result-metric__value strong {
    display: block !important;

    font-size: 30px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -0.045em !important;
}

html body main.gls-page.glc-page .glc-result-metric__value em {
    display: block !important;
    margin-top: 2px !important;

    font-style: normal !important;

    color: rgba(42, 36, 58, 0.58) !important;

    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
}

/* было — красно-оранжевый */
html body main.gls-page.glc-page .glc-result-metric__value--before span,
html body main.gls-page.glc-page .glc-result-metric__value--before strong {
    color: #d94f3f !important;
}

/* стало — зелёный */
html body main.gls-page.glc-page .glc-result-metric__value--after span,
html body main.gls-page.glc-page .glc-result-metric__value--after strong {
    color: #24964a !important;
}

/* полоски по центру */
html body main.gls-page.glc-page .glc-result-metric__bars {
    display: grid !important;
    gap: 12px !important;
    min-width: 0 !important;
}

html body main.gls-page.glc-page .glc-result-metric__bar {
    display: block !important;

    width: 100% !important;
    height: 12px !important;

    overflow: hidden !important;
    border-radius: 999px !important;

    background: rgba(52, 42, 72, 0.085) !important;
}

html body main.gls-page.glc-page .glc-result-metric__bar span {
    display: block !important;

    height: 100% !important;
    width: var(--before) !important;

    border-radius: inherit !important;

    background:
        linear-gradient(
            90deg,
            #e85b4a 0%,
            #f29154 100%
        ) !important;

    box-shadow:
        0 0 16px rgba(232, 91, 74, 0.16) !important;
}

html body main.gls-page.glc-page .glc-result-metric__bar--after span {
    width: var(--after) !important;

    background:
        linear-gradient(
            90deg,
            #79ad3d 0%,
            #35a852 100%
        ) !important;

    box-shadow:
        0 0 18px rgba(53, 168, 82, 0.22) !important;
}

/* описание снизу */
html body main.gls-page.glc-page .glc-result-metric p {
    margin: 0 !important;

    color: rgba(42, 36, 58, 0.66) !important;

    font-size: 14px !important;
    line-height: 1.52 !important;
    font-weight: 500 !important;
}

/* нижние две карточки “Что изменилось / Какие метрики” */
html body main.gls-page.glc-page .glc-result-summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;

    width: 100% !important;
    margin: 34px 0 0 !important;
}

html body main.gls-page.glc-page .glc-result-summary__item,
html body main.gls-page.glc-page .glc-result-summary > div {
    padding: 26px !important;

    border-radius: 24px !important;
    border: 1px solid rgba(var(--gls-active-rgb), 0.13) !important;

    background: rgba(255, 255, 255, 0.72) !important;

    box-shadow:
        0 12px 30px rgba(var(--gls-active-rgb), 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
}

html body main.gls-page.glc-page .glc-result-summary__item strong,
html body main.gls-page.glc-page .glc-result-summary > div > strong {
    display: block !important;
    margin: 0 0 14px !important;

    color: rgba(34, 27, 44, 0.94) !important;

    font-size: 22px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
}

html body main.gls-page.glc-page .glc-result-summary__item p,
html body main.gls-page.glc-page .glc-result-summary__item li,
html body main.gls-page.glc-page .glc-result-summary > div p,
html body main.gls-page.glc-page .glc-result-summary > div li {
    color: rgba(42, 36, 58, 0.66) !important;

    font-size: 15px !important;
    line-height: 1.65 !important;
    font-weight: 500 !important;
}

/* адаптив */
@media (max-width: 760px) {
    html body main.gls-page.glc-page .glc-result-metric {
        padding: 22px !important;
        border-radius: 22px !important;
    }

    html body main.gls-page.glc-page .glc-result-metric__top {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    html body main.gls-page.glc-page .glc-result-metric__delta {
        font-size: 36px !important;
    }

    html body main.gls-page.glc-page .glc-result-metric__compare {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    html body main.gls-page.glc-page .glc-result-metric__value--after {
        text-align: left !important;
    }

    html body main.gls-page.glc-page .glc-result-summary {
        grid-template-columns: 1fr !important;
    }
}
/* =========================================================
   CASE DETAIL — IMAGE LIGHTBOX
   Модалка увеличения изображений кейсов
   ========================================================= */

html.glc-lightbox-is-open,
body.glc-lightbox-is-open {
    overflow: hidden !important;
}

.js-glc-lightbox-trigger {
    cursor: zoom-in !important;
}

.glc-lightbox {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 34px !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transition:
        opacity 220ms ease,
        visibility 220ms ease !important;
}

.glc-lightbox.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.glc-lightbox__backdrop {
    position: absolute !important;
    inset: 0 !important;

    background:
        radial-gradient(
            circle at 50% 12%,
            rgba(255, 255, 255, 0.16),
            rgba(255, 255, 255, 0.04) 26%,
            rgba(0, 0, 0, 0.78) 100%
        ) !important;

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

.glc-lightbox__dialog {
    position: relative !important;
    z-index: 2 !important;

    width: min(100%, 1180px) !important;
    max-height: calc(100vh - 68px) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    transform: scale(0.96) translateY(10px) !important;

    transition:
        transform 220ms ease !important;
}

.glc-lightbox.is-open .glc-lightbox__dialog {
    transform: scale(1) translateY(0) !important;
}

.glc-lightbox__image-wrap {
    position: relative !important;

    width: 100% !important;
    max-height: calc(100vh - 68px) !important;

    overflow: auto !important;

    border-radius: 28px !important;

    background: rgba(255, 255, 255, 0.94) !important;

    border: 1px solid rgba(255, 255, 255, 0.52) !important;

    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.42),
        0 12px 34px rgba(0, 0, 0, 0.28),
        0 0 34px rgba(var(--gls-active-rgb), 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
}

.glc-lightbox__image {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 auto !important;

    border-radius: 28px !important;
}

.glc-lightbox__close {
    position: absolute !important;
    top: -18px !important;
    right: -18px !important;
    z-index: 4 !important;

    width: 48px !important;
    height: 48px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    border-radius: 999px !important;

    color: rgba(255, 255, 255, 0.96) !important;

    background:
        linear-gradient(
            145deg,
            rgba(34, 38, 46, 0.96) 0%,
            rgba(10, 12, 16, 0.98) 100%
        ) !important;

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;

    font-size: 34px !important;
    line-height: 1 !important;
    font-weight: 300 !important;

    cursor: pointer !important;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease !important;
}

.glc-lightbox__close:hover {
    transform: scale(1.06) !important;

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.42),
        0 0 22px rgba(var(--gls-active-rgb), 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

/* hover-лупа поверх изображений, если её нет */
.glc-image-preview,
.glc-detail-hero__image,
.glc-case-block figure,
.glc-case-block .glc-detail-image,
.glc-case-block .glc-screenshot,
.glc-case-block .glc-case-image {
    position: relative !important;
}

.glc-image-preview::after,
.glc-detail-hero__image::after,
.glc-case-block figure:has(img)::after,
.glc-case-block .glc-detail-image:has(img)::after,
.glc-case-block .glc-screenshot:has(img)::after,
.glc-case-block .glc-case-image:has(img)::after {
    content: "+" !important;

    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 5 !important;

    width: 58px !important;
    height: 58px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 999px !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            rgba(24, 26, 32, 0.88),
            rgba(6, 8, 12, 0.92)
        ) !important;

    border: 1px solid rgba(255, 255, 255, 0.34) !important;

    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.28),
        0 0 20px rgba(var(--gls-active-rgb), 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;

    font-size: 34px !important;
    line-height: 1 !important;
    font-weight: 300 !important;

    opacity: 0 !important;
    pointer-events: none !important;

    transform: translate(-50%, -50%) scale(0.88) !important;

    transition:
        opacity 180ms ease,
        transform 180ms ease !important;
}

.glc-image-preview:hover::after,
.glc-detail-hero__image:hover::after,
.glc-case-block figure:has(img):hover::after,
.glc-case-block .glc-detail-image:has(img):hover::after,
.glc-case-block .glc-screenshot:has(img):hover::after,
.glc-case-block .glc-case-image:has(img):hover::after {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

@media (max-width: 760px) {
    .glc-lightbox {
        padding: 16px !important;
    }

    .glc-lightbox__dialog {
        max-height: calc(100vh - 32px) !important;
    }

    .glc-lightbox__image-wrap {
        max-height: calc(100vh - 32px) !important;
        border-radius: 20px !important;
    }

    .glc-lightbox__image {
        border-radius: 20px !important;
    }

    .glc-lightbox__close {
        top: 10px !important;
        right: 10px !important;

        width: 42px !important;
        height: 42px !important;

        font-size: 30px !important;
    }
}
/* =========================================================
   CASE DETAIL — REMOVE HOVER ZOOM ICON
   Убираем лупу/плюсик при наведении, открытие картинки оставляем
   ========================================================= */

.glc-image-preview::after,
.glc-detail-hero__image::after,
.glc-case-block figure:has(img)::after,
.glc-case-block .glc-detail-image:has(img)::after,
.glc-case-block .glc-screenshot:has(img)::after,
.glc-case-block .glc-case-image:has(img)::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* если старая лупа была отдельным элементом внутри HTML */
.glc-image-preview__label,
.glc-image-zoom,
.glc-zoom-icon,
.glc-preview-zoom,
.glc-image-preview .zoom,
.glc-image-preview .zoom-icon {
    display: none !important;
}

/* оставляем только понятный курсор */
.js-glc-lightbox-trigger,
.glc-image-preview,
.glc-detail-hero__image,
.glc-case-block figure:has(img),
.glc-case-block .glc-detail-image:has(img),
.glc-case-block .glc-screenshot:has(img),
.glc-case-block .glc-case-image:has(img) {
    cursor: zoom-in !important;
}
/* =========================================================
   CASE DETAIL — EXPERT FORM OVERLAP FIX
   Форма в кейсе эксперта не наезжает на заголовок
   ========================================================= */

html body.soul-page--case-experts main.gls-page.glc-page .glc-detail-form-box {
    grid-template-columns: minmax(0, 0.82fr) minmax(380px, 0.92fr) !important;
    gap: 36px !important;
    align-items: center !important;
    overflow: hidden !important;
}

html body.soul-page--case-experts main.gls-page.glc-page .glc-detail-form-box__content {
    min-width: 0 !important;
    max-width: 430px !important;
    position: relative !important;
    z-index: 1 !important;
}

html body.soul-page--case-experts main.gls-page.glc-page .glc-detail-form-box__content h2 {
    max-width: 430px !important;

    font-size: clamp(34px, 3.2vw, 50px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.055em !important;

    overflow-wrap: normal !important;
    word-break: normal !important;
}

html body.soul-page--case-experts main.gls-page.glc-page .glc-detail-form {
    position: relative !important;
    z-index: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 440px !important;
    justify-self: end !important;
}

/* когда блок стоит внутри узкой колонки рядом с боковым меню — складываем в одну колонку */
@media (max-width: 1240px) {
    html body.soul-page--case-experts main.gls-page.glc-page .glc-detail-form-box {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    html body.soul-page--case-experts main.gls-page.glc-page .glc-detail-form-box__content {
        max-width: 620px !important;
    }

    html body.soul-page--case-experts main.gls-page.glc-page .glc-detail-form-box__content h2 {
        max-width: 620px !important;
        font-size: clamp(34px, 5vw, 54px) !important;
    }

    html body.soul-page--case-experts main.gls-page.glc-page .glc-detail-form {
        max-width: 560px !important;
        justify-self: start !important;
    }
}

@media (max-width: 640px) {
    html body.soul-page--case-experts main.gls-page.glc-page .glc-detail-form-box__content h2 {
        font-size: 36px !important;
        line-height: 1 !important;
    }

    html body.soul-page--case-experts main.gls-page.glc-page .glc-detail-form {
        max-width: none !important;
    }
}
/* =========================================================
   CASE DETAIL — GLS BADGE STYLE
   Бейджи в hero кейсов как на остальных страницах
   ========================================================= */

html body main.gls-page.glc-page .gls-badge {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;

    width: fit-content !important;
    max-width: 100% !important;

    min-height: 34px !important;
    padding: 0 15px !important;

    border-radius: 999px !important;

    color: rgba(34, 27, 44, 0.82) !important;

    background:
        radial-gradient(
            circle at 18% 0%,
            rgba(255, 255, 255, 0.92) 0%,
            rgba(255, 255, 255, 0.34) 42%,
            rgba(255, 255, 255, 0.00) 74%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.72) 0%,
            rgba(255, 255, 255, 0.44) 48%,
            rgba(var(--gls-active-rgb), 0.075) 100%
        ) !important;

    border: 1px solid rgba(255, 255, 255, 0.68) !important;

    box-shadow:
        0 12px 24px rgba(48, 42, 62, 0.12),
        0 5px 12px rgba(48, 42, 62, 0.08),
        0 0 16px rgba(var(--gls-active-rgb), 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.90),
        inset 0 -1px 0 rgba(var(--gls-active-rgb), 0.08) !important;

    backdrop-filter: blur(14px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;

    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
}

/* маленькая черта слева, как на главной/о нас */
html body main.gls-page.glc-page .gls-badge::before {
    content: "" !important;

    display: inline-block !important;

    width: 15px !important;
    height: 2px !important;

    border-radius: 999px !important;

    background:
        linear-gradient(
            90deg,
            rgba(34, 27, 44, 0.20),
            rgba(var(--gls-active-rgb), 0.46)
        ) !important;

    box-shadow:
        0 0 6px rgba(var(--gls-active-rgb), 0.18) !important;
}

/* если бейдж стоит в hero */
html body main.gls-page.glc-page .glc-detail-hero .gls-badge,
html body main.gls-page.glc-page .glc-detail-hero__content .gls-badge {
    margin-bottom: 22px !important;
}

/* мобильная версия */
@media (max-width: 640px) {
    html body main.gls-page.glc-page .gls-badge {
        min-height: 32px !important;
        padding: 0 13px !important;

        font-size: 13px !important;
    }

    html body main.gls-page.glc-page .gls-badge::before {
        width: 13px !important;
    }
}
/* =========================================================
   CASE PAGES — CONTINUOUS THEME GRADIENT BACKGROUND
   Один плавный фон на всю страницу кейса без резких белых разрывов
   ========================================================= */

/* вся страница кейса получает один общий фон */
html body.soul-page--case main.gls-page.glc-page,
html body.soul-page--cases main.gls-page.glc-page,
html body main.gls-page.glc-page {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;

    background:
        radial-gradient(
            ellipse at 14% 4%,
            rgba(var(--gls-active-rgb), 0.16) 0%,
            rgba(var(--gls-active-rgb), 0.075) 24%,
            rgba(var(--gls-active-rgb), 0.00) 48%
        ),
        radial-gradient(
            ellipse at 88% 18%,
            rgba(var(--gls-active-rgb), 0.12) 0%,
            rgba(var(--gls-active-rgb), 0.055) 28%,
            rgba(var(--gls-active-rgb), 0.00) 54%
        ),
        radial-gradient(
            ellipse at 18% 62%,
            rgba(var(--gls-active-rgb), 0.10) 0%,
            rgba(var(--gls-active-rgb), 0.045) 26%,
            rgba(var(--gls-active-rgb), 0.00) 52%
        ),
        radial-gradient(
            ellipse at 86% 86%,
            rgba(var(--gls-active-rgb), 0.13) 0%,
            rgba(var(--gls-active-rgb), 0.055) 28%,
            rgba(var(--gls-active-rgb), 0.00) 56%
        ),
        linear-gradient(
            180deg,
            rgba(var(--gls-active-rgb), 0.13) 0%,
            rgba(255, 255, 255, 0.96) 18%,
            rgba(255, 255, 255, 0.94) 34%,
            rgba(var(--gls-active-rgb), 0.060) 50%,
            rgba(255, 255, 255, 0.95) 68%,
            rgba(var(--gls-active-rgb), 0.075) 84%,
            rgba(255, 255, 255, 0.96) 100%
        ) !important;

    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}

/* убираем белые фоны у крупных секций, которые делали “рывки” */
html body main.gls-page.glc-page .glc-detail-hero,
html body main.gls-page.glc-page .glc-detail-section,
html body main.gls-page.glc-page .glc-detail-form-section,
html body main.gls-page.glc-page .glc-cases-hero,
html body main.gls-page.glc-page .glc-cases-section,
html body main.gls-page.glc-page .glc-cases-list-section,
html body main.gls-page.glc-page .glc-filter-section,
html body main.gls-page.glc-page section {
    background: transparent !important;
}

/* чтобы форма не создавала отдельный резкий фон */
html body main.gls-page.glc-page .glc-detail-form-section {
    padding-top: 90px !important;
    padding-bottom: 120px !important;
}

/* сами карточки остаются бело-стеклянными на общем градиенте */
html body main.gls-page.glc-page .glc-case-block,
html body main.gls-page.glc-page .glc-detail-form-box,
html body main.gls-page.glc-page .glc-detail-hero__image,
html body main.gls-page.glc-page .glc-detail-nav {
    background:
        radial-gradient(
            circle at 88% 8%,
            rgba(var(--gls-active-rgb), 0.055),
            transparent 34%
        ),
        rgba(255, 255, 255, 0.88) !important;

    backdrop-filter: blur(14px) saturate(1.04) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.04) !important;
}

/* для списка кейсов тоже убираем ощущение отдельных белых полос */
html body.soul-page--cases main.gls-page,
html body.soul-page--cases main.gls-page section,
html body.soul-page--cases .glc-page section {
    background-color: transparent !important;
}

/* мягче на мобильной */
@media (max-width: 760px) {
    html body.soul-page--case main.gls-page.glc-page,
    html body.soul-page--cases main.gls-page.glc-page,
    html body main.gls-page.glc-page {
        background:
            radial-gradient(
                ellipse at 20% 4%,
                rgba(var(--gls-active-rgb), 0.13) 0%,
                rgba(var(--gls-active-rgb), 0.055) 28%,
                rgba(var(--gls-active-rgb), 0.00) 56%
            ),
            radial-gradient(
                ellipse at 80% 78%,
                rgba(var(--gls-active-rgb), 0.11) 0%,
                rgba(var(--gls-active-rgb), 0.045) 28%,
                rgba(var(--gls-active-rgb), 0.00) 56%
            ),
            linear-gradient(
                180deg,
                rgba(var(--gls-active-rgb), 0.105) 0%,
                rgba(255, 255, 255, 0.96) 22%,
                rgba(255, 255, 255, 0.94) 44%,
                rgba(var(--gls-active-rgb), 0.055) 68%,
                rgba(255, 255, 255, 0.96) 100%
            ) !important;
    }
}
/* =========================================================
   CASES LIST — HEADER GRAPHITE / NEUTRAL TITANIUM
   Шапка на странице списка кейсов: серо-графитовый титан без золотого оттенка
   ========================================================= */

/* основная glass-капсула */
html body.soul-page--cases header.soul-header .soul-header__inner,
html body:has(.glc-cases-hero) header.soul-header .soul-header__inner {
    background:
        radial-gradient(
            circle at 16% -35%,
            rgba(255, 255, 255, 0.70) 0%,
            rgba(255, 255, 255, 0.30) 30%,
            rgba(255, 255, 255, 0.06) 58%,
            rgba(255, 255, 255, 0.00) 78%
        ),
        radial-gradient(
            circle at 82% 0%,
            rgba(170, 178, 184, 0.30) 0%,
            rgba(170, 178, 184, 0.12) 34%,
            rgba(170, 178, 184, 0.00) 68%
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.50) 0%,
            rgba(244, 246, 246, 0.34) 34%,
            rgba(213, 218, 220, 0.26) 62%,
            rgba(136, 144, 150, 0.22) 100%
        ) !important;

    border-color: rgba(255, 255, 255, 0.62) !important;

    box-shadow:
        0 20px 44px rgba(52, 58, 64, 0.14),
        0 8px 20px rgba(52, 58, 64, 0.09),
        0 0 24px rgba(110, 118, 126, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.84),
        inset 0 2px 8px rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(80, 88, 96, 0.13) !important;
}

/* WEB-кнопка */
html body.soul-page--cases header.soul-header .soul-header__web-button,
html body:has(.glc-cases-hero) header.soul-header .soul-header__web-button {
    color: rgba(34, 36, 42, 0.92) !important;

    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(255, 255, 255, 0.84) 0%,
            rgba(255, 255, 255, 0.32) 42%,
            rgba(255, 255, 255, 0.00) 72%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.78) 0%,
            rgba(240, 243, 244, 0.58) 42%,
            rgba(196, 203, 207, 0.34) 100%
        ) !important;

    border-color: rgba(255, 255, 255, 0.66) !important;

    box-shadow:
        0 12px 24px rgba(52, 58, 64, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        inset 0 -1px 0 rgba(80, 88, 96, 0.10) !important;
}

/* dropdown WEB */
html body.soul-page--cases header.soul-header .soul-header__web-menu,
html body:has(.glc-cases-hero) header.soul-header .soul-header__web-menu {
    background:
        linear-gradient(
            180deg,
            rgba(250, 252, 252, 0.90) 0%,
            rgba(235, 239, 240, 0.84) 48%,
            rgba(207, 214, 218, 0.78) 100%
        ) !important;

    border-color: rgba(255, 255, 255, 0.74) !important;

    box-shadow:
        0 20px 42px rgba(52, 58, 64, 0.16),
        0 8px 20px rgba(52, 58, 64, 0.10),
        0 0 24px rgba(110, 118, 126, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        inset 0 -1px 0 rgba(80, 88, 96, 0.11) !important;
}

html body.soul-page--cases header.soul-header .soul-header__web-menu a,
html body:has(.glc-cases-hero) header.soul-header .soul-header__web-menu a {
    color: rgba(34, 36, 42, 0.90) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.94) 0%,
            rgba(246, 248, 248, 0.80) 44%,
            rgba(222, 228, 231, 0.66) 100%
        ) !important;

    border-color: rgba(150, 158, 166, 0.36) !important;

    box-shadow:
        0 8px 18px rgba(52, 58, 64, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 -1px 0 rgba(80, 88, 96, 0.09) !important;
}

/* активный пункт “Кейсы” */
html body.soul-page--cases header.soul-header .soul-header__nav a[href="/pages/cases.php"],
html body:has(.glc-cases-hero) header.soul-header .soul-header__nav a[href="/pages/cases.php"] {
    color: rgba(28, 30, 36, 0.96) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.84) 0%,
            rgba(238, 241, 242, 0.58) 46%,
            rgba(178, 186, 192, 0.42) 100%
        ) !important;

    border: 1px solid rgba(255, 255, 255, 0.64) !important;

    box-shadow:
        0 10px 22px rgba(52, 58, 64, 0.12),
        0 0 16px rgba(110, 118, 126, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.80),
        inset 0 -1px 0 rgba(80, 88, 96, 0.11) !important;
}

/* Лаборатория остаётся акцентной, но без золотого */
html body.soul-page--cases header.soul-header .soul-header__nav a[href="/pages/lab.php"],
html body:has(.glc-cases-hero) header.soul-header .soul-header__nav a[href="/pages/lab.php"] {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.76) 0%,
            rgba(244, 236, 248, 0.48) 44%,
            rgba(190, 210, 218, 0.38) 100%
        ) !important;

    border: 1px solid rgba(255, 255, 255, 0.58) !important;

    box-shadow:
        0 10px 22px rgba(70, 76, 88, 0.10),
        0 0 16px rgba(160, 92, 255, 0.10),
        0 0 14px rgba(92, 142, 170, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.76),
        inset 0 -1px 0 rgba(80, 88, 96, 0.10) !important;
}

/* CTA — серо-графитовый titanium вместо золотого */
html body.soul-page--cases header.soul-header a.soul-header__cta.soul-btn,
html body:has(.glc-cases-hero) header.soul-header a.soul-header__cta.soul-btn {
    color: rgba(28, 30, 36, 0.94) !important;
    -webkit-text-fill-color: rgba(28, 30, 36, 0.94) !important;

    background:
        radial-gradient(
            circle at 22% 0%,
            rgba(255, 255, 255, 0.68) 0%,
            rgba(255, 255, 255, 0.24) 34%,
            rgba(255, 255, 255, 0.00) 66%
        ),
        linear-gradient(
            135deg,
            rgb(255, 255, 255) 0%,
            rgb(239, 242, 243) 24%,
            rgb(205, 212, 216) 52%,
            rgb(154, 164, 172) 72%,
            rgb(246, 248, 248) 100%
        ) !important;

    border: 1px solid rgba(104, 114, 124, 0.46) !important;

    box-shadow:
        0 16px 32px rgba(52, 58, 64, 0.16),
        0 7px 16px rgba(52, 58, 64, 0.10),
        0 0 18px rgba(110, 118, 126, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.90),
        inset 0 -1px 0 rgba(80, 88, 96, 0.14) !important;
}
.glc-back-link {
  font-size: 16px;
  font-weight: 700;
}

@media (max-width: 640px) {
  .glc-back-link {
    font-size: 12px;
  }
}
/* FIX - размеры заголовков карточек кейсов после responsive.css */

html body.soul-page--cases .soul-case-card .soul-case-card__title,
html body.soul-page--cases .soul-case-card h2.soul-case-card__title {
    font-size: clamp(25px, 2vw, 34px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.045em !important;
    font-weight: 750 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

html body.soul-page--cases .soul-case-card .soul-case-card__title a {
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
}
/* =========================================================
   CASES 0.4.1.126 — CASES + EXAMPLES
   ========================================================= */

.soul-cases-filter-stack {
    display: grid;
    gap: 12px;
    margin-bottom: 42px;
}

.soul-cases-filter-stack .soul-cases-filter {
    margin-bottom: 0;
}

.soul-cases-filter--type .soul-cases-filter__btn {
    --filter-rgb: 82, 88, 100;
    --filter-text: rgba(55, 60, 70, 0.94);
}

.soul-case-card__visual--button,
.soul-case-card__title-button,
.soul-case-card__link--button {
    font: inherit;
    cursor: pointer;
}

.soul-case-card__visual--button {
    width: auto;
    border: 0;
    background: transparent;
    text-align: left;
}

.soul-case-card__title-button {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    color: rgba(29,33,44,0.96);
    background: transparent;
    text-align: left;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    font-weight: inherit;
}

.soul-case-card__title-button:hover {
    color: var(--card-dark);
}

.soul-case-card__feature-block {
    margin-top: 18px;
}

.soul-case-card__feature-label {
    margin-bottom: 9px;
    color: rgba(29,33,44,0.56);
    font-size: 11px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.soul-case-card__features {
    display: grid;
    gap: 7px;
}

.soul-case-card__features span {
    position: relative;
    padding: 9px 11px 9px 27px;
    border-radius: 13px;
    color: rgba(29,33,44,0.82);
    background: rgba(var(--card-rgb),0.065);
    border: 1px solid rgba(var(--card-rgb),0.08);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 550;
}

.soul-case-card__features span::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgb(var(--card-rgb));
    transform: translateY(-50%);
    box-shadow: 0 0 0 4px rgba(var(--card-rgb),0.09);
}

.soul-case-card--example .soul-case-card__tags {
    margin-bottom: 22px;
}

.soul-case-card__link--button {
    width: 100%;
}

body.soul-example-lightbox-is-open {
    overflow: hidden;
}

.soul-example-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 28px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 180ms ease;
}

.soul-example-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.soul-example-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 14, 20, 0.76);
    backdrop-filter: blur(18px) saturate(0.9);
    -webkit-backdrop-filter: blur(18px) saturate(0.9);
}

.soul-example-lightbox__dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(1180px, 100%);
    height: min(92vh, 960px);
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,0.18);
    background:
        radial-gradient(circle at 14% 0%, rgba(255,255,255,0.10), transparent 30%),
        rgba(24, 28, 35, 0.92);
    box-shadow: 0 40px 120px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.10);
}

.soul-example-lightbox__topbar,
.soul-example-lightbox__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 22px;
    color: #fff;
}

.soul-example-lightbox__topbar {
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

.soul-example-lightbox__topbar h2 {
    margin: 4px 0 0;
    font-size: clamp(20px, 2.4vw, 30px);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.soul-example-lightbox__eyebrow,
.soul-example-lightbox__footer {
    color: rgba(255,255,255,0.60);
    font-size: 12px;
}

.soul-example-lightbox__close {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,0.08);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.soul-example-lightbox__stage {
    position: relative;
    min-height: 0;
    padding: 20px 74px;
}

.soul-example-lightbox__image-wrap {
    width: 100%;
    height: 100%;
    overflow: auto;
    border-radius: 20px;
    background: #f4f3ef;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
    scrollbar-width: thin;
}

.soul-example-lightbox__image {
    display: block;
    width: min(100%, 920px);
    height: auto;
    margin: 0 auto;
}

.soul-example-lightbox__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 60px;
    margin-top: -30px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 16px;
    color: #fff;
    background: rgba(255,255,255,0.08);
    font-size: 34px;
    cursor: pointer;
}

.soul-example-lightbox__nav--prev { left: 16px; }
.soul-example-lightbox__nav--next { right: 16px; }

.soul-example-lightbox__nav[hidden] {
    display: none;
}

.soul-example-lightbox__footer {
    border-top: 1px solid rgba(255,255,255,0.10);
}

@media (max-width: 760px) {
    .soul-cases-filter-stack {
        gap: 10px;
    }

    .soul-example-lightbox {
        padding: 8px;
    }

    .soul-example-lightbox__dialog {
        height: 96vh;
        border-radius: 22px;
    }

    .soul-example-lightbox__stage {
        padding: 10px;
    }

    .soul-example-lightbox__nav {
        top: auto;
        bottom: 16px;
        width: 44px;
        height: 44px;
        margin: 0;
        border-radius: 50%;
        background: rgba(18,22,28,0.78);
    }

    .soul-example-lightbox__nav--prev { left: 22px; }
    .soul-example-lightbox__nav--next { right: 22px; }

    .soul-example-lightbox__footer span:last-child {
        display: none;
    }
}


/* CASE EXAMPLES 0.4.1.130 */
.soul-case-card__link {
    font-family: inherit;
    cursor: pointer;
}

.soul-case-card--example .soul-case-card__feature-block {
    margin: 18px 0 22px;
}

.soul-case-card--example .soul-case-card__features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.soul-case-card--example .soul-case-card__features span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    color: var(--card-dark);
    background: rgba(var(--card-rgb), 0.10);
    border: 1px solid rgba(var(--card-rgb), 0.12);
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
}

.soul-case-card--example .soul-case-card__features span::before {
    display: none;
}

.soul-example-lightbox__dialog {
    grid-template-rows: auto minmax(0, 1fr);
    width: min(1380px, 100%);
    height: min(94vh, 980px);
}

.soul-example-lightbox__content {
    display: grid;
    grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.55fr);
    min-height: 0;
}

.soul-example-lightbox__details {
    min-width: 0;
    overflow: auto;
    padding: 24px;
    color: rgba(255,255,255,0.82);
    border-right: 1px solid rgba(255,255,255,0.10);
    scrollbar-width: thin;
}

.soul-example-lightbox__detail-section + .soul-example-lightbox__detail-section {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,0.09);
}

.soul-example-lightbox__detail-section h3 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 750;
    letter-spacing: -0.01em;
}

.soul-example-lightbox__detail-section p,
.soul-example-lightbox__detail-section li {
    color: rgba(255,255,255,0.72);
    font-size: 13px;
    line-height: 1.58;
}

.soul-example-lightbox__detail-section p {
    margin: 0;
}

.soul-example-lightbox__detail-section p + p {
    margin-top: 8px;
}

.soul-example-lightbox__detail-section ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0 0 0 18px;
}

.soul-example-lightbox__gallery {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-width: 0;
    min-height: 0;
}

@media (max-width: 900px) {
    .soul-example-lightbox__content {
        display: block;
        overflow: auto;
    }

    .soul-example-lightbox__details {
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,0.10);
    }

    .soul-example-lightbox__gallery {
        min-height: 68vh;
    }
}

@media (max-width: 760px) {
    .soul-example-lightbox__details {
        padding: 18px;
    }

    .soul-example-lightbox__detail-section + .soul-example-lightbox__detail-section {
        margin-top: 18px;
        padding-top: 18px;
    }

    .soul-example-lightbox__gallery {
        min-height: 72vh;
    }
}