:root {
  --sdl360-blue: #0f3d5e;
  --sdl360-blue-2: #164f73;
  --sdl360-gold: #c89b3c;
  --sdl360-cream: #f8f2e8;
  --sdl360-ink: #12212c;
  --sdl360-muted: #5b6873;
  --sdl360-line: rgba(15, 61, 94, 0.16);
  --sdl360-radius: 8px;
}

.sdl360-system,
.sdl360-app {
  color: var(--sdl360-ink);
  font-family: inherit;
}

.sdl360-app {
  background: linear-gradient(180deg, #fff 0%, var(--sdl360-cream) 100%);
  border: 1px solid var(--sdl360-line);
  border-radius: var(--sdl360-radius);
  box-shadow: 0 18px 48px rgba(15, 61, 94, 0.08);
  margin: 24px auto;
  max-width: 1120px;
  padding: clamp(20px, 4vw, 40px);
}

.sdl360-app h2,
.sdl360-system h1,
.sdl360-system h2,
.sdl360-system h3 {
  letter-spacing: 0;
  line-height: 1.12;
}

.sdl360-app p,
.sdl360-system p {
  color: var(--sdl360-muted);
}

.sdl360-premium-hero {
  background: radial-gradient(circle at 20% 20%, rgba(200, 155, 60, 0.22), transparent 28%), var(--sdl360-blue);
  color: #fff;
  padding: clamp(56px, 9vw, 112px) 0;
}

.mw-shell {
  margin: 0 auto;
  max-width: 1180px;
  padding: 0 20px;
}

.sdl360-hero-layout,
.sdl360-dashboard,
.sdl360-security-strip {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.sdl360-premium-hero h1 {
  color: #fff;
  font-size: clamp(38px, 4rem, 76px);
  margin: 0 0 18px;
}

.sdl360-premium-hero h1 span,
.sdl360-eyebrow,
.sdl360-kicker {
  color: var(--sdl360-gold);
}

.sdl360-eyebrow,
.sdl360-kicker {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sdl360-actions,
.sdl360-buttons,
.sdl360-mini-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.sdl360-actions a,
.sdl360-btn,
.sdl360-app button,
.sdl360-form button {
  align-items: center;
  background: var(--sdl360-gold);
  border: 0;
  border-radius: var(--sdl360-radius);
  color: #12212c;
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  gap: 8px;
  min-height: 42px;
  padding: 11px 16px;
  text-decoration: none;
}

.sdl360-actions a.alt,
.sdl360-actions a.social,
.sdl360-app button:nth-child(even) {
  background: #fff;
  color: var(--sdl360-blue);
}

.sdl360-buttons button {
  border: 1px solid var(--sdl360-line);
}

.sdl360-band {
  padding: clamp(42px, 7vw, 80px) 0;
}

.sdl360-band.is-cream {
  background: var(--sdl360-cream);
}

.sdl360-band.is-dark,
.sdl360-dashboard-panel.is-dark {
  background: var(--sdl360-blue);
  color: #fff;
}

.sdl360-band.is-dark p,
.sdl360-dashboard-panel.is-dark p,
.sdl360-premium-hero p {
  color: rgba(255, 255, 255, 0.82);
}

.sdl360-module-grid,
.sdl360-care-grid,
.sdl360-flow-grid,
.sdl360-person-grid,
.sdl360-unique-grid,
.sdl360-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.sdl360-module,
.sdl360-care-card,
.sdl360-flow-step,
.sdl360-person,
.sdl360-unique,
.sdl360-grid article,
.sdl360-dashboard-panel,
.sdl360-phone,
.sdl360-suggestion {
  background: #fff;
  border: 1px solid var(--sdl360-line);
  border-radius: var(--sdl360-radius);
  padding: 18px;
}

.sdl360-icon {
  align-items: center;
  background: rgba(200, 155, 60, 0.15);
  border-radius: 999px;
  color: var(--sdl360-blue);
  display: inline-flex;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.sdl360-form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.sdl360-form input,
.sdl360-form select,
.sdl360-form textarea {
  border: 1px solid var(--sdl360-line);
  border-radius: var(--sdl360-radius);
  font: inherit;
  min-height: 42px;
  padding: 10px 12px;
  width: 100%;
}

.sdl360-form textarea {
  min-height: 110px;
}

.sdl360-form input:focus,
.sdl360-form select:focus,
.sdl360-form textarea:focus,
.sdl360-app button:focus,
.sdl360-actions a:focus {
  outline: 3px solid rgba(200, 155, 60, 0.45);
  outline-offset: 2px;
}

.sdl360-form-result {
  border-radius: var(--sdl360-radius);
  min-height: 24px;
  padding: 10px 12px;
}

.sdl360-form-result.ok {
  background: rgba(32, 133, 99, 0.12);
  color: #176344;
}

.sdl360-form-result.error {
  background: rgba(176, 55, 55, 0.12);
  color: #8f2828;
}

.sdl360-disclaimer,
.sdl360-reference-note {
  font-size: 0.92rem;
}

.sdl360-hp {
  left: -9999px;
  opacity: 0;
  position: absolute;
}

@media (max-width: 640px) {
  .sdl360-actions a,
  .sdl360-app button {
    justify-content: center;
    width: 100%;
  }
}