/* 对齐 client/src/pages/SolutionDetail.tsx */
.sol-page { min-height: 100vh; background: oklch(0.98 0.01 260); color: #0f172a; }

.sol-hero {
  position: relative;
  padding: 3rem 0;
  overflow: hidden;
  background: #0f172a;
  color: #fff;
}
.sol-hero__grid {
  position: absolute;
  inset: 0;
  background-image: url("../../images/grid-pattern.svg");
  background-size: 24px 24px;
  opacity: 0.1;
  pointer-events: none;
}
.sol-hero__grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, rgba(30, 58, 138, 0.5), rgba(15, 23, 42, 0.5));
  pointer-events: none;
}
.sol-hero .container { position: relative; z-index: 1; max-width: var(--container-max, 1280px); margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
.sol-hero__crumb {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-size: 0.875rem; color: #bfdbfe; margin-bottom: 1.5rem;
}
.sol-hero__crumb a { color: #bfdbfe; text-decoration: none; }
.sol-hero__crumb a:hover { color: #fff; }
.sol-hero__crumb svg { flex-shrink: 0; opacity: 0.8; }
.sol-hero h1 { font-size: 2.25rem; font-weight: 800; line-height: 1.15; margin-bottom: 1.5rem; max-width: 48rem; }
@media (min-width: 768px) { .sol-hero h1 { font-size: 3rem; } }
.sol-hero__lead { font-size: 1.25rem; line-height: 1.6; color: #dbeafe; margin-bottom: 2rem; max-width: 48rem; }
.sol-hero__btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0 1.5rem; font-size: 1rem; font-weight: 500;
  background: #2563eb; color: #fff; border-radius: 0.375rem; text-decoration: none;
  border: none; cursor: pointer; transition: background 0.2s;
  flex-direction: row !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb;
}
.sol-hero__btn:hover { background: #1d4ed8; }

.sol-sec { padding: 3rem 0; }
.sol-sec--muted { background: #f8fafc; }
.sol-sec--dark { background: #0f172a; color: #fff; }
.sol-sec .container { max-width: var(--container-max, 1280px); margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
.sol-sec__head { text-align: center; max-width: 48rem; margin: 0 auto 3rem; }
.sol-sec__head h2 { font-size: 1.875rem; font-weight: 800; color: #0f172a; margin-bottom: 1rem; }
.sol-sec--dark .sol-sec__head h2 { color: #fff; }
.sol-sec__head p { color: #475569; font-size: 1rem; }
.sol-sec--dark .sol-sec__head p { color: #bfdbfe; }

.sol-pain { display: grid; gap: 2rem; }
@media (min-width: 768px) { .sol-pain { grid-template-columns: repeat(2, 1fr); } }
.sol-pain__card {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); background: #fff; transition: box-shadow 0.3s;
}
.sol-pain__card:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1); }
@media (min-width: 768px) {
  .sol-pain__row { display: grid; grid-template-columns: 2fr 3fr; min-height: 12rem; }
}
@media (max-width: 767px) {
  .sol-pain__row { display: flex; flex-direction: column; }
  .sol-pain__left { min-height: 12rem; }
}
.sol-pain__left { position: relative; overflow: hidden; background: #e2e8f0; }
.sol-pain__left .sol-pain__shim { position: absolute; inset: 0; }
.sol-pain__left--a .sol-pain__shim { background: linear-gradient(to bottom right, #dbeafe, #eff6ff); }
.sol-pain__left--b .sol-pain__shim { background: linear-gradient(to bottom right, #e0e7ff, #eef2ff); }
.sol-pain__left img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.sol-pain__card:hover .sol-pain__left img { transform: scale(1.1); }
.sol-pain__body { padding: 1.5rem; display: flex; flex-direction: column; justify-content: center; background: #fff; }
.sol-pain__body h3 { font-size: 1.25rem; font-weight: 800; color: #0f172a; margin-bottom: 0.75rem; transition: color 0.2s; }
.sol-pain__card:hover .sol-pain__body h3 { color: #2563eb; }
.sol-pain__body p { color: #475569; line-height: 1.6; font-size: 0.95rem; }

.sol-sol { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .sol-sol { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sol-sol { grid-template-columns: repeat(4, 1fr); } }
.sol-sol__card {
  border: 1px solid #f1f5f9; border-radius: 0.5rem; box-shadow: 0 1px 2px rgba(0,0,0,.05);
  padding: 1.5rem; text-align: center; transition: all 0.3s; background: #fff;
}
.sol-sol__card:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1); transform: translateY(-0.25rem); }
.sol-sol__ico {
  width: 3.5rem; height: 3.5rem; margin: 0 auto 1.5rem; border-radius: 0.75rem;
  background: #eff6ff; color: #2563eb; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.sol-sol__card:hover .sol-sol__ico { background: #2563eb; color: #fff; }
.sol-sol__ico svg { width: 1.75rem; height: 1.75rem; }
.sol-sol__card h3 { font-size: 1.125rem; font-weight: 800; color: #0f172a; margin-bottom: 0.75rem; }
.sol-sol__card p { font-size: 0.875rem; color: #475569; line-height: 1.6; }

.sol-scen { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .sol-scen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sol-scen { grid-template-columns: repeat(4, 1fr); } }
.sol-scen__card {
  position: relative; padding: 1.5rem; border-radius: 1rem; border: 1px solid #334155;
  background: rgba(30, 41, 59, 0.5); transition: all 0.3s;
}
.sol-scen__card:hover { background: #2563eb; border-color: #3b82f6; }
.sol-scen__ico { margin-bottom: 1rem; color: #60a5fa; transition: color 0.3s; }
.sol-scen__card:hover .sol-scen__ico { color: #fff; }
.sol-scen__ico svg { width: 2rem; height: 2rem; }
.sol-scen__card h3 { font-size: 1.25rem; font-weight: 800; color: #fff; margin-bottom: 0.5rem; }
.sol-scen__card p { font-size: 0.875rem; line-height: 1.6; color: #cbd5e1; }
.sol-scen__card:hover p { color: #dbeafe; }

.sol-cta { padding: 3rem 0; background: #2563eb; text-align: center; }
.sol-cta h2 { font-size: 1.875rem; font-weight: 800; color: #fff; margin-bottom: 1.5rem; }
.sol-cta p { color: #bfdbfe; font-size: 1.125rem; max-width: 42rem; margin: 0 auto 2rem; }
.sol-cta a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 2rem;
  background: #fff; color: #2563eb; font-weight: 600; border-radius: 0.375rem; text-decoration: none; transition: background 0.2s;
}
.sol-cta a:hover { background: #eff6ff; }