@charset "utf-8";

/* ============================================================
   联系我们页 — 专属样式（复用 about.css 的 :root 变量与 hero/subnav）
   ============================================================ */

/* Hero：横幅式，不用全屏 */
.ct-hero{ padding:150px 0 110px; }
.ct-hero .hero-title{ font-size:clamp(30px,4.6vw,56px); line-height:1.22; padding:.06em 0; }
.ct-hero .hero-lead{ max-width:760px; }

/* ============ 联系方式卡片 ============ */
.ct-methods{ background:var(--bg); padding:78px 0 40px; }
.ct-head{ margin-bottom:52px; }

.ct-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:22px;
    max-width:1680px;
    margin:0 auto;
}
.ct-card{
    position:relative;
    display:flex; flex-direction:column; align-items:center; text-align:center;
    gap:8px;
    padding:38px 22px 32px;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    text-decoration:none;
    transition:.4s cubic-bezier(.2,.7,.3,1);
    overflow:hidden;
    cursor:pointer;
}
.ct-card::before{
    content:""; position:absolute; inset:0 0 auto 0; height:4px;
    background:var(--grad); transform:scaleX(0); transform-origin:left;
    transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.ct-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-md); border-color:transparent; }
.ct-card:hover::before{ transform:scaleX(1); }

.ct-ic{
    width:64px; height:64px; border-radius:18px;
    display:flex; align-items:center; justify-content:center;
    font-size:26px; color:#fff; margin-bottom:6px;
    box-shadow:0 12px 26px rgba(20,30,60,.16);
    transition:.4s cubic-bezier(.2,.7,.3,1);
}
.ct-card:hover .ct-ic{ transform:scale(1.08) rotate(-4deg); }
.ct-ic-phone{ background:linear-gradient(135deg,#4f7cff,#7c5cff); }
.ct-ic-mail{ background:linear-gradient(135deg,#ff8a5c,#ff5c7c); }
.ct-ic-wechat{ background:linear-gradient(135deg,#22c35e,#0fa855); }
.ct-ic-qq{ background:linear-gradient(135deg,#33b6f5,#2079e4); }
.ct-ic-chat{ background:linear-gradient(135deg,#7c5cff,#b06bff); }

.ct-card-label{ font-size:13.5px; color:var(--muted); letter-spacing:1px; }
.ct-card-value{ font-size:19px; font-weight:800; color:var(--ink); word-break:break-all; }
.ct-card-tip{ font-size:12.5px; color:var(--muted); margin-top:2px; }

/* ============ 公司信息 + 二维码 ============ */
.ct-info-sec{ background:var(--bg-soft); padding:84px 0; }
.ct-info-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
    max-width:1680px; margin:0 auto;
}
.about-eyebrow.dark{ display:inline-flex; align-items:center; gap:12px; font-size:13px; letter-spacing:.2em; color:var(--brand); text-transform:uppercase; margin-bottom:16px; }
.about-eyebrow.dark .eb-line{ width:34px; height:1px; background:var(--brand); opacity:.5; }
.ct-info .about-h2{ font-size:clamp(24px,2.6vw,36px); font-weight:800; color:var(--ink); line-height:1.32; margin:0 0 30px; }

.ct-info-list{ list-style:none; margin:0; padding:0; margin-top:30px; display:flex; flex-direction:column; gap:22px; }
.ct-info-list li{ display:flex; gap:16px; align-items:flex-start; }
.ct-li-ic{
    flex:0 0 46px; width:46px; height:46px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    background:var(--grad-soft); color:var(--brand); font-size:18px;
}
.ct-info-list strong{ display:block; font-size:16px; color:var(--ink); margin-bottom:4px; }
.ct-info-list p{ margin:0; font-size:14.5px; line-height:1.7; color:var(--text); }

.ct-qr-panel{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.ct-qr-card{
    background:var(--bg); border:1px solid var(--line); border-radius:18px;
    padding:22px 18px; text-align:center;
    box-shadow:var(--shadow-sm); transition:.35s cubic-bezier(.2,.7,.3,1);
}
.ct-qr-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.ct-qr-img{
    width:130px; height:130px; margin:0 auto 12px;
    border-radius:14px; overflow:hidden; background:var(--bg-soft-2);
    display:flex; align-items:center; justify-content:center;
}
.ct-qr-img img{ width:100%; height:100%; object-fit:cover; }
.ct-qr-name{ font-size:14px; font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:6px; }
.ct-qr-name i{ color:var(--brand); }

/* ============ 单页正文（后台内容） ============ */
.ct-article{ background:var(--bg); }
.ct-article .page-content{ max-width:900px; margin:0 auto; padding:64px 24px; font-size:16px; line-height:2; color:var(--text); }
.ct-article .page-content img{ max-width:100%; height:auto; border-radius:12px; }

/* ============ CTA ============ */
.ct-cta{
    position:relative; overflow:hidden;
    padding:96px 0;
    background:radial-gradient(120% 120% at 50% -20%, #16204a 0%, var(--ink) 55%, #070b16 100%);
    color:#fff; text-align:center;
}
.ct-cta-inner{ position:relative; z-index:2; max-width:1100px; margin:0 auto; }
.ct-cta-title{ font-size:clamp(26px,3.2vw,42px); font-weight:800; line-height:1.32; padding:.06em 0; margin:0 0 16px; background:linear-gradient(180deg,#fff,#cdd9ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ct-cta-sub{ font-size:16px; line-height:1.9; color:rgba(255,255,255,.8); margin:0 0 34px; }
.ct-cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ============ 响应式 ============ */
@media (max-width:1024px){
    .ct-grid{ grid-template-columns:repeat(3,1fr); }
    .ct-info-grid{ grid-template-columns:1fr; gap:44px; }
}
@media (max-width:640px){
    .ct-hero{ padding:120px 0 76px; }
    .ct-methods{ padding:56px 0 30px; }
    .ct-info-sec{ padding:60px 0; }
    .ct-grid{ grid-template-columns:1fr; }
    .ct-qr-panel{ grid-template-columns:1fr 1fr; gap:16px; }
    .ct-qr-img{ width:110px; height:110px; }
    .ct-cta{ padding:70px 0; }
}

/* ============================================================
   联系我们页 — 与「关于我们」新风格统一（黑白+品牌蓝 / 全屏 / 不限宽）
   ============================================================ */

/* Hero：跟随 abt-hero 全屏，去掉旧横幅 padding */
.ct-hero{ padding:0; min-height:100vh; }
.ct-hero .abt-hero__right{ min-height:380px; }

/* Hero 右侧「24h 在线」圆形 */
.ct-hero__circle{
    width:200px; height:200px; border-radius:50%;
    background:var(--grad); color:#fff;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; text-align:center;
    box-shadow:0 30px 60px rgba(47,107,255,.35);
    position:relative; z-index:2;
    animation:ctpulse 3.5s ease-in-out infinite;
}
.ct-hero__circle i{ font-size:44px; }
.ct-hero__circle span{ font-size:16px; font-weight:700; line-height:1.3; letter-spacing:.08em; }
@keyframes ctpulse{
    0%,100%{ box-shadow:0 30px 60px rgba(47,107,255,.35); }
    50%{ box-shadow:0 30px 70px rgba(47,107,255,.55); transform:translateY(-6px); }
}

/* 联系方式区块：浅灰底（与 hero/快捷导航白底区分，形成层次） */
.ct-methods{ padding:120px 0; background:var(--soft); }
.ct-methods__head{ max-width:none; margin:0 auto 56px; padding:0 5vw; }
.ct-methods__sub{ font-size:16px; color:var(--muted); margin:18px 0 0; }
.ct-grid{ max-width:none; padding:0 5vw; }
/* 浅灰块内卡片：白色底 + 阴影，与浅灰背景区分 */
.ct-methods .ct-card{ background:#fff; box-shadow:0 12px 30px rgba(20,30,60,.06); }
.ct-methods .ct-card:hover{ box-shadow:0 20px 50px rgba(20,30,60,.12); }

/* 公司信息 + 二维码：about 全宽风格（白底，与联系方式的浅灰交替） */
.ct-info-sec{ background:var(--bg); padding:120px 0; }
.ct-info-grid{ max-width:none; padding:0 5vw; gap:70px; }
.ct-info .abt-h2{ margin-top:22px; }
.ct-li-ic{ background:rgba(47,107,255,.08); }

/* CTA：跟随 abt-cta（about.css 已定义），微调文字颜色 */
.contact-page .abt-cta{ background:var(--ink); }
.contact-page .abt-cta__title{ color:#fff; }
.contact-page .abt-cta__sub{ color:rgba(255,255,255,.68); }

/* 响应式补充 */
@media (max-width:980px){
    .ct-hero__circle{ width:160px; height:160px; }
    .ct-hero__circle i{ font-size:34px; }
}
@media (max-width:520px){
    .ct-hero__circle{ width:140px; height:140px; }
}