/* ======================================== Section Common Styles ======================================== */
.section-header { margin-bottom: 45px; text-align: center; }
.section-badge { align-items: center; background: rgba(54, 105, 239, 0.1); border-radius: 20px; color: var(--brand-blue); display: inline-flex; font-size: 13px; font-weight: 500; gap: 8px; margin-bottom: 10px; padding: 8px 16px; }
.section-title { color: var(--brand-black); font-size: clamp(28px, 4vw, 36px); font-weight: 700; margin-bottom: 8px; }
.section-subtitle { color: var(--brand-blue); font-size: 16px; font-weight: 500; }
/**************************关于我们******************************/
/* ======================================== Hero Section ======================================== */
.heroabout { align-items: center; background: linear-gradient(135deg, #1A1A2E 0%, #16213E 50%, #0F3460 100%); display: flex; justify-content: center; min-height: 55vh; overflow: hidden; position: relative; }
.heroabout-bg { inset: 0; position: absolute; z-index: 0; }
.heroabout-bg::before { background-image: radial-gradient(circle at 20% 50%, rgba(54, 105, 239, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(90, 140, 247, 0.2) 0%, transparent 50%); content: ""; inset: 0; position: absolute; }
.heroabout-overlay { background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4) 60%, transparent); inset: 0; position: absolute;}
.heroabout-content { margin: 0 auto; max-width: 800px; padding: 120px 24px 60px; position: relative; text-align: center; width: 100%; z-index: 2; }
.heroabout-badge { align-items: center; backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 30px; display: inline-flex; gap: 8px; margin-bottom: 28px; padding: 10px 20px; }
.heroabout-badge span { color: rgba(255, 255, 255, 0.95); font-size: 14px; font-weight: 500; }
.heroabout-title { margin-bottom: 20px; }
.heroabout-title h1 { animation: slideUp 0.8s ease-out 0.4s both; color: var(--brand-white); font-size: clamp(32px, 5vw, 48px); font-weight: 700; line-height: 1.2; margin-bottom: 12px;text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
.heroabout-title span { animation: slideUp 0.8s ease-out 0.5s both; color: rgba(255, 255, 255, 0.85); display: block; font-size: clamp(18px, 2.5vw, 24px); font-weight: 400; }
.heroabout-description { animation: slideUp 0.8s ease-out 0.6s both; color: rgba(255, 255, 255, 0.75); font-size: 16px; line-height: 1.7; margin: 0 auto; max-width: 500px; }
/* ======================================== Brand Intro Section ======================================== */
.brand-intro { background: var(--brand-white); padding: 80px 0; position: relative; }
.brand-intro-container { margin: 0 auto; text-align: center; }
.brand-name-display { margin-bottom: 40px; }
.brand-name-display h2 { color: var(--brand-black); font-size: clamp(36px, 5vw, 52px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; }
.brand-name-display h2 sup { color: var(--brand-blue); font-size: 18px; font-weight: 400; }
.brand-tagline { color: var(--brand-gray1); font-size: 18px; font-weight: 400; }
.section-divider { background: linear-gradient(to right, var(--brand-blue), var(--brand-blue-light)); border-radius: 2px; height: 4px; margin: 0 auto 40px; width: 60px; }
.mission-card { background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%); border: 1px solid var(--brand-gray3); border-radius: 20px; box-shadow: var(--shadow-sm); padding: 40px; text-align: left; }
.mission-card h3 { border-bottom: 2px solid var(--brand-blue); color: var(--brand-black); display: inline-block; font-size: 22px; font-weight: 700; margin-bottom: 24px; padding-bottom: 16px; }
.mission-card p { color: var(--brand-gray1); font-size: 15px; line-height: 1.9; margin-bottom: 16px; }
.mission-card p:last-child { margin-bottom: 0; }
/* ======================================== Philosophy Section ======================================== */
.philosophy-section { background: var(--brand-gray2); padding: 80px 0; position: relative; }
.philosophy-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); margin: 0 auto; max-width: 1000px; }
.philosophy-item { background: var(--brand-white); border: 1px solid var(--brand-gray3); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 28px; transition: all var(--transition-normal); }
.philosophy-item:hover { border-color: var(--brand-blue-light); box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.philosophy-item h4 { align-items: center; color: var(--brand-black); display: flex; font-size: 17px; font-weight: 600; gap: 12px; margin-bottom: 14px; }
.philosophy-icon2 { align-items: center; background: var(--brand-blue); border-radius: 50%; color: var(--brand-white); display: flex; flex-shrink: 0; font-size: 13px; font-weight: 700; height: 32px; justify-content: center; width: 32px; }
.philosophy-item p { color: var(--brand-gray1); font-size: 14px; line-height: 1.7; }
/* ======================================== Core Principle Section ======================================== */
.core-principle { background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%); padding: 80px 0; position: relative; text-align: center; }
.core-principle::before { background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.15) 1px, transparent 0); background-size: 30px 30px; content: ""; inset: 0; position: absolute; }
.core-principle-content { position: relative; z-index: 1; }
.core-principle h3 { color: rgba(255, 255, 255, 0.7); font-size: 20px; font-weight: 500; letter-spacing: 0.15em; margin-bottom: 20px; text-transform: uppercase; }
.principle-text { color: var(--brand-white); font-size: clamp(22px, 3.5vw, 32px); font-weight: 700; line-height: 1.4; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); }
/* ======================================== Responsive Design ======================================== */
@media (max-width: 1024px) {
    .philosophy-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .heroabout-content { padding: 100px 20px 50px; }
    .mission-card { padding: 28px 24px; }
    .philosophy-grid { grid-template-columns: 1fr; }
    .philosophy-item { padding: 24px; }
}