/* ===============================
   1. 全局样式
================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    color: #4a4a4a;
    background-color: #f4f6f9;
    font-family: 'Source Han Sans SC', 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif;
    line-height: 1.9;
}

/* ===============================
   2. 顶部导航
================================ */
header {
    position: fixed; top: 0; width: 100%; height: 50px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 8%; z-index: 100;
    border-bottom: 1px solid rgba(0,0,0,.04);
    transition: box-shadow 0.3s ease;
}
header.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.05); }
.logo img { height: 50px; margin-top: 5px;transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.logo img:hover { transform: scale(1.05); }

.nav-container { position: relative; cursor: pointer; }
.hamburger { display: flex; flex-direction: column; justify-content: space-between; width: 30px; height: 20px; z-index: 101; }
.hamburger span { display: block; width: 100%; height: 2px; background-color: #333; border-radius: 2px; transition: all 0.3s ease; }
.nav-container:hover .hamburger span { background-color: #00b394; }

.dropdown-menu {
    position: absolute; top: 40px; right: 0;
    background: rgba(255,255,255,0.95); backdrop-filter: blur(15px);
    border-radius: 8px; padding: 10px 0; min-width: 160px; text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,.04);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav-container:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu a { display: block; padding: 12px 20px; text-decoration: none; color: #555; font-size: 15px; font-weight: 500;transition: all 0.3s ease; }
.dropdown-menu a:hover { color: #00b394; background-color: rgba(0,179,148,0.05); }

/* 当 JavaScript 触发时，显示菜单 */
.dropdown-menu.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* 移动端手机屏幕下的专属样式调优 */
@media(max-width: 768px) {
    .dropdown-menu {
        position: fixed; /* 手机端固定定位，防止被其他全屏panel遮挡 */
        top: 50px;
        right: 10px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    }
}

/* ===============================
   3. 整屏滚动核心样式
================================ */
.panel {
    height: 100vh; 
    scroll-snap-align: start;
    position: relative;
    padding: 0 10%; 
    box-sizing: border-box; 
}

/* 内容包裹容器：绝对定位 + 垂直居中 */
.panel-inner {
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    transform: translateY(-50%);
    max-height: 90vh;
    overflow-y: auto;
}

/* ===============================
   4. 轮播图样式
================================ */
.hero-slider { padding: 0; }
.slider { position: relative; width: 100%; height: 100%; }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; display: flex; align-items: center; padding-left: 10%; }
.slide.active { opacity: 1; }
.slide-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; z-index: -2; }
.slide-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: -1; }
.slide-content { color: white; z-index: 1; }
.slide-content h1 { font-size: 30px; font-weight: 200; line-height: 1.3; margin-bottom: 20px; letter-spacing: 1.5px; animation: slideUp .8s ease forwards; }
.slide-content p { font-size: 16px; font-weight: 300; margin: 25px 0; max-width: 600px; line-height: 1.9; animation: slideUp .8s .2s ease forwards; opacity: 0; }
.slide-content .btn { animation: slideUp .8s .4s ease forwards; opacity: 0; }

/* 核心修改：彻底去除默认的圆形遮罩，保留纯净的箭头 */
.slider-btn {
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%);
    background-image: none !important; 
    background-color: transparent !important; 
    color: white; 
    border: none; 
    padding: 15px; 
    cursor: pointer; 
    font-size: 24px; 
    border-radius: 50%; 
    z-index: 2; 
    transition: all 0.3s ease; 
}
.slider-btn:hover { 
    background-color: transparent !important; 
    color: #00b394; 
}
.slider-btn.prev { left: 20px; }
.slider-btn.next { right: 20px; }

/* ===============================
   5. 按钮通用样式
================================ */
.btn { display: inline-block; background: linear-gradient(90deg, #00b394, #00997a); color: white; padding: 16px 45px; border-radius: 6px; text-decoration: none; font-size: 15px; font-weight: 500; letter-spacing: 1px; box-shadow: 0 8px 25px rgba(0,179,148,.25); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.btn:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,179,148,.35); }

/* ===============================
   6. 内容区通用样式
================================ */
.section h2 { text-align: center; font-size: 32px; font-weight: 400; margin-bottom: 40px; color: #1a1a1a; letter-spacing: 1px; }
.section h2::after { content: ''; display: block; width: 50px; height: 3px; margin: 15px auto 0; background: linear-gradient(90deg, #00b394, #00997a); border-radius: 2px; }
.section span { background: linear-gradient(90deg, #00b394, #007a60); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* ===============================
   7. 关于我们
================================ */
.about { 
   display: flex; 
   align-items: center; 
   gap: 60px; 
   font-size: 16px; 
   line-height: 2.5; 
   
   /* 1. 背景色调整：改为极淡的灰蓝色，解决“太素”的问题 */
   background-color: #f7f9fc; 
   padding: 5px 0; /* 增加上下留白，让背景色更自然 */
}

.about p { 
   text-indent: 2em; 
   margin-bottom: 15px; 
}

.about img { 
   width: 260px; /* 保持原大小 */
   border-radius: 12px; 
   
   /* 2. 相框效果 */
   border: 8px solid #ffffff; 
   
   /* 3. 阴影微调：配合白框增加立体感 */
   box-shadow: 0 20px 40px rgba(0,0,0,0.1); 
   
   /* 4. 保留原有的缩放动画 */
   transition: transform 0.4s ease; 
}

/* 保留悬停放大效果 */
.about img:hover { 
   transform: scale(1.02); 
}

/* ===============================
   8. 品牌卡片
================================ */
.brands { 
   display: flex; 
   gap: 30px; 
}

.card { 
   flex: 1; 
   background: rgba(255,255,255,.8); 
   backdrop-filter: blur(10px); 
   border-radius: 12px; 
   
   /* 核心修改：进一步压缩上下内边距，大幅降低卡片高度 */
   padding: 10px 50px; 
   
   text-align: center; 
   border: 1px solid rgba(0,0,0,.04); 
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
   display: flex; 
   flex-direction: column; 
   align-items: center; 
   box-shadow: 0 4px 15px rgba(0,0,0,.03); 
}

.card:hover { 
   transform: translateY(-10px); 
   background: rgba(255,255,255,1); 
   border-color: rgba(0,179,148,.15); 
   box-shadow: 0 20px 40px rgba(0,179,148,.1); 
}

.card img { 
   width: 100%; 
   height: auto; 
   object-fit: contain; 
   border-radius: 8px; 
   margin-bottom: 2px; /* 缩小图片与文字的间距 */
}

.card h3 { 
   font-size: 17px; 
   font-weight: 400; 
   color: #222; 
   margin-bottom: 1px; /* 核心修改：缩小标题与下方文字的间距 */
}

.card p { 
   font-size: 13px; 
   font-weight: 400; 
   color: #666; 
   line-height: 0.8; /* 核心修改：缩小文字行高，让两行字更紧凑 */
}

/* ===============================
   9. 智慧运营 (16:9 图片卡片样式)
================================ */
.features { 
   display: flex; 
   gap: 20px; 
}

.feature-card { 
   flex: 1; 
   
   /* 核心修改：增加浅色渐变背景，让卡片与页面底色产生区隔 */
   background: linear-gradient(180deg, #ffffff 0%, #f9fdfc 100%); 
   
   border-radius: 12px; 
   overflow: hidden; 
   box-shadow: 0 4px 15px rgba(0,0,0,.03); 
   
   /* 核心修改：增加极细的品牌色描边，提升精致度 */
   border: 3px solid rgba(0,179,148,0.15); 
   
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}

/* 悬停时：边框加深，背景变纯白，增强交互反馈 */
.feature-card:hover { 
   transform: translateY(-10px); 
   background: #ffffff;
   box-shadow: 0 20px 40px rgba(0,179,148,.1); 
   border-color: rgba(0,179,148,.3); 
}

.feature-card img { 
   width: 100%; 
   aspect-ratio: 16 / 9; 
   object-fit: cover; 
   display: block; 
}

.feature-text { 
   padding: 20px; 
   text-align: left; 
}

.feature-text h3 { 
   font-size: 16px; 
   font-weight:400; 
   color: #1a1a1a; 
   margin-bottom: 8px; 
}

.feature-text p { 
   font-size: 13px; 
   font-weight: 400; 
   color: #666; 
   line-height: 1.6; 
}

/* ===============================
   10. 联系我们
================================ */
.contact { 
   background: linear-gradient(135deg, #0b2424, #113636); 
   color: white; 
   text-align: center; 
}

.contact h2 { 
   font-size: 32px; 
   font-weight: lighter;
   margin-bottom: 40px; 
   color: #ffffff; 
}

/* 核心：三列网格布局 */
.contact-grid {
   display: flex;
   justify-content: center;
   align-items: flex-start;
   gap: 60px;
   margin-bottom: 50px;
}

.contact-item h4 {
   font-size: 16px;
   font-weight: 400;
   margin-bottom: 15px;
   color: #ffffff;
   letter-spacing: 1px;
}

.contact-item p {
   font-size: 14px;
   line-height: 2;
   font-weight: 300;
   opacity: 0.85;
   margin-bottom: 0;
}

/* 二维码区域样式 */
.qr-codes {
   display: flex;
   gap: 20px;
}

.qr-box {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
}

.qr-box img {
   width: 120px;
   height: 120px;
   border-radius: 8px;
   background-color: #ffffff; /* 给二维码加个白底，更清晰 */
   padding: 5px;
}

.qr-box span {
   font-size: 12px;
   opacity: 0.7;
}

/* 底部版权分割线 */
.contact-footer {
   margin-top: 20px;
   padding-top: 20px;
   border-top: 1px solid rgba(255,255,255,0.1);
}

.contact-footer p {
   font-size: 12px;
   line-height: 2;
   opacity: 0.6;
   margin-bottom: 0;
}

.contact-footer a {
   color: rgba(255,255,255,0.6);
   text-decoration: none;
   transition: opacity 0.3s ease;
}

.contact-footer a:hover {
   opacity: 1;
   text-decoration: underline;
}

/* ===============================
   11. 手机适配 (深度调优完美响应版)
================================ */
@media(max-width: 768px) {
    
   html, body {
       height: auto !important;       
       overflow-y: auto !important;   
       overflow-x: hidden !important; 
   }

   /* 移除移动端模块间冗余的留白跨度 */
   .panel {
       height: auto !important;           
       min-height: auto !important; 
       overflow-y: visible !important;    
       scroll-snap-align: none !important;
   }

   .panel-inner {
       position: relative !important;
       top: 0 !important;
       left: 0 !important;
       right: 0 !important;
       transform: none !important;
       max-height: none !important;
       padding: 40px 20px 20px 20px !important; 
       overflow-y: visible !important;
   }

   /* 独留手机端首屏全屏并锁死 */
   .hero-slider {
       height: 100vh !important;      
       min-height: 100vh !important;  
       overflow: hidden !important;   
   }
   .hero-slider .panel-inner {
       position: absolute !important;
       top: 50% !important;
       left: 5% !important;
       right: 5% !important;
       transform: translateY(-50%) !important;
       padding: 0 !important;
   }

   .slide {
       padding: 0 5% !important; 
       justify-content: center !important;
       text-align: center !important;
   }
   .slide-bg {
       background-size: cover !important;      
       background-position: center center !important; 
       background-repeat: no-repeat !important;           
   }
   
   /* >>> 手机端大字加粗优化在这里 <<< */
   .slide-content h1 {
       font-size: 28px !important;
       font-weight: 400 !important; /* 锁死强行加粗 */
       text-shadow: 0 2px 10px rgba(0,0,0,0.35); /* 提升移动端可读性 */
       opacity: 1 !important; 
   }
   .slide-content p {
       margin: 15px auto !important;
       font-weight: 300 !important; 
       opacity: 1 !important; 
   }
   .slide-content .btn {
       opacity: 1 !important; 
   }
   .slider-btn {
       display: none !important; 
   }

   .section h2 {
       font-size: 24px !important; 
       margin-bottom: 20px !important;
   }

   /* 关于我们手机端微调 */
   .about {
       flex-direction: column !important;
       gap: 20px !important;       
       padding: 10px 0 !important;
       background-color: transparent !important; 
       align-items: center !important;
   }
   .about img {
       width: 100% !important;
       max-width: 180px !important; 
       height: auto !important; 
       border: 4px solid #ffffff !important; 
       box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
   }
   .about p {
       font-size: 14.5px !important; 
       line-height: 1.85 !important; 
       text-indent: 0 !important;     
       text-align: justify !important;          
       color: #555555 !important;
       padding: 0 10px !important;              
   }

   /* 出行品牌手机端 */
   .brands {
       flex-direction: column !important; 
       gap: 15px !important;             
   }
   .card {
       width: 100% !important;
       padding: 15px 25px !important;     
   }
   .card p {
       line-height: 1.4 !important;       
       margin-top: 5px !important;
   }

   /* 智慧运营手机端 */
   .features {
       flex-direction: column !important; 
       gap: 15px !important;             
   }
   .feature-card {
       width: 100% !important;
   }

   /* 联系我们与特定机型数字防硬换行锁 */
   .contact-grid {
       display: grid !important;            
       grid-template-columns: 1fr !important; 
       gap: 30px !important;                           
       align-items: center !important;                 
   }
   .contact-item {
       text-align: center !important;                  
       width: 100% !important;                         
   }
   .contact-item p {
       white-space: nowrap; 
   }
   .qr-codes {
       justify-content: center !important; 
   }
   .contact-footer p {
       font-size: 11px !important;                     
   }
   
   /* 移动端汉堡菜单高级点击回馈机制 */
   .dropdown-menu {
       position: fixed !important; 
       top: 50px !important;
       right: 10px !important;
       background: rgba(255, 255, 255, 0.98) !important;
       box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
       border-radius: 8px !important;
       overflow: hidden; 
   }
   .dropdown-menu a {
       padding: 14px 24px !important; 
   }
   .dropdown-menu a:active {
       background-color: rgba(0, 179, 148, 0.1) !important; 
       color: #00b394 !important;
   }
}

/* ===============================
  12. 动画与全局基础响应配置
================================ */
@keyframes slideUp {
  from {
      opacity: 0;
      transform: translateY(30px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

/* 针对 iOS 自动识别的电话链接样式重置 */
a[href^="tel"] {
   color: inherit !important; 
   text-decoration: none !important; 
   -webkit-text-fill-color: inherit !important; 
}