/* ==========================================
           main.css - 變數與核心設定 (修正為溫潤 Claude 暖光色系)
           ========================================== */
        :root {
             /* 主色調 */
            --primary: #10264F;          /* 科技紫 (AI Agent/紫隊代表色) */
            --primary-hover: #10264F;    /* 科技紫 hover */
            --secondary: #2366dc;        /* 科技藍 (藍隊防禦代表色) */
            --secondary-hover: #2563eb;  /* 藍隊 hover */
            --purple-dim:rgba(124, 58, 237, 0.15);
            --purple: #7c3aed;


            /* 灰階系統 (Slate) */
            --slate-100: #07070a;        /* 全局最深底色 */
            --slate-200: #0d0d12;        /* 次深底色 / 卡片暗色背景 */
            --slate-300: #12121a;        /* 卡片邊框 / 分割線 */
            --slate-400: #1a1a26;        /* 懸停或聚焦時的邊框色 */
            --slate-500: #212a39;        /* 靜態輔助文字暗灰 */
            --slate-600: #394c6b;        /* 次要內文灰 */
            --slate-700: #304360;        /* 亮色內文 */
            --slate-800: #f1e9f7;        /* 主要高亮白文字 */
            --slate-900: #ffffff;        /* 純白強高亮 */

            /* 對比底色系統 (Contrast) */
            --contrast-100: #07070a;     /* 全局頂級暗黑底色 */
            --contrast-200: rgba(18, 18, 26, 0.75); /* 卡片專屬半透明毛玻璃底色 */
            --contrast-300: rgba(13, 13, 18, 0.9);  /* 終端機與區塊標題底色 */
            --contrast-400: rgba(168, 85, 247, 0.2); /* 紫色微光邊框色 */
            --contrast-500: #a855f7;     /* 亮紫色 Accent */

            /* 輔助特徵色 */
            --accent-emerald: #10b981;   /* 質感翡翠綠 */
            --accent-amber: #f59e0b;     /* 科技琥珀橘 */
            --accent-rose: #ef4444;      /* 科技霓虹紅 */

            /* 文字基本調色 */
            --text-500: #c1c1d0;         
            --white: #ffffff;
            --black: #000000;
            
            /* 字型系統 */
            --font-sans:"Noto Sans TC" ,system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --font-serif: "Noto Serif TC", "微軟正黑體", Georgia, serif;
            
            /* 陰影系統 */
            --shadow-sm: 0 1px 2px 0 rgba(168, 85, 247, 0.1);
            --shadow-md: 0 4px 12px -1px rgba(168, 85, 247, 0.15), 0 2px 4px -1px rgba(59, 130, 246, 0.1);
            --shadow-lg: 0 12px 24px -3px rgba(168, 85, 247, 0.2), 0 4px 8px -2px rgba(239, 68, 68, 0.1);
            --shadow-xl: 0 24px 36px -5px rgba(168, 85, 247, 0.3), 0 12px 16px -5px rgba(59, 130, 246, 0.2);
            --shadow-2xl: 0 32px 64px -12px rgba(168, 85, 247, 0.4);
            
            /* 圓角大小 */
            --radius-lg: 12px;
            --radius-xl: 16px;
            --radius-2xl: 24px;
            --radius-full: 9999px;

            --plyr-color-main: #7c3aed;
        }


        img {width: 100%;}
        /* --- 網頁專屬獨立 CSS 樣式 --- */
        
        .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; border-radius: 5px;overflow: hidden;margin-left: -15px;}
        .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0;left: 0; width: 100%; height: 100%;}


      




      

::selection {background-color: #1c9cbc;color: #fff; } 
section h1,section h2,section h3,section h4,section h5,section h6,section p,section span,section a{position: relative;z-index: 99;color: var(--text-700);margin: 0;}
section a:hover {}
h1, h2, h3, h4, h5, h6 { font-weight: 600;}

section p,section b,section li,section table tr td{color: var(--slate-700);font-size: 1.02rem;line-height: 1.7;font-weight: 400;}
a{color: var(--slate-900);transition: all .2s ease-in;}
a:hover { text-decoration: none; }



/* 共通 */
section { padding: 6rem 0 ;position: relative;}
section .container{position: relative;}
section p br { content: ""; margin: 1em; display: block; }
section p {font-size: 1.1rem;}
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0;left: 0; width: 100%; height: 100%;}  


/* 大小標題共用 */
.master-title {margin: 0 0 30px;}
.master-title a:hover{filter: brightness(1.2);}
.master-title.center {margin: 0 auto 20px;text-align: center;}
.master-title.center  h2 {text-align: center;}
.master-title h2 {font-weight: 900;display: inline-block;letter-spacing: .02em;color:  var(--slate-900);font-size: 3rem;font-weight: 800;margin: 0;}
.master-title h2 b{background: linear-gradient(135deg, #F472B6 0%, #C084FC 50%, #818CF8 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 3rem;font-weight: 900;}


.master-title h3 {font-size: 1.8rem;color: var(--white);}
.master-title h4 {color: var(--slate-700);font-size: 1.25rem;line-height: 1.8;}
.master-title h4  span{font-weight: 600;border-bottom: 3px solid #05c8eb;color: var(--slate-800);}
.pain-highlight { background: var(--purple-dim); border-left: 3px solid var(--purple); padding: 1.25rem 1.75rem; margin-bottom: 2rem; border-radius: 0 4px 4px 0; }





        
        /* 按鈕設計 */
          .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12px 36px;
            font-size: 1.2rem;
            font-weight: 600;
            border-radius: var(--radius-lg);
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            border: none;display: inline-flex;
            align-items: center;
            
          }
      
        .btn-primary { background: linear-gradient(135deg, #1264df, #19a7dc);; color: var(--white);box-shadow: 0 14px 32px rgba(26,105,218,.2); }
         .btn:hover {transform: translateY(2px);box-shadow: 0 5px 8px rgba(26,105,218,.3);}



        .btn-sm {background: linear-gradient(135deg, #1264df, #19a7dc);; color: var(--white);box-shadow: 0 8px 15px rgba(26,105,218,.2); padding: 5px 10px;border-radius: 8px;margin: 15px 0;display: inline-block;text-decoration: none;display: inline-flex;align-items: center;}
        .btn-sm:hover {transform: translateY(2px);box-shadow: 0 3px 5px rgba(26,105,218,.3);}
        .btn-sm svg {margin: 0;}



        .btn-big { align-items: center; justify-content: center; padding: 12px 30px; font-size: 1.4rem;  border-radius: var(--radius-lg); cursor: pointer; transition: all 0.3s ease; text-decoration: none; background: linear-gradient(135deg, #1264df, #19a7dc);color: #fff; border: none ;display: flex;align-items: center;width: 100%;box-shadow: 0 14px 32px rgba(26,105,218,.2);}
      
        .btn-big:hover {transform: translateY(2px);box-shadow: 0 5px 8px rgba(26,105,218,.3);}



/* ========================================================================
  Component: 主頁 (Hero Header)
  ======================================================================== */
header.hero {height:100vh;background:url(../images/hero-bg.jpg)  center; background-size: cover; }
header.hero .hero-layout { height:100vh; width:45%; align-items: center; }
header.hero .header-con { padding:30px 70px; background: linear-gradient(90deg, #f7faff 0%, rgba(247,250,255,.98) 72%, rgba(247,250,255,.50) 100%);height: 100vh;display: flex;flex-direction: column;justify-content: center;}
header.hero .hero-kicker {padding: 8px 14px; border: 1px solid rgba(35, 121, 220, 0.18); border-radius: 999px; background: #e9f4ff; color: #2b67ab; font-size:clamp(1.2rem,3vw, 1.4rem);; font-weight: 600; letter-spacing: .08em; }
header.hero .hero-badge h1 { margin: 24px 0 0; color: #041d45; font-size: clamp(2.8rem, 5.8vw, 6.5rem); line-height: 1.1;   letter-spacing: clamp(0, 0.15vw, 0.5rem);font-weight: 900; word-break: keep-all; overflow-wrap: normal; }
header.hero h2 { margin: 20px 0; color: #1264df;  font-size: clamp(1.8rem, 4.5vw, 2rem);  font-weight: 600; line-height: 1.2;letter-spacing: clamp(0, 0.15vw, 0.1rem)}


    /* ========================================================================
     Component: 課程資訊
   ======================================================================== */
section.course-details {background: url(../images/course-bg.png), linear-gradient(rgb(249, 251, 255) 0%, rgb(234, 243, 255) 100%);background-position: right bottom ;background-repeat: no-repeat ;background-size: 55% ,100%;}
section.course-details .cert-grid { column-count: 2; column-gap: 24px; }
section.course-details .cert-grid .course-list { display: inline-block; width: 100%; margin-bottom: 24px; break-inside: avoid; page-break-inside: avoid; box-sizing: border-box; padding: 24px; position: relative; overflow: hidden; padding: 28px; background: rgba(255, 255, 255, .88); border: 1px solid rgba(36, 105, 205, .13); border-radius: 22px; box-shadow: 0 16px 45px rgba(38, 91, 159, .08); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;}






section.course-details .cert-grid .course-list ul { margin: 0; padding: 0; list-style: none; }
section.course-details .cert-grid .course-list ul li { margin-bottom: 12px; line-height: 1.6; grid-template-columns: minmax(88px, auto) 1fr; align-items: start; border: 1px solid rgba(38, 101, 190, .09); border-radius: 13px; background: #f7faffa8; color: #334d70; line-height: 1.55; transition: all 0.3s ease;box-shadow: 0 5px 8px rgba(26,105,218,.005); }
section.course-details .cert-grid .course-list ul li:hover{transform: translateY(2px);box-shadow: 0 1px 1px rgba(26,105,218,.1);} 
section.course-details .cert-grid .course-list ul li a { color: var(--slate-700);  padding: 13px 14px;text-decoration: none;display: block; width: 100%;}






section.course-details .cert-grid .course-list ul li span { display: inline-flex; min-width: 82px; padding: 4px 9px; border-radius: 8px; background: #e5f0ff; color: #1767cf; font-size: .76rem; font-weight: 900; letter-spacing: .02em; white-space: nowrap; text-align: center; }
section.course-details .cert-grid .course-list .cert-card-head  {display: flex; align-items: center; gap: 12px;margin: 0 0 20px;}
section.course-details .cert-grid .course-list .cert-card-head  h3 {margin: 0; font-size: 1.5rem; font-weight: 100;font-weight: 600; }
section.course-details .cert-grid .course-list .cert-card-head .cert-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 15px; color: #1876e5; background: #e8f2ff; }
.cert-icon svg { width: 24px; height: 24px; }
section.course-details .cert-grid .course-list ul li:last-child { margin-bottom: 0; }
section.course-details .cert-grid .course-list ul li span { display: inline-block; margin-right: 8px; font-weight: 700; }




     /* ========================================================================
     Component: 證言
   ======================================================================== */

section.testimony-details {background: linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px), linear-gradient(90deg, #dae9ff 50%, #a6c5f4 100%);background-size:   50px 50px, 50px 50px, 100% 100%; }
section.testimony-details .item-g .item {max-height: 300px;display: flex;align-items: center;margin: 0 0 20px;padding: 20px;}
section.testimony-details .item-g .item .photo {  width: 200px; flex-shrink: 0; overflow: hidden;margin-right: 20px;}
section.testimony-details .item-g .item .photo img{  width: 100%; object-position: center top; }




section.testimony-details .item-g .item .name-g  {display: flex;align-items: center;margin-bottom: 5px;}
section.testimony-details .item-g .item .name-g .icon{width:80px;}
section.testimony-details .item-g .item .name-g h3 { font-size: 1.5rem; font-weight: 100;font-weight: 600;display: inline-block;margin-left: 10px;}
section.testimony-details .item-g .item .name-g span {padding: 4px 10px; border: 1px solid rgba(35, 121, 220, 0.18); border-radius: .5rem; background: #e9f4ff; font-size: 1rem; font-weight: 600;color: #2b67ab;}


    /* ========================================================================
     Component: FOOTER按鈕
       ======================================================================== */


 section#BTN {padding: 0 0 6rem; background: linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px), linear-gradient(90deg, #dae9ff 50%, #a6c5f4 100%);background-size:   50px 50px, 50px 50px, 100% 100%;; }









   

   
    /* ========================================================================
       16. 響應式斷點佈局微調 (RWD Media Queries)
       ======================================================================== */
    @media (max-width: 1024px) {
      .grid-12 { grid-template-columns: 1fr; }
      .hero-right-col { margin-top: 3rem; }
      .hero-stats { grid-template-columns: repeat(2, 1fr); }
      
      /* 錯位卡片在平板與手機降級為乾淨的單張卡片流式佈局 */
      section.efficiency .stagger-group {
        min-height: auto;
      }
      section.efficiency .stagger-card {
        width: 100% !important;
        position: static !important;
        transform: none !important;
      }
      section.efficiency .stagger-group:hover .card-before {
        transform: none !important;
        opacity: 1;
      }
      section.efficiency .stagger-group:hover .card-after {
        transform: none !important;
      }
    }

 

 











@media(max-width:1300px){
    /* 主視覺 */

    .container{position: relative;max-width:1150px;}
  header.hero .hero-layout {height:auto; width:60%; }
  header.hero .header-con { padding: 30px ; height: 100vh; }

    
}


@media(max-width:991px){

    .master-title { width:100%; }



    section.course-details .cert-grid { column-count: 2; column-gap: 16px; }
    section.course-details .cert-grid .course-list { margin-bottom: 16px; } 

    section#BTN a { width: 100%;text-wrap:wrap ;}

 

   

}


@media(max-width: 767px){
    .container { padding: 15px;max-width: 98%; }
    .title h3 { font-size: 1.6rem; }

  /* 浮動按鈕 */
    .floatBtn { display: none; }

    h2{font-size: 1.6rem;}


    .master-title h2 { font-size: 1.8rem;line-height: 1.5; }
    .master-title p {font-size: 1.1rem;text-align: left;}
    .master-title h2 br {display: block;}
    .master-title h2 b { font-size: 1.8rem; line-height: 1.5; }
    .master-title h4 br {display: none;margin: 0 0 20px;}

  
    
    section {padding: 60px 0;}
    section p, section li, section table tr td { font-size: 1.05rem; }
  
 
    /* 手機版排版全面轉向單欄 */
    .grid-2, .grid-4, .grid-3 { grid-template-columns: 1fr; } 
    
    /* 手機版文字大小適度縮放 */
    .hero-title-text { font-size: 2.25rem; }
    .text-5xl { font-size: 2.25rem; }
    .text-4xl { font-size: 1.75rem; }
    .text-3xl { font-size: 1.5rem; }
    .text-2xl { font-size: 1.25rem; }
    .text-xl { font-size: 1.15rem; }
    .text-md { font-size: 1.1rem; }  
    .md-only { display: none !important; }
    
    .flex-md-col { flex-direction: column !important; }
    .align-items-md-start { align-items: flex-start !important; }
  
    .gap-8 { gap: 1rem; }
     header.hero {background:url(../images/hero-bg-m.jpg) center top; 
    background-size: 100% auto;
    background-repeat: no-repeat; }
    header.hero .hero-layout { width:100%; }
    header.hero .header-con { padding: 30px ; height: auto;flex-direction: column;padding-top: 300px; }

  
    header.hero .header-con {  
      background: linear-gradient(0deg, #EFF2F9 60%,  #eff2f900 80%);
      height: 100vh;display: flex;flex-direction: column;justify-content: center;}
    header.hero .hero-badge h1 { font-size: clamp(3.5rem, 2.5vw, 4.2rem);  letter-spacing: clamp(0, 0.15vw, 0.2rem);font-weight: 900;  }
    header.hero h2 { font-size: clamp(1.4rem, 3.5vw, 1.8rem);  } 


    section.course-details .cert-grid { column-count: 1; }






  section.course-details .cert-grid .course-list { padding: 15px; }
  section.course-details .cert-grid .course-list ul li a { padding: 12px 12px; }
  section.course-details { background-size: 100%, 100%; }


  section.testimony-details .item-g .item {max-height: fit-content;flex-direction: column;  margin: 0 0 30px;padding: 20px;}
  section.testimony-details .item-g .item .photo {  width: 150px; flex-shrink: 0; overflow: hidden;margin-right: 20px;}
  section.testimony-details .item-g .item .photo img{  width: 100%; object-position: center top; }





    section#BTN {padding: 0 15px 60px 15px ;}
    section#BTN a { width: 100%; text-wrap: wrap; }
}












@media(max-width: 575px){
    .title h3 { font-size: 1.6rem; }
    h2{font-size: 1.6rem;}
    h3{font-size: 1.3rem;}
    h4{font-size: 1.2rem;}
    h5{font-size: 1.1rem;}
    .title h4 { font-size: 1.3rem; }

        .btn { padding: 10px 20px; font-size: 1.3rem; }
     

}