/* orbitron-regular - latin */
@import url(font-awesome_6.7.2.min.css);
@import url(style_font.min.css);
/* 基礎設定與重置 */
   * {
      box-sizing: border-box;
   }

   body {
      background: #000000;
      color: white;
      font-family: 'jf-openhuninn-2.1', sans-serif;
      margin: 0;
      /* 防止出現水平捲軸 */
      overflow-x: hidden;
   }
/* === Navigation === */
   nav {
      position: fixed;
      left: 50%;
      top: 20px;
      transform: translateX(-50%);
      width: 100%;
      max-width: 1200px;
      /* Logo 圖檔小於 50px 會很糊，所以需要調到 50px 連動選單列也要調整 +10px */
      height: 60px;
      background: #414043;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 25px;
      z-index: 99;
      padding: 0 10px;
   }
   .nav-logo {
      height: 50px;
      font-weight: bolder;
      font-family: 'jf-openhuninn-2.1', sans-serif;
      font-size: 21px;
      margin-left: 7px;
      text-decoration: none;
      outline: none;
      /* 確保超連結文字為白色 */
      color: white;
      /* === 新增 Flexbox 來完美垂直置中圖片與文字 === */
      display: flex;
      align-items: center;
      /* 控制圖片與文字之間的間距 */
      gap: 10px;
   }
   .nav-logo img {
      /* 限制 Logo 圖片最大高度，避免撐破導覽列 */
      max-height: 50px;
      width: auto;
   }
   .nav-ul {
      display: flex;
   }
   .nav-ul ul {
      margin: 0;
      padding: 0;
      margin-right: 5px;
      display: flex;
      list-style: none;
      gap: 20px;
      /* 新增相對定位，用來對齊底線動畫 */
      position: relative;
   }
   .nav-ul-li-default {
      line-height: 50px;
      cursor: pointer;
   }
   .nav-ul ul li a {
      text-decoration: none;
      color: #fff;
   }
   .nav-ul ul li {
      position: relative;
      user-select: none;
   }
   /* 動態紅色底線的樣式 */
   .nav-indicator {
      position: absolute !important;
      height: 2px;
      background: red;
      border-radius: 1px;
      pointer-events: none;
      /* 預設隱藏，待 JS 計算定位後顯示 */
      opacity: 0;
      z-index: 10;
      margin: 0;
      padding: 0;
      /* 將 transition 移除，改由 JS 動態控制開關，避免載入時亂飛 */
   }
   .nav-ul-li-last-item {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      margin-left: 30px;
      list-style: none;
      display: inline-block;
      width: 66px;
   }
/* === 圓形動畫鈕 === */
   .round {
      display: block;
      position: absolute;
      left: 0;
      top: -8px;
      width: 66px;
      height: 66px;
      /* padding-top: 16px; */
      text-decoration: none;
      text-align: center;
      font-size: 19px;
      line-height: 56px;
      text-shadow: 0 1px 0 rgba(255,255,255,.7);
      letter-spacing: -.065em;
      font-family: 'Orbitron', sans-serif;
      transition: all .25s ease-in-out;
      box-shadow: 2px 2px 7px rgba(0,0,0,.2);
      border-radius: 50%;
      z-index: 1;
      border-width: 4px;
      border-style: solid;
      background-color: rgba(239,57,50,1);
      color: rgba(133, 32, 28, 1);
      border-color: rgba(133,32,28,.2);
   }
   .round:hover {
      width: 76px;
      height: 76px;
      left: -5px;
      top: -13px;
      font-size: 23px;
      line-height: 66px;
      box-shadow: 5px 5px 10px rgba(0,0,0,.3);
      z-index: 2;
      border-size: 10px;
      transform: rotate(-360deg);
      color: rgba(255, 255, 255, 1);
   }
   .round span {
      display: block;
      opacity: 0;
      transition: all .5s ease-in-out;
      font-size: 1px;
      border: none;
      position: absolute;
      left: -4px;
      top: -4px;
      width: 66px;
      height: 66px;
      text-decoration: none;
      text-align: center;
      box-shadow: 2px 2px 7px rgba(0,0,0,.2);
      border-radius: 50%;
      z-index: 4;
      background-color: rgba(133,32,28,.7);
   }
   .round span:hover {
      width: 96px;
      height: 96px;
      opacity: .85;
      z-index: 0;
      left: -14px;
      top: -14px;
      text-shadow: 0 1px 1px rgba(0,0,0,.5);
   }
/* === 手機版選單鈕 === */
   .hamburger-menu {
      display: none;
      font-size: 24px;
      cursor: pointer;
      margin-right: 15px;
   }
/* === 分隔線 === */
   /* 右分線 */
   .section-line-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      color: white;
      font-weight: bold;
      position: relative;
      margin: 40px 20px;
      font-size: 20px;
   }
   .section-line-right::after {
      content: '';
      width: 150px;
      height: 2px;
      background: repeating-linear-gradient(to right, white, white 20px, transparent 20px, transparent 40px);
      margin: 0 0 0 20px;
   }
   /* 左分線 */
   .section-line-left {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      color: white;
      font-weight: bold;
      position: relative;
      margin: 40px 20px;
      font-size: 20px;
   }
   .section-line-left::before {
      content: '';
      width: 150px;
      height: 2px;
      background: repeating-linear-gradient(to right, white, white 20px, transparent 20px, transparent 40px);
      margin: 0 20px 0 0;
   }
   /* 中分線 */
   .section-line-center {
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      position: relative;
      margin: -30px 20px 0px 20px;
      font-size: 20px;
      
   }
   .section-line-center::before {
      content: '';
      width: 50vw;
      height: 2px;
      background: repeating-linear-gradient(to right, rgba(255,255,255,0.1), rgba(255,255,255,0.1) 20px, transparent 20px, transparent 40px);
      margin: 0 0 0 0;
   }
/* === Header (滿版背景與佔位容器設定) === */
   header {
      margin: 100px auto 0px auto;
      position: relative;
      min-height: 650px; /* 稍微加高以容納特效 */
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      /*overflow: hidden; 防止 canvas 溢出產生捲軸 */
      pointer-events: none;
   }
   .galaxy-bg-canvas {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       z-index: 0;
       outline: none;
       /* 允許捕捉滑鼠事件以旋轉銀河 */
       pointer-events: auto;
   }
   .hero-container {
      position: relative;
      width: 100%;
      max-width: 1200px;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 2;
      /* 讓容器本身的點擊穿透，這樣使用者可以點擊後方 Canvas */
      pointer-events: none; 
   }
   .header-content-box {
      width: 100%;
      max-width: 570px;
      /* 恢復內容區塊的滑鼠互動，讓按鈕可以被點擊 */
      pointer-events: auto; 
   }
   .hero-image-placeholder {
      width: 50%;
      height: 400px;
      /* 佔位區塊維持透明且滑鼠穿透，讓下方銀河清晰顯示並可操作 */
      pointer-events: none;
   }
   .header-company {
      font-family: "Orbitron", sans-serif;
      font-weight: bolder;
   }
   .header-company-intro {
      font-size: clamp(20px, 4vw, 30px);
   }
   .header-company-name {
      font-size: clamp(3rem, 10vw, 6.25rem); 
      line-height: 1.1;
      margin-bottom: 10px;
   }
   .header-description-txt {
      width: 100%;
      max-width: 350px;
      color: #949494;
   }
    .circle-button {
      position: absolute;
      top: 620px;
      left: 50%;
      transform: translateX(-50%);
      width: 200px;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      cursor: pointer;
      pointer-events: auto;
      z-index: 98;
      /* 新增淡入淡出效果 */
      transition: opacity 0.5s ease, visibility 0.5s ease;
    }
/* === 往下捲動鈕 === */
   .circle-button svg {
      position: absolute;
      fill: white;
      width: 100px;
      height: 100px;
      transform: rotate(-90deg);
      animation: turn 20s linear infinite;
   }
   .circle-button text {
      font-size: 13.5px;
      letter-spacing: 4px;
      fill: white;
   }
   .circle-button .icon {
      font-size: 25px;
      color: white;
      z-index: 1;
   }
/* === Section About (星空特效版) === */
   .about {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      /* 改為 0 左右 margin 以滿版顯示 */
      margin: 0px 0 50px 0;
      width: 100%;
      /* 增加上下 padding 讓背景有呼吸空間 */
      padding: 180px 20px;
      overflow: hidden;
      background: #000000;
   }
   .about-bg-canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      /* 讓點擊事件可以穿透給 section，以便觸發加速特效 */
      pointer-events: none;
   }
   .about-inner-container {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 100%;
      max-width: 1200px;
      gap: 40px;
      /* 位於 Canvas 上層 */
      z-index: 2;
   }
   .about-liquid-img {
      flex: 1;
      display: flex;
      justify-content: center;
   }
   .about-liquid-img img {
      width: 100%;
      max-width: 400px;
      height: auto;
      filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
         drop-shadow(0 0 40px rgba(149, 2, 255, 0.8))
         drop-shadow(0 0 80px rgba(149, 2, 255, 0.4));
   }
   .about-content {
      flex: 1;
      max-width: 600px;
   }
   .about-headline {
      text-align: right;
   }
   .about-headline span {
      font-size: clamp(4rem, 12vw, 12.5rem);
      text-transform: uppercase;
      font-family: Arial, sans-serif;
      color: transparent;
      -webkit-text-stroke: 2px #949494;
   }
   .about-head-txt {
      font-size: clamp(24px, 4vw, 24px);
      font-weight: 600;
   }
   .about-main-txt {
      font-size: 16px;
      font-weight: 300;
      margin-top: 15px;
      line-height: 1.6;
   }
/* === Section Services === */
   .services {
      position: relative;
      height: auto;
      margin: 0 auto;
      max-width: 100%;
      padding: 50px 0;
   }
   .services::before {
      position: absolute;
      content: "";
      height: 100%;
      width: 100%;
      top: -130px;
      left: 0;
      background-image: radial-gradient(rgb(89,2,130, 0.5), rgb(0,0,0, 0), rgb(0,0,0, 0));
      z-index: 1;
      pointer-events: none;
   }
   .services-content-container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
      padding: 0 20px;
   }
   .services-headline-cols {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      gap: 20px;
   }
   .services-headline-col-left {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      height: auto;
   }
   .services-headline-col-left1, .services-headline-col-left2 {
      font-size: clamp(24px, 4vw, 24px);
      line-height: 1.2;
   }
   .services-headline-col-left1 {
      color: #949494;
      margin-bottom: 5px;
   }
   .services-headline {
      display: flex;
      align-items: flex-start;
   }
   .services-headline span {
      font-size: clamp(3rem, 10vw, 8.4rem);
      text-transform: uppercase;
      font-family: Arial, sans-serif;
      color: transparent;
      -webkit-text-stroke: 2px #949494;
      line-height: 1;
      transform: translateY(-15px);
   }
   .services-card-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 30px;
      margin-top: 50px;
   }
   .services-card-item {
      height: 350px;
      background: rgb(255, 255, 255, 0.1);
      border: solid 2px #413245;
      border-radius: 10px;
      padding: 15px 20px;
      position: relative;
      display: flex;
      flex-direction: column;
   }
   .services-card-icon { font-size: 50px; }
   .services-card-headline { margin: 15px 0; font-size: 18px; font-weight: bold; }
   .services-card-txt { color: #949494; font-size: 16px; line-height: 1.5; }
   .service-entry-container {
      grid-template-columns: repeat(6, minmax(0, 1fr));
   }
   .service-entry-card {
      grid-column: span 2;
      min-height: 460px;
      height: auto;
      color: #ffffff;
      text-decoration: none;
      overflow: hidden;
      padding: 0;
      transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
   }
   .service-entry-card:nth-child(4) {
      grid-column: 2 / span 2;
   }
   .service-entry-card:nth-child(5) {
      grid-column: 4 / span 2;
   }
   .service-entry-card:hover {
      transform: translateY(-8px);
      border-color: rgba(0, 168, 222, 0.65);
      background: rgba(255, 255, 255, 0.14);
      box-shadow: 0 22px 60px rgba(0, 168, 222, 0.12);
   }
   .service-entry-media {
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background: #15151f;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
   }
   .service-entry-media img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      transition: transform 0.45s ease;
   }
   .service-entry-card:hover .service-entry-media img {
      transform: scale(1.04);
   }
   .service-entry-body {
      display: flex;
      flex: 1;
      flex-direction: column;
      padding: 18px 20px 20px;
   }
   .service-entry-link {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: auto;
      padding-top: 20px;
      color: #00A8DE;
      font-size: 14px;
      font-weight: 700;
   }
   .service-entry-link i {
      font-size: 13px;
      transition: transform 0.25s ease;
   }
   .service-entry-card:hover .service-entry-link i {
      transform: translateX(4px);
   }
/* === Section 案件流程 時間軸 === */
   .consulting-process {
      padding: 50px 20px;
      margin: 0 auto;
      width: 100%;
      max-width: 1200px;
      position: relative;
      z-index: 5;
   }
   .headline-small {
      text-transform: uppercase;
      font-weight: 600;
      margin-bottom: 15px;
   }
   .headline-big {
      font-weight: 600;
      font-size: clamp(24px, 5vw, 28px);
      margin-bottom: 50px;
   }
   /* === 新版 Timeline 樣式 === */
   .timeline {
      position: relative;
      max-width: 48rem;
      margin: 0 auto;
   }
   .timeline-line {
      position: absolute;
      left: 1.5rem;
      top: 0;
      bottom: 0;
      width: 1px;
      background: linear-gradient(to bottom, rgba(139, 160, 176, 0.3), rgba(53, 53, 120, 0.4), rgba(139, 160, 176, 0.1));
   }
   .timeline-item {
      position: relative;
      display: flex;
      align-items: flex-start;
      margin-bottom: 3rem;
      /* 動畫預設隱藏與位移 */
      opacity: 0;
      transform: translateY(2rem);
      transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
   }
   .timeline-item:last-child {
      margin-bottom: 0;
   }
   .in-view .timeline-item {
      opacity: 1;
      transform: translateY(0);
   }
   .in-view .timeline-item:nth-child(1) { transition-delay: 250ms; }
   .in-view .timeline-item:nth-child(2) { transition-delay: 400ms; }
   .in-view .timeline-item:nth-child(3) { transition-delay: 550ms; }
   .in-view .timeline-item:nth-child(4) { transition-delay: 700ms; }
   .in-view .timeline-item:nth-child(5) { transition-delay: 850ms; }
   .in-view .timeline-item:nth-child(6) { transition-delay: 1000ms; }
   .glass-card {
      background: rgba(53, 53, 120, 0.15);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(139, 160, 176, 0.15);
      border-radius: 1rem;
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
   .glass-card:hover {
      background: rgba(53, 53, 120, 0.25);
      border-color: rgba(139, 160, 176, 0.3);
      transform: translateY(-4px);
      box-shadow: 0 20px 60px rgba(53, 53, 120, 0.2);
   }
   .desktop-layout {
      display: none;
      width: 100%;
      align-items: flex-start;
   }
   .timeline-item:nth-child(even) .desktop-layout {
      flex-direction: row-reverse;
   }
   .dt-content-side {
      width: calc(50% - 2rem);
   }
   .timeline-item:nth-child(odd) .dt-content-side {
      text-align: right;
   }
   .timeline-item:nth-child(even) .dt-content-side {
      text-align: left;
   }
   .dt-card {
      display: inline-block;
      padding: 1.5rem;
      max-width: 28rem;
   }
   .timeline-item:nth-child(odd) .dt-card {
      margin-left: auto;
   }
   .timeline-item:nth-child(even) .dt-card {
      margin-right: auto;
   }
   .dt-badge-row {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 0.75rem;
   }
   .timeline-item:nth-child(odd) .dt-badge-row {
      justify-content: flex-end;
   }
   .timeline-item:nth-child(even) .dt-badge-row {
      justify-content: flex-start;
   }
   .step-badge {
      font-family: 'Sora', sans-serif;
      font-size: 0.875rem;
      font-weight: 500;
      color: #FFFFFF;
      background: rgba(255, 255, 255, 0.3);
      padding: 0.125rem 0.625rem;
      border-radius: 9999px;
      display: inline-block;
   }
   .step-title {
      font-family: 'Sora', sans-serif;
      font-weight: 600;
      color: #F0F2F5;
      font-size: 1.125rem;
      margin-bottom: 0.5rem;
   }
   .step-desc {
      color: #8BA0B0;
      font-size: 0.875rem;
      line-height: 1.625;
   }
   .dt-node {
      flex-shrink: 0;
      width: 4rem;
      display: flex;
      justify-content: center;
      position: relative;
      z-index: 10;
   }
   .node-circle {
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      background: #000000;
      border: 2px solid rgba(139, 160, 176, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.3s ease;
   }
   .node-circle:hover {
      border-color: rgba(139, 160, 176, 0.6);
   }
   .node-circle svg, .node-circle i {
      width: 1.25rem;
      height: 1.25rem;
      font-size: 1.25rem;
      color: #8BA0B0;
      stroke: #8BA0B0;
      fill: none;
      stroke-width: 1.5;
   }
   .dt-number-side {
      width: calc(50% - 2rem);
      display: flex;
      align-items: center;
      height: 3rem;
   }
   .timeline-item:nth-child(odd) .dt-number-side {
      justify-content: flex-start;
      padding-left: 0.5rem;
   }
   .timeline-item:nth-child(even) .dt-number-side {
      justify-content: flex-end;
      padding-right: 0.5rem;
   }
   .step-number {
      font-family: 'Sora', sans-serif;
      font-size: 3rem;
      font-weight: 700;
      color: rgba(53, 53, 120, 0.25);
   }
   .mobile-layout {
      display: flex;
      align-items: flex-start;
      width: 100%;
   }
   .mb-node {
      flex-shrink: 0;
      width: 3rem;
      display: flex;
      justify-content: center;
      position: relative;
      z-index: 10;
   }
   .mb-node-circle {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      background: #000000;
      border: 2px solid rgba(139, 160, 176, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .mb-node-circle svg, .mb-node-circle i {
      width: 1rem;
      height: 1rem;
      font-size: 1rem;
      color: #8BA0B0;
      stroke: #8BA0B0;
      fill: none;
      stroke-width: 1.5;
   }
   .mb-content {
      flex: 1;
      margin-left: 1rem;
      min-width: 0;
   }
   .mb-card {
      padding: 1.25rem;
   }
   .mb-badge-row {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 0.5rem;
   }
   .mb-step-number {
      font-family: 'Sora', sans-serif;
      font-weight: 700;
      color: rgba(53, 53, 120, 0.4);
      font-size: 1.25rem;
   }
   .mb-step-title {
      font-family: 'Sora', sans-serif;
      font-weight: 600;
      color: #F0F2F5;
      font-size: 1rem;
      margin-bottom: 0.5rem;
   }
/* === Section Cases 實績介紹  === */
   .section-cases {
      width: 100%;
      margin: 0 auto;
   }
   .section-strategies {
      position: relative;
      /* 防止 SVG 波浪溢出 */
      overflow: hidden;
      filter: drop-shadow(0 0px 40px rgb(160, 0, 210, 0.5));
      text-align: center;
      padding: 150px 0;
   }
   .section-strategies span {
      position: relative;
      top: -25px;
      /* 確保文字浮在波浪之上 */
      z-index: 1;
      font-size: clamp(3rem, 8vw, 7.5rem);
      font-weight: 600;
   }
   /* === Wave SVG 背景動畫樣式 === */
   #waves-wrap {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 322px;
       z-index: 0;
       pointer-events: none;
   }
   .waves {
       width: 100%;
       height: 100%;
   }
   .waves path {
       animation: wave-flow 17390ms ease-in-out infinite alternate-reverse both;
       animation-timing-function: cubic-bezier(.25, 0, .75, 1);
       will-change: transform;
   }
   .waves > path:nth-of-type(1) { animation-duration: 20580ms; }
   .waves > path:nth-of-type(2) { animation-delay: -2690ms; animation-duration: 13580ms; }
   .waves g > path:nth-of-type(1) { animation-delay: -820ms; animation-duration: 10730ms; }
   .waves > path:nth-of-type(1), .waves g > path:nth-of-type(2) { animation-direction: alternate; }
   .cases-container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      padding-bottom: 100px;
   }
   .cases-list {
      display: grid;
      /* 改為 1 列 3 欄 */
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      width: 100%;
      margin: 25px auto;
   }
   .cases-list-item {
      background: rgb(255, 255, 255, 0.1);
      border: solid 2px #413245;
      border-radius: 15px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
   }
   .cases-list-item:hover {
      transform: translateY(-10px);
      border-color: #A000D2;
      box-shadow: 0 10px 30px rgba(160, 0, 210, 0.3);
   }
   .cases-card-img-placeholder {
      width: 100%;
      height: 200px;
      background: #1a1a24;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #949494;
      font-size: 14px;
      text-align: center;
      /* 移除 padding 確保圖片滿版 */
      border-bottom: 2px solid #413245;
      /* 確保圖片放大時不會超出圓角邊框 */
      overflow: hidden;
   }
   /* === 圖片滿版顯示與 Hover 放大特效 === */
   .cases-card-img-placeholder img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
   }
   .cases-list-item:hover .cases-card-img-placeholder img {
      /* 滑鼠懸浮時圖片放大 1.1 倍 */
      transform: scale(1.1);
   }
   .cases-card-content {
      padding: 20px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
   }
   .cases-card-headline {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
      color: #fff;
   }
   .cases-card-txt {
      color: #949494;
      font-size: 14px;
      line-height: 1.6;
   }
   .cases-card-tag {
      margin-top: 15px;
      font-size: 12px;
      color: #E91388;
      font-weight: 600;
   }
/* === Section Contact 聯絡表單區塊 === */
   .contact-section {
      position: relative;
      min-height: 100vh;
      filter: drop-shadow(0 0 140px rgba(82, 1, 192, 0.9));
      display: flex;
      align-items: center;
      overflow: hidden;
   }
   /* === 新增地球特效容器 === */
   #earth-container {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%; 
      height: 100%;
      z-index: 1;
      /* 允許點擊穿透 */
      pointer-events: none;
   }
   .contact-section-content-container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      position: relative;
      z-index: 5;
      display: flex;
      justify-content: flex-end;
      padding: 50px 20px;
   }
   .contact-section-content {
      width: 100%;
      max-width: 470px;
      /* 在小螢幕時增加可讀性 */
      background: rgba(0,0,0,0.5);
      padding: 30px;
      border-radius: 20px;
      backdrop-filter: blur(5px);
   }
   .contact-section-description {
      width: 100%;
      font-size: clamp(24px, 4vw, 24px);
      line-height: 1.3;
      margin-bottom: 20px;
   }
   .contact-section-content form input,
   .contact-section-content form select,
   .contact-section-content form textarea {
      width: 100%;
      background: rgb(255, 255, 255, 0.1);
      border: solid 2px #413245;
      border-radius: 25px;
      padding: 15px;
      color: #fff;
      font-size: 16px;
      margin-bottom: 15px;
      outline: none;
   }
   .contact-section-content form input {
      height: 50px;
   }
   .contact-section-content form select {
      height: 54px;
      appearance: none;
      color: #ffffff;
   }
   .contact-section-content form select option {
      color: #17212b;
      background: #ffffff;
   }
   .contact-section-content form textarea {
      height: 150px;
      resize: vertical;
   }
/* === Site Footer 頁尾樣式 === */
   .site-footer {
      background: #000000;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding: 60px 20px 20px;
      position: relative;
      z-index: 5;
   }
   .footer-container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
   }
   .footer-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 40px;
      margin-bottom: 50px;
   }
   .footer-col .footer-logo {
      font-family: "Orbitron", sans-serif;
      font-size: 24px;
      font-weight: bolder;
      margin-bottom: 20px;
      cursor: default;
   }
   .footer-col .footer-desc {
      color: #949494;
      font-size: 14px;
      line-height: 1.8;
   }
   .footer-col h4 {
      color: #fff;
      font-size: 18px;
      margin-bottom: 25px;
      text-transform: uppercase;
      font-weight: 600;
      letter-spacing: 1px;
   }
   .footer-col ul {
      list-style: none;
      padding: 0;
      margin: 0;
   }
   .footer-col ul li {
      margin-bottom: 15px;
   }
   .footer-col ul li a, .footer-col p {
      color: #949494;
      text-decoration: none;
      font-size: 15px;
      transition: color 0.3s ease;
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0;
   }
   .footer-col p {
      margin-bottom: 15px;
   }
   .footer-col ul li a:hover {
      color: #fff;
   }
   .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 25px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
   }
   .copyright {
      color: #949494;
      font-size: 14px;
   }
   .social-icons {
      display: flex;
      gap: 15px;
   }
   .social-icons a {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      text-decoration: none;
      transition: background 0.3s ease, transform 0.3s ease;
   }
   .social-icons a:hover {
      background: #494949;
      transform: translateY(-5px);
   }
/* === Info Popup window === */
   .popup-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 9999;
   }
   .popup-box {
      background: rgba(0, 0, 0, 0.5);
      padding: 40px 20px;
      width: 90%;
      max-width: 400px;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
      color: #fff;
      backdrop-filter: blur(10px);
   }
   .popup-box button {
      margin-top: 15px;
      padding: 10px 30px;
      background: #007BFF;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
   }
/* === 按鈕樣式 === */
   .btn-container {
      /* 強制轉為區塊，解決 a 標籤預設 inline 導致寬高失效的問題 */
      display: block;
      /* 去除 a 標籤的預設底線 */
      text-decoration: none;
      position: relative;
      margin-top: 20px;
      width: 180px;
      height: 50px;
      background: #808080;
      border-radius: 25px;
      user-select: none;
      cursor: pointer;
      clip-path: polygon(0 0, 90px 0, 110px 10px, 130px 10px, 150px 0, 180px 0, 180px 50px, 150px 50px, 130px 40px, 110px 40px, 90px 50px, 0 50px);
      transition: clip-path 0.6s ease-in-out, background 0.3s ease;
   }
   .btn-container:hover { clip-path: polygon(0 0, 180px 0, 180px 50px, 0 50px); }
   .btn-txt {
      position: absolute;
      font-size: 18px;
      width: 100px;
      text-align: center;
      height: 40px;
      line-height: 40px;
      border-radius: 20px;
      top: 5px;
      left: 5px;
      text-transform: uppercase;
      color: white;
      z-index: 2;
   }
   .btn-icon {
      position: absolute;
      height: 40px;
      width: 40px;
      right: 5px;
      top: 5px;
      background: #fff;
      text-align: center;
      line-height: 40px;
      border-radius: 20px;
      z-index: 2;
      color: #000;
      transition: background 0.5s ease, color 0.5s ease;
   }
   .btn-hover-background {
      position: absolute;
      width: 100px;
      background: linear-gradient(90deg, #494949, #6D6D70, #494949);
      height: 40px;
      line-height: 40px;
      border-radius: 20px;
      top: 5px;
      left: 5px;
      z-index: 1;
      transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), background 0.6s ease;
   }
   .btn-container:hover .btn-hover-background { width: 170px; }
   .btn-container:hover .btn-icon { background: transparent; color: #fff; }
/* === Media Queries (RWD 響應式調整) === */
   /* 手機版設定：避免導覽列黏在螢幕邊緣 */
   @media (max-width: 1240px) {
      nav {
         width: calc(100% - 40px);
      }
   }
   @media (max-width: 992px) {
      /* 導覽列：啟動漢堡選單 */
      .hamburger-menu { display: block; }
      .nav-ul {
         /* 預設隱藏，靠 js 切換 class 顯示 */
         display: none; 
         position: absolute;
         top: 60px;
         left: 0;
         width: 100%;
         background: #414043;
         border-radius: 15px;
         flex-direction: column;
         padding: 20px 0;
      }
      .nav-ul.show { display: flex; }
      .nav-ul ul {
         flex-direction: column;
         align-items: center;
         gap: 15px;
      }
      .nav-ul-li-last-item { margin-top: 15px; margin-left: 0px;}      
      /* Header */
      header {
         padding-top: 120px;
      }
      .hero-container {
         flex-direction: column;
         justify-content: center;
         text-align: center;
      }
      .hero-image-placeholder {
          /* 小螢幕隱藏佔位，讓銀河置中當背景 */
          display: none;
      }
      .header-content-box { text-align: center; }
      .header-description-txt { margin: 0 auto; }
      .circle-button {
         /* 小螢幕隱藏向下滾動圓圈 */
         display: none;
      }
      /* About */
      .about-inner-container {
         flex-direction: column-reverse;
         text-align: center;
         gap: 20px;
      }
      .about-headline { text-align: center; }
      /* Services */
      .services-headline-cols { flex-direction: column; align-items: center; }
      .service-entry-container {
         grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .service-entry-card,
      .service-entry-card:nth-child(4),
      .service-entry-card:nth-child(5) {
         grid-column: auto;
      }
      /* Contact */
      .contact-section-content-container {
         justify-content: center;
      }
      /* button */
      .btn-container {
         margin: 20px auto;
      }
      /* 表單 */
      .contact-section-content {
         /* 在行動版蓋在地球上時，透明背景 */
         background: rgba(0, 0, 0, 0);
      }
   }
   @media (min-width: 992px) {
      /* Timeline */
      .timeline-line {
        left: 50%;
        transform: translateX(-0.5px);
      }
      .desktop-layout {
        display: flex;
      }
      .mobile-layout {
        display: none;
      }
   }
   @media (max-width: 768px) {
      .footer-bottom {
         flex-direction: column;
         text-align: center;
         justify-content: center;
      }
      .social-icons {
         justify-content: center;
         width: 100%;
         margin-top: 10px;
      }
      /* 平板尺寸降為 2 欄 */
      .cases-list { grid-template-columns: repeat(2, 1fr); }
   }
   @media (max-width: 576px) {
      /* 手機尺寸降為 1 欄 */
      .cases-list { grid-template-columns: repeat(1, 1fr); }
      .service-entry-container {
         grid-template-columns: repeat(1, minmax(0, 1fr));
      }
   }
/* === 動畫 === */
   @keyframes turn {
      0% { transform: rotate(-90deg); }
      100% { transform: rotate(270deg); }
   }
   @keyframes wave-flow {
      0% { transform: translateX(-750px); }
      100% { transform: translateX(-20px); }
   }