﻿/* ============================================
   中健兴康官网 · 移动端优化补丁 v4.10
   优化日期：2026-06-28
   优化目标：更精致的移动端排版体验
   v4.10 更新：
   - 生态消费积分权益兑换item为整张绿色横版卡片
   - 标题+绿色圆形图标，描述文字深绿色
   - 警告信息白色半透明内嵌卡片
   v4.9 更新（已撤销对比列表方案，恢复原HTML结构）：
   - 重构HTML添加对比列表 → 后撤销，恢复原HTML
   v4.2 更新：
   - 修复流程步骤组件对齐问题（STEP编号+图标+文字）
   - 优化对比布局间距和红色边框样式
   - 修复页脚导航分组和视觉层次
   - 优化列表项间距和图标对齐
   v4.1 更新：
   - 修复多列网格在小屏上的拥挤问题（2/3/4列强制改为1列）
   - 优化卡片内边距，统一为至少20px
   - 修复流程步骤组件的移动端布局
   - 优化对比布局（可做事情/严格禁止）为上下堆叠
   - 修复法规卡片的文字排版和换行问题
   - 优化底部风险提示条高度自适应
   - 增加小屏设备（375px以下）特殊处理
   v4.0 更新：
   - 删除"合规监督举报"板块，只保留"商务合作"
   - 优化底部导航排版：品牌区域、分组标题、联系卡片
   - 新增安全区域适配（iPhone X刘海屏）
   - 新增横屏模式优化
   - 新增高DPI屏幕优化
   - 新增减弱动效偏好支持
   - 新增打印样式优化
   - 新增移动端细节优化（图片、表格、列表、按钮等）
   v3.5 更新：
   - 优化汉堡菜单：侧边抽屉样式，更好的视觉层次和交互
   - 优化页脚导航：深色背景下的分组、间距、视觉层次
   - 菜单项添加箭头图标，更好的点击反馈
   - 分组标题使用金色强调，更清晰的层级
   v3.0 更新：
   - 权威背书卡片从2列改为单列（内容多，阅读体验更好）
   - 信任矩阵改为单列
   - 优化背书卡片内部排版（字号、间距、列表）
   - 优化小屏下的卡片内边距
   ============================================ */

/* ============================================
   基础优化（无 media）— 始终生效
   ============================================ */
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-size: 16px;
  line-height: 1.7;
  word-wrap: break-word;
  overflow-wrap: break-word;
  padding-bottom: calc(var(--risk-bar-height) + var(--space-4));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 优化中文阅读体验 */
p, li, td, th {
  text-align: justify;
  text-justify: inter-ideograph;
}

/* ============================================
   平板及以下 @media (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
  /* 1) 横向溢出防护 */
  html, body {
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  img, table, pre, code {
    max-width: 100%;
  }
  
  img {
    height: auto;
  }
  
  pre {
    white-space: pre-wrap;
    word-break: break-all;
  }

  /* 2) 智能 Grid 适配 */
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-4) !important;
  }
  
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-4) !important;
  }
  
  [style*="grid-template-columns: repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-4) !important;
  }
  
  [data-mobile-cols="1"] {
    grid-template-columns: 1fr !important;
  }
  
  [data-mobile-cols="2"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 3) 导航汉堡化 - 侧边抽屉 */
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 82vw;
    max-width: 320px;
    background: var(--color-bg);
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 0;
    transform: translateX(100%);
    transition: transform var(--duration-base) var(--ease-out);
    overflow-y: auto;
    box-shadow: -8px 0 40px rgba(10, 37, 64, 0.15);
    z-index: var(--z-sticky);
  }
  
  .nav.is-open {
    transform: translateX(0);
  }
  
  .nav::before {
    content: "";
    display: block;
    height: var(--header-height);
    background: var(--color-bg-warm);
    border-bottom: 1px solid var(--color-border);
  }
  
  .nav__link {
    display: flex;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-body);
    border-bottom: 1px solid var(--color-border-light);
    width: 100%;
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    transition: all var(--duration-fast);
    position: relative;
  }
  
  .nav__link:hover,
  .nav__link:active {
    background: var(--color-bg-warm);
    color: var(--color-primary);
  }
  
  .nav__link.is-active {
    color: var(--color-primary);
    font-weight: var(--weight-semibold);
    background: rgba(10, 37, 64, 0.04);
  }
  
  .nav__link.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-primary);
  }
  
  .nav__link--compliance {
    margin: var(--space-5) var(--space-6);
    padding: var(--space-4);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-radius: var(--radius-md);
    border-bottom: none;
    text-align: center;
    font-weight: var(--weight-semibold);
    justify-content: center;
    gap: var(--space-2);
  }
  
  .nav__link--compliance:hover,
  .nav__link--compliance:active {
    background: var(--color-primary-dark);
    color: var(--color-text-inverse);
  }
  
  .nav__link--compliance::before {
    display: none;
  }
  
  .nav__toggle {
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: 0;
    cursor: pointer;
    border-radius: var(--radius-sm);
    z-index: calc(var(--z-sticky) + 1);
  }
  
  .nav__toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-primary);
    transition: all var(--duration-fast) var(--ease-out);
    border-radius: 1px;
  }
  
  .nav.is-open ~ .nav__toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  
  .nav.is-open ~ .nav__toggle span:nth-child(2) {
    opacity: 0;
  }
  
  .nav.is-open ~ .nav__toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  
  .nav__overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10, 37, 64, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: all var(--duration-base);
    z-index: calc(var(--z-sticky) - 1);
  }
  
  .nav__overlay.is-visible {
    opacity: 1;
    visibility: visible;
  }

  /* 4) Hero 优化 */
  .hero {
    min-height: auto;
    padding: var(--space-10) 0 var(--space-8);
  }
  
  .hero__title {
    font-size: var(--text-h1);
    line-height: 1.25;
  }
  
  .hero__sub {
    font-size: var(--text-body);
  }

  /* 5) Section 间距优化 */
  .section {
    padding: var(--space-12) 0;
  }
  
  .section-head__title {
    font-size: var(--text-h2);
  }
  
  .section-head__lead {
    font-size: var(--text-body);
  }

  /* 6) 数据看板优化 */
  .dashboard__grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-4) !important;
  }
  
  .dashboard__head {
    flex-direction: column;
    gap: var(--space-4);
  }
  
  .data-card {
    padding: var(--space-5);
  }
  
  .data-card__value {
    font-size: 28px;
  }
  
  .data-card__label {
    font-size: var(--text-small);
  }

  /* 7) 业务总览优化 */
  .biz-overview {
    grid-template-columns: 1fr !important;
    gap: var(--space-6) !important;
  }
  
  .biz-overview__column {
    padding: var(--space-6);
  }
  
  .biz-overview__title {
    font-size: var(--text-h3);
    margin-bottom: var(--space-3);
  }
  
  .biz-overview__sub {
    font-size: var(--text-small);
    margin-bottom: var(--space-6);
    line-height: 1.7;
  }
  
  .biz-overview__items {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-3) !important;
  }
  
  .biz-overview__item {
    padding: var(--space-4);
  }
  
  .biz-overview__item-title {
    font-size: var(--text-body);
    margin-bottom: var(--space-2);
  }
  
  .biz-overview__item-desc {
    font-size: var(--text-small);
    line-height: 1.7;
  }
  
  .biz-overview__boundary {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
    line-height: 1.6;
    margin-top: var(--space-3);
  }

  /* 8) 权威背书优化 */
  .endorsement {
    padding: var(--space-6);
  }
  
  .endorsement__title {
    font-size: var(--text-h3);
  }
  
  .endorsement__content {
    gap: var(--space-4);
  }
  
  .endorsement__text {
    font-size: var(--text-body);
    line-height: 1.75;
  }

  /* 9) 页脚优化 */
  .site-footer {
    padding-top: var(--space-12);
    padding-bottom: calc(var(--space-10) + var(--risk-bar-height));
  }
  
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-8) !important;
    margin-bottom: var(--space-8);
  }
  
  .footer-brand {
    grid-column: 1 / -1;
    padding-bottom: var(--space-6);
    border-bottom: 1px solid rgba(250, 250, 247, 0.1);
  }
  
  .footer-col__title {
    font-size: var(--text-small);
    font-weight: var(--weight-bold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-3);
    position: relative;
    padding-left: var(--space-3);
  }
  
  .footer-col__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 14px;
    background: var(--color-accent);
    border-radius: 2px;
  }
  
  .footer-col__list {
    gap: var(--space-3);
  }
  
  .footer-col__list li {
    list-style: none;
  }
  
  .footer-col__list a {
    font-size: var(--text-body);
    color: rgba(250, 250, 247, 0.85);
    line-height: 1.6;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: all var(--duration-fast);
  }
  
  .footer-col__list a::before {
    content: "›";
    color: var(--color-accent);
    font-size: var(--text-body);
    opacity: 0.6;
  }
  
  .footer-col__list a:hover,
  .footer-col__list a:active {
    color: var(--color-accent);
    transform: translateX(2px);
  }
  
  .footer-contact {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(250, 250, 247, 0.1);
  }
  
  .footer-meta {
    flex-direction: column;
    gap: var(--space-4);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(250, 250, 247, 0.1);
  }

  /* 10) 风险提示条优化 */
  .risk-bar {
    height: auto;
    min-height: var(--risk-bar-height);
    padding: var(--space-2) 0;
  }
  
  .risk-bar__inner {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xxs);
  }

  /* 11) CTA 优化 */
  .cta {
    padding: var(--space-12) 0;
  }
  
  .cta__title {
    font-size: var(--text-h2);
  }
}

/* ============================================
   v4.10 - 绿色卡片 for 生态消费积分权益兑换
   ============================================ */
@media (max-width: 1024px) {
  .biz-overview__items .biz-overview__item:nth-child(1) {
    width: 100% !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
    border: 1px solid #86efac !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-4) var(--space-5) !important;
    position: relative;
    overflow: hidden;
  }
  
  .biz-overview__items .biz-overview__item:nth-child(1)::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #22c55e, #16a34a);
  }
  
  .biz-overview__items .biz-overview__item:nth-child(1) .biz-overview__item-title {
    color: #15803d !important;
    font-size: var(--text-body-lg) !important;
    font-weight: 700 !important;
    margin-bottom: var(--space-3) !important;
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  
  .biz-overview__items .biz-overview__item:nth-child(1) .biz-overview__item-title::before {
    content: '\2713';
    width: 24px;
    height: 24px;
    background: #22c55e;
    color: white;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 900;
    flex-shrink: 0;
  }
  
  .biz-overview__items .biz-overview__item:nth-child(1) .biz-overview__item-desc {
    color: #166534 !important;
    font-size: var(--text-small) !important;
    line-height: 1.7 !important;
    margin-bottom: var(--space-3) !important;
  }
  
  .biz-overview__items .biz-overview__item:nth-child(1) .biz-overview__boundary {
    background: rgba(255, 255, 255, 0.6) !important;
    border-left: 3px solid #22c55e !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-3) var(--space-4) !important;
    color: #166534 !important;
    font-size: var(--text-small) !important;
    line-height: 1.6 !important;
    margin-top: var(--space-3) !important;
  }
  
  /* C端第二个item - 普通卡片样式 */
  .biz-overview__items .biz-overview__item:nth-child(2) {
    width: 100% !important;
    background: var(--color-bg) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-4) var(--space-5) !important;
  }
}

/* ============================================
   手机 @media (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
  .hero__title {
    font-size: var(--text-h2);
  }
  
  .data-card__value {
    font-size: 24px;
  }
  
  .biz-overview__column {
    padding: var(--space-4);
  }
  
  .biz-overview__item {
    padding: var(--space-3);
  }
  
  .footer-col__list a {
    font-size: var(--text-small);
  }
}

/* ============================================
   安全区域适配（iPhone X 刘海屏）
   ============================================ */
@supports (padding: max(0px)) {
  .risk-bar__inner {
    padding-left: max(var(--space-4), env(safe-area-inset-left));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
  }
  
  .site-footer {
    padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom) + var(--risk-bar-height));
  }
}

/* ============================================
   横屏模式优化
   ============================================ */
@media (max-width: 1024px) and (orientation: landscape) {
  .nav {
    width: 60vw;
    max-width: 280px;
  }
}

/* ============================================
   减弱动效偏好
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   高DPI屏幕优化
   ============================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    -webkit-font-smoothing: antialiased;
  }
}

/* ============================================
   打印样式优化
   ============================================ */
@media print {
  .nav, .nav__toggle, .nav__overlay, .risk-bar {
    display: none !important;
  }
  
  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }
  
  a {
    color: #000;
    text-decoration: underline;
  }
}


/* ============================================
   Red-line 卡片移动端优化
   ============================================ */
@media (max-width: 1024px) {
  .red-line {
    padding: var(--space-4);
    margin-top: var(--space-4);
  }
  .red-line__title {
    font-size: var(--text-small);
    margin-bottom: var(--space-3);
    gap: var(--space-2);
    color: var(--color-danger) !important;
  }
  .red-line__title::before {
    font-size: 14px !important;
    line-height: 1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--color-danger);
    color: white !important;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .red-line__list {
    gap: var(--space-3);
  }
  .red-line__item {
    font-size: var(--text-small);
    line-height: 1.7;
    gap: var(--space-2);
    align-items: flex-start;
  }
  .red-line__item::before {
    content: "\2715" !important;
    color: white !important;
    background: var(--color-danger);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 900;
  }
}
/* ============================================
   v4.11 - business.html 移动端优化
   ============================================ */

/* 5步流程优化 - 更紧凑的纵向布局 */
@media (max-width: 768px) {
  .service-flow {
    grid-template-columns: 1fr !important;
    gap: var(--space-4) !important;
    padding: var(--space-5) !important;
    margin-top: var(--space-6) !important;
  }
  
  .service-flow__step {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-4) !important;
    text-align: left !important;
    padding: var(--space-3) var(--space-4) !important;
    background: var(--color-bg-card) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--color-border-light) !important;
  }
  
  .service-flow__step::after {
    right: 50% !important;
    top: auto !important;
    bottom: -14px !important;
    transform: translateX(50%) rotate(90deg) !important;
    font-size: 14px !important;
  }
  
  .service-flow__step:last-child::after {
    display: none !important;
  }
  
  .service-flow__number {
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
    font-size: 10px !important;
    width: auto !important;
  }
  
  .service-flow__icon {
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    font-size: var(--text-small) !important;
  }
  
  .service-flow__name {
    font-size: var(--text-small) !important;
    flex: 1 !important;
  }
}

/* 可做事项+严格禁止 - 上下堆叠 */
@media (max-width: 768px) {
  .card-body div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-4) !important;
  }
}

/* industry.html 数据卡片优化 */
@media (max-width: 768px) {
  /* grid--2 在移动端变单列 */
  .grid--2 {
    grid-template-columns: 1fr !important;
  }
  
  /* 数据卡片优化 */
  .data-card {
    padding: var(--space-5) !important;
  }
  
  .data-card__label {
    font-size: var(--text-xs) !important;
    margin-bottom: var(--space-2) !important;
  }
  
  .data-card__value {
    font-size: var(--text-h2) !important;
    margin-bottom: var(--space-2) !important;
  }
  
  .data-card__value-suffix {
    font-size: var(--text-body) !important;
  }
  
  .data-card__source {
    font-size: var(--text-xxs) !important;
    line-height: 1.5 !important;
  }
  
  /* 首页 dashboard 链接样式 */
  .dashboard__link {
    text-align: center !important;
    margin-top: var(--space-6) !important;
    padding-top: var(--space-5) !important;
    border-top: 1px solid rgba(250, 250, 247, 0.15) !important;
  }
  
  .dashboard__link-btn {
    display: inline-block !important;
    padding: var(--space-3) var(--space-6) !important;
    font-size: var(--text-body) !important;
    color: var(--color-accent) !important;
    text-decoration: none !important;
    border: 1px solid var(--color-accent) !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--duration-fast) !important;
  }
  
  .dashboard__link-btn:hover,
  .dashboard__link-btn:active {
    background: var(--color-accent) !important;
    color: var(--color-primary) !important;
  }
  
  /* 行业前景页面 hero 间距优化 */
  .page-hero {
    padding: var(--space-16) 0 var(--space-10) !important;
  }
  
  .page-hero__title {
    font-size: var(--text-h2) !important;
  }
  
  .page-hero__lead {
    font-size: var(--text-body) !important;
  }
}

/* 首页行业前景入口链接 */
@media (max-width: 768px) {
  .industry-link {
    text-align: center !important;
    padding: var(--space-4) 0 !important;
  }
  
  .industry-link__btn {
    display: inline-block !important;
    padding: var(--space-3) var(--space-5) !important;
    font-size: var(--text-body) !important;
    color: var(--color-primary) !important;
    text-decoration: none !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--duration-fast) !important;
  }
  
  .industry-link__btn:hover,
  .industry-link__btn:active {
    background: var(--color-primary) !important;
    color: white !important;
  }
}

/* 首页行业前景卡片优化 */
@media (max-width: 768px) {
  .industry-cta {
    padding: var(--space-6) var(--space-4) !important;
  }
  
  .industry-cta__eyebrow {
    font-size: var(--text-xs) !important;
    margin-bottom: var(--space-3) !important;
  }
  
  .industry-cta__title {
    font-size: var(--text-h3) !important;
    margin-bottom: var(--space-3) !important;
    line-height: 1.3 !important;
  }
  
  .industry-cta__title em {
    font-style: normal !important;
    color: var(--color-primary) !important;
  }
  
  .industry-cta__lead {
    font-size: var(--text-small) !important;
    line-height: 1.7 !important;
    margin-bottom: var(--space-5) !important;
  }
  
  /* 数据卡片网格 - 3列等宽 */
  .industry-cta__stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--space-3) !important;
    margin-bottom: var(--space-5) !important;
  }
  
  .industry-cta__stat {
    text-align: center !important;
    padding: var(--space-3) var(--space-2) !important;
    background: var(--color-bg-warm) !important;
    border-radius: var(--radius-md) !important;
  }
  
  .industry-cta__stat-value {
    font-size: var(--text-h4) !important;
    font-weight: var(--weight-bold) !important;
    color: var(--color-primary) !important;
    margin-bottom: var(--space-1) !important;
    line-height: 1.2 !important;
  }
  
  .industry-cta__stat-label {
    font-size: var(--text-xs) !important;
    color: var(--color-text-secondary) !important;
    line-height: 1.4 !important;
  }
  
  /* 按钮组 */
  .industry-cta__actions {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-3) !important;
  }
  
  .industry-cta__btn {
    width: 100% !important;
    justify-content: center !important;
    padding: var(--space-3) var(--space-4) !important;
    font-size: var(--text-small) !important;
  }
}

/* 首页 Hero 区域间距优化 - 减少三重背书上方空白 */
@media (max-width: 768px) {
  .hero {
    min-height: auto !important;
    padding: var(--space-5) 0 var(--space-6) !important;
  }
  
  .hero__inner {
    gap: var(--space-4) !important;
  }
  
  .hero__seal {
    margin-top: 0 !important;
    margin-bottom: var(--space-3) !important;
  }
  
  /* 减小 hero 内容区顶部间距 */
  .hero__inner {
    padding-top: 0 !important;
  }
  
  .fade-up {
    padding-top: 0 !important;
  }
  
  /* Hero 4个优势卡片美化 */
  .hero__endorsements {
    gap: var(--space-3) !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .hero__endorsement {
    font-size: var(--text-body) !important;
    padding: var(--space-4) var(--space-3) !important;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--radius-lg) !important;
    text-align: center !important;
    font-weight: var(--weight-medium) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  }
  
  .hero__endorsement::before {
    content: "✓" !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    color: white !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    line-height: 18px !important;
    text-align: center !important;
    margin-right: var(--space-2) !important;
    font-weight: var(--weight-bold) !important;
  }
  
  /* Hero 卡片顶部渐变色条优化 */
  .hero__card {
    overflow: visible !important;
    padding-top: var(--space-8) !important;
  }
  
  .hero__card-eyebrow {
    position: relative !important;
    z-index: 2 !important;
    margin-top: var(--space-2) !important;
    background: linear-gradient(90deg, var(--color-accent) 0%, #22c55e 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }
  
  /* 减少资质提示条上方间距 */
  .hero__eyebrow {
    margin-bottom: var(--space-4) !important;
  }
  
  /* 主标题间距 */
  .hero__title {
    margin-bottom: var(--space-4) !important;
  }
  
  /* 描述文字间距 */
  .hero__lead {
    margin-bottom: var(--space-5) !important;
  }
  
  /* 优势标签组间距 */
  .hero__tags {
    margin-bottom: var(--space-5) !important;
    gap: var(--space-3) !important;
  }
  
  /* 按钮组间距 */
  .hero__actions {
    gap: var(--space-3) !important;
  }
}

/* 汉堡菜单导航优化 */
@media (max-width: 1024px) {
  /* 侧边抽屉 - 全屏高度 */
  .nav {
    width: 85vw !important;
    max-width: 320px !important;
    height: 100vh !important;
    height: 100dvh !important; /* 动态视口高度 */
    top: 0 !important;
    bottom: auto !important;
  }
  
  /* 菜单项间距和可读性 */
  .nav__link {
    padding: var(--space-4) var(--space-5) !important;
    font-size: var(--text-body) !important;
    flex-shrink: 0 !important;
  }
  
  /* 确保菜单内容完整显示 */
  .nav.is-open {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    flex-direction: column !important;
  }
}

/* 页脚纵向堆叠 - 每个分组占一整行，组内链接 2x2 网格 */
@media (max-width: 1024px) {
  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-6) !important;
  }
  
  .footer-brand {
    padding-bottom: var(--space-5) !important;
    border-bottom: 1px solid rgba(250, 250, 247, 0.1) !important;
  }
  
  .footer-brand .brand {
    margin-bottom: var(--space-3) !important;
  }
  
  .footer-brand .brand__name {
    font-size: var(--text-h4) !important;
  }
  
  .footer-brand .brand__sub {
    font-size: 10px !important;
  }
  
  .footer-brand__desc {
    font-size: var(--text-xs) !important;
    line-height: 1.6 !important;
  }
  
  .footer-col {
    padding-bottom: var(--space-5) !important;
    border-bottom: 1px solid rgba(250, 250, 247, 0.1) !important;
  }
  
  .footer-contact {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
  }
  
  .footer-contact > div {
    padding: var(--space-4) !important;
  }
  
  .footer-col__title {
    font-size: var(--text-xs) !important;
    margin-bottom: var(--space-3) !important;
  }
  
  /* 链接列表改为 2x2 网格 - 2列2行 */
  .footer-col__list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-3) var(--space-4) !important;
  }
  
  .footer-col__list li {
    list-style: none;
    display: flex;
    align-items: center;
  }
  
  .footer-col__list a {
    font-size: var(--text-small) !important;
    line-height: 1.5 !important;
  }
  
  .footer-contact__label {
    font-size: var(--text-xs) !important;
  }
  
  .footer-contact__value {
    font-size: var(--text-xs) !important;
    line-height: 1.6 !important;
  }
}
