:root{
  --cp-dark: #0b0f14;
  --cp-accent: #ffc107;
}

body { color: #111; }

.topbar{
  background: linear-gradient(90deg, var(--cp-dark), #111827);
}

.hero{
  background:
    radial-gradient(900px 500px at 15% 20%, rgba(255,193,7,0.25), transparent 60%),
    radial-gradient(700px 420px at 80% 25%, rgba(13,110,253,0.15), transparent 60%),
    #ffffff;
}

.hero-img{
  max-width: 560px;
}

.brand-logo{
  height: 34px;
  width: auto;
  max-width: 200px;
}
@media (min-width: 992px){
  .brand-logo{ height: 40px; }
}

.footer{
  background: #0b0f14;
  color: #fff;
}
.footer a{
  color: rgba(255,255,255,.8);
  text-decoration: none;
}
.footer a:hover{
  color: #fff;
  text-decoration: underline;
}

.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--cp-accent);
  display: inline-block;
}

.card img{
  object-fit: cover;
}

.breadcrumb a{
  text-decoration: none;
}
.breadcrumb a:hover{
  text-decoration: underline;
}

.rounded-4{ border-radius: 1rem !important; }