* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; }
.header { background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%); color: white; padding: 60px 20px; text-align: center; }
.header h1 { font-size: 48px; margin-bottom: 12px; }
.header .slogan { font-size: 20px; opacity: 0.9; }
.nav { background: white; padding: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); position: sticky; top: 0; z-index: 100; }
.nav ul { list-style: none; display: flex; justify-content: center; gap: 32px; max-width: 1200px; margin: 0 auto; }
.nav a { text-decoration: none; color: #1a1a1a; font-weight: 600; padding: 8px 16px; border-radius: 8px; transition: all 0.3s; }
.nav a:hover, .nav a.active { background: #d4a574; color: white; }
.container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
.stats { display: flex; justify-content: center; gap: 48px; margin: 32px 0; flex-wrap: wrap; }
.stat-item { text-align: center; }
.stat-number { font-size: 36px; font-weight: 900; color: #d4a574; }
.stat-label { font-size: 14px; color: #666; margin-top: 4px; }
.section-title { text-align: center; font-size: 28px; margin: 48px 0 32px; }
.skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 24px; }
.skill-card { background: white; border-radius: 16px; padding: 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); position: relative; transition: all 0.3s; }
.skill-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.15); }
.skill-card.featured { border: 2px solid #d4a574; background: linear-gradient(135deg, #fff9f0 0%, #ffffff 100%); }
.badge { position: absolute; top: 16px; right: 16px; background: #d4a574; color: white; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.skill-card h3 { font-size: 20px; margin: 16px 0 12px; }
.desc { color: #666; font-size: 14px; margin-bottom: 16px; line-height: 1.6; }
.meta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; align-items: center; }
.cat { background: #f5f5f5; padding: 4px 12px; border-radius: 12px; font-size: 13px; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { font-size: 12px; color: #d4a574; background: rgba(212,165,116,0.1); padding: 4px 10px; border-radius: 12px; }
.actions { display: flex; gap: 12px; }
.btn { flex: 1; padding: 10px; background: #f5f5f5; color: #1a1a1a; text-align: center; border-radius: 8px; text-decoration: none; font-weight: 600; transition: all 0.3s; }
.btn:hover { background: #e0e0e0; }
.btn-primary { background: #d4a574; color: white; }
.btn-primary:hover { background: #b8946b; }
.categories { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; justify-content: center; }
.cat-btn { background: white; padding: 12px 24px; border-radius: 50px; text-decoration: none; color: #1a1a1a; font-weight: 600; border: 2px solid #e0e0e0; transition: all 0.3s; cursor: pointer; }
.cat-btn:hover, .cat-btn.active { border-color: #d4a574; background: #d4a574; color: white; }
.footer { background: #1a1a2e; color: white; text-align: center; padding: 40px 20px; margin-top: 60px; }
.footer a { color: #d4a574; text-decoration: none; }
.search-box { max-width: 600px; margin: 0 auto 32px; }
.search-box input { width: 100%; padding: 16px; border: 2px solid #e0e0e0; border-radius: 12px; font-size: 16px; }