@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideInUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse { 0%, 100% { opacity:1; } 50% { opacity:0.7; } }

body { margin:0; font-family:'Inter',sans-serif; background:#0b0b12; color:#fff; }

header { 
  display:flex; justify-content:space-between; padding:20px 60px; position:sticky; top:0; 
  background:rgba(0,0,0,0.7); backdrop-filter:blur(10px); z-index:1000; 
  border-bottom:1px solid rgba(255,255,255,0.05);
}

.logo { font-weight:700; font-size:18px; background:linear-gradient(90deg,#6c5ce7,#a29bfe); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

nav a { 
  color:#aaa; margin-left:20px; text-decoration:none; transition:0.3s;
}

nav a:hover { color:#a29bfe; }

.hero { 
  height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; 
  text-align:center; background:radial-gradient(circle at top,#1f1f3a,#0b0b12); 
  animation:fadeIn 1s ease-in;
}

.hero h1 { 
  font-size:64px; max-width:900px; line-height:1.3; margin-bottom:20px;
  background:linear-gradient(90deg,#fff,#a29bfe); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

.hero p { color:#bbb; max-width:600px; font-size:18px; line-height:1.6; }

.badge { 
  background:linear-gradient(90deg,rgba(108,92,231,0.2),rgba(162,155,254,0.2)); 
  border:1px solid rgba(162,155,254,0.3);
  padding:10px 18px; border-radius:30px; margin-bottom:20px; font-size:14px;
  animation:pulse 2s infinite;
}

.btn { 
  margin-top:25px; padding:15px 35px; 
  background:linear-gradient(90deg,#6c5ce7,#a29bfe); 
  border-radius:40px; text-decoration:none; color:white; font-weight:600; 
  border:none; cursor:pointer; transition:0.3s; position:relative; overflow:hidden;
  display:inline-block;
}

.btn:hover { 
  transform:translateY(-3px); 
  box-shadow:0 10px 30px rgba(162,155,254,0.3);
}

.btn:active { transform:translateY(-1px); }

.section { 
  padding:100px 60px; animation:slideInUp 0.8s ease-out;
}

.section h2 {
  font-size:42px; margin-bottom:50px; 
  background:linear-gradient(90deg,#fff,#a29bfe); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:25px; }

.card { 
  background:linear-gradient(135deg,rgba(255,255,255,0.05),rgba(255,255,255,0.01)); 
  border:1px solid rgba(162,155,254,0.2); 
  padding:30px; border-radius:20px; transition:0.4s;
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
}

.card:hover { 
  transform:translateY(-12px); 
  border-color:rgba(162,155,254,0.5);
  box-shadow:0 20px 50px rgba(162,155,254,0.2);
  background:linear-gradient(135deg,rgba(162,155,254,0.1),rgba(108,92,231,0.1));
}

.card h3 { font-size:20px; margin-bottom:10px; }
.card p { color:#aaa; }

.stats { display:flex; justify-content:space-around; text-align:center; flex-wrap:wrap; }

.stat { margin:20px; }
.stat h3 { 
  font-size:52px; margin:0; 
  background:linear-gradient(90deg,#a29bfe,#6c5ce7); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.stat p { color:#999; margin-top:5px; }

.testimonials { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }

.testimonial { 
  background:linear-gradient(135deg,rgba(255,255,255,0.06),rgba(255,255,255,0.01));
  border:1px solid rgba(162,155,254,0.15);
  padding:30px; border-radius:20px; 
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
  transition:0.3s;
}

.testimonial:hover { 
  transform:translateY(-8px);
  border-color:rgba(162,155,254,0.4);
}

.testimonial p { font-style:italic; color:#ddd; }

.cta { 
  text-align:center; background:linear-gradient(135deg,#6c5ce7,#a29bfe); 
  padding:80px 20px; border-radius:30px; box-shadow:0 20px 60px rgba(162,155,254,0.3);
}

.cta h2 { color:#fff; background:none; }

.trust { text-align:center; color:#999; margin-top:20px; font-size:14px; }

input, textarea { 
  width:100%; padding:15px 20px; margin-top:12px; border-radius:12px; 
  border:1px solid rgba(162,155,254,0.2); background:rgba(255,255,255,0.05);
  color:#fff; font-family:'Inter',sans-serif; transition:0.3s;
}

input:focus, textarea:focus {
  outline:none; border-color:rgba(162,155,254,0.6); background:rgba(255,255,255,0.08);
  box-shadow:0 0 15px rgba(162,155,254,0.2);
}

textarea { resize:vertical; min-height:120px; }

form { max-width:500px; margin:auto; }

form button { width:100%; }

.faq { max-width:800px; margin:auto; }

.faq-item { 
  margin-bottom:20px; padding:20px; background:rgba(255,255,255,0.03);
  border-left:3px solid rgba(162,155,254,0.5); border-radius:8px;
}

.faq-item strong { color:#a29bfe; }
.faq-item p { color:#aaa; margin-top:10px; }

.sticky-cta {
  position:fixed; bottom:20px; right:20px;
  background:linear-gradient(90deg,#6c5ce7,#a29bfe);
  padding:15px 25px; border-radius:50px; font-weight:600; cursor:pointer;
  box-shadow:0 10px 30px rgba(162,155,254,0.4);
  transition:0.3s;
  z-index:999;
}

.sticky-cta:hover {
  transform:translateY(-4px);
  box-shadow:0 15px 40px rgba(162,155,254,0.6);
}

.footer { padding:40px; text-align:center; color:#777; border-top:1px solid rgba(255,255,255,0.05); }
