/* 站内字体：思源黑体（Noto Sans SC）可变字重的子集，只含本站用到的字（tools/build.py 生成）。SIL OFL 1.1 */
@font-face {
    font-family: 'GH Sans';
    src: url('../fonts/gh-sans.woff2?v=702168fb') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* --- 全局变量 --- */
:root {
    /* 核心品牌色 - 作为统一颜色的基准 */
    --brand-primary: #2c3e50; 
    --brand-accent: #5e60ce;  /* 统一使用的紫色/蓝色基调 */
    --brand-gradient: linear-gradient(135deg, #5e60ce 0%, #6930c3 100%);
    
    --text-dark: #333333;
    --text-light: #666666;
    --bg-light: #f8f9fa;
    --bg-white: #ffffff;
    --card-shadow: 0 10px 30px rgba(0,0,0,0.08);
    --transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    
    /* Cinematic Variables */
    --bg-black: #050505;
    --text-white: #f0f0f0;
    --accent-gold: #d4af37;

    /* Team Card Colors */
    --team-blue: #3A4750; 
    --team-red: #3A3A3A;  
    --team-green: #2B4242; 
    --team-gray: #4A4E69; 
    --team-purple: #2E294E; 
    
    /* Team Card Colors (Hover/Accent) */
    --hover-blue: #4A5C6B;
    --hover-red: #4A4A4A;
    --hover-green: #3D5555;
    --hover-gray: #5D6381;
    --hover-purple: #4B4378; 

    /* --- 新版招聘页面专属变量 (Recruitment New - RN) --- */
    --rn-primary: #0f172a;
    --rn-secondary: #334155;
    --rn-accent: #5e60ce; 
    --rn-bg-light: #f1f5f9;
    --rn-white: #ffffff;
    --rn-border: #e2e8f0;

    /* --- 新版联系页面专属变量 --- */
    --contact-bg-secondary: #f8fafc;
    --contact-text-primary: #1e293b;
    --contact-text-secondary: #64748b;
    --contact-accent-color: #5e60ce; 
    --contact-border-color: #e2e8f0;
    --contact-card-hover-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* --- 字体设置：全局强制使用思源黑体 --- */
body { 
    font-family: 'GH Sans', 'Noto Sans SC', 'Source Han Sans SC', 'Source Han Sans CN', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; 
    line-height: 1.7; 
    color: var(--text-dark); 
    background-color: var(--bg-white); 
    overflow-x: hidden; 
    font-weight: 400;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 强制所有文本元素继承思源黑体 */
h1, h2, h3, h4, h5, h6, p, span, a, div, button, input, li, textarea { 
    font-family: 'GH Sans', 'Noto Sans SC', 'Source Han Sans SC', 'Source Han Sans CN', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif !important; 
}

/* 仅针对特定的英文装饰性缩写（CEO / BD / COO / VP）。原稿用 Poppins（Google Fonts，国内加载不到），部署版改用自托管 GH Sans */
.team-title-abbr {
    font-family: 'GH Sans', sans-serif !important;
}

h1, h2, h3, h4, h5 { font-weight: 700; }
a { text-decoration: none; color: inherit; transition: var(--transition); }
ul { list-style: none; }

/* --- 页面切换逻辑 --- */
.page-view {
    display: none; 
    animation: fadeInPage 0.5s ease;
    flex: 1;
}
.page-view.active { display: block; }
@keyframes fadeInPage {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- 导航栏 --- */
/* 要求1：导航栏始终固定于上方 */
.site-header {
    position: fixed; top: 0; left: 0; width: 100%; padding: 0 4%; height: 80px; z-index: 3000;
    display: flex; justify-content: space-between; align-items: center; transition: 0.3s;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}
/* 当页面滚动或处于非首页时，应用 solid-nav 样式，确保背景不透明 */
.site-header.scrolled, .site-header.solid-nav { background: rgba(255, 255, 255, 0.98); box-shadow: 0 2px 20px rgba(0,0,0,0.05); }
.site-header.scrolled .logo, .site-header.solid-nav .logo { color: var(--brand-primary); }
.site-header.scrolled .nav-link, .site-header.solid-nav .nav-link { color: var(--text-dark); }
.site-header.scrolled .dropdown-menu, .site-header.solid-nav .dropdown-menu { background: #fff; box-shadow: var(--card-shadow); }
.site-header.scrolled .dropdown-item, .site-header.solid-nav .dropdown-item { color: var(--text-dark); border-bottom: 1px solid #f0f0f0; }
.site-header.scrolled .dropdown-item:hover, .site-header.solid-nav .dropdown-item:hover { background: #f8f9fa; color: var(--brand-accent); }

.logo { font-size: 1.8rem; font-weight: 900; color: #fff; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; z-index: 1001; }
.nav-center-container { position: absolute; left: 50%; transform: translateX(-50%); height: 100%; display: flex; align-items: center; }
.nav-menu { display: flex; gap: 2rem; height: 100%; align-items: center; }
.nav-item { position: relative; height: 100%; display: flex; align-items: center; }
.nav-link { font-size: 0.95rem; font-weight: 500; color: rgba(255,255,255,0.9); cursor: pointer; position: relative; padding: 25px 0; display: flex; align-items: center; gap: 8px; }
.nav-link:hover { color: var(--brand-accent); }
.nav-right-container { z-index: 1001; height: 100%; display: flex; align-items: center; }
.dropdown-menu {
    position: absolute; top: 80px; left: 50%; transform: translateX(-50%) translateY(10px);
    background: rgba(0, 0, 0, 0.9); min-width: 160px; padding: 10px 0; border-radius: 8px;
    opacity: 0; visibility: hidden; transition: all 0.3s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.nav-item:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown-item { display: block; padding: 12px 20px; color: #fff; font-size: 0.9rem; white-space: nowrap; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer;}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { color: var(--brand-accent); background: rgba(255,255,255,0.1); }

/* --- Hero Section (Home) --- */
.hero-section { position: relative; width: 100%; height: 100vh; overflow: hidden; background: #000; z-index: 1; }
.hero-slides { width: 100%; height: 100%; position: relative; }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.8s ease-in-out, visibility 0.8s; z-index: 1; }
.slide.active { opacity: 1; visibility: visible; z-index: 2; }
#video-wrapper-inner { position: relative; width: 100%; height: 100%; background: radial-gradient(circle at center, #1a2a3a 0%, #000000 100%); overflow: hidden; }
#canvas-container { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; }
#ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.logo-container-v { opacity: 0; transform: scale(0.8); transition: all 1s cubic-bezier(0.22, 1, 0.36, 1); text-align: center; filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.5)); }
.logo-text-v { font-size: 5vw; font-weight: 900; color: white; letter-spacing: 2px; display: flex; align-items: center; justify-content: center; }
.logo-g-v { color: #00bfff; font-size: 6vw; margin-right: 0; }
.bottom-text-v { position: absolute; bottom: 15%; text-align: center; opacity: 0; transform: translateY(20px); transition: all 1s ease-out; }
.main-slogan-v { font-size: 1.8vw; color: #fff; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px; text-shadow: 0 0 10px rgba(0, 255, 255, 0.8); }
.sub-slogan-v { font-size: 1.2vw; color: #aaa; font-weight: 300; letter-spacing: 0.1em; }
.logo-visible { opacity: 1; transform: scale(1); }
.text-visible { opacity: 1; transform: translateY(0); }
.slide-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5); }
.slide-content { position: absolute; top: 45%; left: 10%; transform: translateY(-50%); z-index: 10; color: #fff; max-width: 800px; }
.slide-subtitle { font-size: 1.2rem; font-weight: 700; letter-spacing: 2px; color: var(--brand-accent); margin-bottom: 1rem; opacity: 0; transform: translateY(20px); transition: 0.6s ease 0.3s; }
.slide-title { font-size: 3.5rem; font-weight: 900; line-height: 1.2; margin-bottom: 2rem; opacity: 0; transform: translateY(30px); transition: 0.6s ease 0.5s; }
.slide-desc { font-size: 1.1rem; color: rgba(255,255,255,0.9); max-width: 600px; opacity: 0; transform: translateY(20px); transition: 0.6s ease 0.7s; }
.slide.active .slide-subtitle, .slide.active .slide-title, .slide.active .slide-desc { opacity: 1; transform: translateY(0); }
.hero-controls { position: absolute; bottom: 50px; left: 10%; z-index: 20; display: flex; gap: 0; }
.control-item { position: relative; width: 180px; height: 4px; background: rgba(255,255,255,0.2); cursor: pointer; margin-right: 10px; transition: 0.3s; }
.control-progress { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: var(--brand-accent); }
.control-label { position: absolute; bottom: 15px; left: 0; color: rgba(255,255,255,0.5); font-size: 0.9rem; font-weight: 500; transition: 0.3s; }
.control-item.active .control-label { color: #fff; }

/* --- 通用 Section --- */
section { padding: 7rem 10%; position: relative; }
.section-header { text-align: center; margin-bottom: 5rem; }
.section-header h2 { font-size: 2.8rem; color: var(--brand-primary); margin-bottom: 1.5rem; font-weight: 900; position: relative; display: inline-block; }
.section-header h2::after { content: ''; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); width: 60px; height: 4px; background: var(--brand-gradient); border-radius: 2px; }
.section-header p { color: var(--text-light); font-size: 1.1rem; max-width: 700px; margin: 0 auto; }

/* Transition Interlude */
.transition-interlude {
    position: relative; z-index: 5; background-color: #f0f2f5; min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 5rem 10%;
}
.interlude-title { font-size: 4rem; font-weight: 900; color: var(--brand-primary); margin-bottom: 1rem; letter-spacing: 2px; opacity: 0; transform: translateY(30px); animation: floatUpFade 1.2s ease-out forwards; }
.interlude-subtitle { font-size: 2rem; font-weight: 300; color: var(--text-light); letter-spacing: 8px; text-transform: uppercase; opacity: 0; transform: translateY(30px); filter: blur(10px); animation: floatUpFade 1.2s ease-out 0.3s forwards; }
@keyframes floatUpFade { to { opacity: 1; transform: translateY(0); filter: blur(0); } }

/* Cinematic About Us */
.cinema-wrapper { position: relative; width: 100%; background-color: var(--bg-black); color: var(--text-white); overflow: hidden; z-index: 10; }
.cinema-stage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-layer { position: absolute; top: -5%; left: -5%; width: 110%; height: 110%; background-size: cover; background-position: center; opacity: 0; will-change: transform, opacity, filter; filter: blur(10px); }
.vignette { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(0,0,0,0) 50%, rgba(0,0,0,0.8) 100%); z-index: 2; pointer-events: none; }
.scroll-content-container { position: relative; z-index: 10; }
.cinema-section { position: relative; min-height: 100vh; width: 100%; display: flex; align-items: center; padding: 10vh 10vw; perspective: 1000px; }
.cinema-section:nth-child(odd) { justify-content: flex-end; text-align: right; }
.cinema-section:nth-child(odd) .content-box { align-items: flex-end; }
.cinema-section:nth-child(even) { justify-content: flex-start; text-align: left; }
.cinema-section:nth-child(even) .content-box { align-items: flex-start; }
.content-box { max-width: 650px; position: relative; display: flex; flex-direction: column; }
.chapter-wrapper { overflow: hidden; margin-bottom: 0.5rem; }
.chapter-no { font-weight: 700; font-size: 1.1rem; letter-spacing: 2px; color: var(--accent-gold); display: block; transform: translateY(100%); text-transform: uppercase; }
h2.split-title { font-size: 4rem; line-height: 1.1; font-weight: 900; margin-bottom: 1.5rem; color: #fff; overflow: hidden; padding-bottom: 10px; }
h2.split-title .char { display: inline-block; transform-origin: 50% 100%; will-change: transform, opacity; }
.separator { width: 0; height: 2px; background: var(--accent-gold); margin-bottom: 2rem; opacity: 0.8; }
.text-wrapper { font-size: 1.25rem; line-height: 1.8; color: rgba(255, 255, 255, 0.9); font-weight: 300; text-indent: 0; word-break: break-word; line-break: strict; text-align: inherit; }
.char-box { display: inline-block; white-space: nowrap; will-change: transform, opacity; opacity: 0; transform: translateY(15px); }
.highlight { color: var(--accent-gold); font-weight: 500; text-shadow: 0 0 10px rgba(212, 175, 55, 0.2); }
.final-spacer { height: 50vh; width: 100%; position: relative; display: flex; justify-content: center; align-items: flex-start; }
.end-credits { font-size: 0.8rem; color: rgba(255,255,255,0.3); margin-top: 2rem; letter-spacing: 3px; }

/* Core Team Page V2 */
#page-core-team { 
    min-height: 100vh; 
    position: relative; 
    z-index: 1; 
    background: linear-gradient(135deg, #000000, #1a1a1a, #333333, #1a1a1a, #000000);
    background-size: 600% 600%; 
    animation: metallicFlow 8s ease infinite; 
    color: #fff;
    padding-bottom: 150px; 
}

@keyframes metallicFlow { 
    0% {background-position: 0% 50%} 
    50% {background-position: 100% 50%} 
    100% {background-position: 0% 50%} 
}

.core-team-hero { 
    padding: 120px 5% 80px; 
    background: transparent; 
    color: #fff; 
    position: relative; 
    z-index: 2; 
    max-width: 1600px;
    margin: 0 auto; 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
}
.core-team-text-group { text-align: left; }
.core-team-hero h1 { font-size: 3rem; margin-bottom: 5px; font-weight: 900; }
.core-team-hero p { font-size: 1rem; opacity: 0.7; font-weight: 300; }
.team-back-btn { display: inline-block; padding: 10px 30px; border: 1px solid rgba(255,255,255,0.4); color: rgba(255,255,255,0.9); border-radius: 30px; font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; background: rgba(255,255,255,0.05); backdrop-filter: blur(5px); margin-bottom: 10px; }
.team-back-btn:hover { background: rgba(255,255,255,0.2); border-color: #fff; color: #fff; transform: translateY(-2px); }

.team-grid-v2 { 
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; 
    padding: 0 5%; max-width: 1600px; margin: 0 auto; 
    position: relative; margin-bottom: 0; align-items: start;
}
.team-watermark { display: none; }
.team-card-new-v2 { 
    background: #1a1a1a; border-radius: 0; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.8), 0 5px 15px rgba(0,0,0,0.5); 
    border: 1px solid rgba(255,255,255,0.05); transition: var(--transition); 
    position: relative; overflow: hidden; z-index: 2; color: #fff; 
    display: flex; flex-direction: column; 
    /* 要求3：核心团队页面中所有人物小卡的图片下方黑色部分删掉 */
    height: auto; /* 改为 auto，防止卡片拉伸导致底部出现空白背景 */
}
.team-card-new-v2:hover { transform: translateY(-8px); box-shadow: 0 25px 50px rgba(0,0,0,0.9), 0 10px 20px rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.15); }

@media (min-width: 1400px) {
    .team-card-new-v2:nth-child(2), .team-card-new-v2:nth-child(4) { margin-top: 120px; }
}

.team-abbr-block { background-color: white; padding: 10px 20px; height: 60px; display: flex; align-items: center; justify-content: flex-end; }
.team-abbr-text { font-size: 3.5rem; font-weight: 900; color: #777; text-align: right; letter-spacing: 2px; opacity: 0.3; font-style: italic; }

.team-info-section { 
    padding: 10px 25px 30px 25px; 
    transition: background-color 0.3s; 
    flex-grow: 0; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; 
}

.team-card-new-v2[data-color="blue"] .team-info-section { background-color: var(--team-blue); }
.team-card-new-v2[data-color="red"] .team-info-section { background-color: #4a2c2c; } 
.team-card-new-v2[data-color="green"] .team-info-section { background-color: var(--team-green); }
.team-card-new-v2[data-color="gray"] .team-info-section { background-color: var(--team-gray); }
.team-card-new-v2[data-color="purple"] .team-info-section { background-color: var(--team-purple); }

.team-card-new-v2:hover[data-color="blue"] .team-info-section { background-color: var(--hover-blue); }
.team-card-new-v2:hover[data-color="red"] .team-info-section { background-color: #5c3a3a; } 
.team-card-new-v2:hover[data-color="green"] .team-info-section { background-color: var(--hover-green); }
.team-card-new-v2:hover[data-color="gray"] .team-info-section { background-color: var(--hover-gray); }
.team-card-new-v2:hover[data-color="purple"] .team-info-section { background-color: var(--hover-purple); }

.team-name-v2 { font-size: 1.8rem; font-weight: 900; color: #fff; margin-bottom: 2px; }
.team-role-v2 { font-size: 1.1rem; font-weight: 700; color: #ffcc00; letter-spacing: 1px; margin-bottom: 8px; }
.team-desc-v2 { font-size: 0.9rem; color: rgba(255,255,255,0.8); line-height: 1.7; font-weight: 300; }
.team-image-section { background-color: white; display: flex; justify-content: center; align-items: flex-end; overflow: hidden; height: 250px; position: relative; }
.team-image-v2 { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: all 0.5s ease-in-out; position: relative; z-index: 1; filter: none; }
.team-image-section::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; transition: opacity 0.5s ease; mix-blend-mode: color; opacity: 0.5; pointer-events: none; }
.team-card-new-v2[data-color="blue"] .team-image-section::after { background-color: var(--team-blue); }
.team-card-new-v2[data-color="red"] .team-image-section::after { background-color: #6d3b3b; }
.team-card-new-v2[data-color="green"] .team-image-section::after { background-color: var(--team-green); }
.team-card-new-v2[data-color="gray"] .team-image-section::after { background-color: var(--team-gray); }
.team-card-new-v2[data-color="purple"] .team-image-section::after { background-color: var(--team-purple); }
.team-card-new-v2:hover .team-image-section::after { opacity: 0; }

#core-team-bg-anim { display: none; } 
.team-grid-new { display: none !important; } 
.team-card-new { display: none !important; }

#global-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
    background-size: 300% 300%;
    background-image: linear-gradient(125deg, #000000, #1c1c1c, #2c2c2c); 
    animation: fluidMove 8s ease infinite;
    transition: background-image 1.2s ease-in-out;
    display: none; 
}
.page-view.active #global-bg { display: block; } 
@keyframes fluidMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* --- 侧边导航 --- */
.side-nav {
    position: fixed; right: 40px; top: 50%; transform: translateY(-50%);
    z-index: 999; display: flex; flex-direction: column; align-items: flex-end;
    opacity: 0; transition: opacity 0.5s; display: none; 
}
.side-nav.visible { opacity: 1; }
.nav-line { position: absolute; right: 7px; top: 10px; bottom: 10px; width: 1px; background: rgba(255,255,255,0.1); z-index: -1; }
.nav-item-side { display: flex; align-items: center; margin: 18px 0; cursor: pointer; transition: all 0.3s ease; position: relative; height: 20px; }
.nav-text { margin-right: 20px; font-size: 0.8rem; font-weight: 400; letter-spacing: 1px; color: #fff; opacity: 0.2; transition: all 0.5s ease; text-align: right; }
.nav-item-side.active .nav-text, .nav-item-side:hover .nav-text { opacity: 1; font-weight: 500; }
.nav-dot { width: 10px; height: 10px; background: #fff; transform: rotate(45deg); transition: all 0.3s ease; position: relative; z-index: 1; box-shadow: 0 0 5px rgba(255,255,255,0.5); opacity: 1; }
.nav-item-side.active .nav-dot { transform: rotate(45deg) scale(1.3); box-shadow: 0 0 15px rgba(255,255,255,0.8); animation: spinDot 4s linear infinite; }
@keyframes spinDot { 0% { transform: rotate(45deg) scale(1.3); } 100% { transform: rotate(405deg) scale(1.3); } }

/* --- 内容区 --- */
.services-section-new {
    min-height: 100vh; width: 100%; display: flex; flex-direction: column;
    justify-content: center; align-items: center; padding: 120px 15% 80px 10%;
    position: relative; background: transparent;
}
.content-wrapper { width: 100%; max-width: 1200px; z-index: 10; opacity: 0; transform: translateY(20px); transition: opacity 1s ease, transform 1s ease; }
.content-wrapper.show { opacity: 1; transform: translateY(0); }
.services-section-new h2 { font-size: 3rem; margin-bottom: 20px; color: #fff; font-weight: 700; letter-spacing: -1px; }
.services-section-new h2::after { content: ''; display: block; width: 40px; height: 3px; background: rgba(255,255,255,0.8); margin-top: 15px; }
.subtitle { font-size: 1.1rem; margin-bottom: 60px; font-weight: 300; max-width: 750px; line-height: 1.8; color: rgba(255,255,255,0.6); }

.card {
    background: rgba(20, 20, 20, 0.4); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    padding: 35px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.05);
    transition: transform 0.4s, background 0.4s, border-color 0.4s; height: 100%; display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-8px); background: rgba(40, 40, 40, 0.5); border-color: rgba(255,255,255,0.15); }
.card h3 { font-size: 1.25rem; margin-bottom: 15px; color: #fff; font-weight: 500; display: flex; align-items: center; gap: 10px; }
.card p, .card li { font-size: 0.95rem; line-height: 1.7; color: #999; font-weight: 300; }
.grid-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.grid-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.icon-svg { width: 28px; height: 28px; color: #D4AF37; flex-shrink: 0; filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.2)); }
.process-flow { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; background: rgba(255,255,255,0.03); padding: 30px; border-radius: 4px; margin-bottom: 50px; border-left: 3px solid rgba(255,255,255,0.2); }
.step { text-align: center; font-weight: 500; color: #ccc; font-size: 0.9rem; }
.arrow { color: #444; font-size: 1rem; }
.card ul { list-style: none; } .card ul li { margin-bottom: 8px; display: flex; } .card ul li::before { content: "•"; color: #555; margin-right: 10px; font-weight: bold; }
.tag-group { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 20px;}
.tag { background: rgba(255,255,255,0.05); padding: 6px 12px; border-radius: 2px; font-size: 0.8rem; color: #aaa; border: 1px solid rgba(255,255,255,0.05); font-weight: 300; }

#section-other .content-wrapper { text-align: left; display: flex; flex-direction: column; align-items: flex-start; }
#section-other .card { margin: 0; width: 100%; max-width: none; }

/* Portfolio & Partners */
.home-portfolio-partners-wrapper { position: relative; z-index: 15; background-color: #f9f9f9; overflow: hidden; padding-top: 80px; }
.portfolio-section { background: transparent; padding-bottom: 50px; overflow: hidden; position: relative; }
.portfolio-section .section-header h2 { color: var(--brand-primary); }
.portfolio-section .section-header p { color: var(--text-light); }
.portfolio-rows-container { display: flex; flex-direction: column; gap: 20px; padding: 20px 0; overflow: hidden; }
.portfolio-row { display: flex; gap: 20px; width: max-content; }
.scroll-left { animation: scroll-left var(--marquee-duration, 30s) linear infinite; }
.scroll-right { animation: scroll-right var(--marquee-duration, 30s) linear infinite; }
.portfolio-row:hover { animation-play-state: paused; }
@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes scroll-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
.portfolio-card-small { height: 150px; width: 266px; border-radius: 8px; overflow: hidden; position: relative; cursor: pointer; flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.portfolio-img-small { width: 100%; height: 100%; object-fit: cover; transition: 0.3s ease; }
.portfolio-card-small:hover .portfolio-img-small { transform: scale(1.05); }
.portfolio-more-container { display: flex; justify-content: center; margin-top: 40px; }
.btn-more-dark { padding: 10px 30px; border: 2px solid var(--brand-primary); color: var(--brand-primary); border-radius: 30px; font-weight: 700; text-transform: uppercase; transition: 0.3s; cursor: pointer; }
.btn-more-dark:hover { background: var(--brand-primary); color: #fff; }

/* Portfolio Page */
#page-portfolio-page { background: #0f0c29; background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29); background: linear-gradient(to right, #24243e, #302b63, #0f0c29); min-height: 100vh; position: relative; }
.portfolio-page-header { padding: 120px 10% 20px; background: transparent; text-align: center; max-width: 1300px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.header-content-anim { opacity: 0; transform: translateY(-20px); transition: all 0.8s ease-out; text-align: center; }
.header-content-anim.active { opacity: 1; transform: translateY(0); }
.portfolio-page-header h2 { font-size: 2.5rem; color: #fff; margin-bottom: 5px; }
.header-sub-text { font-size: 0.9rem; color: rgba(255,255,255,0.7); display: flex; align-items: baseline; justify-content: center; gap: 5px; }
.counter-anim { font-size: 1.5rem; font-weight: 700; color: var(--accent-gold); }
.project-filter-nav { display: flex; justify-content: center; gap: 20px; margin-bottom: 10px; padding: 0 10%; flex-wrap: wrap; margin-top: 40px; }
.p-filter-btn { padding: 8px 24px; border: none; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); border-radius: 20px; cursor: pointer; font-weight: 600; transition: 0.3s; backdrop-filter: blur(5px); }
.p-filter-btn:hover, .p-filter-btn.active { background: var(--accent-gold); color: #000; }
.portfolio-disclaimer { text-align: right; max-width: 1400px; margin: 0 auto 15px; padding-right: 10%; font-size: 0.8rem; color: rgba(255,255,255,0.4); letter-spacing: 1px; }
.project-grid-page { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 0 10%; max-width: 1400px; margin: 0 auto; }
.project-card-page { height: 200px; border-radius: 12px; overflow: hidden; position: relative; box-shadow: var(--card-shadow); cursor: pointer; border: 1px solid rgba(255,255,255,0.1); }
.project-card-page img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.project-card-page:hover img { transform: scale(1.1); }
.project-info-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); color: #fff; opacity: 1; }
.project-tag { font-size: 0.75rem; background: var(--brand-accent); padding: 2px 8px; border-radius: 4px; display: inline-block; margin-bottom: 5px; }
.portfolio-footer-actions { max-width: 1400px; margin: 30px auto 0; padding-right: 10%; text-align: right; padding-bottom: 50px; box-sizing: border-box; }

/* Partners Page */
#page-partners { background: #0f0c29; background: linear-gradient(to right, #24243e, #302b63, #0f0c29); min-height: 100vh; padding-top: 120px; }
.partners-container-new { max-width: 1300px; margin: 0 auto; padding: 0 10% 100px; position: relative; }
.partners-title-anim { font-size: 3rem; color: #fff; margin-bottom: 10px; opacity: 0; transform: translateY(-50px); transition: all 0.8s ease-out; text-align: center; }
.partners-title-anim.active { opacity: 1; transform: translateY(0); }
.partners-line { width: 60px; height: 4px; background: var(--brand-gradient); margin: 0 auto 20px; border-radius: 2px; }
.partners-sub { text-align: center; color: rgba(255,255,255,0.7); font-size: 1.1rem; margin-bottom: 40px; }
.partners-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 25px; }
.partner-box { background: #fff; height: 100px; display: flex; align-items: center; justify-content: center; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.03); transition: 0.3s; border: 1px solid #eee; padding: 15px; }
.partner-box:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); border-color: #fff; }
.partner-logo-img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(100%); opacity: 0.6; transition: 0.3s; }
.partner-box:hover .partner-logo-img { filter: grayscale(100%); opacity: 0.8; }
.partners-footer-actions { margin-top: 30px; text-align: right; }

/* ==========================================================================
   RECRUITMENT PAGE - NEW STYLES (Based on User Request)
   ========================================================================== */

#page-recruitment {
    background-color: var(--rn-bg-light);
    color: var(--rn-primary);
}

/* --- Hero 区域 (Renamed to avoid conflicts) --- */
.job-hero-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 80vh;
    background: var(--rn-white);
    position: relative;
    overflow: hidden;
    padding-top: 100px; 
}

.job-hero-text {
    /* 要求5：文案整体上移 */
    padding: 0 10% 5%; /* Reduced bottom padding */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Changed from flex-start to center vertically */
    padding-top: 0; /* Removed 60px padding */
    margin-top: -50px; /* Pull up further */
    z-index: 2;
}

.job-hero-tag {
    color: var(--rn-accent);
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.job-hero-title {
    font-size: 3.5rem;
    line-height: 1.1;
    font-weight: 900;
    margin-bottom: 25px;
    color: var(--rn-primary);
}

.job-hero-desc {
    font-size: 1.15rem;
    color: var(--rn-secondary);
    margin-bottom: 40px;
    max-width: 500px;
}

.job-hero-image-container {
    position: relative;
    height: 100%;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
}

.job-hero-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.8);
}

.job-hero-pattern {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 100px;
    height: 100px;
    background-image: radial-gradient(var(--rn-accent) 2px, transparent 2px);
    background-size: 20px 20px;
    opacity: 0.3;
}

.rn-nav-btn { 
    background: var(--rn-primary);
    color: var(--rn-white);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 10px 24px;
    border-radius: 6px;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
}
.rn-nav-btn:hover {
    background: var(--rn-accent);
    transform: translateY(-1px);
}

/* --- 文化区域 (福利板块 2x2 布局) --- */
.rn-culture-section {
    padding: 100px 5%;
    background: var(--rn-bg-light);
}

.job-section-header {
    text-align: center;
    margin-bottom: 60px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.job-section-header h2 { font-size: 2.2rem; margin-bottom: 15px; color: var(--rn-primary); font-weight: 700; }
.job-section-header p { font-size: 1.1rem; color: var(--rn-secondary); }

.culture-grid {
    display: grid;
    /* 要求5：改为4列布局 */
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1400px; 
    margin: 0 auto;
}

.culture-card {
    background: var(--rn-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    border: none; /* Reset generic card border */
}
.culture-card:hover { transform: translateY(-10px); background: var(--rn-white); border-color: transparent; }

.card-img {
    height: 200px;
    width: 100%;
    overflow: hidden;
    background: #f8fafc;
}
.card-img img { 
    width: 100%; 
    height: 100%; 
    /* 要求5：修复图片拉伸问题 */
    object-fit: cover; 
    transition: transform 0.5s;
    filter: saturate(0.4) brightness(1.05);
}
.culture-card:hover .card-img img { transform: scale(1.05); filter: saturate(0.6) brightness(1.05); }

.card-content { padding: 30px; flex-grow: 1; }
.card-content h3 { font-size: 1.25rem; margin-bottom: 15px; color: var(--rn-primary); font-weight: 700;}
.card-content ul { list-style: none; padding: 0; }
.card-content li { 
    color: var(--rn-secondary); 
    font-size: 0.95rem; 
    margin-bottom: 8px;
    position: relative;
    padding-left: 18px;
}
.card-content li::before {
    content: "•";
    color: var(--rn-accent);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* --- 招聘流程 --- */
.rn-process-section {
    background: var(--rn-white);
    padding: 80px 5%;
    border-top: 1px solid var(--rn-border);
    border-bottom: 1px solid var(--rn-border);
}
.process-steps {
    display: flex;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}
.process-steps::after {
    content: '';
    position: absolute;
    top: 16px; 
    left: 50px; 
    right: 50px;
    height: 1px; 
    background: var(--rn-border);
    z-index: 0;
}
.rn-step {
    position: relative;
    z-index: 1;
    text-align: center;
    background: var(--rn-white);
    padding: 0 10px;
}
.step-icon {
    width: 32px; 
    height: 32px;
    background: var(--rn-white);
    border: 1px solid #cbd5e1; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-weight: 500;
    color: var(--rn-secondary);
    font-size: 0.85rem;
    transition: all 0.3s;
}
.rn-step:hover .step-icon {
    border-color: var(--rn-accent);
    color: var(--rn-accent);
    background: #fdf4ff;
}
.rn-step p { font-size: 0.9rem; font-weight: 500; color: var(--rn-primary); }


/* =========================================
   职位列表部分
   ========================================= */

/* 筛选栏 */
.filter-wrapper {
    position: sticky;
    top: 80px; /* Adjusted for fixed header height */
    z-index: 900;
    background: rgba(241, 245, 249, 0.95);
    backdrop-filter: blur(5px);
    padding: 20px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.filter-inner {
    max-width: 1360px; 
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 15px;
    justify-content: center;
}
.filter-btn {
    background: var(--rn-white);
    border: 1px solid var(--rn-border);
    color: var(--rn-secondary);
    padding: 10px 30px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 50px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.filter-btn:hover { border-color: var(--rn-accent); color: var(--rn-accent); }
.filter-btn.active {
    background: var(--rn-primary);
    color: var(--rn-white);
    border-color: var(--rn-primary);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2);
}

/* 职位列表容器 */
.jobs-container {
    max-width: 1360px; 
    margin: 40px auto 0; 
    padding: 0 20px 100px; 
    min-height: 500px; 
}
.job-list { list-style: none; }

/* 职位卡片 */
.job-item {
    background: var(--rn-white);
    margin-bottom: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    border: 1px solid transparent;
    transition: all 0.3s;
    overflow: hidden;
}
.job-item:hover { 
    box-shadow: 0 10px 25px rgba(0,0,0,0.06); 
    transform: translateY(-2px);
}

/* 职位标题栏 */
.job-header {
    padding: 30px 40px;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 25px;
    background: var(--rn-white);
    transition: background 0.3s;
    border-bottom: 1px solid transparent;
    border-left: none; /* Reset generic job header */
}
.job-header:hover { background: var(--rn-white); border-left-color: transparent; }

.job-item.active .job-header {
    border-bottom: 1px solid var(--rn-border);
    background: #fff;
}

.job-tag {
    background: rgba(94, 96, 206, 0.1); 
    color: var(--rn-accent);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    border: none;
}

/* 日语标签：蔚蓝色系 */
.job-tag.jp { 
    background: #e0f2fe; 
    color: #0369a1; 
}

.job-title-group h3 { font-size: 1.35rem; font-weight: 700; color: var(--rn-primary); margin-bottom: 6px;}
.job-meta { font-size: 0.9rem; color: #64748b; }

.toggle-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--rn-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
    color: var(--rn-primary);
    font-size: 0.8rem;
}
.job-item.active .toggle-btn { transform: rotate(180deg); background: var(--rn-primary); color: #fff; }

/* --- 详情内容 --- */
.job-content {
    display: none;
    padding: 40px 50px;
    animation: fadeIn 0.4s ease;
    border-top: none;
    background: transparent;
}

.job-item.active .job-content { display: block; }

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

.detail-section { margin-bottom: 30px; }

.detail-title {
    font-size: 1.1rem;
    color: var(--rn-primary);
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--rn-bg-light);
    display: inline-block;
}

.detail-list { list-style: none; }
.detail-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 15px;
    color: #334155;
    font-size: 1rem;
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-word;
}
.detail-list li::before {
    content: "";
    width: 6px; height: 6px;
    background: var(--rn-accent);
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 11px;
}

/* --- 申请区域样式 --- */
.apply-wrapper {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px dashed var(--rn-border);
    text-align: center;
}

.show-apply-btn {
    background: var(--rn-primary);
    color: var(--rn-white);
    border: none;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.show-apply-btn:hover {
    background: var(--rn-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(94, 96, 206, 0.3); /* Adjusted shadow color */
}

.apply-details {
    display: none; 
    margin-top: 20px;
    background: #f8fafc;
    border: 1px solid var(--rn-border);
    border-radius: 12px;
    padding: 25px;
    animation: fadeIn 0.3s ease;
    text-align: left; /* 内部内容保持左对齐 */
}

.apply-details.open {
    display: block;
}

.apply-info p {
    font-size: 0.95rem;
    color: var(--rn-secondary);
    margin-bottom: 10px;
}
.apply-info strong {
    color: var(--rn-primary);
    font-weight: 700;
    margin-right: 8px;
}

.send-resume-btn {
    display: inline-block;
    margin-top: 15px;
    background: var(--rn-accent);
    color: var(--rn-white);
    text-decoration: none;
    padding: 10px 25px;
    border-radius: 6px;
    font-weight: 700;
    transition: background 0.3s;
}
.send-resume-btn:hover {
    background: #4b4db8; /* Slightly darker shade of brand accent */
}

/* ==========================================================================
   NEW CONTACT PAGE STYLES (Integrated)
   ========================================================================== */

/* Renamed .hero-section to avoid conflict with Home page */
.contact-hero-wrapper {
    position: relative;
    min-height: 500px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 60px 20px;
    overflow: hidden;
    background-color: #0f172a;
    padding-top: 120px;
    padding-bottom: 100px;
    /* 要求2：背景图层级低于地图 */
    z-index: 1;
}

.contact-hero-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* 抽象科技线条背景 */
    background-image: url('../img/photos/contact-hero.webp?v=e051edb1');
    background-size: cover;
    background-position: center;
    opacity: 0.5; 
}

.contact-hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(15, 23, 42, 0.8) 100%);
}

.contact-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px; /* 稍微调宽容器以容纳大字体 */
    color: #fff;
}

.contact-hero-title {
    font-size: 4rem;
    font-weight: 900; /* 加粗字重 */
    margin-bottom: 20px;
    letter-spacing: -2px; /* 稍微收紧字间距，更有现代感 */
    line-height: 1.1;
    text-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.contact-hero-intro {
    font-size: 1.1rem;
    color: #e2e8f0;
    margin-bottom: 40px;
    font-weight: 300;
    text-shadow: 0 1px 5px rgba(0,0,0,0.5);
}

/* 联系方式区域 */
.contact-box {
    background: transparent;
    backdrop-filter: none;
    padding: 0;
    border: none;
    /* 要求2：在联系方式和地图之间空两行 */
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 要求2：上移一行 */
    gap: 2px;
}

.contact-box h3 {
    font-size: 1.1rem;
    /* 要求2：上移一行 */
    margin-bottom: 0;
    color: #cbd5e1;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.contact-email {
    /* 要求2：字体缩小一号 */
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    background: transparent;
    padding: 0;
    text-decoration: none;
    transition: color 0.3s ease;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.contact-email:hover {
    color: var(--contact-accent-color);
}

/* --- 地图容器 --- */
.map-container {
    width: 90%;
    max-width: 1400px;
    height: 400px;
    /* 要求2：地图要置于顶层，盖住上方背景图 */
    margin: -120px auto 50px; /* 增加负边距，使其上移覆盖 */
    position: relative;
    z-index: 20; /* 确保层级高于背景图 */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    border: 4px solid #fff;
}
#map { height: 100%; width: 100%; background: #f1f5f9; }

/* --- 全球布局列表 --- */
.locations-grid {
    max-width: 1400px;
    margin: 0 auto 100px;
    padding: 0 2%;
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
}

.loc-card {
    background: #fff;
    border: 1px solid var(--contact-border-color);
    border-radius: 12px;
    padding: 25px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
}

.loc-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--contact-card-hover-shadow);
    border-color: var(--contact-accent-color);
}

.loc-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--contact-accent-color);
    opacity: 0;
    transition: opacity 0.3s;
}
.loc-card:hover::before { opacity: 1; }

.loc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.city-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--contact-text-primary);
    line-height: 1;
}

.badge {
    font-size: 0.7rem;
    padding: 3px 6px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--contact-bg-secondary);
    color: var(--contact-text-secondary);
}
.badge.hq { background: rgba(94, 96, 206, 0.1); color: var(--contact-accent-color); }

.company-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--contact-text-primary);
    margin-bottom: 8px;
    line-height: 1.4;
}

.address {
    font-size: 0.85rem;
    color: var(--contact-text-secondary);
    line-height: 1.5;
}

.card-footer {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--contact-border-color);
    font-size: 0.8rem;
    color: var(--contact-accent-color);
    font-weight: 600;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s;
}

.loc-card:hover .card-footer {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1024px) {
    .locations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .locations-grid {
        grid-template-columns: 1fr;
    }
    .contact-hero-title { 
        font-size: 2.5rem; 
    }
    .contact-email { font-size: 1.3rem; }
}

/* Footer */
footer { background: #000; color: #8d99ae; padding: 4rem 10% 2rem; font-size: 0.9rem; margin-top: auto; }
.footer-content { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid #333; padding-bottom: 3rem; margin-bottom: 2rem; }
.footer-logo { font-size: 1.5rem; color: #fff; font-weight: 700; margin-bottom: 10px; }
.footer-contact-btn { color: #fff; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: 0.3s; font-size: 1.1rem; }
.footer-contact-btn:hover { color: var(--brand-accent); }
.footer-nav-links { display: flex; gap: 20px; margin-top: 15px; }
.footer-link { cursor: pointer; transition: 0.3s; }
.footer-link:hover { color: #fff; }
.footer-addresses { margin-top: 20px; font-size: 0.75rem; color: #555; font-weight: 300; display: flex; flex-direction: column; gap: 5px; }

/* Back to Top Button */
#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 9999;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    border: 1px solid rgba(255,255,255,0.2);
}
#back-to-top:hover {
    background: var(--brand-accent);
    transform: translateY(-5px);
}
#back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 1400px) {
    .team-grid-v2 { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 0; }
    .team-card-new-v2:nth-child(2), .team-card-new-v2:nth-child(4) { margin-top: 0; }
    .project-grid-page { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
    .team-grid-v2 { grid-template-columns: repeat(2, 1fr); }
    .team-watermark { font-size: 3rem; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .team-grid-new { grid-template-columns: 1fr; }
    .core-team-hero, .portfolio-page-header { flex-direction: column; align-items: center; text-align: center; }
    .core-team-text-group { text-align: center; margin-bottom: 20px; }
    .banner-row { flex-direction: column; gap: 20px; }
    .project-grid-page { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .job-hero-section { grid-template-columns: 1fr; min-height: auto; }
    .job-hero-image-container { height: 300px; clip-path: none; order: -1; }
    .job-hero-text { padding: 60px 5%; }
    .job-hero-title { font-size: 2.5rem; }
    
    .culture-grid { grid-template-columns: 1fr; }

    .job-content { padding: 25px; } 
    
    .job-header { padding: 20px; grid-template-columns: 1fr auto; }
    .job-tag { grid-column: 1 / -1; width: fit-content; margin-bottom: 5px; }
    .job-title-group { grid-column: 1; }
    .toggle-btn { grid-column: 2; }

    .process-steps { flex-direction: column; gap: 20px; }
    .process-steps::after { 
        width: 1px; 
        height: 100%; 
        left: 16px; 
        top: 0; 
        right: auto; 
    }
    .rn-step { display: flex; align-items: center; gap: 20px; text-align: left; }
    .step-icon { margin: 0; }
}

@media (max-width: 768px) {
    .site-header { padding: 0 5%; }
    .nav-menu { display: none; }
    .hero-controls { display: none; } 
    .slide-title { font-size: 2.2rem; }
    .benefits-grid { grid-template-columns: 1fr; }
    .services-grid { grid-template-columns: 1fr; }
    #service-detail-overlay { position: fixed; z-index: 2000; }
    .detail-header-anim { transform: translate(0, 0) scale(1); }
    .team-grid-v2 { grid-template-columns: 1fr; padding: 40px 5%; }
    .core-team-hero { padding: 120px 5% 20px; flex-direction: column; align-items: center; text-align: center; }
    .core-team-text-group { text-align: center; margin-bottom: 20px; }
    .team-watermark { display: none; }
    .team-image-section { height: 200px; }
    .project-grid-page { grid-template-columns: 1fr; }
}

/* ==========================================================================
   部署版新增 / 修正（2026-09-22）
   以上为原稿样式（仅改了字体栈、导航选择器与资源地址）；以下为部署所需的补充。
   ========================================================================== */

/* --- 顶部导航只作用于站点导航栏（原稿的 header{} 规则也套到了招聘页、联系页的页内 header 上，
       招聘页因此 z-index 3000 盖住导航栏）。下面两条把当时可见的外观原样补回，只去掉遮挡问题。 --- */
.job-hero-section { padding: 100px 4% 0; align-items: center; }
.contact-hero-wrapper { background-image: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%); }

/* --- 原稿里是 <button>/<div>、部署版改成真链接或按钮的元素：保持原外观 --- */
a.btn-more-dark { display: inline-block; font-size: 13.3333px; line-height: normal; background-color: rgb(240, 240, 240); text-align: center; }
a.rn-nav-btn { display: inline-block; line-height: normal; }
.control-item { font: inherit; border: 0; padding: 0; appearance: none; -webkit-appearance: none; display: block; text-align: left; }
#back-to-top { padding: 0; font: inherit; }
.team-back-btn { line-height: 1.7; }
.nav-item-side { color: inherit; }

/* --- 图标（替代 Font Awesome） --- */
.icon-chevron { width: 0.7rem; height: 0.7rem; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-arrow { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.125em; }
.icon-globe { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
#back-to-top .icon-arrow { width: 18px; height: 18px; }

/* --- 键盘可达：下拉菜单跟随焦点展开，焦点轮廓 --- */
.nav-item:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
.nav-link[aria-current="page"] { color: var(--brand-accent); }

/* --- 手机 / 平板导航（原稿 ≤768px 直接隐藏导航、没有替代入口） --- */
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 0;
    flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.nav-toggle span { display: block; width: 24px; height: 2px; border-radius: 2px; background: #fff; transition: transform 0.3s, opacity 0.3s, background-color 0.3s; }
.site-header.scrolled .nav-toggle span, .site-header.solid-nav .nav-toggle span, .site-header.menu-open .nav-toggle span { background: var(--text-dark); }
.site-header.menu-open { background: rgba(255, 255, 255, 0.98); box-shadow: 0 2px 20px rgba(0,0,0,0.05); }
.site-header.menu-open .logo { color: var(--brand-primary); }
.site-header.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { position: fixed; top: 80px; left: 0; right: 0; bottom: 0; z-index: 2999; overflow-y: auto; overscroll-behavior: contain;
    background: rgba(255, 255, 255, 0.98); padding: 8px 6% 48px; }
.mobile-menu[hidden] { display: none; }
.mobile-menu > ul > li { border-bottom: 1px solid #eef0f3; padding: 4px 0; }
.mobile-menu a { display: block; padding: 12px 4px; color: var(--text-dark); font-size: 1.05rem; font-weight: 500; }
.mobile-menu li ul { display: flex; flex-wrap: wrap; gap: 0 18px; padding: 0 4px 8px; }
.mobile-menu li ul a { padding: 6px 0; font-size: 0.92rem; font-weight: 400; color: var(--text-light); }
.mobile-menu a:hover, .mobile-menu a[aria-current="page"] { color: var(--brand-accent); }
body.menu-lock { overflow: hidden; }
@media (max-width: 1100px) {
    .nav-center-container { display: none; }
    .nav-toggle { display: flex; }
}
@media (min-width: 1101px) { .mobile-menu { display: none !important; } }

/* --- 合作项目：多标签卡片 + 语种筛选 + 空结果 --- */
.project-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.project-langs { font-size: 0.95rem; font-weight: 700; color: #fff; letter-spacing: 0.5px; line-height: 1.4; }
.project-filter-nav--sub { margin-top: 14px; margin-bottom: 18px; gap: 10px; }
.p-filter-btn--sub { padding: 5px 16px; font-weight: 500; background: rgba(255,255,255,0.06); }
.portfolio-empty { text-align: center; color: rgba(255,255,255,0.6); padding: 40px 10% 10px; }
.portfolio-card-small { background: #1a1a1a; }
.project-card-page { background: #1a1a1a; }

/* --- 联系页点阵地图（替代原来的在线瓦片地图） --- */
.map { position: relative; overflow: hidden; }
.map-dots, .map-pins { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.map-dots { object-fit: cover; object-position: 50% 100%; }   /* 与 build.py 里 .map-pins 的 xMidYMax slice 保持一致 */
.map-arc { fill: none; stroke: var(--contact-accent-color); stroke-width: 0.09; stroke-opacity: 0.45; stroke-linecap: round;
    stroke-dasharray: 0.35 0.25; animation: mapArcFlow 2.4s linear infinite; transition: stroke-opacity 0.3s, stroke-width 0.3s; }
.map-arc--planning { stroke: #94a3b8; stroke-opacity: 0.55; stroke-dasharray: 0.18 0.22; animation: none; }
.map-arc.is-active { stroke-opacity: 0.95; stroke-width: 0.13; }
@keyframes mapArcFlow { to { stroke-dashoffset: -1.2; } }
.map-pin { transition: opacity 0.3s; }
.map-pin-core { transform-box: fill-box; transform-origin: center; transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1); }
.map-pin-dot { fill: var(--contact-accent-color); }
.map-pin-ring { fill: rgba(94, 96, 206, 0.14); stroke: var(--contact-accent-color); stroke-width: 0.07; }
.map-pin-pulse { fill: none; stroke: var(--contact-accent-color); stroke-width: 0.06; opacity: 0; transform-box: fill-box; transform-origin: center; }
.map-pin--hq .map-pin-pulse { animation: mapPulse 2.6s ease-out infinite; }
.map-pin--planning .map-pin-dot { fill: #fff; stroke: #64748b; stroke-width: 0.11; }
.map-pin--planning .map-pin-ring { fill: rgba(100, 116, 139, 0.08); stroke: #64748b; stroke-width: 0.08; stroke-dasharray: 0.14 0.1; }
.map-pin--planning .map-pin-pulse { stroke: #94a3b8; }
.map-pin-label { font-family: 'GH Sans', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 1.05px; font-weight: 700;
    fill: #1e293b; paint-order: stroke; stroke: #f1f5f9; stroke-width: 0.3px; stroke-linejoin: round; transition: fill 0.3s; }
.map-pin--planning .map-pin-label { fill: #64748b; font-weight: 500; }
.map-pins.has-active .map-pin:not(.is-active) { opacity: 0.45; }
.map-pin.is-active .map-pin-core { transform: scale(1.45); }
.map-pin.is-active .map-pin-label { fill: var(--contact-accent-color); }
.map-pin.is-active .map-pin-pulse { animation: mapPulse 1.6s ease-out infinite; }
@keyframes mapPulse { 0% { opacity: 0.7; transform: scale(0.6); } 100% { opacity: 0; transform: scale(2.4); } }
.loc-card:focus-visible { border-color: var(--contact-accent-color); }
.loc-card:focus-visible .card-footer, .loc-card.is-active .card-footer { opacity: 1; transform: translateY(0); }
@media (max-width: 640px) {
    .map-container { height: 300px; margin-top: -90px; }
}

/* --- 页脚备案号 --- */
.footer-beian { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-beian a { color: inherit; }
.footer-beian a:hover { color: #fff; }
.footer-beian img { vertical-align: -3px; }
@media (max-width: 640px) {
    .footer-bottom { flex-direction: column; gap: 8px; }
    .footer-nav-links { flex-wrap: wrap; gap: 12px 20px; }
}

/* --- 手机 / 平板适配补丁：原稿手机端没有导航入口，以下问题此前没机会暴露（2026-09-22 三档截图逐页核出） --- */
@media (max-width: 1100px) {
    .side-nav { right: 14px; }
    .side-nav .nav-text { display: none; }                 /* 业务页右侧导航只留圆点，文字不再压住正文 */
}
.grid-box { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }   /* 窄屏不再溢出 */
@media (max-width: 768px) {
    .services-section-new { padding: 110px 48px 60px 6%; }       /* 右侧留出圆点导航的位置 */
    .grid-2x2, .two-col { grid-template-columns: 1fr; }           /* 原稿手机上仍是两列，挤成一字一行 */
    .process-flow { gap: 8px 10px; justify-content: flex-start; }
    .logo-text-v { font-size: 11vw; }                       /* 首屏 Logo 与标语：原稿按 5vw / 1.8vw 缩放，手机上只剩 7px */
    .logo-g-v { font-size: 13vw; }
    .main-slogan-v { font-size: 3.6vw; }
    .sub-slogan-v { font-size: 3vw; }
}
@media (max-width: 640px) {
    .interlude-subtitle { font-size: 1.25rem; letter-spacing: 4px; }
    .job-hero-title { font-size: 2.1rem; }
    .contact-hero-title { font-size: 2rem; letter-spacing: -1px; }
    .filter-inner { gap: 8px; padding: 0 12px; }
    .filter-btn { padding: 8px 14px; font-size: 0.9rem; white-space: nowrap; }
    .partners-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .partners-grid .partner-box { flex: 0 0 calc(50% - 10px) !important; }   /* 首页那组带内联 flex 宽度，需 !important */
    .partner-box { height: 84px; padding: 12px; }
}

/* --- 系统开启了「减少动态效果」的访客：只停掉持续晃动的元素（无限滚动墙、地图流动虚线）；
       平滑滚动在 main.js 里同样对这类访客关闭。原稿的淡入、切换过渡照常保留。
       网址加 ?motion=1 可强制按普通访客效果预览（html.force-motion）。 --- */
@media (prefers-reduced-motion: reduce) {
    html:not(.force-motion) .scroll-left, html:not(.force-motion) .scroll-right { animation-play-state: paused; }
    html:not(.force-motion) .map-arc { animation: none; }
}