/* =========================================================
   ANASTASIS — SEO PAGES
   Editorial / natural / warm visual system

  ВАЖНО:
Шапка, меню, соцсети и burger
управляются существующим CSS сайта.
SEO-контент и специальный footer SEO-страниц
управляются этим файлом.
========================================================= */


/* =========================================================
   SEO VARIABLES
========================================================= */

.seo-page {
    --forest-950: #20291f;
    --forest-900: #273226;
    --forest-800: #34422f;
    --forest-700: #46563d;
    --forest-600: #5d6c50;

    --gold-700: #957432;
    --gold-600: #b49143;
    --gold-400: #d2b66d;
    --gold-200: #ead9aa;

    --paper: #f8f4e9;
    --paper-warm: #f3edda;
    --paper-light: #fcfaf4;
    --white: #fffdf8;

    --ink: #30362e;
    --ink-soft: #596056;
    --muted: #7b8177;

    --line: rgba(52, 66, 47, .13);
    --line-gold: rgba(180, 145, 67, .25);

    --shadow-soft:
        0 18px 55px rgba(36, 45, 32, .08);

    --shadow-button:
        0 12px 25px rgba(52, 66, 47, .18);

    --seo-container: 1180px;
}


/* =========================================================
   SEO PAGE BASE
========================================================= */

body.seo-page {
    background:
        radial-gradient(
            circle at 4% 12%,
            rgba(180, 145, 67, .045),
            transparent 280px
        ),
        radial-gradient(
            circle at 96% 48%,
            rgba(82, 98, 70, .045),
            transparent 320px
        ),
        #f8f4e9;

    color: var(--ink);
}


/* =========================================================
   SEO CONTAINER
   НЕ ТРОГАЕТ .container
========================================================= */

.seo-page .seo-container {
    width: min(
        var(--seo-container),
        calc(100% - 56px)
    );

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   BREADCRUMBS
========================================================= */

.seo-page .breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    padding: 23px 0 5px;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.5;
}

.seo-page .breadcrumbs a {
    color: var(--forest-600);

    text-decoration: none;

    border-bottom: 1px solid transparent;

    transition:
        color .22s ease,
        border-color .22s ease;
}

.seo-page .breadcrumbs a:hover {
    color: var(--gold-700);

    border-color:
        var(--gold-600);
}

.seo-page .breadcrumbs span[aria-hidden="true"] {
    color: var(--gold-600);
}


/* =========================================================
   INTRO
========================================================= */

.seo-page .seo-intro {
    position: relative;

    overflow: hidden;

    padding:
        74px 0
        88px;
}

.seo-page .seo-intro::before {
    content: "";

    position: absolute;

    width: 560px;
    height: 560px;

    top: -340px;
    right: -150px;

    border:
        1px solid
        rgba(180, 145, 67, .13);

    border-radius: 50%;

    pointer-events: none;
}

.seo-page .seo-intro::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    top: -95px;
    right: 60px;

    border:
        1px solid
        rgba(82, 98, 70, .09);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   H1
========================================================= */

.seo-page .seo-intro h1 {
    position: relative;

    z-index: 2;

    max-width: 950px;

    margin: 0;

    color: var(--forest-950);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(
            46px,
            6vw,
            76px
        );

    font-weight: 400;

    line-height: 1.04;

    letter-spacing: -.027em;
}

.seo-page .seo-intro h1::after {
    content: "";

    display: block;

    width: 88px;
    height: 2px;

    margin-top: 29px;

    background:
        linear-gradient(
            90deg,
            var(--gold-600),
            var(--gold-400)
        );
}


/* =========================================================
   INTRO TEXT
========================================================= */

.seo-page .seo-intro p {
    position: relative;

    z-index: 2;

    max-width: 880px;

    margin:
        25px 0 0;

    color: var(--ink);

    font-size: 18px;

    line-height: 1.85;
}

.seo-page .seo-intro p + p {
    margin-top: 14px;
}

.seo-page .seo-intro .seo-lead {
    max-width: 900px;

    color: #3e473c;

    font-size: 21px;

    line-height: 1.8;
}


/* =========================================================
   EDITORIAL SECTIONS
========================================================= */

.seo-page .seo-section {
    position: relative;

    padding:
        82px 0;

    border-top:
        1px solid
        var(--line);
}


/* alternating sections */

.seo-page .seo-section:nth-of-type(even) {
    background:
        linear-gradient(
            90deg,
            rgba(243, 237, 218, .70),
            rgba(248, 244, 233, .15)
        );
}


/* =========================================================
   DECORATIVE SIDE MARK
========================================================= */

.seo-page .seo-section::before {
    content: "";

    position: absolute;

    left:
        max(
            15px,
            calc(
                (100vw - var(--seo-container)) / 2 - 30px
            )
        );

    top: 87px;

    width: 3px;
    height: 53px;

    background:
        linear-gradient(
            180deg,
            var(--gold-600),
            rgba(180, 145, 67, .04)
        );

    pointer-events: none;
}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.seo-page .seo-section h2,
.seo-page .seo-related h2,
.seo-page .seo-conclusion h2 {

    max-width: 930px;

    margin:
        0 0 30px;

    color:
        var(--forest-950);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(
            32px,
            4.2vw,
            46px
        );

    font-weight: 400;

    line-height: 1.14;

    letter-spacing: -.015em;
}

.seo-page .seo-section h2::after,
.seo-page .seo-related h2::after,
.seo-page .seo-conclusion h2::after {

    content: "";

    display: block;

    width: 58px;
    height: 2px;

    margin-top: 18px;

    background:
        var(--gold-600);
}


/* =========================================================
   SUBHEADINGS
========================================================= */

.seo-page .seo-section h3 {

    max-width: 860px;

    margin:
        37px 0 11px;

    color:
        var(--forest-800);

    font-size: 20px;

    font-weight: 600;

    line-height: 1.42;
}

.seo-page .seo-section h3:first-of-type {
    margin-top: 0;
}


/* =========================================================
   BODY TEXT
========================================================= */

.seo-page .seo-section p,
.seo-page .seo-conclusion p {

    max-width: 900px;

    margin:
        0 0 20px;

    color:
        var(--ink);

    font-size: 17px;

    line-height: 1.9;
}


/* =========================================================
   STRONG
========================================================= */

.seo-page strong {
    color:
        var(--forest-950);

    font-weight: 600;
}


/* =========================================================
   INTERNAL LINKS
========================================================= */

.seo-page .seo-section p a,
.seo-page .seo-conclusion p a {

    color:
        var(--forest-800);

    font-weight: 600;

    text-decoration: none;

    border-bottom:
        1px solid
        rgba(180, 145, 67, .48);

    transition:
        color .22s ease,
        border-color .22s ease;
}

.seo-page .seo-section p a:hover,
.seo-page .seo-conclusion p a:hover {

    color:
        var(--gold-700);

    border-color:
        var(--gold-700);
}


/* =========================================================
   EDITORIAL FIRST LETTER
========================================================= */

.seo-page .seo-intro
+ .seo-section
p:first-of-type::first-letter {

    float: left;

    margin:
        7px 14px 0 0;

    color:
        var(--gold-600);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 63px;

    line-height: .77;
}


/* =========================================================
   DARK FEATURE SECTION
========================================================= */

.seo-page .seo-section-accent {

    position: relative;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 88% 18%,
            rgba(210, 182, 109, .12),
            transparent 300px
        ),

        radial-gradient(
            circle at 8% 95%,
            rgba(101, 123, 82, .10),
            transparent 380px
        ),

        linear-gradient(
            135deg,
            #34422f 0%,
            #273226 100%
        );

    border-top: 0;
}


.seo-page .seo-section-accent::after {

    content: "";

    position: absolute;

    width: 460px;
    height: 460px;

    right: -230px;
    bottom: -300px;

    border:
        1px solid
        rgba(210, 182, 109, .10);

    border-radius: 50%;

    pointer-events: none;
}


.seo-page .seo-section-accent::before {

    background:
        linear-gradient(
            180deg,
            var(--gold-400),
            rgba(210, 182, 109, .04)
        );
}


.seo-page .seo-section-accent h2 {
    color: #fffaf0;
}

.seo-page .seo-section-accent h2::after {
    background:
        var(--gold-400);
}

.seo-page .seo-section-accent h3 {
    color: #efe4c5;
}

.seo-page .seo-section-accent p {
    color:
        rgba(255, 251, 242, .90);
}

.seo-page .seo-section-accent strong {
    color: #fffaf0;
}

.seo-page .seo-section-accent p a {
    color: #e0c87f;

    border-color:
        rgba(224, 200, 127, .48);
}


/* =========================================================
   CONCLUSION
========================================================= */

.seo-page .seo-conclusion {

    position: relative;

    overflow: hidden;

    padding:
        86px 0;

    background:

        radial-gradient(
            circle at 89% 20%,
            rgba(180, 145, 67, .12),
            transparent 310px
        ),

        var(--paper-warm);

    border-top:
        1px solid
        var(--line-gold);

    border-bottom:
        1px solid
        var(--line-gold);
}


.seo-page .seo-conclusion::after {

    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    right: -190px;
    bottom: -180px;

    border:
        1px solid
        rgba(180, 145, 67, .10);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   CTA BUTTON
========================================================= */

.seo-page .seo-button {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 49px;

    padding:
        12px 23px;

    margin-top: 8px;

    border:
        1px solid
        rgba(208, 182, 109, .75);

    border-radius: 4px;

    background:

        linear-gradient(
            105deg,
            #34422f 0%,
            #526246 34%,
            #87733f 68%,
            #b49143 100%
        );

    background-size: 220% 100%;

    background-position: 0 50%;

    color: #fffdf6;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    box-shadow:
        var(--shadow-button);

    transition:
        background-position .45s ease,
        transform .24s ease,
        box-shadow .24s ease;
}


.seo-page .seo-button::after {

    content: "→";

    margin-left: 12px;

    font-size: 18px;

    line-height: 1;

    transition:
        transform .24s ease;
}


.seo-page .seo-button:hover {

    background-position:
        100% 50%;

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 30px
        rgba(52, 66, 47, .23);
}


.seo-page .seo-button:hover::after {

    transform:
        translateX(4px);
}


/* =========================================================
   RELATED MATERIALS
========================================================= */

.seo-page .seo-related {

    padding:
        70px 0
        86px;

    background:
        var(--paper-light);
}


.seo-page .seo-related-links {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


.seo-page .seo-related-links a {

    position: relative;

    display: inline-flex;

    align-items: center;

    min-height: 42px;

    padding:
        9px 15px;

    border:
        1px solid
        rgba(52, 66, 47, .16);

    border-radius: 3px;

    background:
        rgba(247, 241, 222, .45);

    color:
        var(--forest-800);

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;

    transition:
        background .22s ease,
        border-color .22s ease,
        color .22s ease,
        transform .22s ease;
}


.seo-page .seo-related-links a::before {

    content: "↗";

    margin-right: 9px;

    color:
        var(--gold-600);

    transition:
        transform .22s ease;
}


.seo-page .seo-related-links a:hover {

    background:
        var(--forest-800);

    border-color:
        var(--forest-800);

    color:
        #fffaf0;

    transform:
        translateY(-2px);
}


.seo-page .seo-related-links a:hover::before {

    color:
        var(--gold-400);

    transform:
        translate(
            1px,
            -1px
        );
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .seo-page .seo-container {

        width:
            min(
                760px,
                calc(100% - 38px)
            );
    }


    .seo-page .breadcrumbs {

        padding-top:
            18px;
    }


    .seo-page .seo-intro {

        padding:
            50px 0
            62px;
    }


    .seo-page .seo-intro h1 {

        font-size:
            clamp(
                40px,
                8vw,
                57px
            );
    }


    .seo-page .seo-intro .seo-lead {

        font-size: 19px;
    }


    .seo-page .seo-section {

        padding:
            62px 0;
    }


    .seo-page .seo-section::before {

        display: none;
    }


    .seo-page .seo-conclusion {

        padding:
            66px 0;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .seo-page .seo-container {

        width:
            calc(100% - 28px);
    }


    .seo-page .breadcrumbs {

        gap: 6px;

        padding:
            16px 0
            3px;

        font-size: 11px;
    }


    .seo-page .seo-intro {

        padding:
            38px 0
            49px;
    }


    .seo-page .seo-intro h1 {

        font-size: 36px;

        line-height: 1.08;
    }


    .seo-page .seo-intro h1::after {

        width: 63px;

        margin-top: 20px;
    }


    .seo-page .seo-intro .seo-lead {

        font-size: 17px;

        line-height: 1.72;
    }


    .seo-page .seo-intro p {

        font-size: 15px;

        line-height: 1.74;
    }


    .seo-page .seo-intro::before {

        width: 270px;
        height: 270px;

        top: -170px;
        right: -150px;
    }


    .seo-page .seo-intro::after {

        display: none;
    }


    .seo-page .seo-section {

        padding:
            48px 0;
    }


    .seo-page .seo-section h2,
    .seo-page .seo-related h2,
    .seo-page .seo-conclusion h2 {

        margin-bottom:
            22px;

        font-size: 30px;

        line-height: 1.18;
    }


    .seo-page .seo-section h2::after,
    .seo-page .seo-related h2::after,
    .seo-page .seo-conclusion h2::after {

        width: 46px;

        margin-top: 15px;
    }


    .seo-page .seo-section h3 {

        margin-top: 29px;

        font-size: 18px;
    }


    .seo-page .seo-section p,
    .seo-page .seo-conclusion p {

        font-size: 15px;

        line-height: 1.78;
    }


    .seo-page .seo-intro
    + .seo-section
    p:first-of-type::first-letter {

        font-size: 49px;
    }


    .seo-page .seo-button {

        width: 100%;

        max-width: 320px;
    }


    .seo-page .seo-related {

        padding:
            49px 0
            58px;
    }


    .seo-page .seo-related-links {

        display: grid;

        gap: 8px;
    }


    .seo-page .seo-related-links a {

        width: 100%;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .seo-page .seo-intro h1 {
        font-size: 32px;
    }


    .seo-page .seo-section h2,
    .seo-page .seo-related h2,
    .seo-page .seo-conclusion h2 {

        font-size: 27px;
    }

}
/* =========================================================
   ПУТЬ ВОССТАНОВЛЕНИЯ — ЭТАПЫ
========================================================= */

.seo-page .recovery-section .seo-container > h3 {
    position: relative;

    margin: 34px 0 0;

    padding:
        23px 30px 8px 92px;

    max-width: 920px;

    color: var(--forest-800);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 24px;
    font-weight: 500;

    line-height: 1.3;

    border-top:
        1px solid
        rgba(52, 66, 47, .10);

    counter-increment: recovery-step;
}

.seo-page .recovery-section .seo-container {
    counter-reset: recovery-step;
}

.seo-page .recovery-section .seo-container > h3::before {
    content: "";

    position: absolute;

    left: 42px;
    top: 0;
    bottom: -20px;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            var(--gold-600),
            rgba(180, 145, 67, .12)
        );
}

.seo-page .recovery-section .seo-container > h3::after {
    content:
        "0" counter(recovery-step);

    position: absolute;

    left: 0;
    top: 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 76px;
    height: 44px;

    color: var(--gold-600);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 24px;
    font-weight: 400;

    letter-spacing: .03em;

    background:
        var(--seo-paper);

    border:
        1px solid
        rgba(180, 145, 67, .28);
}

.seo-page .recovery-section .seo-container > h3 + p {
    max-width: 820px;

    margin:
        0 0 0 92px;

    padding:
        0 30px 32px;

    color: var(--ink);

    font-size: 16.5px;

    line-height: 1.85;
}

.seo-page .recovery-section
.seo-container > h3:last-of-type::before {
    bottom: 0;
}

.seo-page .recovery-section
.seo-container > h3:last-of-type + p {
    padding-bottom: 5px;
}


/* =========================================================
   FAQ — ЧАСТЫЕ ВОПРОСЫ
========================================================= */

.seo-page .faq-section .seo-container > h3 {
    position: relative;

    max-width: 940px;

    margin: 18px 0 0;

    padding:
        22px 28px 17px 64px;

    color: var(--forest-900);

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size: 18px;
    font-weight: 600;

    line-height: 1.45;

    background:
        linear-gradient(
            100deg,
            rgba(255,255,255,.72),
            rgba(247,241,222,.48)
        );

    border-top:
        1px solid
        rgba(52,66,47,.10);

    border-left:
        3px solid
        rgba(180,145,67,.55);
}

.seo-page .faq-section .seo-container > h3::before {
    content: "?";

    position: absolute;

    left: 20px;
    top: 19px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    color: var(--gold-600);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 18px;

    border:
        1px solid
        rgba(180,145,67,.38);

    border-radius: 50%;
}

.seo-page .faq-section .seo-container > h3 + p {
    max-width: 940px;

    margin:
        0 0 22px;

    padding:
        18px 28px 24px 64px;

    color: var(--seo-text);

    font-size: 16px;

    line-height: 1.82;

    background:
        rgba(255,253,248,.55);

    border-left:
        1px solid
        rgba(180,145,67,.23);
}

.seo-page .faq-section
.seo-container > h3:last-of-type + p {
    margin-bottom: 0;
}


/* =========================================================
   RECOVERY — MOBILE
========================================================= */

@media (max-width: 600px) {

    .seo-page .recovery-section
    .seo-container > h3 {

        margin-top: 28px;

        padding:
            17px 16px 8px 67px;

        font-size: 20px;
    }

    .seo-page .recovery-section
    .seo-container > h3::before {

        left: 25px;
        bottom: -17px;
    }

    .seo-page .recovery-section
    .seo-container > h3::after {

        left: 0;
        top: 13px;

        width: 52px;
        height: 36px;

        font-size: 19px;
    }

    .seo-page .recovery-section
    .seo-container > h3 + p {

        margin-left: 67px;

        padding:
            0 16px 26px;

        font-size: 15px;

        line-height: 1.75;
    }


    /* FAQ */

    .seo-page .faq-section
    .seo-container > h3 {

        margin-top: 14px;

        padding:
            17px 16px 14px 52px;

        font-size: 16px;

        line-height: 1.5;
    }

    .seo-page .faq-section
    .seo-container > h3::before {

        left: 15px;
        top: 15px;

        width: 25px;
        height: 25px;

        font-size: 16px;
    }

    .seo-page .faq-section
    .seo-container > h3 + p {

        margin-bottom: 16px;

        padding:
            14px 16px 21px 52px;

        font-size: 15px;

        line-height: 1.76;
    }

}
/* =========================================================
   ANASTASIS — SEO FOOTER
========================================================= */

.seo-page .footer {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(180,145,67,.10),
            transparent 280px
        ),

        radial-gradient(
            circle at 8% 92%,
            rgba(101,123,82,.08),
            transparent 320px
        ),

        linear-gradient(
            145deg,
            #2d392a 0%,
            #20291f 100%
        );

    color:
        rgba(255,255,255,.86);

    border-top:
        1px solid
        rgba(214,185,107,.20);
}


.seo-page .footer::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -300px;
    bottom: -380px;

    border:
        1px solid
        rgba(214,185,107,.08);

    border-radius: 50%;

    pointer-events: none;
}


.seo-page .footer .container {
    position: relative;

    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 56px)
        );

    margin: 0 auto;

    padding:
        42px 0
        18px;
}


/* =========================================================
   ТРИ ОСНОВНЫЕ КОЛОНКИ
========================================================= */

.seo-page .footer-main {
    display: grid;

    grid-template-columns:
        1fr
        1.5fr
        1fr;

    gap: 45px;

    align-items: start;

    padding-bottom:
        30px;
}


/* =========================================================
   ЛЕВО — КОНТАКТЫ
========================================================= */

.seo-page .footer-contact {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    margin: 0;
    padding: 0;
}


.seo-page .footer-contact h3 {

    margin:
        0 0 18px;

    color:
        #f4ead0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 19px;

    font-weight: 400;

    line-height: 1.25;
}


.seo-page .footer-contact h3::after {

    content: "";

    display: block;

    width: 38px;
    height: 1px;

    margin-top: 9px;

    background:
        #b49143;
}


.seo-page .footer-contact a {

    margin-bottom: 9px;

    color:
        rgba(255,255,255,.80);

    font-size: 13px;

    line-height: 1.45;

    text-decoration: none;

    transition:
        color .22s ease;
}


.seo-page .footer-contact a:hover {
    color:
        #e0c87e;
}


.seo-page .footer-address {

    display: block;

    margin-top: 9px;

    color:
        rgba(255,255,255,.48);

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   ЦЕНТР — НАВИГАЦИЯ
========================================================= */

.seo-page .footer-nav {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 28px;

    align-items: start;

    margin: 0;
    padding: 0;
}


.seo-page .footer-nav-column {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    margin: 0;
    padding: 0;
}


.seo-page .footer-nav-column h3 {

    margin:
        0 0 17px;

    color:
        #f4ead0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 17px;

    font-weight: 400;

    line-height: 1.25;
}


.seo-page .footer-nav-column h3::after {

    content: "";

    display: block;

    width: 34px;
    height: 1px;

    margin-top: 9px;

    background:
        #b49143;
}


.seo-page .footer-nav-column a {

    margin-bottom: 9px;

    color:
        rgba(255,255,255,.58);

    font-size: 13px;

    line-height: 1.45;

    text-decoration: none;

    transition:
        color .22s ease,
        transform .22s ease;
}


.seo-page .footer-nav-column a:hover {

    color:
        #e0c87e;

    transform:
        translateX(3px);
}


/* =========================================================
   ПРАВО — ANASTASIS
========================================================= */

.seo-page .footer-brand {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    margin: 0;
    padding: 0;
}


.seo-page .footer-logo {

    display: inline-block;

    margin:
        0 0 6px;

    color:
        #fffaf0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 30px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: .02em;

    text-decoration: none;
}


.seo-page .footer-place {

    display: block;

    margin:
        0 0 8px;

    color:
        #d2b66d;

    font-size: 12px;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.seo-page .footer-brand > p {

    margin: 0;

    color:
        rgba(255,255,255,.65);

    font-size: 13px;
}


.seo-page .footer-brand .footer-description {

    max-width: 260px;

    margin-top: 18px;

    color:
        rgba(255,255,255,.48);

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   СОЦСЕТИ
========================================================= */

.seo-page .footer-social {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 23px;
}


.seo-page .footer-social a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;
    height: 38px;

    border:
        1px solid
        rgba(214,185,107,.28);

    border-radius: 50%;

    background:
        rgba(255,255,255,.035);

    color:
        #d2b66d;

    font-size: 16px;

    text-decoration: none;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease;
}


.seo-page .footer-social a:hover {

    background:
        rgba(214,185,107,.12);

    border-color:
        rgba(214,185,107,.62);

    color:
        #f0d58b;

    transform:
        translateY(-3px);
}


/* =========================================================
   НИЖНЯЯ СТРОКА
========================================================= */

.seo-page .footer-bottom {
    display: flex;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 0;

    padding-top: 14px;

    color: rgba(255,255,255,.38);

    font-size: 11px;
    text-align: center;
}

.seo-page .footer-bottom-line {
    display: block;

    width: 180px;
    height: 1px;

    margin: 0 auto 14px;

    background:
        rgba(255,255,255,.10);
}


.seo-page .footer-bottom a {

    color:
        rgba(255,255,255,.52);

    text-decoration: none;

    transition:
        color .22s ease;
}


.seo-page .footer-bottom a:hover {

    color:
        #d2b66d;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .seo-page .footer-main {

        grid-template-columns:
            1fr 1fr;

        gap: 42px;
    }


    .seo-page .footer-brand {

        grid-column:
            1 / -1;

        order:
            -1;
    }


    .seo-page .footer-nav {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .seo-page .footer .container {

        width:
            calc(100% - 28px);

        padding:
            47px 0
            22px;
    }


    .seo-page .footer-main {

        grid-template-columns:
            1fr;

        gap:
            35px;

        padding-bottom:
            37px;
    }


    .seo-page .footer-brand,
    .seo-page .footer-contact,
    .seo-page .footer-nav {

        grid-column:
            auto;

        order:
            initial;
    }


    .seo-page .footer-nav {

        grid-template-columns:
            1fr 1fr;

        gap:
            30px 20px;
    }


    .seo-page .footer-logo {

        font-size: 27px;
    }


    .seo-page .footer-social {

        margin-top: 21px;
    }


    .seo-page .footer-social a {

        width: 36px;
        height: 36px;

        font-size: 15px;
    }


    .seo-page .footer-bottom {

        flex-wrap: wrap;

        gap: 10px;
    }


    .seo-page .footer-bottom-line {

        display: none;
    }

}
.seo-page .recovery-section .seo-container > h3 {
    padding-left: 92px;
}

.seo-page .recovery-section .seo-container > h3::after {
    left: 0;
}

.seo-page .recovery-section .seo-container > h3::before {
    left: -18px;
}

/* =========================================================
   DARK FEATURE — FIX
========================================================= */

.seo-page .seo-section.seo-section-accent {
    background:
        linear-gradient(
            135deg,
            #34422f 0%,
            #273226 100%
        ) !important;

    color: #fffaf0 !important;
}

.seo-page .seo-section.seo-section-accent h2 {
    color: #fffaf0 !important;
}

.seo-page .seo-section.seo-section-accent p {
    color: rgba(255, 251, 242, .92) !important;
}

.seo-page .seo-section.seo-section-accent h2::after {
    background: #d2b66d !important;
}

.seo-page .seo-section.seo-section-accent a {
    color: #e0c87f !important;
}
/* =========================================================
   SEO PAGE — ADAPTIVE
   Не трогает header / menu / burger из responsive.css
   ========================================================= */

/* ---------- TABLET ---------- */

@media (max-width: 900px) {

    .seo-container {
        width: min(var(--seo-container), calc(100% - 42px));
    }

    .breadcrumbs {
        padding-top: 12px;
        font-size: 13px;
    }

    .seo-intro {
        padding: 58px 0 54px;
    }

    .seo-intro h1 {
        max-width: 900px;
        font-size: clamp(48px, 7vw, 64px);
        line-height: 1.08;
    }

    .seo-intro p {
        max-width: 820px;
        font-size: 16px;
        line-height: 1.8;
    }

    .seo-section {
        padding: 65px 0;
    }

    .seo-section h2 {
        max-width: 900px;
        font-size: clamp(34px, 5vw, 42px);
        line-height: 1.15;
    }

    .seo-section h3 {
        font-size: 19px;
        line-height: 1.4;
    }

    .seo-section p {
        font-size: 16px;
        line-height: 1.82;
    }

    /* ---------- ACCENT ---------- */

    .seo-section-accent {
        padding: 58px 0;
    }

    /* ---------- RECOVERY ---------- */

    .seo-page .recovery-section .seo-container > h3 {
        margin-top: 30px;
        padding: 20px 24px 8px 82px;
        font-size: 22px;
    }

    .seo-page .recovery-section .seo-container > h3::before {
        left: -16px;
    }

    .seo-page .recovery-section .seo-container > h3::after {
        left: 0;
        top: 15px;
        width: 68px;
        height: 42px;
        font-size: 22px;
    }

    .seo-page .recovery-section .seo-container > h3 + p {
        margin-left: 82px;
        padding: 0 24px 30px;
        font-size: 15.8px;
        line-height: 1.8;
    }

    /* ---------- FAQ ---------- */

    .seo-page .faq-section .seo-container > h3 {
        padding: 20px 24px 16px 60px;
        font-size: 17px;
    }

    .seo-page .faq-section .seo-container > h3::before {
        left: 19px;
    }

    .seo-page .faq-section .seo-container > h3 + p {
        padding: 16px 24px 22px 60px;
        font-size: 15.7px;
        line-height: 1.8;
    }

    /* ---------- RELATED ---------- */

    .seo-related {
        padding: 50px 0;
    }

    .seo-related a {
        padding: 9px 14px;
        font-size: 14px;
    }


  


    /* ---------- BREADCRUMBS ---------- */

    .breadcrumbs {
        padding-top: 8px;
        font-size: 12px;
        line-height: 1.5;
    }

    /* ---------- INTRO ---------- */

    .seo-intro {
        padding: 38px 0 42px;
    }

    .seo-intro h1 {
        font-size: clamp(35px, 10vw, 48px);
        line-height: 1.08;
    }

    .seo-intro p {
        font-size: 15px;
        line-height: 1.75;
    }

    /* ---------- SECTIONS ---------- */

    .seo-section {
        padding: 48px 0;
    }

    .seo-section h2 {
        margin-bottom: 26px;
        font-size: clamp(29px, 8vw, 37px);
        line-height: 1.12;
    }

    .seo-section h3 {
        font-size: 18px;
        line-height: 1.4;
    }

    .seo-section p {
        font-size: 15px;
        line-height: 1.78;
    }

    /* убираем большой декоративный сдвиг,
       который на телефоне уже не нужен */
    .seo-section::before {
        width: 2px;
    }

    /* ---------- ACCENT ---------- */

    .seo-section-accent {
        padding: 48px 0;
    }

    .seo-section-accent .seo-container {
        width: calc(100% - 28px);
    }


    /* =====================================================
       RECOVERY — PHONE
       ===================================================== */

    .seo-page .recovery-section .seo-container > h3 {
        margin-top: 26px;
        padding: 16px 14px 8px 66px;
        font-size: 19px;
        line-height: 1.3;
    }

    /* линия полностью снаружи квадрата */
    .seo-page .recovery-section .seo-container > h3::before {
        left: -12px;
        bottom: -15px;
    }

    .seo-page .recovery-section .seo-container > h3::after {
        left: 0;
        top: 12px;
        width: 50px;
        height: 35px;
        font-size: 18px;
    }

    .seo-page .recovery-section .seo-container > h3 + p {
        margin-left: 66px;
        padding: 0 14px 25px;
        font-size: 14.7px;
        line-height: 1.74;
    }

    /* =====================================================
       FAQ — PHONE
       ===================================================== */

    .seo-page .faq-section .seo-container > h3 {
        margin-top: 14px;
        padding: 16px 14px 13px 49px;
        font-size: 16px;
        line-height: 1.42;
    }

    .seo-page .faq-section .seo-container > h3::before {
        left: 14px;
        top: 14px;
        width: 25px;
        height: 25px;
        font-size: 16px;
    }

    .seo-page .faq-section .seo-container > h3 + p {
        padding: 13px 14px 20px 49px;
        font-size: 14.5px;
        line-height: 1.74;
    }


    /* =====================================================
       RELATED
       ===================================================== */

    .seo-related {
        padding: 40px 0;
    }

    .seo-related h2 {
        margin-bottom: 20px;
    }

    .seo-related a {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin: 8px 0;
        padding: 10px 13px;
        font-size: 14px;
        line-height: 1.45;
    }


    /* =====================================================
       CONCLUSION
       ===================================================== */

    .seo-conclusion {
        padding: 44px 0;
    }

    .seo-conclusion h2 {
        font-size: 31px;
    }

    .seo-conclusion p {
        font-size: 15px;
        line-height: 1.78;
    }

    .seo-button {
        display: inline-flex;
        max-width: 100%;
        box-sizing: border-box;
        padding: 12px 18px;
        font-size: 14px;
    }


   }
/* ---------- VERY SMALL PHONES ---------- */

@media (max-width: 380px) {

    .seo-container {
        width: calc(100% - 22px);
    }

    .seo-intro h1 {
        font-size: 34px;
    }

    .seo-section {
        padding: 42px 0;
    }

    .seo-section h2 {
        font-size: 28px;
    }

    .seo-page .recovery-section .seo-container > h3 {
        padding-left: 60px;
        font-size: 18px;
    }

    .seo-page .recovery-section .seo-container > h3 + p {
        margin-left: 60px;
        padding-left: 12px;
        padding-right: 10px;
        font-size: 14px;
    }

    .seo-page .recovery-section .seo-container > h3::after {
        width: 46px;
        height: 33px;
        font-size: 17px;
    }

    .seo-page .faq-section .seo-container > h3 {
        padding-left: 45px;
        font-size: 15px;
    }

    .seo-page .faq-section .seo-container > h3 + p {
        padding-left: 45px;
        font-size: 14px;
    }

    .seo-page .footer-nav {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}
/* =========================================================
   FOOTER — TABLET + MOBILE
   Работает с ТЕКУЩИМ HTML
========================================================= */

@media (max-width: 900px) {

    /* 4 самостоятельные колонки:
       Контакты + 3 раздела меню */
    .seo-page .footer-main {
        display: grid;

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 26px;

        align-items: start;

        padding-bottom: 30px;
    }

    /* Делаем 3 внутренние колонки footer-nav
       самостоятельными элементами основной grid */
    .seo-page .footer-nav {
        display: contents;
    }

    .seo-page .footer-contact {
        grid-column: auto;
        grid-row: 1;
    }

    .seo-page .footer-nav-column {
        grid-column: auto;
        grid-row: 1;
    }

    /* АНAСТАСИС — отдельный общий блок снизу */
    .seo-page .footer-brand {
        grid-column: 1 / -1;
        grid-row: 2;

        align-items: center;
        text-align: center;

        padding-top: 28px;

        border-top:
            1px solid
            rgba(255,255,255,.08);
    }

    .seo-page .footer-brand .footer-description {
        max-width: 430px;
    }

    .seo-page .footer-social {
        justify-content: center;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .seo-page .footer .container {
        width: calc(100% - 28px);

        padding:
            36px 0
            18px;
    }

    /* 2 колонки на телефоне */
    .seo-page .footer-main {
        grid-template-columns:
            1fr 1fr;

        gap:
            30px 18px;

        padding-bottom:
            26px;
    }

    .seo-page .footer-contact {
        grid-column: 1;
        grid-row: auto;
    }

    .seo-page .footer-nav-column {
        grid-column: auto;
        grid-row: auto;
    }

    /* Первый ряд:
       Контакты | Алкоголь
       второй:
       Наркотики | Родным...
       третий:
       Центр */
       
    .seo-page .footer-contact h3,
    .seo-page .footer-nav-column h3 {
        font-size: 15px;
        margin-bottom: 13px;
    }

    .seo-page .footer-contact a,
    .seo-page .footer-address,
    .seo-page .footer-nav-column a {
        font-size: 12.5px;
        line-height: 1.55;
    }

    /* Общий блок АНАСТАСИС */
    .seo-page .footer-brand {
        grid-column: 1 / -1;

        grid-row: auto;

        padding:
            24px 10px
            24px;
    }

    .seo-page .footer-logo {
        font-size: 26px;
    }

    .seo-page .footer-place {
        font-size: 11px;
    }

    .seo-page .footer-brand > p {
        font-size: 12.5px;
    }

    .seo-page .footer-brand .footer-description {
        max-width: 300px;

        margin-top: 8px;

        line-height: 1.6;
    }

    .seo-page .footer-social {
        justify-content: center;

        margin-top: 17px;

        gap: 9px;
    }

    .seo-page .footer-social a {
        width: 35px;
        height: 35px;

        font-size: 14px;
    }

    .seo-page .footer-bottom {
        padding-top: 12px;
        font-size: 10px;
    }

    .seo-page .footer-bottom-line {
        width: 140px;
        margin-bottom: 11px;
    }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .seo-page .footer-main {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .seo-page .footer-contact,
    .seo-page .footer-nav-column {
        grid-column: 1;
    }

    .seo-page .footer-brand {
        grid-column: 1;
    }
}
.seo-page .info-block h3 {
    position: relative;

    margin: 28px 0 10px;
    padding-left: 16px;

    color: var(--forest-800);

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
}

/* =========================================================
   ВНУТРЕННИЕ H3 — ОБЫЧНЫЕ РАЗДЕЛЫ
   Не затрагивает этапы recovery и FAQ
========================================================= */

.seo-page .seo-section:not(.recovery-section):not(.faq-section) .seo-container > h3 {
    position: relative;

    margin: 32px 0 14px;
    padding-bottom: 9px;

    color: var(--forest-800);

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size: 18px;
    font-weight: 600;
    line-height: 1.45;
}

.seo-page .seo-section:not(.recovery-section):not(.faq-section) .seo-container > h3::after {
    content: "";

    display: block;

    width: 42px;
    height: 1px;

    margin-top: 8px;

    background: var(--gold-600);
}


/* ---------- MOBILE ---------- */

@media (max-width: 600px) {

    .seo-page .seo-section:not(.recovery-section):not(.faq-section) .seo-container > h3 {
        margin: 25px 0 11px;
        padding-bottom: 7px;

        font-size: 16px;
    }

    .seo-page .seo-section:not(.recovery-section):not(.faq-section) .seo-container > h3::after {
        width: 32px;
        margin-top: 7px;
    }
}
/* =========================================================
   ТЕЛЕФОНЫ В ШАПКЕ — КАК НА ОСНОВНОЙ СТРАНИЦЕ
========================================================= */

.seo-page .header-contacts {
    gap: clamp(8px, 1vw, 14px);
    white-space: nowrap;
}

.seo-page .header-contacts a {
    position: relative;

    padding-bottom: 3px;

    color: #b9a66d;

    font-size: 19px;
    font-weight: 400;

    text-decoration: none;
}

.seo-page .header-contacts a::after {
    content: "";

    position: absolute;

    left: 5%;
    right: 5%;

    bottom: -2px;

    height: 3px;

    background: linear-gradient(
        90deg,
        transparent,
        #8fa875,
        transparent
    );

    opacity: .75;
}

.seo-page .header-contacts a:hover {
    color: #8fa875;
}

.seo-page .header-contacts .divider {
    color: #8fa875;

    opacity: 1;

    font-size: 18px;
    font-weight: 300;

    margin: 0 4px;

    padding-bottom: 0;
}