:root{

--bg:#0D1117;
--card:#161B22;

--accent:#D97706;
--accent-light:#F59E0B;

--text:#FFFFFF;
--secondary:#9CA3AF;

}

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

html{
scroll-behavior:smooth;
}

body{
background:var(--bg);
color:var(--text);
font-family:Inter,Arial,sans-serif;
overflow-x:hidden;
padding-bottom:90px;
}

/* PRELOADER */

#preloader{
position:fixed;
inset:0;
background:#0D1117;
z-index:9999;

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

transition:.4s;
}

#preloader.hide{
opacity:0;
visibility:hidden;
}

.loader{
width:260px;
text-align:center;
}

.loader h1{
font-size:42px;
letter-spacing:6px;
color:var(--accent-light);
margin-bottom:10px;
}

.loader p{
font-size:13px;
color:var(--secondary);
margin-bottom:20px;
}

.loader-bar{
height:4px;
background:#222;
border-radius:30px;
overflow:hidden;
}

.loader-fill{
height:100%;
background:linear-gradient(
90deg,
var(--accent),
var(--accent-light)
);

animation:loading 2s linear forwards;
width:0;
}

@keyframes loading{

from{
width:0;
}

to{
width:100%;
}

}

/* HEADER */

.header{

height:75px;

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

padding:0 20px;

position:sticky;
top:0;

background:rgba(13,17,23,.95);

backdrop-filter:blur(15px);

z-index:500;

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

}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
}

.logo img{
    height:40px;
    width:auto;
}

.logo span{
    font-size:24px;
    font-weight:700;
    color:#F59E0B;
    letter-spacing:4px;
}

.lang{

display:flex;
gap:8px;

}

.lang button{

width:38px;
height:38px;

border:none;

border-radius:12px;

background:var(--card);

color:var(--secondary);

cursor:pointer;

font-size:12px;
font-weight:700;

}

.lang button.active{

background:var(--accent);

color:#fff;

}

/* HERO */

.hero{

padding:50px 20px;
text-align:center;

}

.hero h1{

font-size:38px;

line-height:1.2;

margin-bottom:15px;

}

.hero p{

color:var(--secondary);

font-size:15px;

line-height:1.7;

margin-bottom:25px;

}

.btn{

display:inline-flex;

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

height:52px;

padding:0 30px;

border-radius:50px;

background:linear-gradient(
135deg,
var(--accent),
var(--accent-light)
);

text-decoration:none;

color:white;

font-weight:700;

}

/* FEATURES */

.features{

padding:0 20px 30px;

display:flex;
flex-direction:column;
gap:15px;

}

.feature{

background:var(--card);

padding:18px;

border-radius:20px;

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

text-align:center;

}

/* SLIDER */

.slider-section{

padding:20px;

}

.slider{

position:relative;

}

.slider-wrapper{

overflow:hidden;

}

.slider-track{

display:flex;

gap:16px;

transition:.5s;

}

.slide{

min-width:85%;

}

.slide img{

width:100%;

height:430px;

object-fit:cover;

display:block;

border-radius:24px;

}

.prev,
.next{

position:absolute;

top:50%;

transform:translateY(-50%);

width:45px;
height:45px;

border:none;

border-radius:50%;

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

color:white;

cursor:pointer;

z-index:20;

font-size:20px;

}

.prev{
left:10px;
}

.next{
right:10px;
}

.slider-dots{

display:flex;

justify-content:center;

gap:8px;

margin-top:20px;

}

.dot{

width:10px;
height:10px;

background:#444;

border-radius:30px;

transition:.3s;

}

/* PRICES */

.prices{

padding:20px;

}

.prices h2{

font-size:28px;

margin-bottom:20px;

}

.card{

background:var(--card);

padding:24px;

border-radius:24px;

margin-bottom:16px;

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

}

.card h3{

margin-bottom:12px;

}

.card span{

display:block;

color:var(--secondary);

margin-bottom:15px;

}

.card strong{

font-size:24px;

color:var(--accent-light);

}

/* ABOUT */

.about-card{

background:var(--card);

padding:24px;

margin:20px;

border-radius:24px;

line-height:1.8;

}

/* CONTACTS */

.contact-card{

background:var(--card);

padding:20px;

margin:20px;

border-radius:24px;

display:flex;

align-items:center;

gap:15px;

}

.contact-card img{

width:32px;
height:32px;

}

.contact-card a{

text-decoration:none;
color:white;

}

/* VACANCIES */

.job-card{

background:var(--card);

padding:24px;

border-radius:24px;

margin:20px;

}

.job-card h3{

margin-bottom:12px;

}

.job-card p{

line-height:1.7;

color:var(--secondary);

margin-bottom:20px;

}

.job-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 22px;

border-radius:50px;

background:var(--accent);

color:white;

text-decoration:none;

font-weight:700;

}

.job-btn img{

width:18px;
height:18px;

}

/* FLOAT */

.tg,
.wp{

position:fixed;

right:15px;

width:42px;
height:42px;

z-index:300;

}

.tg{
bottom:150px;
}

.wp{
bottom:100px;
}

.tg img,
.wp img{

width:100%;
height:100%;

object-fit:contain;

}

/* BOTTOM MENU */

.bottom-nav{

position:fixed;

left:0;
bottom:0;

width:100%;
height:78px;

background:#111827;

display:flex;

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

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

z-index:1000;

}

.bottom-nav a{

flex:1;

height:100%;

display:flex;

flex-direction:column;

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

gap:4px;

text-decoration:none;

color:#6B7280;

transition:.3s;

}

.bottom-nav a.active{

color:var(--accent-light);

}

.bottom-nav svg{

width:24px;
height:24px;

stroke:currentColor;

fill:none;

stroke-width:2;

stroke-linecap:round;
stroke-linejoin:round;

}

.bottom-nav span{

font-size:10px;

}

/* PAGE TITLE */

.page-title{

padding:40px 20px 20px;

}

.page-title h1{

font-size:34px;

margin-bottom:10px;

}

.page-title p{

color:var(--secondary);

line-height:1.7;

}

/* MOBILE */

@media(max-width:768px){

.hero h1{
font-size:32px;
}

.slide img{
height:320px;
}

}

.admin-btn{

position:fixed;

top:15px;
right:15px;

width:44px;
height:44px;

display:flex;

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

text-decoration:none;

font-size:22px;

background:#161B22;

color:#F59E0B;

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

border-radius:50%;

z-index:2000;

box-shadow:
0 0 20px rgba(0,0,0,.4);

}

.admin-btn:hover{

transform:scale(1.05);

}