/* ===================================
   SERVICES PAGE — ДЕКОР
   Тема: компас (навигация к нужной услуге) / мишень (точное попадание) / чек-лист (результат).
   Тот же язык (stroke-only, 3 фирменных цвета), собственный набор мотивов.

   ВАЖНО ПРО СКОУПИНГ:
   - .page-hero и .services-new__filter-btn — общие классы, используются
     и на index.html (главная), поэтому декор для них скопирован через
     body[data-page="services"], чтобы не задеть другие страницы.
   - .services-new--page, .service-detail-card--static, .services-cta —
     классы уникальны для этой страницы (не встречаются на главной),
     скоуп не требуется.
   - .services-new__results используется и на главной внутри .services-new
     (без --page), поэтому декор для него навешан через потомок
     .services-new--page .services-new__results, а не напрямую.
   =================================== */

:root {
    --doodle-compass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='16' fill='none' stroke='%23EE7A5D' stroke-width='2'/%3E%3Cpath d='M26 14L21 21L14 26L19 19Z' fill='%23EE7A5D' fill-opacity='0.85'/%3E%3Ccircle cx='20' cy='20' r='1.6' fill='%23EE7A5D'/%3E%3C/svg%3E");
    --doodle-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='15' fill='none' stroke='%2325A9B8' stroke-width='1.8'/%3E%3Ccircle cx='18' cy='18' r='9' fill='none' stroke='%2325A9B8' stroke-width='1.8'/%3E%3Ccircle cx='18' cy='18' r='3' fill='%2325A9B8'/%3E%3C/svg%3E");
    --doodle-checklist: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='38' viewBox='0 0 30 38'%3E%3Crect x='3' y='2' width='24' height='34' rx='4' fill='none' stroke='%2352CC9A' stroke-width='1.8'/%3E%3Cpath d='M9 12L12 15L20 8' stroke='%2352CC9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M9 22L12 25L20 18' stroke='%2352CC9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cline x1='9' y1='30' x2='21' y2='30' stroke='%2352CC9A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    --doodle-underline-services: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='14' viewBox='0 0 90 14'%3E%3Cpath d='M2 9C12 2 18 12 28 6C38 0 44 12 54 6C64 0 72 12 82 6' fill='none' stroke='%2325A9B8' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    --doodle-dots-services: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16' viewBox='0 0 40 16'%3E%3Ccircle cx='4' cy='8' r='2' fill='rgba(37,169,184,0.25)'/%3E%3Ccircle cx='16' cy='6' r='2' fill='rgba(37,169,184,0.25)'/%3E%3Ccircle cx='28' cy='9' r='2' fill='rgba(37,169,184,0.25)'/%3E%3Ccircle cx='36' cy='5' r='2' fill='rgba(37,169,184,0.25)'/%3E%3C/svg%3E");
}

@keyframes servicesDoodleFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-8px) rotate(8deg); }
}

@keyframes servicesDoodleFloatReverse {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(6px) rotate(-6deg); }
}

/* ===================================
   1. HERO — компас + рукописное подчёркивание
   .page-hero общий класс (используется и на index.html), скоуп обязателен
   =================================== */
body[data-page="services"] .page-hero__title {
    position: relative;
    display: inline-block;
}

body[data-page="services"] .page-hero__title::after {
    content: '';
    display: block;
    width: 100px;
    height: 13px;
    margin-top: 6px;
    background: var(--doodle-underline-services) no-repeat left center / contain;
    opacity: .8;
}

body[data-page="services"] .page-hero::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 12%;
    right: 8%;
    width: 40px;
    height: 40px;
    background: var(--doodle-compass) no-repeat center / contain;
    opacity: .5;
    animation: servicesDoodleFloat 8s ease-in-out infinite;
}

@media (max-width: 768px) {
    body[data-page="services"] .page-hero::after { display: none; }
}

/* ===================================
   2. ФИЛЬТРЫ — "стикерный" наклон
   .services-new__filter-btn общий класс (используется и на главной
   внутри .services-new), поэтому скоуп через data-page обязателен
   =================================== */
body[data-page="services"] .services-new__filter-btn:nth-child(odd)  { transform: rotate(-1deg); }
body[data-page="services"] .services-new__filter-btn:nth-child(even) { transform: rotate(1deg); }

body[data-page="services"] .services-new__filter-btn:hover,
body[data-page="services"] .services-new__filter-btn.active {
    transform: translateY(-2px) rotate(0deg);
}

/* ===================================
   3. СЕКЦИЯ УСЛУГ — фон + мишень/чек-лист по углам
   .services-new--page уникален для этой страницы, скоуп не нужен
   =================================== */
.services-new--page {
    position: relative;
    overflow: hidden;
}

.services-new--page::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(238, 122, 93, .10) 1.4px, transparent 1.6px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 55% 40% at 50% 5%, black 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 55% 40% at 50% 5%, black 0%, transparent 75%);
    opacity: .5;
}

.services-new--page > .container {
    position: relative;
    z-index: 1;
}

/* Мишень и чек-лист — по углам всей секции */
.services-new--page::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--doodle-target), var(--doodle-checklist);
    background-repeat: no-repeat;
    background-position: 3% 8%, 96% 90%;
    background-size: 34px 34px, 26px 32px;
    opacity: .3;
}

@media (max-width: 768px) {
    .services-new--page::after { opacity: .16; }
}

@media (max-width: 480px) {
    .services-new--page::after { display: none; }
}

/* ===================================
   4. ВОДЯНОЙ ЗНАК НА КАРТОЧКЕ УСЛУГИ (статичная сетка)
   .service-detail-card--static уникален для этой страницы
   =================================== */
.service-detail-card--static .service-detail-card__content {
    background-image: var(--doodle-dots-services);
    background-repeat: no-repeat;
    background-position: 94% 6%;
    background-size: 36px 14px;
}

/* Лёгкий "компас" в углу карточки при ховере — намёк на "точный подбор" */
.service-detail-card--static {
    position: relative;
}

.service-detail-card--static::after {
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 22px;
    height: 22px;
    background: var(--doodle-compass) no-repeat center / contain;
    opacity: 0;
    transform: scale(0.7) rotate(-15deg);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
    pointer-events: none;
}

.service-detail-card--static:hover::after {
    opacity: .8;
    transform: scale(1) rotate(0deg);
}

/* ===================================
   5. БЛОК "ОЖИДАЕМЫЕ РЕЗУЛЬТАТЫ" — доп. акцент чек-листом
   .services-new__results общий класс (используется и на главной),
   поэтому декор навешан через потомка уникального .services-new--page
   =================================== */
.services-new--page .services-new__results {
    position: relative;
    overflow: hidden;
}

.services-new--page .services-new__results::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 16px;
    width: 30px;
    height: 38px;
    background: var(--doodle-checklist) no-repeat center / contain;
    opacity: .35;
    pointer-events: none;
    z-index: 0;
}

.services-new--page .services-new__results-header,
.services-new--page .services-new__results-items {
    position: relative;
    z-index: 1;
}

/* ===================================
   6. CTA — компас/мишень, уникальный класс, скоуп не нужен
   =================================== */
.services-cta::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 14%;
    right: 10%;
    width: 36px;
    height: 36px;
    background: var(--doodle-compass) no-repeat center / contain;
    opacity: .4;
    animation: servicesDoodleFloatReverse 9s ease-in-out infinite;
}

.services-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--doodle-target), var(--doodle-checklist);
    background-repeat: no-repeat;
    background-position: 8% 70%, 90% 20%;
    background-size: 30px 30px, 24px 30px;
    opacity: .28;
}

.services-cta > .container {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .services-cta::after,
    .services-cta::before {
        opacity: .18;
    }
}

/* ===================================
   ACCESSIBILITY / PRINT
   =================================== */
@media (prefers-reduced-motion: reduce) {
    body[data-page="services"] .page-hero::after,
    .services-cta::after {
        animation: none;
    }
}

@media print {
    body[data-page="services"] .page-hero::after,
    body[data-page="services"] .page-hero__title::after,
    .services-new--page::before,
    .services-new--page::after,
    .service-detail-card--static::after,
    .services-new--page .services-new__results::after,
    .services-cta::before,
    .services-cta::after {
        display: none !important;
    }
}