/* Font Awesome 6 Free - 专业企业图标系统 */
/* 采用CSS绘制的专业几何图标，符合企业品牌形象 */

.fas, .fa-solid, .fa {
  display: inline-block;
  position: relative;
  line-height: 1;
  vertical-align: middle;
  width: 1.2em;
  height: 1.2em;
  text-align: center;
}

.fas::before, .fa-solid::before, .fa::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
}

/* 专业图标设计 - 使用几何形状和线条 */

/* 温泉/热水图标 */
.fa-hot-tub::before {
  background: linear-gradient(135deg, #2c5aa0 0%, #3498db 100%);
  border-radius: 50% 50% 20% 20%;
  box-shadow: 
    inset 0 -8px 0 rgba(255,255,255,0.3),
    0 2px 4px rgba(44, 90, 160, 0.3);
}

.fa-hot-tub::after {
  content: '';
  position: absolute;
  top: 20%;
  left: 30%;
  width: 40%;
  height: 2px;
  background: rgba(255,255,255,0.8);
  border-radius: 1px;
  box-shadow: 
    0 4px 0 rgba(255,255,255,0.6),
    0 8px 0 rgba(255,255,255,0.4);
}

/* 电话图标 */
.fa-phone::before {
  background: linear-gradient(135deg, #2c5aa0 0%, #3498db 100%);
  border-radius: 20% 20% 50% 50%;
  transform: translate(-50%, -50%) rotate(-10deg);
  box-shadow: 0 2px 6px rgba(44, 90, 160, 0.4);
}

.fa-phone::after {
  content: '';
  position: absolute;
  top: 60%;
  left: 50%;
  width: 30%;
  height: 20%;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  transform: translateX(-50%);
}

/* 设置/齿轮图标 */
.fa-cogs::before {
  background: 
    conic-gradient(from 0deg, #2c5aa0 0deg 45deg, transparent 45deg 90deg, #3498db 90deg 135deg, transparent 135deg 180deg, #2c5aa0 180deg 225deg, transparent 225deg 270deg, #3498db 270deg 315deg, transparent 315deg 360deg);
  border-radius: 20%;
  box-shadow: 0 2px 6px rgba(44, 90, 160, 0.4);
}

.fa-cogs::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  height: 40%;
  background: white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 0 2px #2c5aa0;
}

/* 叶子/自然图标 */
.fa-leaf::before {
  background: linear-gradient(135deg, #52b788 0%, #3498db 100%);
  border-radius: 0 100% 0 100%;
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 2px 6px rgba(82, 183, 136, 0.4);
}

.fa-leaf::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 20%;
  width: 60%;
  height: 2px;
  background: rgba(255,255,255,0.8);
  transform: translateY(-50%) rotate(-45deg);
  border-radius: 1px;
}

/* 盾牌/安全图标 */
.fa-shield-alt::before {
  background: linear-gradient(135deg, #2c5aa0 0%, #52b788 100%);
  border-radius: 50% 50% 0 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  box-shadow: 0 2px 6px rgba(44, 90, 160, 0.4);
}

.fa-shield-alt::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  color: white;
  font-size: 0.6em;
  font-weight: bold;
  transform: translate(-50%, -50%);
}

/* 大脑/智能图标 */
.fa-brain::before {
  background: linear-gradient(135deg, #3498db 0%, #52b788 100%);
  border-radius: 50% 50% 40% 40%;
  box-shadow: 0 2px 6px rgba(52, 152, 219, 0.4);
}

.fa-brain::after {
  content: '';
  position: absolute;
  top: 40%;
  left: 50%;
  width: 60%;
  height: 2px;
  background: rgba(255,255,255,0.8);
  border-radius: 1px;
  transform: translateX(-50%);
  box-shadow: 
    0 -4px 0 rgba(255,255,255,0.6),
    0 4px 0 rgba(255,255,255,0.6);
}

/* 移动设备图标 */
.fa-mobile-alt::before {
  background: linear-gradient(135deg, #2c5aa0 0%, #3498db 100%);
  border-radius: 15%;
  box-shadow: 0 2px 6px rgba(44, 90, 160, 0.4);
}

.fa-mobile-alt::after {
  content: '';
  position: absolute;
  top: 20%;
  left: 20%;
  width: 60%;
  height: 50%;
  background: rgba(255,255,255,0.9);
  border-radius: 4px;
  box-shadow: 
    0 60% 0 -50% rgba(255,255,255,0.7);
}

/* 用户/团队图标 */
.fa-users-cog::before, .fa-users::before {
  background: linear-gradient(135deg, #3498db 0%, #52b788 100%);
  border-radius: 50% 50% 20% 20%;
  box-shadow: 0 2px 6px rgba(52, 152, 219, 0.4);
}

.fa-users-cog::after, .fa-users::after {
  content: '';
  position: absolute;
  top: 25%;
  left: 50%;
  width: 30%;
  height: 30%;
  background: white;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 
    -20px 15px 0 -10px white,
    20px 15px 0 -10px white;
}

/* 建筑图标 */
.fa-building::before {
  background: linear-gradient(135deg, #2c5aa0 0%, #3498db 100%);
  border-radius: 4px 4px 0 0;
  box-shadow: 0 2px 6px rgba(44, 90, 160, 0.4);
}

.fa-building::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 30%;
  width: 40%;
  height: 50%;
  background: 
    linear-gradient(90deg, transparent 0%, transparent 45%, rgba(255,255,255,0.8) 45%, rgba(255,255,255,0.8) 55%, transparent 55%, transparent 100%),
    linear-gradient(0deg, transparent 0%, transparent 30%, rgba(255,255,255,0.6) 30%, rgba(255,255,255,0.6) 40%, transparent 40%, transparent 70%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0.6) 80%, transparent 80%, transparent 100%);
}

/* 商店图标 */
.fa-store::before {
  background: linear-gradient(135deg, #52b788 0%, #f39c12 100%);
  border-radius: 8px 8px 0 0;
  clip-path: polygon(0% 40%, 100% 40%, 100% 100%, 0% 100%);
  box-shadow: 0 2px 6px rgba(82, 183, 136, 0.4);
}

.fa-store::after {
  content: '';
  position: absolute;
  top: 15%;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(135deg, #f39c12 0%, #52b788 100%);
  border-radius: 20px 20px 8px 8px;
}

/* 云端图标 */
.fa-cloud::before {
  background: linear-gradient(135deg, #3498db 0%, #52b788 100%);
  border-radius: 50px;
  transform: translate(-50%, -50%) scale(0.8, 0.6);
  box-shadow: 0 2px 6px rgba(52, 152, 219, 0.4);
}

.fa-cloud::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 70%;
  width: 60%;
  height: 60%;
  background: linear-gradient(135deg, #3498db 0%, #52b788 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* 地理位置图标 */
.fa-map-marker-alt::before {
  background: linear-gradient(135deg, #f39c12 0%, #2c5aa0 100%);
  border-radius: 50% 50% 50% 0;
  transform: translate(-50%, -60%) rotate(-45deg);
  box-shadow: 0 2px 6px rgba(243, 156, 18, 0.4);
}

.fa-map-marker-alt::after {
  content: '';
  position: absolute;
  top: 35%;
  left: 50%;
  width: 25%;
  height: 25%;
  background: white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* 邮件图标 */
.fa-envelope::before {
  background: linear-gradient(135deg, #2c5aa0 0%, #3498db 100%);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(44, 90, 160, 0.4);
}

.fa-envelope::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  width: 70%;
  height: 2px;
  background: white;
  transform: translateX(-50%);
  box-shadow: 
    -25% 4px 0 -1px white,
    25% 4px 0 -1px white;
}

/* 检查标记图标 */
.fa-check::before {
  background: linear-gradient(135deg, #52b788 0%, #3498db 100%);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(82, 183, 136, 0.4);
}

.fa-check::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  color: white;
  font-size: 0.7em;
  font-weight: bold;
  transform: translate(-50%, -50%);
}

/* 返回顶部图标 - 更直观的"置顶"样式，包含顶部线条 */
.fa-arrow-up {
  position: relative;
}

.fa-arrow-up::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  background: linear-gradient(135deg, #2c5aa0 0%, #3498db 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px rgba(44, 90, 160, 0.4);
}

/* 上部横线表示"顶部"，下部箭头表示"向上" */
.fa-arrow-up::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: white;
  transform: translate(-50%, -50%);
  border-radius: 1px;
  z-index: 2;
  box-shadow: 
    0 -6px 0 0 white,
    0 6px 0 0 white,
    -4px -3px 0 -1px white,
    4px -3px 0 -1px white;
}

/* 淋浴图标 - 优化水滴位置，更好地居中 */
.fa-shower::before {
  background: linear-gradient(135deg, #3498db 0%, #52b788 100%);
  border-radius: 50% 4px 4px 4px;
  transform: translate(-50%, -50%) rotate(-45deg);
  box-shadow: 0 2px 6px rgba(52, 152, 219, 0.4);
}

.fa-shower::after {
  content: '';
  position: absolute;
  top: 60%;
  left: 50%;
  width: 40%;
  height: 30%;
  transform: translateX(-50%);
  background: 
    radial-gradient(circle at 25% 25%, rgba(255,255,255,0.8) 2px, transparent 2px),
    radial-gradient(circle at 75% 25%, rgba(255,255,255,0.8) 2px, transparent 2px),
    radial-gradient(circle at 25% 75%, rgba(255,255,255,0.8) 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, rgba(255,255,255,0.8) 2px, transparent 2px);
  background-size: 6px 6px;
}

/* 按摩/手部图标 */
.fa-hands::before {
  background: linear-gradient(135deg, #52b788 0%, #f39c12 100%);
  border-radius: 40% 60% 40% 60%;
  box-shadow: 0 2px 6px rgba(82, 183, 136, 0.4);
}

.fa-hands::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 60%;
  border: 2px solid rgba(255,255,255,0.8);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* SPA图标 */
.fa-spa::before {
  background: linear-gradient(135deg, #52b788 0%, #3498db 100%);
  border-radius: 50% 50% 20% 20%;
  box-shadow: 0 2px 6px rgba(82, 183, 136, 0.4);
}

.fa-spa::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  width: 50%;
  height: 40%;
  border: 2px solid rgba(255,255,255,0.8);
  border-radius: 50% 50% 0 0;
  transform: translateX(-50%);
}

/* 灯泡/创新图标 */
.fa-lightbulb::before {
  background: linear-gradient(135deg, #f39c12 0%, #3498db 100%);
  border-radius: 50% 50% 30% 30%;
  box-shadow: 0 2px 6px rgba(243, 156, 18, 0.4);
}

.fa-lightbulb::after {
  content: '';
  position: absolute;
  top: 75%;
  left: 40%;
  width: 20%;
  height: 20%;
  background: rgba(255,255,255,0.9);
  border-radius: 0 0 4px 4px;
}

/* 心形/关爱图标 */
.fa-heart::before {
  background: linear-gradient(135deg, #f39c12 0%, #52b788 100%);
  border-radius: 50% 50% 0 0;
  transform: translate(-50%, -60%) rotate(-45deg);
  box-shadow: 
    10px 0 0 -2px #f39c12,
    0 2px 6px rgba(243, 156, 18, 0.4);
}

/* 奖杯/卓越图标 */
.fa-trophy::before {
  background: linear-gradient(135deg, #f39c12 0%, #2c5aa0 100%);
  border-radius: 20% 20% 40% 40%;
  box-shadow: 0 2px 6px rgba(243, 156, 18, 0.4);
}

.fa-trophy::after {
  content: '';
  position: absolute;
  top: 80%;
  left: 30%;
  width: 40%;
  height: 15%;
  background: rgba(255,255,255,0.9);
  border-radius: 2px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .fas, .fa-solid, .fa {
    width: 1em;
    height: 1em;
  }
}

/* 悬停效果 */
.fas:hover::before, .fa-solid:hover::before, .fa:hover::before {
  transform: translate(-50%, -50%) scale(1.1);
  transition: transform 0.3s ease;
}

/* 图标容器悬停效果 */
.feature-icon:hover .fas, 
.product-icon:hover .fas,
.solution-icon:hover .fas,
.culture-icon:hover .fas,
.contact-icon:hover .fas {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}