/* ============================================================
   加入我们页面专用样式 (前缀 rfj- 确保不冲突)
   ============================================================ */

/* 1. 局部基础变量与重置 */
.rfj-body {
    --rfj-primary: #8B0000;
    --rfj-text-dark: #111111;
    --rfj-text-gray: #666666;
    --rfj-border: #EAEAEA;
    --rfj-bg-light: #F8F8F8;
    --rfj-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    
    font-family: var(--rfj-font-sans);
    line-height: 1.6;
    color: var(--rfj-text-dark);
    background: #fff;
}

.rfj-container { width: 90%; max-width: 1400px; margin: 0 auto; position: relative; }
.rfj-section-padding { padding: 120px 0; }
.rfj-bg-light { background-color: var(--rfj-bg-light); }

/* 动画类 */
.rfj-reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.rfj-reveal.active { opacity: 1; transform: translateY(0); }
.rfj-reveal.delay-1 { transition-delay: 0.15s; }
.rfj-reveal.delay-2 { transition-delay: 0.3s; }

/* ============================================================
   1. 英雄首屏 (Hero Section)
   ============================================================ */
.rfj-hero {
    height: 65vh;
    min-height: 480px;
    background: #2A2A2A; /* 极致深邃的黑色背景 */
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* 点缀的暗红色光效 */
.rfj-hero::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 50%; height: 100%;
    background: radial-gradient(circle at top right, rgba(139, 0, 0, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

/* 巨大背景英文字母 */
.rfj-hero-bg-text {
    position: absolute; 
    top: 50%; right: -2%; 
    transform: translateY(-50%);
    font-size: 18vw; 
    font-weight: 900; 
    color: rgba(255,255,255,0.02);
    white-space: nowrap; 
    pointer-events: none; 
    
}

.rfj-hero-content { max-width: 700px; position: relative; z-index: 2; }

.rfj-title-sub { 
    font-size: 13px; letter-spacing: 4px; text-transform: uppercase; 
    color: var(--rfj-primary); font-weight: 600; margin-bottom: 20px; 
    display: flex; align-items: center; 
}
.rfj-title-sub::before { content: ""; display: inline-block; width: 40px; height: 1px; background: var(--rfj-primary); margin-right: 15px; }

.rfj-hero-content h1 { 
    font-family: var(--rfj-font-serif); font-size: 56px; line-height: 1.2; 
    margin-bottom: 24px; font-weight: 700; color: #fff; 
}
.rfj-hero-content h1 span { color: var(--rfj-primary); }
.rfj-hero-content p { font-size: 16px; color: rgba(255,255,255,0.6); font-weight: 300; max-width: 550px; }

/* ============================================================
   2. 价值主张区域 (Values Section)
   ============================================================ */
.rfj-section-header { margin-bottom: 80px; }
.rfj-section-header h2 { font-family: var(--rfj-font-serif); font-size: 42px; margin-bottom: 15px; color: var(--rfj-text-dark); }
.rfj-section-header p { font-size: 16px; color: var(--rfj-text-gray); }

.rfj-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; }

.rfj-value-card { position: relative; padding-top: 30px; border-top: 1px solid var(--rfj-border); transition: border-color 0.4s; }
.rfj-value-card:hover { border-top-color: var(--rfj-primary); }

.rfj-value-num { 
    display: block; font-family: var(--rfj-font-serif); font-size: 48px; 
    color: var(--rfj-border); font-weight: 700; line-height: 1; 
    margin-bottom: 20px; transition: color 0.4s;
}
.rfj-value-card:hover .rfj-value-num { color: var(--rfj-primary); }

.rfj-value-card h3 { font-size: 20px; margin-bottom: 15px; font-weight: 600; }
.rfj-value-card p { font-size: 14px; color: var(--rfj-text-gray); line-height: 1.8; }

/* ============================================================
   3. 职位列表区域 (Jobs Accordion)
   ============================================================ */
.rfj-jobs-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px; border-bottom: 2px solid #111; padding-bottom: 20px; }
.rfj-jobs-header h2 { font-family: var(--rfj-font-serif); font-size: 42px; margin: 0; line-height: 1; }

.rfj-btn-outline { 
    font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; 
    padding: 12px 24px; border: 1px solid #111; color: #111; text-decoration: none; 
    transition: all 0.3s; 
}
.rfj-btn-outline:hover { background: var(--rfj-primary); color: #fff; border-color: var(--rfj-primary); }

.rfj-accordion { border-bottom: 1px solid var(--rfj-border); }

/* 折叠按钮 */
.rfj-accordion-btn { 
    width: 100%; background: none; border: none; border-top: 1px solid var(--rfj-border); 
    padding: 35px 20px 35px 0; display: flex; justify-content: space-between; align-items: center; 
    cursor: pointer; text-align: left; transition: all 0.3s;
}
.rfj-accordion-btn:hover { background: rgba(0,0,0,0.02); padding-left: 15px; }
.rfj-accordion-btn.active { padding-left: 15px; border-top-color: #111; }

.rfj-job-title { font-size: 24px; font-weight: 600; font-family: var(--rfj-font-serif); display: flex; align-items: center; gap: 20px; }
.rfj-job-title span { font-size: 13px; font-weight: 400; color: var(--rfj-text-gray); letter-spacing: 1px; text-transform: uppercase; font-family: var(--rfj-font-sans); }

.rfj-job-location { font-size: 14px; color: var(--rfj-text-gray); margin-left: auto; margin-right: 40px; }

.rfj-icon-plus { font-size: 28px; font-weight: 300; line-height: 1; color: var(--rfj-primary); font-family: monospace; transition: transform 0.3s; }
.rfj-accordion-btn.active .rfj-icon-plus { color: #111; transform: rotate(180deg); }

/* 展开内容区 */
.rfj-accordion-content { 
    max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); 
    background: #fff;
}

.rfj-job-details { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 40px 20px; }

.rfj-detail-col h4 { font-size: 16px; margin-bottom: 20px; color: #111; font-weight: 600; display: flex; align-items: center; }
.rfj-detail-col h4::before { content: ""; width: 6px; height: 6px; background: var(--rfj-primary); margin-right: 10px; border-radius: 50%; }

.rfj-detail-col ul { list-style: none; padding: 0; }
.rfj-detail-col ul li { font-size: 14px; color: var(--rfj-text-gray); margin-bottom: 12px; position: relative; padding-left: 15px; line-height: 1.6; }
.rfj-detail-col ul li::before { content: "-"; position: absolute; left: 0; color: #ccc; }

.rfj-apply-btn { 
    display: block; width: 100%; text-align: center; padding: 20px; 
    background: var(--rfj-primary); color: #fff; text-decoration: none; 
    font-size: 15px; font-weight: 600; letter-spacing: 2px; transition: 0.3s; 
}
.rfj-apply-btn:hover { background: #111; }

/* ============================================================
   移动端响应式 (Responsive)
   ============================================================ */
@media (max-width: 1024px) {
    .rfj-section-padding { padding: 80px 0; }
    .rfj-values-grid { gap: 40px; }
    .rfj-hero-content h1 { font-size: 46px; }
}

@media (max-width: 768px) {
    .rfj-hero { min-height: 400px; }
    .rfj-hero-content h1 { font-size: 38px; }
    
    .rfj-values-grid { grid-template-columns: 1fr; gap: 30px; }
    .rfj-value-card { padding-top: 20px; }
    
    .rfj-jobs-header { flex-direction: column; align-items: flex-start; gap: 20px; }
    
    .rfj-accordion-btn { flex-wrap: wrap; padding: 25px 0; }
    .rfj-job-title { font-size: 20px; width: 100%; margin-bottom: 10px; flex-direction: column; align-items: flex-start; gap: 5px; }
    .rfj-job-location { margin-left: 0; font-size: 13px; }
    .rfj-icon-plus { position: absolute; right: 0; margin-top: -30px; }
    
    .rfj-job-details { grid-template-columns: 1fr; gap: 30px; padding: 30px 10px; }
}