/* ==========================================================
   GLOBAL VARIABLES
   Центр колопроктологии
   Optimized for:
   - Core Web Vitals
   - Accessibility
   - Medical SEO pages
========================================================== */


:root {


    /* Brand colors */

    --color-primary: #0b6b5f;

    --color-primary-dark: #084c44;

    --color-secondary: #1f8a70;


    /* Background */

    --color-bg: #ffffff;

    --color-bg-soft: #f6f9f8;

    --color-card: #ffffff;



    /* Text */

    --color-text: #1b2930;

    --color-text-light: #5b6870;


    /* Borders */

    --color-border: #e3e9e7;



    /* Status */

    --color-success: #198754;



    /* Shadows */

    --shadow-sm:
        0 2px 8px rgba(0,0,0,.06);


    --shadow-md:
        0 10px 30px rgba(0,0,0,.08);



    /* Radius */

    --radius-sm: 8px;

    --radius-md: 16px;

    --radius-lg: 24px;



    /* Container */

    --container-width: 1200px;



    /* Transitions */

    --transition:
        .25s ease;



    /* Font */

    --font-main:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;


}






/* ==========================================================
   RESET
========================================================== */


*,
*::before,
*::after {

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

    font-size: 16px;

}



body {

    margin: 0;

    background:
        var(--color-bg);

    color:
        var(--color-text);

    font-family:
        var(--font-main);

    line-height:
        1.6;

    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;

}





img {

    max-width: 100%;

    height: auto;

    display: block;

}





a {

    color:
        inherit;

  

}



button,
input,
textarea {

    font:
        inherit;

}



button {

    cursor:
        pointer;

}





ul {

    margin:0;

    padding:0;

    list-style:none;

}








/* ==========================================================
   CONTAINER
========================================================== */


.container {


    width:
        min(
            100% - 40px,
            var(--container-width)
        );


    margin-inline:
        auto;


}







/* ==========================================================
   TYPOGRAPHY
   Используем clamp для адаптивности
========================================================== */


h1,
h2,
h3 {


    margin-top:
        0;


    line-height:
        1.2;


    color:
        var(--color-text);


}



h1 {


    font-size:
        clamp(
            2rem,
            4vw,
            3.5rem
        );


}



h2 {


    font-size:
        clamp(
            1.7rem,
            3vw,
            2.5rem
        );


}



h3 {


    font-size:
        clamp(
            1.2rem,
            2vw,
            1.5rem
        );


}




p {


    margin-top:
        0;


    color:
        var(--color-text-light);


}








/* ==========================================================
   SECTION COMMON
========================================================== */


section {


    padding-block:
        clamp(
            60px,
            8vw,
            50px
        );


}




.section-header {


    max-width:
        760px;


    margin-bottom:
        50px;


}



.section-label {


    display:
        inline-block;


    margin-bottom:
        12px;


    color:
        var(--color-primary);


    font-size:
        .9rem;


    font-weight:
        700;


    text-transform:
        uppercase;


    letter-spacing:
        .08em;


}







/* ==========================================================
   BUTTONS
========================================================== */


.btn {


    display:
        inline-flex;


    align-items:
        center;


    justify-content:
        center;


    gap:
        8px;


    min-height:
        46px;


    padding:
        12px 26px;


    border:
        none;


    border-radius:
        var(--radius-sm);


    font-weight:
        700;


    transition:
        var(--transition);



}




.btn-primary {


    background:
        var(--color-primary);


    color:
        #fff;


}



.btn-primary:hover {


    background:
        var(--color-primary-dark);


    transform:
        translateY(-2px);


}




.btn-block {


    width:
        100%;


}

/* ==========================================================
   HEADER
========================================================== */

 /* ======================================
   HEADER
====================================== */


.site-header {

background:#fff;

position:relative;

z-index:100;


}




/* TOPBAR */

.topbar {

background:#f5f8f7;

border-bottom:1px solid #e4e9e7;

font-size:14px;

}



.topbar-inner {


height:42px;

display:flex;

align-items:center;

justify-content:space-between;

gap:25px;


}



.topbar-item {

color:#526777;

}



.topbar-phone {

font-weight:700;

color:#087f5b;

}




.language-switcher {


display:flex;

gap:8px;


}



.language-switcher a {


padding:4px 8px;

border-radius:6px;

font-weight:600;

}



.language-switcher .active {


background:#087f5b;

color:white;


}





/* MAIN HEADER */


.main-header {


background:white;

}



.header-layout {


height:90px;


display:grid;


grid-template-columns:
220px 1fr auto;


align-items:center;


gap:35px;


}




.logo img {
    display: block;
    max-width: 156px;
    height: auto;
}




/* NAVIGATION */


.desktop-nav {


display:flex;

justify-content:center;

gap:28px;


}



.desktop-nav a {


font-size:15px;

font-weight:600;

color:#243b53;

transition:.2s;


}



.desktop-nav a:hover {


color:#087f5b;


}





/* BUTTONS */


.header-buttons {


display:flex;

gap:12px;


}



.header-call {


height:44px;

padding:0 22px;

display:flex;

align-items:center;

border:

1px solid #087f5b;


border-radius:10px;


color:#087f5b;

font-weight:700;


}



.header-book {


height:44px;

padding:0 25px;

display:flex;

align-items:center;

background:#087f5b;

color:white;

border-radius:10px;

font-weight:700;


}




/* MOBILE BUTTON */


.mobile-toggle {


display:none;

background:none;

border:0;

width:42px;

height:42px;


}



.mobile-toggle span {


display:block;

height:2px;

background:#102a43;

margin:7px 0;


}





/* MOBILE MENU */


.mobile-nav {


display:none;

background:white;

padding:20px;

box-shadow:
0 10px 30px rgba(0,0,0,.08);


}



.mobile-nav a {


display:block;

padding:14px 0;

border-bottom:
1px solid #edf2f7;


font-weight:600;


}





.mobile-toggle.open span:nth-child(1){

transform:
translateY(9px)
rotate(45deg);

}


.mobile-toggle.open span:nth-child(2){

opacity:0;

}


.mobile-toggle.open span:nth-child(3){

transform:
translateY(-9px)
rotate(-45deg);

}


.mobile-toggle span {

transition:.25s;

}


/* TABLET */

@media(max-width:1100px){


.desktop-nav {


display:none;


}



.header-layout {


grid-template-columns:
1fr auto auto;


}



.mobile-toggle {


display:block;


}


}







/* MOBILE */


@media(max-width:700px){



.topbar-inner {


height:auto;

padding:10px 0;

flex-wrap:wrap;


}



.topbar-item:nth-child(1){

display:none;

}



.header-layout {


height:75px;


grid-template-columns:
1fr auto;


gap:15px;


}



.logo img {


width:170px;


}



.header-buttons {


display:none;


}



.mobile-nav.active {


display:block;


}



}


/* ==========================================================
   HERO SECTION
========================================================== */

 
/* ==========================================================
   PREMIUM MEDICAL HERO
   Proctology Center
========================================================== */


.hero {

    padding:
        clamp(50px, 7vw, 90px) 0;

    background:
        #f8faf9;

}


.hero-grid {

    display:
        grid;

    grid-template-columns:
        minmax(300px, 1fr)
        minmax(320px, 520px);

    align-items:
        center;

    gap:
        clamp(40px, 6vw, 90px);

}



/* ==========================================================
   LEFT CONTENT
========================================================== */


.hero-content {


    max-width:
        650px;


}



.hero-content h1 {


    font-size:
        clamp(36px, 4vw, 58px);


    line-height:
        1.12;


    letter-spacing:
        -0.02em;


    color:
        #102a43;


    margin-bottom:
        25px;


}



.hero-description {


    font-size:
        clamp(17px, 1.5vw, 20px);


    line-height:
        1.7;


    color:
        #486581;


    max-width:
        580px;


    margin-bottom:
        35px;


}





/* ==========================================================
   ADVANTAGES
========================================================== */


.hero-benefits {


    display:
        grid;


    gap:
        14px;


    margin-bottom:
        40px;


}



.hero-benefits div {


    display:
        flex;


    align-items:
        center;


    gap:
        12px;


    color:
        #243b53;


    font-weight:
        600;


}



.hero-benefits span {


    width:
        28px;


    height:
        28px;


    display:
        flex;


    align-items:
        center;


    justify-content:
        center;


    border-radius:
        50%;


    background:
        #e3f5ef;


    color:
        #087f5b;


    font-size:
        14px;


}





/* ==========================================================
   BUTTONS
========================================================== */


.hero-buttons {


    display:
        flex;


    gap:
        15px;


    flex-wrap:
        wrap;


}



.hero-buttons a {


    display:
        inline-flex;


    align-items:
        center;


    justify-content:
        center;


    min-height:
        52px;


    padding:
        0 32px;


    border-radius:
        10px;


    font-weight:
        700;


    transition:
        .25s ease;


}



.hero-primary {


    background:
        #087f5b;


    color:
        #fff;


}



.hero-primary:hover {


    background:
        #066b4d;


}



.hero-secondary {


    background:
        transparent;


    color:
        #087f5b;


    border:
        1px solid #087f5b;


}





/* ==========================================================
   DOCTOR IMAGE
========================================================== */


.hero-doctor {


    position:
        relative;


}



.hero-doctor img {


    width:
        100%;


    aspect-ratio:
        4 / 5;


    object-fit:
        cover;


    border-radius:
        24px;


    display:
        block;


}







/* ==========================================================
   DOCTOR INFO UNDER PHOTO
========================================================== */


.hero-doctor-info {


    background:
        #ffffff;


    padding:
        22px 25px;


    margin:
        -40px 25px 0;


    position:
        relative;


    border-radius:
        16px;


    box-shadow:
        0 15px 40px rgba(16,42,67,.12);


}



.hero-doctor-info strong {


    display:
        block;


    font-size:
        20px;


    color:
        #102a43;


    margin-bottom:
        5px;


}



.hero-doctor-info span {


    color:
        #627d98;


    font-size:
        15px;


}





/* ==========================================================
   TRUST LINE BELOW HERO
========================================================== */


.hero-trust {


    margin-top:
        70px;


    display:
        grid;


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


    border-top:
        1px solid #d9e2ec;


    padding-top:
        35px;


}



.hero-trust-item {


    text-align:
        center;


}



.hero-trust-item strong {


    display:
        block;


    font-size:
        28px;


    color:
        #087f5b;


}



.hero-trust-item span {


    color:
        #627d98;


    font-size:
        14px;


}





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


@media(max-width:900px){


.hero-grid {


    grid-template-columns:
        1fr;


}



.hero-content {


    text-align:
        center;


}



.hero-description {


    margin-left:
        auto;


    margin-right:
        auto;


}



.hero-benefits {


    justify-items:
        center;


}



.hero-buttons {


    justify-content:
        center;


}



.hero-doctor {


    max-width:
        420px;


    margin:
        0 auto;


}



.hero-trust {


    grid-template-columns:
        repeat(2,1fr);


    gap:
        30px;


}



}





@media(max-width:480px){


.hero {


    padding:
        40px 0;


}



.hero-content h1 {


    font-size:
        34px;


}



.hero-buttons {


    flex-direction:
        column;


}



.hero-buttons a {


    width:
        100%;


}



.hero-trust {


    grid-template-columns:
        1fr;


}



.hero-doctor-info {


    margin:
        -25px 10px 0;


}



}




/* ==========================================================
   APPOINTMENT FORM
========================================================== */


.appointment-card {


    background:
        var(--color-card);


    padding:
        30px;


    border-radius:
        var(--radius-md);


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


    border:
        1px solid var(--color-border);


}





.appointment-card h2 {


    font-size:
        1.5rem;


}





.form-group {


    margin-bottom:
        16px;


}



.form-group label {


    display:
        block;


    margin-bottom:
        6px;


    font-weight:
        600;


    font-size:
        .9rem;


}



.form-group input,
.form-group textarea {


    width:
        100%;


    padding:
        12px 14px;


    border:
        1px solid var(--color-border);


    border-radius:
        var(--radius-sm);


    background:
        #fff;


}



.form-group input:focus,
.form-group textarea:focus {


    outline:
        2px solid rgba(11,107,95,.2);


    border-color:
        var(--color-primary);


}



.privacy-note {


    margin-top:
        15px;


    font-size:
        .8rem;


}







/* ==========================================================
   HERO IMAGE
========================================================== */


.hero-image {


    position:
        relative;


}



.hero-image img {


    border-radius:
        var(--radius-lg);


    aspect-ratio:
        4 / 5;


    object-fit:
        cover;


}




.doctor-badge {


    position:
        absolute;


    left:
        20px;


    bottom:
        20px;


    background:
        white;


    padding:
        15px 20px;


    border-radius:
        var(--radius-sm);


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


}



.doctor-badge strong {


    display:
        block;


}







/* ==========================================================
   HERO FEATURES
========================================================== */


.hero-features {


    margin-top:
        50px;


    display:
        grid;


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


    gap:
        20px;


}



.feature-card {


    padding:
        25px;


    background:
        #fff;


    border:
        1px solid var(--color-border);


    border-radius:
        var(--radius-md);


}





.feature-card h3 {


    font-size:
        1.15rem;


}/* ==========================================================
   DIRECT ANSWER SECTION
========================================================== */


.direct-answer {

    background:
        var(--color-bg-soft);

}



.answer-box {


    background:
        #ffffff;


    border-left:
        4px solid var(--color-primary);


    padding:
        30px;


    border-radius:
        var(--radius-md);


    margin-bottom:
        40px;


}



.answer-grid {


    display:
        grid;


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


    gap:
        25px;


}



.answer-card {


    background:
        #fff;


    padding:
        25px;


    border-radius:
        var(--radius-md);


    border:
        1px solid var(--color-border);


}



.answer-card ul {


    display:
        grid;


    gap:
        10px;


}



.answer-card li::before {


    content:
        "✓";


    color:
        var(--color-primary);


    font-weight:
        700;


    margin-right:
        8px;


}








/* ==========================================================
   TABLES GLOBAL
========================================================== */


table {


    width:
        100%;


    border-collapse:
        collapse;


}



th {


    background:
        var(--color-bg-soft);


    text-align:
        left;


    font-weight:
        700;


}



th,
td {


    padding:
        16px;


    border-bottom:
        1px solid var(--color-border);


    vertical-align:
        top;


}






.direct-table {


    margin-top:
        50px;


    overflow-x:
        auto;


}






/* ==========================================================
   SYMPTOMS
========================================================== */


.symptoms-grid {


    display:
        grid;


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


    gap:
        25px;


}



.symptom-card {


    background:
        #fff;


    border:
        1px solid var(--color-border);


    border-radius:
        var(--radius-md);


    transition:
        var(--transition);


}



.symptom-card:hover {


    transform:
        translateY(-5px);


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


}



.symptom-card a {


    display:
        block;


    padding:
        30px;


}



.symptom-card span {


    color:
        var(--color-primary);


    font-weight:
        700;


}





.medical-note {


    margin-top:
        40px;


    padding:
        20px 25px;


    background:
        #fff8e8;


    border-left:
        4px solid #d9a441;


    border-radius:
        var(--radius-sm);


}








/* ==========================================================
   HEMORRHOID STAGES
========================================================== */


.stages {


    background:
        #fff;


}



.stages-grid {


    display:
        grid;


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


    gap:
        20px;


}



.stage-card {


    padding:
        25px;


    border-radius:
        var(--radius-md);


    background:
        var(--color-bg-soft);


}



.stage-number {


    width:
        45px;


    height:
        45px;


    display:
        flex;


    align-items:
        center;


    justify-content:
        center;


    border-radius:
        50%;


    background:
        var(--color-primary);


    color:
        #fff;


    font-weight:
        800;


    margin-bottom:
        20px;


}



.stage-card ul {


    display:
        grid;


    gap:
        8px;


    margin-bottom:
        20px;


}



.stage-card li::before {


    content:
        "•";


    color:
        var(--color-primary);


    margin-right:
        8px;


}








.stages-table {


    margin-top:
        50px;


    overflow-x:
        auto;


}








/* ==========================================================
   TREATMENT METHODS
========================================================== */


.methods {


    background:
        var(--color-bg-soft);


}



.methods-grid {


    display:
        grid;


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


    gap:
        25px;


}



.method-card {


    background:
        #fff;


    padding:
        30px;


    border-radius:
        var(--radius-md);


    border:
        1px solid var(--color-border);


}



.method-card ul {


    margin:
        20px 0;


    display:
        grid;


    gap:
        10px;


}



.method-card li::before {


    content:
        "✓";


    color:
        var(--color-primary);


    margin-right:
        8px;


}



.method-card a {


    color:
        var(--color-primary);


    font-weight:
        700;


}



.methods-table {


    margin-top:
        60px;


    overflow-x:
        auto;


}

/* ==========================================================
   PRIMARY APPOINTMENT PROCESS
========================================================== */


.appointment-process {

    background:
        #ffffff;

}



.process-grid {


    display:
        grid;


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


    gap:
        25px;


}



.process-card {


    padding:
        30px;


    background:
        var(--color-bg-soft);


    border-radius:
        var(--radius-md);


}



.process-number {


    font-size:
        2rem;


    font-weight:
        800;


    color:
        var(--color-primary);


    margin-bottom:
        15px;


}



.fear-block {


    margin-top:
        50px;


    padding:
        35px;


    display:
        grid;


    grid-template-columns:
        1.2fr .8fr;


    gap:
        30px;


    background:
        var(--color-bg-soft);


    border-radius:
        var(--radius-md);


}



.fear-list {


    display:
        grid;


    gap:
        12px;


}



.fear-list li {


    font-weight:
        600;


}






.preparation {


    margin-top:
        50px;


    overflow-x:
        auto;


}







/* ==========================================================
   TRUST / E-E-A-T
========================================================== */


.trust {


    background:
        var(--color-bg-soft);


}



.trust-grid {


    display:
        grid;


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


    gap:
        25px;


}



.trust-card {


    background:
        #fff;


    padding:
        30px;


    border-radius:
        var(--radius-md);


    border:
        1px solid var(--color-border);


}



.trust-icon {


    width:
        45px;


    height:
        45px;


    display:
        flex;


    align-items:
        center;


    justify-content:
        center;


    border-radius:
        50%;


    background:
        var(--color-primary);


    color:
        #fff;


    font-size:
        1.2rem;


    margin-bottom:
        20px;


}




.standards {


    margin-top:
        60px;


    display:
        grid;


    grid-template-columns:
        2fr 1fr;


    gap:
        40px;


    align-items:
        center;


}



.standards-image img {


    border-radius:
        var(--radius-lg);


}



.standards ul {


    display:
        grid;


    gap:
        12px;


}



.standards li::before {


    content:
        "✓";


    color:
        var(--color-primary);


    margin-right:
        10px;


}




.statistics {


    margin-top:
        60px;


    display:
        grid;


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


    gap:
        20px;


}



.stat-item {


    text-align:
        center;


    padding:
        25px;


    background:
        #fff;


    border-radius:
        var(--radius-md);


}



.stat-item strong {


    display:
        block;


    font-size:
        2rem;


    color:
        var(--color-primary);


}







/* ==========================================================
   DOCTORS
========================================================== */


.doctors-grid {


    display:
        grid;


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


    gap:
        30px;


}



.doctor-card {


    overflow:
        hidden;


    background:
        #fff;


    border:
        1px solid var(--color-border);


    border-radius:
        var(--radius-md);


}



.doctor-card img {


    width:
        100%;


    aspect-ratio:
        4 / 5;


    object-fit:
        cover;


}



.doctor-info {


    padding:
        25px;


}



.doctor-position {


    color:
        var(--color-primary);


    font-weight:
        700;


}



.doctor-meta {


    margin:
        20px 0;


    display:
        grid;


    gap:
        10px;


}



.doctor-note {


    margin-top:
        50px;


    padding:
        30px;


    background:
        var(--color-bg-soft);


    border-radius:
        var(--radius-md);


}







/* ==========================================================
   PRICES
========================================================== */


.prices {


    background:
        var(--color-bg-soft);


}



.price-table-wrapper {


    overflow-x:
        auto;


}



.price-table {


    background:
        #fff;


}



.price-note {


    margin-top:
        30px;


}



.price-cta {


    margin-top:
        40px;


    padding:
        30px;


    display:
        flex;


    justify-content:
        space-between;


    align-items:
        center;


    gap:
        20px;


    background:
        #fff;


    border-radius:
        var(--radius-md);


}







/* ==========================================================
   FAQ
========================================================== */


.faq-list {


    display:
        grid;


    gap:
        15px;


}



.faq-item {


    background:
        #fff;


    border:
        1px solid var(--color-border);


    border-radius:
        var(--radius-md);


    padding:
        20px;


}



.faq-item summary {


    cursor:
        pointer;


    font-weight:
        700;


    list-style:
        none;


}



.faq-item summary::-webkit-details-marker {


    display:
        none;


}



.faq-answer {


    padding-top:
        20px;


}



.faq-table {


    margin-top:
        50px;


    overflow-x:
        auto;


}

/* ==========================================================
   REVIEWS
========================================================== */


.reviews-grid {


    display:
        grid;


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


    gap:
        25px;


}



.review-card {


    background:
        #fff;


    padding:
        30px;


    border-radius:
        var(--radius-md);


    border:
        1px solid var(--color-border);


}



.review-rating {


    color:
        #e4a11b;


    font-size:
        1.2rem;


    margin-bottom:
        15px;


}



.review-card footer {


    margin-top:
        20px;


    display:
        flex;


    justify-content:
        space-between;


    gap:
        15px;


    color:
        var(--color-text-light);


}





.video-reviews {


    margin-top:
        60px;


}



.video-grid {


    display:
        grid;


    grid-template-columns:
        repeat(2,1fr);


    gap:
        25px;


}



.video-placeholder {


    aspect-ratio:
        16 / 9;


    background:
        #222;


    display:
        flex;


    justify-content:
        center;


    align-items:
        center;


    border-radius:
        var(--radius-md);


}



.video-placeholder button {


    width:
        60px;


    height:
        60px;


    border-radius:
        50%;


    border:
        none;


    font-size:
        1.5rem;


}







/* ==========================================================
   CONTACTS
========================================================== */


.contacts {


    background:
        var(--color-bg-soft);


}



.contacts-grid {


    display:
        grid;


    grid-template-columns:
        .8fr 1.2fr;


    gap:
        40px;


}



.contact-info {


    display:
        grid;


    gap:
        20px;


}



.contact-item {


    background:
        #fff;


    padding:
        25px;


    border-radius:
        var(--radius-md);


}



.contact-item a {


    color:
        var(--color-primary);


    font-weight:
        700;


}



.map-wrapper {


    min-height:
        400px;


}



.map-wrapper iframe {


    width:
        100%;


    height:
        100%;


    min-height:
        400px;


    border:
        0;


    border-radius:
        var(--radius-md);


}



.contact-form-box {


    margin-top:
        50px;


    background:
        #fff;


    padding:
        35px;


    border-radius:
        var(--radius-md);


}



.form-row {


    display:
        grid;


    grid-template-columns:
        1fr 1fr;


    gap:
        20px;


}



.contact-form label {


    display:
        grid;


    gap:
        8px;


    margin-bottom:
        20px;


    font-weight:
        600;


}



.contact-form input,
.contact-form textarea {


    width:
        100%;


    padding:
        14px;


    border:
        1px solid var(--color-border);


    border-radius:
        var(--radius-sm);


}







/* ==========================================================
   FOOTER
========================================================== */


.footer {


    background:
        #102126;


    color:
        #fff;


    padding:
        70px 0 25px;


}



.footer-grid {


    display:
        grid;


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


    gap:
        40px;


}



.footer h3 {


    color:
        #fff;


    font-size:
        1.1rem;


}



.footer p,
.footer a {


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


}



.footer ul {


    display:
        grid;


    gap:
        10px;


}



.footer-logo {


    display:
        inline-block;


    color:
        #fff;


    font-size:
        1.4rem;


    font-weight:
        800;


    margin-bottom:
        20px;


}



.footer-disclaimer {


    margin-top:
        50px;


    padding-top:
        25px;


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


    font-size:
        .9rem;


}



.footer-bottom {


    margin-top:
        25px;


    text-align:
        center;


}







/* ==========================================================
   CORE WEB VITALS OPTIMIZATION
========================================================== */


.symptoms,
.stages,
.methods,
.trust,
.doctors,
.prices,
.faq,
.reviews {


    content-visibility:
        auto;


    contain-intrinsic-size:
        800px;


}







/* ==========================================================
   RESPONSIVE
========================================================== */



@media (max-width: 1100px) {


    .hero-grid,
    .contacts-grid,
    .standards,
    .fear-block {


        grid-template-columns:
            1fr;


    }



    .hero-features,
    .trust-grid,
    .stages-grid,
    .methods-grid {


        grid-template-columns:
            repeat(2,1fr);


    }



    .doctors-grid {


        grid-template-columns:
            repeat(2,1fr);


    }



    .footer-grid {


        grid-template-columns:
            repeat(2,1fr);


    }



}





@media (max-width: 768px) {



    .container {


        width:
            min(
                100% - 30px,
                var(--container-width)
            );


    }



    .header-main-inner {


        flex-direction:
            column;


    }



    .main-nav ul {


        flex-direction:
            column;


        gap:
            15px;


    }



    .hero-grid,
    .hero-features,
    .answer-grid,
    .symptoms-grid,
    .stages-grid,
    .methods-grid,
    .process-grid,
    .trust-grid,
    .doctors-grid,
    .statistics,
    .reviews-grid,
    .video-grid,
    .footer-grid {


        grid-template-columns:
            1fr;


    }



    .price-cta {


        flex-direction:
            column;


        align-items:
            stretch;


    }



    .form-row {


        grid-template-columns:
            1fr;


    }



    section {


        padding-block:
            50px;


    }



}





@media (prefers-reduced-motion: reduce) {


    *,
    *::before,
    *::after {


        animation-duration:
            .01ms !important;


        transition-duration:
            .01ms !important;


        scroll-behavior:
            auto !important;


    }


}

/* ==========================================================
   скрытие полей в форме от спама
========================================================== */

.hidden-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}




/* ==========================================================
   форма
========================================================== */

.contact-consult-box {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: center;
    background: #fff;
    border-radius: 24px;
    padding: 35px;
    box-shadow: 0 15px 45px rgba(0,0,0,.08);
}


.doctor-preview {
    text-align: center;
}


.doctor-preview img {
    width: 100%;
    max-width: 250px;
    border-radius: 20px;
    display: block;
    margin: auto;
}


.doctor-info {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #333;
}


.doctor-info strong {
    font-size: 18px;
}


.doctor-info span {
    font-size: 14px;
    color: #777;
}



.contact-form-box h3 {
    font-size: 30px;
    margin-bottom: 10px;
}


.form-subtitle {
    color: #666;
    margin-bottom: 25px;
}



.contact-form label {
    display: block;
    margin-bottom: 18px;
    font-weight: 500;
}


.contact-form input,
.contact-form textarea {
    width: 100%;
    margin-top: 8px;
    padding: 15px 18px;
    border: 1px solid #ddd;
    border-radius: 12px;
    font-size: 13px;
    transition: .3s;
}


.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #1b8f8a;
    outline: none;
}



.hidden-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
}



@media(max-width:768px){

    .contact-consult-box {
        grid-template-columns: 1fr;
        padding: 25px;
        gap: 25px;
    }


    .doctor-preview img {
        max-width: 180px;
    }


    .contact-form-box h3 {
        font-size: 24px;
    }

}




/* ==========================================================
   CONSULTATION FORM
   Выбор врача и формат консультации
   Все классы имеют префикс consult-
========================================================== */


/* ==========================================================
   ВЫБОР ЛІКАРЯ
========================================================== */

.consult-doctor-selection {
    width: 100%;
    margin: 0 0 24px;
}

.consult-doctor-selection h4 {
    margin: 0 0 12px;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 600;
    color: #222;
}


/* Список лікарів */

.consult-doctors-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}


/* Окрема картка */

.consult-doctor-option {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 0;
}


/* Прихований radio */

.consult-doctor-option > input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}


/* Картка */

.consult-doctor-card {
    position: relative;

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

    width: 100%;
    min-height: 165px;

    margin: 0;
    padding: 12px 8px 10px;

    box-sizing: border-box;

    border: 1px solid #dfe5e8;
    border-radius: 10px;

    background: #fff;

    cursor: pointer;
    text-align: center;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}


.consult-doctor-card:hover {
    border-color: #b7c6c9;
}


/* Вибраний лікар */

.consult-doctor-option
> input[type="radio"]:checked
+ .consult-doctor-card {

    border-color: #168b72;

    background: #f8fcfb;

    box-shadow:
        0 0 0 2px rgba(22, 139, 114, .10);
}


/* ==========================================================
   ФОТО ЛІКАРЯ
========================================================== */

.consult-doctor-avatar {

    display: block !important;

    width: 64px !important;
    height: 64px !important;

    min-width: 64px !important;
    max-width: 64px !important;

    min-height: 64px !important;
    max-height: 64px !important;

    flex: 0 0 64px !important;

    margin: 0 auto 8px !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    object-fit: cover !important;
    object-position: center center;
}


/* ==========================================================
   ІНФОРМАЦІЯ ПРО ЛІКАРЯ
========================================================== */

.consult-doctor-content {

    display: flex;

    flex: 1 1 auto;

    flex-direction: column;

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

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0 4px;

    box-sizing: border-box;

    gap: 3px;
}


/* Ім'я */

.consult-doctor-content strong {

    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    color: #222;

    font-size: 13px;
    line-height: 1.3;

    font-weight: 600;
}


/* Спеціалізація */

.consult-doctor-content span {

    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    color: #777;

    font-size: 11px;
    line-height: 1.35;
}


/* Посилання */

.consult-doctor-content a {

    display: inline-block;

    width: auto;

    margin: 3px 0 0;
    padding: 0;

    color: #168b72;

    font-size: 11px;
    line-height: 1.3;

    font-weight: 500;

    text-decoration: none;
}


.consult-doctor-content a:hover {

    color: #126f5c;

    text-decoration: underline;
}


/* ==========================================================
   ГАЛОЧКА
========================================================== */

.consult-doctor-check {

    position: absolute;

    top: 7px;
    right: 7px;

    display: flex;

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

    width: 19px;
    height: 19px;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    border-radius: 50%;

    background: #168b72;
    color: #fff;

    font-size: 11px;
    line-height: 19px;

    opacity: 0;

    transform: scale(.8);

    transition:
        opacity .2s ease,
        transform .2s ease;
}


.consult-doctor-option
> input[type="radio"]:checked
+ .consult-doctor-card
.consult-doctor-check {

    opacity: 1;

    transform: scale(1);
}


/* ==========================================================
   ФОРМАТ КОНСУЛЬТАЦІЇ
========================================================== */

.consult-type {

    width: 100%;

    margin: 20px 0 24px;
}


.consult-type h4 {

    margin: 0 0 12px;

    font-size: 17px;
    line-height: 1.4;

    font-weight: 600;

    color: #222;
}


.consult-type-list {

    display: grid;

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

    gap: 10px;

    width: 100%;
}


.consult-type-option {

    position: relative;

    min-width: 0;

    margin: 0;
    padding: 0;
}


/* Прихований radio */

.consult-type-option input[type="radio"] {

    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;
    padding: 0;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

    opacity: 0;
}


/* Варіант консультації */

.consult-type-option label {

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 60px;

    box-sizing: border-box;

    margin: 0;

    padding: 10px 12px;

    border: 1px solid #dfe5e8;

    border-radius: 10px;

    background: #fff;

    cursor: pointer;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}


.consult-type-option label:hover {

    border-color: #b7c6c9;
}


/* Вибраний формат */

.consult-type-option
input[type="radio"]:checked
+ label {

    border-color: #168b72;

    background: #f8fcfb;

    box-shadow:
        0 0 0 2px rgba(22, 139, 114, .10);
}


/* ==========================================================
   RADIO КРУГ
========================================================== */

.consult-type-radio {

    position: relative;

    display: block;

    width: 18px;
    height: 18px;

    min-width: 18px;

    margin-right: 10px;

    box-sizing: border-box;

    border: 2px solid #b8c2c5;

    border-radius: 50%;
}


.consult-type-option
input[type="radio"]:checked
+ label
.consult-type-radio {

    border-color: #168b72;
}


.consult-type-option
input[type="radio"]:checked
+ label
.consult-type-radio::after {

    content: "";

    position: absolute;

    top: 3px;
    left: 3px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #168b72;
}


/* ==========================================================
   ТЕКСТ ФОРМАТУ
========================================================== */

.consult-type-content {

    display: flex;

    flex-direction: column;

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

    min-width: 0;

    gap: 2px;
}


.consult-type-content strong {

    display: block;

    margin: 0;
    padding: 0;

    color: #222;

    font-size: 14px;
    line-height: 1.3;

    font-weight: 600;
}


.consult-type-content small {

    display: block;

    margin: 0;
    padding: 0;

    color: #168b72;

    font-size: 13px;
    line-height: 1.3;

    font-weight: 500;
}


.consult-type-content .consult-free {

    color: #168b72;

    font-weight: 700;

    text-transform: uppercase;
}


/* ==========================================================
   ОПИСАНИЕ ФАЙЛОВ
========================================================== */

.consult-file-note {

    display: block;

    margin-top: 8px;

    color: #666;

    line-height: 1.5;
}


/* ==========================================================
   МОБІЛЬНІ
========================================================== */

@media (max-width: 699px) {

    .consult-doctor-selection {
        margin-bottom: 20px;
    }


    .consult-doctor-selection h4,
    .consult-type h4 {

        font-size: 16px;

        margin-bottom: 10px;
    }


    /* Три лікарі залишаються в один ряд */

    .consult-doctors-list {

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

        gap: 5px;
    }


    .consult-doctor-card {

        min-height: 132px;

        padding: 8px 3px 7px;

        border-radius: 8px;
    }


    .consult-doctor-avatar {

        width: 52px !important;
        height: 52px !important;

        min-width: 52px !important;
        max-width: 52px !important;

        min-height: 52px !important;
        max-height: 52px !important;

        flex: 0 0 52px !important;

        margin-bottom: 6px !important;
    }


    .consult-doctor-content {

        padding: 0 2px;

        gap: 2px;
    }


    .consult-doctor-content strong {

        font-size: 11px;

        line-height: 1.25;
    }


    .consult-doctor-content span {

        display: none;
    }


    .consult-doctor-content a {

        margin-top: 3px;

        font-size: 10px;

        line-height: 1.25;
    }


    .consult-doctor-check {

        top: 5px;
        right: 5px;

        width: 16px;
        height: 16px;

        font-size: 9px;
        line-height: 16px;
    }


    /* Формат консультації */

    .consult-type {

        margin: 18px 0 20px;
    }


    .consult-type-list {

        grid-template-columns: 1fr;

        gap: 7px;
    }


    .consult-type-option label {

        min-height: 54px;

        padding: 9px 10px;

        border-radius: 8px;
    }


    .consult-type-radio {

        width: 17px;
        height: 17px;

        min-width: 17px;

        margin-right: 9px;
    }


    .consult-type-option
    input[type="radio"]:checked
    + label
    .consult-type-radio::after {

        top: 3px;
        left: 3px;

        width: 7px;
        height: 7px;
    }


    .consult-type-content strong {

        font-size: 13px;

        line-height: 1.3;
    }


    .consult-type-content small {

        font-size: 12px;
    }


    .consult-file-note {

        font-size: 13px;
    }

}


/* ==========================================================
   ДУЖЕ МАЛІ ЕКРАНИ
========================================================== */

@media (max-width: 380px) {

    .consult-doctors-list {

        gap: 4px;
    }


    .consult-doctor-card {

        min-height: 126px;

        padding: 7px 2px 6px;
    }


    .consult-doctor-avatar {

        width: 48px !important;
        height: 48px !important;

        min-width: 48px !important;
        max-width: 48px !important;

        min-height: 48px !important;
        max-height: 48px !important;

        flex-basis: 48px !important;
    }


    .consult-doctor-content strong {

        font-size: 10px;
    }


    .consult-doctor-content a {

        font-size: 9px;
    }


    .consult-doctor-check {

        top: 4px;
        right: 4px;
    }

}