/* 群光電子 ESG 案例頁 */

/* 標註點：半透明白圈＋藍點 */
.leadDot{position:absolute;z-index:6;width:27px;height:27px;border-radius:50%;background:rgba(255,255,255,.6);transform:translate(-50%,-50%)}
.leadDot::before{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--blue)}
.leadDot::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(36,65,147,.55);animation:leadPulse 2.4s var(--ease) infinite}
@keyframes leadPulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.7);opacity:0}}

/* 開場：原站鏡組素材，捲動組裝 */
.ccIntroArea{--navy:#14296b;--mono:'IBM Plex Mono','Noto Sans TC',monospace;position:relative;height:100svh;min-height:600px;overflow:hidden;background:#e9f0fa;color:var(--navy)}
.introBg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;transform-origin:50% 80%}

/* 標題在鏡組之後，經過鏡片時被玻璃柔化 */
.introTitle{position:absolute;inset:0;z-index:1;pointer-events:none;font-family:var(--en);font-weight:400;font-size:7.2vw;line-height:1;letter-spacing:-.025em}
.introTitle .line{position:absolute;display:block;white-space:nowrap;overflow:hidden;padding:.08em 0 .12em}
.introTitle .line--a{left:5vw;top:24%;color:var(--navy)}
.introTitle .line--b{right:5vw;top:62%;color:var(--navy)}
.introTitle .word{display:inline-block;white-space:nowrap;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.introTitle .char{display:inline-block;will-change:transform}

/* 16:9 舞台：寬度鋪滿畫面（cover），零件以舞台寬度定位 */
.introRig{position:absolute;left:50%;top:50%;z-index:2;width:max(100vw,177.78svh);aspect-ratio:16/9;transform:translate(-50%,-50%);container-type:inline-size;pointer-events:none}
.introPart,.introCube{position:absolute;left:var(--x);height:var(--h)}
.introPart{top:50%}
.introCube{top:var(--y);z-index:3}
.introPart img,.introCube img{display:block;width:auto;height:100%;max-width:none}
/* 待機浮動：JS 寫入 --fx/--fy/--fr，--amp 控制幅度（收合時歸零）；GSAP 會在行內寫 translate/rotate:none，需 !important */
.introPart img,.introCube img,.introPart .glass{translate:calc(var(--fx,0) * var(--amp,1) * 1px) calc(var(--fy,0) * var(--amp,1) * 1px)!important;rotate:calc(var(--fr,0) * var(--amp,1) * 1deg)!important}
.introPart .glass{position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-backdrop-filter:blur(.32cqw) saturate(1.7) brightness(1.08);backdrop-filter:blur(.32cqw) saturate(1.7) brightness(1.08)}
.introPart--sensor{z-index:1}
.introPart .bloom{position:absolute;left:50%;top:50%;width:26cqw;height:26cqw;margin:-13cqw 0 0 -13cqw;border-radius:50%;background:radial-gradient(circle,#fff 0%,rgba(214,236,255,.85) 18%,rgba(160,205,255,.35) 42%,rgba(160,205,255,0) 68%);opacity:0;transform:scale(.2);pointer-events:none}

/* 光束：由左緣射入，停在感光元件 */
.introBeam{position:absolute;left:0;top:50%;width:69%;height:.16cqw;margin-top:-.08cqw;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 22%,#d6f4ff 70%,#fff);box-shadow:0 0 .8cqw .2cqw rgba(170,215,255,.9),0 0 3cqw .6cqw rgba(140,190,255,.45)}

/* 介面 */
.introUi{position:absolute;inset:0;z-index:5;pointer-events:none;font-family:var(--mono);letter-spacing:.08em}
.introBrand{position:absolute;left:4vw;top:4.5svh;display:flex;align-items:center;gap:12px}
.introBrand img{width:clamp(96px,8vw,150px);height:auto}
.introBrand span{padding-left:12px;border-left:1px solid rgba(20,41,107,.3);font-family:var(--en);font-size:15px}
.introMeta{position:absolute;right:4vw;top:4.5svh;text-align:right}
.introMeta span{display:block;font-size:12px;color:var(--gray2)}
.introMeta h1{display:block;margin-top:6px;font-family:var(--sans);font-style:normal;font-weight:500;font-size:clamp(17px,1.35vw,24px);letter-spacing:.1em;color:var(--navy)}
.introCount{position:absolute;right:4vw;bottom:5svh;display:flex;align-items:baseline;gap:6px}
.introCount span{margin-right:10px;font-size:11px}
.introCount b{font-family:var(--en);font-weight:400;font-size:clamp(40px,4.4vw,72px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.introCount small{font-size:14px}
.introHint{position:absolute;left:50%;bottom:5svh;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:11px}
.introHint i{width:1px;height:42px;background:linear-gradient(var(--navy),rgba(20,41,107,0));transform-origin:50% 0;animation:introHint 1.8s var(--ease) infinite}
@keyframes introHint{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* 光圈：由感光元件中心張開，裡面是下一幕 E / S / G */
.introIris{position:absolute;inset:0;z-index:8;background:radial-gradient(60% 55% at 50% 52%,#ffffff 0%,rgba(255,255,255,0) 70%),radial-gradient(40% 40% at 86% 12%,#e0ddf6 0%,rgba(224,221,246,0) 70%),radial-gradient(45% 45% at 8% 92%,#d6e6f8 0%,rgba(214,230,248,0) 70%),var(--paper);clip-path:circle(0 at 56% 50%);pointer-events:none}
.impactStage{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 4vw}
.impactStage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18svh;background:linear-gradient(rgba(243,246,250,0),var(--paper));pointer-events:none}
/* 背景光暈：隨捲動緩慢漂移 */
.impactGlow{position:absolute;width:52vw;height:52vw;border-radius:50%;filter:blur(70px);opacity:0;pointer-events:none}
.impactGlow--a{left:-6vw;top:-8vw;background:radial-gradient(circle,rgba(127,181,238,.85),rgba(127,181,238,0) 68%)}
.impactGlow--b{right:-10vw;top:10vh;background:radial-gradient(circle,rgba(184,160,240,.8),rgba(184,160,240,0) 68%)}
.impactGlow--c{left:30vw;bottom:-26vw;background:radial-gradient(circle,rgba(150,226,214,.7),rgba(150,226,214,0) 68%)}
.impactList{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:4vw;width:100%;max-width:1500px}
.impactItem{display:flex;flex-direction:column;align-items:center;text-align:center}
.impactLetter{position:relative;font-family:var(--en);font-weight:500;font-size:min(27vw,46svh);line-height:.86;letter-spacing:0}
.impactLetter span{padding:0 .08em}
.impactLetter .stroke{display:block;color:transparent;-webkit-text-stroke:1.5px rgba(20,41,107,.28)}
.impactLetter .fill{position:absolute;inset:0;background:linear-gradient(170deg,#14296b 10%,#2f56c9 45%,#7a5ad8 75%,#2fa7c9 100%);-webkit-background-clip:text;background-clip:text;color:transparent;clip-path:inset(100% 0 0 0)}
.impactInfo{margin-top:3svh}
.impactName{font-size:clamp(18px,1.45vw,24px);font-weight:500;letter-spacing:.12em;color:var(--navy)}
.impactName b{display:block;margin-bottom:6px;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.14em;color:var(--gray2)}
.impactData{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:0 6px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(20,41,107,.18);color:var(--navy)}
.impactData span{font-family:var(--en);font-size:clamp(30px,2.8vw,48px);line-height:1;font-variant-numeric:tabular-nums}
.impactData small{font-size:15px}
.impactData em{flex-basis:100%;margin-top:10px;font-size:clamp(15px,1.15vw,18px);letter-spacing:.08em;color:var(--black2)}
.impactLine{margin-top:5svh;font-size:clamp(18px,1.6vw,26px);line-height:1.6;letter-spacing:.16em;font-weight:500;text-align:center;color:var(--navy)}
.impactLine br{display:none}

@media(max-width:768px){
  .introTitle{font-size:11vw;line-height:1.05}
  .introTitle .line--a{left:20px;top:17%;white-space:normal;width:9em}
  .introTitle .line--b{left:auto;right:20px;top:auto;bottom:22%;text-align:right;white-space:normal;width:6em}
  .introRig{width:210vw;top:52%}
  .introBrand{left:20px;top:20px}
  .introBrand span{font-size:13px}
  .introMeta{right:20px;top:18px}
  .introMeta span{font-size:10px}
  .introMeta h1{margin-top:3px;font-size:13px;letter-spacing:.06em}
  .introCount{right:20px;bottom:20px}
  .introCount span{display:none}
  .introCount b{font-size:34px}
  .introHint{display:none}
  .impactGlow{width:110vw;height:110vw;filter:blur(50px)}
  .impactList{gap:10px}
  .impactLetter{font-size:30vw}
  .impactLetter .stroke{-webkit-text-stroke-width:1px}
  .impactName{font-size:15px;letter-spacing:.04em}
  .impactName b{font-size:9px;letter-spacing:.04em}
  .impactData{margin-top:10px;padding-top:10px}
  .impactData span{font-size:24px}
  .impactData small{font-size:12px}
  .impactData em{font-size:13px;letter-spacing:0}
  .impactLine{margin-top:6svh;font-size:17px;letter-spacing:.1em}
  .impactLine br{display:inline}
}

/* ① 首頁主視覺 */
.ccHeroArea{position:relative;z-index:2;padding-top:70px}
.heroStage{position:relative;width:100%;max-width:calc((100vh - 140px) * 16 / 9);margin:0 auto;aspect-ratio:16/9;container-type:inline-size;border-radius:var(--radius);box-shadow:0 30px 80px rgba(20,40,90,.12)}
.heroStage .heroShot{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
.heroMask{position:absolute;left:0;right:0;background:rgba(8,16,44,.62);opacity:0;pointer-events:none}
.heroMask--nav{top:0;height:11%;border-radius:var(--radius) var(--radius) 0 0}
.heroMask--content{top:11%;bottom:0;border-radius:0 0 var(--radius) var(--radius)}
.heroStage .noteCard{--n:max(calc(100cqw / 1600),.8px);opacity:0}
.noteCard--nav{left:61.5%;top:18.5%}
.noteCard--brand{left:70.5%;top:26.5%}
.leadDot--nav{left:56%;top:5.4%}
.leadDot--brand{left:50%;top:38%}
.heroStage .leadDot{width:max(1.7cqw,20px);height:max(1.7cqw,20px)}
.heroStage .leadLine,.heroStage .leadDot{opacity:0}
@media(max-width:768px){
  .ccHeroArea{padding:32px 0 60px}
  .heroStage{max-width:none;aspect-ratio:auto;box-shadow:none}
  .heroStage .heroShot{aspect-ratio:16/9;box-shadow:0 16px 40px rgba(20,40,90,.12)}
  .heroStage .noteCard{--n:1px;position:relative;left:auto;top:auto;width:auto;opacity:1;margin-top:16px}
  .heroStage .leadLine,.heroStage .leadDot,.heroMask{display:none}
}

/* ② 執行成效 */
.ccStoryArea{position:relative;padding:160px 0 180px}
.storyStage{position:relative;width:100%;max-width:min(1300px,calc((100vw - 48px) / 1.2784));margin:80px auto 0;aspect-ratio:1300/880;container-type:inline-size}
.storyStage .storyPaper{position:absolute;inset:0;background:#fff;border-radius:var(--radius);box-shadow:0 30px 80px rgba(20,40,90,.08)}
.storyStage .storyShot{position:absolute;left:4%;top:7.3%;width:92%;height:auto}
.storyBlockList{position:absolute;inset:0;pointer-events:none;border-radius:var(--radius);overflow:hidden}
.storyBlock{position:absolute;top:0;height:100%;width:17.4%;background:rgba(36,65,147,.06);mix-blend-mode:multiply;transform-origin:bottom}
.storyBlock:nth-child(1){left:0}
.storyBlock:nth-child(2){left:20.69%}
.storyBlock:nth-child(3){left:41.38%}
.storyBlock:nth-child(4){left:62.08%}
.storyBlock:nth-child(5){left:82.62%}
.storyStage .noteCard{--n:max(calc(100cqw / 1300),.8px);width:calc(301 * var(--n))}
.storyStage .leadDot{width:max(2.08cqw,20px);height:max(2.08cqw,20px)}
.noteCard--left{left:-13.65%;top:64%}
.noteCard--right{left:38%;top:70%}
.leadDot--left{left:46%;top:44%}
.leadDot--right{left:72%;top:44%}
@media(max-width:1180px){
  .storyStage{max-width:none;aspect-ratio:auto;padding-top:calc(67.7% + 24px);display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .storyStage .storyPaper,.storyBlockList{bottom:auto;aspect-ratio:1300/880}
  .storyStage .leadLine,.storyStage .leadDot{display:none}
  .storyStage .noteCard{--n:1px;position:relative;top:auto;left:auto;width:auto}
}
@media(max-width:640px){
  .ccStoryArea{padding:100px 0 80px}
  .storyStage{grid-template-columns:1fr;margin-top:48px}
}

/* Key Performance：背光鍵盤 */
.ccKeyArea{--dark:#0c1740;--on:#7fb5ee;--iris:linear-gradient(90deg,#ffe98f,#b9f0e6,#9ccbff,#d6b8f0,#ffb7c4,#ffd9a0);position:relative;z-index:2;padding:0 16px}
.keyStage{position:relative;display:grid;grid-template-columns:minmax(340px,31%) 1fr;gap:1vw;align-items:center;height:calc(100vh - 32px);min-height:640px;padding:0 clamp(40px,4.4vw,84px) 0 clamp(32px,4.4vw,84px);overflow:hidden;border-radius:28px;color:#fff;background:radial-gradient(60% 80% at 74% 62%,#25408f 0%,rgba(37,64,143,0) 70%),radial-gradient(40% 50% at 8% 8%,#1b2d6e 0%,rgba(27,45,110,0) 70%),var(--dark)}
.keyStage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(159,197,245,.16) 1px,transparent 1.4px);background-size:26px 26px;-webkit-mask-image:linear-gradient(100deg,#000,transparent 70%);mask-image:linear-gradient(100deg,#000,transparent 70%);pointer-events:none}

.keyTrace{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.keyTrace path{fill:none;stroke-linejoin:round;stroke-linecap:round}
.keyTrace .base{stroke:rgba(127,181,238,.28);stroke-width:1}
.keyTrace .pulse{stroke:#d9ecff;stroke-width:2;stroke-dasharray:.16 1;stroke-dashoffset:.16;filter:drop-shadow(0 0 5px #7fb5ee)}

.keyInfo{position:relative;z-index:4}
.keyTag{display:inline-block;padding:.25em .7em;background:rgba(127,181,238,.16);color:#bcd9fa;font-family:var(--en);font-weight:600;font-size:12px;letter-spacing:.16em}
.keyTitle{margin-top:18px;font-size:clamp(24px,2.05vw,34px);line-height:1.4;font-weight:500;letter-spacing:.06em}
.keyTitle span{display:inline-block}
.keyText{margin-top:14px;max-width:25em;font-size:14px;line-height:1.85;letter-spacing:.05em;color:rgba(214,229,250,.72)}
.keyRead{margin-top:clamp(24px,5vh,56px);padding-top:18px;border-top:1px solid rgba(159,197,245,.25)}
.keyTheme{display:flex;align-items:center;min-height:1.6em;font-family:'IBM Plex Mono','Noto Sans TC',monospace;font-size:13px;letter-spacing:.08em;color:#bcd9fa}
.keyCaret{display:inline-block;width:.55em;height:1.1em;margin-left:.3em;background:#bcd9fa;animation:keyCaret 1s steps(1) infinite}
@keyframes keyCaret{50%{opacity:0}}
.keyNum{margin-top:10px;font-family:var(--en);font-size:clamp(84px,9.4vw,168px);line-height:1;font-weight:500;letter-spacing:-.02em;white-space:nowrap}
.keyNum small{margin-left:.14em;font-size:.2em;letter-spacing:.04em;opacity:.7}
.keyNum.is-word{font-family:var(--sans);font-size:clamp(60px,6.4vw,112px);line-height:1.5;letter-spacing:.04em}
.keyNum.is-slogan{font-family:var(--en);font-size:clamp(30px,3vw,52px);line-height:1.2;letter-spacing:0;white-space:normal;background:var(--iris);-webkit-background-clip:text;background-clip:text;color:transparent}
.keyName{margin-top:12px;font-size:clamp(19px,1.5vw,24px);font-weight:500;letter-spacing:.08em;color:#fff}
.keySource{margin-top:clamp(16px,3vh,32px);font-size:14px;letter-spacing:.05em;color:rgba(214,229,250,.62)}

.kbWrap{position:relative;z-index:2;min-width:0;container-type:inline-size}
.kbBoard{--rx:26deg;--rz:-5deg;position:relative;width:100%;padding:1.6cqw;border-radius:2cqw;background:linear-gradient(150deg,#1c2f70,#101d4e);box-shadow:0 1.4cqw 0 #070e2c,0 4cqw 7cqw rgba(0,5,25,.6),inset 0 1px 0 rgba(159,197,245,.25);transform:perspective(1700px) rotateX(var(--rx)) rotateZ(var(--rz));transform-origin:50% 50%}
.kbGlow{position:absolute;left:0;top:0;width:34cqw;height:34cqw;margin:-17cqw 0 0 -17cqw;border-radius:50%;background:radial-gradient(circle,rgba(127,181,238,.5),rgba(127,181,238,0) 68%);opacity:0;pointer-events:none;transition:opacity .4s}
.kbRow{position:relative;display:flex;gap:.7cqw;margin-top:.7cqw}
.kbRow:first-of-type{margin-top:0;margin-bottom:1.5cqw}

/* 鍵帽：未亮為深藍，按下後轉為背光鍵帽 */
.kbKey{--lift:.62cqw;position:relative;display:flex;flex:var(--u,1) 1 0;flex-direction:column;justify-content:space-between;min-width:0;height:8.2cqw;padding:.8cqw .9cqw;border-radius:.8cqw;text-align:left;font-family:var(--sans);color:rgba(198,219,247,.62);background:linear-gradient(160deg,#24387a,#18295e);box-shadow:0 var(--lift) 0 #0a1436,0 calc(var(--lift) + .4cqw) 1cqw rgba(2,8,30,.55),inset 0 1px 0 rgba(255,255,255,.1);transition:transform .22s var(--ease),box-shadow .35s var(--ease),background .35s,color .35s}
button.kbKey:focus-visible{outline:2px solid #fff;outline-offset:2px}
.kbKey b{display:block;font-family:var(--en);font-size:2.3cqw;line-height:1.1;font-weight:600;white-space:nowrap}
.kbKey b small{margin-left:.2em;font-family:var(--sans);font-size:.48em;font-weight:500}
.kbKey span{display:block;font-size:max(1.12cqw,10px);line-height:1.3;letter-spacing:.02em}
.kbKey.is-lit{color:var(--dark);background:linear-gradient(160deg,#fff,#c8def8);box-shadow:0 var(--lift) 0 #5e8dd0,0 0 1.7cqw .25cqw rgba(127,181,238,.75),inset 0 1px 0 #fff}
.kbKey.is-press,button.kbKey:active{transform:translateY(calc(var(--lift) * .75));box-shadow:0 calc(var(--lift) * .25) 0 #5e8dd0,0 0 2.6cqw .5cqw rgba(159,205,255,.95),inset 0 1px 0 #fff}
@media(hover:hover) and (pointer:fine){button.kbKey:not(.is-lit):hover{color:#fff;background:linear-gradient(160deg,#2e4592,#1f3273)}}

.kbKey--mod{justify-content:flex-end;font-size:max(1.05cqw,11px);letter-spacing:.08em;color:rgba(198,219,247,.42);background:linear-gradient(160deg,#16255a,#101c48)}
.kbKey--mod em{margin-bottom:auto;font-family:var(--en);font-weight:600;font-size:.9em;letter-spacing:.1em}
.kbKey--mod.is-lit{color:#fff;background:linear-gradient(160deg,#3a63c4,#244193);box-shadow:0 var(--lift) 0 #14296b,0 0 1.2cqw rgba(127,181,238,.45),inset 0 1px 0 rgba(255,255,255,.3)}
.kbKey--fn{--lift:.4cqw;height:5cqw;padding:.55cqw .8cqw}
.kbKey--fn b{font-size:1.4cqw}
.kbKey--fn span{font-size:max(1cqw,10px)}
.kbRow--space{margin-top:.9cqw}
.kbKey--space{align-items:center;justify-content:center;text-align:center}
.kbKey--space b{font-size:max(1.3cqw,11px);letter-spacing:.14em}
.kbKey--space.is-lit{background:var(--iris);box-shadow:0 var(--lift) 0 #7d8fd4,0 0 3cqw .5cqw rgba(190,205,255,.75),inset 0 1px 0 #fff}
.kbKey--space.is-press{box-shadow:0 calc(var(--lift) * .25) 0 #7d8fd4,0 0 4cqw .9cqw rgba(190,205,255,.85),inset 0 1px 0 #fff}

@media(max-width:1180px){
  /* 平板：讀數在上、鍵盤在下，鍵帽才有足夠寬度 */
  .keyStage{grid-template-columns:minmax(0,1fr);align-content:center;gap:clamp(24px,5vh,56px);padding:0 32px}
  .keyTrace,.keyText,.keySource{display:none}
  .keyInfo{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;column-gap:32px;align-items:start}
  .keyTag{justify-self:start}
  .keyTitle{grid-column:1;margin-top:14px}
  .kbBoard{width:92%;margin:0 auto}
  .keyRead{grid-column:2;grid-row:1/3;margin:0;padding:0 0 0 28px;border-top:0;border-left:1px solid rgba(159,197,245,.25)}
  .keyNum{margin-top:6px;font-size:76px}
  .keyNum.is-word{font-size:56px;line-height:1.36}
  .keyNum.is-slogan{font-size:30px}
  .keyName{margin-top:8px;font-size:18px}
}
/* 手機：鍵盤攤平，每列一個主題，捲到時依序亮起 */
@media(max-width:768px){
  .ccKeyArea{padding:0 10px}
  .keyStage{display:block;height:auto;min-height:0;padding:44px 16px 20px;border-radius:20px}
  .keyTrace,.keyRead,.kbGlow{display:none}
  .keyInfo{display:block}
  .keyText{display:block}
  .keySource{display:block}
  .keyTitle{font-size:21px}
  .kbWrap{margin-top:28px}
  .kbBoard{--rx:0deg;--rz:0deg;width:100%;padding:0;background:none;box-shadow:none;transform:none}
  .kbRow,.kbRow:first-of-type{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 28px}
  .kbKey{--lift:4px;height:auto;min-height:92px;padding:12px;border-radius:10px;gap:10px}
  .kbKey b{font-size:26px}
  .kbKey span{font-size:12px}
  .kbKey--mod{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;min-height:0;padding:10px 12px;font-size:14px}
  .kbKey--mod em{margin:0;font-size:12px}
  .kbRow--fn .kbKey{min-height:0}
  .kbKey--fn b{font-size:15px}
  .kbRow--space{margin-bottom:0}
  .kbRow--space .kbKey--mod{display:none}
  .kbKey:not(.kbKey--fn):last-child:nth-child(even){grid-column:1/-1}
  .kbKey--space{grid-column:1/-1;min-height:64px}
  .kbKey--space b{font-size:12px;white-space:normal;line-height:1.6}
  .keySource{margin-top:20px}
}

/* ③ ESG 三大面向：預設為上下排列（手機、減少動態）；桌機由 JS 加上 is-pin 改為固定區塊——文字置中，周圍畫面由景深飛向鏡頭 */
.ccLensArea{position:relative;padding:120px 0 40px}
.lensHead{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.lensDeck{position:relative;max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.focusCh{position:relative;display:flex;flex-direction:column;padding:72px 0 24px}
.focusBody{display:flex;flex-direction:column;align-items:flex-start;color:var(--black)}
.lensNo{display:flex;align-items:baseline;gap:12px;font-family:'IBM Plex Mono',monospace;font-size:16px;letter-spacing:.08em;color:var(--gray2)}
.lensNo b{font-family:var(--en);font-size:72px;line-height:1;font-weight:600;color:var(--blue)}
.lensName{margin-top:14px;font-size:clamp(32px,3.2vw,50px);line-height:1.3;font-weight:500;letter-spacing:.1em}
.lensEn{margin-top:6px;font-family:var(--en);font-size:19px;letter-spacing:.04em;color:var(--blue)}
.lensText{margin-top:22px;max-width:28em;font-size:18px;line-height:1.9;letter-spacing:.05em;color:var(--black2)}
/* 頁面規劃：純文字標示該頁的組成，以細線分隔 */
.focusPlan{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:24px;font-family:'IBM Plex Mono','Noto Sans TC',monospace;font-size:14px;letter-spacing:.08em;color:var(--blue)}
.focusPlan li{display:flex;align-items:center}
.focusPlan li+li::before{content:"";width:1px;height:12px;margin:0 14px;background:rgba(36,65,147,.3)}

/* 周圍畫面：預設（手機）為兩欄縮圖，只放前四張 */
.focusShots{order:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:36px}
.focusShot{margin:0;overflow:hidden;border-radius:12px;background:#fff;border:1px solid rgba(255,255,255,.9);box-shadow:0 18px 40px rgba(20,40,90,.14)}
.focusShot:nth-child(n+5){display:none}
.focusShot img{display:block;width:100%;height:auto}
.focusShot--crop img{aspect-ratio:var(--ar);height:auto;object-fit:cover}
.focusShot--photo{border-radius:16px}
.focusShot--card{background:transparent;border:0;box-shadow:0 18px 40px rgba(20,40,90,.12)}

/* 背景與光點（僅桌機固定區塊顯示） */
.lensBgs,.focusNav{display:none}
.lensBg{position:absolute;inset:0;overflow:hidden}
.lensBg--e{background:linear-gradient(120deg,#f4f8fd 30%,#e3f4ee 100%)}
.lensBg--s{background:linear-gradient(120deg,#f6f4fb 30%,#ece4f8 100%)}
.lensBg--g{background:linear-gradient(120deg,#f2f6fc 30%,#dde9f8 100%)}
.lensBgIn{position:absolute;left:0;right:0;top:-12%;bottom:-12%}
.lensGlow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.75;will-change:transform}
.lensGlow:nth-child(1){width:46vw;height:46vw;left:48%;top:4%}
.lensGlow:nth-child(2){width:34vw;height:34vw;left:70%;top:46%}
.lensGlow:nth-child(3){width:28vw;height:28vw;left:-6%;top:58%;opacity:.5}
.lensBg--e .lensGlow:nth-child(1){background:radial-gradient(circle,rgba(96,205,170,.55),transparent 68%)}
.lensBg--e .lensGlow:nth-child(2){background:radial-gradient(circle,rgba(80,150,230,.45),transparent 68%)}
.lensBg--e .lensGlow:nth-child(3){background:radial-gradient(circle,rgba(150,225,120,.45),transparent 68%)}
.lensBg--s .lensGlow:nth-child(1){background:radial-gradient(circle,rgba(170,130,235,.5),transparent 68%)}
.lensBg--s .lensGlow:nth-child(2){background:radial-gradient(circle,rgba(240,150,190,.42),transparent 68%)}
.lensBg--s .lensGlow:nth-child(3){background:radial-gradient(circle,rgba(120,150,240,.42),transparent 68%)}
.lensBg--g .lensGlow:nth-child(1){background:radial-gradient(circle,rgba(70,120,220,.5),transparent 68%)}
.lensBg--g .lensGlow:nth-child(2){background:radial-gradient(circle,rgba(90,200,230,.42),transparent 68%)}
.lensBg--g .lensGlow:nth-child(3){background:radial-gradient(circle,rgba(130,110,230,.4),transparent 68%)}
/* 光點：白芯藍暈，像鏡片上的光斑 */
.focusDust{position:absolute;inset:0;pointer-events:none}
.focusDust i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:#fff;box-shadow:0 0 calc(var(--s) * 2.2) rgba(127,181,238,.9);opacity:var(--o);will-change:transform}

/* 桌機：固定區塊。文字置中，周圍畫面放在 3D 空間中 */
.lensDeck.is-pin{max-width:none;height:100vh;height:100svh;min-height:640px;padding:0;overflow:hidden}
.is-pin .lensBgs{position:absolute;inset:0;z-index:0;display:block;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
.is-pin .focusCh{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;pointer-events:none}
.is-pin .focusShots{position:absolute;inset:0;display:block;margin:0;perspective:1100px;perspective-origin:50% 50%;transform-style:preserve-3d}
.is-pin .focusShot,.is-pin .focusShot:nth-child(n+5){position:absolute;left:var(--x);top:var(--y);display:block;width:var(--w);border-radius:14px;box-shadow:0 30px 70px rgba(20,40,90,.2),0 8px 20px rgba(20,40,90,.08);will-change:transform,opacity}
.is-pin .focusShot--photo{border-radius:20px}
.is-pin .focusShot--card{box-shadow:0 26px 60px rgba(20,40,90,.16)}
/* 文字：置中，後方加一層柔光讓字在畫面之上仍好讀 */
.is-pin .focusBody{position:relative;z-index:2;align-items:center;width:min(640px,86vw);text-align:center;pointer-events:auto}
.is-pin .focusBody::before{content:"";position:absolute;left:50%;top:50%;z-index:-1;width:150%;height:150%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(246,249,253,.92),rgba(246,249,253,.6) 55%,rgba(246,249,253,0));pointer-events:none}
.is-pin .lensNo{justify-content:center}
.is-pin .lensNo b{font-size:64px}
.is-pin .lensText{max-width:34em;margin-top:20px;font-size:17px}
.is-pin .focusPlan{justify-content:center;margin-top:26px}
/* 右側進度：E / S / G */
.is-pin .focusNav{position:absolute;right:clamp(24px,3vw,56px);top:50%;z-index:3;display:flex;flex-direction:column;gap:6px;transform:translateY(-50%)}
.focusNavBtn{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:6px 0;border:0;background:none;color:var(--gray2);cursor:pointer;font:inherit}
.focusNavBtn b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(36,65,147,.25);background:#fff;box-shadow:0 4px 12px rgba(20,40,90,.1);font-family:var(--en);font-size:14px;font-weight:600;transition:background-color .4s,color .4s,border-color .4s}
.focusNavBtn span{order:-1;font-size:13px;letter-spacing:.1em;opacity:0;transform:translateX(6px);transition:opacity .4s,transform .4s var(--ease)}
.focusNavBtn.is-on{color:var(--blue)}
.focusNavBtn.is-on b{border-color:var(--blue);background:var(--blue);color:#fff}
.focusNavBtn.is-on span,.focusNavBtn:hover span{opacity:1;transform:none}
.focusNavBtn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:768px){
  .ccLensArea{padding:80px 0 20px}
  .focusCh{padding-top:56px}
  .lensNo b{font-size:44px}
  .focusShots{gap:10px;margin-top:28px}
  .focusShot{border-radius:8px}
}

/* ④ 細節互動 */
.ccFeatureArea{position:relative;padding:120px 0 160px}
.featList{display:grid;grid-template-columns:repeat(2,1fr);gap:80px 28px;max-width:1546px;margin:80px auto 0}
.featCard .cardImg{position:relative;aspect-ratio:16/9;background:#fff;overflow:hidden;border-radius:var(--radius);box-shadow:0 20px 60px rgba(20,40,90,.12)}
.featCard .cardImg img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.2s var(--ease)}
.featCard:hover .cardImg img{transform:scale(1.02) !important}
.featCard .cardName{display:flex;align-items:center;gap:14px;margin-top:32px;font-size:17px;letter-spacing:.1em;font-weight:500}
.featCard .cardName::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue)}
.featCard .cardName::after{content:"";flex:1;height:1px;background:rgba(0,0,0,.12)}
@media(max-width:768px){
  .ccFeatureArea{padding:80px 0 100px}
  .featList{grid-template-columns:1fr;gap:48px;margin-top:48px}
  .featCard .cardName{margin-top:20px}
}

/* ⑤ 客製化內頁 */
.ccPageArea{position:relative;padding:60px 0 140px}
.pageSwiper{margin-top:80px;padding:20px 0 50px;overflow:visible}
.pageSwiper .pageItem{width:clamp(280px,46vw,759px);aspect-ratio:759/486;user-select:none}
.pageSwiper .pageItem img{width:100%;height:100%;object-fit:cover;object-position:top;background:#fff;border-radius:var(--radius);box-shadow:0 24px 60px rgba(20,40,90,.14);pointer-events:none;transform:scale(.9);transition:transform .8s var(--ease)}
.pageSwiper .swiper-slide-active img{transform:scale(1)}
.pageSwiper.is-grabbing .pageItem img{transform:scale(.86)}
@media(hover:hover) and (pointer:fine){.pageSwiper,.pageSwiper *{cursor:none}}
.pageProgress{max-width:320px;height:2px;margin:10px auto 0;background:rgba(0,0,0,.1);border-radius:2px;overflow:hidden}
.pageProgress i{display:block;height:100%;background:var(--blue);transform-origin:left;transform:scaleX(.1667);transition:transform .6s var(--ease)}
@media(max-width:768px){.pageSwiper{margin-top:48px}.pageSwiper .pageItem{width:80vw}}

/* 結尾 */
.caseEndArea{padding:60px 0 140px;text-align:center}
/* 專案團隊 */
.caseTeam{max-width:760px;margin:0 auto 90px;padding-bottom:70px;border-bottom:1px solid rgba(36,65,147,.16)}
.caseTeamTitle{font-size:clamp(26px,2.4vw,36px);font-weight:500;letter-spacing:.12em;color:var(--navy)}
.caseTeamTitle span{display:block;margin-bottom:10px;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.16em;color:var(--blue)}
.caseTeamList{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.caseTeamList dt{font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--gray2)}
.caseTeamList dd{margin:10px 0 0;font-family:var(--en);font-size:clamp(22px,1.8vw,28px);font-weight:500;letter-spacing:.04em;color:var(--navy)}
@media(max-width:768px){.caseTeam{margin-bottom:60px;padding-bottom:50px}.caseTeamList{grid-template-columns:1fr;gap:24px;margin-top:30px}}
.caseEndArea .logo{margin:0 auto;width:280px;height:auto}
.caseEndArea .text{margin-top:28px;font-size:16px;letter-spacing:.2em;color:var(--black2)}
.caseEndArea .btnBox{display:flex;justify-content:center;gap:16px;margin-top:44px;flex-wrap:wrap}

/* iPhone Safari：改用實際可見高度 svh */
@supports (height:100svh){
  .heroStage{max-width:calc((100svh - 140px) * 16 / 9)}
  .keyStage{height:calc(100svh - 32px)}
}
@media(max-width:768px){
  @supports (height:100svh){.heroStage{max-width:none}.keyStage{height:auto}}
}

/* 群光專屬元件 */
.featCard .cardImg--top img{object-position:50% 0;transform-origin:50% 12%}