/* home 页面样式。
 * 只在本路由加载（RouteStyles 切换 <link data-css="page"> 的 href）。
 * 不要把它合并进全局样式，也不要给选择器加作用域前缀：
 * 本文件里的 .footer-grid (0,1,0) 现在是被 motion.css 的
 * .site-footer .footer-grid (0,2,0) 压住的。一旦加前缀变成 (0,2,0)
 * 且文档顺序更靠后，本文件反而会赢，footer 会切成 4 栏网格（DOM 里只有 2 个子元素）。
 */
:root {
  --navy: #072b50;
  --navy-deep: #071d38;
  --blue: #357fc4;
  --blue-bright: #58a9ec;
  --blue-soft: #edf6ff;
  --orange: #f39a2f;
  --orange-soft: #fff3e4;
  --ink: #113c69;
  --muted: #8192a5;
  --line: #e4ebf2;
  --surface: #f9fbfe;
  --white: #fff;
  --shadow: 0 18px 50px rgba(23, 60, 97, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: #fff; font: 16px/1.65 "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, a { font: inherit; }
button { border: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
small, sup { font-size: 12px; }
.wrap { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
.section { padding: 92px 0; }

.site-header { position: relative; z-index: 40; height: 80px; color: #fff; background: var(--navy); }
.nav-wrap { height: 100%; display: flex; align-items: center; }
.brand { width: 221px; flex: 0 0 auto; }
.brand img { width: 221px; height: 56px; object-fit: contain; }
.main-nav { height: 100%; margin-left: auto; display: flex; align-items: stretch; gap: 54px; }
.main-nav a { position: relative; display: flex; align-items: center; color: rgba(255,255,255,.8); font-size: 17px; font-weight: 600; white-space: nowrap; transition: color .2s ease; }
.main-nav a:hover, .main-nav a:focus-visible, .main-nav a.active { color: #fff; }
.main-nav a.active::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 30px; height: 6px; border-radius: 4px 4px 0 0; background: var(--orange); transform: translateX(-50%); }
.nav-toggle { display: none; width: 44px; height: 44px; padding: 11px 8px; cursor: pointer; color: #fff; background: transparent; }
.nav-toggle span { display: block; height: 2px; margin: 5px 0; border-radius: 2px; background: currentColor; }

.hero { position: relative; height: 682px; }
.hero-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-knowledge-layer { position: absolute; z-index: 2; left: 50%; top: 50%; height: max(100%,47.34375vw); aspect-ratio: 1920/909; transform: translate(-50%,-50%); pointer-events: none; }
.screen-knowledge-field { position: absolute; inset: 0; pointer-events: none; }
.knowledge-node { position: absolute; width: 6.9444%; aspect-ratio: 1; padding: 0; border-radius: 50%; color: #eaf8ff; background: transparent; pointer-events: auto; cursor: pointer; }
.knowledge-node img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .2; mix-blend-mode: screen; filter: saturate(1.06); animation: knowledgeBlink 3.2s ease-in-out infinite; transform-origin: center; }
.knowledge-node img:nth-of-type(2) { animation-delay: -.8s; }.knowledge-node img:nth-of-type(3) { animation-delay: -1.6s; }.knowledge-node img:nth-of-type(4) { animation-delay: -2.4s; }
.knowledge-node span { position: absolute; z-index: 6; left: 50%; bottom: 86%; min-width: max-content; padding: 7px 13px; border: 1px solid rgba(188,232,255,.46); border-radius: 8px; color: #fff; background: linear-gradient(135deg,rgba(8,64,108,.88),rgba(31,127,188,.72)); box-shadow: 0 7px 24px rgba(16,90,138,.24),inset 0 1px 0 rgba(255,255,255,.22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 14px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; opacity: 0; transform: translate(-50%,8px) scale(.92); transition: opacity .25s ease,transform .25s ease; }
.knowledge-node span::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; border-right: 1px solid rgba(188,232,255,.44); border-bottom: 1px solid rgba(188,232,255,.44); background: rgba(27,108,165,.8); transform: translateX(-50%) rotate(45deg); }
.knowledge-node.active { z-index: 5; }
.knowledge-node.active span { opacity: 1; transform: translate(-50%,0) scale(1); }
.knowledge-node-1 { left: 58.9583%; top: 52.9326%; }.knowledge-node-2 { left: 56.5972%; top: 65.3959%; }.knowledge-node-3 { left: 70.2778%; top: 60.9971%; }
.knowledge-node-2 img { animation-duration: 3.6s; }.knowledge-node-3 img { animation-duration: 3.35s; }
@keyframes knowledgeBlink { 0%,100% { opacity: .14; transform: scale(.82); } 42% { opacity: .98; transform: scale(1.04); } 67% { opacity: .4; transform: scale(.92); } }
.hero-content { position: relative; height: 100%; display: flex; align-items: flex-start; padding-top: 145px; }
.hero-copy { width: 500px; }
.eyebrow { width: max-content; max-width: 100%; padding: 7px 14px; display: flex; align-items: center; gap: 8px; border: 1px solid #f8d7ae; border-radius: 999px; color: #9b6b32; background: rgba(255,248,239,.88); font-size: 14px; font-weight: 600; }
.eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(243,154,47,.12); }
.hero h1 { margin: 24px 0 10px; color: var(--navy); font-size: clamp(48px, 4.45vw, 64px); line-height: 1.13; letter-spacing: -.05em; }
.hero h1 em { color: var(--orange); font-style: normal; font-weight: 600; }
.hero-copy > p { margin: 0; color: #577084; font-size: 19px; }
.hero-benefits { margin-top: 22px; display: flex; gap: 24px; color: #577084; font-size: 14px; }
.hero-benefits span { position: relative; padding-left: 18px; white-space: nowrap; }
.hero-benefits span::before { content: ""; position: absolute; left: 0; top: .48em; width: 8px; height: 8px; border-radius: 2px; background: var(--orange); }
.hero-actions { margin-top: 28px; display: flex; gap: 14px; }
.button { min-height: 50px; padding: 0 25px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 9px; cursor: pointer; font-size: 16px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: linear-gradient(135deg, #f39a2f, #ffb14b); box-shadow: 0 10px 24px rgba(243,154,47,.25); }
.button-video { color: var(--ink); border: 1px solid #dce5ee; background: rgba(255,255,255,.9); }
.button-video i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); font-size: 12px; font-style: normal; }
.stat-card { position: absolute; z-index: 3; left: 50%; bottom: -43px; height: 86px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #eef2f6; border-radius: 11px; background: rgba(255,255,255,.96); box-shadow: 0 10px 28px rgba(18,58,95,.08); transform: translateX(-50%); }
.stat-card div { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stat-card div:not(:last-child)::after { content: ""; position: absolute; right: 0; width: 1px; height: 38px; background: #e4ebf2; }
.stat-card strong { color: var(--ink); font-size: 24px; line-height: 1.15; }
.stat-card strong sup { margin-left: 2px; color: var(--orange); }
.stat-card span { margin-top: 6px; color: #97a4b3; font-size: 12px; }

.section-heading { max-width: 760px; margin: 0 0 46px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-kicker { display: block; color: var(--blue); font-size: 14px; font-weight: 600; letter-spacing: .08em; }
.section-heading h2 { margin: 8px 0 5px; color: var(--navy); font-size: clamp(32px, 3vw, 40px); line-height: 1.4; letter-spacing: -.04em; }
.section-heading p { margin: 0; color: #97a4b3; font-size: 14px; }

.mode { padding-top: 150px; min-height: 900px; background: #fff; }
.mode-layout { display: grid; grid-template-columns: 624px 1fr; gap: 33px; align-items: stretch; }
/* .video-card 是容器（卡片外框 + 扫光层 + ::after 压暗渐变都还在它身上），
   真正可点的整块热区是里面的 .video-cover 按钮。 */
.video-card { position: relative; min-height: 594px; padding: 0; overflow: hidden; border-radius: 20px; color: #fff; background: #092e55; box-shadow: var(--shadow); }
.video-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(4,33,61,.9)); }
/* 全屏播放的载体：平时被 .video-cover 完全盖住，只有进全屏时才可见。
   z-index 留空 = 排在 ::after 之前，压暗渐变仍然盖在画面上。 */
.video-source { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #092e55; }
/* 整块热区。z-index 3 让它压在 ::after（z-index auto）和 .video-play/.video-copy（2）之上，
   点击任意位置都触发放映，视觉与改造前的按钮版逐像素一致。 */
.video-cover { position: absolute; z-index: 3; inset: 0; width: 100%; padding: 0; cursor: pointer; color: inherit; background: transparent; text-align: left; }
.video-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.video-card:hover img { transform: scale(1.025); }
.video-play { position: absolute; z-index: 2; left: 50%; top: 50%; width: 88px; height: 88px; display: grid; place-items: center; border: 12px solid rgba(255,255,255,.3); border-radius: 50%; color: var(--navy); background: rgba(255,255,255,.96); font-size: 25px; transform: translate(-50%,-50%); }
.video-copy { position: absolute; z-index: 2; left: 32px; bottom: 30px; display: flex; flex-direction: column; gap: 8px; }
.video-copy b { width: max-content; padding: 4px 14px; border-radius: 5px; background: var(--orange); font-size: 16px; }
.video-copy strong { font-size: 20px; }
.mode-cards { display: grid; gap: 18px; }
.mode-card { min-height: 288px; padding: 30px 32px; border: 1px solid #eef3f7; border-radius: 18px; background: #fff; box-shadow: 0 4px 16px rgba(18,58,95,.07); }
.mode-title { display: flex; align-items: center; gap: 15px; }
.mode-title > span { width: 49px; height: 49px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #72bbf7, #3786ca); font-size: 19px; font-weight: 900; }
.human-card .mode-title > span { background: linear-gradient(145deg, #ffbd65, #f39a2f); }
.mode-title small { display: block; color: #99a8b7; font-size: 12px; letter-spacing: .05em; }
.mode-title h3 { margin: 2px 0 0; color: var(--ink); font-size: 22px; line-height: 1.25; }
.mode-card > p { margin: 13px 0 18px; color: #8797a8; font-size: 14px; }
.mode-points { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mode-points div { padding: 10px 12px; display: flex; flex-direction: column; border-radius: 5px; background: #f7fbfe; }
.human-card .mode-points div { background: #fff9f1; }
.mode-points b { color: var(--ink); font-size: 14px; }
.mode-points span { color: #97a4b3; font-size: 12px; }

.logic { position: relative; height: 831px; overflow: hidden; background: #f3f7fd; }
.logic-backdrop { position: absolute; inset: 0; background: url("/images/home/logic-bg.svg") center/cover no-repeat; }
.logic-inner { position: relative; height: 100%; padding-top: 0; }
.logic .section-heading { position: absolute; z-index: 5; top: 58px; left: 50%; width: min(760px, 100%); margin: 0; text-align: center; transform: translateX(-50%); pointer-events: none; }
.logic-panels { position: absolute; z-index: 2; inset: 0; height: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 400px)); }
.logic-panel { position: relative; min-width: 0; height: 100%; padding: 0 40px; overflow: hidden; cursor: pointer; color: var(--navy); background: transparent; text-align: left; transition: background-color .5s ease-in-out, backdrop-filter .5s ease-in-out; }
.logic-panel + .logic-panel { border-left: 1px solid rgba(255,255,255,.72); }
.logic-panel.active { background: linear-gradient(180deg, rgba(117,177,244,.40), rgba(93,158,232,.34)); -webkit-backdrop-filter: blur(15px) saturate(118%); backdrop-filter: blur(15px) saturate(118%); }
.logic-copy { position: absolute; top: 50%; left: 40px; right: 40px; display: block; transform: translateY(-50%); transition: top .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1); }
.logic-panel.active .logic-copy { top: 245px; transform: translateY(0); }
.logic-panel-head { display: contents; }
.logic-index, .logic-toggle { display: none; }
.logic-panel h3 { margin: 0; color: var(--navy); font-size: 23px; line-height: 1.48; text-align: center; }
.logic-detail { max-height: 0; margin-top: 0; display: block; overflow: hidden; opacity: 0; transform: translateY(28px); transition: max-height .5s cubic-bezier(.2,.7,.2,1), opacity .32s ease .08s, transform .5s cubic-bezier(.2,.7,.2,1), margin .5s ease; }
.logic-panel.active .logic-detail { max-height: 510px; margin-top: 21px; opacity: 1; transform: translateY(0); }
.logic-group { position: relative; min-height: 45px; padding: 5px 0 6px 36px; display: block; }
.logic-group i { position: absolute; left: 0; top: 5px; color: #397dbd; font-size: 12px; font-style: normal; font-weight: 800; letter-spacing: .06em; }
.logic-group b { display: block; color: var(--navy); font-size: 15px; line-height: 1.35; }
.logic-group em { margin-top: 2px; display: block; color: #355d7f; font-size: 12px; font-style: normal; line-height: 1.5; }
.logic-steps { grid-template-columns: 1fr 1fr; gap: 8px; }
.logic-panel.active .logic-steps { display: grid; }
.logic-steps > span { position: relative; min-height: 38px; padding: 8px 8px 8px 24px; display: flex; align-items: center; border: 1px solid rgba(255,255,255,.44); border-radius: 7px; color: #164d7b; background: rgba(255,255,255,.24); font-size: 13px; font-weight: 700; }
.logic-steps > span::before { content: ""; position: absolute; left: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--navy); }
.interaction-tip { margin: 18px 0 0; color: #7596b6; font-size: 12px; text-align: center; }
.interaction-tip.dark { color: #98a7b6; }

.subjects { min-height: 760px; background: #f9fbfe; }
.subjects .section-heading { margin-bottom: 30px; }
.subject-accordion { height: 448px; display: flex; gap: 12px; overflow: hidden; }
.subject-card { position: relative; flex: 0 0 90px; height: 448px; padding: 0; overflow: hidden; border-radius: 12px; cursor: pointer; color: #fff; background: #92a8c6; text-align: left; transition: flex-basis .4s cubic-bezier(.2,.75,.25,1), box-shadow .3s ease, transform .3s ease; }
.subject-card.active { flex-basis: 276px; box-shadow: 0 14px 34px rgba(17,60,105,.2); }
.subject-card:hover { transform: translateY(-3px); }
.subject-card img { position: absolute; left: 50%; top: 0; width: 276px; max-width: none; height: 448px; object-fit: contain; object-position: bottom center; transform: translateX(-50%); }
.subject-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 49%, rgba(6,33,61,.94)); }
.subject-copy { position: absolute; left: 0; right: 0; bottom: 0; min-width: 276px; height: 167px; padding: 54px 20px 20px; display: flex; flex-direction: column; justify-content: flex-end; }
.subject-copy strong { font-size: 32px; line-height: 1.2; }
.subject-copy em { height: 0; margin-top: 4px; overflow: hidden; opacity: 0; font-size: 17px; font-style: normal; line-height: 1.45; transition: height .25s ease, opacity .25s ease; }
.subject-card.active .subject-copy em { height: 50px; opacity: 1; }

.journey { min-height: 740px; background: #fff; }
.journey .section-heading { margin-bottom: 48px; }
.journey-diagram-frame { width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-color: #b5cee7 #edf4fb; }
.journey-diagram { width: 100%; height: auto; }
.journey-mobile { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.journey-flow { position: relative; }
.journey-row { position: relative; z-index: 2; margin: 0; padding: 0; display: grid; list-style: none; }
.journey-top { grid-template-columns: repeat(7, 1fr); }
.journey-bottom { width: 86%; margin: 62px 0 0 auto; grid-template-columns: repeat(6, 1fr); }
.journey-row::before { content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; top: 48px; height: 2px; background: linear-gradient(90deg, #f0a23b, #6ba6df); }
.journey-row li { text-align: center; }
.journey-row li > span { display: block; margin-bottom: 8px; color: #97a4b3; font-size: 12px; }
.journey-row i { width: 56px; height: 56px; margin: 0 auto; display: grid; place-items: center; border: 7px solid #fff2df; border-radius: 50%; color: #fff; background: var(--orange); box-shadow: 0 0 0 1px #ffd69f; font-size: 17px; font-style: normal; font-weight: 800; }
.journey-row li:nth-child(even) i { border-color: #e7f3ff; background: var(--blue); box-shadow: 0 0 0 1px #acd2f4; }
.journey-row h3 { margin: 11px 0 4px; color: var(--ink); font-size: 15px; }
.journey-row p { max-width: 125px; margin: 0 auto; color: #9aa8b7; font-size: 12px; line-height: 1.55; }
.journey-turn { position: absolute; z-index: 1; right: 2.7%; top: 48px; width: 70px; height: 145px; border: 2px solid #6ba6df; border-left: 0; border-radius: 0 40px 40px 0; }
.journey-center { position: absolute; z-index: 4; left: 0; bottom: 24px; width: 130px; height: 118px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 9px; color: #fff; background: linear-gradient(145deg, #d99a3d, #bd761f); box-shadow: 0 12px 28px rgba(201,130,40,.2); }
.journey-center span { font-size: 12px; }
.journey-center strong { font-size: 19px; }
.journey-center em { font-size: 12px; font-style: normal; }

.cases { min-height: 900px; background: linear-gradient(180deg, #f1f6ff, #e7f0fd); }
.cases .section-heading { margin-bottom: 40px; }
.case-carousel { position: relative; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 24px; }
.case-viewport { overflow: hidden; border-radius: 12px; }
.case-track { display: flex; gap: 18px; }
.case-track figure { flex: 0 0 calc((100% - 54px) / 4); margin: 0; overflow: hidden; border-radius: 11px; background: transparent; box-shadow: 0 16px 32px rgba(96,33,24,.13); }
.case-card { width: 100%; padding: 0; display: block; cursor: zoom-in; border-radius: inherit; background: transparent; }
.case-track img { display: block; width: 100%; height: auto; aspect-ratio: 494 / 1306; object-fit: contain; }
.carousel-arrow { width: 48px; height: 48px; border-radius: 50%; cursor: pointer; color: #fff; background: #bf0012; font-size: 33px; line-height: 1; box-shadow: 0 8px 18px rgba(143,0,16,.2); }
.carousel-arrow:hover { background: #e10b1d; }
.case-preview-open { overflow: hidden; }
.case-preview { position: fixed; z-index: 120; inset: 0; padding: 24px; display: grid; place-items: center; background: rgba(3,20,37,.78); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
.case-preview-dialog { position: relative; width: min(420px, 100%); max-height: 92vh; display: flex; justify-content: center; }
.case-preview-dialog img { width: auto; max-width: 100%; max-height: 92vh; border-radius: 14px; box-shadow: 0 28px 90px rgba(0,0,0,.38); }
.case-preview-close { position: absolute; z-index: 2; right: -12px; top: -12px; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.36); border-radius: 50%; cursor: pointer; color: #fff; background: #0b3f6b; box-shadow: 0 8px 24px rgba(0,0,0,.28); font-size: 27px; line-height: 1; }

.advantages { min-height: 980px; background: #fff; }
.advantages .section-heading { margin-bottom: 36px; }
.adv-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px 18px; }
.adv-card { position: relative; height: 288px; padding: 0; overflow: hidden; border-radius: 12px; cursor: pointer; color: #fff; background: #123b64; text-align: left; box-shadow: 0 7px 20px rgba(17,60,105,.1); transition: transform .28s ease, box-shadow .28s ease; }
.adv-card:hover, .adv-card.active, .adv-card:focus-visible { z-index: 2; transform: translateY(-8px); box-shadow: 0 20px 42px rgba(17,60,105,.24); }
.adv-card img { width: 100%; height: 100%; object-fit: cover; }
.adv-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(4,31,58,.98)); }
.adv-card span { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 17px; display: flex; flex-direction: column; }
.adv-card b { font-size: 18px; line-height: 1.4; }
.adv-card em { max-height: 0; margin-top: 0; overflow: hidden; color: rgba(255,255,255,.78); opacity: 0; font-size: 13px; font-style: normal; line-height: 1.55; transform: translateY(8px); transition: max-height .28s ease, opacity .2s ease, transform .28s ease, margin .28s ease; }
.adv-card:hover em, .adv-card.active em, .adv-card:focus-visible em { max-height: 64px; margin-top: 7px; opacity: 1; transform: translateY(0); }

.contact { min-height: 361px; display: flex; align-items: center; color: #fff; background: #1d5c91 url("/images/home/contact-bg.svg") center/cover no-repeat; }
.contact-inner { display: flex; align-items: center; justify-content: space-between; }
.contact-inner > div > span { font-size: 14px; letter-spacing: .04em; }
.contact h2 { margin: 10px 0 4px; font-size: 40px; line-height: 1.4; }
.contact p { margin: 0; color: rgba(255,255,255,.7); font-size: 14px; }
.phone-card { min-width: 460px; padding: 28px 30px; display: flex; align-items: center; gap: 18px; border: 1px solid rgba(255,255,255,.22); border-radius: 14px; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); }
.phone-card i { width: 58px; height: 58px; display: grid; place-items: center; border: 8px solid rgba(255,255,255,.28); border-radius: 50%; background: var(--orange); font-size: 22px; font-style: normal; }
.phone-card span { flex: 1; }
.phone-card small { display: block; color: rgba(255,255,255,.72); }
.phone-card strong { display: block; font-size: 25px; letter-spacing: .04em; }
.phone-card b { padding: 9px 17px; border-radius: 6px; color: #9b641d; background: #ffc06d; font-size: 14px; }

.site-footer { padding: 50px 0 0; color: #a9b8c9; background: #071936; }
.footer-grid { min-height: 210px; display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: start; }
.site-footer h3 { margin: 0 0 18px; color: #fff; font-size: 16px; }
.footer-contact p { max-width: 540px; margin: 10px 0; font-size: 13px; }
.footer-qrs img { width: 374px; height: 132px; object-fit: contain; }
.copyright { min-height: 54px; display: flex; align-items: center; border-top: 1px solid rgba(255,255,255,.09); font-size: 12px; }

/* 品牌宣传片原来在这里有一个 .video-modal 弹窗层（遮罩 + .video-dialog + 关闭按钮），
   现已改为点击封面直接全屏播放，整块删除。若哪天要找回弹窗，看 git 历史里的
   src/components/VideoModal.tsx 与本次提交前的 home.css。 */

:focus-visible { outline: 3px solid #ffb34d; outline-offset: 3px; }

@media (max-width: 1240px) {
  .main-nav { gap: 32px; }
  .mode-layout { grid-template-columns: 1.05fr .95fr; }
  .subject-accordion { overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 12px; }
  .subject-card { flex-basis: 90px; scroll-snap-align: start; }
  .subject-card.active { flex-basis: 276px; }
  .case-track figure { flex-basis: calc((100% - 36px) / 3); }
}

@media (max-width: 980px) {
  .site-header { height: 70px; }
  .brand, .brand img { width: 190px; height: 48px; }
  .nav-toggle { display: block; margin-left: auto; }
  .main-nav { position: absolute; top: 70px; left: 24px; right: 24px; height: auto; padding: 12px; display: none; flex-direction: column; align-items: stretch; gap: 0; border-radius: 0 0 14px 14px; background: var(--navy); box-shadow: 0 18px 32px rgba(4,25,47,.2); }
  .main-nav.open { display: flex; }
  .main-nav a { min-height: 48px; justify-content: center; }
  .main-nav a.active::after { bottom: 5px; height: 3px; }
  .hero { height: 640px; }
  .hero-background { object-position: 60% center; }
  .hero-knowledge-layer { left: 46%; opacity: .84; }
  .knowledge-node span { font-size: 12px; }
  .hero-content { padding-top: 118px; }
  .hero-copy { width: 48%; }
  .hero-copy > p { font-size: 16px; }
  .hero-benefits { align-items: flex-start; flex-direction: column; gap: 8px; }
  .mode-layout { grid-template-columns: 1fr; }
  .video-card { min-height: 560px; }
  .mode { padding-bottom: 100px; }
  .logic { height: auto; min-height: 980px; padding: 64px 0; }
  .logic-backdrop { opacity: .55; }
  .logic-inner { height: auto; }
  .logic .section-heading { position: relative; top: auto; left: auto; width: 100%; margin: 0 auto 38px; transform: none; }
  .logic-panels { position: relative; inset: auto; height: auto; grid-template-columns: 1fr; gap: 12px; }
  .logic-panel, .logic-panel.active { min-height: 150px; height: auto; padding: 24px; border: 1px solid rgba(7,43,80,.12); border-radius: 12px; background: rgba(255,255,255,.82); backdrop-filter: none; }
  .logic-panel.active { min-height: 520px; background: rgba(191,220,251,.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .logic-panel + .logic-panel { border-left: 1px solid rgba(7,43,80,.12); }
  .logic-copy, .logic-panel.active .logic-copy { position: static; display: block; transform: none; }
  .logic-panel.active .logic-detail { max-height: 650px; }
  .journey-diagram { min-width: 1000px; }
  .journey-row { grid-template-columns: repeat(4, 1fr); gap: 30px 12px; }
  .journey-bottom { width: 100%; margin-top: 30px; }
  .journey-row::before, .journey-turn { display: none; }
  .journey-center { position: static; width: 100%; height: 90px; margin-top: 30px; }
  .case-track figure { flex-basis: calc((100% - 18px) / 2); }
  .adv-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-inner { gap: 30px; }
  .phone-card { min-width: 390px; }
}

@media (max-width: 700px) {
  .wrap { width: min(100% - 30px, 560px); }
  .section { padding: 70px 0; }
  /* 这里不能给 .hero 加 overflow: hidden。.stat-card 是 hero 的子元素，还要骑在下沿外
     （bottom: -72px，卡高 144px），一旦裁掉，露在外面的第二行「1亿+ / 小一至高三」就整行消失，
     只剩上面一行，看起来像卡本身就矮、底下空一大片。
     背景图靠 top/height 的组合会比 hero 多出 20px，改由它自己裁（20px 正好是下沿多出的部分）。 */
  .hero { height: 490px; }
  .hero-background { inset: auto 0 auto; top: -230px; height: calc(100% + 250px); object-position: 70% center; clip-path: inset(0 0 20px 0); }
  .hero-knowledge-layer { display: none; }
  .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.68) 34%, #fff 82%); }
  .hero-content { z-index: 2; align-items: flex-start; padding: 48px 0 0; }
  .hero-copy { width: 100%; }
  .hero h1 { font-size: 44px; }
  .eyebrow { font-size: 12px; }
  .hero-copy > p { font-size: 15px; }
  .hero-benefits { flex-direction: row; flex-wrap: wrap; gap: 7px 15px; font-size: 12px; }
  .hero-actions { margin-top: 20px; }
  .button { min-height: 46px; padding-inline: 18px; font-size: 14px; }
  .stat-card { bottom: -72px; height: 144px; grid-template-columns: 1fr 1fr; }
  .stat-card div:nth-child(2)::after { display: none; }
  .stat-card div:nth-child(-n+2) { border-bottom: 1px solid #e4ebf2; }
  .stat-card strong { font-size: 20px; }
  /* 卡下方空隙 = padding-top - 卡的 72px 下悬，140 时是 68px，偏松，收到 44px。 */
  .mode { padding-top: 116px; }
  .section-heading { margin-bottom: 34px; }
  .section-heading h2 { font-size: 30px; }
  .section-kicker { font-size: 12px; }
  .section-heading p { font-size: 13px; }
  .video-card { min-height: 350px; }
  .video-play { width: 72px; height: 72px; border-width: 9px; }
  .mode-card { padding: 24px 20px; }
  .mode-points { grid-template-columns: 1fr; }
  /* 手机端使用单开手风琴，减少三张长卡连续堆叠的滚动压力。
     下列规则只在 700px 以下生效，桌面端的三栏 hover 展开方式保持不变。 */
  .logic {
    min-height: 0;
    padding: 68px 0 78px;
    background: #edf5fc;
  }
  .logic-backdrop {
    opacity: 1;
    background:
      radial-gradient(circle at 8% 7%, rgba(81,164,231,.2), transparent 30%),
      radial-gradient(circle at 94% 88%, rgba(243,154,47,.14), transparent 30%),
      linear-gradient(180deg, #f7fbff 0%, #edf5fc 45%, #f4f8fc 100%);
  }
  .logic-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .3;
    background-image: radial-gradient(rgba(38,112,176,.24) .7px, transparent .7px);
    background-size: 15px 15px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 42%);
    mask-image: linear-gradient(to bottom, #000, transparent 42%);
  }
  .logic-inner { z-index: 1; padding-top: 0; }
  .logic .section-heading { margin-bottom: 30px; padding-inline: 8px; }
  .logic .section-kicker {
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    padding: 5px 11px;
    border: 1px solid rgba(53,127,196,.16);
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 7px 20px rgba(44,104,158,.07);
    font-size: 10px;
    letter-spacing: .09em;
  }
  .logic .section-heading h2 { margin: 13px 0 7px; font-size: 34px; line-height: 1.18; letter-spacing: -.05em; }
  .logic .section-heading p { max-width: 320px; margin-inline: auto; color: #8195a8; font-size: 13px; line-height: 1.65; }
  .logic-panels { gap: 14px; }
  .logic-panel, .logic-panel.active {
    --logic-accent: #2f82ca;
    --logic-tint: #eaf5ff;
    position: relative;
    min-height: 0;
    height: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(32,88,139,.11);
    border-radius: 22px;
    background: rgba(255,255,255,.93);
    box-shadow: 0 14px 40px rgba(19,59,96,.08), inset 0 1px 0 rgba(255,255,255,.9);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
  }
  .logic-panel:nth-child(2) { --logic-accent: #596ec8; --logic-tint: #eef0ff; }
  .logic-panel:nth-child(3) { --logic-accent: #df8a3e; --logic-tint: #fff3e8; }
  .logic-panel.active {
    border-color: color-mix(in srgb, var(--logic-accent) 27%, transparent);
    background: linear-gradient(145deg, #fff 10%, var(--logic-tint) 145%);
    box-shadow: 0 18px 48px rgba(19,59,96,.13), inset 0 1px 0 #fff;
  }
  .logic-panel + .logic-panel { border-left-color: rgba(32,88,139,.11); }
  .logic-panel::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 22px;
    right: 22px;
    top: 0;
    height: 3px;
    border-radius: 0 0 6px 6px;
    background: var(--logic-accent);
    opacity: .35;
    transform: scaleX(.32);
    transition: opacity .25s ease, transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .logic-panel.active::before { opacity: 1; transform: scaleX(1); }
  .logic-copy, .logic-panel.active .logic-copy { position: static; display: block; transform: none; }
  .logic-panel-head {
    min-height: 106px;
    padding: 20px 18px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 32px;
    gap: 14px;
    align-items: center;
  }
  .logic-index {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--logic-accent) 18%, transparent);
    border-radius: 14px;
    color: var(--logic-accent);
    background: var(--logic-tint);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
  }
  .logic-panel h3 { color: #0a3157; font-size: 18px; line-height: 1.42; letter-spacing: -.02em; text-align: left; }
  .logic-toggle {
    position: relative;
    width: 32px;
    height: 32px;
    display: block;
    border: 1px solid rgba(42,94,142,.12);
    border-radius: 50%;
    background: #f5f8fb;
  }
  .logic-toggle::before, .logic-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--logic-accent);
    transform: translate(-50%,-50%);
    transition: transform .25s ease;
  }
  .logic-toggle::after { transform: translate(-50%,-50%) rotate(90deg); }
  .logic-panel.active .logic-toggle { border-color: transparent; background: var(--logic-accent); }
  .logic-panel.active .logic-toggle::before, .logic-panel.active .logic-toggle::after { background: #fff; }
  .logic-panel.active .logic-toggle::after { transform: translate(-50%,-50%) rotate(0); }
  .logic-detail, .logic-panel.active .logic-detail {
    max-height: 0;
    margin: 0;
    padding: 0 18px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height .55s cubic-bezier(.2,.75,.2,1), opacity .25s ease, transform .35s ease, padding .35s ease;
  }
  .logic-panel.active .logic-detail { max-height: 900px; padding-bottom: 20px; opacity: 1; transform: none; }
  .logic-steps, .logic-panel.active .logic-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .logic-steps > span {
    min-height: 47px;
    padding: 10px 11px 10px 31px;
    border: 1px solid color-mix(in srgb, var(--logic-accent) 12%, transparent);
    border-radius: 12px;
    color: #194c77;
    background: rgba(255,255,255,.76);
    box-shadow: 0 5px 16px rgba(29,78,121,.045);
    font-size: 14px;
  }
  .logic-steps > span:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .logic-steps > span::before { left: 14px; width: 6px; height: 6px; background: var(--logic-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--logic-accent) 10%, transparent); }
  .logic-group {
    min-height: 0;
    padding: 14px 0;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 11px;
    border-top: 1px solid rgba(28,80,126,.09);
  }
  .logic-group i {
    position: static;
    grid-row: 1 / 3;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--logic-accent);
    background: var(--logic-tint);
    font-size: 10px;
    line-height: 1;
  }
  .logic-group b { font-size: 15px; line-height: 1.45; }
  .logic-group em { margin-top: 3px; color: #6f869a; font-size: 12px; line-height: 1.65; }
  .subject-accordion { width: calc(100vw - 15px); margin-right: -15px; gap: 12px; }
  .subject-card, .subject-card.active { flex-basis: 230px; }
  .subject-copy { min-width: 230px; }
  .subject-card img { width: 230px; object-fit: contain; }
  .subject-copy em { height: 50px; opacity: 1; font-size: 15px; }
  .journey-row, .journey-bottom { grid-template-columns: 1fr 1fr; }
  .journey-row p { max-width: 140px; }
  .journey { min-height: 0; background: linear-gradient(180deg, #fff 0%, #f5f9fe 100%); }
  .journey .section-heading { margin-bottom: 28px; }
  .journey-diagram-frame { display: none; }
  .journey-mobile { display: grid; gap: 14px; }
  .journey-phase { overflow: hidden; border: 1px solid #dceaf5; border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 12px 34px rgba(17,60,105,.08); }
  .journey-phase > header { padding: 18px 18px 16px; display: grid; grid-template-columns: auto 1fr; gap: 1px 12px; align-items: center; border-bottom: 1px solid #e6eff6; background: linear-gradient(135deg, #edf7ff, #fff); }
  .journey-phase > header span { grid-row: 1 / 3; padding: 5px 8px; border-radius: 7px; color: #287fc0; background: #fff; box-shadow: 0 5px 14px rgba(47,137,201,.1); font-size: 10px; font-weight: 800; letter-spacing: .06em; }
  .journey-phase > header b { color: var(--ink); font-size: 18px; line-height: 1.3; }
  .journey-phase > header small { color: #8b9cad; font-size: 11px; }
  .journey-phase ol { position: relative; margin: 0; padding: 10px 14px 12px; list-style: none; }
  .journey-phase ol::before { content: ""; position: absolute; left: 48px; top: 28px; bottom: 30px; width: 2px; background: linear-gradient(#79b9e8, #f3ad50); }
  .journey-phase li { position: relative; min-height: 79px; padding: 10px 8px 10px 76px; display: flex; align-items: center; }
  .journey-phase li > i { position: absolute; z-index: 2; left: 4px; top: 29px; width: 26px; color: #8fa3b6; font-size: 10px; font-style: normal; font-weight: 700; text-align: center; }
  .journey-phase li > em { position: absolute; z-index: 2; left: 34px; top: 21px; width: 31px; height: 31px; display: grid; place-items: center; border: 5px solid #e9f5ff; border-radius: 50%; color: #fff; background: #4194d2; box-shadow: 0 0 0 1px #9fcdef, 0 6px 16px rgba(49,135,198,.2); font-size: 12px; font-style: normal; font-weight: 800; }
  .journey-phase li > div { width: 100%; min-width: 0; padding: 11px 13px; border: 1px solid #edf2f6; border-radius: 11px; background: #fbfdff; }
  .journey-phase li b, .journey-phase li span { display: block; }
  .journey-phase li b { color: var(--ink); font-size: 15px; }
  .journey-phase li span { margin-top: 3px; color: #8a9bad; font-size: 11px; line-height: 1.55; }
  .journey-phase li:nth-child(odd) > em { border-color: #fff2df; background: var(--orange); box-shadow: 0 0 0 1px #ffd59e, 0 6px 16px rgba(243,154,47,.18); }
  .phase-learn > header { background: linear-gradient(135deg, #fff5e8, #fff); }
  .phase-learn > header span { color: #ae681c; }
  .phase-grow > header { background: linear-gradient(135deg, #eef8f7, #fff); }
  .journey-mobile-loop { padding: 20px; display: flex; flex-direction: column; align-items: center; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #0b5389, #0a3358); box-shadow: 0 16px 36px rgba(7,52,88,.18); text-align: center; }
  .journey-mobile-loop span { color: #83cfff; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
  .journey-mobile-loop b { margin-top: 5px; font-size: 16px; }
  .journey-mobile-loop small { margin-top: 4px; color: rgba(255,255,255,.62); font-size: 10px; }
  .case-carousel { grid-template-columns: 38px 1fr 38px; gap: 8px; }
  .carousel-arrow { width: 38px; height: 38px; font-size: 27px; }
  .case-track figure { flex-basis: 100%; }
  .case-track img { height: auto; max-height: 690px; object-fit: contain; }
  .adv-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .adv-card { height: 244px; }
  .adv-card b { font-size: 15px; }
  .adv-card em { font-size: 12px; }
  .contact { padding: 68px 0; }
  .contact-inner { flex-direction: column; align-items: flex-start; }
  .contact h2 { font-size: 31px; }
  .phone-card { min-width: 0; width: 100%; padding: 20px; }
  .phone-card strong { font-size: 20px; }
  .phone-card b { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 36px; }
  .footer-qrs img { width: min(374px, 100%); height: auto; }
}

@media (max-width: 430px) {
  .brand, .brand img { width: 175px; }
  .hero h1 { font-size: 40px; }
  .adv-grid { grid-template-columns: 1fr; }
  .adv-card { height: 300px; }
}

/* 首页三个内容区的手机端比例与横向滑动。放在 430px 规则之后，
   确保小屏也保持两列优势卡，不回退到单列。 */
@media (max-width: 700px) {
  .cases { min-height: 0; padding-bottom: 76px; overflow: hidden; }
  .cases .wrap { width: 100%; }
  .cases .section-heading { width: min(100% - 30px, 560px); margin-inline: auto; margin-bottom: 30px; }
  .case-carousel { display: block; }
  .case-carousel .carousel-arrow { display: none; }
  .case-viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 0;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .case-viewport::-webkit-scrollbar { display: none; }
  .case-track { width: max-content; gap: 9px; padding: 5px 20px 24px; }
  .case-track figure {
    flex: 0 0 calc((100vw - 76px) / 3);
    width: calc((100vw - 76px) / 3);
    border-radius: 9px;
    scroll-snap-align: start;
    box-shadow: 0 12px 28px rgba(111,28,22,.13);
  }
  .case-track img { max-height: none; }
  .case-preview { padding: 18px 28px; }
  .case-preview-dialog { width: min(330px, 100%); }
  .case-preview-close { right: -14px; top: -14px; }

  .subjects { overflow: hidden; }
  .subject-accordion {
    width: 100vw;
    height: 240px;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
    padding: 0 18px 10px;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 18px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .subject-accordion::-webkit-scrollbar { display: none; }
  .subject-card, .subject-card.active {
    flex: 0 0 148px;
    width: 148px;
    height: 230px;
    border-radius: 13px;
    scroll-snap-align: start;
    box-shadow: 0 12px 28px rgba(17,60,105,.12);
    transform: none;
  }
  .subject-card img { width: 148px; height: 230px; object-fit: contain; }
  .subject-copy { min-width: 148px; height: 102px; padding: 35px 13px 13px; }
  .subject-copy strong { font-size: 20px; }
  .subject-copy em, .subject-card.active .subject-copy em { height: 38px; margin-top: 3px; opacity: 1; font-size: 11px; line-height: 1.45; }
  .subjects .interaction-tip { display: none; }

  /* 手机端卡片只有 230px 高，不再继承桌面端的大块最小高度。 */
  .subjects { min-height: 0; padding-bottom: 26px; }
  .journey { padding-top: 42px; }

  .advantages { min-height: 0; }
  .adv-grid { grid-template-columns: 1fr 1fr; gap: 11px; }
  .adv-card, .adv-card.active, .adv-card:hover, .adv-card:focus-visible {
    height: 220px;
    border-radius: 14px;
    cursor: default;
    pointer-events: none;
    opacity: 1;
    transform: none;
    transition: none;
    box-shadow: 0 10px 24px rgba(17,60,105,.12);
  }
  .adv-card::after { background: linear-gradient(180deg, transparent 27%, rgba(4,31,58,.98) 78%); }
  .adv-card span { left: 14px; right: 12px; bottom: 13px; }
  .adv-card b { font-size: 16px; line-height: 1.42; }
  .adv-card em, .adv-card.active em, .adv-card:hover em, .adv-card:focus-visible em {
    max-height: 72px;
    margin-top: 5px;
    overflow: visible;
    opacity: 1;
    font-size: 12px;
    line-height: 1.45;
    transform: none;
    transition: none;
  }
  .advantages .interaction-tip { display: none; }
}

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