/* ========== 1. 顶奢全息科幻控制舱变量体系 ========== */
:root {
            --primary-dark: #1F2716;
            --primary-main: #5F6941;
            --primary-light: #828D5F;
            --cyber-cyan: #00f3ff;
            --cyber-green: #98a36e;

            /* 强化全景磨砂质感 */
            --glass-blur: blur(30px);
            --glass-card-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
            --glass-border-light: 1px solid rgba(255, 255, 255, 0.2);
            --glass-border-dark: 1px solid rgba(255, 255, 255, 0.08);
            --glass-shadow: 0 40px 80px rgba(0, 0, 0, 0.45);

            --radius-lg: 24px;
            --radius-xl: 36px;
            --transition-premium: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
            --transition-base: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.managed-card-link {
    display: block;
    text-decoration: none;
}

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html {
            scroll-behavior: smooth;
            font-size: 16px !important;
        }

        body {
            font-family: 'Noto Serif SC', 'Source Han Serif CN', 'PingFang SC', sans-serif !important;
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.8;
            overflow-x: hidden;
            background: linear-gradient(to bottom, rgba(11, 15, 8, 0) 0%, rgba(5, 7, 4, 0) 100%),
                        url("/static/banner/微信图片_20260722114631_37_19.png") center/cover no-repeat fixed;
            position: relative;
        }

        /* 量子点阵网格 */
        body::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background-image:
                linear-gradient(rgba(0, 243, 255, 0.015) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 243, 255, 0.015) 1px, transparent 1px);
            background-size: 60px 60px;
            background-position: center center;
            z-index: 0;
            pointer-events: none;
        }

        /* 扩展宽屏显示能力 */
        .container-fluid-custom {
            width: 100%;
            max-width: 1400px;
            padding-left: 20px;
            padding-right: 20px;
            margin: 0 auto;
        }

        /* ========== 顶置沉浸式页头 ========== */
        .page-header-premium {
            min-height: 420px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-top: 100px;
            position: relative;
            background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(11,15,8,0)),
                        var(--cms-page-background, url("/static/banner/微信图片_20260722114631_37_19.png")) center/cover no-repeat fixed;
            z-index: 1;
        }
        .page-header-premium::after {
            content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 120px;
            background: linear-gradient(to bottom, transparent, rgba(11, 15, 8, 0));
        }
        .page-header-content { text-align: center; z-index: 2; }
        .page-header-premium h1 {
            font-family: 'Noto Serif SC', serif !important;
            font-size: 3.8rem;
            font-weight: 300;
            color: #ffffff;
            letter-spacing: 12px;
            margin-bottom: 15px;
            text-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
            animation: textGlowPulse 4s infinite ease-in-out;
        }
        @keyframes textGlowPulse { 0%, 100% { text-shadow: 0 0 20px rgba(0, 243, 255, 0.2); opacity: 0.9; } 50% { text-shadow: 0 0 40px rgba(0, 243, 255, 0.65), 0 0 12px var(--cyber-cyan); opacity: 1; } }

        .page-header-premium p {
            font-family: 'PingFang SC', sans-serif;
            font-size: 1.2rem;
            color: rgba(255,255,255,0.6);
            letter-spacing: 4px;
        }

        /* ========== 通用流域规范 ========== */
        .section-premium { padding: 120px 0; position: relative; z-index: 1; }

        /* HUD 数据面板仪表盘 */
        .hud-sub-dashboard {
            display: flex; justify-content: center; gap: 50px; align-items: center; opacity: 0.6; font-family: monospace; font-size: 0.85rem; color: rgba(255,255,255,0.4); margin-top: 25px;
        }
        .hud-widget { display: flex; align-items: center; gap: 12px; }
        .hud-wave { width: 70px; height: 18px; display: flex; align-items: center; gap: 4px; }
        .hud-wave-bar { width: 2px; height: 100%; background: var(--cyber-cyan); animation: waveGrow 1.2s infinite ease-in-out; }
        .hud-wave-bar:nth-child(2) { animation-delay: 0.2s; }
        .hud-wave-bar:nth-child(3) { animation-delay: 0.4s; }
        .hud-wave-bar:nth-child(4) { animation-delay: 0.6s; }
        @keyframes waveGrow { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
        .hud-circle-spinner { width: 16px; height: 14px; border: 1.5px dashed var(--cyber-cyan); border-radius: 50%; animation: radarSpin 3s infinite linear; }

        /* 全息流光背景动画与雷达组件 */
        .tech-grid-pulses { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
        .tech-grid-pulses::before, .tech-grid-pulses::after { content: ''; position: absolute; width: 5px; height: 4px; background: var(--cyber-cyan); border-radius: 50%; opacity: 0; }
        .tech-grid-pulses::before { top: 30%; left: 15%; animation: pulsePoint 4s infinite ease-in-out; }
        .tech-grid-pulses::after { top: 65%; left: 80%; animation: pulsePoint 5s infinite ease-in-out 1.5s; }
        @keyframes pulsePoint { 0%, 100% { opacity: 0; transform: scale(0.5); } 50% { opacity: 0.6; transform: scale(1.5); box-shadow: 0 0 12px var(--cyber-cyan); } }

        .tech-light-tracers { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
        .tech-light-tracers::before { content: ''; position: absolute; left: -250px; top: 38%; width: 300px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyber-green), var(--cyber-cyan), transparent); animation: lightWalkHorizontal 7s infinite linear; }
        @keyframes lightWalkHorizontal { 0% { left: -250px; } 100% { left: 100vw; } }

        .cyber-left-radar { position: absolute; left: -120px; top: 40%; width: 540px; height: 540px; border: 1px solid rgba(0, 243, 255, 0.03); border-radius: 50%; z-index: 0; pointer-events: none; }
        .cyber-left-radar::before, .cyber-left-radar::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; }
        .cyber-left-radar::before { width: 80%; height: 80%; border: 1px dashed rgba(130, 141, 95, 0.12); background: radial-gradient(circle, rgba(0,243,255,0.01) 0%, transparent 70%); animation: radarSpin 20s infinite linear; }
        .cyber-left-radar::after { width: 50%; height: 50%; border: 1px solid rgba(0, 243, 255, 0.06); border-left-color: var(--cyber-cyan); animation: radarSpin 8s infinite linear reverse; }
        @keyframes radarSpin { 100% { transform: translate(-50%, -50%) rotate(360deg); } }

        /* 右侧终端日志 */
        .cyber-right-terminal { position: fixed; right: 20px; top: 280px; width: 220px; height: 280px; background: rgba(11, 15, 8, 0.45); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(15px); border-radius: 16px; padding: 16px; z-index: 5; pointer-events: none; overflow: hidden; font-family: 'Courier New', Courier, monospace; box-shadow: var(--glass-shadow); }
        .terminal-header { font-size: 0.7rem; color: rgba(255, 255, 255, 0.35); border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 6px; margin-bottom: 10px; letter-spacing: 1px; display: flex; justify-content: space-between; }
        .terminal-logs { display: flex; flex-direction: column; gap: 7px; font-size: 0.68rem; color: var(--cyber-green); animation: terminalScroll 16s infinite steps(8); }
        @keyframes terminalScroll { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-180px); } }
        .log-line { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
        .log-line span { color: var(--cyber-cyan); font-weight: bold; }

        /* ========== 5 卡片平铺核心布局配置 ========== */
        .five-cards-row {
            display: flex;
            flex-wrap: wrap;
            margin-right: -10px;
            margin-left: -10px;
        }

        .col-five {
            flex: 0 0 100%;
            max-width: 100%;
            padding-right: 10px;
            padding-left: 10px;
        }

        @media (min-width: 1200px) {
            .col-five {
                flex: 0 0 20%;
                max-width: 20%; /* 大屏下精确 5 等分平铺 */
            }
        }

        .case-grid-capsule { transform-style: preserve-3d; cursor: pointer; margin-bottom: 20px; }

        /* 5 卡片错落波浪视觉 */
        @media (min-width: 1200px) {
            .case-grid-capsule:nth-child(1) { transform: translateY(30px); }
            .case-grid-capsule:nth-child(2) { transform: translateY(-10px); }
            .case-grid-capsule:nth-child(3) { transform: translateY(40px); }
            .case-grid-capsule:nth-child(4) { transform: translateY(-10px); }
            .case-grid-capsule:nth-child(5) { transform: translateY(30px); }
        }

        /* 芯片控制舱样式优化 */
        .showcase-card {
            position: relative;
            height: 450px;
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--glass-shadow);
            background: var(--glass-card-bg) !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            transition: var(--transition-premium) !important;
            transform-style: preserve-3d;
        }

        .showcase-card::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: var(--radius-lg); padding: 1.5px; background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.02) 40%, rgba(0,243,255,0.25) 60%, rgba(255,255,255,0.15) 100%); background-size: 200% 200%; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 5;
        }

        .hud-corner-indicator { position: absolute; width: 12px; height: 12px; border: 1px solid rgba(0, 243, 255, 0.4); z-index: 6; pointer-events: none; transition: var(--transition-base); }
        .hud-top-left { top: 15px; left: 15px; border-right: none; border-bottom: none; }
        .hud-top-right { top: 15px; right: 15px; border-left: none; border-bottom: none; }
        .hud-bottom-left { bottom: 15px; left: 15px; border-right: none; border-top: none; }
        .hud-bottom-right { bottom: 15px; right: 15px; border-left: none; border-top: none; }
        .hud-ruler-x { position: absolute; bottom: 15px; left: 35px; width: 50px; height: 2px; border-bottom: 1px solid rgba(255,255,255,0.15); z-index: 6; pointer-events: none; }

        .showcase-card-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; transform: translateZ(-10px); }
        .showcase-card-bg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1); filter: brightness(0.65); }

        /* 磨砂控制舱浮层 */
        .showcase-glass-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2;
            background: linear-gradient(to bottom, rgba(11, 15, 8, 0.05) 0%, rgba(5, 7, 4, 0.88) 100%);
            backdrop-filter: var(--glass-blur) saturate(180%) !important;
            -webkit-backdrop-filter: var(--glass-blur) saturate(180%) !important;
            display: flex; flex-direction: column; justify-content: flex-end; padding: 20px 14px; transition: var(--transition-base);
        }

        .showcase-card::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(125deg, transparent 30%, rgba(0, 243, 255, 0.08) 40%, rgba(130, 141, 95, 0.08) 50%, transparent 60%); background-size: 300% 300%; transition: all 0.8s ease; z-index: 3; pointer-events: none; opacity: 0; }
        .showcase-card:hover::after { opacity: 1; background-position: 100% 100%; }

        .case-grid-capsule:hover .showcase-card {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
            border-color: rgba(0, 243, 255, 0.4) !important;
            transform: scale(1.02);
            box-shadow: 0 30px 80px rgba(0, 243, 255, 0.25);
        }
        .case-grid-capsule:hover .hud-corner-indicator {
            border-color: var(--cyber-cyan); width: 16px; height: 16px; box-shadow: 0 0 10px var(--cyber-cyan);
        }
        .case-grid-capsule:hover .showcase-card-bg img { transform: scale(1.05); }

        /* 核心业务页：背景可替换时仍保持清晰的深色磨砂材质 */
        .business-page .showcase-card {
            background: linear-gradient(145deg, rgba(17, 29, 31, 0.6), rgba(4, 9, 11, 0.5)) !important;
            border-color: rgba(220, 255, 247, 0.2) !important;
            -webkit-backdrop-filter: blur(24px) saturate(135%);
            backdrop-filter: blur(24px) saturate(135%);
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        .business-page .showcase-card-bg {
            display: none;
        }

        .business-page .showcase-glass-overlay {
            background: linear-gradient(to bottom, rgba(17, 30, 31, 0.12), rgba(3, 8, 10, 0.58));
            -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
        }

        .business-page .case-grid-capsule:hover .showcase-card {
            background: linear-gradient(145deg, rgba(24, 42, 43, 0.67), rgba(5, 12, 14, 0.56)) !important;
            border-color: rgba(0, 243, 255, 0.42) !important;
            box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42), 0 0 32px rgba(0, 243, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        .business-page .cyber-right-terminal {
            background: linear-gradient(145deg, rgba(16, 28, 29, 0.6), rgba(4, 9, 10, 0.52));
            border-color: rgba(220, 255, 247, 0.18);
            -webkit-backdrop-filter: blur(24px) saturate(135%);
            backdrop-filter: blur(24px) saturate(135%);
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        .showcase-card-content { position: relative; z-index: 4; color: #ffffff; }

        /* 芯片对角裁切徽标 */
        .card-badge {
            display: inline-block; background: rgba(0, 243, 255, 0.06); color: var(--cyber-cyan); padding: 3px 8px; font-size: 0.62rem; font-weight: 700; letter-spacing: 1px; border: 1px solid rgba(0, 243, 255, 0.25); margin-bottom: 8px; font-family: 'Courier New', monospace; clip-path: polygon(0 0, 92% 0, 100% 35%, 100% 100%, 8% 100%, 0 65%); text-shadow: 0 0 8px rgba(0, 243, 255, 0.4);
        }

        .showcase-card-content h3 { font-family: 'Noto Serif SC', serif !important; font-size: 1.2rem; font-weight: 400; margin-bottom: 8px; text-shadow: 0 2px 12px rgba(0,0,0,0.5); position: relative; overflow: hidden; display: inline-block; letter-spacing: 1px; white-space: nowrap; }
        .showcase-card-content h3::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); animation: textLaserScan 4s infinite ease-in-out; }
        @keyframes textLaserScan { 0% { left: -100%; } 30%, 100% { left: 150%; } }

        /* 🟢 优化后的描述文本，不再截断 */
        .showcase-card-content p {
            font-family: 'PingFang SC', sans-serif;
            font-size: 0.75rem;
            color: rgba(255,255,255,0.65);
            line-height: 1.55;
            margin-bottom: 12px;
            word-break: break-word;
        }

        .feature-list { list-style: none; padding: 0; margin-bottom: 0; }
        .feature-list li { padding: 5px 0; font-size: 0.72rem; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); }
        .feature-list li:last-child { border-bottom: none; }
        .feature-list li i { color: #ffffff; margin-right: 10px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.95rem; text-shadow: 0 0 8px rgba(0, 243, 255, 0.6); }

        /* 全息底部数据控制台栏 */
        .cyber-bottom-hud-bar {
            width: 100vw; height: 60px; background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); border-top: 1px solid rgba(0, 243, 255, 0.08); display: flex; align-items: center; justify-content: space-between; padding: 0 50px; font-family: monospace; font-size: 0.8rem; color: rgba(255,255,255,0.35); letter-spacing: 1px; margin-top: 80px; position: relative; z-index: 5;
        }
        .hud-bottom-split-line { width: 1px; height: 16px; background: rgba(255,255,255,0.12); margin: 0 20px; }
        .bottom-badge-active { background: rgba(0, 243, 255, 0.05); color: var(--cyber-cyan); border: 1px solid rgba(0, 243, 255, 0.2); padding: 3px 14px; clip-path: polygon(0 0, 90% 0, 100% 30%, 100% 100%, 10% 100%, 0 70%); font-weight: 700; text-shadow: 0 0 6px rgba(0, 243, 255, 0.4); z-index: 12; }

        .hud-bottom-pulse-container { width: 100vw; height: 110px; pointer-events: none; z-index: 0; overflow: hidden; position: relative; margin-top: -110px; }
        .cyber-stream-line { position: absolute; left: -300px; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.05), var(--cyber-cyan), transparent); filter: drop-shadow(0 0 6px var(--cyber-cyan)); }
        .stream-1 { top: 20px; width: 250px; animation: bottomStreamRun 5s infinite cubic-bezier(0.4, 0, 0.2, 1); }
        .stream-2 { top: 55px; width: 400px; animation: bottomStreamRun 7s infinite cubic-bezier(0.25, 1, 0.5, 1); animation-delay: 1.8s; }
        .stream-3 { top: 90px; width: 200px; background: linear-gradient(90deg, transparent, var(--cyber-green), transparent); filter: drop-shadow(0 0 4px var(--cyber-green)); animation: bottomStreamRun 6s infinite linear; animation-delay: 3.5s; }
        @keyframes bottomStreamRun { 0% { left: -350px; opacity: 0; } 5% { opacity: 0.8; } 95% { opacity: 0.8; } 100% { left: 100vw; opacity: 0; } }

        /* 滚动渐入 */
        .fade-in-up { opacity: 0; transform: translateY(50px); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
        .fade-in-up.visible { opacity: 1; transform: translateY(0); }

        /* 响应式调整 */
        @media (max-width: 1750px) {
            .cyber-right-terminal { display: none !important; }
        }
        @media (max-width: 1200px) {
            .col-five { flex: 0 0 50%; max-width: 50%; }
            .case-grid-capsule { transform: none !important; }
        }
        @media (max-width: 768px) {
            .col-five { flex: 0 0 100%; max-width: 100%; }
            .section-premium { padding: 80px 0; }
            .showcase-card { height: auto; min-height: 500px; }
            .cyber-left-radar, .hud-sub-dashboard, .cyber-bottom-hud-bar, .hud-bottom-pulse-container { display: none !important; }
        }