/* SEO/GEO readable baseline: system CJK fonts, 16px body, ~1200px shell, ~720px prose */

:root {

  --seo-font: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", system-ui, sans-serif;

  --seo-text: 16px;

  --seo-lh: 1.7;

  --seo-container: 1200px;

  --seo-prose: var(--seo-container, 1200px);

}



/* ChipCore — 三色：海军蓝 / 纸色 / 墨色 */





:root {


  --navy: #123454;


  --paper: #f6f3eb;


  --ink: #1a2332;


  --muted: rgba(26, 35, 50, 0.62);


  --line: rgba(18, 52, 84, 0.12);


  --card: #fffcf7;


  --max: var(--seo-container, 1200px);


  --header-h: 56px;


  --radius: 8px;


}





*,


*::before,


*::after { box-sizing: border-box; }





html { scroll-behavior: smooth; }





body {


  margin: 0;


  min-height: 100vh;


  display: flex;


  flex-direction: column;


  color: var(--ink);


  background: var(--paper);


  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;


  font-size: 16px;


  line-height: 1.7;


  -webkit-font-smoothing: antialiased;


  overflow-x: hidden;


}





img { max-width: 100%; height: auto; display: block; }


a { color: inherit; text-decoration: none; }


button, input, select, textarea { font: inherit; }


h1, h2, h3, h4, p { margin: 0; }


ul, ol { margin: 0; padding: 0; }





.container {


  width: calc(100% - 400px);


  max-width: none;


  margin-inline: auto;


}





.skip-link {


  position: absolute;


  left: 12px;


  top: -40px;


  z-index: 100;


  background: var(--navy);


  color: var(--paper);


  padding: 8px 12px;


}


.skip-link:focus { top: 12px; }





.section { padding: 64px 0; }


.section-alt { background: rgba(18, 52, 84, 0.04); }





.section-head { max-width: 640px; margin-bottom: 28px; }


.section-head.center { margin-inline: auto; text-align: center; }





.eyebrow {


  display: inline-block;


  margin-bottom: 8px;


  color: var(--navy);


  font-size: 13px;


  font-weight: 600;


  letter-spacing: 0.08em;


}





.section-head h2,


.page-hero h1 {


  font-size: 30px;


  line-height: 1.32;


  letter-spacing: -0.02em;


  font-weight: 600;


}





.lead {


  margin-top: 10px;


  color: var(--muted);


  font-size: 16px;


}





.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }


.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }


.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }


.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }





.btn {


  display: inline-flex;


  align-items: center;


  justify-content: center;


  min-height: 40px;


  padding: 0 16px;


  border-radius: 6px;


  border: 1px solid transparent;


  font-size: 14px;


  font-weight: 600;


  cursor: pointer;


  transition: opacity .15s ease, background .15s ease;


}


.btn:hover { opacity: 0.88; }





.btn-primary {


  background: var(--navy);


  color: var(--paper);


}





.btn-ghost,


.hero .btn-ghost {


  background: transparent;


  color: var(--paper);


  border-color: rgba(246, 243, 235, 0.35);


}





.btn-outline {


  background: transparent;


  color: var(--navy);


  border-color: var(--navy);


}





.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }





.hero .btn-row { margin-top: 8px; gap: 36px; }


.hero .btn-row .btn-primary {


  background: var(--paper);


  color: var(--navy);


}





/* ---------- 顶栏 ---------- */


.site-header {


  position: sticky;


  top: 0;


  z-index: 50;


  height: var(--header-h);


  background: var(--paper);


  border-bottom: 1px solid var(--line);


}





main { flex: 1 0 auto; }





.site-header.is-scrolled {


  box-shadow: 0 4px 16px rgba(18, 52, 84, 0.06);


}





.nav-wrap {


  height: var(--header-h);


  display: grid;


  grid-template-columns: 1fr auto 1fr;


  align-items: center;


  gap: 16px;


}





.logo {


  display: flex;


  align-items: center;


  gap: 8px;


  color: var(--navy);


  flex-shrink: 0;


  justify-self: start;


}





.logo-mark {


  width: 34px;


  height: 34px;


}





.logo-text {


  font-size: 19px;


  font-weight: 600;


  letter-spacing: 0.02em;


}





.logo-text span {


  color: var(--muted);


  font-weight: 500;


  font-size: 14px;


  margin-left: 6px;


}





.nav {


  display: flex;


  align-items: center;


  justify-content: center;


  gap: 28px;


  flex: none;


}





.nav a {


  padding: 6px 2px;


  color: var(--ink);


  font-size: 14px;


  font-weight: 500;


  border-radius: 4px;


  white-space: nowrap;


}





.nav a:hover,


.nav a.is-active {


  color: var(--navy);


  background: rgba(18, 52, 84, 0.06);


}





.nav-cta {


  grid-column: 3;


  justify-self: end;


  min-height: 34px;


  padding: 0 14px;


  font-size: 13px;


}


.nav-cta-mobile { display: none !important; }





.menu-toggle {


  display: none;


  grid-column: 3;


  justify-self: end;


  width: 36px;


  height: 36px;


  border: 1px solid var(--line);


  background: transparent;


  color: var(--navy);


  border-radius: 6px;


}





/* ---------- Hero ---------- */


.page-hero,


.site-footer {


  background: var(--navy);


  color: var(--paper);


}





.hero {


  padding: 56px 0 64px;


  background: #00111f;


  color: var(--paper);


}





.hero-grid {


  display: grid;


  grid-template-columns: minmax(0, 520px) minmax(0, 440px);


  gap: 228px;


  justify-content: center;


  align-items: center;


}





.hero-grid > div {


  letter-spacing: 0.06em;


}





.hero .eyebrow {


  color: rgba(246, 243, 235, 0.72);


  font-size: 13px;


  letter-spacing: 0.12em;


}





.hero h1 {


  font-size: 36px;


  line-height: 1.3;


  letter-spacing: 0.04em;


  font-weight: 600;


}





.hero h1 span {


  display: block;


  margin-top: 8px;


}





.hero .sub,


.page-hero .sub {


  margin: 14px 0 22px;


  color: rgba(246, 243, 235, 0.72);


  font-size: 16px;


  max-width: 580px;


}





.hero-stats {


  display: flex;


  gap: 40px;


  margin-top: 28px;


  padding-top: 20px;


  border-top: 1px solid rgba(246, 243, 235, 0.12);


}





.hero-stats b {


  display: block;


  font-size: 22px;


  letter-spacing: 0.04em;


}





.hero-stats .js-count { color: inherit; font-size: inherit; font-weight: inherit; }





.hero-stats .stat-label {


  color: rgba(246, 243, 235, 0.58);


  font-size: 12px;


}





.hero-visual {


  width: min(100%, 432px);


  aspect-ratio: 1;


  justify-self: end;


  border-radius: 50%;


  overflow: hidden;


  border: 1px solid rgba(246, 243, 235, 0.14);


  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);


}


.hero-visual img {


  width: 100%;


  height: 100%;


  object-fit: cover;


  display: block;


}


.panel {


  background: rgba(246, 243, 235, 0.06);


  border: 1px solid rgba(246, 243, 235, 0.14);


  border-radius: 10px;


  padding: 20px;


}





.panel-title {


  display: flex;


  justify-content: space-between;


  align-items: center;


  margin-bottom: 14px;


  color: rgba(246, 243, 235, 0.64);


  font-size: 13px;


}





.kv {


  display: grid;


  grid-template-columns: 1fr auto;


  gap: 8px 16px;


  font-size: 14px;


}





.kv dt { color: rgba(246, 243, 235, 0.55); }


.kv dd { margin: 0; color: var(--paper); font-weight: 600; text-align: right; }





.bar {


  height: 6px;


  background: rgba(246, 243, 235, 0.1);


  border-radius: 99px;


  overflow: hidden;


  margin: 14px 0 8px;


}





.bar > i {


  display: block;


  height: 100%;


  background: var(--paper);


}





.panel .muted { color: rgba(246, 243, 235, 0.5); }





/* ---------- 卡片 ---------- */


.card,


.pain-card,


.faq-list details,


.table-wrap {


  background: var(--card);


  border: 1px solid var(--line);


  border-radius: var(--radius);


}





.card { padding: 22px; }


.card h3 { font-size: 18px; margin: 10px 0 8px; font-weight: 600; }


.card p, .muted { color: var(--muted); font-size: 15px; }





.case-card { padding: 0; overflow: hidden; }


.case-shot {


  display: block;


  width: 100%;


  aspect-ratio: 16 / 8;


  object-fit: cover;


  object-position: top center;


  background: #fff;


  border-bottom: 1px solid var(--line);


}


.case-card .case-body { padding: 16px 20px 20px; }


.case-card h3 { margin-top: 6px; }





.card-link {


  display: inline-block;


  margin-top: 12px;


  color: var(--navy);


  font-size: 14px;


  font-weight: 600;


}





.icon-box {


  width: 36px;


  height: 36px;


  border-radius: 8px;


  background: rgba(18, 52, 84, 0.08);


  color: var(--navy);


  display: grid;


  place-items: center;


  flex: 0 0 36px;


}





.card-title {


  display: flex;


  align-items: center;


  gap: 10px;


  margin-bottom: 8px;


}





.card-title h3 { margin: 0; }





.team-grid {


  display: grid;


  grid-template-columns: repeat(3, 1fr);


  gap: 18px;


  margin-top: 24px;


}





.team-card { text-align: center; }


.team-card h3 { margin: 8px 0 2px; }





.team-role {


  display: block;


  margin-bottom: 8px;


  color: var(--navy);


  font-size: 13px;


  font-weight: 600;


}





.team-avatar {


  width: 112px;


  height: 112px;


  margin: 0 auto;


  border-radius: 50%;


  overflow: hidden;


  background: rgba(18, 52, 84, 0.06);


  border: 1px solid var(--line);


}





.team-avatar img {


  width: 100%;


  height: 100%;


  object-fit: cover;


  object-position: center top;


}





.pain-card { padding: 18px 16px; height: 100%; }


.pain-card strong { display: block; margin: 0 0 4px; font-size: 15px; }





.table-wrap { overflow-x: auto; }





table.data {


  width: 100%;


  border-collapse: collapse;


  font-size: 14px;


}





table.data th,


table.data td {


  padding: 11px 14px;


  text-align: left;


  border-bottom: 1px solid var(--line);


  vertical-align: top;


}





table.data th {


  background: rgba(18, 52, 84, 0.04);


  color: var(--navy);


  font-weight: 600;


}





table.data tr:last-child td { border-bottom: 0; }


table.data a { color: var(--navy); font-weight: 600; }





.faq-list { display: grid; gap: 8px; }


.faq-list details { padding: 0 16px; }





.faq-list summary {


  cursor: pointer;


  list-style: none;


  padding: 14px 0;


  font-weight: 600;


}


.faq-list summary::-webkit-details-marker { display: none; }


.faq-list details p {


  padding-bottom: 14px;


  color: var(--muted);


  font-size: 14px;


}





.form { display: grid; gap: 12px; }


.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }





label.field {


  display: grid;


  gap: 6px;


  font-size: 13px;


  color: var(--ink);


  font-weight: 600;


}





.cta-band .field { color: var(--ink); }





.field input,


.field select,


.field textarea {


  width: 100%;


  border: 1px solid var(--line);


  border-radius: 6px;


  padding: 9px 12px;


  background: #fff;


  color: var(--ink);


}





.field textarea { min-height: 100px; resize: vertical; }





.form-note {


  display: none;


  padding: 10px 12px;


  border-radius: 6px;


  background: rgba(246, 243, 235, 0.12);


  color: var(--paper);


  font-size: 13px;


}


.form-note.show { display: block; }


.card .form-note {


  background: rgba(18, 52, 84, 0.06);


  color: var(--navy);


}





.contact-list { margin: 0 0 16px; padding: 0; }


.contact-list li { list-style: none; margin: 8px 0; color: var(--ink); }


.contact-list a { color: var(--navy); }





.wechat-qr {


  display: block;


  width: 80px;


  height: 80px;


  object-fit: contain;


  background: #fff;


  padding: 4px;


  border-radius: 4px;


}





.contact-layout {


  display: grid;


  grid-template-columns: minmax(200px, 260px) minmax(0, 640px);


  justify-content: start;


  gap: 88px;


  align-items: start;


}





.cta-band {


  padding: 56px 0;


  background: var(--paper);


  color: var(--ink);


}


.cta-grid {


  display: grid;


  grid-template-columns: 1fr 1fr;


  gap: 36px;


  align-items: start;


}


.cta-band .lead { color: var(--muted); }


.cta-band a { color: var(--navy); }


.cta-band .form.card {


  background: #fff;


  border-color: var(--navy);


}


.cta-band .form-note {


  background: rgba(18, 52, 84, 0.06);


  color: var(--navy);


}





/* ---------- 页脚：贴底，全站同一结构 ---------- */


.site-footer {


  margin-top: auto;


  padding: 40px 0 20px;


  font-size: 13px;


  color: rgba(246, 243, 235, 0.62);


}





.footer-grid {


  display: grid;


  grid-template-columns: 1.2fr 1fr 1fr 1.1fr auto;


  gap: 28px;


  padding-bottom: 28px;


  border-bottom: 1px solid rgba(246, 243, 235, 0.12);


}





.footer-grid > div:nth-child(2),


.footer-grid > div:nth-child(3) {


  transform: translateX(2em);


}





.footer-qr {


  justify-self: end;


  align-self: start;


}





.site-footer h3 {


  color: var(--paper);


  font-size: 14px;


  margin-bottom: 10px;


}





.site-footer a { color: rgba(246, 243, 235, 0.62); }


.site-footer a:hover { color: var(--paper); }


.site-footer li { list-style: none; margin: 6px 0; }





.copy {


  padding-top: 16px;


  font-size: 12px;


  text-align: center;


}


.copy a {


  color: rgba(246, 243, 235, 0.86);


  text-decoration: underline;


  text-underline-offset: 2px;


}





/* ---------- 内页：与首页同一版心 ---------- */


.page-hero { padding: 28px 0 32px; }


.page-hero .sub { margin-bottom: 0; }





.breadcrumb {


  display: flex;


  flex-wrap: wrap;


  gap: 8px;


  color: rgba(246, 243, 235, 0.55);


  font-size: 12px;


  letter-spacing: 0.04em;


  margin-bottom: 14px;


}


.breadcrumb a:hover { color: var(--paper); }


.breadcrumb span { opacity: 0.7; }





.page-hero h1 { font-size: 32px; font-weight: 600; }





.prose { max-width: none; }


.prose h2 { margin: 28px 0 12px; font-size: 22px; font-weight: 600; }


.prose h3 { margin: 22px 0 8px; font-size: 18px; font-weight: 600; }


.prose p,


.prose li { color: var(--ink); margin-bottom: 12px; font-size: 16px; line-height: 1.8; }


.prose .muted { color: var(--muted); }


.prose ul, .prose ol { padding-left: 20px; }


.prose li { margin-bottom: 6px; }


.prose a { color: var(--navy); font-weight: 600; }


.prose a.btn-primary,


.cta-band a.btn-primary,


.nav a.btn-primary,


a.btn-primary,


button.btn-primary {


  color: var(--paper);


}





.article-meta {


  color: rgba(246, 243, 235, 0.55);


  font-size: 13px;


  margin-top: 8px;


}





.steps { display: grid; gap: 10px; margin: 14px 0 20px; }


.step {


  display: grid;


  grid-template-columns: 32px 1fr;


  gap: 12px;


  align-items: start;


}


.step i {


  width: 32px;


  height: 32px;


  border-radius: 50%;


  background: var(--navy);


  color: var(--paper);


  display: grid;


  place-items: center;


  font-style: normal;


  font-size: 13px;


  font-weight: 700;


}





.empty-page {


  flex: 1;


  display: grid;


  place-items: center;


  text-align: center;


  padding: 72px 20px;


}


.empty-page h1 { font-size: 32px; margin-bottom: 10px; }





/* ---------- 响应式 ---------- */


@media (max-width: 1100px) {


  .nav { gap: 18px; }


  .nav a { font-size: 13px; }


  .logo-text span { display: none; }


}





@media (max-width: 980px) {


  .hero-grid,


  .cta-grid,


  .contact-layout,


  .grid-2 { grid-template-columns: 1fr; }


  .hero-visual { justify-self: center; }


  .grid-3,


  .grid-4,


  .grid-5,


  .team-grid { grid-template-columns: 1fr 1fr; }


  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }


  .footer-grid > div:nth-child(2),


  .footer-grid > div:nth-child(3) { transform: none; }


  .footer-qr { justify-self: start; }


  .hero h1 { font-size: 28px; }


  .section { padding: 48px 0; }


}





@media (max-width: 1300px) {


  .nav-wrap {


    display: flex;


    justify-content: space-between;


  }


  .menu-toggle { display: grid; place-items: center; }


  .nav-cta { display: none; }


  .nav {


    display: none;


    flex: none;


  }


  .nav.is-open {


    display: flex;


    flex-direction: column;


    align-items: stretch;


    gap: 0;


    position: absolute;


    left: 0;


    right: 0;


    top: var(--header-h);


    background: var(--paper);


    padding: 8px 16px 16px;


    border-bottom: 1px solid var(--line);


    box-shadow: 0 12px 24px rgba(18, 52, 84, 0.08);


  }


  .nav.is-open a { font-size: 15px; padding: 10px 8px; }


  .nav.is-open .nav-cta-mobile {


    display: inline-flex !important;


    margin-top: 8px;


    justify-content: center;


  }


}





@media (max-width: 640px) {


  .container { width: min(100% - 24px, var(--max)); }


  .grid-3,


  .grid-4,


  .grid-5,


  .team-grid,


  .form-row,


  .footer-grid { grid-template-columns: 1fr; }


  .hero { padding: 36px 0 40px; }


  .hero-stats { flex-direction: column; gap: 12px; }


  .section-head h2,


  .page-hero h1 { font-size: 24px; }


  .hero h1 { font-size: 26px; }


  .prose h2 { font-size: 20px; }


  .btn-row { width: 100%; }


  .btn-row .btn { flex: 1; min-width: 140px; }


}




.seo-prose, article.prose, .article { max-width: none; }

.prose img,
.article-cover {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}