:root{
  --bg: #f6f8fb;
  --card: #ffffff;
  --accent: #0b5fff; /* MonSolde primary */
  --muted: #6b7280;
  --glass: rgba(11,95,255,0.06);
  --radius: 14px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial, sans-serif;background:var(--bg);color:#071127}
body{display:flex;flex-direction:column;align-items:center;padding:20px;background:var(--bg)}
.hero{width:100%;max-width:760px}

/* HERO */
.hero-top{display:grid;grid-template-columns:1fr;gap:18px;padding:6px}
.hero-content{padding:6px}
h1{margin:0;font-size:1.6rem;line-height:1.06;color:#071127;font-weight:800}
.subtitle{margin-top:10px;color:var(--muted);font-size:1rem;line-height:1.45;max-width:48ch}
.cta-row{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 16px;border-radius:12px;text-decoration:none;font-weight:800;font-size:1rem;border:0}
.btn.primary.large{background:var(--accent);color:white;box-shadow:0 16px 40px rgba(11,95,255,0.12)}
.btn.secondary{background:transparent;border:1px solid rgba(11,95,255,0.12);color:var(--accent);padding:12px 14px}
.trust-micro{margin-top:8px;color:var(--muted);font-size:0.88rem}

/* APP MOCKUP — realistic mini-dashboard */
.app-mockup{width:100%;max-width:420px;background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:0 20px 50px var(--glass);border:1px solid rgba(15,23,42,0.04);margin:0 auto}
.mockup-header{display:flex;flex-direction:column;align-items:flex-start}
.mockup-title{font-size:0.85rem;color:var(--muted)}
.mockup-amount{font-weight:800;font-size:1.9rem;color:var(--accent);margin-top:6px}
.kpis{display:flex;gap:8px;margin:12px 0}
.kpi{flex:1;background:linear-gradient(180deg,rgba(11,95,255,0.03),rgba(11,95,255,0.01));padding:8px;border-radius:10px;text-align:center}
.kpi-label{font-size:0.75rem;color:var(--muted)}
.kpi-value{font-weight:700;margin-top:6px}
.sparkline{margin:10px 0}
.spark{width:100%;height:36px}
.transactions{list-style:none;padding:0;margin:10px 0;border-top:1px dashed rgba(15,23,42,0.04)}
.transactions li{display:flex;justify-content:space-between;padding:10px 2px;border-bottom:1px solid rgba(15,23,42,0.02);align-items:center}
.transactions li.income .tx-amount{color:#059669;font-weight:700}
.tx-left{display:flex;align-items:center;gap:10px}
.tx-name{font-weight:700}
.tx-cat{font-size:0.78rem;color:var(--muted)}
.tx-amount{font-weight:700}
.forecast{margin-top:10px;font-size:0.9rem;color:var(--muted);text-align:right}

/* BENEFITS */
.benefits{padding:12px}
.benefits h2{margin:6px 0 8px;font-size:1.05rem}
.benefit-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.benefit-list li{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:10px;background:linear-gradient(180deg,rgba(0,0,0,0.02),transparent)}
.benefit-list li::before{content:'✓';color:var(--accent);font-weight:800}
.benefit-list p{margin:0;color:var(--muted);font-size:0.92rem}

/* HOW IT WORKS */
.how{padding:12px}
.how h2{margin:6px 0 8px;font-size:1.05rem}
.how-steps{padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.how-steps li{background:#fff;border-radius:10px;padding:12px;border:1px solid rgba(15,23,42,0.04);display:flex;gap:12px;align-items:flex-start}
.how-steps li strong{width:86px;color:var(--accent)}

/* TRUST */
.trust{padding:12px}
.trust h2{margin:6px 0 8px;font-size:1.05rem}
.trust-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.trust-list li{display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;background:linear-gradient(180deg,rgba(0,0,0,0.01),transparent)}
.trust-list li::before{content:'🔒'}

/* FINAL CTA */
.final-cta{padding:12px}
.cta-card{background:linear-gradient(180deg,#fff,#fbfdff);border-radius:14px;padding:18px;box-shadow:0 18px 50px rgba(11,95,255,0.08);text-align:center}
.cta-card h3{margin:0 0 12px;font-size:1.1rem}
.disclaimer{margin-top:10px;color:var(--muted);font-size:0.85rem}

.tiny-footer{padding:16px 12px;text-align:center;font-size:0.9rem;color:var(--muted)}

/* ACCESSIBILITY */
.btn:focus{outline:3px solid rgba(11,95,255,0.14);outline-offset:3px}

/* RESPONSIVE */
@media (max-width:520px){
  h1{font-size:1.25rem}
  .kpis{flex-direction:column}
  .app-mockup{padding:12px}
  .mockup-amount{font-size:1.3rem}
  .cta-row{gap:10px}
}

/* DARK MODE */
@media (prefers-color-scheme:dark){
  :root{--bg:#071428;--card:#071428;--accent:#60a5fa;--muted:#94a3b8}
  html,body{background:linear-gradient(180deg,#020617 0%,#071428 100%);color:#e6eef8}
  .app-mockup{background:linear-gradient(180deg,#071428,#041027);border:1px solid rgba(255,255,255,0.03);box-shadow:none}
  .benefit-list li{background:transparent}
  .trust-list li{background:transparent}
  .btn.secondary{border-color:rgba(255,255,255,0.06)}
}