/* ==========================================
           universal.css - 佈局與通用類別 (Desktop-First 延伸)
           ========================================== */
        * { 
            box-sizing: border-box; 
        }
        body {
            font-family: var(--font-sans);
            background-color: var(--contrast-100);
            color: var(--slate-800);
            overflow-x: hidden;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;}
        html { 
            scroll-behavior: smooth; 
        }
        
        .container {
            width: 100%;
            max-width: 1380px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        /* Flexbox 排版 */
        .flex { display: flex; flex-direction: row; }
        .flex-col { flex-direction: column; }
        .flex-wrap { flex-wrap: wrap; }
        .items-center { align-items: center; }
        .items-start { align-items: flex-start; }
        .justify-between { justify-content: space-between; }
        .justify-center { justify-content: center; }
        
        .gap-1 { gap: 0.25rem; }
        .gap-2 { gap: 0.5rem; }
        .gap-3 { gap: 0.75rem; }
        .gap-4 { gap: 1rem; }
        .gap-6 { gap: 1.5rem; }
        .gap-8 { gap: 2rem; }
        .gap-12 { gap: 3rem; }
        .gap-16 { gap: 4rem; }
        
        /* 定位與層級 */
        .relative { position: relative; }
        .absolute { position: absolute; }
        .fixed { position: fixed; }
        .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
        .z-10 { z-index: 10; }
        .z-40 { z-index: 40; }
        .z-50 { z-index: 50; }

        /* 寬度與文字 */
        .w-full { width: 100%; }
        .text-center { text-align: center; }
        .text-left { text-align: left; }
        .text-right { text-align: right; }
        .text-white { color: var(--white); }
        .text-primary { color: var(--primary); }
        .text-secondary { color: var(--secondary) !important; }
        .text-muted { color: var(--text-500); }
        
        /* 字型權重 */
        .font-bold { font-weight: 700; }
        .font-extrabold { font-weight: 800; }
        .font-medium { font-weight: 500; }
        .font-semibold { font-weight: 600; }
        .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

        /* 級別文字大小 */
        .text-xs { font-size: 0.75rem; }
        .text-sm { font-size: 0.875rem; }
        .text-md { font-size: 1rem; }
        .text-lg { font-size: 1.125rem; line-height: 1.6; }
        .text-xl { font-size: 1.25rem; }
        .text-2xl { font-size: 1.5rem; line-height: 1.6; }
        .text-3xl { font-size: 1.875rem; line-height: 1.4; }
        .text-4xl { font-size: 2.25rem; line-height: 1.3; }
        .text-5xl { font-size: 3rem; line-height: 1.4; }
        .text-6xl { font-size: 3.25rem; line-height: 1.3; }
        
        /* Grid 網格系統 */
        .grid { display: grid; }
        .grid-2 { grid-template-columns: repeat(2, 1fr); }
        .grid-3 { grid-template-columns: repeat(3, 1fr); }
        .grid-4 { grid-template-columns: repeat(4, 1fr); }
        .grid-12 { grid-template-columns: repeat(12, 1fr); }

        /* 邊距調整 */
        .mt-2 { margin-top: 0.5rem; }
        .mt-4 { margin-top: 1rem; }
        .mt-6 { margin-top: 1.5rem; }
        .mt-8 { margin-top: 2rem; }
        .mt-12 { margin-top: 3rem; }
        .mb-2 { margin-bottom: 0.5rem; }
        .mb-4 { margin-bottom: 1rem; }
        .mb-6 { margin-bottom: 1.5rem; }
        .mb-8 { margin-bottom: 2rem; }
        .mb-12 { margin-bottom: 3rem; }
        .mb-16 { margin-bottom: 4rem; }
        
        /* ==========================================
           專案特色與元件樣式 (Custom UI Styles)
           ========================================== */
        
        /* 氛圍背景柔光 Glows */
        .glow-ambient-1 {
            width: 450px; height: 450px;
            background: rgba(224, 83, 60, 0.05);
            border-radius: var(--radius-full);
            filter: blur(80px);
            top: 0; left: 15%;
            pointer-events: none;
        }
        .glow-ambient-2 {
            width: 500px; height: 500px;
            background: rgba(79, 70, 229, 0.04);
            border-radius: var(--radius-full);
            filter: blur(80px);
            top: 35%; right: 5%;
            pointer-events: none;
        }



        @media (max-width: 1024px) {
            .grid-12 { grid-template-columns: 1fr; }
            .hero-right-col { margin-top: 3rem; }
            .hero-stats { grid-template-columns: repeat(2, 1fr); }
        }










        @media (max-width: 768px) {
             /* 手機版全部變單欄 */
            .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-md { font-size: 1.1rem; }
            
            /* 隱藏原本只在電腦顯示的區塊 */
            .md-only { display: none !important; }
            
            /* 行動版 flex 排版轉向 */
            .flex-md-col { flex-direction: column !important; }
            .align-items-md-start { align-items: flex-start !important; }
            
            /* 移除多餘邊距或微調 */
            .gap-8 { gap: 1rem; }
            

          
        }