:root{
    --bg:#07090c;
    --surface:#0e1318;
    --surface2:#131a21;
    --line:#27313a;
    --text:#f4f6f7;
    --muted:#9ea9b2;
    --silver:#dce2e7;
    --gold:#c99b52;
    --max:1240px;
}

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

html{scroll-behavior:smooth}

body{
    font-family:Arial,Helvetica,sans-serif;
    background:
        radial-gradient(circle at 82% 5%,#c89b5212,transparent 24%),
        radial-gradient(circle at 7% 80%,#dce2e70b,transparent 28%),
        var(--bg);
    color:var(--text);
    line-height:1.65;
}

a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button,input,select{font:inherit}

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

/* HEADER */
.header{
    position:sticky;
    top:0;
    z-index:1000;
    background:#07090ced;
    backdrop-filter:blur(18px);
    border-bottom:1px solid #ffffff12;
}

.nav{
    min-height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    position:relative;
}

.logo{
    display:flex;
    align-items:center;
    gap:11px;
    font-weight:900;
    letter-spacing:.2px;
}

.logo-mark{
    width:45px;
    height:45px;
    border-radius:13px;
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,#fff,#737c85);
    color:#090b0e;
    box-shadow:0 8px 28px #0008;
}

.logo small{
    display:block;
    color:#7f8992;
    font-size:9px;
    letter-spacing:1px;
    margin-top:2px;
}

.menu{
    display:flex;
    align-items:center;
    gap:17px;
}

.menu a{
    font-size:13px;
    color:#aeb7bf;
    transition:.25s;
}

.menu a:hover,
.menu a.active{
    color:#fff;
}

.menu-btn{
    display:none;
    background:none;
    border:0;
    color:#fff;
    font-size:28px;
    cursor:pointer;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:13px 20px;
    border-radius:11px;
    border:1px solid #aab1b8;
    background:linear-gradient(135deg,#f4f6f7,#949da5);
    color:#090b0e;
    font-weight:800;
    cursor:pointer;
    transition:.3s;
}

.btn:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 35px #0009;
}

.btn-dark{
    background:#11161b;
    color:#fff;
    border-color:#39434d;
}

/* HERO */
.hero{
    min-height:760px;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(90deg,#05070bf5,#05070b9c 45%,#05070b3a),
        url("hero.jpg") center/cover;
}

.hero:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        0deg,
        #07090c 0%,
        transparent 23%,
        transparent 77%,
        #07090c 100%
    );
    pointer-events:none;
}

.hero-content{
    position:relative;
    z-index:2;
    max-width:790px;
    padding:100px 0;
}

.badge{
    display:inline-block;
    padding:8px 13px;
    border:1px solid #ffffff24;
    border-radius:999px;
    background:#ffffff0b;
    color:#dce1e5;
    font-size:11px;
    font-weight:800;
    letter-spacing:1.7px;
}

.hero h1{
    font-size:clamp(45px,6.5vw,80px);
    line-height:.98;
    letter-spacing:-3px;
    margin:23px 0;
}

.hero h1 span{
    display:block;
    color:#b9c1c7;
}

.hero p{
    font-size:18px;
    color:#b3bdc5;
    max-width:700px;
    margin-bottom:28px;
}

.actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

/* SECTIONS */
.section{
    padding:95px 0;
}

.alt{
    background:#0b0f14;
    border-top:1px solid #ffffff0b;
    border-bottom:1px solid #ffffff0b;
}

.head{
    max-width:780px;
    margin-bottom:38px;
}

.eyebrow{
    color:#bfc7cd;
    font-size:11px;
    font-weight:800;
    letter-spacing:1.8px;
}

.head h2{
    font-size:clamp(32px,4vw,52px);
    line-height:1.05;
    margin:8px 0 12px;
    letter-spacing:-1.5px;
}

.head p{
    color:var(--muted);
}

/* CATEGORY CARDS */
.grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:17px;
}

.card{
    background:linear-gradient(145deg,#151b21,#0c1116);
    border:1px solid #ffffff13;
    border-radius:18px;
    overflow:hidden;
    transition:.3s;
}

.card:hover{
    transform:translateY(-6px);
    border-color:#aeb7bf44;
    box-shadow:0 25px 50px #0007;
}

.card-img{
    height:190px;
    overflow:hidden;
    background:#0b0f13;
}

.card-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

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

.card-body{
    padding:20px;
}

.card h3{
    font-size:19px;
    margin-bottom:6px;
}

.card p{
    color:#9da7af;
    font-size:14px;
}

.more{
    display:inline-block;
    margin-top:14px;
    color:#e4e7e9;
    font-size:13px;
    font-weight:800;
}

/* FEATURE */
.feature{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}

.photo{
    min-height:500px;
    border-radius:23px;
    background:url("hero.jpg") center/cover;
    border:1px solid #ffffff13;
}

.copy{
    padding:42px;
    border-radius:23px;
    background:#11171d;
    border:1px solid #ffffff13;
}

.copy h2{
    font-size:43px;
    line-height:1.05;
    margin:10px 0 18px;
}

.copy p{
    color:var(--muted);
}

.checks{
    display:grid;
    gap:12px;
    margin:24px 0;
}

.checks div{
    color:#cfd5da;
}

/* STEPS */
.steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:17px;
}

.step{
    padding:30px;
    border:1px solid #ffffff13;
    border-radius:18px;
    background:#10151a;
}

.num{
    font-size:45px;
    color:#65717b;
    font-weight:900;
    line-height:1;
}

.step h3{
    margin:13px 0 5px;
}

.step p{
    color:#99a4ad;
}

/* CITIES */
.cities{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
}

.city{
    padding:9px 14px;
    border:1px solid #ffffff15;
    background:#10161c;
    border-radius:99px;
    color:#c9d0d5;
}

.city.main{
    background:#19150d;
    border-color:#b99b65;
    color:#f1e4c9;
}

/* PAGE HERO */
.page-hero{
    padding:100px 0 70px;
    background:linear-gradient(135deg,#121820,#080b0f);
    border-bottom:1px solid #ffffff0b;
}

.crumb{
    font-size:12px;
    color:#77828c;
}

.page-hero h1{
    font-size:clamp(40px,5vw,65px);
    line-height:1;
    letter-spacing:-1.8px;
    margin:10px 0;
}

.page-hero p{
    max-width:780px;
    color:#aab4bc;
}

/* PRODUCT CATALOG */
.catalog{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.product{
    background:#11171d;
    border:1px solid #ffffff13;
    border-radius:18px;
    overflow:hidden;
    transition:.3s;
}

.product:hover{
    transform:translateY(-5px);
    border-color:#c99b5255;
    box-shadow:0 20px 45px #0008;
}

.product img{
    width:100%;
    height:220px;
    object-fit:cover;
    background:#090c10;
}

.product-body{
    padding:20px;
}

.product h3{
    font-size:19px;
}

.product p{
    color:#9ca6ae;
    font-size:14px;
    margin-top:5px;
}

.tag{
    display:inline-block;
    margin-top:12px;
    padding:5px 9px;
    border-radius:7px;
    border:1px solid #c99b5240;
    background:#1b1710;
    color:#d8bf93;
    font-size:11px;
}

/* CONTACT */
.contact{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.contact-box{
    padding:34px;
    background:#10161c;
    border:1px solid #ffffff13;
    border-radius:20px;
}

.contact-box h2{
    font-size:30px;
    margin-bottom:10px;
}

.contact-link{
    display:block;
    padding:14px 0;
    border-bottom:1px solid #ffffff0d;
    font-weight:800;
    color:#e7ebee;
}

/* CTA */
.cta{
    padding:80px 0;
    background:linear-gradient(100deg,#111820,#17130c);
    border-top:1px solid #ffffff0b;
    border-bottom:1px solid #ffffff0b;
}

.cta-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}

.cta h2{
    font-size:42px;
    line-height:1.05;
}

.cta p{
    color:#a5afb7;
    margin-top:7px;
}

/* FOOTER */
.footer{
    padding:45px 0;
    border-top:1px solid #ffffff0d;
    color:#818c95;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:30px;
}

.footer h3{
    color:#e5e8ea;
    margin-bottom:10px;
}

.footer a{
    display:block;
    color:#8e99a2;
    margin:5px 0;
}

.bottom{
    margin-top:30px;
    padding-top:18px;
    border-top:1px solid #ffffff0d;
    font-size:12px;
}

/* MOBILE */
@media(max-width:1050px){
    .grid{grid-template-columns:repeat(2,1fr)}
    .menu{gap:10px}
    .menu a{font-size:12px}
}

@media(max-width:760px){
    .menu-btn{display:block}

    .menu{
        display:none;
        position:absolute;
        top:78px;
        left:0;
        right:0;
        padding:20px 4%;
        background:#070a0e;
        flex-direction:column;
        align-items:flex-start;
        border-bottom:1px solid #ffffff12;
    }

    .menu.open{display:flex}

    .nav .navbtn{display:none}

    .hero{
        min-height:680px;
        background-position:65% center;
    }

    .feature,
    .contact,
    .steps,
    .footer-grid{
        grid-template-columns:1fr;
    }

    .photo{min-height:360px}

    .cta-inner{
        display:block;
    }

    .cta .btn{
        margin-top:20px;
    }

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

    .section{
        padding:70px 0;
    }
}

@media(max-width:500px){
    .logo{font-size:14px}
    .logo-mark{width:40px;height:40px}

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

    .hero h1{
        letter-spacing:-2px;
    }

    .hero p{
        font-size:16px;
    }

    .actions .btn{
        width:100%;
    }

    .copy{
        padding:28px;
    }

    .copy h2{
        font-size:34px;
    }

    .page-hero{
        padding:75px 0 55px;
    }
}

/* CLIENT PHOTO GALLERY */
.client-gallery{background:#090d12;border-top:1px solid #ffffff0b;border-bottom:1px solid #ffffff0b}
.client-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.client-photo{position:relative;min-height:250px;overflow:hidden;border-radius:18px;border:1px solid #ffffff18;background:#0c1116}
.client-photo-wide{grid-column:span 2}
.client-photo img{width:100%;height:100%;min-height:250px;object-fit:cover;transition:.45s}
.client-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000b,transparent 60%)}
.client-photo span{position:absolute;left:18px;bottom:15px;z-index:2;color:#fff;font-weight:800}
.product-body .btn{width:100%;margin-top:16px}
@media(max-width:760px){.client-gallery-grid{grid-template-columns:1fr 1fr}.client-photo-wide{grid-column:span 2}}
@media(max-width:500px){.client-gallery-grid{grid-template-columns:1fr}.client-photo-wide{grid-column:span 1}}