/* =====================================================================
 * redesign-home-value.css
 * 精致视觉升级：① .highlight-block (3 大特性区)  ② .industry-tile (12 行业卡)
 * 设计语言：圆角 12 / hover lift / ::before scaleX / ::after radial glow
 *           过渡 cubic-bezier(0.16, 1, 0.3, 1) 0.4~0.55s
 * ===================================================================== */

/* ============== ① .highlight-block 升级 ============== */
.highlight-block {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-xl);
  padding: var(--sp-12) var(--sp-8);
  margin-bottom: var(--sp-8);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow  0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.highlight-block::before {
  /* 巨型半透明序号水印（顶部右上方） */
  position: absolute;
  top: -20px; right: var(--sp-8);
  font-family: var(--font-mono);
  font-size: 180px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(180deg, rgba(245,158,11,0.18), rgba(245,158,11,0));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  letter-spacing: -0.04em;
  pointer-events: none;
  z-index: -1;
}
.highlight-block::after {
  /* 整区块渐变光晕 */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-xl);
  background: radial-gradient(circle at 20% 0%, rgba(37,99,235,0.06), transparent 60%);
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: -1;
}
.highlight-block:hover::after { opacity: 1; }

/* 各 block 不同序号 + 主色调 */
.highlight-block:nth-of-type(1)::before { content: "01"; }
.highlight-block:nth-of-type(2)::before {
  content: "02";
  right: auto; left: var(--sp-8);
  background: linear-gradient(180deg, rgba(6,182,212,0.18), rgba(6,182,212,0));
  -webkit-background-clip: text; background-clip: text;
}
.highlight-block:nth-of-type(3)::before {
  content: "03";
  background: linear-gradient(180deg, rgba(16,185,129,0.18), rgba(16,185,129,0));
  -webkit-background-clip: text; background-clip: text;
}

/* 强化 eyebrow：渐变胶囊 + 微阴影 */
.highlight-block .highlight-eyebrow {
  background: linear-gradient(135deg, var(--c-accent-500), #fb923c);
  box-shadow: 0 6px 16px rgba(245,158,11,0.25);
  padding: 6px 14px;
  font-size: 11px;
}
.highlight-block:nth-of-type(2) .highlight-eyebrow {
  background: linear-gradient(135deg, var(--c-cyan-400, #06b6d4), #0ea5e9);
  box-shadow: 0 6px 16px rgba(6,182,212,0.25);
}
.highlight-block:nth-of-type(3) .highlight-eyebrow {
  background: linear-gradient(135deg, var(--c-green-500, #10b981), #059669);
  box-shadow: 0 6px 16px rgba(16,185,129,0.25);
}

/* highlight-num KPI 数字突出（如果模板里有用） */
.highlight-block .highlight-num {
  display: inline-block;
  font-size: 56px;
  line-height: 1;
  background: linear-gradient(135deg, var(--c-primary-500), var(--c-accent-500));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  margin: var(--sp-2) 0 var(--sp-3);
  text-shadow: 0 2px 12px rgba(37,99,235,0.12);
}

/* highlight-list 项目加 hover 位移 */
.highlight-block .highlight-list li {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s ease;
}
.highlight-block .highlight-list li:hover {
  transform: translateX(6px);
  color: var(--c-text-primary);
}

/* 可视化容器：装饰边框 + 阴影 + 3D 轻倾斜 */
.highlight-block .highlight-visual {
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 20px 50px -20px rgba(15,23,42,0.35),
    0 8px 24px -8px rgba(37,99,235,0.18),
    inset 0 1px 0 rgba(255,255,255,0.06);
  transform: perspective(1400px) rotateY(2deg) rotateX(0.5deg);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.highlight-block.reverse .highlight-visual {
  transform: perspective(1400px) rotateY(-2deg) rotateX(0.5deg);
}
.highlight-block:hover .highlight-visual {
  transform: perspective(1400px) rotateY(0) rotateX(0) translateY(-6px);
  box-shadow:
    0 30px 70px -20px rgba(15,23,42,0.45),
    0 14px 32px -8px rgba(37,99,235,0.28),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

/* 入场动画（配合已有 .reveal） */
.highlight-block.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.highlight-block.reveal.is-visible,
.highlight-block.reveal.in-view,
.highlight-block.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1024px) {
  .highlight-block { padding: var(--sp-8) var(--sp-4); }
  .highlight-block::before { font-size: 120px; top: -10px; right: var(--sp-4); }
  .highlight-block:nth-of-type(2)::before { left: var(--sp-4); right: auto; }
  .highlight-block .highlight-visual,
  .highlight-block.reverse .highlight-visual { transform: none; }
}

/* ============== ② .industry-tile 升级 ============== */
.industry-grid { gap: var(--sp-5); }

.industry-tile {
  --tile-color: var(--c-primary-500);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: var(--sp-6) var(--sp-3) var(--sp-5);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.45s ease;
}
/* 顶部色条 hover 显示 */
.industry-tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--tile-color);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}
/* 渐变光晕 ::after */
.industry-tile::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--tile-color) 14%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 0;
}
.industry-tile > * { position: relative; z-index: 1; }

.industry-tile:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--tile-color) 45%, transparent);
  box-shadow:
    0 24px 48px -20px color-mix(in srgb, var(--tile-color) 35%, transparent),
    0 8px 20px -8px rgba(15,23,42,0.12);
}
.industry-tile:hover::before { transform: scaleX(1); }
.industry-tile:hover::after  { opacity: 1; }

/* icon 圆 + 渐变填充 + hover 旋转放大 */
.industry-tile .industry-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tile-color) 10%, var(--c-white));
  border: 1.5px solid color-mix(in srgb, var(--tile-color) 25%, transparent);
  color: var(--tile-color);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.45s ease, color 0.35s ease, border-color 0.35s ease,
              box-shadow 0.45s ease;
}
.industry-tile:hover .industry-icon {
  background: linear-gradient(135deg, var(--tile-color), color-mix(in srgb, var(--tile-color) 70%, #000));
  border-color: var(--tile-color);
  color: var(--c-white);
  transform: scale(1.15) rotate(-6deg);
  box-shadow: 0 12px 24px -8px color-mix(in srgb, var(--tile-color) 45%, transparent);
}

.industry-tile .industry-name {
  font-size: var(--fs-base);
  font-weight: 700;
  margin-top: var(--sp-1);
  letter-spacing: 0.01em;
}
/* 客户数：精致字号 + 单位小字 */
.industry-tile .industry-count {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--tile-color);
  margin-top: 6px;
  letter-spacing: 0.02em;
}
.industry-tile .industry-count::after {
  /* 不动 HTML：覆盖原有 "家" 字号 —— 利用浏览器把 "家" 作为整体的文字一部分。
     无法精准缩小已有 "家"，故用伪元素辅助渲染细微下划线作精致感 */
  content: "";
  display: block;
  width: 24px; height: 2px; margin: 6px auto 0;
  background: linear-gradient(90deg, transparent, var(--tile-color), transparent);
  opacity: 0.5;
}

/* 12 行业色调 */
.industry-tile:nth-child(1)  { --tile-color: #06b6d4; }
.industry-tile:nth-child(2)  { --tile-color: #2563eb; }
.industry-tile:nth-child(3)  { --tile-color: #ef4444; }
.industry-tile:nth-child(4)  { --tile-color: #8b5cf6; }
.industry-tile:nth-child(5)  { --tile-color: #f59e0b; }
.industry-tile:nth-child(6)  { --tile-color: #475569; }
.industry-tile:nth-child(7)  { --tile-color: #ec4899; }
.industry-tile:nth-child(8)  { --tile-color: #92400e; }
.industry-tile:nth-child(9)  { --tile-color: #64748b; }
.industry-tile:nth-child(10) { --tile-color: #0d9488; }
.industry-tile:nth-child(11) { --tile-color: #059669; }
.industry-tile:nth-child(12) { --tile-color: #7c3aed; }

/* 入场动画 */
.industry-grid.reveal .industry-tile {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.industry-grid.reveal.is-visible .industry-tile,
.industry-grid.reveal.in-view .industry-tile,
.industry-grid.reveal.visible .industry-tile {
  opacity: 1;
  transform: translateY(0);
}
.industry-grid.reveal.is-visible .industry-tile:nth-child(n) { transition-delay: calc((var(--i, 0)) * 40ms); }
.industry-grid .industry-tile:nth-child(1)  { --i: 0;  }
.industry-grid .industry-tile:nth-child(2)  { --i: 1;  }
.industry-grid .industry-tile:nth-child(3)  { --i: 2;  }
.industry-grid .industry-tile:nth-child(4)  { --i: 3;  }
.industry-grid .industry-tile:nth-child(5)  { --i: 4;  }
.industry-grid .industry-tile:nth-child(6)  { --i: 5;  }
.industry-grid .industry-tile:nth-child(7)  { --i: 6;  }
.industry-grid .industry-tile:nth-child(8)  { --i: 7;  }
.industry-grid .industry-tile:nth-child(9)  { --i: 8;  }
.industry-grid .industry-tile:nth-child(10) { --i: 9;  }
.industry-grid .industry-tile:nth-child(11) { --i: 10; }
.industry-grid .industry-tile:nth-child(12) { --i: 11; }