/* Minimal Tailwind-like utility layer (subset) for this site.
   All visual styling is applied via utility classes in HTML. */

:root{
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-600:#475569; --slate-700:#334155; --slate-800:#1f2937; --slate-900:#0f172a;
  --indigo-500:#6366f1; --indigo-600:#4f46e5; --indigo-700:#4338ca;
  --emerald-500:#10b981; --amber-500:#f59e0b; --rose-500:#f43f5e;
  --white:#fff;
}

/* Base */
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color:var(--slate-900); background:var(--slate-50); line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
:focus{outline:2px solid rgba(79,70,229,.35); outline-offset:2px}

/* Layout utilities */
.container{width:100%;max-width:1100px;margin-left:auto;margin-right:auto}
.mx-auto{margin-left:auto;margin-right:auto}
.px-4{padding-left:1rem;padding-right:1rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-14{padding-top:3.5rem;padding-bottom:3.5rem}
.p-3{padding:.75rem}
.p-4{padding:1rem}
.p-6{padding:1.5rem}
.p-8{padding:2rem}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mt-10{margin-top:2.5rem}
.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mb-10{margin-bottom:2.5rem}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.grid{display:grid}
.flex{display:flex}
.inline-flex{display:inline-flex}
.hidden{display:none}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.text-center{text-align:center}
.text-left{text-align:left}
.w-full{width:100%}
.max-w-xl{max-width:36rem}
.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}
.max-w-5xl{max-width:64rem}
.min-w-0{min-width:0}
.rounded-xl{border-radius:1rem}
.rounded-2xl{border-radius:1.25rem}
.rounded-full{border-radius:9999px}
.border{border:1px solid var(--slate-200)}
.border-slate-200{border-color:var(--slate-200)}
.shadow-sm{box-shadow:0 1px 2px rgba(15,23,42,.06)}
.shadow-md{box-shadow:0 8px 24px rgba(15,23,42,.12)}
.overflow-hidden{overflow:hidden}

/* Typography */
.text-xs{font-size:.75rem}
.text-sm{font-size:.875rem}
.text-base{font-size:1rem}
.text-lg{font-size:1.125rem}
.text-xl{font-size:1.25rem}
.text-2xl{font-size:1.5rem}
.text-3xl{font-size:1.875rem}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.leading-tight{line-height:1.15}
.tracking-tight{letter-spacing:-.02em}

/* Colors */
.bg-white{background:var(--white)}
.bg-slate-50{background:var(--slate-50)}
.bg-slate-100{background:var(--slate-100)}
.bg-slate-900{background:var(--slate-900)}
.text-white{color:var(--white)}
.text-slate-600{color:var(--slate-600)}
.text-slate-700{color:var(--slate-700)}
.text-slate-800{color:var(--slate-800)}
.text-slate-900{color:var(--slate-900)}
.text-indigo-600{color:var(--indigo-600)}
.bg-indigo-600{background:var(--indigo-600)}
.bg-indigo-700{background:var(--indigo-700)}
.bg-emerald-500{background:var(--emerald-500)}
.bg-amber-500{background:var(--amber-500)}
.bg-rose-500{background:var(--rose-500)}
.ring-1{box-shadow:0 0 0 1px rgba(226,232,240,.9) inset}

/* Buttons & inputs */
.btn{border:0;cursor:pointer}
.btn-primary{background:var(--indigo-600); color:#fff}
.btn-primary:hover{background:var(--indigo-700)}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:rgba(226,232,240,.6)}
.input{border:1px solid var(--slate-200); background:#fff; padding:.75rem 1rem; border-radius:1rem; width:100%}
.textarea{min-height:120px; resize:vertical}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .7rem;border-radius:9999px;font-size:.75rem;font-weight:600;border:1px solid var(--slate-200);background:#fff}
.badge-dot{width:.45rem;height:.45rem;border-radius:9999px;background:var(--emerald-500)}

/* Decorative */
.hero-grad{background: radial-gradient(1200px 600px at 10% 10%, rgba(99,102,241,.18), transparent 55%),
            radial-gradient(900px 500px at 90% 30%, rgba(16,185,129,.14), transparent 60%),
            linear-gradient(180deg, #ffffff, #f8fafc);}
.kpi{background:linear-gradient(180deg,#fff, #f8fafc); border:1px solid var(--slate-200)}

/* Responsive */
@media (min-width: 768px){
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\:flex{display:flex}
  .md\:hidden{display:none}
  .md\:text-left{text-align:left}
  .md\:items-center{align-items:center}
  .md\:justify-between{justify-content:space-between}
  .md\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .md\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}
  .md\:text-4xl{font-size:2.25rem}
}
@media (min-width: 1024px){
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:px-8{padding-left:2rem;padding-right:2rem}
}


/* Interaction helpers (utility-like) */
.transition{transition: all .2s ease}
.transition-slow{transition: all .35s ease}
.hover\:lift:hover{transform: translateY(-4px)}
.hover\:shadow:hover{box-shadow:0 18px 40px rgba(15,23,42,.14)}
.hover\:ring:hover{box-shadow:0 0 0 1px rgba(99,102,241,.35) inset, 0 10px 24px rgba(15,23,42,.10)}
.cursor-pointer{cursor:pointer}
.backdrop{backdrop-filter: blur(10px)}
/* Subtle motion */
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.animate-float{animation: floaty 6s ease-in-out infinite}
/* Gradient pill */
.pill{background:linear-gradient(90deg, rgba(99,102,241,.18), rgba(16,185,129,.14)); border:1px solid var(--slate-200)}
/* Decorative divider */
.hr-soft{height:1px;background:linear-gradient(90deg, transparent, rgba(203,213,225,.9), transparent)}