/* =========================
   SPARK HERO EFFECT
   ========================= */

   .hero{
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  
  /* -------------------------
     火花粒子 (右邊密集)
  ------------------------- */
  
  .hero::before{
    content:"";
    position:absolute;
    inset:-100px;
    pointer-events:none;
    z-index:0;
  
    background-image:
  
    /* 左側少 */
    radial-gradient(circle at 15% 30%, rgba(255,120,0,.8) 2px, transparent 2px),
    radial-gradient(circle at 25% 70%, rgba(255,140,0,.6) 2px, transparent 2px),
  
    /* 中間 */
    radial-gradient(circle at 45% 40%, rgba(255,150,80,.5) 3px, transparent 2px),
  
    /* 右側密集 */
    radial-gradient(circle at 70% 30%, rgba(255,120,0,.8) 1px, transparent 2px),
    radial-gradient(circle at 80% 50%, rgba(255,160,0,.7) 1px, transparent 2px),
    radial-gradient(circle at 90% 70%, rgba(255,180,80,.6) 1px, transparent 2px),
    radial-gradient(circle at 85% 20%, rgba(255,150,60,.7) 1px, transparent 2px),
    radial-gradient(circle at 75% 80%, rgba(255,140,0,.6) 1px, transparent 2px),
    radial-gradient(circle at 92% 35%, rgba(255,120,0,.8) 1px, transparent 2px),
    radial-gradient(circle at 88% 60%, rgba(255,150,60,.7) 1px, transparent 2px);
  
    background-size:260px 260px;
    opacity:1;
    animation:sparkMove 9s cubic-bezier(.45,.05,.55,.95) infinite;
  }
  
  @keyframes sparkMove{
    0%{
      transform:translate(0,0) rotate(0deg);
      opacity:0;
    }
  
    25%{
      opacity:.8;
    }
  
    50%{
      opacity:.9;
    }
  
    75%{
      opacity:.8;
    }
  
    100%{
      transform:translate(4px,-250px) rotate(30deg);
      opacity:0;
    }
  }
  
  /* -------------------------
     右側火光 Glow
  ------------------------- */
  
  .hero::after{
    content:"";
    position:absolute;
    top:-120px;
    right:-120px;
    bottom:-220px;
    left:-120px;
    pointer-events:none;
    z-index:0;
  
    background:
      radial-gradient(circle at 97% 42%, rgba(255,210,140,.28), transparent 18%),
      radial-gradient(circle at 95% 40%, rgba(255,120,0,.99), transparent 35%),
      radial-gradient(circle at 88% 75%, rgba(255,160,0,.15), transparent 45%);
  
    mix-blend-mode:screen;
    animation:heroGlow 2.5s ease-in-out infinite alternate;
  }
  
  @keyframes heroGlow{
    0%{
      opacity:.0;
      transform:translateY(0);
    }
  
    100%{
      opacity:1;
      transform:translateY(-18px);
    }
  }

  /* banner按鈕動畫 */
  @keyframes apiGlow {
    0% {
      background-color: #0068dd;
      box-shadow: 0 0 0 rgba(26, 120, 255, 0);
    }
  
    50% {
      background-color: #3793fd;
      box-shadow: 0 0 30px rgba(95, 169, 255, 0.99);
    }
  
    100% {
      background-color: #0068dd;
      box-shadow: 0 0 0 rgba(26, 120, 255, 0);
    }
  }
  
  .animate-apiGlow {
    animation: apiGlow 5s ease-in-out infinite;
    animation-delay: 2.5s;
  }
  
  /* -------------------------
     內容層
  ------------------------- */
  
  .hero > div:not(.spark-scan):not(.hero-blue-glow){
    position:relative;
    z-index:2;
  }
  
  /* -------------------------
     CTA 按鈕 glow
  ------------------------- */
  
  .hero a{
    position:relative;
    overflow:hidden;
  }
  
  .hero a::after{
    content:"";
    position:absolute;
    inset:-2px;
  
    background:linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,.4),
      transparent
    );
  
    opacity:0;
    transition:.4s;
  }
  
  .hero a:hover::after{
    opacity:1;
  }

    /* -------------------------
       左側藍 Glow
    ------------------------- */
    
  .hero-blue{
    position:absolute !important;
    top:-120px;
    left:60px;
    bottom:-120px;
    width:55%;
    pointer-events:none;
    z-index:0;
    background:
      radial-gradient(circle at 18% 40%, rgba(0, 184, 251, 0.464), transparent 18%),
      radial-gradient(circle at 22% 46%, rgba(0, 229, 255, 0.694), transparent 30%),
      radial-gradient(circle at 30% 72%, rgba(0,120,255,.28), transparent 42%);
    mix-blend-mode:screen;
    opacity:.85;
    animation:heroBlueGlow 3.8s ease-in-out infinite alternate;
  }


    /* -------------------------
       左側藍 Glow
    ------------------------- */
    
    .hero-blue{
      position:absolute !important;
      top:-120px;
      left:60px;
      bottom:-120px;
      width:55%;
      pointer-events:none;
      z-index:0;
      background:
        radial-gradient(circle at 18% 40%, rgba(0, 184, 251, 0.464), transparent 18%),
        radial-gradient(circle at 22% 46%, rgba(0, 229, 255, 0.694), transparent 30%),
        radial-gradient(circle at 30% 72%, rgba(0,120,255,.28), transparent 42%);
      mix-blend-mode:screen;
      opacity:.85;
      animation:heroBlueGlow 3.8s ease-in-out infinite alternate;
    }
  
    @media (max-width: 768px){
      .hero-blue{
        width:85%;
        top:260px;
        left:0px;
        bottom:-160px;
      }
    }
    
    @keyframes heroBlueGlow{
      0%{
        opacity:.0;
        transform:translateY(0);
        filter:blur(0px);
      }
    
      50%{
        opacity:.55;
        transform:translateY(0px);
        filter:blur(2px);
      }
  
      100%{
        opacity:.0;
        transform:translateY(0px);
        filter:blur(2px);
      }
    }
    
  
  @keyframes heroBlueGlow{
    0%{
      opacity:.0;
      transform:translateY(0);
      filter:blur(0px);
    }
  
    50%{
      opacity:.45;
      transform:translateY(0px);
      filter:blur(2px);
    }

    100%{
      opacity:.0;
      transform:translateY(0px);
      filter:blur(2px);
    }
  }
  
/* =========================
   Section1 Desktop Tabs
   ========================= */

/* base */
.sec1-tab{
    position: relative;
    isolation: isolate;         
    border: 0 !important;         
    transition: color .25s ease;  /* 切換 */
  }
  
  /* active 漸層光帶*/
  .sec1-glass{
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: none;
    z-index: 1;
  
    background: linear-gradient(
      to right,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.02) 20%,
      rgba(255,255,255,.06) 35%,
      rgba(255,255,255,.12) 45%,
      rgba(255,255,255,.12) 50%,
      rgba(255,255,255,.12) 55%,
      rgba(255,255,255,.06) 65%,
      rgba(255,255,255,.02) 80%,
      rgba(255,255,255,0) 100%
    );
  }
  
  .sec1-tab > .relative{
    position: relative;
    z-index: 3;
  }
  
  /* ===== btn動畫 ===== */
  .sec1-tab > .relative{
    transform: translateX(0);
    transition: transform .28s cubic-bezier(.22,1,.36,1);
    will-change: transform;
  }
  
  /* 星星：default 不可見 */
  .sec1-star{
    opacity: 0;
    transform: translateX(-8px);
    transition:
      opacity .22s ease,
      transform .28s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
  }
  
  /* active 狀態 */
  .sec1-tab.is-active{
    color: #a5f3fc;
  }
  
  .sec1-tab.is-active .sec1-glass{
    display: block;
  }
  
  /* 文字向右移 */
  .sec1-tab.is-active > .relative{
    transform: translateX(14px);
    transition: transform .38s cubic-bezier(.22,1,.36,1);
  }
  
  /* 星星淡入 + 微滑入 */
  .sec1-tab.is-active .sec1-star{
    opacity: 1;
    transform: translateX(0);
  }
  
  /* ===== 黑色陰影（active 才會加 class） ===== */
  .sec1-tab.shadow-bottom::after,
  .sec1-tab.shadow-top::before{
    pointer-events: none;
    z-index: 2;
  }
  
  /* 下方陰影 */
  .sec1-tab.shadow-bottom::after{
    content:"";
    position:absolute;
    left: 6%;
    right: 6%;
    bottom: -2px;
    height: 22px;
  
    background: radial-gradient(
      ellipse at center,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.25) 45%,
      rgba(0,0,0,0) 75%
    );
    filter: blur(6px);
  }
  
  /* 上方陰影 */
  .sec1-tab.shadow-top::before{
    content:"";
    position:absolute;
    left: 6%;
    right: 6%;
    top: -2px;
    height: 22px;
  
    background: radial-gradient(
      ellipse at center,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.25) 45%,
      rgba(0,0,0,0) 75%
    );
    filter: blur(6px);
  }
  
  /* ===== 分隔線（漸層線取代 border） ===== */
  /* 上方線：每個按鈕都有 */
  .sec1-tab::before{
    content:"";
    position:absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    pointer-events:none;
    z-index: 3;
  
    background: linear-gradient(
      to right,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.60) 30%,
      rgba(255,255,255,.60) 70%,
      rgba(255,255,255,0) 100%
    );
    opacity: .22;
  }
  
  .sec1-tab.is-last::after{
    content:"";
    position:absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    pointer-events:none;
    z-index: 4;
  
    background: linear-gradient(
      to right,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.60) 30%,
      rgba(255,255,255,.60) 70%,
      rgba(255,255,255,0) 100%
    );
    opacity: .22;
  }
  
  /* =========================
     Section1 Mobile Swiper
     ========================= */
  
  .sec1-swiper .swiper-slide{
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  
  /* mobile 選單 bar（含上下漸層線 + 中間光帶） */
  .sec1-mtab{
    position: relative;
    isolation: isolate;
    width: 100%;
    padding: 18px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  
    color: #a5f3fc;
    font-weight: 600;
    letter-spacing: .04em;
    font-size: 22px;
  
    /* 中間光帶 */
    background: linear-gradient(
      to right,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.02) 20%,
      rgba(255,255,255,.06) 35%,
      rgba(255,255,255,.12) 45%,
      rgba(255,255,255,.12) 50%,
      rgba(255,255,255,.12) 55%,
      rgba(255,255,255,.06) 65%,
      rgba(255,255,255,.02) 80%,
      rgba(255,255,255,0) 100%
    );
  }
  
  /* 上方漸層線 */
  .sec1-mtab::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:1px;
    pointer-events:none;
    z-index:3;
  
    background: linear-gradient(
      to right,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.60) 30%,
      rgba(255,255,255,.60) 70%,
      rgba(255,255,255,0) 100%
    );
    opacity:.22;
  }
  
  /* 下方漸層線 */
  .sec1-mtab::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;
    pointer-events:none;
    z-index:3;
  
    background: linear-gradient(
      to right,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.60) 30%,
      rgba(255,255,255,.60) 70%,
      rgba(255,255,255,0) 100%
    );
    opacity:.22;
  }
  
  /* 文字層在最上面 */
  .sec1-mtab > span{
    position: relative;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  
  .sec1-mtab .sec1-mstar{
    color: #a5f3fc;
    opacity: 1;
  }
  
  /* MB 圖片卡 */
  .sec1-mcard{
    overflow: hidden;
    position: relative;
  }
  
  .sec1-mcard .sec1-mimg{
    width: 100%;
    position: relative;
  }
  
  .sec1-mcard .sec1-mimg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .sec1-mcap{
    position: absolute;
    left: 20px;
    bottom: 20px;
    right: auto;
    display: inline-block;
    max-width: calc(100% - 40px);
    padding: 10px 14px 20px 18px;
  }
  
  .sec1-mcap p{
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255,255,255,.92);
  }
  
  /* =========================
     Shared line-arrow styles
     ========================= */
  
  /* 箭頭樣式*/
  .sec1-arrow{
    position: relative;
    width: 10px;
    height: 26px;
    display: inline-block;
  }
  
  .sec1-arrow::before,
  .sec1-arrow::after{
    content:"";
    position:absolute;
    width: 30px;
    height: 2px;
    background: rgba(255,255,255,.85);
    top: 60%;
  }
  
  /* 左箭頭 (<) */
  .sec1-arrow-left::before,
  .sec1-arrow-left::after{
    left: 50%;
    transform-origin: left center;
  }
  .sec1-arrow-left::before{
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .sec1-arrow-left::after{
    transform: translate(-50%, -50%) rotate(45deg);
  }
  
  /* 右箭頭 (>) */
  .sec1-arrow-right::before,
  .sec1-arrow-right::after{
    right: 50%;
    transform-origin: right center;
  }
  .sec1-arrow-right::before{
    transform: translate(50%, -50%) rotate(45deg);
  }
  .sec1-arrow-right::after{
    transform: translate(50%, -50%) rotate(-45deg);
  }

/* ================
   Section2 Swiper (mobile only)
   ================ */

/* 讓左右卡片 */
.sec2-wrap{
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;  /* 重要：裁切左右 slide */
  }
  
  /* swiper 本體要允許露出，但會被外層裁切 */
  .sec2-swiper{
    overflow: visible;
    padding: 8px 0 0;
  }
  
  .sec2-swiper .swiper-slide{
    width: 82vw;        
    max-width: 420px;   
    display: flex;
    justify-content: center;
  }
  
  
  /* 箭頭按鈕 */
  .sec2-prev,
  .sec2-next{
    position: absolute;
    top: 58%;
    transform: translateY(-50%);
    z-index: 10;
    border: 0;
    background: transparent;
    padding: 18px; /* 放大點擊區 */
    cursor: pointer;
  }
  
  .sec2-prev{ left: 6px; }
  .sec2-next{ right: 6px; }
  
  .sec2-prev:active,
  .sec2-next:active{
    transform: translateY(-50%) scale(.98);
  }