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

html { scroll-behavior: smooth; }

body { background: #0a0d14; color: #eef3ff; font-family: "Noto Sans TC", sans-serif; line-height: 1.7; overflow-x: hidden; }
body::before { background: radial-gradient( circle at 15% 10%, rgba(98, 226, 255, 0.18), transparent 28% ), radial-gradient( circle at 88% 14%, rgba(174, 91, 255, 0.18), transparent 30% ), linear-gradient(180deg, #111726 0%, #090c13 52%, #0c1018 100%); content: ""; inset: 0; position: fixed; z-index: -2; }
body::after { background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 46px 46px; content: ""; inset: 0; opacity: 0.22; position: fixed; z-index: -1; }

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

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

main { overflow: hidden; }

.page-shell { margin: 0 auto; max-width: 1180px; padding: 0 28px; }

.reveal-item { opacity: 0; transform: translateY(34px); transition: opacity 0.75s ease, transform 0.75s ease; }
.reveal-item.is-active { opacity: 1; transform: translateY(0); }

header { align-items: center; backdrop-filter: blur(18px); background: rgba(7, 10, 18, 0.78); border-bottom: 1px solid rgba(255, 255, 255, 0.08); display: flex; justify-content: space-between; left: 0; padding: 18px 5vw; position: sticky; right: 0; top: 0; z-index: 20; }
header .site-title { align-items: center; display: flex; font-size: 22px; font-weight: 900; gap: 12px; letter-spacing: 0.04em; }
header .site-title::before { background: linear-gradient(135deg, #66e7ff, #a56bff 58%, #f6ff7a); border-radius: 15px; box-shadow: 0 0 28px rgba(102, 231, 255, 0.32); content: ""; height: 34px; width: 34px; }
header .nav-list { align-items: center; display: flex; gap: 8px; list-style: none; }
header .nav-list a { border: 1px solid transparent; border-radius: 999px; color: #b9c6dc; display: block; font-size: 14px; font-weight: 700; padding: 9px 14px; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
header .nav-list a:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.13); color: #fff; }

#hero-section { min-height: calc(100vh - 72px); padding: 88px 0 70px; position: relative; }
#hero-section .hero-grid { align-items: center; display: grid; gap: 58px; grid-template-columns: 1fr 0.92fr; }
#hero-section .hero-kicker { align-items: center; background: rgba(102, 231, 255, 0.09); border: 1px solid rgba(102, 231, 255, 0.24); border-radius: 999px; color: #8ff1ff; display: inline-flex; font-size: 14px; font-weight: 800; gap: 10px; margin-bottom: 22px; padding: 8px 14px; }
#hero-section .hero-kicker::before { background: #7bf2ff; border-radius: 50%; box-shadow: 0 0 18px #7bf2ff; content: ""; height: 8px; width: 8px; }
#hero-section .hero-title { font-size: clamp(42px, 6vw, 84px); font-weight: 900; letter-spacing: -0.05em; line-height: 1.02; margin-bottom: 24px; }
#hero-section .hero-title span { background: linear-gradient( 90deg, #ffffff, #88edff 42%, #bd8cff 78%, #fff47a ); -webkit-background-clip: text; color: transparent; display: block; }
#hero-section .hero-text { color: #c1cade; font-size: 18px; max-width: 620px; }
#hero-section .hero-action-list { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; margin-top: 34px; }
#hero-section .hero-action-list a { background: #eef3ff; border-radius: 999px; color: #0b0f17; display: inline-flex; font-weight: 900; padding: 13px 20px; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; }
#hero-section .hero-action-list li:nth-child(2) a { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: #eef3ff; }
#hero-section .hero-action-list a:hover { box-shadow: 0 14px 36px rgba(102, 231, 255, 0.22); transform: translateY(-3px); }
#hero-section .hero-media { isolation: isolate; position: relative; }
#hero-section .hero-image { background: linear-gradient( 145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03) ); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 38px; box-shadow: 0 34px 90px rgba(0, 0, 0, 0.38); padding: 20px; transform: rotate(2deg); transition: transform 0.75s ease; }
#hero-section .hero-image img { border-radius: 28px; filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.36)); width: 100%; }
#hero-section .hero-media.is-active .hero-image { transform: rotate(0deg) translateY(-8px); }
#hero-section .hero-badge { background: rgba(8, 13, 22, 0.86); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 22px; bottom: 20px; box-shadow: 0 22px 42px rgba(0, 0, 0, 0.35); left: -18px; padding: 18px; position: absolute; width: 210px; z-index: 2; }
#hero-section .hero-badge strong { display: block; font-size: 24px; line-height: 1; }
#hero-section .hero-badge span { color: #aab7ce; display: block; font-size: 13px; margin-top: 8px; }

#overview-section { padding: 86px 0; }
#overview-section .overview-grid { display: grid; gap: 22px; grid-template-columns: 1.15fr 0.85fr; }
#overview-section .overview-content { background: linear-gradient( 145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045) ); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 34px; padding: 38px; }
#overview-section .overview-subtitle { color: #7df0ff; font-size: 14px; font-weight: 900; letter-spacing: 0.14em; margin-bottom: 12px; text-transform: uppercase; }
#overview-section .overview-title { font-size: clamp(30px, 4vw, 52px); font-weight: 900; letter-spacing: -0.035em; line-height: 1.15; margin-bottom: 18px; }
#overview-section .overview-text { color: #c5cee0; font-size: 17px; }
#overview-section .overview-stat-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
#overview-section .overview-stat-item { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 28px; padding: 26px; transition: transform 0.35s ease, background 0.35s ease; }
#overview-section .overview-stat-item:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-5px); }
#overview-section .overview-stat-number { color: #fff47a; display: block; font-size: 38px; font-weight: 900; line-height: 1; margin-bottom: 10px; }
#overview-section .overview-stat-text { color: #afbdd4; font-size: 14px; }

#firmware-section { padding: 90px 0; }
#firmware-section .section-head { align-items: end; display: flex; gap: 28px; justify-content: space-between; margin-bottom: 34px; }
#firmware-section .section-title { font-size: clamp(32px, 4.5vw, 58px); font-weight: 900; letter-spacing: -0.04em; line-height: 1.1; }
#firmware-section .section-text { color: #b9c6dc; max-width: 430px; }
#firmware-section .firmware-grid { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); }
#firmware-section .firmware-item { background: #111827; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 30px; min-height: 330px; overflow: hidden; position: relative; transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; }
#firmware-section .firmware-item:hover { border-color: rgba(126, 240, 255, 0.45); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32); transform: translateY(-8px); }
#firmware-section .firmware-media { height: 150px; overflow: hidden; }
#firmware-section .firmware-media img { height: 100%; object-fit: cover; transition: transform 0.5s ease; width: 100%; }
#firmware-section .firmware-item:hover .firmware-media img { transform: scale(1.08); }
#firmware-section .firmware-content { padding: 24px; }
#firmware-section .firmware-label { color: #8ff1ff; font-size: 12px; font-weight: 900; letter-spacing: 0.14em; margin-bottom: 10px; text-transform: uppercase; }
#firmware-section .firmware-title { font-size: 23px; font-weight: 900; margin-bottom: 10px; }
#firmware-section .firmware-text { color: #b8c4d8; font-size: 14px; }
#firmware-section .firmware-link { align-items: center; color: #fff47a; display: inline-flex; font-size: 14px; font-weight: 900; gap: 8px; margin-top: 18px; }

#process-section { padding: 90px 0; }
#process-section .process-grid { align-items: start; display: grid; gap: 46px; grid-template-columns: 0.74fr 1fr; }
#process-section .process-left { position: sticky; top: 108px; }
#process-section .process-subtitle { color: #bd8cff; font-size: 14px; font-weight: 900; letter-spacing: 0.14em; margin-bottom: 12px; text-transform: uppercase; }
#process-section .process-title { font-size: clamp(32px, 4.5vw, 56px); font-weight: 900; letter-spacing: -0.04em; line-height: 1.12; margin-bottom: 18px; }
#process-section .process-text { color: #c1cade; }
#process-section .process-list { display: grid; gap: 16px; list-style: none; }
#process-section .process-item { background: rgba(255, 255, 255, 0.075); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 28px; display: grid; gap: 20px; grid-template-columns: 70px 1fr; padding: 24px; transition: background 0.35s ease, transform 0.35s ease; }
#process-section .process-item:hover { background: rgba(255, 255, 255, 0.105); transform: translateX(8px); }
#process-section .process-number { align-items: center; background: linear-gradient(135deg, #66e7ff, #a56bff); border-radius: 22px; color: #06101a; display: flex; font-size: 22px; font-weight: 900; height: 58px; justify-content: center; width: 58px; }
#process-section .process-item-title { font-size: 21px; font-weight: 900; margin-bottom: 6px; }
#process-section .process-item-text { color: #b9c6dc; }

#compare-section { padding: 90px 0; }
#compare-section .compare-content { background: linear-gradient( 135deg, rgba(102, 231, 255, 0.14), rgba(189, 140, 255, 0.12) ); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 40px; overflow: hidden; padding: 38px; position: relative; }
#compare-section .compare-title { font-size: clamp(31px, 4.5vw, 54px); font-weight: 900; letter-spacing: -0.04em; line-height: 1.15; margin-bottom: 14px; max-width: 760px; }
#compare-section .compare-text { color: #c7d1e3; margin-bottom: 32px; max-width: 700px; }
#compare-section .compare-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
#compare-section .compare-item { background: rgba(7, 10, 18, 0.62); border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 26px; padding: 24px; }
#compare-section .compare-icon { align-items: center; background: rgba(255, 255, 255, 0.1); border-radius: 18px; display: flex; font-size: 24px; height: 52px; justify-content: center; margin-bottom: 16px; width: 52px; }
#compare-section .compare-item-title { font-size: 20px; font-weight: 900; margin-bottom: 8px; }
#compare-section .compare-item-text { color: #b9c6dc; font-size: 14px; }

#dual-section { padding: 88px 0 110px; }
#dual-section .dual-grid { align-items: center; display: grid; gap: 48px; grid-template-columns: 0.92fr 1fr; }
#dual-section .dual-media { background: radial-gradient( circle at 50% 35%, rgba(246, 255, 122, 0.2), transparent 46% ), rgba(255, 255, 255, 0.065); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 38px; padding: 26px; }
#dual-section .dual-media img { border-radius: 28px; box-shadow: 0 28px 60px rgba(0, 0, 0, 0.34); height: 420px; object-fit: cover; width: 100%; }
#dual-section .dual-subtitle { color: #fff47a; font-size: 14px; font-weight: 900; letter-spacing: 0.14em; margin-bottom: 12px; text-transform: uppercase; }
#dual-section .dual-title { font-size: clamp(32px, 4.5vw, 56px); font-weight: 900; letter-spacing: -0.04em; line-height: 1.12; margin-bottom: 18px; }
#dual-section .dual-text { color: #c1cade; font-size: 17px; margin-bottom: 28px; }
#dual-section .dual-list { display: grid; gap: 14px; list-style: none; }
#dual-section .dual-item { align-items: flex-start; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 22px; display: flex; gap: 14px; padding: 18px; }
#dual-section .dual-item::before { background: #7bf2ff; border-radius: 50%; box-shadow: 0 0 18px rgba(123, 242, 255, 0.8); content: ""; flex: 0 0 auto; height: 10px; margin-top: 8px; width: 10px; }
#dual-section .dual-item strong { color: #ffffff; display: block; margin-bottom: 2px; }
#dual-section .dual-item span { color: #acb9d0; display: block; font-size: 14px; }

footer { background: #070a11; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 34px 5vw; }
footer .footer-grid { align-items: center; display: grid; gap: 18px; grid-template-columns: 1fr auto; margin: 0 auto; max-width: 1180px; }
footer .footer-title { font-size: 18px; font-weight: 900; margin-bottom: 4px; }
footer .footer-text { color: #93a0b6; font-size: 14px; }
footer .footer-list { display: flex; gap: 10px; list-style: none; }
footer .footer-list a { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; color: #c5cee0; display: block; font-size: 13px; font-weight: 800; padding: 8px 13px; transition: background 0.3s ease, color 0.3s ease; }
footer .footer-list a:hover { background: #eef3ff; color: #080c14; }

@media (max-width: 1280px) {
	#hero-section .hero-grid { gap: 42px; }
	#firmware-section .firmware-grid { grid-template-columns: repeat(2, 1fr); }
	#dual-section .dual-media img { height: 380px; }
}
@media (max-width: 960px) {
	header { align-items: flex-start; flex-direction: column; gap: 14px; }
	header .nav-list { flex-wrap: wrap; }
	#hero-section { padding: 64px 0 54px; }
	#hero-section .hero-grid { grid-template-columns: 1fr; }
	#overview-section .overview-grid { grid-template-columns: 1fr; }
	#process-section .process-grid { grid-template-columns: 1fr; }
	#process-section .process-left { position: static; }
	#compare-section .compare-grid { grid-template-columns: 1fr; }
	#dual-section .dual-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
	.page-shell { padding: 0 20px; }
	header { padding: 16px 20px; }
	header .nav-list a { font-size: 13px; padding: 8px 10px; }
	#hero-section .hero-badge { left: 12px; width: 190px; }
	#overview-section .overview-stat-grid { grid-template-columns: 1fr; }
	#firmware-section .section-head { align-items: flex-start; flex-direction: column; }
	#firmware-section .firmware-grid { grid-template-columns: 1fr; }
	#process-section .process-item { grid-template-columns: 1fr; }
	#dual-section .dual-media img { height: 320px; }
	footer .footer-grid { grid-template-columns: 1fr; }
	footer .footer-list { flex-wrap: wrap; }
}
@media (max-width: 500px) {
	header .site-title { font-size: 19px; }
	#hero-section { min-height: auto; padding: 48px 0 42px; }
	#hero-section .hero-title { font-size: 40px; }
	#hero-section .hero-text { font-size: 16px; }
	#hero-section .hero-action-list { flex-direction: column; }
	#hero-section .hero-action-list a { justify-content: center; width: 100%; }
	#overview-section, #firmware-section, #process-section, #compare-section, #dual-section { padding: 58px 0; }
	#overview-section .overview-content, #compare-section .compare-content { border-radius: 28px; padding: 26px; }
	#dual-section .dual-media img { height: 250px; }
}