*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Poppins;background:#020617;color:white}

/* Header */
header{
  position:sticky;top:0;z-index:10;
  background:linear-gradient(90deg,#ff0080,#7928ca,#2af598);
  padding:15px 25px;
  display:flex;justify-content:space-between;align-items:center;
}
header h2{font-size:24px}
nav a{color:white;margin:0 10px;text-decoration:none;font-weight:600}
nav a:hover{color:#ffe600}

/* Mobile Menu Button */
.menu-btn{
  display:none;
  position:fixed;
  top:10px;
  left:10px;
  font-size:20px;
  background:#ff0080;
  color:white;
  padding:6px 10px;
  border-radius:6px;
  cursor:pointer;
  z-index:1001;
}

/* Sidebar */
.sidebar{
  position:fixed;
  top:0;
  left:-220px;
  width:200px;
  height:100%;
  background:#0f172a;
  padding:20px 15px;
  transition:.4s;
  z-index:1000;
}
.sidebar a{
  display:block;
  color:white;
  text-decoration:none;
  margin:15px 0;
  font-weight:600;
}
.sidebar a:hover{color:#ffe600}
.sidebar.show{left:0}

/* Hero */
.hero{
  height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background-size:cover;
  background-position:center;
}
.hero .layer{background:rgba(0,0,0,.55);padding:40px;border-radius:20px}
.hero h1{font-size:42px}

/* Buttons */
.btn{
  margin-top:20px;
  padding:12px 30px;
  border:none;
  border-radius:25px;
  background:#ff0080;
  color:white;
  font-weight:700;
  cursor:pointer;
}
.btn:hover{
  background:#ffe600;
  color:#000;
  transform:scale(1.05);
}

/* Sections */
section{padding:60px 20px}
h3{text-align:center;margin-bottom:30px;font-size:30px}

/* Grids */
.overview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* Cards */
.card{
  background:#111827;
  padding:25px;
  border-radius:16px;
  text-align:center;
  transition:.4s;
  cursor:pointer;
  font-size:18px;
  box-shadow:0 5px 15px rgba(0,0,0,.4);
}
.card:hover{
  transform:translateY(-12px) scale(1.07);
  background:linear-gradient(135deg,#ff9a9e,#fad0c4,#fbc2eb);
  color:black;
  box-shadow:0 20px 40px rgba(0,0,0,.7);
}
.card b{display:block;margin-top:8px;font-size:20px}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gallery img{
  width:100%;height:230px;object-fit:cover;border-radius:16px;
  box-shadow:0 10px 25px rgba(0,0,0,.5);transition:.5s;
}
.gallery img:hover{
  transform:scale(1.12) rotate(1deg);
  box-shadow:0 25px 45px rgba(0,0,0,.8);
}

/* Contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:30px}
input,textarea{width:100%;padding:12px;border-radius:10px;border:none;margin-bottom:12px}

/* Footer */
footer{text-align:center;padding:20px;background:#7928ca}

/* Mobile */
@media(max-width:768px){
  header{display:none;}
  .menu-btn{display:block;}
  .contact{grid-template-columns:1fr}
  .hero h1{font-size:30px}
  .hero{margin-top:60px;}
  .overview-grid{grid-template-columns:1fr;}
  .features-grid{grid-template-columns:1fr 1fr;}
}