/* =========================
   JanePrediction 局部视觉优化
   直接追加到现有CSS最后
   不改布局，不改轮播
   ========================= */

/* ---------- 全局轻量统一 ---------- */
:root {
	--wdl-primary: #3b82f6;
	--wdl-primary-2: #0169fe;
	--wdl-dark: #0f1722;
	--wdl-dark-2: #161e2b;
	--wdl-dark-3: #1b2432;
	--wdl-text: #d7deea;
	--wdl-muted: #8ea0b8;
	--wdl-border: rgba(255, 255, 255, 0.08);
	--wdl-border-light: rgba(18, 32, 56, 0.08);
	--wdl-shadow: 0 18px 40px rgba(7, 18, 39, 0.08);
	--wdl-shadow-dark: 0 18px 40px rgba(0, 0, 0, 0.28);
	--wdl-radius: 16px;
	--wdl-radius-sm: 12px;
}

body {
	color: #66758c;
}

p {
	line-height: 1.9 !important;
}

.section {
	position: relative;
}

.section .container {
	position: relative;
	z-index: 2;
}

hr.my-5 {
	opacity: 0.5;
	border-color: rgba(18, 32, 56, 0.08) !important;
}

/* ---------- 顶部导航 ---------- */
#header .header-body {
	background: rgba(10, 16, 28, 0.86) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
	backdrop-filter: blur(8px);
}

#header .header-container {
	min-height: 78px;
}

#header .header-logo a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff !important;
	font-weight: 700;
	letter-spacing: 0.01em;
}

#header .header-logo img {
	margin-right: 2px;
}

#header .header-nav-main nav>ul>li>a, #header .header-nav-main nav>ul>li>span
	{
	position: relative;
	padding-left: 14px !important;
	padding-right: 14px !important;
	border-radius: 10px;
	transition: all 0.22s ease;
}

#header .header-nav-main nav>ul>li>a:hover, #header .header-nav-main nav>ul>li>a.active
	{
	background: rgba(255, 255, 255, 0.06) !important;
	text-decoration: none !important;
}

#header .dropdown-menu {
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 14px !important;
	overflow: hidden;
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22) !important;
}

#header .dropdown-menu .dropdown-item {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

#header .btn.btn-gradient {
	border-radius: 999px !important;
	padding-left: 22px !important;
	padding-right: 22px !important;
	box-shadow: 0 10px 24px rgba(1, 105, 254, 0.28);
}

/* ---------- 首屏 Hero ---------- */
#section-concept {
	overflow: hidden;
}

#section-concept::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 18% 22%, rgba(59, 130, 246, 0.18),
		transparent 28%), linear-gradient(180deg, rgba(7, 12, 22, 0.34),
		rgba(8, 15, 28, 0.54));
	pointer-events: none;
}

#section-concept h1, #section-concept h4, #section-concept p,
	#section-concept a {
	position: relative;
	z-index: 2;
}

#section-concept h1 {
	letter-spacing: -0.03em;
	margin-bottom: 8px !important;
}

#section-concept h4 {
	letter-spacing: -0.03em;
	margin-bottom: 18px !important;
}

#section-concept .custom-font-size-1 {
	max-width: 520px;
	color: rgba(255, 255, 255, 0.84);
}

#section-concept .position-relative.border {
	border-width: 1px !important;
	border-color: rgba(255, 255, 255, 0.14) !important;
	border-radius: 18px !important;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.24);
}

#section-concept video {
	display: block;
	border-radius: 16px;
}

#section-concept .play-button-lg {
	width: 74px;
	height: 74px;
	box-shadow: 0 10px 30px rgba(1, 105, 254, 0.35);
}

.custom-header-bar {
	margin-top: 6px;
}

.custom-header-bar>div {
	border-radius: 16px;
	padding: 14px 22px;
	background: rgba(255, 255, 255, 0.88);
	box-shadow: 0 18px 40px rgba(12, 23, 44, 0.12);
}

.custom-header-bar:before {
	border-radius: 16px !important;
	opacity: 0.96;
	box-shadow: 0 18px 40px rgba(1, 105, 254, 0.18) !important;
}

.star-rating-wrap {
	letter-spacing: 2px;
}

.star-rating-wrap i {
	transform: scale(0.94);
}

/* ---------- 通用标题区 ---------- */
.text-center>h2.text-9, .text-center>h3.text-9, .text-center>h4.text-9 {
	letter-spacing: -0.03em;
}

.sub-title.text-primary, .font-weight-semibold.text-primary.text-4, h5.text-primary
	{
	opacity: 0.95;
}

/* ---------- 统计数字区 ---------- */
.counters {
	margin-bottom: 3.5rem !important;
}

.counter>div {
	background: #fff;
	border: 1px solid rgba(18, 32, 56, 0.08);
	border-radius: var(--wdl-radius);
	padding: 26px 30px;
	box-shadow: var(--wdl-shadow);
	height: 100%;
}

.counter h3 {
	color: #0f1722;
	letter-spacing: -0.04em;
	margin-bottom: 10px !important;
}

.counter label {
	font-size: 16px;
}

.counter p {
	color: #7c8aa0 !important;
	margin-bottom: 0 !important;
}

/* ---------- 中段设备展示区 ---------- */
.intro .img-fluid, .intro2 .img-fluid, .intro3 .img-fluid,
	.strong-shadow img, .image-wrapper img, .section img.lazyload {
	border-radius: 16px !important;
}

.intro .box-shadow-3, .intro2 .box-shadow-3, .intro3 .box-shadow-3,
	.strong-shadow, .image-wrapper img {
	box-shadow: 0 20px 45px rgba(9, 20, 40, 0.12) !important;
}

.intro strong, .intro .arrow {
	opacity: 0.92;
}

/* ---------- 深色功能卡片区（最核心可复用） ---------- */
.section-dark .bg-color-dark-scale-2, .bg-color-dark-scale-2.rounded {
	background: linear-gradient(180deg, rgba(30, 40, 56, 0.96),
		rgba(22, 30, 43, 0.96)) !important;
	border: 1px solid var(--wdl-border) !important;
	border-radius: 18px !important;
	box-shadow: var(--wdl-shadow-dark);
	transition: transform 0.22s ease, border-color 0.22s ease, box-shadow
		0.22s ease;
}

.section-dark .bg-color-dark-scale-2:hover, .bg-color-dark-scale-2.rounded:hover
	{
	transform: translateY(-4px);
	border-color: rgba(59, 130, 246, 0.24) !important;
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.32);
}

.section-dark .bg-color-dark-scale-2 h4, .section-dark .bg-color-dark-scale-2 p
	{
	position: relative;
	z-index: 2;
}

.section-dark .bg-color-dark-scale-2 h4 {
	color: #fff !important;
	letter-spacing: -0.02em;
}

.section-dark .custom-text-color-1, .section-dark .color-inherit,
	.section-dark p {
	color: rgba(223, 231, 243, 0.74) !important;
}

.section-dark .icon-bg {
	opacity: 0.92;
	transform: scale(0.96);
}

/* ---------- 6个理由 image-box 区 ---------- */
.image-box {
	margin-bottom: 26px;
}

.image-box>a {
	display: block;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 18px 42px rgba(9, 20, 40, 0.1);
}

.image-box .wdl-lazy-img {
	height: 180px !important;
	object-fit: cover;
	margin-bottom: 0 !important;
	transition: transform 0.35s ease;
}

.image-box:hover .wdl-lazy-img {
	transform: scale(1.03);
}

.image-box>div+p, .image-box p.pe-5 {
	padding-right: 0 !important;
}

.image-box .text-12 {
	min-width: 44px;
	color: var(--wdl-primary) !important;
	opacity: 0.95;
}

.image-box h4 {
	letter-spacing: -0.02em;
	line-height: 1.45 !important;
}

.image-box p {
	color: #6f8198 !important;
	margin-bottom: 0;
}

/* ---------- 预测记录模块 recent-posts ---------- */
.recent-posts article {
	height: 100%;
	padding: 22px 22px 18px;
	border: 1px solid rgba(18, 32, 56, 0.08);
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--wdl-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.recent-posts article:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 48px rgba(9, 20, 40, 0.12);
}

.recent-posts .date {
	width: 64px;
	min-width: 64px;
	text-align: center;
	border-radius: 14px;
	background: linear-gradient(180deg, #f5f9ff, #eef4ff);
	border: 1px solid rgba(59, 130, 246, 0.12);
	padding: 10px 6px;
}

.recent-posts .date .day {
	display: block;
	font-size: 16px;
	line-height: 1.2;
}

.recent-posts .date .month {
	display: block;
	margin-top: 4px;
	color: #7a8ba3;
}

.recent-posts h4 {
	margin-bottom: 8px !important;
	letter-spacing: -0.02em;
}

.recent-posts p {
	color: #71829a;
}

.recent-posts .read-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	color: #0f1722 !important;
	transition: all 0.2s ease;
}

.recent-posts .read-more:hover {
	color: var(--wdl-primary) !important;
	text-decoration: none !important;
}

/* ---------- 白底图文 section 统一精简 ---------- */
.section:not(.section-dark) .strong-shadow, .section:not(.section-dark) .image-wrapper,
	.section:not(.section-dark) .position-relative.border, .section:not(.section-dark) .rounded.box-shadow-3
	{
	box-shadow: 0 20px 44px rgba(10, 20, 38, 0.1) !important;
}

.section:not(.section-dark) .text-4, .section:not(.section-dark) p {
	color: #6b7b90;
}

/* ---------- 深色 section 文案层次 ---------- */
.section-dark h2, .section-dark h3, .section-dark h4, .section-dark h5 {
	color: #ffffff !important;
	letter-spacing: -0.03em;
}

.section-dark .text-color-light {
	color: #fff !important;
}

/* ---------- 按钮统一 ---------- */
.btn.btn-modern, .btn.btn-dark, .btn.btn-gradient {
	border-radius: 999px !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em;
	transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s
		ease;
}

.btn.btn-modern:hover, .btn.btn-dark:hover, .btn.btn-gradient:hover {
	transform: translateY(-2px);
	text-decoration: none !important;
}

.btn.btn-dark {
	background: #121a27 !important;
	border-color: #121a27 !important;
	box-shadow: 0 12px 28px rgba(8, 17, 33, 0.22);
}

.btn.btn-dark:hover {
	background: #0e1520 !important;
	border-color: #0e1520 !important;
}

/* ---------- 列表步骤区 ---------- */
.list.list-unstyled.d-flex.justify-content-center.text-primary {
	gap: 22px;
}

.list.list-unstyled.d-flex.justify-content-center.text-primary li {
	padding: 10px 18px;
	border-radius: 999px;
	background: rgba(59, 130, 246, 0.08);
	border: 1px solid rgba(59, 130, 246, 0.12);
}

.list.list-unstyled.d-flex.justify-content-center.text-primary li.mx-5 {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ---------- 图片统一 ---------- */
img.img-fluid {
	image-rendering: auto;
}

/* ---------- 轻微收紧一些过大的留白 ---------- */
.section.py-5.my-5 .row.my-5, .section .row.pt-md-5.mt-5, .section .row.pb-md-5.mb-md-5
	{
	margin-bottom: 0 !important;
}

.section .spacer.py-md-4.my-md-5 {
	padding-top: 1.5rem !important;
	padding-bottom: 1.5rem !important;
	margin-top: 1.5rem !important;
	margin-bottom: 1.5rem !important;
}