.page-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-height) + 72px) 0 58px;
  background:
    radial-gradient(circle at 12% 20%, rgba(185, 150, 255, 0.18), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(142, 220, 255, 0.18), transparent 30%),
    linear-gradient(135deg, #fbf8ff 0%, #f4efff 46%, #effaff 100%);
}

.page-hero .container,
.page-content .container {
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  max-width: 850px;
  font-family: var(--font-title);
  font-size: clamp(2.4rem, 5vw, 4.7rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  color: #23172f;
}

.page-hero p {
  max-width: 760px;
  margin-top: 22px;
  color: var(--color-muted);
  font-size: clamp(1rem, 1.4vw, 1.14rem);
}

.page-content {
  padding: 58px 0 76px;
  background: var(--color-soft);
}

.content-card,
.service-detail-card,
.legal-card,
.not-found-card {
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(91, 60, 164, 0.12);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-card);
}

.content-card p,
.service-detail-card p,
.legal-card p {
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.75;
}

.content-card p + p,
.service-detail-card p + p,
.legal-card p + p {
  margin-top: 14px;
}

.service-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.65fr);
  gap: 28px;
  align-items: start;
}

.service-detail-media {
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.service-detail-media img {
  width: 100%;
  height: min(56vw, 460px);
  object-fit: cover;
}

.detail-faq {
  margin-top: 36px;
}

.detail-faq h2 {
  margin-bottom: 18px;
  font-family: var(--font-title);
  font-size: clamp(2rem, 3.8vw, 3.35rem);
  line-height: 1;
  letter-spacing: -0.045em;
  color: #23172f;
}

@media (max-width: 760px) {
  .page-hero {
    padding: calc(var(--header-height) + 38px) 0 38px;
  }

  .page-content {
    padding: 34px 0 58px;
  }

  .service-detail-grid {
    grid-template-columns: 1fr;
  }

  .service-detail-media img {
    height: 280px;
  }
}