/* Reset */
* { margin:0; padding:0; box-sizing:border-box; font-family:"Poppins", sans-serif; }

/* Body & Gradient Background */
body {
  min-height:100vh;
  overflow-x:hidden;
  background: linear-gradient(135deg, #ff512f, #dd2476, #1f4037);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  color:white;
}

/* Gradient Animation */
@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Floating Shapes */
.shapes span {
  position:absolute;
  display:block;
  width:20px; height:20px;
  background: rgba(255,255,255,0.2);
  border-radius:50%;
  animation: float 10s linear infinite;
}
.shapes span:nth-child(1){ left:10%; animation-duration:12s; }
.shapes span:nth-child(2){ left:30%; animation-duration:15s; width:25px; height:25px;}
.shapes span:nth-child(3){ left:50%; animation-duration:18s; width:18px; height:18px;}
.shapes span:nth-child(4){ left:70%; animation-duration:20s; width:22px; height:22px;}
.shapes span:nth-child(5){ left:90%; animation-duration:16s; width:30px; height:30px;}

@keyframes float {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-300px) rotate(180deg); }
  100% { transform: translateY(0) rotate(360deg); }
}

/* Navigation */
nav {
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 40px; position:relative; z-index:10;
  backdrop-filter:blur(5px);
}
nav .logo{ font-size:1.6rem; font-weight:700; }
nav ul { list-style:none; display:flex; gap:20px; }
nav ul li a { text-decoration:none; color:white; font-weight:600; padding:5px 10px; transition:0.3s; }
nav ul li a:hover { background:rgba(255,255,255,0.2); border-radius:8px; }
.menu-toggle { display:none; font-size:1.8rem; cursor:pointer; }

/* Hero Section */
.hero {
  text-align:center;
  padding:120px 20px 60px 20px;
  position:relative; z-index:10;
}
.hero-title {
  font-size:3rem;
  animation: fadeInUp 1.5s ease forwards;
}
.hero-title span { color:#00c6ff; }
.hero-subtitle { margin:20px 0; font-size:1.3rem; opacity:0.8; animation: fadeInUp 2s ease forwards; }
.btn {
  display:inline-block; padding:15px 35px; background:#00c6ff; color:white;
  border-radius:50px; font-weight:600; text-decoration:none;
  transition:0.3s; animation: fadeInUp 2.5s ease forwards;
}
.btn:hover{ background:#0072ff; transform:scale(1.05); }

/* Features Section */
.features{
  display:flex; flex-wrap:wrap; justify-content:center; gap:25px; padding:60px 20px;
  position:relative; z-index:10;
}
.feature{
  background: rgba(255,255,255,0.1); backdrop-filter:blur(8px);
  padding:25px; border-radius:20px; width:250px; text-align:center;
  transition:0.3s;
}
.feature:hover{
  transform:translateY(-10px); background: rgba(255,255,255,0.15);
}
.feature h2{ margin-bottom:15px; }
.feature p{ font-size:0.95rem; opacity:0.9; }

/* Footer */
footer{
  text-align:center; padding:20px; opacity:0.8; backdrop-filter:blur(5px); position:relative; z-index:10;
}

/* Animations */
@keyframes fadeInUp{
  0%{opacity:0; transform:translateY(30px);}
  100%{opacity:1; transform:translateY(0);}
}

/* Responsive Styles */
@media(max-width:1024px){
  .hero-title{ font-size:2.5rem; }
  .hero-subtitle{ font-size:1.1rem; }
  .features{ gap:20px; }
}
@media(max-width:768px){
  nav ul { display:none; flex-direction:column; position:absolute; top:60px; right:20px; background:rgba(0,0,0,0.4); border-radius:10px; padding:15px; }
  nav ul.active{ display:flex; }
  .menu-toggle{ display:block; color:white; }
  .hero-title{ font-size:2rem; }
  .hero-subtitle{ font-size:1rem; }
  .features{ flex-direction:column; align-items:center; }
}
@media(max-width:480px){
  .hero-title{ font-size:1.6rem; }
  .hero-subtitle{ font-size:0.9rem; }
  .btn{ padding:12px 25px; font-size:0.9rem; }
  .feature{ width:90%; padding:20px; }
}