:root{
--primary:#16c1b3;
--secondary:#8a18b5;
--dark:#06111d;
--dark2:#0f172a;
--light:#f8fafc;
--text:#0f172a;
--muted:#64748b;
--border:#e2e8f0;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:Inter,Arial,sans-serif;
background:#fff;
color:var(--text);
line-height:1.7;
overflow-x:hidden;
}
.container{width:min(1420px,92%);margin:auto}
img{max-width:100%;display:block}
a{text-decoration:none}
section{padding:100px 0}

/* NAV */
.navbar{
position:fixed;
top:0;
left:0;
width:100%;
z-index:9999;
background:rgba(6,17,29,.88);
backdrop-filter:blur(16px);
border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-wrapper{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
}
.logo{
width:340px;
}
.nav-links{
display:flex;
gap:30px;
align-items:center;
}
.nav-links a{
font-size:17px;
font-weight:700;
color:#fff;
transition:.3s;
}
.nav-links a:hover{
color:var(--primary);
}
.btn-primary{
background:linear-gradient(135deg,var(--primary),var(--secondary));
padding:16px 28px;
border-radius:14px;
color:#fff!important;
box-shadow:0 16px 35px rgba(22,193,179,.22);
}
.mobile-toggle{
display:none;
font-size:38px;
font-weight:800;
cursor:pointer;
color:#fff;
}
.mobile-menu{
display:none;
flex-direction:column;
gap:18px;
padding:24px;
background:#08111f;
}
.mobile-menu.active{
display:flex;
}
.mobile-menu a{
color:#fff;
font-size:18px;
font-weight:700;
}

/* HERO */
.hero{
position:relative;
height:100vh;
overflow:hidden;
}
.slider{
position:absolute;
top:0;
left:0;
width:300%;
height:100%;
display:flex;
animation:slide 18s infinite;
}
.slide{
position:relative;
width:100%;
height:100%;
}
.slide img{
width:100%;
height:100%;
object-fit:cover;
filter:brightness(.42);
}
.overlay{
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(6,17,29,.82),rgba(15,23,42,.55));
}
.hero-content{
position:absolute;
z-index:5;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:min(1420px,92%);
display:grid;
grid-template-columns:1fr;
}
.hero-box{
max-width:820px;
}
.hero h1{
font-size:88px;
line-height:.92;
color:#fff;
margin-bottom:28px;
letter-spacing:-4px;
}
.hero p{
font-size:22px;
color:#dbe4ee;
margin-bottom:42px;
max-width:760px;
}
.hero-buttons{
display:flex;
gap:20px;
flex-wrap:wrap;
}
.btn-secondary{
padding:16px 28px;
border-radius:14px;
border:1px solid rgba(255,255,255,.2);
color:#fff;
font-weight:700;
}
@keyframes slide{
0%{transform:translateX(0)}
30%{transform:translateX(0)}
35%{transform:translateX(-33.3333%)}
65%{transform:translateX(-33.3333%)}
70%{transform:translateX(-66.6666%)}
100%{transform:translateX(-66.6666%)}
}

/* STRIP */
.strip{
background:linear-gradient(90deg,var(--primary),var(--secondary));
padding:18px;
text-align:center;
color:#fff;
font-weight:700;
font-size:15px;
letter-spacing:.5px;
}

/* CONTENT */
.section-title{
text-align:center;
margin-bottom:60px;
}
.section-title h2{
font-size:58px;
letter-spacing:-2px;
margin-bottom:18px;
}
.section-title p{
max-width:900px;
margin:auto;
font-size:19px;
color:var(--muted);
}
.grid-2,.grid-3,.grid-4{
display:grid;
gap:30px;
}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{
background:#fff;
border:1px solid var(--border);
padding:38px;
border-radius:28px;
transition:.35s;
}
.card:hover{
transform:translateY(-8px);
box-shadow:0 30px 70px rgba(15,23,42,.08);
}
.card h3{
font-size:28px;
margin-bottom:16px;
}
.card p{
font-size:17px;
color:var(--muted);
}
.dark{
background:var(--light);
}
.image-banner{
overflow:hidden;
border-radius:30px;
margin-bottom:30px;
}
.image-banner img{
width:100%;
height:460px;
object-fit:cover;
}

/* FOOTER */
.footer{
background:#020617;
padding:90px 0;
color:#94a3b8;
}
.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:40px;
}
.footer h3{
color:#fff;
margin-bottom:18px;
}

@media(max-width:991px){
.nav-links{display:none}
.mobile-toggle{display:block}
.logo{width:220px}
.hero{height:760px}
.hero h1{font-size:52px}
.hero p{font-size:18px}
.grid-2,.grid-3,.grid-4,.footer-grid{
grid-template-columns:1fr;
}
.section-title h2{font-size:40px}
}