页面顶部是一个中心对齐的 hero 区域，包含新品标签、产品名称和简短描述。用 .product-hero 容器包裹。

<div class="product-hero">
    <span class="badge">🔥 新品上市</span>
    <h1>CloudSync Pro</h1>
    <p>Next-generation cloud sync platform.</p>
</div>

使用 Flexbox 将页面分成左右两栏，左侧放产品图片占位符，右侧放价格、评分、描述和功能列表。移动端用 flex-direction: column 堆叠。

.product-content {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}
.product-image, .product-details { flex: 1; }

@media (max-width: 640px) {
    .product-content { flex-direction: column; }
}

用 ::before 伪元素在每个功能项前添加绿色对勾 ✓，无需额外图标库。样式简洁且语义清晰。

.features li::before {
    content: '✓ ';
    color: #059669;
    font-weight: 700;
}

主按钮用绿色实心背景（Primary），次按钮用绿色空心边框（Secondary）。悬停时次按钮填充颜色，形成视觉层次。

.btn-primary {
    background: #059669; color: white; border: none;
}
.btn-primary:hover { background: #047857; }

.btn-secondary {
    background: transparent; color: #059669;
    border: 2px solid #059669;
}
.btn-secondary:hover { background: #059669; color: white; }

你已成功创建了一个专业的产品展示页面。Hero 区域吸引眼球，双栏布局清晰展示产品信息，双按钮设计引导用户行动。全部纯 HTML + CSS。

💡 扩展思路：添加定价表格（pricing table）、客户评价轮播（CSS animation）、FAQ 折叠区域等。