/* =================================
ROOT VARIABLES
================================= */

:root{

--bg:#07111f;
--card:rgba(10,20,36,0.78);
--card-border:rgba(255,255,255,0.08);

--text:#f4f7fb;
--muted:#aab7ca;

--accent:#ff7a18;
--accent2:#40a6ff;

--radius:20px;
--shadow:0 20px 60px rgba(0,0,0,0.35);

--container:1180px;

}

/* =================================
RESET
================================= */

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

body{
font-family:"Inter",sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.6;
overflow-x:hidden;
}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
color:inherit;
}

/* =================================
CONTAINER
================================= */

.container{

max-width:var(--container);
width:100%;
margin:0 auto;
padding-left:20px;
padding-right:20px;

}

.section{
padding:90px 0;
}

/* =================================
HEADER
================================= */

.site-header{

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

background:rgba(10,20,40,0.75);
backdrop-filter:blur(12px);

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

}

.nav-wrap{

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

min-height:70px;

}

.main-nav{

display:flex;
gap:24px;

}

.main-nav a{

font-weight:600;
color:var(--muted);

}

.main-nav a:hover{

color:white;

}

/* =================================
BUTTON
================================= */

.btn{

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

height:48px;
padding:0 22px;

border-radius:14px;

font-weight:700;

color:white;

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

}

/* =================================
HERO
================================= */

.hero{

padding-top:60px;

}

.hero-grid{

display:grid;
grid-template-columns:1.1fr 0.9fr;
gap:40px;
align-items:center;

}

.hero h1{

font-size:clamp(2.5rem,5vw,4.5rem);
line-height:1.1;

margin-bottom:18px;

}

.hero-text{

color:var(--muted);

}

/* =================================
HERO VISUAL
================================= */

.hero-visual{

position:relative;
min-height:520px;

}

.glass-card{

position:absolute;

padding:26px;

border-radius:var(--radius);

background:var(--card);

border:1px solid var(--card-border);

box-shadow:var(--shadow);

width:300px;

}

.card-primary{
top:0;
left:0;
}

.card-secondary{
top:60px;
right:0;
}

.card-third{
bottom:0;
left:40px;
}

.card-fourth{
bottom:60px;
right:40px;
}

/* =================================
GRID SYSTEM
================================= */

.service-grid,
.catalog-grid,
.project-grid,
.brand-grid,
.strip-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;

}

/* =================================
CARDS
================================= */

.service-card,
.product-card,
.project-card{

padding:26px;

background:var(--card);
border:1px solid var(--card-border);

border-radius:var(--radius);

}

/* =================================
CONTACT GRID
================================= */

.contact-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:30px;

}

/* =================================
FOOTER
================================= */

.site-footer{

padding:40px 0;
border-top:1px solid rgba(255,255,255,0.06);

}

.footer-wrap{

display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:20px;

color:var(--muted);

}

/* =================================
LAPTOP
================================= */

@media(max-width:1200px){

.hero-grid,
.contact-grid{

grid-template-columns:1fr;

}

.service-grid,
.catalog-grid,
.project-grid,
.brand-grid,
.strip-grid{

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

}

}

/* =================================
TABLET
================================= */

@media(max-width:900px){

.section{
padding:70px 0;
}

.hero-visual{

min-height:420px;

}

}

/* =================================
MOBILE
================================= */

@media(max-width:768px){

.hero-grid{

grid-template-columns:1fr;

}

.hero h1{

font-size:clamp(2rem,8vw,3rem);

}

.hero-visual{

display:flex;
flex-direction:column;
gap:18px;
min-height:auto;

}

.glass-card{

position:relative;
top:auto;
left:auto;
right:auto;
bottom:auto;

width:100%;

}

.service-grid,
.catalog-grid,
.project-grid,
.brand-grid,
.strip-grid{

grid-template-columns:1fr;

}

.btn{

width:100%;

}

.footer-wrap{

flex-direction:column;

}

}

/* =================================
SMALL PHONE
================================= */

@media(max-width:480px){

.hero h1{

font-size:clamp(1.6rem,9vw,2.2rem);

}

.section{
padding:55px 0;
}

.container{

padding-left:14px;
padding-right:14px;

}

}