/*
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; }
}

/* 【手机移动端重构 (< 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;
    }
}