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

html { scroll-behavior: smooth; }

body { background: #f8f3ec; color: #251b18; font-family: "Noto Sans TC", sans-serif; line-height: 1.7; overflow-x: hidden; }

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

img { display: block; height: auto; max-width: 100%; }

header { background: rgba(255,250,243,.9); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(93,56,35,.12); box-shadow: 0 18px 50px rgba(65,39,25,.08); left: 0; position: sticky; top: 0; width: 100%; z-index: 50; }
header .header-content { align-items: center; display: flex; gap: 28px; justify-content: space-between; margin: 0 auto; max-width: 1180px; padding: 18px 5%; }
header h1 { color: #7b2f22; font-size: 22px; font-weight: 900; letter-spacing: .06em; white-space: nowrap; }
header nav { align-items: center; display: flex; gap: 8px; }
header nav a { border-radius: 999px; color: #78645c; font-size: 14px; font-weight: 700; padding: 9px 14px; transition: background .3s ease, color .3s ease, transform .3s ease; }
header nav a:hover { background: #f3e0cc; color: #7b2f22; transform: translateY(-2px); }

main { overflow: hidden; }

#hero-section { background: radial-gradient(circle at 82% 12%, rgba(204,111,53,.28), transparent 34%), linear-gradient(135deg, #2b1714 0%, #5c241c 49%, #f8efe5 49.2%, #fffaf3 100%); min-height: 760px; padding: 104px 5% 86px; position: relative; }
#hero-section .hero-content { align-items: center; display: grid; gap: 60px; grid-template-columns: 1.02fr .98fr; margin: 0 auto; max-width: 1180px; position: relative; z-index: 2; }
#hero-section .hero-subtitle { color: #f4b45f; font-size: 15px; font-weight: 900; letter-spacing: .22em; margin-bottom: 18px; text-transform: uppercase; }
#hero-section .hero-title { color: #fffaf3; font-size: clamp(42px, 5vw, 72px); font-weight: 900; letter-spacing: -.04em; line-height: 1.08; margin-bottom: 24px; }
#hero-section .hero-text { color: rgba(255,250,243,.82); font-size: 18px; max-width: 560px; }
#hero-section .hero-action { align-items: center; display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
#hero-section .hero-link { background: #c85b2a; border-radius: 999px; box-shadow: 0 18px 40px rgba(200,91,42,.32); color: #fffaf3; font-weight: 900; padding: 14px 24px; transition: background .3s ease, transform .3s ease, box-shadow .3s ease; }
#hero-section .hero-link:hover { background: #9f3f20; box-shadow: 0 24px 52px rgba(200,91,42,.42); transform: translateY(-4px); }
#hero-section .hero-note { color: rgba(255,250,243,.7); font-size: 14px; font-weight: 700; }
#hero-section .hero-media { background: rgba(255,250,243,.84); border: 1px solid rgba(255,250,243,.92); border-radius: 36px; box-shadow: 0 32px 90px rgba(65,39,25,.24); padding: 24px; position: relative; transform: rotate(-2deg); transition: transform .55s ease, box-shadow .55s ease; }
#hero-section .hero-media:hover { box-shadow: 0 42px 110px rgba(65,39,25,.32); transform: rotate(0deg) translateY(-8px); }
#hero-section .hero-image { border-radius: 26px; filter: saturate(1.04) contrast(1.04) sepia(.08); width: 100%; }
#hero-section .hero-badge { background: #fffaf3; border-radius: 22px; bottom: 40px; box-shadow: 0 18px 40px rgba(65,39,25,.18); color: #3b211b; font-weight: 900; left: -22px; padding: 16px 20px; position: absolute; }
#hero-section .hero-badge span { color: #c85b2a; display: block; font-size: 28px; line-height: 1.1; }
#hero-section .hero-orbit { border: 1px solid rgba(244,180,95,.35); border-radius: 999px; height: 420px; position: absolute; right: -150px; top: 120px; width: 420px; }

#overview-section { background: #fffaf3; padding: 96px 5%; }
#overview-section .overview-content { display: grid; gap: 54px; grid-template-columns: .9fr 1.1fr; margin: 0 auto; max-width: 1180px; }
#overview-section .overview-title { color: #3b211b; font-size: clamp(32px, 4vw, 48px); font-weight: 900; letter-spacing: -.03em; line-height: 1.16; margin-bottom: 18px; }
#overview-section .overview-text { color: #7a665d; font-size: 17px; }
#overview-section .overview-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
#overview-section .overview-item { background: linear-gradient(180deg, #fff7ee, #f1dfcc); border: 1px solid rgba(93,56,35,.11); border-radius: 28px; padding: 28px 24px; transform: translateY(24px); opacity: 0; transition: opacity .6s ease, transform .6s ease, border-color .3s ease; }
#overview-section.is-active .overview-item { opacity: 1; transform: translateY(0); }
#overview-section.is-active .overview-item:nth-child(2) { transition-delay: .12s; }
#overview-section.is-active .overview-item:nth-child(3) { transition-delay: .24s; }
#overview-section .overview-number { color: #a33d21; font-size: 38px; font-weight: 900; letter-spacing: -.04em; line-height: 1; margin-bottom: 14px; }
#overview-section .overview-item-title { color: #3b211b; font-size: 18px; font-weight: 900; margin-bottom: 8px; }
#overview-section .overview-item-text { color: #7a665d; font-size: 15px; }

#feature-section { background: #efe1d2; padding: 98px 5%; position: relative; }
#feature-section .feature-content { margin: 0 auto; max-width: 1180px; }
#feature-section .feature-heading { align-items: end; display: grid; gap: 28px; grid-template-columns: 1fr .9fr; margin-bottom: 42px; }
#feature-section .feature-subtitle { color: #a33d21; font-size: 14px; font-weight: 900; letter-spacing: .18em; margin-bottom: 12px; }
#feature-section .feature-title { color: #3b211b; font-size: clamp(30px, 4vw, 46px); font-weight: 900; letter-spacing: -.03em; line-height: 1.18; }
#feature-section .feature-text { color: #7a665d; font-size: 17px; }
#feature-section .feature-grid { display: grid; gap: 22px; grid-template-columns: repeat(4, 1fr); }
#feature-section .feature-item { background: #fffaf3; border-radius: 30px; box-shadow: 0 18px 45px rgba(65,39,25,.09); min-height: 260px; overflow: hidden; padding: 28px; position: relative; transform: translateY(28px); opacity: 0; transition: opacity .6s ease, transform .6s ease, box-shadow .3s ease; }
#feature-section.is-active .feature-item { opacity: 1; transform: translateY(0); }
#feature-section.is-active .feature-item:nth-child(2) { transition-delay: .1s; }
#feature-section.is-active .feature-item:nth-child(3) { transition-delay: .2s; }
#feature-section.is-active .feature-item:nth-child(4) { transition-delay: .3s; }
#feature-section .feature-item:hover { box-shadow: 0 28px 70px rgba(65,39,25,.16); transform: translateY(-8px); }
#feature-section .feature-icon { align-items: center; background: #f1d2b2; border-radius: 20px; color: #8f321c; display: flex; font-size: 24px; font-weight: 900; height: 56px; justify-content: center; margin-bottom: 24px; width: 56px; }
#feature-section .feature-item-title { color: #3b211b; font-size: 20px; font-weight: 900; margin-bottom: 12px; }
#feature-section .feature-item-text { color: #7a665d; font-size: 15px; }
#feature-section .feature-line { background: linear-gradient(90deg, #c85b2a, transparent); bottom: 0; height: 5px; left: 0; position: absolute; width: 100%; }

#structure-section { background: linear-gradient(135deg, #2b1714, #4d1e18 52%, #1b1210); color: #fffaf3; padding: 104px 5%; }
#structure-section .structure-content { align-items: center; display: grid; gap: 64px; grid-template-columns: 1fr 1fr; margin: 0 auto; max-width: 1180px; }
#structure-section .structure-media { background: rgba(255,250,243,.08); border: 1px solid rgba(255,250,243,.14); border-radius: 34px; padding: 22px; position: relative; }
#structure-section .structure-image { border-radius: 26px; filter: saturate(1.02) sepia(.06); opacity: .96; width: 100%; }
#structure-section .structure-scan { background: linear-gradient(90deg, transparent, rgba(244,180,95,.78), transparent); height: 3px; left: 36px; position: absolute; right: 36px; top: 80px; transition: top 1.2s ease; }
#structure-section.is-active .structure-scan { top: calc(100% - 82px); }
#structure-section .structure-subtitle { color: #f4b45f; font-size: 14px; font-weight: 900; letter-spacing: .18em; margin-bottom: 14px; }
#structure-section .structure-title { font-size: clamp(30px, 4vw, 48px); font-weight: 900; letter-spacing: -.03em; line-height: 1.16; margin-bottom: 20px; }
#structure-section .structure-text { color: rgba(255,250,243,.72); font-size: 17px; margin-bottom: 30px; }
#structure-section .structure-list { display: grid; gap: 16px; }
#structure-section .structure-item { align-items: flex-start; background: rgba(255,250,243,.08); border: 1px solid rgba(255,250,243,.12); border-radius: 22px; display: grid; gap: 16px; grid-template-columns: 34px 1fr; padding: 18px; transform: translateX(26px); opacity: 0; transition: opacity .55s ease, transform .55s ease, background .3s ease; }
#structure-section.is-active .structure-item { opacity: 1; transform: translateX(0); }
#structure-section.is-active .structure-item:nth-child(2) { transition-delay: .12s; }
#structure-section.is-active .structure-item:nth-child(3) { transition-delay: .24s; }
#structure-section .structure-mark { align-items: center; background: #c85b2a; border-radius: 50%; color: #fffaf3; display: flex; font-size: 14px; font-weight: 900; height: 34px; justify-content: center; width: 34px; }
#structure-section .structure-item-title { font-size: 17px; font-weight: 900; margin-bottom: 4px; }
#structure-section .structure-item-text { color: rgba(255,250,243,.68); font-size: 14px; }

#application-section { background: #fffaf3; padding: 98px 5%; }
#application-section .application-content { margin: 0 auto; max-width: 1180px; }
#application-section .application-title { color: #3b211b; font-size: clamp(30px, 4vw, 46px); font-weight: 900; letter-spacing: -.03em; line-height: 1.18; margin-bottom: 16px; text-align: center; }
#application-section .application-text { color: #7a665d; font-size: 17px; margin: 0 auto 42px; max-width: 720px; text-align: center; }
#application-section .application-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
#application-section .application-item { background: #fbf0e4; border: 1px solid rgba(93,56,35,.11); border-radius: 26px; overflow: hidden; padding: 24px; position: relative; transition: background .3s ease, transform .3s ease, border-color .3s ease; }
#application-section .application-item:hover { background: #f4dcc5; border-color: rgba(200,91,42,.38); transform: translateY(-7px); }
#application-section .application-item-title { color: #3b211b; font-size: 19px; font-weight: 900; margin-bottom: 8px; }
#application-section .application-item-text { color: #7a665d; font-size: 15px; }
#application-section .application-tag { background: #c85b2a; border-radius: 999px; color: #fffaf3; display: inline-flex; font-size: 12px; font-weight: 900; margin-bottom: 18px; padding: 5px 12px; }

#download-section { background: radial-gradient(circle at 15% 20%, rgba(244,180,95,.28), transparent 30%), #f3e6d8; padding: 96px 5%; }
#download-section .download-content { align-items: center; background: #fffaf3; border-radius: 38px; box-shadow: 0 30px 90px rgba(65,39,25,.11); display: grid; gap: 42px; grid-template-columns: 1fr 1.1fr; margin: 0 auto; max-width: 1180px; overflow: hidden; padding: 50px; }
#download-section .download-title { color: #3b211b; font-size: clamp(30px, 4vw, 44px); font-weight: 900; letter-spacing: -.03em; line-height: 1.18; margin-bottom: 18px; }
#download-section .download-text { color: #7a665d; font-size: 17px; }
#download-section .download-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
#download-section .download-item { background: linear-gradient(135deg, #fff7ee, #f1dfcc); border: 1px solid rgba(93,56,35,.11); border-radius: 22px; color: #3b211b; font-weight: 900; padding: 20px; position: relative; transition: color .3s ease, transform .3s ease, border-color .3s ease; }
#download-section .download-item:hover { border-color: rgba(200,91,42,.45); color: #a33d21; transform: translateX(6px); }
#download-section .download-item span { color: #c85b2a; display: block; font-size: 13px; letter-spacing: .12em; margin-bottom: 6px; }

footer { background: #1b1210; color: rgba(255,250,243,.72); padding: 34px 5%; }
footer .footer-content { align-items: center; display: flex; gap: 22px; justify-content: space-between; margin: 0 auto; max-width: 1180px; }
footer .footer-title { color: #fffaf3; font-size: 16px; font-weight: 900; letter-spacing: .08em; }
footer .footer-links { display: flex; flex-wrap: wrap; gap: 14px; }
footer .footer-links a { color: rgba(255,250,243,.68); font-size: 14px; transition: color .3s ease; }
footer .footer-links a:hover { color: #f4b45f; }

@media (max-width: 1280px) {
	#hero-section .hero-content { max-width: 1080px; }
	#overview-section .overview-content { max-width: 1080px; }
	#feature-section .feature-content { max-width: 1080px; }
	#structure-section .structure-content { max-width: 1080px; }
	#application-section .application-content { max-width: 1080px; }
	#download-section .download-content { max-width: 1080px; }
}

@media (max-width: 960px) {
	header .header-content { align-items: flex-start; flex-direction: column; gap: 14px; }
	header nav { flex-wrap: wrap; }
	#hero-section { min-height: auto; padding: 76px 5%; }
	#hero-section .hero-content { grid-template-columns: 1fr; }
	#hero-section .hero-title { color: #fffaf3; }
	#overview-section .overview-content { grid-template-columns: 1fr; }
	#overview-section .overview-grid { grid-template-columns: 1fr; }
	#feature-section .feature-heading { grid-template-columns: 1fr; }
	#feature-section .feature-grid { grid-template-columns: repeat(2, 1fr); }
	#structure-section .structure-content { grid-template-columns: 1fr; }
	#application-section .application-grid { grid-template-columns: repeat(2, 1fr); }
	#download-section .download-content { grid-template-columns: 1fr; padding: 36px; }
}

@media (max-width: 768px) {
	header nav a { font-size: 13px; padding: 7px 10px; }
	#hero-section { background: linear-gradient(160deg, #2b1714 0%, #5c241c 64%, #f8efe5 64.2%, #fffaf3 100%); padding: 58px 5%; }
	#hero-section .hero-text { font-size: 16px; }
	#hero-section .hero-media { border-radius: 28px; padding: 16px; }
	#hero-section .hero-badge { bottom: 24px; left: 16px; }
	#feature-section .feature-grid { grid-template-columns: 1fr; }
	#application-section .application-grid { grid-template-columns: 1fr; }
	#download-section .download-grid { grid-template-columns: 1fr; }
	footer .footer-content { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 500px) {
	header h1 { font-size: 18px; }
	header .header-content { padding: 14px 5%; }
	#hero-section .hero-title { font-size: 38px; }
	#hero-section .hero-action { align-items: flex-start; flex-direction: column; }
	#hero-section .hero-link { text-align: center; width: 100%; }
	#overview-section { padding: 70px 5%; }
	#feature-section { padding: 72px 5%; }
	#structure-section { padding: 76px 5%; }
	#application-section { padding: 72px 5%; }
	#download-section { padding: 72px 5%; }
	#download-section .download-content { border-radius: 28px; padding: 26px; }
}