.page-contact{
  --pc-gap:clamp(22px,3.4vw,44px);
  --pc-pad:clamp(20px,3vw,30px);
  --pc-flowgap:clamp(16px,2.6vw,34px);
  color:var(--sl-text);
  padding-bottom:clamp(56px,8vw,110px);
  overflow-x:hidden;
}

/* ---------- 首屏 ---------- */
.page-contact .pc-hero{
  padding-top:clamp(24px,4.4vw,52px);
}
.page-contact .pc-hero__kicker{
  margin:clamp(20px,3.4vw,34px) 0 10px;
  color:var(--sl-pink);
}
.page-contact .pc-hero__title{
  margin:0 0 18px;
  font-size:clamp(2rem,6vw,3.4rem);
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--sl-mist);
}
.page-contact .pc-hero__lead{
  margin:0 0 clamp(26px,4.4vw,46px);
  max-width:60ch;
  font-size:clamp(.98rem,1.55vw,1.08rem);
  line-height:1.95;
  color:var(--sl-text-dim);
}
.page-contact .pc-hero__figure{
  margin:0;
}
.page-contact .sl-figure__media{
  border-radius:var(--sl-radius);
  overflow:hidden;
  border:1px solid var(--sl-line);
  background:linear-gradient(150deg,var(--sl-night),var(--sl-indigo));
}
.page-contact .sl-figure__media img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:cover;
}

/* ---------- 主栅格 ---------- */
.page-contact .pc-layout{
  display:grid;
  gap:var(--pc-gap);
}
.page-contact .pc-h2{
  margin:0 0 18px;
  font-size:clamp(1.3rem,2.9vw,1.8rem);
  line-height:1.32;
  letter-spacing:-.01em;
  color:var(--sl-mist);
}
.page-contact .pc-h3{
  margin:8px 0 12px;
  font-size:clamp(1.06rem,2.2vw,1.28rem);
  line-height:1.5;
  color:var(--sl-mist);
}

/* ---------- 渠道卡 ---------- */
.page-contact .pc-channels{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(258px,78%);
  gap:14px;
  margin:0 -4px;
  padding:4px 4px 14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.page-contact .pc-channel{
  scroll-snap-align:start;
  padding:var(--pc-pad);
  border:1px solid var(--sl-line);
  border-radius:var(--sl-radius);
  background:linear-gradient(158deg,rgba(14,22,56,.94),rgba(42,27,94,.52));
  box-shadow:inset 0 1px 0 rgba(200,210,230,.06);
  transition:border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.page-contact .pc-channel:hover,
.page-contact .pc-channel:focus-within{
  border-color:rgba(240,185,74,.55);
  box-shadow:0 0 0 1px rgba(240,185,74,.16), 0 24px 48px -32px rgba(240,185,74,.55);
  transform:translateY(-2px);
}
.page-contact .pc-channel:last-child{
  border-color:rgba(18,137,127,.4);
}
.page-contact .pc-channel:last-child:hover{
  border-color:rgba(240,185,74,.55);
}
.page-contact .pc-channel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:4px;
}
.page-contact .pc-channel__value{
  margin:16px 0 10px;
  font-family:var(--sl-mono);
  font-size:clamp(.94rem,2.4vw,1.04rem);
  letter-spacing:.02em;
  color:var(--sl-mist);
  overflow-wrap:anywhere;
}
.page-contact .pc-channel__value--addr{
  font-family:var(--sl-sans);
  font-size:clamp(.96rem,2.3vw,1.02rem);
  line-height:1.72;
  letter-spacing:0;
}
.page-contact .pc-channel__use{
  margin:0;
  font-size:.92rem;
  line-height:1.8;
  color:var(--sl-text-dim);
}

/* ---------- 侧栏：受理范围与回复时段 ---------- */
.page-contact .pc-col-side{
  display:grid;
  gap:18px;
  align-content:start;
}
.page-contact .pc-brief{
  padding:var(--pc-pad);
  border:1px solid var(--sl-line);
  border-radius:var(--sl-radius);
  background:linear-gradient(200deg,rgba(108,76,224,.16),rgba(14,22,56,.7) 58%);
}
.page-contact .pc-brief__list{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:grid;
  gap:14px;
}
.page-contact .pc-brief__list li{
  padding-left:14px;
  border-left:2px solid rgba(108,76,224,.65);
  font-size:.93rem;
  line-height:1.75;
  color:var(--sl-text-dim);
}
.page-contact .pc-brief__list strong{
  display:block;
  font-size:.98rem;
  font-weight:600;
  color:var(--sl-mist);
  margin-bottom:3px;
}
.page-contact .pc-brief__list span{
  display:block;
}

.page-contact .pc-hours{
  margin:0;
  padding:18px 20px;
  border-left:2px solid var(--sl-gold);
  border-radius:0 var(--sl-radius-sm) var(--sl-radius-sm) 0;
  background:linear-gradient(90deg,rgba(240,185,74,.1),rgba(14,22,56,.2) 72%);
}
.page-contact .pc-hours__stamp{
  margin:0 0 8px;
  color:var(--sl-gold);
  font-size:.86rem;
}
.page-contact .pc-hours__text{
  margin:0;
  font-size:.92rem;
  line-height:1.82;
  color:var(--sl-text-dim);
}

/* ---------- 处理流程 ---------- */
.page-contact .pc-flow__head{
  max-width:64ch;
  margin-bottom:clamp(26px,4vw,44px);
}
.page-contact .pc-flow__head .sl-meta{
  display:block;
  margin-bottom:10px;
  color:var(--sl-pink);
}
.page-contact .pc-flow__lead{
  margin:0;
  font-size:.98rem;
  line-height:1.9;
  color:var(--sl-text-dim);
}
.page-contact .pc-flow{
  list-style:none;
  margin:0 0 clamp(28px,4.6vw,52px);
  padding:0;
  display:grid;
  gap:var(--pc-gap);
  counter-reset:pcflow;
}
.page-contact .pc-flow__node{
  position:relative;
  padding-left:0;
  outline-offset:6px;
}
.page-contact .pc-flow__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:var(--sl-pill);
  border:1px solid rgba(240,185,74,.5);
  background:var(--sl-deep);
  color:var(--sl-gold);
  font-size:12px;
  letter-spacing:.08em;
  transition:border-color .35s ease, box-shadow .35s ease;
}
.page-contact .pc-flow__node:hover .pc-flow__num,
.page-contact .pc-flow__node:focus-within .pc-flow__num{
  border-color:var(--sl-gold);
  box-shadow:0 0 0 5px rgba(240,185,74,.14);
}
.page-contact .pc-flow__title{
  margin:14px 0 8px;
  font-size:1.02rem;
  line-height:1.5;
  color:var(--sl-mist);
}
.page-contact .pc-flow__desc{
  margin:0;
  font-size:.92rem;
  line-height:1.8;
  color:var(--sl-text-dim);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  transition:opacity .35s ease;
}
.page-contact .pc-flow__node:hover .pc-flow__desc,
.page-contact .pc-flow__node:focus-within .pc-flow__desc{
  -webkit-line-clamp:unset;
  overflow:visible;
}
.page-contact .pc-flow__figure{
  margin:0;
  max-width:760px;
}
.page-contact .pc-flow__figure .sl-figure__media{
  background:linear-gradient(140deg,rgba(108,76,224,.28),rgba(7,11,30,.9));
}

/* ---------- 明细双卡 ---------- */
.page-contact .pc-tip{
  padding:clamp(22px,3vw,32px);
}
.page-contact .pc-tip--errata{
  background:linear-gradient(165deg,rgba(122,37,68,.24),rgba(14,22,56,.74) 62%);
  border-color:rgba(122,37,68,.42);
}
.page-contact .pc-tip--collab{
  background:linear-gradient(165deg,rgba(18,137,127,.22),rgba(14,22,56,.74) 62%);
  border-color:rgba(18,137,127,.4);
}
.page-contact .pc-tip .sl-meta{
  display:block;
  color:var(--sl-silver);
}
.page-contact .pc-tip__lead{
  margin:0 0 6px;
  font-size:.94rem;
  line-height:1.85;
  color:var(--sl-text-dim);
}
.page-contact .pc-tip__list{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:grid;
  gap:11px;
}
.page-contact .pc-tip__list li{
  position:relative;
  padding-left:18px;
  font-size:.93rem;
  line-height:1.8;
  color:var(--sl-text-dim);
}
.page-contact .pc-tip__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.68em;
  width:7px;
  height:7px;
  border-radius:var(--sl-pill);
  background:var(--sl-violet);
  box-shadow:0 0 10px rgba(108,76,224,.7);
}
.page-contact .pc-tip--errata .pc-tip__list li::before{
  background:var(--sl-wine);
  box-shadow:0 0 10px rgba(122,37,68,.8);
}
.page-contact .pc-tip--collab .pc-tip__list li::before{
  background:var(--sl-teal);
  box-shadow:0 0 10px rgba(18,137,127,.8);
}

/* ---------- 到访 ---------- */
.page-contact .pc-visit{
  display:grid;
  gap:var(--pc-gap);
  padding:var(--pc-pad);
  border:1px solid var(--sl-line);
  border-radius:var(--sl-radius);
  background:linear-gradient(140deg,rgba(18,137,127,.16),rgba(14,22,56,.78) 52%,rgba(42,27,94,.5));
}
.page-contact .pc-visit__grid{
  position:relative;
  width:100%;
  max-width:230px;
  aspect-ratio:1 / 1;
  border:1px solid rgba(18,137,127,.34);
  border-radius:var(--sl-radius-sm);
  background-image:
    linear-gradient(rgba(200,210,230,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(200,210,230,.08) 1px,transparent 1px);
  background-size:28px 28px;
  margin-inline:auto;
}
.page-contact .pc-visit__grid::after{
  content:"";
  position:absolute;
  left:62%;
  top:38%;
  width:13px;
  height:13px;
  margin:-6.5px 0 0 -6.5px;
  border-radius:var(--sl-pill);
  background:var(--sl-gold);
  box-shadow:0 0 0 6px rgba(240,185,74,.16), 0 0 24px 6px rgba(240,185,74,.42);
}
.page-contact .pc-visit__body .sl-meta{
  display:block;
  color:var(--sl-silver);
}
.page-contact .pc-visit__text{
  margin:0 0 12px;
  font-size:.95rem;
  line-height:1.9;
  color:var(--sl-text-dim);
}
.page-contact .pc-visit__links{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:18px 0 0;
}

/* ---------- 自适应 ---------- */
@media (min-width:700px){
  .page-contact .pc-flow{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (min-width:960px){
  .page-contact .pc-layout{
    grid-template-columns:minmax(0,7fr) minmax(0,4fr);
    gap:clamp(32px,5vw,68px);
    align-items:start;
  }
  .page-contact .pc-channels{
    grid-auto-flow:row;
    grid-auto-columns:auto;
    grid-template-columns:1fr;
    gap:16px;
    margin:0;
    padding:0;
    overflow:visible;
  }
  .page-contact .pc-flow{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--pc-flowgap);
  }
  .page-contact .pc-flow__node + .pc-flow__node::before{
    content:"";
    position:absolute;
    left:calc(-1 * var(--pc-flowgap));
    top:19px;
    width:var(--pc-flowgap);
    height:1px;
    background:linear-gradient(90deg,rgba(200,210,230,.06),rgba(200,210,230,.34));
  }
}

@media (min-width:1100px){
  .page-contact .pc-visit{
    grid-template-columns:minmax(0,260px) minmax(0,1fr);
    align-items:center;
    padding:clamp(28px,3.6vw,44px);
  }
  .page-contact .pc-visit__grid{
    margin-inline:0;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-contact .pc-channel,
  .page-contact .pc-flow__num,
  .page-contact .pc-flow__desc{
    transition:none;
  }
  .page-contact .pc-channel:hover{
    transform:none;
  }
  .page-contact [data-reveal]{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}
</main>