/* =============================================
   移动端专用样式
   移动菜单 + 首页手机幻灯片
   ============================================= */

/* ---- 移动端汉堡菜单按钮 ---- */
.mobile-menu-toggle {
  display:none;
  flex-direction:column; justify-content:center; align-items:center;
  width:36px; height:36px; cursor:pointer;
  background:none; border:none; padding:0;
  gap:5px; flex-shrink:0;
  position:relative;
}
.mobile-menu-toggle span {
  display:block; width:20px; height:2px;
  background:rgba(255,255,255,.7);
  border-radius:2px;
  transition:all .3s ease;
}
.mobile-menu-toggle:hover span { background:#fff; }
.site-header.scrolled .mobile-menu-toggle span { background:rgba(0,0,0,.55); }
.site-header.scrolled .mobile-menu-toggle:hover span { background:#0a2a66; }
.site-header.scrolled .mobile-menu-toggle.open span:nth-child(1),
.site-header.scrolled .mobile-menu-toggle.open span:nth-child(3) { background:#0a2a66; }
.mobile-menu-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); background:#fff; }
.mobile-menu-toggle.open span:nth-child(2) { opacity:0; }
.mobile-menu-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); background:#fff; }

/* ---- 移动端菜单面板 ---- */
.mobile-menu-panel {
  display:none;
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(12,18,32,.98);
  z-index:999;
  padding:64px 24px 20px;
  overflow-y:auto;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  animation:fadeIn .3s ease;
}
.mobile-menu-panel.open { display:block !important; }
.mobile-menu-close {
  display:block; width:100%;
  margin:24px 0 8px;
  padding:14px 0;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  color:rgba(255,255,255,.85);
  font-size:1rem; letter-spacing:.05em;
  cursor:pointer; text-align:center;
}
.scrolled + .mobile-menu-panel,
.site-header.scrolled ~ .mobile-menu-panel { padding-top: 56px; }
.mobile-menu-panel ul { list-style:none; padding:0; margin:0; }
.mobile-menu-panel li { border-bottom:1px solid rgba(255,255,255,.05); }
.mobile-menu-panel li:last-child { border-bottom:none; }
.mobile-menu-panel a {
  display:block; padding:16px 4px;
  color:rgba(255,255,255,.7); font-size:1rem; font-weight:500;
  text-decoration:none; letter-spacing:.03em;
  transition:color .2s;
}
.mobile-menu-panel a:hover { color:#fff; }
.mobile-menu-panel .main-nav ul li.has-submenu { display:flex; flex-wrap:wrap; align-items:center; }
.mobile-menu-panel .main-nav ul li.has-submenu > a { flex:1; min-width:0; }
.mobile-menu-panel .submenu-toggle {
  display:flex; align-items:center; justify-content:center;
  width:44px; height:100%; flex-shrink:0;
  background:none; border:none; padding:0;
  color:rgba(255,255,255,.7); font-size:1.25rem; line-height:1;
  cursor:pointer;
  transition:transform .3s ease;
}
.mobile-menu-panel .has-submenu.open > .submenu-toggle { transform:rotate(45deg); color:#85ce03; }
.mobile-menu-panel .submenu {
  display:none !important; width:100%;
  padding:6px 0 6px 14px; margin:2px 0 10px;
  background:rgba(10,42,102,.9);
  border-radius:6px;
}
.mobile-menu-panel .has-submenu:hover > .submenu { display:none !important; }
.mobile-menu-panel .has-submenu.open > a { color:#fff; }
.mobile-menu-panel .has-submenu.open > .submenu { display:block !important; }
.mobile-menu-panel .submenu a { font-size:.92rem; padding:12px 4px; color:rgba(255,255,255,.75); }
.mobile-menu-panel .main-nav { display:block; }
.mobile-menu-panel .main-nav ul { display:block; }
.mobile-menu-panel .main-nav ul li { display:block; border-bottom:1px solid rgba(255,255,255,.05); }

@keyframes fadeIn {
  from { opacity:0; }
  to { opacity:1; }
}

/* 移动端：显示汉堡菜单，隐藏桌面导航 */
@media(max-width:768px){
  .mobile-menu-toggle{display:flex}
  .site-header .main-nav{display:none}
  .site-header.scrolled { background:#1a4d3a; border-bottom-color:rgba(255,255,255,.08); }
  .site-header.scrolled .logo-img-default { display:block; }
  .site-header.scrolled .logo-img-scrolled { display:none; }
  .site-header.scrolled .mobile-menu-toggle span { background:rgba(255,255,255,.7); }
  .site-header.scrolled .mobile-menu-toggle:hover span { background:#fff; }
  .site-header.scrolled .mobile-menu-toggle.open span:nth-child(1),
  .site-header.scrolled .mobile-menu-toggle.open span:nth-child(3) { background:#fff; }
}

/* ---- 首页手机幻灯片 ---- */
@media(max-width:768px) {
  .desktop-hero { display:none !important; }

  .mobile-hero {
    display:block; position:relative; width:100%; overflow:hidden;
    background:transparent; min-height:100vh;
  }
  .mobile-hero-slides-wrapper { position:relative; width:100%; min-height:100vh; }
  .mobile-hero-slide {
    position:absolute; inset:0; width:100%; min-height:100vh;
    display:flex; align-items:center;
    opacity:0; visibility:hidden;
    transition:opacity .6s ease, visibility .6s ease;
  }
  .mobile-hero-slide.active { opacity:1; visibility:visible; z-index:2; }
  .mobile-hero-slide-bg { position:absolute; inset:0; background-color:#0d1117; background-size:cover; background-position:center; }
  .mobile-hero-overlay {
    position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(13, 51, 35, 0.82) 0%, rgba(26, 77, 58, 0.78) 100%);
    z-index:1;
  }
  .mobile-hero-container {
    position:relative; z-index:2;
    display:flex; flex-direction:column; justify-content:center;
    width:100%; padding:140px 15px 120px; text-align:center;
  }
  .mobile-hero-title {
    font-size:1.625rem; font-weight:800; line-height:1.35;
    color:#fff; margin:0 0 10px;
    position:relative; padding-bottom:14px;
  }
  .mobile-hero-title::after {
    content:''; position:absolute;
    bottom:0; left:50%; transform:translateX(-50%);
    width:60px; height:2px;
    background:linear-gradient(90deg, transparent, #85ce03, #2DB47A, transparent);
    border-radius:1px;
  }
  .mobile-hero-title em { font-style:normal; color:var(--accent); }
  .mobile-hero-title br {
    content:'';
    display:block;
    margin-top:.15em;
  }
  .mobile-hero-subtitle {
    font-size:1.2rem; color:#fff; font-weight:700;
    line-height:1.4; margin:6px 0 14px;
    display:flex; align-items:center; justify-content:center;
    gap:10px; text-align:center;
  }
  .mobile-hero-subtitle::before,
  .mobile-hero-subtitle::after {
    display:none;
  }
  .mobile-hero-slogan {
    font-size:.85rem; color:rgba(255,255,255,.85); font-weight:500;
    line-height:1.7; margin:0 0 14px; text-align:center;
  }
  .mobile-hero-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:22px; }
  .mobile-hero-actions .btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:10px 22px; font-size:.85rem; font-weight:600;
    border-radius:8px; border:none; cursor:pointer;
    text-decoration:none; transition:all .25s;
  }
  .mobile-hero-actions .btn-primary {
    background:#fff; color:#151E2D;
  }
  .mobile-hero-actions .btn-outline {
    background:transparent; color:#fff;
    border:1.5px solid rgba(255,255,255,.3);
  }
  .mobile-hero-actions .btn-conversion {
    background:linear-gradient(135deg,#ff7a18,#ff5722);
    color:#fff;
  }
  .mobile-hero-actions .btn-consult {
    background:linear-gradient(135deg,#07c160,#06ad56);
    color:#fff;
  }
  .mobile-hero-actions .btn-inquiry {
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:#fff;
  }
  .mobile-hero-dots {
    position:absolute; bottom:56px; left:50%; transform:translateX(-50%);
    display:flex; gap:8px; z-index:10;
  }
  .mobile-hero-dot {
    width:8px; height:8px; border-radius:50%;
    background:rgba(255,255,255,.25); cursor:pointer; transition:all .3s;
  }
  .mobile-hero-dot.active { width:20px; border-radius:4px; background:var(--primary); }

  /* ===== 移动端向下滚动指示器 ===== */
  .mobile-hero-scroll-indicator {
    position:absolute;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    z-index:10;
    animation:scrollBounce 2s ease-in-out infinite;
  }
  .mobile-hero-scroll-indicator .scroll-mouse {
    width:18px; height:28px;
    border:1.5px solid rgba(255,255,255,.6);
    border-radius:10px;
    position:relative;
    margin:0 auto;
  }
  .mobile-hero-scroll-indicator .scroll-wheel {
    width:3px; height:6px;
    background:rgba(255,255,255,.7);
    border-radius:2px;
    position:absolute;
    top:6px; left:50%;
    transform:translateX(-50%);
    animation:scrollWheel 1.5s ease-in-out infinite;
  }
  @keyframes scrollWheel {
    0% { opacity:1; transform:translateX(-50%) translateY(0); }
    100% { opacity:0; transform:translateX(-50%) translateY(10px); }
  }
  @keyframes scrollBounce {
    0%, 100% { transform:translateX(-50%) translateY(0); }
    50% { transform:translateX(-50%) translateY(6px); }
  }

  /* 移动端幻灯片关联产品/文章 */
  .mobile-hero-linked-items {
    margin: 14px 20px 0; display:flex; flex-direction:column;
  }
  .mobile-hero-linked-list {
    display:flex; flex-wrap:wrap; justify-content:center;
    gap: 8px;
  }
  .mobile-hero-linked-card {
    display:flex; flex-direction:column;
    width:calc(50% - 4px);
    border-radius:8px; overflow:hidden; text-decoration:none; transition:all .25s;
  }
  .mobile-hero-linked-list .mobile-hero-linked-card:only-child { width:100%; }
  .mobile-hero-linked-card img {
    width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  }
  .mobile-hero-linked-list .mobile-hero-linked-card:only-child img,
  .mobile-hero-linked-list--plain .mobile-hero-linked-card img {
    width:100%; height:auto; aspect-ratio:auto; object-fit:contain;
  }
  .mobile-hero-article-card {
    border:3px solid rgba(255,255,255,.35);
    border-radius:10px;
    overflow:hidden;
  }
  .mobile-hero-article-card img { aspect-ratio:16/9; }
}

@media(min-width:769px) {
  .mobile-hero { display:none !important; }
}