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

html { scroll-behavior: smooth; }

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

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

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

header { align-items: center; background: rgba(43, 54, 30, 0.88); backdrop-filter: blur(18px); color: #fff8e8; display: flex; justify-content: space-between; left: 0; padding: 18px 7%; position: fixed; top: 0; transition: background 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease; width: 100%; z-index: 20; }
header.is-scrolled { background: rgba(33, 42, 24, 0.96); box-shadow: 0 16px 45px rgba(35, 28, 18, 0.18); padding: 12px 7%; }
header .site-title { font-size: 24px; font-weight: 900; letter-spacing: 0.12em; line-height: 1.2; }
header .site-title span { color: #d9b36c; display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.26em; margin-top: 5px; text-transform: uppercase; }
header nav { align-items: center; display: flex; gap: 28px; }
header nav a { font-size: 15px; font-weight: 600; opacity: 0.86; position: relative; transition: color 0.3s ease, opacity 0.3s ease; }
header nav a::after { background: #d9b36c; bottom: -7px; content: ""; height: 2px; left: 0; position: absolute; transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease; width: 100%; }
header nav a:hover { color: #ffe2a3; opacity: 1; }
header nav a:hover::after { transform: scaleX(1); transform-origin: left; }

#hero-section { align-items: center; background: radial-gradient(circle at 80% 22%, rgba(225, 177, 92, 0.34), transparent 34%), linear-gradient(135deg, #23311f 0%, #40532e 46%, #8c5e2c 100%); color: #fff8ea; display: grid; gap: 54px; grid-template-columns: 1.02fr 0.98fr; min-height: 100vh; overflow: hidden; padding: 150px 7% 92px; position: relative; }
#hero-section::before { background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.12) 48%, transparent 72%); content: ""; height: 180%; left: -70%; position: absolute; top: -40%; transform: rotate(12deg); transition: left 1.2s ease; width: 38%; }
#hero-section.is-active::before { left: 115%; }
#hero-section .hero-content { opacity: 0; position: relative; transform: translateY(34px); transition: opacity 0.75s ease, transform 0.75s ease; z-index: 2; }
#hero-section.is-active .hero-content { opacity: 1; transform: translateY(0); }
#hero-section .hero-kicker { align-items: center; color: #ffe1a0; display: flex; font-size: 14px; font-weight: 700; gap: 12px; letter-spacing: 0.24em; margin-bottom: 18px; }
#hero-section .hero-kicker::before { background: #ffe1a0; content: ""; height: 1px; width: 46px; }
#hero-section .hero-title { font-size: clamp(42px, 6vw, 82px); font-weight: 900; letter-spacing: 0.02em; line-height: 1.14; margin-bottom: 28px; }
#hero-section .hero-title strong { color: #ffd889; display: block; font-weight: 900; }
#hero-section .hero-text { color: rgba(255, 248, 232, 0.86); font-size: 18px; max-width: 620px; }
#hero-section .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 38px; }
#hero-section .hero-link { align-items: center; background: #f4c76f; border-radius: 999px; color: #29311f; display: inline-flex; font-weight: 800; gap: 10px; justify-content: center; min-width: 174px; padding: 14px 24px; transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; }
#hero-section .hero-link:hover { background: #fff4cf; color: #172011; transform: translateY(-4px); }
#hero-section .hero-link.is-outline { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 244, 207, 0.42); color: #fff8ea; }
#hero-section .hero-link.is-outline:hover { background: rgba(255, 255, 255, 0.2); }
#hero-section .hero-media { opacity: 0; position: relative; transform: translateX(42px) rotate(2deg); transition: opacity 0.85s ease 0.1s, transform 0.85s ease 0.1s; z-index: 2; }
#hero-section.is-active .hero-media { opacity: 1; transform: translateX(0) rotate(0); }
#hero-section .hero-image { border: 12px solid rgba(255, 248, 232, 0.18); border-radius: 42px; box-shadow: 0 36px 90px rgba(13, 18, 10, 0.42); height: min(640px, 68vh); object-fit: cover; width: 100%; }
#hero-section .hero-badge { background: rgba(255, 248, 232, 0.92); border-radius: 28px; bottom: 26px; box-shadow: 0 20px 45px rgba(22, 18, 12, 0.22); color: #2d3420; left: -28px; max-width: 250px; padding: 22px; position: absolute; transition: transform 0.45s ease; }
#hero-section .hero-badge:hover { transform: translateY(-8px); }
#hero-section .hero-badge strong { color: #8d602d; display: block; font-size: 32px; line-height: 1; margin-bottom: 8px; }
#hero-section .hero-badge span { display: block; font-size: 14px; font-weight: 700; }

#story-section { background: #fff8ea; display: grid; gap: 70px; grid-template-columns: 0.85fr 1.15fr; padding: 118px 7%; position: relative; }
#story-section .story-media { opacity: 0; transform: translateY(36px); transition: opacity 0.75s ease, transform 0.75s ease; }
#story-section.is-active .story-media { opacity: 1; transform: translateY(0); }
#story-section .story-image { border-radius: 34px; box-shadow: 0 28px 70px rgba(88, 64, 36, 0.16); height: 620px; object-fit: cover; width: 100%; }
#story-section .story-content { align-self: center; opacity: 0; transform: translateY(36px); transition: opacity 0.75s ease 0.12s, transform 0.75s ease 0.12s; }
#story-section.is-active .story-content { opacity: 1; transform: translateY(0); }
#story-section .story-subtitle { color: #9b6a31; font-size: 14px; font-weight: 800; letter-spacing: 0.24em; margin-bottom: 14px; }
#story-section .story-title { color: #25321e; font-size: clamp(30px, 4vw, 54px); font-weight: 900; line-height: 1.25; margin-bottom: 24px; }
#story-section .story-text { color: #5d5144; font-size: 17px; margin-bottom: 20px; max-width: 760px; }
#story-section .story-list { border-top: 1px solid rgba(80, 64, 43, 0.16); display: grid; gap: 0; margin-top: 34px; }
#story-section .story-item { align-items: flex-start; border-bottom: 1px solid rgba(80, 64, 43, 0.16); display: grid; gap: 18px; grid-template-columns: 104px 1fr; padding: 22px 0; }
#story-section .story-item strong { color: #36502b; font-size: 20px; font-weight: 900; }
#story-section .story-item span { color: #665b4d; display: block; font-size: 16px; }

#gift-section { background: linear-gradient(180deg, #f8f1e6 0%, #efe1ca 100%); overflow: hidden; padding: 116px 7%; }
#gift-section .gift-content { margin: 0 auto 54px; max-width: 860px; opacity: 0; text-align: center; transform: translateY(34px); transition: opacity 0.75s ease, transform 0.75s ease; }
#gift-section.is-active .gift-content { opacity: 1; transform: translateY(0); }
#gift-section .gift-subtitle { color: #9b6a31; font-size: 14px; font-weight: 800; letter-spacing: 0.24em; margin-bottom: 14px; }
#gift-section .gift-title { color: #25321e; font-size: clamp(30px, 4vw, 52px); font-weight: 900; line-height: 1.25; margin-bottom: 18px; }
#gift-section .gift-text { color: #645746; font-size: 17px; }
#gift-section .gift-grid { display: grid; gap: 26px; grid-template-columns: repeat(3, 1fr); }
#gift-section .gift-item { background: rgba(255, 252, 245, 0.78); border: 1px solid rgba(103, 76, 42, 0.12); border-radius: 34px; box-shadow: 0 20px 54px rgba(90, 65, 35, 0.1); opacity: 0; overflow: hidden; transform: translateY(42px); transition: opacity 0.7s ease, transform 0.7s ease, box-shadow 0.35s ease; }
#gift-section.is-active .gift-item { opacity: 1; transform: translateY(0); }
#gift-section.is-active .gift-item:nth-child(2) { transition-delay: 0.12s; }
#gift-section.is-active .gift-item:nth-child(3) { transition-delay: 0.24s; }
#gift-section .gift-item:hover { box-shadow: 0 26px 70px rgba(90, 65, 35, 0.18); transform: translateY(-8px); }
#gift-section .gift-image { height: 330px; object-fit: cover; transition: transform 0.55s ease; width: 100%; }
#gift-section .gift-item:hover .gift-image { transform: scale(1.06); }
#gift-section .gift-figure { overflow: hidden; }
#gift-section .gift-body { padding: 28px; }
#gift-section .gift-body h3 { color: #28361f; font-size: 24px; font-weight: 900; margin-bottom: 12px; }
#gift-section .gift-body p { color: #665b4d; font-size: 16px; }

#craft-section { background: #26351f; color: #fff8ea; display: grid; gap: 42px; grid-template-columns: 1fr 1fr; padding: 118px 7%; }
#craft-section .craft-content { align-self: center; opacity: 0; transform: translateX(-36px); transition: opacity 0.75s ease, transform 0.75s ease; }
#craft-section.is-active .craft-content { opacity: 1; transform: translateX(0); }
#craft-section .craft-subtitle { color: #f2c777; font-size: 14px; font-weight: 800; letter-spacing: 0.24em; margin-bottom: 14px; }
#craft-section .craft-title { font-size: clamp(30px, 4vw, 52px); font-weight: 900; line-height: 1.25; margin-bottom: 22px; }
#craft-section .craft-text { color: rgba(255, 248, 232, 0.78); font-size: 17px; margin-bottom: 28px; max-width: 650px; }
#craft-section .craft-list { display: grid; gap: 16px; }
#craft-section .craft-item { align-items: center; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 235, 190, 0.16); border-radius: 22px; display: flex; gap: 18px; padding: 18px 20px; transition: background 0.3s ease, transform 0.3s ease; }
#craft-section .craft-item:hover { background: rgba(255, 255, 255, 0.13); transform: translateX(8px); }
#craft-section .craft-item strong { align-items: center; background: #f2c777; border-radius: 50%; color: #24321d; display: inline-flex; flex: 0 0 42px; font-size: 18px; height: 42px; justify-content: center; width: 42px; }
#craft-section .craft-item span { color: rgba(255, 248, 232, 0.86); font-weight: 600; }
#craft-section .craft-media { opacity: 0; position: relative; transform: translateX(36px); transition: opacity 0.75s ease 0.12s, transform 0.75s ease 0.12s; }
#craft-section.is-active .craft-media { opacity: 1; transform: translateX(0); }
#craft-section .craft-image { border-radius: 48px 48px 12px 48px; box-shadow: 0 36px 80px rgba(0, 0, 0, 0.34); height: 620px; object-fit: cover; width: 100%; }
#craft-section .craft-card { background: #fff8ea; border-radius: 28px; bottom: 32px; color: #2d3420; max-width: 300px; padding: 24px; position: absolute; right: -22px; }
#craft-section .craft-card strong { color: #8d602d; display: block; font-size: 24px; font-weight: 900; margin-bottom: 8px; }

#business-section { background: #fffaf0; padding: 116px 7%; }
#business-section .business-grid { align-items: stretch; display: grid; gap: 28px; grid-template-columns: 1fr 1fr 1fr 1.3fr; }
#business-section .business-item { background: #f3eadb; border-radius: 34px; min-height: 260px; opacity: 0; padding: 34px; position: relative; transform: translateY(34px); transition: opacity 0.7s ease, transform 0.7s ease, background 0.35s ease; }
#business-section.is-active .business-item { opacity: 1; transform: translateY(0); }
#business-section.is-active .business-item:nth-child(2) { transition-delay: 0.1s; }
#business-section.is-active .business-item:nth-child(3) { transition-delay: 0.2s; }
#business-section.is-active .business-item:nth-child(4) { transition-delay: 0.3s; }
#business-section .business-item:hover { background: #efe0c8; }
#business-section .business-item.is-feature { background: linear-gradient(135deg, #344829, #8c6330); color: #fff8ea; grid-row: span 2; }
#business-section .business-subtitle { color: #9b6a31; font-size: 14px; font-weight: 800; letter-spacing: 0.24em; margin-bottom: 14px; }
#business-section .business-title { color: #25321e; font-size: clamp(30px, 4vw, 50px); font-weight: 900; line-height: 1.25; }
#business-section .business-item h3 { font-size: 24px; font-weight: 900; margin-bottom: 12px; }
#business-section .business-item p { color: #665b4d; font-size: 16px; }
#business-section .business-item.is-feature p { color: rgba(255, 248, 232, 0.82); }
#business-section .business-number { bottom: 28px; color: rgba(141, 96, 45, 0.24); font-size: 64px; font-weight: 900; line-height: 1; position: absolute; right: 28px; }
#business-section .business-item.is-feature .business-number { color: rgba(255, 232, 181, 0.26); }

#cta-section { background: radial-gradient(circle at 20% 18%, rgba(255, 223, 151, 0.28), transparent 34%), linear-gradient(135deg, #21301d 0%, #40502d 58%, #795527 100%); color: #fff8ea; overflow: hidden; padding: 112px 7%; position: relative; text-align: center; }
#cta-section .cta-content { margin: 0 auto; max-width: 850px; opacity: 0; position: relative; transform: translateY(38px); transition: opacity 0.75s ease, transform 0.75s ease; z-index: 2; }
#cta-section.is-active .cta-content { opacity: 1; transform: translateY(0); }
#cta-section .cta-subtitle { color: #f4c76f; font-size: 14px; font-weight: 800; letter-spacing: 0.24em; margin-bottom: 16px; }
#cta-section .cta-title { font-size: clamp(32px, 5vw, 60px); font-weight: 900; line-height: 1.25; margin-bottom: 22px; }
#cta-section .cta-text { color: rgba(255, 248, 232, 0.82); font-size: 18px; margin: 0 auto 34px; max-width: 680px; }
#cta-section .cta-link { background: #f4c76f; border-radius: 999px; color: #26351f; display: inline-flex; font-weight: 900; justify-content: center; min-width: 210px; padding: 15px 30px; transition: background 0.3s ease, transform 0.3s ease; }
#cta-section .cta-link:hover { background: #fff2c9; transform: translateY(-5px); }

footer { background: #171f13; color: rgba(255, 248, 232, 0.72); padding: 52px 7%; }
footer .footer-content { align-items: center; display: flex; gap: 28px; justify-content: space-between; }
footer .footer-title { color: #fff8ea; font-size: 22px; font-weight: 900; letter-spacing: 0.12em; }
footer .footer-text { font-size: 14px; margin-top: 8px; max-width: 560px; }
footer .footer-nav { display: flex; flex-wrap: wrap; gap: 20px; justify-content: flex-end; }
footer .footer-nav a { font-size: 14px; font-weight: 700; opacity: 0.76; transition: color 0.3s ease, opacity 0.3s ease; }
footer .footer-nav a:hover { color: #f4c76f; opacity: 1; }

@media (max-width: 1280px) {
	header { padding: 16px 5%; }
	header.is-scrolled { padding: 12px 5%; }
	#hero-section { gap: 38px; padding: 140px 5% 82px; }
	#story-section { gap: 46px; padding: 100px 5%; }
	#gift-section { padding: 100px 5%; }
	#craft-section { padding: 100px 5%; }
	#business-section { padding: 100px 5%; }
	#cta-section { padding: 100px 5%; }
	footer { padding: 48px 5%; }
}

@media (max-width: 960px) {
	header { align-items: flex-start; flex-direction: column; gap: 18px; }
	header nav { gap: 18px; overflow-x: auto; padding-bottom: 4px; width: 100%; }
	header nav a { flex: 0 0 auto; }
	#hero-section { grid-template-columns: 1fr; padding-top: 190px; }
	#hero-section .hero-image { height: 560px; }
	#hero-section .hero-badge { left: 20px; }
	#story-section { grid-template-columns: 1fr; }
	#story-section .story-image { height: 520px; }
	#gift-section .gift-grid { grid-template-columns: 1fr 1fr; }
	#craft-section { grid-template-columns: 1fr; }
	#craft-section .craft-card { right: 22px; }
	#business-section .business-grid { grid-template-columns: 1fr 1fr; }
	#business-section .business-item.is-feature { grid-row: auto; }
	footer .footer-content { align-items: flex-start; flex-direction: column; }
	footer .footer-nav { justify-content: flex-start; }
}

@media (max-width: 768px) {
	header .site-title { font-size: 21px; }
	#hero-section { padding: 180px 5% 72px; }
	#hero-section .hero-actions { flex-direction: column; }
	#hero-section .hero-link { width: 100%; }
	#hero-section .hero-image { border-radius: 30px; height: 460px; }
	#hero-section .hero-badge { bottom: 18px; max-width: 220px; padding: 18px; }
	#story-section { padding: 82px 5%; }
	#story-section .story-image { height: 430px; }
	#story-section .story-item { grid-template-columns: 1fr; }
	#gift-section { padding: 82px 5%; }
	#gift-section .gift-grid { grid-template-columns: 1fr; }
	#craft-section { padding: 82px 5%; }
	#craft-section .craft-image { border-radius: 34px; height: 460px; }
	#business-section { padding: 82px 5%; }
	#business-section .business-grid { grid-template-columns: 1fr; }
	#cta-section { padding: 82px 5%; }
}

@media (max-width: 500px) {
	header { padding: 14px 18px; }
	header.is-scrolled { padding: 12px 18px; }
	header nav { gap: 14px; }
	header nav a { font-size: 13px; }
	#hero-section { padding: 176px 18px 62px; }
	#hero-section .hero-text { font-size: 16px; }
	#hero-section .hero-image { height: 360px; }
	#hero-section .hero-badge { border-radius: 22px; left: 12px; max-width: 188px; }
	#story-section { padding: 68px 18px; }
	#story-section .story-image { height: 340px; }
	#gift-section { padding: 68px 18px; }
	#gift-section .gift-image { height: 260px; }
	#gift-section .gift-body { padding: 24px; }
	#craft-section { padding: 68px 18px; }
	#craft-section .craft-image { height: 360px; }
	#craft-section .craft-card { bottom: 16px; left: 16px; max-width: calc(100% - 32px); right: auto; }
	#business-section { padding: 68px 18px; }
	#business-section .business-item { min-height: 220px; padding: 28px; }
	#cta-section { padding: 68px 18px; }
	footer { padding: 42px 18px; }
}