/* ============================
   服务页面
   ============================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ==================== Hero ==================== */
.svc-hero {
  position: relative; min-height: 50vh;
  display: flex; align-items: center; justify-content: center;
  background: #0a0a0b; overflow: hidden;
}
.svc-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.svc-hero-glow {
  position: absolute; width: 50rem; height: 50rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,72,72,.06) 0%, transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.svc-hero-content { position: relative; z-index: 2; text-align: center; padding: 4rem 2rem; }
.svc-hero-title { font-size: 5rem; font-weight: 800; color: #fff; letter-spacing: -2px; margin-bottom: 1.6rem; }
.svc-hero-title em { font-style: normal; background: linear-gradient(135deg, #ff4848, #ff6b6b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.svc-hero-sub { font-size: 1.6rem; color: rgba(255,255,255,.6); max-width: 90rem; margin: 0 auto; white-space: nowrap; }
@media (max-width: 768px) { .svc-hero-sub { white-space: normal; } }

/* ==================== Main ==================== */
.svc-main { padding: 6rem 3rem 12rem; background: #e8e9eb; min-height: 40rem; }
.svc-main .svc-grid { max-width: 120rem; margin: 0 auto; color: #111; }
.svc-main .empty-state { color: rgba(0,0,0,.35); }
.svc-main .empty-state h3 { color: rgba(0,0,0,.6); }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }

/* ==================== Service Card ==================== */
.svc-card {
  background: var(--card-bg); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.svc-card-img {
  width: 100%; aspect-ratio: 16/10;
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.svc-card-img img { width: 100%; height: 100%; object-fit: cover; }
.svc-card-name { font-size: 2rem; font-weight: 700; color: var(--text); padding: 2rem 2.4rem .6rem; }
.svc-card-desc { font-size: 1.4rem; color: var(--text-secondary); line-height: 1.7; padding: 0 2.4rem 2.4rem; }

.site-footer { background: #111; color: rgba(255,255,255,.35); border-top: 1px solid rgba(255,255,255,.08); padding-top: 4rem; }
.site-footer a { color: rgba(255,255,255,.35); }
.site-footer a:hover { color: var(--primary); }

/* ==================== Placeholder ==================== */
.svc-card-img img[src*="placeholder"] { width: 40%; height: 40%; object-fit: contain; opacity: .25; }

/* ==================== Skeleton ==================== */
.svc-card.skeleton { min-height: 30rem; background: linear-gradient(90deg, rgba(128,128,128,.06) 25%, rgba(128,128,128,.12) 50%, rgba(128,128,128,.06) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ==================== 响应式 ==================== */
@media (max-width: 900px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-hero-title { font-size: 3.6rem; }
}
@media (max-width: 640px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-hero { min-height: 40vh; }
  .svc-hero-title { font-size: 2.8rem; }
  .svc-main { padding: 4rem 2rem 10rem; }
}