.page-contact{
  --pc-soft: rgba(232,239,230,.74);
  --pc-hair: rgba(221,214,194,.18);
  background: var(--ink);
  color: var(--text);
}

/* ---------- hero ---------- */
.page-contact .contact-hero{
  position: relative;
  overflow: hidden;
  padding: 34px 0 56px;
  background:
    radial-gradient(120% 82% at 88% -6%, rgba(46,242,206,.11), transparent 62%),
    radial-gradient(92% 70% at -6% 104%, rgba(217,255,61,.08), transparent 56%);
}
.page-contact .contact-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(90deg, rgba(232,239,230,.055) 0 1px, transparent 1px 104px);
  pointer-events:none;
}
.page-contact .contact-hero__grid{
  position: relative;
  display: grid;
  gap: 34px;
}
.page-contact .contact-hero__text{
  position: relative;
  z-index: 1;
}
.page-contact .contact-hero .eyebrow{
  margin: 22px 0 0;
  color: var(--cyan);
}
.page-contact .contact-hero h1{
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 7.4vw, 62px);
  line-height: 1.03;
  letter-spacing: -.012em;
  max-width: 16ch;
}
.page-contact .contact-hero__lead{
  margin: 20px 0 0;
  max-width: 54ch;
  font-size: 16px;
  line-height: 1.8;
  color: var(--pc-soft);
}
.page-contact .contact-hero__facts{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.page-contact .contact-hero__figure{
  margin: 0;
  position: relative;
  z-index: 1;
}
.page-contact .contact-hero__figure .figure__frame{
  aspect-ratio: 3 / 2;
  background: var(--ink-2);
  border: 1px solid var(--pc-hair);
  box-shadow: 8px 8px 0 rgba(8,21,15,.55);
  overflow: hidden;
}
.page-contact .contact-hero__figure .figure__frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;
}
.page-contact .contact-hero__figure .figure__cap{
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--mute);
}

/* ---------- 问题分流 ---------- */
.page-contact .contact-types{
  padding: 60px 0 12px;
}
.page-contact .contact-types__grid{
  display: grid;
  gap: 14px;
  margin-top: 26px;
}
.page-contact .ctype{
  position: relative;
  display: grid;
  gap: 10px;
  padding: 22px 22px 24px;
  background: var(--ink-2);
  border: 1px solid var(--pc-hair);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.page-contact .ctype::after{
  content:"";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
  transition: background .25s var(--ease);
}
.page-contact .ctype:hover,
.page-contact .ctype:focus-within{
  background: var(--moss);
  border-color: rgba(46,242,206,.45);
  transform: translateY(-2px);
}
.page-contact .ctype:hover::after,
.page-contact .ctype:focus-within::after{
  background: var(--cyan);
}
.page-contact .ctype__num{
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--cyan);
}
.page-contact .ctype__title{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.14;
  letter-spacing: -.005em;
}
.page-contact .ctype__desc{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--pc-soft);
}
.page-contact .ctype__need{
  list-style: none;
  margin: 4px 0 0;
  padding: 12px 0 0;
  border-top: 1px dashed var(--pc-hair);
  display: grid;
  gap: 7px;
}
.page-contact .ctype__need li{
  position: relative;
  padding-left: 15px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--mute);
}
.page-contact .ctype__need li::before{
  content:"";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  background: var(--lime);
}

/* ---------- 工作台 ---------- */
.page-contact .contact-desk{
  padding: 56px 0 8px;
}
.page-contact .contact-desk__grid{
  display: grid;
  gap: 34px;
}
.page-contact .contact-desk__main h2{
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(27px, 4.6vw, 40px);
  line-height: 1.08;
  letter-spacing: -.01em;
}
.page-contact .contact-desk__intro{
  margin: 0 0 22px;
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--pc-soft);
}
.page-contact .packet{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--pc-hair);
}
.page-contact .packet__row{
  display: grid;
  gap: 5px;
  padding: 16px 0;
  border-bottom: 1px solid var(--pc-hair);
  transition: border-color .2s var(--ease);
}
.page-contact .packet__row:hover{
  border-bottom-color: var(--lime);
}
.page-contact .packet__key{
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
}
.page-contact .packet__val{
  font-size: 15px;
  line-height: 1.72;
  color: var(--text);
}

/* 右侧纸白面板 */
.page-contact .contact-card{
  padding: clamp(20px, 4vw, 30px);
}
.page-contact .contact-card .eyebrow{
  margin: 0 0 6px;
  color: #5b6b61;
}
.page-contact .contact-card__title{
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.14;
  color: var(--paper-ink);
}
.page-contact .contact-rows{
  margin: 0;
  padding: 0;
}
.page-contact .contact-rows__row{
  display: grid;
  gap: 3px;
  padding: 14px 0;
  border-top: 1px dashed var(--paper-edge);
}
.page-contact .contact-rows__row:first-child{
  border-top: 0;
  padding-top: 0;
}
.page-contact .contact-rows__row dt{
  font-family: var(--font-data);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6a7a6f;
}
.page-contact .contact-rows__row dd{
  margin: 0;
  font-family: var(--font-data);
  font-size: 15px;
  line-height: 1.5;
  color: var(--paper-ink);
  overflow-wrap: anywhere;
}
.page-contact .contact-rows__note{
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #5b6b61;
}

/* ---------- 流程 ---------- */
.page-contact .contact-flow{
  margin-top: 56px;
  padding: 56px 0 60px;
  background: var(--ink-2);
  border-top: 1px solid var(--pc-hair);
  border-bottom: 1px solid var(--pc-hair);
}
.page-contact .flow{
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.page-contact .flow__step{
  position: relative;
  padding: 22px 0 24px 28px;
  border-top: 1px dashed var(--pc-hair);
}
.page-contact .flow__step::before{
  content:"";
  position: absolute;
  left: 0;
  top: 34px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(217,255,61,.14);
}
.page-contact .flow__num{
  display: block;
  font-family: var(--font-data);
  font-size: 26px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--cyan);
}
.page-contact .flow__title{
  margin: 8px 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.2;
}
.page-contact .flow__txt{
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--pc-soft);
}
.page-contact .flow__time{
  display: inline-block;
  padding: 3px 9px;
  font-family: var(--font-data);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--lime);
  border: 1px solid rgba(217,255,61,.36);
}
.page-contact .contact-flow__figure{
  margin: 34px 0 0;
}
.page-contact .contact-flow__figure .figure__frame{
  aspect-ratio: 12 / 7;
  background: rgba(10,31,24,.7);
  border: 1px solid var(--pc-hair);
  overflow: hidden;
}
.page-contact .contact-flow__figure .figure__frame img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-contact .contact-flow__figure .figure__cap{
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--mute);
}

/* ---------- 合作 ---------- */
.page-contact .contact-collab{
  padding: 60px 0 8px;
}
.page-contact .contact-collab__grid{
  display: grid;
  gap: 30px;
}
.page-contact .contact-collab .eyebrow{
  margin: 0 0 10px;
  color: var(--cyan);
}
.page-contact .contact-collab h2{
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(27px, 4.6vw, 40px);
  line-height: 1.08;
  letter-spacing: -.01em;
  max-width: 18ch;
}
.page-contact .contact-collab__lead{
  margin: 0 0 14px;
  max-width: 48ch;
  font-size: 15.5px;
  line-height: 1.82;
  color: var(--pc-soft);
}
.page-contact .contact-collab__sub{
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--text);
}
.page-contact .collab-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--pc-hair);
}
.page-contact .collab-list li{
  display: grid;
  gap: 5px;
  padding: 16px 0;
  border-bottom: 1px solid var(--pc-hair);
}
.page-contact .collab-list__key{
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: .13em;
  color: var(--orange);
}
.page-contact .collab-list p{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--pc-soft);
}
.page-contact .contact-collab__tip{
  margin: 16px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--cyan);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--mute);
}

/* ---------- 延伸入口 ---------- */
.page-contact .contact-next{
  padding: 52px 0 76px;
}
.page-contact .contact-next__title{
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3.4vw, 28px);
  line-height: 1.2;
}
.page-contact .contact-next__grid{
  display: grid;
  gap: 10px;
}
.page-contact .contact-next__item{
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border: 1px solid var(--pc-hair);
  border-left: 3px solid transparent;
  transition: border-color .22s var(--ease), background .22s var(--ease), border-left-color .22s var(--ease);
}
.page-contact .contact-next__item:hover,
.page-contact .contact-next__item:focus-visible{
  background: var(--ink-2);
  border-color: rgba(46,242,206,.4);
  border-left-color: var(--lime);
}
.page-contact .contact-next__label{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: var(--text);
}
.page-contact .contact-next__desc{
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--mute);
}

/* ---------- 断点 ---------- */
@media (min-width: 640px){
  .page-contact .contact-types__grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .page-contact .packet__row{
    grid-template-columns: 148px 1fr;
    gap: 18px;
    align-items: baseline;
  }
  .page-contact .contact-next__grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px){
  .page-contact .contact-hero{
    padding: 44px 0 76px;
  }
  .page-contact .contact-hero__grid{
    grid-template-columns: 7fr 5fr;
    gap: 48px;
    align-items: start;
  }
  .page-contact .contact-desk__grid{
    grid-template-columns: 7fr 5fr;
    gap: 44px;
    align-items: start;
  }
  .page-contact .contact-collab__grid{
    grid-template-columns: 6fr 6fr;
    gap: 52px;
    align-items: start;
  }
  .page-contact .contact-types{
    padding-top: 72px;
  }
  .page-contact .contact-desk{
    padding-top: 64px;
  }
}

@media (min-width: 1000px){
  .page-contact .flow{
    grid-template-columns: repeat(3, 1fr);
    column-gap: 30px;
  }
  .page-contact .flow__step{
    padding: 26px 0 0;
  }
  .page-contact .flow__step::before{
    top: -5px;
    left: 0;
  }
  .page-contact .contact-next__grid{
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (prefers-reduced-motion: reduce){
  .page-contact .ctype,
  .page-contact .packet__row,
  .page-contact .contact-next__item{
    transition: opacity .12s linear;
  }
  .page-contact .ctype:hover,
  .page-contact .ctype:focus-within{
    transform: none;
  }
}
<<<END>>>