/*
Theme Name: Purniss
Theme URI: https://purniss.com
Author: Purnis Team
Description: Industrial minimalist theme for B2B manufacturing and export.
Version: 1.0
*/

/* ==========================================================================
   Purnis 全局 Responsive Header & Footer 统一样式表
   ========================================================================== */

/* ==========================================================================
   Purnis 全局 Responsive Header & Footer 统一样式表
   ========================================================================== */

/* 1. 基础布局与通用样式 */
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #111827;
    background-color: #FFFFFF;
    -webkit-font-smoothing: antialiased;
}

/* 🔥 破解 Sticky 失效的终极补丁：确保根元素没有隐藏溢出 */
html, body {
    overflow-x: visible !important; 
    overflow-y: visible !important;
}

/* 如果你的 WordPress 主题最外层有一个包裹器 (比如 id="page" 或 class="site-wrapper") */
/* 最好也加上下面这行，你可以根据你的实际 HTML 结构修改类名 */
#page, .site-wrapper, .site {
    overflow: visible !important;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   1. Header 头部样式 (桌面端)
   -------------------------------------------------------------------------- */
.purnis-header {
    background-color: #FFFFFF;
    border-bottom: 1px solid #E5E7EB;
    
    /* 🔥 强化版 Sticky 固定定位 */
    position: -webkit-sticky !important; /* 兼容 iOS Safari */
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important; /* 拉到最高，确保绝不被覆盖 */
    
    font-family: var(--font-family, 'Inter', -apple-system, sans-serif);
}

.purnis-header .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

.header-left-cluster {
    display: flex;
    align-items: center;
    gap: 48px;
}

.site-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-logo a {
    display: flex;
    align-items: center;
}

.site-logo img {
    height: clamp(36px, 4.5vw, 65px); 
    width: auto !important;
    max-width: 100%;
    object-fit: contain;
    display: block;
    transition: all 0.5s ease;
}

.purnis-header.scrolled .site-logo img { 
    height: clamp(30px, 3vw, 50px); 
}

.primary-menu {
    display: flex;
    align-items: center;
}

.mobile-cta-box {
    display: none;
}

.primary-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 32px;
    align-items: center;
}

.primary-menu > ul > li {
    position: relative !important; 
    height: 80px;
    display: flex;
    align-items: center;
}

.primary-menu a {
    text-decoration: none;
    color: #111827;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.2px;
    transition: color 0.15s ease;
}

.primary-menu a:hover {
    color: #10B981;
}

.primary-menu .sub-menu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: -16px;
    background-color: #FFFFFF;
    min-width: 220px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    padding: 8px 0;
    flex-direction: column;
    gap: 0;
    transform: translateY(4px);
    transition: all 0.2s ease-in-out;
}

.primary-menu li:hover > .sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.primary-menu .sub-menu a {
    padding: 10px 20px;
    display: block;
    font-size: 13px;
    color: #4B5563;
}

.primary-menu .sub-menu a:hover {
    background-color: #F9FAFB;
    color: #10B981;
}

.header-right-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn-primary {
    background-color: #10B981;
    color: #FFFFFF !important;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    transition: background-color 0.15s ease;
    display: inline-block;
    white-space: nowrap;
    border: none;
}

.btn-primary:hover {
    background-color: #059669;
}

.mobile-menu-toggle {
    display: none;
}

/* 让父级菜单项支持 Flex 对齐，方便文字和圆点居中 */
.primary-menu .menu-item-has-children > a {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* 文字和圆点之间的间距 */
}

/* 使用 ::after 伪元素画出圆点 */
.primary-menu .menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 6px;          /* 圆点大小 */
    height: 6px;
    background-color: #10B981; /* 你的品牌主题绿 */
    border-radius: 50%;  /* 变成正圆 */
    
    /* 绑定呼吸动画：2秒完成一次，平滑过渡，无限循环 */
    animation: breathingDot 2.5s ease-in-out infinite;
}

/* 鼠标悬停时，圆点停止呼吸，稍微变大并加深颜色，给用户反馈 */
.primary-menu .menu-item-has-children > a:hover::after {
    animation-play-state: paused;
    transform: scale(1.2);
    background-color: #059669; 
    box-shadow: none; /* 悬停时去掉发光阴影 */
}

/* 定义呼吸动画的关键帧（大小缩放 + 透明度变化 + 微弱发光） */
@keyframes breathingDot {
    0% {
        transform: scale(0.85);
        opacity: 0.5;
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
        box-shadow: 0 0 6px 2px rgba(16, 185, 129, 0.25); /* 扩散出微弱的绿光 */
    }
    100% {
        transform: scale(0.85);
        opacity: 0.5;
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* ==========================================================================
   高级工业风 Mega Menu 样式 (PC端)
   ========================================================================== */
@media (min-width: 1025px) {
    .primary-menu > ul > li {
        position: static !important;
    }
    
    .primary-menu > ul > li > .mega-dropdown-panel {
        position: absolute;
        top: 100%;
        left: 50% !important;                    
        transform: translateX(-50%) translateY(15px); 
        width: 1100px;                           
        max-width: 90vw;                         

        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        
        border-top: 3px solid #10B981;
        border-left: 1px solid rgba(255, 255, 255, 0.8);
        border-right: 1px solid rgba(255, 255, 255, 0.8);
        border-bottom: 1px solid rgba(255, 255, 255, 0.8);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
        
        padding: 35px 45px; 
        box-sizing: border-box;
        display: grid !important;
        grid-template-columns: 1fr 320px; 
        gap: 50px;
        
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
        pointer-events: none;
        border-radius: 0 0 12px 12px; 
        z-index: 99999;
    }

    .primary-menu > ul > li > .mega-dropdown-panel::before {
        content: '';
        position: absolute;
        top: -20px; 
        left: 0;
        width: 100%;
        height: 20px;
        background: transparent;
    }

    .primary-menu > ul > li:hover > .mega-dropdown-panel {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0); 
        pointer-events: auto;
    }

    .mega-main-content { padding-right: 20px; }
    .mega-heading { font-size: 24px; font-weight: 700; color: #111827; margin-bottom: 24px; }
    .mega-grid-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 30px; margin-bottom: 30px; }

    .mega-item { display: flex !important; align-items: flex-start; gap: 16px; padding: 12px !important; border-radius: 8px; transition: background 0.2s ease; text-decoration: none !important; }
    .mega-item:hover { background: rgba(255, 255, 255, 0.6); }

    .mega-icon { font-size: 24px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
    .mega-text { display: flex; flex-direction: column; }
    .mega-title { font-size: 16px; font-weight: 700; color: #111827; margin-bottom: 4px; }
    .mega-item:hover .mega-title { color: #10B981; }
    .mega-desc { font-size: 13px; color: #6B7280; line-height: 1.4; }

    .mega-footer-links { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid rgba(255, 255, 255, 0.8); padding-top: 20px; }
    .mega-footer-links a { font-size: 14px; font-weight: 600; color: #10B981 !important; text-decoration: none !important; display: inline-flex; align-items: center; width: fit-content; }
    .mega-footer-links a:hover { text-decoration: underline !important; }

    .mega-promo-sidebar { background: rgba(255, 255, 255, 0.5); border-radius: 12px; padding: 24px; border: 1px solid rgba(255, 255, 255, 0.9); display: flex; flex-direction: column; justify-content: center; }
    .promo-image-box { width: 100%; height: 160px; background: rgba(226, 232, 240, 0.5); border-radius: 8px; margin-bottom: 16px; overflow: hidden; }
    .promo-image-box img { width: 100%; height: 100%; object-fit: cover; }
    .mega-promo-card h3 { font-size: 18px; font-weight: 700; color: #111827; margin: 0 0 8px 0; }
    .mega-promo-card p { font-size: 13px; color: #4B5563; line-height: 1.5; margin: 0 0 16px 0; }
    .promo-btn { font-size: 14px; font-weight: 600; color: #10B981 !important; text-decoration: none !important; }
    .promo-btn:hover { text-decoration: underline !important; }
}


/* --------------------------------------------------------------------------
   2. Footer 页脚样式 (桌面端 - 完美还原原版)
   -------------------------------------------------------------------------- */
.purnis-light-footer {
    background-color: #FFFFFF;
    color: #4B5563;
    font-family: var(--font-family, 'Inter', -apple-system, sans-serif);
    font-size: 14px;
    line-height: 1.6;
    border-top: 1px solid #E5E7EB;
    padding: 60px 0 30px 0;
}

.purnis-light-footer .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 32px;
}

.footer-top-layout { display: flex; align-items: flex-start; margin-bottom: 50px; }
.footer-sidebar { width: 25%; padding-right: 40px; border-right: 1px solid #E5E7EB; flex-shrink: 0; }
.footer-sidebar-logo { margin-bottom: 16px; }
/* 修改部分：调大了 Footer Logo 的尺寸 */
.footer-sidebar-logo img { 
    height: clamp(45px, 5vw, 80px); /* 手机最小 45px，电脑最大 80px */
    width: auto !important; 
    max-width: 100%; 
    display: block; 
}
.location-details { font-style: normal; color: #374151; font-size: 13px; line-height: 1.7; }
.contact-link { color: #374151; text-decoration: none; transition: color 0.15s ease; }
.contact-link:hover { color: #10B981; }

.footer-links-grid { width: 75%; padding-left: 60px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.col-heading { color: #111827; font-size: 16px; font-weight: 600; margin: 0 0 20px 0; }
.col-links { list-style: none; padding: 0; margin: 0; }
.col-links li { margin-bottom: 12px; }
.col-links a { color: #4B5563; text-decoration: none; font-size: 14px; transition: color 0.15s ease; }
.col-links a:hover { color: #10B981; }

.footer-newsletter-row { display: flex; justify-content: space-between; align-items: center; padding: 40px 0; border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB; }
.newsletter-title { color: #111827; font-size: 18px; font-weight: 600; margin: 0 0 6px 0; }
.newsletter-text p { margin: 0; font-size: 14px; color: #4B5563; }
.newsletter-form-wrapper { display: flex; flex-direction: column; align-items: flex-end; }
.newsletter-form { display: flex; gap: 12px; }
.newsletter-form input { width: 280px; padding: 10px 14px; border: 1px solid #D1D5DB; border-radius: 4px; font-size: 14px; color: #111827; outline: none; }
.newsletter-form input:focus { border-color: #10B981; }
.btn-subscribe { background-color: #10B981; color: #FFFFFF; border: none; padding: 10px 24px; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 0.2s; }
.btn-subscribe:hover { background-color: #059669; }
.newsletter-disclaimer { margin: 8px 0 0 0; font-size: 11px; color: #9CA3AF; }
.newsletter-disclaimer a { color: #10B981; text-decoration: none; }

.footer-bottom-row { display: flex; justify-content: space-between; align-items: center; padding-top: 30px; }
.footer-socials { display: flex; gap: 20px; }
.footer-socials a { color: #111827; transition: color 0.2s; display: flex; align-items: center; }
.footer-socials a:hover { color: #10B981; }
.footer-copyright { font-size: 13px; color: #6B7280; }


/* --------------------------------------------------------------------------
   3. 平板端与移动端响应式 (Tablet & Mobile Layout Overhaul)
   -------------------------------------------------------------------------- */

/* 【平板端适配 (768px - 1024px)】 */
@media (max-width: 1024px) {
    .purnis-header .container { padding: 0 24px; max-width: 100%; box-sizing: border-box; }
    .header-left-cluster { gap: 16px; }
    .primary-menu ul { gap: 14px; }
    .primary-menu a { font-size: 14px; white-space: nowrap; }

    /* 平板端直接关闭超级面板 */
    .primary-menu > ul > li > .mega-dropdown-panel { display: none !important; }

    /* 平板 Footer - 完美还原原版 */
    .footer-top-layout { flex-direction: column; margin-bottom: 40px; }
    .footer-sidebar { width: 100%; border-right: none; padding-right: 0; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid #E5E7EB; box-sizing: border-box; }
    .footer-links-grid { width: 100%; padding-left: 0; grid-template-columns: repeat(4, 1fr); gap: 20px; box-sizing: border-box; }
    .footer-links-grid > * { min-width: 0; }
}

/* 【手机移动端重构 (cnc 768px)】 */
@media (max-width: 767px) {
    /* Header 手机端自适应 */
    .purnis-header { position: relative; }
    .header-left-cluster { position: static; }
    .purnis-header .container { height: 60px; padding: 0 16px; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; }
    .site-logo img { height: 32px !important; max-width: 160px; }
    .header-right-actions .btn-primary { display: none !important; }
    .header-right-actions { gap: 0; }
    .btn-primary { padding: 6px 12px !important; font-size: 12px !important; border-radius: 4px; }

    /* 手机端下拉导航 */
    .primary-menu {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        background-color: #FFFFFF;
        border-bottom: 1px solid #E5E7EB;
        padding: 20px 16px;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
        z-index: 999;
    }
    
    .primary-menu .mobile-cta-box { display: block; padding: 12px 0 16px 0; margin-bottom: 12px; border-bottom: 1px solid #F3F4F6; box-sizing: border-box; }
    .primary-menu .mobile-cta-box .btn-primary { display: block !important; width: 100%; text-align: center; padding: 12px 0; font-size: 14px; font-weight: 600; border-radius: 6px; box-sizing: border-box; }
    .purnis-header.nav-active .primary-menu { display: block; }

    .primary-menu ul {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 0;
        box-sizing: border-box;
    }

    .primary-menu > ul > li {
        height: auto;
        width: 100%;
        border-bottom: 1px solid #F3F4F6;
        box-sizing: border-box;
        position: static !important;
        flex-direction: column !important; 
        align-items: flex-start !important; 
    }

    /* 【修复横条核心】：导航一级和子类文字打断 nowrap，强制换行不溢出 */
    .primary-menu > ul > li > a {
        display: block;
        padding: 12px 0;
        width: 100%;
        font-size: 15px;
        box-sizing: border-box;
        white-space: normal !important; 
        word-break: break-word !important;
    }

    /* 手机端超级菜单：重塑为最干净的纯文本列表 */
    .primary-menu > ul > li > .mega-dropdown-panel {
        position: static !important; 
        display: none !important; 
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        border-top: 1px dashed #E5E7EB !important;
        background: transparent !important;
        padding: 10px 0 16px 16px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .primary-menu > ul > li:hover > .mega-dropdown-panel,
    .primary-menu > ul > li.active > .mega-dropdown-panel {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .primary-menu > ul > li > .mega-dropdown-panel::before,
    .primary-menu > ul > li::after { display: none !important; }

    /* 内部变为块级结构 */
    .primary-menu .mega-grid-2col {
        display: block !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    /* 隐藏所有描述、小图标、右侧宣传图，以及底部的附加链接 (mega-footer-links) */
    .primary-menu .mega-desc,
    .primary-menu .mega-grid-2col img,
    .primary-menu .mega-grid-2col svg,
    .primary-menu .mega-icon,
    .primary-menu .mega-promo-sidebar,
    .primary-menu .mega-footer-links {
        display: none !important;
    }

    /* 单个卡片改为行内块：微调上下间距，让菜单列表更紧凑 */
    .primary-menu .mega-item {
        display: block !important;
        width: 100% !important;
        padding: 6px 0 !important; /* 🔥 从 8px 降为 6px，收紧列表间距 */
        background: transparent !important;
        border: none !important;
        box-sizing: border-box !important;
    }
    
    .primary-menu .mega-item:hover { background: transparent !important; }

    /* 统一小标题 (如 CAPABILITIES) 字体样式：调小字号 */
    .primary-menu .mega-heading {
        font-size: 12px !important; /* 🔥 从 13px 降为 12px */
        font-weight: 600 !important;
        color: #9CA3AF !important; 
        margin-bottom: 4px !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: normal !important;
    }

    /* 统一主标题 (如 CNC Machining) 字体：调小字号，显得更精致 */
    .primary-menu .mega-title {
        font-size: 14px !important; /* 🔥 从 15px 降为 14px */
        font-weight: 500 !important; 
        color: #4B5563 !important;   
        margin: 0 !important;
        white-space: normal !important; 
        word-break: break-word !important; 
    }

    .primary-menu .mega-item:hover .mega-title { color: #10B981 !important; }

    /* 彻底清除并隐藏原有底部链接的残留样式 */
    .primary-menu .mega-footer-links,
    .primary-menu .mega-footer-links a {
        display: none !important;
    }

    .primary-menu .sub-menu { position: static; visibility: visible; opacity: 1; box-shadow: none; border: none; padding: 0 0 12px 16px; transform: none; display: block; box-sizing: border-box; }
    .primary-menu .sub-menu a { padding: 8px 0; font-size: 14px; white-space: normal !important; word-break: break-word !important; }

    /* 汉堡按钮 */
    .mobile-menu-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 36px; height: 36px; background: transparent; border: none; cursor: pointer; padding: 0; }
    .hamburger-line { display: block; width: 22px; height: 2px; background-color: #111827; margin: 3px 0; transition: transform 0.2s ease, opacity 0.2s ease; }
    .purnis-header.nav-active .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .purnis-header.nav-active .hamburger-line:nth-child(2) { opacity: 0; }
    .purnis-header.nav-active .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* ==========================================================================
       Footer 移动端 (完美还原你的原版代码，一丝未动)
       ========================================================================== */
    .purnis-light-footer { padding: 40px 0 24px 0; }
    .purnis-light-footer .container { padding: 0 16px; }
    .footer-links-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
    .col-heading { font-size: 15px; margin-bottom: 12px; }
    .col-links li { margin-bottom: 10px; }
    .col-links a { font-size: 13px; }
    .footer-newsletter-row { flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px 0; }
    .newsletter-text { max-width: 100%; }
    .newsletter-form-wrapper { width: 100%; align-items: stretch; }
    .newsletter-form { flex-direction: column; width: 100%; gap: 10px; }
    .newsletter-form input { width: 100%; box-sizing: border-box; }
    .btn-subscribe { width: 100%; padding: 12px; }
    .newsletter-disclaimer { text-align: left; }
    .footer-bottom-row { flex-direction: column; gap: 16px; align-items: center; text-align: center; padding-top: 24px; }
}

/* ==========================================================================
   Purnis 极简科技感首页框架样式
   ========================================================================== */

.purnis-homepage {
    width: 100%;
    overflow-x: hidden;
}

/* 1. 首屏样式 (Hero) */
.purnis-hero {
    position: relative;
    width: 100%;
    height: 85vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 现代视频背景写法：完美智能裁剪，绝不拉伸变形或撑破布局 */
.hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 核心魔法：保持比例填满容器，多余部分自动裁掉 */
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.9) 0%, rgba(17, 24, 39, 0.65) 100%);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 900px;
    padding: 0 24px;
}

.hero-title {
    color: #FFFFFF;
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    margin-bottom: 24px;
}

.hero-title span { color: #10B981; }

.hero-subtitle {
    color: #D1D5DB;
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto 40px auto;
}

.hero-cta-group {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-solid-green {
    background-color: #10B981;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: 2px solid #10B981;
}

.btn-solid-green:hover {
    background-color: #059669;
    border-color: #059669;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}

.btn-outline-white {
    background-color: transparent;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: 2px solid rgba(255, 255, 255, 0.8);
}

.btn-outline-white:hover {
    background-color: #FFFFFF;
    color: #111827;
    transform: translateY(-2px);
}

/* ==========================================================================
   首屏响应式完美适配 (Tablet & Mobile)
   ========================================================================== */

/* 1. 平板端适配 (Tablet: < 1024px) */
@media (max-width: 1024px) {
    .purnis-hero {
        height: auto !important; /* 🔥 核心修复：解除死板的高度锁定 */
        min-height: 60vh !important; /* 🔥 控制在屏幕高度的 60% 左右即可 */
        padding: 120px 0 80px 0 !important; /* 适当压缩上下内边距 */
        display: flex !important;
        align-items: center !important; /* 确保内容绝对垂直居中 */
    }
    
    .hero-content {
        width: 100%; /* 保证内容区完整铺开 */
    }

    .hero-title {
        font-size: clamp(32px, 5vw, 42px) !important; /* 稍微缩小了上限，避免标题在窄平板上显得过于巨大 */
        margin-bottom: 20px !important;
    }

    /* 🔥 按钮部分保持你优秀的排版 */
    .hero-cta-group {
        display: flex !important;
        justify-content: center !important; /* 确保按钮居中 */
        gap: 16px !important; 
    }
    
    .btn-solid-green, 
    .btn-outline-white {
        padding: 12px 24px !important; 
        font-size: 14px !important; 
    }
}
/* 2. 手机端竖屏完美适配 (Mobile: < 768px) */
@media (max-width: 768px) {
    .purnis-hero {
        height: auto !important; 
        min-height: 65vh !important; /* 🔥 核心修复1：从 100svh 降到 65vh，只占屏幕大半部分 */
        padding: 100px 0 60px 0 !important; /* 🔥 核心修复2：压缩上下留白，减少空旷感 */
        display: flex !important;
        align-items: center !important; /* 确保高度变矮后，内容依然在正中间 */
    }
    
    .hero-content {
        padding: 0 20px; 
        width: 100%;
    }

    /* 1. 标题：再把字号降一点，争取让它只折成 3 行，甚至 2 行 */
    .hero-title {
        font-size: 28px !important; /* 🔥 从 32px 降到 28px，减少折行碎裂感 */
        line-height: 1.3 !important;
        margin-bottom: 16px !important;
        padding: 0 10px !important; /* 两侧留一点呼吸空间 */
    }
    
    .hero-subtitle {
        font-size: 15px !important;
        margin-bottom: 28px !important; /* 描述和按钮的间距也稍微收紧一点 */
        line-height: 1.5 !important;
    }
    
    /* 2. 按钮：改为上下排列，并强制 100% 宽度对齐！ */
    .hero-cta-group {
        display: flex !important;
        flex-direction: column !important; /* 🔥 强制上下垂直排列 */
        gap: 12px !important;
        width: 100% !important;
    }
    
    .btn-solid-green, 
    .btn-outline-white {
        width: 100% !important; /* 🔥 让两个按钮长度绝对一致，边缘完美对齐 */
        text-align: center !important;
        padding: 14px 24px !important; /* 按钮稍微加高一点点，提升手指点击手感 */
        font-size: 15px !important; 
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   积木 1: Bento Box (Capabilities)
   ========================================================================== */
.purnis-bento-section { 
    padding: 100px 24px; 
    background-color: #F9FAFB; 
}

/* 顶部标题居中样式 */
.section-header-center { 
    text-align: center; 
    margin-bottom: 60px; 
}
.section-heading { 
    font-size: clamp(32px, 4vw, 42px); 
    font-weight: 800; 
    color: #111827; 
    letter-spacing: -0.5px; 
    margin-bottom: 16px; 
    line-height: 1.2; 
}
.section-desc { 
    font-size: 16px; 
    color: #4B5563; 
    line-height: 1.6; 
    max-width: 600px;
    margin: 0 auto;
}

/* ==========================================================================
   优化版：核心网格布局 (精致紧凑，刚好一屏看全)
   ========================================================================== */

/* 1. 缩小外围上下留白，把空间还给内容 */
.purnis-bento-section { 
    padding: 70px 24px; /* 从 100px 缩小到 70px */
    background-color: #F9FAFB; 
}
.section-header-center { 
    margin-bottom: 40px; /* 从 60px 缩小到 40px */
}

/* 2. 核心网格高度与间距等比缩小 */
.bento-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    grid-auto-rows: 220px; /* 🔥 核心：从 300px 调小到 220px，完美适配笔记本屏幕 */
    gap: 20px; /* 间距稍微收紧 */
    max-width: 1200px; 
    margin: 0 auto; 
}

/* 强制锁定每个方块的绝对网格位置 (保持不变) */
.item-large    { grid-column: 1 / 3 !important; grid-row: 1 / 3 !important; }
.item-normal-1 { grid-column: 3 / 4 !important; grid-row: 1 / 2 !important; }
.item-normal-2 { grid-column: 3 / 4 !important; grid-row: 2 / 3 !important; }
.item-wide     { grid-column: 1 / 3 !important; grid-row: 3 / 4 !important; }

/* 3. 卡片内部的内边距也相应稍微调小一点，显得更精致 */
.bento-item {
    padding: 20px; /* 从 24px 缩小到 20px */
    /* 其他保留... */
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* 4. 底部文字区微调，确保小格子里也不会太拥挤 */
.bento-text-box {
    margin-top: 16px;
    z-index: 3;
}
.bento-text-box h3 {
    font-size: 20px; /* 从 22px 稍微调小一点点 */
    margin: 0 0 6px 0;
}

/* 神经网络锁位 (保持不变) */
.bento-neural-decoration {
    grid-column: 3 / 4 !important; 
    grid-row: 3 / 4 !important;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 200px;
    background: transparent; 
    pointer-events: none; 
    overflow: hidden;
    border-radius: 16px;
    z-index: 1;
}

#purnisNeuralCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ==========================================================================
   ✨ 升级版：Bento Box 卡片内景 (白底 ➔ 暗黑霓虹发光)
   ========================================================================== */

/* 1. 卡片基础状态 (浅色白底模式) */
.bento-item {
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* 图片区域占据上方主空间 */
.bento-image-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0; /* 确保 Flex 布局下图片不溢出 */
}

/* 模仿参考图左上右上的极简绿色对焦框 */
.bento-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: rgba(16, 185, 129, 0.3);
    transition: all 0.5s ease;
    z-index: 4;
}
.bento-corner.tl { top: 0; left: 0; border-top: 2px solid; border-left: 2px solid; }
.bento-corner.tr { top: 0; right: 0; border-top: 2px solid; border-right: 2px solid; }

/* 双图片重叠布局 */
.bento-img-light, .bento-img-dark {
    position: absolute;
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.bento-img-light {
    opacity: 1;
    z-index: 2;
}

.bento-img-dark {
    opacity: 0;
    z-index: 1;
    transform: scale(0.95);
}

/* 底部文字区默认状态 */
.bento-text-box {
    margin-top: 20px;
    z-index: 3;
}

.bento-text-box h3 {
    color: #111827;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px 0;
    transition: color 0.5s ease;
}

.bento-text-box p {
    color: #6B7280;
    font-size: 14px;
    margin: 0;
    transition: color 0.5s ease;
}

/* ==========================================
   🔥 核心魔法：悬停 / 点击状态 (暗黑霓虹模式)
   ========================================== */
.bento-item:hover, .bento-item:active {
    background-color: #111827; /* 背景瞬间变暗 */
    border-color: #10B981; /* 边框变主题绿 */
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.15); /* 发出绿色光晕阴影 */
    transform: translateY(-6px); /* 整个卡片轻微上浮 */
}

/* 图片交叉淡入淡出 */
.bento-item:hover .bento-img-light, .bento-item:active .bento-img-light {
    opacity: 0;
}

.bento-item:hover .bento-img-dark, .bento-item:active .bento-img-dark {
    opacity: 1;
    z-index: 3;
    transform: scale(1.05); /* 发光图微微放大冲出屏幕 */
}

/* 文字与角标颜色反转 */
.bento-item:hover .bento-text-box h3, .bento-item:active .bento-text-box h3 {
    color: #10B981;
}

.bento-item:hover .bento-text-box p, .bento-item:active .bento-text-box p {
    color: #E5E7EB;
}

.bento-item:hover .bento-corner, .bento-item:active .bento-corner {
    border-color: #10B981;
}

/* -------------------------------------------
   ✨ 右下角新增：Canvas 动态神经网络容器
------------------------------------------- */
.bento-neural-decoration {
    position: relative; /* 必须是 relative，才能在网格里占据第5个格子的空间 */
    width: 100%;
    height: 100%;
    min-height: 240px;  /* 强制锁定高度，防止 Canvas 获取不到尺寸 */
    background: transparent; 
    pointer-events: none; 
    overflow: hidden;
    border-radius: 16px;
    z-index: 1;
}

#purnisNeuralCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ==========================================================================
   首屏积木 1: Bento Box 完美响应式适配 (Tablet & Mobile)
   ========================================================================== */

/* 1. 平板端适配 (Tablet: < 1024px) 
   打破 3 列，重组为 2 列完美对称布局 */
@media (max-width: 1024px) {
    .purnis-bento-section { 
        padding: 60px 20px; 
    }
    
    .bento-grid { 
        grid-template-columns: repeat(2, 1fr); /* 变为 2 列 */
        grid-auto-rows: 240px; /* 高度稍微拉高一点，适应横向拉宽的比例 */
        gap: 16px;
    }

    /* 重新分配网格坐标，打造平板端的平衡美感 */
    .item-large    { grid-column: 1 / 3 !important; grid-row: 1 / 2 !important; } /* 占满第一行 */
    .item-normal-1 { grid-column: 1 / 2 !important; grid-row: 2 / 3 !important; } /* 第二行左侧 */
    .item-normal-2 { grid-column: 2 / 3 !important; grid-row: 2 / 3 !important; } /* 第二行右侧 */
    .item-wide     { grid-column: 1 / 3 !important; grid-row: 3 / 4 !important; } /* 占满第三行 */

    /* 隐藏纯装饰性的 Canvas，保持平板端画面清爽 */
    .bento-neural-decoration {
        display: none !important;
    }
}

/* 2. 手机端竖屏适配 (Mobile: < 768px) 
   彻底解除锁定，化为极致单列瀑布流 */
@media (max-width: 768px) {
    .purnis-bento-section { 
        padding: 50px 16px; 
    }

    .section-heading { 
        font-size: 28px; /* 标题字号针对手机屏幕微调 */
        margin-bottom: 12px;
    }
    
    .section-desc { 
        font-size: 15px; 
    }

    .bento-grid { 
        grid-template-columns: 1fr; /* 强制单列 */
        grid-auto-rows: minmax(220px, auto); /* 🔥 核心魔法：最小高度220px，文字多时允许自动撑开，绝对不切断内容 */
        gap: 16px;
    }

    /* 强制所有卡片占满当前行，解除之前的坐标锁定 */
    .item-large, 
    .item-normal-1, 
    .item-normal-2, 
    .item-wide { 
        grid-column: 1 / -1 !important; 
        grid-row: auto !important; 
        min-height: 240px; 
    }
    
    .bento-item {
        padding: 24px 20px; /* 稍微增加一点上下内边距，让卡片看起来更饱满 */
    }
    
    /* 手机端卡片悬停上浮距离稍微缩小，避免误触或跳动感过强 */
    .bento-item:hover, .bento-item:active {
        transform: translateY(-3px); 
    }
}

/* ==========================================================================
   积木 2: Light & Rich Content (Engineering Services)
   ========================================================================== */

.purnis-engineering-section {
    padding: 120px 24px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F0FDF4 100%); 
    /* 删除了 overflow: hidden，防止裁切悬浮元素 */
}

.engineering-split {
    display: flex;
    align-items: center;
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- 左侧视觉区 --- */
.eng-visual-col {
    flex: 1;
    position: relative;
}

/* 专门用来包裹并裁切圆角图片的盒子 */
.image-box {
    position: relative;
    border-radius: 24px;
    overflow: hidden; /* 裁切仅限于这里 */
    box-shadow: 0 25px 50px rgba(16, 185, 129, 0.08); 
    z-index: 1;
}

.eng-main-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 悬浮数据牌：现在层级高于图片，且不受裁切影响 */
.floating-stat-card {
    position: absolute;
    bottom: -30px;
    right: -30px;
    background: #FFFFFF;
    padding: 20px 28px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    border: 1px solid #F3F4F6;
    animation: floatUpDown 4s ease-in-out infinite;
    z-index: 2; /* 置于图片上方 */
}

@keyframes floatUpDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.stat-icon {
    width: 48px;
    height: 48px;
    background: #ECFDF5; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-number {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: #111827;
    line-height: 1;
    margin-bottom: 4px;
}

.stat-number small {
    font-size: 16px;
    color: #10B981;
}

.stat-desc {
    font-size: 14px;
    color: #6B7280;
    font-weight: 500;
}

/* --- 右侧高密度内容区 --- */
.eng-content-col {
    flex: 1.1;
}

.section-heading {
    font-size: clamp(32px, 4vw, 42px);
    font-weight: 800;
    color: #111827;
    line-height: 1.2;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.section-desc {
    font-size: 16px;
    color: #4B5563;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* 富文本卡片列表 */
.rich-feature-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 40px;
}

.rich-feature-card {
    display: flex;
    gap: 20px;
    background: #FFFFFF;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid #E5E7EB;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.feature-icon-box {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: #F3F4F6;
    color: #4B5563;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.feature-text-box h3 {
    color: #111827;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px 0;
    transition: color 0.3s ease;
}

.feature-text-box p {
    color: #6B7280;
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 16px 0;
}

/* 专业技能标签 */
.feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.feature-tags span {
    background: #F3F4F6;
    color: #4B5563;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

/* 🔥 明快系悬停动效：全面变绿 */
.rich-feature-card:hover {
    border-color: #10B981;
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.1);
}

.rich-feature-card:hover .feature-icon-box {
    background: #10B981;
    color: #FFFFFF;
    transform: scale(1.05);
}

.rich-feature-card:hover .feature-text-box h3 {
    color: #10B981;
}

.rich-feature-card:hover .feature-tags span {
    background: #ECFDF5;
    color: #059669;
}

/* ==========================================================================
   积木 2 完美响应式适配 (Tablet & Mobile)
   ========================================================================== */

/* 1. 平板端适配 (Tablet: < 1024px) 
   打破左右结构，变为大气的上下结构 */
@media (max-width: 1024px) {
    .purnis-engineering-section {
        padding: 80px 24px;
    }
    
    .engineering-split {
        flex-direction: column; /* 核心：左右变上下 */
        gap: 60px;
    }
    
    /* 确保左右两列在上下堆叠时占满全宽 */
    .eng-visual-col, 
    .eng-content-col {
        width: 100%;
    }
    
    .eng-main-img {
        max-height: 500px; /* 防止图片在平板上过高，占据太多首屏空间 */
    }

    /* 🔥 核心防御：防止悬浮卡片撑破屏幕 */
    .floating-stat-card {
        right: 20px; /* 取消原来的 -30px，向内收缩，确保绝对安全 */
        bottom: -24px;
    }
}

/* 2. 手机端竖屏适配 (Mobile: < 768px) 
   细节微调，极致精致的移动端体验 */
@media (max-width: 768px) {
    .purnis-engineering-section {
        padding: 60px 16px 80px 16px; /* 底部多留点白，给悬浮卡片留出呼吸空间 */
    }
    
    .engineering-split {
        gap: 50px;
    }
    
    .image-box {
        border-radius: 16px; /* 手机端圆角稍微收敛，显得更精致 */
    }

   /* ==========================================
       1. 悬浮数据卡片：极致微缩，完全靠右
       ========================================== */
    .floating-stat-card {
        padding: 8px 14px; /* 内边距压榨到极限 */
        gap: 8px; 
        bottom: -12px;
        right: 0px; /* 核心修改：完全贴靠右侧边缘，不再向左收缩 */
        border-radius: 10px; 
    }
    
    .stat-icon {
        width: 28px; /* 进一步缩小 */
        height: 28px;
    }
    
    .stat-icon svg {
        width: 14px; 
        height: 14px;
    }
    
    .stat-number {
        font-size: 18px; /* 数字再小一号 */
        margin-bottom: 0;
    }
    
    .stat-number small {
        font-size: 12px; 
    }
    
    .stat-desc {
        font-size: 10px; /* 极简的注释级别字号 */
    }

    /* ==========================================
       2. 右侧内容区：标题与描述在手机端强制居中
       ========================================== */
    .eng-content-col .section-heading,
    .eng-content-col .section-desc {
        text-align: center; /* 核心修改：与上下区块保持一致的居中排版 */
    }

    /* ==========================================
       右侧富文本卡片：改为上下排布，彻底释放横向空间
       ========================================== */
    .rich-feature-card {
        flex-direction: column; /* 🔥 核心修复：图标和文字改为上下排列 */
        align-items: flex-start; /* 图标靠左对齐 */
        padding: 20px 16px; 
        gap: 12px; /* 图标和下方文字的间距 */
        border-radius: 12px;
    }
    
    .feature-icon-box {
        /* 图标不需要缩得太小了，因为它现在独占一行 */
        width: 44px; 
        height: 44px;
        border-radius: 10px;
    }
    
    .feature-icon-box svg {
        width: 20px; 
        height: 20px;
    }
    
    .feature-text-box {
        width: 100%; /* 强制文字区域占满横向所有宽度 */
    }
    
    .feature-text-box h3 {
        font-size: 18px; 
        margin-bottom: 6px;
    }
    
    .feature-text-box p {
        font-size: 14px; 
        line-height: 1.5; 
        margin-bottom: 16px;
    }

    /* 确保底部的标签横向排列，装不下才自动换行 */
    .feature-tags {
        display: flex;
        flex-direction: row; 
        flex-wrap: wrap;
        gap: 8px;
    }

    .feature-tags span {
        font-size: 12px; 
        padding: 6px 10px;
        border-radius: 4px;
    }
}

/* ==========================================================================
   积木 3: Customized SaaS Dashboards & Large 3D View
   ========================================================================== */

.purnis-workflow-ui-section { padding: 100px 24px; background-color: #FAFAFA; }
.section-header-center { text-align: center; margin-bottom: 60px; }
.section-heading { font-size: clamp(32px, 4vw, 42px); font-weight: 800; color: #111827; margin-bottom: 16px; }
.section-desc { max-width: 700px; margin: 0 auto; color: #4B5563; line-height: 1.6; }

/* 将原本的 max-width: 1050px; 修改为 1200px（与下方标准大卡片对齐） */
.workflow-dashboard-wrapper { 
    max-width: 1200px; 
    margin: 0 auto; 
    display: flex; 
    flex-direction: column; 
    gap: 40px; 
}

/* 仪表盘主窗口 */
.dashboard-window { background: #FFFFFF; border-radius: 16px; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1); border: 1px solid #F3F4F6; overflow: hidden; animation: floatDashboard 6s ease-in-out infinite; }
@keyframes floatDashboard { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* 顶栏 */
.dash-top-bar { display: flex; align-items: center; padding: 16px 24px; border-bottom: 1px solid #F3F4F6; background: #FFFFFF; gap: 40px;}
.window-controls { display: flex; gap: 8px; }
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot-red { background: #FF5F56; }
.dot-yellow { background: #FFBD2E; }
.dot-green { background: #27C93F; }
.dash-tabs { display: flex; gap: 30px; }
.tab { font-size: 14px; font-weight: 600; color: #9CA3AF; position: relative; cursor: pointer; padding-bottom: 16px; margin-bottom: -17px; }
.tab.active { color: #10B981; border-bottom: 2px solid #10B981; }

/* 动态内容区 */
/* 1. 让大容器变成 Flex 盒，并命令内部内容整体垂直居中 */
.dash-body-container { 
    position: relative; 
    min-height: 540px; /* 保持你刚才修改的、能和下方对齐的高度 */
    display: flex; 
    flex-direction: column; 
    justify-content: center; /* 👈 核心魔法 1：让里面的内容上下整体居中！ */
}

/* 2. 确保状态面板占满宽度，且左右两块内容也彼此垂直居中 */
.dash-content-state { 
    display: none; 
    width: 100%; /* 确保它不会收缩 */
    box-sizing: border-box;
    padding: 30px; 
    gap: 40px; 
    animation: fadeIn 0.4s ease forwards; 
    align-items: center; /* 👈 核心魔法 2：把原本的 stretch 改为 center，让左图和右字对齐 */
}

.dash-content-state.active { 
    display: flex; 
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* -------------------------------------------
   左侧：超大 3D 模型区 (已放大)
------------------------------------------- */
/* 找到电脑端基础样式的这一行，加上 min-height */
.cad-viewer-box { 
    flex: 1.6; 
    background: #F3F4F6; 
    border-radius: 12px; 
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 40px; 
    overflow: hidden; 
    min-height: 380px; /* 👈 核心修复：强制给一个 380px 的最低高度，没图片也绝不塌陷！ */
}
.cad-viewer-box.bg-darker { background: #E5E7EB; }
.cad-viewer-box.bg-grid { background-image: radial-gradient(#D1D5DB 1px, transparent 1px); background-size: 20px 20px; }

.view-cube { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; background: #FFF; border: 1px solid #D1D5DB; box-shadow: 0 2px 4px rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #4B5563; }
.cad-model-img { width: 85%; max-width: 400px; height: auto; object-fit: contain; filter: drop-shadow(0 15px 20px rgba(0,0,0,0.15)); transition: transform 0.3s ease; }
.cad-viewer-box:hover .cad-model-img { transform: scale(1.03) rotate(-1deg); }

/* 左侧 UI 悬浮组件 */
.floating-tag { position: absolute; background: rgba(255,255,255,0.9); padding: 8px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; color: #374151; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.floating-tag.bottom-right { bottom: 30px; right: 30px; }

.inspect-point { position: absolute; top: 30%; left: 40%; display: flex; align-items: center; gap: 8px; background: rgba(16, 185, 129, 0.1); padding: 4px 8px; border-radius: 20px; border: 1px solid #10B981; }
.point-dot { width: 8px; height: 8px; background: #10B981; border-radius: 50%; }
.point-dot.pulse { animation: pulseGreen 2s infinite; }
.point-label { font-size: 12px; font-weight: 700; color: #059669; }

.qc-scan-line { position: absolute; top: -10%; left: 0; width: 100%; height: 3px; background: rgba(16,185,129,0.8); box-shadow: 0 0 20px rgba(16,185,129,0.5); animation: scanDown 3s infinite; }
@keyframes scanDown { 0% { top: -10%; } 100% { top: 110%; } }

.chat-bubble { position: absolute; bottom: 30px; left: 30px; right: 30px; background: #FFFFFF; padding: 16px; border-radius: 12px 12px 12px 2px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); display: flex; gap: 12px; align-items: center; animation: floatUp 3s ease-in-out infinite alternate; }
.chat-avatar { width: 32px; height: 32px; background: #10B981; border-radius: 50%; flex-shrink: 0; }
.chat-text { font-size: 13px; color: #4B5563; line-height: 1.4; font-style: italic; }

/* -------------------------------------------
   右侧：定制化控制面板 (三种截然不同的排版)
------------------------------------------- */
.config-panel { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.panel-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #F3F4F6; padding-bottom: 12px; }
.panel-header h4 { font-size: 18px; font-weight: 700; color: #111827; margin: 0; }
.status-badge { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px; }
.status-badge.green { background: #ECFDF5; color: #059669; }
.status-badge.blue { background: #EFF6FF; color: #1D4ED8; }

/* 状态 1：参数行 */
.ui-data-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px dashed #E5E7EB; }
.ui-label { color: #6B7280; font-size: 14px; }
.ui-value { color: #111827; font-weight: 600; font-size: 14px; }

/* 状态 2：质检清单 */
.checklist-ui { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.checklist-ui li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #374151; font-weight: 500; }
.check-icon { display: inline-flex; width: 20px; height: 20px; background: #10B981; color: #FFF; border-radius: 50%; align-items: center; justify-content: center; font-size: 12px; }
.checklist-ui li.pending { color: #9CA3AF; }
.load-icon { display: inline-flex; width: 20px; height: 20px; border: 2px solid #E5E7EB; border-top-color: #9CA3AF; border-radius: 50%; font-size: 0; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 状态 3：名片与时间轴 */
.engineer-profile { display: flex; align-items: center; gap: 16px; background: #F9FAFB; padding: 16px; border-radius: 12px; }
.avatar-lg { width: 48px; height: 48px; background: #D1D5DB; border-radius: 50%; }
.profile-info h4 { font-size: 15px; margin: 0 0 4px 0; color: #111827; }
.profile-info span { font-size: 12px; color: #10B981; }

.logistics-timeline { display: flex; flex-direction: column; gap: 16px; border-left: 2px solid #E5E7EB; margin-left: 12px; padding-left: 20px; margin-top: 10px; }
.log-step { position: relative; font-size: 14px; color: #9CA3AF; }
.log-step::before { content: ''; position: absolute; left: -27px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #FFFFFF; border: 2px solid #D1D5DB; }
.log-step.done { color: #374151; font-weight: 500; }
.log-step.done::before { background: #10B981; border-color: #10B981; }
.log-step.active { color: #10B981; font-weight: 700; }
.log-step.active::before { background: #FFFFFF; border-color: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,0.2); }

/* 按钮通用 */
.mt-4 { margin-top: 24px; }
.btn-apply-wrapper { display: flex; justify-content: flex-start; }
.btn-apply { background: #10B981; color: #FFF; border: none; padding: 14px 24px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4); }
.btn-apply:hover { background: #059669; transform: translateY(-2px); }
.btn-outline { background: #FFFFFF; color: #10B981; border: 1px solid #10B981; box-shadow: none; }
.btn-outline:hover { background: #ECFDF5; }

/* -------------------------------------------
   底部追踪器 (保持原样完美效果)
------------------------------------------- */
.dashboard-tracker { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 20px 0 0 0; }
.track-step { display: flex; align-items: center; gap: 12px; cursor: pointer; transition: all 0.3s ease; }
.step-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; transition: all 0.3s ease; }
.step-label { font-size: 15px; font-weight: 600; transition: color 0.3s ease; }

.track-step.active .step-icon { background: #10B981; color: #FFF; box-shadow: 0 0 0 6px #ECFDF5; }
.track-step.active .step-label { color: #111827; }
.track-step.pending .step-icon { background: #FFFFFF; border: 1px solid #D1D5DB; color: #9CA3AF; }
.track-step.pending .step-label { color: #9CA3AF; }

.step-connector { display: flex; align-items: center; gap: 6px; color: #D1D5DB; transition: color 0.3s ease; }
.dash-line { width: 16px; height: 2px; background-color: currentColor; }
.track-arrow { font-style: normal; font-size: 14px; font-weight: bold; }
.step-connector.active { color: #10B981; }
.step-connector.pending { color: #D1D5DB; }

/* ==========================================================================
   终极物理防线：解决平板被“滚动条吃像素”误判为手机的问题
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 平板端 (701px - 1024px)：降低下限门槛，加上强制显形护盾，并修复比例
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) and (min-width: 701px) {
    /* 🛡️ 护盾：强行把被手机端误伤隐藏的大窗口拉回来 */
    .purnis-workflow-ui-section .dashboard-window { display: block !important; }
    .purnis-workflow-ui-section .step-connector { display: flex !important; }

    .purnis-workflow-ui-section { padding: 60px 20px; }

    /* 🌟 核心修复 1：取消电脑端强制的最低高度，彻底消除底部大白边 */
    .purnis-workflow-ui-section .dash-body-container { 
        min-height: auto !important; 
    }

   /* 🌟 核心修复 2：重新分配左右比例，防止右侧文字被挤换行 */
    .purnis-workflow-ui-section .cad-viewer-box { 
        flex: 1 !important; 
        padding: 20px !important; 
        aspect-ratio: 4 / 3 !important; /* 👈 核心魔法：强制保持宽 4 高 3 的横向比例 */
        min-height: auto !important; /* 清除之前固定的高度 */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .purnis-workflow-ui-section .config-panel { 
        flex: 1.2 !important; 
        gap: 12px; 
        justify-content: flex-start !important; /* 👈 追加这一行：让内部文字也强制从顶部开始排布 */
    }

    /* 🌟 核心修复 3：让左右内容在平板上顶部完美平齐 */
    .purnis-workflow-ui-section .dash-content-state.active { 
        flex-direction: row !important; 
        align-items: flex-start !important; /* 👈 核心修改：从 center 改为 flex-start (顶部对齐) */
        gap: 24px !important; 
        padding: 30px 24px !important; 
    }

    /* 以下是微缩组件的样式，保持原样 */
    .purnis-workflow-ui-section .view-cube { width: 30px; height: 30px; top: 12px; right: 12px; font-size: 9px; }
    .purnis-workflow-ui-section .floating-tag { padding: 6px 10px; font-size: 11px; }
    .purnis-workflow-ui-section .floating-tag.bottom-right { bottom: 16px; right: 16px; }
    .purnis-workflow-ui-section .panel-header h4 { font-size: 16px; }
    .purnis-workflow-ui-section .status-badge { font-size: 11px; padding: 3px 8px; }
    .purnis-workflow-ui-section .ui-data-row { padding: 8px 0; }
    .purnis-workflow-ui-section .ui-label, .purnis-workflow-ui-section .ui-value { font-size: 13px; }
    .purnis-workflow-ui-section .btn-apply { padding: 12px 16px; font-size: 13px; margin-top: 12px; }
    
    /* 底部追踪器居中优化 */
    .purnis-workflow-ui-section .dashboard-tracker { 
        display: flex; 
        flex-direction: row !important; 
        flex-wrap: nowrap !important; 
        gap: 12px; 
        padding: 24px 20px 30px 20px !important; 
        justify-content: center; /* 让底部三个步骤在平板上居中显示 */
    }
    
    .purnis-workflow-ui-section .track-step { gap: 8px; }
    .purnis-workflow-ui-section .step-icon { width: 26px; height: 26px; font-size: 12px; }
    .purnis-workflow-ui-section .step-label { font-size: 13px; white-space: nowrap; }
    .purnis-workflow-ui-section .step-connector { gap: 4px; }
    .purnis-workflow-ui-section .dash-line { width: 8px; }
    .purnis-workflow-ui-section .track-arrow { font-size: 12px; }
    .purnis-workflow-ui-section .engineer-profile { padding: 12px; gap: 12px; }
    .purnis-workflow-ui-section .avatar-lg { width: 36px; height: 36px; }
    .purnis-workflow-ui-section .profile-info h4 { font-size: 14px; line-height: 1.3; margin-bottom: 2px; }
    .purnis-workflow-ui-section .profile-info span { font-size: 11px; }
    .purnis-workflow-ui-section .logistics-timeline { gap: 12px; margin-left: 10px; padding-left: 16px; margin-top: 4px; }
    .purnis-workflow-ui-section .log-step { font-size: 13px; }
    .purnis-workflow-ui-section .log-step::before { left: -22px; width: 10px; height: 10px; top: 3px; }
}

/* --------------------------------------------------------------------------
   2. 手机端 (<= 700px)：纯正的手机设备才会触发这套卡片
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
    .purnis-workflow-ui-section {
        padding: 40px 16px !important;
        background-color: #FFFFFF !important;
    }

    /* 暴力隐藏大仪表盘和连线 */
    .purnis-workflow-ui-section .dashboard-window,
    .purnis-workflow-ui-section .step-connector {
        display: none !important;
    }

    .purnis-workflow-ui-section .dashboard-tracker {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important; 
        padding: 0 !important;
        margin-top: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 1. 卡片整体瘦身：压缩一点内边距和间距 */
    .purnis-workflow-ui-section .track-step {
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;  /* 👈 缩小图标和文字的间距 */
        background: #FAFAFA !important;
        padding: 12px 16px !important; /* 👈 缩小上下内边距，让卡片更修长精致 */
        border-radius: 12px !important;
        border: 1px solid #E5E7EB !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.02) !important;
        cursor: pointer !important;
    }

    .purnis-workflow-ui-section .track-step:active {
        background: #F3F4F6 !important;
    }

    /* 2. 图标等比缩小 */
    .purnis-workflow-ui-section .step-icon {
        width: 32px !important;  /* 👈 从 36px 缩小到 32px */
        height: 32px !important;
        font-size: 13px !important;
        background: #ECFDF5 !important;
        color: #10B981 !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important; 
    }
    /* 3. 文字缩小，并强制单行显示！ */
    .purnis-workflow-ui-section .step-label {
        font-size: 13px !important; /* 👈 字体缩小到 13px，非常适合手机阅读的精致大小 */
        font-weight: 700 !important;
        color: #111827 !important;
        flex: 1 !important;
        min-width: 0 !important; 
        white-space: nowrap !important; /* 👈 核心魔法：强制单行显示，绝不允许换行！ */
        overflow: hidden !important; 
        text-overflow: ellipsis !important; /* 如果遇到极端窄的屏幕，超出部分会自动变成省略号，绝不撑破排版 */
    }

    .purnis-workflow-ui-section .track-step::after {
        content: '➔' !important;
        margin-left: auto !important;
        font-size: 16px !important;
        color: #10B981 !important;
        opacity: 0.4 !important;
        flex-shrink: 0 !important; 
    }
}
/* ==========================================================================
   积木 4: Fullscreen BG Globe & Toggle Card Panels
   ========================================================================== */

/* --- 全屏底层画布外层 --- */
.purnis-company-interactive {
    position: relative;
    /* 【修改点 1】顶部 padding 改为 60px，让整体向上靠 */
    padding: 60px 24px 140px 24px; 
    background-color: #FAFAFA; 
    overflow: hidden;
    min-height: 800px;
    /* 【修改点 2】删除了 display: flex 和 align-items: center，取消强制垂直居中，让内容自然往上顶 */
}

/* --- 全屏底层画布 --- */
#purnisBgGlobe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none; /* 穿透点击，不影响上层交互 */
}

/* 渐变遮罩：让地球在右下方清晰，左上方变淡，不干扰文字 */
.globe-mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(250, 250, 250, 0.95) 0%, rgba(250, 250, 250, 0.4) 100%);
    z-index: 2;
    pointer-events: none;
}

/* 保证内容在最上层 */
.relative-z {
    position: relative;
    z-index: 10;
    width: 100%;
}

/* --- 头部排版与 Toggle 开关 --- */
.company-switch-header {
    text-align: center;
    margin-bottom: 50px; /* 稍微缩紧一点与下方卡片的距离 */
    /* 【修改点 3】删除了 padding-top: 40px，进一步缩短顶部距离 */
}

.tech-overline {
    font-family: monospace;
    font-size: 13px;
    font-weight: 700;
    color: #10B981;
    letter-spacing: 2px;
    margin-bottom: 16px;
    display: block;
}

.tech-heading {
    font-size: clamp(32px, 4vw, 42px);
    font-weight: 800;
    color: #111827;
    margin-bottom: 30px;
}

/* 类似 iOS 的平滑切换开关 */
.custom-tab-switch {
    position: relative;
    display: inline-flex;
    background: #E5E7EB;
    padding: 6px;
    border-radius: 50px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.tab-btn {
    position: relative;
    z-index: 2;
    background: transparent;
    border: none;
    padding: 12px 32px;
    font-size: 15px;
    font-weight: 600;
    color: #6B7280;
    border-radius: 40px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.tab-btn.active {
    color: #10B981;
}

.tab-indicator {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 6px;
    background: #FFFFFF;
    border-radius: 40px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 卡片内容面板区 (图文并茂) --- */
.tab-content-wrapper {
    position: relative;
    /* 【修改点 4】从 1100px 放大到 1300px，让整个框体在屏幕上更宽广 */
    max-width: 1300px; 
    margin: 0 auto;
    min-height: 450px; 
}

/* 核心“切卡片”动效：默认隐藏，激活时平滑滑入 */
.tab-panel {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.98);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-panel.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    position: relative; /* 激活状态占据实际高度 */
}

/* 面板内左右分割 (统一框框尺寸) */
.panel-split {
    display: flex;
    align-items: center; /* 这行确保不论内容多少，文字和图片永远垂直居中 */
    gap: 80px;
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    padding: 60px 80px; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.04);
    
    /* 🔥 【新增关键代码】：强制设定统一最小高度，让两个框一模一样大 */
    min-height: 540px; 
    box-sizing: border-box;
}

/* 如果你的反向面板之前有写单独的高度，请确保它也是统一样式 */
.panel-split.reverse { 
    flex-direction: row-reverse; 
}

.panel-text-side { flex: 1; }
.panel-image-side { flex: 1; position: relative; }

/* 【修改点 7】配合变大的框体，将文字字号整体放大，撑起气场 */
.panel-text-side h3 { 
    font-size: 38px; /* 从 32px 放大 */
    font-weight: 800; 
    color: #111827; 
    margin: 0 0 20px 0; 
    line-height: 1.2; 
}
.panel-text-side p { 
    font-size: 17px; /* 从 16px 放大 */
    color: #4B5563; 
    line-height: 1.7; 
    margin: 0 0 30px 0; 
}

/* 优势列表排版 */
.advantage-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.advantage-list li { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    font-size: 16px; /* 从 15px 放大 */
    font-weight: 600; 
    color: #374151; 
}
.advantage-list i { color: #10B981; font-style: normal; font-weight: 800; }

/* 联系方式数据排版 */
.contact-quick-actions { display: flex; gap: 40px; margin-bottom: 30px; border-top: 1px dashed #D1D5DB; padding-top: 24px; }
.contact-item { display: flex; flex-direction: column; gap: 4px; }
.contact-item .label { font-size: 13px; color: #6B7280; text-transform: uppercase; letter-spacing: 1px; }
.contact-item .value { font-size: 18px; font-weight: 700; color: #111827; }
.contact-item .value.green { color: #10B981; }

/* --- 层叠图片卡片样式 (图文并茂的核心) --- */
.img-card {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.img-card img { width: 100%; height: auto; display: block; object-fit: cover; }

.main-img { width: 90%; margin-left: auto; border: 4px solid #FFFFFF; }

.float-card {
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 50%;
    border: 4px solid #FFFFFF;
    animation: floatUpDown 4s ease-in-out infinite;
}

.float-tag {
    position: absolute;
    bottom: 10px; right: 10px;
    background: #10B981; color: #FFF;
    font-size: 12px; font-weight: 700;
    padding: 4px 10px; border-radius: 4px;
}
@keyframes floatUpDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

.mt-4 { margin-top: 24px; display: inline-block; }
.btn-glow-primary { display: inline-block; background-color: #10B981; color: #FFFFFF; text-decoration: none; font-size: 15px; font-weight: 600; padding: 16px 32px; border-radius: 8px; transition: all 0.3s ease; box-shadow: 0 10px 20px rgba(16, 185, 129, 0.2); }
.btn-glow-primary:hover { background-color: #059669; transform: translateY(-2px); box-shadow: 0 15px 30px rgba(16, 185, 129, 0.4); }

/* ==========================================================================
   全局通用组件样式
   ========================================================================== */
/* 默认隐藏滑动圆点，防止在电脑和平板端出现 */
.purnis-swipe-dots {
    display: none;
}

/* ==========================================================================
   积木 4: 平板端自适应适配 (Tablet Responsive)
   ========================================================================== */

/* --- 1. 针对大尺寸平板 (横屏 iPad / 小型笔电，最大宽度 1024px) --- */
@media (max-width: 1024px) and (min-width: 701px) {
    .panel-split {
        /* 缩小内边距和图文间距，防止内容溢出 */
        padding: 50px 40px; 
        gap: 40px; 
        /* 解除桌面端 540px 的强制高度，让其根据平板的折行自然撑开 */
        min-height: auto; 
    }

    .panel-text-side h3 { 
        font-size: 32px; /* 标题微调缩放 */
    }

    .panel-text-side p { 
        font-size: 16px; 
        margin-bottom: 24px;
    }

    .contact-quick-actions {
        gap: 24px; /* 联系方式的列间距缩紧 */
    }
    
    /* 修复浮动卡片在较窄屏幕可能导致的横向溢出 */
    .float-card {
        left: 0;
        bottom: -15px;
    }
}

/* --- 2. 针对标准平板及以下 (竖屏 iPad，最大宽度 820px) --- */
@media (max-width: 820px) {
    .purnis-company-interactive {
        padding: 40px 20px 100px 20px;
        min-height: auto;
    }

    .company-switch-header {
        margin-bottom: 40px;
    }

    /* 核心修改：取消左右平分，改为上下堆叠 */
    .panel-split, 
    .panel-split.reverse {
        flex-direction: column; 
        padding: 40px 30px;
        gap: 50px;
    }

    .panel-text-side, 
    .panel-image-side {
        width: 100%;
        flex: none;
    }

    /* 文字区居中排版，提升竖屏阅读体验 */
    .panel-text-side {
        text-align: center; 
    }

    .advantage-list {
        align-items: center; /* 列表项整体居中 */
    }

    .contact-quick-actions {
        justify-content: center; /* 联系方式居中对齐 */
        flex-wrap: wrap; /* 空间不够时允许换行 */
    }

    /* 图片区居中与比例调整 */
    .main-img {
        width: 85%;
        margin: 0 auto; 
    }

    .float-card {
        width: 45%; 
        left: 5%; /* 往中间靠拢，避免切边 */
        bottom: -20px;
    }
}

/* ==========================================================================
   积木 4: 手机端 (<= 700px) - 完美居中对称 & 紧凑排版
   ========================================================================== */
@media (max-width: 700px) {
    /* 1. 外层容器 */
    .purnis-company-interactive {
        padding: 20px 0 40px 0 !important;
        min-height: auto !important;
        background-color: #FAFAFA !important;
    }
    .company-switch-header {
        padding: 0 16px !important;
        margin-bottom: 16px !important;
    }
    .tech-heading {
        font-size: 24px !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }
    .custom-tab-switch { display: none !important; }

    /* 2. 滑动轨道 */
    .tab-content-wrapper {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 16px !important;
        padding: 10px 0 10px 0 !important;
        scrollbar-width: none;
    }
    .tab-content-wrapper::-webkit-scrollbar { display: none; }

    .tab-panel {
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        flex: 0 0 100% !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
        scroll-snap-align: center !important;
    }

    /* 3. 卡片体 */
    .panel-split, .panel-split.reverse {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        gap: 12px !important;
        min-height: auto !important;
    }

    /* 4. 图片顶置 */
    .panel-image-side {
        order: -1 !important;
        width: 100% !important;
    }
    .main-img {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 12px !important;
        border: none !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important;
        aspect-ratio: 16 / 9 !important;
        object-fit: cover !important;
    }
    .float-card { display: none !important; }
    .panel-text-side p { display: none !important; }

    /* 5. 标题区：进一步缩小字号，更显精致 */
    .panel-text-side {
        order: 2 !important;
        text-align: center !important;
        width: 100% !important;
    }
    .panel-text-side h3 {
        font-size: 18px !important; /* 🔥 字体调小（从 21px 降为 18px） */
        font-weight: 800 !important;
        color: #111827 !important;
        margin-bottom: 12px !important;
        text-align: center !important;
        line-height: 1.3 !important;
        padding: 0 10px !important;
    }

    /* 6. 列表与勾号：实现文字“左右两端对齐” */
    .advantage-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        margin-bottom: 0 !important; 
        padding: 0 15px !important;
    }
    /* 6. 列表与勾号：修复单词间距撕裂，回归自然紧凑排版 */
    .advantage-list li {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 280px !important; 
        font-size: 14px !important;
        color: #374151 !important;
        font-weight: 600 !important;
        text-align: left !important; /* 🔥 核心修复：改回左对齐，彻底干掉可怕的超大空格 */
        line-height: 1.4 !important;
    }
    .advantage-list i {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 20px !important;
        height: 20px !important;
        background-color: #ECFDF5 !important;
        color: #10B981 !important;
        border-radius: 50% !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        margin-right: 12px !important;
        flex-shrink: 0 !important;
        margin-top: 1px !important;
    }

    /* 7. 底部按钮：贴紧列表，同样居中限制宽度 */
    .contact-quick-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        border: none !important;
        padding: 0 15px !important;
        margin-top: 6px !important; /* 强行向上贴紧 */
        margin-bottom: 10px !important;
    }
    .contact-item .value {
        font-size: 15px !important;
        word-break: break-all !important;
        text-align: center !important;
    }
    .btn-glow-primary {
        display: block !important;
        width: 100% !important;
        max-width: 280px !important; /* 必须和列表同宽，形成方块感 */
        margin: 0 auto !important;
        text-align: center !important;
        box-sizing: border-box !important;
        padding: 13px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
    }

    /* 8. 呼吸圆点：强行上移，无视卡片高度差 */
    .purnis-swipe-dots {
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
        position: relative !important;
        z-index: 10 !important; /* 保证圆点不被内容挡住 */
        margin-top: -85px !important; /* 🔥 核心魔法：用负数强行把它拉上来！ */
        margin-bottom: 20px !important;
    }
    .purnis-swipe-dots .dot {
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background-color: #D1D5DB !important;
        transition: all 0.3s ease !important;
    }
    .purnis-swipe-dots .dot.active {
        width: 24px !important;
        border-radius: 4px !important;
        background-color: #10B981 !important;
        animation: purnisBreath 2s infinite ease-in-out !important;
    }
    @keyframes purnisBreath {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }
}

/* ==========================================================================
   平替区块: Agile Manufacturing Solutions (For SMBs)
   ========================================================================== */

.purnis-agile-section {
    padding: 100px 24px 120px 24px;
    background-color: #FFFFFF; 
}

.agile-header-center {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 60px auto;
}

/* 已删除 .tech-overline 样式代码 */

.tech-heading {
    font-size: clamp(32px, 4vw, 42px);
    font-weight: 800;
    color: #111827;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.tech-desc {
    font-size: 16px;
    color: #6B7280;
    line-height: 1.6;
}

/* --- 敏捷方案网格 --- */
.agile-matrix-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1300px;
    margin: 0 auto;
}

/* 解决方案卡片基础状态 */
.solution-card {
    position: relative;
    background: #FAFAFA;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 40px 30px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.card-focus-frame {
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.4s ease;
    z-index: 1;
}

.solution-icon {
    font-size: 32px;
    margin-bottom: 24px;
    transition: transform 0.4s ease;
    position: relative;
    z-index: 2;
    filter: grayscale(100%) opacity(0.7); 
}

.solution-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 16px 0;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
}

.solution-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
    margin: 0 0 24px 0;
    /* 取消了这里的 flex: 1，将其交给下方的 tags 处理 */
    position: relative;
    z-index: 2;
}

/* 🔥 核心修复：痛点标签布局 */
.solution-tags {
    display: flex;
    flex-direction: column; /* 🔧 魔法指令：强制所有标签上下垂直排列 */
    align-items: flex-start; /* 🔧 新增魔法指令：强制居左，且不拉伸宽度 */
    gap: 8px;
    position: relative;
    z-index: 2;
    margin-top: auto; 
}

.solution-tags span {
    font-size: 12px;
    font-weight: 600;
    color: #6B7280;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    padding: 6px 10px;
    border-radius: 6px;
    display: inline-block;
    transition: all 0.3s ease;
}

/* ==========================================
   🔥 悬停动效：极速对焦与激活
   ========================================== */

.solution-card:hover {
    background: #FFFFFF;
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.08);
}

.solution-card:hover .card-focus-frame {
    border-color: #10B981;
}

.solution-card:hover .solution-icon {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.1) rotate(-5deg);
}

.solution-card:hover h3 {
    color: #10B981;
}

.solution-card:hover .solution-tags span {
    background: #ECFDF5;
    color: #059669;
    border-color: #A7F3D0;
}

/* ==========================================================================
   平替区块: 平板端 (<= 1024px) - 4列平滑降级为2列
   ========================================================================== */
@media (max-width: 1024px) {
    /* 1. 外层容器：稍微缩小上下留白 */
    .purnis-agile-section {
        padding: 80px 24px 100px 24px;
    }

    /* 2. 标题区域：减少与下方网格的距离 */
    .agile-header-center {
        margin-bottom: 40px;
    }

    /* 3. 🔥 核心魔法：将 4 列网格改为 2 列 */
    .agile-matrix-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px; /* 稍微拉近卡片之间的间距 */
    }

    /* 4. 卡片内部：适度压缩内边距，保证文字呼吸空间 */
    .solution-card {
        padding: 32px 24px;
    }
    
    .solution-icon {
        margin-bottom: 20px;
    }
}

/* ==========================================================================
   平替区块: 手机端 (<= 700px) - 单列垂直布局 & 触屏优化
   ========================================================================== */
@media (max-width: 700px) {
    /* 1. 外层区块：大幅缩减上下左右的整体留白 */
    .purnis-agile-section {
        padding: 50px 16px 60px 16px;
    }

    /* 2. 头部标题区：缩短下边距，覆盖动态字号保证不超宽 */
    .agile-header-center {
        margin-bottom: 32px;
    }
    
    .tech-heading {
        font-size: 28px !important; 
        line-height: 1.3 !important;
        margin-bottom: 12px;
    }

    .tech-desc {
        font-size: 14px; /* 描述文字微调以适应窄屏 */
    }

    /* 3. 🔥 核心魔法：将网格彻底改为单列（1列） */
    .agile-matrix-grid {
        grid-template-columns: 1fr;
        gap: 16px; /* 卡片之间的垂直间距收紧 */
    }

    /* 4. 卡片内部排版：极致利用空间，适度缩小元素 */
    .solution-card {
        padding: 24px 20px;
    }
    
    .solution-icon {
        font-size: 28px;
        margin-bottom: 16px;
    }

    .solution-card h3 {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .solution-card p {
        margin-bottom: 20px;
    }

    /* 5. 触屏体验优化：取消物理位移，防止手机点击时画面乱跳 */
    .solution-card:hover {
        transform: none !important;
        box-shadow: 0 10px 25px rgba(16, 185, 129, 0.08) !important;
    }
}

/* ==========================================================================
   Purnis CNC 专属页面样式
   ========================================================================== */

/* ==========================================================================
   模块 1：CNC 首屏 - 专属眉题
   ========================================================================== */
.cnc-hero-badge {
    display: inline-block;
    color: #10B981; 
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 16px;
}


/* ==========================================================================
   模块 2：高级交互设备展厅 (Tabs) - 扩容升级版
   ========================================================================== */
.purnis-equipment-hub { 
    padding: 120px 0; /* 上下留白加大，更大气 */
    background-color: #F9FAFB; 
}

.purnis-hub-header { 
    text-align: center; 
    margin-bottom: 50px; 
}

.equipment-badge {
    display: inline-block;
    color: #10B981; 
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

/* 🔥 主标题字号升级，与首页对齐 */
.purnis-hub-header h2 { 
    font-size: clamp(36px, 5vw, 48px); 
    font-weight: 800; 
    margin-bottom: 16px; 
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.purnis-hub-header p { 
    font-size: 18px; /* 副标题跟随放大 */
    color: #6B7280; 
}

/* 🔥 选项卡按钮组：支持多设备自动换行 */
.purnis-tab-nav { 
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; /* 核心：设备多了会自动换行，不会挤爆 */
    gap: 16px; 
    margin-bottom: 50px; 
}

.purnis-tab-btn {
    background: transparent; 
    border: 2px solid #E5E7EB; 
    color: #4B5563;
    padding: 14px 28px; /* 按钮整体大一圈 */
    font-size: 16px; 
    font-weight: 600; 
    border-radius: 8px;
    cursor: pointer; 
    transition: all 0.3s ease;
}

.purnis-tab-btn:hover { 
    border-color: #10B981; 
    color: #111827; 
}

.purnis-tab-btn.active { 
    background: #10B981; 
    border-color: #10B981; 
    color: #FFFFFF; 
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.25); 
}

/* 🔥 选项卡内容白底容器：调整内边距让整体更紧凑精致 */
.purnis-tab-container { 
    background: #FFFFFF; 
    border: 1px solid #E5E7EB; 
    border-radius: 20px; 
    padding: 50px; /* 把原本的 60px 稍微收紧，减少空旷感 */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03); 
}

/* 🔥 核心比例调整：改用 fr 单位，完美解决宽度溢出问题 */
.purnis-tab-content { 
    display: none; 
    /* 关键修复：1.2fr 1fr 视觉上等同于 55% 与 45%，但会自动扣除 gap 空间 */
    grid-template-columns: 1.2fr 1fr; 
    gap: 50px; 
    align-items: center; 
}

.purnis-tab-content.active { 
    display: grid; 
    animation: fadeInTab 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
}
@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 🔥 视觉配图框：彻底抛弃固定高度，改用舒适的横向比例 */
.visual-placeholder { 
    width: 100%; 
    
    /* 核心魔法：删掉 height: 450px; 替换成 aspect-ratio */
    aspect-ratio: 4 / 3; /* 4:3 是最适合展示机械设备的横向比例 */
    max-height: 400px;   /* 增加一个最高限制，防止在大带鱼屏上图片变得无限大 */
    
    background: #F3F4F6; 
    border: 2px dashed #D1D5DB; 
    border-radius: 12px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #9CA3AF; 
    font-size: 15px;
}

/* 右侧参数文本排版 */
.purnis-tab-details h3 { 
    font-size: 32px; /* 设备标题放大 */
    font-weight: 800; 
    margin-bottom: 16px; 
    color: #111827;
}

.purnis-tab-details p { 
    font-size: 16px; 
    color: #4B5563; 
    margin-bottom: 32px; 
    line-height: 1.7; 
}

/* ========================================================================== */

/* 右侧参数文本排版优化（增加防挤压保护） */
.purnis-hardcore-specs { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
}

.purnis-hardcore-specs li { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; /* 长文本折行时，左侧标签保持顶部对齐 */
    gap: 20px; /* 强行在左侧标签和右侧数值中间留出安全距离 */
    padding: 16px 0; 
    border-bottom: 1px solid #F3F4F6; 
    font-size: 15px; 
}

.purnis-hardcore-specs li:last-child { 
    border-bottom: none; 
}

.spec-name { 
    font-weight: 600; 
    color: #4B5563; 
    white-space: nowrap; /* 确保左侧的参数名绝对不折行 */
}

.spec-val { 
    font-weight: 700; 
    color: #10B981; 
    text-align: right; 
    line-height: 1.5; /* 增加行高，如果折行看起来更舒服 */
    word-break: break-word; /* 允许右侧过长的数值自然折行 */
}

/* ==========================================================================
   模块 2.5：CNC 加工材料 (经典 Coverflow 样式)
   ========================================================================== */
.purnis-materials-section {
    padding: 100px 0;
    background-color: #F9FAFB;
    overflow: hidden; 
}

.badge-material {
    display: inline-block;
    color: #10B981;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
}
.section-title {
    font-size: clamp(36px, 5vw, 48px);
    font-weight: 800;
    color: #111827;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}
.section-desc { font-size: 18px; color: #6B7280; margin-bottom: 40px; }

/* 🔥 3D 透视舞台 */
.cf-scene {
    position: relative;
    width: 100%;
    height: 560px;
    perspective: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cf-container {
    position: relative;
    width: 320px;
    height: 480px;
    transform-style: preserve-3d;
}

/* 🔥 明亮模式卡片基础设计 */
.cf-card {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background-color: #FFFFFF; /* 底色改为纯白 */
    background-size: cover;
    background-position: center;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px 30px;
    
    transform: translateX(var(--x)) translateZ(var(--z)) rotateY(var(--ry));
    /* 读取新的透明度变量 */
    filter: blur(var(--blur));
    opacity: var(--opac);
    z-index: var(--zi);
    
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    /* 默认状态下一圈淡淡的品牌绿边框 */
    box-shadow: 0 15px 35px rgba(0,0,0,0.05), inset 0 0 0 1px rgba(16, 185, 129, 0.2);
}

/* 🌟 激活时的超级品牌绿光晕 */
.cf-card.active-card {
    /* 采用 #10B981 的发光投影，加粗边框 */
    box-shadow: 0 30px 60px rgba(16, 185, 129, 0.15), 0 0 0 2px #10B981, inset 0 0 0 1px #FFFFFF;
}

/* -------------------------------------------
   内部文字与牌号展开控制 (反色处理)
   ------------------------------------------- */
.card-content { position: relative; z-index: 2; }

.mat-cat {
    display: inline-block;
    color: #10B981;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.mat-name {
    font-size: 28px;
    font-weight: 800;
    color: #111827; /* 标题改为深色 */
    margin-bottom: 0;
    letter-spacing: -0.5px;
    transition: margin 0.5s ease;
}

.card-details {
    opacity: 0;
    max-height: 0;
    transform: translateY(20px);
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.active-card .mat-name { margin-bottom: 16px; }
.active-card .card-details {
    opacity: 1;
    max-height: 150px;
    transform: translateY(0);
    transition-delay: 0.15s;
}

.grade-label {
    font-size: 11px;
    color: #6B7280; /* 标签改为中灰 */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.grade-val {
    font-size: 15px;
    font-weight: 700;
    color: #111827; /* 牌号改为深色 */
    margin-bottom: 8px;
}
.grade-desc {
    font-size: 13px;
    color: #4B5563; /* 描述改为深灰 */
    line-height: 1.5;
    margin: 0;
}

/* ==========================================================================
   模块 3：工业微距视频 (统一浅色背景版 + 宽度对齐修复)
   ========================================================================== */
.purnis-cnc-broll { 
    /* 🔥 顶部留白加大到 160px，创造苹果式的视觉呼吸空间 */
    padding: 160px 0 120px 0; 
    
    /* 🔥 抛弃渐变，强制与上方模块使用完全一致的底层画布颜色 */
    background-color: #F9FAFB; 
    
    position: relative; /* 为绝对定位的分割线做准备 */
}

/* 🔥 苹果标志性的“视网膜微分割线” */
.purnis-cnc-broll::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%; /* 线条不撑满全屏，两端留白，更显精致 */
    height: 1px;
    background: rgba(0, 0, 0, 0.04); /* 极其微弱的灰线 */
}

/* 标题区距顶部的间距微调 */
.purnis-broll-header {
    text-align: center;
    margin-bottom: 60px; /* 标题与视频的距离也稍微拉开 */
}
.video-badge {
    display: inline-block;
    color: #10B981; 
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
}
/* 🔥 标题颜色反转：在浅色背景上使用深色字体 */
.section-dark-title { 
    font-size: clamp(36px, 5vw, 48px); 
    font-weight: 800; 
    margin-bottom: 16px; 
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: #111827; /* 深灰偏黑色 */
}

.section-dark-subtitle {
    font-size: 18px;
    color: #6B7280; 
}

/* 🔥 巨幕容器：已清除重复代码，强制 100% 宽度，与上方卡片完美对齐 */
.purnis-broll-showcase {
    width: 100%; 
    margin: 0 auto;
}

/* 悬浮影院巨幕 (无边框外壳) */
.broll-main-screen {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.broll-video-item {
    display: none; 
}

.broll-video-item.active {
    display: block; 
    animation: fadeInTab 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
}

/* 🔥 真正的无边框高级屏幕面板：明亮科技绿版本 */
.video-placeholder { 
    width: 100%; 
    aspect-ratio: 16 / 9; 
    background: #FFFFFF; /* 改为明亮的纯白底色 */
    border-radius: 20px; 
    /* 换成和上方卡片完全一致的绿色边框与柔和光晕 */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04), 
                inset 0 0 0 1px rgba(16, 185, 129, 0.3),
                0 0 40px rgba(16, 185, 129, 0.05);
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #10B981; /* 占位文字也改为醒目的品牌绿 */
    font-size: 15px;
    font-weight: 600;
    position: relative; 
    overflow: hidden;
}

/* 微光反射效果：适配明亮模式 */
.video-placeholder::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* 改为极浅的品牌绿渐变反射，增加玻璃质感 */
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

/* 底部视频名称：颜色反转为深色 */
.broll-video-item h4 { 
    font-size: 22px; 
    font-weight: 500; 
    text-align: center; 
    color: #111827; 
    margin: 36px 0 10px 0; 
    letter-spacing: 0.5px;
}

/* 底部呼吸圆点 */
.purnis-broll-dots {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
}

.broll-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #D1D5DB; 
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.broll-dot:hover {
    background-color: #9CA3AF;
}

.broll-dot.active {
    background-color: #10B981; 
    transform: scale(1.4); 
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.3); 
}

/* ==========================================================================
   模块 4：沉浸式真 3D 交互工艺解剖
   ========================================================================== */
.purnis-3d-section {
    padding: 60px 0 120px 0;
    background-color: #FFFFFF;
}

.purnis-3d-header {
    margin-bottom: 50px;
}

.anatomy-badge {
    display: inline-block;
    color: #10B981; 
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

/* 🔥 标题字号升级：采用 clamp 动态缩放，增加字间距微调，与上方模块 100% 对齐 */
.purnis-3d-header h2 { 
    font-size: clamp(36px, 5vw, 48px); 
    font-weight: 800; 
    color: #111827; 
    margin-bottom: 16px; 
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.purnis-3d-header p { 
    font-size: 18px; 
    color: #6B7280; 
}
.text-center { text-align: center; }

/* 3D 渲染器外壳升级：大画幅、通透质感 */
.purnis-3d-wrapper {
    background: radial-gradient(circle at center, #ffffff 0%, #F3F4F6 100%);
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02), 0 20px 40px -10px rgba(0,0,0,0.05);
    height: 600px; /* 拉大高度，给 3D 模型充足的旋转空间 */
    overflow: hidden;
    margin-bottom: 24px;
}

.purnis-model-viewer {
    width: 100%;
    height: 100%;
    --poster-color: transparent;
    outline: none;
}

/* 覆盖 button 标签的默认样式 */
button.purnis-3d-hotspot {
    background: transparent;
    border: none;
    padding: 0;
    outline: none;
    cursor: pointer;
}

.hotspot-pulse { 
    width: 28px; 
    height: 28px; 
    background: #10B981; 
    border-radius: 50%; 
    color: white; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: bold; 
    font-size: 18px; 
    line-height: 1; 
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); 
    animation: pulse-green 2s infinite; 
}

/* 悬停弹出的黑色提示框 */
button.purnis-3d-hotspot .hotspot-tooltip { 
    position: absolute; 
    bottom: 40px; 
    left: 50%; 
    transform: translateX(-50%) translateY(10px); 
    width: 240px; 
    background: #111827; 
    color: #FFF; 
    padding: 16px; 
    border-radius: 8px; 
    font-size: 13px; 
    opacity: 0; 
    visibility: hidden; 
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
    box-shadow: 0 10px 25px rgba(0,0,0,0.2); 
    pointer-events: none; 
    text-align: left;
}

button.purnis-3d-hotspot .hotspot-tooltip::after { 
    content: ''; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    transform: translateX(-50%); 
    border-width: 6px; 
    border-style: solid; 
    border-color: #111827 transparent transparent transparent; 
}
button.purnis-3d-hotspot .hotspot-tooltip strong { 
    display: block; color: #10B981; font-size: 14px; margin-bottom: 6px; 
}
button.purnis-3d-hotspot:hover .hotspot-tooltip { 
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); 
}
button.purnis-3d-hotspot:hover .hotspot-pulse { 
    animation: none; transform: scale(1.1); background: #059669; 
}

.disclaimer { 
    font-size: 13px !important; 
    color: #9CA3AF !important; 
    font-style: italic; 
}

/* ==========================================================================
   模块 5：独立的 NDA 保密承诺 (小巧横向悬浮卡片)
   ========================================================================== */
.purnis-nda-section { 
    padding: 60px 0 100px 0; /* 底部压轴，留足空间 */
    background-color: #FFFFFF; 
    display: flex;
    justify-content: center;
}

/* 核心：精巧的横向卡片布局 */
.nda-trust-card {
    position: relative;
    max-width: 760px; /* 大幅收缩宽度，显得极为精巧 */
    margin: 0 auto;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    padding: 32px 40px;
    display: flex;
    align-items: center;
    gap: 32px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    cursor: default;
}

/* 悬停时的高级交互：卡片微抬，边框发光 */
.nda-trust-card:hover {
    border-color: #10B981;
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.08);
    transform: translateY(-5px);
}

/* ================= 左侧动态盾牌区 ================= */
.nda-shield-wrapper {
    position: relative;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    background: #F0FDF4; /* 极浅的品牌绿背景 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #10B981;
    overflow: hidden;
}

.nda-shield-svg {
    width: 32px;
    height: 32px;
    position: relative;
    z-index: 2;
}

/* 科技扫描线动画：平时隐藏，鼠标移入时启动扫描 */
.nda-scanner {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(16, 185, 129, 0.5) 50%, transparent);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nda-trust-card:hover .nda-scanner {
    opacity: 1; 
    animation: scan-laser 2s infinite linear; /* 激活扫描动画 */
}

@keyframes scan-laser {
    0% { top: -100%; }
    100% { top: 100%; }
}

/* ================= 右侧文本区 ================= */
.nda-content {
    flex-grow: 1;
}

.nda-badge-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

/* 新版精巧胶囊标签 */
.badge-nda-new { 
    display: inline-flex; 
    align-items: center;
    gap: 8px;
    background: #FEF2F2; 
    color: #EF4444; 
    padding: 6px 14px; 
    border-radius: 20px; 
    font-size: 11px; 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}

/* 警示呼吸圆点 */
.pulse-dot {
    width: 6px;
    height: 6px;
    background-color: #EF4444;
    border-radius: 50%;
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.nda-content h3 { 
    font-size: 22px; /* 字号缩小，更内敛 */
    font-weight: 800; 
    line-height: 1.2; 
    margin-bottom: 8px; 
    color: #111827;
}

.nda-content p { 
    font-size: 15px; /* 正文变细，更像专业法律条款 */
    color: #6B7280; 
    line-height: 1.6; 
    margin: 0;
}

/* ==========================================================================
   ==============【 METAL CASTING 页面样式 】==============
   ========================================================================== */

/* ==========================================================================
   模块 1：首屏 Hero Section (背景图融合版)
   ========================================================================== */
.purnis-hero-section {
    position: relative; /* 为绝对定位的遮罩层做准备 */
    padding: 180px 0 120px 0; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

/* 🔥 智能遮罩：让背景图呈现若隐若现的高级感，确保黑色文字清晰可读 */
.purnis-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    /* 采用 90% 透明度的纯白到浅灰渐变，完美适配明亮模式 */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 0%, rgba(249, 250, 251, 0.95) 100%);
    z-index: -1;
}

.casting-hero-badge {
    display: inline-block;
    color: #10B981; 
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.purnis-hero-section .hero-title {
    font-size: clamp(48px, 6vw, 72px); 
    font-weight: 800;
    color: #111827;
    margin-bottom: 24px;
    line-height: 1.1;
    letter-spacing: -1.5px; 
}

.purnis-hero-section .hero-subtitle {
    font-size: clamp(18px, 2vw, 22px);
    color: #4B5563; /* 稍微加深了一点副标题颜色，提升背景图上的对比度 */
    max-width: 760px; 
    margin: 0 auto;
    line-height: 1.6;
}

/* 按钮外层容器间距 */
.hero-action {
    margin-top: 40px;
}

/* ==========================================================================
   全站通用：主 CTA 按钮 (苹果/SaaS 质感)
   ========================================================================== */
.purnis-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #10B981; /* 品牌绿 */
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    padding: 16px 36px;
    border-radius: 50px; /* 胶囊圆角，视觉上更友好高端 */
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.2);
}

/* 悬停微交互：按钮上浮，光晕放大，箭头平移 */
.purnis-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(16, 185, 129, 0.35);
    background-color: #0E9F6E; /* 悬停时稍微加深一点绿色 */
    color: #FFFFFF;
}

.purnis-btn-primary svg {
    width: 18px;
    height: 18px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.purnis-btn-primary:hover svg {
    transform: translateX(6px); /* 箭头优雅地向右滑动 */
}

/* ==========================================================================
   模块 2：铸造工艺决策终端
   ========================================================================== */
.purnis-process-selector {
    padding: 120px 0;
    background-color: #F9FAFB;
}

.casting-compare-badge {
    display: inline-block;
    color: #10B981; 
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

/* ==========================================================================
   Apple 风格药丸式切换器 (Segmented Control - 统一品牌绿交互版)
   ========================================================================== */
.tech-panel-wrapper {
    max-width: 1140px;
    margin: 60px auto 0;
}

.segmented-control {
    position: relative;
    display: inline-flex;
    background-color: #E5E7EB; /* 浅灰底槽 */
    padding: 6px;
    border-radius: 100px;
    margin: 0 auto 40px;
    left: 50%;
    transform: translateX(-50%);
}

/* 🔥 核心修改：滑块变成品牌绿，并加上高级绿色光晕 */
.segment-highlight {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 6px;
    background-color: #10B981; /* 统一的品牌绿 */
    border-radius: 100px;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35); /* 专属绿色交互投影 */
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 1;
}

.segment-btn {
    position: relative;
    z-index: 2;
    background: transparent;
    border: none;
    padding: 12px 32px;
    font-size: 15px;
    font-weight: 600;
    color: #6B7280; /* 未选中时为中灰色 */
    cursor: pointer;
    border-radius: 100px;
    transition: color 0.3s ease;
    white-space: nowrap;
}

/* 鼠标悬停未选中的按钮时，文字变深 */
.segment-btn:hover { 
    color: #111827; 
}

/* 🔥 核心修改：激活状态的文字变成纯白，完美融入绿色滑块 */
.segment-btn.active { 
    color: #FFFFFF; 
}

/* ==========================================================================
   宽幅交互面板 (Tech Canvas)
   ========================================================================== */
.panel-display-area {
    position: relative;
    background: #FFFFFF;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.04), inset 0 0 0 1px rgba(0,0,0,0.03);
    overflow: hidden;
    min-height: 500px; /* 固定最小高度，防止切换时页面跳动 */
}

.tech-panel-content {
    position: absolute;
    inset: 0;
    display: flex;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tech-panel-content.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    position: relative;
}

/* 左侧：微缩放实景图 (增加宽度占比) */
.panel-image {
    width: 55%; /* 从 45% 加大到 55% */
    background-size: cover;
    background-position: center;
    position: relative;
}
.tech-panel-content.active .panel-image {
    animation: slow-zoom 10s ease-out forwards;
}
@keyframes slow-zoom {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}

/* 右侧：参数网格区 (减小宽度，排版更紧凑) */
.panel-data {
    width: 45%; /* 从 55% 缩小到 45% */
    padding: 50px 40px; /* 稍微收紧内边距，确文字信息更聚拢 */
    background: #FFFFFF;
    z-index: 2; 
}

.panel-data h3 {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.data-desc {
    font-size: 16px;
    color: #6B7280;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* CSS Grid 规整参数 */
.data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 40px;
}

.data-item {
    display: flex;
    flex-direction: column;
}

.data-label {
    font-size: 12px;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.data-value {
    font-size: 18px;
    color: #111827;
    font-weight: 700;
}

/* 结合流体应用的专属提示框 */
.application-box {
    background: #F0FDF4; /* 极浅的品牌绿底色 */
    border-radius: 12px;
    padding: 20px;
    display: flex;
    gap: 16px;
    border: 1px solid #D1FAE5;
}

.app-icon { font-size: 24px; }
.app-title { display: block; color: #10B981; font-weight: 700; font-size: 13px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 1px;}
.app-text { color: #374151; font-size: 14px; line-height: 1.5; font-weight: 500;}

/* ==========================================================================
   模块 3：Metal Casting 材料范围 - 专属眉题(所有专题一致)
   ========================================================================== */
.casting-material-badge {
    display: inline-block;
    color: #10B981;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

/* ==========================================================================
   模块 3.5：打样与首件铸造 (Highlight Banner)
   ========================================================================== */
.purnis-sample-section {
    padding: 40px 0 100px 0;
    background-color: #FFFFFF; /* 保持与上下文统一的明亮背景 */
}

/* 巨幅圆角卡片容器 */
.sample-banner-card {
    display: flex;
    background: #F9FAFB;
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid rgba(16, 185, 129, 0.2); /* 清爽的科技绿边框 */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
}

/* 左侧：图片区域 (放大占比到 55%) */
.sample-image-col {
    width: 55%; /* 从 45% 加大到 55% */
    min-height: 480px;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* 图片上的速度标签 */
.image-floating-badge {
    position: absolute;
    top: 30px;
    left: 30px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    padding: 10px 16px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.image-floating-badge svg {
    width: 16px;
    height: 16px;
    color: #F59E0B; /* 闪电图标用一点警告黄点缀，代表极速 */
}

/* 右侧：文本区域 (缩小占比到 45%，并微调内边距) */
.sample-text-col {
    width: 45%; /* 从 55% 缩小到 45% */
    padding: 60px 40px; /* 收紧一点内边距，让文字排版更聚拢 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.casting-sample-badge {
    display: inline-block;
    color: #10B981;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

/* 主标题变小，增加行高让多行显示更优雅 */
.sample-title {
    font-size: clamp(28px, 3.5vw, 36px); /* 之前最大是 42px，现在缩小到 36px */
    font-weight: 800;
    color: #111827;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

/* 引子文字变小 */
.sample-hook {
    font-size: 17px; /* 从 20px 缩小到 17px */
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 12px;
    line-height: 1.4;
}

/* 描述正文变小 */
.sample-desc {
    font-size: 14px; /* 从 16px 缩小到 14px，标准的阅读副本文号 */
    color: #4B5563;
    line-height: 1.6;
    margin-bottom: 30px;
}
.sample-desc strong {
    color: #10B981; /* 强调 3D 打印字眼 */
}

/* 底部功能卖点（带打勾图标的部分）字号同步微缩 */
.sample-benefits-grid {
    display: flex;
    gap: 30px; /* 两列之间的间距稍微缩紧一点 */
    border-top: 1px solid #E5E7EB;
    padding-top: 24px;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.benefit-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: #F0FDF4; /* 浅绿底 */
    color: #10B981;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefit-icon svg { width: 22px; height: 22px; }

.benefit-text { display: flex; flex-direction: column; gap: 4px; }
.benefit-text strong { 
    font-size: 14px; /* 标题变小 */
    color: #111827; 
    font-weight: 700; 
}
.benefit-text span { 
    font-size: 12px; /* 描述变小 */
    color: #6B7280; 
}

/* ==========================================================================
   模块 4：应用场景 (全景风琴交互)
   ========================================================================== */
.purnis-application-section {
    padding: 100px 0 140px 0;
    background-color: #FFFFFF; /* 延续明亮模式 */
}

/* 专属独立眉题 */
.casting-app-badge {
    display: inline-block;
    color: #10B981;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

/* 风琴容器 */
.app-accordion-container {
    display: flex;
    max-width: 1300px;
    height: 600px; /* 巨幕高度 */
    margin: 60px auto 0;
    gap: 16px; /* 卡片之间的间距 */
    padding: 0 20px;
}

/* ================== 单个风琴面板 (恢复清晰外框与绿色线条) ================== */
.app-accordion-item {
    position: relative;
    flex: 1; 
    border-radius: 24px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    cursor: pointer;
    /* 🔥 核心修复：加上清晰的绿色外边框和微弱的独立投影 */
    border: 1px solid rgba(16, 185, 129, 0.25); 
    background-color: #F9FAFB; /* 给底图垫一个极浅的灰底，防止图片加载慢时全白 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); 
    transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* 悬停/激活状态的面板 */
.app-accordion-item.active {
    flex: 4; 
    cursor: default;
    /* 展开时，外框的绿色稍微加深，投影带一点点绿色光晕，强调当前激活状态 */
    border: 1px solid rgba(16, 185, 129, 0.5); 
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.08);
}
/* 1. 明亮透白的渐变遮罩，透出背景图的同时保证文字清晰 */
.app-overlay {
    position: absolute;
    inset: 0;
    /* 采用纯白到透明的渐变 */
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.2) 100%);
    transition: opacity 0.5s ease;
}
.app-accordion-item:not(.active) .app-overlay {
    /* 收缩状态下采用 70% 透明度的白底 */
    background: rgba(255, 255, 255, 0.7); 
}
/* ================== 收缩时的横向 UI 标题 (新版) ================== */
.app-collapsed-title {
    position: absolute;
    bottom: 40px;
    left: 30px;
    right: 10px; /* 限制宽度边界 */
    display: flex;
    align-items: center;
    gap: 16px;
    opacity: 1;
    transition: opacity 0.3s ease;
    white-space: nowrap; /* 强制横向不换行 */
    overflow: hidden; 
    
    /* 🔥 核心黑科技：文字右侧自然渐变消失，防止生硬截断，极具科技感 */
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
}

/* 带有呼吸感和品牌绿的数字光圈 */
.app-collapsed-title .collapsed-num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* 防止圆圈被挤压 */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #10B981;
    font-size: 16px;
    font-weight: 700;
}

/* 2. 收缩状态的文字：颜色反转为深色 */
.app-collapsed-title .collapsed-text {
    color: #111827; /* 改为深灰/黑 */
    font-size: 20px;
    font-weight: 800; /* 加粗一点，在浅色底上更扎实 */
    margin: 0;
    letter-spacing: -0.5px;
}
/* 面板展开时，优雅地隐藏这个 UI 标签 */
.app-accordion-item.active .app-collapsed-title {
    opacity: 0;
    pointer-events: none;
}

/* ================== 展开时的玻璃面板内容 ================== */
.app-expanded-content {
    position: absolute;
    bottom: 40px;
    left: 40px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-30px);
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: 0s;
    max-width: 480px;
}

.app-accordion-item.active .app-expanded-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition-delay: 0.3s; /* 等面板展开一半后再浮现文字，手感极佳 */
}

/* 3. 展开时的毛玻璃面板：改为明亮的高级质感，融入科技绿边框 */
.glass-panel {
    background: rgba(255, 255, 255, 0.85); /* 替换为高级白毛玻璃 */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(16, 185, 129, 0.25); /* 淡淡的科技绿边框 */
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05), inset 0 0 0 1px #ffffff;
}

.app-index {
    display: block;
    color: #10B981;
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 12px;
}

/* 4. 面板内部文字全部反转为深色 */
.glass-panel h4 {
    font-size: 32px;
    font-weight: 800;
    color: #111827; /* 标题变深 */
    margin-bottom: 16px;
    line-height: 1.2;
}

.glass-panel p {
    font-size: 16px;
    color: #4B5563; /* 描述变深灰 */
    margin-bottom: 24px;
    line-height: 1.6;
}

.app-tech-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.app-tech-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #374151; /* 列表文字变深色 */
    font-size: 14px;
    line-height: 1.5;
}

.app-tech-list svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.app-tech-list strong {
    color: #10B981;
    margin-right: 4px;
}

/* ==========================================================================
   全站通用模块：NDA 保密承诺 (小巧横向悬浮卡片)
   ========================================================================== */
.purnis-nda-section { 
    padding: 60px 0 100px 0; /* 底部压轴，留足空间 */
    background-color: #FFFFFF; 
    display: flex;
    justify-content: center;
}

/* 核心：精巧的横向卡片布局 */
.nda-trust-card {
    position: relative;
    max-width: 760px; /* 大幅收缩宽度，显得极为精巧 */
    margin: 0 auto;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    padding: 32px 40px;
    display: flex;
    align-items: center;
    gap: 32px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    cursor: default;
}

/* 悬停时的高级交互：卡片微抬，边框发光 */
.nda-trust-card:hover {
    border-color: #10B981; /* 品牌绿边框 */
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.08);
    transform: translateY(-5px);
}

/* ================= 左侧动态盾牌区 ================= */
.nda-shield-wrapper {
    position: relative;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    background: #F0FDF4; /* 极浅的品牌绿背景 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #10B981;
    overflow: hidden;
}

.nda-shield-svg {
    width: 32px;
    height: 32px;
    position: relative;
    z-index: 2;
}

/* 科技扫描线动画：平时隐藏，鼠标移入时启动扫描 */
.nda-scanner {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(16, 185, 129, 0.5) 50%, transparent);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nda-trust-card:hover .nda-scanner {
    opacity: 1; 
    animation: scan-laser 2s infinite linear; /* 激活扫描动画 */
}

@keyframes scan-laser {
    0% { top: -100%; }
    100% { top: 100%; }
}

/* ================= 右侧文本区 ================= */
.nda-content {
    flex-grow: 1;
}

.nda-badge-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

/* 带有红色警示感的精巧胶囊标签 */
.badge-nda-new { 
    display: inline-flex; 
    align-items: center;
    gap: 8px;
    background: #FEF2F2; 
    color: #EF4444; 
    padding: 6px 14px; 
    border-radius: 20px; 
    font-size: 11px; 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}

/* 警示呼吸圆点 */
.pulse-dot {
    width: 6px;
    height: 6px;
    background-color: #EF4444;
    border-radius: 50%;
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.nda-content h3 { 
    font-size: 22px; 
    font-weight: 800; 
    line-height: 1.2; 
    margin-bottom: 8px; 
    color: #111827;
}

.nda-content p { 
    font-size: 15px; 
    color: #6B7280; 
    line-height: 1.6; 
    margin: 0;
}