/* Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #0a0d14; color: #e0e0e0; line-height: 1.6; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
.z97d80container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Header */
.z97d80header { background: rgba(10, 13, 20, 0.95); padding: 15px 0; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(255,255,255,0.05); backdrop-filter: blur(10px); }
.z97d80header .z97d80container { display: flex; justify-content: space-between; align-items: center; }
.z97d80logo a { font-size: 24px; font-weight: bold; background: linear-gradient(90deg, #ffd700, #ff8c00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.z97d80nav { display: flex; gap: 25px; }
.z97d80nav a { color: #ccc; transition: color 0.3s; font-size: 15px; }
.z97d80nav a:hover, .z97d80nav a.current { color: #ffd700; }
.z97d80btn_primary { background: linear-gradient(90deg, #ffd700, #ff8c00); color: #000; padding: 8px 24px; border-radius: 20px; font-weight: bold; transition: transform 0.3s, box-shadow 0.3s; font-size: 14px; }
.z97d80btn_primary:hover { transform: scale(1.05); box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4); }

/* Banner */
.z97d80banner { position: relative; min-height: 450px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: #111; }
.z97d80banner_img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.z97d80banner_text { position: relative; z-index: 2; padding: 40px 20px; max-width: 900px; }
.z97d80banner_text h1 { font-size: 42px; margin-bottom: 20px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }
.z97d80banner_text p { font-size: 18px; color: #ddd; margin: 0 auto 30px; line-height: 1.8; }

/* Sections */
.z97d80section { padding: 80px 0; }
.z97d80section_title { text-align: center; margin-bottom: 50px; font-size: 32px; color: #fff; position: relative; display: flex; align-items: center; justify-content: center; gap: 20px; }
.z97d80section_title span { white-space: nowrap; }
.z97d80section_title::before, .z97d80section_title::after { content: ""; flex: 1; max-width: 150px; height: 1px; background: linear-gradient(90deg, transparent, #ffd700, transparent); }

/* Intro */
.z97d80intro .z97d80section_content { max-width: 1000px; margin: 0 auto; text-align: center; font-size: 16px; color: #bbb; line-height: 2; }

/* Features */
.z97d80feature_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
.z97d80feature_item { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 30px 20px; text-align: center; transition: all 0.3s ease; }
.z97d80feature_item:hover { background: rgba(255, 215, 0, 0.05); border-color: rgba(255, 215, 0, 0.3); transform: translateY(-8px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
.z97d80feature_item h3 { font-size: 20px; color: #ffd700; margin-bottom: 15px; font-weight: 600; }
.z97d80feature_item p { font-size: 14px; color: #aaa; line-height: 1.6; }

/* FAQ */
.z97d80faq_list { max-width: 900px; margin: 0 auto; }
.z97d80faq_item { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; margin-bottom: 15px; overflow: hidden; transition: border-color 0.3s; }
.z97d80faq_item:hover { border-color: rgba(255, 215, 0, 0.2); }
.z97d80faq_question { padding: 20px 25px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: background 0.3s; }
.z97d80faq_question:hover { background: rgba(255, 255, 255, 0.02); }
.z97d80faq_question h3 { font-size: 17px; color: #fff; font-weight: normal; }
.z97d80faq_icon { font-size: 24px; color: #ffd700; transition: transform 0.3s; font-weight: bold; }
.z97d80faq_answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out, padding 0.4s ease-out; padding: 0 25px; color: #bbb; background: rgba(0,0,0,0.1); line-height: 1.8; }
.z97d80faq_item.active .z97d80faq_answer { max-height: 300px; padding: 20px 25px; }
.z97d80faq_item.active .z97d80faq_icon { transform: rotate(45deg); }

/* List & Article */
.z97d80page_title { text-align: center; font-size: 32px; margin-bottom: 40px; color: #fff; position: relative; padding-bottom: 15px; }
.z97d80page_title::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: #ffd700; border-radius: 2px; }
.z97d80list_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.z97d80list_item { background: rgba(255,255,255,0.03); border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.05); transition: transform 0.3s, box-shadow 0.3s; display: flex; flex-direction: column; }
.z97d80list_item:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.3); border-color: rgba(255, 215, 0, 0.2); }
.z97d80list_item img { width: 100%; height: 200px; object-fit: cover; }
.z97d80list_item h2 { font-size: 18px; padding: 20px 20px 10px; color: #fff; font-weight: 600; }
.z97d80list_item p { font-size: 14px; color: #aaa; padding: 0 20px 20px; flex: 1; }
.z97d80date { display: block; padding: 0 20px 20px; font-size: 12px; color: #666; margin-top: auto; }

.z97d80article_meta { text-align: center; color: #888; margin-bottom: 40px; font-size: 14px; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.z97d80article_meta a { color: #ffd700; }
.z97d80article_content { line-height: 2; color: #ccc; font-size: 16px; max-width: 900px; margin: 0 auto; }
.z97d80article_content p { margin-bottom: 20px; }
.z97d80article_content img { margin: 20px auto; border-radius: 8px; }
.z97d80tags { margin-top: 50px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); text-align: center; }
.z97d80tags a { display: inline-block; background: rgba(255,215,0,0.1); color: #ffd700; padding: 6px 16px; border-radius: 20px; margin: 0 5px 10px; font-size: 14px; transition: background 0.3s; }
.z97d80tags a:hover { background: rgba(255,215,0,0.2); }
.z97d80prenext { margin-top: 40px; display: flex; justify-content: space-between; color: #888; background: rgba(255,255,255,0.02); padding: 20px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.05); }
.z97d80prenext a { color: #ffd700; }

/* Pagination */
.z97d80pagination { text-align: center; margin-top: 60px; }
.z97d80pagination a { display: inline-block; padding: 10px 18px; margin: 0 5px; background: rgba(255,255,255,0.05); color: #fff; border-radius: 6px; transition: all 0.3s; border: 1px solid transparent; }
.z97d80pagination a:hover { border-color: #ffd700; color: #ffd700; }
.z97d80pagination a.current { background: linear-gradient(90deg, #ffd700, #ff8c00); color: #000; font-weight: bold; border-color: transparent; }

/* Footer */
.z97d80footer { background: #05070a; padding: 50px 0 30px; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); margin-top: 50px; }
.z97d80footer_logo { font-size: 22px; font-weight: bold; background: linear-gradient(90deg, #ffd700, #ff8c00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: block; margin-bottom: 15px; }
.z97d80footer p { color: #555; font-size: 14px; }

/* Float Button */
.z97d80float_btn { position: fixed; bottom: 40px; right: 40px; z-index: 999; }
.z97d80btn_download { display: flex; align-items: center; justify-content: center; width: 65px; height: 65px; background: linear-gradient(135deg, #ffd700, #ff8c00); border-radius: 50%; box-shadow: 0 4px 20px rgba(255, 215, 0, 0.5); color: #000; font-weight: bold; font-size: 14px; animation: z97d80pulse 2s infinite; text-align: center; line-height: 1.2; }
@keyframes z97d80pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); } 70% { box-shadow: 0 0 0 20px rgba(255, 215, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); } }

/* Responsive Design for SEO & Mobile */
@media (max-width: 992px) {
    .z97d80feature_grid { grid-template-columns: repeat(2, 1fr); }
    .z97d80list_grid { grid-template-columns: repeat(2, 1fr); }
    .z97d80banner { min-height: 350px; }
    .z97d80banner_text h1 { font-size: 32px; }
}
@media (max-width: 768px) {
    .z97d80nav { display: none; }
    .z97d80banner_text h1 { font-size: 26px; }
    .z97d80banner_text p { font-size: 15px; }
    .z97d80feature_grid { grid-template-columns: 1fr; }
    .z97d80list_grid { grid-template-columns: 1fr; }
    .z97d80section { padding: 50px 0; }
    .z97d80section_title { font-size: 24px; }
    .z97d80prenext { flex-direction: column; gap: 15px; text-align: center; }
    .z97d80float_btn { bottom: 20px; right: 20px; }
    .z97d80btn_download { width: 55px; height: 55px; font-size: 12px; }
}