:root {
  --brand: #0b4f8a;
  --deep: #083a66;
  --accent: #2d79b8;
  --soft: #f4f7fa;
  --ink: #1a2332;
  --muted: #5c6b7a;
  --line: #d8e2ea;
  --white: #ffffff;
  --focus: #f4a62a;
  --success: #166c53;
  --trial: #8a5c12;
  --building: #5f6570;
  --sample: #245f95;
}

* { box-sizing: border-box; }
html { min-width: 320px; color: var(--ink); background: var(--white); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; color: var(--ink); background: var(--white); font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif; text-rendering: optimizeLegibility; }
a { color: inherit; }
.page-shell { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }

.skip-link { position: fixed; z-index: 100; top: -5rem; left: 1rem; padding: .8rem 1rem; border-radius: .35rem; color: var(--white); background: var(--deep); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

.masthead { position: relative; z-index: 10; border-bottom: 1px solid rgba(8,58,102,.14); background: rgba(255,255,255,.97); }
.masthead-inner { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { min-height: 48px; display: inline-flex; align-items: center; gap: 18px; color: var(--deep); text-decoration: none; }
.brand img { width: 194px; height: auto; display: block; }
.brand-divider { width: 1px; height: 32px; background: var(--line); }
.brand-name { font-size: 15px; font-weight: 700; letter-spacing: .08em; }
.primary-nav { display: flex; align-items: center; gap: 1.8rem; }
.primary-nav a { min-height: 44px; display: inline-flex; align-items: center; color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; }
.primary-nav a:hover { color: var(--brand); }

.hero { position: relative; overflow: hidden; color: var(--white); background: var(--deep); }
.hero::before,.hero::after { position: absolute; content: ""; pointer-events: none; }
.hero::before { width: 38rem; height: 38rem; top: -23rem; right: -7rem; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; box-shadow: 0 0 0 6rem rgba(255,255,255,.018),0 0 0 12rem rgba(255,255,255,.018); }
.hero::after { inset: auto 0 0; height: 4px; background: linear-gradient(90deg,var(--accent) 0 32%,#6b9fc8 32% 58%,rgba(255,255,255,.22) 58% 100%); }
.hero-grid { position: relative; z-index: 1; min-height: 550px; padding-block: 88px 82px; display: grid; grid-template-columns: minmax(0,1.55fr) minmax(300px,.72fr); align-items: center; gap: clamp(3rem,7vw,7rem); }
.eyebrow,.section-index,.truth-kicker { margin: 0; color: #73acd7; font-family: Arial,sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.hero h1 { max-width: 780px; margin: 18px 0 0; font-size: clamp(42px,5vw,68px); line-height: 1.15; letter-spacing: .025em; }
.hero-lead { margin: 25px 0 0; color: #f2f7fb; font-size: clamp(19px,2vw,23px); line-height: 1.6; }
.hero-description { max-width: 700px; margin: 14px 0 0; color: #bed0df; font-size: 16px; line-height: 1.85; }
.hero-action { width: fit-content; min-height: 48px; margin-top: 34px; padding: 0 18px; display: inline-flex; align-items: center; gap: 18px; border: 1px solid rgba(255,255,255,.4); color: var(--white); font-size: 14px; font-weight: 700; text-decoration: none; transition: border-color 180ms ease,background-color 180ms ease; }
.hero-action:hover { border-color: var(--white); background: rgba(255,255,255,.08); }
.truth-panel { padding: 30px; border-top: 3px solid #74abd3; background: #0c456f; box-shadow: 0 24px 50px rgba(0,23,42,.22); }
.truth-panel strong { margin-top: 24px; display: flex; align-items: baseline; gap: 12px; font-size: 22px; }
.truth-number { color: var(--white); font-family: Arial,sans-serif; font-size: 58px; line-height: 1; }
.portfolio-scopes { margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.16); }
.portfolio-scopes li { padding: 13px 0; color: #d9e8f2; font-size: 14px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.12); }

.products-section { padding: 92px 0 106px; background: var(--soft); }
.section-heading { margin-bottom: 38px; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); align-items: end; gap: 4rem; }
.section-index { color: var(--brand); }
.section-index-light { color: #8fc0e4; }
.section-heading h2,.flow-intro h2 { margin: 12px 0 0; color: var(--deep); font-size: clamp(30px,3.3vw,46px); line-height: 1.25; }
.section-heading>p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.product-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.product-card { position: relative; min-height: 408px; padding: 28px 30px 30px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(8,58,102,.14); border-top: 4px solid var(--brand); background: var(--white); box-shadow: 0 5px 20px rgba(8,58,102,.035); }
.product-card::after { position: absolute; width: 190px; height: 190px; right: -82px; bottom: -90px; content: ""; border: 1px solid rgba(11,79,138,.1); border-radius: 50%; }
.product-card-topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.product-sequence { color: #8a9aaa; font: 700 12px/1 Arial,sans-serif; letter-spacing: .16em; }
.status-badge { padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; }
.status-production,
.status-production_upgrading { color: var(--success); background: #d9f3e8; }
.status-trial { color: var(--trial); background: #fff1cf; }
.status-building { color: var(--building); background: #edf0f3; }
.status-demo { color: var(--sample); background: #e6f0f8; }
.status-sample { color: var(--sample); background: #e6f0f8; }
.product-icon { width: 48px; height: 48px; margin-top: 36px; color: var(--brand); }
.product-card h3 { margin: 20px 0 10px; color: var(--deep); font-size: 26px; line-height: 1.35; }
.product-value { min-height: 56px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.product-evidence { margin: 26px 0 0; padding: 18px 0; display: grid; grid-template-columns: 92px 1fr; gap: 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; }
.product-evidence dt { color: #788795; }
.product-evidence dd { margin: 0; color: var(--ink); font-weight: 700; }
.product-actions { position: relative; z-index: 1; margin-top: auto; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.product-action { min-height: 46px; padding: 0 15px; display: inline-flex; align-items: center; gap: 14px; border: 1px solid var(--brand); color: var(--brand); background: var(--white); font-size: 13px; font-weight: 700; text-decoration: none; transition: color 180ms ease,background-color 180ms ease; }
a.product-action:hover { color: var(--white); background: var(--brand); }

.flow-section { padding: 86px 0; color: var(--white); background: #0a3d68; }
.flow-layout { display: grid; grid-template-columns: minmax(250px,.68fr) minmax(0,1.5fr); align-items: start; gap: clamp(3rem,7vw,7rem); }
.flow-intro h2 { color: var(--white); }
.flow-title-product { display: block; white-space: nowrap; }
.flow-intro>p:last-child { margin: 18px 0 0; color: #b7cad9; font-size: 14px; line-height: 1.8; }
.flow-list { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); list-style: none; }
.flow-list li { position: relative; min-height: 180px; padding: 20px 18px 18px; border-left: 1px solid rgba(255,255,255,.16); }
.flow-list li:last-child { border-right: 1px solid rgba(255,255,255,.16); }
.flow-sequence { color: #82b2d5; font: 700 12px/1 Arial,sans-serif; letter-spacing: .12em; }
.flow-list strong { margin-top: 42px; display: block; color: var(--white); font-size: 18px; }
.flow-list p { margin: 10px 0 0; color: #adc3d4; font-size: 13px; line-height: 1.65; }
.flow-connector { position: absolute; z-index: 1; top: 51%; right: -12px; width: 24px; color: #8db6d3; background: #0a3d68; text-align: center; }

footer { padding: 34px 0; color: #a9c0d2; background: #062e50; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 3rem; }
.footer-inner>div { display: flex; align-items: center; gap: 20px; }
.footer-inner img { width: 150px; height: auto; filter: brightness(0) invert(1); opacity: .92; }
.footer-inner p { margin: 0; font-size: 12px; line-height: 1.7; }
.footer-inner>p { text-align: right; color: #d5e1ea; }
.footer-inner>p span { color: #8eacbf; }

@media (max-width:920px) {
  .page-shell { width: min(100% - 36px,760px); }
  .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .truth-panel { max-width: 540px; }
  .section-heading,.flow-layout { grid-template-columns: 1fr; gap: 1.8rem; }
  .flow-list { margin-top: 1rem; }
}

@media (max-width:680px) {
  .page-shell { width: calc(100% - 28px); }
  .masthead-inner { min-height: 76px; }
  .brand { gap: 12px; }
  .brand img { width: 152px; }
  .brand-divider,.brand-name,.primary-nav { display: none; }
  .hero-grid { min-height: auto; padding-block: 58px 62px; }
  .hero h1 { font-size: clamp(37px,11vw,48px); }
  .hero-lead { font-size: 18px; }
  .truth-panel { padding: 24px; }
  .products-section,.flow-section { padding-block: 64px; }
  .section-heading { margin-bottom: 28px; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card { min-height: 396px; padding: 24px; }
  .product-evidence { grid-template-columns: 1fr; gap: 6px; }
  .product-actions { flex-direction: column; align-items: stretch; }
  .product-action { width: 100%; justify-content: space-between; }
  .flow-list { grid-template-columns: 1fr 1fr; }
  .flow-list li:nth-child(2) { border-right: 1px solid rgba(255,255,255,.16); }
  .flow-list li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.16); }
  .flow-connector { display: none; }
  .footer-inner,.footer-inner>div { align-items: flex-start; flex-direction: column; }
  .footer-inner>p { text-align: left; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}