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

html { scroll-behavior: smooth; }

body { background: #07140f; color: #eef7ef; font-family: "Noto Sans TC", sans-serif; line-height: 1.75; overflow-x: hidden; }

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

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

/* header */
header { align-items: center; backdrop-filter: blur(18px); background: rgba(7, 20, 15, 0.78); border-bottom: 1px solid rgba(255, 255, 255, 0.08); display: flex; justify-content: space-between; left: 0; padding: 18px 6%; position: fixed; top: 0; width: 100%; z-index: 50; }
header .site-brand { align-items: center; display: flex; gap: 12px; }
header .brand-mark { align-items: center; background: linear-gradient(135deg, #8dff6a, #1bbf75); border-radius: 16px; box-shadow: 0 12px 30px rgba(141, 255, 106, 0.28); color: #06140d; display: flex; font-size: 18px; font-weight: 900; height: 42px; justify-content: center; width: 42px; }
header h1 { color: #ffffff; font-size: 22px; font-weight: 900; letter-spacing: 1px; }
header nav { align-items: center; display: flex; gap: 26px; }
header nav a { color: rgba(238, 247, 239, 0.78); font-size: 15px; font-weight: 500; position: relative; transition: color 0.3s ease; }
header nav a::after { background: #8dff6a; border-radius: 99px; bottom: -7px; content: ""; height: 3px; left: 0; position: absolute; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; width: 100%; }
header nav a:hover { color: #ffffff; }
header nav a:hover::after { transform: scaleX(1); }
header .header-action { background: rgba(141, 255, 106, 0.12); border: 1px solid rgba(141, 255, 106, 0.35); border-radius: 999px; color: #b9ff9d; font-size: 14px; font-weight: 700; padding: 10px 18px; transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; }
header .header-action:hover { background: #8dff6a; color: #07140f; transform: translateY(-2px); }

main { overflow: hidden; }

/* hero-section */
#hero-section { background: radial-gradient( circle at 18% 22%, rgba(141, 255, 106, 0.25), transparent 30% ), radial-gradient( circle at 84% 18%, rgba(36, 181, 255, 0.18), transparent 28% ), linear-gradient(135deg, #07140f 0%, #0b2418 52%, #07140f 100%); min-height: 100vh; padding: 150px 6% 90px; position: relative; }
#hero-section::before { background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 60px 60px; content: ""; inset: 0; opacity: 0.32; position: absolute; }
#hero-section .hero-grid { align-items: center; display: grid; gap: 64px; grid-template-columns: 1.04fr 0.96fr; margin: 0 auto; max-width: 1280px; position: relative; z-index: 2; }
#hero-section .hero-content { opacity: 0; transform: translateY(36px); transition: opacity 0.8s ease, transform 0.8s ease; }
#hero-section.is-active .hero-content { opacity: 1; transform: translateY(0); }
#hero-section .hero-kicker { align-items: center; color: #b9ff9d; display: flex; font-size: 14px; font-weight: 700; gap: 10px; letter-spacing: 2px; margin-bottom: 22px; text-transform: uppercase; }
#hero-section .hero-kicker::before { background: #8dff6a; border-radius: 50%; box-shadow: 0 0 22px rgba(141, 255, 106, 0.85); content: ""; height: 10px; width: 10px; }
#hero-section h2 { color: #ffffff; font-size: clamp(42px, 6vw, 82px); font-weight: 900; line-height: 1.05; margin-bottom: 26px; }
#hero-section .hero-highlight { color: #8dff6a; display: block; }
#hero-section .hero-text { color: rgba(238, 247, 239, 0.76); font-size: 18px; max-width: 680px; }
#hero-section .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
#hero-section .hero-link { border-radius: 999px; display: inline-flex; font-weight: 800; padding: 14px 24px; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; }
#hero-section .hero-link.primary { background: #8dff6a; box-shadow: 0 18px 38px rgba(141, 255, 106, 0.25); color: #07140f; }
#hero-section .hero-link.secondary { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: #ffffff; }
#hero-section .hero-link:hover { transform: translateY(-4px); }
#hero-section .hero-media { opacity: 0; position: relative; transform: translateX(48px); transition: opacity 0.9s ease 0.1s, transform 0.9s ease 0.1s; }
#hero-section.is-active .hero-media { opacity: 1; transform: translateX(0); }
#hero-section .hero-card { background: linear-gradient( 145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) ); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 34px; box-shadow: 0 35px 90px rgba(0, 0, 0, 0.34); overflow: hidden; padding: 16px; position: relative; }
#hero-section .hero-card img { aspect-ratio: 4 / 5; border-radius: 24px; object-fit: cover; width: 100%; }
#hero-section .hero-badge { background: rgba(7, 20, 15, 0.88); border: 1px solid rgba(141, 255, 106, 0.28); border-radius: 22px; bottom: 34px; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28); left: -28px; padding: 18px 20px; position: absolute; }
#hero-section .hero-badge strong { color: #8dff6a; display: block; font-size: 30px; line-height: 1; }
#hero-section .hero-badge span { color: rgba(238, 247, 239, 0.75); font-size: 13px; }

/* guide-section */
#guide-section { background: #f5fbf2; color: #112017; padding: 110px 6%; }
#guide-section .guide-content { margin: 0 auto; max-width: 1180px; }
#guide-section .section-label { color: #23824c; font-size: 14px; font-weight: 900; letter-spacing: 2px; margin-bottom: 12px; }
#guide-section h2 { color: #112017; font-size: clamp(30px, 4vw, 52px); font-weight: 900; line-height: 1.18; margin-bottom: 20px; }
#guide-section .guide-text { color: #56675c; font-size: 17px; max-width: 760px; }
#guide-section .guide-grid { display: grid; gap: 22px; grid-template-columns: repeat(5, 1fr); margin-top: 48px; }
#guide-section .guide-item { background: #ffffff; border: 1px solid rgba(35, 130, 76, 0.13); border-radius: 28px; box-shadow: 0 18px 46px rgba(17, 32, 23, 0.08); opacity: 0; padding: 28px 22px; transform: translateY(32px); transition: opacity 0.7s ease, transform 0.7s ease, box-shadow 0.3s ease; }
#guide-section.is-active .guide-item { opacity: 1; transform: translateY(0); }
#guide-section.is-active .guide-item:nth-child(2) { transition-delay: 0.08s; }
#guide-section.is-active .guide-item:nth-child(3) { transition-delay: 0.16s; }
#guide-section.is-active .guide-item:nth-child(4) { transition-delay: 0.24s; }
#guide-section.is-active .guide-item:nth-child(5) { transition-delay: 0.32s; }
#guide-section .guide-item:hover { box-shadow: 0 28px 58px rgba(17, 32, 23, 0.13); transform: translateY(-8px); }
#guide-section .guide-number { align-items: center; background: #e8f9dc; border-radius: 16px; color: #23824c; display: flex; font-size: 18px; font-weight: 900; height: 46px; justify-content: center; margin-bottom: 22px; width: 46px; }
#guide-section h3 { color: #102018; font-size: 20px; font-weight: 900; line-height: 1.35; margin-bottom: 12px; }
#guide-section p { color: #647368; font-size: 15px; }

/* ranking-section */
#ranking-section { background: linear-gradient(180deg, #07140f 0%, #102719 100%); padding: 110px 6%; position: relative; }
#ranking-section .ranking-content { margin: 0 auto; max-width: 1280px; position: relative; z-index: 2; }
#ranking-section .ranking-head { align-items: end; display: flex; gap: 28px; justify-content: space-between; margin-bottom: 42px; }
#ranking-section .section-label { color: #8dff6a; font-size: 14px; font-weight: 900; letter-spacing: 2px; margin-bottom: 12px; }
#ranking-section h2 { color: #ffffff; font-size: clamp(32px, 4.2vw, 56px); font-weight: 900; line-height: 1.18; }
#ranking-section .ranking-note { color: rgba(238, 247, 239, 0.68); max-width: 460px; }
#ranking-section .ranking-grid { display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); }
#ranking-section .ranking-item { background: rgba(255, 255, 255, 0.075); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 30px; display: grid; gap: 22px; grid-template-columns: 180px 1fr; min-height: 230px; opacity: 0; overflow: hidden; padding: 16px; position: relative; transform: translateY(34px); transition: opacity 0.72s ease, transform 0.72s ease, border-color 0.3s ease, background 0.3s ease; }
#ranking-section.is-active .ranking-item { opacity: 1; transform: translateY(0); }
#ranking-section.is-active .ranking-item:nth-child(2) { transition-delay: 0.06s; }
#ranking-section.is-active .ranking-item:nth-child(3) { transition-delay: 0.12s; }
#ranking-section.is-active .ranking-item:nth-child(4) { transition-delay: 0.18s; }
#ranking-section.is-active .ranking-item:nth-child(5) { transition-delay: 0.24s; }
#ranking-section.is-active .ranking-item:nth-child(6) { transition-delay: 0.3s; }
#ranking-section.is-active .ranking-item:nth-child(7) { transition-delay: 0.36s; }
#ranking-section.is-active .ranking-item:nth-child(8) { transition-delay: 0.42s; }
#ranking-section.is-active .ranking-item:nth-child(9) { transition-delay: 0.48s; }
#ranking-section.is-active .ranking-item:nth-child(10) { transition-delay: 0.54s; }
#ranking-section .ranking-item:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(141, 255, 106, 0.34); transform: translateY(-8px); }
#ranking-section .ranking-media { border-radius: 22px; min-height: 198px; overflow: hidden; position: relative; }
#ranking-section .ranking-media img { height: 100%; object-fit: cover; transition: transform 0.5s ease; width: 100%; }
#ranking-section .ranking-item:hover .ranking-media img { transform: scale(1.08); }
#ranking-section .ranking-rank { align-items: center; background: #8dff6a; border-radius: 0 0 18px 0; color: #07140f; display: flex; font-size: 20px; font-weight: 900; height: 54px; justify-content: center; left: 0; position: absolute; top: 0; width: 70px; z-index: 2; }
#ranking-section .ranking-content-box { display: flex; flex-direction: column; justify-content: center; padding: 8px 8px 8px 0; }
#ranking-section .ranking-tag { color: #8dff6a; font-size: 13px; font-weight: 900; letter-spacing: 1px; margin-bottom: 8px; }
#ranking-section h3 { color: #ffffff; font-size: 23px; font-weight: 900; line-height: 1.3; margin-bottom: 10px; }
#ranking-section .ranking-company { color: rgba(238, 247, 239, 0.55); font-size: 14px; margin-bottom: 12px; }
#ranking-section .ranking-text { color: rgba(238, 247, 239, 0.72); font-size: 15px; }
#ranking-section .ranking-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
#ranking-section .ranking-meta span { background: rgba(141, 255, 106, 0.12); border: 1px solid rgba(141, 255, 106, 0.2); border-radius: 999px; color: #c8ffb6; font-size: 12px; font-weight: 700; padding: 6px 10px; }

/* feature-section */
#feature-section { background: #f5fbf2; color: #112017; padding: 110px 6%; }
#feature-section .feature-grid { align-items: center; display: grid; gap: 64px; grid-template-columns: 0.9fr 1.1fr; margin: 0 auto; max-width: 1180px; }
#feature-section .feature-media { opacity: 0; transform: translateX(-40px); transition: opacity 0.8s ease, transform 0.8s ease; }
#feature-section.is-active .feature-media { opacity: 1; transform: translateX(0); }
#feature-section .feature-media img { aspect-ratio: 4 / 5; border-radius: 36px; box-shadow: 0 30px 70px rgba(17, 32, 23, 0.18); object-fit: cover; width: 100%; }
#feature-section .feature-content { opacity: 0; transform: translateX(40px); transition: opacity 0.8s ease 0.12s, transform 0.8s ease 0.12s; }
#feature-section.is-active .feature-content { opacity: 1; transform: translateX(0); }
#feature-section .section-label { color: #23824c; font-size: 14px; font-weight: 900; letter-spacing: 2px; margin-bottom: 12px; }
#feature-section h2 { color: #112017; font-size: clamp(30px, 4vw, 52px); font-weight: 900; line-height: 1.18; margin-bottom: 22px; }
#feature-section .feature-text { color: #5e6e63; font-size: 17px; margin-bottom: 34px; }
#feature-section .feature-list { display: grid; gap: 16px; }
#feature-section .feature-item { align-items: flex-start; background: #ffffff; border: 1px solid rgba(35, 130, 76, 0.12); border-radius: 22px; display: flex; gap: 16px; padding: 20px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
#feature-section .feature-item:hover { box-shadow: 0 18px 42px rgba(17, 32, 23, 0.1); transform: translateX(8px); }
#feature-section .feature-icon { align-items: center; background: #e8f9dc; border-radius: 16px; color: #23824c; display: flex; flex: 0 0 44px; font-size: 20px; font-weight: 900; height: 44px; justify-content: center; }
#feature-section h3 { color: #112017; font-size: 19px; font-weight: 900; margin-bottom: 4px; }
#feature-section p { color: #647368; font-size: 15px; }

/* comparison-section */
#comparison-section { background: linear-gradient(135deg, #0d2118, #07140f); padding: 110px 6%; }
#comparison-section .comparison-content { margin: 0 auto; max-width: 1180px; }
#comparison-section .section-label { color: #8dff6a; font-size: 14px; font-weight: 900; letter-spacing: 2px; margin-bottom: 12px; text-align: center; }
#comparison-section h2 { color: #ffffff; font-size: clamp(30px, 4vw, 52px); font-weight: 900; line-height: 1.18; margin: 0 auto 20px; max-width: 800px; text-align: center; }
#comparison-section .comparison-text { color: rgba(238, 247, 239, 0.68); margin: 0 auto; max-width: 720px; text-align: center; }
#comparison-section .comparison-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); margin-top: 48px; }
#comparison-section .comparison-item { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 30px; opacity: 0; overflow: hidden; transform: translateY(34px); transition: opacity 0.7s ease, transform 0.7s ease, border-color 0.3s ease; }
#comparison-section.is-active .comparison-item { opacity: 1; transform: translateY(0); }
#comparison-section.is-active .comparison-item:nth-child(2) { transition-delay: 0.1s; }
#comparison-section.is-active .comparison-item:nth-child(3) { transition-delay: 0.2s; }
#comparison-section .comparison-item:hover { border-color: rgba(141, 255, 106, 0.34); transform: translateY(-8px); }
#comparison-section .comparison-image img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
#comparison-section .comparison-body { padding: 26px; }
#comparison-section h3 { color: #ffffff; font-size: 22px; font-weight: 900; margin-bottom: 12px; }
#comparison-section p { color: rgba(238, 247, 239, 0.7); font-size: 15px; }

/* summary-section */
#summary-section { background: #f5fbf2; color: #112017; padding: 110px 6%; }
#summary-section .summary-content { background: linear-gradient(135deg, #143a27, #07140f); border-radius: 42px; display: grid; gap: 50px; grid-template-columns: 1fr 0.8fr; margin: 0 auto; max-width: 1180px; overflow: hidden; padding: 58px; position: relative; }
#summary-section .summary-content::after { background: radial-gradient( circle, rgba(141, 255, 106, 0.28), transparent 62% ); content: ""; height: 420px; position: absolute; right: -150px; top: -160px; width: 420px; }
#summary-section .summary-left { position: relative; z-index: 2; }
#summary-section .section-label { color: #8dff6a; font-size: 14px; font-weight: 900; letter-spacing: 2px; margin-bottom: 12px; }
#summary-section h2 { color: #ffffff; font-size: clamp(30px, 4vw, 52px); font-weight: 900; line-height: 1.18; margin-bottom: 20px; }
#summary-section .summary-text { color: rgba(238, 247, 239, 0.74); font-size: 17px; max-width: 680px; }
#summary-section .summary-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
#summary-section .summary-link { background: #8dff6a; border-radius: 999px; color: #07140f; display: inline-flex; font-weight: 900; padding: 14px 24px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
#summary-section .summary-link:hover { box-shadow: 0 16px 34px rgba(141, 255, 106, 0.24); transform: translateY(-4px); }
#summary-section .summary-right { align-content: center; display: grid; gap: 16px; position: relative; z-index: 2; }
#summary-section .summary-item { background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 24px; color: #ffffff; opacity: 0; padding: 20px; transform: translateX(34px); transition: opacity 0.7s ease, transform 0.7s ease; }
#summary-section.is-active .summary-item { opacity: 1; transform: translateX(0); }
#summary-section.is-active .summary-item:nth-child(2) { transition-delay: 0.1s; }
#summary-section.is-active .summary-item:nth-child(3) { transition-delay: 0.2s; }
#summary-section strong { color: #8dff6a; display: block; font-size: 26px; line-height: 1; margin-bottom: 8px; }
#summary-section span { color: rgba(238, 247, 239, 0.68); font-size: 14px; }

/* footer */
footer { background: #07140f; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 36px 6%; }
footer .footer-content { align-items: center; display: flex; gap: 20px; justify-content: space-between; margin: 0 auto; max-width: 1280px; }
footer .footer-brand { color: #ffffff; font-size: 18px; font-weight: 900; }
footer .footer-text { color: rgba(238, 247, 239, 0.58); font-size: 14px; }
footer .footer-links { display: flex; gap: 18px; }
footer .footer-links a { color: rgba(238, 247, 239, 0.68); font-size: 14px; transition: color 0.3s ease; }
footer .footer-links a:hover { color: #8dff6a; }

@media (max-width: 1280px) {
	#guide-section .guide-grid { grid-template-columns: repeat(3, 1fr); }
	#ranking-section .ranking-grid { gap: 18px; }
	#ranking-section .ranking-item { grid-template-columns: 150px 1fr; }
}
@media (max-width: 960px) {
	header { padding: 16px 5%; }
	header nav { display: none; }
	#hero-section { padding: 130px 5% 80px; }
	#hero-section .hero-grid { gap: 42px; grid-template-columns: 1fr; }
	#hero-section .hero-media { max-width: 540px; }
	#guide-section { padding: 90px 5%; }
	#guide-section .guide-grid { grid-template-columns: repeat(2, 1fr); }
	#ranking-section { padding: 90px 5%; }
	#ranking-section .ranking-head { align-items: flex-start; flex-direction: column; }
	#ranking-section .ranking-grid { grid-template-columns: 1fr; }
	#feature-section { padding: 90px 5%; }
	#feature-section .feature-grid { gap: 42px; grid-template-columns: 1fr; }
	#feature-section .feature-media { max-width: 520px; }
	#comparison-section { padding: 90px 5%; }
	#comparison-section .comparison-grid { grid-template-columns: 1fr; }
	#summary-section { padding: 90px 5%; }
	#summary-section .summary-content { grid-template-columns: 1fr; padding: 44px; }
}
@media (max-width: 768px) {
	header h1 { font-size: 18px; }
	header .header-action { display: none; }
	#hero-section h2 { font-size: 44px; }
	#hero-section .hero-text { font-size: 16px; }
	#hero-section .hero-badge { bottom: 22px; left: 18px; }
	#guide-section .guide-grid { grid-template-columns: 1fr; }
	#ranking-section .ranking-item { grid-template-columns: 1fr; }
	#ranking-section .ranking-media { min-height: 240px; }
	#ranking-section .ranking-content-box { padding: 4px; }
	#feature-section .feature-item { align-items: flex-start; }
	#summary-section .summary-content { border-radius: 30px; padding: 34px; }
	footer .footer-content { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 500px) {
	header { padding: 14px 18px; }
	header .brand-mark { border-radius: 13px; height: 38px; width: 38px; }
	#hero-section { padding: 116px 18px 70px; }
	#hero-section h2 { font-size: 36px; }
	#hero-section .hero-actions { flex-direction: column; }
	#hero-section .hero-link { justify-content: center; width: 100%; }
	#guide-section { padding: 72px 18px; }
	#ranking-section { padding: 72px 18px; }
	#ranking-section h3 { font-size: 21px; }
	#feature-section { padding: 72px 18px; }
	#comparison-section { padding: 72px 18px; }
	#summary-section { padding: 72px 18px; }
	#summary-section .summary-content { padding: 28px 22px; }
	footer { padding: 30px 18px; }
	footer .footer-links { flex-wrap: wrap; }
}