body{margin:0;font-family:'Inter',sans-serif;background:#f8f9fa;color:#1a1a2e;}
.container{max-width:1200px;margin:0 auto;padding:0 16px;}
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid #eee;}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:70px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.2rem;color:#6C5CE7;text-decoration:none;}
.navlinks{display:flex;align-items:center;gap:12px;}
.nav-link{color:#555;padding:8px 12px;border-radius:10px;text-decoration:none;transition:.2s;}
.nav-link:hover{background:#f0f0f0;color:#6C5CE7;}
.btn{display:inline-block;border:none;border-radius:10px;padding:10px 20px;cursor:pointer;font-weight:600;}
.btn-primary{background:#6C5CE7;color:#fff;}
.btn-ghost{background:rgba(108,92,231,0.08);color:#6C5CE7;}
.mobile-toggle{display:none;}
@media(max-width:768px){
  .navlinks{display:none;flex-direction:column;position:absolute;top:70px;left:0;right:0;background:#fff;padding:10px;}
  .navlinks.open{display:flex;}
  .mobile-toggle{display:block;}
}


:root{
  --primary:#6C5CE7;
  --primary-dark:#5F4FD1;
  --secondary:#FF6B9D;
  --accent:#00D9C0;
  --ink:#1a1a2e;
  --bg:#ffffff;
  --card:#ffffff;
  --muted:#6B7280;
  --line:#E5E7EB;
  --gradient-1:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-2:linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-3:linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --gradient-hero:linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:#f8f9fa;
  color:var(--ink);
  overflow-x:hidden;
}
/* Scroll fade-in animatie */
.section, .feature-card, .step, .category-chip {
  opacity: 0;
  transform: translateY(40px);
  transition: all .6s ease;
}
.section.visible, .feature-card.visible, .step.visible, .category-chip.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animated gradient background */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* Navigation */
.nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(0,0,0,0.06);
  z-index:100;
  transition:all 0.3s ease;
}

.nav.scrolled{
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
}

.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  letter-spacing:-0.5px;
  font-size:1.3rem;
  background:var(--gradient-1);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.brand svg{
  width:42px;
  height:42px;
  display:block;
  filter:drop-shadow(0 2px 8px rgba(102,126,234,0.3));
}

.navlinks{
  display:flex;
  gap:8px;
  align-items:center;
}

.nav-link{
  padding:8px 16px;
  border-radius:12px;
  font-weight:600;
  font-size:0.95rem;
  transition:all 0.3s ease;
  color:var(--muted);
}

.nav-link:hover{
  color:var(--primary);
  background:rgba(108,92,231,0.08);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 28px;
  border-radius:16px;
  font-weight:700;
  font-size:0.95rem;
  border:none;
  transition:all 0.3s ease;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}

.btn::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition:left 0.5s;
}

.btn:hover::before{
  left:100%;
}

.btn-primary{
  background:var(--gradient-1);
  color:#fff;
  box-shadow:0 4px 20px rgba(102,126,234,0.4);
}

.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 30px rgba(102,126,234,0.5);
}

.btn-secondary{
  background:var(--gradient-2);
  color:#fff;
  box-shadow:0 4px 20px rgba(240,147,251,0.4);
}

.btn-secondary:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 30px rgba(240,147,251,0.5);
}

.btn-ghost{
  background:rgba(108,92,231,0.08);
  color:var(--primary);
  border:2px solid rgba(108,92,231,0.2);
}

.btn-ghost:hover{
  background:rgba(108,92,231,0.15);
  border-color:var(--primary);
}

/* Hero Section */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  background:var(--gradient-hero);
  background-size:200% 200%;
  animation:gradientShift 15s ease infinite;
  overflow:hidden;
  padding-top:72px;
}

.hero::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity:0.4;
}

.hero-content{
  position:relative;
  z-index:2;
  text-align:center;
  max-width:900px;
  margin:0 auto;
  padding:40px 0;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 20px;
  background:rgba(255,255,255,0.2);
  backdrop-filter:blur(10px);
  border-radius:50px;
  color:#fff;
  font-weight:600;
  font-size:0.9rem;
  margin-bottom:24px;
  border:1px solid rgba(255,255,255,0.3);
  box-shadow:0 4px 20px rgba(0,0,0,0.1);
}

.hero h1{
  font-size:clamp(2.5rem, 6vw, 4.5rem);
  line-height:1.1;
  margin:0 0 24px;
  color:#fff;
  font-weight:800;
  letter-spacing:-1px;
  text-shadow:0 2px 40px rgba(0,0,0,0.2);
}

.hero h1 em{
  font-style:normal;
  background:linear-gradient(135deg, #fff, #ffd700);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.hero-lead{
  color:rgba(255,255,255,0.95);
  font-size:1.25rem;
  max-width:700px;
  margin:0 auto 32px;
  line-height:1.6;
  font-weight:400;
}

.hero-cta{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:48px;
}

.hero-features{
  display:flex;
  gap:24px;
  justify-content:center;
  flex-wrap:wrap;
}

.hero-feature{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 20px;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(10px);
  border-radius:16px;
  color:#fff;
  font-weight:600;
  font-size:0.95rem;
  border:1px solid rgba(255,255,255,0.2);
}

.hero-feature span{
  font-size:1.5rem;
}

/* Floating Cards Animation */
.floating-cards{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  pointer-events:none;
  overflow:hidden;
}

.floating-card{
  position:absolute;
  width:280px;
  height:380px;
  background:#fff;
  border-radius:24px;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
  animation:float 20s infinite ease-in-out;
  opacity:0.15;
}

.floating-card:nth-child(1){
  top:10%;
  left:5%;
  animation-delay:0s;
  animation-duration:18s;
}

.floating-card:nth-child(2){
  top:60%;
  right:8%;
  animation-delay:4s;
  animation-duration:22s;
}

.floating-card:nth-child(3){
  bottom:15%;
  left:10%;
  animation-delay:8s;
  animation-duration:20s;
}

@keyframes float {
  0%, 100% { transform:translateY(0) rotate(0deg); }
  25% { transform:translateY(-30px) rotate(2deg); }
  50% { transform:translateY(-60px) rotate(-2deg); }
  75% { transform:translateY(-30px) rotate(1deg); }
}

/* Section */
.section{
  padding:100px 0;
  position:relative;
}

.section-header{
  text-align:center;
  margin-bottom:60px;
}

.section-title{
  font-size:clamp(2rem, 4vw, 3rem);
  font-weight:800;
  margin-bottom:16px;
  background:var(--gradient-1);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.section-subtitle{
  font-size:1.15rem;
  color:var(--muted);
  max-width:600px;
  margin:0 auto;
}

/* Features Grid */
.features-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:32px;
}

.feature-card{
  background:#fff;
  border-radius:24px;
  padding:40px 32px;
  border:1px solid var(--line);
  transition:all 0.4s ease;
  position:relative;
  overflow:hidden;
}

.feature-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:var(--gradient-1);
  transform:scaleX(0);
  transition:transform 0.4s ease;
}

.feature-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 60px rgba(102,126,234,0.2);
  border-color:transparent;
}

.feature-card:hover::before{
  transform:scaleX(1);
}

.feature-icon{
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:20px;
  background:var(--gradient-1);
  color:#fff;
  font-size:2rem;
  margin-bottom:24px;
  box-shadow:0 8px 24px rgba(102,126,234,0.3);
}

.feature-card:nth-child(2) .feature-icon{
  background:var(--gradient-2);
  box-shadow:0 8px 24px rgba(240,147,251,0.3);
}

.feature-card:nth-child(3) .feature-icon{
  background:var(--gradient-3);
  box-shadow:0 8px 24px rgba(0,217,192,0.3);
}

.feature-card h3{
  font-size:1.4rem;
  margin-bottom:12px;
  font-weight:700;
  color:var(--ink);
}

.feature-card p{
  color:var(--muted);
  font-size:1rem;
  line-height:1.6;
}

/* Steps */
.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:40px;
  position:relative;
}

.step{
  background:#fff;
  border-radius:24px;
  padding:40px 32px;
  text-align:center;
  position:relative;
  border:2px dashed var(--line);
  transition:all 0.4s ease;
}

.step:hover{
  border-color:var(--primary);
  border-style:solid;
  transform:scale(1.05);
  box-shadow:0 12px 40px rgba(102,126,234,0.2);
}

.step-num{
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--gradient-1);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:1.5rem;
  margin:0 auto 24px;
  box-shadow:0 8px 24px rgba(102,126,234,0.4);
}

.step:nth-child(2) .step-num{
  background:var(--gradient-2);
  box-shadow:0 8px 24px rgba(240,147,251,0.4);
}

.step:nth-child(3) .step-num{
  background:var(--gradient-3);
  box-shadow:0 8px 24px rgba(0,217,192,0.4);
}

.step h3{
  font-size:1.3rem;
  margin-bottom:12px;
  font-weight:700;
  color:var(--ink);
}

.step p{
  color:var(--muted);
  font-size:1rem;
  line-height:1.6;
}

/* Categories */
.categories{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
}

.category-chip{
  padding:14px 24px;
  background:#fff;
  border:2px solid var(--line);
  border-radius:50px;
  font-weight:600;
  font-size:0.95rem;
  transition:all 0.3s ease;
  cursor:pointer;
  color:var(--ink);
}

.category-chip:hover{
  border-color:var(--primary);
  background:var(--gradient-1);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(102,126,234,0.3);
}

/* Footer */
.footer{
  padding:60px 0 40px;
  background:var(--ink);
  color:rgba(255,255,255,0.8);
}

.footer-content{
  display:flex;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
  margin-bottom:40px;
}

.footer-brand{
  max-width:300px;
}

.footer-brand .brand{
  margin-bottom:16px;
  color:#fff;
  background:linear-gradient(135deg, #fff, #667eea);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.footer-links a{
  display:block;
  padding:8px 0;
  color:rgba(255,255,255,0.7);
  transition:color 0.3s;
}

.footer-links a:hover{
  color:#fff;
}

.footer-bottom{
  padding-top:32px;
  border-top:1px solid rgba(255,255,255,0.1);
  text-align:center;
  font-size:0.9rem;
}

/* Mobile */
.mobile-toggle{display:none}

@media (max-width:860px){
  .navlinks{display:none}
  .mobile-toggle{display:inline-flex}
  .hero{min-height:auto;padding:120px 0 60px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-features{flex-direction:column}
  .floating-cards{display:none}
  .features-grid,.steps{grid-template-columns:1fr}
}