/* 网站B：男性向情感风控创业项目 - 硬朗商务科技风 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; background: #0f1419; color: #e0e0e0; line-height: 1.8; }
a { text-decoration: none; color: inherit; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* 顶部导航 */
.header { background: rgba(15,20,25,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid #1e2a35; padding: 15px 0; position: sticky; top: 0; z-index: 100; }
.header .container { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 22px; font-weight: bold; letter-spacing: 1px; color: #fff; }
.logo span { color: #00d4ff; }
.nav { display: flex; gap: 30px; }
.nav a { color: #a0a8b0; font-size: 15px; transition: all 0.3s; }
.nav a:hover { color: #00d4ff; }
.nav .join-us { background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%); color: #0f1419 !important; padding: 6px 18px; border-radius: 4px; font-size: 13px; font-weight: bold; }

/* Hero区域 */
.hero { background: linear-gradient(135deg, #0f1419 0%, #1a2332 50%, #0f1419 100%); padding: 80px 0; text-align: center; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 50%, rgba(0,212,255,0.1) 0%, transparent 50%); }
.hero .badge { display: inline-block; background: rgba(0,212,255,0.15); border: 1px solid #00d4ff; color: #00d4ff; padding: 6px 20px; border-radius: 4px; font-size: 13px; margin-bottom: 25px; letter-spacing: 2px; }
.hero h1 { font-size: 44px; color: #fff; margin-bottom: 20px; font-weight: bold; position: relative; }
.hero h1 span { color: #00d4ff; }
.hero p { font-size: 17px; color: #8899aa; max-width: 750px; margin: 0 auto 30px; position: relative; }
.hero .stats { display: flex; justify-content: center; gap: 70px; margin-top: 40px; position: relative; }
.hero .stat-item { text-align: center; }
.hero .stat-num { font-size: 40px; font-weight: bold; color: #00d4ff; font-family: 'Courier New', monospace; }
.hero .stat-label { font-size: 13px; color: #667788; margin-top: 8px; text-transform: uppercase; letter-spacing: 1px; }

/* 文章列表 */
.section { padding: 60px 0; }
.section-title { font-size: 28px; color: #fff; margin-bottom: 35px; font-weight: bold; display: flex; align-items: center; gap: 15px; }
.section-title::before { content: ''; width: 4px; height: 28px; background: linear-gradient(180deg, #00d4ff, #0066cc); border-radius: 2px; }

.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.article-card { background: #1a2332; border: 1px solid #2a3a4a; border-radius: 8px; overflow: hidden; transition: all 0.3s; }
.article-card:hover { border-color: #00d4ff; transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,212,255,0.15); }
.article-card .card-img { height: 160px; background: linear-gradient(135deg, #1e3a5f 0%, #0d2137 100%); display: flex; align-items: center; justify-content: center; font-size: 42px; border-bottom: 1px solid #2a3a4a; }
.article-card .card-body { padding: 20px; }
.article-card .card-category { display: inline-block; background: rgba(0,212,255,0.15); color: #00d4ff; padding: 3px 12px; border-radius: 3px; font-size: 12px; margin-bottom: 12px; }
.article-card .card-title { font-size: 17px; font-weight: bold; color: #e0e0e0; margin-bottom: 10px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-card .card-desc { font-size: 14px; color: #8899aa; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-card .card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding-top: 12px; border-top: 1px solid #2a3a4a; font-size: 12px; color: #556677; }

/* 文章详情页 */
.article-detail { background: #1a2332; border: 1px solid #2a3a4a; border-radius: 8px; padding: 45px; margin: 30px 0; }
.article-detail .article-category { display: inline-block; background: rgba(0,212,255,0.15); color: #00d4ff; padding: 5px 16px; border-radius: 3px; font-size: 13px; margin-bottom: 18px; }
.article-detail h1 { font-size: 32px; color: #fff; margin-bottom: 20px; line-height: 1.4; font-weight: bold; }
.article-detail .article-meta { display: flex; gap: 25px; color: #667788; font-size: 14px; margin-bottom: 35px; padding-bottom: 20px; border-bottom: 1px solid #2a3a4a; }
.article-detail .article-content { font-size: 16px; line-height: 2; color: #c0c8d0; }
.article-detail .article-content h2 { font-size: 24px; color: #00d4ff; margin: 35px 0 15px; font-weight: bold; padding-bottom: 8px; border-bottom: 1px solid #2a3a4a; }
.article-detail .article-content h3 { font-size: 20px; color: #00d4ff; margin: 25px 0 12px; font-weight: bold; }
.article-detail .article-content p { margin-bottom: 18px; text-indent: 2em; }
.article-detail .article-content blockquote { background: #0f1a25; border-left: 3px solid #00d4ff; padding: 15px 20px; margin: 20px 0; color: #8899aa; font-style: italic; border-radius: 0 4px 4px 0; }
.article-detail .article-content ul, .article-detail .article-content ol { margin: 15px 0; padding-left: 30px; }
.article-detail .article-content li { margin-bottom: 10px; }
.article-detail .article-content strong { color: #00d4ff; }

/* 相关推荐 */
.related-section { background: #1a2332; border: 1px solid #2a3a4a; border-radius: 8px; padding: 30px; margin-bottom: 30px; }
.related-section h3 { font-size: 22px; color: #fff; margin-bottom: 20px; font-weight: bold; display: flex; align-items: center; gap: 10px; }
.related-section h3::before { content: ''; width: 3px; height: 20px; background: #00d4ff; }
.related-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.related-item { display: flex; gap: 12px; padding: 14px; background: #0f1a25; border-radius: 6px; border: 1px solid #2a3a4a; transition: all 0.3s; }
.related-item:hover { border-color: #00d4ff; }
.related-item .rel-num { font-size: 22px; font-weight: bold; color: #00d4ff; min-width: 28px; font-family: 'Courier New', monospace; }
.related-item .rel-title { font-size: 14px; color: #a0a8b0; line-height: 1.5; }

/* CTA区域 */
.cta-section { background: linear-gradient(135deg, #00d4ff 0%, #0066cc 100%); color: #0f1419; padding: 55px 0; text-align: center; border-radius: 8px; margin: 30px 0; }
.cta-section h2 { font-size: 30px; margin-bottom: 15px; font-weight: bold; }
.cta-section p { font-size: 16px; opacity: 0.9; margin-bottom: 25px; max-width: 600px; margin-left: auto; margin-right: auto; }
.cta-section .cta-btn { display: inline-block; background: #0f1419; color: #00d4ff; padding: 14px 45px; border-radius: 4px; font-size: 16px; font-weight: bold; transition: all 0.3s; letter-spacing: 1px; }
.cta-section .cta-btn:hover { background: #1a2332; transform: scale(1.03); }

/* 加入我们页面 */
.join-page { background: #1a2332; border: 1px solid #2a3a4a; border-radius: 8px; padding: 50px; margin: 30px 0; }
.join-page h1 { font-size: 36px; color: #fff; text-align: center; margin-bottom: 15px; }
.join-page h1 span { color: #00d4ff; }
.join-page .join-intro { text-align: center; color: #8899aa; font-size: 16px; margin-bottom: 45px; }
.join-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-bottom: 45px; }
.plan-card { border: 1px solid #2a3a4a; border-radius: 8px; padding: 30px; text-align: center; transition: all 0.3s; background: #0f1a25; }
.plan-card:hover { border-color: #00d4ff; transform: translateY(-5px); }
.plan-card.featured { border-color: #00d4ff; background: linear-gradient(180deg, rgba(0,212,255,0.08) 0%, #0f1a25 100%); position: relative; }
.plan-card.featured::before { content: '爆款'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #00d4ff, #0066cc); color: #0f1419; padding: 4px 22px; border-radius: 3px; font-size: 12px; font-weight: bold; letter-spacing: 2px; }
.plan-card .plan-name { font-size: 20px; font-weight: bold; color: #00d4ff; margin-bottom: 10px; }
.plan-card .plan-price { font-size: 38px; font-weight: bold; color: #fff; margin-bottom: 5px; font-family: 'Courier New', monospace; }
.plan-card .plan-price span { font-size: 14px; color: #667788; }
.plan-card .plan-desc { color: #8899aa; font-size: 14px; margin-bottom: 20px; }
.plan-card .plan-features { text-align: left; margin-bottom: 25px; }
.plan-card .plan-features li { list-style: none; padding: 8px 0; color: #a0a8b0; font-size: 14px; border-bottom: 1px dashed #2a3a4a; }
.plan-card .plan-features li::before { content: '▸ '; color: #00d4ff; font-weight: bold; }
.plan-card .plan-btn { display: block; background: linear-gradient(135deg, #00d4ff, #0066cc); color: #0f1419; padding: 12px; border-radius: 4px; font-weight: bold; transition: all 0.3s; }
.plan-card .plan-btn:hover { opacity: 0.9; transform: scale(1.02); }

/* 页脚 */
.footer { background: #0a0e12; color: #556677; padding: 40px 0 20px; margin-top: 50px; border-top: 1px solid #1a2332; }
.footer .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.footer h4 { color: #a0a8b0; margin-bottom: 15px; font-size: 16px; }
.footer p, .footer li { font-size: 14px; line-height: 2; list-style: none; }
.footer a { color: #556677; transition: color 0.3s; }
.footer a:hover { color: #00d4ff; }
.footer-bottom { text-align: center; padding-top: 20px; margin-top: 30px; border-top: 1px solid #1a2332; font-size: 13px; }

/* 响应式 */
@media (max-width: 768px) {
    .article-grid { grid-template-columns: 1fr; }
    .hero h1 { font-size: 28px; }
    .hero .stats { gap: 30px; }
    .article-detail { padding: 20px; }
    .related-list { grid-template-columns: 1fr; }
    .join-plans { grid-template-columns: 1fr; }
    .footer .container { grid-template-columns: 1fr 1fr; }
    .nav { display: none; }
}