/* 颜色与字体的基础设定 */
body { margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; background: radial-gradient(1200px circle at 20% 20%, rgba(44,62,80,0.6), transparent 50%), linear-gradient(135deg, #0b1220, #141b2d 70%, #1f2a44); font-family: 'Arial', sans-serif; }

/* 顶部横幅：容器与布局 */
.hero { position: relative; width: 100%; margin: 0 auto; padding-bottom: 48px; --banner-height: 900px; }
.hero-row { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; position: relative; z-index: 1; height: var(--banner-height); }
.hero-left { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }

/* 星云背景画布：占满横幅区域，置于内容后方 */
.nebula-canvas-container { position: absolute; top: 0; left: calc(50% - 50vw); transform: none; width: 100vw; height: var(--banner-height); z-index: -1; pointer-events: none; }
.nebula-canvas-container canvas { width: 100%; height: 100%; display: block; }

/* 幻灯片内容：标题、描述与详情栅格 */
.slide-content { color: #fff; transition: opacity 420ms ease, transform 420ms ease; }
.is-active { opacity: 1; transform: none; }
.is-inactive { display: none; }

.slide-title { font-size: clamp(32px, 6vw, 60px); line-height: 1.12; margin: 0 0 12px 0; letter-spacing: 0.3px; text-align: left; }
.slide-desc { font-size: clamp(16px, 2.2vw, 22px); color: #a8c3ff; margin: 0 0 24px 0; text-align: left; }
.slide-details { text-align: left; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }

/* 标题与按钮配色随 scheme 渐变 */
.slide-content[data-scheme="0"] .slide-title { background-image: linear-gradient(to right, #01d5fd 0%, #01a1f7 30%, #0063e5 70%, #4635db 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.slide-content[data-scheme="1"] .slide-title { background-image: linear-gradient(to right, #702082 0%, #7E40A0 25%, #9D63B9 55%, #8A6E9A 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.slide-content[data-scheme="2"] .slide-title { background-image: linear-gradient(to right, #8A587F 0%, #EAC6D1 33%, #D4D5D4 66%, #8DA0CE 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.slide-content[data-scheme="3"] .slide-title { background-image: linear-gradient(to right, #fffffe 0%, #e6ede7 25%, #c1e0d4 55%, #b8dcd1 75%, #afd7cc 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.cta-button { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border-radius: 24px; font-weight: 600; color: #fff; text-decoration: none; background: linear-gradient(90deg, #4facfe, #00f2fe); box-shadow: 0 8px 28px rgba(79,172,254,0.35); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.cta-button:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(79,172,254,0.55); }
.slide-content[data-scheme="0"] .cta-button { background-image: linear-gradient(to right, #01d5fd 0%, #01a1f7 30%, #0063e5 70%, #4635db 100%); }
.slide-content[data-scheme="1"] .cta-button { background-image: linear-gradient(to right, #702082 0%, #7E40A0 25%, #9D63B9 55%, #8A6E9A 100%); }
.slide-content[data-scheme="2"] .cta-button { background-image: linear-gradient(to right, #8A587F 0%, #EAC6D1 33%, #D4D5D4 66%, #8DA0CE 100%); }
.slide-content[data-scheme="3"] .cta-button { background-image: linear-gradient(to right, #fffffe 0%, #e6ede7 25%, #c1e0d4 55%, #b8dcd1 75%, #afd7cc 100%); color: #0b1220; }

/* 复写 Bootstrap 主按钮，保持与原 cta-button 一致的视觉 */
.btn.btn-primary { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border-radius: 24px; font-weight: 600; color: #fff; text-decoration: none; background: linear-gradient(90deg, #4facfe, #00f2fe); box-shadow: 0 8px 28px rgba(79,172,254,0.35); transition: transform 0.2s ease, box-shadow 0.2s ease; border: none; }
.btn.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(79,172,254,0.55); }
.slide-content[data-scheme="0"] .btn.btn-primary { background-image: linear-gradient(to right, #01d5fd 0%, #01a1f7 30%, #0063e5 70%, #4635db 100%); }
.slide-content[data-scheme="1"] .btn.btn-primary { background-image: linear-gradient(to right, #702082 0%, #7E40A0 25%, #9D63B9 55%, #8A6E9A 100%); }
.slide-content[data-scheme="2"] .btn.btn-primary { background-image: linear-gradient(to right, #8A587F 0%, #EAC6D1 33%, #D4D5D4 66%, #8DA0CE 100%); }
.slide-content[data-scheme="3"] .btn.btn-primary { background-image: linear-gradient(to right, #fffffe 0%, #e6ede7 25%, #c1e0d4 55%, #b8dcd1 75%, #afd7cc 100%); color: #0b1220; }

/* 幻灯片指示器：底部横条进度动画 */
.indicators { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; align-items: center; justify-content: center; z-index: 2; pointer-events: auto; }
.indicator { cursor: pointer; }
.indicator-line { display: inline-block; width: 40px; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.25); overflow: hidden; }
.progress-bar { display: block; height: 100%; width: 0%; background: #fff; }
.is-active .indicator-line { background: rgba(255,255,255,0.35); }

@keyframes progressGrow { from { width: 0%; } to { width: 100%; } }

/* 功能卡片：三列栅格 */
.features { margin-top: 36px; }
.features-row { display: flex; align-items: stretch; justify-content: center; }
.features-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: min(1120px, 92vw); }
.feature-card { display: block; text-decoration: none; color: #eaf1ff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); border-radius: 14px; padding: 14px 16px; transition: transform 0.2s ease, background 0.2s ease; }
.feature-card:hover { transform: translateY(-2px); background: rgba(255,255,255,0.12); }
.feature-title { margin: 0 0 6px 0; font-size: 15px; }
.feature-desc { margin: 0; font-size: 13px; color: #cfe0ff; }

/* 超宽屏优化：加宽容器与左列内容宽度 */
@media only screen and (min-width: 1600px) { .hero { width: 1420px; --banner-height: 900px; } .hero-left .slide-content { max-width: 760px; } }

/* 页脚备案信息 */
.site-footer { width: min(1120px, 92vw); margin: 0 auto; padding: 16px 0 24px; text-align: center; color: #cfe0ff; font-size: 12px; opacity: 0.8; }
.site-footer a { color: inherit; text-decoration: none; transition: opacity 0.2s ease; }
.site-footer a:hover { opacity: 1; }

/* Hanging icons（功能区）暗色主题复写 */
#hanging-icons h2 { color: #eaf1ff; }
#hanging-icons .border-bottom { border-color: rgba(255,255,255,0.16) !important; }
#hanging-icons .text-secondary { color: #cfe0ff !important; }
#hanging-icons .icon-square { width: 3rem; height: 3rem; border-radius: 0.75rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: #eaf1ff; box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
/* 对齐 hero 宽度并居中，使左右间距相当 */
#hanging-icons { width: min(1120px, 92vw); margin: 0 auto; }