* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background-color: #fefcf5; color: #2c2b28; scroll-behavior: smooth; }
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1ede5; } ::-webkit-scrollbar-thumb { background: #c0b9a8; border-radius: 12px; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.navbar { position: sticky; top: 0; background-color: rgba(255, 252, 245, 0.96); backdrop-filter: blur(10px); z-index: 100; border-bottom: 1px solid #f0e9de; }
.nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 14px 28px; max-width: 1280px; margin: 0 auto; }
.logo h2 { font-weight: 700; font-size: 1.6rem; background: linear-gradient(135deg, #D97A54, #B85C38); background-clip: text; -webkit-background-clip: text; color: transparent; }
.logo p { font-size: 0.75rem; color: #b4a693; }
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a { text-decoration: none; font-weight: 500; color: #4a4238; transition: 0.2s; }
.nav-links a:hover { color: #E88D67; }
section { padding: 80px 0; border-bottom: 1px solid #f0e8dd; }
.section-title { font-size: 2.2rem; font-weight: 700; margin-bottom: 16px; position: relative; display: inline-block; }
.section-title:after { content: ''; position: absolute; bottom: -10px; left: 0; width: 60px; height: 4px; background: linear-gradient(90deg, #E88D67, #f3bc9c); border-radius: 4px; }
.section-desc { color: #6f685c; margin-bottom: 48px; }
.hero { background: linear-gradient(145deg, #fffaf2 0%, #fff5e9 100%); padding: 70px 0 60px; }
.hero-content { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; }
.hero-text { flex: 1.2; }
.hero-badge { background: #ffe6db; display: inline-block; padding: 6px 14px; border-radius: 40px; font-size: 0.8rem; font-weight: 600; color: #c26a46; margin-bottom: 20px; }
.hero-text h1 { font-size: 3rem; font-weight: 800; line-height: 1.2; }
.hero-text h1 span { color: #E88D67; }
.class-slogan { background: white; padding: 14px 24px; border-radius: 60px; display: inline-flex; align-items: center; gap: 12px; border: 1px solid #f3e4d6; }
.stats-grid { display: flex; flex-wrap: wrap; gap: 30px; margin: 60px 0 20px; }
.stat-card { background: white; border-radius: 32px; padding: 28px 20px; flex: 1; text-align: center; border: 1px solid #f3e9e0; }
.stat-card i { font-size: 2.4rem; color: #E88D67; }
.stat-number { font-size: 2.2rem; font-weight: 800; }
.members-grid, .honor-list, .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px; margin-top: 30px; }
.member-card, .honor-item, .gallery-card { background: white; border-radius: 28px; padding: 24px 16px; text-align: center; border: 1px solid #f1e9e1; transition: 0.2s; }
.member-avatar { width: 100px; height: 100px; background: #FCE5D8; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 2.8rem; color: #c46a46; }
.member-name { font-weight: 700; font-size: 1.25rem; }
.member-role { color: #E88D67; font-weight: 600; }
.honor-item i { font-size: 2rem; color: #E88D67; margin-bottom: 12px; }
.gallery-card img, .gallery-card video { width: 100%; height: 200px; object-fit: cover; border-radius: 20px; }
footer { background: #fef7ef; padding: 40px 0 30px; border-top: 1px solid #f0e3d6; }
.footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.scroll-top { position: fixed; bottom: 28px; right: 28px; background: #E88D67; width: 48px; height: 48px; border-radius: 60px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: 0.2s; color: white; }
.scroll-top.show { opacity: 1; }
@media (max-width: 768px) { .hero-text h1 { font-size: 2rem; } .section-title { font-size: 1.8rem; } .nav-container { flex-direction: column; gap: 12px; } }