/* =============================================
   Hero 首屏輪播（index.css · 綠色主題 · 炫酷版）
   —— 主色 #32f08c · 服務器主題 · 動態光效
   ============================================= */

.heroCarousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

/* ===== 動態網格背景 + 掃描霓虹 ===== */
.heroBgFx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(50, 240, 140, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(50, 240, 140, .12) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 22px 22px;
  mask-image: radial-gradient(ellipse 100% 80% at 50% 40%, #000 20%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 40%, #000 20%, transparent 90%);
  animation: heroGridDrift 18s linear infinite;
}
@keyframes heroGridDrift {
  0%   { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 60px 60px, 60px 60px, 0 0; }
}

/* ===== 數據傳輸特效 —— 多條光點沿橫向軌道流動 ===== */
.heroCarousel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    /* 軌道 1：頂部細發光線 */
    linear-gradient(90deg, transparent 0%, rgba(50, 240, 140, .35) 10%, rgba(160, 253, 231, 1) 12%, rgba(50, 240, 140, .35) 14%, transparent 24%),
    /* 軌道 2：中上細發光線 */
    linear-gradient(90deg, transparent 0%, rgba(50, 240, 140, .3) 45%, rgba(160, 253, 231, .9) 48%, rgba(50, 240, 140, .3) 50%, transparent 62%),
    /* 軌道 3：中下細發光線 */
    linear-gradient(90deg, transparent 0%, rgba(50, 240, 140, .3) 65%, rgba(160, 253, 231, 1) 68%, rgba(50, 240, 140, .3) 70%, transparent 84%),
    /* 軌道 4：底部細發光線 */
    linear-gradient(90deg, transparent 0%, rgba(50, 240, 140, .35) 25%, rgba(160, 253, 231, .9) 28%, rgba(50, 240, 140, .35) 30%, transparent 44%);
  background-repeat: no-repeat;
  background-size: 240% 2px, 200% 2px, 220% 2px, 260% 2px;
  background-position:
    -240% 18%,
    -200% 42%,
    -220% 68%,
    -260% 88%;
  filter: drop-shadow(0 0 4px rgba(50, 240, 140, .6)) drop-shadow(0 0 8px rgba(50, 240, 140, .35));
  animation: heroDataStream 4.5s linear infinite;
}
@keyframes heroDataStream {
  0% {
    background-position:
      -240% 18%,
      -200% 42%,
      -220% 68%,
      -260% 88%;
  }
  100% {
    background-position:
      240% 18%,
      200% 42%,
      220% 68%,
      260% 88%;
  }
}

/* ===== 服務器主題元素 ===== */

.heroBgOrb {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* Orb 1：右側「服務器機架」 —— 大尺寸 · 強光暈 · 呼吸動效 */
.heroBgOrb.heroBgOrb1 {
  display: block;
  top: 2%;
  right: -2%;
  width: 520px;
  height: 700px;
  opacity: 1;
  filter: drop-shadow(0 0 30px rgba(50, 240, 140, .35)) drop-shadow(0 0 60px rgba(50, 240, 140, .18));
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='380' height='520' viewBox='0 0 380 520'>\
<defs>\
<linearGradient id='rack' x1='0' x2='0' y1='0' y2='1'>\
<stop offset='0' stop-color='%2332f08c' stop-opacity='.8'/>\
<stop offset='1' stop-color='%2332f08c' stop-opacity='.15'/>\
</linearGradient>\
</defs>\
<g fill='none' stroke='rgba(50,240,140,.7)' stroke-width='1.4'>\
<rect x='40' y='30' width='300' height='460' rx='6' stroke-width='1.8'/>\
</g>\
<g font-family='Arial, sans-serif' font-weight='800' fill='%2332f08c' text-anchor='middle'>\
<circle cx='190' cy='16' r='11' fill='none' stroke='%2332f08c' stroke-width='1.8'/>\
<text x='190' y='20.5' font-size='11' letter-spacing='0.5'>DELL</text>\
</g>\
<g fill='none' stroke='rgba(50,240,140,.7)' stroke-width='1.4'>\
<rect x='50' y='42' width='280' height='24' rx='2'/><circle cx='320' cy='54' r='3' fill='%2332f08c' stroke='none'/><circle cx='308' cy='54' r='3' fill='rgba(50,240,140,.5)' stroke='none'/>\
<text x='60' y='58' fill='%2332f08c' stroke='none' font-family='Arial, sans-serif' font-weight='700' font-size='10' letter-spacing='1'>DELL</text>\
<text x='90' y='58' fill='rgba(160,253,231,.9)' stroke='none' font-family='Arial, sans-serif' font-weight='600' font-size='9'>PowerEdge R760</text>\
<rect x='50' y='72' width='280' height='24' rx='2'/><circle cx='320' cy='84' r='3' fill='rgba(50,240,140,.5)' stroke='none'/><circle cx='308' cy='84' r='3' fill='%2332f08c' stroke='none'/>\
<text x='60' y='88' fill='%2332f08c' stroke='none' font-family='Arial, sans-serif' font-weight='700' font-size='10' letter-spacing='1'>DELL</text>\
<text x='90' y='88' fill='rgba(160,253,231,.85)' stroke='none' font-family='Arial, sans-serif' font-weight='600' font-size='9'>PowerEdge R750</text>\
<rect x='50' y='102' width='280' height='40' rx='2'/><circle cx='320' cy='122' r='3' fill='%2332f08c' stroke='none'/><circle cx='308' cy='122' r='3' fill='rgba(50,240,140,.5)' stroke='none'/><line x1='60' y1='115' x2='120' y2='115' stroke='rgba(50,240,140,.5)' stroke-width='1.2'/><line x1='60' y1='128' x2='100' y2='128' stroke='rgba(50,240,140,.5)' stroke-width='1.2'/>\
<text x='140' y='120' fill='%2332f08c' stroke='none' font-family='Arial, sans-serif' font-weight='700' font-size='10' letter-spacing='1'>DELL</text>\
<rect x='50' y='148' width='280' height='24' rx='2'/><circle cx='320' cy='160' r='3' fill='rgba(50,240,140,.55)' stroke='none'/><circle cx='308' cy='160' r='3' fill='%2332f08c' stroke='none'/>\
<text x='60' y='164' fill='%2332f08c' stroke='none' font-family='Arial, sans-serif' font-weight='700' font-size='10' letter-spacing='1'>DELL</text>\
<text x='90' y='164' fill='rgba(160,253,231,.85)' stroke='none' font-family='Arial, sans-serif' font-weight='600' font-size='9'>PowerEdge R640</text>\
<rect x='50' y='178' width='280' height='40' rx='2'/><circle cx='320' cy='198' r='3' fill='%2332f08c' stroke='none'/><circle cx='308' cy='198' r='3' fill='rgba(50,240,140,.5)' stroke='none'/><line x1='60' y1='191' x2='140' y2='191' stroke='rgba(50,240,140,.5)' stroke-width='1.2'/><line x1='60' y1='205' x2='110' y2='205' stroke='rgba(50,240,140,.5)' stroke-width='1.2'/>\
<text x='170' y='196' fill='%2332f08c' stroke='none' font-family='Arial, sans-serif' font-weight='700' font-size='10' letter-spacing='1'>DELL</text>\
<rect x='50' y='224' width='280' height='24' rx='2'/><circle cx='320' cy='236' r='3' fill='rgba(50,240,140,.5)' stroke='none'/><circle cx='308' cy='236' r='3' fill='%2332f08c' stroke='none'/>\
<text x='60' y='240' fill='%2332f08c' stroke='none' font-family='Arial, sans-serif' font-weight='700' font-size='10' letter-spacing='1'>DELL</text>\
<text x='90' y='240' fill='rgba(160,253,231,.85)' stroke='none' font-family='Arial, sans-serif' font-weight='600' font-size='9'>PowerEdge R7625</text>\
<rect x='50' y='254' width='280' height='60' rx='2'/><circle cx='320' cy='284' r='3' fill='%2332f08c' stroke='none'/><circle cx='308' cy='284' r='3' fill='rgba(50,240,140,.55)' stroke='none'/><rect x='60' y='264' width='40' height='8' fill='url(%23rack)' stroke='none'/><rect x='105' y='264' width='40' height='8' fill='url(%23rack)' stroke='none'/><rect x='150' y='264' width='40' height='8' fill='url(%23rack)' stroke='none'/><line x1='60' y1='298' x2='140' y2='298' stroke='rgba(50,240,140,.5)' stroke-width='1.2'/>\
<text x='260' y='287' fill='%2332f08c' stroke='none' font-family='Arial, sans-serif' font-weight='700' font-size='11' letter-spacing='1'>DELL</text>\
<rect x='50' y='320' width='280' height='24' rx='2'/><circle cx='320' cy='332' r='3' fill='%2332f08c' stroke='none'/><circle cx='308' cy='332' r='3' fill='rgba(50,240,140,.5)' stroke='none'/>\
<text x='60' y='336' fill='%2332f08c' stroke='none' font-family='Arial, sans-serif' font-weight='700' font-size='10' letter-spacing='1'>DELL</text>\
<text x='90' y='336' fill='rgba(160,253,231,.85)' stroke='none' font-family='Arial, sans-serif' font-weight='600' font-size='9'>PowerEdge R660</text>\
<rect x='50' y='350' width='280' height='40' rx='2'/><circle cx='320' cy='370' r='3' fill='rgba(50,240,140,.55)' stroke='none'/><circle cx='308' cy='370' r='3' fill='%2332f08c' stroke='none'/><line x1='60' y1='363' x2='150' y2='363' stroke='rgba(50,240,140,.5)' stroke-width='1.2'/><line x1='60' y1='377' x2='120' y2='377' stroke='rgba(50,240,140,.5)' stroke-width='1.2'/>\
<text x='180' y='368' fill='%2332f08c' stroke='none' font-family='Arial, sans-serif' font-weight='700' font-size='10' letter-spacing='1'>DELL</text>\
<rect x='50' y='396' width='280' height='24' rx='2'/><circle cx='320' cy='408' r='3' fill='%2332f08c' stroke='none'/><circle cx='308' cy='408' r='3' fill='rgba(50,240,140,.5)' stroke='none'/>\
<text x='60' y='412' fill='%2332f08c' stroke='none' font-family='Arial, sans-serif' font-weight='700' font-size='10' letter-spacing='1'>DELL</text>\
<text x='90' y='412' fill='rgba(160,253,231,.85)' stroke='none' font-family='Arial, sans-serif' font-weight='600' font-size='9'>PowerEdge R550</text>\
<rect x='50' y='426' width='280' height='52' rx='2'/><circle cx='320' cy='452' r='3' fill='%2332f08c' stroke='none'/><circle cx='308' cy='452' r='3' fill='rgba(50,240,140,.55)' stroke='none'/><line x1='60' y1='440' x2='150' y2='440' stroke='rgba(50,240,140,.5)' stroke-width='1.2'/><line x1='60' y1='456' x2='120' y2='456' stroke='rgba(50,240,140,.5)' stroke-width='1.2'/><line x1='60' y1='468' x2='160' y2='468' stroke='rgba(50,240,140,.5)' stroke-width='1.2'/>\
<text x='240' y='455' fill='%2332f08c' stroke='none' font-family='Arial, sans-serif' font-weight='700' font-size='11' letter-spacing='1'>DELL</text>\
</g>\
</svg>");
  background-repeat: no-repeat;
  background-size: contain;
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 75%, transparent 100%);
  animation: heroRackPulse 5s ease-in-out infinite;
}

/* Orb 2：左下角網路連接線 —— 更大 · 更亮 · 節點閃爍 */
.heroBgOrb.heroBgOrb2 {
  display: block;
  left: -4%;
  bottom: -6%;
  width: 720px;
  height: 560px;
  opacity: 1;
  filter: drop-shadow(0 0 24px rgba(50, 240, 140, .3)) drop-shadow(0 0 50px rgba(50, 240, 140, .15));
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='480' height='380' viewBox='0 0 480 380'>\
<g fill='none' stroke='rgba(50,240,140,.75)' stroke-width='2'>\
<path d='M 20 200 C 100 100, 200 260, 320 140 S 460 220, 460 60'/>\
<path d='M 30 300 C 140 220, 240 340, 360 240 S 460 300, 460 200' stroke-dasharray='5,7'/>\
<path d='M 50 100 L 200 180 L 340 90 L 460 160' stroke='rgba(50,240,140,.55)' stroke-width='1.4'/>\
<path d='M 100 50 Q 220 20, 380 40' stroke='rgba(160,253,231,.4)' stroke-width='1.2' stroke-dasharray='2,4'/>\
<circle cx='20' cy='200' r='7' fill='%2332f08c' stroke='none'/>\
<circle cx='200' cy='180' r='6' fill='%2332f08c' stroke='none'/>\
<circle cx='340' cy='90' r='6' fill='%2332f08c' stroke='none'/>\
<circle cx='460' cy='60' r='7' fill='%2332f08c' stroke='none'/>\
<circle cx='30' cy='300' r='6' fill='rgba(160,253,231,1)' stroke='none'/>\
<circle cx='360' cy='240' r='6' fill='rgba(50,240,140,.9)' stroke='none'/>\
<circle cx='20' cy='200' r='16' stroke='rgba(50,240,140,.5)' stroke-width='1.4'/>\
<circle cx='460' cy='60' r='18' stroke='rgba(50,240,140,.5)' stroke-width='1.4'/>\
<circle cx='340' cy='90' r='12' stroke='rgba(50,240,140,.45)' stroke-width='1.2'/>\
<circle cx='200' cy='180' r='11' stroke='rgba(50,240,140,.4)' stroke-width='1.2'/>\
<circle cx='30' cy='300' r='14' stroke='rgba(50,240,140,.35)' stroke-width='1'/>\
</g>\
</svg>");
  background-repeat: no-repeat;
  background-size: contain;
  mask-image: linear-gradient(45deg, #000 0%, #000 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(45deg, #000 0%, #000 60%, transparent 100%);
  animation: heroWirePulse 6s ease-in-out infinite;
}

@keyframes heroRackPulse {
  0%, 100% { opacity: .95; filter: drop-shadow(0 0 30px rgba(50, 240, 140, .35)) drop-shadow(0 0 60px rgba(50, 240, 140, .18)); }
  50%      { opacity: 1;   filter: drop-shadow(0 0 42px rgba(50, 240, 140, .55)) drop-shadow(0 0 80px rgba(50, 240, 140, .3)); }
}
@keyframes heroWirePulse {
  0%, 100% { opacity: .9; transform: translateX(0) translateY(0); }
  33%      { opacity: 1;  transform: translateX(8px) translateY(-4px); }
  66%      { opacity: .95; transform: translateX(4px) translateY(4px); }
}

/* ===== 底部漸隱過渡層 —— 讓 Hero 與下方版塊無縫融合 ===== */
.heroCarousel::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .5) 60%, #000 100%);
  z-index: 2;
  pointer-events: none;
}

/* ===== 浮動數據粒子（服務器活動指示） ===== */
.heroCarousel .heroBgFx::before,
.heroCarousel .heroBgFx::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: #32f08c;
  box-shadow: 0 0 12px #32f08c, 0 0 24px rgba(50, 240, 140, .5);
  z-index: 1;
}
.heroCarousel .heroBgFx::before {
  width: 5px; height: 5px;
  top: 22%; right: 18%;
  animation: heroParticle1 6s ease-in-out infinite;
}
.heroCarousel .heroBgFx::after {
  width: 4px; height: 4px;
  bottom: 30%; left: 15%;
  animation: heroParticle2 7s ease-in-out infinite;
}
@keyframes heroParticle1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .9; }
  50%      { transform: translate(-40px, 30px) scale(1.5); opacity: 1; }
}
@keyframes heroParticle2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .8; }
  50%      { transform: translate(50px, -35px) scale(1.4); opacity: 1; }
}

/* ===== 網路關鍵詞浮標籤（CN2 GIA / AS9929 / CMIN2 / Anti-DDoS / 1Tbps+ / BGP） ===== */
.heroBgTag {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(50, 240, 140, .85);
  padding: 5px 12px;
  border: 1px solid rgba(50, 240, 140, .5);
  border-radius: 4px;
  background: rgba(50, 240, 140, .04);
  box-shadow:
    0 0 12px rgba(50, 240, 140, .25),
    inset 0 0 8px rgba(50, 240, 140, .06);
  text-shadow: 0 0 8px rgba(50, 240, 140, .6);
  white-space: nowrap;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
/* 標籤角落發光角標 */
.heroBgTag::before,
.heroBgTag::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border: 1px solid #32f08c;
}
.heroBgTag::before {
  top: -1px;
  left: -1px;
  border-right: none;
  border-bottom: none;
}
.heroBgTag::after {
  bottom: -1px;
  right: -1px;
  border-left: none;
  border-top: none;
}

/* 6 個標籤分散位置 + 各自漂浮動效 */
.heroBgTag1 { top: 12%;  left: 4%;   animation: heroTagFloat1 9s ease-in-out infinite; }
.heroBgTag2 { top: 28%;  left: 42%;  animation: heroTagFloat2 11s ease-in-out infinite; opacity: .7; }
.heroBgTag3 { top: 62%;  left: 8%;   animation: heroTagFloat3 10s ease-in-out infinite; }
.heroBgTag4 { top: 78%;  right: 30%; animation: heroTagFloat1 12s ease-in-out infinite -3s; }
.heroBgTag5 { top: 18%;  right: 22%; animation: heroTagFloat2 9.5s ease-in-out infinite -2s; opacity: .8; }
.heroBgTag6 { top: 52%;  right: 6%;  animation: heroTagFloat3 11.5s ease-in-out infinite -4s; opacity: .75; }

@keyframes heroTagFloat1 {
  0%, 100% { transform: translate(0, 0); opacity: .85; }
  50%      { transform: translate(10px, -14px); opacity: 1; }
}
@keyframes heroTagFloat2 {
  0%, 100% { transform: translate(0, 0); opacity: .7; }
  50%      { transform: translate(-12px, 10px); opacity: .95; }
}
@keyframes heroTagFloat3 {
  0%, 100% { transform: translate(0, 0); opacity: .8; }
  50%      { transform: translate(8px, 12px); opacity: 1; }
}

/* 平板/手機縮小服務器元素 */
@media (max-width: 900px) {
  .heroBgOrb.heroBgOrb1 { width: 360px; height: 500px; opacity: .8; right: -8%; }
  .heroBgOrb.heroBgOrb2 { width: 480px; height: 380px; opacity: .75; }
  .heroCarousel .heroBgFx::before,
  .heroCarousel .heroBgFx::after { display: none; }
  .heroBgTag { font-size: 11px; padding: 4px 10px; }
  .heroBgTag2, .heroBgTag5 { display: none; }
}
@media (max-width: 599px) {
  .heroBgOrb.heroBgOrb1 { display: none; }
  .heroBgOrb.heroBgOrb2 { opacity: .55; }
  .heroBgTag { font-size: 10px; padding: 3px 8px; opacity: .6 !important; }
  .heroBgTag3, .heroBgTag6 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .heroBgOrb.heroBgOrb1,
  .heroBgOrb.heroBgOrb2,
  .heroCarousel::after { animation: none; }
}

/* ===== 內容容器 —— 與 Header 對齊 ===== */
.heroInner {
  position: relative;
  z-index: 2;
  width: min(100%, 1600px);
  margin-inline: auto;
  padding: 32px 16px 24px;
}
@media (min-width: 744px) {
  .heroInner { padding: 40px 24px 28px; }
}
@media (min-width: 1060px) {
  .heroInner { padding: 48px 32px 32px; }
}

.heroCarouselTrack {
  position: relative;
  min-height: 380px;
}

/* ===== 單個 Slide ===== */
.heroSlide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
  pointer-events: none;
}
.heroSlide.isActive {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear 0s;
  pointer-events: auto;
}

/* ===== 左側文案 ===== */
.heroSlideCopy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 640px;
}

/* 頂部通告條 */
.heroNoti {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, .55);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: color .2s ease;
}
.heroNoti:hover { color: #fff; }
.heroNoti:hover .heroNotiArrow { transform: translateX(2px); }
.heroNotiBadge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  background: rgba(50, 240, 140, .1);
  color: #32f08c;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  border-radius: 3px;
}
.heroNotiText {
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.heroNotiArrow {
  font-size: 10px;
  color: rgba(255, 255, 255, .4);
  transition: transform .2s ease;
}

/* Kicker 隱藏 */
.heroKicker { display: none; }

/* 大標題 */
.heroSlideTitle {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.3px;
  color: #fff;
}
.heroSlideTitle .titleAccent {
  display: inline;
  background: linear-gradient(120deg, #a0fde7 0%, #32f08c 60%, #10b981 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}
.heroSlideTitle .titleSub {
  display: inline;
  font-size: .85em;
  font-weight: 500;
  color: rgba(255, 255, 255, .7);
}
.heroSlideTitle .titleHi {
  color: #32f08c;
  font-weight: 700;
}

/* 描述文字 */
.heroSlideDesc {
  margin: 0;
  color: rgba(255, 255, 255, .6);
  font-size: 14px;
  line-height: 1.75;
  max-width: 560px;
}
.heroSlideDesc strong,
.heroSlideDesc .hlp,
.heroSlideDesc .hlc,
.heroSlideDesc .hlg {
  color: #32f08c;
  font-weight: 600;
}

/* 按鈕 */
.heroSlideBtns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.heroBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.heroBtn i { font-size: 11px; transition: transform .2s ease; }
.heroBtnPrimary {
  background: #32f08c;
  color: #0a0d0b;
  box-shadow: 0 6px 20px rgba(50, 240, 140, .18);
}
.heroBtnPrimary:hover {
  background: #60f2bd;
  box-shadow: 0 8px 24px rgba(50, 240, 140, .3);
}
.heroBtnPrimary:hover i { transform: translateX(2px); }
.heroBtnGhost {
  background: transparent;
  color: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .18);
}
.heroBtnGhost:hover {
  border-color: #32f08c;
  color: #32f08c;
}

/* ===== 右側視覺 ===== */
.heroSlideMedia {
  display: none;
  justify-content: center;
  align-items: center;
  position: relative;
}
.heroMediaFrame {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 0;
}
.heroMediaFrame::before { display: none; }
.heroMediaFrame img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
}

/* ===== 底部控制條 ===== */
.heroControls {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 56px;
}

.heroCounter { display: none; }

.heroProgressTrack {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-width: 480px;
}
.heroProgressItem {
  display: block;
  padding: 12px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}
.heroProgressLabel { display: none; }
.heroProgressBar {
  position: relative;
  display: block;
  height: 2px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
  border-radius: 2px;
}
.heroProgressFill {
  position: absolute;
  inset: 0;
  width: 0;
  background: #32f08c;
}
.heroProgressItem.isActive .heroProgressFill {
  animation: heroProgressFill 5.5s linear forwards;
}
@keyframes heroProgressFill {
  from { width: 0; }
  to   { width: 100%; }
}

/* 導航按鈕 */
.heroNavBtns {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.heroNavBtn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .75);
  cursor: pointer;
  border-radius: 4px;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.heroNavBtn:hover {
  border-color: #32f08c;
  color: #32f08c;
}
.heroNavBtn i { font-size: 12px; }

/* ===== 響應式 ===== */
@media (min-width: 900px) {
  .heroSlide {
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
  }
  .heroSlideMedia { display: flex; }
}

@media (max-width: 899px) {
  .heroInner { padding: 40px 20px 32px; }
  .heroCarouselTrack { min-height: 360px; }
  .heroSlideTitle { font-size: 20px; letter-spacing: -.2px; line-height: 1.4; }
  .heroSlideDesc { font-size: 13px; line-height: 1.7; }
  .heroNotiText { max-width: 240px; font-size: 13px; }
  .heroControls { gap: 12px; margin-top: 40px; }
}
@media (max-width: 599px) {
  .heroSlideTitle { font-size: 18px; }
  .heroSlideDesc { font-size: 12.5px; }
  .heroBtn { height: 40px; padding: 0 16px; font-size: 13px; }
  .heroProgressTrack { max-width: none; }
  .descBr { display: none; }
}