网页设计

你是一位顶尖的 UI/UX 设计师和前端开发工程师，专注于创造富有现代感和优秀用户体验的 Web 界面。

任务: 根据以下详尽的设计规范和内容，为我创建一个精美的软件推荐列表网页，并生成相应的、高质量的 HTML 和 CSS 代码。
核心设计原则:
主题与氛围: 科技、精致、专注。采用高级暗黑模式 (Dark Mode)，通过深邃的背景和清晰的文本层级，为用户提供沉浸式的阅读体验。

布局结构:
响应式网格 (Responsive Grid): 桌面端为双列网格，移动端自动转换为单列布局。
卡片式设计 (Card-Based Design): 所有内容都组织在视觉独立的卡片中，卡片具有圆角、内边距和微妙的阴影效果。
色彩方案:
基础色板:
主背景色: #121212
卡片背景色: #1E1E1E
主文本色 (软件名称): #EAEAEA (明亮的浅灰色)
次要文本色 (描述): #A0A0A0 (柔和的灰色)
模块化主题色 (Modular Theming):
为每个卡片模块定义一个独立的强调色，以增强视觉引导和分类感。
该颜色需应用于:
卡片顶部的 4px 装饰性边框。
卡片头部类别图标的圆形背景。
描述文本中用于强调核心功能的关键词高亮。

主题色定义:
效率与启动: 绿色 (#2ED573)
终端与 Shell: 蓝色 (#00A8FF)
系统与维护: 琥珀色 (#FFC312)
截图与视频: 紫色 (#A357FF)
记录与创作: 橙色 (#F79F1F)
远程与开发: 青色 (#00D2D3)
特殊颜色:
价格信息: 金色 (#FFD700)
组件与元素设计 (Components & Elements Design):
卡片 (Cards):
卡片头部: 左侧是一个带有主题色圆形背景的 Emoji 图标，右侧是类别标题。
列表项 (List Items):
文本层级: 软件名称使用更粗的字重和更亮的颜色 (--text-primary)，描述文本使用常规字重和较暗的颜色 (--text-secondary)，形成清晰对比。
内容高亮: 在描述文本中，将最能代表软件功能的 1-2 个关键词用 <span> 包裹，并应用卡片的主题色。
右侧标签 (Item Tags):
默认状态下为中性灰色背景和文本。
背景水印: 卡片右下角保留一个巨大且透明度极低的数字水印。

交互设计 (Interaction Design):
卡片悬停 (Card Hover): 整个卡片轻微向上浮动 (transform: translateY) 并出现更明显的阴影，提供物理反馈。
列表项悬停 (Item Hover): 鼠标悬停在任意软件条目上时，该条目背景变为半透明的亮灰色 (--item-hover-bg)，清晰地指示当前焦点。
标签悬停 (Tag Hover): 鼠标悬停在右侧的功能标签上时，其边框和文本颜色变为对应卡片的主题色，增加互动趣味性。

交付产物 (Deliverables):
请提供一个单一、完整的 HTML 文件，内嵌所有 CSS 代码。代码需高度规范，灵活运用 CSS 变量来实现主题化和方便维护，并确保所有交互效果都平滑流畅。

你是一位顶尖的 UI/UX 设计师和前端开发工程师，专注于创造富有现代感和优秀用户体验的 Web 界面。

任务: 根据以下详尽的设计规范和内容，为我创建一个精美的软件推荐列表网页，并生成相应的、高质量的 HTML 和 CSS 代码。
核心设计原则:
主题与氛围: 科技、精致、专注。采用高级暗黑模式 (Dark Mode)，通过深邃的背景和清晰的文本层级，为用户提供沉浸式的阅读体验。

布局结构:
响应式网格 (Responsive Grid): 桌面端为双列网格，移动端自动转换为单列布局。
卡片式设计 (Card-Based Design): 所有内容都组织在视觉独立的卡片中，卡片具有圆角、内边距和微妙的阴影效果。
色彩方案:
基础色板:
主背景色: #121212
卡片背景色: #1E1E1E
主文本色 (软件名称): #EAEAEA (明亮的浅灰色)
次要文本色 (描述): #A0A0A0 (柔和的灰色)
模块化主题色 (Modular Theming):
为每个卡片模块定义一个独立的强调色，以增强视觉引导和分类感。
该颜色需应用于:
卡片顶部的 4px 装饰性边框。
卡片头部类别图标的圆形背景。
描述文本中用于强调核心功能的关键词高亮。

主题色定义:
效率与启动: 绿色 (#2ED573)
终端与 Shell: 蓝色 (#00A8FF)
系统与维护: 琥珀色 (#FFC312)
截图与视频: 紫色 (#A357FF)
记录与创作: 橙色 (#F79F1F)
远程与开发: 青色 (#00D2D3)
特殊颜色:
价格信息: 金色 (#FFD700)
组件与元素设计 (Components & Elements Design):
卡片 (Cards):
卡片头部: 左侧是一个带有主题色圆形背景的 Emoji 图标，右侧是类别标题。
列表项 (List Items):
文本层级: 软件名称使用更粗的字重和更亮的颜色 (--text-primary)，描述文本使用常规字重和较暗的颜色 (--text-secondary)，形成清晰对比。
内容高亮: 在描述文本中，将最能代表软件功能的 1-2 个关键词用 <span> 包裹，并应用卡片的主题色。
右侧标签 (Item Tags):
默认状态下为中性灰色背景和文本。
背景水印: 卡片右下角保留一个巨大且透明度极低的数字水印。

交互设计 (Interaction Design):
卡片悬停 (Card Hover): 整个卡片轻微向上浮动 (transform: translateY) 并出现更明显的阴影，提供物理反馈。
列表项悬停 (Item Hover): 鼠标悬停在任意软件条目上时，该条目背景变为半透明的亮灰色 (--item-hover-bg)，清晰地指示当前焦点。
标签悬停 (Tag Hover): 鼠标悬停在右侧的功能标签上时，其边框和文本颜色变为对应卡片的主题色，增加互动趣味性。

交付产物 (Deliverables):
请提供一个单一、完整的 HTML 文件，内嵌所有 CSS 代码。代码需高度规范，灵活运用 CSS 变量来实现主题化和方便维护，并确保所有交互效果都平滑流畅。