/* ============================================================
   redesign-home-trust.css
   首页信任三联升级：服务亮点 / 客户评价 / 底部 CTA
   设计语言：与 hero / metric-card / product-card 一致
   覆盖：components.css 已有规则（cascade + 节制 !important）
   ============================================================ */

:root {
  --rht-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --rht-dur: 0.45s;
}

/* ===========================================================
   1. 服务亮点 .service-card (4 张)
   =========================================================== */
.service-grid { gap: var(--sp-6); }

.section .service-card {
  border-radius: var(--r-xl);
  padding: var(--sp-10) var(--sp-6) var(--sp-8);
  transition: transform var(--rht-dur) var(--rht-ease),
              box-shadow var(--rht-dur) var(--rht-ease),
              border-color var(--rht-dur) var(--rht-ease);
}
/* 关闭旧的整片渐变 hover 覆盖，回归白底 */
.section .service-card::before {
  background: var(--grad-primary);
  height: 4px; inset: 0 0 auto 0;
  transform: scaleX(0); transform-origin: left center;
  opacity: 1;
  transition: transform var(--rht-dur) var(--rht-ease);
}
.section .service-card:hover::before { transform: scaleX(1); opacity: 1; }
/* 渐变光晕 */
.section .service-card::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(37,99,235,0.10), transparent 60%);
  opacity: 0; transition: opacity var(--rht-dur) var(--rht-ease);
  pointer-events: none; z-index: 0;
}
.section .service-card:hover::after { opacity: 1; }
.section .service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 48px -16px rgba(37,99,235,0.20), var(--shadow-xl);
  border-color: transparent;
}
/* 阻断旧规则把整卡变成蓝色实底 */
.section .service-card:hover .service-icon { background: var(--grad-primary) !important; color: var(--c-white) !important; }
.section .service-card:hover .service-title { color: var(--c-text-primary) !important; }
.section .service-card:hover .service-desc { color: var(--c-text-secondary) !important; }
.section .service-card:hover .service-num { color: var(--c-primary-100) !important; }

/* 每张卡独立强调色（icon 渐变） */
.section .service-card:nth-child(1) .service-icon { background: linear-gradient(135deg,#2563eb,#06b6d4); }
.section .service-card:nth-child(2) .service-icon { background: linear-gradient(135deg,#10b981,#06b6d4); }
.section .service-card:nth-child(3) .service-icon { background: linear-gradient(135deg,#f59e0b,#ec4899); }
.section .service-card:nth-child(4) .service-icon { background: linear-gradient(135deg,#8b5cf6,#ec4899); }

/* icon 升级：渐变背景 + 白色描边图标 + hover 旋转 */
.section .service-card .service-icon {
  width: 56px; height: 56px;
  color: var(--c-white);
  box-shadow: 0 10px 24px -8px rgba(37,99,235,0.45);
  transition: transform 0.6s var(--rht-ease), box-shadow var(--rht-dur) var(--rht-ease);
}
.section .service-card .service-icon svg { width: 28px; height: 28px; stroke: var(--c-white); }
.section .service-card:hover .service-icon { transform: rotate(8deg) scale(1.08); }

/* 数字编号弱化为浮水印 */
.section .service-card .service-num {
  font-size: 56px; line-height: 1; opacity: 0.55;
  top: var(--sp-3); right: var(--sp-4);
}

/* 文案下补一行"承诺数字" — 用 service-desc 高度配合视觉中心 */
.section .service-card .service-title { font-size: var(--fs-xl); }
.section .service-card .service-desc { font-size: var(--fs-sm); }

/* ===========================================================
   2. 客户评价 .testimonial-card (3 张)
   =========================================================== */
.testimonial-grid { gap: var(--sp-6); }

.section .testimonial-card {
  border-radius: var(--r-xl);
  padding: var(--sp-12) var(--sp-7) var(--sp-7);
  overflow: hidden;
  transition: transform var(--rht-dur) var(--rht-ease),
              box-shadow var(--rht-dur) var(--rht-ease),
              border-color var(--rht-dur) var(--rht-ease);
}
/* 顶部品牌色横条 */
.section .testimonial-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--grad-primary);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--rht-dur) var(--rht-ease);
  z-index: 2;
}
.section .testimonial-card:hover::before { transform: scaleX(1); }
/* 渐变光晕 */
.section .testimonial-card::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 90% 0%, rgba(245,158,11,0.10), transparent 55%);
  opacity: 0; transition: opacity var(--rht-dur) var(--rht-ease);
  pointer-events: none;
}
.section .testimonial-card:hover::after { opacity: 1; }
.section .testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px -16px rgba(245,158,11,0.20), var(--shadow-lg);
  border-color: transparent;
}

/* 引号装饰：原 span 文本是直引号 ", 用 ::before 替换为大号花引号 */
.section .testimonial-card .testimonial-quote {
  font-size: 0 !important;  /* 隐藏原始字符 */
  position: absolute; top: 0; left: var(--sp-5);
  width: 80px; height: 96px;
}
.section .testimonial-card .testimonial-quote::before {
  content: "\201C";  /* ❝ */
  font-family: Georgia, "Times New Roman", serif;
  font-size: 140px; line-height: 1;
  color: var(--c-accent-500);
  opacity: 0.18;
  position: absolute; top: -8px; left: 0;
  transition: transform 0.6s var(--rht-ease), opacity var(--rht-dur) var(--rht-ease);
  transform-origin: 30% 70%;
}
.section .testimonial-card:hover .testimonial-quote::before {
  transform: rotate(-8deg) scale(1.08);
  opacity: 0.32;
}

/* 五星 */
.section .testimonial-card .testimonial-stars {
  font-size: 18px; letter-spacing: 2px;
  text-shadow: 0 2px 8px rgba(245,158,11,0.30);
  position: relative; z-index: 1;
}

/* 正文 */
.section .testimonial-card .testimonial-text {
  position: relative; z-index: 1;
  font-size: var(--fs-base); line-height: 1.75;
}

/* 用户区：头像渐变 + 公司 logo 占位（右上角） */
.section .testimonial-card .testimonial-user { position: relative; z-index: 1; }
.section .testimonial-card .testimonial-avatar {
  width: 48px; height: 48px;
  font-size: var(--fs-sm); letter-spacing: 0.5px;
  box-shadow: 0 6px 16px -4px rgba(30,75,160,0.45);
  transition: transform var(--rht-dur) var(--rht-ease);
}
.section .testimonial-card:nth-child(1) .testimonial-avatar { background: linear-gradient(135deg,#2563eb,#06b6d4); }
.section .testimonial-card:nth-child(2) .testimonial-avatar { background: linear-gradient(135deg,#10b981,#0ea5e9); }
.section .testimonial-card:nth-child(3) .testimonial-avatar { background: linear-gradient(135deg,#8b5cf6,#ec4899); }
.section .testimonial-card:hover .testimonial-avatar { transform: scale(1.05) rotate(-3deg); }

/* ===========================================================
   3. 底部 CTA .cta-banner
   =========================================================== */
.section .cta-banner {
  padding: var(--sp-16) var(--sp-12) var(--sp-12);
  border-radius: var(--r-2xl);
  overflow: hidden;
}
/* 大字水印 */
.section .cta-banner::after {
  content: "EXPORT";
  position: absolute;
  right: -2vw; bottom: -3vw;
  font-family: var(--font-mono);
  font-size: clamp(120px, 18vw, 280px);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,0.045);
  line-height: 0.9;
  pointer-events: none;
  white-space: nowrap;
}
/* 渐变光球（左下） */
.section .cta-banner > *:first-child::before {
  content: ""; position: absolute;
  left: -8%; top: 20%;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,158,11,0.30), transparent 65%);
  pointer-events: none; z-index: 0;
  animation: rht-float 9s ease-in-out infinite;
}
@keyframes rht-float {
  0%, 100% { transform: translate(0,0); }
  50%      { transform: translate(40px,-30px); }
}

.section .cta-banner .cta-title { font-size: clamp(2rem, 3.6vw, 3rem); position: relative; z-index: 2; }
.section .cta-banner .cta-sub { position: relative; z-index: 2; }
.section .cta-banner .cta-actions { position: relative; z-index: 2; margin-bottom: var(--sp-10); }

/* 按钮 hover 强化 */
.section .cta-banner .cta-actions .btn { transition: transform var(--rht-dur) var(--rht-ease), box-shadow var(--rht-dur) var(--rht-ease); }
.section .cta-banner .cta-actions .btn:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 18px 36px -10px rgba(245,158,11,0.55); }
.section .cta-banner .cta-actions .btn-glass:hover { box-shadow: 0 18px 36px -10px rgba(255,255,255,0.30); }

/* CTA 底部三联 KPI（用 cta-actions 之后的伪元素无法做多个数字，改用兄弟 — 这里走 ::after 单条信任带） */
.section .cta-banner .cta-sub::after {
  content: "14,088 家在用  ·  30 分钟回访  ·  30 天免费试用";
  display: block;
  margin-top: var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.70);
  position: relative; z-index: 2;
}

/* ===========================================================
   响应式收尾
   =========================================================== */
@media (max-width: 768px) {
  .section .service-card { padding: var(--sp-8) var(--sp-5); }
  .section .testimonial-card { padding: var(--sp-10) var(--sp-5) var(--sp-6); }
  .section .cta-banner { padding: var(--sp-12) var(--sp-6); }
  .section .cta-banner::after { font-size: 96px; right: -10px; bottom: -10px; }
}