:root{
    --black:#0F0F12;
    --dark:#1A1A1F;
    --gold:#C6A75E;
    --gold-soft:#9f8448;
    --text:#EAEAEA;
    --muted:#9C9C9C;
}

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

body{
    font-family:'Manrope',sans-serif;
    background:var(--black);
    color:var(--text);
    line-height:1.7;
    scroll-behavior:smooth;
    
}

section{
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:120px 0;
    
}

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

/* ===== ЗАГОЛОВКИ РАЗДЕЛОВ ===== */

.section-title,
.contact h2{
    font-size:48px;
    text-align:center;
    margin-bottom:90px;
    text-transform:uppercase;
    letter-spacing:4px;
    font-weight:600;
}

.faq-block {
    margin-top: 40px;
}

.faq-item {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.faq-item strong {
    display: block;
    margin-bottom: 5px;
}

/* HERO */

.hero{
    background:
    linear-gradient(rgba(0,0,0,.5), rgb(26 26 31)),
    url("https://krdmassage.ru/bl-themes/aura/img/hero.jpeg") center/cover no-repeat;
}

.hero-content{max-width:650px;}

.hero h1{
    font-size:58px;
    margin-bottom:25px;
    letter-spacing:-1px;
    text-transform:uppercase;

}

.hero p{
    font-size:18px;
    margin-bottom:40px;
    color:var(--muted);
}

.btn{
    display:inline-block;
    padding:16px 40px;
    border-radius:50px;
    text-decoration:none;
    font-weight:500;
    transition:.4s ease;
}

.btn-primary{
    background:var(--gold);
    color:#000;
}

.btn-primary:hover{
    background:var(--gold-soft);
    transform:translateY(-3px);
}

/* ===== ВИДЫ МАССАЖА ===== */

.services{
    background:var(--dark);
}

.services.c2 p { 
    max-width: 760px;
    margin: 0 auto 90px;
    line-height: 1.8;
    text-align:center;
}

.price-list{
    max-width:900px;
    margin:0 auto;
}

.price-item{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    padding:35px 0;
    text-decoration:none;
    color:inherit;
    transition:.4s ease;
}

.price-item::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    height:1px;
    width:0%;
    background:var(--gold);
    transition:.6s ease;
}

.price-item:hover::after{
    width:100%;
}

.price-item:hover{
    transform:translateX(12px);
    text-shadow:0 0 8px rgba(198,167,94,.3);
}

.price-left h3{
    font-size:22px;
    margin-bottom:8px;
}

.price-left p{
    color:var(--muted);
    font-weight:300;
}

.price-right{
    text-align:right;
}

.price-right span{
    font-size:24px;
    color:var(--gold);
    font-weight:600;
    display:block;
}

.price-right small{
    font-size:14px;
    color:var(--muted);
}

/* DESCRIPTION + INFO */

.details{
    background:var(--dark);
    flex-direction:column;
}

.details-wrapper{
    width: 80%;
    margin: auto;
    display:grid;
    grid-template-columns:1fr;
    gap:80px;
    align-items:start;
}

/* LEFT DESCRIPTION */

.description-text{
    font-size:20px;
    color:var(--muted);
}

.description-text p{
    margin-bottom:25px;
}
/* RIGHT INFO BLOCK */

.info-box{
    border:1px solid rgba(255,255,255,0.05);
    padding:50px;
    border-radius:25px;
    transition:.4s ease;
    background:rgba(255,255,255,0.02);
    display: grid;
    grid-template-columns: 1.0fr 1.0fr 1.0fr;
    margin-bottom: 90px;
    text-align:center;

}

.info-box:hover{
    border-color:var(--gold);
    transform:translateY(-8px);
}

.info-item{
    margin-bottom:40px;
}

.info-item:last-child{
    margin-bottom:0;
}

.info-item span{
    display:block;
    font-size:28px;
    color:var(--gold);
    font-weight:600;
    margin-bottom:8px;
}

.info-item p{
    color:var(--muted);
    text-transform: lowercase;
}


/* ===== CONTACT ===== */

.contact{
    background:var(--dark);
    text-align:center;
}

.contact form{
    max-width:500px;
    margin:0 auto;
}

input,select{
    width:100%;
    padding:16px;
    margin-bottom:15px;
    border:none;
    border-radius:12px;
    background:#222;
    color:#fff;
    font-family:'Manrope',sans-serif;
}

footer{
    background:#000;
    color:#666;
    text-align:center;
    padding:30px 0;
}


.faq{
  margin:auto;

  display:grid;
  gap:24px;

  padding:40px 20px;
}

.faq div{
  width:80%;
  margin:auto;
  padding:32px;
}

.faq h3{
  color:var(--gold-soft);
  margin:0 0 16px;
  font-size:28px;
  line-height:1.4;
}

.faq p{
  color:var(--text);
  margin:0;
  line-height:1.8;
  font-size:17px;
}

@media (max-width:768px){

  .faq{
    padding:20px 16px;
  }

  .faq div{
    width: 100%;
    padding:24px;
    border-radius:18px;
  }

  .faq h3{
    font-size:22px;
  }

  .faq p{
    font-size:15px;
  }

}

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

@media(max-width:900px){

.hero h1{font-size:36px;}
.info-box,
.details-wrapper{
    grid-template-columns:1fr;
    gap:50px;
}

.section-title,
.contact h2{
    font-size:28px;
    letter-spacing:3px;
}


.price-item{
    flex-direction:column;
    gap:15px;
}

.price-right{
    text-align:left;
}

}

@media(max-width:450px){
    

.hero h1{font-size:28px;}

.section-title,
.contact h2{
    font-size:22px;
    letter-spacing:3px;
}

}
/*Меню*/
/* Общие сбросы */
        .nav-wrapper {
            position: fixed;
            width: 100%;
            z-index: 1000;
            display: flex;
            pointer-events: none; /* Чтобы клики проходили сквозь пустые области */
        }

        .menu-links, .social-icons, .mobile-toggle {
            pointer-events: auto; /* Возвращаем кликабельность элементам */
        }

        .menu-links {
            list-style: none;
            margin: 0 auto;
            padding: 0;
            display: flex;
            gap: 15px;
        }

        .menu-item {
            background: white;
            padding: 12px 25px;
            border-radius: 50px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            text-decoration: none;
            color: #333;
            font-weight: 600;
            font-size: 14px;
            transition: transform 0.2s;
        }

        .menu-item:hover {
            transform: translateY(-2px);
        }

        .social-icons {
            display: flex;
            gap: 10px;
            padding-right: 20px;
        }

        .social-circle {
            width: 45px;
            height: 45px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: #333;
            font-weight: bold;
            font-size: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        /* ДЕСТОП (Сверху) */
        @media (min-width: 769px) {
            .nav-wrapper {
                top: 20px;
                align-items: center;
            }
            .mobile-toggle, #menu-checkbox {
                display: none;
            }
        }

        /* МОБИЛЬНАЯ (Снизу) */
        @media (max-width: 768px) {
            .nav-wrapper {
                bottom: 20px;
                flex-direction: column;
                align-items: center;
            }

            .social-icons {
                display: none; /* Скрываем соцсети по условию */
            }

            .menu-links {
                flex-direction: column;
                margin-bottom: 10px;
                display: none; /* Скрыто до нажатия */
                width: 200px;
            }

            .menu-item {
                text-align: center;
                display: block;
            }

            .mobile-toggle {
                display: block;
                background: #333;
                color: white;
                padding: 15px 40px;
                border-radius: 50px;
                cursor: pointer;
                box-shadow: 0 4px 20px rgba(0,0,0,0.2);
                font-weight: bold;
            }

            #menu-checkbox {
                display: none;
            }

            /* Показываем список при клике */
            #menu-checkbox:checked ~ .menu-links {
                display: flex;
            }
        }