:root {
      --bg: #0a0612;
      --bg-card: #14101c;
      --bg-card-hover: #1c1626;
      --pink: #ff2d6a;
      --pink-light: #ff5c8a;
      --pink-soft: rgba(255, 45, 106, 0.15);
      --pink-glow: rgba(255, 45, 106, 0.4);
      --purple: #7b2cbf;
      --text: #f8f0f5;
      --text-muted: #a89bb0;
      --border: rgba(255, 255, 255, 0.07);
      --radius: 16px;
      --radius-lg: 24px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
      background: var(--bg);
      color: var(--text);
      overflow-x: hidden;
      line-height: 1.6;
    }

    /* 加载动画样式已全局化至 common.css */

    /* ========== 粒子画布 ========== */
    #particles {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    /* ========== 通用 ========== */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
      position: relative;
      z-index: 1;
    }

    .section {
      padding: 80px 0;
      position: relative;
    }

    .section-title {
      text-align: center;
      font-size: clamp(1.6rem, 3.5vw, 2.2rem);
      font-weight: 700;
      margin-bottom: 12px;
    }

    .section-desc {
      text-align: center;
      color: var(--text-muted);
      font-size: 1rem;
      margin-bottom: 48px;
      max-width: 560px;
      margin-left: auto;
      margin-right: auto;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 28px;
      border-radius: 999px;
      font-size: 0.95rem;
      font-weight: 500;
      cursor: pointer;
      border: none;
      transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
      text-decoration: none;
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--pink), #e01e5a);
      color: white;
      box-shadow: 0 6px 24px var(--pink-glow);
    }

    .btn-primary:hover {
      transform: translateY(-3px) scale(1.03);
      box-shadow: 0 12px 32px var(--pink-glow);
    }

    .btn-dark {
      background: rgba(255, 255, 255, 0.08);
      color: var(--text);
      border: 1px solid var(--border);
    }

    .btn-dark:hover {
      background: rgba(255, 255, 255, 0.14);
      border-color: var(--pink);
      color: var(--pink);
    }

    /* ========== 导航 ========== */
    header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 32px;
      background: rgba(10, 6, 18, 0.7);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border);
      transition: all 0.3s;
    }

    header.scrolled {
      padding: 10px 32px;
      background: rgba(10, 6, 18, 0.92);
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 1.2rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: var(--text);
      text-decoration: none;
    }

    .logo img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      box-shadow: 0 0 12px rgba(255, 45, 106, 0.35);
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .logo:hover img {
      transform: scale(1.08);
      box-shadow: 0 0 18px rgba(255, 45, 106, 0.55);
    }

    .logo-badge {
      background: linear-gradient(135deg, var(--pink), #ff6b9d);
      color: white;
      font-size: 0.7rem;
      padding: 3px 10px;
      border-radius: 999px;
      font-weight: 500;
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .nav-link {
      color: var(--text-muted);
      text-decoration: none;
      font-size: 0.9rem;
      transition: color 0.25s;
    }

    .nav-link:hover {
      color: var(--pink);
    }

    .btn-sm {
      padding: 8px 18px;
      font-size: 0.85rem;
    }

    /* ========== Hero ========== */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 120px 0 80px;
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 60% at 30% 40%, rgba(123, 44, 191, 0.25), transparent),
        radial-gradient(ellipse 50% 50% at 70% 30%, rgba(255, 45, 106, 0.18), transparent),
        linear-gradient(180deg, #12081f 0%, var(--bg) 100%);
      z-index: 0;
    }

    /* 竖向光柱 */
    .hero-beams {
      position: absolute;
      inset: 0;
      overflow: hidden;
      z-index: 0;
      pointer-events: none;
    }

    .beam {
      position: absolute;
      width: 2px;
      height: 100%;
      background: linear-gradient(to bottom, transparent, rgba(255, 45, 106, 0.15), transparent);
      animation: beamMove 8s ease-in-out infinite;
    }

    .beam:nth-child(1) { left: 15%; animation-delay: 0s; }
    .beam:nth-child(2) { left: 35%; animation-delay: 1.5s; height: 80%; }
    .beam:nth-child(3) { left: 55%; animation-delay: 3s; }
    .beam:nth-child(4) { left: 75%; animation-delay: 2s; height: 90%; }
    .beam:nth-child(5) { left: 90%; animation-delay: 4s; }

    @keyframes beamMove {
      0%, 100% { opacity: 0.3; transform: scaleY(0.8); }
      50% { opacity: 0.8; transform: scaleY(1.1); }
    }

    .hero-content {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
      width: 100%;
    }

    .hero-text h1 {
      font-size: clamp(2.4rem, 5vw, 3.6rem);
      font-weight: 800;
      line-height: 1.2;
      margin-bottom: 16px;
      letter-spacing: -0.5px;
    }

    .hero-text p {
      color: var(--text-muted);
      font-size: 1.05rem;
      max-width: 440px;
      margin-bottom: 32px;
      line-height: 1.7;
    }

    .hero-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
    }

    .hero-images {
      position: relative;
      height: 420px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .hero-card {
      position: absolute;
      width: 160px;
      height: 220px;
      border-radius: 18px;
      overflow: hidden;
      border: 2px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
      background: linear-gradient(145deg, #2a1f35, #1a1225);
      /* 边框/阴影单独过渡，不与 float 的 transform 冲突 */
      transition:
        border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        z-index 0s;
      will-change: transform;
    }

    .hero-card img,
    .hero-card .img-placeholder {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
      transform: scale(1);
    }

    .hero-card:nth-child(1) {
      left: 10%;
      top: 40px;
      z-index: 1;
      animation: float1 6s ease-in-out infinite;
    }

    .hero-card:nth-child(2) {
      left: 35%;
      top: 0;
      z-index: 3;
      animation: float2 7s ease-in-out infinite;
    }

    .hero-card:nth-child(3) {
      right: 8%;
      top: 50px;
      z-index: 2;
      animation: float3 5.5s ease-in-out infinite;
    }

    .hero-card:hover {
      z-index: 10;
      border-color: rgba(255, 45, 106, 0.75);
      box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.45),
        0 0 36px rgba(255, 45, 106, 0.35);
    }

    /* 放大做在图片上，浮空动画继续跑，过渡更顺 */
    .hero-card:hover img,
    .hero-card:hover .img-placeholder {
      transform: scale(1.1);
    }

    .hero-card .img-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3rem;
      background: linear-gradient(160deg, #3a2a4a, #1f152e);
      color: rgba(255, 255, 255, 0.15);
    }

    @keyframes float1 {
      0%, 100% { transform: rotate(-8deg) translateY(0); }
      50% { transform: rotate(-6deg) translateY(-12px); }
    }
    @keyframes float2 {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-18px); }
    }
    @keyframes float3 {
      0%, 100% { transform: rotate(8deg) translateY(0); }
      50% { transform: rotate(6deg) translateY(-10px); }
    }

    /* ========== Stats ========== */
    .stats {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(ellipse 70% 80% at 50% 0%, rgba(255, 45, 106, 0.28), transparent 55%),
        radial-gradient(ellipse 50% 60% at 20% 80%, rgba(123, 44, 191, 0.25), transparent 50%),
        radial-gradient(ellipse 50% 60% at 80% 70%, rgba(255, 45, 106, 0.18), transparent 50%),
        linear-gradient(180deg, #1a0a24 0%, #14081c 40%, #0c0614 100%);
      border-top: 1px solid rgba(255, 45, 106, 0.2);
      border-bottom: 1px solid rgba(255, 45, 106, 0.15);
      padding: 64px 0 80px;
    }

    /* 背景光晕呼吸 */
    .stats::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 30%, rgba(255, 45, 106, 0.2), transparent 50%);
      animation: statsGlow 5s ease-in-out infinite alternate;
      pointer-events: none;
    }

    @keyframes statsGlow {
      0% { opacity: 0.5; transform: scale(1); }
      100% { opacity: 1; transform: scale(1.08); }
    }

    /* 流动光带 */
    .stats::after {
      content: "";
      position: absolute;
      top: 0;
      left: -50%;
      width: 60%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
      animation: statsShine 6s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes statsShine {
      0% { left: -50%; }
      100% { left: 120%; }
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      text-align: center;
      max-width: 900px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .stat-item {
      padding: 16px 20px 20px;
      position: relative;
      cursor: default;
      transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      border-radius: 16px;
    }

    .stat-item:not(:last-child)::after {
      content: "";
      position: absolute;
      right: 0;
      top: 22%;
      height: 50%;
      width: 1px;
      background: linear-gradient(to bottom, transparent, rgba(255, 120, 160, 0.35), transparent);
    }

    .stat-item:hover {
      transform: translateY(-8px);
      background: rgba(255, 45, 106, 0.08);
      box-shadow: 0 12px 40px rgba(255, 45, 106, 0.2);
    }

    .stat-item:hover h3 {
      filter: brightness(1.25);
      transform: scale(1.1);
      text-shadow: 0 0 30px rgba(255, 45, 106, 0.6);
    }

    .stat-item:hover .stat-title {
      color: var(--pink-light);
    }

    .stat-item h3 {
      font-size: 2.6rem;
      font-weight: 800;
      background: linear-gradient(135deg, #ffffff 0%, #ff8ab8 40%, #ff2d6a 100%);
      background-size: 200% 200%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 10px;
      display: inline-flex;
      align-items: baseline;
      justify-content: center;
      flex-wrap: nowrap;
      transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      animation: numberShimmer 3s ease-in-out infinite;
      filter: drop-shadow(0 0 12px rgba(255, 45, 106, 0.35));
    }

    @keyframes numberShimmer {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

    .stat-item h3 .counter,
    .stat-item h3.infinity {
      background: linear-gradient(135deg, #ffffff 0%, #ff8ab8 40%, #ff2d6a 100%);
      background-size: 200% 200%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: numberShimmer 3s ease-in-out infinite;
    }

    .stat-title {
      font-size: 0.92rem;
      font-weight: 500;
      color: rgba(248, 240, 245, 0.9);
      margin-bottom: 0;
      transition: color 0.3s;
    }

    /* 关于区块：与上方数据栏同宽、同节奏 */
    .about-in-stats {
      text-align: left;
      width: 100%;
      max-width: 900px;
      margin: 0 auto;
      padding-top: 44px;
      margin-top: 40px;
      position: relative;
      z-index: 1;
    }

    .about-in-stats::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 3px;
      border-radius: 3px;
      background: linear-gradient(90deg, transparent, #ff2d6a, #ff8ab8, transparent);
      box-shadow: 0 0 16px rgba(255, 45, 106, 0.5);
      animation: dividerPulse 2.5s ease-in-out infinite;
    }

    @keyframes dividerPulse {
      0%, 100% { opacity: 0.7; width: 64px; }
      50% { opacity: 1; width: 96px; }
    }

    .about-in-stats-title {
      font-size: clamp(1.45rem, 2.8vw, 1.85rem);
      font-weight: 700;
      margin-bottom: 20px;
      text-align: left;
      letter-spacing: 0.02em;
    }

    .about-in-stats-body {
      margin-bottom: 28px;
    }

    .about-in-stats-body p {
      color: rgba(200, 185, 205, 0.92);
      font-size: 0.94rem;
      line-height: 1.9;
      margin-bottom: 12px;
      text-align: left;
    }

    .about-in-stats-body .hl {
      color: #ff7a9c;
      background: rgba(255, 45, 106, 0.2);
      padding: 2px 8px;
      border-radius: 5px;
      font-weight: 500;
      box-shadow: 0 0 12px rgba(255, 45, 106, 0.15);
      transition: all 0.3s;
    }

    .about-in-stats-body .hl:hover {
      background: rgba(255, 45, 106, 0.35);
      box-shadow: 0 0 18px rgba(255, 45, 106, 0.35);
    }

    .about-in-stats .btn {
      margin-top: 4px;
      box-shadow: 0 6px 28px rgba(255, 45, 106, 0.45);
    }

    .about-in-stats .btn:hover {
      box-shadow: 0 10px 36px rgba(255, 45, 106, 0.6);
    }

    /* ========== City Cards ========== */
    .city-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 16px;
    }

    .city-card {
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--bg-card);
      border: 1px solid var(--border);
      transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      cursor: pointer;
    }

    .city-card:hover {
      transform: translateY(-10px);
      border-color: rgba(255, 45, 106, 0.4);
      box-shadow: 0 20px 40px -10px var(--pink-glow);
    }

    .city-img {
      aspect-ratio: 3/4;
      background: linear-gradient(160deg, #2e2238, #1a1225);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.2rem;
      color: rgba(255, 255, 255, 0.12);
      position: relative;
      overflow: hidden;
    }

    .city-img::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(10, 6, 18, 0.9) 0%, transparent 50%);
    }

    .city-info {
      padding: 12px;
      text-align: center;
    }

    .city-info h4 {
      font-size: 0.95rem;
      margin-bottom: 2px;
    }

    .city-info span {
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    /* ========== Features ========== */
    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .feature-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 28px 24px;
      transition: all 0.4s;
      position: relative;
      overflow: hidden;
    }

    .feature-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background: linear-gradient(to bottom, var(--pink), var(--purple));
      opacity: 0;
      transition: opacity 0.3s;
    }

    .feature-card:hover {
      background: var(--bg-card-hover);
      border-color: rgba(255, 45, 106, 0.25);
      transform: translateY(-4px);
    }

    .feature-card:hover::before {
      opacity: 1;
    }

    .feature-card h4 {
      font-size: 1.05rem;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .feature-card h4 span {
      color: var(--pink);
    }

    .feature-card p {
      color: var(--text-muted);
      font-size: 0.88rem;
      line-height: 1.7;
    }

    /* ========== Category ========== */
    .category-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }

    .cat-card {
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--bg-card);
      border: 1px solid var(--border);
      transition: all 0.4s;
      cursor: pointer;
    }

    .cat-card:hover {
      transform: translateY(-8px) scale(1.02);
      border-color: rgba(255, 45, 106, 0.4);
      box-shadow: 0 18px 36px -8px var(--pink-glow);
    }

    .cat-img {
      aspect-ratio: 1;
      background: linear-gradient(145deg, #2a1f38, #18122a);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.5rem;
      color: rgba(255, 255, 255, 0.1);
    }

    .cat-info {
      padding: 14px;
      text-align: center;
    }

    .cat-info h4 {
      font-size: 0.95rem;
      margin-bottom: 4px;
    }

    .cat-info span {
      font-size: 0.78rem;
      color: var(--text-muted);
    }

    /* ========== Reviews ========== */
    .reviews-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .review-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px;
      transition: all 0.35s;
    }

    .review-card:hover {
      border-color: rgba(255, 45, 106, 0.3);
      transform: translateY(-4px);
    }

    .review-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }

    .avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--pink), var(--purple));
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.9rem;
    }

    .review-meta h5 {
      font-size: 0.95rem;
    }

    .review-meta span {
      font-size: 0.78rem;
      color: var(--text-muted);
    }

    .review-card p {
      color: var(--text-muted);
      font-size: 0.88rem;
      line-height: 1.7;
    }

    /* ========== Bottom CTA ========== */
    .bottom-cta {
      background: linear-gradient(180deg, transparent, rgba(255, 45, 106, 0.08));
      padding: 80px 0;
    }

    .cta-box {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 48px;
      overflow: hidden;
      position: relative;
    }

    .cta-box::before {
      content: "";
      position: absolute;
      top: -50%;
      right: -20%;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(255, 45, 106, 0.15), transparent 70%);
      pointer-events: none;
    }

    .cta-text h2 {
      font-size: 1.8rem;
      margin-bottom: 12px;
    }

    .cta-text p {
      color: var(--text-muted);
      margin-bottom: 28px;
      line-height: 1.7;
    }

    .cta-images {
      display: flex;
      gap: 16px;
      justify-content: flex-end;
    }

    .cta-img {
      width: 140px;
      height: 180px;
      border-radius: 14px;
      background: linear-gradient(145deg, #2e2238, #1a1225);
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      color: rgba(255, 255, 255, 0.12);
      transition: transform 0.4s;
    }

    .cta-img:hover {
      transform: scale(1.05);
    }

    /* ========== Footer（组件样式已全局化至 common.css） ========== */

    /* ========== 滚动动画 ========== */
    /* ========== 响应式 ========== */
    @media (max-width: 1024px) {
      .city-grid { grid-template-columns: repeat(3, 1fr); }
      .features-grid { grid-template-columns: repeat(2, 1fr); }
      .category-grid { grid-template-columns: repeat(2, 1fr); }
      .reviews-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 768px) {
      .hero-content { grid-template-columns: 1fr; text-align: center; }
      .hero-text p { margin-left: auto; margin-right: auto; }
      .hero-actions { justify-content: center; }
      .hero-images { height: 280px; margin-top: 20px; }
      .hero-card { width: 110px; height: 150px; }
      .stats-grid { grid-template-columns: 1fr; gap: 8px; }
      .stat-item { padding: 20px 16px; }
      .stat-item:not(:last-child)::after { display: none; }
      .stat-item:not(:last-child) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }
      .stats-grid { max-width: 100%; }
      .about-in-stats {
        max-width: 100%;
        margin-top: 28px;
        padding-top: 28px;
      }
      .about-in-stats-body p {
        font-size: 0.9rem;
      }
      .city-grid { grid-template-columns: repeat(2, 1fr); }
      .features-grid { grid-template-columns: 1fr; }
      .category-grid { grid-template-columns: repeat(2, 1fr); }

      /* 底部 CTA 移动端优化 */
      .cta-box {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 32px 20px;
        gap: 28px;
      }
      .cta-text h2 {
        font-size: 1.4rem;
      }
      .cta-text p {
        font-size: 0.9rem;
        margin-bottom: 20px;
      }
      .cta-btns {
        justify-content: center !important;
        flex-direction: column;
        align-items: center;
      }
      .cta-btns .btn {
        width: 100%;
        max-width: 260px;
      }
      .cta-images {
        justify-content: center;
        gap: 12px;
      }
      .cta-img {
        width: 110px;
        height: 140px;
      }

      /* Footer 移动端样式已全局化至 common.css */

      header { padding: 12px 16px; }
      .nav-link { display: none; }
      .section { padding: 56px 0; }
    }

    @media (max-width: 480px) {
      .cta-box {
        padding: 28px 16px;
      }
      .cta-img {
        width: 96px;
        height: 124px;
      }
      .city-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    }

/* Images inside cards */
.hero-card img,
.city-img img,
.cat-img img,
.cta-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ========== 城市区（全球华人精选）：web 端横向滑动（隐藏滚动条 + 鼠标拖拽），移动端保持网格 ========== */
@media (min-width: 901px) {
  .city-grid {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding-bottom: 12px;
    cursor: grab;
    scrollbar-width: none;              /* Firefox 隐藏滚动条 */
    -ms-overflow-style: none;           /* 旧 Edge 隐藏滚动条 */
  }
  .city-grid::-webkit-scrollbar { display: none; }  /* WebKit 隐藏滚动条 */
  .city-grid.dragging {
    cursor: grabbing;
    user-select: none;
  }
  .city-grid .city-img img {
    -webkit-user-drag: none;            /* 禁止图片原生拖拽 */
    user-select: none;
  }
  .city-grid .city-card {
    flex: 0 0 calc((100% - 80px) / 6);
  }
}

/* ========== 分类区（全品类任您挑选）：每页 8 个分页 + 过渡动画（web 与移动端一致） ========== */
#categoryGrid {
  transition: opacity 0.28s ease, transform 0.28s ease;
}
#categoryGrid.fading {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}
.cat-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
}
.cat-pager[hidden] {
  display: none !important; /* 无第二页时强制隐藏，优先级最高 */
}
.cat-pager button {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.25s;
}
.cat-pager button:hover:not(:disabled) {
  /*border-color: rgba(255, 45, 106, 0.5);
  color: var(--pink);*/
  transform: translateY(-2px);
}
.cat-pager button.active {
  background: linear-gradient(135deg, var(--pink), var(--purple));
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}
.cat-pager button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
@media (max-width: 900px) {
  .cat-pager { margin-top: 22px; }
  .cat-pager button { min-width: 32px; height: 32px; font-size: 0.84rem; }
}

.city-img, .cat-img, .cta-img, .hero-card {
  overflow: hidden;
}

.city-img::after {
  pointer-events: none;
}