*{  
    margin:0;  
    padding:0;  
    box-sizing:border-box;  
}  
  
html{  
    scroll-behavior:smooth;  
    scrollbar-gutter: stable;  
}  
  
body{  
    font-family:"Montserrat", sans-serif;  
    background:#111;  
    color:#fff;  
}  
  
.hero{  
    position:relative;  
    width:100%;  
    background:url("hero.jpg") center center/cover no-repeat;  
    display:flex;  
    justify-content:center;  
    align-items:flex-start;  
    padding:100px 20px 60px;  
    min-height: 100vh;  
}  
  
.hero::before{  
    content:"";  
    position:absolute;  
    inset:0;  
    background:linear-gradient(  
        to right,  
        rgba(0,0,0,.65),  
        rgba(0,0,0,.25),  
        rgba(0,0,0,.45)  
    );  
}  
  
.hero-container{  
    position:relative;  
    z-index:2;  
    width:100%;  
    max-width:1400px;  
    display:flex;  
    justify-content:center;  
    align-items:center;  
}  
  
.hero-content{  
    text-align:center;  
    max-width:900px;  
}  
  
.hero-label{  
    display:inline-block;  
    padding:10px 20px;  
    border:1px solid rgba(255,255,255,.2);  
    border-radius:50px;  
    color:#d6b47b;  
    font-size:13px;  
    letter-spacing:3px;  
    margin-bottom:20px;  
    margin-top: 40px;  
}  
  
.hero h1{  
    font-size:84px;  
    line-height:1;  
    font-weight:800;  
    text-transform:uppercase;  
    margin-bottom:30px;  
}  
  
.hero h1 span{  
    display:block;  
    color:#d6b47b;  
}  
  
.hero p{  
    font-size:22px;  
    line-height:1.7;  
    color:#ddd;  
    max-width:700px;  
    margin:0 auto;  
}  
  
.hero-buttons{  
    display:flex;  
    justify-content:center;  
    gap:20px;  
    margin-top:50px;  
}  
  
.hero-buttons a{  
    width: 45%;  
    text-decoration:none;  
    padding:18px 42px;  
    border-radius:50px;  
    font-size:18px;  
    transition:.3s;  
}  
  
.btn-primary{  
    position:relative;  
    overflow:hidden;  
  
    background:linear-gradient(  
        135deg,  
        #c8a56a,  
        #f0d9a5,  
        #c8a56a  
    );  
  
    background-size:250% 250%;  
  
    color:#111;  
    font-weight:bold;  
  
    animation:goldFlow 8s ease-in-out infinite;  
  
    transition:transform .35s ease;  
}  
  
.btn-primary::before{  
    content:"";  
  
    position:absolute;  
  
    top:-50%;  
    left:-120%;  
  
    width:70%;  
    height:200%;  
  
    background:linear-gradient(  
        90deg,  
        transparent,  
        rgba(255,255,255,.5),  
        transparent  
    );  
  
    transform:rotate(25deg);  
  
    animation:shine 5s ease-in-out infinite;  
}  
  
  
.btn-primary:hover{  
    transform:translateY(-5px) scale(1.03);  
}  
  
@keyframes goldFlow{  
  
    0%{  
        background-position:0% 50%;  
    }  
  
    50%{  
        background-position:100% 50%;  
    }  
  
    100%{  
        background-position:0% 50%;  
    }  
  
}  
  
  
@keyframes shine{  
  
    0%{  
        left:-120%;  
        opacity:0;  
    }  
  
    10%{  
        opacity:1;  
    }  
  
    35%{  
        left:150%;  
        opacity:1;  
    }  
  
    45%{  
        opacity:0;  
    }  
  
    100%{  
        left:150%;  
        opacity:0;  
    }  
  
}  
  
.btn-outline{  
    border:1px solid #fff;  
    color:#fff;  
}  
  
.btn-outline:hover{  
    background:#fff;  
    color:#111;  
}  
  
.hero-info{  
    margin-top:70px;  
    display:flex;  
    justify-content:center;  
    gap:80px;  
}  
  
.hero-info div{  
    text-align:center;  
}  
  
.hero-info strong{  
    display:block;  
    font-size:46px;  
    color:#fff;  
}  
  
.hero-info span{  
    color:#aaa;  
    margin-top:8px;  
    display:block;  
}  
  
.hero-image{  
    display:none;  
}  
  
.material-card{  
    display:none;  
}  
  
.header{  
    position:fixed;  
    top:0;  
    left:0;  
    width:100%;  
    padding:25px 0;  
    z-index:1000;  
    background:rgba(0,0,0,.2);  
    backdrop-filter:blur(12px);  
}  
  
.container{  
    width:90%;  
    max-width:1400px;  
    margin:0 auto;  
  
    display:flex;  
    justify-content:space-between;  
    align-items:center;  
}  
  
.logo{  
    color:#fff;  
    text-decoration:none;  
    font-size:32px;  
    font-weight:800;  
    letter-spacing:2px;  
}  
  
.logo span{  
    color:#c8a56a;  
}  
  
.header-phone{  
    color:#fff;  
    text-decoration:none;  
    font-size:18px;  
    font-weight:600;  
}  
  
.burger{  
    width:32px;  
    height:42px;  
    background:none;  
    border:none;  
    cursor:pointer;  
  
    display:flex;  
    flex-direction:column;  
    justify-content:center;  
    gap:6px;  
}  
  
.burger span{  
    width:100%;  
    height:2px;  
    background:#fff;  
    border-radius:10px;  
}  
  
.header-right{  
    display:flex;  
    align-items:center;  
    gap:15px;  
}  
  
/* =========================  
   PRODUCTION SECTION  
========================= */  
  
.production{  
    background:#111;  
    padding:60px 20px;  
}  
  
  
.production-container{  
  
    max-width:1400px;  
    margin:0 auto;  
  
    display:flex;  
    align-items:center;  
    gap:80px;  
  
}  
  
  
  
.production-content{  
  
    flex:1;  
  
}  
  
  
  
.production-label{  
  
    color:#c8a56a;  
    font-size:13px;  
    letter-spacing:3px;  
    margin-bottom:25px;  
  
}  
  
  
  
.production h2{  
  
    font-size:55px;  
    line-height:1.1;  
    font-weight:900;  
    text-transform:uppercase;  
    margin-bottom:35px;  
  
}  
  
  
  
.production h2 span{  
  
    display:block;  
  
}  
  
  
  
.production p{  
  
    font-size:19px;  
    line-height:1.7;  
    color:#ccc;  
    margin-bottom:20px;  
    max-width:600px;  
  
}  
  
  
  
/* ГАЛЕРЕЯ */  
  
.production-gallery{  
  
    flex:1;  
  
}  
  
  
  
.production-main-image{  
  
    width:100%;  
    height:520px;  
    overflow:hidden;  
    border-radius:20px;  
    margin-bottom:20px;  
  
}  
  
  
  
.production-main-image img{  
  
    width:100%;  
    height:100%;  
    object-fit:cover;  
    transition:.5s;  
  
}  
  
  
  
.production-main-image:hover img{  
  
    transform:scale(1.05);  
  
}  
  
  
  
.production-small-images{  
  
    display:grid;  
    grid-template-columns:1fr 1fr;  
    gap:20px;  
  
}  
  
  
  
.production-small-images img{  
  
    width:100%;  
    height:220px;  
    object-fit:cover;  
    border-radius:20px;  
  
    transition:.4s;  
  
}  
  
  
  
.production-small-images img:hover{  
  
    transform:translateY(-5px);  
  
}  
  
/* =========================  
   PRODUCTS  
========================= */  
  
.products{  
    padding:100px 20px;  
    background:#111;  
}  
  
.products-container{  
    max-width:1400px;  
    margin:0 auto;  
}  
  
.products-header{  
    margin-bottom:50px;  
}  
  
.products-label{  
    color:#c8a56a;  
    letter-spacing:3px;  
    font-size:13px;  
    margin-bottom:20px;  
}  
  
.products h2{  
    font-size:55px;  
    font-weight:900;  
    text-transform:uppercase;  
}  
  
.products-slider{  
  
    display:flex;  
    gap:25px;  
  
    overflow-x:auto;  
    overflow-y:hidden;  
  
    padding-bottom:15px;  
  
    scroll-behavior:smooth;  
  
}  
  
.products-slider::-webkit-scrollbar{  
    height:8px;  
}  
  
.products-slider::-webkit-scrollbar-thumb{  
    background:#555;  
    border-radius:20px;  
}  
  
.product-card{  
  
    flex:0 0 340px;  
  
    height:460px;  
  
    position:relative;  
  
    border-radius:20px;  
  
    overflow:hidden;  
  
    text-decoration:none;  
  
}  
  
.product-card img{  
  
    width:100%;  
    height:100%;  
  
    object-fit:cover;  
  
}  
  
.product-card::before{  
  
    content:"";  
  
    position:absolute;  
    inset:0;  
  
    background:linear-gradient(  
        to top,  
        rgba(0,0,0,.75),  
        transparent 60%  
    );  
  
}  
  
.product-card span{  
  
    position:absolute;  
  
    left:25px;  
    bottom:25px;  
  
    color:#fff;  
  
    font-size:28px;  
    font-weight:800;  
  
    z-index:2;  
  
}  
  
.products-text{  
  
    max-width:700px;  
  
    margin-top:25px;  
  
    color:#cfcfcf;  
  
    font-size:18px;  
  
    line-height:1.8;  
  
}  
  
/* =========================  
   STEPS  
========================= */  
  
.steps{  
    padding:100px 20px;  
    background:#111;  
}  
  
.steps-container{  
    max-width:900px;  
    margin:0 auto;  
}  
  
.steps-label{  
    color:#c8a56a;  
    font-size:13px;  
    letter-spacing:3px;  
    margin-bottom:20px;  
}  
  
.steps h2{  
    font-size:55px;  
    font-weight:900;  
    text-transform:uppercase;  
    margin-bottom:60px;  
}  
  
.steps-list{  
    display:flex;  
    flex-direction:column;  
}  
  
.step{  
    display:flex;  
    align-items:center;  
    gap:35px;  
    position: relative;  
    padding:30px 0;  
  
    border-bottom:1px solid rgba(255,255,255,.08);  
}  
  
.step-number{  
    font-size:64px;  
    font-weight:900;  
    color:#c8a56a;  
    min-width:110px;  
}  
  
.step-title{  
    position: absolute;  
  
    left: 50%;  
  
    transform: translateX(-50%);  
    font-size:32px;  
    font-weight:700;  
    color:#fff;  
}  
  
.step-arrow{  
    position:relative;  
    display:flex;  
    justify-content:center;  
    height:50px;  
    font-size: 40px;  
}  
  
.step-arrow::before{  
    content:"";  
    position:absolute;  
    top:0;  
    bottom:0;  
    background:rgba(255,255,255,.15);  
}  
  
.step-arrow span{  
    position:relative;  
    z-index:1;  
  
    width:60px;  
    height:60px;  
  
    display:flex;  
    align-items:center;  
    justify-content:center;  
  
    background:#111;  
    border:1px solid #c8a56a;  
    border-radius:50%;  
  
    color:#c8a56a;  
    font-size:18px;  
}  
  
/* =========================  
   CONTACTS  
========================= */  
  
.contacts{  
    padding:100px 20px;  
    background:#111;  
}  
  
.contacts-container{  
    max-width:1400px;  
    margin:0 auto;  
}  
  
.contacts-label{  
    color:#c8a56a;  
    font-size:13px;  
    letter-spacing:3px;  
    margin-bottom:20px;  
}  
  
.contacts h2{  
    font-size:55px;  
    font-weight:900;  
    text-transform:uppercase;  
    margin-bottom:25px;  
}  
  
.contacts-text{  
    max-width:650px;  
    font-size:18px;  
    line-height:1.8;  
    color:#ccc;  
    margin-bottom:60px;  
}  
  
.contacts-grid{  
    display:grid;  
    grid-template-columns:repeat(2,1fr);  
    gap:30px;  
    margin-bottom:70px;  
}  
  
.contact-item{  
    background:#181818;  
    border:1px solid rgba(255,255,255,.08);  
    border-radius:20px;  
    padding:30px;  
}  
  
.contact-item span{  
    display:block;  
    font-size:13px;  
    letter-spacing:2px;  
    color:#c8a56a;  
    margin-bottom:15px;  
    text-transform:uppercase;  
}  
  
.contact-item a,  
.contact-item p{  
    color:#fff;  
    text-decoration:none;  
    font-size:24px;  
    font-weight:700;  
    line-height:1.5;  
}  
  
.contact-item a:hover{  
    color:#c8a56a;  
}  
  
.contacts-footer{  
    padding-top:30px;  
    border-top:1px solid rgba(255,255,255,.08);  
  
    display:flex;  
    justify-content:space-between;  
    align-items:center;  
    gap:20px;  
}  
  
.contacts-footer p{  
    color:#888;  
    font-size:15px;  
}  
  
.contacts-footer a{  
    color:#c8a56a;  
    text-decoration:none;  
    font-size:15px;  
}  
  
.contacts-footer a:hover{  
    text-decoration:underline;  
}  
  
/* =========================  
   ADVANTAGES  
========================= */  
  
.advantages{  
    padding:100px 20px;  
    background:#111;  
}  
  
.advantages-container{  
    max-width:1400px;  
    margin:0 auto;  
  
    display:flex;  
    align-items:center;  
    gap:80px;  
}  
  
.advantages-content{  
    flex:1;  
}  
  
.advantages-label{  
    color:#c8a56a;  
    font-size:13px;  
    letter-spacing:3px;  
    margin-bottom:20px;  
}  
  
.advantages h2{  
    font-size:55px;  
    font-weight:900;  
    line-height:1.15;  
    margin-bottom:50px;  
    text-transform:uppercase;  
}  
  
.advantages-list{  
    display:flex;  
    flex-direction:column;  
    gap:30px;  
}  
  
.advantage-item{  
    padding-bottom:25px;  
    border-bottom:1px solid rgba(255,255,255,.08);  
}  
  
.advantage-item h3{  
    font-size:24px;  
    font-weight:800;  
    margin-bottom:12px;  
}  
  
.advantage-item p{  
    color:#cfcfcf;  
    font-size:17px;  
    line-height:1.7;  
}  
  
.advantages-image{  
    flex:1;  
}  
  
.advantages-image img{  
    width:100%;  
    border-radius:24px;  
    display:block;  
    object-fit:cover;  
}  
  
.modal{  
    position:fixed;  
    inset:0;  
    height:100dvh;  
    display:flex;  
    justify-content:center;  
    align-items:center;  
  
    background:rgba(0,0,0,.75);  
    backdrop-filter:blur(8px);  
    pointer-events:none;  
  
    opacity:0;  
    visibility:hidden;  
  
    transition:.35s;  
  
    z-index:9999;  
}  
  
.modal.active{  
    opacity:1;  
    visibility:visible;  
    pointer-events:auto;  
}  
  
.modal-window{  
    width:100%;  
    max-width:520px;  
  
    background:#181818;  
  
    border:1px solid rgba(255,255,255,.08);  
    border-radius:24px;  
  
    padding:45px;  
  
    position:relative;  
  
    transform:translateY(40px) scale(.95);  
    transition:.35s;  
}  
  
.modal.active .modal-window{  
    transform:translateY(0) scale(1);  
}  
  
.modal-close{  
    position:absolute;  
    top:18px;  
    right:20px;  
  
    background:none;  
    border:none;  
  
    color:#fff;  
    font-size:34px;  
  
    cursor:pointer;  
    transition:.3s;  
}  
  
.modal-close:hover{  
    color:#c8a56a;  
}  
  
.modal-window h2{  
    font-size:34px;  
    font-weight:800;  
    margin-bottom:18px;  
}  
  
.modal-window p{  
    color:#cfcfcf;  
    line-height:1.7;  
    margin-bottom:30px;  
}  
  
.modal form{  
    display:flex;  
    flex-direction:column;  
    gap:18px;  
}  
  
.modal input{  
    width:100%;  
  
    background:#111;  
  
    border:1px solid rgba(255,255,255,.08);  
    border-radius:14px;  
  
    padding:18px 20px;  
  
    color:#fff;  
    font-size:16px;  
  
    outline:none;  
    transition:.3s;  
}  
  
.modal input:focus{  
    border-color:#c8a56a;  
}  
  
.modal button[type="submit"]{  
    padding:18px;  
  
    border:none;  
    border-radius:50px;  
  
    background:#c8a56a;  
    color:#111;  
  
    font-size:16px;  
    font-weight:700;  
  
    cursor:pointer;  
    transition:.3s;  
}  
  
.modal button[type="submit"]:hover{  
    background:#fff;  
    transform:translateY(-3px);  
}  
  
.modal-policy{  
    margin-top:20px;  
  
    color:#999;  
    font-size:13px;  
    line-height:1.6;  
}  
  
.modal-policy a{  
    color:#c8a56a;  
    text-decoration:none;  
}  
  
.modal-policy a:hover{  
    text-decoration:underline;  
}  
  
#toast{  
    position:fixed;  
    top:30px;  
    right:30px;  
  
    min-width:320px;  
    max-width:420px;  
  
    padding:18px 24px;  
  
    background:#181818;  
    color:#fff;  
  
    border:1px solid rgba(255,255,255,.08);  
    border-left:4px solid #c8a56a;  
    border-radius:16px;  
  
    font-size:15px;  
    line-height:1.6;  
  
    box-shadow:0 20px 60px rgba(0,0,0,.45);  
  
    transform:translateX(450px);  
    opacity:0;  
  
    transition:.35s ease;  
  
    z-index:10000;  
}  
  
#toast.show{  
    transform:translateX(0);  
    opacity:1;  
}  
  
#toast.success{  
    border-left-color:#58c26b;  
}  
  
#toast.error{  
    border-left-color:#d46b6b;  
}  
  
.mobile-menu{  
    position:fixed;  
  
    top:0;  
    right:-100%;  
  
    width:320px;  
    height:100vh;  
  
    background:#111;  
  
    padding:100px 35px 40px;  
  
    display:flex;  
    flex-direction:column;  
    gap:25px;  
  
    z-index:999;  
  
    transition:.4s;  
  
    border-left:1px solid rgba(255,255,255,.08);  
}  
  
  
.mobile-menu.active{  
    right:0;  
}  
  
  
.mobile-menu a{  
    color:#fff;  
    text-decoration:none;  
  
    font-size:20px;  
    font-weight:600;  
  
    transition:.3s;  
}  
  
  
.mobile-menu a:hover{  
    color:#c8a56a;  
}  
  
  
.menu-phone{  
  
    margin-top:auto;  
  
    padding-top:30px;  
  
    border-top:1px solid rgba(255,255,255,.1);  
  
}  
  
  
.menu-phone span{  
  
    display:block;  
  
    color:#c8a56a;  
  
    font-size:12px;  
  
    letter-spacing:2px;  
  
    margin-bottom:12px;  
  
    text-transform:uppercase;  
  
}  
  
  
.menu-phone a{  
  
    font-size:22px;  
  
}  
  
.menu-close{  
  
    position:absolute;  
  
    top:25px;  
    right:25px;  
  
    width:40px;  
    height:40px;  
  
    background:none;  
    border:none;  
  
    color:#fff;  
  
    font-size:40px;  
    line-height:1;  
  
    cursor:pointer;  
  
}  
  
  
.menu-close:hover{  
  
    color:#c8a56a;  
  
}  
  
  
  
@media(max-width:700px){  
  
.hero{  
    background:url("hero-mobile.jpg") center center/cover no-repeat;  
}  
      
.hero{  
    padding:40px 20px;  
}  
  
.hero h1{  
    font-size:42px;  
    font-weight: 900;  
}  
  
.hero p{  
    font-size:16px;  
}  
  
.hero-buttons{  
    flex-direction:column;  
}  
  
.hero-buttons a{  
    width:100%;  
}  
  
.hero-info{  
    flex-direction:column;  
    gap:20px;  
    margin-top: 30px;  
}  
  
.hero-label{  
    font-size:11px;  
    margin-bottom: 20px;  
    margin-top: 70px;  
}  
  
.hero-info strong{  
    font-size:32px;  
}  
  
.logo {  
    font-size: 20px;  
}  
  
.header-phone {  
    font-size: 15px;  
}  
  
.burger {  
    width: 30px;  
    height: 25px;  
}  
  
#production {  
    scroll-margin-top:80px;  
}  
  
.production{  
  
    padding:0px 20px;  
}  
  
  
  
.production-container{  
  
    flex-direction:column;  
    gap:50px;  
  
}  
  
  
  
.production h2{  
  
    font-size:34px;  
  
}  
  
  
  
.production p{  
  
    font-size:16px;  
  
}  
  
  
  
.production-main-image{  
  
    height:350px;  
  
}  
  
  
  
.production-small-images img{  
  
    height:150px;  
  
}  
  
.products{  
  
    padding:80px 20px;  
  
}  
  
.products h2{  
  
    font-size:34px;  
  
}  
  
.product-card{  
  
    flex:0 0 260px;  
    height:360px;  
  
}  
  
  
.products-text{  
  
    font-size:16px;  
  
    line-height:1.7;  
  
}  
  
.product-card span{  
  
    font-size:22px;  
  
}  
  
.steps{  
    padding:50px 20px;  
}  
  
.steps h2{  
    font-size:34px;  
    margin-bottom:40px;  
}  
  
.step{  
    gap:20px;  
    padding:22px 0;  
}  
  
.step-number{  
    font-size:42px;  
    min-width:70px;  
}  
  
.step-title{  
    font-size:22px;  
}  
  
.step-arrow{  
    font-size:24px;  
    padding:10px 0;  
}  
  
.contacts{  
    padding:40px 20px;  
}  
  
.contacts h2{  
    font-size:34px;  
}  
  
.contacts-text{  
    font-size:16px;  
    margin-bottom:40px;  
}  
  
.contacts-grid{  
    grid-template-columns:1fr;  
    gap:20px;  
    margin-bottom:40px;  
}  
  
.contact-item{  
    padding:25px;  
}  
  
.contact-item a,  
.contact-item p{  
    font-size:20px;  
}  
  
.contacts-footer{  
    flex-direction:column;  
    align-items:flex-start;  
}  
  
.contacts-footer p,  
.contacts-footer a{  
    font-size:14px;  
}  
  
.advantages{  
    padding:70px 20px;  
}  
  
.advantages-container{  
    flex-direction:column;  
    gap:50px;  
}  
  
.advantages h2{  
    font-size:27px;  
    margin-bottom:35px;  
}  
  
.advantage-item h3{  
    font-size:20px;  
}  
  
.advantage-item p{  
    font-size:16px;  
}  
  
    .modal{  
        padding:20px;  
    }  
  
    .modal-window{  
        padding:30px 25px;  
    }  
  
    .modal-window h2{  
        font-size:28px;  
    }  
  
    #toast{  
        left:20px;  
        right:20px;  
        top:20px;  
  
        min-width:auto;  
        max-width:none;  
  
        transform:translateY(-100px);  
    }  
  
    #toast.show{  
        transform:translateY(0);  
    }  
  
    #advantages,  
    #steps,  
    #contacts{  
        scroll-margin-top:50px;  
    }  
  
}