* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0; font-family: "Noto Sans TC", sans-serif; color: #182033; background: #f4f6fb; }

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

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

header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(24, 32, 51, 0.08); }
header .header-inner { width: min(1180px, 92%); margin: 0 auto; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
header .site-brand { display: flex; align-items: center; gap: 12px; }
header .brand-mark { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; font-weight: 900; border-radius: 14px; background: linear-gradient(135deg, #2a68ff, #00c2ff 48%, #ff3f8e); box-shadow: 0 12px 30px rgba(42, 104, 255, 0.25); }
header h1 { margin: 0; font-size: 22px; letter-spacing: 0.06em; color: #111827; }
header nav { display: flex; align-items: center; gap: 8px; }
header nav a { padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 700; color: #4b5563; transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease; }
header nav a:hover { color: #0f4cff; background: rgba(42, 104, 255, 0.08); transform: translateY(-2px); }

main { overflow: hidden; }

#hero-section { position: relative; min-height: 690px; padding: 86px 0 72px; background: radial-gradient( circle at 14% 20%, rgba(0, 194, 255, 0.2), transparent 34% ), radial-gradient( circle at 84% 18%, rgba(255, 63, 142, 0.18), transparent 30% ), linear-gradient(145deg, #08111f 0%, #12264f 58%, #09111f 100%); color: #fff; }
#hero-section:before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 92%); }
#hero-section .hero-content { position: relative; width: min(1180px, 92%); margin: 0 auto; display: grid; grid-template-columns: 1.02fr 0.98fr; align-items: center; gap: 50px; }
#hero-section .hero-kicker { display: inline-flex; width: fit-content; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; background: rgba(255, 255, 255, 0.09); color: #bfeaff; font-weight: 700; letter-spacing: 0.08em; }
#hero-section .hero-title { margin: 22px 0 18px; font-size: clamp(42px, 6vw, 78px); line-height: 1.04; letter-spacing: -0.05em; font-weight: 900; }
#hero-section .hero-title span { display: block; color: #72e3ff; }
#hero-section .hero-text { max-width: 620px; margin: 0 0 32px; color: rgba(255, 255, 255, 0.78); font-size: 18px; line-height: 1.9; }
#hero-section .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
#hero-section .hero-link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 800; background: #fff; color: #10203d; box-shadow: 0 18px 42px rgba(0, 0, 0, 0.25); transition: transform 0.3s ease, box-shadow 0.3s ease; }
#hero-section .hero-link:hover { transform: translateY(-4px); box-shadow: 0 24px 54px rgba(0, 0, 0, 0.32); }
#hero-section .hero-link.is-ghost { color: #fff; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: none; }
#hero-section .hero-media { position: relative; min-height: 500px; }
#hero-section .hero-orbit { position: absolute; inset: 5% 2% 5% 8%; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 42px; transform: rotate(-6deg); }
#hero-section .hero-image { position: relative; width: min(480px, 100%); margin-left: auto; padding: 28px; border-radius: 38px; background: linear-gradient( 160deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06) ); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 32px 90px rgba(0, 0, 0, 0.38); transition: transform 0.8s ease, opacity 0.8s ease; opacity: 0; transform: translateY(30px) rotate(3deg); }
#hero-section.is-active .hero-image { opacity: 1; transform: translateY(0) rotate(0deg); }
#hero-section .hero-image img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 28px; background: #dbeafe; }
#hero-section .hero-badge { position: absolute; right: 0; bottom: 42px; display: grid; gap: 2px; padding: 18px 22px; border-radius: 24px; background: rgba(255, 255, 255, 0.92); color: #12264f; box-shadow: 0 20px 54px rgba(0, 0, 0, 0.28); }
#hero-section .hero-badge strong { font-size: 28px; line-height: 1; }
#hero-section .hero-badge span { color: #64748b; font-size: 14px; font-weight: 700; }

#category-section { padding: 92px 0; background: #fff; }
#category-section .category-content { width: min(1180px, 92%); margin: 0 auto; }
#category-section .section-title { margin: 0; font-size: clamp(30px, 4vw, 48px); color: #111827; letter-spacing: -0.04em; }
#category-section .section-subtitle { max-width: 760px; margin: 16px 0 0; color: #64748b; font-size: 17px; line-height: 1.9; }
#category-section .category-grid { margin-top: 36px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
#category-section .category-item { position: relative; min-height: 220px; padding: 24px; border-radius: 28px; overflow: hidden; background: #f8fafc; border: 1px solid #e5e7eb; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; opacity: 0; transform: translateY(28px); }
#category-section.is-active .category-item { opacity: 1; transform: translateY(0); }
#category-section .category-item:nth-child(2) { transition-delay: 0.08s; }
#category-section .category-item:nth-child(3) { transition-delay: 0.16s; }
#category-section .category-item:nth-child(4) { transition-delay: 0.24s; }
#category-section .category-item:hover { transform: translateY(-8px); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12); border-color: rgba(42, 104, 255, 0.28); }
#category-section .category-item:after { content: ""; position: absolute; width: 120px; height: 120px; right: -34px; bottom: -42px; border-radius: 40px; background: linear-gradient( 135deg, rgba(42, 104, 255, 0.18), rgba(0, 194, 255, 0.08) ); transform: rotate(18deg); }
#category-section .category-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 18px; background: #13233f; color: #72e3ff; font-weight: 900; font-size: 22px; }
#category-section .category-title { margin: 22px 0 10px; font-size: 21px; color: #111827; }
#category-section .category-text { margin: 0; color: #64748b; line-height: 1.8; }

#product-section { padding: 96px 0; background: linear-gradient(180deg, #f4f6fb 0%, #edf3ff 100%); }
#product-section .product-content { width: min(1180px, 92%); margin: 0 auto; }
#product-section .product-head { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 34px; align-items: end; margin-bottom: 34px; }
#product-section .section-title { margin: 0; font-size: clamp(30px, 4vw, 48px); color: #111827; letter-spacing: -0.04em; }
#product-section .section-subtitle { margin: 0; color: #64748b; font-size: 17px; line-height: 1.9; }
#product-section .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
#product-section .product-item { position: relative; overflow: hidden; border-radius: 32px; background: #fff; box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08); border: 1px solid rgba(148, 163, 184, 0.22); transition: transform 0.35s ease, box-shadow 0.35s ease; opacity: 0; transform: translateY(30px); }
#product-section.is-active .product-item { opacity: 1; transform: translateY(0); }
#product-section .product-item:nth-child(2) { transition-delay: 0.08s; }
#product-section .product-item:nth-child(3) { transition-delay: 0.16s; }
#product-section .product-item:nth-child(4) { transition-delay: 0.24s; }
#product-section .product-item:nth-child(5) { transition-delay: 0.32s; }
#product-section .product-item:nth-child(6) { transition-delay: 0.4s; }
#product-section .product-item:hover { transform: translateY(-10px); box-shadow: 0 26px 70px rgba(15, 23, 42, 0.14); }
#product-section .product-media { position: relative; padding: 24px; background: radial-gradient( circle at 50% 20%, #ffffff 0%, #dbeafe 52%, #c7d2fe 100% ); }
#product-section .product-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 24px; }
#product-section .product-tag { position: absolute; left: 22px; top: 22px; padding: 7px 12px; border-radius: 999px; background: #0f4cff; color: #fff; font-size: 13px; font-weight: 800; }
#product-section .product-info { padding: 22px; }
#product-section .product-title { min-height: 64px; margin: 0 0 16px; color: #111827; font-size: 18px; line-height: 1.55; }
#product-section .product-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
#product-section .product-price { color: #e11d48; font-size: 24px; font-weight: 900; }
#product-section .product-status { padding: 6px 10px; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: 13px; font-weight: 800; }
#product-section .product-status.is-muted { background: #f1f5f9; color: #64748b; }
#product-section .product-link { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; border-radius: 16px; color: #10203d; background: #f1f5f9; font-weight: 900; transition: color 0.3s ease, background 0.3s ease; }
#product-section .product-link:hover { color: #fff; background: #10203d; }

#feature-section { padding: 94px 0; background: #0b1220; color: #fff; }
#feature-section .feature-content { width: min(1180px, 92%); margin: 0 auto; display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 54px; align-items: center; }
#feature-section .feature-left { position: relative; padding: 34px; border-radius: 36px; background: linear-gradient( 145deg, rgba(42, 104, 255, 0.22), rgba(255, 255, 255, 0.06) ); border: 1px solid rgba(255, 255, 255, 0.12); opacity: 0; transform: translateX(-32px); transition: opacity 0.7s ease, transform 0.7s ease; }
#feature-section.is-active .feature-left { opacity: 1; transform: translateX(0); }
#feature-section .feature-left img { border-radius: 28px; background: #c7d2fe; }
#feature-section .feature-right { opacity: 0; transform: translateX(32px); transition: opacity 0.7s ease, transform 0.7s ease; }
#feature-section.is-active .feature-right { opacity: 1; transform: translateX(0); }
#feature-section .section-title { margin: 0; font-size: clamp(30px, 4vw, 48px); letter-spacing: -0.04em; }
#feature-section .section-subtitle { margin: 16px 0 28px; color: rgba(255, 255, 255, 0.72); font-size: 17px; line-height: 1.9; }
#feature-section .feature-list { display: grid; gap: 16px; }
#feature-section .feature-item { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 18px; border-radius: 22px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); }
#feature-section .feature-number { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; background: #72e3ff; color: #0b1220; font-weight: 900; }
#feature-section .feature-title { margin: 0 0 6px; font-size: 18px; }
#feature-section .feature-text { margin: 0; color: rgba(255, 255, 255, 0.7); line-height: 1.8; }

#display-section { padding: 92px 0; background: #fff; }
#display-section .display-content { width: min(1180px, 92%); margin: 0 auto; }
#display-section .display-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 34px; }
#display-section .section-title { max-width: 620px; margin: 0; font-size: clamp(30px, 4vw, 48px); color: #111827; letter-spacing: -0.04em; }
#display-section .section-subtitle { max-width: 420px; margin: 0; color: #64748b; font-size: 17px; line-height: 1.9; }
#display-section .display-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 22px; }
#display-section .display-item { position: relative; min-height: 330px; padding: 28px; border-radius: 34px; overflow: hidden; background: #f1f5f9; opacity: 0; transform: scale(0.96); transition: opacity 0.7s ease, transform 0.7s ease; }
#display-section.is-active .display-item { opacity: 1; transform: scale(1); }
#display-section .display-item:nth-child(2) { transition-delay: 0.12s; }
#display-section .display-item:nth-child(3) { transition-delay: 0.24s; }
#display-section .display-item.is-wide { grid-row: span 2; min-height: 682px; background: linear-gradient(150deg, #dbeafe, #f8fafc); }
#display-section .display-item img { position: absolute; right: 0; bottom: 0; width: 72%; max-height: 72%; object-fit: contain; }
#display-section .display-title { position: relative; z-index: 1; max-width: 340px; margin: 0 0 10px; color: #111827; font-size: 26px; }
#display-section .display-text { position: relative; z-index: 1; max-width: 360px; margin: 0; color: #64748b; line-height: 1.8; }

#guide-section { padding: 96px 0; background: linear-gradient(135deg, #10203d, #13233f); color: #fff; }
#guide-section .guide-content { width: min(1180px, 92%); margin: 0 auto; text-align: center; }
#guide-section .section-title { max-width: 760px; margin: 0 auto; font-size: clamp(32px, 5vw, 56px); letter-spacing: -0.05em; }
#guide-section .section-subtitle { max-width: 720px; margin: 18px auto 34px; color: rgba(255, 255, 255, 0.72); font-size: 17px; line-height: 1.9; }
#guide-section .guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; text-align: left; }
#guide-section .guide-item { padding: 26px; border-radius: 28px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; }
#guide-section.is-active .guide-item { opacity: 1; transform: translateY(0); }
#guide-section .guide-item:nth-child(2) { transition-delay: 0.1s; }
#guide-section .guide-item:nth-child(3) { transition-delay: 0.2s; }
#guide-section .guide-label { display: inline-flex; margin-bottom: 18px; padding: 7px 12px; border-radius: 999px; color: #10203d; background: #72e3ff; font-size: 13px; font-weight: 900; }
#guide-section .guide-title { margin: 0 0 10px; font-size: 20px; }
#guide-section .guide-text { margin: 0; color: rgba(255, 255, 255, 0.72); line-height: 1.85; }
#guide-section .guide-link { display: inline-flex; align-items: center; justify-content: center; margin-top: 36px; min-height: 50px; padding: 0 26px; border-radius: 999px; color: #10203d; background: #fff; font-weight: 900; box-shadow: 0 22px 54px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; }
#guide-section .guide-link:hover { transform: translateY(-4px); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28); }

footer { padding: 38px 0; background: #070b13; color: rgba(255, 255, 255, 0.62); }
footer .footer-inner { width: min(1180px, 92%); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
footer .footer-brand { color: #fff; font-size: 18px; font-weight: 900; letter-spacing: 0.06em; }
footer .footer-nav { display: flex; flex-wrap: wrap; gap: 12px; }
footer .footer-nav a { font-size: 14px; transition: color 0.3s ease; }
footer .footer-nav a:hover { color: #72e3ff; }

@keyframes soft-float { 0% { transform: translateY(0); } 50% { transform: translateY(-12px); } 100% { transform: translateY(0); } }

#hero-section .hero-orbit { animation: soft-float 4.8s ease-in-out infinite; }

@media (max-width: 1280px) {
	header .header-inner { width: min(1080px, 92%); }
	#hero-section .hero-content { width: min(1080px, 92%); }
	#category-section .category-content { width: min(1080px, 92%); }
	#product-section .product-content { width: min(1080px, 92%); }
	#feature-section .feature-content { width: min(1080px, 92%); }
	#display-section .display-content { width: min(1080px, 92%); }
	#guide-section .guide-content { width: min(1080px, 92%); }
	footer .footer-inner { width: min(1080px, 92%); }
}
@media (max-width: 960px) {
	header .header-inner { min-height: auto; padding: 16px 0; align-items: flex-start; flex-direction: column; }
	header nav { width: 100%; overflow-x: auto; padding-bottom: 4px; }
	header nav a { white-space: nowrap; }
	#hero-section { padding: 64px 0; }
	#hero-section .hero-content { grid-template-columns: 1fr; }
	#hero-section .hero-media { min-height: auto; }
	#hero-section .hero-image { margin: 0; }
	#category-section .category-grid { grid-template-columns: repeat(2, 1fr); }
	#product-section .product-head { grid-template-columns: 1fr; }
	#product-section .product-grid { grid-template-columns: repeat(2, 1fr); }
	#feature-section .feature-content { grid-template-columns: 1fr; }
	#display-section .display-head { align-items: flex-start; flex-direction: column; }
	#display-section .display-grid { grid-template-columns: 1fr; }
	#display-section .display-item.is-wide { grid-row: auto; min-height: 430px; }
	#guide-section .guide-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
	header h1 { font-size: 20px; }
	#hero-section { min-height: auto; padding: 54px 0; }
	#hero-section .hero-title { font-size: 42px; }
	#hero-section .hero-text { font-size: 16px; }
	#hero-section .hero-actions { flex-direction: column; }
	#hero-section .hero-link { width: 100%; }
	#category-section { padding: 68px 0; }
	#product-section { padding: 70px 0; }
	#feature-section { padding: 72px 0; }
	#display-section { padding: 70px 0; }
	#guide-section { padding: 72px 0; }
	#product-section .product-grid { grid-template-columns: 1fr; }
	#display-section .display-item { min-height: 360px; }
	#display-section .display-item img { width: 82%; }
	footer .footer-inner { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 500px) {
	header .brand-mark { width: 38px; height: 38px; border-radius: 12px; }
	header h1 { font-size: 18px; }
	header nav a { padding: 9px 11px; font-size: 14px; }
	#hero-section .hero-title { font-size: 36px; }
	#hero-section .hero-image { padding: 16px; border-radius: 28px; }
	#hero-section .hero-badge { position: relative; right: auto; bottom: auto; margin-top: 16px; width: fit-content; }
	#category-section .category-grid { grid-template-columns: 1fr; }
	#category-section .category-item { min-height: 190px; }
	#product-section .product-info { padding: 18px; }
	#feature-section .feature-left { padding: 18px; border-radius: 28px; }
	#feature-section .feature-item { grid-template-columns: 1fr; }
	#display-section .display-item { padding: 22px; border-radius: 28px; }
	#display-section .display-title { font-size: 22px; }
}