@charset "utf-8";

:root {
    --primary-color:#1a73e8;
  --primary-light: #e8f0fe; 
  --primary-dark: #0d47a1;
  --secondary-color: #fbbc04; 
  --accent-color: #34a853; 
  --text-primary: #202124;
  --text-secondary: #5f6368;
  --bg-light: #f8f9fa;
  --border-color: #dadce0;
  --card-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  --hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.home-page {
	width: 1200px;
	margin: 10px auto 0
}
.center-content {
    width: 1168px;
    margin-left: auto;
    margin-right: auto;
}
.yoho-header .head-wrapper .func-area {
    float: right;
    width: 400px;
    padding-right: 18px;
    /* margin-top: 40px; */
    margin: 25px 0;
}
/* 基础变量和重置 */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 基础布局 */
.home-hero-container {
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 16px;
}

/* 顶部爆款商品区 - 改进 */
.top-products-section {
  background: white;
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 28px;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border-color);
  transition: var(--transition);
}

.top-products-section:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  position: relative;
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--primary-color);
}

.section-title i {
  margin-right: 10px;
  color: var(--primary-color);
  width: 24px;
  height: 24px;
}

/* 商品横向滚动区 - 增强 */
.product-scroller {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 12px 4px 16px;
  scrollbar-width: auto;
  scrollbar-color: var(--primary-color) rgba(0, 0, 0, 0.05);
  scroll-snap-type: x proximity;
}

.product-scroller::-webkit-scrollbar {
  height: 6px;
}

.product-scroller::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  margin: 0 40px;
}

.product-scroller::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 3px;
}

/* 商品卡片 - 增强视觉效果 */
.product-card {
  flex: 0 0 190px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  transition: var(--transition);
  background: white;
  scroll-snap-align: start;
  position: relative;
}

.product-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--primary-color);
  opacity: 0;
  transition: var(--transition);
}

.product-card img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  background: #f5f7fa;
  border-bottom: 1px solid var(--border-color);
  transition: var(--transition);
}


.product-info {
  padding: 14px;
}

/* 商品名称 - 提升质感 */
.product-info .name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent; /* 准备悬停下划线 */
}
.product-card:hover .name {
  color: var(--primary-color);
}
/* 商品规格样式 */
.product-info .specs {
  display: block;
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
  line-height: 1.4;
  padding: 4px 6px;
  background-color: #f5f7fa;
  border-radius: 4px;
  /*border: 1px dashed #ddd;*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: var(--transition);
}

.product-card:hover .specs {
  background-color: #e6f7ff;
  border-color: var(--primary-color);
  color: var(--primary-color);
}
/* 价格容器 - 增加层次感 */
.product-info .price {
  color: var(--primary-color);
  font-weight: 700;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.product-info em {
  font-style: normal;
  font-size: 12px;
  color: #fff;  /* 保持白色文字 */
  font-weight: 600;
  background: linear-gradient(135deg, #ff4d4d, #ff1a1a); /* 更强烈的红色渐变 */
  padding: 4px 4px;
  border-radius: 12px;
  border: 1px solid #ff8080; /* 发光边框 */
  box-shadow: 
    0 2px 4px rgba(255, 0, 0, 0.2),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  display: inline-flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* 添加销量图标 */
.product-info em::before {
  content: "↑";
  margin-right: 4px;
  font-size: 10px;
  transform: translateY(-1px);
}

/* 微光动画 */
@keyframes sparkle {
  0% { transform: rotate(0deg) translate(0,0); }
  100% { transform: rotate(360deg) translate(0,0); }
}

/* 悬停效果增强 */
.product-card:hover em {
  transform: scale(1.05);
  box-shadow: 
    0 3px 6px rgba(255, 0, 0, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
}
/* 价格数字强化 */
.product-info .price > span {
  text-shadow: 0 1px 1px rgba(0,0,0,0.05);
  letter-spacing: 0.3px;
}

/* 中部核心区 - 布局优化 */
.main-hero-area {
  display: grid;
  grid-template-columns: 250px 1fr 250px;
  gap: 20px;
  margin-bottom: 28px;
}

/* 左栏：解决方案 - 视觉增强 */
.solutions-column {
  background: white;
  border-radius: 10px;
  padding: 20px;
  border: 1px solid var(--border-color);
  box-shadow: var(--card-shadow);
  transition: var(--transition);
}

.solutions-column:hover {
  box-shadow: var(--hover-shadow);
}

.solution-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.solution-item {
  height: 120px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  transition: var(--transition);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.solution-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
  transition: var(--transition);
}

.solution-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.solution-item:hover::before {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
}

.solution-item span {
  position: relative;
  z-index: 1;
  color: white;
  padding: 12px;
  font-size: 15px;
  font-weight: 500;
  width: 100%;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 中栏：轮播图 - 现代风格 */
.slider-column {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: var(--transition);
}

.slider-column:hover {
  box-shadow: var(--hover-shadow);
}

.bx-wrapper {
  border: none !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.bx-viewport {
  height: 356px !important;
  border-radius: 10px !important;
}

.bx-pager {
  bottom: 20px !important;
}

.bx-pager.bx-default-pager a {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  transition: var(--transition) !important;
}

.bx-pager.bx-default-pager a.active,
.bx-pager.bx-default-pager a:hover {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  transform: scale(1.2);
}

.bx-controls-direction a {
  width: 44px !important;
  height: 44px !important;
  margin-top: -22px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  opacity: 0.9;
  transition: var(--transition) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bx-controls-direction a:hover {
  opacity: 1;
  background: white !important;
  transform: scale(1.1);
}

.bx-prev::before, .bx-next::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-top: 3px solid var(--primary-color);
  border-left: 3px solid var(--primary-color);
}

.bx-prev::before {
  transform: rotate(-45deg);
  margin-left: 5px;
}

.bx-next::before {
  transform: rotate(135deg);
  margin-right: 5px;
}

.slider-column .bx-viewport li{
    height: 356px;
}
.slider-column .bx-wrapper .bx-viewport img {
    width: 100%;
    display: block;
    height: 100%;
}

/* 右栏：信任背书 - 专业风格 */
.trust-column {
  background: white;
  border-radius: 10px;
  padding: 20px;
  border: 1px solid var(--border-color);
  box-shadow: var(--card-shadow);
  transition: var(--transition);
}

.trust-column:hover {
  box-shadow: var(--hover-shadow);
}

.trust-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}

.badge-item {
  text-align: center;
  padding: 13px 5px;
  background: var(--primary-light);
  border-radius: 8px;
  transition: var(--transition);
  border: 1px solid rgba(26, 115, 232, 0.1);
}

.badge-item:hover {
  background: #d2e3fc;
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-color: rgba(26, 115, 232, 0.2);
}

.badge-item i {
    font-size: 32px;
    color: var(--primary-color);
    display: block;
    margin: 0 auto 10px;
}

.badge-item p {
  font-size: 14px;
  margin: 0;
  color: var(--text-primary);
  font-weight: 500;
}

.service-hotline {
  display: flex;
  align-items: center;
  background: var(--primary-light);
  border-radius: 8px;
  padding: 14px;
  border: 1px solid rgba(26, 115, 232, 0.1);
  transition: var(--transition);
}

.service-hotline:hover {
  background: #d2e3fc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.service-hotline i {
  font-size: 36px;
  color: var(--primary-color);
  margin-right: 9px;
  flex-shrink: 0;
}

.service-hotline a {
  font-size: 21px;
  font-weight: 700;
  color: var(--primary-color);
  text-decoration: none;
  display: block;
  margin-top: 2px;
  transition: color 0.2s;
}

.service-hotline a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.service-hotline p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

/* 底部：快捷功能入口 */
.quick-actions-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  background: white;
  border-radius: 10px;
  padding: 20px;
  border: 1px solid var(--border-color);
  box-shadow: var(--card-shadow);
}

.action-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 8px;
  padding: 20px 12px;
  border: 1px solid var(--border-color);
  transition: var(--transition);
  text-align: center;
  color: var(--text-primary);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.action-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--primary-color);
  transform: translateY(-100%);
  transition: var(--transition);
}

.action-button:hover {
  background: var(--primary-light);
  transform: translateY(-3px);
  box-shadow: var(--hover-shadow);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.action-button:hover::before {
  transform: translateY(0);
}

.action-button i {
  font-size: 32px;
  color: var(--primary-color);
  margin-bottom: 12px;
  display: block;
  transition: var(--transition);
}

.action-button:hover i {
  transform: scale(1.1);
}

.action-button span {
  font-size: 15px;
  font-weight: 500;
}

/* 图标样式 */
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.icon-fire { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231a73e8"><path d="M12 12.9l-2.13 2.09c-.56.56-.87 1.29-.87 2.07C9 18.68 10.35 20 12 20s3-1.32 3-2.94c0-.78-.31-1.52-.87-2.07L12 12.9zm0-10.9c-3.52 0-6 2.94-6 6.54 0 3.75 2.29 6.31 4.67 8.04.46.33.75.85.75 1.41 0 .69-.56 1.25-1.25 1.25-.28 0-.54-.09-.76-.25-.71-.51-1.47-1.12-2.25-1.85-.32-.3-.75-.47-1.21-.47-.65 0-1.18.53-1.18 1.18 0 .49.28.93.72 1.13.87.39 1.82.74 2.78 1.02.38.11.65.46.65.86 0 .55-.45 1-1 1-.06 0-.11-.01-.17-.01-1.2-.15-2.35-.44-3.44-.85-.33-.12-.56-.45-.56-.83 0-.65.6-1.13 1.22-.96.44.12.88.22 1.33.3.23.04.46-.06.6-.25.32-.44.6-.91.84-1.4.18-.36.04-.78-.31-.96-.6-.3-1.15-.74-1.62-1.3-1.16-1.38-1.76-3.1-1.76-4.98C3 5.1 6.2 2 10 2c1.8 0 3.43.73 4.6 1.9.4.4.77.85 1.1 1.33.25.37.29.85.12 1.26-.14.34-.46.56-.82.56-.1 0-.19-.02-.29-.04-.44-.11-.9-.17-1.36-.17h-.01z"/></svg>'); }
.icon-solution { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231a73e8"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10zM8 13.01l1.41 1.41L11 12.84V17h2v-4.16l1.59 1.59L16 13.01 12.01 9 8 13.01z"/></svg>'); }
.icon-shield { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231a73e8"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/></svg>'); }
.icon-certificate { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231a73e8"><path d="M4 3h16v2H4zm0 4h16v2H4zm0 4h16v2H4zm0 4h10v2H4zm12 0h4v2h-4z"/></svg>'); }
.icon-factory { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231a73e8"><path d="M22 22H2V10l7-3v2l5-2v3h3l1-8h3l1 8v12zM12 9.95l-5 2V10l5-2v1.95zm-7 3.23V20h3v-3h2v3h3v-5.79l-8-3.03z"/></svg>'); }
.icon-shield-check { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231a73e8"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-1.06 13.54L7.4 12l1.41-1.41 2.12 2.12 4.24-4.24 1.41 1.41-5.64 5.66z"/></svg>'); }
.icon-truck-fast { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231a73e8"><path d="M18 18.5c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5-1.5.67-1.5 1.5.67 1.5 1.5 1.5zm1.5-9H17V12h4.46L19.5 9.5zM6 18.5c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5-1.5.67-1.5 1.5.67 1.5 1.5 1.5zM20 8l3 4v5h-2c0 1.66-1.34 3-3 3s-3-1.34-3-3H9c0 1.66-1.34 3-3 3s-3-1.34-3-3H1V6c0-1.11.89-2 2-2h14v4h3zM3 6v9h.76c.55-.61 1.35-1 2.24-1 .89 0 1.69.39 2.24 1H15V6H3z"/></svg>'); }
.icon-phone { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231a73e8"><path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/></svg>'); }
.icon-chat { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231a73e8"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>'); }
.icon-quote { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231a73e8"><path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/></svg>'); }
.icon-bulk { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231a73e8"><path d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"/></svg>'); }
.icon-truck { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231a73e8"><path d="M20 8h-3V4H1v13h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm13.5-8.5l1.96 2.5H17V9.5h2.5zM18 18c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/></svg>'); }

    /* 更新后的背景样式 */
.home-hero-container {
  max-width: 1240px;
  margin: 24px auto;
  padding: 0 16px;
  position: relative;
  overflow: hidden;
}

/* 添加整体渐变背景 */


/* 顶部爆款区背景增强 */
.top-products-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 28px;
  box-shadow: 
    0 2px 10px rgba(0, 0, 0, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.top-products-section::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(26, 115, 232, 0.08) 0%, transparent 70%);
  z-index: -1;
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 中部核心区背景设计 */
.main-hero-area {
  display: grid;
  grid-template-columns: 250px 1fr 250px;
  gap: 20px;
  margin-bottom: 28px;
  position: relative;
}

/* 左栏解决方案背景 */
.solutions-column {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
  position: relative;
  overflow: hidden;
}

.solutions-column::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(26, 115, 232, 0.1) 0%, transparent 70%);
  z-index: -1;
}

/* 中栏轮播图背景增强 */
.slider-column {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.slider-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
  z-index: 2;
}

/* 右栏信任背书背景 */
.trust-column {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
  position: relative;
}

.trust-column::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 1px dashed rgba(26, 115, 232, 0.2);
  border-radius: 6px;
  pointer-events: none;
}

/* 底部快捷入口背景 */
.quick-actions-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
  position: relative;
}

.quick-actions-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right, var(--primary-color), var(--accent-color));
  border-radius: 12px 12px 0 0;
}

/* 商品卡片背景增强 */
.product-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(2px);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

/* 解决方案卡片背景 */
.solution-item {
  background-blend-mode: overlay;
}

/* 信任徽章背景 */
.badge-item {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(2px);
}

/* 服务热线背景增强 */
.service-hotline {
  background: linear-gradient(135deg, rgba(232, 240, 254, 0.9) 0%, rgba(255, 255, 255, 0.95) 100%);
  backdrop-filter: blur(2px);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .top-products-section,
  .solutions-column,
  .trust-column,
  .quick-actions-section {
    backdrop-filter: none;
    background: white;
  }
  

}

.particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.particle {
  position: absolute;
  background: rgba(26, 115, 232, 0.1);
  border-radius: 50%;
  animation: float 15s infinite linear;
}

@keyframes float {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-100vh) rotate(360deg); }
}