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

html { scroll-behavior: smooth; }

body { background: #f4f7fb; color: #152033; 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 { align-items: center; backdrop-filter: blur(18px); background: rgba(255, 255, 255, 0.9); border-bottom: 1px solid rgba(31, 54, 94, 0.08); display: flex; justify-content: space-between; left: 0; padding: 18px 7%; position: fixed; right: 0; top: 0; transition: box-shadow 0.35s ease, padding 0.35s ease; z-index: 20; }
header.is-scrolled { box-shadow: 0 18px 45px rgba(11, 29, 58, 0.12); padding: 12px 7%; }
header .site-brand { align-items: center; display: flex; gap: 14px; }
header .brand-mark { align-items: center; background: linear-gradient(135deg, #0f2d56, #1f75d6); border-radius: 18px; color: #fff; display: flex; font-size: 15px; font-weight: 900; height: 46px; justify-content: center; letter-spacing: 0.08em; width: 46px; }
header h1 { color: #10264a; font-size: 18px; font-weight: 900; letter-spacing: 0.03em; }
header .header-nav { align-items: center; display: flex; gap: 28px; }
header .header-nav a { color: #53627a; font-size: 15px; font-weight: 700; position: relative; transition: color 0.3s ease; }
header .header-nav a::after { background: #1f75d6; border-radius: 99px; bottom: -8px; content: ""; height: 3px; left: 0; position: absolute; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; width: 100%; }
header .header-nav a:hover { color: #1f75d6; }
header .header-nav a:hover::after { transform: scaleX(1); }
header .nav-toggle { display: none; }

main { overflow: hidden; }

#hero-section { background: radial-gradient(circle at 82% 12%, rgba(31, 117, 214, 0.18), transparent 34%), linear-gradient(135deg, #07182f 0%, #10294e 54%, #173c70 100%); color: #fff; min-height: 100vh; padding: 150px 7% 90px; position: relative; }
#hero-section::before { background: linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 58px 58px; content: ""; inset: 0; opacity: 0.35; position: absolute; }
#hero-section .hero-content { align-items: center; display: grid; gap: 68px; grid-template-columns: 1.05fr 0.95fr; margin: 0 auto; max-width: 1240px; position: relative; z-index: 1; }
#hero-section .hero-label { align-items: center; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; color: #b9d8ff; display: inline-flex; font-size: 14px; font-weight: 700; gap: 10px; margin-bottom: 24px; padding: 8px 16px; }
#hero-section .hero-label::before { background: #49d0ff; border-radius: 50%; box-shadow: 0 0 18px rgba(73, 208, 255, 0.75); content: ""; height: 8px; width: 8px; }
#hero-section .hero-title { font-size: clamp(42px, 6vw, 76px); font-weight: 900; letter-spacing: -0.04em; line-height: 1.08; margin-bottom: 24px; }
#hero-section .hero-subtitle { color: #d8e8ff; font-size: 20px; max-width: 680px; }
#hero-section .hero-action { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 38px; }
#hero-section .hero-link { align-items: center; border-radius: 999px; display: inline-flex; font-weight: 800; justify-content: center; min-height: 52px; padding: 0 24px; transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; }
#hero-section .hero-link.primary { background: #ffffff; color: #10294e; }
#hero-section .hero-link.secondary { border: 1px solid rgba(255,255,255,0.35); color: #ffffff; }
#hero-section .hero-link:hover { transform: translateY(-4px); }
#hero-section .hero-media { perspective: 1200px; position: relative; }
#hero-section .product-card { background: rgba(255,255,255,0.95); border: 1px solid rgba(255,255,255,0.55); border-radius: 36px; box-shadow: 0 35px 90px rgba(0, 0, 0, 0.32); color: #162844; overflow: hidden; padding: 16px; transform: rotateY(-8deg) rotateX(5deg); transition: transform 0.8s ease, opacity 0.8s ease; }
#hero-section.is-active .product-card { transform: rotateY(0deg) rotateX(0deg); }
#hero-section .product-image { border-radius: 28px; height: 430px; object-fit: cover; width: 100%; }
#hero-section .product-meta { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); margin-top: 16px; }
#hero-section .product-meta-item { background: #fff; border-radius: 18px; padding: 16px; }
#hero-section .product-meta-title { color: #6d7d94; display: block; font-size: 12px; font-weight: 700; }
#hero-section .product-meta-text { color: #10294e; display: block; font-size: 18px; font-weight: 900; margin-top: 4px; }

#feature-section { background: #ffffff; padding: 110px 7%; }
#feature-section .feature-content { margin: 0 auto; max-width: 1240px; }
#feature-section .section-kicker { color: #1f75d6; font-size: 14px; font-weight: 900; letter-spacing: 0.16em; margin-bottom: 10px; text-transform: uppercase; }
#feature-section h2 { color: #10264a; font-size: clamp(32px, 4vw, 52px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.18; margin-bottom: 22px; max-width: 760px; }
#feature-section .section-text { color: #65738a; font-size: 18px; max-width: 840px; }
#feature-section .feature-grid { display: grid; gap: 22px; grid-template-columns: repeat(4, 1fr); margin-top: 54px; }
#feature-section .feature-item { background: linear-gradient(180deg, #f8fbff, #ffffff); border: 1px solid #e4ebf5; border-radius: 28px; min-height: 260px; opacity: 0; padding: 30px; transform: translateY(34px); transition: opacity 0.75s ease, transform 0.75s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
#feature-section.is-active .feature-item { opacity: 1; transform: translateY(0); }
#feature-section.is-active .feature-item:nth-child(2) { transition-delay: 0.08s; }
#feature-section.is-active .feature-item:nth-child(3) { transition-delay: 0.16s; }
#feature-section.is-active .feature-item:nth-child(4) { transition-delay: 0.24s; }
#feature-section .feature-item:hover { border-color: rgba(31, 117, 214, 0.42); box-shadow: 0 24px 56px rgba(16, 41, 78, 0.12); }
#feature-section .feature-icon { align-items: center; background: #eaf3ff; border-radius: 18px; color: #1f75d6; display: flex; font-size: 28px; font-weight: 900; height: 58px; justify-content: center; margin-bottom: 28px; width: 58px; }
#feature-section .feature-title { color: #132a4d; font-size: 21px; font-weight: 900; margin-bottom: 12px; }
#feature-section .feature-text { color: #65738a; font-size: 15px; }

#precision-section { background: linear-gradient(180deg, #f4f7fb, #eaf1fa); padding: 110px 7%; }
#precision-section .precision-content { align-items: center; display: grid; gap: 64px; grid-template-columns: 0.9fr 1.1fr; margin: 0 auto; max-width: 1240px; }
#precision-section .precision-media { background: #10294e; border-radius: 34px; box-shadow: 0 32px 80px rgba(16, 41, 78, 0.22); overflow: hidden; padding: 18px; position: relative; }
#precision-section .precision-image { border-radius: 26px; height: 520px; object-fit: cover; width: 100%; }
#precision-section .section-kicker { color: #1f75d6; font-size: 14px; font-weight: 900; letter-spacing: 0.16em; margin-bottom: 10px; text-transform: uppercase; }
#precision-section h2 { color: #10264a; font-size: clamp(32px, 4vw, 52px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.18; margin-bottom: 22px; }
#precision-section .precision-text { color: #65738a; font-size: 18px; margin-bottom: 34px; }
#precision-section .precision-list { display: grid; gap: 16px; }
#precision-section .precision-item { align-items: flex-start; background: #ffffff; border: 1px solid #dde7f4; border-radius: 22px; display: flex; gap: 16px; opacity: 0; padding: 22px; transform: translateX(36px); transition: opacity 0.65s ease, transform 0.65s ease; }
#precision-section.is-active .precision-item { opacity: 1; transform: translateX(0); }
#precision-section.is-active .precision-item:nth-child(2) { transition-delay: 0.1s; }
#precision-section.is-active .precision-item:nth-child(3) { transition-delay: 0.2s; }
#precision-section .precision-number { align-items: center; background: #10294e; border-radius: 14px; color: #ffffff; display: flex; flex: 0 0 42px; font-size: 14px; font-weight: 900; height: 42px; justify-content: center; }
#precision-section .precision-title { color: #132a4d; font-size: 18px; font-weight: 900; margin-bottom: 4px; }
#precision-section .precision-description { color: #65738a; font-size: 15px; }

#application-section { background: #ffffff; padding: 110px 7%; }
#application-section .application-content { align-items: center; display: grid; gap: 58px; grid-template-columns: 1.05fr 0.95fr; margin: 0 auto; max-width: 1240px; }
#application-section .section-kicker { color: #1f75d6; font-size: 14px; font-weight: 900; letter-spacing: 0.16em; margin-bottom: 10px; text-transform: uppercase; }
#application-section h2 { color: #10264a; font-size: clamp(32px, 4vw, 52px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.18; margin-bottom: 22px; }
#application-section .application-text { color: #65738a; font-size: 18px; margin-bottom: 34px; }
#application-section .application-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
#application-section .application-item { background: #f8fbff; border: 1px solid #e3ebf6; border-radius: 22px; opacity: 0; padding: 22px; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
#application-section.is-active .application-item { opacity: 1; transform: translateY(0); }
#application-section.is-active .application-item:nth-child(2) { transition-delay: 0.08s; }
#application-section.is-active .application-item:nth-child(3) { transition-delay: 0.16s; }
#application-section.is-active .application-item:nth-child(4) { transition-delay: 0.24s; }
#application-section .application-title { color: #132a4d; font-size: 18px; font-weight: 900; margin-bottom: 6px; }
#application-section .application-description { color: #65738a; font-size: 15px; }
#application-section .application-media { border-radius: 34px; box-shadow: 0 32px 80px rgba(16, 41, 78, 0.16); overflow: hidden; }
#application-section .application-image { height: 560px; object-fit: cover; width: 100%; }

#spec-section { background: #f4f7fb; padding: 110px 7%; }
#spec-section .spec-content { margin: 0 auto; max-width: 1240px; }
#spec-section .spec-head { align-items: end; display: grid; gap: 34px; grid-template-columns: 0.9fr 1.1fr; margin-bottom: 46px; }
#spec-section .section-kicker { color: #1f75d6; font-size: 14px; font-weight: 900; letter-spacing: 0.16em; margin-bottom: 10px; text-transform: uppercase; }
#spec-section h2 { color: #10264a; font-size: clamp(32px, 4vw, 52px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.18; }
#spec-section .spec-intro { color: #65738a; font-size: 18px; }
#spec-section .spec-media { border-radius: 34px; box-shadow: 0 30px 74px rgba(16, 41, 78, 0.16); margin-bottom: 34px; overflow: hidden; }
#spec-section .spec-image { height: 420px; object-fit: cover; width: 100%; }
#spec-section .spec-grid { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); }
#spec-section .spec-item { background: #ffffff; border: 1px solid #e3ebf6; border-radius: 26px; overflow: hidden; transform: translateY(28px); opacity: 0; transition: opacity 0.7s ease, transform 0.7s ease; }
#spec-section.is-active .spec-item { opacity: 1; transform: translateY(0); }
#spec-section.is-active .spec-item:nth-child(2) { transition-delay: 0.08s; }
#spec-section.is-active .spec-item:nth-child(3) { transition-delay: 0.16s; }
#spec-section.is-active .spec-item:nth-child(4) { transition-delay: 0.24s; }
#spec-section .spec-title { background: #10294e; color: #ffffff; font-size: 20px; font-weight: 900; padding: 20px 22px; }
#spec-section .spec-body { padding: 24px 22px; }
#spec-section .spec-size { color: #1f75d6; font-size: 34px; font-weight: 900; letter-spacing: -0.04em; margin-bottom: 8px; }
#spec-section .spec-text { color: #65738a; font-size: 15px; }

#combination-section { background: #ffffff; padding: 110px 7%; }
#combination-section .combination-content { align-items: center; display: grid; gap: 58px; grid-template-columns: 0.95fr 1.05fr; margin: 0 auto; max-width: 1240px; }
#combination-section .combination-media { border-radius: 34px; box-shadow: 0 30px 74px rgba(16, 41, 78, 0.16); overflow: hidden; }
#combination-section .combination-image { height: 560px; object-fit: cover; width: 100%; }
#combination-section .section-kicker { color: #1f75d6; font-size: 14px; font-weight: 900; letter-spacing: 0.16em; margin-bottom: 10px; text-transform: uppercase; }
#combination-section h2 { color: #10264a; font-size: clamp(32px, 4vw, 52px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.18; margin-bottom: 22px; }
#combination-section .combination-text { color: #65738a; font-size: 18px; margin-bottom: 34px; }
#combination-section .combination-list { display: grid; gap: 16px; }
#combination-section .combination-item { background: #f8fbff; border: 1px solid #e3ebf6; border-radius: 22px; opacity: 0; padding: 22px; transform: translateX(34px); transition: opacity 0.7s ease, transform 0.7s ease; }
#combination-section.is-active .combination-item { opacity: 1; transform: translateX(0); }
#combination-section.is-active .combination-item:nth-child(2) { transition-delay: 0.1s; }
#combination-section.is-active .combination-item:nth-child(3) { transition-delay: 0.2s; }
#combination-section .combination-title { color: #132a4d; font-size: 18px; font-weight: 900; margin-bottom: 6px; }
#combination-section .combination-description { color: #65738a; font-size: 15px; }

#material-section { background: linear-gradient(135deg, #0b1e39, #14345f); color: #ffffff; padding: 110px 7%; }
#material-section .material-content { display: grid; gap: 42px; grid-template-columns: 0.85fr 1.15fr; margin: 0 auto; max-width: 1240px; }
#material-section .section-kicker { color: #8fc6ff; font-size: 14px; font-weight: 900; letter-spacing: 0.16em; margin-bottom: 10px; text-transform: uppercase; }
#material-section h2 { font-size: clamp(32px, 4vw, 52px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.18; margin-bottom: 22px; }
#material-section .material-text { color: #d8e8ff; font-size: 18px; margin-bottom: 34px; }
#material-section .material-image { border-radius: 28px; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.24); height: 320px; object-fit: cover; width: 100%; }
#material-section .material-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
#material-section .material-item { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 24px; opacity: 0; padding: 26px; transform: scale(0.96); transition: opacity 0.7s ease, transform 0.7s ease, background 0.3s ease; }
#material-section.is-active .material-item { opacity: 1; transform: scale(1); }
#material-section.is-active .material-item:nth-child(2) { transition-delay: 0.08s; }
#material-section.is-active .material-item:nth-child(3) { transition-delay: 0.16s; }
#material-section.is-active .material-item:nth-child(4) { transition-delay: 0.24s; }
#material-section .material-item:hover { background: rgba(255,255,255,0.13); }
#material-section .material-code { color: #8fc6ff; font-size: 36px; font-weight: 900; letter-spacing: -0.04em; }
#material-section .material-title { font-size: 20px; font-weight: 900; margin: 8px 0; }
#material-section .material-description { color: #bfd8f8; font-size: 15px; }

#model-section { background: #f4f7fb; padding: 110px 7%; }
#model-section .model-content { margin: 0 auto; max-width: 1240px; }
#model-section .section-kicker { color: #1f75d6; font-size: 14px; font-weight: 900; letter-spacing: 0.16em; margin-bottom: 10px; text-align: center; text-transform: uppercase; }
#model-section h2 { color: #10264a; font-size: clamp(32px, 4vw, 52px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.18; margin: 0 auto 20px; max-width: 760px; text-align: center; }
#model-section .model-text { color: #65738a; font-size: 18px; margin: 0 auto 46px; max-width: 780px; text-align: center; }
#model-section .model-list { display: grid; gap: 16px; }
#model-section .model-item { align-items: center; background: #ffffff; border: 1px solid #e2eaf5; border-radius: 24px; display: grid; gap: 24px; grid-template-columns: 0.7fr 1fr 1fr 0.75fr; opacity: 0; padding: 22px 26px; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease, box-shadow 0.3s ease; }
#model-section.is-active .model-item { opacity: 1; transform: translateY(0); }
#model-section.is-active .model-item:nth-child(2) { transition-delay: 0.08s; }
#model-section.is-active .model-item:nth-child(3) { transition-delay: 0.16s; }
#model-section.is-active .model-item:nth-child(4) { transition-delay: 0.24s; }
#model-section .model-item:hover { box-shadow: 0 22px 52px rgba(16, 41, 78, 0.1); }
#model-section .model-name { color: #10294e; font-size: 26px; font-weight: 900; }
#model-section .model-info { color: #65738a; font-size: 15px; }
#model-section .model-tag { background: #eaf3ff; border-radius: 999px; color: #1f75d6; display: inline-flex; font-size: 14px; font-weight: 900; justify-content: center; padding: 8px 16px; }
#model-section .model-link { align-items: center; border: 1px solid #bfd4ee; border-radius: 999px; color: #10294e; display: inline-flex; font-size: 14px; font-weight: 900; justify-content: center; padding: 10px 16px; transition: background 0.3s ease, color 0.3s ease; }
#model-section .model-link:hover { background: #10294e; color: #ffffff; }

footer { background: #07182f; color: #d8e8ff; padding: 48px 7%; }
footer .footer-content { align-items: center; display: flex; gap: 24px; justify-content: space-between; margin: 0 auto; max-width: 1240px; }
footer .footer-title { color: #ffffff; font-size: 18px; font-weight: 900; }
footer .footer-text { color: #93a8c4; font-size: 14px; margin-top: 6px; }
footer .footer-nav { display: flex; flex-wrap: wrap; gap: 18px; }
footer .footer-nav a { color: #b9d8ff; font-size: 14px; font-weight: 700; transition: color 0.3s ease; }
footer .footer-nav a:hover { color: #ffffff; }

.reveal-section { opacity: 0; transform: translateY(46px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal-section.is-active { opacity: 1; transform: translateY(0); }

@media (max-width: 1280px) {
    header { padding: 16px 5%; }
    header.is-scrolled { padding: 12px 5%; }
    #hero-section { padding: 140px 5% 80px; }
    #feature-section { padding: 96px 5%; }
    #precision-section { padding: 96px 5%; }
    #application-section { padding: 96px 5%; }
    #spec-section { padding: 96px 5%; }
    #combination-section { padding: 96px 5%; }
    #material-section { padding: 96px 5%; }
    #model-section { padding: 96px 5%; }
    footer { padding: 44px 5%; }
}

@media (max-width: 960px) {
    header .header-nav { background: #ffffff; border: 1px solid #e2eaf5; border-radius: 22px; box-shadow: 0 24px 60px rgba(16,41,78,0.14); display: none; flex-direction: column; gap: 16px; padding: 22px; position: absolute; right: 5%; top: 78px; width: min(280px, 90vw); }
    header .header-nav.is-active { display: flex; }
    header .nav-toggle { align-items: center; border: 1px solid #d8e3f1; border-radius: 999px; color: #10294e; display: inline-flex; font-size: 14px; font-weight: 900; justify-content: center; padding: 9px 14px; }
    #hero-section .hero-content { gap: 46px; grid-template-columns: 1fr; }
    #hero-section .product-card { transform: none; }
    #feature-section .feature-grid { grid-template-columns: repeat(2, 1fr); }
    #precision-section .precision-content { grid-template-columns: 1fr; }
    #application-section .application-content { grid-template-columns: 1fr; }
    #spec-section .spec-head { grid-template-columns: 1fr; }
    #spec-section .spec-grid { grid-template-columns: repeat(2, 1fr); }
    #combination-section .combination-content { grid-template-columns: 1fr; }
    #material-section .material-content { grid-template-columns: 1fr; }
    #model-section .model-item { grid-template-columns: 1fr 1fr; }
    footer .footer-content { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 768px) {
    header h1 { font-size: 16px; }
    header .brand-mark { border-radius: 15px; height: 40px; width: 40px; }
    #hero-section { min-height: auto; padding: 124px 5% 72px; }
    #hero-section .hero-subtitle { font-size: 17px; }
    #hero-section .hero-action { align-items: stretch; flex-direction: column; }
    #hero-section .product-card { border-radius: 28px; padding: 12px; }
    #hero-section .product-image { border-radius: 22px; height: 330px; }
    #hero-section .product-meta { grid-template-columns: 1fr; }
    #feature-section .feature-grid { grid-template-columns: 1fr; }
    #precision-section .precision-image { height: 360px; }
    #application-section .application-grid { grid-template-columns: 1fr; }
    #application-section .application-image { height: 380px; }
    #spec-section .spec-image { height: 320px; }
    #spec-section .spec-grid { grid-template-columns: 1fr; }
    #combination-section .combination-image { height: 390px; }
    #material-section .material-grid { grid-template-columns: 1fr; }
    #model-section .model-item { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
    header { padding: 12px 4%; }
    header.is-scrolled { padding: 10px 4%; }
    header .site-brand { gap: 10px; }
    header h1 { max-width: 180px; }
    #hero-section { padding: 112px 4% 64px; }
    #hero-section .hero-title { font-size: 38px; }
    #hero-section .product-image { height: 270px; }
    #feature-section { padding: 76px 4%; }
    #precision-section { padding: 76px 4%; }
    #application-section { padding: 76px 4%; }
    #spec-section { padding: 76px 4%; }
    #combination-section { padding: 76px 4%; }
    #material-section { padding: 76px 4%; }
    #model-section { padding: 76px 4%; }
    #precision-section .precision-media { padding: 12px; }
    #application-section .application-image { height: 300px; }
    #spec-section .spec-image { height: 250px; }
    #combination-section .combination-image { height: 310px; }
    footer { padding: 38px 4%; }
}