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

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


html{
    scroll-behavior:smooth;
    font-size:16px;
}


body{
    background:#050505;
    color:#fff;
    font-family:"Poppins",sans-serif;
    overflow-x:hidden;
    line-height:1.6;
    text-rendering:optimizeLegibility;
}


body.menu-open{
    overflow:hidden;
}


img{
    display:block;
    max-width:100%;
}


button,
input,
textarea{
    font:inherit;
}


button{
    -webkit-tap-highlight-color:transparent;
}


a{
    color:inherit;
    text-decoration:none;
}


ul{
    list-style:none;
}



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

:root{

    --background:#050505;
    --surface:#0d0d0d;
    --surface-light:#151515;

    --gold:#c7ab67;
    --gold-hover:#d6b97a;

    --white:#fff;
    --text:#d8d8d8;

    --border:rgba(255,255,255,.08);

    --radius:22px;

    --container:1400px;

    --transition:.35s ease;

}



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

.container{
    width:min(92%,var(--container));
    margin-inline:auto;
}



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

section{
    position:relative;
    padding:120px 0;
}


.section-header{
    text-align:center;
    margin-bottom:75px;
}


.section-subtitle{
    display:inline-flex;
    align-items:center;
    gap:12px;

    color:var(--gold);

    font-size:.9rem;
    font-weight:600;

    letter-spacing:4px;
    text-transform:uppercase;

    margin-bottom:20px;
}


.section-subtitle::before{
    content:"";

    width:42px;
    height:2px;

    background:var(--gold);
}


.section-title{
    font-family:"Oswald",sans-serif;

    font-size:clamp(3rem,6vw,6rem);

    line-height:.95;

    text-transform:uppercase;

    margin-bottom:0;
}



/* ==========================================================
   BUTTON
========================================================== */

.button{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:14px;

    padding:21px 40px;

    border-radius:14px;

    border:none;

    font-weight:600;

    transition:var(--transition);

    cursor:pointer;

    white-space:nowrap;
}


.button-primary{
    background:var(--gold);
    color:#111;

    box-shadow:
            0 15px 40px
            rgba(199,171,103,.35);
}


.button-primary:hover{
    transform:translateY(-5px);
    background:var(--gold-hover);
}


.button-primary:active{
    transform:translateY(-2px);
}



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

.header{
    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    backdrop-filter:blur(18px);

    background:rgba(5,5,5,.72);

    border-bottom:
            1px solid
            rgba(255,255,255,.05);

    transition:
            background .35s ease,
            box-shadow .35s ease;
}


.header.scrolled{
    background:rgba(5,5,5,.92);

    box-shadow:
            0 15px 35px
            rgba(0,0,0,.35);
}


.navbar{
    height:92px;

    display:flex;

    align-items:center;

    justify-content:space-between;
}


.logo{
    font-family:"Oswald",sans-serif;

    font-size:2.8rem;
    font-weight:700;

    letter-spacing:1px;
}


.nav-links{
    display:flex;

    align-items:center;

    gap:54px;
}


.nav-links a{
    position:relative;

    font-size:1rem;
    font-weight:500;

    transition:var(--transition);
}


.nav-links a::after{
    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;
    height:2px;

    background:var(--gold);

    transition:.35s;
}


.nav-links a:hover,
.nav-links a.active{
    color:var(--gold);
}


.nav-links a:hover::after,
.nav-links a.active::after{
    width:100%;
}



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

.menu-toggle{
    display:none;

    width:48px;
    height:48px;

    border:0;
    background:none;

    cursor:pointer;

    position:relative;

    z-index:1100;
}


.menu-toggle span{
    display:block;

    width:28px;
    height:2px;

    margin:6px auto;

    background:#fff;

    transition:
            transform .3s ease,
            opacity .3s ease;
}


.menu-toggle.active span:nth-child(1){
    transform:
            translateY(8px)
            rotate(45deg);
}


.menu-toggle.active span:nth-child(2){
    opacity:0;
}


.menu-toggle.active span:nth-child(3){
    transform:
            translateY(-8px)
            rotate(-45deg);
}



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

.hero{
    min-height:100vh;

    display:flex;
    align-items:center;

    overflow:hidden;

    padding-top:92px;

    background:
            radial-gradient(
                    circle at 82% 35%,
                    rgba(199,171,103,.14),
                    transparent 40%
            ),

            linear-gradient(
                    90deg,
                    #050505 0%,
                    #050505 48%,
                    rgba(5,5,5,.82) 63%,
                    rgba(5,5,5,.18) 82%,
                    transparent 100%
            );
}


.hero-grid{
    display:grid;

    grid-template-columns:
        1.05fr .95fr;

    align-items:center;

    gap:20px;

    min-height:
            calc(100vh - 92px);
}


.hero-content{
    position:relative;

    z-index:5;

    max-width:760px;

    transform:translateY(-70px);
}


.hero-subtitle{
    display:inline-flex;

    align-items:center;

    gap:14px;

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:5px;

    font-size:.95rem;
    font-weight:600;

    margin-bottom:30px;
}


.hero-subtitle::before{
    content:"";

    width:46px;
    height:2px;

    background:var(--gold);
}


.hero-title{
    font-family:"Oswald",sans-serif;

    font-weight:700;

    text-transform:uppercase;

    line-height:.95;

    margin-bottom:36px;
}


.hero-title span{
    display:block;

    font-size:clamp(
            5rem,
            9vw,
            10rem
    );

    letter-spacing:1px;
}


.hero-description{
    color:var(--text);

    font-size:1.35rem;

    line-height:1.9;

    max-width:620px;

    margin-bottom:50px;
}


.hero .button{
    min-width:250px;

    font-size:1rem;
    font-weight:700;

    letter-spacing:.5px;
}



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

.hero-image{
    position:relative;

    display:flex;

    justify-content:flex-end;
    align-items:flex-end;

    height:100%;
}


.hero-image img{
    width:min(
            760px,
            100%
    );

    height:auto;

    object-fit:contain;

    user-select:none;
    pointer-events:none;

    filter:
            drop-shadow(
                    0 40px 80px
                    rgba(0,0,0,.55)
            );
}


.hero-image::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:180px;

    background:
            linear-gradient(
                    to top,
                    #050505,
                    transparent
            );

    pointer-events:none;
}


.hero-image::before{
    content:"";

    position:absolute;

    top:0;
    bottom:0;

    left:-120px;

    width:220px;

    background:
            linear-gradient(
                    to right,
                    #050505,
                    transparent
            );

    pointer-events:none;
}


.hero::before{
    content:"";

    position:absolute;

    right:-260px;
    top:-120px;

    width:700px;
    height:700px;

    border-radius:50%;

    background:
            radial-gradient(
                    rgba(199,171,103,.18),
                    transparent 70%
            );

    pointer-events:none;
}


.hero::after{
    content:"";

    position:absolute;

    bottom:0;
    left:0;

    width:100%;
    height:2px;

    background:
            linear-gradient(
                    90deg,
                    transparent,
                    rgba(199,171,103,.35),
                    transparent
            );
}



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

.about{
    padding:140px 0;
}


.about-card{
    display:grid;

    grid-template-columns:
        480px 1fr;

    align-items:stretch;

    overflow:hidden;

    border-radius:32px;

    background:
            linear-gradient(
                    145deg,
                    rgba(255,255,255,.035),
                    rgba(255,255,255,.02)
            );

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

    box-shadow:
            0 35px 90px
            rgba(0,0,0,.45);
}


.about-content{
    padding:70px;

    display:flex;
    flex-direction:column;
    justify-content:center;
}


.about-content h2{
    font-family:"Oswald",sans-serif;

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

    text-transform:uppercase;

    line-height:.95;

    margin-bottom:28px;
}


.about-content p{
    color:var(--text);

    font-size:1.1rem;

    line-height:2;

    margin-bottom:50px;
}


.video-link{
    display:inline-flex;

    align-items:center;

    gap:18px;

    width:max-content;

    background:none;

    border:none;

    color:white;

    cursor:pointer;

    font-weight:600;

    letter-spacing:1px;

    transition:.3s;
}


.video-link span{
    display:flex;

    justify-content:center;
    align-items:center;

    width:58px;
    height:58px;

    border-radius:50%;

    background:var(--gold);

    color:#000;

    font-size:18px;

    transition:.3s;
}


.video-link:hover{
    color:var(--gold);
}


.video-link:hover span{
    transform:scale(1.08);
}


.about-video{
    position:relative;

    min-height:600px;

    overflow:hidden;
}


.about-video img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:.6s;
}


.about-video:hover img{
    transform:scale(1.05);
}


.about-video::before{
    content:"";

    position:absolute;

    inset:0;

    background:
            linear-gradient(
                    rgba(0,0,0,.15),
                    rgba(0,0,0,.45)
            );

    z-index:1;
}


.video-play{
    position:absolute;

    top:50%;
    left:50%;

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

    width:110px;
    height:110px;

    border-radius:50%;

    border:none;

    background:var(--gold);

    color:#000;

    font-size:2rem;

    cursor:pointer;

    z-index:2;

    transition:.35s;

    box-shadow:
            0 20px 45px
            rgba(199,171,103,.35);
}


.video-play:hover{
    transform:
            translate(-50%,-50%)
            scale(1.12);
}


.video-play::before{
    content:"";

    position:absolute;

    inset:-18px;

    border-radius:50%;

    border:
            2px solid
            rgba(199,171,103,.35);

    animation:pulse 2.5s infinite;
}


@keyframes pulse{

    0%{
        transform:scale(.8);
        opacity:1;
    }

    100%{
        transform:scale(1.35);
        opacity:0;
    }

}



/* ==========================================================
   VIDEO MODAL
========================================================== */

.video-modal{
    position:fixed;

    inset:0;

    display:flex;

    align-items:center;
    justify-content:center;

    visibility:hidden;

    opacity:0;

    transition:.35s;

    z-index:3000;
}


.video-modal.active{
    visibility:visible;
    opacity:1;
}


.video-overlay{
    position:absolute;

    inset:0;

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

    backdrop-filter:blur(8px);
}


.video-container{
    position:relative;

    width:min(
            92%,
            1100px
    );

    aspect-ratio:16 / 9;

    z-index:2;

    border-radius:24px;

    overflow:hidden;

    background:#000;

    box-shadow:
            0 40px 100px
            rgba(0,0,0,.55);
}


.video-container video{
    width:100%;
    height:100%;

    display:block;

    object-fit:contain;

    background:#000;
}


.video-close{
    position:absolute;

    top:18px;
    right:18px;

    width:48px;
    height:48px;

    border:none;

    border-radius:50%;

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

    color:#fff;

    font-size:1.6rem;

    cursor:pointer;

    transition:.3s;

    z-index:5;
}


.video-close:hover{
    background:var(--gold);
    color:#000;
}



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

.services{
    padding:150px 0;
}


.services-grid{
    display:grid;

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

    gap:34px;
}


.service-card{
    position:relative;

    padding:55px 42px;

    border-radius:28px;

    background:
            linear-gradient(
                    180deg,
                    rgba(255,255,255,.035),
                    rgba(255,255,255,.02)
            );

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

    transition:.35s;

    overflow:hidden;
}


.service-card:hover{
    transform:translateY(-12px);

    border-color:
            rgba(199,171,103,.45);

    box-shadow:
            0 30px 60px
            rgba(0,0,0,.45);
}


.service-card::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:4px;

    background:var(--gold);

    transform:scaleX(0);

    transition:.35s;
}


.service-card:hover::before{
    transform:scaleX(1);
}


.service-icon{
    width:82px;
    height:82px;

    display:flex;

    justify-content:center;
    align-items:center;

    border-radius:18px;

    background:
            rgba(199,171,103,.08);

    margin-bottom:30px;
}


.service-icon img{
    width:42px;
    height:42px;
}


.service-card h3{
    font-family:"Oswald",sans-serif;

    font-size:2rem;

    margin-bottom:20px;

    text-transform:uppercase;
}


.service-card p{
    color:var(--text);

    line-height:1.9;

    font-size:1rem;
}



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

.reviews{
    padding:150px 0;

    position:relative;

    overflow:visible;
}


.reviews-carousel{
    display:flex;

    align-items:center;

    gap:20px;

    padding:15px 0;
}


.reviews-viewport{
    width:100%;

    min-width:0;

    overflow:hidden;

    padding:15px 0;

    margin:-15px 0;
}


.reviews-track{
    display:flex;

    gap:28px;

    transition:
            transform .8s
            cubic-bezier(
                    .22,.61,.36,1
            );

    will-change:transform;
}


.review-card{
    position:relative;

    flex:0 0 calc(
            (100% - 56px) / 3
    );

    min-width:0;

    display:flex;

    flex-direction:column;

    padding:38px;

    border-radius:28px;

    background:
            linear-gradient(
                    145deg,
                    rgba(255,255,255,.04),
                    rgba(255,255,255,.018)
            );

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

    overflow:hidden;

    transition:
            transform .4s ease,
            border-color .4s ease,
            box-shadow .4s ease;
}


.review-card::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:4px;

    background:var(--gold);

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s ease;
}


.review-card:hover{
    transform:translateY(-10px);

    border-color:
            rgba(199,171,103,.4);

    box-shadow:
            0 30px 70px
            rgba(0,0,0,.5);
}


.review-card:hover::before{
    transform:scaleX(1);
}


.review-client{
    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;
}


.review-avatar{
    width:58px;
    height:58px;

    display:flex;

    align-items:center;
    justify-content:center;

    flex-shrink:0;

    border-radius:50%;

    background:
            rgba(199,171,103,.12);

    border:
            1px solid
            rgba(199,171,103,.35);

    color:var(--gold);

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

    font-size:1rem;

    font-weight:600;
}


.review-client h3{
    font-family:"Oswald",sans-serif;

    font-size:1.45rem;

    text-transform:uppercase;

    line-height:1.1;

    margin-bottom:4px;
}


.review-client span{
    color:#858585;

    font-size:.78rem;
}


.review-stars{
    color:var(--gold);

    font-size:.95rem;

    letter-spacing:3px;

    margin-bottom:20px;
}


.review-text{
    color:var(--text);

    font-size:.95rem;

    line-height:1.8;

    margin-bottom:30px;
}


.review-progress{
    margin-top:auto;

    padding-top:25px;

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


.progress-title{
    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:13px;

    color:#858585;

    font-size:.68rem;

    font-weight:600;

    letter-spacing:2px;
}


.progress-title span:last-child{
    color:var(--gold);
}


.review-images{
    display:grid;

    grid-template-columns:
        1fr 34px 1fr;

    align-items:center;

    gap:8px;
}


.review-image{
    position:relative;

    height:145px;

    overflow:hidden;

    border-radius:14px;

    background:#111;
}


.review-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:.5s ease;
}


.review-card:hover
.review-image img{
    transform:scale(1.06);
}


.image-label{
    position:absolute;

    top:9px;
    left:9px;

    z-index:2;

    padding:5px 8px;

    border-radius:5px;

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

    backdrop-filter:blur(8px);

    color:#fff;

    font-size:.58rem;

    font-weight:700;

    letter-spacing:1.3px;
}


.review-arrow-small{
    width:30px;
    height:30px;

    display:flex;

    align-items:center;
    justify-content:center;

    margin:auto;

    border-radius:50%;

    background:
            rgba(199,171,103,.12);

    border:
            1px solid
            rgba(199,171,103,.3);

    color:var(--gold);

    font-size:.8rem;
}


.reviews-arrow{
    width:55px;
    height:55px;

    flex-shrink:0;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

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

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

    color:#fff;

    font-size:1.3rem;

    cursor:pointer;

    transition:.35s ease;
}


.reviews-arrow:hover{
    background:var(--gold);

    border-color:var(--gold);

    color:#000;

    transform:scale(1.08);
}


.reviews-dots{
    display:flex;

    justify-content:center;
    align-items:center;

    gap:10px;

    margin-top:35px;
}


.review-dot{
    width:8px;
    height:8px;

    padding:0;

    border:none;

    border-radius:50%;

    background:#555;

    cursor:pointer;

    transition:.35s ease;
}


.review-dot.active{
    width:30px;

    border-radius:10px;

    background:var(--gold);
}



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

.cta{
    position:relative;

    padding:180px 0;

    text-align:center;

    overflow:hidden;
}


.cta::before{
    content:"";

    position:absolute;

    width:900px;
    height:900px;

    left:50%;
    top:50%;

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

    border-radius:50%;

    background:
            radial-gradient(
                    rgba(199,171,103,.08),
                    transparent 70%
            );

    pointer-events:none;
}


.cta-title{
    font-family:"Oswald",sans-serif;

    font-size:
            clamp(
                    4rem,
                    8vw,
                    7rem
            );

    line-height:.95;

    text-transform:uppercase;

    margin:30px auto;

    max-width:900px;
}


.cta-title span{
    color:var(--gold);
}


.cta p{
    color:var(--text);

    font-size:1.2rem;

    margin-bottom:45px;
}


.cta .button{
    min-width:290px;
}



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

.footer{
    border-top:
            1px solid
            rgba(255,255,255,.08);

    padding:40px 0;

    background:#050505;
}


.footer-content{
    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;
}


.footer p{
    color:#9d9d9d;

    font-size:.95rem;
}


.footer-socials{
    display:flex;

    gap:16px;
}


.footer-socials a{
    width:52px;
    height:52px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:14px;

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

    transition:.35s;
}


.footer-socials a:hover{
    background:var(--gold);

    border-color:var(--gold);

    transform:translateY(-4px);
}


.footer-socials img{
    width:22px;
    height:22px;

    filter:
            brightness(0)
            invert(1);
}



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

.hidden{
    opacity:0;

    transform:translateY(50px);

    transition:
            opacity .8s ease,
            transform .8s ease;
}


.show{
    opacity:1;

    transform:translateY(0);
}



/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (min-width:1600px){

    :root{
        --container:1500px;
    }


    .hero-title span{
        font-size:
                clamp(
                        6rem,
                        8vw,
                        10rem
                );
    }


    .hero-content{
        transform:
                translateY(-55px);
    }

}



/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width:1200px) and (max-width:1599px){

    .hero-grid{
        grid-template-columns:
            1.05fr .95fr;
    }


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

}



/* ==========================================================
   TABLET LANDSCAPE
========================================================== */

@media (min-width:993px) and (max-width:1199px){

    .container{
        width:min(92%,1100px);
    }


    section{
        padding:105px 0;
    }


    .hero{
        min-height:auto;

        padding-top:92px;
    }


    .hero-grid{
        grid-template-columns:
            1fr 1fr;

        min-height:
                calc(100vh - 92px);

        gap:30px;
    }


    .hero-content{
        transform:none;

        max-width:600px;
    }


    .hero-title span{
        font-size:
                clamp(
                        4.5rem,
                        8vw,
                        7rem
                );
    }


    .hero-description{
        font-size:1.1rem;
    }


    .about-card{
        grid-template-columns:
            1fr 1fr;
    }


    .about-content{
        padding:50px;
    }


    .about-video{
        min-height:520px;
    }


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


    .review-card{
        flex-basis:
                calc(
                        (100% - 28px) / 2
                );
    }

}



/* ==========================================================
   TABLET
========================================================== */

@media (min-width:769px) and (max-width:992px){

    .container{
        width:min(90%,900px);
    }


    section{
        padding:90px 0;
    }


    .navbar{
        height:82px;
    }


    .menu-toggle{
        display:block;
    }


    .nav-links{
        position:fixed;

        top:82px;
        left:0;

        width:100%;

        height:
                calc(
                        100dvh - 82px
                );

        display:flex;

        flex-direction:column;

        justify-content:flex-start;

        align-items:center;

        gap:30px;

        padding:60px 30px;

        background:
                rgba(5,5,5,.98);

        backdrop-filter:
                blur(20px);

        transform:
                translateY(-110%);

        transition:
                transform .4s ease;

        overflow-y:auto;

        border-bottom:
                1px solid
                rgba(255,255,255,.08);
    }


    .nav-links.active{
        transform:
                translateY(0);
    }


    .nav-links a{
        font-size:1.15rem;

        padding:8px 20px;
    }


    .hero{
        min-height:auto;

        padding-top:82px;
    }


    .hero-grid{
        grid-template-columns:1fr;

        min-height:auto;

        gap:35px;

        padding-top:70px;
    }


    .hero-content{
        text-align:center;

        max-width:700px;

        margin:auto;

        transform:none;
    }


    .hero-subtitle{
        justify-content:center;
    }


    .hero-title span{
        font-size:
                clamp(
                        4.5rem,
                        12vw,
                        7rem
                );
    }


    .hero-description{
        margin-inline:auto;

        font-size:1.1rem;
    }


    .hero-image{
        justify-content:center;

        width:100%;

        max-width:650px;

        margin:auto;
    }


    .about-card{
        grid-template-columns:1fr;
    }


    .about-content{
        padding:55px;
    }


    .about-video{
        min-height:450px;
    }


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


    .review-card{
        flex-basis:
                calc(
                        (100% - 28px) / 2
                );
    }

}



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

@media (min-width:481px) and (max-width:768px){

    .container{
        width:min(90%,620px);
    }


    section{
        padding:80px 0;
    }


    .navbar{
        height:76px;
    }


    .menu-toggle{
        display:block;
    }


    .nav-links{
        position:fixed;

        top:76px;
        left:0;

        width:100%;

        height:
                calc(
                        100dvh - 76px
                );

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:25px;

        padding:55px 25px;

        background:
                rgba(5,5,5,.98);

        backdrop-filter:
                blur(20px);

        transform:
                translateY(-110%);

        transition:
                transform .4s ease;

        overflow-y:auto;
    }


    .nav-links.active{
        transform:
                translateY(0);
    }


    .nav-links a{
        font-size:1.1rem;
    }


    .hero{
        min-height:auto;

        padding-top:76px;
    }


    .hero-grid{
        grid-template-columns:1fr;

        min-height:auto;

        gap:30px;

        padding-top:65px;
    }


    .hero-content{
        text-align:center;

        transform:none;

        margin:auto;
    }


    .hero-subtitle{
        justify-content:center;

        font-size:.75rem;

        letter-spacing:3px;
    }


    .hero-title span{
        font-size:
                clamp(
                        3.8rem,
                        14vw,
                        5.5rem
                );
    }


    .hero-description{
        font-size:1rem;

        max-width:500px;

        margin:
                0 auto 30px;
    }


    .hero .button{
        min-width:220px;
    }


    .hero-image{
        justify-content:center;

        width:100%;
    }


    .hero-image img{
        width:min(
                100%,
                520px
        );
    }


    .about-card{
        grid-template-columns:1fr;
    }


    .about-content{
        padding:42px 35px;
    }


    .about-video{
        min-height:380px;
    }


    .video-play{
        width:82px;
        height:82px;

        font-size:1.5rem;
    }


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


    .service-card{
        padding:38px 32px;
    }


    .review-card{
        flex-basis:100%;

        padding:32px 28px;
    }


    .review-image{
        height:160px;
    }


    .reviews-arrow{
        width:44px;
        height:44px;

        font-size:1rem;
    }

}



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

@media (max-width:480px){

    html{
        font-size:15px;
    }


    .container{
        width:
                calc(
                        100% - 32px
                );
    }


    section{
        padding:70px 0;
    }


    .navbar{
        height:68px;
    }


    .menu-toggle{
        display:block;

        width:44px;
        height:44px;
    }


    .logo{
        font-size:2.2rem;
    }


    .nav-links{
        top:68px;

        height:
                calc(
                        100dvh - 68px
                );

        padding:45px 20px;

        gap:20px;
    }


    .nav-links a{
        font-size:1rem;
    }


    .hero{
        padding-top:68px;
    }


    .hero-grid{
        padding-top:55px;

        gap:20px;
    }


    .hero-subtitle{
        justify-content:center;

        font-size:.65rem;

        letter-spacing:2.5px;

        gap:8px;
    }


    .hero-subtitle::before{
        width:28px;
    }


    .hero-title{
        margin-bottom:20px;
    }


    .hero-title span{
        font-size:
                clamp(
                        3rem,
                        16vw,
                        4.4rem
                );

        letter-spacing:0;
    }


    .hero-description{
        font-size:.92rem;

        line-height:1.65;

        margin-bottom:28px;
    }


    .hero .button{
        width:100%;

        min-width:0;

        padding:17px 22px;
    }


    .hero-image img{
        width:100%;
    }


    .about{
        padding:70px 0;
    }


    .about-card{
        border-radius:20px;
    }


    .about-content{
        padding:30px 24px;
    }


    .about-content h2{
        font-size:3rem;
    }


    .about-content p{
        font-size:.92rem;

        line-height:1.75;

        margin-bottom:30px;
    }


    .video-link{
        gap:12px;

        font-size:.8rem;
    }


    .video-link span{
        width:50px;
        height:50px;

        font-size:15px;
    }


    .about-video{
        min-height:260px;
    }


    .video-play{
        width:70px;
        height:70px;

        font-size:1.25rem;
    }


    .services{
        padding:75px 0;
    }


    .section-subtitle{
        font-size:.68rem;

        letter-spacing:2.5px;

        gap:8px;
    }


    .section-subtitle::before{
        width:28px;
    }


    .section-title{
        font-size:
                clamp(
                        2.8rem,
                        14vw,
                        4rem
                );
    }


    .services-grid{
        grid-template-columns:1fr;

        gap:16px;
    }


    .service-card{
        padding:32px 24px;

        border-radius:20px;
    }


    .service-icon{
        width:68px;
        height:68px;
    }


    .service-icon img{
        width:34px;
        height:34px;
    }


    .service-card h3{
        font-size:1.65rem;
    }


    .service-card p{
        font-size:.9rem;
    }


    .reviews{
        padding:75px 0;
    }


    .reviews-carousel{
        gap:7px;
    }


    .reviews-viewport{
        min-width:0;
    }


    .review-card{
        flex-basis:100%;

        padding:27px 20px;

        border-radius:20px;
    }


    .review-client{
        gap:11px;
    }


    .review-avatar{
        width:48px;
        height:48px;
    }


    .review-client h3{
        font-size:1.25rem;
    }


    .review-stars{
        font-size:.8rem;

        letter-spacing:2px;
    }


    .review-text{
        font-size:.86rem;

        line-height:1.7;
    }


    .review-images{
        grid-template-columns:
            1fr 25px 1fr;

        gap:5px;
    }


    .review-image{
        height:125px;

        border-radius:11px;
    }


    .image-label{
        top:7px;
        left:7px;

        padding:4px 6px;

        font-size:.5rem;
    }


    .review-arrow-small{
        width:24px;
        height:24px;

        font-size:.65rem;
    }


    .reviews-arrow{
        width:36px;
        height:36px;

        font-size:.9rem;
    }


    .reviews-dots{
        margin-top:25px;
    }


    .cta{
        padding:100px 0;
    }


    .cta-title{
        font-size:
                clamp(
                        2.7rem,
                        13vw,
                        4rem
                );
    }


    .cta p{
        font-size:.95rem;
    }


    .cta .button{
        width:100%;

        min-width:0;

        padding:17px 20px;
    }


    .footer{
        padding:30px 0;
    }


    .footer-content{
        flex-direction:column;

        text-align:center;
    }


    .footer-socials a{
        width:46px;
        height:46px;
    }


    .video-container{
        width:94%;

        border-radius:16px;
    }


    .video-close{
        top:10px;
        right:10px;

        width:42px;
        height:42px;
    }

}



/* ==========================================================
   TOUCH DEVICES
========================================================== */

@media (hover:none){

    .service-card:hover,
    .review-card:hover{
        transform:none;

        box-shadow:none;
    }


    .button-primary:hover{
        transform:none;
    }

}



/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;
    }

}
/* ==========================================================
   FINAL MOBILE FIX
   Přepisuje předchozí responsive pravidla
========================================================== */


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

@media (max-width: 992px){

    /* ---------- HEADER ---------- */

    .header{
        height:70px;

        background:rgba(5,5,5,.94);

        backdrop-filter:blur(18px);

        border-bottom:
                1px solid
                rgba(255,255,255,.06);
    }


    .header .container{
        width:100%;
        padding:0 20px;
    }


    .navbar{
        height:70px;

        display:flex;

        align-items:center;

        justify-content:space-between;
    }


    .logo{
        position:relative;

        z-index:1101;

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

        font-size:2rem;

        line-height:1;

        flex-shrink:0;
    }


    /* ---------- HAMBURGER ---------- */

    .menu-toggle{
        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:5px;

        width:42px;
        height:42px;

        padding:0;

        margin-left:auto;

        border:0;

        background:transparent;

        cursor:pointer;

        z-index:1102;
    }


    .menu-toggle span{
        display:block;

        width:23px;
        height:2px;

        margin:0;

        background:#fff;

        transition:
                transform .3s ease,
                opacity .3s ease;
    }


    .menu-toggle.active span:nth-child(1){
        transform:
                translateY(7px)
                rotate(45deg);
    }


    .menu-toggle.active span:nth-child(2){
        opacity:0;
    }


    .menu-toggle.active span:nth-child(3){
        transform:
                translateY(-7px)
                rotate(-45deg);
    }


    /* ---------- MOBILE NAV ---------- */

    .nav-links{
        position:fixed;

        top:70px;
        left:0;

        width:100%;

        height:
                calc(100dvh - 70px);

        padding:50px 25px;

        margin:0;

        display:flex;

        flex-direction:column;

        justify-content:flex-start;

        align-items:center;

        gap:25px;

        background:
                rgba(5,5,5,.98);

        backdrop-filter:blur(20px);

        transform:
                translateX(100%);

        opacity:1;

        visibility:hidden;

        transition:
                transform .35s ease,
                visibility .35s ease;

        z-index:1100;

        overflow-y:auto;
    }


    .nav-links.active{
        transform:translateX(0);

        visibility:visible;
    }


    .nav-links li{
        width:100%;

        display:flex;

        justify-content:center;
    }


    .nav-links a{
        display:block;

        width:auto;

        padding:10px 20px;

        color:#fff;

        font-size:1.05rem;

        font-weight:600;

        text-align:center;
    }


    .nav-links a::after{
        display:none;
    }


    .nav-links a:hover,
    .nav-links a.active{
        color:var(--gold);
    }



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

    .hero{

        min-height:
                calc(100svh - 70px);

        height:auto;

        padding:
                70px 0
                0;

        display:block;

        overflow:hidden;

        background:
                radial-gradient(
                        circle at 85% 30%,
                        rgba(199,171,103,.12),
                        transparent 40%
                ),

                linear-gradient(
                        180deg,
                        #050505 0%,
                        #080808 55%,
                        #050505 100%
                );
    }


    .hero-grid{

        width:100%;

        min-height:
                calc(100svh - 70px);

        padding:0;

        margin:0;

        display:flex;

        flex-direction:column;

        align-items:center;

        justify-content:flex-start;

        gap:0;
    }


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

    .hero-content{

        width:
                calc(100% - 40px);

        max-width:650px;

        margin:0 auto;

        padding:85px 0 0;

        text-align:left;

        transform:none !important;

        z-index:10;
    }


    .hero-subtitle{

        display:flex;

        align-items:center;

        justify-content:flex-start;

        gap:9px;

        margin:0 0 25px;

        color:var(--gold);

        font-size:.65rem;

        line-height:1;

        letter-spacing:2.5px;

        white-space:nowrap;
    }


    .hero-subtitle::before{

        width:21px;

        height:2px;

        flex-shrink:0;
    }


    .hero-title{

        margin:0 0 22px;

        line-height:.86;

        letter-spacing:0;
    }


    .hero-title span{

        display:block;

        font-size:
                clamp(
                        4rem,
                        18vw,
                        6rem
                );

        line-height:.86;

        letter-spacing:-1px;
    }


    .hero-description{

        width:100%;

        max-width:430px;

        margin:0 0 28px;

        color:#ddd;

        font-size:.88rem;

        line-height:1.65;
    }


    .hero .button{

        width:auto;

        min-width:180px;

        min-height:48px;

        padding:15px 27px;

        border-radius:11px;

        font-size:.78rem;

        gap:10px;

        box-shadow:
                0 12px 30px
                rgba(199,171,103,.22);
    }


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

    .hero-image{

        position:relative;

        width:100%;

        height:auto;

        min-height:0;

        margin:0;

        padding:0;

        display:flex;

        align-items:flex-end;

        justify-content:center;

        z-index:2;

        pointer-events:none;
    }


    .hero-image img{

        display:block;

        width:
                min(
                        100%,
                        430px
                );

        max-width:none;

        height:auto;

        margin:
                -5px auto
                0;

        object-fit:contain;

        object-position:center bottom;

        filter:
                drop-shadow(
                        0 30px 50px
                        rgba(0,0,0,.6)
                );
    }


    /* odstraníme desktopové překryvy */

    .hero-image::before{

        display:none;
    }


    .hero-image::after{

        content:"";

        position:absolute;

        left:0;
        right:0;

        bottom:0;

        width:100%;

        height:120px;

        background:
                linear-gradient(
                        to top,
                        #050505 0%,
                        rgba(5,5,5,.75) 35%,
                        transparent 100%
                );

        pointer-events:none;
    }


    .hero::before{

        width:500px;
        height:500px;

        right:-300px;
        top:200px;

        opacity:.5;
    }


    .hero::after{

        display:none;
    }



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

    .about{

        padding:
                80px 0;
    }


    .about-card{

        display:flex;

        flex-direction:column;

        width:100%;

        border-radius:22px;
    }


    .about-content{

        padding:
                40px 25px;
    }


    .about-content h2{

        font-size:
                clamp(
                        3rem,
                        13vw,
                        4.5rem
                );
    }


    .about-content p{

        font-size:.92rem;

        line-height:1.75;
    }


    .about-video{

        min-height:300px;

        height:300px;
    }



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

    .services{

        padding:
                80px 0;
    }


    .services-grid{

        display:grid;

        grid-template-columns:1fr;

        gap:18px;
    }


    .service-card{

        padding:
                32px 25px;

        border-radius:20px;
    }



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

    .reviews{

        padding:
                80px 0;

        overflow:hidden;
    }


    .reviews-carousel{

        width:100%;

        display:flex;

        align-items:center;

        gap:7px;

        padding:10px 0;
    }


    .reviews-viewport{

        flex:1;

        width:auto;

        min-width:0;

        overflow:hidden;

        padding:10px 0;

        margin:-10px 0;
    }


    .reviews-track{

        display:flex;

        gap:16px;

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


    .review-card{

        flex:
                0 0 100%;

        width:100%;

        min-width:0;

        padding:
                28px 20px;

        border-radius:20px;

        transform:none;
    }


    .review-card:hover{

        transform:none;
    }


    .review-text{

        font-size:.86rem;

        line-height:1.7;
    }


    .review-images{

        grid-template-columns:
            1fr 26px 1fr;

        gap:5px;
    }


    .review-image{

        height:125px;
    }


    .reviews-arrow{

        width:35px;
        height:35px;

        flex:0 0 35px;

        font-size:.85rem;
    }



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

    .cta{

        padding:
                100px 0;
    }


    .cta-title{

        font-size:
                clamp(
                        3rem,
                        13vw,
                        5rem
                );
    }


    .cta .button{

        width:100%;

        min-width:0;
    }



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

    .footer-content{

        flex-direction:column;

        justify-content:center;

        text-align:center;
    }

}



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

@media (max-width:480px){

    .container{

        width:
                calc(100% - 40px);
    }


    .header .container{

        width:100%;

        padding:
                0 20px;
    }


    /* ------------------------------------------------------
       HERO — přesné nastavení pro telefony
    ------------------------------------------------------ */

    .hero{

        min-height:
                calc(100svh - 68px);

        padding-top:68px;
    }


    .hero-grid{

        min-height:
                calc(100svh - 68px);
    }


    .hero-content{

        width:
                calc(100% - 40px);

        padding-top:75px;
    }


    .hero-subtitle{

        margin-bottom:25px;

        font-size:.58rem;

        letter-spacing:2.1px;
    }


    .hero-title{

        margin-bottom:20px;
    }


    .hero-title span{

        font-size:
                clamp(
                        3.8rem,
                        18vw,
                        5rem
                );

        line-height:.84;

        letter-spacing:-1px;
    }


    .hero-description{

        max-width:270px;

        font-size:.82rem;

        line-height:1.55;

        margin-bottom:25px;
    }


    .hero .button{

        min-width:179px;

        width:179px;

        min-height:44px;

        padding:
                13px 18px;

        font-size:.73rem;

        border-radius:10px;
    }


    .hero-image img{

        width:
                min(
                        100%,
                        390px
                );

        margin-top:-5px;
    }


    /* ------------------------------------------------------
       ABOUT
    ------------------------------------------------------ */

    .about{

        padding:
                65px 0;
    }


    .about-content{

        padding:
                32px 22px;
    }


    .about-content h2{

        font-size:
                3rem;
    }


    .about-content p{

        font-size:.88rem;
    }


    .about-video{

        height:250px;

        min-height:250px;
    }


    /* ------------------------------------------------------
       SECTION HEADERS
    ------------------------------------------------------ */

    .section-header{

        margin-bottom:45px;
    }


    .section-subtitle{

        font-size:.62rem;

        letter-spacing:2.3px;
    }


    .section-title{

        font-size:
                clamp(
                        2.8rem,
                        13vw,
                        4rem
                );
    }


    /* ------------------------------------------------------
       REVIEWS
    ------------------------------------------------------ */

    .reviews{

        padding:
                65px 0;
    }


    .review-card{

        padding:
                25px 18px;
    }


    .review-image{

        height:115px;
    }


    /* ------------------------------------------------------
       CTA
    ------------------------------------------------------ */

    .cta{

        padding:
                90px 0;
    }


    .cta-title{

        font-size:
                clamp(
                        2.8rem,
                        13vw,
                        4rem
                );
    }

}



/* ==========================================================
   VERY SMALL PHONES
   320px – 360px
========================================================== */

@media (max-width:360px){

    .header .container{

        padding:
                0 15px;
    }


    .logo{

        font-size:1.8rem;
    }


    .hero-content{

        width:
                calc(100% - 30px);

        padding-top:65px;
    }


    .hero-title span{

        font-size:
                3.45rem;

        letter-spacing:-1.5px;
    }


    .hero-description{

        font-size:.78rem;

        max-width:250px;
    }


    .hero .button{

        width:175px;

        min-width:175px;
    }


    .hero-image img{

        width:360px;

        max-width:none;

        margin-left:0;
    }


    .reviews-carousel{

        gap:4px;
    }


    .reviews-arrow{

        width:31px;
        height:31px;

        flex-basis:31px;

        font-size:.75rem;
    }

}



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

@media (
max-width:768px
) and (
orientation:landscape
){

    .hero{

        min-height:auto;

        padding-top:70px;
    }


    .hero-grid{

        min-height:auto;

        display:grid;

        grid-template-columns:
            1fr 1fr;

        align-items:center;
    }


    .hero-content{

        padding:
                50px 0;

        text-align:left;
    }


    .hero-image{

        height:
                calc(100svh - 70px);
    }


    .hero-image img{

        height:100%;

        width:auto;

        max-width:100%;

        object-fit:contain;
    }

}
/* ==========================================================
   FIX ČESKÉ DIAKRITIKY V HERO NADPISU
   DOMINIK / ŠIŠÁN
========================================================== */

.hero-title {
    position: relative;

    margin: 0 0 28px;

    /* důležité pro české znaky */
    line-height: 1;

    /* zabrání divným zásahům glyfů */
    overflow: visible;

    /* lepší vykreslení fontu */
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}


/* KAŽDÝ ŘÁDEK SAMOSTATNĚ */

.hero-title span {
    display: block;

    position: relative;

    /* NIKDY nedávat .84 / .80 apod. */
    line-height: 0.94;

    height: auto;

    margin: 0;

    padding: 0;

    overflow: visible;

    white-space: nowrap;

    font-kerning: normal;
}


/* první řádek */

.hero-title span:first-child {
    margin-bottom: 0;
}


/* druhý řádek */

.hero-title span + span {
    margin-top: 0;
}


/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width: 993px) {

    .hero-title {
        font-size: clamp(5rem, 7vw, 8rem);

        line-height: 1;

        margin-bottom: 32px;
    }

    .hero-title span {
        line-height: 0.94;
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (min-width: 577px) and (max-width: 992px) {

    .hero-title {
        margin-bottom: 28px;
    }

    .hero-title span {
        line-height: 0.94;
    }

}


/* ==========================================================
   MOBIL
========================================================== */

@media (max-width: 576px) {

    .hero-title {
        margin-bottom: 24px;

        line-height: 1;
    }

    .hero-title span {
        line-height: 0.94;

        /* prostor pro Š / Č / Ř / Ě / Á atd. */
        padding-top: 0.025em;
        padding-bottom: 0.025em;
    }

}


/* ==========================================================
   MALÉ TELEFONY
========================================================== */

@media (max-width: 360px) {

    .hero-title {
        margin-bottom: 22px;
    }

    .hero-title span {
        line-height: 0.93;

        padding-top: 0.035em;
        padding-bottom: 0.035em;
    }

}

/* ==========================================================
   DEFINITIVNÍ FIX — DOMINIK / ŠIŠÁN
   Dostatečný prostor pro Š, Á, Ě, Č, Ř...
========================================================== */

.hero-title {
    position: relative;
    overflow: visible;

    line-height: 1.08 !important;

    margin-bottom: 32px;

    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

.hero-title span {
    display: block;

    position: relative;

    height: auto;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1.08 !important;

    overflow: visible;

    white-space: nowrap;
}


/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width: 993px) {

    .hero-title {
        line-height: 1.2 !important;
        margin-bottom: 35px;
    }

    .hero-title span {
        line-height: 1.2 !important;
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (min-width: 577px) and (max-width: 992px) {

    .hero-title {
        line-height: 1.2 !important;
        margin-bottom: 30px;
    }

    .hero-title span {
        line-height: 1.2 !important;
    }

}


/* ==========================================================
   MOBIL
========================================================== */

@media (max-width: 576px) {

    .hero-title {
        line-height: 1.2 !important;
        margin-bottom: 28px;
    }

    .hero-title span {
        line-height: 1.2 !important;
    }

}


/* ==========================================================
   MALÉ TELEFONY
========================================================== */

@media (max-width: 360px) {

    .hero-title {
        line-height: 1.2 !important;
        margin-bottom: 27px;
    }

    .hero-title span {
        line-height: 1.2 !important;
    }

}