:root {
  --hc-bg: #ffffff;
  --hc-surface: #ffffff;
  --hc-surface-soft: #f5f6f8;
  --hc-text: #111111;
  --hc-muted: #5f6672;
  --hc-line: #dde1e7;
  --hc-navy: #0b2f5b;
  --hc-navy-2: #123d73;
  --hc-navy-dark: #061f3d;
  --hc-gold: #f4c542;
  --hc-red: #d1122b;
  --hc-black: #0a0a0b;
  --hc-max: 1280px;
}

.hc-container {
  width: min(calc(100% - 40px), var(--hc-max));
  margin: 0 auto;
}

.hc-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid #e8ebef;
  box-shadow: 0 8px 28px rgba(25, 53, 87, .07);
  backdrop-filter: blur(16px);
  font-family: Inter, system-ui, sans-serif;
}

.hc-nav {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.hc-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  color: var(--hc-text);
  text-decoration: none;
}

.hc-brand-lockup {
  display: grid;
  width: fit-content;
  gap: 7px;
  align-items: start;
}

.hc-wordmark {
  width: 240px;
  flex: 0 0 auto;
  display: block;
  justify-self: center;
}

.hc-wordmark img {
  display: block;
  width: 100%;
  height: auto;
}

.hc-brand-name {
  display: block;
  width: 100%;
  padding-left: 0;
  color: #65778c;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .055em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.hc-nav-menu {
  display: flex;
  align-items: center;
  gap: 34px;
}

.hc-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.7vw, 42px);
  color: #193354;
  font-size: 17px;
  font-weight: 500;
}

.hc-nav-links a {
  color: inherit;
  text-decoration: none;
  transition: color .18s ease;
}

.hc-nav-links a:hover {
  color: #0789e8;
}

.hc-nav-mascot {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  align-self: flex-end;
  object-fit: contain;
  object-position: center bottom;
}

.hc-menu-toggle {
  display: none;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--hc-text);
  cursor: pointer;
}

.hc-footer {
  margin-top: 60px;
  padding: 34px 0 18px;
  background: var(--hc-black);
  color: rgba(255, 255, 255, .72);
  font-family: Inter, system-ui, sans-serif;
}

.hc-footer-top {
  display: grid;
  grid-template-columns: 1.1fr .9fr .9fr;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.hc-footer-title {
  margin-bottom: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hc-footer-copy {
  max-width: 42ch;
  color: rgba(255, 255, 255, .68);
  font-size: 14px;
  line-height: 1.7;
}

.hc-footer-links {
  display: grid;
  gap: 10px;
  font-size: 14px;
}

.hc-footer-links a {
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}

.hc-footer-links a:hover {
  color: #fff;
}

.hc-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 16px;
  color: rgba(255, 255, 255, .56);
  font-size: 13px;
  flex-wrap: wrap;
}

@media (max-width: 1160px) {
  .hc-footer-top {
    grid-template-columns: 1fr;
  }

  .hc-nav {
    gap: 18px;
  }

  .hc-nav-links {
    gap: 20px;
    font-size: 15px;
  }
}

@media (max-width: 820px) {
  .hc-container {
    width: min(calc(100% - 28px), var(--hc-max));
  }

  .hc-nav {
    min-height: 62px;
  }

  .hc-wordmark {
    width: 160px;
  }

  .hc-brand-name {
    font-size: 9px;
    letter-spacing: .035em;
  }

  .hc-nav-mascot {
    width: 42px;
    height: 46px;
    margin-left: auto;
    order: 2;
  }

  .hc-menu-toggle {
    display: block;
    order: 3;
  }

  .hc-nav-menu {
    position: absolute;
    top: 62px;
    left: 0;
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 20px;
    border-bottom: 1px solid var(--hc-line);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 16px 24px rgba(0, 0, 0, .08);
    backdrop-filter: blur(12px);
  }

  .hc-nav-menu.active {
    display: flex;
  }

  .hc-nav-links {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    font-size: 16px;
  }

  .hc-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

#header-placeholder{position:sticky;top:0;z-index:999;background:#fff}.hc-header{position:relative;top:auto;background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}


    :root { --bg: #ffffff; --surface: #ffffff; --surface-soft: #f5f6f8; --text: #111111; --muted: #5f6672; --line: #dde1e7; --line-strong: #cbd2db; --red: #d1122b; --black: #0a0a0b; --max: 1280px; --radius-xl: 28px; --radius-lg: 22px; --radius-md: 16px; --shadow: 0 16px 44px rgba(17, 17, 17, 0.06); }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, sans-serif; line-height: 1.45; }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    .container { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; }
   
    /* --- Hero 区块 (PC端) --- */
    .hero {
      position: relative;
      background: var(--black);
      color: white;
      padding: 0px 0;
      overflow: hidden;
    }
    .hero-box {
      position: relative;
      z-index: 1;
      width: 100%;
      min-height: 780px;
      border: 0;
      border-radius: 0;
      overflow: hidden;
      background-image: 
        linear-gradient(to top, rgba(10,10,11, 0.98) 0%, rgba(10,10,11, 0.75) 45%, rgba(10,10,11, 0) 80%),
        url('/optimized-images/team-photo-1536-8fa1ba130fec.webp');
      background-size: cover;
      background-position: center 15%; 
      background-repeat: no-repeat;
      box-shadow: none;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 18px;
    }
    .hero-main { max-width: 860px; padding-left: 30px; }
    .hero-box h1 {
      margin: 0; font-size: clamp(38px, 4.5vw, 68px); line-height: .98;
      letter-spacing: -.04em; font-weight: 900; max-width: 24ch;
      text-shadow: none;
    }

    .hero-panel-hz {
      margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
      background: rgba(10,10,11,.35); border-radius: var(--radius-lg);
      border: 0;
      backdrop-filter: blur(14px); padding: 20px 32px; width: 100%;
      box-shadow: none;
    }
    /* 将 panel-item 设置为 a 标签后的全局样式 */
    a.panel-item {
      display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.12);
      padding-right: 24px; text-decoration: none; cursor: pointer; transition: opacity 0.2s ease;
    }
    a.panel-item:hover { opacity: 0.85; }
    a.panel-item:last-child { border-right: none; padding-right: 0; }
    .pi-title { font-size: 18px; font-weight: 900; color: #ffffff; line-height: 1.2; letter-spacing: -.02em; }
    .pi-cn { margin-top: 4px; color: rgba(255,255,255,.65); font-size: 12px; line-height: 1.6; }
    .pi-link {
      margin-top: 14px;
      color: var(--red);
      font-size: 13px;
      font-weight: 800;
    }

    /* --- 全局通用组件 --- */
    .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 20px; border-radius: 999px; font-weight: 800; cursor: pointer; border: none; transition: .18s ease; }
    .btn-primary { background: var(--red); color: white; }
    .btn-primary:hover { background: #ad0f23; transform: translateY(-1px); }
    section { padding: 40px 0; }
    .section-head { display: grid; grid-template-columns: .74fr 1.26fr; gap: 28px; align-items: end; margin-bottom: 34px; }
    .section-kicker { color: var(--red); font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; }
    h2 { margin: 0; font-size: clamp(34px, 4vw, 58px); line-height: .98; letter-spacing: -.05em; font-weight: 900; max-width: 11ch; }
    .section-copy { color: #2f343c; font-size: 18px; line-height: 1.56; max-width: 66ch; }
    .section-copy-cn { margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.75; }

    .business-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
    .tool-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .case-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
    
    .service-card, .tool-card, .case-card, .calc-card, .calc-result, .placeholder-box, .contact-box {
      background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
      border-radius: var(--radius-lg); box-shadow: 0 10px 24px rgba(17,17,17,.08);
    }
    .service-card, .calc-card, .calc-result, .placeholder-box, .contact-box { padding: 26px; }
    .tool-card { padding: 22px; display: grid; align-content: start; gap: 10px; }
    
    .case-card { overflow: hidden; background: white; }
    .case-media { aspect-ratio: 1 / 1; background-size: cover; background-position: center; border-bottom: 1px solid var(--line); }
    .case-body { padding: 18px; }
    
    .tag { display: inline-flex; padding: 8px 10px; border-radius: 999px; background: rgba(209,18,43,.08); color: var(--red); font-size: 12px; font-weight: 900; text-transform: uppercase; margin-bottom: 18px;}
    h3, h4 { margin: 0; font-size: 29px; line-height: 1.06; letter-spacing: -.04em; font-weight: 900; }
    .service-intro, .box-copy, .case-body p, .tool-card p { margin-top: 12px; color: #3e4550; font-size: 15px; line-height: 1.58; }
    .cn { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.7; }
    
    .service-list { display: grid; gap: 12px; list-style: none; padding: 18px 0 0; margin: 18px 0 0; border-top: 1px solid var(--line); }
    .service-list li { position: relative; padding-left: 18px; }
    .service-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
    .item-en { color: #1f252d; font-size: 15px; font-weight: 700; }
    .item-cn { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }

    .soft-section { background: var(--surface-soft); }
    .tools-wrap { display: grid; grid-template-columns: .95fr 1.05fr; gap: 24px; }
    .tool-stack { display: flex; flex-direction: column; gap: 40px; }
    .tool-feature {
      padding: 30px;
      background: var(--black);
      color: white;
      border: 0;
      border-radius: var(--radius-xl);
      box-shadow: none;
      position: relative;
      overflow: hidden;
    }
    .tool-feature::after { content: ""; position: absolute; right: -70px; bottom: -70px; width: 220px; height: 220px; border-radius: 50%; background: rgba(209,18,43,.28); }
    .tool-feature > * { position: relative; z-index: 1; }
    .tool-feature h3 { color: #fff; }
    .mini {
      padding-bottom: 15px;
    }
    .tool-feature .cn { color: var(--muted); padding-bottom: 15px; }
    
    .calc-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 26px; }
    .calc-tab { min-height: 52px; padding: 0 24px; border-radius: 999px; background: white; border: 1px solid var(--line); color: var(--text); font-size: 14px; font-weight: 800; text-align: center; min-width: 220px; cursor:pointer;}
    .calc-tab.active { background: var(--red); border-color: var(--red); color: white; }
    .calc-panel { display: none; }
    .calc-panel.active { display: block; }
    .calc-layout { display: grid; grid-template-columns: 1fr 0.9fr; gap: 22px; }
    .field-row { display: grid; grid-template-columns: 1fr 220px; gap: 14px; align-items: end; margin-top: 14px;}
    .field-label { color: #13243a; font-size: 14px; font-weight: 700; }
    .calc-input { width: 100%; min-height: 72px; padding: 0 76px 0 28px; border: 1px solid var(--line-strong); border-radius: 24px; font-size: 22px; font-weight: 800; outline: none; }
    .input-wrap { position: relative; }
    .suffix { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 900; }
    
    .result-grid { display: grid; gap: 12px; margin-top: 18px; }
    .result-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 14px; background: var(--surface-soft); border: 1px solid var(--line); }

    .team-contact { display: grid; grid-template-columns: .92fr 1.08fr; gap: 24px; }
    .home-zh-title { padding-bottom: 15px; }
    .btn-soft { background: var(--surface-soft); border: 1px solid var(--line); color: var(--text); }
    .team-photo-frame { margin-top: 20px; width: 100%; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); }
    .contact-list { display: grid; gap: 14px; margin-top: 20px; }
    .contact-item { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
    .contact-item:first-child { border-top: 0; padding-top: 0; }
    .contact-label { color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; }
    .contact-value { font-size: 18px; font-weight: 800; }

    .footer { background: var(--black); color: rgba(255,255,255,.72); padding: 34px 0 18px; }
    .footer-top { display: grid; grid-template-columns: 1.1fr .9fr .9fr .9fr; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.10); }
    .footer-title { color: white; font-size: 14px; font-weight: 900; text-transform: uppercase; margin-bottom: 12px; }
    .footer-links { display: grid; gap: 10px; font-size: 14px; }
    .footer-bottom { display: flex; justify-content: space-between; padding-top: 16px; font-size: 13px; }

    /* =========================================
       移动端极致适配区域 (手机端核心修改都在这里)
       ========================================= */
    @media (max-width: 1160px) {
      .section-head, .tools-wrap, .team-contact, .calc-layout, .footer-top { grid-template-columns: 1fr; }
      .business-grid { grid-template-columns: 1fr; }
      .case-grid { grid-template-columns: repeat(2, 1fr); }
      h2 { max-width: 12ch; }
    }
    
    @media (max-width: 820px) {
      /* 1. 导航栏：启用汉堡菜单，极致省出顶部空间 */
      .nav { flex-direction: row; align-items: center; min-height: 64px; padding: 0; }
      .brand-sub { display: none; } 
      .menu-toggle { display: block; } 
      
      .nav-menu {
        display: none; position: absolute; top: 64px; left: 0; width: 100%;
        background: rgba(255,255,255,0.98); backdrop-filter: blur(12px);
        padding: 24px 20px; flex-direction: column; align-items: flex-start;
        gap: 20px; box-shadow: 0 16px 24px rgba(0,0,0,0.08); border-bottom: 1px solid var(--line);
      }
      .nav-menu.active { display: flex; }
      .nav-links { flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; font-size: 16px; }
      .nav-cta { width: 100%; }

      /* 2. Hero头图：完整展示三人，从顶端开始等比自适应 */
      .hero-box { 
        padding: 20px; 
        padding-top: 60vw; /* 把下方的文字往底部推，避免挡住人脸 */
        min-height: auto;
        justify-content: flex-start; 
        border-radius: 0; 
        background-color: #050505; /* 图片下方填充纯黑 */
        background-size: 100% auto; /* 关键：强制图片100%宽度，高度自适应，绝不裁切 */
        background-position: center top; /* 钉在最顶部 */
        border-radius: 0;
        /* 渐变遮罩：从顶部透明，到 40vw 时渐渐变成纯黑，自然融合图片底边 */
        background-image: 
          linear-gradient(to bottom, rgba(10,10,11, 0) 0%, rgba(10,10,11, 0) 40vw, rgba(10,10,11, 1) 60vw),
          url('/optimized-images/team-photo-1536-8fa1ba130fec.webp');
      }
      .hero-main { padding-left: 0; position: relative; z-index: 2;}
      .hero-box h1 { font-size: 38px; line-height: 1.05; margin-bottom: 12px; }

      /* 3. 三大类卡片：扩大字体，整个卡片可点击 */
      .hero-panel-hz {
        grid-template-columns: 1fr;
        padding: 0 0 30px 0; margin-top: 20px;
        background: transparent; border: none; backdrop-filter: none; gap: 12px;
        position: relative; z-index: 2;
      }
      a.panel-item {
        background: rgba(255,255,255,0.08); /* 独立半透明底色 */
        border: 1px solid rgba(255,255,255,0.15) !important; /* 明显的边框 */
        border-radius: 16px;
        padding: 20px 24px;
        margin-bottom: 0;
        transition: transform 0.1s ease, background 0.2s ease;
        -webkit-tap-highlight-color: transparent; /* 去除手机端默认灰色点击框 */
      }
      /* 按下时的微动效，手感像原生App */
      a.panel-item:active { background: rgba(255,255,255,0.12); transform: scale(0.98); }
      
      .pi-title { font-size: 24px; } /* 字体加大，更醒目 */
      .pi-cn { font-size: 14px; margin-top: 6px; color: rgba(255,255,255,0.85); }
      .pi-link { font-size: 16px; margin-top: 12px; } /* 箭头放大 */
      .hero-panel-hz .pi-title { color: #fff; }

      /* 其他基础适配 */
      .tool-grid, .case-grid { grid-template-columns: 1fr; }
      .contact-item, .field-row { grid-template-columns: 1fr; gap: 8px; }
      section { padding: 66px 0; }
      h2 { max-width: none; }
      .calc-tab { min-width: 100%; }
      .footer-bottom { flex-direction: column; align-items: flex-start; }
    }
    
  /* ================= 红黑主题变体卡片 ================= */
    .tool-feature.theme-sand {
      background: #faf9f6;
      border: 1px solid #e8e4dc;
      box-shadow: 0 8px 30px rgba(139, 126, 102, 0.05);
    }
    
    .tool-feature.theme-sand .mini {
      color: #7b6a58;
      background: #f0ebe1;
    }
    
    .tool-feature.theme-sand h3 {
      color: #2c2825;
    }
    
    .tool-feature.theme-sand .btn-primary {
      background: #5c5042;
      color: #ffffff;
    }
    
    .tool-feature.theme-sand .btn-primary:hover {
      background: #3f362d;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(92, 80, 66, 0.2);
    }
    
  

    .seo-overview{padding:36px 0 28px}
    .seo-overview h2,#cases h2{max-width:none;font-size:clamp(26px,2.5vw,36px);line-height:1.35;letter-spacing:0;font-weight:800}
    .seo-brand-name{white-space:nowrap}
    .seo-overview .section-copy{max-width:none;margin:16px 0 0;font-size:17px;line-height:1.8}
    .seo-overview-note{margin:12px 0 0;color:#5f6672;font-size:16px;line-height:1.75}
    .seo-overview-actions{display:flex;flex-wrap:wrap;gap:8px 24px;margin:16px 0 0}
    .seo-overview-actions a,.case-service-link{display:inline-flex;align-items:center;min-height:40px;color:#d1122b;font-size:15px;font-weight:700;line-height:1.5}
    .seo-overview-actions a:hover,.case-service-link:hover{text-decoration:underline}
    #cases{padding:28px 0 40px}
    #cases .section-head{grid-template-columns:minmax(0,1fr);gap:12px;align-items:start;margin-bottom:24px}
    #cases .section-copy{max-width:none;font-size:17px;line-height:1.75}
    #cases .case-body h4{font-size:24px;line-height:1.35;letter-spacing:0;font-weight:800}
    .case-label-en{display:block;margin-top:5px;color:#5f6672;font-size:13px;font-weight:600;letter-spacing:0}
    .case-service-link{margin-top:8px}
    #business .service-card h3{font-size:24px;line-height:1.4;letter-spacing:0}
    @media(max-width:820px){.seo-overview{padding:28px 0 20px}.seo-overview .section-copy,#cases .section-copy{font-size:16px}#cases{padding:24px 0 32px}#business .service-card h3{font-size:22px}}
    
.site-language-controls{position:fixed;right:16px;bottom:max(18px,env(safe-area-inset-bottom));z-index:1200;display:flex;gap:4px;padding:4px;border:1px solid #cbd5df;border-radius:12px;background:#fff;box-shadow:0 3px 12px #0002;font:600 14px system-ui,sans-serif}.site-language-controls a{display:flex;align-items:center;justify-content:center;min-height:36px;padding:0 12px;border-radius:8px;color:#143754;text-decoration:none}.site-language-controls a[aria-current="page"]{background:#0b2f5b;color:#fff}.site-language-controls a:focus-visible{outline:3px solid #1683db;outline-offset:2px}.lang-switch-btn{display:none!important}
@media(max-width:820px){.hero-box{background-image:linear-gradient(to bottom,rgba(10,10,11,0) 0%,rgba(10,10,11,0) 40vw,rgba(10,10,11,1) 60vw),url("/optimized-images/team-photo-768-620208b2ef8b.webp")}}.case-media img{width:100%;height:100%;object-fit:cover;display:block}
.service-main{max-width:1080px;margin:auto;padding:40px 24px 64px;color:#203c34;line-height:1.8}.service-main h1{font-size:clamp(28px,4vw,42px);line-height:1.25;margin:18px 0}.service-main h2{font-size:25px;line-height:1.35;margin:32px 0 12px}.service-main p{max-width:80ch;margin:14px 0}.service-main a{color:#245847;text-decoration:underline;text-underline-offset:3px}.service-main .service-cta{display:inline-flex;align-items:center;min-height:44px;background:#245847;color:#fff;padding:8px 20px;border-radius:10px;text-decoration:none}.service-faq details{border-bottom:1px solid #d6dfd6;padding:16px 0}.service-faq summary{font-weight:650;cursor:pointer}.seo-case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.seo-case-card{display:block;border:1px solid #dde1e7;border-radius:16px;overflow:hidden;text-decoration:none!important}.seo-case-card img{width:100%;aspect-ratio:4/3;object-fit:cover}.seo-case-card div{padding:14px}.seo-case-card h3{font-size:18px;line-height:1.4;margin:0}.seo-case-card p{font-size:14px;margin:8px 0 0;color:#5f6672}@media(max-width:700px){.service-main{padding:24px 18px 48px}.seo-case-grid{grid-template-columns:1fr}}
html[lang^="en"] .lang-zh{display:none!important}html[lang^="zh"] .lang-en{display:none!important}

.service-main h1 small{display:block;font-size:.55em;font-weight:500;margin-top:12px}
/* Service copy uses the shared type scale without home headline width limits. */
.service-main h1,.service-main h2{max-width:none;letter-spacing:0}
.service-main section{padding:0}