:root {
    --bg: #111114;
    --bg-card: #1a1a1f;
    --line: #2a2a32;
    --text: #e8e8ec;
    --text-dim: #9a9aa6;
    --accent: #e8b45a;
    --radius: 14px;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    line-height: 1.8;
  }
  a { color:inherit; text-decoration:none; }
  button { font-family:inherit; }
  .wrap { max-width: 980px; margin:0 auto; padding:0 24px; }
  .hidden { display:none !important; }
  /* ── 通用 ── */
  section { padding:80px 0; border-top:1px solid var(--line); scroll-margin-top:72px; }
  h2 { font-size:30px; margin-bottom:14px; font-weight:600; }
  .lead { font-size:15.5px; color:var(--text-dim); max-width:680px; margin-bottom:40px; }
  .kicker2 { font-size:13px; letter-spacing:3px; color:var(--accent); margin-bottom:12px; }
  .btn { display:inline-block; padding:13px 32px; border-radius:8px; font-size:14.5px; transition:.25s; cursor:pointer; }
  .btn-primary { background:var(--accent); color:#111; font-weight:600; border:none; }
  .btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(232,180,90,.25); }
  .btn-ghost { border:1px solid var(--line); color:var(--text-dim); background:transparent; }
  .btn-ghost:hover { border-color:var(--accent); color:var(--accent); }
  .fine { font-size:12.5px; color:var(--text-dim); margin-top:22px; }
  .fine a { color:var(--accent); }

  /* ══ 01 电影厅 ══ */
  .halls { display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; }
  @media (max-width:860px){ .halls{grid-template-columns:1fr} }
  .hall {
    background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
    padding:28px 24px; position:relative; display:flex; flex-direction:column;
    transition: border-color .3s, transform .3s;
  }
  .hall:hover { border-color:var(--accent); transform:translateY(-4px); }
  .hall .tag {
    position:absolute; top:-12px; right:20px;
    background:var(--accent); color:#111; font-size:12px; font-weight:600;
    padding:3px 14px; border-radius:12px;
  }
  .hall-label { font-size:10px; letter-spacing:4px; color:var(--text-dim); text-align:center; }
  .screen {
    height:8px; margin:8px 10px 4px;
    border-radius:50% / 100% 100% 0 0;
    background: linear-gradient(180deg, var(--seat, #4a4a56), transparent);
    box-shadow: 0 -6px 18px rgba(232,180,90, var(--glow, .06));
  }
  .seats {
    height:44px; margin:6px 4px 18px;
    background-image: radial-gradient(circle 3px at center, var(--seat, #3a3a44) 99%, transparent);
    background-size: 17px 11px;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
            mask-image: linear-gradient(180deg, #000 60%, transparent);
  }
  .hall h3 { font-size:17px; text-align:center; }
  .hall .res { font-size:12px; color:var(--accent); border:1px solid rgba(232,180,90,.35);
    align-self:center; padding:1px 10px; border-radius:12px; margin-top:8px; }
  .hall .price { font-size:30px; font-weight:700; text-align:center; margin:14px 0 2px; }
  .hall .price small { font-size:13px; font-weight:400; color:var(--text-dim); }
  .hall .use { font-size:12.5px; color:var(--text-dim); text-align:center; margin-bottom:18px; }
  .hall ul { list-style:none; flex:1; margin-bottom:24px; }
  .hall li { font-size:13px; color:var(--text-dim); padding:5px 0 5px 22px; position:relative; }
  .hall li::before { content:"✦"; position:absolute; left:0; color:var(--accent); font-size:10px; }
  .hall .btn { text-align:center; }

  /* ══ 胶片 ══ */
  .reel {
    position:relative; background:#0c0c0f; border:1px solid var(--line);
    border-radius:12px; padding:30px 6px;
  }
  .reel::before, .reel::after {
    content:""; position:absolute; left:16px; right:16px; height:10px;
    background-image: radial-gradient(circle 3.5px at 8px 5px, #2e2e38 99%, transparent);
    background-size: 28px 10px;
  }
  .reel::before { top:9px; }
  .reel::after { bottom:9px; }
  .frames { display:flex; overflow-x:auto; scrollbar-width:none; }
  .frames::-webkit-scrollbar { display:none; }
  .frame {
    flex:1; min-width:172px; padding:16px 18px;
    border-right:2px solid #1c1c22; position:relative;
  }
  .frame:last-child { border-right:none; }
  .frame-no { font-size:26px; font-weight:700; color:#2e2e38; line-height:1;
    font-family: "Courier New", monospace; }
  .frame h3 { font-size:14.5px; margin:8px 0 4px; }
  .frame p { font-size:12px; color:var(--text-dim); line-height:1.65; }
  .frame .t { color:var(--accent); font-size:11.5px; }
  .frame:hover .frame-no { color:var(--accent); transition:.3s; }

  /* ══ 02 唱片机 ══ */
  .player {
    display:grid; grid-template-columns: 240px 1fr; gap:40px; align-items:center;
    background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
    padding:40px;
  }
  @media (max-width:760px){ .player { grid-template-columns:1fr; justify-items:center; padding:32px 22px; } }
  .vinyl {
    width:220px; height:220px; border-radius:50%; position:relative; flex:none;
    background:
      radial-gradient(circle, #26262c 0 18%, transparent 18%),
      repeating-radial-gradient(circle, #141417 0 3px, #1c1c21 3px 4px);
    box-shadow: 0 10px 40px rgba(0,0,0,.5), inset 0 0 0 1px #2a2a32;
    animation: spin 7s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .vinyl::before {
    content:"XIMAGIN\A ORIGINAL"; white-space:pre; text-align:center;
    position:absolute; inset:0; margin:auto; width:88px; height:88px; border-radius:50%;
    background: radial-gradient(circle, var(--accent) 0 8%, #b8873c 8% 100%);
    color:#111; font-size:9px; font-weight:700; letter-spacing:2px; line-height:1.6;
    display:flex; align-items:center; justify-content:center; flex-direction:column;
  }
  .vinyl::after {
    content:""; position:absolute; inset:0; margin:auto;
    width:8px; height:8px; border-radius:50%; background:#111114;
  }
  .tracklist { width:100%; }
  .tl-head { font-size:11px; letter-spacing:3px; color:var(--text-dim); margin-bottom:14px;
    display:flex; justify-content:space-between; }
  .track {
    display:flex; align-items:center; gap:12px;
    padding:13px 6px; border-bottom:1px solid var(--line);
    transition: background .25s; border-radius:6px; cursor:pointer;
  }
  .track:hover { background:rgba(232,180,90,.05); }
  .track:last-child { border-bottom:none; }
  .track.playing .tk-name { color:var(--accent); }
  .tk-play {
    width:32px; height:32px; border-radius:50%; flex:none;
    border:1px solid var(--line); background:transparent; color:var(--text-dim);
    font-size:11px; cursor:pointer; transition:.25s;
    display:flex; align-items:center; justify-content:center;
  }
  .tk-play:hover, .track.playing .tk-play { border-color:var(--accent); color:var(--accent); }
  .tk-no { font-size:12px; color:var(--text-dim); width:20px; font-family:monospace; }
  .tk-eq { display:flex; gap:2px; align-items:flex-end; height:14px; width:18px; flex:none; }
  .tk-eq i { width:3px; background:var(--accent); height:3px; border-radius:1px; }
  .track:hover .tk-eq i, .track.playing .tk-eq i { animation: eq .5s ease-in-out infinite alternate; }
  .track:hover .tk-eq i:nth-child(1), .track.playing .tk-eq i:nth-child(1){ animation-delay:0s }
  .track:hover .tk-eq i:nth-child(2), .track.playing .tk-eq i:nth-child(2){ animation-delay:.15s }
  .track:hover .tk-eq i:nth-child(3), .track.playing .tk-eq i:nth-child(3){ animation-delay:.3s }
  .track:hover .tk-eq i:nth-child(4), .track.playing .tk-eq i:nth-child(4){ animation-delay:.07s }
  @keyframes eq { from{height:3px} to{height:14px} }
  .tk-info { flex:1; min-width:0; }
  .tk-name { font-size:15px; font-weight:600; }
  .tk-desc { font-size:12px; color:var(--text-dim); line-height:1.5; }
  .tk-price {
    font-size:13px; color:var(--accent); font-weight:600; white-space:nowrap;
    background:transparent; border:1px solid rgba(232,180,90,.3); border-radius:16px;
    padding:5px 14px; cursor:pointer; transition:.25s;
  }
  .tk-price:hover { background:var(--accent); color:#111; }
  @media (max-width:560px){ .tk-no, .tk-eq { display:none; } }
  /* ══ 04 终端 ══ */
  .terminal {
    background:#0b0b0e; border:1px solid var(--line); border-radius:12px;
    overflow:hidden; font-family:"SF Mono","Cascadia Code",Consolas,monospace;
  }
  .term-bar {
    display:flex; align-items:center; gap:7px; padding:12px 16px;
    background:#16161b; border-bottom:1px solid var(--line);
  }
  .term-bar i { width:11px; height:11px; border-radius:50%; }
  .term-bar i:nth-child(1){ background:#ff5f57 } .term-bar i:nth-child(2){ background:#febc2e }
  .term-bar i:nth-child(3){ background:#28c840 }
  .term-bar span { font-size:11.5px; color:var(--text-dim); margin-left:8px; font-family:inherit; }
  .term-body { padding:24px 24px 28px; font-size:13.5px; line-height:2.1; min-height:230px; }
  .term-body .ln { display:block; white-space:pre-wrap; }
  .term-body .cmd { color:#7ee787; }
  .term-body .ok { color:var(--accent); }
  .term-body .dim { color:var(--text-dim); }
  .term-body a { color:var(--accent); text-decoration:underline; }
  .term-caret { display:inline-block; width:8px; height:15px; background:#7ee787;
    vertical-align:-2px; animation:blink 1s steps(1) infinite; }

  /* ══ 05 浏览器 ══ */
  .browser { background:#0e0e12; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
  .br-top { background:#16161b; border-bottom:1px solid var(--line); padding:10px 14px 0; }
  .br-dots { display:flex; gap:7px; margin-bottom:10px; }
  .br-dots i { width:11px; height:11px; border-radius:50%; background:#3a3a44; }
  .br-tabs { display:flex; gap:4px; }
  .br-tab {
    padding:9px 18px 10px; font-size:13px; color:var(--text-dim); cursor:pointer;
    border-radius:9px 9px 0 0; border:1px solid transparent; border-bottom:none;
    background:transparent; white-space:nowrap;
  }
  .br-tab.on { background:#0e0e12; color:var(--text); border-color:var(--line); }
  .br-addr {
    margin:10px 16px 0; background:#0b0b0e; border:1px solid var(--line);
    border-radius:20px; padding:7px 18px; font-size:12px; color:var(--text-dim);
    font-family:monospace;
  }
  .br-addr b { color:var(--accent); font-weight:400; }
  .br-body { padding:34px 34px 26px; display:grid; grid-template-columns:1fr 220px; gap:34px; align-items:center; }
  @media (max-width:720px){ .br-body{grid-template-columns:1fr} .wire{display:none} }
  .pane { display:none; }
  .pane.on { display:contents; }
  .br-body h3 { font-size:19px; }
  .br-price { font-size:26px; font-weight:700; color:var(--accent); margin:10px 0 2px; }
  .br-price small { font-size:13px; color:var(--text-dim); font-weight:400; }
  .br-body p { font-size:13.5px; color:var(--text-dim); margin-top:8px; max-width:480px; }
  .wire {
    border:1px solid var(--line); border-radius:8px; padding:14px; height:170px;
    display:flex; flex-direction:column; gap:8px;
  }
  .wb { background:#22222a; border-radius:4px; }
  .wire .w-nav { height:12px; width:100%; }
  .wire .w-hero { flex:1; background:linear-gradient(135deg,#22222a,rgba(232,180,90,.25)); }
  .wire .w-row { display:flex; gap:8px; height:26px; }
  .wire .w-row .wb { flex:1; }
  .br-status {
    border-top:1px solid var(--line); padding:9px 18px; font-size:11.5px;
    color:var(--text-dim); font-family:monospace;
  }
  .br-status b { color:var(--accent); font-weight:400; }

  /* ── FAQ：加号 → 对钩 ── */
  details { border-bottom:1px solid var(--line); }
  summary { cursor:pointer; padding:18px 0; font-size:15.5px; list-style:none;
    display:flex; justify-content:space-between; align-items:center; }
  summary::-webkit-details-marker { display:none; }
  summary::after { content:"+"; color:var(--text-dim); font-size:20px; transition:color .25s; }
  details[open] summary::after { content:"✓"; color:var(--accent); font-weight:700; }
  details p { padding:0 0 18px; font-size:14px; color:var(--text-dim); max-width:720px; }

  /* ── 咨询 ── */
  .contact-box { background:var(--bg-card); border:1px solid var(--line);
    border-radius:var(--radius); padding:44px; }
  form { display:grid; gap:16px; margin-top:24px; }
  .row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:720px){ .row{grid-template-columns:1fr} .contact-box{padding:30px 22px} }
  input, textarea, select {
    width:100%; background:#111114; border:1px solid var(--line); border-radius:8px;
    padding:13px 16px; color:var(--text); font-size:14px; font-family:inherit;
  }
  input:focus, textarea:focus, select:focus { outline:none; border-color:var(--accent); }
  .assistant-hint { margin-top:22px; font-size:14px; color:var(--text-dim); }
  .assistant-hint a { color:var(--accent); }

  .fade { opacity:0; transform:translateY(24px); transition:opacity .7s, transform .7s; }
  .fade.in { opacity:1; transform:none; }

  /* ══ 弹层通用 ══ */
  .overlay {
    position:fixed; inset:0; z-index:60;
    background:rgba(10,10,14,.92); backdrop-filter:blur(16px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .3s;
    padding:20px;
  }
  .overlay.open { opacity:1; pointer-events:auto; }
  .x-close {
    position:absolute; top:18px; right:22px; z-index:5;
    width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
    background:transparent; color:var(--text-dim); font-size:16px; cursor:pointer;
  }
  .x-close:hover { border-color:var(--accent); color:var(--accent); }

  /* ══ 音乐播放页 ══ */
  .pm-card { width:100%; max-width:900px; max-height:92vh; display:flex; flex-direction:column; gap:8px; position:relative; }
  .pm-main { display:grid; grid-template-columns:280px 1fr; gap:44px; align-items:center; padding:20px 10px; }
  @media (max-width:720px){ .pm-main{ grid-template-columns:1fr; gap:20px; justify-items:center; } }
  .pm-vinyl-wrap { display:flex; flex-direction:column; align-items:center; gap:18px; }
  .pm-vinyl { width:240px; height:240px; animation-play-state:paused; }
  @media (max-width:720px){ .pm-vinyl{ width:160px; height:160px; } }
  .pm-title { font-size:22px; font-weight:700; text-align:center; }
  .pm-sub { font-size:12.5px; color:var(--text-dim); text-align:center; }
  .pm-lyrics {
    height:300px; overflow:hidden; scroll-behavior:smooth; text-align:center;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
            mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  }
  @media (max-width:720px){ .pm-lyrics{ height:170px; width:100%; } }
  .pm-lyrics-inner { padding:130px 10px; }
  .pm-line { padding:9px 0; font-size:15px; color:var(--text-dim); transition:.35s; }
  .pm-line.on { color:var(--accent); font-size:17.5px; font-weight:600; }
  .pm-pure { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:var(--text-dim); }
  .pm-pure b { font-size:20px; color:var(--text); letter-spacing:4px; }
  .pm-ctrl { display:flex; align-items:center; gap:16px; padding:6px 10px 2px; }
  .pm-time { font-size:12px; color:var(--text-dim); font-family:monospace; width:38px; }
  .pm-play {
    width:52px; height:52px; border-radius:50%; border:none; flex:none;
    background:var(--accent); color:#111; font-size:16px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:.25s;
  }
  .pm-play:hover { transform:scale(1.08); box-shadow:0 6px 20px rgba(232,180,90,.35); }
  input[type=range].seek {
    -webkit-appearance:none; appearance:none; flex:1; height:20px; background:transparent; cursor:pointer;
  }
  .seek::-webkit-slider-runnable-track {
    height:4px; border-radius:2px;
    background:linear-gradient(90deg, var(--accent) var(--p,0%), #33333c var(--p,0%));
  }
  .seek::-webkit-slider-thumb {
    -webkit-appearance:none; width:13px; height:13px; border-radius:50%;
    background:var(--accent); margin-top:-4.5px; box-shadow:0 0 8px rgba(232,180,90,.6);
  }
  .seek::-moz-range-track { height:4px; border-radius:2px; background:#33333c; }
  .seek::-moz-range-progress { height:4px; border-radius:2px; background:var(--accent); }
  .seek::-moz-range-thumb { width:13px; height:13px; border:none; border-radius:50%; background:var(--accent); }
  .pm-note { text-align:center; font-size:11.5px; color:var(--text-dim); padding-bottom:4px; }

  /* ══ 支付弹窗 ══ */
  .pay-card {
    width:100%; max-width:440px; max-height:92vh; overflow-y:auto; position:relative;
    background:var(--bg-card); border:1px solid var(--line); border-radius:16px;
    padding:34px 30px 30px;
  }
  .pay-card h3 { font-size:19px; margin-bottom:6px; }
  .pay-sum {
    background:#111114; border:1px solid var(--line); border-radius:10px;
    padding:14px 18px; margin:16px 0; font-size:13.5px;
  }
  .pay-sum div { display:flex; justify-content:space-between; padding:4px 0; }
  .pay-sum span { color:var(--text-dim); }
  .pay-sum .gold { color:var(--accent); font-size:16px; }
  .pay-card input, .pay-card textarea { margin-bottom:12px; }
  .pay-fine { font-size:11.5px; color:var(--text-dim); line-height:1.7; margin:6px 0 18px; }
  .pay-fine b { color:var(--accent); font-weight:400; }
  .pay-full { width:100%; text-align:center; }
  .pay-tabs { display:flex; gap:10px; margin:14px 0; }
  .pay-tab {
    flex:1; padding:9px 0; border-radius:8px; font-size:13px; cursor:pointer;
    border:1px solid var(--line); background:transparent; color:var(--text-dim); transition:.2s;
  }
  .pay-tab.on.wx { border-color:#28c840; color:#28c840; }
  .pay-tab.on.zfb { border-color:#4a90e8; color:#4a90e8; }
  .qr-box { display:flex; flex-direction:column; align-items:center; gap:10px; margin:6px 0 16px; }
  .qr-box canvas { border-radius:8px; }
  .qr-amt { font-size:24px; font-weight:700; color:var(--accent); }
  .qr-tip { font-size:11px; color:var(--text-dim); }
  .pay-ok { text-align:center; padding:14px 0 6px; }
  .pay-ok .big { width:64px; height:64px; border-radius:50%; background:rgba(232,180,90,.12);
    color:var(--accent); font-size:28px; display:flex; align-items:center; justify-content:center;
    margin:0 auto 16px; border:1px solid rgba(232,180,90,.4); }
  .pay-ok h3 { margin-bottom:8px; }
  .pay-ok p { font-size:13px; color:var(--text-dim); line-height:1.8; }
  .pay-ok .ordno { font-family:monospace; color:var(--accent); }

.services-shell{height:auto;min-height:100vh;background:#111114}

/* 服务页专属：只消除全站同名 .chip 的继承，其他视觉值严格沿用原型。 */
.services-page .chips{margin:0}
.services-page .chip{display:block;min-height:0;margin:0;padding:0;border:0;color:inherit}


/* ---------- 公共变量（若全站已有同名变量可删除本段） ---------- */
.svc-hero, .brand-sec {
  --svc-bg: #111114;
  --svc-card: #1a1a1f;
  --svc-line: #2a2a31;
  --svc-gold: #e8b45a;
  --svc-text: #f0f0f2;
  --svc-dim: #9a9aa3;
}

/* ================= A. 首屏票根区 ================= */
.svc-hero { background: var(--svc-bg); color: var(--svc-text); padding: 96px 6vw 72px; }
.svc-hero__kicker { color: var(--svc-gold); letter-spacing: .35em; font-size: 14px; margin: 0 0 28px; }
.svc-hero__title { font-size: clamp(30px, 4.2vw, 56px); font-weight: 800; line-height: 1.25; margin: 0 0 40px; }
.svc-hero__title .tw { color: var(--svc-gold); }
.svc-hero__title .cursor {
  display: inline-block; width: .55em; height: 1em;
  background: var(--svc-gold); margin-left: 4px; vertical-align: -0.1em;
  animation: svcBlink 1s steps(1) infinite;
}
@keyframes svcBlink { 50% { opacity: 0; } }
.svc-hero__sub { color: var(--svc-dim); font-size: 16px; margin: 0 0 56px; }

/* 五张票：等宽等高、底边对齐，全靠 grid stretch，禁止外部覆盖 */
.svc-tickets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
  align-items: stretch;
}
.tkt {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--svc-card);
  border: 1px solid var(--svc-line);
  border-radius: 14px;
  padding: 20px 20px 0;
  cursor: pointer;
  /* 静态倾斜角由 --tilt 控制，动画结束帧与它严格一致，不会残留错位 */
  transform: rotate(var(--tilt, 0deg));
  animation: tktDeal .65s cubic-bezier(.2, .75, .3, 1.08) both;
  animation-delay: var(--d, 0s);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tkt:hover {
  transform: rotate(0deg) translateY(-6px);
  border-color: rgba(232, 180, 90, .45);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}
@keyframes tktDeal {
  from { opacity: 0; transform: translateY(-46px) rotate(-9deg) scale(.94); }
  to   { opacity: 1; transform: translateY(0)     rotate(var(--tilt, 0deg)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .tkt { animation: none; }
}
.tkt__meta { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .18em; color: var(--svc-dim); margin: 0 0 14px; }
.tkt__name { font-size: 21px; font-weight: 800; margin: 0 0 10px; }
.tkt__desc { font-size: 13.5px; line-height: 1.7; color: var(--svc-dim); margin: 0 0 18px; }

/* 撕票存根：负边距铺满整宽，缺口伪元素定位在“票自己”的边框上，永不漂移 */
.tkt__stub {
  position: relative;
  margin: auto -20px 0;            /* auto 顶开 → 所有价格条自动底部对齐 */
  padding: 14px 20px;
  border-top: 1.5px dashed #3a3a42;
  display: flex; align-items: center; gap: 12px;
}
.tkt__stub::before, .tkt__stub::after {
  content: ""; position: absolute; top: -9px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--svc-bg); border: 1px solid var(--svc-line);
}
.tkt__stub::before { left: -9px; }
.tkt__stub::after  { right: -9px; }
.tkt__price { font-size: 17px; font-weight: 800; color: var(--svc-gold); white-space: nowrap; }
.tkt__bar {
  flex: 1; height: 20px; opacity: .65;
  background: repeating-linear-gradient(90deg,
    #8a8a93 0 2px, transparent 2px 5px,
    #8a8a93 5px 6px, transparent 6px 11px);
}

/* 移动端：横向滑动 + snap */
@media (max-width: 820px) {
  .svc-tickets {
    display: flex; overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 14px; margin: 0 -6vw; padding-left: 6vw; padding-right: 6vw;
  }
  .tkt { flex: 0 0 72%; scroll-snap-align: center; }
}

/* ================= B. 品牌设计色卡区 ================= */
.brand-sec { background: var(--svc-bg); color: var(--svc-text); padding: 110px 6vw; }
.brand-sec__kicker { color: var(--svc-gold); letter-spacing: .3em; font-size: 14px; margin: 0 0 22px; }
.brand-sec__title { font-size: clamp(30px, 3.6vw, 48px); font-weight: 800; margin: 0 0 24px; }
.brand-sec__lead { max-width: 640px; color: var(--svc-dim); line-height: 1.9; margin: 0 0 56px; }

.brand-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  align-items: stretch;
}
/* 四张卡同一套结构，强制统一，文字自然顶部对齐 */
.pcard {
  display: flex; flex-direction: column;
  background: #f2efe8; color: #17171a;
  border-radius: 10px; overflow: hidden;
  transform: rotate(var(--tilt, 0deg));
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.pcard:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }

/* 关键修复点：大面积实色色块。颜色写死在行内 --sw 上，不依赖外部变量 */
.pcard__swatch { height: 150px; flex: none; background: var(--sw, #e8b45a); }

.pcard__label { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.pcard__brand { font-size: 12px; letter-spacing: .22em; font-weight: 700; margin: 0 0 2px; }
.pcard__brand sup { font-size: 8px; }
.pcard__code { font-size: 26px; font-weight: 800; letter-spacing: .06em; margin: 0 0 16px; }
.pcard__name { font-size: 15.5px; font-weight: 800; line-height: 1.5; margin: 0 0 10px; }
.pcard__desc { font-size: 13px; line-height: 1.75; color: #55555c; margin: 0 0 18px; }
.pcard__btn {
  margin-top: auto;                 /* 四张卡按钮自动底部对齐 */
  display: block; width: 100%; text-align: center;
  padding: 12px 10px; border: 0; border-radius: 8px;
  background: #17171a; color: #f2efe8;
  font-size: 14px; font-weight: 700; cursor: pointer;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.pcard__btn:hover { background: var(--svc-gold); color: #17171a; }

@media (max-width: 1100px) { .brand-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .brand-cards { grid-template-columns: 1fr; } }