:root {
  --dsp-shell-accent: #185adb;
  --dsp-shell-accent-dark: #0b3478;
  --dsp-shell-nav: #071f3c;
  --dsp-shell-text: #102a43;
  --dsp-shell-muted: #52667a;
}

html { scroll-padding-top: 92px; }

.dsp-site-header {
  position: sticky;
  top: 0;
  z-index: 1400;
  width: 100%;
  background: var(--dsp-shell-nav);
  color: #fff;
  box-shadow: 0 4px 18px rgba(4, 21, 40, .2);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.dsp-header-inner {
  width: min(1240px, calc(100% - 32px));
  min-height: 68px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 28px;
}

.dsp-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 19px;
  font-weight: 850;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.dsp-logo img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 0 0 1px #ffffff2b;
}

.dsp-brand-accent { color: #8fc4ff; }

.dsp-primary-nav {
  display: flex;
  align-items: center;
  gap: 23px;
  margin-left: auto;
}

.dsp-primary-nav a {
  color: #dce9f7 !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.dsp-primary-nav a:hover,
.dsp-primary-nav a:focus-visible { color: #fff !important; }

.dsp-primary-nav .dsp-nav-cta {
  padding: 8px 14px;
  border-radius: 9px;
  background: #fff;
  color: var(--dsp-shell-accent-dark) !important;
}

.dsp-unified-hero {
  position: relative;
  overflow: hidden;
  width: min(1240px, calc(100% - 36px));
  margin: 28px auto 42px !important;
  padding: 52px 54px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: linear-gradient(125deg, #082b55 0%, #0d4a91 58%, #176ac4 100%) !important;
  color: #fff !important;
  box-shadow: 0 24px 54px rgba(8, 43, 85, .2) !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.dsp-unified-hero::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -180px;
  top: -230px;
  border: 80px solid #ffffff0d;
  border-radius: 50%;
  pointer-events: none;
}

.dsp-unified-hero > * { position: relative; z-index: 1; }

.dsp-unified-hero h1 {
  max-width: 850px;
  margin-top: 0;
  margin-bottom: 16px;
  color: #fff !important;
  font-size: clamp(2.35rem, 5vw, 3.7rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.04em;
  text-align: left !important;
}

.dsp-unified-hero > h2,
.dsp-unified-hero > h3,
.dsp-unified-hero .dsp-hero-inner > h2,
.dsp-unified-hero .dsp-hero-inner > h3,
.dsp-unified-hero .hero-copy > h2,
.dsp-unified-hero .hero-copy > h3,
.dsp-unified-hero .hero-container > h2,
.dsp-unified-hero .hero-container > h3 { color: #fff !important; }

.dsp-unified-hero > p,
.dsp-unified-hero > .subtitle,
.dsp-unified-hero > .hero-subtitle,
.dsp-unified-hero > .hero-description,
.dsp-unified-hero > .lead,
.dsp-unified-hero .dsp-hero-inner > p,
.dsp-unified-hero .hero-copy > p,
.dsp-unified-hero .hero-container > p {
  max-width: 820px;
  color: #d8eaff !important;
  font-size: 1.08rem;
  line-height: 1.7;
  text-align: left !important;
}

.dsp-unified-hero .breadcrumbs a,
.dsp-unified-hero > nav a { color: #fff; }

.dsp-unified-hero .article-meta a { color: #fff !important; }
.dsp-unified-hero .article-meta .meta { color: #c8def7 !important; }

.dsp-unified-hero .quick-answer,
.dsp-unified-hero .answer-box,
.dsp-unified-hero .definition-card,
.dsp-unified-hero .hub-answer {
  color: var(--dsp-shell-text);
}

.dsp-unified-hero .quick-answer p,
.dsp-unified-hero .answer-box p,
.dsp-unified-hero .definition-card p,
.dsp-unified-hero .hub-answer p {
  color: var(--dsp-shell-muted) !important;
}

.dsp-unified-hero .hero-actions a,
.dsp-unified-hero .hero-cta a,
.dsp-unified-hero a.cta-button,
.dsp-unified-hero a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 17px;
  border: 1px solid #ffffff62;
  border-radius: 10px;
  background: #fff;
  color: var(--dsp-shell-accent-dark) !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 850;
}

.dsp-hero-inner { position: relative; z-index: 1; width: min(920px, 100%); }
.dsp-compact-hero { min-height: 260px; display: flex; align-items: center; }

@media (max-width: 760px) {
  .dsp-header-inner { width: calc(100% - 24px); gap: 12px; }
  .dsp-primary-nav a:not(.dsp-nav-cta) { display: none; }
  .dsp-unified-hero {
    width: calc(100% - 28px);
    margin-top: 20px !important;
    padding: 36px 24px !important;
    border-radius: 18px !important;
  }
  .dsp-unified-hero h1 { font-size: 2.3rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}