.psd-home-blocks {
  --psd-hb-primary: #51189B;
  --psd-hb-accent: #f59e0b;
  --psd-hb-ink: #111827;
  --psd-hb-muted: #5b6474;
  --psd-hb-surface: #ffffff;
  --psd-hb-border: #e4dff0;
  --psd-hb-shadow: 0 16px 42px rgba(81, 24, 155, .11);
  color: var(--psd-hb-ink);
  font-family: "Noto Sans Thai", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.psd-hb-section {
  padding: 42px 0;
}

.psd-hb-container {
  width: min(calc(100% - 32px), 1200px);
  margin: 0 auto;
}

.psd-hb-section-header {
  max-width: 780px;
  margin: 0 0 24px;
}

.psd-hb-kicker {
  display: inline-block;
  color: var(--psd-hb-accent);
  font-size: .82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.psd-hb-title {
  margin: 4px 0 0;
  color: var(--psd-hb-ink);
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1.25;
}

.psd-hb-lead {
  margin: 8px 0 0;
  color: var(--psd-hb-muted);
  line-height: 1.75;
}

.psd-hb-grid {
  display: grid;
  gap: 18px;
}

.psd-hb-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.psd-hb-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.psd-hb-card {
  display: block;
  min-width: 0;
  height: 100%;
  padding: 22px;
  border: 1px solid var(--psd-hb-border);
  border-radius: 16px;
  background: var(--psd-hb-surface);
  box-shadow: 0 8px 22px rgba(81, 24, 155, .07);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.psd-hb-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--psd-hb-primary) 36%, var(--psd-hb-border));
  box-shadow: var(--psd-hb-shadow);
}

.psd-hb-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--psd-hb-primary), #7c3aed);
  color: #fff;
  font-size: 1.25rem;
}

.psd-hb-service-card .psd-hb-icon {
  background: linear-gradient(135deg, var(--psd-hb-accent), #fbbf24);
  color: #2a1500;
}

.psd-hb-card-title {
  display: block;
  margin: 16px 0 6px;
  color: var(--psd-hb-ink);
  font-size: 1.12rem;
  font-weight: 850;
  line-height: 1.35;
}

.psd-hb-card-text {
  display: block;
  margin: 0;
  color: var(--psd-hb-muted);
  line-height: 1.7;
}

.psd-hb-metrics-band {
  width: min(calc(100% - 32px), 1200px);
  height: auto;
  margin: 34px auto;
  padding: 36px 36px 40px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--psd-hb-primary), #32105f);
  box-shadow: var(--psd-hb-shadow);
}

.psd-hb-metrics-band .psd-hb-container {
  width: 100%;
}

.psd-hb-metrics-band .psd-hb-title,
.psd-hb-metrics-band .psd-hb-lead {
  color: #fff;
}

.psd-hb-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
  margin-top: 22px;
}

.psd-hb-metric-card {
  min-height: 132px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  background: rgba(255,255,255,.12);
  color: #fff;
}

.psd-hb-metric-number {
  display: block;
  color: #fbbf24;
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1;
}

.psd-hb-metric-label {
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,.88);
}

@media (max-width: 980px) {
  .psd-hb-grid-4,
  .psd-hb-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .psd-hb-metrics-band {
    width: min(calc(100% - 24px), 1200px);
    padding: 28px 22px 40px;
  }

  .psd-hb-metrics-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
}