/* 定義螢光筆動畫 */
        @keyframes highlight-draw {
            0% {
                background-size: 0% 60%;
            }

            100% {
                background-size: 100% 60%;
            }
        }

        .animate-marker {
            position: relative;
            padding: 2px 6px;
            /* 左右留點空隙比較好看 */
            border-radius: 3px;
            transition: all 0.3s ease;
        }

        /* 使用偽元素來放置背景，這樣透明度不會影響文字 */
        .animate-marker::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: linear-gradient(to right, rgba(186, 230, 253, 0.5) 0%, rgba(125, 211, 252, 0.6) 100%);
            /* 淺藍色漸層 */
            background-repeat: no-repeat;
            background-position: left center;
            background-size: 0% 60%;
            /* 一開始寬度是 0，高度60% */
            border-radius: 3px;
            z-index: -1;
        }

        /* 當滑鼠移到區塊上時才觸發動畫 */
        .group:hover .animate-marker::before {
            animation: highlight-draw 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        /* 定義背景流動動畫 */
        @keyframes shine-flow {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        .cool-gradient-text {
            /* 設定一個超寬的漸層背景，包含品牌的主色、亮色、甚至一點點互補色 */
            background: linear-gradient(90deg,
                    #006B63 0%,
                    /* brand-800 */
                    #2DD4BF 25%,
                    /* brand-400 */
                    #ffffff 50%,
                    /* 中間閃過一道白光 */
                    #2DD4BF 75%,
                    /* brand-400 */
                    #006B63 100%
                    /* brand-800 */
                );
            background-size: 200% auto;
            /* 讓背景比文字寬很多 */
            color: transparent;
            /* 讓文字變透明 */
            -webkit-background-clip: text;
            /* 把背景剪裁成文字形狀 */
            background-clip: text;
            animation: shine-flow 6s linear infinite;
            /* 設定動畫時間 */
        }

        /* 三層菱形圖標動畫 - 純上下移動，散開效果 */
        @keyframes diamond-float-1 {

            0%,
            100% {
                transform: translateY(4px) rotate(45deg);
            }

            50% {
                transform: translateY(-4px) rotate(45deg);
            }
        }

        @keyframes diamond-float-2 {

            0%,
            100% {
                transform: translateY(0px) rotate(45deg);
            }

            50% {
                transform: translateY(-8px) rotate(45deg);
            }
        }

        @keyframes diamond-float-3 {

            0%,
            100% {
                transform: translateY(-4px) rotate(45deg);
            }

            50% {
                transform: translateY(-12px) rotate(45deg);
            }
        }

        /* =========================================
           STYLE B: ESG NATURE (清新毛玻璃風格)
           適用對象：碳權管理師的詳細區塊
           ========================================= */
        #esg-detail-section {
            /* 1. 背景：半透明毛玻璃 */
            background: rgba(255, 255, 255, 0.75);
            /* 75% 透明白 */
            backdrop-filter: blur(12px) saturate(180%);
            /* 關鍵：背景模糊 + 色彩增豔 */
            -webkit-backdrop-filter: blur(12px) saturate(180%);

            /* 2. 邊框：極細的白色亮邊，像玻璃邊緣 */
            border: 1px solid rgba(255, 255, 255, 0.8);
            border-radius: 24px;

            /* 3. 陰影：柔和的自然陰影 */
            box-shadow:
                0 10px 30px rgba(0, 0, 0, 0.05),
                /* 基礎陰影 */
                0 1px 0 rgba(255, 255, 255, 0.6) inset;
            /* 內部高光 */

            padding: 40px;
            margin-top: 30px;

            /* 應用動畫 */
            animation: naturalGrow 0.8s ease-out forwards;
        }

        /* 4. 動畫：像植物生長般「上浮 + 淡入」 */
        @keyframes naturalGrow {
            0% {
                opacity: 0;
                transform: translateY(30px);
                /* 從下方升起 */
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* --- 3D Ring Carousel Styles --- */
        .carousel-scene {
            width: 100%;
            height: 520px;
            /* Reduced height for 5:3 cards */
            position: relative;
            perspective: 2000px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: visible;
            margin-top: 4rem;
        }

        .carousel-track {
            width: 100%;
            height: 100%;
            position: absolute;
            transform-style: preserve-3d;
        }

        .carousel-card {
            width: 510px;
            height: 306px;
            /* 5:3 ratio, scaled to 2/3 */
            position: absolute;
            top: 107px;
            /* Offset to align card center with arrow buttons */
            left: 50%;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
            backface-visibility: hidden;
            background: white;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .carousel-controls {
            position: absolute;
            top: 50%;
            left: -80px;
            right: -80px;
            width: calc(100% + 160px);
            transform: translateY(-50%);
            display: flex;
            justify-content: space-between;
            padding: 0;
            pointer-events: none;
            z-index: 100;
        }

        .carousel-btn {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.9);
            color: #006B63;
            border: 1px solid #e5e7eb;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            cursor: pointer;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
            transition: all 0.3s;
            pointer-events: auto;
            backdrop-filter: blur(5px);
        }

        .carousel-btn:hover {
            transform: scale(1.1);
            background: white;
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
        }


/* === 轉換自 inline style="" === */
.is-2cd3eef8 {
    background: linear-gradient(180deg, #F0FDF9 0%, #FFFBEB 100%);
}

.is-374a538b {
    background: radial-gradient(circle, rgba(240, 253, 249, 0.8) 0%, transparent 70%);
}

.is-b6344c5d {
    background: radial-gradient(circle, rgba(204, 251, 241, 0.4) 0%, transparent 70%);
}

.is-24b5bd6e {
    background: radial-gradient(circle, rgba(255, 251, 235, 0.8) 0%, transparent 70%);
}

.is-486b3a56 {
    background: radial-gradient(circle, rgba(254, 243, 199, 0.6) 0%, transparent 70%);
}

.is-ee96a386 {
    animation: diamond-float-1 3s ease-in-out infinite;
}

.is-64bc24ee {
    animation: diamond-float-2 3s ease-in-out infinite 0.3s;
}

.is-cd4cca5f {
    animation: diamond-float-3 3s ease-in-out infinite 0.6s;
}

.is-e749de94 {
    object-position: center 3px;
}

.is-0f8c74d1 {
    color: #004d40;
}

.is-8302605d {
    color: #374151;
}

.is-851f6355 {
    min-height: 250px;
    border: 0;
}

:lang(en) .cert-unit { display: none; }

/* English: taller section so flex centering doesn't push content to top */
:lang(en) .netzero-hero-section {
    margin-left: 5rem !important;
    margin-right: auto !important;
    min-height: 680px !important;
}