/* Palette & tokens */
:root{
  --brand:#4f46e5;          /* indigo-ish */
  --ink:#0f172a;            /* near-black */
  --muted:#64748b;          /* slate */
  --surface:#ffffff;
  --soft:#f8fafc;
  --radius:14px;
  --shadow-sm:0 4px 14px rgba(15,23,42,.06);
  --shadow-md:0 12px 30px rgba(15,23,42,.12);
}

/* Simple spacing helpers (only a few) */
.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}
.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}

/* Typography helpers */
.lead{font-size:1.175rem; line-height:1.6; color:var(--ink)}
.measure{max-width:64ch}

/* Hero treatment */
.hero--soft{
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(79,70,229,.08), transparent 60%),
    radial-gradient(900px 400px at 90% 10%, rgba(79,70,229,.06), transparent 60%),
    var(--surface);
  border-bottom:1px solid #eef2f7;
}
.hero .title{letter-spacing:-.015em}

/* Pills & tags */
.pill{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .6rem; border-radius:9999px; background:#eef2ff; color:#3730a3; font-size:.8rem;
}

/* Cards lift a little */
.lift{border-radius:var(--radius); box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease}
.lift:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}

/* Demo illustration card */
.demo-card{
  background:linear-gradient(180deg,#fff, #f9fafb);
  border:1px solid #eef2f7; border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:1rem;
}
.demo-chip{display:inline-block; background:#eef2ff; color:#3730a3; border-radius:999px; padding:.15rem .5rem; font-size:.75rem}

/* Subtle divider */
.divider{height:1px; background:linear-gradient(90deg,transparent,#e5e7eb,transparent)}