/* ==========================================================
   STYLE.CSS
   Эстетика маникюра
========================================================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================
   ПЕРЕМЕННЫЕ
========================================================== */

:root{

    --accent:#C985B3;
    --accent-hover:#B66EA0;
    --gold:#D7B46A;

    --text:#2F2F35;
    --text-light:#666;

    --background:#FFFFFF;
    --background-soft:#FFF8FC;

    --border:#ECECEC;

    --radius:18px;
    --radius-large:28px;

    --shadow-sm:0 4px 12px rgba(0,0,0,.06);
    --shadow:0 12px 35px rgba(0,0,0,.08);
    --shadow-lg:0 20px 50px rgba(0,0,0,.12);

    --transition:.3s ease;

    --container:1280px;

}

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

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

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

    scroll-padding-top:85px;

}

body{

    min-width:320px;

    overflow-x:hidden;

    background:#fff;

    color:var(--text);

    font-family:'Inter',sans-serif;

    font-size:18px;

    line-height:1.7;

    -webkit-font-smoothing:antialiased;

}

/* ==========================================================
ТИПОГРАФИКА
========================================================== */

h1,
h2,
h3,
h4{

    font-weight:700;

    color:var(--text);

    line-height:1.2;

    letter-spacing:-.02em;

}

h1{

    font-size:clamp(2rem,5vw,3.6rem);

    margin-bottom:24px;

}

h2{

    font-size:clamp(1.8rem,4vw,2.6rem);

    margin-bottom:20px;

}

h3{

    font-size:1.3rem;

}

p{

    color:var(--text-light);

    margin-bottom:18px;

}

strong{

    color:var(--text);

}

a{

    color:inherit;

    text-decoration:none;

    transition:
        color .3s,
        transform .3s;

}

a:hover{

    color:var(--accent);

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

.container{

    width:min(var(--container),92%);

    margin:auto;

}

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

.site-header{

    position:relative;

    background:linear-gradient(
        180deg,
        #fff,
        #fff9fc
    );

}

.header-line{

    height:10px;

    background:linear-gradient(
        90deg,
        var(--accent),
        var(--gold)
    );

}

/* ==========================================================
ВЕРХНЯЯ ЧАСТЬ
========================================================== */

#header-kontakt{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    padding:28px 0;

    flex-wrap:wrap;

}

.hk{

    flex:1;

    min-width:250px;

}

/* ==========================================================
LOGO
========================================================== */

.logo{

    display:flex;

    flex-direction:column;

}

.logo a{

    font-size:2rem;

    font-weight:800;

    color:var(--accent);

    letter-spacing:-1px;

}

.logo a:hover{

    color:var(--accent-hover);

}

.logo span{

    margin-top:6px;

    color:#888;

    font-size:.95rem;

}

/* ==========================================================
АДРЕС
========================================================== */

.adress{

    text-align:center;

    font-style:normal;

}

.adress p{

    margin-bottom:8px;

}

.address-link{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:10px;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(201,133,179,.12);

    color:var(--accent);

    font-weight:600;

}

.address-link:hover{

    background:var(--accent);

    color:#fff;

}

/* ==========================================================
ТЕЛЕФОН
========================================================== */

.phone{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

}

.phone-link{

    font-size:1.45rem;

    font-weight:700;

    color:var(--text);

}

.phone-link:hover{

    color:var(--accent);

}

.phone small{

    color:#888;

    margin-top:4px;

}

/* ==========================================================
КНОПКИ
========================================================== */

.contact-buttons{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    flex-wrap:wrap;

}

.contact-buttons a{

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    transition:
        transform .25s,
        filter .25s;

}

.contact-buttons a:hover{

    transform:translateY(-4px);

    filter:drop-shadow(0 10px 20px rgba(0,0,0,.16));

}

.contact-buttons a:active{

    transform:scale(.96);

}

.contact-buttons img{

    display:block;

    height:48px;

    width:auto;

}

/* ==========================================================
МЕНЮ
========================================================== */

.main-nav{

    position:sticky;

    top:0;

    z-index:999;

    background:rgba(201,133,179,.95);

    backdrop-filter:blur(16px);

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

}

.main-nav ul{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    list-style:none;

}

.main-nav li{

    margin:0;

}

.main-nav a{

    display:block;

    padding:18px 20px;

    color:#fff;

    font-size:.82rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.05em;

    border-radius:10px;

}

.main-nav a:hover{

    color:#fff;

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

}
/* ==========================================================
HERO
========================================================== */

.hero-section{

    padding:90px 0;

    position:relative;

}

.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.hero-grid.reverse{

    direction:rtl;

}

.hero-grid.reverse>*{

    direction:ltr;

}

/* ==========================================================
ТЕКСТ
========================================================== */

.banner-text{

    animation:fadeUp .8s ease both;

}

.hero-label{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border-radius:999px;

    background:#FCECF5;

    color:var(--accent);

    font-weight:600;

    margin-bottom:28px;

}

.hero-description{

    margin:30px 0;

    font-size:1.08rem;

    line-height:1.9;

}

.hero-list{

    display:grid;

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

    gap:15px;

    margin:35px 0;

    list-style:none;

}

.hero-list li{

    display:flex;

    align-items:center;

    padding:16px 18px;

    background:#fff;

    border-radius:18px;

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

    font-weight:500;

}

.master-sign{

    margin-top:28px;

    color:#777;

    font-size:1.05rem;

}

/* ==========================================================
РЕЙТИНГ
========================================================== */

.hero-rating{

    display:flex;

    align-items:center;

    gap:12px;

    margin:30px 0;

    color:var(--gold);

    font-size:1.3rem;

    font-weight:700;

}

.hero-rating span{

    color:#666;

    font-size:1rem;

    font-weight:500;

}

/* ==========================================================
КНОПКИ HERO
========================================================== */

.hero-buttons{

    margin-top:30px;

}

/* ==========================================================
ФОТО
========================================================== */

.banner-img{

    animation:fadeUp .8s ease both;

}

.row-box{

    display:grid;

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

    gap:18px;

}

.box{

    overflow:hidden;

    border-radius:22px;

    background:#fff;

    box-shadow:var(--shadow);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.box:hover{

    transform:translateY(-8px);

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

}

.box img{

    width:100%;

    height:290px;

    object-fit:cover;

    transition:transform .45s ease;

}

.box:hover img{

    transform:scale(1.06);

}

/* ==========================================================
СТАТИСТИКА
========================================================== */

.stats-section{

    margin:-20px 0 80px;

    position:relative;

    z-index:5;

}

.stats-grid{

    display:grid;

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

    gap:24px;

}

.stat-card{

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

    backdrop-filter:blur(12px);

    border-radius:24px;

    padding:30px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}

.stat-card:hover{

    transform:translateY(-6px);

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

}

.stat-value{

    color:var(--accent);

    font-size:2rem;

    font-weight:800;

    margin-bottom:10px;

    line-height:1;

}

.stat-text{

    color:#666;

    font-size:.95rem;

    line-height:1.5;

}

/* ==========================================================
АНИМАЦИИ
========================================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-up{

    animation:fadeUp .8s ease both;

}

/* ==========================================================
IMG
========================================================== */

/* убрано глобальное img:hover */

.box img:hover{

    transform:scale(1.06);

}
/* ==========================================================
SECTION TITLE
========================================================== */

.section-title{

    text-align:center;

    max-width:760px;

    margin:0 auto 60px;

}

.section-title span{

    display:inline-block;

    color:var(--accent);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

    margin-bottom:18px;

}

.section-title h2{

    margin-bottom:18px;

}

.section-title p{

    color:var(--text-light);

}

/* ==========================================================
ПРЕИМУЩЕСТВА
========================================================== */

.advantages-section{

    padding:100px 0;

    background:#fff;

}

.advantages-grid{

    display:grid;

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

    gap:28px;

}

.adv-card{

    background:#fff;

    padding:36px;

    border-radius:26px;

    box-shadow:var(--shadow);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}

.adv-card:hover{

    transform:translateY(-8px);

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

}

.adv-icon{

    width:64px;

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--accent),
        #e2b3cf
    );

    color:#fff;

    font-size:28px;

    margin-bottom:22px;

}

.adv-card h3{

    margin-bottom:14px;

}

.adv-card p{

    margin:0;

}

/* ==========================================================
РЕЙТИНГ
========================================================== */

.rating-section{

    margin:70px 0;

}

.rating-card{

    background:#fff;

    padding:45px;

    text-align:center;

    border-radius:28px;

    box-shadow:var(--shadow);

}

.rating-stars{

    color:var(--gold);

    font-size:2rem;

    margin-bottom:12px;

}

/* ==========================================================
ОТЗЫВЫ
========================================================== */

.reviews{

    margin-top:70px;

}

.reviews-header{

    text-align:center;

    margin-bottom:40px;

}

.reviews-widget{

    overflow:hidden;

    border-radius:28px;

    box-shadow:var(--shadow);

    background:#fff;

}

.reviews-widget iframe{

    display:block;

    width:100%;

    height:560px;

    border:none;

}

.reviews-button{

    margin-top:35px;

    text-align:center;

}

.btn-review{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        var(--accent),
        #dca6c7
    );

    color:#fff;

    font-weight:600;

    transition:
        transform .3s,
        box-shadow .3s;

    box-shadow:0 12px 30px rgba(201,133,179,.25);

}

.btn-review:hover{

    color:#fff;

    transform:translateY(-4px);

    box-shadow:0 20px 40px rgba(201,133,179,.35);

}

/* ==========================================================
PORTFOLIO
========================================================== */

.portfolio-section{

    padding:100px 0;

    background:#fffafc;

}

.portfolio-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:24px;

}

.portfolio-grid a{

    display:block;

    overflow:hidden;

    border-radius:24px;

    background:#fff;

    box-shadow:var(--shadow);

    transition:
        transform .35s,
        box-shadow .35s;

}

.portfolio-grid a:hover{

    transform:translateY(-8px);

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

}

.portfolio-grid img{

    width:100%;

    height:340px;

    object-fit:cover;

    transition:transform .45s ease;

}

.portfolio-grid a:hover img{

    transform:scale(1.08);

}

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

.portfolio-cta{

    margin-top:80px;

    padding:50px;

    text-align:center;

    background:#fff;

    border-radius:30px;

    box-shadow:var(--shadow);

}

.portfolio-cta h3{

    margin-bottom:15px;

    font-size:2rem;

}

.portfolio-cta p{

    margin-bottom:30px;

}

/* ==========================================================
АНИМАЦИЯ
========================================================== */

.adv-card,
.rating-card,
.reviews-widget,
.portfolio-grid a{

    animation:fadeUp .8s ease both;

}

.portfolio-grid a:nth-child(2){

    animation-delay:.05s;

}

.portfolio-grid a:nth-child(3){

    animation-delay:.1s;

}

.portfolio-grid a:nth-child(4){

    animation-delay:.15s;

}

.portfolio-grid a:nth-child(5){

    animation-delay:.2s;

}

.portfolio-grid a:nth-child(6){

    animation-delay:.25s;

}
/* ==========================================================
КОНТАКТЫ
========================================================== */

.contacts-section{

    padding:110px 0;

    background:#fff;

}

.contacts-grid{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:40px;

    align-items:stretch;

}

.contacts-card{

    display:flex;

    flex-direction:column;

    gap:28px;

    padding:40px;

    background:#fff;

    border-radius:30px;

    box-shadow:var(--shadow);

}

.contact-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

}

.contact-icon{

    width:58px;

    height:58px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--accent),
        #e4b0cf
    );

    color:#fff;

    font-size:24px;

}

.contact-item h3{

    margin-bottom:8px;

}

.contact-item p{

    margin:0;

}

.contact-item a{

    font-weight:600;

}

.map-card{

    overflow:hidden;

    border-radius:30px;

    box-shadow:var(--shadow);

    background:#fff;

}

.map-card iframe{

    display:block;

    width:100%;

    min-height:520px;

    border:0;

}

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

.site-footer{

    margin-top:90px;

    padding:80px 0 30px;

    background:#2c2830;

    color:#ddd;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1.3fr;

    gap:45px;

}

.footer-column h3,
.footer-column h4{

    color:#fff;

    margin-bottom:20px;

}

.footer-column p{

    margin-bottom:12px;

    color:#bdbdbd;

}

.footer-column ul{

    list-style:none;

}

.footer-column li{

    margin-bottom:10px;

}

.footer-column a{

    color:#ddd;

}

.footer-column a:hover{

    color:#fff;

}

.footer-line{

    margin:50px 0 30px;

    border:none;

    height:1px;

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

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

    font-size:.9rem;

    color:#aaa;

}

/* ==========================================================
COOKIE
========================================================== */

#cookie_note{

    position:fixed;

    left:50%;

    bottom:24px;

    transform:translateX(-50%);

    width:min(900px,94%);

    display:none;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:24px;

    background:#fff;

    border-radius:24px;

    box-shadow:0 20px 60px rgba(0,0,0,.18);

    z-index:9999;

}

#cookie_note.show{

    display:flex;

    animation:fadeUp .45s ease;

}

#cookie_note p{

    margin:0;

    font-size:.92rem;

}

.cookie_accept{

    border:none;

    border-radius:999px;

    padding:14px 30px;

    background:var(--accent);

    color:#fff;

    cursor:pointer;

    transition:background .3s;

}

.cookie_accept:hover{

    background:var(--accent-hover);

}

/* ==========================================================
ОБЩИЕ
========================================================== */

::selection{

    background:rgba(201,133,179,.25);

}

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--accent);

    border-radius:100px;

}

::-webkit-scrollbar-track{

    background:#f4f4f4;

}

.hero-section,
.adv-card,
.rating-card,
.contacts-card,
.map-card,
.site-footer{

    animation:fadeUp .7s ease both;

}

/* ==========================================================
АДАПТИВ
========================================================== */

@media (max-width:1100px){

.hero-grid{

    grid-template-columns:1fr;

}

.hero-grid.reverse{

    direction:ltr;

}

.contacts-grid{

    grid-template-columns:1fr;

}

.footer-grid{

    grid-template-columns:1fr 1fr;

}

.stats-grid{

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

}

}

@media (max-width:768px){

body{

    font-size:16px;

}

#header-kontakt{

    justify-content:center;

    text-align:center;

}

.logo,
.adress,
.phone,
.tel{

    width:100%;

}

.phone{

    align-items:center;

}

.main-nav ul{

    flex-wrap:wrap;

    gap:6px;

    padding:10px 0;

}

.main-nav a{

    padding:12px 14px;

    font-size:.75rem;

}

.hero-list{

    grid-template-columns:1fr;

}

.row-box{

    grid-template-columns:1fr 1fr;

}

.box img{

    height:220px;

}

.portfolio-grid{

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

}

.portfolio-grid img{

    height:220px;

}

#cookie_note{

    flex-direction:column;

    text-align:center;

}

}

@media (max-width:480px){

.hero-grid{

    gap:40px;

}

.row-box{

    grid-template-columns:1fr;

}

.box img{

    height:240px;

}

.stats-grid{

    grid-template-columns:1fr;

}

.advantages-grid{

    grid-template-columns:1fr;

}

.portfolio-grid{

    grid-template-columns:1fr;

}

.contacts-card{

    padding:24px;

}

.contact-item{

    flex-direction:column;

}

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-bottom{

    justify-content:center;

    text-align:center;

}

.contact-buttons{

    justify-content:center;

}

}

/* ==========================================================
   CRO — ПЕРВЫЙ ЭКРАН / 2026-08-17
========================================================== */

.mobile-nav-wrap{display:none;}

.hero-price-box{
    display:flex;align-items:center;justify-content:space-between;gap:18px;
    margin:24px 0 18px;padding:18px 20px;
    border:1px solid rgba(201,133,179,.22);border-radius:20px;
    background:linear-gradient(135deg,#fff,#fff7fb);box-shadow:var(--shadow-sm);
}
.hero-price-copy{display:flex;flex-direction:column;gap:3px;}
.hero-price-title{color:#666;font-size:.9rem;}
.hero-price-value{font-size:1.18rem;color:var(--text);}
.hero-price-link{
    flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
    padding:11px 16px;border-radius:999px;background:#FCECF5;
    color:var(--accent);font-size:.88rem;font-weight:700;
}
.hero-price-link:hover{background:var(--accent);color:#fff;}
.hero-list-compact{margin:24px 0 14px;}
.hero-guarantee-note{margin:0 0 24px;font-size:.84rem;line-height:1.55;color:#777;}
.hero-primary-actions{margin-top:22px;}
.hero-book-primary{
    display:flex;width:100%;min-height:58px;align-items:center;justify-content:center;
    padding:15px 24px;border-radius:16px;
    background:linear-gradient(135deg,var(--accent),var(--accent-hover));
    color:#fff;font-size:1.06rem;font-weight:800;
    box-shadow:0 14px 32px rgba(201,133,179,.28);
}
.hero-book-primary:hover{
    color:#fff;transform:translateY(-2px);
    box-shadow:0 18px 38px rgba(201,133,179,.35);
}
.hero-secondary-actions{display:flex;justify-content:center;gap:12px;margin-top:12px;}
.hero-secondary-actions a{
    display:inline-flex;min-width:110px;align-items:center;justify-content:center;
    padding:10px 16px;border:1px solid var(--border);border-radius:999px;
    background:#fff;color:#666;font-size:.88rem;font-weight:600;
}
.hero-secondary-actions a:hover{border-color:var(--accent);color:var(--accent);}
.hero-rating-verified{margin:24px 0 0;font-size:1rem;}
.hero-rating-stars{color:var(--gold);letter-spacing:.05em;}

@media (max-width:768px){
    #header-kontakt{padding:14px 0;}
    #header-kontakt .adress,
    #header-kontakt .phone,
    #header-kontakt .tel{display:none;}
    #header-kontakt .logo{
        min-width:0;width:100%;text-align:left;align-items:flex-start;
    }
    .logo a{font-size:1.45rem;}
    .logo span{font-size:.82rem;}

    .desktop-nav{display:none;}
    .mobile-nav-wrap{
        display:block;position:sticky;top:0;z-index:999;
        background:rgba(201,133,179,.97);backdrop-filter:blur(16px);
        box-shadow:0 8px 22px rgba(0,0,0,.08);
    }
    .mobile-nav summary{
        list-style:none;min-height:54px;display:flex;align-items:center;
        justify-content:space-between;color:#fff;font-weight:700;
        text-transform:uppercase;letter-spacing:.05em;cursor:pointer;
    }
    .mobile-nav summary::-webkit-details-marker{display:none;}
    .mobile-nav-icon{font-size:1.3rem;}
    .mobile-nav-links{
        display:grid;grid-template-columns:repeat(2,1fr);
        gap:6px;padding:0 0 12px;
    }
    .mobile-nav-links a{
        padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.1);
        color:#fff;text-align:center;font-size:.8rem;font-weight:600;
    }

    .hero-section{padding:42px 0 62px;}
    .hero-grid{gap:34px;}
    .hero-label{margin-bottom:18px;padding:8px 14px;font-size:.86rem;}
    .banner-text h1{margin-bottom:16px;font-size:clamp(2rem,10vw,2.75rem);}
    .hero-description{margin:18px 0;font-size:1rem;line-height:1.65;}
    .hero-price-box{
        align-items:flex-start;flex-direction:column;gap:12px;
        margin:18px 0;padding:16px;
    }
    .hero-price-link{width:100%;}
    .hero-list-compact{gap:10px;margin:18px 0 12px;}
    .hero-list-compact li{padding:13px 15px;border-radius:14px;}
    .hero-book-primary{min-height:56px;}
    .hero-rating-verified{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
    .banner-img{margin-top:4px;}
}