/* ===== 联系页专属样式 ===== */
.page-contact{
  background:
    linear-gradient(rgba(27,27,31,0.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(27,27,31,0.035) 1px,transparent 1px),
    #F7F7F3;
  background-size:28px 28px,28px 28px,auto;
  font-family:var(--font-body);
  line-height:1.75;
  color:var(--dark);
}

/* ===== 入口标题区 ===== */
.page-contact .page-entrance{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#1B1B1F 0%,#222229 55%,#2B1E1C 100%);
  color:#F5F5F0;
  padding:3.25rem 0 4.25rem;
}
.page-contact .page-entrance::before{
  content:"";
  position:absolute;
  top:0;left:0;
  width:100%;height:5px;
  background:linear-gradient(90deg,var(--red) 0%,var(--orange) 55%,var(--gold) 100%);
  z-index:2;
}
.page-contact .page-entrance::after{
  content:"CONTACT";
  position:absolute;
  right:-0.25em;
  bottom:-0.28em;
  font-family:var(--font-display);
  font-size:clamp(4rem,12vw,9rem);
  line-height:1;
  color:rgba(245,245,240,0.045);
  letter-spacing:0.02em;
  white-space:nowrap;
  pointer-events:none;
}
.page-contact .page-entrance .container{
  position:relative;
  z-index:1;
}
.page-contact .breadcrumb{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:0.4rem;
  font-size:0.875rem;
  margin-bottom:2.25rem;
}
.page-contact .breadcrumb-link{
  color:rgba(245,245,240,0.62);
  text-decoration:none;
  transition:color 0.25s ease;
}
.page-contact .breadcrumb-link:hover{
  color:var(--gold);
}
.page-contact .breadcrumb-item{
  color:rgba(245,245,240,0.9);
}
.page-contact .entrance-kicker{
  display:inline-block;
  font-size:0.8rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gold);
  padding:0.4rem 0.85rem;
  border-left:3px solid var(--red);
  margin-bottom:1.1rem;
  background:rgba(212,160,23,0.08);
}
.page-contact .page-entrance h1{
  font-family:var(--font-display);
  font-size:clamp(2rem,4.5vw,3.5rem);
  line-height:1.12;
  max-width:760px;
  margin:0 0 1.25rem;
  letter-spacing:0.01em;
  color:#F5F5F0;
}
.page-contact .entrance-desc{
  max-width:680px;
  font-size:1.05rem;
  line-height:1.75;
  color:rgba(245,245,240,0.78);
  margin-bottom:1.75rem;
}
.page-contact .entrance-badges{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
}
.page-contact .badge-item{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  font-size:0.85rem;
  font-weight:600;
  padding:0.45rem 0.9rem;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(245,245,240,0.14);
  color:rgba(245,245,240,0.85);
}
.page-contact .badge-item::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:var(--red);
  flex-shrink:0;
}

/* ===== 官方联系方式 ===== */
.page-contact .contact-links{
  padding:4.5rem 0 5rem;
}
.page-contact .section-head{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  align-items:flex-start;
  margin-bottom:2.25rem;
}
.page-contact .section-title{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,3vw,2.3rem);
  line-height:1.2;
  margin:0;
  color:var(--dark);
}
.page-contact .section-head-desc{
  color:var(--grayblue);
  font-size:0.95rem;
  max-width:440px;
  margin:0;
  line-height:1.6;
}

/* 非对称 Bento 联系卡片 */
.page-contact .contact-link-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
}
.page-contact .contact-link-card{
  display:flex;
  flex-direction:column;
  border-radius:var(--radius);
  padding:1.75rem;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  min-height:200px;
  transition:transform 0.35s var(--ease),box-shadow 0.35s var(--ease);
}
.page-contact .contact-link-card:hover,
.page-contact .contact-link-card:focus-visible{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(27,27,31,0.18);
  outline:none;
}
.page-contact .contact-link-card:hover .contact-card-action{
  transform:translateX(4px);
}

/* 电话卡片：红渐变 */
.page-contact .contact-card-phone{
  background:linear-gradient(135deg,#E6392D 0%,#D12A1E 55%,#7D2E22 130%);
  color:#F5F5F0;
}
.page-contact .contact-card-phone::before{
  content:"";
  position:absolute;
  top:-40%;
  right:-20%;
  width:75%;
  height:180%;
  background:rgba(255,255,255,0.06);
  transform:rotate(25deg);
  pointer-events:none;
}
.page-contact .contact-card-phone::after{
  content:"";
  position:absolute;
  right:-50px;
  bottom:-50px;
  width:150px;height:150px;
  border-radius:50%;
  border:1px solid rgba(245,245,240,0.16);
  box-shadow:0 0 0 28px rgba(245,245,240,0.04);
  pointer-events:none;
}

/* 邮箱卡片：深空灰 */
.page-contact .contact-card-email{
  background:#1B1B1F;
  color:#F5F5F0;
}
.page-contact .contact-card-email::before{
  content:"";
  position:absolute;
  top:0;right:0;
  width:100%;height:4px;
  background:linear-gradient(90deg,transparent,var(--red),var(--gold));
  pointer-events:none;
}

/* 地址卡片：炽白 */
.page-contact .contact-card-address{
  background:#F5F5F0;
  color:#1B1B1F;
  border:1px solid rgba(27,27,31,0.08);
}
.page-contact .contact-card-address::before{
  content:"";
  position:absolute;
  left:0;
  top:20%;
  width:4px;
  height:60%;
  background:linear-gradient(180deg,var(--red),var(--gold));
  border-radius:0 4px 4px 0;
  pointer-events:none;
}

/* 卡片内部 */
.page-contact .contact-card-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;height:48px;
  border-radius:12px;
  margin-bottom:auto;
  flex-shrink:0;
}
.page-contact .contact-card-phone .contact-card-icon{
  background:rgba(255,255,255,0.14);
}
.page-contact .contact-card-email .contact-card-icon{
  background:rgba(255,255,255,0.08);
}
.page-contact .contact-card-address .contact-card-icon{
  background:rgba(230,57,45,0.1);
}
.page-contact .contact-card-icon svg{
  width:26px;height:26px;
}
.page-contact .contact-card-label{
  font-size:0.8rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  opacity:0.72;
  margin-top:1.5rem;
  margin-bottom:0.35rem;
}
.page-contact .contact-card-value{
  font-family:var(--font-display);
  font-size:1.2rem;
  line-height:1.3;
  word-break:break-word;
  overflow-wrap:anywhere;
  max-width:96%;
}
.page-contact .contact-card-phone .contact-card-value{
  font-size:1.5rem;
  letter-spacing:0.02em;
}
.page-contact .contact-card-email .contact-card-value{
  font-size:1rem;
}
.page-contact .contact-card-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
  margin-top:auto;
  padding-top:1.5rem;
}
.page-contact .contact-card-action{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  font-size:0.85rem;
  font-weight:700;
  padding:0.45rem 0.85rem;
  border-radius:999px;
  transition:transform 0.3s var(--ease);
}
.page-contact .contact-card-phone .contact-card-action{
  background:rgba(255,255,255,0.16);
  color:#F5F5F0;
}
.page-contact .contact-card-email .contact-card-action{
  background:rgba(212,160,23,0.18);
  color:var(--gold);
}
.page-contact .contact-card-address .contact-card-action{
  background:var(--red);
  color:#F5F5F0;
}
.page-contact .contact-card-hours{
  font-size:0.8rem;
  opacity:0.7;
  text-align:right;
}

/* ===== 客服支持 ===== */
.page-contact .support-section{
  position:relative;
  background:#FFFFFF;
  padding:4.5rem 0 5rem;
}
.page-contact .support-section::before{
  content:"";
  position:absolute;
  left:0;top:0;
  width:80px;height:6px;
  background:linear-gradient(90deg,var(--red),rgba(230,57,45,0.12));
  pointer-events:none;
}
.page-contact .support-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2.5rem;
  align-items:center;
}
.page-contact .support-label{
  display:inline-block;
  font-size:0.8rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:0.7rem;
}
.page-contact .support-content h2{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,2.6vw,2.2rem);
  line-height:1.2;
  margin-bottom:1rem;
  color:var(--dark);
}
.page-contact .support-lead{
  color:var(--grayblue);
  line-height:1.7;
  margin-bottom:1.75rem;
  max-width:520px;
}
.page-contact .support-list{
  list-style:none;
  padding:0;
  margin:0 0 2rem;
  display:grid;
  gap:0.85rem;
}
.page-contact .support-list-item{
  display:flex;
  align-items:flex-start;
  gap:0.9rem;
  padding:0.85rem 1rem;
  background:#F7F7F3;
  border-radius:12px;
  border-left:3px solid var(--red);
  color:#2A2A30;
  font-size:0.95rem;
  line-height:1.55;
}
.page-contact .support-list-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:32px;height:32px;
  border-radius:8px;
  background:var(--dark);
  color:#F5F5F0;
  font-size:0.75rem;
  font-weight:700;
  font-family:var(--font-display);
  margin-top:0.1rem;
}
.page-contact .support-list-item strong{
  color:var(--dark);
}
.page-contact .support-visual{
  margin:0;
}
.page-contact .support-visual img{
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  display:block;
}
.page-contact .image-caption{
  font-size:0.82rem;
  color:var(--grayblue);
  margin-top:0.6rem;
  line-height:1.5;
}

/* ===== 地址信息 ===== */
.page-contact .address-section{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#1B1B1F 0%,#1E1E23 50%,#2A1B18 100%);
  color:#F5F5F0;
  padding:4.5rem 0 5rem;
}
.page-contact .address-section::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.045) 1px,transparent 1px);
  background-size:36px 36px;
  pointer-events:none;
}
.page-contact .address-section::after{
  content:"";
  position:absolute;
  right:-70px;
  top:-70px;
  width:200px;height:200px;
  border-radius:50%;
  border:1px solid rgba(212,160,23,0.18);
  box-shadow:0 0 0 36px rgba(212,160,23,0.04);
  pointer-events:none;
}
.page-contact .address-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2.5rem;
  align-items:center;
  position:relative;
  z-index:1;
}
.page-contact .address-visual{
  position:relative;
  margin:0;
}
.page-contact .address-visual img{
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:var(--radius);
  border:1px solid rgba(245,245,240,0.1);
  box-shadow:0 24px 48px rgba(0,0,0,0.35);
  display:block;
}
.page-contact .address-visual::after{
  content:"";
  position:absolute;
  top:-12px;
  right:-12px;
  width:48px;height:48px;
  border-radius:10px;
  border-top:3px solid var(--red);
  border-right:3px solid var(--gold);
  opacity:0.7;
  pointer-events:none;
}
.page-contact .address-section .image-caption{
  color:rgba(245,245,240,0.6);
}
.page-contact .address-label{
  display:inline-block;
  font-size:0.8rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:0.6rem;
}
.page-contact .address-content h2{
  font-family:var(--font-display);
  font-size:clamp(1.4rem,2.4vw,2rem);
  line-height:1.3;
  margin-bottom:1.25rem;
  color:#F5F5F0;
}
.page-contact .address-line{
  font-family:var(--font-display);
  font-size:clamp(1.15rem,2vw,1.6rem);
  line-height:1.4;
  color:#F5F5F0;
  margin:0 0 1rem;
  padding-bottom:0.6rem;
  border-bottom:2px solid rgba(230,57,45,0.6);
  display:inline-block;
}
.page-contact .address-desc{
  color:rgba(245,245,240,0.78);
  line-height:1.7;
  margin-bottom:1.75rem;
  max-width:520px;
}
.page-contact .address-tips{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:0.75rem;
}
.page-contact .address-tips li{
  position:relative;
  padding-left:1.4rem;
  font-size:0.9rem;
  line-height:1.6;
  color:rgba(245,245,240,0.72);
}
.page-contact .address-tips li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.6em;
  width:8px;height:8px;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:var(--red);
}

/* ===== 相关服务入口 ===== */
.page-contact .help-links{
  padding:4.5rem 0 5rem;
}
.page-contact .help-link-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}
.page-contact .help-link-item{
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  background:#FFFFFF;
  border:1px solid rgba(27,27,31,0.08);
  border-radius:var(--radius);
  padding:1.5rem 1.4rem;
  text-decoration:none;
  color:var(--dark);
  transition:transform 0.3s var(--ease),box-shadow 0.3s var(--ease),border-color 0.3s var(--ease);
}
.page-contact .help-link-item:hover,
.page-contact .help-link-item:focus-visible{
  transform:translateY(-4px);
  box-shadow:var(--shadow-card);
  border-color:transparent;
  outline:none;
}
.page-contact .help-link-title{
  display:flex;
  align-items:center;
  gap:0.55rem;
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:700;
  color:inherit;
}
.page-contact .help-link-title::before{
  content:"";
  width:18px;height:4px;
  border-radius:4px;
  background:linear-gradient(90deg,var(--red),var(--orange));
  flex-shrink:0;
}
.page-contact .help-link-desc{
  font-size:0.88rem;
  color:var(--grayblue);
  line-height:1.5;
}

/* ===== 桌面端布局 ===== */
@media (min-width:768px){
  .page-contact .section-head{
    flex-direction:row;
    align-items:flex-end;
  }
  .page-contact .section-head-desc{
    margin-left:auto;
    text-align:right;
  }
  .page-contact .contact-link-grid{
    grid-template-columns:repeat(6,1fr);
    grid-template-rows:auto auto;
    gap:1.25rem;
  }
  .page-contact .contact-card-phone{
    grid-column:span 3;
    grid-row:1 / -1;
  }
  .page-contact .contact-card-email{
    grid-column:4 / -1;
    grid-row:1;
  }
  .page-contact .contact-card-address{
    grid-column:4 / -1;
    grid-row:2;
  }
  .page-contact .contact-card-phone .contact-card-value{
    font-size:1.9rem;
  }
  .page-contact .contact-card-email .contact-card-value{
    font-size:1.05rem;
  }
  .page-contact .help-link-grid{
    grid-template-columns:repeat(4,1fr);
    gap:1.25rem;
  }
}

@media (min-width:900px){
  .page-contact .support-grid{
    grid-template-columns:1fr 1fr;
    gap:4rem;
  }
  .page-contact .address-grid{
    grid-template-columns:0.85fr 1.15fr;
    gap:4rem;
  }
}

/* ===== 减弱动效 ===== */
@media (prefers-reduced-motion:reduce){
  .page-contact .contact-link-card,
  .page-contact .help-link-item{
    transition:none;
  }
  .page-contact .contact-link-card:hover,
  .page-contact .contact-link-card:focus-visible,
  .page-contact .help-link-item:hover,
  .page-contact .help-link-item:focus-visible{
    transform:none;
  }
  .page-contact .contact-link-card:hover .contact-card-action{
    transform:none;
  }
}