/* 愛享購 iShopGo — 桌面版樣式（設計稿寬度 1920px，內容區 1200px） */
:root {
  --primary: #00aacc;
  --primary-dark: #007497;
  --text: #2a2a2a;
  --text-strong: #1f1f1f;
  --muted: #748992;
  --tag-bg: #eff4f8;
  --font: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
  --font-num: "SF Pro Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: #fff;
  overflow-x: hidden;
}
img { display: block; max-width: none; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }

/* ---------- 通用：1920 舞台 ---------- */
.section { position: relative; overflow: hidden; width: 100%; }
.stage {
  position: absolute; top: 0; left: 50%;
  width: 1920px; height: 100%; margin-left: -960px;
}
.abs { position: absolute; }
.fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover { object-fit: cover; }

/* ---------- 按鈕 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 32px; border-radius: 12px; white-space: nowrap;
  font: 500 16px/normal var(--font); letter-spacing: .48px;
  background: var(--primary); color: #fff; border: 1.5px solid var(--primary);
  cursor: pointer; transition: filter .2s, transform .2s;
}
.btn:hover { filter: brightness(.95); transform: translateY(-1px); }
.btn--outline { background: #fff; color: var(--primary); }
.btn--dark { background: var(--primary-dark); border-color: var(--primary-dark); }

/* ---------- 標籤 ---------- */
.tag {
  display: inline-flex; padding: 8px 12px; border-radius: 20px;
  background: var(--tag-bg); color: var(--primary-dark);
  font: 500 14px/normal var(--font); letter-spacing: .21px;
}
.tag--light { background: #a7e0ef; }

/* ---------- 球形圖示 (cube) ---------- */
.cube { --s: 1; position: absolute; width: calc(var(--s) * 155px); height: calc(var(--s) * 155px); }
.cube__bg { position: absolute; inset: 0; border-radius: calc(var(--s) * 143.375px); }
.cube__line {
  position: absolute; inset: 0; border: calc(var(--s) * 2px) solid #fff; border-radius: calc(var(--s) * 143.375px); overflow: hidden;
  background-image: linear-gradient(227.17deg, rgba(255,255,255,.2) 14.345%, rgba(255,255,255,.5) 86.868%);
}
.cube__light { position: absolute; left: calc(var(--s) * -3px); top: calc(var(--s) * -5px); width: calc(var(--s) * 90px); height: calc(var(--s) * 90px); }
.cube__light img { position: absolute; inset: -7.22%; width: 114.44%; height: 114.44%; }
.cube__txt {
  position: absolute; left: calc(50% + .5px); transform: translateX(-50%);
  text-align: center; white-space: nowrap; font-weight: 500;
}
.cube__txt b { display: block; font-weight: 500; font-size: 20px; }
.cube__txt span { display: block; font-size: 14px; }

/* hero 版文字 / 圖示位置 */
.cube--hero .cube__txt { top: calc(var(--s) * 82px); }
.cube--hero .cube__ico { position: absolute; left: calc(var(--s) * 54px); top: calc(var(--s) * 32px); width: calc(var(--s) * 44px); height: calc(var(--s) * 44px); }
.cube--hero .cube__ico img { position: absolute; }

/* about 版文字（寬 108） */
.cube--about .cube__txt { top: calc(var(--s) * 64px); width: calc(var(--s) * 108px); white-space: normal; }
.cube--about .cube__txt b { margin-bottom: calc(var(--s) * 4px); font-size: calc(var(--s) * 20px); }
.cube--about .cube__txt span { font-size: calc(var(--s) * 12px); }
.cube--about .cube__ico { position: absolute; width: calc(var(--s) * 40px); height: calc(var(--s) * 40px); left: calc(50% - var(--s) * 20px + .5px); top: calc(var(--s) * 20px); }
.cube--about .cube__ico img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cube--about .cube__ico--friend { left: calc(var(--s) * 56.5px); top: calc(var(--s) * 20.6px); width: calc(var(--s) * 42px); height: calc(var(--s) * 42px); overflow: hidden; }
.cube--about .cube__ico--friend img { inset: auto; left: 10.84%; top: 7.81%; width: 78.32%; height: 81.25%; }
.cube--about .cube__ico--kol { left: calc(var(--s) * 56.5px); top: calc(var(--s) * 20px); }
.cube--about .cube__ico--kol img { inset: 8.33%; width: 83.34%; height: 83.34%; }

.g-blue   { background-image: linear-gradient(209.03deg, rgba(199,243,255,.8) 23.295%, rgba(0,216,255,.8) 87.334%); }
.g-pink   { background-image: linear-gradient(211.96deg, rgba(255,217,233,.6) 20.82%, rgba(255,63,121,.6) 87.606%); }
.g-yellow { background-image: linear-gradient(214.6deg, rgba(255,246,212,.8) 19.71%, rgba(255,183,64,.8) 83.72%); }
.g-royal  { background-image: linear-gradient(209.03deg, rgba(203,226,255,.5) 23.295%, rgba(11,104,222,.5) 87.334%); }
.g-mint   { background-image: linear-gradient(209.03deg, rgba(196,255,250,.5) 23.295%, rgba(0,212,193,.5) 87.334%); }

/* ============ Hero ============ */
.hero { height: 1080px; background: #fff; }
.hero__title {
  position: absolute; left: 50%; top: 214px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  font-weight: 600; font-size: 60px; line-height: 84px; white-space: nowrap; color: var(--text);
}
.hero__title em { font-style: normal; color: var(--primary-dark); }
.hero__desc {
  position: absolute; left: 50%; top: 398px; transform: translateX(-50%);
  font-size: 18px; white-space: nowrap; text-align: center;
}
.hero__cta { position: absolute; left: 50%; top: 455px; transform: translateX(-50%); display: flex; gap: 20px; }

/* ============ 數據條 ============ */
.stats {
  display: flex; gap: 60px; align-items: center; justify-content: center;
  padding: 60px 0; background: #eff4f8;
}
.stat { width: 280px; text-align: center; display: flex; flex-direction: column; gap: 16px; }
.stat b { font: 700 48px/58px var(--font-num); letter-spacing: -1.8px; color: var(--text-strong); }
.stat span { font-size: 20px; color: #45535d; opacity: .7; }
.stats__div { width: 1px; height: 28px; background: #d7dfe5; }

/* ============ Section 2 關於我們 ============ */
.about { height: 897px; background: #fff; }
.h2 { font-weight: 600; font-size: 40px; line-height: normal; white-space: nowrap; }
.h2 .hl { color: var(--primary-dark); }
.about__text { position: absolute; left: 360px; width: 486px; padding: 0 4px; color: var(--text-strong); font-size: 18px; }
.about__text h3 { font-weight: 500; font-size: 24px; margin-bottom: 16px; }
.about__text p + p { margin-top: 1.5em; }
.about__text .hl { color: var(--primary-dark); }
.about__card {
  position: absolute; display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center;
  padding: 16px 20px; border-radius: 24px; color: var(--primary-dark);
  background: rgba(255,255,255,.8); backdrop-filter: blur(20px);
  box-shadow: inset 4px 4px 4px rgba(255,255,255,.25);
}
.about__card b { font-weight: 500; font-size: 18px; }
.about__card span { font-size: 14px; }

/* ============ Section 3 平台服務 ============ */
.platform {
  height: 806px;
  background-image: linear-gradient(242.5deg, #007497 3.2526%, #1bb5d5 41.997%);
}
.platform__img { position: absolute; left: 135px; top: 386px; width: 920px; height: 420px; background: #1bb5d5; overflow: hidden; }
.platform__photo { position: absolute; left: 451.1px; bottom: -176.15px; width: 761.115px; height: 558.151px; transform: translateX(-50%); }
.platform__photo::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(-1.54deg, rgba(27,181,213,0) 11.319%, #1bb5d5 99.706%);
}
.platform__rect { position: absolute; width: 970.208px; height: 786.088px; transform: translateX(-50%); }
.platform__rect i {
  position: absolute; left: 50%; top: 50%; width: 859.787px; height: 620.586px;
  background-image: linear-gradient(-86.66deg, #1bb5d5 14.183%, rgba(27,181,213,0) 35.945%);
}
.platform__lead { position: absolute; left: 360px; top: 120px; width: 480px; display: flex; flex-direction: column; gap: 24px; color: #fff; }
.platform__lead h2 { color: #f1f3f9; font-weight: 600; font-size: 40px; margin-top: 12px; white-space: pre-wrap; }
.platform__lead h2 em { font-style: normal; color: #3aefff; }
.platform__lead p { font-size: 18px; }
.platform__lead .btn { align-self: flex-start; }
.feat { position: absolute; display: flex; gap: 24px; align-items: center; color: #fff; }
.feat__cube { position: relative; width: 72px; height: 72px; flex: none; }
.feat__cube > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.feat__cube .shop { position: absolute; inset: 28.33%; width: 43.34%; height: 43.34%; }
.feat__body { width: 400px; display: flex; flex-direction: column; gap: 4px; }
.feat__body h3 { font-weight: 500; font-size: 24px; }
.feat__body .sub { font-weight: 500; font-size: 16px; letter-spacing: .48px; }
.feat__body p:last-child { font-size: 16px; letter-spacing: .48px; }

/* ============ Section 4 廠商合作 ============ */
.partner {
  height: 1140px;
  background-image:
    linear-gradient(150.9deg, rgba(102,102,102,0) 24.193%, rgba(180,180,180,.1) 108.63%),
    linear-gradient(90deg, #fff, #fff);
}
.partner__cards { position: absolute; left: 360px; top: 459px; width: 1200px; display: flex; gap: 16px; }
.pcard {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; padding: 24px;
  background: #dcfaff; border: 1px solid rgba(35,179,208,.2); border-radius: 24px; overflow: hidden;
}
.pcard__head { display: flex; gap: 16px; align-items: center; }
.pcube { position: relative; width: 64px; height: 64px; flex: none; }
.pcube__bg { position: absolute; inset: 0; border-radius: 59.2px; overflow: hidden;
  background-image: linear-gradient(209.03deg, rgba(199,243,255,.8) 23.295%, rgba(0,216,255,.8) 87.334%); }
.pcube__bg img { position: absolute; left: -.41px; top: -.41px; width: 37.161px; height: 37.161px; transform: scale(1.2112); }
.pcube__ring { position: absolute; inset: 0; border: .826px solid #fff; border-radius: 59.2px;
  background-image: linear-gradient(227.17deg, rgba(255,255,255,.2) 14.345%, rgba(255,255,255,.5) 86.868%); }
.pcube__g { position: absolute; }
.pcube__g img { position: absolute; width: 100%; height: 100%; }
.pcard__head h3 { font-weight: 500; font-size: 24px; color: var(--primary-dark); }
.pcard__head p { font-weight: 500; font-size: 14px; color: var(--text-strong); margin-top: 4px; }
.pcard ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pcard li { display: flex; gap: 4px; align-items: center; height: 24px; font-size: 14px; color: var(--text); }
.pcard li .ck { position: relative; width: 24px; height: 24px; flex: none; }
.pcard li .ck img { position: absolute; inset: 16.67%; width: 66.66%; height: 66.66%; }
.pcard__more { display: flex; align-items: center; font-weight: 500; font-size: 14px; color: var(--primary-dark); }
.pcard__more img { width: 24px; height: 24px; }
.partner__head { position: absolute; left: 360px; top: 120px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.partner__h2 { display: flex; flex-direction: column; font-weight: 600; font-size: 40px; white-space: nowrap; }
.partner__h2 .row { display: flex; gap: 10px; align-items: center; }
.partner__logo { display: flex; gap: 15px; align-items: center; padding-bottom: 2px; }
.partner__logo img:first-child { width: 128.606px; height: 36px; }
.partner__logo img:last-child { width: 176.848px; height: 26px; }
.partner__desc { position: absolute; left: 360px; top: 304px; padding: 0 4px; font-size: 18px; white-space: nowrap; }
.partner__btns { position: absolute; left: 360px; top: 353px; display: flex; gap: 20px; }
.trust {
  position: absolute; left: 50%; top: 879px; transform: translateX(-50%);
  display: flex; gap: 48px; align-items: center; justify-content: center;
  padding: 20px 64px; border: 1px solid #a7e0ef; border-radius: 24px;
}
.trust__item { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.trust__item img { width: 40px; height: 40px; }
.trust__item b { display: block; font-weight: 500; font-size: 18px; color: var(--text-strong); }
.trust__item span { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.trust__line { width: 1px; height: 64px; flex: none; }

/* ============ 桌面版補充（結構包裝 / 手機專用元素預設隱藏） ============ */
.about__head { position: absolute; left: 360px; top: 111px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.about__text--1 { top: 295px; }
.about__text--2 { top: 410px; }
.diagram { position: absolute; left: 847px; top: 1px; width: 897px; height: 897px; }
.feats, .hero__art, .hero__art-in { display: contents; }
.nav__toggle, .trust__mline, .moval, .mdots { display: none; }
.mp-dim { background: rgba(0,0,0,.3); }
.member__cta p > span { white-space: nowrap; }
.member__cta p .nw { display: inline-flex; align-items: center; gap: 4px; }