/* ============================================================
   站点首页样式（合并版 home.css）
   由原 index.html 内联 <style> 块与 tech-light.css 增强层合并而成，
   保持原有层叠顺序：基础样式 → 组件样式 → 科技感增强层。
   生成方式：构建期合并，运行时无覆盖链。
   ============================================================ */

/* ===== 第 1 部分：轮播控制（原内联块 A） ===== */

.carousel-container { position: relative; overflow: hidden; height: 100%; }
.carousel { display: flex; transition: transform 0.5s ease-in-out; }
.carousel-item { min-width: 100%; position: relative; height: 100%; }
.carousel-img { width: 100%; height: 100%; object-fit: cover; }
.carousel-controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; }
.carousel-indicator { width: 30px; height: 4px; border-radius: 8px; background-color: rgba(255, 255, 255, 0.4); cursor: pointer; transition: all 0.3s ease; }
.carousel-indicator.active { background-color: white; width: 40px; }
@media (max-width: 640px) { .carousel-item { background-position: 60% center; } }

/* ===== 第 2 部分：页面组件与区块样式（原内联块 B） ===== */

@keyframes marquee {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
.animate-marquee {
animation: marquee 30s linear infinite;
}
@keyframes blink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.animate-blink {
animation: blink 3s ease-in-out infinite;
}

/* 商品分类菜单样式 */
.category-item.active {
background-color: white;
border-right: 2px solid #0052d9;
font-weight: 500;
}

.category-item.active a {
color: #0052d9;
}

.category-item:hover {
background-color: #f9fafb;
}

/* 隐藏滚动条但保持滚动功能 */
#category-sidebar,
#subcategory-content {
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */
}

#category-sidebar::-webkit-scrollbar,
#subcategory-content::-webkit-scrollbar {
width: 0;
height: 0;
}

/* 确保标题和分类列表之间无间隔 */
#category-sidebar .categories-list {
margin-top: 0;
}

#category-sidebar .categories-list .category-item:first-child {
border-top: none;
}

/* 移动端导航样式 */
.mobile-nav-item {
border-radius: 0;
transition: all 0.3s ease;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.mobile-nav-item.active {
background-color: white;
color: #0052d9 !important;
font-weight: 500;
}

.mobile-nav-item:hover {
background-color: #e6f0ff;
color: #0052d9;
}

/* 移动端分类样式 */
.mobile-category-item {
transition: all 0.2s ease;
border-bottom: 1px solid #f2f3f5;
}

.mobile-category-item:hover {
background-color: #f9fafb;
}

.mobile-subcategories {
transition: all 0.3s ease;
}

.mobile-subcategories a {
transition: all 0.2s ease;
}

.mobile-subcategories a:hover {
background-color: white;
color: #0052d9;
}

/* 移动端菜单动画 */
#mobile-menu {
animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}

/* 改进移动端滚动条 */
#mobile-menu::-webkit-scrollbar {
width: 4px;
}

#mobile-menu::-webkit-scrollbar-track {
background: #f1f1f1;
}

#mobile-menu::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 8px;
}

#mobile-menu::-webkit-scrollbar-thumb:hover {
background: #a1a1a1;
}

/* 首屏下方的常用服务入口 */
.home-quick-services {
position: relative;
z-index: 3;
margin-top: -38px;
padding: 0;
background: transparent;
pointer-events: none;
}

.home-quick-services-shell {
width: min(1360px, calc(100vw - 32px));
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
align-items: stretch;
}

.home-quick-service {
display: flex;
align-items: center;
gap: 14px;
min-height: 76px;
height: 76px;
padding: 12px 16px;
color: #172033 !important;
background: #fff;
box-shadow: 0 1px 4px rgba(20, 50, 88, .12), 0 6px 16px rgba(20, 50, 88, .04);
pointer-events: auto;
transition: transform .22s ease, box-shadow .22s ease;
}

.home-quick-service:hover {
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(20, 50, 88, .11);
}

.home-quick-icon {
display: grid;
flex: 0 0 auto;
width: 42px;
height: 42px;
place-items: center;
color: #1769e8;
font-size: 18px;
background: linear-gradient(180deg, #f5f9ff 0%, #e8f1ff 100%);
box-shadow: inset 0 -5px 10px rgba(23, 105, 232, .08);
}

.home-quick-copy { min-width: 0; }
.home-quick-copy { display: flex; flex-direction: column; justify-content: center; align-self: stretch; }
.home-quick-copy strong { display: block; margin-bottom: 4px; color: #1b2434; font-size: 15px; line-height: 1.2; font-weight: 700; white-space: nowrap; }
.home-quick-copy span { display: block; overflow: hidden; color: #9aa4b2; font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }

.feature-zone {
padding: 76px 0 80px !important;
background:
radial-gradient(780px 320px at 8% 8%, rgba(26, 117, 255, .08), transparent 72%),
radial-gradient(720px 300px at 92% 100%, rgba(72, 207, 255, .08), transparent 72%),
linear-gradient(180deg, #f8fbff 0%, #f2f7fc 100%);
}

.feature-shell { width: min(1360px, calc(100vw - 32px)); margin: 0 auto; position: relative; z-index: 1; }
.home-section-kicker { display: inline-flex; align-items: center; gap: 8px; color: #0758d9; font-size: 12px; line-height: 1; font-weight: 750; letter-spacing: .12em; }
.home-section-kicker::before { content: ''; width: 22px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, #0b63e6, #55c8ff); }
.feature-heading { max-width: 760px; margin: 0 auto 38px; text-align: center; }
.feature-heading .home-section-kicker { justify-content: center; }
.feature-heading h2 { margin: 14px 0 12px; color: #101828; font-size: 34px; line-height: 1.25; font-weight: 760; letter-spacing: -.035em; }
.feature-heading p { margin: 0; color: #667085; font-size: 15px; line-height: 1.8; }
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.feature-card {
--feature-accent: #0b63e6;
--feature-accent-soft: rgba(11, 99, 230, .13);
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 330px;
padding: 18px 20px 20px;
overflow: hidden;
background: rgba(255, 255, 255, .92);
border: 1px solid #dce7f3;
border-radius: 16px;
box-shadow: 0 14px 34px rgba(19, 45, 80, .07), inset 0 1px 0 #fff;
transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}

.feature-card::before {
content: '';
position: absolute;
inset: 0 0 auto;
height: 2px;
background: linear-gradient(90deg, transparent, var(--feature-accent), transparent);
opacity: .55;
}

.feature-card:hover { transform: translateY(-6px); border-color: #bed5f1; box-shadow: 0 26px 54px rgba(19, 54, 97, .13), inset 0 1px 0 #fff; }
.feature-card:hover .feature-icon { transform: translateY(-4px) scale(1.035); }
.feature-card.feature-cyan { --feature-accent: #0798bd; --feature-accent-soft: rgba(7, 152, 189, .13); }
.feature-card.feature-violet { --feature-accent: #6957d9; --feature-accent-soft: rgba(105, 87, 217, .13); }
.feature-card.feature-indigo { --feature-accent: #3154b9; --feature-accent-soft: rgba(49, 84, 185, .13); }

.feature-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.feature-card-badge { color: var(--feature-accent); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.feature-card-index { color: #c4ceda; font-size: 12px; font-weight: 750; letter-spacing: .12em; }

.feature-illustration {
position: relative;
display: grid;
place-items: center;
height: 112px;
margin-bottom: 18px;
overflow: hidden;
border: 1px solid #e3ebf5;
border-radius: 12px;
background:
linear-gradient(rgba(111, 142, 180, .07) 1px, transparent 1px),
linear-gradient(90deg, rgba(111, 142, 180, .07) 1px, transparent 1px),
radial-gradient(circle at 50% 50%, var(--feature-accent-soft), rgba(255,255,255,.78) 62%);
background-size: 18px 18px, 18px 18px, 100% 100%;
}

.feature-illustration::before,
.feature-illustration::after { content: ''; position: absolute; border: 1px solid var(--feature-accent-soft); border-radius: 50%; }
.feature-illustration::before { width: 94px; height: 94px; animation: feature-halo-pulse 3.4s ease-in-out infinite; }
.feature-illustration::after { width: 72px; height: 72px; border-style: dashed; animation: feature-stage-orbit 9s linear infinite; }
.feature-icon { position: relative; z-index: 1; width: 82px; height: 82px; color: var(--feature-accent); filter: drop-shadow(0 10px 13px rgba(22, 71, 133, .14)); transition: transform .26s ease; }

.feature-card:nth-child(2) .feature-illustration::before,
.feature-card:nth-child(2) .feature-illustration::after { animation-delay: -.8s; }
.feature-card:nth-child(3) .feature-illustration::before,
.feature-card:nth-child(3) .feature-illustration::after { animation-delay: -1.6s; }
.feature-card:nth-child(4) .feature-illustration::before,
.feature-card:nth-child(4) .feature-illustration::after { animation-delay: -2.4s; }
.feature-icon .motion-globe-grid { transform-box: view-box; transform-origin: 48px 48px; animation: feature-globe-breathe 3.2s ease-in-out infinite; }
.feature-icon .motion-orbit-ring { transform-box: view-box; transform-origin: 48px 48px; animation: feature-svg-orbit 5.8s linear infinite; }
.feature-icon .motion-node { transform-box: fill-box; transform-origin: center; animation: feature-node-pulse 1.8s ease-in-out infinite; }
.feature-icon .motion-node-b { animation-delay: -.6s; }
.feature-icon .motion-node-c { animation-delay: -1.2s; }
.feature-icon .motion-coins { animation: feature-coins-lift 2.6s ease-in-out infinite; }
.feature-icon .motion-clock-hands { transform-box: view-box; transform-origin: 62px 37px; animation: feature-clock-tick 4.8s steps(12, end) infinite; }
.feature-icon .motion-billing-dot { animation: feature-billing-dot 2.4s ease-in-out infinite; }
.feature-icon .motion-rocket { transform-box: view-box; transform-origin: 48px 48px; animation: feature-rocket-float 2.5s ease-in-out infinite; }
.feature-icon .motion-thrust { transform-box: fill-box; transform-origin: center top; animation: feature-thrust 1s ease-in-out infinite; }
.feature-icon .motion-star { transform-box: fill-box; transform-origin: center; animation: feature-star 1.7s ease-in-out infinite; }
.feature-icon .motion-star-b { animation-delay: -.85s; }
.feature-icon .motion-console-scan { animation: feature-console-scan 2.7s ease-in-out infinite; }
.feature-icon .motion-console-toggle { transform-box: fill-box; transform-origin: center; animation: feature-toggle 2.2s ease-in-out infinite; }
.feature-icon .motion-console-toggle-b { animation-delay: -1.1s; }
.feature-icon .motion-status-light { animation: feature-status-light 1.6s ease-in-out infinite; }

@keyframes feature-halo-pulse { 0%, 100% { transform: scale(.92); opacity: .45; } 50% { transform: scale(1.08); opacity: .9; } }
@keyframes feature-stage-orbit { to { transform: rotate(360deg); } }
@keyframes feature-globe-breathe { 0%, 100% { transform: scaleX(.82); opacity: .72; } 50% { transform: scaleX(1.08); opacity: 1; } }
@keyframes feature-svg-orbit { to { transform: rotate(360deg); } }
@keyframes feature-node-pulse { 0%, 100% { transform: scale(.72); opacity: .58; } 50% { transform: scale(1.25); opacity: 1; } }
@keyframes feature-coins-lift { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-3px); } }
@keyframes feature-clock-tick { to { transform: rotate(360deg); } }
@keyframes feature-billing-dot { 0% { transform: translate(-7px, 8px); opacity: 0; } 35%, 65% { opacity: 1; } 100% { transform: translate(7px, -8px); opacity: 0; } }
@keyframes feature-rocket-float { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-4px); } }
@keyframes feature-thrust { 0%, 100% { transform: scaleY(.72); opacity: .5; } 50% { transform: scaleY(1.18); opacity: 1; } }
@keyframes feature-star { 0%, 100% { transform: scale(.55) rotate(0); opacity: .35; } 50% { transform: scale(1.18) rotate(45deg); opacity: 1; } }
@keyframes feature-console-scan { 0%, 100% { transform: translateY(-7px); opacity: .25; } 50% { transform: translateY(10px); opacity: .95; } }
@keyframes feature-toggle { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes feature-status-light { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
.feature-illustration::before,
.feature-illustration::after,
.feature-icon * { animation: none !important; }
}

.feature-card-copy { display: flex; flex: 1; flex-direction: column; }
.feature-card-title { margin: 0 0 8px; color: #111827; font-size: 20px; line-height: 1.35; font-weight: 730; }
.feature-card-desc { flex: 1; margin: 0; color: #687588; font-size: 13px; line-height: 1.75; }
.feature-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #e8eef6; }
.feature-card-meta span { display: inline-flex; align-items: center; gap: 5px; color: #607087; font-size: 11px; font-weight: 650; }
.feature-card-meta span + span::before { content: ''; width: 3px; height: 3px; margin-right: 3px; border-radius: 50%; background: var(--feature-accent); }

/* 首页专业化统一视觉 */
:root {
--home-shell-width: min(1360px, calc(100vw - 32px));
--home-card-radius: 22px;
--home-card-border: #dbe7f5;
--home-card-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
--home-card-shadow-hover: 0 28px 56px rgba(15, 23, 42, 0.14);
}

body {
background: linear-gradient(180deg, #f5f8fc 0%, #f2f6fb 100%);
color: #0f172a;
}

body > .bg-transparent.hidden.md\:flex {
background: transparent;
border-bottom: 0;
color: #374151;
padding-top: 8px;
padding-bottom: 8px;
}

body > .bg-transparent.hidden.md\:flex .animate-blink {
animation: blink 3s ease-in-out infinite;
color: inherit;
font-weight: inherit;
}

body > .bg-transparent.hidden.md\:flex .animate-marquee {
opacity: 1;
animation-duration: 30s;
}

.home-topbar {
position: relative;
z-index: 51;
background: #f7faff;
border-bottom: 1px solid #e6eef8;
color: #5d6b80;
font-size: 12px;
}

.home-topbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-height: 38px;
}

.home-topbar-left,
.home-topbar-right {
display: flex;
align-items: center;
gap: 22px;
min-width: 0;
}

.home-topbar-left > span {
display: inline-flex;
align-items: center;
gap: 7px;
white-space: nowrap;
}

.home-topbar-status { color: #0a7d4b; font-weight: 650; }
.home-topbar-status i { font-size: 7px; }
.home-topbar-right a { display: inline-flex; align-items: center; gap: 6px; color: #4c5a70; transition: color .2s ease; white-space: nowrap; }
.home-topbar-right a:hover { color: #0b63e6; }

nav.bg-white\/80 {
background: rgba(255, 255, 255, 0.82);
border-bottom-color: rgba(226, 232, 240, 0.9);
box-shadow: 0 10px 32px rgba(15, 23, 42, 0.06);
}

nav > .flex.items-center.h-16 {
width: 100%;
max-width: var(--home-shell-width);
margin: 0 auto;
}

nav a {
letter-spacing: 0;
}

nav .home-brand { display: inline-flex; align-items: center; min-height: 42px; }
nav .home-nav-main { min-width: 0; }
nav .home-nav-link {
display: inline-flex;
align-items: center;
height: 38px;
padding: 0 12px;
border-radius: 10px;
color: #445166;
font-size: 14px;
font-weight: 650;
white-space: nowrap;
transition: color .2s ease, background-color .2s ease;
}

nav .home-nav-link:hover { color: #0758d9; background: #f2f7ff; }
nav .home-nav-link-trigger { cursor: pointer; }

nav .home-nav-link.is-current {
color: #0758d9;
background: #f2f7ff;
}

nav .home-nav-actions { margin-left: 22px; }

nav .home-nav-login,
nav .home-nav-register {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 0 16px;
border-radius: 10px;
font-size: 14px;
font-weight: 650;
white-space: nowrap;
transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

nav .home-nav-login { margin-right: 10px; color: #344054; }
nav .home-nav-login:hover { color: #0758d9; background: #f2f7ff; }
nav .home-nav-register { color: #fff; background: linear-gradient(135deg, #0d6bff 0%, #0846cf 100%); box-shadow: 0 10px 24px rgba(11, 85, 232, .24); }
nav .home-nav-register:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(11, 85, 232, .32); }

nav .hidden.md\:flex.items-center.ml-6 > a,
nav .hidden.md\:flex.items-center.ml-6 > div > a {
border-radius: 999px;
padding-left: 14px;
padding-right: 14px;
}

nav .hidden.md\:flex.items-center > a[href="/user/login.php"] {
height: 42px;
padding: 0 16px;
border-radius: 999px;
margin-right: 10px;
font-size: 14px;
}

nav .hidden.md\:flex.items-center > a[href="/user/register.php"] {
height: 42px;
padding: 0 18px;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 10px 24px rgba(0, 82, 217, 0.2);
}

#product-menu {
width: min(1320px, calc(100vw - 32px));
left: 50%;
right: auto;
transform: translateX(-50%);
top: 78px;
height: min(500px, calc(100vh - 110px));
border: 1px solid #e2e8f0;
border-radius: 16px;
box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18);
overflow: hidden;
}

#category-sidebar {
background: linear-gradient(180deg, #f8fbff 0%, #f3f7fd 100%);
}

#subcategory-content {
background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,251,255,0.96) 100%);
}

.carousel-container {
height: clamp(430px, 60vh, 620px);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}

.site-shell {
width: var(--home-shell-width, min(1360px, calc(100vw - 32px)));
margin: 0 auto;
}

/* 浏览器放大/窄视口下容器满宽：文字避让左右箭头（仅平板/小桌面档，手机端居中布局不受影响） */
@media (max-width: 1420px) and (min-width: 768px) {
.carousel-item .site-shell.hero-shell {
padding-left: 76px;
padding-right: 76px;
}
}

.carousel-item {
position: relative;
isolation: isolate;
}

.carousel-item::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background:
linear-gradient(90deg, rgba(243, 247, 252, 0.94) 0%, rgba(243, 247, 252, 0.88) 28%, rgba(243, 247, 252, 0.56) 52%, rgba(243, 247, 252, 0.10) 100%),
linear-gradient(180deg, rgba(15, 23, 42, 0.02) 0%, rgba(15, 23, 42, 0.12) 100%);
}

.carousel-item::after {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 54%;
z-index: 0;
background: radial-gradient(720px 320px at 10% 50%, rgba(0, 82, 217, 0.10), transparent 72%);
pointer-events: none;
}

.hero-content {
position: relative;
z-index: 2;
max-width: 680px;
}

.hero-shell {
position: relative;
z-index: 2;
height: 100%;
display: flex;
align-items: center;
}

.hero-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(0, 82, 217, 0.12);
backdrop-filter: blur(8px);
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.hero-title {
font-family: "YouSheBiaoTiHei", "Microsoft YaHei", sans-serif;
font-size: clamp(34px, 5vw, 64px);
line-height: 1.04;
letter-spacing: 0;
color: #0f172a;
margin-bottom: 14px;
}

.hero-desc {
font-size: clamp(14px, 1.45vw, 18px);
line-height: 1.8;
color: #4e5969;
max-width: 620px;
margin-bottom: 24px;
}

.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}

.hero-cta-primary,
.hero-cta-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 0 22px;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

.hero-cta-primary {
background: linear-gradient(135deg, #0d5eff 0%, #0b49d9 100%);
box-shadow: 0 14px 28px rgba(13, 94, 255, 0.28);
}

.hero-cta-secondary {
background: rgba(255, 255, 255, 0.82);
color: #0f172a;
border: 1px solid rgba(148, 163, 184, 0.28);
}

.hero-cta-primary:hover,
.hero-cta-secondary:hover {
transform: translateY(-1px);
}

.hero-notes {
display: flex;
flex-wrap: wrap;
gap: 0;
margin-top: 18px;
}

.hero-note {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: #56637a;
padding: 0;
border: 0;
background: transparent;
}
.hero-note + .hero-note {
margin-left: 14px;
}
.hero-note + .hero-note::before {
content: '·';
margin-right: 14px;
color: #0b63e6;
font-weight: 800;
}

.hero-note i {
color: #0b5cff;
}

#carousel-prev,
#carousel-next {
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.75);
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

.carousel-controls {
bottom: 26px;
}

.carousel-indicator {
height: 5px;
background-color: rgba(255, 255, 255, 0.5);
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.carousel-indicator.active {
background-color: #ffffff;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
}

.s4-serverIntroduction .s4-defaultWidth,
.s1-defaultWidth {
width: var(--home-shell-width);
max-width: var(--home-shell-width);
}

.s4-serverIntroduction .s4-selected,
.s4-serverIntroduction .s4-productAdvantages {
background: linear-gradient(180deg, #f7faff 0%, #f2f6fb 100%);
}

.s4-title-Description,
.s1-title-Description {
max-width: 820px;
margin: 0 auto 34px;
text-align: center;
}

.s4-title-Description span,
.s1-title-Description span {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 14px;
border-radius: 999px;
background: #eff6ff;
border: 1px solid #dbeafe;
color: #0b5cff;
font-size: 13px;
font-weight: 700;
}

.s4-title-Description p,
.s1-title-Description p {
margin-top: 14px;
font-size: 15px;
line-height: 1.8;
color: #64748b;
}

.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-currentSection .s4-cutContent,
.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-handheldFan .s4-itemClickOnTheHandheldButton .s4-clickerContent {
gap: 24px;
}

.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-currentSection .s4-cutContent .s4-itemSever,
.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-handheldFan .s4-itemClickOnTheHandheldButton .s4-clickerContent .s4-itemSever {
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
border: 1px solid var(--home-card-border);
border-radius: var(--home-card-radius);
box-shadow: var(--home-card-shadow);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-currentSection .s4-cutContent .s4-itemSever:hover {
transform: translateY(-6px);
border-color: #c6d6ea;
box-shadow: var(--home-card-shadow-hover);
}

.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-currentSection .s4-cutContent .s4-itemSever .s4-labelDescription,
.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-handheldFan .s4-itemClickOnTheHandheldButton .s4-clickerContent .s4-itemSever .s4-labelDescription {
    margin: 0 24px;
    padding: 24px 0 18px;
    border-bottom: 1px solid #e5edf8;
}

.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-currentSection .s4-cutContent .s4-itemSever .s4-labelDescription span,
.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-handheldFan .s4-itemClickOnTheHandheldButton .s4-clickerContent .s4-itemSever .s4-labelDescription span {
font-size: 21px;
font-weight: 700;
color: #0f172a;
line-height: 1.35;
}

.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-currentSection .s4-cutContent .s4-itemSever .s4-labelDescription p,
.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-handheldFan .s4-itemClickOnTheHandheldButton .s4-clickerContent .s4-itemSever .s4-labelDescription p {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.85;
    color: #64748b;
}

.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-currentSection .s4-cutContent .s4-itemSever .s4-specifications,
.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-handheldFan .s4-itemClickOnTheHandheldButton .s4-clickerContent .s4-itemSever .s4-specifications {
    padding: 14px 24px 0;
    color: #334155;
    font-size: 14px;
    line-height: 1.9;
}

.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-currentSection .s4-cutContent .s4-itemSever .s4-specifications .describingRules,
.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-handheldFan .s4-itemClickOnTheHandheldButton .s4-clickerContent .s4-itemSever .s4-specifications .describingRules {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 9px 0;
    border-bottom: 1px dashed #e9eff8;
}

.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-currentSection .s4-cutContent .s4-itemSever .s4-specifications .describingRules:last-child,
.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-handheldFan .s4-itemClickOnTheHandheldButton .s4-clickerContent .s4-itemSever .s4-specifications .describingRules:last-child {
border-bottom: 0;
}

.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-currentSection .s4-cutContent .s4-itemSever .s4-specifications .describingRules p:first-child {
width: auto;
color: #64748b;
}

.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-currentSection .s4-cutContent .s4-itemSever .s4-specifications .describingRules p:last-child {
text-align: right;
font-weight: 600;
color: #0f172a;
}

.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-currentSection .s4-cutContent .s4-itemSever .s4-tagPrice,
.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-handheldFan .s4-itemClickOnTheHandheldButton .s4-clickerContent .s4-itemSever .s4-tagPrice {
padding: 18px 22px 0;
align-items: center;
}

.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-currentSection .s4-cutContent .s4-itemSever .s4-tagPrice .s4-label .s4-item-mark,
.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-handheldFan .s4-itemClickOnTheHandheldButton .s4-clickerContent .s4-itemSever .s4-label .s4-item-mark {
width: auto;
min-width: 74px;
height: 28px;
padding: 0 10px;
border-radius: 999px;
background: rgba(239, 68, 68, 0.06);
font-weight: 600;
}

.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-currentSection .s4-cutContent .s4-itemSever .s4-tagPrice .s4-price .s4-colour,
.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-handheldFan .s4-itemClickOnTheHandheldButton .s4-clickerContent .s4-itemSever .s4-tagPrice .s4-price .s4-colour {
color: #0b5cff;
font-size: 28px;
font-weight: 800;
letter-spacing: 0;
}

.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-currentSection .s4-cutContent .s4-itemSever > a,
.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-handheldFan .s4-itemClickOnTheHandheldButton .s4-clickerContent .s4-itemSever .s4-tagPrice a {
background: linear-gradient(135deg, #0d5eff 0%, #0b49d9 100%);
height: 50px;
margin-top: 18px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
}

/* 首页精选产品矩阵 */
.home-product-section {
position: relative;
padding: 82px 0 88px;
overflow: hidden;
background:
radial-gradient(620px 280px at 100% 0%, rgba(37, 117, 255, .07), transparent 72%),
#ffffff;
}

.home-product-shell { width: min(1360px, calc(100vw - 32px)); margin: 0 auto; }
.home-product-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; margin-bottom: 30px; }
.home-product-title-group { flex: 0 0 420px; max-width: 420px; }
.home-product-title-group h2 { margin: 13px 0 10px; color: #101828; font-size: 34px; line-height: 1.2; font-weight: 760; letter-spacing: -.035em; }
.home-product-title-group p { margin: 0; color: #707d90; font-size: 14px; line-height: 1.75; }
.home-product-nav-wrap { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; align-items: flex-end; gap: 10px; }
.home-product-links { display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: wrap; }
.home-product-links button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; color: #536175; font-size: 12px; font-weight: 650; border: 1px solid #dce5ef; background: #fff; cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.home-product-links button small { min-width: 18px; height: 18px; padding: 0 5px; color: #8a98aa; font-size: 10px; line-height: 18px; text-align: center; background: #f1f5f9; border-radius: 8px; }
.home-product-links button:hover { color: #0758d9; border-color: #b9d3f6; background: #f4f8ff; }
.home-product-links button.is-active { color: #fff; border-color: #0b63e6; background: #0b63e6; }
.home-product-links button.is-active small { color: #0758d9; background: #fff; }
.home-product-live { display: flex; align-items: center; justify-content: flex-end; gap: 9px; color: #8793a5; font-size: 11px; }
.home-product-live-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #18b875; box-shadow: 0 0 0 4px rgba(24, 184, 117, .10); }
.home-product-live-dot::after { content: ''; position: absolute; inset: -4px; border: 1px solid rgba(24, 184, 117, .35); border-radius: 50%; animation: home-live-pulse 1.8s ease-out infinite; }
.home-product-refresh { padding: 0; color: #64748b; font-size: 11px; border: 0; background: transparent; cursor: pointer; }
.home-product-refresh:hover { color: #0758d9; }
@keyframes home-live-pulse { 0% { transform: scale(.65); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }

.home-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.home-product-card {
--product-accent: #0b63e6;
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 318px;
padding: 22px;
overflow: hidden;
background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
border: 1px solid #dce6f1;
border-radius: 16px;
box-shadow: 0 10px 28px rgba(23, 48, 80, .055);
transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.home-product-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--product-accent), rgba(255,255,255,0)); opacity: .75; }
.home-product-card::after { content: ''; position: absolute; top: -64px; right: -54px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--product-accent) 12%, transparent), transparent 68%); pointer-events: none; }
.home-product-card:hover { z-index: 1; transform: translateY(-5px); border-color: #b9d3f3; box-shadow: 0 22px 44px rgba(23, 55, 95, .115); }
.home-product-card.is-sold-out { filter: grayscale(.25); opacity: .72; }
.home-product-card[data-accent="cyan"] { --product-accent: #0899b9; }
.home-product-card[data-accent="violet"] { --product-accent: #6657d9; }
.home-product-card[data-accent="indigo"] { --product-accent: #3158bd; }

.home-product-card-head { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.home-product-region { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; color: #7a8799; font-size: 11px; font-weight: 650; letter-spacing: .035em; }
.home-product-region::before { content: ''; width: 6px; height: 6px; border: 2px solid var(--product-accent); border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--product-accent) 12%, transparent); }
.home-product-card h3 { margin: 0; color: #172033; font-size: 19px; line-height: 1.35; font-weight: 730; }
.home-product-badge { flex-shrink: 0; display: inline-flex; align-items: center; height: 25px; padding: 0 9px; color: var(--product-accent); font-size: 11px; font-weight: 700; border: 1px solid color-mix(in srgb, var(--product-accent) 28%, white); background: color-mix(in srgb, var(--product-accent) 7%, white); }
.home-product-desc { position: relative; z-index: 1; min-height: 42px; margin: 10px 0 16px; color: #778397; font-size: 12px; line-height: 1.7; }

.home-product-specs { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; padding: 12px 0; border-top: 1px solid #e9eef5; border-bottom: 1px solid #e9eef5; }
.home-product-spec { min-width: 0; padding: 0 10px; border-right: 1px solid #e9eef5; }
.home-product-spec:first-child { padding-left: 0; }
.home-product-spec:last-child { padding-right: 0; border-right: 0; }
.home-product-spec span { display: block; margin-bottom: 5px; color: #97a2b2; font-size: 10px; white-space: nowrap; }
.home-product-spec strong { display: block; overflow: hidden; color: #334155; font-size: 12px; line-height: 1.3; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.home-product-card-foot { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: auto; }
.home-product-price-label { display: block; margin-bottom: 4px; color: #98a3b3; font-size: 10px; }
.home-product-price { display: flex; align-items: baseline; color: #0758d9; line-height: 1; font-weight: 800; }
.home-product-price b { font-size: 15px; font-weight: 750; }
.home-product-price strong { margin: 0 2px; font-size: 27px; letter-spacing: -.035em; }
.home-product-price span { color: #748196; font-size: 11px; font-weight: 600; }
.home-product-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 98px; height: 38px; padding: 0 14px; color: #fff !important; font-size: 12px; font-weight: 700; background: #0b63e6; border: 1px solid #0b63e6; box-shadow: 0 8px 18px rgba(11, 99, 230, .18); transition: background-color .2s ease, transform .2s ease; }
.home-product-action:hover { color: #fff !important; background: #064db9; transform: translateX(2px); }
.home-product-action.is-disabled { color: #98a2b3 !important; border-color: #e4e7ec; background: #f2f4f7; box-shadow: none; cursor: not-allowed; }
.home-product-action.is-disabled:hover { background: #f2f4f7; transform: none; }
.home-product-more { display: flex; align-items: center; justify-content: center; gap: 9px; width: fit-content; margin: 30px auto 0; color: #4e5969; font-size: 13px; font-weight: 700; }
.home-product-more i { color: #0b63e6; transition: transform .2s ease; }
.home-product-more:hover { color: #0758d9; }
.home-product-more:hover i { transform: translateX(4px); }

.home-product-state { grid-column: 1 / -1; display: flex; min-height: 280px; align-items: center; justify-content: center; padding: 36px; color: #667085; text-align: center; background: #f8fbff; border: 1px dashed #cfddeb; border-radius: 16px; }
.home-product-state i { display: block; margin-bottom: 12px; color: #0b63e6; font-size: 28px; }
.home-product-state strong { display: block; margin-bottom: 6px; color: #253046; font-size: 16px; }
.home-product-state button { display: inline-flex; height: 34px; margin-top: 14px; padding: 0 14px; align-items: center; color: #fff; font-size: 12px; font-weight: 700; border: 0; background: #0b63e6; cursor: pointer; }
.home-product-skeleton { pointer-events: none; }
.home-product-skeleton .skeleton-line { position: relative; height: 12px; overflow: hidden; background: #edf2f7; border-radius: 8px; }
.home-product-skeleton .skeleton-line::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); animation: home-skeleton 1.35s infinite; }
.home-product-skeleton .skeleton-line.is-title { width: 62%; height: 19px; margin: 26px 0 14px; }
.home-product-skeleton .skeleton-line.is-desc { width: 88%; }
.home-product-skeleton .skeleton-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 34px 0 32px; }
.home-product-skeleton .skeleton-specs .skeleton-line { height: 35px; }
.home-product-skeleton .skeleton-line.is-price { width: 42%; height: 28px; margin-top: auto; }
@keyframes home-skeleton { 100% { transform: translateX(100%); } }

.s4-serverIntroduction .s4-productAdvantages .s4-defaultWidth .s4-currentSection .s4-circleDiagram .s4-aroundTheIcon,
.s4-serverIntroduction .s4-productAdvantages .s4-defaultWidth .s4-mobileCarouselImage .swiper .swiper-wrapper .swiper-slide {
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.s4-serverIntroduction .s4-productAdvantages .s4-defaultWidth .s4-currentSection .s4-circleDiagram .s4-aroundTheIcon .s4-textDescription {
border-radius: 16px;
border: 1px solid #e2e8f0;
background: rgba(255, 255, 255, 0.92) !important;
backdrop-filter: blur(12px);
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

/* IDC 基础能力与环境生态 */
.idc-foundation-section { position: relative; padding: 88px 0; overflow: hidden; background: #fff; }
.idc-foundation-section::before { content: ''; position: absolute; top: -220px; right: -180px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(18, 103, 225, .08), transparent 68%); }
.idc-shell { position: relative; z-index: 1; width: min(1360px, calc(100vw - 32px)); margin: 0 auto; }
.idc-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 44px; margin-bottom: 36px; }
.idc-section-heading-main { max-width: 720px; }
.idc-section-heading h2 { margin: 13px 0 0; color: #101828; font-size: 34px; line-height: 1.24; font-weight: 760; letter-spacing: -.035em; }
.idc-section-heading > p { max-width: 520px; margin: 0; color: #6f7c8f; font-size: 14px; line-height: 1.85; }
.idc-foundation-layout { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(0, 2fr); gap: 18px; }
.idc-foundation-feature { position: relative; min-height: 440px; padding: 30px; overflow: hidden; color: #fff; background: linear-gradient(145deg, #071d42 0%, #0b4aa5 58%, #1176d8 100%); border: 1px solid rgba(77, 159, 255, .32); border-radius: 16px; box-shadow: 0 24px 54px rgba(6, 44, 96, .20); }
.idc-foundation-feature::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 82% 18%, rgba(91, 200, 255, .28), transparent 30%), linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: auto, 26px 26px, 26px 26px; }
.idc-feature-content { position: relative; z-index: 1; display: flex; height: 100%; flex-direction: column; }
.idc-feature-label { display: inline-flex; width: fit-content; align-items: center; gap: 8px; padding: 7px 10px; color: #cde7ff; font-size: 11px; font-weight: 700; border: 1px solid rgba(193, 227, 255, .24); background: rgba(255,255,255,.08); }
.idc-feature-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #50d6ff; box-shadow: 0 0 12px #50d6ff; }
.idc-foundation-feature h3 { max-width: 320px; margin: 22px 0 12px; color: #fff; font-size: 28px; line-height: 1.3; font-weight: 740; letter-spacing: -.025em; }
.idc-foundation-feature p { max-width: 360px; margin: 0; color: rgba(226, 239, 255, .76); font-size: 13px; line-height: 1.8; }
.idc-feature-network { position: relative; height: 138px; margin: 24px 0 18px; }
.idc-feature-network svg { width: 100%; height: 100%; overflow: visible; }
.idc-feature-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: auto; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.16); }
.idc-feature-stat { padding: 14px 10px; text-align: center; background: rgba(3, 29, 70, .34); }
.idc-feature-stat strong { display: block; margin-bottom: 4px; color: #fff; font-size: 17px; }
.idc-feature-stat span { display: block; color: rgba(220, 237, 255, .62); font-size: 10px; }
.idc-capability-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.idc-capability-card { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-content: start; gap: 15px; min-height: 137px; padding: 21px; background: linear-gradient(180deg, #fff 0%, #fbfdff 100%); border: 1px solid #dce6f1; border-radius: 16px; box-shadow: 0 10px 28px rgba(23, 48, 80, .05); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.idc-capability-card:hover { transform: translateY(-4px); border-color: #b9d3f3; box-shadow: 0 20px 38px rgba(23, 55, 95, .10); }
.idc-capability-icon { display: grid; width: 48px; height: 48px; place-items: center; color: #0b63e6; font-size: 18px; background: linear-gradient(145deg, #f7fbff, #eaf3ff); border: 1px solid #d5e6fb; border-radius: 12px; }
.idc-capability-card h3 { margin: 1px 0 7px; color: #172033; font-size: 17px; line-height: 1.35; font-weight: 720; }
.idc-capability-card p { margin: 0; color: #738095; font-size: 12px; line-height: 1.7; }
.idc-capability-tag { grid-column: 2; display: inline-flex; width: fit-content; margin-top: 2px; color: #0b63e6; font-size: 10px; font-weight: 700; }

.environment-section { position: relative; padding: 82px 0; overflow: hidden; background: linear-gradient(180deg, #f3f7fc 0%, #edf4fb 100%); }
.environment-shell { width: min(1360px, calc(100vw - 32px)); margin: 0 auto; }
.environment-layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.8fr); gap: 18px; }
.environment-intro { position: relative; padding: 30px; overflow: hidden; color: #fff; background: #10233f; border-radius: 16px; }
.environment-intro::after { content: '</>'; position: absolute; right: -12px; bottom: -28px; color: rgba(255,255,255,.045); font-family: monospace; font-size: 140px; font-weight: 800; }
.environment-intro .home-section-kicker { color: #73c8ff; }
.environment-intro h2 { position: relative; z-index: 1; margin: 18px 0 13px; color: #fff; font-size: 31px; line-height: 1.25; font-weight: 740; letter-spacing: -.03em; }
.environment-intro p { position: relative; z-index: 1; margin: 0; color: rgba(226, 237, 250, .72); font-size: 13px; line-height: 1.8; }
.environment-service-note { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin-top: 28px; padding-top: 20px; color: #cde4ff; font-size: 11px; border-top: 1px solid rgba(255,255,255,.12); }
.environment-service-note i { color: #57c7ff; }
.environment-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.environment-group { padding: 24px 20px 20px; background: rgba(255,255,255,.92); border: 1px solid #dce6f1; border-radius: 16px; box-shadow: 0 12px 30px rgba(24, 49, 82, .055); }
.environment-group-head { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #e7edf5; }
.environment-group-head i { display: grid; width: 34px; height: 34px; place-items: center; color: #0b63e6; background: #edf5ff; border-radius: 8px; }
.environment-group-head strong { display: block; color: #1d2939; font-size: 15px; }
.environment-group-head span { display: block; margin-top: 3px; color: #98a2b3; font-size: 10px; }
.environment-items { display: grid; gap: 9px; }
.environment-item { display: flex; min-height: 42px; align-items: center; gap: 11px; padding: 8px 10px; color: #475467; font-size: 12px; font-weight: 650; background: #f7f9fc; border: 1px solid #edf1f6; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.environment-item:hover { color: #0758d9; border-color: #c7dbf4; background: #f2f7ff; }
.environment-item i,
.environment-item b { display: grid; width: 24px; height: 24px; place-items: center; color: #0b63e6; font-size: 14px; font-weight: 800; background: #fff; border: 1px solid #e0e8f2; border-radius: 8px; }

/* 全球节点地图 */
.deployment-map-section { position: relative; padding: 88px 0; overflow: hidden; color: #fff; background: radial-gradient(800px 360px at 50% 0%, rgba(14, 105, 229, .28), transparent 70%), linear-gradient(180deg, #071425 0%, #0a1d35 100%); }
.deployment-map-section::before { content: ''; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(100, 160, 225, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(100, 160, 225, .16) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); }
.deployment-shell { position: relative; z-index: 1; width: min(1360px, calc(100vw - 32px)); margin: 0 auto; }
.deployment-heading { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.deployment-heading .home-section-kicker { color: #62bdff; justify-content: center; }
.deployment-heading h2 { margin: 14px 0 12px; color: #fff; font-size: 35px; line-height: 1.25; font-weight: 750; letter-spacing: -.035em; }
.deployment-heading p { margin: 0; color: rgba(210, 228, 248, .68); font-size: 14px; line-height: 1.8; }
.deployment-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(390px, .85fr); gap: 18px; }
.deployment-map-panel { position: relative; min-height: 480px; overflow: hidden; background: linear-gradient(180deg, rgba(9, 34, 67, .84), rgba(5, 24, 48, .88)); border: 1px solid rgba(113, 172, 235, .18); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 28px 58px rgba(0,0,0,.22); }
.deployment-map-panel::after { content: ''; position: absolute; inset: auto 8% 8% 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(84, 175, 255, .24), transparent); }
.deployment-world { position: absolute; inset: 7% 4% 5%; width: 92%; height: 88%; }
.deployment-world path { fill: rgba(44, 102, 160, .22); stroke: rgba(93, 164, 230, .34); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.deployment-world .map-grid { fill: none; stroke: rgba(101, 161, 220, .12); stroke-width: 1; stroke-dasharray: 3 7; }
.deployment-node { --node-color: #48c8ff; position: absolute; left: var(--x); top: var(--y); z-index: 3; width: 14px; height: 14px; padding: 0; transform: translate(-50%, -50%); border: 3px solid #dff7ff; border-radius: 50%; background: var(--node-color); box-shadow: 0 0 0 5px rgba(72, 200, 255, .13), 0 0 24px var(--node-color); cursor: default; }
.deployment-node::before { content: ''; position: absolute; inset: -10px; border: 1px solid rgba(100, 210, 255, .45); border-radius: 50%; animation: deployment-pulse 2.2s ease-out infinite; }
.deployment-node.is-domestic { --node-color: #6e8dff; }
.deployment-node.is-city { width: 10px; height: 10px; border-width: 2px; box-shadow: 0 0 0 4px rgba(110, 141, 255, .12), 0 0 18px var(--node-color); }
.deployment-node.is-city::before { inset: -8px; }
.deployment-node.is-unavailable { display: none; }
.deployment-node-label { position: absolute; left: 50%; bottom: 19px; width: max-content; max-width: 120px; padding: 6px 8px; transform: translateX(-50%); color: #dff3ff; font-size: 10px; font-weight: 700; white-space: nowrap; background: rgba(4, 24, 48, .88); border: 1px solid rgba(104, 182, 244, .28); border-radius: 8px; opacity: .85; }
.deployment-node:nth-of-type(even) .deployment-node-label { bottom: auto; top: 19px; }
.deployment-node.is-city .deployment-node-label { top: auto; bottom: 16px; padding: 4px 6px; transform: translate(-50%, 4px); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.deployment-node.is-city:hover .deployment-node-label,
.deployment-node.is-city:focus-visible .deployment-node-label { z-index: 8; transform: translate(-50%, 0); opacity: 1; }
@keyframes deployment-pulse { 0% { transform: scale(.45); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.deployment-side { display: flex; flex-direction: column; padding: 27px; background: rgba(8, 31, 61, .78); border: 1px solid rgba(113, 172, 235, .18); border-radius: 16px; backdrop-filter: blur(10px); }
.deployment-side-label { color: #58c9ff; font-size: 11px; font-weight: 750; letter-spacing: .1em; }
.deployment-side h3 { margin: 12px 0 9px; color: #fff; font-size: 22px; line-height: 1.35; font-weight: 720; }
.deployment-side > p { margin: 0; color: rgba(207, 226, 247, .65); font-size: 12px; line-height: 1.75; }
.deployment-region-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 24px 0; }
.deployment-region { display: flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 9px; color: #cfe6ff; font-size: 11px; background: rgba(255,255,255,.045); border: 1px solid rgba(111, 174, 235, .14); }
.deployment-region::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #4bc8ff; box-shadow: 0 0 8px #4bc8ff; }
.deployment-region.is-unavailable { display: none; }
.deployment-live-summary { margin-top: auto; padding: 14px 0; color: #94bce3; font-size: 11px; border-top: 1px solid rgba(117, 173, 227, .14); }
.deployment-live-summary strong { color: #fff; }
.deployment-map-action { display: inline-flex; height: 42px; align-items: center; justify-content: center; gap: 9px; margin-top: 14px; color: #fff !important; font-size: 12px; font-weight: 700; background: #0b63e6; border: 1px solid #2e87f1; box-shadow: 0 10px 24px rgba(11, 99, 230, .24); }
.deployment-map-action:hover { color: #fff !important; background: #1272ed; }

#section-solutions,
#section-idc,
section.py-14.bg-gray-50,
section.py-16.bg-gradient-to-b {
position: relative;
}

#section-idc .group,
section.py-14.bg-gray-50 .w-16.h-16,
.wholeSwiper .swiper-slide {
border: 1px solid #e5edf8;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

#section-idc .group {
border-radius: 16px;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease, color .25s ease;
}

#section-idc .group:hover {
transform: translateY(-4px);
background: linear-gradient(135deg, #0052d9 0%, #003a9f 100%) !important;
border-color: rgba(0, 82, 217, 0.88);
box-shadow: 0 24px 48px rgba(0, 82, 217, 0.24);
}

#section-idc h3 {
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
color: #94a3b8;
}

#section-idc h4 {
font-size: 18px;
color: #0f172a;
}

#section-idc .group:hover h3 {
color: rgba(255, 255, 255, 0.72);
}

#section-idc .group:hover h4 {
color: #ffffff;
}

#section-idc .group:hover p,
#section-idc .group:hover i {
color: rgba(255, 255, 255, 0.86) !important;
}

#section-idc .group:hover h3,
#section-idc .group:hover h4 {
color: #ffffff !important;
}

#section-idc .group:hover > div {
background: rgba(255, 255, 255, 0.16) !important;
}

#section-solutions .s1-solution {
background:
radial-gradient(900px 420px at 50% 0%, rgba(29, 78, 216, 0.34), transparent 70%),
linear-gradient(180deg, #0f172a 0%, #111827 100%);
}

#section-solutions .s1-title-Description span,
#section-solutions .s1-title-Description p,
#section-solutions .s1-slideCurrent,
#section-solutions .s1-slideCurrent .s1-itemSolve,
#section-solutions .s1-rotateItem .s1-titleBaseda,
#section-solutions .s1-rotateItem p,
#section-solutions .s1-rotateItem .s1-tagCollectionLocation span {
color: #ffffff !important;
}

#section-solutions .s1-title-Description p,
#section-solutions .s1-rotateItem p {
color: rgba(255, 255, 255, 0.78) !important;
}

#section-solutions .s1-title-Description span {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.18);
}

#section-solutions .s1-rotateItem {
background-color: #111827 !important;
}

#section-solutions .s1-rotateItem::after {
background: linear-gradient(180deg, rgba(15, 23, 42, 0.72) 0%, rgba(15, 23, 42, 0.18) 100%) !important;
}

#section-idc a:hover,
#product-menu a:hover,
nav a:hover {
color: #0b63e6;
}

.hero-cta-primary,
.hero-cta-primary:hover,
nav a[href="/user/register.php"],
nav a[href="/user/register.php"]:hover,
#mobile-menu a[href="/user/login.php"],
#mobile-menu a[href="/user/login.php"]:hover,
#mobile-menu a[href="/user/register.php"],
#mobile-menu a[href="/user/register.php"]:hover {
color: #ffffff !important;
}

section.py-14.bg-gray-50 .w-16.h-16,
section.py-14.bg-gray-50 .md\:w-20 {
border-radius: 16px;
}

.s1-bottom .s1-bottomNav {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	width: min(1360px, calc(100vw - 32px));
	margin: 0 auto;
	padding: 24px 0;
}

.s1-bottom .s1-bottomNav .s1-item {
display: flex;
	flex-direction: row;
align-items: center;
gap: 14px;
min-height: 86px;
padding: 18px 20px;
background: #fff;
border: 1px solid #e2ebf5;
box-shadow: 0 10px 26px rgba(20, 48, 84, .05);
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.s1-bottom .s1-bottomNav .s1-item:hover {
transform: translateY(-3px);
border-color: #bcd4f3;
box-shadow: 0 18px 36px rgba(20, 48, 84, .10);
}

.s1-bottom .s1-bottomNav .s1-item-icon {
display: grid;
flex: 0 0 auto;
width: 44px;
height: 44px;
place-items: center;
color: #0b63e6;
font-size: 17px;
background: #eff6ff;
border: 1px solid #d8e7fb;
border-radius: 12px;
}

.s1-bottom .s1-bottomNav .s1-description { min-width: 0; }
.s1-bottom .s1-bottomNav .s1-description span { color: #172033; font-size: 15px; font-weight: 750; }
.s1-bottom .s1-bottomNav .s1-description p { margin-top: 4px; color: #7b8798; font-size: 11px; line-height: 1.45; }

.s1-bottom .s1-defaultWidth .s1-content {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 2.8fr);
gap: 54px;
align-items: start;
}

.s1-bottom .s1-defaultWidth .s1-content .s1-right { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; align-items: start; }
.s1-bottom .s1-defaultWidth .s1-content .s1-right ul { min-width: 0; gap: 0; }
.s1-bottom .s1-defaultWidth .s1-content .s1-right ul .s1-specialCase { margin-bottom: 14px; color: #111827; font-size: 14px; font-weight: 750; }
.s1-bottom .s1-defaultWidth .s1-content .s1-right ul li:not(.s1-specialCase) { margin-top: 10px; }
.s1-bottom .s1-defaultWidth .s1-content .s1-right ul li:not(.s1-specialCase) a { color: #6b7789; font-size: 12px; transition: color .2s ease; }
.s1-bottom .s1-defaultWidth .s1-content .s1-right ul li:not(.s1-specialCase) a:hover { color: #0b63e6; }

.fixed.right-4.bottom-4 .bg-white {
padding: 6px;
width: 48px;
border-radius: 16px;
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
backdrop-filter: blur(12px);
background: rgba(255, 255, 255, 0.9);
}

.fixed.right-4.bottom-4 .bg-white a {
width: 36px;
height: 36px;
border-radius: 12px;
}

@media (max-width: 1100px) {
.home-quick-services { margin-top: -34px; }
.home-quick-services-shell { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s1-bottom .s1-defaultWidth .s1-content { grid-template-columns: 1fr; gap: 34px; }
.s1-bottom .s1-defaultWidth .s1-content .s1-right { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-product-heading { align-items: flex-start; flex-direction: column; gap: 20px; }
.home-product-title-group { flex-basis: auto; max-width: 720px; }
.home-product-nav-wrap { width: 100%; align-items: flex-start; }
.home-product-links { justify-content: flex-start; }
.idc-section-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
.idc-foundation-layout { grid-template-columns: 1fr; }
.idc-foundation-feature { min-height: 390px; }
.idc-capability-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.idc-capability-card { grid-template-columns: 42px minmax(0, 1fr); min-height: 155px; padding: 18px; }
.idc-capability-icon { width: 42px; height: 42px; }
.environment-layout { grid-template-columns: 1fr; }
.deployment-layout { grid-template-columns: 1fr; }
.deployment-side { min-height: 310px; }
.deployment-region-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
.home-topbar { display: none; }
.home-nav-actions { display: none; }
.s1-bottom .s1-bottomNav .s1-item .s1-description p { display: block; }
.s1-bottom .s1-bottomNav .s1-item { flex-direction: row; gap: 12px; }
.s1-bottom .s1-bottomNav .s1-item:nth-of-type(n+4) { display: flex; }
.s1-bottom .s1-defaultWidth .s1-content .s1-right ul:nth-child(n+4) { display: block; }
.home-quick-services { margin-top: -24px; padding: 0; }
.home-quick-services-shell { width: min(100% - 24px, 1360px); gap: 8px; }
.home-quick-service { min-height: 64px; padding: 10px 12px; gap: 10px; }
.home-quick-icon { width: 36px; height: 36px; font-size: 15px; }
.home-quick-copy strong { margin-bottom: 3px; font-size: 13px; }
.home-quick-copy span { font-size: 10px; }
.s1-bottom .s1-bottomNav { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100% - 24px, 1360px); padding: 16px 0; }
.s1-bottom .s1-bottomNav .s1-item { min-height: 76px; padding: 15px 16px; }
.s1-bottom .s1-bottomNav .s1-item:nth-of-type(n+4) { display: flex; }
.s1-bottom .s1-defaultWidth .s1-content .s1-right { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.s1-bottom .s1-defaultWidth .s1-content .s1-right ul:nth-child(n+4) { display: none; }
.s1-bottom .s1-defaultWidth .s1-content .s1-right ul { gap: 4px; }
.feature-shell,
.home-product-shell { width: min(100% - 24px, 1360px); }
.feature-heading { margin-bottom: 26px; }
.feature-heading h2,
.home-product-title-group h2 { margin-top: 11px; font-size: 26px; letter-spacing: -.025em; }
.feature-heading p { font-size: 13px; line-height: 1.7; }
.feature-grid { grid-template-columns: 1fr; gap: 12px; }
.feature-card {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
grid-template-areas: "head head" "art copy";
column-gap: 15px;
min-height: 0;
padding: 15px;
border-radius: 12px;
}
.feature-card-head { grid-area: head; margin-bottom: 12px; }
.feature-illustration { grid-area: art; width: 96px; height: 96px; margin: 0; }
.feature-illustration::before { width: 76px; height: 76px; }
.feature-illustration::after { width: 58px; height: 58px; }
.feature-icon {
width: 68px;
height: 68px;
}
.feature-card-badge { font-size: 11px; }
.feature-card-copy { grid-area: copy; }
.feature-card-title {
font-size: 17px;
margin-bottom: 6px;
}
.feature-card-desc {
font-size: 12px;
line-height: 1.65;
}
.feature-card-meta { margin-top: 10px; padding-top: 10px; }
.home-product-section { padding: 58px 0 62px; }
.home-product-heading { gap: 16px; margin-bottom: 22px; }
.home-product-title-group p { font-size: 12px; }
.home-product-nav-wrap { width: 100%; align-items: flex-start; }
.home-product-links { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.home-product-links::-webkit-scrollbar { display: none; }
.home-product-links button { flex: 0 0 auto; }
.home-product-grid {
display: flex;
grid-template-columns: none;
gap: 12px;
overflow-x: auto;
padding: 0 2px 10px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.home-product-grid::-webkit-scrollbar { display: none; }
.home-product-card { flex: 0 0 86%; min-height: 0; padding: 18px; border-radius: 12px; scroll-snap-align: start; }
.home-product-card h3 { font-size: 17px; }
.home-product-desc { min-height: 0; margin: 8px 0 14px; }
.home-product-spec { padding: 0 7px; }
.home-product-price strong { font-size: 24px; }
.home-product-action { min-width: 92px; }
.home-product-more { margin-top: 24px; }
.idc-foundation-section,
.environment-section,
.deployment-map-section { padding: 58px 0; }
.idc-shell,
.environment-shell,
.deployment-shell { width: min(100% - 24px, 1360px); }
.idc-section-heading { margin-bottom: 24px; }
.idc-section-heading h2,
.environment-intro h2,
.deployment-heading h2 { font-size: 26px; letter-spacing: -.025em; }
.idc-section-heading > p { font-size: 12px; line-height: 1.75; }
.idc-foundation-feature { min-height: 400px; padding: 22px; border-radius: 16px; }
.idc-foundation-feature h3 { font-size: 24px; }
.idc-feature-network { height: 120px; }
.idc-feature-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.idc-feature-stat { padding: 12px 5px; }
.idc-feature-stat strong { font-size: 14px; }
.idc-capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.idc-capability-card { grid-template-columns: 42px minmax(0, 1fr); min-height: 0; padding: 16px; border-radius: 12px; }
.idc-capability-card:nth-child(n+5) { display: none; }
.idc-capability-card h3 { font-size: 16px; }
.idc-capability-card p { display: none; }
.idc-capability-tag { grid-column: 2; margin-top: 6px; }
.environment-intro { padding: 24px; border-radius: 16px; }
.environment-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.environment-group:nth-child(n+3) { display: none; }
.environment-group { padding: 20px 16px 16px; border-radius: 12px; }
.environment-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.environment-item { padding: 7px 8px; }
.deployment-heading { margin-bottom: 24px; }
.deployment-heading p { font-size: 12px; }
.deployment-map-panel { min-height: 260px; border-radius: 16px; }
.deployment-node { width: 12px; height: 12px; border-width: 2px; }
.deployment-node-label { padding: 4px 6px; font-size: 8px; }
.deployment-side { min-height: 0; padding: 20px; border-radius: 16px; }
.deployment-region-list { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0; }
.deployment-region:nth-child(n+7) { display: none; }
.carousel-container {
height: 480px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.site-shell {
width: min(var(--home-shell-width, min(1360px, calc(100vw - 32px))), calc(100vw - 24px));
}
.carousel-item::before {
background:
linear-gradient(180deg, rgba(243, 247, 252, 0.88) 0%, rgba(243, 247, 252, 0.70) 48%, rgba(243, 247, 252, 0.28) 100%),
linear-gradient(180deg, rgba(15, 23, 42, 0.02) 0%, rgba(15, 23, 42, 0.18) 100%);
}
.carousel-item::after {
width: 100%;
background: radial-gradient(420px 220px at 50% 12%, rgba(0, 82, 217, 0.12), transparent 74%);
}
.hero-content {
max-width: none;
}
.hero-tag {
padding: 7px 12px;
font-size: 12px;
}
.hero-title {
font-size: 30px;
line-height: 1.1;
}
.hero-desc {
font-size: 14px;
line-height: 1.75;
margin-bottom: 20px;
}
.hero-actions {
gap: 10px;
}
.hero-cta-primary,
.hero-cta-secondary {
height: 44px;
padding: 0 18px;
font-size: 13px;
}
.hero-notes {
gap: 8px;
margin-top: 14px;
}
.hero-note {
font-size: 12px;
padding: 7px 10px;
}
#product-menu {
display: none !important;
}
.s4-title-Description,
.s1-title-Description {
margin-bottom: 26px;
}
.s4-title-Description p,
.s1-title-Description p {
font-size: 14px;
line-height: 1.75;
}
.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-handheldFan .s4-itemClickOnTheHandheldButton .s4-clickerContent .s4-itemSever .s4-labelDescription {
margin: 0 18px;
padding: 20px 0 16px;
}
.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-handheldFan .s4-itemClickOnTheHandheldButton .s4-clickerContent .s4-itemSever .s4-labelDescription span {
font-size: 19px;
line-height: 1.4;
}
.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-handheldFan .s4-itemClickOnTheHandheldButton .s4-clickerContent .s4-itemSever .s4-labelDescription p {
font-size: 14px;
line-height: 1.85;
}
.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-handheldFan .s4-itemClickOnTheHandheldButton .s4-clickerContent .s4-itemSever .s4-specifications {
padding: 14px 18px 0;
font-size: 14px;
line-height: 1.9;
}
.s4-serverIntroduction .s4-selected .s4-defaultWidth .s4-handheldFan .s4-itemClickOnTheHandheldButton .s4-clickerContent .s4-itemSever .s4-specifications .describingRules {
gap: 14px;
padding: 9px 0;
}
}

/* ===== 第 3 部分：科技感增强（原 tech-light.css，含手机端居中/深色区亮色化/按钮方角化/IDC 细化） ===== */

@charset "UTF-8";
/* ============================================================
   首页科技感亮色增强层（原 tech-light）
   原则：仅叠加视觉细节（底纹 / 玻璃 / 光晕 / 渐变 / 微动效），
   不改变任何布局结构与交互逻辑，始终保持亮色主题。
   本文件需在 index.html 所有样式之后引入。
   ============================================================ */

/* ---------- 1. 全局亮色科技底纹：细网格 + 双光斑 ---------- */
body {
    background:
        radial-gradient(1100px 460px at 86% -140px, rgba(0, 82, 217, 0.07), transparent 70%),
        radial-gradient(900px 430px at -8% 14%, rgba(72, 211, 255, 0.09), transparent 72%),
        linear-gradient(rgba(15, 42, 92, 0.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 42, 92, 0.026) 1px, transparent 1px),
        linear-gradient(180deg, #f5f8fc 0%, #f2f6fb 100%);
    background-size: auto, auto, 34px 34px, 34px 34px, auto;
}

::selection {
    background: rgba(11, 99, 230, 0.16);
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid rgba(11, 99, 230, 0.45);
    outline-offset: 2px;
}

/* ---------- 2. 顶部导航：玻璃质感 + 科技渐变顶线 + 下划线动效 ---------- */
nav.bg-white\/80 {
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
}

nav.bg-white\/80::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(11, 99, 230, 0.5) 18%,
        rgba(72, 211, 255, 0.72) 50%,
        rgba(11, 99, 230, 0.5) 82%,
        transparent 100%);
    pointer-events: none;
}

nav .hidden.md\:flex.items-center.ml-6 > a,
nav .hidden.md\:flex.items-center.ml-6 > div > a {
    position: relative;
}

nav .hidden.md\:flex.items-center.ml-6 > a::after,
nav .hidden.md\:flex.items-center.ml-6 > div > a::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 3px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #0b63e6, #48d3ff);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.22s ease;
    pointer-events: none;
}

nav .hidden.md\:flex.items-center.ml-6 > a:hover::after,
nav .hidden.md\:flex.items-center.ml-6 > div > a:hover::after {
    transform: scaleX(1);
}

nav a[href="/user/register.php"] {
    background: linear-gradient(135deg, #0d6bff 0%, #0b55e8 60%, #0846cf 100%);
    box-shadow: 0 10px 24px rgba(11, 85, 232, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

nav a[href="/user/register.php"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(11, 85, 232, 0.36);
}

/* ---------- 3. 首屏 Hero：网格科技层 + 在线脉冲 + 渐变标题 + 扫光按钮 ---------- */
.carousel-container::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(rgba(11, 61, 145, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 61, 145, 0.055) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(105deg, #000 0%, rgba(0, 0, 0, 0.85) 30%, transparent 60%);
    mask-image: linear-gradient(105deg, #000 0%, rgba(0, 0, 0, 0.85) 30%, transparent 60%);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.hero-tag::before {
    content: '';
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00b42a;
    animation: tech-ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes tech-ping {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 180, 42, 0.42);
    }
    70% {
        box-shadow: 0 0 0 7px rgba(0, 180, 42, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 180, 42, 0);
    }
}

.hero-title {
    background: linear-gradient(118deg, #0b1b33 6%, #0a3f9e 56%, #0b63e6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-cta-primary {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0d5eff 0%, #0840da 62%, #0a50ee 100%);
    box-shadow: 0 14px 30px rgba(13, 94, 255, 0.32), 0 0 0 1px rgba(13, 94, 255, 0.16);
}

.hero-cta-primary::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -70%;
    width: 44%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.36), transparent);
    transform: skewX(-18deg);
    transition: left 0.55s ease;
    pointer-events: none;
}

.hero-cta-primary:hover::after {
    left: 130%;
}

.hero-note {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.hero-note:hover {
    border-color: rgba(11, 99, 230, 0.32);
    box-shadow: 0 12px 26px rgba(11, 99, 230, 0.12);
    transform: translateY(-1px);
}

/* ---------- 4. 产品快捷入口横条 ---------- */
.home-service-link {
    transition: background-color 0.22s ease, color 0.22s ease;
}

.home-service-link:hover {
    background: linear-gradient(90deg, #f3f9ff 0%, #ffffff 78%);
}

.home-service-cta {
    transition: color 0.22s ease, transform 0.22s ease;
}

/* ---------- 5. 核心能力卡片：角标 + 光晕 ---------- */
.feature-card::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 14px;
    height: 14px;
    border-top: 2px solid var(--feature-accent, #0b63e6);
    border-right: 2px solid var(--feature-accent, #0b63e6);
    border-top-right-radius: 6px;
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.feature-card:hover::after {
    opacity: 0.55;
    transform: translate(0, 0);
}

.feature-card:hover {
    box-shadow:
        0 26px 54px rgba(19, 54, 97, 0.13),
        0 16px 40px rgba(11, 99, 230, 0.09),
        inset 0 1px 0 #fff;
}

/* ---------- 6. 实时产品卡片：渐变价格 + 按钮扫光 ---------- */
.home-product-card:hover::before {
    opacity: 1;
}

.home-product-card:hover {
    box-shadow:
        0 22px 44px rgba(23, 55, 95, 0.115),
        0 14px 36px rgba(11, 99, 230, 0.08);
}

.home-product-price strong {
    background: linear-gradient(120deg, #0b63e6 10%, #0899b9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-variant-numeric: tabular-nums;
}

.home-product-price b,
.home-product-price span {
    font-variant-numeric: tabular-nums;
}

.home-product-links button.is-active {
    background: linear-gradient(135deg, #0d6bff 0%, #0846cf 100%);
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(11, 99, 230, 0.26);
}

.home-product-action {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0d6bff 0%, #0846cf 100%);
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(11, 99, 230, 0.22);
}

.home-product-action::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -70%;
    width: 44%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.32), transparent);
    transform: skewX(-18deg);
    transition: left 0.5s ease;
    pointer-events: none;
}

.home-product-action:hover::after {
    left: 130%;
}

.home-product-action.is-disabled::after {
    display: none;
}

/* ---------- 7. IDC 深色能力面板：扫描光效（保持原有深蓝点缀） ---------- */
.idc-foundation-feature {
    overflow: hidden;
}

.idc-foundation-feature::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -45%;
    height: 34%;
    background: linear-gradient(180deg, transparent, rgba(88, 196, 255, 0.09), transparent);
    animation: tech-scan 7.5s linear infinite;
    pointer-events: none;
}

@keyframes tech-scan {
    0% {
        top: -45%;
    }
    100% {
        top: 125%;
    }
}

.idc-capability-card:hover {
    box-shadow:
        0 20px 38px rgba(23, 55, 95, 0.10),
        0 10px 26px rgba(11, 99, 230, 0.07);
}

.idc-capability-tag {
    letter-spacing: 0.04em;
}

/* ---------- 8. 环境生态 / 全球节点微调 ---------- */
.environment-item {
    border-radius: 8px;
}

.environment-group {
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.environment-group:hover {
    transform: translateY(-3px);
    border-color: #c3daf5;
    box-shadow: 0 20px 42px rgba(24, 49, 82, 0.09);
}

/* ---------- 9. 页脚：科技渐变分割线 ---------- */
.s1-bottom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(11, 99, 230, 0.32) 26%,
        rgba(72, 211, 255, 0.5) 50%,
        rgba(11, 99, 230, 0.32) 74%,
        transparent 100%);
    pointer-events: none;
}

/* ---------- 10. 悬浮工具条 ---------- */
.fixed.right-4.bottom-4 .bg-white a {
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.fixed.right-4.bottom-4 .bg-white a:hover {
    transform: translateY(-2px);
}

/* ---------- 11. 滚动条 ---------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #edf3fa;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #b9d5f6 0%, #8dbdf2 100%);
    border-radius: 999px;
    border: 2px solid #edf3fa;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #82b5f0 0%, #5c9cec 100%);
}

/* ---------- 12. 动效弱化偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    .hero-tag::before,
    .idc-foundation-feature::after,
    .hero-cta-primary::after,
    .home-product-action::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- 13. 手机端：轮播文字居中 ---------- */
@media (max-width: 767px) {
    .carousel-item .hero-shell {
        justify-content: center;
    }

    .carousel-item .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center !important;
    }

    .carousel-item .hero-actions,
    .carousel-item .hero-notes {
        justify-content: center;
    }

    .carousel-item .hero-desc {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================================
   14. 深色区块亮色化（融合改造）
   参考：亮色基调 + 白色面板 + 宝蓝点缀；保留原有区块结构、
   内容与网格科技纹理，仅替换生硬的纯黑/深蓝底色。
   本段需覆盖 index.html 内联样式，故部分规则带 !important。
   ============================================================ */

/* ---------- 14.1 全球节点地图区：黑底 → 浅蓝渐变 + 白色地图面板 ---------- */
.deployment-map-section {
    color: #0f172a;
    background:
        radial-gradient(900px 420px at 50% -120px, rgba(14, 105, 229, 0.10), transparent 70%),
        linear-gradient(180deg, #f4f9fe 0%, #ecf3fb 100%);
}

.deployment-map-section::before {
    opacity: 0.5;
}

.deployment-heading .home-section-kicker {
    color: #0758d9;
}

.deployment-heading h2 {
    color: #101828;
}

.deployment-heading p {
    color: #64748b;
}

.deployment-map-panel {
    background:
        linear-gradient(rgba(11, 61, 145, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 61, 145, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
    background-size: 44px 44px, 44px 44px, auto;
    border: 1px solid #dce6f1;
    box-shadow: inset 0 1px 0 #fff, 0 24px 54px rgba(15, 42, 92, 0.08);
}

.deployment-map-panel::after {
    background: linear-gradient(90deg, transparent, rgba(11, 99, 230, 0.16), transparent);
}

/* 真实世界地图：等比居中绘制（节点由脚本按绘制区定位） */
.deployment-map-panel,
.deployment-world,
.deployment-node {
    /* 全局 transition: all 会让横竖屏切换时的节点坐标滞后于地图。 */
    transition: none;
}

.deployment-world {
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    user-select: none;
}

/* 节点：蓝色发光点保留，光圈适配浅底 */
.deployment-node {
    border-color: #fff;
    box-shadow: 0 0 0 4px rgba(11, 99, 230, 0.14), 0 0 16px rgba(11, 99, 230, 0.5);
}

.deployment-node.is-city {
    opacity: 0.78;
}

/* 节点标签：深底白字 → 白底深字 */
.deployment-node-label {
    color: #0f2c5c;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(11, 99, 230, 0.28);
    box-shadow: 0 8px 18px rgba(15, 42, 92, 0.14);
}

/* 右侧区域面板：深色玻璃 → 白色卡片 */
.deployment-side {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #dce6f1;
    box-shadow: 0 20px 44px rgba(15, 42, 92, 0.07);
}

.deployment-side-label {
    color: #0758d9;
}

.deployment-side h3 {
    color: #101828;
}

.deployment-side > p {
    color: #64748b;
}

.deployment-region {
    color: #334155;
    background: #f5f9ff;
    border: 1px solid #dce6f1;
}

.deployment-region::before {
    background: #0b63e6;
    box-shadow: none;
}

.deployment-live-summary {
    color: #64748b;
    border-top-color: #e7edf5;
}

.deployment-live-summary strong {
    color: #101828;
}

/* ---------- 14.2 IDC 能力面板：深蓝面板 → 白色科技渐变面板 ---------- */
.idc-foundation-feature {
    color: #16325c;
    background:
        radial-gradient(560px 300px at 86% -60px, rgba(72, 211, 255, 0.24), transparent 66%),
        radial-gradient(520px 320px at -10% 110%, rgba(22, 93, 255, 0.13), transparent 70%),
        linear-gradient(rgba(11, 61, 145, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 61, 145, 0.045) 1px, transparent 1px),
        linear-gradient(160deg, #ffffff 0%, #e9f3fe 100%);
    border: 1px solid #cfe2f8;
    box-shadow: 0 24px 54px rgba(11, 61, 145, 0.10);
}

.idc-foundation-feature::before {
    background:
        radial-gradient(circle at 82% 18%, rgba(11, 99, 230, 0.10), transparent 34%),
        linear-gradient(rgba(11, 61, 145, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 61, 145, 0.045) 1px, transparent 1px);
    background-size: auto, 26px 26px, 26px 26px;
}

.idc-feature-label {
    color: #0b63e6;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(22, 93, 255, 0.30);
}

.idc-feature-label::before {
    background: #0b63e6;
    box-shadow: 0 0 10px rgba(11, 99, 230, 0.7);
}

.idc-foundation-feature h3 {
    color: #0f2c5c;
}

.idc-foundation-feature p {
    color: #3d5a85;
}

.idc-feature-stats {
    background: rgba(22, 93, 255, 0.14);
    border: 1px solid rgba(22, 93, 255, 0.18);
}

.idc-feature-stat {
    background: rgba(255, 255, 255, 0.8);
}

.idc-feature-stat strong {
    color: #0f2c5c;
}

.idc-feature-stat span {
    color: #5a7396;
}

/* ---------- 14.3 环境生态面板：深黑蓝 → 白色科技渐变面板 ---------- */
.environment-intro {
    color: #16325c;
    background:
        radial-gradient(520px 280px at 88% -50px, rgba(72, 211, 255, 0.22), transparent 64%),
        linear-gradient(rgba(11, 61, 145, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 61, 145, 0.045) 1px, transparent 1px),
        linear-gradient(160deg, #ffffff 0%, #e9f3fe 100%);
    border: 1px solid #cfe2f8;
    box-shadow: 0 20px 44px rgba(11, 61, 145, 0.08);
}

.environment-intro::after {
    color: rgba(11, 99, 230, 0.06);
}

.environment-intro .home-section-kicker {
    color: #0758d9;
}

.environment-intro h2 {
    color: #0f2c5c;
}

.environment-intro p {
    color: #3d5a85;
}

.environment-service-note {
    color: #3d5a85;
    border-top-color: #d5e4f6;
}

.environment-service-note i {
    color: #0b63e6;
}

/* 说明：解决方案区（#section-solutions）的 3D 旋转轮播保持原深色照片全屏设计，不做改动。 */

/* ============================================================
   15. 关键按钮方角化（参考酷盾：小圆角矩形 + 宝蓝实心）
   覆盖范围：首屏"立即购买 / 登入账号"、顶部导航"登录 / 免费注册"。
   ============================================================ */

/* ---------- 首屏按钮：胶囊 → 方角 ---------- */
.hero-cta-primary,
.hero-cta-secondary {
    border-radius: 8px;
}

.hero-cta-primary {
    background: linear-gradient(180deg, #2270f5 0%, #0f5ce8 100%);
    box-shadow: 0 10px 22px rgba(15, 92, 232, 0.26);
}

.hero-cta-primary:hover {
    box-shadow: 0 14px 28px rgba(15, 92, 232, 0.32);
}

/* ---------- 顶部导航按钮：胶囊 → 方角 ---------- */
nav .hidden.md\:flex.items-center > a[href="/user/login.php"] {
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #d4dce8;
    color: #1f2d3d;
}

nav .hidden.md\:flex.items-center > a[href="/user/login.php"]:hover {
    border-color: #2270f5;
    color: #0f5ce8;
}

nav .hidden.md\:flex.items-center > a[href="/user/register.php"],
nav a[href="/user/register.php"] {
    border-radius: 8px;
    background: linear-gradient(180deg, #2270f5 0%, #0f5ce8 100%);
    box-shadow: 0 6px 16px rgba(15, 92, 232, 0.25);
}

nav a[href="/user/register.php"]:hover {
    background: linear-gradient(180deg, #2f7bf8 0%, #1a66f0 100%);
    box-shadow: 0 10px 22px rgba(15, 92, 232, 0.32);
}

/* ============================================================
   16. IDC 基础能力区细化美化
   ============================================================ */

/* 区块背景：叠加细网格纹理 */
.idc-foundation-section {
    background:
        linear-gradient(rgba(11, 61, 145, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 61, 145, 0.022) 1px, transparent 1px),
        #ffffff;
    background-size: 40px 40px, 40px 40px, auto;
}

/* 能力卡片：悬停顶部光线 + 图标点亮 */
.idc-capability-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, #0b63e6, transparent);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.idc-capability-card:hover::before {
    opacity: 0.65;
}

.idc-capability-card:hover .idc-capability-icon {
    background: linear-gradient(135deg, #2270f5 0%, #0f5ce8 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(15, 92, 232, 0.28);
}

.idc-capability-icon {
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

/* 左侧面板统计数字：渐变强调 */
.idc-feature-stat strong {
    background: linear-gradient(120deg, #0f2c5c 0%, #0b63e6 150%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-variant-numeric: tabular-nums;
}

/* 标签点缀：稳定防护等信息胶囊微调 */
.idc-capability-tag::before {
    content: '— ';
    opacity: 0.55;
}

/* 能力卡片标题：深蓝 → 宝蓝渐变高亮（快速自动交付 / 弹性规格选择 等） */
.idc-capability-card h3 {
    background: linear-gradient(115deg, #172033 0%, #14418f 55%, #0b63e6 115%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- 手机端轮播：底部三个胶囊收为一行分隔点小字 ---------- */
@media (max-width: 767px) {
.carousel-item .hero-notes {
gap: 0;
margin-top: 16px;
}
.carousel-item .hero-note {
padding: 0;
border: 0;
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none;
font-size: 11px;
color: #56637a;
}
.carousel-item .hero-note i {
font-size: 10px;
color: #0b63e6;
}
.carousel-item .hero-note + .hero-note {
margin-left: 11px;
}
.carousel-item .hero-note + .hero-note::before {
content: '·';
margin-right: 11px;
color: #0b63e6;
font-weight: 800;
}
}


/* ============================================================
   17. 首页首屏：横向自动轮播主视觉 + 四能力方块
   每屏沿用原轮播背景图，数秒自动横向切换；
   能力方块默认隐藏，首次滚动后自底部浮出并保持。
   ============================================================ */

.home-hero {
    --hero-gutter: clamp(20px, 4vw, 64px);
    --hero-max: 1360px;
    /* 顶部信息条 38px + 主导航 64px（768px 以下信息条隐藏） */
    --hero-chrome: 102px;
    position: relative;
    height: calc(100vh - var(--hero-chrome));
    min-height: 560px;
    max-height: 1020px;
    overflow: hidden;
    color: #0f172a;
    background: #e9f1fb;
}

.home-hero-stage {
    position: relative;
    height: 100%;
    overflow: hidden;
}

/* 横向轨道：4 屏并排，靠 transform 位移切换 */
.home-hero-slides {
    display: flex;
    height: 100%;
    will-change: transform;
    transition: transform .74s cubic-bezier(.22,.8,.28,1);
}

.home-hero-slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 100%;
    height: 100%;
    background-image: var(--hero-slide-image);
    background-size: cover;
    background-position: center;
}

.home-hero-slide-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(244, 248, 253, 0.95) 0%, rgba(244, 248, 253, 0.86) 30%, rgba(244, 248, 253, 0.5) 54%, rgba(244, 248, 253, 0.06) 100%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.02) 0%, rgba(15, 23, 42, 0.10) 100%);
}

.home-hero-slide-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    width: min(var(--hero-max), calc(100vw - var(--hero-gutter) * 2));
    margin: 0 auto;
    display: flex;
    align-items: center;
    /* 左右预留空间，避免正文被两侧切换箭头遮挡 */
    padding: clamp(28px, 4vh, 60px) clamp(64px, 6vw, 108px) clamp(130px, 17vh, 200px);
}

.home-hero-copy {
    max-width: 640px;
}

.home-hero-copy-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    color: #1352b8;
    font-size: 12.5px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(19, 82, 184, 0.14);
    box-shadow: 0 10px 24px rgba(19, 82, 184, 0.07);
}

.home-hero-copy-tag i {
    color: #12b76a;
    font-size: 7px;
}

.home-hero-title {
    margin: 18px 0 18px;
    color: #0d1c33;
    font-size: clamp(30px, 3.05vw, 46px);
    line-height: 1.22;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.home-hero-title em {
    display: block;
    font-style: normal;
    background: linear-gradient(102deg, #0b4bd0 0%, #1f7bff 58%, #45a6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.home-hero-desc {
    max-width: 545px;
    margin: 0 0 28px;
    color: #55677f;
    font-size: clamp(14px, 1.02vw, 15.5px);
    line-height: 1.95;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.home-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 140px;
    height: 48px;
    padding: 0 26px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

.home-hero-btn i { font-size: 12px; }

.home-hero-btn--primary {
    color: #fff;
    background: linear-gradient(180deg, #2a7bf6 0%, #0f5ce8 100%);
    box-shadow: 0 14px 30px rgba(15, 92, 232, 0.28);
}

.home-hero-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(15, 92, 232, 0.34);
}

.home-hero-btn--ghost {
    color: #25344c;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #d7e2f1;
}

.home-hero-btn--ghost:hover {
    color: #0f5ce8;
    border-color: #9dc2f4;
    transform: translateY(-2px);
}

.home-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.home-hero-points li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #56657d;
    font-size: 13px;
    font-weight: 500;
}

.home-hero-points i {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #fff;
    font-size: 8px;
    background: linear-gradient(180deg, #3d8bff 0%, #0f5ce8 100%);
}

/* ---------- 左右箭头 ---------- */
.home-hero-arrow {
    position: absolute;
    top: 50%;
    z-index: 6;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-top: -23px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    color: #33456a;
    font-size: 15px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.home-hero-arrow:hover {
    color: #0f5ce8;
    background: #fff;
    transform: scale(1.05);
}

.home-hero-arrow--prev { left: clamp(12px, 1.6vw, 28px); }
.home-hero-arrow--next { right: clamp(12px, 1.6vw, 28px); }

/* ---------- 分页点 ---------- */
.home-hero-pager {
    position: absolute;
    left: 50%;
    bottom: clamp(118px, 14vh, 150px);
    z-index: 6;
    display: flex;
    gap: 10px;
    transform: translateX(-50%);
}

.home-hero-dot {
    width: 30px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(19, 82, 184, 0.22);
    cursor: pointer;
    transition: width .25s ease, background .25s ease;
}

.home-hero-dot:hover {
    background: rgba(19, 82, 184, 0.38);
}

.home-hero-dot.is-active {
    width: 42px;
    background: linear-gradient(90deg, #2a7bf6 0%, #45a6ff 100%);
    box-shadow: 0 6px 14px rgba(15, 92, 232, 0.26);
}

/* ---------- 底部四能力方块：默认隐藏，滚动后自底部浮出并保持 ---------- */
.home-hero-blocks {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: transform .62s cubic-bezier(.22,.8,.28,1), opacity .42s ease, visibility .62s;
    pointer-events: none;
}

.home-hero.is-blocks-visible .home-hero-blocks {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.home-hero-blocks-inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    width: min(var(--hero-max), calc(100vw - var(--hero-gutter) * 2));
    margin: 0 auto;
    border: 1px solid #e2ecf9;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -18px 46px rgba(17, 56, 122, 0.14);
    overflow: hidden;
}

.home-hero-block {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 24px 26px;
    color: inherit;
    text-align: left;
    transition: background-color .22s ease;
}

.home-hero-block + .home-hero-block {
    border-left: 1px solid #edf3fb;
}

.home-hero-block:hover {
    background: linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%);
}

.home-hero-block-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(34, 112, 245, 0.10), rgba(34, 112, 245, 0.02) 62%, transparent 74%),
        #f6faff;
    border: 1px solid #e4eefb;
    box-shadow: inset 0 1px 0 #fff, 0 10px 22px rgba(17, 56, 122, 0.07);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.home-hero-block-icon .feature-icon {
    width: 44px;
    height: 44px;
}

.home-hero-block.is-billing .home-hero-block-icon { --feature-accent: #0798bd; }
.home-hero-block.is-deploy .home-hero-block-icon { --feature-accent: #6957d9; }
.home-hero-block.is-console .home-hero-block-icon { --feature-accent: #3154b9; }

.home-hero-block:hover .home-hero-block-icon {
    transform: translateY(-3px);
    border-color: #cfe0f6;
    box-shadow: inset 0 1px 0 #fff, 0 16px 30px rgba(17, 56, 122, 0.12);
}

.home-hero-block-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.home-hero-block-title {
    display: block;
    color: #101d33;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.home-hero-block-desc {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
    .home-hero-slides { transition: none; }
    .home-hero-blocks { transition: none; }
}

/* ---------- 首屏响应式 ---------- */
@media (max-width: 1180px) {
    .home-hero-copy { max-width: none; }
    /* 中档桌面仍需给两侧箭头留出安全间距 */
    .home-hero-slide-inner { padding-left: 78px; padding-right: 78px; }
}

@media (max-width: 991px) {
    .home-hero {
        height: auto;
        max-height: none;
        min-height: 0;
    }
    /* 窄屏同样使用横向轨道 + transform 切换，保证自动播放与滑动一致 */
    .home-hero-stage { height: auto; }
    .home-hero-slides { height: auto; }
    .home-hero-slide {
        height: auto;
        min-height: 320px;
    }
    .home-hero-slide-inner { padding: 44px 0 36px; }
    .home-hero-arrow { display: none; }
    .home-hero-pager {
        position: static;
        justify-content: center;
        margin: 0 0 18px;
        transform: none;
    }
    .home-hero-dot { background: rgba(19, 82, 184, 0.28); box-shadow: none; }
    .home-hero-dot.is-active { background: #1f6ff0; }
    /* 窄屏：能力方块随文档流展示 */
    .home-hero-blocks {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
    }
    .home-hero-blocks-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0 auto 30px;
        border-bottom: 1px solid #e2ecf9;
        border-radius: 14px;
        box-shadow: 0 12px 34px rgba(17, 56, 122, 0.08);
    }
    .home-hero-block:nth-child(3) { border-left: 0; }
    .home-hero-block:nth-child(n+3) { border-top: 1px solid #edf3fb; }
}

@media (max-width: 767px) {
    .home-hero { --hero-gutter: 14px; --hero-chrome: 64px; }
    .home-hero-title { font-size: clamp(25px, 7.2vw, 32px); }
    .home-hero-desc { font-size: 13.5px; }
    .home-hero-actions { gap: 10px; }
    .home-hero-btn { flex: 1 1 150px; min-width: 0; }
    .home-hero-points { gap: 8px 18px; }
    .home-hero-slide-scrim {
        background: linear-gradient(180deg, rgba(244, 248, 253, 0.94) 0%, rgba(244, 248, 253, 0.78) 60%, rgba(244, 248, 253, 0.7) 100%);
    }
    .home-hero-slide-inner { padding: 32px 0 28px; }
    .home-hero-slide { min-height: 300px; }
    .home-hero-block { padding: 16px 14px 18px; gap: 12px; }
    .home-hero-block-icon { width: 48px; height: 48px; }
    .home-hero-block-icon .feature-icon { width: 36px; height: 36px; }
    .home-hero-block-title { font-size: 14px; }
    .home-hero-block-desc { font-size: 12px; }
}

@media (max-width: 480px) {
    .home-hero-blocks-inner { grid-template-columns: minmax(0, 1fr); }
    .home-hero-block:nth-child(2) { border-left: 0; border-top: 1px solid #edf3fb; }
    .home-hero-block:nth-child(3) { border-left: 0; }
}

/* ============================================================
   18. 精选热门推荐：滚动推进（大字归位 + 产品自下而上）
   仅作用于 #home-hot-products，由 index.php 内的脚本驱动。
   ============================================================ */
#home-hot-products {
    /* 原 .home-product-section 的 overflow:hidden 会让 sticky 失效 */
    overflow: visible;
}
/* 为 sticky 提供行程：占位高度由脚本写入 --hp-scroll-budget */
#home-hot-products.home-product-section--animated::after {
    content: '';
    display: block;
    height: var(--hp-scroll-budget, 0px);
}
#home-hot-products .home-product-stage {
    position: sticky;
    top: 65px;
    z-index: 1;
    perspective: 1600px;
}
#home-hot-products .home-product-main-title {
    transform-origin: left center;
    will-change: transform;
    backface-visibility: hidden;
}
#home-hot-products .home-product-main-title > h2 {
    display: inline-block;
}
#home-hot-products .home-product-title-en {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: 10px;
    color: #86909c;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 650;
    letter-spacing: .18em;
    text-transform: uppercase;
    white-space: nowrap;
}
/* 以顶边为轴翻转：顶边位置只由位移决定，几何可预测，便于保证不与大字重叠 */
#home-hot-products .home-product-reveal {
    transform-origin: 50% 0;
    will-change: transform;
}
/* 初始态：位于下方并向后翻倒；脚本随即接管（不做淡入） */
#home-hot-products.home-product-section--animated .home-product-reveal {
    transform: translate3d(0, 320px, 0) rotateX(58deg);
}
/* 仅当脚本启用时才隐藏/位移，避免无 JS 或窄屏时内容不可见 */
#home-hot-products.home-product-section--animated .home-product-heading .home-section-kicker,
#home-hot-products.home-product-section--animated .home-product-title-group p,
#home-hot-products.home-product-section--animated .home-product-nav-wrap {
    opacity: 0;
}

@media (max-width: 991px) {
    #home-hot-products {
        overflow: hidden;
    }
    #home-hot-products.home-product-section--animated::after {
        height: 0;
    }
    #home-hot-products .home-product-stage {
        position: static;
        top: auto;
    }
    #home-hot-products .home-product-main-title {
        transform: none;
        will-change: auto;
    }
    #home-hot-products .home-product-grid,
    #home-hot-products .home-product-reveal {
        transform: none;
        opacity: 1;
    }
    #home-hot-products .home-product-heading .home-section-kicker,
    #home-hot-products .home-product-title-group p,
    #home-hot-products .home-product-nav-wrap {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    #home-hot-products .home-product-stage {
        position: static;
    }
    #home-hot-products .home-product-main-title,
    #home-hot-products .home-product-reveal,
    #home-hot-products .home-product-grid {
        transform: none;
        opacity: 1;
    }
    #home-hot-products .home-product-heading .home-section-kicker,
    #home-hot-products .home-product-title-group p,
    #home-hot-products .home-product-nav-wrap {
        opacity: 1;
    }
}