body { font-family: 'Inter', sans-serif; background-color: #020617; -webkit-font-smoothing: antialiased; }
.page-transition { transition: opacity 0.3s ease-in-out; }
.logo-box { aspect-ratio: 4/3; border-radius: 1rem; overflow: hidden; }
.nav-link-active { color: #3b82f6 !important; border-bottom: 3px solid #3b82f6; }

/* 欧美高级卡片悬浮设计 */
.card-hover { transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(30, 41, 59, 0.8); backdrop-filter: blur(8px); }
.card-hover:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.4); background: rgba(15, 23, 42, 0.9); }

.text-gradient { background: linear-gradient(135deg, #ffffff 0%, #94a3b8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.text-gradient-blue { background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.bg-glass { background: rgba(2, 6, 23, 0.75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
input, textarea { background: rgba(30, 41, 59, 0.5) !important; color: white !important; border: 1px solid rgba(51, 65, 85, 0.8) !important; }
input:focus, textarea:focus { border-color: #3b82f6 !important; outline: none; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15); background: rgba(30, 41, 59, 0.8) !important; }

/* 弹窗 UI */
.inquiry-modal { display: none; position: fixed; inset: 0; background-color: rgba(2, 6, 23, 0.9); z-index: 1000; align-items: center; justify-content: center; backdrop-filter: blur(12px); }
.modal-content { background-color: #0f172a; padding: 3rem; border-radius: 2rem; width: 90%; max-width: 520px; border: 1px solid rgba(59, 130, 246, 0.2); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8); position: relative; }
.close-modal { position: absolute; top: 1.5rem; right: 1.5rem; color: #64748b; font-size: 28px; font-weight: bold; cursor: pointer; transition: color 0.2s; line-height: 1; }
.close-modal:hover { color: #f8fafc; }
.modal-input { width: 100%; padding: 1.25rem; margin-bottom: 1rem; border-radius: 1rem; transition: all 0.3s; font-weight: 500; }
.submit-inquiry { background-color: #2563eb; color: white; padding: 1.25rem 2rem; border: none; border-radius: 1rem; cursor: pointer; font-weight: 800; width: 100%; transition: all 0.3s; text-transform: uppercase; letter-spacing: 0.1em; }
.submit-inquiry:hover { background-color: #1d4ed8; transform: translateY(-2px); box-shadow: 0 15px 25px -5px rgba(37, 99, 235, 0.4); }
.submit-inquiry:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.skeleton-loader { pointer-events: none; }

.value-card { padding: 3.5rem; transition: all 0.5s ease; background: rgba(15, 23, 42, 0.4); border: 1px solid rgba(30, 41, 59, 0.5); backdrop-filter: blur(10px); }
.value-card:hover { transform: translateY(-10px); background: rgba(15, 23, 42, 0.8); border-color: rgba(59, 130, 246, 0.3); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5); }

.contact-item { background: rgba(15, 23, 42, 0.6); padding: 2.5rem; border-radius: 2rem; border: 1px solid rgba(30, 41, 59, 0.8); transition: all 0.4s ease; backdrop-filter: blur(8px); }
.contact-item:hover { border-color: rgba(59, 130, 246, 0.5); transform: translateY(-5px); box-shadow: 0 20px 40px -15px rgba(59, 130, 246, 0.1); }

/* 地图坐标与标记优化 - 解决层叠碰撞问题 */
.office-map { width: 100%; height: 500px; border-radius: 2rem; overflow: hidden; border: 1px solid rgba(59, 130, 246, 0.2); position: relative; background: #0f172a; }
.map-marker { position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 20px rgba(59, 130, 246, 1); transform: translate(-50%, -50%); z-index: 10; animation: pulse 2s infinite; cursor: crosshair; transition: z-index 0.2s; }
.map-marker:hover { z-index: 30; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.8); } 70% { box-shadow: 0 0 0 20px rgba(59, 130, 246, 0); } 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } }

.marker-shenzhen { background: #3b82f6; top: 56%; left: 73%; }
.marker-hk { background: #ef4444; top: 62%; left: 77%; }
.marker-la { background: #10b981; top: 45%; left: 20%; }

.marker-label { position: absolute; background: rgba(2, 6, 23, 0.95); color: white; padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: bold; white-space: nowrap; border: 1px solid rgba(59, 130, 246, 0.5); box-shadow: 0 10px 25px rgba(0,0,0,0.5); pointer-events: none; transition: z-index 0.2s; }
.label-shenzhen { top: 56%; left: 73%; transform: translate(-50%, -180%); z-index: 11; }
.label-hk { top: 62%; left: 77%; transform: translate(20%, 40%); z-index: 12; border-color: rgba(239, 68, 68, 0.5); }
.label-la { top: 45%; left: 20%; transform: translate(-50%, -180%); z-index: 11; border-color: rgba(16, 185, 129, 0.5); }

#toast { position: fixed; top: 24px; right: 24px; background: rgba(16, 185, 129, 0.95); backdrop-filter: blur(10px); color: white; padding: 18px 28px; border-radius: 16px; font-weight: bold; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255,255,255,0.1) inset; transform: translateX(150%); transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 9999; pointer-events: none; }
#toast.show { transform: translateX(0); }
#toast.error { background: rgba(239, 68, 68, 0.95); }