.page-contact{
  --pc-cut:10px;
  position:relative;
  isolation:isolate;
  overflow-x:clip;
  background-color:var(--ki-indigo);
  color:var(--ki-white);
  font-family:var(--ki-font-sans);
  padding-bottom:clamp(40px,7vw,88px);
}

.page-contact p,
.page-contact figure,
.page-contact h1,
.page-contact h2,
.page-contact h3{
  margin:0;
}

/* 面包屑 */
.page-contact .contact-crumb{
  background:var(--ki-panel);
  border-bottom:1px solid var(--ki-line);
}
.page-contact .contact-crumb__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  max-width:var(--ki-wrap);
  margin:0 auto;
  padding:12px var(--ki-gutter);
  font-size:13px;
  letter-spacing:.06em;
  color:var(--ki-muted);
}
.page-contact .contact-crumb a{
  color:var(--ki-mint);
  text-decoration:none;
}
.page-contact .contact-crumb a:hover{
  text-decoration:underline;
}

/* 首屏 */
.page-contact .contact-hero{
  position:relative;
  border-bottom:3px solid var(--ki-orange);
  background:
    radial-gradient(circle at 84% 8%, rgba(53,240,192,.16), transparent 52%),
    radial-gradient(circle at 6% 92%, rgba(123,92,255,.18), transparent 48%);
}
.page-contact .contact-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(24px,4vw,48px);
  max-width:var(--ki-wrap);
  margin:0 auto;
  padding:clamp(40px,7vw,84px) var(--ki-gutter) clamp(32px,5vw,56px);
}
.page-contact .contact-hero__vmark{
  display:none;
  writing-mode:vertical-rl;
  align-self:start;
  font-family:var(--ki-font-mono);
  font-size:12px;
  letter-spacing:.32em;
  color:var(--ki-muted);
  border-left:1px solid var(--ki-line-strong);
  padding-left:10px;
}
.page-contact .contact-hero__eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:clamp(16px,3vw,26px);
  font-family:var(--ki-font-mono);
  font-size:12px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ki-mint);
}
.page-contact .contact-hero__eyebrow::before{
  content:"";
  flex:0 0 auto;
  width:36px;
  height:3px;
  background:var(--ki-orange);
}
.page-contact .contact-hero__title{
  font-size:clamp(34px,7vw,74px);
  font-weight:900;
  line-height:1.03;
  letter-spacing:-.02em;
  margin-bottom:clamp(16px,3vw,26px);
}
.page-contact .contact-lede{
  max-width:58ch;
  margin-bottom:clamp(22px,3vw,32px);
  font-size:clamp(16px,1.7vw,18px);
  line-height:1.75;
  color:var(--ki-muted);
}
.page-contact .contact-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.page-contact .contact-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 22px;
  border:2px solid var(--ki-mint);
  background:transparent;
  color:var(--ki-mint);
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  text-decoration:none;
  transition:transform .12s ease-out,box-shadow .12s ease-out,background-color .12s ease-out,color .12s ease-out;
}
.page-contact .contact-cta:hover{
  transform:translate(-4px,-4px);
  box-shadow:var(--ki-shadow-mint);
}
.page-contact .contact-cta--primary{
  border-color:var(--ki-orange);
  background:var(--ki-orange);
  color:var(--ki-ink);
}
.page-contact .contact-cta--primary:hover{
  box-shadow:var(--ki-shadow-orange);
}
.page-contact .contact-hero__media{
  position:relative;
  border:2px solid var(--ki-line-strong);
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.page-contact .contact-hero__media img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
}
.page-contact .contact-hero__badge{
  position:absolute;
  top:0;
  left:0;
  padding:8px 14px;
  background:var(--ki-sichuan);
  color:var(--ki-white);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
}
.page-contact .contact-hero__caption{
  position:absolute;
  right:0;
  bottom:0;
  padding:8px 14px;
  background:var(--ki-panel);
  color:var(--ki-muted);
  font-family:var(--ki-font-mono);
  font-size:12px;
  letter-spacing:.08em;
}

/* 通用区块 */
.page-contact .contact-sec{
  max-width:var(--ki-wrap);
  margin:0 auto;
  padding:clamp(38px,6vw,70px) var(--ki-gutter) 0;
}
.page-contact .contact-sec + .contact-sec{
  margin-top:clamp(38px,6vw,70px);
  border-top:1px solid var(--ki-line);
}
.page-contact .contact-sec__head{
  display:grid;
  gap:10px;
  margin-bottom:clamp(24px,4vw,40px);
  padding-bottom:16px;
  border-bottom:2px solid var(--ki-orange);
}
.page-contact .contact-sec__num{
  font-family:var(--ki-font-mono);
  font-size:13px;
  letter-spacing:.26em;
  color:var(--ki-orange);
}
.page-contact .contact-sec__title{
  font-size:clamp(24px,3.6vw,42px);
  font-weight:900;
  line-height:1.1;
  letter-spacing:-.01em;
}
.page-contact .contact-sec__note{
  max-width:62ch;
  font-size:15px;
  line-height:1.75;
  color:var(--ki-muted);
}

/* 01 联系渠道 */
.page-contact .contact-channels{
  display:grid;
  gap:18px;
}
.page-contact .contact-channel{
  display:grid;
  gap:18px;
  padding:clamp(18px,3vw,26px);
  background:var(--ki-panel);
  border:2px solid var(--ki-line-strong);
  transition:transform .12s ease-out,box-shadow .12s ease-out;
}
.page-contact .contact-channel:hover{
  transform:translate(-4px,-4px);
  box-shadow:var(--ki-shadow);
}
.page-contact .contact-channel__label{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:12px;
  font-size:clamp(20px,2.4vw,26px);
  font-weight:900;
}
.page-contact .contact-channel__idx{
  font-family:var(--ki-font-mono);
  font-size:13px;
  letter-spacing:.2em;
  color:var(--ki-mint);
}
.page-contact .contact-channel__value{
  display:block;
  margin-bottom:16px;
  font-family:var(--ki-font-mono);
  font-size:clamp(16px,2.1vw,21px);
  font-weight:700;
  line-height:1.5;
  color:var(--ki-white);
  word-break:break-word;
}
.page-contact .contact-copy{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  border:2px solid var(--ki-mint);
  background:transparent;
  color:var(--ki-mint);
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  cursor:pointer;
  transition:background-color .12s ease-out,color .12s ease-out;
}
.page-contact .contact-copy:hover,
.page-contact .contact-copy[data-copied]{
  background:var(--ki-mint);
  color:var(--ki-ink);
}
.page-contact .contact-channel__text{
  font-size:15.5px;
  line-height:1.75;
  color:var(--ki-muted);
}
.page-contact .contact-channel__list{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:grid;
  gap:9px;
}
.page-contact .contact-channel__list li{
  position:relative;
  padding-left:20px;
  font-size:14.5px;
  line-height:1.6;
  color:var(--ki-white);
}
.page-contact .contact-channel__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.68em;
  width:9px;
  height:2px;
  background:var(--ki-orange);
}

/* 02 合作方向 */
.page-contact .contact-coop{
  display:grid;
  gap:22px;
}
.page-contact .contact-filter{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.page-contact .contact-filter__label{
  width:100%;
  font-family:var(--ki-font-mono);
  font-size:12px;
  letter-spacing:.26em;
  color:var(--ki-muted);
}
.page-contact .contact-filter__btn{
  appearance:none;
  flex:1 1 auto;
  padding:12px 16px;
  border:2px solid var(--ki-line-strong);
  background:transparent;
  color:var(--ki-white);
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  letter-spacing:.06em;
  text-align:left;
  cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.page-contact .contact-filter__btn:hover{
  border-color:var(--ki-mint);
  color:var(--ki-mint);
}
.page-contact .contact-filter__btn[aria-pressed="true"]{
  background:var(--ki-violet);
  border-color:var(--ki-violet);
  color:var(--ki-white);
}
.page-contact .contact-coop__items{
  display:grid;
  gap:16px;
}
.page-contact .contact-coop__item{
  padding:clamp(18px,3vw,26px);
  border:2px solid var(--ki-line-strong);
  border-left:4px solid var(--ki-mint);
  background:linear-gradient(180deg, rgba(21,28,69,.92), rgba(10,15,44,.62));
}
.page-contact .contact-coop__item[hidden]{
  display:none;
}
.page-contact .contact-coop__title{
  margin-bottom:10px;
  font-size:clamp(18px,2.2vw,22px);
  font-weight:900;
}
.page-contact .contact-coop__text{
  margin-bottom:14px;
  font-size:15.5px;
  line-height:1.75;
  color:var(--ki-muted);
}
.page-contact .contact-coop__mail{
  display:block;
  padding:10px 14px;
  border:2px dashed var(--ki-line-strong);
  font-family:var(--ki-font-mono);
  font-size:13.5px;
  color:var(--ki-mint);
  word-break:break-word;
}

/* 03 内容纠错 */
.page-contact .contact-correct{
  display:grid;
  gap:18px;
}
.page-contact .contact-correct__card{
  padding:clamp(18px,3vw,26px);
  background:var(--ki-panel);
  border:2px solid var(--ki-line-strong);
}
.page-contact .contact-correct__title{
  margin-bottom:12px;
  font-size:18px;
  font-weight:900;
}
.page-contact .contact-correct__text{
  margin-bottom:12px;
  font-size:15px;
  line-height:1.75;
  color:var(--ki-muted);
}
.page-contact .contact-correct__text:last-child{
  margin-bottom:0;
}
.page-contact .contact-correct__example{
  display:block;
  margin-bottom:12px;
  padding:12px 16px;
  background:var(--ki-mint);
  color:var(--ki-ink);
  font-family:var(--ki-font-mono);
  font-size:15px;
  font-weight:700;
  letter-spacing:.04em;
  word-break:break-word;
}
.page-contact .contact-check{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:11px;
}
.page-contact .contact-check label{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:15px;
  line-height:1.6;
  color:var(--ki-white);
  cursor:pointer;
}
.page-contact .contact-check input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.page-contact .contact-check__mark{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  margin-top:2px;
  border:2px solid var(--ki-line-strong);
  transition:background-color .12s ease,border-color .12s ease;
}
.page-contact .contact-check input:checked + .contact-check__mark{
  background:var(--ki-orange);
  border-color:var(--ki-orange);
}
.page-contact .contact-check input:checked + .contact-check__mark::after{
  content:"";
  width:10px;
  height:6px;
  border-left:2px solid var(--ki-ink);
  border-bottom:2px solid var(--ki-ink);
  transform:rotate(-45deg) translate(1px,-1px);
}
.page-contact .contact-check input:focus-visible + .contact-check__mark{
  outline:2px solid var(--ki-violet);
  outline-offset:2px;
}

/* 04 值守与覆盖 */
.page-contact .contact-scope{
  display:grid;
  gap:16px;
}
.page-contact .contact-scope__item{
  padding:clamp(18px,3vw,24px);
  background:var(--ki-panel);
  border:2px solid var(--ki-line-strong);
}
.page-contact .contact-scope__num{
  display:block;
  font-family:var(--ki-font-mono);
  font-size:clamp(32px,5vw,50px);
  font-weight:700;
  line-height:1;
  color:var(--ki-mint);
}
.page-contact .contact-scope__label{
  display:block;
  margin-top:12px;
  font-size:14px;
  line-height:1.7;
  letter-spacing:.04em;
  color:var(--ki-muted);
}
.page-contact .contact-scope__notes{
  margin-top:22px;
  display:grid;
  gap:12px;
  max-width:70ch;
}
.page-contact .contact-scope__notes p{
  font-size:15px;
  line-height:1.8;
  color:var(--ki-muted);
}
.page-contact .contact-scope__legal{
  font-family:var(--ki-font-mono);
  font-size:13px;
  letter-spacing:.08em;
  color:var(--ki-white);
}

/* 05 合作流程 */
.page-contact .contact-flow__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px;
}
.page-contact .contact-flow__step{
  position:relative;
  padding:20px 18px 22px;
  background:var(--ki-panel);
  border:2px solid var(--ki-line-strong);
}
.page-contact .contact-flow__step--start{
  background:var(--ki-orange);
  border-color:var(--ki-orange);
  color:var(--ki-ink);
}
.page-contact .contact-flow__step--start .contact-flow__num,
.page-contact .contact-flow__step--start .contact-flow__desc{
  color:var(--ki-ink);
}
.page-contact .contact-flow__num{
  display:block;
  margin-bottom:10px;
  font-family:var(--ki-font-mono);
  font-size:12px;
  letter-spacing:.24em;
  color:var(--ki-orange);
}
.page-contact .contact-flow__name{
  margin-bottom:8px;
  font-size:17px;
  font-weight:900;
}
.page-contact .contact-flow__desc{
  font-size:14px;
  line-height:1.7;
  color:var(--ki-muted);
}
.page-contact .contact-flow__aside{
  display:grid;
  gap:20px;
  margin-top:22px;
}
.page-contact .contact-flow__figure{
  border:2px solid var(--ki-line-strong);
}
.page-contact .contact-flow__figure img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3 / 2;
  object-fit:cover;
}
.page-contact .contact-flow__tip p{
  font-size:15px;
  line-height:1.8;
  color:var(--ki-muted);
  border-left:4px solid var(--ki-sichuan);
  padding-left:16px;
}

/* 06 延伸入口 */
.page-contact .contact-out{
  display:grid;
  gap:14px;
}
.page-contact .contact-out__link{
  display:block;
  padding:20px;
  background:var(--ki-panel);
  border:2px solid var(--ki-line-strong);
  color:var(--ki-white);
  text-decoration:none;
  transition:transform .12s ease-out,box-shadow .12s ease-out,border-color .12s ease-out;
}
.page-contact .contact-out__link:hover{
  transform:translate(-4px,-4px);
  box-shadow:var(--ki-shadow);
  border-color:var(--ki-mint);
}
.page-contact .contact-out__title{
  margin-bottom:8px;
  font-size:18px;
  font-weight:900;
}
.page-contact .contact-out__text{
  font-size:14px;
  line-height:1.7;
  color:var(--ki-muted);
}

/* 平板及以上 */
@media (min-width:768px){
  .page-contact .contact-scope{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .page-contact .contact-out{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (min-width:820px){
  .page-contact .contact-channel{
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    align-items:start;
  }
  .page-contact .contact-correct{
    grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  }
  .page-contact .contact-flow__list{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
  }
  .page-contact .contact-flow__step{
    border-right-width:0;
  }
  .page-contact .contact-flow__step:last-child{
    border-right-width:2px;
  }
  .page-contact .contact-flow__step:not(:last-child)::after{
    content:"";
    position:absolute;
    right:-10px;
    top:50%;
    transform:translateY(-50%);
    z-index:2;
    width:0;
    height:0;
    border-left:10px solid var(--ki-orange);
    border-top:9px solid transparent;
    border-bottom:9px solid transparent;
  }
  .page-contact .contact-flow__aside{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    align-items:center;
  }
}

@media (min-width:900px){
  .page-contact .contact-hero__grid{
    grid-template-columns:56px minmax(0,7fr) minmax(0,5fr);
    align-items:end;
  }
  .page-contact .contact-hero__vmark{
    display:block;
  }
  .page-contact .contact-coop{
    grid-template-columns:minmax(0,4fr) minmax(0,8fr);
    align-items:start;
  }
  .page-contact .contact-filter{
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
  }
  .page-contact .contact-filter__btn{
    flex:0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-contact *{
    transition:none !important;
    animation:none !important;
  }
}
</main>