/* index.css - 首页Banner轮播专属样式 */
body{
  overflow: auto;
}

.banner {
  width: 100%;
  height: 100vh; /* 全屏高度 */
  position: relative;
  overflow: hidden;
}

/* 轮播容器 */
.banner-slider {
  width: 100%;
  height: 100%;
}

/* 轮播项 */
.banner-slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.banner-slide.active {
  opacity: 1;
  z-index: 10;
}

/* Banner文字内容 */
.banner-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--neutral-white);
  z-index: 20;
}

.banner-content p {
  font-size: var(--font-xxl);
  letter-spacing: 2px;
  margin-bottom: var(--spacing-md);
  opacity: 0.9;
}

.banner-content h1 {
  font-size: 90px;
  font-weight: 700;
  color: var(--accent-color);
  letter-spacing: 4px;
}

/* 轮播控制箭头 */
.banner-controls {
  position: absolute;
  bottom: 50px;
  right: 50px;
  display: flex;
  gap: var(--spacing-md);
  z-index: 30;
}

.banner-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background-color: var(--neutral-white);
  color: var(--accent-color);
  font-size: var(--font-xl);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
}

/* 箭头hover样式：白箭头红背景 */
.banner-btn:hover {
  background-color: var(--accent-color);
  color: var(--neutral-white);
  transform: scale(1.05);
}

/* 响应式适配（手机版） */
@media (max-width: 768px) {
  .banner {
    height: auto;
  }

  .banner-content p {
    font-size: var(--font-sm);
  }

  .banner-content h1 {
    font-size: var(--font-xl);
  }

  .banner-controls {
    bottom: 30px;
    right: 30px;
  }

  .banner-btn {
    width: 40px;
    height: 40px;
    font-size: var(--font-lg);
  }
}

/* 视频容器 */
.banner-video-container {
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 0;
}

.banner-video-container.active {
  opacity: 1;
  z-index: 15; /* 高于轮播图的z-index:10，确保视频在最上层 */
  position: absolute; /* 新增：和轮播图同层级，覆盖显示 */
  top: 0;
  left: 0;
}

/* 视频样式 - 核心修改部分 */
.banner-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 关键属性：保持视频比例并覆盖整个容器，类似background-size: cover */
  object-position: center; /* 视频居中显示 */
}

/* ========== 企业优势区域样式【修改后】 ========== */
.company-advantage {
  /* 1.背景改为纯白 + 底部城市剪影背景，图片放到 /static/image/city-outline.png */
  background-color: #ffffff;
  background-image: url('/static/image/city-outline.png');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
  padding: var(--spacing-xxl) 0 120px;
  color: #333333;
}

/* 上半部分布局 */
.advantage-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

/* 大LOGO样式，取消透明度 */
.advantage-logo {
  flex: 1;
  max-width: 38%;
  padding: 100px;
}
.advantage-logo img {
  width: 75%;
  height: auto;
  object-fit: contain;
  opacity: 1;
}

/* 右侧文字组 */
.advantage-text-group {
  flex: 1;
  max-width: 55%;
  text-align: right;
}
.advantage-desc {
  font-size: var(--font-lg);
  line-height: 1.8;
  margin-bottom: var(--spacing-lg);
  color: #444444;
  opacity: 1;
}

/* Learn More按钮：方形直角，红到深蓝渐变 */
.btn-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, #C8102E 0%, #004B9B 100%);
  color: var(--neutral-white);
  padding: 10px 22px;
  border-radius: 0; /* 方形，无圆角 */
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}
/* 箭头，移除白色圆形外圈 */
.btn-learn-more .btn-arrow {
  font-size: 16px;
  transition: transform 0.3s ease;
}
.btn-learn-more:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-learn-more:hover .btn-arrow {
  transform: translateX(5px);
}

/* -------- 下半部分5个优势模块 -------- */
.advantage-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}
/* 前3个 item 权重更小，总和 0.8*3 = 2.4 */
.advantage-item:nth-child(1),
.advantage-item:nth-child(2),
.advantage-item:nth-child(3) {
  flex: 0.8;
}
/* 后2个 item权重更大，总和1.3*2 =2.6，满足左三总区域 < 右二 */
.advantage-item:nth-child(4),
.advantage-item:nth-child(5) {
  flex: 1.3;
}

.advantage-item {
  text-align: center;
  padding: 0 8px;
}

/* 放大图标尺寸 */
.advantage-icon {
  width: 52px;
  height: 52px;
  margin:0 auto 16px;
}
.advantage-icon img {
  width:100%;
  height:100%;
  object-fit: contain;
}

/* 优势标题放大 */
.advantage-title {
  color: var(--accent-color);
  font-size: 22px;
  font-weight:700;
  margin-bottom: 6px;
}
.advantage-subtext {
  color:#333333;
  font-size: 14px;
  line-height:1.6;
}

/* ========= 城市剪影预留占位样式 ========= */
.city-silhouette-placeholder {
  width: 100%;
  min-height: 300px; /* 预留高度，后期可按需调大/调小 */
  /* 后期替换图片，打开下面注释即可使用背景图 */
  
  background-image: url('/static/image/city.png');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
 
}


/* ========== 响应式设计（手机版） ========== */
@media (max-width: 992px) {
  /* 上半部分改为上下布局 */
  .advantage-top {
    flex-direction: column;
    text-align: center;
  }
  .advantage-logo {
    max-width: 80%;
    margin-bottom: var(--spacing-xl);
  }
  .advantage-text-group {
    max-width: 100%;
    text-align: center;
  }

  /* 下半部分改为2列布局 */
  .advantage-bottom {
    flex-wrap: wrap;
  }
  .advantage-item {
    flex: 0 0 48%;
    margin-bottom: var(--spacing-xl);
  }
}

@media (max-width: 768px) {
  .advantage-desc {
    font-size: var(--font-base);
  }
  /* 下半部分改为1列布局 */
  .advantage-bottom {
    flex-direction: column;
  }
  .advantage-item {
    flex: 0 0 100%;
  }
}

/* ========== SOLUTIONS区域样式【修改后】 ========== */
.solutions-section {
  padding: var(--spacing-xxl) 0;
  background-color: var(--neutral-white);
  /* 删除原来height:100vh强制全屏高度 */
}

/* 标题+图片：左右弹性布局 */
.solutions-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: var(--spacing-xl);
}

/* 左侧标题容器 */
.solutions-title-wrap {
  flex: 0 0 34%;
}
.solutions-title-wrap h2 {
  font-size: 4.8rem;
  font-weight: lighter;
  color: #000000;
  text-transform: none; /* 取消全部大写，匹配原图Solutions */
  line-height: 1.1;
  margin:0;
}

/* 右侧主图容器，缩小图片，靠右 */
.solutions-image {
  flex: 0 0 62%;
  line-height: 0;
}
.solutions-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain; /* 完整显示图片，不裁剪不变形 */
}

/* 按钮组：增加gap实现按钮间隔 */
.solutions-buttons {
  display: flex;
  width: 100%;
  gap:14px; /* 按钮之间空隙 */
}

/* 基础按钮样式 */
.solutions-btn {
  flex: 1;
  color: var(--neutral-white);
  border: none;
  padding: var(--spacing-lg) var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  border-radius: 10px; /* 按钮圆角 */
}

/* 4个按钮渐变背景，匹配设计图 */
.solutions-btn.btn-red {
  background: linear-gradient(90deg, #E61A27, #C8102E);
}
.solutions-btn.btn-gold {
  background: linear-gradient(90deg, #FFC82F, #F2A620);
}
.solutions-btn.btn-purple {
  background: linear-gradient(90deg, #7A2482, #592078);
}
.solutions-btn.btn-blue {
  background: linear-gradient(90deg, #0050A2, #004088);
}

/* hover效果 */
.solutions-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

/* 按钮内白色圆形图标容器 */
.solutions-btn-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--neutral-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.solutions-btn-icon img {
  width: 60%;
  height: auto;
}

.solutions-btn-text {
  font-size: var(--font-base);
  font-weight: 500;
}


/* 平板 */
@media (max-width: 992px) {
  .solutions-header h2 {
    font-size: var(--font-xxl);
  }
  .solutions-buttons {
    flex-wrap: wrap;
  }
  .solutions-btn {
    flex: 0 0 50%;
    margin-bottom: 1px;
  }
}
/* 手机 */
@media (max-width: 768px) {
  .solutions-header h2 {
    font-size: var(--font-xl);
  }
  .solutions-image {
    height: 40vh;
  }
  .solutions-btn {
    flex: 0 0 100%;
    justify-content: flex-start;
    padding-left: var(--spacing-xl);
  }
  .solutions-btn-icon {
    width: 32px;
    height: 32px;
  }
}

/* ========== PROJECTS｜固定100vh高度版本 ========== */
.projects-section {
  height: 100vh; /* 严格固定为一屏视口高度 */
  background-color: #ffffff;
  
  /* 重点！宽度铺满，背景地图仅占用上半部分64vh高度；64vh往下无地图，纯白 */
  position: relative;
}

/* 内部容器占满section高度，使用flex垂直排布 */
.projects-section .container {
  background-repeat: no-repeat;
  background-position: center 25%;
  background-image: url("/static/image/world‑map‑outline.png");  
  background-size: 110% 70vh;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2; /* 全部内容浮在背景地图之上 */
}

/* 顶部分割线 */
.section-divider {
  width: 100%;
  height: 1px;
  background-color: #dddddd;
  margin-top: 40px;
  margin-bottom: 48px;
}

/* 标题组：margin-top控制标题整体向下移动 */
.projects-head-group {
  text-align: center;
  margin-top: 200px; /* 增大数值，标题继续往下移 */
  margin-bottom: auto; /* 自动弹性留白，把国旗组向下推 */
}

/* PROJECTS圆角渐变胶囊标签 */
.projects-tag {
  display: inline-block;
  background: linear-gradient(90deg, #C8102E 0%, #004B9B 100%);
  color: #ffffff;
  font-size: 22px;
  font-weight: 600;
  padding: 6px 32px;
  border-radius: 9999px;
  margin-bottom: 16px;
}

/* 主标题两行 */
.projects-main-title {
  font-size: 4.8rem;
  font-weight: normal;
  color: #000000;
  text-transform: none;
  line-height: 1.1;
  margin: 0;
}

/* 国旗行，靠底部放置，处于背景图渲染区域之外 */
.flags-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

/* 单个国旗项 */
.flag-item {
  flex: 1;
  min-width: 100px;
  text-align: center;
  text-decoration: none;
  color: #222222;
}

/* 国旗图片，图片自带圆形+倒影效果 */
.flag-item img {
  width:74px;
  height: auto;
  display:block;
  margin:0 auto;
}

/* 国家名称覆盖倒影 */
.country-name {
  display: block;
  margin-top: 6px;
  font-size: 14px;
}

.flag-item:hover img {
  transform: translateY(-3px);
  transition: transform 0.25s ease;
}

/* =========移动端适配========= */
@media (max-width:768px) {
  .projects-section {
    height: 100vh;
    background-size: 140% 60vh;
  }
  .section-divider {
    margin-top: 24px;
    margin-bottom:32px;
  }
  .flags-row {
    gap:16px;
    margin-bottom: 40px;
  }
  .flag-item {
    flex: 0 0 calc(33.33% - 10px);
  }
  .flag-item img {
    width:62px;
  }
}