/* ============================================================
   店宝易点官网 —— 苹果风 (Apple Style) 视觉升级
   覆盖：半透明毛玻璃胶囊导航 + 圆角卡片 + 精致排版
   注意：本文件在 adaptive.css 之后加载（最后），确保优先级最高
   ============================================================ */

/* ---------- 1. 全局排版优化（苹果风：更细字重、更松行高） ---------- */
:root {
  /* 苹果风圆角体系 */
  --apple-radius-sm: 10px;
  --apple-radius: 16px;
  --apple-radius-lg: 24px;
  --apple-radius-pill: 999px;
  /* 苹果风字体（优先系统苹方/Helvetica，保证精致感） */
  --apple-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  /* 苹果风毛玻璃 */
  --apple-glass: rgba(255, 255, 255, 0.72);
  --apple-glass-border: rgba(255, 255, 255, 0.5);
  --apple-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255,255,255,0.4) inset;
}

/* 全局应用苹果风字体 */
body, button, input, select, textarea, a {
  font-family: var(--apple-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 更宽松的正文排版 */
p, li {
  line-height: 1.7;
  letter-spacing: 0.2px;
}

/* ---------- 2. 胶囊悬浮导航栏（核心改造） ---------- */
/* header 外壳变透明，内层 header-inner 变胶囊 */
.header {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding-top: 10px;
}

/* 移除原 header 的发光边线 */
.header::after {
  display: none !important;
}

/* 内层胶囊：毛玻璃 + 圆角 + 悬浮阴影 */
.header-inner {
  height: 60px;
  max-width: 1280px;
  padding: 0 20px;
  border-radius: var(--apple-radius-pill);
  background: var(--apple-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--apple-glass-border);
  box-shadow: var(--apple-glass-shadow);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 滚动后胶囊更实一点（增强可读性） */
.header.scrolled .header-inner {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255,255,255,0.5) inset;
}

/* 胶囊内导航链接更精致 */
.nav-list a {
  padding: 7px 14px;
  border-radius: var(--apple-radius-pill);
  font-size: 0.9rem;
  font-weight: 500;
  color: #1d1d1f;
  transition: background 0.25s ease, color 0.25s ease;
}

/* 苹果风 hover：浅灰胶囊，不用主题色 */
.nav-list a:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #1d1d1f;
}
.nav-list a.active {
  background: rgba(0, 0, 0, 0.08);
  color: #1d1d1f;
  font-weight: 600;
}

/* 隐藏原来的主题色指示点/下划线（苹果风更克制） */
.nav-list a.active::after,
.nav-list a .nav-indicator {
  display: none !important;
}

/* 导航图标淡化 */
.nav-list a i {
  opacity: 0.55;
  font-size: 0.95rem;
}

/* 登录按钮苹果风胶囊 */
.header-login-btn {
  border-radius: var(--apple-radius-pill) !important;
  padding: 8px 20px !important;
  font-weight: 600;
  font-size: 0.88rem;
}

/* Logo 苹果风 */
.logo {
  font-weight: 700;
  letter-spacing: -0.3px;
}
.logo span {
  background: linear-gradient(135deg, #1d1d1f, #3a3a3c) !important;
  -webkit-background-clip: text;
  background-clip: text;
}

/* ---------- 3. 深色主题导航适配 ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --apple-glass: rgba(28, 28, 30, 0.72);
    --apple-glass-border: rgba(255, 255, 255, 0.12);
    --apple-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255,255,255,0.06) inset;
  }
  .nav-list a { color: #f5f5f7; }
  .nav-list a:hover { background: rgba(255, 255, 255, 0.1); color: #f5f5f7; }
  .nav-list a.active { background: rgba(255, 255, 255, 0.14); color: #fff; }
  .logo span { background: linear-gradient(135deg, #f5f5f7, #a1a1a6) !important; -webkit-background-clip: text; background-clip: text; }
  .header.scrolled .header-inner { background: rgba(28, 28, 30, 0.9); }
}

/* ---------- 4. 页面卡片苹果风圆角 ---------- */
/* 统一的卡片/区块大圆角 + 精致阴影 */
.card, .feature-card, .sol-card, .pb-card, .tile,
.feat-hive-card, .feat-cl-card, .section, .panel {
  border-radius: var(--apple-radius-lg) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 卡片 hover 苹果风轻抬升 */
.card:hover, .feature-card:hover, .sol-card:hover, .pb-card:hover,
.feat-hive-card:hover, .feat-cl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important;
}

/* 图片圆角 */
.card img, .feature-card img, .sol-card img, .pb-card img,
.feat-hive-card img, .mockup, .screenshot {
  border-radius: var(--apple-radius);
}

/* ---------- 5. 按钮苹果风圆角 ---------- */
.btn, .btn-primary, .btn-outline, .pb-btn, .action-btn {
  border-radius: var(--apple-radius-pill) !important;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* ---------- 6. 首屏区域排版优化 ---------- */
.hero h1, .feat-hero h1, .pb-hero h1, .mp-hero h1 {
  letter-spacing: -0.5px;
  line-height: 1.2;
  font-weight: 700;
}

.hero .sub, .feat-hero .hero-sub, .pb-hero .sub {
  color: #6e6e73;
  line-height: 1.6;
}

/* ---------- 7. 移动端胶囊导航适配 ---------- */
@media (max-width: 768px) {
  .header { padding-top: 8px; }
  .header-inner {
    height: 54px;
    padding: 0 14px;
    border-radius: var(--apple-radius);
  }
  .logo img { height: 28px; }
}