/* ============================================================
   Suanics — 公共样式表 (浅色工程美学)
   ============================================================ */

/* ---------- 字体 ---------- */
/* Google Sans — 英文主字体 */
@font-face {
    font-family: 'Google Sans';
    src: url('fonts/GoogleSans-Regular.woff2') format('woff2'),
         url('fonts/GoogleSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Google Sans';
    src: url('fonts/GoogleSans-Medium.woff2') format('woff2'),
         url('fonts/GoogleSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Google Sans';
    src: url('fonts/GoogleSans-SemiBold.woff2') format('woff2'),
         url('fonts/GoogleSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Google Sans';
    src: url('fonts/GoogleSans-Bold.woff2') format('woff2'),
         url('fonts/GoogleSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* OPPO Sans — 中文主字体 */
@font-face {
    font-family: 'OPPO Sans';
    src: url('fonts/OPPOSans4.0.woff2') format('woff2'),
         url('fonts/OPPOSans4.0.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
}

/* ---------- 设计令牌 ---------- */
:root {
    /* 色彩 — 浅色高端主题 */
    --ink:        #f0f4f8;
    --surface:    #ffffff;
    --surface-2:  #e8ecf1;
    --border:     rgba(0,0,0,.08);
    --border-h:   rgba(0,0,0,.15);
    --cyan:       #0C6DB2;
    --cyan-dim:   rgba(12,109,178,.1);
    --electric:   #1a8fe3;
    --violet:     #4a6cf7;

    /* 语义色 */
    --teal:       #0d9488;
    --teal-dim:   rgba(13,148,136,.1);
    --amber:      #d97706;
    --amber-dim:  rgba(217,119,6,.1);
    --rose:       #e11d48;
    --rose-dim:   rgba(225,29,72,.08);
    --emerald:    #059669;
    --emerald-dim: rgba(5,150,105,.1);
    --heading:    #0f172a;
    --text:       #334155;
    --muted:      #576373;
    --accent:     linear-gradient(135deg, #0C6DB2, #1a8fe3);

    /* 排版层级 — 1.25 模块化比例 */
    --text-2xs:  0.625rem;  /* 10px — 标签、角标 */
    --text-xs:   0.75rem;   /* 12px — 标注、法律文本 */
    --text-sm:   0.8125rem; /* 13px — 次要 UI、元数据 */
    --text-base: 1rem;      /* 16px — 正文 */
    --text-md:   1.125rem;  /* 18px — 卡片标题、副文本 */
    --text-lg:   1.375rem;  /* 22px — 子标题 */
    --text-xl:   clamp(1.75rem, 3.5vw, 2.5rem);  /* 28-40px — CTA 标题 */
    --text-2xl:  clamp(2rem, 4vw, 2.75rem);       /* 32-44px — 区块标题 */
    --text-3xl:  clamp(2.25rem, 5vw, 3rem);       /* 36-48px — Banner 标题 */
    --text-hero: clamp(2.25rem, 5.5vw, 3.75rem);  /* 36-60px — Hero 显示 */

    /* 间距 */
    --pad:   clamp(20px, 5vw, 100px);
    --gap:   clamp(16px, 3vw, 32px);
    --nav-h: 72px;

    /* 阴影 — 使用内边框和微调色阴影，避免外发光 */
    --shadow-sm: 0 2px 8px rgba(0,0,0,.04);
    --shadow: 0 4px 16px rgba(0,0,0,.06);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.08);
}

/* ---------- 全局重置 ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body {
    font-family: "Google Sans", "OPPO Sans", "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: var(--text-base); color: var(--text); line-height: 1.7;
    background: var(--ink);
    -webkit-font-smoothing: antialiased;
    font-kerning: normal;
    cursor: url('images/cursor-default.cur') 10 10, auto;
}

/* 标题排版 — 渐进增强，旧浏览器自动回退 */
@supports (text-wrap: balance) {
    h1, h2, h3, h4 { text-wrap: balance; }
}
@supports (text-wrap: pretty) {
    p, .intro-text, .card p { text-wrap: pretty; }
}

/* 正文最大行长 — 65ch 舒适阅读 */
.prose, .intro-text, .card p, .hero-sub, .ft-desc {
    max-width: 65ch;
}
/* 微妙的颗粒纹理叠加 — 提升质感 */
body::after {
    content: ''; position: fixed; inset: 0; z-index: 1;
    pointer-events: none; opacity: .015;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
}
a { text-decoration: none; color: inherit; transition: color .3s; cursor: url('images/cursor-link.cur') 10 10, pointer; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

/* 可点击元素光标 */
button, [role="button"], input[type="submit"], .btn, .nav-item > span {
    cursor: url('images/cursor-link.cur') 10 10, pointer;
}

/* 等待/加载状态光标 */
.loading, [aria-busy="true"], .page-loader.active {
    cursor: url('images/cursor-work.cur') 10 10, wait !important;
}

/* ---------- 按钮 ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 36px; font-size: var(--text-sm); font-weight: 500;
    border-radius: 8px; border: none; cursor: url('images/cursor-link.cur') 10 10, pointer;
    transition: all .35s cubic-bezier(.4,0,.2,1);
    text-decoration: none; letter-spacing: .3px;
    position: relative; overflow: hidden;
}
.btn::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,.25) 0%, transparent 60%);
    opacity: 0; transition: opacity .35s;
}
.btn:hover::after { opacity: 1; }
/* 触觉反馈 — 按下时微缩 */
.btn:active { transform: scale(0.97); }
.btn-primary {
    background: var(--accent); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 4px 16px rgba(12,109,178,.2);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 24px rgba(12,109,178,.28);
}
.btn-primary:active {
    transform: translateY(0) scale(0.97);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 2px 8px rgba(12,109,178,.15);
}
.btn-outline {
    border: 1px solid var(--border-h); color: var(--heading); background: transparent;
}
.btn-outline:hover {
    border-color: var(--cyan); color: var(--cyan);
    background: var(--cyan-dim);
}
.btn-outline:active { transform: scale(0.97); }
.btn-white {
    border: 1px solid rgba(0,0,0,.15); color: var(--heading); background: transparent;
    padding: 14px 36px; font-size: var(--text-sm); font-weight: 500;
    border-radius: 8px; cursor: url('images/cursor-link.cur') 10 10, pointer; text-decoration: none;
    transition: all .35s cubic-bezier(.4,0,.2,1); display: inline-flex;
    align-items: center; gap: 10px; letter-spacing: .3px;
}
.btn-white:hover {
    border-color: var(--cyan); color: var(--cyan);
    background: var(--cyan-dim);
}
.btn-white:active { transform: scale(0.97); }

/* ---------- 导航栏 ---------- */
.header { position: relative; width: 100%; }
.navbar {
    position: fixed; left: 0; top: 0; width: 100%; z-index: 99;
    height: var(--nav-h); transition: all .5s cubic-bezier(.4,0,.2,1);
}
.navbar.scrolled {
    background: rgba(255,255,255,.85);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    border-bottom: 1px solid var(--border);
}
.nav-inner {
    padding: 0 var(--pad); height: 100%;
    display: flex; align-items: center; justify-content: space-between;
}
.nav-logo a {
    display: flex; align-items: center; height: var(--nav-h);
    font-size: var(--text-md); font-weight: 700; color: var(--heading); letter-spacing: 1px;
    transition: all .4s;
}
.nav-logo img { height: 36px; width: auto; opacity: .9; transition: opacity .3s; }
.nav-logo a:hover img { opacity: 1; }
.nav-center { display: flex; gap: 0; position: relative; }
.nav-item { position: relative; }
.nav-item > a, .nav-item > span {
    display: flex; align-items: center; height: var(--nav-h);
    padding: 0 18px; font-size: var(--text-sm); color: rgba(0,0,0,.55);
    white-space: nowrap; transition: color .3s; position: relative;
}
.nav-item > a::after, .nav-item > span::after {
    content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px;
    background: var(--accent); transition: all .3s; transform: translateX(-50%);
    border-radius: 1px;
}
.nav-item > a:hover::after, .nav-item > span:hover::after { width: 60%; }
.nav-item > a:hover, .nav-item > span:hover { color: var(--heading); }
.nav-item > a.active { color: var(--cyan); }
.nav-item > a.active::after { width: 60%; }
.nav-item > span { cursor: url('images/cursor-link.cur') 10 10, pointer; }

/* Ant Design 图标 */
.ant-icon { display: inline-block; width: 1em; height: 1em; vertical-align: middle; fill: currentColor; }
.submenu-arrow { display: inline-flex; width: 10px; height: 10px; margin-left: 6px; vertical-align: middle; fill: currentColor; }

/* 下拉菜单 */
.nav-item:hover .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(12px);
    background: rgba(255,255,255,.95); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    min-width: 200px; padding: 10px 0;
    border-radius: 12px; box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.6);
    opacity: 0; visibility: hidden; transition: all .3s cubic-bezier(.4,0,.2,1);
    white-space: nowrap;
}
.dropdown a {
    display: block; padding: 11px 20px; font-size: var(--text-sm); color: var(--text);
    transition: all .25s; border-radius: 6px; margin: 2px 8px;
}
.dropdown a:hover { background: var(--cyan-dim); color: var(--cyan); }

/* 三级菜单 */
.has-submenu { position: relative; }
.has-submenu > a { display: flex; align-items: center; justify-content: space-between; }
.has-submenu > a::after { content: none; }
.has-submenu:hover .sub-dropdown { opacity: 1; visibility: visible; }
.sub-dropdown {
    position: absolute; left: 100%; top: -10px;
    background: rgba(255,255,255,.95); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    min-width: 180px; padding: 10px 0;
    border-radius: 12px; box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.6);
    opacity: 0; visibility: hidden; transition: all .3s;
}
.sub-dropdown a {
    display: block; padding: 11px 20px; font-size: var(--text-sm); color: var(--text);
    transition: all .25s; border-radius: 6px; margin: 2px 8px;
}
.sub-dropdown a:hover { background: var(--cyan-dim); color: var(--cyan); }

.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-lang-dropdown { position: relative; }
.nav-lang {
    font-size: var(--text-sm); color: rgba(0,0,0,.45); cursor: url('images/cursor-link.cur') 10 10, pointer; transition: all .3s;
    padding: 6px 14px; border-radius: 6px; letter-spacing: .5px;
}
.nav-lang:hover { color: var(--heading); background: rgba(0,0,0,.05); }
.nav-lang-menu {
    position: absolute; top: 100%; right: 0; margin-top: 8px;
    background: rgba(255,255,255,0.95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid var(--border); border-radius: 8px; padding: 6px 0;
    min-width: 120px; box-shadow: 0 8px 32px rgba(0,0,0,.12);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: all .25s cubic-bezier(.16,1,.3,1);
    z-index: 100;
}
.nav-lang-dropdown:hover .nav-lang-menu,
.nav-lang-dropdown.open .nav-lang-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-lang-option {
    display: block; padding: 8px 16px; font-size: var(--text-sm);
    color: var(--muted); text-decoration: none; transition: all .2s;
}
.nav-lang-option:hover { background: var(--cyan-dim); color: var(--cyan); }
.nav-lang-option.active { color: var(--cyan); font-weight: 600; }

/* 汉堡菜单（基础样式在焦点指示器区块定义） */

/* ---------- 页面 Banner ---------- */
.page-banner {
    background: linear-gradient(170deg, #e0ecfa 0%, #f0f4f8 35%, var(--surface) 70%, #f0f4f8 100%);
    background-size: 200% 200%;
    animation: bannerGradientShift 8s ease-in-out infinite alternate;
    color: var(--heading); padding: calc(var(--nav-h) + 80px) var(--pad) 80px;
    text-align: center; position: relative; overflow: hidden;
    border-bottom: 1px solid var(--border);
}
@keyframes bannerGradientShift {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}
/* 右上光晕 — 呼吸动画 */
.page-banner::before {
    content: ''; position: absolute; top: -150px; right: -100px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(12,109,178,.2) 0%, transparent 70%);
    border-radius: 50%; pointer-events: none;
    animation: bannerGlow 6s ease-in-out infinite alternate;
}
@keyframes bannerGlow {
    0% { transform: scale(1); opacity: .8; }
    100% { transform: scale(1.15); opacity: 1; }
}
/* 左下辅助光晕 */
.page-banner::after {
    content: ''; position: absolute; bottom: -100px; left: -80px;
    width: 350px; height: 350px;
    background: radial-gradient(circle, rgba(26,143,227,.14) 0%, transparent 70%);
    border-radius: 50%; pointer-events: none;
    animation: bannerGlow 8s ease-in-out infinite alternate-reverse;
}
/* SVG 电路纹理叠加 */
.banner-circuit {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0; opacity: .12;
}
/* 装饰几何 — 增强版 */
.banner-deco {
    position: absolute; pointer-events: none; z-index: 0;
}
.banner-deco-1 {
    width: 140px; height: 140px; top: 20%; left: 8%;
    border: 1.5px solid rgba(12,109,178,.25); border-radius: 20px;
    transform: rotate(12deg);
    animation: bannerFloat 10s ease-in-out infinite;
}
.banner-deco-2 {
    width: 100px; height: 100px; bottom: 15%; right: 10%;
    border: 1.5px solid rgba(26,143,227,.22); border-radius: 50%;
    animation: bannerFloat 8s ease-in-out infinite reverse;
}
.banner-deco-3 {
    width: 60px; height: 60px; top: 30%; right: 15%;
    background: rgba(12,109,178,.12); border-radius: 12px;
    transform: rotate(45deg);
    animation: bannerFloat 12s ease-in-out infinite 1s;
}
.banner-deco-line {
    width: 120px; height: 1.5px; bottom: 25%; left: 6%;
    background: linear-gradient(90deg, transparent, rgba(12,109,178,.35), transparent);
    transform: rotate(-15deg);
}
@keyframes bannerFloat {
    0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
    50% { transform: translateY(-10px) rotate(var(--r, 0deg)); }
}
.banner-deco-1 { --r: 12deg; }
.banner-deco-3 { --r: 45deg; }

/* 底部渐变线 */
.banner-bottom-line {
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px; z-index: 1;
    background: linear-gradient(90deg, transparent 10%, rgba(12,109,178,.4) 50%, transparent 90%);
}

.banner-content { position: relative; z-index: 1; }
/* 文字揭示动画 — 逐行模糊→清晰 */
.banner-content h1 {
    animation: bannerTextReveal .8s cubic-bezier(.16,1,.3,1) both;
    filter: blur(8px);
}
.banner-content p {
    animation: bannerTextReveal .8s cubic-bezier(.16,1,.3,1) .2s both;
    filter: blur(6px);
}
@keyframes bannerTextReveal {
    from { opacity: 0; transform: translateY(24px); filter: blur(8px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.page-banner h1 {
    font-size: var(--text-3xl); font-weight: 700; letter-spacing: 1px; margin-bottom: 16px;
    color: var(--heading);
}
@supports (text-wrap: balance) {
    .page-banner h1 { text-wrap: balance; }
}
.page-banner p {
    font-size: var(--text-base); color: var(--muted); max-width: 580px; margin: 0 auto; line-height: 1.8;
}

/* ---------- 发光线分隔符 ---------- */
.glow-line {
    width: 100%; height: 1px; position: relative;
    background: var(--border);
}
.glow-line::after {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 200px; height: 1px;
    background: var(--accent);
    box-shadow: 0 0 12px 2px rgba(12,109,178,.15);
    animation: glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse {
    0%, 100% { width: 200px; box-shadow: 0 0 12px 2px rgba(12,109,178,.15); }
    50% { width: 280px; box-shadow: 0 0 20px 4px rgba(12,109,178,.25); }
}

/* ---------- 通用区块 ---------- */
.section-pad { padding: clamp(60px, 8vw, 120px) var(--pad); position: relative; }
.section-dark { background: var(--surface); }
.section-title {
    font-size: var(--text-2xl); font-weight: 700; color: var(--heading);
    letter-spacing: -0.5px; line-height: 1.2;
}
@supports (text-wrap: balance) {
    .section-title { text-wrap: balance; }
}
.section-sub {
    font-size: var(--text-base); color: var(--muted); line-height: 1.8; margin-top: 16px;
    max-width: 600px;
}
.sec-label {
    font-size: var(--text-xs); color: var(--cyan); letter-spacing: 3px; display: inline-block;
    font-weight: 600; text-transform: uppercase;
    margin-bottom: 12px;
}

/* ---------- CTA ---------- */
.cta {
    background: linear-gradient(170deg, #dce8f8 0%, #e8f0fe 30%, #f0f4f8 70%, var(--surface) 100%);
    padding: clamp(60px, 8vw, 100px) var(--pad); text-align: center;
    position: relative; overflow: hidden;
    border-top: 1px solid rgba(12,109,178,.12);
}
.cta::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 400px; height: 2px;
    background: var(--accent); opacity: .35;
}
.cta::after {
    content: ''; position: absolute; top: -200px; right: -100px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(12,109,178,.08) 0%, transparent 65%);
    border-radius: 50%; pointer-events: none;
}
.cta-content { position: relative; z-index: 1; }
.cta h2 {
    font-size: var(--text-xl); font-weight: 700; color: var(--heading);
    margin-bottom: 16px; letter-spacing: 0.5px;
}
@supports (text-wrap: balance) {
    .cta h2 { text-wrap: balance; }
}
.cta p { font-size: var(--text-base); color: var(--muted); margin-bottom: 40px; }

/* ---------- 页脚 ---------- */
.footer {
    background: var(--surface); color: var(--text);
    padding: 80px var(--pad) 40px;
    border-top: 1px solid var(--border);
    content-visibility: auto; contain-intrinsic-size: auto 400px;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
.ft-col h4 {
    font-size: var(--text-sm); color: var(--heading); margin-bottom: 20px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px;
}
.ft-col .ft-brand { display: inline-block; margin-bottom: 16px; }
.ft-logo { height: 40px; width: auto; opacity: .8; }
.ft-col .ft-desc { font-size: var(--text-sm); color: var(--muted); line-height: 1.8; }
.ft-col a { font-size: var(--text-sm); color: var(--muted); display: block; margin-bottom: 10px; transition: color .3s; }
.ft-col a:hover { color: var(--cyan); }
.ft-bottom {
    margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    font-size: var(--text-sm); color: var(--muted); opacity: .6;
}

/* ---------- 浮动联系按钮 ---------- */
.float-contact {
    position: fixed; right: 24px; bottom: 92px; z-index: 1000;
    width: 52px; height: 52px; border-radius: 12px;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 4px 16px rgba(12,109,178,.25);
    transition: all .35s cubic-bezier(.4,0,.2,1); cursor: url('images/cursor-link.cur') 10 10, pointer; text-decoration: none;
}
.float-contact:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 24px rgba(12,109,178,.3);
}
.float-contact:active { transform: translateY(0) scale(0.95); }
.float-contact svg { width: 22px; height: 22px; }

@media (max-width: 480px) {
    .float-contact { right: 16px; bottom: 80px; width: 48px; height: 48px; }
    .float-contact svg { width: 20px; height: 20px; }
}

/* ---------- 返回顶部按钮 ---------- */
.back-to-top {
    position: fixed; right: 24px; bottom: 24px; z-index: 1000;
    width: 44px; height: 44px; border-radius: 10px;
    background: var(--surface-2); color: var(--muted);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: all .35s cubic-bezier(.4,0,.2,1); cursor: url('images/cursor-link.cur') 10 10, pointer; text-decoration: none;
    opacity: 0; visibility: hidden; transform: translateY(12px);
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover {
    color: var(--cyan); border-color: var(--cyan);
    background: var(--cyan-dim);
    box-shadow: var(--shadow);
}
.back-to-top:active { transform: translateY(0) scale(0.95); }
.back-to-top svg { width: 18px; height: 18px; }

@media (max-width: 480px) {
    .back-to-top { right: 16px; bottom: 16px; width: 40px; height: 40px; }
}

/* ---------- 滚动淡入 — 弹性缓动 ---------- */
.fade-up {
    opacity: 0; transform: translateY(32px);
    transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* 列表交错入场 — 用于卡片网格 */
.fade-up.stagger > * {
    opacity: 0; transform: translateY(24px);
    transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.fade-up.stagger.visible > * {
    opacity: 1; transform: translateY(0);
}
.fade-up.stagger.visible > * { transition-delay: calc(var(--i, 0) * 60ms); }

.fade-left {
    opacity: 0; transform: translateX(-32px);
    transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.fade-left.visible { opacity: 1; transform: translateX(0); }

.fade-right {
    opacity: 0; transform: translateX(32px);
    transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.fade-right.visible { opacity: 1; transform: translateX(0); }

.fade-scale {
    opacity: 0; transform: scale(.96);
    transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.fade-scale.visible { opacity: 1; transform: scale(1); }

/* ---------- 焦点指示器 ---------- */
:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
    border-radius: 4px;
}
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.btn-white:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(12,109,178,.15);
}
.pdt-tab:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}
.nav-item > a:focus-visible {
    outline: none;
    color: var(--heading);
}
.nav-item > a:focus-visible::after { width: 60%; }

/* 跳过导航链接 — 仅键盘可见 */
.skip-link {
    position: fixed; top: -100%; left: 16px; z-index: 10001;
    background: var(--cyan); color: #fff; padding: 12px 24px;
    border-radius: 0 0 8px 8px; font-size: var(--text-sm); font-weight: 600;
    transition: top .2s;
}
.skip-link:focus { top: 0; }

/* 下拉菜单键盘焦点 */
.nav-item:focus-within > .dropdown,
.nav-item:focus-within > .sub-dropdown {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.navbar.nav-open .has-submenu:focus-within .sub-dropdown,
.navbar.nav-open .has-submenu:focus-within > .dropdown {
    opacity: 1; visibility: visible;
}

/* 汉堡按钮无障碍 */
.hamburger {
    background: none; border: none; font: inherit;
    display: none; flex-direction: column; gap: 5px;
    cursor: url('images/cursor-link.cur') 10 10, pointer; z-index: 100; padding: 8px;
}
.hamburger span { display: block; width: 22px; height: 2px; background: rgba(0,0,0,.6); transition: all .3s; border-radius: 1px; }

/* 浮动按钮无障碍 */
.float-contact svg { pointer-events: none; }

/* 表单验证错误样式 */
.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select {
    border-color: #e11d48;
    box-shadow: 0 0 0 3px rgba(225,29,72,.1);
}
.form-group .form-error {
    font-size: var(--text-xs); color: #e11d48; margin-top: 6px; display: none;
    line-height: 1.4;
}
.form-group.has-error .form-error { display: block; }

/* 表单提交按钮加载态 */
.btn-submit:disabled {
    opacity: .6; cursor: not-allowed; transform: none;
    box-shadow: none;
}

/* ---------- 页面加载遮罩 — 骨架屏 + 闪光效果 ---------- */
.page-loader {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--ink);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity .4s ease, visibility 0s .4s;
}
.page-loader.active { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s 0s; }

/* 骨架屏容器 */
.skeleton-screen {
    width: min(800px, 88vw);
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(28px, 5vw, 56px);
}

/* 导航栏骨架 */
.sk-nav {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    height: 40px;
}
.sk-logo { width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; }
.sk-nav-items { display: flex; gap: 20px; }
.sk-nav-item { width: 52px; height: 14px; border-radius: 4px; }

/* Hero 区域骨架 */
.sk-hero {
    display: flex; flex-direction: column; align-items: center;
    gap: 16px; width: 100%;
}
.sk-heading { width: 62%; height: 44px; border-radius: 8px; }
.sk-subtitle { width: 38%; height: 20px; border-radius: 4px; }
.sk-buttons { display: flex; gap: 16px; margin-top: 6px; }
.sk-btn { width: 140px; height: 48px; border-radius: 8px; }

/* 统计卡片骨架 */
.sk-cards {
    width: 100%; display: flex; gap: 20px;
}
.sk-card { flex: 1; height: 84px; border-radius: 12px; }

/* 闪光动画 */
.sk-shimmer {
    background: linear-gradient(
        110deg,
        rgba(0,0,0,0.065) 25%,
        rgba(0,0,0,0.018) 48%,
        rgba(0,0,0,0.065) 71%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.8s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 骨架屏响应式 */
@media (max-width: 600px) {
    .sk-nav-items { display: none; }
    .sk-heading { width: 82%; height: 30px; }
    .sk-subtitle { width: 56%; height: 16px; }
    .sk-btn { width: 110px; height: 42px; }
    .sk-cards { flex-direction: column; gap: 12px; }
    .sk-card { height: 56px; }
}

/* 图片骨架加载 — ::after伪元素覆盖闪光层 */
.img-loading { position: relative; }
.img-loading::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(110deg, rgba(0,0,0,0.07) 25%, rgba(0,0,0,0.02) 48%, rgba(0,0,0,0.07) 71%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.8s ease-in-out infinite;
    border-radius: inherit;
    pointer-events: none;
}
.img-loading > img { opacity: 0; }
.img-loaded::after { display: none; }
.img-loaded > img { opacity: 1; transition: opacity .5s ease; }

/* ---------- 工具类 ---------- */
.text-gradient {
    background: var(--accent);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 语义色标签 */
.tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--text-2xs); font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
    padding: 4px 10px; border-radius: 6px; line-height: 1;
}
.tag--blue   { background: var(--cyan-dim); color: var(--cyan); }
.tag--teal   { background: var(--teal-dim); color: var(--teal); }
.tag--amber  { background: var(--amber-dim); color: var(--amber); }
.tag--rose   { background: var(--rose-dim); color: var(--rose); }
.tag--emerald { background: var(--emerald-dim); color: var(--emerald); }

/* ---------- 响应式 ---------- */
@media (max-width: 1200px) {
    .nav-item > a { padding: 0 14px; font-size: var(--text-sm); }
}
@media (max-width: 920px) {
    :root { --nav-h: 56px; }
    .navbar { background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); }
    .nav-center { display: none; }
    .nav-lang-dropdown { display: none; }
    .hamburger { display: flex; }
    .navbar.nav-open .nav-center {
        display: flex; flex-direction: column;
        position: absolute; top: var(--nav-h); left: 0; width: 100%;
        background: rgba(255,255,255,.98); padding: 16px var(--pad);
        border-bottom: 1px solid var(--border); z-index: 98;
        animation: slideDown .3s cubic-bezier(.4,0,.2,1);
        -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    }
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-12px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .navbar.nav-open .nav-center .nav-item { width: 100%; }
    .navbar.nav-open .nav-center .nav-item > a {
        height: auto; padding: 14px 0; font-size: var(--text-base); color: var(--heading);
        border-bottom: 1px solid var(--border);
    }
    .navbar.nav-open .dropdown {
        position: static; opacity: 1; visibility: visible;
        transform: none; box-shadow: none; padding: 0 0 8px 16px;
        background: transparent; border: none; border-radius: 0;
    }
    .navbar.nav-open .dropdown a { padding: 10px 0; font-size: var(--text-sm); border-radius: 0; margin: 0; }
    .navbar.nav-open .sub-dropdown {
        position: static; opacity: 1; visibility: visible;
        transform: none; box-shadow: none; padding: 0 0 4px 16px;
        background: transparent; border: none;
    }
    .navbar.nav-open .has-submenu > a::after { content: none; }
    .navbar.nav-open .submenu-arrow { display: none; }
    .navbar.nav-open .hamburger span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
    .navbar.nav-open .hamburger span:nth-child(2) { opacity: 0; }
    .navbar.nav-open .hamburger span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 480px) {
    .btn, .btn-white { padding: 12px 28px; font-size: var(--text-sm); }
    .page-banner { padding: calc(var(--nav-h) + 48px) 20px 48px; }
}

/* ---------- 减少动画偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .fade-up, .fade-left, .fade-right, .fade-scale {
        opacity: 1 !important;
        transform: none !important;
    }
    .fade-up.stagger > * {
        opacity: 1 !important;
        transform: none !important;
    }
    .hero-deco, .banner-deco, .banner-deco-line {
        animation: none !important;
    }
    .page-banner { animation: none !important; }
    .page-banner::before, .page-banner::after { animation: none !important; }
    .banner-content h1, .banner-content p { animation: none !important; filter: none !important; opacity: 1 !important; transform: none !important; }
    .banner-circuit { opacity: .08 !important; }
    .page-loader { display: none !important; }
}

/* ---------- 滚动进度条 ---------- */
.scroll-progress {
    position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 101;
    background: var(--accent);
    transform-origin: left;
    transform: scaleX(0);
    will-change: transform;
    pointer-events: none;
}

/* ---------- Delight: 精致微交互 ---------- */

/* 1. 磁吸按钮 — 鼠标靠近时轻微跟随 */
.btn-magnetic {
    transition: transform .3s cubic-bezier(.16,1,.3,1);
}

/* 2. 卡片 3D 倾斜 — 鼠标位置驱动透视 */
.card-tilt {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s;
}
.card-tilt:hover {
    box-shadow: 0 12px 40px rgba(12,109,178,.12);
}

/* 3. 数字计数器 — 等宽数字 + 动画态 */
.counter-animate {
    font-variant-numeric: tabular-nums;
    display: inline-block;
}
.counter-animate.counting {
    animation: counterPulse .3s ease-out;
}
@keyframes counterPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); color: var(--cyan); }
    100% { transform: scale(1); }
}

/* 4. 导航链接 — 精致下划线动画 */
.nav-item > a {
    position: relative;
}
.nav-item > a::before {
    content: ''; position: absolute; bottom: 12px; left: 20%; width: 60%; height: 2px;
    background: var(--accent); transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .3s cubic-bezier(.16,1,.3,1);
    border-radius: 1px; opacity: 0; transform: scaleX(0); transform-origin: center;
}
.nav-item > a:hover::before { opacity: 1; transform: scaleX(1); }
.nav-item > a.active::before { opacity: 1; transform: scaleX(1); }

/* 5. 表单输入 — 聚焦时的蓝色光晕扩散 */
.form-input-delight {
    transition: border-color .3s, box-shadow .4s cubic-bezier(.16,1,.3,1);
}
.form-input-delight:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 4px rgba(12,109,178,.1), 0 4px 12px rgba(12,109,178,.08);
}

/* 6. 图片悬停 — 精密缩放 */
.img-zoom {
    overflow: hidden;
}
.img-zoom img {
    transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.img-zoom:hover img {
    transform: scale(1.04);
}

/* 7. 浮动按钮 — 脉冲光环 */
.float-contact::before {
    content: ''; position: absolute; inset: -4px;
    border-radius: 14px; border: 2px solid var(--cyan);
    opacity: 0; animation: contactPulse 3s ease-in-out infinite;
}
@keyframes contactPulse {
    0%, 100% { opacity: 0; transform: scale(1); }
    50% { opacity: .3; transform: scale(1.1); }
}

/* 8. 页脚链接 — 精致滑入 */
.ft-col a {
    position: relative; display: block;
}
.ft-col a::after {
    content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px;
    background: var(--cyan); transition: transform .3s cubic-bezier(.16,1,.3,1);
    transform: scaleX(0); transform-origin: left;
}
.ft-col a:hover::after { transform: scaleX(1); }

/* 10. 页面加载 — 精致进度指示 */
.page-loader::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
    background: var(--accent); transition: transform .4s ease-out;
    transform: scaleX(0); transform-origin: left;
}
.page-loader.active::before { transform: scaleX(1); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .card-tilt { transform: none !important; }
    .float-contact::before { animation: none !important; }
    .glow-line::after { animation: none !important; }
    .counter-animate.counting { animation: none !important; }
    .btn-magnetic { transition: none !important; }
}