/* ===== life-money-online v2 ===== */
:root{
  --bg:#0b1220;           /* fallback dark backdrop */
  --card:#0f172a;
  --muted:#94a3b8;
  --text:#e5e7eb;
  --brand:#22c55e;        /* green */
  --brand2:#06b6d4;       /* cyan */
  --accent:#f59e0b;       /* amber */
  --radius:18px;
  --w:clamp(300px, 92vw, 1160px);
}

/* Warm bright theme for better readability */
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;
  color:#1f2937;
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(6,182,212,.14), transparent 60%),
    radial-gradient(800px 400px at -10% 10%, rgba(34,197,94,.15), transparent 60%),
    linear-gradient(180deg,#fbfbfd 0%, #f5f7fb 100%);
}

.container{ width:var(--w); margin-inline:auto; padding:20px; }
a{ color:#0ea5e9; text-decoration: none; }
a:hover{ text-decoration: underline; }

header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(15,23,42,.06);
}
.top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.logo{ display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.2px;}
.logo svg{ width:28px; height:28px; color:#0ea5e9 }
.nav{ display:flex; gap:14px; flex-wrap:wrap; }
.btn{ appearance:none; border:0; cursor:pointer; border-radius:999px; padding:10px 14px; font-weight:700;
      color:white; background:linear-gradient(135deg,var(--brand),var(--brand2)); box-shadow:0 10px 25px rgba(14,165,233,.16); }
.btn--ghost{ background:transparent; color:#1f2937; border:1px solid rgba(148,163,184,.35); }

.hero{
  padding:26px 0;
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:22px;
  align-items:center;
}
.card{
  background:linear-gradient(180deg, white, #ffffff);
  border:1px solid rgba(15,23,42,.08);
  border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(2,6,23,.06);
  padding:20px;
}
.badges{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 2px }
.badge{ font-size:12px; padding:6px 10px; border-radius:999px; background:rgba(6,182,212,.12); color:#0f766e; border:1px dashed rgba(6,182,212,.35) }

.grid{ display:grid; gap:18px }
.sections{ grid-template-columns:repeat(3,1fr) }
.cards{ grid-template-columns:repeat(3,1fr) }

.section-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px }
.section-header h2{ margin:0 }
.section-intro{ color:#475569; margin:4px 0 16px }

/* article lists */
.list{ display:grid; gap:10px; }
.list a{ display:flex; align-items:flex-start; gap:10px; padding:10px; border-radius:12px; border:1px solid rgba(15,23,42,.06); background:#fff; }
.list a small{ color:#64748b }

/* ad placeholders */
.ad-slot{
  display:flex; align-items:center; justify-content:center;
  height:120px; border:2px dashed rgba(148,163,184,.6); border-radius:14px;
  color:#475569; font-weight:700; background:repeating-linear-gradient(45deg,#f8fafc,#f8fafc 10px,#eef2f7 10px,#eef2f7 20px);
}
.ad-slot--wide{ height:180px; }
.ad-note{ color:#64748b; font-size:12px; text-align:center; margin-top:6px }

/* hero image */
.heroimg{
  aspect-ratio:1/1;
  width:100%;
  border-radius:20px;
  object-fit:cover;
  border:1px solid rgba(15,23,42,.08);
}

/* footer */
footer{ border-top:1px solid rgba(15,23,42,.08); margin-top:28px; color:#64748b; font-size:14px }
footer .wrap{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* responsive */
@media (max-width:1024px){
  .sections{ grid-template-columns:1fr 1fr }
  .cards{ grid-template-columns:1fr 1fr }
}
@media (max-width:760px){
  .hero{ grid-template-columns:1fr; }
  .sections{ grid-template-columns:1fr }
  .cards{ grid-template-columns:1fr }
  .nav{ display:none }
}