:root{
  --cream:#F8F9F1;
  --soft:#EEF3DC;
  --matcha:#CBDD8B;
  --olive:#30480C;
  --olive-2:#5A6B2E;
  --teal:#249078;
  --teal-dk:#1C7461;
  --ink:#2A3420;
  --muted:#6B7258;
  --line:rgba(48,72,12,.15);
  --serif:"Noto Serif TC","Songti TC",serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{margin:0; background:var(--cream); color:var(--ink); font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif; font-size:16px; line-height:1.9; -webkit-font-smoothing:antialiased;}
a{color:inherit;}
img{max-width:100%; display:block;}
h1,h2,h3{margin:0; text-wrap:balance; font-family:var(--serif); font-weight:700; color:var(--olive); letter-spacing:.04em;}
.wrap{max-width:1100px; margin:0 auto; padding:0 20px;}
.narrow{max-width:760px;}
section{padding:88px 0;}
.eyebrow{display:block; font-family:"Noto Sans TC",sans-serif; font-size:.78rem; font-weight:500; letter-spacing:.24em; color:var(--teal); margin-bottom:.6rem;}
.h2{font-size:clamp(1.5rem,3.2vw,2rem); line-height:1.5; margin-bottom:1rem;}
.lead{color:var(--muted); max-width:38em; margin:0 0 2.6rem;}
.center{text-align:center;}
.center .lead{margin-left:auto; margin-right:auto;}

/* buttons */
.btn{display:inline-block; text-decoration:none; font-size:.95rem; font-weight:500; padding:.8rem 1.7rem; border-radius:999px; background:var(--teal); color:#fff; border:1px solid var(--teal); transition:background .15s ease;}
.btn:hover{background:var(--teal-dk); border-color:var(--teal-dk);}
.btn.line-out{background:transparent; color:var(--teal);}
.btn.line-out:hover{background:var(--teal); color:#fff;}
.btn.on-dark{background:#fff; color:var(--olive); border-color:#fff;}
.textlink{color:var(--teal); text-decoration:none; font-size:.92rem; border-bottom:1px solid currentColor; padding-bottom:1px;}
.textlink:hover{color:var(--teal-dk);}
.btns{display:flex; gap:1rem; flex-wrap:wrap; align-items:center;}
.center .btns{justify-content:center;}

/* nav */
.nav{position:sticky; top:0; z-index:30; background:rgba(255,255,255,.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.nav-in{max-width:1180px; margin:0 auto; padding:.65rem 20px; display:flex; align-items:center; justify-content:space-between; gap:1rem; position:relative;}
.logo{display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--olive);}
.logo svg{width:34px; height:34px;}
.logo b{font-family:var(--serif); font-size:1.12rem; letter-spacing:.1em; line-height:1.15; display:block;}
.logo small{display:block; font-size:.64rem; letter-spacing:.14em; color:var(--olive-2);}
.links{display:flex; gap:1.5rem; align-items:center;}
.links a{text-decoration:none; font-size:.92rem; letter-spacing:.04em;}
.links a:hover,.links a.on{color:var(--teal);}
.links a.nav-cta{background:var(--teal); color:#fff; padding:.4rem 1rem; border-radius:999px;}
.links a.nav-cta:hover{background:var(--teal-dk); color:#fff;}
.menu-toggle,.menu-btn{display:none;}

/* hero (home) */
.hero{position:relative; color:#fff; text-align:center; padding:120px 20px 170px;
  background:linear-gradient(180deg,rgba(25,38,8,.45),rgba(25,38,8,.62)), url(/img/hero.jpg?v=b07bd439) center 45%/cover no-repeat;}
.hero h1{color:#fff; font-size:clamp(2rem,5vw,3.2rem); line-height:1.45; letter-spacing:.1em; text-shadow:0 2px 20px rgba(0,0,0,.3);}
.hero p{margin:1.3rem auto 2.2rem; max-width:30em; color:rgba(255,255,255,.94); font-size:1.05rem;}
.hero .btn.line-out{color:#fff; border-color:rgba(255,255,255,.85);}
.hero .btn.line-out:hover{background:rgba(255,255,255,.15);}
.wave{position:absolute; left:0; right:0; bottom:-1px; width:100%; height:100px;}
.wave path{fill:var(--cream);}

/* page hero (inner pages) */
.phero{position:relative; padding:90px 20px 120px; text-align:center; color:#fff; background:linear-gradient(180deg,rgba(25,38,8,.5),rgba(25,38,8,.66)), var(--bg) center/cover no-repeat;}
.phero h1{color:#fff; font-size:clamp(1.7rem,4vw,2.5rem); line-height:1.5;}
.phero p{margin:.8rem auto 0; max-width:32em; color:rgba(255,255,255,.92);}
.phero .eyebrow{color:var(--matcha);}

/* trust strip */
.trust{padding:0; margin-top:-46px; position:relative; z-index:2;}
.trust ul{list-style:none; margin:0 auto; padding:1.1rem 1.4rem; max-width:900px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 10px 30px rgba(48,72,12,.08); display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem;}
.trust li{text-align:center; font-size:.92rem; color:var(--olive); font-weight:500;}
.trust li b{display:block; font-family:var(--serif); font-size:1.05rem;}
.trust li small{color:var(--muted); font-size:.8rem; font-weight:400;}

/* course rows */
.course{display:grid; grid-template-columns:280px 1fr; gap:3.2rem; align-items:center; padding:2.8rem 0; border-top:1px solid var(--line);}
.course:first-of-type{border-top:none;}
.course img.circle{width:260px; height:260px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 8px #fff, 0 0 0 9px var(--line);}
.course h3{font-size:1.45rem; line-height:1.5;}
.course .en{display:block; font-family:"Noto Sans TC",sans-serif; font-size:.8rem; font-weight:500; letter-spacing:.2em; color:var(--teal); margin:.2rem 0 1rem;}
.course p{margin:0 0 1rem; color:var(--ink);}
.course h4{font-size:.98rem; margin:1.2rem 0 .4rem; color:var(--ink);}
.course ul{margin:0 0 1.6rem; padding-left:1.2rem;}
.course li{padding:.1rem 0; font-size:.95rem;}
.course li::marker{color:var(--teal);}

/* flow */
.bg-soft{background:var(--soft);}
.flow{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:1rem;}
.flow li{background:#fff; border-radius:14px; padding:1.5rem 1.2rem; border:1px solid var(--line);}
.flow b{display:block; font-family:var(--serif); font-size:1.8rem; color:var(--teal); line-height:1;}
.flow h3{font-size:1.02rem; margin:.7rem 0 .3rem;}
.flow p{margin:0; font-size:.88rem; line-height:1.75; color:var(--muted);}

/* about teaser / split */
.split{display:grid; grid-template-columns:320px 1fr; gap:3.4rem; align-items:center;}
.split img{width:320px; height:320px; object-fit:cover; border-radius:50%; box-shadow:0 0 0 10px #fff, 0 0 0 11px var(--line);}
.split p{margin:0 0 1rem;}
.certs{list-style:none; margin:1.4rem 0; padding:1.1rem 1.3rem; background:#fff; border:1px solid var(--line); border-radius:12px; display:grid; grid-template-columns:1fr 1fr; gap:.35rem 1.2rem;}
.certs li{font-size:.88rem; color:var(--olive);}
.certs li::before{content:"✓"; color:var(--teal); font-weight:700; margin-right:.4rem;}

/* article cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;}
.acard{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; text-decoration:none; display:flex; flex-direction:column; transition:transform .15s ease, box-shadow .15s ease;}
a.acard:hover{transform:translateY(-3px); box-shadow:0 12px 26px rgba(48,72,12,.1);}
.acard img{aspect-ratio:16/10; object-fit:cover; width:100%;}
.acard div{padding:1.1rem 1.2rem 1.4rem;}
.tag{display:inline-block; font-size:.74rem; color:var(--teal); background:var(--soft); padding:.1rem .6rem; border-radius:999px; margin-bottom:.5rem;}
.acard h3{font-size:1.05rem; line-height:1.6; margin-bottom:.4rem; color:var(--ink);}
.acard p{margin:0; font-size:.86rem; color:var(--muted); line-height:1.75;}
.acard.soon{opacity:.6;}
.acard.soon .tag::after{content:"・整理中";}

/* voices */
.vcard{background:#fff; border:1px dashed rgba(48,72,12,.35); border-radius:14px; padding:1.4rem;}
.vcard .ph{aspect-ratio:4/3; background:var(--soft); border-radius:10px; display:grid; place-items:center; color:var(--olive-2); font-size:.85rem; margin-bottom:1rem;}
.vcard b{color:var(--olive); font-size:.95rem;}
.vcard small{display:block; color:var(--muted); font-size:.8rem; margin-bottom:.6rem;}
.vcard p{margin:0; font-size:.88rem; color:var(--muted);}

/* faq */
details{border-top:1px solid var(--line); padding:1.05rem 0;}
details:last-of-type{border-bottom:1px solid var(--line);}
summary{cursor:pointer; font-weight:500; list-style:none; display:flex; justify-content:space-between; gap:1rem;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+"; color:var(--teal); font-size:1.3rem; line-height:1.4;}
details[open] summary::after{content:"−";}
details p{margin:.6rem 0 0; color:var(--muted);}

/* info table (course page) */
.info{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.info th,.info td{text-align:left; padding:1rem 1.2rem; border-bottom:1px solid var(--line); vertical-align:top; font-size:.95rem;}
.info tr:last-child th,.info tr:last-child td{border-bottom:none;}
.info th{width:9em; color:var(--olive); font-family:var(--serif); background:var(--soft);}
.todo{display:inline-block; background:#FFF4D6; color:#7A5B00; border:1px dashed #D9B44A; border-radius:6px; padding:.05rem .5rem; font-size:.85rem;}
.photo-slot{aspect-ratio:4/3; background:var(--soft); border:1px dashed rgba(48,72,12,.35); border-radius:14px; display:grid; place-items:center; color:var(--olive-2); font-size:.9rem; text-align:center; padding:1rem;}
.grid2{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:2.4rem; align-items:start;}
.info{table-layout:fixed;}
.photo-slot.tall{aspect-ratio:auto; min-height:100%;}
.learn{list-style:none; margin:0; padding:0; display:grid; gap:.9rem;}
.learn li{background:#fff; border:1px solid var(--line); border-radius:12px; padding:1rem 1.2rem;}
.learn b{color:var(--olive); font-family:var(--serif);}
.compare{width:100%; border-collapse:collapse; background:#fff; border-radius:14px; overflow:hidden; border:1px solid var(--line);}
.compare th,.compare td{padding:.9rem 1rem; border-bottom:1px solid var(--line); text-align:left; font-size:.93rem;}
.compare thead th{background:var(--olive); color:#fff; font-family:var(--serif);}
.compare tbody th{color:var(--olive); width:7em;}

/* article page */
.article{max-width:720px; margin:0 auto;}
.article .meta{color:var(--muted); font-size:.88rem; margin:.8rem 0 2rem;}
.article .body p{margin:0 0 1.3rem; font-size:1.04rem; line-height:2.05;}
.article .body h2{font-size:1.3rem; margin:2.4rem 0 1rem; padding-left:.8rem; border-left:4px solid var(--matcha);}
.article .body blockquote{margin:1.6rem 0; padding:1.2rem 1.4rem; background:var(--soft); border-radius:12px; font-family:var(--serif); color:var(--olive);}
.article .cta-box{margin-top:3rem; padding:1.8rem; background:#fff; border:1px solid var(--line); border-radius:14px; text-align:center;}
.chips{display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; margin-bottom:2.4rem;}
.chips a{text-decoration:none; font-size:.88rem; padding:.35rem 1rem; border-radius:999px; border:1px solid var(--line); background:#fff;}
.chips a.on,.chips a:hover{background:var(--teal); color:#fff; border-color:var(--teal);}

/* contact band */
.contact{background:var(--soft); text-align:center;}
.contact .h2{margin-bottom:.6rem;}

.disclaimer{max-width:1100px; margin:0 auto; padding:1.4rem 20px; font-size:.8rem; color:var(--muted); line-height:1.8;}
.foot{background:#fff; border-top:1px solid var(--line); padding:2.4rem 20px 2rem;}
.foot-in{max-width:1100px; margin:0 auto; display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; align-items:flex-start;}
.foot-links{display:flex; gap:1.4rem; flex-wrap:wrap; font-size:.88rem;}
.foot-links a{text-decoration:none;}
.foot-links a:hover{color:var(--teal);}
.social{display:flex; gap:.7rem;}
.social a{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--soft); color:var(--olive); transition:background .15s ease;}
.social a:hover{background:var(--teal); color:#fff;}
.social svg{width:20px; height:20px;}
.copy{max-width:1100px; margin:1.6rem auto 0; font-size:.78rem; color:var(--muted);}

/* sticky mobile LINE */
.fab{display:none;}

@media (max-width:900px){
  .flow{grid-template-columns:1fr 1fr;}
  .cards{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  section{padding:64px 0;}
  .menu-btn{display:flex; flex-direction:column; gap:5px; cursor:pointer; padding:8px;}
  .menu-btn i{display:block; width:22px; height:2px; background:var(--olive);}
  .links{display:none; position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column; align-items:stretch; gap:0; border-bottom:1px solid var(--line);}
  .links a{padding:.85rem 1.4rem; border-top:1px solid var(--line);}
  .links a.nav-cta{border-radius:0; text-align:center;}
  .menu-toggle:checked ~ .links{display:flex;}
  .hero{padding:90px 20px 140px;}
  .trust ul{grid-template-columns:1fr; text-align:left;}
  .trust li{text-align:left;}
  .course,.split,.grid2{grid-template-columns:1fr; gap:1.6rem;}
  .course img.circle{width:200px; height:200px; margin:0 auto;}
  .split img{width:220px; height:220px; margin:0 auto;}
  .cards{grid-template-columns:1fr;}
  .certs{grid-template-columns:1fr;}
  .fab{display:flex; position:fixed; left:16px; right:16px; bottom:16px; z-index:40; justify-content:center; align-items:center; gap:.5rem; background:#06C755; color:#fff; text-decoration:none; font-weight:700; padding:.85rem; border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.2);}
  body{padding-bottom:84px;}
}
@media (max-width:480px){ .flow{grid-template-columns:1fr;} }

/* ===== course landing ===== */
.stats{display:flex; justify-content:center; gap:0; margin:2rem auto 0; max-width:620px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35); border-radius:16px; backdrop-filter:blur(4px);}
.stats div{flex:1; padding:.9rem .6rem; text-align:center; color:#fff;}
.stats div+div{border-left:1px solid rgba(255,255,255,.3);}
.stats b{display:block; font-family:var(--serif); font-size:1.7rem; line-height:1.2; color:#fff;}
.stats small{font-size:.8rem; color:rgba(255,255,255,.85); letter-spacing:.06em;}
.pains{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem;}
.pain{background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.6rem 1.4rem;}
.pain .q{font-family:var(--serif); font-size:2.4rem; color:var(--matcha); line-height:1;}
.pain h3{font-size:1.08rem; margin:.4rem 0 .5rem; color:var(--ink);}
.pain p{margin:0; font-size:.92rem; color:var(--muted);}
.answer{margin:2.4rem auto 0; max-width:640px; text-align:center; font-family:var(--serif); font-size:clamp(1.2rem,2.6vw,1.5rem); color:var(--olive); line-height:1.7;}
.answer em{font-style:normal; background:linear-gradient(transparent 60%, var(--matcha) 60%);}
.modules{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; counter-reset:m;}
.module{background:#fff; border-radius:16px; padding:1.5rem 1.4rem; border:1px solid var(--line); position:relative;}
.module::before{counter-increment:m; content:"0" counter(m); font-family:var(--serif); font-size:1.6rem; color:var(--teal); display:block; margin-bottom:.5rem;}
.module h3{font-size:1.05rem; margin-bottom:.35rem;}
.module p{margin:0; font-size:.9rem; color:var(--muted); line-height:1.75;}
.band{background:var(--olive); color:#E7EDD3;}
.band .h2{color:#fff;}
.band .eyebrow{color:var(--matcha);}
.band .lead{color:#CFDAB4;}
.perfumes{display:grid; grid-template-columns:repeat(5,1fr); gap:.8rem; margin:2rem 0;}
.perfume{background:rgba(255,255,255,.08); border:1px solid rgba(203,221,139,.35); border-radius:14px; padding:1.2rem .8rem; text-align:center;}
.perfume b{display:block; font-family:var(--serif); font-size:1.12rem; color:#fff; letter-spacing:.08em;}
.perfume small{color:#CFDAB4; font-size:.78rem;}
.band .pill{display:inline-block; margin:.25rem; padding:.3rem .9rem; border-radius:999px; border:1px solid rgba(203,221,139,.5); color:#fff; font-size:.88rem;}
.why{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem;}
.why div{padding:1.4rem; border-radius:16px; background:#fff; border:1px solid var(--line);}
.why b{display:block; font-family:var(--serif); color:var(--olive); font-size:1.05rem; margin-bottom:.3rem;}
.why span{font-size:.9rem; color:var(--muted);}
.paths{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;}
.path{text-align:center; padding:1.6rem 1rem; background:#fff; border-radius:16px; border:1px solid var(--line);}
.path i{font-style:normal; font-size:2rem; display:block; margin-bottom:.4rem;}
.path b{display:block; color:var(--olive); font-family:var(--serif); margin-bottom:.3rem;}
.path span{font-size:.86rem; color:var(--muted);}
.prices{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; max-width:860px; margin:0 auto;}
.price{background:#fff; border:1px solid var(--line); border-radius:20px; padding:2rem 1.8rem; position:relative;}
.price.hot{border:2px solid var(--teal); box-shadow:0 14px 34px rgba(36,144,120,.12);}
.price .badge{position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--teal); color:#fff; font-size:.78rem; padding:.2rem .9rem; border-radius:999px; white-space:nowrap;}
.price h3{font-size:1.2rem; text-align:center;}
.price .amt{text-align:center; margin:.8rem 0 .2rem; font-family:var(--serif); font-size:2.4rem; color:var(--olive); line-height:1.2;}
.price .amt small{font-size:1rem;}
.price .was{text-align:center; color:var(--muted); font-size:.88rem; text-decoration:line-through; margin:0;}
.price ul{list-style:none; padding:0; margin:1.4rem 0; font-size:.92rem;}
.price li{padding:.35rem 0; border-bottom:1px dashed var(--line);}
.price li::before{content:"✓"; color:var(--teal); font-weight:700; margin-right:.5rem;}
.price .btn{display:block; text-align:center;}
.deadline{text-align:center; margin:1.6rem 0 0; color:var(--teal); font-weight:500;}
@media (max-width:900px){ .perfumes{grid-template-columns:repeat(3,1fr);} .paths{grid-template-columns:1fr 1fr;} }
@media (max-width:760px){ .pains,.modules,.why,.prices{grid-template-columns:1fr;} .perfumes{grid-template-columns:1fr 1fr;} .stats b{font-size:1.35rem;} }

/* mid-page enroll CTA */
.midcta{padding:0; margin:-1px 0 0;}
.midcta .box{max-width:900px; margin:0 auto; padding:1.6rem 1.8rem; display:flex; align-items:center; justify-content:space-between; gap:1.4rem; flex-wrap:wrap; background:#fff; border:1px solid var(--line); border-left:5px solid var(--teal); border-radius:16px; box-shadow:0 10px 26px rgba(48,72,12,.07);}
.midcta .box p{margin:0; font-family:var(--serif); color:var(--olive); font-size:1.12rem; line-height:1.6;}
.midcta .box p small{display:block; font-family:"Noto Sans TC",sans-serif; color:var(--muted); font-size:.85rem;}
.midcta-wrap{padding:0 20px;}
.fab2{display:none;}
@media (max-width:760px){
  .fab2{display:flex; position:fixed; left:12px; right:12px; bottom:14px; z-index:40; gap:8px;}
  .fab2 a{flex:1; text-align:center; text-decoration:none; font-weight:700; padding:.85rem .4rem; border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.18); font-size:.95rem;}
  .fab2 .f-enroll{background:var(--teal); color:#fff;}
  .fab2 .f-line{background:#06C755; color:#fff;}
  .midcta .box{flex-direction:column; text-align:center;}
}

/* photo gallery */
.gal{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;}
.gal.three{grid-template-columns:repeat(3,1fr);}
.gal img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:16px;}
@media (max-width:760px){ .gal,.gal.three{grid-template-columns:1fr 1fr;} }

/* testimonials */
.voices{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; align-items:start;}
.voice{background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.6rem 1.5rem; box-shadow:0 10px 26px rgba(48,72,12,.06);}
.voice .tag{margin-bottom:.8rem;}
.voice blockquote{margin:0 0 1rem; font-family:var(--serif); font-size:1.12rem; line-height:1.7; color:var(--olive);}
.voice blockquote::before{content:"“"; display:block; font-size:2.6rem; line-height:.8; color:var(--matcha);}
.voice img{width:100%; border-radius:12px; border:1px solid var(--line);}
.voice small{display:block; margin-top:.7rem; color:var(--muted); font-size:.8rem;}
@media (max-width:860px){ .voices{grid-template-columns:1fr;} }