/* --- Decorative background & hero --- */
.hero-wrap {
  position: relative;
  padding: 82px 0 48px;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(1200px 600px at 80% -20%, rgba(0, 231, 209, 0.14), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(0, 180, 255, 0.08), transparent 65%),
    linear-gradient(180deg, rgba(6,10,14,0.5) 0%, rgba(6,10,14,0) 100%);
  border: 1px solid var(--border);
}
.hero .kicker {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
}
.hero h1 { font-size: 44px; line-height: 1.1; margin: 8px 0 10px; }
.hero .lead { color: var(--muted); max-width: 780px; margin: 0 auto 18px; }

/* animated grid glow */
.hero-grid {
  position: absolute; inset: -2px;
  background-image: linear-gradient(var(--border), var(--border));
  mask-image: radial-gradient(900px 600px at 50% 0%, rgba(0,0,0,.5) 0%, transparent 60%);
  opacity: .35;
}
.hero-grid::before, .hero-grid::after {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(transparent 24px, rgba(255,255,255,.04) 25px),
    linear-gradient(90deg, transparent 24px, rgba(255,255,255,.04) 25px);
  background-size: 26px 26px;
  animation: drift 18s linear infinite;
}
.hero-grid::after { animation-duration: 24s; opacity: .6; }

@keyframes drift { from { transform: translateY(0); } to { transform: translateY(26px); } }

/* soft vector blobs */
.blob {
  position: absolute; filter: blur(36px); opacity: .35; pointer-events: none;
  transform: translateZ(0);
}
.blob.one  { width: 380px; height: 380px; top: -60px; right: -40px; background: radial-gradient(circle, rgba(0,231,209,.35), transparent 70%); }
.blob.two  { width: 320px; height: 320px; bottom: -60px; left: -40px; background: radial-gradient(circle, rgba(0,180,255,.28), transparent 70%); }

/* --- Features row --- */
.features { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin:24px 0 8px; }
.feature { display:flex; gap:12px; align-items:flex-start; padding:18px; background: var(--panel); border:1px solid var(--border); border-radius: var(--radius); }
.icon {
  width: 40px; height: 40px; display:grid; place-items:center;
  background: rgba(0,231,209,.08); border:1px solid rgba(0,231,209,.25); border-radius: 12px;
}
.feature h3 { margin:0 0 4px; font-size: 16px; }
.feature p  { margin:0; color: var(--muted); }

/* --- Steps --- */
.steps { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top: 22px; }
.step { background: #0e141b; border:1px solid var(--border); border-radius: var(--radius); padding:18px; position:relative; }
.step .num {
  position:absolute; top:12px; right:12px; font-weight:700; color:#0b0e12;
  background: var(--accent); border-radius: 999px; padding:4px 10px; font-size: 12px;
}

/* --- Trust strip --- */
.trust { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top: 20px; }
.badge {
  display:flex; gap:10px; align-items:center; padding:10px 12px;
  border:1px solid var(--border); border-radius: 999px; background:#0e141b; color: var(--muted);
}
.badge svg { opacity:.9; }

/* responsive */
@media (max-width: 900px){
  .hero h1 { font-size: 34px; }
  .features, .steps { grid-template-columns: 1fr; }
}