:root { color: #1f2933; background: #f7f5ef; font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
.site-shell { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.site-header { position: sticky; z-index: 2; top: 0; border-bottom: 1px solid #e8e3d8; background: rgba(255, 253, 248, .92); backdrop-filter: blur(12px); }
.site-nav { min-height: 72px; display: flex; align-items: center; gap: 28px; }
.site-brand { margin-right: auto; color: #263b32; font-size: 20px; font-weight: 800; letter-spacing: -.03em; text-decoration: none; }
.site-nav nav { display: flex; gap: 20px; }
.site-nav nav a { color: #56645d; font-size: 14px; text-decoration: none; }
.site-cod { padding: 7px 10px; border-radius: 999px; color: #3f6a4c; background: #e8f1e8; font-size: 12px; font-weight: 700; }
.site-hero { overflow: hidden; background: #fffdf8; }
.site-hero-grid { min-height: 440px; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 60px; }
.site-eyebrow { margin: 0 0 12px; color: #648064; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.site-hero h1, .site-section-heading h2 { margin: 0; color: #263b32; letter-spacing: -.055em; }
.site-hero h1 { font-size: clamp(46px, 7vw, 80px); line-height: .98; }
.site-hero p:not(.site-eyebrow) { max-width: 540px; margin: 22px 0 28px; color: #68736c; font-size: 17px; line-height: 1.8; }
.site-button { display: inline-flex; padding: 14px 20px; border-radius: 10px; color: white; background: #456a50; font-weight: 700; text-decoration: none; }
.site-hero-shape { min-height: 280px; border-radius: 42% 58% 53% 47% / 39% 42% 58% 61%; background: radial-gradient(circle at 34% 30%, #f7dd8d 0 12%, transparent 13%), radial-gradient(circle at 68% 62%, #aac6a5 0 23%, transparent 24%), linear-gradient(145deg, #d8e6cf, #f2ebe0); box-shadow: inset 0 0 0 16px rgba(255,255,255,.35); transform: rotate(-7deg); }
.site-section { padding: 78px 0; }
.site-section-heading { margin-bottom: 28px; display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.site-section-heading h2 { font-size: clamp(32px, 4vw, 48px); }
.site-section-heading > span { color: #859087; font-size: 13px; }
.site-product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.site-product-card { overflow: hidden; border: 1px solid #e7e3d9; border-radius: 18px; background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.site-product-card:hover { box-shadow: 0 18px 40px rgba(35, 57, 45, .12); transform: translateY(-3px); }
.site-product-image { height: 230px; display: grid; place-items: center; overflow: hidden; color: #fff; background: #dfe8dc; text-decoration: none; }
.site-product-image img { width: 100%; height: 100%; object-fit: cover; }
.site-product-image span { display: grid; width: 74px; height: 74px; place-items: center; border-radius: 50%; background: #749077; font-size: 30px; font-weight: 800; }
.site-product-content { padding: 18px; }
.site-product-content h3 { margin: 0; color: #303b34; font-size: 17px; }
.site-product-content h3 a { text-decoration: none; }
.site-product-content p { min-height: 42px; margin: 9px 0 16px; overflow: hidden; color: #7b857e; font-size: 13px; line-height: 1.6; }
.site-product-content > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.site-product-content strong { color: #456a50; font-size: 17px; }
.site-product-content > div a { color: #456a50; font-size: 13px; font-weight: 700; text-decoration: none; }
.site-empty, .site-home-error { padding: 48px 20px; color: #778179; text-align: center; }
.site-home-error { min-height: 100vh; display: grid; place-content: center; gap: 9px; }
.site-home-error strong { color: #3d4b42; }
.site-footer { padding: 28px 0; color: #7b857e; background: #eceae3; font-size: 12px; }
@media (max-width: 720px) { .site-shell { width: min(100% - 28px, 1160px); } .site-nav { min-height: 60px; gap: 12px; } .site-nav nav { display: none; } .site-hero-grid { min-height: auto; padding: 62px 0; grid-template-columns: 1fr; gap: 32px; } .site-hero-shape { min-height: 190px; } .site-section { padding: 54px 0; } .site-product-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .site-product-image { height: 160px; } .site-product-content { padding: 13px; } .site-product-content h3 { font-size: 15px; } .site-product-content > div { align-items: flex-start; flex-direction: column; gap: 7px; } }