* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: 'Noto Sans TC', sans-serif; background-color: #f4f6f9; color: #1a1a1a; overflow-x: hidden; }

a { text-decoration: none; color: inherit; }

ul { list-style: none; }

header { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 5%; background-color: rgba(10, 25, 47, 0.95); backdrop-filter: blur(10px); display: flex; justify-content: space-between; align-items: center; z-index: 1000; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
header h1 { color: #ffffff; font-size: 24px; font-weight: 900; letter-spacing: 1px; }
header nav { display: flex; gap: 30px; }
header nav a { color: #ccd6f6; font-size: 16px; font-weight: 500; transition: color 0.3s ease; }
header nav a:hover { color: #64ffda; }

@media (max-width: 1280px) {
	header { padding: 18px 5%; }
}

@media (max-width: 960px) {
	header h1 { font-size: 22px; }
	header nav { gap: 20px; }
}

@media (max-width: 768px) {
	header { padding: 15px 5%; flex-direction: column; gap: 15px; background-color: rgba(10, 25, 47, 0.98); }
	header nav { flex-wrap: wrap; justify-content: center; gap: 15px; }
}

@media (max-width: 500px) {
	header h1 { font-size: 20px; }
	header nav a { font-size: 14px; }
}

#hero-section { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; background: url('../img/fifa-hero.webp') center/cover no-repeat; padding: 120px 5% 60px; position: relative; }
#hero-section::before { content: ''; inset: 0; background: linear-gradient(rgba(10, 25, 47, 0.8), rgba(10, 25, 47, 0.8)); position: absolute; }
#hero-section .hero-content { opacity: 0; transform: translateY(40px); transition: opacity 1s ease-out, transform 1s ease-out; }
#hero-section.is-active .hero-content { opacity: 1; transform: translateY(0); }
#hero-section .hero-title { color: #ffffff; font-size: 72px; font-weight: 900; margin-bottom: 20px; line-height: 1.1; letter-spacing: 2px; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); }
#hero-section .hero-subtitle { color: #64ffda; font-size: 28px; font-weight: 500; margin-bottom: 30px; letter-spacing: 1px; }
#hero-section .hero-text { color: #ccd6f6; font-size: 18px; max-width: 700px; margin: 0 auto; line-height: 1.8; }

@media (max-width: 1280px) {
	#hero-section .hero-title { font-size: 64px; }
	#hero-section .hero-subtitle { font-size: 24px; }
}

@media (max-width: 960px) {
	#hero-section .hero-title { font-size: 52px; }
	#hero-section .hero-text { font-size: 16px; }
}

@media (max-width: 768px) {
	#hero-section .hero-title { font-size: 42px; }
	#hero-section .hero-subtitle { font-size: 20px; }
}

@media (max-width: 500px) {
	#hero-section .hero-title { font-size: 32px; }
	#hero-section .hero-subtitle { font-size: 18px; }
	#hero-section .hero-text { font-size: 15px; }
}

#about-section { padding: 120px 5%; background-color: #ffffff; }
#about-section .about-title { font-size: 42px; color: #0a192f; text-align: center; margin-bottom: 80px; font-weight: 900; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
#about-section.is-active .about-title { opacity: 1; transform: translateY(0); }
#about-section .about-list { display: flex; flex-direction: column; gap: 80px; max-width: 1200px; margin: 0 auto; }
#about-section .about-item { display: flex; gap: 60px; align-items: center; opacity: 0; transform: translateX(-60px); transition: opacity 1s ease, transform 1s ease; }
#about-section .about-item:nth-child(even) { flex-direction: row-reverse; transform: translateX(60px); }
#about-section.is-active .about-item { opacity: 1; transform: translateX(0); }
#about-section .about-media { flex: 1; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); position: relative; }
#about-section .about-image { width: 100%; height: auto; display: block; transition: transform 0.6s ease; }
#about-section .about-media:hover .about-image { transform: scale(1.08); }
#about-section .about-content { flex: 1; }
#about-section .about-subtitle { font-size: 32px; color: #d90429; margin-bottom: 20px; font-weight: 700; line-height: 1.3; }
#about-section .about-text { font-size: 17px; color: #4a5568; line-height: 1.8; margin-bottom: 15px; }

@media (max-width: 1280px) {
	#about-section .about-item { gap: 40px; }
}

@media (max-width: 960px) {
	#about-section .about-item { flex-direction: column; text-align: center; gap: 30px; }
	#about-section .about-item:nth-child(even) { flex-direction: column; }
	#about-section .about-subtitle { font-size: 28px; }
}

@media (max-width: 768px) {
	#about-section { padding: 80px 5%; }
	#about-section .about-title { font-size: 36px; margin-bottom: 50px; }
	#about-section .about-list { gap: 60px; }
}

@media (max-width: 500px) {
	#about-section { padding: 60px 5%; }
	#about-section .about-title { font-size: 28px; margin-bottom: 40px; }
	#about-section .about-subtitle { font-size: 24px; }
	#about-section .about-text { font-size: 15px; }
}

#features-section { padding: 120px 5%; background-color: #f8fafc; }
#features-section .features-title { font-size: 42px; color: #0a192f; text-align: center; margin-bottom: 80px; font-weight: 900; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
#features-section.is-active .features-title { opacity: 1; transform: translateY(0); }
#features-section .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1200px; margin: 0 auto; }
#features-section .features-item { background-color: #ffffff; padding: 50px 30px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); text-align: center; opacity: 0; transform: translateY(50px); transition: opacity 0.8s ease, transform 0.8s ease; border-bottom: 5px solid #d90429; }
#features-section.is-active .features-item { opacity: 1; transform: translateY(0); }
#features-section.is-active .features-item:nth-child(1) { transition-delay: 0.1s; }
#features-section.is-active .features-item:nth-child(2) { transition-delay: 0.25s; }
#features-section.is-active .features-item:nth-child(3) { transition-delay: 0.4s; }
#features-section .features-subtitle { font-size: 24px; color: #0a192f; margin-bottom: 20px; font-weight: 700; }
#features-section .features-text { font-size: 16px; color: #64748b; line-height: 1.7; }

@media (max-width: 1280px) {
	#features-section .features-grid { gap: 30px; }
}

@media (max-width: 960px) {
	#features-section .features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	#features-section { padding: 80px 5%; }
	#features-section .features-title { font-size: 36px; margin-bottom: 50px; }
	#features-section .features-grid { grid-template-columns: 1fr; gap: 25px; }
	#features-section .features-item { padding: 40px 25px; }
}

@media (max-width: 500px) {
	#features-section { padding: 60px 5%; }
	#features-section .features-title { font-size: 28px; margin-bottom: 40px; }
	#features-section .features-subtitle { font-size: 22px; }
}

#news-section { padding: 120px 5%; background-color: #0a192f; color: #ffffff; }
#news-section .news-title { font-size: 42px; text-align: center; margin-bottom: 80px; font-weight: 900; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
#news-section.is-active .news-title { opacity: 1; transform: translateY(0); }
#news-section .news-list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 25px; }
#news-section .news-item { background-color: rgba(255, 255, 255, 0.05); border-left: 5px solid #64ffda; padding: 35px 40px; border-radius: 0 12px 12px 0; opacity: 0; transform: translateX(-40px); transition: opacity 0.6s ease, transform 0.6s ease; backdrop-filter: blur(5px); }
#news-section.is-active .news-item { opacity: 1; transform: translateX(0); }
#news-section.is-active .news-item:nth-child(1) { transition-delay: 0.1s; }
#news-section.is-active .news-item:nth-child(2) { transition-delay: 0.2s; }
#news-section.is-active .news-item:nth-child(3) { transition-delay: 0.3s; }
#news-section .news-subtitle { font-size: 22px; font-weight: 700; color: #64ffda; margin-bottom: 12px; }
#news-section .news-text { font-size: 16px; line-height: 1.7; color: #ccd6f6; }

@media (max-width: 960px) {
	#news-section .news-item { padding: 30px; }
}

@media (max-width: 768px) {
	#news-section { padding: 80px 5%; }
	#news-section .news-title { font-size: 36px; margin-bottom: 50px; }
}

@media (max-width: 500px) {
	#news-section { padding: 60px 5%; }
	#news-section .news-title { font-size: 28px; margin-bottom: 40px; }
	#news-section .news-item { padding: 25px 20px; }
	#news-section .news-subtitle { font-size: 18px; }
	#news-section .news-text { font-size: 15px; }
}

footer { background-color: #020c1b; color: #8892b0; padding: 50px 5%; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.05); }
footer .footer-text { font-size: 15px; margin-bottom: 20px; font-weight: 500; }
footer .footer-links { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }
footer .footer-links a { color: #8892b0; font-size: 14px; transition: color 0.3s ease; }
footer .footer-links a:hover { color: #64ffda; }

@media (max-width: 500px) {
	footer { padding: 40px 5%; }
	footer .footer-links { gap: 15px; }
}