/* ===== Base ===== */
body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
}
section{
  padding:100px 8%;
}

/* ===== HERO ===== */
.why-hero{
  text-align:center;
  background:linear-gradient(
    135deg,
    rgba(79,70,229,.08),
    rgba(99,102,241,.08)
  );
}
.why-hero h1{
  font-size:48px;
  margin-bottom:16px;
}
.why-hero p{
  font-size:18px;
  color:var(--muted);
  max-width:800px;
  margin:auto;
}

/* ===== USP GRID ===== */
.usp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
}
.usp-card{
  background:#fff;
  padding:32px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:.35s ease;
}
.usp-card:hover{
  transform:translateY(-8px);
}
.usp-card h3{
  margin-bottom:10px;
}
.usp-card p{
  color:var(--muted);
}

/* ===== TRUST ===== */
.trust-section{
  background:var(--bg-soft);
}
.trust-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:30px;
  text-align:center;
}
.trust-box h2{
  font-size:44px;
  color:var(--primary);
  margin-bottom:6px;
}
.trust-box span{
  color:var(--muted);
}

/* ===== PROCESS ===== */
.process h2{
  text-align:center;
  margin-bottom:60px;
}
.process-steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:30px;
}
.step{
  background:#fff;
  padding:28px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.step span{
  font-size:28px;
  font-weight:700;
  color:var(--primary);
}
.step h4{
  margin:10px 0;
}

/* ===== CTA ===== */
.why-cta{
  background:var(--primary);
  color:#fff;
  text-align:center;
}
.why-cta h2{
  font-size:36px;
}
.why-cta p{
  margin:10px 0 24px;
  opacity:.9;
}
.why-cta a{
  display:inline-block;
  background:#fff;
  color:var(--primary);
  padding:14px 34px;
  border-radius:30px;
  text-decoration:none;
  font-weight:600;
  transition:.35s ease;
}
.why-cta a:hover{
  transform:translateY(-5px);
  background: var(--primary);
  color: var(--bg-soft);
  border: 2px solid var(--bg-soft);
}

/* ===== Responsive ===== */
@media(max-width:768px){
  section{padding:70px 6%}
  .why-hero h1{font-size:34px}
}