@tailwind base;
@tailwind components;
@tailwind utilities;

 全局基础样式：英文排版优化+强制圆角 
@layer base {
  body {
    @apply font-sans text-dark bg-neutral antialiased leading-relaxed;
    letter-spacing 0.02em;  英文微字间距，提升可读性 
  }
  h1, h2, h3, h4 {
    @apply font-bold text-dark tracking-tight;  英文标题紧排，更精致 
  }
  a {
    @apply no-underline transition-all duration-300;
  }
   全局强制圆角：覆盖所有元素，无直角（图片卡片按钮框） 
  img, button, div, section, article, figure, input, ul, ol {
    @apply rounded-lg !important;
  }
   列表样式优化，适配工业类内容 
  ul li {
    @apply list-disc ml-6 my-1;
  }
}

 自定义组件：Bento Grid核心样式（服务页所有板块复用） 
@layer components {
  .bento-grid {
    @apply grid gap-6 px-4 py-8 mx-auto max-w-7xl;
     响应式网格：PC3列  平板2列  手机1列 
    @apply lggrid-cols-3 mdgrid-cols-2 smgrid-cols-1;
  }
  .bento-card {
    @apply relative p-6 bg-white shadow-md hovershadow-xl transition-all duration-500;
    @apply hoverscale-[1.02] cursor-default;  鼠标浮动缩放+阴影加深 
    min-height 220px;  保证Bento格子高度统一，视觉协调 
  }
   3种高亮色独立透明度渐变（不互相混色，科技感） 
  .gradient-primary {
    @apply bg-gradient-to-r from-primary80 to-primary40;
  }
  .gradient-secondary {
    @apply bg-gradient-to-b from-secondary80 to-secondary40;
  }
  .gradient-tertiary {
    @apply bg-gradient-to-l from-tertiary80 to-tertiary40;
  }
   板块标题样式：带图标+渐变底纹，适配服务页所有大标题 
  .section-title {
    @apply flex items-center gap-3 text-2xl lgtext-3xl font-bold mb-6 pb-2 border-b border-primary30;
  }
   主按钮样式：科技感+圆角+hover交互 
  .btn-primary {
    @apply gradient-primary text-white py-3 px-6 rounded-xl font-medium;
    @apply hoverfrom-primary90 hoverto-primary50 hovershadow-lg transition-all duration-300;
  }
   列表项样式：适配质量控制材料说明等带项目的内容 
  .list-item {
    @apply flex items-center gap-2 my-2;
  }
   零件图片样式：自适应+圆角+hover阴影 
  .part-img {
    @apply w-full h-48 object-cover rounded-lg shadow-sm hovershadow-md transition-all duration-300;
  }
   风险控制认证小卡片网格：适配服务页认证板块 
  .risk-control {
    @apply grid gap-4 px-4 py-4 mx-auto max-w-7xl lggrid-cols-6 mdgrid-cols-3 smgrid-cols-2;
  }
  .cert-item {
    @apply p-3 bg-white shadow-sm hovershadow-md rounded-lg text-center transition-all duration-300;
    @apply hoverscale-[1.05];  认证项hover小缩放 
  }
}

 页面板块专属样式：匹配服务页HTML结构，无需修改 
@layer utilities {
   核心加工能力板块：科技蓝浅渐变 
  .core-capabilities .bento-card {
    @apply gradient-primary10 hovergradient-primary20;
  }
   典型加工零件板块：浅青浅渐变 
  .typical-parts .bento-card {
    @apply gradient-secondary10 hovergradient-secondary20;
  }
   质量控制工作流板块：淡紫浅渐变 
  .quality-control .bento-card {
    @apply gradient-tertiary10 hovertertiary20;
  }
   材料&后处理板块：双列适配 
  .materials-process {
    @apply bento-grid mdgrid-cols-2 smgrid-cols-1;
  }
   服务领域板块：基础hover效果 
  .service-fields .bento-card {
    @apply hoverbg-white shadow-lg;
  }
}

 移动端平板端适配：针对服务页做专属尺寸优化 
@media (max-width 640px) {
  .bento-card {
    min-height 180px;
    @apply p-4;  减小移动端内边距，保证显示 
  }
  .section-title {
    @apply text-xl;  移动端标题缩小 
  }
  .part-img {
    @apply h-36;  移动端图片高度适配 
  }
  .risk-control {
    @apply gap-3;  移动端认证板块间距缩小 
  }
  .cert-item {
    @apply p-2 text-sm;  移动端认证项文字缩小 
  }
}

 平板端适配：微调网格间距 
@media (min-width 641px) and (max-width 1024px) {
  .bento-grid {
    @apply gap-4;
  }
  .bento-card {
    min-height 200px;
  }
}