/* ===================================
   NEUROPSYCHOLOGY-DECOR.CSS
   Декоративные паттерны для «Нейропсихолога»
   Тема: игра, пазл, мозаика функций, лёгкость (mint-доминанта)
   =================================== */

:root {
    --np-doodle-puzzle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M10 10h16c0-4 4-6 7-4s3 6-1 8v12h16v16c4 0 6 4 4 7s-6 3-8-1H32v12H10V44c-4 0-6-4-4-7s6-3 8 1h4V26h-8Z' fill='none' stroke='%2352CC9A' stroke-width='1.6' stroke-opacity='0.28'/%3E%3C/svg%3E");
    --np-doodle-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M10 2l1.8 5.6L18 9l-5.6 1.8L10 16l-1.8-5.2L2 9l6.2-1.4Z' fill='%2352CC9A' fill-opacity='0.3'/%3E%3Ccircle cx='30' cy='26' r='3' fill='%2325A9B8' fill-opacity='0.3'/%3E%3C/svg%3E");
    --np-doodle-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='18' viewBox='0 0 44 18'%3E%3Ccircle cx='4' cy='9' r='2.4' fill='%2325A9B8' fill-opacity='0.32'/%3E%3Ccircle cx='18' cy='6' r='1.8' fill='%2325A9B8' fill-opacity='0.32'/%3E%3Ccircle cx='30' cy='11' r='2.2' fill='%2325A9B8' fill-opacity='0.32'/%3E%3Ccircle cx='40' cy='5' r='1.6' fill='%2325A9B8' fill-opacity='0.32'/%3E%3C/svg%3E");
    --np-doodle-brainpuzzle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='60' viewBox='0 0 70 60'%3E%3Cpath d='M26 6c-9 0-16 7-16 15 0 3 1 6 3 8-3 2-5 6-5 10 0 8 7 14 15 14h1c1 5 6 8 11 8s10-3 11-8h1c8 0 15-6 15-14 0-4-2-8-5-10 2-2 3-5 3-8 0-8-7-15-16-15-3 0-7 1-9 4-2-3-6-4-9-4z' fill='none' stroke='%2352CC9A' stroke-width='1.6' stroke-opacity='0.22'/%3E%3Cline x1='35' y1='6' x2='35' y2='54' stroke='%2352CC9A' stroke-width='1.2' stroke-opacity='0.2' stroke-dasharray='4 3'/%3E%3C/svg%3E");
    --np-doodle-underline: 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='%2352CC9A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    --np-doodle-wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40L0 24C80 8 160 36 240 24C320 8 400 36 480 24C560 8 640 36 720 24C800 8 880 36 960 24C1040 8 1120 36 1200 24L1200 40Z' fill='white'/%3E%3C/svg%3E");

    --np-doodle-check-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='30' viewBox='0 0 36 30'%3E%3Cpath d='M4 16L14 25L32 4' fill='none' stroke='rgba(37,169,184,0.3)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --np-doodle-question-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='40' viewBox='0 0 26 40'%3E%3Cpath d='M6 12C6 5 12 2 17 5C22 8 21 15 16 18C13 20 13 22 13 25' stroke='rgba(82,204,154,0.3)' stroke-width='2.6' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='13' cy='33' r='2.4' fill='rgba(82,204,154,0.3)'/%3E%3C/svg%3E");
    --np-doodle-exclaim-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='40' viewBox='0 0 24 40'%3E%3Cpath d='M12 3C10 14 11 20 12 26' stroke='rgba(245,158,11,0.35)' stroke-width='3' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='12' cy='34' r='2.4' fill='rgba(245,158,11,0.35)'/%3E%3C/svg%3E");
}

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

@keyframes npDoodleFloatReverse {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(9px) rotate(-7deg); }
}

/* ===================================
   HERO
   =================================== */
.np-hero {
    position: relative;
    isolation: isolate;
}

.np-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--np-doodle-brainpuzzle), var(--np-doodle-stars), var(--np-doodle-dots);
    background-repeat: no-repeat;
    background-position: 92% 68%, 6% 14%, 10% 82%;
    background-size: 110px 96px, 40px 40px, 48px 20px;
    opacity: .45;
}

.np-hero .container {
    position: relative;
    z-index: 1;
}

.service-tag:nth-child(odd)  { transform: rotate(-1.4deg); }
.service-tag:nth-child(even) { transform: rotate(1.3deg); }
.service-tag {
    display: inline-flex;
    transition: transform var(--transition-base, .3s), box-shadow var(--transition-base, .3s);
}
.service-tag:hover {
    transform: rotate(0deg) translateY(-2px);
}

.service-hero__image {
    outline: 2px dashed rgba(82, 204, 154, .35);
    outline-offset: 8px;
}

/* ===================================
   ВОЛНИСТЫЕ РАЗДЕЛИТЕЛИ
   =================================== */
.hero__divider {
    position: relative;
    overflow: hidden;
}

.hero__divider::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 200%;
    background: currentColor;
    -webkit-mask-image: var(--np-doodle-wave-mask);
    mask-image: var(--np-doodle-wave-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    opacity: .06;
    pointer-events: none;
}

/* ===================================
   ВВОДНАЯ СЕКЦИЯ
   =================================== */
.np-intro {
    position: relative;
    isolation: isolate;
}

.np-intro::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(82, 204, 154, .12) 1.4px, transparent 1.6px);
    background-size: 26px 26px;
    opacity: .6;
}

.np-intro > .container {
    position: relative;
    z-index: 1;
}

.section-title::after {
    content: '';
    display: block;
    width: 90px;
    height: 12px;
    margin-top: 10px;
    background: var(--np-doodle-underline) no-repeat left center / contain;
}

.principle-box {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.principle-box::after {
    content: '';
    position: absolute;
    right: 4%;
    bottom: 6%;
    width: 46px;
    height: 46px;
    background: var(--np-doodle-puzzle) no-repeat center / contain;
    opacity: .28;
    pointer-events: none;
    z-index: 0;
}

.feature-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.feature-card::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    background: var(--np-doodle-stars) no-repeat center / contain;
    opacity: .35;
    pointer-events: none;
    transition: transform .4s cubic-bezier(.16,1,.3,1);
}

.feature-card:hover::after {
    transform: rotate(15deg) scale(1.2);
}

/* ===================================
   ПРОБЛЕМЫ
   =================================== */
.np-problems {
    position: relative;
    isolation: isolate;
}

.np-problems::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 6%;
    left: 4%;
    width: 44px;
    height: 44px;
    background: var(--np-doodle-puzzle) no-repeat center / contain;
    opacity: .28;
    animation: npDoodleFloat 9s ease-in-out infinite;
}

.np-problems > .container {
    position: relative;
    z-index: 1;
}

.problem-group {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.problem-group::after {
    content: '';
    position: absolute;
    right: 6%;
    bottom: 6%;
    width: 26px;
    height: 26px;
    background: var(--np-doodle-check-w) no-repeat center / contain;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
    z-index: 0;
}

.problem-group:hover::after {
    opacity: .9;
    transform: scale(1);
}

/* ===================================
   ЭТАПЫ РАБОТЫ
   =================================== */
.np-process {
    position: relative;
    isolation: isolate;
}

.np-process::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(82, 204, 154, .08) 31px 32px);
    opacity: .5;
}

.np-steps {
    position: relative;
    z-index: 1;
}

.np-step__marker {
    position: relative;
}

.np-step__marker::after {
    content: '';
    position: absolute;
    inset: -7px;
    border: 2px dashed rgba(82, 204, 154, .32);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
}

.np-step:nth-child(2n) .np-step__marker::after { transform: rotate(6deg); }
.np-step:nth-child(2n+1) .np-step__marker::after { transform: rotate(-5deg); }

/* ===================================
   ЧТО ДАЮТ ЗАНЯТИЯ
   =================================== */
.np-benefits {
    position: relative;
    isolation: isolate;
}

.np-benefits::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--np-doodle-stars), var(--np-doodle-dots);
    background-repeat: no-repeat;
    background-position: 6% 15%, 92% 78%;
    background-size: 36px 36px, 44px 18px;
    opacity: .4;
}

.np-benefits > .container {
    position: relative;
    z-index: 1;
}

.np-benefit-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.np-benefit-card--child::after {
    content: '';
    position: absolute;
    right: -8px;
    bottom: -8px;
    width: 56px;
    height: 56px;
    background: var(--np-doodle-stars) no-repeat center / contain;
    opacity: .1;
    pointer-events: none;
    z-index: 0;
    transition: transform .5s cubic-bezier(.16,1,.3,1);
}

.np-benefit-card--child:hover::after {
    transform: rotate(20deg) scale(1.2);
}

.np-benefit-card--parent::after {
    content: '';
    position: absolute;
    right: -8px;
    bottom: -8px;
    width: 56px;
    height: 56px;
    background: var(--np-doodle-puzzle) no-repeat center / contain;
    opacity: .1;
    pointer-events: none;
    z-index: 0;
    transition: transform .5s cubic-bezier(.16,1,.3,1);
}

.np-benefit-card--parent:hover::after {
    transform: rotate(-15deg) scale(1.15);
}

.np-note {
    position: relative;
    overflow: hidden;
}

.np-note::after {
    content: '';
    position: absolute;
    right: 4%;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 34px;
    background: var(--np-doodle-exclaim-w) no-repeat center / contain;
    pointer-events: none;
}

/* ===================================
   КОГДА ОБРАТИТЬСЯ
   =================================== */
.np-urgent-section {
    position: relative;
    isolation: isolate;
}

.np-urgent-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(37, 169, 184, .08) 1.4px, transparent 1.6px);
    background-size: 30px 30px;
    opacity: .5;
}

.np-urgent-section > .container {
    position: relative;
    z-index: 1;
}

.np-urgent-item {
    position: relative;
}

/* ===================================
   СПЕЦИАЛИСТ
   =================================== */
.np-specialist {
    position: relative;
    isolation: isolate;
}

.np-specialist::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--np-doodle-dots), var(--np-doodle-stars);
    background-repeat: no-repeat;
    background-position: 8% 20%, 88% 78%;
    background-size: 50px 20px, 34px 34px;
    opacity: .4;
}

.np-specialist > .container {
    position: relative;
    z-index: 1;
}

.np-specialist__card {
    position: relative;
    overflow: hidden;
}

.np-specialist__card::after {
    content: '';
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 90px;
    height: 76px;
    background: var(--np-doodle-brainpuzzle) no-repeat center / contain;
    opacity: .12;
    pointer-events: none;
    z-index: 0;
}

/* ===================================
   FAQ
   =================================== */
.np-faq {
    position: relative;
    isolation: isolate;
}

.np-faq::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--np-doodle-question-w), var(--np-doodle-question-w), var(--np-doodle-question-w);
    background-repeat: no-repeat;
    background-position: 6% 12%, 92% 42%, 10% 86%;
    background-size: 26px 40px, 22px 34px, 24px 36px;
    opacity: .55;
}

.np-faq > .container {
    position: relative;
    z-index: 1;
}

.faq-item {
    position: relative;
    transition: transform .3s ease;
}

.faq-item[open] {
    transform: translateX(2px);
}

/* ===================================
   CTA
   =================================== */
.np-cta {
    position: relative;
    isolation: isolate;
}

.np-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--np-doodle-puzzle), var(--np-doodle-stars), var(--np-doodle-dots);
    background-repeat: no-repeat;
    background-position: 6% 22%, 40% 85%, 88% 30%;
    background-size: 60px 60px, 36px 36px, 44px 18px;
    opacity: .4;
}

.np-cta::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 14%;
    left: 8%;
    width: 44px;
    height: 44px;
    background: var(--np-doodle-brainpuzzle) no-repeat center / contain;
    opacity: .25;
    animation: npDoodleFloatReverse 9s ease-in-out infinite;
}

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

/* ===================================
   МОБИЛЬНАЯ АДАПТАЦИЯ
   =================================== */
@media (max-width: 768px) {
    .np-hero::before,
    .np-cta::before,
    .np-faq::before,
    .np-specialist::before {
        opacity: .22;
    }

    .np-cta::after,
    .np-problems::after {
        width: 30px;
        height: 30px;
    }

    .principle-box::after,
    .np-specialist__card::after {
        opacity: .08;
        transform: scale(.8);
    }
}

/* ===================================
   ACCESSIBILITY / PRINT
   =================================== */
@media (prefers-reduced-motion: reduce) {
    .np-cta::after,
    .np-problems::after {
        animation: none;
    }
}

@media print {
    .np-hero::before,
    .np-cta::before,
    .np-cta::after,
    .np-intro::before,
    .np-problems::after,
    .np-process::before,
    .np-benefits::before,
    .np-urgent-section::before,
    .np-specialist::before,
    .np-specialist__card::after,
    .np-faq::before,
    .principle-box::after,
    .feature-card::after,
    .problem-group::after,
    .np-benefit-card--child::after,
    .np-benefit-card--parent::after,
    .np-note::after,
    .hero__divider::after {
        display: none !important;
    }
}