/* =============================================================
   派遣 AI 長 — 內頁共用系統（sections.css）
   與首頁 home.css 的共用區塊同源:進場/圖解/影像框/CTA/頂格。
   僅於非首頁載入(首頁由 home.css 提供同套系統)。
   規範見 DESIGN-GUIDE.md;RWD:tablet ≤999.98px、mobile ≤689.98px
   ============================================================= */

/* 滿版:解除 Blocksy 容器限制 */
.paid-page{overflow-x:clip;}
#main-container{padding:0!important;max-width:100%!important;}
.site-main{max-width:100%!important;margin:0!important;}

/* 桌機才生效的手動斷行 */
.br-d{display:none;}
@media (min-width:690px){.br-d{display:inline;}}

/* ---- 進場 ---- */
[data-reveal]{opacity:0;transform:translateY(var(--move));
  transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);}
[data-reveal].is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important;}}

/* 區塊標頭 */
.sec-head{max-width:60ch;}
.sec-head .h2{margin:0 0 var(--space-5);}
.sec-head .lead{margin:0;max-width:44ch;}

/* 頂部非對稱網格(文字 6 × 圖 5,一律頂對齊) */
.sec-top{display:grid;grid-template-columns:repeat(var(--grid-cols),1fr);
  column-gap:var(--gutter);align-items:start;margin-bottom:var(--head-gap);}
.sec-top .sec-head{grid-column:1 / span 6;margin:0;}
.sec-top__side{grid-column:8 / span 5;}
@media (max-width:999.98px){
  .sec-top .sec-head{grid-column:1 / -1;}
  .sec-top__side{grid-column:1 / span 9;margin-top:var(--space-7);}
}
@media (max-width:689.98px){.sec-top__side{grid-column:1 / -1;}}

/* =============================================================
   圖解系統(與 home.css 同源)
   ============================================================= */
.diag{width:100%;height:auto;display:block;}
.diag text{font-family:var(--font-sans);}
.diag .d-hair{stroke-width:1;fill:none;}
.diag circle.d-fade:not([fill]):not([style*="fill"]){fill:none;stroke-width:1;}
.diag .d-line{fill:none;stroke-width:2;stroke-linecap:round;}
.diag .d-draw{stroke-dasharray:1;stroke-dashoffset:1;}
.diag .d-fade{opacity:0;}
[data-reveal].is-in .d-draw{stroke-dashoffset:0;
  transition:stroke-dashoffset 1.2s var(--ease-out) .15s;}
[data-reveal].is-in .d-fade{opacity:1;
  transition:opacity .6s var(--ease-out) .15s;}
[data-reveal].is-in .d-t1{transition-delay:.4s;}
[data-reveal].is-in .d-t2{transition-delay:.65s;}
[data-reveal].is-in .d-t3{transition-delay:.9s;}
[data-reveal].is-in .d-t4{transition-delay:1.15s;}
[data-reveal].is-in .d-t5{transition-delay:1.4s;}
[data-reveal].is-in .d-t6{transition-delay:1.65s;}

.d-flow{fill:none;stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:3 11;opacity:0;animation:dFlow 3.2s linear infinite;}
[data-reveal].is-in .d-flow{opacity:.9;transition:opacity .8s var(--ease-out) 1.2s;}
@keyframes dFlow{to{stroke-dashoffset:-56;}}

.d-live{fill:none;stroke-width:2;stroke-linecap:round;
  stroke-dasharray:2 10;opacity:0;animation:dFlow 2.6s linear infinite;}
.d-live--slow{animation-duration:4.2s;stroke-dasharray:3 8;}
[data-reveal].is-in .d-live{opacity:.75;transition:opacity .8s var(--ease-out) 1.4s;}

.d-dot{transform-box:fill-box;transform-origin:center;}
[data-reveal].is-in .d-dot{animation:dotPulse 2.8s ease-in-out 1.2s infinite;}
@keyframes dotPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.4);opacity:.55;}}

.d-sway{transform-box:fill-box;transform-origin:center;}
[data-reveal].is-in .d-sway{animation:dSway 3.4s ease-in-out 1.2s infinite alternate;}
@keyframes dSway{from{transform:rotate(-9deg);}to{transform:rotate(9deg);}}

.d-bob{transform-box:fill-box;transform-origin:center;}
[data-reveal].is-in .d-bob{animation:dBob 2.2s ease-in-out 1.2s infinite;}
@keyframes dBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}

[data-reveal].is-in .d-blink{animation:dBlink 2.4s ease-in-out infinite;}
[data-reveal].is-in .d-blink--2{animation-delay:.8s;}
[data-reveal].is-in .d-blink--3{animation-delay:1.6s;}
@keyframes dBlink{0%,100%{opacity:.35;}30%{opacity:1;}}

.d-pulse{opacity:0;transform-box:fill-box;transform-origin:center;}
[data-reveal].is-in .d-pulse{animation:dPulse 3.2s var(--ease-out) 1.2s infinite;}
@keyframes dPulse{0%{transform:scale(.78);opacity:.55;}
  70%{transform:scale(1.22);opacity:0;}100%{transform:scale(1.22);opacity:0;}}

/* 迷你 icon 常駐動態 */
.cap-spin{transform-box:fill-box;transform-origin:center;animation:capSpin 14s linear infinite;}
.cap-spin--rev{animation-direction:reverse;animation-duration:10s;}
@keyframes capSpin{to{transform:rotate(360deg);}}
.cap-pulse{transform-box:fill-box;transform-origin:center;animation:dotPulse 2.4s ease-in-out infinite;}
.cap-ring{fill:none;stroke-linecap:round;stroke-dasharray:28 79;animation:capRing 3.6s linear infinite;}
@keyframes capRing{to{stroke-dashoffset:-107;}}
.cap-flow{fill:none;stroke-linecap:round;stroke-dasharray:2 7;animation:dFlow 2.2s linear infinite;}
.cap-orbit{transform-box:fill-box;transform-origin:center;}
[data-reveal].is-in .cap-orbit{animation:capOrbit 40s linear infinite;}
@keyframes capOrbit{to{transform:rotate(360deg);}}
.cap-node{transform-box:fill-box;transform-origin:center;}
[data-reveal].is-in .cap-node{animation:capOrbit 40s linear infinite reverse;}

@media (prefers-reduced-motion:reduce){
  .diag .d-draw{stroke-dashoffset:0;}
  .diag .d-fade{opacity:1;}
  .d-flow,.d-live{animation:none;opacity:.5;}
  .d-pulse{animation:none;opacity:0;}
  [data-reveal].is-in .d-dot,[data-reveal].is-in .d-sway,
  [data-reveal].is-in .d-bob,[data-reveal].is-in .d-blink{animation:none;}
  .cap-spin,.cap-spin--rev,.cap-pulse,.cap-ring,.cap-flow{animation:none;}
  [data-reveal].is-in .cap-orbit,[data-reveal].is-in .cap-node{animation:none;}
}

/* =============================================================
   影像框(定案三件套:角標 + 柔光掃面 + 偏移畫框)
   ============================================================= */
.tech-frame{position:relative;}
.tech-frame::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  border:1px solid color-mix(in srgb, var(--brand-sky) 22%, transparent);}
.tech-frame:hover::before{border-color:color-mix(in srgb, var(--brand-sky) 45%, transparent);}
.tech-frame .tf-sheen{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;}
.tech-frame .tf-sheen::before{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:34%;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.10) 42%,
    rgba(255,255,255,.20) 50%,color-mix(in srgb, var(--brand-sky) 10%, transparent) 62%,transparent 100%);
  transform:skewX(-16deg) translateX(-190%);
  animation:tfSheen 9s ease-in-out 1.5s infinite;}
@keyframes tfSheen{0%{transform:skewX(-16deg) translateX(-190%);}
  13%{transform:skewX(-16deg) translateX(460%);}100%{transform:skewX(-16deg) translateX(460%);}}
.tech-frame:hover .tf-sheen::before{animation-duration:2.8s;animation-delay:0s;}
.tech-frame .tf-corner{position:absolute;width:14px;height:14px;z-index:2;
  border:0 solid color-mix(in srgb, var(--brand-sky) 75%, transparent);
  pointer-events:none;opacity:.75;
  transition:width var(--dur-1) var(--ease-out),height var(--dur-1) var(--ease-out),
    opacity var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out);}
.tech-frame:hover .tf-corner{width:20px;height:20px;opacity:1;border-color:var(--sky-600);}
.tech-frame .tf-c1{top:-1px;left:-1px;border-top-width:1.5px;border-left-width:1.5px;}
.tech-frame .tf-c2{top:-1px;right:-1px;border-top-width:1.5px;border-right-width:1.5px;}
.tech-frame .tf-c3{bottom:-1px;left:-1px;border-bottom-width:1.5px;border-left-width:1.5px;}
.tech-frame .tf-c4{bottom:-1px;right:-1px;border-bottom-width:1.5px;border-right-width:1.5px;}
.tf-offset::after{content:"";position:absolute;top:14px;left:14px;right:-14px;bottom:-14px;
  z-index:-1;pointer-events:none;border:1px solid var(--navy-200);
  transition:transform .6s var(--ease-out);}
.tf-offset:hover::after{transform:translate(-7px,-7px);}
@media (max-width:689.98px){.tf-offset::after{top:10px;left:10px;right:-10px;bottom:-10px;}}
@media (prefers-reduced-motion:reduce){.tech-frame .tf-sheen::before{animation:none;}}

/* =============================================================
   全站統一 CTA 區(與首頁同源)
   ============================================================= */
.p-cta{text-align:left;position:relative;overflow:clip;
  border-top:1px solid var(--on-surface-hair);
  background:
    radial-gradient(60% 90% at 82% 50%,
      color-mix(in srgb, var(--brand-navy) 55%, transparent), transparent 75%),
    var(--surface-deep);}
.p-cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,
    color-mix(in srgb, var(--brand-sky) 22%, transparent) 50%,transparent 62%);
  background-size:260% 100%;animation:ctaSweep 7s ease-in-out infinite;}
@keyframes ctaSweep{0%{background-position:130% 0;}55%{background-position:-30% 0;}
  100%{background-position:-30% 0;}}
.p-cta__rings{position:absolute;top:50%;right:-160px;width:640px;height:640px;
  transform:translateY(-50%);pointer-events:none;}
.p-cta__orbit{transform-box:fill-box;transform-origin:center;animation:ctaOrbit 36s linear infinite;}
.p-cta__orbit--rev{animation-duration:52s;animation-direction:reverse;}
@keyframes ctaOrbit{to{transform:rotate(360deg);}}
.p-cta .container{position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(var(--grid-cols),1fr);
  column-gap:var(--gutter);align-items:center;}
.p-cta__copy{grid-column:1 / span 8;}
.p-cta__copy .h2{margin:0 0 var(--space-4);}
.p-cta__copy .lead{margin:0;}
.p-cta__act{grid-column:10 / span 3;justify-self:end;}
.btn--beacon{position:relative;font-size:var(--fs-body);padding:18px 44px;}
.btn--beacon::after{content:"";position:absolute;inset:-7px;
  border:1px solid color-mix(in srgb, var(--brand-sky) 65%, transparent);
  border-radius:6px;pointer-events:none;animation:btnHalo 2.4s var(--ease-out) infinite;}
@keyframes btnHalo{0%{opacity:.9;transform:scale(.96);}
  70%{opacity:0;transform:scale(1.12);}100%{opacity:0;transform:scale(1.12);}}
.p-cta .btn--beacon:hover{background:var(--sky-100);}
.p-cta__hint{margin:var(--space-4) 0 0;color:var(--on-surface-muted);}
@media (max-width:999.98px){
  .p-cta__rings{right:-260px;opacity:.6;}
  .p-cta__copy{grid-column:1 / -1;margin-bottom:var(--space-7);}
  .p-cta__act{grid-column:1 / -1;justify-self:start;}
}
@media (prefers-reduced-motion:reduce){
  .p-cta::before,.p-cta__orbit,.btn--beacon::after{animation:none;}
}