/* Reset */
* {margin:0; padding:0; box-sizing:border-box; font-family: 'Arial', sans-serif;}
body {line-height:1.6; background:#f5f5f5; color:#333;}
a {text-decoration:none; color:inherit;}

/* Sticky Header */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background:#1E1E2F;
  color:#fff;
  padding:15px 40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition:0.3s;
}
header.scrolled {background:#111; box-shadow:0 5px 15px rgba(0,0,0,0.3);}
header .logo {font-size:24px; font-weight:bold;}
header nav a {margin-left:20px; color:#fff; transition:0.3s;}
header nav a:hover {color:#00b894;}

/* Hero Section */
.hero {
  text-align:center;
  padding:120px 20px;
  background:#00b894;
  color:#fff;
}
.hero h1 {font-size:3em; margin-bottom:20px; opacity:0; transform:translateY(30px);}
.hero p {font-size:1.2em; margin-bottom:30px; opacity:0; transform:translateY(30px);}
.hero .btn {background:#fff; color:#00b894; padding:15px 30px; margin:5px; border-radius:30px; font-weight:bold; transition:0.3s; opacity:0; transform:translateY(30px);}
.hero .btn:hover {background:#00a07f; color:#fff;}

/* Scroll Animations */
.scroll {opacity:0; transform:translateY(30px); transition: all 0.7s ease;}
.scroll.show {opacity:1; transform:translateY(0);}

/* Cards */
.features {display:flex; justify-content:center; flex-wrap:wrap; margin:50px 0;}
.card {
  background:#fff;
  padding:30px;
  margin:15px;
  border-radius:15px;
  width:250px;
  text-align:center;
  transition:0.5s;
  opacity:0;
  transform:translateY(30px);
}
.card:hover {transform:translateY(-10px) scale(1.05); box-shadow:0 15px 30px rgba(0,0,0,0.15);}
.card.show {opacity:1; transform:translateY(0);}

/* Preview Screenshots */
.preview {text-align:center; padding:50px 20px;}
.preview h2 {margin-bottom:30px;}
.screenshots img {width:200px; margin:10px; border-radius:15px; box-shadow:0 10px 20px rgba(0,0,0,0.15); transition:0.3s;}
.screenshots img:hover {transform:scale(1.05);}

/* Contact Form */
.contact {padding:50px 20px; background:#f0f0f0; text-align:center;}
.contact h2 {margin-bottom:30px;}
.contact form {max-width:500px; margin:0 auto;}
.contact input, .contact textarea {width:100%; padding:15px; margin-bottom:15px; border-radius:10px; border:1px solid #ccc;}
.contact button {padding:15px 30px; border:none; border-radius:30px; background:#00b894; color:#fff; font-weight:bold; cursor:pointer;}
.contact button:hover {background:#00a07f;}

/* Footer */
footer {text-align:center; padding:20px; background:#1E1E2F; color:#fff; margin-top:50px;}

/* Responsive */
@media(max-width:768px){header nav a{margin-left:10px;} .features {flex-direction:column; align-items:center;}}