body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang TC","Microsoft JhengHei",sans-serif;background:#0f1830;color:#fff;overflow-x:hidden;}
a{text-decoration:none;color:inherit}

.container{max-width:1400px;margin:0 auto;padding:50px 50px}
.wrap{display:flex;align-items:center;gap:40px;max-width:1400px;margin:0 auto;padding:30px 20px}
.wrap img{max-width:100%;height:auto;display:block}
.text{flex:2;flex-basis:40%;}.image{flex:3; flex-basis:60%;}
.text h1{
  font-size: 35pt;
  line-height: 50px;
  padding: 0;
}
.text2{flex:2;flex-basis:33%;}
.image2{flex:4;flex-basis:67%;}

/* header */
.header{background:rgba(15,24,48,.9);position:sticky;top:0;z-index:50}
.header__inner{display:flex;justify-content:space-between;align-items:center;padding:12px 0}
.nav{display:flex;gap:24p;}
.support{margin:12px;}
.btn--cta{background:linear-gradient(90deg,rgba(234, 82, 73, 1) 0%, rgba(150, 14, 122, 1) 100%);padding:8px 16px;border-radius:999px}

/* hero */
.hero{background:linear-gradient(135deg,#11346b,#0f1830);color:#fff;padding:80px 0px;}
.btn{padding:12px 20px;border-radius:3px;display:inline-block;font-weight:600}
.btn--primary{background:linear-gradient(90deg,#5cc4ff,#2e7bff);color:#0f1830}
.btn--ghost{border:1px solid rgba(255,255,255,.3);color:#fff}

/* carousel */
.full-bleed{ width:100%;margin-left:50%;transform:translateX(-50%)}
.carousel{position:relative;overflow:hidden;background:linear-gradient(135deg,#1d3c6b,#07153a)}
.carousel__track{display:flex;transition:transform .5s ease;gap: 0;}
.slide{box-sizing: border-box;min-width:100vw;display:flex;min-height:100%;align-items:center;gap:50px;padding:0px 20px}
.tabs{display:flex;justify-content:center;gap:12px;}
.tabs button{background:rgba(255,255,255,.1);border:0;padding:20px 14px;color:#fff;cursor:pointer}
.img_NBA{
  width: 30px;
}
.text2 h2{
  font-size:50px;line-height:10px;
}
.slide .image2 img{
  width:100%;
  height:auto;
  max-height:none;
  display:block;
  margin:0 auto;
  object-fit:contain;
}

/* features 5 */
.features-5{background:#0f1830;}
.features-5 > .container{
  max-width: 1600px;                 /* ← 想多寬改這裡 */
  width: min(1600px, 100%);          /* 不超出螢幕 */
  margin-inline: auto;               /* 置中 */
  padding-inline: clamp(16px, 4vw, 50px);  /* 邊距隨螢幕調整 */
}
.features{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;                         /* 可依需要縮小 gap 讓視覺更寬 */
}
.features{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr)}
.cell{padding:20px;display:flex;
  flex-direction:column;  /* 上下排 */
  align-items:center;     /* 水平置中 */
  text-align:center;gap:20px;align-items:center;position:relative}
.cell:not(:first-child)::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:1px;background:rgba(255,255,255,.2)}
.logo{height:28px}
.desc{margin:0;font-size:14px;color:rgba(255,255,255,.85)}

/* devices */
.devices{background:#0f1830;padding: 20px;}
.devices .icons{display:flex;flex-wrap:wrap;gap:20px;margin-top:20px}
.devices .icons img{height:30px}

/* footer */
.footer{border-top:1px solid rgba(255,255,255,.2);padding:20px 0;text-align:center;font-size:14px;color:rgba(255,255,255,.7)}
.footer__links{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-bottom:8px}
.tabs{
  display:flex;
  justify-content:space-between; /* 平均分布 */
  gap:0;
}
.tab{
  flex:1;                        /* 平均分寬度 */
  display:flex;
  flex-direction:row;            /* 水平排列 */
  align-items:center;
  justify-content:center;
  gap:8px;                       /* 文字和logo間距 */
  background:rgba(255,255,255,.08);
  border:0;
  padding:12px 8px;
  color:#fff;
  font-size:14px;
  cursor:pointer;
  transition:background .2s;
}
.tab img{
  height:50px;
  width:auto;
}
.tab:hover{
  background:rgba(255,255,255,.2);
}
.tab.is-active{
  background:#1f9add;
  font-weight:600;
  border-top: 3px solid #fff;
  position:relative; /* 讓偽元素能定位 */
}
.tab.is-active::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;            /* 白線粗細 */
  background:#fff;       /* 白線顏色 */
  border-radius:2px;
}
.tabs .tab{
  position: relative;  /* 讓偽元素可以定位 */
}

.tabs .tab.is-active::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%; height:3px;
  background:#fff;     /* 白線顏色 */
  border-radius:2px;
}

/* 上方白線 */
.tabs .tab.is-active::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%; height:3px;
  background:#fff;
  border-radius:2px;
  /* 疊在最上層，避免被其他東西蓋掉 */
  z-index:1;
}
.text h2{
  font-size: 40px;
}
.apple_android{
  padding: 30px;
}
.apple_android img{
  display:inline-block;
  padding: 10px;
}


/* 手機版 RWD */
@media (max-width: 768px){

  /* 第一頁 hero 區 */
  .wrap{
    flex-direction: column;  /* 改成上下排 */
    text-align: center;
  }
  .text, .image{
    flex: none;
    flex-basis: auto;
    width: 100%;
  }
  .text h1{
    font-size: 24px;
    line-height: 1.3;
  }

  /* 輪播 slide */
  .slide{
    flex-direction: column;
    text-align: center;
    padding: 20px;
    max-width: 100%;   /* 拿掉 1200px 限制 */
  }
  .text2, .image2{
    flex: none;
    flex-basis: auto;
    width: 100%;
  }
  .text2 h2{
    font-size: 28px;
    line-height: 1.2;
  }

  /* 五格：改成 2 或 1 欄 */
  .features{
    grid-template-columns: repeat(2,1fr);
  }
  .cell{
    padding: 10px;
  }
  .logo{
    height: 22px;
  }

  /* 設備區：上下排 */
  .devices .wrap{
    flex-direction: column;
    text-align: center;
  }
  .devices .image, 
  .devices .text{
    flex: none;
    width: 100%;
  }
  .devices .image img{
    max-width: 100%;  /* 避免太大溢出 */
    margin: 0 auto;
  }
  .devices .icons{
    justify-content: center;
  }
  .apple_android img{
    max-width: 120px;
  }
}
/* Carousel 寬度對齊 */
.carousel__track{display:flex;transition:transform .5s ease}
.slide{flex:0 0 100%;}