/* =================================
   SERVICES PAGE — PREMIUM CLEAN v2
==================================== */

.services-page{
    font-family:'DM Sans',sans-serif;
    overflow:hidden;
}


/* =================================================
   GLOBAL REVEAL ANIMATION
================================================= */

.reveal{
    opacity:0;
    transform:translateY(60px);
    transition:all .9s cubic-bezier(.22,.61,.36,1);
    will-change:transform,opacity;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}



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

.services-hero{
    padding:150px 0 120px;
    background:linear-gradient(135deg,#f7f8ff,#eef1ff);
    text-align:center;
}

.services-title{
    font-size:48px;
    font-weight:300;
    margin-bottom:20px;
    color:#08103b;
}

.services-desc{
    max-width:720px;
    margin:auto;
    color:#666;
    font-size:17px;
    line-height:1.7;
}



/* =================================================
   CATEGORY GRID
================================================= */

.services-categories{
    padding:110px 0;
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:34px;
}


/* ---------- SERVICE CARD ---------- */

.service-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    border:1px solid #eee;

    text-decoration:none;
    color:inherit;

    display:flex;
    flex-direction:column;

    transition:.45s cubic-bezier(.22,.61,.36,1);
}


/* hover lift */

.service-card:hover{
    transform:translateY(-12px);
    box-shadow:0 25px 60px rgba(0,0,0,.12);
}


/* image */

.service-img{
    aspect-ratio:4/3;
    overflow:hidden;
}

.service-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s ease;
}

.service-card:hover img{
    transform:scale(1.12);
}


/* body */

.service-body{
    padding:28px;
    display:flex;
    flex-direction:column;
    height:100%;
}

.service-body h3{
    font-weight:600;
    margin-bottom:10px;
}

.service-body p{
    font-size:14px;
    color:#666;
    margin-bottom:14px;
    flex-grow:1;
}


/* treatments count */

.service-body span{
    font-size:13px;
    color:#0C1451;
    font-weight:600;
    transition:.3s;
}

.service-card:hover span{
    transform:translateX(6px);
}



/* =================================================
   FEATURED SECTION
================================================= */

.services-featured{
    padding:120px 0;
    background:#fafafa;
}


/* subtitle */

.services-subtitle{
    font-size:32px;
    font-weight:500;
    margin-bottom:8px;
}


/* GRID FIX (equal height) */

.featured-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:34px;
    align-items:stretch;
}


/* ---------- FEATURED CARD ---------- */

.featured-card{
    background:#fff;
    padding:40px 34px;
    border-radius:22px;
    border:1px solid #eee;

    display:flex;
    flex-direction:column;
    text-align:center;
    height:100%;

    transition:.4s;
}

.featured-card:hover{
    transform:translateY(-12px);
    box-shadow:0 25px 60px rgba(0,0,0,.1);
}

.featured-card small{
    font-size:11px;
    letter-spacing:1.5px;
    color:#999;
    text-transform:uppercase;
}

.featured-card h3{
    margin:12px 0;
    font-weight:600;
    font-size:20px;
}

.featured-card p{
    font-size:14px;
    color:#666;
    line-height:1.6;
    flex-grow:1;
}

.time{
    margin:20px 0;
    font-size:14px;
    font-weight:500;
    color:#333;
}



/* =================================================
   PREMIUM GOLD BUTTON
================================================= */

.btn-book{
    margin-top:auto;

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

    width:100%;
    padding:13px 24px;

    border-radius:36px;

    font-weight:600;
    font-size:14px;
    text-decoration:none;

    color:#3a2a18;

    background:linear-gradient(
            90deg,
            #ffd37a 0%,
            #ffb65a 45%,
            #8B5E3C 85%
    );

    transition:all .35s cubic-bezier(.22,.61,.36,1);
    position:relative;
    overflow:hidden;
}


/* hover effect */

.btn-book:hover{
    transform:translateY(-4px);

    background:linear-gradient(
            90deg,
            #ffe6a3 0%,
            #ffc97d 45%,
            #9a6a44 85%
    );

    box-shadow:0 14px 32px rgba(139,94,60,.35);
    color:#2b1b0d;
}


/* shine ripple */

.btn-book::after{
    content:"";
    position:absolute;
    width:0;
    height:0;
    border-radius:50%;
    background:rgba(255,255,255,.4);
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    transition:.6s;
}

.btn-book:hover::after{
    width:300px;
    height:300px;
}


.btn-large{
    width:auto;
    padding:15px 46px;
}



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

.services-cta{
    padding:130px 0;
    background:linear-gradient(135deg, #ffffff, #ffffff);
    color: #171616;
    text-align:center;
}

.services-cta h2{
    margin-bottom:14px;
}

.services-cta p{
    opacity:.9;
    margin-bottom:30px;
}



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

@media(max-width:992px){

    .services-grid,
    .featured-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .services-title{
        font-size:36px;
    }
}

@media(max-width:576px){

    .services-grid,
    .featured-grid{
        grid-template-columns:1fr;
    }

    .services-hero{
        padding:110px 0 90px;
    }

    .services-title{
        font-size:28px;
    }
}