/* =========================================================
   FLAT METAL CHIP
   Плоский металлический / стеклянный шильдик
   ========================================================= */

.soul-chip {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 31px;
    padding: 0 18px 0 15px;

    border-radius: 999px;

    color: rgba(var(--chip-text-rgb), 0.96) !important;

    /* плоский металлический фон */
    background:
        linear-gradient(
            135deg,
            rgba(var(--chip-rgb), 0.16) 0%,
            rgba(255, 255, 255, 0.92) 18%,
            rgba(246, 248, 251, 0.96) 42%,
            rgba(255, 255, 255, 0.92) 62%,
            rgba(var(--chip-rgb), 0.12) 100%
        ) !important;

    border: 1px solid rgba(var(--chip-rgb), 0.38) !important;

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

    /* тень короткая, без выпуклости */
    box-shadow:
        0 6px 14px rgba(25, 31, 40, 0.08),
        0 2px 5px rgba(25, 31, 40, 0.05),
        0 0 10px rgba(var(--chip-rgb), 0.12),

        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset 0 -1px 0 rgba(68, 78, 92, 0.10),
        inset 0 0 0 1px rgba(255, 255, 255, 0.20);

    font-family: var(--font-main, "Montserrat", Arial, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 16.8px !important;
    letter-spacing: normal !important;

    white-space: nowrap;
    overflow: hidden;

    transition:
        color 420ms ease,
        background 420ms ease,
        border-color 420ms ease,
        box-shadow 420ms ease,
        transform 220ms ease;
}

/* УБИРАЕМ любые старые псевдоэлементы, если у тебя они были */
.soul-chip::before {
    content: none !important;
    display: none !important;
}

/* тонкий металлический перелив */
.soul-chip::after {
    content: "";

    position: absolute;
    inset: 1px;
    border-radius: inherit;

    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 18%,
            rgba(255, 255, 255, 0.58) 34%,
            rgba(255, 255, 255, 0.16) 44%,
            transparent 56%,
            transparent 100%
        );

    opacity: 0.9;
    mix-blend-mode: screen;
}

/* единственная палочка слева */
.soul-chip > span {
    display: block !important;
    width: 12px;
    height: 3px;

    flex: 0 0 auto;
    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(var(--chip-rgb), 0.98) 0%,
            rgba(var(--chip-rgb), 0.56) 100%
        ) !important;

    box-shadow:
        0 0 4px rgba(var(--chip-rgb), 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* если внутри есть другие элементы — не ломаем стиль */
.soul-chip strong,
.soul-chip b,
.soul-chip em {
    color: inherit !important;
    font: inherit !important;
}
/* =========================================================
   NICHE THEME TABS FINAL — PREMIUM METAL
   Кнопки переключения тем:
   обычное состояние — графитовый металл,
   hover/active — металл в цвет конкретной темы
   ========================================================= */

.soul-niche-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 28px;
}

/* индивидуальный цвет каждой кнопки */
.soul-tab[data-niche-button="nko"] {
    --tab-rgb: var(--nko-rgb);
}

.soul-tab[data-niche-button="business"] {
    --tab-rgb: var(--business-rgb);
}

.soul-tab[data-niche-button="experts"] {
    --tab-rgb: var(--experts-rgb);
}

.soul-tab[data-niche-button="future"] {
    --tab-rgb: var(--future-rgb);
}

/* обычное состояние — графитовый металлический стиль */
.soul-tab {
    position: relative;

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

    min-height: 48px;
    padding: 0 26px;

    border-radius: 14px;

    cursor: pointer;
    overflow: hidden;

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

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 17%,
            rgba(255, 255, 255, 0.24) 31%,
            rgba(255, 255, 255, 0.08) 43%,
            transparent 58%,
            transparent 100%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.16) 0%,
            rgba(255, 255, 255, 0.04) 32%,
            rgba(0, 0, 0, 0.10) 100%
        ),
        linear-gradient(
            145deg,
            rgba(126, 132, 142, 0.98) 0%,
            rgba(96, 103, 114, 0.98) 36%,
            rgba(67, 74, 86, 0.98) 68%,
            rgba(49, 56, 67, 0.98) 100%
        ) !important;

    border: 1px solid rgba(31, 36, 45, 0.78) !important;

    box-shadow:
        0 14px 24px rgba(28, 34, 44, 0.18),
        0 5px 10px rgba(28, 34, 44, 0.12),
        0 0 12px rgba(70, 78, 90, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.36),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22),
        inset 0 -8px 15px rgba(18, 22, 29, 0.12);

    font-family: var(--font-main, "Montserrat", Arial, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 16.8px !important;
    letter-spacing: normal !important;

    transition:
        color 240ms ease,
        background 280ms ease,
        border-color 280ms ease,
        box-shadow 280ms ease,
        transform 180ms ease;
}

/* дополнительный мягкий стеклянный блик */
.soul-tab::before {
    content: "";

    position: absolute;
    inset: 1px;

    border-radius: inherit;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 28% 12%,
            rgba(255, 255, 255, 0.34) 0%,
            rgba(255, 255, 255, 0.12) 30%,
            transparent 58%
        ),
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 22%,
            rgba(255, 255, 255, 0.26) 36%,
            rgba(255, 255, 255, 0.08) 48%,
            transparent 64%,
            transparent 100%
        );

    opacity: 0.72;
    mix-blend-mode: screen;

    transition:
        opacity 240ms ease,
        transform 280ms ease;
}

/* никакой нижней полоски */
.soul-tab::after {
    content: none !important;
    display: none !important;
}

/* hover — тот же металл, но окрашен в цвет конкретной кнопки */
.soul-tab:hover {
    transform: translateY(-1px);

    color: #ffffff !important;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 16%,
            rgba(255, 255, 255, 0.38) 31%,
            rgba(255, 255, 255, 0.12) 43%,
            transparent 58%,
            transparent 100%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0.05) 34%,
            rgba(0, 0, 0, 0.11) 100%
        ),
        linear-gradient(
            145deg,
            rgba(var(--tab-rgb), 0.98) 0%,
            rgba(var(--tab-rgb), 0.82) 36%,
            rgba(var(--tab-rgb), 0.72) 68%,
            rgba(var(--tab-rgb), 0.92) 100%
        ) !important;

    border-color: rgba(var(--tab-rgb), 0.72) !important;

    box-shadow:
        0 16px 30px rgba(var(--tab-rgb), 0.26),
        0 6px 12px rgba(28, 34, 44, 0.14),
        0 0 22px rgba(var(--tab-rgb), 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18),
        inset 0 -9px 16px rgba(18, 22, 29, 0.11);
}

.soul-tab:hover::before {
    opacity: 0.88;
    transform: translateX(5px);
}

/* выбранная кнопка — такая же, как hover, но стабильная */
.soul-tab.is-active {
    color: #ffffff !important;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 16%,
            rgba(255, 255, 255, 0.40) 31%,
            rgba(255, 255, 255, 0.13) 43%,
            transparent 58%,
            transparent 100%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0.05) 34%,
            rgba(0, 0, 0, 0.12) 100%
        ),
        linear-gradient(
            145deg,
            rgba(var(--tab-rgb), 1) 0%,
            rgba(var(--tab-rgb), 0.82) 36%,
            rgba(var(--tab-rgb), 0.72) 68%,
            rgba(var(--tab-rgb), 0.96) 100%
        ) !important;

    border-color: rgba(var(--tab-rgb), 0.76) !important;

    box-shadow:
        0 16px 30px rgba(var(--tab-rgb), 0.28),
        0 6px 12px rgba(28, 34, 44, 0.14),
        0 0 24px rgba(var(--tab-rgb), 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.44),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18),
        inset 0 -9px 16px rgba(18, 22, 29, 0.11);
}

.soul-tab.is-active::before {
    opacity: 0.86;
}

.soul-tab.is-active:hover {
    transform: translateY(-1px);

    box-shadow:
        0 18px 34px rgba(var(--tab-rgb), 0.31),
        0 7px 14px rgba(28, 34, 44, 0.15),
        0 0 28px rgba(var(--tab-rgb), 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.46),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18),
        inset 0 -9px 16px rgba(18, 22, 29, 0.11);
}

/* focus */
.soul-tab:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.80),
        0 0 0 5px rgba(var(--tab-rgb), 0.34),
        0 14px 24px rgba(28, 34, 44, 0.16);
}

@media (max-width: 720px) {
    .soul-niche-tabs {
        gap: 10px;
    }

    .soul-tab {
        min-height: 44px;
        padding: 0 18px;
        border-radius: 13px;
    }
}
/* =========================================================
   CHIP / TAB CONTENT LAYER FIX
   Текст плашек и табов выше блика
   ========================================================= */

.soul-chip,
.soul-tab {
    isolation: isolate;
}

/* блик ниже текста */
.soul-chip::after,
.soul-tab::before {
    z-index: 1;
}

/* линия и текст плашки выше блика */
.soul-chip__line,
.soul-chip__text,
.soul-tab__text {
    position: relative;
    z-index: 3;

    display: inline-flex;
    align-items: center;

    color: inherit;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

/* новая линия вместо старого .soul-chip > span */
.soul-chip__line {
    display: block !important;

    width: 12px;
    height: 3px;

    flex: 0 0 auto;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(var(--chip-rgb), 0.96) 0%,
            rgba(var(--chip-rgb), 0.54) 100%
        ) !important;

    box-shadow:
        0 0 6px rgba(var(--chip-rgb), 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);

    opacity: 1;
}

/* старое правило .soul-chip > span больше не должно превращать текст в палочку */
.soul-chip > span:not(.soul-chip__line) {
    width: auto !important;
    height: auto !important;
    background: none !important;
    box-shadow: none !important;
    flex: 0 1 auto !important;
}
/* =========================================================
   SOUL TAB FINAL FORCE
   Кнопки выбора направления.
   Работает с реальной разметкой data-niche-button.
   Вставлять строго в конец home.css
   ========================================================= */

/* ---------------------------------------------------------
   Цвет каждой кнопки
   --------------------------------------------------------- */

.soul-tab[data-niche-button="nko"] {
    --tab-rgb: var(--nko-rgb) !important;
}

.soul-tab[data-niche-button="business"] {
    --tab-rgb: var(--business-rgb) !important;
}

.soul-tab[data-niche-button="experts"] {
    --tab-rgb: var(--experts-rgb) !important;
}

.soul-tab[data-niche-button="future"] {
    --tab-rgb: var(--future-rgb) !important;
}

/* ---------------------------------------------------------
   Общая база
   --------------------------------------------------------- */

.soul-tab {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;

    border-radius: 14px !important;

    transform: none !important;

    transition:
        color 240ms ease,
        background 280ms ease,
        border-color 280ms ease,
        box-shadow 280ms ease,
        transform 180ms ease !important;
}

/* блик под текстом */
.soul-tab::before {
    content: "" !important;

    position: absolute !important;
    inset: 1px !important;
    z-index: 0 !important;

    border-radius: inherit !important;
    pointer-events: none !important;

    background:
        radial-gradient(
            circle at 25% 10%,
            rgba(255, 255, 255, 0.28) 0%,
            rgba(255, 255, 255, 0.08) 34%,
            transparent 62%
        ),
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 20%,
            rgba(255, 255, 255, 0.24) 35%,
            rgba(255, 255, 255, 0.06) 48%,
            transparent 66%,
            transparent 100%
        ) !important;

    opacity: 0.42 !important;
    mix-blend-mode: screen !important;
}

/* нижнюю полоску убираем */
.soul-tab::after {
    content: none !important;
    display: none !important;
}

/* текст поверх блика */
.soul-tab__text {
    position: relative !important;
    z-index: 3 !important;

    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
}

/* ---------------------------------------------------------
   BASE / SKY TITANIUM
   Базовую тему оставляем графитовой.
   --------------------------------------------------------- */

html[data-theme="base"] .soul-tab:not(.is-active) {
    color: rgba(255, 255, 255, 0.94) !important;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 17%,
            rgba(255, 255, 255, 0.24) 31%,
            rgba(255, 255, 255, 0.08) 43%,
            transparent 58%,
            transparent 100%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.16) 0%,
            rgba(255, 255, 255, 0.04) 32%,
            rgba(0, 0, 0, 0.10) 100%
        ),
        linear-gradient(
            145deg,
            rgba(126, 132, 142, 0.98) 0%,
            rgba(96, 103, 114, 0.98) 36%,
            rgba(67, 74, 86, 0.98) 68%,
            rgba(49, 56, 67, 0.98) 100%
        ) !important;

    border: 1px solid rgba(31, 36, 45, 0.78) !important;

    box-shadow:
        0 14px 24px rgba(28, 34, 44, 0.18),
        0 5px 10px rgba(28, 34, 44, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.36),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22),
        inset 0 -8px 15px rgba(18, 22, 29, 0.12) !important;
}

/* ---------------------------------------------------------
   ЦВЕТНЫЕ ТЕМЫ — НЕАКТИВНЫЕ
   Как на 2-й картинке:
   светлые, стеклянные, в оттенке текущей темы.
   --------------------------------------------------------- */

html[data-theme="nko"] .soul-tab:not(.is-active),
html[data-theme="business"] .soul-tab:not(.is-active),
html[data-theme="experts"] .soul-tab:not(.is-active),
html[data-theme="future"] .soul-tab:not(.is-active) {
    color: rgba(var(--theme-rgb), 0.94) !important;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 18%,
            rgba(255, 255, 255, 0.42) 34%,
            rgba(255, 255, 255, 0.11) 48%,
            transparent 66%,
            transparent 100%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.94) 0%,
            rgba(255, 255, 255, 0.84) 46%,
            rgba(var(--theme-rgb), 0.13) 100%
        ) !important;

    border: 1px solid rgba(var(--theme-rgb), 0.38) !important;

    box-shadow:
        0 10px 20px rgba(28, 34, 44, 0.08),
        0 4px 8px rgba(28, 34, 44, 0.05),
        0 0 14px rgba(var(--theme-rgb), 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 0 0 1px rgba(255, 255, 255, 0.48),
        inset 0 -1px 0 rgba(var(--theme-rgb), 0.14) !important;
}

/* ---------------------------------------------------------
   ЦВЕТНЫЕ ТЕМЫ — HOVER НЕАКТИВНЫХ
   Как на 3-й картинке:
   светлая кнопка, но цвет конкретной кнопки.
   --------------------------------------------------------- */

html[data-theme="nko"] .soul-tab:not(.is-active):hover,
html[data-theme="business"] .soul-tab:not(.is-active):hover,
html[data-theme="experts"] .soul-tab:not(.is-active):hover,
html[data-theme="future"] .soul-tab:not(.is-active):hover {
    color: rgba(var(--tab-rgb), 0.98) !important;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 18%,
            rgba(255, 255, 255, 0.46) 34%,
            rgba(255, 255, 255, 0.12) 48%,
            transparent 66%,
            transparent 100%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 255, 255, 0.84) 42%,
            rgba(var(--tab-rgb), 0.18) 100%
        ) !important;

    border-color: rgba(var(--tab-rgb), 0.48) !important;

    box-shadow:
        0 12px 22px rgba(28, 34, 44, 0.08),
        0 4px 8px rgba(28, 34, 44, 0.05),
        0 0 16px rgba(var(--tab-rgb), 0.16),
        0 0 28px rgba(var(--tab-rgb), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        inset 0 0 0 1px rgba(255, 255, 255, 0.52),
        inset 0 -1px 0 rgba(var(--tab-rgb), 0.18) !important;

    transform: none !important;
}

/* ---------------------------------------------------------
   ACTIVE — залитая цветом конкретной кнопки
   --------------------------------------------------------- */

.soul-tab.is-active {
    color: #ffffff !important;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 16%,
            rgba(255, 255, 255, 0.32) 31%,
            rgba(255, 255, 255, 0.09) 43%,
            transparent 60%,
            transparent 100%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(255, 255, 255, 0.04) 34%,
            rgba(0, 0, 0, 0.12) 100%
        ),
        linear-gradient(
            145deg,
            rgba(var(--tab-rgb), 1) 0%,
            rgba(var(--tab-rgb), 0.84) 38%,
            rgba(var(--tab-rgb), 0.72) 70%,
            rgba(var(--tab-rgb), 0.96) 100%
        ) !important;

    border: 1px solid rgba(var(--tab-rgb), 0.62) !important;

    box-shadow:
        0 14px 26px rgba(var(--tab-rgb), 0.24),
        0 6px 12px rgba(28, 34, 44, 0.12),
        0 0 20px rgba(var(--tab-rgb), 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.36),
        inset 0 -1px 0 rgba(0, 0, 0, 0.16),
        inset 0 -8px 15px rgba(18, 22, 29, 0.10) !important;
}

/* hover active — без резкого изменения */
.soul-tab.is-active:hover {
    color: #ffffff !important;
    transform: none !important;

    box-shadow:
        0 15px 28px rgba(var(--tab-rgb), 0.28),
        0 6px 12px rgba(28, 34, 44, 0.13),
        0 0 24px rgba(var(--tab-rgb), 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        inset 0 -1px 0 rgba(0, 0, 0, 0.16),
        inset 0 -8px 15px rgba(18, 22, 29, 0.10) !important;
}
/* =========================================================
   NICHE TABS — HOVER RESTORE
   Кнопки “НКО и фонды / Малый бизнес / Эксперты и коучи”
   Работает по реальной разметке data-niche-button
   ========================================================= */

.soul-tab[data-niche-button="nko"] {
    --tab-rgb: var(--nko-rgb);
}

.soul-tab[data-niche-button="business"] {
    --tab-rgb: var(--business-rgb);
}

.soul-tab[data-niche-button="experts"] {
    --tab-rgb: var(--experts-rgb);
}

.soul-tab[data-niche-button="future"] {
    --tab-rgb: var(--future-rgb);
}

.soul-tab {
    transition:
        background 260ms ease,
        border-color 260ms ease,
        box-shadow 260ms ease,
        color 220ms ease,
        filter 220ms ease !important;
}

/* базовая тема — при наведении появляется цвет конкретной кнопки */
html[data-theme="base"] .soul-tab:not(.is-active):hover {
    color: #ffffff !important;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 16%,
            rgba(255, 255, 255, 0.30) 31%,
            rgba(255, 255, 255, 0.08) 43%,
            transparent 60%,
            transparent 100%
        ),
        linear-gradient(
            145deg,
            rgba(var(--tab-rgb), 0.92) 0%,
            rgba(var(--tab-rgb), 0.78) 42%,
            rgba(var(--tab-rgb), 0.64) 100%
        ) !important;

    border-color: rgba(var(--tab-rgb), 0.58) !important;

    box-shadow:
        0 14px 26px rgba(var(--tab-rgb), 0.22),
        0 6px 12px rgba(28, 34, 44, 0.13),
        0 0 22px rgba(var(--tab-rgb), 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        inset 0 -1px 0 rgba(0, 0, 0, 0.14) !important;
}

/* цветные темы — неактивная светлая, hover в цвет конкретной кнопки */
html[data-theme="nko"] .soul-tab:not(.is-active):hover,
html[data-theme="business"] .soul-tab:not(.is-active):hover,
html[data-theme="experts"] .soul-tab:not(.is-active):hover,
html[data-theme="future"] .soul-tab:not(.is-active):hover {
    color: rgba(var(--tab-rgb), 0.98) !important;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 18%,
            rgba(255, 255, 255, 0.46) 34%,
            rgba(255, 255, 255, 0.12) 48%,
            transparent 66%,
            transparent 100%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 255, 255, 0.84) 42%,
            rgba(var(--tab-rgb), 0.18) 100%
        ) !important;

    border-color: rgba(var(--tab-rgb), 0.48) !important;

    box-shadow:
        0 12px 22px rgba(28, 34, 44, 0.08),
        0 4px 8px rgba(28, 34, 44, 0.05),
        0 0 16px rgba(var(--tab-rgb), 0.16),
        0 0 28px rgba(var(--tab-rgb), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        inset 0 0 0 1px rgba(255, 255, 255, 0.52),
        inset 0 -1px 0 rgba(var(--tab-rgb), 0.18) !important;
}