body{
     margin:0;
     font-family:Segoe UI, sans-serif;
     overflow-x:hidden;
     
     
     background: linear-gradient(
         to bottom,
         #bff6ff 0%,
         #eaffff 45%,
         #ffffff 100%
    )
}

.bg::before,
.bg::after{
    content:"";
    position:fixed;
    width:600px;
    height:600px;
    border-radius:50%;
    filter:blur(90px);
    opacity:0.45;
    z-index:0;
}

.bg::before{
    background:#7dffb2;
    top:-150px;
    left:-150px;
}

.bg::after{
    background:#7ad7ff;
    bottom:-150px;
    right:-150px;
}

.hero{
    position:relative;
    z-index:1;
    
    
    height:100vh;
    
    
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    
    
    padding:20px;
}


.logo{
    width:150px;
    height:150px;
    
    
    border-radius:28px;
    
    
    box-shadow:
        0 25px 50px rgba(0,180,120,0.25),
        inset 0 2px 10px rgba(255,255,255,0.7);
}


h1{
    font-size:4.5rem;
    margin:20px 0 10px 0;
    
    
    background: linear-gradient(#00b86b,#006b3d);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    
    
    text-shadow:0 0 25px rgba(255,255,255,0.8);
}


p{
    max-width:650px;
    font-size:1.2rem;
    color:#007a66;
    opacity:0.85;
}


.btn{
    margin-top:25px;
    padding:14px 36px;
    
    
    border-radius:999px;
    
    
    text-decoration:none;
    font-weight:bold;
    
    
    color:#003d22;
    
    
    background: linear-gradient(#a8ffd8,#3bdc8a);
    
    
    box-shadow:
        0 15px 35px rgba(0,200,120,0.25),
        inset 0 1px 1px white;
        
    transition:0.3s ease;
}


.btn:hover{
    transform:translateY(-4px);
}


.features{
    position:relative;
    z-index:1;
    padding:80px 20px;
    text-align:center;
}


.features h2{
    font-size:2.5rem;
    margin-bottom:40px;
    color:#007a55;
}


.grid{
    display:grid;
    grid-template-colums:repeat(auto-fit, minmax(220px, 1fr));
    gap:20px;
    max-width:1000px;
    margin:0 auto;
}


.card{
    background:rgba(255,255,255,0.55);
    border:1px solid rgba(255,255,255,0.7);
    backdrop-filter:blur(12px);
    
    
    padding:25px;
    border-radius:18px;
    
    
    box-shadow:0 10px 25px rgba(0,150,100,0.08);
    
    
    transition:0.3s ease;
}


.card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 35px rgba(0,150,100,0.15);
}


.card h3{
    color:#00a86b;
    margin-bottom:10px;
}