/* ---- 产品主题色变量 ---- */
:root {
--src-from: #4F46E5;
--src-to: #7C3AED;
--grd-from: #10B981;
--grd-to: #34D399;
--abid-from: #F59E0B;
--abid-to: #F97316;
--sonar-from: #8B5CF6;
--sonar-to: #A78BFA;
}
/* ---- Hero ---- */
.prod-hero {
padding: 140px 0 64px;
text-align: center;
background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
}
.prod-hero h1 {
font-size: 44px;
font-weight: 700;
line-height: 1.2;
color: var(--wd-navy);
margin-bottom: 16px;
}
.prod-hero h1 em {
font-style: normal;
background: linear-gradient(135deg, var(--src-from), var(--src-to));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.prod-hero p {
font-size: 18px;
color: var(--wd-slate);
max-width: 560px;
margin: 0 auto;
}
/* ---- 产品网格 ---- */
.prod-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
max-width: 1200px;
margin: 0 auto;
padding: 64px 24px 80px;
}
/* ---- 产品卡片 ---- */
.prod-card {
background: #fff;
border: 1px solid var(--wd-border);
border-radius: 20px;
padding: 40px 36px 36px;
position: relative;
overflow: hidden;
transition: transform 0.35s cubic-bezier(0.4,0,0.2,1),
box-shadow 0.35s cubic-bezier(0.4,0,0.2,1);
}
.prod-card:hover {
transform: translateY(-8px);
box-shadow: 0 24px 48px rgba(15,23,42,0.10);
}
/* 顶部彩条 */
.prod-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
}
.prod-card--src::before  { background: linear-gradient(90deg, var(--src-from), var(--src-to)); }
.prod-card--grd::before  { background: linear-gradient(90deg, var(--grd-from), var(--grd-to)); }
.prod-card--abid::before { background: linear-gradient(90deg, var(--abid-from), var(--abid-to)); }
.prod-card--sonar::before{ background: linear-gradient(90deg, var(--sonar-from), var(--sonar-to)); }
/* ---- 卡片头部：图标 + 品牌名 ---- */
.prod-card__head {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 28px;
}
.prod-card__icon {
width: 52px;
height: 52px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.prod-card--src  .prod-card__icon { background: linear-gradient(135deg, var(--src-from), var(--src-to)); }
.prod-card--grd  .prod-card__icon { background: linear-gradient(135deg, var(--grd-from), var(--grd-to)); }
.prod-card--abid .prod-card__icon { background: linear-gradient(135deg, var(--abid-from), var(--abid-to)); }
.prod-card--sonar .prod-card__icon{ background: linear-gradient(135deg, var(--sonar-from), var(--sonar-to)); }
/* CSS 几何图标 */
.prod-card__icon svg {
width: 26px;
height: 26px;
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.prod-card__brand {
display: flex;
flex-direction: column;
}
.prod-card__name {
font-size: 22px;
font-weight: 700;
color: var(--wd-navy);
line-height: 1.3;
}
.prod-card__code {
font-size: 13px;
font-weight: 500;
color: #94A3B8;
letter-spacing: 0.5px;
}
/* ---- 痛点 / 解决方案列表 ---- */
.prod-card__section {
margin-bottom: 20px;
}
.prod-card__section-title {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 10px;
}
.prod-card--src  .prod-card__section-title--pain  { color: var(--src-from); }
.prod-card--grd  .prod-card__section-title--pain  { color: var(--grd-from); }
.prod-card--abid .prod-card__section-title--pain  { color: var(--abid-from); }
.prod-card--sonar .prod-card__section-title--pain { color: var(--sonar-from); }
.prod-card--src  .prod-card__section-title--solve  { color: var(--src-to); }
.prod-card--grd  .prod-card__section-title--solve  { color: var(--grd-to); }
.prod-card--abid .prod-card__section-title--solve  { color: var(--abid-to); }
.prod-card--sonar .prod-card__section-title--solve { color: var(--sonar-to); }
.prod-card__list {
list-style: none;
padding: 0;
margin: 0;
}
.prod-card__list li {
font-size: 14px;
color: var(--wd-navy);
line-height: 1.7;
padding-left: 22px;
position: relative;
margin-bottom: 4px;
}
.prod-card__list li::before {
position: absolute;
left: 0;
top: 0;
font-size: 13px;
font-weight: 700;
}
.prod-card__list--pain li::before {
content: '\00D7';  /* × */
color: #EF4444;
}
.prod-card__list--solve li::before {
content: '\2713';  /* ✓ */
font-weight: 700;
}
.prod-card--src  .prod-card__list--solve li::before { color: var(--src-from); }
.prod-card--grd  .prod-card__list--solve li::before { color: var(--grd-from); }
.prod-card--abid .prod-card__list--solve li::before { color: var(--abid-from); }
.prod-card--sonar .prod-card__list--solve li::before{ color: var(--sonar-from); }
/* ---- 一句话收益 ---- */
.prod-card__gain {
font-size: 15px;
font-weight: 600;
color: var(--wd-navy);
padding: 14px 18px;
border-radius: 10px;
margin-bottom: 24px;
line-height: 1.6;
}
.prod-card--src  .prod-card__gain { background: #EEF2FF; color: var(--src-from); }
.prod-card--grd  .prod-card__gain { background: #ECFDF5; color: #059669; }
.prod-card--abid .prod-card__gain { background: #FFFBEB; color: #D97706; }
.prod-card--sonar .prod-card__gain{ background: #F5F3FF; color: var(--sonar-from); }
/* ---- CTA ---- */
.prod-card__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 24px;
border-radius: 10px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
border: none;
text-decoration: none;
color: #fff;
transition: transform 0.2s, box-shadow 0.2s;
}
.prod-card__cta:hover {
transform: translateY(-2px);
}
.prod-card--src  .prod-card__cta { background: linear-gradient(135deg, var(--src-from), var(--src-to)); box-shadow: 0 4px 14px rgba(79,70,229,0.25); }
.prod-card--grd  .prod-card__cta { background: linear-gradient(135deg, var(--grd-from), var(--grd-to)); box-shadow: 0 4px 14px rgba(16,185,129,0.25); }
.prod-card--abid .prod-card__cta { background: linear-gradient(135deg, var(--abid-from), var(--abid-to)); box-shadow: 0 4px 14px rgba(245,158,11,0.25); }
.prod-card--sonar .prod-card__cta{ background: linear-gradient(135deg, var(--sonar-from), var(--sonar-to)); box-shadow: 0 4px 14px rgba(139,92,246,0.25); }
.prod-card--src  .prod-card__cta:hover { box-shadow: 0 8px 20px rgba(79,70,229,0.35); }
.prod-card--grd  .prod-card__cta:hover { box-shadow: 0 8px 20px rgba(16,185,129,0.35); }
.prod-card--abid .prod-card__cta:hover { box-shadow: 0 8px 20px rgba(245,158,11,0.35); }
.prod-card--sonar .prod-card__cta:hover{ box-shadow: 0 8px 20px rgba(139,92,246,0.35); }
/* ---- 底部理念区 ---- */
.prod-philosophy {
text-align: center;
padding: 80px 24px 100px;
background: var(--wd-light);
}
.prod-philosophy h2 {
font-size: 32px;
font-weight: 700;
color: var(--wd-navy);
margin-bottom: 8px;
}
.prod-philosophy h2 em {
font-style: normal;
background: linear-gradient(135deg, var(--src-from), var(--src-to));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.prod-philosophy__sub {
font-size: 16px;
color: var(--wd-slate);
margin-bottom: 48px;
}
.prod-philosophy__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
max-width: 960px;
margin: 0 auto;
}
.prod-philosophy__item {
padding: 20px 16px;
border-radius: 14px;
background: #fff;
border: 1px solid var(--wd-border);
}
.prod-philosophy__item strong {
display: block;
font-size: 16px;
font-weight: 700;
margin-bottom: 6px;
}
.prod-philosophy__item p {
font-size: 13px;
color: var(--wd-slate);
line-height: 1.6;
}
.prod-philosophy__item--src strong  { color: var(--src-from); }
.prod-philosophy__item--grd strong  { color: var(--grd-from); }
.prod-philosophy__item--abid strong { color: var(--abid-from); }
.prod-philosophy__item--sonar strong{ color: var(--sonar-from); }
/* ---- 定价对比表 ---- */
.prod-compare { padding: 80px 24px; background: #F8FAFC; }
.prod-compare h2 { text-align: center; font-size: 32px; font-weight: 700; color: var(--navy); margin-bottom: 12px; }
.prod-compare-sub { text-align: center; color: var(--slate); font-size: 16px; max-width: 560px; margin: 0 auto 48px; }
.prod-compare-table { width: 100%; max-width: 960px; margin: 0 auto; border-collapse: collapse; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 24px rgba(15,23,42,.06); }
.prod-compare-table thead th { padding: 16px 20px; text-align: center; font-size: 15px; font-weight: 700; color: #fff; }
.prod-compare-table thead th:first-child { background: var(--navy); text-align: left; border-radius: 0; }
.prod-compare-table thead th:nth-child(2) { background: var(--src-from); }
.prod-compare-table thead th:nth-child(3) { background: #5B21B6; }
.prod-compare-table thead th:nth-child(4) { background: var(--abid-from); }
.prod-compare-table tbody td { padding: 14px 20px; text-align: center; font-size: 14px; border-bottom: 1px solid #E2E8F0; color: var(--slate); }
.prod-compare-table tbody td:first-child { text-align: left; font-weight: 600; color: var(--navy); }
.prod-compare-table tbody tr:last-child td { border-bottom: none; }
.prod-compare-table .check { color: #10B981; font-weight: 700; }
.prod-compare-table .cross { color: #CBD5E1; }
.prod-compare-table .price-row td { font-size: 22px; font-weight: 800; color: var(--navy); padding: 20px; }
.prod-compare-table .price-row td small { font-size: 13px; font-weight: 400; color: var(--slate); }
.prod-compare-cta { text-align: center; margin-top: 32px; }

/* ---- 响应式 ---- */
@media (max-width: 768px) {
.prod-hero { padding: 120px 24px 48px; }
.prod-hero h1 { font-size: 30px; }
.prod-hero p { font-size: 16px; }
.prod-grid {
grid-template-columns: 1fr;
padding: 48px 24px 60px;
gap: 24px;
}
.prod-card { padding: 32px 28px 28px; }
.prod-card__name { font-size: 20px; }
.prod-philosophy { padding: 60px 24px 80px; }
.prod-philosophy h2 { font-size: 26px; }
.prod-philosophy__grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}
@media (max-width: 480px) {
.prod-philosophy__grid {
grid-template-columns: 1fr;
}
}