/* =====================================================
   HAIR PREMIUM v2
   PAGE LAB
   STYLE.CSS
===================================================== */


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

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

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

}


html{

    scroll-behavior:smooth;

}


body{

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

    background:#F8F7F4;

    color:#111;

    overflow-x:hidden;

}


img{

    width:100%;

    display:block;

}


a{

    text-decoration:none;

    color:inherit;

}


button{

    cursor:pointer;

}



/* =========================
   VARIABLES
========================= */


:root{


    --bg:#F8F7F4;

    --white:#ffffff;

    --black:#111111;

    --gray:#6B7280;

    --accent:#B08D57;

    --border:#e8e8e8;


    --container:1280px;


    --transition:.35s ease;


}





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


.container{


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

    margin:auto;


}





/* =========================
   SECTIONS
========================= */


section{


    padding:120px 0;


}





/* =========================
   LOADER
========================= */


#loader{


    position:fixed;

    inset:0;

    background:var(--bg);

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:9999;


    transition:.8s ease;


}



#loader.hide{


    opacity:0;

    visibility:hidden;


}



.loader-logo{


    font-family:"Playfair Display",serif;

    font-size:42px;

    letter-spacing:5px;

    animation:pulse 1.5s infinite;


}





/* =========================
   TITLES
========================= */


.section-subtitle{


    display:block;

    color:var(--accent);

    font-size:14px;

    letter-spacing:3px;

    font-weight:600;

    margin-bottom:20px;


}



.section-title{


    font-family:"Playfair Display",serif;

    font-size:clamp(38px,5vw,58px);

    line-height:1.15;

    margin-bottom:25px;


}



.section-text{


    color:var(--gray);

    font-size:18px;

    max-width:650px;


}





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


.btn{


    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:16px 35px;


    border-radius:50px;


    font-weight:600;


    transition:var(--transition);


}



.btn-primary{


    background:var(--black);

    color:white;


}



.btn-primary:hover{


    background:var(--accent);

    transform:translateY(-4px);


}



.btn-secondary{


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

    background:white;


}



.btn-secondary:hover{


    border-color:var(--accent);

    color:var(--accent);


}


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


header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    padding:30px 0;

    transition:.35s ease;


}



header.scrolled{


    background:rgba(248,247,244,.92);

    backdrop-filter:blur(15px);

    padding:18px 0;

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


}




header .container{


    display:flex;

    align-items:center;

    justify-content:space-between;


}




.logo{


    font-family:"Playfair Display",serif;

    font-size:30px;

    font-weight:700;

    letter-spacing:3px;


}




nav{


    display:flex;

    gap:35px;

    align-items:center;


}



nav a{


    font-size:15px;

    font-weight:500;

    position:relative;

    transition:.3s;


}



nav a::after{


    content:"";

    position:absolute;

    bottom:-8px;

    left:0;

    height:2px;

    width:0;

    background:var(--accent);

    transition:.3s;


}



nav a:hover{


    color:var(--accent);


}



nav a:hover::after{


    width:100%;


}





.header-right{


    display:flex;

    align-items:center;

    gap:25px;


}



.phone{


    display:flex;

    gap:10px;

    align-items:center;

    font-weight:600;


}



.phone i{


    color:var(--accent);


}



/* MENU BUTTON */


.menu-btn{


    display:none;

    background:none;

    border:0;

    width:35px;

    height:25px;

    position:relative;


}



.menu-btn span{


    position:absolute;

    left:0;

    width:100%;

    height:2px;

    background:#111;

    transition:.3s;


}


.menu-btn span:nth-child(1){

    top:0;

}


.menu-btn span:nth-child(2){

    top:11px;

}


.menu-btn span:nth-child(3){

    bottom:0;

}





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


.hero{


    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:120px;


}



.hero-container{


    display:grid;

    grid-template-columns: .9fr 1.1fr;

    align-items:center;

    gap:80px;


}





.hero-content{


    animation:fadeUp .8s ease forwards;


}



.hero-subtitle{


    display:block;

    color:var(--accent);

    font-size:14px;

    letter-spacing:4px;

    font-weight:600;

    margin-bottom:25px;


}




.hero h1{


    font-family:"Playfair Display",serif;

    font-size:clamp(48px,6vw,78px);

    line-height:1.05;

    margin-bottom:30px;


}





.hero p{


    color:var(--gray);

    font-size:18px;

    max-width:520px;

    margin-bottom:40px;


}





.hero-buttons{


    display:flex;

    gap:20px;

    flex-wrap:wrap;


}





.hero-image{


    position:relative;


}



.hero-image img{


    height:720px;

    object-fit:cover;

    border-radius:25px;


    box-shadow:

    0 30px 80px rgba(0,0,0,.15);


}




.hero-image::after{


    content:"";

    position:absolute;

    inset:20px;

    border:1px solid rgba(255,255,255,.5);

    border-radius:25px;

    pointer-events:none;


}






/* SCROLL ICON */


.scroll-down{


    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);


}



.scroll-down span{


    display:block;

    width:25px;

    height:40px;

    border:2px solid #111;

    border-radius:20px;

    position:relative;


}



.scroll-down span::before{


    content:"";

    position:absolute;

    width:5px;

    height:8px;

    background:#111;

    border-radius:5px;

    top:8px;

    left:50%;

    transform:translateX(-50%);

    animation:scroll 1.5s infinite;


}


/* =====================================================
   ABOUT
===================================================== */


.about-container{


    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:90px;


}



.about-image img{


    height:650px;

    object-fit:cover;

    border-radius:25px;


    box-shadow:

    0 30px 70px rgba(0,0,0,.12);


}



.about-content .section-text{


    margin-bottom:20px;


}





/* STATYSTYKI */


.stats{


    display:flex;

    gap:45px;

    margin-top:45px;

    flex-wrap:wrap;


}



.stat{


    display:flex;

    flex-direction:column;


}



.stat strong{


    font-family:"Playfair Display",serif;

    font-size:42px;

    line-height:1;

    color:var(--black);


}



.stat span{


    margin-top:10px;

    color:var(--gray);

    font-size:14px;


}







/* =====================================================
   SERVICES
===================================================== */


.services{


    background:white;


}



.section-header{


    margin-bottom:70px;


}





.services-list{


    max-width:950px;


}





.service-item{


    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;


    padding:35px 0;


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


    transition:.35s ease;


}



.service-item:hover{


    padding-left:20px;


}




.service-item h3{


    font-family:"Playfair Display",serif;

    font-size:28px;

    margin-bottom:8px;


}




.service-item p{


    color:var(--gray);

    font-size:16px;


}




.service-item span{


    font-size:22px;

    font-weight:600;

    color:var(--accent);

    white-space:nowrap;


}


/* =====================================================
   GALLERY
===================================================== */


.gallery-grid{


    display:grid;

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

    gap:25px;


}




.gallery-item{


    overflow:hidden;

    border-radius:20px;

    position:relative;


}




.gallery-item img{


    height:420px;

    object-fit:cover;

    transition:.5s ease;


}




.gallery-item::after{


    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.15);

    opacity:0;

    transition:.35s;


}




.gallery-item:hover img{


    transform:scale(1.08);


}



.gallery-item:hover::after{


    opacity:1;


}







/* =====================================================
   TEAM
===================================================== */


.team{


    background:white;


}



.team-grid{


    display:grid;

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

    gap:35px;


}




.team-card{


    overflow:hidden;

    border-radius:20px;


}



.team-card img{


    height:500px;

    object-fit:cover;

    transition:.5s;


}



.team-card:hover img{


    transform:scale(1.05);


}



.team-info{


    padding:25px 5px;


}



.team-info h3{


    font-family:"Playfair Display",serif;

    font-size:28px;

    margin-bottom:8px;


}



.team-info span{


    color:var(--gray);


}







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


.reviews{


    text-align:center;


}



.reviews-slider{


    max-width:800px;

    margin:auto;


}



.review{


    display:none;


}



.review.active{


    display:block;

    animation:fadeUp .5s ease;


}




.stars{


    color:var(--accent);

    font-size:28px;

    letter-spacing:5px;

    margin-bottom:30px;


}




.review p{


    font-family:"Playfair Display",serif;

    font-size:32px;

    line-height:1.5;

    margin-bottom:30px;


}



.review strong{


    font-size:18px;


}





.review-dots{


    display:flex;

    justify-content:center;

    gap:12px;

    margin-top:40px;


}




.dot{


    width:12px;

    height:12px;

    border-radius:50%;

    background:#ddd;

    border:none;

    transition:.3s;


}



.dot.active{


    background:var(--accent);

    transform:scale(1.2);


}


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


.contact{

    background:white;

}



.contact-container{


    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;


}





.contact-item{


    display:flex;

    gap:20px;

    margin-top:35px;


}



.contact-item i{


    color:var(--accent);

    font-size:24px;

    width:30px;


}



.contact-item strong{


    display:block;

    margin-bottom:5px;


}



.contact-item p{


    color:var(--gray);


}





.contact-map{


    height:500px;

    border-radius:25px;

    overflow:hidden;


}



.contact-map iframe{


    width:100%;

    height:100%;

    border:0;


}







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


footer{


    background:#111;

    color:white;

    padding:70px 0 30px;


}



.footer-container{


    text-align:center;


}



.footer-logo{


    font-family:"Playfair Display",serif;

    font-size:40px;

    letter-spacing:5px;

    margin-bottom:20px;


}



footer p{


    color:#aaa;


}




.socials{


    display:flex;

    justify-content:center;

    gap:20px;

    margin:35px 0;


}



.socials a{


    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(255,255,255,.2);

    border-radius:50%;

    transition:.3s;


}



.socials a:hover{


    background:var(--accent);

    border-color:var(--accent);


}





.footer-bottom{


    padding-top:30px;

    margin-top:30px;

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

    display:flex;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:20px;


}







/* =====================================================
   ANIMATIONS
===================================================== */


@keyframes fadeUp{


    from{

        opacity:0;

        transform:translateY(40px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }


}




@keyframes pulse{


    0%,100%{

        opacity:1;

    }


    50%{

        opacity:.5;

    }


}




@keyframes scroll{


    0%{

        transform:translate(-50%,0);

        opacity:1;

    }


    100%{

        transform:translate(-50%,15px);

        opacity:0;

    }


}






/* ELEMENTY DO JS */


.reveal{


    opacity:0;

    transform:translateY(40px);

    transition:.8s ease;


}



.reveal.show{


    opacity:1;

    transform:translateY(0);


}


/* =====================================================
   LIGHTBOX
===================================================== */


.lightbox-overlay{


    position:fixed;

    inset:0;

    background:rgba(0,0,0,.85);

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:9999;

    opacity:0;

    visibility:hidden;

    transition:.35s;


}



.lightbox-overlay.active{


    opacity:1;

    visibility:visible;


}



.lightbox-overlay img{


    max-width:90%;

    max-height:85vh;

    width:auto;

    border-radius:20px;


}




.lightbox-close{


    position:absolute;

    top:30px;

    right:40px;


    background:none;

    border:0;

    color:white;

    font-size:50px;

    cursor:pointer;


}