:root { --bg: #F6F5F3; --text: #1F1F1F; --accent: #C9B8A6; --card-bg: #FFFFFF; }
        body { background-color: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; scroll-behavior: smooth; }
        h1, h2, .serif { font-family: 'Playfair Display', serif; }
        
        .hero-image-container {
            background-image: url('https://uspm.aosomcdn.com/aosomweb/activity/UK/content/019-2.jpg?auto=format&fit=crop&w=1600&q=80');
            background-size: cover; background-position: center; height: 100%; width: 100%;
        }

        /* 诊断标签与公式样式 */
        .diag-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; padding: 2px 8px; border: 1px solid var(--accent); color: var(--accent); margin-bottom: 1.5rem; display: inline-block; }
        .formula-box { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; margin-top: 1.5rem; flex-wrap: wrap; }
        .formula-item { background: #FFF; padding: 4px 12px; border-radius: 20px; border: 1px solid #EEE; color: var(--text); font-weight: 500; }

        .content-section { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: flex-start; margin-bottom: 4rem; }
        @media (max-width: 1024px) { .content-section { grid-template-columns: 1fr; gap: 2rem; } }

        .component-label { font-size: 10px; text-transform: uppercase; color: var(--accent); font-weight: 800; letter-spacing: 0.2em; margin-bottom: 1.5rem; display: block; border-bottom: 1px solid #EEE; padding-bottom: 8px; }
        .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-bottom: 10rem; }
        
        .component-card { background: var(--card-bg); padding: 24px; transition: all 0.4s ease; cursor: pointer; display: flex; flex-direction: column; border: 1px solid transparent; height: 100%; }
        .component-card:hover { border-color: #E5E5E5; box-shadow: 0 20px 40px rgba(0,0,0,0.02); }
        
        .img-wrapper { background: #F9F9F9; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; overflow: hidden; }
        .component-card img { transition: transform 0.6s ease; width: 85%; }
        .component-card:hover img { transform: scale(1.05); }

        .feature-list { margin-bottom: 1.5rem; border-top: 1px solid #F0F0F0; padding-top: 1.2rem; }
        .feature-item-detail { font-size: 11px; color: #666; margin-bottom: 8px; display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
        .feature-item-detail span { color: var(--accent); font-weight: bold; }

        .product-title { font-size: 15px; font-weight: 600; margin-bottom: 0.4rem; letter-spacing: -0.01em; }

        .cta-link { margin-top: auto; padding-top: 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; color: var(--text); }
        .cta-circle { width: 20px; height: 20px; border: 1px solid #DDD; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
        .component-card:hover .cta-circle { border-color: var(--text); background: var(--text); color: white; transform: translateX(4px); }
        /* 产品功能点列表样式 */
.feature-list { 
    margin-bottom: 1.5rem; 
    border-top: 1px solid #F0F0F0; /* 顶部的灰色分割线 */
    padding-top: 1.2rem; 
}

.feature-item-detail { 
    font-size: 11px; /* 较小的字体，显得精致 */
    color: #666; 
    margin-bottom: 8px; 
    display: flex; 
    align-items: flex-start; 
    gap: 8px; 
    line-height: 1.4; 
}

.feature-item-detail span { 
    color: var(--accent); /* + 号的颜色 */
    font-weight: bold; 
}

/* 底部 Discover 链接样式 */
.cta-link { 
    margin-top: auto; 
    padding-top: 12px; 
    font-size: 10px; 
    font-weight: 700; 
    letter-spacing: 0.1em; 
    text-transform: uppercase; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    color: var(--text); 
    text-decoration: none; /* 去掉链接下划线 */
}

.cta-circle { 
    width: 20px; 
    height: 20px; 
    border: 1px solid #DDD; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: all 0.3s ease; 
}

/* 鼠标悬停时的动画：圆圈变黑，箭头右移 */
.cta-link:hover .cta-circle { 
    border-color: var(--text); 
    background: var(--text); 
    color: white; 
    transform: translateX(4px); 
}