/* ==========================================================================
   核心服务区块（从 stylekit-brand-line-cards.php 内联，样式限定在 #services 内）
   ========================================================================== */
#services {
  position: relative;
  overflow: hidden;
  color: #f5f1ff;
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  background: #000000;
}
#services * { box-sizing: border-box; }
#services button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
#services button:focus-visible, #services article:focus-visible {
  outline: 2px solid #247cff; outline-offset: 6px;
}

#services .svc-main { position: relative; z-index: 1; width: min(1320px, calc(100% - 80px)); margin: 0 auto; padding: 96px 0; }
#services .masthead { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
#services .signature { display: flex; align-items: baseline; gap: 13px; font-size: 12px; }
#services .signature strong { font: 700 20px "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif; letter-spacing: 0; }
#services .introduction { display: flex; justify-content: space-between; align-items: flex-end; gap: 35px; margin: 55px 0 29px; }
#services h1 { margin: 0; font: 400 clamp(38px, 4.1vw, 57px)/1.04 Georgia, "Times New Roman", serif; letter-spacing: -2.5px; }
#services .introduction p { margin: 0 0 3px; max-width: 247px; color: #8d7fb8; font-size: 12px; line-height: 1.7; }
#services .cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px;
  perspective: 900px;
}
#services .brand-card {
  --background: #eeeeeb; --foreground: #202220; --secondary: #686b64;
  --shadow-color: 60deg 5% 16%;
  --rx: 0deg; --ry: 0deg; --ty: 0px;
  position: relative; isolation: isolate; min-width: 0; min-height: 460px;
  aspect-ratio: .70; overflow: hidden; border-radius: 17px;
  background: var(--background); color: var(--foreground); touch-action: pan-y;
  box-shadow:
    0 .5px 1px hsl(var(--shadow-color) / .28),
    0 1px 2px hsl(var(--shadow-color) / .24),
    0 2px 4px hsl(var(--shadow-color) / .2),
    0 4px 8px hsl(var(--shadow-color) / .16),
    inset 0 0 0 1px rgb(0 0 0 / .035);
  transform: translate3d(0, var(--ty), 0) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow 220ms cubic-bezier(.23, 1, .32, 1);
}
#services .brand-card.is-lifted {
  box-shadow:
    0 1px 2px hsl(var(--shadow-color) / .26),
    0 2px 4px hsl(var(--shadow-color) / .22),
    0 6px 12px hsl(var(--shadow-color) / .2),
    0 12px 24px hsl(var(--shadow-color) / .18),
    0 24px 48px hsl(var(--shadow-color) / .14),
    inset 0 0 0 1px rgb(0 0 0 / .035);
}
#services .brand-card[data-brand="cloud"] { --background: #123f9e; --foreground: #eef3ff; --secondary: #a9c4ff; }
#services .brand-card[data-brand="marketing"] { --background: #d94912; --foreground: #fff3ea; --secondary: #ffc6a3; }
#services .brand-card[data-brand="ai"] { --background: #6d28d9; --foreground: #f5f3ff; --secondary: #c4b5fd; }
#services .field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* 后台设置的「跳转链接」→ 整卡可点 */
#services .card-link {
  position: absolute; inset: 0; z-index: 3;
  border-radius: 17px; cursor: pointer;
}
#services .brand-card[data-has-link="1"] { cursor: pointer; }
#services .card-link:focus-visible { outline: 2px solid #ff3d8f; outline-offset: -3px; }
#services .card-header { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; padding: 27px 27px 0; pointer-events: none; }
#services .mini-mark { flex: none; width: 21px; height: 25px; }
#services .brand-name { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: -.3px; }
#services .scan-status { margin-left: auto; font-size: 9px; letter-spacing: .01em; color: var(--secondary); opacity: .7; }
#services .card-footer { position: absolute; left: 29px; right: 25px; bottom: 29px; z-index: 2; pointer-events: none; }
#services .tagline { margin: 0 0 23px; font-size: clamp(27px, 2.75vw, 37px); font-weight: 400; line-height: 1.04; letter-spacing: -1.2px; }
#services .card-sub { margin: 0; font-size: 11px; color: var(--secondary); line-height: 1.4; }
#services .colophon { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 23px; color: #8d7fb8; font-size: 10px; line-height: 1.5; }
#services .colophon p { margin: 0; }
#services .colophon .slogan { font-size: 22px; font-weight: 600; letter-spacing: -0.4px; color: #f5f1ff; line-height: 1.1; }
#services .fallback { padding: 20px; border: 1px solid #d4d4d0; font-size: 14px; }

@media (min-width: 1450px) {
  #services .svc-main { padding-top: 110px; }
  #services .introduction { margin-top: 76px; }
}
@media (max-width: 850px) {
  #services .svc-main { width: calc(100% - 40px); padding: 72px 0; }
  #services .introduction { margin-top: 40px; }
  #services h1 { font-size: 44px; }
  #services .introduction p { max-width: 190px; }
  #services .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  #services .brand-card { min-height: 430px; }
  #services .card-header { padding: 23px 18px 0; gap: 6px; }
  #services .scan-status { display: none; }
  #services .card-footer { left: 21px; right: 15px; bottom: 25px; }
  #services .tagline { font-size: 27px; }
}
@media (max-width: 650px) {
  #services .svc-main { width: calc(100% - 24px); padding: 56px 0; }
  #services .introduction { display: block; margin: 32px 0 22px; }
  #services h1 { font-size: 36px; letter-spacing: -1.6px; }
  #services .introduction p { max-width: 270px; margin-top: 14px; font-size: 12px; }
  #services .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #services .brand-card { min-height: 300px; }
  #services .card-header { padding: 14px 12px 0; gap: 5px; }
  #services .brand-name { font-size: 13px; }
  #services .scan-status { display: none; }
  #services .card-footer { left: 14px; right: 12px; bottom: 16px; }
  #services .tagline { font-size: 20px; margin-bottom: 14px; }
  #services .card-sub { font-size: 10px; }
  #services .colophon { margin-top: 20px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #services .brand-card { transition: none; transform: none; }
}