:root{--ink:#2f3a31;--muted:#6f766c;--sage:#5f7458;--sage-d:#4a5e45;--cream:#f7f4ee;--card:#f3efe7;--line:#e4dfd4;--warm:#d9a88a;--serif:"Noto Serif TC",Georgia,serif;--sans:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC",sans-serif;--script:"Allura",cursive}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.75;background:#fbf9f5}
a{color:inherit;text-decoration:none}h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0}p{margin:0}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.script{font-family:var(--script);color:#7c8573;font-size:30px;line-height:1.1;transform:rotate(-8deg)}
.pill{display:inline-flex;align-items:center;gap:10px;padding:10px 26px;border:1px solid var(--sage);border-radius:999px;color:var(--sage-d);font-size:15px;letter-spacing:1px;transition:.2s}
.pill:hover{background:#eef0e8}.pill.solid{background:var(--sage);color:#fff}.pill.solid:hover{background:var(--sage-d)}

header{height:76px;display:flex;align-items:center;gap:32px;padding:0 4vw;position:sticky;top:0;background:#fbf9f5ee;backdrop-filter:blur(12px);z-index:10;border-bottom:1px solid #ece8df}
.brand{display:grid;grid-template-columns:40px auto;grid-template-rows:26px 14px;align-items:center}
.brand .logo{grid-row:1/3;width:34px;height:34px;color:var(--sage);stroke-width:1.2}
.brand b{font:500 24px/1 var(--serif);letter-spacing:.5px}.brand small{font-size:8px;letter-spacing:2.4px;color:var(--muted)}
header nav{margin-left:auto;display:flex;gap:30px}
header nav a{font-size:14px;padding:4px 0;border-bottom:1.5px solid transparent}
header nav a:hover,header nav a.current{border-color:var(--ink)}
.cta{padding:7px 22px;font-size:14px;background:var(--sage);color:#fff}.cta:hover{background:var(--sage-d)}
.menu{display:none;margin-left:auto;border:0;background:none;font-size:24px;color:var(--ink)}

.hero{position:relative;min-height:660px;display:flex;align-items:center;padding:60px 5vw;background:linear-gradient(90deg,#f7f3ec 0%,#f7f3ecd9 32%,#f7f3ec00 58%),linear-gradient(90deg,#f7f3ec calc(100% - 1181px),#f7f3ec00 calc(100% - 880px)),url('assets/hero.jpg') right top/auto 100% no-repeat,#f7f3ec;overflow:hidden}
.hero-copy{max-width:680px;position:relative;z-index:1}
.eyebrow{font-size:13px;letter-spacing:4px;color:var(--muted)}
.hero h1{font-size:clamp(34px,4vw,58px);line-height:1.35;letter-spacing:2px;margin:14px 0 18px}
.lead{font-size:16px;color:#4d554c;max-width:520px}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0}.actions svg{width:18px;height:18px}
.badges{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:22px;font-size:14px}
.badges li{display:flex;align-items:center;gap:10px}
.badges span{width:36px;height:36px;border:1px solid #b9bfb2;border-radius:50%;display:grid;place-items:center;color:var(--sage);font-size:18px;background:#fffa}
.hero .script{margin:34px 0 0 10px}

.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:22px 2.5vw}
.cats a{background:var(--card);border-radius:10px;padding:30px 16px 26px;text-align:center;transition:.25s}
.cats a:hover{background:#ece7dc;transform:translateY(-3px)}
.cats svg{width:54px;height:54px;color:#9a7b5e;stroke-width:1.2}
.cats h3{font-size:21px;letter-spacing:2px;margin:10px 0 4px}.cats p{font-size:13px;color:var(--muted);letter-spacing:2px}

.formula{position:relative;display:grid;grid-template-columns:1fr 280px;gap:40px;align-items:center;margin-top:10px;padding:60px 5vw;background:linear-gradient(90deg,#f6f2ea 60%,#eef0e6)}
.formula h2{font-size:clamp(26px,2.6vw,34px);letter-spacing:2px}.formula .num{font-size:1.3em}
.sub{color:var(--muted);font-size:15px;margin-top:6px}
.steps{list-style:none;padding:0;margin:32px 0 20px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.steps li{background:#fff;border-radius:10px;padding:22px 20px;box-shadow:0 6px 24px #0000000a;position:relative}
.steps li:not(:last-child)::after{content:"→";position:absolute;right:-14px;top:36px;color:var(--muted)}
.steps b{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sage);color:#fff;font:400 20px var(--serif);vertical-align:middle;margin-right:10px}
.steps h3{display:inline;font-size:17px;vertical-align:middle}.steps p{color:var(--muted);font-size:14px;margin-top:14px}
.note{font-size:12px;color:#8a8f86}
.phone{width:230px;height:440px;margin:auto;border-radius:36px;background:#1f2320;padding:9px;box-shadow:0 30px 60px #2f3a3133;transform:rotate(4deg)}
.screen{height:100%;border-radius:28px;background:#fbf9f5;padding:34px 18px 18px;font-size:12px}
.screen .app{display:flex;align-items:center;gap:6px;font-family:var(--serif);color:var(--sage)}
.screen .hi{font:500 16px var(--serif);margin-top:16px}.tiny{font-size:10px;color:var(--muted)}
.ring{width:118px;height:118px;margin:18px auto;border-radius:50%;background:radial-gradient(#fbf9f5 60%,transparent 61%),conic-gradient(var(--sage) 86%,#e6e3da 0);display:grid;place-items:center;text-align:center;align-content:center;line-height:1.2}
.ring small{font-size:9px;color:var(--muted)}.ring strong{font:500 30px var(--serif)}.ring svg{color:var(--sage);margin:auto}
.screen ul{list-style:none;padding:0;margin:0}.screen li{padding:7px 10px;border-radius:8px;background:#f1eee7;margin-top:6px;font-size:11px}
.formula .side{position:absolute;right:340px;top:40px;font-size:28px}

.sec-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 20px;margin-bottom:22px}
.sec-head h2{font-size:30px;letter-spacing:3px}.sec-head p{font-size:14px;color:var(--muted)}
.feature,.products{padding:60px 2.5vw 20px}
.feature-grid,.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fcard{position:relative;display:block;border-radius:10px;overflow:hidden;background:var(--card);transition:.3s}
.fimg{aspect-ratio:3/2;background-position:center;background-size:cover;background-repeat:no-repeat}
.fcard:hover{transform:translateY(-4px);box-shadow:0 16px 40px #2f3a311f}
.fcard>div{position:relative;padding:22px 26px 28px}
.fcard h3{font-size:24px;letter-spacing:3px}.fcard .tag{font-size:13px;color:var(--muted);margin:2px 0 12px}
.fcard>div>p:not(.tag){font-size:14px;color:#5b6259;max-width:30em}
.more{display:inline-flex;align-items:center;gap:6px;font-size:13px;margin-top:14px}.more svg{width:16px}
.fcard .script{position:absolute;right:20px;bottom:22px;font-size:22px}
.f-body{background-image:url('assets/feature-body.jpg')}
.f-skin{background-image:url('assets/feature-skin.jpg')}
.f-aroma{background-image:url('assets/feature-aroma.jpg')}
.product-grid article{display:grid;grid-template-columns:52% 1fr;background:#f5f2ec;border-radius:10px;overflow:hidden;min-height:200px}
.product-grid .img{background-position:center;background-size:cover;background-repeat:no-repeat}
.p1{background-image:url('assets/prod-skincare.jpg'),url('assets/product-skincare.svg')}
.p2{background-image:url('assets/prod-aroma.jpg'),url('assets/product-aroma.svg')}
.p3{background-image:url('assets/prod-life.jpg'),url('assets/product-life.svg')}
.product-grid article>div:last-child{padding:22px}
.chip{display:inline-block;font-size:12px;padding:2px 12px;border-radius:999px;background:#f0dfd3;color:#8b5d44}
.product-grid h3{font-size:19px;margin:12px 0 6px}.product-grid p{font-size:13px;color:var(--muted)}

.quote{margin-top:50px;min-height:150px;padding:30px 5vw;display:flex;align-items:center;justify-content:space-between;color:#fff;background:linear-gradient(90deg,#4a5e45e6,#5f745899 60%,#5f745855),url('assets/banner-leaves.jpg') center/cover,linear-gradient(90deg,#4a5e45,#8a9c7f)}
.quote p{font:400 clamp(18px,2vw,24px)/1.7 var(--serif);letter-spacing:3px}
.quote small{font-family:var(--serif);letter-spacing:3px;font-size:11px;border-bottom:1px solid #fff9;padding-bottom:8px}

.promise{text-align:center;padding:50px 2.5vw 60px}
.promise h2{font-size:24px;letter-spacing:3px}
.promise>div{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px;text-align:left}
.promise article{display:flex;align-items:center;gap:22px;background:var(--card);border-radius:10px;padding:24px 28px}
.promise span{flex:none;width:56px;height:56px;border-radius:50%;border:1px solid #b9bfb2;display:grid;place-items:center;font-size:26px;color:var(--sage-d)}
.promise h3{font-size:17px;letter-spacing:2px}.promise p{font-size:13px;color:var(--muted)}

footer{background:#f1ede5;padding:40px 5vw 16px;display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:30px;align-items:start}
.f-brand p{margin-top:16px;letter-spacing:3px;color:#5b6259}
.f-contact h3{font-size:16px;letter-spacing:2px}.f-contact p{font-size:13px;color:var(--muted);margin:4px 0 14px}.f-contact .pill{padding:7px 24px;font-size:14px}
.f-links{display:grid;grid-template-columns:repeat(3,auto);gap:8px 22px;font-size:13px;color:#5b6259}.f-links a:hover{color:var(--sage)}
.f-bottom{grid-column:1/-1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line);padding-top:14px;font-size:11px;color:#8a8f86}

@media(max-width:1100px){.formula{grid-template-columns:1fr}.formula .phone,.formula .side{display:none}.steps{grid-template-columns:repeat(2,1fr)}.steps li::after{display:none}}
@media(max-width:960px){
  header nav{display:none;position:absolute;top:76px;left:0;right:0;background:#fbf9f5;padding:20px 24px;flex-direction:column;gap:12px;border-bottom:1px solid var(--line)}
  header nav.open{display:flex}.menu{display:block}.cta{display:none}
  .cats{grid-template-columns:repeat(2,1fr)}
  .feature-grid,.product-grid,.promise>div{grid-template-columns:1fr}
  footer{grid-template-columns:1fr}
}
@media(max-width:620px){
  header,.hero,.formula,.quote{padding-left:16px;padding-right:16px}
  .cats,.feature,.products,.promise{padding-left:16px;padding-right:16px}
  .hero{min-height:auto;padding-top:48px;padding-bottom:300px;background:linear-gradient(180deg,#f7f3ec 0%,#f7f3ec 52%,#f7f3ec00 72%),url('assets/hero.jpg') 72% bottom/auto 360px no-repeat,#f7f3ec}
  .hero .script{display:none}
  .steps{grid-template-columns:1fr}
  .quote{display:block}.quote small{display:none}
  .f-links{grid-template-columns:repeat(2,auto)}
}