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

body{

min-height:100vh;

background:linear-gradient(135deg,#a2b1ee,#b185dd);

background-attachment:fixed;

color:white;

}



/* NAVBAR */

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 60px;

background:rgba(255,255,255,0.1);

backdrop-filter:blur(12px);

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

position:sticky;

top:0;

}

.logo{

font-size:20px;

font-weight:700;

}



/* BUTTONS */

.btn-dark{

background:rgba(0,0,0,0.6);

color:white;

padding:12px 24px;

border-radius:8px;

text-decoration:none;

margin:6px;

display:inline-block;

}

.btn-outline{

border:1px solid rgba(255,255,255,0.4);

color:white;

padding:12px 24px;

border-radius:8px;

text-decoration:none;

background:rgba(255,255,255,0.1);

margin:6px;

display:inline-block;

}



/* HERO */

.hero{

text-align:center;

padding:120px 20px;

max-width:900px;

margin:auto;

}

.badge{

background:rgba(255,255,255,0.15);

padding:8px 14px;

border-radius:20px;

display:inline-block;

}

.hero h1{

font-size:55px;

margin:25px 0;

}

.hero-text{

max-width:600px;

margin:auto;

line-height:1.6;

color:rgba(255,255,255,0.85);

}

.hero-buttons{

margin-top:30px;

}



/* FEATURES */

.features{

padding:120px 80px;

text-align:center;

}

.features h2{

font-size:36px;

}

.sub{

margin-bottom:50px;

color:rgba(255,255,255,0.8);

}



/* GRID */

.feature-grid{

display:grid;

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

gap:30px;

max-width:1200px;

margin:auto;

}



/* GLASS CARDS */

.feature-card{

background:rgba(255,255,255,0.12);

backdrop-filter:blur(14px);

padding:35px;

border-radius:14px;

border:1px solid rgba(255,255,255,0.25);

box-shadow:0 8px 30px rgba(0,0,0,0.2);

transition:0.3s;

text-align:left;

}

.feature-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 50px rgba(0,0,0,0.35);

}

.feature-card svg{

width:32px;

margin-bottom:20px;

}

.feature-card p{

color:rgba(255,255,255,0.8);

}



/* CTA */

.cta{

text-align:center;

padding:120px 20px;

}

.cta h2{

font-size:36px;

margin-bottom:10px;

}

.cta p{

color:rgba(255,255,255,0.85);

margin-bottom:20px;

}



/* RESPONSIVE */

@media(max-width:900px){

.feature-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:600px){

.feature-grid{

grid-template-columns:1fr;

}

.hero h1{

font-size:38px;

}

}