/* ======================================== 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; }
/* ======================================== 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; }
/*联系我们 QR Section */
.qr-section { background: var(--brand-white); overflow: hidden; padding: 100px 0; position: relative; }
.qr-container { align-items: center; display: flex; justify-content: center; }
.qr-card { background: var(--brand-white); border: 1px solid var(--brand-gray3); border-radius: 24px; box-shadow: var(--shadow-xl); max-width: 400px; padding: 48px; text-align: center; transition: all var(--transition-slow); width: 100%; }
.qr-card:hover { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); transform: translateY(-8px); }
.qr-wrapper { display: inline-block; margin-bottom: 24px; position: relative; }
.qr-code { border-radius: 16px; box-shadow: var(--shadow-md); height: 280px; width: 280px; }
.qr-label { color: var(--brand-black); font-size: 16px; font-weight: 500; margin-top: 16px; }
.qr-hint { color: var(--brand-gray1); font-size: 14px; margin-top: 8px; }
.qr-decoration { background: radial-gradient(circle, rgba(54, 105, 239, 0.1) 0%, transparent 70%); border-radius: 50%; height: 100px; position: absolute; width: 100px; z-index: -1; }
.qr-decoration-1 { left: -50px; top: -50px; }
.qr-decoration-2 { bottom: -50px; right: -50px; }
/*联系我们 Contact Info Section */
.contact-info-section { background: var(--brand-gray2); overflow: hidden; padding: 80px 0; position: relative; }
.contact-info-section::before { background: linear-gradient(to right, transparent, var(--brand-gray3), transparent); content: ""; height: 1px; left: 0; position: absolute; right: 0; top: 0; }
.contact-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.contact-item-card { background: var(--brand-white); border-radius: 20px; box-shadow: var(--shadow-md); padding: 32px; text-align: center; transition: all var(--transition-slow); }
.contact-item-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.contact-icon { align-items: center; background: rgba(54, 105, 239, 0.1); border-radius: 16px; color: var(--brand-blue); display: flex; height: 56px; justify-content: center; margin: 0 auto 16px; width: 56px; }
.contact-item-title { color: var(--brand-black); font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.contact-item-text { color: var(--brand-gray1); font-size: 14px; line-height: 1.6; }
/* Responsive Design */
@media (max-width: 1024px) {
    .nav-links, .nav-cta { display: none; }
    .mobile-menu-btn { display: flex; }
    .contact-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { gap: 40px; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .hero { min-height: 40vh; }
    .qr-card { padding: 32px 24px; }
    .qr-code { height: 240px; width: 240px; }
    .contact-grid { grid-template-columns: 1fr; }
    .footer-grid { gap: 25px; grid-template-columns: repeat(2, 1fr); padding: 40px 0;}
    .footer-bottom-content { flex-direction: column; gap: 8px; text-align: center; }
}