/* ============================================================
 * HZ-AI-Studio 子主题样式表
 * 品牌色：深空蓝 #070714 | 青蓝 #00d4ff | 紫 #a855f7
 * ============================================================ */

/* ===== 1. Dialog 弹窗组件样式（保留） ===== */
:host {
  --lit-html-dialog-default-width: 400px;
  --lit-html-dialog-font-family: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --lit-html-dialog-surface-bg: #0e0e1f;
  --lit-html-dialog-border-main: rgba(0, 212, 255, 0.15);
  --lit-html-dialog-text-primary: #ffffff;
  --lit-html-dialog-text-tertiary: rgba(255,255,255,0.55);
  --lit-html-dialog-text-white: white;
  --lit-html-dialog-icon-tertiary: rgba(255,255,255,0.5);
  --lit-html-dialog-border-btn-main: rgba(255,255,255,0.15);
  --lit-html-dialog-function-error-bg: #f25a5a;
  --lit-html-dialog-button-default-bg: transparent;
  --lit-html-dialog-box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.6);
  --lit-html-dialog-border-radius: 16px;
}

dialog {
  width: var(--dynamic-dialog-width, var(--lit-html-dialog-default-width));
  max-width: 90vw;
  background: var(--lit-html-dialog-surface-bg);
  box-shadow: var(--lit-html-dialog-box-shadow);
  border-radius: var(--lit-html-dialog-border-radius);
  border: 1px solid var(--lit-html-dialog-border-main);
  padding: 0;
  margin: auto;
  overflow: visible;
  backdrop-filter: blur(20px);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 16px 10px 20px;
  gap: 10px;
}

.dialog-title {
  flex: 1 1 0;
  color: var(--lit-html-dialog-text-primary);
  font-size: 18px;
  font-family: var(--lit-html-dialog-font-family);
  font-weight: 600;
  line-height: 24px;
  word-wrap: break-word;
}

.dialog-close-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--lit-html-dialog-icon-tertiary);
  font-size: 18px;
  font-family: var(--lit-html-dialog-font-family);
  font-weight: 500;
  line-height: 1;
}
.dialog-close-button:hover { color: var(--lit-html-dialog-text-primary); }

.dialog-body {
  padding: 0px 20px;
  color: var(--lit-html-dialog-text-tertiary);
  font-size: 14px;
  font-family: var(--lit-html-dialog-font-family);
  font-weight: 400;
  line-height: 22px;
  word-wrap: break-word;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 20px;
}

.dialog-footer ::slotted(.dialog-button) {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: var(--lit-html-dialog-font-family);
}
.dialog-footer ::slotted(.dialog-button-default) {
  min-width: 64px;
  color: var(--lit-html-dialog-text-primary);
  background-color: var(--lit-html-dialog-button-default-bg);
  border: 1px solid var(--lit-html-dialog-border-btn-main);
}
.dialog-footer ::slotted(.dialog-button-default:hover) {
  background-color: rgba(255,255,255,0.08);
}
.dialog-footer ::slotted(.dialog-button-error) {
  min-width: 74px;
  color: var(--lit-html-dialog-text-white);
  background-color: var(--lit-html-dialog-function-error-bg);
}
.dialog-footer ::slotted(.dialog-button-error:hover) { opacity: 0.9; }


/* ===== 2. 全局 CSS 变量 & 基础重置 ===== */
:root {
  --hz-bg-deep:   #070714;
  --hz-bg-dark:   #0b0b1e;
  --hz-bg-card:   rgba(255,255,255,0.03);
  --hz-border:    rgba(255,255,255,0.08);
  --hz-cyan:      #00d4ff;
  --hz-purple:    #a855f7;
  --hz-purple-l:  #c084fc;
  --hz-text:      #ffffff;
  --hz-text-muted: rgba(255,255,255,0.55);
  --hz-gradient:  linear-gradient(135deg, #00d4ff, #a855f7);
  --hz-radius:    16px;
  --hz-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== 3. 首页全局深色背景 ===== */
body.home {
  background: var(--hz-bg-deep) !important;
}

/* 首页各区段之间的无缝衔接 */
body.home .site-content {
  background: transparent;
}

/* ===== 4. 导航栏优化 ===== */
.site-header.pos-nav-scrolled {
  background: rgba(7, 7, 20, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.12) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important;
}
body.home .site-header {
  background: rgba(6, 10, 24, 0.58) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
  border-bottom: 1px solid rgba(140, 162, 255, 0.12) !important;
}
body.home .site-header .site-header-inner,
body.home .site-header .container {
  max-width: 1560px !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
}
body.home .site-header .site-header-inner {
  gap: 24px !important;
}
body.home .site-header .navbar-brand,
body.home .site-header .custom-logo-link,
body.home .site-header .site-logo {
  flex: 0 0 auto;
  margin-right: 24px !important;
}
body.home .site-header .navbar-nav,
body.home .site-header .nav,
body.home .site-header .menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
body.home .site-header .navbar-nav > li,
body.home .site-header .nav > li,
body.home .site-header .menu > li,
body.home .site-header .menu-item {
  margin: 0 3px !important;
}
body.home .site-header .navbar-nav > li > a,
body.home .site-header .nav > li > a,
body.home .site-header .menu > li > a,
body.home .site-header .menu-item > a {
  padding-left: 8px !important;
  padding-right: 8px !important;
  font-size: 13px !important;
  white-space: nowrap;
}
body.home .site-header .navbar-right,
body.home .site-header .actions,
body.home .site-header .header-actions,
body.home .site-header .action-hover-menu {
  flex: 0 0 auto;
}

/* ===== 5. 首页 Hero 区样式（配合 pos-backgr.php） ===== */
.hero-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
  background: linear-gradient(135deg, #fff 20%, #00d4ff 60%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.15 !important;
  letter-spacing: -0.03em;
}

.hero-subtitle {
  font-size: clamp(0.95rem, 2vw, 1.1rem) !important;
  color: rgba(255,255,255,0.75) !important;
  line-height: 1.8 !important;
}

/* Hero 按钮增强 */
.btn-pos-1 {
  background: linear-gradient(135deg, #00d4ff, #7c3aed) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 28px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.35) !important;
  transition: var(--hz-transition) !important;
}
.btn-pos-1:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 10px 35px rgba(0, 212, 255, 0.5) !important;
}

.btn-pos-2 {
  border: 1.5px solid rgba(255,255,255,0.35) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 12px 28px 12px 48px !important;
  font-weight: 600 !important;
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(8px) !important;
  transition: var(--hz-transition) !important;
}
.btn-pos-2:hover {
  border-color: rgba(0, 212, 255, 0.6) !important;
  background: rgba(0, 212, 255, 0.08) !important;
  transform: translateY(-2px) !important;
}

/* Hero 数据统计行 */
#home .text-3xl.font-bold {
  font-size: 2rem !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #fff, var(--hz-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero 区背景图案 */
.tech-pattern {
  background-image:
    radial-gradient(circle at 20% 50%, rgba(0, 212, 255, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.06) 0%, transparent 50%),
    linear-gradient(rgba(0, 212, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 50px 50px, 50px 50px;
}

/* ===== 6. 首页各区域通用辅助类 ===== */
.py-20 { padding-top: 80px; padding-bottom: 80px; }
.mb-16 { margin-bottom: 64px !important; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
body.home .container {
  max-width: 1320px;
  padding-left: 28px;
  padding-right: 28px;
}
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
body.home .max-w-3xl { max-width: 60rem; }
body.home .max-w-4xl { max-width: 68rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }

/* Grid helpers */
.grid { display: grid; }
.gap-4 { gap: 1rem; }
.gap-8 { gap: 2rem; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Flex helpers */
.flex { display: flex; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.flex-col { flex-direction: column; }
.flex-shrink-0 { flex-shrink: 0; }
.space-x-4 > * + * { margin-left: 1rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.gap-6 { gap: 1.5rem; }
.gap-2 { gap: 0.5rem; }
.inline-flex { display: inline-flex; }
.flex-wrap { flex-wrap: wrap; }

/* Spacing */
.mt-7 { margin-top: 1.75rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mt-4 { margin-top: 1rem; }
.mt-12 { margin-top: 3rem; }
.me-2 { margin-right: 0.5rem; }
.ms-2 { margin-left: 0.5rem; }
.p-4 { padding: 1rem; }

/* ===== 7. pos-backgr 动画 ===== */
@keyframes floating {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}
.floating-animation { animation: floating 6s ease-in-out infinite; }
@keyframes bounce-slow {
  0%, 100% { transform: translateY(0) translateX(-50%); }
  50% { transform: translateY(-8px) translateX(-50%); }
}
.animate-bounce { animation: bounce-slow 2s ease-in-out infinite; }

/* ===== 8. pos-backgr 内联class兼容 ===== */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { inset: 0; }
.inset-x-0 { left: 0; right: 0; }
.overflow-hidden { overflow: hidden; }
.z-10 { z-index: 10; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
.object-cover { object-fit: cover; }
.text-white { color: #fff !important; }
.text-sm { font-size: 0.875rem; }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.rounded-full { border-radius: 9999px; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-2xl { border-radius: 1rem; }
.border { border-width: 1px; border-style: solid; }
.border-0 { border: none; }
.shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.shadow-lg { box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
.shadow-xl { box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.transition-all { transition: all 0.3s; }
.duration-300 { transition-duration: 300ms; }
.cursor-pointer { cursor: pointer; }
.whitespace-nowrap { white-space: nowrap; }
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.w-16 { width: 4rem; }
.h-16 { height: 4rem; }
.w-20 { width: 5rem; }
.h-20 { height: 5rem; }
.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.bottom-8 { bottom: 2rem; }
.left-1\/2 { left: 50%; }
.top-20 { top: 5rem; }
.top-40 { top: 10rem; }
.bottom-40 { bottom: 10rem; }
.right-20 { right: 5rem; }
.left-10 { left: 2.5rem; }
.left-20 { left: 5rem; }
.-translate-x-1\/2 { transform: translateX(-50%); }
.transform { transform: var(--tw-transform, none); }
.bg-white\/10 { background: rgba(255,255,255,0.10); }
.bg-white\/20 { background: rgba(255,255,255,0.20); }
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.text-white\/80 { color: rgba(242,247,255,0.88); }
.text-white\/90 { color: rgba(247,250,255,0.96); }
.text-white\/60 { color: rgba(233,241,255,0.78); }
.text-yellow-500 { color: #eab308; }
.fill-current { fill: currentColor; }
.text-shadow { text-shadow: 0 2px 30px rgba(0,212,255,0.3); }
.leading-relaxed { line-height: 1.625; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-xl { font-size: 1.25rem; }
.text-lg { font-size: 1.125rem; }
.space-x-2 > * + * { margin-left: 0.5rem; }
.space-x-6 > * + * { margin-left: 1.5rem; }
.space-y-4 > * + * { margin-top: 1rem; }
@media (min-width: 640px) {
  .sm\:flex-row { flex-direction: row; }
  .sm\:space-y-0 > * + * { margin-top: 0; }
  .sm\:space-x-6 > * + * { margin-left: 1.5rem; }
  .sm\:space-x-4 > * + * { margin-left: 1rem; }
}
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) {
  .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.group:hover .group-hover\:scale-110 { transform: scale(1.1); }
.group:hover .group-hover\:shadow-xl { box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.hover-scale:hover { transform: translateY(-4px); }
.pos-cover { object-fit: cover; width: 100%; height: 100%; }

/* ===== 9. pos-cat 特定 class 兼容 ===== */
.bg-card { background: rgba(255,255,255,0.03); }
.text-card-foreground { color: #fff; }
.text-primary { color: var(--hz-cyan); }
.bg-primary\/10 { background: rgba(0,212,255,0.1); }
.bg-primary { background: var(--hz-cyan); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops,#00d4ff,#a855f7)); }
.from-primary { --tw-gradient-from: var(--hz-cyan); }
.from-purple-500 { --tw-gradient-from: #a855f7; }
.to-pink-500 { --tw-gradient-to: #ec4899; }
.to-accent { --tw-gradient-to: var(--hz-purple); }
.gradient-bg { background: linear-gradient(135deg, #6d28d9, #a855f7); }

/* ===== 10. pos-des / pos-ship 兼容 ===== */
.bg-gray-50 { background: rgba(255,255,255,0.03); }
.bg-white { background: rgba(255,255,255,0.04); }
.text-gray-900 { color: #fff !important; font-weight: 700; }
.text-gray-600 { color: rgba(232,242,255,0.84) !important; }
.text-gray-700 { color: rgba(238,246,255,0.9) !important; }
.text-muted-foreground { color: rgba(223,236,255,0.78) !important; }
.bg-gradient-to-r.from-primary.to-accent {
  background: linear-gradient(135deg, #1a1240 0%, #2d1b69 50%, #1a2a4a 100%);
}
.jing-2 {
  font-size: 12px;
  font-weight: 700;
  border-radius: 5px;
  margin-bottom: 12px;
  border: none !important;
}

/* ===== 11. 首页 footer 区深色 ===== */
.site-footer.pos-footer {
  background: linear-gradient(180deg, #060613 0%, #08081a 100%) !important;
  border-top: 1px solid rgba(0,212,255,0.1) !important;
  color: rgba(237,244,255,0.88) !important;
  padding-bottom: 0 !important;
}

/* ===== 12. 移动端底部导航 ===== */
@media (max-width: 568px) {
  .sj-jinz { display: none; }
  .hero-title { font-size: clamp(1.8rem, 8vw, 3rem) !important; }
  .hero-subtitle { font-size: 0.9rem !important; }
  #home .grid-cols-2 { gap: 16px !important; }
  .relative-2 { margin-top: -80px; }
  .btn-container { margin: 10px; }
  .btn-group { flex-direction: column; gap: 12px; }
  .btn-pos-1, .btn-pos-2 { padding: 12px 24px !important; width: 100%; text-align: center; justify-content: center; }
  .py-20 { padding-top: 50px; padding-bottom: 50px; }
  .mb-16 { margin-bottom: 32px !important; }
}

/* ===== 13. 右侧快捷导航栏 (m-navbar 区域) ===== */
.m-navbar {
  background: rgba(10,10,30,0.92) !important;
  backdrop-filter: blur(16px) !important;
  border-left: 1px solid rgba(0,212,255,0.1) !important;
  box-shadow: -4px 0 30px rgba(0,0,0,0.4) !important;
}
.m-navbar a { color: rgba(238,245,255,0.88) !important; transition: color 0.2s !important; }
.m-navbar a:hover { color: var(--hz-cyan) !important; }

/* ===== 14. 导航滚动收起时附加样式 ===== */
.pos-nav-scrolled .site-header-inner {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* ===== 15. 卡片鼠标光晕 (配合 pos.js) ===== */
.pos-service-card::after,
.pos-course-card::after,
.pos-adv-card::after {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(0,212,255,0.08) 0%, transparent 70%);
  border-radius: 50%;
  top: calc(var(--mouse-y, 50%) - 100px);
  left: calc(var(--mouse-x, 50%) - 100px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.pos-service-card:hover::after,
.pos-course-card:hover::after,
.pos-adv-card:hover::after { opacity: 1; }

/* ===== 16. 按钮与标签兼容 ===== */
[data-slot="button"] {
  border-radius: 10px !important;
  font-weight: 700 !important;
  transition: var(--hz-transition) !important;
}
[data-slot="badge"] {
  border-radius: 6px !important;
}
.pos-a a { color: rgba(240,246,255,0.9); text-decoration: none; }
.pos-a a:hover { color: #fff; }

/* ===== 17. 首页整体区段过渡 ===== */
#services, .pos-des-section, #tutorials {
  position: relative;
}
#services::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.2), transparent);
}
.pos-des-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168,85,247,0.2), transparent);
}
#tutorials::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168,85,247,0.15), transparent);
}

/* ===== 18. VIP 按钮文字 ===== */
.vip-but {
  letter-spacing: 0.05em;
  font-size: 13px !important;
}

/* ===== 19. 右侧悬浮导航按钮 ===== */
.pos-footer { padding-bottom: 0px !important; }
.items-start i { font-size: 22px; }
.text-card-foreground:hover i { color: #fff; }
.space-y-3 { margin-top: 20px; }

/* ===== 20. 幻灯片全宽突破 — 覆盖首页 widget 容器限制 ===== */
/* ripro 父主题首页 widget 区域通常有 padding/max-width 限制，强制突破 */
.home-owl-slider,
.home-owl-slider .widget-inner,
.home-owl-slider > div {
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: visible !important;
}

/* 幻灯片 section 突破父级容器：改为使用 100% 宽度，避免高度和滚动条异常 */
.pos-slider-section {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  /* 深色背景 */
  background: linear-gradient(180deg, #070714 0%, #0b0b1e 100%);
  overflow: hidden;
}

/* 修复因全宽引起的水平滚动条 */
body.home {
  overflow-x: hidden;
}

/* OWL Carousel 容器必须 100% 宽 */
.pos-slider-section .owl-carousel,
.pos-slider-section .owl-stage-outer,
.pos-slider-section .owl-stage,
.pos-slider-section .item,
.pos-slider-section .pos-slider-item {
  width: 100% !important;
  max-width: 100% !important;
}

/* 单图全宽时 owl-item 铺满 */
.pos-slider-section.pos-slider-fullwidth .owl-item {
  width: 100vw !important;
}

/* 多列幻灯片时恢复内边距容器 */
.pos-slider-section:not(.pos-slider-fullwidth) {
  padding: 40px 0;
}

/* ===================================================
 * 明暗模式兜底 — 确保首页深色模块在亮/暗切换下清晰
 * ripro 父主题通过 body.dark / body.light 切换
 * =================================================== */

/* 无论 ripro 切换成何种模式，首页深色区域始终保持深色 */
body.light #services,
body.light .pos-des-section,
body.light #tutorials,
body.light #resources,
body.light .pos-slider-section,
body.dark  #services,
body.dark  .pos-des-section,
body.dark  #tutorials,
body.dark  #resources,
body.dark  .pos-slider-section {
  /* 强制自有背景色，不受父主题覆盖 */
  background-color: transparent !important;
}

/* 强制保证深色区域内文字可见：标题始终高亮白色 */
#services .pos-section-title,
#services .pos-card-title,
#services .pos-card-desc,
#services .pos-feature-item,
#services .pos-cta-title,
#services .pos-cta-desc,
.pos-des-section .pos-section-title,
.pos-des-section .pos-adv-title,
.pos-des-section .pos-adv-desc,
.pos-des-section .pos-data-title,
.pos-des-section .pos-data-sub,
.pos-des-section .pos-data-num,
.pos-des-section .pos-data-label,
#tutorials .pos-section-title,
#tutorials .pos-course-title,
#tutorials .pos-course-desc,
#tutorials .pos-meta-item,
#resources .pos-section-title,
#resources .pos-jing-title,
#resources .pos-jing-desc,
#resources .pos-jing-meta-item {
  color: #f7fbff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* 卡片在亮色模式下不被父主题 .bg-white 类覆盖 */
body.light .pos-service-card,
body.light .pos-adv-card,
body.light .pos-course-card,
body.light .pos-jing-card {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #fff !important;
}

/* 亮色模式下防止父主题把 .text-gray-600 覆盖为深色 */
body.light .pos-section-desc,
body.light .pos-card-desc,
body.light .pos-adv-desc,
body.light .pos-course-desc,
body.light .pos-jing-desc {
  color: rgba(232, 242, 255, 0.84) !important;
}

/* ripro list 模式文章链接颜色在暗色下修正 */
body.dark .post-item.item-list .entry-title a {
  color: rgba(255, 255, 255, 0.85) !important;
}
body.dark .posts-warp {
  background: transparent !important;
}

/* 右侧浮动导航在亮色模式下依然保持深色 */
body.light .m-navbar {
  background: rgba(255, 255, 255, 0.95) !important;
  border-left-color: rgba(0, 0, 0, 0.08) !important;
}
body.light .m-navbar a { color: rgba(0, 0, 0, 0.7) !important; }
body.light .m-navbar a:hover { color: #0369a1 !important; }

/* ===== 全局过渡动画，让明暗切换更丝滑 ===== */
#services,
.pos-des-section,
#tutorials,
#resources {
  transition: background 0.3s ease;
}

/* ===== 打印模式：隐藏装饰性背景 ===== */
@media print {
  .pos-bg-grid,
  .pos-bg-grid-des,
  .pos-bg-grid-jing,
  .pos-bg-grid-ship,
  .pos-glow,
  .pos-slider-bg-glow,
  .pos-slider-line { display: none !important; }
}

/* ===== 其他模块显示安全列虎 ===== */
/* 防止 IntersectionObserver 未触发导致模块永远透明不显示 */
/* 在 CSS 中用 animation 内建延迟显示兼容，JS 触发之前模块初始隐藏，1.5s 后如果还没有添加 .pos-visible 就自动显示 */
@keyframes pos-safe-show {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}
.pos-fade-in:not(.pos-visible) {
  animation: pos-safe-show 0.6s ease 1.5s both;
}
.pos-fade-in.pos-visible {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}

/* ====================================================
 * 首页终版视觉系统 — 清晰、铺满、稳定可读
 * ==================================================== */

/* 首页模块不再依赖淡入动画决定可读性 */
body.home .pos-fade-in,
body.home .pos-fade-in:not(.pos-visible),
body.home .pos-fade-in.pos-visible {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
}

/* 拉满版心，让模块真正铺开 */
body.home #services .container,
body.home .pos-des-shell,
body.home .pos-ship-shell,
body.home .pos-jing-shell,
body.home .pos-hero-shell {
  max-width: 1760px !important;
}
body.home .pos-des-head,
body.home .pos-ship-head,
body.home .pos-jing-head,
body.home .pos-hero-head,
body.home #services .text-center.mb-16 {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 减弱背景干扰，让视觉重心回到文字和卡片 */
body.home .pos-bg-grid,
body.home .pos-bg-grid-des,
body.home .pos-bg-grid-ship,
body.home .pos-bg-grid-jing {
  opacity: 0.24 !important;
  background-size: 72px 72px !important;
}
body.home .pos-glow,
body.home .pos-glow-des-l,
body.home .pos-glow-des-r,
body.home .pos-glow-ship-c,
body.home .pos-glow-jing-l,
body.home .pos-glow-jing-r {
  opacity: 0.06 !important;
  filter: blur(150px) !important;
}

/* 标题和说明统一做成高对比层级 */
body.home .pos-section-title,
body.home .pos-cta-title,
body.home .pos-data-title {
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  font-size: clamp(2rem, 3.3vw, 3rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.04 !important;
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.42) !important;
  filter: none !important;
  text-align: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.home .hero-title {
  color: #ffffff !important;
  font-size: clamp(3rem, 4.05vw, 4.7rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1.02 !important;
  text-shadow: 0 12px 36px rgba(0, 0, 0, 0.58), 0 0 34px rgba(0, 198, 255, 0.18) !important;
  filter: none !important;
  text-wrap: nowrap;
  white-space: nowrap;
}
body.home .hz-hero-slogan {
  display: block !important;
  font-size: clamp(3rem, 4.05vw, 4.7rem) !important;
  text-align: center !important;
  text-wrap: nowrap;
  white-space: nowrap;
}
body.home #home {
  --home-hero-pad-top: clamp(78px, 9.5svh, 112px);
  --home-hero-pad-bottom: clamp(24px, 3.2svh, 36px);
  min-height: 100svh !important;
  box-sizing: border-box !important;
  padding-top: var(--home-hero-pad-top) !important;
  padding-bottom: var(--home-hero-pad-bottom) !important;
}
body.home #home .pos-cover {
  object-position: center 52% !important;
  filter: saturate(1.04) contrast(1.08) brightness(0.78) !important;
}
body.home #home::before {
  background:
    linear-gradient(180deg, rgba(3, 6, 20, 0.44) 0%, rgba(3, 6, 20, 0.28) 30%, rgba(3, 6, 20, 0.18) 52%, rgba(3, 6, 20, 0.58) 78%, rgba(3, 6, 20, 0.86) 100%) !important;
}
body.home .pos-hero-shell {
  min-height: calc(100svh - var(--home-hero-pad-top) - var(--home-hero-pad-bottom)) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-bottom: 0 !important;
}
body.home .pos-hero-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  width: min(95vw, 1540px) !important;
  max-width: 1540px !important;
  min-height: calc(100svh - var(--home-hero-pad-top) - var(--home-hero-pad-bottom)) !important;
  padding: 0 22px !important;
}
body.home .pos-hero-head > .inline-flex {
  margin: 0 !important;
  transform: none !important;
  align-self: center;
}
body.home .pos-section-desc,
body.home .hero-subtitle,
body.home .pos-hero-desc,
body.home .hz-hero-desc,
body.home .pos-cta-desc,
body.home .pos-data-sub {
  color: #eaf2ff !important;
  font-size: 0.97rem !important;
  line-height: 1.78 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
  text-align: center !important;
}
body.home .hz-hero-desc {
  display: inline-block !important;
  max-width: 880px !important;
  padding: 12px 22px !important;
  margin: 0 auto 18px !important;
  white-space: normal !important;
  border-radius: 16px !important;
  background: rgba(8, 12, 26, 0.28) !important;
  border: 1px solid rgba(140, 162, 255, 0.14) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24) !important;
}
body.home .hz-hero-desc br {
  display: block;
  content: "";
  margin-top: 2px;
}
body.home .hz-neon-text,
body.home .hz-highlight {
  font-weight: 800 !important;
  text-shadow: 0 0 14px rgba(0, 198, 255, 0.18) !important;
}
body.home .hero-title,
body.home .hz-hero-slogan {
  width: min(100%, 1560px) !important;
  max-width: 1560px !important;
  margin: clamp(34px, 4.4svh, 48px) auto 0 !important;
  transform: none !important;
  padding: 0 22px !important;
}
body.home .hero-subtitle,
body.home .pos-hero-desc,
body.home .hz-hero-desc {
  width: min(100%, 920px) !important;
  max-width: 920px !important;
  margin: clamp(220px, 27.5svh, 276px) auto 0 !important;
  transform: none !important;
}
body.home .hz-hero-desc {
  display: block !important;
  padding: 15px 32px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(6, 12, 30, 0.66) 0%, rgba(5, 9, 24, 0.52) 100%) !important;
  border: 1px solid rgba(178, 205, 255, 0.2) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
}
body.home .hz-hero-desc p {
  margin: 0 !important;
}
body.home .hz-hero-desc.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 4px;
  vertical-align: -0.16em;
  background: linear-gradient(180deg, #7bddff, #a78bfa);
  box-shadow: 0 0 12px rgba(0, 198, 255, 0.55);
  animation: hz-type-caret 0.78s steps(1) infinite;
}
@keyframes hz-type-caret {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}
body.home .pos-hero-actions {
  width: min(100%, 1040px) !important;
  margin: clamp(20px, 2.5svh, 28px) 0 0 !important;
  align-self: center;
}
body.home .btn-group {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 28px !important;
  flex-wrap: wrap;
}
body.home .btn-container {
  margin: 0 !important;
  transform: none !important;
}
body.home .pos-hero-stats {
  width: min(100%, 1320px) !important;
  max-width: 1320px !important;
  grid-template-columns: repeat(4, minmax(190px, 1fr)) !important;
  gap: 22px !important;
  margin-top: auto !important;
  margin-bottom: clamp(22px, 3.8svh, 34px) !important;
  transform: none !important;
}
body.home .pos-hero-stat-card {
  min-height: 102px !important;
  padding: 18px 28px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(8, 15, 36, 0.62) 0%, rgba(5, 10, 26, 0.46) 100%) !important;
  border: 1px solid rgba(178, 205, 255, 0.2) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
}
body.home .pos-hero-stat-card .text-sm {
  white-space: nowrap;
}
body.home .pos-hero-scroll {
  left: 50% !important;
  bottom: 16px !important;
  z-index: 12 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0.96 !important;
  transform: translateX(-50%) scale(1) !important;
  filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.42)) drop-shadow(0 0 22px rgba(139, 92, 246, 0.28)) !important;
}
body.home .pos-hero-scroll .animate-bounce {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.home .pos-hero-scroll svg,
body.home .pos-hero-scroll-icon {
  width: 34px !important;
  height: 34px !important;
  overflow: visible !important;
}

/* 徽章更稳、更显高级 */
body.home .pos-section-badge {
  padding: 8px 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(88, 208, 255, 0.28) !important;
  background: rgba(6, 18, 38, 0.74) !important;
  color: #7bddff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18) !important;
}

/* 卡片与背景彻底分离，建立稳定阅读底 */
body.home .pos-service-card,
body.home .pos-adv-card,
body.home .pos-course-card,
body.home .pos-jing-card,
body.home .pos-data-item,
body.home .pos-hero-stat-card,
body.home .pos-cta-box {
  background: linear-gradient(180deg, rgba(6, 10, 24, 0.985) 0%, rgba(3, 6, 18, 0.995) 100%) !important;
  border: 1px solid rgba(174, 204, 255, 0.2) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px) !important;
  border-radius: 22px !important;
}
body.home .pos-service-card:hover,
body.home .pos-adv-card:hover,
body.home .pos-course-card:hover,
body.home .pos-jing-card:hover,
body.home .pos-cta-box:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(89, 216, 255, 0.34) !important;
  box-shadow: 0 28px 68px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(89, 216, 255, 0.08) !important;
}

/* 模块收紧一档，保留高级感同时更利落 */
body.home .pos-cards-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
}
body.home .pos-adv-grid,
body.home .pos-course-grid,
body.home .pos-jing-grid {
  gap: 20px !important;
}
body.home .pos-service-card {
  min-height: 392px !important;
  padding: 26px 22px 22px !important;
  text-align: center !important;
  align-items: center !important;
}
body.home .pos-adv-card {
  min-height: 148px !important;
  padding: 22px 20px !important;
}
body.home .pos-course-card,
body.home .pos-jing-card {
  min-height: 346px !important;
  padding: 24px 22px !important;
}
body.home .pos-data-banner {
  padding: 46px 34px !important;
  border-radius: 24px !important;
}
body.home .pos-data-item {
  padding: 18px 16px !important;
}

/* 卡片内部字号整体抬高 */
body.home .pos-card-title,
body.home .pos-adv-title,
body.home .pos-course-title,
body.home .pos-jing-title {
  color: #ffffff !important;
  font-size: 1.18rem !important;
  line-height: 1.38 !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.42) !important;
}
body.home .pos-card-desc,
body.home .pos-adv-desc,
body.home .pos-course-desc,
body.home .pos-jing-desc,
body.home .pos-service-card p,
body.home .pos-adv-card p,
body.home .pos-course-card p,
body.home .pos-jing-card p {
  color: #eaf3ff !important;
  font-size: 0.87rem !important;
  line-height: 1.64 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
}
body.home .pos-feature-item,
body.home .pos-meta-item,
body.home .pos-jing-meta-item,
body.home .pos-data-label,
body.home .pos-stat-label {
  color: #f4f8ff !important;
  font-size: 0.82rem !important;
  line-height: 1.48 !important;
}
body.home .pos-rating-num,
body.home .pos-jing-rating span {
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* 图标与数据做大，提升识别度 */
body.home .pos-card-icon-wrap,
body.home .pos-adv-icon-wrap {
  width: 66px !important;
  height: 66px !important;
  border-radius: 18px !important;
}
body.home .pos-card-icon {
  width: 52px !important;
  height: 52px !important;
  font-size: 22px !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28) !important;
}
body.home .pos-adv-icon-wrap {
  font-size: 22px !important;
  background: rgba(0, 212, 255, 0.12) !important;
  border-color: rgba(0, 212, 255, 0.32) !important;
}
body.home .pos-data-num,
body.home .pos-hero-stat-card .text-3xl,
body.home .pos-stat-value {
  color: #ffffff !important;
  font-size: 2.5rem !important;
  font-weight: 900 !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

/* 按钮统一加强，防止内容区弱化 */
body.home .pos-card-btn,
body.home .pos-view-all-btn,
body.home .pos-learn-btn,
body.home .pos-jing-btn,
body.home .pos-btn-primary,
body.home .pos-btn-ghost {
  min-height: 52px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}
body.home .pos-view-all-btn,
body.home .pos-btn-ghost {
  color: #f2f7ff !important;
  border-color: rgba(226, 236, 255, 0.34) !important;
  background: rgba(255, 255, 255, 0.09) !important;
}
body.home .pos-card-icon-wrap {
  margin-left: auto !important;
  margin-right: auto !important;
}
body.home .pos-card-title,
body.home .pos-card-desc {
  text-align: center !important;
}
body.home .pos-card-title {
  white-space: normal !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.home .pos-feature-list {
  width: 100% !important;
  max-width: 220px !important;
  margin: 2px auto 16px !important;
}
body.home .pos-feature-item {
  justify-content: flex-start !important;
  text-align: left !important;
}
body.home .pos-card-btn {
  width: auto !important;
  min-width: 146px !important;
  margin: 0 auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* ===== 全站深色模块文字可读性统一增强 ===== */
body .pos-service-card,
body .pos-adv-card,
body .pos-course-card,
body .pos-jing-card,
body .pos-data-item,
body .pos-hero-stat-card,
body .pos-cta-box,
body .pos-footer-brand,
body .pos-footer-col {
  position: relative;
}
body .pos-service-card::before,
body .pos-adv-card::before,
body .pos-course-card::before,
body .pos-jing-card::before,
body .pos-data-item::before,
body .pos-hero-stat-card::before,
body .pos-cta-box::before {
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.05);
}
body .pos-section-desc,
body .pos-card-desc,
body .pos-adv-desc,
body .pos-course-desc,
body .pos-jing-desc,
body .pos-cta-desc,
body .pos-data-sub,
body .pos-footer-desc,
body .pos-footer-links a,
body .pos-footer-contact li,
body .m-navbar a,
body .hover-warp .hover-link a,
body .hover-warp .abstop-item a {
  letter-spacing: 0.01em !important;
}

/* 首页主要区段适度留白 */
body.home #services.py-20,
body.home .pos-des-section.py-20,
body.home .pos-ship-section.py-20,
body.home .pos-jing-section.py-20 {
  padding-top: 82px !important;
  padding-bottom: 80px !important;
}
body.home .mb-16 {
  margin-bottom: 36px !important;
}
body.home .mb-8 {
  margin-bottom: 18px !important;
}
body.home .mb-12 {
  margin-bottom: 24px !important;
}
body.home .mb-5 {
  margin-bottom: 16px !important;
}
body.home .mb-6 {
  margin-bottom: 18px !important;
}
body.home .mb-4 {
  margin-bottom: 12px !important;
}
body.home .pos-cta-box {
  margin-top: 28px !important;
  padding: 54px 38px !important;
}
body.home .pos-data-header {
  margin-bottom: 24px !important;
}

/* 首页 Hero 数据卡保持轻透玻璃感，和说明模块统一 */
body.home #home .pos-hero-stat-card {
  background: linear-gradient(180deg, rgba(8, 15, 36, 0.62) 0%, rgba(5, 10, 26, 0.46) 100%) !important;
  border: 1px solid rgba(178, 205, 255, 0.2) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
}

/* 大屏下的布局更满 */
@media (min-width: 1440px) {
  body.home .pos-adv-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body.home .pos-course-grid,
  body.home .pos-jing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* 中屏兜底 */
@media (max-width: 1200px) {
  body.home .pos-cards-grid,
  body.home .pos-adv-grid,
  body.home .pos-course-grid,
  body.home .pos-jing-grid {
    gap: 16px !important;
  }
  body.home .pos-service-card,
  body.home .pos-course-card,
  body.home .pos-jing-card {
    min-height: 0 !important;
  }
}

/* 移动端仍保持清晰和满版 */
@media (max-width: 768px) {
  body.home #home {
    --home-hero-pad-top: 44px;
    --home-hero-pad-bottom: 88px;
    min-height: 100svh !important;
    padding-top: var(--home-hero-pad-top) !important;
    padding-bottom: var(--home-hero-pad-bottom) !important;
  }
  body.home .pos-hero-shell {
    min-height: calc(100svh - var(--home-hero-pad-top) - var(--home-hero-pad-bottom)) !important;
  }
  body.home .pos-hero-head {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 10px !important;
  }
  body.home .pos-hero-head > .inline-flex,
  body.home .hero-title,
  body.home .hz-hero-slogan,
  body.home .hero-subtitle,
  body.home .pos-hero-desc,
  body.home .hz-hero-desc,
  body.home .btn-container,
  body.home .pos-hero-stats {
    transform: none !important;
  }
  body.home .pos-hero-stats {
    margin-top: 18px !important;
    max-width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  body.home .hero-subtitle,
  body.home .pos-hero-desc,
  body.home .hz-hero-desc {
    max-width: 100% !important;
    margin-top: 0 !important;
  }
  body.home .hero-title,
  body.home .hz-hero-slogan {
    width: 100% !important;
    padding: 0 8px !important;
    text-wrap: balance;
    white-space: normal;
  }
  body.home .pos-hero-actions {
    width: 100% !important;
    margin-top: 18px !important;
  }
  body.home .btn-group {
    gap: 12px !important;
  }
  body.home .btn-container {
    margin-top: 10px !important;
  }
  body.home .pos-hero-stat-card {
    min-height: 96px !important;
    padding: 16px 14px !important;
  }
  body.home .pos-section-title,
  body.home .hero-title,
  body.home .hz-hero-slogan {
    font-size: clamp(2.1rem, 8.8vw, 3.2rem) !important;
  }
  body.home .pos-section-desc,
  body.home .hero-subtitle,
  body.home .pos-hero-desc,
  body.home .hz-hero-desc,
  body.home .pos-cta-desc,
  body.home .pos-data-sub {
    font-size: 0.86rem !important;
    line-height: 1.58 !important;
  }
  body.home .pos-cards-grid,
  body.home .pos-adv-grid,
  body.home .pos-course-grid,
  body.home .pos-jing-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  body.home #services.py-20,
  body.home .pos-des-section.py-20,
  body.home .pos-ship-section.py-20,
  body.home .pos-jing-section.py-20 {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  body.home .pos-service-card,
  body.home .pos-adv-card,
  body.home .pos-course-card,
  body.home .pos-jing-card {
    padding: 18px 16px !important;
  }
  body.home .pos-data-banner {
    padding: 28px 18px !important;
  }
}