:root{
    --blue:#0d5e8c;
    --blue-light:#2b8fc7;
    --text:#1c2b3a;
    --gray:#6b7a8c;
    --line:#d8e2ec;
    --pink:#f3f4fa;
    --radius:10px;
}
/* ---------- HERO ---------- */
.hero{
    padding:40px 0 80px;
}
.hero__inner{
    display:flex;
    flex-wrap:wrap;
    gap:40px;
    align-items:flex-start;
    height: 680px;
}
.hero__left{
    flex:1 1 700px;
    min-width:0;
    position: relative;
    z-index: 9;
}
.hero__right{
    flex:1 1 420px;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    position:relative;
    height: 100%;
}

.hero__city{
    font-size:20px;
    color:var(--gray);
    margin-bottom:12px;
}
.hero__title{
    font-size:42px;
    line-height:1.15;
    font-weight:700;
    color: rgb(40, 66, 150);
    margin-bottom:28px;
}

/* chips */
.chips{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:28px;
    max-width: 600px;
}
.chip{
    border:1.5px solid var(--blue-light);
    color:var(--text);
    font-size:16px;
    padding:12px 22px;
    border-radius:999px;
    white-space:nowrap;
}

.hero__desc{
    font-size:16px;
    color:var(--text);
    max-width:560px;
    margin-bottom:32px;
}

/* CTA box */
.cta-box{
    background:var(--pink);
    border-radius:var(--radius);
    padding:28px 30px;
    max-width:650px;
}
.cta-box p{
    font-size:18px;
    margin-bottom:20px;
    max-width:460px;
}
.cta-box p b{font-weight:700;}
.cta-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}
.btn{
    display:inline-block;
    font-size:16px;
    font-weight:600;
    padding:16px 28px;
    border-radius:10px;
    text-decoration:none;
    cursor:pointer;
    border:none;
    transition:.2s;
}
.btn--primary{
    background:var(--blue-light);
    color:#fff;
}
.btn--primary:hover{background:var(--blue);}
.btn--outline{
    background:#fff;
    color:var(--blue);
    border:1.5px solid var(--blue-light);
}
.btn--outline:hover{background:#eef6fb;}

/* doctor image + badge */
.doctor{
    width:100%;
    max-width:440px;
}
.doctor > img{
    display:block;
    border-radius:6px;
    right: -45px;
    position: absolute;
    top: 0;
}
.doctor__badge{
    position:absolute;
    left:-20px;
    bottom:40px;
    background:#fff;
    border-radius:12px;
    padding:18px 22px 18px 22px;
    box-shadow:0 10px 30px rgba(13,94,140,.12);
    width: 425px;
    height: 155px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.doctor__badge h3{
    font-size:17px;
    color:var(--blue);
    margin-bottom:0px;
    margin-top: 0px;
}
.doctor__badge p{
    font-size:15px;
    color:var(--text);
    line-height:1.35;
    margin-bottom: 0px;
}
.doctor__medal{
    position:absolute;
    right: 20px;
    top: 0px;
}
.cta-actions #quiz_button:hover{
    color:white;
}
.cta-actions .btn--outline:hover{
    color:#0d5e8c;
}
/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
    .hero__title{font-size:34px;}
    .header__contacts{margin-left:0;}
}
@media (max-width:1100px){
    .header__inner{gap:16px;}
    .header__divider,.header__tagline{display:none;}
    .header__contacts{align-items:flex-start;}
    .header__btn{padding:14px 24px;font-size:15px;}
    .hero{padding:20px 0 50px;}
    .hero__title{font-size:28px;}
    .hero__title br{display: none;}
    .service-panel__title br{
        display: none;
    }
    .service-panel__title {
        text-align: left;
    }
    .hero__city{font-size:17px;}
    .chip{font-size:14px;padding:10px 16px;}
    .cta-box{padding:22px;}
    .cta-box p{font-size:16px;}
    .btn{font-size:13px;margin: 0 auto;}
    .doctor__badge{left:0;bottom:20px;max-width:100%;width: 100%;}
    .doctor__medal{right:0;top: -5px;width:56px;height:56px;font-size:24px;}
    .hero__inner {
        height: auto;
        gap: 10px;
    }
    .doctor > img {
        display: block;
        border-radius: 6px;
        right: 100px;
        position: relative;
        top: auto;
        max-width: 460px;
    }
    .hero__right {
        overflow: hidden;
        padding-bottom: 180px;
    }
}
@media (min-width:700px) and (max-width:1200px){
    .doctor__badge {
        max-width: 600px;
    }
    .doctor__medal {
        right: 55px;
    }
}
:root{
    --blue:#0d5e8c;
    --blue-light:#2b8fc7;
    --text:#1c2b3a;
    --gray:#6b7a8c;
    --line:#d8e2ec;
    --pink:#f3f4fa;
    --error:#e23b3b;
    --radius:10px;
}

*{box-sizing:border-box;margin:0;padding:0;}

 


/* ---------- Overlay ---------- */
.quiz-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,35,55,.55);
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:9999;
}
.quiz-overlay.is-open{display:flex;}

/* ---------- Modal ---------- */
.quiz{
    background:#fff;
    border-radius:16px;
    width:100%;
    max-width:960px;
    max-height:92vh;
    display:flex;
    overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.25);
}

/* Sidebar */
.quiz__aside{
    flex:0 0 260px;
    background:var(--pink);
    padding:28px 22px;
    display:flex;
    flex-direction:column;
    gap:14px;
}
.quiz__aside img{
    width:90px;height:90px;
    border-radius:8px;
    object-fit:cover;
    display:block;
}
.quiz__aside h3{
    font-size:16px;
    line-height:1.25;
    margin-bottom: 10px;
    margin-top: 10px;
}
.quiz__aside .role{
    font-size:14px;
    color:var(--blue-light);
}
.quiz__aside .rank{
    font-size:13px;
    color:var(--gray);
}
.quiz__aside .promo{
    margin-top:auto;
    font-size:15px;
}
.quiz__aside .promo b{
    color:var(--blue);
    font-weight:700;
}

/* Main */
.quiz__main{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    padding:28px 32px 20px;
    min-width:0;
    position:relative;
}

.quiz__close{
    position:absolute;
    top:14px;right:16px;
    width:32px;height:32px;
    border:none;
    background:transparent;
    cursor:pointer;
    font-size:22px;
    color:var(--gray);
    line-height:1;
    border-radius:8px;
}
.quiz__close:hover{background:#eef3f8;color:var(--text);}

.quiz__progress{
    font-size:14px;
    color:var(--gray);
    margin-bottom:6px;
}

.quiz__step{display:none;flex:1 1 auto;}
.quiz__step.is-active{display:flex;flex-direction:column;}

.quiz__question{
    font-size:22px;
    line-height:1.3;
    margin:6px 0 20px;
    font-weight:600;
}

/* ---------- Options ---------- */
.quiz__options{
    display:flex;
    flex-wrap:wrap;
    gap:12px 28px;
    border:1.5px solid var(--line);
    border-radius:var(--radius);
    padding:16px 20px;
    transition:.15s;
}
.quiz__options.is-error{border-color:var(--error);}

.quiz__option{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    font-size:16px;
    user-select:none;
}
.quiz__option input{display:none;}

.quiz__radio{
    width:20px;height:20px;
    border:2px solid var(--blue-light);
    border-radius:50%;
    display:inline-block;
    position:relative;
    flex:0 0 auto;
    transition:.15s;
}
.quiz__option input:checked + .quiz__radio{
    border-color:var(--blue-light);
}
.quiz__option input:checked + .quiz__radio::after{
    content:"";
    position:absolute;
    inset:3px;
    border-radius:50%;
    background:var(--blue-light);
}

.quiz__error{
    color:var(--error);
    font-size:14px;
    margin-top:10px;
    display:none;
}
.quiz__error.is-visible{display:block;}

/* ---------- Phone step ---------- */
.quiz__step--phone .quiz__hint{
    font-size:16px;
    color:var(--text);
    margin-bottom:18px;
    max-width:640px;
}
.quiz__step--phone .quiz__hint b{font-weight:700;}

.phone-field{
    display:flex;
    align-items:center;
    gap:10px;
    border:1.5px solid var(--blue-light);
    border-radius:var(--radius);
    padding:12px 16px;
    max-width:520px;
    margin-bottom:18px;
}
.phone-field .flag{
    display:flex;align-items:center;gap:6px;
    font-size:15px;color:var(--text);
    padding-right:8px;
    border-right:1px solid var(--line);
}
.phone-field input{
    border:none;
    outline:none;
    font-size:16px;
    flex:1 1 auto;
    background:transparent;
    font-family:inherit;
    color:var(--text);
}

.consents{display:flex;flex-direction:column;gap:14px;margin-bottom:8px;}
.consent{
    display:flex;
    align-items:flex-start;
    gap:12px;
    font-size:15px;
    cursor:pointer;
    user-select:none;
    max-width:640px;
}
.consent input{display:none;}
.consent .box{
    width:20px;height:20px;
    border:2px solid var(--blue-light);
    border-radius:4px;
    flex:0 0 auto;
    margin-top:2px;
    position:relative;
    transition:.15s;
}
.consent input:checked + .box::after{
    content:"✓";
    position:absolute;
    inset:0;
    display:flex;align-items:center;justify-content:center;
    color:var(--blue-light);
    font-size:14px;
    font-weight:700;
}
.consent a{color:var(--text);}

/* ---------- Footer nav ---------- */
.quiz__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding-top:24px;
    margin-top:auto;
}
.quiz__counter{font-size:14px;color:var(--gray);}
.quiz__nav{display:flex;gap:12px;}

.nav-btn{
    width:52px;height:52px;
    border-radius:8px;
    border:1.5px solid var(--blue-light);
    background:#fff;
    color:var(--blue-light);
    cursor:pointer;
    font-size:20px;
    display:flex;align-items:center;justify-content:center;
    transition:.15s;
}
.nav-btn:hover{background:#eef6fb;}
.nav-btn[disabled]{opacity:.35;cursor:not-allowed;}

.nav-btn--submit{
    width:auto;
    padding:0 28px;
    background:var(--blue-light);
    color:#fff;
    font-weight:600;
    font-size:16px;
    gap:8px;
}
.nav-btn--submit:hover{background:var(--blue);}

/* ---------- Mobile ---------- */
@media (max-width:768px){
    .quiz{
        flex-direction:column;
        max-height:96vh;
        overflow-y:auto;
    }
    .quiz__aside{
        flex:0 0 auto;
        flex-direction:row;
        align-items:center;
        padding:16px;
        gap:12px;
    }
    .quiz__aside .rank,
    .quiz__aside .promo{display:none;}
    .quiz__main{padding:20px 18px 16px;}
    .quiz__question{font-size:18px;}
    .quiz__options{gap:10px 18px;padding:14px;}
    .quiz__option{font-size:15px;}
    .quiz__footer{padding-top:18px;}
    .nav-btn{width:46px;height:46px;}
    .nav-btn--submit{padding:0 18px;font-size:15px;}
}
.text_and_slider{
    margin-top:40px;
}
.text_and_slider h2{
font-size: 38px;
    max-width: 770px;
    color: rgb(40, 66, 150);
}
.text_and_slider .text_grey{
    color:#6e6e6e;
}
.text_and_slider .slider_block{
    display: flex;
    flex-wrap: wrap;
    gap:60px;
}
.text_and_slider .text{
    max-width: 570px;
    font-size: 18px;
}
.text_and_slider .slider{
    max-width: 520px;
    position: relative;
    height: max-content;
}
.text_and_slider .slider .sertificate img{
    max-width: 100%;
}
.text_and_slider .slider .buttons .arrow_left {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    left: 5px;
}
.text_and_slider .slider .buttons div{
    background-color: rgb(232, 232, 232);
    border-radius: 50%;
    width:30px;
    height: 30px;
    position: absolute;
    top: 50%;
    margin-top: -15px;
    cursor: pointer;
    z-index: 9;
}
.text_and_slider .slider .buttons .arrow_right{
    right: 5px;
}
.text_and_slider .slider .buttons div svg {
    height: 100%;
    width: 100%;
}
.specialists_main{
    margin-top: 60px;
}
.perm_podp{
    font-size: 20px;
}
.perm_podp b{
    color: rgb(40, 66, 150);
}
@media (max-width:768px) {
    .text_and_slider .slider {
        max-width: 100%;
    }
}