/* ============================================================
AEGISX — HOME V2 视觉升级层 (home-v2.css)
2026-09-25 首页大气改版
- 纯视觉覆盖层：不改 HTML 功能结构，不影响 host-overview / attack-map
- 回滚方式：删除 index.html 中本文件的 即可
============================================================ */
/* ============ 0. 顶部导航：毛玻璃吸顶 + 大气 ============ */
.header {
backdrop-filter: blur(18px) saturate(1.4);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
background: rgba(8, 12, 24, .72) !important;
border-bottom: 1px solid rgba(99, 102, 241, .18);
box-shadow: 0 8px 32px rgba(0, 0, 0, .45), 0 1px 0 rgba(99, 102, 241, .08);
}
.header__nav-link { font-weight: 500; letter-spacing: .3px; transition: color .2s; }
.header__nav-link:hover { color: #818CF8; }
/* ============ 1. PROMO BAR：霓虹渐变条 ============ */
.promo-bar {
background: linear-gradient(90deg, rgba(99,102,241,.22) 0%, rgba(6,182,212,.16) 50%, rgba(99,102,241,.22) 100%);
border-bottom: 1px solid rgba(99, 102, 241, .28);
font-size: 13.5px;
letter-spacing: .3px;
padding: 12px 20px;
position: relative;
overflow: hidden;
}
.promo-bar::after {
content: '';
position: absolute;
top: 0; left: -60%;
width: 40%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
animation: promoShine 5s ease-in-out infinite;
}
@keyframes promoShine { 0%,60% { left: -60%; } 100% { left: 130%; } }
/* ============ 2. HERO：机甲背景 + 超大标题 + 发光 CTA ============ */
.hero {
position: relative;
min-height: 92vh;
display: flex;
align-items: center;
padding: clamp(72px, 9vw, 130px) 0 clamp(60px, 7vw, 100px);
background: #070B14;
overflow: hidden;
isolation: isolate;
}
/* 机甲背景图 + 深色遮罩 */
.hero-v2-bg {
position: absolute;
inset: 0;
z-index: -3;
background: url('/frontend/img/mech-bg.jpg') center 38% / cover no-repeat;
opacity: .5;
}
.hero-v2-bg::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(7,11,20,.96) 0%, rgba(7,11,20,.82) 42%, rgba(7,11,20,.55) 100%),
linear-gradient(180deg, rgba(7,11,20,.55) 0%, rgba(7,11,20,.18) 45%, #0A0E1A 100%);
}
/* 光晕氛围 */
.hero-v2-bg::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(720px 420px at 78% 30%, rgba(6,182,212,.16), transparent 65%),
radial-gradient(680px 480px at 12% 78%, rgba(99,102,241,.20), transparent 68%);
animation: heroGlowFloat 14s ease-in-out infinite alternate;
}
/* 网格纹理 */
.hero-v2-grid {
position: absolute;
inset: 0;
z-index: -2;
background-image:
linear-gradient(rgba(99,102,241,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(99,102,241,.06) 1px, transparent 1px);
background-size: 52px 52px;
mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 35%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 35%, transparent 100%);
pointer-events: none;
}
/* Hero 布局：左右分栏保持，左侧文字放大 */
.hero .hero-grid { gap: clamp(40px, 5vw, 80px); }
/* 标签徽章 */
.hero-tag {
font-size: 14px !important;
padding: 9px 20px !important;
border-radius: 50px;
background: rgba(99,102,241,.12) !important;
border: 1px solid rgba(99,102,241,.38) !important;
color: #A5B4FC !important;
letter-spacing: .5px;
box-shadow: 0 0 24px rgba(99,102,241,.18), inset 0 0 12px rgba(99,102,241,.06) !important;
}
/* 超大主标题（字号上限受半栏宽度约束：保证首行 12 字在 ≥769px 视口单行不换行） */
.hero h1 {
font-size: clamp(36px, 3.6vw, 54px) !important;
font-weight: 900 !important;
line-height: 1.12 !important;
letter-spacing: -1.5px !important;
margin: 26px 0 20px !important;
text-shadow: 0 4px 40px rgba(0,0,0,.5);
}
.hero h1 .accent {
background: linear-gradient(94deg, #818CF8 0%, #22D3EE 55%, #6366F1 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 0 26px rgba(99,102,241,.4));
}
/* 副标题 */
.hero-desc {
font-size: clamp(16px, 1.4vw, 19px) !important;
line-height: 1.8 !important;
color: #C7D2E4 !important;
max-width: 560px !important;
margin-bottom: 30px !important;
}
.hero-desc strong { color: #F1F5F9; font-weight: 700; }
/* 简介核心词：建站=青 / 多语言=蓝紫 / 永久免费=绿 / 安全=琥珀，全部加粗 */
.hero-desc .hl-a{font-style:normal;font-weight:700;color:#67E8F9}
.hero-desc .hl-b{font-style:normal;font-weight:700;color:#A5B4FC}
.hero-desc .hl-c{font-style:normal;font-weight:800;color:#4ADE80}
.hero-desc .hl-d{font-style:normal;font-weight:700;color:#FBBF24}
/* CTA 按钮组：更大更亮 */
.hero-actions { gap: 16px !important; }
.hero-actions .btn-lg {
font-size: 16.5px !important;
padding: 17px 38px !important;
border-radius: 14px !important;
letter-spacing: .5px;
}
.hero-actions .btn--primary {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 55%, #06B6D4 130%) !important;
box-shadow: 0 14px 40px rgba(99,102,241,.5), 0 0 0 1px rgba(129,140,248,.4) inset !important;
position: relative;
overflow: hidden;
}
.hero-actions .btn--primary::after {
content: '';
position: absolute;
top: 0; left: -80%;
width: 50%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
transform: skewX(-20deg);
animation: btnShine 3.2s ease-in-out infinite;
}
@keyframes btnShine { 0%,55% { left: -80%; } 100% { left: 160%; } }
.hero-actions .btn--primary:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 20px 54px rgba(99,102,241,.62), 0 0 0 1px rgba(129,140,248,.55) inset !important;
}
.hero-actions .btn--outline {
border: 1px solid rgba(129,140,248,.45) !important;
background: rgba(15,23,42,.5) !important;
color: #C7D2FE !important;
}
.hero-actions .btn--outline:hover {
border-color: rgba(129,140,248,.8) !important;
background: rgba(99,102,241,.14) !important;
transform: translateY(-3px);
}
/* USP 徽章行：免费控制面板核心卖点 */
.hero-usp {
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
margin-top: 26px;
}
.hero-usp span {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 14px;
font-weight: 600;
color: #DDE5F2;
letter-spacing: .2px;
}
.hero-usp span::before {
content: '';
width: 18px; height: 18px;
border-radius: 50%;
flex: none;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23070B14' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/11px no-repeat,
linear-gradient(135deg, #22D3EE, #6366F1);
box-shadow: 0 0 12px rgba(34,211,238,.45);
}
.hero-usp .usp-free { color: #6EE7B7; }
.hero-usp .usp-free::before {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23052e16' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/11px no-repeat,
linear-gradient(135deg, #34D399, #10B981);
box-shadow: 0 0 12px rgba(52,211,153,.5);
}
/* 数据指标：更大更醒目 */
.hero-stats {
margin-top: 40px !important;
gap: clamp(24px, 3vw, 46px) !important;
padding-top: 30px;
border-top: 1px solid rgba(148,163,184,.14);
}
.hero-stats .s .v {
font-size: clamp(26px, 2.6vw, 36px) !important;
font-weight: 900 !important;
}
.hero-stats .s .l { font-size: 13px !important; letter-spacing: .4px; }
/* 右侧安全态势面板：霓虹玻璃 */
.hero-panel {
border-radius: 20px !important;
border: 1px solid rgba(99,102,241,.28) !important;
background: linear-gradient(160deg, rgba(15,23,42,.88), rgba(10,16,32,.92)) !important;
box-shadow:
0 40px 90px -20px rgba(0,0,0,.7),
0 0 60px rgba(99,102,241,.14),
inset 0 1px 0 rgba(148,163,184,.1) !important;
padding: 26px !important;
}
.hero-panel .p-title { font-size: 16px !important; letter-spacing: .3px; }
.hero-panel .gauge {
background: rgba(30,41,59,.6) !important;
border: 1px solid rgba(99,102,241,.14);
border-radius: 13px !important;
}
.hero-panel .gauge .gv { font-size: 24px !important; font-weight: 900 !important; }
/* ============ 3. 区块通用：更开阔的呼吸感 ============ */
.section { padding: 88px 0; }
.sec-head { max-width: 760px; margin-bottom: 52px; }
.sec-title {
font-size: clamp(30px, 3.6vw, 44px) !important;
font-weight: 900 !important;
letter-spacing: -1px !important;
color: #F8FAFC !important;
}
.sec-title .accent {
background: linear-gradient(94deg, #818CF8, #22D3EE);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.sec-desc { font-size: 16.5px !important; color: #A8B6CC !important; line-height: 1.75; }
.sec-label {
font-size: 13px !important;
padding: 7px 18px !important;
letter-spacing: 2.6px !important;
border: 1px solid rgba(99,102,241,.35);
background: rgba(99,102,241,.1) !important;
color: #A5B4FC !important;
}
/* 覆盖 home-enhance.css 中把标题写成深色的问题 */
.section h2, .host-overview h2, section[id] h2 { color: #F8FAFC; }
/* ============ 4. TRUST：发光分隔 ============ */
.trust { padding: 40px 0 12px; }
.trust .t-label { font-size: 14px; letter-spacing: 1px; color: #8FA0BC; }
.trust-row .lg { font-size: 18px; letter-spacing: 1.5px; }
/* ============ 5. 一键安装：更强的科技感卡片 ============ */
.install-card {
border-radius: 24px !important;
padding: clamp(32px, 4vw, 54px) !important;
border: 1px solid rgba(99,102,241,.3) !important;
background:
radial-gradient(600px 300px at 85% 0%, rgba(6,182,212,.12), transparent 65%),
linear-gradient(135deg, #0D1526 0%, #131E38 100%) !important;
box-shadow: 0 40px 90px -18px rgba(0,0,0,.7), 0 0 60px rgba(99,102,241,.1) !important;
}
.install-info h3 { font-size: clamp(24px, 2.4vw, 32px) !important; font-weight: 900 !important; letter-spacing: -.5px; }
.install-info p { font-size: 15.5px !important; color: #B9C6DA !important; }
.copy-btn {
padding: 15px 30px !important;
font-size: 15px !important;
border-radius: 13px !important;
background: linear-gradient(135deg, #6366F1, #4F46E5) !important;
box-shadow: 0 12px 32px rgba(99,102,241,.5) !important;
}
.copy-btn:hover { box-shadow: 0 16px 42px rgba(99,102,241,.65) !important; }
.install-term { border-radius: 16px !important; border: 1px solid rgba(99,102,241,.2) !important; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
/* ============ 6. 功能/防御卡片：玻璃拟态 + 发光悬浮 ============ */
.feat-card, .def-card {
border-radius: 18px !important;
background: linear-gradient(160deg, rgba(21,30,52,.85), rgba(13,20,38,.9)) !important;
border: 1px solid rgba(99,102,241,.14) !important;
box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.feat-card:hover, .def-card:hover {
transform: translateY(-7px) !important;
border-color: rgba(99,102,241,.55) !important;
box-shadow: 0 26px 56px -10px rgba(0,0,0,.6), 0 0 40px rgba(99,102,241,.18) !important;
}
.feat-card h4 { font-size: 16.5px !important; }
.feat-card p { font-size: 13px !important; color: #A8B6CC !important; }
.def-card h5 { font-size: 16.5px !important; }
.def-card p { color: #A8B6CC !important; }
.def-card .dco {
filter: drop-shadow(0 0 14px rgba(99,102,241,.35));
}
/* ============ 7. 定价卡片区域微调 ============ */
.price-card { border-radius: 20px !important; }
.price-more__link { font-weight: 700; }
/* ============ 8. 部署步骤：编号发光 ============ */
.dep-card {
border-radius: 18px !important;
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.dep-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px -10px rgba(0,0,0,.55), 0 0 34px rgba(99,102,241,.15); }
/* ============ 9. 新闻卡片 ============ */
.news-card { border-radius: 18px !important; }
.news-card:hover { border-color: rgba(99,102,241,.5) !important; box-shadow: 0 22px 50px -10px rgba(0,0,0,.55), 0 0 34px rgba(99,102,241,.16) !important; }
/* ============ 10. 工单卡片 ============ */
.ticket-card { border-radius: 22px !important; box-shadow: 0 30px 70px -14px rgba(0,0,0,.6); }
/* ============ 11. CTA 终区：超大渐变行动召唤 ============ */
.cta {
margin: 40px auto 0;
padding: clamp(56px, 7vw, 96px) 24px !important;
position: relative;
overflow: hidden;
background:
radial-gradient(800px 400px at 50% 120%, rgba(99,102,241,.28), transparent 70%),
linear-gradient(180deg, transparent, rgba(99,102,241,.06)) !important;
}
.cta-inner { position: relative; z-index: 1; }
.cta h3 {
font-size: clamp(28px, 3.8vw, 46px) !important;
font-weight: 900 !important;
letter-spacing: -1px !important;
line-height: 1.2 !important;
}
.cta h3 .accent {
background: linear-gradient(94deg, #818CF8, #22D3EE);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.cta p { font-size: 16.5px !important; color: #A8B6CC !important; }
.cta-badge { letter-spacing: 1px !important; }
.cta-actions .btn-solid, .cta-actions .btn-outline {
font-size: 16.5px !important;
padding: 17px 40px !important;
border-radius: 14px !important;
font-weight: 800 !important;
letter-spacing: .5px;
}
.cta-actions .btn-solid {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 60%, #06B6D4 140%) !important;
box-shadow: 0 16px 46px rgba(99,102,241,.55) !important;
}
.cta-actions .btn-solid:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 22px 60px rgba(99,102,241,.68) !important; }
/* ============ 12. 移动端适配 ============ */
@media (max-width: 900px) {
.hero { min-height: auto; }
.hero-v2-bg { opacity: .38; }
.section { padding: 60px 0; }
.hero-actions .btn-lg { width: 100%; text-align: center; }
}
@media (max-width: 768px) {
.promo-bar::after, .hero-actions .btn--primary::after { animation: none; }
}
/* ============ 全球攻击态势 Live：弧线已在 viewBox 内完整绘制，无需顶部预留 ============ */
/* ============ 13. Hero 安全态势面板：图标 + 彩色层次 ============ */
/* 标题带盾牌图标 */
.hero-panel .p-title {
display: flex;
align-items: center;
gap: 9px;
font-size: 16.5px !important;
font-weight: 800;
letter-spacing: .5px;
color: #E8ECF5 !important;
}
.hero-panel .p-title svg {
width: 19px; height: 19px;
color: #818CF8;
filter: drop-shadow(0 0 8px rgba(129,140,248,.6));
}
/* 实时徽标加呼吸光环 */
.hero-panel .p-live {
padding: 4px 12px;
border-radius: 50px;
background: rgba(34,197,94,.1);
border: 1px solid rgba(34,197,94,.3);
box-shadow: 0 0 14px rgba(34,197,94,.15);
}
/* 三个指标卡：图标 + 彩色数字 */
.hero-panel .gauge {
padding: 16px 10px 14px !important;
position: relative;
overflow: hidden;
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.hero-panel .gauge::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(129,140,248,.55), transparent);
opacity: .7;
}
.hero-panel .gauge:hover {
transform: translateY(-3px);
border-color: rgba(129,140,248,.4);
box-shadow: 0 10px 26px rgba(0,0,0,.4), 0 0 22px rgba(99,102,241,.15);
}
/* 图标徽章 */
.hero-panel .gi {
width: 34px; height: 34px;
margin: 0 auto 9px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.hero-panel .gi svg { width: 17px; height: 17px; }
.gi-cyan { background: rgba(6,182,212,.15); border: 1px solid rgba(6,182,212,.35); color: #22D3EE; box-shadow: 0 0 14px rgba(6,182,212,.25); }
.gi-purple { background: rgba(139,92,246,.15); border: 1px solid rgba(139,92,246,.35); color: #A78BFA; box-shadow: 0 0 14px rgba(139,92,246,.25); }
.gi-green { background: rgba(16,185,129,.15); border: 1px solid rgba(16,185,129,.35); color: #34D399; box-shadow: 0 0 14px rgba(16,185,129,.25); }
/* 数字彩色渐变 */
.hero-panel .gv-cyan {
background: linear-gradient(135deg, #67E8F9, #06B6D4);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.hero-panel .gv-purple {
background: linear-gradient(135deg, #C4B5FD, #8B5CF6);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.hero-panel .gv-green {
background: linear-gradient(135deg, #6EE7B7, #10B981);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* 进度条标签：图标 + 文字 + 彩色数值 */
.hero-panel .bl-label {
display: inline-flex;
align-items: center;
gap: 7px;
font-weight: 600;
color: #C7D2E4;
letter-spacing: .3px;
}
.hero-panel .bl-label svg { width: 14px; height: 14px; flex: none; }
.hero-panel .bar-block:nth-of-type(3) .bl-label svg { color: #818CF8; }
.hero-panel .bar-block:nth-of-type(4) .bl-label svg { color: #22D3EE; }
.hero-panel .bar-block:nth-of-type(5) .bl-label svg { color: #FBBF24; }
.hero-panel .bl-val { font-weight: 800; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .3px; }
.bl-val.v-indigo { color: #A5B4FC; text-shadow: 0 0 12px rgba(129,140,248,.45); }
.bl-val.v-cyan { color: #67E8F9; text-shadow: 0 0 12px rgba(34,211,238,.45); }
.bl-val.v-amber { color: #FCD34D; text-shadow: 0 0 12px rgba(251,191,36,.45); }
/* 进度条加光晕 */
.hero-panel .bar-track { box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
.hero-panel .bar-fill { box-shadow: 0 0 12px rgba(99,102,241,.5); }
.hero-panel .bar-fill.cyan { box-shadow: 0 0 12px rgba(6,182,212,.5); }
.hero-panel .bar-fill.orange { box-shadow: 0 0 12px rgba(245,158,11,.5); }
/* ============ 14. 核心功能区重构：28 大模块视觉升级 ============ */
/* 整区氛围光晕 */
#features { position: relative; overflow: hidden; }
#features::before {
content: '';
position: absolute; top: -220px; left: 50%; transform: translateX(-50%);
width: 1000px; height: 560px;
background: radial-gradient(ellipse at center, rgba(99,102,241,.15), transparent 65%);
pointer-events: none;
}
#features .container { position: relative; z-index: 1; }
#features .feat-grid { gap: 22px; }
/* 卡片：深色玻璃 + 顶部渐变光带 */
#features .feat-card {
padding: 28px 24px 24px !important;
border-radius: 20px !important;
background: linear-gradient(165deg, rgba(23,32,58,.92), rgba(12,18,36,.96)) !important;
border: 1px solid rgba(99,102,241,.16) !important;
box-shadow: 0 8px 28px rgba(0,0,0,.4);
}
#features .feat-card::before {
content: '';
position: absolute; top: 0; left: 18%; right: 18%;
height: 2px; border-radius: 2px;
background: linear-gradient(90deg, transparent, rgba(99,102,241,.65), rgba(6,182,212,.65), transparent);
opacity: .4;
transition: opacity .3s, left .3s, right .3s;
}
#features .feat-card:hover {
transform: translateY(-8px) !important;
border-color: rgba(99,102,241,.55) !important;
box-shadow: 0 28px 60px -12px rgba(0,0,0,.65), 0 0 44px rgba(99,102,241,.22) !important;
}
#features .feat-card:hover::before { opacity: 1; left: 5%; right: 5%; }
/* 图标徽章：更大 + 光晕 + hover 微旋 */
#features .feat-card .ico {
width: 68px !important; height: 68px !important;
border-radius: 18px !important;
font-size: 34px !important;
margin-bottom: 16px !important;
background: linear-gradient(145deg, rgba(99,102,241,.22), rgba(6,182,212,.12)) !important;
border: 1px solid rgba(129,140,248,.3) !important;
box-shadow: 0 0 24px rgba(99,102,241,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
#features .feat-card:hover .ico {
background: linear-gradient(135deg, #6366F1, #06B6D4) !important;
transform: scale(1.08) rotate(-4deg) !important;
box-shadow: 0 10px 28px rgba(99,102,241,.55) !important;
}
/* 标题 / 描述 / 标签 */
#features .feat-card h4 { font-size: 17px !important; letter-spacing: .3px; margin-bottom: 8px; transition: color .25s; }
#features .feat-card:hover h4 { color: #A5B4FC; }
#features .feat-card p { font-size: 13px !important; line-height: 1.65 !important; min-height: 44px !important; }
#features .feat-card .tag {
margin-top: 14px !important;
font-size: 11.5px !important;
padding: 4px 12px !important;
color: #A5B4FC !important;
background: rgba(99,102,241,.12) !important;
border: 1px solid rgba(99,102,241,.28);
letter-spacing: .5px;
}
/* SVIP 卡片：金色尊贵质感 */
#features .feat-card.svip {
border-color: rgba(245,158,11,.38) !important;
background: linear-gradient(165deg, rgba(48,33,16,.9), rgba(20,16,30,.96)) !important;
}
#features .feat-card.svip::before {
background: linear-gradient(90deg, transparent, rgba(245,158,11,.75), rgba(251,191,36,.75), transparent);
}
#features .feat-card.svip:hover {
border-color: rgba(245,158,11,.75) !important;
box-shadow: 0 28px 60px -12px rgba(0,0,0,.65), 0 0 44px rgba(245,158,11,.28) !important;
}
#features .feat-card.svip:hover .ico {
background: linear-gradient(135deg, #F59E0B, #FBBF24) !important;
box-shadow: 0 10px 28px rgba(245,158,11,.5) !important;
}
#features .feat-card.svip .tag {
color: #FCD34D !important;
background: rgba(245,158,11,.12) !important;
border-color: rgba(245,158,11,.35);
}
/* 查看更多按钮：加大 + 流光扫过 */
#features .btn-feat-more {
position: relative; overflow: hidden;
font-size: 16px !important;
padding: 15px 46px !important;
border-radius: 14px !important;
}
#features .btn-feat-more::after {
content: '';
position: absolute; top: 0; left: -100%;
width: 55%; height: 100%;
background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
animation: btnShine 3.2s infinite;
}
/* ============================================================
PANEL SHOWCASE — 免费 Linux 控制面板虚拟演示（纯 DOM，任意分辨率清晰）
设计稿固定宽 1120，窄屏由 JS transform:scale 等比缩放
============================================================ */
.ps-section{
background:
radial-gradient(900px 420px at 15% 0%, rgba(99,102,241,.12), transparent 60%),
radial-gradient(900px 420px at 85% 10%, rgba(6,182,212,.08), transparent 60%),
linear-gradient(180deg,#0A0E1A 0%,#0C1222 100%);
border-top:1px solid rgba(148,163,184,.08);
border-bottom:1px solid rgba(148,163,184,.08);
}
.ps-tabs{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;margin:-14px auto 30px}
.ps-tab{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:99px;border:1px solid rgba(148,163,184,.18);
background:rgba(15,23,42,.6);color:#C7D0E0;font-family:var(--font);font-size:14.5px;font-weight:700;cursor:pointer;transition:.25s}
.ps-tab svg{width:17px;height:17px;color:#818CF8}
.ps-tab small{font-size:11px;font-weight:600;color:#64748B;padding:2px 8px;border-radius:99px;background:rgba(148,163,184,.1)}
.ps-tab:hover{border-color:rgba(99,102,241,.5);color:#fff}
.ps-tab.is-active{background:linear-gradient(135deg,#4F46E5,#6366F1);border-color:transparent;color:#fff;
box-shadow:0 10px 26px rgba(99,102,241,.4)}
.ps-tab.is-active small{background:rgba(255,255,255,.18);color:#E0E7FF}
.ps-tabs-hint{font-size:12px;color:#64748B;margin-left:4px}
.ps-stage{width:100%}
.ps-scale{width:1240px;transform-origin:top left}
.ps-frame{
width:1240px;border-radius:16px;overflow:hidden;
background:#0B1020;border:1px solid rgba(148,163,184,.16);
box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(99,102,241,.06), 0 0 60px rgba(99,102,241,.08);
}
/* 浏览器顶栏 */
.ps-topbar{display:flex;align-items:center;gap:7px;padding:11px 16px;background:#0E1526;border-bottom:1px solid rgba(148,163,184,.1)}
.ps-dot{width:11px;height:11px;border-radius:50%}
.ps-url{margin:0 auto 0 10px;display:flex;align-items:center;gap:7px;background:#0A0F1C;border:1px solid rgba(148,163,184,.12);
border-radius:8px;padding:5px 16px;font-size:11.5px;color:#7B8AA3;width:420px}
.ps-url svg{width:12px;height:12px}
.ps-url b{color:#A5B4FC;font-weight:600}
/* 应用布局 */
.ps-app{display:flex;min-height:640px}
.ps-side{width:196px;flex-shrink:0;background:#0D1424;border-right:1px solid rgba(148,163,184,.1);padding:14px 12px;display:flex;flex-direction:column;gap:4px}
.ps-brand{display:flex;align-items:center;gap:7px;padding:4px 4px 14px;border-bottom:1px solid rgba(148,163,184,.09);margin-bottom:10px}
.ps-brand-ico{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#3B82F6,#6366F1);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:0 6px 16px rgba(59,130,246,.4)}
.ps-brand-ico svg{width:16px;height:16px}
.ps-brand-txt{display:flex;flex:1;flex-direction:column;line-height:1.3;min-width:0}
.ps-brand-txt b{font-size:12px;color:#E6ECF6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-brand-txt small{font-size:9px;color:#FBBF24;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-svip{margin-left:0;font-size:8.5px;font-weight:800;color:#FBBF24;background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.35);padding:2px 4px;border-radius:5px;flex-shrink:0}
.ps-nav{display:flex;flex-direction:column;gap:2px}
.ps-nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:#9AA7BE;font-size:12.5px;font-weight:500;position:relative;cursor:default;white-space:nowrap}
.ps-nav a .ps-ic{width:17px;height:17px;color:#8B99B2;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ps-nav a.is-active{background:linear-gradient(90deg,#2563EB,#4F46E5);color:#fff;box-shadow:0 6px 16px rgba(37,99,235,.35)}
.ps-nav a.is-active .ps-ic{color:#fff}
.ps-badge{margin-left:auto;font-size:8.5px;font-weight:800;padding:2px 5px;border-radius:5px;line-height:1}
.ps-badge-hot{color:#fff;background:linear-gradient(135deg,#F97316,#EF4444)}
.ps-badge-new{color:#06202A;background:linear-gradient(135deg,#22D3EE,#06B6D4)}
.ps-main{flex:1;background:#0B1020;padding:16px 18px;min-width:0}
.ps-pane{display:none}
.ps-pane.is-active{display:block;animation:psFade .35s ease}
@keyframes psFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ps-ic{width:15px;height:15px}
.ps-ic-blue{color:#60A5FA}
/* —— 网站管理 —— */
.pm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.pm-head h4{display:flex;align-items:center;gap:8px;font-size:17px;color:#E6ECF6;font-weight:800;margin:0}
.pm-head p{margin:4px 0 0;font-size:11.5px;color:#7B8AA3}
.pm-actions{display:flex;gap:7px;flex-shrink:0}
.pm-btn{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border-radius:8px;font-size:11.5px;font-weight:600;
color:#C7D0E0;background:#182138;border:1px solid rgba(148,163,184,.14);cursor:default;white-space:nowrap}
.pm-btn-green{background:linear-gradient(135deg,#059669,#10B981);border-color:transparent;color:#fff}
.pm-btn-blue{background:linear-gradient(135deg,#2563EB,#3B82F6);border-color:transparent;color:#fff;box-shadow:0 6px 14px rgba(37,99,235,.35)}
.pm-btn-orange{background:linear-gradient(135deg,#EA580C,#F59E0B);border-color:transparent;color:#fff}
.pm-btn-amber{color:#FBBF24;border-color:rgba(251,191,36,.3);background:rgba(251,191,36,.08)}
.pm-env{background:#0F1729;border:1px solid rgba(148,163,184,.1);border-radius:12px;padding:11px 13px;margin-bottom:13px}
.pm-env-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pm-env-row2{margin-top:9px;justify-content:space-between}
.pm-chip{display:inline-flex;align-items:center;gap:0;font-size:11px;color:#C7D0E0;background:rgba(148,163,184,.07);
border:1px solid rgba(148,163,184,.12);border-radius:7px;padding:4px 9px;white-space:nowrap}
.pm-chip-cyan{color:#67E8F9;background:rgba(6,182,212,.1);border-color:rgba(6,182,212,.3);font-weight:700}
.pm-chip-warn{color:#FBBF24;background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.25)}
.pm-chip-red{color:#FCA5A5;background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.35);font-weight:700}
.ps-play{width:0;height:0;border-left:7px solid #34D399;border-top:4px solid transparent;border-bottom:4px solid transparent;margin-right:7px}
.ps-stop{width:7px;height:7px;background:#F87171;border-radius:2px;margin-right:7px}
.pm-env-note{font-size:11px;color:#7B8AA3}
.pm-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:13px}
/* v20261006：统计卡 1:1 对齐真实软件 Sites 页 KpiTile 配方 ——
彩色描边 + 彩色渐变卡底 + 彩色阴影 + 右上角【实心】半圆点缀（不再用发虚的径向渐变光晕）。 */
.pm-stat{position:relative;overflow:hidden;background:#10182A;border:1px solid rgba(148,163,184,.14);
border-radius:12px;padding:12px 14px;box-shadow:0 8px 18px rgba(2,6,23,.35)}
.pm-stat small{font-size:11px;color:#8B99B2;position:relative;z-index:1;font-weight:600}
.pm-stat b{display:block;font-size:25px;font-weight:800;color:#E6ECF6;margin-top:4px;line-height:1.1;
position:relative;z-index:1;text-shadow:0 1px 6px rgba(0,0,0,.35)}
/* 实心半圆：112px 圆，右上偏移让卡片圆角裁出月牙边（与软件 h-28/-right-8/-top-10 一致） */
.pm-stat i{position:absolute;right:-32px;top:-40px;width:112px;height:112px;border-radius:50%;
pointer-events:none;z-index:0}
.c-blue{border-color:rgba(96,165,250,.40);background:linear-gradient(135deg,rgba(59,130,246,.30),rgba(37,99,235,.10) 55%,rgba(2,6,23,.85));box-shadow:0 8px 18px rgba(23,37,84,.45)}
.c-green{border-color:rgba(52,211,153,.40);background:linear-gradient(135deg,rgba(16,185,129,.30),rgba(5,150,105,.10) 55%,rgba(2,6,23,.85));box-shadow:0 8px 18px rgba(6,78,59,.45)}
.c-red{border-color:rgba(251,113,133,.40);background:linear-gradient(135deg,rgba(244,63,94,.30),rgba(225,29,72,.10) 55%,rgba(2,6,23,.85));box-shadow:0 8px 18px rgba(136,19,55,.45)}
.c-amber{border-color:rgba(251,191,36,.40);background:linear-gradient(135deg,rgba(245,158,11,.30),rgba(217,119,6,.10) 55%,rgba(2,6,23,.85));box-shadow:0 8px 18px rgba(120,53,15,.45)}
.c-cyan{border-color:rgba(34,211,238,.40);background:linear-gradient(135deg,rgba(6,182,212,.30),rgba(8,145,178,.10) 55%,rgba(2,6,23,.85));box-shadow:0 8px 18px rgba(22,78,99,.45)}
.c-purple{border-color:rgba(167,139,250,.40);background:linear-gradient(135deg,rgba(139,92,246,.30),rgba(124,58,237,.10) 55%,rgba(2,6,23,.85));box-shadow:0 8px 18px rgba(76,29,149,.45)}
.c-blue i{background:rgba(96,165,250,.55)}
.c-green i{background:rgba(52,211,153,.55)}
.c-red i{background:rgba(251,113,133,.55)}
.c-amber i{background:rgba(251,191,36,.55)}
.c-cyan i{background:rgba(34,211,238,.55)}
.c-purple i{background:rgba(167,139,250,.55)}
.c-blue small{color:#DBEAFE}.c-blue b{color:#EFF6FF}
.c-green small{color:#D1FAE5}.c-green b{color:#ECFDF5}
.c-red small{color:#FFE4E6}.c-red b{color:#FFF1F2}
.c-amber small{color:#FEF3C7}.c-amber b{color:#FFFBEB}
.c-cyan small{color:#CFFAFE}.c-cyan b{color:#ECFEFF}
.c-purple small{color:#EDE9FE}.c-purple b{color:#F5F3FF}
.pm-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:11px}
.pm-tab{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:#B3C0D6;
background:#0F1729;border:1px solid rgba(148,163,184,.12);border-radius:9px;padding:6px 12px;cursor:default}
.pm-tab i{font-style:normal;font-size:10.5px;color:#8B99B2;background:rgba(148,163,184,.1);border-radius:99px;padding:1px 7px;min-width:18px;text-align:center}
.pm-tab i.t-red{color:#FCA5A5}
.pm-tab.is-on{background:linear-gradient(135deg,#2563EB,#3B82F6);border-color:transparent;color:#fff;box-shadow:0 6px 14px rgba(37,99,235,.3)}
.pm-tab.is-on i{background:rgba(255,255,255,.2);color:#fff}
.pm-search{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.pm-search span{flex:1;background:#0C1322;border:1px solid rgba(148,163,184,.1);border-radius:9px;padding:9px 14px;font-size:11.5px;color:#5B6B86}
.pm-search em{font-style:normal;font-size:11.5px;color:#8B99B2;white-space:nowrap}
.pm-table{border:1px solid rgba(148,163,184,.1);border-radius:12px;overflow:hidden;background:#0E1526}
/* 15 列：状态|站点/根目录|备份|空间|风险|PV|UV|蜘蛛|日流量|备注|PHP版本|SSL到期|网站到期|建站时间|操作 */
.pt-row{display:grid;grid-template-columns:12px 108px 46px 32px 52px 44px 50px 40px 52px 170px 50px 60px 72px 62px 127px;
gap:4px;align-items:center;padding:7px 8px;border-bottom:1px solid rgba(148,163,184,.07)}
.pt-row:last-child{border-bottom:none}
.pt-row:not(.pt-head):hover{background:rgba(99,102,241,.06)}
.pt-head{font-size:10.5px;color:#7B8AA3;background:#0B1220;padding-top:8px;padding-bottom:8px}
.pt-status{display:flex;justify-content:center}
.dot-run{width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 7px rgba(34,197,94,.8)}
.pt-site{min-width:0;line-height:1.3;white-space:nowrap;overflow:hidden}
.pt-site b{font-size:11.5px;color:#DCE4F2;font-weight:700;margin-right:5px;white-space:nowrap}
.pt-site em{font-style:normal;font-size:9.5px;display:inline-flex;align-items:center;gap:2px;vertical-align:-1px}
.t-http{color:#94A3B8}
.t-https{font-size:11px}
.pico-z{color:#8B99B2}
.pt-site small{display:block;font-size:9.5px;color:#5B6B86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 表头小图标 / 排序箭头 */
.pt-hic{width:11px;height:11px;vertical-align:-1px;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round;color:#7B8AA3;margin-right:2px}
.pt-hic-g{color:#34D399}
.pt-hic-r{color:#FB7185}
.pt-sort{display:inline-block;width:0;height:0;margin-left:3px;vertical-align:1px;
border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:5px solid #34D399}
.pt-sort-u{border-bottom:none;border-top:5px solid #34D399;vertical-align:-2px}
/* 备份列：无备份=灰框，有备份=绿色图标胶囊 */
.pt-bak{display:flex;justify-content:center}
.pt-bak i{font-style:normal;display:inline-flex;align-items:center;gap:3px;font-size:10px;
border-radius:6px;padding:1px 6px;white-space:nowrap}
.bak-off{color:#6B7790;border:1px solid rgba(120,135,160,.25);background:rgba(148,163,184,.05)}
.bak-on{color:#34D399;border:1px solid rgba(16,185,129,.4);background:rgba(16,185,129,.12);font-weight:700}
/* 空间列 */
.pt-space{font-size:10.5px;color:#34D399;text-align:center;white-space:nowrap}
/* 风险列：安全/低危/高危 徽章 */
.pt-risk{text-align:center;white-space:nowrap}
.pt-risk i{font-style:normal;display:inline-block;font-size:10px;font-weight:700;
padding:1px 7px;border-radius:6px;white-space:nowrap}
.risk-ok{color:#fff;background:linear-gradient(135deg,#10B981,#059669);
box-shadow:0 2px 6px rgba(16,185,129,.35)}
.risk-warn{color:#fff;background:linear-gradient(135deg,#F59E0B,#D97706);
box-shadow:0 2px 6px rgba(245,158,11,.35)}
.risk-danger{color:#fff;background:linear-gradient(135deg,#EF4444,#DC2626);
box-shadow:0 2px 6px rgba(239,68,68,.35);animation:danger-blink 1.2s infinite}
@keyframes danger-blink{0%,100%{opacity:1}50%{opacity:.7}}
/* PV / UV / 蜘蛛：图标 + 数值 */
.pt-num{font-size:10.5px;color:#C7D0E0;text-align:center;white-space:nowrap;
display:flex;align-items:center;justify-content:center;gap:2.5px}
.pico{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round;color:#2DD4BF;flex-shrink:0}
.pico-r{color:#FB7185}
.pico-g{color:#34D399}
.uv-f{font-style:normal;color:#FB7185;margin-right:1px}
/* 备注列：带边框输入框外观；有备注=金色边框 */
.pt-note{display:block;min-height:17px;box-sizing:border-box;font-size:10.5px;color:#8B99B2;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
border:1px solid rgba(120,135,170,.28);border-radius:6px;padding:2px 7px;background:rgba(13,20,36,.6)}
.pt-note.note-on{border-color:rgba(217,170,70,.55);background:rgba(120,86,20,.14);color:#E9D9B0}
.nn-d{font-style:normal;color:#C99A4D;margin-right:2px}
/* PHP 版本：蓝紫渐变实心胶囊 */
.pt-ver{font-size:10.5px;color:#9AA7BE;white-space:nowrap}
.tv{font-style:normal;display:inline-block;background:linear-gradient(135deg,#4F46E5,#6366F1);color:#fff;
padding:1px 7px;border-radius:6px;font-weight:700;font-size:10px;box-shadow:0 2px 6px rgba(79,70,229,.35)}
/* SSL 到期：未部署=灰框；剩 N 天=绿色胶囊 */
.pt-ssl{font-size:10.5px;white-space:nowrap}
.pt-ssl i{font-style:normal;display:inline-block;border-radius:6px;padding:1px 7px;font-size:10px;white-space:nowrap}
.ssl-off{color:#6B7790;border:1px solid rgba(120,135,160,.25);background:rgba(148,163,184,.05)}
.ssl-ok{color:#34D399;border:1px solid rgba(16,185,129,.45);background:rgba(16,185,129,.14);font-weight:700}
/* 网站到期：日期=绿色实心胶囊；永久=绿色加粗字 */
.pt-exp{font-size:10.5px;white-space:nowrap}
.pt-exp i{font-style:normal;white-space:nowrap}
.date-pill{display:inline-block;background:linear-gradient(135deg,#10B981,#059669);color:#fff;
border-radius:6px;padding:2px 7px;font-weight:700;font-size:10px;box-shadow:0 2px 7px rgba(16,185,129,.35)}
.date-forever{display:block;text-align:center;color:#34D399;font-weight:700;font-size:10.5px}
.pt-ct{font-size:10.5px;color:#8B99B2;white-space:nowrap}
.t-green{color:#34D399}.t-amber{color:#FBBF24}.t-red{color:#F87171}.t-gray{color:#64748B}
/* 操作列：设置=青绿实心 / 备份=琥珀实心 / 删除=玫红实心，深色字全圆角小胶囊 */
.pt-ops{display:flex;gap:4px;justify-content:flex-end}
.pt-ops i{font-style:normal;font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;cursor:default;white-space:nowrap}
.op-set{color:#06301F;background:linear-gradient(135deg,#10B981,#0EA97E)}
.op-bak{color:#3A2404;background:linear-gradient(135deg,#F59E0B,#E08A08)}
.op-del{color:#3A0A14;background:linear-gradient(135deg,#F43F5E,#E11D48)}
/* 表头里的备注/空间保持纯文字 */
.pt-head .pt-note{border:none;background:transparent;padding:0;min-height:0;color:#7B8AA3}
.pt-head .pt-space{color:#7B8AA3}
.pt-head .pt-risk{color:#7B8AA3}
/* —— 智能拦截 —— */
.gd-status{display:flex;justify-content:space-between;gap:16px;background:linear-gradient(100deg,rgba(6,182,212,.06),rgba(99,102,241,.05));
border:1px solid rgba(148,163,184,.12);border-radius:14px;padding:16px 20px;margin-bottom:13px}
.gd-status-l h4{margin:0;font-size:16px;color:#E6ECF6;font-weight:800;display:flex;align-items:center;gap:9px}
.gd-status-l p{margin:6px 0 0;font-size:11.5px;color:#9AA7BE}
.gd-status-l b{color:#E6ECF6}
.gd-chips{margin-top:8px}
.gd-tip{color:#64748B !important;margin-top:8px !important}
.gd-pulse{width:9px;height:9px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.18);animation:blink 1.6s infinite}
.gd-gauges{display:flex;gap:14px;flex-shrink:0}
.gd-g{display:flex;flex-direction:column;align-items:center;gap:5px}
.gd-g em{font-style:normal;font-size:10.5px;color:#8B99B2}
.ring{position:relative;width:68px;height:68px;border-radius:50%;
background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(148,163,184,.13) 0);display:flex;align-items:center;justify-content:center}
.ring span{width:52px;height:52px;border-radius:50%;background:#10182A;display:flex;align-items:center;justify-content:center;
font-size:13px;font-weight:800;color:var(--c)}
.ring small{font-size:9px;margin-left:1px}
.gd-ban,.gd-run{width:68px;height:68px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.gd-ban{background:linear-gradient(135deg,rgba(190,18,60,.25),rgba(127,29,29,.3));border:1px solid rgba(244,63,94,.3)}
.gd-ban span{font-size:20px;font-weight:800;color:#FB7185;line-height:1}
.gd-ban em{font-size:10px;color:#FDA4AF;font-style:normal}
.gd-run{background:linear-gradient(135deg,rgba(5,150,105,.3),rgba(6,78,59,.35));border:1px solid rgba(16,185,129,.4)}
.gd-run span{font-size:15px;font-weight:800;color:#6EE7B7}
.gd-run em{font-size:10px;color:#A7F3D0;font-style:normal}
.gd-hero{position:relative;overflow:hidden;display:flex;gap:16px;align-items:center;
background:linear-gradient(100deg,rgba(49,46,129,.22),rgba(15,23,42,.6) 55%);
border:1px solid rgba(99,102,241,.28);border-radius:14px;padding:18px 20px;margin-bottom:13px}
.gd-hero::after{content:'';position:absolute;right:-70px;top:-80px;width:230px;height:230px;border-radius:50%;
background:rgba(129,140,248,.16);pointer-events:none}
.gd-shield{width:58px;height:58px;border-radius:16px;background:linear-gradient(135deg,rgba(245,158,11,.25),rgba(245,158,11,.08));
border:1px solid rgba(245,158,11,.3);display:flex;align-items:center;justify-content:center;color:#FBBF24;flex-shrink:0}
.gd-shield svg{width:29px;height:29px}
.gd-hero-l{flex:1;min-width:0;position:relative;z-index:1}
.gd-hero-l h4{margin:0;font-size:19px;font-weight:800;color:#E6ECF6;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.gd-hero-l h4>b{background:linear-gradient(90deg,#FBBF24,#F59E0B);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.g-tag{font-style:normal;font-size:10px;font-weight:600;color:#94A3B8;background:rgba(148,163,184,.1);border:1px solid rgba(148,163,184,.15);
border-radius:99px;padding:3px 10px}
.g-tag-green{color:#6EE7B7;background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3)}
.gd-hero-l p{margin:8px 0 0;font-size:12px;color:#A8B6CC;line-height:1.6}
.gd-notice{margin-top:10px;font-size:11px;color:#86EFAC;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.22);
border-radius:8px;padding:7px 12px}
.gd-hero-r{display:flex;flex-direction:column;gap:8px;width:150px;flex-shrink:0;position:relative;z-index:1}
.gd-mini{background:linear-gradient(135deg,rgba(6,182,212,.22),rgba(8,145,178,.08) 55%,rgba(2,6,23,.85));
border:1px solid rgba(34,211,238,.35);border-radius:10px;padding:8px 12px;position:relative;overflow:hidden;
box-shadow:0 6px 14px rgba(22,78,99,.4)}
.gd-mini::after{content:'';position:absolute;right:-20px;top:-22px;width:64px;height:64px;border-radius:50%;
background:rgba(34,211,238,.5);pointer-events:none}
.gd-mini span{font-size:10px;color:#8B99B2;display:block;white-space:nowrap}
.gd-mini b{font-size:18px;color:#E6ECF6;font-weight:800}
.gd-etabs{display:flex;gap:8px;margin-bottom:13px}
.gd-etab{font-size:12.5px;font-weight:700;color:#94A3B8;background:#0F1729;border:1px solid rgba(148,163,184,.12);
border-radius:10px;padding:8px 15px;cursor:default;display:inline-flex;gap:7px;align-items:center}
.gd-etab i{font-style:normal;font-size:10px;background:rgba(148,163,184,.12);border-radius:99px;padding:1px 7px;color:#CBD5E1}
.gd-etab i.t-green{background:rgba(16,185,129,.15);color:#6EE7B7}
.gd-etab i.t-red{background:rgba(239,68,68,.15);color:#FCA5A5}
.gd-etab.is-on{background:linear-gradient(135deg,#F59E0B,#F97316);border-color:transparent;color:#fff;box-shadow:0 8px 18px rgba(245,158,11,.3)}
.gd-etab.is-on i{background:rgba(255,255,255,.22);color:#fff}
.gd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.gc{position:relative;overflow:hidden;background:#10182A;border:1px solid rgba(148,163,184,.14);border-radius:13px;padding:14px 15px}
.gc::after{content:'';position:absolute;right:-30px;top:-32px;width:104px;height:104px;border-radius:50%;pointer-events:none}
.gc-blue{border-color:rgba(96,165,250,.40);background:linear-gradient(135deg,rgba(59,130,246,.24),rgba(37,99,235,.08) 55%,rgba(2,6,23,.85))}
.gc-amber{border-color:rgba(251,191,36,.40);background:linear-gradient(135deg,rgba(245,158,11,.24),rgba(217,119,6,.08) 55%,rgba(2,6,23,.85))}
.gc-red{border-color:rgba(251,113,133,.40);background:linear-gradient(135deg,rgba(244,63,94,.24),rgba(225,29,72,.08) 55%,rgba(2,6,23,.85))}
.gc-cyan{border-color:rgba(34,211,238,.40);background:linear-gradient(135deg,rgba(6,182,212,.24),rgba(8,145,178,.08) 55%,rgba(2,6,23,.85))}
.gc-purple{border-color:rgba(167,139,250,.40);background:linear-gradient(135deg,rgba(139,92,246,.24),rgba(124,58,237,.08) 55%,rgba(2,6,23,.85))}
.gc-green{border-color:rgba(52,211,153,.40);background:linear-gradient(135deg,rgba(16,185,129,.24),rgba(5,150,105,.08) 55%,rgba(2,6,23,.85))}
.gc-blue::after{background:rgba(96,165,250,.55)}
.gc-amber::after{background:rgba(251,191,36,.55)}
.gc-red::after{background:rgba(251,113,133,.55)}
.gc-cyan::after{background:rgba(34,211,238,.55)}
.gc-purple::after{background:rgba(167,139,250,.55)}
.gc-green::after{background:rgba(52,211,153,.55)}
.gc-ico{position:relative;z-index:1;font-size:16px}
.gc h5{position:relative;z-index:1;margin:8px 0 0;font-size:14.5px;color:#E6ECF6;font-weight:800;display:flex;flex-direction:column;line-height:1.3}
.gc h5 small{font-size:11px;color:#8B99B2;font-weight:600;margin-top:1px}
.gc p{position:relative;z-index:1;margin:7px 0 0;font-size:11.5px;color:#9AA7BE;line-height:1.6;min-height:36px}
.gc em{position:relative;z-index:1;display:inline-block;margin-top:9px;font-style:normal;font-size:10.5px;color:#8B99B2;
background:rgba(148,163,184,.08);border:1px solid rgba(148,163,184,.12);border-radius:7px;padding:3px 9px}
.gc em.t-green{color:#6EE7B7;background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.2)}
.gc em.t-red{color:#FCA5A5;background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.2)}
/* —— 板块底部免费/付费说明 + CTA —— */
.ps-bottom{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.ps-freebox,.ps-paidbox{border-radius:14px;padding:20px 24px}
.ps-freebox{background:linear-gradient(120deg,rgba(16,185,129,.1),rgba(6,182,212,.06));border:1px solid rgba(16,185,129,.28)}
.ps-paidbox{background:linear-gradient(120deg,rgba(99,102,241,.12),rgba(168,85,247,.06));border:1px solid rgba(99,102,241,.28)}
.ps-freebox b,.ps-paidbox b{font-size:15.5px;font-weight:800}
.ps-freebox b{color:#6EE7B7}
.ps-paidbox b{color:#A5B4FC}
.ps-freebox p,.ps-paidbox p{margin:8px 0 0;font-size:13px;line-height:1.8;color:#B3C0D6}
.ps-freebox em{font-style:normal;color:#6EE7B7;font-weight:600}
.ps-cta{display:flex;justify-content:center;gap:14px;margin-top:26px;flex-wrap:wrap}
/* 工单弹窗 */
.tk-overlay{position:fixed;inset:0;z-index:10000;background:rgba(5,8,18,.62);backdrop-filter:blur(6px);
display:flex;align-items:center;justify-content:center;padding:20px;animation:psFade .22s ease}
.tk-modal{width:580px;max-width:100%;max-height:90vh;overflow-y:auto;background:linear-gradient(180deg,#111827,#0F172A);
border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:30px 30px 26px;box-shadow:0 28px 70px rgba(0,0,0,.55);
animation:tkUp .32s cubic-bezier(.22,.61,.36,1);position:relative}
@keyframes tkUp{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}
.tk-x{position:absolute;right:16px;top:14px;width:32px;height:32px;border-radius:9px;border:1px solid rgba(148,163,184,.15);
background:rgba(148,163,184,.06);color:#94A3B8;font-size:16px;cursor:pointer;line-height:1}
.tk-x:hover{color:#fff;border-color:rgba(148,163,184,.35)}
.tk-head{display:flex;align-items:center;gap:13px;margin-bottom:20px}
.tk-ico{width:48px;height:48px;border-radius:13px;background:linear-gradient(135deg,#4F46E5,#6366F1);display:flex;align-items:center;justify-content:center;font-size:23px;
box-shadow:0 8px 20px rgba(99,102,241,.4);flex-shrink:0}
.tk-title{font-size:19px;font-weight:800;color:#F8FAFC}
.tk-sub{font-size:12.5px;color:#8B99B2;margin-top:2px}
.tk-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tk-grid .full{grid-column:1/-1}
.tk-grid input,.tk-grid select,.tk-grid textarea{width:100%;box-sizing:border-box;padding:12px 14px;border:1.5px solid rgba(148,163,184,.16);border-radius:11px;
font-size:14px;font-family:var(--font);color:#F1F5F9;background:rgba(255,255,255,.035);transition:.2s;outline:none}
.tk-grid input:focus,.tk-grid select:focus,.tk-grid textarea:focus{border-color:#6366F1;box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.tk-grid textarea{min-height:104px;resize:vertical}
.tk-submit{grid-column:1/-1;background:linear-gradient(135deg,#4F46E5,#6366F1);color:#fff;border:none;padding:14px;border-radius:11px;
font-size:15.5px;font-weight:700;cursor:pointer;font-family:var(--font);box-shadow:0 10px 24px rgba(99,102,241,.42);transition:.22s}
.tk-submit:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(99,102,241,.52)}
.tk-done{text-align:center;padding:26px 10px 14px}
.tk-done .ok{width:62px;height:62px;margin:0 auto 16px;border-radius:50%;background:rgba(16,185,129,.1);color:#34D399;
display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px rgba(16,185,129,.08);font-size:30px}
.tk-done h4{margin:0 0 6px;font-size:18px;color:#F1F5F9}
.tk-done p{margin:0;font-size:13px;color:#94A3B8;line-height:1.7}
@media(max-width:768px){
.ps-bottom{grid-template-columns:1fr}
.ps-tabs-hint{width:100%;text-align:center;margin-left:0}
.tk-grid{grid-template-columns:1fr}
}
/* ============================================================
从 index.html 迁入的零散样式（原内联