:root{
  --bg:#f6f7f9; --card:#ffffff; --muted:#6b7280; --text:#0b1220; --accent:#111827;
}
html[data-theme="dark"]{ --bg:#0b0f14; --card:#0f1720; --muted:#9aa4b2; --text:#e6eef8; --accent:#e6eef8; }
body{ background:var(--bg); color:var(--text); font-family:Inter,system-ui,Arial,Segoe UI; margin:0; }
.navbar{ background:var(--card); }
.header-hero{ padding-top:3rem; padding-bottom:3rem; }
.card.tool{ background:var(--card); border:1px solid rgba(0,0,0,0.04); border-radius:12px; box-shadow:0 6px 20px rgba(16,24,40,0.04); transition:transform .12s ease,box-shadow .12s ease; }
.card.tool:hover{ transform:translateY(-6px); box-shadow:0 12px 30px rgba(16,24,40,0.08); }
.tool .icon{ width:56px; height:56px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:rgba(17,24,39,0.04); font-size:26px; color:var(--accent); }
.section-title{ margin:1.5rem 0 0.5rem; font-weight:700; }
.small-muted{ color:var(--muted); font-size:.95rem; }
footer{ background:var(--card); }
@media (max-width:576px){ .tool .icon{ width:48px;height:48px;font-size:22px; } }