:root {
  --color-bg-dark: #0a0b14;
  --color-primary: #8e2de2;
  --color-secondary: #4a00e0;
  --color-accent: #7f5af0;
  --color-white: #fff;
  --color-glass: rgba(255,255,255,0.05);
  --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* GLOBAL RESET */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font-sans); background-color:var(--color-bg-dark); color:var(--color-white); overflow-x:hidden; line-height:1.6; }

/* BUTTONS */
.btn { display:inline-block; padding:0.8em 2em; border-radius:50px; font-weight:600; text-decoration:none; cursor:pointer; transition:all 0.3s ease;}
.primary-btn { border:2px solid var(--color-primary); background:linear-gradient(45deg,var(--color-primary),var(--color-secondary)); color:var(--color-white); box-shadow:0 0 20px var(--color-primary);}
.primary-btn:hover { transform:scale(1.05); box-shadow:0 0 40px var(--color-secondary);}
.secondary-btn { border:2px solid var(--color-accent); color:var(--color-accent); background:transparent;}
.secondary-btn:hover { background:var(--color-accent); color:var(--color-white);}

/* HERO */
.hero { position:relative; height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; padding:0 1rem;}
.hero-background {
  position:absolute; top:-20%; left:-20%; width:140%; height:140%;
  background: radial-gradient(circle at center, #ffffff15 0%, #8e2de2 40%, #4a00e0 70%, #0a0b14 100%);
  filter: blur(200px); opacity:0.7; z-index:-1;
}
.logo { margin-bottom:1rem; }
.hero h1 { font-size:3rem; font-weight:800; margin-bottom:1rem; }
.hero p { font-size:1.2rem; margin-bottom:2rem; max-width:600px; margin:auto; }

/* FEATURES */
.features { padding:5rem 1rem; text-align:center; }
.features h2 { font-size:2.5rem; margin-bottom:3rem; }
.feature-cards { display:flex; flex-wrap:wrap; gap:2rem; justify-content:center; }
.card { background:var(--color-glass); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.1); border-radius:20px; padding:2rem; width:250px; transition:all 0.3s ease;}
.card:hover { transform:translateY(-10px); box-shadow:0 0 20px var(--color-accent);}
.card .icon { width:50px; height:50px; margin-bottom:1rem; }

/* PROCESS */
.process { padding:5rem 1rem; text-align:center; }
.process h2 { font-size:2.5rem; margin-bottom:3rem; }
.steps { display:flex; flex-wrap:wrap; gap:2rem; justify-content:center; }
.step-card { background:var(--color-glass); backdrop-filter:blur(10px); padding:2rem; border-radius:20px; width:250px; transition:all 0.3s ease;}
.step-card:hover { transform:translateY(-10px); box-shadow:0 0 20px var(--color-primary); }

/* VALUE */
.value { padding:5rem 1rem; text-align:center; max-width:800px; margin:auto; }
.value h2 { font-size:2rem; margin-bottom:1rem; }
.value p { font-size:1.2rem; color:#ccc; }

/* TESTIMONIALS */
.testimonials { padding:5rem 1rem; text-align:center; }
.testimonials h2 { font-size:2.5rem; margin-bottom:3rem; }
.testimonial-cards { display:flex; flex-wrap:wrap; gap:2rem; justify-content:center; }
.testimonial-card { background:var(--color-glass); backdrop-filter:blur(10px); padding:2rem; border-radius:20px; width:250px; transition:all 0.3s ease; font-style:italic;}
.testimonial-card:hover { transform:translateY(-10px); box-shadow:0 0 20px var(--color-accent);}
.testimonial-card span { display:block; margin-top:1rem; font-style:normal; font-weight:bold; color:#ddd; }

/* CTA */
.cta { position:relative; padding:5rem 1rem; text-align:center; overflow:hidden; }
.cta-background { position:absolute; top:-30%; left:-30%; width:160%; height:160%; background:radial-gradient(circle at center, #ffffff20 0%, #7f5af0 40%, #0a0b14 80%); filter:blur(200px); opacity:0.6; z-index:-1; }
.cta h2 { font-size:2.5rem; margin-bottom:2rem; }

/* RESPONSIVE */
@media (max-width:768px){
  .hero h1 { font-size:2.2rem; }
  .hero p { font-size:1rem; }
  .feature-cards, .steps, .testimonial-cards { flex-direction:column; align-items:center; }
  .card, .step-card, .testimonial-card { width:90%; }
  .value h2 { font-size:1.8rem; }
  .cta h2 { font-size:2rem; }
}
