/* Global */
* {margin:0; padding:0; box-sizing:border-box; font-family:'Arial', sans-serif;}
body {line-height:1.6; color:#333; background-color:#fdfdfd;}

/* Container */
.container {width:90%; max-width:1200px; margin:0 auto; padding:2rem 0;}

/* Hero */
.hero {background:linear-gradient(135deg,#4facfe,#00f2fe); color:white; text-align:center; padding:6rem 2rem;}
.hero h1 {font-size:3rem; margin-bottom:1rem;}
.hero-subtitle {font-size:1.5rem; margin-bottom:1rem;}
.hero p {max-width:700px; margin:1rem auto 2rem; font-size:1rem;}
.btn {display:inline-block; background-color:#ff6b6b; color:white; padding:.75rem 1.5rem; font-size:1rem; border:none; border-radius:50px; text-decoration:none; transition:.3s;}
.btn:hover {background-color:#ff4757; transform:translateY(-2px);}

/* Features */
.features {background-color:#f9f9f9; padding:4rem 0; text-align:center;}
.features h2 {font-size:2rem; margin-bottom:2rem;}
.grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem;}
.card {background:white; padding:2rem; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,0.05); transition:.3s;}
.card:hover {transform:translateY(-5px); box-shadow:0 8px 20px rgba(0,0,0,0.1);}
.card h3 {margin-bottom:1rem; font-size:1.25rem; color:#333;}
.card p {font-size:1rem; color:#666;}

/* CTA */
.cta {background:#ff6b6b; color:white; text-align:center; padding:4rem 2rem;}
.cta h2 {font-size:2rem; margin-bottom:1rem;}
.cta p {margin-bottom:2rem;}

/* Footer */
footer {background-color:#222; color:#ccc; text-align:center; padding:2rem 1rem; font-size:.9rem;}
footer small {display:block; margin-top:.5rem;}

/* Fade-in Animation */
.fade-in {opacity:0; animation:fadeIn 1.2s ease forwards;}
@keyframes fadeIn {to{opacity:1;}}

/* Responsive */
@media(max-width:768px){
  .hero h1{font-size:2rem;}
  .hero-subtitle{font-size:1.2rem;}
  .grid{gap:1.5rem;}
  .cta h2{font-size:1.5rem;}
}