.loading-spinner{display: inline-block;width: 20px;height: 20px;border: 3px solid rgba(var(--primary-color),0.3);border-radius: 50%;border-top-color: var(--primary-color);animation: spin 1s ease-in-out infinite} .loading-spinner.lg{width: 40px;height: 40px;border-width: 4px} @keyframes spin{to{transform: rotate(360deg)} } .badge-custom{display: inline-flex;align-items: center;padding: 4px 12px;font-size: var(--font-size-xs);font-weight: 600;border-radius: var(--border-radius-full);text-transform: uppercase;letter-spacing: 0.5px} .badge-primary{background: linear-gradient(135deg,var(--primary-color),var(--primary-dark));color: var(--white)} .badge-success{background: linear-gradient(135deg,var(--success-color),#1e7e34);color: var(--white)} .badge-warning{background: linear-gradient(135deg,var(--warning-color),#d39e00);color: var(--gray-900)} .badge-info{background: linear-gradient(135deg,var(--info-color),#138496);color: var(--white)} .progress-custom{height: 8px;background-color: var(--gray-200);border-radius: var(--border-radius-full);overflow: hidden;position: relative} .progress-bar-custom{height: 100%;background: linear-gradient(90deg,var(--primary-color),var(--success-color));border-radius: var(--border-radius-full);transition: width var(--transition-slow);position: relative} .progress-bar-custom::after{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.3) 50%,transparent 100%);animation: shine 2s infinite} @keyframes shine{0%{transform: translateX(-100%)} 100%{transform: translateX(100%)} } .card-hover{transition: all var(--transition-base);cursor: pointer} .card-hover:hover{transform: translateY(-8px) scale(1.02);box-shadow: var(--shadow-xl)} .text-gradient-primary{background: linear-gradient(135deg,var(--primary-color),var(--success-color));-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text} .text-gradient-secondary{background: linear-gradient(135deg,var(--info-color),var(--primary-color));-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text} .divider{height: 1px;background: linear-gradient(90deg,transparent 0%,var(--gray-300) 20%,var(--gray-300) 80%,transparent 100%);border: none;margin: var(--spacing-xl) 0} .divider.thick{height: 2px} .divider.primary{background: linear-gradient(90deg,transparent 0%,var(--primary-color) 20%,var(--primary-color) 80%,transparent 100%)} .skill-bar{margin-bottom: var(--spacing-lg)} .skill-bar-label{display: flex;justify-content: space-between;align-items: center;margin-bottom: var(--spacing-sm)} .skill-bar-label h6{margin: 0;font-size: var(--font-size-sm);font-weight: 600} .skill-bar-percentage{font-size: var(--font-size-xs);color: var(--primary-color);font-weight: 600} .skill-bar-progress{height: 6px;background-color: var(--gray-200);border-radius: var(--border-radius-full);overflow: hidden} .skill-bar-fill{height: 100%;background: linear-gradient(90deg,var(--primary-color),var(--success-color));border-radius: var(--border-radius-full);transition: width 2s ease-in-out;width: 0} .skill-bar-fill.animate{width: var(--skill-percentage,0%)} .timeline{position: relative;padding-left: var(--spacing-xl)} .timeline::before{content: '';position: absolute;left: 15px;top: 0;bottom: 0;width: 2px;background: linear-gradient(180deg,var(--primary-color),var(--success-color))} .timeline-item{position: relative;margin-bottom: var(--spacing-2xl);padding-left: var(--spacing-xl)} .timeline-item::before{content: '';position: absolute;left: -23px;top: 5px;width: 16px;height: 16px;border-radius: 50%;background: var(--white);border: 3px solid var(--primary-color);z-index: 10} .timeline-item:last-child{margin-bottom: 0} .timeline-item h5{color: var(--primary-color);margin-bottom: var(--spacing-sm)} .timeline-item .timeline-date{font-size: var(--font-size-xs);color: var(--gray-500);font-weight: 600;text-transform: uppercase;letter-spacing: 0.5px;margin-bottom: var(--spacing-sm)} .stat-counter{text-align: center;padding: var(--spacing-lg)} .stat-number{font-size: var(--font-size-4xl);font-weight: 700;color: var(--primary-color);margin-bottom: var(--spacing-sm);display: block} .stat-label{font-size: var(--font-size-sm);color: var(--gray-600);font-weight: 500;text-transform: uppercase;letter-spacing: 0.5px} .bg-dark .stat-item{padding: var(--spacing-xl);border-radius: var(--border-radius-lg);transition: all var(--transition-base);position: relative;overflow: hidden} .bg-dark .stat-item::before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg,rgba(255,193,7,0.1),rgba(0,123,255,0.1));opacity: 0;transition: opacity var(--transition-base)} .bg-dark .stat-item:hover::before{opacity: 1} .bg-dark .stat-number{font-size: var(--font-size-5xl);font-weight: 800;color: var(--warning-color);margin-bottom: var(--spacing-sm);text-shadow: 0 2px 4px rgba(0,0,0,0.3);position: relative;z-index: 1} .bg-dark .stat-label{font-size: var(--font-size-base);color: rgba(255,255,255,0.9);font-weight: 600;letter-spacing: 1px;position: relative;z-index: 1} .feature-icon{width: 60px;height: 60px;border-radius: var(--border-radius-xl);display: flex;align-items: center;justify-content: center;font-size: var(--font-size-2xl);margin-bottom: var(--spacing-md);position: relative;overflow: hidden} .feature-icon.primary{background: linear-gradient(135deg,var(--primary-color),var(--primary-dark));color: var(--white)} .feature-icon.success{background: linear-gradient(135deg,var(--success-color),#1e7e34);color: var(--white)} .feature-icon.info{background: linear-gradient(135deg,var(--info-color),#138496);color: var(--white)} .feature-icon::after{content: '';position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: linear-gradient(45deg,transparent,rgba(255,255,255,0.1),transparent);transition: transform var(--transition-slow);transform: translateX(-100%) translateY(-100%)} .feature-icon:hover::after{transform: translateX(100%) translateY(100%)} .modal-custom .modal-content{border: none;border-radius: var(--border-radius-2xl);box-shadow: var(--shadow-xl)} .modal-custom .modal-header{border-bottom: 1px solid var(--gray-200);padding: var(--spacing-xl)} .modal-custom .modal-body{padding: var(--spacing-xl)} .modal-custom .modal-footer{border-top: 1px solid var(--gray-200);padding: var(--spacing-xl)} .tooltip-custom{position: relative;cursor: help} .tooltip-custom::before{content: attr(data-tooltip);position: absolute;bottom: 125%;left: 50%;transform: translateX(-50%);background-color: var(--gray-900);color: var(--white);padding: 8px 12px;border-radius: var(--border-radius);font-size: var(--font-size-xs);white-space: nowrap;opacity: 0;visibility: hidden;transition: all var(--transition-fast);z-index: 1000} .tooltip-custom::after{content: '';position: absolute;bottom: 115%;left: 50%;transform: translateX(-50%);border: 5px solid transparent;border-top-color: var(--gray-900);opacity: 0;visibility: hidden;transition: all var(--transition-fast)} .tooltip-custom:hover::before,.tooltip-custom:hover::after{opacity: 1;visibility: visible} .breadcrumb-custom{background: none;padding: 0;margin-bottom: var(--spacing-lg)} .breadcrumb-custom .breadcrumb-item{font-size: var(--font-size-sm);color: var(--gray-600)} .breadcrumb-custom .breadcrumb-item.active{color: var(--primary-color);font-weight: 600} .breadcrumb-custom .breadcrumb-item + .breadcrumb-item::before{content: '/';color: var(--gray-400);padding: 0 var(--spacing-sm)} .page-header{background: linear-gradient(135deg,var(--primary-color) 0%,var(--success-color) 100%);color: var(--white);padding: 150px 0 100px 0;margin-top: 76px;text-align: center;position: relative;overflow: hidden} .page-header::before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none"><path opacity="0.1" fill="white" d="M0,0 C150,100 350,0 500,50 C650,100 850,0 1000,50 L1000,100 L0,100 Z"/></svg>');background-size: cover;background-position: bottom} .page-header .display-4{font-weight: 700;text-shadow: 2px 2px 4px rgba(0,0,0,0.3)} .page-header .lead{opacity: 0.9;font-size: var(--font-size-lg)} .pricing-card{background: var(--white);border: 2px solid var(--gray-200);border-radius: var(--border-radius-2xl);padding: var(--spacing-2xl);text-align: center;transition: all var(--transition-base);position: relative;overflow: visible;height: auto;min-height: auto} .pricing-card.featured{border-color: var(--primary-color);transform: scale(1.05);box-shadow: var(--shadow-xl)} .pricing-card.featured::before{content: '推荐';position: absolute;top: 20px;right: -30px;background: var(--primary-color);color: var(--white);padding: 8px 40px;font-size: var(--font-size-xs);font-weight: 600;transform: rotate(45deg)} .pricing-card:hover{border-color: var(--primary-color);transform: translateY(-10px);box-shadow: var(--shadow-xl)} .pricing-card .price{font-size: var(--font-size-4xl);font-weight: 700;color: var(--primary-color);margin: var(--spacing-lg) 0} .pricing-card .price-unit{font-size: var(--font-size-base);color: var(--gray-600);font-weight: normal} .pricing-features{list-style: none;padding: 0;margin: var(--spacing-xl) 0} .pricing-features li{padding: var(--spacing-sm) 0;border-bottom: 1px solid var(--gray-100);color: var(--gray-700)} .pricing-features li:last-child{border-bottom: none} .pricing-features li.disabled{color: var(--gray-400);text-decoration: line-through} .team-card{background: var(--white);border-radius: var(--border-radius-2xl);padding: var(--spacing-xl);text-align: center;transition: all var(--transition-base);border: 1px solid var(--gray-200);position: relative;overflow: visible;height: auto;min-height: auto} .team-card:hover{transform: translateY(-10px);box-shadow: var(--shadow-xl)} .team-card .team-avatar{width: 120px;height: 120px;border-radius: 50%;margin: 0 auto var(--spacing-lg);border: 4px solid var(--primary-color);overflow: hidden} .team-card .team-avatar img{width: 100%;height: 100%;object-fit: cover} .team-card .team-name{font-size: var(--font-size-xl);font-weight: 600;color: var(--gray-900);margin-bottom: var(--spacing-sm)} .team-card .team-position{font-size: var(--font-size-sm);color: var(--primary-color);font-weight: 500;margin-bottom: var(--spacing-lg);text-transform: uppercase;letter-spacing: 0.5px} .team-card .team-social{display: flex;justify-content: center;gap: var(--spacing-sm)} .team-card .team-social a{width: 35px;height: 35px;border-radius: 50%;background: var(--gray-100);color: var(--gray-600);display: flex;align-items: center;justify-content: center;transition: all var(--transition-fast);text-decoration: none} .team-card .team-social a:hover{background: var(--primary-color);color: var(--white);transform: translateY(-2px)} .scroll-progress{position: fixed;top: 0;left: 0;width: 0%;height: 3px;background: linear-gradient(90deg,var(--primary-color),var(--success-color));z-index: 9999;transition: width var(--transition-fast)} .sticky-nav{position: sticky;top: 80px;z-index: 100} .sticky-nav .nav-pills .nav-link{color: var(--gray-600);border-radius: var(--border-radius-full);padding: 8px 20px;font-size: var(--font-size-sm);font-weight: 500;transition: all var(--transition-fast)} .sticky-nav .nav-pills .nav-link.active{background: linear-gradient(135deg,var(--primary-color),var(--success-color));color: var(--white)} .sticky-nav .nav-pills .nav-link:hover{background: var(--gray-100);color: var(--primary-color)} .error-state{text-align: center;padding: var(--spacing-3xl);color: var(--gray-600)} .error-state .error-icon{font-size: 4rem;color: var(--gray-400);margin-bottom: var(--spacing-lg)} .error-state h4{color: var(--gray-800);margin-bottom: var(--spacing-md)} .error-state p{max-width: 400px;margin: 0 auto var(--spacing-lg)} .success-state{text-align: center;padding: var(--spacing-3xl);color: var(--success-color)} .success-state .success-icon{font-size: 4rem;margin-bottom: var(--spacing-lg);animation: checkmark 0.5s ease-in-out} @keyframes checkmark{0%{transform: scale(0)} 50%{transform: scale(1.2)} 100%{transform: scale(1)} } .contact-card{background: var(--white);border-radius: var(--border-radius-lg);box-shadow: var(--shadow-md);transition: all var(--transition-base);border: 1px solid var(--gray-200);height: auto;min-height: auto;overflow: visible} .contact-card:hover{transform: translateY(-5px);box-shadow: var(--shadow-lg);border-color: var(--primary-color)} .contact-icon{width: 80px;height: 80px;margin: 0 auto;background: linear-gradient(135deg,var(--primary-color),var(--primary-light));border-radius: var(--border-radius-full);display: flex;align-items: center;justify-content: center;color: var(--white)} .contact-link{color: var(--primary-color);text-decoration: none;font-weight: 600;font-size: var(--font-size-lg);transition: color var(--transition-fast)} .contact-link:hover{color: var(--primary-dark)} .contact-form-container{background: var(--white);padding: 2rem;border-radius: var(--border-radius-lg);box-shadow: var(--shadow-lg)} .contact-form .form-control,.contact-form .form-select{border: 2px solid var(--gray-300);border-radius: var(--border-radius);padding: 0.75rem 1rem;font-size: var(--font-size-base);transition: all var(--transition-base)} .contact-form .form-control:focus,.contact-form .form-select:focus{border-color: var(--primary-color);box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25)} .contact-form .form-label{font-weight: 600;color: var(--gray-700);margin-bottom: 0.5rem} .office-info .office-item{display: flex;align-items: flex-start;margin-bottom: 1.5rem} .office-info .office-item i{margin-top: 0.25rem;font-size: var(--font-size-lg)} .office-info .office-item strong{color: var(--gray-800);display: block;margin-bottom: 0.25rem} .office-info .office-item p{color: var(--gray-600);margin-bottom: 0.25rem;line-height: 1.5} .map-container{background: var(--gray-100);border-radius: var(--border-radius-lg);padding: 2rem;text-align: center;border: 2px dashed var(--gray-300)} .map-placeholder{color: var(--gray-600)} .map-placeholder i{margin-bottom: 1rem} .map-placeholder h5{color: var(--gray-800);margin-bottom: 1rem} .map-placeholder p{margin-bottom: 1.5rem} @media (max-width: 768px){.contact-form-container{padding: 1.5rem} .contact-card{margin-bottom: 1rem} .office-info .office-item{flex-direction: column;text-align: center} .office-info .office-item i{margin: 0 auto 1rem auto} }