/* 文件路径: assets/css/style-v2.css */

:root {
  /* 深色背景阶梯：统一在同一色相轨道上移动，避免“断层” */
  --bg-0: #05040a;      /* 页面最底层 */
  --bg-1: #07061a;      /* 顶部偏蓝紫 */
  --bg-2: #0B0712;      /* 主黑紫 */
  --bg-3: #120b24;      /* 更深紫 */
  --bg-4: #0a1022;      /* 冷蓝黑，用于微弱对比 */
  
  /* 品牌色 */
    /* 品牌/科技强调色（紫 + 冷青） */
  --primary-purple: #8B5BFF;
  --primary-cyan: #4CD7FF;
  --primary-blue: #2481cc;     /* 信任色 */
  --primary-green: #25D366;    /* WhatsApp */
  --cyber-purple: 139, 91, 255;
  --cyber-cyan:   64, 167, 227;
  /* JS 滚动会更新这四个变量：光源位置 */
  --spot-x:  50%;
  --spot-y:  2%;
  --spot2-x: 78%;
  --spot2-y: 18%;
  /* 强度：不想太“亮骚”就调低 */
  --glow-alpha:  0.18;  /* 光晕整体透明度 */
  --grain-alpha: 0.055; /* 噪点强度：防 banding 的关键 */
  --grid-alpha:  0.05;  /* 网格线强度：科技风味精 */
  /* 霓虹边框强度 */
  --neon-alpha:  0.55;

  /* 文本 */
  --text-white: #EAF0FF;
  --text-gray: rgba(234, 240, 255, 0.68);

  /* 玻璃卡片 */
  --card-bg: rgba(15, 10, 28, 0.62);
  --card-border: rgba(255, 255, 255, 0.09);

  /* 光晕阴影：紫 + 青 双光源 */
  --glow-shadow: 0 0 24px rgba(139, 91, 255, 0.18), 0 0 70px rgba(76, 215, 255, 0.10);
  --glow-shadow-strong: 0 0 28px rgba(139, 91, 255, 0.26), 0 0 100px rgba(76, 215, 255, 0.14);

  /* 细边线 */
  --hairline: rgba(255, 255, 255, 0.06);
  --hairline-strong: rgba(255, 255, 255, 0.10);
  /* 使用常见的网页字体栈作为品牌字体（回退到系统字体） */
  --brand-font: "Microsoft YaHei", "微软雅黑", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html {
    scroll-behavior: smooth;
    /* 解决顶部导航栏遮挡锚点内容的问题 */
    scroll-padding-top: 80px; 
}

/* 自定义字体：把字体文件放到 `assets/fonts/` 下 */
@font-face {
  font-family: 'title1';
  src: url('../fonts/HanYiHei.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: var(--brand-font) !important;
  color: var(--text-white);
  line-height: 1.6;
  min-height: 100vh;
  /* 1. body 本身设为透明或纯黑，背景交给伪元素画 */
  background-color: #05040a !important;
  background-image: none !important; 
  position: relative;
  z-index: 0;
}

/* 2) 流动光晕层（固定在视口上，随滚动只改光源位置变量） */
body::before{
  content: "";
  position: fixed; /* 关键：固定定位 */
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  z-index: -2; /* 放在最底层 */
  
  /* 3. 【核心】一整块平滑的黑紫渐变 */
  /* 从顶部的纯黑 -> 中间的深紫 ->底部的纯黑，营造深邃空间感 */
  background: radial-gradient(
      circle at 50% 0%, 
      #23103a 0%,       /* 顶部中心有一点点紫光 */
      #0f0818 40%,      /* 中间过渡到深紫黑 */
      #05040a 100%      /* 边缘纯黑 */
  );
  
  /* 如果觉得 radial 不够顺滑，可以用下面这个 linear-gradient 替代上面的： */
  /* background: linear-gradient(180deg, #0f0818 0%, #1a0e29 40%, #0f0818 100%); */

  opacity: 1;
  pointer-events: none;
}


/* 3) 噪点层（防色带断层 banding，非常重要）
   用 SVG turbulence 做“真噪点”，不需要额外图片文件 */
body::after{
   display: none; 
}

/* 强制覆盖标题字体 */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--brand-font) !important;
}

h1, .h1, .display-1, .display-2, .display-3 {
  font-weight: 700 !important;
}

h2, .h2 {
  font-weight: 600 !important;
}

.highlight-glow {
    color: #4CD7FF; /* 亮青色文字 */
    font-weight: 700; /* 加粗 */
    background: rgba(76, 215, 255, 0.1); /* 微弱的青色背景 */
    /*border: 1px solid rgba(76, 215, 255, 0.4); /* 青色细边框 */
    border-radius: 4px;
    padding: 0 4px; /* 左右留出一点空间 */
    margin: 0 0px;
    /*white-space: nowrap; /* 保证这句话不换行 */
    
    /* 发光阴影 */
    box-shadow: 0 0 10px rgba(76, 215, 255, 0.3);
    
    /* 呼吸动画：让它看起来在微微发光 */
    animation: glow-pulse 2s infinite ease-in-out;
}

@keyframes glow-pulse {
    0% {
        box-shadow: 0 0 8px rgba(76, 215, 255, 0.3);
        border-color: rgba(76, 215, 255, 0.4);
    }
    50% {
        box-shadow: 0 0 18px rgba(76, 215, 255, 0.6); /* 变亮 */
        border-color: rgba(76, 215, 255, 0.8);
        color: #8ae4ff; /* 文字也稍微变白一点 */
    }
    100% {
        box-shadow: 0 0 8px rgba(76, 215, 255, 0.3);
        border-color: rgba(76, 215, 255, 0.4);
    }
}

/* ===== Section 皮肤：用“柔和覆盖层”做分区，而不是硬切底色 ===== */
.section-skin {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.section-skin > * {
  position: relative;
  z-index: 1;
}
.section-skin::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* 轻度分区：适合内容区、案例区、关于我们 */
.section-tone-1::before {
  background:
    radial-gradient(1000px 650px at 50% 0%, rgba(139, 91, 255, 0.12), transparent 66%),
    radial-gradient(900px 650px at 15% 70%, rgba(76, 215, 255, 0.07), transparent 70%),
    /* 上下透明，中间略暗：让边界自然消失 */
    linear-gradient(
      180deg,
      rgba(15, 10, 28, 0) 0%,
      rgba(15, 10, 28, 0.55) 18%,
      rgba(15, 10, 28, 0.55) 82%,
      rgba(15, 10, 28, 0) 100%
    );
}

/* 中度分区：适合“服务体系/问卷”这种信息密度更高的区域 */
.section-tone-2::before {
  background:
    radial-gradient(1100px 700px at 50% -10%, rgba(139, 91, 255, 0.18), transparent 62%),
    radial-gradient(900px 650px at 85% 40%, rgba(76, 215, 255, 0.10), transparent 65%),
    linear-gradient(
      180deg,
      rgba(18, 12, 33, 0) 0%,
      rgba(18, 12, 33, 0.72) 20%,
      rgba(18, 12, 33, 0.72) 80%,
      rgba(18, 12, 33, 0) 100%
    );
}

/* --- 导航栏 --- */
.navbar {
  background: rgba(8, 6, 16, 0.72) !important;
  border-bottom: 1px solid rgba(139, 91, 255, 0.14);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  backdrop-filter: blur(12px);
}

.navbar-brand .logo-text {
  font-weight: 700;
  color: white;
  font-size: 1.2rem;
}

/* --- 导航菜单项的基础样式 --- */
.navbar-nav .nav-link {
    color: var(--text-gray) !important;
    font-weight: 600;
    padding: 8px 24px !important;
    border-radius: 50px;
    margin: 0 5px;
    position: relative; 
    z-index: 1; 
    overflow: hidden; 
    transition: color 0.4s ease; 
}

.navbar-nav .nav-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%; 
    height: 100%;
    background-color: #ffffff;
    background: linear-gradient(90deg, rgba(139, 91, 255, 0.95), rgba(76, 215, 255, 0.90));
    z-index: -1; 
    border-radius: 50px;
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
}

.navbar-nav .nav-link:hover::before,
.navbar-nav .nav-link.active::before {
    width: 100%;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #05040a !important;
    box-shadow: 0 0 18px rgba(139, 91, 255, 0.25);
}

/* --- 列表特性样式 --- */
.feature-list {
    margin-left: 15px;
    margin-bottom: 15px;
    width: auto;
}

.feature-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 5px 0 5px 0px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.95rem;
    transition: all 0.3s ease;
    text-align: left; 
}

.feature-item:last-child {
    border-bottom: none;
}

.feature-item:hover {
    padding-left: 10px; 
}

/* --- 按钮 --- */
.btn-consultation {
  background: var(--primary-blue);
  color: white !important;
  padding: 10px 24px;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 600;
  display: inline-block;
}

.btn-purple {
  background: linear-gradient(135deg, rgba(139, 91, 255, 1) 0%, rgba(76, 215, 255, 0.85) 140%);
  box-shadow: 0 10px 30px rgba(139, 91, 255, 0.28), 0 0 28px rgba(76, 215, 255, 0.10);
}

.btn-consultation:hover, .btn-purple:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  color: white;
}

/* 4) 霓虹描边按钮：直接作用于你现有按钮类
   - .btn-consultation（含 btn-purple）
   - .btn-outline-light（Hero 第二个按钮）
*/
.btn-consultation,
.btn.btn-outline-light{
  position: relative;
  overflow: hidden;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow:
    0 0 0 1px rgba(var(--cyber-purple), 0.18),
    0 0 22px rgba(var(--cyber-purple), 0.16);
  will-change: transform, box-shadow;
}

/* 霓虹渐变描边（不改按钮内部填充色） */
.btn-consultation::after,
.btn.btn-outline-light::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  padding:2px;
  background: linear-gradient(90deg,
    rgba(var(--cyber-purple), 0.95),
    rgba(var(--cyber-cyan), 0.85),
    rgba(var(--cyber-purple), 0.95));

  /* 1. 标准属性 (Firefox) */
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  mask-clip: content-box, border-box;
  mask-origin: content-box, border-box;
  mask-composite: exclude; /* 标准语法：排除重叠部分 */

  /* 2. WebKit 前缀属性 (Chrome, Safari, Edge) */
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-origin: content-box, border-box;
  /* WebKit 中，xor (异或) 的效果等同于标准的 exclude */
  -webkit-mask-composite: xor; 

  opacity: var(--neon-alpha);
  pointer-events:none;
  filter: blur(0.2px);
}
/* 扫光 */
.btn-consultation::before,
.btn.btn-outline-light::before{
  content:"";
  position:absolute;
  top:-30%;
  left:-60%;
  width:40%;
  height:160%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: rotate(20deg);
  opacity:0;
}
.btn-consultation:hover::before,
.btn.btn-outline-light:hover::before{
  opacity:1;
  animation: neon-sweep .85s ease;
}

@keyframes neon-sweep{
  from{ transform: translateX(0) rotate(20deg); }
  to{ transform: translateX(240%) rotate(20deg); }
}

.btn-consultation:hover,
.btn.btn-outline-light:hover{
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(var(--cyber-cyan), 0.22),
    0 0 26px rgba(var(--cyber-purple), 0.22),
    0 0 40px rgba(var(--cyber-cyan), 0.12);
}
/* 5) 移动端稍微降一点效果，省电省卡 */
@media (max-width: 768px){
  :root{
    --glow-alpha:  0.14;
    --grain-alpha: 0.045;
    --grid-alpha:  0.035;
  }
}

/* 6) 尊重系统“减少动画”设置 */
@media (prefers-reduced-motion: reduce){
  body::before{ animation: none; }
  .btn-consultation:hover,
  .btn.btn-outline-light:hover{ transform: none; }
}

/* --- 卡片通用样式 --- */
.tech-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  background-color: rgba(20, 12, 35, 0.65); 
  border: 1px solid rgba(139, 91, 255, 0.15);
  border-color: var(--card-border);
  box-shadow: 0 12px 34px rgba(0,0,0,0.22);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 30px;
  transition: all 0.3s ease;
  height: 100%;
  position: relative;
  /*backdrop-filter: blur(5px);*/
  display: flex;
  flex-direction: column;
}

.tech-card a {
  margin-top: auto;
}

.tech-card:hover {
  transform: translateY(-5px);
  background: rgba(30, 39, 50, 0.8);
  box-shadow: var(--glow-shadow-strong);
  border-color: rgba(139, 91, 255, 0.30);
  background-color: rgba(15, 10, 28, 0.82);
}

.tech-card:hover .feature-item {
    color: rgba(255, 255, 255, 0.9);
}

/* --- 标题 --- */
.section-title {
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1rem;
  color: white;
}

.section-subtitle {
  text-align: center;
  color: var(--text-gray);
  margin-bottom: 3rem;
  font-size: 1.1rem;
}

/* --- 浮动窗口 --- */
.float-box {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 160px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 999;
  box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}
.float-box a {
  display: block;
  text-align: center;
  padding: 10px;
  border-radius: 6px;
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.ws-btn { background: var(--primary-green); }
.fj-btn { background: var(--primary-blue); }

@media (max-width: 768px) {
  .float-box {
    top: auto; bottom: 20px; right: 50%; transform: translateX(50%);
    width: 90%; max-width: 350px; flex-direction: row; padding: 10px;
  }
  .float-box a { flex: 1; }
}

/* === Hero 区域桌面端默认样式 === */
#hero-section {
    padding-top: 160px;    /* 桌面端：给 H1 留出足够顶部空间 */
    padding-bottom: 80px; /* 桌面端：增加底部间距，解决离核心业务太近的问题 */
    min-height: auto;      /* 确保不强制高度 */
}
/* Hero：更强一点的顶部光晕，但依然要“软” */
.hero-skin::before {
  background:
    radial-gradient(1200px 800px at 50% 0%, rgba(139, 91, 255, 0.26), transparent 62%),
    radial-gradient(900px 650px at 20% 15%, rgba(76, 215, 255, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(15, 10, 28, 0.0) 0%, rgba(15, 10, 28, 0.40) 65%, rgba(15, 10, 28, 0.0) 100%);
}

/* Hero 里那个绝对定位光晕 div：让它相对 container 定位更靠谱 */
#hero-section .container { position: relative; }

/* --- Footer --- */
footer {
  background: rgba(0,0,0,0.3);
  padding: 60px 0 30px;
  margin-top: 0px;
  border-top: 1px solid var(--card-border);
}

/* --- 动画 --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(80px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-up {
    opacity: 0; 
    animation: fadeInUp 0.8s ease-out forwards !important; 
}
.delay-1 { animation-delay: 0.2s !important; }
.delay-2 { animation-delay: 0.4s !important; }


/* =========================================
   新版服务卡片样式 (New Services Section)
   ========================================= */

/* 1. 滚动飞入动画基础状态 */
.scroll-animate {
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}
/* 激活状态 */
.scroll-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 2. 新版卡片容器 */
.service-card-pro {
    background:
    radial-gradient(900px 600px at 20% 0%, rgba(139, 91, 255, 0.22), transparent 60%),
    radial-gradient(700px 450px at 90% 80%, rgba(76, 215, 255, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    background-color: rgba(15, 10, 28, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.25);
    border-radius: 16px;
    padding: 30px 25px;
    height: 100%; /* 确保高度填满父容器，实现高度一致 */
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}


/* 悬停效果 */
.service-card-pro:hover {
    transform: translateY(-8px);
    background:
    radial-gradient(900px 600px at 25% 0%, rgba(139, 91, 255, 0.34), transparent 60%),
    radial-gradient(700px 450px at 90% 80%, rgba(76, 215, 255, 0.16), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
    background-color: rgba(15, 10, 28, 0.84);
    border-color: rgba(139, 91, 255, 0.35);
    box-shadow: var(--glow-shadow-strong);

}

/* 3. 顶部平台 Badge (右上角标签) */
.platform-badge {
    /* [修改点] 默认改为相对定位，方便在 badge-group 中排列 */
    position: absolute; 
    top: 20px;
    right: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

/* [新增] Badge 组容器：用于放置多个 Badge */
.badge-group {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 8px; /* 标签之间的间距 */
}
/* 当 Badge 在组里时，取消绝对定位 */
.badge-group .platform-badge {
    position: static; 
}

/* 颜色定义 (微调以适应深紫色背景) */
.badge-google {
    /* 115deg 让分界线变成斜线 */
    background: linear-gradient(115deg, 
     rgba(66, 133, 244, 0.9) 0%,  rgba(66, 133, 244, 0.9) 25%,   /* 0–25%: Blue */
     rgba(234, 67, 53, 0.9) 25%,  rgba(234, 67, 53, 0.9) 50%,   /* 25–50%: Red */
     rgba(251, 188, 5, 0.9) 50%,  rgba(251, 188, 5, 0.9) 75%,   /* 50–75%: Yellow */
     rgba(52, 168, 83, 0.9) 75%,  rgba(52, 168, 83, 0.9) 100%   /* 75–100%: Green */
);
    color: #fff;
    /* 必须保留强阴影，否则白色文字在黄色斜块上看不清 */
    text-shadow: 0 5px 8px rgba(0, 0, 0, 0.9);
    letter-spacing: 0.5px;
}
.badge-x { background: rgba(0, 0, 0, 0.3); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); }
.badge-adult {
    background: #000000;       /* 纯黑背景 */
    color: #ff9900;            /* 官方橙色文字 */
    border: 1px solid #ff9900; /* 橙色边框 */
    box-shadow: 0 0 8px rgba(255, 153, 0, 0.3); /* 橙色微光 */
    font-weight: 800;          /* 字体加粗 */
    letter-spacing: 0.5px;
}
.badge-meta { background: rgba(37, 211, 102, 0.2); color: #25D366; border: 1px solid rgba(37, 211, 102, 0.4); }
.badge-tg { background: rgba(36, 129, 204, 0.2); color: #40a7e3; border: 1px solid rgba(36, 129, 204, 0.4); }
.badge-tech { background: rgba(255, 255, 255, 0.1); color: #e0e0e0; border: 1px solid rgba(255, 255, 255, 0.2); }
.badge-dev { background: rgba(231, 76, 60, 0.25); color: #ff6b6b; border: 1px solid rgba(231, 76, 60, 0.4); }
.badge-account { background: rgba(241, 196, 15, 0.2); color: #f1c40f; border: 1px solid rgba(241, 196, 15, 0.4); }
.badge-broadcast { background: rgba(52, 152, 219, 0.25); color: #4CD7FF; border: 1px solid rgba(52, 152, 219, 0.4); }

/* 4. 行业标签按钮组 (底部) */
.tag-container {
    margin-top: auto; 
    padding-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.industry-tag {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(0,0,0,0.22);
    border-color: rgba(255,255,255,0.14);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 4px 12px;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: default;
}

.service-card-pro:hover .industry-tag {
    background: rgba(255, 255, 255, 0.2);
    border-color: white;
}

/* 5. 标题调整 */
.service-card-pro h5 {
    margin-top: 0px; /* 增加顶部间距，防止撞到双Badge */
    margin-bottom: 15px;
    font-size: 1.25rem;
    padding-right: 10px; 
}

/* =========================================
   新增合并样式：Why us
   ========================================= */

    /* 3. 调整卡片内边距，让它看起来不那么空或者太挤 */
    #why-us-section .tech-card {
        padding: 20px !important;  /* 减小内边距 */
        min-height: 120px !important;             /* 设定一个最小高度，保证视觉整齐 */
    }
    #why-us-section .small-desc {
        font-size: 15px; /* 字体改小 */
        line-height: 1.4;             /* 行高收紧 */
        padding: 0 5px;               /* 防止文字贴边 */
    }      

/* =========================================
   新增合并样式：来自 About (关于我们流程)
   ========================================= */
.step-item { flex: 1; text-align: center; position: relative; }
.step-icon {
    width: 60px; height: 60px; background: var(--bg-dark); 
    border: 2px solid var(--primary-purple); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 15px; font-size: 24px; color: white;
    z-index: 2; position: relative;
}
.step-line {
    position: absolute; top: 30px; left: 50%; width: 100%; height: 2px;
    background: rgba(139, 91, 255, 0.3); z-index: 1;
}
.step-item:last-child .step-line { display: none; }

/* =========================================
   新增合并样式：来自 Cases (图片比例与轮播)
   ========================================= */
.case-img-ratio {
    width: 100%;
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
    margin-bottom: 15px;
}
@supports not (aspect-ratio: 4 / 3) {
    .case-img-ratio { padding-top: 75%; height: 0; }
    .case-img-ratio img { position: absolute; top: 0; left: 0; }
}
.case-img-ratio img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: top;
    transition: transform 0.5s ease;
}
.tech-card:hover .case-img-ratio img { transform: scale(1.08); }

/* 轮播图控件优化 */
.carousel {
    padding-bottom: 40px; 
    padding-left: 60px;   
    padding-right: 60px;  
}
.carousel-indicators { bottom: 0px; margin-bottom: 0; }
.carousel-indicators li {
    background-color: #9aa4b2; width: 25px; height: 4px; border-radius: 2px; opacity: 0.5;
}
.carousel-indicators li.active {
    background-color: #8B5BFF; opacity: 1; width: 35px;
}
.carousel-control-prev, .carousel-control-next {
    width: 40px; height: 40px;
    background: rgba(255, 255, 255, 0.1); 
    border-radius: 50%;
    top: 50%; transform: translateY(-50%);
    opacity: 0.8; position: absolute; 
}
.carousel-control-prev { left: 10px; } 
.carousel-control-next { right: 10px; }
.carousel-control-prev:hover, .carousel-control-next:hover {
    background: #8B5BFF; opacity: 1;
}

/* =========================================
   新增合并样式：需求问卷
   ========================================= */
#consultation-form-section {
  background: transparent !important;
}
.option-btn {
    border-radius: 50px; padding: 10px 25px; margin: 5px;
    border: 1px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.7);
    transition: all 0.3s ease;
    background: transparent;
}
.option-btn:hover {
    border-color: var(--primary-purple);
    color: white;
    background: rgba(139, 91, 255, 0.1);
}
.option-btn.active {
    background: var(--primary-purple) !important;
    border-color: var(--primary-purple) !important;
    color: white !important;
    box-shadow: 0 0 15px rgba(139, 91, 255, 0.4);
}
.custom-textarea {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: white;
    border-radius: 10px;
}
.custom-textarea:focus {
    background: rgba(255,255,255,0.1);
    border-color: var(--primary-purple);
    color: white;
    box-shadow: none;
}
.step-container {
    display: block; 
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 40px;
    max-width: 800px;
    margin: 0 auto;
    backdrop-filter: blur(10px);
}
#step-1 { display: block; }
.progress-bg {
    height: 6px; background: rgba(255,255,255,0.1);
    border-radius: 3px; margin-bottom: 30px; overflow: hidden;
}
.progress-bar-custom {
    height: 100%; background: var(--primary-purple);
    width: 33%; transition: width 0.5s ease;
    box-shadow: 0 0 10px var(--primary-purple);
}

/* =========================================
   移动端适配 (屏幕宽度小于 992px)
   ========================================= */
@media (max-width: 991px) {
    /* 1. 首页按钮组修复 */
    .d-flex.gap-5.flex-wrap {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: center !important;
    }
    .d-flex.gap-5.flex-wrap .btn-lg {
        margin-left: 0 !important;
        width: 70% !important;
        min-width: 200px;
        margin-bottom: 0 !important;
    }

    /* 2. 通用修复 */
    section { padding-top: 60px !important; padding-bottom: 60px !important; }
    .container-full { padding-left: 20px !important; padding-right: 20px !important; }
    .display-3, .display-4 { font-size: 2.2rem !important; }
    h1 { font-size: 1.8rem !important; }
    h2 { font-size: 1.6rem !important; }
    h3,h4,h5 { font-size: 1.3rem !important; }
    .fs-5 { font-size: 1rem !important; }

    #hero-section {
        padding-top: 140px !important; 
        padding-bottom: 40px !important; 
    }

    /* 3. 卡片与布局 */
    .tech-card { min-height: auto !important; height: auto !important; margin-bottom: 20px; }
    .float-box { bottom: 20px; right: 10px; transform: scale(0.85); transform-origin: bottom right; z-index: 1050;}
    .fa-10x { font-size: 5em !important; }

    /* 2. 调整描述文字的尺寸 */
    #why-us-section .small-desc {
        font-size: 12px; /* 字体改小 */
        line-height: 1.4;             /* 行高收紧 */
        padding: 0 5px;               /* 防止文字贴边 */
    }  
    /* 3. 调整卡片内边距，让它看起来不那么空或者太挤 */
    #why-us-section .tech-card {
        padding: 10px !important;  /* 减小内边距 */
        min-height: 200px !important;             /* 设定一个最小高度，保证视觉整齐 */
    }

    #why-us-section h5,
    #why-us-section .display-6 {
    font-size: clamp(15px, 1.3vw, 22px) !important;
    
    font-weight: 700 !important;
    letter-spacing: -0.5px; /*稍微收紧字间距*/
    white-space: nowrap;    /* 【核心】强制不换行 */
    overflow: hidden;       /* 防止溢出 */
    text-overflow: ellipsis;/* 如果屏幕实在太小，显示省略号 */
    margin-bottom: 12px !important;
    line-height: 1.2;
    }
    
    /* 4. 问卷步骤 */
    .step-container { padding: 25px; }
    .option-btn { width: 100%; margin: 5px 0; }
    
    /* 5. 关于我们流程条 - 垂直排列 */
    .step-container.about-steps { flex-direction: column; gap: 30px; padding: 0 20px !important;}
    .step-line { display: none; }
    
    /* 6. 轮播图手机适配 */
    .carousel { padding-left: 0; padding-right: 0; padding-bottom: 30px; }
    .carousel-control-prev { left: 0; }
    .carousel-control-next { right: 0; }
    .case-img-container { height: 250px !important; }
}
/* =========================================================
   V3 | Tech Purple Atmosphere (Overrides)
   目标：紫黑氛围 + 科技感 + Section 过渡更自然
   （放在文件末尾，覆盖上方旧样式）
   ========================================================= */

/* 你 HTML 里用了 text-gray，但旧 CSS 没定义，这里补上 */
.text-gray { color: var(--text-gray) !important; }

/* services 你原来写了 overflow: hidden; 这里挪到 CSS */
#services-section { overflow: hidden; }

/* 新版服务卡片（之前的浅色渐变会很“亮”，这里压回深紫科技风） */


/* ===== 悬浮窗：从“白块”改成深色玻璃，融入整体氛围 ===== */
.float-box {
  background: rgba(12, 10, 22, 0.72);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 16px 45px rgba(0,0,0,0.35);
  backdrop-filter: blur(14px);
}

/* ===== Footer：收尾也给一点氛围 ===== */
footer {
  background:
    radial-gradient(900px 600px at 50% 0%, rgba(139, 91, 255, 0.12), transparent 70%),
    rgba(0,0,0,0.22);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* =========================================================
   Footer | Legal Links
   ========================================================= */
footer .footer-legal { margin-bottom: 0; }
footer .footer-sep { margin: 0 6px; opacity: 0.6; }

footer .footer-link{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

footer .footer-link:hover,
footer .footer-link:focus{
  border-bottom-color: currentColor;
}

footer .footer-link:focus-visible{
  outline: 2px solid var(--primary-purple);
  outline-offset: 2px;
  border-radius: 6px;
}

/* =========================================================
   Legal Pages | Privacy Policy & Terms
   ========================================================= */
.legal-page { padding-top: 140px; padding-bottom: 60px; }
.legal-card { max-width: 980px; margin: 0 auto; }

.legal-card h2 { margin-top: 28px; margin-bottom: 12px; }
.legal-content p,
.legal-content li { color: var(--text-gray); }

.legal-content ul { padding-left: 1.2rem; }