前端代码：纯 CSS 赛博朋克霓虹风格卡片

深黑底色叠加蓝绿霓虹高光，展示一张“纯 CSS 霓虹风格卡片”首屏：标题、卖点列表与双按钮在赛博光晕下轻微浮动，可突出“高效、安全、透明”的科技或物流调性。纯 HTML + CSS，无框架依赖，几秒钟即可将霓虹质感嵌入演示页、落地页或展厅大屏。

模板概览

• 视觉语言：深色赛博基底 + 蓝绿霓虹描边/光晕，强调科技速度与安全信任。
• 布局结构：中央 Hero 卡片，含品牌标记、标题、副文案、三条卖点与双按钮 CTA（示例按钮指向 kstheme.com）。
• 交互动效：按钮悬停抬升与霓虹描边高亮，卡片背景微光随鼠标轻亮，增强沉浸感。
• 字体与气质：几何无衬线配合圆角和高光边框，未来感与易读性并存。

适用人群与场景

• 物流、供应链、物联网 SaaS 团队：用于方案路演、产品功能预告或数据大屏 Demo。
• 科技/智造品牌：需要“可信、安全、敏捷”感知的首页 Hero 或活动落地页。
• 创业者与市场团队：在展会、投融资路演中，用极简代码快速搭建视觉亮点。
• 教程与课程：作为“CSS + SVG 动效”教学示例，帮助学生理解前端动效编排。

文件结构

• index.html：页面骨架与文案，可直接在浏览器打开查看效果。
• style.css：主题样式与布局，包含背景光晕、霓虹按钮和列表标记的细节。

使用方式

1. 直接双击 index.html，或通过本地静态服务器打开即可预览。
2. 根据品牌或场景调整标题、三行亮点文案以及按钮链接（当前 CTA 为 KS 主题示例，可替换为产品体验页）。
3. 如需替换配色，可在 style.css 中修改背景、渐变与高光色值（当前主色为蓝绿霓虹）。
4. 需要更强动效时，可在 .hero-panel::after 里叠加更多径向光晕，或为 CTA 添加粒子/描边动画。

自定义建议

• CTA 行为：将主按钮链接到产品体验/预约表单，副按钮用于展示技术方案或白皮书。
• 适配移动端：已加入基础响应式规则（640px 以下按钮纵向排列），可按需调整内边距与字体大小。
• 品牌适配：可替换品牌标记文本或引入自定义字体，保持霓虹高光与圆角边框以延续整体氛围。