:root{
  --sp-blue:#2E2D64;
  --sp-blue-2:#434285;
  --sp-gold:#FDCD34;
  --sp-gold-2:#F2AC25;
  --sp-red:#D93635;
  --sp-ink:#0f172a;
  --sp-muted:#64748b;
  --sp-bg:#ffffff;
  --sp-soft:#f8fafc;
  --sp-border:#e2e8f0;
}

html{scroll-behavior:smooth;}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--sp-ink);
  background: var(--sp-bg);
}

a{color: var(--sp-blue);}
a:hover{color: var(--sp-blue-2);}

.navbar{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(226,232,240,.7);
}

.brand-mark{height:34px; width:auto;}
.brand-logo{height:38px; width:auto;}

.btn-primary{
  --bs-btn-bg: var(--sp-blue);
  --bs-btn-border-color: var(--sp-blue);
  --bs-btn-hover-bg: var(--sp-blue-2);
  --bs-btn-hover-border-color: var(--sp-blue-2);
  --bs-btn-active-bg: var(--sp-blue-2);
  --bs-btn-active-border-color: var(--sp-blue-2);
}
.btn-outline-primary{
  --bs-btn-color: var(--sp-blue);
  --bs-btn-border-color: var(--sp-blue);
  --bs-btn-hover-bg: var(--sp-blue);
  --bs-btn-hover-border-color: var(--sp-blue);
  --bs-btn-active-bg: var(--sp-blue-2);
  --bs-btn-active-border-color: var(--sp-blue-2);
}
.badge-gold{
  background: var(--sp-gold);
  color: #1f2937;
}
.badge-blue{
  background: rgba(46,45,100,.12);
  color: var(--sp-blue);
  border: 1px solid rgba(46,45,100,.18);
}
.badge-red{
  background: rgba(217,54,53,.12);
  color: var(--sp-red);
  border: 1px solid rgba(217,54,53,.18);
}

.hero{
  background:
    radial-gradient(1200px 500px at 15% 5%, rgba(253,205,52,.25), transparent 55%),
    radial-gradient(1100px 500px at 85% 0%, rgba(46,45,100,.18), transparent 60%),
    linear-gradient(180deg, #ffffff, #ffffff);
}
.hero h1{letter-spacing:-0.02em;}
.hero .lead{color: #334155;}

.section{padding: 72px 0;}
.section-sm{padding: 48px 0;}
.section-title{
  font-weight: 750;
  letter-spacing: -0.015em;
}
.kpi{
  border: 1px solid var(--sp-border);
  border-radius: 18px;
  padding: 18px;
  background: #fff;
  height: 100%;
}
.card{
  border: 1px solid var(--sp-border);
  border-radius: 18px;
}
.card.shadow-soft{box-shadow: 0 10px 30px rgba(15,23,42,.06);}
.icon-bubble{
  width:44px;height:44px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  background: rgba(253,205,52,.25);
  border: 1px solid rgba(253,205,52,.35);
}
.icon-bubble i{color: var(--sp-blue);}

.price-card .price{
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sp-ink);
}
.price-card .muted{color: var(--sp-muted);}

.table thead th{
  background: var(--sp-soft);
  border-bottom: 1px solid var(--sp-border);
}
.table td, .table th{vertical-align: middle;}
.table-responsive{border:1px solid var(--sp-border); border-radius: 16px; overflow:hidden;}

.footer{
  border-top: 1px solid var(--sp-border);
  background: #fff;
}
.footer a{color: #334155; text-decoration:none;}
.footer a:hover{color: var(--sp-blue);}

.back-to-top{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1030;
  display:none;
}
.back-to-top .btn{
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(15,23,42,.18);
}

.smallprint{color: var(--sp-muted); font-size: .92rem;}

.callout{
  border: 1px dashed rgba(46,45,100,.35);
  background: rgba(46,45,100,.06);
  border-radius: 18px;
  padding: 18px;
}