/* ===================================
   SERVICES-DECOR-EXTRA — насыщение страницы услуг
   Дополняет services-decor.css (компас/мишень/чек-лист)
   Терракот только точечно (единичные акценты)
   =================================== */

:root {
    --sd-dot-grid-teal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cg fill='%2325A9B8' opacity='0.3'%3E%3Ccircle cx='4' cy='4' r='2.2'/%3E%3Ccircle cx='18' cy='4' r='2.2'/%3E%3Ccircle cx='32' cy='4' r='2.2'/%3E%3Ccircle cx='4' cy='18' r='2.2'/%3E%3Ccircle cx='18' cy='18' r='2.2'/%3E%3Ccircle cx='32' cy='18' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
    --sd-arc-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M6 60A54 54 0 0 1 60 6' fill='none' stroke='%2352CC9A' stroke-width='3' stroke-linecap='round' opacity='0.45'/%3E%3Ccircle cx='6' cy='60' r='6' fill='%23EE7A5D'/%3E%3C/svg%3E");
    --sd-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='22' viewBox='0 0 80 22'%3E%3Cpath d='M2 11Q10 1 18 11T34 11T50 11T66 11T82 11' fill='none' stroke='%2325A9B8' stroke-width='2.4' stroke-linecap='round' opacity='0.4'/%3E%3C/svg%3E");
    --sd-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cline x1='7' y1='1' x2='7' y2='13' stroke='%2352CC9A' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='1' y1='7' x2='13' y2='7' stroke='%2352CC9A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    --sd-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 1l1.3 5.3L17 8l-5.7 1.7L10 15l-1.3-5.3L3 8l5.7-1.7z' fill='%2325A9B8' opacity='0.45'/%3E%3C/svg%3E");
    --sd-ring-dashed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Ccircle cx='45' cy='45' r='40' fill='none' stroke='%23EE7A5D' stroke-width='2' stroke-dasharray='5 5' opacity='0.35'/%3E%3C/svg%3E");
}

@keyframes sdFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-8px) rotate(6deg); }
}
@keyframes sdPulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50%      { opacity: 0.65; transform: scale(1.15); }
}
@keyframes sdSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ===================================
   PAGE-HERO — доп. точки и волна возле заголовка/фильтров
   =================================== */
body[data-page="services"] .page-hero {
    position: relative;
    overflow: hidden;
}

body[data-page="services"] .page-hero::before {
    content: '';
    position: absolute;
    bottom: 8%;
    left: 4%;
    width: 70px;
    height: 46px;
    background: var(--sd-dot-grid-teal) no-repeat center / contain;
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}

body[data-page="services"] .page-hero-squiggle {
    position: absolute;
    top: 18%;
    left: 46%;
    width: 70px;
    height: 20px;
    background: var(--sd-squiggle) no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

/* Плюсики вокруг фильтров */
body[data-page="services"] .services-new__filters {
    position: relative;
}
body[data-page="services"] .services-new__filters::before {
    content: '';
    position: absolute;
    top: -18px;
    left: -6px;
    width: 14px;
    height: 14px;
    background: var(--sd-plus) no-repeat center / contain;
    animation: sdFloat 5s ease-in-out infinite;
}
body[data-page="services"] .services-new__filters::after {
    content: '';
    position: absolute;
    top: -22px;
    right: 2%;
    width: 18px;
    height: 18px;
    background: var(--sd-spark) no-repeat center / contain;
    animation: sdPulse 3.4s ease-in-out infinite;
}

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

/* ===================================
   СЕКЦИЯ УСЛУГ — доп. арка + точки в противоположных углах
   (дополняет мишень/чек-лист из services-decor.css)
   =================================== */
.services-new--page::before {
    /* уже есть точечный паттерн терракота из services-decor.css,
       дополняем мятной аркой в противоположном углу через отдельный элемент */
}

.services-new--page .services-new__arc-deco {
    position: absolute;
    top: 4%;
    right: 4%;
    width: 90px;
    height: 90px;
    background: var(--sd-arc-dot) no-repeat center / contain;
    opacity: 0.5;
    transform: rotate(90deg);
    pointer-events: none;
    z-index: 0;
}

.services-new--page .services-new__squiggle-deco {
    position: absolute;
    bottom: 3%;
    left: 3%;
    width: 90px;
    height: 24px;
    background: var(--sd-squiggle) no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 900px) {
    .services-new--page .services-new__arc-deco,
    .services-new--page .services-new__squiggle-deco { display: none; }
}

/* ===================================
   КАРТОЧКИ УСЛУГ (десктопная статичная сетка) — искра при ховере
   =================================== */
.service-detail-card--static {
    position: relative;
}
.service-detail-card--static:hover .service-detail-card__spark {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}
.service-detail-card__spark {
    position: absolute;
    bottom: 14px;
    left: 14px;
    width: 18px;
    height: 18px;
    background: var(--sd-spark) no-repeat center / contain;
    opacity: 0;
    transform: scale(0.6) rotate(-20deg);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 3;
    pointer-events: none;
}

/* Аккордеон (мобильный) — плюсики рядом с заголовком при активном состоянии */
.accordion-item.active .accordion-item__title-group {
    position: relative;
}
.accordion-item.active .accordion-item__title-group::after {
    content: '';
    position: absolute;
    top: -10px;
    right: -6px;
    width: 14px;
    height: 14px;
    background: var(--sd-plus) no-repeat center / contain;
    animation: sdFloat 4s ease-in-out infinite;
}

/* ===================================
   БЛОК "ОЖИДАЕМЫЕ РЕЗУЛЬТАТЫ" — доп. пунктирное кольцо у иконки
   =================================== */
.services-new--page .services-new__results-icon-header {
    position: relative;
}
.services-new--page .services-new__results-header::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    width: 46px;
    height: 46px;
    background: var(--sd-ring-dashed) no-repeat center / contain;
    animation: sdSpin 26s linear infinite;
    pointer-events: none;
    z-index: 0;
}
.services-new--page .services-new__results-icon-header,
.services-new--page .services-new__results-title {
    position: relative;
    z-index: 1;
}

/* ===================================
   CTA-СЕКЦИЯ — доп. звёзды и точки (дополняет компас/мишень)
   =================================== */
.services-cta__extra-dots {
    position: absolute;
    top: 14%;
    left: 6%;
    width: 60px;
    height: 40px;
    background: var(--sd-dot-grid-teal) no-repeat center / contain;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.services-cta__extra-spark {
    position: absolute;
    bottom: 16%;
    right: 14%;
    width: 22px;
    height: 22px;
    background: var(--sd-spark) no-repeat center / contain;
    animation: sdPulse 3.6s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 768px) {
    .services-cta__extra-dots,
    .services-cta__extra-spark { display: none; }
}

/* ===================================
   ACCESSIBILITY / PRINT
   =================================== */
@media (prefers-reduced-motion: reduce) {
    body[data-page="services"] .services-new__filters::before,
    body[data-page="services"] .services-new__filters::after,
    .accordion-item.active .accordion-item__title-group::after,
    .services-new--page .services-new__results-header::before,
    .services-cta__extra-spark {
        animation: none;
    }
}

@media print {
    body[data-page="services"] .page-hero::before,
    body[data-page="services"] .page-hero-squiggle,
    body[data-page="services"] .services-new__filters::before,
    body[data-page="services"] .services-new__filters::after,
    .services-new--page .services-new__arc-deco,
    .services-new--page .services-new__squiggle-deco,
    .service-detail-card__spark,
    .accordion-item.active .accordion-item__title-group::after,
    .services-new--page .services-new__results-header::before,
    .services-cta__extra-dots,
    .services-cta__extra-spark {
        display: none !important;
    }
}