* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  color: #1a1a2e;
  background: #fafbfc;
  line-height:1.6;
  scroll-behavior:smooth;
}
a { text-decoration:none; color:inherit; }

.hero {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8rem 8% 6rem;
  background: linear-gradient(135deg, #f8f4ff 0%, #f0e7ff 50%, #e8d9ff 100%);
  position:relative;
  overflow:hidden;
  flex-wrap:wrap;
  gap:3rem;
}
.hero::before {
  content:''; position:absolute; width:600px; height:600px; top:-300px; right:-200px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(106,90,205,0.15) 0%, transparent 70%);
  animation: pulse 8s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.1);opacity:.7} }

.hero-content { flex:1 1 500px; max-width:600px; z-index:2; animation:fadeInUp .8s ease-out; }
.hero-badge {
  display:inline-block; background:rgba(106,90,205,0.1); color:#6a5acd; padding:8px 16px; border-radius:20px;
  font-weight:700; font-size:.85rem; margin-bottom:1.5rem; border:1px solid rgba(106,90,205,0.2);
}
.hero-content h1 {
  font-size:3.5rem; font-weight:800; line-height:1.1; margin-bottom:1.5rem; color:#1a1a2e; letter-spacing:-1.5px;
}
.hero-content p { font-size:1.2rem; color:#5a5a7a; margin-bottom:2.5rem; line-height:1.7; }

.cta-buttons { display:flex; gap:1rem; flex-wrap:wrap; }
.btn-primary {
  display:inline-flex; align-items:center; gap:8px; padding:16px 32px; border-radius:12px;
  font-weight:700; font-size:1.05rem; color:#fff;
  background: linear-gradient(135deg,#6a5acd,#8a63e0);
  box-shadow: 0 4px 20px rgba(106,90,205,0.3); transition:all .25s;
}
.btn-primary:hover { transform:translateY(-3px); box-shadow: 0 8px 30px rgba(106,90,205,0.4); }

.btn-secondary {
  display:inline-flex; align-items:center; gap:8px; padding:16px 32px; border-radius:12px;
  font-weight:700; font-size:1.05rem; background:#fff; color:#6a5acd; border:2px solid #e5e0ff; transition:all .25s;
}
.btn-secondary:hover { border-color:#6a5acd; transform:translateY(-2px); }

.hero-stats { display:flex; gap:3rem; margin-top:3rem; flex-wrap:wrap; }
.stat { text-align:left; }
.stat-number { font-size:2rem; font-weight:800; color:#6a5acd; display:block; }
.stat-label { font-size:.9rem; color:#7a7a9a; font-weight:500; }

.hero-image { flex:1 1 400px; display:flex; justify-content:center; z-index:2; }
.hero-image img { width:100%; max-width:480px; filter:drop-shadow(0 20px 40px rgba(106,90,205,0.2)); animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }

/*TRUST*/
.trust-section { padding:3rem 8%; background:#fff; text-align:center; border-bottom:1px solid #f0f0f0; }
.trust-section p { color:#6a5acd; font-size:.9rem; text-transform:uppercase; letter-spacing:1px; font-weight:600; margin-bottom:2rem; }
.trust-logos { display:flex; justify-content:center; align-items:center; gap:4rem; flex-wrap:wrap; opacity:.6; }
.trust-logos i { font-size:2rem; color:#6a5acd; }

/*FEATURES*/
.features { padding:8rem 8%; text-align:center; background:#fff; }
.section-label {
  display:inline-block; background:rgba(106,90,205,0.1); color:#6a5acd; padding:6px 14px; border-radius:20px;
  font-size:.85rem; font-weight:700; margin-bottom:1rem;
}
.features h2 { font-size:2.8rem; color:#1a1a2e; margin-bottom:1rem; font-weight:800; letter-spacing:-1px; }
.features .subtitle { font-size:1.15rem; color:#6a6a8a; margin-bottom:4rem; max-width:600px; margin-left:auto; margin-right:auto; }

.feature-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap:2rem;
  max-width:1200px;
  margin:0 auto;
}

/*CARD*/
.feature-card {
  background: linear-gradient(145deg,#ffffff,#fafbff);
  border:1px solid #e8e6f5;
  border-radius:20px;
  padding:2.5rem;
  text-align:left;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  position:relative;
  overflow:hidden;
}
.feature-card::before {
  content:''; position:absolute; top:0; left:0; width:100%; height:4px;
  background: linear-gradient(90deg,#6a5acd,#8a63e0);
  transform:scaleX(0); transform-origin:left; transition:transform .4s;
}
.feature-card:hover::before { transform:scaleX(1); }
.feature-card:hover { transform:translateY(-8px); box-shadow: 0 20px 60px rgba(106,90,205,0.15); border-color:#d0c8ff; }

.feature-icon {
  width:60px; height:60px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  margin-bottom:1.5rem; background: linear-gradient(135deg,#f3e6ff,#e8d9ff); transition: all .3s;
}
.feature-card:hover .feature-icon {
  transform:scale(1.1) rotate(5deg);
  background: linear-gradient(135deg,#6a5acd,#8a63e0);
}
.feature-icon i { font-size:1.8rem; color:#6a5acd; transition:color .3s; }
.feature-card:hover .feature-icon i { color: #fff; }

.feature-card h3 { color:#1a1a2e; font-size:1.3rem; margin-bottom:.8rem; font-weight:700; }
.feature-card p { color:#6a6a8a; font-size:1rem; line-height:1.7; }

/*HOW IT WORKS*/
.how-it-works { padding:8rem 8%; background: linear-gradient(135deg,#fafbff 0%, #f3f0ff 100%); }
.how-it-works h2{ text-align:center; font-size:2.8rem; color:#1a1a2e; margin-bottom:1rem; font-weight:800;}
.how-it-works .subtitle{ text-align:center; color:#6a6a8a; margin-bottom:5rem; font-size:1.15rem; }
.steps{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap:3rem;
  max-width:1200px;
  margin:0 auto;
}
.step { text-align:center; position:relative; background:transparent; }
.step-number {
  width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.5rem; color:#fff; font-weight:800; font-size:1.5rem;
  background: linear-gradient(135deg,#6a5acd,#8a63e0); box-shadow: 0 8px 24px rgba(106,90,205,0.3);
}
.step h3 { font-size:1.3rem; color:#1a1a2e; margin-bottom:.8rem; font-weight:700; }
.step p { color:#6a6a8a; line-height:1.7; }

/*CONTACT*/
.contact { padding:8rem 8%; background: linear-gradient(145deg,#1a1a2e,#2a254e); color:#fff; text-align:center; }
.contact h2 { font-size:2.8rem; color:#f3f0ff; font-weight:800; letter-spacing:-1px; margin-bottom:.5rem; }
.contact-subtitle { color:#c2b8f0; margin-bottom:4rem; font-size:1.15rem; }

.contact-container { display:flex; gap:3rem; flex-wrap:wrap; justify-content:center; max-width:1200px; margin:0 auto; }
.contact-options { flex:1 1 320px; display:flex; flex-direction:column; gap:1.5rem; }
.contact-option {
  background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:16px;
  padding:1.8rem; display:flex; gap:1.2rem; align-items:center; text-align:left; transition:all .25s;
}
.contact-option:hover { transform:translateY(-4px); background: rgba(255,255,255,0.1); box-shadow: 0 12px 32px rgba(106,90,205,0.2); }
.contact-option i { font-size:1.6rem; color:#b59aff; min-width:24px; }
.contact-option h3 { color:#f0e9ff; margin-bottom:.3rem; font-size:1.1rem; font-weight:700; }
.contact-option a { color:#c2b8f0; font-weight:500; }
.contact-form {
  flex:1 1 500px; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1); border-radius:20px; padding:2.5rem; text-align:left;
}
.contact-form h3 { color:#f3f0ff; margin-bottom:2rem; font-size:1.5rem; font-weight:700; }
.form-row { display:flex; gap:1rem; flex-wrap:wrap; }
.contact-form input, .contact-form textarea {
  width:100%; background: rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15);
  border-radius:12px; padding:1rem; margin-bottom:1rem; color:#fff; font-family:inherit; font-size:1rem; transition:all .2s;
}
.contact-form input:focus, .contact-form textarea:focus { outline:none; background: rgba(255,255,255,0.15); border-color:#8a63e0; }
.contact-form ::placeholder { color:#c5b9ff; }
.contact-form textarea { height:140px; resize:none; }
.btn-send {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background: linear-gradient(135deg,#6a5acd,#8a63e0); color:#fff; font-weight:700; padding:14px 28px; border:none; border-radius:12px; width:100%;
  box-shadow: 0 4px 20px rgba(106,90,205,0.3);
}
.btn-send:hover { transform:translateY(-3px); box-shadow: 0 8px 30px rgba(138,99,224,0.5); }

/*CTA*/
.cta { text-align:center; padding:8rem 8%; background: linear-gradient(135deg,#6a5acd,#8a63e0); color:#fff; position:relative; overflow:hidden; }
.cta::before { content:''; position:absolute; width:400px; height:400px; border-radius:50%; top:-200px; left:-100px; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); }
.cta h2 { font-size:2.8rem; margin-bottom:1.5rem; font-weight:800; letter-spacing:-1px; }
.cta p { font-size:1.2rem; margin-bottom:2.5rem; opacity:.95; }
.cta a { background:#fff; color:#6a5acd; padding:16px 40px; border-radius:12px; font-weight:700; font-size:1.05rem; display:inline-block; box-shadow:0 8px 24px rgba(0,0,0,0.15); }
.cta a:hover { transform:translateY(-3px); box-shadow:0 12px 36px rgba(0,0,0,0.25); }


footer { text-align:center; padding:2rem; background:#f8f4ff; color:#5a5a7a; border-top:1px solid #e8e6f5; }

@media (max-width:900px){
  .hero { flex-direction:column-reverse; text-align:center; padding:5rem 6% 4rem; }
  .hero-content h1{ font-size:2.5rem; }
  .cta-buttons { justify-content:center; }
  .hero-stats { justify-content:center; }
  nav { gap:1.5rem; }
  nav a { font-size:.9rem; }
  .features h2, .how-it-works h2, .contact h2, .cta h2 { font-size:2rem; }
  .contact-container { flex-direction:column; align-items:stretch; }
}
@media (max-width:600px){
  header { padding:1rem 5%; }
  nav a:not(.btn-login){ display:none; }
  .hero-content h1{ font-size:2rem; }
  .btn-primary, .btn-secondary { padding:14px 24px; font-size:.95rem; }
}