*,*::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{
  --blue:#244193;       /* 品牌主色：取自網站按鈕與 Logo */
  --blue2:#14296b;
  --blue-soft:rgba(36,65,147,.09);
  --sky:#7fb5ee;
  --black:#161c2c;
  --black2:#444;
  --gray:#c6cfdc;
  --gray2:#858fa3;
  --paper:#f3f6fa;
  --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,#d6e6f8 0%,rgba(214,230,248,0) 70%)}
.pageBg .glow--b{width:40vw;height:40vw;right:-10vw;bottom:-12vw;background:radial-gradient(circle,#e0ddf6 0%,rgba(224,221,246,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:42px;height:42px;margin:0 auto 26px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff 0 14%,rgba(255,255,255,0) 40%),conic-gradient(from 210deg,#7fb5ee,#244193,#7fb5ee,#cfe3f8,#7fb5ee);box-shadow:inset 0 0 0 5px rgba(255,255,255,.5)}
.titleBox .title{font-size:36px;line-height:1.5;letter-spacing:.1em;font-weight:500}
.titleBox .enTitle{margin-top:10px;font-family:var(--en);font-size:18px;letter-spacing:.06em;color:var(--blue)}
.titleBox .text{margin-top:28px;font-size:18px;line-height:1.9;color:var(--black2);letter-spacing:.06em}
@media(max-width:768px){
  .titleBox .title{font-size:26px}
  /* 標題分段不拆開，只在段落之間換行，避免單字落單 */
  .titleBox .title span{display:inline-block}
  .titleBox .enTitle{font-size:14px}
  .titleBox .text{font-size:16px;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(--blue);border-radius:calc(14 * var(--n));color:var(--black);box-shadow:0 calc(12 * var(--n)) calc(30 * var(--n)) rgba(20,40,90,.12)}
.noteCard .noteTitle{font-size:calc(19 * var(--n));line-height:calc(30 * var(--n));font-weight:700;letter-spacing:.05em;color:var(--blue)}
.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(--blue);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(--blue);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:#14296b;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(--blue)}
.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(--blue);color:var(--blue);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(--blue);color:#fff}
@media(hover:none){.dragCursor{display:none}}


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

/* 滑順捲軸（Lenis） */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}