:root {
      --primary-color: hsla(210, 80%, 40%, 0.9);
    }

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

    body {
      font-family: 'Segoe UI', system-ui;
      background: linear-gradient(120deg, hsla(25, 50%, 30%, 0.35), hsla(210, 70%, 25%, 0.4));
      color: rgba(255, 255, 255, 0.85);
      transition: background 0.5s ease;
    }

    nav {
      flex-wrap: wrap;
      /* 允许换行 */
      position: fixed;
      width: 100%;
      padding: 1.2rem 8%;
      background: hsla(0, 0%, 100%, 0.9);
      backdrop-filter: blur(10px);
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 1000;
      transition: all 0.3s;
    }

    .company-name {
      width: 100%;
      /* 强制独占整行 */
      font-size: 1.8rem;
      font-weight: 700;
      background: linear-gradient(45deg, #2c3e50, #3498db);
      -webkit-background-clip: text;
      color: transparent;
    }

    .nav-links {
      margin-left: auto;
      /* 右对齐 */
      display: flex;
      gap: 1.5rem;
      list-style: none;
    }

    .nav-links a {
      text-decoration: none;
      color: #969696;
      font-weight: 500;
      transition: color 0.3s;
    }

    .nav-links a:hover {
      color: var(--primary-color);
    }

    .scrolling-images {
      height: 100vh;
      width: 100vw;
      overflow: hidden;
    }

    .image-track {
      display: flex;
      height: 100vh;
      animation: scroll 40s linear infinite;
    }

    .image-container {
      flex: 0 0 25vw;
      /* 每图占25%视口宽度 */
      height: 100vh;
      position: relative;
    }

    .image-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* 保持比例填充容器 */
      filter: grayscale(0.3) brightness(0.7);
    }

    /* 精确动画计算 */
    @keyframes scroll {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }

      /* 移动总宽度的一半 */
    }

    .hero {
      height: 100vh;
      position: relative;
      overflow: hidden;
    }

    /* 图片容器 */
    .hero-media {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    /* 文字容器 */
    .hero-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      text-align: center;
      width: 90%;
      max-width: 1200px;
      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg,
          rgba(0, 0, 0, 0.6) 0%,
          rgba(0, 0, 0, 0.3) 100%);
      z-index: 1;
    }

    .hero-heading {
      text-align: center;
      margin-bottom: 4rem;
      /* 标题与图片间距 */
      z-index: 1;
      /* 确保标题在图片上层 */
      max-width: 800px;
    }

    .hero h1 {
      font-size: 4.5rem;
      margin-bottom: 1.5rem;
      line-height: 1.1;
      color: rgba(255, 255, 255, 0.95);
    }

    .hero p {
      font-size: 1.8rem;
      color: rgba(255, 255, 255, 0.85);
      max-width: 800px;
      margin: 0 auto;
    }

    .section {
      padding: 5rem 8%;
    }

    .section h2 {
      font-size: 2.5rem;
      margin: 2rem 0;
      /* 统一上下边距 */
      text-align: center;
      position: relative;
      padding-bottom: 1rem;
      /* 为装饰线留空间 */
    }

    .card {
      padding: 1.5rem;
      /* 基础内边距 */
      /* 基础样式修改 */
      background: hsla(220, 20%, 20%, 0.7);
      /* 透明度增加到0.7 */
      backdrop-filter: blur(12px) saturate(160%);
      /* 模糊度增强并增加饱和度 */
      -webkit-backdrop-filter: blur(12px) saturate(160%);
      /* Safari 兼容 */
      border-radius: 8px;
      /* 圆角稍大于6px以获得更柔和的曲线 */
      border: 1px solid hsla(210, 80%, 40%, 0.2);
      /* 边框透明度调整 */

      /* 新增玻璃质感效果 */
      position: relative;
      overflow: hidden;
      /* 确保伪元素不溢出圆角 */
    }

    /* 玻璃质感伪元素 */
    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg,
          rgba(255, 255, 255, 0.08) 0%,
          rgba(255, 255, 255, 0.01) 100%);
      z-index: -1;
      /* 保持在背景层 */
    }

    /* 悬停状态优化 */
    .card:hover {
      animation: float 3s ease-in-out infinite;
      background: hsla(220, 20%, 20%, 0.75);
      /* 悬停时增加透明度 */
      box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.25),
        /* 阴影加深 */
        0 4px 16px rgba(255, 255, 255, 0.1) inset;
    }


    .card h3 {
      margin-bottom: 1rem;
      /* 从0.5rem增加到1rem */
      font-size: 1.4rem;
      /* 适当放大标题 */
    }

    .card ul {
      margin-top: 1.2rem;
      /* 从1rem增加到1.2rem */
      padding-left: 1.5rem;
      /* 从1.2rem增加到1.5rem */
      list-style-type: square;
      /* 添加列表符号 */
    }

    .product-grid {
      display: grid;
      /* 改用grid布局 */
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      /* 自动适应列数 */
      gap: 1.2rem;
      /* 固定间距 */
      justify-content: center;
      /* 集中对齐 */
      padding: 0 8%;
      max-width: 1300px;
      /* 新增容器最大宽度 */
      margin: 0 auto;
      /* 实现水平居中 */
    }

    /* 移除原有.card的flex相关设置 */
    .product-grid .card {
      width: 100%;
      /* 占满grid单元格 */
      min-width: auto;
      /* 移除旧设置 */
      max-width: none;
      /* 移除旧设置 */
      height: 100%;
      /* 统一高度 */
      display: flex;
      /* 新增内部弹性布局 */
      flex-direction: column;
      /* 垂直排列内容 */
    }

    /* 内容撑满卡片 */
    .card h3,
    .card p,
    .card ul {
      flex: 0 0 auto;
      /* 防止内容挤压 */
    }

    /* 底部留白 */
    .card ul {
      margin-bottom: 0.5rem;
    }

    footer {
      background: #1a1a1a;
      padding: 4rem 8% 3rem;
      /* 上边距加大 */
      text-align: center;
    }

    .company-address {
      width: 100%;
      /* 新增 */
      max-width: 700px;
      /* 保持原有 */
      margin: 0 auto 3rem;
      /* 修改 */
      text-align: center;
      /* 确保存在 */
    }

    .company-address h2 {
      color: #3498db;
      font-size: 1.2rem;
      margin-bottom: 1rem;
    }

    .company-address p {
      color: rgba(255, 255, 255, 0.8);
      margin: 0.3rem 0;
    }