:root{
  --brand-1:#6f42c1; /* purple */
  --brand-2:#0d6efd; /* blue */
  --ink:#0b1220;
  --muted:#5b6472;
  --card:#ffffff;
  --bg:#f6f7fb;
  --ring: rgba(13,110,253,.25);
}

[data-theme="dark"]{
  --ink:#e8eefc;
  --muted:#a7b2c6;
  --card:#0f172a;
  --bg:#070b14;
  --ring: rgba(111,66,193,.35);
}

html,body{height:100%}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--ink);
}

a{color: inherit}
.small-muted{color:var(--muted)}
.text-muted{color:var(--muted)!important}
.bg-surface{background:var(--card)!important}

.navbar{
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--bg), transparent 35%);
  border-bottom: 1px solid color-mix(in srgb, var(--muted), transparent 75%);
}

.navbar .nav-link{
  color: var(--ink);
  opacity:.85;
}
.navbar .nav-link:hover{opacity:1}
.navbar .navbar-brand{
  font-weight:800;
  letter-spacing:.2px;
}

.brand-badge{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.55rem .9rem;
  border-radius:999px;
  background: color-mix(in srgb, var(--card), transparent 5%);
  border:1px solid color-mix(in srgb, var(--muted), transparent 75%);
  box-shadow: 0 10px 25px rgba(2,6,23,.06);
}

.gradient-text{
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero{
  position:relative;
  overflow:hidden;
  border-radius: 1.5rem;
  background:
    radial-gradient(900px 450px at 0% 0%, color-mix(in srgb, var(--brand-1), transparent 65%), transparent 60%),
    radial-gradient(900px 450px at 100% 0%, color-mix(in srgb, var(--brand-2), transparent 65%), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--card), transparent 0%), color-mix(in srgb, var(--card), transparent 0%));
  border:1px solid color-mix(in srgb, var(--muted), transparent 80%);
  box-shadow: 0 24px 60px rgba(2,6,23,.10);
}

.hero:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--brand-1), transparent 75%), transparent),
    radial-gradient(closest-side, color-mix(in srgb, var(--brand-2), transparent 75%), transparent);
  opacity:.35;
  pointer-events:none;
}

.kpi{
  border-radius: 1rem;
  background: color-mix(in srgb, var(--card), transparent 0%);
  border:1px solid color-mix(in srgb, var(--muted), transparent 80%);
  box-shadow: 0 14px 30px rgba(2,6,23,.08);
}

.card{
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--muted), transparent 80%);
  border-radius: 1.25rem;
  box-shadow: 0 16px 45px rgba(2,6,23,.06);
}

.btn-primary{
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  border: none;
  box-shadow: 0 10px 25px rgba(13,110,253,.25);
}
.btn-primary:hover{filter:brightness(1.03)}
.btn-outline-primary{
  border-color: color-mix(in srgb, var(--brand-2), transparent 35%);
  color: var(--ink);
}
.btn-outline-primary:hover{
  background: color-mix(in srgb, var(--brand-2), transparent 85%);
  border-color: color-mix(in srgb, var(--brand-2), transparent 35%);
  color: var(--ink);
}

.icon-chip{
  width: 48px; height: 48px;
  display:grid; place-items:center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--card), transparent 0%);
  border:1px solid color-mix(in srgb, var(--muted), transparent 80%);
}

.section-title{
  font-weight: 850;
  letter-spacing: -0.02em;
}

.soft-divider{
  height:1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--muted), transparent 70%), transparent);
}

.footer{
  border-top: 1px solid color-mix(in srgb, var(--muted), transparent 80%);
}

.fade-up{
  opacity:0;
  transform: translateY(10px);
  transition: all .6s ease;
}
.fade-up.in{
  opacity:1;
  transform:none;
}

.code-pill{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.9rem;
  padding:.4rem .7rem;
  border-radius:999px;
  background: color-mix(in srgb, var(--bg), transparent 0%);
  border: 1px solid color-mix(in srgb, var(--muted), transparent 75%);
}

.table{
  --bs-table-bg: transparent;
  color: var(--ink);
}

.form-control, .form-select{
  background: color-mix(in srgb, var(--card), transparent 0%);
  border-color: color-mix(in srgb, var(--muted), transparent 75%);
  color: var(--ink);
}
.form-control:focus, .form-select:focus{
  border-color: color-mix(in srgb, var(--brand-2), transparent 20%);
  box-shadow: 0 0 0 .25rem var(--ring);
  color: var(--ink);
  background: color-mix(in srgb, var(--card), transparent 0%);
}
.dropdown-menu{
  background: var(--card);
  border-color: color-mix(in srgb, var(--muted), transparent 80%);
  border-radius: 1rem;
  box-shadow: 0 16px 45px rgba(2,6,23,.12);
}
.badge-soft{
  background: color-mix(in srgb, var(--brand-2), transparent 88%);
  border: 1px solid color-mix(in srgb, var(--brand-2), transparent 72%);
  color: var(--ink);
}