:root {
  /* 全站縮放單位的預設值（桌機 1920 版面 / 手機 640 版面）。
     各區塊仍會在自己身上宣告一次、以自己的為準；這裡是保險：
     像 .ai-pop 這種可能被搬離原區塊使用的元件，若拿不到 --u，
     所有 calc() 會整條失效 → 寬高／內距全部歸零，版面直接塌掉。 */
  --u: 1px;
  --overview-bg: #02070d;
  --overview-deep: #05182a;
  --overview-cyan: #35dff4;
  --overview-blue: #2777e9;
  --overview-text: #ffffff;
  --overview-muted: #d2e5eb;
  /* overview / hardware / software-resilience 說明文字共用 */
  --section-notes-size: 12px;
  --section-notes-leading: 20px;
  --section-notes-tracking: .96px;
  --section-notes-weight: 200;
}


@media (min-width: 769px) and (max-width: 1391px) {
  :root {
    --u: .0718391vw;
  }
}

@media (max-width: 768px) {
  :root {
    --u: min(.15625vw, 1px);
    --section-notes-size: calc(10 * var(--u));
    --section-notes-leading: calc(20 * var(--u));
    --section-notes-tracking: calc(.96 * var(--u));
  }
}

* {
  box-sizing: border-box;
}

html {
  max-width: 100%;
  /* clip 不建立捲動容器，sticky 視差才有效；舊瀏覽器 fallback hidden */
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* 需求單錨點：跳轉時略留上方空間，標題不會貼齊視窗頂 */
#overview,
#hardware,
#software,
#services,
#ai,
#future,
#portfolio,
#resources,
#event {
  scroll-margin-top: 24px;
}

body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--overview-bg);
  color: var(--overview-text);
  font-family: Roboto, "Noto Sans TC", sans-serif;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

/* 螢幕閱讀器／SEO 用主標，不影響視覺切版 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.powerstore-overview {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 909px;
  padding: 50px 0 64px;
  background: #000;
}

.powerstore-overview::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(1, 6, 12, .25) 0%, rgba(1, 5, 11, .6) 100%),
    url("../images/hex-grid.png") center 48% / cover no-repeat;
  content: "";
  opacity: .6;
}

.powerstore-overview::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 50% 56%, rgba(34, 106, 255, .28), transparent 40%),
    linear-gradient(90deg, rgba(0, 5, 11, .72), transparent 28%, transparent 72%, rgba(0, 5, 11, .72));
  content: "";
}

.overview-shell {
  width: min(1543px, calc(100% - 64px));
  margin: 0 auto;
}

.overview-heading {
  text-align: center;
}

.overview-heading h2 {
  display: flex;
  justify-content: center;
  margin: 0;
  font-family: Roboto, "Noto Sans TC", sans-serif;
  font-size: clamp(30px, 3.1vw, 46px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.1rem;
}

.overview-heading h2 span {
  position: relative;
  display: inline-block;
  min-width: 513px;
  padding: 14px 48px 16px;
  border: 0;
  background: linear-gradient(110deg, transparent 0 9%, rgba(75, 136, 190, .86) 9% 92%, transparent 92%);
  color: #fff;
  text-shadow: 0 0 18px rgba(76, 221, 255, .3);
}

.overview-heading h2 span::before,
.overview-heading h2 span::after {
  position: absolute;
  top: -2px;
  width: 28px;
  height: calc(100% + 4px);
  content: "";
}

.overview-heading h2 span::before {
  left: 0;
  border-top: 1px solid #25e8f3;
  border-left: 1px solid #25e8f3;
  transform: skewX(-38deg);
}

.overview-heading h2 span::after {
  right: 0;
  border-bottom: 1px solid #25e8f3;
  border-right: 1px solid #25e8f3;
  transform: skewX(-38deg);
}

.overview-copy {
  max-width: 1543px;
  margin: 18px auto 0;
  color: var(--overview-muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.9;
}

.overview-copy span {
  color: var(--overview-cyan);
  font-weight: 700;
}

/* 手機才在「簡化操作」前斷行；桌機隱藏 */
.overview-mobile-break {
  display: none;
}

.overview-cards {
  display: grid;
  grid-template-columns: 372fr 431fr 482fr;
  gap: 24px;
  width: min(1333px, 100%);
  margin: 39px auto 0;
}

.overview-card {
  position: relative;
  overflow: hidden;
  min-height: 268px;
  border: 1px solid #1bdeed;
  border-radius: 9px;
  background:
    linear-gradient(180deg, #08aecd 0, #006278 24%, #00151d 25%, #00151d 100%);
  box-shadow:
    inset 0 0 32px rgba(35, 191, 237, .13),
    0 0 20px rgba(7, 96, 156, .2);
}

.overview-card::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 44%, rgba(69, 209, 255, .06) 45%, transparent 46%);
  content: "";
  pointer-events: none;
}

.overview-card h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 66px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(82, 224, 255, .4);
  background: linear-gradient(180deg, #14c7e4, #0184a7);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .05em;
  text-align: center;
}

.metric-columns,
.ai-columns {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  height: 202px;
  padding: 10px 13px 14px;
}

.metric-columns::before,
.ai-columns::before {
  position: absolute;
  top: 25px;
  bottom: 26px;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, rgba(70, 218, 247, .78), transparent);
  content: "";
}

.metric {
  text-align: center;
}

.metric strong {
  display: block;
  color: var(--overview-cyan);
  font-family: Roboto, "Noto Sans TC", sans-serif;
  font-size: clamp(48px, 4.7vw, 72px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .06em;
  text-shadow: 0 0 20px rgba(30, 209, 248, .28);
}

.metric strong span {
  margin-left: 0;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

/* 「3倍」：以 CSS 拉開字距，不用空格 */
.overview-card-performance .metric strong span {
  margin-left: .1em;
}

.metric em {
  display: block;
  width: 140px;
  max-width: 100%;
  margin: 0 auto 5px;
  padding-bottom: 3px;
  border-bottom: 2px solid #15cfe2;
  color: #e9feff;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.metric p,
.private-cloud p {
  margin: 8px 0 0;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.metric sup {
  margin-left: 2px;
  color: #fff;
  font-size: 9px;
  background: none;
  -webkit-text-fill-color: #fff;
}

.future-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: center;
  gap: 14px;
  height: 202px;
  padding: 15px 16px 13px;
}

.growth-chart {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 122px;
  padding: 14px 8px 7px 9px;
  border-bottom: 1px solid rgba(79, 222, 253, .72);
  border-left: 1px solid rgba(79, 222, 253, .72);
}

.growth-chart::after {
  position: absolute;
  top: 5px;
  right: 5px;
  left: 8px;
  height: 72%;
  border-top: 2px solid #5fe7f9;
  border-radius: 50% 50% 0 0;
  content: "";
  opacity: .78;
  transform: rotate(-20deg) translateY(28px);
  transform-origin: bottom left;
}

.growth-chart span {
  flex: 1;
  height: var(--bar-height);
  min-width: 12px;
  border: 1px solid rgba(85, 226, 252, .85);
  background: linear-gradient(180deg, #39d7f3, #1767c7);
  box-shadow: 0 0 12px rgba(39, 198, 244, .25);
}

.future-content ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  color: #effdff;
  font-size: 13px;
  line-height: 1.45;
  list-style: none;
}

.future-content li {
  position: relative;
  padding-left: 16px;
}

.future-content li::before {
  position: absolute;
  top: .48em;
  left: 0;
  width: 11px;
  height: 6px;
  border-bottom: 1px solid #f2cf57;
  border-left: 1px solid #f2cf57;
  content: "";
  transform: rotate(-45deg);
}

.future-caption {
  position: absolute;
  bottom: 10px;
  left: 17px;
  margin: 0;
  color: #ecfcff;
  font-size: 11px;
}

.future-caption-tablet-break {
  display: none;
}

.ai-metric strong {
  font-size: clamp(58px, 5vw, 82px);
}

.private-cloud {
  padding: 0 8px;
  text-align: center;
}

.private-cloud strong {
  display: block;
  color: var(--overview-cyan);
  font-family: Roboto, "Noto Sans TC", sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.overview-notes {
  display: grid;
  gap: 3px;
  width: max-content;
  max-width: 100%;
  margin: 38px auto 0;
  color: rgba(218, 236, 242, .74);
  font-weight: var(--section-notes-weight);
  font-size: var(--section-notes-size);
  line-height: var(--section-notes-leading);
  letter-spacing: var(--section-notes-tracking);
  text-align: left;
}

.overview-card-icon {
  position: relative;
  display: inline-block;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border: 2px solid #e8fdff;
  border-radius: 50%;
}

.overview-card-icon::before,
.overview-card-icon::after {
  position: absolute;
  content: "";
}

.performance-icon::before {
  top: 12px;
  left: 3px;
  width: 18px;
  border-top: 2px solid #e8fdff;
  transform: rotate(-28deg);
}

.performance-icon::after {
  top: 4px;
  left: 12px;
  width: 2px;
  height: 18px;
  background: #e8fdff;
}

.future-icon {
  border-color: #f5d75f;
  border-radius: 12px 12px 8px 8px;
}

.future-icon::before {
  right: -8px;
  bottom: 1px;
  width: 13px;
  height: 9px;
  border-radius: 8px;
  background: #f5d75f;
}

.ai-icon {
  border-radius: 6px;
}

.ai-icon::before {
  top: 6px;
  left: 5px;
  width: 14px;
  height: 8px;
  border: 2px solid #e8fdff;
}

.ai-icon::after {
  bottom: -5px;
  left: 6px;
  width: 13px;
  height: 5px;
  border: 2px solid #e8fdff;
  border-top: 0;
}

@media (max-width: 900px) {
  .powerstore-overview {
    padding-top: 66px;
  }

  .overview-shell {
    width: min(720px, calc(100% - 40px));
  }

  .overview-heading h2 span {
    min-width: 310px;
  }
}

@media (max-width: 768px) {
  .powerstore-overview {
    min-height: 0;
    padding: 53px 0 50px;
  }

  .powerstore-overview::before {
    background-position: 61% top;
    opacity: .5;
  }

  .overview-shell {
    width: calc(100% - 34px);
  }

  .overview-heading h2 {
    font-size: 29px;
  }

  .overview-heading h2 span {
    min-width: 0;
    padding: 11px 33px 13px;
  }

  .overview-heading h2 span::before,
  .overview-heading h2 span::after {
    width: 27px;
  }

  .overview-heading h2 span::before {
    left: -14px;
  }

  .overview-heading h2 span::after {
    right: -14px;
  }

  .overview-copy {
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.8;
  }

  .overview-copy br {
    display: none;
  }

  .overview-copy .overview-mobile-break {
    display: inline;
  }

  .overview-cards {
    gap: 16px;
    margin-top: 31px;
  }

  .overview-card {
    min-height: 229px;
  }

  .overview-card h3 {
    padding-block: 11px 12px;
    font-size: 18px;
  }

  .metric-columns,
  .ai-columns,
  .future-content {
    height: 178px;
  }

  .metric strong {
    font-size: 58px;
  }

  .future-content {
    grid-template-columns: 1.1fr .9fr;
    padding-inline: 20px;
  }

  .growth-chart {
    height: 121px;
  }

  .ai-metric strong {
    font-size: 56px;
  }

  .private-cloud strong {
    font-size: 24px;
  }

  .overview-notes {
    margin-top: 15px;
  }
}

@media (max-width: 390px) {
  .overview-heading h2 {
    font-size: 26px;
  }

  .overview-heading h2 span {
    padding-inline: 28px;
  }

  .metric strong {
    font-size: 51px;
  }

  .metric p,
  .private-cloud p {
    font-size: 12px;
  }

  .future-content {
    gap: 10px;
    padding-inline: 14px;
  }

  .future-content ul {
    gap: 10px;
    font-size: 11px;
  }

  .private-cloud strong {
    font-size: 21px;
  }
}

.hardware-innovation {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 704px;
  padding: 65px 0 78px;
  background: #00060b;
}

.hardware-innovation::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: #00060b;
  content: "";
}

.hardware-innovation::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
}

.hardware-shell {
  width: min(1040px, calc(100% - 64px));
  margin: 0 auto;
}

.hardware-heading {
  text-align: center;
}

.hardware-title {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  font-size: clamp(27px, 2.5vw, 36px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .01em;
}

.hardware-title span {
  position: relative;
  display: inline-block;
  min-width: 390px;
  padding: 11px 44px 12px;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
  background: linear-gradient(90deg, rgba(63, 195, 251, .83), rgba(31, 61, 98, .9) 57%, rgba(1, 8, 15, .6));
  text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}

.hardware-title::before {
  position: absolute;
  top: 50%;
  left: -37px;
  width: 42px;
  height: 2px;
  background: #42e7f8;
  box-shadow: -7px 0 0 -1px #42e7f8;
  content: "";
}

.hardware-title::after {
  position: absolute;
  top: calc(50% - 4px);
  left: -43px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #43eef8;
  box-shadow: 0 0 10px rgba(67, 238, 248, .8);
  content: "";
}

.hardware-specs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 31px;
}

.hardware-spec {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 187px;
  padding: 18px 10px 14px;
  border: 1px solid rgba(55, 214, 234, .55);
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, rgba(4, 19, 28, .9), rgba(0, 14, 23, .97));
  box-shadow: inset 0 0 22px rgba(20, 170, 210, .06);
  text-align: center;
}

.hardware-spec svg {
  width: 34px;
  height: 34px;
  margin-bottom: 11px;
  overflow: visible;
  fill: none;
  stroke: #f3b632;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 4px rgba(63, 224, 244, .3));
}

.hardware-spec strong {
  display: block;
  color: #f5fbfd;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.hardware-spec strong span {
  display: block;
  color: #49e7f7;
  font-weight: 500;
}

.hardware-spec p {
  margin: 8px 0 0;
  color: #c9dce2;
  font-size: 11px;
  line-height: 1.45;
}

.hardware-spec sup {
  margin-left: 2px;
  color: #fff;
}

.hardware-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 14px;
  width: calc(100% - 84px);
  margin: 30px auto 0;
}

.hardware-benefits article {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 11px 18px 11px 31px;
  border: 1px solid rgba(46, 211, 226, .62);
  border-radius: 8px;
  background: linear-gradient(100deg, rgba(3, 43, 60, .96), rgba(13, 139, 146, .8));
  box-shadow: inset 0 0 18px rgba(40, 226, 230, .09);
}

.hardware-benefits i {
  position: absolute;
  top: -13px;
  left: -12px;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  background:
    conic-gradient(from 30deg, transparent 0 10%, #4cebf3 11% 19%, transparent 20% 43%, #0d88a4 44% 55%, transparent 56% 100%);
  filter: drop-shadow(0 0 5px rgba(63, 233, 242, .45));
}

.hardware-benefits i::after {
  position: absolute;
  inset: 10px;
  border-top: 2px solid #56edf5;
  border-radius: 50%;
  content: "";
  transform: rotate(-28deg);
}

.hardware-benefits h3 {
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.hardware-benefits p {
  margin: 3px 0 0;
  color: #c9dce2;
  font-size: 10px;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .hardware-shell {
    width: min(720px, calc(100% - 40px));
  }

  .hardware-specs {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .hardware-innovation {
    min-height: 0;
    padding: 50px 0 58px;
  }

  .hardware-shell {
    width: calc(100% - 34px);
  }

  .hardware-title {
    font-size: 25px;
  }

  .hardware-title span {
    min-width: 0;
    padding: 10px 27px 11px 36px;
  }

  .hardware-title::before {
    left: -24px;
    width: 31px;
  }

  .hardware-title::after {
    left: -29px;
    width: 7px;
    height: 7px;
  }

  .hardware-specs {
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    margin-top: 27px;
  }

  .hardware-spec {
    min-height: 176px;
    padding: 16px 8px 12px;
  }

  .hardware-spec-item:last-child {
    grid-column: 1 / -1;
  }

  .hardware-spec-item:last-child .hardware-spec {
    min-height: 166px;
  }

  .hardware-spec strong {
    font-size: 13px;
  }

  .hardware-benefits {
    grid-template-columns: 1fr;
    gap: 14px;
    width: calc(100% - 22px);
    margin-top: 28px;
  }

  .hardware-benefits article {
    min-height: 71px;
    padding: 12px 13px 12px 28px;
  }

  .hardware-benefits h3 {
    font-size: 13px;
  }

  .hardware-benefits p {
    font-size: 9px;
  }
}

@media (max-width: 390px) {
  .hardware-title {
    font-size: 22px;
  }

  .hardware-title span {
    padding-left: 31px;
    padding-right: 21px;
  }

  .hardware-spec {
    min-height: 170px;
  }
}

.software-intelligence {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 650px;
  padding: 68px 0 84px;
  background: #00060b;
}

.software-intelligence::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
}

.software-shell {
  width: min(950px, calc(100% - 64px));
  margin: 0 auto;
}

.software-heading {
  text-align: center;
}

.software-title {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  font-size: clamp(27px, 2.5vw, 36px);
  font-weight: 900;
  line-height: 1.1;
}

.software-title span {
  position: relative;
  display: inline-block;
  min-width: 510px;
  padding: 11px 54px 12px;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  background: linear-gradient(90deg, rgba(54, 177, 232, .8), rgba(30, 57, 92, .9) 55%, rgba(0, 6, 11, .56));
}

.software-title::before {
  position: absolute;
  top: 50%;
  left: -36px;
  width: 40px;
  height: 2px;
  background: #46e8f5;
  content: "";
}

.software-title::after {
  position: absolute;
  top: calc(50% - 4px);
  left: -43px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #46e8f5;
  box-shadow: 0 0 9px rgba(70, 232, 245, .75);
  content: "";
}

.software-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 570px;
  margin: 31px auto 0;
  padding: 7px 42px 10px;
  color: #cce4ea;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.software-tabs::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 1px solid rgba(40, 105, 163, .72);
  background: linear-gradient(90deg, rgba(1, 12, 23, .85), rgba(12, 33, 55, .92), rgba(1, 12, 23, .85));
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
  content: "";
}

.software-tabs span {
  padding: 7px 12px 8px;
  white-space: nowrap;
}

.software-tabs .is-active {
  clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%);
  background: linear-gradient(180deg, #54ecf4, #08aac8);
  box-shadow: 0 0 15px rgba(27, 211, 232, .35);
  color: #fff;
}

.software-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 31px;
}

.software-features article {
  position: relative;
  min-height: 230px;
  overflow: hidden;
  padding: 23px 20px 21px;
  border: 1px solid #67f3fb;
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(42, 133, 145, .92), rgba(51, 213, 222, .97)),
    linear-gradient(135deg, transparent, rgba(255, 255, 255, .15));
  box-shadow:
    inset 0 0 28px rgba(255, 255, 255, .08),
    0 0 15px rgba(21, 179, 199, .09);
}

.software-features article::after {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% -5%, rgba(255, 255, 255, .23), transparent 36%),
    linear-gradient(120deg, transparent 44%, rgba(255, 255, 255, .08) 44.5%, transparent 45%);
  content: "";
  pointer-events: none;
}

.software-features svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .22));
}

.software-features h3,
.software-features p {
  position: relative;
  z-index: 1;
}

.software-features h3 {
  margin: 0;
  color: #fff0a9;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

.software-features p {
  margin: 9px 0 0;
  color: #f0fcfd;
  font-size: 12px;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .software-shell {
    width: min(720px, calc(100% - 40px));
  }

  .software-features {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .software-intelligence {
    min-height: 0;
    padding: 52px 0 63px;
  }

  .software-shell {
    width: calc(100% - 34px);
  }

  .software-title {
    font-size: 23px;
  }

  .software-title span {
    min-width: 0;
    padding: 10px 30px 11px 40px;
  }

  .software-title::before {
    left: -20px;
    width: 27px;
  }

  .software-title::after {
    left: -26px;
    width: 7px;
    height: 7px;
  }

  /* 舊版 tab 邊距已廢止；實際樣式以下方 cards-004-m 為準。 */

  .software-features {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 24px;
  }

  .software-features article {
    min-height: 238px;
    padding: 19px 13px 17px;
  }

  .software-features svg {
    width: 43px;
    height: 43px;
  }

  .software-features h3 {
    font-size: 13px;
  }

  .software-features p {
    font-size: 11px;
    line-height: 1.55;
  }
}

@media (max-width: 390px) {
  .software-title {
    font-size: 20px;
  }

  .software-title span {
    padding-left: 34px;
    padding-right: 24px;
  }

  .software-tabs {
    font-size: 10px;
  }

  .software-features article {
    min-height: 224px;
  }
}


/* ============================================================
   S05 AI 加持 簡化工作（Figma 6333:2311 / 6333:3244）＋ pop-001 彈窗
   與 S04 相同的縮放模型：寬度一律用 %，字級／高度／間距用 --u 等比例縮放。
   ============================================================ */
.ai-management {
  --u: 1px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(40 * var(--u)) 0;
}

@media (min-width: 769px) and (max-width: 1391px) {
  .ai-management {
    --u: .0718391vw;
  }
}

.ai-management-shell {
  width: min(1296px, 93.1034%);
  margin: 0 auto;
}

.ai-management-heading {
  text-align: center;
}

.ai-management-heading .section-title--ai-management {
  --section-title-size: calc(48 * var(--u));
  position: relative;
  left: 50%;
  display: block;
  width: max-content;
  max-width: 100%;
  height: calc(113 * var(--u));
  padding-top: calc(27 * var(--u));
  padding-left: 0;
  overflow: visible;
  transform: translateX(-50%);
}

.ai-management-heading .section-title--ai-management .section-title-bg {
  inset: auto;
  bottom: calc(16 * var(--u));
  left: calc(-125 * var(--u));
  width: calc(325.481 * var(--u));
  height: calc(81 * var(--u));
}

.ai-management-heading .section-title--ai-management > span {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  padding: 0;
  line-height: calc(70 * var(--u));
  letter-spacing: 0.1rem;
  transform: none;
}

.ai-management-heading .section-title--ai-management .section-title-dots {
  right: 0;
  bottom: 0;
  width: calc(70.28 * var(--u));
  height: calc(8.34 * var(--u));
}

/* --- 四張卡片：870 / 1296 = 67.1296%，欄距 40 / 870 = 4.5977% --- */
.ai-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 1fr 讓兩列高度拉齊到最高的那張，四張卡片等高。 */
  grid-template-rows: repeat(2, 1fr);
  column-gap: 4.5977%;
  row-gap: calc(40 * var(--u));
  width: 67.1296%;
  margin: calc(40 * var(--u)) auto 0;
  padding: 0;
  list-style: none;
}

/* grid item 是 <li>，1fr 只讓 <li> 等高；真正的卡片是裡面的 <button>，
   要讓 li 變成 flex 容器（預設 align-items: stretch）按鈕才會撐滿整格，
   否則縮放時文案斷行數不同，四張卡片就會不等高。 */
.ai-cards > li {
  display: flex;
  min-width: 0;
}

.ai-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 卡片被拉高到與同列等高後，上下角框要各自貼齊卡片邊緣，
     用 space-between 讓首尾兩個角框固定在上下緣、文案落在中間。 */
  justify-content: space-between;
  overflow: hidden;
  width: 100%;
  /* 用 min-height 而非固定高度：文案多斷一行時卡片會長高，不會被 overflow 切掉。 */
  min-height: calc(184 * var(--u));
  padding: 0;
  border: calc(2 * var(--u)) solid #0dc1d8;
  background: linear-gradient(180deg, #00468b 30%, #19dcff 100%);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transform: translateY(0);
  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}

/* hover／鍵盤聚焦：微上浮 + 邊框提亮 + 箭頭微動 */
.ai-card:hover,
.ai-card:focus-visible {
  border-color: #7af7ff;
  box-shadow:
    0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(0, 40, 90, .4),
    0 0 calc(36 * var(--u)) rgba(25, 220, 255, .65),
    0 0 calc(64 * var(--u)) rgba(58, 255, 245, .4);
  transform: translateY(calc(-6 * var(--u)));
}

.ai-card:hover .ai-card-glow,
.ai-card:focus-visible .ai-card-glow {
  opacity: 1;
  mix-blend-mode: screen;
}

.ai-card:hover .ai-card-arrow,
.ai-card:focus-visible .ai-card-arrow {
  transform: translate(calc(3 * var(--u)), calc(-3 * var(--u)));
}

.ai-card:focus-visible {
  outline: calc(2 * var(--u)) solid #3afff5;
  outline-offset: calc(4 * var(--u));
}

.ai-card-glow {
  position: absolute;
  bottom: calc(162 * var(--u));
  left: -23.8554%;
  width: 146.988%;
  height: calc(145 * var(--u));
  opacity: .72;
  mix-blend-mode: overlay;
  pointer-events: none;
  transition: opacity .25s ease, mix-blend-mode .25s ease;
}

.ai-card-bracket {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: calc(40 * var(--u));
}

.ai-card-bracket--top {
  margin-bottom: calc(-8 * var(--u));
}

/* 左右內距 60 / 415 = 14.4578% */
.ai-card-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  margin-bottom: calc(-8 * var(--u));
  padding: 0 16%;
}

.ai-card-copy strong {
  font-size: calc(28 * var(--u));
  font-weight: 700;
  line-height: calc(60 * var(--u));
  letter-spacing: calc(2.24 * var(--u));
}

.ai-card-copy > span {
  font-size: calc(20 * var(--u));
  line-height: calc(30 * var(--u));
  letter-spacing: calc(1.6 * var(--u));
}

/* icon-arrow 的實際圖形是 34.1 x 39.5，置於 40 x 40 的圖示框右下角。 */
.ai-card-arrow {
  position: absolute;
  right: calc(11.07 * var(--u));
  bottom: calc(8.5 * var(--u));
  z-index: 2;
  width: calc(34.1 * var(--u));
  height: calc(39.5 * var(--u));
  pointer-events: none;
  transition: transform .25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .ai-card,
  .ai-card-glow,
  .ai-card-arrow {
    transition: none;
  }

  .ai-card:hover,
  .ai-card:focus-visible {
    transform: none;
  }

  .ai-card:hover .ai-card-arrow,
  .ai-card:focus-visible .ai-card-arrow {
    transform: none;
  }
}

/* --- 彈窗 pop-001 --- */
.ai-pop-overlay {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24 * var(--u));
  overflow-y: auto;
  background: rgba(0, 6, 12, .78);
  opacity: 0;
  transition: opacity .25s ease;
}

.ai-pop-overlay[hidden] {
  display: none;
}

.ai-pop-overlay.is-open {
  opacity: 1;
}

.ai-pop {
  --ai-pop-slot-pad: 10.909%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(1100 * var(--u));
  /* pop-001 桌機畫布為 1100 × 480，內容超出時僅由 .ai-pop-body 捲動。 */
  height: min(calc(480 * var(--u)), calc(100dvh - (48 * var(--u))));
  max-width: 100%;
  margin: auto;
  padding-block: calc(40 * var(--u));
  box-sizing: border-box;
  overflow: hidden;
  color: #fff;
  /* Figma 匯出的漸層端點落在畫布外；把手把往外延伸才對得上設計稿的平滑漸層。 */
  background: linear-gradient(180deg, #19dcff -51.095%, #00468b 154.672%);
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transition: opacity .25s ease, transform .25s ease;
}

.ai-pop-overlay.is-open .ai-pop:not([hidden]) {
  opacity: 1;
  transform: none;
}

.ai-pop[hidden] {
  display: none;
}

/* Slot 左右內距：pop-001 各變體在 Figma 的留白不同。 */
.ai-pop--wide {
  --ai-pop-slot-pad: 11.8182%;
}

.ai-pop--narrow {
  --ai-pop-slot-pad: 10%;
}

.ai-pop-bracket {
  display: none;
}

.ai-pop-corners {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.ai-pop-corner {
  position: absolute;
  width: calc(359 * var(--u));
  height: calc(48 * var(--u));
}

.ai-pop-corner--top-left {
  top: 0;
  left: 0;
}

.ai-pop-corner--top-right {
  top: 0;
  right: 0;
  transform: scaleX(-1);
}

.ai-pop-corner--bottom-left {
  bottom: 0;
  left: 0;
  transform: scaleY(-1);
}

.ai-pop-corner--bottom-right {
  right: 0;
  bottom: 0;
  transform: rotate(180deg);
}

/* 內容超出時只捲這一層，外框（四角裝飾與關閉鈕）維持釘在彈窗上不動。
   min-height: 0 是必要的：flex 子元素預設 min-height:auto，不歸零就不會縮、也就捲不動。 */
.ai-pop-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: calc(40 * var(--u));
  align-items: center;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  /* 彈窗底色本身就是青藍漸層，把手用青色會糊在一起；
     改成深色軌道 + 白色把手，在上緣淺青與下緣深藍上都看得清楚。 */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .9) rgba(0, 32, 60, .28);
}

.ai-pop-body::-webkit-scrollbar {
  width: calc(10 * var(--u));
}

.ai-pop-body::-webkit-scrollbar-track {
  margin-block: calc(4 * var(--u));
  border-radius: 999px;
  background: rgba(0, 32, 60, .28);
}

/* 透明邊框 + background-clip 讓把手兩側留白，看起來比較細緻。 */
.ai-pop-body::-webkit-scrollbar-thumb {
  border: calc(2 * var(--u)) solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  background-clip: content-box;
}

.ai-pop-body::-webkit-scrollbar-thumb:hover {
  background: #fff;
  background-clip: content-box;
}

/* 標題區左右內距 60 / 1100 = 5.4545% */
.ai-pop-heading {
  width: 100%;
  padding: 0 5.4545%;
  text-align: center;
}

.ai-pop-heading h3 {
  margin: 0;
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: calc(50 * var(--u));
  letter-spacing: calc(2.56 * var(--u));
}

.ai-pop-heading p {
  margin: 0;
  font-size: calc(20 * var(--u));
  line-height: calc(36 * var(--u));
  letter-spacing: calc(1.6 * var(--u));
}

.ai-pop-slot {
  display: flex;
  gap: 1.4545%;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0 var(--ai-pop-slot-pad);
  list-style: none;
}

.ai-pop-slot li {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: calc(16 * var(--u));
  align-items: flex-start;
  min-width: 0;
  padding: calc(24 * var(--u));
  border: calc(1 * var(--u)) solid #3afff5;
  border-radius: calc(16 * var(--u));
  background: rgba(13, 193, 216, .13);
  backdrop-filter: blur(3px);
}

.ai-pop-slot li > img {
  flex: none;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  object-fit: contain;
}

.ai-pop-slot h4 {
  margin: 0;
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: calc(40 * var(--u));
  letter-spacing: calc(1.92 * var(--u));
}

.ai-pop-slot .ai-pop-title-en {
  font-family: Roboto, "Noto Sans TC", sans-serif;
  white-space: nowrap;
}

.ai-pop-slot h4 sup {
  font-size: calc(15.48 * var(--u));
}

.ai-pop-slot p {
  margin: 0;
  font-size: calc(20 * var(--u));
  line-height: calc(36 * var(--u));
  letter-spacing: calc(1.6 * var(--u));
}

/* 註解左右內距沿用 slot 的 %，讓文字與卡片外緣切齊、不貼彈窗邊。 */
.ai-pop-note {
  width: 100%;
  margin: 0;
  padding: 0 var(--ai-pop-slot-pad);
  box-sizing: border-box;
  font-size: calc(12 * var(--u));
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
}

.ai-pop-close {
  position: absolute;
  top: calc(20 * var(--u));
  right: calc(20 * var(--u));
  z-index: 2;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.ai-pop-close img {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- 彈窗的斷點比其他區塊早（1024 而非 768）---
   桌機的 --u = 視窗寬 / 1392，到平板寬度時整個彈窗會被等比縮到剩下 5～6 成
   （1024 以下內文只剩 11–15px），寬而扁、也讀不清楚。
   因此彈窗在 1024 以下就改用 640 版面的堆疊版：--u 只掛在 .ai-pop-overlay
   身上（覆蓋從 .ai-management 繼承來的值），所以只有彈窗換算面，
   S05 卡片與其他區塊的縮放完全不受影響。 */
@media (max-width: 1024px) {
  .ai-pop-overlay {
    --u: min(.15625vw, 1px);
  }

  /* 560 / 640，卡片改為單欄堆疊 */
  .ai-pop {
    width: calc(560 * var(--u));
    height: auto;
    max-height: calc(100dvh - (48 * var(--u)));
    padding-block: calc(22 * var(--u));
  }

  .ai-pop-body {
    padding: 0 4.2857%;
  }

  .ai-pop-heading {
    padding: 0 11.7188%;
  }

  .ai-pop-slot {
    flex-direction: column;
    gap: calc(16 * var(--u));
    padding: 0;
  }

  .ai-pop-slot li {
    flex: none;
    width: 100%;
  }

  /* slot 已無左右內距，註解改由 .ai-pop-body 的 4.2857% 控制邊距。 */
  .ai-pop-note {
    padding: 0;
    text-align: left;
  }
}

@media (max-width: 768px) {
  .ai-management {
    --u: min(.15625vw, 1px);
    padding: calc(40 * var(--u)) 0;
  }

  .ai-management-shell {
    width: 78.125%;
  }

  .ai-management-heading .section-title--ai-management {
    --section-title-size: calc(40 * var(--u));
    height: calc(84 * var(--u));
    padding-top: calc(24 * var(--u));
    padding-bottom: calc(12 * var(--u));
    padding-left: 0;
  }

  .ai-management-heading .section-title--ai-management .section-title-bg {
    top: calc(9 * var(--u));
    bottom: auto;
    left: calc(-77.193 * var(--u));
    width: calc(265.193 * var(--u));
    height: calc(66 * var(--u));
  }

  .ai-management-heading .section-title--ai-management > span {
    line-height: calc(48 * var(--u));
    letter-spacing: 0.1rem;
  }

  .ai-management-heading .section-title--ai-management .section-title-dots {
    right: 0;
    width: calc(57.262 * var(--u));
    height: calc(6.795 * var(--u));
  }

  /* 500 寬、欄距 16 → 3.2% */
  .ai-cards {
    column-gap: 3.2%;
    row-gap: calc(16 * var(--u));
    width: 100%;
  }

  .ai-card {
    min-height: calc(175 * var(--u));
    border-width: calc(1.149 * var(--u));
  }

  .ai-card-glow {
    bottom: calc(143.1 * var(--u));
    left: -23.7083%;
    width: 146.073%;
    height: calc(83.333 * var(--u));
  }

  .ai-card-bracket {
    height: calc(24 * var(--u));
  }

  .ai-card-bracket--top {
    margin-bottom: 0;
  }

  /* 左右內距 16 / 240 = 6.6667%，上下由 gap 16 控制 */
  .ai-card-copy {
    margin: calc(16 * var(--u)) 0;
    padding: 0 6.6667%;
  }

  .ai-card-copy strong {
    font-size: calc(24 * var(--u));
    line-height: calc(34.483 * var(--u));
    letter-spacing: calc(1.92 * var(--u));
  }

  .ai-card-copy > span {
    font-size: calc(20 * var(--u));
    line-height: calc(30 * var(--u));
  }

  .ai-card-arrow {
    right: calc(6.51 * var(--u));
    bottom: calc(9.1 * var(--u));
    width: calc(20.5 * var(--u));
    height: calc(23.7 * var(--u));
  }

}

/* 可重用標題元件：底圖與右下裝飾由 SVG 定位，文字維持於最上層。 */
.section-title {
  --section-title-width: 560px;
  --section-title-size: 36px;
  --section-title-height: 113px;
  --section-title-text-offset: 0px;
  position: relative;
  left: 50%;
  display: grid;
  place-items: center;
  width: min(var(--section-title-width), 100%);
  height: var(--section-title-height);
  margin: 0;
  color: #fff;
  font-size: var(--section-title-size);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.1rem;
  text-align: center;
  transform: translateX(-50%);
}

.section-title-bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.section-title-dots {
  position: absolute;
  z-index: 2;
  right: 9%;
  bottom: 0;
  width: min(100px, 18%);
  height: 32px;
  pointer-events: none;
}

.section-title > span {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0 9% 8px;
  border: 0;
  background: none;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
  transform: translate(var(--section-title-text-offset), -2px);
  white-space: nowrap;
  letter-spacing: 0.1rem;
}

.overview-heading .section-title {
  display: grid;
  font-size: var(--section-title-size);
}

.overview-heading .section-title > span {
  min-width: 0;
  padding: 0 7%;
  border: 0;
  background: none;
}

.section-title::before,
.section-title::after,
.section-title > span::before,
.section-title > span::after,
.overview-heading .section-title > span::before,
.overview-heading .section-title > span::after {
  display: none;
}

.section-title--overview {
  --section-title-width: 606px;
  --section-title-size: 48px;
  --section-title-height: 120px;
  --section-title-text-offset: 0px;
}

.overview-heading .section-title--overview > span {
  width: 100%;
  padding-inline: 2%;
  white-space: nowrap;
}

.section-title--hardware {
  --section-title-width: 573px;
}

.section-title--software {
  --section-title-width: 773px;
}

.section-title--lifecycle {
  --section-title-width: 972px;
}

.section-title--ai-management {
  --section-title-width: 500px;
}

@media (max-width: 768px) {
  .section-title {
    --section-title-size: 23px;
    --section-title-height: 72px;
  }

  .section-title--overview {
    --section-title-size: 28px;
    --section-title-height: 80px;
    --section-title-text-offset: 0px;
  }
}

@media (max-width: 390px) {
  .section-title {
    --section-title-size: 20px;
    --section-title-height: 60px;
  }

  .section-title--overview {
    --section-title-size: 25px;
    --section-title-height: 68px;
    --section-title-text-offset: 0px;
  }
}

/* 03_landing 首區：使用 Figma 匯出的背景、圖示與裝飾資產。 */
.powerstore-overview {
  --overview-title-size: clamp(32px, 2.5vw, 48px);
  --overview-copy-size: clamp(20px, 1.25vw, 24px);
  --overview-copy-leading: clamp(30px, 2.084vw, 40px);
  --overview-card-title-size: clamp(20px, 1.46vw, 28px);
  --overview-card-copy-size: clamp(15px, 1.042vw, 20px);
  min-height: 909px;
  padding: 50px 0 100px;
  background: #000;
}

.overview-heading .section-title--overview {
  --section-title-width: 513px;
  --section-title-height: 113px;
  --section-title-size: var(--overview-title-size);
  --section-title-text-offset: 0px;
  display: block;
  width: max-content;
  max-width: calc(100vw - 32px);
  height: 113px;
  padding-top: 27px;
  padding-left: 0;
  overflow: visible;
  transform: translateX(-50%);
}

.section-title--overview .section-title-bg {
  inset: auto;
  bottom: 16px;
  left: -125px;
  width: 325.481px;
  height: 81px;
}

.overview-heading .section-title--overview > span {
  position: relative;
  z-index: 1;
  bottom: auto;
  left: auto;
  width: auto;
  padding: 0;
  line-height: 70px;
  transform: none;
}

.section-title--overview .section-title-dots {
  right: -5%;
  bottom: 0;
  width: 70.28px;
  height: 8.34px;
}

.overview-copy {
  max-width: 1543px;
  margin-top: 24px;
  color: #e4e4e4;
  font-size: var(--overview-copy-size);
  line-height: var(--overview-copy-leading);
  letter-spacing: 1.92px;
}

.overview-cards {
  grid-template-columns: 372fr 431fr 482fr;
  gap: 24px;
  width: min(1333px, 100%);
  margin-top: 40px;
}

.overview-card {
  min-height: 268px;
  border-color: #3afff5;
  border-radius: 16px;
  background: rgba(13, 193, 216, .13);
  backdrop-filter: blur(1px);
  box-shadow: none;
}

.overview-card h3 {
  gap: 8px;
  height: 66px;
  padding: 8px 16px;
  border: 0;
  background: linear-gradient(180deg, #0dc1d8, #002a58);
  font-size: var(--overview-card-title-size);
  font-weight: 500;
  line-height: 40px;
}

.overview-card h3 > img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.metric-columns,
.ai-columns {
  height: 202px;
  padding: 16px;
}

.metric-columns::before,
.ai-columns::before,
.metric em {
  display: none;
}

.metric {
  position: relative;
  display: grid;
  /* 標籤 31 → 數字 y:38（間距 7），對齊桌機 Frame 55 */
  grid-template-rows: 31px auto auto;
  row-gap: 7px;
  align-items: start;
  width: 170px;
  height: 170px;
}

.metric strong {
  font-size: 64px;
  line-height: 64px;
  letter-spacing: .06em;
  background: linear-gradient(26deg, #3afff5 31%, #1f6dff 76%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

.metric p,
.private-cloud p {
  margin-top: 0;
  font-size: var(--overview-card-copy-size);
  line-height: clamp(24px, 1.563vw, 30px);
}

.metric p {
  min-height: 60px;
}

.metric sup,
.overview-notes sup {
  color: #fff;
  font-size: 12.9px;
  line-height: 1;
  vertical-align: super;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #fff;
}

.metric-label {
  position: relative;
  display: block;
  width: 150px;
  height: 31px;
  margin: 0 auto;
}

.metric-label img {
  position: absolute;
  bottom: 0;
  left: 5px;
  width: 140px;
  height: 5px;
}

.metric-label b {
  position: absolute;
  top: 0;
  left: 50%;
  color: #3afff5;
  font-size: 20px;
  line-height: 24px;
  transform: translateX(-50%);
}

.future-content {
  grid-template-columns: 180px 195px;
  align-items: center;
  gap: 24px;
  height: 202px;
  padding: 16px;
}

.future-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 180px;
}

.growth-chart {
  display: grid;
  place-items: center;
  width: 180px;
  height: auto;
  padding: 0;
  border: 0;
}

.growth-chart::after,
.growth-chart span {
  display: none;
}

.growth-chart img {
  width: 120px;
  height: 120px;
}

.future-content ul {
  gap: 16px;
  align-content: center;
  font-size: var(--overview-card-copy-size);
  line-height: clamp(24px, 1.563vw, 30px);
}

.future-content li {
  display: flex;
  align-items: center;
  padding: 0;
  white-space: nowrap;
}

.future-content li::before {
  display: none;
}

.future-content li img {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.future-caption {
  position: static;
  bottom: auto;
  left: auto;
  width: 100%;
  margin: 0;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
}

.ai-metric {
  display: block;
  width: 232px;
  height: auto;
}

.ai-metric strong {
  display: block;
  height: 120px;
  font-size: 100px;
  line-height: 120px;
  letter-spacing: normal;
  font-weight: 600;
}

.ai-metric p {
  min-height: 0;
}

.private-cloud {
  width: 218px;
  padding: 0;
}

.private-cloud strong {
  height: 120px;
  color: #fff;
  font-size: 40px;
  line-height: 40px;
  white-space: nowrap;
}

.overview-notes {
  width: max-content;
  max-width: 100%;
  margin: 40px auto 0;
  color: #fff;
  font-weight: var(--section-notes-weight);
  font-size: var(--section-notes-size);
  line-height: var(--section-notes-leading);
  letter-spacing: var(--section-notes-tracking);
  text-align: left;
}

/* 手機字級／間距：以 640 設計稿為準（--u = min(.15625vw, 1px)），更小螢幕等比例縮小 */
@media (max-width: 768px) {
  .powerstore-overview {
    --overview-title-size: calc(40 * var(--u));
    --overview-copy-size: calc(20 * var(--u));
    --overview-copy-leading: calc(30 * var(--u));
    --overview-card-title-size: calc(26 * var(--u));
    --overview-card-copy-size: calc(20 * var(--u));
    min-height: 0;
    padding: calc(24 * var(--u)) 0 calc(40 * var(--u));
  }

  .overview-shell {
    width: min(calc(560 * var(--u)), calc(100% - calc(80 * var(--u))));
    max-width: none;
  }

  .overview-heading .section-title--overview {
    --section-title-width: calc(424 * var(--u));
    --section-title-height: calc(84 * var(--u));
    --section-title-size: var(--overview-title-size);
    height: var(--section-title-height);
    padding-top: calc(24 * var(--u));
    padding-bottom: calc(12 * var(--u));
    padding-left: 0;
    transform: translateX(-50%);
  }

  .section-title--overview .section-title-bg {
    top: calc(9 * var(--u));
    bottom: auto;
    left: calc(-93 * var(--u));
    width: calc(269 * var(--u));
    height: calc(66 * var(--u));
  }

  .overview-heading .section-title--overview > span {
    bottom: auto;
    left: auto;
    line-height: calc(48 * var(--u));
  }

  .section-title--overview .section-title-dots {
    width: calc(52 * var(--u));
    height: calc(6.2 * var(--u));
  }

  .overview-copy {
    margin-top: calc(40 * var(--u));
    font-size: var(--overview-copy-size);
    line-height: var(--overview-copy-leading);
    letter-spacing: calc(1.6 * var(--u));
  }

  .overview-copy br,
  .overview-copy .overview-desktop-break {
    display: none;
  }

  .overview-copy .overview-mobile-break {
    display: inline;
  }

  /* overview-cards：03_landing_m Frame 54（500 寬、gap 16；三卡 291／273／255） */
  .overview-cards {
    display: grid;
    grid-template-columns: calc(500 * var(--u));
    justify-content: center;
    gap: calc(16 * var(--u));
    width: calc(500 * var(--u));
    max-width: none;
    margin: calc(40 * var(--u)) auto 0;
  }

  .overview-card,
  .overview-card:first-child,
  .overview-card:last-child {
    display: flex;
    flex-direction: column;
    width: calc(500 * var(--u));
    min-height: 0;
    overflow: hidden;
    border-radius: calc(16 * var(--u));
  }

  .overview-card-performance {
    height: calc(291 * var(--u));
  }

  .overview-card-future {
    height: calc(273 * var(--u));
  }

  .overview-card-ai {
    height: calc(255 * var(--u));
  }

  .overview-card h3 {
    flex: 0 0 calc(63 * var(--u));
    gap: calc(8 * var(--u));
    height: calc(63 * var(--u));
    padding: calc(8 * var(--u)) calc(16 * var(--u));
    font-size: var(--overview-card-title-size);
    line-height: calc(40 * var(--u));
  }

  .overview-card h3 > img {
    width: calc(48 * var(--u));
    height: calc(48 * var(--u));
  }

  .metric-columns {
    flex: 1 1 auto;
    grid-template-columns: calc(163 * var(--u)) calc(163 * var(--u));
    justify-content: space-between;
    column-gap: calc(40 * var(--u));
    align-items: start;
    height: calc(228 * var(--u));
    padding: calc(24 * var(--u)) calc(67 * var(--u));
  }

  .metric {
    width: calc(163 * var(--u));
    height: calc(180 * var(--u));
    /* 標籤列 → 數字約 15（對齊稿：label 底 ~30、數字 top ~45） */
    grid-template-rows: calc(30 * var(--u)) auto auto;
    row-gap: calc(15 * var(--u));
  }

  .metric strong {
    margin-top: 0;
    font-size: calc(64 * var(--u));
    line-height: calc(62 * var(--u));
    letter-spacing: .06em;
  }

  .metric-label {
    width: calc(144 * var(--u));
    height: calc(30 * var(--u));
  }

  .metric-label img {
    left: 50%;
    width: calc(134 * var(--u));
    height: calc(5 * var(--u));
    transform: translateX(-50%);
  }

  .metric-label b {
    font-size: calc(20 * var(--u));
    line-height: calc(24 * var(--u));
  }

  .metric p {
    min-height: 0;
    font-size: var(--overview-card-copy-size);
    line-height: calc(29 * var(--u));
  }

  .future-content {
    flex: 1 1 auto;
    grid-template-columns: calc(180 * var(--u)) calc(194 * var(--u));
    column-gap: calc(40 * var(--u));
    row-gap: 0;
    align-items: center;
    height: calc(210 * var(--u));
    padding: calc(24 * var(--u)) calc(43 * var(--u));
  }

  .future-visual {
    width: calc(180 * var(--u));
  }

  .growth-chart {
    width: calc(180 * var(--u));
    height: auto;
  }

  .growth-chart img {
    width: calc(115 * var(--u));
    height: calc(115 * var(--u));
  }

  .future-content ul {
    gap: calc(15 * var(--u));
    align-content: center;
    font-size: var(--overview-card-copy-size);
    line-height: calc(29 * var(--u));
  }

  .future-content li {
    align-items: center;
    padding: 0;
    white-space: nowrap;
  }

  .future-content li img {
    flex: 0 0 calc(23 * var(--u));
    width: calc(23 * var(--u));
    height: calc(23 * var(--u));
    margin-right: calc(8 * var(--u));
  }

  .future-caption {
    position: static;
    width: 100%;
    font-size: calc(20 * var(--u));
    line-height: calc(29 * var(--u));
    text-align: center;
  }

  .ai-columns {
    flex: 1 1 auto;
    grid-template-columns: calc(222 * var(--u)) calc(209 * var(--u));
    justify-content: space-between;
    column-gap: calc(40 * var(--u));
    align-items: start;
    height: calc(192 * var(--u));
    padding: calc(24 * var(--u)) calc(14 * var(--u));
  }

  .ai-metric {
    width: calc(222 * var(--u));
  }

  .ai-metric strong {
    height: calc(115 * var(--u));
    font-size: calc(100 * var(--u));
    line-height: calc(115 * var(--u));
    letter-spacing: 0;
  }

  .ai-metric p,
  .private-cloud p {
    font-size: var(--overview-card-copy-size);
    line-height: calc(29 * var(--u));
  }

  .private-cloud {
    width: calc(209 * var(--u));
  }

  .private-cloud strong {
    height: calc(115 * var(--u));
    font-size: calc(40 * var(--u));
    line-height: calc(38 * var(--u));
    white-space: normal;
  }

  .overview-notes {
    width: max-content;
    max-width: 100%;
    margin: calc(40 * var(--u)) auto 0;
    text-align: left;
  }
}

/* 03_landing 第二區：Figma 匯出的 Icon、標題與卡片裝飾。 */
.hardware-innovation {
  min-height: 967px;
  padding: 40px 0;
  background: #000;
}

.hardware-shell {
  width: min(1274px, calc(100% - 64px));
}

.hardware-heading .section-title--hardware {
  --section-title-size: 48px;
  position: relative;
  left: 50%;
  display: block;
  width: max-content;
  height: 113px;
  max-width: calc(100vw - 32px);
  padding-top: 27px;
  padding-left: 0;
  overflow: visible;
  transform: translateX(-50%);
}

.hardware-heading .section-title--hardware .section-title-bg {
  inset: auto;
  bottom: 16px;
  left: -125px;
  width: 325.481px;
  height: 81px;
}

.hardware-heading .section-title--hardware > span {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  padding: 0;
  font-size: inherit;
  /* 行高改由 .section-title--bracket > span 的 --u 規則統一，避免平板固定 70px 把字頂到框上緣 */
  transform: none;
}

.hardware-heading .section-title--hardware .section-title-dots {
  right: 0;
  bottom: 0;
  width: 70.28px;
  height: 8.34px;
}

.hardware-mobile-break {
  display: none;
}

.hardware-specs {
  grid-template-columns: repeat(5, 224px);
  justify-content: center;
  gap: 16px;
  margin: 40px auto;
  overflow: visible;
}

/* AOS 外層：承接 fade-up，避免卡片本體被 transform + overflow:hidden 弄壞描邊 */
.hardware-spec-item {
  min-width: 0;
}

.hardware-spec-item .hardware-spec {
  height: 100%;
}

/* 明確補上 opacity，避免只剩 transform 被覆蓋時看起來「沒動畫」 */
.hardware-specs [data-aos="fade-up"] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}

.hardware-specs [data-aos="fade-up"].aos-animate {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.hardware-spec {
  --hw-spec-radius: 40px;
  --hw-spec-stroke: 2px;
  --hw-spec-cyan: #0dc1d8;
  position: relative;
  min-height: 224px;
  padding: 20px;
  overflow: hidden;
  border: 0;
  border-radius: 0 var(--hw-spec-radius) 0 0;
  background:
    radial-gradient(120% 120% at 100% 100%, rgba(237, 253, 255, .4) 0%, rgba(125, 223, 236, .2) 42%, rgba(13, 193, 216, 0) 85%),
    #000;
  box-shadow: none;
}

/* 左側＋頂邊（圓角前）＋右側（圓角下）漸層描邊 */
.hardware-spec::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(var(--hw-spec-cyan), var(--hw-spec-cyan)) top left / calc(100% - var(--hw-spec-radius)) var(--hw-spec-stroke) no-repeat,
    linear-gradient(180deg, #0dc1d8 0%, #0a9bb0 55%, #065968 82%, rgba(3, 34, 38, 0) 100%) left top / var(--hw-spec-stroke) 100% no-repeat,
    linear-gradient(180deg, #0dc1d8 0%, #0a9bb0 55%, #065968 82%, rgba(3, 34, 38, 0) 100%) right var(--hw-spec-radius) / var(--hw-spec-stroke) calc(100% - var(--hw-spec-radius)) no-repeat;
}

/* 右上圓角弧線 */
.hardware-spec::after {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: var(--hw-spec-radius);
  height: var(--hw-spec-radius);
  box-sizing: border-box;
  border-top: var(--hw-spec-stroke) solid var(--hw-spec-cyan);
  border-right: var(--hw-spec-stroke) solid var(--hw-spec-cyan);
  border-radius: 0 var(--hw-spec-radius) 0 0;
  pointer-events: none;
  content: "";
}

.hardware-spec > * {
  position: relative;
  z-index: 1;
}

.hardware-spec-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 8px;
  object-fit: contain;
  padding: 5px;
}

.hardware-spec strong {
  font-size: 20px;
  /* 對齊 Figma：多行標題（如 RDMA）用 normal，避免行距過大 */
  line-height: normal;
  letter-spacing: .8px;
}

.hardware-spec strong span {
  display: block;
  color: #fff;
  font-size: 24px;
  font-weight: 350;
  line-height: 40px;
  letter-spacing: 1.92px;
  text-shadow: 1px 2px 6px #0dc1d8;
}

.hardware-spec p {
  margin-top: 0;
  color: #fff;
  font-size: 20px;
  /* 對齊 Figma cards：說明多行為 leading-normal（非 48px） */
  line-height: normal;
}

.hardware-spec sup,
.hardware-benefits sup {
  color: #fff;
  font-size: 8px;
  line-height: 1;
  vertical-align: super;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #fff;
}

.hardware-benefits {
  grid-template-columns: repeat(2, 620px);
  gap: 24px 34px;
  width: 1274px;
  margin-top: 0;
}

.hardware-benefits article {
  min-height: 120px;
  padding: 24px;
  border: 0;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 100% 100%, rgba(58, 255, 245, .3), transparent 45%),
    linear-gradient(90deg, rgba(5, 44, 49, .4), rgba(15, 136, 151, .4));
  box-shadow: none;
}

.hardware-benefit-decor {
  position: absolute;
  top: -21px;
  left: -21px;
  width: 74px;
  height: 80px;
}

.hardware-benefits h3 {
  font-size: 24px;
  line-height: 36px;
  letter-spacing: 1.92px;
}

.hardware-benefits p {
  color: #fff;
  font-size: 20px;
  line-height: 36px;
  letter-spacing: 1.6px;
}

.hardware-notes {
  display: grid;
  gap: 0;
  /* 整段區塊置中；文字維持左齊，不用 text-align:center */
  width: max-content;
  max-width: 100%;
  margin: 24px auto 0;
  color: #fff;
  font-weight: var(--section-notes-weight);
  font-size: var(--section-notes-size);
  line-height: var(--section-notes-leading);
  letter-spacing: var(--section-notes-tracking);
  text-align: left;
}

.hardware-note-link {
  color: #3afff5;
  text-decoration: none;
  white-space: nowrap;
}

@media (min-width: 541px) {
  .hardware-spec strong,
  .hardware-spec p,
  .hardware-benefits h3,
  .hardware-benefits p {
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  .hardware-innovation {
    min-height: 1539px;
    padding: 40px 0;
  }

  .hardware-shell {
    width: min(560px, calc(100% - clamp(48px, 12.5vw, 80px)));
    max-width: none;
  }

  .hardware-heading .section-title--hardware {
    --section-title-size: calc(40 * var(--u));
    height: calc(84 * var(--u));
    padding-top: calc(24 * var(--u));
    padding-bottom: calc(12 * var(--u));
    padding-left: 0;
    transform: translateX(-50%);
  }

  .hardware-heading .section-title--hardware .section-title-bg {
    top: calc(9 * var(--u));
    bottom: auto;
    left: calc(-93 * var(--u));
    width: calc(265 * var(--u));
    height: calc(66 * var(--u));
  }

  .hardware-heading .section-title--hardware > span {
    line-height: calc(48 * var(--u));
  }

  .hardware-heading .section-title--hardware .section-title-dots {
    width: calc(57 * var(--u));
    height: calc(7 * var(--u));
  }

  .hardware-mobile-break {
    display: inline;
  }

  .hardware-specs {
    grid-template-columns: repeat(2, calc(242 * var(--u)));
    gap: calc(16 * var(--u));
    margin: calc(40 * var(--u)) auto;
  }

  .hardware-spec {
    min-height: calc(217 * var(--u));
    /* 上／側加厚，讓 icon 離邊框有安全距 */
    padding: calc(24 * var(--u)) calc(18 * var(--u)) calc(20 * var(--u));
  }

  .hardware-spec-item:last-child {
    grid-column: 1 / -1;
    width: calc(242 * var(--u));
    justify-self: center;
  }

  .hardware-spec-item:last-child .hardware-spec {
    min-height: calc(217 * var(--u));
  }

  .hardware-spec-icon {
    width: calc(56 * var(--u));
    height: calc(56 * var(--u));
    margin: 0 auto calc(14 * var(--u));
    padding: 0;
    box-sizing: content-box;
  }

  .hardware-spec strong span {
    font-size: calc(24.6 * var(--u));
    line-height: calc(41 * var(--u));
  }

  .hardware-spec strong,
  .hardware-spec p {
    font-size: calc(20.5 * var(--u));
  }

  .hardware-benefits {
    grid-template-columns: min(calc(500 * var(--u)), 100%);
    gap: calc(16 * var(--u));
    width: min(calc(500 * var(--u)), 100%);
    max-width: 100%;
    margin-top: 0;
  }

  .hardware-benefits article {
    min-height: calc(102 * var(--u));
    padding: calc(16 * var(--u));
    border-radius: calc(8 * var(--u));
  }

  .hardware-benefit-decor {
    top: calc(-17 * var(--u));
    left: calc(-17 * var(--u));
    width: calc(60 * var(--u));
    height: calc(65 * var(--u));
  }

  .hardware-benefits h3 {
    font-size: calc(24 * var(--u));
    line-height: calc(40 * var(--u));
  }

  .hardware-benefits p {
    font-size: calc(20 * var(--u));
    line-height: calc(30 * var(--u));
  }

  .hardware-notes {
    width: max-content;
    max-width: 100%;
    margin: calc(40 * var(--u)) auto 0;
    text-align: left;
  }
}

@media (max-width: 540px) {
  .hardware-shell {
    width: calc(100% - calc(48 * var(--u)));
  }

  /* 540 以下只調版面，字級維持 640 等比（--u），不再另設下限 */

  .hardware-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(20 * var(--u));
    width: min(calc(500 * var(--u)), 100%);
  }

  .hardware-spec {
    min-height: 0;
    padding: calc(20 * var(--u)) calc(14 * var(--u)) calc(16 * var(--u));
  }

  .hardware-spec-item:last-child {
    width: min(50%, calc(242 * var(--u)));
    justify-self: center;
  }

  .hardware-spec-item:last-child .hardware-spec {
    min-height: 0;
  }

  .hardware-spec-icon {
    width: calc(52 * var(--u));
    height: calc(52 * var(--u));
    margin: 0 auto calc(12 * var(--u));
    padding: 0;
  }

  .hardware-spec strong span {
    font-size: calc(24.6 * var(--u));
    line-height: 1.35;
  }

  .hardware-spec strong,
  .hardware-spec p {
    font-size: calc(20.5 * var(--u));
    line-height: 1.35;
  }

  .hardware-benefits {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .hardware-benefits article {
    min-height: 0;
    padding: 16px;
  }

  .hardware-benefits h3 {
    font-size: clamp(15px, 4vw, 24px);
    line-height: 1.45;
  }

  .hardware-benefits p {
    font-size: clamp(12px, 3.4vw, 20px);
    line-height: 1.45;
  }

  .hardware-notes {
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 平板：首區維持桌機三欄版面，依 --u 等比例縮小（不改段行／不重排）。 */
@media (min-width: 769px) and (max-width: 1399px) {
  .powerstore-overview {
    --overview-title-size: calc(48 * var(--u));
    --overview-copy-size: calc(24 * var(--u));
    --overview-copy-leading: calc(40 * var(--u));
    --overview-card-title-size: calc(28 * var(--u));
    --overview-card-copy-size: calc(20 * var(--u));
    min-height: calc(909 * var(--u));
    padding: calc(50 * var(--u)) 0 calc(100 * var(--u));
  }

  .overview-shell {
    width: min(calc(1543 * var(--u)), calc(100% - calc(64 * var(--u))));
  }

  .overview-heading .section-title--overview {
    --section-title-width: calc(513 * var(--u));
    --section-title-height: calc(113 * var(--u));
    height: calc(113 * var(--u));
    max-width: calc(100vw - calc(32 * var(--u)));
    padding-top: calc(27 * var(--u));
  }

  .section-title--overview .section-title-bg {
    bottom: calc(16 * var(--u));
    left: calc(-125 * var(--u));
    width: calc(325.481 * var(--u));
    height: calc(81 * var(--u));
  }

  .overview-heading .section-title--overview > span {
    line-height: calc(70 * var(--u));
  }

  .section-title--overview .section-title-dots {
    width: calc(70.28 * var(--u));
    height: calc(8.34 * var(--u));
  }

  .overview-copy {
    max-width: calc(1543 * var(--u));
    margin-top: calc(24 * var(--u));
    letter-spacing: calc(1.92 * var(--u));
  }

  .overview-cards {
    grid-template-columns: 372fr 431fr 482fr;
    gap: calc(24 * var(--u));
    width: min(calc(1333 * var(--u)), 100%);
    margin-top: calc(40 * var(--u));
  }

  .overview-card {
    min-height: calc(268 * var(--u));
    border-radius: calc(16 * var(--u));
  }

  .overview-card h3 {
    gap: calc(8 * var(--u));
    height: calc(66 * var(--u));
    padding: calc(8 * var(--u)) calc(16 * var(--u));
    line-height: calc(40 * var(--u));
  }

  .overview-card h3 > img {
    width: calc(50 * var(--u));
    height: calc(50 * var(--u));
  }

  .metric-columns,
  .ai-columns {
    height: calc(202 * var(--u));
    padding: calc(16 * var(--u));
  }

  .metric {
    grid-template-rows: calc(31 * var(--u)) auto auto;
    row-gap: calc(7 * var(--u));
    width: calc(170 * var(--u));
    height: calc(170 * var(--u));
  }

  .metric strong {
    font-size: calc(64 * var(--u));
    line-height: calc(64 * var(--u));
  }

  .metric p,
  .private-cloud p,
  .future-content ul {
    font-size: var(--overview-card-copy-size);
    line-height: calc(30 * var(--u));
  }

  .metric p {
    min-height: calc(60 * var(--u));
  }

  .metric-label {
    width: calc(150 * var(--u));
    height: calc(31 * var(--u));
  }

  .metric-label img {
    left: calc(5 * var(--u));
    width: calc(140 * var(--u));
    height: calc(5 * var(--u));
  }

  .metric-label b {
    font-size: calc(20 * var(--u));
    line-height: calc(24 * var(--u));
  }

  .future-content {
    grid-template-columns: calc(180 * var(--u)) calc(195 * var(--u));
    align-items: center;
    gap: calc(24 * var(--u));
    height: calc(202 * var(--u));
    padding: calc(16 * var(--u));
  }

  .future-visual {
    width: calc(180 * var(--u));
  }

  .growth-chart {
    width: calc(180 * var(--u));
    height: auto;
  }

  .growth-chart img {
    width: calc(120 * var(--u));
    height: calc(120 * var(--u));
  }

  .future-content ul {
    gap: calc(16 * var(--u));
  }

  .future-content li {
    white-space: nowrap;
  }

  .future-content li img {
    flex: 0 0 calc(24 * var(--u));
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
    margin-right: calc(8 * var(--u));
  }

  .future-caption {
    position: static;
    width: 100%;
    font-size: calc(20 * var(--u));
    line-height: calc(30 * var(--u));
    text-align: center;
  }

  .future-caption-tablet-break {
    display: none;
  }

  .ai-metric {
    width: calc(232 * var(--u));
  }

  .ai-metric strong {
    height: calc(120 * var(--u));
    font-size: calc(100 * var(--u));
    line-height: calc(120 * var(--u));
  }

  .private-cloud {
    width: calc(218 * var(--u));
  }

  .private-cloud strong {
    height: calc(100 * var(--u));
    font-size: calc(40 * var(--u));
    line-height: calc(40 * var(--u));
    white-space: nowrap;
  }

  .overview-notes {
    margin: calc(40 * var(--u)) auto 0;
  }

  .hardware-shell {
    width: min(1274px, calc(100% - 64px));
  }

  .hardware-specs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    gap: clamp(8px, 1.15vw, 16px);
  }

  .hardware-spec {
    min-height: clamp(154px, 16vw, 224px);
    padding: clamp(7px, 1.15vw, 16px);
  }

  .hardware-spec-icon {
    width: clamp(40px, 4.29vw, 60px);
    height: clamp(40px, 4.29vw, 60px);
  }

  .hardware-spec strong span {
    font-size: clamp(14px, 1.72vw, 24px);
    line-height: 1.25;
  }

  .hardware-spec strong,
  .hardware-spec p {
    font-size: clamp(11px, 1.43vw, 20px);
    line-height: 1.35;
    white-space: normal;
  }

  .hardware-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: clamp(14px, 1.72vw, 24px) clamp(18px, 2.43vw, 34px);
  }

  .hardware-benefits article {
    min-height: clamp(86px, 8.58vw, 120px);
    padding: clamp(14px, 1.72vw, 24px);
  }

  .hardware-benefits h3 {
    font-size: clamp(15px, 1.72vw, 24px);
    line-height: 1.35;
    white-space: normal;
  }

  .hardware-benefits p {
    font-size: clamp(12px, 1.43vw, 20px);
    line-height: 1.35;
    white-space: normal;
  }
}

/* 03_landing 第三區：cards-004。 */
.software-intelligence {
  min-height: 979px;
  /* 卡片下方裝飾線以 absolute 外溢，不可裁切 */
  overflow: visible;
  padding: 100px 0;
  background: #000;
}

.software-shell {
  width: min(1150px, calc(100% - 64px));
}

.software-heading .section-title--software {
  --section-title-size: calc(48 * var(--u));
  position: relative;
  left: 50%;
  display: block;
  width: max-content;
  max-width: calc(100vw - 32px);
  height: 113px;
  padding-top: 27px;
  padding-left: 0;
  overflow: visible;
  transform: translateX(-50%);
}

.software-heading .section-title--software .section-title-bg {
  inset: auto;
  bottom: 16px;
  left: -125px;
  width: 325.481px;
  height: 81px;
}

.software-heading .section-title--software > span {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  padding: 0;
  /* 行高改由 .section-title--bracket > span 的 --u 規則統一 */
  transform: none;
}

.software-heading .section-title--software .section-title-dots {
  right: 0;
  bottom: 0;
  width: 70.28px;
  height: 8.34px;
}

.software-mobile-title-break {
  display: none;
}

.software-mobile-comma {
  display: inline;
}

.software-tabs {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  width: 688px;
  height: 132px;
  margin: 40px auto 0;
  padding: 0 47.5px 32px;
  background: url("../images/software-tab-shell.png") center 10px / 688px 80px no-repeat;
}

.software-tab-shell {
  display: none;
}

.software-tabs button {
  position: relative;
  z-index: 1;
  width: 171px;
  height: 64px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 24px;
  font-weight: 700;
  line-height: 40px;
  text-shadow: 1px 2px 8px #0083ee;
  white-space: nowrap;
}

.software-tabs button.is-active {
  clip-path: none;
  background: transparent;
  box-shadow: none;
  text-shadow: none;
}

.software-tabs button > span {
  position: relative;
  z-index: 2;
}

.software-tab-active-outer,
.software-tab-active-inner {
  position: absolute;
  display: none;
  width: 168px;
  height: 60px;
  pointer-events: none;
}

.software-tabs button.is-active .software-tab-active-outer {
  top: 2px;
  left: 0;
  display: block;
}

.software-tabs button.is-active .software-tab-active-inner {
  top: -2px;
  left: 3px;
  display: block;
}

.software-tabs::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1061px;
  height: 72px;
  background: url("../images/software-tab-line-top.png") center / 100% 100% no-repeat;
  content: "";
  transform: translateX(-50%);
}

.software-features {
  position: relative;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 1150px;
  max-width: 100%;
  height: 300px;
  /* Figma cards-004：tab 區與卡片 gap 40；底線預留 40 + 72 */
  margin: 40px auto 112px;
  overflow: visible;
}

.software-features article {
  min-height: 300px;
  padding: 20px;
  border: 2px solid #0dc1d8;
  border-radius: 16px;
  --software-card-x: 0%;
  --software-card-y: -59%;
  background: #000;
  box-shadow: inset 8px 8px 20px rgba(58, 255, 245, .3);
  isolation: isolate;
  text-align: center;
}

.software-features article:nth-child(2) {
  --software-card-x: -106%;
}

.software-features article:nth-child(3) {
  --software-card-x: -206%;
}

.software-features article:nth-child(4) {
  --software-card-x: -313%;
}

.software-features article::before {
  display: none;
}

.software-card-bg {
  position: absolute;
  z-index: 0;
  top: -59.44%;
  left: -.04%;
  width: 412.61%;
  height: 218.88%;
  max-width: none;
  opacity: .8;
  pointer-events: none;
}

.software-features article:nth-child(2) .software-card-bg {
  left: -105.77%;
}

.software-features article:nth-child(3) .software-card-bg {
  left: -205.93%;
}

.software-features article:nth-child(4) .software-card-bg {
  left: -312.93%;
}

.software-features article::after {
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(7, 102, 114, .6) 30%, rgba(47, 234, 255, .78));
}

.software-features--automation article {
  border-width: 1px;
  --software-card-y: -31%;
}

.software-features--automation article:nth-child(2) {
  --software-card-x: -104%;
}

.software-features--automation article:nth-child(3) {
  --software-card-x: -204%;
}

.software-features--automation article:nth-child(4) {
  --software-card-x: -312%;
}

.software-features--automation article::before {
  display: none;
}

.software-card-bg--automation {
  top: -31.44%;
  left: 0;
  width: 412.93%;
  height: 162.89%;
}

.software-features--automation article:nth-child(2) .software-card-bg {
  top: -30.66%;
  left: -104.31%;
  width: 408.93%;
  height: 161.31%;
}

.software-features--automation article:nth-child(3) .software-card-bg {
  top: -30.45%;
  left: -203.92%;
  width: 407.87%;
  height: 160.89%;
}

.software-features--automation article:nth-child(4) .software-card-bg {
  top: -31.27%;
  left: -312.21%;
  width: 412.05%;
  height: 162.54%;
}

.software-features--automation article::after {
  background: linear-gradient(180deg, rgba(7, 102, 114, .7) 30%, rgba(47, 234, 255, .78));
}

.software-feature-icon {
  position: relative;
  z-index: 1;
  display: block;
  width: 80px;
  height: 80px;
  margin: 0 auto;
  object-fit: contain;
  /* 線稿偏淡；提高對比／銳度，避免視覺上發糊 */
  filter: contrast(1.35) brightness(1.12) saturate(1.1);
}

.software-feature-icon--split {
  position: relative;
  display: block;
}

.software-feature-icon--split img {
  position: absolute;
  width: 68%;
  height: 41%;
  object-fit: contain;
  filter: contrast(1.35) brightness(1.12) saturate(1.1);
}

.software-feature-icon--split img:first-child {
  top: 36.21%;
  left: 8.89%;
}

.software-feature-icon--split img:last-child {
  top: 22.22%;
  right: 8.89%;
}

.software-features h3,
.software-features p {
  position: relative;
  z-index: 1;
}

.software-features h3 {
  margin-top: 0;
  color: #f5cd6f;
  font-size: 24px;
  line-height: 40px;
  text-align: center;
  text-shadow: 0 4px 8px #065e69;
}

/* 桌機單行；手機依稿在「雙／支援」斷行 */
.software-feature-mobile-break {
  display: none;
}

.software-features p {
  margin-top: 0;
  color: #fff;
  font-size: 20px;
  line-height: 36px;
  letter-spacing: 1.6px;
  /* 補回行尾多出的一個字距，避免置中時整行被推左 */
  text-indent: 1.6px;
  text-align: left;
}

.software-features::after {
  position: absolute;
  top: calc(100% + 40px);
  left: 50%;
  width: 1061px;
  max-width: none;
  height: 72px;
  background: url("../images/software-tab-line-bottom.png") center / 100% 100% no-repeat;
  content: "";
  pointer-events: none;
  transform: translateX(-50%) scaleY(-1);
}

.software-features[hidden],
.software-resilience[hidden] {
  display: none;
}

.software-resilience {
  /* 卡片列與註解分層；左右欄在 main 內 stretch 等高 */
  --resilience-h: 300px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 52px;
  width: 100%;
  max-width: 100%;
  margin: 40px auto 40px;
}

.software-resilience-main {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  align-items: stretch;
  width: 100%;
  min-height: var(--resilience-h);
}

.software-resilience article {
  position: relative;
  overflow: hidden;
  border: 1px solid #0dc1d8;
  border-radius: 16px;
  color: #fff;
}

.software-resilience-copy {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-height: 0;
  height: auto;
  align-self: stretch;
}

.software-resilience-copy article {
  padding: 24px;
  background: radial-gradient(ellipse at top left, rgba(7, 102, 114, .8), rgba(7, 102, 114, .2));
  box-shadow: inset -2px -2px 2px #0dc1d8;
}

.software-resilience h3 {
  margin: 0;
  color: #f5cd6f;
  font-size: clamp(24px, 1.667vw, 32px);
  line-height: 1.25;
  letter-spacing: .08em;
  text-align: center;
  text-shadow: 0 4px 8px #065e69;
}

.software-resilience h3.software-resilience-title--detect {
  letter-spacing: .02em;
  white-space: nowrap;
}

.software-resilience h3 sup {
  font-size: .645em;
  line-height: 1;
  vertical-align: super;
}

.software-resilience h3.software-resilience-title--detect sup {
  margin-left: .12em;
  letter-spacing: 0;
}

.software-resilience p {
  margin: 0;
  font-size: clamp(15px, 1.042vw, 20px);
  line-height: 1.8;
  letter-spacing: .08em;
  text-indent: .08em;
  text-align: center;
}

.software-resilience-data {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  min-height: 0;
  height: auto;
  align-self: stretch;
}

.software-resilience-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
  background:
    linear-gradient(180deg, rgba(7, 102, 114, .4), #0dc1d8),
    url("../images/software-resilience-bg.jpg") center / cover,
    #000;
}

.software-resilience-stats strong {
  display: block;
  font-family: Roboto, "Noto Sans TC", sans-serif;
  font-size: clamp(27px, 1.875vw, 36px);
  line-height: 1.11;
  letter-spacing: 0;
}

.software-resilience-stats > div:first-child strong {
  font-size: clamp(62px, 4.271vw, 82px);
  line-height: 1.1;
}

.software-resilience-stats p {
  margin: 0;
  line-height: 30px;
  text-indent: 0;
  text-align: left;
}

.software-resilience-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  min-height: 0;
}

.software-resilience-actions article {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  padding: 8px 16px;
  overflow: hidden;
  border-radius: 16px;
  background: #052c31;
}

.software-resilience-actions img {
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: contain;
  padding-bottom: 5px;
}

.software-resilience-actions p {
  flex: none;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  font-size: clamp(10px, .677vw, 13px);
  line-height: 1.35;
  letter-spacing: 1.04px;
  text-indent: 0;
  text-align: left;
}

/* 桌機連成一段；手機改成固定斷行，避免末行孤字 */
.software-action-l {
  display: inline;
}

.software-resilience-notes {
  /* 段落整塊置中；內文左齊（勿沿用 .software-resilience p 的 text-align:center） */
  position: relative;
  z-index: 1;
  width: min(711px, 100%);
  max-width: 100%;
  margin: 0 auto;
  color: #fff;
  font-weight: var(--section-notes-weight);
  font-size: var(--section-notes-size);
  line-height: var(--section-notes-leading);
  letter-spacing: var(--section-notes-tracking);
  text-align: left;
}

.software-resilience-notes p {
  margin: 0;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-indent: 0;
  text-align: left;
}

.software-resilience-main::after {
  position: absolute;
  /* 對齊卡片列底 + 40 */
  top: calc(100% + 40px);
  left: 50%;
  width: 1061px;
  height: 72px;
  background: url("../images/software-tab-line-bottom.png") center / 100% 100% no-repeat;
  content: "";
  transform: translateX(-50%) scaleY(-1);
  pointer-events: none;
}

@media (max-width: 768px) {
  .software-intelligence {
    min-height: 0;
    overflow: visible;
    padding: calc(40 * var(--u)) 0;
  }

  .software-shell {
    width: 87.5vw;
  }

  .software-heading .section-title--software {
    --section-title-size: calc(40 * var(--u));
    height: calc(128 * var(--u));
    padding-top: calc(24 * var(--u));
    padding-right: 0;
    padding-left: 0;
    transform: translateX(-50%);
  }

  .software-heading .section-title--software .section-title-bg {
    top: calc(9 * var(--u));
    bottom: auto;
    left: calc(-93 * var(--u));
    width: calc(265 * var(--u));
    height: calc(66 * var(--u));
  }

  .software-heading .section-title--software > span {
    line-height: calc(48 * var(--u));
  }

  .software-heading .section-title--software .section-title-dots {
    right: 0;
    width: calc(57 * var(--u));
    height: calc(6.8 * var(--u));
  }

  .software-mobile-title-break {
    display: inline;
  }

  .software-mobile-comma {
    display: none;
  }

  /* cards-004-m（tab／卡片）覆寫放在下方 cards-004 共用規則之後，避免被桌機樣式蓋掉。 */
}

/* cards-004／cards-004-m：共用框架與 Rectangle 3 按鈕底圖。 */
.software-tabs {
  width: 688px;
  max-width: 100%;
  height: 100px;
  margin-top: 0;
  padding: 0;
  background: url("../images/software-tab-shell.png") center 10px / 688px 80px no-repeat;
}

.software-tab-shell,
.software-tabs::before,
.software-tabs button.is-active .software-tab-active-outer,
.software-tabs button.is-active .software-tab-active-inner {
  display: none;
}

.software-tabs button,
.software-tabs button.is-active {
  position: absolute;
  top: 18px;
  display: grid;
  align-items: center;
  justify-items: center;
  z-index: 1;
  width: 171px;
  height: 64px;
  padding: 0;
  border: 0;
  clip-path: none;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 40px;
  text-shadow: 1px 2px 8px #0083ee;
  cursor: pointer;
}

.software-tabs button:nth-of-type(1) {
  left: 47.5px;
}

.software-tabs button:nth-of-type(2) {
  left: 258.5px;
}

.software-tabs button:nth-of-type(3) {
  left: 469.5px;
}

.software-tabs button > span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  height: 100%;
  padding: 0;
  place-items: center;
}

.software-tabs button.is-active {
  text-shadow: none;
}

.software-tabs button.is-active::before {
  position: absolute;
  z-index: 0;
  top: 2px;
  left: 1.5px;
  width: 168px;
  height: 60px;
  background: url("../images/software-tab-active-inner.png") center / 100% 100% no-repeat;
  content: "";
}

.software-tabs::after {
  position: absolute;
  /* Figma cards-004 Frame 686：Vector y=28、h=72（tab 區高 100） */
  top: 28px;
  bottom: auto;
  left: 50%;
  display: block;
  width: 1061px;
  height: 72px;
  background: url("../images/software-tab-line-top.png") center / 100% 100% no-repeat;
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
}

/* cards-004-m Frame 686：整框 884；殼 688@x=98；按鈕列 593@x=145.5；底線 884@y=40 */
/* 寬度大於 shell 時 margin:auto 會靠左溢出；改 left:50% + 負 margin 置中（不用 transform，避免 AOS） */
@media (max-width: 768px) {
  .software-tabs {
    /* 設計框 884；以視寬／760 從中心放大（較塞滿 884 約 +16%），左右等比例裁切 */
    --tab-u: min(var(--u), calc(100vw / 760));
    position: relative;
    left: 50%;
    display: block;
    width: calc(884 * var(--tab-u));
    max-width: none;
    height: calc(100 * var(--tab-u));
    margin: calc(40 * var(--u)) 0 0 calc(884 * var(--tab-u) / -2);
    padding: 0;
    background: url("../images/software-tab-shell.png") center calc(10 * var(--tab-u)) / calc(688 * var(--tab-u)) calc(80 * var(--tab-u)) no-repeat;
    transform: none;
  }

  .software-tabs button,
  .software-tabs button.is-active {
    position: absolute;
    top: calc(18 * var(--tab-u));
    display: grid;
    place-items: center;
    width: calc(171 * var(--tab-u));
    height: calc(64 * var(--tab-u));
    font-size: calc(24 * var(--tab-u));
    font-weight: 700;
    line-height: calc(40 * var(--tab-u));
  }

  .software-tabs button:nth-of-type(1) {
    left: calc(145.5 * var(--tab-u));
  }

  .software-tabs button:nth-of-type(2) {
    left: calc(356.5 * var(--tab-u));
  }

  .software-tabs button:nth-of-type(3) {
    left: calc(567.5 * var(--tab-u));
  }

  .software-tabs button.is-active::before {
    top: calc(2 * var(--tab-u));
    left: calc(1.5 * var(--tab-u));
    width: calc(168 * var(--tab-u));
    height: calc(60 * var(--tab-u));
  }

  .software-tabs::after {
    top: calc(40 * var(--tab-u));
    bottom: auto;
    left: 0;
    width: 100%;
    height: calc(60 * var(--tab-u));
    transform: none;
  }

  .software-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: calc(12 * var(--u));
    width: calc(500 * var(--u));
    max-width: none;
    height: calc(612 * var(--u));
    margin: calc(40 * var(--u)) auto calc(100 * var(--u));
  }

  .software-features article,
  .software-features--automation article {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    height: auto;
    padding: 0 calc(24 * var(--u));
    border-radius: calc(16 * var(--u));
  }

  .software-features article::before,
  .software-features--automation article::before {
    display: none;
  }

  .software-feature-icon,
  .software-feature-icon--split {
    width: calc(80 * var(--u));
    height: calc(80 * var(--u));
    margin: 0 auto;
  }

  .software-features h3 {
    width: 100%;
    font-size: calc(24 * var(--u));
    line-height: calc(40 * var(--u));
    letter-spacing: calc(1.2 * var(--u));
  }

  .software-feature-mobile-break {
    display: inline;
  }

  /* TLC 標題：對齊稿「TLC 或 QLC 雙／支援」，字距略加大 */
  .software-feature-title--tlc {
    letter-spacing: calc(2.4 * var(--u));
  }

  .software-features p {
    width: 100%;
    font-size: calc(20 * var(--u));
    line-height: calc(30 * var(--u));
    letter-spacing: calc(1.6 * var(--u));
    text-indent: calc(1.6 * var(--u));
  }

  .software-features::after {
    top: calc(100% + 40 * var(--u));
    width: min(100vw, calc(884 * var(--u)));
    height: calc(60 * min(var(--u), 100vw / 760));
  }

  .software-resilience {
    --resilience-h: calc(680 * var(--u));
    row-gap: calc(52 * var(--u));
    width: calc(560 * var(--u));
    max-width: none;
    height: auto;
    min-height: 0;
    margin: calc(40 * var(--u)) auto calc(40 * var(--u));
  }

  .software-resilience-main {
    column-gap: calc(16 * var(--u));
    min-height: var(--resilience-h);
  }

  .software-resilience-copy {
    gap: calc(8 * var(--u));
    height: auto;
  }

  .software-resilience-copy article {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(18 * var(--u));
    border-radius: calc(16 * var(--u));
  }

  .software-resilience h3 {
    font-size: calc(24 * var(--u));
    line-height: calc(40 * var(--u));
    letter-spacing: calc(1.2 * var(--u));
  }

  .software-resilience h3.software-resilience-title--detect {
    font-size: calc(22 * var(--u));
    letter-spacing: calc(.4 * var(--u));
    white-space: nowrap;
  }

  .software-resilience h3 sup {
    font-size: .645em;
    line-height: 1;
    vertical-align: super;
  }

  .software-resilience p {
    font-size: calc(20 * var(--u));
    line-height: calc(30 * var(--u));
    letter-spacing: calc(1.6 * var(--u));
  }

  .software-resilience-data {
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--u));
    min-width: 0;
    height: auto;
    overflow: visible;
  }

  .software-resilience-stats {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    flex: none;
    gap: 0;
    padding: calc(30 * var(--u)) calc(14 * var(--u));
    border-radius: calc(16 * var(--u));
  }

  .software-resilience-stats > div:last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(16 * var(--u));
  }

  .software-resilience-stats > div:first-child strong {
    margin-top: 0;
    font-size: calc(64 * var(--u));
    line-height: calc(90 * var(--u));
    letter-spacing: 0;
  }

  .software-resilience-stats strong {
    margin-top: 0;
    font-size: calc(36 * var(--u));
    line-height: calc(40 * var(--u));
    letter-spacing: calc(2.88 * var(--u));
  }

  .software-resilience-stats p {
    font-size: calc(20 * var(--u));
    line-height: calc(30 * var(--u));
    letter-spacing: calc(1.6 * var(--u));
    text-indent: 0;
    text-align: left;
  }

  .software-resilience-stats > div:first-child p {
    line-height: calc(36 * var(--u));
    text-align: left;
  }

  .software-resilience-actions {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: calc(8 * var(--u));
    min-height: calc(320 * var(--u));
  }

  .software-resilience-actions article {
    gap: calc(8 * var(--u));
    min-height: calc(156 * var(--u));
    /* 內距加大，避免 icon／文字貼邊或被圓角裁切 */
    padding: calc(16 * var(--u)) calc(14 * var(--u));
    border-radius: calc(8 * var(--u));
    overflow: visible;
  }

  .software-resilience-actions article img {
    flex: none;
    width: calc(28 * var(--u));
    height: calc(28 * var(--u));
  }

  .software-resilience-actions p {
    flex: none;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    font-size: calc(15 * var(--u));
    line-height: 1.35;
    letter-spacing: calc(.8 * var(--u));
    text-indent: 0;
    text-align: left;
  }

  .software-action-l {
    display: block;
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap;
  }

  .software-resilience-notes {
    width: calc(500 * var(--u));
    max-width: 100%;
    text-align: left;
  }

  .software-resilience-notes p {
    text-indent: 0;
    text-align: left;
  }

  .software-resilience-main::after {
    top: calc(100% + 40 * var(--u));
    width: min(100vw, calc(884 * var(--u)));
    height: calc(60 * min(var(--u), 100vw / 760));
  }
}

/* ============================================================
   S04 業界領先減量保證與生命週期延長服務
   桌機依 Figma 6333:2238（1920 版面），手機依 6333:3170（640 版面）。
   手機端一律以 640 設計稿換算 vw（1vw = 6.4px）並以 min() 封頂，
   因此 320px 時即為設計稿的等比一半，不會跑版。
   ============================================================ */
.lifecycle-extension {
  /* 縮放單位：桌機 1px；平板改成 vw，讓字級／高度／間距跟著等比例縮小。
     寬度一律用 %（相對 shell 1296 換算），所以任何寬度都不會超出畫面。 */
  --u: 1px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(40 * var(--u)) 0;
  background-color: #000;
  background-image: url("../images/bg-007.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

/* 平板沿用桌機版面，以 1392px（1296 內容 + 兩側留白）為基準等比例縮小。 */
@media (min-width: 769px) and (max-width: 1391px) {
  .lifecycle-extension {
    --u: .0718391vw;
  }
}

/* 1296 / 1392 = 93.1034%；未滿 1392 時兩側各留 3.4483%，超過則封頂在設計稿寬度。 */
.lifecycle-shell {
  width: min(1296px, 93.1034%);
  margin: 0 auto;
}

/* 標題沿用共用組件：整組（底圖＋文字＋裝飾）置中，與設計稿一致。 */
.lifecycle-heading .section-title--lifecycle {
  --section-title-size: calc(48 * var(--u));
  position: relative;
  left: 50%;
  display: block;
  width: max-content;
  max-width: 100%;
  height: calc(113 * var(--u));
  padding-top: calc(27 * var(--u));
  padding-left: 0;
  overflow: visible;
  transform: translateX(-50%);
}

.lifecycle-heading .section-title--lifecycle .section-title-bg {
  inset: auto;
  bottom: calc(16 * var(--u));
  left: calc(-125 * var(--u));
  width: calc(325.481 * var(--u));
  height: calc(81 * var(--u));
}

.lifecycle-heading .section-title--lifecycle > span {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  padding: 0;
  line-height: calc(70 * var(--u));
  letter-spacing: 0.1rem;
  transform: none;
}

.lifecycle-heading .section-title--lifecycle .section-title-dots {
  right: 0;
  bottom: 0;
  width: calc(70.28 * var(--u));
  height: calc(8.34 * var(--u));
}

.lifecycle-mobile-break {
  display: none;
}

/* 340 : 40 : 916 於 1296 → 26.2346% + 3.0864% + 70.679% = 100% */
.lifecycle-layout {
  display: flex;
  gap: 3.0864%;
  align-items: stretch;
  justify-content: center;
  margin-top: calc(40 * var(--u));
  padding: calc(20 * var(--u)) 0;
}

/* --- 左欄：6:1 減量保證 --- */
.lifecycle-guarantee {
  display: flex;
  flex: 0 0 26.2346%;
  flex-direction: column;
  gap: calc(24 * var(--u));
  align-items: center;
  width: 26.2346%;
}

.guarantee-card {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
  align-items: center;
  /* 勿 hidden：標籤上下邊線會超出文字盒，裁切會讓字貼邊 */
  overflow: visible;
  width: 100%;
  background: linear-gradient(180deg, rgba(13, 193, 216, .05), rgba(13, 193, 216, .5));
  backdrop-filter: blur(2.5px);
  text-align: center;
}

.guarantee-bracket {
  display: block;
  width: 100%;
  height: calc(40 * var(--u));
}

/* Figma Frame 708：288×54、px 24 / py 8；邊線框 289×60 */
.guarantee-kicker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: calc(288 * var(--u));
  max-width: 100%;
  min-height: calc(54 * var(--u));
  margin: 0;
  padding: calc(8 * var(--u)) calc(24 * var(--u));
}

.guarantee-kicker img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(289 * var(--u));
  max-width: none;
  height: calc(60 * var(--u));
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.guarantee-kicker span {
  position: relative;
  z-index: 1;
  width: calc(240 * var(--u));
  max-width: 100%;
  color: #fff;
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: calc(38 * var(--u));
  letter-spacing: calc(1.92 * var(--u));
  text-indent: 0;
  text-align: center;
  text-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) #002a58;
  white-space: nowrap;
}

/* 漸層字有兩個坑：
   1. text-shadow 會蓋在 background-clip: text 之上，必須改用 drop-shadow。
   2. 漸層底色框＝padding box，行高比字身矮時字會被切掉（手機 lh 81.878 < 字身 92），
      因此上下補 padding 撐開底色框、再用等量負 margin 抵銷，版位完全不變。 */
.guarantee-figure {
  display: block;
  width: 100%;
  padding-block: calc(10 * var(--u));
  margin-block: calc(-10 * var(--u));
  background: linear-gradient(165.156deg, #3afff5 26.27%, #1f6dff 86.666%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: Roboto, "Noto Sans TC", sans-serif;
  font-size: calc(160 * var(--u));
  font-weight: 700;
  line-height: calc(150 * var(--u));
  filter: drop-shadow(calc(10 * var(--u)) calc(10 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, .25));
}

.guarantee-label {
  margin: 0;
  color: #fff;
  font-size: calc(24 * var(--u));
  font-weight: 500;
  line-height: calc(50 * var(--u));
  letter-spacing: calc(1.92 * var(--u));
  text-indent: calc(1.92 * var(--u));
}

.guarantee-label sup {
  font-size: calc(15.48 * var(--u));
}

.guarantee-points {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guarantee-points li {
  display: flex;
  gap: calc(24 * var(--u));
  align-items: center;
}

.guarantee-points img {
  flex: 0 0 calc(40 * var(--u));
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
}

.guarantee-points span {
  color: #fff;
  font-size: calc(16 * var(--u));
  line-height: calc(30 * var(--u));
  letter-spacing: calc(1.28 * var(--u));
  text-shadow: calc(1 * var(--u)) calc(2 * var(--u)) calc(8 * var(--u)) #0083ee;
  white-space: nowrap;
}

/* --- 右欄：Lifecycle Extension --- */
/* 左右內距 24 / 916 = 2.6201%，內容區因此維持 868 的比例。 */
.lifecycle-program {
  display: flex;
  flex: 0 0 70.679%;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 70.679%;
  padding: calc(40 * var(--u)) 2.6201%;
  border-radius: calc(24 * var(--u));
  /* Figma 為內描邊、不佔版位；用 outline 才不會吃掉內容區寬度。 */
  outline: calc(2 * var(--u)) solid #0dc1d8;
  outline-offset: calc(-2 * var(--u));
  background: rgba(5, 44, 49, .6);
  backdrop-filter: blur(5px);
}

.lifecycle-program h3 {
  margin: 0;
  background: linear-gradient(180deg, #3afff5 30.769%, #0dc1d8 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: Roboto, "Noto Sans TC", sans-serif;
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: calc(40 * var(--u));
  letter-spacing: calc(2.56 * var(--u));
  white-space: nowrap;
}

.lifecycle-program h3 span {
  font-family: Roboto, "Noto Sans TC", sans-serif;
}

.lifecycle-program h3 sup {
  font-size: calc(20.64 * var(--u));
}

/* 140 : 40 : 224 : 40 : 224 : 40 : 160 於 868 */
.lifecycle-timeline {
  position: relative;
  display: flex;
  gap: 4.6083%;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

.lifecycle-timeline-line {
  position: absolute;
  top: calc(178.23 * var(--u));
  left: 50%;
  width: 96.0829%;
  height: calc(11.547 * var(--u));
  transform: translateX(-50%);
}

.timeline-step {
  display: flex;
  flex: 0 0 25.8065%;
  flex-direction: column;
  gap: calc(24 * var(--u));
  align-items: center;
  width: 25.8065%;
  text-align: center;
}

.timeline-step--start {
  flex-basis: 16.129%;
  width: 16.129%;
}

.timeline-step--end {
  flex-basis: 18.4332%;
  width: 18.4332%;
}

.timeline-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(104 * var(--u));
}

.timeline-visual img {
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
}

.timeline-visual .timeline-array {
  width: 100%;
  height: calc(104 * var(--u));
  object-fit: contain;
}

.timeline-visual small {
  color: #fff;
  font-size: calc(20 * var(--u));
  font-weight: 300;
  line-height: calc(24 * var(--u));
  white-space: nowrap;
  padding-top: 10px;
}

.timeline-step strong {
  color: #fff;
  font-family: Roboto, "Noto Sans TC", sans-serif;
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: calc(45 * var(--u));
}

.timeline-step p {
  margin: 0;
  color: #fff;
  font-size: calc(20 * var(--u));
  line-height: calc(50 * var(--u));
  letter-spacing: calc(1.6 * var(--u));
  text-indent: calc(1.6 * var(--u));
  white-space: nowrap;
}

/* 284 : 183 : 166 : 225 於 868，剩餘 1.152% 由 space-between 平均分成三個間隙。 */
.lifecycle-services {
  display: grid;
  grid-template-columns: 32.7189% 21.0829% 19.1244% 25.9217%;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lifecycle-services li {
  display: flex;
  gap: calc(10 * var(--u));
  align-items: center;
  justify-content: center;
  padding: calc(8 * var(--u)) calc(16 * var(--u));
  border: calc(1 * var(--u)) solid #0dc1d8;
  border-radius: calc(8 * var(--u));
  background: linear-gradient(180deg, rgba(13, 193, 216, .9) -92.262%, rgba(0, 42, 88, .9) 100%);
  box-shadow: calc(4 * var(--u)) calc(4 * var(--u)) calc(8 * var(--u)) 0 #1f2d5a;
}

/* 設計稿 icon 外框 40×40，圖形約 10% inset；不可強制拉伸比例 */
.lifecycle-services img {
  flex: 0 0 calc(40 * var(--u));
  box-sizing: border-box;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  padding: calc(4 * var(--u));
  object-fit: contain;
  object-position: center;
}

.lifecycle-services span {
  color: #fff;
  font-size: calc(16 * var(--u));
  line-height: calc(24 * var(--u));
  letter-spacing: calc(1.28 * var(--u));
  white-space: nowrap;
}

.lifecycle-notes {
  width: max-content;
  max-width: 100%;
  margin: calc(40 * var(--u)) auto 0;
  color: #fff;
  text-align: left;
}

.lifecycle-notes p {
  margin: 0;
  font-size: calc(12 * var(--u));
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: calc(.96 * var(--u));
}

/* 手機依 Figma 6333:3170（640 版面）：--u = 視窗寬 / 640（封頂 1px），
   寬度一律用 %，因此 320px 時就是設計稿的等比一半，不會跑版。 */
@media (max-width: 768px) {
  .lifecycle-extension {
    --u: min(.15625vw, 1px);
    padding: calc(40 * var(--u)) 0;
    /* 手機改由 ::before 依設計稿定位，避免 cover 把光帶撐滿整區、過亮 */
    background-image: none;
  }

  /* Figma 03_landing_m bg-007：自中心放大覆蓋範圍（約 170% 寬） */
  .lifecycle-extension::before {
    position: absolute;
    z-index: -1;
    top: 37.2%;
    left: 50%;
    width: 170%;
    aspect-ratio: 16 / 9;
    background-color: #000;
    background-image:
      linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, .28)),
      url("../images/bg-007.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: translateX(-50%);
    content: "";
    pointer-events: none;
  }

  .lifecycle-shell {
    width: 86.5625%;
  }

  .lifecycle-heading .section-title--lifecycle {
    --section-title-size: calc(40 * var(--u));
    height: calc(144 * var(--u));
    padding-top: calc(24 * var(--u));
    padding-right: 0;
    padding-left: 0;
  }

  .lifecycle-heading .section-title--lifecycle .section-title-bg {
    top: calc(9 * var(--u));
    bottom: auto;
    left: calc(-77.193 * var(--u));
    width: calc(265.193 * var(--u));
    height: calc(66 * var(--u));
  }

  .lifecycle-heading .section-title--lifecycle > span {
    line-height: calc(48 * var(--u));
    letter-spacing: 0.1rem;
  }

  .lifecycle-heading .section-title--lifecycle .section-title-dots {
    right: 0;
    width: calc(57.262 * var(--u));
    height: calc(6.795 * var(--u));
  }

  .lifecycle-mobile-break {
    display: inline;
  }

  .lifecycle-layout {
    flex-direction: column;
    gap: calc(40 * var(--u));
    align-items: center;
    margin-top: calc(40 * var(--u));
    padding: 0;
  }

  .lifecycle-guarantee {
    flex: none;
    gap: calc(24 * var(--u));
    width: 100%;
  }

  .guarantee-card {
    gap: calc(24 * var(--u));
    width: 49.0509%;
    backdrop-filter: blur(1.365px);
  }

  .guarantee-bracket {
    height: calc(24 * var(--u));
  }

  /* Figma m Frame 708：182×60、padding 16；
     邊線框稿 38，但有 inset -26.32% 外擴 → 視覺約 58，避免上下線貼字 */
  .guarantee-kicker {
    width: calc(182 * var(--u));
    min-height: calc(60 * var(--u));
    padding: calc(16 * var(--u)) calc(16 * var(--u));
  }

  .guarantee-kicker img {
    width: calc(182 * var(--u));
    height: calc(58 * var(--u));
  }

  .guarantee-kicker span {
    width: auto;
    font-size: calc(20 * var(--u));
    line-height: calc(27.3 * var(--u));
    letter-spacing: calc(1.6 * var(--u));
    text-indent: 0;
    text-shadow: 0 calc(1.092 * var(--u)) calc(5.459 * var(--u)) #002a58;
  }

  /* 手機行高 81.878 比 128px 的字身（約 92）矮，靠上面的 padding-block 撐開漸層底框。 */
  .guarantee-figure {
    background-image: linear-gradient(169.779deg, #3afff5 26.27%, #1f6dff 86.666%);
    font-size: calc(128 * var(--u));
    line-height: calc(81.878 * var(--u));
    filter: drop-shadow(calc(5.459 * var(--u)) calc(5.459 * var(--u)) calc(3.275 * var(--u)) rgba(0, 0, 0, .25));
  }

  .guarantee-label {
    font-size: calc(15 * var(--u));
    line-height: calc(28 * var(--u));
    letter-spacing: calc(1.2 * var(--u));
    text-indent: calc(1.2 * var(--u));
  }

  .guarantee-label sup {
    font-size: calc(9.675 * var(--u));
  }

  .guarantee-points {
    flex-direction: row;
    gap: calc(16 * var(--u));
    justify-content: center;
  }

  .guarantee-points li {
    gap: calc(13.1 * var(--u));
  }

  .guarantee-points img {
    flex: 0 0 calc(21.834 * var(--u));
    width: calc(21.834 * var(--u));
    height: calc(21.834 * var(--u));
  }

  .guarantee-points span {
    font-size: calc(15 * var(--u));
    line-height: calc(20 * var(--u));
    letter-spacing: calc(.6987 * var(--u));
    text-shadow: calc(.546 * var(--u)) calc(1.092 * var(--u)) calc(4.367 * var(--u)) #0083ee;
  }

  .lifecycle-program {
    flex: none;
    gap: calc(40 * var(--u));
    justify-content: flex-start;
    width: 100%;
    padding: calc(40 * var(--u)) 7.2202%;
    border-radius: calc(13.1 * var(--u));
    outline-width: calc(1.092 * var(--u));
    outline-offset: calc(-1.092 * var(--u));
    backdrop-filter: blur(2.729px);
  }

  .lifecycle-program h3 {
    font-size: calc(24 * var(--u));
    line-height: calc(21.834 * var(--u));
    letter-spacing: calc(1.3974 * var(--u));
  }

  .lifecycle-program h3 sup {
    font-size: calc(15.48 * var(--u));
  }

  /* 76.419 : 21.834 : 122.271 : 21.834 : 122.271 : 21.834 : 87.336 於 474 */
  .lifecycle-timeline {
    gap: 4.6063%;
  }

  .lifecycle-timeline-line {
    top: calc(97.286 * var(--u));
    width: 96.0422%;
    height: calc(6.303 * var(--u));
  }

  .timeline-step {
    flex-basis: 25.7956%;
    gap: calc(13.1 * var(--u));
    width: 25.7956%;
  }

  .timeline-step--start {
    flex-basis: 16.1222%;
    width: 16.1222%;
  }

  .timeline-step--end {
    flex-basis: 18.4253%;
    width: 18.4253%;
  }

  .timeline-visual {
    height: calc(56.769 * var(--u));
  }

  .timeline-visual img {
    width: calc(32.751 * var(--u));
    height: calc(32.751 * var(--u));
  }

  .timeline-visual .timeline-array {
    width: 100%;
    height: calc(56.769 * var(--u));
  }

  .timeline-visual small {
    font-size: calc(11 * var(--u));
    line-height: calc(13.1 * var(--u));
  }

  .timeline-step strong {
    font-size: calc(20 * var(--u));
    line-height: calc(24.563 * var(--u));
  }

  .timeline-step p {
    font-size: calc(15 * var(--u));
    line-height: calc(27.293 * var(--u));
    letter-spacing: calc(1.2 * var(--u));
    text-indent: calc(1.2 * var(--u));
  }

  .lifecycle-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(16 * var(--u));
  }

  .lifecycle-services li {
    gap: calc(8 * var(--u));
    justify-content: flex-start;
    min-height: calc(68 * var(--u));
    padding: calc(4 * var(--u)) calc(12 * var(--u));
    border-width: calc(.546 * var(--u));
    border-radius: calc(4.367 * var(--u));
    box-shadow: calc(2.183 * var(--u)) calc(2.183 * var(--u)) calc(4.367 * var(--u)) 0 #1f2d5a;
  }

  .lifecycle-services img {
    flex: 0 0 calc(40 * var(--u));
    box-sizing: border-box;
    width: calc(40 * var(--u));
    height: calc(40 * var(--u));
    padding: calc(4 * var(--u));
    object-fit: contain;
    object-position: center;
  }

  .lifecycle-services span {
    font-size: calc(15 * var(--u));
    line-height: calc(20 * var(--u));
    letter-spacing: calc(1.2 * var(--u));
    white-space: normal;
  }

  .lifecycle-notes {
    width: max-content;
    max-width: 100%;
    margin: calc(40 * var(--u)) auto 0;
    text-align: left;
  }

  .lifecycle-notes p {
    font-size: calc(10 * var(--u));
    letter-spacing: calc(.8 * var(--u));
  }

  .lifecycle-notes p + p {
    margin-top: calc(8 * var(--u));
  }
}

/* 區塊主標題共用字級：一律跟 --u，避免 clamp 在平板把字級與底圖比例拆開。 */
.overview-heading .section-title--overview,
.hardware-heading .section-title--hardware,
.software-heading .section-title--software,
.section-title--lifecycle,
.section-title--ai-management,
.section-title.section-title--bracket {
  --section-title-size: calc(48 * var(--u));
}

/* 標題下方說明（副標）：同一 class，字級／行高／字距統一跟 --u */
.section-subtitle {
  margin-top: calc(24 * var(--u));
  color: #fff;
  font-size: calc(32 * var(--u));
  font-weight: 400;
  line-height: calc(50 * var(--u));
  letter-spacing: calc(2.56 * var(--u));
}

/* AI 副標需滿版寬度才不會提早斷行 */
.ai-management-heading .section-subtitle {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-inline: calc(20 * var(--u));
}

/* 硬體副標桌機不換行 */
.hardware-heading .section-subtitle {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .overview-heading .section-title--overview,
  .hardware-heading .section-title--hardware,
  .software-heading .section-title--software,
  .section-title--lifecycle,
  .section-title--ai-management {
    /* 640 稿 40px；更小螢幕隨 --u 等比縮小 */
    --section-title-size: calc(40 * var(--u));
  }

  .section-subtitle {
    margin-top: calc(8 * var(--u));
    font-size: calc(24 * var(--u));
    line-height: calc(36 * var(--u));
    letter-spacing: calc(1.92 * var(--u));
  }

  .hardware-heading .section-subtitle {
    white-space: normal;
  }

  /* 軟體標題為雙行，副標與標題間距略加大 */
  .software-heading .section-subtitle {
    margin-top: calc(40 * var(--u));
  }
}

/* 主區塊高度由內容自然撐開，不以固定最小高度限制。 */
.powerstore-overview,
.hardware-innovation,
.software-intelligence,
.lifecycle-extension,
.ai-management,
.evolution {
  min-height: 0;
}

/* ============================================================
   區塊共用背景與接縫漸層
   - hex-grid.png：對應 Figma Frame 718／bg-002
     以 sticky 視窗層蓋住 overview→hardware→software，左右各一層（一層鏡像）
   - 僅 overview 上方、software 下方做底色→透明過渡
   - bg-004.png：ai-management / product-family / media-library 共用固定背景（較亮較鮮）
   - ai-management、product-family、survey 做接縫漸層過渡
   - lifecycle：bg-007.png（非固定）
   ============================================================ */

/*
 * Figma Frame 718／bg-002：overview→hardware→software 共用鏡像背景。
 * sticky + 負 margin 鎖視窗，三區滾動時背景固定（視差）。
 */
.hex-stage {
  position: relative;
  z-index: 0;
  background: #000;
}

.hex-stage-bg {
  position: sticky;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  margin-bottom: -100vh;
  margin-bottom: -100dvh;
  pointer-events: none;
}

.hex-stage-bg-layer {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/hex-grid.png") center / cover no-repeat;
}

/* 第二層：rotate 180 + scaleY -1，對應 Figma 鏡像 bg-002 */
.hex-stage-bg-layer--flip {
  transform: rotate(180deg) scaleY(-1);
}

/*
 * 平板／手機：素材右側才有六角、左側全黑。
 * 勿用 cover+center（會裁到黑心）；改兩側等比例縮小，中間留給文案。
 */
@media (max-width: 1391px) {
  .hex-stage-bg-layer,
  .hex-stage-bg-layer--base {
    top: 0;
    right: 0;
    left: auto;
    width: 48%;
    height: 100%;
    background-position: right center;
    background-size: auto 62%;
    background-repeat: no-repeat;
    opacity: .7;
    filter: brightness(1.15) saturate(1.08);
    transform: none;
    /* 只朝中間淡出，上下不裁切，避免出現方框切線 */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
  }

  .hex-stage-bg-layer--flip {
    right: auto;
    left: 0;
    opacity: .7;
    filter: brightness(1.12) saturate(1.06);
    transform: scaleX(-1);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
  }

  .ai-management,
  .product-family,
  .media-library {
    background-position: center;
  }

  .ai-management {
    background-size: auto, auto, auto, cover;
  }

  .product-family,
  .media-library {
    background-size: auto, cover;
  }

  .lifecycle-extension {
    background-position: center;
    background-size: cover;
  }
}

.powerstore-overview,
.hardware-innovation,
.software-intelligence {
  position: relative;
  z-index: 1;
  isolation: auto;
  overflow: visible;
  background: transparent !important;
  background-image: none !important;
}

.powerstore-overview > .overview-shell,
.hardware-innovation > .hardware-shell,
.software-intelligence > .software-shell {
  position: relative;
  z-index: 1;
}

/* 清掉舊滿版偽元素底色／遮罩，避免蓋住共用固定背景 */
.powerstore-overview::before,
.powerstore-overview::after,
.hardware-innovation::before,
.hardware-innovation::after,
.software-intelligence::before {
  inset: auto;
  background: none;
  background-image: none;
  opacity: 1;
  filter: none;
}

.powerstore-overview::before {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 0;
  height: calc(160 * var(--u));
  background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%);
  content: "";
  pointer-events: none;
}

.software-intelligence::after {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(160 * var(--u));
  background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%);
  content: "";
  pointer-events: none;
}

.ai-management,
.product-family,
.media-library {
  background-color: #000;
  background-image:
    linear-gradient(rgba(0, 18, 36, .22), rgba(0, 10, 22, .38)),
    url("../images/bg-004.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* 超寬螢幕：fixed + cover 確保左右貼齊，不出現背景結束切線
   （evolution 維持設計稿 1920 置中框，不套 cover） */
@media (min-width: 1921px) {
  .hex-stage-bg-layer,
  .ai-management,
  .product-family,
  .media-library,
  .lifecycle-extension,
  .survey {
    background-size: cover;
  }

  .ai-management {
    background-size: auto, auto, auto, cover;
  }

  .product-family,
  .media-library {
    background-size: auto, cover;
  }

  .survey {
    background-size: cover;
    background-position: center top;
  }
}

/* ai-management 光暈併入背景層，騰出 ::before / ::after 做上下接縫漸層 */
.ai-management {
  background-image:
    radial-gradient(ellipse at 50% 42%, rgba(58, 255, 245, .22), transparent 46%),
    radial-gradient(ellipse at 72% 58%, rgba(31, 109, 255, .16), transparent 42%),
    linear-gradient(rgba(0, 18, 36, .22), rgba(0, 10, 22, .38)),
    url("../images/bg-004.png");
}

.ai-management::before,
.ai-management::after {
  position: absolute;
  z-index: -1;
  right: 0;
  left: 0;
  height: calc(160 * var(--u));
  content: "";
  pointer-events: none;
}

.ai-management::before {
  top: 0;
  background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%);
}

.ai-management::after {
  bottom: 0;
  background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%);
}

/* bg-004 共用鮮艷光暈（product-family 的 ::before 留給上方接縫漸層，光暈改放 ::after） */
.media-library::before,
.product-family::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(58, 255, 245, .28), transparent 46%),
    radial-gradient(ellipse at 72% 58%, rgba(31, 109, 255, .22), transparent 42%);
  content: "";
  pointer-events: none;
  mix-blend-mode: screen;
}

.product-family::after {
  z-index: -2;
}

.media-library::after {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(160 * var(--u));
  background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%);
  content: "";
  pointer-events: none;
}

/* ============================================================
   S07 PowerStore 產品家族
   ============================================================ */
.product-family {
  --product-cyan: #24edf1;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(100 * var(--u));
}

.product-family::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  height: calc(160 * var(--u));
  background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%);
  content: "";
  pointer-events: none;
}

.product-family-shell {
  width: calc(1021 * var(--u));
  margin: 0 auto;
}

.product-family-heading {
  text-align: center;
}

.product-family-heading .section-title--product-family {
  --section-title-size: calc(48 * var(--u));
  position: relative;
  left: 50%;
  display: block;
  width: max-content;
  max-width: 100%;
  height: calc(113 * var(--u));
  margin: 0;
  padding-top: calc(27 * var(--u));
  padding-left: 0;
  overflow: visible;
  transform: translateX(-50%);
}

.product-family-heading .section-title--product-family .section-title-bg {
  inset: auto;
  bottom: calc(16 * var(--u));
  left: calc(-125 * var(--u));
  width: calc(324 * var(--u));
  height: calc(81 * var(--u));
}

.product-family-heading .section-title--product-family > span {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  padding: 0;
  line-height: calc(68 * var(--u));
  letter-spacing: 0.1rem;
  transform: none;
}

.product-family-heading .section-title--product-family .section-title-dots {
  right: 0;
  bottom: 0;
}

.product-family-chart {
  display: block;
  width: calc(1021 * var(--u));
  max-width: 100%;
  margin: calc(40 * var(--u)) auto 0;
}

.product-family-chart img {
  display: block;
  width: 100%;
  height: auto;
}

.product-family-chart-mobile {
  display: none !important;
}

/* 設計稿：由下 #00468b → 上 #19dcff 漸層字；陰影需用 drop-shadow（text-shadow 無法作用於 clip text） */
.product-family-os {
  margin: calc(24 * var(--u)) 0 0;
  background: linear-gradient(0deg, #00468b 0%, #19dcff 52.069%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-family: Roboto, "Noto Sans TC", sans-serif;
  font-size: calc(36 * var(--u));
  font-weight: 700;
  line-height: calc(40 * var(--u));
  letter-spacing: calc(2.88 * var(--u));
  text-align: center;
  filter: drop-shadow(0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .6));
}

.product-family-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(8 * var(--u));
  width: calc(1021 * var(--u));
  max-width: 100%;
  margin: calc(24 * var(--u)) auto 0;
  padding: 0;
  list-style: none;
  overflow: visible;
}

/* 與 hardware-specs 相同：縮短滑入距離並明確補 opacity */
.product-family-cards [data-aos="fade-up"] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}

.product-family-cards [data-aos="fade-up"].aos-animate {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.product-family-cards li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: calc(180 * var(--u));
  padding: calc(24 * var(--u)) calc(10 * var(--u));
  overflow: hidden;
  border: calc(1 * var(--u)) solid #3afff5;
  background: linear-gradient(360deg, #002a58 0%, #1f87b8 92.262%);
  backdrop-filter: blur(calc(3 * var(--u)));
  text-align: center;
}

.product-family-cards li::before,
.product-family-cards li::after {
  position: absolute;
  z-index: 1;
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  background: #3afff5;
  content: "";
  pointer-events: none;
}

/* 右上直角三角：直角貼齊右上角 */
.product-family-cards li::before {
  top: calc(-1 * var(--u));
  right: calc(-1 * var(--u));
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* 左下直角三角：直角貼齊左下角（兩邊貼底與左邊） */
.product-family-cards li::after {
  bottom: calc(-1 * var(--u));
  left: calc(-1 * var(--u));
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.product-family-cards img {
  position: relative;
  z-index: 1;
  flex: none;
  display: block;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  margin: 0 0 calc(4 * var(--u));
  object-fit: contain;
}

.product-family-cards span {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: calc(20 * var(--u));
  font-weight: 400;
  line-height: calc(30 * var(--u));
  letter-spacing: calc(1.6 * var(--u));
}

/* Reusable bracket title component: 文字置中，裝飾圖相對文字定位。 */
.section-heading {
  text-align: center;
}

.section-title--bracket {
  --section-title-size: calc(48 * var(--u));
  --title-frame-inset: calc(125 * var(--u));
  position: relative;
  left: 50%;
  display: block;
  width: max-content;
  max-width: 100%;
  height: calc(113 * var(--u));
  padding-top: calc(27 * var(--u));
  padding-left: 0;
  overflow: visible;
  font-family: Roboto, "Noto Sans TC", sans-serif;
  transform: translateX(-50%);
}

.section-title--bracket .section-title-bg {
  inset: auto;
  bottom: calc(16 * var(--u));
  left: calc(-1 * var(--title-frame-inset));
  width: calc(325.481 * var(--u));
  height: calc(81 * var(--u));
}

.section-title--bracket > span {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  padding: 0;
  line-height: calc(70 * var(--u));
  letter-spacing: 0.1rem;
  transform: none;
}

.section-title--bracket .section-title-dots {
  right: 0;
  bottom: 0;
  width: calc(70.28 * var(--u));
  height: calc(8.34 * var(--u));
}

/* S08 PowerStore 影音智庫 */
.media-library {
  --media-u: 1px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 110px 0 130px;
}

.media-library-shell {
  width: min(1280px, 92%);
  margin: 0 auto;
}

.media-library-heading {
  text-align: center;
}

.media-library-heading .section-title--media-library {
  --section-title-size: 48px;
  display: inline-block;
  height: 108px;
  padding: 17px 0 0;
  overflow: visible;
  font-family: Roboto, "Noto Sans TC", sans-serif;
}

.media-library-heading .section-title-bg { left: -104px; width: 324px; height: 81px; }
.media-library-heading .section-title--media-library > span { position: relative; z-index: 1; line-height: 68px; letter-spacing: 0.1rem; }
.media-library-heading .section-title-dots { right: 0; bottom: 0; }

.media-library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  width: 1200px;
  max-width: 100%;
  margin: 40px auto 0;
  padding: 0;
  list-style: none;
  perspective: 1200px;
}

.media-library-grid li {
  min-width: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.media-library-grid a {
  display: block;
  filter: contrast(1.08) saturate(1.06);
  transition: transform .2s ease, filter .2s ease;
}
.media-library-grid a:hover {
  filter: contrast(1.1) saturate(1.08) brightness(1.1);
  transform: translateY(-4px);
}
.media-library-grid img { display: block; width: 100%; height: auto; }

@media (min-width: 769px) and (max-width: 1391px) {
  .media-library { --media-u: .0718391vw; padding: calc(110 * var(--media-u)) 0 calc(130 * var(--media-u)); }
  .media-library-heading .section-title--media-library { --section-title-size: calc(48 * var(--media-u)); height: calc(108 * var(--media-u)); padding: calc(17 * var(--media-u)) 0 0; }
  .media-library-heading .section-title-bg { left: calc(-104 * var(--media-u)); width: calc(324 * var(--media-u)); height: calc(81 * var(--media-u)); }
  .media-library-heading .section-title--media-library > span { line-height: calc(68 * var(--media-u)); letter-spacing: 0.1rem; }
  .media-library-heading .section-title-dots { right: 0; bottom: 0; }
  .media-library-grid { width: calc(1200 * var(--media-u)); gap: calc(40 * var(--media-u)); margin-top: calc(40 * var(--media-u)); }
}

@media (max-width: 768px) {
  .section-title--bracket {
    --section-title-size: calc(40 * var(--u));
    --title-frame-inset: calc(77.193 * var(--u));
    --title-frame-height: calc(66 * var(--u));
    height: calc(84 * var(--u));
    /* 首行在底圖框內垂直置中，上下留安全距離 */
    padding-top: calc(24 * var(--u));
    padding-bottom: calc(12 * var(--u));
    padding-left: 0;
    transform: translateX(-50%);
  }
  .section-title--bracket .section-title-bg {
    top: calc(9 * var(--u));
    bottom: auto;
    left: calc(-1 * var(--title-frame-inset));
    width: calc(265.193 * var(--u));
    height: var(--title-frame-height);
  }
  .section-title--bracket > span {
    line-height: calc(48 * var(--u));
    letter-spacing: 0.1rem;
  }
  .section-title--bracket .section-title-dots {
    width: calc(57.262 * var(--u));
    height: calc(6.795 * var(--u));
  }
  /* 卡片圖用桌機版；640 一卡一列 */
  .media-library { padding: calc(50 * var(--u)) 0 calc(70 * var(--u)); }
  .media-library-shell { width: min(92%, calc(568 * var(--u))); }
  .media-library-heading .section-title--media-library {
    --section-title-size: calc(40 * var(--u));
    height: calc(84 * var(--u));
    padding: calc(24 * var(--u)) 0 calc(12 * var(--u));
  }
  .media-library-heading .section-title-bg {
    top: calc(9 * var(--u));
    left: calc(-77 * var(--u));
    width: calc(265 * var(--u));
    height: calc(66 * var(--u));
  }
  .media-library-heading .section-title--media-library > span {
    line-height: calc(48 * var(--u));
    letter-spacing: 0.1rem;
  }
  .media-library-heading .section-title-dots { right: 0; bottom: 0; width: calc(57 * var(--u)); }
  .media-library-grid {
    grid-template-columns: 1fr;
    gap: calc(24 * var(--u));
    width: 100%;
    margin-top: calc(38 * var(--u));
  }
}

@media (max-width: 768px) {
  /* hex 兩側構圖見上方 max-width:1391；此處只補 sticky 高度 fallback */
  .hex-stage {
    background: #000;
  }

  .hex-stage-bg {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    height: 100svh;
    margin-bottom: -100vh;
    margin-bottom: -100dvh;
    margin-bottom: -100svh;
  }

  /* 手機再縮小，拉開與中間文案距離 */
  .hex-stage-bg-layer,
  .hex-stage-bg-layer--base {
    width: 38%;
    background-size: auto 44%;
    opacity: .55;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 48%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 48%);
  }

  .hex-stage-bg-layer--flip {
    opacity: .55;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 48%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 48%);
  }

  .powerstore-overview,
  .hardware-innovation,
  .software-intelligence {
    background: transparent !important;
    background-image: none !important;
  }

  .powerstore-overview::before {
    height: calc(40 * var(--u));
  }

  .software-intelligence::after {
    height: calc(80 * var(--u));
  }

  /* 產品家族→影音智庫：手機版背景固定（獎品 survey 前）；ai 區維持 scroll */
  .ai-management {
    background-attachment: scroll;
  }

  .product-family,
  .media-library {
    background-attachment: fixed;
  }

  .ai-management,
  .product-family,
  .media-library {
    background-image:
      linear-gradient(rgba(0, 18, 36, .12), rgba(0, 10, 22, .22)),
      url("../images/bg-004.png");
  }

  .ai-management {
    background-image:
      radial-gradient(ellipse at 50% 42%, rgba(58, 255, 245, .28), transparent 48%),
      radial-gradient(ellipse at 72% 58%, rgba(31, 109, 255, .2), transparent 44%),
      linear-gradient(rgba(0, 18, 36, .12), rgba(0, 10, 22, .22)),
      url("../images/bg-004.png");
    background-size: auto, auto, auto, cover;
    background-position: center;
  }

  /* 與桌機一致用 cover，fixed 時構圖才連續、不因 auto 飄移 */
  .product-family,
  .media-library {
    background-size: auto, cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .product-family {
    padding: calc(40 * var(--u)) 0;
  }

  .product-family-shell {
    width: calc(500 * var(--u));
  }

  .product-family-heading .section-title--product-family {
    --section-title-size: calc(40 * var(--u));
    height: calc(84 * var(--u));
    padding: calc(24 * var(--u)) 0 calc(12 * var(--u));
  }

  .product-family-heading .section-title--product-family .section-title-bg {
    top: calc(9 * var(--u));
    bottom: auto;
    left: calc(-77.193 * var(--u));
    width: calc(265.193 * var(--u));
    height: calc(66 * var(--u));
  }

  .product-family-heading .section-title--product-family > span {
    line-height: calc(48 * var(--u));
    letter-spacing: 0.1rem;
  }

  .product-family-heading .section-title--product-family .section-title-dots {
    right: 0;
    bottom: 0;
    width: calc(57.262 * var(--u));
    height: calc(6.795 * var(--u));
  }

  .product-family-chart {
    width: calc(564 * var(--u));
    max-width: none;
    margin: calc(40 * var(--u)) calc(-32 * var(--u)) 0;
  }

  .product-family-chart-desktop {
    display: none !important;
  }

  .product-family-chart-mobile {
    display: block !important;
  }

  .product-family-os {
    margin-top: calc(24 * var(--u));
    background: linear-gradient(0deg, #00468b 21.697%, #19dcff 63.662%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-size: calc(32 * var(--u));
    line-height: calc(30 * var(--u));
    letter-spacing: calc(2.56 * var(--u));
    filter: drop-shadow(0 calc(.667 * var(--u)) calc(3.333 * var(--u)) rgba(0, 0, 0, .6));
  }

  /* 手機五卡：6 欄 grid 置中第二列（勿用 transform，會被 AOS 蓋掉） */
  .product-family-cards {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: calc(152 * var(--u)) calc(150 * var(--u));
    column-gap: calc(8 * var(--u));
    row-gap: calc(16 * var(--u));
    width: 100%;
    margin-top: calc(20 * var(--u));
  }

  .product-family-cards li {
    justify-content: flex-start;
    gap: calc(4 * var(--u));
    height: 100%;
    min-height: 0;
    padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u));
    overflow: hidden;
  }

  .product-family-cards li:nth-child(1) { grid-column: 1 / 3; }
  .product-family-cards li:nth-child(2) { grid-column: 3 / 5; }
  .product-family-cards li:nth-child(3) { grid-column: 5 / 7; }
  .product-family-cards li:nth-child(4) { grid-column: 2 / 4; }
  .product-family-cards li:nth-child(5) { grid-column: 4 / 6; }

  .product-family-cards li::before,
  .product-family-cards li::after {
    width: calc(10 * var(--u));
    height: calc(10 * var(--u));
  }

  .product-family-cards li::before {
    top: calc(-.333 * var(--u));
    right: calc(-.333 * var(--u));
  }

  .product-family-cards li::after {
    bottom: calc(-.333 * var(--u));
    left: calc(-.333 * var(--u));
  }

  .product-family-cards img {
    flex: none;
    width: calc(40 * var(--u));
    height: calc(40 * var(--u));
    margin: 0;
  }

  .product-family-cards span {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    font-size: calc(20 * var(--u));
    line-height: normal;
    letter-spacing: calc(1.6 * var(--u));
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* 手機改自然換行（約 6 字／行），對齊設計稿段行 */
  .product-card-dbr {
    display: none;
  }
}


/* ============================================================
   S06 進化不息 Dell PowerStore 領航未來
   與 S04／S05 相同的縮放模型：桌機 1920 版面，--u = 1px（≥1392 定尺，
   1392 以下等比縮），手機 640 版面 --u = 視窗寬 / 640。
   ============================================================ */
.evolution {
  --u: 1px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(120 * var(--u)) 0 calc(134 * var(--u));
  background: #000;
}

@media (min-width: 769px) and (max-width: 1391px) {
  .evolution {
    --u: .0718391vw;
  }
}

.evolution-shell {
  width: min(1296px, 93.1034%);
  margin: 0 auto;
}

.evolution-heading {
  text-align: center;
}

/* 標題結構與 S05 相同；"Dell PowerStore" 在設計稿是 Roboto，補上字族。 */
.evolution-heading .section-title--evolution {
  --section-title-size: calc(48 * var(--u));
  position: relative;
  left: 50%;
  display: block;
  width: max-content;
  max-width: 100%;
  height: calc(113 * var(--u));
  padding-top: calc(27 * var(--u));
  padding-left: 0;
  overflow: visible;
  font-family: Roboto, "Noto Sans TC", sans-serif;
  transform: translateX(-50%);
}

.evolution-heading .section-title--evolution .section-title-bg {
  inset: auto;
  bottom: calc(16 * var(--u));
  left: calc(-125 * var(--u));
  width: calc(325.481 * var(--u));
  height: calc(81 * var(--u));
}

.evolution-heading .section-title--evolution > span {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  padding: 0;
  line-height: calc(70 * var(--u));
  letter-spacing: 0.1rem;
  transform: none;
}

.evolution-heading .section-title--evolution .section-title-dots {
  right: 0;
  bottom: 0;
  width: calc(70.28 * var(--u));
  height: calc(8.34 * var(--u));
}

/* 標題斷行只在手機生效；桌機保留字串裡的半形空格串成一行。 */
.evolution-title-break {
  display: none;
}

/* --- 背景層 ---
   獨立一張 bg.jpg（不含產品圖、不含標題），依設計稿 1920×854 置中。
   top 上移讓光圈落在產品正下方（緊貼機箱底邊），避免產品與光圈之間出現大塊黑空。 */
.evolution-bg {
  position: absolute;
  z-index: -1;
  /* 光圈位置：產品底邊對齊光圈最亮帶（約背景 63%）
     公式：top = 產品底(245+212) - 541 ≈ -84
     再往上（更負）光圈升高；往下（接近 0）光圈降低 */
  top: calc(-45 * var(--u));
  left: 50%;
  width: calc(1920 * var(--u));
  height: calc(854 * var(--u));
  background: url("../images/evolution-bg.jpg") center top / 100% 100% no-repeat;
  transform: translateX(-50%);
  pointer-events: none;
  filter: contrast(1) brightness(0.92) saturate(1.08);
}

.evolution-bg::before,
.evolution-bg::after {
  position: absolute;
  left: 0;
  width: 100%;
  content: "";
}

/* 標題區遮罩縮短，避免蓋住上移後的光圈 */
.evolution-bg::before {
  top: 0;
  height: calc(140 * var(--u));
  background: linear-gradient(180deg,
    #000 0%,
    rgba(0, 0, 0, .8) 40%,
    rgba(0, 0, 0, .35) 70%,
    rgba(0, 0, 0, 0) 100%);
}

.evolution-bg::after {
  bottom: 0;
  height: calc(120 * var(--u));
  background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%);
}

/* --- 產品圖 ---
   機箱在標題下方正常排版；光圈已上移對齊機箱底邊。 */
.evolution-stage {
  position: relative;
  z-index: 1;
  height: auto;
  padding-top: calc(10 * var(--u));
  /* 下方留白讓光圈完整露在產品與卡片之間 */
  padding-bottom: calc(120 * var(--u));
  background: transparent;
}

.evolution-array {
  position: relative;
  z-index: 1;
  display: block;
  width: calc(777 * var(--u));
  height: calc(212 * var(--u));
  margin-inline: auto;
  background: transparent;
}

/* 四張卡片：922 = 450 × 2 + 22 欄距，列距 18。 */
.evolution-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(18 * var(--u)) calc(22 * var(--u));
  width: calc(922 * var(--u));
  max-width: 100%;
  margin: calc(11 * var(--u)) auto 0;
  padding: 0;
  list-style: none;
}

.evolution-card {
  position: relative;
  min-height: calc(142 * var(--u));
  padding: calc(7 * var(--u)) calc(10 * var(--u));
}

/* 特殊邊框裝飾（左上粗弧＋右上端點＋細線外框）直接使用圖檔。
   外框比卡片各邊多 12，讓粗弧與端點可以外溢到卡片範圍之外。 */
.evolution-card-frame {
  position: absolute;
  z-index: 0;
  top: calc(-12 * var(--u));
  left: calc(-12 * var(--u));
  width: calc(474 * var(--u));
  height: calc(166 * var(--u));
  pointer-events: none;
}

/* 文字底板：毛玻璃。 */
.evolution-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  gap: calc(24 * var(--u));
  align-items: center;
  justify-content: center;
  min-height: calc(128 * var(--u));
  padding: calc(12 * var(--u)) calc(20 * var(--u));
  border: calc(1 * var(--u)) solid rgba(226, 240, 248, .4);
  border-radius: calc(20 * var(--u));
  /* 設計稿底板由上藍下青，明度相近；不是單純往下變暗。 */
  background: linear-gradient(180deg, rgba(12, 78, 150, .5), rgba(6, 96, 116, .46));
  backdrop-filter: blur(calc(8 * var(--u)));
  -webkit-backdrop-filter: blur(calc(8 * var(--u)));
}

/* 設計稿 icon 外框 40×40；圖形比例以 contain 維持，並套藍色光暈 */
.evolution-card-body > img {
  flex: none;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(calc(1 * var(--u)) calc(2 * var(--u)) calc(4 * var(--u)) #0083ee);
}

.evolution-card-body > span {
  color: #fff;
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: calc(36 * var(--u));
  letter-spacing: calc(2.56 * var(--u));
  text-shadow:
    0 0 calc(6 * var(--u)) rgba(100, 210, 255, .45),
    0 0 calc(14 * var(--u)) rgba(0, 160, 255, .35),
    0 0 calc(24 * var(--u)) rgba(0, 131, 238, .22);
}

/* 03_landing_m Frame 6／cards-009-m02：640 基準、--u 等比；文案單行 */
@media (max-width: 768px) {
  .evolution {
    --u: min(.15625vw, 1px);
    padding: calc(75 * var(--u)) 0;
  }

  .evolution-shell {
    width: 100%;
  }

  /* 三行標題：title-001-m 約 411×204，字 40／行高 60 */
  .evolution-heading .section-title--evolution {
    --section-title-size: calc(40 * var(--u));
    height: auto;
    min-height: calc(204 * var(--u));
    padding-top: calc(8 * var(--u));
    padding-left: 0;
    text-align: center;
    transform: translateX(-50%);
  }

  .evolution-heading .section-title--evolution .section-title-bg {
    top: calc(9 * var(--u));
    bottom: auto;
    left: calc(-77.193 * var(--u));
    width: calc(265.193 * var(--u));
    height: calc(66 * var(--u));
  }

  .evolution-heading .section-title--evolution > span {
    line-height: calc(60 * var(--u));
    letter-spacing: calc(3.2 * var(--u));
  }

  .evolution-heading .section-title--evolution .section-title-dots {
    width: calc(57.262 * var(--u));
    height: calc(6.795 * var(--u));
  }

  .evolution-title-break {
    display: inline;
  }

  /* 光圈最亮帶對齊產品底邊下方（產品底≈416，光暈峰值≈440）
     資產峰值約在 72.2% 高；640×850 時 top = 440 - 0.722×850 ≈ -174 */
  .evolution-bg {
    top: calc(-174 * var(--u));
    left: 50%;
    width: calc(640 * var(--u));
    height: calc(850 * var(--u));
    background-image: url("../images/evolution-bg-m.jpg");
    background-size: 100% 100%;
    background-position: center top;
    transform: translateX(-50%);
  }

  /* 只遮標題區，勿蓋住產品下方光圈 */
  .evolution-bg::before {
    height: calc(200 * var(--u));
    background: linear-gradient(180deg,
      #000 0%,
      rgba(0, 0, 0, .8) 50%,
      rgba(0, 0, 0, 0) 100%);
  }

  .evolution-bg::after {
    height: calc(120 * var(--u));
  }

  .evolution-stage {
    height: auto;
    margin-top: calc(40 * var(--u));
    padding-top: 0;
    /* 留給產品底～光圈的可視空間 */
    padding-bottom: calc(64 * var(--u));
  }

  .evolution-array {
    position: relative;
    top: auto;
    left: auto;
    width: calc(500 * var(--u));
    height: calc(132 * var(--u));
    margin-inline: auto;
    object-fit: contain;
  }

  /* cards-009-m02：405×80、列距 24；文案單行等比 */
  .evolution-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(24 * var(--u));
    width: calc(405 * var(--u));
    margin-top: 0;
  }

  .evolution-card {
    width: calc(405 * var(--u));
    height: calc(80 * var(--u));
    min-height: 0;
    padding: 0;
    overflow: visible;
  }

  .evolution-card-frame {
    display: none;
  }

  /* TL 粗弧 32×32 @ (-18.5, -17.5) */
  .evolution-card::before {
    position: absolute;
    z-index: 2;
    top: calc(-17.5 * var(--u));
    left: calc(-18.5 * var(--u));
    display: block;
    width: calc(32 * var(--u));
    height: calc(32 * var(--u));
    background: url("../images/evolution-card-corner-tl.png") center / 100% 100% no-repeat;
    content: "";
    pointer-events: none;
  }

  /* 框線 427×103.5 @ (-11.5, bottom -10.5) rotate 180 → 右上端點 */
  .evolution-card::after {
    position: absolute;
    z-index: 2;
    top: auto;
    right: auto;
    bottom: calc(-10.5 * var(--u));
    left: calc(-11.5 * var(--u));
    display: block;
    width: calc(427 * var(--u));
    height: calc(103.5 * var(--u));
    background: url("../images/evolution-card-corner-br.png") center / 100% 100% no-repeat;
    content: "";
    pointer-events: none;
    transform: rotate(180deg);
  }

  .evolution-card-body {
    box-sizing: border-box;
    gap: calc(16 * var(--u));
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: calc(20 * var(--u));
    border: calc(1 * var(--u)) solid #0083ee;
    border-radius: calc(18 * var(--u));
    background: linear-gradient(175.4deg, rgba(2, 203, 234, .2) 16.5%, rgba(31, 109, 255, .2) 118%);
    backdrop-filter: blur(calc(4 * var(--u)));
    -webkit-backdrop-filter: blur(calc(4 * var(--u)));
  }

  .evolution-card-body > img {
    flex: none;
    width: calc(40 * var(--u));
    height: calc(40 * var(--u));
    filter: drop-shadow(calc(1 * var(--u)) calc(2 * var(--u)) calc(4 * var(--u)) #0083ee);
  }

  .evolution-card-body > span {
    flex: none;
    width: auto;
    max-width: none;
    overflow: visible;
    color: #fff;
    font-size: calc(32 * var(--u));
    font-weight: 700;
    line-height: calc(36 * var(--u));
    letter-spacing: calc(2.56 * var(--u));
    white-space: nowrap;
    text-shadow: calc(1 * var(--u)) calc(2 * var(--u)) calc(8 * var(--u)) #0083ee;
  }
}

/* 共用標題：文字／行高／上留白／底圖皆跟 --u，避免各區塊固定 px 把位置拆開。 */
.section-title.section-title--bracket {
  --section-title-size: calc(48 * var(--u));
  --title-frame-inset: calc(125 * var(--u));
  --title-frame-width: calc(325.481 * var(--u));
  --title-frame-height: calc(81 * var(--u));
  --title-dots-width: calc(70.28 * var(--u));
  --title-dots-height: calc(8.34 * var(--u));
  position: relative !important;
  left: 50% !important;
  display: block !important;
  width: max-content !important;
  max-width: calc(100% - calc(32 * var(--u)));
  min-height: calc(113 * var(--u));
  height: auto !important;
  margin: 0 !important;
  padding: calc(27 * var(--u)) 0 calc(16 * var(--u)) !important;
  overflow: visible;
  color: #fff;
  font-size: var(--section-title-size) !important;
  font-weight: 700;
  text-align: center;
  transform: translateX(-50%) !important;
}

.section-title.section-title--bracket .section-title-bg {
  inset: auto !important;
  bottom: calc(16 * var(--u)) !important;
  left: calc(-1 * var(--title-frame-inset)) !important;
  width: var(--title-frame-width) !important;
  height: var(--title-frame-height) !important;
}

.section-title.section-title--bracket > span {
  position: relative !important;
  z-index: 1;
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-weight: inherit;
  line-height: calc(70 * var(--u)) !important;
  letter-spacing: 0.1rem;
  text-align: center;
  transform: none !important;
}

.section-title.section-title--bracket .section-title-dots {
  right: 0 !important;
  bottom: 0 !important;
  width: var(--title-dots-width) !important;
  height: var(--title-dots-height) !important;
}

/* Overview 無 --bracket：同樣以文字置中，底圖相對文字左緣外掛。 */
.overview-heading .section-title--overview {
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible;
  transform: translateX(-50%) !important;
}

.overview-heading .section-title--overview .section-title-bg {
  left: -125px !important;
}

@media (max-width: 768px) {
  .overview-heading .section-title--overview {
    padding-left: 0 !important;
    transform: translateX(-50%) !important;
  }

  .overview-heading .section-title--overview .section-title-bg {
    left: calc(-93 * var(--u)) !important;
  }

  /* 手機標題：字在底圖框垂直中心，上下留安全距離（全站 bracket 統一） */
  .section-title.section-title--bracket {
    --title-frame-inset: calc(77.193 * var(--u));
    --title-frame-width: calc(265.193 * var(--u));
    --title-frame-height: calc(66 * var(--u));
    --title-dots-width: calc(57.262 * var(--u));
    --title-dots-height: calc(6.795 * var(--u));
    --section-title-size: calc(40 * var(--u));
    min-height: calc(84 * var(--u));
    padding-top: calc(24 * var(--u)) !important;
    padding-bottom: calc(12 * var(--u)) !important;
    font-size: var(--section-title-size) !important;
  }

  .section-title.section-title--bracket .section-title-bg {
    top: calc(9 * var(--u)) !important;
    bottom: auto !important;
    height: var(--title-frame-height) !important;
  }

  .section-title.section-title--bracket > span {
    line-height: calc(48 * var(--u)) !important;
  }

  .section-title-first-line {
    display: inline-block;
    transform: none;
  }
}

/* ============================================================
   Survey 問卷好禮（Figma 373:3420 / 594:2670）＋活動注意事項彈窗
   ============================================================ */
.survey {
  --u: 1px;
  /* Figma 03_landing：bg-006 相對 Frame 720 頂端偏移 115（8795-8680） */
  --survey-bg-offset-y: 115;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(100 * var(--u)) 0 calc(160 * var(--u));
  background-color: #000;
  /* bg-006：1920×1080，對齊設計稿位置，禁止 cover 變形 */
  background-image: url("../images/survey_bg.png");
  background-position: center calc(var(--survey-bg-offset-y) * var(--u));
  background-size: auto;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

.survey::before {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 0;
  height: calc(160 * var(--u));
  background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%);
  content: "";
  pointer-events: none;
}

@media (min-width: 769px) and (max-width: 1391px) {
  .survey {
    --u: .0718391vw;
  }
}

.survey-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(calc(1160 * var(--u)), 93.1034%);
  margin: 0 auto;
}

.survey-heading {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
  align-items: stretch;
  width: 100%;
  text-align: center;
}

.survey-title-break {
  display: none;
}

.survey-prize-name-mobile {
  display: none;
}

.survey-intro {
  margin: 0;
  color: #fff;
  font-size: calc(20 * var(--u));
  font-weight: 400;
  line-height: calc(36 * var(--u));
  letter-spacing: calc(1.6 * var(--u));
  text-align: center;
}

.survey-intro p {
  margin: 0;
}

.survey-terms-link {
  padding: 0;
  border: 0;
  background: none;
  color: #3afff5;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  text-decoration: none;
}

.survey-terms-link:hover,
.survey-terms-link:focus-visible {
  color: #9afffb;
}

/* Figma：heading→獎列 gap 130；首獎相對獎列 top -105 → 距 intro 25 */
.survey-prizes {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-height: calc(589 * var(--u));
  margin: calc(25 * var(--u)) 0 0;
  padding: calc(105 * var(--u)) 0 0;
  overflow: visible;
  list-style: none;
}

.survey-prize {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(400 * var(--u));
  height: auto;
}

.survey-prize--1 {
  order: 2;
  margin-top: calc(-105 * var(--u));
}

.survey-prize--2 {
  order: 1;
  margin-right: calc(-20 * var(--u));
}

.survey-prize--3 {
  order: 3;
  margin-left: calc(-20 * var(--u));
}

/* 六角形可視區：裁切產品圖，避免蓋住下方文案 */
.survey-prize-visual {
  position: relative;
  flex: none;
  width: calc(400 * var(--u));
  height: calc(347 * var(--u));
  overflow: hidden;
}

.survey-prize-glow {
  position: absolute;
  z-index: 0;
  bottom: calc(40 * var(--u));
  left: 50%;
  width: calc(528 * var(--u));
  height: calc(313 * var(--u));
  transform: translateX(-50%);
  pointer-events: none;
  animation: survey-glow-pulse 4.8s ease-in-out infinite;
}

.survey-prize-hex {
  position: absolute;
  left: 50%;
  pointer-events: none;
  transform: translateX(-50%);
}

.survey-prize-hex--fill {
  top: 0;
  z-index: 1;
  width: calc(400 * var(--u));
  height: calc(347 * var(--u));
}

/* Figma：370×321 + inset(-3.43% / -3.01%) → 視覺約 392×343 */
.survey-prize-hex--border {
  top: calc(2 * var(--u));
  z-index: 2;
  width: calc(392 * var(--u));
  height: calc(343 * var(--u));
  filter: drop-shadow(0 0 calc(8 * var(--u)) rgba(58, 255, 245, .35));
  animation: survey-hex-inner-glow 2.8s ease-in-out infinite;
  will-change: filter;
}

.survey-prize--1 .survey-prize-hex--border {
  animation-delay: -.6s;
}

.survey-prize--2 .survey-prize-hex--border {
  animation-delay: -1.9s;
}

.survey-prize--3 .survey-prize-hex--border {
  animation-delay: -1.2s;
}

/* 產品圖：Figma 266×266 / top 81；略下移保留與「首獎」安全距 */
.survey-prize-product {
  position: absolute;
  z-index: 3;
  top: calc(90 * var(--u));
  left: 50%;
  width: calc(248 * var(--u));
  height: calc(248 * var(--u));
  object-fit: contain;
  object-position: center;
  transform: translateX(-50%);
  animation: survey-float-c 4.6s ease-in-out infinite;
  filter: drop-shadow(0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(0, 131, 238, .28));
}

.survey-prize--1 .survey-prize-product {
  top: calc(90 * var(--u));
  width: calc(248 * var(--u));
  height: calc(248 * var(--u));
  animation-duration: 5.5s;
  animation-delay: -.8s;
}

.survey-prize--2 .survey-prize-product {
  animation-duration: 4.2s;
  animation-delay: -2.1s;
}

.survey-prize--3 .survey-prize-product {
  animation-duration: 5.8s;
  animation-delay: -1.1s;
}

.survey-prize--3 .survey-prize-glow {
  animation-delay: -1.8s;
}

.survey-prize-rank {
  position: absolute;
  z-index: 4;
  /* Figma：top 4.34% of 484 ≈ 21，40 / lh 60 / tracking 3.2 */
  top: calc(21 * var(--u));
  right: 0;
  left: 0;
  color: #fff;
  font-size: calc(40 * var(--u));
  font-weight: 700;
  line-height: calc(60 * var(--u));
  letter-spacing: calc(3.2 * var(--u));
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .55);
  pointer-events: none;
}

.survey-prize-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 0;
  /* Figma copy：py 8 */
  padding: calc(8 * var(--u)) calc(12 * var(--u));
  color: #fff;
  text-align: center;
  text-shadow: 0 calc(1 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .8);
}

.survey-prize-name,
.survey-prize-meta {
  margin: 0;
}

.survey-prize-name {
  font-size: calc(20 * var(--u));
  font-weight: 500;
  line-height: calc(30 * var(--u));
  letter-spacing: calc(1 * var(--u));
}

.survey-prize-meta {
  font-size: calc(16 * var(--u));
  font-weight: 400;
  line-height: calc(30 * var(--u));
  letter-spacing: calc(.8 * var(--u));
}

.survey-cta {
  display: inline-flex;
  gap: calc(18 * var(--u));
  align-items: center;
  justify-content: center;
  width: calc(434 * var(--u));
  height: calc(80 * var(--u));
  margin-top: calc(40 * var(--u));
  padding: 0 calc(36 * var(--u));
  border-radius: 999px;
  background: linear-gradient(180deg, #19dcff -51.09%, #00468b 54.67%);
  box-shadow: 0 2px 10px 2px #00f2fe inset;
  color: #fff;
  font-size: calc(30 * var(--u));
  font-weight: 500;
  line-height: calc(36 * var(--u));
  letter-spacing: calc(7.2 * var(--u));
  text-decoration: none;
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}

.survey-cta img {
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
  object-fit: contain;
  transition: transform .25s ease;
}

.survey-cta:hover,
.survey-cta:focus-visible {
  filter: brightness(1.12);
  transform: translateY(calc(-4 * var(--u))) scale(1.02);
  box-shadow:
    inset 0 calc(2 * var(--u)) calc(12 * var(--u)) #7dfff8,
    0 calc(10 * var(--u)) calc(28 * var(--u)) rgba(25, 220, 255, .35);
}

.survey-cta:hover img,
.survey-cta:focus-visible img {
  transform: translateX(calc(4 * var(--u)));
}

.survey-cta:focus-visible {
  outline: calc(2 * var(--u)) solid #3afff5;
  outline-offset: calc(4 * var(--u));
}

@keyframes survey-float-c {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, calc(-10 * var(--u))); }
}

@keyframes survey-glow-pulse {
  0%, 100% { opacity: .55; filter: blur(0); }
  50% { opacity: .95; filter: blur(.2px); }
}

/* survey-hex-inner：邊框發光（對比／亮度＋青色 drop-shadow） */
@keyframes survey-hex-inner-glow {
  0%,
  100% {
    filter:
      drop-shadow(0 0 calc(8 * var(--u)) rgba(58, 255, 245, .35))
      drop-shadow(0 0 calc(2 * var(--u)) rgba(255, 255, 255, .2))
      brightness(1.05)
      contrast(1.05)
      saturate(1.05);
  }
  50% {
    filter:
      drop-shadow(0 0 calc(28 * var(--u)) rgba(58, 255, 245, .85))
      drop-shadow(0 0 calc(12 * var(--u)) rgba(255, 255, 255, .45))
      brightness(1.35)
      contrast(1.2)
      saturate(1.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .survey-prize-glow,
  .survey-prize-product,
  .survey-prize-hex--border {
    animation: none;
  }

  .survey-prize-hex--border {
    filter: drop-shadow(0 0 calc(8 * var(--u)) rgba(58, 255, 245, .35));
  }
}

/* --- 活動注意事項彈窗 --- */
.survey-terms-overlay {
  position: fixed;
  z-index: 95;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24 * var(--u));
  overflow-y: auto;
  background: rgba(0, 6, 12, .78);
  opacity: 0;
  transition: opacity .25s ease;
}

.survey-terms-overlay[hidden] {
  display: none;
}

.survey-terms-overlay.is-open {
  opacity: 1;
}

.survey-terms {
  --survey-terms-u: 1px;
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc(1100 * var(--survey-terms-u));
  max-width: 100%;
  max-height: calc(100dvh - (48 * var(--survey-terms-u)));
  margin: auto;
  padding: calc(40 * var(--survey-terms-u)) 0;
  overflow: hidden;
  box-sizing: border-box;
  color: #fff;
  background: linear-gradient(180deg, #19dcff -51.095%, #00468b 154.672%);
}

@media (min-width: 769px) and (max-width: 1391px) {
  .survey-terms {
    --survey-terms-u: .0718391vw;
  }
}

.survey-terms[hidden] {
  display: none;
}

.survey-terms-corners {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.survey-terms-corner {
  position: absolute;
  width: calc(359 * var(--survey-terms-u));
  height: calc(48 * var(--survey-terms-u));
}

.survey-terms-corner--top-left { top: 0; left: 0; }
.survey-terms-corner--top-right { top: 0; right: 0; transform: scaleX(-1); }
.survey-terms-corner--bottom-left { bottom: 0; left: 0; transform: scaleY(-1); }
.survey-terms-corner--bottom-right { right: 0; bottom: 0; transform: rotate(180deg); }

.survey-terms-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: calc(40 * var(--survey-terms-u));
  width: 100%;
  min-height: 0;
  padding: 0 calc(60 * var(--survey-terms-u));
  overflow-y: auto;
}

.survey-terms-body h3 {
  margin: 0;
  font-size: calc(32 * var(--survey-terms-u));
  font-weight: 700;
  line-height: calc(50 * var(--survey-terms-u));
  letter-spacing: calc(2.56 * var(--survey-terms-u));
  text-align: center;
}

.survey-terms-body ul {
  margin: 0;
  padding: 0 0 0 calc(27 * var(--survey-terms-u));
  color: #fff;
  font-family: Roboto, "Noto Sans TC", sans-serif;
  font-size: calc(18 * var(--survey-terms-u));
  font-weight: 400;
  line-height: calc(30 * var(--survey-terms-u));
}

.survey-terms-body li + li {
  margin-top: calc(20 * var(--survey-terms-u));
}

.survey-terms-close {
  position: absolute;
  top: calc(20 * var(--survey-terms-u));
  right: calc(20 * var(--survey-terms-u));
  z-index: 2;
  width: calc(40 * var(--survey-terms-u));
  height: calc(40 * var(--survey-terms-u));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
}

.survey-terms-close img {
  display: block;
  width: 100%;
  height: 100%;
}

.survey-terms-close:hover,
.survey-terms-close:focus-visible {
  filter: brightness(1.2);
  transform: scale(1.06);
}

body.survey-terms-lock {
  overflow: hidden;
}

@media (max-width: 1024px) {
  .survey-terms-overlay {
    --survey-terms-u: min(.15625vw, 1px);
  }

  .survey-terms {
    width: calc(560 * var(--survey-terms-u));
    max-height: calc(100dvh - (48 * var(--survey-terms-u)));
    padding: calc(22 * var(--survey-terms-u)) 0;
  }

  .survey-terms-corner {
    width: calc(180 * var(--survey-terms-u));
    height: calc(24 * var(--survey-terms-u));
  }

  .survey-terms-body {
    gap: calc(24 * var(--survey-terms-u));
    padding: 0 calc(20 * var(--survey-terms-u));
  }

  .survey-terms-body h3 {
    font-size: calc(28 * var(--survey-terms-u));
    line-height: calc(40 * var(--survey-terms-u));
  }

  .survey-terms-body ul {
    font-size: calc(16 * var(--survey-terms-u));
    line-height: calc(28 * var(--survey-terms-u));
  }
}

@media (max-width: 768px) {
  .survey {
    /* 640 設計稿：1vw = 6.4px → .15625vw */
    --u: .15625vw;
    /* 手機略上移／放大背景，減少標題帶大片死黑（設計稿 offset 602.5 偏下） */
    --survey-bg-offset-y: 320;
    padding: calc(40 * var(--u)) 0 calc(80 * var(--u));
    background-attachment: scroll;
    background-position: center calc(var(--survey-bg-offset-y) * var(--u));
    background-size: 140% auto;
  }

  .survey-shell {
    width: 88.75%; /* 568 / 640 */
    max-width: 568px;
    overflow: visible;
  }

  .survey-heading {
    gap: calc(40 * var(--u));
    width: 100%;
    overflow: visible;
  }

  .survey-title-break {
    display: block;
  }

  .survey-prize-name-desktop {
    display: none;
  }

  .survey-prize-name-mobile {
    display: inline;
  }

  .survey-title-comma {
    display: none;
  }

  .survey-intro {
    width: 100%;
    font-size: calc(20 * var(--u));
    line-height: calc(30 * var(--u));
    letter-spacing: calc(.5333 * var(--u));
  }

  .survey-prizes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 7.0422535%; /* 40 / 568 */
    row-gap: calc(16 * var(--u));
    justify-content: center;
    align-items: start;
    width: 100%;
    min-height: 0;
    height: auto;
    margin-top: calc(40 * var(--u));
    padding: 0;
  }

  .survey-prize,
  .survey-prize--1,
  .survey-prize--2,
  .survey-prize--3 {
    order: initial;
    align-self: start;
    width: 100%;
    height: auto;
    margin: 0;
  }

  .survey-prize--1 {
    grid-column: 1 / -1;
    justify-self: center;
    width: 52.8169014%; /* 300 / 568 */
  }

  .survey-prize--2,
  .survey-prize--3 {
    width: 100%;
  }

  /* 六角形比例 400:347；邊框可略超出，避免放大後被裁切 */
  .survey-prize-visual {
    width: 100%;
    height: auto;
    aspect-ratio: 400 / 347;
    padding-bottom: 0;
    overflow: visible;
  }

  .survey-prize {
    overflow: visible;
  }

  .survey-prize--1 .survey-prize-visual {
    width: 80.6666667%; /* 242 / 300，對齊設計稿六角形寬 */
    margin-inline: auto;
  }

  .survey-prize-glow {
    bottom: auto;
    top: 45%;
    width: 132%;
    height: auto;
    aspect-ratio: 528 / 313;
  }

  .survey-prize-hex--fill {
    width: 100%;
    height: 100%;
  }

  .survey-prize--1 .survey-prize-hex--fill {
    width: 100%;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Figma：223.9×194.3 + inset(-2.85%/-2.51%) ≈ fill 的 97.2%／97.8% */
  .survey-prize-hex--border {
    top: 50%;
    left: 50%;
    width: 97.2%;
    height: 97.8%;
    transform: translate(-50%, -50%);
  }

  /* Figma 140；略下移與獎項標保留安全距 */
  .survey-prize-product {
    top: 28%;
    width: calc(140 * var(--u));
    height: calc(140 * var(--u));
    max-height: none;
    aspect-ratio: 1;
    margin-top: 0;
    object-position: center;
    transform: translateX(-50%);
    animation-name: survey-float-c-m;
  }

  .survey-prize--1 .survey-prize-product {
    top: 28%;
    width: calc(140 * var(--u));
    height: calc(140 * var(--u));
    max-height: none;
  }

  .survey-prize--2 .survey-prize-product,
  .survey-prize--3 .survey-prize-product {
    top: 28%;
    width: calc(140 * var(--u));
    height: calc(140 * var(--u));
  }

  /* Figma：top 15.8 / 32 / lh 37.663 / tracking 2.56；略下移保安全距 */
  .survey-prize-rank {
    top: calc(18 * var(--u));
    font-size: calc(32 * var(--u));
    line-height: calc(37.663 * var(--u));
    letter-spacing: calc(2.56 * var(--u));
  }

  .survey-prize--2 .survey-prize-rank,
  .survey-prize--3 .survey-prize-rank {
    top: calc(18 * var(--u));
    font-size: calc(32 * var(--u));
    line-height: calc(37.663 * var(--u));
  }

  .survey-prize-copy {
    width: 100%;
    padding: calc(8 * var(--u));
  }

  .survey-prize-name {
    font-size: calc(20 * var(--u));
    line-height: calc(30 * var(--u));
  }

  .survey-prize-meta {
    font-size: calc(15 * var(--u));
    line-height: calc(20 * var(--u));
  }

  .survey-prize--2 .survey-prize-name,
  .survey-prize--3 .survey-prize-name {
    font-size: calc(20 * var(--u));
  }

  .survey-cta {
    width: 73.943662%; /* 420 / 568 */
    max-width: 100%;
    height: auto;
    min-height: calc(77 * var(--u));
    margin-top: calc(40 * var(--u));
    padding: calc(14 * var(--u)) 5%;
    letter-spacing: calc(7.2 * var(--u));
  }

  .survey-cta img {
    width: calc(50 * var(--u));
    height: calc(50 * var(--u));
  }

  @keyframes survey-float-c-m {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(calc(-8 * var(--u))); }
  }
}

/* ============================================================
   固定右上問卷按鈕（survey_button.png）
   以 viewport 浮層呈現，不可撐出頁面右側可捲動區塊
   ============================================================ */
.survey-float {
  position: fixed;
  top: 100px;
  right: 0;
  left: auto;
  z-index: 1200;
  display: block;
  width: min(176px, 28vw);
  max-width: 28vw;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-12px);
  transform-origin: top right;
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}

.survey-float img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: top;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35));
  transition: filter .25s ease;
}

.is-survey-float-visible .survey-float {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.is-survey-float-visible .survey-float:hover,
.is-survey-float-visible .survey-float:focus-visible {
  /* 以右上為原點放大，避免向右撐出視窗外造成橫向溢位 */
  transform: translateY(0) scale(1.06);
  transform-origin: top right;
}

.is-survey-float-visible .survey-float:hover img,
.is-survey-float-visible .survey-float:focus-visible img {
  filter: drop-shadow(0 8px 18px rgba(0, 180, 220, .45)) brightness(1.12);
}

.survey-float:focus-visible {
  outline: 2px solid #3afff5;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .survey-float,
  .survey-float img {
    transition: none;
  }
}

@media (max-width: 768px) {
  .survey-float {
    top: 72px;
    width: min(110px, 26vw);
    max-width: 26vw;
  }
}

@media (max-width: 480px) {
  .survey-float {
    top: 56px;
    width: min(88px, 24vw);
    max-width: 24vw;
  }
}