/* --- 1. 全局变量定义 --- */
:root {
    --bg-black: #000000;
    --text-white: #ffffff;
    --text-muted: #666666;   
    --accent-red: #f80039;   
    --img-radius: 12px


    /* 导航栏锁定参数 */
    --nav-font-size: 18px;      
    --nav-gap: clamp(16px, 2vw, 24px); /* 动态间距：窄屏时自动收缩导航间隔 */
    --nav-height: 60px;         
    --line-height: 3px;         
    --line-radius: 0.5px;       

    /* 楼层数值 */
    /* 优化：最小宽度改为 90%，防止在 768px 宽度时文字直接顶到边框 */
    --floor-max-width: clamp(600px, 35vw, 800px);

    --tag-size: clamp(14px, 1.2vw, 18px);
    --title-size: clamp(40px, 4vw, 80px); /* 缩小了最小标题，防止在平板上折行太严重 */
    --desc-size: clamp(14px, 1.2vw, 18px);

    --title-weight: 500;
    --desc-weight: 300;
    
    /* 【核心修改】：锁定 768px，这是保住 iPad 竖屏无滚动条的底线 */
    --min-page-width: 768px; 
    
    --img-radius: 12px;

    /* 按钮与交互参数 */
    --btn-size: clamp(40px, 2vw, 60px);
    --arrow-size: calc(var(--btn-size) * 0.25);
    --hover-duration: 0.6s; 

    /* 间距控制中心 */
    --global-margin: 88px;
}

/* --- 2. 基础重置 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a, a:visited, a:hover, a:active {
    color: inherit;
    text-decoration: none;
    /* 优化：增加针对移动设备的点击体验 */
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg-black);
    color: var(--text-white);
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
    
    /* 锁定底盘：当窗口 < 768px 时，才会出现横向滑动条 */
    min-width: var(--min-page-width); 
    overflow-x: auto; 
    
    /* 优化：防止手机端横屏时字体自动缩放破坏排版 */
    -webkit-text-size-adjust: 100%;
}

/* --- 3. 状态栏 (底边对齐版) --- */
.navbar {
    width: 100%;
    min-width: var(--min-page-width); 
    height: var(--nav-height); 
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.65); 
    backdrop-filter: blur(18px) saturate(160%);           
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    display: flex;
    justify-content: center; 
    align-items: center;
}

.navbar::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 96%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
    z-index: 1;
}

.nav-container {
    height: 100%; 
    min-width: var(--min-page-width); 
    display: flex;
    justify-content: center; 
    align-items: center;
}

.nav-links {
    height: 100%; 
    display: flex;
    align-items: center;
    gap: var(--nav-gap); 
}

.nav-item {
    position: relative;
    height: 100%; 
    display: flex;
    align-items: center; 
    color: var(--text-muted) !important; 
    font-size: var(--nav-font-size); 
    font-weight: 400;
    letter-spacing: 0.08em;
    /* 增加平滑悬停过渡 */
    transition: color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    white-space: nowrap; 
}

.nav-item.brand {
    color: var(--text-white) !important;
    font-weight: 600;
    margin-right: 15px; 
    cursor: default;
}

/* 链接悬停效果：非 brand 的项在鼠标经过时变白 */
.nav-item:not(.brand):hover {
    color: var(--text-white) !important;
}

.nav-item.active { 
    color: var(--text-white) !important; 
    font-weight: 600; 
}

.nav-item.active::after {
    content: "";
    display: block;
    position: absolute;
    left: 0; right: 0; 
    bottom: 0; 
    height: var(--line-height);
    background-color: var(--text-white);
    border-radius: var(--line-radius);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    animation: lineFade 0.4s ease-out forwards;
    z-index: 2;
}

@keyframes lineFade { from { opacity: 0; } to { opacity: 1; } }

/* --- 修正：全局 R标 正右上角对齐 --- */
sup {
    /* 1. 视觉缩放到足够小，符合极简审美 */
    font-size: 0.8em; 
    
    /* 2. 核心：强制垂直基线向上角标对齐 */
    vertical-align: super;
    
    /* 3. 核心：抽干其占位行高，防止顶开文字组 */
    line-height: 0;
    
    /* 4. 手感调节：让 R标 负 margin 反向贴死“遇义”的右侧边界 */
    /* 如果觉得太贴，可以改为 0 或 -1px */
    margin-left: 1px; 
    margin-right: 4px; 
    
    /* 5. 手感调节：稍微向上再提 1px，让它处于“正右上角”的感觉 */
    position: relative;
    top: -3px;
}

/* --- 5. 楼层布局逻辑 --- */
.main-wrapper {
    width: 100%;
    min-width: var(--min-page-width);
    /* 核心修改：让状态栏底部的线也推开 120px 距离 */
    padding-top: var(--global-margin); 
}

.floor-section {
    width: 100%;
    padding: 0; 
    display: flex;
    justify-content: center;
    text-align: center;
}

.floor-container {
    width: var(--floor-max-width); 
    padding: 0px 20px 40px; 
}

/* --- 6. 楼层文字细节控制 --- */
.floor-tag {
    display: block;
    color: var(--accent-red);
    font-size: var(--tag-size); 
    font-weight: 450;
    letter-spacing: 0.02em;
    margin-bottom: 25px;
}

.floor-title {
    color: var(--text-white);
    font-size: var(--title-size); 
    font-weight: var(--title-weight);
    line-height: 1.1;
    margin-bottom: 25px;
    letter-spacing: 0.05em;
}

.floor-desc {
    color: #888;
    font-size: var(--desc-size); 
    font-weight: 450;
    line-height: 1.6;
    letter-spacing: 0.02em;
}

/* --- 7. 图片组件 --- */
.full-view-images {
    width: 100%;
    padding: 0 2%; 
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.image-group {
    width: 50%; 
    border-radius: var(--img-radius);
    overflow: hidden;
    position: relative;
}
.card-left { margin-right: 1%; }

.aspect-placeholder {
    display: block;
    width: 100%;
    height: auto;
    visibility: hidden;
}

.fade-slider {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}
.slide-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}
.slide-img.active { opacity: 1; z-index: 2; }

/* 按钮基础容器 */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--btn-size);
    height: var(--btn-size);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    opacity: 0; 
    transition: all 0.4s ease;
    /* 关键：取消 flex 居中，改用内部绝对定位 */
    display: block; 
}

.image-group:hover .slider-btn { opacity: 1; }
.prev { left: 4%; } 
.next { right: 4%; }

/* 箭头核心修正：绝对中心对齐 */
.arrow {
    display: block;
    width: var(--arrow-size);
    height: var(--arrow-size);
    border-top: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    
    /* 核心：无论外框怎么变，箭头永远锁死在圆心 */
    position: absolute;
    top: 50%;
    left: 50%;
}

/* 左箭头：旋转后，通过 translate 微调视觉中心 */
.left { 
    transform: translate(-30%, -50%) rotate(-135deg); 
}

/* 右箭头：旋转后，通过 translate 微调视觉中心 */
.right { 
    transform: translate(-70%, -50%) rotate(45deg); 
}

/* --- 8. 作品集网格系统 --- */

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    grid-auto-rows: minmax(280px, auto);    
    grid-auto-flow: dense;                 
    gap: 15px;                             
    padding: 0 2%; 
    width: 100%;
    min-width: var(--min-page-width);
}

.u-1x1 { grid-column: span 1; grid-row: span 1; }
.u-1x2 { grid-column: span 1; grid-row: span 2; }
.u-2x1 { grid-column: span 2; grid-row: span 1; }
.u-2x2 { grid-column: span 2; grid-row: span 2; }
.u-3x2 { grid-column: span 3; grid-row: span 2; }

.work-item {
    position: relative;
    background-color: #0a0a0a;
    border-radius: var(--img-radius);
    overflow: hidden;
    cursor: pointer;
}

.img-box {
    position: relative;
    width: 100%;
    height: 100%;
}

.img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity var(--hover-duration) cubic-bezier(0.165, 0.84, 0.44, 1);
}

.dark-img { position: relative; z-index: 2; opacity: 1; }
.light-img { position: absolute; top: 0; left: 0; z-index: 1; opacity: 0; }

.work-item:hover .dark-img { opacity: 0; }
.work-item:hover .light-img { opacity: 1; }

.work-item .img-box img {
    transform: scale(1);
    transition: opacity var(--hover-duration) ease, 
                transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.work-item:hover .img-box img { transform: scale(1.01); }

/* --- 9. 独立插件：绝对间距控制中心 --- */
.divider-glow {
    width: 100%;
    display: flex;
    justify-content: center;
    /* 锁定 120px 垂直居中间距 */
    margin: var(--global-margin) 0; 
}

.divider-glow::after {
    content: "";
    width: 96%;
    height: 1.2px;
    background: linear-gradient(to right, 
        transparent 0%, 
        rgba(255, 255, 255, 0.2) 50%, 
        transparent 100%);
}

/* --- 10. 客户 Logo 墙系统 --- */
.client-logo-grid {
    /* 【间距参数：控制 Logo 之间的距离】
       最小值：24px (保证基本的呼吸感)
       理想值：2.5vw (随窗口流动)
       最大值：40px (配合 12% 边距，Logo 聚拢后不宜太散)
    */
    --logo-gap: clamp(24px, 2.5vw, 80px); 
    
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6列 */
    grid-auto-rows: auto;
    gap: var(--logo-gap); 
    
    /* 核心修改：你设定的 12% 边距，实现视觉向中心聚拢 */
    padding: 0 12%; 
    width: 100%;
    min-width: var(--min-page-width);
}

.logo-item {
    width: 100%;
    /* 垂直居中对齐，保证不同长宽比的 Logo 视觉重心统一 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.logo-item img {
    /* 自动适应宽度，保持原始比例 */
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    /* 保持陈工要求的 100% 原始呈现，不加滤镜 */
    opacity: 1;
}

/* --- 11. 灵活间距插件：50px 占位块 --- */
.spacer-50 {
    width: 100%;
    height: 50px;
    display: block;
    clear: both;
    /* 默认不带 margin，让它就是一个纯粹的 50px 物理占位 */
}

/* --- 12. 站点页脚系统 (Footer) --- */
.site-footer {
    width: 100%;
    min-width: var(--min-page-width);
    background-color: var(--bg-black);
    padding: 2% 2% 2%; /* 顶部留白由你灵活控制 */
    color: #888; /* 默认暗灰色 */
    font-size: 14px; /* 页脚文字通常更精细 */
    font-weight: 350;
    line-height: 1.5;
}

.footer-container {
    max-width: 100%;
    display: flex;
    justify-content: space-between; /* 均分五栏 */
    align-items: flex-end; /* 核心：全员底部对齐 */
}

.footer-col {
    flex: 1;
}

/* 左侧两栏：靠左 */
.col-left { text-align: left; }

/* 中间栏：居中且强化视觉 */
.col-center {
    text-align: center;
    flex: 1.5; /* 给中间稍微宽一点的空间 */
    color: var(--text-white);
}

.footer-url {
    font-size: 16px;
    letter-spacing: 0.05em;
    margin-bottom: 15px;
    opacity: 0.6;
}

.footer-brand-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
}

.footer-mini-logo {
    height: 24px;
    width: auto;
}

.sep { opacity: 0.3; font-weight: 300; }

/* 右侧两栏：靠右 */
.col-right { text-align: right; }

.qr-code {
    display: inline-block;
    padding: 12px;
    border: 1.1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
}

.qr-code img {
    width: 58px; /* 二维码尺寸控制 */
    height: 58px;
    display: block;
}

/* 链接交互 */
.footer-col p { margin-bottom: 2px; }


/* 容器：强制一行五列，左右边距 2% */
.five-column-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5列平分 */
    gap: 30px 15px;      /* 行间距 30px，列间距 15px */
    padding: 0 2%;       /* 左右 2% 边距 */
    width: 100%;
    margin-bottom: 50px;
    box-sizing: border-box;
}

/* 单个项目包裹层 */
.grid-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中心对齐 */
}

/* 图片容器：取消比例锁定，完全跟随图片高度 */
.image-box {
    position: relative;
    width: 100% !important;
    /* 核心修改：移除 aspect-ratio，让容器由内部图片高度撑开 */
    border-radius: 10px !important; 
    overflow: hidden !important;
    background-color: #0a0a0a !important;
}

/* 展示图：自然呈现 */
.display-img {
    width: 100% !important;
    height: auto !important; /* 关键：高度设为 auto，保持图片原始比例不被拉伸 */
    display: block !important;
    object-fit: contain !important; /* 确保图片完整展示 */
}

/* 文字区域 */
.item-info {
    width: 100%;
    text-align: center;
    padding-top: 12px;
}

/* 第一行：职位（灰字） */
.info-title {
    color: #999; 
    font-size: 12px;
    font-weight: 400;
    margin: 0 0 4px 0;
    letter-spacing: 0.05em;
}

/* 第二行：姓名（浅灰字） */
.info-name {
    color: #999; 
    font-size: 13px;
    font-weight: 300;
    margin: 0;
    letter-spacing: 0.02em;
    opacity: 0.8; /* 稍微做一点视觉上的深浅区分 */
}


















/* --- 独立文字固定显示插件 (水平居中版) --- */

/* 核心：强制纵向排列，并使内部元素水平居中 */
.full-view-images .image-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;    /* 关键：确保图片和文字容器整体居中 */
    overflow: visible !important;
}

/* 图片框：保持 12px 圆角 */
.slider-container {
    position: relative !important;
    width: 100% !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    z-index: 1;
}

/* --- 4. 文字部分样式 (二级标题：基于一级标题等比缩小) --- */

.item-info-box {
    width: 100% !important;
    /* 间距由 25px 缩小为 22px，保持呼吸感但更紧凑 */
    padding-top: 22px !important;      
    text-align: center !important;     
    z-index: 2;
    display: flex !important;
    flex-direction: column !important;
    /* 行间距微调，确保整体高度占比不反超一级标题 */
    gap: 5px !important;               
}

/* 第一行：红色行 (基于 var(--tag-size) 缩小) */
.service-tag {
    color: #F80039 !important;
    /* 使用 calc 动态缩小，确保占比永远小于一级标题 */
    font-size: calc(var(--tag-size) * 0.9) !important; 
    /* 字重由 450 降至 400，增加视觉层级感 */
    font-weight: 400 !important;
    margin: 0 !important;              
    letter-spacing: 0.05em !important;
    line-height: 1.2 !important;
}

/* 第二行：白色行 (基于 var(--title-size) 的逻辑，但作为副标题需大幅缩减) */
/* 或者直接参考一级标题的 floor-desc 进行 10% 缩减 */
.service-desc {
    color: #8a8a8a !important;
    /* 同样保持 10% 的缩减比例 */
    font-size: calc(var(--desc-size) * 0.9) !important; 
    font-weight: 400 !important;
    margin: 0 !important;              
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
    /* 降低透明度，让视觉重心停留在一级标题上 */
    opacity: 0.7 !important; 
}























/* 1. 总背景区域：彻底清除内外边距 */
.news-single-display {
    width: 100% !important;
    background-color: #000 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* 2. 核心容器：锁定宽度，防止被挤压 */
.news-box {
    width: 96% !important;
    max-width: 1920px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important; /* 防止在 flex 布局中收缩 */
    box-sizing: border-box !important;
}

/* 3. 图片组容器 */
.image-group.single-card {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    background-color: #1a1a1a !important;
    border-radius: 12px !important;
    margin-top: 0 !important;
    margin-bottom: 40px !important;
    display: block !important; /* 确保它不是 flex 项目 */
}

/* 关键：占位图，强制横向撑开 100% */
.aspect-placeholder {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 轮播层覆盖 */
.fade-slider {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

/* 实际显示的图片：解决“缩到左边”的核心代码 */
.slide-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important; /* 强制铺满父容器 */
    height: 100% !important;
    object-fit: cover !important; /* 保持比例裁剪 */
    opacity: 0;
    transition: opacity 0.8s ease-in-out !important;
    z-index: 1;
}

/* 激活状态 */
.slide-img.active {
    opacity: 1 !important;
    z-index: 2 !important;
}

/* 4. 文字部分样式 */
.news-info-center {
    text-align: center !important;
    width: 100% !important;
    padding: 0 20px !important; /* 移动端左右留白 */
    box-sizing: border-box !important;
}

.news-tag-red {
    color: #F80039 !important;
    font-size: 14px !important;
    letter-spacing: 2px !important;
    margin-bottom: 0px !important;
    font-weight: 500 !important;
}

.news-title-white {
    color: #fff !important;
    font-size: 32px !important;
    font-weight: bold !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.4 !important;
}

.news-desc-gray {
    color: #8a8a8a !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important; /* 彻底清除底部间距 */
}

/* 按钮样式补全（防止线上丢失样式） */
.slider-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    background: rgba(0,0,0,0.2) !important;
    border: none !important;
    color: #fff !important;
    padding: 20px 10px !important;
    cursor: pointer !important;
    outline: none !important;
}
.prev { left: 32px !important; }
.next { right: 32px !important; }

/* 强制全局同步圆角变量 */
.image-group, 
.work-item, 
.slider-container, 
.image-box, 
.image-group.single-card {
    border-radius: var(--img-radius) !important;
    overflow: hidden !important; /* 必须确保溢出隐藏，圆角才看得见 */
}

/* 针对内部图片的兼容（防止部分浏览器切不掉圆角） */
.slide-img, 
.display-img, 
.img-box img {
    border-radius: var(--img-radius) !important;
}












/* --- 子页面：96% 宽度大图专用组件 --- */

/* 强制撑开外层，确保 2% 边距生效 */
.project-single-view {
    width: 100% !important;
    margin: var(--global-margin) 0 !important; 
    display: flex !important;
    justify-content: center !important;
    padding: 0 !important; /* 清除可能存在的内边距干扰 */
}

/* 核心：锁定 96% 宽度 */
.project-image-wrapper {
    width: 96% !important; 
    border-radius: var(--img-radius) !important;
    overflow: hidden !important;
    line-height: 0 !important;
    background-color: #0a0a0a !important;
    /* 增加投影增强设计感 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
}

/* 核心：锁定图片比例，严禁拉伸 */
.detail-img {
    width: 100% !important;
    height: auto !important; /* 强制自适应高度，解决截图里的变形问题 */
    display: block !important;
    object-fit: contain !important; /* 确保画质不被异常裁切 */
    image-rendering: -webkit-optimize-contrast !important;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .project-single-view {
        margin: 40px 0 !important;
    }
}