/* ============================================================================
   Skilline — изолированные стили
   Все правила строго под .skilline-page. Никаких глобальных селекторов.
   Палитра: глубокий розовый + слива (без оранжевого).
   ============================================================================ */

/* ---------- 0. Переменные темы ---------- */
:root {
    /* Базовая палитра */
    --sk-accent:       #BE185D;   /* глубокий розовый — главный акцент */
    --sk-accent-dark:  #9D174D;   /* тёмный розовый — hover */
    --sk-accent-soft:  #FBCFE8;   /* мягкий розовый — теги */
    --sk-accent-glow:  rgba(190, 24, 93, .45);

    --sk-text:         #2F327D;
    --sk-text-muted:   #6B7280;
    --sk-text-soft:    #9CA3AF;
    --sk-bg:           #ffffff;
    --sk-bg-cream:     #FDF2F8;   /* нежно-розовый вместо кремового */
    --sk-bg-card:      #ffffff;
    --sk-border:       #E5E7EB;

    /* Hero — светлая тема: роза → лаванда → фуксия */
    --sk-hero-start:   #FFF1F6;
    --sk-hero-mid:     #FCE7F3;
    --sk-hero-end:     #F5D9EE;

    /* Декоративные блобы */
    --sk-hero-blob-1:  rgba(190, 24, 93, .18);   /* роза */
    --sk-hero-blob-2:  rgba(139, 92, 246, .18);  /* фиолет */
    --sk-hero-blob-3:  rgba(244, 114, 182, .22); /* фуксия */

    /* FAQ */
    --sk-faq-bg:       #ffffff;
    --sk-faq-hover:    #FFF5F9;

    /* Декор-круги и иконки */
    --sk-deco-pink:    #F472B6;
    --sk-deco-violet:  #A78BFA;
    --sk-deco-rose:    #FB7185;
    --sk-icon-indigo:  #6366F1;
    --sk-icon-rose:    #BE185D;
    --sk-icon-cyan:    #06B6D4;
}

html[theme="dark"]:root {
    --sk-text:         #ffffff;
    --sk-text-muted:   #D1D5DB;
    --sk-text-soft:    #9CA3AF;
    --sk-bg:           #1C1C1C;
    --sk-bg-cream:     #2A1A26;   /* тёмная слива вместо кремового */
    --sk-bg-card:      #2A2A2A;
    --sk-border:       #3A3A3A;

    /* Hero — тёмная тема: глубокая слива с розовым */
    --sk-hero-start:   #26142B;
    --sk-hero-mid:     #371C3A;
    --sk-hero-end:     #1F0F26;

    /* Блобы ярче — иначе теряются на тёмном */
    --sk-hero-blob-1:  rgba(244, 63, 94, .28);
    --sk-hero-blob-2:  rgba(139, 92, 246, .32);
    --sk-hero-blob-3:  rgba(236, 72, 153, .28);

    --sk-faq-bg:       #242024;
    --sk-faq-hover:    #2E2731;
}

/* ---------- 1. Изоляция ---------- */
.skilline-page,
.skilline-page *,
.skilline-page *::before,
.skilline-page *::after {
    box-sizing: border-box;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.skilline-page {
    display: block;
    width: 100%;
    color: var(--sk-text);
    /* background: var(--sk-bg); */
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

.skilline-page img,
.skilline-page svg,
.skilline-page video {
    display: block;
    max-width: 100%;
    height: auto;
}

.skilline-page p { margin: 0; }
.skilline-page h1,
.skilline-page h2,
.skilline-page h3 { margin: 0; }

.skilline-page a { color: inherit; text-decoration: none; }

.skilline-page button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
}

/* ---------- 2. Утилиты ---------- */
.skilline-page .sk-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 1024px) {
    .skilline-page .sk-container { padding: 0 2rem; }
}

.skilline-page .sk-center { text-align: center; }
.skilline-page .sk-mt-lg  { margin-top: 3.5rem; }

.skilline-page .sk-accent { color: var(--sk-accent); }

.skilline-page .sk-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
}

.skilline-page .sk-tag {
    display: inline-block;
    background: var(--sk-accent-soft);
    color: #6B1240;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.15rem 1rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---------- 3. Заголовки секций ---------- */
.skilline-page .sk-section { padding: 5rem 0; }

.skilline-page .sk-section__head {
    max-width: 48rem;
    margin: 0 auto 4rem;
    text-align: center;
}

.skilline-page .sk-section__title {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--sk-text);
    margin: 0 0 1rem;
}

.skilline-page .sk-section__subtitle {
    font-size: 1.125rem;
    color: var(--sk-text-muted);
    line-height: 1.6;
}

/* ---------- 4. Кнопки ---------- */
.skilline-page .sk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2.25rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    transition: transform .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease;
    cursor: pointer;
    border: 1px solid transparent;
}

.skilline-page .sk-btn:hover { transform: scale(1.05); }

.skilline-page .sk-btn--primary {
    background: linear-gradient(135deg, var(--sk-accent) 0%, #9D174D 100%);
    color: #fff;
    box-shadow: 0 14px 30px -14px var(--sk-accent-glow);
}

.skilline-page .sk-btn--primary:hover {
    box-shadow: 0 18px 40px -14px var(--sk-accent-glow);
}

.skilline-page .sk-btn--outline {
    background: transparent;
    color: var(--sk-accent);
    border-color: var(--sk-accent);
}

.skilline-page .sk-btn--outline:hover {
    background: var(--sk-accent);
    color: #fff;
}

.skilline-page .sk-btn--light {
    background: linear-gradient(135deg, var(--sk-accent) 0%, #9D174D 100%);
    /* color: var(--sk-text); */
    border-color: #fff;
}

.skilline-page .sk-btn--ghost {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid #fff;
    backdrop-filter: blur(2px);
}

.skilline-page .sk-btn--ghost.sk-btn--cyan {
    background: rgba(35, 189, 238, 0.9);
    border-color: transparent;
}

.skilline-page .sk-btn--arrow {
    padding: 1rem;
    border: 1px solid var(--sk-accent);
    /* color: var(--sk-accent); */
    background: transparent;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-weight: 500;
}

.skilline-page .sk-btn--arrow:hover {
    background: var(--sk-accent);
    color: #fff;
}

.skilline-page .sk-btn--arrow:hover path { fill: #fff; }

.skilline-page .sk-btn__arrow {
    width: 3.5rem;
    height: 3.5rem;
    border: 1px solid var(--sk-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.skilline-page .sk-btn__arrow svg { width: 1.25rem; height: 0.85rem; }
.skilline-page .sk-btn__arrow path { fill: var(--sk-accent); transition: fill .25s ease; }

/* ---------- 5. HERO ---------- */
.skilline-page .sk-hero {
    position: relative;
    /* background:
        radial-gradient(ellipse 80% 60% at 70% 40%, rgba(244, 114, 182, .18) 0%, transparent 60%),
        linear-gradient(
            135deg,
            var(--sk-hero-start) 0%,
            var(--sk-hero-mid) 45%,
            var(--sk-hero-end) 100%
        ); */
    padding: 4rem 0 6rem;
    overflow: hidden;
    isolation: isolate;
}

/* Мягкие цветные блобы */
.skilline-page .sk-hero::before,
.skilline-page .sk-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    z-index: 0;
}

.skilline-page .sk-hero::before {
    top: -140px;
    right: -100px;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, var(--sk-hero-blob-1) 0%, transparent 70%);
}

.skilline-page .sk-hero::after {
    bottom: -120px;
    left: -120px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, var(--sk-hero-blob-2) 0%, transparent 70%);
}

/* Третий блоб + тонкая текстурная сетка */
.skilline-page .sk-hero__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    position: relative;
    z-index: 2;
}

.skilline-page .sk-hero__inner::before {
    content: "";
    position: absolute;
    top: 20%;
    left: 45%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--sk-hero-blob-3) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

/* Тонкая сетка-паттерн (очень неяркая, только для текстуры) */
.skilline-page .sk-hero__inner::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(190, 24, 93, .12) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 0%, transparent 80%);
    z-index: 0;
    opacity: .6;
}

html[theme="dark"] .skilline-page .sk-hero__inner::after {
    background-image:
        radial-gradient(circle, rgba(244, 114, 182, .18) 1px, transparent 1px);
    opacity: .5;
}

@media (min-width: 1024px) {
    .skilline-page .sk-hero__inner {
        flex-direction: row;
        align-items: center;
        padding: 0 2rem;
    }
}

.skilline-page .sk-hero__content {
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 3;
}

@media (min-width: 1024px) {
    .skilline-page .sk-hero__content {
        width: 50%;
        text-align: left;
        padding-top: 3rem;
    }
}

/* Бейджи */
.skilline-page .sk-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 3;
}

@media (min-width: 1024px) {
    .skilline-page .sk-hero__badges { justify-content: flex-start; }
}

.skilline-page .sk-badge {
    display: inline-flex;
    align-items: center;
    padding: .4rem 1rem;
    border-radius: 9999px;
    font-size: .8rem;
    font-weight: 500;
    color: var(--sk-accent-dark);
    background: rgba(255, 255, 255, .8);
    border: 1px solid rgba(190, 24, 93, .18);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px -8px rgba(190, 24, 93, .25);
}

html[theme="dark"] .skilline-page .sk-badge {
    color: #FBCFE8;
    background: rgba(190, 24, 93, .14);
    border-color: rgba(244, 114, 182, .28);
}

.skilline-page .sk-hero__title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--sk-text);
    margin: 0 0 1rem;
    letter-spacing: -.01em;
}

.skilline-page .sk-hero__lead {
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--sk-text);
    margin: 0 0 2rem;
    opacity: .85;
}

.skilline-page .sk-hero__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .skilline-page .sk-hero__actions {
        flex-direction: row;
        justify-content: center;
        gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .skilline-page .sk-hero__actions { justify-content: flex-start; }
}

/* Правая часть — картинка с розовым свечением позади */
.skilline-page .sk-hero__media {
    width: 100%;
    position: relative;
    z-index: 2;
}

.skilline-page .sk-hero__media::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    aspect-ratio: 1 / 1;
    max-width: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244, 114, 182, .35) 0%, transparent 65%);
    filter: blur(40px);
    z-index: 0;
    pointer-events: none;
}

html[theme="dark"] .skilline-page .sk-hero__media::before {
    background: radial-gradient(circle, rgba(190, 24, 93, .45) 0%, transparent 65%);
}

@media (min-width: 1024px) {
    .skilline-page .sk-hero__media { width: 50%; }
}

.skilline-page .sk-hero__image {
    width: 90%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 30px 40px rgba(190, 24, 93, .18));
}

html[theme="dark"] .skilline-page .sk-hero__image {
    filter: drop-shadow(0 30px 40px rgba(244, 114, 182, .25));
}

.skilline-page .sk-hero__wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 3rem;
    line-height: 0;
    pointer-events: none;
    z-index: 4;
}

.skilline-page .sk-hero__wave svg { display: block; width: 100%; height: 100%; }
.skilline-page .sk-hero__wave svg path { fill: var(--sk-bg); }

@media (min-width: 768px) { .skilline-page .sk-hero__wave { height: 6rem; } }
@media (min-width: 1280px) { .skilline-page .sk-hero__wave { height: 10rem; } }

/* ---------- 6. Features ---------- */
.skilline-page .sk-features { background: var(--sk-bg); }

.skilline-page .sk-features__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem 1.5rem;
    padding-top: 2rem;
}

@media (min-width: 768px) {
    .skilline-page .sk-features__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

.skilline-page .sk-card {
    background: var(--sk-bg-card);
    border-radius: 1rem;
    box-shadow: 0 10px 30px -12px rgba(190, 24, 93, .18);
}

.skilline-page .sk-feature {
    padding: 2.5rem 1.5rem 2rem;
    text-align: center;
    position: relative;
}

.skilline-page .sk-feature__icon {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -4rem auto 1.5rem;
    box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .3);
    position: relative;
    top: 1rem;
}

.skilline-page .sk-feature__icon svg { width: 1.5rem; height: 1.5rem; }

.skilline-page .sk-feature__icon--blue   { background: var(--sk-icon-indigo); }
.skilline-page .sk-feature__icon--orange { background: var(--sk-icon-rose); }
.skilline-page .sk-feature__icon--cyan   { background: var(--sk-icon-cyan); }

.skilline-page .sk-feature__title {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--sk-text);
    margin: 0 0 0.75rem;
    padding: 0 1.5rem;
}

.skilline-page .sk-feature__text {
    color: var(--sk-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    padding: 0 1rem;
}

/* ---------- 7. Split (универсальный) ---------- */
.skilline-page .sk-split {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

@media (min-width: 768px) {
    .skilline-page .sk-split {
        flex-direction: row;
        align-items: center;
        gap: 2.5rem;
    }
    .skilline-page .sk-split--reverse { flex-direction: row-reverse; }
}

.skilline-page .sk-split__text  { width: 100%; position: relative; }
.skilline-page .sk-split__media { width: 100%; position: relative; }

@media (min-width: 768px) {
    .skilline-page .sk-split__text  { width: 50%; }
    .skilline-page .sk-split__media { width: 50%; }
    .skilline-page .sk-split--media-wide .sk-split__media { width: 58.333%; }
    .skilline-page .sk-split--media-wide .sk-split__text  { width: 41.666%; }
}

.skilline-page .sk-split__title {
    position: relative;
    font-size: clamp(1.5rem, 2.2vw, 1.875rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--sk-text);
    margin: 0 0 1.25rem;
    z-index: 11;
}

@media (max-width: 768px) {
    .skilline-page .sk-split__title {
        text-align: center;
    }
}

.skilline-page .sk-split__text-body {
    color: var(--sk-text-muted);
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0 0 1.25rem;
}

.skilline-page .sk-split__image {
    width: 100%;
    border-radius: .75rem;
    position: relative;
    z-index: 1;
}

.skilline-page .sk-split__image--center {
    width: 83.333%;
    margin: 0 auto;
}

/* ---------- 8. Декор ---------- */
.skilline-page .sk-deco-circle {
    position: absolute;
    border-radius: 50%;
    z-index: 0;
}

.skilline-page .sk-deco-circle--green {
    width: 8rem; height: 8rem;
    background: var(--sk-deco-pink);
    top: -3rem; left: 1rem;
}

.skilline-page .sk-deco-circle--cyan-xs {
    width: 1.25rem; height: 1.25rem;
    background: var(--sk-deco-violet);
    top: -3rem; left: 9rem;
}

.skilline-page .sk-deco-circle--violet {
    width: 9rem; height: 9rem;
    background: var(--sk-deco-violet);
    bottom: -0.25rem; right: 4rem;
}

.skilline-page .sk-deco-circle--red-xs {
    width: 1.25rem; height: 1.25rem;
    background: var(--sk-deco-rose);
    bottom: 0.25rem; right: 13rem;
}

/* ---------- 9. Список задач ---------- */
.skilline-page .sk-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.skilline-page .sk-list__item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    color: var(--sk-text-muted);
    font-size: 1rem;
    line-height: 1.55;
}

.skilline-page .sk-list__icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    background: var(--sk-bg-card);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.skilline-page .sk-list__icon--num {
    background: rgba(190, 24, 93, .12);
    color: var(--sk-accent);
    font-weight: 700;
    font-size: 1rem;
    box-shadow: none;
}

/* ---------- 10. Программа курса ---------- */
.skilline-page .sk-program { background: var(--sk-bg); }

.skilline-page .sk-program__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .skilline-page .sk-program__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem 1.5rem;
    }
}

.skilline-page .sk-program__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--sk-bg-card);
    border: 1px solid var(--sk-border);
    border-radius: 0.75rem;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.skilline-page .sk-program__item:hover {
    transform: translateY(-2px);
    border-color: var(--sk-accent);
    box-shadow: 0 10px 24px -12px var(--sk-accent-glow);
}

.skilline-page .sk-program__num {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(190, 24, 93, 0.12);
    color: var(--sk-accent);
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1;
}

.skilline-page .sk-program__name {
    color: var(--sk-text);
    font-size: 0.95rem;
    line-height: 1.4;
}

@media (max-width: 480px) {
    .skilline-page .sk-program__item { padding: 0.85rem 1rem; gap: 0.75rem; }
    .skilline-page .sk-program__num  { width: 2rem; height: 2rem; font-size: 0.75rem; }
    .skilline-page .sk-program__name { font-size: 0.9rem; }
}

.skilline-page .sk-program__item--extra { display: none; }
.skilline-page .sk-program--expanded .sk-program__item--extra {
    display: flex;
    animation: sk-program-fade .25s ease both;
}

.skilline-page .sk-program__more {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.skilline-page .sk-program__more .sk-btn { min-width: 16rem; }

@keyframes sk-program-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 11. Преподаватели ---------- */
.skilline-page .sk-about { background: var(--sk-bg); }

.skilline-page .sk-about__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 900px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .skilline-page .sk-about__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.skilline-page .sk-about-card__about {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    background: var(--sk-bg-card);
    border: 1px solid var(--sk-border);
    border-radius: 1rem;
    padding: 1.5rem 1.5rem 2rem;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.skilline-page .sk-about-card__about:hover {
    transform: translateY(-4px);
    border-color: var(--sk-accent);
    box-shadow: 0 18px 40px -22px var(--sk-accent-glow);
}

.skilline-page .sk-about-card__image {
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    border-radius: .75rem;
}

.skilline-page .sk-about-card__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--sk-text);
    margin: 0;
}

.skilline-page .sk-about__desc {
    color: var(--sk-text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* ---------- 12. PRICING — горизонтальная карточка ---------- */
.skilline-page .sk-pricing { background: var(--sk-bg); }

.skilline-page .sk-pricing__card {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    background: var(--sk-bg-card);
    border: 2px solid var(--sk-accent);
    border-radius: 1.75rem;
    padding: 2.5rem 2rem 2.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    overflow: hidden;
    box-shadow: 0 30px 70px -35px var(--sk-accent-glow);
}

.skilline-page .sk-pricing__card::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(190, 24, 93, .18) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.skilline-page .sk-pricing__card > * { position: relative; z-index: 1; }

@media (min-width: 768px) {
    .skilline-page .sk-pricing__card {
        grid-template-columns: 1fr 1.15fr;
        padding: 3rem 3.5rem;
        gap: 3.5rem;
        align-items: center;
    }
}

.skilline-page .sk-pricing__badge {
    position: absolute;
    top: 1.25rem;
    left: 1.75rem;
    background: linear-gradient(135deg, var(--sk-accent) 0%, #9D174D 100%);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    padding: .35rem 1rem;
    border-radius: 9999px;
    letter-spacing: .04em;
    text-transform: uppercase;
    z-index: 2;
    box-shadow: 0 8px 20px -8px var(--sk-accent-glow);
}

@media (min-width: 768px) {
    .skilline-page .sk-pricing__badge {
        top: 1.5rem;
        left: 3.5rem;
    }
}

.skilline-page .sk-pricing__left {
    padding-top: 1.75rem;
}

@media (min-width: 768px) {
    .skilline-page .sk-pricing__left { padding-top: 2rem; }
}

.skilline-page .sk-pricing__name {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--sk-text);
    margin: 0 0 .75rem;
    line-height: 1.25;
}

.skilline-page .sk-pricing__desc {
    color: var(--sk-text-muted);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 1.75rem;
    max-width: 24rem;
}

.skilline-page .sk-pricing__price {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
    color: var(--sk-text);
}

.skilline-page .sk-pricing__amount {
    font-size: clamp(2.5rem, 5.5vw, 3.5rem);
    font-weight: 700;
    line-height: 1;
    color: var(--sk-accent);
    letter-spacing: -.02em;
}

.skilline-page .sk-pricing__currency { font-size: .7em; }
.skilline-page .sk-pricing__period {
    font-size: 1.05rem;
    color: var(--sk-text-muted);
    font-weight: 500;
}

.skilline-page .sk-pricing__right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

.skilline-page .sk-pricing__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: .85rem;
    width: 100%;
}

@media (min-width: 500px) {
    .skilline-page .sk-pricing__features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .85rem 1.5rem;
    }
}

.skilline-page .sk-pricing__features li {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 1.75rem;
    color: var(--sk-text);
    font-size: 0.95rem;
    line-height: 1.5;
}

.skilline-page .sk-pricing__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: rgba(190, 24, 93, .15) no-repeat center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BE185D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: .7rem;
}

/* .skilline-page .sk-pricing__cta {
    width: 100%;
    max-width: 22rem;
    margin-top: .5rem;
} */

.skilline-page .sk-pricing__cta {
    max-width: 22rem;
    padding: 1rem;
}

.skilline-page .sk-pricing__note {
    font-size: .85rem;
    color: var(--sk-text-soft);
    margin: 0;
}

/* ---------- 13. FAQ ---------- */
.skilline-page .sk-faq {
    /* background: linear-gradient(
        180deg,
        var(--sk-bg-cream) 0%,
        var(--sk-bg) 100%
    ); */
    position: relative;
}

.skilline-page .sk-faq::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--sk-hero-blob-3) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    opacity: .7;
}

.skilline-page .sk-faq__list {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

@media (min-width: 768px) {
    .skilline-page .sk-faq__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.1rem 1.5rem;
    }
}

.skilline-page .sk-faq__item {
    position: relative;
    background: var(--sk-faq-bg);
    border: 1px solid var(--sk-border);
    border-radius: .9rem;
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.skilline-page .sk-faq__item:hover {
    border-color: rgba(190, 24, 93, .5);
    transform: translateY(-2px);
}

.skilline-page .sk-faq__item[open] {
    border-color: var(--sk-accent);
    background: var(--sk-faq-hover);
    box-shadow: 0 18px 40px -22px var(--sk-accent-glow);
}

.skilline-page .sk-faq__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--sk-accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .3s ease;
    z-index: 2;
}

.skilline-page .sk-faq__item[open]::before { transform: scaleY(1); }

.skilline-page .sk-faq__question {
    cursor: pointer;
    padding: 1.15rem 3.5rem 1.15rem 1.35rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--sk-text);
    position: relative;
    list-style: none;
    line-height: 1.4;
}

.skilline-page .sk-faq__question::-webkit-details-marker { display: none; }
.skilline-page .sk-faq__question::marker { content: ""; }

.skilline-page .sk-faq__question::after {
    content: "";
    position: absolute;
    right: 1.25rem;
    top: 50%;
    width: 1.4rem;
    height: 1.4rem;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BE185D' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform .3s ease;
}

.skilline-page .sk-faq__item[open] .sk-faq__question::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BE185D' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
    transform: translateY(-50%) rotate(180deg);
}

.skilline-page .sk-faq__answer {
    padding: 0 1.35rem 1.35rem;
    color: var(--sk-text-muted);
    font-size: .95rem;
    line-height: 1.65;
    animation: sk-faq-fade .3s ease both;
}

.skilline-page .sk-faq__answer p { margin: 0; }

@keyframes sk-faq-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 14. Финальный CTA ---------- */
.skilline-page .sk-cta {
    padding: 5rem 0;
    background: linear-gradient(135deg, #831843 0%, #BE185D 45%, #7E22CE 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.skilline-page .sk-cta::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -80px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .22) 0%, transparent 70%);
    filter: blur(60px);
    pointer-events: none;
}

.skilline-page .sk-cta::after {
    content: "";
    position: absolute;
    bottom: -140px;
    left: -100px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167, 139, 250, .35) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
}

.skilline-page .sk-cta__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 40rem;
    margin: 0 auto;
}

.skilline-page .sk-cta__title {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1rem;
    color: #fff;
}

.skilline-page .sk-cta__text {
    font-size: 1.1rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .92);
    margin: 0 0 2rem;
}

.skilline-page .sk-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.skilline-page .sk-cta .sk-btn--primary {
    background: #fff;
    color: var(--sk-accent);
    box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .35);
}

.skilline-page .sk-cta .sk-btn--primary:hover { background: #FFF1F6; }

/* ---------- 15. Анимации ---------- */
@keyframes sk-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

@keyframes sk-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .5; }
}

@keyframes sk-ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}

.skilline-page .sk-float       { animation: sk-float 4s ease-in-out infinite; }
.skilline-page .sk-float-slow  { animation: sk-float 5s ease-in-out infinite; animation-delay: .5s; }
.skilline-page .sk-anim-pulse  { animation: sk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.skilline-page .sk-anim-ping   { animation: sk-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* ---------- 16. Адаптив ---------- */
@media (max-width: 767px) {
    .skilline-page .sk-split__image--center { width: 100%; }
}

@media (max-width: 639px) {
    .skilline-page .sk-pricing__card {
        padding: 3rem 1.5rem 2rem;
        border-radius: 1.25rem;
    }
    .skilline-page .sk-pricing__badge {
        left: 50%;
        transform: translateX(-50%);
    }
}











/* ============================================================================
   Отзывы — Skilline
   ============================================================================ */

/* ---------- Шапка ---------- */
.skilline-page .sk-reviews-hero {
    padding: 4rem 0;
    text-align: center;
}

.skilline-page .sk-reviews-hero__inner { text-align: center; }

.skilline-page .sk-reviews-hero__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--sk-text);
    margin: 0 0 1rem;
}

.skilline-page .sk-reviews-hero__lead {
    font-size: 1.125rem;
    color: var(--sk-text-muted);
    max-width: 36rem;
    margin: 0 auto;
}

/* ---------- Фильтр ---------- */
.skilline-page .sk-reviews-filter {
    background: var(--sk-bg-cream);
    padding: 0 0 3rem;
}

.skilline-page .sk-reviews-filter__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.skilline-page .sk-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--sk-border);
    border-radius: 9999px;
    background: var(--sk-bg-card);
    color: var(--sk-text);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease;
}

.skilline-page .sk-chip:hover {
    transform: translateY(-2px);
    border-color: var(--sk-accent);
}

.skilline-page .sk-chip.is-active {
    background: var(--sk-accent);
    color: #fff;
    border-color: var(--sk-accent);
}

.skilline-page .sk-chip__count {
    font-size: 0.75rem;
    opacity: .75;
}

/* ---------- Сетка отзывов ---------- */
.skilline-page .sk-reviews { padding: 2rem 0;}

/* ВАЖНО: ограничиваем ширину именно здесь, чтобы карточки не растягивались */
.skilline-page .sk-reviews__container {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.skilline-page .sk-reviews__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start; /* карточки выравниваются по верху, не растягиваются */
}

@media (min-width: 640px) {
    .skilline-page .sk-reviews__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .skilline-page .sk-reviews__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.75rem;
    }
}

.skilline-page .sk-reviews__empty {
    text-align: center;
    color: var(--sk-text-muted);
    padding: 3rem 0;
    font-size: 1.05rem;
    margin: 0;
}





/* JS-режим masonry: карточки позиционируются скриптом */
.skilline-page .sk-reviews__grid--js {
    display: block;
    position: relative;
    transition: height .25s ease;
}

.skilline-page .sk-reviews__grid--js .sk-review-card {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    will-change: top, left;
    /* переходы НЕ задаём — включим после первого layout */
}

/* Плавные переходы включаются только когда первый layout уже сделан */
.skilline-page .sk-reviews__grid--js.sk-reviews__grid--ready .sk-review-card {
    transition:
        top .3s ease,
        left .3s ease,
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}







/* ---------- Карточка ---------- */
.skilline-page .sk-review-card {
    background: var(--sk-bg-card);
    border: 1px solid var(--sk-border);
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-self: start; /* важно для grid: не тянется на всю высоту ряда */
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.skilline-page .sk-review-card:hover {
    transform: translateY(-4px);
    border-color: var(--sk-accent);
    box-shadow: 0 14px 34px -18px rgba(244, 140, 6, .55);
}

/* Обёртка картинки — div, не button, чтобы не было «убегающих» элементов */
.skilline-page .sk-review-card__media {
    position: relative;
    display: block;
    width: 100%;
    background: var(--sk-bg-cream);
    cursor: zoom-in;
    overflow: hidden;
    line-height: 0; /* убирает нижний зазор под картинкой */
    outline: none;
}

.skilline-page .sk-review-card__media:focus-visible {
    box-shadow: 0 0 0 3px var(--sk-accent);
}

.skilline-page .sk-review-card__media img {
    display: block;
    width: 100%;
    height: auto; /* натуральная высота, без обрезки и растяжения */
    transition: transform .35s ease;
}

.skilline-page .sk-review-card__media:hover img {
    transform: scale(1.03);
}

/* Лупа — всегда в правом верхнем углу картинки,
   видна только при наведении, не влияет на раскладку (position: absolute) */
.skilline-page .sk-review-card__zoom {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none; /* клики уходят на родителя — он и открывает лайтбокс */
    z-index: 2;
}

.skilline-page .sk-review-card__zoom svg {
    width: 1rem;
    height: 1rem;
    display: block;
}

.skilline-page .sk-review-card__media:hover .sk-review-card__zoom,
.skilline-page .sk-review-card__media:focus-visible .sk-review-card__zoom {
    opacity: 1;
    transform: translateY(0);
}

/* Текстовое тело карточки */
.skilline-page .sk-review-card__body {
    padding: 1.25rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.skilline-page .sk-review-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sk-text);
    margin: 0;
    line-height: 1.35;
}

.skilline-page .sk-review-card__text {
    color: var(--sk-text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
}

/* ---------- Лайтбокс (вне .skilline-page) ---------- */
.sk-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, .88);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: sk-fade-in .2s ease both;
}

.sk-lightbox[hidden] { display: none; }

.sk-lightbox__inner {
    max-width: 90vw;
    max-height: 90vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.sk-lightbox__inner img {
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: .75rem;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
    display: block;
}

.sk-lightbox__caption {
    color: #fff;
    font-size: 1rem;
    opacity: .85;
    text-align: center;
    margin: 0;
}

.sk-lightbox__caption[hidden] { display: none; }

.sk-lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease, transform .2s ease;
}

.sk-lightbox__close:hover {
    background: rgba(255, 255, 255, .3);
    transform: scale(1.05);
}

@keyframes sk-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (max-width: 639px) {
    .sk-lightbox { padding: 1rem; }
    .sk-lightbox__inner img { max-height: 75vh; }
}

/* ---------- Карточка с видео ---------- */
.skilline-page .sk-review-card__media--video {
    cursor: default;
    background: #000;
    line-height: 0;
}

.skilline-page .sk-review-card__media--video video {
    display: block;
    width: 100%;
    height: auto;
    background: #000;
}

/* На мобильных ограничиваем высоту видео, чтобы карточка не занимала весь экран */
@media (max-width: 639px) {
    .skilline-page .sk-review-card__media--video video {
        max-height: 70vh;
        object-fit: contain;
    }
}

/* В карточке с видео лёпа не нужна */
.skilline-page .sk-review-card--video .sk-review-card__zoom {
    display: none;
}

a.sk-footer__contact {
    color: #ffffff;
}

.site-branding__logo-link, .site-branding__logo {
    display: block !important;
}


/* ============================================================================
   Логотип в шапке — принудительное переключение по теме.
   Перебивает правила темы и работает во всех вариантах записи атрибута.
   ============================================================================ */

/* 1. По умолчанию (нет атрибута theme) — показываем светлый логотип */
.site-branding__logo--light { display: inline-block !important; }
.site-branding__logo--dark  { display: none !important; }

/* 2. Явная светлая тема */
html[theme="light"] .site-branding__logo--light,
html[theme=light]   .site-branding__logo--light { display: inline-block !important; }

html[theme="light"] .site-branding__logo--dark,
html[theme=light]   .site-branding__logo--dark  { display: none !important; }

/* 3. Тёмная тема */
html[theme="dark"] .site-branding__logo--light,
html[theme=dark]   .site-branding__logo--light { display: none !important; }

html[theme="dark"] .site-branding__logo--dark,
html[theme=dark]   .site-branding__logo--dark  { display: inline-block !important; }

@media (min-width: 768px) {
    .site-branding img {
        max-height: 3em !important;
    }
}


.skilline-page .sk-hero__image {
    width: 90%;
}


@media (max-width: 1023px) {
    .skilline-page .sk-hero__image {
        width: 50%;
    }
}

@media (max-width: 500px) {
    .skilline-page .sk-hero__image {
        width: 90%;
    }
}

.skilline-page .sk-hero {
    padding: 10rem 0 6rem;
}

@media (min-width: 1024px) {
    .skilline-page .sk-hero {
        padding: 2rem 0 6rem;
    }
}

.btn-block {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 20px;
}

h1.site-title.site-branding__title {
    display: none;
}