:root {
  --clr-primary: #4e54c8;
  --clr-secondary: #8f94fb;
  --clr-bg: #f0f2f6;
  --clr-text: #333;
  --radius: 10px;
  --ease: cubic-bezier(0.65,0,0.35,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Segoe UI',sans-serif;background:var(--clr-bg);color:var(--clr-text);}
.container{width:90%;max-width:1200px;margin:0 auto;}

.site-header{background:#fff;padding:1rem 0;box-shadow:0 2px 8px rgba(0,0,0,.1);}
.site-header .container{display:flex;justify-content:space-between;align-items:center;}
.logo{font-size:1.5rem;font-weight:bold;color:var(--clr-primary);}
nav a{margin-left:1rem;color:#555;text-decoration:none;transition:color .3s;}
nav a:hover{color:var(--clr-primary);}

.hero{position:relative;overflow:hidden;padding:6rem 0;text-align:center;color:#fff;
  background:linear-gradient(135deg,var(--clr-primary),var(--clr-secondary));}
.hero h1{font-size:2.75rem;animation:fadeInDown .8s var(--ease);}
.hero p{margin:1rem 0 2rem;opacity:.9;animation:fadeInUp .8s var(--ease);}
.hero .btn{background:#fff;color:var(--clr-primary);padding:.75rem 2rem;border-radius:var(--radius);
  font-size:1rem;font-weight:600;animation:zoomIn .8s var(--ease);transition:background .3s;}
.hero .btn:hover{background:#f0f0f0;}
.shapes .shape{position:absolute;border-radius:50%;opacity:.3;animation:float 7s ease-in-out infinite;}
.shape1{width:250px;height:250px;background:#fff;top:5%;left:-10%;}
.shape2{width:300px;height:300px;background:#fff;bottom:-10%;right:-15%;}
.shape3{width:150px;height:150px;background:#fff;top:50%;right:10%;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(20px);}}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;padding:4rem 0;}
.card{background:#fff;padding:2rem;border-radius:var(--radius);box-shadow:0 4px 12px rgba(0,0,0,.05);
  text-align:center;transition:transform .3s,box-shadow .3s;}
.card i{color:var(--clr-primary);margin-bottom:1rem;}
.card h3{margin-bottom:.75rem;color:var(--clr-primary);}
.card p{color:#666;}
.card:hover{transform:translateY(-5px);box-shadow:0 8px 16px rgba(0,0,0,.1);}

.site-footer{background:#fff;text-align:center;padding:1.5rem 0;font-size:.9rem;color:#777;}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@keyframes zoomIn{from{opacity:0;transform:scale(.5);}to{opacity:1;transform:scale(1);}}