/* ==========================================================================`r`n   威信資訊工程有限公司 (PrestigeTech) - 官方網站樣式表
   Atomic Object (atomicobject.com) 完整視覺版面、排版、卡片與 UI/UX 系統改版
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Merriweather:ital,wght@1,300;1,400;1,700&display=swap');

:root {
  /* Atomic Object 精調色彩系統 (Color Tokens) */
  --ao-red: #0667AC;
  /* 品牌中藍 Accent */
  --ao-red-hover: #063779;
  /* 品牌深藍 Hover */
  --ao-navy: #063779;
  /* 品牌深藍 Primary */
  --ao-dark: #042A5C;
  /* 深色區塊延伸色 */
  --ao-paper: #F3F9FC;
  /* 高質感統一畫布背景色 (Seamless Canvas) */
  --ao-card-bg: #FFFFFF;
  /* 純白懸浮卡片背景 */
  --ao-border: rgba(6, 55, 121, 0.09);
  /* 超輕微極簡切割線 */
  --ao-text-primary: #111827;
  /* 沉穩黑色標題與主字 */
  --ao-text-secondary: #4B5563;
  /* 質感灰色內文 */
  --ao-cyan: #51B0D1;
  /* 品牌淺藍 Accent */

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 9999px;

  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 10px 30px rgba(6, 55, 121, 0.08);
  --shadow-hover: 0 20px 45px rgba(6, 55, 121, 0.16);
  --shadow-red: 0 8px 25px rgba(6, 103, 172, 0.3);

  --transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: 'Merriweather', Georgia, serif;
}

/* ==========================================================================
   企業客製化 App / DB / AI 開發內頁
   ========================================================================== */
.custom-dev-page {
  --custom-ink: #061d3b;
  --custom-blue: #0878bd;
  --custom-cyan: #59c5df;
  --custom-mint: #52d3b1;
}

.custom-dev-page h1,
.custom-dev-page h2,
.custom-dev-page h3 {
  text-wrap: balance;
  word-break: keep-all;
}

.custom-dev-hero {
  position: relative;
  overflow: hidden;
  min-height: 460px;
  padding: 104px 0 66px;
  background:
    radial-gradient(circle at 82% 32%, rgba(81, 176, 209, .22), transparent 28%),
    linear-gradient(128deg, #031c3e 0%, #063779 56%, #075f9c 100%);
}

.custom-dev-hero::before,
.custom-dev-hero::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.custom-dev-hero::before {
  top: 54px;
  right: 5%;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(255, 255, 255, .025), 0 0 0 96px rgba(255, 255, 255, .02);
}

.custom-dev-hero::after {
  right: 11%;
  bottom: 72px;
  width: 150px;
  height: 150px;
  border-right: 2px solid rgba(89, 197, 223, .5);
  border-bottom: 2px solid rgba(89, 197, 223, .5);
}

.custom-dev-hero .container {
  position: relative;
  z-index: 2;
}

.custom-dev-hero .page-hero-title {
  max-width: 900px;
  margin-top: 16px;
  font-size: clamp(2.45rem, 5vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: -.04em;
}

.custom-dev-hero .page-hero-subtitle {
  max-width: 820px;
  margin-top: 22px;
  color: rgba(255, 255, 255, .86);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.8;
  text-wrap: pretty;
}

.custom-dev-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 22px;
}

.custom-dev-hero-pills span {
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .03em;
  backdrop-filter: blur(8px);
}

.custom-dev-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(480px, 1.08fr);
  gap: clamp(44px, 7vw, 92px);
  align-items: center;
}

.custom-dev-kicker {
  margin-bottom: 14px;
  color: var(--custom-blue);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .16em;
}

.custom-dev-copy h2,
.custom-dev-scenario-lead h2,
.custom-dev-commitment h2 {
  margin-bottom: 22px;
  color: var(--ao-navy);
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  line-height: 1.18;
  letter-spacing: -.035em;
}

.custom-dev-copy > p,
.custom-dev-scenario-lead > p,
.custom-dev-commitment-grid > div:first-child > p {
  margin-bottom: 16px;
  color: var(--ao-text-secondary);
  font-size: 1.02rem;
  line-height: 1.9;
  text-wrap: pretty;
}

.custom-dev-proof-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 30px;
}

.custom-dev-proof-row div {
  min-width: 0;
  padding: 15px 12px;
  border-top: 2px solid rgba(6, 103, 172, .2);
}

.custom-dev-proof-row strong,
.custom-dev-proof-row span {
  display: block;
}

.custom-dev-proof-row strong {
  color: var(--custom-blue);
  font-size: .78rem;
  letter-spacing: .12em;
}

.custom-dev-proof-row span {
  margin-top: 5px;
  color: var(--ao-navy);
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.45;
  text-wrap: balance;
}

.custom-dev-blueprint {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(6, 103, 172, .14);
  border-radius: 28px;
  background:
    linear-gradient(rgba(6, 103, 172, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 103, 172, .04) 1px, transparent 1px),
    linear-gradient(145deg, #fff 0%, #eef9fd 100%);
  background-size: 26px 26px, 26px 26px, auto;
  box-shadow: 0 30px 70px rgba(6, 55, 121, .12);
}

.custom-dev-blueprint::after {
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: rgba(81, 176, 209, .13);
  content: "";
  filter: blur(5px);
}

.custom-dev-blueprint-head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(6, 55, 121, .1);
  color: var(--ao-navy);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.custom-dev-status {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #16846b;
}

.custom-dev-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--custom-mint);
  box-shadow: 0 0 0 4px rgba(82, 211, 177, .18);
}

.custom-dev-inputs,
.custom-dev-output-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}

.custom-dev-inputs {
  margin-top: 22px;
}

.custom-dev-inputs span {
  padding: 10px 7px;
  border: 1px solid rgba(6, 103, 172, .13);
  border-radius: 10px;
  background: rgba(255, 255, 255, .82);
  color: var(--ao-text-secondary);
  font-size: .7rem;
  font-weight: 750;
  text-align: center;
  text-wrap: balance;
}

.custom-dev-flow-line {
  position: relative;
  width: 2px;
  height: 34px;
  margin: 0 auto;
  background: linear-gradient(var(--custom-cyan), var(--custom-blue));
}

.custom-dev-flow-line::after {
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--custom-blue);
  border-bottom: 2px solid var(--custom-blue);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.custom-dev-core {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(100%, 390px);
  margin: 0 auto;
  padding: 21px;
  align-items: center;
  gap: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, #063779, #0878bd);
  box-shadow: 0 18px 35px rgba(6, 55, 121, .22);
  color: #fff;
}

.custom-dev-core-mark {
  display: grid;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 16px;
  background: rgba(255, 255, 255, .1);
  font-size: 1.45rem;
  font-weight: 900;
}

.custom-dev-core small,
.custom-dev-core strong,
.custom-dev-core span {
  display: block;
}

.custom-dev-core small {
  margin-bottom: 4px;
  color: #aeeaff;
  font-size: .59rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.custom-dev-core strong {
  font-size: 1.12rem;
}

.custom-dev-core span {
  margin-top: 2px;
  color: rgba(255, 255, 255, .72);
  font-size: .71rem;
}

.custom-dev-output-grid {
  margin-top: 34px;
}

.custom-dev-output-grid::before {
  position: absolute;
  top: -34px;
  left: 50%;
  width: 76%;
  height: 30px;
  border-top: 1px solid rgba(6, 103, 172, .35);
  border-right: 1px solid rgba(6, 103, 172, .35);
  border-left: 1px solid rgba(6, 103, 172, .35);
  border-radius: 10px 10px 0 0;
  content: "";
  transform: translateX(-50%);
}

.custom-dev-output-grid div {
  position: relative;
  padding: 13px 8px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(6, 55, 121, .08);
  text-align: center;
}

.custom-dev-output-grid b,
.custom-dev-output-grid span {
  display: block;
}

.custom-dev-output-grid b {
  color: var(--custom-blue);
  font-size: .78rem;
  letter-spacing: .06em;
}

.custom-dev-output-grid span {
  margin-top: 3px;
  color: var(--ao-text-secondary);
  font-size: .68rem;
  font-weight: 700;
  text-wrap: balance;
}

.custom-dev-section-head {
  max-width: 850px;
  margin-right: auto;
  margin-bottom: 44px;
  margin-left: auto;
}

.custom-dev-section-head .section-title {
  margin-bottom: 14px;
  font-size: clamp(2rem, 3.5vw, 3rem);
  letter-spacing: -.035em;
}

.custom-dev-section-head .section-desc {
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.8;
  text-wrap: pretty;
}

.custom-dev-capability-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.custom-dev-capability-card {
  position: relative;
  min-height: 245px;
  overflow: hidden;
  padding: 28px 24px;
  border: 1px solid rgba(6, 55, 121, .08);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(6, 55, 121, .06);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.custom-dev-capability-card::after {
  position: absolute;
  right: -34px;
  bottom: -34px;
  width: 90px;
  height: 90px;
  border: 1px solid rgba(6, 103, 172, .1);
  border-radius: 50%;
  content: "";
}

.custom-dev-capability-card:hover {
  border-color: rgba(6, 103, 172, .28);
  box-shadow: 0 24px 48px rgba(6, 55, 121, .12);
  transform: translateY(-6px);
}

.custom-dev-capability-card-ai {
  background: linear-gradient(145deg, #062f67 0%, #075e9b 100%);
}

.custom-dev-code {
  display: inline-grid;
  min-width: 48px;
  height: 38px;
  padding: 0 10px;
  place-items: center;
  border-radius: 10px;
  background: #e9f7fc;
  color: var(--custom-blue);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
}

.custom-dev-capability-card h3 {
  margin: 22px 0 12px;
  color: var(--ao-navy);
  font-size: 1.06rem;
  line-height: 1.45;
}

.custom-dev-capability-card p {
  color: var(--ao-text-secondary);
  font-size: .9rem;
  line-height: 1.78;
  text-wrap: pretty;
}

.custom-dev-capability-card-ai .custom-dev-code {
  background: rgba(255, 255, 255, .13);
  color: #aeeaff;
}

.custom-dev-capability-card-ai h3,
.custom-dev-capability-card-ai p {
  color: #fff;
}

.custom-dev-capability-card-ai p {
  color: rgba(255, 255, 255, .75);
}

.custom-dev-scenario-layout {
  display: grid;
  grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr);
  gap: clamp(40px, 7vw, 90px);
  align-items: start;
}

.custom-dev-scenario-lead {
  position: sticky;
  top: 120px;
}

.custom-dev-scenario-lead .btn-primary {
  margin-top: 18px;
}

.custom-dev-scenario-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid rgba(6, 55, 121, .12);
}

.custom-dev-scenario-grid article {
  min-height: 190px;
  padding: 28px;
  border-right: 1px solid rgba(6, 55, 121, .12);
  border-bottom: 1px solid rgba(6, 55, 121, .12);
  transition: background .25s ease;
}

.custom-dev-scenario-grid article:nth-child(even) {
  border-right: 0;
}

.custom-dev-scenario-grid article:hover {
  background: #f3faff;
}

.custom-dev-scenario-grid article > span {
  color: var(--custom-blue);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.custom-dev-scenario-grid h3 {
  margin: 16px 0 9px;
  color: var(--ao-navy);
  font-size: 1.08rem;
}

.custom-dev-scenario-grid p {
  color: var(--ao-text-secondary);
  font-size: .9rem;
  line-height: 1.72;
  text-wrap: pretty;
}

.custom-dev-architecture {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 22%, rgba(255, 190, 120, .32), transparent 28%),
    radial-gradient(circle at 92% 16%, rgba(147, 226, 211, .4), transparent 27%),
    radial-gradient(circle at 72% 88%, rgba(190, 177, 255, .32), transparent 31%),
    linear-gradient(135deg, #fff8ee 0%, #effaff 48%, #f7f3ff 100%);
}

.custom-dev-section-head-light .custom-dev-kicker {
  color: #087da5;
}

.custom-dev-section-head-light .section-title {
  color: var(--ao-navy);
}

.custom-dev-section-head-light .section-desc {
  color: #5b6d7d;
}

.custom-dev-stack {
  display: grid;
  gap: 10px;
  max-width: 1100px;
  margin: 0 auto;
}

.custom-dev-stack-row {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(6, 103, 172, .13);
  border-radius: 16px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 12px 30px rgba(34, 88, 130, .07);
  backdrop-filter: blur(8px);
}

.custom-dev-stack-row-ai {
  border-color: rgba(24, 171, 154, .34);
  background: linear-gradient(90deg, rgba(215, 248, 238, .92), rgba(226, 239, 255, .9), rgba(244, 232, 255, .88));
}

.custom-dev-stack-label {
  display: flex;
  padding: 9px 12px;
  align-items: center;
  gap: 12px;
  color: var(--ao-navy);
  font-size: .9rem;
  font-weight: 800;
}

.custom-dev-stack-label span {
  color: #0782a9;
  font-size: .7rem;
  letter-spacing: .1em;
}

.custom-dev-stack-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.custom-dev-stack-items span {
  display: grid;
  min-height: 46px;
  padding: 8px 10px;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(6, 103, 172, .08);
  background: #edf7ff;
  color: #244f76;
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
}

.custom-dev-stack-items span:nth-child(2) {
  background: #edfaf3;
}

.custom-dev-stack-items span:nth-child(3) {
  background: #fff4e8;
}

.custom-dev-stack-items span:nth-child(4) {
  background: #f4edff;
}

.custom-dev-architecture-note {
  display: flex;
  max-width: 1100px;
  margin: 20px auto 0;
  padding: 18px 20px;
  align-items: center;
  gap: 24px;
  border: 1px solid rgba(6, 103, 172, .1);
  border-left: 4px solid #f19a62;
  border-radius: 12px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 12px 30px rgba(34, 88, 130, .06);
}

.custom-dev-architecture-note span {
  flex: 0 0 auto;
  color: #087da5;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.custom-dev-architecture-note p {
  margin: 0;
  color: #536678;
  font-size: .88rem;
}

.custom-dev-process-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  list-style: none;
}

.custom-dev-process-list li {
  display: flex;
  min-height: 190px;
  padding: 26px;
  align-items: flex-start;
  gap: 18px;
  border: 1px solid rgba(6, 55, 121, .08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(6, 55, 121, .05);
}

.custom-dev-process-list li > span {
  flex: 0 0 auto;
  color: #9ccfe2;
  font-size: 1.65rem;
  font-weight: 900;
  line-height: 1;
}

.custom-dev-process-list small {
  color: var(--custom-blue);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.custom-dev-process-list h3 {
  margin: 6px 0 9px;
  color: var(--ao-navy);
  font-size: 1.06rem;
}

.custom-dev-process-list p {
  color: var(--ao-text-secondary);
  font-size: .88rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.custom-dev-commitment-grid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(460px, 1.12fr);
  gap: clamp(40px, 7vw, 90px);
  align-items: center;
}

.custom-dev-commitment-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.custom-dev-commitment-cards > div {
  display: grid;
  min-height: 150px;
  padding: 22px;
  align-content: start;
  border: 1px solid rgba(6, 55, 121, .1);
  border-radius: 16px;
  background: #f8fcfe;
}

.custom-dev-commitment-cards b {
  margin-bottom: 18px;
  color: var(--custom-blue);
  font-size: .72rem;
  letter-spacing: .1em;
}

.custom-dev-commitment-cards span,
.custom-dev-commitment-cards strong {
  display: block;
}

.custom-dev-commitment-cards span {
  color: var(--ao-text-secondary);
  font-size: .86rem;
  line-height: 1.65;
}

.custom-dev-commitment-cards strong {
  margin-bottom: 5px;
  color: var(--ao-navy);
  font-size: 1rem;
}

.custom-dev-final-cta {
  display: flex;
  margin-top: 64px;
  padding: 34px 38px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-radius: 22px;
  background: linear-gradient(110deg, #062f67, #0667ac);
  box-shadow: 0 20px 50px rgba(6, 55, 121, .18);
}

.custom-dev-final-cta span {
  display: block;
  margin-bottom: 7px;
  color: #78d8ef;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .13em;
}

.custom-dev-final-cta h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
}

.custom-dev-final-cta .btn-ao-coral {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .custom-dev-intro-grid,
  .custom-dev-commitment-grid {
    grid-template-columns: 1fr;
  }

  .custom-dev-blueprint {
    width: min(100%, 720px);
    margin: 0 auto;
  }

  .custom-dev-capability-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .custom-dev-scenario-layout {
    grid-template-columns: 1fr;
  }

  .custom-dev-scenario-lead {
    position: static;
    max-width: 720px;
  }

  .custom-dev-process-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .custom-dev-hero {
    min-height: 0;
    padding: 82px 0 52px;
  }

  .custom-dev-hero::before {
    right: -130px;
  }

  .custom-dev-hero .page-hero-title br,
  .custom-dev-copy h2 br,
  .custom-dev-scenario-lead h2 br,
  .custom-dev-commitment h2 br {
    display: none;
  }

  .custom-dev-intro-grid {
    gap: 38px;
  }

  .custom-dev-proof-row,
  .custom-dev-capability-grid,
  .custom-dev-scenario-grid,
  .custom-dev-process-list,
  .custom-dev-commitment-cards {
    grid-template-columns: 1fr;
  }

  .custom-dev-proof-row {
    gap: 0;
  }

  .custom-dev-proof-row div {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }

  .custom-dev-blueprint {
    padding: 18px;
    border-radius: 20px;
  }

  .custom-dev-blueprint-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .custom-dev-inputs,
  .custom-dev-output-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .custom-dev-output-grid::before {
    display: none;
  }

  .custom-dev-output-grid {
    margin-top: 18px;
  }

  .custom-dev-core {
    padding: 16px;
  }

  .custom-dev-capability-card {
    min-height: 0;
  }

  .custom-dev-scenario-grid article,
  .custom-dev-scenario-grid article:nth-child(even) {
    min-height: 0;
    border-right: 0;
  }

  .custom-dev-stack-row {
    grid-template-columns: 1fr;
  }

  .custom-dev-stack-items {
    grid-template-columns: repeat(2, 1fr);
  }

  .custom-dev-stack-label {
    padding: 5px 4px;
  }

  .custom-dev-architecture-note,
  .custom-dev-final-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .custom-dev-final-cta {
    margin-top: 42px;
    padding: 28px 24px;
  }

  .custom-dev-final-cta .btn-ao-coral {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
}

/* ==========================================================================
   主機雲端託管與企業網路
   ========================================================================== */
#page-service-cloud-detail .page-hero-title {
  max-width: 940px;
}

.cloud-hosting-page {
  background:
    radial-gradient(circle at 92% 8%, rgba(96, 212, 197, .16), transparent 25%),
    radial-gradient(circle at 6% 34%, rgba(255, 184, 108, .13), transparent 24%),
    #f4f9fc;
}

.cloud-hosting-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(480px, 1.14fr);
  gap: clamp(42px, 6vw, 84px);
  align-items: center;
}

.cloud-hosting-kicker {
  margin-bottom: 14px;
  color: #087da5;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.cloud-hosting-intro-copy h2,
.cloud-hosting-assurance h2 {
  color: var(--ao-navy);
  font-size: clamp(2rem, 3.7vw, 3.4rem);
  line-height: 1.16;
  text-wrap: balance;
}

.cloud-hosting-intro-copy > p,
.cloud-hosting-assurance-copy > p {
  margin: 22px 0;
  color: var(--ao-text-secondary);
  font-size: 1.05rem;
  line-height: 1.85;
  text-wrap: pretty;
}

.cloud-hosting-pills {
  display: flex;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 9px;
}

.cloud-hosting-pills span {
  padding: 8px 13px;
  border: 1px solid rgba(6, 103, 172, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  color: #24597b;
  font-size: .82rem;
  font-weight: 800;
}

.cloud-hosting-hero-figure {
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(6, 103, 172, .12);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 26px 60px rgba(6, 55, 121, .14);
}

.cloud-hosting-hero-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.cloud-hosting-hero-figure figcaption {
  padding: 13px 18px;
  color: #5c6f7e;
  font-size: .8rem;
  text-align: center;
}

.cloud-hosting-section-head {
  margin-top: 100px;
}

.cloud-hosting-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.cloud-hosting-card {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid rgba(6, 103, 172, .11);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(6, 55, 121, .08);
  transition: transform .28s ease, box-shadow .28s ease;
}

.cloud-hosting-card:hover {
  box-shadow: 0 24px 50px rgba(6, 55, 121, .13);
  transform: translateY(-5px);
}

.cloud-hosting-card > img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.cloud-hosting-card-body {
  display: flex;
  padding: 28px;
  flex: 1;
  flex-direction: column;
}

.cloud-hosting-card-body > span {
  color: #087da5;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.cloud-hosting-card h3 {
  margin: 10px 0 12px;
  color: var(--ao-navy);
  font-size: 1.35rem;
  line-height: 1.4;
}

.cloud-hosting-card p {
  color: var(--ao-text-secondary);
  font-size: .96rem;
  line-height: 1.78;
  text-wrap: pretty;
}

.cloud-hosting-card ul {
  display: grid;
  margin: 18px 0 24px;
  gap: 9px;
  list-style: none;
}

.cloud-hosting-card li {
  position: relative;
  padding-left: 22px;
  color: #385468;
  font-size: .9rem;
}

.cloud-hosting-card li::before {
  position: absolute;
  top: .08em;
  left: 0;
  color: #159e8e;
  font-weight: 900;
  content: "✓";
}

.cloud-hosting-card a,
.cloud-hosting-text-button {
  width: fit-content;
  margin-top: auto;
  border: 0;
  background: transparent;
  color: #075ea0;
  font: inherit;
  font-size: .88rem;
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
}

.cloud-hosting-card a:hover,
.cloud-hosting-text-button:hover {
  color: #0b8a7b;
}

.cloud-hosting-local-details {
  display: grid;
  min-width: 0;
  margin-top: 76px;
  gap: 24px;
}

.cloud-hosting-detail-panel {
  min-width: 0;
  scroll-margin-top: 110px;
  padding: clamp(30px, 4.5vw, 56px);
  border: 1px solid rgba(6, 103, 172, .11);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(6, 55, 121, .07);
}

.cloud-hosting-detail-panel > header {
  display: grid;
  margin-bottom: 30px;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: end;
}

.cloud-hosting-detail-panel > header span {
  color: #087da5;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .11em;
}

.cloud-hosting-detail-panel > header h2 {
  margin-top: 9px;
  color: var(--ao-navy);
  font-size: clamp(1.8rem, 3vw, 2.65rem);
  line-height: 1.2;
}

.cloud-hosting-detail-panel > header p {
  margin: 0;
  color: var(--ao-text-secondary);
  font-size: 1rem;
  line-height: 1.8;
}

.cloud-hosting-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cloud-hosting-detail-grid section {
  padding: 22px;
  border: 1px solid rgba(6, 103, 172, .08);
  border-radius: 16px;
  background: linear-gradient(145deg, #f8fcff, #fffaf3);
}

.cloud-hosting-detail-grid b {
  color: #77bfd8;
  font-size: 1.15rem;
}

.cloud-hosting-detail-grid h3 {
  margin: 8px 0;
  color: var(--ao-navy);
  font-size: 1.05rem;
}

.cloud-hosting-detail-grid p {
  margin: 0;
  color: #5c6f7e;
  font-size: .9rem;
  line-height: 1.68;
}

.cloud-hosting-plan-panel {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 4%, rgba(126, 87, 255, 0.13), transparent 25%),
        radial-gradient(circle at 6% 96%, rgba(25, 190, 171, 0.12), transparent 28%),
        #ffffff;
}

.cloud-hosting-plan-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 6px;
    background: linear-gradient(90deg, #13b8a6 0 25%, #1688dc 25% 50%, #7667e8 50% 75%, #f28a52 75% 100%);
}

.cloud-hosting-plan-panel > header {
    position: relative;
    z-index: 1;
}

.cloud-hosting-plan-panel > header h2 {
    background: linear-gradient(90deg, #073f7e, #604fcb 70%, #db713e);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cloud-hosting-plan-panel .cloud-hosting-table-wrap {
    position: relative;
    z-index: 1;
    border-color: rgba(24, 126, 184, 0.2);
    box-shadow: 0 18px 44px rgba(26, 83, 124, 0.1);
}

.cloud-hosting-plan-panel .cloud-hosting-table-wrap thead th {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.22);
}

.cloud-hosting-plan-panel .cloud-hosting-table-wrap thead th:nth-child(1) {
    background: linear-gradient(135deg, #07437f, #126ca8);
}

.cloud-hosting-plan-panel .cloud-hosting-table-wrap thead th:nth-child(2) {
    background: linear-gradient(135deg, #099b91, #20bba8);
}

.cloud-hosting-plan-panel .cloud-hosting-table-wrap thead th:nth-child(3) {
    background: linear-gradient(135deg, #087fc5, #25a5df);
}

.cloud-hosting-plan-panel .cloud-hosting-table-wrap thead th:nth-child(4) {
    background: linear-gradient(135deg, #5b56c8, #8174e9);
}

.cloud-hosting-plan-panel .cloud-hosting-table-wrap thead th:nth-child(5) {
    background: linear-gradient(135deg, #dd6e3c, #f3a24e);
}

.cloud-hosting-plan-panel .cloud-hosting-table-wrap tbody th {
    color: #073f7e;
    background: linear-gradient(90deg, #eef7fd, #f7fbfe);
}

.cloud-hosting-plan-panel .cloud-hosting-table-wrap tbody td:nth-child(2) {
    background: rgba(32, 187, 168, 0.075);
}

.cloud-hosting-plan-panel .cloud-hosting-table-wrap tbody td:nth-child(3) {
    background: rgba(37, 165, 223, 0.075);
}

.cloud-hosting-plan-panel .cloud-hosting-table-wrap tbody td:nth-child(4) {
    background: rgba(129, 116, 233, 0.075);
}

.cloud-hosting-plan-panel .cloud-hosting-table-wrap tbody td:nth-child(5) {
    background: rgba(243, 162, 78, 0.09);
}

.cloud-hosting-plan-panel .cloud-hosting-table-wrap tbody tr:hover th,
.cloud-hosting-plan-panel .cloud-hosting-table-wrap tbody tr:hover td {
    filter: saturate(1.2) brightness(0.98);
}

.cloud-hosting-plan-panel .cloud-hosting-detail-note {
    border-left-color: #f28a52;
    background: linear-gradient(90deg, rgba(255, 238, 221, 0.92), rgba(240, 246, 255, 0.9));
}

.logistics-process-flow {
    width: min(1240px, calc(100vw - 48px));
    max-width: none;
    margin: clamp(34px, 5vw, 64px) 0;
    margin-left: 50%;
    padding: clamp(28px, 4vw, 52px);
    transform: translateX(-50%);
    overflow: hidden;
    border: 1px solid rgba(17, 101, 151, 0.14);
    border-radius: 28px;
    background:
        radial-gradient(circle at 5% 8%, rgba(31, 190, 172, 0.16), transparent 28%),
        radial-gradient(circle at 94% 10%, rgba(118, 96, 224, 0.14), transparent 30%),
        radial-gradient(circle at 88% 95%, rgba(247, 157, 76, 0.13), transparent 28%),
        #ffffff;
    box-shadow: 0 24px 64px rgba(26, 77, 111, 0.11);
}

.logistics-flow-header {
    max-width: 820px;
    margin: 0 auto clamp(30px, 4vw, 44px);
    text-align: center;
}

.logistics-flow-header > p {
    margin: 0 0 10px;
    color: #0a8b9b;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.logistics-flow-header h2 {
    margin: 0 0 12px;
    color: #073f7e;
    font-size: clamp(1.75rem, 3.3vw, 2.75rem);
    line-height: 1.25;
    text-wrap: balance;
}

.logistics-flow-header span {
    color: #5b6a79;
    font-size: clamp(0.96rem, 1.3vw, 1.08rem);
}

.logistics-flow-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr) 52px minmax(0, 1fr);
    grid-template-rows: auto 44px auto 44px auto;
    align-items: stretch;
}

.logistics-flow-step {
    --flow-color: #168bc8;
    --flow-soft: #eaf7ff;
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-width: 0;
    min-height: 150px;
    padding: 24px 22px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--flow-color) 25%, white);
    border-radius: 21px;
    background: linear-gradient(145deg, #ffffff 20%, var(--flow-soft));
    box-shadow: 0 13px 30px color-mix(in srgb, var(--flow-color) 12%, transparent);
}

.logistics-flow-step::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: var(--flow-color);
}

.logistics-flow-step > b {
    position: absolute;
    top: 14px;
    right: 16px;
    color: color-mix(in srgb, var(--flow-color) 78%, white);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}

.logistics-flow-step > i {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 17px;
    color: #ffffff;
    background: linear-gradient(145deg, color-mix(in srgb, var(--flow-color) 72%, white), var(--flow-color));
    box-shadow: 0 10px 22px color-mix(in srgb, var(--flow-color) 28%, transparent);
    font-size: 1.24rem;
    font-style: normal;
    font-weight: 900;
}

.logistics-flow-step small {
    display: block;
    margin-bottom: 5px;
    color: var(--flow-color);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.logistics-flow-step h3 {
    margin: 0 0 7px;
    color: #123e66;
    font-size: clamp(1.02rem, 1.3vw, 1.22rem);
    line-height: 1.38;
    text-wrap: pretty;
}

.logistics-flow-step p {
    margin: 0;
    color: #596b7a;
    font-size: 0.86rem;
    line-height: 1.55;
}

.logistics-flow-arrow {
    display: grid;
    place-items: center;
    align-self: center;
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 900;
}

.logistics-flow-arrow::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #21b8a8, #3b8bd5 55%, #7669da);
    box-shadow: 0 8px 18px rgba(48, 128, 184, 0.22);
}

.logistics-flow-arrow { position: relative; z-index: 1; }
.step-1 { grid-area: 1 / 1; --flow-color: #078f9c; --flow-soft: #e5fbf8; }
.arrow-1 { grid-area: 1 / 2; }
.step-2 { grid-area: 1 / 3; --flow-color: #167cc4; --flow-soft: #e9f6ff; }
.arrow-2 { grid-area: 1 / 4; }
.step-3 { grid-area: 1 / 5; --flow-color: #6158c8; --flow-soft: #f0efff; }
.arrow-down-1 { grid-area: 2 / 5; }
.step-4 { grid-area: 3 / 5; --flow-color: #9a4ec5; --flow-soft: #f8edff; }
.arrow-3 { grid-area: 3 / 4; }
.step-5 { grid-area: 3 / 3; --flow-color: #d2558f; --flow-soft: #fff0f7; }
.arrow-4 { grid-area: 3 / 2; }
.step-6 { grid-area: 3 / 1; --flow-color: #e06d54; --flow-soft: #fff2ed; }
.arrow-down-2 { grid-area: 4 / 1; }
.step-7 { grid-area: 5 / 1; --flow-color: #e59432; --flow-soft: #fff7e8; }
.arrow-5 { grid-area: 5 / 2; }
.step-8 { grid-area: 5 / 3; --flow-color: #78a631; --flow-soft: #f3fae8; }
.arrow-6 { grid-area: 5 / 4; }
.step-9 { grid-area: 5 / 5; --flow-color: #1c9a71; --flow-soft: #e9faf3; }

@media (max-width: 900px) {
    .logistics-flow-grid {
        grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
        grid-template-rows: repeat(9, auto);
        gap: 18px 0;
    }

    .logistics-flow-step { grid-column: auto !important; grid-row: auto !important; }
    .logistics-flow-arrow { grid-column: auto !important; grid-row: auto !important; }
    .step-1, .step-3, .step-4, .step-6, .step-7, .step-9 { grid-column: 1 !important; }
    .step-2, .step-5, .step-8 { grid-column: 3 !important; }
    .arrow-1, .arrow-2, .arrow-down-1, .arrow-3, .arrow-4, .arrow-down-2, .arrow-5, .arrow-6 { display: none; }
}

@media (max-width: 620px) {
    .logistics-process-flow {
        width: 100%;
        margin-left: 0;
        transform: none;
        padding: 26px 18px;
        border-radius: 22px;
    }

    .logistics-flow-grid {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .logistics-flow-arrow {
        display: grid !important;
        height: 30px;
        font-size: 0;
    }

    .logistics-flow-arrow::after {
        content: "↓";
        font-size: 1.15rem;
    }

    .logistics-flow-arrow::before {
        width: 30px;
        height: 30px;
    }

    .logistics-flow-step {
        grid-template-columns: 48px minmax(0, 1fr);
        min-height: 132px;
        padding: 22px 18px;
    }

    .logistics-flow-step > i {
        width: 48px;
        height: 48px;
        border-radius: 15px;
    }
}

/* 2023 process-safety seminar */
.process-safety-news-card .news-card-img {
  object-position: center 44%;
}

.process-safety-news-badge {
  background: linear-gradient(135deg, #087f8c 0%, #0d5b88 100%);
}

.process-safety-lead {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 42px;
  align-items: center;
  margin-bottom: 38px;
}

.process-safety-lead > div > span,
.process-safety-gallery-heading > span {
  color: #087f8c;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.process-safety-lead h2,
.process-safety-gallery-heading h2 {
  margin: 10px 0 16px;
  color: var(--ao-navy);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.28;
  text-wrap: balance;
}

.process-safety-lead p,
.process-safety-gallery-heading p {
  color: var(--ao-text-secondary);
  font-size: 1.02rem;
  line-height: 1.85;
}

.process-safety-lead figure,
.process-safety-gallery figure {
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(6, 55, 121, .09);
  cursor: pointer;
}

.process-safety-lead img,
.process-safety-gallery img {
  display: block;
  width: 100%;
  height: auto;
}

.process-safety-focus-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 34px;
}

.process-safety-focus-grid article {
  padding: 26px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(6, 55, 121, .06);
}

.process-safety-focus-grid article:nth-child(1) { border-top: 5px solid #1697c4; }
.process-safety-focus-grid article:nth-child(2) { border-top: 5px solid #2fac76; }
.process-safety-focus-grid article:nth-child(3) { border-top: 5px solid #f0a521; }
.process-safety-focus-grid b { color: #087f8c; font-size: 1.3rem; }
.process-safety-focus-grid h3 { margin: 14px 0 8px; color: var(--ao-navy); }
.process-safety-focus-grid p { margin: 0; color: var(--ao-text-secondary); line-height: 1.7; }

.process-safety-quote {
  margin: 0 0 72px;
  padding: 28px 34px;
  border-left: 6px solid #32a852;
  border-radius: 0 18px 18px 0;
  color: #fff;
  background: linear-gradient(135deg, #063779 0%, #075d78 100%);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.8;
}

.process-safety-gallery-heading {
  margin-bottom: 24px;
  text-align: center;
}

.process-safety-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.process-safety-gallery figure {
  border: 1px solid rgba(6, 103, 172, .15);
}

.process-safety-gallery img {
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #f2f7fa;
}

.process-safety-gallery figcaption {
  padding: 18px 20px;
  color: var(--ao-navy);
  font-weight: 800;
}

@media (max-width: 820px) {
  .process-safety-lead,
  .process-safety-gallery { grid-template-columns: 1fr; }
  .process-safety-focus-grid { grid-template-columns: 1fr; }
}

.partner-ecosystem-section {
    padding: clamp(52px, 6vw, 78px) 0;
    background:
        radial-gradient(circle at 8% 12%, rgba(24, 155, 207, 0.1), transparent 28%),
        radial-gradient(circle at 92% 88%, rgba(45, 178, 145, 0.1), transparent 30%),
        #f4f9fc;
}

.partner-ecosystem-inner {
    width: min(1240px, calc(100% - 48px));
    margin-inline: auto;
}

.partner-ecosystem-header {
    max-width: 1040px;
    margin: 0 auto clamp(26px, 3.5vw, 38px);
    text-align: center;
}

.partner-ecosystem-header .section-eyebrow {
    margin-bottom: 11px;
    color: #087dbc;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.partner-ecosystem-header h2 {
    margin: 0 0 12px;
    color: #073f7e;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.18;
    text-wrap: balance;
}

.partner-ecosystem-header > p:last-child {
    margin: 0;
    color: #59697a;
    font-size: clamp(1rem, 1.5vw, 1.12rem);
    line-height: 1.6;
}

.partner-ecosystem-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.partner-ecosystem-card {
    position: relative;
    display: flex;
    min-height: 238px;
    flex-direction: column;
    min-width: 0;
    padding: 27px 28px 25px;
    overflow: hidden;
    border: 1px solid rgba(20, 88, 130, 0.12);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 45px rgba(31, 77, 109, 0.09);
}

.partner-ecosystem-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: var(--partner-accent, #0b86c6);
}

.partner-spark { --partner-accent: linear-gradient(90deg, #056579, #27a2b0); }
.partner-tuv { --partner-accent: linear-gradient(90deg, #0874bd, #1ba8df); }
.partner-ever-loyal { --partner-accent: linear-gradient(90deg, #2f343b, #d2aa1b); }
.partner-yhs { --partner-accent: linear-gradient(90deg, #9d1d27, #d45a62); }

.partner-card-heading {
    display: grid;
    grid-template-columns: 122px minmax(0, 1fr);
    gap: 19px;
    align-items: center;
    min-height: 86px;
    margin-bottom: 16px;
}

.partner-card-heading img {
    display: block;
    width: 100%;
    height: 74px;
    max-width: 122px;
    padding: 8px;
    object-fit: contain;
    border: 1px solid rgba(18, 91, 134, 0.09);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
}

.partner-card-heading h3 {
    margin: 0 0 5px;
    color: #073f7e;
    font-size: clamp(1.16rem, 1.45vw, 1.38rem);
    line-height: 1.26;
    text-wrap: pretty;
}

.partner-card-heading p {
    margin: 0;
    color: #087dbc;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.3;
}

.partner-ecosystem-card > p {
    margin: 0;
    padding-top: 15px;
    border-top: 1px solid rgba(17, 84, 126, 0.1);
    color: #354657;
    font-size: 0.96rem;
    line-height: 1.62;
}

@media (max-width: 1180px) {
    .partner-ecosystem-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .partner-card-heading {
        grid-template-columns: 108px minmax(0, 1fr);
        gap: 17px;
    }

    .partner-card-heading img {
        max-width: 108px;
    }
}

@media (max-width: 760px) {
    .partner-ecosystem-inner {
        width: min(100% - 30px, 1240px);
    }

    .partner-ecosystem-grid {
        grid-template-columns: 1fr;
    }

    .partner-ecosystem-card {
        min-height: 0;
        padding: 26px 22px 24px;
    }

    .partner-card-heading {
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 15px;
        min-height: 88px;
    }

    .partner-card-heading img {
        width: 104px;
        height: 76px;
    }
}

.cloud-hosting-table-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(6, 103, 172, .1);
  border-radius: 16px;
  background: #fff;
}

.cloud-hosting-table-wrap table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  color: #36546b;
  font-size: .9rem;
}

.cloud-hosting-table-wrap th,
.cloud-hosting-table-wrap td {
  padding: 15px 16px;
  border-right: 1px solid rgba(6, 103, 172, .07);
  border-bottom: 1px solid rgba(6, 103, 172, .07);
  text-align: center;
}

.cloud-hosting-table-wrap thead th {
  background: #eaf6fc;
  color: var(--ao-navy);
  font-weight: 900;
}

.cloud-hosting-table-wrap tbody th {
  background: #f8fbfd;
  color: var(--ao-navy);
  font-weight: 800;
  text-align: left;
}

.cloud-hosting-table-wrap tr:last-child th,
.cloud-hosting-table-wrap tr:last-child td {
  border-bottom: 0;
}

.cloud-hosting-table-wrap th:last-child,
.cloud-hosting-table-wrap td:last-child {
  border-right: 0;
}

.cloud-hosting-detail-note {
  margin-top: 18px;
  padding: 13px 16px;
  border-left: 4px solid #f2a261;
  border-radius: 8px;
  background: #fff8ef;
  color: #5b6872;
  font-size: .84rem;
  line-height: 1.65;
}

.cloud-hosting-assurance {
  display: grid;
  margin-top: 90px;
  padding: clamp(34px, 5vw, 64px);
  grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr);
  gap: clamp(34px, 6vw, 78px);
  border: 1px solid rgba(6, 103, 172, .1);
  border-radius: 28px;
  background:
    radial-gradient(circle at 90% 10%, rgba(163, 230, 218, .5), transparent 30%),
    linear-gradient(135deg, #fff8ef, #f2fbff 58%, #f7f1ff);
}

.cloud-hosting-assurance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.cloud-hosting-assurance-grid article {
  display: grid;
  min-width: 0;
  padding: 20px;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  border: 1px solid rgba(6, 103, 172, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .78);
}

.cloud-hosting-assurance-grid b {
  grid-row: span 2;
  color: #79bfd9;
  font-size: 1.1rem;
}

.cloud-hosting-assurance-grid strong {
  color: var(--ao-navy);
  font-size: 1rem;
}

.cloud-hosting-assurance-grid span {
  margin-top: 6px;
  color: #5c6f7e;
  font-size: .86rem;
  line-height: 1.6;
}

.cloud-hosting-final-cta {
  display: flex;
  margin-top: 30px;
  padding: 34px 40px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-radius: 24px;
  background: linear-gradient(135deg, #063779, #0878ad);
  box-shadow: 0 20px 45px rgba(6, 55, 121, .18);
}

.cloud-hosting-final-cta span {
  color: #8be4dc;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .11em;
}

.cloud-hosting-final-cta h3 {
  margin: 8px 0 7px;
  color: #fff;
  font-size: 1.55rem;
}

.cloud-hosting-final-cta p {
  margin: 0;
  color: rgba(255, 255, 255, .76);
  line-height: 1.65;
}

@media (max-width: 1050px) {
  .cloud-hosting-intro-grid,
  .cloud-hosting-assurance {
    grid-template-columns: 1fr;
  }

  .cloud-hosting-hero-figure {
    width: min(100%, 820px);
  }

  .cloud-hosting-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cloud-hosting-card:last-child {
    grid-column: 1 / -1;
  }

  .cloud-hosting-detail-panel > header {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cloud-hosting-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .cloud-hosting-service-grid,
  .cloud-hosting-assurance-grid,
  .cloud-hosting-detail-grid {
    grid-template-columns: 1fr;
  }

  .cloud-hosting-card:last-child {
    grid-column: auto;
  }

  .cloud-hosting-card > img {
    height: 230px;
  }

  .cloud-hosting-assurance {
    margin-top: 64px;
    padding: 28px 22px;
  }

  .cloud-hosting-final-cta {
    padding: 30px 24px;
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 440px) {
  .custom-dev-hero-pills span {
    width: 100%;
    text-align: center;
  }

  .custom-dev-core-mark {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
  }

  .custom-dev-stack-items {
    grid-template-columns: 1fr;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--ao-paper);
  color: var(--ao-text-primary);
  font-family: var(--font-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
  background: var(--ao-paper);
}

/* 關係企業 Logo：保留原始比例，取代旗幟圖示。 */
.partner-logo-box {
  display: flex;
  flex: 0 0 72px;
  align-items: center;
  justify-content: center;
  min-height: 64px;
}

.partner-logo-box-wide {
  flex-basis: 124px;
}

.partner-brand-logo {
  display: block;
  max-width: 100%;
  max-height: 64px;
  object-fit: contain;
}

.partner-brand-logo-spark {
  width: 124px;
}

.partner-brand-logo-everloyal {
  width: 64px;
}

.partner-logo-box-yanghong {
  flex-basis: 72px;
}

.partner-brand-logo-yanghong {
  width: 64px;
  border-radius: 14px;
}

.partner-company-subtitle {
  margin-top: 3px;
  color: var(--ao-navy);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.35;
}

/* About 頁首品牌識別：以正式 Logo 取代無意義的建築 emoji。 */
.about-hero-title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.about-hero-mark {
  display: inline-flex;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  overflow: hidden;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.about-hero-mark img {
  width: auto;
  max-width: none;
  height: 54px;
  margin-left: 0;
}

.about-hero-subtitle {
  display: grid;
  gap: 2px;
  max-width: none;
}

.about-hero-subtitle span {
  display: block;
  width: fit-content;
  max-width: 100%;
  text-wrap: pretty;
}

.about-mission-list li {
  text-wrap: pretty;
}

.no-break {
  white-space: nowrap;
}

/* 公司簡介右側改為具有資訊意義的跨域能力圖。 */
.about-capability-visual {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  padding: 34px;
  border: 1px solid rgba(6, 55, 121, .12);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 84% 18%, rgba(81, 176, 209, .2), transparent 31%),
    linear-gradient(145deg, #ffffff 0%, #eef7fb 58%, #e5f1f8 100%);
  box-shadow: var(--shadow-card);
}

.about-capability-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .35;
  background-image:
    linear-gradient(rgba(6, 103, 172, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 103, 172, .08) 1px, transparent 1px);
  background-size: 38px 38px;
  pointer-events: none;
}

.about-capability-visual > * {
  position: relative;
  z-index: 1;
}

.about-capability-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(6, 55, 121, .12);
}

.about-capability-brand img {
  width: min(240px, 48%);
  height: auto;
}

.about-capability-brand div {
  text-align: right;
}

.about-capability-brand strong,
.about-capability-brand span {
  display: block;
}

.about-capability-brand strong {
  color: var(--ao-navy);
  font-size: 1.15rem;
}

.about-capability-brand span {
  margin-top: 3px;
  color: var(--ao-text-secondary);
  font-size: .86rem;
}

.about-capability-core {
  width: min(300px, 86%);
  margin: 26px auto 22px;
  padding: 18px 22px;
  border-radius: 18px;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, var(--ao-navy), var(--ao-red));
  box-shadow: 0 16px 35px rgba(6, 55, 121, .22);
}

.about-capability-core span,
.about-capability-core strong {
  display: block;
}

.about-capability-core span {
  font-size: 1.22rem;
  font-weight: 900;
}

.about-capability-core strong {
  margin-top: 4px;
  color: #bcecff;
  font-size: .82rem;
  letter-spacing: .03em;
}

.about-capability-nodes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.about-capability-nodes div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 10px;
  align-items: center;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(6, 103, 172, .13);
  border-radius: 14px;
  background: rgba(255, 255, 255, .88);
}

.about-capability-nodes b {
  grid-row: 1 / span 2;
  color: #51b0d1;
  font-size: 1.25rem;
}

.about-capability-nodes strong {
  color: var(--ao-navy);
  font-size: .98rem;
}

.about-capability-nodes span {
  color: var(--ao-text-secondary);
  font-size: .77rem;
  line-height: 1.45;
}

.about-capability-sectors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.about-capability-sectors span {
  padding: 6px 11px;
  border: 1px solid rgba(6, 103, 172, .18);
  border-radius: 999px;
  color: var(--ao-navy);
  background: rgba(255, 255, 255, .8);
  font-size: .78rem;
  font-weight: 800;
}

/* 里程碑採真正時間軸呈現，年份清楚且依序閱讀。 */
.about-timeline {
  margin-bottom: 60px;
  padding: 44px 40px 42px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  color: #fff;
  background:
    radial-gradient(circle at 82% 0%, rgba(81, 176, 209, .22), transparent 30%),
    linear-gradient(135deg, #063779 0%, #042a5c 100%);
  box-shadow: var(--shadow-card);
}

.about-timeline-heading {
  max-width: 820px;
  margin: 0 auto 42px;
  text-align: center;
}

.about-timeline-heading > span {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 15px;
  border: 1px solid rgba(143, 212, 236, .38);
  border-radius: 999px;
  color: #bcecff;
  background: rgba(81, 176, 209, .12);
  font-size: .82rem;
  font-weight: 900;
}

.about-timeline-heading h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.8rem, 3vw, 2.35rem);
  line-height: 1.25;
  text-wrap: balance;
}

.about-timeline-heading p {
  margin: 14px auto 0;
  color: rgba(255, 255, 255, .76);
  line-height: 1.75;
  text-wrap: pretty;
}

.about-timeline-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-timeline-list::before {
  content: "";
  position: absolute;
  top: 38px;
  right: 8%;
  left: 8%;
  height: 2px;
  background: linear-gradient(90deg, #51b0d1, #78d5e9, #f4c95d);
}

.about-timeline-list li {
  position: relative;
  min-width: 0;
  padding-top: 68px;
  text-align: center;
}

.about-timeline-list li::before {
  content: "";
  position: absolute;
  top: 29px;
  left: 50%;
  z-index: 1;
  width: 20px;
  height: 20px;
  border: 5px solid #063779;
  border-radius: 50%;
  background: #7cdaec;
  box-shadow: 0 0 0 3px rgba(124, 218, 236, .28);
  transform: translateX(-50%);
}

.about-timeline-list li:last-child::before {
  background: #f4c95d;
}

.about-timeline-list time {
  display: inline-block;
  margin-bottom: 10px;
  color: #8fe0ef;
  font-size: 1.05rem;
  font-weight: 900;
}

.about-timeline-list li:last-child time {
  color: #f4c95d;
}

.about-timeline-list h4 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 1rem;
  line-height: 1.4;
  text-wrap: balance;
}

.about-timeline-list p {
  margin: 0;
  color: rgba(255, 255, 255, .7);
  font-size: .84rem;
  line-height: 1.65;
  text-wrap: pretty;
}

/* 關於威信：將評選資料中的公開正向圖文轉為可閱讀、可放大的內容卡片。 */
.about-strengths {
  margin: 0 0 60px;
  padding: 44px;
  border: 1px solid var(--ao-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff 0%, #f6fbfe 100%);
  box-shadow: var(--shadow-card);
}

.about-strengths-heading {
  max-width: 880px;
  margin: 0 auto 32px;
  text-align: center;
}

.about-strengths-heading h2 {
  margin: 8px 0 12px;
  color: var(--ao-navy);
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  line-height: 1.28;
  text-wrap: balance;
}

.about-strengths-heading p {
  margin: 0;
  color: var(--ao-text-secondary);
  font-size: 1.02rem;
  line-height: 1.8;
  text-wrap: pretty;
}

.about-source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.about-source-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(6, 55, 121, .12);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(6, 55, 121, .08);
}

.about-source-image {
  position: relative;
  padding: 16px 16px 0;
  background: #eef6fb;
}

.about-source-image::after {
  content: "放大圖文";
  position: absolute;
  right: 24px;
  bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #fff;
  background: rgba(4, 42, 92, .88);
  font-size: .75rem;
  font-weight: 800;
}

.about-source-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  background: #fff;
  border-radius: 10px 10px 0 0;
}

.about-source-copy {
  padding: 24px;
}

.about-source-copy > span {
  color: var(--ao-red);
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.about-source-copy h3 {
  margin: 8px 0 12px;
  color: var(--ao-navy);
  font-size: 1.25rem;
  line-height: 1.4;
  text-wrap: balance;
}

.about-source-copy p {
  margin: 0;
  color: var(--ao-text-secondary);
  line-height: 1.75;
  text-wrap: pretty;
}

/* SmartVision：沿用營造詳情頁結構，改以 Spark 品牌色與完整 16:9 簡報畫面呈現。 */
.spark-detail-page .argo-detail-hero {
  background: linear-gradient(135deg, #053247 0%, #056d82 58%, #28a9bf 100%);
}

.spark-detail-page .argo-detail-kicker,
.spark-detail-page .argo-detail-hero-points li::before,
.spark-detail-page .argo-detail-value-grid b {
  color: #85e5f0;
}

.spark-detail-page .argo-detail-kicker::before,
.spark-detail-page .argo-detail-hero-points li::before {
  background: #5bd4e2;
}

.spark-detail-page .argo-detail-section-heading > span,
.spark-detail-page .argo-detail-label,
.spark-detail-page .argo-detail-usecase-card span {
  color: #07889d;
}

.spark-detail-page .argo-detail-usecases {
  background: linear-gradient(180deg, #ecf9fb 0%, #f7fcfd 100%);
}

.spark-detail-page .argo-detail-image-button img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #fff;
}

.argo-detail-page.spark-detail-page .section.argo-detail-security {
  background: #063f52 !important;
}

/* PrestigeBI 3D：產品說明與 YouTube 示範影片。 */
.bi-video-showcase {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: 32px;
  align-items: center;
  margin: 0 0 56px;
  padding: 34px;
  border: 1px solid var(--ao-border);
  border-radius: 24px;
  background: linear-gradient(135deg, #f5faff 0%, #eef6ff 100%);
  box-shadow: 0 24px 55px rgba(6, 55, 121, 0.12);
}

.bi-video-copy h2 {
  margin: 12px 0 14px;
  color: var(--ao-navy);
  font-size: clamp(1.65rem, 2.5vw, 2.25rem);
  line-height: 1.3;
  text-wrap: balance;
}

.bi-video-copy p {
  margin: 0 0 16px;
  color: var(--ao-text-secondary);
  line-height: 1.8;
}

.bi-video-copy ul {
  display: grid;
  gap: 9px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.bi-video-copy li {
  position: relative;
  padding-left: 22px;
  color: var(--ao-text-primary);
  line-height: 1.6;
}

.bi-video-copy li::before {
  content: "";
  position: absolute;
  top: 0.68em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ao-red);
  box-shadow: 0 0 0 5px rgba(17, 126, 190, 0.12);
}

.bi-video-youtube-link {
  width: fit-content;
}

.bi-video-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(6, 55, 121, 0.14);
  border-radius: 18px;
  background: #061b35;
  box-shadow: 0 18px 42px rgba(6, 55, 121, 0.2);
}

.bi-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 900px) {
  .bi-video-showcase {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .bi-video-showcase {
    gap: 24px;
    padding: 24px 18px;
    border-radius: 18px;
  }

  .bi-video-youtube-link {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

.spark-detail-page .argo-detail-security .argo-detail-label {
  color: #7ce0ea;
}

@media (max-width: 720px) {
  .partner-logo-box,
  .partner-logo-box-wide {
    flex: 0 0 76px;
  }

  .partner-brand-logo-spark {
    width: 76px;
  }

  .spark-detail-page .argo-detail-hero h1 {
    font-size: clamp(2.15rem, 10.5vw, 3rem);
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
  }

  .spark-detail-page .argo-detail-kicker {
    overflow-wrap: anywhere;
  }

  .about-strengths {
    padding: 28px 18px;
  }

  .about-hero-title {
    align-items: flex-start;
    gap: 12px;
  }

  .about-hero-mark {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }

  .about-hero-mark img {
    height: 42px;
    margin-left: 0;
  }

  .about-capability-visual {
    min-height: 0;
    padding: 24px 18px;
  }

  .about-capability-brand {
    align-items: flex-start;
    flex-direction: column;
  }

  .about-capability-brand img {
    width: min(240px, 78%);
  }

  .about-capability-brand div {
    text-align: left;
  }

  .about-capability-nodes {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-timeline {
    padding: 34px 24px;
  }

  .about-timeline-heading {
    margin-bottom: 30px;
    text-align: left;
  }

  .about-timeline-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-left: 28px;
  }

  .about-timeline-list::before {
    top: 14px;
    bottom: 14px;
    left: 8px;
    width: 2px;
    height: auto;
  }

  .about-timeline-list li {
    padding: 0 0 28px 16px;
    text-align: left;
  }

  .about-timeline-list li:last-child {
    padding-bottom: 0;
  }

  .about-timeline-list li::before {
    top: 4px;
    left: -20px;
    width: 16px;
    height: 16px;
    border-width: 4px;
    transform: none;
  }

  .about-source-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-source-image img {
    height: auto;
    aspect-ratio: auto;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .about-source-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
 * 全站中文換行守則
 * - 標題採平衡換行，避免最後一行只剩單一中文字。
 * - 內文採較佳段落換行，讓瀏覽器優先調整前一行的斷點。
 * - 僅在長網址或無空格技術字串超出容器時才進行安全折行。
 */
h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.hero-title,
.page-hero-title,
.news-title,
.ao-subtag,
button {
  text-wrap: balance;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}

p,
figcaption,
.section-desc,
.section-desc-serif,
.home-hero-desc,
.page-hero-subtitle {
  text-wrap: pretty;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

.container {
  width: 92%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: 100px 0;
  position: relative;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  background-color: var(--ao-paper) !important;
}

/* 統一全站無縫畫布背景與無邊框切割 (Seamless Unified Canvas Background Flow) */
.section-paper,
.section-tint,
.section-white,
.services-section,
.platforms-section,
.cases-section,
.about-section {
  background-color: var(--ao-paper) !important;
  color: var(--ao-text-primary);
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

.section-navy {
  background-color: var(--ao-navy);
  color: #FFFFFF;
  border: none !important;
}

.section-navy .section-title,
.section-navy h2,
.section-navy h3 {
  color: #FFFFFF;
}

.section-navy .section-desc,
.section-navy p {
  color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================`r`n   Atomic Object 版面標題與文字架構 (Section Header System)
   ========================================================================== */

.section-header {
  text-align: left;
  max-width: 880px;
  margin-bottom: 60px;
}

.section-header.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#page-home .home-section-header {
  width: 100%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#page-home .home-section-header .ao-subtag {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

#page-home .home-section-header .section-title,
#page-home .home-section-header .section-desc,
#page-home .home-section-header .section-desc-serif {
  text-align: center;
}

.ao-subtag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ao-red);
  margin-bottom: 16px;
}

.ao-subtag-dot {
  width: 8px;
  height: 8px;
  background-color: var(--ao-red);
  border-radius: 50%;
}

.section-title {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--ao-navy);
  line-height: 1.2;
  margin-bottom: 18px;
  letter-spacing: -1px;
}

.section-desc-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ao-text-secondary);
  line-height: 1.65;
  margin-bottom: 18px;
}

.section-desc {
  font-size: 1.08rem;
  color: var(--ao-text-secondary);
  line-height: 1.75;
}

/* Atomic Object 經典連結與掃動紅線動畫 (Sweeping Red Underline) */
.ao-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ao-navy);
  padding-bottom: 4px;
  transition: var(--transition);
  overflow: hidden;
  /* 防止未懸停時的動畫紅線向外溢出至整頁 */
}

.ao-link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ao-border);
}

.ao-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ao-red);
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.ao-link:hover::after {
  transform: translateX(0);
}

.ao-link:hover {
  color: var(--ao-red);
}

/* Page Sections Router */
.page-section {
  display: none;
  animation: pageFadeIn 0.35s ease-out;
  padding-top: 0;
}

.page-section.active {
  display: block;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page Hero Banner */
.page-hero-banner {
  background: var(--ao-navy);
  color: #ffffff;
  padding: 70px 0 55px 0;
  position: relative;
  overflow: hidden;
  border: none;
}

.page-hero-banner .hero-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.page-hero-title {
  font-size: 2.8rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 14px;
  letter-spacing: -0.8px;
}

.page-hero-subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-serif);
  font-style: italic;
  max-width: 950px;
  line-height: 1.65;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 22px;
}

.breadcrumb a:hover {
  color: var(--ao-red);
}

/* ==========================================================================`r`n   Atomic Object 頂部導覽列 (Sticky Glass Navigation)
   ========================================================================== */

.header-wrapper {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.header-wrapper.nav-hidden {
  transform: none;
}

.navbar {
  width: 100%;
  height: 80px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: none;
  box-shadow: 0 4px 30px rgba(6, 55, 121, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 45px;
  transition: var(--transition);
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  border-bottom: 1px solid rgba(6, 55, 121, 0.1);
  box-shadow: 0 12px 35px rgba(6, 55, 121, 0.12);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ao-navy);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -0.6px;
}

.nav-brand-logo {
  display: block;
  width: clamp(168px, 15vw, 220px);
  height: 56px;
  object-fit: contain;
  object-position: left center;
}

.brand-icon {
  width: 44px;
  height: 44px;
  background: var(--ao-navy);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ao-red);
  font-weight: 900;
  font-size: 1.3rem;
  box-shadow: 0 4px 12px rgba(6, 55, 121, 0.15);
}

.nav-brand-text {
  display: flex;
  flex-direction: column;
}

.brand-sub {
  font-size: 0.68rem;
  color: var(--ao-red);
  letter-spacing: 1.5px;
  font-weight: 800;
  text-transform: uppercase;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
}

.nav-item {
  position: relative;
}

.nav-link {
  color: var(--ao-text-primary);
  font-size: 1.08rem;
  font-weight: 700;
  transition: var(--transition);
  padding: 8px 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.nav-link:hover,
.nav-link.active {
  color: var(--ao-red);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  border: 1px solid var(--ao-border);
  border-radius: var(--radius-md);
  box-shadow: 0 15px 40px rgba(6, 55, 121, 0.12);
  padding: 12px 0;
  min-width: 290px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: var(--transition);
  list-style: none;
}

.nav-item:hover .dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.dropdown-item a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 24px;
  color: var(--ao-text-primary);
  font-size: 1.04rem;
  font-weight: 600;
  transition: var(--transition);
}

.dropdown-item a:hover {
  background: var(--ao-paper);
  color: var(--ao-red);
  padding-left: 28px;
}

/* Atomic Object 經典珊瑚紅按鈕 (Pill CTA with Hover Arrow Shift) */
.btn-ao-coral {
  background: var(--ao-red);
  color: #ffffff;
  padding: 13px 28px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: var(--shadow-red);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn-ao-coral:hover {
  background: var(--ao-red-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(6, 103, 172, 0.45);
}

.btn-ao-coral svg {
  transition: transform 0.3s ease;
}

.btn-ao-coral:hover svg {
  transform: translateX(5px);
}

.btn-ao-dark {
  background: var(--ao-navy);
  color: #ffffff;
  padding: 13px 28px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.95rem;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn-ao-dark:hover {
  background: var(--ao-dark);
  color: var(--ao-red);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.mobile-nav-toggle {
  display: none;
  color: var(--ao-navy);
  font-size: 1.6rem;
}

/* ==========================================================================`r`n   Atomic Object 巨幅 HERO SECTION (Full Impact Hero Banner)
   ========================================================================== */

/* ==========================================================================`r`n   首頁 Flagship 暗藍科技獨立風格 (Distinctive Home Flagship Theme)
   ========================================================================== */
.home-hero-dark {
  background: radial-gradient(circle at 70% 30%, #0d2030 0%, #08101a 70%);
  color: #ffffff;
  padding: 90px 0 100px 0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(81, 176, 209, 0.25);
}

.home-hero-dark .hero-bg-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(81, 176, 209, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(81, 176, 209, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.home-hero-dark .hero-title {
  color: #ffffff;
  font-size: clamp(2.7rem, 4vw, 3.6rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 24px;
}

/* 較長輪播標題：平衡行寬，避免桌面、平板與手機版出現單字孤行。 */
.home-hero-dark .hero-title.hero-title-healthcare {
  font-size: clamp(2.45rem, 3.7vw, 3.3rem);
  text-wrap: balance;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}

.home-gradient-text {
  background: linear-gradient(135deg, #51B0D1 0%, #ffffff 50%, #0667AC 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home-hero-desc {
  font-size: 1.12rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.85;
  margin-bottom: 40px;
  max-width: 680px;
}

.home-glass-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  padding: 16px 32px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 1.02rem;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.home-glass-btn:hover {
  background: rgba(81, 176, 209, 0.25);
  border-color: var(--cyan);
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(81, 176, 209, 0.3);
}

.home-stat-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 20px;
}

.home-stat-num {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--cyan);
}

.home-stat-label {
  font-size: clamp(0.7rem, 0.8vw, 0.8rem);
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.02em;
  white-space: nowrap;
  margin-top: 4px;
}

/* ==========================================================================`r`n   首頁多資訊主題輪播元件 (Hero Multi-Information Carousel) - 高度鎖定版
   ========================================================================== */
.hero-carousel-container {
  position: relative;
  width: 100%;
}

/* 使用 CSS Grid 重疊置放所有 Slides，容器高度自動維持在全 Slide 最大固定高度，零跳動 */
.hero-slides-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 100%;
  min-height: 520px;
  align-items: center;
}

.hero-slide {
  grid-area: 1 / 1 / 2 / 2;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

/* 統一輪播右側圖片框與圖片高度 */
.hero-slide .hero-image-frame {
  height: 400px;
  max-height: 400px;
  background: #08101A;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-slide .hero-image-frame img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-slide .hero-image-frame img.img-contain {
  object-fit: contain;
  background: #FFFFFF;
  padding: 12px;
}

/* ==========================================================================`r`n   輪播內部元素階層式 Keyframes Fade-in 動態特效 (Staggered Animation Keyframes)
   ========================================================================== */

@keyframes heroSubtagSlide {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroTitleSlide {
  0% {
    opacity: 0;
    transform: translateY(35px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroDescSlide {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroBtnPop {
  0% {
    opacity: 0;
    transform: translateY(25px) scale(0.94);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroStatSlide {
  0% {
    opacity: 0;
    transform: translateY(25px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroImageZoomIn {
  0% {
    opacity: 0;
    transform: scale(0.88) translateY(25px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes heroBadgeSlide {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 預設靜態狀況隱藏子元素 */
.hero-slide .ao-subtag,
.hero-slide .hero-title,
.hero-slide .home-hero-desc,
.hero-slide .btn-primary,
.hero-slide .home-glass-btn,
.hero-slide .home-stat-bar,
.hero-slide .hero-image-frame,
.hero-slide .image-overlay-badge {
  opacity: 0;
}

/* 當 Slide 獲得 .active 時，依序執行 Keyframes 淡入動畫 */
.hero-slide.active .ao-subtag {
  animation: heroSubtagSlide 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
}

.hero-slide.active .hero-title {
  animation: heroTitleSlide 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

.hero-slide.active .home-hero-desc {
  animation: heroDescSlide 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.28s forwards;
}

.hero-slide.active .btn-primary,
.hero-slide.active .home-glass-btn {
  animation: heroBtnPop 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

.hero-slide.active .home-stat-bar {
  animation: heroStatSlide 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.52s forwards;
}

.hero-slide.active .hero-image-frame {
  animation: heroImageZoomIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.hero-slide.active .image-overlay-badge {
  animation: heroBadgeSlide 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.48s forwards;
}

/* 輪播箭頭 (Prev/Next Arrows) */
.hero-carousel-arrow {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
  line-height: 1;
  user-select: none;
}

.hero-carousel-prev {
  left: -24px;
}

.hero-carousel-next {
  right: -24px;
}

.hero-carousel-arrow:hover {
  background: rgba(81, 176, 209, 0.3);
  border-color: var(--cyan);
  color: #ffffff;
  box-shadow: 0 0 20px rgba(81, 176, 209, 0.4);
  transform: translateY(-50%) scale(1.1);
}

/* 輪播分頁導覽頁籤 (Carousel Nav Tabs) */
.hero-carousel-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
}

.carousel-nav-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 10px 18px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 150px;
}

.carousel-nav-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

.carousel-nav-btn.active {
  background: rgba(81, 176, 209, 0.15);
  border-color: var(--cyan);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(81, 176, 209, 0.2);
}

.nav-btn-progress {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.carousel-nav-btn.active .nav-btn-progress .progress-bar {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), #FEE101);
  animation: heroCarouselProgress 5s linear forwards;
}

@keyframes heroCarouselProgress {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

@media (max-width: 992px) {
  .hero-slides-wrapper {
    min-height: auto;
  }

  .hero-carousel-prev {
    left: 0px;
  }

  .hero-carousel-next {
    right: 0px;
  }

  .hero-carousel-nav {
    gap: 8px;
  }

  .carousel-nav-btn {
    min-width: 120px;
    padding: 8px 12px;
    font-size: 0.8rem;
  }
}

.hero {
  position: relative;
  min-height: calc(100vh - 80px);
  background: var(--ao-paper);
  color: var(--ao-text-primary);
  padding-top: 70px;
  padding-bottom: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-title {
  font-size: 3.8rem;
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 24px;
  letter-spacing: -1.5px;
  color: var(--ao-navy);
}

.hero-title span {
  color: var(--ao-red);
}

.hero-description-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--ao-text-secondary);
  margin-bottom: 24px;
  line-height: 1.6;
}

.hero-description {
  font-size: 1.1rem;
  color: var(--ao-text-secondary);
  margin-bottom: 44px;
  line-height: 1.8;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 52px;
  flex-wrap: wrap;
}

.btn-primary {
  background: var(--ao-red);
  color: #ffffff;
  padding: 16px 36px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: var(--shadow-red);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn-primary:hover {
  background: var(--ao-red-hover);
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(6, 103, 172, 0.45);
}

.btn-primary svg {
  transition: transform 0.3s ease;
}

.btn-primary:hover svg {
  transform: translateX(5px);
}

.btn-secondary {
  background: #ffffff;
  color: var(--ao-navy);
  border: 1px solid var(--ao-border);
  padding: 16px 32px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 1.05rem;
  transition: var(--transition);
}

.btn-secondary:hover {
  border-color: var(--ao-navy);
  color: var(--ao-red);
  box-shadow: var(--shadow-soft);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-top: 32px;
  border-top: 1px solid var(--ao-border);
}

.stat-num {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--ao-navy);
}

.stat-label {
  font-size: 0.85rem;
  color: var(--ao-text-secondary);
  font-weight: 600;
}

/* Atomic Object 主視覺展示框 (Hero Image Frame) */
.hero-image-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(6, 55, 121, 0.15);
  border: 1px solid var(--ao-border);
  background: var(--ao-navy);
  max-height: 460px;
}

.hero-image-frame img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: var(--transition);
}

.hero-image-frame:hover img {
  transform: scale(1.03);
}

.image-overlay-badge {
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
  background: rgba(6, 55, 121, 0.92);
  backdrop-filter: blur(12px);
  padding: 14px 20px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.88rem;
}

/* ==========================================================================`r`n   Atomic Object "Capabilities" 核心能力卡片區塊 (Large Clean Cards)
   ========================================================================== */

.capabilities-section {
  background: var(--ao-paper);
  border-bottom: 1px solid var(--ao-border);
}

.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.capability-card {
  background: #ffffff;
  border-radius: var(--radius-xl, 20px);
  border: none;
  padding: 36px 30px;
  box-shadow: 0 10px 32px rgba(6, 55, 121, 0.04);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  position: relative;
}

.capability-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 50px rgba(6, 55, 121, 0.1);
}

#page-platform-cems-detail .capability-card,
#page-platform-bi-detail .capability-card {
  padding-top: 0;
  overflow: hidden;
}

.capability-card-visual {
  width: calc(100% + 60px);
  height: clamp(180px, 15vw, 220px);
  margin: 0 -30px 25px;
  overflow: hidden;
  border-bottom: 1px solid rgba(6, 55, 121, 0.09);
  background: #eaf5fb;
}

.capability-card-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), filter .45s ease;
}

#page-platform-cems-detail .capability-card:hover .capability-card-visual img,
#page-platform-bi-detail .capability-card:hover .capability-card-visual img {
  transform: scale(1.035);
  filter: saturate(1.06) contrast(1.02);
}

@media (max-width: 760px) {
  .capability-card-visual {
    height: 168px;
  }

  #page-platform-bi-detail .feature-spec-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    font-size: 0.78rem;
  }

  #page-platform-bi-detail .feature-spec-table th,
  #page-platform-bi-detail .feature-spec-table td {
    padding: 10px 6px;
    overflow-wrap: anywhere;
  }
}

/* 全站共用回到頁頂按鈕 */
.back-to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 950;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: linear-gradient(145deg, #0f8bd1, #063779);
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(6, 55, 121, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.92);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease, box-shadow 0.22s ease;
  cursor: pointer;
}

.back-to-top.is-visible {
  opacity: 0.94;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.back-to-top:hover {
  opacity: 1;
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(6, 55, 121, 0.38);
}

.back-to-top:focus-visible {
  outline: 3px solid rgba(81, 176, 209, 0.55);
  outline-offset: 4px;
}

.back-to-top svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 760px) {
  .back-to-top {
    right: 16px;
    bottom: 18px;
    width: 48px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }
}

.capability-icon-box {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(81, 176, 209, 0.14) 100%);
  color: #0667AC;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: all 0.35s ease;
  box-shadow: 0 10px 24px rgba(6, 55, 121, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.capability-card:hover .capability-icon-box {
  transform: translateY(-2px);
  background: linear-gradient(145deg, #ffffff 0%, rgba(81, 176, 209, 0.24) 100%);
  color: #063779;
  box-shadow: 0 14px 30px rgba(6, 55, 121, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.ao-apple-icon {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.capability-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--ao-navy);
  margin-bottom: 12px;
}

.capability-desc {
  font-size: 0.98rem;
  color: var(--ao-text-secondary);
  line-height: 1.7;
  margin-bottom: 28px;
}

/* Atomic Object 紅色數字列表區塊 (Red Numbered Process Blocks) */
.ao-numbered-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 50px;
}

.ao-number-card {
  background: var(--ao-card-bg);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(6, 55, 121, 0.06);
  padding: 32px 26px;
  box-shadow: 0 8px 25px rgba(6, 55, 121, 0.04);
  transition: var(--transition);
}

.ao-number-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(6, 55, 121, 0.1);
  border-color: rgba(6, 103, 172, 0.4);
}

.ao-number-digit {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--ao-red);
  line-height: 1;
  margin-bottom: 14px;
}

.ao-number-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ao-navy);
  margin-bottom: 8px;
}

.ao-number-desc {
  font-size: 0.9rem;
  color: var(--ao-text-secondary);
  line-height: 1.6;
}

/* 詳情頁面專用組件 (Detailed Sub-Page Components) */
.detail-content-wrapper {
  background: var(--ao-card-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ao-border);
  padding: 48px;
  box-shadow: var(--shadow-card);
  margin-bottom: 40px;
}

@media (max-width: 600px) {
  .detail-content-wrapper {
    padding: 28px 18px;
    border-radius: 18px;
  }
}

.detail-section-title {
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--ao-navy);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.detail-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 40px;
}

.detail-img-box {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--ao-border);
  cursor: pointer;
  transition: var(--transition);
}

.detail-img-box:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: var(--ao-red);
}

.detail-img-box img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.detail-img-box:hover img {
  transform: scale(1.06);
}

.bi-etl-table-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(35, 125, 177, 0.15);
  background:
    radial-gradient(circle at 96% 4%, rgba(126, 96, 222, 0.11), transparent 25%),
    radial-gradient(circle at 4% 96%, rgba(30, 184, 160, 0.1), transparent 27%),
    #ffffff;
}

.bi-etl-table-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, #13aa9a 0 25%, #148bd2 25% 50%, #7864dc 50% 75%, #f28b4b 75% 100%);
  content: "";
}

.bi-etl-table-card > h3 {
  background: linear-gradient(90deg, #06427f, #087fae 48%, #7358ca 78%, #dc713b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.bi-etl-color-table {
  overflow: hidden;
  border: 1px solid rgba(24, 111, 166, 0.16);
  border-radius: 17px;
  border-collapse: separate !important;
  border-spacing: 0;
  box-shadow: 0 15px 36px rgba(25, 83, 122, 0.09);
}

.bi-etl-color-table thead th {
  color: #ffffff;
  border-bottom: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.bi-etl-color-table thead th:first-child {
  background: linear-gradient(135deg, #078f8c, #19b7a6);
}

.bi-etl-color-table thead th:nth-child(2) {
  background: linear-gradient(135deg, #087abd, #319fdc);
}

.bi-etl-color-table thead th:nth-child(3) {
  background: linear-gradient(135deg, #6756c5, #8b72e2);
}

.bi-etl-color-table tbody tr:nth-child(1) { --etl-row: #18a99b; }
.bi-etl-color-table tbody tr:nth-child(2) { --etl-row: #258bd0; }
.bi-etl-color-table tbody tr:nth-child(3) { --etl-row: #8264d5; }
.bi-etl-color-table tbody tr:nth-child(4) { --etl-row: #ef8a48; }

.bi-etl-color-table tbody td {
  border-bottom-color: rgba(19, 85, 125, 0.09);
  border-right: 1px solid rgba(19, 85, 125, 0.07);
  background: rgba(255, 255, 255, 0.88);
  transition: background .25s ease, transform .25s ease;
}

.bi-etl-color-table tbody td:first-child {
  color: color-mix(in srgb, var(--etl-row) 78%, #073f7e);
  background: color-mix(in srgb, var(--etl-row) 11%, white);
  box-shadow: inset 5px 0 0 var(--etl-row);
}

.bi-etl-color-table tbody td:nth-child(2) {
  background: color-mix(in srgb, var(--etl-row) 4%, white);
}

.bi-etl-color-table tbody td:nth-child(3) {
  background: color-mix(in srgb, var(--etl-row) 8%, white);
}

.bi-etl-color-table tbody tr:hover td {
  background: color-mix(in srgb, var(--etl-row) 15%, white);
}

.bi-etl-color-table tbody tr:last-child td {
  border-bottom: 0;
}

.feature-spec-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 0.92rem;
}

.feature-spec-table th,
.feature-spec-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--ao-border);
  text-align: left;
}

.feature-spec-table th {
  background: var(--ao-paper);
  color: var(--ao-navy);
  font-weight: 800;
}

.feature-spec-table tr:hover td {
  background: rgba(6, 103, 172, 0.04);
}

/* ==========================================================================`r`n   化工石化專用實績藝廊 & Atomic Object 風格超廣角燈箱 (Native Lightbox)
   ========================================================================== */

.chemical-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 36px;
}

.chemical-gallery-card {
  position: relative;
  background: var(--ao-card-bg);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(6, 55, 121, 0.06);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(6, 55, 121, 0.05);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.chemical-gallery-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(6, 55, 121, 0.12);
  border-color: rgba(6, 103, 172, 0.35);
}

.chemical-gallery-img-wrap {
  position: relative;
  overflow: hidden;
}

.chemical-gallery-img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.chemical-gallery-card:hover .chemical-gallery-img {
  transform: scale(1.08);
}

/* 放大提示徽章 (Zoom Hover Badge) */
.zoom-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--ao-navy);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(-6px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  z-index: 5;
}

.chemical-gallery-card:hover .zoom-badge,
.detail-img-box:hover .zoom-badge {
  opacity: 1;
  transform: translateY(0);
}

.chemical-gallery-body {
  padding: 22px;
}

.chemical-gallery-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ao-navy);
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.chemical-gallery-card:hover .chemical-gallery-title {
  color: var(--ao-red);
}

.chemical-gallery-desc {
  font-size: 0.88rem;
  color: var(--ao-text-secondary);
  line-height: 1.6;
}

/* 全螢幕原圖大畫質無高度縮放限制燈箱 (Full Width Native Lightbox) */
.lightbox-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 55, 121, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 16px;
}

.lightbox-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-container {
  position: relative;
  max-width: 1400px;
  width: 98vw;
  max-height: 94vh;
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.lightbox-backdrop.active .lightbox-container {
  transform: scale(1) translateY(0);
}

.lightbox-header {
  padding: 16px 28px;
  background: var(--ao-navy);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lightbox-title {
  color: #ffffff;
  font-weight: 800;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lightbox-close {
  color: rgba(255, 255, 255, 0.7);
  font-size: 2.2rem;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transition: var(--transition);
  cursor: pointer;
}

.lightbox-close:hover {
  color: #ffffff;
  background: var(--ao-red);
  transform: rotate(90deg);
}

.lightbox-body {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #063779;
  flex-grow: 1;
  max-height: 82vh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.lightbox-img {
  width: 100%;
  max-width: 1250px;
  height: auto;
  max-height: none;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.lightbox-img.fit-screen {
  max-height: 78vh !important;
  width: auto !important;
  max-width: 100% !important;
}

.lightbox-footer {
  padding: 14px 28px;
  background: var(--ao-navy);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.92rem;
  text-align: center;
}

/* Industry Cards Grid - Atomic Object Style */
.industries-section {
  background: var(--ao-paper);
  border-bottom: 1px solid var(--ao-border);
}

.industry-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.industry-card {
  background: var(--ao-card-bg);
  border-radius: var(--radius-lg);
  border: none;
  box-shadow: 0 10px 30px rgba(6, 55, 121, 0.04);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.industry-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(6, 55, 121, 0.1);
}

.industry-card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-bottom: none;
  transition: var(--transition);
}

.industry-card:hover .industry-card-img {
  transform: scale(1.04);
}

.industry-card-content {
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.industry-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.industry-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(145deg, #ffffff 0%, rgba(81, 176, 209, 0.14) 100%);
  color: #0667AC;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 9px 22px rgba(6, 55, 121, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.industry-tag-badge {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--ao-red);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.industry-title {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--ao-navy);
}

.industry-desc {
  font-size: 0.95rem;
  color: var(--ao-text-secondary);
  line-height: 1.65;
  margin-bottom: 28px;
}

/* Argo Banner */
.argo-banner {
  margin-top: 50px;
  background: var(--ao-navy);
  border-radius: var(--radius-lg);
  padding: 45px;
  color: #ffffff;
  box-shadow: 0 20px 50px rgba(6, 55, 121, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.argo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}

.argo-module-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 24px;
  transition: var(--transition);
}

.argo-module-card:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--ao-red);
  transform: translateY(-4px);
}

.argo-module-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ao-red);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.argo-module-list {
  list-style: none;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
}

.argo-module-list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 6px;
}

.argo-module-list li::before {
  content: '•';
  color: var(--ao-red);
  position: absolute;
  left: 0;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
}

.status-pill.green {
  background: rgba(16, 185, 129, 0.15);
  color: var(--status-green);
}

.status-pill.yellow {
  background: rgba(245, 158, 11, 0.15);
  color: var(--status-yellow);
}

.status-pill.red {
  background: rgba(239, 68, 68, 0.15);
  color: var(--status-red);
}

/* About Section */
.about-section {
  background: var(--ao-card-bg);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.about-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 30px;
}

.feature-box {
  background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
  border-radius: 18px;
  padding: 24px;
  border: none;
  border-left: 4px solid var(--ao-red);
  box-shadow: 0 8px 25px rgba(6, 55, 121, 0.03);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-box:hover {
  transform: translateY(-5px);
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(6, 55, 121, 0.08);
  border-left-color: #51B0D1;
}

.feature-icon {
  font-size: 1.6rem;
  margin-bottom: 10px;
}

.feature-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ao-navy);
  margin-bottom: 6px;
}

.feature-desc {
  font-size: 0.88rem;
  color: var(--ao-text-secondary);
}

/* Timeline */
.timeline-list {
  position: relative;
  padding-left: 30px;
  border-left: 3px solid var(--ao-red);
  margin-top: 30px;
}

.timeline-item {
  position: relative;
  margin-bottom: 30px;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -38px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ao-red);
  box-shadow: 0 0 10px var(--ao-red);
}

.timeline-year {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ao-red);
  margin-bottom: 4px;
}

.timeline-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ao-navy);
}

.timeline-desc {
  font-size: 0.92rem;
  color: var(--ao-text-secondary);
}

/* Software Platforms */
.platforms-section {
  background: #FDFBF7;
}

.platform-nav-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.platform-tab-btn {
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  background: var(--ao-card-bg);
  border: 1px solid rgba(6, 55, 121, 0.06);
  color: var(--ao-text-primary);
  font-weight: 700;
  font-size: 0.92rem;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(6, 55, 121, 0.04);
}

.platform-tab-btn:hover {
  border-color: var(--ao-red);
  color: var(--ao-red);
}

.platform-tab-btn.active {
  background: var(--ao-navy);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 8px 25px rgba(6, 55, 121, 0.15);
}

.platform-content-panel {
  display: none;
  animation: fadeIn 0.4s ease-out;
}

.platform-content-panel.active {
  display: block;
}

.platform-showcase {
  background: var(--ao-card-bg);
  border-radius: 20px;
  border: none;
  padding: 45px;
  box-shadow: 0 12px 35px rgba(6, 55, 121, 0.05);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.platform-info-title {
  font-size: 1.85rem;
  font-weight: 900;
  color: var(--ao-navy);
  margin-bottom: 16px;
}

.platform-info-desc {
  font-size: 1.05rem;
  color: var(--ao-text-secondary);
  margin-bottom: 24px;
  line-height: 1.7;
}

.platform-spec-list {
  list-style: none;
  margin-bottom: 28px;
}

.platform-spec-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  font-size: 0.95rem;
  color: var(--ao-text-primary);
}

.platform-spec-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--ao-red);
  font-weight: bold;
}

.platform-card-visual {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(6, 55, 121, 0.12);
  border: none;
  background: var(--ao-navy);
}

.platform-card-visual img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
  transition: var(--transition);
}

.platform-card-visual:hover img {
  transform: scale(1.03);
}

/* Technical Services & Software Platform Cards (無邊框現代感卡片) */
.services-section {
  background: var(--ao-card-bg);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.service-card {
  background: #ffffff;
  border-radius: 20px;
  border: none;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 35px rgba(6, 55, 121, 0.05);
  position: relative;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0667AC 0%, #51B0D1 50%, #D4AF37 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 2;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 28px 60px rgba(6, 55, 121, 0.12);
}

.service-card:hover::before {
  opacity: 1;
}

.service-card-img {
  width: 100%;
  height: 185px;
  object-fit: cover;
  border-bottom: none;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card:hover .service-card-img {
  transform: scale(1.06);
}

.service-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.service-icon-wrap {
  width: 48px;
  height: 48px;
  background: rgba(6, 103, 172, 0.08);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--ao-red);
  margin-bottom: 16px;
  transition: var(--transition);
}

.service-card:hover .service-icon-wrap {
  background: var(--ao-red);
  color: #ffffff;
  box-shadow: var(--shadow-red);
}

.service-title {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--ao-navy);
  margin-bottom: 10px;
}

.service-desc {
  font-size: 0.9rem;
  color: var(--ao-text-secondary);
  margin-bottom: 24px;
  line-height: 1.6;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.service-tag {
  background: rgba(6, 55, 121, 0.05);
  color: var(--ao-navy);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}

/* Hardware Grid */
.product-hardware-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.hardware-card {
  background: var(--ao-card-bg);
  border-radius: var(--radius-lg);
  border: none;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(6, 55, 121, 0.04);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.hardware-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(6, 55, 121, 0.1);
}

.hardware-card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: #f8fafc;
}

.hardware-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.hardware-cat {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--ao-red);
  text-transform: uppercase;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.hardware-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ao-navy);
  margin-bottom: 8px;
}

.hardware-desc {
  font-size: 0.88rem;
  color: var(--ao-text-secondary);
  margin-bottom: 16px;
  line-height: 1.5;
}

.hardware-specs {
  font-size: 0.8rem;
  background: var(--ao-paper);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--ao-text-primary);
  margin-top: auto;
}

/* Cases & News - Atomic Object Card Style */
.cases-section {
  background: var(--ao-paper);
}

.cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.case-card {
  background: var(--ao-card-bg);
  border-radius: var(--radius-lg);
  border: none;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(6, 55, 121, 0.04);
  transition: var(--transition);
}

.case-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(6, 55, 121, 0.1);
}

.case-card-img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.case-card-body {
  padding: 26px;
}

.case-cat {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ao-red);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.case-title {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--ao-navy);
  margin-bottom: 10px;
  line-height: 1.35;
}

.case-desc {
  font-size: 0.9rem;
  color: var(--ao-text-secondary);
  line-height: 1.6;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.news-card {
  background: var(--ao-card-bg);
  border-radius: var(--radius-lg);
  border: none;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(6, 55, 121, 0.04);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.news-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(6, 55, 121, 0.1);
}

.news-card-img-wrap {
  position: relative;
  width: 100%;
  height: 210px;
  overflow: hidden;
  cursor: pointer;
  background: #063779;
}

.news-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.news-card:hover .news-card-img {
  transform: scale(1.05);
}

.news-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--ao-red);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(6, 103, 172, 0.3);
}

.news-card-body {
  padding: 26px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.news-date {
  font-size: 0.82rem;
  color: var(--ao-red);
  font-weight: 800;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.news-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--ao-navy);
  margin-bottom: 10px;
  line-height: 1.4;
}

.news-snippet {
  font-size: 0.9rem;
  color: var(--ao-text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
}

.news-thumbs {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(6, 55, 121, 0.08);
  flex-wrap: wrap;
}

.news-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  position: relative;
}

.news-thumb:hover {
  border-color: var(--ao-red);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.construction-event-title-line {
  display: inline-block;
  white-space: nowrap;
  font-size: 0.84em;
  letter-spacing: -1.2px;
  color: #FFFFFF !important;
}

.construction-event-home-mobile-break {
  display: none;
}

.hero-slide[data-slide-index="5"].active .hero-title {
  opacity: 1;
  transform: none;
  animation: none;
}

.yushan-news-card .news-card-img-wrap,
.goldentorch-news-card .news-card-img-wrap {
  height: 380px;
}

.goldentorch-news-card .news-card-img {
  object-fit: contain;
}

/* 台科大營造業 AI 智慧戰情神經中樞分享會 */
.construction-ai-news-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(0, 1.35fr);
  border: 1px solid rgba(6, 103, 172, 0.16);
  background: linear-gradient(135deg, #FFFFFF 0%, #F5FAFF 100%);
}

.construction-ai-news-card .news-card-img-wrap {
  height: auto;
  min-height: 390px;
}

.construction-ai-news-card .news-card-img {
  object-position: center;
}

.construction-ai-news-badge {
  background: linear-gradient(135deg, #0877B8 0%, #064B83 100%);
}

.construction-ai-detail-hero {
  background: linear-gradient(135deg, #031D3D 0%, #075B91 62%, #0E8394 100%);
}

.construction-ai-detail-container {
  max-width: 1180px;
}

.construction-ai-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.55fr);
  gap: 46px;
  align-items: center;
  margin-bottom: 76px;
}

.construction-ai-kicker {
  color: #0877B8;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.construction-ai-intro h2,
.construction-ai-section-heading h2 {
  color: var(--ao-navy);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.28;
  font-weight: 900;
  margin-bottom: 18px;
}

.construction-ai-intro p {
  color: var(--ao-text-secondary);
  font-size: 1rem;
  line-height: 1.85;
  margin-bottom: 14px;
}

.construction-ai-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 26px;
}

.construction-ai-meta > div {
  background: #F2F8FC;
  border: 1px solid rgba(6, 103, 172, 0.12);
  border-radius: 12px;
  padding: 14px 16px;
}

.construction-ai-meta dt {
  color: #0877B8;
  font-size: 0.76rem;
  font-weight: 900;
  margin-bottom: 4px;
}

.construction-ai-meta dd {
  color: var(--ao-navy);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

.construction-ai-poster,
.construction-ai-slide-card button,
.construction-ai-gallery button {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.construction-ai-poster {
  display: block;
  width: min(100%, 360px);
  justify-self: center;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(6, 55, 121, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.construction-ai-poster:hover,
.construction-ai-poster:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 28px 70px rgba(6, 55, 121, 0.24);
}

.construction-ai-poster img {
  display: block;
  width: 100%;
  height: auto;
}

.construction-ai-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 26px;
}

.construction-ai-section-heading h2 {
  margin-bottom: 0;
}

.construction-ai-section-heading > p {
  max-width: 420px;
  color: var(--ao-text-secondary);
  line-height: 1.75;
}

.construction-ai-slide-grid {
  display: grid;
  gap: 26px;
  margin-bottom: 80px;
}

.construction-ai-slide-card {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  align-items: stretch;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid rgba(6, 103, 172, 0.14);
  border-radius: 22px;
  box-shadow: 0 14px 36px rgba(6, 55, 121, 0.08);
}

.construction-ai-slide-card button {
  min-height: 300px;
  overflow: hidden;
  background: #EAF2F7;
}

.construction-ai-slide-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.35s ease;
}

.construction-ai-slide-card button:hover img,
.construction-ai-slide-card button:focus-visible img {
  transform: scale(1.025);
}

.construction-ai-slide-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
}

.construction-ai-slide-copy span {
  color: #0877B8;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.construction-ai-slide-copy h3 {
  color: var(--ao-navy);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.4;
  margin-bottom: 12px;
}

.construction-ai-slide-copy p {
  color: var(--ao-text-secondary);
  line-height: 1.75;
}

.construction-ai-gallery-heading {
  margin-bottom: 24px;
}

.construction-ai-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 54px;
}

.construction-ai-gallery button {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  border-radius: 18px;
  background: #062C59;
  box-shadow: 0 12px 30px rgba(6, 55, 121, 0.1);
}

.construction-ai-gallery-featured,
.construction-ai-gallery-wide {
  grid-column: 1 / -1;
}

.construction-ai-gallery-featured {
  min-height: 480px !important;
}

.construction-ai-gallery-wide {
  min-height: 430px !important;
}

.construction-ai-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.construction-ai-gallery button:hover img,
.construction-ai-gallery button:focus-visible img {
  transform: scale(1.035);
  opacity: 0.9;
}

.construction-ai-gallery button span {
  position: absolute;
  left: 16px;
  bottom: 16px;
  color: #FFFFFF;
  background: rgba(3, 29, 61, 0.82);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 800;
}

.construction-ai-detail-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 30px;
  border-top: 1px solid var(--ao-border);
}

.construction-ai-detail-actions .btn-primary,
.construction-ai-detail-actions .btn-secondary {
  padding: 12px 28px;
  font-weight: 800;
}

.construction-ai-mobile-break {
  display: none;
}

/* Contact Page */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
}

.contact-info-card {
  background: var(--ao-navy);
  color: #ffffff;
  border-radius: var(--radius-lg);
  padding: 45px;
  box-shadow: var(--shadow-hover);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-info-item {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.contact-info-icon {
  width: 44px;
  height: 44px;
  background: rgba(6, 103, 172, 0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--ao-red);
  flex-shrink: 0;
}

/* CTA Section & Footer - Atomic Object Style */
.cta-section {
  background: var(--ao-navy);
  color: #ffffff;
  padding: 100px 0;
  text-align: center;
}

.cta-title {
  font-size: 2.7rem;
  font-weight: 900;
  margin-bottom: 18px;
  letter-spacing: -0.8px;
}

.cta-desc {
  max-width: 760px;
  margin: 0 auto 36px;
  font-size: 1.05rem;
  line-height: 1.75;
  opacity: 0.9;
}

.cta-desc-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  opacity: 0.9;
  margin-bottom: 36px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Logistic & Barcode 產業詳細頁 */
.logistics-barcode-page {
  --logistics-accent: #0f8f8b;
  --logistics-accent-dark: #086a68;
  --logistics-warm: #f1b53a;
}

.logistics-barcode-hero {
  padding: 92px 0 72px;
  overflow: hidden;
}

.logistics-barcode-hero-grid,
.logistics-barcode-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.92fr);
  gap: clamp(40px, 6vw, 76px);
  align-items: center;
}

.logistics-barcode-hero-copy {
  position: relative;
  z-index: 2;
}

.logistics-barcode-hero-copy .page-hero-title {
  max-width: 720px;
  margin: 18px 0;
  text-wrap: balance;
}

.logistics-barcode-hero-copy .page-hero-subtitle {
  max-width: 700px;
  line-height: 1.85;
}

.logistics-barcode-hero-copy .breadcrumb {
  margin-top: 28px;
}

.logistics-barcode-hero-tags,
.logistics-barcode-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.logistics-barcode-hero-tags {
  margin-top: 26px;
}

.logistics-barcode-hero-tags span {
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.logistics-barcode-hero-actions {
  margin-top: 34px;
  gap: 14px;
}

.logistics-barcode-hero-actions .btn-primary,
.logistics-barcode-hero-actions .btn-secondary {
  min-height: 52px;
  justify-content: center;
  border: 0;
}

.logistics-barcode-hero-visual,
.logistics-barcode-media,
.logistics-barcode-process-figure,
.logistics-barcode-gallery figure,
.logistics-barcode-shipping-demo figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(6, 55, 121, 0.1);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 22px 55px rgba(4, 42, 92, 0.16);
}

.logistics-barcode-page [data-lightbox-src] {
  cursor: zoom-in;
}

.logistics-barcode-page [data-lightbox-src]::after {
  content: "點擊放大";
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(6, 55, 121, 0.88);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.logistics-barcode-page [data-lightbox-src]:hover::after,
.logistics-barcode-page [data-lightbox-src]:focus-within::after {
  opacity: 1;
  transform: translateY(0);
}

.logistics-barcode-hero-visual {
  position: relative;
  z-index: 2;
}

.logistics-barcode-hero-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.logistics-barcode-hero-visual figcaption,
.logistics-barcode-media figcaption {
  padding: 13px 18px;
  background: #fff;
  color: var(--ao-navy);
  font-size: 0.86rem;
  font-weight: 800;
}

.logistics-barcode-kicker {
  margin-bottom: 12px;
  color: var(--logistics-accent-dark);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.logistics-barcode-copy h2,
.logistics-barcode-section-heading h2 {
  color: var(--ao-navy);
  font-size: clamp(2rem, 3vw, 3.1rem);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.logistics-barcode-copy > p,
.logistics-barcode-section-heading > p,
.logistics-barcode-shipping-demo p,
.logistics-barcode-cta p {
  margin-top: 20px;
  color: var(--ao-text-secondary);
  font-size: 1.02rem;
  line-height: 1.85;
}

.logistics-barcode-list {
  display: grid;
  gap: 14px;
  margin-top: 28px;
  list-style: none;
}

.logistics-barcode-list li {
  display: grid;
  gap: 4px;
  padding: 17px 20px;
  border-left: 4px solid var(--logistics-accent);
  border-radius: 0 14px 14px 0;
  background: rgba(15, 143, 139, 0.07);
}

.logistics-barcode-list strong {
  color: var(--ao-navy);
  font-size: 1rem;
}

.logistics-barcode-list span {
  color: var(--ao-text-secondary);
  font-size: 0.9rem;
  line-height: 1.55;
}

.logistics-barcode-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.logistics-barcode-media-software img,
.logistics-barcode-media-dashboard img {
  aspect-ratio: 4 / 3;
  background: #f4f7fa;
}

.logistics-barcode-section-heading {
  max-width: 860px;
  margin: 0 auto 42px;
  text-align: center;
}

.logistics-barcode-section-heading > p {
  margin-right: auto;
  margin-left: auto;
}

.logistics-barcode-process-figure {
  padding: 22px;
  box-shadow: var(--shadow-card);
}

.logistics-barcode-process-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.logistics-barcode-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 28px;
}

.logistics-barcode-capability-grid article {
  padding: 28px;
  border: 1px solid rgba(6, 55, 121, 0.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.logistics-barcode-capability-grid article > span {
  display: block;
  margin-bottom: 16px;
  color: var(--logistics-accent);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.logistics-barcode-capability-grid h3 {
  margin-bottom: 10px;
  color: var(--ao-navy);
  font-size: 1.22rem;
}

.logistics-barcode-capability-grid p {
  color: var(--ao-text-secondary);
  font-size: 0.92rem;
  line-height: 1.7;
}

.logistics-barcode-split-reverse {
  grid-template-columns: minmax(420px, 0.92fr) minmax(0, 1fr);
}

.logistics-barcode-product-photo img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.logistics-barcode-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 30px;
}

.logistics-barcode-facts div {
  padding: 18px;
  border: 1px solid rgba(6, 55, 121, 0.09);
  border-radius: 14px;
  background: #fff;
}

.logistics-barcode-facts strong,
.logistics-barcode-facts span {
  display: block;
}

.logistics-barcode-facts strong {
  margin-bottom: 5px;
  color: var(--ao-navy);
  font-size: 0.96rem;
}

.logistics-barcode-facts span {
  color: var(--ao-text-secondary);
  font-size: 0.84rem;
  line-height: 1.5;
}

.logistics-barcode-warehouse-flow {
  max-width: 1060px;
  margin-right: auto;
  margin-left: auto;
}

.logistics-barcode-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
  gap: 22px;
  margin-top: 30px;
}

.logistics-barcode-gallery-main img {
  display: block;
  width: 100%;
  height: 640px;
  object-fit: contain;
  background: #f2f5f8;
}

.logistics-barcode-gallery figcaption {
  display: grid;
  gap: 4px;
  padding: 14px 18px;
  color: var(--ao-navy);
}

.logistics-barcode-gallery figcaption span {
  color: var(--ao-text-secondary);
  font-size: 0.84rem;
}

.logistics-barcode-gallery-stack {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.logistics-barcode-gallery-stack img {
  display: block;
  width: 100%;
  height: 278px;
  object-fit: contain;
  background: #f2f5f8;
}

.logistics-barcode-list-compact {
  gap: 10px;
}

.logistics-barcode-list-compact li {
  padding: 14px 18px;
}

.logistics-barcode-shipping-demo {
  display: grid;
  grid-template-columns: minmax(260px, 0.5fr) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  margin-top: 52px;
  padding: 34px;
  border-radius: 22px;
  background: var(--ao-navy);
  color: #fff;
}

.logistics-barcode-shipping-demo figure {
  max-height: 520px;
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}

.logistics-barcode-shipping-demo img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  background: #f4f7fa;
}

.logistics-barcode-shipping-demo span {
  color: #8eddd7;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.logistics-barcode-shipping-demo h3 {
  margin-top: 10px;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.2;
}

.logistics-barcode-shipping-demo p {
  color: rgba(255, 255, 255, 0.78);
}

.logistics-barcode-cta-section {
  padding-top: 28px;
}

.logistics-barcode-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding: 48px 54px;
  border: 1px solid rgba(15, 143, 139, 0.16);
  border-radius: 24px;
  background: linear-gradient(135deg, #eaf8f7 0%, #f7fcfc 58%, #eaf3fb 100%);
}

.logistics-barcode-cta > div {
  max-width: 820px;
}

.logistics-barcode-cta > div > span {
  color: var(--logistics-accent-dark);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.logistics-barcode-cta h2 {
  margin-top: 8px;
  color: var(--ao-navy);
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 1.22;
}

.logistics-barcode-cta .btn-primary {
  flex: 0 0 auto;
  justify-content: center;
}

@media (max-width: 1080px) {
  .logistics-barcode-hero-grid,
  .logistics-barcode-split,
  .logistics-barcode-split-reverse {
    grid-template-columns: minmax(0, 1fr);
  }

  .logistics-barcode-hero-visual {
    max-width: 760px;
  }

  .logistics-barcode-capability-grid,
  .logistics-barcode-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .logistics-barcode-gallery {
    grid-template-columns: minmax(0, 1fr);
  }

  .logistics-barcode-gallery-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .logistics-barcode-cta {
    align-items: stretch;
    flex-direction: column;
  }

  .logistics-barcode-cta .btn-primary {
    width: fit-content;
  }
}

@media (max-width: 720px) {
  .logistics-barcode-hero {
    padding: 68px 0 54px;
  }

  .logistics-barcode-hero-actions,
  .logistics-barcode-hero-actions .btn-primary,
  .logistics-barcode-hero-actions .btn-secondary {
    width: 100%;
  }

  .logistics-barcode-capability-grid,
  .logistics-barcode-facts,
  .logistics-barcode-gallery-stack,
  .logistics-barcode-shipping-demo {
    grid-template-columns: minmax(0, 1fr);
  }

  .logistics-barcode-process-figure {
    padding: 10px;
    border-radius: 14px;
  }

  .logistics-barcode-gallery-main img,
  .logistics-barcode-gallery-stack img {
    height: auto;
    max-height: 560px;
  }

  .logistics-barcode-shipping-demo {
    padding: 24px;
  }

  .logistics-barcode-cta {
    padding: 34px 24px;
  }

  .logistics-barcode-cta .btn-primary {
    width: 100%;
  }
}

.footer {
  background: var(--ao-dark);
  color: rgba(255, 255, 255, 0.65);
  padding: 56px 0 36px 0;
  font-size: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-brand-logo {
  display: block;
  width: min(100%, 260px);
  height: auto;
  margin-bottom: 18px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-col-title {
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 18px;
  letter-spacing: 0.5px;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  transition: var(--transition);
  cursor: pointer;
}

.footer-links a:hover {
  color: var(--ao-red);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 55, 121, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-container {
  background: #ffffff;
  width: 90%;
  max-width: 640px;
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35);
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.modal-backdrop.active .modal-container {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 1.8rem;
  color: var(--ao-text-primary);
  opacity: 0.5;
  transition: var(--transition);
}

.modal-close:hover {
  opacity: 1;
  color: var(--ao-red);
}

.modal-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--ao-navy);
  margin-bottom: 8px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ao-navy);
  margin-bottom: 6px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--ao-border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  transition: var(--transition);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--ao-red);
  box-shadow: 0 0 0 3px rgba(6, 103, 172, 0.15);
}

/* ==========================================================================`r`n   營造智慧戰情神經中樞 (AI COO) 互動架構元件樣式
   ========================================================================== */

.arch-explorer-wrapper {
  background: var(--ao-card-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ao-border);
  padding: 40px;
  box-shadow: var(--shadow-card);
  margin-bottom: 50px;
}

.arch-node-nav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 30px;
  border-bottom: 2px solid var(--ao-border);
  padding-bottom: 16px;
}

.arch-node-btn {
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  background: var(--ao-paper);
  border: 1px solid var(--ao-border);
  color: var(--ao-text-primary);
  font-weight: 700;
  font-size: 0.92rem;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.arch-node-btn:hover {
  border-color: var(--ao-red);
  color: var(--ao-red);
}

.arch-node-btn.active {
  background: var(--ao-navy);
  color: #ffffff;
  border-color: transparent;
  box-shadow: var(--shadow-card);
}

.arch-node-btn.active .btn-badge-digit {
  background: var(--ao-red);
  color: #ffffff;
}

.btn-badge-digit {
  background: rgba(6, 55, 121, 0.1);
  color: var(--ao-navy);
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.arch-node-panel {
  display: none;
  animation: fadeIn 0.4s ease-out;
}

.arch-node-panel.active {
  display: block;
}

.sensor-stream-box {
  background: var(--ao-navy);
  color: #ffffff;
  border-radius: var(--radius-md);
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.3);
    opacity: 0.6;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ==========================================================================`r`n   炫彩全螢幕原圖大畫質燈箱 Modal (Full-Resolution Lightbox Modal)
   ========================================================================== */
.lightbox-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(6, 14, 24, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  visibility: hidden;
  padding: 20px;
}

.lightbox-backdrop.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.lightbox-container {
  background: rgba(11, 23, 36, 0.95);
  border: 1px solid rgba(81, 176, 209, 0.35);
  border-radius: var(--radius-lg);
  width: 95vw;
  max-width: 1360px;
  height: 92vh;
  max-height: 920px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 50px rgba(81, 176, 209, 0.15), 0 30px 80px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  position: relative;
  animation: lightboxCyberZoom 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes lightboxCyberZoom {
  from {
    transform: scale(0.95);
    opacity: 0;
    filter: blur(8px);
  }

  to {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

.lightbox-header {
  padding: 16px 28px;
  background: rgba(6, 55, 121, 0.9);
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(81, 176, 209, 0.25);
  backdrop-filter: blur(10px);
}

.lightbox-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.5px;
}

.lightbox-close {
  background: rgba(6, 103, 172, 0.15);
  border: 1px solid rgba(6, 103, 172, 0.3);
  color: #ffffff;
  font-size: 1.4rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.9;
  transition: all 0.2s ease;
  line-height: 1;
}

.lightbox-close:hover {
  opacity: 1;
  background: var(--ao-red);
  border-color: var(--ao-red);
  color: #ffffff;
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 0 15px rgba(6, 103, 172, 0.5);
}

.lightbox-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: radial-gradient(circle at center, #0d1e2e 0%, #060e18 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  position: relative;
}

.lightbox-img {
  max-width: 95%;
  max-height: calc(82vh - 160px);
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 30px rgba(81, 176, 209, 0.1);
  transition: transform 0.3s ease, opacity 0.3s ease;
  cursor: zoom-in;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.lightbox-img.fit-screen {
  max-height: calc(88vh - 140px);
  object-fit: contain;
}

.lightbox-footer {
  padding: 12px 24px;
  background: rgba(11, 23, 36, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
}

/* Lightbox Image Gallery Navigation Buttons */
.lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(11, 23, 36, 0.85);
  border: 1px solid rgba(81, 176, 209, 0.4);
  color: var(--cyan);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 110;
  transition: all 0.25s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 20px rgba(81, 176, 209, 0.2), 0 8px 24px rgba(0, 0, 0, 0.5);
  user-select: none;
}

.lightbox-nav-btn:hover {
  background: var(--ao-red);
  border-color: var(--ao-red);
  color: #ffffff;
  transform: translateY(-50%) scale(1.12);
  box-shadow: 0 0 25px rgba(6, 103, 172, 0.6);
}

.lightbox-nav-btn.prev-btn {
  left: 24px;
}

.lightbox-nav-btn.next-btn {
  right: 24px;
}

.lightbox-counter {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--cyan);
  background: rgba(81, 176, 209, 0.15);
  border: 1px solid rgba(81, 176, 209, 0.35);
  padding: 4px 12px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.5px;
}

.lightbox-mode-btn {
  background: rgba(81, 176, 209, 0.15);
  border: 1px solid rgba(81, 176, 209, 0.4);
  color: var(--cyan);
  padding: 7px 18px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.lightbox-mode-btn:hover {
  background: rgba(81, 176, 209, 0.35);
  border-color: var(--cyan);
  color: #ffffff;
  box-shadow: 0 0 15px rgba(81, 176, 209, 0.4);
  transform: translateY(-1px);
}

/* Lightbox Filmstrip Thumbnails Strip */
.lightbox-filmstrip {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 10px 24px;
  background: rgba(7, 16, 26, 0.95);
  border-top: 1px solid rgba(81, 176, 209, 0.2);
  overflow-x: auto;
}

.lightbox-filmstrip-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.15);
  opacity: 0.5;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.lightbox-filmstrip-thumb:hover {
  opacity: 0.85;
  border-color: var(--cyan);
  transform: translateY(-2px);
}

.lightbox-filmstrip-thumb.active {
  opacity: 1;
  border-color: var(--ao-red);
  box-shadow: 0 0 12px rgba(6, 103, 172, 0.6);
  transform: scale(1.08);
}

.lightbox-filmstrip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 640px) {
  .lightbox-backdrop {
    padding: 8px;
  }

  .lightbox-container {
    width: 100%;
    height: calc(100dvh - 16px);
    border-radius: 16px;
  }

  .lightbox-header {
    padding: 10px 12px;
    gap: 8px;
  }

  .lightbox-header > div:first-child {
    min-width: 0;
    flex: 1;
  }

  .lightbox-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
  }

  .lightbox-counter,
  .lightbox-mode-btn {
    display: none !important;
  }

  .lightbox-header > div:last-child {
    flex: 0 0 auto;
    gap: 0 !important;
  }

  .lightbox-body {
    min-height: 0;
    padding: 10px;
  }

  .lightbox-footer {
    padding: 10px 12px;
    font-size: 0.8rem;
  }
}

/* ==========================================================================`r`n   戰情中心現場施工與一條龍品質保證 (Turnkey Construction Showcase)
   ========================================================================== */
.command-qa-filter-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.command-ai-disclosure {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 30px;
  padding: 14px 16px;
  border: 1px solid rgba(6, 103, 172, 0.18);
  border-radius: 14px;
  background: rgba(81, 176, 209, 0.08);
  color: var(--ao-text-secondary);
  font-size: 0.9rem;
  line-height: 1.65;
}

.command-ai-disclosure p {
  margin: 0;
}

.command-ai-disclosure strong {
  color: var(--ao-navy);
}

.command-ai-disclosure-icon {
  flex: 0 0 auto;
  line-height: 1.65;
}

.command-qa-filter-btn {
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ao-border);
  background: var(--ao-card-bg);
  color: var(--ao-navy);
  font-weight: 700;
  font-size: 0.9rem;
  transition: var(--transition);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.command-qa-filter-btn:hover,
.command-qa-filter-btn.active {
  background: var(--ao-navy);
  color: #ffffff;
  border-color: var(--ao-navy);
  box-shadow: var(--shadow-card);
}

.command-qa-filter-btn.active {
  background: var(--ao-red);
  border-color: var(--ao-red);
}

.command-qa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.command-qa-card {
  background: var(--ao-card-bg);
  border: 1px solid rgba(6, 55, 121, 0.06);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(6, 55, 121, 0.05);
  transition: var(--transition);
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
}

.command-qa-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(6, 55, 121, 0.12);
  border-color: rgba(6, 103, 172, 0.4);
}

.command-qa-img-wrap {
  position: relative;
  width: 100%;
  padding-top: 66.66%;
  /* 3:2 Aspect Ratio */
  overflow: hidden;
  background: #063779;
}

.command-qa-img-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.command-qa-card.is-ai-redraw .command-qa-img-wrap {
  padding-top: 56.25%;
  /* 16:9 AI 重繪示意圖，完整呈現施工流程畫面 */
}

.command-qa-card:hover .command-qa-img-wrap img {
  transform: scale(1.08);
}

.command-qa-step-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--ao-navy);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Dual View Interactive Switcher */
.dual-img-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.dual-img-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.dual-img-item.active {
  opacity: 1;
  pointer-events: auto;
}

.dual-img-switcher-bar {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  background: rgba(6, 55, 121, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  z-index: 5;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dual-img-switch-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.dual-img-switch-btn.active,
.dual-img-switch-btn:hover {
  background: var(--ao-red);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(6, 103, 172, 0.4);
}

.command-qa-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.command-qa-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ao-navy);
  margin-bottom: 8px;
  line-height: 1.4;
}

.command-qa-desc {
  font-size: 0.88rem;
  color: var(--ao-text-secondary);
  line-height: 1.6;
  margin-bottom: 14px;
  flex: 1;
}

.command-qa-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #10b981;
  padding-top: 12px;
  border-top: 1px solid var(--ao-border);
}

/* RWD */
@media (max-width: 1024px) {
  .command-qa-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================`r`n   Atomic Object Portfolio 左右不同步滾動雙欄特效 (Asynchronous Split-Scroll)
   ========================================================================== */
.atomic-split-scroll-wrapper {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 48px;
  align-items: start;
  position: relative;
  margin-top: 30px;
}

.atomic-sticky-sidebar {
  position: sticky;
  top: 100px;
  background: var(--ao-navy);
  color: #ffffff;
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 10;
  transition: transform 0.3s ease;
}

.atomic-scroll-stream {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.atomic-stream-card {
  background: var(--ao-card-bg);
  border: 1px solid var(--ao-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease;
  position: relative;
}

.atomic-stream-card:nth-child(even) {
  transform: translateY(24px);
}

.atomic-stream-card:hover {
  transform: none;
  box-shadow: var(--shadow-hover);
  border-color: rgba(6, 103, 172, 0.4);
}

.atomic-stream-card:nth-child(even):hover {
  transform: translateY(24px);
}

.atomic-case-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
  padding: 11px 18px;
  border: 1px solid rgba(6, 103, 172, 0.24);
  border-radius: var(--radius-pill);
  background: rgba(6, 103, 172, 0.06);
  color: var(--ao-navy);
  font-size: 0.96rem;
  font-weight: 800;
  transition: var(--transition);
}

.atomic-case-link:hover,
.atomic-case-link:focus-visible {
  border-color: var(--ao-red-hover);
  background: linear-gradient(135deg, var(--ao-red), var(--ao-red-hover));
  color: #ffffff;
  transform: none;
  box-shadow: 0 9px 22px rgba(6, 55, 121, 0.24);
}

@media (max-width: 1024px) {
  .atomic-split-scroll-wrapper {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .atomic-sticky-sidebar {
    position: static;
  }

  .atomic-stream-card:nth-child(even) {
    transform: none;
  }

  .atomic-stream-card:nth-child(even):hover {
    transform: none;
  }
}

/* RWD */
@media (max-width: 1024px) {

  .hero-grid,
  .about-grid,
  .platform-showcase,
  .industry-cards-grid,
  .argo-grid,
  .product-hardware-grid,
  .contact-grid,
  .detail-grid-2col,
  .chemical-gallery-grid,
  .capabilities-grid,
  .ao-numbered-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cases-grid,
  .news-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hero-title {
    font-size: 2.8rem;
  }
}

@media (max-width: 768px) {
  .navbar {
    padding: 0 20px;
    height: 66px;
  }

  .nav-brand-logo {
    width: 168px;
    height: 48px;
  }

  .nav-menu {
    display: none;
  }

  .mobile-nav-toggle {
    display: block;
  }

  .hero-title {
    font-size: 2.3rem;
  }

  .home-hero-dark .hero-title,
  .home-hero-dark .hero-title.hero-title-healthcare {
    font-size: clamp(2.1rem, 9vw, 2.5rem);
    line-height: 1.12;
  }

  /* 漸層副標題獨立佔滿文字欄，避免較長句子在手機版向右溢出。 */
  .home-hero-dark .hero-title > span {
    display: block;
    width: 100%;
    max-width: 100%;
    text-wrap: balance;
    word-break: normal;
    overflow-wrap: break-word;
    line-break: strict;
  }

  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .product-hardware-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* 行內桌機欄數會覆蓋既有 RWD；手機版統一回到單欄，避免頁面被撐寬裁切。 */
  .capabilities-grid[style] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .home-hero-dark .container,
  .hero-carousel-container,
  .hero-slides-wrapper,
  .hero-slide,
  .hero-grid,
  .hero-grid > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .home-hero-dark .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .home-stat-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 最新消息：固定版型與橫式複合篩選 */
#page-news .section-tint {
  background: linear-gradient(180deg, #f3f8fc 0%, #eef6fb 100%);
}

.news-browser {
  display: block;
}

.news-filter-panel {
  position: static;
  display: grid;
  grid-template-columns: minmax(190px, 0.65fr) minmax(0, 2.4fr) auto;
  gap: 24px;
  align-items: end;
  padding: 24px;
  border: 1px solid rgba(6, 103, 172, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 40px rgba(6, 55, 121, 0.08);
}

.news-filter-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--ao-red);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.news-filter-heading h2 {
  margin: 0;
  color: var(--ao-navy);
  font-size: 1.35rem;
  line-height: 1.3;
}

.news-filter-heading p {
  margin: 10px 0 0;
  max-width: 280px;
  color: var(--ao-text-secondary);
  font-size: 0.88rem;
  line-height: 1.65;
}

.news-filter-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 0;
}

.news-filter-field {
  display: grid;
  gap: 8px;
}

.news-filter-field > span:first-child {
  color: var(--ao-navy);
  font-size: 0.82rem;
  font-weight: 900;
}

.news-filter-field select,
.news-search-box {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(6, 55, 121, 0.18);
  border-radius: 11px;
  color: var(--ao-navy);
  background: #f8fbfd;
  font: inherit;
}

.news-filter-field select {
  padding: 0 38px 0 13px;
  cursor: pointer;
}

.news-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

.news-search-box svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: #5b7185;
  stroke-width: 2;
}

.news-search-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ao-navy);
  background: transparent;
  font: inherit;
}

.news-filter-field select:focus,
.news-search-box:focus-within {
  outline: 3px solid rgba(0, 169, 224, 0.18);
  border-color: #0785bd;
}

.news-filter-reset {
  width: auto;
  min-height: 46px;
  margin-top: 0;
  padding: 11px 14px;
  border: 1px solid rgba(6, 103, 172, 0.24);
  border-radius: 10px;
  color: #075f9d;
  background: #fff;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
}

.news-filter-reset:hover {
  color: #fff;
  border-color: #0667ac;
  background: #0667ac;
}

.news-results {
  min-width: 0;
  margin-top: 24px;
}

.news-results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  color: #627487;
  font-size: 0.82rem;
  font-weight: 700;
}

.news-results-toolbar span:first-child {
  color: var(--ao-navy);
  font-weight: 900;
}

#page-news .news-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

#page-news .news-card {
  grid-column: span 4;
  min-width: 0;
  height: 100%;
}

#page-news .news-card-featured {
  grid-column: 1 / -1 !important;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(340px, 0.7fr);
}

#page-news .news-card-half {
  grid-column: span 6 !important;
}

#page-news .news-card-third {
  grid-column: span 4 !important;
}

#page-news .news-card-list {
  grid-column: span 3 !important;
}

#page-news .news-card-hidden {
  display: none !important;
}

#page-news .news-card-featured .news-card-img-wrap {
  height: 100%;
  min-height: 390px;
}

#page-news .news-card-half .news-card-img-wrap {
  height: 300px;
}

#page-news .speaker-news-card .news-card-img {
  object-position: center 32%;
}

#page-news .news-card-half.construction-ai-news-card .news-card-img-wrap {
  height: 300px;
  min-height: 0;
}

#page-news .news-card-third .news-card-img-wrap {
  height: 220px;
}

#page-news .news-card-list .news-card-img-wrap {
  height: 140px;
}

#page-news .construction-ai-news-card {
  display: flex;
  grid-template-columns: none;
  border: 1px solid rgba(6, 103, 172, 0.16);
}

#page-news .news-card-third .news-card-body,
#page-news .news-card-list .news-card-body {
  padding: 22px;
}

#page-news .news-card-third .news-title,
#page-news .news-card-list .news-title {
  font-size: 1.03rem !important;
}

#page-news .news-card-list .news-snippet {
  display: none;
}

#page-news .news-card-list .news-thumbs,
#page-news .news-card-list .news-card-body > div:not(.news-date),
#page-news .news-card-list .news-card-body > a {
  display: none !important;
}

#page-news .news-card-list .news-card-body {
  padding: 18px;
}

#page-news .news-card-list .news-date {
  margin-bottom: 6px;
  font-size: 0.74rem;
}

#page-news .news-card-list .news-title {
  margin-bottom: 0;
  line-height: 1.45;
}

.news-empty-state {
  margin: 0;
  padding: 56px 24px;
  border: 1px dashed rgba(6, 103, 172, 0.3);
  border-radius: 18px;
  color: var(--ao-text-secondary);
  background: rgba(255, 255, 255, 0.72);
  text-align: center;
  font-weight: 700;
}

@media (max-width: 1180px) {
  .news-filter-panel {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .news-filter-heading p {
    max-width: none;
  }

  .news-filter-reset {
    width: fit-content;
  }

  #page-news .news-card-featured {
    grid-template-columns: 1fr;
  }

  #page-news .news-card-featured .news-card-img-wrap {
    height: 360px;
    min-height: 0;
  }
}

@media (max-width: 900px) {
  .news-filter-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #page-news .news-card-half {
    grid-column: 1 / -1 !important;
  }

  #page-news .news-card-third,
  #page-news .news-card-list {
    grid-column: span 6 !important;
  }
}

@media (max-width: 640px) {
  .news-filter-panel {
    padding: 20px;
  }

  .news-filter-controls {
    grid-template-columns: 1fr;
  }

  .news-filter-reset {
    width: 100%;
  }

  .news-results-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  #page-news .news-card-featured,
  #page-news .news-card-half,
  #page-news .news-card-third,
  #page-news .news-card-list {
    grid-column: 1 / -1 !important;
    display: flex;
  }

  #page-news .news-card-featured .news-card-img-wrap,
  #page-news .news-card-half .news-card-img-wrap,
  #page-news .news-card-third .news-card-img-wrap,
  #page-news .news-card-list .news-card-img-wrap {
    height: 230px;
    min-height: 0;
  }
}

/* ==========================================================================`r`n   金鋒獎 (Golden Torch Awards) 榮耀主題與專用 UI 元件樣式
   ========================================================================== */
.award-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(255, 215, 0, 0.12));
  border: 1px solid rgba(255, 215, 0, 0.55);
  border-radius: 50px;
  padding: 8px 22px;
  margin-bottom: 22px;
  box-shadow: 0 4px 25px rgba(212, 175, 55, 0.3);
  text-decoration: none;
  transition: var(--transition);
}

.award-hero-badge:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 30px rgba(212, 175, 55, 0.45);
  border-color: rgba(255, 215, 0, 0.85);
}

.gold-gradient-text {
  background: linear-gradient(135deg, #FFE259 0%, #FFA751 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-badge-pill {
  background: linear-gradient(135deg, #D4AF37 0%, #AA771C 100%);
  color: #FFFFFF;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.award-highlight-card {
  background: #FFFFFF;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-top: 4px solid #D4AF37;
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.08);
  transition: var(--transition);
}

.award-highlight-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(212, 175, 55, 0.18);
  border-color: rgba(212, 175, 55, 0.6);
}

.iso-cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.iso-cert-card {
  background: #FFFFFF;
  border: 1px solid var(--ao-border);
  border-radius: var(--radius-sm);
  padding: 16px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
  cursor: pointer;
}

.iso-cert-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--ao-cyan);
}

.iso-cert-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 12px;
  border: 1px solid rgba(6, 55, 121, 0.08);
}

.iso-cert-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ao-navy);
  margin-bottom: 4px;
}

.iso-cert-desc {
  font-size: 0.76rem;
  color: var(--ao-text-secondary);
}

.feature-table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin: 30px 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--ao-border);
  box-shadow: var(--shadow-soft);
}

.feature-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  text-align: left;
  background: #FFFFFF;
}

.feature-table th {
  background: var(--ao-navy);
  color: #FFFFFF;
  padding: 16px 20px;
  font-weight: 800;
}

.feature-table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--ao-border);
  color: var(--ao-text-primary);
}

.feature-table tr:nth-child(even) td {
  background: #F8F9FA;
}

.feature-table tr:hover td {
  background: rgba(81, 176, 209, 0.05);
}

/* 金鋒獎 23 大圖表互動章節分頁與高級卡片系統 */
.gold-tabs-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  background: #F3F5F8;
  padding: 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ao-border);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.04);
}

.gold-tab-btn {
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ao-text-secondary);
  border: 1px solid transparent;
  background: transparent;
  transition: var(--transition);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.gold-tab-btn:hover {
  color: var(--ao-navy);
  background: rgba(255, 255, 255, 0.7);
}

.gold-tab-btn.active {
  background: linear-gradient(135deg, #042A5C 0%, #063779 100%);
  color: #FFE259;
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 0 4px 15px rgba(6, 55, 121, 0.25);
}

.gold-fig-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 28px;
}

.gold-fig-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--ao-border);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
}

.gold-fig-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(6, 55, 121, 0.12);
  border-color: rgba(212, 175, 55, 0.6);
}

.gold-public-summary {
  margin-bottom: 54px;
}

.gold-public-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr));
  gap: 16px;
}

.gold-public-point {
  min-width: 0;
  padding: 22px 20px;
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(81, 176, 209, 0.06) 100%);
  border: 1px solid rgba(6, 103, 172, 0.16);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.gold-public-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: 12px;
  color: #FFFFFF;
  background: linear-gradient(135deg, #51B0D1 0%, #0667AC 55%, #063779 100%);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.gold-public-point h3 {
  margin-bottom: 8px;
  color: #063779;
  font-size: 1.05rem;
  font-weight: 900;
}

.gold-public-point p {
  color: var(--ao-text-secondary);
  font-size: 0.9rem;
  line-height: 1.7;
}

.gold-public-note {
  margin-top: 20px;
  padding: 18px 22px;
  border-left: 4px solid #0667AC;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(81, 176, 209, 0.1);
  color: var(--ao-text-secondary);
  line-height: 1.7;
}

.gold-public-note strong {
  color: #063779;
}

.gold-public-gallery {
  margin-top: 18px;
}

.gold-fig-card-wide {
  grid-column: 1 / -1;
}

.gold-fig-card-wide .gold-fig-img-box {
  height: min(520px, 60vw);
  min-height: 300px;
}

/* ==========================================================================`r`n   國家品牌玉山獎專題
   ========================================================================== */
.yushan-hero-tag {
  padding: 7px 14px;
  border: 1px solid rgba(255, 214, 105, 0.36);
  border-radius: var(--radius-pill);
  background: rgba(139, 21, 56, 0.28);
  color: #FFD669;
}

.yushan-hero-tag .ao-subtag-dot,
.yushan-detail-subtag .ao-subtag-dot {
  background: #FFD669;
}

.yushan-gradient-text {
  background: linear-gradient(135deg, #FFF3B0 0%, #FFD669 42%, #F09A37 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.yushan-primary-btn {
  border: none !important;
  background: linear-gradient(135deg, #A4193D 0%, #7A102D 58%, #D4AF37 100%) !important;
  box-shadow: 0 10px 28px rgba(122, 16, 45, 0.28);
}

.yushan-primary-btn:hover {
  box-shadow: 0 14px 34px rgba(122, 16, 45, 0.38);
}

.yushan-stat-num {
  color: #FFD669 !important;
  font-size: 1.85rem;
}

.yushan-hero-frame {
  border-color: rgba(255, 214, 105, 0.5) !important;
  box-shadow: 0 20px 60px rgba(139, 21, 56, 0.3) !important;
}

.yushan-badge-dot {
  background: #FFD669 !important;
}

.yushan-award-status {
  color: #FFD669;
  font-size: 0.78rem;
  font-weight: 800;
}

.yushan-news-card {
  border: 2px solid rgba(164, 25, 61, 0.35) !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF8ED 100%) !important;
}

.yushan-news-main-img {
  max-height: 440px;
  object-position: center 38%;
}

.yushan-news-badge {
  background: linear-gradient(135deg, #A4193D 0%, #7A102D 58%, #D4AF37 100%) !important;
  color: #FFFFFF !important;
  font-weight: 900 !important;
}

.yushan-news-title {
  color: #73142D;
  font-size: 1.65rem;
}

.yushan-news-snippet {
  font-size: 1rem;
  line-height: 1.75;
}

.yushan-detail-hero {
  background: linear-gradient(125deg, #651128 0%, #9B183B 46%, #063779 100%) !important;
}

.yushan-detail-subtag {
  color: #FFD669;
}

.yushan-detail-container {
  max-width: 1080px;
}

.yushan-award-summary {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  margin-bottom: 30px;
  padding: 34px;
  border: 1px solid rgba(164, 25, 61, 0.22);
  border-left: 6px solid #A4193D;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #FFF9EF 0%, #FFFFFF 68%);
  box-shadow: var(--shadow-card);
}

.yushan-logo-panel {
  display: grid;
  place-items: center;
  min-height: 190px;
  padding: 18px;
  border-radius: var(--radius-md);
  background: #FFFFFF;
}

.yushan-logo-panel img {
  width: 100%;
  max-width: 190px;
  max-height: 190px;
  object-fit: contain;
}

.yushan-award-pill {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  color: #FFFFFF;
  background: linear-gradient(135deg, #A4193D, #7A102D);
  font-size: 0.82rem;
  font-weight: 900;
}

.yushan-summary-copy h2 {
  margin-bottom: 12px;
  color: #063779;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.3;
}

.yushan-summary-copy p {
  color: var(--ao-text-secondary);
  line-height: 1.8;
}

.yushan-public-note {
  margin-top: 12px;
  color: #7A102D !important;
  font-size: 0.9rem;
  font-weight: 700;
}

.yushan-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 60px;
}

.yushan-fact {
  min-width: 0;
  padding: 22px 18px;
  border: 1px solid rgba(164, 25, 61, 0.16);
  border-radius: var(--radius-md);
  background: #FFFFFF;
  text-align: center;
  box-shadow: var(--shadow-soft);
}

.yushan-fact strong,
.yushan-fact span {
  display: block;
}

.yushan-fact strong {
  color: #851531;
  font-size: 1.08rem;
  font-weight: 900;
}

.yushan-fact span {
  margin-top: 5px;
  color: var(--ao-text-secondary);
  font-size: 0.82rem;
}

.yushan-product-overview,
.yushan-award-gallery {
  margin-bottom: 62px;
}

.yushan-value-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.yushan-value-card {
  min-width: 0;
  padding: 24px 20px;
  border: 1px solid rgba(6, 103, 172, 0.14);
  border-top: 4px solid #A4193D;
  border-radius: var(--radius-md);
  background: #FFFFFF;
  box-shadow: var(--shadow-soft);
}

.yushan-value-card > span {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border-radius: 50%;
  color: #FFFFFF;
  background: linear-gradient(135deg, #A4193D, #D4AF37);
  font-size: 0.76rem;
  font-weight: 900;
}

.yushan-value-card h3 {
  margin-bottom: 8px;
  color: #063779;
  font-size: 1.04rem;
  font-weight: 900;
}

.yushan-value-card p {
  color: var(--ao-text-secondary);
  font-size: 0.88rem;
  line-height: 1.7;
}

.yushan-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.yushan-photo-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(6, 55, 121, 0.1);
  border-radius: var(--radius-md);
  background: #FFFFFF;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: var(--transition);
}

.yushan-photo-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

.yushan-photo-card img {
  display: block;
  width: 100%;
  height: 290px;
  object-fit: cover;
}

.yushan-photo-featured {
  grid-column: 1 / -1;
}

.yushan-photo-featured img {
  height: 480px;
  object-position: center 38%;
}

.yushan-photo-portrait img {
  object-position: center 30%;
}

.yushan-photo-card > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
}

.yushan-photo-card strong {
  color: #063779;
}

.yushan-photo-card span {
  color: #A4193D;
  font-size: 0.8rem;
  font-weight: 800;
  text-align: right;
}

.yushan-detail-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 34px;
  border-top: 1px solid var(--ao-border);
}

@media (max-width: 768px) {
  #page-news-detail-yushan .container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: 20px;
    padding-right: 20px;
  }

  #page-news-detail-yushan .page-hero-banner {
    padding-top: 54px;
    padding-bottom: 42px;
  }

  #page-news-detail-yushan .ao-subtag {
    max-width: 100%;
    white-space: normal;
    text-wrap: balance;
    overflow-wrap: break-word;
    line-break: strict;
    font-size: 0.72rem;
    line-height: 1.5;
  }

  #page-news-detail-yushan .page-hero-title {
    max-width: 100%;
    font-size: clamp(2rem, 10vw, 2.35rem);
    line-height: 1.18;
    letter-spacing: -0.5px;
    overflow-wrap: break-word;
  }

  #page-news-detail-yushan .page-hero-subtitle {
    max-width: 100%;
    font-size: 1rem;
  }

  #page-news-detail-yushan .breadcrumb {
    flex-wrap: wrap;
  }

  .yushan-award-summary {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 20px;
  }

  .yushan-logo-panel {
    min-height: 150px;
  }

  .yushan-logo-panel img {
    max-width: 150px;
    max-height: 150px;
  }

  .yushan-facts,
  .yushan-value-grid,
  .yushan-gallery-grid {
    grid-template-columns: 1fr;
  }

  .yushan-photo-featured {
    grid-column: auto;
  }

  .yushan-photo-card img,
  .yushan-photo-featured img {
    height: 230px;
  }

  .yushan-photo-portrait img {
    height: 330px;
  }

  .yushan-photo-card > div,
  .yushan-detail-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ==========================================================================`r`n   全站優雅捲動與內頁淡入動態系統 (Global Tasteful Scroll & Page Reveal System)
   ========================================================================== */
.ao-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.ao-reveal.ao-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* 階層式波浪延遲 (Staggered Wave Delays) */
.ao-delay-1 {
  transition-delay: 0.1s !important;
}

.ao-delay-2 {
  transition-delay: 0.2s !important;
}

.ao-delay-3 {
  transition-delay: 0.3s !important;
}

.ao-delay-4 {
  transition-delay: 0.4s !important;
}

/* 內頁 SPA 切換時頂部 Header 動態登場 */
.page-section.active .detail-hero,
.page-section.active .platform-hero {
  animation: pageHeroReveal 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 核心軟體平台頁面與卡片無邊框瀑布流 Fade-In 動態系統 (Modern Borderless Cascade Fade-In) */
.page-section.active .service-card,
.page-section.active .capability-card,
.page-section.active .feature-box,
.page-section.active .detail-img-box,
.page-section.active .feature-spec-table {
  animation: platformModernFadeIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes platformModernFadeIn {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.page-section.active .service-card:nth-child(1),
.page-section.active .capability-card:nth-child(1) {
  animation-delay: 0.08s;
}

.page-section.active .service-card:nth-child(2),
.page-section.active .capability-card:nth-child(2) {
  animation-delay: 0.16s;
}

.page-section.active .service-card:nth-child(3),
.page-section.active .capability-card:nth-child(3) {
  animation-delay: 0.24s;
}

.page-section.active .service-card:nth-child(4),
.page-section.active .capability-card:nth-child(4) {
  animation-delay: 0.32s;
}

.page-section.active .service-card:nth-child(5) {
  animation-delay: 0.40s;
}

.page-section.active .service-card:nth-child(6) {
  animation-delay: 0.48s;
}

@keyframes pageHeroReveal {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.gold-fig-img-box {
  height: 300px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(6, 55, 121, 0.08);
  background: #FFFFFF;
  cursor: pointer;
  position: relative;
}

.gold-fig-img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}

/* 資安架構圖保留完整內容，依卡片寬度等比放大至 100%。 */
.gold-fig-card-wide .gold-fig-img-box-full {
  height: auto;
  min-height: 0;
}

.gold-fig-img-box-full img {
  display: block;
  width: 100%;
  height: auto;
}

.gold-fig-img-box:hover img {
  transform: scale(1.03);
}

.gold-fig-zoom-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(6, 55, 121, 0.85);
  color: #FFE259;
  backdrop-filter: blur(8px);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.76rem;
  font-weight: 800;
  border: 1px solid rgba(255, 215, 0, 0.4);
  pointer-events: none;
}

.gold-fig-meta {
  margin-top: 16px;
}

.gold-fig-number {
  background: linear-gradient(135deg, #D4AF37 0%, #AA771C 100%);
  color: #FFF;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 800;
  display: inline-block;
  margin-bottom: 8px;
}

.gold-fig-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--ao-navy);
  margin-bottom: 6px;
  line-height: 1.35;
}

.gold-fig-desc {
  font-size: 0.88rem;
  color: var(--ao-text-secondary);
  line-height: 1.6;
}

@media (max-width: 768px) {
  #page-news-detail-goldentorch .container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: 20px;
    padding-right: 20px;
  }

  #page-news-detail-goldentorch .page-hero-banner {
    padding-top: 54px;
    padding-bottom: 42px;
  }

  #page-news-detail-goldentorch .ao-subtag {
    max-width: 100%;
    white-space: normal;
    text-wrap: balance;
    overflow-wrap: break-word;
    line-break: strict;
    font-size: 0.72rem;
    line-height: 1.5;
  }

  #page-news-detail-goldentorch .page-hero-title {
    max-width: 100%;
    font-size: clamp(2rem, 10vw, 2.35rem);
    line-height: 1.18;
    letter-spacing: -0.5px;
    overflow-wrap: break-word;
  }

  #page-news-detail-goldentorch .page-hero-subtitle {
    max-width: 100%;
    font-size: 1rem;
  }

  #page-news-detail-goldentorch .breadcrumb {
    flex-wrap: wrap;
  }

  #page-news-detail-goldentorch .news-article-intro {
    max-width: 100%;
    min-width: 0;
    padding: 24px 20px !important;
  }

  #page-news-detail-goldentorch .news-article-intro > div:first-child {
    flex-wrap: wrap;
  }

  #page-news-detail-goldentorch .news-article-intro h3 {
    font-size: 1.3rem !important;
    line-height: 1.45;
  }

  .gold-fig-grid {
    grid-template-columns: 1fr;
  }

  .gold-fig-img-box {
    height: 220px;
  }

  .gold-public-summary {
    margin-bottom: 40px;
  }

  .gold-public-points {
    grid-template-columns: 1fr;
  }

  .gold-fig-card-wide .gold-fig-img-box:not(.gold-fig-img-box-full) {
    height: 300px;
    min-height: 0;
  }
}
.bems-mobile-break {
  display: none;
}

.hero-carousel-container.is-paused .carousel-nav-btn.active .progress-bar {
  animation-play-state: paused !important;
}

@media (max-width: 720px) {
  .bems-mobile-break {
    display: block;
  }
}

@media (max-width: 1024px) {
  .construction-ai-news-card {
    display: flex;
    grid-column: 1 / -1;
  }

  .construction-ai-news-card .news-card-img-wrap {
    height: 360px;
    min-height: 0;
  }

  .construction-ai-intro {
    grid-template-columns: 1fr;
  }

  .construction-ai-poster {
    width: min(100%, 420px);
  }

  .construction-ai-slide-card {
    grid-template-columns: 1fr;
  }

  .construction-ai-slide-card button {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 768px) {
  .construction-event-home-mobile-break {
    display: block;
  }

  .construction-event-title-line {
    white-space: normal;
    font-size: 0.96em;
    letter-spacing: -0.6px;
  }

  .hero-slide[data-slide-index="5"] .ao-subtag {
    width: calc(100vw - 40px);
    max-width: 100%;
    white-space: normal;
    text-wrap: balance;
    word-break: normal;
    overflow-wrap: break-word;
    line-break: strict;
    font-size: 0.68rem;
    line-height: 1.45;
  }

  .hero-slide[data-slide-index="5"] .home-hero-desc {
    width: calc(100vw - 40px);
    max-width: 100%;
    text-wrap: pretty;
    word-break: normal;
    overflow-wrap: break-word;
    line-break: strict;
  }

  .yushan-news-card .news-card-img-wrap,
  .goldentorch-news-card .news-card-img-wrap {
    height: 270px;
  }

  .construction-ai-mobile-break {
    display: block;
  }

  .construction-ai-desktop-space {
    display: none;
  }

  #page-news-detail-construction-ai .container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: 24px;
    padding-right: 24px;
  }

  #page-news-detail-construction-ai .page-hero-banner {
    padding-top: 54px;
    padding-bottom: 42px;
  }

  #page-news-detail-construction-ai .ao-subtag {
    max-width: 100%;
    white-space: normal;
    text-wrap: balance;
    overflow-wrap: break-word;
    line-break: strict;
    font-size: 0.7rem;
    line-height: 1.5;
  }

  #page-news-detail-construction-ai .page-hero-title {
    max-width: 100%;
    min-width: 0;
    font-size: clamp(1.85rem, 9vw, 2.25rem);
    line-height: 1.18;
    word-break: normal;
    text-wrap: balance;
    overflow-wrap: break-word;
    line-break: strict;
  }

  #page-news-detail-construction-ai .page-hero-subtitle {
    max-width: 100%;
    font-size: 1rem;
  }

  #page-news-detail-construction-ai .breadcrumb {
    flex-wrap: wrap;
  }

  .construction-ai-news-card .news-card-img-wrap {
    height: 240px;
  }

  .construction-ai-intro {
    gap: 30px;
    margin-bottom: 56px;
  }

  .construction-ai-intro > *,
  .construction-ai-section-heading > *,
  .construction-ai-slide-card > * {
    min-width: 0;
  }

  .construction-ai-intro h2,
  .construction-ai-section-heading h2 {
    text-wrap: balance;
    word-break: normal;
    overflow-wrap: break-word;
    line-break: strict;
  }

  .construction-ai-meta {
    grid-template-columns: 1fr;
  }

  .construction-ai-section-heading {
    display: block;
  }

  .construction-ai-section-heading > p {
    margin-top: 12px;
  }

  .construction-ai-slide-grid {
    margin-bottom: 58px;
  }

  .construction-ai-slide-copy {
    padding: 24px 20px 28px;
  }

  .construction-ai-gallery {
    grid-template-columns: 1fr;
  }

  .construction-ai-gallery-featured,
  .construction-ai-gallery-wide {
    grid-column: auto;
  }

  .construction-ai-gallery button,
  .construction-ai-gallery-featured,
  .construction-ai-gallery-wide {
    min-height: 240px !important;
  }

  .construction-ai-detail-actions {
    align-items: stretch;
  }

  .construction-ai-detail-actions .btn-primary,
  .construction-ai-detail-actions .btn-secondary {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ==========================================================================
   客製化開發頁最終版面修正：卡片圖像、中文斷行與手機寬度
   ========================================================================== */
#page-service-custom-detail .custom-dev-hero {
  padding: 104px 0 66px;
  background-color: #063779 !important;
  background-image:
    radial-gradient(circle at 82% 32%, rgba(81, 176, 209, .22), transparent 28%),
    linear-gradient(128deg, #031c3e 0%, #063779 56%, #075f9c 100%) !important;
}

#page-service-custom-detail h1,
#page-service-custom-detail h2,
#page-service-custom-detail h3,
#page-service-custom-detail .section-title {
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
  text-wrap: balance;
}

#page-service-custom-detail p,
#page-service-custom-detail li {
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
  text-wrap: pretty;
}

#page-service-custom-detail .custom-dev-intro-grid,
#page-service-custom-detail .custom-dev-scenario-layout,
#page-service-custom-detail .custom-dev-commitment-grid,
#page-service-custom-detail .custom-dev-copy,
#page-service-custom-detail .custom-dev-blueprint,
#page-service-custom-detail .custom-dev-scenario-lead,
#page-service-custom-detail .custom-dev-commitment-grid > *,
#page-service-custom-detail .custom-dev-core > div {
  min-width: 0;
}

#page-service-custom-detail .custom-dev-capability-card {
  min-height: 390px;
}

.custom-dev-card-media {
  width: calc(100% + 48px);
  margin: -28px -24px 22px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid rgba(6, 55, 121, .08);
  background: #062f67;
}

.custom-dev-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}

.custom-dev-capability-card:hover .custom-dev-card-media img {
  transform: scale(1.045);
}

@media (max-width: 760px) {
  #page-service-custom-detail .custom-dev-hero {
    padding: 82px 0 52px;
  }

  #page-service-custom-detail .custom-dev-intro-grid,
  #page-service-custom-detail .custom-dev-scenario-layout,
  #page-service-custom-detail .custom-dev-commitment-grid {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  #page-service-custom-detail .custom-dev-blueprint {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #page-service-custom-detail .custom-dev-inputs,
  #page-service-custom-detail .custom-dev-output-grid {
    min-width: 0;
  }

  #page-service-custom-detail .custom-dev-capability-card {
    min-height: 0;
  }
}

/* ==========================================================================
   地端 AI Agent 企業智慧助理
   ========================================================================== */
.agent-service-page {
  --agent-blue: #0878bd;
  --agent-cyan: #58c9dd;
  --agent-teal: #139a8b;
}

.agent-service-page h1,
.agent-service-page h2,
.agent-service-page h3,
.agent-service-page .section-title {
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
  text-wrap: balance;
}

.agent-service-page p,
.agent-service-page li {
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
  text-wrap: pretty;
}

#page-service-ai-agent-detail .agent-service-hero {
  overflow: hidden;
  padding: 98px 0 62px;
  background-color: #052d65 !important;
  background-image:
    radial-gradient(circle at 82% 38%, rgba(88, 201, 221, .2), transparent 30%),
    linear-gradient(125deg, #031b3d 0%, #063779 56%, #0878bd 100%) !important;
}

.agent-service-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(430px, .95fr);
  gap: clamp(42px, 7vw, 90px);
  align-items: center;
}

.agent-service-hero-copy,
.agent-service-hero-visual {
  min-width: 0;
}

.agent-service-hero-copy .page-hero-title {
  margin-top: 14px;
  font-size: clamp(2.7rem, 5vw, 4.75rem);
  line-height: 1.05;
  letter-spacing: -.045em;
}

.agent-service-hero-copy .page-hero-subtitle {
  max-width: 760px;
  margin-top: 20px;
  color: rgba(255, 255, 255, .84);
  font-size: 1.08rem;
  line-height: 1.85;
}

.agent-service-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 24px;
}

.agent-service-hero-tags span {
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-size: .76rem;
  font-weight: 760;
}

.agent-service-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 20px;
}

.agent-service-hero-actions .btn-secondary {
  border-color: rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.agent-service-hero-actions .btn-secondary:hover {
  border-color: rgba(255, 255, 255, .52);
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

.agent-service-hero-visual {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 26px;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 28px 65px rgba(0, 0, 0, .28);
}

.agent-service-hero-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.agent-service-privacy-badge {
  position: absolute;
  right: 18px;
  bottom: 18px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(3, 27, 61, .84);
  color: #9ce9f3;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .09em;
  backdrop-filter: blur(9px);
}

.agent-service-kicker {
  margin-bottom: 12px;
  color: var(--agent-blue);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .15em;
}

.agent-service-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(38px, 7vw, 90px);
  align-items: start;
}

.agent-service-intro-grid h2,
.agent-service-onprem h2 {
  color: var(--ao-navy);
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  line-height: 1.18;
  letter-spacing: -.035em;
}

.agent-service-intro-grid p,
.agent-service-onprem-copy > p {
  margin-bottom: 15px;
  color: var(--ao-text-secondary);
  font-size: 1.02rem;
  line-height: 1.9;
}

.agent-service-pain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 48px;
}

.agent-service-pain-grid article {
  min-height: 180px;
  padding: 24px;
  border: 1px solid rgba(6, 55, 121, .09);
  border-radius: 17px;
  background: #f7fbfe;
}

.agent-service-pain-grid span {
  color: var(--agent-blue);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.agent-service-pain-grid h3 {
  margin: 15px 0 9px;
  color: var(--ao-navy);
  font-size: 1.04rem;
}

.agent-service-pain-grid p {
  color: var(--ao-text-secondary);
  font-size: .88rem;
  line-height: 1.72;
}

.agent-service-section-head {
  max-width: 850px;
  margin-right: auto;
  margin-bottom: 42px;
  margin-left: auto;
}

.agent-service-section-head .section-title {
  margin-bottom: 13px;
  font-size: clamp(2rem, 3.6vw, 3rem);
  letter-spacing: -.035em;
}

.agent-service-section-head .section-desc {
  max-width: 780px;
  margin: 0 auto;
  line-height: 1.8;
}

.agent-service-figure {
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(6, 55, 121, .1);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(6, 55, 121, .1);
}

.agent-service-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.agent-service-figure figcaption {
  padding: 12px 18px;
  border-top: 1px solid rgba(6, 55, 121, .08);
  color: var(--ao-text-secondary);
  font-size: .75rem;
  text-align: center;
}

.agent-service-module-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 24px;
}

.agent-service-module-grid article {
  padding: 24px;
  border: 1px solid rgba(6, 55, 121, .08);
  border-radius: 16px;
  background: #fff;
}

.agent-service-module-grid b {
  color: var(--agent-teal);
  font-size: .7rem;
  letter-spacing: .1em;
}

.agent-service-module-grid h3 {
  margin: 14px 0 9px;
  color: var(--ao-navy);
  font-size: 1rem;
}

.agent-service-module-grid p {
  color: var(--ao-text-secondary);
  font-size: .86rem;
  line-height: 1.7;
}

.agent-service-onprem-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(520px, 1.18fr);
  gap: clamp(40px, 7vw, 85px);
  align-items: center;
}

.agent-service-onprem-copy,
.agent-service-figure-compact {
  min-width: 0;
}

.agent-service-check-list {
  display: grid;
  gap: 10px;
  margin-top: 25px;
  list-style: none;
}

.agent-service-check-list li {
  position: relative;
  padding: 13px 15px 13px 42px;
  border-radius: 12px;
  background: #f3f9fc;
  color: var(--ao-text-secondary);
  font-size: .9rem;
  line-height: 1.65;
}

.agent-service-check-list li::before {
  position: absolute;
  top: 14px;
  left: 15px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: var(--agent-teal);
  color: #fff;
  content: "✓";
  font-size: .7rem;
  font-weight: 900;
}

.agent-service-check-list strong {
  color: var(--ao-navy);
}

.agent-service-usecases {
  background-color: #052d65 !important;
  background-image: linear-gradient(125deg, #031b3d, #063779 62%, #075b92) !important;
}

.agent-service-section-head-light .agent-service-kicker {
  color: #8fe5f0;
}

.agent-service-section-head-light .section-title {
  color: #fff;
}

.agent-service-section-head-light .section-desc {
  color: rgba(255, 255, 255, .74);
}

.agent-service-usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.agent-service-usecase-grid article {
  min-height: 195px;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 16px;
  background: rgba(255, 255, 255, .065);
}

.agent-service-usecase-grid span {
  color: #8fe5f0;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.agent-service-usecase-grid h3 {
  margin: 16px 0 10px;
  color: #fff;
  font-size: 1.08rem;
}

.agent-service-usecase-grid p {
  color: rgba(255, 255, 255, .72);
  font-size: .88rem;
  line-height: 1.72;
}

.agent-service-roadmap-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  list-style: none;
}

.agent-service-roadmap-list li {
  position: relative;
  min-height: 190px;
  padding: 24px;
  border: 1px solid rgba(6, 55, 121, .08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(6, 55, 121, .05);
}

.agent-service-roadmap-list li:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: -14px;
  z-index: 2;
  color: var(--agent-cyan);
  content: "→";
  font-size: 1.25rem;
  font-weight: 900;
  transform: translateY(-50%);
}

.agent-service-roadmap-list li > span {
  color: var(--agent-blue);
  font-size: 1.65rem;
  font-weight: 900;
}

.agent-service-roadmap-list h3 {
  margin: 14px 0 8px;
  color: var(--ao-navy);
  font-size: 1rem;
}

.agent-service-roadmap-list p {
  color: var(--ao-text-secondary);
  font-size: .84rem;
  line-height: 1.65;
}

.agent-service-cta {
  display: flex;
  margin-top: 48px;
  padding: 30px 34px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-radius: 20px;
  background: linear-gradient(110deg, #062f67, #0878bd);
  box-shadow: 0 18px 45px rgba(6, 55, 121, .17);
}

.agent-service-cta small {
  color: #91e7f1;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.agent-service-cta h3 {
  max-width: 780px;
  margin-top: 7px;
  color: #fff;
  font-size: clamp(1.15rem, 2.2vw, 1.65rem);
}

.agent-service-cta .btn-ao-coral {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .agent-service-hero-grid,
  .agent-service-intro-grid,
  .agent-service-onprem-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .agent-service-hero-visual {
    width: min(100%, 760px);
  }

  .agent-service-pain-grid,
  .agent-service-module-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .agent-service-roadmap-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .agent-service-roadmap-list li::after {
    display: none;
  }
}

@media (max-width: 760px) {
  #page-service-ai-agent-detail .agent-service-hero {
    padding: 82px 0 50px;
  }

  .agent-service-hero-grid,
  .agent-service-intro-grid,
  .agent-service-onprem-grid {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .agent-service-hero-copy .page-hero-title br {
    display: none;
  }

  .agent-service-hero-actions,
  .agent-service-cta {
    align-items: stretch;
    flex-direction: column;
  }

  .agent-service-hero-actions > *,
  .agent-service-cta .btn-ao-coral {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }

  .agent-service-pain-grid,
  .agent-service-module-grid,
  .agent-service-usecase-grid,
  .agent-service-roadmap-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .agent-service-pain-grid article,
  .agent-service-usecase-grid article,
  .agent-service-roadmap-list li {
    min-height: 0;
  }

  .agent-service-figure {
    border-radius: 14px;
  }

  .agent-service-cta {
    padding: 26px 22px;
  }
}

/* ==========================================================================
   客製開發與 AI Agent 內容可讀性、圖像卡片與紅字回饋修正
   ========================================================================== */
.custom-dev-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}

.custom-dev-hero-copy,
.custom-dev-hero-visual {
  min-width: 0;
}

.custom-dev-hero-copy .page-hero-title {
  max-width: 820px;
  font-size: clamp(2.65rem, 3.8vw, 3.5rem);
}

.custom-dev-hero-copy .page-hero-title > span,
.custom-dev-commitment h2 > span {
  display: block;
}

.custom-dev-hero-copy .page-hero-title > span {
  white-space: nowrap;
}

.custom-dev-hero-visual {
  position: relative;
  z-index: 2;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 26px;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 28px 65px rgba(0, 0, 0, .28);
}

.custom-dev-hero-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

#page-service-custom-detail .custom-dev-intro-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

#page-service-custom-detail .custom-dev-copy,
#page-service-custom-detail .custom-dev-blueprint {
  height: 100%;
}

#page-service-custom-detail .custom-dev-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#page-service-custom-detail .custom-dev-blueprint {
  display: flex;
  min-height: 540px;
  flex-direction: column;
  justify-content: center;
}

#page-service-custom-detail .custom-dev-kicker,
#page-service-ai-agent-detail .agent-service-kicker {
  font-size: .86rem;
}

#page-service-custom-detail .custom-dev-hero-pills span,
#page-service-ai-agent-detail .agent-service-hero-tags span {
  font-size: .88rem;
}

#page-service-custom-detail .custom-dev-copy > p,
#page-service-custom-detail .custom-dev-scenario-lead > p,
#page-service-custom-detail .custom-dev-commitment-grid > div:first-child > p,
#page-service-custom-detail .section-desc,
#page-service-ai-agent-detail .agent-service-intro-grid p,
#page-service-ai-agent-detail .agent-service-onprem-copy > p,
#page-service-ai-agent-detail .section-desc {
  font-size: 1.08rem;
  line-height: 1.85;
}

#page-service-custom-detail .custom-dev-proof-row strong,
#page-service-custom-detail .custom-dev-code,
#page-service-custom-detail .custom-dev-process-list small,
#page-service-custom-detail .custom-dev-final-cta span,
#page-service-ai-agent-detail .agent-service-module-grid b,
#page-service-ai-agent-detail .agent-service-usecase-grid article > span,
#page-service-ai-agent-detail .agent-service-cta small {
  font-size: .78rem;
}

#page-service-custom-detail .custom-dev-proof-row span,
#page-service-custom-detail .custom-dev-stack-label,
#page-service-custom-detail .custom-dev-stack-items span,
#page-service-custom-detail .custom-dev-architecture-note p {
  font-size: 1rem;
}

#page-service-custom-detail .custom-dev-blueprint-head,
#page-service-custom-detail .custom-dev-inputs span,
#page-service-custom-detail .custom-dev-output-grid span {
  font-size: .86rem;
}

#page-service-custom-detail .custom-dev-core small,
#page-service-custom-detail .custom-dev-stack-label span,
#page-service-custom-detail .custom-dev-architecture-note span {
  font-size: .8rem;
}

#page-service-custom-detail .custom-dev-core span,
#page-service-custom-detail .custom-dev-output-grid b {
  font-size: .92rem;
}

#page-service-custom-detail .custom-dev-capability-card h3,
#page-service-custom-detail .custom-dev-scenario-grid h3,
#page-service-custom-detail .custom-dev-process-list h3,
#page-service-custom-detail .custom-dev-commitment-cards strong {
  font-size: 1.18rem;
  line-height: 1.45;
}

#page-service-custom-detail .custom-dev-capability-card p,
#page-service-custom-detail .custom-dev-scenario-grid p,
#page-service-custom-detail .custom-dev-process-list p,
#page-service-custom-detail .custom-dev-commitment-cards span {
  font-size: 1rem;
  line-height: 1.75;
}

.custom-dev-process-list li {
  display: block;
  overflow: hidden;
  min-height: 445px;
  padding: 0 24px 26px;
}

.custom-dev-process-visual,
.agent-service-card-visual,
.agent-roadmap-visual {
  overflow: hidden;
  background: #fff7ef;
}

.custom-dev-process-visual img,
.agent-service-card-visual img,
.agent-roadmap-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.custom-dev-process-visual {
  height: 235px;
  margin: 0 -24px 23px;
  border-bottom: 1px solid rgba(6, 55, 121, .1);
}

.custom-dev-capability-card-ai .custom-dev-card-media img {
  transform: scale(1.025);
}

.custom-dev-capability-card-ai:hover .custom-dev-card-media img {
  transform: scale(1.07);
}

.service-news-card .news-card-img-wrap {
  background: #eef8fb;
}

/* Corrosion management detail — rebuilt from separated presentation assets */
.corrosion-detail-page {
  --corrosion-teal: #087f8c;
  --corrosion-blue: #1167b1;
  --corrosion-amber: #f2a51a;
  --corrosion-green: #32a852;
}

.corrosion-hero-grid,
.corrosion-story-grid,
.corrosion-benefit-panel {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 42px;
  align-items: center;
}

.corrosion-hero-grid {
  margin-bottom: 32px;
  padding: 32px;
  border: 1px solid rgba(8, 127, 140, .18);
  border-radius: 28px;
  background: linear-gradient(135deg, #fff 0%, #f4fbfc 58%, #eaf6fa 100%);
  box-shadow: 0 18px 48px rgba(6, 55, 121, .08);
}

.corrosion-hero-copy h2,
.corrosion-section-heading h2,
.corrosion-story-copy h2,
.corrosion-benefit-panel h2 {
  color: var(--ao-navy);
  font-size: clamp(1.75rem, 3vw, 2.55rem);
  line-height: 1.28;
  text-wrap: balance;
}

.corrosion-hero-copy p,
.corrosion-section-heading p,
.corrosion-story-copy p,
.corrosion-benefit-panel p {
  color: var(--ao-text-secondary);
  font-size: 1.03rem;
  line-height: 1.85;
}

.corrosion-standard-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.corrosion-standard-list span {
  padding: 9px 14px;
  border: 1px solid rgba(17, 103, 177, .2);
  border-radius: 999px;
  color: #07568e;
  background: rgba(255, 255, 255, .86);
  font-size: .85rem;
  font-weight: 800;
}

.corrosion-hero-visual {
  position: relative;
  min-height: 430px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: #071d2e;
  cursor: pointer;
}

.corrosion-hero-visual img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
}

.corrosion-hero-visual span {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  color: #fff;
  background: rgba(5, 35, 58, .82);
  backdrop-filter: blur(8px);
  font-size: .9rem;
  font-weight: 800;
}

.corrosion-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 78px;
}

.corrosion-flow article {
  min-height: 175px;
  padding: 24px;
  border-radius: 20px;
  color: var(--ao-navy);
  box-shadow: 0 12px 30px rgba(6, 55, 121, .07);
}

.corrosion-flow article:nth-child(1) { background: #e9f6ff; border-top: 5px solid #2695d1; }
.corrosion-flow article:nth-child(2) { background: #ecfbf4; border-top: 5px solid #30a96a; }
.corrosion-flow article:nth-child(3) { background: #fff8e8; border-top: 5px solid #f2a51a; }
.corrosion-flow article:nth-child(4) { background: #f5efff; border-top: 5px solid #8b63d6; }
.corrosion-flow b { display: block; margin-bottom: 18px; font-size: 1.45rem; }
.corrosion-flow strong { display: block; margin-bottom: 8px; font-size: 1.08rem; }
.corrosion-flow span { color: var(--ao-text-secondary); font-size: .9rem; line-height: 1.6; }

.corrosion-section-heading {
  max-width: 860px;
  margin: 0 auto 30px;
  text-align: center;
}

.corrosion-section-heading > span,
.corrosion-story-copy > span,
.corrosion-benefit-panel > div > span {
  color: var(--corrosion-teal);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.corrosion-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 82px;
}

.corrosion-dashboard-grid figure,
.corrosion-story-grid figure,
.corrosion-benefit-panel figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(6, 103, 172, .16);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(6, 55, 121, .08);
  cursor: pointer;
}

.corrosion-dashboard-grid img,
.corrosion-story-grid img,
.corrosion-benefit-panel img {
  display: block;
  width: 100%;
  height: auto;
}

.corrosion-dashboard-grid figcaption {
  display: grid;
  gap: 5px;
  padding: 20px 22px 24px;
}

.corrosion-dashboard-grid figcaption strong { color: var(--ao-navy); font-size: 1.05rem; }
.corrosion-dashboard-grid figcaption span { color: var(--ao-text-secondary); font-size: .9rem; line-height: 1.6; }

.corrosion-story-grid {
  margin-bottom: 72px;
}

.corrosion-story-grid-reverse {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
}

.corrosion-story-copy ul {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.corrosion-story-copy li {
  position: relative;
  padding-left: 28px;
  color: var(--ao-text-primary);
  line-height: 1.65;
}

.corrosion-story-copy li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--corrosion-teal);
  font-weight: 900;
}

.corrosion-benefit-panel {
  padding: 34px;
  border-radius: 28px;
  background: linear-gradient(135deg, #073b66 0%, #075c78 52%, #087f8c 100%);
}

.corrosion-benefit-panel h2,
.corrosion-benefit-panel p { color: #fff; }
.corrosion-benefit-panel p { opacity: .86; }
.corrosion-benefit-panel > div > span { color: #8ce8d8; }
.corrosion-benefit-panel .btn-primary { margin-top: 12px; background: #fff; color: #075c78; }
.corrosion-benefit-panel figure { background: #fff; }

@media (max-width: 920px) {
  .corrosion-hero-grid,
  .corrosion-story-grid,
  .corrosion-story-grid-reverse,
  .corrosion-benefit-panel,
  .corrosion-dashboard-grid { grid-template-columns: 1fr; }
  .corrosion-flow { grid-template-columns: 1fr 1fr; }
  .corrosion-story-grid-reverse figure { order: 2; }
}

@media (max-width: 620px) {
  .corrosion-hero-grid,
  .corrosion-benefit-panel { padding: 22px; }
  .corrosion-flow { grid-template-columns: 1fr; }
  .corrosion-hero-visual,
  .corrosion-hero-visual img { min-height: 300px; }
}

.service-news-card .news-badge {
  background: linear-gradient(135deg, #0b87b5, #087562);
}

.service-news-card-agent .news-badge {
  background: linear-gradient(135deg, #7054c8, #1785b6);
}

.service-news-card .news-service-thumbs {
  margin-top: 18px;
}

.service-news-card .news-service-thumbs .news-thumb {
  padding: 0;
  appearance: none;
  background: #eef6fb;
  box-shadow: none;
}

.service-news-card .news-service-thumbs .news-thumb:focus-visible {
  border-color: var(--ao-red);
  outline: 3px solid rgba(6, 103, 172, 0.22);
  outline-offset: 2px;
}

.news-service-action {
  margin-top: auto;
  padding-top: 18px;
}

.news-service-action .btn-secondary {
  width: fit-content;
  padding: 9px 16px;
  border-color: rgba(6, 103, 172, .28);
  color: var(--ao-navy);
  font-size: .84rem;
  font-weight: 800;
}

#page-service-custom-detail .custom-dev-architecture .custom-dev-kicker {
  color: #087da5;
}

#page-service-custom-detail .custom-dev-architecture .section-title {
  color: var(--ao-navy);
}

#page-service-custom-detail .custom-dev-architecture .section-desc,
#page-service-custom-detail .custom-dev-architecture .custom-dev-architecture-note p {
  color: #536678;
}

.custom-dev-process-meta {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.custom-dev-process-meta > span {
  flex: 0 0 auto;
  color: #79bfd9;
  font-size: 1.65rem;
  font-weight: 900;
  line-height: 1;
}

#page-service-ai-agent-detail .agent-service-intro-grid {
  align-items: stretch;
}

#page-service-ai-agent-detail .agent-service-intro-grid > div {
  display: flex;
  min-height: 250px;
  flex-direction: column;
  justify-content: center;
}

#page-service-ai-agent-detail .agent-service-pain-grid h3,
#page-service-ai-agent-detail .agent-service-module-grid h3,
#page-service-ai-agent-detail .agent-service-usecase-grid h3,
#page-service-ai-agent-detail .agent-service-roadmap-list h3 {
  font-size: 1.15rem;
  line-height: 1.45;
}

#page-service-ai-agent-detail .agent-service-pain-grid p,
#page-service-ai-agent-detail .agent-service-module-grid p,
#page-service-ai-agent-detail .agent-service-check-list li,
#page-service-ai-agent-detail .agent-service-usecase-grid p,
#page-service-ai-agent-detail .agent-service-roadmap-list p {
  font-size: 1rem;
  line-height: 1.72;
}

#page-service-ai-agent-detail .agent-service-privacy-badge,
#page-service-ai-agent-detail .agent-service-figure figcaption {
  font-size: .86rem;
}

#page-service-ai-agent-detail .agent-service-figure-compact img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

#page-service-ai-agent-detail .agent-service-check-list strong {
  display: block;
  margin-bottom: 3px;
}

.agent-service-usecase-grid article {
  overflow: hidden;
  min-height: 390px;
  padding: 0 26px 28px;
}

.agent-service-card-visual {
  height: 190px;
  margin: 0 -26px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.agent-service-usecase-grid h3 {
  margin-top: 12px;
}

.agent-service-roadmap-list li {
  overflow: hidden;
  min-height: 370px;
  padding: 0 22px 24px;
}

.agent-roadmap-visual {
  height: 150px;
  margin: 0 -22px 21px;
  border-bottom: 1px solid rgba(6, 55, 121, .1);
}

@media (max-width: 1100px) {
  .custom-dev-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .custom-dev-hero-copy {
    max-width: 900px;
  }

  .custom-dev-hero-copy .page-hero-title > span {
    white-space: normal;
  }

  .custom-dev-hero-visual {
    width: min(100%, 760px);
  }

  #page-service-custom-detail .custom-dev-intro-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #page-service-custom-detail .custom-dev-blueprint {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .custom-dev-hero-grid {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .custom-dev-hero-copy .page-hero-title {
    font-size: clamp(2.25rem, 11vw, 3.15rem);
    line-height: 1.13;
  }

  .custom-dev-hero-copy .page-hero-title > span,
  .custom-dev-commitment h2 > span {
    display: inline;
  }

  .custom-dev-hero-copy .page-hero-title > span:first-child::after,
  .custom-dev-commitment h2 > span:first-child::after {
    content: " ";
  }

  #page-service-custom-detail .custom-dev-copy > p,
  #page-service-custom-detail .custom-dev-scenario-lead > p,
  #page-service-custom-detail .custom-dev-commitment-grid > div:first-child > p,
  #page-service-custom-detail .section-desc,
  #page-service-ai-agent-detail .agent-service-intro-grid p,
  #page-service-ai-agent-detail .agent-service-onprem-copy > p,
  #page-service-ai-agent-detail .section-desc,
  #page-service-custom-detail .custom-dev-capability-card p,
  #page-service-custom-detail .custom-dev-scenario-grid p,
  #page-service-custom-detail .custom-dev-process-list p,
  #page-service-custom-detail .custom-dev-commitment-cards span,
  #page-service-ai-agent-detail .agent-service-pain-grid p,
  #page-service-ai-agent-detail .agent-service-module-grid p,
  #page-service-ai-agent-detail .agent-service-check-list li,
  #page-service-ai-agent-detail .agent-service-usecase-grid p,
  #page-service-ai-agent-detail .agent-service-roadmap-list p {
    font-size: 1rem;
  }

  #page-service-ai-agent-detail .agent-service-intro-grid > div {
    min-height: 0;
  }

  .custom-dev-process-list li,
  .agent-service-usecase-grid article,
  .agent-service-roadmap-list li {
    min-height: 0;
  }

  .custom-dev-process-visual {
    height: 230px;
  }

  .agent-service-card-visual,
  .agent-roadmap-visual {
    height: 210px;
  }
}
/* Contact form delivery states */
.form-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.form-status {
  min-height: 1.5em;
  margin: 12px 0 0;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ao-text-secondary);
}

.form-status.is-success {
  color: #087a55;
}

.form-status.is-error {
  color: #b42318;
}

button.is-submitting {
  cursor: wait;
  opacity: 0.72;
}

/* ==========================================================================
   共用詳情頁版型與全站響應式護欄
   營造、化工、BEMS、SmartVision 共用 argo-detail 結構。
   ========================================================================== */
img,
video,
canvas,
iframe {
  max-width: 100%;
}

.page-section,
.page-section > main,
.page-section section,
.page-section .container,
.page-section figure,
.page-section article {
  min-width: 0;
}

.argo-detail-page {
  --argo-accent: #69d4ed;
  --argo-accent-strong: #0a82be;
  --argo-hero-start: #031d3f;
  --argo-hero-end: #075f9d;
  background: #f3f9fc;
}

.petro-detail-page {
  --argo-accent: #f4b968;
  --argo-accent-strong: #c46b24;
  --argo-hero-start: #17283a;
  --argo-hero-end: #5b3a2b;
}

.ems-detail-page {
  --argo-accent: #7ddfbd;
  --argo-accent-strong: #14886c;
  --argo-hero-start: #06364d;
  --argo-hero-end: #087f78;
}

.spark-detail-page {
  --argo-accent: #85e5f0;
  --argo-accent-strong: #07889d;
}

.argo-detail-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(76px, 8vw, 118px) 0 clamp(64px, 7vw, 96px);
  color: #fff;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, .13), transparent 29%),
    linear-gradient(132deg, var(--argo-hero-start) 0%, var(--argo-hero-end) 100%);
}

.argo-detail-hero::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, #000, transparent 88%);
}

.argo-detail-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr);
  gap: clamp(40px, 6vw, 86px);
  align-items: center;
}

.argo-detail-hero-copy,
.argo-detail-hero-visual {
  min-width: 0;
}

.argo-detail-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--argo-accent);
  font-size: .83rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.argo-detail-kicker::before {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--argo-accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--argo-accent) 18%, transparent);
  content: "";
}

.argo-detail-hero h1 {
  max-width: 760px;
  margin: 0 0 22px;
  color: #fff;
  font-size: clamp(2.55rem, 4.8vw, 4.6rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.argo-detail-lead {
  max-width: 720px;
  color: rgba(255, 255, 255, .86);
  font-size: clamp(1.02rem, 1.45vw, 1.2rem);
  line-height: 1.85;
}

.argo-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.argo-detail-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 800;
}

.argo-detail-actions .btn-outline-light {
  border: 1px solid rgba(255, 255, 255, .48);
  color: #fff;
  background: rgba(255, 255, 255, .07);
}

.argo-detail-actions .btn-outline-light:hover,
.argo-detail-actions .btn-outline-light:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, .16);
}

.argo-detail-hero-points {
  display: grid;
  gap: 9px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.argo-detail-hero-points li {
  position: relative;
  padding-left: 25px;
  color: rgba(255, 255, 255, .82);
  line-height: 1.6;
}

.argo-detail-hero-points li::before {
  position: absolute;
  top: .66em;
  left: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--argo-accent);
  content: "";
}

.argo-detail-hero-visual {
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 26px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .3);
}

.argo-detail-image-button {
  display: block;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  padding: 0;
  background: #fff;
}

.argo-detail-image-button img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  object-position: center;
  background: #fff;
  transition: transform .45s ease;
}

.argo-detail-image-button:hover img,
.argo-detail-image-button:focus-visible img {
  transform: scale(1.018);
}

.argo-detail-hero-visual figcaption {
  padding: 15px 18px 17px;
  color: #53677a;
  background: #fff;
  font-size: .84rem;
  line-height: 1.55;
  text-align: center;
}

.argo-detail-section-heading {
  max-width: 900px;
  margin: 0 auto 38px;
  text-align: center;
}

.argo-detail-section-heading > span,
.argo-detail-label,
.argo-detail-usecase-card > div > span,
.argo-detail-cta-box > div > span {
  color: var(--argo-accent-strong);
  font-size: .79rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.argo-detail-section-heading h2,
.argo-detail-story-copy h2,
.argo-detail-security-copy h2,
.argo-detail-cta-box h2 {
  margin: 10px 0 14px;
  color: var(--ao-navy);
  font-size: clamp(1.9rem, 3vw, 2.75rem);
  line-height: 1.24;
  text-wrap: balance;
}

.argo-detail-section-heading p,
.argo-detail-story-copy p,
.argo-detail-security-copy p,
.argo-detail-cta-box p {
  color: var(--ao-text-secondary);
  font-size: 1.03rem;
  line-height: 1.82;
}

.argo-detail-value-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.argo-detail-value-grid article {
  min-height: 220px;
  padding: 28px 25px;
  border: 1px solid rgba(6, 55, 121, .1);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 15px 38px rgba(6, 55, 121, .07);
}

.argo-detail-value-grid b {
  display: block;
  margin-bottom: 26px;
  color: var(--argo-accent-strong);
  font-size: 1.55rem;
}

.argo-detail-value-grid h3,
.argo-detail-usecase-card h3 {
  margin-bottom: 10px;
  color: var(--ao-navy);
  font-size: 1.13rem;
  line-height: 1.42;
}

.argo-detail-value-grid p,
.argo-detail-usecase-card p {
  color: var(--ao-text-secondary);
  font-size: .94rem;
  line-height: 1.72;
}

.argo-detail-page .section.argo-detail-story-section {
  background: #fff !important;
}

.argo-detail-story-section .container {
  display: grid;
  gap: 72px;
}

.argo-detail-story {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr);
  gap: clamp(36px, 6vw, 76px);
  align-items: center;
}

.argo-detail-story-reverse {
  grid-template-columns: minmax(420px, 1.12fr) minmax(0, .88fr);
}

.argo-detail-story-reverse .argo-detail-story-copy {
  order: 2;
}

.argo-detail-story-visual {
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(6, 103, 172, .15);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(6, 55, 121, .1);
}

.argo-detail-story-copy ul {
  display: grid;
  gap: 11px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.argo-detail-story-copy li {
  position: relative;
  padding-left: 27px;
  color: var(--ao-text-primary);
  line-height: 1.68;
}

.argo-detail-story-copy li::before {
  position: absolute;
  left: 0;
  color: var(--argo-accent-strong);
  font-weight: 900;
  content: "✓";
}

.argo-detail-page .section.argo-detail-usecases {
  background: linear-gradient(180deg, #eaf5fb 0%, #f5fafc 100%) !important;
}

.argo-detail-usecase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.argo-detail-usecase-card {
  display: grid;
  overflow: hidden;
  min-width: 0;
  grid-template-columns: minmax(220px, .82fr) minmax(0, 1.18fr);
  border: 1px solid rgba(6, 55, 121, .1);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(6, 55, 121, .07);
}

.argo-detail-usecase-card .argo-detail-image-button,
.argo-detail-usecase-card .argo-detail-image-button img {
  height: 100%;
}

.argo-detail-usecase-card .argo-detail-image-button img {
  aspect-ratio: auto;
  object-fit: cover;
}

.argo-detail-usecase-card > div {
  padding: 27px 25px;
}

.argo-detail-page .section.argo-detail-security {
  color: #fff;
  background: linear-gradient(135deg, #042a5c, #075f82) !important;
}

.argo-detail-security-grid {
  display: grid;
  grid-template-columns: minmax(380px, 1fr) minmax(0, 1fr);
  gap: clamp(38px, 6vw, 78px);
  align-items: center;
}

.argo-detail-security-visual {
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 24px 58px rgba(0, 0, 0, .24);
}

.argo-detail-security-copy .argo-detail-label {
  color: var(--argo-accent);
}

.argo-detail-security-copy h2,
.argo-detail-security-copy p {
  color: #fff;
}

.argo-detail-security-copy p {
  opacity: .84;
}

.argo-detail-security-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 25px;
}

.argo-detail-security-tags span {
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  font-size: .86rem;
  font-weight: 800;
}

.argo-detail-cta {
  padding-top: 74px;
  padding-bottom: 74px;
}

.argo-detail-cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  padding: clamp(30px, 5vw, 52px);
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(125deg, #063779 0%, #076eac 100%);
  box-shadow: 0 24px 60px rgba(6, 55, 121, .2);
}

.argo-detail-cta-box > div {
  max-width: 850px;
}

.argo-detail-cta-box > div > span {
  color: #8de4f1;
}

.argo-detail-cta-box h2,
.argo-detail-cta-box p {
  color: #fff;
}

.argo-detail-cta-box p {
  opacity: .82;
}

.argo-detail-cta-box > .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 導覽列在窄桌面與平板即切換，避免 Logo、選單與 CTA 互相擠壓。 */
@media (max-width: 1180px) {
  .navbar {
    position: relative;
    height: 70px;
    padding: 0 24px;
  }

  .nav-brand {
    min-width: 0;
  }

  .nav-brand-logo {
    width: clamp(158px, 26vw, 205px);
    height: 50px;
  }

  .navbar > .btn-ao-coral {
    display: none;
  }

  .mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(6, 55, 121, .14);
    border-radius: 12px;
    background: rgba(255, 255, 255, .92);
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1;
  }

  .nav-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 16px;
    left: 16px;
    z-index: 1200;
    display: none;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px;
    border: 1px solid rgba(6, 55, 121, .12);
    border-radius: 18px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 22px 55px rgba(6, 55, 121, .2);
    backdrop-filter: blur(20px);
  }

  .nav-menu.is-open {
    display: flex;
  }

  .nav-item,
  .nav-link {
    width: 100%;
  }

  .nav-link {
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 10px;
  }

  .nav-link:hover,
  .nav-link.active {
    background: #eef7fb;
  }

  .dropdown-menu {
    position: static;
    display: block;
    min-width: 0;
    padding: 0 0 7px 16px;
    border: 0;
    border-radius: 0;
    opacity: 1;
    pointer-events: auto;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .dropdown-item a {
    padding: 8px 14px;
    font-size: .95rem;
  }

  .dropdown-item a:hover {
    padding-left: 18px;
  }
}

@media (max-width: 1050px) {
  .argo-detail-hero-grid,
  .argo-detail-story,
  .argo-detail-story-reverse,
  .argo-detail-security-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .argo-detail-hero-visual,
  .argo-detail-story-visual,
  .argo-detail-security-visual {
    width: min(100%, 820px);
  }

  .argo-detail-story-reverse .argo-detail-story-copy {
    order: 0;
  }

  .argo-detail-value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .argo-detail-usecase-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .argo-detail-usecase-card .argo-detail-image-button img {
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}

@media (max-width: 720px) {
  .navbar {
    height: 66px;
    padding: 0 16px;
  }

  .nav-brand-logo {
    width: min(48vw, 176px);
    height: 46px;
  }

  .argo-detail-hero {
    padding: 58px 0 52px;
  }

  .argo-detail-page .container {
    width: 100%;
    max-width: 100%;
    padding-right: 20px;
    padding-left: 20px;
  }

  .argo-detail-page .section {
    padding-top: 68px;
    padding-bottom: 68px;
  }

  .argo-detail-kicker {
    align-items: flex-start;
    overflow-wrap: anywhere;
    line-height: 1.55;
  }

  .argo-detail-hero h1 {
    font-size: clamp(2.15rem, 10.5vw, 3.05rem);
    letter-spacing: -.03em;
  }

  .argo-detail-actions,
  .argo-detail-cta-box {
    align-items: stretch;
    flex-direction: column;
  }

  .argo-detail-actions > *,
  .argo-detail-cta-box > .btn {
    width: 100%;
    white-space: normal;
    text-align: center;
  }

  .argo-detail-value-grid,
  .argo-detail-usecase-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .argo-detail-value-grid article {
    min-height: 0;
  }

  .argo-detail-story-section .container {
    gap: 54px;
  }

  .argo-detail-usecase-card > div {
    padding: 24px 22px 27px;
  }

  .argo-detail-cta {
    padding-top: 54px;
    padding-bottom: 54px;
  }

  .argo-detail-cta-box {
    padding: 28px 22px;
    border-radius: 22px;
  }
}