:root {
    /* 配色 */
    --apple-bg: #ffffff;
    --apple-bg-soft: #f5f5f7;
    --apple-text: #1d1d1f;
    --apple-text-secondary: #86868b;
    --apple-blue: #0071e3;
    --apple-blue-hover: #0077ed;
    --apple-divider: #d2d2d7;

    /* 字体 */
    --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                   "PingFang SC", "Microsoft YaHei", sans-serif;

    /* 字号（与苹果官网比例对齐） */
    --fs-hero: clamp(40px, 5vw, 80px);
    --fs-h1: clamp(32px, 4vw, 56px);
    --fs-h2: clamp(24px, 3vw, 40px);
    --fs-body: 17px;
    --fs-caption: 14px;

    /* 圆角 */
    --radius-card: 18px;
    --radius-card-lg: 22px;
    --radius-btn: 980px;

    /* 阴影（克制） */
    --shadow-soft: 0 4px 16px rgba(0,0,0,0.04);
    --shadow-card: 0 8px 24px rgba(0,0,0,0.06);

    /* 动效曲线 */
    --ease-apple: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-back: cubic-bezier(0.25, 1, 0.5, 1);

    /* 间距 */
    --gap-section: 120px;
    --gap-element: 32px;
}

/* 全局基线 */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-system);
    font-size: var(--fs-body);
    color: var(--apple-text);
    background: var(--apple-bg);
    -webkit-font-smoothing: antialiased;
}

/* 苹果风按钮 */
.apple-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 12px 22px; font-size: 17px;
    color: var(--apple-blue); background: transparent;
    border: none; cursor: pointer;
    transition: all 0.3s var(--ease-apple);
}
.apple-btn:hover { color: var(--apple-blue-hover); transform: translateX(2px); }
.apple-btn--primary {
    background: var(--apple-blue); color: #fff;
    border-radius: var(--radius-btn);
}
.apple-btn--primary:hover { background: var(--apple-blue-hover); transform: scale(1.02); }

/* 卡片 */
.apple-card {
    background: var(--apple-bg-soft);
    border-radius: var(--radius-card);
    padding: 40px;
    transition: transform 0.4s var(--ease-back);
}
.apple-card:hover { transform: scale(1.02); box-shadow: var(--shadow-card); }

/* 区块 */
section { padding: var(--gap-section) 24px; }
.container { max-width: 1240px; margin: 0 auto; }

/* ===== UI/UX Pro Max 优化 ===== */

/* 1. prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 2. 全局 Focus Visible */
:focus-visible {
  outline: 3px solid var(--apple-blue, #0071e3);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 3. 移动端触控区域保障 */
@media (max-width: 768px) {
  button,
  [role="button"],
  .interactive-touch {
    min-height: 44px;
    min-width: 44px;
  }
}

/* 4. 补充响应式断点 */
@media (max-width: 375px) {
  :root {
    --gap-section: 60px;
    --gap-element: 20px;
  }
  .section-heading {
    font-size: 1.5rem;
  }
  .section-subheading {
    font-size: 0.85rem;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .content-wrap {
    max-width: 960px;
  }
}

@media (min-width: 1440px) {
  .content-wrap {
    max-width: 1200px;
  }
  :root {
    --gap-section: 140px;
  }
}

/* ===== 骨架屏 Loading ===== */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 8px;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-card {
  padding: 16px;
  border-radius: 12px;
  background: #fff;
}
.skeleton-image {
  width: 100%;
  height: 180px;
  margin-bottom: 12px;
}
.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
}
.skeleton-text--title {
  height: 18px;
  width: 70%;
  margin-bottom: 12px;
}
.skeleton-text--short {
  width: 40%;
}