/* ==========================================================================
1. Шрифты (самохост)
========================================================================== */
@font-face {
    font-family: 'Varela';
    src: url('fonts/varela-latin-400-normal.woff2') format('woff2'),
         url('fonts/varela-latin-400-normal.woff') format('woff'),
         url('fonts/varela-latin-400-normal.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Kurale';
    src: url('fonts/Kurale_400_normal.woff') format('woff'),
         url('fonts/Kurale_400_normal.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
2. Палитра
========================================================================== */
:root {
    --ink: #1e1e2f;
    --text: #4b4c58;
    --muted: #7d7e8c;
    --green: #4ed0b1;
    --mint: #7dd9d2;
    --mint-dark: #46bfb8;
    --peach: #feba88;
    --paper: #fbfaf6;
    --paper-dark: #f3efe6;
    --line: #edeadf;
}

/* ==========================================================================
3. База
========================================================================== */
body {
    font-family: 'Varela', 'Segoe UI', system-ui, sans-serif;
    background: var(--paper);
    color: var(--text);
    line-height: 1.65;
    overflow-x: hidden;
    overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; }
::selection { background: var(--mint); color: #fff; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

/* ==========================================================================
4. Типографика
========================================================================== */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: 'Varela', sans-serif;
    color: var(--ink);
}
h1, .h1 { font-size: 28px; }
h2, .h2 { font-size: 24px; }
h3, .h3 { font-size: 20px; }
h4, .h4 { font-size: 16px; }
h5, .h5 { font-size: 12px; }
h6, .h6 { font-size: 10px; }

h2::after { content: '.'; color: var(--mint-dark); }
.heroslider-block h2::after { content: none; }
.project-block ul li::marker { color: var(--mint-dark); }

/* Знак препинания внутри заголовка — цветной */
.dot {
    color: var(--mint);
}
/* Если знак уже в разметке (span.dot), авто-точку отключаем, чтобы не двоилось */
.no-autodot::after {
    content: none;
}

/* ==========================================================================
5. Ссылки
========================================================================== */
a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--green);
    text-underline-offset: 4px;
}
a:hover { color: var(--mint-dark); }
a:visited:not(.btn) { color: var(--ink); }

/* ==========================================================================
6. Кнопки
========================================================================== */
.btn {
    border-radius: 999px;
    border: 1px solid var(--ink);
    background: #fff;
    color: var(--ink);
    letter-spacing: .03em;
    transition: box-shadow .25s ease, color .2s ease, transform .15s ease;
}
.btn:hover { box-shadow: inset 0 -3rem 0 0 var(--peach); color: var(--ink); }
.btn:active { transform: translateY(1px); }

.btn.btn-success,
.hero-slider__form .hero-slider__go {
    background: var(--mint);
    border-color: var(--mint);
    color: var(--ink);
    font-weight: 700;
}
.btn.btn-success:hover,
.hero-slider__form .hero-slider__go:hover {
    box-shadow: inset 0 -3rem 0 0 var(--mint-dark);
    color: #fff;
}

/* ==========================================================================
7. Каркас
========================================================================== */
.container-narrow {
    margin: 0 auto;
    max-width: 700px;
    padding-left: 15px;
    padding-right: 15px;
}
.container-narrow > hr { margin: 30px 0; border-color: var(--line); }

/* ==========================================================================
8. Шапка
========================================================================== */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(251, 250, 246, .96);
    border-bottom: 1px solid var(--line);
    padding: 10px 0 4px;
}
.logo { display: inline-block; }
.logo img { max-height: 80%; max-width: 80%; height: auto; }

/* ==========================================================================
9. Гамбургер
========================================================================== */
.menu-toggle {
    display: block;
    margin: 8px auto 6px;
    padding: 8px 10px;
    min-height: 44px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
}
.menu-toggle .bar {
    display: block;
    width: 24px;
    height: 2px;
    margin: 4px 0;
    background: var(--ink);
}
@media (min-width: 768px) { .menu-toggle { display: none; } }

/* ==========================================================================
10. Меню
========================================================================== */
.main-menu-list {
    list-style: none;
    margin: 0;
    padding: 6px 0 6px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 20px;
}
.main-menu-list a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
}
.main-menu-list a:hover { color: var(--mint-dark); border-bottom-color: var(--green); }
@media (max-width: 767.98px) {
    .main-menu-list { flex-direction: column; align-items: center; gap: 0; padding-bottom: 10px; }
    .main-menu-list li { margin: 4px 0; }
}

/* ==========================================================================
10b. Шапка на десктопе: лого слева, меню справа
========================================================================== */
@media (min-width: 768px) {
    .sticky-header {
        display: flex;
        align-items: center;
        gap: 24px;
        padding: 10px max(15px, calc(50% - 510px));
    }
    .sticky-header > .text-center {
        text-align: left;
        flex: 0 0 auto;
    }
    .sticky-header .logo img {
        height: 48px;
        width: auto;
        max-width: none;
    }
    /* Меню видно без гамбургера: id бьёт класс .collapse у Bootstrap */
    #mainMenu {
        display: block;
        flex: 1;
    }
    .main-menu-list {
        justify-content: flex-end;
        padding: 0;
    }
}

/* Последний пункт меню — тёмная пилюля, как «Free Trial» в Skillex */
.main-menu-list li:last-child a {
    display: inline-block;
    background: var(--ink);
    color: #fff;
    border-radius: 999px;
    padding: 8px 20px;
    text-decoration: none;
    border-bottom: 0;
    transition: box-shadow .25s ease, color .2s ease;
}
.main-menu-list li:last-child a:hover {
    box-shadow: inset 0 -3rem 0 0 var(--peach);
    color: var(--ink);
}

/* ==========================================================================
11. Херо-слайд: один компонент на все экраны
========================================================================== */
.hero-section {
    position: relative;
    padding: 40px 0 10px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}
.heroslider-block .container-narrow {
    max-width: 1050px;
    position: relative;
}

.hero-slider {
    display: flex;
    gap: 20px;
    height: 500px;
}
.hero-slider__title {
    flex: 0 0 130px;
    font-family: 'Kurale', serif;
    font-size: 22px;
    line-height: 1.5;
    color: var(--ink);
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fade-in-block.visible .hero-slider__title { opacity: 1; transform: translateY(0); }

/* ВАЖНО: min-height в пикселях — дорожка не схлопнется даже при height:auto */
.hero-slider__images {
    display: flex;
    gap: 10px;
    flex: 1;
    height: 100%;
    min-height: 420px;
}
.hero-slider__image {
    position: relative;
    flex-grow: 1;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 0 40px rgba(0, 0, 0, .1);
    cursor: pointer;
    opacity: .5;
    transform: translateX(-60px);
    transition: flex-grow .5s ease,
                opacity 1.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero-slider__image.active { flex-grow: 3; }
.fade-in-block.visible .hero-slider__image { opacity: 1; transform: translateX(0); }

.hero-slider__image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 600px;
    max-width: none;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    transition: transform 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero-slider__image.active img { transform: scale(1.3); }

.hero-slider__image-title {
    position: absolute;
    left: 20px;
    bottom: 100px;
    z-index: 2;
    color: #fff;
    font-size: 30px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .8s ease .3s;
    text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.hero-slider__image-number {
    position: absolute;
    right: 0;
    bottom: 70px;
    z-index: 2;
    padding: 10px 20px;
    color: #fff;
    font-size: 30px;
    text-align: right;
    opacity: 0;
    transition: opacity .5s ease .3s;
    text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.hero-slider__image.active .hero-slider__image-title,
.hero-slider__image.active .hero-slider__image-number { opacity: 1; }

/* Форма WhatsApp */
.hero-slider__form {
    display: flex;
    height: 50px;
    width: max-content;
    margin: 20px auto 0;
    box-shadow: 0 0 40px rgba(0, 0, 0, .3);
    z-index: 3;
}
.hero-slider__input {
    width: 200px;
    padding: 0 20px;
    border: 1px solid var(--line);
    border-right: 0;
    background: #fff;
}
.hero-slider__go {
    flex-shrink: 0;
    display: flex;
    width: 50px;
    align-items: center;
    justify-content: center;
    background: var(--mint);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
}
@media (min-width: 992px) {
    .hero-slider__form {
        position: absolute;
        left: 15px;
        top: 300px;
        margin: 0;
        opacity: 0;
        transform: translateY(40px);
        transition: all 1.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .fade-in-block.visible .hero-slider__form { opacity: 1; transform: translateY(0); }
}

/* Мобилки и планшеты: тот же слайдер, компактнее; высоты — в пикселях */
@media (max-width: 991.98px) {
    .hero-slider {
        flex-direction: column;
        height: auto;
        gap: 15px;
    }
    .hero-slider__title {
        flex: none;
        text-align: center;
        font-size: 20px;
    }
    .hero-slider__images {
        height: 420px;
        min-height: 420px;
    }
    .hero-slider__image-title { left: 12px; bottom: 70px; font-size: 18px; }
    .hero-slider__image-number { bottom: 40px; font-size: 18px; padding: 6px 12px; }
}
@media (max-width: 1199.98px) {
    .hero-slider__image-title,
    .hero-slider__image-number { font-size: 24px; }
}

/* ==========================================================================
12. Блоки, карточки, таблицы
========================================================================== */
.project-block { padding: 50px 0; border-top: 1px solid var(--line); }
.card { border: 0; border-radius: 18px; background: #fff; box-shadow: 0 12px 32px rgba(30, 30, 47, .08); }
.project-block .table-responsive { border: 1px solid var(--line); border-radius: 14px; }
.project-block .table { margin-bottom: 0; }
.project-block .table thead th { background: var(--ink); color: #fff; border-bottom: 0; letter-spacing: .04em; }

/* ==========================================================================
13. Формы
========================================================================== */
.form-control { border-radius: 12px; border: 1px solid #d8dbe4; background: #fff; padding: .6rem 1rem; }
.form-control:focus { border-color: var(--mint); box-shadow: 0 0 0 .25rem rgba(78, 208, 177, .2); }
.form-field-hidden { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
14. Плавное появление блоков
========================================================================== */
.js .fade-in-block { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.js .fade-in-block.visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
15. Изображения
========================================================================== */
.img-polaroid {
    padding: 4px;
    background-color: #fff;
    border: 1px solid rgba(30, 30, 47, .2);
    box-shadow: 0 1px 3px rgba(30, 30, 47, .1);
    max-width: 100%;
    height: auto;
}
.project-block img { display: block; margin-left: auto; margin-right: auto; }
.contacts-list img,
.disqus-block h2 img { display: inline-block; margin: 0 8px 0 0; vertical-align: middle; }
.zoom-img-wrap { z-index: 1000; }

/* ==========================================================================
16. Контакты
========================================================================== */
.contacts-list { margin-top: 10px; }
.contacts-list img { width: 24px; height: 24px; }

/* ==========================================================================
17. Подвал по эталону Skillex: три колонки + нижняя линия с иконками
========================================================================== */
.footer {
    background: var(--paper-dark);
    border-radius: 24px 24px 0 0;
    margin-top: 70px;
    padding: 50px 0 30px;
}
.footer .container-narrow { max-width: 1050px; }

.footer-grid {
    display: grid;
    grid-template-columns: 0.8fr 1fr 1.2fr;
    gap: 40px;
    align-items: start;
}
.footer-logo img { height: auto; width: auto; }

.footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
}
.footer-menu a {
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.footer-menu a:hover { color: var(--mint-dark); border-bottom-color: var(--green); }

.footer-contacts h3 { font-size: 22px; margin-bottom: 14px; }
.footer-contacts .btn { margin-bottom: 16px; }
.btn-ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.footer-contacts__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.footer-bottom {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.footer-bottom p { margin: 0; color: var(--muted); }

.footer-social { display: flex; gap: 10px; }
.footer-social a {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    text-decoration: none;
    transition: box-shadow .25s ease, color .2s ease;
}
.footer-social a:hover { box-shadow: inset 0 -3rem 0 0 var(--peach); color: var(--ink); }

@media (max-width: 991.98px) {
    .footer-grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
    .footer-logo img { display: block; margin: 0 auto; }
    .footer-menu { justify-content: center; }
    .footer-bottom { justify-content: center; }
}

/* ==========================================================================
18. Страница 404
========================================================================== */
.error-404 { padding: 60px 0 40px; text-align: center; }
.error-404 .error-code {
    font-family: 'Kurale', serif;
    font-size: 96px;
    line-height: 1;
    margin-bottom: 10px;
    color: #e7e3da;
}
@media (max-width: 480px) {
    .error-404 { padding-top: 40px; }
    .error-404 .error-code { font-size: 64px; }
}

/* ==========================================================================
19. Видео-блок по эталону: заголовок и навыки слева, видео с плашкой справа
========================================================================== */
.video-block {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 50px 0 10px;
}
.video-block .container-narrow { max-width: 1050px; }

.video-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    grid-template-areas:
        "title desc"
        "skills media";
    gap: 30px 50px;
    align-items: start;
}
.video-grid__title { grid-area: title; font-size: 32px; line-height: 1.25; }
.video-grid__desc { grid-area: desc; margin: 0; }

/* Левая колонка: иконки в белых кружках + пунктирная линия */
.video-skills { list-style: none; margin: 0; padding: 0; grid-area: skills; }
.video-skills li { display: flex; gap: 16px; padding-bottom: 28px; position: relative; }
.video-skills li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 27px;
    top: 62px;
    bottom: 6px;
    border-left: 1px dashed var(--muted);
}
.video-skills__ico {
    flex: 0 0 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 24px rgba(30, 30, 47, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
}
.video-skills__name { font-weight: 700; color: var(--ink); font-size: 18px; margin-bottom: 4px; }

/* Плашка наезжает на видео сверху, прижата вправо, как в эталоне */
.video-grid__media { grid-area: media; }
.video-stats {
    position: relative;
    z-index: 2;
    width: min(560px, 92%);
    margin: 0 0 -60px auto;
    padding: 18px 24px;
    background: var(--mint-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}
.video-stats__item { display: flex; align-items: center; gap: 12px; }
.video-stats__number { font-size: 40px; line-height: 1; color: var(--ink); }
.video-stats__label {
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink);
    max-width: 150px;
}
.video-stats__divider { width: 1px; height: 44px; background: var(--ink); }

.video-block__frame { overflow: hidden; border-radius: 20px; }
.video-block__frame iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

@media (max-width: 991.98px) {
    .video-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "desc"
            "media"
            "skills";
        gap: 24px;
    }
    .video-grid__title { font-size: 26px; }
    .video-stats { margin: 0 auto -40px; width: 100%; }
}
@media (max-width: 575.98px) {
    .video-stats { flex-direction: column; gap: 12px; padding: 14px 18px; margin-bottom: -24px; text-align: center; }
    .video-stats__divider { width: 44px; height: 1px; }
}

/* ==========================================================================
20. Отзывы
========================================================================== */
.reviews-block { width: 100vw; margin-left: calc(50% - 50vw); padding: 50px 0 10px; }
.reviews-block h2 { margin-bottom: 30px; }
.reviews-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    max-width: 1050px;
    margin: 0 auto;
    padding: 10px 15px 20px;
    scrollbar-width: none;
}
.reviews-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    box-shadow: 0 8px 24px rgba(30, 30, 47, .06);
}
.reviews-card__text { margin: 0; }
.reviews-card__author { display: flex; align-items: center; gap: 12px; }
.reviews-card__ava {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Kurale', serif;
    font-size: 22px;
    color: var(--ink);
    background: #dff5ee;
}
img.reviews-card__ava { object-fit: cover; }
.reviews-card:nth-child(even) .reviews-card__ava { background: #ffe9d9; }
.reviews-card__name { font-weight: 700; color: var(--ink); }
.reviews-card__spec { color: var(--green); }
.reviews-nav { display: flex; justify-content: center; gap: 48px; padding-bottom: 10px; }
.reviews-nav__btn {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    transition: color .2s ease, transform .2s ease;
}
.reviews-nav__btn:hover { color: var(--mint-dark); transform: scale(1.15); }
@media (max-width: 480px) { .reviews-card { flex-basis: 85%; } }

/* ==========================================================================
21. Мобильные
========================================================================== */
@media (max-width: 480px) {
    h1, .h1 { font-size: 24px; }
    h2, .h2 { font-size: 20px; }
    .hero-section { padding-top: 25px; }
    .project-block { padding: 35px 0; }
}

/* ==========================================================================
22. Якоря
========================================================================== */
[id] { scroll-margin-top: 110px; }

/* ==========================================================================
23. Карточки направлений (по образцу Skillex) + модальные окна
========================================================================== */
.cat-block {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 50px 0 10px;
}
.cat-block .container-narrow { max-width: 1050px; }

.cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.cat-card {
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
}
.cat-card__img {
    border-radius: 20px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}
.cat-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.cat-card:hover .cat-card__img img,
.cat-card:focus-visible .cat-card__img img { transform: scale(1.05); }
.cat-card__title { font-size: 20px; font-weight: 700; color: var(--ink); margin-top: 14px; }
.cat-card__meta { color: var(--muted); }

/* Пастельные подложки, как в эталоне */
.cat-card:nth-child(1) .cat-card__img { background: #f6e3d3; }
.cat-card:nth-child(2) .cat-card__img { background: #c9d8ab; }
.cat-card:nth-child(3) .cat-card__img { background: #dcdce4; }
.cat-card:nth-child(4) .cat-card__img { background: #f3e0ea; }

/* Планшет: 2×2, мобильные: одна колонка с квадратом */
@media (max-width: 991.98px) {
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .cat-grid { grid-template-columns: 1fr; }
    .cat-card__img { aspect-ratio: 1 / 1; }
}

/* Модальные окна */
.cat-modal .modal-content {
    border: 0;
    border-radius: 24px;
    overflow: hidden;
    background: #f8f8fa;
}
.cat-modal__img { height: 320px; }
.cat-modal__img img { width: 100%; height: 100%; object-fit: cover; }
.cat-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    background: #fff;
    border-radius: 50%;
}
.cat-modal__body { padding: 28px 32px 32px; }