@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;700;900&family=Noto+Serif+TC:wght@700&display=swap');
        
        /* ==========================================
           main.css - 變數與核心設定 (修正為溫潤 Claude 暖光色系)
           ========================================== */
        :root {
             /* 主色調 */
            --primary: #a855f7;          /* 科技紫 (AI Agent/紫隊代表色) */
            --primary-hover: #8b5cf6;    /* 科技紫 hover */
            --secondary: #65b2ff;        /* 科技藍 (藍隊防禦代表色) */
            --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: #71717a;        /* 靜態輔助文字暗灰 */
            --slate-600: #a1a1aa;        /* 次要內文灰 */
            --slate-700: #d0c8db;        /* 亮色內文 */
            --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%;}

        /* 影片按鈕外掛 */ 

        .plyr { /* 1. 中央大播放按鈕的「圓圈大小」（預設是 48px） */ --plyr-control-radius: 50%; /* 保持正圓 */
        
          /* 2. 調整中間大按鈕內部三角形（Icon）的大小（預設是 18px） */ --plyr-control-icon-size: 24px; }

        /* 3. 如果想直接強行放大整個「中央大按鈕的外框」 */
        .plyr__control--overlaid { padding: 20px; /* 增加內距，按鈕圓圈就會變大，預設是 10px */ }
        
        /* 4. 如果想調整「左下角控制列」所有小按鈕的大小（預設是 14px） */
        .plyr__controls .plyr__control svg { width: 18px; height: 18px; }






       
      

::selection { background-color: #6822af; color: white; } 
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 {color: var(--primary-hover);}
h1, h2, h3, h4, h5, h6 { font-weight: 600;}

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


/* 輪播 */
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #ff7876 !important; }
.owl-theme .owl-dots .owl-dot span, .owl-theme .owl-dots .owl-dot span { background: #c5b9b6 !important; }


/* 共通 */
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: 16px 36px;
            font-size: 1.1rem;
            font-weight: 700;
            border-radius: var(--radius-lg);
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            border: none;
          }
        .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle { color: rgb(255, 255, 255); background-color:var(--primary); border-color:  var(--slate-200);outline: none;box-shadow: 0 0 0 .2rem rgba(0, 123, 255, 0);}
        .btn-primary.focus, .btn-primary:focus {
            box-shadow: 0 0 0 .2rem rgba(0, 123, 255, 0) !important;
        }
        .btn-primary {
            background-color: var(--primary);
            color: var(--white);
          
        }
        .btn-primary:hover {
            background-color: var(--primary-hover);
   
            border-color: var(--slate-300);
            transform: scale(1.1);
        }
        .btn-secondary {
            background-color: var(--white);
            border-color: var(--slate-200);
            color: var(--slate-800);
            box-shadow: var(--shadow-sm);
            
        }
        .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle { color: var(--slate-700); background-color: var(--slate-100); border-color: transparent; }
        .btn-secondary.focus, .btn-secondary:focus { box-shadow: 0 0 0 .2rem rgba(108, 117, 125, 0); }
        .btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show>.btn-secondary.dropdown-toggle:focus {
            box-shadow: 0 0 0 .1rem rgba(108, 117, 125, .2);
        }

      


     .btn-big {display: inline-flex; align-items: center; justify-content: center; padding: 16px 36px; font-size: 1.6rem; font-weight: 700; border-radius: var(--radius-lg); cursor: pointer; transition: all 0.3s ease; text-decoration: none; background: linear-gradient(135deg, #8B5AF5 0%, #9234EA 50%, #0BB0D4 100%);color: #fff; border: none ;width: 40%;}
  .btn-big:hover {color: #fff;}


















    .section-subtitle {
      color: var(--primary);
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 0.9rem;
      font-weight: 700;
      margin-bottom: 12px;
      display: inline-block;
      padding: 4px 12px;
      background: rgba(168, 85, 247, 0.1);
      border-radius: var(--radius-full);
      border: 1px solid var(--contrast-400);
    }


    

  

    .shadow-neon-purple {
    box-shadow: 0 0 #0000, 0 0 #0000, 0 0 20px rgba(139, 92, 246, 0.35);     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(to right,#8B5BF6,#9334EA,#19A4D7);}
    .shadow-neon-purple:hover {transform-origin: center;transform: scale(1.1);}
    #bg-canvas {width: 100%;height: 100%;position: fixed;z-index: 0;}

    /* ========================================================================
       5. Component: 主頁英雄區塊 (Hero Header)
       ======================================================================== */
    header.hero { padding: 120px 80px 100px; overflow: hidden;position: relative; }
    header.hero video {width: 100%;height: 100%;position: absolute;top: 1%;left:1.5%;object-fit: cover;object-position: center center;opacity: .85;z-index: 0;transform: scale(1.15);}
    header.hero .header-con{ width: 58%;padding: 2rem;background:radial-gradient(circle farthest-corner at left,rgba(0, 0, 0, 0.75),rgba(0, 0, 0, 0.65));border-radius: 2rem;box-shadow: var(--shadow-sm) ; z-index: 999; backdrop-filter: blur(3px);}

  
    header.hero .hero-badge h1 {font-size:4rem;font-weight: 900;line-height: 1.2;letter-spacing: .25rem;margin: 20px 0 0;}
    header.hero .hero-badge h1 span{background: linear-gradient(135deg, #F472B6 0%, #C084FC 50%, #818CF8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
    header.hero  h2.hero-title-text {font-weight: 600;font-size: 1.7rem;margin: 20px 0 30px;color: #05c8eb;}


  
    header.hero .hero-feature-item svg { color: var(--primary); flex-shrink: 0; stroke-width: 3px;}
    header.hero .hero-feature-item span {font-size: 1.2rem;font-weight: 600;}
    header.hero .glow-ambient-1 {
      width: 600px; height: 600px;
      background: rgba(168, 85, 247, 0.5);
      border-radius: var(--radius-full);
      filter: blur(80px);
      top: 0; left: 12%;
      pointer-events: none;
      z-index: 99;border: 1px solid red;position: absolute;
    }
    header.hero .glow-ambient-2 {
      width: 450px; height: 450px;
      background: rgba(59, 130, 246, 0.4);
      border-radius: var(--radius-full);
      filter: blur(80px);
      top: 35%; right: 80%;
      pointer-events: none;   z-index: 99;position: absolute;
    }
  





 

    /* ========================================================================
     Component: 企業痛點區塊 (Pain Points Section)
       ======================================================================== */
    section.pain-points {
      background: linear-gradient(45deg,rgba(20, 20, 20, 0.2) 40%,rgba(25, 15, 49, 0.5) 100%);
      border-top: 1px solid var(--slate-300);
      border-bottom: 1px solid var(--slate-300);

    }

 
    section.pain-points .pain-stat-card {
      background: rgba(115, 84, 145, 0.08);
      border: 1px solid var(--slate-400);
      border-radius: var(--radius-lg);
      padding: 32px;
      overflow: hidden;
      width: 100%;
      box-shadow: var(--shadow-sm);backdrop-filter: blur(3px);
    }

    section.pain-points .pain-stat-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background-color: var(--purple);
    }

    section.pain-points .pain-stat-title {
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--accent-rose);
      margin-bottom: 12px;
    }

    /* ========================================================================
        Component: 三 Agent 攻防循環 (Agent Flow Section)
       ======================================================================== */
    section.pain-points .flow-wrapper { background: rgba(115, 84, 145, 0.08); border: 1px solid var(--slate-400); border-radius: var(--radius-xl); padding: 30px; margin: 40px 0;;backdrop-filter: blur(3px); }

    section.pain-points .flow-column {
      background: rgba(115, 84, 145, 0.08);
      border-radius: var(--radius-lg);
      padding: 30px;
      border: 1px solid var(--slate-400);
    }
  






    section.pain-points .flow-column-red { border-top: 4px solid var(--accent-rose); }
    section.pain-points .flow-column-blue { border-top: 4px solid var(--secondary); }
        section.pain-points .flow-column-purple { border-top: 4px solid var(--purple); }
    section.pain-points .column-title { font-size: 1.5rem; font-weight: 800; display: flex; align-items: center; gap: 10px;justify-content: center; }

    section.pain-points .column-title-red { color: var(--accent-rose); } 
    section.pain-points .column-title-blue { color: var(--secondary); }
    section.pain-points .column-title-purple { color: #aa83ff; }
    section.pain-points .step-item { background: rgba(0, 0, 0, 0.3); padding: 16px 20px; border-radius: 8px; border: 1px solid var(--slate-300); }

    section.pain-points .step-number { width: 28px; height: 28px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 700; color: var(--white); }

    section.pain-points .flow-column-red .step-number { background-color: var(--accent-rose); }
    section.pain-points .flow-column-blue .step-number { background-color: var(--secondary); }


    section.pain-points .flow-header {margin: 0;}
    section.pain-points .flow-header h3{margin: 0 0 30px;}

    section.pain-points .flow-vs { display: flex; flex-direction: column; align-items: center; justify-content: center; }

    section.pain-points .vs-badge { width: 60px; height: 60px; background: linear-gradient(135deg, var(--accent-rose) 0%, var(--secondary) 100%); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.3rem; color: var(--white); box-shadow: var(--shadow-md); }

    section.pain-points .vs-line { width: 2px; height: 80px; background: linear-gradient(to bottom, var(--accent-rose), var(--primary), var(--secondary)); }

    /* 抽離行內 style 的紫隊評估標籤 */
    section.pain-points .vs-score { color: var(--white); background: rgba(168, 85, 247, 0.2); padding: 4px 10px; border-radius: 4px; }
    section.pain-points .flow-footer p{text-align: center;align-items: flex-start;}


    section.pain-points .lesson-con {  border-radius: var(--radius-xl); padding: 30px; backdrop-filter: blur(10px);margin: 40px 0;    background: rgba(140, 76, 236, 0.3);
    border: 1px solid #411e827a; transition: all 0.3s ease;backdrop-filter: blur(3px); }

    section.pain-points .lesson-con .text {border-left:1px solid rgb(139 92 246 / 0.3); padding-left: 30px;}
    section.pain-points .lesson-con .text b {color: var(--slate-800);font-weight: 600;font-size: 1.125rem;border-bottom: 2px solid #05c8eb;}
    section.pain-points .lesson-con .text br {margin: 0 0 20px;}
    section.pain-points .lesson-con h4 {margin: 20px 0;color: #EA8546;display: flex;align-items: center;}
    section.pain-points .lesson-con h4 svg {margin-right: 8px;}

    section.pain-points .lesson-con .text .im {background-color: rgba(7, 118, 137, 0.15);border-radius: 15px;padding: 10px 20px;border: 1px solid #03cff324;box-shadow: 0 0 20px #05c9eb1c;}
    section.pain-points .lesson-con .text .im p {color: #05c8eb;}

    section.pain-points  a {display: block ;text-decoration: none;}
    section.pain-points  a:hover .lesson-con {transform-origin: center;transform: scale(1.05); border: 1px solid var(--contrast-500);}




    
    .pulse-primary{animation: pulse-primary 2s infinite;}
    @keyframes pulse-primary {
          0% { box-shadow: 0 0 0 0 rgba(156, 38, 220, 0.4);  }
          70% { box-shadow: 0 0 0 20px rgba(220, 38, 38, 0); }
          100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);  }
      }



    /* ========================================================================
       Component: 課程詳情與核心元件 (Course Details & Components)
       ======================================================================== */
    section.course-details { border-top: 1px solid var(--slate-300); border-bottom: 1px solid var(--slate-300);background:linear-gradient(to bottom,#120821d7,#0a0617) ,url(../images/course-bg.jpg); background-size: cover;background-attachment: fixed;background-position: center;}
    section.course-details .course-intro-box { background: rgba(255, 255, 255, 0.01); border: 1px solid var(--slate-300); border-radius: var(--radius-lg); padding: 40px; }
    section.course-details .course-hours { display: inline-block; background: rgba(168, 85, 247, 0.15); border: 1px solid var(--primary); color: var(--white); padding: 6px 16px; border-radius: 6px; font-weight: 700; font-size: 1.1rem; }
    section.course-details .component-card { background: rgba(168, 85, 247, 0.05); border: 1px solid #411e827a; border-radius: var(--radius-lg); padding: 30px; backdrop-filter: blur(3px);transition: all 0.3s ease;position: relative;width: 100%;background-position: center top;      }
    section.course-details .component-card:hover { transform: translateY(-5px); border-color: var(--contrast-500); box-shadow: var(--shadow-lg);transform: scale(1.05); }
    section.course-details .component-num { font-size: 3.5rem; font-weight: 900; color: rgba(163, 105, 245, 0.15); line-height: 1; z-index: 99;position: relative;}
    section.course-details .component-icon { width: 48px; height: 48px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--primary); border: 1px solid var(--contrast-400); }

    section.course-details .component-card:nth-child(1) .component-icon{   background: #7E52E0;}
    section.course-details .component-card:nth-child(2) .component-icon{   background: #D946EF;}
    section.course-details .component-card:nth-child(3) .component-icon{   background: #06B6D4;}
    section.course-details .component-card .component-icon svg {color: #fff;}


    section.course-details .component-card::after {width: 100%;height: 100%;position: absolute;opacity: .2;transition: all .3s ease-in;}
    section.course-details .component-card:hover::after {opacity: .5;}
    section.course-details .component-card:nth-child(1)::after {content: ""; background: url(../images/course-photo-01.png);background-size: contain;top: -8%;left: 20%;background-repeat: no-repeat;width: 90%;height:90%;}

    section.course-details .component-card:nth-child(2)::after {content: ""; background: url(../images/course-photo-02.png);background-size: contain;top: -5%;left: 10%;background-repeat: no-repeat;}

    section.course-details .component-card:nth-child(3)::after {content: ""; background: url(../images/course-photo-03.png);background-size: contain;top: -5%;left: 15%;background-repeat: no-repeat;}






    /* ========================================================================
        Component: 錯位疊層比較卡片 (Before/After Efficiency)
       ======================================================================== */
    section.efficiency { background: linear-gradient(225deg,rgba(20, 20, 20, 0.1) 40%,rgba(25, 15, 49, 0.5) 100%); border-top: 1px solid var(--slate-300); border-bottom: 1px solid var(--slate-300); }
    section.efficiency .comparison-title-banner { display: inline-flex; align-items: center; padding: 10px 24px; border-radius: 8px; }
    section.efficiency .red-banner { background: rgba(132, 7, 7, 0.5); border: 1px solid rgba(239, 68, 68, 0.2); color: var(--accent-rose); }
    section.efficiency .blue-banner { background: rgba(59, 130, 246, 0.5); border: 1px solid rgba(90, 153, 255, 0.3); color: var(--secondary); }
    section.efficiency .purple-banner { background:rgb(41, 0, 72); border: 1px solid rgba(199, 81, 245, 0.3); color:#c074ff; }



    section.efficiency .stagger-group { min-height: 450px; }
    section.efficiency .stagger-card { width: 52%; border-radius: var(--radius-xl); padding:40px 30px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
    section.efficiency .card-before { border: 1px solid var(--slate-400); backdrop-filter: blur(3px); left: 0; z-index: 10; transform: scale(0.95); padding: 40px 50px 40px 30px; opacity: 1; background: rgba(115, 84, 145, 0.08); border-radius: var(--radius-lg); }
    section.efficiency .card-after { background: rgba(82, 47, 115, 0.1); backdrop-filter: blur(8px); right: 0; z-index: 20; transform: translateY(30px); border: 1px solid var(--slate-300); border-radius: var(--radius-lg); }

    section.efficiency .red-stagger .card-after { border: 2px solid var(--accent-rose); box-shadow: var(--shadow-md); }
    section.efficiency .blue-stagger .card-after { border: 2px solid var(--secondary); box-shadow: var(--shadow-md); }
  
    section.efficiency .card-after p {color: var(--slate-900);}


    /* 用於替代 HTML 行內 style，讓最後一個 comparison 底部邊距歸零 */
    section.efficiency .comparison-container-last { margin-bottom: 0 !important; }
    section.efficiency .stagger-card h5 { letter-spacing: 1px; display: inline-block; padding: 4px 10px; border-radius: 4px; }

    section.efficiency .card-before h5 { background: rgba(113, 113, 122, 0.15); color: var(--slate-600); }
    section.efficiency .red-stagger .card-after h5 { background: rgba(239, 68, 68, 0.15); color: var(--accent-rose); }
    section.efficiency .blue-stagger .card-after h5 { background: rgba(59, 130, 246, 0.15); color: var(--secondary); } 

    section.efficiency .card-before .stagger-list li::before { background-color: var(--slate-500); }
    section.efficiency .red-stagger .card-after .stagger-list li::before { background-color: var(--accent-rose); }
    section.efficiency .blue-stagger .card-after .stagger-list li::before { background-color: var(--secondary); }

    section.efficiency .card-after .stagger-list li { color: var(--slate-900); }
    section.efficiency .card-after-summary { border-top: 1px solid var(--slate-300); }
    section.efficiency .card-after-summary svg {width: 20px;stroke-width: 2px;margin-right: 8px;transform: translateY(5px);}
    section.efficiency .card-after-summary p {margin: 0;}


    section.efficiency .stagger-group:hover .card-before { transform: scale(0.92) translateX(-10px);opacity: .7; }
    section.efficiency .stagger-group:hover .card-after { transform: translateY(15px) scale(1.05); }




    section.efficiency .video-con-g {margin: 100px auto 30px;}
    section.efficiency .video-con-g ul.purple-list  {list-style: none;padding: 0 0 0 25px;}
    section.efficiency .video-con-g ul.purple-list li {display: flex;align-items: center;font-size: 1.125rem;margin: 0 0 20px;font-weight: 600;color: #fff;} 

    section.efficiency .video-con-g ul.purple-list li span {width: 28px;height: 28px;align-items: center;border-radius: 50%;background-color: #7E52E0;display: flex;align-items: center;justify-content: center;margin-right: 8px; font-size: 0.9rem;font-weight: 700; border-radius: var(--radius-full);}

   



    /* ========================================================================
       11. Component: 科學化防禦驗證 (Scientific Validation)
       ======================================================================== */
    section.validation {background:linear-gradient(to bottom,#0000007e,#000000b8) ,url(../images/target-photo.jpg);background-size: cover; background-attachment: fixed;background-position:right center  ; }
    section.validation .target-box-g {margin: 0 auto  20px;width:80%;}
   
    section.validation .target-box {display: flex;margin: 0 0 20px;align-items: center; background: rgba(0, 0, 0, 0.3); padding: 16px 20px;background: rgba(168, 85, 247, 0.05); border: 1px solid #411e827a; border-radius: var(--radius-lg); padding: 30px; transition: all 0.3s ease; backdrop-filter: blur(3px);}
      section.validation .target-box .icon {margin: 8px 10px 0 0 ;}
    section.validation .target-box .icon svg{ color: #D946EF;width:35px;height: 35px;stroke-width: 2px;}
    section.validation .target-box:hover { transform: translateY(-5px); border-color: var(--contrast-500); box-shadow: var(--shadow-lg);transform: scale(1.05); }
    section.validation .warning-text  {text-align: center;margin: 30px auto 0;}
    section.validation .warning-text  h5 { color: var(--accent-rose); display: inline-block;    letter-spacing: 1px; padding: 4px 10px; border-radius: 4px; margin: 0; }
    section.validation .warning-text svg {margin:0 6px 0 0 ;transform: translateY(5px);width: 22px;height: 22px;}

    section.validation .target-box span {color: var(--slate-800);font-weight: 600;font-size: 1.125rem;border-bottom: 2px solid #05c8eb;}

      /* background: linear-gradient(225deg,rgba(20, 20, 20, 0.1) 40%,rgba(25, 15, 49, 0.5) 100%); */




  /* ========================================================================
    Component: 實作收穫與靶場好禮 (Course Outcomes & Gift)
      ======================================================================== */
    section.outcomes { background: linear-gradient(20deg,rgba(20, 20, 20, 0.2) 40%,rgba(25, 15, 49, 0.5) 100%); border-top: 1px solid var(--slate-300);padding: 6rem 0 3rem; }

    section.outcomes .outcome-card { background: rgba(115, 84, 145, 0.08); border: 1px solid var(--slate-400); border-radius: var(--radius-lg); padding: 32px; overflow: hidden; width: 100%; box-shadow: var(--shadow-sm);backdrop-filter: blur(3px); }


    section.outcomes .outcome-card .icon {margin-right: 8px;}
    section.outcomes .outcome-card .icon svg {width: 40px;height: 40px;}
    section.outcomes .outcome-card:nth-child(1) .icon svg {color: #a659ff;}
    section.outcomes .outcome-card:nth-child(2) .icon svg {color: #06B6D4;}
    section.outcomes .outcome-card:nth-child(3) .icon svg {color: #D946EF;}
    section.outcomes .outcome-card:nth-child(4) .icon svg {color: #737dff;}



    section.outcomes .bonus-box { border-radius: var(--radius-xl); padding: 30px; backdrop-filter: blur(10px);margin: 40px 0;    background: rgba(140, 76, 236, 0.15); border: 1px solid #411e827a; transition: all 0.3s ease;backdrop-filter: blur(3px); }

  
  section#BTN {background:  linear-gradient(to bottom,rgba(20, 20, 20, 0.2) 20%,rgba(25, 15, 49, 0.5) 100%); padding: 0 0 6rem;}











   

   
    /* ========================================================================
       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;}

  




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

     nav ul li { font-size: 1.1rem; }

}

@media(max-width:991px){

    .master-title { width:100%; }
    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;}
    nav {position: relative;padding: 0;box-shadow: none;}
    nav ul li img { width: 20px; }
    nav ul { flex-direction: column;max-width: 100%; }
    nav ul li { margin:10px 0; }

    .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;}

    .btn-lg {padding: 1rem;}
    
    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 { padding:15px; }
    header.hero video {width: 100%;height: auto;position: absolute;top: 15%;left:auto;right: -220px;object-fit: cover;object-position: center center;opacity: .85;z-index: 0;transform: scale(3);transform-origin: right center;z-index: 1;}
    header.hero::before {content:"" ;   background: linear-gradient(to top,#2e2d6e 50%,#0033ff00);width:100%;height:500px;z-index: 99; position: absolute;bottom: 0;left: 0;}

    header.hero .header-con { width: 100%; padding: 1.5rem;margin:120px auto 0; }
    header.hero .hero-badge h1 { font-size: 2.6rem; letter-spacing: .15rem;text-align: justify; }
    header.hero .hero-badge h1 br {display: none;}
    header.hero h2.hero-title-text { font-size: 1.4rem; }
    header.hero .hero-feature-item span { font-size: 1.15rem; }


    section.pain-points .lesson-con .text { border-left:none; border-top: 1px solid rgb(139 92 246 / 0.3); padding-left: 0px; padding-top: 30px; }

        section.pain-points .column-title { flex-direction: column; }



    section.efficiency .card-before { padding:20px; }
    section.efficiency .stagger-card { padding:20px; }


    section.efficiency .video-con-g ul.purple-list { padding: 0 0 0 10px; }

    section.validation .target-box-g { margin: 0 auto 20px; width: 100%; }
    
    section#BTN {padding: 0 15px 60px 15px ;}
    section#BTN a { width: 80%; 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; }


}