*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:Arial,Helvetica,sans-serif;
background:#090d12;
color:#fff;
line-height:1.6;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}


/* HEADER */

.header{
position:fixed;
top:0;
left:0;
width:100%;
z-index:100;
background:rgba(8,12,17,.9);
backdrop-filter:blur(15px);
border-bottom:1px solid rgba(255,255,255,.08);
}


.header-inner{
height:90px;
display:flex;
align-items:center;
justify-content:space-between;
}


/* .logo img{ */

/* height:75px; */

/* width:auto; */

/* object-fit:contain; */

/* filter: */
/* drop-shadow(0 0 3px #fff) */
/* drop-shadow(0 0 12px rgba(200,162,77,.8)) */
/* drop-shadow(0 0 25px rgba(200,162,77,.5)); */

/* } */
.logo img {
    height: 75px;
    width: auto;
    object-fit: contain;

    filter:
    drop-shadow(0 0 3px #c8a24d)
    drop-shadow(0 0 12px rgba(200,162,77,.9))
    drop-shadow(0 0 25px rgba(200,162,77,.6));
}

.menu{
display:flex;
gap:30px;
}


.menu a{
color:#fff;
text-decoration:none;
transition:.3s;
}


.menu a:hover{
color:#c8a24d;
}


/* HEADER CONTACTS */

.header-actions{

display:flex;

align-items:center;

gap:25px;

}


.phones{

display:flex;

flex-direction:column;

gap:3px;

text-align:right;

}


.phones a{

color:#c8a24d;

font-size:16px;

font-weight:bold;

text-decoration:none;

line-height:1.3;

transition:.3s;

}


.phones a:hover{

color:#fff;

}



.header-button{

background:#c8a24d;

color:#111!important;

padding:12px 22px;

border-radius:12px;

text-decoration:none;

font-weight:bold;

font-size:14px;

white-space:nowrap;

transition:.3s;

}


.header-button:hover{

transform:translateY(-2px);

box-shadow:0 8px 25px rgba(200,162,77,.35);

}


.header-phone{
color:#c8a24d;
font-weight:bold;
font-size:18px;
}


.header-button{
background:#c8a24d;
color:#111;
padding:10px 18px;
border-radius:10px;
text-decoration:none;
font-weight:bold;
font-size:14px;
}



/* HERO */

.hero{
min-height:100vh;
display:flex;
align-items:center;

background:
linear-gradient(
90deg,
rgba(5,8,12,.95),
rgba(5,8,12,.55)
),
url('../images/security-bg.jpg')
center/cover no-repeat;
}


.hero-content{
padding-top:100px;
animation:show 1s ease;
}


.hero-label{
color:#c8a24d;
font-size:18px;
margin-bottom:25px;
}


.hero h1{
font-size:64px;
line-height:1.1;
margin-bottom:25px;
}


.hero p{
font-size:21px;
max-width:750px;
color:#ddd;
}


.accent{
margin-top:20px;
color:#c8a24d!important;
}



.buttons{
display:flex;
gap:20px;
margin-top:40px;
}


.btn{
padding:16px 35px;
border-radius:12px;
text-decoration:none;
font-weight:bold;
transition:.3s;
}


.primary{
background:#c8a24d;
color:#111;
}


.primary:hover{
transform:translateY(-3px);
box-shadow:0 10px 30px rgba(200,162,77,.4);
}


.secondary{
border:1px solid #c8a24d;
color:#fff;
}



.hero-stats{
display:flex;
gap:20px;
margin-top:55px;
}


.hero-stats div{
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.1);
padding:20px 30px;
border-radius:15px;
text-align:center;
}


.hero-stats strong{
display:block;
font-size:32px;
color:#c8a24d;
}


.hero-stats span{
font-size:14px;
color:#ddd;
}




/* SECTIONS */

.section{
padding:90px 0;
}


.dark{
background:#121820;
}


h2{
font-size:42px;
margin-bottom:40px;
}




/* SERVICES */

.cards{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

}


.card{

background:#121820;

border:1px solid rgba(255,255,255,.08);

padding:30px;

border-radius:18px;

transition:.3s;

}


.card h3{

color:#c8a24d;

margin-bottom:15px;

}


.card p{

color:#ccc;

}


.service-card{

position:relative;

overflow:hidden;

}


/* .service-icon{ */

/* font-size:38px; */

/* color:#c8a24d; */

/* margin-bottom:20px; */

/* } */

.service-icon{

width:56px;

height:56px;

margin-bottom:20px;

display:flex;

align-items:center;

justify-content:flex-start;

}

.service-icon img{

width:48px;

height:48px;

display:block;

stroke:#c8a24d;

transition:.3s;

filter:drop-shadow(0 0 6px rgba(200,162,77,.25));

}


.service-card:hover .service-icon img{

transform:scale(1.08);

filter:drop-shadow(0 0 12px rgba(200,162,77,.45));

}


.service-card:before{

content:"";

position:absolute;

top:0;

left:0;

height:3px;

width:0;

background:#c8a24d;

transition:.4s;

}


.service-card:hover:before{

width:100%;

}



/* SOLUTION */

.solution{

background:
linear-gradient(135deg,#10151d,#07090d);

}


.solution-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}


.solution-text p{

font-size:20px;

color:#ccc;

margin-bottom:20px;

}


.gold-text{

color:#c8a24d;

font-weight:bold;

}
/* SCHEME */


.scheme{

display:flex;

flex-direction:column;

align-items:center;

}


.scheme-item{

width:100%;

max-width:350px;

padding:15px;

background:rgba(255,255,255,.06);

border: 1px solid rgba(200,162,77,0.8);

border-radius:15px;

text-align:center;

font-size:20px;

}


.line{

height:40px;

width:2px;

background:#c8a24d;

}



/* PROCESS */


.process{

background:#0d131b;

}


.process-grid{

display:grid;

grid-template-columns:repeat(5,1fr);

gap:20px;

}


.process-item{

background:#121820;

padding:25px;

border-radius:18px;

border:1px solid rgba(255,255,255,.08);

transition:.3s;

}


.process-item:hover{

transform:translateY(-8px);

border-color:#c8a24d;

}


.process-number{

font-size:42px;

font-weight:bold;

color:#c8a24d;

}


.process-item h3{

margin:15px 0;

}


.process-item p{

color:#ccc;

}



/* OBJECTS */


.objects{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

}


.objects div{

background:#0d131b;

padding:30px;

border-radius:18px;

border:1px solid rgba(255,255,255,.08);

}


.objects h3{

color:#c8a24d;

margin-bottom:15px;

}





/* ADVANTAGES */


.advantages{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

}


.advantages div{

background:#10151d;

padding:25px;

border-radius:15px;

border:1px solid rgba(255,255,255,.08);

font-size:18px;

}





/* CONTACTS */


.contact-section{

background:#10151d;

}


.contact-text{

font-size:20px;

color:#ccc;

margin-bottom:30px;

}


.contact-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:start;

}



.contacts-box{

display:flex;

flex-direction:column;

gap:18px;

}



.contacts-box div{

background:#090d12;

padding:22px 30px;

border-radius:15px;

border:1px solid rgba(255,255,255,.08);

}



.contacts-box h3{

font-size:18px;

color:#c8a24d;

margin-bottom:8px;

}



.contacts-box p{

font-size:18px;

color:#fff;

margin:3px 0;

}





/* FORM */


.request-form{

background:#090d12;

padding:35px;

border-radius:20px;

border:1px solid rgba(255,255,255,.08);

}


.request-form input,
.request-form textarea{

width:100%;

padding:16px;

margin-bottom:20px;

background:#121820;

border:1px solid rgba(255,255,255,.15);

border-radius:10px;

color:#fff;

font-size:16px;

font-family:Arial,Helvetica,sans-serif;

}


.request-form textarea{

height:120px;

resize:none;

}


.request-form input::placeholder,
.request-form textarea::placeholder{

font-family:Arial,Helvetica,sans-serif;

color:#999;

}


.request-form button{

width:100%;

padding:17px;

background:#c8a24d;

border:none;

border-radius:12px;

font-size:17px;

font-weight:bold;

cursor:pointer;

transition:.3s;

}


.request-form button:hover{

opacity:.85;

}





/* FLOATING MESSENGERS */


.messengers{

position:fixed;

right:25px;

bottom:25px;

display:flex;

flex-direction:column;

gap:15px;

z-index:200;

}



.messengers a{

width:60px;

height:60px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

box-shadow:0 10px 30px rgba(0,0,0,.45);

transition:.3s;

animation:floatIn .5s ease;

}



.messengers i{

font-size:30px;

color:#fff;

}



.wa{

background:#25D366;

}



.tg{

background:#229ED9;

}



.messengers a:hover{

transform:scale(1.12);

}





/* FOOTER */


footer{

padding:40px 0;

background:#05070a;

color:#aaa;

}




/* ANIMATION */


@keyframes show{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}



@keyframes floatIn{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}





/* MOBILE */


@media(max-width:900px){


.menu{

display:none;

}


.header-button{

display:none;

}


.hero h1{

font-size:42px;

}


.hero-stats{

flex-direction:column;

}


.cards{

grid-template-columns:1fr;

}


.solution-grid{

grid-template-columns:1fr;

}


.process-grid{

grid-template-columns:1fr;

}


.objects{

grid-template-columns:1fr;

}


.advantages{

grid-template-columns:1fr;

}


.contact-wrapper{

grid-template-columns:1fr;

}


.messengers{

right:15px;

bottom:20px;

}


.messengers a{

width:55px;

height:55px;

}


.messengers i{

font-size:26px;

}

}