/* style.css — WealthSprint */

:root{
  --bg:#0f1724;
  --card:#0b1220;
  --accent:#22c55e;
  --muted:#94a3b8;
  --glass: rgba(255,255,255,0.04);
  --radius:16px;
  --maxw:1200px;
}

*{box-sizing:border-box}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto;
  margin:0;
  background:linear-gradient(180deg,#071224 0%, #071a2a 100%);
  color:#e6eef8;
}
.container{max-width:var(--maxw); margin:0 auto; padding:28px}

header{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#06b6d4);display:flex;align-items:center;justify-content:center;font-weight:800;color:#04212a}
nav a{color:var(--muted);text-decoration:none;margin-left:18px;font-weight:600}
.cta{background:var(--accent);color:#04212a;padding:10px 16px;border-radius:12px;text-decoration:none;font-weight:700}
.secondary-btn{padding:10px 14px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.1);text-decoration:none;color:var(--muted);font-weight:700}

.hero{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center;margin-top:28px}
.hero-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:34px;border-radius:var(--radius);backdrop-filter: blur(6px);box-shadow: 0 6px 30px rgba(2,6,23,0.6)}
h1{font-size:34px;line-height:1.05;margin:0 0 12px}
p.lead{color:var(--muted);margin:0 0 18px}
.metrics{display:flex;gap:12px;margin-top:18px}
.metric{background:var(--glass);padding:12px;border-radius:12px;flex:1;text-align:center}
.metric strong{display:block;font-size:18px;color:var(--accent)}

.card-right{background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:20px;border-radius:12px}
.deposit-row{display:flex;gap:8px;margin-bottom:12px}
input[type=number], input[type=text]{width:100%;padding:12px;border-radius:10px;border:none;background:#07172a;color:#e6eef8;margin-bottom:10px}
button.primary{width:100%;padding:12px;border-radius:10px;border:none;background:var(--accent);color:#04212a;font-weight:700;cursor:pointer}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.subtext{color:var(--muted);font-size:13px}
.note{font-size:12px;color:var(--muted);margin-top:12px}
.card.success{background:linear-gradient(90deg,#05212b,#051726);padding:14px;border-radius:10px}

section{margin-top:36px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);padding:18px;border-radius:12px}
.plan{border-radius:12px;padding:18px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));flex:1;min-width:220px}
.plans{display:flex;gap:12px;flex-wrap:wrap}
.plan .rate{font-weight:800;font-size:20px;margin-top:8px}
.plan.popular{border:2px solid rgba(34,197,94,0.12)}

.test-row{display:flex;gap:12px;flex-wrap:wrap}
.testimonial{padding:16px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));flex:1}

.faq-wrap{display:flex;gap:12px;flex-wrap:wrap}
.faq-left{flex:1;min-width:320px}
.faq-right{flex:1;min-width:300px}
.faq-item{margin-bottom:12px}

footer{margin-top:36px;padding:18px;color:var(--muted);font-size:14px}
.footer-wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .test-row{flex-direction:column}
  nav a{display:none}
}