/* ---------- 演示卡片（可删除） ---------- */
    .demo-card {
      background: #fff;
      max-width: 500px;
      width: 100%;
      padding: 2rem 1.5rem;
      border-radius: 28px;
      box-shadow: 0 20px 35px -8px rgba(0, 0, 0, 0.12);
      text-align: center;
    }

    .demo-card h1 {
      font-size: 1.7rem;
      color: #25d366;
      margin-bottom: 0.6rem;
    }

    .demo-card p {
      color: #475569;
      line-height: 1.6;
      font-size: 0.98rem;
    }

    .demo-card .small-note {
      font-size: 0.82rem;
      color: #64748b;
      border-top: 1px solid #e2e8f0;
      margin-top: 1.5rem;
      padding-top: 1.2rem;
    }

    /* ============================================================
       浮动联系栏 - 核心样式
       ============================================================ */
    .floating-contact {
      position: fixed;
      right: 24px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 14px;
      z-index: 9999;
      /* 入场动画 */
      animation: slideInRight 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }

    @keyframes slideInRight {
      from {
        opacity: 0;
        transform: translateY(-50%) translateX(32px);
      }
      to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
      }
    }

    /* 按钮基础样式 */
    .contact-btn {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 26px;
      text-decoration: none;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
      transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
      position: relative;
      cursor: pointer;
      border: none;
      outline: none;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      background: #334155; /* fallback */
    }

    /* 各按钮品牌色 */
    .btn-email    { background: #ea4335; }  /* 邮箱红 */
    .btn-facebook { background: #1877f2; }  /* Facebook 蓝 */
    .btn-whatsapp { background: #25d366; }  /* WhatsApp 绿 */
    .btn-youtube  { background: #ff0000; }  /* YouTube 红 */

    /* 悬停 / 焦点效果 */
    .contact-btn:hover,
    .contact-btn:focus-visible {
      transform: scale(1.12);
      box-shadow: 0 14px 26px rgba(0, 0, 0, 0.25);
      filter: brightness(1.06);
    }

    .contact-btn:active {
      transform: scale(0.95);
    }

    /* 图标居中 */
    .contact-btn i {
      font-size: 28px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    /* ---------- 工具提示（悬停显示） ---------- */
    /* 提示文字气泡 */
    .contact-btn::after {
      content: attr(data-tooltip);
      position: absolute;
      right: 76px;
      top: 50%;
      transform: translateY(-50%) translateX(6px);
      background: #25d366;
      color: #fff;
      font-size: 0.78rem;
      font-weight: 500;
      padding: 7px 15px;
      border-radius: 32px;
      white-space: nowrap;
      letter-spacing: 0.2px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
      pointer-events: none;
      border: 1px solid rgba(255, 255, 255, 0.08);
      font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
    }

    /* 提示小箭头 */
    .contact-btn::before {
      content: '';
      position: absolute;
      right: 68px;
      top: 50%;
      transform: translateY(-50%) translateX(6px);
      border: 7px solid transparent;
      border-left-color: #25d366;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;
      pointer-events: none;
    }

    /* 悬停时显示提示 */
    .contact-btn:hover::after,
    .contact-btn:hover::before,
    .contact-btn:focus-visible::after,
    .contact-btn:focus-visible::before {
      opacity: 1;
      visibility: visible;
      transform: translateY(-50%) translateX(0);
    }

    /* ---------- 响应式适配 ---------- */
    @media (max-width: 640px) {
      .floating-contact {
        right: 16px;
        gap: 11px;
      }

      .contact-btn {
        width: 52px;
        height: 52px;
      }

      .contact-btn i {
        font-size: 24px;
      }

      .contact-btn::after {
        right: 68px;
        font-size: 0.72rem;
        padding: 6px 12px;
      }

      .contact-btn::before {
        right: 60px;
        border-width: 6px;
      }
    }

    @media (max-width: 420px) {
      .floating-contact {
        right: 12px;
        gap: 9px;
      }

      .contact-btn {
        width: 46px;
        height: 46px;
      }

      .contact-btn i {
        font-size: 21px;
      }

      .contact-btn::after {
        right: 60px;
        font-size: 0.66rem;
        padding: 5px 10px;
      }

      .contact-btn::before {
        right: 53px;
        border-width: 5px;
      }
    }

    /* 减少动画偏好 */
    @media (prefers-reduced-motion: reduce) {
      .floating-contact,
      .contact-btn,
      .contact-btn::after,
      .contact-btn::before {
        animation: none !important;
        transition: none !important;
      }
    }