:root {--red:#C7161E;--pink:#FFF0F0;--ink:#222; --menu-h:65px}
 *{box-sizing:border-box;margin:0;padding:0}
html {scroll-behavior:smooth;scroll-padding-top:var(--menu-h)}
body {font-family:'Montserrat',sans-serif;color:var(--ink);line-height:1.5;background:#fff}
img {/* max-width:100%; */ display:block}
a {color:inherit;text-decoration:none}
ul {list-style:none}
button {font:inherit; cursor:pointer; border:0; background:none}
.wrap {max-width:1200px; margin:0 auto; padding:0 20px;}
.section {padding:56px 0}
.title {font-size:30px; font-weight:700; border-left:4px solid var(--red); padding-left:10px; line-height:1.2; margin-bottom:12px}
.lead {font-size:18px; margin-bottom:24px}
.title.light,.lead.light{color:#fff}
.gta-outline {
  display: inline-block;
  font-weight: 800;
  line-height: 1;
  /* 白色外框：上下左右各疊一層白色陰影，粗細改 2px 這個數字 */
  filter:
    drop-shadow(1px 0 0 #fff)
    drop-shadow(-1px 0 0 #fff)
    drop-shadow(0 1px 0 #fff)
    drop-shadow(0 -1px 0 #fff);
}
.gta-gradient {
  display: inline-block;
  background: linear-gradient(160deg, #9c00ff 0%, #d900e8 35%, #ff009d 65%, #ffd800 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.btn {white-space:nowrap; display:inline-flex; align-items:center; gap:8px;background:var(--red); font-size:17px !important; color:#fff; font-weight:500; border-radius:999px; padding:10px 20px; transition:.2s}
.btn img {width:17px !important; height:17px !important;}
.btn:hover{filter:brightness(1.15); cursor: pointer;}
.btn-sm {padding:6px 16px;font-size:12px}.btn-xs{padding:5px 14px;font-size:11px}
.btn-wt {background:white; color:var(--red);}
.tag {display:inline-block; background:var(--pink); color:var(--red); font-size:14px; font-weight:700; border-radius:50px; padding:5px 10px}

/* menu */
.menu {position:fixed; top:0; left:0; right:0; height:var(--menu-h);z-index:100; background:rgba(0,0,0,.6); backdrop-filter:blur(4px);display:flex; align-items:center; justify-content:space-between;padding-left:20px}
.menu-logo img {height:35px}
.menu-nav {display:flex; align-items:center; height:100%; color:#fff; font-size:16px; font-weight:500}
.menu-nav .menu-shop {background:var(--red); height:100%; display:flex; align-items:center; padding:0 28px; font-weight:700}
/* menu link states: hover = white text + thin white underline / current section = red underline + soft red glow */
.menu-nav a {padding:0px 15px; transition:color .2s,background-color .2s,border-color .2s}
.menu-nav .menu-shop:hover{background:#E11D25}
@media(min-width:769px){
  .menu-nav a:not(.menu-shop) {position:relative; display:flex; align-items:center; height:100%; color:rgba(255,255,255,.75)}
  .menu-nav a:not(.menu-shop)::after {content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--red); transform:scaleX(0);transform-origin:center;transition:transform .25s ease,background-color .2s}
  .menu-nav a:not(.menu-shop):hover,.menu-nav a:not(.menu-shop):focus-visible {color:#fff}
  .menu-nav a:not(.menu-shop):hover::after,.menu-nav a:not(.menu-shop):focus-visible::after {transform:scaleX(1)}
  .menu-nav a.is-active {color:#fff;}
  .menu-nav a.is-active::after,.menu-nav a.is-active:hover::after {transform:scaleX(1); background:rgba(255,255,255,.9)}
}
.menu-toggle {display:none;width:var(--menu-h);height:var(--menu-h);flex-direction:column;justify-content:center;align-items:center;gap:5px}
.menu-toggle span {width:22px;height:2px;background:#fff;transition:transform .25s,opacity .2s}
/* menu open: hamburger -> X (5px gap + 2px bar = 7px between bar centers) */
body.menu-open .menu-toggle span:nth-child(1) {transform:translateY(7px) rotate(45deg)}
body.menu-open .menu-toggle span:nth-child(2) {opacity:0}
body.menu-open .menu-toggle span:nth-child(3) {transform:translateY(-7px) rotate(-45deg)}
/* full-page dark overlay while the mobile menu is open (sits under the menu, z-index 100) */
.menu-overlay {position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
body.menu-open .menu-overlay {opacity:1;visibility:visible}
body.menu-open {overflow:hidden}   /* lock page scroll behind the menu */

/* fade carousel (shared) */
.fade-carousel {position:relative}
.fc-slide {position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s,visibility .8s}
.fc-slide.is-active {position:relative;opacity:1;visibility:visible}
.fc-dots {display:flex; justify-content:center; gap:12px; position:absolute; left:0; right:0; bottom:14px; z-index:3}
.fc-dots button {width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.55)}
.fc-dots button.is-active {background:var(--red)}

/* slider */
#slider {background:#4a2a6a}
#slider {height:max(600px,41.67vw); overflow:hidden}
#slider .fc-slide,#slider .fc-slide.is-active {position:absolute;inset:0;background-size:cover;background-position:center;color:#fff;padding-top:var(--menu-h)}
#slider .fc-slide:not(.is-active) {pointer-events:none}
#slider .fc-dots {bottom:22px}
.slide-inner {max-width:1200px; margin:0 auto;padding:60px 20px 0}
#slider h1 {font-size:36px; font-weight:800; line-height:1.1; max-width:600px; margin-bottom:20px}
#slider h1 .gta {display:block}
#slider h1.big {font-size:clamp(35px,10vw,55px);}

.slide-promo .slide-inner {padding-top:56px}
.slide-promo h2 {font-size:clamp(30px,6vw,40px); font-weight:700;line-height:1.2; margin-bottom:15px}
.promo-products {display:flex;gap:clamp(24px,4vw,64px);margin-bottom:30px}
.promo-products figure {width:clamp(150px,18vw,260px);text-align:center}
.promo-products img {width:100%;margin-bottom:8px}
.promo-products figcaption {display:inline-block;background:#fff;color:#111;border:1px solid var(--red);border-radius:999px;padding:2px 14px;font-size:clamp(10px,1vw,13px);font-weight:500;white-space:nowrap}

#slider .slide-promo.is-dark-text{color:#111}

.countdown {
  display: flex;
  width: fit-content;          /* 框只包住內容，不會撐滿整行 */
  gap: 24px;
  margin-bottom: 40px;
  padding: 10px 22px;
  background: rgba(255,255,255,.3);   /* 整塊白色半透明底 */
  border: 1px solid #fff;           /* 白色外框 */
  border-radius: 16px;
}
.countdown div {
  background: none;
  padding: 0;
  min-width: 56px;
  text-align: center;
}
.countdown b {
  display: block;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
}
.countdown small {
  display: block;
  font-size: 12px;
  font-weight: 500;
}

/* banner */
.banner {
  background-size: cover;
  background-position: center;
  height: max(300px, 31.25vw);   /* 600/1920 = 31.25vw，寬螢幕維持原比例，窄螢幕最少 300px */
  color: #fff;
  display: flex;
  align-items: center;
}
.banner .wrap {width:100%;padding-top:2%}
.banner h2 {font-size:clamp(20px,2.9vw,40px);font-weight:700;line-height:1.2;margin-bottom:.5em}
.banner p {font-size:clamp(14px,1.7vw,24px)}

/* section 2 */
.section2 {padding-bottom:56px;
  background: #EBE0F3;
  background: -webkit-linear-gradient(0deg, rgba(235, 224, 243, 1) 50%, rgba(255, 255, 255, 1) 100%);
  background: -moz-linear-gradient(0deg, rgba(235, 224, 243, 1) 50%, rgba(255, 255, 255, 1) 100%);
  background: linear-gradient(0deg, rgba(235, 224, 243, 1) 50%, rgba(255, 255, 255, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#EBE0F3", endColorstr="#FFFFFF", GradientType=0);
}
.cards2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:56px }
.card2 { display:flex; flex-direction:column; background:white; border-radius:20px; padding:24px }
.card2-top { display:flex; align-items:center; justify-content:space-between; gap:10px }
.card2-txt { flex:1; min-width:0 }
.card2 h3 { font-size:24px; line-height:28px; margin:12px 0 8px }
.card2 h3 small { font-weight:500; font-size:20px }
.card2 p { font-size:17px; line-height:22px }
.card2-img { width:50%; flex-shrink:0 }
.card2 .btn {font-size:17px; align-self:flex-start }
/* 電腦版：兩張卡片用 subgrid 共用列高 → 標籤/標題、特點 icon、按鈕在兩張卡片間對齊 */
@media(min-width:769px){
  .cards2 { grid-template-rows:auto auto auto; row-gap:0 }
  .card2 { display:grid; grid-template-rows:subgrid; grid-row:span 3; align-content:start }
  .card2-top { align-items:center }
  .card2-txt { align-self:flex-start }          /* 文字貼上緣，標籤與標題對齊 */
  .card2 .btn { justify-self:start; align-self:start }
  .feat { grid-auto-rows:minmax(52px,auto); align-content:start; row-gap:10px }  /* 每排特點固定高度，兩張卡片的 icon 同一高度 */
}

.feat { display:grid; gap:14px 22px; margin:16px 0 }
.feat-2 { grid-template-columns:repeat(2,minmax(0,1fr)) }            /* GC553Pro：兩個一排 */
.feat-3 { grid-template-columns:repeat(3,auto); justify-content:start } /* GC553G2：第一排三個、第二排兩個 */
.feat-23 li:nth-child(3) { grid-column-start:1 }   /* 第 3 個強制換到下一排的第一格 */
.feat li { font-size:14px; display:flex; align-items:center; gap:6px; line-height:1.2; min-width:0 }
.feat img { width:36px; flex-shrink:0 }
.feat li.nowrap { white-space: nowrap; }
/* 寬螢幕：HDR/VRR Pass-Through 不斷行，第三欄吃剩下空間 */
@media(min-width:1200px){ .feat-3 { grid-template-columns:max-content max-content minmax(0,1fr) } .feat-3 li.nowrap-lg { white-space:nowrap } }

.diff {background:#fff; border-radius:20px; box-shadow:0 2px 14px rgba(0,0,0,.12); overflow:hidden}
.diff-tabs {display:grid; grid-template-columns:repeat(4,1fr); background:#f4f4f4}
.diff-tabs button {padding:20px 12px; font-size:16px; font-weight:600; color:#222; line-height:1.25; transition:background-color .2s,color .2s}
.diff-tabs button:hover {background:#eaeaea}
.diff-tabs button.is-active {background:var(--red); color:#fff}
.diff-panel {display:none; position:relative}
.diff-panel.is-active {display:block; animation:diffFade .4s ease}
.diff-panel > img {width:100%; height:auto; aspect-ratio:1116/480; object-fit:cover}
@keyframes diffFade {from{opacity:0} to{opacity:1}}
/* 第四張圖上的文字塊 */
.diff-cap {position:absolute; left:0; top:30%; width:46%; padding:24px 28px; background:rgba(30,30,40,.72); color:#fff}
.diff-cap h3 {font-size:clamp(20px,2.4vw,30px); font-weight:700; line-height:1.2; margin-bottom:12px}
.diff-cap p {font-size:clamp(14px,1.4vw,18px); line-height:1.45}

/* guide */
.guide {background-size:cover; background-position:center; padding:56px 0; color:#fff}
.sub {display:flex; align-items:center; gap:10px; font-size:17px; font-weight:500; margin-bottom:12px}
.sub::before {content:""; width:10px; height:10px; border-radius:50%; background:#ff2f6f; flex:none}
.panel {background:rgba(70,20,100,.55); border:1px solid rgba(255,255,255,.35); border-radius:20px; padding:22px 26px; margin-bottom:16px}

/* What You Need + Check Your Connections：電腦版並排，平板以下各自一排 */
.setup {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.75fr); gap:20px; margin-bottom:36px}
.setup-col {display:flex; flex-direction:column; min-width:0}
.need {flex:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:space-around; gap:28px 20px;
  background:rgba(70,20,100,.6); border:2px solid #e8317a; border-radius:20px; padding:28px 24px; font-size:15px; line-height:1.3}
.need img {height:42px; width:auto; margin-bottom:10px}
.need img.need-cc {height:38px}

.conn {flex:1; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(180deg,#fff 0%,#ececec 100%);
  color:#333; border-radius:20px; padding:24px; overflow:hidden}
/* 連接示意圖：--bw = 盒子圖寬度(%)、--cw = 線材圖寬度(%)，接頭位置依圖檔透明邊界自動對齊 */
.conn-diagram {--bw:52; --cw:64; --gap:1.6; position:relative; aspect-ratio:100/28; margin:0 -24px 8px; overflow:hidden}
.conn-diagram img {position:absolute; top:50%; transform:translateY(-50%); height:auto}
.cd-box {width:calc(var(--bw) * 1%); left:calc((100 - var(--bw)) / 2 * 1%)}
.cd-hdmi {width:calc(var(--cw) * 1%); left:calc(((100 - var(--bw)) / 2 + var(--bw) * .1308 - var(--cw) * .971 - var(--gap)) * 1%); z-index:2}
.cd-usb {width:calc(var(--cw) * 1%); left:calc(((100 - var(--bw)) / 2 + var(--bw) * .8683 - var(--cw) * .0237 + var(--gap)) * 1%); z-index:2}
.conn-list {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; text-align:center; font-size:14px; line-height:1.35}
.conn-list img {width:72%; max-width:150px; aspect-ratio:1200/680; object-fit:cover; margin:0 auto 6px}
.conn-list b {display:block; font-size:15px; margin-bottom:4px}
.conn-list span {display:block}
.conn-list small {display:block; font-size:11px; color:#666; margin-top:4px}

.steps {display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px}
.step {display:flex; flex-direction:column; background:#fff; color:var(--ink); border-radius:20px; padding:20px; font-size:16px}
.step h4 {display:flex; align-items:flex-start; gap:10px; margin-bottom:6px; font-size:17px; line-height:1.3}
.step h4 b {flex:none; background:#e8317a; color:#fff; border-radius:50%; width:26px; height:26px; display:grid; place-items:center; font-size:15px}
.step p {flex:1; margin:0 0 14px 36px; line-height:1.4}
.step img {border-radius:15px; max-width:100%; margin-top:auto}

/* Streaming Center */
.sc-title {margin-top:48px}
.sc {display:flex; align-items:center; gap:40px; padding:32px 48px; margin-bottom:28px}
.sc-logo {width:150px; height:150px; flex:none; border-radius:50%}
.sc-feat {flex:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.sc-feat li {font-size:15px; line-height:1.4}
.sc-feat img {height:46px; width:auto; margin-bottom:12px}
.sc-feat b {display:block; font-size:17px; margin-bottom:4px}
.sc { flex-wrap:wrap; row-gap:20px }
.sc_copy { flex-basis:100%; font-size:12px; opacity:.85; text-align:center }
.guide-btns {display:flex; justify-content:center; flex-wrap:wrap; gap:16px}

/* section 3 */
.find {background-size:cover;background-position:center;position:relative;overflow:hidden;padding-bottom:110px}
.find .wrap {position:relative;z-index:2}
.find-box {width:66%;margin-left:auto;margin-top:30px}
.elena {
  position: absolute;
  z-index: 1;
  top: 175px;             /* 改成從上方定位，數值是照你目前 4K Gaming 頁籤的畫面算出來的 */
  height: 830px;          /* 固定高度，不再用 104% */
  right: calc(50% + 30px);
  width: auto;
  max-width: none;
  pointer-events: none;
}
/* ===== 右邊頁籤卡片（三個頁籤高度一致）===== */
.find-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: #fff;
  box-shadow: 0 2px 14px rgba(0,0,0,.15);
  border-radius: 20px;
  overflow: hidden;
  min-width: 0;
}

.find-head {
  grid-column: 1;          /* 一定要指定欄，不然會被丟到新的欄裡 */
  grid-row: 1;
  background: #000;
  color: #fff;
  text-align: center;
  font-size: 20px;
  padding: 14px;
}

.find-tabs {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
}
.find-tabs button {
  font-size: 18px;
  padding: 14px;
  font-weight: 600;
  color:black;
  background: #f2f2f2;
}
.find-tabs button.is-active {
  background: var(--red);
  color: #fff;
  font-weight: 700;
}

/* 三個面板疊在同一格，卡片高度取最高的那個 */
.find-panel {
  grid-column: 1;
  grid-row: 3;
  display: block;
  visibility: hidden;
}
.find-panel.is-active {
  visibility: visible;
}
/* 輪播的子元素自己有 visibility:visible，要強制蓋掉，隱藏的面板才不會透出來 */
.find-panel:not(.is-active) * {
  visibility: hidden !important;
}
.pd-car {padding:30px 30px 80px 30px;}
.pd-car .fc-slide {inset:30px 30px 80px 30px;}
.pd-car .fc-slide.is-active {inset:auto}
.pd-car .fc-dots {bottom:20px;}
.pd-car .fc-dots button {background:#ccc}
.pd-car .fc-dots button.is-active{background:var(--red)}
.pd {display:flex; align-items:center; gap:24px}
.pd img {width:42%}
.pd h4 {font-size:20px}
.pd h4 small {display:block; font-weight:500; font-size:17px; margin-bottom:10px}
.pd p {font-size:17px; margin-bottom:10px}
.lbl {display:inline-block; border:1px solid var(--red); border-radius:20px;font-size:13px; padding:0 8px; margin-bottom:4px}

/* section 5 */
.month-tabs {display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap}
.month-tabs button {background:var(--pink); color:var(--red); border-radius:999px; padding:6px 22px; font-weight:600; font-size:17px}
.month-tabs button.is-active {background:var(--red); color:#fff}
.tbl-wrap {display:none; overflow-x:auto; border:1px solid #ddd; border-radius:20px}
.tbl-wrap.is-active {display:block}
table {width:100%; border-collapse:collapse; font-size:15px; min-width:640px; text-align:left;}
th {background:#f4f4f4; padding:12px; font-weight:600;}
td {padding:14px 10px; border-top:1px solid #ddd}

/* section 6 */
.section6 {background:#f4f4f4}
.vid-car {position:relative;padding:0 36px}
.vc-track {display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.vc-track::-webkit-scrollbar {display:none}
.vid {display:flex;flex-direction:column;align-items:flex-start;flex:0 0 calc((100% - 40px)/3);scroll-snap-align:start;font-size:12px}
.vid .tag {border:1px solid var(--red);background:#fff;color:var(--ink);border-radius:999px;font-size:15px;font-weight:600;padding:6px 14px;margin-bottom:12px}
.vid-thumb {position:relative;display:block;width:100%;margin-bottom:8px}
.vid-thumb>img:first-child {width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px}
.vid-thumb::after {content:"";position:absolute;inset:0;border-radius:6px;background:rgba(0,0,0,.4);pointer-events:none}
.vid-thumb .play {z-index:1;position:absolute;left:50%;top:50%;width:44px;transform:translate(-50%,-50%);transition:.2s}
.vid-thumb:hover .play {transform:translate(-50%,-50%) scale(1.15)}
.vid-title {display:block; margin-bottom:12px; flex:1; font-size:15px;}
.vid-title:hover {color:var(--red)}
.vid-by {display:flex;align-items:center;gap:8px;font-weight:600}
.vid-by img {width:30px;height:30px;border-radius:50%}
.vc-prev,.vc-next {position:absolute;top:35%;font-size:44px;color:var(--red);line-height:1}
.vc-prev {left:0}
.vc-next {right:0}

/* footer */
.footer {background:#000; color:#fff; text-align:center; padding:40px 20px}
.foot-cols {display:grid; grid-template-columns:1fr 1px 1fr; max-width:760px; margin:24px auto}
.foot-cols::before {content:"";grid-column:2;grid-row:1;background:#fff}
.foot-col {grid-row:1;text-align:center;padding:0 20px 8px}
.foot-col:nth-child(1){grid-column:1}
.foot-col:nth-child(2){grid-column:3}
.foot-col b {font-weight:500;font-size:18px}
.soc {display:grid; grid-template-columns:repeat(3,56px); justify-content:center; justify-items:center; align-items:center; gap:26px 40px; margin-top:20px}
.soc a {width:30px; height:30px; display:flex; align-items:center; justify-content:center}
.soc img {max-width:100%;max-height:100%;object-fit:contain;transition:.2s}.soc a:hover img{opacity:.7}
.footer small {font-size:11px;opacity:.7}

/* RWD */

@media(min-width:2500px){
  #slider {height:max(600px, 30vw);}
}

@media(max-width:1024px){
  .elena{right:calc(50% + 40px);height:720px}.find-box{width:70%}
  .menu-nav{gap:14px;font-size:11px}
  .path{grid-template-columns:1fr}.vid{flex-basis:calc((100% - 20px)/2)}
  /* section 3：What You Need / Check Your Connections 改成各自一排 */
  .setup{grid-template-columns:1fr}
  .need{grid-template-columns:repeat(5,minmax(0,1fr))}
  .sc{gap:28px; padding:28px}
}
@media(max-width:768px){
  .menu-toggle{display:flex}
  .menu-nav{position:absolute;top:var(--menu-h);left:0;right:0;flex-direction:column;align-items:stretch;height:auto;gap:0;background:rgba(0,0,0,.85);display:none;font-size:14px}
  .menu-nav.is-open{display:flex}
  .menu-nav a{padding:14px 20px}
  .menu-nav a:not(.menu-shop){border-left:4px solid transparent;color:rgba(255,255,255,.8)}
  .menu-nav a:not(.menu-shop):hover,.menu-nav a:not(.menu-shop):focus-visible{background:rgba(255,255,255,.1);color:#fff}
  .menu-nav a.is-active{border-left-color:var(--red);background:rgba(199,22,30,.3);color:#fff}
  .menu-nav .menu-shop{height:auto;justify-content:center; padding:12px 0px;}
  .section{padding:40px 0}

  #slider{height:500px}
  #slider .fc-slide,#slider .fc-slide.is-active{background-position:70% center}
  #slider h1{font-size:36px}
  #slider h1.big {font-size:40px;}
  .slide-promo .slide-inner{padding-top:36px}

  .countdown { gap: 14px; padding: 10px 16px; border-radius: 12px; }
  .countdown div { min-width: 44px; }
  .countdown b { font-size: 26px; }
  .countdown small { font-size: 11px; }

  .promo-products{gap:14px}
  .promo-products figure{width:calc(50% - 7px)}
  .promo-products figcaption{white-space:normal;font-size:10px;padding:2px 8px}
  .slide-promo h2{font-size:24px}
  .banner{background-position:68% center}
  .cards2{grid-template-columns:1fr}
  .diff-tabs button{font-size:13px;padding:14px 8px}
  .need{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps{grid-template-columns:1fr}
  .sc{flex-direction:column}
  .sc-logo{width:120px;height:120px}
  .find-box{width:100%}.elena{display:none}
  .pd{flex-direction:column;text-align:center}
  .pd img{width:70%}
  .vid{flex-basis:100%}
  .vid .tag{border-radius:18px}
  .month-tabs{gap:8px}.month-tabs button{padding:6px 12px; font-size:14px}
  .foot-cols{grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr)}
  .foot-col{padding:0 6px 8px}
  .soc{grid-template-columns:repeat(3,28px); gap:18px 14px}
  .soc a{width:28px; height:28px}
}

@media(max-width:600px){
  /* 頁籤 2x2 */
  .diff-tabs{grid-template-columns:1fr 1fr}
  .diff-tabs button{font-size:13px;padding:12px 6px}
  /* 第四張：文字塊移到圖片下方 */
  .diff-cap{position:static;width:auto;background:#1e1e28;padding:18px 20px}
  /* 連接說明：圖左字右（參考第三張附圖） */
  .conn{padding:20px}
  .conn-diagram{--bw:62; --cw:74; --gap:2; aspect-ratio:100/33; margin:0 -20px 16px}
  .conn-list{grid-template-columns:1fr; gap:20px; text-align:left; font-size:15px}
  .conn-list li{display:grid; grid-template-columns:34% 1fr; gap:16px; align-items:center}
  .conn-list img{width:100%; margin:0}
  .conn-list b{font-size:18px}
  /* Streaming Center 特色：icon 左、文字右 */
  .sc{padding:24px 20px}
  .sc-feat{grid-template-columns:1fr; gap:18px}
  .sc-feat li{display:flex; align-items:center; gap:16px}
  .sc-feat img{height:40px; margin:0; flex:none}
}

@media(max-width:480px){
  .need{grid-template-columns:repeat(2,minmax(0,1fr)); padding:24px 20px}
  .feat-2,.feat-3{grid-template-columns:repeat(1,minmax(0,1fr))}
  .feat.feat-23 { grid-template-columns:repeat(1,minmax(0,1fr)); gap:14px 10px }
  .feat li br {display:none;}
  .flow{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr)}
  .flow .ico{height:40px}
  .flow .arr{font-size:18px;line-height:40px}
  .card2-top{flex-direction:column-reverse; align-items:stretch}
  .card2-img{width:60%; align-self:center}
  .flow small{font-size:12px}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}