/* ============================================================
   首页 · Our Manufacturing Services
   站点 Tailwind 为预编译模式（产物 styles.css，不支持新增类）。
   模块 HTML 统一使用 Tailwind 工具类；本文件仅补充：
   1. 预编译产物中缺失的工具类（沿用 Tailwind 类名与响应式断点）
   2. Tailwind 无法表达的 CTA 渐变/网格纹理/光晕
   入场动画由页面内 IIFE 通过 Web Animations API 实现，无需 CSS
   ============================================================ */

#manufacturing-services {
  scroll-margin-top: 120px;
}

/* ---------- 预编译 Tailwind 缺失工具类补丁 ---------- */
.h-\[3px\] {
  height: 3px;
}

/* 服务卡 / 案例卡媒体区淡灰底（产品图为透明 webp，白卡白底无层次） */
.bg-\[\#f3f5f8\] {
  background-color: #f3f5f8;
}

.bg-white\/90 {
  background-color: rgb(255 255 255 / .9);
}

.scale-x-0 {
  transform: scaleX(0);
}

.origin-left {
  transform-origin: left center;
}

.group:hover .group-hover\:scale-x-100 {
  transform: scaleX(1);
}

.hover\:-translate-y-1:hover {
  transform: translateY(-.25rem);
}

.hover\:shadow-xl:hover {
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1),
              0 8px 10px -6px rgb(0 0 0 / .1);
}

.text-\[\#2477dd\] {
  color: #2477dd;
}

.bg-\[\#2477dd\] {
  background-color: #2477dd;
}

.group:hover .group-hover\:text-\[\#2477dd\] {
  color: #2477dd;
}

.group:hover .group-hover\:text-\[\#f4aa15\] {
  color: #f4aa15;
}

.group:hover .group-hover\:bg-\[\#f4aa15\] {
  background-color: #f4aa15;
}

.text-\[\#0e2c58\] {
  color: #0e2c58;
}

@media (min-width: 640px) {
  .sm\:mt-0 {
    margin-top: 0;
  }
}

@media (min-width: 1024px) {
  .lg\:mt-6 {
    margin-top: 1.5rem;
  }
}

/* ---------- CTA 卡：深海军蓝渐变 + 细网格纹理 + 右上光晕 ---------- */
.ip-cta-navy {
  background: linear-gradient(155deg, #143d74 0%, #0e2c58 52%, #0a2142 100%);
}

.ip-cta-grid::before,
.ip-cta-grid::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.ip-cta-grid::before {
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 28px 28px;
}

.ip-cta-grid::after {
  top: -70px;
  right: -70px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(36, 119, 221, .45), transparent 70%);
}

.ip-cta-grid > * {
  position: relative;
  z-index: 1;
}