/* 初版首屏票根：按提供的原始原型保留 */
.service-hero {
  position: relative;
  display: block;
  flex: none;
  overflow: hidden;
  padding: 64px 0 56px;
  background:
    radial-gradient(ellipse 600px 400px at 78% 15%, rgba(232,180,90,.06), transparent),
    radial-gradient(ellipse 500px 350px at 10% 90%, rgba(90,130,232,.04), transparent);
}
.service-wrap { width: calc(100% - 48px); max-width: 980px; margin: 0 auto; padding: 0; }
.service-kicker { font-size: 13px; letter-spacing: 3px; color: var(--accent); margin-bottom: 16px; }
h1.service-title { font-size: clamp(22px, 3.6vw, 34px); font-weight: 600; line-height: 1.6; letter-spacing: 1px; min-height: 2.4em; }
.service-slot { color: var(--accent); }
.service-caret { display: inline-block; width: .55em; height: 1.1em; background: var(--accent); vertical-align: -.15em; margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.service-hero-sub { font-size: 13.5px; color: var(--text-dim); margin-top: 8px; }
.tickets { display: flex; gap: 18px; margin-top: 44px; align-items: flex-end; }
.ticket {
  flex: 1; min-width: 0; position: relative; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 10px; padding: 16px 16px 0;
  transition: transform .3s cubic-bezier(.2,.9,.3,1.2), border-color .3s, box-shadow .3s;
  opacity: 0; animation: deal .55s cubic-bezier(.2,.9,.3,1.1) forwards;
}
.ticket:nth-child(1) { --rot: -3deg; animation-delay: .05s; }
.ticket:nth-child(2) { --rot: 2deg; animation-delay: .13s; }
.ticket:nth-child(3) { --rot: -1.5deg; animation-delay: .21s; }
.ticket:nth-child(4) { --rot: 2.5deg; animation-delay: .29s; }
.ticket:nth-child(5) { --rot: -2deg; animation-delay: .37s; }
@keyframes deal { from { opacity: 0; transform: translateY(40px) rotate(calc(var(--rot) * 3)); } to { opacity: 1; transform: translateY(0) rotate(var(--rot)); } }
.ticket:hover { transform: translateY(-10px) rotate(0deg) !important; border-color: var(--accent); box-shadow: 0 14px 34px rgba(232,180,90,.15); z-index: 2; }
.t-top { display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: 1.5px; color: var(--text-dim); padding-bottom: 10px; }
.t-name { font-size: 16.5px; font-weight: 700; letter-spacing: 1px; }
.t-desc { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; line-height: 1.5; min-height: 3em; }
.t-tear { margin: 10px -16px 0; height: 1px; background-image: linear-gradient(90deg, var(--line) 55%, transparent 45%); background-size: 9px 1px; position: relative; }
.t-tear::before, .t-tear::after { content: ""; position: absolute; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); }
.t-tear::before { left: -7px; }
.t-tear::after { right: -7px; }
.t-stub { margin: 0 -16px; padding: 10px 16px 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.t-price { font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.t-code { width: 44px; height: 16px; opacity: .4; flex: none; background: repeating-linear-gradient(90deg, var(--text-dim) 0 1px, transparent 1px 3px, var(--text-dim) 3px 5px, transparent 5px 6px, var(--text-dim) 6px 7px, transparent 7px 10px); }
@media (max-width: 860px) { .tickets { overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px 4px; margin-left: -4px; margin-right: -4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tickets::-webkit-scrollbar { display: none; } .ticket { flex: 0 0 46%; scroll-snap-align: start; } }
@media (max-width: 520px) { .ticket { flex: 0 0 62%; } h1.service-title { min-height: 3.2em; } }

/* 初版品牌色卡 */
.chips { display: flex; gap: 20px; flex-wrap: wrap; }
.chip { flex: 1; min-width: 190px; border-radius: 8px; overflow: hidden; background: #f4f2ec; box-shadow: 0 8px 28px rgba(0,0,0,.35); transform: rotate(var(--cr, 0deg)); transition: transform .3s; }
.chip:hover { transform: rotate(0) translateY(-8px); }
.chip:nth-child(1) { --cr: -1.6deg; }
.chip:nth-child(2) { --cr: 1.2deg; }
.chip:nth-child(3) { --cr: -.8deg; }
.chip:nth-child(4) { --cr: 1.8deg; }
.chip-color { height: 150px; }
.chip-label { padding: 14px 16px 16px; color: #1c1c1e; }
.chip-label .pan { font-size: 11px; letter-spacing: 1px; font-weight: 700; font-family: Helvetica, Arial, sans-serif; }
.chip-label .pan b { display: block; font-size: 15px; }
.chip-label h3 { font-size: 14.5px; margin-top: 8px; font-weight: 700; }
.chip-label p { font-size: 12px; color: #66666e; line-height: 1.6; margin-top: 2px; }
.chip-btn { display: block; width: 100%; text-align: center; margin-top: 12px; background: #1c1c1e; color: #f4f2ec; border: none; border-radius: 6px; font-size: 12.5px; padding: 9px 0; cursor: pointer; transition: .25s; }
.chip-btn:hover { background: #3a3a40; }