*,*::before,*::after{box-sizing:border-box}
html,body,div,span,h1,h2,h3,h4,p,a,img,ul,ol,li,figure,figcaption,article,section,header,footer,nav,video,button,b,em,i{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;background:none}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{cursor:pointer;color:inherit}

:root{
  --green:#216204;      /* 品牌主色：取自網站按鈕 */
  --green2:#01793b;     /* 環境卡片綠 */
  --green-soft:rgba(33,98,4,.09);
  --leaf:#7cb342;
  --black:#1a1a1a;
  --black2:#444;
  --gray:#c9cdc6;
  --gray2:#8a8f87;
  --paper:#f4f5f2;
  --sans:'Noto Sans TC',sans-serif;
  --en:'Red Hat Display','Noto Sans TC',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --radius:20px; /* 網站圓角語彙 */
}

/* 背景固定在視窗，不隨內容捲動 */
.pageBg{position:fixed;inset:0;z-index:-1;background:var(--paper);pointer-events:none;overflow:hidden}
.pageBg .glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55}
.pageBg .glow--a{width:46vw;height:46vw;left:-12vw;top:-14vw;background:radial-gradient(circle,#dfeccf 0%,rgba(223,236,207,0) 70%)}
.pageBg .glow--b{width:40vw;height:40vw;right:-10vw;bottom:-12vw;background:radial-gradient(circle,#d7ebe0 0%,rgba(215,235,224,0) 70%)}
body{font-family:var(--sans);color:var(--black);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}

.outerWrap{position:relative;overflow:clip}
.wrap{width:100%;max-width:1500px;margin:0 auto;padding-left:15px;padding-right:15px}
@media(max-width:1180px){.wrap{padding-left:30px;padding-right:30px}}
@media(max-width:768px){.wrap{padding-left:20px;padding-right:20px}}


/* 共用標題 */
.titleBox{text-align:center}
.titleBox .icon{display:block;width:34px;height:34px;margin:0 auto 22px;border-radius:50% 0 50% 0;background:linear-gradient(135deg,var(--leaf),var(--green));transform:rotate(-8deg)}
.titleBox .title{font-size:26px;line-height:1.5;letter-spacing:.1em;font-weight:500}
.titleBox .enTitle{margin-top:8px;font-family:var(--en);font-size:14px;letter-spacing:.06em;color:var(--green)}
.titleBox .text{margin-top:28px;font-size:15px;line-height:1.9;color:var(--black2);letter-spacing:.06em}
@media(max-width:768px){
  .titleBox .title{font-size:21px}
  /* 標題分段不拆開，只在段落之間換行，避免單字落單 */
  .titleBox .title span{display:inline-block}
  .titleBox .enTitle{font-size:12px}
  .titleBox .text{font-size:14px;text-align:left}
  .titleBox .text br{display:none}
}

/* 說明卡（設計標註）：--n 為設計稿 1px 的實際長度 */
.noteCard{--n:1px;position:absolute;z-index:5;width:calc(281 * var(--n));padding:calc(19.5 * var(--n)) calc(28 * var(--n)) calc(22 * var(--n));background:#fff;border:1px solid var(--green);border-radius:calc(14 * var(--n));color:var(--black);box-shadow:0 calc(12 * var(--n)) calc(30 * var(--n)) rgba(20,60,10,.12)}
.noteCard .noteTitle{font-size:calc(19 * var(--n));line-height:calc(30 * var(--n));font-weight:700;letter-spacing:.05em;color:var(--green)}
.noteCard .noteLine{height:1px;background:rgba(0,0,0,.18);margin:calc(11 * var(--n)) 0 calc(8 * var(--n));transform-origin:left}
.noteCard .noteText{font-size:calc(15 * var(--n));line-height:calc(27 * var(--n));letter-spacing:.04em;color:var(--black2)}
/* 引線：整個舞台一張 SVG，座標用百分比 */
.leadLine{position:absolute;inset:0;width:100%;height:100%;z-index:4;overflow:visible;pointer-events:none}
.leadLine polyline{fill:none;stroke:var(--green);stroke-width:1.2}

/* 按鈕 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;width:318px;max-width:100%;height:52px;padding:0 32px;background:var(--green);color:#fff;font-size:14px;letter-spacing:.2em;border-radius:999px;position:relative;overflow:hidden;transition:background .5s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;background:#0f3a02;transform:translateY(101%);transition:transform .6s var(--ease)}
.btn span{position:relative;z-index:1}
.btn:hover::after{transform:translateY(0)}
.btn.line{background:#fff;color:var(--black);border:1px solid var(--gray)}
.btn.line::after{background:var(--green)}
.btn.line:hover{color:#fff}


/* 拖曳游標 */
.dragCursor{position:fixed;left:0;top:0;z-index:60;width:71px;height:71px;margin:-35.5px 0 0 -35.5px;pointer-events:none}
.dragCursor .inner{width:100%;height:100%;border:1px solid var(--green);color:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;gap:7px;opacity:0;transform:scale(.3);transition:opacity .35s var(--ease),transform .45s var(--ease),background .35s,color .35s;background:rgba(255,255,255,.65);backdrop-filter:blur(4px)}
.dragCursor .arrowL,.dragCursor .arrowR{width:6px;height:6px;border-left:1px solid currentColor;border-bottom:1px solid currentColor}
.dragCursor .arrowL{transform:rotate(45deg)}
.dragCursor .arrowR{transform:rotate(-135deg)}
.dragCursor .dot{width:2px;height:2px;border-radius:50%;background:currentColor}
.dragCursor.is-show .inner{opacity:1;transform:scale(1)}
.dragCursor.is-down .inner{transform:scale(.78);background:var(--green);color:#fff}
@media(hover:none){.dragCursor{display:none}}


@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}