/* ============================================================
design-system.css — 全站设计系统（基础层）
------------------------------------------------------------
定位：cn-wzwh 全站唯一的设计系统基础层。
职责：设计 token（单一来源） + 跨页通用组件 + 通用动效 + 子页首屏组件。
用法：每个页面首个引入本文件；首页（homepage-v4）作为第一个落地实例，
在 design-system 之上叠加 styles.css（首页布局）与 enhance.css（首页惊艳层）。
加载顺序：design-system.css → styles.css（首页实例）→ enhance.css（首页惊艳）
后续内页：design-system.css → 页面自己的 page-xxx.css 即可复用以下全部组件。
说明：
- 本文件所有取值对齐 homepage-v4 当前生效视觉（V4.1/V4.2/V4.3 综合），
因此首页挂载本层后视觉不变，仅为后续页面提供可复用基础。
- polish.css 的内容已并入本层（语义 token 为同值冗余、焦点环/表单态/scroll
偏移/reduced-motion 为本层新增能力），enhance.css 的通用排版/eyebrow 装饰/
reveal 也已并入本层，enhance.css 现仅保留首页特有惊艳。
============================================================ */
/* ---------- 1. 设计 Token（单一来源） ---------- */
:root{
/* 颜色 */
--navy:#002964;
--navy-950:#071a2c;
--navy-900:#0b2642;
--navy-800:#12395e;
--red:#cf1c32;
--red-dark:#ae1428;
--orange:#e95e3a;
--orange-light:#ff9a78;
--red-tint:#f9e9ec;
--navy-tint:rgba(0,41,100,.035);
--navy-overlay:rgba(7,26,44,.72);
--navy-shadow:rgba(7,26,44,.12);
--ink:#101922;
--muted:#5c6672;
--line:#dce2e8;
--soft:#f4f6f8;
--warm:#fbfaf7;
--white:#fff;
--ok:#1f7a3d;
--focus-navy:#002964;
/* 字体 */
--font-sans:"Microsoft YaHei","PingFang SC",Arial,sans-serif;
--serif:"Songti SC","STSong","SimSun","Noto Serif SC",serif;
/* 布局 */
--container:1240px;
--shadow:0 24px 70px rgba(9,31,52,.12);
/* 圆角 */
--radius:6px;
--radius-sm:3px;
--radius-lg:10px;
/* 间距（4 / 8 体系，见设计规范 SOP） */
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
--space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
--space-12:48px;--space-16:64px;--space-18:72px;--space-20:88px;
/* 动效 */
--dur:.2s;
--dur-slow:.6s;
--ease:cubic-bezier(.2,.7,.2,1);
}
/* ---------- 2. 基础重置 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--white);font-family:var(--font-sans);line-height:1.75;-webkit-font-smoothing:antialiased;font-kerning:normal;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
/* ---------- 3. 排版 ---------- */
h1,h2,h3,h4{margin:0;font-weight:800;color:var(--navy-950);line-height:1.25;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(34px,5vw,56px)}
h2{font-size:clamp(26px,3.4vw,38px)}
h3{font-size:clamp(19px,2vw,22px)}
p,li{text-wrap:pretty}
em{font-style:normal}
/* ---------- 4. 布局原语 ---------- */
.container{width:min(calc(100% - 48px),var(--container));margin-inline:auto}
.skip-link{position:fixed;left:16px;top:-80px;z-index:1000;background:var(--white);padding:10px 16px}
.skip-link:focus{top:12px}
.section{padding:var(--space-20) 0}
.section-heading{margin-bottom:var(--space-10)}
.section-heading h2{font-size:clamp(26px,3.4vw,38px)}
.section-heading>p:last-child{color:var(--muted);font-size:16px;max-width:60ch}
/* 编辑式 eyebrow：前置短红规（全站统一小标签性格） */
.eyebrow{position:relative;padding-left:34px;margin:0 0 16px;font-size:14px;font-weight:800;letter-spacing:.1em;color:var(--red)}
.eyebrow:before{content:"";position:absolute;left:0;top:50%;width:24px;height:3px;background:var(--red);transform:translateY(-50%);border-radius:2px}
/* ---------- 5. 通用卡片 / 标签 ---------- */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-6);box-shadow:0 12px 30px var(--navy-shadow)}
.tag{display:inline-flex;padding:6px 12px;border-radius:999px;background:var(--red-tint);color:var(--red);font-size:13px;font-weight:800}
/* ---------- 6. 页头 / 导航（全站通用） ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);box-shadow:0 1px 0 rgba(0,41,100,.12);backdrop-filter:blur(12px)}
.utility{background:var(--navy-950);color:#d9e4ee;font-size:13px}
.utility-inner{width:min(calc(100% - 48px),var(--container));margin-inline:auto;height:34px;display:flex;align-items:center;justify-content:space-between}
.utility a{font-weight:700;color:var(--white)}
.nav-shell{width:min(calc(100% - 48px),var(--container));margin-inline:auto;height:84px;display:flex;align-items:center;gap:28px}
.logo{width:185px;flex:0 0 auto;height:70px;overflow:hidden;display:flex;align-items:center}
.logo img{width:185px}
.main-nav{margin-left:auto;display:flex;align-items:center;gap:26px;font-size:15px}
.main-nav a{position:relative;padding:28px 0}
.main-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:18px;height:2px;background:var(--red);transition:var(--dur)}
.main-nav a:hover:after{right:0}
.menu-button{display:none}
/* ---------- 7. 按钮 / 链接 ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:1px solid var(--red);border-radius:6px;background:var(--red);color:var(--white);font-weight:700;letter-spacing:.01em;box-shadow:none;transition:var(--dur);cursor:pointer}
.button:hover{background:var(--red-dark);transform:translateY(-1px)}
.button-outline{background:transparent;color:var(--navy);border-color:var(--navy);box-shadow:none}
.button-outline:hover{color:var(--white);background:var(--navy)}
.nav-cta{min-height:42px;padding-inline:18px;white-space:nowrap}
.text-link{display:inline-flex;align-items:center;gap:6px;color:var(--navy);font-weight:700}
.text-link span{color:var(--red);transition:transform var(--dur)}
.text-link:hover span{transform:translateX(4px)}
.text-link.light{color:var(--white)}
.action-link{display:inline-flex;align-items:center;gap:18px;min-height:44px;padding:0 4px 7px;color:var(--navy);font-weight:800;border-bottom:2px solid var(--red);white-space:nowrap}
.action-link span{color:var(--red);transition:transform var(--dur)}
.action-link:hover span{transform:translateX(4px)}
.price-label{display:inline-flex;margin:0 0 16px;padding:7px 13px;background:var(--red-tint);color:var(--red);font-size:14px;font-weight:800;letter-spacing:.1em}
.price-link{display:inline-flex;align-items:center;gap:28px;min-height:52px;padding:0 22px;background:var(--navy);color:var(--white);font-weight:800;border-radius:5px;transition:transform var(--dur),background var(--dur)}
.price-link span{color:var(--orange-light);font-size:20px}
/* ---------- 8. 表单 ---------- */
.submit-button{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;padding:0 0 0 22px;border:0;border-radius:5px;background:var(--navy);color:var(--white);font-weight:800;cursor:pointer;overflow:hidden;transition:var(--dur)}
.submit-button b{display:grid;place-items:center;align-self:stretch;width:58px;background:var(--red);font-size:20px}
.submit-button:hover{background:var(--navy-800)}
.submit-button .spinner{display:none;width:18px;height:18px;flex:0 0 auto;border:2px solid rgba(255,255,255,.45);border-top-color:var(--white);border-radius:50%;animation:spin .7s linear infinite}
.submit-button[aria-busy="true"]{cursor:progress;opacity:.9}
.submit-button[aria-busy="true"] .spinner{display:inline-block}
.submit-button[aria-busy="true"] b{display:none}
.submit-button[aria-busy="true"] span{opacity:.7}
@keyframes spin{to{transform:rotate(360deg)}}
.form-status{margin:14px 0 0;font-size:15px}
.form-status.is-success{color:var(--ok);font-weight:700}
.form-status.is-error{color:var(--red);font-weight:700}
.form-status.is-success::before{content:"\2713 ";font-weight:800}
.form-status.is-error::before{content:"! ";font-weight:800}
/* 可选 .field 组件：后续页面复用；首页表单暂用浏览器默认样式 */
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field label{font-weight:700;font-size:14px;color:var(--navy-900)}
.field em{color:var(--red);font-style:normal}
.field input,.field textarea{border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;font-size:15px;color:var(--ink);background:var(--white);transition:border-color var(--dur),box-shadow var(--dur)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-tint)}
/* ---------- 9. 页脚（全站通用） ---------- */
.site-footer{background:var(--navy-950);color:#cdd9e6;padding:64px 0 0;font-size:14px}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:40px}
.footer-grid h3{color:var(--white);font-size:15px;margin:0 0 16px}
.footer-grid a{display:block;color:#cdd9e6;padding:7px 0;transition:color var(--dur)}
.footer-grid a:hover{color:var(--white)}
.footer-phone{font-weight:800;color:var(--white)!important}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding:18px 0;font-size:13px}
.footer-bottom .container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-bottom a,.footer-bottom span{color:#9fb0c0}
.footer-logo-wrap{display:inline-flex;padding:8px 12px;background:var(--white);border-radius:var(--radius-sm)}
.footer-inner{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;align-items:start}
.footer-brand img{display:block;margin-bottom:16px}
.footer-brand p{margin:0;color:#9fb0c0;font-size:13px;line-height:1.6}
.footer-col h4{color:var(--white);font-size:15px;margin:0 0 16px}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li a{display:block;color:#cdd9e6;padding:6px 0;transition:color var(--dur)}
.footer-col li a:hover{color:var(--white)}
@media(max-width:760px){
.footer-inner{grid-template-columns:1fr 1fr;gap:28px}
.footer-brand{grid-column:1 / -1}
}
/* ---------- 10. 微信弹窗 / 移动端快捷栏（全站通用） ---------- */
.wechat-dialog{width:min(92vw,380px);padding:28px 24px 24px;border:0;border-radius:var(--radius-lg);color:var(--ink);text-align:center;box-shadow:0 28px 80px var(--navy-overlay)}
.wechat-dialog::backdrop{background:var(--navy-overlay);backdrop-filter:blur(3px)}
.wechat-dialog p{margin:0;color:var(--red);font-size:13px;font-weight:800;letter-spacing:.12em}
.wechat-dialog h2{margin:6px 0 18px;color:var(--navy-950);font-size:25px}
.wechat-dialog img{display:block;width:min(260px,78vw);max-height:390px;object-fit:contain;margin:0 auto 14px;background:var(--white);-webkit-touch-callout:default;user-select:auto}
.wechat-dialog>span{display:block;color:var(--muted);font-size:12px}
.dialog-close{position:absolute;right:10px;top:8px;width:38px;height:38px;border:0;background:transparent;color:#68737f;font-size:27px;cursor:pointer}
.mobile-actions{display:none}
.mobile-actions a,.mobile-actions button{font:inherit;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--navy);font-size:13px;font-weight:800;border:0;border-right:1px solid #e3e7eb;background:var(--white)}
.mobile-actions a:last-child,.mobile-actions button:last-child{border:0}
.mobile-actions a:nth-child(2){background:var(--red);color:var(--white)}
.mobile-actions i{font-style:normal;font-size:17px}
.mobile-actions span{display:inline}
/* ---------- 11. 键盘焦点 / 激活反馈（高对比，对任意背景可见） ---------- */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{outline:none;box-shadow:0 0 0 2px var(--white),0 0 0 5px var(--focus-navy);border-radius:4px}
.site-header *:focus-visible{box-shadow:0 0 0 2px var(--warm),0 0 0 5px var(--focus-navy)}
.button:active{transform:translateY(1px);background:var(--red-dark)}
.button-outline:active{transform:translateY(1px)}
.nav-cta:active{transform:translateY(1px)}
.price-link:active{transform:translateY(1px)}
/* 锚点跳转偏移：避开粘性页头遮挡 */
section[id],main[id]{scroll-margin-top:112px}
/* ---------- 12. 通用动效 ---------- */
/* 滚动入场：默认可见，仅 JS 就绪（）才先隐藏再揭示，避免无 JS 丢内容 */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity var(--dur-slow) ease,transform var(--dur-slow) var(--ease)}
.js .reveal.is-visible{opacity:1;transform:none}
.hover-lift{transition:transform var(--dur),box-shadow var(--dur)}
.hover-lift:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
/* 尊重减弱动效偏好 */
@media (prefers-reduced-motion:reduce){
*{scroll-behavior:auto!important;transition:none!important;animation:none!important}
.js .reveal{opacity:1!important;transform:none!important}
.submit-button .spinner{animation:none}
}
/* ---------- 13. 子页首屏组件 .page-hero（后续内页复用，不依赖大图 banner） ----------
用法：
需要背景图时加修饰类 .page-hero--media 并通过 --hero-media 传图：
*/
.page-hero{position:relative;padding:120px 0 72px;background:linear-gradient(160deg,var(--navy-950),var(--navy-900));color:var(--white);overflow:hidden}
.page-hero .container{position:relative;z-index:1}
.page-hero .breadcrumb{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:#9fb0c0;margin-bottom:18px}
.page-hero .breadcrumb a{color:#9fb0c0}
.page-hero .breadcrumb a:hover{color:var(--white)}
.page-hero .breadcrumb span{color:#5e7184}
.page-hero h1{color:var(--white);font-size:clamp(30px,4vw,46px)}
.page-hero .lede{color:#cdd9e6;font-size:18px;max-width:62ch;margin:18px 0 0}
.page-hero .page-cta{margin-top:28px;display:flex;gap:16px;flex-wrap:wrap}
.page-hero .page-cta .button-outline{color:var(--white);border-color:rgba(255,255,255,.5)}
.page-hero .page-cta .button-outline:hover{background:rgba(255,255,255,.12);color:var(--white)}
.page-hero--media{background:linear-gradient(160deg,rgba(7,26,44,.92),rgba(11,38,66,.92)),var(--hero-media,url('')) center/cover no-repeat}