@font-face{
    font-family: 'NotoSansSC';
    src: url('static/fonts/NotoSansSC-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: 'NotoSansSC';
    src: url('static/fonts/NotoSansSC-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: 'InterVar';
    src: url('static/fonts/InterVariable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

html, body { font-family: 'NotoSansSC','InterVar','PingFang SC','Microsoft YaHei',Arial,sans-serif; }
/* 可访问性：跳转到主内容 */
.skip-link { position: absolute; left: -9999px; top: 0; padding: 8px 12px; background: #000; color: #fff; z-index: 10000; border-radius: 6px; }
.skip-link:focus { left: 8px; top: 8px; outline: 2px solid #fff; }

/* 焦点可见态 */
a:focus-visible, button:focus-visible, .btn:focus-visible, .tool-btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; border-radius: 8px; }
/* --- Hero 首屏间距统一控制（覆盖层，便于全局微调） --- */
:root { --hero-gap-xxs: 2px; --hero-gap-xs: 6px; --hero-gap-sm: 8px; --hero-gap-md: 12px; }

.top .hero-content { padding-top: 0; padding-bottom: var(--hero-gap-md); }
.top .hero-content .title { margin-top: 0 !important; margin-bottom: var(--hero-gap-xxs); }
.top .hero-content .title-sub { margin-bottom: var(--hero-gap-xxs); }
.top .hero-content .subtitle { margin-bottom: var(--hero-gap-sm); }
.top .stats-container { margin: var(--hero-gap-sm) 0; gap: var(--hero-gap-sm); }
.top .cta-container { margin-top: var(--hero-gap-sm); gap: var(--hero-gap-sm); }

@media (max-width: 768px) {
  /* 平板与小屏：CTA按钮略放大 */
  .cta-container .btn { min-height: 44px; font-size: 1rem !important; }
  .cta-container .primary-btn,
  .cta-container .secondary-btn { padding: 0.65rem 1.1rem; }
}

@media (max-width: 480px) {
  .top-nav { height: 48px; }
  body { padding-top: 48px; }
  .top .hero-content { padding-bottom: var(--hero-gap-sm); }
  .top .hero-content .title { margin-bottom: var(--hero-gap-xxs); }
  .top .hero-content .title-sub { margin-bottom: var(--hero-gap-xxs); }
  .top .hero-content .subtitle { margin-bottom: var(--hero-gap-xs); }
  .top .stats-container { margin: var(--hero-gap-xs) 0; gap: var(--hero-gap-xs); }
  .top .cta-container { margin-top: var(--hero-gap-xs); gap: 12px; flex-direction: column; }
  /* 移动端CTA：改为整行按钮，避免拥挤与错位 */
  .cta-container { justify-content: stretch; padding: 0 clamp(8px, 4vw, 16px); }
  .cta-container .btn { width: 100%; justify-content: center; min-height: 52px; font-size: 1.12rem !important; letter-spacing: 0.03em; }
  .cta-container .primary-btn,
  .cta-container .secondary-btn { padding: 0.85rem 1.2rem; border-radius: 14px; }
  /* 立即体验：高对比渐变与更明显阴影 */
  .top .cta-container .primary-btn { 
    background: linear-gradient(135deg, #00d4aa 0%, #667eea 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 10px 24px rgba(0, 212, 170, 0.25), 0 6px 16px rgba(102, 126, 234, 0.22);
  }
  .top .cta-container .primary-btn .btn-icon { margin-left: 6px; }
  /* 联系客服：玻璃质感边框对比更强 */
  .top .cta-container .secondary-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  }
  .cta-container .btn .btn-icon { display: inline-block; }
  /* 工具按钮在移动端同样占满一行 */
  .tool-btn { display: inline-flex; width: 100%; justify-content: center; align-items: center; min-height: 38px; font-size: 0.95rem; border-radius: 8px; }

  /* 功能区（工具卡片）移动端按钮与桌面一致的紧凑居中尺寸 */
  .ai-tools-section .tool-btn,
  .tools-grid .tool-card .tool-btn {
    width: auto;
    min-width: 96px;
    align-self: center;
    padding: 6px 10px;
    font-size: 0.8rem;
    line-height: 1.2;
    min-height: 32px;
    border-radius: 6px;
    box-shadow: none;
  }

  /* 移动端媒体显示与比例对齐 */
  .tool-media { aspect-ratio: 16/9; overflow: hidden; }
  .tool-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
}
/* 设计系统优化 */
:root {
    /* 优化的颜色系统 */
    --color-primary: #667eea;
    --color-primary-light: #8b9ef0;
    --color-primary-dark: #4c63d2;
    --color-secondary: #764ba2;
    --color-secondary-light: #9a6bb8;
    --color-secondary-dark: #5a3780;
    --color-accent: #00d4aa;
    --color-accent-light: #33ddbb;
    --color-accent-dark: #00a88a;
    --color-success: #00a8cc;
    --color-warning: #ff6b6b;
    --color-danger: #feca57;
    
    /* 中性色系统 */
    --color-white: #ffffff;
    --color-gray-50: rgba(255, 255, 255, 0.95);
    --color-gray-100: rgba(255, 255, 255, 0.85);
    --color-gray-200: rgba(255, 255, 255, 0.65);
    --color-gray-300: rgba(255, 255, 255, 0.45);
    --color-gray-400: rgba(255, 255, 255, 0.25);
    --color-gray-500: rgba(255, 255, 255, 0.15);
    --color-gray-600: rgba(255, 255, 255, 0.08);
    
    /* 优化的渐变系统 */
    --primary-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    --primary-gradient-light: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-secondary-light) 100%);
    --secondary-gradient: linear-gradient(135deg, var(--color-accent) 0%, var(--color-success) 100%);
    --accent-gradient: linear-gradient(135deg, var(--color-warning) 0%, var(--color-danger) 100%);
    
    /* 玻璃拟态效果 */
    --glass-bg: var(--color-gray-600);
    --glass-border: var(--color-gray-500);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
    --glass-shadow-hover: 0 20px 40px rgba(31, 38, 135, 0.4);
    
    /* 文本颜色系统 */
    --text-primary: var(--color-white);
    --text-secondary: var(--color-gray-100);
    --text-muted: var(--color-gray-200);
    --text-disabled: var(--color-gray-300);
    
    /* 优化的设计系统 */
    --border-radius-xs: 6px;
    --border-radius-sm: 12px;
    --border-radius-md: 20px;
    --border-radius-lg: 28px;
    --border-radius-xl: 36px;
    
    /* 间距系统 */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;
}

/* 其余样式保留，完整内容从原 <style> 中提取 */