/* ============================================================
   nl-design.css — дизайн-слой «Новый уровень» (2026-10-19)
   Только улучшения поверх main.css: типографика, кнопки,
   карточки, хедер, плавность. Ничего не ломает вёрстку.
   ============================================================ */

/* ---------- База ---------- */
html {
    scroll-behavior: smooth;
}
::selection {
    background: var(--main-color);
    color: #1C1C1C;
}
body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img {
    transition: opacity .4s ease;
}
a {
    transition: color .25s ease, opacity .25s ease, border-color .25s ease;
}

/* Заголовки секций: аккуратный акцент и ритм */
.md-main-title {
    letter-spacing: .02em;
    text-wrap: balance;
}
.md-main-title::after {
    content: "";
    display: block;
    width: 4.2vw;
    height: .31vw;
    min-height: 4px;
    margin-top: 1.2vw;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--main-color), rgba(254, 201, 106, 0));
}
.md-main-title + * {
    margin-top: 1.6vw;
}

/* ---------- Хедер ---------- */
.header {
    transition: background-color .35s ease, box-shadow .35s ease;
}
.header.fixed {
    background-color: rgba(12, 12, 12, .92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 .5vw 2vw rgba(0, 0, 0, .35);
}
.nav-wrap .nav .nav-item a {
    position: relative;
    transition: color .25s ease;
}
.nav-wrap .nav .nav-item a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -.4vw;
    height: 2px;
    border-radius: 2px;
    background: var(--main-color);
    transition: right .3s ease;
}
.nav-wrap .nav .nav-item a:hover::after {
    right: 0;
}
.header__contacts .call-back {
    transition: color .25s ease, border-color .25s ease;
}
.header__contacts .call-back:hover {
    color: var(--main-color);
    border-color: var(--main-color);
}
.header__social .social-links a {
    transition: transform .25s ease, filter .25s ease;
}
.header__social .social-links a:hover {
    transform: translateY(-2px) scale(1.06);
    filter: drop-shadow(0 .3vw .6vw rgba(0, 0, 0, .3));
}

/* ---------- Кнопки ---------- */
.md-main-color-btn,
.first__buttons-btn,
.form-btn {
    will-change: transform;
    transition: transform .25s ease, box-shadow .35s ease, filter .35s ease;
}
.md-main-color-btn:hover,
.first__buttons-btn:hover,
.form-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgb(163 124 67 / 55%), inset 0 -4px 1px #CEA759;
    filter: brightness(1.04);
}
.md-main-color-btn:active,
.first__buttons-btn:active,
.form-btn:active {
    transform: translateY(0);
}

/* ---------- Герой ---------- */
.first__title {
    text-shadow: 0 .4vw 1.6vw rgba(0, 0, 0, .55);
}
/* Аккуратная «подсветка» вместо сырого <mark> */
.first__text mark,
.calc-price__text mark {
    background: linear-gradient(180deg, transparent 58%, var(--main-color) 58%);
    color: inherit;
    padding: 0 .18em;
}
.first__text b mark {
    font-weight: 700;
}

/* ---------- Карточки услуг / портфолио ---------- */
.services__item,
.our-works__slide,
.work-steps__slide,
.questions__item {
    transition: transform .35s ease, box-shadow .35s ease;
}
.services__item:hover,
.work-steps__slide:hover {
    transform: translateY(-.45vw);
    box-shadow: 0 1.2vw 2.6vw rgba(0, 0, 0, .18);
}
.our-works__slide:hover {
    transform: translateY(-.45vw) scale(1.012);
    box-shadow: 0 1.4vw 3vw rgba(0, 0, 0, .25);
}
.our-works__slide .video-btn {
    transition: transform .3s ease, background-color .3s ease;
}
.our-works__slide:hover .video-btn {
    transform: scale(1.1);
}

/* ---------- Квиз ---------- */
.calc-price__quiz {
    box-shadow: 0 1.6vw 4vw rgba(0, 0, 0, .28);
}
.answers-item {
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.answers-item:hover {
    transform: translateY(-.3vw);
    box-shadow: 0 .9vw 2vw rgba(0, 0, 0, .14);
    border-color: var(--main-color);
}

/* ---------- FAQ ---------- */
.questions__item .item-title {
    transition: color .25s ease;
}
.questions__item:hover .item-title {
    color: var(--main-color);
}
.questions__item .item-btn {
    transition: background-color .3s ease, transform .3s ease;
}
.questions__item.open .item-btn,
.questions__item:hover .item-btn {
    background-color: var(--main-color);
    transform: rotate(180deg);
}

/* ---------- Шаги заказа / контакты ---------- */
.slide-phones a:hover {
    color: var(--main-color);
}
.contacts__info a:hover {
    color: var(--main-color);
}
.map-container iframe {
    border-radius: var(--brad-regular);
    filter: saturate(.92);
    transition: filter .35s ease;
}
.map-container iframe:hover {
    filter: saturate(1.05);
}

/* ---------- Плавное появление блоков (CSS only) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .services__item,
    .work-steps__slide,
    .our-works__slide,
    .questions__item,
    .calc-price__quiz {
        animation: nlFadeUp .7s ease both;
    }
    @keyframes nlFadeUp {
        from {
            opacity: 0;
            transform: translateY(1.4vw);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }
}

/* ---------- Мобильная полировка ---------- */
@media only screen and (max-width: 768px) {
    .md-main-title::after {
        width: 14vw;
        height: 2px;
        margin: 3.5vw auto 0;
    }
    .md-main-title {
        text-align: center;
    }
    .services__item:hover,
    .work-steps__slide:hover,
    .our-works__slide:hover,
    .answers-item:hover {
        transform: none;
        box-shadow: none;
    }
    .nav-wrap .nav .nav-item a::after {
        bottom: -1.5vw;
    }
}