/* =======================================================
           基礎變數與重置
        ======================================================= */
        :root {
            --color-primary: #1e3a8a; /* blue-900 */
            --color-primary-light: #1e40af; /* blue-800 */
            --color-accent: #f97316; /* orange-500 */
            --color-accent-hover: #ea580c; /* orange-600 */
            --color-accent-light: #ffedd5; /* orange-100 */
            --text-main: #1f2937; /* gray-800 */
            --text-dark: #111827; /* gray-900 */
            --text-muted: #4b5563; /* gray-600 */
            --text-light: #6b7280; /* gray-500 */
            --bg-body: #f9fafb; /* gray-50 */
            --bg-white: #ffffff;
            --bg-courses: #f2f3f8;
            --border-color: #f3f4f6; /* gray-100 */
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            --font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        * {
            box-sizing: border-box;
     
        }

        html { scroll-behavior: smooth; }
        body {
            font-family: var(--font-family);
            background-color: var(--bg-body);
            color: var(--text-main);
            line-height: 1.5;
            min-height: 100vh;
            scroll-behavior: smooth;
        }

        a { text-decoration: none; color: inherit; }
        ul { list-style: none; }
        button { cursor: pointer; border: none; background: none; font-family: inherit; }
        .hidden { display: none !important; }



        section{ scroll-margin-top: 60px; }
        /* =======================================================
           共用佈局 (電腦版基礎樣式)
        ======================================================= */
        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 2rem;
        }
        .flex-center { display: flex; align-items: center; justify-content: center; }
        .flex-between { display: flex; align-items: center; justify-content: space-between; }
        .gap-2 { gap: 0.5rem; }
        .gap-3 { gap: 0.75rem; }
        .gap-4 { gap: 1rem; }
        
        .section-title { font-size: 1.875rem; font-weight: 700; color: var(--text-dark); margin-bottom: 1rem; text-align: center; }
        .section-desc { color: var(--text-muted); max-width: 48rem; margin: 0 auto; text-align: center; font-size: 1.125rem; }
        .mb-12 { margin-bottom: 3rem; }
        .py-16 { padding-top: 4rem; padding-bottom: 4rem; }

        /* 按鈕共用樣式 */
        .btn { padding: 0.75rem 2rem; border-radius: 0.5rem; font-weight: bold; text-align: center; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
        .btn-primary { background-color: var(--color-accent); color: white; box-shadow: var(--shadow-md); }
        .btn-primary:hover { background-color: var(--color-accent-hover); transform: translateY(-2px); }
        .btn-outline { background-color: var(--color-primary-light); color: white; border: 1px solid #2563eb; }
        .btn-outline:hover { background-color: #1d4ed8; }


        .text-center {text-align: center;}
    
        /* =======================================================
           導覽列 (Navbar)
        ======================================================= */
        .navbar {
            background-color: var(--bg-white);
            box-shadow: var(--shadow-sm);
            position: sticky;
            top: 0;
            z-index: 50;
            height: 4rem;
        }
        .nav-logo-img { height: 2.8rem; width: auto; max-width: 150px; object-fit: contain; border-radius: 0.25rem; }
   
        .nav-links { display: flex; gap: 2rem; }
        .nav-links a { color: var(--text-muted); font-weight: 600; transition: color 0.2s; }
        .nav-links a:hover { color: var(--color-accent-hover); }

        /* =======================================================
           Hero 英雄區塊
        ======================================================= */
        .hero {
            position: relative;
            background-color: var(--color-primary);
            overflow: hidden;
            padding: 6rem 0;
            z-index: 10;
        }
        .hero-bg-gradient {
            position: absolute; inset: 0;
            background: linear-gradient(to right, #1e3a8a, #3730a3);
            mix-blend-mode: multiply;
            z-index: -2;
        }
        .hero-bg-pattern {
            position: absolute; inset: 0; opacity: 0.1; z-index: -1;
            background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="1"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
        }
        
        .hero-content { display: flex; flex-direction: row; align-items: center; gap: 3rem; }
        .hero-text-area { flex: 1; margin-bottom: 0; padding-right: 2rem; }
        
        .badge-planning { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 9999px; background-color: var(--color-accent); color: white; font-size: 0.875rem; font-weight: bold; letter-spacing: 0.05em; margin-bottom: 1.5rem; }
        .hero-title { font-size: 3rem; font-weight: 800; color: white; line-height: 1.2; margin-bottom: 1rem; }
        .hero-title span { color: #fb923c; }
        .hero-desc { font-size: 1.125rem; color: #dbeafe; margin-bottom: 2rem; max-width: 36rem; }
        
        .hero-buttons { display: flex; flex-direction: row; gap: 1rem; }

        .hero-box { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); padding: 1.5rem; border-radius: 1rem; box-shadow: var(--shadow-xl); max-width: 28rem; width: 100%; }
        .hero-box-title { color: white; font-weight: bold; font-size: 1.25rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
        .hero-box-list { display: flex; flex-direction: column; gap: 1rem; color: #eff6ff;padding: 0; }
        .hero-box-item { display: flex; align-items: flex-start; gap: 0.75rem; }
        .hero-box-icon { background-color: var(--color-primary-light); padding: 0.375rem; border-radius: 0.375rem; display: flex; margin-top: 0.125rem; }


        /* =======================================================
           榮耀與認證區塊 (證書)
        ======================================================= */
        .cert-banner { background: linear-gradient(to right, #fff7ed, #ffedd5); border-top: 1px solid #fed7aa; border-bottom: 1px solid #fed7aa; padding: 1.5rem 0; box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.02); position: relative; z-index: 20; }

        .grid-text-img { display: grid !important; grid-template-columns: 1fr 300px !important; align-items: center;  gap: 2.5rem;  }
        .cert-image-area { width: 100% !important; max-width: none !important; } 
        .cert-image { width: 100%; height: auto; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); border: 4px solid white; display: block; background-color: white; transform: rotate(1deg); transition: transform 0.3s; }
        .cert-image:hover { transform: rotate(0deg) scale(1.02); }

        .cert-banner .text h5 {color: var(--color-accent); font-size: 1.25rem; margin-bottom: 0.75rem;}
        .cert-banner .text h5 .award {transform: translateY(2px);display: inline-block;}
        .cert-banner .text a {color: var(--color-primary);}
        .cert-banner .text a:hover {color: var(--color-primary-light);}




        /* =======================================================
           簡介網格 (特點介紹)
        ======================================================= */

        #about {padding: 60px 0;}
        .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
        
        .feature-card { background-color: var(--bg-white); padding: 2rem; border-radius: 1rem; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); transition: box-shadow 0.2s; }
        .feature-card:hover { box-shadow: var(--shadow-md); }
        .feature-icon { width: 3.5rem; height: 3.5rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
        .icon-blue { background-color: #dbeafe; color: #1d4ed8; }
        .icon-orange { background-color: #ffedd5; color: #ea580c; }
        .icon-green { background-color: #dcfce7; color: #15803d; }
        .feature-title { font-size: 1.25rem; font-weight: bold; color: var(--text-dark); margin-bottom: 0.75rem; }
        .feature-desc { color: var(--text-muted); line-height: 1.6; }

        /* =======================================================
           課程篩選與列表
        ======================================================= */

         #courses {padding: 60px 0;background-color: var(--bg-courses);}


        .course-title a {
            color: var(--color-primary); 
            text-decoration: none; 
            transition: color 0.2s;
        }
        .course-title a:hover {
            color: var(--color-primary-light);
            text-decoration: underline; 
        }





        .filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 2.5rem; }
        .filter-btn { padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; border: 1px solid #e5e7eb; background-color: var(--bg-white); color: var(--text-muted); transition: all 0.2s; box-shadow: var(--shadow-sm); }
        .filter-btn:hover { background-color: #fff7ed; color: var(--color-accent-hover); }
        .filter-btn.active { background-color: var(--color-accent); color: white; border-color: var(--color-accent); box-shadow: var(--shadow-md); }

        .courses-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
        
        .course-card { background-color: var(--bg-white); border-radius: 1rem; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.3s; height: 100%; }
        .course-card:hover { box-shadow: var(--shadow-xl); }
        
        .card-header { background-color: #e5eaf4; padding: 1rem 1.5rem; border-bottom: 1px solid #dbeafe; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; }
        .domain-main { display: flex; align-items: center; gap: 0.75rem; }
        .domain-prefix { background-color: #2a3c71; color: white; font-size: 0.875rem; font-weight: bold; padding: 0.25rem 0.625rem; border-radius: 0.375rem; box-shadow: var(--shadow-sm); letter-spacing: 0.05em; }
        .domain-name { font-size: 1rem; font-weight: bold; color: #2a3c71; letter-spacing: 0.025em; margin: 0; }
        .domain-sub { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: var(--color-accent-hover); background-color: rgba(255, 237, 213, 0.8); padding: 0.375rem 0.75rem; border-radius: 9999px; }

        .card-body { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
        .course-title { font-size: 1.25rem; font-weight: bold; color: var(--text-dark); margin-bottom: 0.75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .course-desc { color: var(--text-muted); font-size: 0.875rem; margin-bottom: 1.5rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
        
        .card-footer-wrapper { margin-top: auto; }
        .info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 0.5rem; background-color: var(--bg-body); padding: 1rem; border-radius: 0.75rem; margin-bottom: 1.5rem; font-size: 0.875rem; color: var(--text-main); }
        .info-item { display: flex; align-items: center; gap: 0.5rem; }
        .info-item.full-width { grid-column: span 2; align-items: flex-start; }
        .info-icon { color: #9ca3af; flex-shrink: 0; width: 16px; height: 16px; }
        .info-item strong { color: var(--text-dark); }
        .date-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: -0.125rem; }
        .date-tag { background-color: var(--bg-white); border: 1px solid #e5e7eb; padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; }
        .price-text { color: var(--color-accent-hover); font-weight: bold; }
        
        .btn-course { width: 100%; background-color: var(--color-primary); color: white; padding: 0.75rem; border-radius: 0.5rem; font-weight: 500; display: flex; justify-content: center; align-items: center; gap: 0.5rem; transition: background-color 0.2s; }
        .btn-course:hover { background-color: var(--color-primary-light); }
        .btn-course .chevron-icon { width: 18px; height: 18px; transition: transform 0.2s; }
        .btn-course:hover .chevron-icon { transform: translateX(4px); }

        .empty-state { text-align: center; padding: 5rem 0; background-color: var(--bg-white); border-radius: 1rem; border: 1px solid var(--border-color); display: none; }
        .empty-state.visible { display: block; }
        .empty-icon { color: #d1d5db; margin: 0 auto 1rem auto; width: 3rem; height: 3rem; }
        .empty-text { color: var(--text-light); font-size: 1.125rem; }

        /* =======================================================
           頁尾 (Footer)
        ======================================================= */
        footer { background-color: #111827 !important; color: #d1d5db; padding: 1.5rem 0; border-top: 1px solid #1f2937; }
        
        /* .footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
        
        .footer-logo-img { height: 2rem; width: auto; max-width: 120px; object-fit: contain; border-radius: 0.25rem; }
        .footer-title { color: white; font-weight: bold; margin-bottom: 1rem; font-size: 1.125rem; }
        .footer-text { font-size: 0.875rem; color: #9ca3af; margin-bottom: 1rem; line-height: 1.6; }
        .footer-links { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; color: #9ca3af; }
        .footer-links a { transition: color 0.2s; display: inline-flex; align-items: center; gap: 0.25rem; }
        .footer-links a:hover { color: var(--color-accent); }
        .footer-bottom { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #1f2937; text-align: center; font-size: 0.875rem; color: #6b7280; } */

        /* =======================================================
           電腦版與平板排版覆寫 (>= 768px)
        ======================================================= */
       @media (max-width: 768px) {
            
            /* 共用佈局縮小左右間距 */
            .container { padding: 0 1rem; }

            /* 導覽列：隱藏選單連結 */
            /* .nav-links { display: none; } */
             .nav-logo-img { height: 2.2rem; }
   
            /* Hero 區塊：改為上下單欄排列 */
            .hero-content { flex-direction: column; }
            .hero-text-area { margin-bottom: 3rem; padding-right: 0; }
            .hero-title { font-size: 2.25rem; }
            .hero-buttons { flex-direction: column; }

            /* 榮耀認證區塊：證書圖文改為上下排列 */
            .grid-text-img { grid-template-columns: 1fr !important;  text-align: center;  }
            .cert-image-area { width: 100% !important; max-width: 400px !important;  justify-self: center !important; margin-top: 1rem; }
            .cert-banner { padding: 2rem 1rem; }


            /* 簡介網格：一行 1 個區塊 */
            .features-grid { grid-template-columns: 1fr; }

            /* 課程列表：一行 1 張卡片 */
            .courses-grid { grid-template-columns: 1fr; }

            /* 頁尾：一行 1 個資訊區塊 */
            .footer-grid { grid-template-columns: 1fr; }


             /* 手機版課程卡片資訊區塊微調：增加寬度利用率 */
            .info-grid { padding: 0.75rem; gap: 0.75rem 0.25rem; }
            .date-tag { padding: 0.125rem 0.25rem; font-size: 0.7rem; }
        }