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

/* ---- 移动端汉堡菜单按钮 ---- */
.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; }
.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; }
.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 .submenu { display:none !important; padding-left:16px; }
.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,.55); }
.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}
}

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

  .mobile-hero {
    display:block; position:relative; width:100%; overflow:hidden;
    background:#151E2D; min-height:70vh;
  }
  .mobile-hero-slides-wrapper { position:relative; width:100%; min-height:70vh; }
  .mobile-hero-slide {
    position:absolute; inset:0; width:100%; min-height:70vh;
    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-size:cover; background-position:center; }
  .mobile-hero-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(21,30,45,.3),rgba(21,30,45,.8)); }
  .mobile-hero-container {
    position:relative; z-index:2;
    display:flex; flex-direction:column; justify-content:center;
    width:100%; padding:140px 24px 80px; text-align:center;
  }
  .mobile-hero-title {
    font-size:1.35rem; font-weight:800; line-height:1.35;
    color:#fff; margin:0 0 10px;
  }
  .mobile-hero-title em { font-style:normal; color:#60a5fa; }
  .mobile-hero-subtitle {
    font-size:.88rem; color:rgba(255,255,255,.7);
    line-height:1.7; margin:0 0 22px;
  }
  .mobile-hero-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
  .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-dots {
    position:absolute; bottom:24px; 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:#60a5fa; }
}

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