<style>

*{
box-sizing:border-box;
}

body{
margin:0;
font-family:"Segoe UI",Arial,sans-serif;
background:#fff;
color:#20252B;
}


/* HEADER */

.header{

height:80px;
background:#07131f;

display:flex;
align-items:center;

padding:0 50px;
gap:35px;

position:sticky;
top:0;
z-index:50;

}


/* LOGO */

.logo{

display:flex;
align-items:center;
gap:12px;
color:#fff;

min-width:220px;

}


.logo img{

width:190px;
height:auto;

}


@media(max-width:768px){

.logo img{

width:145px;

}

}


.logo-mark{

width:45px;
height:45px;

border:2px solid #1677ff;

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

color:#1677ff;

font-size:25px;

}


.logo b{

font-size:24px;
letter-spacing:2px;

}


.logo small{

display:block;
font-size:10px;
color:#9ba8b5;

}



/* MENU */


.menu{

display:flex;
gap:25px;
flex:1;
}


.menu a{

color:white;
text-decoration:none;
font-size:15px;

}


.menu-item{

position:relative;

}



.submenu{

position:absolute;
top:30px;
left:0;

width:240px;

background:#111d2a;

display:none;

padding:10px;

border-radius:6px;

}


.submenu a{

display:block;
padding:8px;

}


.menu-item:hover .submenu{

display:block;

}



/* LANGUAGE */


.lang{

position:relative;

}


.lang button{

height:38px;

background:#07131f;

border:1px solid #546273;

color:white;

padding:0 18px;

cursor:pointer;

}



.lang ul{

display:none;

position:absolute;

right:0;

top:45px;

list-style:none;

background:#111d2a;

padding:5px 0;

margin:0;

width:70px;

}



.lang.active ul{

display:block;

}


.lang li{

color:white;

padding:8px;

text-align:center;

cursor:pointer;

}


.lang li:hover{

background:#1677ff;

}



/* BURGER */

.burger{

display:none;
background:none;
border:0;

}


.burger span{

display:block;
width:25px;
height:3px;
background:#fff;
margin:5px;

}


/* HERO */

.hero{

min-height:650px;

display:flex;
align-items:center;

padding:60px;

color:white;


background-image:

linear-gradient(
90deg,
rgba(7,19,31,.92) 0%,
rgba(7,19,31,.65) 35%,
rgba(7,19,31,.15) 100%
),

url("../img/hero.jpg");


background-size:cover;

background-position:center center;

background-repeat:no-repeat;

}


.hero h1{

font-size:56px;

max-width:700px;

margin:20px 0;

}


.hero p{

font-size:20px;
max-width:650px;

}

.hero span{

font-size:24px;
max-width:650px;
color:#1677ff;

}


.btn{

display:inline-block;
background:#1677ff;
color:white;
padding:15px 30px;
margin-top:25px;
text-decoration:none;

}

/* Кнопки */
.heatin-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-light {
    padding: 16px 28px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-light {
    background: #F1F5F9;
    color: #0F172A;
}

.btn-light:hover {
    background: #dbe4ec;
}



/* MODAL */


.quote-modal{
position:fixed;
inset:0;
background:
rgba(0,0,0,.65);
display:none;
align-items:center;
justify-content:center;
z-index:999;
}



.quote-modal.active{
display:flex;
}


.quote-box{
background:#fff;
width:420px;
max-width:90%;
padding:35px;
border-radius:10px;
text-align:center;
position:relative;
box-shadow:
0 20px 50px rgba(0,0,0,.4);
}



.quote-box h2{
color:#20252B;
margin-top:0;
}



.quote-box p{
font-size:18px;
}



.quote-box a{
color:#1677FF;
text-decoration:none;
font-weight:600;
}



.quote-text{
margin-top:25px;
font-weight:700;
color:#20252B;
}



.quote-close{
position:absolute;
right:15px;
top:10px;
border:0;
background:none;

font-size:30px;

cursor:pointer;

color:#20252B;

}



/* мобильный */

@media(max-width:600px){


.quote-box{

padding:25px;

}


.quote-box p{

font-size:16px;

}


}



/* SECTIONS */
.section{padding:60px 50px;}
.title{ font-size:32px; margin-bottom:35px;}
.cards{display:grid; grid-template-columns:repeat(6,1fr); gap:20px; }

.card{position:relative; overflow:hidden;
/* добавил затенение изображения */
border-radius:8px; cursor:pointer; }

.card3 img{width:100%; height:300px; object-fit:cover; }

.card div{ position:absolute; color:white;
bottom:0; left:0; right:0; 
background: rgba(7,19,31,.78); padding:12px; }


/* 3 колонки, белый фон */
.cards3 { display:grid; grid-template-columns:repeat(3,1fr);
gap:20px; }

.card3 {position:relative; overflow:hidden; 
/* контур вокруг изображения */
border-radius:8px;  cursor:pointer;
}
.card3 div{
position:absolute;
color:white;
bottom:0; left:0; right:0;
background: rgba(7,19,31,.78); padding:12px;
}



/* изображение без тени */
/* .card img{width:100%; height:200px; object-fit:cover; } */
/* изображение без тени */


/* изображение с тенью начало */

.card-img{
position:relative;
height:220px;
overflow:hidden;
}



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

/* синий слой */

.card-img::after{
content:"";
position:absolute;
inset:0;
background:#1677FF;
opacity:0;
transition:.35s ease;
}


/* hover */
.card:hover .card-img::after{
opacity:.2;
}

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

.card:hover{

box-shadow:
0 15px 35px rgba(22,119,255,.35);

}

/* изображение с тенью конец */

.card  div a{
    color: #ffffff; 
    text-decoration:none;
}

.card div  a:hover {
  color: #1677ff;
}





/* PRODUCT */


.product{

display:grid;

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

gap:20px;

}


.product div{

background:#eee;

}


.product img{

width:100%;
height:150px;
object-fit:cover;

}


.product p{

padding:10px;

font-weight:600;

}


/* METAL */


.metal{
background:#07131f;
color:white;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;

}


.metal div{
height:150px;
background:#182636;
padding:30px;
font-size:22px;
}

.metal img{

width:100%;
height:120px;
object-fit:cover;

}


.metal  div a{
    color: #ffffff; 
    text-decoration:none;
}

.metal div  a:hover {
  color: #1677ff;
}






/* CONTACT */


.contact{

display:grid;

grid-template-columns:1fr 1fr;

background:#132333;

color:white;

padding:50px;

}



/* FOOTER */


footer{

background:#07131f;
color:#aaa;
padding:40px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

}

.footer a{
    color: #ffffff; 
    text-decoration:none;
}

.footer a:hover {
  color: #1677ff; 
}



/* MOBILE */


@media(max-width:900px){


.header{

height:70px;

padding:0 15px;

gap:12px;

}


.logo{

flex:1;

min-width:0;

}


.logo b{

font-size:17px;

}



.menu{

display:none;

position:absolute;

top:70px;
left:0;

background:#07131f;

width:100%;

flex-direction:column;

padding:25px;

}


.menu.active{

display:flex;

}



.burger{

display:block;

}



.hero{

height:450px;

padding:25px;

}



.hero h1{

font-size:36px;

}



.cards,
.product{

grid-template-columns:1fr;

}



.metal,
.contact,
footer{

grid-template-columns:1fr;

}


.submenu{

position:static;

display:none;

}



.menu-item:hover .submenu{

display:block;

}


}


@media(max-width:768px){

.hero{

background-position:center;

min-height:520px;

padding:30px 20px;

}


.hero h1{

font-size:34px;

}

}

</style>
