.sub-banner { position: relative; padding: 160px 0 80px; text-align: center; overflow: hidden; background: var(--dark-bg); }

.sub-banner::before { content: ''; position: absolute; inset: 0; background:
    radial-gradient(ellipse 60% 50% at 50% 40%, rgba(0, 100, 180, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, var(--dark-bg2) 0%, var(--dark-bg) 100%); }

.sub-banner::after { content: ''; position: absolute; inset: 0; background-image:
    linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 10%, transparent 70%); }

.sub-banner .container { position: relative; z-index: 1; }

.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--text-muted); }

.breadcrumb a { color: var(--text-secondary); transition: color 0.2s; }

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

.breadcrumb .sep { color: var(--text-muted); font-size: inherit; }

.breadcrumb .current { color: var(--primary); }

/* ===== 产品全景页 Hero 合同 =====
   背景全宽、内容限宽；页面只通过 --product-* token 切换产品语义色。 */
.product-hero {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 96px max(24px, calc((100vw - 1232px) / 2)) 72px;
  overflow: hidden;
  isolation: isolate;
  text-align: left;
}

.product-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 78% at 76% 42%, var(--product-hero-glow) 0%, transparent 72%),
    linear-gradient(145deg, var(--product-hero-soft), transparent 62%);
}

.product-hero .breadcrumb { justify-content: flex-start; margin: 0 0 32px; }
.product-hero .breadcrumb a:hover,
.product-hero .breadcrumb .current { color: var(--product-accent); }

.product-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(480px, 1.08fr);
  align-items: center;
  gap: 64px;
  min-height: 560px;
}

.product-hero-copy,
.product-hero-visual {
  opacity: 0;
  transform: translateY(18px);
  animation: heroStaggerIn .75s cubic-bezier(.16, 1, .3, 1) both;
}
.product-hero-visual { animation-delay: .16s; }

.product-hero .hero-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  margin: 0 0 20px;
  border: 1px solid var(--product-border);
  border-radius: 999px;
  background: var(--product-soft);
  color: var(--product-accent);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: .06em;
}

.product-hero .hero-title {
  max-width: 650px;
  margin: 0 0 22px;
  color: var(--text);
  font-size: var(--fs-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: -.035em;
}
.product-hero .hero-title .product-accent { color: var(--product-accent); }

.product-hero .hero-desc {
  max-width: 650px;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-base);
}

.product-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.product-hero-actions .btn-cta,
.product-hero-actions .btn-outline { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; }

.product-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 24px;
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}
.product-hero-proof span { display: inline-flex; align-items: center; gap: 8px; }
.product-hero-proof i { width: 7px; height: 7px; border-radius: 50%; background: var(--product-accent); box-shadow: 0 0 12px var(--product-accent); }

@media (max-width: 1100px) {
  .product-hero-grid { grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr); gap: 38px; }
}

@media (max-width: 900px) {
  .product-hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .product-hero-copy { max-width: 720px; }
  .product-hero-visual { width: 100%; max-width: 720px; margin: 0 auto; }
}

@media (max-width: 768px) {
  .product-hero { padding: 96px 20px 56px; }
  .product-hero .breadcrumb { margin-bottom: 24px; }
  .product-hero .hero-title { font-size: var(--fs-h1); }
  .product-hero-grid { gap: 40px; }
  .product-hero-actions { flex-direction: column; }
  .product-hero-actions .btn-cta,
  .product-hero-actions .btn-outline { width: 100%; }
}

@media (max-width: 480px) {
  .product-hero { padding-right: 16px; padding-left: 16px; }
  .product-hero-proof { flex-direction: column; }
}
@media (max-width: 360px) { .product-hero { padding-right: 14px; padding-left: 14px; } }

.sub-banner .breadcrumb,
.adv-hero .breadcrumb,
.api-hero .breadcrumb { justify-content: center; margin-bottom: 24px; }

.sub-banner h1 { font-size: var(--fs-subhero); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 16px; }

.sub-banner h1 .accent { background: linear-gradient(135deg, var(--accent-text), var(--accent-text-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.sub-banner .sub-desc { font-size: var(--fs-body-lg); color: var(--text-secondary); max-width: 600px; margin: 0 auto 32px; line-height: 1.8; }

.sub-banner .banner-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.sub-content { padding: 80px 0; }

.sub-content.alt-bg { background: var(--dark-bg2); }

.sub-header { text-align: center; margin-bottom: 56px; }

.sub-header .section-tag { margin-bottom: 12px; }

.sub-header .section-title { margin-bottom: 12px; }

.sub-header .section-desc { margin: 0 auto; max-width: 600px; }

.sub-cta { padding: 80px 0; background: var(--dark-bg2); position: relative; overflow: hidden; }

.sub-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 80% at 50% 50%, rgba(0, 212, 255, 0.06) 0%, transparent 60%); }

.sub-cta .container { position: relative; z-index: 1; text-align: center; }

.sub-cta h2 { font-size: var(--fs-subsection); font-weight: 800; margin-bottom: 16px; }

.sub-cta p { font-size: var(--fs-body); color: var(--text-secondary); margin-bottom: 32px; max-width: 500px; margin-left: auto; margin-right: auto; }

.card-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

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

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

.info-card { padding: 32px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); transition: all 0.25s; }

.info-card:hover { border-color: var(--border-hover); transform: translateY(-4px); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.16); }

.info-card .card-icon-wrap { width: 52px; height: 52px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; font-size: var(--fs-h2); }

.info-card .card-icon-wrap .icon-svg { width: 28px; height: 28px; }

.info-card .card-icon-wrap img { width: 28px; height: 28px; display: block; }

.info-card .card-icon-wrap.icon-blue { background: rgba(0, 212, 255, 0.1); color: var(--primary); }

.info-card .card-icon-wrap.icon-purple { background: var(--tag-bg); color: var(--emphasis); }

.info-card .card-icon-wrap.icon-teal { background: var(--tag-bg); color: var(--accent-text-2); }

.info-card .card-icon-wrap.icon-amber { background: var(--tag-bg); color: var(--data-color); }

.info-card h3 { font-size: var(--fs-h4); font-weight: 700; margin-bottom: 10px; }

.info-card p { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.7; }

.info-card > ul { list-style: none; padding: 0; margin: 0; }

.info-card > ul > li { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.7; padding: 4px 0; padding-left: 18px; position: relative; }

.info-card > ul > li::before { content: ''; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); opacity: 0.5; }

.info-card li > ul { margin-top: 8px; padding-left: 20px; list-style: disc; }

.info-card li > ul > li { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.9; padding: 2px 0; }

/* 招聘岗位列表（about.html「加入我们」区块） */
.info-card .job-list { display: grid; gap: 3px; list-style: none; padding: 0; margin: 0 0 16px; }
.info-card .job-list li { padding: 0; margin: 0; }
.info-card .job-list li::before { content: none; }
.info-card .job-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--text);
  border: 1px solid transparent;
  transition: all 0.2s ease;
  font-size: var(--fs-body);
}
.info-card .job-link:hover {
  border-color: var(--primary);
  background: var(--primary-glow);
  color: var(--primary);
  transform: translateX(2px);
}
.info-card .job-link:hover .job-arrow { color: var(--primary); transform: translateX(2px); }
.info-card .job-arrow { color: var(--text-muted); transition: all 0.2s ease; font-size: var(--fs-small); }
.info-card .job-tip {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--card-border);
  font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.7;
}
.info-card .job-mail { color: var(--c-link); text-decoration: none; font-weight: var(--fw-semibold); }
.info-card .job-mail:hover { text-decoration: underline; text-underline-offset: 3px; }

.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }

.process-steps::before { content: ''; position: absolute; top: 36px; left: 60px; right: 60px; height: 2px; background: var(--card-border); }

.process-step { text-align: center; position: relative; }

.process-step .step-circle { width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--border-active); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: var(--fs-h2); font-weight: 800; color: var(--primary); background: var(--dark-bg); position: relative; z-index: 1; }

.process-step .step-label { font-size: var(--fs-body); font-weight: 700; margin-bottom: 8px; }

.process-step .step-text { font-size: var(--fs-body); color: var(--text-muted); line-height: 1.6; }

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

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

.pricing-grid-4 .pricing-card { padding: 30px 22px; }

.pricing-grid-4 .pricing-card .price-val { font-size: var(--fs-h1); }

.pricing-grid-4 .pricing-card .price-features li { padding: 6px 0; font-size: var(--fs-body); }

.pricing-grid-4 .pricing-card.featured { transform: translateY(-12px) scale(1.05); z-index: 2; }

.pricing-note { margin-top: 32px; padding: 28px 32px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); }

.pricing-note-title { font-size: var(--fs-body); font-weight: 700; color: var(--text-primary); margin-bottom: 18px; letter-spacing: 0.04em; }

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

.pricing-note-item { padding: 16px 14px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--card-border); border-radius: var(--radius-md); }

.pricing-note-label { font-size: var(--fs-small); color: var(--text-muted); letter-spacing: 0.06em; margin-bottom: 8px; }

.pricing-note-val { font-size: var(--fs-h3); font-weight: 700; color: var(--primary); margin-bottom: 6px; }

.pricing-note-val span { font-size: var(--fs-small); color: var(--text-muted); font-weight: 500; margin-left: 4px; }

.pricing-note-sub { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.5; }

.pricing-note-foot { padding-top: 14px; border-top: 1px dashed var(--card-border); font-size: var(--fs-small); color: var(--text-muted); line-height: 1.7; }

.pricing-card { padding: 36px 28px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); text-align: center; transition: all 0.25s; position: relative; display: flex; flex-direction: column; }

.pricing-card:hover { border-color: var(--border-hover); transform: translateY(-4px); }

.pricing-card.featured { border-color: var(--primary); background: linear-gradient(180deg, rgba(0, 212, 255, 0.10) 0%, var(--card-bg) 100%); box-shadow:
    0 24px 60px -20px rgba(0, 212, 255, 0.35),
    0 0 0 1px rgba(0, 212, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06); z-index: 2; overflow: hidden; animation: pricing-featured-pulse 4s ease-in-out infinite; }

/* 推荐卡 (featured) 免疫 AOS 默认隐藏 — 必须保留 -10px 上移和 opacity:1
   加 html.js 前缀（type+class） + .pricing-card + .featured 把特异性拉到 (0,4,1)，
   超过 AOS 隐藏规则 html.js [data-aos]:not(.aos-animate) 的 (0,3,1) */
html.js .pricing-card.featured[data-aos] { transform: translateY(-10px); opacity: 1; }

.pricing-card.featured::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,
    transparent 0%,
    var(--primary) 30%,
    var(--accent2) 50%,
    var(--primary) 70%,
    transparent 100%); background-size: 200% 100%; animation: pricing-shine 3.5s linear infinite; pointer-events: none; }

.pricing-card.featured::after { content: ''; position: absolute; top: -40%; left: -20%; width: 140%; height: 140%; background: radial-gradient(ellipse at center,
    rgba(0, 212, 255, 0.10) 0%,
    transparent 60%); pointer-events: none; animation: pricing-glow-breathe 4s ease-in-out infinite; z-index: 0; }

.pricing-card.featured > * { position: relative; z-index: 1; }

.pricing-card.featured:hover,
.pricing-card.featured.aos-animate:hover { transform: translateY(-14px); box-shadow:
    0 32px 72px -20px rgba(0, 212, 255, 0.50),
    0 0 0 1px rgba(0, 212, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.10); }

.pricing-card .price-tag { display: inline-block; padding: 4px 14px; border-radius: 100px; font-size: var(--fs-body); font-weight: 600; background: var(--primary); color: var(--text-on-primary); margin-bottom: 20px; }

.pricing-card.featured .price-tag { padding: 6px 18px; font-size: var(--fs-body); background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); box-shadow:
    0 4px 14px rgba(0, 212, 255, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset; animation: pricing-tag-pulse 2.4s ease-in-out infinite; }

.pricing-card .price-name { font-size: var(--fs-h3); font-weight: 700; margin-bottom: 8px; }

.pricing-card .price-val { font-size: var(--fs-display); font-weight: 800; color: var(--primary); margin-bottom: 4px; line-height: 1.1; }

.pricing-card .price-val .price-val-unit { font-size: var(--fs-h3); font-weight: 700; margin-left: 2px; }

.pricing-card .price-unit { font-size: var(--fs-body); color: var(--text-muted); margin-bottom: 24px; }

.pricing-card .price-val.price-val-text { font-size: var(--fs-h2); font-weight: 700; color: var(--text-primary); letter-spacing: 0.04em; }

.pricing-card .price-tagline { font-size: var(--fs-small); color: var(--text-muted); letter-spacing: 0.04em; margin-bottom: 18px; }

.pricing-card .price-features { list-style: none; padding: 0; margin: 0 0 28px; text-align: left; flex: 1; }

.pricing-card .price-features li { padding: 8px 0; font-size: var(--fs-small); color: var(--text-secondary); border-bottom: 1px solid var(--card-border); display: flex; align-items: center; gap: 10px; }

.pricing-card .price-features li:last-child { border-bottom: none; }

.pricing-card .price-features li .check { color: var(--accent2); font-size: var(--fs-small); flex-shrink: 0; }

.pricing-card .btn-cta,
.pricing-card .btn-outline { display: flex; justify-content: center; align-items: center; margin: auto auto 0; min-width: 200px; padding: 14px 32px; text-align: center; letter-spacing: 0.02em; position: relative; }

.pricing-card.featured .btn-primary { padding: 16px 40px; font-size: var(--fs-body); font-weight: 700; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--text-on-primary); box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.20),
    0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.25); overflow: hidden; transition: transform 0.25s, box-shadow 0.25s; }

.pricing-card.featured .btn-primary:hover { transform: translateY(-2px); box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.3); }

.pricing-card.featured .btn-primary::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(110deg,
    transparent 25%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 75%); transform: translateX(-120%); transition: transform 0.7s ease; pointer-events: none; }

.pricing-card.featured .btn-primary:hover::before { transform: translateX(120%); }

.pricing-card.featured .btn-primary::after { content: '→'; margin-left: 10px; font-weight: 700; display: inline-block; transition: transform 0.25s; }

.pricing-card.featured .btn-primary:hover::after { transform: translateX(4px); }

.pay-qr-block { margin-top: 40px; padding: 28px 32px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); display: flex; align-items: center; gap: 28px; max-width: 520px; margin-left: auto; margin-right: auto; }

.pay-qr-card { width: 140px; height: 140px; flex-shrink: 0; background: #fff; border-radius: 10px; padding: 8px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px var(--card-border); overflow: hidden; }

.pay-qr-card img { width: 100%; height: 100%; object-fit: contain; display: block; }

.pay-qr-card img[src*="qr-placeholder"] { background:
    repeating-linear-gradient(45deg, #f3f4f6 0 6px, #e5e7eb 6px 12px); border-radius: 6px; }

.pay-qr-info { flex: 1; min-width: 0; }

.pay-qr-title { font-size: var(--fs-h4); font-weight: 700; color: var(--text-primary); margin-bottom: 8px; line-height: 1.2; }

.pay-qr-sub { font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.6; margin-bottom: 4px; }

.pay-qr-tip { font-size: var(--fs-body); color: var(--text-muted); letter-spacing: 0.04em; line-height: 1.4; }

.filter-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }

.filter-tag { padding: 8px 20px; border-radius: 100px; font-size: var(--fs-small); background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text-secondary); cursor: pointer; transition: all 0.2s; }

.filter-tag:hover,
.filter-tag.active { background: var(--primary-glow); border-color: var(--border-active); color: var(--primary); }

.news-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }

.news-pagination[hidden] { display: none; }

.news-pagination .filter-tag:disabled { cursor: default; opacity: 0.45; }

.timeline { position: relative; padding-left: 40px; }

.timeline::before { content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: var(--card-border); }

.timeline-item { position: relative; padding-bottom: 40px; }

.timeline-item::before { content: ''; position: absolute; left: -33px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); border: 3px solid var(--dark-bg); }

.timeline-item .tl-year { font-size: var(--fs-small); font-weight: 700; color: var(--primary); margin-bottom: 6px; }

.timeline-item .tl-title { font-size: var(--fs-body); font-weight: 600; margin-bottom: 6px; }

.timeline-item .tl-desc { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.7; }

.detail-case { padding: 36px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); transition: all 0.25s; }

.detail-case:hover { border-color: var(--border-hover); transform: translateY(-4px); }

.detail-case .case-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }

.detail-case .case-industry { display: inline-block; padding: 4px 14px; border-radius: 100px; font-size: var(--fs-small); background: var(--tag-bg); color: var(--emphasis); border: 1px solid var(--border-hover); }

.detail-case h3 { font-size: var(--fs-h3); font-weight: 700; margin-bottom: 12px; line-height: 1.4; }

.detail-case .case-body { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.8; margin-bottom: 20px; }

.detail-case .case-body p { margin-bottom: 12px; }

.detail-case .case-results { display: flex; gap: 24px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--card-border); }

.arch-layer { padding: 36px; border-radius: var(--radius-lg); border: 1px solid var(--card-border); margin-bottom: 20px; transition: all 0.25s; }

.arch-layer:hover { border-color: var(--border-hover); }

.arch-layer .layer-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }

.arch-layer .layer-icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: var(--fs-h3); }

.arch-layer .layer-icon .icon-svg { width: 26px; height: 26px; }

.arch-layer .layer-name { font-size: var(--fs-h3); font-weight: 700; }

.arch-layer .layer-desc { font-size: var(--fs-small); color: var(--text-secondary); margin-bottom: 20px; line-height: 1.7; }

.arch-layer .layer-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.arch-layer .layer-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: rgba(255, 255, 255, 0.03); border-radius: var(--radius-sm); font-size: var(--fs-small); color: var(--text-secondary); }

.arch-layer .layer-item .item-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.value-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 22px 18px; transition: all 0.3s; display: flex; gap: 12px; align-items: flex-start; }

.value-card:hover { border-color: var(--primary); }

.value-card .value-icon { width: 40px; height: 40px; margin-left: auto; margin-right: auto; color: var(--primary); font-size: var(--fs-display); margin-bottom: 20px; }

.value-card .value-icon .icon-svg { width: 100%; height: 100%; }

.value-card h3 { font-size: var(--fs-h3); font-weight: 700; margin-bottom: 12px; }

.value-card p { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.7; }

.news-list-card { display: flex; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); overflow: hidden; transition: all 0.25s; cursor: pointer; }

.news-list-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }

/* 头图：固定宽 280 + 高 180（与原图宽高比约 14:9 接近），保证桌面端不被拉伸 */
.news-list-card .news-thumb {
  width: 280px;
  min-width: 280px;
  aspect-ratio: 14 / 9;
  height: auto;
  background: linear-gradient(135deg, var(--dark-bg3), #0A1A2A);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.news-list-card .news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }

.news-list-card:hover .news-thumb img { transform: scale(1.05); }

.news-list-card .news-body { padding: 24px 28px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }

.news-list-card .news-body .news-meta-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

.news-list-card .news-body h3 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.5; margin-bottom: 10px; }

.news-list-card .news-body p { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.7; margin-bottom: 12px; }

.code-tabs { display: flex; gap: 4px; margin-bottom: 0; }

.code-tab { padding: 10px 20px; font-size: var(--fs-body); color: var(--text-muted); background: transparent; border: none; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; font-family: inherit; }

.code-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.code-tab:hover { color: var(--text-secondary); }

.code-panel { display: none; }

.code-panel.active { display: block; }

.data-table { width: 100%; border-collapse: collapse; background: var(--card-bg); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--card-border); }

.data-table th,
.data-table td { padding: 14px 20px; text-align: left; font-size: var(--fs-small); border-bottom: 1px solid var(--card-border); }

.data-table th { background: rgba(0, 212, 255, 0.05); font-weight: 600; color: var(--text-primary); font-size: var(--fs-body); }

.data-table td { color: var(--text-secondary); }

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

.data-table .val-primary { color: var(--primary); font-weight: 700; }

.expand-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }

.expand-content.open { max-height: 800px; }

.expand-toggle { cursor: pointer; user-select: none; font-size: var(--fs-small); font-weight: 500; color: var(--emphasis); }

.case-tag { font-size: var(--fs-small); letter-spacing: 0; font-weight: 700; }

.case-row-tag { font-size: var(--fs-caption); letter-spacing: 0; font-weight: 600; min-width: 64px; }

.case-row-title { font-size: var(--fs-body); font-weight: 600; color: var(--heading); margin-bottom: 4px; }

.case-row-desc { font-size: var(--fs-small); color: var(--text-muted); }

.news-more { font-size: var(--fs-small); color: var(--emphasis); font-weight: 500; }

.kpi-unit { font-size: var(--fs-small); }

.expand-toggle .toggle-arrow { display: inline-block; transition: transform 0.3s; font-size: var(--fs-small); }

.expand-toggle.open .toggle-arrow { transform: rotate(180deg); }

/* =========================================================
   解决方案 / 技术能力 / 动态资讯：内容型页面视觉合同
   共享产品页排版骨架，各页面用不同语义图形表达内容。
   ========================================================= */
.editorial-page {
  --product-accent: var(--primary);
  --product-border: var(--border-hover);
  --product-soft: var(--primary-glow);
  --product-hero-soft: var(--halo-bg);
  --product-hero-glow: var(--primary-glow);
}

.industry-solutions-page {
  --product-accent: var(--text-muted);
  --product-border: var(--card-border);
  --product-soft: var(--card-bg);
  --product-hero-soft: var(--dark-bg2);
  --product-hero-glow: var(--primary-glow);
}

.news-page {
  --product-accent: var(--c-emphasis);
  --product-border: var(--border-hover);
  --product-soft: var(--tag-bg);
  --product-hero-soft: var(--dark-bg2);
  --product-hero-glow: var(--halo-bg);
}

.editorial-page section[id],
.editorial-page article[id] { scroll-margin-top: 92px; }

.editorial-hero .btn-outline:hover { color: var(--product-accent); border-color: var(--product-border); background: var(--product-soft); }
.editorial-page .section-tag { color: var(--product-accent); border-color: var(--product-border); background: var(--product-soft); }

/* 行业解决方案 Hero：六行业汇入统一能力底座 */
.industry-map {
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: 20px;
  background: linear-gradient(145deg, var(--card-bg), var(--dark-bg2));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .22);
}

.industry-map-head,
.engineering-pipeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--card-border);
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.industry-map-head::before,
.engineering-pipeline-head::before {
  content: '';
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--product-accent);
  box-shadow: 0 0 16px var(--product-accent);
}

.industry-map-head span,
.engineering-pipeline-head span { margin-right: auto; color: var(--text); font-weight: var(--fw-semibold); }
.industry-map-head strong,
.engineering-pipeline-head strong { color: var(--product-accent); font-size: var(--fs-small); }
.industry-map-body { padding: 24px; }

.industry-map-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  position: relative;
  padding-bottom: 34px;
}

.industry-map-grid::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--product-border), transparent);
}

.industry-map-grid span {
  position: relative;
  padding: 14px 10px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
  color: var(--text);
  text-align: center;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}

.industry-map-grid span::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 1px;
  height: 18px;
  background: var(--product-border);
}

.industry-map-grid small { color: var(--text-muted); font-size: var(--fs-small); font-weight: var(--fw-regular); }
.industry-map-core { padding: 18px; border: 1px solid var(--product-border); border-radius: 12px; background: var(--product-soft); text-align: center; }
.industry-map-core small { display: block; color: var(--product-accent); font-size: var(--fs-small); margin-bottom: 6px; }
.industry-map-core strong { display: block; color: var(--text); font-size: var(--fs-h4); }
.industry-map-core p { margin-top: 6px; color: var(--text-secondary); font-size: var(--fs-small); }
.industry-map-output { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.industry-map-output span { padding: 8px; border-radius: 8px; background: var(--dark-bg3); color: var(--text-secondary); text-align: center; font-size: var(--fs-small); }

.industry-overview { padding-top: 72px; }
.industry-jump-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.industry-jump-grid a {
  position: relative;
  display: flex;
  min-height: 152px;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: var(--card-bg);
  color: var(--text);
  text-decoration: none;
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}

.industry-jump-grid a::before {
  content: '';
  position: absolute;
  width: 112px;
  height: 112px;
  top: -54px;
  right: -32px;
  border: 1px solid var(--card-border);
  border-radius: 50%;
  box-shadow: 0 0 0 18px var(--halo-bg), 0 0 0 36px var(--dark-bg3);
}

.industry-jump-grid a:hover { transform: translateY(-3px); border-color: var(--border-hover); background: var(--dark-bg3); }
.industry-jump-grid span { position: relative; color: var(--product-accent); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.industry-jump-grid strong { position: relative; margin-top: 9px; color: var(--text); font-size: var(--fs-h4); line-height: var(--lh-snug); }
.industry-jump-grid small { position: relative; margin-top: 8px; color: var(--text-muted); font-size: var(--fs-small); }

.industry-details { border-top: 1px solid var(--border); }
.industry-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.industry-card {
  padding: 28px;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background: linear-gradient(145deg, var(--card-bg), var(--dark-bg2));
  transition: border-color .25s ease, transform .25s ease;
}

.industry-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.industry-card-head { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; }
.industry-card-head .card-icon-wrap { margin: 0; flex: 0 0 auto; }
.industry-card .case-tag { color: var(--product-accent); }
.industry-card h3 { margin-top: 3px; color: var(--text); font-size: var(--fs-h4); line-height: var(--lh-snug); }
.industry-card > p { min-height: 3.4em; color: var(--text-secondary); font-size: var(--fs-small); line-height: var(--lh-base); }
.industry-card-flow { display: grid; grid-template-columns: 1fr auto 1.25fr auto 1fr; align-items: center; gap: 8px; margin: 20px 0; }
.industry-card-flow span { min-height: 58px; display: flex; align-items: center; justify-content: center; padding: 9px; border: 1px solid var(--card-border); border-radius: 9px; background: rgba(255, 255, 255, .025); color: var(--text-secondary); text-align: center; font-size: var(--fs-small); line-height: 1.45; }
.industry-card-flow b { color: var(--product-accent); font-size: var(--fs-small); }
.industry-card .expand-toggle { padding: 8px 0; border: 0; background: transparent; color: var(--product-accent); font-family: inherit; }
.industry-card-more { padding-top: 18px; border-top: 1px solid var(--card-border); }
.industry-card-more p { margin: 14px 0 8px; color: var(--text); font-size: var(--fs-small); }
.industry-card-more p:first-child { margin-top: 0; }
.industry-card-more ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px 16px; padding-left: 18px; }
.industry-card-more li { color: var(--text-secondary); font-size: var(--fs-small); line-height: 1.5; }
.industry-card-more li::marker { color: var(--product-accent); }

/* 技术能力 Hero：输入、工程阶段与业务输出 */
.engineering-pipeline {
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: 20px;
  background: linear-gradient(145deg, var(--card-bg), var(--dark-bg2));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .22);
}

.engineering-pipeline-body { padding: 28px 24px 24px; }
.pipeline-inputs,
.pipeline-output { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pipeline-inputs span,
.pipeline-output span { padding: 8px 13px; border: 1px solid var(--card-border); border-radius: 999px; background: var(--dark-bg3); color: var(--text-secondary); font-size: var(--fs-small); }
.pipeline-line { position: relative; height: 48px; margin: 0 10%; border-left: 1px solid var(--product-border); border-right: 1px solid var(--product-border); border-bottom: 1px solid var(--product-border); }
.pipeline-line::before { content: ''; position: absolute; top: 0; left: 50%; height: 100%; width: 1px; background: var(--product-border); }
.pipeline-line i { position: absolute; bottom: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--product-accent); }
.pipeline-line i:nth-child(1) { left: 0; }
.pipeline-line i:nth-child(2) { left: 33%; }
.pipeline-line i:nth-child(3) { left: 66%; }
.pipeline-line i:nth-child(4) { right: 0; }
.pipeline-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.pipeline-stages article { min-height: 138px; padding: 16px 12px; border: 1px solid var(--card-border); border-radius: 11px; background: rgba(255, 255, 255, .025); }
.pipeline-stages small { display: block; color: var(--product-accent); font-size: var(--fs-small); }
.pipeline-stages strong { display: block; margin: 15px 0 7px; color: var(--text); font-size: var(--fs-small); }
.pipeline-stages span { color: var(--text-muted); font-size: var(--fs-small); line-height: 1.5; }
.pipeline-output { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--card-border); }

.technology-stack { display: flex; flex-direction: column; gap: 0; position: relative; }
.technology-stack::before { content: ''; position: absolute; top: 32px; bottom: 32px; left: 59px; width: 1px; background: var(--border-hover); }
.technology-stack .arch-layer { position: relative; margin: 0 0 16px; padding: 28px 28px 28px 96px; background: linear-gradient(90deg, var(--card-bg), var(--dark-bg2)) !important; }
.technology-stack .arch-layer:last-child { margin-bottom: 0; }
.technology-stack .layer-head { margin: 0 0 12px; }
.technology-stack .layer-icon { position: absolute; top: 28px; left: 34px; z-index: 1; width: 48px; height: 48px; }
.technology-stack .layer-desc { margin-bottom: 16px; }
.technology-stack .layer-items { grid-template-columns: repeat(3, 1fr); }

.engineering-loop { border-top: 1px solid var(--border); }
.engineering-loop-visual { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: stage; }
.engineering-loop-visual article { position: relative; min-height: 210px; padding: 26px 24px; border-top: 1px solid var(--product-border); border-bottom: 1px solid var(--product-border); background: linear-gradient(180deg, var(--card-bg), transparent); }
.engineering-loop-visual article:first-child { border-left: 1px solid var(--product-border); border-radius: 14px 0 0 14px; }
.engineering-loop-visual article:last-child { border-right: 1px solid var(--product-border); border-radius: 0 14px 14px 0; }
.engineering-loop-visual article + article { border-left: 1px solid var(--product-border); }
.engineering-loop-visual article:not(:last-child)::after { content: '→'; position: absolute; z-index: 1; top: 50%; right: -12px; width: 24px; height: 24px; border-radius: 50%; background: var(--dark-bg); color: var(--product-accent); text-align: center; line-height: 24px; }
.engineering-loop-visual span { color: var(--product-accent); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.engineering-loop-visual strong { display: block; margin: 24px 0 12px; color: var(--text); font-size: var(--fs-h4); line-height: var(--lh-snug); }
.engineering-loop-visual p { color: var(--text-secondary); font-size: var(--fs-small); line-height: var(--lh-base); }

.technology-highlights { border-top: 1px solid var(--border); }
.technology-card { position: relative; overflow: hidden; }
.technology-card::after { content: ''; position: absolute; width: 100px; height: 100px; top: -54px; right: -40px; border: 1px solid var(--card-border); border-radius: 50%; box-shadow: 0 0 0 18px var(--halo-bg); pointer-events: none; }
.technology-mini { display: flex; align-items: center; gap: 7px; margin: 16px 0; padding: 10px 12px; overflow: hidden; border: 1px solid var(--card-border); border-radius: 8px; background: var(--dark-bg3); white-space: nowrap; }
.technology-mini span { color: var(--text-secondary); font-size: var(--fs-small); }
.technology-mini b { color: var(--product-accent); font-size: var(--fs-small); }

/* 动态资讯 Hero：最新重点文章大图 */
.featured-story {
  position: relative;
  display: block;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: 20px;
  background: var(--dark-bg3);
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .24);
}

.featured-story picture,
.featured-story img { position: absolute; inset: 0; width: 100%; height: 100%; }
.featured-story img { object-fit: cover; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.featured-story:hover img { transform: scale(1.035); }
.featured-story-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, rgba(3, 11, 26, .2) 48%, rgba(3, 11, 26, .96) 100%); }
.featured-story-copy { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 32px; }
.featured-story-copy > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; color: var(--cta-on); font-size: var(--fs-small); opacity: .82; }
.featured-story-copy > div span { color: var(--product-accent); font-weight: var(--fw-semibold); }
.featured-story-copy h2 { max-width: 540px; margin: 14px 0 8px; color: var(--cta-on); font-size: var(--fs-h3); line-height: var(--lh-snug); }
.featured-story-copy p { color: var(--cta-on); font-size: var(--fs-small); opacity: .78; }
.featured-story-copy strong { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; color: var(--product-accent); font-size: var(--fs-small); }

.news-index { padding-top: 72px; }
.news-index > .container { max-width: none; padding: 0; }
.news-index-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 28px; }
.news-index-heading .section-title-h2 { margin: 14px 0 0; }
.news-index-heading > p { max-width: 340px; color: var(--text-muted); font-size: var(--fs-small); text-align: right; }
.editorial-news-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.editorial-news-grid .news-list-card { min-width: 0; flex-direction: column; color: inherit; text-decoration: none; }
.editorial-news-grid .news-list-card .news-thumb { width: 100%; min-width: 0; aspect-ratio: 16 / 9; }
.editorial-news-grid .news-list-card .news-body { padding: 24px; }
.editorial-news-grid .news-list-card .news-body h3 { font-size: var(--fs-h4); }
.editorial-news-grid .news-list-card.is-lead { grid-column: 1 / -1; display: grid; grid-template-columns: 1.12fr .88fr; }
.editorial-news-grid .news-list-card.is-lead .news-thumb { height: 100%; min-height: 330px; aspect-ratio: auto; }
.editorial-news-grid .news-list-card.is-lead .news-body { padding: 34px; justify-content: center; }
.editorial-news-grid .news-list-card.is-lead .news-body h3 { font-size: var(--fs-h3); }

@media (max-width: 1024px) {
  .industry-jump-grid { grid-template-columns: repeat(2, 1fr); }
  .technology-stack .layer-items { grid-template-columns: repeat(2, 1fr); }
  .engineering-loop-visual { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .engineering-loop-visual article,
  .engineering-loop-visual article:first-child,
  .engineering-loop-visual article:last-child { border: 1px solid var(--product-border); border-radius: 12px; }
  .engineering-loop-visual article:not(:last-child)::after { display: none; }
}

@media (max-width: 900px) {
  .featured-story { min-height: 460px; }
  .industry-card-grid { grid-template-columns: 1fr; }
  .industry-card > p { min-height: 0; }
}

@media (max-width: 768px) {
  .industry-map-body,
  .engineering-pipeline-body { padding: 20px 16px; }
  .industry-map-grid { grid-template-columns: repeat(2, 1fr); }
  .industry-map-output { grid-template-columns: repeat(2, 1fr); }
  .industry-jump-grid,
  .editorial-news-grid { grid-template-columns: 1fr; }
  .industry-card { padding: 22px 18px; }
  .industry-card-flow { grid-template-columns: 1fr; }
  .industry-card-flow b { transform: rotate(90deg); text-align: center; }
  .industry-card-flow span { min-height: 48px; }
  .industry-card-more ul { grid-template-columns: 1fr; }
  .pipeline-line { display: none; }
  .pipeline-stages { grid-template-columns: repeat(2, 1fr); margin: 18px 0; }
  .technology-stack::before { left: 43px; }
  .technology-stack .arch-layer { padding: 22px 18px 22px 74px; }
  .technology-stack .layer-icon { top: 22px; left: 18px; }
  .technology-stack .layer-items { grid-template-columns: 1fr; }
  .engineering-loop-visual { grid-template-columns: 1fr; }
  .engineering-loop-visual article { min-height: 0; }
  .featured-story { min-height: 420px; }
  .featured-story-copy { padding: 24px 20px; }
  .news-index-heading { align-items: flex-start; flex-direction: column; }
  .news-index-heading > p { text-align: left; }
  .editorial-news-grid .news-list-card.is-lead { grid-column: auto; display: flex; }
  .editorial-news-grid .news-list-card.is-lead .news-thumb { min-height: 0; aspect-ratio: 16 / 9; }
  .editorial-news-grid .news-list-card.is-lead .news-body { padding: 24px; }
  .editorial-news-grid .news-list-card.is-lead .news-body h3 { font-size: var(--fs-h4); }
}

@media (max-width: 480px) {
  .industry-map-head strong,
  .engineering-pipeline-head strong { display: none; }
  .industry-map-grid span { padding: 11px 6px; }
  .industry-jump-grid a { min-height: 136px; padding: 18px; }
  .pipeline-stages { grid-template-columns: 1fr; }
  .pipeline-stages article { min-height: 0; }
  .technology-stack .arch-layer { padding-left: 18px; }
  .technology-stack::before { display: none; }
  .technology-stack .layer-icon { position: static; }
  .technology-stack .layer-head { align-items: center; }
  .featured-story { min-height: 380px; }
  .featured-story-copy h2 { font-size: var(--fs-h4); }
  .technology-mini { white-space: normal; flex-wrap: wrap; }
}

.timeline-item-planned { opacity: 0.7; }

.timeline-item-planned::before { background: var(--accent) !important; }

.sub-contact { background: linear-gradient(180deg, var(--dark-bg) 0%, var(--dark-bg2) 100%); }

.sub-form { max-width: 720px; margin: 0 auto; padding: 32px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); }

.sub-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }

.sub-form .form-group { margin-bottom: 16px; }

.sub-form label { display: block; font-size: var(--fs-body); color: var(--text-secondary); margin-bottom: 6px; }

.sub-form input,
.sub-form textarea,
.sub-form select { width: 100%; padding: 12px 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--card-border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: var(--fs-small); font-family: inherit; transition: border-color 0.18s, background 0.18s, box-shadow 0.18s; }

.sub-form input:focus,
.sub-form textarea:focus,
.sub-form select:focus {
  outline: none;
  border-color: var(--input-border-focus);
  /* P1-01 · 外发光 + 内 1px 微弱提示（与 login.css 同步升级） */
  box-shadow:
    0 0 0 3px var(--halo-border),
    inset 0 0 0 1px rgba(0, 212, 255, 0.20);
}

.partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 800px; margin: 0 auto; }

.partner-item { padding: 24px 16px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); text-align: center; color: var(--text-secondary); font-size: var(--fs-small); font-weight: 500; transition: border-color 0.2s, color 0.2s; }

.partner-item:hover { border-color: var(--border-hover); color: var(--text-primary); }

.compare-table { width: 100%; max-width: 900px; margin: 0 auto; border-collapse: collapse; font-size: var(--fs-small); }

.compare-table th,
.compare-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--card-border); }

.compare-table thead th { background: var(--card-bg); color: var(--text-primary); font-weight: 600; font-size: var(--fs-small); }

.compare-table tbody tr:hover { background: rgba(0, 212, 255, 0.04); }

.compare-table td:nth-child(2) { color: var(--primary); font-weight: 600; }

.info-banner { background: linear-gradient(90deg, var(--halo-bg), var(--halo-border)); border-bottom: 1px solid var(--halo-border); padding: 10px 16px; text-align: center; font-size: var(--fs-small); color: var(--text); position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(12px); }

.info-banner strong { color: var(--primary); font-weight: 700; }

.info-banner a { color: var(--primary); text-decoration: none; margin: 0 6px; }

.info-banner a:hover { text-decoration: underline; }

.icon-flat { width: 24px; height: 24px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.icon-flat.lg { width: 28px; height: 28px; }

.icon-flat.xl { width: 36px; height: 36px; }

.api-hero { padding: 96px 24px 48px; max-width: 1280px; margin: 0 auto; text-align: center; position: relative; }

.api-hero::before { content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 1200px; height: 600px; background: radial-gradient(ellipse 60% 50% at center, var(--halo-bg) 0%, transparent 70%); pointer-events: none; z-index: -1; }

.api-hero .hero-tag { display: inline-block; padding: 6px 16px; background: var(--halo-bg); border: 1px solid var(--halo-border); border-radius: 20px; font-size: var(--fs-small); color: var(--primary); letter-spacing: 1px; margin-bottom: 18px; }

.api-hero h1 { font-size: var(--fs-subhero); font-weight: 800; line-height: 1.25; margin-bottom: 18px; color: var(--text); }

.api-hero .hero-desc { font-size: var(--fs-body); color: var(--text-secondary); max-width: 760px; margin: 0 auto; line-height: 1.7; }

.maas-explainer { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 18px 24px; margin: 28px auto 0; max-width: 880px; text-align: left; display: flex; gap: 14px; align-items: center; }

.maas-explainer .m-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--halo-bg); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.maas-explainer p { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.7; }

.maas-explainer p strong { color: var(--text); }

.api-tracks { max-width: 1280px; margin: 0 auto; padding: 48px 24px 32px; }

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

.api-track-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 32px 24px; transition: all 0.3s; text-decoration: none; color: var(--text); display: block; }

.api-track-card:hover { border-color: var(--primary); }

.api-track-card .t-num { display: inline-block; padding: 4px 10px; background: var(--halo-border); color: var(--primary); font-size: var(--fs-caption); font-weight: 700; letter-spacing: 1px; border-radius: 4px; margin-bottom: 14px; }

.api-track-card h3 { font-size: var(--fs-h3); font-weight: 700; color: var(--text); margin-bottom: 6px; }

.api-track-card .track-kicker { font-size: var(--fs-caption); color: var(--text-muted); margin-bottom: 14px; }

.api-track-card .t-desc { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.7; margin-bottom: 18px; }

.api-track-card .model-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }

.api-track-card .model-pill { padding: 3px 10px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; font-size: var(--fs-caption); color: var(--text-secondary); font-weight: 600; }

.api-track-card .t-cta { font-size: var(--fs-small); color: var(--primary); font-weight: 600; }

.section-block { max-width: 1280px; margin: 0 auto; padding: 56px 24px; }

.section-block + .section-block { border-top: 1px solid var(--border); }

.section-header { text-align: center; margin-bottom: 36px; }

.section-tag { display: inline-block; padding: 6px 16px; background: var(--halo-bg); border: 1px solid var(--halo-border); border-radius: 20px; font-size: var(--fs-small); color: var(--primary); letter-spacing: 1px; margin-bottom: 10px; }

.section-title-h2 { font-size: var(--fs-subsection); font-weight: 800; color: var(--text); margin-bottom: 12px; }

.section-subtitle { color: var(--text-secondary); max-width: 720px; margin: 0 auto; font-size: var(--fs-small); line-height: 1.7; }

.section-subtitle-mini { display: inline-block; margin-left: 12px; padding: 2px 10px; font-size: 12px; font-weight: 500; color: var(--accent); background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 10px; vertical-align: middle; letter-spacing: 0.05em; }

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

.value-card .v-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--halo-bg); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.value-card .v-body { flex: 1; }

.value-card .v-name { font-size: var(--fs-small); font-weight: 700; color: var(--text); margin-bottom: 4px; }

.value-card .v-desc { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.6; }

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

.model-category { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 24px 22px; }

.model-category.is-overseas { opacity: .62; border-style: dashed; cursor: pointer; transition: opacity .2s ease, transform .2s ease, border-color .2s ease; }

.model-category.is-overseas:hover,
.model-category.is-overseas:focus-visible { opacity: 1; transform: translateY(-2px); border-color: var(--primary); outline: none; }

.model-category.is-overseas .model-row { opacity: .85; }

.model-category.is-overseas .model-name::after { content: '\23F3'; margin-left: 6px; opacity: .6; font-size: .85em; }

.toast-overseas { position: fixed; left: 50%; bottom: 48px; transform: translateX(-50%) translateY(8px); background: var(--card-bg, #0b1426); color: var(--text, #f5f5f5); border: 1px solid var(--primary, #ff7a3d); border-radius: 999px; padding: 12px 22px; font-size: 14px; font-weight: 600; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); z-index: 9999; pointer-events: none; opacity: 0; transition: opacity .22s ease, transform .22s ease; max-width: calc(100vw - 32px); text-align: center; }

.toast-overseas:not([hidden]) { opacity: 1; transform: translateX(-50%) translateY(0); animation: toastOverseasIn .26s cubic-bezier(.34, 1.56, .64, 1); }

.model-category h3 { font-size: var(--fs-body); font-weight: 700; color: var(--text); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }

.model-category .h-icon { width: 24px; height: 24px; color: var(--primary); }

.model-category .category-summary { font-size: var(--fs-caption); color: var(--text-muted); margin-bottom: 14px; }

.model-category .model-row { padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-small); color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }

.model-category .model-row:last-child { border-bottom: none; }

.model-category .model-name { color: var(--text); font-weight: 600; }

.model-category .model-tag { font-size: var(--fs-caption); padding: 2px 6px; background: var(--halo-border); color: var(--primary); border-radius: 3px; font-weight: 600; }

.compliance-section { max-width: 1280px; margin: 0 auto; padding: 56px 24px; }

.compliance-box { background: linear-gradient(135deg, var(--halo-bg), var(--halo-bg)); border: 1px solid var(--halo-border); border-radius: 16px; padding: 36px; }

.compliance-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 24px; }

.compliance-item { background: var(--bg-elev); border: 1px solid var(--card-border); border-radius: 10px; padding: 16px 18px; }

.compliance-item .ci-num { font-size: var(--fs-caption); font-weight: 700; color: var(--primary); letter-spacing: 1px; margin-bottom: 8px; }

.compliance-item h4 { font-size: var(--fs-small); font-weight: 700; color: var(--text); margin-bottom: 6px; }

.compliance-item p { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.6; }

.compliance-note { display: flex; gap: 12px; padding: 16px; background: var(--bg-elev); border-radius: 10px; align-items: flex-start; }

.compliance-note .cn-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--halo-bg); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.compliance-note p { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.7; }

.compliance-note p strong { color: var(--text); }

.relation-section { max-width: 1280px; margin: 0 auto; padding: 56px 24px; }

.relation-diagram { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }

.relation-box { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 24px; }

.relation-box.left { border-left: 4px solid var(--primary); }

.relation-box.right { border-left: 4px solid var(--emphasis); }

.relation-box h4 { font-size: var(--fs-body); font-weight: 700; color: var(--text); margin-bottom: 10px; }

.relation-box .rel-mode { display: inline-block; padding: 4px 10px; background: var(--bg-elev); color: var(--text-secondary); border-radius: 4px; font-size: var(--fs-caption); font-weight: 600; margin-bottom: 10px; }

.relation-box p { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.6; margin-bottom: 10px; }

.relation-box .rel-arrow { font-size: var(--fs-small); color: var(--primary); font-weight: 700; }

.contact-section { background: var(--bg-elev); padding: 64px 24px; }

.contact-inner { max-width: 720px; margin: 0 auto; text-align: center; }

.contact-inner h2 { font-size: var(--fs-h3); font-weight: 700; margin-bottom: 10px; color: var(--text); }

.contact-inner p { color: var(--text-secondary); margin-bottom: 28px; font-size: var(--fs-small); }

.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }

.contact-form .form-group { margin-bottom: 0; }

.contact-form .full { grid-column: 1 / -1; }

.footer-tag { display: inline-block; padding: 3px 8px; background: var(--halo-border); color: var(--primary); border-radius: 4px; font-size: var(--fs-caption); font-weight: 600; letter-spacing: 1px; margin-left: 8px; }

.adv-hero { padding: 96px 24px 48px; max-width: 1280px; margin: 0 auto; text-align: center; position: relative; }

.adv-hero::before { content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 1200px; height: 600px; background: radial-gradient(ellipse 60% 50% at center, var(--halo-bg) 0%, transparent 70%); pointer-events: none; z-index: -1; }

.adv-hero .hero-tag { display: inline-block; padding: 6px 16px; background: var(--halo-bg); border: 1px solid var(--halo-border); border-radius: 20px; font-size: var(--fs-small); color: var(--accent2); letter-spacing: 1px; margin-bottom: 18px; }

.adv-hero h1 { font-size: var(--fs-subhero); font-weight: 800; line-height: 1.25; margin-bottom: 18px; color: var(--text); }

.adv-hero .hero-desc { font-size: var(--fs-body); color: var(--text-secondary); max-width: 760px; margin: 0 auto; line-height: 1.7; }

.core-statement { max-width: 880px; margin: 28px auto 0; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 20px 24px; text-align: left; display: flex; gap: 14px; align-items: center; }

.core-statement .c-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--halo-bg); color: var(--accent2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.core-statement p { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.7; }

.core-statement p strong { color: var(--text); }

.services-stack { display: flex; flex-direction: column; gap: 18px; }

.service-line { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 28px 32px; transition: all 0.3s; position: relative; overflow: hidden; }

.service-line::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--accent2); opacity: 0.6; }

.service-line:hover { border-color: var(--accent2); }

.service-line .line-header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }

.service-line .line-num { font-size: var(--fs-h1); font-weight: 900; color: var(--halo-border); line-height: 1; }

.service-line .line-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--halo-bg); color: var(--accent2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.service-line h3 { font-size: var(--fs-h4); font-weight: 700; color: var(--text); flex: 1; margin: 0; line-height: 1; }

.service-line .line-tag { padding: 4px 10px; background: var(--halo-border); color: var(--accent2); border-radius: 4px; font-size: var(--fs-caption); font-weight: 600; letter-spacing: 1px; }

.service-line .line-slogan { font-size: var(--fs-small); color: var(--accent2); font-style: italic; margin-bottom: 12px; }

.service-line .line-desc { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.7; margin-bottom: 18px; }

.service-line .line-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.service-line .line-item { background: var(--bg-elev); padding: 12px 14px; border-radius: 8px; display: flex; gap: 10px; align-items: flex-start; }

.service-line .line-item-icon { width: 22px; height: 22px; color: var(--accent2); flex-shrink: 0; }

.service-line .line-item-body { flex: 1; }

.service-line .line-item .i-name { font-size: var(--fs-small); font-weight: 700; color: var(--text); margin-bottom: 3px; }

.service-line .line-item .i-desc { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.5; }

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

.industry-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 20px; transition: all 0.3s; }

.industry-card:hover { border-color: var(--accent2); }

.industry-card .i-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--halo-bg); color: var(--accent2); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }

.industry-card .i-name { font-size: var(--fs-small); font-weight: 700; color: var(--text); margin-bottom: 6px; }

.industry-card .i-products { font-size: var(--fs-caption); color: var(--primary); padding: 3px 8px; background: var(--halo-bg); border-radius: 3px; display: inline-block; margin-bottom: 8px; }

.industry-card .i-desc { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.5; }

.method-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; align-items: stretch; position: relative; }

.method-step { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 22px 18px; position: relative; text-align: center; }

.method-step .step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--accent2); color: var(--bg); font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-size: var(--fs-body); }

.method-step h4 { font-size: var(--fs-small); font-weight: 700; color: var(--text); margin-bottom: 6px; }

.method-step p { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.5; }

.method-arrow { position: absolute; right: -12px; top: 50%; transform: translateY(-50%); color: var(--accent2); font-size: var(--fs-h3); z-index: 2; }

.deliv-groups { display: flex; flex-direction: column; gap: 28px; }

.deliv-group { display: block; }

.deliv-group-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--card-border); flex-wrap: wrap; }

.deliv-group-num { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 24px; padding: 0 8px; font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 700; color: var(--primary); background: var(--primary-glow); border-radius: 6px; letter-spacing: 0.05em; }

.deliv-group-title { font-size: var(--fs-h3); font-weight: 700; color: var(--text); margin: 0; flex: 1; min-width: 0; }

.deliv-group-tag { font-size: var(--fs-caption); color: var(--text-muted); padding: 3px 10px; border: 1px solid var(--card-border); border-radius: 100px; white-space: nowrap; }

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

.deliv-card { text-align: center; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 22px 16px; transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: default; }

.deliv-card .d-icon { margin: 0 auto 10px; width: 36px; height: 36px; border-radius: 8px; background: var(--halo-bg); color: var(--primary); display: flex; align-items: center; justify-content: center; transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; }

.deliv-card .d-name { font-size: var(--fs-small); font-weight: 600; color: var(--text); }

.icon-flat.xxl { width: 48px; height: 48px; stroke-width: 1.25; }

.cta-section { max-width: 1280px; margin: 0 auto; padding: 48px 24px; text-align: center; }

.cta-box { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 40px 32px; }

.cta-box h3 { font-size: var(--fs-h3); font-weight: 700; color: var(--text); margin-bottom: 10px; }

.cta-box p { color: var(--text-secondary); margin-bottom: 20px; font-size: var(--fs-small); }

.sibling-nav { max-width: 1280px; margin: 0 auto; padding: 32px 24px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.sibling-card { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; text-decoration: none; color: var(--text); transition: all 0.3s; }

.sibling-card:hover { border-color: var(--primary); transform: translateX(2px); }

.sibling-card .sib-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--halo-border); color: var(--emphasis); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.sibling-card.alt .sib-icon { background: var(--halo-border); color: var(--primary); }

.sibling-card .sib-content { flex: 1; }

.sibling-card .sib-label { font-size: var(--fs-caption); color: var(--text-muted); letter-spacing: 1px; }

.sibling-card .sib-name { font-size: var(--fs-small); font-weight: 700; color: var(--text); }

.sibling-card .sib-arrow { color: var(--text-muted); font-size: var(--fs-body); }

.article-wrap { max-width: 880px; margin: 0 auto; padding: 0 24px 64px; }

.article-wrap.is-wide { max-width: 1040px; }

.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; color: var(--text-secondary); font-size: var(--fs-small); margin: 32px 0 24px; padding: 14px 0; border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); }

.article-meta .meta-item { display: inline-flex; align-items: center; gap: 6px; }

.article-meta .meta-item svg { flex-shrink: 0; opacity: 0.8; }

.article-meta .meta-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted); opacity: 0.55; flex-shrink: 0; }

.article-meta .meta-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--tag-bg); color: var(--emphasis); font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.02em; }

.article-hero-img { margin: 24px 0 12px; border-radius: var(--radius-lg); overflow: hidden; background: var(--dark-bg3); }

.article-hero-img img { width: 100%; height: auto; display: block; object-fit: cover; }

.article-hero-caption { text-align: center; font-size: var(--fs-small); color: var(--text-muted); margin-bottom: 32px; font-style: italic; }

.article-toc { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 14px 20px; margin: 0 0 32px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); font-size: var(--fs-small); }

.article-toc-label { font-weight: 700; color: var(--text-primary); margin-right: 4px; letter-spacing: 0.05em; }

.article-toc a { color: var(--text-secondary); text-decoration: none; padding: 4px 10px; border-radius: var(--radius-sm); transition: color 0.2s, background 0.2s; }

.article-toc a:hover { color: var(--emphasis); background: var(--tag-bg); }

.article-body { font-size: var(--fs-body); line-height: 1.85; color: var(--text-primary); }

.article-body > * + * { margin-top: 18px; }

.article-h2 { font-size: var(--fs-h2); font-weight: 700; color: var(--text-primary); margin: 56px 0 20px; line-height: 1.35; scroll-margin-top: 96px; }

.article-h2:first-child { margin-top: 8px; }

.article-h3 { font-size: var(--fs-h3); font-weight: 700; color: var(--text-primary); margin: 40px 0 14px; line-height: 1.4; scroll-margin-top: 96px; }

.article-p { font-size: var(--fs-body); line-height: 1.85; color: var(--text-secondary); }

.article-p strong { color: var(--text-primary); font-weight: 700; }

.article-list { margin: 16px 0 24px; padding-left: 22px; color: var(--text-secondary); line-height: 1.85; }

.article-list li { margin-bottom: 10px; }

.article-list li::marker { color: var(--emphasis); font-weight: 700; }

.article-list strong { color: var(--text-primary); }

.hl-primary { color: var(--emphasis); font-weight: 700; }

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

.article-stat { padding: 24px 20px; text-align: center; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); transition: transform 0.25s, border-color 0.25s; }

.article-stat:hover { transform: translateY(-2px); border-color: var(--border-hover); }

.article-stat .stat-num { font-size: var(--fs-h2); font-weight: 700; color: var(--emphasis); line-height: 1.2; margin-bottom: 6px; }

.article-stat .stat-label { font-size: var(--fs-small); color: var(--text-secondary); }

.article-quote { margin: 32px 0; padding: 20px 24px; background: var(--tag-bg); border-left: 4px solid var(--emphasis); border-radius: var(--radius-md); color: var(--text-primary); font-size: var(--fs-body); line-height: 1.8; }

.article-quote strong { color: var(--emphasis); }

.article-quote p + p { margin-top: 14px; }

.article-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 40px 0 8px; padding: 24px 0; border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); }

.article-related { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--card-border); }

.article-related .sub-header { margin-bottom: 24px; }

.article-related .card-grid-2 { margin-top: 24px; }

@keyframes pricing-shine  {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}

@keyframes pricing-glow-breathe  {
0%, 100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 1;    transform: scale(1.08); }
}

@keyframes pricing-featured-pulse  {
0%, 100% { box-shadow:
      0 24px 60px -20px rgba(0, 212, 255, 0.35),
      0 0 0 1px rgba(0, 212, 255, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.06); }
50% { box-shadow:
      0 28px 72px -20px rgba(0, 212, 255, 0.55),
      0 0 0 1px rgba(0, 212, 255, 0.40),
      inset 0 1px 0 rgba(255, 255, 255, 0.08); }
}

@media (prefers-reduced-motion: reduce)  {
.pricing-card.featured,
  .pricing-card.featured::before,
  .pricing-card.featured::after { animation: none; }
.pricing-card.featured:hover { transform: translateY(-10px); }
}

@keyframes pricing-tag-pulse  {
0%, 100% { box-shadow:
      0 4px 14px rgba(0, 212, 255, 0.45),
      0 0 0 1px rgba(255, 255, 255, 0.12) inset; }
50% { box-shadow:
      0 6px 22px rgba(0, 212, 255, 0.70),
      0 0 0 1px rgba(255, 255, 255, 0.20) inset; }
}

@media (max-width: 1024px)  {
.card-grid-4 { grid-template-columns: repeat(2, 1fr); }
.process-steps { grid-template-columns: repeat(2, 1fr); }
.process-steps::before { display: none; }
.pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
.pricing-grid-4 { grid-template-columns: repeat(2, 1fr); }
.pricing-grid-4 .pricing-card.featured { transform: none; }
.pricing-note-grid { grid-template-columns: repeat(2, 1fr); }
.news-list-card { flex-direction: column; }
.news-list-card .news-thumb {
  width: 100%;
  min-width: 0;
  /* 移动端头图：aspect-ratio 锁住比例，绝不等比拉伸；
     整图最多占 viewport 一半高，避免在小屏吞掉正文 */
  aspect-ratio: 16 / 10;
  max-height: 240px;
  height: auto;
}
.arch-layer .layer-items { grid-template-columns: 1fr; }
}

/* 极窄屏：news-thumb 高度再小一点，给正文留空间 */
@media (max-width: 480px) {
  .news-list-card .news-thumb { aspect-ratio: 16 / 9; max-height: 200px; }
  .news-list-card .news-body { padding: 18px 18px; }
}

@media (max-width: 768px)  {
.sub-banner { padding: 120px 0 60px; }
.sub-content { padding: 56px 0; }
.card-grid-2 { grid-template-columns: 1fr; }
.card-grid-3 { grid-template-columns: 1fr; }
.card-grid-4 { grid-template-columns: 1fr; }
.process-steps { grid-template-columns: 1fr; gap: 32px; }
.sub-cta { padding: 56px 0; }
.detail-case .case-results { flex-direction: column; gap: 16px; }
.pay-qr-block { flex-direction: column; text-align: center; padding: 24px; gap: 20px; }
.pay-qr-card { width: 160px; height: 160px; }
.pay-qr-info { text-align: center; }
.pricing-grid-4 { grid-template-columns: 1fr; }
.pricing-note-grid { grid-template-columns: 1fr; }
.pricing-note { padding: 22px 18px; }
}

@media (max-width: 768px)  {
.sub-form { padding: 20px; }
.sub-form .form-row { grid-template-columns: 1fr; gap: 0; }
.data-table thead,
  .compare-table thead { display: none; }
.data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td,
  .compare-table,
  .compare-table tbody,
  .compare-table tr,
  .compare-table td { display: block;
    width: 100%;
    box-sizing: border-box; }
.data-table tr,
  .compare-table tr { margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid var(--card-border, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    background: var(--card-bg, #fff); }
.data-table td,
  .compare-table td { padding: 6px 0;
    border: none;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    text-align: right; }
.data-table td::before,
  .compare-table td::before { content: attr(data-label);
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    text-align: left;
    flex-shrink: 0; }
}

@media (max-width: 768px)  {
.partner-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px)  {
.sub-banner { padding: 96px 0 40px; }
.sub-banner h1 { font-size: var(--fs-subsection); }
.sub-banner .sub-desc { font-size: var(--fs-small); }
.sub-content { padding: 48px 0; }
.sub-cta { padding: 48px 0; }
.sub-cta h2 { font-size: var(--fs-h3); }
.sub-header { margin-bottom: 32px; }
.sub-header .section-title { font-size: var(--fs-h3); }
.pay-qr-block { padding: 20px; }
.pay-qr-card { width: 140px; height: 140px; }
.compare-table { font-size: var(--fs-body); }
.compare-table th,
  .compare-table td { padding: 10px 12px; }
.partner-grid { grid-template-columns: 1fr; }
.pricing-card { padding: 24px 18px; }
.pricing-card .price-name { font-size: var(--fs-h4); }
.pricing-card .price-val { font-size: var(--fs-h2); }
.info-card { padding: 20px; }
.info-card h3 { font-size: var(--fs-body); }
.info-card li { font-size: var(--fs-body); }
}

@media (max-width: 360px)  {
.sub-banner h1 { font-size: var(--fs-h3); }
.compare-table th,
  .compare-table td { padding: 8px 8px; font-size: var(--fs-small); }
}

@media (max-width: 768px)  {
.api-track-grid { grid-template-columns: 1fr; }
.compliance-grid { grid-template-columns: 1fr; }
.relation-diagram { grid-template-columns: 1fr; }
.service-line .line-grid { grid-template-columns: 1fr; }
.deliv-grid { grid-template-columns: repeat(2, 1fr); }
.sibling-nav { grid-template-columns: 1fr; }
}

@media (max-width: 900px)  {
.value-grid { grid-template-columns: repeat(2, 1fr); }
.model-categories { grid-template-columns: repeat(2, 1fr); }
.pricing-grid { grid-template-columns: repeat(2, 1fr); }
.industry-grid { grid-template-columns: repeat(2, 1fr); }
.method-flow { grid-template-columns: 1fr 1fr; }
.method-arrow { display: none; }
.deliv-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 1024–768（iPad 横屏 + 大手机横屏）：缩小 grid 列数，避免 4/5 列挤压 */
@media (max-width: 1024px) and (min-width: 769px) {
  .api-track-grid { grid-template-columns: 1fr 1fr; }
  .compliance-grid { grid-template-columns: repeat(2, 1fr); }
  .deliv-grid { grid-template-columns: repeat(2, 1fr); }
  .sibling-nav { grid-template-columns: 1fr 1fr; }
  .relation-diagram { grid-template-columns: 1fr 1fr; }
}

/* 移动端：advisory 4 条服务线卡片 — 缩小 line-num + line-icon，让标题 h3 自然换行而不被裁 */
@media (max-width: 767px) {
  .service-line { padding: 20px 18px; }
  .service-line .line-header { gap: 8px; }
  .service-line .line-num { font-size: var(--fs-h3); line-height: 1; }
  .service-line .line-icon { width: 32px; height: 32px; }
  .service-line h3 {
    font-size: var(--fs-body);
    line-height: 1.3;
    /* 标题文字用 normal wrap（6-8 个汉字一行容纳），与 num/icon/tag 同排 */
  }
  .service-line .line-tag { padding: 3px 8px; font-size: var(--fs-micro); letter-spacing: 0.5px; flex-shrink: 0; }
  .service-line .line-grid { gap: 10px; }
  .service-line .line-item { padding: 10px 12px; }
  .service-line .line-item-text { font-size: var(--fs-small); line-height: 1.5; }
}

@media (max-width: 500px)  {
.value-grid { grid-template-columns: 1fr; }
.pricing-grid { grid-template-columns: 1fr; }
.industry-grid { grid-template-columns: 1fr; }
.deliv-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1100px)  {
.model-categories { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px)  {
.model-categories { grid-template-columns: 1fr; }
}

@keyframes toastOverseasIn  {
from { opacity: 0; transform: translateX(-50%) translateY(12px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (max-width: 600px)  {
.contact-form { grid-template-columns: 1fr; }
}

@media (max-width: 768px)  {
.article-stat-grid { grid-template-columns: repeat(2, 1fr);
    gap: 12px; }
.article-h2 { font-size: var(--fs-h3); margin-top: 40px; }
.article-h3 { font-size: var(--fs-h4); margin-top: 32px; }
.article-hero-img { margin: 20px 0 8px; }
}

@media (max-width: 480px)  {
.article-stat-grid { grid-template-columns: 1fr; }
.article-meta { gap: 8px 10px; }
.article-toc { padding: 12px 14px; }
}

/* .lx-tip 样式已移至 style.css（统一全站可用），本文件无需重复声明 */

/* ==========================================================================
   关于我们 · 产品全景页式叙事与结构图
   ========================================================================== */
.about-hero {
  width: 100%;
  max-width: none;
  padding: 96px max(24px, calc((100vw - 1400px) / 2)) 72px;
  text-align: left;
}
.about-hero::before {
  background:
    radial-gradient(ellipse 62% 78% at 76% 42%, var(--primary-glow) 0%, transparent 72%),
    linear-gradient(145deg, var(--primary-soft), transparent 62%);
}
.about-hero::after { mask-image: radial-gradient(ellipse 72% 72% at 72% 46%, black 10%, transparent 78%); }
.about-hero-inner { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; }
.about-hero .breadcrumb { justify-content: flex-start; margin: 0 0 32px; }
.about-hero-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(560px, 1.22fr); align-items: center; gap: 56px; min-height: 560px; }
.about-hero-copy,
.about-hero-visual { opacity: 0; transform: translateY(18px); animation: heroStaggerIn .75s cubic-bezier(.16, 1, .3, 1) both; }
.about-hero-visual { animation-delay: .16s; }
.about-hero .hero-tag { display: inline-flex; align-items: center; padding: 7px 14px; margin-bottom: 20px; border: 1px solid var(--primary-soft-border); border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: var(--fs-small); font-weight: var(--fw-semibold); letter-spacing: .06em; }
.about-hero h1 { max-width: 650px; margin: 0 0 22px; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -.035em; }
.about-hero .sub-desc { max-width: 650px; margin: 0; font-size: var(--fs-body-lg); line-height: var(--lh-base); }
.about-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.about-hero-actions .btn-cta,
.about-hero-actions .btn-outline { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; }
.about-hero-proof { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 24px; color: var(--text-muted); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.about-hero-proof span { display: inline-flex; align-items: center; gap: 8px; }
.about-hero-proof span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 12px var(--primary); }

.about-hero-visual {
  position: relative;
  min-height: 552px;
  padding: 22px 24px 24px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--primary-soft-border);
  border-radius: 26px;
  background:
    linear-gradient(135deg, var(--primary-soft), transparent 42%),
    linear-gradient(160deg, var(--bg-elev-2), var(--bg-elev) 58%, var(--bg));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .2), inset 0 1px 0 var(--border);
}
.about-hero-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}
.about-hero-visual::after {
  content: '';
  position: absolute;
  top: 18%;
  left: 50%;
  z-index: -1;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--primary-glow);
  filter: blur(52px);
  transform: translateX(-50%);
  animation: aboutCoreGlow 4.8s ease-in-out infinite;
}
.about-visual-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 50px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--primary-soft-border);
}
.about-visual-brand { display: flex; align-items: center; gap: 10px; }
.about-visual-brand img { width: 42px; height: 32px; object-fit: contain; }
.about-visual-brand > span { display: flex; flex-direction: column; gap: 2px; }
.about-visual-brand small { color: var(--primary); font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: .12em; }
.about-visual-brand strong { color: var(--text); font-size: var(--fs-h4); }
.about-visual-status { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: var(--fs-small); }
.about-visual-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 14px var(--accent2); }

.about-architecture {
  display: grid;
  grid-template-columns: minmax(118px, .82fr) 34px minmax(260px, 1.7fr) 34px minmax(126px, .88fr);
  align-items: center;
  gap: 8px;
  min-height: 340px;
  padding: 24px 0 18px;
}
.about-arch-side { display: flex; flex-direction: column; gap: 8px; }
.about-arch-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.about-arch-heading span { color: var(--primary); font-family: var(--font-mono); font-size: var(--fs-caption); }
.about-arch-heading strong { color: var(--text); font-size: var(--fs-small); }
.about-arch-node {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 43px;
  padding: 9px 10px;
  border-left: 2px solid var(--primary);
  background: linear-gradient(90deg, var(--primary-soft), transparent 92%);
  color: var(--text-secondary);
  font-size: var(--fs-small);
}
.about-arch-node i { color: var(--primary); font-family: var(--font-mono); font-size: var(--fs-caption); font-style: normal; }
.about-arch-outputs .about-arch-node { border-right: 2px solid var(--primary); border-left: 0; background: linear-gradient(270deg, var(--primary-soft), transparent 92%); }
.about-arch-outcome { margin-top: 4px; color: var(--text); font-size: var(--fs-small); line-height: var(--lh-relaxed); }
.about-flow-rail { position: relative; height: 1px; overflow: visible; background: var(--primary-soft-border); }
.about-flow-rail::after { content: '›'; position: absolute; top: 50%; right: -2px; color: var(--primary); font-size: var(--fs-h3); line-height: 1; transform: translateY(-53%); }
.about-flow-rail span { position: absolute; top: -2px; left: 0; width: 18px; height: 5px; border-radius: 999px; background: var(--primary); box-shadow: 0 0 12px var(--primary); animation: aboutSignalFlow 2.6s ease-in-out infinite; }

.about-arch-core {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--primary-soft-border);
  border-radius: 20px;
  background: linear-gradient(155deg, var(--bg-elev-2), var(--bg-elev));
  box-shadow: 0 0 0 8px var(--primary-soft), 0 24px 56px rgba(0, 0, 0, .2);
}
.about-core-title { position: relative; min-height: 74px; padding-left: 66px; }
.about-core-logo { position: absolute; top: 50%; left: 0; display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid var(--primary-soft-border); border-radius: 16px; background: var(--primary-soft); transform: translateY(-50%); }
.about-core-logo img { width: 38px; height: 30px; object-fit: contain; }
.about-core-title small { display: block; margin-bottom: 4px; color: var(--primary); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.about-core-title strong { display: block; color: var(--text); font-size: var(--fs-h4); line-height: var(--lh-snug); }
.about-product-matrix { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.about-product-matrix span { display: flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 9px; border: 1px solid var(--card-border); border-radius: 8px; background: var(--card-bg); color: var(--text-secondary); font-size: var(--fs-small); }
.about-product-matrix span:last-child { grid-column: 1 / -1; }
.about-product-matrix i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 10px var(--primary); }
.about-product-matrix b { font-weight: var(--fw-semibold); }
.about-product-matrix .is-gateway i { background: var(--accent-gateway); box-shadow: 0 0 10px var(--accent-gateway); }
.about-product-matrix .is-agent i { background: var(--accent-purple); box-shadow: 0 0 10px var(--accent-purple); }
.about-product-matrix .is-advisory i { background: var(--accent-gold); box-shadow: 0 0 10px var(--accent-gold); }
.about-product-matrix .is-industry i { background: var(--text-muted); box-shadow: 0 0 10px var(--text-muted); }
.about-core-capabilities { display: grid; grid-template-columns: repeat(5, 1fr); overflow: hidden; border: 1px solid var(--primary-soft-border); border-radius: 8px; background: var(--primary-soft); }
.about-core-capabilities span { padding: 8px 4px; border-right: 1px solid var(--primary-soft-border); color: var(--text-secondary); font-size: var(--fs-small); text-align: center; }
.about-core-capabilities span:last-child { border-right: 0; }

.about-delivery {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--primary-soft-border);
}
.about-delivery > strong { color: var(--text); font-size: var(--fs-small); white-space: nowrap; }
.about-delivery-path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.about-delivery-path::before { content: ''; position: absolute; top: 13px; right: 8%; left: 8%; height: 1px; background: linear-gradient(90deg, var(--primary), var(--primary-soft-border)); }
.about-delivery-path span { position: relative; padding-top: 33px; color: var(--text-secondary); font-size: var(--fs-small); text-align: center; }
.about-delivery-path i { position: absolute; top: 0; left: 50%; display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid var(--primary-soft-border); border-radius: 50%; background: var(--bg-elev); color: var(--primary); font-family: var(--font-mono); font-size: var(--fs-small); font-style: normal; transform: translateX(-50%); }

@keyframes aboutSignalFlow {
  0% { opacity: 0; transform: translateX(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateX(20px); }
}
@keyframes aboutCoreGlow {
  0%, 100% { opacity: .7; transform: translateX(-50%) scale(.94); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.04); }
}

.about-company { scroll-margin-top: 88px; }
.about-page .about-grid { align-items: center; }
.about-page .about-visual { order: 0; }
.about-capability-map {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(32deg, transparent 49.86%, var(--primary-soft-border) 49.94%, var(--primary-soft-border) 50.06%, transparent 50.14%),
    linear-gradient(-32deg, transparent 49.86%, var(--primary-soft-border) 49.94%, var(--primary-soft-border) 50.06%, transparent 50.14%),
    radial-gradient(circle at 50% 48%, var(--primary-glow), transparent 40%);
}
.about-capability-map::before,
.about-capability-map::after { content: ''; position: absolute; top: 48%; left: 50%; z-index: -1; border: 1px dashed var(--primary-soft-border); border-radius: 50%; transform: translate(-50%, -50%); }
.about-capability-map::before { width: 390px; height: 390px; opacity: .7; }
.about-capability-map::after { width: 290px; height: 290px; opacity: .45; }
.about-capability-meta { position: absolute; top: 0; right: 0; left: 0; display: flex; justify-content: space-between; gap: 16px; color: var(--text-muted); font-size: var(--fs-small); }
.about-capability-meta strong { color: var(--text); }
.about-capability-meta span { color: var(--primary); font-family: var(--font-mono); }
.about-capability-core {
  position: absolute;
  top: 48%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 208px;
  height: 208px;
  padding: 24px;
  border: 1px solid var(--primary-soft-border);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 28%, var(--bg-elev-2), var(--bg-elev) 72%);
  box-shadow: 0 0 0 14px var(--primary-soft), 0 28px 58px rgba(0, 0, 0, .2);
  text-align: center;
  transform: translate(-50%, -50%);
}
.about-capability-core img { width: 62px; height: 48px; margin-bottom: 12px; object-fit: contain; }
.about-capability-core small { color: var(--text-secondary); font-size: var(--fs-caption); }
.about-capability-core strong { margin-top: 7px; color: var(--text); font-size: var(--fs-h4); }
.about-capability-node { position: absolute; width: 156px; padding: 14px 16px; border-left: 3px solid var(--primary); background: linear-gradient(90deg, var(--primary-soft), transparent); }
.about-capability-node .capability-code { display: block; margin-bottom: 4px; color: var(--primary); font-size: var(--fs-h4); font-weight: var(--fw-bold); }
.about-capability-node small { color: var(--text-secondary); font-size: var(--fs-small); }
.capability-api { top: 18%; left: 2%; }
.capability-rag { top: 18%; right: 2%; border-right: 3px solid var(--accent-purple); border-left: 0; background: linear-gradient(270deg, var(--purple-soft), transparent); text-align: right; }
.capability-rag .capability-code { color: var(--accent-purple); }
.capability-agent { bottom: 18%; left: 2%; border-color: var(--accent-gold); background: linear-gradient(90deg, var(--gold-soft), transparent); }
.capability-agent .capability-code { color: var(--accent-gold); }
.capability-industry { right: 2%; bottom: 18%; border-right: 3px solid var(--accent2); border-left: 0; background: linear-gradient(270deg, var(--accent2-soft), transparent); text-align: right; }
.capability-industry .capability-code { color: var(--accent2); }
.about-capability-boundary { position: absolute; right: 0; bottom: 0; left: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--primary-soft-border); color: var(--text-secondary); font-size: var(--fs-small); }

.timeline-wrap { max-width: 1080px; margin: 0 auto; }
.about-page .timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 40px 0 0; }
.about-page .timeline::before { top: 15px; right: 0; bottom: auto; left: 0; width: auto; height: 2px; background: linear-gradient(90deg, var(--primary), var(--primary-soft-border)); }
.about-page .timeline-item { min-height: 220px; padding: 24px 28px 28px; border-right: 1px solid var(--card-border); background: var(--card-bg); }
.about-page .timeline-item:last-child { border-right: 0; }
.about-page .timeline-item::before { top: -31px; left: 22px; width: 14px; height: 14px; border: 4px solid var(--dark-bg2); }
.about-page .timeline-item .tl-year { font-family: var(--font-mono); }
.about-page .timeline-item .tl-title { margin: 12px 0; font-size: var(--fs-h4); line-height: var(--lh-snug); }

.about-page .value-card { position: relative; min-height: 270px; flex-direction: column; gap: 0; padding: 28px; border-top: 4px solid var(--primary); border-radius: 0 0 12px 12px; background: linear-gradient(155deg, var(--primary-soft), var(--card-bg) 42%); }
.about-page .value-card:nth-child(2) { border-top-color: var(--accent-gold); background: linear-gradient(155deg, var(--gold-soft), var(--card-bg) 42%); }
.about-page .value-card:nth-child(3) { border-top-color: var(--accent-purple); background: linear-gradient(155deg, var(--purple-soft), var(--card-bg) 42%); }
.about-page .value-card .value-icon { width: 46px; height: 46px; margin: 0 0 30px; }
.about-page .value-card h3 { margin-bottom: 14px; }
.about-page .value-card p { font-size: var(--fs-body); }

.about-ecosystem { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); overflow: hidden; border: 1px solid var(--primary-soft-border); border-radius: 18px; background: var(--card-bg); }
.about-ecosystem .partner-grid { grid-template-columns: repeat(2, 1fr); max-width: none; margin: 0; padding: 20px; border-right: 1px solid var(--card-border); }
.about-ecosystem .partner-item { display: flex; align-items: center; gap: 12px; min-height: 78px; padding: 16px; border-radius: 8px; text-align: left; }
.about-ecosystem .partner-item > span { color: var(--primary); font-family: var(--font-mono); font-size: var(--fs-small); }
.about-ecosystem .partner-item strong { color: var(--text); font-size: var(--fs-small); }
.about-ecosystem-core { display: flex; flex-direction: column; justify-content: center; padding: 36px; background: linear-gradient(145deg, var(--primary-soft), transparent); }
.about-ecosystem-core small { color: var(--primary); font-size: var(--fs-small); }
.about-ecosystem-core strong { margin: 12px 0; color: var(--text); font-size: var(--fs-h2); }
.about-ecosystem-core span { color: var(--text-secondary); font-size: var(--fs-body); line-height: var(--lh-base); }

.about-page .compare-table { max-width: 1120px; overflow: hidden; border: 1px solid var(--card-border); border-radius: 14px; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: var(--card-bg); }
.about-page .compare-table th,
.about-page .compare-table td { width: 25%; padding: 18px 20px; vertical-align: middle; overflow-wrap: anywhere; }
.about-page .compare-table th:nth-child(2) { color: var(--primary); background: var(--primary-soft); }
.about-page .compare-table td:nth-child(2) { background: var(--primary-soft); }
.about-page .info-card { min-height: 100%; }
.info-card-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.info-card-title .icon-svg { width: 20px; height: 20px; }
.info-card-action { margin-top: 20px; }
.about-page .sub-cta .container { max-width: 920px; padding: 44px; border: 1px solid var(--primary-soft-border); border-radius: 18px; background: linear-gradient(135deg, var(--primary-soft), var(--card-bg) 55%); }

@media (max-width: 1100px) {
  .about-hero-grid { grid-template-columns: minmax(0, .82fr) minmax(570px, 1.18fr); gap: 32px; }
  .about-hero-visual { padding-right: 18px; padding-left: 18px; }
  .about-architecture { grid-template-columns: minmax(108px, .78fr) 24px minmax(244px, 1.7fr) 24px minmax(116px, .84fr); gap: 6px; }
  .about-arch-core { padding: 16px; }
}

@media (max-width: 900px) {
  .about-hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .about-hero-copy { max-width: 720px; }
  .about-hero-visual { width: 100%; max-width: 820px; margin: 0 auto; }
  .about-ecosystem { grid-template-columns: 1fr; }
  .about-ecosystem .partner-grid { border-right: 0; border-bottom: 1px solid var(--card-border); }
}

@media (max-width: 768px) {
  .about-hero { padding: 96px 20px 56px; }
  .about-hero .breadcrumb { margin-bottom: 24px; }
  .about-hero h1 { font-size: var(--fs-h1); }
  .about-hero-grid { gap: 40px; }
  .about-hero-actions { flex-direction: column; }
  .about-hero-actions .btn-cta,
  .about-hero-actions .btn-outline { width: 100%; }
  .about-page .timeline { grid-template-columns: 1fr; gap: 0; padding: 0 0 0 40px; }
  .about-page .timeline::before { top: 0; right: auto; bottom: 0; left: 15px; width: 2px; height: auto; }
  .about-page .timeline-item { min-height: 0; border-right: 0; border-bottom: 1px solid var(--card-border); }
  .about-page .timeline-item:last-child { border-bottom: 0; }
  .about-page .timeline-item::before { top: 25px; left: -32px; border-color: var(--dark-bg2); }
  .about-capability-map { min-height: 500px; }
  .about-page .compare-table,
  .about-page .compare-table tbody,
  .about-page .compare-table tr,
  .about-page .compare-table td { width: 100%; }
  .about-page .compare-table td { padding: 6px 0; }
  .about-page .compare-dimension { display: block; text-align: right; }
  .about-page .sub-cta .container { width: calc(100% - 40px); padding: 34px 24px; }
}

@media (max-width: 640px) {
  .about-hero-visual { min-height: 0; padding: 18px 16px 20px; border-radius: 20px; }
  .about-visual-topline { align-items: flex-start; }
  .about-visual-status { max-width: 150px; justify-content: flex-end; text-align: right; }
  .about-architecture { grid-template-columns: 1fr; gap: 14px; min-height: 0; padding: 20px 0; }
  .about-arch-side { display: grid; grid-template-columns: repeat(2, 1fr); }
  .about-arch-heading,
  .about-arch-outcome { grid-column: 1 / -1; }
  .about-arch-node { min-height: 40px; }
  .about-arch-outputs .about-arch-node { border-right: 0; border-left: 2px solid var(--primary); background: linear-gradient(90deg, var(--primary-soft), transparent 92%); }
  .about-flow-rail { width: 1px; height: 24px; margin: 0 auto; }
  .about-flow-rail::after { top: auto; right: auto; bottom: -5px; left: 50%; transform: translateX(-50%) rotate(90deg); }
  .about-flow-rail span { top: 0; left: -2px; width: 5px; height: 14px; animation: none; }
  .about-arch-core { padding: 18px; }
  .about-delivery { grid-template-columns: 1fr; gap: 12px; }
  .about-delivery-path { grid-template-columns: repeat(2, 1fr); row-gap: 14px; }
  .about-delivery-path::before { display: none; }
}

@media (max-width: 480px) {
  .about-hero { padding-right: 16px; padding-left: 16px; }
  .about-hero-proof { flex-direction: column; }
  .about-capability-map { min-height: 620px; background: radial-gradient(circle at 50% 46%, var(--primary-glow), transparent 34%); }
  .about-capability-map::before { width: 300px; height: 300px; }
  .about-capability-map::after { display: none; }
  .about-capability-core { top: 46%; width: 184px; height: 184px; }
  .about-capability-node { width: 138px; padding: 12px; }
  .capability-api { top: 15%; left: 0; }
  .capability-rag { top: 15%; right: 0; }
  .capability-agent { bottom: 16%; left: 0; }
  .capability-industry { right: 0; bottom: 16%; }
  .about-capability-boundary { flex-direction: column; }
  .about-ecosystem .partner-grid { grid-template-columns: 1fr; }
  .about-ecosystem-core { padding: 28px 22px; }
  .about-page .compare-table td { align-items: flex-start; }
  .about-page .sub-cta .container { width: calc(100% - 32px); }
}

@media (max-width: 360px) {
  .about-hero { padding-right: 14px; padding-left: 14px; }
  .about-visual-topline { flex-direction: column; }
  .about-visual-status { max-width: none; }
  .about-arch-side,
  .about-product-matrix { grid-template-columns: 1fr; }
  .about-product-matrix span:last-child { grid-column: auto; }
  .about-core-capabilities { grid-template-columns: repeat(2, 1fr); }
  .about-core-capabilities span { border-bottom: 1px solid var(--primary-soft-border); }
  .about-capability-map { min-height: 650px; }
  .about-capability-node { width: 128px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-hero-visual::after,
  .about-flow-rail span { animation: none; }
}