:root{ --ink:#0f172a; --muted:#64748b; --soft:#f5f7fb; --brand:#2563eb; }
.bg-soft{ background: var(--soft); color: var(--ink); }
.nav-glass{ background: rgba(15,23,42,.85); backdrop-filter: blur(10px); }
.brand-dot{ display:inline-block;width:10px;height:10px;border-radius:999px;background:linear-gradient(135deg,#22c55e,#2563eb);margin-right:8px;transform:translateY(-1px); }
.link-muted{ color: var(--muted); font-size: 1.25rem; }
.link-muted:hover{ color: var(--ink); }
.hero{ border-radius:1.25rem; overflow:hidden; padding:3rem 1.5rem;
  background: radial-gradient(1200px circle at 20% 20%, rgba(37,99,235,.18), transparent 40%),
              radial-gradient(1200px circle at 80% 0%, rgba(34,197,94,.16), transparent 40%),
              linear-gradient(180deg,#fff,#f8fafc);
  box-shadow:0 18px 40px rgba(15,23,42,.08);
}
.badge-soft{ background:rgba(37,99,235,.08); color:var(--brand); border:1px solid rgba(37,99,235,.18); }
.card-elev{ border:0; border-radius:1rem; box-shadow:0 10px 24px rgba(15,23,42,.06); }
.card-elev:hover{ transform:translateY(-2px); transition:180ms ease; box-shadow:0 14px 32px rgba(15,23,42,.10); }
.thumb{ width:100%; height:180px; object-fit:cover; border-top-left-radius:1rem; border-top-right-radius:1rem; }