:root{
  --tt-primary: #0d6efd;
  --tt-accent: #20c997;
  --tt-ink: #0b1220;
  --tt-soft: #f6f9ff;
  --tt-border: rgba(13,110,253,.18);
}

html { scroll-behavior: smooth; }
body{
  font-size: 18px;
  color: var(--tt-ink);
  background: #ffffff;
}

.brand-mark{
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--tt-primary), var(--tt-accent));
  color: #fff;
  box-shadow: 0 8px 18px rgba(13,110,253,.18);
}

.hero{
  background:
    radial-gradient(1200px 500px at 10% 0%, rgba(13,110,253,.18), transparent 55%),
    radial-gradient(900px 450px at 95% 10%, rgba(32,201,151,.18), transparent 60%),
    linear-gradient(180deg, var(--tt-soft), #ffffff 55%);
}

.hero-card{
  border: 1px solid var(--tt-border);
  border-radius: 18px;
  box-shadow: 0 14px 28px rgba(11,18,32,.08);
}

.section-title{
  letter-spacing: -.02em;
}

.icon-pill{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(13,110,253,.08);
  border: 1px solid var(--tt-border);
}

.card{
  border-radius: 18px;
  border: 1px solid rgba(11,18,32,.08);
  box-shadow: 0 10px 22px rgba(11,18,32,.05);
}

.badge-soft{
  background: rgba(13,110,253,.10);
  color: #0b2d6e;
  border: 1px solid var(--tt-border);
  font-weight: 600;
}

.form-control, .form-select{
  border-radius: 14px;
}

.btn{
  border-radius: 14px;
}

.footer-note{
  font-size: 0.95rem;
}

.kpi{
  border: 1px solid rgba(11,18,32,.08);
  border-radius: 18px;
  padding: 18px;
  background: #fff;
}

.kpi .num{
  font-weight: 800;
  letter-spacing: -.02em;
}

.callout{
  border: 1px dashed rgba(13,110,253,.35);
  background: rgba(13,110,253,.06);
  border-radius: 18px;
}

.small-muted{ color: rgba(11,18,32,.65); }

a.link-secondary:hover{ color: var(--tt-primary)!important; }

@media (max-width: 991px){
  .hero-card{ margin-top: 10px; }
}