/* ==========================================================================
   Novizex Design System v2 — 高端工业科技官网
   白皮书 V2.0 规范落地
   - 三层底色：页面 #F7FAFC + 白卡片 + 重点区块渐变底
   - 品牌主渐变：#0066CC → #00CCFF
   - 卡片：圆角12px / 1px #E5EDF5 / 0 2px 12px rgba(0,102,204,.06)
   - 双主题：light（主打）+ dark
   ========================================================================== */

/* ============ Design Tokens ============ */
:root {
    --c-primary: #0066CC;
    --c-primary-light: #0099FF;
    --c-cyan: #00CCFF;
    --c-gradient: linear-gradient(135deg, #0066CC, #00CCFF);
    --c-grad-soft: linear-gradient(180deg, #F0F8FF 0%, #FFFFFF 100%);
    --c-text: #1A2435;
    --c-text-secondary: #4A5568;
    --font-body: 'Inter', -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, Roboto, sans-serif;
    --radius: 12px;
    --radius-sm: 8px;
    --transition: .3s ease;
    --container: 1240px;
    --header-h: 72px;
    --shadow-card: 0 2px 12px rgba(0, 102, 204, .06);
    --shadow-card-hover: 0 10px 30px rgba(0, 102, 204, .14);
    --shadow-btn: 0 4px 14px rgba(0, 102, 204, .28);
}

/* 浅色主题（默认品牌视觉） */
:root[data-theme="light"],
:root:not([data-theme="dark"]) {
    --bg-body: #F7FAFC;
    --bg-card: #FFFFFF;
    --bg-elevated: #F1F6FB;
    --bg-section-alt: #F4FAFF;
    --text-body: #1A2435;
    --text-muted: #4A5568;
    --border-card: #E5EDF5;
    --border-subtle: rgba(26, 36, 53, .08);
    --nav-bg: rgba(255, 255, 255, .92);
    --nav-border: #E5EDF5;
    --footer-bg: #0A0F1A;
    --hover-bg: rgba(0, 102, 204, .06);
    --input-bg: #fff;
    --badge-bg: #EAF3FD;
    --hero-bg: #F0F8FF;
    --shadow-card: 0 2px 12px rgba(0, 102, 204, .06);
}

/* 深色主题 */
:root[data-theme="dark"] {
    --bg-body: #0A0F1A;
    --bg-card: #121A2B;
    --bg-elevated: #16213A;
    --bg-section-alt: #121A2B;
    --text-body: #E6EDF5;
    --text-muted: #9FB0C3;
    --border-card: rgba(0, 153, 255, .16);
    --border-subtle: rgba(255, 255, 255, .06);
    --nav-bg: rgba(10, 15, 26, .85);
    --nav-border: rgba(255, 255, 255, .08);
    --footer-bg: #060A13;
    --hover-bg: rgba(0, 153, 255, .10);
    --input-bg: rgba(255, 255, 255, .04);
    --badge-bg: rgba(0, 153, 255, .10);
    --hero-bg: #0A0F1A;
    --shadow-card: 0 2px 14px rgba(0, 0, 0, .4);
}

/* ============ 基础与重置 ============ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--bg-body);
    color: var(--text-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background var(--transition), color var(--transition);
    overflow-x: hidden;
}
/* 全局肌理：1% 透明度 100px×100px 细网格 */
body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(0, 102, 204, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 102, 204, .05) 1px, transparent 1px);
    background-size: 100px 100px;
    opacity: .10;
}
[dir="rtl"] body { font-family: var(--font-body); }
/* 法语排版适配：西文字符行高 1.7，防止长文本溢出 */
html.lang-fr body { line-height: 1.7; }
html.lang-fr .header__link { font-size: 13.5px; padding: 0 7px; }
html.lang-fr .header__brand span { max-width: 170px; font-size: 16px; }
html.lang-fr .dash__selling-title { font-size: 11.5px; }
html.lang-fr .dash__selling-desc { font-size: 10.5px; }
html.lang-fr .card { overflow-wrap: break-word; word-break: break-word; }
html.lang-fr .btn { white-space: normal; padding: 12px 16px; }
img { max-width: 100%; height: auto; }
a { color: var(--c-primary); text-decoration: none; transition: color var(--transition); }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.2; font-weight: 700; color: var(--text-body); }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ============ 按钮（三态统一，主按钮48px） ============ */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 12px 24px; border-radius: var(--radius-sm);
    font-weight: 600; font-size: 15px; line-height: 1;
    border: 1px solid transparent; cursor: pointer; white-space: nowrap;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}
.btn--primary {
    height: 48px;
    background: var(--c-gradient); color: #fff;
    box-shadow: var(--shadow-btn);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 102, 204, .42); filter: brightness(1.05); }
.btn--ghost {
    height: 48px;
    background: #fff; color: var(--c-primary);
    border-color: var(--c-primary);
}
.btn--ghost:hover { background: var(--c-gradient); color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 102, 204, .35); }
.btn--text {
    background: transparent; color: var(--c-primary);
    border-color: transparent; padding: 6px 2px; font-weight: 500;
}
.btn--text:hover { text-decoration: none; background: var(--hover-bg); transform: translateY(-2px); box-shadow: none; }
.btn--block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ============ Header 吸顶导航 ============ */
.header {
    position: fixed; top: 0; inset-inline: 0; z-index: 100;
    height: var(--header-h);
    background: var(--nav-bg);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--nav-border);
    transition: background var(--transition), box-shadow var(--transition), height .3s ease;
}
.header--scrolled {
    box-shadow: 0 6px 20px rgba(10, 15, 26, .08);
    height: 60px;
}
.header--scrolled .header__logo { height: 30px; }
.header__inner { display: flex; align-items: center; height: 100%; gap: 12px; }
.header__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: var(--text-body); flex-shrink: 0; }
.header__brand span { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header__logo { height: 36px; width: auto; transition: height .3s ease; }
.header__nav { display: flex; align-items: center; gap: 0; margin-inline-start: auto; }
/* ===== 导航菜单项 Hover 渐变闪动特效（V1.0）===== */
.header__link {
    position: relative;
    height: 40px; padding: 0 9px; border-radius: 8px;
    color: var(--text-body); font-size: 14px; font-weight: 500;
    line-height: 1; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color .2s ease, font-weight .2s ease;
    isolation: isolate; overflow: hidden;
}
/* 渐变背景层：opacity 控制显隐，不改变盒模型；z-index:-1 置于文字之下 */
.header__link::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    border-radius: 8px;
    background: linear-gradient(90deg, #0066CC 0%, #00CCFF 100%);
    background-size: 200% 200%;
    background-position: 0% 50%;
    opacity: 0;
    transition: opacity .15s ease;
}

/* 位移动效（仅 hover 播放 1 次） */
@keyframes nav-slide {
    0% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
    100% { transform: translateX(0); }
}
/* 渐变光流动效（仅 hover 播放 1 次） */
@keyframes nav-shimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Hover 状态 */
.header__link:hover,
.header__link:focus-visible {
    color: #fff; font-weight: 600;
}
.header__link:hover::before,
.header__link:focus-visible::before {
    opacity: 1;
    animation: nav-shimmer .4s ease-out 1;
}
.header__link:hover {
    animation: nav-slide .4s ease-out 1;
}

/* Active 状态：常驻渐变高亮，hover 不重复闪动 */
.header__link.is-active {
    color: #fff; font-weight: 600;
}
.header__link.is-active::before {
    opacity: 1;
    animation: none;
}
.header__link.is-active:hover {
    animation: none;
}
.header__link.is-active:hover::before {
    animation: none;
}

/* RTL：位移方向镜像，保持视觉感受与 LTR 一致 */
[dir="rtl"] .header__link:hover {
    animation-name: nav-slide-rtl;
}
[dir="rtl"] .header__link:hover::before {
    animation-name: nav-shimmer-rtl;
}
@keyframes nav-slide-rtl {
    0% { transform: translateX(3px); }
    50% { transform: translateX(-3px); }
    100% { transform: translateX(0); }
}
@keyframes nav-shimmer-rtl {
    0% { background-position: 100% 50%; }
    50% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
.header__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* 导航内 CTA 按钮保持与菜单项一致的 40px 高度 */
.header__actions .btn--primary { height: 40px; }

.theme-toggle {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--border-card); background: transparent;
    color: var(--text-body); font-size: 16px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--transition), color var(--transition);
}
.theme-toggle:hover { background: var(--hover-bg); }

.lang-switch {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 3px; border: 1px solid var(--border-card); border-radius: 100px;
    background: var(--bg-card);
}
.lang-switch__item {
    padding: 5px 8px; border-radius: 100px;
    font-size: 12px; font-weight: 600; color: var(--text-muted);
    white-space: nowrap; transition: background var(--transition), color var(--transition);
}
.lang-switch__item.is-active { background: var(--c-gradient); color: #fff; }

.header__burger {
    display: none; width: 40px; height: 40px;
    background: none; border: 1px solid var(--border-card); border-radius: var(--radius-sm);
    color: var(--text-body); font-size: 20px; cursor: pointer;
}
@media (max-width: 1199px) {
    .header__inner { gap: 16px; }
    .header__nav {
        position: fixed; top: var(--header-h); inset-inline: 0;
        flex-direction: column; align-items: stretch; gap: 4px;
        background: var(--bg-body); padding: 16px 20px 24px;
        border-bottom: 1px solid var(--border-subtle);
        display: none; margin-inline-start: 0;
    }
    .header__nav.is-open { display: flex; }
    .header__nav .header__link { height: 44px; padding: 0 8px; font-size: 16px; justify-content: flex-start; }
    /* 移动端触屏：去除闪动动效，保留渐变点击态 */
    .header__nav .header__link:hover,
    .header__nav .header__link:active,
    .header__nav .header__link.is-active {
        animation: none;
    }
    .header__nav .header__link:hover::before,
    .header__nav .header__link:active::before {
        animation: none;
    }
    [dir="rtl"] .header__nav .header__link:hover,
    [dir="rtl"] .header__nav .header__link:hover::before {
        animation: none;
    }
    .header__burger { display: inline-flex; }
    .header__actions .btn { display: none; }
    .header__actions .lang-switch, .header__actions .theme-toggle { display: inline-flex; }
}

/* ============ 页脚（深灰蓝四列） ============ */
body footer.footer { background: var(--footer-bg); color: #C4CEDB; padding: 56px 0 0; margin-top: 0; transition: background-color .45s ease; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: #fff; font-weight: 700; font-size: 18px; }
.footer__brand img { height: 32px; }.footer h4 { color: #fff; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 18px; }
.footer a { display: block; color: #9FB0C3; font-size: 14px; padding: 5px 0; }
.footer a:hover { color: var(--c-cyan); }
.footer p { font-size: 14px; color: #9FB0C3; line-height: 1.7; margin: 4px 0; }
.footer .footer__contact a { display: inline-flex; align-items: center; gap: 8px; }
.footer .footer__contact a i { font-size: 16px; color: var(--c-cyan); }
.footer__social { display: flex; gap: 12px; margin-top: 20px; }
.footer__social a {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.06); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; transition: background var(--transition);
}
.footer__social a:hover { background: var(--c-primary); color: #fff; }
.footer__bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 20px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
    font-size: 13px; color: #6E7C8F;
}
.footer__bottom a { display: inline; padding: 0; color: #8FA0B3; }
@media (max-width: 991px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .footer__grid { grid-template-columns: 1fr; } }

/* ============ Section 与标题组（统一规范） ============ */
.section { padding: 72px 0; position: relative; z-index: 1; }
/* 浅蓝渐变背景体系：普通区块为极淡的冷色渐变，交替区块为柔和蓝色光晕，
   与 Hero 渐变呼应，避免"浅蓝↔纯白"的生硬跳变 */
.section {
    background:
        radial-gradient(ellipse 70% 50% at 18% 0%, rgba(0, 102, 204, .035), transparent 60%),
        linear-gradient(180deg, #FBFDFF 0%, var(--bg-body) 100%);
}
.section--alt {
    background:
        radial-gradient(ellipse 60% 45% at 85% 10%, rgba(0, 204, 255, .06), transparent 65%),
        radial-gradient(ellipse 55% 50% at 10% 90%, rgba(0, 102, 204, .05), transparent 60%),
        var(--bg-section-alt);
}
:root[data-theme="dark"] .section {
    background:
        radial-gradient(ellipse 70% 50% at 18% 0%, rgba(0, 102, 204, .12), transparent 60%),
        linear-gradient(180deg, #0D1526 0%, var(--bg-body) 100%);
}
:root[data-theme="dark"] .section--alt {
    background:
        radial-gradient(ellipse 60% 45% at 85% 10%, rgba(0, 204, 255, .14), transparent 65%),
        radial-gradient(ellipse 55% 50% at 10% 90%, rgba(0, 102, 204, .12), transparent 60%),
        var(--bg-section-alt);
}
.section__head { text-align: center; max-width: 780px; margin: 0 auto 32px; }
.section__eyebrow {
    display: inline-block; margin-bottom: 12px;
    color: var(--c-primary); font-size: 14px; font-weight: 600;
    letter-spacing: 1px; text-transform: uppercase;
}
.section__title { font-size: 32px; font-weight: 700; color: var(--text-body); letter-spacing: -0.01em; }
.section__sub { color: var(--text-muted); font-size: 16px; line-height: 1.6; margin-top: 12px; }
/* 模块标题两侧流线型品牌光效装饰 */
.section__head { position: relative; }
.section__head::before,
.section__head::after {
    content: ''; position: absolute; top: 50%; width: 120px; height: 3px;
    border-radius: 3px; opacity: .10; pointer-events: none;
    background: linear-gradient(90deg, transparent, #0066CC, #00CCFF);
}
.section__head::before { inset-inline-end: calc(100% + 24px); transform: translateY(-50%); }
.section__head::after { inset-inline-start: calc(100% + 24px); transform: translateY(-50%) scaleX(-1); }
@media (max-width: 767px) {
    .section__head::before, .section__head::after { display: none; }
}

/* ============ 卡片（统一质感） ============ */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: var(--shadow-card);
    transition: transform .3s ease-out, box-shadow .3s ease-out, border-color .3s ease-out, background-color .45s ease;
    height: 100%;
}
.card--sm { padding: 24px; }
.card:hover { transform: translateY(-4px); border-color: var(--c-primary); box-shadow: 0 8px 24px rgba(0, 102, 204, .12); }
.card:hover .card__icon { transform: scale(1.1); color: var(--c-primary-light); }
.card__icon {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--badge-bg); color: var(--c-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; margin-bottom: 16px;
    transition: transform .3s ease-out, color .3s ease-out;
}
.card__icon--lg { width: 40px; height: 40px; font-size: 17px; }
.card__icon--md { width: 32px; height: 32px; font-size: 15px; }
.card__title { font-size: 18px; font-weight: 600; margin-bottom: 10px; color: var(--text-body); }
.card__title--md { font-size: 16px; font-weight: 600; }
.card__text { color: var(--text-muted); font-size: 14px; line-height: 1.6; }
.card__highlight { color: var(--c-primary); font-weight: 700; }
.card__img { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--bg-elevated); border-radius: 10px; margin-bottom: 16px; }
.card__meta { color: var(--text-muted); font-size: 13px; margin-top: 12px; }

/* ============ 栅格 ============ */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* ============ Hero（5:5 分栏 + 数据面板 + 信任条） ============ */
.hero {
    position: relative; padding: calc(var(--header-h) + 56px) 0 64px;
    overflow: hidden;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 102, 204, .08) 0%, transparent 70%),
        linear-gradient(180deg, #FFFFFF 0%, var(--hero-bg) 100%);
}
.hero::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 55% 45% at 82% 18%, rgba(0, 102, 204, .10), transparent 60%),
        radial-gradient(ellipse 45% 40% at 12% 85%, rgba(0, 204, 255, .08), transparent 55%);
    pointer-events: none;
}
.hero__grid { display: flex; gap: 56px; align-items: center; position: relative; z-index: 1; max-width: 1420px; }
.hero__copy { flex: 0 0 32%; max-width: 32%; }
.hero__visual { flex: 1 1 auto; min-width: 0; position: relative; padding: 20px; }
.hero__eyebrow {
    display: inline-block; margin-bottom: 20px;
    color: var(--c-primary); font-size: 14px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
}
.hero__title { font-size: 48px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 20px; }
.hero__title .grad { background: var(--c-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub { color: var(--text-muted); font-size: 16px; line-height: 1.6; margin-bottom: 32px; max-width: 560px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }
.hero__trust-stat { margin-top: 20px; font-size: 14px; color: var(--text-muted); }
.hero__trust-stat i { color: var(--c-primary); margin-inline-end: 6px; }
.hero__trust { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--border-subtle); }
.hero__trust-label { font-size: 13px; letter-spacing: .08em; color: var(--text-muted); text-align: center; margin-bottom: 20px; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: center; }
.hero__badge { font-size: 16px; font-weight: 700; color: #9AA7B8; letter-spacing: .04em; filter: grayscale(1); opacity: .8; transition: filter var(--transition), opacity var(--transition), color var(--transition); }
.hero__badge:hover { filter: none; opacity: 1; color: var(--c-primary); }
/* 数据面板：桌面真实占位，不遮左侧文字；卡片 560px 宽并轻微右移 */
.hero__visual .dash { transform: none; margin: 0 0 0 100px; width: 100%; max-width: 500px; }
@media (max-width: 1199px) {
    .hero__grid { max-width: 1240px; }
    .hero__copy { flex: 0 0 38%; max-width: 38%; }
    .hero__visual .dash { transform: none; margin: 0; width: 100%; max-width: 560px; }
}
@media (max-width: 991px) {
    .hero { padding-top: calc(var(--header-h) + 40px); }
    .hero__grid { flex-direction: column; gap: 40px; }
    .hero__copy, .hero__visual { flex: 1 1 100%; max-width: 100%; }
    .hero__title { font-size: 34px; }
    .hero__visual .dash { transform: none; margin: 0; width: 100%; max-width: 640px; }
    .hero__chip--1 { top: -14px; inset-inline-end: 0; }
    .hero__chip--2 { bottom: auto; top: 60px; inset-inline-start: 0; }
    .hero__chip--3 { bottom: -14px; inset-inline-end: 0; }
}

/* ============ 深色模式 Hero：深蓝玻璃拟态 + 蓝青光场（参考图复刻） ============ */
[data-theme="dark"] .hero {
    background:
        radial-gradient(ellipse 75% 40% at 50% 82%, rgba(0, 170, 255, .16) 0%, transparent 72%),
        radial-gradient(ellipse 85% 65% at 50% -10%, rgba(0, 102, 204, .14) 0%, transparent 62%),
        radial-gradient(ellipse 45% 40% at 10% 12%, rgba(124, 96, 220, .12) 0%, transparent 55%),
        linear-gradient(180deg, #0B1526 0%, #0A1220 55%, #0F1828 80%, #121A2B 100%);
}
[data-theme="dark"] .hero::before {
    background:
        radial-gradient(1px 1px at 12% 18%, rgba(180, 220, 255, .42), transparent 100%),
        radial-gradient(1px 1px at 28% 10%, rgba(160, 210, 255, .34), transparent 100%),
        radial-gradient(1px 1px at 42% 22%, rgba(190, 230, 255, .38), transparent 100%),
        radial-gradient(1px 1px at 58% 12%, rgba(160, 210, 255, .30), transparent 100%),
        radial-gradient(1px 1px at 72% 20%, rgba(180, 220, 255, .36), transparent 100%),
        radial-gradient(1px 1px at 86% 10%, rgba(160, 210, 255, .32), transparent 100%),
        radial-gradient(1px 1px at 18% 42%, rgba(190, 230, 255, .30), transparent 100%),
        radial-gradient(1px 1px at 66% 40%, rgba(180, 220, 255, .34), transparent 100%),
        radial-gradient(ellipse 30% 26% at 8% 12%, rgba(139, 92, 246, .14), transparent 62%),
        radial-gradient(ellipse 26% 22% at 4% 22%, rgba(99, 102, 241, .10), transparent 60%),
        radial-gradient(ellipse 55% 45% at 82% 18%, rgba(0, 153, 255, .14), transparent 60%),
        radial-gradient(ellipse 45% 40% at 12% 85%, rgba(0, 204, 255, .10), transparent 55%);
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
/* ===== 粒子背景双栈（dark 星空层 + light 晨光粒子层）
   两层同时渲染、通过 opacity 交叉淡入淡出实现平滑主题切换；
   动画全部为 transform/opacity（合成器友好），切换过程无重排 */
.hero__stars {
    position: absolute; inset: 0;
    z-index: 0; pointer-events: none;
    overflow: hidden;
    transition: opacity .6s ease;
}
:root[data-theme="light"] .hero__stars,
:root:not([data-theme="dark"]) .hero__stars { opacity: 0; }
/* ===== 璀璨星空背景层（静态繁星 + 闪烁亮星 + 星云，深色专属） ===== */
[data-theme="dark"] .hero__stars {
    position: absolute; inset: 0;
    z-index: 0; pointer-events: none;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    background:
        radial-gradient(1px 1px at 6% 12%, rgba(255, 255, 255, .70), transparent 100%),
        radial-gradient(1px 1px at 11% 26%, rgba(200, 230, 255, .58), transparent 100%),
        radial-gradient(1px 1px at 15% 8%, rgba(255, 255, 255, .52), transparent 100%),
        radial-gradient(1px 1px at 19% 33%, rgba(180, 220, 255, .50), transparent 100%),
        radial-gradient(1px 1px at 23% 16%, rgba(255, 255, 255, .62), transparent 100%),
        radial-gradient(1px 1px at 27% 41%, rgba(210, 235, 255, .48), transparent 100%),
        radial-gradient(1px 1px at 31% 9%, rgba(255, 255, 255, .55), transparent 100%),
        radial-gradient(1px 1px at 35% 24%, rgba(190, 225, 255, .56), transparent 100%),
        radial-gradient(1px 1px at 39% 38%, rgba(255, 255, 255, .48), transparent 100%),
        radial-gradient(1px 1px at 43% 13%, rgba(170, 215, 255, .58), transparent 100%),
        radial-gradient(1px 1px at 47% 30%, rgba(255, 255, 255, .52), transparent 100%),
        radial-gradient(1px 1px at 51% 7%, rgba(200, 230, 255, .54), transparent 100%),
        radial-gradient(1px 1px at 55% 21%, rgba(255, 255, 255, .58), transparent 100%),
        radial-gradient(1px 1px at 59% 36%, rgba(185, 220, 255, .50), transparent 100%),
        radial-gradient(1px 1px at 63% 11%, rgba(255, 255, 255, .52), transparent 100%),
        radial-gradient(1px 1px at 67% 28%, rgba(210, 235, 255, .55), transparent 100%),
        radial-gradient(1px 1px at 71% 6%, rgba(255, 255, 255, .50), transparent 100%),
        radial-gradient(1px 1px at 75% 34%, rgba(190, 225, 255, .54), transparent 100%),
        radial-gradient(1px 1px at 79% 15%, rgba(255, 255, 255, .60), transparent 100%),
        radial-gradient(1px 1px at 83% 27%, rgba(175, 215, 255, .52), transparent 100%),
        radial-gradient(1px 1px at 87% 9%, rgba(255, 255, 255, .56), transparent 100%),
        radial-gradient(1px 1px at 91% 32%, rgba(200, 230, 255, .48), transparent 100%),
        radial-gradient(1px 1px at 95% 17%, rgba(255, 255, 255, .54), transparent 100%),
        radial-gradient(1px 1px at 8% 48%, rgba(255, 255, 255, .48), transparent 100%),
        radial-gradient(1px 1px at 16% 60%, rgba(210, 235, 255, .44), transparent 100%),
        radial-gradient(1px 1px at 24% 70%, rgba(255, 255, 255, .46), transparent 100%),
        radial-gradient(1px 1px at 33% 52%, rgba(185, 220, 255, .45), transparent 100%),
        radial-gradient(1px 1px at 41% 63%, rgba(255, 255, 255, .48), transparent 100%),
        radial-gradient(1px 1px at 58% 50%, rgba(255, 255, 255, .48), transparent 100%),
        radial-gradient(1px 1px at 66% 62%, rgba(200, 230, 255, .44), transparent 100%),
        radial-gradient(1px 1px at 73% 53%, rgba(255, 255, 255, .46), transparent 100%),
        radial-gradient(1px 1px at 80% 46%, rgba(200, 230, 255, .46), transparent 100%),
        radial-gradient(1px 1px at 87% 58%, rgba(255, 255, 255, .44), transparent 100%),
        radial-gradient(1px 1px at 44% 57%, rgba(255, 255, 255, .42), transparent 100%),
        radial-gradient(1px 1px at 52% 68%, rgba(185, 220, 255, .40), transparent 100%),
        radial-gradient(1px 1px at 66% 55%, rgba(180, 220, 255, .44), transparent 100%),
        radial-gradient(1px 1px at 94% 66%, rgba(255, 255, 255, .42), transparent 100%),
        radial-gradient(1px 1px at 22% 84%, rgba(200, 230, 255, .38), transparent 100%),
        radial-gradient(1px 1px at 77% 78%, rgba(255, 255, 255, .40), transparent 100%),
        radial-gradient(1px 1px at 46% 82%, rgba(185, 220, 255, .36), transparent 100%),
        radial-gradient(2px 2px at 9% 22%, rgba(255, 255, 255, .80), transparent 100%),
        radial-gradient(2px 2px at 38% 18%, rgba(255, 255, 255, .75), transparent 100%),
        radial-gradient(2px 2px at 62% 8%, rgba(255, 255, 255, .70), transparent 100%),
        radial-gradient(2px 2px at 73% 26%, rgba(210, 235, 255, .70), transparent 100%),
        radial-gradient(2px 2px at 93% 38%, rgba(255, 255, 255, .72), transparent 100%),
        radial-gradient(2px 2px at 3% 64%, rgba(255, 255, 255, .65), transparent 100%),
        radial-gradient(2px 2px at 96% 5%, rgba(255, 255, 255, .68), transparent 100%),
        radial-gradient(2px 2px at 48% 44%, rgba(255, 255, 255, .66), transparent 100%),
        radial-gradient(2px 2px at 5% 36%, rgba(255, 255, 255, .62), transparent 100%),
        radial-gradient(2px 2px at 21% 12%, rgba(210, 235, 255, .60), transparent 100%),
        radial-gradient(2px 2px at 34% 32%, rgba(255, 255, 255, .64), transparent 100%),
        radial-gradient(2px 2px at 42% 8%, rgba(255, 255, 255, .62), transparent 100%),
        radial-gradient(2px 2px at 57% 58%, rgba(210, 235, 255, .58), transparent 100%),
        radial-gradient(2px 2px at 71% 20%, rgba(255, 255, 255, .66), transparent 100%),
        radial-gradient(2px 2px at 82% 63%, rgba(255, 255, 255, .60), transparent 100%),
        radial-gradient(2px 2px at 88% 30%, rgba(210, 235, 255, .62), transparent 100%),
        radial-gradient(2px 2px at 17% 70%, rgba(255, 255, 255, .56), transparent 100%),
        radial-gradient(2px 2px at 29% 58%, rgba(255, 255, 255, .60), transparent 100%),
        radial-gradient(2px 2px at 38% 78%, rgba(210, 235, 255, .55), transparent 100%),
        radial-gradient(2px 2px at 61% 42%, rgba(255, 255, 255, .62), transparent 100%),
        radial-gradient(2px 2px at 75% 60%, rgba(255, 255, 255, .58), transparent 100%),
        radial-gradient(2px 2px at 92% 74%, rgba(210, 235, 255, .54), transparent 100%),
        radial-gradient(2px 2px at 10% 88%, rgba(255, 255, 255, .52), transparent 100%),
        radial-gradient(2px 2px at 85% 86%, rgba(255, 255, 255, .55), transparent 100%),
        radial-gradient(3px 3px at 49% 17%, rgba(255, 255, 255, .85), transparent 100%),
        radial-gradient(3px 3px at 28% 6%, rgba(255, 255, 255, .80), transparent 100%),
        radial-gradient(3px 3px at 90% 52%, rgba(255, 255, 255, .78), transparent 100%),
        radial-gradient(3px 3px at 12% 76%, rgba(255, 255, 255, .75), transparent 100%),
        radial-gradient(3px 3px at 55% 88%, rgba(200, 235, 255, .72), transparent 100%),
        radial-gradient(4px 4px at 27% 28%, rgba(200, 235, 255, .80), transparent 100%),
        radial-gradient(4px 4px at 84% 22%, rgba(220, 240, 255, .75), transparent 100%),
        radial-gradient(4px 4px at 68% 72%, rgba(255, 255, 255, .70), transparent 100%),
        radial-gradient(5px 5px at 18% 38%, rgba(255, 255, 255, .70), transparent 100%),
        radial-gradient(10px 10px at 18% 38%, rgba(200, 230, 255, .25), transparent 100%),
        radial-gradient(5px 5px at 60% 14%, rgba(255, 255, 255, .75), transparent 100%),
        radial-gradient(10px 10px at 60% 14%, rgba(200, 230, 255, .28), transparent 100%),
        radial-gradient(5px 5px at 40% 90%, rgba(255, 255, 255, .65), transparent 100%),
        radial-gradient(10px 10px at 40% 90%, rgba(200, 230, 255, .22), transparent 100%),
        radial-gradient(9px 9px at 15% 24%, rgba(255, 255, 255, .95), transparent 100%),
        radial-gradient(20px 20px at 15% 24%, rgba(210, 235, 255, .55), transparent 100%),
        radial-gradient(38px 38px at 15% 24%, rgba(180, 215, 255, .22), transparent 100%),
        radial-gradient(9px 9px at 69% 12%, rgba(255, 255, 255, .90), transparent 100%),
        radial-gradient(20px 20px at 69% 12%, rgba(210, 235, 255, .50), transparent 100%),
        radial-gradient(38px 38px at 69% 12%, rgba(180, 215, 255, .20), transparent 100%),
        radial-gradient(8px 8px at 50% 72%, rgba(220, 240, 255, .80), transparent 100%),
        radial-gradient(18px 18px at 50% 72%, rgba(200, 230, 255, .42), transparent 100%),
        radial-gradient(34px 34px at 50% 72%, rgba(180, 215, 255, .16), transparent 100%),
        radial-gradient(7px 7px at 31% 46%, rgba(255, 255, 255, .85), transparent 100%),
        radial-gradient(16px 16px at 31% 46%, rgba(210, 235, 255, .40), transparent 100%),
        radial-gradient(30px 30px at 31% 46%, rgba(180, 215, 255, .14), transparent 100%),
        radial-gradient(ellipse 140% 24% at 20% 10%, rgba(175, 215, 255, .20), transparent 62%),
        radial-gradient(ellipse 100% 16% at 40% 22%, rgba(190, 225, 255, .16), transparent 60%),
        radial-gradient(ellipse 70% 14% at 15% 44%, rgba(170, 210, 255, .13), transparent 55%),
        radial-gradient(ellipse 30% 26% at 8% 12%, rgba(139, 92, 246, .22), transparent 62%),
        radial-gradient(ellipse 26% 22% at 4% 22%, rgba(99, 102, 241, .12), transparent 60%),
        radial-gradient(ellipse 24% 20% at 76% 8%, rgba(99, 102, 241, .10), transparent 58%),
        radial-gradient(ellipse 20% 18% at 60% 45%, rgba(139, 92, 246, .08), transparent 55%),
        radial-gradient(ellipse 55% 45% at 82% 18%, rgba(0, 153, 255, .14), transparent 60%),
        radial-gradient(ellipse 45% 40% at 12% 85%, rgba(0, 204, 255, .10), transparent 55%);
}
/* 闪烁亮星 A 组（大光晕，周期 3.5s） */
[data-theme="dark"] .hero__stars::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(4px 4px at 14% 20%, rgba(255, 255, 255, 1), transparent 100%),
        radial-gradient(10px 10px at 14% 20%, rgba(190, 225, 255, .50), transparent 100%),
        radial-gradient(20px 20px at 14% 20%, rgba(170, 215, 255, .20), transparent 100%),
        radial-gradient(4px 4px at 52% 27%, rgba(255, 255, 255, .95), transparent 100%),
        radial-gradient(10px 10px at 52% 27%, rgba(200, 230, 255, .45), transparent 100%),
        radial-gradient(20px 20px at 52% 27%, rgba(170, 215, 255, .18), transparent 100%),
        radial-gradient(4px 4px at 88% 16%, rgba(255, 255, 255, .98), transparent 100%),
        radial-gradient(10px 10px at 88% 16%, rgba(190, 225, 255, .48), transparent 100%),
        radial-gradient(20px 20px at 88% 16%, rgba(170, 215, 255, .20), transparent 100%),
        radial-gradient(4px 4px at 34% 45%, rgba(255, 255, 255, .90), transparent 100%),
        radial-gradient(10px 10px at 34% 45%, rgba(200, 230, 255, .42), transparent 100%),
        radial-gradient(20px 20px at 34% 45%, rgba(170, 215, 255, .16), transparent 100%),
        radial-gradient(4px 4px at 68% 42%, rgba(255, 255, 255, .92), transparent 100%),
        radial-gradient(10px 10px at 68% 42%, rgba(190, 225, 255, .44), transparent 100%),
        radial-gradient(20px 20px at 68% 42%, rgba(170, 215, 255, .18), transparent 100%);
    animation: star-twinkle-a 3.5s ease-in-out infinite;
}
/* 闪烁亮星 B 组（大光晕，周期 4.6s，相位错开） */
[data-theme="dark"] .hero__stars::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(3.5px 3.5px at 7% 32%, rgba(255, 255, 255, .95), transparent 100%),
        radial-gradient(9px 9px at 7% 32%, rgba(210, 235, 255, .42), transparent 100%),
        radial-gradient(18px 18px at 7% 32%, rgba(170, 215, 255, .16), transparent 100%),
        radial-gradient(3.5px 3.5px at 30% 13%, rgba(255, 255, 255, .90), transparent 100%),
        radial-gradient(9px 9px at 30% 13%, rgba(200, 230, 255, .40), transparent 100%),
        radial-gradient(18px 18px at 30% 13%, rgba(170, 215, 255, .15), transparent 100%),
        radial-gradient(3.5px 3.5px at 62% 33%, rgba(255, 255, 255, .92), transparent 100%),
        radial-gradient(9px 9px at 62% 33%, rgba(190, 225, 255, .42), transparent 100%),
        radial-gradient(18px 18px at 62% 33%, rgba(170, 215, 255, .16), transparent 100%),
        radial-gradient(3.5px 3.5px at 91% 42%, rgba(255, 255, 255, .85), transparent 100%),
        radial-gradient(9px 9px at 91% 42%, rgba(210, 235, 255, .38), transparent 100%),
        radial-gradient(18px 18px at 91% 42%, rgba(170, 215, 255, .14), transparent 100%),
        radial-gradient(3.5px 3.5px at 47% 52%, rgba(255, 255, 255, .82), transparent 100%),
        radial-gradient(9px 9px at 47% 52%, rgba(200, 230, 255, .36), transparent 100%),
        radial-gradient(18px 18px at 47% 52%, rgba(170, 215, 255, .14), transparent 100%);
    animation: star-twinkle-b 4.6s ease-in-out infinite;
}
@keyframes star-twinkle-a {
    0%, 100% { opacity: .35; transform: scale(.9); }
    50% { opacity: 1; transform: scale(1.15); }
}
@keyframes star-twinkle-b {
    0%, 100% { opacity: .4; transform: scale(.92); }
    50% { opacity: 1; transform: scale(1.1); }
}
/* ===== 浅色模式星空背景已由 Canvas 模块实现（/public/assets/js/starry-bg/） ===== */
@keyframes radar-pulse {
    0%, 100% { transform: scale(1); opacity: .7; }
    50% { transform: scale(1.05); opacity: 1; }
}
/* 深色标题：白→蓝 文字渐变（参考图高亮核心价值） */
[data-theme="dark"] .hero__title .grad {
    background: linear-gradient(90deg, #FFFFFF 0%, #38BDF8 100%);
    -webkit-background-clip: text; background-clip: text;
}

/* 三表数据面板（深蓝渐变科技面板）
   内部禁止任何新增视觉元素：能量场/波纹/光效全部位于卡片外部（z-index 低于卡片） */
.dash {
    background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 100%);
    border: 1px solid rgba(0, 153, 255, 0.3);
    border-radius: 20px; padding: 28px; color: #E6EDF5;
    box-shadow: 0 24px 48px rgba(6, 10, 19, .45), 0 0 30px rgba(0, 153, 255, .12);
    position: relative; z-index: 1; overflow: hidden;
}
.dash::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 70% 50% at 70% -10%, rgba(0, 204, 255, .16), transparent 60%);
}
/* 深色模式：Live Monitor 玻璃拟态（半透明 + 毛玻璃 + 柔和青色光晕，自然融入背景） */
[data-theme="dark"] .dash {
    background: rgba(15, 23, 42, .46);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(103, 232, 249, .55);
    box-shadow:
        inset 0 0 0 1px rgba(103, 232, 249, .20),
        inset 0 0 30px rgba(0, 210, 255, .10),
        0 0 28px rgba(0, 210, 255, .32),
        0 0 80px rgba(0, 210, 255, .18),
        0 0 160px rgba(0, 210, 255, .10),
        0 24px 48px rgba(6, 10, 19, .40);
}
/* 浅色模式：监控卡片自身散发的蓝金双层外光晕（内层紧贴蓝辉光 + 外层大面积金漫射，4s 呼吸；仅 light 生效，不侵入卡片内部） */
:root[data-theme="light"] .dash,
:root:not([data-theme="dark"]) .dash {
    box-shadow:
        /* 落地投影（双层柔和，强化悬浮感） */
        0 16px 32px rgba(6, 10, 19, .14),
        0 32px 64px rgba(6, 10, 19, .18),
        /* 霓虹边缘：紧贴卡片外边缘的亮蓝色辉光（加亮） */
        0 0 6px rgba(96, 170, 255, .55),
        0 0 16px rgba(96, 170, 255, .85),
        0 0 40px rgba(120, 200, 255, .55),
        /* 外层：范围更大的淡金色漫射微光 */
        0 0 90px rgba(255, 205, 140, .24),
        0 0 170px rgba(255, 220, 165, .15),
        0 0 260px rgba(255, 232, 185, .08);
    transition: box-shadow .45s ease, border-color .45s ease;
    animation: dash-glow-breathe 4s ease-in-out infinite, dash-float 9s ease-in-out infinite;
    will-change: transform;
}
@keyframes dash-glow-breathe {
    0%, 100% {
        box-shadow:
            0 16px 32px rgba(6, 10, 19, .12),
            0 32px 64px rgba(6, 10, 19, .16),
            0 0 5px rgba(96, 170, 255, .45),
            0 0 12px rgba(96, 170, 255, .70),
            0 0 30px rgba(120, 200, 255, .45),
            0 0 75px rgba(255, 205, 140, .18),
            0 0 150px rgba(255, 220, 165, .11),
            0 0 240px rgba(255, 232, 185, .06);
    }
    50% {
        box-shadow:
            0 20px 40px rgba(6, 10, 19, .16),
            0 38px 76px rgba(6, 10, 19, .20),
            0 0 10px rgba(96, 170, 255, .75),
            0 0 26px rgba(96, 170, 255, 1),
            0 0 62px rgba(120, 200, 255, .78),
            0 0 130px rgba(255, 205, 140, .38),
            0 0 220px rgba(255, 220, 165, .24),
            0 0 320px rgba(255, 232, 185, .14);
    }
}
/* 浅色模式：卡片极缓悬浮微动（上下微小位移，幅度很小，模拟悬浮感；仅 light 生效，与光晕呼吸合并动画） */
@keyframes dash-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
/* 浅色模式：蓝色边缘高光缓慢呼吸（inset 蓝光，周期 4s，与主光晕同步，仅 light 生效） */
:root[data-theme="light"] .dash::after,
:root:not([data-theme="dark"]) .dash::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 1px rgba(96, 170, 255, .30),
        inset 0 0 22px rgba(96, 170, 255, .14);
    pointer-events: none;
    animation: dash-edge-breathe 4s ease-in-out infinite;
    will-change: opacity;
}
@keyframes dash-edge-breathe {
    0%, 100% { opacity: .5; }
    50% { opacity: 1; }
}
/* 深色模式：面板内层细亮线（双层边框，柔和霓虹质感） */
[data-theme="dark"] .dash::after {
    content: '';
    position: absolute; inset: 5px;
    border: 1px solid rgba(103, 232, 249, .18);
    border-radius: 15px;
    pointer-events: none;
}
/* 深色模式：数据子卡片微光，从主面板中浮起增强立体感 */
[data-theme="dark"] .dash__cell {
    background: rgba(8, 15, 30, .35);
    border-color: rgba(103, 232, 249, .22);
    box-shadow: inset 0 0 14px rgba(0, 210, 255, .07);
}
/* 深色模式：左侧文案区压暗蒙版，隔离面板光晕保证文字对比度 */
[data-theme="dark"] .hero__copy {
    position: relative;
}
[data-theme="dark"] .hero__copy::before {
    content: '';
    position: absolute; inset: -60% 0;
    background: radial-gradient(ellipse 90% 80% at 20% 50%, rgba(2, 6, 23, .72) 0%, rgba(2, 6, 23, .42) 55%, transparent 78%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%);
    mask-image: linear-gradient(90deg, transparent, #000 14%);
    pointer-events: none;
    z-index: 0;
}
[data-theme="dark"] .hero__copy > * {
    position: relative;
    z-index: 1;
}
[dir="rtl"][data-theme="dark"] .hero__copy::before {
    background: radial-gradient(ellipse 90% 80% at 80% 50%, rgba(2, 6, 23, .72) 0%, rgba(2, 6, 23, .42) 55%, transparent 78%);
    -webkit-mask-image: linear-gradient(270deg, transparent, #000 14%);
    mask-image: linear-gradient(270deg, transparent, #000 14%);
}
.dash__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; position: relative; }
.dash__title { font-size: 15px; font-weight: 600; color: #fff; }
.dash__live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #34D399; font-weight: 600; }
/* V4.0: LIVE 指示灯呼吸动画（周期 2.5s，亮度 + 光晕缓慢强弱交替） */
.dash__live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 8px rgba(52, 211, 153, .9); animation: live-breathe 2.5s ease-in-out infinite; }
@keyframes live-breathe {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(52, 211, 153, .9); }
    50% { opacity: .35; box-shadow: 0 0 2px rgba(52, 211, 153, .28); }
}
.dash__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; position: relative; }
.dash__cell {
    background: rgba(0, 0, 0, .10); border: 1px solid rgba(0, 153, 255, .16);
    border-radius: 8px; padding: 16px 14px; text-align: center;
}
.dash__cell-label { font-size: 11px; color: #93C5FD; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 10px; }
.dash__cell-icon { font-size: 18px; margin-bottom: 8px; }
.dash__cell-icon--electric { color: #FFD166; }
.dash__cell-icon--water { color: #38BDF8; }
.dash__cell-icon--gas { color: #34D399; }
.dash__cell-value { font-size: 24px; font-weight: 700; color: #fff; letter-spacing: -.02em; }
/* V4.0 二轮: 数值低频缓慢呼吸，模拟实时监测氛围（幅度小、不干扰阅读） */
.dash__cell-value { animation: value-breathe 4s ease-in-out infinite; }
@keyframes value-breathe { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: .92; transform: translateY(1px); } }
.dash__cell-value .unit { font-size: 12px; font-weight: 500; color: #93C5FD; margin-inline-start: 2px; }
.dash__cell-value.is-highlight .num { color: #00E0FF; text-shadow: 0 0 12px rgba(0, 224, 255, .45); }
.dash__cell-trend { font-size: 11px; margin-top: 8px; }
.dash__cell-trend .up { color: #34D399; }
.dash__cell-trend .down { color: #F87171; }
/* 图标常态呼吸动效（周期 3s） */
.dash__cell-icon { animation: icon-breathe 3s ease-in-out infinite; }
.dash__cell-icon--electric.is-flash { animation: icon-flash .6s ease-out; }
.dash__cell-icon--water.is-drop { animation: icon-drop .7s ease-out; }
.dash__cell-icon--gas.is-float { animation: icon-float 1s ease-in-out; }
@keyframes icon-breathe { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes icon-flash { 0% { filter: brightness(1); transform: scale(1); } 40% { filter: brightness(1.5); transform: scale(1.15); } 100% { filter: brightness(1); transform: scale(1); } }
@keyframes icon-drop { 0% { transform: translateY(-4px); opacity: 1; } 100% { transform: translateY(3px); opacity: .55; } }
@keyframes icon-float { 0% { transform: translateY(0); } 50% { transform: translateY(-4px); } 100% { transform: translateY(0); } }
/* 面板底部四卖点标签栏（2×2 网格，文本允许换行，适配多语言长文本） */
.dash__selling {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 18px;
    margin-top: 20px; padding: 18px 16px;
    background: rgba(10, 15, 26, .80);
    border-radius: 12px; position: relative;
}
.dash__selling-item { display: flex; align-items: flex-start; gap: 10px; padding: 4px 2px; min-width: 0; }
.dash__selling-item > i { color: #00E0FF; font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.dash__selling-item > div { min-width: 0; }
.dash__selling-title { font-size: 12.5px; font-weight: 600; color: #E6EDF5; line-height: 1.45; white-space: normal; overflow-wrap: break-word; }
.dash__selling-desc { font-size: 11.5px; color: #93C5FD; margin-top: 3px; line-height: 1.5; white-space: normal; overflow-wrap: break-word; }
.dash__foot { display: flex; justify-content: space-between; margin-top: 20px; font-size: 12px; color: #7E8CA0; position: relative; padding-inline: 4px; }
.dash__foot span { display: inline-flex; align-items: center; gap: 6px; }
.dash__foot i { color: var(--c-cyan); }
@media (max-width: 575px) {
    .dash { padding: 20px; }
    .dash__cell { padding: 12px 8px; }
    .dash__cell-value { font-size: 19px; }
    .dash__selling { grid-template-columns: repeat(2, 1fr); }
    .dash__selling-title, .dash__selling-desc { white-space: normal; }
}

/* ============ 痛点 / 能力卡片 ============ */
.feature-card { text-align: start; position: relative; overflow: hidden; }
.feature-card .card__icon { border-radius: 50%; background: var(--badge-bg); }
.feature-card__title { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--text-body); }
.feature-card__desc { color: var(--text-muted); font-size: 14px; line-height: 1.45; }
.feature-card__param { display: block; margin-top: 10px; color: var(--c-primary); font-weight: 700; font-size: 14px; }

/* ============ V4.0: 图标体系升级（线性 + 渐变填充） ============ */
.feature-card .card__icon,
.service-card .card__icon,
.manufacture-card__img i {
    background:
        radial-gradient(circle at 30% 25%, rgba(0, 204, 255, .18), transparent 60%),
        linear-gradient(135deg, rgba(0, 102, 204, .12), rgba(0, 204, 255, .08));
    border: 1px solid rgba(0, 153, 255, .25);
    color: var(--c-primary-light);
    box-shadow: 0 4px 14px rgba(0, 102, 204, .10);
    text-shadow: 0 0 8px rgba(0, 153, 255, .25);
}
.service-card .card__icon { margin-inline: auto; }
.manufacture-card__img i { border: 1px solid rgba(0, 153, 255, .25); border-radius: 50%; }

/* ============ V4.0: 六大核心能力卡片 Hover 完整动效 ============ */
/* ① 卡片垂直上浮 + ② 品牌蓝渐变外发光阴影 */
.feature-card {
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.feature-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 153, 255, .55);
    box-shadow:
        0 0 0 1px rgba(0, 102, 204, .08),
        0 12px 28px rgba(0, 102, 204, .16),
        0 0 24px rgba(0, 153, 255, .18),
        0 0 44px rgba(0, 204, 255, .12);
}
/* ③ 图标：变深蓝 + 缓慢顺时针旋转（最大 8°，移出立刻停止） */
.feature-card .card__icon {
    transition: transform .6s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
    will-change: transform;
}
.feature-card:hover .card__icon {
    color: var(--c-primary);
    border-color: rgba(0, 102, 204, .45);
    box-shadow: 0 4px 14px rgba(0, 102, 204, .22);
    transform: rotate(8deg);
}
/* ④ 标题加粗 + 颜色加深 */
.feature-card__title {
    transition: color .3s ease, font-weight .3s ease;
}
.feature-card:hover .feature-card__title {
    color: var(--text-body);
    font-weight: 800;
}
/* ⑤ 卡片顶部蓝色装饰横线：从左向右平缓展开 */
.feature-card::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 100%; height: 3px;
    background: var(--c-gradient);
    border-radius: 0 0 3px 3px;
    transform: scaleX(0); transform-origin: left center;
    transition: transform .45s ease;
    z-index: 1;
}
.feature-card:hover::before { transform: scaleX(1); }
[dir="rtl"] .feature-card::before { transform-origin: right center; }
/* 入场完成后恢复能力卡自身 hover transition（覆盖通用 reveal 规则） */
.reveal.is-visible.feature-card {
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, opacity .6s ease;
    transition-delay: 0s;
}

/* ============ V4.0 二轮: Why NOVIZEX 四大优势卡片 Hover（差异化，区别于六大能力卡） ============ */
/* ① 上浮 -4px + ② 淡蓝渐变底色（浅色主题） */
.pain-card.feature-card:hover,
.reveal.is-visible.pain-card.feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 153, 255, .45);
    background: linear-gradient(160deg, #EAF6FF 0%, #F4FBFF 45%, #FFFFFF 100%);
    box-shadow:
        0 10px 26px rgba(0, 102, 204, .14),
        0 0 20px rgba(0, 153, 255, .10);
}
/* ② 深色主题：深蓝渐变底色 */
[data-theme="dark"] .pain-card.feature-card:hover,
[data-theme="dark"] .reveal.is-visible.pain-card.feature-card:hover {
    background: linear-gradient(160deg, #0E1B30 0%, #13233C 45%, #0F1B2E 100%);
    border-color: rgba(0, 153, 255, .35);
}
/* ③ 图标：透明度提升 + 饱和度增强（禁止旋转，区别于能力卡的 rotate(8deg)） */
.pain-card .card__icon {
    opacity: .88;
    transition: opacity .35s ease, filter .35s ease, transform .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.pain-card.feature-card:hover .card__icon,
.reveal.is-visible.pain-card.feature-card:hover .card__icon {
    transform: none;
    opacity: 1;
    filter: saturate(1.3) brightness(1.06);
    color: var(--c-primary);
    border-color: rgba(0, 102, 204, .4);
    box-shadow: 0 4px 14px rgba(0, 102, 204, .2);
}
/* ④ 隐藏顶部装饰线（与能力卡差异化，pain 卡 hover 不显示装饰线） */
.pain-card.feature-card::before,
.reveal.is-visible.pain-card.feature-card::before { transform: scaleX(0); }

/* ============ V5.0: 为什么选择 NOVIZEX —— 3D 正方体翻页（Intel 式） ============ */
.pain__cube-wrap {
    display: flex; flex-direction: column; align-items: center;
    perspective: 1400px;
    position: relative;
}
.pain__cube {
    --cw: 460px;
    position: relative; width: min(var(--cw), 88vw); height: 320px;
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(.45, .05, .25, 1);
}
.pain__cube .pain__face {
    position: absolute; inset: 0; margin: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 8px; padding: 30px 28px;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/* 定位规则含 .card 提高特异性，避免被 hover 的 transform 覆盖导致 3D 塌陷 */
.pain__cube .pain__face.card:nth-child(1) { transform: rotateY(0deg) translateZ(calc(min(var(--cw), 88vw) / 2)); }
.pain__cube .pain__face.card:nth-child(2) { transform: rotateY(90deg) translateZ(calc(min(var(--cw), 88vw) / 2)); }
.pain__cube .pain__face.card:nth-child(3) { transform: rotateY(180deg) translateZ(calc(min(var(--cw), 88vw) / 2)); }
.pain__cube .pain__face.card:nth-child(4) { transform: rotateY(270deg) translateZ(calc(min(var(--cw), 88vw) / 2)); }
/* cube 内卡片：去 hover 上浮/图标旋转/装饰线，避免干扰 3D 定位 */
.pain__cube .feature-card { transition: box-shadow .35s ease, border-color .35s ease; }
.pain__cube .feature-card:hover { transform: none; }
.pain__cube .feature-card:hover .card__icon { transform: none; }
.pain__cube .feature-card::before { transform: scaleX(0); }
.pain__face .feature-card__desc { max-width: 380px; }
/* 左右翻页键 */
.pain__nav {
    position: absolute; top: calc(50% - 42px);
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--border-card); background: var(--bg-card);
    color: var(--c-primary); font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
    z-index: 5;
}
.pain__nav:hover { background: var(--c-gradient); color: #fff; box-shadow: 0 6px 16px rgba(0, 102, 204, .25); transform: scale(1.06); }
.pain__nav--prev { inset-inline-start: -64px; }
.pain__nav--next { inset-inline-end: -64px; }
/* 指示点 */
.pain__dots { display: flex; gap: 10px; margin-top: 30px; }
.pain__dot {
    width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: #C4CFDC;
    transition: background .3s ease, width .3s ease, border-radius .3s ease;
}
.pain__dot:hover { background: var(--c-primary); }
.pain__dot.is-active { width: 26px; border-radius: 100px; background: var(--c-gradient); }
@media (max-width: 767px) {
    .pain__cube { --cw: 88vw; height: 300px; }
    .pain__cube .pain__face { padding: 24px 16px; }
    .pain__face .feature-card__title { font-size: 17px; }
    .pain__face .feature-card__desc { font-size: 13px; }
    .pain__nav { width: 36px; height: 36px; font-size: 14px; top: calc(50% - 38px); }
    .pain__nav--prev { inset-inline-start: 2px; }
    .pain__nav--next { inset-inline-end: 2px; }
}

/* ============ 产品卡 ============ */
.product-card { text-align: center; padding: 24px; display: flex; flex-direction: column; }
.product-card__img {
    height: 120px; width: 100%; object-fit: contain;
    background: #fff; border-radius: 10px; margin-bottom: 16px; padding: 8px;
    border: 1px solid var(--border-subtle);
}
.product-card__tag {
    display: inline-block; padding: 3px 10px; border-radius: 100px; margin: 0 auto 10px;
    background: var(--badge-bg); color: var(--c-primary);
    font-size: 11px; font-weight: 600;
}
.product-card__title { font-size: 16px; font-weight: 600; color: var(--text-body); margin-bottom: 6px; }
.product-card__sub { color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.product-card__more { margin-top: auto; padding-top: 16px; }

/* ============ 案例卡（横向：左图右文） ============ */
.case-card { display: flex; gap: 24px; padding: 24px; align-items: flex-start; }
.case-card:hover { transform: translateY(-6px); border-color: var(--c-primary); box-shadow: 0 16px 34px rgba(0, 102, 204, .16), 0 -6px 22px -12px rgba(0, 102, 204, .35); }
.case-card__img { width: 42%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; background: var(--bg-elevated); flex-shrink: 0; }
.case-card__body { flex: 1; }
.case-card__title { font-size: 18px; font-weight: 600; color: var(--text-body); margin-bottom: 8px; }
.case-card__scale { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.case-card__result { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.case-card__result strong { color: var(--c-primary); font-weight: 700; }
.case-card__more { margin-top: 12px; }
@media (max-width: 575px) { .case-card { flex-direction: column; } .case-card__img { width: 100%; } }

/* ============ 认证卡 ============ */
.cert-card { text-align: center; padding: 24px; font-family: inherit; appearance: none; cursor: pointer; color: inherit; }
.cert-card:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.reveal.is-visible.card.cert-card:hover, .reveal.is-visible.cert-card:hover, .cert-card:hover { transform: translateY(-5px); border-color: var(--c-primary); box-shadow: 0 10px 26px rgba(0, 102, 204, .16); }
.reveal.is-visible.card.cert-card:hover .cert-card__badge, .reveal.is-visible.cert-card:hover .cert-card__badge, .cert-card:hover .cert-card__badge { box-shadow: 0 10px 24px rgba(0, 102, 204, .38); }
.cert-card__badge {
    width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 16px;
    background: var(--c-gradient);
    color: #fff; font-size: 26px; font-weight: 700; letter-spacing: .02em;
    display: flex; align-items: center; justify-content: center;
    padding: 10px; text-align: center;
    box-shadow: 0 8px 20px rgba(0, 102, 204, .25);
    transition: transform var(--transition), box-shadow var(--transition);
}
.cert-card__badge--sm { font-size: 20px; }
.cert-card__title { font-size: 15px; font-weight: 600; color: var(--text-body); margin-top: 12px; }
.cert-card__desc { color: var(--text-muted); font-size: 12px; margin-top: 6px; }
.cert-card__img {
    height: 110px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color, rgba(0, 102, 204, .08));
    border-radius: 10px;
    padding: 8px;
    overflow: hidden;
}
.cert-card__img img { max-height: 100%; max-width: 100%; object-fit: contain; }
.cert-modal__img {
    display: block; max-width: 100%; max-height: 320px; object-fit: contain;
    border-radius: 8px; margin: 0 auto 16px;
}

/* ============ 证书详情弹窗（放大卡片悬浮） ============ */
.modal .modal__panel--cert, .modal__panel--cert {
    text-align: center;
    max-width: 600px;
    padding: 28px 32px 40px;
    border-radius: 20px;
    background: #fff; border-color: #E6EDF5; color: #1A2333;
    box-shadow: 0 24px 70px rgba(6, 10, 19, .45);
}
.modal .modal__panel--cert .modal__close, .modal__panel--cert .modal__close { color: #8896A8; border-color: #E6EDF5; }
.modal .modal__panel--cert .modal__title, .modal__panel--cert .modal__title { color: #1A2333; font-size: 24px; }
.modal .modal__panel--cert .modal__sub, .modal__panel--cert .modal__sub { color: #5B6B7F; margin-bottom: 0; line-height: 1.7; }
/* 打开时以"卡片放大"方式弹出 */
@keyframes modal-card-zoom {
    from { opacity: 0; transform: scale(.9) translateY(16px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal.is-open .modal__panel--cert { animation: modal-card-zoom .32s cubic-bezier(.22, .9, .3, 1); }
.cert-modal__img {
    display: block; width: 100%; max-height: 420px; object-fit: contain;
    border-radius: 12px; margin: 0 auto 22px;
    background: #F4F8FC;
    border: 1px solid #E6EDF5;
    box-shadow: 0 10px 28px rgba(6, 10, 19, .12);
}
.cert-modal__badge {
    width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 18px;
    background: var(--c-gradient); color: #fff; font-size: 30px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 28px rgba(0, 102, 204, .32);
}

/* ============ 解决方案卡（插画 + 标题 + 卖点） ============ */
.sol-card { text-align: center; padding: 28px 24px; display: flex; flex-direction: column; }
.sol-card__img { height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.sol-card__img svg, .sol-card__img img { max-height: 90px; width: auto; }
.sol-card__title { font-size: 17px; font-weight: 600; color: var(--text-body); margin-bottom: 8px; }
.sol-card__desc { color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.sol-card__more { margin-top: auto; padding-top: 16px; }

/* ============ 服务卡 ============ */
.service-card { text-align: center; padding: 28px 24px; }
.service-card .card__icon { margin-inline: auto; }

/* ============ 底部 CTA ============ */
.cta {
    background: var(--c-gradient);
    color: #fff; text-align: center;
    padding: 72px 0; position: relative; overflow: hidden;
}
.cta::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 80% at 80% 20%, rgba(255,255,255,.16), transparent 60%);
}
.cta__title { font-size: 32px; font-weight: 700; color: #fff; margin-bottom: 12px; position: relative; }
.cta__sub { font-size: 16px; color: rgba(255,255,255,.8); max-width: 640px; margin: 0 auto 32px; line-height: 1.6; position: relative; }
.cta__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; position: relative; }
.cta .btn--primary { background: #fff; color: var(--c-primary); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.cta .btn--ghost { background: transparent; color: #fff; border-color: #fff; }
.cta .btn--ghost:hover { background: rgba(255,255,255,.12); }

/* ============ 悬浮组件 ============ */
.float-bar { position: fixed; inset-block-end: 32px; inset-inline-end: 32px; z-index: 90; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.float-bar__btn {
    width: 50px; height: 50px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #fff; border: 0; cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
    transition: transform var(--transition);
}
.float-bar__btn:hover { transform: translateY(-3px); }
.float-bar__btn--whatsapp { background: #25D366; }
.float-bar__btn--quote { background: var(--c-gradient); }
.float-bar__btn--top { background: #E5EDF5; color: #fff; font-size: 18px; display: none; }
.float-bar__btn--top.is-visible { display: flex; }

/* ============ Modal ============ */
.modal {
    position: fixed; inset: 0; z-index: 200; display: none;
    align-items: center; justify-content: center; padding: 20px;
    background: rgba(6, 10, 19, .6); backdrop-filter: blur(6px);
}
.modal.is-open { display: flex; }
.modal__panel {
    width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
    background: var(--bg-card); border: 1px solid var(--border-card);
    border-radius: 16px; padding: 32px; position: relative;
    box-shadow: 0 24px 60px rgba(6, 10, 19, .4);
}
.modal__close {
    position: absolute; top: 16px; inset-inline-end: 16px;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--border-card); background: transparent;
    color: var(--text-muted); font-size: 16px; cursor: pointer;
}
.modal__title { font-size: 22px; margin-bottom: 8px; color: var(--text-body); }
.modal__sub { color: var(--text-muted); font-size: 14px; margin-bottom: 24px; }

/* ============ 表单 ============ */
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-body); }
.form-control {
    width: 100%; padding: 11px 14px;
    background: var(--input-bg); color: var(--text-body);
    border: 1px solid var(--border-card); border-radius: var(--radius-sm);
    font-size: 14px; font-family: inherit;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(0, 102, 204, .12); }
select.form-control { appearance: auto; height: 40px; padding: 0 12px; line-height: normal; }
textarea.form-control { resize: vertical; min-height: 100px; }
.form-msg { font-size: 13px; margin-top: 8px; display: none; }
.form-msg.is-ok { color: #2ecc71; display: block; }
.form-msg.is-err { color: #e74c3c; display: block; }

/* ============ Tabs（胶囊） ============ */
.tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; }
.tabs__item {
    padding: 9px 22px; border-radius: 100px;
    border: 1px solid var(--border-card); background: var(--bg-card);
    color: var(--text-muted); font-size: 14px; font-weight: 500; cursor: pointer;
    transition: all var(--transition); white-space: nowrap;
    opacity: .68;
}
.tabs__item:hover { color: var(--c-primary); border-color: var(--c-primary); opacity: 1; }
.tabs__item.is-active {
    background: var(--c-gradient); color: #fff; border-color: transparent;
    box-shadow: 0 4px 16px rgba(0, 102, 204, .42); opacity: 1;
    filter: brightness(1.06);
}

/* ============ 分页 ============ */
.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 40px; list-style: none; padding: 0; }
.pagination li a, .pagination li span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 12px;
    border: 1px solid var(--border-card); border-radius: var(--radius-sm);
    color: var(--text-body); font-size: 14px; background: var(--bg-card);
}
.pagination .active span, .pagination .current { background: var(--c-gradient); color: #fff; border-color: transparent; }
.pagination .disabled span { opacity: .4; }

/* ============ page-header（二级页头） ============ */
.page-header {
    padding: calc(var(--header-h) + 48px) 0 40px;
    background: var(--hero-bg);
    text-align: center; position: relative;
}
.page-header__eyebrow { color: var(--c-primary); font-size: 14px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.page-header__title { font-size: 36px; font-weight: 700; color: var(--text-body); margin-top: 8px; }
.page-header__sub { color: var(--text-muted); font-size: 16px; margin-top: 10px; }

/* ============ 富文本内容 ============ */
.content { font-size: 15px; color: var(--text-muted); }
.content h3, .content h4 { color: var(--text-body); margin: 24px 0 10px; }
.content p { margin: 0 0 16px; line-height: 1.8; }
.content ul, .content ol { margin: 0 0 16px; padding-inline-start: 22px; }
.content li { margin-bottom: 6px; }
.content img { max-width: 100%; border-radius: var(--radius-sm); }
.content a { color: var(--c-primary); }

/* ============ V3.1: Hero 底部核心卖点通栏 ============ */
.hero-trustbar {
    background: #F7FAFC;
    border-top: 1px solid var(--border-subtle);
}
.hero-trustbar__grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 24px; padding: 20px 0;
}
.hero-trustbar__item {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 8px;
}
.hero-trustbar__icon {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--badge-bg); color: var(--c-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.hero-trustbar__title { font-size: 15px; font-weight: 600; color: var(--text-body); }
.hero-trustbar__desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
@media (max-width: 991px) { .hero-trustbar__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .hero-trustbar__grid { grid-template-columns: 1fr; } }

/* ============ V3.1: 产品大图轮播专区（V4.0 幻化特效版） ============ */
/* 首屏 → 产品区平滑过渡：showcase 顶部承接带（极淡渐变，无分割线/边框/生硬遮罩） */
.showcase { padding: 72px 0; position: relative; }
.showcase::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 76px;
    z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 22, 48, .05), transparent);
}
:root[data-theme="dark"] .showcase::before {
    background: linear-gradient(180deg, rgba(0, 20, 45, .08), transparent);
}
.showcase__viewport {
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(10, 15, 26, .10);
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    overflow: hidden; position: relative;
    transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s cubic-bezier(.22,.61,.36,1), border-color .45s ease;
}
.showcase__viewport:hover { transform: translateY(-4px); border-color: var(--c-primary); box-shadow: 0 20px 48px rgba(0, 102, 204, .18); }
.showcase__track { position: relative; min-height: 440px; }
.showcase__slide {
    position: absolute; inset: 0;
    display: grid; grid-template-columns: 60% 40%;
    align-items: center; min-height: 440px;
    opacity: 0; visibility: hidden;
    transition: opacity .55s ease, visibility .55s ease, transform .55s ease, filter .55s ease;
    transform: translateX(24px);
}
.showcase__slide.is-active { opacity: 1; visibility: visible; position: relative; transform: translateX(0); }
[dir="rtl"] .showcase__slide { transform: translateX(-24px); }
[dir="rtl"] .showcase__slide.is-active { transform: translateX(0); }
.showcase__img { position: relative; padding: 24px; display: flex; align-items: center; justify-content: center; background: #fff; }
.showcase__img img { max-height: 420px; width: auto; max-width: 100%; object-fit: contain; transition: opacity .5s ease, transform .5s ease; }
/* 特效揭示：特效播放期间图片与文字隐藏，结束后平滑浮现（is-revealing 由 JS 添加，无 JS/降级时内容始终可见） */
.showcase__slide.is-revealing .showcase__img img { opacity: 0; transform: scale(1.06); }
.showcase__slide.is-revealing .showcase__info { opacity: 0; }
/* 幻化特效层：覆盖整个 slide（图片 + 文字），播放期间以写实 SVG 特效视觉遮盖内容 */
.morph { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; pointer-events: none; overflow: hidden; opacity: 0; }
.morph.is-running { opacity: 1; }
.fx-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; }
.fx-sparks circle, .fx-bubbles circle, .fx-smoke circle { transform-box: fill-box; transform-origin: center; }
/* ---- 电流特效（electric → is-lightning）：真实感闪电电弧劈裂 + 火花溅射 ---- */
.morph.is-lightning { background: radial-gradient(circle at 50% 45%, rgba(10, 40, 90, .95), rgba(2, 8, 25, .98)); }
.morph.is-lightning .fx-svg--lightning { opacity: 1; }
.morph.is-lightning .fx-bolt { animation: fx-bolt-flash 1.1s ease-out forwards; }
.morph.is-lightning .fx-bolt-core { stroke-dasharray: 600; stroke-dashoffset: 600; animation: fx-bolt-draw 1.1s ease-out forwards; }
.morph.is-lightning .fx-sparks circle { animation: fx-spark 1.1s ease-out forwards; }
@keyframes fx-bolt-flash {
    0% { opacity: 0; }
    12% { opacity: 1; }
    30% { opacity: .25; }
    48% { opacity: 1; }
    70% { opacity: .5; }
    100% { opacity: 0; }
}
@keyframes fx-bolt-draw {
    0% { stroke-dashoffset: 600; }
    45% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
}
@keyframes fx-spark {
    0% { transform: translate(0, 0) scale(1); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; }
}
/* ---- 水流特效（water → is-wave）：多层贝塞尔波浪涌起 + 浪尖水花 + 气泡 ---- */
.morph.is-wave { background: linear-gradient(180deg, rgba(5, 25, 55, .65), rgba(0, 80, 150, .85)); }
.morph.is-wave .fx-svg--wave { opacity: 1; }
.morph.is-wave .fx-wave { animation: fx-wave-surge 1.1s ease-in-out forwards; }
.morph.is-wave .fx-wave-l1 { animation: fx-wave-bob 1.1s ease-in-out; }
.morph.is-wave .fx-wave-l2 { animation: fx-wave-bob 1.1s ease-in-out .08s; }
.morph.is-wave .fx-wave-l3 { animation: fx-wave-bob 1.1s ease-in-out .16s; }
.morph.is-wave .fx-wave-l4 { animation: fx-wave-bob 1.1s ease-in-out .24s; }
.morph.is-wave .fx-bubbles circle { animation: fx-bubble 1.1s ease-out forwards; }
@keyframes fx-wave-surge {
    0% { transform: translateY(520px); opacity: 0; }
    18% { opacity: 1; }
    55% { transform: translateY(0); }
    100% { transform: translateY(0); opacity: 0; }
}
@keyframes fx-wave-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
@keyframes fx-bubble {
    0% { transform: translate(0, 0); opacity: 0; }
    15% { opacity: .9; }
    100% { transform: translate(var(--dx), -200px); opacity: 0; }
}
/* ---- 气体特效（gas → is-stream）：真实燃烧火焰（分层火苗）+ 上升烟气 ---- */
.morph.is-stream { background: radial-gradient(circle at 50% 62%, rgba(35, 18, 4, .75), rgba(8, 8, 16, .95)); }
.morph.is-stream .fx-svg--stream { opacity: 1; }
.morph.is-stream .fx-flame { animation: fx-flame-flicker 1.1s ease-in-out forwards; transform-origin: 600px 470px; }
.morph.is-stream .fx-flame-inner { animation: fx-flame-core 1.1s ease-in-out forwards; }
.morph.is-stream .fx-smoke circle { animation: fx-smoke 1.1s ease-out forwards; }
@keyframes fx-flame-flicker {
    0% { transform: scale(1, 1); opacity: 0; }
    15% { opacity: 1; }
    30% { transform: scale(.94, 1.06); }
    55% { transform: scale(1.05, .95); }
    75% { transform: scale(.97, 1.05); }
    100% { transform: scale(1, 1); opacity: 0; }
}
@keyframes fx-flame-core {
    0%, 100% { opacity: .55; }
    40% { opacity: 1; }
    70% { opacity: .7; }
}
@keyframes fx-smoke {
    0% { transform: translate(0, 0) scale(.6); opacity: 0; }
    20% { opacity: .5; }
    100% { transform: translate(var(--dx), -180px) scale(1.7); opacity: 0; }
}
/* RTL：电弧分支镜像，保证方向合理 */
[dir="rtl"] .morph.is-lightning .fx-bolt { transform: scaleX(-1); }
.showcase__info { padding: 40px 40px 40px 8px; }
.showcase__tag {
    display: inline-block; padding: 4px 12px; border-radius: 100px;
    background: var(--badge-bg); color: var(--c-primary);
    font-size: 14px; font-weight: 600; margin-bottom: 14px;
}
.showcase__name { font-size: 28px; font-weight: 700; color: var(--text-body); line-height: 1.25; margin-bottom: 16px; }
.showcase__features { list-style: none; padding: 0; margin: 0 0 18px; }
.showcase__features li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--text-muted); padding: 5px 0; }
.showcase__features li i { color: var(--c-primary); margin-top: 4px; }
.showcase__param {
    font-size: 15px; font-weight: 700; color: var(--c-primary);
    margin-bottom: 24px;
}
.showcase__btn { height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 24px; border-radius: var(--radius-sm); background: var(--c-gradient); color: #fff; font-weight: 600; font-size: 15px; transition: transform var(--transition), box-shadow var(--transition); }
.showcase__btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-btn); }
.showcase__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(230, 237, 245, .9); border: 0;
    color: var(--c-primary); font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--transition), transform var(--transition), color var(--transition), box-shadow var(--transition);
    z-index: 5;
}
.showcase__nav:hover { background: var(--c-gradient); color: #fff; box-shadow: var(--shadow-btn); transform: translateY(-50%) scale(1.08); }
.showcase__nav--prev { inset-inline-start: 16px; }
.showcase__nav--next { inset-inline-end: 16px; }
.showcase__dots { display: flex; gap: 8px; justify-content: center; padding: 16px 0; }
.showcase__dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #C4CFDC; border: 0; cursor: pointer;
    transition: background var(--transition), transform var(--transition);
    padding: 0;
}
.showcase__dot.is-active { background: var(--c-primary); transform: scale(1.2); }
@media (max-width: 991px) {
    .showcase__slide { grid-template-columns: 1fr 1fr; min-height: 380px; }
    .showcase__info { padding: 28px 24px 28px 0; }
    .showcase__name { font-size: 24px; }
}
@media (max-width: 767px) {
    .showcase__slide { grid-template-columns: 1fr; min-height: auto; }
    .showcase__img { padding: 16px; }
    .showcase__img img { max-height: 260px; }
    .showcase__info { padding: 24px; }
}

/* ============ V3.1: 认证徽章（保留）+ 展会 ============ */
.exhibit-card { text-align: left; }
[dir="rtl"] .exhibit-card { text-align: right; }
.exhibit-card__name { font-size: 16px; font-weight: 600; color: var(--text-body); }
.exhibit-card__meta { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin-top: 8px; }
.exhibit-card__badge {
    display: inline-block; margin-top: 12px; padding: 3px 10px;
    border-radius: 100px; background: var(--badge-bg);
    color: var(--c-primary); font-size: 12px; font-weight: 600;
}

/* ============ V3.1: 研发与制造实力 ============ */
.manufacture-card { text-align: center; }
.manufacture-card__img { height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.manufacture-card__img img, .manufacture-card__img svg { max-height: 90px; width: auto; }
.manufacture-card__title { font-size: 17px; font-weight: 600; color: var(--text-body); margin-bottom: 8px; }
.manufacture-card__desc { color: var(--text-muted); font-size: 14px; line-height: 1.6; }

/* ============ V3.1: 客户 Logo 墙 ============ */
.logo-wall { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-items: center; }
.logo-wall__item {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 150px; height: 56px; padding: 0 20px;
    background: var(--bg-card); border: 1px solid var(--border-card);
    border-radius: var(--radius); color: #9AA7B8;
    font-size: 15px; font-weight: 600; letter-spacing: .02em;
    filter: grayscale(1); opacity: .75;
    transition: filter var(--transition), opacity var(--transition), color var(--transition), border-color var(--transition);
}
.logo-wall__item:hover { filter: none; opacity: 1; color: var(--c-primary); border-color: var(--c-primary); }
@media (max-width: 767px) { .logo-wall__item { min-width: 120px; height: 48px; font-size: 13px; } }

/* ============ V3.1: 产品矩阵 3 大品类大卡片 ============ */
.cat-card { text-align: center; padding: 24px; display: flex; flex-direction: column; overflow: hidden; }
.cat-card__img {
    height: 260px; width: 100%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--border-subtle);
    border-radius: 10px; margin-bottom: 20px; overflow: hidden;
}
.cat-card__img img { max-height: 100%; max-width: 100%; object-fit: contain; transition: transform var(--transition); }
.cat-card:hover .cat-card__img img { transform: scale(1.04); }
.cat-card__name { font-size: 18px; font-weight: 600; color: var(--text-body); margin-bottom: 8px; }
.cat-card__desc { color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.cat-card__more { margin-top: auto; padding-top: 16px; }

/* 痛点/能力卡片 4 列 + 紧凑 */
.grid--4col-sm { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) { .grid--4col-sm { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .grid--4col-sm { grid-template-columns: 1fr; } }

/* 案例左右结构（V3.1 默认2卡） */
.case-card--full { display: flex; gap: 28px; padding: 28px; align-items: center; }
.case-card--full .case-card__img { width: 46%; aspect-ratio: 4/3; flex-shrink: 0; }
@media (max-width: 575px) { .case-card--full { flex-direction: column; } .case-card--full .case-card__img { width: 100%; } }

/* 卡片紧凑（能力模块） */
.card--compact { padding: 24px; }
.card--compact .card__icon { margin-bottom: 12px; }

/* ============ 滚动动效与 RTL ============ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
/* 入场完成后恢复卡片自身的 hover transition */
.reveal.is-visible.card {
    transition: transform .3s ease-out, box-shadow .3s ease-out, border-color .3s ease-out, opacity .6s ease;
    transition-delay: 0s;
}
.reveal.is-visible.card:hover { transform: translateY(-4px); }
.reveal.is-visible.card:hover .card__icon { transform: scale(1.1); }
/* 六大能力卡专属：覆盖通用 hover 上浮，使用 -6px 完整动效 */
.reveal.is-visible.feature-card:hover { transform: translateY(-6px); }
.reveal.is-visible.feature-card:hover .card__icon { transform: rotate(8deg); color: var(--c-primary); }
/* 模块内卡片按顺序错开 100ms 入场 */
.grid .reveal { transition-delay: 0s; }
.grid .reveal:nth-child(2) { transition-delay: .1s; }
.grid .reveal:nth-child(3) { transition-delay: .2s; }
.grid .reveal:nth-child(4) { transition-delay: .3s; }
.grid .reveal:nth-child(5) { transition-delay: .4s; }
.grid .reveal:nth-child(6) { transition-delay: .5s; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* RTL 镜像：方向图标、间距用逻辑属性（已用 margin-inline/padding-inline-start 等） */
[dir="rtl"] .icon-arrow { transform: scaleX(-1); }
[dir="rtl"] .fa-arrow-right, [dir="rtl"] .fa-arrow-left { transform: scaleX(-1); }
.num { unicode-bidi: plaintext; direction: ltr; }
/* RTL：面板与轮播镜像 */
[dir="rtl"] .dash__selling { direction: rtl; }
[dir="rtl"] .dash__selling-item { text-align: right; }
[dir="rtl"] .dash__selling-item > i { margin-inline-start: 0; }
[dir="rtl"] .dash__cell-value .num { direction: ltr; unicode-bidi: plaintext; }
html.lang-ar .dash__selling-title, html.lang-ar .dash__selling-desc { line-height: 1.7; }
html.lang-ar .dash__selling-item { align-items: flex-start; }
[dir="rtl"] .showcase__slide { direction: rtl; }
[dir="rtl"] .morph.is-lightning::after { inset-inline-start: 18%; inset-inline-end: auto; }
[dir="rtl"] .morph.is-stream::before { animation-direction: reverse; }
[dir="rtl"] .morph.is-wave::before,
[dir="rtl"] .morph.is-wave::after { transform: scaleX(-1); }

/* ============ 响应式断点（≥1200 / 768-1199 / <768） ============ */
@media (max-width: 1199px) {
    .section__title { font-size: 30px; }
    .hero__title { font-size: 40px; }
}
@media (max-width: 991px) {
    .section { padding: 64px 0; }
    .section__title { font-size: 28px; }
    .hero__title { font-size: 32px; }
}
@media (max-width: 575px) {
    .header__brand span { display: none; }
    .lang-switch__item { padding: 4px 7px; font-size: 11px; }
    .header__actions { gap: 6px; }
    .section { padding: 56px 0; }
    .hero__title { font-size: 28px; }
    .page-header__title { font-size: 28px; }
    .cta__title { font-size: 26px; }
    .float-bar { inset-block-end: 20px; inset-inline-end: 20px; }
    /* 移动端弱化动效 */
    .reveal { opacity: 1; transform: none; }
    .card:hover, .btn:hover, .reveal.is-visible.card.cert-card:hover, .reveal.is-visible.cert-card:hover, .cert-card:hover { transform: none; }
    .showcase__viewport:hover { transform: none; box-shadow: var(--shadow-card); border-color: var(--border-card); }
    .showcase__nav:hover { transform: translateY(-50%); }
    .dash__cell-icon { animation: none; }
    [data-theme="dark"] .hero__visual::before { animation: none; }
    [data-theme="dark"] .hero::after { transform: none; opacity: .3; }
    .morph.is-lightning::after, .morph.is-stream::after, .morph.is-wave::after { display: none; }
    .showcase__slide { transition: opacity .3s ease; }
    /* 移动端降级：关闭卡片悬浮微动（性能优先），光晕呼吸保留 */
    :root[data-theme="light"] .hero__visual .dash,
    :root:not([data-theme="dark"]) .hero__visual .dash { animation: dash-glow-breathe 4s ease-in-out infinite; }
}

/* 低性能设备（prefers-reduced-motion）弱化复杂动效
   注意：showcase 轮播幻化特效是站点所有者明确要求的核心展示特效，
   不随 reduced-motion 禁用（否则特效完全不可见）；仅弱化其它装饰动效
   注：2026-08-07 站点所有者要求所有动效（含水下特效/玻璃面板）始终动态展示，
   故移除本 reduce-motion 禁用规则 */

/* ==========================================================================
   V6.0 — 白天模式炫酷动态特效（light 专属，与夜晚星空/赛博网格/雷达对仗）
   全部动画基于 transform / opacity / background-position（合成器友好）
   通过 light 选择器覆盖既有规则，不影响 dark 主题
   ========================================================================== */

/* ---- 1. Hero 背景动态极光光场（蓝/青/金三色光晕缓慢漂移） ---- */
:root[data-theme="light"] .hero::before,
:root:not([data-theme="dark"]) .hero::before {
    background:
        radial-gradient(ellipse 62% 48% at 16% 20%, rgba(0, 102, 204, .17) 0%, transparent 62%),
        radial-gradient(ellipse 55% 42% at 86% 12%, rgba(0, 204, 255, .16) 0%, transparent 58%),
        radial-gradient(ellipse 50% 46% at 68% 84%, rgba(255, 184, 77, .13) 0%, transparent 60%),
        radial-gradient(ellipse 40% 34% at 32% 90%, rgba(0, 153, 255, .11) 0%, transparent 55%);
    background-size: 180% 180%;
    background-position: 0% 0%;
    animation: light-aurora-drift 16s ease-in-out infinite alternate;
    will-change: background-position;
}
@keyframes light-aurora-drift {
    0%   { background-position: 0% 0%;   opacity: .8; }
    33%  { background-position: 60% 28%; opacity: 1; }
    66%  { background-position: 100% 12%; opacity: .85; }
    100% { background-position: 42% 46%; opacity: .95; }
}

/* ---- 2. 浅色模式星空背景：已由 Canvas 模块实现（/public/assets/js/starry-bg/）
   螺旋星云 / 星星闪烁 / 流星穿越 均由 starry-background.js 驱动，此处不再需要 CSS ---- */



/* ---- 3. 底部能量网格地面（浅色透视网格 + 流动光波，对应夜晚赛博网格） ---- */
:root[data-theme="light"] .hero::after,
:root:not([data-theme="dark"]) .hero::after {
    content: '';
    position: absolute; left: -12%; right: -12%; bottom: -50px; height: 300px;
    z-index: 0; pointer-events: none;
    background:
        repeating-linear-gradient(90deg, rgba(20, 70, 180, .55) 0 2.5px, transparent 2.5px 44px),
        repeating-linear-gradient(0deg, rgba(20, 70, 180, .55) 0 2.5px, transparent 2.5px 44px),
        /* 斜向能量扫描光带：repeating 图案 + 像素位移，持续横扫网格（不会跑出容器） */
        repeating-linear-gradient(115deg,
            transparent 0 60px,
            rgba(0, 190, 255, .75) 100px,
            rgba(160, 250, 255, 1) 140px,
            rgba(0, 190, 255, .75) 180px,
            transparent 240px),
        radial-gradient(ellipse 85% 65% at 50% 112%, rgba(20, 90, 200, .65) 0%, rgba(0, 150, 200, .40) 45%, transparent 72%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 92%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 92%, transparent 100%);
    transform: perspective(420px) rotateX(54deg);
    transform-origin: bottom;
    animation: light-ground-scan 4s linear infinite;
    will-change: background-position, opacity;
}
@keyframes light-ground-scan {
    0%   { background-position: 0 0, 0 0, 0 0, 0 0; opacity: .7; }
    50%  { background-position: -132px 0, -66px 0, -120px 0, 0 0; opacity: 1; }
    100% { background-position: -264px 0, -132px 0, -240px 0, 0 0; opacity: .75; }
}

/* ---- 4. 雷达波纹扩散（面板后方，对应夜晚雷达脉冲） ---- */
:root[data-theme="light"] .hero__visual::before,
:root:not([data-theme="dark"]) .hero__visual::before {
    content: '';
    position: absolute; top: -70px; inset-inline-end: -50px;
    width: 560px; height: 560px; z-index: 0; pointer-events: none;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(0, 110, 180, .46) 0%, transparent 62%),
        repeating-radial-gradient(circle, rgba(0, 110, 180, 0) 0 22px, rgba(0, 110, 180, .62) 23px 29px, transparent 30px 52px);
    -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 76%);
    mask-image: radial-gradient(circle, #000 0%, transparent 76%);
    animation: light-radar-pulse 4s ease-out infinite;
    will-change: transform, opacity;
}
@keyframes light-radar-pulse {
    0%   { transform: scale(.82); opacity: .95; }
    100% { transform: scale(1.25); opacity: .40; }
}

/* ---- 4b. 面板后方旋转扫光（conic 光锥绕圈，对应夜晚霓虹辉光） ---- */
:root[data-theme="light"] .hero__visual::after,
:root:not([data-theme="dark"]) .hero__visual::after {
    content: '';
    position: absolute; top: -40px; inset-inline-end: -20px;
    width: 480px; height: 480px; z-index: 0; pointer-events: none;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(0, 153, 255, 0) 0deg,
        rgba(0, 153, 255, .10) 30deg,
        rgba(0, 153, 255, .50) 52deg,
        rgba(0, 204, 255, .78) 72deg,
        rgba(0, 204, 255, .50) 92deg,
        rgba(0, 153, 255, .10) 115deg,
        rgba(0, 153, 255, 0) 150deg);
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, .30) 0%, #000 40%, rgba(0, 0, 0, .90) 68%, transparent 82%);
    mask-image: radial-gradient(circle, rgba(0, 0, 0, .30) 0%, #000 40%, rgba(0, 0, 0, .90) 68%, transparent 82%);
    animation: light-orbit-sweep 5s linear infinite;
    will-change: transform;
}
@keyframes light-orbit-sweep {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ---- 5. Live Monitor 面板：扫描高光线（自顶向下循环扫过） ---- */
:root[data-theme="light"] .dash::before,
:root:not([data-theme="dark"]) .dash::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    z-index: 2;
    background:
        linear-gradient(180deg,
            transparent 0%,
            rgba(0, 160, 220, .28) 36%,
            rgba(140, 240, 255, .92) 50%,
            rgba(0, 160, 220, .28) 64%,
            transparent 100%);
    background-size: 100% 200%;
    background-position: 0 120%;
    animation: light-dash-scan 2.4s ease-in-out infinite;
    pointer-events: none;
    will-change: background-position, opacity;
}
@keyframes light-dash-scan {
    0%   { background-position: 0 -60%; opacity: 0; }
    16%  { opacity: 1; }
    84%  { opacity: 1; }
    100% { background-position: 0 160%; opacity: 0; }
}

/* ---- 6. Hero 标题动态流动渐变（蓝→青→翠 循环流动） ---- */
:root[data-theme="light"] .hero__title .grad,
:root:not([data-theme="dark"]) .hero__title .grad {
    background: linear-gradient(90deg, #0066CC 0%, #0099FF 26%, #00CCFF 52%, #00D9A6 74%, #0066CC 100%);
    background-size: 280% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: light-grad-flow 8s linear infinite;
    will-change: background-position;
}
@keyframes light-grad-flow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 280% 50%; }
}

/* ---- 7. 主按钮流光扫过（sheen） ---- */
:root[data-theme="light"] .btn--primary,
:root:not([data-theme="dark"]) .btn--primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
:root[data-theme="light"] .btn--primary::after,
:root:not([data-theme="dark"]) .btn--primary::after {
    content: '';
    position: absolute; top: -25%; bottom: -25%; left: -55%; width: 36%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-18deg);
    animation: light-btn-sheen 3.8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}
@keyframes light-btn-sheen {
    0%, 52% { left: -55%; opacity: 0; }
    62%     { opacity: 1; }
    100%    { left: 135%; opacity: 0; }
}

/* ---- 8. 移动端弱化 & 低性能降级（light 版） ----
   星云采用 SVG SMIL 动画，不受 reduced-motion 影响，任何环境持续自转；
   此处仅对非核心装饰做移动端弱化 */
@media (max-width: 575px) {
    :root[data-theme="light"] .hero::after,
    :root:not([data-theme="dark"]) .hero::after,
    :root[data-theme="light"] .hero__visual::before,
    :root:not([data-theme="dark"]) .hero__visual::before,
    :root[data-theme="light"] .hero__visual::after,
    :root:not([data-theme="dark"]) .hero__visual::after,
    :root[data-theme="light"] .dash::before,
    :root:not([data-theme="dark"]) .dash::before { animation: none; }
    :root[data-theme="light"] .hero::before,
    :root:not([data-theme="dark"]) .hero::before,
    :root[data-theme="light"] .hero__title .grad,
    :root:not([data-theme="dark"]) .hero__title .grad { animation: none; }
    :root[data-theme="light"] .hero::after,
    :root:not([data-theme="dark"]) .hero::after { opacity: .45; }
    :root[data-theme="light"] .btn--primary::after,
    :root:not([data-theme="dark"]) .btn--primary::after { display: none; }
}
/* 系统偏好减少动态效果时：仅停用 CSS 装饰动画，星云 SMIL 仍自转 */
@media (prefers-reduced-motion: reduce) {
    :root[data-theme="light"] .hero__visual::before,
    :root:not([data-theme="dark"]) .hero__visual::before,
    :root[data-theme="light"] .hero__visual::after,
    :root:not([data-theme="dark"]) .hero__visual::after,
    :root[data-theme="light"] .dash::before,
    :root:not([data-theme="dark"]) .dash::before,
    :root[data-theme="light"] .hero::before,
    :root:not([data-theme="dark"]) .hero::before,
    :root[data-theme="light"] .hero__title .grad,
    :root:not([data-theme="dark"]) .hero__title .grad { animation: none; }
    :root[data-theme="light"] .btn--primary::after,
    :root:not([data-theme="dark"]) .btn--primary::after { display: none; }
}

/* ============ 浅色模式：Canvas 梦幻星系星空（light 专属；dark 零影响）
   螺旋星云 / 星星闪烁 / 流星穿越 均由 /public/assets/js/starry-bg/ 模块绘制
   与深色模式璀璨星空对仗，浅色底色保证前景文字可读 ============ */

/* ---- 1. Hero 浅色模式底色：透明，由 Canvas 星空背景（starry-bg）透出提供视觉 ---- */
:root[data-theme="light"] .hero,
:root:not([data-theme="dark"]) .hero {
    background: transparent;
}
/* hero::before 保留 V6.0 动态极光光场（蓝/青/金缓慢漂移），与梦幻星云叠加丰富层次 */
/* 底部能量网格在星空主题下隐藏（保持梦幻纯净，避免科技网格破坏星空氛围） */
:root[data-theme="light"] .hero::after,
:root:not([data-theme="dark"]) .hero::after {
    display: none;
}

/* ---- 3. Live Monitor 面板玻璃拟态（light）：半透明深蓝 + 毛玻璃 + 青色边框 + 斜向扫光（8s） ---- */
:root[data-theme="light"] .dash,
:root:not([data-theme="dark"]) .dash {
    background:
        linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .15) 50%, transparent 60%),
        radial-gradient(ellipse 85% 65% at 72% -14%, rgba(110, 195, 255, .30) 0%, transparent 60%),
        linear-gradient(135deg, rgba(16, 40, 92, .58) 0%, rgba(34, 66, 130, .44) 100%);
    background-size: 240% 100%, auto, auto;
    background-position: 120% 0, 0 0, 0 0;
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border-color: rgba(96, 170, 255, .60);
    animation:
        dash-glow-breathe 4s ease-in-out infinite,
        dash-float 9s ease-in-out infinite,
        dash-sheen-sweep 8s linear infinite;
}
@keyframes dash-sheen-sweep {
    0%   { background-position: 120% 0, 0 0, 0 0; }
    100% { background-position: -120% 0, 0 0, 0 0; }
}
/* 数据子卡片玻璃化：与主面板同质感 */
:root[data-theme="light"] .dash__cell,
:root:not([data-theme="dark"]) .dash__cell {
    background: rgba(10, 30, 70, .38);
    border-color: rgba(103, 200, 255, .28);
    box-shadow: inset 0 0 16px rgba(90, 180, 255, .08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
/* 数字极轻微跳动：8s 循环开头轻跳两下后静止，模拟实时读数微颤 */
:root[data-theme="light"] .dash__cell-value .num,
:root:not([data-theme="dark"]) .dash__cell-value .num {
    display: inline-block;
    animation: dash-num-tick 8s ease-in-out infinite;
    will-change: transform;
}
@keyframes dash-num-tick {
    0%, 100% { transform: translateY(0); }
    3%  { transform: translateY(1px); }
    6%  { transform: translateY(-1px); }
    9%  { transform: translateY(0); }
}

/* ---- 4. 移动端：保留星云/星星闪烁/流星（用户明确要求的核心效果，低频循环，合成器友好） ---- */
/* 注：不再响应 prefers-reduced-motion（用户明确要求所有动效始终以动态形式展示） */