/* ============================================================
   zaixiankefu.html — 在线客服
   Skeleton: side-labeled hero (vertical rail + image panel) →
   horizontal conversation timeline → scenario quote grid →
   channel comparison table → hours strip → CTA
   ============================================================ */

/* ---------- hero with vertical side label ---------- */
.kf-hero { position: relative; padding: 60px 0 72px; }
.kf-hero-inner {
  display: grid; grid-template-columns: 64px 1fr 1fr; gap: 40px; align-items: start;
}
.kf-side {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 11.5px; letter-spacing: .34em; color: var(--muted-2);
  padding-top: 8px; border-left: 1px solid var(--line); padding-left: 18px;
  height: 100%; min-height: 260px;
}
.kf-copy h1 { font-size: clamp(30px, 4vw, 50px); font-weight: 800; line-height: 1.16; letter-spacing: -.02em; }
.kf-copy h1 span { color: var(--gold-2); }
.kf-copy .lead { margin-top: 20px; max-width: 460px; }
.kf-copy .kf-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.kf-hero-img {
  border-radius: 20px; overflow: hidden; border: 1px solid var(--line-strong);
  box-shadow: var(--shadow); margin-top: 8px;
}
.kf-hero-img img { width: 100%; height: auto; }

/* ---------- status strip ---------- */
.status-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  margin-top: 46px; background: rgba(255,255,255,.022);
}
.status-strip > div { padding: 20px 24px; border-left: 1px solid var(--line); }
.status-strip > div:first-child { border-left: 0; }
.status-strip .k { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.status-strip .v { font-size: 17px; font-weight: 700; margin-top: 5px; display: flex; align-items: center; gap: 9px; }
.status-strip .v .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(70,211,154,.13); }

/* ---------- timeline ---------- */
.tl-section { padding: 88px 0; border-top: 1px solid var(--line); }
.tl {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin-top: 8px; position: relative;
}
.tl::before {
  content: ""; position: absolute; left: 0; right: 0; top: 21px; height: 1px;
  background: linear-gradient(90deg, rgba(224,182,96,.5), rgba(224,182,96,.12) 70%, transparent);
}
.tl-step { padding-right: 26px; position: relative; }
.tl-node {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; position: relative; z-index: 1;
  font-size: 13px; font-weight: 800; color: var(--gold-2);
  background: #0c1220; border: 1px solid rgba(224,182,96,.4);
  box-shadow: 0 0 0 6px #070a14;
}
.tl-step h3 { font-size: 16px; margin: 20px 0 8px; }
.tl-step p { font-size: 13.5px; color: var(--muted); }
.tl-step .t {
  display: inline-block; margin-top: 12px; font-size: 11.5px; letter-spacing: .1em;
  color: var(--muted-2); font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* ---------- scenario grid ---------- */
.scene { padding: 0 0 88px; }
.scene-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.scene-card {
  padding: 26px 24px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--panel);
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .22s, transform .22s;
}
.scene-card:hover { border-color: rgba(224,182,96,.3); transform: translateY(-3px); }
.scene-card .q {
  font-size: 15px; line-height: 1.6; color: var(--text);
  padding-left: 16px; border-left: 2px solid rgba(224,182,96,.5);
}
.scene-card .a { font-size: 13.5px; color: var(--muted); }
.scene-card .meta { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; }
.scene-card .meta span { font-size: 11.5px; color: var(--muted-2); letter-spacing: .06em; }
.scene-card .meta a { font-size: 12.5px; color: var(--gold-2); }

/* ---------- channel table ---------- */
.ch-section { padding: 0 0 88px; }
.ch-table { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.ch-row {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr;
  gap: 18px; padding: 18px 24px; align-items: center;
  border-top: 1px solid var(--line); font-size: 13.5px;
}
.ch-row:first-child { border-top: 0; background: rgba(255,255,255,.04); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.ch-row strong { font-size: 14.5px; font-weight: 600; }
.ch-row span { color: var(--muted); }
.ch-row .ok { color: #6fe3b4; }

/* ---------- hours ---------- */
.hours {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  padding: 40px; border-radius: 20px;
  border: 1px solid var(--line); background: rgba(255,255,255,.022);
}
.hours h2 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 12px; }
.hours p { font-size: 14px; color: var(--muted); }
.hours-bars { display: flex; flex-direction: column; gap: 14px; }
.hours-row { display: grid; grid-template-columns: 96px 1fr 54px; gap: 14px; align-items: center; font-size: 12.5px; color: var(--muted); }
.hours-row .bar { height: 7px; border-radius: 4px; background: #162034; overflow: hidden; }
.hours-row .bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.hours-row em { font-style: normal; text-align: right; color: var(--gold-2); font-family: ui-monospace, Menlo, Consolas, monospace; }

@media (max-width: 1000px) {
  .kf-hero-inner { grid-template-columns: 1fr; gap: 30px; }
  .kf-side { writing-mode: horizontal-tb; border-left: 0; padding-left: 0; border-bottom: 1px solid var(--line); padding-bottom: 12px; min-height: 0; height: auto; }
  .tl { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .tl::before { display: none; }
  .scene-grid { grid-template-columns: 1fr 1fr; }
  .ch-row { grid-template-columns: 1fr 1fr; }
  .ch-row:first-child { display: none; }
  .hours { grid-template-columns: 1fr; padding: 30px; }
}
@media (max-width: 640px) {
  .kf-hero { padding: 40px 0 52px; }
  .kf-copy h1 { font-size: 29px; }
  .status-strip { grid-template-columns: 1fr; }
  .status-strip > div { border-left: 0; border-top: 1px solid var(--line); }
  .status-strip > div:first-child { border-top: 0; }
  .tl, .scene-grid { grid-template-columns: 1fr; }
  .ch-row { grid-template-columns: 1fr; gap: 4px; padding: 16px 20px; }
  .ch-row span::before { content: attr(data-k) " · "; color: var(--muted-2); font-size: 11.5px; }
  .hours-row { grid-template-columns: 76px 1fr 44px; }
}