/* ============================================================
   王文鑫手机店 - Premium UI Enhancement
   全面品质升级：视觉打磨 / 微交互 / 动效 / 排版 / 性能
   叠加在 style.css 之上，不修改原有样式
   ============================================================ */

/* ============================================================
   1. 设计令牌 (Design Tokens) — 统一变量
   ============================================================ */
:root {
  /* 圆角体系 */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* 阴影体系 (4层递进) */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.10);
  --shadow-xl: 0 16px 48px rgba(0,0,0,.12);
  --shadow-glow-blue: 0 0 20px rgba(37,99,235,.15);
  --shadow-glow-green: 0 0 20px rgba(16,185,129,.15);
  --shadow-glow-orange: 0 0 20px rgba(255,107,53,.15);

  /* 过渡曲线 */
  --ease-premium: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-smooth: cubic-bezier(.4,0,.2,1);

  /* 间距体系 */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* 字号层级 */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 40px;

  /* 行高层级 */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Z-index 层级 */
  --z-card: 1;
  --z-sticky: 10;
  --z-fixed: 50;
  --z-overlay: 200;
  --z-modal: 400;
  --z-toast: 9000;

  /* 安全区 */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ============================================================
   2. 全局排版优化
   ============================================================ */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* 平滑滚动 + GPU加速 */
  scroll-behavior: smooth;
}

body {
  /* 中文字体渲染优化 */
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-variant-ligatures: common-ligatures;
  font-variant-ligatures: common-ligatures;
  /* 优化中文排版 */
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  /* 减少移动端300ms延迟 */
  touch-action: manipulation;
}

/* 选中文字样式 */
::selection {
  background: rgba(37,99,235,.15);
  color: #1e3a5f;
}

/* 中文标点挤压 */
.hero-title, .section-title, .product-name, .service-name,
.pawn-name, .flow-title, .brand-name, .process-title {
  text-spacing: .05em;
  letter-spacing: -.01em;
}

/* ============================================================
   3. 视觉打磨 — 圆角统一 / 阴影层次 / 渐变质感
   ============================================================ */

/* --- Header 磨砂玻璃升级 --- */
.header {
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  background: rgba(255,255,255,.88) !important;
}
.header.scrolled {
  box-shadow: 0 1px 24px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.03) !important;
}

/* --- 卡片统一圆角 + 阴影层次 --- */
.product-card,
.service-card,
.pawn-card,
.case-card,
.brand-card,
.process-card,
.condition-card,
.contact-info-card,
.hero-warning-card,
.announcement-card,
.pawn-adv-card,
.pawn-cta-card,
.cta-card,
.page-card,
.content-text,
.contact-intro-box {
  border-radius: var(--radius-xl) !important;
  transition: transform .35s var(--ease-premium),
              box-shadow .35s var(--ease-premium) !important;
}

/* 桌面端卡片悬浮效果 */
@media (min-width: 769px) {
  .product-card:hover,
  .service-card:hover,
  .pawn-card:hover,
  .brand-card:hover,
  .pawn-adv-card:hover,
  .case-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--shadow-lg), var(--shadow-glow-blue) !important;
  }

  /* 产品卡图片悬浮缩放 */
  .product-card:hover .product-image img {
    transform: scale(1.06);
  }
  .product-image img {
    transition: transform .5s var(--ease-premium) !important;
  }
}

/* --- 联系卡片 hover + active --- */
.contact-info-card {
  transition: transform .25s var(--ease-premium),
              box-shadow .25s var(--ease-premium),
              border-color .25s !important;
}
.contact-info-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md) !important;
}
.contact-info-card:active {
  transform: translateY(-1px) scale(.98) !important;
  transition-duration: .1s !important;
}

/* --- 流程卡片悬浮 --- */
.process-card:hover,
.pawn-flow-step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.process-card,
.pawn-flow-step {
  transition: transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium);
}

/* --- 品牌卡片渐变背景 --- */
.brand-card {
  position: relative;
  overflow: hidden;
}
.brand-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(37,99,235,.03), rgba(16,185,129,.03));
  opacity: 0;
  transition: opacity .3s;
}
.brand-card:hover::after {
  opacity: 1;
}

/* --- Hero Section 视觉增强 --- */
.page-hero {
  position: relative;
  overflow: hidden;
}
.hero-gradient {
  background-size: 200% 200% !important;
  animation: heroGradientShift 8s ease infinite;
}
@keyframes heroGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* 微妙的光晕装饰 */
.hero-bg::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(ellipse, rgba(255,255,255,.08) 0%, transparent 70%);
  pointer-events: none;
}

/* --- 防骗卡片渐变边框 --- */
.hero-warning-card {
  position: relative;
  border: 1px solid rgba(255,200,0,.12) !important;
  background: linear-gradient(135deg, rgba(255,243,205,.95), rgba(255,255,255,.95)) !important;
}
.hero-warning-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #f59e0b, #ef4444);
  border-radius: 4px 0 0 4px;
}

/* ============================================================
   4. 微交互 — hover / click / 卡片 / 按钮
   ============================================================ */

/* --- 按钮磁吸 + 光泽 --- */
.btn-accent,
.btn-phone,
.pawn-cta-btn-primary,
.service-page-btn-primary,
.card-btn-phone,
.mobile-call-btn {
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--ease-premium),
              box-shadow .25s var(--ease-premium) !important;
}
/* 按钮光泽扫过效果 */
.btn-accent::after,
.btn-phone::after,
.pawn-cta-btn-primary::after,
.service-page-btn-primary::after {
  content: '';
  position: absolute;
  top: -50%; left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform: skewX(-20deg);
  transition: left .6s var(--ease-premium);
  pointer-events: none;
}
.btn-accent:hover::after,
.btn-phone:hover::after,
.pawn-cta-btn-primary:hover::after,
.service-page-btn-primary:hover::after {
  left: 120%;
}
.btn-accent:hover,
.btn-phone:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(37,99,235,.3) !important;
}
.btn-accent:active,
.btn-phone:active {
  transform: translateY(0) scale(.97) !important;
  transition-duration: .08s !important;
}

/* --- CTA 按钮脉冲 --- */
.pawn-cta-btn-primary,
.service-page-btn-primary {
  animation: ctaPulse 3s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(37,99,235,.25); }
  50% { box-shadow: 0 4px 24px rgba(37,99,235,.4); }
}

/* --- Nav 链接滑动下划线 --- */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: #2563eb;
  border-radius: 2px;
  transition: width .3s var(--ease-premium), left .3s var(--ease-premium);
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 60%;
  left: 20%;
}

/* --- 底部 Tab 反馈 --- */
.bottom-btn:active svg,
.bottom-btn-center:active .bottom-center-icon {
  transform: scale(.88) !important;
  transition-duration: .08s !important;
}

/* --- 服务图标旋转 --- */
.service-icon-circle {
  transition: transform .4s var(--ease-spring) !important;
}
.service-icon-card:hover .service-icon-circle {
  transform: scale(1.08) rotate(5deg) !important;
}

/* --- 回到顶部/浮动按钮 --- */
.back-top,
.float-telegram {
  transition: transform .3s var(--ease-premium),
              box-shadow .3s var(--ease-premium) !important;
  will-change: transform;
}
.back-top:hover {
  transform: translateY(-3px) !important;
}
.float-telegram:active,
.back-top:active {
  transform: scale(.92) !important;
  transition-duration: .08s !important;
}

/* --- Mega Menu 入场动画增强 --- */
.dropdown-panel {
  animation: megaDropIn .25s var(--ease-premium) !important;
}
@keyframes megaDropIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ============================================================
   5. 动效升级 — 入场/滚动/交错/数字
   ============================================================ */

/* --- 滚动显现 (增强版) --- */
.scroll-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease-premium),
              transform .7s var(--ease-premium) !important;
  will-change: opacity, transform;
}
.scroll-animate.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.scroll-animate-delay-1 { transition-delay: .1s !important; }
.scroll-animate-delay-2 { transition-delay: .2s !important; }
.scroll-animate-delay-3 { transition-delay: .3s !important; }

/* --- 卡片交错加载 --- */
.product-card.scroll-animate,
.service-card.scroll-animate,
.pawn-card.scroll-animate,
.case-card.scroll-animate,
.brand-card.scroll-animate,
.pawn-adv-card.scroll-animate {
  opacity: 0;
  transform: translateY(30px) scale(.97);
}
.product-card.scroll-animate.visible,
.service-card.scroll-animate.visible,
.pawn-card.scroll-animate.visible,
.case-card.scroll-animate.visible,
.brand-card.scroll-animate.visible,
.pawn-adv-card.scroll-animate.visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* --- 数字跳动计数器 --- */
.trust-value,
.hero-stat-num,
.pawn-loan-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* --- Hero Badge 弹入 --- */
.hero-badge {
  animation: badgeBounce .6s var(--ease-spring) !important;
}
@keyframes badgeBounce {
  0% { opacity: 0; transform: scale(.5) translateY(10px); }
  60% { transform: scale(1.05) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- Hero Title 打字效果 --- */
.hero-title.scroll-animate.visible {
  animation: titleSlideIn .6s var(--ease-premium);
}
@keyframes titleSlideIn {
  from { opacity: 0; transform: translateY(16px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* --- Section Header 渐入 --- */
.section-header.scroll-animate.visible {
  animation: sectionFadeIn .5s var(--ease-premium);
}
@keyframes sectionFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- 产品标签弹入 --- */
.product-badge {
  animation: badgePop .4s var(--ease-spring);
}
@keyframes badgePop {
  0% { transform: scale(0); }
  80% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* --- 流程箭头脉冲 --- */
.flow-arrow,
.step-arrow {
  animation: arrowPulse 2s ease-in-out infinite;
}
@keyframes arrowPulse {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}

/* ============================================================
   6. 图片处理 — 懒加载/骨架屏/hover缩放/圆角统一
   ============================================================ */

/* --- 图片统一圆角 --- */
.product-image img,
.brand-icon img,
.footer-qr-img img {
  border-radius: var(--radius-md);
}

/* --- 图片懒加载占位 --- */
img[loading="lazy"] {
  background: linear-gradient(135deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- 产品占位骨架屏 --- */
.product-placeholder {
  background: linear-gradient(135deg, #f0f4ff, #e8f0fe);
  position: relative;
  overflow: hidden;
}
.product-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* --- 图片容器统一圆角 --- */
.product-image,
.hero-qr-img,
.footer-qr-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ============================================================
   7. 交互逻辑 — Toast / 复制成功 / 加载状态
   ============================================================ */

/* --- Toast 通知 --- */
.premium-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  padding: 12px 28px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 600;
  z-index: var(--z-toast);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: all .4s var(--ease-premium);
  pointer-events: none;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.premium-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.premium-toast.success {
  background: rgba(16,185,129,.95);
  color: #fff;
  box-shadow: 0 8px 32px rgba(16,185,129,.3);
}
.premium-toast.info {
  background: rgba(37,99,235,.95);
  color: #fff;
  box-shadow: 0 8px 32px rgba(37,99,235,.3);
}
.premium-toast.warning {
  background: rgba(245,158,11,.95);
  color: #fff;
  box-shadow: 0 8px 32px rgba(245,158,11,.3);
}

/* --- 复制成功涟漪 --- */
.copy-ripple {
  position: fixed;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(16,185,129,.2);
  animation: rippleOut .6s ease-out forwards;
  pointer-events: none;
  z-index: var(--z-toast);
}
@keyframes rippleOut {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* --- 按钮加载状态 --- */
.btn-loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-loading::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .6s linear infinite;
}

/* --- 表单输入焦点增强 --- */
.form-input {
  transition: border-color .25s, box-shadow .25s !important;
  border-radius: var(--radius-md) !important;
}
.form-input:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
}

/* ============================================================
   8. 移动端优化 — 触控/安全区/底部栏
   ============================================================ */
@media (max-width: 1024px) {
  /* 安全区适配 */
  .mobile-bottom-bar {
    padding-bottom: var(--safe-bottom) !important;
    padding-bottom: max(8px, var(--safe-bottom)) !important;
  }

  /* 回到顶部按钮避开底部栏 */
  .back-top {
    bottom: calc(80px + var(--safe-bottom)) !important;
  }

  /* 触控区域至少44px */
  .nav-link, .footer-link, .mega-item, .mobile-link,
  .mobile-quick-item, .bottom-btn, .bottom-btn-center,
  .card-btn, .btn, .m-contact-row {
    min-height: 44px;
    min-width: 44px;
  }

  /* 移动端取消hover效果的延迟等待 */
  a, button, .contact-info-card, .product-card {
    -webkit-tap-highlight-color: transparent;
  }

  /* 移动端滚动更流畅 */
  .mobile-menu-body,
  .page-hero .hero-content {
    -webkit-overflow-scrolling: touch;
  }

  /* 浮动按钮安全区 */
  .float-telegram {
    bottom: calc(136px + var(--safe-bottom)) !important;
  }
  .float-phone {
    bottom: calc(200px + var(--safe-bottom)) !important;
  }
}

/* 小屏手机优化 (≤380px) */
@media (max-width: 380px) {
  .hero-title {
    font-size: 20px !important;
  }
  .section-title {
    font-size: 18px !important;
  }
  .product-name {
    font-size: 13px !important;
  }
  .nav-link {
    padding: 6px 6px !important;
    font-size: 12px !important;
  }
}

/* ============================================================
   9. Footer 视觉升级
   ============================================================ */
.footer {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-top: 1px solid rgba(0,0,0,.04) !important;
}
.footer-logo {
  font-size: 18px !important;
}
.footer-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin-bottom: 12px !important;
}
.footer-link {
  transition: color .2s, padding-left .2s !important;
  border-radius: var(--radius-sm);
  padding: 4px 0 !important;
}
.footer-link:hover {
  color: #2563eb !important;
  padding-left: 4px !important;
}
.footer-desc {
  line-height: 1.7 !important;
  color: #64748b !important;
}
.footer-warn {
  background: rgba(245,158,11,.06);
  border: 1px solid rgba(245,158,11,.15);
  border-radius: var(--radius-md);
  padding: 10px 14px !important;
  margin-top: 12px;
  font-size: 13px;
  color: #92400e !important;
}
.footer-contact-list p {
  padding: 3px 0 !important;
  transition: color .2s !important;
}
.footer-contact-list p:hover {
  color: #2563eb !important;
}
.footer-qr-img {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .3s var(--ease-premium), box-shadow .3s !important;
}
.footer-qr-img:hover {
  transform: scale(1.05) !important;
  box-shadow: var(--shadow-md) !important;
}
.footer-seo-link {
  transition: color .2s !important;
}
.footer-seo-link:hover {
  color: #2563eb !important;
}
.footer-bottom {
  border-top: 1px solid rgba(0,0,0,.05) !important;
  padding-top: 16px !important;
}

/* ============================================================
   10. 性能优化 — GPU加速/首屏
   ============================================================ */

/* --- GPU 加速关键元素 --- */
.header,
.product-card,
.service-card,
.pawn-card,
.brand-card,
.contact-info-card,
.back-top,
.float-telegram,
.float-phone,
.mobile-bottom-bar,
.mobile-menu {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* --- 减少动画 (无障碍) --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .scroll-animate {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- 首屏关键渲染优化 --- */
.hero-content {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}

/* --- Section 懒渲染 --- */
@media (min-width: 769px) {
  .services-section,
  .hot-section,
  .news-section,
  .process-section,
  .cases-section,
  .faq-section,
  .pawn-services-section,
  .pawn-process-section,
  .pawn-advantages-section,
  .recycle-brands-section,
  .conditions-section,
  .contact-info-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
  }
}

/* ============================================================
   11. 首页特殊增强
   ============================================================ */

/* --- Hero 信息栏 --- */
.hero-info-bar {
  background: rgba(255,255,255,.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: var(--radius-2xl) !important;
}

/* --- 服务图标卡 --- */
.service-icon-card {
  transition: transform .35s var(--ease-premium),
              box-shadow .35s var(--ease-premium) !important;
}
.service-icon-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md) !important;
}
.service-icon-card:active {
  transform: translateY(-1px) scale(.98) !important;
  transition-duration: .08s !important;
}

/* --- 新闻公告卡片 --- */
.announcement-card {
  border-radius: var(--radius-xl) !important;
}
.news-item-link {
  transition: background .2s !important;
  border-radius: var(--radius-md) !important;
}
.news-item-link:hover {
  background: #f8fafc !important;
}
.news-item {
  transition: transform .2s !important;
}
.news-item-link:hover .news-item {
  transform: translateX(4px) !important;
}
.news-arrow {
  transition: transform .25s var(--ease-premium) !important;
}
.news-item-link:hover .news-arrow {
  transform: translateX(4px) !important;
}

/* --- CTA Banner --- */
.home-cta-banner {
  background: linear-gradient(135deg, #1e3a5f, #2563eb, #059669) !important;
  background-size: 200% 200% !important;
  animation: ctaGradient 6s ease infinite !important;
}
@keyframes ctaGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ============================================================
   12. 产品页增强
   ============================================================ */
@media (min-width: 769px) {
  .product-card {
    border-radius: var(--radius-xl) !important;
    overflow: hidden;
  }
  .product-card:hover {
    box-shadow: var(--shadow-lg) !important;
  }
  .product-card:hover .product-name {
    color: #2563eb !important;
  }
  .product-name {
    transition: color .25s !important;
  }
}

/* 价格标签 */
.price-current {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   13. Service 页面增强
   ============================================================ */

/* --- 信任数据墙 --- */
.trust-item {
  transition: transform .3s var(--ease-premium) !important;
}
.trust-item:hover {
  transform: scale(1.05) !important;
}

/* --- 特色标签 --- */
.hero-feature-tag {
  transition: transform .2s var(--ease-spring),
              box-shadow .2s !important;
}
.hero-feature-tag:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* --- 案例卡片 --- */
.case-card {
  transition: transform .35s var(--ease-premium),
              box-shadow .35s var(--ease-premium) !important;
}
@media (min-width: 769px) {
  .case-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-lg) !important;
  }
}
.case-avatar {
  transition: transform .3s var(--ease-spring) !important;
}
.case-card:hover .case-avatar {
  transform: scale(1.08) !important;
}

/* ============================================================
   14. Pawn 页面增强
   ============================================================ */

/* --- 抵押卡光泽 --- */
.pawn-card {
  position: relative;
  overflow: hidden;
}
.pawn-card-glow {
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 200%;
  background: radial-gradient(ellipse, rgba(212,175,55,.06) 0%, transparent 70%);
  pointer-events: none;
  transition: opacity .3s;
}
.pawn-card:hover .pawn-card-glow {
  opacity: 1;
}

/* --- 优势卡片 --- */
.pawn-adv-card {
  transition: transform .35s var(--ease-premium),
              box-shadow .35s var(--ease-premium) !important;
}
@media (min-width: 769px) {
  .pawn-adv-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-lg) !important;
  }
}

/* ============================================================
   15. Recycling 页面增强
   ============================================================ */
.condition-card {
  transition: transform .3s var(--ease-premium),
              box-shadow .3s var(--ease-premium) !important;
}
.condition-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-md) !important;
}

/* ============================================================
   16. About 页面增强
   ============================================================ */
.about-stat {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   17. 全局骨架屏 (加载占位)
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}
.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
  border-radius: 4px;
}
.skeleton-text.short {
  width: 60%;
}
.skeleton-title {
  height: 22px;
  width: 50%;
  margin-bottom: 12px;
  border-radius: 4px;
}
.skeleton-image {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
}

/* ============================================================
   18. 页面顶部装饰线
   ============================================================ */
.page-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #10b981, #f59e0b, #ef4444);
  background-size: 300% 100%;
  animation: topLineShift 4s ease infinite;
  z-index: 2;
}
@keyframes topLineShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 首页 Hero 不需要顶部装饰线 */
.hero-simple::before {
  display: none;
}

/* ============================================================
   19. 滚动条美化
   ============================================================ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.15);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,.25);
}

/* 移动端隐藏滚动条 */
@media (max-width: 1024px) {
  ::-webkit-scrollbar {
    display: none;
  }
  * {
    scrollbar-width: none;
  }
}

/* ============================================================
   20. Focus 可见性 (无障碍)
   ============================================================ */
:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 4px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================
   21. Print 优化
   ============================================================ */
@media print {
  .header, .footer, .mobile-bottom-bar,
  .back-top, .float-telegram, .float-phone,
  .mobile-overlay, .mobile-menu {
    display: none !important;
  }
  body {
    color: #000 !important;
    background: #fff !important;
  }
  .page-hero {
    background: #f0f0f0 !important;
    color: #000 !important;
  }
}