body { margin: 0; padding: 0; font-family: system-ui, -apple-system, 'Noto Sans TC', sans-serif; }
html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans TC', sans-serif; line-height: 1.6; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-600); text-decoration: underline; }
img { max-width: 100%; height: auto; vertical-align: middle; }

header.site-header { position: fixed; top: 0; left: 0; width: 100%; height: 80px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05); display: flex; align-items: center; justify-content: space-between; padding: 0 5%; z-index: 1000; box-sizing: border-box; transition: height 0.3s ease; }
header.site-header.is-scrolled { height: 60px; }
header.site-header h1.header-logo { font-size: 24px; color: #005596; margin: 0; font-weight: 700; letter-spacing: 1px; }
header.site-header nav.header-nav { display: flex; gap: 30px; }
header.site-header nav.header-nav a.nav-link { text-decoration: none; color: #333; font-size: 16px; font-weight: 500; transition: color 0.3s ease; }
header.site-header nav.header-nav a.nav-link:hover { color: #00AEEF; }

#heroWrapper { padding: 160px 5% 100px; background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%); overflow: hidden; }
#heroWrapper .hero-grid { background: rgb(0 0 0 / 30%); padding-bottom: 24px; display: grid; grid-template-columns: 1fr; align-items: center; gap: 60px; max-width: 1200px; margin: 0 auto; text-align: center; }
#heroWrapper .hero-grid .hero-item-content { opacity: 0; transform: translateX(-30px); transition: all 0.8s ease-out; }
#heroWrapper .hero-grid .hero-item-content.is-active { opacity: 1; transform: translateX(0); }
#heroWrapper .hero-grid h2.hero-title { font-size: 48px; line-height: 1.2; color: #ffffff; margin-bottom: 24px; }
#heroWrapper .hero-grid p.hero-text { font-size: 18px; color: #ffffff; line-height: 1.8; margin-bottom: 40px; }
#heroWrapper .hero-grid .hero-item-media { position: relative; opacity: 0; transform: scale(0.9); transition: all 1s ease-out; }
#heroWrapper .hero-grid .hero-item-media.is-active { opacity: 1; transform: scale(1); }
#heroWrapper .hero-grid figure.hero-image { margin: 0; border-radius: 30px; overflow: hidden; box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.1); background: #ddd; aspect-ratio: 4/3; }

#aboutWrapper { padding: 100px 5%; background: #fff; }
#aboutWrapper h2.about-title { text-align: center; font-size: 36px; color: #003366; margin-bottom: 60px; }
#aboutWrapper .about-list { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
#aboutWrapper .about-list article.about-item { display: flex; align-items: center; gap: 40px; padding: 30px; border-radius: 20px; background: #f9f9f9; transition: transform 0.3s ease; }
#aboutWrapper .about-list article.about-item:hover { transform: translateY(-5px); }
#aboutWrapper .about-list .about-item-media { flex: 0 0 120px; height: 120px; aspect-ratio: 1/1; background: #005596; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 40px; }
#aboutWrapper .about-list .about-item-content h3.about-subtitle { font-size: 22px; color: #005596; margin: 0 0 10px 0; }
#aboutWrapper .about-list .about-item-content p.about-text { font-size: 16px; color: #666; margin: 0; line-height: 1.6; }

#serviceWrapper { padding: 100px 5%; background: #f0f4f8; }
#serviceWrapper h2.service-title { text-align: center; font-size: 36px; color: #003366; margin-bottom: 60px; }
#serviceWrapper .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1200px; margin: 0 auto; }
#serviceWrapper .service-grid article.service-item { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; cursor: pointer; }
#serviceWrapper .service-grid article.service-item:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); }
#serviceWrapper .service-grid .service-item-media { height: 200px; background: #ccc; overflow: hidden; margin: 0; }
#serviceWrapper .service-grid .service-item-content { padding: 30px; }
#serviceWrapper .service-grid h3.service-subtitle { font-size: 20px; color: #005596; margin-bottom: 15px; }
#serviceWrapper .service-grid p.service-text { font-size: 15px; color: #777; line-height: 1.6; }

#advantageWrapper { padding: 100px 5%; background: #003366; color: #fff; }
#advantageWrapper h2.advantage-title { text-align: center; font-size: 36px; margin-bottom: 60px; }
#advantageWrapper .advantage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; max-width: 1200px; margin: 0 auto; align-items: center; }
#advantageWrapper .advantage-grid .advantage-item-content { display: flex; flex-direction: column; gap: 25px; }
#advantageWrapper .advantage-grid .advantage-item-feature { background: rgba(255, 255, 255, 0.1); padding: 20px; border-left: 4px solid #00AEEF; border-radius: 0 10px 10px 0; }
#advantageWrapper .advantage-grid h3.advantage-subtitle { font-size: 22px; margin-bottom: 10px; color: #00AEEF; }
#advantageWrapper .advantage-grid p.advantage-text { font-size: 16px; line-height: 1.6; margin: 0; }

#bookingWrapper { padding: 100px 5%; background: #fff; }
#bookingWrapper h2.booking-title { text-align: center; font-size: 36px; color: #003366; margin-bottom: 60px; }
#bookingWrapper .booking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; max-width: 1200px; margin: 0 auto; }
#bookingWrapper .booking-grid .booking-item-content { padding: 40px; background: #f0f7ff; border-radius: 30px; }
#bookingWrapper .booking-grid h3.booking-subtitle { font-size: 24px; color: #005596; margin-bottom: 20px; }
#bookingWrapper .service-detail-list { line-height: 2.2; margin-top: 20px; list-style: none; padding: 0; }
#bookingWrapper .service-detail-list li { font-size: 16px; color: #333; display: flex; align-items: center; gap: 10px; }
#bookingWrapper .service-price-card { padding: 40px; background: #ffffff; border: 1px solid #eee; border-radius: 30px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05); }
#bookingWrapper .price-table { width: 100%; border-collapse: collapse; }
#bookingWrapper .price-table th, #bookingWrapper .price-table td { padding: 15px 10px; text-align: left; border-bottom: 1px solid #f0f0f0; }
#bookingWrapper .price-table th { color: #005596; font-size: 14px; }
#bookingWrapper .price-tag { color: #00AEEF; font-weight: 700; }

footer.site-footer { background: #111; color: rgba(255, 255, 255, 0.7); padding: 60px 5% 30px; text-align: center; }
footer.site-footer .footer-logo { font-size: 24px; color: #fff; margin-bottom: 20px; font-weight: 700; }
footer.site-footer .footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1200px; margin: 0 auto 40px; text-align: left; }
footer.site-footer h3.footer-subtitle { color: #fff; font-size: 18px; margin-bottom: 20px; }
footer.site-footer p.footer-text { font-size: 14px; line-height: 1.8; }
footer.site-footer .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 30px; font-size: 13px; }

.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1280px) {
	#heroWrapper .hero-grid h2.hero-title { font-size: 40px; }
}
@media (max-width: 960px) {
	#serviceWrapper .service-grid { grid-template-columns: repeat(2, 1fr); }
	#advantageWrapper .advantage-grid { grid-template-columns: 1fr; }
	#bookingWrapper .booking-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
	header.site-header nav.header-nav { display: none; }
	#heroWrapper .hero-grid .hero-item-content { transform: translateY(30px); }
	#aboutWrapper .about-list article.about-item { flex-direction: column; text-align: center; }
	#serviceWrapper .service-grid { grid-template-columns: 1fr; }
	footer.site-footer .footer-grid { grid-template-columns: 1fr; text-align: center; }
}
@media (max-width: 500px) {
	header.site-header { height: 60px; }
	header.site-header h1.header-logo { font-size: 20px; }
	#heroWrapper .hero-grid h2.hero-title { font-size: 28px; }
	#aboutWrapper h2.about-title, #serviceWrapper h2.service-title, #advantageWrapper h2.advantage-title, #bookingWrapper h2.booking-title { font-size: 26px; }
}