.site-header { position: sticky; z-index: 30; top: 0; border-bottom: 1px solid rgba(217, 225, 235, .9); background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); }
.header-inner { min-height: 82px; display: flex; align-items: center; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; white-space: nowrap; }
.brand-logo { width: 108px; height: auto; }
.brand span { color: var(--color-muted); font-size: .78rem; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: .15rem; }
.site-nav a { min-height: var(--touch-target); display: inline-flex; align-items: center; padding: .55rem .8rem; color: var(--color-muted); font-size: .92rem; font-weight: 650; text-decoration: none; border-radius: 8px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-blue); background: var(--color-soft-blue); }
.header-action { min-height: var(--touch-target); display: inline-flex; align-items: center; justify-content: center; padding: .62rem 1rem; color: var(--color-white); background: var(--color-navy); border-radius: var(--radius-control); font-size: .9rem; font-weight: 750; text-decoration: none; }
.language-future { color: var(--color-muted); font-size: .78rem; opacity: .52; cursor: not-allowed; }
.language-switch { min-width: var(--touch-target); min-height: var(--touch-target); display: inline-flex; align-items: center; justify-content: center; padding: 0 .7rem; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-navy); font-size: .82rem; font-weight: 700; white-space: nowrap; }
.language-switch:hover { border-color: var(--color-blue); color: var(--color-blue); }
.menu-toggle { display: none; width: 56px; height: var(--touch-target); margin-left: auto; align-items: center; justify-content: center; color: var(--color-navy); background: transparent; border: 1px solid var(--color-line); border-radius: 9px; font-size: .8rem; white-space: nowrap; }
.button-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
.button { min-height: var(--touch-target); display: inline-flex; align-items: center; justify-content: center; padding: .75rem 1.15rem; border: 1px solid var(--color-navy); border-radius: var(--radius-control); font-weight: 760; text-decoration: none; }
.button-primary { color: var(--color-white); background: var(--color-navy); }
.button-secondary { color: var(--color-navy); background: transparent; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.card { min-width: 0; padding: 1.4rem; border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); }
.card h3 ~ p:not(.product-label) { margin-top: .75rem; color: var(--color-muted); }
.product-label { margin-top: .35rem; color: var(--color-blue); font-size: .78rem; font-weight: 760; letter-spacing: .035em; }
.card-link { display: inline-flex; margin-top: 1rem; color: var(--color-blue); font-weight: 750; text-decoration: none; }
.insight-grid, .lab-grid { align-items: stretch; }
.insight-card, .lab-card { display: flex; flex-direction: column; }
.insight-card .card-link, .lab-card .card-link { margin-top: auto; padding-top: 1rem; }
.insight-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; color: var(--color-muted); font-size: .78rem; font-weight: 700; }
.card-source { margin-top: .55rem !important; min-height: 0 !important; color: var(--color-muted); font-size: .78rem; }
.lab-card-media { margin: -1.4rem -1.4rem 1.25rem; overflow: hidden; border-bottom: 1px solid var(--color-line); border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--color-soft-blue); }
.lab-card-media img { width: 100%; height: auto; object-fit: contain; }
.lab-evidence { min-height: 0 !important; padding-top: .85rem; font-size: .86rem; }
.asset-slot { position: relative; margin: 0; overflow: hidden; display: grid; align-content: end; min-height: 280px; padding: 1.25rem; color: var(--color-ink); border: 1px dashed #9EACBD; border-radius: var(--radius-card); background: linear-gradient(145deg, #EEF2F7, #FFFFFF 60%, #E7EEF7); }
.asset-slot::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 49.8%, rgba(11, 27, 53, .07) 50%, transparent 50.2%), linear-gradient(transparent 49.8%, rgba(11, 27, 53, .07) 50%, transparent 50.2%); }
.asset-slot-meta { position: relative; z-index: 1; padding: 1rem; border: 1px solid rgba(158, 172, 189, .8); border-radius: 12px; background: rgba(255, 255, 255, .9); }
.asset-slot-label { display: inline-flex; margin-bottom: .5rem; padding: .2rem .55rem; color: var(--color-white); background: var(--color-navy); border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; }
.asset-slot dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .65rem; margin: 0; font-size: .78rem; line-height: 1.45; }
.asset-slot dt { color: var(--color-muted); font-weight: 750; }
.asset-slot dd { margin: 0; }
.card .asset-slot { min-height: 220px; margin-bottom: 1.2rem; }
.visual-asset { position: relative; min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-white); box-shadow: var(--shadow-card); }
.visual-asset img { display: block; width: 100%; height: auto; }
.visual-asset--photo img { aspect-ratio: var(--asset-ratio); object-fit: cover; object-position: var(--asset-position); }
.visual-asset--diagram { padding: clamp(.7rem, 2vw, 1.1rem); background: linear-gradient(145deg, #f8fbff, #fff); }
.visual-asset--diagram img { object-fit: contain; }
.diagram-zoom { display: block; border-radius: 12px; text-decoration: none; }
.visual-caption { margin-top: .55rem; color: var(--color-muted); font-size: .76rem; text-align: right; }
.card .visual-asset { margin: -1.4rem -1.4rem 1.25rem; border-width: 0 0 1px; border-radius: var(--radius-card) var(--radius-card) 0 0; box-shadow: none; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-line); }
.step { padding: 1.5rem; background: var(--color-white); }
.step-number { display: block; margin-bottom: 1.25rem; color: var(--color-teal); font-weight: 850; }
.step p:not(.product-label) { margin-top: .6rem; color: var(--color-muted); }
.timeline { display: grid; gap: 1rem; }
.timeline-item { display: grid; grid-template-columns: 90px 1fr; gap: 1.25rem; padding: 1.3rem; border-left: 3px solid var(--color-blue); background: var(--color-white); }
.timeline-index { color: var(--color-blue); font-weight: 850; }
.timeline-item p { margin-top: .45rem; color: var(--color-muted); }
.value-chain { display: flex; flex-wrap: wrap; gap: .75rem; padding: 1.5rem; border-radius: var(--radius-card); background: var(--color-navy); }
.value-node { flex: 1 1 130px; display: flex; align-items: center; justify-content: center; min-height: 70px; padding: .75rem; color: var(--color-white); border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px; text-align: center; font-weight: 750; }
.split-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.bullet-list { margin: 1.5rem 0 0; padding-left: 1.2rem; color: var(--color-muted); }
.callout { padding: clamp(2rem, 5vw, 3.5rem); color: var(--color-white); border-radius: var(--radius-card); background: var(--color-navy); }
.callout h2, .callout .eyebrow { color: var(--color-white); }
.callout p { max-width: var(--text-measure); margin-top: 1rem; color: #C8D4E4; }
.callout .button { color: var(--color-navy); border-color: var(--color-white); background: var(--color-white); }
.callout .button-secondary { color: var(--color-white); background: transparent; }
.site-footer { padding-block: 3rem; color: #C8D4E4; background: var(--color-navy); }
.footer-grid { display: grid; grid-template-areas: "brand nav contact wechat"; grid-template-columns: minmax(220px, 1.25fr) minmax(130px, .7fr) minmax(230px, 1fr) minmax(150px, .7fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.footer-brand { grid-area: brand; }
.footer-links { grid-area: nav; }
.footer-contact { grid-area: contact; }
.footer-wechat { grid-area: wechat; }
.footer-logo-frame { width: 144px; display: inline-flex; padding: .45rem; border-radius: 12px; background: var(--color-white); }
.footer-logo { width: 100%; height: auto; }
.footer-grid p { max-width: 430px; margin-top: .7rem; }
.footer-heading { margin-top: 0 !important; color: var(--color-white); font-size: .82rem; font-weight: 800; letter-spacing: .08em; }
.footer-method { color: #9FB2CA; font-size: .86rem; }
.footer-links { display: grid; align-content: start; gap: .5rem; }
.footer-links a { color: #D8E3F0; text-decoration: none; }
.footer-contact a { color: #D8E3F0; text-decoration: none; }
.footer-wechat .wechat-qr { width: 120px; height: auto; margin-top: .75rem; padding: 5px; border-radius: 8px; background: var(--color-white); }
.footer-wechat p { font-size: .86rem; }
.footer-wechat .footer-scan { margin-top: .1rem; color: #9FB2CA; font-size: .76rem; }
.footer-note { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .8rem; }
@media (max-width: 1500px) {
  .brand span { display: none; }
}
@media (max-width: 1024px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-areas: "brand contact" "wechat nav"; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1160px) {
  .menu-toggle { display: inline-flex; }
  .site-nav { position: absolute; inset: 82px 0 auto; display: none; padding: .75rem 20px 1rem; border-bottom: 1px solid var(--color-line); background: var(--color-white); box-shadow: var(--shadow-card); }
  .site-nav[data-open="true"] { display: grid; }
  .site-nav a { width: 100%; }
  .header-action, .language-future { display: none; }
}
@media (max-width: 620px) {
  .brand span { display: none; }
  .brand-logo { width: 92px; }
  .card-grid, .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-areas: "brand" "contact" "wechat" "nav"; grid-template-columns: 1fr; gap: 2rem; }
  .timeline-item { grid-template-columns: 1fr; gap: .35rem; }
  .asset-slot { min-height: 245px; }
}