.page-contact{
  --ct-card-shadow:0 24px 60px rgba(3,12,9,.55);
  --ct-amber-soft:rgba(255,180,58,.14);
  background:
    radial-gradient(120% 70% at 88% -8%,rgba(31,122,76,.42),transparent 62%),
    radial-gradient(80% 50% at 0% 0%,rgba(53,224,200,.10),transparent 58%),
    var(--ink);
  color:var(--warm);
  padding-top:clamp(20px,4vw,36px);
  padding-bottom:clamp(72px,12vw,140px);
  overflow-x:clip;
}
.page-contact .contact-crumb{margin-bottom:clamp(18px,3vw,30px);}
.page-contact .contact-crumb a{color:var(--warm-72);text-decoration:none;}
.page-contact .contact-crumb a:hover{color:var(--lime);}
.page-contact .contact-crumb span{color:var(--warm-56);}

.page-contact .contact-h1{
  margin:14px 0 18px;
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.02;
  transform:skewX(-3deg);
  transform-origin:left bottom;
  font-size:clamp(32px,7.4vw,60px);
}
.page-contact .contact-h2{
  margin:10px 0 16px;
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.14;
  transform:skewX(-3deg);
  transform-origin:left bottom;
  font-size:clamp(26px,5vw,34px);
}
.page-contact .contact-h2 br{display:none;}

/* 首屏分屏 */
.page-contact .contact-hero__grid{
  display:grid;
  gap:clamp(28px,5vw,56px);
  align-items:start;
}
.page-contact .contact-hero__lead .lede{max-width:38ch;color:var(--warm-72);}

.page-contact .watch-time{
  margin:clamp(22px,4vw,32px) 0;
  display:grid;
  gap:4px;
  padding:clamp(16px,3vw,24px) clamp(18px,3vw,26px);
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:linear-gradient(140deg,rgba(18,58,43,.92),rgba(7,19,15,.6));
  border-left:3px solid var(--lime);
}
.page-contact .watch-time__label{
  font-size:12px;
  letter-spacing:.22em;
  color:var(--lime);
  text-transform:uppercase;
}
.page-contact .watch-time__num{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(34px,8vw,66px);
  line-height:1.05;
  letter-spacing:.01em;
  color:var(--warm);
}
.page-contact .watch-time__note{font-size:13px;color:var(--warm-56);}

.page-contact .contact-hero__media{
  margin:0;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line-soft);
}
.page-contact .contact-hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.page-contact .contact-hero__media .media__caption{font-size:12px;color:var(--warm-56);}

/* 渠道卡：纵向错位 */
.page-contact .contact-hero__cards{
  display:grid;
  gap:16px;
  padding-top:clamp(0px,2vw,18px);
}
.page-contact .contact-card{
  position:relative;
  padding:clamp(20px,3.4vw,28px);
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:linear-gradient(155deg,rgba(18,58,43,.95),rgba(7,19,15,.9));
  box-shadow:var(--ct-card-shadow);
  transition:transform .32s var(--ease),border-color .32s var(--ease);
}
.page-contact .contact-card:hover,
.page-contact .contact-card:focus-within{
  transform:translateY(-6px);
  border-color:rgba(200,255,77,.42);
}
.page-contact .contact-card:nth-child(2){margin-left:16px;}
.page-contact .contact-card:nth-child(3){margin-left:32px;}
.page-contact .contact-card__kicker{
  display:inline-block;
  font-size:11px;
  letter-spacing:.2em;
  padding:4px 12px;
  border-radius:var(--r-pill);
  border:1px solid rgba(200,255,77,.5);
  color:var(--lime);
}
.page-contact .contact-card__kicker--amber{border-color:rgba(255,180,58,.55);color:var(--amber);}
.page-contact .contact-card__kicker--cyan{border-color:rgba(53,224,200,.5);color:var(--cyan);}
.page-contact .contact-card__title{
  margin:12px 0 8px;
  font-family:var(--font-display);
  font-size:17px;
  font-weight:700;
  letter-spacing:.01em;
}
.page-contact .contact-card__value{
  margin:0 0 10px;
  font-size:clamp(15px,2.6vw,17px);
  font-weight:700;
  line-height:1.45;
  color:var(--lime);
  word-break:break-word;
}
.page-contact .contact-card__value--mono{font-family:var(--font-mono);letter-spacing:.02em;}
.page-contact .contact-card__desc{
  margin:0 0 16px;
  font-size:14px;
  line-height:1.75;
  color:var(--warm-72);
}
.page-contact .contact-card .copy-btn{
  border:1px solid var(--line);
  background:transparent;
  color:var(--warm);
  border-radius:var(--r-pill);
  padding:8px 18px;
  font-size:13px;
  cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease);
}
.page-contact .contact-card .copy-btn:hover,
.page-contact .contact-card .copy-btn:focus-visible{
  border-color:var(--cyan);
  color:var(--cyan);
  outline:none;
}

/* 值守与响应 */
.page-contact .contact-channel{
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(18,58,43,.34),transparent);
}
.page-contact .contact-channel__grid{
  display:grid;
  gap:clamp(20px,3.4vw,36px);
  margin-top:clamp(14px,2.4vw,22px);
}
.page-contact .contact-channel__item p{
  margin:8px 0 0;
  font-size:15px;
  line-height:1.78;
  color:var(--warm-72);
  max-width:38ch;
}
.page-contact .contact-channel__title{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:700;
  margin:0;
  padding-left:14px;
  border-left:3px solid var(--pitch);
  line-height:1.4;
}
.page-contact .contact-channel__note{margin-top:clamp(16px,3vw,26px);color:var(--warm-56);}

/* 四类分流 */
.page-contact .contact-routing__lede{max-width:44ch;color:var(--warm-72);}
.page-contact .contact-routing__grid{
  display:grid;
  gap:clamp(14px,2.4vw,20px);
  margin-top:clamp(22px,4vw,34px);
}
.page-contact .contact-type{
  position:relative;
  padding:clamp(20px,3.2vw,26px);
  border-radius:var(--r-md);
  background:rgba(18,58,43,.42);
  border:1px solid var(--line);
  border-top:3px solid var(--mist);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.page-contact .contact-type--account{border-top-color:var(--cyan);}
.page-contact .contact-type--data{border-top-color:var(--lime);}
.page-contact .contact-type--partner{border-top-color:var(--amber);}
.page-contact .contact-type--media{border-top-color:var(--violet);}
.page-contact .contact-type__no{
  font-family:var(--font-mono);
  font-size:26px;
  font-weight:700;
  color:var(--warm-56);
  line-height:1;
}
.page-contact .contact-type__title{
  margin:0;
  font-family:var(--font-display);
  font-size:18px;
  font-weight:700;
}
.page-contact .contact-type__desc{
  margin:0;
  font-size:14px;
  line-height:1.75;
  color:var(--warm-72);
}
.page-contact .contact-type__meta{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:var(--warm-56);
}
.page-contact .contact-type__meta span{
  display:inline-block;
  margin-right:8px;
  padding:1px 9px;
  border-radius:var(--r-pill);
  background:rgba(246,243,233,.08);
  color:var(--warm-72);
  font-size:11px;
  letter-spacing:.08em;
}

/* 邮件准备清单 */
.page-contact .contact-kit{
  background:
    repeating-linear-gradient(90deg,rgba(246,243,233,.028) 0 2px,transparent 2px 26px),
    linear-gradient(160deg,rgba(18,58,43,.62),rgba(7,19,15,.2));
  border-radius:var(--r-xl);
  margin-inline:clamp(0px,1.6vw,20px);
}
.page-contact .contact-kit__grid{
  display:grid;
  gap:clamp(24px,4vw,44px);
  align-items:start;
}
.page-contact .contact-kit__intro{margin:0 0 18px;font-size:15px;line-height:1.75;color:var(--warm-72);max-width:38ch;}
.page-contact .contact-kit__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px;
}
.page-contact .contact-kit__list li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:start;
  padding-bottom:14px;
  border-bottom:1px dashed var(--line-soft);
}
.page-contact .contact-kit__list li:last-child{border-bottom:0;padding-bottom:0;}
.page-contact .contact-kit__no{
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:700;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:var(--r-pill);
  background:var(--lime);
  color:var(--char);
  flex:none;
}
.page-contact .contact-kit__list h3{
  margin:0 0 4px;
  font-family:var(--font-display);
  font-size:16px;
  font-weight:700;
}
.page-contact .contact-kit__list p{
  margin:0;
  font-size:14px;
  line-height:1.72;
  color:var(--warm-72);
}
.page-contact .contact-kit__submit{
  margin-top:clamp(20px,3.4vw,28px);
  padding:clamp(16px,3vw,22px);
  border-radius:var(--r-md);
  background:rgba(255,180,58,.10);
  border:1px dashed rgba(255,180,58,.55);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 16px;
}
.page-contact .contact-kit__submit-label{
  font-size:11px;
  letter-spacing:.2em;
  color:var(--amber);
  width:100%;
}
.page-contact .contact-kit__submit-mail{
  margin:0;
  font-family:var(--font-mono);
  font-size:clamp(13px,2.4vw,16px);
  font-weight:700;
  color:var(--warm);
  word-break:break-all;
}
.page-contact .contact-kit__submit .copy-btn{
  border:1px solid rgba(255,180,58,.6);
  background:transparent;
  color:var(--amber);
  border-radius:var(--r-pill);
  padding:7px 16px;
  font-size:13px;
  cursor:pointer;
}
.page-contact .contact-kit__submit .copy-btn:hover,
.page-contact .contact-kit__submit .copy-btn:focus-visible{
  background:var(--amber);
  color:var(--char);
  outline:none;
}
.page-contact .contact-kit__media{
  margin:0;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line-soft);
}
.page-contact .contact-kit__media img{width:100%;height:100%;object-fit:cover;display:block;}
.page-contact .contact-kit__media .media__caption{font-size:12px;color:var(--warm-56);}

/* 常见路径 */
.page-contact .contact-shortcut__lede{margin-bottom:clamp(20px,3.4vw,28px);color:var(--warm-72);}
.page-contact .contact-shortcut__row{
  display:grid;
  gap:14px;
}
.page-contact .contact-shortcut__item{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:clamp(18px,3vw,24px);
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:rgba(18,58,43,.36);
  color:var(--warm);
  text-decoration:none;
  transition:border-color .28s var(--ease),transform .28s var(--ease),background .28s var(--ease);
}
.page-contact .contact-shortcut__item:hover,
.page-contact .contact-shortcut__item:focus-visible{
  transform:translateY(-4px);
  border-color:rgba(53,224,200,.55);
  background:rgba(18,58,43,.6);
  outline:none;
}
.page-contact .contact-shortcut__tag{
  align-self:flex-start;
  font-size:11px;
  letter-spacing:.16em;
  padding:3px 11px;
  border-radius:var(--r-pill);
  background:var(--lime);
  color:var(--char);
  font-weight:700;
}
.page-contact .contact-shortcut__text{font-size:14px;line-height:1.72;color:var(--warm-72);}
.page-contact .contact-shortcut__go{
  margin-top:2px;
  font-size:13px;
  font-weight:700;
  color:var(--cyan);
}
.page-contact .contact-shortcut__note{margin-top:18px;color:var(--warm-56);}
.page-contact .contact-shortcut__note a{color:var(--lime);text-decoration:none;border-bottom:1px solid rgba(200,255,77,.4);}

/* 留言表单 */
.page-contact .contact-form__wrap{
  max-width:960px;
  margin-inline:auto;
}
.page-contact .contact-form__intro{
  margin:0 0 clamp(20px,3.4vw,28px);
  font-size:15px;
  line-height:1.75;
  color:var(--warm-72);
  max-width:46ch;
}
.page-contact .contact-form{
  padding:clamp(20px,4vw,36px);
  border-radius:var(--r-xl);
  background:linear-gradient(160deg,rgba(246,243,233,.06),rgba(18,58,43,.5));
  border:1px solid var(--line);
}
.page-contact .contact-form__grid{
  display:grid;
  gap:18px;
}
.page-contact .field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:18px;
  border:0;
  padding:0;
}
.page-contact .contact-form__grid .field{margin-bottom:0;}
.page-contact .field__label{
  font-size:12px;
  letter-spacing:.16em;
  color:var(--warm-72);
  padding:0;
}
.page-contact .field__input{
  width:100%;
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  color:var(--warm);
  background:rgba(7,19,15,.72);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:13px 16px;
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.page-contact .field__input::placeholder{color:rgba(216,222,214,.42);}
.page-contact .field__input:focus{
  outline:none;
  border-color:var(--cyan);
  box-shadow:0 0 0 2px rgba(53,224,200,.45);
}
.page-contact .field__input--area{resize:vertical;min-height:120px;}
.page-contact .field__err{
  display:none;
  font-size:12px;
  color:var(--amber);
}
.page-contact .field__input:not(:placeholder-shown):invalid ~ .field__err{display:block;}
.page-contact .field__input:not(:placeholder-shown):invalid{border-color:rgba(255,180,58,.7);}

.page-contact .type-pick{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:4px;
}
.page-contact .type-pick__opt{position:relative;display:inline-flex;}
.page-contact .type-pick__opt input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
.page-contact .type-pick__opt span{
  display:inline-block;
  padding:8px 18px;
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  font-size:13px;
  color:var(--warm-72);
  transition:border-color .22s var(--ease),color .22s var(--ease),background .22s var(--ease);
}
.page-contact .type-pick__opt input:checked + span{
  background:var(--lime);
  border-color:var(--lime);
  color:var(--char);
  font-weight:700;
}
.page-contact .type-pick__opt input:focus-visible + span{
  box-shadow:0 0 0 2px var(--cyan);
}

.page-contact .contact-form__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-top:6px;
}
.page-contact .contact-form__tip{
  margin:0;
  flex:1 1 240px;
  font-size:13px;
  line-height:1.7;
  color:var(--char);
  background:var(--amber);
  border-radius:var(--r-pill);
  padding:10px 18px;
}
.page-contact .contact-form__btn{flex:none;}
.page-contact .contact-form__note{margin-top:14px;color:var(--warm-56);}

@media (min-width:720px){
  .page-contact .contact-channel__grid{grid-template-columns:1fr 1fr;}
  .page-contact .contact-shortcut__row{grid-template-columns:repeat(3,1fr);}
  .page-contact .contact-form__grid{grid-template-columns:1fr 1fr;}
}

@media (min-width:960px){
  .page-contact .contact-hero__grid{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:clamp(36px,5vw,64px);
  }
  .page-contact .contact-hero__cards{padding-top:clamp(18px,3vw,40px);}
  .page-contact .contact-routing__grid{grid-template-columns:1fr 1fr;}
  .page-contact .contact-kit__grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center;}
  .page-contact .contact-kit__media{order:2;}
  .page-contact .contact-channel__item{padding-right:clamp(16px,3vw,36px);}
  .page-contact .contact-channel__item + .contact-channel__item{
    border-left:1px solid var(--line-soft);
    padding-left:clamp(24px,3.4vw,40px);
  }
}

@media (prefers-reduced-motion:reduce){
  .page-contact .contact-card,
  .page-contact .contact-shortcut__item,
  .page-contact .field__input,
  .page-contact .type-pick__opt span{
    transition:none;
  }
  .page-contact .contact-card:hover,
  .page-contact .contact-shortcut__item:hover{transform:none;}
}
<<<END>>>
</main>