/* ===== 基础重置 ===== */
*{margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft YaHei",sans-serif;}
html{scroll-behavior:smooth;}

/* 🚀 整个页面背景图 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  /* 把背景相关的属性从 body 移走 */
  position: relative;
  min-height: 100vh;
}

/* 用伪元素实现固定背景，兼容 iPhone Safari */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("/images/background.png") no-repeat center center;
  background-size: cover;   /* 始终铺满屏幕 */
  z-index: -1;              /* 保证背景在内容后面 */
}


.container{width:90%;max-width:1200px;margin:0 auto;}

/* ===== header 渐变 + 立体效果（去掉 mix-blend-mode） ===== */
.header{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  padding:16px 0;transition:all .32s cubic-bezier(.2,.9,.2,1);
  background:linear-gradient(135deg,#FFB400 0%,#FF8A00 50%,#E55C00 100%);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.header::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:100%;
  /* 用半透明高光层代替混合模式实现立体感 */
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02));
  pointer-events:none;
}
.header.shrink{padding:8px 0;transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.18);}

.nav-container{display:flex;justify-content:space-between;align-items:center;position:relative;}
.head-logo {
  display: flex;
  align-items: center; /* 图片和文字垂直居中 */
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .5px;
}

.head-logo img {
  height: 40px;  /* 控制 logo 图片高度 */
  width: auto;
  margin-right: 10px; /* 图片和文字的间距 */
}
/* 不使用 flex gap，改为子元素 margin */
.nav{display:flex;}
.nav a{color:#fff;text-decoration:none;font-weight:600;transition:color .2s,transform .2s;padding:6px 8px;border-radius:6px;margin-left:20px;}
.nav a:first-child{margin-left:0;}
.nav a:hover{color:#2b2b2b;background:rgba(255,255,255,.12);transform:translateY(-2px);}
.menu-toggle{display:none;font-size:26px;color:#fff;background:transparent;border:none;cursor:pointer;}

/* ===== Banner GIF 背景 ===== */
.banner {
  position: relative;
  height: 100vh; /* 全屏 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background-color: #000; /* 视频没加载前用黑底 */
}

/* 背景视频 */
.banner-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 🚀 关键：等比放大填满，不变形 */
  z-index: 0;
}

/* 半透明遮罩，让文字更清晰 */
.banner-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.1);
  z-index: 1;
}

/* 文字内容层 */
.banner-content {
  position: absolute;
  top: 50%;                /* 距离屏幕顶部 75% */
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  padding: 20px;
   max-width: 1400px;  /* 🚀 把原来的 1000px 改宽一些 */
  width: 95%;         /* 保证在小屏幕也能自适应，左右边距更窄 */
}

.banner h1 {
  font-size: 52px;
  margin-bottom: 18px;
  text-shadow: 0 6px 18px rgba(0,0,0,.6);
}

.banner p {
  font-size: 20px;
  margin-bottom: 26px;
  text-shadow: 0 4px 12px rgba(0,0,0,.6);
}

/* CTA */
.btn{
  background:#FF4C00;color:#fff;padding:12px 30px;border-radius:8px;font-weight:700;text-decoration:none;display:inline-block;
  transition:transform .22s ease,box-shadow .22s;box-shadow:0 8px 24px rgba(255,76,0,.18);
  /* 🚀 新增：白色边框 */
  border: 2px solid #fff;
}
.btn:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 14px 36px rgba(215,56,0,.22);}

/* ===== 共用 section ===== */
.section{padding:50px 0;}
.section-title{font-size:34px;margin-bottom:36px;text-align:center;color:#2b2b2b;opacity:0;transform:translateY(30px);transition:all .6s cubic-bezier(.2,.9,.2,1);}
.section-title.show{opacity:1;transform:translateY(0);}

/* ===== 关于我们 ===== */
.about {
  background: rgba(255, 247, 230, 0.2);  /* 原来 #FFF7E6 */
}

.about p {
  line-height: 1.8;
  margin-bottom: 18px;
  text-indent: 2em;
}

.image-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 每行三张 */
  gap: 15px;
  margin: 30px auto;
  padding: 0 40px;
  max-width: 1200px;
  box-sizing: border-box;
}

.image-gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);

  /* 初始状态：透明+下移 */
  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.6s ease, opacity 0.6s ease;
}

/* show 时触发动画 */
.image-gallery.show img {
  opacity: 1;
  transform: translateY(0);
}

/* 依次延迟出现 */
.image-gallery.show img:nth-child(1) { transition-delay: 0.2s; }
.image-gallery.show img:nth-child(2) { transition-delay: 0.4s; }
.image-gallery.show img:nth-child(3) { transition-delay: 0.6s; }

/* 悬停放大 */
.image-gallery img:hover {
  transform: scale(1.05);
}

/* ===== 服务卡片（背景图+阴影；去掉 inset） ===== */
.services {
  background: rgba(255, 255, 255, 0.3);  /* 原来 #FFFFFF */
}/* 去 gap：用负外边距容器 + 子项 margin 实现 */
.service-cards{display:flex;justify-content:center;flex-wrap:wrap;margin:-12px;}
.card {
  width: 320px;
  min-height: 220px;
  border-radius: 14px;
  padding: 24px;
  color: #fff;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(60, 60, 60, 0.3), rgba(40, 40, 40, 0.3)); /* 灰色背景 */
  transition: transform .36s cubic-bezier(.2,.9,.2,1), box-shadow .36s;
  opacity: 0;
  transform: translateY(40px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 12px;
}

.card::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.32));
  pointer-events: none;
}

.card h3 {
  margin-bottom: 10px;
  color: #FFF5E6;
  font-size: 20px;
  z-index: 2;
}

.card p {
  color: #FFF8E6;
  z-index: 2;
}

/* 卡片出现时的动画状态 */
.card.show {
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 18px 50px rgba(0,0,0,.32);
}

.card-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列 */
  gap: 20px;               /* 图片间距 */
  margin-bottom: 20px;
  padding: 0 4px;          /* 调整gallery左右边距，和card对齐 */
  justify-items: center;   /* 图片水平居中 */
  z-index: 2;
}

/* 初始状态：隐藏 */
.card-gallery img {
  width: 35px;   
  height: 35px;
  object-fit: contain; 
  border-radius: 6px;
  background: transparent;

  opacity: 0;
  transform: translateY(20px) scale(0.95);
}

/* 卡片出现时才触发动画 */
.card.show .card-gallery img {
  animation: fadeInUp 0.6s forwards;
}

/* 图片逐个延迟加载 */
.card.show .card-gallery img:nth-child(1) { animation-delay: 0.1s; }
.card.show .card-gallery img:nth-child(2) { animation-delay: 0.2s; }
.card.show .card-gallery img:nth-child(3) { animation-delay: 0.3s; }
.card.show .card-gallery img:nth-child(4) { animation-delay: 0.4s; }
.card.show .card-gallery img:nth-child(5) { animation-delay: 0.5s; }
.card.show .card-gallery img:nth-child(6) { animation-delay: 0.6s; }
.card.show .card-gallery img:nth-child(7) { animation-delay: 0.7s; }
.card.show .card-gallery img:nth-child(8) { animation-delay: 0.8s; }

/* 动画关键帧 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 悬停时放大效果 */
.card-gallery img:hover {
  transform: scale(1.15);
  transition: transform 0.3s ease;
}

/* ===== 案例改伙伴（半尺寸 + 背景图 + 顺序动画；不使用 gap） ===== */
.cases {
  background: rgba(255, 247, 230, 0.2);
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 默认两列 */
  gap: 6px;
  margin: 0 auto;
  max-width: 1000px;
}

.case-card {
  height: 60px; /* PC 端大一点 */
  background: rgba(128,128,128,0.5);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  color: #fff;

  /* 初始状态：透明，下移 */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease, background 0.2s ease;
}

/* 出现动画 */
.case-card.show {
  opacity: 1;
  transform: translateY(0);
}

/* hover 效果 */
.case-card:hover {
  transform: translateY(-3px);
  background: rgba(100, 100, 100, 0.7);
}

/* 手机端仍然保持两列 8 行 */
@media(max-width:768px){
  .case-grid {
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 10px; /* 增加间距，避免挤在一起 */
  }

  .case-card {
    height: 38px;   /* 原来40px，改成38px */
    font-size: 14px;
  }
}


/* ===== 合作伙伴（立体+动画；不使用 gap） ===== */
.partners{background: rgba(255, 255, 255, 0.2);  /* 原来 #FFFFFF */}
.partner-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin:-9px;padding-top:8px;}
.logo-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 14px;
  align-items: start;
}

/* 单个logo卡片（网格子项） */
.logo{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
.logo.show{ opacity: 1; transform: none; }
.logo-item{
  width: 100%;
  height: 80px;               /* 需要固定高就用这个 */
  /* 或者用比例：aspect-ratio: 2 / 1;  二选一 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
}

/* 文字在下方、居中 */
.logo-text{
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.2;
  color: #222;
  text-align: center;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 可选：移动端列数控制 */
@media (max-width: 768px){
  .logo-grid{
    grid-template-columns: repeat(2, minmax(135px, 1fr));
    gap: 10px;
  }
}
.logo-note {
  margin-top: 16px;
  text-align: center;   /* 横向居中 */
  font-size: 15px;
  color: #fff;          /* 白色字体 */
}

.logo-note a {
  color: #fff;          /* 链接文字白色 */
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.logo-note a:hover {
  color: #ffcc00;       /* 悬停时变为亮黄色，便于突出 */
}

/* ===== 联系我们 ===== */
.contact{background: rgba(255, 247, 230, 0.3);  /* 原来 #FFF7E6 */}
.contact form{max-width:600px;margin:0 auto;display:flex;flex-direction:column;}
/* 不用 gap，统一做竖向间距 */
.contact form > * + *{margin-top:16px;}
.contact input,.contact textarea{padding:14px;border:1px solid rgba(0,0,0,.12);border-radius:8px;font-size:15px;resize:vertical;}
.contact-extra {
  background: rgba(0, 0, 0, 0.5); /* 黑底，50%透明 */
  color: #fff;                    /* 白色字体 */
  text-align: center;             /* 居中显示 */
  padding: 10px 0;
  margin-bottom: 20px;            /* 和表单留间距 */
  border-radius: 6px;             /* 可选：圆角效果 */
  font-weight: 600;
}
/* ripple */
.ripple{position:relative;overflow:hidden;}
.ripple-effect{position:absolute;border-radius:50%;transform:scale(0);animation:rippleAnim .6s linear;background:rgba(255,255,255,.35);}
@keyframes rippleAnim{to{transform:scale(6);opacity:0;}}

/* ===== 浮动客服按钮 (右下角) ===== */
.floating-support {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1500;
  width: 60px;           /* 按钮宽度 */
  height: 60px;          /* 按钮高度 */
  border-radius: 50%;    /* 圆形按钮 */
  background: url("/images/telegram.png") no-repeat center/60%; /* 🚀 这里放你的图片路径 */
  background-color: #fff;  /* 背景色，避免透明 */
  display: block;
  text-indent: -9999px;  /* 隐藏“客服”文字 */
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  transition: transform .2s, box-shadow .2s;
}

.floating-support:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}

/* ===== footer ===== */
.footer{background:#FF4C00;color:#fff;text-align:center;padding:20px;font-size:14px;}

/* ===== 动画关键帧 ===== */
@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}

/* ===== 响应式 ===== */
@media(max-width:960px){
  .banner h1{font-size:40px;}
  .card{width:100%;}
}
@media(max-width:768px){
  /* 移动端菜单（不使用 gap） */
  .nav{display:none;position:absolute;top:64px;right:16px;background:linear-gradient(180deg,#FF9C2B,#FF7A1A);padding:16px;border-radius:12px;flex-direction:column;}
  .nav a{margin:6px 0;}
  .nav.active{display:flex;}
  .menu-toggle{display:block;}
  .banner{min-height:60vh;}
  /* 移动端把缩放调到 0.7，避免过小 */
  .case-card.show {
    transform: translateY(0) scale(1); /* 去掉 scale(.7)，否则会缩小 */
  }
}